Webdesign a gyakorlatban 9636183023, 9789636183028 [PDF]

Zitiervorschau

---

Móricz Attila

Webdesign a gyakorlatban Kiadó: ComputerBooks Kiadói Kft.

1. kiadás Lezárva: 2003. március 14. www.computerbooks.hu

Móricz Attila: Webdesign a gyakorlatban

Tartalomjegyzék A webhely tartalmának megtervezése___________________ 7 Mennyiségi és minőségi igényfelmérés.....................................................7 Kevés információ feldolgozása ...................................................................7 Több szöveg megjelenítésére alkalmas honlap........................................10 Sok szöveg tárolása keresési lehetőséggel..............................................12 A keretes weblapok dilemmája (frame) ....................................................13 Igazodás a látogatók böngészőjéhez .......................................................14 Nyitólap több böngészőtípus esetére .......................................................14 Tervezés kizárólag PC-s webböngészőkre ..............................................16 Válogatás a leírónyelvek között (HTML, XML, XHTML) ...........................17 Elemek a tartalom megvalósításához (kép, flash, szkript)........................22 A szerkesztőprogramok kínálata ..............................................................26 A weblapok szerkesztése a forráskód szintjén .........................................26 A látványalapú weblapszerkesztők...........................................................32 Kiegészítő rajzolóprogramok használata..................................................34

Egyedi elrendezésű weblapok ________________________ 39 Honlap „Varázsló-forma” elrendezésben ................................................39 Az elrendezés megtervezése és kialakítása.............................................40 A belső tartalom létrehozása ....................................................................50 Kiegészítő díszítések a honlaphoz ...........................................................55 Stíluslapok: A weblapok speciális formázása ...........................................56 JavaScript: Látványos elemek – elemek látványa ....................................73 JavaScript: Általános célú kiegészítő szkriptek ........................................88 A „Színes téglalapok” alkalmazása..........................................................97 Az elrendezés kialakítása .........................................................................98 Grafikai fogás: Szegélygrafikák elkészítése ...........................................100 Az egyéni oldalsablon elkészítése..........................................................104 A nyitóoldal feltöltése adatokkal .............................................................110 JavaScript: Az oldal elemei életre kelnek ...............................................114 A további weblapok létrehozása .............................................................132 +Grafikai fogás: Képes oldalmenü készítése .........................................133 Bővebb tartalomhoz „Szolid sávos” stílus............................................141 A tartalom rendszerezése.......................................................................142 A weblap felosztása területekre..............................................................144 3

Móricz Attila Az egyéni oldalsablon létrehozása .........................................................146 A nyitóoldal és a további weblapok formai megjelenése ........................157 Grafikai fogás: A weblapok illusztrálása fényképekkel ...........................159 JavaScript: Menü megjelenítése animáció kíséretében .........................163 +Grafikai fogás: Szemvezető grafikák és feliratok..................................171 A „Háromoszlopos” stílus részegységei ...............................................177 Az elrendezés megtervezése és kialakítása...........................................177 A megfelelő stílus megtervezése............................................................185 A tartalom rendszerezése.......................................................................191 Grafikai fogás: Szövegtároló keretek rajzolása ......................................196 JavaScript: A színvizsgáló weblap elkészítése.......................................199 JavaScript: A friss híreknek görgetett szöveg.........................................202 Shareware: Segédprogramok a színek állításához ................................206

További segédprogramok __________________________ 207 Helyi menük és HTML-térképek ..............................................................207 Xtreeme SiteXpert v6.1...........................................................................208 Flash-menük: 1st Cool Button v5.0..........................................................209 JavaScript Utility Suite v1.0 ....................................................................211 Selteco Menu Maker v3.03 .....................................................................212 Speciális gombok és feliratok.................................................................213 Flash-készítő: Selteco Flash Designer v1.5 ...........................................213 Selteco Bannershop Gif Animator v4.5...................................................215 Xara Webstyle v2.0 és v3.1 ....................................................................216 További szerkesztőprogramok ...............................................................218 HTML Builder XP v4.0. Enterprise..........................................................218 Evrsoft 1st Page 2000 .............................................................................220 Segédprogramok kisebb feladatokra .....................................................221 Weblapok tömörítése: HTML-ZIP ...........................................................221 Gombkészítés: DeKnop v4.1 ..................................................................222 Betűtípusok karakterei: X-Fonter v3.75 ..................................................223 Betűtípusok listázása: C-Font Pro v1.6.2 ...............................................225 Ikonszerkesztés: Axialis IconWorkshop v5.0..........................................226

Tárgymutató ____________________________________ 227

4

Webdesign a gyakorlatban

Előszó Amikor valaki arra szánja el magát, hogy elkészítse a cége vagy a maga honlapját, akkor nem elég csak arra koncentrálnia, hogy milyen szöveges és képi információt akar a weblapokon elhelyezni, hanem annak megjelenésére is. Sok esetben a rendelkezésünkre álló program adottságaiból akarunk kiindulni, de ez nem jó, mert virítani fog a weblapról, hogy milyen programmal készült. Nagyon fontos, hogy megértsük, egy webhely elkészítésében a megtervezésre, az elemek megfelelő színvilágának és stílusának kitalálására kell a legtöbb időt fordítanunk, és nem a HTML-kód írására vagy a vizuális formázásra. Azok a legjobb honlapok, amelyek a legőszintébbek. Akinek kevés adata van, de mégis meg akar jelenni a honlapjával az interneten, az készítsen egyszerű, de igényes és stílusos weblapot. Ne töltsük meg a weblapunkat linkekkel, viccekkel és más olyan felesleges tartalommal, amelynek semmi köze nincs a weblapunk eredeti mondanivalójához. Ez a lényeg. A honlapunk ne száraz adatok gyűjtőhelye legyen, hanem üzenjen valamit a látogatónak, és azt olyan formában közölje, amelyet a látogató megérthet. Derüljön ki a honlap felépítéséből, hogy mivel foglalkozik a tulajdonosa, mit akar üzenni, és legyen az egész egységes felépítésű. Első lépésben ezért megvizsgáljuk azokat a szempontokat, amelyek alapvetően fontosak egy weblap, egy webhely megtervezéséhez, majd átnézzük, hogy milyen szerkesztőprogramok állnak a rendelkezésünkre. Elsősorban olyan programokról lesz szó, amelyeket letölthetünk az internetről, és ingyen használhatjuk azokat kb. 30 napig. Ez az idő bőven elég arra, hogy megismerjük a program felépítését, és elkészítsük vele a kisebb honlapunkat. Nagy projektek esetén a program megvásárlásával tovább folytathatjuk a munkát. Ezután néhány egyszerűbb felépítésű honlap elkészítését végignézzük a legapróbb részletekig. Ezek elemeit más formában, más elrendezéseknél is fel lehet használni. A bemutatott négy design egyre több tartalom megjelenítésére ad lehetőséget, így lépésenként növelhetjük a honlapunkon lévő információkat. Végezetül bepillantunk néhány további Shareware programba, hogy mindenki kiválaszthassa a számára legjobban megfelelő alkalmazást. Ezek köre folyamatosan bővül, a kínálat változik, de jól mutatják, hogy milyen sokféle részfeladat végezhető el az egyes programokkal. kelt.: Győr, 2003. március

Móricz Attila 5

Móricz Attila

Megjegyzések A weblapjaink elkészítéséhez sokféle programra lesz szükségünk. Ezeket az internetről szinte ingyen beszerezhetjük, és a korlátozás lejártáig jogszerűen használhatjuk. Általában amikor valaki a weblapszerkesztéssel szeretne foglalkozni, akkor meg kell ismerkednie számos programmal, és fel kell fedeznie a programok hatalmas kínálatát. Ez óhatatlanul is azzal jár, hogy rengeteg programot le kell tölteni az internetről, ami talán sok időt igényel, és magas telefonszámlát eredményez. Ezek után a telepített programok sok esetben nem váltják be a hozzájuk fűzött reményeket, így szinte azonnal távolíthatjuk el a gépünkről. Ennek eredménye lesz, hogy a gépünk instabillá válik, és többször fagy le, mint előtte, ezért esedékessé válik annak újratelepítése. Tipp. Akinek a Windows újratelepítése gondot jelent, annak ajánlom figyelmébe a „Windows-tippek újratelepítéshez” című könyvemet, amelyben részletesen ismertetésre kerül a Windows eltávolítása és telepítése. A könyv kifejezetten a kezdők számára íródott rengeteg gyakorlati tippel megtűzdelve.

Ha van egy külön számítógépünk vagy Windows partíciónk, akkor érdemes azon kipróbálni az összes Shareware programot, és megjegyezni, de inkább leírni, hogy melyek nyerték el a tetszésünket. Hasznos ilyenkor a program telepítési fájljai mellé néhány képernyőképet (nyomj Alt+PrtSc-t) elmenteni képfájlba emlékeztetőül. Ezt kiegészíthetjük egy hangfájllal, amelybe mikrofonnal felmondunk néhány egyéni gondolatot a programról. Ha ugyanis nagyon sok programot végignézünk, akkor óhatatlanul is elfelejtjük az elsőkről kialakult képet, az ottani buktatókat, és ezt jobb elkerülni. A könyvben elsősorban a szükséges HTML-, CSS- és JS-források kerülnek bemutatásra, amelyet mindenki olyan programmal ír be, amivel tetszik. Nincs egyedüli üdvözítő program, a lényeg az, hogy az eredmény ugyanaz legyen. Ennek ellenére előfordulhat, hogy valamely programban készült forráskódot egy másik szerkesztőprogram teljesen helytelenül jelenít meg, mert az másképpen értelmez bizonyos HTML-kódokat. Ez sajnos megtörténhet, de attól még a weblap lehet jó, a webböngészőben megjeleníthető. Fontos! A bemutatott programok mindegyike változhat, mint ahogyan a weblapok megjelenítése is az újabb webböngésző programokban. Ezért az itt leírtak sem 100%-osak, és elsősorban a látogatók 95%-ánál használatos Microsoft Internet Explorer webböngészőben lettek tesztelve. Így előfordulhat, hogy más böngészőben az oldalak egyes elemei nem úgy jelennek meg. 6

Webdesign a gyakorlatban

A webhely tartalmának megtervezése Amikor valaki egy webhely elkészítésére vállalkozik, akkor arra készüljön fel, hogy nem a weblapok megszerkesztése lesz a munka legnehezebb része, hanem a feladat pontos megfogalmazása. A lényeg az, hogy egy adott témát feldolgozva elkészítsünk olyan weblapokat, amelyek azt a lehető legjobban ismertetik a látogató számára. A cél megvalósítása érdekében először fel kell mérnünk a téma méreteit, jellegét, hogy el tudjuk dönteni, milyen jellegű weblapokat tervezzünk. Nagyon fontos, hogy tudjuk, a tartalmat a látogató fogja megnézni a saját eszközeivel, az azon lévő webböngészőjével. Nekünk arra kell felkészülnünk, hogy a megcélzott közönség ezt a tartalmat meg tudja tekinteni. Végül pedig szembe kell néznünk a saját korlátainkkal. Fel kell mérnünk, hogy milyen programokkal rendelkezünk, milyeneket tudunk beszerezni, és azokkal megoldható-e a kitűzött feladat. Ha minden együttvan, akkor kezdhetjük a munkát.

Mennyiségi és minőségi igényfelmérés Az első lépésben mindig mérjük fel, hogy milyen mennyiségű adatot fogunk feldolgozni, és milyen a minőségi elvárás. Ha sokrétű egy cég tevékenysége, és azokon belül is sok fontos információt kívánnak közzétenni, akkor olyan oldalformátumot válasszunk, amelyen ezt meg lehet valósítani. Kevesebb adat esetén inkább a művészibb kivitelezést részesítsük előnyben, mert úgy tudunk a látogatónak élményeket nyújtani, miközben információkat adunk át a részére. A minőségi igényfelmérés természetesen nem azt jelenti, ha a megrendelő keveset fizet, akkor valami igénytelen vackot kap, hanem csak azt, hogy abban az esetben egyszerűbb elemekből kell építkeznünk. Ilyenkor kevesebb idő áll a rendelkezésünkre, ezért az egyszerűbb, de igényes formát válasszuk.

Kevés információ feldolgozása Aki mindig a szokásos „háromoszlopos-fejléces” elrendezésben gondolkodik, az kevés adatot csak úgy tud elhelyezni, hogy az oldalait állandóan üresnek fogja érezni. Ilyenkor szoktak csak a tartalommal való feltöltés miatt olyan témákat is felvenni az oldalak közé, amelyekre az adott helyen semmi szükség nincs, „– De valamivel meg kell tölteni az oldalakat!” – szokták mondani. 7

A webhely tartalmának megtervezése Ilyen esetekben számos lehetőség áll a rendelkezésünkre a design eszköztárában. Használhatunk például úgynevezett „vízszintes” elrendezésű oldalakat, ahol az információ egy vízszintesen elterülő téglalapban helyezkedik el. Ilyenkor alul-felül szélesebb üres terület marad, ami így középre tereli a látogató figyelmét. Fontos szempont a weblap tervezésekor, hogy a látogató viszonylag gyorsan ismerje fel, milyen információt akarunk közölni vele, milyen lehetőségek közül és hol választhat. Ehhez folyamatosan vezetnünk kell a tekintetét az egyik helyről a másikra a design eszközeivel. Az a legrosszabb weblap, ahol minden harsányan kiemelkedik, villog, ugrál, és nem találjuk azt az információt, amiért az adott oldalt megjelenítettük. Ilyenkor a látogató nagyon gyorsan odébbáll, és nem jön vissza soha. Tipp. „Aki mindent kiemel, az nem emel ki semmit.” Alapvetően abból induljunk ki, hogy egy oldal szövegezése, címei mind legyenek egyformák, majd fokozatosan kezdjük kiemelni a fontosabb részeket. Ha valamit időközben fontosabbnak értékeltünk, akkor az előző kiemelést szüntessük meg. Ne sajnáljuk a levett formázásokat, mert az oldal így sokkal áttekinthetőbb lesz!

Kevés információ feldolgozásakor engedjük szabadjára a képzeletünket, vegyünk elő papírt és ceruzát, és rajzoljunk például téglalapokat. Az egyikbe képzeljük bele a linkeket, egy másikba pedig a hozzá megjelenő tartalmat, vagy az esetlegesen felbukkanó rövid ajánlószöveget, esetleg egy-egy csalogató képet, ha az adott témánál ez felvethető. Tipp. A papír és ceruza helyett használhatjuk a Paint vagy a Word programokat is, ahol a javítás viszonylag egyszerűbb, és nem kell annyit radírozni. A Word rajzolófunkcióihoz jelenítsük meg a rajzolás eszköztárat a Nézet menüből. A megrajzolt téglalapok, vonalak egyszerűen módosíthatók, és az adott alakzatok helyi menüje további lehetőségeket kínál.

Mivel kevés tartalomról beszélünk, ezért legfeljebb 5-7 lapos designban gondolkodjunk, ez pedig akár egy weblapon is megvalósítható. Ilyenkor az egyes linkekre való kattintással olyan JavaScript programokat hívunk meg, amelyek a meglévő tartalmat elrejtik, és a kiválasztottat megjelenítik. A következő ábrán az első képen egy olyan weblaptervet láthatunk, ahol a fenti keretben lévő címekre (A; linkekre = hiperhivatkozásokra) történő rámutatás során az alatta lévő keretben (B) egy rövid ajánlószöveg jelenik meg. 8

Mennyiségi és minőségi igényfelmérés Ha ez tetszik a látogatónak, akkor a linkre rákattinthat, majd a középső (C) területen megjelenik a szöveg, a „D” keretben egy kép, míg az „E” részen a képhez tartozó címke. A területeket összekötő vonalak alkalmasak a szem vezetésére, jelen esetben az „A” területre történő visszajutásra, ahol újabb link választható.

1. ábra. A design megtervezése téglalapokkal szemvezetési irányokkal A tarlom középen van, a kiegészítők a széleken, így a szem körbejárhat, és egy újabb téma választásával a kör kezdődhet újra. A színeket a témához illően válasszuk meg, amelyek lehetnek nyugodt, harmonikus érzést keltőek, vagy éppen harsányak és kihívóak. A középső ábrán egy egyszerűbb, de függőlegesen lefelé terjeszkedő elrendezés látható. A felső (A) területen helyezkedik el a főcím, alatta a témák felsorolás (linkek), majd a szöveges és képi tartalom. A linkek sora a képernyő teljes szélességét foglalja el, míg függőleges értelemben a „C” terület tegye ugyanezt, jelezve a látogatónak, hogy a cég mindent uralni akar. Mindkét esetben lehetőség van arra, hogy ha az egyes témákról lényegesen több információt akarunk közzétenni, akkor elhelyezhetünk egy további linkekre mutató táblázatot. Az elsőnél a „B” és „E” részeken, míg a középsőnél a „C” sarkában a jelzett helyen javaslom ezt megvalósítani. A középsőnél alkalmazhatunk JavaScript segítségével legördülő menüt is, bár ez inkább akkor hasznos, ha már mindegyiknél lehet menüt készíteni, mert különben csak megzavarja a látogatót (mert a többi linkre mutatva is várakozni fog a menüre). A középső formánál erős a csábítás, hogy a két oldalon meglévő „elpazarolt” helyet is megtöltsük valamivel. Eszünkbe ne jusson semmiképpen, mert az egész design elveszíti átütő erejét. Ennek éppen az a lényege, hogy csak a megadott területeken lesz tartalom, tehát a látogató szemének nem kell táncot járnia, hogy megtalálja, hol kezdődik a tartalom, és merre haladjon. 9

A webhely tartalmának megtervezése A harmadik formánál szintén az egymásra halmozott téglalapokkal játszunk, de arra építjük az egész tervet, hogy a felhasználók webböngészője általában nem teljes képernyős, nem szélesebb, mint amilyen magas, ráadásul ezt a mértezést kedvelik jobban. Egy JavaScript segítségével a weblap a megjelenésekor beállíthatja első lépésben az ablak ideális méretét, így az csak éppen annyi helyet fog elfoglalni a látogató képernyőjén, amennyire szüksége van, és a többi ablaknak is hagy helyet maga mellett. Itt az „A” területen választunk egy linket, majd a „B”-n megjelenik egy alcím, egy jelmondat, egy mozgókép (például flash) vagy bármi, ami fontos az adott termék szempontjából. A „C” területen pedig a szöveges tartalom olvasható. Az eddigiekből látható, hogy a kevés tartalommal járó problémát úgy oldottuk meg, hogy egy ötletes designnal „elszórakoztattuk” a látogatót, aki hozzájutott a keresett információhoz, és kellemes élményekkel lett gazdagabb. Ha ugyanezt a tartalmat egy szokásos háromoszlopos formába akartuk volna elhelyezni, akkor a kevés szöveget tartalmazó oldalakra a látogató azt mondaná, hogy ez biztosan csak valami félkész munka, hiszen „üresek az oldalak”. Ezzel szemben az ismertetett formák esetén a látogató tudja, hogy csak a kereteken belül talál tartalmat, amelyek televoltak, tehát ezt ő úgy érzékeli, hogy az oldalaink tejesen meg voltak töltve. Vegyük észre, hogy az előző gondolatmenetnél is ugyanannyi tartalom állt a rendelkezésünkre, de egészen más érzéseket vált ki a látogatóban az egyik design, mint a másik.

Több szöveg megjelenítésére alkalmas honlap Ha megnézzük ismét az előző terveket, akkor láthatjuk rajtuk, hogy az első két esetben már felvetettük a további oldalakra linkelés lehetőségét, így egy bizonyos szintig növelhetjük a tartalom mennyiségét. Erre leginkább a középső képen felvetett forma alkalmas, ahol a jobb (vagy bal) felső sarokban elhelyezett további linkeket tartalmazó táblázat a témától függően akár 8-10 altémát is felsorolhat. Ez még akkor sem lesz zavaró, hiszen a táblázat lefelé a teljes ablakot elfoglalja, így helye van elég a feladat megvalósítására. Fontos, hogy ilyenkor se alkalmazzuk automatikusan a szokásos háromoszlopos formát, mert azzal csak beolvadunk a többi sok millió honlap közé, és a látogató nem fog emlékezni a mi webhelyünkre, mert az is csak olyan, mint a többi. Ezzel szemben ha megnöveljük a téglalapjaink területét, esetleg azok sarkait lekerekítjük (grafikákkal ez megoldható), akkor sokkal több területhez jutunk, amelyet különféle tartalommal tölthetünk meg. Az 1. ábrán az első kép lehetőséget biztosít arra, hogy például szöveget, képet, képaláírást helyezzünk el, míg a középsőnél mindezeket egy helyre kellene ömlesztenünk. 10

Mennyiségi és minőségi igényfelmérés A következő ábrán egy olyan elrendezést láthatunk, ahol szintén „ablakokba” helyezzük a tartalmat, de jóval többet hozunk létre, mint eddig, így több funkcióval tudjuk azokat megtölteni. Az alábbi tervet tekintsük egy termékismertető honlapnak, ahol csak kevés árucikk bemutatására kerül sor. Az „A” területen lesznek a linkek, amelyekre mutatva a „B” részen jelenik meg a felbukkanó szöveg, tagolt, esetleg felsorolásos stílusban. A linkre kattintva a „C” keretbe kerülhet a termék fényképe, a „D”-be annak jellemző adatai, az „E” lehet a részletes ismertetője. A „B” területet a belső oldalaknál már nem szükséges a felbukkanó súgók számára fenntartani, ezért azt is elfoglalhatja a termék ismertetése vagy akár a hozzá tartozó linkek gyűjteménye.

2. ábra. A nyitott könyvszerűen megjelenő oldal többféle tartalomnak biztosít helyet Amennyiben az „A” területet is kettéosztjuk, úgy a bal oldali felében kiválasztott témához oldalletöltés nélkül megjelenhet ugyanannyi altéma linkje a jobb oldali felében, és csak az abból történt választás után töltődne be az új oldal. Így 8 témacsoport esetén már akár 8x8=64 terméket mutathatunk be, ami kellően sok, de mégsem kell a hagyományos ömlesztett oldalstílust alkalmaznunk, és megmaradhat egyedinek a webhelyünk. Tipp. A folyószöveg hátterének mindig egyszínűt válasszunk, mert a mintás háttér jelentősen rontja az olvashatóságot, fárasztja a látogatót. Ezt ne tegyük!

A táblázat nagyon egyszerű módja a tartalom rendezésének, és gyorsan letöltődő oldalakat eredményez. Ha a sarkokat le akarjuk kerekíteni, akkor grafikákat kell alkalmaznunk, ami növelheti az oldal letöltési idejét. 11

A webhely tartalmának megtervezése

Sok szöveg tárolása keresési lehetőséggel Amikor például nagyon sok termékkel rendelkező cég részére készítünk teljes webhelyet, akkor már nem lehet kizárólag az oldalakon elhelyezett linkek segítségével eljutni egy-egy adott termék ismertetőjéhez. Ez egyrészt nagyon sok idejébe kerülne a látogatónak, de az is valószínű, hogy nem tudja pontosan, hogy az adott termékhez milyen kategóriákat és alcsoportokat kell megnyitni, így ha kitartóan keresgél, akkor sem biztos, hogy rátalál a termékre. Ilyenkor sokkal egyszerűbb, ha van egy keresésre szolgáló űrlap az oldalon, és a beírt terméknév, illetve jellemzők alapján a találati oldal kilistázza azon áruk címeit, néhány jellemzőjével együtt, amelyek szövegében megtalálható a keresett karakterlánc. Ehhez már az oldalakra kerülő adatokat adatbázisban kell tárolnunk, és onnan kell kiíratnunk a weblapra. Ez a munka már nem végezhető el statikus weblapok szerkesztésével, csak a kiszolgálón futó programozott oldalak készítésével, amelyeket megírhatunk CGI, PHP, ASP, JSP nyelvek valamelyikével. Ilyenkor a program az oldal tartalmának többségét egy esetleg előre megírt HTML-fájlból olvassa ki, de a tartalmi részt egy adatbázisból szűri ki a megadott SQL-lekérdezés szerint, és a leendő weblapba dinamikusan illeszti be. A másik megoldás, ha keresünk az interneten olyan keresésre szakosodott szolgáltatást, amely a megadott oldalcímünk alapján rendszeresen leindexeli az oldalainkat, és a kereséshez biztosít egy űrlaprészletet. Ennek az a hátránya, hogy az oldal színvilága, stílusa el fog ütni a miénktől, ráadásul ha mindezt ingyen akarjuk megtenni, akkor valamilyen reklám is csúfítani fogja az oldalainkat. Ezért nagy mennyiségű adat esetén a keresésre nincs lehetőségünk statikus, vagyis előre megszerkesztett oldalak használatakor. Ilyenkor még fontosabb, hogy jól rendszerezetten tegyük elérhetővé az információkat, és az ilyen oldalak letöltése minél kevesebb időt vegyen igénybe. Ehhez pedig olyan stílust válasszunk, amely nem tartalmaz a szükségesnél lényegesen több grafikát és egyéb reklámot, valamint ajánlókat. Tipp. Az információk rendszerezésére nagyon jól megfelel például a Microsoft Word bármelyik változata, és azon belül a Vázlatnézet funkciója. Könynyedén és egyszerűen tagolhatjuk részekre a legnagyobb témaköröket is.

Ha mégis az adatbázis használata mellett döntünk, akkor olyan előnyünk is származik belőle, hogy az ott lévő információkat egyszerűen közzétehetjük kis kézi számítógépek és mobiltelefonok számára, a WAP vagy az XHTML útján. 12

Mennyiségi és minőségi igényfelmérés

A keretes weblapok dilemmája (frame) A webböngésző program munkaterületére betöltött tartalmat általában egylapos kivitelben készítjük el, de lehetőségünk van arra is, hogy felosszuk részekre, és mindegyikbe külön fájlt töltsünk be. Ennek vannak előnyei és hátrányai, amelyek megosztják a felhasználókat és a weblapszerkesztőket egyaránt. A keretes (FRAME elemmel felosztott) weblap egyik nagy előnye, hogy az egyik részbe betöltött tartalomjegyzék (linktár) folyamatosan elérhető, és a kattintás eredményeképpen a lényegi tartalom egy másik keretbe töltődik be. Így nem kell minden weblapon szerepeltetni a linkeket, mivel az egy külön lapon található. Ráadásul, ha bővíteni akarjuk a weblapok sorát, akkor csak a linkeket tartalmazó weblapot módosítjuk, és azonnal minden oldalnál elérhető lesz az új weblap is. Ezzel szemben a normál egylapos weblapoknál mindegyik azonos témán belüli weblapon módosítani kell a linkeket tartalmazó részt, mert fel kell venni az újabb oldal hiperhivatkozását. A módosítások mindig hibalehetőségeket hordoznak magukban, ráadásul megbonthatják az oldal addigi egységét, ezért sokan ezt szeretnék elkerülni. Azonban a webböngészés során gyakran élünk azzal a lehetőséggel, hogy a linkre a jobb egérgombbal kattintunk, és a hivatkozott oldalt új ablakban nyitjuk meg, mert így egyszerre több oldalt is le tudunk tölteni, ráadásul nem kell megvárni a visszalépésnél az oldal újbóli betöltődését. Ilyenkor viszont hiányozni fog a tartalmi oldalhoz tartozó linktár, és az egész oldal hiányos és esetlen megjelenésű lesz, mivel megbontottuk annak egységét. Ez ellen természetesen lehet védekezni különböző szkriptekkel, amelyek ilyenkor is betöltik a tartalmi oldalhoz tartozó linktáras weblapot. Az is egy megoldás, hogy a jobb gombos kattintást is letiltjuk az oldalon, de ezek mind kényszerintézkedések, amelyek hatására a webböngésző program, a weblap nem úgy működik, ahogyan azt a felhasználó megszokta, ahogyan azt elvárná. Ilyen esetben a felhasználó nem lesz elégedett, nyugtalanul fog távozni az oldalainkról. A keretes weblapok használatakor azt is le kell tiltanunk, hogy a nagy keresőszerverek találatként megjelenítsék az oldalainkat. Ilyenkor a keresők tartalmi oldalainkat adják ki találatként, ami szintén a linktáras oldal nélkül fog megjelenni. Ha viszont megoldjuk, hogy ilyenkor is behívja az oldal a hozzá tartozó tartalomjegyzéket, akkor ez a hátrány orvosolható. Fontos! A jól megszerkesztett keretes weblapnál sok esetben nem is veszszük észre, hogy az oldal keretes vagy csak azért gyorsabb a betöltődése, mert olyan profi a szerkesztése. Ezért a keretes oldalnak is van létjogosultsága, csak sokkal nehezebb jól elkészíteni, ezért kezdők inkább kerüljék. 13

A webhely tartalmának megtervezése

Igazodás a látogatók böngészőjéhez Mielőtt azonban nagyon beleélnénk magunkat a tervezés örömébe, nézzünk szembe a tényekkel, és mérjük fel, hogy a közzétenni kívánt információkat a látogatók milyen formában kívánják megtekinteni. Az elektronikai ipar nem szűkölködik a választékban, és szinte hetente egy újabb termékkel jelenik meg, amelyek tartalmaznak valamilyen böngészőt, amelyekkel az interneten közzétett tartalom megtekinthető. Nekünk pedig annak megfelelően kell a tartalmat közzétennünk, hogy a látogató mivel rendelkezik, és várhatóan a közzétett információkra mikor és milyen eszközök használatával szeretne hozzáférni.

Nyitólap több böngészőtípus esetére A látogatók alapvetően elérhetik az internetes tartalmakat WAP-on keresztül mobiltelefonnal, és a weblapokat asztali (PC) és kézi számítógéppel (Palmtop, kommunikátor). A kapcsolódás mindkét esetben történhet vezetékes vonalon és mobiltelefonon keresztül. Az előbbinél az átlagos letöltési sebesség 30-56 kbps-től kezdve akár 512 kbps-ig terjedhet, míg az utóbbinál ez 9-43 kbps. Minket ez a tartalom tervezett méretét tekintve befolyásolhat, hiszen arra kell törekednünk, hogy a felhasználó az oldalainkat minél hamarabb megkapja, illetve hogy minél elégedettebb legyen. Egyre jobban terjednek az olyan flash-t tartalmazó oldalak, amelyeknél a „Loading...” felirattal kellene szemeznem percekig, mert az oldal csak így tekinthető meg. Ilyenkor a bezárás gombra szoktam kattintani. Aki viszont például ADSL-t használ, annál ez csupán pár másodperc, és már élvezheti is a flash-ben megírt oldal minden szépségét. Egy webhely tartalmának megtervezésekor azt tartsuk szem előtt, hogy a várható látogató milyen eszközzel szeretné megtekinteni az oldalainkat. Ha többféle eszköz is számításba jöhet, akkor készítsünk egy nyitóoldalt, amely legyen kicsi, esztétikus, egyszerű, PC-n és kézi eszközön lévő webböngészőben megjelenítve is egyaránt nyújtson kellemes látványt. Ezen az oldalon helyezzünk el hiperhivatkozásokat a további kezdőoldalakhoz, így mindenki kiválaszthatja a böngészőjének leginkább megfelelő linket. Ez azt is magával hozza, hogy ugyanazt a tartalmat többféle formában is közzé kell (kellene?) tennünk, amit csak kevesen vállalnak. Azonban vegyük tudomásul, hogy a tartalmat a látogató számára készítjük, tehát ne mi mondjuk meg neki, hogy mit használjon, hanem mi igazodjunk az ő igényeihez, hiszen az egész munka őneki készül. Szóval röviden megfogalmazva, „ne a nyúl vigye a vadászpuskát”. 14

Igazodás a látogatók böngészőjéhez Ha többféle eszközzel is lehívhatják a látogatók az oldalainkat, akkor azt azért teszik, mert olyan információkat teszünk közzé, amelyre mozgás közben is szükségük van, amikor nincs náluk még egy noteszgép (notebook, laptop) sem. Lássuk be, ilyen esetben értelmetlen lenne csupán lustaságból, öntudatosságból csak PC-re tervezett, sok grafikás, esetleg flash-animációs oldalakat készíteni, amit a tenyérgépes felhasználóknak esélyük sincs letölteni. Vegyük sorba először, hogy milyen formátumokban kell elkészíteni a közzéteendő tartalmat. A WAP-on keresztüli lehíváshoz WAP-oldalakat kell készíteni, és azokat jellemzően a maroktelefonokon lehet elérni. Ehhez külön WML-kiterjesztésű fájlokat kell készítenünk (nem pontosan ugyanazzal a tartalommal), ezért ezzel most nem foglalkozunk. A tenyérgépek webböngészői ugyanazt a HTML-formátumú weblapot jelenítik meg, mint a PC-k, de a kisebb adatátviteli sebesség miatt erre csak lassabban képesek. A kisebb gépek kisebb memóriával rendelkeznek, ezért a böngészőjük is gyengébb képességű, például a HTML 4.0+CSS helyett csak HTML 2.0, esetleg HTML 3.0 szabványú oldalakat tudnak helyesen megjeleníteni. Külön opció a keretek (frame-ek) kezelése, amit jó esetben korlátozott módon képesek kezelni, de a beépülő modulokat igénylő oldalakat nem tudják megjeleníteni (Java, JavaScript, VBScript, Flash). Ha az oldalainkat úgy készítenénk el, hogy az PC-n és tenyérgépen is megjeleníthető legyen, akkor a PC-n lévő változatban hiányolnánk a tartalmat, míg a tenyérgépen már ez a köztes mennyiség is túl sok lenne. Ezért semmiképpen nem ússzuk meg azt, hogy a tartalmat kétféle formátumban tegyük közzé. Az egyiket tervezzük PC-re, a másikat tenyérgépre. Tipp. Ne érezzük, hogy feleslegesen dolgozunk. A PC-s változatban helyezzünk el egy linket minden oldalon, ami a „nyomtatható változatra” mutat, ez jelen esetben nem más, mint a tenyérgépekre optimalizált, 98%-ban csak érdemi információt tartalmazó weblap.

