Weblap

[enjoys1ng1ng]

Sziasztok!

 

Megint NAGYON butát kérdezek - alig merem: Meg tudom nézni a monitoron, hogy hogyan nézne ki a készített oldal kinyomtatva? Próbáltam egy kb. A4-es méretű oldalt összehozni, de nincs itthon nyomtatóm és nem tudom, hogy kell ellenőrizni... Ne haragudjatok a hülye kérdéseimért, tényleg szégyelem magam!

[zsoltchelsea]

Fájl->Nyomtatási kép

 

@Balázs: Légy szíves mondd meg nekem, mit módosítottál a hsz-omban. Oktató jelleggel kérdezem (mit ne csináljak). Köszönöm.

[enjoys1ng1ng]

Igen, így próbáltam még mielõtt kérdeztem volna. De mivel nincs nyomtatóm, ezért azt írja ki a gép, hogy "print preview error" - mivel nincs nyomtató, ugye... ezért kérdeztem.

[payskin]

Szerintem ne töprengj rajta. Elég ritkán nyomtatnak ki weboldalakat, a böngészők sem állnak ebben a helyzet magaslatán, ráadásul ahány nyomtató annyiféleképpen nyomtathatja. Az a bevett szokás, hogy csinálsz az oldalból egy nyomtatható változatot (egy külön CSS), amiben nincsenek háttérképek, csak minimális szövegformázás. Így viszonylag normálisan nyomtatható az oldal, nem lesz vele gond.

 

@zsolt: nem emlékszem már rá, majd a legközelebbi javításnál odaírom.

[zsoltchelsea]

Köszönöm szépen. Amúgy még annyit tudok ajánlani, hogy lemented, és megnézed Worddel, ha más nincs és nagyon fontos.

[Giraffe1]

Az a bevett szokás, hogy csinálsz az oldalból egy nyomtatható változatot (egy külön CSS), amiben nincsenek háttérképek, csak minimális szövegformázás. Így viszonylag normálisan nyomtatható az oldal, nem lesz vele gond.

Bocsánat, hogy a Mesterrel ismét vitába szállok , de ezt kiegészíteném azzal, hogy az a rossz bevett szokás, hogy... „Jobb helyeken” ezt kettõ darab (vagy több) CSS-sel oldják meg: egyet a képernyõnek, egyet pedig a nyomtatásnak (a többi jöhet a WAP-nak, az akadálymentesített oldalnak stb.).

Így a T. Felhasználó amikor kinyomtatja az oldalt, akkor tartalmilag ugyanazt az oldalt fogja megkapni , de a forma már természetesen eltér. Például a „kenyérszöveg” képernyõn talp nélküli, míg nyomtatásban talpas betû, nyomtatásban eltûntetjük a menüt és egyéb navigációs eszközöket, a háttér és dekorációs képket, a színes betûket feketével írjuk, ugyanakkor esetleg írunk a végére valami copyright szöveget, és esetleg azt is, hogy honnan is lett kinyomtatva a szöveg. És ehhez nincs szükség két HTML-re .

[Garono]

És ehhez nincs szükség két HTML-re .

Nem is mondta senki.

 

[Giraffe1]

Csak a "bevett szokás" az. Nézd meg pl. a pcworld.hu-t, az index.hu-t, az [origo]-t, és sok más oldalt, ahol a "nyomtatható verzió" másik HTML-t jelent . És ez legnagyobb részt a lustaság "diktálja", ugyanis egyesek szerint könyebb PHP-ban egy újabb oldalt elkészíteni nyomtatásra, mint a sokszor elbúrjánzott CSS-ekben rendet tenni.

 

Annyiból igazad van, hogy Balázs is elsõsorban CSS-t írt, de sajnos az némi ellentmondásban van az elötte levõ szöveggel - bár ez nem az õ hibája.

[Garono]

Ja, értem. Hát nem tudom, én életemben nem nyomtattam ki weboldalt, és másokat se látok túl gyakran (azaz szinte sose). Ha nyomtatok valamit, azt bemásolom OpenOffice-ba, és onnan nyomom ki. Lehet, hogy komplikáltabb, de így csak az lesz kinyomtatva, amit szeretnék.

