1 Móricz Attila Webdesign a gyakorlatban Kiadó: ComputerBooks Kiadói Kft. 1. kiadás Lezárva: március 14.2 Móricz Attila: Webdesign a gyakorlatban Tart...
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
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 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> 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 <szerzo>Móricz Attila Windows-tippek <ar>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 Ez egy XHTML-oldal <style type="text/css"> .ketsoros { color:navy; } ul {color:red ; list-style-type:square }
7. ábra. Egy XHTML-forráskód néhány jellemző elemmel 20
Igazodás a látogatók böngészőjéhez Az előző XHTML-fájlt megtekintve láthatjuk, hogy ez valójában HTML, csak néhány minimális dologban különbözik a HTML-től. Valójában pontosan erről van szó, és éppen azért tudja a jelenlegi (nálam IE 5.0; Windows 2000) böngésző programunk megjeleníteni a weblapot. A fájl arra is példát mutat, hogyan tudunk stílusformázást az egyes elemekhez hozzárendelni. A weblap hivatkozik külső CSS-fájlra, és van saját belső STYLE-blokkja is. Az alábbi kis fájl végzi el az egyes elemek formázást. stilus-1.css body { background-color: #f0f0f0; text-align: center; } table { width: 80%; }
8. ábra. Az előző XHTML-hez tartozó CSS-fájl tartalma A formázások eredményeképpen pedig az alábbi ábrán látható képet kapjuk. Pontosan ugyanúgy néz ki a weblapunk, mintha HTML-ben lenne megírva, de ezt már egy Nokia 3650-es készülék is meg tudja jeleníteni. Várhatóan hamarosan az XHTML-böngésző veszi át a mobiltelefonokban és a tenyérgépekben a WAP-böngésző helyét, így nekünk is kevesebb munkánk lesz.
9. ábra. Egy XHTML-oldal megjelenése a webböngészőben Az XHTML-nyelv abban különbözik a HTML-től, hogy itt kötelező minden elemet lezárni (ahogyan az XML-ben is), például a „
” elemet kötelezően kövesse egy „
” valahol. Az egytagú elemeknél az elemen belül kell a lezárást elvégezni, például „ ”. Csak kisbetűvel írhatjuk az elemek neveit, és az egyes elemeket csak egymásba ágyazni lehet, mint az XML-ben láthattuk. Elvileg ezek a szabályok a HTML-nél is fennállnak, de sokan nem tartják be. 21
A webhely tartalmának megtervezése
Elemek a tartalom megvalósításához (kép, flash, szkript) A weblapunk alapvetően szöveges információt tartalmaz, amelyek illusztrálására használhatunk képeket. A témától függően ez lehet több, kevesebb, de a képek méretére mindig ügyeljünk. Az egyes weblapokon csak kis méretű képeket helyezzünk el, és azok nagyított változatát csak külön kattintásra jelenítsük meg, mert azok letöltése több időt fog igénybe venni. A képek szolgálhatják az oldal díszítését is. Ha például lekerekített sarkú téglalapokban akarjuk a tartalmat elhelyezni, akkor a négy sarok és a négy oldal díszítését egy-egy kis kép végzi el. Ehhez létrehozunk egy 3x3-as táblázatot, amelynél az érdemi információ a középső cellába fog bekerülni, a többi nyolcat pedig a kis képek befogadására hozzuk létre. lekerekitve.html <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> Lekerekített téglalap
Igazodás a látogatók böngészőjéhez A feladat végrehajtásához készítsünk egy lekerekített sarkú téglalapot egy tetszőleges rajzolóprogramban. Ideális választás például egy nyomógombok létrehozására szolgáló program, amelynél a gomb feliratát szóközökkel pótoljuk, így egy szép üres téglalaphoz jutunk. Tipp. A www.interkodex.com címen található a Button Studio program honlapja, ahonnan a legfrissebb változat letölthető. A program díszes nyomógombok létrehozására szolgál, amelyből nagy alapválasztékkal rendelkezik.
A gomb képét másoljuk át egy képszerkesztő programba, és osszuk fel 9 részre. Ügyeljünk arra, hogy az íves rész befejeződése után hozzuk létre a vágást, míg a közbülső részekből elegendő egy kis szeletkét elmenteni. A feldarabolást az ábra mutatja. Mentsünk el a középső részből is egy 8x8-as négyzetnyi részt, amivel megadhatjuk a középső terület háttérszínét. Az egyes elemeket az ábrán látható sorrendben számozzuk meg. A táblázat celláiba a négy sarkot kell beszúrni, hogy foglalják a helyet, míg a közbülsőknél háttérként adjuk meg, így a tartalom méretétől függően fogja a webböngésző „kitapétázni” az adott cellát. Ezzel azt érjük el, hogy szabadon méretezhetjük át a táblázatot, az mindig ki lesz töltve a grafikával. (Lásd még a 138. és a 197. oldalakat is!)
11. ábra. Képek alkalmazása díszes lekerekített téglalap létrehozására Célszerű a tervezett oldal stílusának megfelelően több színárnyalatban is elkészíteni a gombokat, illetve ebből a képsorozatokat, hogy a weblap készítésekor legyen miből építkezni. A kis képek mérete általában 1-2 kB, így ezek letöltődésére még egy mobilos kapcsolaton sem kell sokat várni, bár nem előnyös, ha sok kisképből áll egy weblap, mert akkor azok lehívása tart sokáig. 23
A webhely tartalmának megtervezése A feliratok megjelenítésére is sok helyen alkalmaznak képeket. Ilyenkor az is előfordulhat, hogy az egész oldal teljesen grafikusan készült el, és utólag került feldarabolásra, hogy ne egy grafikaként kelljen letölteni. E módszer alkalmazásának akkor van igazán létjogosultsága, ha olyan betűtípussal szeretnénk egy feliratot elkészíteni, ami a felhasználók többségénél nem áll rendelkezésre. És valóban, ha belegondolunk, akkor hamar rádöbbenünk, hogy egy átlagos Microsoft Windows+Office megléte esetén is legfeljebb 8-10 betűtípusból válogathatunk, de azok is a három alaptípushoz tartoznak, és minimális a különbség közöttük. Ezért ilyenkor a weblap szerkesztésekor a kívánt feliratot elkészítjük egy tetszőleges nálunk telepített programban, majd azt egy képszerkesztő programba másolva képként elmentjük (GIF, JPEG, PNG), majd ezt a képet szúrjuk be a weblapba. Ha a képnek nincs háttere, vagy pontosan megegyezik a weblap hátterével, akkor a felirat bele fog olvadni a weblapba, és az összképet nézve a felhasználónak nem fog feltűnni, hogy az a különleges betűtípussal készült felirat milyen technikával jelent meg az oldalon. Fontos! Ne használjuk a képként megjelenített feliratokat akkor, ha amúgy is olyan betűtípust alkalmazunk, ami biztosan megtalálható az átlagos felhasználó számítógépén. Egyszerűen nincs értelme, és jelentősen megnöveli az oldal letöltési, illetve megjelenítési idejét. Ráadásul bosszantó is, hogy értelmetlenül rabolja az oldal megjelenítése a látogató idejét és türelmét. A háttérképek alkalmazása már inkább a régi divathoz tartozik, mert akkor különlegesnek számított, mára viszont már mindenkinek rá kellett jönnie, hogy sokkal nehezebb elolvasni egy weblap szövegért, ha a háttérben változatos és élénk mintázat található. Ha pedig feleslegesen idegesítjük, fárasztjuk a látogatót, akkor az gyakrabban fogja az [Alt]+[F4] billentyűkombinációt megnyomni, és ugye nem ez a célunk? Ennek ellenére használhatunk háttérképet, de az legyen kellően nagy és élénk, viszont a feliratok területeinél alkalmazzunk egyszínű hátteret. Ezzel a szöveget kiemeljük a mintázatból, ami még jobban kihangsúlyozza a szövegterületek helyét. Láthatjuk, hogy mindenre van lehetőség, de az alapvető szabályokat mindig tartsuk be. Fontos! A látogató mindig nyugodt körülmények között szeretne az általunk közzétett információkhoz hozzájutni. Vette a fáradságot, és elindította a programjait, ellátogatott az oldalunkra időt és pénzt nem sajnálva. Így hát tiszteljük meg és ne idegesítsük, hanem ajándékozzuk meg azzal az információval, amit alapvetően neki tettünk ki az internetre. 24
Igazodás a látogatók böngészőjéhez A speciális feliratok flash-formájában is megjeleníthetők egyedi betűtípussal, mivel itt a flash-animáció a szükséges karakterek képét vektorosan eltárolja, így egyszerűen és gyorsan képes a webböngészőnk azok megjelenítésére, méretének megváltoztatására és színezésére. Számos ingyenes és fizetős program található az interneten és a boltokban, amelyekkel flash-animációt készíthetünk. Némelyiknél nekünk kell képkockánként megszerkeszteni az egészet, ami például 15 képkocka/másodperces vetítés esetén eléggé munkaigényes lesz. Vannak azonban olyan programok, amelyek tartalmaznak előre elkészített animációkat, így nekünk csak a feliratot, annak szín- és méretváltozását kell megadnunk, és a program elkészíti a mozgó feliratot. A jobb (és nem feltétlenül a drágább) programokban több egymást követő eseménysort hozhatunk létre viszonylag egyszerűen, így rövidebb-hosszabb üzeneteket, reklámszlogeneket juttathatunk el a látogató felé látványos módon. Fontos! Feleslegesen ne villogjon a weblapon, mert az nagyon zavaró, és nem engedi, hogy az oldalon lévő információt nyugodtan el tudjuk olvasni, és meg tudjuk érteni. Enélkül pedig feleslegesen dolgoztunk, és raboltuk a látogató drága idejét. Az eredmény pedig az, hogy a célunkat nem érjük el. Sok helyen találkozunk olyan weblapokkal, ahol a nyitólapon egy olyan flashanimáció fogad bennünket, amit nem tudunk kikerülni, vagy angolul írják ki a „skip intro” feliratot, általában 4-6 pontos betűkkel, rejtett színekkel. Ennek eredménye, hogy kénytelenek vagyunk megvárni a flash letöltődését, ha valóban be akarunk jutni a belső oldalakra. Ilyen esetben a weblapot készítő személy egyéni kreativitásának eredményét kell megnéznünk, pedig ez minket egyáltalán nem érdekel! Hasonló a helyzet olyankor is, amikor egy cég weblapjainak megtekintése külön expedíciót igényel, mert olyan nehéz megérteni, hogy hol találhatók a linkek, amelyeket különleges kis animációk mögé rejtett a tervezője. Ennek is megvan a létjogosultsága akkor, ha X. Y. egyéni felhasználó a saját munkáit mutatja be, és én azzal a céllal látogattam el a honlapjára, hogy ezt megnézzem. Ha viszont Z. cég honlapjáról a cég tevékenységéről akarok tájékozódni, akkor ne szórakoztasson engem a weblapszerkesztő a logikai feladványaival. Hasonló a helyzet a szkriptekkel is. Csak akkor alkalmazzuk azokat, ha fontos feladatuk van az oldal olyan megjelenítésében, ami az információ eljuttatását segíti a látogató részére. A felbukkanó buboréksúgók, a linkeket kiemelő háttérszínezés és sok egyéb szkript az oldal kezelését segíti. Az állapotsorban futó reklámszöveg akadályoz abban, hogy megnézzem, egy adott link hová vezet, milyen módon fogja a kért weblapot megjeleníteni, tehát kerüljük. 25
A webhely tartalmának megtervezése
A szerkesztőprogramok kínálata A weblapok készítéséhez a kivitelezéstől függően valamilyen szerkesztőprogramot szoktunk használni. A legegyszerűbbek a Windows WordPad és a Jegyzettömb, amelyek elvileg alkalmasak weblap készítésére, csak kicsit nehézkes velük dolgozni. Ezekkel a forráskódot tudjuk szerkeszteni, amire az előzőekben láthattunk pár példát. Ilyenkor beírjuk a forráskódot, elmentjük, majd ugyanazt a lapot a webböngészőben megjelenítjük, és megnézzük milyen eredménnyel járt a próbálkozásunk. Ennél valamivel egyszerűbb a vizuális (WYSIWYG) szerkesztőkkel dolgozni, amelyeknél mi a látvány alapján készítjük el a weblapot, és nem foglalkozunk a forráskóddal. Kombinálhatjuk a kétféle művelet, amikor egyes részeket vizuális szerkesztőkkel készítünk el, de folyamatosan figyelemmel kísérjük a forráskódot is, mert azzal is van dolgunk (például a stíluslapok kapcsán). Az ilyen programoknál viszont sok esetben fennáll az a veszély, hogy olyan olvashatatlan, követhetetlen forráskódot hoznak létre, amelyen nem igazán lehet kiigazodni, így a lehetőség fizikailag adott, de nem használható.
A weblapok szerkesztése a forráskód szintjén Kezdők általában nem kedvelik ezt a módszert, mert feleslegesnek tartják a HTML-kulcsszavak megismerését. Egyrészt hasznos ha ismerjük, mert a formázásokkal kapcsolatban a stílusok egyes elemekhez való hozzárendelésekor tudnunk kell, hogy milyen elemekkel dolgozunk, és azok milyen hatással vannak egymásra. Ahogyan az egyes elemek egymásba ágyazódnak, úgy veszik át a lépcsőzetes stíluslapok segítségével a formátumokat. Például a „” elemre megadott formátum mindaddig érvényes a teljes dokumentumra, amíg azt egy azon belül található elem felül nem írja. Ha egy táblázatcellára („
”) más formátumot adunk meg, akkor ott az lesz érvényes, de ha azon belül nem egy bekezdésnyi szöveg lesz, hanem kettő, akkor a második már egy „
..
” blokkba kerül, amire más formátum érvényesül, ha megvan adva. A formázás elvégezhető teljes egészében a vizuális szerkesztőben, de ebben az esetben minden egyes bekezdésnél, táblázatcellánál meg kell adnunk a formátumot. Ennek eredményeképpen a formázás nem lesz egységes, mert ha valahol módosítunk valamit, azt következetesen végig kellene vinni, de biztos, hogy valami ki fog maradni belőle. A másik nagy hátránya, hogy a formátum leírása minden elemnél feleslegesen elhelyezésre kerül, amivel jelentősen megnő a HTML-fájl mérete. Ezért terjednek jobban a forráskódú szerkesztők. 26
A szerkesztőprogramok kínálata Ennek ellenére a forráskódú szerkesztés nem azt jelenti, hogy nekünk kell begépelni a forráskódot, hanem csak azt, hogy fel kell ismernünk, és tudjuk azt, hogy hol kell beírnunk, módosítanunk valamit. A módosításra sok esetben azért van szükség, mert a vizuális szerkesztő vagy nem nyújt teljes körű beállítási lehetőséget, vagy olyan bonyolultan teszi azt, hogy mi nem tudunk kiigazodni rajta. Akinél ugyanis a weblapszerkesztés nem mindennapos munka, hanem alkalmi feladat, attól nem várható el, hogy az éppen ingyenesen elérhető, letölthető programot órák alatt tökéletesen meg tudja tanulni. Előnyös a forráskód alapos ismerete, ha valaki tovább akarja fejleszteni a honlapját, és mindig újabb érdekességekkel akarja azt megújítani. Ehhez érdemes böngészés közben néha belenézni mások weblapjának forráskódjába, ahonnan sok érdekességet tudhatunk meg. Ezt persze sok esetben letiltja a lap készítője, de teljes egészében erre nincs módja. Tipp. A megtekintendő weblapnál kattintsunk a jobb gombbal egy üres vagy szöveges területen, és válasszuk ki a helyi menü Forrás megtekintése parancsát. Ha erre megjelenik egy üzenet, hogy tilos, akkor nyomjuk meg a [Shift]+[F10] billentyűkombinációt. Ha esetleg ez is le van tiltva, akkor még mindig megmarad a webböngésző eszköztárán lévő Szerkesztés gomb, nyomjuk meg azt.
Általában a rohanó világunkban nem igazán érnek rá a weblapok tulajdonosai, hogy minden lehetséges módon letiltsák a forráskód megjelenítését, mert az eléggé munkaigényes feladat. Aki folyamatosan a legújabb trendeknek megfelelő tartalommal rukkol elő, az a megjelenésre koncentrál, és nem arra, hogy a trükkjeinek forrását elrejtse. Amikor egy ismeretlen weblap forrását megnézzük, akkor fontos, hogy felismerjük a weblap főbb részeit, be tudjuk azonosítani a megjelenített tartalom egyes elemeit. Ha például egy főcím alatt van egy mozgó villogó felirat, és annak megvalósítási módját akarjuk ellesni, akkor jelöljük ki a főcímet, másoljuk le, majd a forrásnézetre (Jegyzettömbre) átváltva keressünk rá erre a karakterláncra. Ha nem találnánk, akkor a szövegből csak az ékezetmentes részt hagyjuk meg, és arra keressünk rá. Ezután kezdjük el olvasni a forráskódot, és az egyes elemeket felismerve meg fogjuk találni, hogy mi okozza a látott hatást. Ha nem találnánk, akkor nézzük meg, hogy a keresett felirat után mi következik, és akkor a két olvasható elem között fogjuk megtalálni a hatást okozó elemet. Ez bármi lehet, egy üres, de azonosítóval ellátott bekezdés, amibe egy szkript írja be a tartalmat, de egy objektum vagy Java-applet is. Mindebből sokat tanulhatunk, mert egy weblap nagyon sok apró részletből épül fel, és minél aprólékosabban van kidolgozva, annál profibb a megjelenése. 27
A webhely tartalmának megtervezése
Macromedia HomeSite 5
Ez a Shareware program a Macromedia honlapjáról tölthető le ingyenesen, és 30 napig használható teljes egészében korlátozások nélkül. Elsősorban a forráskódban történő formázást támogatja párbeszédablakokkal, így ezen a téren teljesen úgy érezhetjük magunkat, mintha vizuális szerkesztőt használnánk. Az egyes elemek beszúrásakor szintén sok párbeszédablak segíti a munkánkat, így nem nekünk kell begépelni az egyes paramétereket. Sajnos ez éppen nem illik bele a könyv elképzelésébe, ahol folyamatosan azt fogom sugalmazni, hogy válasszuk külön a HTML-, CSS- és JS-fájlokba illő részeket, mert akkor sokkal áttekinthetőbb forráshoz jutunk. Ha ennek ellenére valaki minden egyes elemet helyben szeretne formázni, akkor ehhez sok segítséget kap a programban. Használjuk gyakran a helyi menüt, amelyben mindig megtaláljuk az adott helyen alkalmazható legfontosabb parancsokat. Ezt mutatja a következő ábra. Ha pedig az egyes elemek (például egy teljes táblázat) belső részeire éppen nem vagyunk kíváncsiak, akkor azt ideiglenesen becsukhatjuk.
12. ábra. Az egyes tagok összecsukásával a forráskód szépen áttekinthetővé válik 28
A szerkesztőprogramok kínálata Amikor a weblap szerkesztésének a végén tartunk, és át szeretnénk nézni az egész munkánkat, akkor nagyon hasznos, ha az egyes táblázatokat vagy bármilyen más tároló elemeket (DIV) össze tudjuk csukni. Ilyenkor azt szürke színnel jeleníti meg, és a buboréksúgójában mutatja meg a forrás elejét. Ezzel a módszerrel akár az egész BODY-tagot is becsukhatjuk, ha éppen a fejlécet szerkesztjük. Ez a szolgáltatás nagyon előnyös, mert rendkívül jól áttekinthetővé tudjuk tenni vele a forrásfájlt anélkül, hogy kitörölnénk belőle valamit. A program eszköztárai felül helyezkednek el, amelyek között a fülekre kattintással lehet váltogatni. Érdemes az úszó eszköztárakat is ide húzni az egérmutatóval, mert így kevesebb helyet foglalnak. A bal oldali navigációs ablaktáblának alul találjuk a füleit, amelyekkel váltogathatunk a fájlrendszer és a weblap elemeit megjelenítő fanézetek között, de még egy beépített súgót is találunk, bár ehhez sokszor internetes kapcsolat szükséges. A könyvben szereplő 2-4. elrendezéseket ezzel a programmal készítettem, és nagyon kellemes volt a használata.
TopStyle Lite v2.10
A Macromedia programokkal együtt szállított segédprogram külön is letölthető az internetről a http://www.bradsoft.com/topstyle/download/ címről. A program segít a stíluslap elkészítésében, ha pontosan tudjuk mit, hogyan akarunk formázni.
13. ábra. A stílusfájlok elkészítése szinte gépelés nélkül súgóval és betekintővel 29
A webhely tartalmának megtervezése Amennyiben a weblap alapelemeit akarjuk formázni, úgy kattintsunk az eszköztáron a New Selector gombra, és a megjelenő listából kiválaszthatjuk, hogy mely elemeket akarjuk megformázni. Ha ezt tudjuk, akkor magunk is beírhatjuk a bal oldali mezőbe az elem vagy az ID nevét és a kapcsos zárójeleket, de ezután már a jobb oldali listából választhatjuk ki az összes tulajdonságot. A már megadottak a listában előrekerülnek, így nem kell keresgélnünk azokat a tengernyi jellemző között. Ez nagyon hasznos szolgáltatás. A Selectors fülre kattintva a már definiált elemek és osztályok nevei jelennek meg, és rákattintva azonnal az adott elemhez lép, azt kiemeli, így könnyen ellenőrizhetjük. Elsősorban kezdőknek hasznos, mert nem kell fejből tudni az összes stílusjellemzőt. Lapozzunk a 58-60. oldalakhoz, ahol találunk egy logikai sorrendbe rendezett CSS-táblázatot. A CSS 2.0 vagy más szabványok jellemzőinek rendezéséhez például ezt a programot is felhasználhatjuk a saját céljainkra. Aki ugyanis sokat fog e témával foglalkozni, annak előbb-utóbb el kell készítenie a saját segédeszközeit, mert nem lehet mindent fejben tartani.
Macromedia Dreamweaver MX
Ez a Shareware program a Macromedia honlapjáról tölthető le ingyenesen, és 30 napig használható teljes egészében korlátozások nélkül. Felépítését tekintve hasonlít a Macromedia Fireworks MX programhoz, amellyel a könyvben sokszor fogunk találkozni. A program eszköztárai és számos szolgáltatása hasonlít a HomeSite programéhoz, így akár onnan továbblépve is használhatjuk ezt, mint egy sokkal fejlettebb programot.
14. ábra. Néhány új elemet tartalmazó eszköztár Azok számára is tartogat a program meglepetéseket, akik még csak most kezdték a weblapszerkesztést, de máris gyors és látványos eredményeket akarnak felmutatni. Az előző ábrán láthatunk pár „f” jelzésű gombot, amelyekkel flashgombok, feliratok szúrhatók be egyszerűen. Ehhez csak meg kell adnunk, hogy milyen felirat legyen, milyen betűtípussal és színekkel, és a program már be is szúrja a feliratot vagy gombot. Ezek tulajdonságai a lenti Properties ablaktáblában szerkeszthetők. 30
A szerkesztőprogramok kínálata A program ablaka első ránézésre eléggé zsúfolt, különösen ilyen kis méretben, de előbb-utóbb minden funkciót fel lehet használni. Ez egyben azt is jelenti, hogy célszerű legalább 1280x1024-es képernyőfelbontást használni, hogy a bal oldali ablaktábla jól elférjen, és kellő szélességűre lehessen nyitni. A másik következtetés pedig az, hogy egy néhány lapos egyszerű webhely elkészítésébe nem érdemes belevágni, mert a tengernyi funkció között csak elvesznénk. Ha viszont rászánjuk a megfelelő időt, akkor megtanulhatjuk a kezelését, a billentyűkombinációkat, amelyekkel gyorsan készíthetünk bonyolult weblapokat, illetve komplett webhelyeket.
15. ábra. A Dreamweaver programban minden beállítás azonnal kézre esik Az ábrán látható, hogy a bal oldali ablaktáblában az oldal felépítésében kijelölt elemet a jobb oldalon a szerkesztőnézetben is kijelölte a program, és megjelent lent a Properties ablaktáblában az adott elem összes fontos tulajdonsága. Így nem kell a forráskódba beírnunk semmit csak azért, hogy módosítsunk pár jellemzőt. Ezzel lecsökkenthetjük a szintaktikai hibázás lehetőségét, és a weblap szerkesztése nem a forráskód írására fog szorítkozni, hanem az egyes elemek, objektumok jellemzőinek beállítására. Ennek szellemében pedig már nem is olyan fontos, hogy a forráskód hogyan néz ki, ami nem árt, mert egyes funkciók gyorsan képesek sok kóddal megtölteni a weblapunkat. 31
A webhely tartalmának megtervezése
A látványalapú weblapszerkesztők A weblapok elkészítéséhez a kezdők számára határozottan a látványalapúak a legjobbak, mert ott nem kell a forráskóddal foglalkozni, és a weblapon megjelenő elemeket közvetlenül tudjuk szerkeszteni. Azonban a legtöbb program nem foglalkozik azzal, hogy szép, tiszta, áttekinthető forráskódot hozzon létre, ráadásul a feleslegesen terjengős kóddal még az oldal méretét is jelentősen megnövelik. Vannak kivételek, de mindegyik programnak megvan a maga hibája, ami miatt nem tudjuk teljes értékűen használni. Minden hátrányuk ellenére sok esetben nem a szerkesztőprogramokkal van a baj, hanem azzal, ha nem tudjuk pontosan mit akarunk készíteni, és inkább a programtól várjuk el, hogy nyújtson valamit. Ha ön már készített egyéni honlapot, akkor megkérdezném, hogy lerajzolta-e valaha az oldalának felépítését, megtervezte-e azt, hogy melyik oldalra mi fog kerülni? Szembesült-e már azzal, amikor a logikusan felépített honlapjainál a linkek játszották a főszerepet, és csak utólag döbbent rá, hogy az adott oldalon nem is tud semmit elhelyezni, mert az adott témán belül nincs mondanivalója? – Ha igen, akkor nem a program kiválasztásával kellene folytatnia a munkát, hanem a „Mennyiségi és minőségi igényfelmérés” című fejezetnél.
Microsoft FrontPage Express
A Windows 95/98 (illetve az Internet Explorer 4.0) része a FrontPage Express weblapszerkesztő program, ami megtalálható még az Internet Explorer 5.0 fájljai között is az fpxpress.cab fájlban. Az Office XP-nél a fpsetup.cab fájlt keressük, de biztosabb, ha a rákeresünk az f*.cab fájlokra az IE vagy bármely IE-t tartalmazó Office vagy egyéb Microsoft CD fájljai között. Nyissuk meg a fájlt dupla kattintással, és másoljuk ki a fájlokat egy külön mappába. Nem szükséges telepíteni a programot, elég csak egy parancsikont hozzárendelni, hogy egyszerűbben elérhessük. Ez a program bár kissé egyszerű, elavult, az általa előállított forráskód szörnyű, a stíluslapok kezelését nem ismeri, de mégis sokkal jobb, mint a Jegyzettömbben írni egy weblapot, mert ez vizuális szerkesztő. Mivel a stíluslapokat nem tudja kezelni, ezért nem azt fogjuk látni egészen pontosan, ami meg fog jelenni a webböngésző programban, de ez nem baj, mert legalább tudjuk, hogy a CSS-t nem kezelő böngészők mit látnak belőle. A program rendelkezik forráskódú szerkesztővel is, amelyet kiszínez, így a szintaktikai hibákat egyszerűen felismerhetjük benne. Bár ez csak betekintő nézet, de a célnak megfelel. Inkább egyszerűbb weblapok készítéséhez használható, és főként kezdőknek, akiknek a forráskódú szerkesztés még idegen. 32
A szerkesztőprogramok kínálata
Microsoft FrontPage 97/2000/2002 weblapszerkesztők
Az előzővel ellentétben ez a program már fizetős, viszont eléggé közismert, elterjedt és nem túl drága. Amúgy is kevés vizuális szerkesztő van, ez legalább a Microsoft Office-t ismerő felhasználók számára könnyen megtanulható, és van már magyar nyelvű változata is. Eltérően az általános weblapszerkesztőktől, ez a program nem csupán a weblapok szerkesztésére alkalmas, hanem az egész webhelyet felügyeli. Ez azt jelenti, hogy kezeli a webhelyen belül a hiperhivatkozások rendszerét, de a külső hivatkozásokat is ellenőrizni tudja, így nem lesz megszakadt, rossz helyre mutató link a weblapjainkon. Talán minden weblapszerkesztő egyik hátránya, hogy ha egy fájlt áthelyezünk más mappába, akkor a hiperhivatkozások ezt a változást nem követik. A FrontPage felügyeli a fájlokat, így egy fájl áthelyezésekor minden olyan fájlt módosít, amelyben hiperhivatkozást talál erre az oldalra, illetve ezen lapon belül szintén kijavít minden linket úgy, hogy azok továbbra is a jó helyre mutassanak.
16. ábra. A beépülő weblapok segítenek az egységesebb arculat megteremtésében A program egyik előnye, hogy kezeli a stíluslapokat, amelyek megadásakor az Office-ban megszokott formázási párbeszédablakokat használhatjuk, de a program a CSS-tulajdonságokat írja be. Egyes jellemzők terén ragaszkodik a saját elképzeléseihez, és hiába módosítunk rajta, a program kijavít minket. Ez nagyon rossz tulajdonsága, mivel ez a program sem tökéletes, ezért nem kellene így 33
A webhely tartalmának megtervezése ragaszkodnia az elképzeléseihez. A vizuális szerkesztés mellett lehetőségünk van a forráskódba is beleírni, így a weblap fő felépítését adó részt például megírhatjuk forráskódszinten, míg a cellákba kerülő tartalmat a vizuális szerkesztőben kényelmesebb begépelni. A program hátránya, hogy rendelkezik ugyan dinamikus eseménykezeléssel, de csak nagyon kezdetlegesen, ráadásul a verziók növekedésével ez nem előre fejlődött, hanem inkább visszafelé. A sablonok használata esetén az irányítás teljesen ki fog kerülni a kezünkből, mivel a forráskódba csak a sablontól eltérő részek kerülnek be, de mentéskor mégis elment a program mindent. Hasonló a helyzet a beépülő tartalmakkal (Include HTML WebBot-elemnél), ahol az adott elem forrása csak a mentéskor íródik be a weblapba. Bár a forráskód így áttekinthetőbb lesz, de aki abba belenéz, az azért teszi, mert az egészet látni akarja, és nem csak azt, amit a program annak gondol.
Kiegészítő rajzolóprogramok használata A továbbiakban olyan programokkal fogunk megismerkedni, amelyekkel a weblapunkon megjelenő különböző grafikákat tudjuk előállítani. Némelyikkel az egész weblapot is elkészíthetjük, ha az egész oldalunkat egy hatalmas grafikaként vagy flash-animációként akarjuk kezelni. Erre is lehetőségünk van, mivel a mai korszerű programok már képesek a grafikákat olyan hatékonyan elmenteni, hogy azok kis fájlméretűek, de amellett nagy képméretűek legyenek. Ezek szellemében a weblap szerkesztése nem feltétlenül jelent HTML-kódolást, mert az egy rajzolóprogramban ugyancsak elkészülhet. Az alábbiakban és az előzőekben említett Macromedia programok mindegyike a könyv írásakor ingyenesen letölthető volt a cég honlapjáról, illetve alkalmanként megjelentek a PC World számítástechnikai szaklap CD-lemezein, így bárki számára ingyenesen beszerezhető. A programok mindegyike 30 napos próbaváltozat, addig teljes értékűen legálisan használhatók. Ajánlom mindenki figyelmébe ezt a lehetőséget.
Macromedia Fireworks MX
A könyvben ezzel a programmal fogunk a leggyakrabban találkozni, mivel a grafikák kezelése mellett az eredményt HTML-formátumban is el lehet menteni, így alkalmas teljes weblapok, illetve azok főbb részleteinek elkészítésére. A grafikák kezelése terén olyan újdonságokkal szolgál, amelyekkel a Windows és az Office eszköztárában (Paint, Photo Editor) nem találkozhatunk, így egy átlagos szoftverkörnyezetben a feladat nem lenne megoldható. Bár sok kisebb feladatot el tudunk végezni velük, ezért azokról is szó lesz, ahol csak lehetséges. 34
A szerkesztőprogramok kínálata A Fireworks programról olvashatunk a könyvben a 102., 133., 161., 174. és 196. oldalakon. Nagyon sokféle feladat elvégzésére használhatjuk, ezért érdemes alaposabban megismerni, hogy a 30 napos működés alatt minél több feladat elvégzésére fel tudjuk használni. Az alábbi ábrán például egy fotókból összeállított kompozíció látható, amelyen a képeket külön fájlokból hívtuk be, azokat tetszőleges szögben elforgattuk, majd a webes szeletelő eszközzel feldaraboltuk részekre, hogy a weblapon azt újra egy képpé állítsuk össze. A cellákban lévő képeket áttehetjük akár háttérképnek is, így az előtérben szabad marad a hely szövegnek vagy más egyéb tartalomnak.
17. ábra. A kép rétegeken való tárolása összetett munkavégzést biztosít A kép felszeletelése a webes rétegen tárolt információkkal történik, amelyet több képnél is felhasználhatunk, így az egyes oldalakon lévő képek váltogathatók. A kép összeállítása lehet számos rétegen tárolt képrészlet, rajz és egyéb objektum összhatásának az eredménye, így egészen különleges munkákat készíthetünk vele. A rajzoláskor a rétegeket zárolhatjuk, elrejthetjük, így nem zavarnak az újabb részletek szerkesztésekor. A lenti Properties ablaktábla mindig az éppen kijelölt elem összes tulajdonságát tartalmazza, illetve az azok eléréséhez szükséges gombokat. Ebben szinte az összes Macromedia program megegyezik, így ha az egyik programot megismerjük, akkor a többi használata is kézre fog állni. 35
A webhely tartalmának megtervezése
Macromedia FreeHand MX
Ebben a szabadkézi rajzolási lehetőséget sugalló programban valóban szabad kezet kapunk az egyes rajzelemek elkészítésekor. A program felépítését és eszköztárát tekintve a Fireworks MX programhoz hasonlít, mert itt is számos alapvető rajzelem áll a rendelkezésünkre, hogy a lehető legkülönfélébb objektumokat elkészíthessük, amelyeket aztán nagyon sokféle formázással alakíthatunk olyanná, hogy abból ki ne találja valaki az eredeti formáját. A formázással és beállítással kapcsolatos jellemzőket a jobb oldali ablaktáblákban módosíthatjuk, amelyeket a címsorukra kattintva nyithatunk ki és csukhatunk össze. Kezelésük egyszerű, és nagyon praktikus, mivel így szinte minden jellemző és szolgáltatás kézre esik, és azonnal elérhető. A képekkel kapcsolatos formázások és speciális effektusok itt is megtalálhatók, amelyek kiegészülnek újabbakkal.
18. ábra. Vektoros rajzolóprogram nagyon sok kimeneti formátummal (pl. flash) Ez a program azonban több olyan speciális hatást tartalmaz, amelyeket inkább a vektoros objektumokon alkalmazunk, mint például az árnyékolás, térhatás, tükrözés, és ez a mentési formátumoknál is megmutatkozik. A fényképek kezelésére jobb a Fireworks, és ehhez a programban találunk is átlépési lehetőséget a másik programra. Ez egyébként általános a Macromedia programoknál, hogy bizonyos feladatoknál inkább felkínálja a lehetőséget az adott feladatra alkalmasabb másik Macromedia program használatára. 36
A szerkesztőprogramok kínálata Az exportálásnál mutatkozik meg az igazi különbség a két program között, mivel itt nagyon sokféle vektoros formátumot találunk, de a képformátumok és a flash sem hiányoznak. Amikor HTML-be ment, akkor az egész lapot egy flash-fájlba menti el, és azt jeleníti meg a weblapon. Ezért egyszerűbb feliratok, rajzos objektumok készítésére nagyon ajánlott, különösen, ha azt vonalas rajzokból tudjuk a legegyszerűbben előállítani. Arra ügyeljünk a program használata során, hogy ne hagyjuk elragadtatni magunkat a program szolgáltatásaitól, hanem koncentráljunk a tényleges feladatunkra. Látni fogjuk, hogy a tervezett oldalainknál visszafogottabb elrendezést valósítunk meg, így azokba nem mindig illik bele egy különleges effektusokkal tűzdelt képi elem.
Macromedia Flash MX
Ez az elsősorban flash-animációk programozására és létrehozására készült program mára sokak elsőszámú látványalapú weblapszerkesztő programjává nőtte ki magát. Temérdek funkcióját inkább az előző Macromedia alkalmazásokkal szerzett gyakorlat után érdemes kipróbálni, mert nem könnyű kiigazodni rajta. Ennek ellenére próbáljuk ki, mivel 30 napig ingyenes, ráadásul a beépített sablonjai révén teljes weblapok készítésére is alkalmas. A 6-os új változatban még az eddigieknél is tömörebb flash-fájlt hoz létre, amivel csökken az oldal letöltési ideje. Első lépésben hozzunk létre egy új dokumentumot a sablonja alapján, így nem kell üres lappal indítanunk. Az ablak bal oldalán találjuk az eszközöket, amelyekkel alapelemeket rajzolhatunk. Nézzük meg, hogy mennyivel kevesebbet találunk itt, mint az előző Macromedia programokban. Nem véletlenül, hiszen itt nem az egyes rajzelemekkel való bűvészkedés a cél, vagy a képeken elvégzendő speciális effektusok alkalmazása, hanem a meglévő elemek összeállítása weblappá vagy animációvá. A felső részen találjuk az idővonalat (Timeline), amelyen az egymást követő képkockák helyezkednek el. Ugyanitt vannak a rétegek (Layers), amelyeket itt szintén el lehet rejteni, zárolhatók, és kijelölésükkel az adott rétegen lévő összes objektumot kijelölhetjük egy kattintással. A rétegeket mappákba szervezhetjük, így még hatékonyabban használhatjuk ki a benne rejlő lehetőségeket, mert az adott munkánál felesleges rétegeket becsukhatjuk. Az [F5] billentyűvel újabb képkocka hozható létre, amely alapértelmezésben üres, de a [Ctrl] lenyomva tartása közben az idővonalon lévő álló téglalapot elhúzva oldalra (Ù) az előző háttér vagy vezérlőelem másolható tovább a következő képkockára. Ezzel például a bemutatott weblapok sorozata egyszerűen elkészíthető, így nekünk csak a tartalomra kell figyelnünk. 37
A webhely tartalmának megtervezése Aki ezen túl akar lépni, annak lehetősége van teljes animációkat programozni a beépített ActionScript nyelv révén, amely természetesen nem kevés tanulnivalót ró a felhasználóra. Előnye, hogy szintaktikáját tekintve hasonlít a JavaScript programnyelvre, így az ott megtanultak részben kamatoztathatók. A tanulásban hasznos segítséget nyújt a Reference ablaktábla, amelyben részletes leírást és példákat találunk a gyorsabb alkalmazhatóság érdekében, amelyet érdemes a középső munkaterületen rögzíteni, hogy áttekinthető legyen.
19. ábra. Ismerős felülettel jelentkezik a flash-készítő program Az idővonalon elhelyezkedő képkockák az egymást követő weblapok készítésekor egy-egy weblapot jelenítenek meg, míg egy animáció esetén egy pillanatnyi képkockát. Ha kisebb animációt, reklámot akarunk készíteni, akkor szintén érdemes a sablonokat használni a létrehozásnál, így legalább tájékozódhatunk az egyes szabványos hirdetési felületek méretéről. Újdonság a dinamikus tartalombetöltés lehetősége, ami révén a weblapon lévő flash-fájl módosítása nélkül be tud tölteni külső szöveget vagy képfájlt. Ez a HTML-fájlok esetében alapértelmezés, míg a flash-fájlok esetében újdonság, mivel azok eddig egy fájlban tartalmazták az oldalhoz szükséges összes elemet. Az újdonságnak köszönhetően egyszerűen megújíthatjuk az oldalainkat. 38
Honlap „Varázsló-forma” elrendezésben
Egyedi elrendezésű weblapok A kezdeti elméleti tervezések eredményeképpen eljutottunk oda, hogy van valamilyen elképzelésünk a weblapok felépítéséről, behatárolhattuk az általunk elérhető és megismerhető szerkesztőprogramokat, így elkezdhetünk dolgozni. Ebben a főfejezetben több különleges elrendezésű weblap részletes elkészítésével fogunk megismerkedni. Mindegyiknél bepillantást nyerhetünk egy-egy hasznos segédprogramba, elkészítünk valamilyen kis programot (szkriptet), ami az adott weblapot valamilyen szinten szolgálni fogja. Az egyes elemeket természetesen más jellegű weblapok készítésénél ugyancsak felhasználhatjuk, ki is hagyhatjuk, amennyiben annak alapvető megjelenését nem kockáztatja.
Honlap „Varázsló-forma” elrendezésben A most elkészítendő honlapunk a Windows varázslóihoz hasonlatos formát fog ölteni, melynél a bal oldalon helyezzük el a navigálásra szolgáló gombokat, linkeket, míg a jobb oldali kb. 2/3-nyi területre kerül az érdemi információ. A tartalom elrendezése így egy fekvő téglalapba kerül, amelynél alul-felül a böngésző ablakában lévő területet üresen hagyjuk. Így teljesen a központi részre irányítjuk a látogató figyelmét, ami a weblaptervezés alapvető irányelve.
20. ábra. A kevés tartalomhoz a legideálisabb a vízszintes elrendezés 39
Egyedi elrendezésű weblapok
Az elrendezés megtervezése és kialakítása A bemutatott formával azt érjük el, hogy viszonylag kevés információval rendelkező személyek is készíthetnek maguknak esztétikus és hasznos honlapot, és nem kell feleslegesen linkekkel és viccekkel megtölteniük, csak hogy „legyen valami a honlapon”. Azonban a jobb oldali részen a témához kapcsolódó további oldalakra is linkelhetünk, bár többszintű linkelést ne alkalmazzunk, mert akkor a felhasználó elveszik a hiperhivatkozások tengerében. A most bemutatásra kerülő példában, amennyire csak lehet, a szöveges kialakításra törekszünk, és csak minimális grafikát alkalmazunk, éppen csak díszítési célra. Ezzel a forráskód viszonylag áttekinthető lesz, bár a kezdők számára még így is sok újdonság lesz benne. Ebből később kiindulhatunk, és továbbfejleszthetjük a honlap egyes részeit, például a szöveges gombokat grafikusra cserélhetjük le, amivel esztétikusabb – bár lassabban megjelenő – tartalomhoz juthatunk. Fontos! A tartalom weblapon történő elrendezésére mindig táblázatokat használunk, mivel más lehetőségünk nem igazán van. A táblázatok viszont csak az egyes területek kijelölésére szolgálnak, és nem szükséges, hogy az egyértelműen virítson a weblapon, hogy az milyen építőelemeket tartalmaz. Az előző megállapítás lényege az, hogy a tartalmat befoglaló táblázatnál ne alkalmazzunk körben megjelenő keretet, legfőképpen ne 5-10 pt vastagot, mint az divat volt régebben. A másik fontos információ, hogy több táblázat is egymásba ágyazható, így egészen egyedi elrendezéseket alakíthatunk ki. Szintén kevesen ismerik azt a lehetőséget, hogy megadható a táblázatok és a cellák magassági mérete, ráadásul ennek értéke lehet például 100%! Ez alkalmas arra, hogy többek között egy vízszintes elrendezésű weblap tartalmát a lap közepére igazítsuk függőleges értelemben is, ne csak vízszintesen (csak az IE-ben értelmezett). Tipp. A weblap forráskódjában mindig helyezzünk el nagy látványos megjegyzéseket, amelyekben leírjuk pár szóval, hogy az adott táblázat mire szolgál, illetve hol végződik. A megjegyzést HTML-ben a „” 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%
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
23. ábra. A weblap elrendezését megadó táblázat forráskódja HTML-ben A következő lépésben már ne ezt a rajzot folytassuk, hanem egy másikat készítsünk, amely a középső cellába kerülő téglalapot vázolja fel. Ennél azt terveztük, hogy lesz bal oldalon egy gombsor a hiperhivatkozások kiválasztására, és a jobb oldalon az érdemi tartalom kerül megjelenítésre. Fontos! Ne feledkezzünk el a szemvezetésről, ami a mi jelenlegi vízszintes elrendezésünknél valamilyen vízszintes irányban elnyúló elem alkalmazását igényli. Ezt a gondolatot alkalmazzuk a belső táblázatban, de már az elrendezést adó táblázatban is elkezdhetjük. Az elrendezést adó táblázatnál megformázhatjuk az előző rajznál megadott szegélyeket, de ahhoz hasonló hatást nyújtó vízszintes vonalat is beszúrhatunk, amelynél viszont a majd mellé kerülő felirat magasságához igazodó vastagságot adjunk meg. Például: . Erre még később kitérünk, most foglalkozzunk a belső táblázatunkkal. 43
Egyedi elrendezésű weblapok A belső táblázat jobb oldali részében a szemvezetést szolgálja például egy élőfej és élőláb kialakítása. Az élőfejben elhelyezhetjük a legfrissebb híreket egy sorban, illetve számos minden oldalon szükséges gombot. Ilyenek lehetnek a „Hozzáadás a kedvencekhez”, az e-mail címre és a nyitólapra mutató hiperhivatkozás, amelyet egy-egy kis kép, ikon is megvalósíthat. Az élőlábon sok esetben a cég elérhetőségét, vagy az oldalon található információk hasznosításáról szóló szerzői jogokat ismertető weblapra mutató link található. A választás mindig az adott tartalom jellegétől függ. Az előbbiekből az is következik, hogy a bal oldalon lesz egy 1x6-os táblázat (1 oszlop, 6 sor), a jobb oldalon pedig egy 1x3-as, amelynek első és utolsó sora olyan alacsony, amennyire csak lehet, míg a középső a tartalommal teli a lehető legnagyobb helyet foglalja el. Már gondolom sejtik, hogy a középső cella magasságának 100%-ra állításával az így az elérhető legnagyobb helyet megszerzi magának. Csak az a kérdés, hogy mekkora ez a hely? – Mivel az elrendezést adó táblázatban a középső cella csupán 10-10%-nyi helyet kapott, a belső táblázat celláinak tartalma fogja meghatározni, mennyi helyet kényszerít ki magának. A bal oldali linkek részére létrehozandó 6 sorba kerülő képek és feliratok valamekkora részt elfoglalnak, ezzel megadják azt a minimális helyigényt, amire annak szüksége van. Ez lesz az a magasság, amelyet a jobb oldalra kerülő táblázat magára nézve maximumnak tekinthet, amelyen belül a középső cella magassága a 100%-os értékével a maximumra törekedhet. Létrehozhatunk-e egy táblázatot a kért feladat megvalósítására? – A válasz igen, de nem ajánlatos, mert a bal és a jobb oldali rész egymásra hatással lesz, ami mindig megzavarja a kívánt megjelenítést. Jobban járunk azzal, ha inkább két táblázatot helyezünk egymás mellé, mert így a 6 gombot bármikor 7-re növelhetjük, illetve a jobb oldali részen ugyancsak elvégezhetünk tetszőleges módosításokat a bal oldal megzavarása nélkül. Hogyan helyezzünk egymás mellé két táblázatot? – A válasz egyszerű. Hozzunk létre egy 2x1-es táblázatot, amelynek bal oldali cellájába kerül a navigálásra szolgáló 1x6-os táblázat, a jobb oldaliba pedig az 1x3-as. Erről talán most ön azt gondolja, hogy feleslegesen bonyolítjuk a táblázatokkal a helyzetet, de nincs igaza, mert erre nincs más megoldás. Alkalmazhatnánk ugyan olyan táblázatot, amelynél a cellák felosztása, egyesítése révén eljuthatnánk az ideális formához, de azt nem tudjuk később úgy változtatni, hogy az ne legyen káros hatással a weblap többi részére. Vegyük észre, már most a kezdeteknél arra készülünk, hogy változni fog a gombok száma, a weblap felépítése, és azt a lehető legkisebb áldozatok árán szeretnénk a későbbiek során elvégezni. 44
Honlap „Varázsló-forma” elrendezésben Most összegezzük az eddigieket. Létre kell hoznunk egy 2x1-es táblázatot, amely befoglalója lesz a gombsor és a tartalmi rész egy-egy táblázatának. A táblázataink számára szükséges szélességi méretet megadhatjuk ennél a táblázatnál, és a bele kerülő táblázatoknál is. Gondoljuk át, melyik lenne áttekinthetőbb? Igazából nincs jelentősége, csak figyeljünk az értékek helyes megadására, hogy azok nehogy egymásnak ellentmondóak legyenek.
24. ábra. A fő részt befoglaló táblázat HTML-kódja A táblázat definíciója (
) tartalmaz néhány új paramétert, amelyek értelmezése felvet pár új kérdést. Vegyük észre, hogy hiába készítenénk csak vizuális eszközökkel weblapot, a pontos megjelenítés kulcsa a részletekben van elrejtve. A fenti HTML-kód annyira rövid, mégis annyi új ismeretet tartalmaz. border=0: A keretnek alapértelmezésben van vastagsága, ezért ha erre nekünk nincs szükségünk, akkor meg kell adnunk „0 px” értékűre. cellpadding=0: A belső margó értéke, ami a cellán belüli tartalom és a cella
széle között mérendő. Amikor például a 23. oldalon lévő ábra kialakításán dolgoztunk, akkor a belső margó értékét nullára kellett állítani, mert különben az egyes elemek között hézag jelentkezne. cellspacing=3: A cellák szélei közötti távolság értéke pixelben. Ha nincs ke-
retvastagság beállítva, akkor szemre nehéz eldönteni, hogy mikor melyik értéket állítsuk be. Mivel itt az egyes cellák kapnak egy háttérszínt, ezért hasznos, ha a cellák közötti hézagon átlátszódik a háttérszín vagy a háttérgrafika, ami különleges hatást kelthet. width=776: A táblázat teljes szélessége. Azért éppen 776 pixel, mert 24 pixelt
foglal el a görgetősáv és a programablak szegélyvonala (ablakos nézetben). Ha ezek vastagságát levonjuk, akkor elérhetjük, hogy a táblázat egy 800x600-as képernyőn is éppen kiférjen vízszintes görgetés nélkül. bgcolor=”#0000ff”: A táblázat háttérszínét alkotó RGB (Red-Green-Blue; pi-
ros, kék, zöld) összetevők értéke 16-os számrendszerben kifejezve. Az átszámítást a vizuális programok szükségtelenné teszik. 45
Egyedi elrendezésű weblapok A háttérszínezés több egymásba épülő táblázat esetén nem egyszerű feladat, könnyen eltévedhetünk benne, ha nem figyelünk oda. Amennyiben a befoglaló táblázat középső sorában lévő 3 cellánál megadjuk egyesével a háttérszíneket vagy háttérképeket, akkor erre már a későbbiek során nincs szükség, mert csak magunkat zavarnánk meg vele. A most létrehozott táblázatunk két cellájába fogjuk elhelyezni a már említett 1x6-os és 1x3-as táblázatokat. A bal oldali táblázat forráskódjából az egyik sort (
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 (
) 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 „<span>“ 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:
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ő „
” 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
Á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 „<span>” é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 }
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.
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. <style type="text/css">
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
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
<script language="JavaScript"> window.setTimeout("menet_1()", 3000); function menet_1() { felirat1.filters.revealTrans.apply(); // Az 1. állapot rögzítése. felirat1.innerText = "Egy weblap speciális effektekkel csak IE-ben!"; felirat1.filters.revealTrans.play(); // a play(5.0) 5 mp-ig tart. window.setTimeout("menet_2()", 2000); } function menet_2() { felirat2.filters.revealTrans.transition+=1 felirat2.filters.revealTrans.apply() felirat2.innerText = "Ez kell nekem!\n www.moricznet.hu! " felirat2.filters.revealTrans.play() window.setTimeout("menet_3()", 2000); } function menet_3() { obj=felirat2.filters.revealTrans obj.transition+=1 x = obj.transition; if (x>23) x=0 obj.apply() felirat2.innerText = "" obj.play() window.setTimeout("menet_2()", 2000); }
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)
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 <STYLE TYPE="TEXT/CSS"> body { margin: 0pt; font-family: Arial Black; } h1, h2 { color:white; display:none; text-align:center; } <script LANGUAGE="JavaScript">
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ő <style>-blokkban írjuk meg. Itt megadhatjuk, hogy a szöveg vízszintesen legyen középre igazítva, és a megjelenítését tiltsuk le. E módszer előnye, hogy szerkeszteni tudjuk, de nem fognak a feliratok megjelenni, mert azt majd a programból fogjuk időzítve vezérelni. Ha több sornyi szöveget akarunk elhelyezni, akkor ennek megfelelően több táblázati sort és több azonosítóval ellátott címsort hozzunk létre. E módszer előnye, hogy a feliratok egyszerűen elkészíthetők akár a Jegyzettömb vagy a FrontPage Express programmal. A feliratokat úgy tervezzük meg, hogy azok között 1-2 másodperc szünetet fogunk tartani, mert ennyi idő kell ahhoz, hogy azt el lehessen olvasni, de többet nem szánhatunk rá, mert akkor már unalmasan lassú lesz az „animáció”. Ennek megfelelően a szöveg kösse le a látogató figyelmét, tehát valami érdekes információt közöljön. Tipp. A háttér színének megadásakor ne használjuk az erre szolgáló stíluselemet, mert akkor a programunkban nem tudjuk megváltoztatni a színt (IE 5.0), mivel a stílus definíciója magasabb rendű.
A következő lépésben írjuk be a programot a forrásban megadott helyre a fejrészen (head) belülre. Megadhatnánk a szkript forrását az src-paraméterrel, de akkor egy újabb fájl lehívására is várni kellene a megjelenítés előtt. A programot a fejrészben helyezzük el, viszont megadjuk, hogy mely függvényét indítsa el a webböngésző a lap betöltődésekor. Ha ezt nem adjuk meg, és azonnal hivatkozunk az egyes elemekre, akkor hibaüzenetet kapunk, mert ez a fázis még az oldal betöltődése előtti időpontban történik. Ezt elkerülhetjük, ha a teljes programot áthelyezzük például a weblap végére a elem elé. Ebben az esetben az „elfed()” függvény tartalma a függvényen kívül szintén elhelyezhető, közvetlenül a szkript elején, illetve a „window.onload=elfed;” sorra sincs szükség, hiszen ekkor már a lap betöltődött, vagyis az onload esemény utáni időpillanatnál tartunk. A programunk a lap betöltődésekor fog elindulni az elfed() függvénynyel. Ebben meghívjuk a szoveg(1) függvényt, amelynek átadjuk az „1”-et paraméterül, amivel azt jelezzük, hogy az első címsort jelenítse meg. Ehelyett használhatnánk az a1.style.display='block'; utasítást, amely az „a1” nevű elem stílusában a megjelenítést (display) bekapcsolja (be = block). 75
Egyedi elrendezésű weblapok Az első elem megjelenítése után a „setTimeout()” függvénnyel időzítjük a többi megjelenítését az előző elrejtésével együtt, majd a legvégén az ablakot önmaga bezárására utasítjuk (close()). Az időzítőnél a kívánt utasítást kell megadni és a bekövetkezés idejét ezredmásodpercben (1 mp = 1000). takar.html <script>-tagja window.onload=elfed; function elfed() { szoveg(1); window.setTimeout("szoveg(2)", 1000); window.setTimeout("szoveg(3)", 2000); window.setTimeout("szoveg(4)", 4000); window.setTimeout("szoveg(5)", 6000); window.setTimeout("close()", 7000); } function szoveg(x) { for (i=1; i<6; i++) eval("a" + i +".style.display='none';"); eval("a"+x+".style.display='block';"); } function szoveg_REGI(x) { a1.style.display='none'; a2.style.display='none'; a3.style.display='none'; a4.style.display='none'; a5.style.display='none'; if if if if if
50. ábra. A címsorok felvillantását eredményező szkript Miután az elfed() függvény felprogramozta az időzítőt, már nincs más dolga, így a futása véget ér, és egy másodpercig nem történik semmi, olvashatjuk az első feliratot. Ezután viszont kiadásra kerül a szoveg(2) parancs, amit előbb inkább a szoveg_REGI() függvényen kövessünk nyomon. Először ezt írjuk be és próbáljuk ki, majd rátérünk a szoveg() függvényre, ami ugyanazt valósítja meg, de csak 2 sorban a 10 helyett. (Értsd úgy, hogy először a szoveg_REGI() függvényt nevezzük szoveg()-nek, és csak miután megértettük a működését, azután rövidítsük le a kétsoros változatra.) 76
Honlap „Varázsló-forma” elrendezésben A szoveg() függvényben egész pontosan mindig csak arra lenne szükségünk, hogy az előzőleg megjelenített címsort elrejtsük, és a soron következőt megjelenítsük. Azonban ez több if-vizsgálatot igényelne, ezért járjunk el egyszerűbben, és rejtsük el előbb az összes címsort, és utána csak azt jelenítsük meg, amelyiket a függvény meghívásakor a paraméterben kértük. Az elrejtésnél az 5-ből 4-et feleslegesen rejtünk el, de ez nem probléma, hiszen az egész művelet csupán pillanatokat igényel, így ez a kis „időhúzás” belefér. A következő 5 if-vizsgálatot már nem ússzuk meg, mert csak azt az egy címsort kell megjeleníteni, amelyiket kértük a paraméter átadásával. Egyelőre csak ezt elemezzük. Ha az „x” értéke 1..5, akkor az adott elemet jelenítse meg, más dolga nincs. A JavaScript azonban biztosít nekünk egy nagyszerű utasítást, amivel az elem nevét is előállíthatjuk több változóból összerakott karakterláncból, sőt karakterlánc-műveletekkel összeállíthatunk egy egész utasítássort, és ezt is képes kiértékelni, majd feldolgozni. Ezt fogjuk alkalmazni a szoveg() függvényben. for (i=1; i<6; i++) eval("a" + i +".style.display='none';"); eval("a"+x+".style.display='block';");
Indítunk egy ciklust egytől ötig egyesével léptetve, majd a ciklusmagban egy eval() függvényhívást helyezünk el, amely paramétere lesz a teljes utasítássor. Itt nekünk az a1, a2...a5 azonosítókat kell előállítanunk, illetve hozzáfűzni az utasítás többi részét, és ennek végrehajtását rábízni a rendszerre. Az eval() által végrehajtandó utasítás így néz ki: a1.style.display='none';. A következő sorban már nem kell elvégeznünk az if-vizsgálatokat, mert közvetlenül össze tudjuk rakni az utasítását a kért egyetlen elem megjelenítésének. Ezt persze az előző ciklusnál is megtehetnénk a következő kifejezéssel, de ekkor az első címsor megjelenítésével járó kellemetlenséget ki kell küszöbölnünk, mert akkor nincs „előző címsor”, amit el kellene rejteni. if (x>1) eval("a" + (x-1) +".style.display='none';");
Ha a kapott paraméter nagyobb, mint egy, akkor hajtsa végre az eval() utasítást. Ebben az esetben az X>2 és x<=5, és az előző címsort kell elrejteni, vagyis az „x-1”-edik elemet. A műveletet azonban zárójelbe kell tenni, mert a többi plusz jel (+) karakterláncok összefűzését jelenti és nem összeadást! 77
Egyedi elrendezésű weblapok
Háttérszín váltása a takarólapon
Az előző takarólapunk megjelenik teljes képernyős méretben, akkor a látogató elolvassa a feliratokat, és mire feleszmél, hogy mi történt, addigra az egésznek vége, és talán a lapunk is betöltődött teljes egészében. Ha mégsem így lenne, és még szeretnénk egy kis időt nyerni, akkor bővítsük ki az alábbiakkal a programunkat. Ez a kiegészítés folyamatosan átváltja a háttérszínt két szín között, de ezt 1/255-ös lépésben teszi, ami nagyon szép folyamatos átmenetet képez, mintha levennénk a monitorunk fényerejét. A szinvalto() függvény a főprogram, amelynél meg kell adnunk a kezdőszínt és a záró színt, majd 7. paraméterben a váltás lépéseinek számát 1-255 értékekkel. Az animációba számítsuk bele majd azt is, hogy amíg a színváltás történik, addig nem lép tovább a program, ami szintén értékes másodperceket jelent a bemutató során. A hex() és a szinbeallitas() függvények az előző kiegészítésére szolgálnak. takar.html <script>-tagja // Színváltó program. // Az előző szkript mögé írandó. var hexa = new Array(16); hexa.length = 16; for(var i = 0; i < 10; i++) hexa[i] = i; hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; hexa[13]="d"; hexa[14]="e"; hexa[15]="f"; function hex(i) { if (i < 0) return "00"; else if (i > 255)return "ff"; else return "" + hexa[Math.floor(i/16)] + hexa[i%16]; } function szinbeallitas(r, g, b) { var hr = hex(r); var hg = hex(g); var hb = hex(b); document.bgColor = "#"+hr+hg+hb; } function szinvalto(sr, sg, sb, er, eg, eb, step) { for(var i = 0; i <= step; i++) { szinbeallitas( Math.floor(sr * ((step-i)/step) + er * (i/step)), Math.floor(sg * ((step-i)/step) + eg * (i/step)), Math.floor(sb * ((step-i)/step) + eb * (i/step))); } }
51. ábra. A színváltó program és kiegészítő függvényei 78
Honlap „Varázsló-forma” elrendezésben Lássuk röviden, mit hajt végre ez a program. Először létrehozunk egy hexa[] tömböt, amelybe a 16-os számrendszerbeli számjegyeket helyezzük el, mivel a színkódokat így kell majd megadni. A hex() függvény a kapott paramétert először ellenőrzi, hogy biztosan 0 és 255 közötti érték legyen, majd átváltja azt 16-os számrendszerbeli értékre. Ehhez a számot el kell osztani 16-tal, és az első számjegyet ennek egészrésze adja, míg a másodikat ezen osztás maradéka. Az egész osztáshoz lekerekítjük az eredményt, míg a maradékos osztáshoz a „%” jel operátort használjuk. A szinbeallitas(r, g, b) függvény a kapott RGB-vel megadott szín kódjait átváltja hexára, és kiadja a document.bgColor utasítást, amivel beállítja a színt. Amint már említettem, ez az utasítás nem működik, ha a BODY elem háttérszínét a stílusblokkban vagy a csatolt stíluslapon adtuk meg. A főprogramot itt a szinvalto() függvény képviseli, amely az általunk megadott lépésben átváltja a háttérszínt a két megadott R1G1B1 és R2G2B2 színek között. Láthatjuk, hogy például 5 lépés esetén 5 db színállítási utasítást ad ki, míg 255 esetén 255-öt, ami jóval tovább tart, és sokkal finomabb lesz a szín változása, ami a szemnek is kápráztatóbb lesz, mintha csak átvillantanánk a színt az egyikből a másikba. Tipp. Külön szintaktikai érdekesség a szinbeallitas() függvény meghívásánál alkalmazott többsoros kialakítás, ami így nemcsak helyes, de jól áttekinthető képleteket eredményez. Így jelentősen csökkenthetjük a hibázás lehetőségét, ráadásul a sorok másolásával egyszerűsíthetjük a beírást.
A színváltást ezután az alábbi sorok beírásával tetszőlegesen alkalmazhatjuk akár mindegyik címsor felvillantása után. Azért óvatosan bánjunk a színváltással, nehogy villogás legyen belőle, mert az zavaró lesz a látogató számára, és ez nem célunk. A beírásnál az alábbiakban is bemutatott módon tagoljuk a színkódokat, hogy áttekinthetőbbek legyenek a paraméterek. A színváltást is időzíthetjük, bár ez a művelet hosszabb volta miatt kicsit nehezebb. A módszert alkalmazhatjuk akár a saját weblapjainknál is, de csak 1-2 perces időzítéssel. //
Az alábbi sorokat az elfed() elejére írjuk be: szinvalto(200,255,200, 0,0,0, 255); window.setTimeout("szinvalto(0,0,0, 33,169,138, window.setTimeout("szinvalto(33,169,138, 0,0,0,
255)", 3000); 255)", 5000);
52. ábra. A színváltó programunk indítási lehetőségei 79
Egyedi elrendezésű weblapok
Képek letöltése előre
Ma már egyre több vizuális weblapszerkesztő program úgy készíti el az oldalait, hogy azok tartalmazzák a dinamikus gombok váltóképeit letöltő programokat. Így ha az oldal letöltődött, akkor rámutathatunk a gombokra, és azok át tudnak váltani a másik képükre, mert már az a változatuk ugyancsak elérhető lesz. Ha nem töltenénk le a képeket előre, akkor egy ilyen dinamikus gombra való rámutatáskor az történne, hogy a forrásának módosításkor kezdene hozzá a váltókép letöltéséhez. Könnyen beláthatjuk, hogy az egérmutatót szinte egy másodperc alatt végighúzhatjuk a gombsoron, és a dinamikus gomboknak ilyenkor azonnal át kellene váltaniuk a másik képre, amellyel a gomb benyomódásának hatását keltenék. Mivel a váltókép még nincs letöltve, ezért csak a kép helye fog megjelenni, amit a látogató egyértelműen hibás megjelenítésnek fog vélni. Fontos! Ismét egy olyan jelenséggel állunk szemben, amikor a weblap készítője elvárná, hogy a látogató várja meg az összes kép letöltődését, hogy az a tervezett módon jelenjen meg. Nem. Vegyük tudomásul, hogy a látogató nem a grafikai trükkjeinkre kíváncsi, hanem váltani akar az oldalak között a linkek segítségével, és nem óhajtja türelmesen megvárni az utolsó képkocka letöltődését is, mert nem az a célja. A képek letöltésekor kétféle képre kell gondolnunk, amelyek azonnal megjelennek, és amelyek csak rámutatáskor. Az előbbieknél a megjelenésben van különbség, míg az utóbbiaknál a már említett probléma lép fel, vagyis a rámutatáskor már nincs arra idő, hogy a böngésző lehívja a képet, annak akkor már ott kell lennie. A képek lehívása úgy történik, hogy létrehozunk új Image() objektumokat, és azok forrását megadva a böngészőt arra utasítjuk, hogy töltse le a képeket, noha azok még nem szerepelnek képként a body-részben. Viszont amikor majd kicseréljük egy kép forrását, mert a látogató rámutatott, akkor az a kép elérhető lesz, mert már letöltöttük. E módszer hátránya, hogy előre meg kell adnunk azon fájlok neveit, amelyeket előre le kell hívnunk. Ez azért gond, mert a fájlok nevei változhatnak, a képek sora bővülhet, és nem biztos, hogy a JavaScript programunkban mindig pontosan újraírjuk a fájlok neveit, ez pedig a várt hatás elmaradását okozza. A problémát úgy oldhatjuk meg, ha az oldalon megjelenő képeknek olyan nevet adunk, amelyet programból elő tudunk állítani, mert egy névből és egy sorszámból állnak (például: kep-10.jpg). A sorszámot egy ciklusváltozóval előállíthatjuk, és karakterlánc-műveletekkel a fájlnév összerakható. 80
Honlap „Varázsló-forma” elrendezésben Hasznos megoldás az is, ha a gomboknak például „gomb-10.jpg” alakú nevet adunk, a benyomott változatnak pedig „gomb-10_nyom.jpg” formájút. Így ugyanis a programunk már a képek beolvasásakor ellenőrizheti a nevet, és ha annak a bal felén megtalálható a „gomb” szó, akkor vegye le a fájlnévből a bal oldali 7 karaktert, és fűzze hozzá a „_nyom.jpg” részt, és azt szintén hívja le. Ha ezt a kis saját magunk alkotta szabályt betartjuk, akkor egy viszonylag egyszerű programmal megoldhatjuk a benyomódó gombok képének lehívását. A képek lehívásához és más egyéb hasznos szkript alkalmazásához a következőképpen járjunk el. Helyezzük el az alábbi „script” tartalmú sort minden weblap fejlécében (-részében), és akkor minden oldalunkról elérhetők lesz olyan általános szkriptek, amelyekre általában szükségünk van. ... <script LANGUAGE="JavaScript" src="vegyes.js"> ...
A módszer előnye, hogy így minden oldalról elérhetők lesznek az itt megírt programok, de a módosításhoz mindig csak a „vegyes.js” fájlt kell átírni, és mindenhol azonnal jelentkezik annak hatása. A képek előre történő lehívását az alábbi programmal végezhetjük el. vegyes.js részlete window.onload = keplehivas; function keplehivas() { var db = document.images.length; window.status = db; var kepek = new Array(db); for (i=0; i
53. ábra. A weblapon lévő képek lehívását végző program A fejrészben megadott JS-fájl a weblap betöltődésekor indul el, amikor még a body-részt nem olvasta el, így azonban nem tudjuk a body-ban lévő képek fájlneveit kiolvasni, mert még időben nem tartunk annál a fázisnál. Ennek kivédésére adjuk ki a „window.onload = keplehivas;” utasítást, ami azt jelenti, hogy a lap betöltődésekor azonnal indítsa el a keplehivas() függvényt. 81
Egyedi elrendezésű weblapok Ezen a helyen elhelyezhetünk még olyan függvényeket, amelyekre később lesz szükségünk, mert csak olyanokra hivatkozhatunk, amelyeket a böngésző már beolvasott. Ez azért van, mert a böngésző nem olvassa be az összes fájlt a végrehajtás előtt, hanem ahogyan olvassa, úgy hajtja végre azokat, így csak olyan objektumokra, függvényekre hivatkozhatunk, amelyeket már előtte betöltött, kiolvasott a böngésző. A módszer jó, mert nem kell tudnunk, hogy a fájlokat hogyan neveztük el, de rossz, mert csak akkor kerül rá a vezérlés, amikor már elkezdődött az oldal letöltése. Ilyenkor már a webböngésző is elkezdené a képek letöltését, hiszen ezt a forráskódból épp ekkor olvassa ki. Azonban hasznos lesz ez a módszer a weblapon nem szereplő képek lehívásához a következő programunkban, ezért előbb értelmezzük ezt a megoldást. A document objektum images eleme egy olyan objektum, ami a weblapon található összes kép adatait tartalmazza. Mivel ez egy tömb, ezért a length tulajdonsága adja meg a tömb hosszát. Ezt előbb lekérdezzük, majd létrehozunk egy új tömböt (Array), amelyben elhelyezzük az összes képünket. Előbb létrehozunk egy új kép objektumot (new Image), majd megadjuk annak forrását. A forrás megadásával arra utasítjuk a webböngészőt, hogy töltse le a kért fájlt. A letöltés külön programszálon indul meg, így a mi szkriptünk végrehajtása nem áll le. A ciklus gondoskodik róla, hogy az összes kép lehívásának elindítása megtörténjen. Most pedig lássuk a módosított változatot. vegyes.js részlete window.onload = keplehivas; function keplehivas() { var db = document.images.length, ki=0, art = ""; window.status = db; var kepek = new Array(); for (i=0; i
54. ábra. A weblapon csak később megjelenő képek lehívását végző program 82
Honlap „Varázsló-forma” elrendezésben A jelenlegi kiegészítés lényege abban áll, hogy sorban lekérjük az összes kép fájlnevét az elérési útjával, és – előre feltételezve a helyes fájlnevet – feldaraboljuk azt útvonalra (ut), fájlnévre (fajlnev), illetve a daraboláshoz szükséges pontok helyzetét határozzuk meg (v, miez, ph). A „lastIndexOf()” függvény segítségével megkapjuk a „gomb_” szó első betűjének pozícióját, amivel fel tudjuk osztani (slice()) a karakterláncot útvonalra és fájlnévre. A fájlnevet tovább daraboljuk, hogy a bal oldali 4 karakterét meg tudjuk vizsgálni, illetve a kiterjesztés előtti pont helyét kell még ismernünk, hogy majd az új fájlnévhez hozzáadhassuk. Ha a levágott 4 karakteres darab a „gomb” szó, akkor az új forrás legyen az eredeti teljes útvonalat és fájlnevet tartalmazó karakterlánc a kiterjesztés nélkül (feltételezve a 3 karakteres kiterjesztést, tehát nem JPEG, hanem JPG, GIF vagy PNG!), amelyhez hozzáfűzzük (+) a „_nyom” tagot és a kiterjesztést ponttal. Ezt a fájlnévből vágjuk le a pont helyének ismeretében (ph). Találunk még az előző forrásprogramban néhány döntötten szedett utasítást, amelyekre a program szempontjából nincs szükségünk, de a fejlesztés során nagyon hasznos szolgálatot tehet. Először definiáljuk és üres állapotba helyezzük az art változót, majd ebbe gyűjtsük be az összes forráscímet egy-egy sortöréssel (\n) lezárva. Ha az összes fájlt beolvastuk, akkor jelenítsük meg az eredményeket egy párbeszédablakban, amivel ellenőrizhetjük a program futását. Hasonló szerepet tölt be a window.status = “” utasítás is, amivel az ablak állapotsorába írhatunk ki részeredményeket. Változás még az előző programhoz képest, hogy itt nem tudjuk pontosan, hogy a képek közül melyik lesz gomb, amelyiknek van lehívható változata, ezért egy külön (ki) változót vezetünk be, és a tömb indexeként ezt használjuk. Ugyanezen oknál fogva a tömb létrehozásakor sem adjuk meg az új tömb méretét, mert nem tudjuk előre. Megadhatnánk az összes kép darabszámát, de feleslegesen foglalnánk a helyet, mert nem minden képünknek lesz váltótársa (bár ennek nincs sok jelentősége). A JavaScript nyelvben járatlanoknak újdonság lehet a kepek[ki++] kifejezés, ahol a kepek[] tömb indexének megadásával egyidejűleg a ki változót megnöveljük eggyel. A ki++ azt jelenti, hogy előbb átadja az értékét, és csak utána növeli meg. A ++ki jelentené azt, hogy használat előtt növelje meg. Ezzel találkozunk az alert() függvénynél, ahol a kiírásban a ki változót eggyel csökkentenünk kell, mert akkor kapunk pontos értéket. Mivel a karakterláncok összefűzése a +jellel történik, ezért a félreértések elkerülése érdekében ezt a műveletet zárójelbe tesszük, és így annak eredményét fogja program az összefűzéskor felhasználni. 83
Egyedi elrendezésű weblapok
Feltételezett képek letöltése előre
Lássunk végezetül egy olyan megoldást, ahol az oldal betöltődése előtt hívjuk le a képeket, amikor még „nem láthatjuk” azok fájlneveit, de a saját szabályrendszerünk miatt feltételezhetjük. A feltételezést se bízzuk a véletlenre, és egészítsük ki a fájlnévképzési szabályunkat azzal, hogy a head-részben megadjuk a letöltendő képek, gombok, ikonok sorszámtartományát. Azért éppen itt, mert a fejrészből meghívott JS-fájl még csak ezt a tartományt tudja olvasni, így az itt elhelyezett META-tagokban hagyhatunk a program számára üzenetet. Ennek formátumát is mi alakítjuk ki, mert a programunkat is arra kell felkészíteni, ezért a magunk alkotta szabályokat mindig tartsuk be. Helyezzük el az egyik weblapunk forrásában a fejrészben az alábbi META-tagokat. index.html részlete <meta name="gombok" content="11-16"> <meta name="ikonok" content="1-3"> ... <script LANGUAGE="JavaScript" src="../index/vegyes.js"> ...
55. ábra. A fejrészben hagyott üzenet a JS-program számára vegyes.js részlete alert( metaOlvaso("ikonok") ); // Csak tesztelési célra. // Eredmény: “1-3” function metaOlvaso(par) { var obj = window.document.documentElement.all; var art="", i=0, mehet=true; oke=false; var dba = obj.length; while (mehet) { if (obj(i).nodeName=="META") { if (obj(i).name==par) { mehet=false; oke=true; } } if (i
56. ábra. Az egyéni META-tagok olvasása JS-programból 84
Honlap „Varázsló-forma” elrendezésben A JS-fájlba helyezzünk el egy alert() üzenetet, amellyel a készülő függvényünket tudjuk tesztelni. Ennek meghívására a weblap fejrészének letöltése után kerül sor, amikor a body-részt még nem olvasta el a webböngésző, tehát onnan adatokkal nem rendelkezünk. A program kulcsát a window.document.documentElement.all objektum rejti, amely az ablakban lévő ismert részek minden adatát tárolja. Érdemes ennek méretét külön kiíratni egy alert() ablakba, hogy lássuk, mi felett rendelkezünk ekkor és az onload esemény bekövetkezése után. Például: vegyes.js részlete alert( window.document.documentElement.all.length ); window.onload = betolteskor; function betolteskor() { alert(“Betöltés után: ” + window.document.documentElement.all.length); } // Nálam ez a fejrészben 9-es, és utána 144-es értéket adott.
57. ábra. A kérdéses rendszerváltozó tesztelése Az egyes elemekre a window.document.documentElement.all(1).name alakban lehet hivatkozni, ahol a „name” helyett tetszőleges objektumtulajdonság állhat. Például: name, content, nodeName, outerHTML stb. Ez a tulajdonság minden elemnél eltérő, hiszen itt a weblapon megjelenő összes elem összes jellemzőjét kiolvashatjuk, és mindegyiknek más tulajdonsága ismert. A programunkban először áthelyezzük egy obj változóba a használandó objektumot, mert zavaróan hosszú lenne mindig a teljes nevére hivatkozni. Ezután kiolvassuk a hosszát (length), és elindítunk egy elöl tesztelt ciklust, amelyben a következő logika szerint vizsgálódunk. Ha az elem csomóponti neve (nodeName) „META”, akkor jó, mert innen akarjuk az egyiket kiolvasni. Ha ezután az adott objektum neve egyezik a paraméterben megadottal, akkor a magunk logikai változóit beállítjuk, hogy a ciklus nem mehet tovább, mert oké, vagyis van találat. Ha nincs vagy nem META-tagot olvastunk, akkor nézze meg, hogy van-e még tag, amit olvashatunk, tehát a számláló hol tart. Ha még van mit olvasni, akkor növelje meg az „i” értékét (i++), ellenkező esetben a mehet=false, vagyis nem mehet tovább a ciklus, és véget ér. Ha a while-ciklusból kiléptünk, akkor vagy van eredmény, vagy nincs, ezt mondja meg nekünk az oke logikai változó, és ettől függően adjuk vissza vagy az objektum content tulajdonságát, vagy a „00”-t, jelezve az adat hiányát. 85
Egyedi elrendezésű weblapok Nézzük meg a HTML-ben, egy META-tagot adtunk meg, amelynek neve volt az „ikonok”, és ennek „content” paraméterében helyeztük el az „1-3” karakterláncot, amellyel azt jeleztük a programunk számára, hogy majd töltse be az „ikon_1.gif”, „ikon_2.gif” és „ikon_3.gif” fájlokat. A továbbiakban a képek betöltését nézzük meg, amelyhez ezt a META-olvasó programrészt is fel fogjuk használni. lehivasMeta();
vegyes.js részlete
function lehivasMeta() { var gombSz = metaOlvaso("gombok"); // Pl.: "11-16" var ikonSz = metaOlvaso("ikonok"); var kepSz = metaOlvaso("kepeim"); // Pl.: "00", nincs ilyen tag. var kepek = new Array(), ti=0, art=""; alert(gombSz+" / "+ikonSz+" / "+kepSz); // CSAK TESZTELÉSRE... // GOMBOK olvasása if (gombSz!="00") { var x = gombSz.indexOf("-"); var kGomb = gombSz.slice(0, x), vGomb = gombSz.slice(x+1); for (var i=kGomb; i<=vGomb; i++) { forras = "images/gomb_" + i + ".jpg"; // Pl.: gomb_11.jpg kepek[ti]=new Image(); kepek[ti++].src = forras; art += forras+"\n"; forras = "images/gomb_" + i + "_nyom.jpg"; // Pl.: gomb_11_nyom.jpg kepek[ti]=new Image(); kepek[ti++].src = forras; art += forras+"\n"; } } art += "\n"; // Csak tesztelésre. // IKONOK olvasása. Ugyanaz, mint az előző kis változtatással. if (ikonSz!="00") { var x = ikonSz.indexOf("-"); var kIkon = ikonSz.slice(0, x), vIkon = ikonSz.slice(x+1); for (var i=kIkon; i<=vIkon; i++) { forras = "images/ikon_" + i + ".gif"; // Pl.: ikon_11.gif kepek[ti]=new Image(); kepek[ti++].src = forras; art += forras+"\n"; } } art += "\n"; // KÉPEK olvasása. Ugyanaz, mint az előző kis változtatással. if (kepSz!="00") { var x = kepSz.indexOf("-"); var kKep = kepSz.slice(0, x), vKep = kepSz.slice(x+1); for (var i=kKep; i<=vKep; i++) { forras = "images/kep_" + i + ".png"; // Pl.: kep_12.png kepek[ti]=new Image(); kepek[ti++].src = forras; art += forras+ "\n"; } } alert(art); // CSAK TESZTELÉSRE... }
58. ábra. A különböző képek lehívása előre feltételezett nevek alapján 86
Honlap „Varázsló-forma” elrendezésben A „lehivasMeta()” függvényünk elején előbb kiolvassuk az adott weblap azon META-elemeit, amelyeket mi helyeztünk el, jelezve a letöltendő képfájlok számtartományát. A kiolvasás után a biztonság kedvéért jelenítsük meg a kapott számokat, hogy bizonyságot szerezzünk, a kiindulási adataink helyesek-e. Arra ügyeljünk, hogy csak alakilag helyes formákat adjunk meg (pl. 25-33), mert magunknak tennénk rosszat, ha kihagynánk a kötőjelet vagy valamelyik számot, esetleg mást is beírnánk. A feldolgozás akkor kezdődhet, ha az adott paraméter létezett, és nem „00” értéket kaptunk visszatérési értékként. Ebben az esetben az indexOf() függvénnyel megkeressük a kötőjelet, és annak pozíciója segít elválasztani a kezdőértéket a végértéktől, amelyhez a slice() függvényt használjuk. A kGomb változóba tároljuk a kezdőszámot, a vGomb-ba pedig a végértéket. Feltételezzük a jó értékeket, és nem ellenőrizzük, hiszen mi adjuk meg, és nem akarunk magunknak rosszat tenni. Ezután indítunk egy ciklust, ahol a ciklusváltozó felveszi a kezdő- és a végértéket folyamatosan egyesével. A forras változóba összeállítjuk a kép forrását, amibe beletartozik az elérési út és a fájlnév. Feltételezzük, hogy a képeket az images mappában tároljuk, gomb_11.jpg alakú fájlnévvel mentettük el, amelynek a váltópárja például gomb_11_nyom.jpg formátumú. Ezután létrehozunk egy új Image() objektumot, és megadjuk ezt a karakterláncot a forrásaként. Ellenőrzésképpen az art változóba gyűjtjük össze a fájlneveket, és mindegyiket egy sortöréssel zárjuk.
59. ábra. Az előállított fájlneveket az alert() függvénnyel ellenőrizhetjük Erre csak azért van szükségünk, hogy a végén megjelenítsük egy alert() függvény segítségével, ahol ellenőrizhetjük, hogy valóban azokat a fájlneveket állította-e elő a program, amelyekre gondoltunk, amilyen fájlokkal valóban rendelkezünk. A forrás megadásakor a tömb indexét azonnal megnöveljük a felhasználás után, amivel egy utasítást megspórolunk, bár a forráskód egy kicsit csúnyább lesz tőle. Az ikonok, a képek és más egyéb általunk használt képfajták esetében is ugyanígy járunk el, csak ott esetleg a benyomott gombváltozatra nincs szükség, mivel azokra mutatva nem történik képváltás. 87
Egyedi elrendezésű weblapok
JavaScript: Általános célú kiegészítő szkriptek A továbbiakban olyan kiegészítő szkripteket nézünk meg, amelyek nem feltétlenül szükségesek az adott oldal elkészítéséhez, illetve más helyzetben is felhasználhatók akár önállóan is. Némelyik inkább más elrendezéseknél hasznos.
A weblap tartalmának nyomtatása
A weblapjainkon közölhetünk olyan információkat, amelyekre a látogatóknak szüksége lehet, és talán szeretnék azt azonnal kinyomtatni. Ilyen esetben kiválaszthatják a webböngészőjükben a nyomtatás gombot, ha az elérhető. Mi viszont új ablakban akarjuk megnyitni az ilyen részletesebb tartalmakat, ahol érdemes letiltani minden felesleges ablakrészt, mert úgy a megjelenő ablak egy párbeszédablakhoz fog hasonlítani, amitől sokkal elegánsabb lesz. Ilyen helyzetben nem érhető el a nyomtatás gomb, de mi elhelyezhetünk egyet a weblapon, aminek olyan előnye van, hogy felhívja a látogató figyelmét arra, hogy az oldal tartalmát ki kellene nyomtatni. Ez egyébként nem jutna eszébe, mert szinte soha nem szoktuk a weblapok tartalmát kinyomtatni, csak ha az olyan információt tartalmaz, amely alaposabb elolvasást igényel, esetleg mással való megbeszélést. Ha viszont erre mi buzdítjuk a látogatót, akkor olyan oldalainkat is kinyomtathatja, amelyre először nem gondolt. Ez már a weblapunk tervezésében a reklámfogás rész, ami szintén fontos szempont. A weblapon fent a cím alatt, esetleg oldalt helyezzünk el egy pici nyomtatóikont, mellette egy megerősítő címet, például „A dokumentum nyomtatása”, és az egészet kijelölve szúrjunk be egy hiperhivatkozást, illetve annak belsejében helyezzük el a képet és a szöveget. A HTML-forráskódja itt látható. A nyomtatás HTML-kódja
vegyes.js részlete function nyomtass() { vers = parseInt(navigator.appVersion); // Verzióellenőrzés. if (vers >= 4) window.print(); // Csak IE és NN 4.0-tól működik. } // Ehhez a HTML-ben a “JavaScript:nyomtass();” parancsot adjuk ki
60. ábra. A dokumentum nyomtatását elindító JavaScript függvény 88
Honlap „Varázsló-forma” elrendezésben Amint láthatjuk, az utasítás egyszerű, akár a hiperhivatkozásnál megadható. A kép elhelyezésekor adjuk meg az „abszolút alulra” jellemzőt (absbottom), mert csak így lesz a szöveggel egyvonalban a kép alja. Ez a függvény csak az IE és a Netscape 4.0 esetén működik, ezért ellenőrizhetjük a böngésző verzióját.
Általános beállítások és előkészítő műveletek
Az előbbi feladatok során gyakran merült fel annak igénye, hogy legyen egy általános függvényünk, amelyet beállítunk, hogy a lap betöltődésekor automatikusan induljon el, és ha több saját alprogramot (függvényt) is le kell futtatnunk, akkor arra itt lehetőségünk nyílik. Ez azért hasznos, mert így lesz egy darab általános célú függvényünk, ahonnan a többi függvény elindítható. Hasznos lehet a címsor szövegének beállítása olyan esetekben, amikor a saját domain-néven elérhető oldalunk más tárhelyen található, mert a domainnév csak egy címátirányítás. Ilyenkor az oldal keretben jelenik meg, és emiatt nem lesz rendes címsora, de ezt utólag a document.title=”Lap címe” utasítással be tudjuk állítani. Hasonlóképpen érdemes kihasználni az állapotsort, mint hirdetési területet, de ezzel már jobban vigyázzunk. Ha egy linkre rámutatunk, akkor a látogató szeretné tudni, hogy a link hová vezet, más oldalra, esetleg más helyre. Az állapotsorban futkosó feliratok, amelyek ebben megakadályozzák, ráadásul még a figyelmét is elterelik, azok nagyon károsak. Ezért csak az állapotsor alapértelmezett szövegét állítsuk be, illetve alkalmanként fontos üzenetek megjelentetésére, de másra ne használjuk. Erre szolgál a defaultStatus=”Szöveg...” utasítás, és a status=”Szöveg...”. Az első az alapértelmezett szöveget rendeli az állapotsorhoz, míg a második egy eseménynél használatos ideiglenes jelleggel. vegyes.js részlete var linkek, dbl; window.onload=mindenAblakra; function mindenAblakra() { keplehivas(); document.title = "Móricz Attila honlapja"; ki="Üdvözlöm a honlapomon! # www.moricznet.hu # E-mail: [email protected]"; window.defaultStatus = ki; dbl = document.links.length; linkek = new Array(dbl); for (i=0; i
61. ábra. Általános előkészítő műveletek végrehajtása a lap töltődésekor 89
Egyedi elrendezésű weblapok Az előző függvény végén van még egy kis programrészlet, amiről nem szóltunk. Ehhez tartozik a függvény előtt lévő változók létrehozását végző var utasítássor, ami az összes függvényben látható és módosítható, ún. globális változókat hoz létre. Ennek eredményeit a következő kis programunkban fogjuk felhasználni, de előbb lássuk, mire szolgálnak az utasítások. A már definiált dbl változóban elhelyezzük a dokumentumban lévő linkek számát, amelyet a document.links.length értéke ad meg, majd létrehozunk egy ekkora méretű tömböt a linkek tárolására linkek néven. A következő ciklusban nincs más dolgunk, mint beolvasni a weblapon található összes link címét, vagyis magukat a hiperhivatkozásokat.
Linkek kiválasztása a billentyűzetről számgombok segítségével
Az előző előkészítő munkálatok után a globális linkek[] tömb bármelyik függvényből elérhető, és ezt most felhasználjuk. Először adjuk meg, hogy hívja meg a függvényünket (nyom), ha billentyűesemény (onKeyPress) történik. Így ha a felhasználó lenyom egy tetszőleges billentyűt, akkor a nyom() függvényünkre kerül a vezérlés. vegyes.js részlete // Csak az előzőek folytatásaként működik! document.onkeypress=nyom; function nyom() { bill = event.keyCode-48; if ((bill>0) && (bill<=dbl)) document.location.href = linkek[bill-1]; if (bill==0) document.location.href = "../index/index.html"; }
62. ábra. A linkek kiválasztása számbillentyűkkel Ebben az alprogramban az event objektumtól lekérjük a leütött billentyű kódját. Most nem vizsgáljuk részleteiben, hogy mit nyomott le, hanem azonnal levonunk belőle 48-at, ami a nulla kódja, így kapunk egy számot. Ha ez a szám nulla vagy annál nagyobb, de kisebb, mint a linkek száma, akkor válasszuk ki a linkek[] tömbünkből az adott sorszámú hiperhivatkozást, és hívjuk le azt a lapot a webböngészőbe. Ha tehát ezt összevetjük a saját tervezett weblapunkkal, akkor itt a bal oldali hat hiperhivatkozást kiválaszthatjuk az [1]..[6] számjegyekkel, illetve a [0]-val a nyitólapra léphetünk. Azért a nullával, mert az a számbillentyűzeten kellően nagy és könnyen el tudjuk találni. A többi linkhez is hozzárendeltünk egy-egy billentyűt, ami az oldalon lévő linkek számától függően lett kiosztva. 90
Honlap „Varázsló-forma” elrendezésben
Az egérmozgás követése a weblapunkon
Már az előző programunk is a weblapon bekövetkező események kezelésével foglalkozott, amit most az egyik egéreseménnyel folytatunk. Az egér folyamatosan mozog a webböngésző felett, ami kiváltja az onMouseMove eseményt. Ha megadjuk, hogy ilyenkor a saját mozog() függvényünket hívja meg, akkor az esemény (event) jellemzőinek lekérdezésével hasznos információkhoz juthatunk, amelyeket később még felhasználhatunk. vegyes.js részlete var dbe=0; document.onmousemove=mozog; function mozog() { dbe++; // hagyományosan írva: dbe=dbe+1 window.status = "Egér:" + dbe + " X: " + event.x + " Y: " + event.y; var uzen = "Mi a baj? Nem talál valamit?\nIdegesen mozgatja"; uzen += "az egeret, nyugodjon meg... "; if (dbe == 300) alert(uzen); }
63. ábra. Egéresemény kezelése egyszerű számláló alkalmazásával A globálissá tett dbe változót megnöveljük eggyel, és ha ennek értéke eléri például a 300-at, akkor megjelenítünk egy vicces üzenetet. Vigyázzunk, nehogy dbe>=300 feltételt írjunk be, mert akkor minden egérmozdulatra kapunk egy alert-ablakot, és az nem lenne jó. Az üzenetet két részletben állítjuk össze, hogy lássunk egy példát arra is, hogyan tudunk karakterláncokat összefűzni. Próbaképpen írjuk ki az állapotsorba a dbe értékét, így láthatjuk, milyen gyorsan növekszik a változó értéke, vagyis milyen sokszor kerül sor az eseményre, és meghívásra a függvényünk. Mivel esemény itt is történik, ezért írassuk ki az esemény helyének X,Y koordinátáit az event.x és az event.y lekérdezésével. window.status = "Egér:" + dbe + " X: " + event.x + " Y: " + event.y + " -- screenX: " + event.screenX + " screenY: " + event.screenY + " -- offsetX: " + event.offsetX + " offsetY: " + event.offsetY + " -- clientX: " + event.clientX + " clientX: " + event.clientX;
Ha pedig már itt tartunk az állapotsornál és az esemény jellemzőinél, akkor vizsgáljunk meg néhány további eseményjellemzőt, amelyek adatait később fel tudjuk használni. A screenX a képernyőn értelmezett koordinátát adja meg, az offsetX egy weblapelemen belülit (pl. táblázat), míg a clientX az ablakhoz viszonyított értéket. Hasznos lesz majd helyi súgók, menük megjelenítésekor. 91
Egyedi elrendezésű weblapok
A „Hozzáadás a kedvencekhez” gomb elhelyezése
Minden honlap tulajdonosa szeretné, ha a látogatói visszatérnének alkalmanként a honlapjára, de ehhez lépéseket kell tenni. Az egyik megoldás, ha elkérjük a látogató e-mail címét, vagy rávesszük a hírlevelünkre való feliratkozásra. Ez azonban további kötelezettségekkel jár, így egyszerűbb, ha rávesszük, hogy vegye fel a webböngészőjébe a Kedvencek közé a weblapunk címét. Erre kérhetjük írásban, de elhelyezhetünk egy linket is, amelyre kattintva azonnal a kért párbeszédablak jelenik meg, és a látogatónak nincs más dolga, mint megnyomni az [Enter]-t. Ehhez az alábbi JavaScript utasításra van szükség. vegyes.js részlete function kedvenc() { window.external.AddFavorite( 'http://www.moricznet.hu','Móricz Attila honlapja'); } A link elhelyezése a weblapon: HTML-kód részlete
64. ábra. „Hozzáadás a kedvencekhez” link elkészítése JavaScript segítségével A hiperhivatkozást azért hagytuk ki teljes egészében, mert nem akarunk oldalt váltani. Az állapotsorban megjelenne a lap címe, amire semmi szükségünk sincs, ezért iktattuk be az „onMouseOver”-t, amelyet a „return true;”-val zártunk. Ennek hiányában a hiperhivatkozás lenne az erősebb, és az jelenne meg. A kattintásnál hasonló gondunk van, mert a hozzáadás után szintén oldalt akar váltani, amelyet a „return false;” akadályoz meg. Beírhatnánk ide az utasítást, például ”JavaScript:kedvenc()” formában, mint az előbb, a nyomtatásnál tettük, de ne mutassuk meg, hogy milyen műveletet hajtunk végre. Nem mintha titkos lenne, csak éppen a felhasználó az állapotsorban információt szeretne olvasni, és nem holmi bűvös JavaScript utasításokat. Ha más módon akarjuk informálni a látogatót, akkor egészítsük ki a linket (Atagot) az alábbi paraméterekkel, majd a vegyes.js fájlt szintén bővítsük ki. ...
92
Honlap „Varázsló-forma” elrendezésben Szükséges még a vegyes.js fájl kibővítése az alábbiakkal. Hozzunk létre egy globális statSZ változót, amiben elhelyezhetjük az aktuálisan megjelenítendő állapotsori szöveg indexét, valamint írjuk be az allSor() függvényt, így a kapott paraméterrel a globális változót módosítani tudjuk. Most adjunk valódi értelmes funkciót a mozog() függvényünknek az alábbi átdolgozással. (A régit addig nevezzük át, így nem veszik el, de nem is kerül rá sor.) var statSZ=0;
vegyes.js részlete
function allSor(x) { statSZ=x; } function mozog() {
}
switch (statSZ) { case 0: kiirS=""; break; case 1: { kiirS="Add a kedvencekhez ezt az oldalt! MOST! Ne habozz!!"; break; } default: kiirS4=""; } window.status = kiirS; // Emlékezzünk! A defaultStatus-t használtuk már!
65. ábra. Az állapotsorban megjelenő üzeneteket mi szabályozzuk Nem használtuk még a switch-case utasítást, amivel nagyon szépen lehet numerikus érték szerint elágazást programozni. A switch paramétereként adjuk meg azt a változót, amelyik értéke szerint ágazik el a program a caseágaknál. Vigyázzunk, mert ha nem használunk a case-blokk végén break utasítást, akkor ráfut a következő case-ágra, és azt is végrehajtja, amiből nagy keveredés történhet. Ha nincs egyezés, nincs az adott értékre case-ág, akkor az alapértelmezett (default) programág hajtódik végre, ha megadjuk. Jó ötlet még az alábbi utasítás, amelyik minden oldalon az adott laphoz tartozó címet menti el a kedvencek közé, és nem mindig a nyitólapét. Ehhez szükséges, hogy minden oldalnak rendesen adjunk egyedi címet. Ezt a megoldást főként akkor alkalmazzuk, ha sok oldalunk tartalmaz bőséges információt, vagy gyakran változik a tartalma, és a látogatók az adott oldalt máskor is meg akarják tekinteni. Ilyenkor nem akarnak mindig a nyitólapról elindulni. window.external.AddFavorite(location.href,document.title);
93
Egyedi elrendezésű weblapok
A webböngésző kezdőlapjának beállítása JavaScriptből
A következő JavaScript utasítás nem a kedvencekhez adja hozzá a lapot, hanem közvetlenül a nyitólapnak állítja be. Ezt csak abban az esetben javaslom, ha a weblapon naponta változó tartalom található, amire a látogatóinknak valóban minden böngészőindításnál szüksége lehet. A másik fontos feltétel, hogy a látogató a további böngészését egyszerűen folytatni tudja az oldalunkról, mert a témával kapcsolatos legfontosabb linkek, esetleg a felhasználó egyéni linkjei az oldalainkon megtalálhatók. Egyéni linkeket csak akkor tudunk eltárolni és megjeleníteni az oldalainkon, ha azokat a látogató webböngészőjének sütifájljaiban (cookie) mentjük el, aminek mérete egyrészt korlátozott, másrészt újratelepítésnél a tartalma elveszhet, amitől a látogató igen bosszús lesz. A másik megoldás a szerveroldali adatbázisban történő tárolás és lehívás, amihez ASP, CGI, PHP nyelvek ismeretére van szükség. Erre most nem térünk ki. Ha tehát úgy gondoljuk, hogy vállaljuk a nyitólappal járó kötelezettségeket, akkor az alábbi JavaScript utasítással segíthetjük hozzá a látogatót eme döntéséhez. Az adott weblap része legyen
66. ábra. A Kezdőlap beállítását kérő párbeszédablak megjelenítése Az előbbi linkre kattintva az alábbi párbeszédablak jelenik meg, amelynek hatása a webböngészőben az Eszközök / Internet-beállítások párbeszédablak első lapján legfelül ellenőrizhető. Ha ezt nem akarjuk, akkor válasszuk az Üres lap gombot a párbeszédablakban, és akkor visszaáll a helyes állapot.
67. ábra. A megjelenő párbeszédablak és a módosítandó beállítás 94
Honlap „Varázsló-forma” elrendezésben
Új ablak nyitása hosszabb szöveg megjelentetésére
A jelenlegi weblapunk elrendezése nem engedi meg, hogy hosszabb szövegeket írjunk ki, mert az nem fér el a fekvő téglalapban. Ennek ellenére nem kell lemondanunk róla, mert nyithatunk új ablakot, amelyik mérete lehet álló téglalap alakú, így elfér benne hosszabb szöveg. Az alábbi ablaknyitó függvény egy tetszőleges fájlt megnyit a külön ablakban, aminek méretét tetszőlegesen megadhatjuk a weblapról. vegyes.js részlete function ujAblak(page,w,h) { a1 = window.open(page,w,"top=100,left=100,width=" + w + ",height=" + h); }
68. ábra. Új ablak nyitása JavaScript függvénnyel Az ablak nyitásához a window.open(címe, keretnév, paraméterek) függvényre van szükségünk, amelynél először a megnyitandó lap címét adjuk át paraméterként, majd a célkeret nevét, ha ez egy keretes (frame-es) oldal lenne, és a leendő ablak paramétereit. Ezek az alábbiak lehetnek: ‘toolbar=0,location=0,directories=0,status=0,menuBar=0,scrollBars=0, resizable=0,width=760,height=500,top=10,left=10,’ vagy ‘fullscreen’
69. ábra. A window.open függvény paraméterei A függvény meghívásához alkalmazhatjuk a már ismert módszereket. A függvényhívást beírhatjuk a hiperhivatkozásnál. Például:
cellák közti kódot –, amelyikben ezen képfájlra hivatkozást találunk. Az itt található elemet teljes egészében jelöljük ki, és töröljük ki. Ennek a képnek a helyére kerül a teljes weblapunk. Tipp. A törlést követően jelöljük meg megjegyzéssel a cellát. Szúrjunk be két külön megjegyzéssort, és írjuk bele, hogy a belső tartalmi táblázat itt kezdődik, és itt végződik. A kurzorral e két megjegyzés közé állva szúrjunk be egy üres sort, és ide helyezzük majd el a belső tartalmi táblát.
Most válasszuk ki a Tables eszköztár első gombját, amely az új táblázat beszúrására szolgál. A megjelenő párbeszédablakban ne adjunk meg mást, csak a cellspacing="0" cellpadding="0" paramétereket, mert minden mást a stílusfájlban fogunk leírni. Ehhez csatoljuk a weblaphoz a CSS-fájlt a 47. oldalon bemutatott formában, és egészítsük ki a class-paraméterekkel a cellákat és a táblázatot az alábbi minta szerint. index.html részlete
77. ábra. A táblázatunk kiindulási állapota Ezzel párhuzamosan nyissuk meg a stilus1.css fájlunkat, amit hozzárendeltünk a weblaphoz, és hozzuk létre azokat a stílusokat, amelyekre hivatkozunk a weblapon. Az egyes stíluselemek megadásakor arra is gondoljunk, hogy melyek az alapértelmezett formátumok. Például minden bekezdés és cella balra igazítva jelenik meg, és a cella függőlegesen középre kerül igazításra. 104
A „Színes téglalapok” alkalmazása Így a „vertical-align: center;” stíluselem megadása egy cella esetén felesleges, és ha véletlenül beírjuk, akkor sem teszünk vele rosszat, csak olyan érzésünk lesz, hogy milyen sok paramétert meg kellett adni, pedig lehet, hogy még több olyat is beírtunk, amelyekre szintén nincs szükség. Ilyen lesz majd a betűtípus megadása, amelyet célszerű mindig a „body” elemnél beírni, és csak ott megadni, ahol ettől el akarunk térni. stílus1.css részlete body } .tabla_rajz } .tabla_bel } .cella_c1 } .cella_c2 } .cella_c3 } .cella_c4 }
78. ábra. A kerettáblához tartozó stílusfájl részlete Nézzük meg a rajzunkat, és vessük össze a CSS-fájl tartalmával. A szegélyrajzokat befoglaló táblázatunk 780x500 px-es méretű, amelyet a „width: 780 px; height: 500 px” paraméterekkel adtunk meg. Az 1 pixeles szolid kék keretvonala az egyszínű háttértől fogja elválasztani, ezért szükséges. Más jellemzőjét nem adjuk meg, mert nem befolyásolja a megjelenését. Ennek ellenére a vizuális szerkesztők számos nélkülözhető formázási elemmel teszik zavarossá a kódot, és válik a készítője számára misztikussá, valamint nehezen érthetővé. Fontos! Minél egyszerűbb, átláthatóbb a kód, annál könnyebb lesz később átdolgozni, vagy az esetleges hibákat módosítani benne. A túl egyszerű kódú weblapoknál a dinamikus kivitelre való áttérés is lényegesen egyszerűbb lesz. A táblázatunknál alkalmaztunk egy 1 pixeles keretet, aminek a vastagságát a C3-as és C4-es celláknál figyelembe kell vennünk, ezért lesz a magassága csak 298 pixel a 300 helyett (érdekes módon vízszintesen nem kell levonni a 2x1 pixelt). 105
Egyedi elrendezésű weblapok Ezután a tervünknek megfelelően kezdjük el feltölteni adatokkal. Az első cellába kerül a webhely megnevezése, és kisebb betűkkel a webcím vagy cégnév, attól függően, mit akarunk kihangsúlyozni. Az első sort írjuk „Címsor 1”, a másikat „Címsor 2” stílusú bekezdésbe, és mindkettőnek adjuk meg a jellemzőit a CSS-fájlban. index.html részlete
79. ábra. A C1-es cella tartalma és formázása Az első sorba írt szöveget hagyhatnánk a cellában is, és a „h1”-nél megadott stílusjegyeket beírhatnánk a „cella_c1”-hez, de így áttekinthetőbb. Ehhez viszont be kell állítanunk a margók értékét nullára, hogy biztosan a cella közepére kerüljenek a feliratok függőleges értelemben. Most lépjünk tovább a C3-as és C4-es cellákra, mert azok elkészítése egyszerűbb lesz. index.html részlete
A „Színes téglalapok” alkalmazása A C3-as cella stílusánál már megadtuk a háttérgrafikát, ami magassági értelemben középen egy 40 pixeles csíkot húz olyan színnel, amilyennel a C1-es és a C4-es cellák hátterét készítettük, illetve amivel majd a C22-es is rendelkezni fog. A cella vízszintesen középre igazított lett, függőlegesen pedig amúgy is az az alapértelmezése. A cellába képet helyezünk, ami méretét tekintve akkora legyen, hogy körben maradjon egy 30 pixeles szegély. Ez jól illeszkedik a teljes weblapot körbevevő 30 pixeles képes kerethez, és hagyja érvényesülni a háttérben lévő csíkot. Ettől függetlenül a kép kitöltheti a teljes cellát is, sőt, igazodva az általános 480x640-es, illetve annak felét kitevő 240x320-as mérethez, a kép a teljes cellát kitöltheti. Ebben az esetben vagy meg kell növelni a 2. sorban lévő cellák magasságát, vagy a fenti sorét kell csökkenteni 20 pixellel. A kép beszúrásához nincs szükség másra, csak a forrás (SRC) megadására, mert a stílus paraméterét fel sem használtuk. Ennek ellenére célszerű megadni, így az időközben felmerült változásokat egyszerűen tudjuk végrehajtani. A C4-es cellába egy IFRAME-keret kerül, amelyet OBJECT-elemként is megadhatunk. Ez utóbbit megjegyzésbe zártam, de a „! - - ” és a „- - ” jelek kivétele után azt is alkalmazhatjuk. Az IFRAME-elemnél is csak a forrást és a stílusnevet adjuk meg, mert a többit a stílusfájlban határozzuk meg. A forrás egy olyan weblap legyen, ahol a szöveg csak bekezdésekbe ömlesztett módon van megadva, és nincs táblázatokkal korlátok közé szorítva, hiszen a méretét itt határozzuk meg. Ha mindkét mérete 100% lenne, akkor a cellát teljesen kitöltené. Azonban a keretes designt erősíti, ha hagyunk mellette pár pixelnyi margót, amit a „margin: 6px” stíluselem ad meg. Ez a tulajdonság csak a bal és a felső margót adja meg, mert a másik kettő a méretéből adódik, ezért a méretét korlátoznunk kell 96-97%-ra. Ezt is megadhatnánk pixelben, de így egyszerűbb a teljes weblap méretén utólag változtatni. A jobb oldalon szándékosan nagyobb margót hagyunk, mert ott biztosan lesz a hosszabb szövegnek görgetősávja, így azzal egyező szélességű margót választunk. Most következzen a bonyolultabb része, a navigálásra szolgáló terület táblázatának megadása. Ez sem lesz bonyolult, csak itt több táblázat kerül egymásba, így jobban oda kell figyelnünk. Először szúrjuk be a 3 soros 1 oszlopos táblázatot, amelyet majd kicsit átalakítunk, így elkerülhetjük több táblázat alkalmazását, amitől sokkal áttekinthetőbb lesz a forráskód. A C2-esbe beszúrt táblázat teljesen töltse ki a helyet, ezért 100%-ra adjuk meg a szélességét és magasságát, és nullázzuk a belső margókat. Mivel e tábla 2. sorában 5 cellára lesz szükségünk, ezért adjuk meg az első TD-elemnél a colspan="5" paramétert, amivel az első sorban elképzelt 5 cellát egyesítjük. 107
81. ábra. A C2-es cella tartalmának HTML-kódja és stíluslapja 108
A „Színes téglalapok” alkalmazása A cellák egyesítésével azonban azt is megadtuk, hogy a 2. sorban 5 cella lesz, ezért a 2. sorban lévő 1 db „
” sort jelöljük ki, másoljuk le, és szúrjuk be még négyszer, így lesz 5 sorunk. A harmadik sorba ugyancsak szúrjunk be egy „
” elempárt, és az elsőnél adjuk meg a colspan="3" paramétert, míg a másiknál a colspan="2"-t. Ezzel ebben a sorban is megvan az 5 oszlop, így kialakul a táblázatunk. Ha valamiért meg kellene növelnünk a linkek számát 6-ra, 7-re, akkor arra ügyeljünk, hogy minden sorban (TR) ugyanannyi cella legyen, amibe az összevonások értéke (colspan) is beleszámít. Tipp. Amíg egy táblázatnál nem tudjuk pontosan, hogy elfér-e a tartalom benne, addig célszerű a HTML-forráskódban a border=1 paramétert megadni, így látjuk a cellahatárokat. Különösen olyan helyzetben, amikor cellákat egyesítünk, könnyen hibázhatunk, és egészen furcsa táblákat alkothatunk.
A „Színes téglalapok” alkalmazása Megadhatnánk e két paramétert a TD-elemnél is, de ott az a probléma, hogy a hiperhivatkozás azon belül van, és amikor a linkre mutatunk, akkor a cella szemszögéből nézve mi elhagyjuk a TD területét, tehát az onMouseOver eseményt váltja ki, pedig globálisan még a cellában vagyunk. Ezért alkalmazzuk először a fenti, egyszerűbb megoldást. A szükséges JavaScript programot célszerű megint külön fájlban csatolni, mint ahogyan az előző design esetében is tettük. Helyezzük el a hivatkozást a fejrészben, és írjuk meg a programokat egy külön JS-kiterjesztésű fájlban. A weblapon a súgószövegnek kijelölt bekezdésnek adjunk egy azonosítót, mert ezen keresztül fogjuk a kiírásokat módosítani. index.html részlete ... <script LANGUAGE="JavaScript" src="web3.js"> ...
Üdvözlöm a honlapomon!
... web3.js részlete var kiir, beir; window.onload=mindenAblakra; function mindenAblakra() { kiir = [ "Üdvözlöm a honlapomon!\n"+ "Mutasson a fenti linkekre, "+ "és az itteni szöveg megváltozik...", "ComputerBooks Kiadó: ...", "Nokia: ...", "LSI Oktatóközpont Alapítvány", "PC World: ..." ]; beir = [ 'Üdvözlöm.', 'ComputerBooks'+ ' kiadó:', '' // stb... ]; } function kiirSugo(n) { bub.innerText = kiir[n]; } function beirSugo(n) { bub.innerHTML = beir[n]; }
83. ábra. Felbukkanó és eltűnő súgószöveg megvalósítása tömbökkel 115
Egyedi elrendezésű weblapok A programunkban először létrehozzuk a globális változókat, hogy azokat a későbbiek során elérhessük. Ezután a szokásos minden ablaknál szükséges függvényünkben feltöltjük adatokkal a tömböket, amelyekre futás közben már csak hivatkozni fogunk. A tömb létrehozása egyszerű értékadással történik, ahol az elemeket felsoroljuk vesszővel elválasztva. Ha egy elem több soros lenne, akkor azt nyugodtan fűzzük össze a „+” jellel. Ezzel a módszerrel szép, áttekinthető forrásprogramot kapunk, ami fontos az esetleges szintaktikai hibák kiszűrése szempontjából. A tömb megadása a „neve=['1.', '2.', '3.elem', '4.'];” utasítássorral történik. A több sorra tördelés ne zavarjon meg bennünket, mert ez engedélyezett. Az első próbálkozásnál elég lesz a kiir nevű tömböt megadni, mert a beir tömbre a következőkben lesz csak szükségünk. Ehhez tartozik még az alatta lévő kiirSugo() függvény, amely nem tesz mást, mint kiírja a paraméterül kapott index segítségével a tömbünk megadott elemét. Ezt a műveletet az innerText utasítással végzi el, amely a megadott azonosítóval rendelkező objektum szövegévé teszi a megadott karakterláncot. Egyszerűbben ez azt jelenti, hogy a „bub” ID-vel rendelkező bekezdés szövegét felülírja a megadott szöveggel. Azért mégis fontos a bonyolultabb megfogalmazás, mert ha ezt az azonosítót például a body elemhez írjuk be, akkor a linkre mutatva a teljes weblap el fog tűnni, mivel a body teljes tartalma a megadott szöveg lesz. Tipp. Játsszunk el ezzel az azonosítóval! A súgónak szánt bekezdésben módosítsuk a nevét ideiglenesen „bubX”-re, és írjuk be más helyre az id=”bub” paramétert. Ilyen hely lehet például a body, h1, h2, C1-es cella. Gyakorlatilag bármelyik elemhez beírhatjuk, de egyszerre csak egy helyre. Figyeljük meg a különbségeket például a C1-es cellánál és a h2-es elemnél!
Most írjuk vissza a weblapon az azonosítót a megfelelő helyre a bekezdésbe, és módosítsuk a JS-fájlban a programunkat. A változás csupán annyi lesz, hogy az innerText helyett az innerHTML utasítást fogjuk használni, és nem a szöveget szúrjuk be, hanem a beir[] tömbben lévő elemet, amely tartalmaz HTMLelemeket is a szövegen kívül. (Módosítás: bub.innerHTML = beir[n]; ) A módosítás eredménye az lesz, hogy a bekezdésen belül nem csupán szöveg jelenhet meg, hanem teljes weblaprészlet is. Ez persze nagy munka, ezért ilyen esetben általában csak egyszerűbb HTML-forrást írunk be, de az elvi lehetőség megvan arra, hogy akár a teljes weblapot így szúrjuk be. Bővítsük ki a kiirSugo() függvényt az alert("n="+n+".\nouterHTML:"+bub.outerHTML); sorral, ami megmutatja, hogy mi lett a próbálkozásunk eredménye. 116
A „Színes téglalapok” alkalmazása Az alert() függvény megjeleníti a bekezdés beírás utáni forrását, amelynek segítségével megnézhetjük, hogy valóban az került-e bele, amit terveztünk. Erre elsősorban az innerHTML alkalmazása esetén lehet szükségünk, amikor az eredményt még a HTML forrásának megtekintésével sem tudjuk ellenőrizni, mert az a „forráskódot” mutatja meg, míg nekünk inkább az „eredménykódra” lenne szükségünk.
84. ábra. A bekezdés tartalma belépéskor és kilépés után Tipp. Írjunk be egy azonosítót a body elemhez, például id=badi. Ezután módosítsuk az alert() sorunkban az kiírandót „badi.outerHTML”-re, és mutassunk rá a linkre. Az eredmény az lesz, hogy a teljes weblap forrása a felbukkanó párbeszédablakban fog megjelenni.
Az előző tippet fokozhatjuk azzal, ha nem a body elem forrását mutatjuk meg, hanem a teljes weblapét! Ehhez a html-elemet lássuk el azonosítóval (), és annak az outerHTML elemét használjuk fel. Sőt! Fokozzuk tovább, hiszen így a teljes weblap forrásához hozzájutottunk! Írjuk be az alert() helyett az alábbi pár sort, és különleges látványban lesz részünk. web3.js részlete uj=window.open('','','fullscreen') uj.document.open(); uj.document.write( weblap.outerHTML );
85. ábra. Új, teljes képernyős módban nyitjuk meg az előző már betöltött weblapot Az első sorban nyitunk egy új ablakot, amely teljes képernyős módban jelenik meg, de a harmadik paraméterében a legapróbb részletekig szabályozhatjuk a megjelenő ablak jellemzőit (lásd a 95. oldalon a kiemelt részben). A következő sorban nyitunk egy új üres dokumentumot ebben az „ablakban”, majd beleírjuk a változónk outerHTML-értékét, ami nem más, mint a teljes weblap. 117
Egyedi elrendezésű weblapok Az előző kis kitérőnek az a jelentősége, hogy felismerjük, a weblapunk bármely részlete felett rendelkezhetünk, azt egyszerűen beolvashatjuk egy változóba, és beszúrhatjuk az innerHTML utasítással bármely más helyre. Így ha meg szeretnénk jeleníteni olyan weblaprészleteket, amelyek túl bonyolultak ahhoz, hogy a JS-fájlba írjuk be egy karakterláncba, akkor készítsük el azt, mint a weblap részét. Ezután adjuk meg a stílusában, vagy már eleve a weblap forrásában a láthatóságát rejtettnek. Ehhez használhatjuk a „display:none;” stíluselemet a főtagnál, amelyre célszerű egy „
” vagy „
”elemet, mint tárolót választani. Amikor meg akarjuk jeleníteni ezt a kész weblaprészletet, akkor a div azonosítójára hivatkozva le kell kérni annak outerHTML értékét, és be kell szúrni a kívánt helyre. Például: index.html részlete
A könyvek választéka:
Mobiltelefon a kezekben
Levelezés az interneten
Windows-tippek újratelepítéshez
Tippek a CD-íráshoz
web3.js részlete function kiirSugo(n) { if (n==1) { tabla_r1.style.display = "block"; var sugoHTML = tabla_r1.outerHTML; tabla_r1.style.display = "none"; bub.innerHTML = sugoHTML; } // ... további n-értékekre is külön vizsgálat következhet. else bub.innerHTML = beir[n]; // vagy kiir[n] }
86. ábra. Teljes weblaprészlet beszúrása és elrejtése a linkre való rámutatáskor 118
A „Színes téglalapok” alkalmazása Ebben a példában létrehozunk egy táblázatot, amelyet annak rendje és módja szerint megformázunk, használhatunk saját stílusokat is, mindent, ami csak kell (a példában ezt elnagyoltuk az átláthatóság kedvéért.). A forrásból az már látható, hogy senki nem vállalkozna arra, hogy ezt az egészet egy karakterláncba sűrítse, mert az abban keletkező hibákat javítani nagyon nehéz lenne. Ezután módosítjuk a JS-fájlunkat, ahol az adott értéknek megfelelő meghívás esetén (if (n==1) {}) kiolvassa a „tabla_r1” tartalmát, és azt átadja a „bub” azonosítóval rendelkező bekezdésnek. A forrást nézve azonban azt látjuk, hogy az ennél többet tartalmaz. Ha ugyanis csak úgy átemeljük a rejtett forrást, akkor az rejtett marad az új helyen is. Ezért előbb megjelenítjük, kiolvassuk, majd ismét elrejtjük. Ez annyira gyorsan lezajlik, hogy nem kerül megjelenítésre a táblázat, de a látható formáját másoljuk le, és adjuk át a „bub” bekezdésnek. Az általános felhasználás ettől el szokott térni. Itt mi lemásoltuk a weblap egy részletét, és azt egy másik helyen is beszúrtuk. A gyakorlat például a legördülő menüknél az, hogy a megjelenítési hely relatív koordinátáit kiolvassuk, az eddig rejtett táblázat vagy div-objektum pozícióját abszolútra váltjuk, és megadjuk neki az így átvett értékeket. Ezzel fizikailag áthelyezzük a táblázatot például a hiperhivatkozás alá, ami a legördülő menü látványát nyújtja. Ennek a megoldásnak a kivitelezése nehezebb, mivel a menüt nem elég legördíteni, hanem azt kint is kell tartani, ráadásul csak akkor tűnhet el, ha a menünév (a hiperhivatkozás vagy a táblacella) és a legördült menü teljes területén kívülre mutatunk az egérmutatóval. Ez pedig nem olyan egyszerű, mert amint láthattuk a TD-elemnél még az objektumon belül voltunk a mi logikánk szerint, de a webböngésző szerint már átléptünk az „” elembe, a linkre. A megoldáshoz a menünevet és a legördülő menüt is a „div”-en belül kell elhelyezni, a mi weblapunk terve viszont most nem erre épült, ezért a továbbiakban ezzel nem foglalkozunk.
A hiperhivatkozásnál kicsit talán szokatlan az onClick esemény elkapása, különösen ha a saját link() függvény meghívása után még a „return false;” használatával az oldalváltást is letiltjuk. var ujlink = ""; function link() { ujlink = event.srcElement.href redonyle(); }
web3.js részlete
Amint a programból látható, először az ujlink változót létrehozzuk még az oldal betöltődésekor, hogy mindig elérhető legyen, hiszen itt írunk bele adatot, és máshol olvassuk ki. A hiperhivatkozásra kattintva először meghívásra kerül a link() függvény, ami előbb eltárolja a hívás helyének hiperhivatkozását, majd meghívja a már ismert áttűnést. Az event objektum sok jellemzőjét tudjuk az események bekövetkezésekor felhasználni, mint tesszük azt most is. 126
A „Színes téglalapok” alkalmazása Az „event.srcElement.href” azt jelenti, hogy az esemény adatait tartalmazó event objektumtól lekérjük azt az objektumot, amely az eseményt kiváltotta ( srcElement = forráselem), és ennek az objektumnak a href tulajdonságára van szükségünk. Mivel tudjuk, hogy a hiperhivatkozástól érkezett a hívás, ezért biztosak vagyunk abban, hogy ez az elem rendelkezik href tulajdonsággal. Ha máshol is hozzárendelnénk valamely eseményhez ezt a függvényt, akkor az hibához vezetne, mert az bizonyára nem rendelkezne ilyen tulajdonsággal. Ha még mindig meghagytuk a h2-es elemnél az onClick esemény kezelését, és rákattintunk a címsorra, akkor a redonyle() függvény végrehajtása után a body elem már meghívja a vege() függvényt, amely az eltárolt ujlink változóban lévő hiperhivatkozásra irányítja az oldalt. Azonban ott erről nem gondoskodtunk, ezért nem lesz fájlnév, amire átválthatna. Ilyen esetben a helyi fájlrendszerben a fájlt tartalmazó mappa jelenik meg, mert a fájlra történő hivatkozásnál az elérési út a fájl elérési útja lesz. Internetes környezetben ez az út a fájl elérési webcíme lesz. Ha itt nem adunk meg fájlnevet, és a mappában való tallózás le van tiltva (99%), akkor az alapértelmezett dokumentumra, vagyis az index.html fájlra való átváltás fog megtörténni. Fontos tudnunk, hogy az effektus elindítása külön programszálon történik, és ha a hiperhivatkozást nem blokkolnánk le, akkor az azonnal elkezdené az oldalváltást. Ha ez lassan történik meg, akkor addig az ideig látnánk az áttűnést, de ez menet közben durván félbeszakadna. Ezért kellett találni egy megoldást arra, hogy mi módon oldható meg az a probléma, hogy a kattintás után az oldalváltás ne induljon meg, amíg az áttűnés nem fejeződött be (például a window.onUnLoad=redonyl esetén). Próbaképpen vegyük ki a „return false;” utasítást a hiperhivatkozásból, és a redonyle() végére tegyünk be egy üres alert() hívást, amivel ki lehet mutatni a párhuzamos szálú programvégrehajtást a párbeszédablak megjelenésekor. A megjelenő üres párbeszédablak mögött szépen végrehajtja az áttűnést, majd az ablak bezárásakor az oldalváltás is megtörténik. Próbáltam az alert() helyett egy végtelen ciklussal megakasztani a programot, de ezt az Internet Explorer azonnal felfedezte, és kiiktatta (do { } while (!valts)). Itt a valts értékét az onFilterChange-nél megadott vege() függvényben váltottam volna át (valts=true). Ha a ciklusba pedig bekerült egy utasítás, akkor az valóban végtelen ciklust idézett elő, és nem indult el az áttűnés. A végtelen ciklus olyan mértékű volt, hogy sehogyan nem lehetett megállítani, csak a webböngésző memóriából való végleges „kilövésével”. Ezért jó lesz vigyázni a ciklusokkal! 127
Egyedi elrendezésű weblapok
További eseménykezelési lehetőségek
Az eddigiekből láthattuk, hogy a például hiperhivatkozás sem mindig úgy működik, ahogyan azt megszoktuk, hiszen az alapvető funkciójától teljesen el tudjuk téríteni. Megtettük egy címsorral is, hogy egyet rákattintva elindított egy tetszőleges folyamatot, ami akár lapváltással is végződhet, pedig ez eddig a hiperhivatkozások egyedi kiváltsága volt. Ha pedig kiegészítjük a h2 stílusát a „cursor: hand;” jellemzővel, akkor a Címsor 2-es bekezdésre mutatva az egérmutató kéz alakot fog felvenni, ami így már semmiben sem különbözteti meg a linktől, csupán a HTML-kódja. Ezen felbátorodva érdemes az „event” objektumot alaposabban megismerni, hogy gyakrabban tudjuk alkalmazni a belőle nyerhető információkat. A Microsoft Office 2000 tulajdonosok telepíthették a Microsoft Development Environment alkalmazást, amely nagyban segíti az objektumok tulajdonságai közötti böngészést. Hozzunk létre egy új lapot, majd a Source lapon a Scripttagon belül írjuk be az „event.” szót és egy pont karaktert. Ekkor megjelenik az ábrán is látható helyi menü, amely felfedi az objektum tulajdonságait.
91. ábra. Az MSE.EXE program segítségével feltárt tulajdonságok Próbáljuk ki az alábbi kis programot, és letilthatjuk a jobbgombos kattintásokat, illetve a helyi menüt előhívó billentyűket és billentyűparancsokat! document.oncontextmenu = ablak; document.onmousedown = klick; function klick() { if (event.button==2) ablak();} function ablak() { alert('Kérem, a bal gombbal kattintson!'); return false; }
128
A „Színes téglalapok” alkalmazása
Fedezzük fel egy JavaScript programmal az objektumok jellemzőit!
A JavaScript programok és dinamikus weblapok készítésekor az a legnehezebb, ha nem tudjuk pontosan, hogy milyen jellemzők állnak a rendelkezésünkre, és azokat hogyan kérdezzük le. Ha minden tudomásunkra jutott információt az állapotsorba íratunk ki, az eléggé hosszadalmas munka, ezért használjuk hozzá az alábbi programot. Ha minden weblapunk fejrészében hivatkozunk a web3.js fájlra, akkor annak első sorába írjuk be az alábbi utasítássort, amelynek tartalma minden linkre kattintáskor frissülni fog. web3.js első sorába írandó: window.open(" felfedez.html"," felfedez");
felfedez.html teljes fájl <STYLE TYPE="TEXT/CSS"> body { margin:30pt; font-family:Arial; font-size:10pt; }
<script LANGUAGE="JavaScript">
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
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.
<script LANGUAGE="JavaScript" src="web4.js">
102. ábra. A weblap felépítését adó forráskódja 146
Bővebb tartalomhoz „Szolid sávos” stílus A HTML-forrással egyszerre kezdjük el írni a CSS-fájlt is a vázlatunknak megfelelően. Újdonságként szerepel a body elemnél a margó, amelyet általában lenullázni szoktunk, és nem megadni. Most azonban az egyszerű táblázatunknál jól mutat egy vastagabb keret, amelynek értékét akár 10 pt-ra is növelhetjük. A text-align elem szintén jó megoldás, ha az utána következő táblázatot akarjuk középre igazítani felesleges HTML-kód alkalmazása helyett. A főtábla mérete a 640x480-as képernyőhöz igazodik, de a nagyobbnál szebben mutat. Új elem a „cella_hr” stílusunk, amelyet csupán egy vastagabb szegélyvonal helyett alkalmaztunk. Ez is egy megoldás, ráadásul nagyobb rugalmasságot ad. stilusfo.css részlete { font-family: Arial; font-size: 8pt; background-color: #006699; margin: 5px; overflow:auto; text-align:center;
103. ábra. A weblap alaprészének stílusát megadó CSS-fájl részlete 147
Egyedi elrendezésű weblapok A színek megadásánál használjuk bátran az „rgb(000,000,000)” megadási formát, ahol decimális számjegyekkel határozhatjuk meg az adott színt. Hasznos ez akkor, ha valaki Jegyzettömbbel dolgozik, és a Paint programban keresi meg a megfelelő színeket, ahol csak 10-es számrendszerbeli értékeket olvashat le. Hasonló szintaxisú az „url(‘ut/fajlnev.kit’)” elem, amellyel a háttérképek forrása adható meg egyszerűen. Most vált szükségessé a „background-repeat:” tulajdonság használata, amelynél letilthatjuk, hogy a képet többször ismételje a cella (vagy a weblap) hátterében. Pontos méretezés esetén ez nem is fordulhat elő, de apróbb hibák becsúszhatnak, és így akkor sem lesz csúnya a weblapunk megjelenése. A „cella_c52” stílusánál szintén találunk egy új elemet, amely a CSS 2.0 része, a „max-height:477px;”-t. Ez a „height:477px;” elemmel együtt azt jelenti, hogy a cella magassága pontosan 477 px, de a maximális értéke is egyben még akkor is, ha a táblázat lényegesen hosszabb lenne. A „cella_c51”-nél lévő „height:100%” így csak akkor lép érvénybe, ha a táblázat ezen sorának magassága nagyobb lesz, mint 477 px. Addig az alsó cella határozza meg fixen a magasságot, de a bővebb tartalom esetén a felső cella mérete kezd el növekedni és nem az alsóé. Erre azért van szükség, mert a képet úgy akarjuk alulra igazítani, hogy a cella háttereként adjuk meg, de ne felülről kezdje el a kitöltést, hanem alulról. Ilyen lehetőségünk nincs, csak ha külön cellákat alkalmazunk. Tipp. A képek hivatkozásait már elhelyeztük a forráskódokban, de még nincs egyetlen képünk se. Ilyenkor hozzunk létre új üres képfájlt valamelyik általunk használt képszerkesztő programban (Paint, Photo Editor, Fireworks), adjuk meg a tervezett méretét, és mentsük el így üresen, később majd lecseréljük.
A weblap színösszeállításakor mindig abból indulunk ki, hogy mit akarunk kiemelni. Mivel itt a folyószöveg jó olvashatósága lényeges, ezért azt helyezzük világos alapra, például fehérre, mert a kép úgyis színekben gazdag lesz, ezért a szöveg maradjon csak egyszerű megjelenésű. A főcímekből csak azt emeljük ki, amelyre rá akarjuk irányítani a figyelmet, a többi legyen egyszerű, illetve egyezzen meg a színe például a kinti háttérrel (itt sötétkék). Az oldalképet majd úgy készítsük el, hogy a felső részén vagy halványodjon el, vagy használjuk ki a felső színeit, például egy tájképrészletnél a felső részen az égbolt kékjét vezessük tovább a felette lévő cellákon. Ehhez a nyissuk meg a képet egy képszerkesztő programban, és az abban lévő színfelvevő eszközzel olvastassuk ki a fenti legjellemzőbb szín értékeit. A Photo Editorban erre éppen jó a Transparency eszköz, de a párbeszédablakból a Mégse gombbal lépjünk ki, mert nem akarjuk a kép azon részét átlátszóvá tenni. 148
Bővebb tartalomhoz „Szolid sávos” stílus
Az egyes területek feltöltése tartalommal
Miután elkészültünk a weblapunk alapjával, kezdjük el feltölteni tartalommal. A fájlt gyakran mentsük el, nehogy egy lefagyás vagy áramszünet miatt újra kelljen kezdenünk a munkát. Váljon általános szokásunkká, hogy a fájlokat a szerkesztés elején mentsük el, és időnként nyomjuk meg a [Ctrl]+[S]-t. cella_c1 tartalma
A C1-es cellába kis ikonokat akarunk tenni, amelyekről az 50. és a 92. oldalakon volt szó. Mivel az ikonok a Windows jellemző funkcióihoz vezetnek el, ezért használhatjuk annak ikonjait, de a nyelvi változatokhoz elvezető kis zászlókat rajzoljuk meg a például Paint programban. Az ikonok közötti szóköz megtartásához használjuk a szóköz HTML-kódját, az „ ”-t. A képeknél a méret megadása a megjelenéskor lesz fontos, amikor még a kép nem töltődött le. Ilyenkor ugyanis a böngésző automatikusan foglal a képnek egy területet, ami majd a letöltődés után átméreteződik. Ettől az oldal a megjelenéskor folyamatosan ugrál, ami eléggé zavaró. A nulla vastagságú keret a hiperhivatkozás megadása után válik lényegessé, mert így szebb a kép. cella_c2 tartalma
A C2-es cellába kerül a cégnevét vagy a honlap címét tartalmazó képi elem, ami lehet képfájl, flash felirat vagy egy olyan egyszerű felirat, amelyet a már megismert szűrők (filters) segítségével jelenítünk meg. Amennyiben animációt alkalmazunk, úgy azt legfeljebb egyszer játsszuk le a megjelenéskor, mert különben zavaróvá válik. Érdemes a kezdést időzíteni vagy esetleg elhalasztani a weblap teljes betöltődése utáni időre, mert nagyon csúnyán mutatnak azok az animációk, amelyek már akkor elkezdődnek, amikor az oldalt felépítő képek többsége még le sem töltődött. Az animáció nemcsak szép, de egyben nagy felelősség is, mert sok apró részletre oda kell figyelni, hogy a hatás még lassabb letöltődés esetén se maradjon el. Tipp. Készíthetünk egyedi betűtípussal formázott feliratokat, amelyeket aztán képként mentünk el. Az ilyen feliratok kellően nagy képméret esetén kis fájlmérettel menthetők el, így nem lesz lassú a megjelenésük.
149
Egyedi elrendezésű weblapok Használhatjuk a felirat elkészítéséhez például a Macromedia Fireworks MX programot, amelyben számos effektus segíti a különlegesebb formátumok elérését. A Macromedia honlapjáról pedig számos újabb effektust végző kiegészítést tölthetünk le, amelyek száma naponta emelkedik. Az eredményt elmenthetjük flash-ben, amely előnye, hogy szabadon átméretezhető, mert nem képként tárolja a feliratot, hanem szövegesen a betűtípus elemeinek beágyazásával. Ebből az is következik, hogy akár hosszabb szövegeket is megjeleníthetünk a weblapunkon flash-ben tetszőleges betűtípussal, amire eddig nem volt lehetőségünk a hagyományos weblapszerkesztés során. Ebben persze számos dolog meg fog akadályozni bennünket, mint például a sorkizárt mód olyan értelmezése, ahol az utolsó sort is teljesen széthúzza a program, vagy a betűkészleteinkben lévő szabályos „őŐűŰ” betűk hiánya.
104. ábra. Szép szöveg kisméretű flash-ben néhány eléggé zavaró hibával A C4-es cella háttereként kapta a képet, így a cella teljesen üres lehetne, de egy fontos szlogen, mottó helyet kaphat a cellában. Ennek helyzetét a stílusfájlban már megalapoztuk, de a leendő menü elhelyezkedése, vagy a kép és a felirat helyzete ezen a szerkesztés során módosíthat.
Talán hiányolják az almenüt, amelyet e cella felett fogunk megjeleníteni, de nem véletlenül hangzik úgy a szöveg, hogy „e cella felett”. Ezeket az almenüket ugyanis a weblap legvégén helyezzük el, stílusukban megadjuk a rejtett jelzést, és a megjelenítéskor a weblapon abszolút pozíciót kapnak, így valóban úszni fognak a C4-es cella felett. Átléptük az előbb a C3-as cellát, mivel ide kerül a navigációs blokkunk, amelynek kialakítása összetettebb, és több részletet tartalmaz. A cellába először elhelyezünk egy táblázatot, amely a linkeket tartalmazza. Ez lehet például egy 1x5-ös tábla, ahol a címek mellé egy-egy kis kép kerülhet, amelyhez hozzárendelhetjük a hiperhivatkozást. A cellákat jobbra igazítva a linksor szépen elhelyezhető. A másik megoldás szerint – amit mi most alkalmazni fogunk – egy 2x5-ös táblázatot hozunk létre, ahol a jobb oldali cellákba is egy tábla kerül. 150
Bővebb tartalomhoz „Szolid sávos” stílus A helyzet csak látszólag bonyolult, hiszen a jobb oldali cellába kerülő táblázat csak egy egycellás táblázat lesz, amelynek a háttérszínét fogjuk állítani az egérmutatóval történő ráközelítések során. Ezt ugyanis egyszerűbb végrehajtani, mint a linket megjelenítő grafikát kicserélni, ráadásul ez alapvető HTMLelem, míg a grafika külön objektum, és hiánya ront az oldal összképén. A másik előnye, hogy így a cellába kerülő táblázatnál megadott, de a háttérbe olvadó színű keretvastagsággal a szöveg és a mellette megjelenő színes cella méretét egy értékre lehet hozni, és mindez formázással szabályozható (pl. CSS-ben). cella_c3 tartalma
Erdei vonatok
Menetrend
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 }
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
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
Tisztelt Látogató!
...
...
Ismerkedjen meg az újdonságainkkal!
2002.02.28.: Új csoportos kedvezmények ...
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(‘
<...’) utasítás használatával bezárhatjuk teljes egészében egy külső JS-fájlba, így arra csak hivatkozni kell az egyes lapokon. Ez a módszer segít abban, hogy dinamikusan növekvő oldalak egymásra történő hivatkozását egyszerűen megoldjuk.
A programozott megoldás hátránya, hogy amennyiben bármilyen okból ez a program nem működik, úgy megszűnik mindenfajta navigálási lehetőség az ilyen weblapjainkon. Ez lehet egy új webböngésző megjelenése, de bármilyen egyéb változás a kiszolgáló oldalán, ami megakadályozza az amúgy jól működő JS-programunk futását. Tipp. Ha biztosítani akarjuk a navigálás lehetőségét még akkor is, ha netán a JS-programunk nem működne, úgy helyezzünk el valódi hiperhivatkozásokat az oldalon, amelyek a következő oldalra vagy a nyitólapra mutatnak, esetleg a téma nyitólapjára visznek vissza.
Hasonló a probléma akkor is, ha a keresőkhöz regisztráljuk be az oldalainkat, hiszen azok sem tudnak továbblépni az oldalunkról az újabb weblapokra, mert csak a valódi hiperhivatkozásokat követik. Így viszont a további oldalaink kimaradnak az indexelésből, amivel a töredékére csökken a keresők felől érkező látogatók száma. Az persze már más lapra tartozik, hogy a keresőszerverek fontossága, látogatottsága a töredékére csökkent az utóbbi években, így ez már majdnem a múlté. Összefoglalva, hiperhivatkozásokra szükségünk van, de ne vigyük túlzásba, mert a linkek erdeiben a felhasználók csak eltévednek. Csak annyit helyezzünk el, amennyire feltétlenül szükség van, mert nem kell minden oldalról minden oldalt elérni. Ez téves szemlélet, és feleslegesen növeli a weblap méretét. 195
Egyedi elrendezésű weblapok
Grafikai fogás: Szövegtároló keretek rajzolása Az oldalaink elkészítésekor használt táblázat oldalai egyenesek, sarkai derékszögűek, ami ad egy mértani szabályosságot az egész oldalnak. Azonban az nem törvényszerű, hogy csak így lehet a tartalmat elhelyezni. Ha valaki lekerekített sarkú téglalapokat akar használni, netán íves vonalakkal határolt szövegrészeket, akkor tegye nyugodtan, de ez csak grafikákkal lehetséges. A táblázat oldalait nem lehet elferdíteni, a sarkai mindig derékszögűek maradnak, de ezt nem kell feltétlenül kihangsúlyoznunk. Ha a táblázatunk szegélyeinek vastagsága nulla, akkor azok nem látszódnak, így elhelyezhetünk bennük olyan kis képeket, amelyekkel az éles sarkokat lekerekíthetjük. Erre már láttunk egy egyszerű példát a 23. oldalon, és a Macromedia Fireworks MX programban is megnézzük majd milyen lehetőségek találhatók, de vajon hogyan lehetne elferdíteni a táblázat szegélyeit? Erre ilyen formában nincs módunk, de azt megtehetjük, hogy a táblázatba elhelyezünk egy nagy képet, amelyen tetszőleges szögben állnak a vonalak, illetve íves formákat öltenek. Mivel egy nagy kép letöltése lassú lenne, ezért fel fogjuk használni a Macromedia Fireworks MX programban elérhető szeletelés funkciót, amivel a nagy képet bármekkora kicsi, illetve tetszőleges méretű darabokra szeletelhetjük.
131. ábra. Egyedi lekerekített sarkú táblázat íves oldalakkal és mintázattal 196
A „Háromoszlopos” stílus részegységei Indítsuk el a Macromedia Fireworks MX programot, majd hozzunk létre egy új üres rajzlapot 780 pixel szélességben, és tetszőleges magassággal. Arra ügyeljünk, ha mintázattal akarjuk feltölteni a képet, akkor az lehetőleg akkora legyen, amekkorát tartalommal is meg tudunk tölteni. A példában bemutatott képnél nem lehet a cellát átméretezni, mert a mintázata nem jönne ki. Ha viszont olyan mintát készítünk, amely tetszőlegesen átméretezhető, sokszorozható, akkor az ilyen univerzális táblázatokból sokat elhelyezhetünk a weblapunkon. Lekerekített sarkú táblázat rajzolásához válasszuk ki a bal oldalon a Tools eszköztárról a Rectangle tool eszközt, amelyet az [U] betű leütésével is elérhetünk. Mivel nekünk a lekerekítettre van szükségünk, ezért nyomjuk meg többször az [U] betűt a billentyűzeten, amivel kiválaszthatjuk a Rounded Rectangle tool eszközt. Ezzel rajzoljunk egy kb. 140 pixel széles téglalapot tetszőleges magassággal. A szélességén később módosíthatunk, de emlékezzünk, a 155 pixelbe a téglalap szegélyének és az esetleges margónak is el kell férnie, ezért ez az óvatos rajzolás. A következő lépésben formázzuk meg ezt a táblázatot, a lenti Properties ablaktáblában felkínált eszközökkel. Találunk itt számos kitöltési lehetőséget, vonaltípusokat, és mindegyik mérete állítható. Ez utóbbira szükségünk is lesz, mert némelyik elég nagy értékekkel indít, hogy jól lássuk milyen mintázatot alkalmaz, de akkorára talán nem mindig van szükségünk. A mintázatos kitöltések alkalmazása esetén megjelenik a téglalapban egy-két segédvonal, amelyek elhúzásával a mintázatot tetszőlegesen állíthatjuk. Az oldal íveléséhez válasszuk ki előbb a Pointer Tools eszközt, és kattintsunk a görbíteni kívánt téglalapra, majd nyomjuk meg a [Ctrl]+[Shift]+[G] billentyűkombinációt, amivel az Ungroup műveletet hajtjuk végre. A téglalapunk ugyanis egy pontokból álló vektoros síkidom, amelynek pontjai egy csoportot alkotnak. Előbb ezt a csoportot felbontjuk, hogy újabb pontot adhassunk hozzá. Ezután a Vector / Freeform tool gombra kattintsunk, vagy az [O] billentyűt nyomjuk meg, és nézzük meg, hogy a Properties területen változás történt. A Size értékét módosíthatjuk, ha pontosan tudjuk előre, hogy a téglalap oldalán teljes hosszban szeretnénk egy enyhe ívelést végezni, akkor ehhez mekkora részt kell elhúznunk. Ezután kattintsunk a téglalap oldalára, és húzzuk el kis mértékben, ami gumiszerűen el fog hajolni. Most kattintsunk a Subselection tool gombra, és az egyes pontokat tetszőleges mértékben elhúzhatjuk, illetve az érintőikkel állíthatjuk a görbület irányát. Végezetül a Slice tool eszközzel daraboljuk fel a teljes területet, hogy a program el tudja készíteni a táblázatot, amelybe majd a mi szöveges tartalmunkat is be kell még írni, de ezt már a weblapszerkesztő programban tesszük meg. 197
Egyedi elrendezésű weblapok Az eredményt az [F12] megnyomásával a webböngésző programban azonnal megtekinthetjük. A darabolásnál arra ügyeljünk, hogy lehetőleg legyenek egyértelműen meghatározható sorok és oszlopok, de a legjobb, ha a saját 5x155-ös felosztásunkhoz ragaszkodva, ezt a szeletelésnél is figyelembe vesszük. Ellenkező esetben az eredmény egy szétesett kép lesz, ha az nem írható le egyértelműen HTML-ben.
132. ábra. A 800x600-as képernyőre tervezett oszlopaink helyenként íves vonalakkal Az ábrán látható különleges színátmenetes kép 780x490-es méretben és GIF-ben elmentve összesen 79 kB méretű, míg JPEG-ben 59 kB. Ez egyáltalán nem sok, mivel ez az alapsablon, illetve az egyes elemei a lapon lefelé többször felhasználhatók. Ha eltekintünk az íves vonaltól, és a vágást középen ejtjük meg, ahol a minták összefutnak a fehér színen, akkor az adott „doboz” lefelé tetszőlegesen nyújtható, tehát bármilyen hosszú tartalommal megtölthető. Ha ennél lényegesen egyszerűbb mintázatot alkalmazunk, akkor a képek is kisebbek és változatosabb módon felhasználhatók lesznek. Ezeket ugyanis nem lehet oldalirányban átméretezni a minta miatt, de a minta nélkül már igen. 198
A „Háromoszlopos” stílus részegységei
JavaScript: A színvizsgáló weblap elkészítése Most el fogjuk készíteni azt a weblapot, amellyel megvizsgálhatjuk a színek közötti összefüggéseket. Ez a weblap, illetve program azt mutatja meg, hogy a weblapok készítésekor nemcsak a feladattal kapcsolatos munkákat kell elvégeznünk, hanem olyanokat is, amelyek segítik a munkánkat, akár most, akár máskor. Számos ehhez hasonló „segédeszközt” kell (kellene) elkészítenie annak, aki erre a munkára adja a fejét, mert a további munkavégzést jelentősen meggyorsíthatják az ilyen kellékek. szinteszt.html -=# Színteszt #=-
<script LANGUAGE="JavaScript" src="web5.js">
133. ábra. Színvizsgáló weblap forrása Ez a weblap egy táblázatból áll, amelynek minden cellája kapott egy-egy azonosítót (ID), és mindegyik 255 pixel szélességű. Azért éppen ennyi, mert így az „event.x” kiolvasásával azonnal beállíthatjuk az adott RGB-színt, mert csak át kell alakítani a kiolvasott értéket 16-os számrendszerbeli számmá. A cellasorok magasságát 100 pixelre állítottuk, hogy az „event.y” felhasználásával az R-G-B értékei között válthassunk egyszerűen. Az egérmutató átállítása pedig már csak ráadás, segíti a pontosabb értékek beállítását. Most lássuk a JavaScript programot. A legfontosabb eleme a document.onmousemove = szin_mozog; beállítás, amellyel megadtuk, hogy az egérmutató mozgásakor azonnal hívja meg a függvényünket, ahol állítani fogjuk a cellák színét. Ezután beállítjuk a globális változóinkat, amelyekre nagy szükségünk lesz a program során. A r, g, b az 199
Egyedi elrendezésű weblapok alapszín összetevőit tárolja, az i egy ciklusváltozó, míg a dx az inverz színek sötétítéséhez felhasznált eltolási érték. A hex() függvénnyel már találkoztunk a 78. oldalon, ez a kapott értéket alakítja át 16-os számrendszerbeli alakká, amit a háttérszín megadásakor fogunk felhasználni. Az előkészületeket az atfest() függvényünk meghívása zárja, amely beállítja a cellák alapszínét. Az oke() nevű függvény szintén egy segédprogram, amely a kapott értéket vizsgálja meg, hogy belül van-e a [0, 255] tartományon. Ha nincs, akkor gondoskodik erről. Erre nagyon sokszor van szükségünk a program során, ezért a program rövidítése érdekében alkalmaztam. document.onmousemove=szin_mozog;
web5.js részlete
var r=0, g=255, b=128, i=0, dx=0; hexa = new Array(16); hexa.length = 16; for(var i = 0; i < 10; i++) hexa[i] = i; hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; hexa[13]="d"; hexa[14]="e"; hexa[15]="f"; atfest(); function hex(i) {i=oke(i); return "" + hexa[Math.floor(i/16)] + hexa[i%16];} function oke(sz) { if (sz>255) sz=255; else if (sz<0) { sz=0; } return sz; }
Ezt követi az eseménykezelő főprogram, amely az egérmutató adott pozíciója alapján kiszámítja a színek értékeit. Előbb megállapítjuk, hogy a 100 pixel magas táblázat melyik sorában vagyunk, valamint eltároljuk az esemény „x” értékét. Az első cella felett mozgatva az egérmutatót az „r”, vagyis a piros összetevőt állítjuk, a második felett a zöldet, a harmadiknál a kéket, és a táblázat alatt a harmadik oszlopba kerülő sötétített inverz színek eltolási értékét. web5.js folytatása function szin_mozog() { var n = Math.round((event.y+50) / 33) -1; var m = event.x; switch (n) { case 1: r=m; break; case 2: g=m; break; case 3: b=m; break; case 4: dx=m; break; } r=oke(r); g=oke(g); b=oke(b); atfest(); window.status= "X: " + event.x + " / Y: " + event.y+ " --- n/m: "+n+" -/ "+m; }
200
A „Háromoszlopos” stílus részegységei A választást egy egyszerű switch() utasítással végezzük el, majd ellenőrizzük a színösszetevők értékeit. Az egérmutatót ugyanis mi elmozgathatjuk a képernyő legtávolabbi sarkába is, de abból nem jönne ki jó színérték. Ezután meghívjuk az atfest() függvényt, amely elvégzi a színezést. A végén kiírjuk az állapotsorba a főbb adatokat, amivel ellenőrizhetjük a programunk futását. Tipp. Az állapotsort mindig használjuk fel visszajelzőként egészen addig, amíg a programunk nem fut teljesen tökéletesen. Írassunk ki minden fontos részeredményt, ha valami apró hiba lenne a programunkban, mert így sokkal hamarabb megleljük annak okát, mintha csak a forrásprogramot nézegetnénk.
Az atfest() program érdemi része az első négy sor, majd az utána következő három kiírás (igazából nem szükséges), az összes többi ezek ismétlése a különböző módosított RGB-értékekkel. Először átalakítjuk az r-g-b értékeit 16-os számrendszerbelivé, majd az ezekből összeállított karakterlánccal beállítjuk az adott cellák háttérszínét. Figyeljük meg a színek eltolását ( hr ) ! web5.js folytatása function atfest() { var hr = hex(r); var hg = hex(g); var hb = hex(b); szin_1.style.backgroundColor = "#"+hr+hg+hb; szin_2.style.backgroundColor = "#"+hb+hr+hg; szin_3.style.backgroundColor = "#"+hg+hb+hr; szin_1.innerText = "R: "+r+"; G: "+g+"; B: " + b + ";"; szin_2.innerText = "R: "+b+"; G: "+r+"; B: " + g + ";"; szin_3.innerText = "R: "+g+"; G: "+b+"; B: " + r + ";"; var hr = hex(255-r); var hg = hex(255-g); var hb = szin_4.style.backgroundColor = "#"+hr+hg+hb; szin_5.style.backgroundColor = "#"+hb+hr+hg; szin_6.style.backgroundColor = "#"+hg+hb+hr; szin_4.innerText = "R: "+(255-r)+"; G: "+(255-g)+"; B: szin_5.innerText = "R: "+(255-b)+"; G: "+(255-r)+"; B: szin_6.innerText = "R: "+(255-g)+"; G: "+(255-b)+"; B:
Egyedi elrendezésű weblapok A megadott RGB-színhármassal igazából csak az első cellát színezzük be, mert a következő sorban már az eggyel eltolt szín látható, míg utána a harmadik eltolás eredménye. Az innerText utasítással beírjuk a cellába a színek értékeit, hogy ha ellenőrizni akarnánk, akkor erre meglegyen a módunk. Tipp. Az ellenőrzéshez használhatjuk például a Windows Paint programját. Indítsuk el, kattintsunk duplán az egyik színre, majd az Egyéni színek definiálása gombra. Itt írjuk be a piros-kék-zöld értékeit, és megjelenik a szín mezőben a megadott szín.
A következő oszlopban lévő cellák színét a 255-ből kivont összetevőkkel kapjuk meg, ami az előző cellában lévő szín inverze. A harmadik blokkban ezt az inverz színt világosítjuk ki, bár itt már történnek eltolódások, hiszen a színek értékei 255 fölé nem növekedhetnek. Mindenesetre így is sok tapasztalatot szerezhetünk e weblap használatával. Nincs más dolgunk, mint az egérmutatót mozgatni az első három cella fölött, illetve a táblázat alatt, és úgy kell tennünk, mintha a cellában valamilyen csúszka lenne, amit elhúzunk jobbra-balra. Tipp. Amennyiben nem akarja begépelni a programot, úgy töltse le azt a honlapomról a www.moricznet.hu címről a könyvismertető lapjáról. Ugyanitt további hasznos segédprogramok találhatók, amelyekről a könyvben szó volt.
JavaScript: A friss híreknek görgetett szöveg A jelenlegi weblapunk elrendezésénél számos kisebb-nagyobb keretes területet hozhatunk létre, amelyek más és más feladatokat láthatnak el. Az egyikben például elhelyezhetünk egy friss híreket görgető lapot, amelynek tartalma a témájának megfelelően bármikor változhat, és ehhez nem kell a weblapjainkat átszerkeszteni, elég csak az adott híreket tartalmazó weblapot módosítani. A megoldáshoz az IFRAME elemet fogjuk felhasználni, amelyet már alkalmaztunk a 98. és a 106. oldalon. A mostani alkalmazása ennél kisebb jelentőséggel fog bírni, mivel csak egy oldalsó kisebb cellában fogjuk az objektumot elhelyezni, amely akár egy üres oldalt vagy egy képet tartalmazó lapot is behívhat, ha nincs éppen friss hírünk. Fontos! Ha egy területet fenntartunk a friss híreknek, akkor ott mindig csak a valóban friss híreket közöljük, mert különben hitelét veszíti az adott funkció a weblapon. Ha nincs friss hír, akkor például hagyjuk üresen. 202
A „Háromoszlopos” stílus részegységei Az IFRAME beszúrása a cellába a már ismert módon történik, és méretezése a cellához igazodjon. Keretet ne adjunk neki, ha szeretnénk minél jobban a környezetbe beolvasztani. Mivel a görgetni kívánt szöveg hossza nagyobb lesz, mint az ablak mérete (különben nem lehetne görgetni), ezért a görgetősáv is meg fog jelenni. Ügyeljünk arra, hogy csak a függőleges görgetősáv jelenjen meg, mert különben a szöveg nem lesz rendesen olvasható. Ehhez csak egyszerű bekezdésekbe helyezzük a szöveget, és ne alkalmazzunk semmilyen táblázatot vagy más formázási elemet. index.html részlete
A weblapon keressük meg azt a cellát, amelyikbe a görgethető szöveget el akarjuk helyezni, majd ebbe szúrjuk be a fenti kódrészletet. A cella jelenleg az oda illő képet tartalmazza, amelyet célszerű áttenni háttérképnek. Egyrészt emlékezni fogunk rá, hogy melyik kép volt ebben a cellában, másrészt ha kivesszük egyszer az IFRAME elemet, akkor sem marad üres a cella, mert a kép díszíteni fogja, de akár rövid üzenetet is írhatunk bele, mivel a kép csak a háttérben lesz. A következő ábra a beépítés folyamatát és a formázási lehetőségeket mutatja be.
134. ábra. Folyamatosan görgetett hírblokk fejlődése a formázás eszközeivel Az első képnél a folyoszoveg.html egy „<pre>” taggal formázott e-mailt tartalmazott, ezért a vízszintes görgetősáv is megjelent, ami amellett hogy csúnya, kezelhetetlenné teszi a szöveget. A másodiknál már a szöveg egyszerű bekezdések sorozatát mutatja, ami egy adatbázisból olvasott adatsor megjelenítése is lehetne. Ha ez a változat szimpatikus, akkor a görgetősávot formázzuk meg az oldal színvilágának megfelelően. 203
Egyedi elrendezésű weblapok Ha amellett döntünk, hogy nem kell a görgetősáv, hiszen miért kellene, akkor a szöveg folyamatosan fog folyni a keretben egy JavaScript programnak köszönhetően. Ezt mutatja a negyedik kép, ahol a görgetősávot letiltottuk a keretben megjelenő weblap forrásában. Ezzel együtt megadtuk a háttérnek azt a grafikát, amelyik amúgy ebben a cellában volt, és hogy a görgetésnél ne mozduljon el, még rögzítettük is. Majdnem tökéletes lett, így már csak a szegélyt kellett eltüntetni a frameborder=0 paraméterrel, és kész a tökéletes automatikusan folyó szöveget tartalmazó dobozunk. A szöveg görgetését a következő kis program végzi el a weblap elején. folyoszoveg.html <script language="Javascript">
2003.03.08: Nőnapi akció: Három napon keresztül 20%-os árengedménnyel vásárolhatók egyes cikkek a vidéki boltjainkban. Keresse az akciós logót!
...stb.
135. ábra. Az IFRAME-ben folyó szöveg weblapjának forrásfájlja Az előzőekben leírtaknak megfelelően a fenti weblap az összes formázást tartalmazza, így az utolsó képnek felel meg. A body stílusánál megadtuk a görgetősáv egyes elemeinek színezését (lásd a 58-60. oldalakat), bár ezt az elején az „overflow:hidden” paraméter teljesen elrejti. Ezért vagy az egyik, vagy a másik paramétert hagyjuk meg, de a kettő együtt felesleges. A színek megadásánál az ismert módszerek mindegyike használható (white; rgb(1,1,1); #00ffcc;). 204
A „Háromoszlopos” stílus részegységei Ezt követi a weblapon lévő JavaScript programunk, amely definiálja a dokumentum területén történő egyszeres és dupla kattintás hatására kiváltott eseménynél végrehajtandó függvényeinket. Ebből az egyik az igen(), a másik pedig a nem(). Látni fogjuk, a megfogalmazás nagyon logikus, így könnyű megérteni a működését. He egyet kattintunk, akkor nem akarjuk folytatni a görgetést, míg ha kettőt, akkor igen. Az előbbinél az ok logikai globális változónkat hamisra állítjuk (false), és a hamarosan bekövetkező gorgess() függvény ezzel be is fejezi a működését. Mivel a szkript a weblapon van, ezért a direkt hívással azonnal elindítjuk, amely kiadja a window.scrollBy(0,1); utasítást, amivel a szöveget felgörgeti egy pixellel. Ez nem sok, ezért finom lesz az elmozdulás. A következő if() vizsgálatban azt nézzük meg, hogy mehet-e tovább a görgetés, és ha minden oké, akkor a setTimeout() függvényt felprogramozzuk a következő indításra. Mivel itt tizedmásodpercet adtunk meg, ezért egy másodperc alatt 10 pixelt fog görgetni, ami egy sornál is kevesebb, tehát elég lassú lesz ahhoz, hogy ne legyen zavaró, és el lehessen olvasni. Ha a szövegbe kattintunk egyet, akkor a görgetés megáll, mert az ok értéke hamisra vált, így a következő if()-nél nem hívja meg magát újra. Ha viszont duplán kattintunk, akkor a görgetés újra elindul, mert az igaz értékre állítás mellett meg is hívjuk a gorgess() függvényt. Tipp. A programot további szolgáltatásokkal lehet kiegészíteni, amelyekkel a szöveg görgetése gyorsítható, lassítható, megállítható, visszafelé indítható. A lehetőségek korlátlanok.
Ne felejtsük el, a weblapunk annál profibb lesz, minél több szolgáltatást nyújt. Ha csak egy sima görgetést tartalmaz egy egyszerű IFRAME-keretben, akkor az még nem sok, de ha ezt az ábrán látott 5. képben teszi, akkor az már valami. Ha ez a görgethető szöveg a korábban említett változatos irányítási szolgáltatásokat nyújtja, akkor az már igazán profi, amire érdemes odafigyelni. Fontos! A weblapon görgetett szöveg folyási sebessége mindig olyan lassú legyen, hogy az ne vonja el indokolatlanul a látogató figyelmét a weblap többi részétől. Egy felbukkanó súgóban vagy más módon ajánlhatjuk a látogatónak, hogyan tudja a görgetést leállítani, ami utána máshol se fusson. A scrollBy() arra is használható, hogy minden oldalnál más tippet mutasson meg. Ilyenkor nem hívja meg magát újra, csak egyszer, de minden lapnál más értékkel. Ha pontosan tudjuk mennyit görgessen a következő tipphez, akkor mindig új tippet ad, de ugyanabból a fájlból, így megjelenítése gyors lesz. 205
Egyedi elrendezésű weblapok
Shareware: Segédprogramok a színek állításához Mivel sok szó esett a színekről, lássunk pár segédprogramot, amelyekkel a színek között tallózhatunk. Az elsőt a http://www.nzworks.com/hexcf/ címről tölthetjük le, és saját színskálák összeállítását segíti, de már előre tartalmazza a teljes színspektrumot. A másik egyszerűbb program kisebb méretű, és kevesebb színt lehet előre definiálni. A címe: http://user.tninet.se/~ddb786p/program
136. ábra. Egyszerűbb színgyűjtő programok A http://letoltes.prim.hu/ címről elérhető ez a több szolgáltatást nyújtó program, amely a képernyőről is gyűjthet színeket, és gombnyomásra a vágólapra másolja azok hexa-kódjait tetszőleges formázással.
137. ábra. Változatosan definiálhatunk színeket és egyéni listákat hozhatunk létre 206
Helyi menük és HTML-térképek
További segédprogramok Az eddigiek során számos programot megismertünk a napi használat során, de felmerülhet az igény újabb alkalmazások iránt, amelyekkel bizonyos részfeladatokat egyszerűbben el tudnánk végezni. Ugyanis a weblapszerkesztés eléggé régi munka, így elég sok segédprogramot találunk az interneten, amelyekkel az egyes részfeladatok elvégezhetők. Azért nem árt fenntartásokkal kezelni ezeket a programokat, ugyanis némelyik nem igazán törekszik arra, hogy szépen formázott és jól átlátható kódot írjon, talán éppen azért, hogy ne is akarjuk visszafejteni a megoldás lényegét. Amikor viszont egy program például csak egy menüt készít, akkor az a mi weblapunkon csak egy kis helyet foglal, így ennek megfelelően jó lenne, ha a forráskódja se töltené meg a weblapunkat. Ezzel szemben némelyik annyira terjengős kódot készít, hogy az teljesen tönkreteszi a weblapunk áttekinthetőségét. (Ilyenkor használhatjuk a HomeSite 5-ben lévő kódrészlet becsukása funkciót.) Tipp. A segédprogramokat arra is használhatjuk, hogy ellessük belőlük az ötleteket, esetleg a megvalósítás módját, de végül annak egyszerűbb vagy módosított formáját mi magunk valósítjuk meg.
Egyes programokban olyan megoldásokat találunk, amelyeket magunk is el tudunk készíteni, de az adott forma nem nekünk jutott eszünkbe. Ilyenkor a programból nyert ötletet mi valósítjuk meg, esetleg más módon kivitelezve.
Helyi menük és HTML-térképek A weblapjainkon a navigálás fontos szerepet tölt be, de annyira nem, hogy a teljes weblapunkat elfoglalja. Ezért mások oldalait járva mindig keressük az olyan megoldásokat, ahol nekünk tetsző módon valósítják meg a navigációt, és az oldalak mennyisége is hasonló a miénkhez. Persze nem elég az, hogy tetszik egy adott oldal felépítése és navigációs eleme, azt még nem biztos, hogy a saját oldalunknál is alkalmazni tudjuk. Számos Shareware és ingyenes programot találunk a szokásos letöltésre szakosodott helyeken, így sokféle ötletforrás áll a rendelkezésünkre. Ha egy helyi menüt teljesen kiterítve ábrázolunk, akkor azt már tekinthetjük térképnek, mint amilyen a Windows Intézőben a bal oldali fanézet. Ezért bármelyik címszó alatt hirdeti magát egy program, előfordulhat hogy mindkét célnak megfelel, vagy éppen mi térhetünk át az egyik elképzelésről a másik megvalósítására. 207
További segédprogramok
Xtreeme SiteXpert v6.1 Forrás: http://tucows.euroweb.hu/ ..... Honlap: http://www.xtreeme.com/sitexpert/ Mérete: 3’269 kB. A kipróbálható program segítségével korlátlan ideig, de legfeljebb 50 hivatkozási szintet megvalósító menüt készíthetünk. Ez a könyvben tárgyalt felépítések többségére érvényes, így hasznunkra válhat. A program lényege két ablakra koncentrálódik. Az egyik, ahol létrehozhatjuk a menüt, ez látható az ábrán, míg a másikban beállíthatjuk az egyes jellemzőit, bár a jelenlegi változatban ezeket nem igazán akarja alkalmazni (és visszaírja az alapértelmezett adatokat). Az ábrán lévő felépítést létrehozva a beszúrt weblaprészlet mutatja a végleges menüt, amelynek HTML-forrása nem is olyan bonyolult, így akár külön JS-fájlba is áttehetjük a menüt megvalósító programot, amelyet utólag módosítva tetszőlegesen átszerkeszthetünk, mivel a valódi menüt megjelenítő program külön JS-fájlokban található. Az így fennmaradó weblaprészlet már egészen rövid lesz, így bátran alkalmazhatjuk a weblapjainkon.
138. ábra. Dinamikus menü készítése ezzel a programmal egészen egyszerű 208
Helyi menük és HTML-térképek Érdemes külön mappába elhelyezni ezt a menüfájlt, hogy ne keveredjen a mi fájljainkkal, így pontosabb képet kaphatunk arról, hogy egy ilyen menü milyen további fájlokkal jár együtt. Az ábrán bemutatott menühöz tartozik kb. 18 db 1 kB-os GIF-fájl, amelyek a menük lekerekített sarkát és hátterét adják, 8-9 db JS-fájl összesen 10-20 kB átlagmérettel, valamint a gomb képe és a szükséges weblap részlete. Bár találunk több JS-fájlt, de mindegyik egy fajta webböngészőre lett optimalizálva, így csak azt tölti le, amelyikre az adott esetben szüksége van. A gomb és a menü szép, még egy szolid weblapon is elhelyezhető, amennyiben az színében és (lekerekített) stílusában illeszkedik hozzá. Más formák választása esetén esetleg a képek száma növekedhet, ami nem előnyös, mert egy 20 kB-os képet is gyorsabban le lehet tölteni, mint 20 darabot az 1 kB-osból. Ezen persze segíthetünk egy takarólap megjelenítésével, vagy más figyelemelterelő műveletekkel, amelyekről az egyes elrendezéseknél szó volt már. A program kb. 54 db beépített menüt és menütérképet meghatározó stílussal rendelkezik, így ezen a téren elég sok új tippet kapunk.
Flash-menük: 1st Cool Button v5.0 Forrás: http://tucows.euroweb.hu/ ................ Honlap: http://www.buttontool.com/ Mérete: 3’739 kB. A program alapvetően animált menük megjelenítésére szolgál, de az alábbi ábra egészen különleges alkalmazásokat mutat. A bal oldali ábrát akár egy teljes weblapként is értelmezhetjük, míg a jobb oldali egy különleges animált menü, színváltással, hanghatásokkal, ahogyan kell.
139. ábra. Néhány egészen speciális alkalmazása e programnak 209
További segédprogramok Sajnos a program eredményét internetes alkalmazás esetén egy nagy fekete lap fedi el, amelyen az „Unregistered” felirat olvasható. Ez viszont helyi weblapok esetén nem jelenik meg, így például CD-lemezre készülő weblapos multimédiás anyagnál tökéletesen használható. Mivel ott is szükség van weblapokra, így a webdesign ott is ugyanúgy fontos. Tipp. A program segítségével például készíthetünk egy egyszerű párgombos navigálásra szolgáló menüt. A létrehozás során megismerhetjük, hogy milyen részfeladatokat kell elvégeznünk, ha ilyen menüt akarnánk más módon elkészíteni. Nézzük ilyen szempontból is a programot, és sokat tanulhatunk belőle.
Az alábbi ablakban a jobb felső sarokban lévő menü szerkesztése folyik, a jobb alsó menü csak egy újabb mintakép. Mindegyik gombnak van három állapota, egy hozzárendelt hiperhivatkozás, állapotsori szöveg, illetve a célkeret neve. Az első gomb az alapértelmezett, a második a rámutatáskor jelenik meg, a harmadik a lenyomáskor. Mindegyiknél megadhatjuk a feliratát, színét, betűtípusát és a formázási jellemzőit, amelyekkel még inkább szimulálhatjuk a gomb benyomódását, hiszen az nem más, mint egy másik kép megjelenítése. Hozzárendelhetünk hangot és megjelenő képet is, bár ezekre máshol van szükség.
140. ábra. A program kezelőfelülete és egy-két minta 210
Helyi menük és HTML-térképek Meg kell adnunk minden egyes gombnál az előbb felsorolt jellemzőket mindegyik állapot esetére. Ebben segít a „More Options” gomb előtti két képes gomb, amelyekkel az utolsó művelet alkalmazható az összes gombra, így könnyen és gyorsan egységessé tehetjük az összes gombot. Amikor mindezekkel elkészültünk, akkor kattintsunk a Build Applet vagy a Build Flash fülek egyikére, ahol megtaláljuk a szükséges HTML-forrást, illetve a fájl mentéséhez (Build) vagy teszteléséhez szükséges gombokat. Az első lapon egy rádiógomb átállításával egyszerűen készíthetünk a függőleges menüből vízszintest, illetve tetszőleges méretű területet foglalhatunk le a számára. A munka során bármikor a Play gombra kattintva a külön ablak szerkesztőből flashlejátszóvá lép elő, és kipróbálhatjuk mentés nélkül az animált gombjainkat.
JavaScript Utility Suite v1.0 Forrás: http://tucows.euroweb.hu/ ..................... Honlap: http://dark-street.cjb.net/ Mérete: 958 kB. Ezzel a kis programmal egyszerűen készíthetünk legördülő menüt, felbukkanó ablakot és számos dolgot, amit a program ablaka is mutat. A jobb alsó sarokban például hozzáadhatjuk a menü elemeit, ez gyűlik a bal oldalon, majd a Make Code gombra kell kattintani és a Copy to Clipboardra. A HTML-kódot már be is illeszthetjük a weblapunkba, ennyire egyszerű az egész.
141. ábra. Egyszerű párbeszédablak JavaScript alkalmazásához 211
További segédprogramok
Selteco Menu Maker v3.03 Honlap: http://www.selteco.com/ .................................................. Mérete: 991 kB. Az előzőekhez képest köztes megoldást nyújt ez a szöveges menükészítő program, amellyel könnyedén készíthetünk szöveges-alapú és legfeljebb egyszintű menüt, amelyet viszont teljes egészében kiszínezhetünk. Az ábrán látható állított menüt egy kattintással átalakíthatjuk vízszintessé, így többféle helyen is használható különféle formákban.
142. ábra. Egyszerű HTML-alapú menü készítése percek alatt elvégezhető A weblapba csak egy hivatkozást kell elhelyezni a menü helyén egy JavaScript programra, és biztosítanunk kell a szükséges helyet, más dolgunk nincs vele. A menü teljes egészében egy 5 kB-os JavaScript fájlban található, így tökéletesen megfelel az eddig megfogalmazott igényeinknek. A menü utólag bővíthető, így újabb weblapokat kapcsolhatunk be a webhelyünkbe a weblapok módosítása nélkül. A színezéssel és a keretekkel egészen jó megjelenésű menüket készíthetünk, és mindez csak a menüpontok megadásával történik. Az egyes elemeknél egyéni HTML-kódot is megadhatunk, így újabb lehetőségek nyílnak meg. 212
Speciális gombok és feliratok
Speciális gombok és feliratok Az animált menük készítésére már láthattunk egy jó példát, de most nézzünk meg pár egészen különleges programot. Az első program egy flash animált felirat, hirdetés, menü vagy gomb elkészítésére alkalmas. Nagyon sok különleges effektust ismer, így az eddigieknél színesebbé tehetjük a honlapunkat, de azért arra ügyeljünk, hogy ne uralja egy animáció az egész oldalt. Ugyanezen cég másik programja egészen hasonlít az előzőhöz, de ezzel hagyományos animált GIF-képet készíthetünk. Hirdetési csíkok elkészítésére tökéletesen alkalmas, hiszen percek alatt létrehozhatunk vele mindenféle mozgást, feliratot, rajzot, ábrát tartalmazó képet. A Xara programja szintén a weblapokhoz való gombok, képek, menük és mindenféle kellék elkészítésére alkalmas, amelyek ráadásul azonos design köré szervezhetők, így nem lesz tarka-barka az oldalunk a sok egyedi képtől. Ezzel azért óvatosan bánjunk, mert a szép grafikus elemek egy egyszerű megjelenésű weblapon talán túlzottan ki fognak emelkedni.
Flash-készítő: Selteco Flash Designer v1.5 Forrás: http://tucows.euroweb.hu/ ................... Honlap: http://www.selteco.com/ Mérete: 1’311 kB. Általában minden program felfedezését kezdjük úgy, hogy megnézzük, van-e hozzá minta (example), és ha van, akkor azt töltsük be szerkesztésre. Sokszor sablonokkal segítik a program készítői a leendő felhasználókat, hogy minél egyszerűbben elkészülhessen az első dokumentum. A betöltés után azonnal játsszuk le az [F9]-cel, és nézzük meg, hogy mit kínál az adott mintafeladat. Ezután zárjuk be a lejátszó ablakát, és nézzük meg milyen mentési vagy exportálási lehetőségeink vannak. Itt szerencsére a File menüben kézre esik az Export SWF File... menüpont, így próbáljuk ki gyorsan. Húzzuk rá a kész SWF-fájlt a webböngésző ablakára, és nézzük meg ott is az animációt vagy amit elmentettünk. Ha van hiperhivatkozása az adott gombnak, elemnek, akkor azt úgyszintén próbáljuk ki. Mivel flash-t készítettünk, ezért jó ha van hozzá egy weblap is, ezért annak exportálását ugyancsak próbáljuk ki, majd töltsük fel mindkét fájlt az internetre. Azt fogjuk látni, hogy minden tökéletesen működik, se korlátozás, se tiltás, így szabadon használhatjuk a programot. Egyes funkciói azért korlátozva lesznek, valamint néha elszáll a program, de ezt a problémát enyhíthetjük gyakoribb mentésekkel, így minimálisra csökkenthetjük az adatvesztést. 213
További segédprogramok Az ábrát nézve láthatjuk, hogy a program kezelése nem lesz bonyolult. Hozzunk létre egy új üres dokumentumot, és készítsünk például egy gombsort (lásd az alsó dokumentumablakban). Ehhez rajzoljunk egy téglalapot, állítsuk be a színét, az eszköztárról a keretvastagságot, tegyünk rá egy feliratot, majd ennek színeit is állítsuk be. Külön-külön mindegyik elemnél kattintsunk a jobb egérgombbal, és határozzuk meg, hogy az adott elem megjelenése (értsd belépője) milyen animáció keretében történjen meg. Az „on” kezdetű menüpontokkal megadhatjuk, mi történjen az adott események bekövetkeztekor.
143. ábra. Flash-hirdetés készíthető pillanatok alatt tengernyi animációval fűszerezve A példában lévő gombsornál a 4 gomb és felirat 8 képkockán (Frame) jelenik meg. Ehhez az első csak az első téglalapot tartalmazza, majd az első feliratot, és így tovább. Mindegyik elem animációval jelenik meg, de csak egyszer. Ha az utolsó gomb is megjelent, akkor az animáció leáll. Ehhez az utolsó képkockánál a továbblépési idő (Delay) mezőben válasszuk ki a „Stop” elemet. Amíg ez nem következik be, addig a hiperhivatkozások sem fognak működni. Nézzük meg a programhoz mellékelt 3. mintát (3-menu), amelyben négy menüpont látható, amelyekre kattintva a hozzájuk tartozó „almenü” nyílik meg. Ennél a feladatnál minden egyes feliratot külön kellett elhelyezni, bár ebben a vágólap nagy segítségünkre lehet. Ennek ellenére egy ilyen menü elkészítése már eléggé munkaigényes, de nagyon látványos is. Az első lap az alapkép, a második a menüt mutatja, a többi pedig az egyes elemekre történő kattintáskor megjelenő nyitott menüket. Így a menü nem megnyílik, hanem csak képet vált. 214
Speciális gombok és feliratok
Selteco Bannershop Gif Animator v4.5 Honlap: http://www.selteco.com/ ............................................... Mérete: 1’681 kB. Valószínűleg ez a program volt előbb, és a Flash Designer pedig ebből alakult ki, ezért érdemes ezzel a programmal is megismerkedni. Felépítését tekintve majdnem azonos a két program, csak éppen annyi különbség van közöttük, mint amennyit a két kimeneti formátum indokol (flash SWF, animált GIF). E program jelentősége elsősorban a hirdetési csíkok elkészítésében van, amelyeket a weblapok tetején lehet látni.
144. ábra. Animált GIF hirdetési csík ennél egyszerűbben nem készülhet Az ábrán látható hirdetési csík nagyon egyszerű kivitelezésű, mivel csak az egyes feliratok jelennek meg folyamatosan egymás után különböző animációk kíséretében. Célszerű az olyanokat választani, amelyek az animáció első pár fázisában csak kis méretűek, mint például a távolról közeledő felirat, mert az alacsonyabb fájlméretet fog eredményezni. Ez ugyanis létfontosságú egy hirdetésnél, mert ha túl sokára jelenik meg az oldalon, akkor addigra lehet, hogy már más oldalra lép a látogató. Animáció megvalósítására az egyes képkockákra való lépéskor és annak elhagyásakor van lehetőség, ezért a soklépéses animációknál törekedni kell arra, hogy az egyes elemek mind külön képkockára (Frame) kerüljenek. Ilyenkor a folyamatosság megőrzése miatt a háttérnél az előző képkockát kell megadni, így látjuk az előző rajzolatot, de nem tudjuk kijelölni annak elemeit, viszont jól igazodhatunk azokhoz. Az animáció mentésekor mindig nézzük meg az előképet (Preview), mert kevesebb színnel kisebb fájlmérethez jutunk. 215
További segédprogramok
Xara Webstyle v2.0 és v3.1 Forrás: PC World 2003. január .................... Mérete: 9 MB (v2.0, teljes változat). Honlap: http://www.xara.com/ ........................................... Mérete: 7,3 MB (v3.1). Amennyiben ön a PC World előfizetője, úgy lehetősége nyílik arra, hogy a Xara ezen termékét teljes mértékben kihasználja, mivel ez nem bemutató változat, hanem használható elemeket készítő alkalmazás. Amennyiben az internetről tölti le a legújabb változatot, úgy számolnia kell azzal, hogy a program csak korlátozott ideig használható, de az eredményként kapott grafikák jók lesznek. A nehezebb feladat az, hogy ne a kínálat szerint készítsünk gombokat, feliratokat és egyéb képeket, hanem az általunk választott és készített webdesignhoz illeszkedőt. Ez vonatkozik mind a gombok sarkaira, a színvilágukra vagy az esetleges színátmenetekre, illetve a használt betűtípusokra egyaránt. Nagyon könnyen elcsábíthat bennünket a program, mert néhol egészen nagy a kínálata, különösen ha megvásároljuk a CD-t.
145. ábra. A nagy kínálat mögött kis tartalom bújik meg 216
Speciális gombok és feliratok A program használata nagyon egyszerű, ha pontosan tudjuk, mit akarunk készíteni. Fontos, hogy először ezt tisztázzuk magunkban, és csak utána álljunk a munkának, mert ha a program kínálatát nézzük, akkor biztosan mást fogunk készíteni, mint amit eredetileg akartunk. Az első lépésben választanunk kell egy feladatot, vagyis az elkészítendő kép típusát. Ez lehet: Navigációs menü, gomb, képkezelés, háttérkép, bajuszgomb, főfelirat, 3D felirat, elválasztó vonal, logó, hirdetési csík. A felsorolásból viszont jó ha a gombok használhatók valamire, míg az összes többi, még a csak CD-ről elérhető kínálat is önmagában szép, de azt meglévő weblapba beilleszteni nem könnyű feladat, ha egyáltalán lehetséges. Példának okáért a Xara weblapjain sem találtam egy helyen sem olyan weblapot, amelyet a programmal készült elemek díszítettek volna. Hiszen ha annyira jó lenne a program, akkor éppen a saját weblapjukon kellene példát mutatniuk, hogy milyen jó eredménnyel működik, de ilyennel nem találkozunk. Megjegyzés! Készíthetünk úgy is elrendezési tervet, hogy a programból ellesett design köré építjük fel az egész weblapot, de ez csak abban az esetben működhet, ha az illeszkedik oldal témájához is. Ez a megoldás tipikus esete annak, amikor a gombhoz veszünk kabátot. – Nem igazán követendő... A program előnye, hogy kínálatot nyújt a webes grafikákból, és segíti a kezdőket abban, hogy elképzelésük legyen, milyen elemeket használhatnak fel a weblapjaik építésekor. Természetesen nem kell egy weblapot az összes itt elérhető képi elemmel felruházni, de mint kínálat színesebbé és érdekesebbé teheti az oldalainkat. Mindenesetre a program elgondolkodtató, és felhívja a figyelmet arra, hogy a weblapjainkra tervezett grafikákat és menüket egységesíteni kell, még ha nem is ezzel a programmal. Már az eddigiekben is megismerhettünk számos olyan programot, amelyekkel egy-egy részfeladat kitűnően megoldható, de ott nekünk kell ügyelnünk az egységes kép és design megtartására. A program v3.1-es változata a navigációs menüsort kiegészítve legördülő menü készítését is lehetővé teszi, bár ez eléggé kiábrándító. Szép, különleges képes gombokról, közönséges egyszerű táblázatos menü gördül le. További újdonság a képek kezelése. Itt beolvashatunk egy darab képet, annak állíthatjuk számos jellemzőjét (fényerők, színek stb.), amelyek közül egyedül a tetszőleges szöggel való elforgatás érdemel említést, mert az nem általános az egyszerűbb programokban. Ezen a téren viszont a Macromedia program meszsze felülmúlja ezt a funkciót, így csak ezért nem érdemes telepíteni. A 3D-s feliratai különlegesek, de azok nagyon ritkán alkalmazhatók weblapokon. 217
További segédprogramok
További szerkesztőprogramok Két újabb weblapszerkesztő programot nézünk meg, amelyek rendelkeznek olyan szolgáltatással vagy jellemzővel, ami miatt esetleg felkelthetik az érdeklődésünket. A másik előnyük, hogy olyan feladatokra világíthatnak rá, amelyekre eddig nem gondoltunk.
HTML Builder XP v4.0. Enterprise Honlap: http://www.code-builders.com/ ................................... Mérete: 9’124 kB. E program felépítése is nagyon hasonlít az eddig megismertekre, és párbeszédablakait tekintve is lényegesen kevesebbet nyújt, mint például a HomeSite, de mégis van benne egy-két jó szolgáltatás. A beépített webböngészője révén a forráskódban szerkesztett weblapot azonnal meg tudja jeleníteni, de ugyanezzel az online fórumokat és dokumentációkat is elérhetjük. Ha nincs kapcsolatunk, akkor a helyi W3C dokumentumokat tallózhatjuk, így kéznél van a hiteles HTML szabvány az egyes elemek pontosításához.
146. ábra. A program megjelenése nagyon hasonlít a HomeSite-ra 218
További szerkesztőprogramok Ebben a programban mégis inkább a JavaScript programok beszúrásának lehetősége keltheti fel az érdeklődésünket, amelyeket az Insert / Instant Java és az Instant DHTML menüpontokkal érhetünk el. Először álljunk a weblapon egy olyan helyre, ahová a leendő kódot beszúrhatjuk, és utána válasszuk ki az egyik menüpontot. A megjelenő párbeszédablakban tallózhatunk a felkínált lehetőségek között, amelyek működését azonnal megtekinthetjük a kicsinyített betekintő területen (Preview).
147. ábra. A JavaScript programok tucatjai állnak a rendelkezésünkre Némelyik effektus egészen kis kódban van megírva, így könnyen tanulhatunk belőle. Ha ezzel a kínálattal nem lennénk megelégedve, akkor találunk itt és a névjegy panelen pár hasznos linket. Ezzel elérkeztünk arra a pontra, amely újabb ismeretek megszerzéséhez segített hozzá bennünket. A program révén ugyanis olyan webhelyeket ismerhetünk meg, amelyekre egyébként nem jutottunk volna el. A www.dynamicdrive.com vagy a www.javascriptkit.com helyek olyan sok új JavaScript programmal ismertetnek meg bennünket, hogy esetleg a saját honlapunkat teljesen átértékeljük. Ennek eredményeképpen számos olyan elemmel bővülhet az oldalunk, amelyekre előtte nem is vállalkoztunk volna, mert még a feladattal sem voltunk tisztában. 219
További segédprogramok
Evrsoft 1st Page 2000 Honlap: http://www.code-builders.com/ ................................... Mérete: 9’124 kB. Az előző programmal összevetve, szinte majdnem ugyanazt kapjuk, de ingyenes változatban. A forráskód színezése alapkövetelmény, a színek gyors elérése itt is ugyanazon a helyen található, és a fájlrendszerben való tallózás úgyszintén. Csoportosíthatjuk az eszköztárakat, de ha ez túl egyszerű, esetleg túl bonyolult lenne, akkor átválthatunk az Options menü tetején további három nézetre, amely biztosan elnyeri akár a kezdők, akár a profik tetszését.
148. ábra. Ha minden program szinte egyforma, akkor miért ne használjuk ingyen? A beépített JavaScript programokat itt is a www.dynamicdrive.com címről szerzik be, de valamivel kevesebb áll a rendelkezésünkre. Ez azonban nem probléma, mert az előzőekben megismert webhelyeken ezerszám találunk mindenféle feladat elvégzésére JavaScript programokat, így ez a szolgáltatás már jelent komoly újdonságot. A program előnye, hogy megismerése esetén jóval könnyebben tudunk váltani a Macromedia termékeire, így ezeket ingyenes ugródeszkának használhatjuk. 220
Segédprogramok kisebb feladatokra
Segédprogramok kisebb feladatokra A továbbiakban megnézünk még néhány programot, amelyekkel olyan kisebb feladatok végezhetők el, amelyekre nincs égetően szükségünk, de általuk színesebbé és gazdagabbá válhat a honlapunk. Ha pedig az egyes programok honlapjait meglátogatjuk, akkor olyan új ötletekkel gazdagodhatunk, amelyekre előtte nem gondoltunk. Így a program nem közvetlenül a szolgáltatásaival válik a hasznunkra, hanem közvetve az általa keltett ötletekkel.
Weblapok tömörítése: HTML-ZIP Honlap: http://www.htmlzip.com/ ................................................. Mérete: 263 kB. Ezt a programot csak mint érdekességet vizsgáljuk meg, de nem igazán szükséges az alkalmazása, ráadásul csak Internet Explorerben ad jó eredményt, míg az Operában olvashatatlan szöveget kapunk eredményül. A program lényege, hogy a forrást tömöríti vagyis kódolja, így az érdeklődő számára olvashatatlanná válik a weblap forrása, de az Internet Explorerben mégis helyesen jelenik meg.
149. ábra. Weblapok tömörítése vagy inkább olvashatatlanná tétele A művelet lényege, hogy megadjuk a forrásfájlt, és rákattintunk a Compress gombra. A weblap eredetije megmarad, míg az új fájl neve kap egy kiegészítést, amit módosíthatunk az ábrán látható párbeszédablakban. Ezután a Preview keretben lévő gombokra kattintva megnézhetjük mindkét fájlt, és láthatjuk rajtuk, hogy mindkettő tökéletesen jó, a szkriptek is futnak ugyanúgy, mint eddig. Most nézzük meg az új fájl forrását, és minden világossá válik. 221
További segédprogramok
Gombkészítés: DeKnop v4.1 Forrás: PC World 2003. január .................................. Mérete: 842 kB. (ingyenes) Honlap: http://home.hccnet.nl/s.j.francke/deknop/deknop.htm (+sok Freeware.) Ismét sikerült egy olyan alkalmazást találni, amelynek segítségével egy-két kattintással elkészíthetünk egy tucatnyi gombot, amelyek mindegyike egységes lesz. A program ráadásul ingyenes, így érdemes kipróbálni, mert ha elnyeri tetszésünket, akkor használhatjuk később is.
150. ábra. Gombok egész sorozata készíthető el pár kattintással A program különlegessége, hogy nemcsak egy darab gombfeliratot lehet megadni, hanem egy egész sorozatot, így az összes gombot egyszerre készítjük el. Előbb beírjuk a listát, majd meghatározzuk a gomb színeit, ahol természetesen van lehetőségünk mindenféle színátmenetek készítésére, végül pedig rákattinthatunk a save all buttons gombra, és készen is vagyunk. Ezután megadjuk például a suffix mezőben a fájlnevekhez írandó kiegészítést, benyomjuk a gombot az ábra feletti eszköztáron látható jobb oldali gombokkal, és már menthetjük a benyomott gombokat. Ennél egyszerűbben nem is lehetne egységes gombokat ilyen gyorsan előállítani. 222
Segédprogramok kisebb feladatokra Az eddigiekben megismert gombkészítő programokkal egy baj van, hogy az internetet járva sehol nem találkozunk az eredményeikkel. A gombok olyan kirívóak és szépek lesznek, hogy teljesen elvonják a figyelmet az oldalról, ezért ritkán találni olyan oldalt, ahol ezeket ténylegesen alkalmazás közben láthatnánk. Hamarosan megismerünk egy ikonszerkesztő programot, aminek annyi köze van az elmondottakhoz, hogy annak párbeszédablakaiban láthatunk ilyen szép csillogó gombokat, és nagyon jól mutatnak az ablakban.
151. ábra. Végre egy jó design a speciális gombok alkalmazására Ha ezt az ablakot weblapként értelmezzük, akkor lelki szemeink előtt már meg is jelenhet egy az alábbihoz hasonló weblap, ahol a területeinket kiemelt, esetleg ilyen füles lapokon helyezzük el, és színében a gombokkal harmonizáló színátmenetes hátteret adunk neki. Persze egy ilyen oldal letöltése kissé lassú lesz, de nem annyira, mint sok flash-t tartalmazó weblap.
Betűtípusok karakterei: X-Fonter v3.75 Forrás: PC World 2003. február .................................................... Mérete: 726 kB. Honlap: http://users.pandora.be/eclypse/ ........................... (ugyanitt sok Freeware) A weblapokon nem túl gyakran fedezünk fel speciális karaktereket, pedig a hozzá szükséges betűtípusok mindenki gépén elérhetők, így alkalmazhatnánk azokat is. Ehhez persze kellene egy jó kódtáblát megjelenítő program, amire most sikerült rábukkannunk. A program indulásakor beolvassa az összes betűtípust, és megjeleníti azokat egy listában. A jobb oldali ablaktáblában pedig kiír vagy egy tetszőleges szöveget, vagy egy „3D-s” feliratot, vagy a karaktertáblát szekciónként külön bontásban. Ez utóbbi már igazán a hasznunkra lesz, ha speciális karakterekre vadászunk. 223
További segédprogramok Amikor weblapra való egyedi karaktereket keresünk, akkor mindig a Windowsban alapértelmezésben elérhető betűtípusokat nézzük meg, mert azok valószínűleg mindenkinél elérhetők, így nem fognak „U”-k megjelenni az érdekesnek szánt karakterek helyett. A jobb oldali karaktertábla felett megadhatjuk a megjelenítendő betűkészlet színeit, méretét és egyéb jellemzőit, így jobban átláthatjuk az egész táblázatot.
152. ábra. Használhatjuk a weblapon még a régi DOS-os karaktereket is Amikor kiválasztottunk egy nekünk tetsző karaktert, akkor megjelenik annak kódja az állapotsorban 10-es és 16-os számrendszerben, így bármelyiket alkalmazhatjuk. A weblapon a karakter helyére írjuk be a kódját az alábbi formátumban: ╧ . Ebben a formában mindegyik karakterre szükség van, még a lezáró pontosvesszőre is. A Text lapon lévő szöveget egyénileg módosíthatjuk, ami hasznos szolgáltatás, mert csak így tudjuk megnézni, hogy egy felirathoz kiválasztott betűtípus rendelkezik-e az összes magyar ékezetes betűvel, különösen az „őŐűŰ” betűkkel. Sajnos ezen a téren eléggé elhanyagolnak bennünket a programok, így sokszor kell lemondanunk egy-egy szép betűtípus alkalmazásáról. 224
Segédprogramok kisebb feladatokra A Browse fülre kattintva a fájlrendszerünkben böngészhetünk, kereshetünk újabb betűtípusokat például a CD-lemezeinken, és azokat telepíthetjük. E lista elemeire kattintva is megtekinthetjük a kiválasztott betűtípust, és azt telepíthetjük, ha még nem tettük meg. Ha az Install gomb nem választható ki, akkor az illető betűtípus már telepítve van a rendszerünkben.
Betűtípusok listázása: C-Font Pro v1.6.2 Forrás: PC World 2002. október ................................................ Mérete: 2’279 kB Honlap: http://www.veign.com/ ............................... (ugyanitt több Shareware)
153. ábra. Betűtípusok megjelenítése egyszerűen és gyorsan Ez a program az előzőhöz hasonló, de kevesebb szolgáltatást nyújt, viszont áttekinthetőbb megjelenésű. A betűtípusból adott mintánál felhasználja az általunk megadott karakterláncot is, így azonnal tesztelhetjük vele a betűtípusok magyar betűit. A bal oldali ablaktáblában megjeleníti a telepített betűkészletek listáját, illetve a Preview Fonts lapon a más mappákban lévőket sorolja fel. Ehhez előbb a lenti Browse gombra kell kattintani, és megadni a listázandó mappát. Telepíteni csak a regisztráció után lehet a betűtípusokat. Ennek menete egyszerű, bár szokatlan. Küldenünk kell egy helyi képeslapot (papírosat) a program szerzőjének, és ő megküldi e-mailben a regisztrációs kódot. 225
További segédprogramok
Ikonszerkesztés: Axialis IconWorkshop v5.0 Forrás: PC World 2002. október ................................................. Mérete: 6’488 kB. Honlap: http://www.axialis.com/ ............................................. (+további ikonfájlok) A szolid kinézetű weblapok egyik nagyon jó kiegészítői az ikonok, amelyeket valahol meg kell rajzolni, és erre szolgál például ez a program. Már a megjelenése is igen impozáns, amelyet nem a Windows XP kölcsönöz neki, hanem saját maga hozza létre ezt a designt. Kezeli amúgy a Windows XP különleges és nagyobb méretű ikonjait, és képes exportálni tetszőleges képformátumba az elkészült rajzokat. Nekünk a weblapjainkhoz éppen ez utóbbi szolgáltatása lesz hasznos, mivel nem ikonokra, hanem ikon méretű képecskékre van szükségünk a weblapok egyes részeinek illusztrálására. A kép mérete akár 256x256-os is lehet, így akár nagyobb kompozíciók is alkothatók vele.
154. ábra. Ikonokra nemcsak a Windowsban van szükségünk, hanem a weblapon is A programhoz tölthetünk le a cég honlapjáról további ikonkészleteket, amelyek újabb ötletekkel szolgálhatnak. Amikor a programban olyan elemekre hivatkozunk, amelyek az interneten találhatók, akkor a középső munkaterületen egy böngészőablakot nyit, és ott jeleníti meg a weblapokat. Ehhez viszont elég nagy képernyőfelbontásra van szükségünk. 226
<span class="alcim">Újdonságok: 
A dokumentum nyomtatása.