Élhetünk azzal a trükkel is, hogy az oldalainkat tenyérgépen megjeleníthető formában készítjük el, majd egy betöltéskor automatikusan induló szkript dinamikusan elvégzi a PC-s megjelenítéshez szükséges formázásokat. Ez persze körülményes, de az ötlet abból indul ki, hogy a tenyérgépek többségén lévő böngésző nem futtat szkripteket. Ha mégis, akkor írjuk meg VBScriptben, mert azt csak az Internet Explorer futtatja. Mivel a Microsoft Internet Explorer uralja a PC-s böngészőpiac 95%-át, ezért a látogatóink többségénél a trükk beválik. A formázás helyett választhatjuk az azonnali címátirányítást szkriptek segítségével, ami szintén csak PC-n fog működni, tehát az oldalválasztás lehet automatikus. 15

A webhely tartalmának megtervezése

Tervezés kizárólag PC-s webböngészőkre Sajnos az esetek többségében a webhelyek készítői egyáltalán nem foglalkoznak a kézi eszközökön lévő böngészőkkel, mivel kevés ilyen látogatójuk van. Mivel a tenyérgépeken nem jelenik meg az oldal rendesen és elfogadható időn belül, ezért nem is próbálkozik vele senki, aki már egyszer látta a cég oldalát. Ezzel a kör bezárult, de vegyük észre, az alapvető hibát a webhely gazdája követte el a diszkriminatív hozzáállásával. A kizárólag PC-re tervezett weblapoknál sem kerülhetjük el azt, hogy a várható sávszélességre tervezzünk. Az általunk kínált tartalom jellegéből adódóan meghatározhatjuk, hogy milyen felhasználói réteg fogja az oldalainkat látogatni, és ebből következtethetünk az ő elérési lehetőségeire. Például egy számítógép-alkatrészeket és/vagy internet-elérést forgalmazó cég egyes lapjain elhelyezhetünk olyan flash-animációkat, amelyeknek vagy a letöltése hosszadalmasabb, vagy annak gyors megjelenítése csak egy gyors videokártyával lehetséges a tervezett ütemben. Az ilyen oldalakon a látogatók tesztelhetik is a saját eszközeiket, és ha úgy gondolják, akkor vásárolhatnak a kínálatból olyan vezérlőkártyákat vagy számítógépeket, amelyekkel nem fognak alulmaradni. Általában azonban tekinthetjük Magyarországon kiindulási alapnak jelenleg a 30’000 bps sebességet, amivel 3,66 kB adat tölthető le másodpercenként. Ebből következően a weblapunk képekkel együtt, ha például 110 kB méretű, akkor az átlagosan fél perc alatt fog megjelenni. ADSL-kapcsolaton ugyanez csupán 2 mp, de ez csak elméleti sebesség, a tényleges függ a tartalmat tároló webszerver terheltségétől. Ha az általános felhasználókra tervezünk, és nem nagy mennyiségű szöveges és képi információt kell közzétennünk, akkor ez a 110 kB bőven elég lesz. Célszerű a weblapjainkon megjelenő képeket vagy profi képszerkesztő programokkal készíteni, vagy erre a célra készült optimalizáló programokkal csökkenthetjük a képek fájlméretét a minőség szemmel látható romlása nélkül. A másik tervezési szempontról már érintőlegesen szóltunk, vagyis a böngészőháború okozta piaci eloszlásról. A Microsoft Internet Explorer böngésző a felhasználók 95%-ánál (2003.) található meg (4.0–6.0 változatokban), de ez nem jelenti azt, hogy az általunk megcélzott látogatók között szintén ez lenne az arány. Ha ugyanis például Linux programokat áruló cég honlapját tervezzük, akkor ez fatális hiba lenne, hiszen közöttük az arány fordított, sőt valószínűleg 99,9%-ában használnak Netscape-et és Operát. Ez annyiban fontos számunkra, hogy az oldalon csak szabványos HTML-elemeket használhatunk, illetve olyanokat, amelyeket csak a két említett rivális böngésző tud megjeleníteni. Ez utóbbival viszont az IE-böngészősöknél okozunk megjelenítési hibát. 16

Igazodás a látogatók böngészőjéhez A jól megtervezett webhely – az előbbiekből következően – maximálisan szem előtt tartja a várható látogatóinak vélt szokásait, és pontosan az ő igényeiknek legjobban megfelelő weblapokat nyújtja. Vonatkozik ez az oldal és a hozzá tartozó fájlok (képek) összméretére, és a használt böngészőtípusok képességeire egyaránt. A weblapok megjelenésének tervezésekor arra is legyünk tekintettel, hogy az adott oldal hogyan fog megjelenni. Ha sok grafikát, esetleg csak azt tartalmaz az oldalunk, akkor a HTML-fájl letöltése után a látogató először csak ezek helyével fog szembesülni, ami annyira elriaszthatja, hogy a böngészőt azonnal bezárja. Ha viszont JavaScript program segítségével a képeket előbb letöltjük, akkor az oldal csak később fog megjelenni, de akkor már a képek meg fognak jelenni, és nem azok helyét fogjuk látni. Nem elég csak a végső állapotra tervezni, már a megjelenési fázisra úgyszintén gondolnunk kell. Alkalmazhatunk különféle trükköket. Például kezdünk egy nyitóoldallal, ahol valami kis, egyszerű mozgó animációval, futó szöveggel lekötjük a látogató figyelmét egy kis időre, amíg a legfontosabb képeket egy szkript előre letölti. Ezután bármit kiválaszthat, mert a következő oldal grafikáinak többsége már a felhasználó gépén lesz, így a továbblépés gyorsan megtörténik, és ez a látogatót megelégedettséggel tölti el.

Válogatás a leírónyelvek között (HTML, XML, XHTML) A munka elkezdése előtt azt is döntsük el, hogy milyen nyelven kívánjuk a tartalmat elérhetővé tenni. Erre valószínűleg a legtöbben azt fogják válaszolni, hogy HTML-ben, de azért ezt ne hamarkodjuk el. Az XML-nyelv már évek óta elérhető, az Internet Explorer 5.0 már tartalmazza a megjelenítési lehetőséget, de még mindig sokak számára különleges újdonságként hat. A legújabb üdvöske pedig az XHTML-nyelv, amely röviden megfogalmazva egy XML szigorúságával szerkesztett HTML-oldalnak felel meg. Ebből már sokat lehet találni az interneten, de még HTML-kiterjesztéssel, mert az XHTML nincs regisztrálva a Windowsban. Mivel azonban az XML-t képes értelmezni az IE, ezért meg tudja jeleníteni az XHTML-t is, ugyanis az a nyelv az XML és a HTML egyesítéséből jött létre, és mindkettő alapvető szabályainak megfelel. A HTML-nyelv előnye, hogy szerkesztőprogramot százával találunk hozzá, mind a fizetős, mind az ingyenes és a Shareware programok között, és a kézi eszközök, továbbá a PC-k webböngészői ezen a nyelven megírt oldalakat képesek megjeleníteni. Ez mindenképpen egy olyan döntő érv, ami valószínűleg jelentősen meghatározza a döntésünket. 17

A webhely tartalmának megtervezése A HTML-ben megírt (elmentett) weblap forráskódja általában az alábbi felépítést tükrözi. *.html

Próbalap HTML-ben

Címsor

Bekezdés

Ez a bekezdés
kétsoros lesz.

3. ábra. Egy HTML-forráskód minimális tartalommal A forráskód megismerésével kapcsolatban kétféle álláspontot képviselhetünk. Aki kizárólag a megjelenés alapján kíván weblapokat létrehozni, az használhat ehhez kifejezetten olyan programokat, amelyek teljes WYSIWYG-szerkesztést tesznek lehetővé. Ebben az esetben nagy valószínűséggel olyan átláthatatlan forráskódot kap, amelyet utólag még akkor is nehezen tudna értelmezni, ha akarna. Ebben sajnos a Microsoft programok járnak az élen, pedig sokak számára éppen azok a legelérhetőbbek. Az XML-nyelv nem elsősorban weblapok létrehozására alkalmas, hanem inkább adatbázisokból történő lekérdezések vagy más egyéb forrásból származó adatok átmeneti tárolására. Az XML-fájl szövege rendkívül egyszerűen olvasható és értelmezhető, ráadásul még CSS-fájl (stíluslap) hozzákapcsolásával az adatok formázott megjelenítésére is lehetőséget nyújt. *.xml



Computerbooks Móricz Attila Windows-tippek 2900 Ft

4. ábra. Egy XML-forráskód minimális tartalommal 18