[zsoltchelsea]

Mondjuk ez értelmesebb variáció is.

[Giraffe1]

Még LCD monitorokon is nehezebb olvasni hosszabb szöveget, mint papíron. Arról nem is beszélve, hogy sokszor elõfordul, olyan információt kell kikeresni a neten, amire késõbb offline lesz szükség. Például Pulába idén úgy mentünk el, hogy kinyomtattam egy részletes, térképes itinert, illetve szerencsére találtam egész jó város térképeket is. De (nem csak) nálam tipikus az is, hogy valamilyen témában körülnézek az interneten, és a talált oldalakat kinyomtatom, olvasás közben ezekre jegyzetelek, majd ezekbõl a papírokból dolgozom.

De mint "webdesignernek" az elmúlt 1-2 évben fokozottan oda kell figyelnem arra, hogy az általam tervezett oldalak nem csak egyszerûen nyomtathatóak legyenek, de figyelembe vegyek speciális igényeket. (Bár kedvencem továbbra is az, amikor T. Felhasználó nekiállt nyivákolni azon, hogy egy több oldalas táblázat fejrovata nem ismétlõdik meg minden oldalon, pedig õ ezt Wordben és Excelben is meg tudja oldani.)

[payskin]

Az a bevett szokás, hogy csinálsz az oldalból egy nyomtatható változatot (egy külön CSS), amiben nincsenek háttérképek, csak minimális szövegformázás. Így viszonylag normálisan nyomtatható az oldal, nem lesz vele gond.

Bocsánat, hogy a Mesterrel ismét vitába szállok , de ezt kiegészíteném azzal, hogy az a rossz bevett szokás, hogy... „Jobb helyeken” ezt kettő darab (vagy több) CSS-sel oldják meg: egyet a képernyőnek, egyet pedig a nyomtatásnak

Hogyan vitatkozunk valamiről, ha ugyanazt mondjuk?!

 

Ja, továbbolvastam, és már látom. Szerintem tök lényegtelen, hogy csak egy külön CSS-t csinálsz vagy még egy HTML-t is. Mi van, ha a nem nyomtatható változat egy több oldalas, oldalakra tördelt történet? Abból hogy fog az extra CSS egyben kinyomtatható változatot csinálni?

[Giraffe1]

Azért nem teljesen lényegtelen. Ugyanis - jó esetben - sok-sok HTML-hez van egy CSS, és nagyon nem mindegy, hogy mindet meg kell dupláznom, vagy csak az egyszem CSS-t.

Ilyen könnyû feladattal nem fogsz ki rajtam :

a) Az elsõ oldalra odaírom, hogy 1. rész, a másodikra, hogy 2. rész stb., és a Kedves Felhasználó majd n darabban nyomtatja ki. (Így legalább azt is megoldom, hogy a fejezetek új oldalon kezdõsjenek. )

b) Egy HTML-be szerkesztem meg az összes oldalt, amiket szépen egyesével névvel ellátott div-ekre pakolgatok. A lapozást pedig úgy oldom meg, hogy egy kb. 5 soros JavaScript program mindig csak az akltív oldal div-jét teszi láthatóvá, a nyomtató CSS-e pedig mindet. (Az elsõ oldal betöltése egy kicsit lassabb lesz, de utána akár szép effektussal is tudok lapozni.)

[level]

Egy többnyelvü honlapot kellene csinálnom. Még sosem csináltam ilyet, ezért szükségem lenne egy kis segítségre, hogy egyáltalán mibõl induljak ki.

Arra gondoltam, hogy lenne egy semleges kezdõoldal, ahol nyelvet lehet választani (de az is lehet, hogy automatikusan a magyar lesz az alapértelmezett, majd még meglátom). Minden nyelvhez lenne egy külön nyelvi fájl. A többnyelvü szövegrészeket egy-egy változóval helyettesíteném, és minden nyelvi fájlba az adott nyelven írom bele a változó értékét. Url segítségével továbbítom, hogy melyik nyelvet használom épp, és így mindig az annak megfelelõ nyelvi fájlt hívom meg.

Jó az elképzelésem, vagy máshogy szokták ezt csinálni? Van egyszerübb módja is?

[Atys]

Hello!

 

Készítek egy honlapot ami három oszlopra van tagolva.

Bal oszlop a menü, középsõ oszlop a tartalom, jobb oszlopban pedig állandó (azért néha-néha változna a tartalma) dolgok lennének.

Mindhárom oszlop tartalmazna képet, szöveget és linkeket is.

A gondom az, hogy hogyan lehetne megoldani, hogy a jobb oszlop mindig megmaradjon, de ne kelljen minden oldalra elkészítenem ugyanazt. Mert ha változtatni akarok valamit a jobb oldalon, akkor azt sok helyen kellene megtenni. Van rá mód, hogy valamilyen egy darab külsõ állományból húzzam be az adatok minden oldalon?

Nem szeretnék frameket használni, mert az borítaná az egész eddig elkészült munkámat. Az oldal CSS-el van megformázva.

Hú! Érthetõ voltam?

[Giraffe1]

Server Side Including a kulcsszó. Ha PHP-s oldalaid vannak, akkor (tudtommal) ez nem egy nagy durranás, de ha a webszerver támogatja, akkor sima (S)HTML oldalakkal is meg lehet ezt oldani.

Vagy ha erre nincs lehetõséged (pl. a fenti két megoldásból egyik sem megy valamiért), akkor még mindig ott van a - kicsit "patkolós" - megoldás, hogy az ismétlõdõ részt, részeket egy JavaScript program írja bele a kódba, és mindegyik HTML-lap ugyanazt a JS-t tölti be, ugyanazt vagy ugyanazokat a funkció(ka)t hívják meg, és csak ezt az egy JS-t cserélgeted, amikor éppen szükséges.

[Mazsola2]

Van egy nagy felbontású kép, amely egy linkre kattintva elõjön a honlapomon, de kb. dupla akkora méretben, mint a képernyõ. Mit kell tenni, hogy a kép igazodjon a képernyõ méretéhez, vagy annál kisebb legyen?

[payskin]

Mondjuk lekicsinyítheted egy grafikus programban.

[zsoltchelsea]

Sziasztok!

A "photo"-s oldalt is szívesen megoldanám valami javascript-tel vagy php-vel ami egy kis látványt visz bele, de nem nagyon ismerek olyat ami nem lassítja le nagyon az oldalt.

 

Ha van ötlet, örülnék!

 

Na, kicsit megkésve sajnos, de megvan a megoldás (megtaláltam a hírlevelet):

Egy általam előre elkészített sablont használva bárki egyszerűen készíthet magának egy ilyen képgalériát, ha követi az alábbi lépéseket.

 

Először is a galériát tartalmazó weblapunk <HEAD> részébe fel kell vennünk a következő JavaScript függvényt:

 

<script>

  function kepnagyitas(utvonal, kepSzelesseg, kepMagassag) {
    var kepernyo_magassag = screen.height-80;
    var kepernyo_szelesseg = screen.width-80;
    var szeles = kepSzelesseg;
    var magas = kepMagassag;
    if (szeles>kepernyo_szelesseg) {
      szeles = kepernyo_szelesseg;
    }
    if (magas>kepernyo_magassag) {
      magas = kepernyo_magassag;
    }
    if (szeles>magas) {
      magas = (szeles/kepSzelesseg)*kepMagassag;
    }
    else {
      szeles = (magas/kepMagassag)*kepSzelesseg;
    }

    utvonal = "nagykep.php?magas=" + magas + "&szeles=" + szeles + "&kep=" + utvonal;
    var ablak_tulajdonsagok = "top=0,left=0,titlebar=0,toolbar=0,width=" + (szeles-10)
      + ",height=" + (magas-10) + ",resizable=yes";
    window.open(utvonal, "nagyablak", ablak_tulajdonsagok);
  }

</script>

Ezután a <BODY> részen belül el kell készítenünk a galériát tartalmazó táblázatot. Az, hogy a táblázatnak hány sora és hány oszlopa lesz, az tőlünk függ... Az a lényeg, hogy a táblázatnak minden cellája az alábbi formában készüljön el:

 