Igazodás a látogatók böngészőjéhez Az előző forrást további „” blokkok elhelyezésével bővíthetjük, amelyek megjelenítéséről a CSS-fájlban leírt formátumok fognak gondoskodni. Itt szintén ugyanazt a CSS-fájlt használjuk, amit a HTML-fájlok esetén is fogunk, de nem a HTML-kulcsszavak formátumait adjuk meg, hanem a saját mezőneveinkét, mivel az XML-fájl azt tartalmazza. *.css konyvtar { text-align: center; font-family: Arial, Helvetica; font-size: 14pt; color: #ff0000; } kiado { display:block; text-align: right; font-weight: bold; font-size: 18pt; color: #008000; } szerzo { display:block; text-align: center; font-size: 14pt; color: #0000ff; } cim { display:inline; font-style: bold; font-size: 10pt; color: #400000; } ar { display:inline; font-style: italic; }

5. ábra. Az XML-hez tartozó CSS-fájl tartalma Amint láthatjuk, a formázás eredményeképpen befolyásolni tudtuk mind a bekezdés, mind a karakterképek formátumát. Ahogyan az egyes adatmezők egymásba épülnek, úgy alkalmazza a lépcsőzetes stíluslapokat a böngésző. Ez a gyakorlatban azt jelenti, hogy a „konyvtar” elemre megadott jellemző érvényes minden elemre, kivéve amit az saját magára nézve felülír.

6. ábra. Az előző forráskódok eredménye a webböngészőben 19

A webhely tartalmának megtervezése Az XHTML-nyelv alkalmazását mindenképpen javaslom mindenkinek, aki most kezd el foglalkozni behatóbban a weblapkészítés rejtelmeivel, mert ez lesz a jövő nyelve. Ezen a nyelven készített weblapokat ugyanis a következő generációs mobiltelefonok is meg tudják jeleníteni, amire példa a már megjelent Nokia 3650-es készülék. Ez a nyelv a mobiltelefonokban a WAP-ot váltja le, míg a PC-k világában a HTML-t. Ennek eredményeképpen csak egy nyelvet kell megismernünk, csak egy fejlesztőeszközt kell használnunk ahhoz, hogy akár mobilra, akár PC-s kijelzőméretre tervezett oldalakat készítsünk. Mivel a számítógépünk és a mobiltelefonunk kijelzőjének mérete mindig is jelentősen el fog térni egymástól, ezért hiába lesz egy nyelv, attól nekünk még két vagy több külön tartalmat kell készítenünk a különböző méretre. *.xhtml

” jelsorozatok közé kell írnunk, amelyet a programok kiemelnek más színnel.

Mindezek ismeretében kezdjük el a weblapunkat szerkeszteni. Első lépésben vegyünk elő egy papírt és ceruzát, és vázoljuk fel a webböngésző ablakát, mint téglalapot, majd ezt osszuk fel egy 3x3-as területre. Ebből nekünk igazán csak a középsőre lesz szükségünk, mert az összes többi csak a tartalom oldalon való elhelyezését segíti. 40

Honlap „Varázsló-forma” elrendezésben Az elrendezés kialakításánál azt az információt fogjuk felhasználni, hogy mind a táblázat, mind a cella magassági jellemzője megadható. Ezzel arra kényszeríthetjük a középső cella megjelenítését, hogy az pontosan az ablak közepére kerüljön vízszintes és függőleges értelemben is. E cél megvalósításához a következő ábrán látható jellemzőkkel fogunk egy táblázatot létrehozni. Táblázat: width=100% height=100% cellspacing=0 cellpadding=0 border=0 width: 45% height: 45% width: 45% width: 45% height: 45%

height: 45% Ide kerül a tartalom. height: 45%

width: 45% height: 45% width: 45% width: 45% height: 45%

21. ábra. A weblap formáját megadó táblázat cellakiosztása A táblázat jellemzőit szándékosan írtam angolul, mert ezek már azok a HTMLben értelmezett jellemzők, amelyeket a táblázat létrehozására a weblap forráskódjában be fogunk írni. A „beírás” ténye attól függ, hogy milyen szerkesztőprogramot használunk, hamarosan erre is kitérünk. Láthatjuk a táblázat szélességi (width) és magassági (height) értékein, hogy így a belső tartalom részére csak 10%-nyi helyet hagytunk, ami biztosan kevés lesz. Ez azonban csak a látszat, mert a tartalmi cellába egy újabb táblázatot fogunk elhelyezni, amelynek már megadjuk a pontos szélességi méretét a kívánságunk szerint, és az meg is fogja kapni a kért helyet. Mi a helyzet akkor a százalékos értékekkel? Ebben az esetben a webböngésző program egy előre várt problémával fog találkozni, miszerint a megadott adatokkal a kérés nem teljesíthető, így a lehetőségek függvényében azt korrigálni fogja. A középső részre kerülő táblázat értéke kötött, ezért azt kötelezően megadja. A webböngésző ablakának mérete is kötött, így az is egy kiindulási érték. A kettő különbsége adja azt a „felesleges” értéket, amit el lehet osztani a jobb és a bal cella között, amelyek 45-45%-ban akartak osztozni, tehát egyenlően. Ezért a maradék helyet két egyenlő részre fogja a webböngésző program kiosztani a két cella között, amivel a középső pontosan középre fog kerülni. Ha még emlékszünk rá, akkor nekünk éppen ez volt a célunk, amit most elértünk. A függőleges igazítás ugyanezzel a gondolatmenettel történik, így a fenti módszerrel a középső táblacella pontosan a webböngésző ablak közepére fog kerülni. 41

Egyedi elrendezésű weblapok Most indítsuk el az általunk kiválasztott weblapszerkesztő programot, ami jelen esetben lehet akár a Windows Jegyzettömb is, és hozzuk létre a táblázatot. A táblázat magassági értékének megadását nem minden program támogatja, ezért ha ilyennel rendelkezünk, akkor azonnal szembesülünk azzal, hogy a vizuális szerkesztés mellett a forráskódot is módosítanunk kell valamilyen szinten, ha ezt a program nem fogja visszaírni a szerinte helyes alakra. Táblázat beszúrásához a vizuális szerkesztőprogramok általában biztosítanak párbeszédablakot, amelyet az Insert / Table vagy a Table / Insert / Table menüpontok alatt találunk meg. A Microsoft FrontPage 2002-ben az eszköztáron van egy ikon a táblázat beszúrásához, és a Table / Draw Table menüpontjának kiválasztása után rajzolhatunk is egyet a ceruzává változott egérmutatóval. Ez a funkció a Microsoft Word 97-ben jelent meg először, és onnan került át a FrontPage alkalmazásba.

22. ábra. Táblázat beszúrása a 1st Page 2000 és a FrontPage 2002 programokban A táblázat beszúrása után váltsunk át a HTML-kód nézetére, vagy ennek hiányában írjuk be az alábbi forráskódot, ami a táblázatot megrajzolja. A vizuális szerkesztőknél jelöljük ki az első, majd a harmadik sort, és a cella tulajdonságainál adjuk meg a cella magasságát 45%-ra. Ezután az első, valamint a harmadik oszlopot jelöljük ki, és ott a cella szélességét adjuk meg 45%-ra. A következő HTML-forráskód az ismertetett 3x3-as táblázatot hozza létre, amelynél a megadott cella szövege a webböngésző ablakának közepén jelenik meg. 42

Honlap „Varázsló-forma” elrendezésben index.html

Weblap szerkesztése 1st Page 2000 programmal

Ez már középen van.

...

25. ábra. A bal oldali linktábla egy sorának HTML-forrása .link_1_cella .alcim .alsor

{ background-color: #95EAD7; } { font-size: 10pt; font-weight:bold; margin-top: 5; margin-bottom: 0; } { font-size: 8pt; margin-top: 0; margin-bottom: 3; }

26. ábra. Az előző részlethez tartozó formázást végző CSS-fájl tartalma

27. ábra. A fenti kódokkal megvalósított linktábla kinagyított részlettel 46

Honlap „Varázsló-forma” elrendezésben A bal oldali hiperhivatkozásokat tartalmazó táblázatunkban van egy kis témát szimbolizáló ikon, mellette egy mérsékelten kiemelt témacímmel, ami egyben hiperhivatkozás az adott téma weblapjára. E cím alatt célszerű elhelyezni pár kulcsszót apró betűvel, ami segíti a látogatót a könnyebb témaválasztásban. Ezek a szavak is lehetnek linkek, ha a témán belüli további altémák egyéni oldalaira tudnak mutatni. A táblázat szélességi méretét pontosan megadtuk, hogy ez a későbbiek során se változzon meg. Célszerű elhatározni egy adott szélességi méretet, majd megtölteni tartalommal, végül korrigálni vagy a méretét, vagy a feliratok mennyiségét, esetleg azok betűméretét, hogy egy elfogadható, nem túl széles oszlopot kapjunk. Tipp. A Microsoft FrontPage programot használva lehetőségünk nyílik ún. webbot-komponensek beszúrására. Ez azt jelenti, hogy a célhelyre nem ezt a táblázatot szúrjuk be, hanem ezt egy külön HTML-fájlban készítjük el, és a teljes fájl tartalmát szúrjuk be. A beépülő tartalom teljesen bekerül a befogadó fájlba, de megnyitáskor és mentéskor a tartalma azonnal frissül a hivatkozás alapján. E rész szerkesztésére éppen ezért csak az eredeti fájlban van lehetőség. Lásd a programban: Insert / Web Component / Include Content / Page.

A táblázatunk cellái saját háttérszínnel rendelkeznek, ezért a cellaköz értékét (cellpadding) meg kell adnunk, különben azok összeérnének, és nem lenne hangsúlyos a gombok egyéni megjelenése. Meg kell még adunk továbbá a belső margót (cellspacing), különben a cellában lévő tartalom hozzásimulna a cella széléhez, és ez csúnyán mutatna, mivel a cellák közötti háttér átlátszódik, mintha kerete lenne a celláknak. A cella (

30. ábra. A friss híreket és a hozzá tartozó linkeket megjelenítő HTML-kód Amint láthatjuk a formázást teljes egészében a stílusfájlból végezzük, így itt csak a megjelenítéshez szükséges HTML-kódot találjuk. Ennek előnye, hogy a bekerülő tartalmat egyszerűen be tudjuk majd írni egy JavaScript program segítségével, de a megjelenést mégis külön tudjuk szabályozni. 52

Honlap „Varázsló-forma” elrendezésben Az élőlábnál alkalmazhatjuk például azt a módszert, hogy teljesen véletlenszerűen jelenítjük meg az előre elkészített feliratok valamelyikét, ami lehet a webes eléréseink vagy a telefonszámaink felsorolása, esetleg a postacímünk. Így a felirat minden oldalon más lesz, de soha nem ugyanaz, és előbb-utóbb mindegyik adatunk kiírásra kerül anélkül, hogy ezért nekünk a weblapok forrásán bármit is változtatnunk kellene. Legvégül elkészíthetjük az érdemi tartalmi részt, ami jelen esetben nem foglalhat sok helyet, de ez sem jelent problémát. Emlékezzünk vissza, abból indultunk ki, hogy kevés információt akarunk közzétenni, és ezért választottuk ezt az elrendezési formát. Amennyiben véletlenül több szöveget írnánk egy oldalra, mint lehetne, akkor a táblázat mérete lefelé megnő, és ez elrontja az egész oldal megjelenését. Erre az esetre többféle megoldás kínálkozik. Az oldal tartalma blokkokba szervezhető a „..” elemek segítségével, és az egyes blokkok tartalma stílusformázással elrejthető. Az oldal megjelenésekor az első blokk megjelenítését engedélyezzük, majd kis helyet foglaló hiperhivatkozások segítségével válthatunk az oldalon belül az egyes tömbök megjelenítésére, illetve elrejtésére. A műveletek elvégzését egy egyszerű kis JavaScript program végezheti, amely ismertetését lásd a „JavaScript: Látványos elemek – elemek látványa” című fejezetben az 56. oldalon. Tipp. Az előző módszer előnye, hogy az újabb tartalom megjelenítéséhez nem történik oldallehívás, nincs adatforgalom, mert már minden le van töltve, így a megjelenítés villámgyors, ami a látogatót lenyűgözi. Ezt az időt akár arra is kihasználhatjuk, hogy a további oldalak képeit előre lehívjuk szkriptekkel.

A másik megoldás a hosszabb tartalom elhelyezésére a több különálló weblap készítése. Ebben az esetben is ugyanúgy kis helyigényű linkeket kell elhelyeznünk, például „[#1], [#2], [#3] ...”, de azok mindegyike külön oldalra mutat, és nem egy JavaScript függvényre. Azért választanánk az előző helyett mégis ezt a nyilvánvalóan lassabb megjelenésű módszert, mert ezt egy PDA-n (tenyérgépen) is meg lehet jeleníteni, ahol esetleg nincs semmilyen szkript futtatására lehetőségünk. Olyankor is folyamodhatunk ehhez a módszerhez, ha a tartalmat nem statikus weblapokon készítjük el, hanem adatbázisba írjuk be, és az oldalak megjelenítése ASP, PHP, CGI programok futtatásával történik. Amint láthatjuk, egészen közel állunk ehhez, mert a tartalom felosztását sikerült már olyan pontosan meghatároznunk, hogy a dinamikus weblapok elkészítése csak egy kis programozási tanulást igényelne. Tudta, hogy például ASP-oldalakat futtathat a Windows NT/2000/XP-ben, mert az tartalmaz egy IIS webszervert? 53

Egyedi elrendezésű weblapok Határozzunk meg sablonokat a tartalmi területre. Általában hasznos, ha van egy nem túl kiemelkedő főcím, témacím az oldalon, majd alatta 2-4 ponttal kisebb betűmérettel 1-2 bekezdésnyi folyószöveg az adott téma ismertetésére. Ez a legtöbb oldalon be fog válni, de lesznek kivételek. Például nálam a könyvek ismertetésére kevés ez a terület, viszont arra éppen elég, hogy a könyv főbb paramétereit közzétegyem. Ugyanez önnél például korlátozott számú termék vagy egyéni szolgáltatás bemutatására bőven elég. A részletes ismertetőre mutat egy hiperhivatkozás, amely viszont egy felbukkanó újabb ablakban jeleníti meg a könyv (vagy termék) bővebb leírását, tartalmát, amelyet egy arra alkalmas gomb segítségével a látogató ki is nyomtathat. Ehhez szintén egy rövidke szkriptre lesz szükségünk. E módszerrel azt a problémát is megoldottuk, hogy egy ilyen kisebb tartalomra tervezett honlapon, hogyan jelenítsünk meg alkalmanként hosszabb írásokat.

31. ábra. Termék ismertetése esetén is elegendő a kevés hely Vigyázzunk arra, hogy ne hozzunk létre minden oldalhoz külön „sablont”, mert akkor nehéz lesz az oldalak logikáján kiigazodni. Az ilyen egyszerűbb felépítésű oldalaknál elég 3-5 különböző típusú oldal, így nekünk is egyszerűbb tartalommal megtölteni, mert nem kell a felépítésen a fejünket törni. Ha valami nem illik bele az oldal képébe, akkor gondoljuk át, hogy arra vagy annak kiemelésére valóban szükség van-e. 54

Honlap „Varázsló-forma” elrendezésben

Kiegészítő díszítések a honlaphoz Ahogyan az oldal belső részeit, a linktárat és a tartalmi területet is feldíszítettük kis ikonokkal és egyéb háttérszínezésekkel, úgy a téglalapon kívüli részekre ugyancsak ráfér egy kis kiegészítés. A vízszintes elrendezés hangsúlyozását erősítheti például a 3x3-as táblázatban az 1. és a 9. cellában elhelyezett vízszintes vonal () vagy azon cellák szegélyeinek kiemelése vastagítással. Ennek megvalósításához ki kell egészítenünk a főtáblázat celláit néhány paraméterrel. Ha nem sajnáltuk a megjegyzéseket a táblázatok előtt és után, akkor most könnyen megtaláljuk a megfelelő „

110. ábra. A bal oldali cella a jobb oldali szöveges rész kiemelésére szolgál

 A tartalmi terület feltöltése szöveggel

A C6-os cellába kerül a weblapunk érdemi tartalma, amiért az egészet létrehoztuk. Az interneten megjelenő első weblapoknál gyakorlatilag csak ebből a részből állt az egész oldal, illetve a lapon elhelyezett hiperhivatkozásokból. Arra most is törekedni kell, hogy a weblap lehető legnagyobb része ez maradjon. cella_c6 tartalma

111. ábra. A tartalmi területet adó cella egyszerű bekezdések sorozata 155

Egyedi elrendezésű weblapok Főleg portáloknál találkozhatunk olyan weblapokkal, ahol az érdemi információ az oldal legfeljebb 20-30%-át foglalja el, a többi hiperhivatkozások tengere vagy egyéb reklám és felvezető szöveg a további weblaphoz. Rendkívül idegesítő, mert egyrészt jóval nagyobb forgalmat eredményez az ilyen oldalak olvasása, másrészt sokkal lassabb a letöltésük és megjelenítésük, mint azt a rajta lévő információ indokolná. Sokszor azonban azért tehetik ezt meg, mert az ott közölt adat odavonzza a látogatókat. Ennek viszont az a hátulütője, hogy amint megjelenik egy újabb portál, ahol hasonló jellegű információhoz juthatunk, azonnal el fogjuk hagyni az előzőt. Addigra már kellően megérik az elhatározás bennünk, és egyetlen olyan érv sem marad, ami miatt azt az oldalt újra meg kellene látogatnunk. Az ide kerülő tartalmat a szokásos címsorokkal és bekezdésekkel formázzuk meg (h1, h2, p), amelyek stílusát természetesen külön meghatározzuk. Ez elsősorban a bekezdés- és a karakterformázást jelenti, így majdnem ugyanazok a stílusjegyek ismétlődnek mindenhol, csak más értékekkel. stilusfo.css részlete .cella_c6 { padding: 6px; font-family: Georgia, Garamond, Times New Roman; } // Csak kiegészítések a cella_c6-hoz!!! h1 { margin-top:0px; margin-bottom:3px; font-size: 14pt; font-style: italic; } h2 { margin-top:12px; margin-bottom:6px; font-size: 12pt; } .bekezdes { margin-top:3px; margin-bottom:3px; margin-left:12px; margin-right:12px; text-indent: 24px; text-align:justify; font-size: 8pt; } a:link { text-decoration: none; color: blue; font-weight: bold; } a:visited { text-decoration: none; color: green; font-weight: bold; } a:hover { text-decoration: underline; color: red; font-weight: bold; }

112. ábra. A szövegterületre vonatkozó elemek stílusjellemzői Fontos elemek a bekezdés határainak beállításai, amellyel pontosan szabályozhatjuk a szöveg megjelenését. A „text-indent” az első sor behúzását adja meg, de ez a CSS 2.0 szabvány része, amit nem minden böngésző támogat. Ha a teljes terület azonos betűtípussal rendelkezik, akkor azt a meghatározást írjuk a cella stílusához. Az előző feltételt inkább kijelentésként kellene írni, mert nem célszerű váltogatni a betűtípust egy oldalon, mert attól zavaróvá válik, és nehéz lesz az oldal logikáját, felépítését megérteni. Hasonlóan jártunk el a cella belső margójával (padding), amit a cellánál határoztunk meg. 156

Bővebb tartalomhoz „Szolid sávos” stílus

A nyitóoldal és a további weblapok formai megjelenése Terjedelmesebb oldalaknál, mint a portálok nyitólapjainál, hajlamosak a szerkesztők mindent a nyitólapra halmozni, mintha attól félnének, hogy a látogató valamit elfelejt megnézni a további oldalakon. Ezzel éppen az ellenkező hatást érik el, mert olyan zsúfolttá válik az oldal, hogy a látogató meg sem próbálja megérteni az oldal felépítését. Ebből következően nem is fogja megtalálni azokat a weblapokat, amelyekre éppen szüksége lenne, mert a szerkesztő sem vette a fáradságot, hogy megtisztelje a látogatót azzal, hogy ezt megmutassa neki. Ha az oldalon van helyi kereső, akkor a felhasználó azonnal ahhoz fog fordulni, ha nincs, akkor pedig találomra rápróbál pár linkre. Mivel az oldalak rendkívül zsúfoltak, ezért néhány kósza kísérlet után elmegy a kedve a céltalan kereséstől, hiszen ne várja már el senki tőle, hogy letöltse az egész portált egy-két hasznos weblap miatt, és nem is fogja. A nyitólapot ezért hagyjuk meg egyszerűnek, könnyen átláthatónak, így a látogató megismeri annak felépítését. Ebből az ugyancsak következik, hogy a további oldalakon szintén ugyanezt a felépítést kell megőriznünk, mert különben a látogató elveszti a tájékozódási képességét. A mi esetünkben a bal felső részen van a navigációs terület, ahonnan például 5x5=25 oldal érhető el, de ez egészen magas számúra növelhető, ha a menü nem mellette jelenik meg, hanem mondjuk a másik alatt, ahol akár 8-10 menüpontja is lehet az almenünek. A továbbiakban pedig az egyes oldalakon további hiperhivatkozások lehetnek a szövegbe szőve, mint a hírportálokon, így az egyszerű felépítés mellett is több száz oldalt tudunk megjeleníteni egészen kis navigációs terület felhasználásával. Az oldalon így bőven marad helyünk a tartalom megjelenítésére, és az ennek olvashatóságát biztosító képekre. Fontos szempont még az oldal vagy a cég nevének hangsúlyozása, hogy a látogató egy pillanatra se felejtse el, hol van. Ha az oldalon görgetni kell a tartalmat, akkor a fejlécben és a lábrészen is elhelyezhetünk egy-egy cégnevet tartalmazó feliratot. A nyitólapon ugyanez már zavaró, mert ott mindkettő egy képernyőn fog látszódni, így felesleges hivalkodásnak fog tűnni. Ilyennel ott találkozunk, ahol nem tudják megtölteni semmi értelmes dologgal az oldalt, de találtak egy jó kis programot, amellyel szép feliratokat lehet készíteni. Ez a felismerés pedig már ugye nem is vet olyan jó fényt a weblapunkra. Az oldal felépítését tekintve azt tartsuk szem előtt, hogy a tartalmi terület minél nagyobb részt kapjon az oldalon. A belső oldalakon ez nem probléma, mert ott hosszabb, kb. 2-4 képernyőhossznyi méretűre tervezzük a szöveget, de a nyitólapon kevesebb a szöveg ugyanazon fejlécméret mellett. 157

Egyedi elrendezésű weblapok Ezért, amikor a fejlécet tervezzük, arra is legyünk tekintettel, hogy az mekkora részét foglalja el a képernyőnek, hiszen a nyitólapon ez meghatározó lehet. Egyébként sem mutat jól, ha a fejléc a képernyő (800x600-as) magasságának a felét elfoglalja, különösen ha utána viszonylag kevés érdemi rész következik az oldal többi részén. Formázási szempontból eddig minden oldalunknál pontban adtuk meg a betűméretet, mert ez könnyebben értelmezhető számunkra, viszont ezzel kiiktatjuk a webböngésző Nézet / Szövegméret / 1..5 menüpontját (vagy gombját az eszköztáron). Ezzel elvesszük a lehetőséget a látogatótól, hogy a szövegméreten változtasson, ha az számára nem megfelelő. Használjunk helyette relatív formázást, vagy biztosítsuk másik stíluslapra váltással a nagyobb betűmérethez igazított oldal megtekintésének lehetőségét a látogató számára. A relatív formázás eszközei a következő kulcsszavak, amelyeket megadhatunk a „font-size:” értékeként, például „..pt” helyett: „xx-small | xsmall | small | medium | large | x-large | xx-large”. Ennek hátránya, hogy a lépések nem egy pont értékkel követik egymást, és még így is eléggé kis mérettartományt fednek le. Ennél erőteljesebb az a megoldás, amikor a pont helyett az „em” mértékegységet használjuk. A 12 pt-os betűméret felel meg az 1 em-nek, és értékeként megadhatunk tizedes törtet. Így már kifejezhetjük a méreteket egészen pontos értékkel, és biztosítjuk a látogató számára a méretváltoztatás lehetőségét. Kell egy kis idő, amíg átszokunk erre a megoldásra, viszont a látogatóink is hálásak lesznek érte. Ezután mi ugyancsak szabadabban használhatjuk az egészen kicsi és egészen nagy betűméreteket az oldalainkon, mert tudjuk, hogy a látogató ezt szabadon megváltoztathatja, és ezt neki is a tudomására hozzuk. Tipp. Az a tény, hogy a látogató átállíthatja az oldalainkon lévő betűméretet a webböngészője beépített funkciójával, ez már olyan ritkaság, hogy külön fel kell hívni rá a figyelmet a nyitólapon. Ezt az ikont is elhelyezhetjük a windowsos ikonok között a lapunk bal felső sarkában, és egy felbukkanó párbeszédablakban (alert()) tudjuk tájékoztatni a látogatót a lehetőségről.

A szöveg nyugodt elolvasásához alapvetően szükséges, hogy semmi zavaró tényező ezt ne akadályozza meg. Ezért törekedjünk mindig arra, hogy a lapon lévő táblázatban elhelyezett tartalom a lapon középre igazítva jelenjen meg, mert akkor érdemes a webböngésző ablakát teljes képernyősre nyitni. Ugyanis ebben az esetben a két oldalon lévő egyszínű (lehetőleg sötét, de ne fekete) rész a középső területre irányítja a figyelmünket, és nem is vonja el onnan semmi. Az ilyen oldalakat mindenki szívesen olvassa, mert szinte megpihenhet közben. 158

Bővebb tartalomhoz „Szolid sávos” stílus

Grafikai fogás: A weblapok illusztrálása fényképekkel A jelenlegi weblapunknál a fényképek kiemelt szerepet kapnak, mert a szöveg egyhangúságát törik meg, és teszik látványossá az amúgy „száraz” szöveges oldalt. Azonban arról se feledkezzünk meg, hogy senki nem szereti, ha az oldal lassan töltődik le, és éppen azért, mert felesleges és nagy képek töltik meg azt. Ezért ha a kép nem a szöveghez kapcsolódó ábra, akkor csak nagyon óvatosan használjuk azokat, mert különben az egész díszítés az ellenkező hatást válthatja ki. Nem kell azért megijedni sem, mert a bemutatott kis szélességű oldalnál felhasznált fényképek általában 10-15 kB méretűek, ami bőven belül van a tűréshatáron, letöltésük egészen gyorsan megtörténik.

 Átlátszó téglalapok készítése

A felbukkanó menünk megjelenésekor azt terveztük, hogy az a fejlécbeli kép felett fog elhelyezkedni. Ha az itteni táblázat háttere egyszínű lenne, akkor az erőszakosan jelenne meg, elrontva a fénykép hatását. Ezzel szemben ha a menü háttere egy „üveglap”, akkor a menü olvasható marad, és a kép pedig látható, így a problémát megoldottuk. Már csak az a kérdés, hogyan készítsünk olyan hátteret, ami átlátszó, és elhalványítja a mögötte lévő háttérképet. Az egyik általánosan alkalmazott megoldás, hogy ismerve a menü leendő helyének pontos helyzetét, kivágjuk a kép eltakarásra kerülő részét, és azt adjuk meg háttérképnek, esetleg már eleve a menü szövege is szerepelhet rajta. Ezt felejtsük el gyorsan, mert sok kép kell hozzá, és sok munkával jár, ami nem áll arányban a weblap jelenlegi formájával. A másik megoldás, hogy készítünk egy átlátszó háttérképet, amely ad is hátteret, meg át is engedi a mögötte lévő tartalmat. E két funkciónak egyidejűleg úgy felelhet meg, ha a kép minden második pixele átlátszó, és minden második pedig ábrázol valamit. Ehhez indítsuk el a Windows Paint programját, állítsuk be a kép méretét előbb csak 10x10-esre, majd nyomjuk meg a [Ctrl]+[E]-t, a nagyítást 8x-osra (lásd a nagyítót), és a segédrácsot a [Ctrl]+[G]-vel. Ezután rajzoljunk egy sakktáblát 1x1 pixeles ráccsal és például halványsárga színnel.

113. ábra. Az üveghatáshoz szükséges kép elkészítése és kipróbálása 159

Egyedi elrendezésű weblapok Ne gondoljuk, hogy ez munkaigényes lenne, hiszen már az első két sor elkészítése után kijelölhetjük a meglévőt, és a [Ctrl] lenyomva tartása mellett húzhatjuk lefelé, ezzel folyamatosan másolva a részletet. Pillanatok alatt elkészül a 10x10-es kép, amelyet mentsünk el, mert szükségünk lesz rá. Nyissuk meg a képet a Microsoft Photo Editorban, nagyítsuk fel legalább 400%-ra, hogy jól lássuk, majd kattintsunk az ábrán is jelzett Set Transparent Color gombra, valamint a pepita fehér színére. Ezzel azt állítjuk be, hogy mely szín legyen átlátszó a képen. Most ismét mentsük el, de csak GIF-formátumban, mert kizárólag annál értelmezett ez a hatás. Ha ezt a képet adjuk meg az úszó táblázatok háttereként (lásd: nálam: arny-s.gif), akkor a táblázat szövegének lesz egy finomszemcsés sárga háttere, de a mögötte lévő kép is átlátszó lesz. Tipp. Nagyítsuk fel a pepita képünket 100x100-asra, tegyük rá a hálót ugyanekkora fényképre, nyissuk ezt meg a Photo Editorban, és adjuk meg átlátszónak a háló még egyetlen megmaradt színét. Így már a fényképünk lesz átlátszó!

Ebből is láthatjuk, hogy a Windows legegyszerűbb eszközeivel is készíthetünk olyan hatásokat, amelyekre példát nagyon ritkán találni az interneten, pedig ott aztán van néhány profi weblap, de mindenkinek lehet valami újat mutatni.

 A bal oldali cellák grafikai tartalma

Ez a bal oldali kép éppen a weblapon használt képek egyike, amely egy átlagos digitális fényképezőgéppel készült, és felbontása mindösszesen csak 640x480-as. Ez az állókép így 640 pixel magas lehet, de ha csak 480 pixeles, akkor sincs baj, ha az oldalon megjelenő tartalom mennyisége többet nem is kíván meg. A szélessége 140 pixel, mert a táblázatunkban ekkora helyet hagytunk a bal oldali celláknak. Ez viszont éppen arra jó, hogy a fényképből egy kiemelendő részt kivágjunk, így érdekessé téve a képet. Az a különleges benne, hogy „tudjuk”, hogy hiányzik egy része, hiszen a vonat el van vágva, az előtte lévő rész is hiányzik, és ez nem hagyja nyugodni a fantáziánkat. A prózai valóság ennél sokkal lehangolóbb is lehet. A kép jobb oldali részén bemozdult valaki, a bal oldalon pedig egy romos épület volt, így ennyi hasznosítható maradt belőle. De mennyivel jobban hangzik az előző változat, nem? ;-) ... Ráadásul milyen szerencse, hogy csak ekkora kép kellett nekünk.

160

Bővebb tartalomhoz „Szolid sávos” stílus Amennyiben a képünk kisebb, akkor sincs gond, mert a felső részét elhalványítva átfuttathatjuk a színt a felső cellába, ahol az már csak egyszerű háttérszínként jelenik meg, de a szemet felvezeti a képtől a felső navigációs blokkra. Ebben az esetben a képünkön alkalmaznunk kell a Macromedia Fireworks MX programban található elhalványítást végző effektust (Fade), vagy más módon kell ugyanazt a hatást elérni. Alkalmazhatjuk például a Microsoft Photo Editorban lévő Smudge ( ) effektust, amellyel el lehet mosni a felső részen a felesleges színeket a mellette lévő erőteljesebbek javára. Ha letöltöttük a Fireworks MX programot, akkor inkább azzal dolgozzunk, mert abban előre elkészített effektusok szolgálnak erre a feladatra. Válasszuk ki a Commands / Creative / Fade Image parancsot, majd jelöljük ki az egyik effektust a párbeszédablakból. A választásunk később módosítható, amint azt az alábbi ábra mutatja.

114. ábra. A kép felső részének fokozatos elhalványítása a Fireworks programban A megjelenő fekete vonalat a végein lévő téglalappal, rombusszal tudjuk elmozgatni, elforgatni, de erre a jelenlegi példánkban nincs szükség. Helyette inkább válasszuk ki az ábrán egérmutatóval jelzett pontokat, és lágyítsunk a kitöltésen egy kicsit a fekete szín szürkére váltásával vagy az intenzitás értékének (Opacity) csökkentésével. 161

Egyedi elrendezésű weblapok A képet a végén a [Ctrl]+[Shift]+[R]-rel exportáljuk, ami a mi esetünkben a mentést jelenti ugyanabba a formátumba. Ha ettől el akarnánk térni, akkor az Optimize oldaltáblánál adhatjuk meg az új formátumot. Érdemes alaposabban megnézni, hogy mely formátumnál milyen további paraméterek vannak, mert ennek megismerésével az eddigieknél kisebb fájlméretű képeket tudunk előállítani, ami egy weblapnál nem utolsó szempont. Tipp. Az Optimize oldaltáblában lévő Matte négyzet színét változtassuk meg az alapértelmezett fehérről például sötétkékre. A vonatos képnél ez azt jelenti, hogy a színátmenet nem elhalványítás lesz, hanem átmenet a tiszta sötétkékbe, ami borongós eget jelent. Már csak egy kis villámot kell rajzolni a kép tetejére, és fényes nappalból viharos estét varázsolhatunk.

Amennyiben az elhalványítási effektus különböző formái között tovább válogatunk, akkor érdemes egyszer azokat is kipróbálni. Ehhez másoljuk le a weblapunkat, és a másolatban a bal oldali háttérképnél más nevet adjunk meg, például vonat2.jpg helyett vonat3.jpg-et. Egyes effektusoknál azt fogjuk tapasztalni., hogy a sarkos designnal felépített weblapunkhoz nagyon nem illik, de egy későbbinél még hasznát vehetjük. Van például a „Starburst” effektus, ami a képet speciális forma mentén halványítja el, de a felső részén mégis jó lehetőséget ad a szín továbbfuttatására, és nekünk ez elsődleges szempont. Éppen emiatt most nem jó a „Foods” vagy a „Waves” effektus, mert azoknál felül nem egy színnel ér véget a kép.

 Elvárások a fejlécben lévő fényképpel szemben

Az előzőek után technikai értelemben sok újat nem lehet mondani, mert ezeket a hatásokat ki kell próbálni, hogy lássuk, hiszen a szép és különleges hatások megítélése szubjektív, mindenkinek az egyéni ízlésétől függő. Tervezési szempontból viszont fontos, hogy megértsük, nem azért kell elhalványítást használni, mert az olyan különleges, hanem azért, mert ezzel így ráirányítjuk a tekintetet a navigációs területre. Ha más módon is el tudjuk érni ezt az eredményt, akkor az is egy jó megoldás, éljünk vele nyugodtan. A lényeg az elv megtartása. Ha például jól mutat a bal oldali egyszínű sávhoz kapcsolódó kép, ami azért kapcsolódik a sávhoz, mert azonos színnel határosak egymással, akkor alkalmazzuk azt a megoldást. Fontos, hogy a bal oldali kép zökkenőmentesen áthaladjon a fenti színbe, amelyhez színében vagy jellegében egyező fejléckép kapcsolódjon. Az előző design példa volt arra, hogyan kapcsolódhatnak egymás mellé az egymással amúgy erős kontrasztban álló színek vagy képek. Ez a nyugalom és a harmónia példája, ahol az egész weblap a színek lágy hullámzása. 162

Bővebb tartalomhoz „Szolid sávos” stílus

JavaScript: Menü megjelenítése animáció kíséretében A weblapjainkon elhelyezkedő hiperhivatkozásoknak fontos szerepük van az oldalak közötti váltásban, de annyira azért nem nagy, mint milyen sok helyet elfoglalnak egyes weblapokon. Ezért ha csak egy kisebb menüsort helyezünk el, és a többi kattintási pont (link) itt jelenik meg menüként, akkor jól megoldottuk a problémát. Ezeket viszont a szöveg felett abszolút pozíciók megadásával érhetjük el, ami nem olyan egyszerű egy változó méretű ablak esetén (lásd a 207. oldalon).

 A felbukkanó menü programozása

Az utóbbi pár weblaprészletben több JavaScript függvényre hivatkoztunk, így itt az ideje, hogy ezeket részletesen megvizsgáljuk. Nézzük meg először, hogy mi történik, ha rámutatunk a navigáló blokkban lévő kis táblacellákra. web4.js részlete var obj, obj2, hx=0, hy=0, fx=0, fy=0, hivoObj; function tegla_be(n) { hivoObj = eval("link_"+n); hivoObj.style.cursor="hand"; hivoObj.childNodes(0).style.backgroundColor = "white"; hx=event.clientX-event.offsetX-2; hy=event.clientY-event.offsetY-2; } function tegla_ki(n) { hivoObj = eval("link_"+n); hivoObj.style.cursor="auto"; hivoObj.childNodes(0).style.backgroundColor = "red"; }

115. ábra. Az egérmutatóval kiváltott események kezelése A táblacellára való rámutatáskor meghívjuk a tegla_be() függvényünket az adott cella sorszámával, amelynél ezzel beazonosíthatjuk azt az elemet, amelyre nekünk éppen szükségünk van (pl. link_1 ). Ezután utasítással módosítjuk az egérmutató alakját, a cella hátterét, valamint eltároljuk az adott cella [X,Y] koordinátáit, mivel ehhez viszonyítva fogjuk a menüt megjeleníteni. Tipp. Ha legördülő menüt akarunk készíteni, akkor hasonló módon kell eljárnunk, a menü megjelenítését illetően. Abban az esetben is az aktuális elem koordinátáihoz képest valamilyen eltolással jelenítjük meg a „legördülő” táblát.

A koordináták eltárolásához szükséges, hogy a használt változókat a függvényen kívül definiáljuk a var utasítással, mert csak így lesz globális a változó. 163

Egyedi elrendezésű weblapok A téglalapból való kilépéskor kerül meghívásra a másik függvényünk, amelynél szinte ugyanazokat az utasításokat használva változtatjuk meg a cella illetve a egérmutató jellemzőit. Itt is használjuk az „eval()” függvényt, amely a megadott karakterláncból előállítja a tényleges objektumot, így utána arra már tudunk hivatkozni. web4.js részlete function tegla_klikk(n) { hivoObj.childNodes(0).style.backgroundColor = "rgb(64, 255, 64)"; obj=eval("tabla_L"+n); if (obj.style.display!="block") mutat(obj); // vagy start_ani(obj) else obj.style.display="none"; } function mutat(obj) { if (obj2) obj2.style.display="none"; // Az előző elrejtése, ha volt... with (obj.style) { position="absolute"; display="block"; left=hx+35; top=40; } obj2=obj; }

116. ábra. Az almenü megjelenítése a kattintás hatására Elérkeztünk a programunk leglényegesebb részéhez, a kattintás hatására megjelenő menühöz. A tegla_klikk() függvényünkben először állítunk egyet a cella háttérszínén, amelynél egy újabb megadási forma látható. A stílusoknál már találkoztunk az rgb() függvénnyel, de így programban még nem használtuk. Ezután az eval() és a kattintásnál átvett paraméter segítségével meghatározzuk a megjelenítendő táblázat azonosítóját. Ha a tábla már meg van jelenítve, akkor elrejtjük, ha nincs, akkor megjelenítjük. Ez utóbbi műveletet előbb a mutat() függvénnyel végezzük el, ami egyszerű, rövid és könnyen megérthető. Amennyiben ennél látványosabb megoldásokat szeretnénk, akkor használjuk a start_ani() függvényt, amely szintén megjeleníti a menüt (a táblázatot), de ezt animáció kíséretében teszi. A mutat() függvényben meg kell vizsgálnunk, hogy van-e már megjelenített menü, mert ha van, akkor előbb azt el kell rejtenünk, és csak azután lehet az újat előhozni. A megjelenítés után az adott objektumot eltároljuk, így a következő alkalommal ezt kell majd elrejteni. Azonban mi történjen az első esetben, amikor még nincs előző objektum? Ennek megoldására egy látványos és egyszerű vizsgálatot végzünk el. Az „if (obj2)” utasítás látszólag értelmetlen, mert nincs feltétel, de ebben az esetben a jelentése az, hogy létezik-e az objektum, és így már lehet rá igaz/hamis választ adni. 164

Bővebb tartalomhoz „Szolid sávos” stílus Az előző menü elrejtése után következik a másik hasznos JavaScript utasítás, a „with ()” blokk. Az utasítás zárójelében megadjuk az objektumot, majd a blokkban minden utasításunk közvetlenül az adott objektumra fog vonatkozni. Ebben az esetben az objektum stílusának beállításához csak az adott jellemzők értékadását kell felsorolni, és nem kell mindegyik elé beírni az objektumot (például: obj.style.position=”absolute”). A menüt adó táblázat megjelenítése a weblap végéről úgy történik, hogy a pozícióját abszolút értékűre állítjuk, így a megadott pontos koordinátájú pozícióba állíthatjuk az adott elemet. Ezzel az objektum a szövegréteg alá vagy fölé kerülhet, attól függően, hogy a „z-index” paraméternél a CSS-fájlban mit adtunk meg. Most semmit, ezért a szöveg fölé kerül az objektum. A display paraméterrel engedélyezzük a megjelenítését, majd azonnal beállítjuk a helyét (left, top), amelyhez a már eltárolt hx értékét is felhasználjuk. A pozíció meghatározása nem olyan egyszerű, mert az Internet Explorer nem minden objektumnak ad értéket, amellyel rendelkezik, amelynek angol nevéből következnie kellene egy-egy érték meglétének. Ezért a következőkben megnézünk ehhez egy másik módszert is, így jobban tudunk választani, ha az egyik nem működne adott IE verzióban. web4.js részlete var cx, cy; c3.onmouseover=rogzit_c3; function rogzit_c3() { if (!cx) { cx = event.x - event.offsetX + 140 + 5; // 140 px széles a bal oldal cy = event.y - event.offsetY + 5; } }

117. ábra. A leendő menü célkoordinátáinak rögzítése egy alkalommal Az előző módszernek az volt a hibája, hogy csak egy adott böngészőablaknál volt helyes az értéke. A weblap megjelenésekor a böngésző ablakának mérete eltérő lehet, ezért egyszer el kell tárolnunk egy olyan elemnek a pozícióját, amelyhez tudunk kapcsolódni. Legyen ez a hely a C3-as cella bal felső sarka. Amikor az egérmutatóval a C3-as cellába belépünk, akkor és csak egyszer tároljuk el a cella abszolút helyzetét, illetve az abból számított koordinátákat, így azonnal a leendő menü célkoordinátáit tárolhatjuk el a [cx, cy] változókban. Mivel a JavaScript programra való HTML- hivatkozást most a weblap legvégére tettük, ezért már ismert az összes weblapon előforduló elem azonosítója, ezért hivatkozhatunk rájuk. Erre utal ez: c3.onmouseover=rogzit_c3; 165

Egyedi elrendezésű weblapok A C3-as cellának adtuk találóan a „c3” azonosítót (id=”c3”), és ezen az objektumon bekövetkező onMouseOver esemény bekövetkezésekor hívja meg a rogzit_c3() függvényt. Egyetlen hátránya, hogy paramétert nem adhatunk át, mert különben az egész weblapon ezt a módszert alkalmaztuk volna. Miért? – A válasz egyszerű, hiszen így mindent, ami a programozással kapcsolatos, azt a JS-fájlba helyezhetjük, mindent ami formázással, azt a CSSbe, és mindent, ami a weblapon megjelenik, azt a HTML-be. Ezzel tökéletesen szétválaszthatjuk az egyes részeket egymástól. Ennek ellenére a lehetőség adott, hiszen azon helyeken, ahol paramétert adunk át, ott sem feltétlenül kell azt úgy megoldanunk, ahogyan tettük. Hiszen a programozásban éppen az a szép, hogy már akkor találhatunk rá jobb megoldást, amikor éppen elkészültünk a programmal. Itt is meg van a lehetőségünk arra, hogy az azonosítókat más elemekhez rendeljük, más objektumokat használjunk fel, máshonnan olvassuk ki az adatokat, mint ahonnan eddig tettük. Tipp. A 129. oldalon bemutatott felfedez.html sokat segít abban, hogy minél jobban fel tudjuk fedezni a rendszerünkben rejlő lehetőségeket. A weblap legfrissebb változatát kérésre e-mailben elküldöm. Írjon a [email protected] e-mail címre egy levelet, és postafordultával megkapja a weblapot csatolva.

118. ábra. Az esemény jellemzőinek kiíratása az új változatban 166

Bővebb tartalomhoz „Szolid sávos” stílus A feladathoz visszatérve azt láthatjuk, hogy ismét egy érdekes if-vizsgálattal indul a függvényünk. Az „if (!cx)” azt jelenti, hogy ha a „cx” még nem létezik, vagy nem kapott még értéket (=null), akkor a vizsgálat értéke hamis. A felkiáltójel a tagadás jele, tehát ha a „cx” még nem létezik, akkor adjunk neki értéket, és ezzel azt is elrendeztük, hogy ez az utasítás soha többé ne hajtódjon végre a weblap életciklusa alatt. A „cx, cy”-ban a leendő menü célhelyét adjuk meg, amelyet az eseménykor kiolvasott egérpozícióból és az adott elem relatív pozíciójából számolhatunk ki. A tulajdonságok értelmezésével már foglalkoztunk a 91. oldalon, de azt a függvényt kibővíthetjük a felfedez.html-ben megismert újabb elemekkel (például event). Tipp. Írjuk be a felfedez.html-ben a szövegmezőbe az „event” szót, majd kattintsunk a mellette lévő gombra, és felfedezhetjük az esemény minden jellemzőjét. Érdemes a weblapot kibővíteni egy hiperhivatkozással, ami ezt megteszi helyettünk, így akkor elég lesz csak a linkre kattintani.

A „cx, cy”-ban eltárolt koordinátákkal kiválthatjuk az előző függvényeinkben használt „hx, hy” értékeit, így átláthatóbb forrásprogramokhoz jutunk. Mielőtt az animált menüre rátérnénk, fejezzük be az egyszerűbb változatot, és írjuk be a hiányzó függvényét. A tart() függvényünk a tartalomnál használt olyan elem, amelyet a felbukkant menüben történő kattintás hatására indítunk el, és két paramétert adunk át neki. Az első a főmenüben, míg a második az almenüben elfoglalt helyét adja meg. E két érték segítségével egyszerűen összeállíthatunk egy fájlnevet a példa szerint, aminek eredménye lehet például az erdei_1_1.html, erdei_1_2.html, erdei_1_3.html stb. web4.js részlete function tart(n,m) { hivoObj.style.backgroundColor = "white"; document.location.href="erdei_"+n+"_"+m+".html"; }

119. ábra. Így lehet hiperhivatkozás nélkül is oldalt váltani A megoldás előnye, hogy egy adott webhely lapjai logikus számozással lesznek ellátva, hiszen semmi jelentősége nincs a fájlnévnek a látogató számára, nekünk viszont annál inkább. Így ha további weblapokkal bővítjük a rendszert, amelyek valamely oldalról érhetők el (emlékezzünk a GYIK-oldalakra, lásd a 142. oldalon), akkor azok fájlnevei különbözhetnek a mostanitól. 167

Egyedi elrendezésű weblapok Ha a fájljaink könnyen elkülöníthetőek lesznek, akkor azokat egyszerűbb lesz felkutatni, módosítani, archiválni stb. A másik előnye már a tart() függvényből látszik, hiszen egy egyszerű képlettel elő tudjuk állítani a szükséges fájlnevet. Ha az oldalainkat esetleg más nyelvekre lefordítjuk, akkor azoknál is megmarad ez a számozási rendszer, de kiegészülhet minden fájlnév egy „_hu” vagy „_en” taggal. Ha egy adott oldalnál át szeretnénk váltani a másik nyelvi változatra, akkor azt villámgyorsan megtehetjük, hiszen csak a weblapot, értsd a szöveges részt kell letölteni, mivel a képek többsége azonos az oldalon. Tipp. Az előző tervnél megismert szűrők segítségével az oldalt elrejthetjük animáció kíséretében, amitől az még különlegesebb lesz. Ha viszont minden oldalt animációval zárunk, akkor biztosítsunk lehetőséget ennek kikapcsolására.

Értékes másodperceket jelenthet az animált elrejtés, ha a következő oldalt előbb egy különálló és rejtett keretbe (FRAME) behívjuk, és csak utána váltunk át rá, amikor már részben letöltésre került a másik – nem látható – részben. Ehhez csupán annyit kell tennünk, hogy a nyitólapon definiálunk két keretet, amiből a felső üres lesz, és nulla magasságú, míg a másik alatta 100% magas. Ebből a látogató szinte semmit nem fog észrevenni, de mi az animáció előtt elindíthatjuk a kért weblap betöltését a nem látható keretbe. Az animáció után a fenti megoldással átválthatunk a látható részen is a kért weblapra, de addigra annak egy része vagy a teljes egésze már le lesz töltve. Így a kért weblap megjelenése az animáció után szinte villámgyors lesz, különösen, ha kevés képet használunk, illetve ha azokat az előző oldalon már letöltöttük. A kevésbé bonyolult megoldás, ha elhelyezünk a weblapon valahol egy 0x0 pixeles IFRAME-keretet, és oda hívjuk be a weblapot.


Az animált menü programozása

Az animáció esetén először meg kell határoznunk a kiindulási és a végpont koordinátáit, a táblázat szélességét (előtte 1pt magasra állítjuk a betűméretet) és magasságát, amelyekből kiszámíthatjuk a lépésközöket és a léptetési időt. A már előzőleg megjegyzett [hx, hy] és [cx, cy] koordinátákat is felhasználjuk a számításnál. A függvény előtti változólistában megadhatjuk az animáció várható idejét, amely persze függ attól is, hogy hány lépésben (lepDB) fogjuk megvalósítani a menümozgatást. A már ismert with() blokk segítségével egyszerűen megformázzuk a megjelenítendő táblázatot, és áthelyezzük a kattintási helynél lévő téglalap fölé. Az 1 pt-os betűmérettel egészen kicsi lesz a táblázatunk, de azért kicsit nagyobb, mint a téglalap, de ez úgy sem fog látszódni. 168

Bővebb tartalomhoz „Szolid sávos” stílus Az animáció a „window.setInterval()” függvényhívással indul, és nem a megszokott „window.setTimeout()”-tal. Ennek oka az, hogy ezt csak egyszer kell beprogramozni, és addig ismétli a feladatot, amíg le nem állítjuk, míg a másik hatásköre csak egy hívásra terjed ki. Elindítjuk a „jobbraEL()” függvényünket, amellyel az objektum bal felső koordinátáit a megadott lépésközzel növeljük. Kis távolság esetén a kerekítés miatt kis pontatlanságra számíthatunk, ezért a célhely elérésekor az objektumot pontosan a megadott [cx, cy] pontra kell helyezni. Ezután törölnünk kell az időzítést, mert különben nem ér véget a végrehajtás. web4.js részlete var id, sz, ma, varj, lepX, lepY, lepDB=10, ido=5; // 5 mp animációs idő. function start_ani(obj) { if (obj2) obj2.style.display="none"; sz = hivoObj.childNodes(0).offsetWidth; ma = hivoObj.childNodes(0).offsetHeight; fx=hx; fy=hy; varj= ido*1000/lepDB; lepX = (cx-fx)/lepDB; lepY = (cy-fy)/lepDB; szel=120; with (obj.style) { fontSize="1pt"; width = sz; height = ma; pixelLeft = fx; pixelTop = fy; display = "block"; position="absolute"; } id = window.setInterval("jobbraEL(obj)",varj); obj2=obj; } function jobbraEL(obj) { obj.style.pixelLeft += lepX; obj.style.pixelTop += lepY; sz += (szel-sz)/lepDB; obj.style.width = sz; if (obj.style.pixelLeft >= cx) { obj.style.pixelLeft = cx; // korrekciós lépés. obj.style.pixelTop = cy; obj.style.width = szel; window.clearInterval(id); id = window.setInterval("novekszik(obj)",varj*2); } } var pont=1; function novekszik(obj) { obj.style.fontSize = pont+"pt"; pont++; if (pont>8) { window.clearInterval(id); pont=1; } }

120. ábra. Az animációhoz szükséges függvények 169

Egyedi elrendezésű weblapok Ha több lépéses animációt hozunk létre, akkor az előző törlése után beállíthatjuk a következő függvényünket, amely hasonló végrehajtású lehet. A mi esetünkben a táblázatban lévő szöveg betűméretét fogjuk növelni egy ponttal, így újabb 7-8 lépéssel növelhetjük az animációt. A felsorolásunk méretének növekedésével automatikusan a táblázat mérete is növekedni fog. A műveletsor végén az időzítést töröljük, és a pont változót visszaállítjuk 1-re. Ennél a műveletnél a szöveges tartalom miatt nem járhatunk el úgy, mint a koordinátáknál, ahol a „+=” művelettel növeltük a betűméretet. Ezzel a módszerrel akár nagyobb animációkat is programozhatunk különösebb nehézség nélkül. A látványos megoldások létrehozásához az egyes elemek mozgását kell összehangolni időben és a síkban, mert az összetettségétől válik különlegessé egy mozgó animáció. Minél inkább közelít egy megoldás a valóságoshoz, annál inkább mondjuk rá, hogy profi megoldás. Gondoljuk át egy pattogó labda animációját. Ha az csak a négy oldalfalon belül mozog, akkor abban semmi különöset nem fogunk találni, mert nem hat rá sem a gravitáció, sem a súrlódás, tehát nem is lesz életszerű. Ha az a labda leesik fentről (pozíciója abszolút és mozog lefelé), majd felpattan, de már csak a magassága feléig, és újra vissza, akkor az már valami. Ha viszont a zuhanása az idővel négyzetesen arányosan gyorsul, vagyis az újrahívás ideje nem állandó, hanem egyre hamarabb következik be, majd a felpattanás után ez ugyanilyen tempóban lassul, amíg el nem éri kb. a magasság felét, amire teljesen leáll, akkor az már valóságos pattogás lesz. Tipp. Egy animáció programozása nem egyszerű, ezért mielőtt elkezdjük, alaposan gondoljuk át, hogy milyen szinten akarjuk azt elvégezni. Ha ugyanis túl jól sikerül, akkor teljesen elvonja a felhasználó figyelmét, esetleg türelmét, míg ha ez jól illeszkedik az oldalhoz, akkor emlékezetes lesz a látogatás.

Miután megismertük az animáció készítésének módját, nincs más hátra, mint megálmodni azt a tervet, amelynél ezt a képességet jól lehet hasznosítani. Ilyen esetben osszuk fel az oldalt külön téglalapokra, amelyekben a különböző tartalmi elemeket el fogjuk helyezni. Az alapelveket itt is be kell tartani, vagyis az oldal egyes területei és azok megjelenése legyen állandó, hogy a látogató képes legyen viszonylag rövid idő alatt megismerni az oldal felépítését. A „dobozokra” osztott oldalon az egyes részek áthelyezhetők, felnagyíthatók, egyesek lekicsinyíthetők, és mindez egyszerre, hiszen a setInterval() függvénnyel egyszerre több folyamat is elindítható. Az egyes téglalapok például a szűrők (CSS: filters) segítségével elrejthetők, majd ezután a kiválasztott elem felnagyításával és áthelyezésével elfoglalhatja a lap nagy részét. 170

Bővebb tartalomhoz „Szolid sávos” stílus

+Grafikai fogás: Szemvezető grafikák és feliratok A weblapjainkon elhelyezendő feliratoknál hamar rá kell döbbennünk, hogy csak olyan betűtípusokat használhatunk fel, amelyek biztosan megtalálhatók a látogató számítógépén. Elég furcsa megközelítési mód, hogy készítünk valamit, de csak sejthetjük, hogy a látogató abból mit fog látni, de az internet már csak ilyen, így kell elfogadnunk. Arra azonban van lehetőségünk, hogy elkészítsünk egy feliratot, főcímet, cégnevet tartalmazó címet, majd azt képként mentsük el, és a weblapra azt képként szúrjuk be. Könnyen belátható, hogy a például 20 karakteres felirat formázásával együtt is legfeljebb 40 bájtot foglalna el, így viszont mérettől függően 5-10-20 kB fájlméretű lesz, vagy még ennél is nagyobb. Ha minden feliratot képként készítünk el, akkor az oldalunk összmérete nagyon nagy lesz, és a látogató meglátva a sok képet, azonnal el fog menekülni, mert nem bolond a mi grafikai nagyzolásunk eredményére hosszú perceket várni. Mi akkor a megoldás? – Az arany középút. Készítsük el a fontosabb feliratokat képként, a többi maradjon szövegként. Azonban a válogatásnál további kérdések merülnek fel, mert valóban szükséges-e azt a feliratot képként elmenteni, valóban nem jó hozzá az elérhető betűtípusok köre? Ha például valaki a Microsoft FrontPage weblapszerkesztő programot választja, akkor könnyen megeshet, hogy olyan oldalt fog készíteni, amelynél minden link és főcím, és azok minden váltóképe képfájl lesz, még akkor is, ha az például Arial betűs, ami köztudottan minden Windows rendszerrel működő számítógépen elérhető. Ez valóban szükséges? – Nem, sőt magunknak teszünk rosszat vele, mert a látogató egy idő után esetleg megelégeli, hogy minden oldalon minden felirat megannyi képes változatát letöltse. Ezért jobb az, ha mi készítjük a weblap forráskódját, mert így a kezünkben tartjuk a teljes kód feletti ellenőrzést, és nem kerülnek olyan elemek az oldalunkra, amelyekkel nem értünk egyet. A sok kérdés és felvetés után lássuk, hogy mi a megoldás. Első lépésben gondoljuk át, hogy az oldalunkat el tudjuk-e képzelni az alábbi betűtípusok használatával: Arial, Arial Narrow, Courier New, Tahoma, Times New Roman, Verdana, és a két szimbólumos típus: Symbol, Wingdings. Weblapoknál elsősorban az Arial betűtípust szoktuk használni, mert képernyőn az jól olvasható, míg a talpas betűk, mint például a Times New Roman, inkább nyomtatásban bevált típus. Éppen ezért talpas betűtípust weblapnál csak kellően nagy méretben alkalmazzunk, illetve akkor, ha a téma ezt indokolja. Például egy napilap weblapjainál elfogadható, de más esetben erősen meggondolandó. Kis méretben és sötét háttéren kifejezetten olvashatatlan, ezért ilyenkor kerüljük. 171

Egyedi elrendezésű weblapok Az előzőek ellenére használhatunk teljesen egyedi betűtípusokat, de csak úgy, hogy a stílusnál nem egy betűtípust adunk meg, hanem felsoroljuk a lehetséges változatokat. A látogató webböngészője a felsorolásból ki fogja választani azt a típust, amelyikkel az ő számítógépe rendelkezik, és akkor az oldal többékevésbé azonos jelleggel fog megjelenni. Például: stilusfo.css részlete body

{ font-family: Georgia, Garamond, Times New Roman, Times, CG Times; ...

}

Ebben az esetben nekünk is meg kell néznünk, hogy milyen megjelenést mutat az oldalunk, ha a látogató számítógépén nem érhető el sem az első, sem a második betűtípus, és így tovább. A végeredmény az lesz, valamelyik típussal meg fogunk békélni, és az oldal szövegének többségét azzal fogjuk formázni. Azonban a főcímeknél felmerülhet az igényünk, hogy valamilyen egyedi betűtípust alkalmazzunk, és annak megjelenéséhez is ragaszkodunk. Ebben az esetben képként (vagy flash-ben) kell elmenteni a feliratot, mert különben nem marad meg a megjelenése. Fontos! Gyakran találkozni olyan weblapokkal, ahol azokat a feliratokat is képben helyezik el, amelyeket amúgy Arial vagy Times betűkkel írnak. Ez általában valamely program nem megfelelő ismeretéből származik. Ügyeljünk arra, hogy ilyen hibát ne kövessünk el, mert feleslegesen lassítjuk az oldal letöltését és teljes megjelenítését. Egy weblapon és webhelyen belül legfeljebb 1-3 betűtípust használunk, amelyek közül a főcímek típusa térhet el a főszövegtől, illetve néhány kiemelésé, melynek éppen a kiemelés oka adja meg a létjogosultságát. Ügyeljünk arra, hogy kis méretben csak Arial-típusú betűkkel írjunk, amelyeket viszont soha ne döntsünk meg, mert képernyőn nagyon csúnya lépcsős lesz a betűk szára, amitől nehezen olvashatóvá válik. Nagyobb méretben használhatunk talpas betűket, de erre inkább a jellemzően szöveges oldalakon van módunk, mint amire a mostani design készült. A mi példánkban a navigációs területen kis betűméretet használunk, ráadásul a Windows menüiben is az Arial betűkkel találkozunk. Ezért a megszokott megjelenéshez hasonló menüt készítünk, amelynek a működését a látogató könnyebben meg tudja érteni, így mi is Arial betűtípust használunk. Ehhez illeszkedően ebben a sorban és/vagy oszlopban szintén indokolt e típus alkalmazása. 172

Bővebb tartalomhoz „Szolid sávos” stílus

 Főcímek elhelyezése a weblap különböző részein

cégnevek és egyéb valóban fontos, valamint kiemelt főcímek esetén használhatunk egyedi betűtípust, de itt is tegyünk különbséget a talpas és a nem talpas típusok között. Az itt használt iniciálé talpas típussal készült, ami jól látható az alsó részén. A betűtípust a cég arculatának megfelelő módon válasszuk meg. A példánkban választott Stencil típus kellően robosztus, ami a vonatokra jellemző erőt és szilárdságot sugározza. Itt egy kézírásos vagy lágy vonalvezetésű betűtípus mindenképpen rossz választás lenne, míg egy személyes honlapon már annak is van létjogosultsága. Fontos kérdés, hogy a főcímet hol és hány helyen fogjuk felhasználni. Ha az több helyen is megjelenik, akkor azt gondoljuk át, hogy van-e módunk arra, hogy ugyanazt a feliratot átméretezve helyezzük el mindenhol. Ugyanis ebben az esetben érdemesebb flash-formátumot használni, mivel az a feliratot szövegesen tartalmazza a szükséges betűtípus részelemeivel együtt. Ha képként mentjük el a feliratot, akkor annál a képmentési méret a legnagyobb megjeleníthető méret, és azt csak összezsugorítva lehet elhelyezni máshol. Ha erre az arányos zsugorításra nincs szükségünk, vagy nincs módunk, akkor mentsük a feliratot képként. Nézzük meg ennek módját. A legegyszerűbb megoldás, ha a feliratot például a Microsoft Wordben WordArt-feliratként készítjük el, ahol számos árnyékolási és hasábozási, illetve színezési formázás áll a rendelkezésünkre. Amikor ezzel elkészültünk, másoljuk le a képet a vágólapra a [Ctrl]+[C]-vel, majd szúrjuk be a Windows Paintbe. A másik módszer, hogy átváltunk a Fájl / Nyomtatási képre, és beállítjuk a nagyítást 100%-ra, majd megnyomjuk az [Alt]+[PrtSc] billentyűkombinációt, amivel az aktuális ablak kerül a vágólapra. Ezt a képet már akármelyik képszerkesztő programba beszúrhatjuk a [Ctrl]+[V]-vel, és a felesleges részek eltávolítása után a képet elmenthetjük.

121. ábra. WordArt felirat A mentés formátumát meghatározza, hogy milyen színmélységet választunk. Ha megelégszünk a 256 színnel, mert a feliratnál jellemzően csak alapszíneket használtunk, akkor a GIF-formátum jó lesz, és valószínűleg elég kicsi lesz a fájlméret. Ezt úgy értsük, hogy 2-4 kB is lehet egy 600x30 pixeles kép, ami 173

Egyedi elrendezésű weblapok egészen jó eredmény. Ha 24 bites színmélységet használtunk, akkor a JPG- és a PNG-formátum közül választhatunk. Az előbbi inkább fényképek, az utóbbi inkább azonos színek ismétlődése esetén lesz hasznos. Tipp. Ha azt akarjuk, hogy a kép háttere átlátszó legyen, akkor be kell kapcsolnunk a háttérszín átlátszóságát, és csak GIF-ben menthetünk. Ehhez válasszuk ki a Photo Editorban a Set Transparency Color gombot, és kattintsunk a háttérre.

Komolyabb grafikai hatásokat már fejlettebb programokban kell keresnünk, mint amilyen az Adobe Photoshop vagy a Macromedia Fireworks MX, amelyet már sokat alkalmaztunk. Például ez utóbbi programban számos mentési lehetőség közül választhatunk, ahol az adott formátumon belül is többféle opció segít abban, hogy a fájlméret a lehető legkisebb legyen. Tipp. Ne essünk abba a hibába, hogy készítünk az amúgy szolid oldalunkra valami nagyon dögösre sikerült feliratot, csak azért mert a program lehetőséget biztosít a számunkra. Készíthetünk nagyon kiemelkedő feliratokat, de akkor az egész oldal megjelenése olyan legyen, és most éppen nem azon dolgozunk.

A Macromedia Fireworks MX programban a munkaterület felső részén a fülek mellett láthatjuk, hogy az éppen kiválasztott fájltípus esetén mekkora fájt kapnánk, illetve ez 56,6 kbps modem használatával mennyi idő alatt tölthető le. A többi Preview fül is ezt a célt szolgálja, illetve ezeknél azt is látjuk, hogy más képformátum esetén romlik-e a kép minősége, és ez elfogadható-e még. Az alábbi hátteres kép különleges effektusokkal is csak 9 kB méretű JPG-ben.

122. ábra. A mentési formátumok egész sora áll a rendelkezésünkre 174

Bővebb tartalomhoz „Szolid sávos” stílus A hátterek alkalmazásával óvatosan bánjunk, mert ez a program nagyon sok különleges effektust tartalmaz, amelyek az egyszínű fényképes weblapunkhoz nem illenek. Viszont a programot megismerve számos olyan lehetőség tárul fel előttünk, amelyet később ki tudunk használni. Akár az egész oldalt elkészíthetjük grafikus formában, amelyhez csak ugyanazokat a fényképeket használjuk fel néhány különleges effektussal egybeötvözve, és még az oldal összmérete sem fog nagyon emelkedni. Ezt úgy képzeljük el, hogy létrehozunk egy olyan nagy új üres képet, mint amekkora a weblapunk lesz, és importáljuk az elhelyezendő fényképeket, amelyeket ugyanoda helyezünk el, mint tettük a weblapon is. Ebben a képszerkesztő programban viszont az egész oldalra egységesen alkalmazhatjuk a különleges effektusokat, így egységes képet kapunk és nem egymástól elütő képeket és feliratokat. A weblap elkészülte után az egyes képeket a cellából kiemelve áthelyezhetjük háttérképnek, hiszen az összkép így sem változik, de a cellába írhatunk szöveget. Ehhez persze olyan színű legyen a kép, hogy ne zavarja a felette lévő felirat olvashatóságát. Ilyenek a halvány, pasztell színű képek, illetve amelyek kicsit homályosak vagy elmosódottak. Kerüljük a háttérképeknél az éles kontúrvonalakat, mert azok a szöveg karaktereinek képét keresztezve nehezen felismerhetővé teszik. Tipp. Készítsük el egy webdesign jellemző oldalát különböző szerkesztő programokkal, és vonjuk le a következtetéseket. Kombinálhatjuk is a kettőt, így megismerhetjük, hogy melyik programot mire tudjuk használni. Ez nem feltétlenül fog megegyezni azzal, amire azt az adott programot tervezték, de ez ne zavarjon bennünket, éppen ez a jó a szoftverekben.

Amikor a feliratok helyét és méretét tervezzük, akkor érdemes a képeket már igen, de a szöveget még nem tartalmazó weblapot kinyomtatni A4-es méretben, és arányosan elhelyezni az általunk fontosnak tartott feliratokat. Azért így tervezzük meg azok méretét és elhelyezését, mert itt egységében láthatjuk az oldalt, míg a képernyőn ez csak korlátozottan lehetséges. Ügyeljünk arra, hogy ne zsúfoljuk a feliratokat egymás mellé, mert akkor „ütik egymást”, vagyis az egyik kiemelt fontos mondat hatását csökkenteni fogja a másik, mert elvonja a figyelmet az előzőről. Hosszabb szöveg esetén alkalmazzunk 1 hosszabb vagy 2-3 rövidebb bekezdés után alcímeket, amelyek folyamatosan éberen tartják az olvasó figyelmét. Az alcímek legyenek érdekesek, és az utána következő bekezdés tartalmazzon hasznos információt, mert különben a látogató feltételezi, hogy a többi szöveg is ugyanolyan üres fecsegés lesz, mint amit éppen olvasott, és amiről nem volt jó véleménnyel. 175

Egyedi elrendezésű weblapok

 A főcímek és feliratok mentése flash-formátumban

Arról már volt szó, hogy a flash-ben mentett felirat tetszőlegesen és arányosan átméretezhető, így jól fel lehet használni egy oldalon akár több helyen is. Ezen előnye mellett hátránya, hogy amikor a látogató lementi a weblapot az Internet Explorerben, akkor az nem fogja a flash-elemeket elmenteni, csak a HTML- és képfájlokat, valamint a JavaScript programokat. A flash-t sokan tévesen az animációval társítják. Ez így nem igaz, mert például a Macromedia Fireworks MX programból a feliratot nemcsak képként, hanem SWF-fájlként is el tudjuk menteni, amelyet a webböngésző ablakára húzva azonnal meg tudunk jeleníteni. Itt látjuk rajta igazán, hogy az egészen kis feliratok milyen nagy méretben megjeleníthetők. Ez a felirat nem fog mozogni, mert egyszerűen csak a JPG helyett SWF-ben mentettük el, és ez még nem ok a mozgásra, animációra. A lehetőségünk ugyan megvan arra, hogy mozgó feliratot készítsünk, de nem feltétlenül kell mindent kihasználni, amit a program kínál. Nekünk itt az átméretezhetőségre van szükségünk, illetve a tetszőleges betűtípusok használatára. A flash-formátum mindkét célnak megfelel, így használjuk nyugodtan, de ez nem jelenti azt, hogy valamiféle mozgást is bele kellene vinnünk, csak azért, mert a lehetőség adott. Fontos! Emlékezzünk arra, hogy a weblapon (illetve bárhol) lévő mozgás ingerli a periférikus látómezőnket, és leköti a figyelmünket. A felirataink célja nem ez, hanem a fontosabb szavak, címek kiemelése, de csak a rangjuknak megfelelő szinten, és nem jobban. Ha flash-ben mentünk el egy feliratot, akkor nem jön létre HTML-fájl, így nem tudjuk pontosan, hogy azt hogyan illesszük be a weblapunkba. Más program, mint például a Macromedia Dreamweaver MX ezt megteszi helyettünk, így onnan elleshetjük a szükséges forrásrészletet, amit értelemszerűen paraméterezzünk. index.html részlete



123. ábra. A flash beillesztéséhez szükséges HTML-kódrészlet 176

A „Háromoszlopos” stílus részegységei

A „Háromoszlopos” stílus részegységei Az előző stílus megalkotásakor már volt lehetőségünk arra, hogy az oldalainkon bőséges tartalmat helyezzünk el, illetve további hiperhivatkozásokat soroljunk fel, amelyekkel újabb oldalak tucatjait hálózzuk be a webhelyünkre. Aki még ennél is többet akar elhelyezni a weblapjain, vagy nem szívleli a szolid megjelenésű stílusokat, az most megismerheti a szokásos zsúfolt vagy akasztófa-stílusú weblapok elkészítésének módját. Ebben a fejezetben nem egy adott weblap megszerkesztésével fogunk foglalkozni, hanem az ott elhelyezhető elemek létrehozásával, illetve a hozzá szükséges további programok vagy szolgáltatások felkutatásával. Mivel az oldal felépítése viszonylag egyszerű és kötött, ezért sok választásunk nincs, mint az adott részegységekkel kombinálni.

Az elrendezés megtervezése és kialakítása Az alábbi felépítés gondos tervezés eredménye, így nem csupán van három oszlopa, fejléce és vízszintes menüsora, hanem számos különleges igénynek is megfelel. Ez a méretezés minden képernyőfelbontás esetén jól olvasható marad. C1: 283x84px C2: 492x84px Helyigény: 468x60px reklámcsík. Margó: 12px körben. Helyigény: Logó. (283x100px, ha C1+C3+C4) C3: ... x16px
C5: 155px 

C4:

C4

... 6 x

80px  16px


C6: 465px  és tetszőleges magasságú (
).

C4 C7: 155px 

 775px (=5x155)  155px 

 620px (=4x155)   620px (=4x155) 

155px 

124. ábra. A „háromoszlopos” design felosztási terve 177

Egyedi elrendezésű weblapok A méretezés alapját a 640x480-as képernyőn teljes méretre nyitott webböngésző ablak adja, amelynél vízszintes értelemben 1+16+1 pixel szélességű részt foglal le a webböngésző 1 pixeles szegélye és az el nem rejtett (vagy éppen szükséges) 16 pixeles görgetősávja. A szabadon maradt terület 622 px széles. Ugyanez 800x600-as képernyőn 782 px szabad helyet jelent. Amikor egy háromoszlopos weblapot tervezünk, akkor úgy célszerű felosztani a területet, hogy a 622 pixel széles képernyőn lássuk az első két vagy a második és harmadik oszlopot. Így vízszintesen oldalra görgetve a felhasználó egyszerre két oszlopot láthat teljes egészében. Szerencsére ezt az előző oldalon vázolt szélességi értékekkel éppen jól meg lehet oldani, mert a 155+465=620 px, ami elfér a 622 pixel szélességű ablakba. A 620+155=775 pixel, ami ugyancsak kényelmesen elhelyezhető a 782 pixel széles területen. Amennyiben ennél szélesebb képernyőn vagy ablakban nézzük a weblapot, úgy a táblázatot nem szélesítjük tovább, viszont érdemes a lapon középre elhelyezni. Ha ugyanis a látogató például egy 1024x768-as vagy 1280x1024-es képernyőn teljes méretűre nyitja a webböngésző ablakát, akkor marad összesen 249 vagy 505 pixel széles terület. Ha ez egy oldalon helyezkedik el, akkor nagyon zavaró lesz, különösen a nagyobb felbontás esetén, ráadásul ez már nem is olyan ritka, hiszen egy 17”-os monitornál sokaknál ez az alapfelbontás. Tipp. A táblázatban elhelyezett tartalmat a weblapon mindig középre igazítsuk, mert akkor két oldalon maradhat egyforma széles margó, amely egyszínű, és így a figyelmet a középen lévő sávra irányítja. Ne akarjuk még azt a részt is kihasználni, mert zsúfolt lesz az oldalunk.

Bevett szokás még, hogy a középső rész szélességét százalékban adják meg, így a webböngésző ablakát akármekkorára nyitjuk, az mindig telelesz a tartalommal. Ennek hátránya, hogy a például 775-ös szélességben megírt, és jól mutató szöveg a középső cellában az 1280-as szélességnél talán 1-2 sorban ki fog férni, ami nagyon csúnyán fog mutatni.

125. ábra. Képernyővonalzó a weblapokon megjelenő tartalmak pontos méréséhez Töltsük le az ábrán látható képernyővonalzót az internetről a készítő honlapjáról, a http://www.kagi.com/microfox/ címről. A program teljes változata különböző mértékegységekben is tud mérni, illetve függőlegesen is használható. 178

A „Háromoszlopos” stílus részegységei A másik véglet, amikor az ablak túl szűk helyet kap, mert ilyenkor a középső cella mérete lesz aránytalanul kicsi, és az ide kerülő tartalom lesz verses formájú, amitől ráadásul az oldal olyan hosszú lesz, hogy sokat kell görgetni lefelé. Ez utóbbit pedig a felhasználók nem szeretik, mert ha egyre messzebb kerülnek a fejléctől, akkor elbizonytalanodnak, és elveszítik a tájékozódó képességüket. A szélesség minimumát meg tudjuk tartani egy beszúrt és pontos mérettel megadott kép segítségével. Tegyünk be egy átlátszó (Transparency Color) 1x1 pixeles képet, amelyet méretezzünk be 465x0 pixel méretűre, így az oszlop szélessége minimum 465 pixeles lesz, maximum pedig amennyi van. A C5-ös cella szélességét gyakran vesszük szélesebbre, ha az oda kerülő hiperhivatkozások megkövetelik ezt. Ebben az esetben elveszítjük azt a lehetőséget, hogy a 640 pixel széles képernyőn is az oszlopok párban olvashatók legyenek. A kérdés csak az, hogy ez veszteségnek számít-e. Ha az oldalainkat meg lehet tekinteni kézi számítógépekkel és kommunikátorokkal, és a tartalom jellege ezt akár indokolja is, akkor meggondolandó, hiszen ezen eszközöknél a 640 pixeles szélesség az elérhető maximum. Tipp. A látogatókat jó érzéssel tölti el az a felismerés, hogy a 640 pixeles szélességben is pontosan 2 oszlopot látnak egyszerre, és semmilyen méretezési hibát nem észlelnek. Ez azért jó, mert úgy érzik, hogy rájuk is gondoltak az oldal tervezői, és nem megtűrt „szegénylegények” a 640 pixeles böngészőjükkel.

Amennyiben a C5-ös cellát szélesebbre vesszük, akkor a C6-os méretéből vegyünk el, hogy a kettő összege továbbra is megmaradjon 620 pixel. Ha ugyanis azok is szélesebbek lesznek, akkor a C7-es cella szélességét kellene tovább csökkenteni, hogy legalább a 782 pixeles méretet tartani tudjuk.

126. ábra. Vessük össze a StatCenter.hu és a Moricznet.hu adatait! Ez ugyanis már szinte kötelező, mert a felhasználók 40%-a 800x600-as felbontást használ, a másik 45-47%-a pedig 1024x768-ast. A két méretet a 14-15”-os és a 17”-os 179

Egyedi elrendezésű weblapok képernyőkön alkalmazzák a felhasználók. Jogos kérdés lenne, hogy miért nem használják ki sokan a monitorok maximális felbontását, de erre egyszerű a válasz, a többség nem szereti az apró feliratokat és ikonokat (vagy nem látja). Tipp. Nézzük meg pár weblap statisztikai rendszerben keletkezett adatait. Akármennyi kimutatást megnézhetünk, az eltérés minimális lesz, így nagyon jó támpontot adhat a képernyő felbontására vagy a használt webböngészőre vonatkozóan. Címek: http://stat.segitek.hu/ vagy http://statcenter.hu/ stb.

A 782 pixeles szélességet azért is célszerű tartani, mert hosszú sorokat olvasni nehezebb, hiszen a következő sor elejét nehéz megtalálni. Ezért jobbak a keskenyebb lapok, ráadásul így a kisebb képernyővel rendelkezőknek sem kell oldalra görgetniük a szöveget. Gondoljunk az újságokra, azokat sem véletlenül szedik hasábokba, hanem azért mert a rövid sorokat nagyon gyorsan lehet olvasni. Arra azonban ügyeljünk, nehogy újsághoz hasonló szedésben szerkeszszük meg a weblapunkat, mert az újságot ki lehet teríteni, és lentről feltekinteni nem olyan megerőltető, mint állandóan a [PgDn] és a [PgUp] billentyűket nyomkodni, ráadásul mire felérnénk, már elveszítenénk a fonalat, és nem találnánk meg a következő oszlopot, ahol a szöveg folytatódik. Ezért az ilyen elrendezési formát weblapon soha ne alkalmazzuk, csak a keskenyebb tartalmat.

127. ábra. A StatCenter.hu mindenre kiterjedő részletes adatokkal szolgál 180

A „Háromoszlopos” stílus részegységei Térjünk át a fejléc részére. A felső sáv 84 pixel magas részből áll, amelyen elhelyezhetnénk a cégünk nevének óriási feliratát, de talán túl nagy képet eredményezne, aminek letöltése túl lassú lenne. Helyette az általános gyakorlat az, hogy a bal oldalon elhelyezik a céglogót, esetleg a feliratot több sorba tördelve, netán a logóval kiegészítve, és a jobb oldali részre beszúrnak egy reklámot, ami szabványosan 468x60 pixel méretű. Ha nem akarjuk, hogy ez a csíkhirdetés teljesen hozzásimuljon a céglogóhoz vagy az alatta lévő menüsorhoz, akkor érdemes hagyni körülötte egy kis margót. Ezek szellemében a fejléc magassági mérete változhat, pontosabban csökkenhet egészen 60 pixelig. A 124. ábrát nézve az szintén jó megoldás lehet, hogy a C1-es, C3-as és az első C4-es cellát összevonjuk, és így kapunk egy 283x100 pixeles területet, ahol például a céglogó jobban elfér. Amennyiben a jobb oldalon nem akarunk reklámcsíkot elhelyezni, úgy oda a cégnév kerülhet, amelynek megjelenését a szűrők segítségével kicsit animálhatjuk, így csak a megjelenéskor irányítja magára a figyelmet. Az így felszabaduló bal oldali céglogónak szánt területre kerülhet például egy folyamatosan görgetett szöveg, ahol a legfrissebb híreket lehet elolvasni. Az ilyen helyeken biztosítsunk lehetőséget a görgetés leállítására vagy gyorsítására, esetleg hiperhivatkozásokkal tegyük hasznosabbá. A további C4-es cellák a főmenünket jelenítik meg, vagy az egyéb témákhoz, alportálokhoz vezetnek el. Ilyen altémák szoktak lenni például a kapcsolatfelvételi lap, a keresőlap vagy a webhely térképlapja. Ha rövid címekkel meg tudjuk nevezni az egyes témáinkat, akkor viszont a témacímeket is megjelenítheti, és akár legördülhetnek innen az almenük, mint a Windows programokban szokás. Emlékezzünk vissza, az előző design elemeinél tárgyaltuk, hogy a menü megjelenhet pontosan a másik cella alatt (vagy mellett), így a legördülő menü látszatát keltve. Ha a „legördült menü” színösszeállítása éppen hasonlít a Windows színvilágára, akkor teljesen élethű menüt készíthetünk. Fontos! Az ilyen menüs navigálás hátránya, hogy minden hiperhivatkozás minden oldalon megjelenik, ami jelentősen növelheti a weblapok méretét, és így a letöltési idejét. Ezzel viszont éppen azoktól a képektől vagy egyéb flash-elemektől vesszük el a lehetőséget, amelyekkel az oldalunkat változatosabbá és könnyebben olvashatóvá tudnánk tenni. Az előzőek szellemében a C4-es cellák sora annak megfelelően változhat, hogy mennyi és milyen hiperhivatkozást helyezünk el benne. Ezen a sávon megjelenhet például egy flash-alapú menüsor, amelyet vízszintesen lehet görgetni vagy csúsztatni, így további hiperhivatkozások kerülhetnek bele. 181

Egyedi elrendezésű weblapok Tartalmi szempontból a C5-C6-C7-es cellák feltöltése teljesen egyedi, és mindenki szabadon megválaszthatja, hová mit kíván tenni. Általában a bal oldali cellába kerülnek a navigálás főbb hiperhivatkozásai, de van ahol ugyanerre a jobb oldali oszlopot választják. A bal oldali mellett szól az, hogy a 640 px széles képernyőkön ez biztosan látható, míg a jobb oldali csak átgörgetéssel, így a továbblépés esetleg a látogató lustaságából nem következik be.

128. ábra. Legördülő menüként megjelenő táblázat erős kontúrvonalakkal A linkek sora is változó, mert például egy hírportálon a hírek címei hosszabbak, így azok több sorba tördelve jelennek meg. Ha vannak főbb fórumok, hírcsoportok, akkor az azokra mutató hiperhivatkozások is ide kerülnek. Az oszlop hosszát meghatározza, hogy a középső területre kerülő hír vagy egyéb tartalom milyen hosszú. Ugyanis célszerű úgy tervezni a tartalmat, hogy az teljesen megtöltse az oldal minden szegletét. Ez nem könnyű, mert ha a hír középen rövidebb, akkor oldalt a linkek feleslegesen sok helyet foglalnak el, míg a hoszszabb tartalom esetén a két oldal fog kiürülni, ami szintén nem szép. A harmadik oszlop ennek megfelelően alacsonyabb rendű szokott lenni, ami azt jelenti, hogy az „egyéb” szolgáltatások űrlaprészletei, valamint a hirdetések kerülnek ide. Ha a hirdető sokat fizet, akkor elfoglalhatja a bal oldali, tehát a legértékesebb sávot is, de ebben az esetben az ide kerülő hirdetés pozícionálását automatikusra kell megadni, hogy a lefelé történő görgetés esetén se 182

A „Háromoszlopos” stílus részegységei tűnjön el, hanem kövesse az olvasót. Az persze más lapra tartozik, hogy mennyire idegesítő például az egyik hírportál híreinek olvasása közben a bal oldalon állandóan liftező reklámot látni, ami rendszeresen kizökkent a hír olvasásából. Ezért én ilyenkor az ablakot két oszlop (620 px) szélesre állítom, vízszintesen elgörgetem, és így nyugodtan el tudom olvasni a hírt, megnézhetem a jobb oldali oszlopban lévő további friss hírek címeit, és nem zavar a hirdetés. Tipp. Gyűjtsük össze a weblapra kerülő elemeket, majd helyezzük el azokat a két oldalon logikusan csoportosítva. Próbáljuk arányosan megtölteni a két oldalt, de ha ez nem sikerül, akkor értékeljük át, hogy valóban szükség van-e a harmadik oszlopra, mert felesleges lefoglalni és félig üresen tartani.

A C7-es cellába kerülő űrlaprészletek nem foglalnak sok helyet, de annál nagyobb munka áll azok elkészítése mögött. Egy keresőmező vagy egy hírlevélre való feliratkozási mező elhelyezése nem nagy dolog, de azt végrehajtani annál inkább. Hiszen ha a látogató feliratkozik a hírlevélre, akkor azt folyamatosan írni, küldeni kell neki, és ehhez megfelelő infrastruktúra kell. Hasonlóan a kereső funkció megvalósítása sem egyszerű, és az egész webhely felépítését, illetve az információk tárolásának módját meghatározhatja. Az ide kerülő elem minden oldalon megjelenik, így módosítani is nehéz lesz. Mindenképpen célszerű átgondolni a különböző reklámok, hirdetések, és ingyenes statisztikai háttérmunkát végző elemek elhelyezésének szükségességét. Bár a statisztikai elemek szerepeltetése hasznos, ha a látogatóink összetételét kívánjuk meghatározni, de ebből is elég legfeljebb egy használata. A kezdeti időkben szerepeltethetünk az oldalon többet, de miután tapasztalatot szereztünk, vegyük le az összeset, és csak azt hagyjuk meg, amelyikre valóban szükségünk van. Ha ugyanis minden oldalon megjelennek ezek a kis képek, akkor jelentősen befolyásolják az oldalunk színvilágát és megjelenését, ezért inkább csak hátrányunk lesz belőle. Az oldal letöltését szintén lassítják, amit inkább gyorsítani kellene. Az sem mutat jól egy oldalon, ha a harmadik oszlop csak a hirdetésekkel és ikonokkal van tele, mert az csak azt mutatja, hogy semmi hasznosat nem tudunk ott elhelyezni. Ebben az esetben viszont miért tartjuk fenn azt a részt? Miért lassítjuk vele az oldal megjelenését? Miért okozunk felesleges adatforgalmat a látogatónak? Lehet, hogy nála az adatforgalom is számít a havi letöltésnél, ezért a lassításon kívül még felesleges kiadásokkal is terheljük, amikor ő megtisztelt bennünket azzal, hogy lehívta a weblapunkat. Nem egészen szép válasz az ő kedvességére. 183

Egyedi elrendezésű weblapok Ha mindenképpen ragaszkodunk az ilyen hirdetésekhez, akkor helyezzük el azokat a lap alján. Persze a fizetett hirdetéseknél más a helyzet, mert ott a hirdető csak a jó megjelenésű felületeket akarja megvenni, de sok esetben nem erről van szó, hanem az ingyenes szolgáltatások logóiról, és a hirdetéscserélő szolgáltatásokról. Amennyiben van új és változó tartalom a weblapunk felső részén, úgy lesz elég idő arra, hogy a lap alsó része is megjelenjen, így a statisztikai logók, számlálók képei ugyancsak meg fognak jelenni. Tipp. Időzítsünk egy JavaScript programot a lap lehívásakor 10-20 másodperccel későbbi időre, és a hirdetések képeit ez a program szúrja be a honlapunkra. Így az oldal gyorsabban meg fog jelenni, mert egyszerre csak a fontos elemek lehívása történik meg, a hirdetéseké csak a végén kezdődik meg. A másik előnye, hogy a JS-t nem futtató kézi eszközöknél ezek nem kerülnek lehívásra, így azokon a megjelenítés gyorsabb lesz.

Még a sok oldalt publikáló webhelyeken sem elsődleges cél az, hogy holmi látogatottsági versenyben elsők legyenek, ezért minden ilyen számláló elhelyezése felesleges. Azt is megtanuljuk majd idővel, hogy kellő számú más helyen történt publikációnak vonzóbb hatása van a honlapunkra, mint az összes ingyenes hirdetésnek és számlálónak együttvéve. Ha ezt pedig tényleg felismerjük, akkor elkezdhetjük leszedni a sok ingyenes hirdetést a weblapunkról. Végezetül hasonlítsuk össze a honlapom látogatóinak adatait és a statisztikákat készítő StatCenter.hu cég oldalait látogató felhasználók adataival. A kimutatás különlegessége, hogy a StatCenter.hu oldalait majdnem egy millió látogató nézte meg a kimutatás szerint, míg az én honlapomat a jelenlegi hónapban még csak alig több, mint 3’000 látogató. Ennek ellenére az adatok nagyon hasonlóak, bár a képernyőfelbontásnál ez még közelebb állt egymáshoz. Az MSIE (4-5-6) 95%-os előnye mindenesetre pontosan egyezik mindkét kimutatásban, így a lényegen nem változtat.

129. ábra. A böngészők eloszlása két webhely kimutatásai alapján 184

A „Háromoszlopos” stílus részegységei

A megfelelő stílus megtervezése Miután eljutottunk oda, hogy a saját honlapunkon a saját tartalmunk szerepel, elkezdhetünk gondolkodni azon, hogy mindezt milyen formában tálaljuk a látogató elé. Addig ugyanis, amíg mindenféle színes képecskék, idegen villogó nagy széles csíkhirdetések sora agyoncsapja az oldalunk színvilágát, addig nem sok értelme van stílusról beszélni. Amikor felrajzoljuk egy lapra az oldalon megjelenítendő részeket, akkor eldönthetjük, hogy azokat fogjuk bekeretezni, kis téglalapokba, ablakocskákba helyezni, vagy az alapvető területeket határoljuk-e el egymástól. Ez utóbbi esetben az elválasztás történhet vonallal vagy színnel. A vonalas elválasztás legegyszerűbb módja a táblázat celláinál egyes szegélyek megadása. Bonyolultabb, ha a cellák háttereként olyan képet adunk meg, amely tartalmazza a szegélyvonalat, vagy csak azt tartalmazza, és a többi része átlátszó (Transparency Color). Gyakori a háttérszínnel történő elválasztás, amelyet kiegészíthetünk a cellák színes szegélyének megadásával is, de akkor az legyen szép és hangsúlyos, különben amatőrnek fog tűnni a megoldás. Ennél a módszernél fontos a színek helyes megválasztása, amelyeknek egymással jól kell harmonizálni. Erről majd külön fejezetben lesz szó, mert nem könnyű feladat a színek helyes megválasztása az oldalon belül. Amennyiben az oldal felépítését adó táblázatot csak mint befoglaló keretet használjuk, úgy az egyes területeket kell vizuálisan elválasztanunk egymástól. Ez történhet például valamilyen szegélyes vagy alapszínében eltérő „dobozok” használatával. Ezeknek készíteni szoktunk olyan címsort, mint amit a Windowsban már megszoktunk, csak más kivitelben. Gyakori az ilyen címsoroknál a bal oldalon elhelyezett kis ikon, ami szimbolizálja az adott terület funkcióját. Ezt az ikont elhelyezhetjük a jobb oldalon is valamilyen grafikai montázs keretében, így sokkal különlegesebb hatást kelthetünk vele. Tipp. Az egyes területek vagy címsorok színükkel jelezhetik az elkövetkező oldalak színvilágát, ha az valóban eltér minimális mértékben a nyitóoldalétól. Arra azonban vigyázzunk, nehogy ez jelentős különbséget mutasson, mert különben a látogató azt fogja hinni, hogy másik helyre került.

Ha a színekkel és szegélyekkel történő elválasztást alkalmazzuk, akkor is készíthetünk az egyes „ablakoknak” külön címsort, de csak a rangjának megfelelő mértékben. Ha az oldal alapvetően szolid stílusú, akkor a széleken megjelenő önálló részek se emelkedjenek ki jobban a kelleténél, mert különben indokolatlanul magukra vonnák a figyelmet, amire semmi szükség nincs. 185

Egyedi elrendezésű weblapok


Fokozatok a stílusok megválasztásakor

Szolid megjelenést érhetünk el, ha csak egyszerűen a celláknak adunk alapszínt, és kellő margó megtartásával szerepeltetjük az egyes tartalmakat. A széleken lévő űrlapok, hiperhivatkozások felsorolása és egyéb ajánlók megjelenése legyen egyszerű, mint a közöttük elhelyezendő elválasztóvonal és a címeket felvezető kis méretű ikonok. Az egyszerű alapszínek használatával is érhetünk el robosztus megjelenést, ha erősebb, sötétebb színeket alkalmazunk, és azokat vastagabb (2-3px) és világos, talán fehér szegélyekkel hangsúlyozzuk ki. A fehér színnel a sötét celláknál óvatosan bánjunk, mert nagyon el tud ütni a sötét színtől, ami erőteljes kiemelést eredményez. Ilyenkor nagyobb betűméreteket használjunk, mert a sötétebb alapon alkalmazott fehér vagy világos színű felirat kisméretben és különösen Times típusú betűcsaláddal teljesen olvashatatlanná tud válni. Ha viszont a sötét hátteret csak például a széleknél alkalmazzuk, illetve az egyes „dobozok” címsoraként, és a középső cellánál ezen szín halványabb árnyalatát használjuk, akkor maradhat a fekete betűszín. Azonban ilyenkor olyan erőteljes, bár szép megjelenésű oldalt kapunk, amely talán rabul ejti a látogatót, de az nem biztos, hogy hosszú időt el tud tölteni a lapok előtt, mert az olyan „erőszakos” lesz. A túlzottan változatos színek alkalmazása ugyanis fárasztja a szemet, és ha nem találunk sehol egy kis pihenésre alkalmas helyet, akkor az ablak bezárásával fogja a látogató megpihentetni a szemét. Látványos grafikus weblapot készíthetünk, ha az egyes területeket grafikával szegélyezett „dobozokba, ablakokba” helyezzük. Ilyenkor a hátteret hagyjuk meg fehérnek vagy valamilyen nagyon világos pasztell színűnek, hogy a felette lévő képes táblázatok jól ki legyenek hangsúlyozva. Ilyen esetben előfordulhat, hogy hiányérzetünk támad, és a képernyőn lebegő különálló részeknek érzékeljük a „dobozokat”. Ha ilyenkor az alaptáblázatunkat szegélyezzük, akkor a túl sok szegélyvonal miatt zsúfolttá válik az oldal, és a szegélyek „bezárják” a grafikus képeket, agyoncsapva azok látványát. A grafikus részek között mindenképpen hagyjunk margót, mert csak így tud a szép látványuk érvényesülni. Ezeket a területeket az alaptáblázatunkban fogjuk elhelyezni, amelynek legyen mindegyik cellája (C5-C6-C7) azonos színű, de a weblap háttere ettől eltérő. Így kapunk egy valamilyen alapszínű területen egy másik színű oszlopot, amelyben grafikus „dobozokban” található a lényegi információ. Ezzel behatároltuk a weblap legfontosabb részét, nem fognak az egyes „dobozok elúszni a képernyőn”, de nem is szorítottuk azokat korlátok közé, így érvényesülhet a szépségük. Azonban a színválasztásra ügyeljünk, mert az erőteljes színváltás zavarólag fog hatni a képes területek azonosításakor. 186

A „Háromoszlopos” stílus részegységei Az előző design folytatásként jó megoldás az is, ha a háttérben egyfajta alapsíkon elhelyezkedő vonalazást készítünk, amely felett kiemelkedve helyezkednek el a kis táblázatok. Ha ez a vonalazás nem a kis táblázatok mellett, hanem azok alatt fut végig, akkor a szemet vezeti végig az egyik táblázattól a másikig. Ha ezt alkalmazzuk a jelenlegi háromoszlopos elrendezésünknél, akkor a szemvezető vonalakat vagy háttérgrafikaként tudjuk a lapra csempészni, vagy a táblázatok közötti cellákba helyezett grafikákkal. Ilyenkor olyan háttérképet kell készítenünk, amelynek nagy része átlátszó, de a kb. 1/3 – 1/2 részénél van egy vonal benne. Ha ezt a képet háttérképként alkalmazzuk egy magasabb cellában, akkor az egy középen végigfutó vonalként fog megjelenni. Mivel ebben a cellában helyezkedik el az a táblázat, ami „dobozként” jelenik meg az oldalon, és lejjebb további ilyen „dobozok” találhatók, ezért ez a vonal össze fogja kötni ezeket a részeket, és végigvezeti a szemet mindegyiken. A másik előnye, hogy a teret nem tolakodó módon zárja le, így nem lesz olyan érzésünk, hogy „elfolyik” az egész weblap a képernyőn. Tipp. Rajzoljunk egy papírlapra egy olyan csőkígyót, amelyen végighaladva be tudnánk járni egy weblap fontosabb területeit. Utána helyezzük el e felett azokat a dobozokat, amelyek a weblap egyes részterületeit tartalmazni fogják. A vonal anyagának váltogatásával teljesen egyedi weblapokhoz juthatunk.

Ötleteket gyűjthetünk a Macromedia Fireworks MX programból, ahol nagyon sokféle szegély és háttérgrafika áll a rendelkezésünkre a különleges formázások végrehajtására. Az ilyen programokat mindig érdemes alaposan végignézni, mert sok olyan ötletet nyerhetünk általuk, amelyekre nem is gondolnánk. Fontos! Hiába vannak, hiába lennének jó ötleteink, ha nem tudjuk, hogy azokat hogyan lehetne megvalósítani, és egyáltalán a különböző programokban milyen lehetőségek állnak a rendelkezésünkre. Ezért ismerjük meg előbb a programok szolgáltatásait, és azoknak megfelelően fognak alakulni az ötleteink, hiszen azok megoldásai már a rajzoláskor körvonalazódnak a fejünkben. Azonban arra is ügyeljünk, hogy ne essünk abba a hibába, hogy csak kizárólag a program szolgáltatásai lebegnek a szemünk előtt. Ismerjük meg a lehetőségeket, ami azt jelenti, hogy képesek leszünk bizonyos grafikai megoldások végrehajtására. A weblapunk megtervezését ugyanúgy végezzük, mint eddig, de az egyes részegységek elkészítésekor már egyre jobban tudunk támaszkodni a különböző programok szolgáltatásaira. Alkalmazzunk lehetőleg több programot egy weblap elkészítésekor, és akkor változatos kialakításra nyílik módunk. 187

Egyedi elrendezésű weblapok


A színek megfelelő összhangjának megteremtése

Az egyik legnehezebb feladat meghatározni, hogy milyen színeket használjunk a weblapjaink elkészítésekor. Ez vonatkozik az egyes színekre és azok egymással alkotott összhangjára. Bizonyos színek egymás mellett nagyon jól mutatnak, míg mások kifejezetten „ütik egymást”. Az is fontos, hogy hány színt fogunk alkalmazni, mert ezek száma is korlátozott, hiszen ha mindent más színnel formáznánk, akkor rendkívül csiricsáré oldalt kapnánk. Az egyik megközelítési mód szerint az egész oldalt egy adott szín különböző árnyalataival töltjük meg, amitől az kellemesen szép és harmonikus lesz. Az oldalon így csak egy szín a meghatározó, ezért látványa rendkívül megnyugtató. Az ilyen színezéshez készítsünk egy színpalettát, és amikor színt választunk az egyes feliratokhoz, hátterekhez, akkor csak erről vegyünk mintát. Tipp. Hozzunk létre egy új mappát a Windows asztalon, amelynek neve legyen rövid, például „i”. Nyissuk meg ezt a mappát, és látni fogjuk, hogy a címsora színátmenetes, amennyiben a Windowsban ezt állítottuk be. Most állítsuk át egy kis időre a Vezérlőpult / Képernyő tulajdonságainál ezt a színátmenetet olyan+fehérre, amilyen színátmenetre szükségünk van. Ezután a mappa ablakát a [PrtSc] billentyűvel a vágólapra másolhatjuk és a címsorát képként elmentve meglesz a színskálánk.

A színskálát elkészíthetjük a Macromedia Fireworks MX programmal, ami azért sokkal inkább erre a feladatra készült, de az előző tipp is megállja a helyét, ha ez a program nem áll a rendelkezésünkre. Hozzunk létre egy új üres rajzlapot például 500x100 pixel méretben, majd rajzoljunk egy ugyanekkora téglalapot. Ezt most formázzuk meg a Properties ablaktáblában Linear kitöltéssel, amelynek egyik végén fehéret válasszunk, a másikon egy tetszőleges, de sötét színt. Ezzel kész a színátmenetünk. A másik módszer ennél egyszerűbb és gyorsabb. Hozzunk létre egy új üres rajzlapot kb. 300x200 pixel méretben, majd kattintsunk a Properties ablaktáblán a Canvas színező gombra, és az [Alt]+[PrtSc] billentyűkombinációval másoljuk le a vágólapra a színpalettát. Ezt most a [Ctrl]+[V]-vel szúrjuk be, és méretezzük át a Scale tool [Q] eszközzel teljes rajzlapméretre. Ezzel kapunk egy olyan lépcsőzetes palettát, amelyet jobban ki tudunk használni, mivel arányosabb lesz a weblapon használt egyes színek közötti különbség. Még így is nagy lesz a választék, és emiatt a bőség zavarával fogunk küzdeni, de legalább lesz egy jól összeállított palettánk. Ezt a palettát egyébként nem feltétlenül kell elmentenünk, mert használhatjuk a weblap szerkesztésekor, hiszen a forráskód írásakor nekünk a 16-os számrendszerbeli kódjára lesz szükségünk, ami az ablakban látható. 188

A „Háromoszlopos” stílus részegységei Az így elkészített oldalnak azonban lesz egy hibája, mégpedig az, hogy túl egyhangú lesz. Ezen úgy segíthetünk, hogy választunk egy kísérőszínt, és azzal feldíszítjük az oldalt. Nézzük meg az oldal felépítését, és döntsük el, hogy milyen feliratoknál vagy ikonoknál használjuk ezt a kísérőszínt, hogy ne legyen túlzott a szín használata, csak éppen annyira legyen jelen, mint amennyire az ékszer is jól mutat egy nőnél. Nem aggatja tele magát, mint egy karácsonyfát, bár néha látni ilyet is, de az már nem mutat jól. Ugyanígy a kísérőszín használatát se vigyük túlzásba, mert csak mindent elrontana. A másik megoldás szerint az oldalt eleve két színűre tervezzük, és az alapszín, valamint a kísérőszín teljes színskáláját felhasználjuk. Például az egyik színnel halványan hátteret hozunk létre, míg a másikból egy sötétebbel írjuk meg a főcímeket, illetve kicsit halványabbal a felvezető szöveget. Ugyanezt fordítva is megtehetjük, így a két szín szinte összefonódik. Amennyiben ezen a weblapon kiemelést kívánunk tenni, tehát valamire jelentősebben fel akarjuk hívni a figyelmet, akkor annál egy harmadik színt használunk, de ott már csak 1-2 árnyalatot, mert különben nagyon tarka lesz az oldal. Most pedig következzen a lényeg, a színek kiválasztásának szempontja. Ha sok szép weblapot megnézünk, akkor találunk közöttük olyanokat, amelyeknél jellemzően három színt használnak, és nagyon szépek, függetlenül az elrendezéstől vagy a tartalom típusától. Ha az ilyen oldalakról színmintát veszünk, és megvizsgáljuk ezeket a színeket, akkor némi vizsgálódás után felismerhetünk közöttük néhány összefüggést. A vizsgálathoz jó ha van egy olyan weblapunk, amelyen egy JavaScript program segíti a színek állítását, így könnyebb dolgunk lesz. A program leírására a JavaScript fejezetben kerül sor.

130. ábra. A színek közötti összefüggéseket feltáró weblap Ezen a weblapon az egérmutató mozgatásával lehet az első oszlop színeit módosítani. A mellette lévő oszlopban a saját inverze (255-rgb) található, majd ezután ennek sötétített változata (de 255 a feletti értékek rögzítésre kerülnek). 189

Egyedi elrendezésű weblapok 1. Eredmény: Az a három szín harmonizál egymással a legjobban, amelyek RGB-értékeit sorban felcseréljük. Válasszunk egy tetszőleges színt, amelynek színe legyen #rrggbb , akkor a következőnek legyen #bbrrgg , és a harmadiké pedig #ggbbrr. Ezen színek egymással egységet alkotnak. Ha ezt a három színt, illetve ezek világosított, sötétített változatait használjuk egy weblapon, akkor szép szín-összeállítású oldalt fogunk kapni eredményül. Ezt a színhármast kombinálhatjuk a fehérrel, feketével és ezek köztes árnyalataival, vagyis a szürkékkel. Gondolkozzunk el rajta, vajon mi lehet az oka ennek az összhangnak? Vajon miért éppen a feketével és a fehérrel lehet ezeket a színeket kombinálni? A színeket tovább vizsgálva, azok inverzeinél újabb felismerésre juthatunk. 2. Eredmény: Minden szín tökéletes összhangban van a saját inverzével. Ha tehát a szín #rrggbb, akkor annak inverzét úgy kapjuk meg, ha minden színét kivonjuk 255-ből. Az új szín rgb(255-r, 255-g, 255-b) függvénynyel adható meg a legegyszerűbben. Amennyiben a színt és annak inverzét használjuk, úgy ne alkalmazzunk harmadik színt, legfeljebb fehéret, feketét, illetve ezek világosabb és sötétebb árnyalatait. Hasonlóan a két színnél is engedélyezett az árnyalatok használata. Ha a két felismerést alaposan megvizsgáljuk, akkor arra a következtetésre juthatunk, hogy a két, illetve a három szín összhangját a természetes egészre való törekvés eredményezi. Ha a három szín kiadja a teljes színskálát, akkor nem lesz hiányérzetünk, így az összeállítás tökéletes lesz. Hasonló a helyzet a két, egymással inverz párt alkotó színekkel is, hiszen azok tökéletesen kiegészítik egymást, mint a jin és jang a Feng Shuiban. Hiszen a Feng Shuiban is a tökéletességre kell törekedni, az összhangra a természettel. A jó webdesign se más, ott is a tökéletes kiegyensúlyozottságot akarjuk elérni, ami a látogató számára kellemes látványt nyújt. Így már könnyen megérthető, hogy a fehér fényt felbonthatjuk összetevőire, de ha valamit kihagyunk belőle, akkor hiányérzetünk támad. Mivel az alapszín a fehér, illetve ebben a fényerő hiánya eredményezi a fekete színt, valamint a szürke árnyalatokat, ezért ezeket mindig használhatjuk, mert nem változik meg a színek aránya. Ha pedig valaki hisz a Feng Shuiban, akkor a weblapján alkalmazott színek összeállításakor figyelembe veheti azt is, hogy a látogató melyik alapelem szülötte, és annak megfelelő CSS-fájlt használhat a színezéshez. Ehhez előtte be kell kérni a látogatótól például a kedvenc színét, ami már sokat elárul. 190

A „Háromoszlopos” stílus részegységei

A tartalom rendszerezése Amikor egy céges vagy iskolai szerveren a közzéteendő dokumentumok száma jelentősen megnövekszik, akkor azokat valamilyen módon rendszerezni kell, mert különben a látogató nem fogja megtalálni. A rendszerezés sem egyszerű feladat, hiszen ha túl sok kategóriát hozunk létre, akkor ugyancsak előállhat az a szerencsétlen helyzet, hogy a látogató tallózza az egyes csoportokat, de sehol nem leli a számára fontos információt. A könnyebbik eset az, amikor már vannak kiindulásképpen meglévő témáink, dokumentumaink, és azokat kell rendszerezni. Ilyenkor hozzunk létre előbb főbb csoportokat, és azokba helyezzük el a fájlokat vagy témaneveket. Ha valamelyik témához aránytalanul sok alcím kerül, akkor gondoljuk át, hogyan lehetne másképpen csoportosítani az elemeket. Amennyiben a sok elemű csoportban létre tudunk hozni további csoportokat, amelyeket főtémaként kiemelhetünk, akkor tegyük meg. Amikor sikerült arányosan elosztani a témákat, akkor az egyes csoportokon belül kezdjük meg az ott felgyülemlett témákat tovább osztályozni. Csak akkor hozzunk létre újabb csoportot, ha az legalább 5-10 alcsoportot tartalmaz. Emlékezzünk az előző design lehetőségeire, ahol az 5x4 témán belül további GYIK-oldalak létrehozásával az egyes weboldalak kiinduló lapjai lehetnek akár 50-100 vagy annál is több további lapnak. Vegyünk alapul például egy céget, ahol árulnak termékeket és kínálnak szolgáltatásokat. Minden cég életében történnek változások, amelyekről a hírek részben lehet beszámolni. Ez hiába kapcsolódik egy-egy termékhez, az még nem jelenti azt, hogy az adott terméknél külön „Hírek” csoportot kellene létrehozni, hiszen ott valószínűleg nagyon kevés hír jelenne meg. Sok termék esetében pedig üres lenne ez az oldal, ezért felesleges lenne ide helyezni a termékhíreket. Ha viszont egy-egy termékről megjelenik valamilyen hír, tesztleírás és más egyéb gyűjtőmunkák eredményei, akkor már egy ilyen kategóriának is van értelme. Ezt viszont előtte alaposan mérjük fel, mert jelentős munkával jár minden egyes termékről leírást és egyéb teszteket végezni, különösen ha ezt még most jelenleg senki nem végzi, csak tervbe lett véve. Tipp. Először érdemesebb mindig olyan megjelenést készíteni a weblapoknak, ami a meglévő tartalmat dolgozza fel, és csak akkor átszervezni a felépítést, ha a közzéteendő dokumentumok, források már valóban rendelkezésre állnak. Azonban olyan korán sem érdemes dokumentumokat és részletes információkat közzétenni, amikor az egész még csak kialakulóban van, mert a látogatók nem szeretik, ha a cég oldalának felépítése gyakran és jelentősen megváltozik.

191

Egyedi elrendezésű weblapok


A dokumentumok keletkezésének lehetséges forrásai

Vizsgáljuk tovább a képzeletbeli cégünket. Ennél a cégnél nagyon sokféle terméket forgalmaznak, amelyet meg lehet vásárolni a cég online webáruházában. A vásárlás előtt a vevő értelemszerűen szeretne sokféle információhoz jutni a termékről, és talán nem is csak ahhoz, amit mi írunk róla (reklámriport színezetű). Amennyiben kellően sok terméket forgalmaz ez a cég, úgy megengedheti magának azt a luxust, hogy egyfajta hírportált üzemeltetve minden termékről a megjelenéskor ír egy tesztet, általános leírást, és ehhez kapcsolódóan fórum indítását teszi lehetővé. A hírhez kapcsolódó fórum előnye, hogy a leírás elolvasása után a már meglévő tulajdonosok és a termékkel már kapcsolatba került személyek körében aktív hozzászólási vágyat vált ki, ami lehet pozitív vagy negatív hozzáállású egyaránt. Ez a demokratikus visszajelzési rendszer egyrészt a cikkek íróit arra ösztönzi, hogy ne írjanak meg olyan cikket, amelyet a kiadott reklámanyagokból ollóztak össze, mert saját magukat járatják le. Ennek eredményeképpen viszont a látogató a helyet megismerve arra a következtetésre jut, hogy itt valóban őszinte hozzászólások és leírások olvashatók, még ha azok hangneme sokszor kissé nyers is, de legalább a valóságot tükrözik. Így ha vásárolni akar egy terméket, akkor az itt olvasottak alapján körülbelül azt fogja kapni, amiről írnak, és nem zsákbamacskát. Valószínűleg az ő véleménye is hasonló lesz a termékről, csak a hozzáállása lesz más, mert ő már ismerni fogja az áru jó és rossz tulajdonságait, és ezek tudatában veszi azt meg. Nem baj az, ha egy termék valamit nem tud nyújtani, ha ennek ismeretében, de az alacsonyára miatt vesszük meg. Ha viszont valaki feltételez egyfajta tulajdonságot a termékről, és ezért a számára drágábbat veszi meg, majd ezután szembesül a hiánnyal, akkor joggal lehet dühös, bár csak magára vethet, mert nem tájékozódott kellően a vásárlás előtt. Értelemszerűen az ilyen fórumok nem igazán jelenhetnek meg egy cég saját termékeit áruló weblapján, hiszen annyira tökéletes terméket sehol nem gyártanak, amelynek ne lenne hibája. Az pedig mégse festene jól a cég oldalain, hogy éppen ők adnának teret a saját terméküket érő negatív reklámnak. Arra viszont itt is biztosíthatunk lehetőséget, hogy az érdeklődők kérdezzenek, és a válaszokat az adott terméknél feltüntetett GYIK (FAQ) weblapon közzétegyék. Az nem hiba, ha egy termék nem rendelkezik valamilyen jellemzőkkel, és az nem válik kárára egy cégnek, ha ezt őszintén leírja. Ez a termék ennyibe kerül, és ezt tudja, valamint ezeket nem tudja. Nagyobb kár az, ha a vásárló elégedetlen, még ha ez a saját hibájából következett be, ez a kialakult helyzeten nem változtat, ő akkor is békétlen marad. 192

A „Háromoszlopos” stílus részegységei A dokumentumok keletkezési módja meghatározza az adott weblap elhelyezhetőségének formáját is. Ha ez ugyanis egy fórumlap vagy hír, akkor azt célszerű adatbázisban tárolni, és onnan dinamikusan a lehíváskor összeállítva megjeleníteni. Ebben az esetben a gyűjtőlap felépítése a GYIK-típusú oldalakéhoz hasonlít, amikor egy témalapon az adatbázisból kilistázzuk a kérdéseket, illetve a hírek szalagcímeit, és ezekre mint linkekre lehet kattintani az adott hír, kérdés vagy fórumtéma listázásához. Az adatbázis-alapú tárolás egyik előnye, hogy a weblapot csak egyszer kell megszerkeszteni, és minden hír vagy GYIK ugyanebben a sémában jelenik meg. Mivel a weblap összeállítása a lehíváskor dinamikusan történik meg, ezért más adatbázisokból szintén olvashat adatokat, mint például reklámokat, amelyek megjelenését így azonnal számlálhatja. A másik előnye, hogy ebben a hatalmas adatbázisban lehet keresni, és ehhez a programozott weblapot mi készítjük el, és nem függünk más szolgáltatásoktól (kereső portálok). További előnye az adatbázisoknak, hogy az adatok bevitelére, szerkesztésére más weblap vagy WAP-oldal szolgál, így tetszőleges helyről és eszközről történhet meg az információ bevitele, amelyet már a következő pillanatban listázni lehet. Ez a rendkívül gyors interaktivitás további lehetőségekre hívja fel a figyelmet, amelyet érdemes alaposan átgondolni. Amennyiben a raktárkészleti adatbázisunk teljesen online működik, úgy a megrendelő előre láthatja, hogy mit rendelhet, és nem éri váratlanul, ha nem kapja meg a megrendelését, mert ezt már a feladás pillanatában visszaigazolhatják neki. Így ő is azonnal megteheti a további lépéseket, és például más helyről pótolhatja a hiányzó termékeket. Ha a cég rugalmas ilyen szempontból, akkor a rendelésnél jelentkező raktárhiányról értesítheti a rendszer az illetékest, aki utórendeléssel pótolhatja a hiányt, és a vásárló felé is jelezheti a második szállítás időpontját. Ezzel azt éri el a cég, hogy raktározás nélkül tud terméket forgalmazni, ami akár árengedmény nyújtását is lehetővé teszi.

 A hiperhivatkozások elhelyezése és mélysége

Első lépésben induljunk ki abból, hogy a felépítésünknél jelzett C4-es cellákban helyezzük el azokat a témaneveket, amelyek egyfajta részportálként fognak működni, egymástól némileg eltérő megjelenéssel. Ezen helyek között csak a C4-es cellasoron keresztül lesz kapcsolat, így semmi kihatása nem lesz az egyik részportál változásának a másikhoz. Ennek megfelelően a címek így lehetnek abszolút hiperhivatkozások, vagyis a teljes webcímet tartalmazhatják. A teljes című fájlnak, például http://www.cegnev.hu/altema1/index.html léteznie kell még akkor is, ha egészen más lesz a téma nyitólapja, de az nem tilos, hogy ez egy azonnali címátirányítást tartalmazzon egy dinamikus weblapra. 193

Egyedi elrendezésű weblapok Az így megjelenő weblapra úgy kell tekinteni, mintha az a cég nyitólapja lenne, hiszen ez valóban egy részterület nyitólapja lesz. Az itt található altémák linksora elhelyezkedhet a középső terület felső részén, amennyiben olyan mélységekbe fogunk ereszkedni, hogy majd az ez utáni választásnál jelenhetnek meg a bal oldali sávon a kiválasztható hiperhivatkozások. Tipp. Arra ügyeljünk, nehogy ugyanazt a résztémát több helyről kategorizáljuk, mert akkor teljesen kiismerhetetlen lesz a weblapunk. Több szintű linkek esetén érdemes az egyes szintekre visszavezető linkeket sorban vagy oszlopban elhelyezni, amiből az is látható, hogy éppen hol tartunk.

Ha annyira nagy mélységekbe nem kell szerveznünk a weblapok elérhetőségét, akkor általában elegendő lehet a C4-es cellasorban elhelyezett főtémák közötti váltás, és a hozzájuk tartozó bal oldali C5-ös cellában megjelenő felsorolás. Ettől függetlenül lehetnek további hiperhivatkozások a középső tartalmi területen, amelyek elérése után egy „Vissza” feliratú linkkel juthatunk vissza az adott téma lapjára. Jó megoldás az is, ha egy már lezárt témánál az említett link kiválasztása után megjelenő oldalon a további részletező lapokra szintén mutat hiperhivatkozás. Ebben az esetben viszont fontos, hogy a téma le legyen zárva, mert egy újabb lap felvételekor az erre mutató linket is fel kellene venni, és ez esetleg már problémákba ütközhet az adott lapon. Tipp. Az esetek többségében nincs lezárt téma, mert mindig jelenhetnek meg újdonságok az adott témával kapcsolatban, ezért érdemesebb a visszafelé mutató linket használni, mert ez biztosan beválik. Ne legyen hiányérzetünk csak azért, mert a lap nem tartalmaz minden lehetséges hiperhivatkozást! Az ilyen „zsákutca” a látogatónak is jelzi, hogy egy téma végére ért.

Azonban a helyzet nem ennyire egyszerű, mert egy oldal letöltése után viszszalépni nem mindig lehet egyszerűen. Ha ugyanis az oldal valamilyen dinamikus szerveroldali lekérdezést tartalmaz, akkor a webböngésző újra le fogja hívni az oldalt, ami lassítja a böngészést. Amennyiben egyszerű weblapokról van szó (reklámmentes tárhelyen lévő HTML-oldalakról), úgy a visszalépés egy pillanat lesz csupán, de ha nem, akkor ez nem jó megoldás. Ha a visszalépésre az adott szerveren vagy az adott weblapjaink esetén várni kell, úgy mindenképpen helyezzünk el továbbvezető linkeket a további oldalakra, mert a második lassított visszalépés után a látogató az ablak bezárásával fog válaszolni a böngészést lassító megoldásunkra. Ne felejtsük el, a látogató türelmetlen, mindent azonnal akar, de mégis neki van igaza. 194

A „Háromoszlopos” stílus részegységei Mivel az esetek többségében a visszalépés nem egyszerű, ezért már eleve tervezzük be az adott témánál a további weblapokra történő hivatkozások helyét, ráadásul úgy, hogy az bővíthető legyen tetszőleges hosszban. Ezért ne szorítsuk be a sarokba egy táblázatba, mert az újabb linkek megjelenésekor az alatta lévő szöveget fogja eltolni, így az egész oldal tördelése, felépítése megváltozhat egy újabb hiperhivatkozás megjelenése miatt. Jó megoldás lehet a legördülő menü programozása, amelyet így akár a lapon több helyen is el lehet helyezni, hiszen egy gombra vagy képre történő mutatás, kattintás hatására a JavaScript programunk bárhol megjelenítheti ezt a menüt. Ezt viszont csak addig bővíthetjük, amíg a linkek sora nem nő túlzottan hosszúra. Tipp. A menü megjelenítését a document.write(‘

Újdonságok:  Új könyvek, új cikkek ...
) definíciójában találunk egy új elemet (). Ezzel a weblaphoz kapcsolt stílusfájlban (*.CSS) meghatározott stílusra hivatkozunk, így az külön fájlban írható le. Ennek előnye akkor van, ha a teljes webhely megjelenési stílusán módosítani akarunk, és ehhez nem akarjuk átdolgozni az összes weblapot. Ilyenkor csak a CSS-fájlt írjuk át, és azonnal más színvilágban jelenik meg weblapunk. Ennek használatához a weblap fejrészében a „” után a „” előtt helyezzünk el egy hivatkozást egy létező szöveges fájlra az alábbi módon. 28. ábra. Hivatkozás a weblapról a CSS-fájlra 47 Egyedi elrendezésű weblapok A CSS-fájlban sokféle stílust meghatározhatunk, amiből az idevágó részeket a 46. oldalon láthatták. Mivel a „class” paraméterrel hivatkozunk egy egyéni stílusra, ezért annak neve előtt legyen pont karakter, majd egy kapcsos zárójelen belül soroljuk fel pontosvesszővel elválasztva a stílusjegyeket. A CSS-ről részletes ismertetőket általában a szerkesztőprogramok súgói tartalmaznak, de a leírás némi angol tudással egyszerűen megfejthető. A linktáblánk egy cellája tartalmaz egy kis képet, amelyet most a saját Windows képernyőmről gyűjtöttem össze, így önök is egyszerűen tudják követni a példát, amíg nem rajzolnak egyéni ikonokat. A Windowsban a képernyő tartalmát a [PrintScreen] billentyűvel másolhatjuk le a vágólapra, amelyet például a Paint programba a [Ctrl]+[V]-vel szúrhatunk be. Innen a kijelölés után, egy másik ablakba átmásolva, elmenthetjük tetszőleges formátumú képfájlba (GIF, JPEG, PNG, de a BMP-be tilos!). Tipp. Ügyeljünk arra, hogy minden kép mérete egyforma legyen, különben igencsak szétszórt megjelenésű lesz a képsorozat. Ha a feliratokkal együtt az egész gombot képként kívánjuk elmenteni, akkor ellenőrizzük a képek fájlméretét, ha szükséges optimalizáljuk azokkal a képszerkesztő programokkal, amelyek képesek a minőség romlása nélkül is csökkenteni a fájlméreten. A szöveg második sorának beírásakor jelentkezik egy újabb kérdés, hogyan írhatunk több (de legalább kettő) sornyi szöveget a kép mellé. Erről az igazítást végző paramétere gondoskodik, lásd: align=”left”. A kép méretének megadása látszólag felesleges, hiszen éppen annyi helyet akarunk elfoglalni a számára, mint amekkora a kép mérete. A weblap megjelenésekor először a HTML-fájl kerül letöltésre és megjelenítésre, majd folyamatosan a benne hivatkozott fájlok. Először a fejrészben lévő CSS- és JS-fájl, majd a BODY-részben lévő képek és egyéb szkriptfájlok. Ha nem adjuk meg a méretét, akkor csak kis helyet foglal egy kép, majd a letöltés és megjelenítés során foglalná el a ténylegesen igényelt méretet. Ettől az egész oldal megjelenése nem folyamatos lenne, hanem ugráló, hiszen a képek méretétől függ az általuk elfoglalt hely, és a táblázatok, cellák mérete. A szövegek formázásához használhatjuk fel a „“ elemet, amelyet mindig a lezáró tagjával együtt alkalmazunk. Ha ehhez egy class paramétert rendelünk, akkor az ott megadott stílussal formázhatjuk, így egy bekezdésen vagy táblacellán belül több különböző megjelenésű szöveg is elhelyezkedhet. A hiperhivatkozás szintén egy blokkot alkot, és mindenre vonatkozik az aktív kijelölés, ami az „” és a „” közé esik. A példánkban ez a kép és a felirat egyszerre, és bármelyikre mutathatunk, a link akkor is kiválasztható. 48 Honlap „Varázsló-forma” elrendezésben A linkek a weblapunkon nagyon fontos elemek, hiszen ennek segítségével tud a felhasználó az oldalainkon belül navigálni. Azonban az is lényeges szempont, hogy a tartalom legyen a leginkább szembetűnő, és ne a linkek, mert azok csak segédeszközök, míg az információt a tartalom hordozza. A linkek szintén képviselnek bizonyos információt, ezért mindig nagyon ügyeljünk arra, hogy jól rendszerezzük az oldalainkra kerülő tartalmat. A saját példámból kiindulva, a linkek azt mutatják, hogy az oldal változik, mert az újdonságok ismertetése külön téma. Találnak nálam információkat a könyveimről, mobiltelefonokról, PC Word tippeket, továbbá magamról egy keveset, és az eddig megjelent honlapjaimat. Ez utóbbi azt jelenti, hogy több is van belőlük, tehát valószínűleg nem ma készült el az első honlapom. Ha úgy gondolnám, hogy bármelyik téma kevésbé fontos, mint a másik, akkor azt egy új címszó alatt össze kellene vonni egy vagy több másik témával. Fontos! Egy honlapot folyamatosan meg kell újítani, esetleg teljesen át kell alakítani annak megfelelően, hogy éppen mennyire fontos egy-egy téma az életünkben vagy a munkánk során. Aki gyakran vált munkát, életstílust, annál ez esetleg teljes átalakulást is jelenthet. Ilyenkor érdemes megtartani a régi honlapokat, amelyek idővel már csak emlékek lesznek. A fentiek szellemében készítsük el a linktáblánkat, amelyet illesszünk be a kétcellás táblázat bal oldali részébe. A forráskódban feltétlenül jelöljük meg egyegy megjegyzéssorral a beszúrás előtt a hely elejét és végét, és a kettő közé illesszük be az új tartalmat. Így a későbbiek során könnyebb lesz megtalálni a sok táblázat között a nekünk éppen megfelelőt. Tipp. Amennyiben vizuális szerkesztőt használunk, úgy gyakran megeshet, hogy a többszöri formázás és átformázás eredményeképpen néha egy-egy betű vagy csak egy szóköz is más-más jegyekkel van megformázva, mert nem vettük észre, hogy másképpen jelöltünk ki egy szövegrészt. Az ilyen részeket ellenőrizzük, és töröljük ki a forrásból, mert feleslegesen teszik nehezen áttekinthetővé a forráskódot. Az egyes elemek szerkesztését mindig külön végezzük el, külön fájlban tároljuk, így később újra összerakhatjuk az oldalt, ha valami nagyon nem tetszene. Ennek segítségével az újabb oldalak és sablonok készítése is egyszerűbbé válhat. Fontos! A forráskód átnézésekor, amit csak lehet tegyünk át a stílusfájlba, így a HTML-forráskód még tisztábbá, áttekinthetőbbé, érthetőbbé válik. A következő alkalommal már sokkal tudatosabban fogunk a munkához kezdeni. 49 Egyedi elrendezésű weblapok A belső tartalom létrehozása A végére maradt a jobb oldali tartalmi táblázat elkészítése, amelyet eredetileg 1x3-as formára képzeltünk el, de ez a tartalom függvényében változhat. Amint már jeleztem, készítünk egy élőfejet és egy élőlábat, mint a könyveknél szokás, amelyeken olyan általános információkat helyezünk el, amelyeket minden oldalon szívesen látnánk. Friss hír szalagcímként. A tartalom területe. 3 db ikon.   100%  A tartalom lábléce, ha több altémára tagozódik. Az oldal lábléce 29. ábra. A tartalmi terület táblázatának felosztása Szalagcím: Az élőfejbe kerülhet egy olyan fontos információ megjelenítése, amit nagyon szeretnénk reklámozni. Ezt igazítsuk balra ( ). Tartalmazhat szöveget és hiperhivatkozást, képet csak akkor, ha valamelyik témajelző ikon kicsinyített képét el tudjuk helyezni a sor elejére. 3 ikon: Jobbra igazítva helyezzünk el néhány hasznos ikont, amelyekről már a 44. oldalon szóltunk. A kis ikonokhoz egy-egy hiperhivatkozás tartozik. (A kedvencekhez adásról a JavaScript fejezetében olvashatunk.) A tartalom területe: Ide kerül a tartalom, amelyhez majd meghatározunk 2-4 stílust, és csak azok alkalmazásával jelenítünk meg szöveget. Ezzel egységes, szép megjelenést biztosítunk az oldalunknak. Ennél kell megadni a cella magassági méreteként a 100%- értéket. A tartalom élőlába: Ha egy téma további altémára osztható, akkor az altémák közötti váltást teszi lehetővé. Például nálam a Könyveim témában a kiadók szerinti rendezésben megjelenített könyvcímeket bemutató oldalak. Ha ilyen nincs, akkor egyszerűen hagyjuk ki ezt a sort. Az oldal élőlába: A minden oldal alján megjelenítendő információ, ami cégeknél például a telephely, bolt címe, telefonszám és egyéb fontos elérhetőségek, amelyeket szeretnénk, ha a látogató sokat látna. Mindenképpen fontos, mert a lap vízszintes elrendezését hangsúlyozza a megléte. 50 Honlap „Varázsló-forma” elrendezésben A szalagcím azonnal felvet egy problémát, hogy mi történik akkor, ha a friss információ megváltozik, hogyan tudjuk annak tartalmát frissíteni. Ehhez először vizsgáljuk meg, hogy a weblapunk hol fog megjelenni, mi lesz a sorsa a továbbiakban, illetve milyen lehetőségeink vannak dinamikus tartalom megjelenítésére (ASP, PHP, CGI). Ha a weblapunk megjelenik számítógépen egy webböngészőben, abban semmi hiba nincsen. Ha már egy tenyérgép vagy egy kommunikátor böngészőjében hívják le az oldalt, akkor felmerülhet a kérdés, hogy az képes-e például JavaScript programokat futtatni. Bár ezzel párhuzamosan az is kérdéses, hogy ezeket az oldalakat erre terveztük-e vagy csak kizárólag PC-s megjelenítésre. A vízszintes forma nem kifejezetten kedvez a kb. 400, 640 pixel széles kis kijelzővel rendelkező eszközöknek, ezért ebben a esetben ezt zárjuk ki. Amennyiben az oldalak szerkesztéséhez Microsoft FrontPage programot használunk, úgy az élőfej, élőláb tartalmát beszúrhatjuk webbot-összetevőként, amely frissítéséhez csak meg kell nyitnunk minden weblapot, majd el kell mentenünk, és a frissítés ezzel megtörténik. Ez már kevésbé jó megoldás, de még mindig jobb, mint kézzel módosítani minden egyes oldalt. Ha tudunk programozni, például PASCAL, QBASIC, VBScript vagy bármilyen programozási nyelven, amivel szövegfájlokat tudunk olvasni és írni, akkor a feladat egyszerű. Nyissuk meg a weblapot, mint szövegfájlt, olvassuk addig, amíg elérünk egy általunk elhelyezett megjegyzést, és a beolvasott sorokat írjuk ki egy ideiglenes fájlba. Ezután írjuk ki az új tartalmat, majd folytassuk az eredeti fájl olvasását és átmásolását a következő megjegyzéstől az ideiglenes fájlba. A kiírás után töröljük az eredeti fájlt, és az ideiglenest nevezzük át az eredeti nevére. Ezzel a kis programmal a webhelyünkön lévő összes fájl megadott tartalmait másodpercek alatt átírhatjuk külső beavatkozás nélkül. A harmadik megoldás a legjobb, amelynél a dinamikus tartalmat valóban dinamikusan állítjuk elő valamilyen szkript segítségével. Ez a kis program lehet egy JavaScript vagy VBScript, ami beleír a weblapba a megadott helyre a megjelenítés során. Ebben az esetben csak ezt az egy fájlt kell kicserélnünk, és a következő lehívásnál már az új tartalom jelenik meg a látogató böngészőjében. Az előbbi megoldást csak akkor használhatjuk, ha olyan weblapokat készítünk, amelyeket csak PC-n fognak lehívni, és olyan webböngészővel, amelyik tud futtatni szkripteket. A VBScript programokat például csak az Internet Explorer tudja futtatni, ezért inkább a JavaScriptet részesítsük előnyben. Általánosságban előnyösebbek a szerveren futó programok, mert azok mindig lefutnak, és eredményül azt a HTML-kódot küldik el, amit a legegyszerűbb böngészők is képesek megjeleníteni. 51 Egyedi elrendezésű weblapok A szerveroldali programok egyik hátránya, hogy a statikus tárhelyen nem lehet futtatni, a program elhelyezésére alkalmas tárhelyek pedig nagyságrendekkel drágábbak. A programot elhelyezhetjük ingyenes tárhelyeken is, de azok többségében reklámot is küldenek a kód mellé, ami sokat ront az oldalunk ízlésesre tervezett megjelenésén. Ha azonban megtanuljuk a szerveroldali programozást, akkor akár az egész weblapot megjeleníthetjük dinamikusan, és nem csak az alkalmanként változó részeit. Ebben az esetben további izgalmas lehetőségek is megnyílnak előttünk, ráadásul a tartalom már lehet kizárólag szkript-mentes HTML-kód, WAP-oldal vagy XHTML-dokumentum. Ez utóbbiakat főként mobiltelefonon lehet megjeleníteni. Ha nem akarjuk túlbonyolítani, akkor alkalmazzuk a JavaScript lehetőségeit, amelyen megjeleníthetünk folyamatosan változó vagy futó szövegeket hiperhivatkozásokkal. Arra vigyázzunk, nehogy jobban elvonjuk a látogató figyelmét az oldal tartalmáról, mint azt a hirdetésünk megérdemli. Fontos! Az emberből nem vesztek ki az ősi ösztönök, és az agy még emlékszik arra, amikor az ember élete múlott azon, hogy a periférikus látómezőben mozgó vadállatot időben megpillantsa. A mozgó reklámok ezt használják ki, viszont a weblapunkat a legjobban ezzel tehetjük tönkre, mert teljesen eltereli a figyelmünket az érdemi tartalomról. Ezért folyamatosan mozgó tartalmat soha ne alkalmazzunk minden oldalon! A program megírásával a „JavaScript: Látványos elemek – elemek látványa” című fejezetben foglalkozunk, addig viszont készítsük el a megjelenítendő HTML-kódot. Ha ez egy újdonságra hívja fel a figyelmet, akkor az egész egy sornyi szövegből és a hozzá tartozó hiperhivatkozásból fog állni. Például:	Legújabb megjelent könyvem: Tippek CD-íráshoz; Kiadó: ComputerBooks	” cellákat. Emlékezzünk a méretükre, amelynek 45%-ot adtunk meg, és ezt nem használtuk máshol, így ez lehet egy egyedi ismertetője. Az alábbi ábrán a nyilakkal jelölt igazításokra (EN: align) lesz szükség, amelyeket a megadott paraméterekkel érhetünk el.  valign=”bottom” alapértelmezett.  valign=”bottom” Itt van már a tartalom. valign=”top”   valign=”top” align=”right”  alapértelmezett. 32. ábra. Az eredeti főtáblán szükséges igazítások A vízszintes vonal folytatásaként helyezzünk el főfeliratokat, amelyek szintén a szemet vezetik tovább. Az oldal főcímének ez a legjobb helye, míg a lenti tömör megfogalmazás a tulajdonos szemléletét tükrözi, és becsalogatja a látogatót. 33. ábra. A vízszintes design erősítése kiegészítő elemekkel 55 Egyedi elrendezésű weblapok Stíluslapok: A weblapok speciális formázása Az első honlapunk készítésekor óhatatlanul előfordulhat, hogy a vizuális szerkesztőprogramot fogjuk inkább előnyben részesíteni, mert azon jobban látjuk a lehetőségeinket. Ez nem baj, csak amikor már kezd kialakulni a végleges kép, akkor a formázási jellemzőket cseréljük le a megfelelő stíluselemre. Ez úgy történik, hogy megkeressük egy CSS-leírásban az adott formázásnak megfelelő utasítást, és azt alkalmazzuk, míg a HTML-kódból kitöröljük a párját. Például a HTML-kódban a kódot a párjával együtt kivesszük, ha az a teljes bekezdésre érvényes volt, és helyette a bekezdést formázzuk meg. Ehhez adjuk meg a bekezdés stílusát a class paraméterrel, például így: Szöveg... . Ezután rendeljük hozzá az oldalhoz a HEAD-részben a CSS-fájlt (lásd a 47. oldalon), majd írjuk be a „normal” nevű stílusunk jellemzőit. Például: .normal { margin-top: 0; margin-bottom: 0; margin-left:30pt; text-align: justify; background-color: white; font-size: 10pt; color: #000000; font-family: Verdana, Arial; } Általában célszerű betartani azt a szabályt, hogy bekezdésstílusnál először adjuk meg a bekezdésformázásra vonatkozó paramétereket, majd ezt követően a betűformátumra vonatkozókat. Ha nem bekezdést formázunk, hanem a bekezdésen belül egy „” és „” elemekkel határolt blokkot, akkor annál csak a karakterformátum jellemzőit adhatjuk meg, mert egy alblokk nem mondhatja meg a bekezdésnek, hogy az hogyan nézzen ki. Az egyes stíluselemeket pontosvesszővel válasszuk el egymástól, és az utolsót is mindig zárjuk le, mert nem tudhatjuk, hogy nem fogjuk-e folytatni. A teljes formázást kapcsos zárójelek közé írjuk, amelynek lezáró elemét írjuk új sorba, így nem fog elveszni. Mindig tartsuk be az általunk felállított logikai sorrendet az egyes stíluselemek között, így nem kell keresgélnünk a sok elem között a megfelelőt, és jobban látjuk az egyes stílusok között az összhangot. Ha egy stíluselem rendre ismétlődik több egyéni stílusunknál is, akkor azt emeljük ki egy magasabb szintű elemhez. Például, ha a teljes lapon az Arial betűtípust akarjuk alkalmazni, akkor azt nem kell mindenhol megadni, mert elég csak a „body” elem stílusaként beírni a „font-family: Arial;” paramétert, mivel az a teljes weblapra érvényes lesz. Ha ezt csak a „table” elemre adjuk meg, akkor csak a táblázatba írt részeknél lesz ez az alapértelmezett betűtípus, míg az azon kívülieknél nem. 56 Honlap „Varázsló-forma” elrendezésben A saját weblapunk tervezésekor mindent táblázatban helyeztünk el, ezért erre az elemre ne határozzunk meg egyéni stílust, mert abból nagy keveredés lesz. Arra is ügyeljünk, hogy a táblázatcellába írt szövegnél az első bekezdésnyi szöveg mindig a cellában (értsd: TD-elemben) van, és csak a második bekezdésnyi szöveg kerül egy külön „ ” bekezdésbe. Ezért ne határozzunk meg bekezdésstílust a „p” elemre, de a „td”-re sem, mert minden cellában más és más jellegű adatok kerülhetnek. Ezért használjunk inkább egyéni stílusokat, mint amilyen a „normal” nevű is volt. Ezeknél a stílusnév előtt mindig legyen pont karakter, míg a beépített HTML-elemeknél soha ne írjunk pontot. Például: h2 } { margin-left:10pt; margin-top: 5; margin-bottom: 0; font-size: 12pt; color: #3333CC; Mikor alkalmazzuk a beépített stílusokat? – Kell egyáltalán használnunk azokat? Hiszen létrehozhatok egyéni „p” bekezdést, és olyan stílust rendelek hozzá, amelyik úgy néz ki, mint egy címsor. Akkor mi értelme a „H1..H6” címsoroknál használatos stílusoknak és az összes többi előre beépített elemnek? Igazából nem sok, csak éppen annyi, ha olyan böngészőben nézik meg az oldalainkat, amely nem tud stíluselemeket megjeleníteni, akkor ott a böngésző alkalmazza az alapértelmezett stílusjegyeket. Olyankor is ez történik, ha a látogató lementi az oldalunkat, és elküldi valakinek a CSS-fájl nélkül. Ha a címsorok vagy más kiemelt részek formázására például a címsorok stílusait használjuk, akkor az a stílusfájl nélkül is ugyanúgy kiemelten jelenik meg, kicsit más módon, de mégsem egészen eltérően. Ha minden bekezdésünk csak „p” elemű lenne, amely egyéni stílussal formázott, akkor az a böngészőben a stílusfájl nélkül egynemű összefolyó szövegként jelenne meg alcímek nélkül, ami nem igazán mutat jól. Nem minden esetben tudjuk azonban az összes formázási jellemzőt átírni stílusbeli paraméterre, mert nem mindegyiknek van meg a megfelelő párja. Ilyen például a táblázatoknál a „cellspacing=0px”, amelyet a „margin=0px” paraméterrel helyettesíthetünk, de ez mégsem tölti be teljesen a szerepét, mert hiába adjuk meg a cellájánál, hogy annak margója legyen nulla, akkor is megjelenik a cellák körül egy 1-2 pixeles keret (megjegyzés: pl. IE 5.0-ban). Egy weblap megjelenése annál igényesebb, minél inkább ügyelünk az apróbb részletekre. A gyakorlatban ez azt jelenti, hogy mindenhol törekedjünk a logikus és egységes formázás betartására. Ahol kell, ott adjuk meg a lehető legtöbb stílusjellemzőt, de ahol nem szükséges, ott kerüljük a felesleges díszítést. 57 Egyedi elrendezésű weblapok A jellemzők osztályozása és felsorolása A weblapunk készítésekor először a közzétenni kívánt információt osztottuk fel részekre, amely meghatározta, hogy azon belül hogyan részletezzük tovább a témát. Ennek elhelyezésére táblázatot készítettünk, mert azzal feloszthattuk a területet tetszőleges részekre. Most, a stílusok meghatározásakor, ezen területek jellemzőit adjuk meg. Először mindig a bekezdés vagy terület bekezdésformátumait adjuk meg, majd utána a szöveg karakterformátumait. Területformátumok: (Ezek mindegyike alkalmazható bekezdésre és a bekezdésen belüli span- blokkra, illetve hiperhivatkozásra.) A láthatóság ténye, a pozíció jellemzője és a hozzátartozó hely adatai, a méret vízszintesen és függőlegesen pixelben vagy arányban, a háttérszín és –grafika adatai. Bekezdésformátumok: A margók vagy celláknál a belső margó mérete, a szegélyek mérete, stílusa, színe, szövegnél az első sor behúzása, a lista típusa (listák esetén), a sormagasság és a szöveg igazítottsága (a sorkizárt is). Karakterformátumok: A betű típusa, stílusa, mérete, dekorációi, színe, háttérszíne és/vagy grafikája, illetve a speciális szűrők (csak IE 4.0-tól). Példa: display: none | block | inline | list-item Jelmagyarázat: A CSS-beli kulcsszó a „display”, a megadható paraméterei utána sorakoznak, amelyek közül egyet választhatunk, ezt jelzi a „|” jel. Például: display:none; Jelentése: Az ilyen stílusú elem ne jelenjen meg. Láthatóság ténye: display, visiblity, overflow. Pozícionálás: visibility, position, top, left, width, height, float, clear, clip, z-index. A háttér jellemzői: background-color, background-image, background-repeat, background-attachment, background-position, background. A szegély és a margó jellemzői: margin, padding, border, border-width, border-color, border-style, továbbá: margin-top, padding-top, border-top, border-top-width, border-top-color, border-top-style, margin-left, padding-left, border-left, border-left-width, border-left-color, border-left-style, 58 margin-right, padding-right, border-right, border-right-width, border-right-color, border-right-style, margin-bottom, padding-bottom, border-bottom, border-bottom-width, border-bottom-color, border-bottom-style, Honlap „Varázsló-forma” elrendezésben Listakészítés: list-style-type, list-style-position, list-style-image, list-style, display. Karakterformátumok: font-family, font-style, font-size, font-weight, font-variant, font, letter-spacing, line-height, text-align, text-decoration, text-transform, text-indent, vertical-align, @font-face. (A háttér jellemzőivel is formázhatók a feliratok.) Másodlagos kulcsszavak (): link, visited, active, hover. Nyomtatási jellemzők: page-break-before, page-break-after. Egyéb: @import, !important, cursor, filter. Végezetül a teljesség kedvéért nézzük meg a stílus jellemzőinek megadási módjait. A legjobb megoldás a csatolt CSS-fájlban történő leírás, mert szépen, áttekinthető módon elkészíthető, és mindegyik weblapunkhoz csatolható, illetve a módosítások azonnal minden weblapon érvényesülnek. A másik megoldás, ha a weblap head-részében a fájlra való hivatkozás helyett helyezzük el a jellemzők leírását. Ezzel elkerülhetjük a külön fájl letöltését, már ha ez problémát okoz, illetve korlátozhatjuk a stílusjegyek felsorolását csupán azokra az elemekre, amelyek az adott oldalon szerepelnek. Erre inkább csak szerveroldali programozott weblapok (asp, cgi, php) esetén kerülhet sor, ahol a kiszolgálón futó program a kiírandó elemek stílusát és egyéb jellemzőit figyelve, csak azokat a stílusjegyeket gyűjti ki az adatbázisból, amelyikre valóban szükség van a weblapon. A harmadik az átmeneti megoldás, amikor az adott elemnél adjuk meg a stílus jegyeit, ami nem igazán indokolható, főleg ha az keveredik a hagyományossal. 59 Egyedi elrendezésű weblapok Kulcsszó és paraméterei Jelentése Méretezés width: méret | százalék | auto az objektum szélessége height: méret | százalék | auto az objektum magassága Háttér jellemzői background: minden további háttérjellemző felsorolva háttér minden szóközzel elválasztva. jellemzője egyben background-color: színkód | transparent görgethető-e háttérszín background-image: url-cím | none háttérkép background-position: [százalék | méret ] | [top | center | bottom] || [left | center | right háttérkép pozíciója background-repeat: repeat | repeat-x | repeat-y | no-repeat háttérkép ismétlése background-attachment: scroll | fixed Margók kívül és belül margin: [méret | százalék | auto] margin-bottom: [méret | százalék | auto] padding: [méret | százalék ] padding-bottom: méret | százalék margó minden oldalra és értelemszerűen top, left, right. cellák belső margója top, left, right. Szegély jellemzői border: a további 3 szegélyjellemző valamelyike felso- rolva szóközzel elválasztva. border-color: színkód border-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset border-width: [thin | medium | thick | méret ] A szegélyvonal színe, stílusa, szélessége egységesen mindegyik oldalra. border-bottom: színkód || stílusnév || szélesség border-bottom-color: színkód border-bottom-style: stílusnév, lásd fenn. border-bottom-width: thin | medium | thick | méret 60 és mindegyik jellemzőnél: top, left, right is! Honlap „Varázsló-forma” elrendezésben Kulcsszó és paraméterei Jelentése Bekezdésformátumok és jellemzők text-align: left | right | center | justify text-indent: méret | százalék szöveg igazítottsága a bal oldali behúzás Karakterformátumok color: színkód | színnév | rgb(r,g,b) például: #00a0e0, #f0f, white, blue, rgb(0,0,255) az elem színének megadása karakterformátumok egy helyen felsorolva font-family: [[betűcsalád neve | általános neve ], ...] betűcsaládok neveinek felsorolása betűk mérete font-size: abszolút méret | relatív méret | méret | százalék font-weight: normal | bold | bolder | betűk szélessége font: font-size font-family [ line-height ] [ font-style || font-variant || font-weight] lighter | 100 | 200 |... | 800 | 900 font-style: normal | italic | oblique text-decoration: none | [underline || overline || line-through || blink] a:active a:link a:hover a:visited betűk stílusa aláhúzás módja a szövegben a hiperhivatkozás különböző állapotaiban Láthatóság display: none | block | inline | list-item visibility: visible | hidden | inherit overflow: scroll | hidden | visible | auto a megjelenítés módja a láthatóság módja görgetősáv Pozícionálás top: méret | százalék | auto a pozíció típusa az objektum felső pozíciója left: méret | százalék | auto az objektum bal oldali pozíciója position: absolute | relative | static Pozícionálás, elhelyezés float: left | right | none clear: none | left | right | both clip: shape | auto z-index: sorszám | auto az objektumot a szöveg folyja körbe a körbefolyatás módja kivágás a körbejárási sorrend [Tab] 61 Egyedi elrendezésű weblapok Kulcsszó és paraméterei Jelentése További bekezdésformátumok és jellemzők letter-spacing: normal | méret betűköz line-height: normal | egész szám | méret | százalék sormagasság list-style: típusnév || pozíciónév || url(url-cím ) felsorolás list-style-image: url(url-cím ) | none felsorolásjel grafikája felsorolás helye felsorolásjel beépített alakjai list-style-position: inside | outside list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none cursor: auto | crosshair | default | hand | move | az egérmutató e-resize | ne-resize | nw-resize | n-resize | alakja az adott se-resize | sw-resize | s-resize | w-resize | objektum felett text | wait | help filter: filtertípus1 (paraméter1 , paraméter2 ,...) ... speciális szűrők További karakterformátumok @font-face {font-family: font-family, src url(url-cím); betűcsalád betűk stílusa index, hatvány betűk stílusa font-variant: normal | small-caps vertical-align: sub | super text-transform: capitalize | uppercase | lowercase | none CSS-fájl importálása @import url(url-cím ); !important például: color:red!important fontosság jelzése page-break-after: auto | always | left | right page-break-before: auto | always | left | right scrollbar-face-color: Színkód; scrollbar-shadow-color: Színkód; scrollbar-highlight-color: Színkód; scrollbar-3dlight-color: Színkód; scrollbar-darkshadow-color: Színkód; scrollbar-track-color: Színkód; scrollbar-arrow-color: Színkód; Nyomtatásnál laptörést kér. A weblap melletti görgetősáv egyes elemeinek színezése. (Csak IE 5.5 felett.) Tipp. Töltse le a honlapomról a kétoldalas, A4-es CSS.PDF fájlt, amelyet kinyomtatva hasznos formázási segédeszközhöz juthat. Ezután nem kell a szükséges CSS-jellemzőket keresgélnie, mert azokat sorrendben megtalálja. A cím: www.moricznet.hu 62 Honlap „Varázsló-forma” elrendezésben  Speciális szűrők alkalmazása (csak az Internet Explorer támogatja) Rögtön az elején tisztázzuk, hogy a jelenlegi (2003.03.) állapot szerint a felhasználók által használt webböngészők 95-97%-át az Internet Explorer teszi ki, ezért nem kell már szándékosan elkerülnünk azokat az egyedi jellemzőket, amelyeket csak a Microsoft böngészője támogat (lásd a 16. oldalon is). Mivel az internetet járva nagyon ritkán találkozhatunk az alábbiakban ismertetésre kerülő stílusjegyekkel, ezért használjuk bátran azokat, így különleges és egyedi honlapra tehetünk szert. A szűrők használatával kapcsolatban be kell tartanunk pár szabályt. Csak a következő elemeknél alkalmazhatók: body, table, td, tr, th, tbody, thead, tfoot, button, input, textarea, img, marquee, valamint a div és a span elemeknél. Főleg e két utóbbinál kötelező megadni a szélességi és magassági méretet vagy a „position:absolute” jellemzőt. A háromféle szűrőből kettő mozgóképes végrehajtású (Reveal és a Blend Transition Filter), míg egy a megjelenítésre van hatással (Visual Filter). Először nézzünk egy példát a vizuális jellemzők alkalmazására, amelyek megadása a következő módon történik a stílusdefinícióban a többi paraméter mellett.    Móricz Attila honlapja    34. ábra. A „glow()” filter alkalmazásának módja 35. ábra. A „glow” filter és két tükrözés használatának eredménye A stílus megadása ebben a példában közvetlenül az adott elemnél történt, mivel egyszerűbb így kipróbálni az új stílusjegyeket, de a gyakorlati alkalmazásnál a jellemzőket a stílusfájlba (CSS) írjuk be. A példa a „glow()” (sugárzás) fantázianevű szűrőt mutatta be, amely a szöveg körül színátmenetes árnyékolást alkalmaz, ami hasonlatos a „kisugárzáshoz”. A jellemző egyéni paramétereit a zárójelén belül kell felsorolni a megadott módon, míg a többi jellemzőt (a vízszintes és függőleges tükrözést ) szóközökkel elválasztva adhatjuk meg. 63 Egyedi elrendezésű weblapok A vizuális jellemzők fajtái Ezen tulajdonságok alkalmazása előtt nézzük meg, hogy mely elemekre alkalmazhatjuk ezeket a stílusjegyeket. Látni fogjuk, hogy a hosszabbnak tűnő felsorolás valójában a táblázatot említi, az űrlapelemeket, a képeket és a szövegeket, ugyanis ez utóbbiakat szoktuk div- vagy span-blokkokba zárni. Általában elmondható, hogy a szűrők a szövegekre és a képekre vannak hatással. Nem működik minden effektus minden elemnél, illetve nem ad olyan szép képet, mint várnánk, de így is eléggé széles lesz a különleges hatások választéka, különösen hogy ezeket JavaScript utasításokkal is módosíthatjuk. Ha pedig bizonyos események hatására egyes speciális effektus jellemzője megváltozik, akkor a látogató igencsak elámul a különleges hatás láttán. Fontos! Egyes jellemzők hatása tényleg egészen különleges lesz, de ez nem jelenti azt, hogy minden oldalon ezeket a hatásokat halmozzuk zsúfolásig, mert a látogató nem a mi weblapszerkesztési kunsztjainkra kíváncsi, hanem az oldalon elhelyezett tartalomban rejlő információra. Alpha: Beállítja a megadott átlátszóságot. Főként képeknél alkalmazzuk. Szö- vegnél is lehet, de nincs sok értelme, kivéve ha folyamatosan elhalványodó szöveget akarunk készíteni, és nem annak színkódjait változtatjuk meg, hanem az átlátszóságát. Szintaktika: Alpha(Opacity= 0..100, FinishOpacity= 0..100, Style=0..3, StartX=x, StartY= y, FinishX=fx, FinishY= fy) 36. ábra. Az első kép a halványított a második az eredeti Tipp. Bővítsük ki az onMouseMove eseménykezelőre írt függvényünket egy olyan résszel, amely például az opacity értékét 50 és 90 között mozgatja fel-le az egérmozgásnak megfelelően. Emlékezzünk vissza, milyen gyorsan változott az egérmozgást számláló változónk értéke! 64 Honlap „Varázsló-forma” elrendezésben Blur (párásít): A saját színével árnyékolja a szöveget a megadott irányba a kért erősséggel. A lenti példában a magassági adatot adtuk meg a pozíciója helyett. Ezért ha nem működik, akkor talán azt a jellemzőt hagytuk ki. Szintaktika: Blur(Add=0|1, Direction=0, 45...315 , Strength= 0, 1...) Móricz Attila honlapja 37. ábra. A 45-ös érték a jobb felső irányt határozza meg Chroma: A megadott színt átlátszóvá teszi. Elsősorban kevésszínű képeknél alkalmazhatjuk, ahol így az alatta lévő szöveg is látható marad, mintha a kép azon színe átlátszó (EN: Transparency) lenne. Több szűrőt is alkalmazhatunk, így több színt is átlátszóvá tehetünk. Fényképeknél nem igazán jó. Tipp. Töltsünk meg például egy 10x5-ös táblázatot azonos és egyszínű négyzetes képekkel, amelyekre rákattintva a színével egyező színű szűrésnek vetjük alá. Ezzel a kép eltűnik, és láthatóvá válik az alatta lévő kép vagy felirat. Az onMouseOut eseménynél pedig visszaállíthatjuk a kép eredeti állapotát, így csak emlékezetből lehetne összeállítani az alsó feliratot vagy képet. Szintaktika: Chroma(Color=színkód) 38. ábra. A kép mögötti mintacímek a megadott helyeken válnak átlátszóvá Glow (kisugárzás): Az objektum körül színátmenetes árnyékolást alkalmaz, ami a kisugárzáshoz hasonlatos. Szintaktika: Glow(Color=színkód, Strength=intenzitás: 1-.255) Példa: (Lásd a 63. oldalon a forráskódot és a mintaképet is.) 65 Egyedi elrendezésű weblapok Mask (álarc): A hátteret a megadott színnel bekapcsolva a feliratot átlátszóvá teszi. Ha a felirat által elfoglalt terület egyezik a kép méretével, akkor úgy jelenik meg, mintha a felirat az adott képből lenne kivágva. Elsősorban kövérebb betűtípusoknál mutat előnyösen, de ott előfordulhat, hogy túl nagy helyet foglal el a betűtípusban meghatározott sortávolság. Szintaktika: Mask(Color= Színkód) www●moricznet●hu 39. ábra. A kép feletti csík éppen a feliratnál átlátszó Shadow (árnyék): A szöveget a paraméterben megadott színből kiinduló elhal- ványodó árnyékkal díszíti. Az irány 45 fokos lépésekben adható meg pozitív vagy negatív (45-tel osztható) értékekkel. Szintaktika: Shadow(Color=Színkód , Direction=Irány:± 0, 45..315 )  ► Windows-tippek ◄ 40. ábra. A szépen elhalványodó árnyék jól mutat a jeleken is 66 Honlap „Varázsló-forma” elrendezésben Wave (hullám) : A feliratot a paraméterekben megadott módon hullámzó ha- tással díszíti fel. Képeknél, gomboknál nem mutat jól, de feliratoknál annál inkább. Csak nagyobb betűméretnél alkalmazzunk nagyobb hullámzást, különben olvashatatlanná válik a szöveg. Szintaktika: Wave(Add=0|1, Freq=db , LightStrength=fényerő:0..100 , Phase=0..100, Strength=nagyság: 0, 1,2...)    Illuminált    A Freq paraméter hatására adott számú fénycsík jelenik meg a feliraton, ami a hullámzó hatást erősítheti, de attól függetlenül is használható önállóan. Szabályozhatjuk a teljes felirat fényerejét a LightStrength paraméterrel, míg a Phase a hullám indulásának fázisát határozza meg (a fázis 0-360 fok között értendő, ahol a 0-100-as érték a 360 fok valahány százalékát fejezi ki). 41. ábra. A hullámok különféle fajtáinak változatos hatása a feliratokon A további hatások nem rendelkeznek paraméterrel, és képre, szövegre egyaránt alkalmazhatók, amit jelentésük ismeretében könnyen beláthatunk. Általában más hatásokkal együtt alkalmazzuk, de akár egy fényképeket átalakító hasznos kis weblapos szolgáltatást is felépíthetünk a segítségükkel. FlipH, FlipV, Gray, Xray, Invert, Light: A jelentéseik sorrendben a következők: Tükrözés vízszintesen, függőlegesen, megjelenítés szürkeárnyalatos és fekete-fehér formában (egyformák), és inverz megjelenítés. Az Light (fényforrás) elem ugyan paraméter nélküli, de további JavaScriptből meghívható függvényekkel állíthatjuk be az objektumra vetülő fény jellemzőit. Szintaktika: STYLE="Filter: FlipH FlipV Gray Xray Invert Light" Tipp. Érdekes feliratokat készíthetünk például a tükrözésekkel, hiszen nem általános, hogy weblapokon a feliratok fejtetőn jelenjenek meg. 67 Egyedi elrendezésű weblapok Az alábbi példában azonban egy hiba is megjelenik, amely kissé behatárolja az egyes szolgáltatások alkalmazhatóságát. Az első kép az eredeti, a második tükrözött és invertált módón jelenik meg, míg a harmadikon a hullámzást próbáljuk meg alkalmazni, de a bal oldalon a hatás nem jól jelenik meg. Ezt még a balra történő elhúzással sem lehet korrigálni, ami pedig a feliratok esetében jól beválik (például egy szóköz elhelyezése a felirat előtt). 42. ábra. Különféle hatásoknak kitett képek * * *** 43. ábra. Az előző képsor HTML forráskódja Az előzőekben megismert hatások különlegessége tovább fokozható, ha írunk hozzá JavaScript programokat, amelyek a különböző események bekövetkezésekor valamely szűrő paraméterét módosítják. Például: 44. ábra. Egérkattintásra elhalványítható és visszasötétíthető kép Most az egyszerűség kedvéért a programokat közvetlenül a HTML-kódba írjuk. Először a tul objektumba helyezzük a tulajdonságot, hogy rövidebben hivatkozhassunk rá, majd az értékét csökkentjük vagy növeljük, és még az állapotsorba is kiírjuk a jobb megértés érdekében. Az értékek változtatására a jobb és a bal egérgombbal kattintsunk. A helyi menüt a „return false” tiltja le. 68 Honlap „Varázsló-forma” elrendezésben  Animációk létrehozása a szűrők segítségével Az alábbi stílusjellemzők segítségével feliratokat vagy képeket tudunk animációval megjeleníteni. Az alábbi ábra néhány ilyen animációt sejtet, mivel a könyvben mozgás közben mégsem mutathatom be azokat. Az első ferdén oldalról átlapozva vált a következő feliratra, míg a mellette lévő képpontonként tűnik el. A harmadiknál középről kifelé téglalapos alakban történő megjelenést vagy elrejtést láthatunk, és az utolsónál egy váltott téglalaphálós képváltás részlete látható. 45. ábra. Néhány animáció pillanatfelvétele a váltás közben A megvalósítás itt két lépésből áll. Először el kell helyezni a kívánt helyen az objektumot (például egy div-blokkot), amelynél megadjuk a revealTrans() filtert a paramétereivel együtt. Ezután ettől függetlenül valamikor el kell indítani egy JavaScript programot, amelyben az apply() , az innerText és a play() metódusok meghívásával az animációt elindítjuk. Ezt követően például a setTimeOut() segítségével újra meghívhatunk egy másik függvényt, amelyik ismét elindít egy újabb szöveg- vagy képváltást. revealtrans (feltáruló folyamat): A megadott objektumot feltárja, folyamatosan megjeleníti a semmiből. Két paramétere van, az egyik a végrehajtás idejét határozza meg, a másik a megjelenés típusát. Az időt „00.000” formátumban, másodperc és ezredmásodperc értékeivel kell megadni (gyorsítani nem, csak lassítani lehet a megjelenítésen). A típusa 0-23 értékek egyike lehet, amely a végrehajtás módját határozza meg. Szintaktika: revealtrans(duration=idő:00.000 , transition=típus: 0..23) 46. ábra. A felirat a két széléről közelít befelé az „f ” betű felé 69 Egyedi elrendezésű weblapok Az alábbi weblap tartalmaz két div-elemet az elválasztó vonalak között és a hozzátartozó szkriptet. A menet_1() szkriptet hívjuk meg először időzítve, majd az hívja a következőt és a harmadikat, amely meghívja a másodikat, így végtelen körfolyamatot indítanak el. Eközben a 2. függvény növeli a transition értékét, így mindig más animációval jelenik meg a felirat. A 2. és 3. szkript majdnem azonos, de a 3. bemutatja az objektum meghívását egyszerűbben. f 47. ábra. A folyamatos futás felvonultatja az összes animációs lehetőséget 70 Honlap „Varázsló-forma” elrendezésben Az elsőnél két oldalról fog a felirat megjelenni, ezért már a középre kerülő „f ” betűt eleve elhelyezzük a div-blokkban, amivel tovább növeljük a hatás különlegességét. Az benne az érdekes, hogy a két oldalról folyamatosan megjelenő betűkből úgy áll össze a szöveg, hogy a középső „f ” betűnél futnak össze. Ehhez persze meg kell nézni az animációt egyszer, és megfigyelni, hogy a feltárás hol ér véget, melyik betűnél. Ha egy betűt nem határozhatunk meg, akkor növeljük meg a kiírandó szöveg hosszát egy írásjellel vagy szóközzel, és akkor már biztosan összejön a bemutató. Két megjelenés között a kiírást mindenképpen változtassuk meg, mert azonos szöveget nem lehet egymás után animálni, hiszen abból nem látnánk semmit. Azért van szükség az innerText=”” utasításra, hogy a szöveget ki tudjuk cserélni egy másikra. Tipp. Ügyeljünk a megjelenítés idejére és a következő függvény indítására, nehogy hamarabb indítsuk el a következő animációt, mint az előző befejeződne, hiszen akkor nem marad idő annak elolvasására. Összefoglalásul: A lényeg az, hogy az apply() metódus rögzíti a kiindulási állapotot, majd az utána következő változtatás (innerText, innerHTML, src=”” stb.) nem történik meg azonnal, csak a play() hatására. Az animációt alkalmazhatjuk akár a teljes weblapra is a body elem segítségével (l. 125. o.)! blendTrans (beolvadó folyamat): A megadott objektumot folyamatosan meg- jeleníti. Az objektum egyben jelenik meg, de annak fényereje növekszik a láthatatlantól a teljesen látható tartományig. Egy paramétere van, amelyik a végrehajtás idejét határozza meg. Az időt „00.000” formátumban, másodperc és ezredmásodperc értékeivel kell megadni (gyorsítani nem, csak lassítani lehet a megjelenítésen). Szintaktika: blendTrans(duration=idő:00.000 ) 48. ábra. A felirat a semmiből tűnik elő és folyamatosan növekszik az erőssége Az ábrán az átalakított előző program eredménye látható, ahol most az „f ” helyett az „is effek” betűket írtuk ki, hogy jobban kiemelkedjen a meglévő és a megjelenő szöveg közti különbség. 71 Egyedi elrendezésű weblapok A szűrők összefoglalása táblázatba Kulcsszó és paraméterei Jelentése A vizuális jellemzők fajtái Alpha(Opacity= 0..100, FinishOpacity= 0..100, Style=0..3, StartX=x, StartY= y, FinishX=fx, FinishY= fy) átlátszóság Blur(Add=0|1, Direction=0, 45...315 , Strength= 0, 1...) párásítás körben Glow(Color=színkód, Strength=intenzitás: 1-.255) kisugárzás (árnyék) Chroma(Color=színkód) Transparency Mask(Color= Színkód) álarc (átlátszó csík) Shadow( Color=Színkód , Direction=Irány:H 0, 45..315 ) árnyék elhalványodó Wave(Add=0|1, Freq=db , LightStrength=fényerő:0..100 , Phase=0..100, Strength=nagyság: 0, 1,2...) hullámosít FlipH, FlipV, Gray, Xray, Invert, Light tükrözés, szürkeárnyalatossá tesz, színt cserél, megvilágít. Kulcsszó és paraméterei Jelentése Az animációk fajtái revealtrans( duration=idő:00.000, transition=típus: 0..23) feltáruló folyamat az állapot rögzítése id.innerText=”” id.innerHTML=”” id.src=”” ... új tartalom megadása id.filters.revealTrans.apply() id.filters.revealTrans.play(00.00) az animáció lejátszása blendTrans(duration=idő:00.000) beolvadó folyamat az állapot rögzítése id.innerText=”” id.innerHTML=”” id.src=”” ... új szöveg megadása id.filters.blendTrans.apply() id.filters.blendTrans.play(00.00) 72 az animáció lejátszása Honlap „Varázsló-forma” elrendezésben JavaScript: Látványos elemek – elemek látványa Az előzőek során már többször hivatkoztam arra, hogy egyes funkciók megvalósításához szkriptet kell írnunk. Elsősorban azokról fogunk most szólni, amelyek rövidek, egyszerűek és hasznosak a weblapunkon, és alkalmazásukkal egyes feladatok megoldása lényegesen egyszerűbbé vagy megoldhatóvá válik. A weblap megjelenésének késleltetése Talán kicsit furcsának tűnhet, hogy miért kellene késleltetnünk a weblap megjelenését, amikor éppen az a célunk, hogy az minél hamarabb megjelenjen. Egy dolgot viszont nem befolyásolhatunk, és ez a látogató rendelkezésére álló sávszélesség. Ha neki csak lassú kapcsolata van, akkor az oldalunk lassan fog megjelenni, és lassan nyeri el teljesen a végleges képét. Mivel ezen nem tudunk változtatni, ezért tereljük el a figyelmét valamivel, amíg az oldalunk betöltődik. Az elterelő hadműveletet végző weblap legyen a lehető legkisebb, de mégis hasznos, és ne azt a szokásos és idegesítő „Loading 1%...100%” vagy „Betöltés 1%...100%” üzenetet írja ki, mert arra a türelmetlen látogató azonnal [Alt]+[F4]-gyel fog válaszolni. Helyette próbáljuk ki az alábbi trükköt. A nyitólapunk tartalmazzon egy JavaScript programot, amely a betöltődéskor elindul. Ez nyisson egy új ablakot teljes képernyős módban, majd az időzítő felhasználásával jelenítsen meg egymás után 1-2 másodpercenként feliratokat, például a céggel kapcsolatos újdonságokból valamit. Ha ezt kiegészítjük még egy-két látványos programmal, ami a felirat vagy a háttér színét átváltja, akkor a felhasználó érdeklődéssel fogja nézni a művet, de nem sokáig. Vigyázzunk arra, nehogy visszaéljünk a látogató türelmével. Ezt a trükköt csak 5-10 másodpercig játszhatjuk el káros következmények nélkül, majd zárjuk be ezt az ablakot automatikusan. Ekkor a háttérből előbukkan az eredeti weblap, amely tartalma időközben bizonyára betöltődött, így azt a látogató olyan formájában láthatja, ahogyan elterveztük. Tipp. Ha az oldalunk hosszabb lenne, akkor a kevésbé fontos, például a hirdetési képeket csak később töltsük le. Ehhez a weblap elkészülte után a HTMLforrásból töröljük ki a képek forrását (SRC paraméter), és időzítsünk pár másodperccel későbbre egy alprogramot, amely elvégzi a képek betöltését. Az előző tipphez tudnunk kell, hogy a webböngésző először lehívja a megadott HTML-fájlt, illetve a HEAD-részben megadott stílusfájlt és JavaScript programfájlt, majd megjeleníti azt. A weblap törzsében (BODY) hivatkozott ké73 Egyedi elrendezésű weblapok peket csak ezután kezdi el letölteni, mégpedig egyszerre. Könnyen beláthatjuk, ha az oldalon nagyon sok apró pici kép található, akkor azok nagyon lassan fognak megjelenni, mert a rendelkezésre álló sávszélességet teljesen lefoglalják. Ha viszont a kevésbé fontos képek elérhetőségét kivesszük, akkor azok nem tudnak letöltődni az első menetben, így a weblap felső részén lévő, és elsőként megjelenő képek gyorsabban meg tudnak jelenni. Mivel a látogató először ezt fogja elolvasni, ezért a további képek letöltését ráérünk ezután elkezdeni. Ennek eredményeképpen amíg a látogató a felső részt olvassa, addig az alsó felén lévő képek is letöltődnek, és nem fogja azt látni, hogy valahol éppen akkor jönnek le a képek, amikor ő azt már meg akarja tekinteni. Következésképpen a látogató elégedett lesz, legalábbis ami a megjelenítést illeti.  A takarólap elkészítése Az előzőekben leírtak szerint a takarólapnak nagyon egyszerűnek, látványosnak és a figyelmet lekötőnek kell lennie. Ehhez hozzunk létre egy új weblapot a kedvenc szerkesztőprogramunkban, amelyben helyezzünk el egy táblázatot a lent látható jellemzőkkel (méret: 1x7-es; magasság, szélesség 100%). Az első és utolsó cellát igazítsuk középre, magasságuk legyen 45-45%, így a közbülsők a képernyő közepére szorulnak, és magukra irányítják a figyelmet. takar.html Eljött a pillanat... Megjelent: Móricz Attila "Tippek a CD-íráshoz" című könyve! 49. ábra. A takarólap tartalma a program nélkül 74 Honlap „Varázsló-forma” elrendezésben A cellák közül a közbülső ötnek adjunk sorszámozott azonosítót (id=neve1), mert azokra hivatkozva fogjuk megjeleníteni. Az egyszerűség kedvéért emeljük ki a szöveget például „Címsor 1” stílussal (h1), amelynek a formátumjegyeit a fejlécben elhelyezendő 92. ábra. Minden létező tulajdonság a felszínre kerül 129 Egyedi elrendezésű weblapok A felfedez.html fájl tartalmaz egy olyan szövegmezőt, amelybe a lekérdezni kívánt objektum nevét írjuk be. Ezt a mezőt a könnyebbség kedvéért már előre kitölti az input mező value értékével, amivel az őt meghívó weblapra hivatkozik. Így a megjelenő tartalom a hívó weblap tulajdonságait mutatja, mintegy monitorozza azokat minden kattintásunk után. A weblapunk másik szövegmezője interaktivitást tesz lehetővé azáltal, hogy a beírt utasítást azonnal végrehajtja. Az alapértelmezett értéke egy példát mutat erre, és ha a Beállít gombra kattintunk, akkor a hívó weblap címsorát fogja megváltoztatni. Ehhez úgy helyezzük el a weblapokat, hogy a hívóét is lássuk a háttérben, így a gombra kattintással egy időben azonnal láthatjuk a változást a címsoron. Ha a példa túl bonyolult lenne, akkor írjuk be például a szövegmezőbe az alert(“Szia.”) utasítást, és kattintsunk a gombra. Meg fog jelenni egy üzenetablak az utasításnak megfelelően. Használjuk ezt a szövegmezőt úgy, mint egy JavaScript parancssort, ahol a beírt utasításaink és függvényhívásaink azonnal végrehajtódnak. Most nézzük meg, hogy a nyitólapunk milyen jellemzőkkel rendelkezik. (A lista tartalmaz pár elemet, ami önnél hiányozni fog. ) felfedez .html eredménylistája window.opener.document.activeElement = [object] window.opener.document.alinkColor = #0000ff window.opener.document.all = [object] // Ezen keresztül haladjunk tovább! window.opener.document.anchors = [object] window.opener.document.applets = [object] window.opener.document.bgColor = #006699 window.opener.document.body = [object] window.opener.document.childNodes = [object] window.opener.document.cookie = window.opener.document.defaultCharset = windows-1250 window.opener.document.dir = window.opener.document.documentElement = [object] window.opener.document.domain = window.opener.document.embeds = [object] window.opener.document.fgColor = #000000 window.opener.document.fileCreatedDate = 02/18/2003 window.opener.document.fileModifiedDate = 02/20/2003 window.opener.document.fileSize = 4497 window.opener.document.fileUpdatedDate = window.opener.document.forms = [object] window.opener.document.frames = [object] window.opener.document.images = [object] window.opener.document.lastModified = 02/20/2003 17:57:10 window.opener.document.linkColor = #0000ff window.opener.document.links = [object] window.opener.document.location = file:///E:/Dokumentumok_XP/webdesign/web3/index.html 130 A „Színes téglalapok” alkalmazása window.opener.document.mimeType = HTML-dokumentum window.opener.document.nameProp = Könyv: Mobiltelefon a kezekben window.opener.document.onafterupdate = null window.opener.document.onbeforeeditfocus = null window.opener.document.onbeforeupdate = null window.opener.document.oncellchange = null window.opener.document.onclick = null window.opener.document.oncontextmenu = function ablak() { alert('Kérem, a bal gombbal kattintson!'); return false; } window.opener.document.ondataavailable = null window.opener.document.ondatasetchanged = null window.opener.document.ondatasetcomplete = null window.opener.document.ondblclick = null window.opener.document.ondragstart = null window.opener.document.onerrorupdate = null window.opener.document.onhelp = null window.opener.document.onkeydown = null window.opener.document.onkeypress = null window.opener.document.onkeyup = null window.opener.document.onmousedown = function klick() { if (event.button==2) ablak();} window.opener.document.onmousemove = null window.opener.document.onmouseout = null window.opener.document.onmouseover = null window.opener.document.onmouseup = null window.opener.document.onpropertychange = null window.opener.document.onreadystatechange = null window.opener.document.onrowenter = null window.opener.document.onrowexit = null window.opener.document.onrowsdelete = null window.opener.document.onrowsinserted = null window.opener.document.onselectstart = null window.opener.document.onstop = null window.opener.document.parentWindow = [object] window.opener.document.plugins = [object] window.opener.document.protocol = File protokoll window.opener.document.readyState = complete window.opener.document.referrer = window.opener.document.scripts = [object] window.opener.document.security = Az ilyen típusú dokumentum nem rendelkezik ... window.opener.document.selection = [object] window.opener.document.styleSheets = [object] window.opener.document.title = Könyv: Mobiltelefon a kezekben window.opener.document.URL = file://E:\Dokumentumok_XP\webdesign\web3\index.html window.opener.document.vlinkColor = #800080 window.opener.document.calc_1 = [object] window.opener.document.calc_2 = [object] window.opener.document.calc_3 = [object] window.opener.document.calc_5 = [object] 93. ábra. A nyitóoldal összes lehetséges jellemzője 131 Egyedi elrendezésű weblapok A további weblapok létrehozása Az előző fejezetekben számos érdekes és különleges weblapelemmel ismerkedhettünk meg, amelyekkel felvértezhetjük az oldalainkat. Ezeket az elemeket a belső oldalainkon arányosan osszuk el, és ne „egy lapra tegyünk fel mindent”, mert az nagyon el fog ütni a többitől. Amennyiben minden oldalra tervezünk egy-egy különleges hatást, úgy át kell gondolnunk a szkriptek és az egyedi stílusok elhelyezését. Tehetünk mindent külön fájlokba, ahogyan azt eddig is alkalmaztuk, de felmerül a kérdés, hogy pársoros programok, és néhány egyedi stílus miatt miért készítsünk külön fájlokat? Vajon érdemes-e ennyire elaprózni az egészet, vagy hagyjuk inkább az összes fájlt és stílust egy-egy csatolt fájlban. Az önálló fájlok olyan rövidek lesznek, hogy tovább tart lehívni és feldolgozni azokat, mint letölteni, ezért érdemesebb inkább a fájlon belül elhelyezni, így a weblap önállóan is megállja a helyét. A külön fájlok másik hátránya, hogy sok lehívást kell indítani hozzá a webböngészőnek, ami mindenképpen lassítja a megjelenítést bármilyen kicsik legyenek a fájlok. Megtarthatjuk egy JS- és egy CSS-fájlban az összes szkriptet és stílust, de így a fejlesztésnél lesznek nehezen áttekinthetők a fájlok. Előnye viszont, hogy az első oldal lehívásakor már elérhetők lesznek azok a segédfájlok, amelyek minden további weblaphoz szükségesek. Ha pedig a nyitólapon a további oldalakhoz szükséges nagyobb képek úgyszintén lehívásra kerülnek, akkor azok megjelenítése sokkal gyorsabb lesz. Ezek szellemében mindenkinek magának kell eldöntenie, hogy melyik módszert részesíti előnyben, az egyszerűbb és áttekinthetőbb fejlesztést, vagy a gyorsabb letöltést és megjelenítést. Az oldalak felépítését tekintve olyan lehetőségünk is van, hogy bizonyos részen olyan változásokat eszközölünk, amellyel egy belső területre irányítjuk a felhasználót. Ha például a bal oldali kép helyett a további oldalakon egy képes megjelenésű menüt helyezünk el, akkor azok fogják egy bizonyos témánál az altéma hiperhivatkozásait tartalmazni. Ezután az altémák között nem a felső soron lévő linkekkel fogunk váltani, hanem a bal oldaliakkal. Tipp. Használjunk képszerkesztő programot, és az egyik bal oldalra kerülő képet halványítsuk el, majd az előterébe helyezzük el a témák neveit feliratként. Ezután daraboljuk fel (slice) a képet, így könnyebb lesz linkeket hozzárendelni. Ha a bal oldali hiperhivatkozások oszlopában további altémákat is meg kell jelenítenünk, akkor már bonyolultabb lesz a helyzet, mert azok dinamikusan előbukkanhatnak, vagy statikusan is elhelyezkedhetnek a következő oldalon. 132 A „Színes téglalapok” alkalmazása +Grafikai fogás: Képes oldalmenü készítése Számos lehetőséget vizsgáltunk már meg, hogy a bal oldali kép milyen funkciókat vehet fel. A sima állóképtől kezdve a folyamatosan változó képekig bezárólag sokféle lehetőséget átnéztünk. Egyes oldalakon előfordulhat az is, hogy ez a kép feliratokat kap, és oldalmenüként dolgozik tovább. Ilyenkor a különböző részei egyenként átválthatnak egy másik képre, amivel jelzik a látogatónak, hogy a kép azon része gombként működik, és hiperhivatkozást rendeltünk hozzá, amellyel másik oldalra válthat. Az alapkép összeállítása Macromedia Fireworks FX programmal Indítsuk el a programot, és hozzunk létre egy új üres rajzlapot a [Ctrl]+[N] billentyűkombinációval, majd adjuk meg a méreteket, amelyek a meglévő képeink méretével egyezzenek meg. Ezután a meglévő képeinkből fogunk párat importálni. Nyomjuk meg a [Ctrl]+[R] billentyűket, és válasszuk ki a megfelelő képfájlt a tallózóablakban. Az ablak bezárása után az egérmutató megváltozik – még ha ez nem is látszik rajta azonnal –, és ezzel jelöljük ki a beszúrás helyét. Kattintsunk a tervezett hely bal felső sarkánál, és húzzuk az egérmutatót jobbra lefelé. Az így beszúrt képet később átméretezhetjük, áthelyezhetjük, így ne problémázzunk azon, ha nem a megfelelő helyre került a kép. Tipp. Mivel több képből álló montázst akarunk létrehozni, ezért érdemes létrehozni egy jóval nagyobb üres rajzlapot, és oda importálni a képeket. Itt végrehajthatjuk a képen a különböző műveleteket, majd a vágólapon keresztül átmásolhatjuk a kész képet a végleges rajzlapra. Azon sem kell problémáznunk, ha egy-egy műveletsorozat nem a várt eredményt hozza, mert a műveletek visszavonhatók (Undo [Ctrl]+[Z]-vel). Az is jó megoldás, ha az egész képet kitöröljük, újra importáljuk, és elölről kezdjük az egészet. Érdemes kipróbálni az összes effektust, így idővel tapasztalatot szerezhetünk arról, hogy az egyes hatások milyen megjelenésbeli változást idéznek elő, és melyiknek milyen helyzetben vehetjük hasznát. Egyesek a képeken mutatnak jól, míg másokat feliratokon alkalmazhatunk igazán. A következő elkészítendő képpel már találkoztunk az ábrákon, így most ennek bemutatása következik. Három könyvborítót ábrázoló képet importálunk be, amelyeket tetszőleges szögben elforgatunk, alkalmazunk rajtuk egy-két effektust, majd elmentjük külön fájlba. Erre azért lesz szükség, mert a további műveleteknél az elemek egysége megszűnik, így nem marad szerkeszthető. 133 Egyedi elrendezésű weblapok Kattintsunk az egérmutatóval az egyik képre, és nyomjuk meg a [Ctrl]+[T] billentyűkombinációt, mire megjelennek a fogók a kép körül. Ezeket megfogva a kívánt irányba méretezhetjük át a képet. Ha az egérmutatót a képen belülre mozgatjuk, akkor azt elhúzhatjuk, míg ha kívülre, akkor elforgathatjuk tetszőleges szöggel. 94. ábra. Egyszerű képmontázs készítése Ha pontos elképzelésünk van a transzformáció értékeiről, akkor a [Ctrl]+[Shift]+[T]-t nyomjuk meg, és a műveletet számadatokkal megadva végezhetjük el. További műveleteket találunk még a Modify / Transform almenüben, ahol a billentyűparancsokkal jelzett műveletek ugyancsak elérhetők. Mentsük el két különböző néven az elkészült képet a Macromedia alapértelmezett formátumában (png), majd a másodikon folytassuk a műveletek sorát. Ha erre a képre önállóan is szükségünk lenne valamilyen más képformátumban, akkor a File / Export művelet áll a rendelkezésünkre. Előbb azonban kattintsunk a jobb felső sarokban az Optimize oldaltábla nevére, mire az megnyílik, és itt adjuk meg, hogy milyen képformátummal akarunk dolgozni, milyen minőségben és jellemzőkkel mentsen. Ezután exportáljuk a [Ctrl]+[Shift]+[R]-rel, mivel az ottani párbeszédablakban a típus kiválasztására nincs lehetőség.  A háttérképek létrehozása Folytassuk tovább a munkát képpel, és egyesítsük a különálló képobjektumokat. Válasszuk ki a bal oldali eszköztáron a fekete nyilat (Select / Pointer tool), majd nyomjuk le a [Shift] billentyűt, és kattintsunk egyesével a képeken egyet. Ennél egyszerűbb, ha előbb a kép mellett kattintunk egyet egy üres területen, majd megnyomjuk a [Ctrl]+[A]-t (a programokban általában: Select All funkciónak felel meg). Tipp. Egérhez szokott felhasználók számára talán zavaró, hogy mindig a billentyűparancsokra hivatkozok, de sokkal egyszerűbb ezeket használni, mint a menükben keresgélni, mivel ott elég nagy a zsúfoltság. A kijelölést egyesítsük a [Ctrl]+[G]-vel (Group), és ezután felhasználunk pár effektust. A célunk az, hogy a képet úgy elhalványítsuk, hogy az alkalmas legyen feliratok hátterének. Az ilyen kép pedig legyen pasztelles és homályos. 134 A „Színes téglalapok” alkalmazása Ha ugyanis olyan képet hozunk létre, amely tisztán kivehető részeket tartalmaz, akkor az zavarni fogja az előtérben lévő feliratok olvashatóságát. Nekünk ez nem célunk, ezért a képet elhalványítjuk és homályossá teszzük. Mivel az effektusokat a kép egészére értelmezzük, ezért kellett egyesíteni, azonban a hatások alkalmazása előtt a program ezt háttérbe kerülő egyetlen bitképpé fogja alakítani. Ezért kellett a kompozíciót előbb külön PNG-fájlba elmenteni, mert így az alapkép szerkeszthető marad a másolatfájlban. Válasszuk ki a Filter / Blur / Guassian blur... menüpontot, és a megjelenő párbeszédablakban húzzuk el a csúszkát például a 3-as értékig. Mivel be van kapcsolva a Preview kapcsolómező, ezért azonnal látni fogjuk az eredményt a csúszka mozgatásakor. Ezután a Filter / Adjust Color / Brightness Contrast... parancsot válasszuk ki, és a fényerőt emeljük, a kontrasztot csökkentsük, amire olyan képet kapunk, amely sejteti ugyan, hogy mit ábrázolt eredetileg, de pontosan már nem vehető ki. Ezzel elértük a célunkat, mert a kép kellően pasztelles és homályos, így háttérnek alkalmas. Ismét mentsünk egyet a [Ctrl]+[S]-sel. Most készítsük el a másik képet, amelyik segítségével azt érjük el, hogy a gombokra mutatva a kép világosabb színben tűnik fel. Ehhez jelöljük ki a képet, másoljuk le a vágólapra a [Ctrl]+[C]-vel, majd kattintsunk a jobb oldalon a Frames oldaltábla nevére (mire az megnyílik). Az itt található „[+]” gombbal hozzunk létre egy új képkockát (frame), és szúrjuk be a [Ctrl]+[V]-vel a vágólapról a képet. Ennél a képnél ismét válasszunk egy menüpontot a Filter / Adjust Color almenüből, és fényesítsünk a képen, vagy változtassunk egy kicsit az alapszínén, hogy a képek közötti váltás látható legyen. Mindvégig arra ügyeljünk a legjobban, hogy a képet ne méretezzük át, és ne mozdítsuk el. Kattintsunk a jobb oldali Layers oldaltábla nevére, mire az megnyílik. Eddig nem beszéltünk róla, pedig nagyon hasznos segédeszköz rejlik e panelen. Láthatjuk a képünket „bitmap” néven (nálam „alapkép”) a háttér nevű rétegen, amely előtt egy „szem” ikon jelzi, hogy éppen meg van jelenítve. Kattintsunk a szemre ( ), és a háttérképünk azonnal eltűnik, de ismételt kattintásra megjelenik. A Layer1-re kerülnek a feliratok és egyéb objektumok, míg a Web Layeren a weblappal kapcsolatos szeletelési információk jelennek meg. A ceruza az éppen szerkesztett réteget jelzi. 95. ábra. A rétegek kezelése 135 Egyedi elrendezésű weblapok  A feliratok elkészítése és elhelyezése A továbbiakban az a célunk, hogy a képből feliratos gombokat készítsünk. Ehhez feliratokat kell elhelyeznünk a háttéren, majd szeletekre kell vágnunk a képet, és meg kell adnunk, hogy milyen csereképet jelenítsen meg, amikor egy ilyen „gombra” rámutatunk. Mivel webes alkalmazásról van szó, ezért hozzá kell még rendelnünk a hiperhivatkozásokat, az esetleges alternatív szövegeket (a buboréksúgókat), és más műveleteket. A feliratok elkészítéséhez kattintsunk a bal oldali eszköztáron az „A” gombra, majd a szövegkurzorral készítsünk egy kijelölést. Ez egy kicsit szokatlan, de ez a módja. Az így létrejött keretbe írjuk be a feliratot, majd az [Esc]kel kiléphetünk belőle. Kattintsunk az eszköztáron a fekete nyílgombra, majd formázzuk meg a feliratot tetszés szerint. Ehhez használjuk a lenti Properties ablaktáblában található eszközöket. 96. ábra. A jellemzők megadásának számos eszköze érhető el A Microsoft programokhoz szokott felhasználóknak talán szokatlan ez a megadási forma, mivel nincs OK/Mégse gomb. Ha egy mezőbe beírunk egy számot, akkor utána nyomjunk [Enter]-t, vagy kattintsunk a képen kívüli szürke területre, valamint a [Tab]-bal a másik mezőre lépve is érvényesíthetjük az új értéket. Ez utóbbi nem mindig jó megoldás, mert nem tökéletes a mezők sorrendje a programban. Tipp. A feliratot ne találomra helyezzük el, hanem pontosan adjuk meg a méretét és a helyzetét. Ha például hat feliratot teszünk fel, akkor osszuk el a magasságot hatfelé, és azt írjuk be a „H:” mezőbe. A szöveg szélessége egyezzen meg a kép szélességével, így egységesek lesznek a feliratok. A felirat elkészülte és formázása után másoljuk le a [Ctrl]+[C]-vel, majd azonnal illesszük be még 5-ször (6 felirat esetén). A feliratok egymás felett fognak elhelyezkedni, ezért nem látjuk azokat, de a Layer1-en könnyen kijelölhetjük mindegyiket egyesével. Előbb jelöljük ki, majd adjuk meg a magassági (Y) koordinátáját, amivel szépen egymás alá helyezhetjük a feliratokat. Miután mind a helyére került, módosítsuk egyesével a feliratokat a kívánt szövegre. 136 A „Színes téglalapok” alkalmazása A váltófeliratok létrehozása és megformázása Miután elkészültek a felirataink, kattintsunk egyet a Layer1-re, amivel az összes feliratot egyszerre ki tudjuk jelölni. Másoljuk le a vágólapra, váltsunk át a másik képkockára (Frame2), és szúrjuk be a feliratokat, de itt is vigyázzunk, hogy ne mozduljanak el. Itt található a váltóképünk, amelyen a feliratoknak ugyanott kell elhelyezkedniük, de a formátumukban kicsit különbözhetnek. 97. ábra. Váltás a képkockák között A váltóképre került feliratok formázásához kattintsunk a fenti képen megjelölt Effects [ ] gombra, és a megjelenő helyi menüből válasszunk egy effektust, például a Glow nevűt. Ekkor megjelenik egy kis beállító panel, de se fejléce, se semmi, szóval elég nehéz észrevenni, de ott lesz a gomb mellett, hiszen eddig nem volt ott, ebből vehetjük észre, hogy valamit be kellene állítani. A glow szó ismerős lehet, a szűrőknél (filters) már találkoztunk vele. Itt is ugyanazt az effektust találjuk, de itt valamivel több jellemzője állítható. Ilyen például az Opacity, Color, Offset, Width, Softness. Célszerű először kisebbre állítani az utóbbi három értékét (1-re), és csak egyesével növelni, hogy jól lássuk a különbségeket. Ha sötétebb az alapunk, akkor válasszunk világosabb árnyékszínt, és kisebb betűméret esetén csak óvatosan növeljük a méreteket, mert esetleg olvashatatlanná válik a szövegünk. A lényeg az, hogy átváltva a képet a háttér világosabbá váljon, és a felirat enyhén felvillanjon. Tegyünk egy próbát, amennyiben úgy gondoljuk, hogy végeztünk a feladatokkal. Kattintsunk a Properties feletti eszközsávon lévő fehér háromszög alakú (Play/Stop) gombra, mire megindul a „lejátszás”. Bár nem erre lett kitalálva a funkció, de azért láthatjuk a váltást. Ha jól dolgoztunk, akkor semmi nem ugrál, csak a világosabb és sötétebb háttér villog, illetve a feliratok széle villan fel, mivel a Frame2-n alkalmaztunk Glow effektust, a Frame1-en pedig nem. A felvillanás ugyanilyen lesz majd akkor is, amikor rámutatunk az egyik részére, és azon a téglalaprészen átvált a másik képre a webböngészőnk. Ezek után nincs más hátra, mint aktivizálni a gombokat, és elkészíteni (egy gombnyomással) a weblapot az animált menüvel. 137 Egyedi elrendezésű weblapok  A kép szeletelése és a webes funkciók beállításai Ismét jelenítsük meg a Layers oldaltáblát, és rejtsük el a Layer1-et a mellette lévő szemre ( ) kattintva, így nem lesz útban a szeletelés során. A másik helyes megoldás, hogy a szem melletti üres négyzetbe kattintunk egyet, mire megjelenik egy kis lakatikon ( ), ami jelzi, hogy zároltuk az adott réteget. Amennyiben ez segít a kijelölésnél, úgy ne rejtsük el, hanem zároljuk inkább a háttérrel együtt, és akkor látható marad, de biztonságban lesz. A szeleteléshez kattintsunk a Web / Slice Tool ( ) gombra, amelynek a sarkában felfedezhetünk egy kis háromszöget, ami egy helyi menü létét jelzi. Most ugyan nincs rá szükségünk, de kattintsunk úgy a gombra, hogy nem engedjük fel az egérgombot olyan gyorsan. Erre megjelenik egy kis helyi menü, amelyben további kijelölési formák közül választhatunk. Tipp. Nézzük meg a többi gombot is, amelyek sarkában látható a kis jelzés. Tegyünk próbát azoknál is, de ne változtassuk meg az alapértelmezett elemet, amelyik előtt ott látható a pipajel ( ). Ismét újabb eszközöket fedeztünk fel. A daraboló eszköz kiválasztása után jelöljük ki az első gombnak tervezett területet. Kattintsunk a hely bal felső sarkánál, és húzzuk az egérmutatót jobbra le, a hely jobb alsó sarkáig. Nem baj, ha nem vagyunk pontosak, mert az adatokat a lenti Properties ablaktáblában módosíthatjuk, sőt módosítanunk is kell! Egy 180x240-es kép esetén, ha 6 sávra osztjuk fel, akkor éppen 40 pixel magas lesz egy egység (6x40=240), és teljes szélességű. Ennél a példánál a kép mérete W:180, H:40, a koordinátái (x,y) pedig [0,0], [0, 40], [0, 80], [0, 120] stb. A téglalapok szépen össze fognak érni, így a darabolás pontos lesz. Ha jól dolgoztunk eddig is, akkor a feliratok pont jól helyezkednek el a keretekben. Miután a darabolással végeztünk, nézzünk a Layers oldaltáblára, ahol megjelent egy új réteg, a Web Layer, amely a darabok információit tárolja. Hasznos lesz ez is, mert ezt a réteget is tudjuk zárolni, elrejteni vagy egyben kijelölni az összes szeletet. Előbb azonban kattintsunk az első szeletre a fekete nyíllal, és a Properties ablaktáblában adjuk meg a Link, Alt esetleg a Target mezők értékét, vagyis rendeljünk a gombhoz hiperhivatkozást, buboréksúgót, és ha szükséges, akkor célhelyet (külön ablak, saját ablak stb.). Tegyük meg ezt sorban az összes szeletnél. Próbaképpen, most váltsunk a Frame1-re, ha nem ott lennénk, tegyük láthatóvá az összes réteget, és nyomjuk meg az [F12]-t. Megjelenik az alapértelmezett webböngésző programunkban a weblap, benne a képes gombokkal. 138 A „Színes téglalapok” alkalmazása Jelen állapotában csak az első képet fogjuk látni, de mindegyik gombrésznél a kéz alakú egérmutató jelzi a hiperhivatkozást, amit a felbukkanó buboréksúgó ugyancsak jelez. Térjünk vissza a Fireworks szerkesztőbe, és most végezzük el a cserekép hozzárendelését, amely már készen van, csak felhasználásra vár a Frame2-n. A kép átalakítása aktív gombokká: A cserekép hozzárendelése Jelöljük ki a fekete nyíl eszközzel az első szeletet egy kattintással, ahol látni fogunk a szelet közepén egy kört, amelyre rámutatva az egérmutató kézre vált. Kattintsunk a gombra, és a megjelenő helyi menüt nézzük végig. 98. ábra. A helyi menüből a legfontosabb funkciók azonnal elérhetők Válasszuk ki az Add Swap Image Behavior menüpontot, majd a felbukkanó párbeszédablakban a hozzá tartozó szeletet és az OK gombot. Ha a Frame2-n van a cserekép, akkor a kiválasztás ennyire egyszerű. 99. ábra. A cserekép a legegyszerűbben a Frame2-es párjára cserélhető 139 Egyedi elrendezésű weblapok Az előző műveletet még egyszerűbben úgy végezhetjük el, ha az Add Simple Rollover Behavior menüpontot választjuk ki, mert annál ez a művelet az alapértelmezett. Igazából az előző párbeszédablakra akkor van szükségünk, ha ettől eltérő végrehajtást akarunk megadni, mint például a cserekép a másik képkockán van, vagy egy külön fájlban. Tipp. A legegyszerűbb és leggyorsabb végrehajtáshoz kattintsunk előbb a jobb oldalon a Web Layer rétegnévre, és ezután válasszuk ki az egyik aktív pont helyi menüjéből az Add Simple Rollover Behavior menüpontot. Ez a művelet 3 egérkattintásból állt, és minden „gomb” átvált a csereképére. A csoportos kijelölésnek további előnyei vannak. Adjuk meg az Alt szöveget (a buboréksúgót), ha az minden képnél azonos lesz kis eltéréssel. A kis eltéréseket egyesével szerkesszük át utólag. A Link megadása szintén hasznos, ha az oldalak nevének közös részét itt írjuk be, és a weblapok nevei csak sorszámban vagy hasonlóan kis részletben térnek el. Például: konyv_01.html, konyv_02.html, konyv_03.html stb. Gondoljuk át, nem feltétlenül kell minden weblapnak olyan beszédes nevet adni, amelyből következik a tartalma. Tipp. A csoportos kijelöléssel adjuk meg az állapotsorba kerülő szöveget (Add Status Bar Message), ha az mindenhol egyforma lesz, például „A kiválasztott könyv ismertetése fog következni.”. Azonban kerüljük az olyan üzeneteket, amelyek egyértelműek, mint a „Kérem, válasszon a gombok közül egyet”, hiszen mi másért tettük ki azokat, ha nem azért, hogy válasszon egyet a látogató?! Nézzük meg a feliratok helyzetét, és ha szükséges, akkor az egész réteget kijelölve módosítsunk rajta. Ehhez zároljuk a Web Layer réteget ( ), esetleg rejtsük is el ( ), majd kattintsunk a Layer1-re, amivel az egészet egyben kijelöltük. Most nyomjuk meg a [] vagy [] nyilakat a billentyűzeten, és figyeljük a képet, illetve az „Y” értékét. Látni fogjuk, hogy az egészre vonatkozik most a koordináta, így akár értékkel is megadhatjuk az eltolás mértékét. Arra azonban ügyeljünk, hogy a másik képen (Frame2) is ugyanennyivel változtassunk. Miután elkészült a munkánk, kattintsunk a fenti gombra, és válasszuk ki a Dreamweaver / Export HTML menüpontot, majd adjuk meg a mentési helyet, esetleg állítsuk be a mentési jellemzőket. Nyissuk meg ezután a saját weblapunkat, keressük meg ott a C3-as cellát (	), és oda illesszük be az exportált fájl body részéből kimásolt táblázatot. A head-ben lévő JavaScript programot a saját vegyes.js fájlunkba másoljuk át. Ne felejtsük el a body onload=”...” részben található sort átmásolni a mindenAblakra() függvénybe, mivel ennek is végre kell hajtódnia a weblap lehívásakor. 140 Bővebb tartalomhoz „Szolid sávos” stílus Bővebb tartalomhoz „Szolid sávos” stílus Az eddigi weblaptervek olyan tulajdonosoknak szóltak, akik viszonylag kevés tartalmat akarnak az interneten közzétenni, de azt valamennyire stílusosan kívánják megjelentetni, és a szokásos „akasztófa”-formától eltérő módon. Azonban előbb-utóbb mindenkinél elérkezhet az idő, amikor már bővebb leírásokat, ismertetőket akar közzétenni, vagy gazdagabb a kínálata, és nem fér el az eddig megismert formákban. A most bemutatásra kerülő design továbbra is visszafogott lesz, de már megjelenítünk újabb elemeket, amelyek előrevetítik a további felemelkedés lehetőségét. Ennél a formánál ugyan van mód arra, hogy egészen bőséges kínálatot nyújtsunk, de mégse éljünk vissza vele, mert az már a design rovására menne, ami pedig nem lehet a célunk. 100. ábra. Az oldal mérete függőlegesen tetszőlegesen növelhető A weblap áll egy fejlécből, láblécből, és a kettő között a tartalmi területből. Ez a rész csak a jobb oldali fehér hátterű részre értendő, mert a bal oldali sávot mindig szabadon hagyjuk egy oldalhoz illő képnek, amely szépen illusztrálja a jellemzően szöveges oldalakat. A tartalom tetszőleges méretben növekedhet, akár oldalanként eltérő hosszúságú lehet, de nagy eltéréseket azért ne mutasson. A fenti ábrára benyúló másik kép olyan változatot mutat, ahol az amúgy szolid oldal erőteljesebb keretet kap, és ezzel hangsúlyozza ki az oldal határait. 141 Egyedi elrendezésű weblapok A tartalom rendszerezése Az előző oldali ábrán láthatjuk a navigációs lehetőségeinket, így ennek megfelelően osszuk fel a tartalmat. A bal oldalon 4-6 témacsoport fér el, majd a jobbra mellette lévő almenüben eggyel kevesebb, ha a mottót meghagyjuk a helyén. Ha azt jobbra elküldjük alulra vagy felülre, akkor annak a helyén is elfér még egy menüpont, így kb. 5x5 téma megjelenítésére van lehetőségünk. Egyet mindenképpen elmondhatunk, hogy e design alkalmazása esetén úgy kell csoportosítanunk a mondanivalónkat, hogy minden témacsoportban ugyanannyi altéma legyen. Ezek az altémák lehetnek egylaposak, de nyitólapja is lehet egy további csoportnak, azonban azzal a fenntartással, hogy a további linkeket a lap tartalmi részében helyezzük el. Az ilyen harmadrangú oldalakon célszerű egy „vissza” gombot vagy linket elhelyezni, mert különben csak a főmenü használatával lehetne visszajutni az előző oldalra, és az eléggé körülményes (továbbá a webböngésző „Vissza” gombjával, de ezt általában kerüljük). Tipp. A GYIK-típusú (Gyakran Ismételt Kérdések) oldalak egyszerűen készíthetők ezzel a módszerrel, mert csak a kérdések weblapján kell a linket elhelyezni az egylapos részletes útmutatóhoz, míg más esetben egy sereg weblap módosul egy újabb link felvételekor. Általánosságban rossz az a szemlélet, hogy minden oldalról, minden oldalt el kell érni. E hibás szemlélet szülötte az a gondolat, amely a FRAME-es oldalt előnyként tünteti fel, mert ott a külön keretben lévő tartalomjegyzék mindig elérhető minden oldalon. Ha valaki meg akar szüntetni egy ilyen keretes oldalt, akkor az a kényszerképzete támad, hogy továbbra is minden oldalon biztosítania kell az elérhetőséget minden új oldalra, és ez rengeteg módosítást jelent egy-egy újabb lap felvételekor. Ezt a téves elméletet még tovább erősíti a Microsoft FrontPage programja, amely seregnyi navigálási eszközt nyújt ezen hatalmas feladat elvégzéséhez. A jó megoldás az, ha ezt a feladatot kiiktatjuk, hiszen ezt csak úgy lehet jól megoldani, ha megszüntetjük. Amennyiben az a félelmünk támadna, hogy elkészítettünk pár új oldalt, de azt nem fogja megtalálni a látogató azonnal, akkor helyezzünk el linket minden új oldalhoz az „Újdonságok” lapon vagy akár a nyitólapon. Ebben az esetben viszont ügyeljünk arra, hogy az „Újdonságok” ne „régiségeket” tartalmazzanak, vagyis legalább havonta frissítsük. Fontos! Ha nincs mit kitennünk, akkor ne tartsunk fenn külön weblapot az újdonságoknak, pláne ne kiemelt helyen a navigációs rendszerben! 142 Bővebb tartalomhoz „Szolid sávos” stílus A navigációs blokk a weblap egyik legfontosabb eleme, de nem szabad, hogy uralja az egész weblapot. Legyen könnyen elérhető helyen, legyen jól áttekinthető, de mégse foglalja el az egész oldalt, mert nem az a legfontosabb, hogy navigáljon a látogató, hanem az, hogy a számára fontos információkhoz egyszerűen hozzájusson. Ehhez a böngészéshez a linkeket használja, de az ő tevékenysége ne a linkek használatában merüljön ki. Tipp. Ha nem tudjuk mindegyik főtémát megtölteni, altémákkal, akkor annál ne nyissunk külön almenüt. Ezt azonban jelezzük külön színnel vagy ikonnal, esetleg megjeleníthetünk egy apró jelmagyarázatot a linkre történő rámutatás alatt, de csak az első pár alkalommal, hogy ne legyen tolakodó ez a kioktatás. Amennyiben valamilyen felbukkanó buboréksúgót használunk egy-egy jelzés magyarázatára, úgy a súgó bezárása történhet animáció kíséretében, és ez egy olyan jelzésnél érjen véget, ami minden oldalon megtalálható. A Microsoft Office Segédhez hasonló kis segítőt készíthetünk mi is, bár erre csak akkor lenne szükségünk, ha sok feladatot tudnánk adni neki, különben feleslegesen állna ott minden lapon. Tipp. A tartalom rendszerezéséhez használjuk a Microsoft Word szövegszerkesztőnek a Vázlatnézetét, amelyben egyszerűen tudunk címsorokat áthelyezni, előléptetni vagy éppen lefokozni. Itt írjunk minden cím alá pár sornyi emlékeztetőt normál stílusú bekezdésbe, ami segít majd a későbbiek során a tartalom további részletezésében. Amikor a kiírandó információkat rendszerezzük, akkor nem szükséges minden áron az előre kitalált témanévhez felsorolni pár alcímet, mert lehet, hogy rossz volt a témaválasztás. Kezdjük írni címszavakban azokat a témákat, amelyeket közzé szeretnénk tenni. Az is előfordulhat, hogy a nagy lelkesedés eredményeképpen nem is tudunk annyi témát összeszedni, amennyivel egy ilyen típusú oldalt meg tudnánk tölteni. Ilyen esetben válasszunk egyszerűbb designt, mert azzal ízlésesebb oldalt tudunk készíteni, mintha egy hosszabb tartalomra tervezett formába erőltetjük bele a kevés szövegünket. Fontos! Soha ne hozzunk létre olyan weblapokat, amelyeken nem tudunk semmi fontosat írni, csak olyan témacsoportosító oldal szerepe lenne. Az ilyen oldalak rendszerint csak a további linkeknek adnak helyet, amit az előző szinten el lehetett volna helyezni. Így megspórolunk egy felesleges kattintást a látogatónak, és sok munkát magunknak. 143 Egyedi elrendezésű weblapok A weblap felosztása területekre Mint minden design elkészítésekor, most is vegyünk elő papírt és ceruzát, majd vázoljuk fel a leendő tervünket. Először nézzük át a témafelosztásunkat, és döntsük el, hogy mekkora területre lesz szükségünk a tartalom megjelenítéséhez, mert annak megfelelően kell megválasztani a táblázatunk szélességét. A tartalom az előző ábrán látható nagyobb fehér területre kerül, amelynek mérete lefelé tetszőlegesen növelhető, de legfeljebb 2-4 képernyő-magasságnyi méretre, mert senki nem szereti, ha sokat kell görgetni az oldalt. A bal oldali területre nem kerül semmi tartalmi elem, mert ott csak egyegy képet helyezünk el illusztrációs célból (nem kapcsolódó ábrákat). Ebből az is következik, hogy a tartalmi területnek a fejléchez képest legalább 2-3-szor nagyobbnak kell lennie, mert különben a fejléc túlzottan nagy lesz a tartalomhoz képest, ami pedig már zavaró lenne. A célunk az, hogy az eddigieknél valamivel nagyobb teret engedjünk a tartalomnak, de nem sokkal nagyobbat, hiszen a fejlécben 5 téma és a hozzájuk tartozó 4-4 alcsoport címei biztosítanak csak navigálási lehetőséget. Ne is növeljük meg ezeket az értékeket, mert azzal a fejléc magasságát növelnénk, ami már túlzott lenne a képernyőn elfoglalt nagyságát tekintve. Ezen feltételek betartása mellett rajzoljuk meg a weblapunk területét meghatározó táblázatot. C1: 140x30px  C2: 460x30px C3: 140x100px  C4: 460x100px A kép háttérképként jelenik meg.  (vagy , a felirat helyétől függően.) C5: 140px * 100%  C6: 460px * 100%  Függőleges méretét a tartalom hossza határozza meg, de minimum: 480 px lesz a bal oldali kép miatt. C51: 140px * 100% C52: 140x480px A kép háttérképként jelenik meg.  C99: 100% x 20px  101. ábra. A weblap elemeinek elhelyezkedése és méreteik 144 Bővebb tartalomhoz „Szolid sávos” stílus Az oldal felépítése nem túl bonyolult, így gyorsan elkészíthető. Nézzük végig az egyes cellákat, hogy melyik milyen funkciót tölt be, és miért van rá szükség. A fejlécben jelenik meg a navigálásra szolgáló menü és egy témához illeszkedő kép, amely csak a főtémáknál változik meg. A lap címének vagy a cég nevének kihangsúlyozása érdekében (C2) egy külön felső sort jelenítünk meg. Ennek bal oldali cellájában (C1) elhelyezhetünk kis ikonokat, amelyek a szokásos böngészőfunkciókat hívják meg, de a nyelvi váltásra ugyancsak ide tehetünk ki zászlókat az adott nyelvek szimbolizálására. Amennyiben nincsenek ilyen ikonjaink, illetve funkcióink, úgy ezt a cellát hagyjuk üresen. A főcímet semmiképpen ne helyezzük a fejlécben lévő fényképre, mert az túl zsúfolttá tenné ezt a részt. A weblapok közötti váltásra szolgáló hiperhivatkozásokat a C3-as cellában helyezzük el, ahol a téglalapos design részeként kis téglalapok fognak a linkek alapjául szolgálni és nem a feliratok. Ezekre kattintva jelenik majd meg az almenü a C4-es cella felett lebegve, amely a további hiperhivatkozásokat tartalmazza. Itt igazából kétféle választási lehetőségünk van, mert az animációval beúszó almenü a főmenü alatti részen ugyanúgy megjelenhetne, és akkor sokkal rugalmasabban lehetne bővíteni a listát, már amennyiben erre szükség van. A C4-es cellában egy képet akarunk megjeleníteni, amelyet a cella méretéhez igazítunk, illetve a kettőt célszerű összhangba hozni. Ha 640x480-as fényképeink vannak, akkor úgy válasszuk meg ezen oszlop szélességét, hogy ne jelentsen problémát a kép előállítása. A kép bal oldalát elhalványítjuk, így a felette megjelenő menü olvashatóságát sem zavarja. A megjelenő menü kap egy üvegszerű hatást adó háttérképet, így a mögötte lévő kép átlátszik rajta. A folyamatos elhalványítás mellett szól a kép másodlagos értéke, valamint az oldalkép is felfelé halványodik el vagy válik egyszínűvé, így a látogató figyelmét szinte a navigációs blokkra irányítja. Az oldal rugalmas magassági méretét a C5-ös cellában is támogatjuk. Itt a területet két cellára osztjuk, amelynek alsó felében elhelyezünk egy háttérképet, így felette megjelenhetnek a cég legfontosabb adatai (cím, e-mail cím, telefonszámok stb. ). A felső rész magassága 100% lesz, de az alsó cella magassága minimum a kép magassági méretével egyező, ezért a minimális méretet ez adja meg. Ezért az ide kerülő fényképet ennek megfelelően válasszuk meg. A lényegi tartalom a C6-os cellába kerül, amely az igényeknek megfelelően jellemzően szöveges jellegű. Nem kizárt a képek alkalmazása sem, de ne az legyen a meghatározó, mert különben a bal oldali és a fenti képek között a tartalomban megjelenő képek már zavaróan hatnának. Ilyen esetben hagyjuk el a bal oldali képet, de a tartalmi képek között is helyezzünk el némi szöveget. 145 Egyedi elrendezésű weblapok Az egyéni oldalsablon létrehozása Indítsuk el a kedvenc weblapszerkesztő programunkat, és válasszuk ki benne a táblázat beszúrását, vagy írjuk be az alábbi HTML-forrást. Valójában ez a tábla hét soros és két oszlopos (7x2-es), de az is elég, ha beszúrunk egy 2x2-es egységet, amelynek az alsó celláit egyesítjük. Ugyanis az ábrán vastaggal jelzett vonalat most egyesített és kis magasságúra állított cellasorral jelenítjük meg, amelynél a háttér színét állítjuk a lap hátterével azonos színűre, így egy vastag szegély látszatát keltjük. Azért elég, ha csak ennyit szúrunk be, mert meg kell adnunk a cellák stílusát legalább az elsőnél, amelyet utána a vágólapon keresztül másolni fogunk. Ha pedig így járunk el, akkor másolhatunk egész kódrészleteket, és legalább jobban átlátjuk a táblázatunk felépítését, ha mi építjük fel soronként. index.html részlete Erdei Vasutak Rt. 105. ábra. A navigációs blokk kialakítása táblázatokkal A linkek táblázata kapta a „tabla_link” nevet, amely a rendelkezésére álló cellát 100%-osan kitölti mindkét irányban. Ezen belül egy sor felépítése a következőképpen néz ki. A bal oldali cella neve „cella_bal”, amelynek stílusleírásában több egymással ütköző adatot találunk. A 8 pt-os betűméret meghatároz egy bizonyos (14 pt-os) sortávolságot, ami 3 px-es margóval 5 sor esetén (5x[14+3+3]=100px) éppen arányosan kitölti a 100 pont magas cellát. Ebből viszont következik, ha valamelyik értéken változtatni akarunk, akkor azt csak a többivel egyetértésben tehetjük meg. A másik megoldás, hogy megadjuk a betűméretet, valamint a magassági 20%-ot vagy a 3 px-es margót, de a kettőt együtt ne, mert a későbbi módosítások problémát okozhatnak. 151 Egyedi elrendezésű weblapok Ugyancsak hasonló a helyzet a jobb oldali cellába kerülő táblázatnál, ahol a benti táblázatnak akkora szegélyt adunk, amekkorával éppen áthidalhatja a bal oldali cellában lévő szöveg alatt és felett található üres részt. Így az előálló színes téglalap (a jobb oldali cellában elhelyezkedő táblázat egyetlen inverz színű cellája) magassága és a szöveg magassága meg fog egyezni. A táblázat szegélye olyan színű legyen, amilyen a „cella_c3” háttérszíne, mert így az teljesen bele fog olvadni, és csak a belső cellája fog látszódni. Ezért aztán igazi jelentősége csak ennek a legbelső cellának lesz, így ez a cella kapja meg a „cella_jobb” nevet, és ennek a háttérszínét fogjuk állítani a JavaScript programunkban, amikor az egérmutató a cella fölé kerül. stilusfo.css részlete .tabla_link { width: 100%; heigh: 100%; } .cella_bal { width: 100px; heigh: 20%; margin: 3px; text-align: right; font-size: 8pt; } .tabla_jel { width:100%; height:100%; border: 3px solid rgb(186, 216, 247); background-color: red; } 106. ábra. A navigálásra szolgáló blokk stílusainak jellemzői Térjünk rá a navigációs blokk működésére. A táblázat egy div-blokkban található, így ha gondoljuk, akkor akár egy képre is kicserélhetjük, vagy más jelzésre. A div-blokkra egyébként más célból nincs szükségünk, így a táblázat jellemzőinél vagy a legbelső cellánál is felsorolhatnánk az id-t és egyéb egérműveletre vonatkozó paramétereket. Az azonosítóra pedig azért van szükségünk, mert a JavaScript programban fogunk rá hivatkozni. A hivatkozások szerint három programra lesz szükségünk. Az egyik a rámutatáskor, a másik az egérmutató elvitelekor, míg a harmadik a kattintáskor hajtódik végre. Az első két eseményt akár megoldhatnánk egyszerű hiperhivatkozásokkal, hiszen ahhoz tudunk stílust rendelni (a:hover, a:link). E helyett most olyan megoldáshoz folyamodunk, amelynél egyáltalán nem lesz hiperhivatkozás, és a navigálást teljes egészében linkek nélkül oldjuk meg. A megjelenő menü pedig egy abszolút pozícióval megadott táblázat lesz, amelyet így elhelyezhetünk a weblap legvégén. Mivel a stílusánál megadjuk, hogy ne jelenjen meg, ezért csak hívásra és csak a kért helyen fog megjelenni. Lapozzunk el a forrásfájl végére, de még a „” elem elé, és oda szúrjuk be a következő táblázatot, melynek forráskódja a szokásos kialakítású. Az elemeket bekezdésekbe tesszük, ezért csak egy cellára lesz szükségünk. Így 152 Bővebb tartalomhoz „Szolid sávos” stílus ugyanis egyszerűen megadhatunk egy képet a cella háttereként, míg ha minden hivatkozást külön cellába helyeznénk, akkor ez sokkal bonyolultabb lenne. A bekezdésünk ugyancsak teljesen normál „ ” elemből áll, de mégis egyedi felsorolásjelet használunk. 107. ábra. Kétféle felsorolásjelzés az átlátszó hátterű jobb oldali menünél A megoldás egyszerű, csupán egy speciális karaktert helyezünk el minden sor elejére, így elkerülhetjük a felesleges „ ”és „ ” elemeket, illetve a velük járó jókora bal oldali behúzást. A kódból látható (█), hogy Unicodekóddal megadott karaktert használtunk, amihez elkél egy szimbólumtáblázat. index.html részlete █ Időszakos █ Menetrendi █ Csoportoknak █ Teherszállításra 108. ábra. Az egyik beúszó táblázat forráskódja Ez a táblázat szintén kapott azonosítót (id), mivel a megjelenítéskor hivatkozni fogunk rá. A lista elemeinél erre már nincs szükségünk, mivel ott megadjuk egyesével az „onClick” eseményhez tartozó függvényt. Ha nem rendelünk hozzá semmilyen programot, akkor a megadott azonosítója segítségével tudunk hivatkozni rá más programban. Ha viszont valamely nála bekövetkező eseményhez hozzárendelünk valamilyen saját programot, akkor nem fontos az azonosítója, mert valószínűleg nem fogunk rá hivatkozni. Ha akarnánk, akkor pedig azt megtehetnénk a „document.activeElement” objektumon keresztül, ami az éppen aktív elem objektumát tartalmazza. 153 Egyedi elrendezésű weblapok A táblázatból annyit kell készítenünk, amennyi hivatkozás van a bal oldali C3-as cellában. Mindegyik táblázatban annyi elem lehet, amennyi nálunk a fejlécben kifér. A bemutatott példában a felirat felett 4 újabb elem fér el. stilusfo.css részlete .tabla_uszo } .lista_1 } { width:120; height:76; display:none; border:1px solid blue; background-image: url('arny-s.gif'); font-size:8pt; { margin-top:2; margin-bottom:2; margin-left:5; cursor:hand; 109. ábra. A beúszó táblázatokhoz szükséges stíluselemek A stílusjegyek között a legfontosabb a „display:none” elem, amely megtiltja az adott elem megjelenítését. Eltérően a „visiblity:hidden”-től, ez nem foglal helyet az elemnek, és erre most nincs is szükségünk. A listánál érdekes elem a hiperhivatkozást utánzó „cursor:hand” jellemző megadása. A táblázat stílusánál megadott kép különleges lesz, mivel üveghatást kelt, így a mögötte lévő kép részben átlátszódik rajta. Ennek megvalósítására a Grafikai fogásnál térünk ki részletesen. Tipp. Az átlagostól eltérő és szokatlan megoldásokat csak korlátozott mértékben alkalmazzuk a weblapunkon, mert különben elterelik a figyelmet az érdemi tartalomról, vagy elbizonytalanítják a látogatót. Az előzetes ismertetésben arról volt szó, hogy a nyitólapon viszonylag kevés szöveg lesz, ezért nincs mód a kép elhelyezésére, mert nincs akkora magassága a szövegnek, hogy a kép jól mutasson rajta. Viszont kis mennyiségű kép mindig jól mutat egy oldalon, ezért használhatunk a nyitólapon is képet, de az vagy igazodjon a tartalmi terület (C6-os cella) magasságához, vagy annak csak harmada, de inkább negyede legyen, és az elhalványítással futtassuk át a színét. Tipp. A nyitólapon elhelyezhetjük a cégvezető vagy a cég kiemelt termékének a függőleges kiterjedésű képet. Például egy állókép éppen ideális lenne. A nyitólapon ezért két dolgot tehetünk. Ha nem alkalmazunk képet, akkor írjuk át a cella stílusát „cella_c5”-ről „cella_c51”-re, és akkor a többi oldalon is alkalmazott egyszínű cella lesz a köszöntőszöveg mellett. Ha viszont képet is teszünk bele, akkor a C5-ös cellában el kell helyeznünk egy táblázatot, amely két sorból áll, az első cellája csak egyszínű lesz, a másodikba pedig kerül az imént megszerkesztett kép. 154 Bővebb tartalomhoz „Szolid sávos” stílus Ahogyan azt már előre elterveztük, a C5-ös cellába kerülő felső cella üresen marad, míg az alsóba alulra és jobbra igazítva kerül az „impresszum”, vagy más szóval az általános céges elérhetőségi adatok felsorolása. Mivel a kép miatt ez nehezebben lesz olvasható, ezért pontosan olyan jól elbújik az oldalon, amennyire ez szükséges, hiszen ezeket az adatokat nem akarjuk erőteljesen kiemelni, és ezt a célunkat elérjük vele. A weblaprészlethez tartozó stílusokat lásd a 147. oldalon. cella_c5 tartalma	Útvonal: Gyöngyös - Mátrafüred. Forgalmi iroda: Gyöngyös Tel.: 00-000-000 (@): [email protected]	Tisztelt Látogató! ... ... Ismerkedjen meg az újdonságainkkal! 2002.02.28.: Új csoportos kedvezmények ...

255) sz=255; else if (sz