<td>
  <a href="java script:kepnagyitas('nagykepek/nagykep_neve.jpg', szelesseg, magassag)">
    <img src="kiskepek/kiskep_neve.jpg" border="0">
  </a>
</td>

A fenti kód természetesen magyarázatra szorul. Először is el kell készítenünk a fényképeink kicsinyített mását (másnéven a "thumbnail"-t), mégpedig úgy, hogy mindegyik kis képnek a magassága egyforma legyen, mondjuk 80 pixel (a szélességük lehet különböző). A kicsinyítést természetesen bármilyen képszerkesztő programmal elvégezhetjük, de mindenképpen ügyeljünk arra, hogy a kis képeket külön mappába mentsük el, és még véletlenül se írjuk felül az eredeti fényképeket!!!

 

Egy példa a képek elhelyezésére: tegyük fel, hogy a weblapunk a C:\phpweb\galeria\index.htm útvonalon található. Az eredeti fényképeknek készítsünk egy almappát, így: C:\phpweb\galeria\nagykepek\, a képek kicsinyített mását pedig ide tegyük: C:\phpweb\galeria\kiskepek\.

 

Miután a fenti módon előkészítettük a fényképeket, illesszük be a táblázat cellájába a KIS KÉPET, majd készítsünk belőle hivatkozást. A hivatkozásnál a "kepnagyitas" nevű függvényt hívjuk meg, aminek három paramétert adunk át: a NAGY KÉP elérési útvonalát, a NAGY KÉP szélességét és a NAGY KÉP magasságát. Természetesen minden cellán belül egy újabb kép adatait kell megadnunk, a hozzá tartozó útvonalakkal, szélességi és magassági értékekkel.

 

Például így:

 

<td>
  <a href="java script:kepnagyitas('nagykepek/0001.jpg', 640, 480)">
    <img src="kiskepek/0001.jpg" border="0">
  </a>
</td>
<td>
  <a href="java script:kepnagyitas('nagykepek/0002.jpg', 500, 600)">
    <img src="kiskepek/0002.jpg" border="0">
  </a>
</td>
<td>
  <a href="java script:kepnagyitas('nagykepek/0003.jpg', 800, 600)">
    <img src="kiskepek/0003.jpg" border="0">
  </a>
</td>

A szélesség és magasság értékeket azért kell megadni, mert az automatikus nagyítást végző függvény ezen értékek alapján - a képernyő méretét figyelembe véve - a lehető legnagyobb méretre nagyítja majd fel a képeket! :-)

 

A táblázat celláinak számát természetesen soronként is változtathatjuk, ha a "colspan" tulajdonságot használjuk. Ha ugyanis az egyik kép szélesebb, a másik keskenyebb, akkor nem biztos, hogy jól néz ki ha minden sorba ugyanannyi cellát teszünk. (Persze ez attól is függ, hogy ki mennyire ért a táblázatok használatához... ha úgy egyszerűbb, akkor minden sorban legyen pl. 5 cella.)

 

Ha elkészült a táblázatunk, akkor már nincs más hátra, mint elkészíteni a nagyításhoz használandó PHP oldalt, melynek a "nagykep.php" nevet adjuk, és ami az alábbi kódot tartalmazza:

 

<html>
  <head>
    <title>A képgaléria címe</title>
  </head>
  <body bgcolor="#D60270" style="margin:0px;border:0px;text-align:center">
    <?
    if ($szeles>$magas) {
      ?>
      <img src="<?= $kep?>" width="<?= $szeles?>">
      <?
    }
    else {
      ?>
      <img src="<?= $kep?>" height="<?= $magas?>">
      <?
    }
    ?>
  </body>
</html>

Ezt a PHP fájlt természetesen ugyanabba a mappába kell elhelyeznünk, mint ahol a galériát tartalmazó weblapunk van.

[payskin]

Két Három megjegyzés:

 

1. A kódban következetesen "java script" van írva, noha ez EGY SZÓ! Nem zsoltchelsea írta rosszul, a fórummotor csinálja, gondolom, biztonsági okokból.

 

2. Nem értem, miért kell elbonyolítani a PHP-vel. Azt, amit a PHP csinál, látszólag nyugodtan elvégezhetné a meghívott JavaScript függvény is.

 

3. Szerintem nem jó ötlet ez a dinamikus átméretezősdi. Részben mert a 3 megabájtos, 2400x1800-as képnek akkor is teljes egészében le kell töltődnie a felhasználó gépére, ha ő csak 800x600-ban fogja látni. Részben mert a böngészők irgalmatlan ocsmányul méretezik át a képeket. Sokkal egészségesebb előre elhatározni, hogy ekkorák lesznek a nagy képeim, és egy grafikus programot használni az átméretezésre. Legfeljebb ha csórikám akarja látni a képet 2400x1800-ban, akkor ajánljunk neki egy külön letöltési lehetőséget.

[Atys]

Server Side Including a kulcsszó. Ha PHP-s oldalaid vannak, akkor (tudtommal) ez nem egy nagy durranás, de ha a webszerver támogatja, akkor sima (S)HTML oldalakkal is meg lehet ezt oldani.

Vagy ha erre nincs lehetõséged (pl. a fenti két megoldásból egyik sem megy valamiért), akkor még mindig ott van a - kicsit "patkolós" - megoldás, hogy az ismétlõdõ részt, részeket egy JavaScript program írja bele a kódba, és mindegyik HTML-lap ugyanazt a JS-t tölti be, ugyanazt vagy ugyanazokat a funkció(ka)t hívják meg, és csak ezt az egy JS-t cserélgeted, amikor éppen szükséges.

 

Hello Giraffe!

Köszi a választ, de nem PHP-s oldalaim vannak, hanem sima HTML+CSS. Viszont ez a Servet Side Including dolog nem ismerõs. Sajna a JavaScripthez még hozzá sem szagoltam, de nekem ez tûnne jobbnak. Tudnál segíteni?

 

[Giraffe1]

Megjegyzések a megjegyzésekhez:

1. Nekem az egész egy kicsit (vagy nem is olyan kicsit) túlbonyolítottnak tûnik.

2. Az átméretezést több ok miatt sem szabad a böngészõre bízni. Az egyik, hogy minek letölteni egy 3 MP-es képet, ha utána a felére összenyomom, a másik, hogy kevés rondább van annál, mint amint az IE vagy a Firefox képkicsinyítés néven csinál.

3. Akkor már inkább megcsinálok 3-5 verziót, és majd a képernyõfelbontás függvényében betöltöm azt, amelyikre tényleg szükség van.

 

@Atys

Mindössze annyi a "trükk", hogy csinálsz egy üres div-et a jobb oldali oszlopnak, egy JavaScript függvénnyel összeállítod ugyanazt a HTML-t, amit ebbe írnál, és ezt beleírod az innerHTML-lel az üres div-be. Például:

<div id="jobboszlop"></div>

function FillRightBox(); {
cHTML = "<h2>Jobb oldali oszlop</h2>"
cHTML += "<p>Ide írhatok bármit, csak arra kell figyelni, hogy az idézõjel helyett aposztrófot kell használni.</p>"
cHTML += "<ul>"
cHTML += "<li>Még felsorolás is jöhet.</li>"
cHTML += "<li>Még felsorolás is jöhet.</li>"
cHTML += "<li>Még felsorolás is jöhet.</li>"
cHTML += "</ul>"
cHTML += "<span class='kiemelt'>Akár szépen osztályozva is.</span>"

stb.

document.getElementById('jobboszlop').innerHTML = cHTML;
}

Ezt a FillRightBox függvényt pedig meghívod pl. a body onload eseményére.

[payskin]

Hmm, ez tetszik! Nagyon elegáns megoldása a problémának!

[enjoys1ng1ng]

Mindenkinek köszönöm! Megpróbálom megérteni amiket írtatok, aztán a tettek mezejére lépek. Ha elkészült, szólok!

[payskin]

Vagy ha nem érted, kérdezz!