Móricz Attila. Webdesign a gyakorlatban

Átírás

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 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 Az egyéni oldalsablon elkészítése A nyitóoldal feltöltése adatokkal JavaScript: Az oldal elemei életre kelnek A további weblapok létrehozása Grafikai fogás: Képes oldalmenü készítése Bővebb tartalomhoz Szolid sávos stílus A tartalom rendszerezése A weblap felosztása területekre

3 Móricz Attila Az egyéni oldalsablon létrehozása A nyitóoldal és a további weblapok formai megjelenése Grafikai fogás: A weblapok illusztrálása fényképekkel JavaScript: Menü megjelenítése animáció kíséretében Grafikai fogás: Szemvezető grafikák és feliratok A Háromoszlopos stílus részegységei Az elrendezés megtervezése és kialakítása A megfelelő stílus megtervezése A tartalom rendszerezése Grafikai fogás: Szövegtároló keretek rajzolása JavaScript: A színvizsgáló weblap elkészítése JavaScript: A friss híreknek görgetett szöveg Shareware: Segédprogramok a színek állításához További segédprogramok 207 Helyi menük és HTML-térképek Xtreeme SiteXpert v Flash-menük: 1 st Cool Button v JavaScript Utility Suite v Selteco Menu Maker v Speciális gombok és feliratok Flash-készítő: Selteco Flash Designer v Selteco Bannershop Gif Animator v Xara Webstyle v2.0 és v További szerkesztőprogramok HTML Builder XP v4.0. Enterprise Evrsoft 1 st Page Segédprogramok kisebb feladatokra Weblapok tömörítése: HTML-ZIP Gombkészítés: DeKnop v Betűtípusok karakterei: X-Fonter v Betűtípusok listázása: C-Font Pro v Ikonszerkesztés: Axialis IconWorkshop v Tárgymutató 227 4

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

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. 6 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

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ő. 8 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

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

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

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. 12 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 A keretes weblapok dilemmája (frame) Mennyiségi és minőségi igényfelmérés 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

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 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. 14 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

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 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 ( 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

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

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 <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>próbalap HTML-ben</title> </head> <body> <h1>címsor</h1> <p>bekezdés</p> <p>ez a bekezdés<br>kétsoros lesz.</p> <p><img src="kepek/kep-1.jpg"></p> </body> </html> 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 version="1.0"?> <?xml:stylesheet href="konyv_stilus.css" type="text/css"?> <konyvtar> <konyv> <kiado>computerbooks</kiado> <szerzo>móricz Attila</szerzo> <cim>windows-tippek</cim> <ar>2900 Ft</ar> </konyv> </konyvtar> *.xml 4. ábra. Egy XML-forráskód minimális tartalommal 18

18 Igazodás a látogatók böngészőjéhez Az előző forrást további <konyv> 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. 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; } *.css 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

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. <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" " *.xhtml <html xmlns=" <!-- Megjegyzés --> <head> <title>ez egy XHTML-oldal</title> <link rel="stylesheet" href="stilus-1.css" type="text/css"/> <style type="text/css">.ketsoros { color:navy; } ul {color:red ; list-style-type:square } </style> </head> <body> <h1>móricz Attila: XHTML</h1> <table><tr><td> <p> <img src="kepek/attila.gif" alt="móricz Attila" /><br />Linkek: </p> </td><td> <ul> <li><a href="konyv.xml">könyveim</a></li> <li><a href="index.html">kezdőlap</a></li> </ul> <p class="ketsoros">ketsoros bekezdés:<br/> itt folytatódik... </p> </td></tr></table> </body> </html> á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. body { background-color: #f0f0f0; text-align: center; } table { width: 80%; } stilus-1.css 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 <p> elemet kötelezően kövesse egy </p> valahol. Az egytagú elemeknél az elemen belül kell a lezárást elvégezni, például <br />. 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

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 <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>lekerekített téglalap</title> </head> <body> <div align="center"><center> <table border="0" width="250" cellpadding="0" cellspacing="0"> <tr> <td><img src="kepek/p1.png" width="50" height="48"></td> <td background="kepek/p2.png" width="100%"> </td> <td><img src="kepek/p3.png" width="49" height="48"></td> </tr> <tr> <td background="kepek/p4.png"> </td> <td width="100%" background="kepek/p5.png"> Ide kerül be a tartalom<br><hr width=80%><br>erre a helyre.</td> <td background="kepek/p6.png"> </td> </tr> <tr> <td><img src="kepek/p7.png" width="50" height="49"></td> <td background="kepek/p8.png" width="100%"> </td> <td><img src="kepek/p9.png" width="50" height="49"></td> </tr> </table> </body> </html> 10. ábra. A lekerekített sarkú téglalapot megvalósító weblap forrása HTML-ben 22

22 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 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

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. 24 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

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 <body> 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 ( <td> ) 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 <p>..</p> 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

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

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 á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 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

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 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 á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

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

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

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

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

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 á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

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 á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 Egyedi elrendezésű weblapok Honlap Varázsló-forma elrendezésben 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

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). 40 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 <!-- és --> 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% height: 45% width: 45% height: 45% width: 45% Ide kerül a tartalom. width: 45% width: 45% height: 45% height: 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

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

42 Honlap Varázsló-forma elrendezésben index.html <html> <head> <title>weblap szerkesztése 1st Page 2000 programmal</title> </head> <body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0"> <!-- ******* A Fő elrendezést létrehozó táblázat ELEJE. ******* --> <table width="100%" height="100%" cellspacing="0" cellpadding="0"> <tr> <td height="45%" width="45%"></td> <td height="45%"></td> <td height="45%" width="45%"></td> </tr> <tr> <td width="45%"></td> <td> <!-- IDE kerül a tartalom. -->Ez már középen van. </td> <td width="45%"></td> </tr> <tr> <td height="45%" width="45%"></td> <td height="45%"></td> <td height="45%" width="45%"></td> </tr> </table> <!-- ******* A Fő elrendezést létrehozó táblázat VÉGE. ******* --> </body> </html> 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: <hr color="#cfcfcf" size="24">. Erre még később kitérünk, most foglalkozzunk a belső táblázatunkkal. 43

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 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

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. <table border="0" cellpadding="0" cellspacing="3" width="776" bgcolor="#efefef"> <tr> <td> </td> <td> </td> </tr> </table> 24. ábra. A fő részt befoglaló táblázat HTML-kódja A táblázat definíciója (<table>) 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 keretvastagsá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; piros, 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

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 (<tr>..</tr>) láthatjuk itt a táblázat definíciójával. <!-- A bal oldali linktábla ELEJE --> <table width="190" border="0" cellpadding="5" cellspacing="3"> <tr> <td class="link_1_cella"> <a href="../index/ujdonsagok.html"> <img src="../images/ikon_01.gif" border="0" align="left" width="32" height="32"> <span class="alcim">újdonságok:</span> </a> <br> <span class="alsor"> Új könyvek, új cikkek...</span> </td> </tr> ábra. A bal oldali linktábla egy sorának HTML-forrása.link_1_cella { background-color: #95EAD7; }.alcim { font-size: 10pt; font-weight:bold; margin-top: 5; margin-bottom: 0; }.alsor { font-size: 8pt; margin-top: 0; margin-bottom: 3; } 26. ábra. Az előző részlethez tartozó formázást végző CSS-fájl tartalma á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 (<td>) definíciójában találunk egy új elemet (<class>). 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 <head> után a </head> előtt helyezzünk el egy hivatkozást egy létező szöveges fájlra az alábbi módon. <head> <link rel="stylesheet" type="text/css" href="../mappa/web1.css"> </head> 28. ábra. Hivatkozás a weblapról a CSS-fájlra 47

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!). 48 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 <a> és a </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

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. 100% 3 db ikon. 50 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

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: <td width="520" class="ujdonsag"> Legújabb megjelent könyvem: <a href="../cbooks/cb04.html">tippek CD-íráshoz</a>; Kiadó: <a href="../cbooks/index.html">computerbooks</a> </td> á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 <div>..</div> 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

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 á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 Kiegészítő díszítések a honlaphoz Honlap Varázsló-forma elrendezésben 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 (<hr>) 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ő <td> 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 align= right valign= top 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

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 <font size="2"> kódot a </font> 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: <p class= normal >Szöveg...</p>. Ezután rendeljük hozzá az oldalhoz a HEAD-részben a CSS-fájlt (lásd a 47. oldalon), majd írjuk be a normal nevű stílusunk jellemzőit. Például:.normal { margin-top: 0; margin-bottom: 0; margin-left:30pt; text-align: justify; background-color: white; font-size: 10pt; color: #000000; font-family: Verdana, Arial; } Általában célszerű betartani azt a szabályt, hogy bekezdésstílusnál először adjuk meg a bekezdésformázásra vonatkozó paramétereket, majd ezt követően a betűformátumra vonatkozókat. Ha nem bekezdést formázunk, hanem a bekezdésen belül egy <span> és </span> 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

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 <p> bekezdésbe. Ezért ne határozzunk meg bekezdésstílust a p elemre, de a td -re sem, mert minden cellában más és más jellegű adatok kerülhetnek. Ezért használjunk inkább egyéni stílusokat, mint amilyen a normal nevű is volt. Ezeknél a stílusnév előtt mindig legyen pont karakter, míg a beépített HTML-elemeknél soha ne írjunk pontot. Például: h2 { margin-left:10pt; margin-top: 5; margin-bottom: 0; font-size: 12pt; color: #3333CC; } Mikor alkalmazzuk a beépített stílusokat? Kell egyáltalán használnunk azokat? Hiszen létrehozhatok egyéni p bekezdést, és olyan stílust rendelek hozzá, amelyik úgy néz ki, mint egy címsor. Akkor mi értelme a H1..H6 címsoroknál használatos stílusoknak és az összes többi előre beépített elemnek? Igazából nem sok, csak éppen annyi, ha olyan böngészőben nézik meg az oldalainkat, amely nem tud stíluselemeket megjeleníteni, akkor ott a böngésző alkalmazza az alapértelmezett stílusjegyeket. Olyankor is ez történik, ha a látogató lementi az oldalunkat, és elküldi valakinek a CSS-fájl nélkül. Ha a címsorok vagy más kiemelt részek formázására például a címsorok stílusait használjuk, akkor az a stílusfájl nélkül is ugyanúgy kiemelten jelenik meg, kicsit más módon, de mégsem egészen eltérően. Ha minden bekezdésünk csak p elemű lenne, amely egyéni stílussal formázott, akkor az a böngészőben a stílusfájl nélkül egynemű összefolyó szövegként jelenne meg alcímek nélkül, ami nem igazán mutat jól. Nem minden esetben tudjuk azonban az összes formázási jellemzőt átírni stílusbeli paraméterre, mert nem mindegyiknek van meg a megfelelő párja. Ilyen például a táblázatoknál a cellspacing=0px, amelyet a margin=0px paraméterrel helyettesíthetünk, de ez mégsem tölti be teljesen a szerepét, mert hiába adjuk meg a cellájánál, hogy annak margója legyen nulla, akkor is megjelenik a cellák körül egy 1-2 pixeles keret (megjegyzés: pl. IE 5.0-ban). Egy weblap megjelenése annál igényesebb, minél inkább ügyelünk az apróbb részletekre. A gyakorlatban ez azt jelenti, hogy mindenhol törekedjünk a logikus és egységes formázás betartására. Ahol kell, ott adjuk meg a lehető legtöbb stílusjellemzőt, de ahol nem szükséges, ott kerüljük a felesleges díszítést. 57

57 Egyedi elrendezésű weblapok A jellemzők osztályozása és felsorolása A weblapunk készítésekor először a közzétenni kívánt információt osztottuk fel részekre, amely meghatározta, hogy azon belül hogyan részletezzük tovább a témát. Ennek elhelyezésére táblázatot készítettünk, mert azzal feloszthattuk a területet tetszőleges részekre. Most, a stílusok meghatározásakor, ezen területek jellemzőit adjuk meg. Először mindig a bekezdés vagy terület bekezdésformátumait adjuk meg, majd utána a szöveg karakterformátumait. Területformátumok: (Ezek mindegyike alkalmazható bekezdésre és a bekezdésen belüli span-blokkra, illetve hiperhivatkozásra.) A láthatóság ténye, a pozíció jellemzője és a hozzátartozó hely adatai, a méret vízszintesen és függőlegesen pixelben vagy arányban, a háttérszín és grafika adatai. Bekezdésformátumok: A margók vagy celláknál a belső margó mérete, a szegélyek mérete, stílusa, színe, szövegnél az első sor behúzása, a lista típusa (listák esetén), a sormagasság és a szöveg igazítottsága (a sorkizárt is). Karakterformátumok: A betű típusa, stílusa, mérete, dekorációi, színe, háttérszíne és/vagy grafikája, illetve a speciális szűrők (csak IE 4.0-tól). Példa: display: none block inline list-item Jelmagyarázat: A CSS-beli kulcsszó a display, a megadható paraméterei utána sorakoznak, amelyek közül egyet választhatunk, ezt jelzi a jel. Például: display:none; Jelentése: Az ilyen stílusú elem ne jelenjen meg. Láthatóság ténye: display, visiblity, overflow. Pozícionálás: visibility, position, top, left, width, height, float, clear, clip, z-index. A háttér jellemzői: background-color, background-image, background-repeat, background-attachment, background-position, background. A szegély és a margó jellemzői: margin, padding, border, border-width, border-color, border-style, továbbá: 58 margin-top, padding-top, border-top, border-top-width, border-top-color, border-top-style, margin-left, padding-left, border-left, border-left-width, border-left-color, border-left-style, margin-right, padding-right, border-right, border-right-width, border-right-color, border-right-style, margin-bottom, padding-bottom, border-bottom, border-bottom-width, border-bottom-color, border-bottom-style,

58 Honlap Varázsló-forma elrendezésben Listakészítés: list-style-type, list-style-position, list-style-image, list-style, display. Karakterformátumok: font-family, font-style, font-size, font-weight, font-variant, font, letter-spacing, line-height, text-align, text-decoration, text-transform, text-indent, (A háttér jellemzőivel is formázhatók a feliratok.) Másodlagos kulcsszavak (<a:...>): link, visited, active, hover. Nyomtatási jellemzők: page-break-before, page-break-after. 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. <head> <link rel="stylesheet" type="text/css" href="mappaneve/web1.css"> </head> 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. <head> <style type="text/css"><!-- body { font-family: verdana, arial, helvetica, sans-serif; } a:link { text-decoration: none; color: black; } a:hover { color:red; } --> </style> </head> 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. <p align="left" style="line-height: 150%"> 59

59 Egyedi elrendezésű weblapok Kulcsszó és paraméterei Méretezés width: méret százalék auto height: méret százalék auto Háttér jellemzői background: minden további háttérjellemző felsorolva szóközzel elválasztva. 60 background-attachment: scroll fixed background-color: színkód transparent background-image: url-cím none background-position: [százalék méret] [top center bottom] [left center right background-repeat: repeat repeat-x repeat-y no-repeat Margók kívül és belül margin: [méret százalék auto] margin-bottom: [méret százalék auto] padding: [méret százalék ] padding-bottom: méret százalék Szegély jellemzői border: a további 3 szegélyjellemző valamelyike felsorolva szóközzel elválasztva. border-color: színkód border-style: none dotted dashed solid double groove ridge inset outset border-width: [thin medium thick méret] border-bottom: színkód stílusnév szélesség border-bottom-color: színkód border-bottom-style: stílusnév, lásd fenn. border-bottom-width: thin medium thick méret Jelentése az objektum szélessége az objektum magassága háttér minden jellemzője egyben görgethető-e háttérszín háttérkép háttérkép pozíciója háttérkép ismétlése margó minden oldalra és értelemszerűen top, left, right. cellák belső margója top, left, right. A szegélyvonal színe, stílusa, szélessége egységesen mindegyik oldalra. és mindegyik jellemzőnél: top, left, right is!

60 Kulcsszó és paraméterei Bekezdésformátumok és jellemzők text-align: left right center justify text-indent: méret százalék Karakterformátumok color: színkód színnév rgb(r,g,b) például: #00a0e0, #f0f, white, blue, rgb(0,0,255) font: font-size font-family [ line-height ] [ font-style font-variant font-weight] font-family: [[betűcsalád neve általános neve ],...] font-size: abszolút méret relatív méret méret százalék font-weight: normal bold bolder lighter font-style: normal italic oblique text-decoration: none [underline overline line-through blink] a:active a:link Láthatóság a:hover a:visited display: none block inline list-item visibility: visible hidden inherit overflow: scroll hidden visible auto Pozícionálás Honlap Varázsló-forma elrendezésben Jelentése szöveg igazítottsága a bal oldali behúzás az elem színének megadása karakterformátumok egy helyen felsorolva betűcsaládok neveinek felsorolása betűk mérete betűk szélessége betűk stílusa aláhúzás módja a szövegben a hiperhivatkozás különböző állapotaiban a megjelenítés módja a láthatóság módja görgetősáv position: absolute relative static a pozíció típusa top: méret százalék auto az objektum felső pozíciója left: méret százalék auto Pozícionálás, elhelyezés float: left right none clear: none left right both clip: shape auto z-index: sorszám auto az objektum bal oldali pozíciója az objektumot a szöveg folyja körbe a körbefolyatás módja kivágás a körbejárási sorrend [Tab] 61

61 Egyedi elrendezésű weblapok Kulcsszó és paraméterei Jelentése További bekezdésformátumok és jellemzők letter-spacing: normal méret line-height: normal egész szám méret százalék list-style: típusnév pozíciónév url(url-cím) list-style-image: url(url-cím) none list-style-position: inside outside list-style-type: disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none cursor: auto crosshair default hand move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help filter: filtertípus1(paraméter1, paraméter2,...)... További {font-family: font-family, src url(url-cím); font-variant: normal small-caps vertical-align: sub super text-transform: capitalize uppercase lowercase url(url-cím); 62 betűköz sormagasság felsorolás felsorolásjel grafikája felsorolás helye felsorolásjel beépített alakjai az egérmutató alakja az adott objektum felett speciális szűrők betűcsalád betűk stílusa index, hatvány betűk stílusa CSS-fájl importálása!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:

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 ( ) á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. <hr><h1><div style="color:#ffffff; font-size:32; height=40; filter: fliph flipv glow(color=#0000ff, strength=6);"> Móricz Attila honlapja </div></h1><hr> 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

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= , FinishOpacity= , Style=0..3, StartX=x, StartY= y, FinishX=fx, FinishY= fy) <img src="tenger.jpg" style="filter: alpha(opacity=20);"> 36. ábra. Az első kép a halványított a második az eredeti 64 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, , Strength= 0, 1...) <div style=" color:#ff2020; font-size:32; height=40; filter: Blur(Add=1, Direction=45, Strength=5);"> Móricz Attila honlapja</div> 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) <img src="minta24b.png" style="position: absolute; filter: Chroma(Color=#008080) Chroma(Color=#808080); "> 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: ) Példa: (Lásd a 63. oldalon a forráskódot és a mintaképet is.) 65

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) <DIV STYLE="font-size:40pt; font-family: Arial; font-weight: bold; position:absolute; margin-top: 66px; margin-left: 10px; filter: Mask(Color=#ff8080);"> www moricznet hu </DIV> <img src="tengerem.jpg" width="40%" style="filter: alpha(opacity=20); "> - <img src="tengerem.jpg" width="40%"> 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ó elhalvá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, ) <DIV STYLE="font-size:40pt; font-family: Arial; font-weight: bold; height: 65; color:#ff2020; filter: Shadow(Color=#c0c020, Direction=-45);"> Windows-tippek </DIV> á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ó hatá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...) <DIV STYLE="color:#ffffff; font-size:32; height=40; filter: wave(strength=3);"> Illuminált </DIV> 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 fok között értendő, ahol a 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

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 <img src="tengerem.jpg" style="width: 30%; filter: alpha(opacity=80);"> * <img src="tengerem.jpg" style="width: 30%; filter: invert flipv;"> * <img src="tengerem.jpg" style="width: 30%; position:relative; left:30 px; filter: fliph wave(freq=2, strength=6) alpha(opacity=40);"> *** 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: <img id="kep1" style="width: 30%; filter: alpha(opacity=100);" onclick="tul=kep1.filters.alpha; tul.opacity-=10; window.status=tul.opacity;" oncontextmenu=" tul=kep1.filters.alpha; tul.opacity+=10; window.status=tul.opacity; return false;" src="tengerem.jpg"> á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 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

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. <html><body style="background-color: rgb(215, 255, 215)"> <hr> <div id=felirat1 style="filter: wave(strength=2) revealtrans(transition=2, duration=5.000); font-size:32; text-align:center; height: 36;">f</div> <hr> <div id=felirat2 style="filter: Glow(Color=#0000FF, Strength=3) revealtrans(transition=0, duration=5.000); Color: white; font-size:32; text-align:center; height:74;"> </div> <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 " 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); } </script> <hr width=80% align=center> </body></html> á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 o.)! blendtrans (beolvadó folyamat): A megadott objektumot folyamatosan megjelení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 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

71 Egyedi elrendezésű weblapok A szűrők összefoglalása táblázatba Kulcsszó és paraméterei A vizuális jellemzők fajtái Alpha(Opacity= , FinishOpacity= , Style=0..3, StartX=x, StartY= y, FinishX=fx, FinishY= fy) Blur(Add=0 1, Direction=0, , Strength= 0, 1...) Glow(Color=színkód, Strength=intenzitás: ) Chroma(Color=színkód) Mask(Color= Színkód) Shadow( Color=Színkód, Direction=Irány:H 0, ) Wave(Add=0 1, Freq=db, LightStrength=fényerő:0..100, Phase=0..100, Strength=nagyság: 0, 1,2...) FlipH, FlipV, Gray, Xray, Invert, Light Kulcsszó és paraméterei Az animációk fajtái revealtrans( duration=idő:00.000, transition=típus: 0..23) id.filters.revealtrans.apply() id.innertext= id.innerhtml= id.src=... id.filters.revealtrans.play(00.00) blendtrans(duration=idő:00.000) id.filters.blendtrans.apply() id.innertext= id.innerhtml= id.src=... id.filters.blendtrans.play(00.00) Jelentése átlátszóság párásítás körben kisugárzás (árnyék) Transparency álarc (átlátszó csík) árnyék elhalványodó hullámosít tükrözés, szürkeárnyalatossá tesz, színt cserél, megvilágít. Jelentése feltáruló folyamat az állapot rögzítése új tartalom megadása az animáció lejátszása beolvadó folyamat az állapot rögzítése új szöveg megadása az animáció lejátszása 72

72 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

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 <html> <head> <STYLE TYPE="TEXT/CSS"> body { margin: 0pt; font-family: Arial Black; } h1, h2 { color:white; display:none; text-align:center; } </STYLE> <script LANGUAGE="JavaScript"> <!-- // A program helye. // --> </script> </head> <body bgcolor="green"> <table cellspacing="0" cellpadding="0" width="100%" height="100%"> <tr> <td height="45%"></td> </tr> <tr><td ><h1 id="a1" >Eljött a pillanat...</h1></td></tr> <tr><td ><h1 id="a2" >Megjelent:</h1></td></tr> <tr><td ><h1 id="a3" >Móricz Attila</h1></td></tr> <tr><td ><h1 id="a4" >"Tippek a CD-íráshoz"</h1></td></tr> <tr><td ><h1 id="a5" >című könyve!</h1></td></tr> <tr> <td height="45%"></td> </tr> </table> </body> </html> á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 </body> 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

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). window.onload=elfed; takar.html <script>-tagja 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 (x==1) a1.style.display='block'; if (x==2) a2.style.display='block'; if (x==3) a3.style.display='block'; if (x==4) a4.style.display='block'; if (x==5) a5.style.display='block'; á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

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 é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. // Színváltó program. // Az előző szkript mögé írandó. takar.html <script>-tagja 78 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 R 1 G 1 B 1 és R 2 G 2 B 2 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, 255)", 3000); window.settimeout("szinvalto(33,169,138, 0,0,0, 255)", 5000); 52. ábra. A színváltó programunk indítási lehetőségei 79

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. 80 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 (<head>-részében), és akkor minden oldalunkról elérhetők lesz olyan általános szkriptek, amelyekre általában szükségünk van. <html> <head>... <script LANGUAGE="JavaScript" src="vegyes.js"></script> </head>... 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. window.onload = keplehivas; vegyes.js részlete function keplehivas() { var db = document.images.length; window.status = db; var kepek = new Array(db); for (i=0; i<db; i++) { kepek[i] = new Image(); kepek[i].src = document.images.item(i).src; } } 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

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. window.onload = keplehivas; vegyes.js részlete function keplehivas() { var db = document.images.length, ki=0, art = ""; window.status = db; var kepek = new Array(); for (i=0; i<db; i++) { forras = document.images.item(i).src; v = forras.lastindexof("gomb_"); ut = forras.slice(0, v); fajlnev = forras.slice(v); miez = fajlnev.slice(0,4); ph = fajlnev.indexof("."); if (miez=="gomb") { forras = forras.slice(0,-4) + "_nyom" + fajlnev.slice(ph); } window.status = forras; art += forras + "\n"; kepek[ki] = new Image(); kepek[ki++].src = forras; } alert(art+(--ki)+ " gomb süpped."); // Csak a tesztelés idejére! } á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

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 <html> <head> <meta name="gombok" content="11-16"> <meta name="ikonok" content="1-3">... <script LANGUAGE="JavaScript" src="../index/vegyes.js"></script> </head> ábra. A fejrészben hagyott üzenet a JS-program számára 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<dba-1) i++; else mehet=false; } if (oke) return obj(--i).content; else return "00"; } ábra. Az egyéni META-tagok olvasása JS-programból vegyes.js részlete

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: alert( window.document.documentelement.all.length ); window.onload = betolteskor; vegyes.js részlete 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

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++) { 86 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 á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 ), 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

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 <p><a href="javascript:window.print();"> <img border="0" src="../images/ikon_4.gif" align="absbottom" width="16" height="16"> A dokumentum nyomtatása.</a> </p> 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 á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. var linkek, dbl; window.onload=mindenablakra; vegyes.js részlete function mindenablakra() { keplehivas(); document.title = "Móricz Attila honlapja"; ki="üdvözlöm a honlapomon! # # news@moricznet.hu"; window.defaultstatus = ki; dbl = document.links.length; linkek = new Array(dbl); for (i=0; i<dbl; i++) linkek[i] = document.links.item(i).href; } 61. ábra. Általános előkészítő műveletek végrehajtása a lap töltődésekor 89

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. // Csak az előzőek folytatásaként működik! document.onkeypress=nyom; vegyes.js részlete 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"; } á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. var dbe=0; document.onmousemove=mozog; vegyes.js részlete 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

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ó 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( ' Attila honlapja'); } A link elhelyezése a weblapon: HTML-kód részlete <a href = "#" onclick="kedvenc(); return false;" onmouseover="window.status='add a Kedvencekhez!'; return true;"> <img border="0" src="../images/ikon_1.gif" alt="add a kedvencekhez" align="absbottom" width="16" height="16"></a> 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. <a href= onclick="kedvenc();" onmouseover="allsor(1);" onmouseout ="allsor(0);">... </a> 92

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

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 <p><a onclick="this.style.behavior='url(#default#homepage)'; this.sethomepage(' false;"> A nyitólapom a Moricznet.hu legyen! </a></p> 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 á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: <a href= JavaScript:ujAblak( cb01_leir.htm,500,300) > Azonban erről már megállapítottuk, hogy nem szép látványt nyújt az állapotsorban, ráadásul van egy jobb megoldás, aminek más szempontból is hasznát vehetjük, például JavaScript-et nem futtató látogatóknál. Itt van hivatkozási cím, de van egy onclick eseménykezelés is, vajon melyik lesz az erősebb? <a href= cb01_leir.htm onclick="uj2ablak(this);return false; > 95

95 Egyedi elrendezésű weblapok Alapértelmezésben a hiperhivatkozás az erősebb, de túljárunk az eszén. Először az onclick eseményt hajtja végre, ahol meghívjuk az uj2ablak() függvényt, amelynek átadjuk az aktuális objektumot paraméterként. Ez azért jó, mert a függvényünkben a this.href megadja azt a hiperhivatkozást, amelyet a weblapon megadtunk. Az ablaknyitás után visszatérve a return false utasítást fogja végrehajtani, aminek hatására a linkben hivatkozott cím tartalmát nem fogja betölteni, hiába kattintottunk rá. vegyes.js részlete function uj2ablak(obja) { a2 = window.open(obja.href,"uj","top=10,left=10,width=400,height=600"); } ábra. Új ablak nyitása programozottabb módon Ha viszont olyan webböngészőben jelenik meg az oldalunk, ahol nem futnak a JavaScript programjaink, akkor a hiperhivatkozásra kattintva a látogató eljuthat a kért részletes oldalra. A jelen példánál erre nem készültünk, de jegyezzük meg ezt a megoldást, hasznunkra válhat még. Új ablak nyitása rövidebb szöveg megjelentetésére Ha már az ablakoknál tartunk, akkor nézzük meg a weblap párbeszédpanel nevű ablak megjelenítésének módját. Ez kizárólag az Internet Explorerben működik, bár jelenleg ( ) a látogatók 95%-ban használnak IE-t, 3% NN-t, és 2%-ban egyéb programokat, pl. Operát. Az 5%-os részben is sokaknak van a gépén IE, csak inkább alternatív böngészőt használnak, bár a többségnek Linux van a gépén, ahol az IE nem divatos. Ha az oldalaink tartalma nem rájuk vonatkozik, akkor használjuk nyugodtan a csak IE-specifikus utasításokat is. Hívjuk meg a window.showmodelessdialog() függvényt, melynek úgyszintén adjuk meg a lap címét, a keret neve itt nem kell (ezért null), majd néhány paramétert, amelyek jelentését könnyen kitalálhatjuk. A betűméret az alapértelmezett szövegméretet felülbírálja, amire a másiknál nincs lehetőségünk. vegyes.js részlete function nyit(lap) { window.showmodelessdialog ( lap, null, 'font-size:10pt;dialogwidth:300px;dialogheight:400px' ) } 71. ábra. Weblap párbeszédpanel nyitása

96 A Színes téglalapok alkalmazása A Színes téglalapok alkalmazása A most ismertetésre kerülő design azért kapta a Színes téglalapok fantázianevet, mert az oldal különböző területei színes téglalapokban fognak elhelyezkedni, amelyek színükkel fognak elválni egymástól. Egyszerű tiszta színeket fogunk használni, mert úgy tervezzük, hogy az oldalon egy képet is megjelenítünk, amelyhez szöveg is fog tartozni, így a háttérgrafika ezt agyoncsapná. A tartalmi táblázatot úgy helyezzük el, mintha egy fényképet takarna el, amelynek ráadásul két sarka is fényes lesz a folyamatos átmenettől. Ennek hatására a sötét téglalap és a világos grafika egymással kontrasztot alkot, így jobban magára vonja a szemlélődő figyelmét. 72. ábra. Az új tervezet 800x600-as felbontás esetén teljes képernyőn Az oldalon egy IFRAME-keretben hosszabb szöveget is el tudunk helyezni, így az igényesen kialakított oldalon nem csupán egyszerű bemutatkozó oldalt tudunk létrehozni, hanem részletes útmutatásra is lehetőség van. A képes cellában pedig további képeket is meg lehet jeleníteni, amelyet hamarosan megismerünk. 97

97 Egyedi elrendezésű weblapok Az elrendezés kialakítása Az előző weblaptervünkhöz hasonlóan, ugyancsak rajzoljunk egy táblázatot, amelyen belül megálmodjuk a közzétenni kívánt tartalom elhelyezkedését. A végleges kialakítás mindig hosszú próbálgatási folyamat része, mire végre sikerül olyan elrendezést készítenünk, amelybe a saját tartalmunkat elhelyezhetjük, de az általános elvárásoknak is megfelel. Ezalatt értem, hogy amennyiben például 800x600-as képernyőméretre tervezünk, úgy ez már behatárolja a lehetőségeinket. Ha van egy digitális fényképezőgépünk, amellyel sok képet készítettünk, akkor azok mérete, illetve azok arányosan csökkentett mérete is meghatározó lesz az egyes területek kialakításakor. 500x30px 720x30px cella_c1 240x140px cella_c3 Keret körben a kép körül: 30px Mérete: 240x300px képméret: 180x240px teljes táblaméret: 780x500px cella_c2, cella_c21 40px cella_c22 cella_c % 20px cella_c23, cella_c231 cella_c232 (50% ) 80px cella_c4 Mérete: 480x300px IFRAME, mérete: 96-98%. 500x30px 98 Igazítás: teljesen középre 720x30px 73. ábra. A weblap elrendezésének kialakítása táblázatok segítségével Ennél a táblázatnál például a fejléctábla kialakítása meghatároz egy magasságot, amelyet a tőle balra lévő cellában is tartani kell. Ha az oda kerülő tartalom nem fér el a rendelkezésre álló területen, akkor valamit növelni kell rajta. Mivel alatta egy olyan cella van, ahová képet terveztünk elhelyezni, ezért annak mérete, illetve arányai is kötöttek. A tervezgetés eredménye lehet az is, hogy ez a design nem fog megfelelni számunkra, és emiatt más formát kell kialakítanunk. Ilyenkor egyes díszítésre szánt területeket esetleg össze lehet vonni, hogy a kívánt tartalom elférjen. Ha ez sem megy, vagy a hiperhivatkozások nagyon hosszú nevűek, akkor a linkek területét kell áthelyeznünk a fekvő helyről egy álló cellába, ahol egymás alatt jobban kihasználhatják a teret.

98 A Színes téglalapok alkalmazása A mostani választott formánknál a külső táblázatra azért lesz szükség, mert abba kerülnek azok a szegélyt alkotó grafikák, amelyek egy nagy kép még éppen kilátszó szélét jelképezik. Ezen belül található az a táblázat, amely négy fő területre osztja a weblapunkat, és a rajzon ennek celláit jelöltük meg a cella_c1.. cella_c4 nevekkel. Hasznos, ha már a tervezés fázisában kialakítjuk az olyan azonosítók rendszerét, amelyeket majd a stílusok megadásánál fel fogunk használni. Tipp. Használjuk ki a magyar nyelv előnyét, és nevezzük el az egyes elemeket magyarul, például a cellát (TD) cellának, a táblázatot (table) táblának, a képet (img) képnek és így tovább. Alkalmazzunk sorszámokat a cellák elnevezésekor, illetve az azon belüli cellákra (C2-n belül legyen a C21, C22). Az előző tipp talán furcsának tűnhet, de gondoljunk bele, hogy milyen zavaró, amikor a table elemnek table, esetleg table1 nevet ad egy angolajkú, mert az ő nyelvén íródott a HTML-nyelv. Nekünk ilyen szempontból könnyű dolgunk van, mert a forráskódban jól el tudjuk választani a saját azonosítóinkat a HTML- és egyéb kulcsszavaktól, mert látjuk a szavak nyelvéből, hogy az nem lehet kulcsszó, ami magyarul van írva. A jobb felső cellába (C2) kerül egy újabb táblázat, amelynek 3 sora lesz. Az elsőbe tesszük az aktuális oldal főcímét, alá az általános navigációs sávot, majd az alá az aktuális téma al- vagy társcsoportjait, vagy közvetlenül a téma felvezetőjét, esetleg rövid kivonatos adatait. Ez utóbbi cellát feloszthatjuk két vagy három oszlopra, így ha rövid nevű linkek tartoznak hozzá, és abból több, akkor azoknak is jut elég hely ezen az amúgy alacsony, de széles területen. A C3-as cellába terveztem az oldalhoz aktuálisan tartozó képet elhelyezni, majd mellé a C4-es cellába a részletes hosszú szöveget. Ha csak rövidebbet akarunk ide írni, akkor egyszerű dolgunk lesz, mert csak a rendelkezésre álló cellát kell megtölteni szöveggel, amelynél 2-3 alcímmel tagolva a szöveg alig lesz pár mondat. Ha inkább a kép a több, akkor fel is cserélhetjük a tartalmakat, és a C3-asba kerül a kevés szöveg, és a C4-esbe a képek (4 kisebb fekvőkép vagy 2 nagyobb állókép). Amennyiben pontos elképzelésünk van arról, hogy mit hová szeretnénk tenni, és milyen formátumban, úgy elkezdhetjük a HTML-kód elkészítését. Az előző projekt tapasztalataiból okulva, már ne is kezdjünk vizuális szerkesztővel, mert azok csak feleslegesen teleszemetelik a kódot, ráadásul nagyon nehéz az olyan oldalak utólagos módosítása. A forráskódú szerkesztők között is sok olyat találunk, amelyek párbeszédablakokkal segítik a fejlesztők munkáját, és nem fejből kell beírni a paramétereket. 99

99 Egyedi elrendezésű weblapok Grafikai fogás: Szegélygrafikák elkészítése A mostani weblapjaink szerkesztéséhez a Macromedia HomeSite 5 programot fogjuk használni, amelynek a 30 napos próbaváltozatát a Macromedia honlapjáról tölthetjük le ( ). Megjelenésében hasonlít a már bemutatott 1 st Page 2000 programhoz, de ez sokkal alaposabban kidolgozott alkalmazás. Sok hasznos beépített szolgáltatásával megkönnyíti a hosszabb forrásprogramokban való keresgélést, illetve azok áttekintését. Ugyancsak a Macromedia terméke a Fireworks MX 6 program, amellyel alapvetően képeket lehet szerkeszteni, de készíthetünk vele dinamikus weblapokat, flash-animációkat, és kiválóan alkalmas képek pontos darabolására. Nekünk a külső montázskép elkészítéséhez éppen ez utóbbira lesz szükségünk, mert egy nagy képet fogunk készíteni, amelynek csak a külső 30 pixeles szegélyét akarjuk felhasználni, a középső részt nem. Tipp. Ha egy meglévő képet csak szeletelni akarunk, akkor használhatjuk a Microsoft Office programcsomagban megtalálható Microsoft Photo Editor programot is, amely kicsi, egyszerű. A színeket jól lehet vele állítani, de nem alkalmas a kép fokozatos elhalványítására és tetszőleges szögű elforgatására. A fénykép feldarabolása a Microsoft Photo Editor programmal Kezdjük először az egyszerűbb megoldással, mivel ez a program a Microsoft Office részeként valószínűleg megtalálható a legtöbb felhasználó számítógépén. Ha mégsem, akkor annak az lesz az oka, hogy az áltanos telepítést választotta, és abban alapértelmezésben nincs kijelölve a Photo Editor telepítésre. Ezt a hiányosságot a Windows / Vezérlőpult / Programok hozzáadása elemének kiválasztásával pótolhatjuk. Indítsuk el a programot, majd nyissuk meg benne azt a képfájlt, amelyet a weblapunk szegélyeként kívánunk elhelyezni. Ügyeljünk arra, hogy a képnek nem a közepét, hanem csak a külső 30 pixeles szélét fogjuk felhasználni, ezért ott legyen rajta valami látnivaló, valami sejtelmes részlet. Ezután ki fogjuk jelölni a megfelelő téglalapokat, amelyeket a tervezett táblázatunkban el akarunk helyezni. A kijelölést kezdjük a [Ctrl]+[A] billentyűkombináció lenyomásával, mert az kijelöli a teljes képet, és ennek fekete négyzetes fogóival egyszerűen át tudjuk méretezni a kijelölést. Ebben a műveletben fenntartásokkal hagyatkozzunk az állapotsorban olvasható méretekre, mert már a teljes kijelöléskor is egymásnak ellentmondó adatok jelennek meg. Mivel más segítségünk nincs, ezért ez is használható, de csak óvatosan. 100

100 A Színes téglalapok alkalmazása A kijelölést ezután másoljuk le a [Ctrl]+[C]-vel, majd ugyanitt illesszük be, mint új képet az Edit / Paste as New Image menüponttal. Ezt mentsük el JPG- vagy PNG-formátumban, majd zárjuk be azonnal, mire visszajutunk az eredeti képhez. 74. ábra. A kép szeleteinek levágása a Photo Editor programmal Miután a szeleteket elmentettük, zárjuk be az eredeti képet, nyissuk meg az Intézőben a képek mappáját, hozzunk létre benne egy új mappát, ahová másoljuk át az összes képet. Ügyeljünk arra, hogy a 4 szeletkép kijelölése után az áthúzás során a [Ctrl] billentyűt is nyomjuk le, mert különben mozgatás lesz belőle. Azért másoljuk le a fájlokat, mert a színekkel szeretnénk kísérletezni, de annak eredménye nem biztos, hogy kívánatos lesz, így lehetőségünk lesz viszszamásolni a mappából az eredeti képeket, és újra kezdhetjük a kísérletezést a kép színeivel. Nyissuk meg a szeletképeket, majd kattintsunk az eszköztár Image Balance ( ) gombjára, és tetszés szerint fényesítsünk rajta, vagy váltsunk a színein. A színek arányának megváltoztatásával jó háttérképek hozhatók létre. 75. ábra. A színek és az egyéb jellemzők egyensúlyának megváltoztatása 101

101 Egyedi elrendezésű weblapok Fotómontázs készítése a Macromedia Fireworks MX 6 programmal Az előző kis kitérő után lássuk azt a programot, amelyet tökéletesen erre a feladatra találtak ki, és maradéktalanul mindent képes elvégezni, amire szükségünk van. A tervünk az, hogy több képből készítünk egy fotómontázst, elhalványítjuk a kép két sarkát, mintha erős fény érte volna, és pontosan feldaraboljuk a kívánt részekre, ráadásul még a szükséges HTML-kódot is megkapjuk ajándékba, hogy ezzel se kelljen az időnket tölteni ábra. Fotómontázs és képdarabolás végrehajtása profi eszközzel A fotómontázs elkészítéséhez hozzunk létre előbb egy új üres képet a File / New menüponttal, és adjuk meg a méretét 780x500 pixelnek. Ezután betöltünk több képet, amelyekből a montázs összeáll. Válasszuk ki a File / Import menüpontot vagy a [Ctrl]+[R] billentyűparancsot, és adjuk meg a betöltendő képet. A párbeszédablak bezáródása után az egérmutatónk megváltozik, és ki kell jelölnünk, hogy hová kerüljön és milyen méretben a betöltendő kép. Ehhez készítsünk egy kijelölést az egérrel, amelyet persze később módosíthatunk. Kattintással jelöljünk ki egy képet, majd nyomjuk meg a [Ctrl]+[T]-t, és forgassuk el a képet tetszőleges irányba és mértékkel. A [Ctrl]+[Shift]+[T]-t megnyomva egy párbeszédablakban adhatjuk meg az elforgatás vagy átméretezés mértékét, de a sarokpontok segítségével bármikor átméretezhetjük a képet.

102 A Színes téglalapok alkalmazása Miután elkészültünk a montázzsal, nyomjuk meg a [Ctrl]+[A]-t, amivel az összes elemet kijelölhetjük, és a [Ctrl]+[G]-vel csoportba foglalhatjuk a képeket (kattintsunk a képre a jobb egérgombbal, és nézzünk bele a helyi menübe). A csoportba foglalásra azért lesz szükségünk, mert olyan műveletet szeretnénk elvégezni, amelynek hatását a teljes kompozícióra szeretnénk érvényesíteni. Válasszuk ki a Commands / Creative / Fade Image menüpontot, majd nézzük végig a kínálatot. A kétsarkos fényesítéshez nekünk most a legutolsóra (8.) lesz szükségünk. Az OK gomb megnyomása után az elhalványító effektust alkalmazza a program, de megjelenik egy szakaszvonal a két végén egy-egy fogóval, amelyeket tetszőlegesen tudunk mozgatni. Elforgatni csak az egyiket lehet, de ez nem gond, mert így is tetszőlegesen beállítható az effektus. Ha ezzel végeztünk, akkor a kép elkészült, tehát mentsük el a program saját fájltípusában (PNG), hogy az egyes elemek továbbra is szerkeszthetők maradjanak. Ha a képre más célból is szükségünk lenne, akkor mentsük el más formátumban is. Ezután kattintsunk a bal oldali Tools eszköztár Web részének Slice tool ikonjára, vagy nyomjuk meg a [K] billentyűt, és a szálkeresztre váltott egérmutatóval készítsünk olyan kijelöléseket, amilyen darabokra vágni szeretnénk a képet. Célszerű balról jobbra haladni, és legvégül a legalsó kijelölést elkészíteni, mert így a weblapon is sorrendben lesznek a képek. A darabolási helyeket és a kiválasztandó gombot mutatta az előző oldali ábra. Ne aggódjunk azon se, ha véletlenül nem úgy sikerül a vágás, ahogyan szeretnénk, mert az ablak alján lévő Properties ablaktáblán a V,H,X,Y mezőkben az értékeket pontosíthatjuk. Tipp. A leggyorsabban úgy juthatunk a képekhez és a szükséges HTMLkódhoz, hogy megnyomjuk az [F12]-es billentyűt. Ezzel az elkészült weblapot az alapértelmezett webböngésző programunkban nyitja meg, amely már a feldarabolt képeket egy táblázatban összeillesztve mutatja meg. Az [F12] megnyomása a kép jobb felső sarkánál lévő (fw) Quick export gomb menüjében található Preview in Browser / Preview in Primary Browser kiválasztásával egyenértékű. Ha az exportálás nem a megfelelő képformátumban történik, akkor kattintsunk a jobb felső sarokban lévő Optimize címsorra, majd a lenyíló ablakrészben válasszunk egy másik képformátumot, esetleg módosítsuk az egyes jellemzőket. Ezután újra nyomjuk meg az [F12]-t, és az exportálás már az új képformátummal történik meg. Figyeljük meg, hogy milyen kis fájlméreteket (2-4 kb) fogunk kapni a megfelelő formátum kiválasztásával. A képeket a webböngésző címsorában látható címen találjuk a weblappal azonos mappában. 103

103 Egyedi elrendezésű weblapok Az egyéni oldalsablon elkészítése Miután a Macromedia Fireworks MX 6 program elkészítette nekünk a szükséges weblapot, válasszuk ki az Intézőben a HTML-fájl helyi menüjéből az Edit with HomeSite 5 menüpontot, vagy abban nyissuk meg ezt a weblapot szerkesztésre. Nézzük meg az Intézőben, hogy a képek közül melyik a legnagyobb, és annak mi a neve. Ezután a HTML-kódban keressük meg azt a sort értsd <TD>...</TD> cellák közti kódot, amelyikben ezen képfájlra hivatkozást találunk. Az itt található <IMG...> 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. <table cellspacing="0" cellpadding="0" class="tabla_bel"> <tr> <td class="cella_c1"></td> <td class="cella_c2"></td> </tr> <tr> <td class="cella_c3"></td> <td class="cella_c4"></td> </tr> </table> ábra. A táblázatunk kiindulási állapota index.html részlete 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 { background-color: #000080; overflow: auto; font-family: Arial; font-size: 10pt; }.tabla_rajz { width: 780px; height: 500px; border: 1px solid blue; }.tabla_bel { width: 100%; height: 100%; border: 1px solid blue; }.cella_c1 { width: 240; height: 140; background-color: #006699; text-align: center; }.cella_c2 }.cella_c3 { width: 480; height: 140; background-color: #ddedff; { width: 240; height: 298; background-color: #C6E1FF; text-align: center; background-image: url('csik1.gif'); }.cella_c4 { width: 480; height: 298; background-color: #006699; } 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

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. <td class="cella_c1"> <h1>móricz Attila<br>honlapja</h1> <h2> </td> index.html részlete h1 } h2 } stilus11.css részlete { margin-top: 0px; font-family: Arial Black, Arial; font-size: 14pt; color: white; { margin-bottom: 0px; font-size: 12pt; color: yellow; font-weight: bold; 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 <td class="cella_c3"> <img class="cella_c3_i" src="mobil_cb2.jpg"> </td> <td class="cella_c4"> <iframe src="cb01_full.html" class="i-keret"></iframe> <!-- object width="98%" height="300" data="cb01_full.html" border="0"></object --> </td> stilus11.css részlete.cella_c3_i { }.i-keret { width: 97%; height: 96%; margin: 6px; border-width: 0; } ábra. A C1-es cella tartalma és formázása

106 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

107 Egyedi elrendezésű weblapok index.html részlete <td class="cella_c2"> <!-- A belső FEJLÉC táblázat kezdete a C2-es cellában --> <table cellpadding="0" cellspacing="0" width="100%" height="100%"> <tr> <td class="cella_c21" colspan="5">mobiltelefon a kezekben</td> </tr> <tr> <td class="cella_c22"><a href="cb.html">computerbooks</a></td> <td class="cella_c22"><a href="nokia.html">nokia</a></td> <td class="cella_c22"><a href="lsi.html">lsi kiadó</a></td> <td class="cella_c22"><a href="micr.html">microsoft</a></td> <td class="cella_c22"><a href="stb.html">...stb.</a></td> </tr> <tr> <td class="cella_c231" colspan="3"> <ul type="square"> <li>mobiltelefon a kezekben</li> <li>levelezés az interneten</li> <li>windows-tippek újratelepítéshez</li> <li>tippek a CD-íráshoz</li> </ul> </td> <td class="cella_c232" colspan="2"> Megjelent: <br> Terjedelem: 248 oldal. <br> Mérete: B5. <br> Ára: 2'990 Ft. </td> </tr> </table> <!-- A belső FEJLÉC táblázat vége a C2-es cellában --> </td>.cella_c2 }.cella_c21 }.cella_c22 stilus1.html részlete { width: 480; height: 140; background-color: #ddedff; { width: 100%; height: 40; text-align: center; font-size: 16pt; color: #006699; font-weight: bold; { height: 20; background-color: #006699; text-align: center; font-size: 10px; font-weight: bold; }.cella_c231 { width: 70%; text-align: left; font-size: 8pt; }.cella_c232 { width: 30%; text-align: right; margin-top:6px; font-size:8pt; } á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 <td></td> 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 <td></td> 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 celláknál nagyon fontos, hogy megadjuk a stílusukat leíró paraméterüket, mert ezzel egyfajta egyéni jelzéssel is ellátjuk a cellák elemeit, így könnyebb lesz kiigazodni közöttük. Ezután adjuk meg a cellák jellemzőit a stílusfájlban, hogy minél hamarabb elnyerjék végső alakjukat. A C21-es cellának a rajz szerint 40 pixel magasságot tervezünk, mert abban kényelmesen elfér a 16 pontos félkövér betűkkel írt középre igazított főcím. Függőlegesen nem kell középre igazítani, mert a celláknál ez alapértelmezés. A C22-es cellákba kerülnek a hiperhivatkozások, amelyeknek a példában csak a címét és a feliratát adtuk meg. Amint azt láthattuk az előző design tárgyalásakor, akár szkriptek segítségével, akár az <a> tagnál megadott további paraméterekkel további funkciókkal ruházhatjuk fel a hiperhivatkozásokat. Ilyenek a buboréksúgóban és az állapotsorban megjelenő feliratok, vagy a lapváltás előtt lefutó szkriptek, amelyek bármilyen programot, animációt is elindíthatnak. A C23-as cellát azonnal két részre osztottuk, és mivel mindkét cellába eltérő tartalom kerül, ezért azonnal külön azonosítót is adunk nekik. A C231-es cellába egy felsorolást helyeztünk, amely tartalmazhat akár a témához tartozó további hiperhivatkozásokat, így lehetőséget teremtve a további részletezésre. Tipp. Nézzük meg a stílusok összefoglaló táblázatát, ahol látni fogjuk, milyen sokféle stíluselemmel formázhatjuk meg a felsorolásokat. Legyünk következetesek, és ennek is adjunk egyéni stílust, használjuk ki a lehetőségeket. Az egyszerű szöveges tartalmat jobbra igazítva helyezzük el a C232-es cellában, ahol célszerű a mellette lévő felsoroláshoz igazítani az első sor előtti margót. A helyes értéket csak próbálgatással tudjuk megtalálni, de úgy is jó lesz. 109

109 Egyedi elrendezésű weblapok A nyitóoldal feltöltése adatokkal Az előző fejezetekben ismertetett weblap a jelenlegi design alapján készült általános oldalfelépítés, amelyet tetszőleges módon megtölthetünk adatokkal. Egyszerűbb webhely esetén csak a navigáló soron lévő 5-6 hiperhivatkozás vezet el egy-egy oldalhoz, míg összetettebb helyeken ezek mindegyike lehet egyegy témanyitó oldal, és a linkek alatti részen további 5-10 db újabb hivatkozás sorakozhat egy vagy két oszlopban. Amennyiben nem portált készítünk, úgy óvakodjunk attól, hogy a nyitólapot megtömjük mindenféle felesleges információval, mert nem a nyitólapon kell mindent rázúdítani a látogatóra. A kezdőlap mindig maradjon meg tisztán átláthatónak, hogy a felhasználók felismerjék az oldal felépítését, a linkek rendszerét, hiszen ezt minden új oldalon meg kell tanulniuk. Ha az oldal túl bonyolult, és nem képesek a látogatók felismerni a navigálás rendszerét, akkor teljesen felesleges volt a többi weblapot elkészíteni, mert nem fognak odáig eljutni, és már a nyitólapról elmenekülnek. A felépítés mélységétől függetlenül a nyitólap és a belső oldalak megjelenése hasonló lesz, és bizonyos elemek ismétlődni fognak minden oldalon, hogy a látogató találkozzon ismerős elemekkel. Ezen elemek kisebb-nagyobb méretben jelennek meg az egyes oldalakon, jelezve, hogy ugyanazon webhely egy másik oldalára kerültek. 110 Tipp. Óvakodjunk attól, hogy a weblapjaink megjelenésétől merőben eltérő nyitóoldalt készítsünk, csak azért mert ott kiélhetjük a flash-es tervezői hajlamainkat. Egy grafikás, mozgó animációs oldalról egy nyugodt HTML-alapú és színvilágában is eltérő weblapra érkezve a látogató azt fogja gondolni, hogy átirányítottuk őt egy másik webhelyre, és nem fogja érteni miért van ez. A nyitólapon helyezzük el például a C21-es cellába a webhely megnevezését, ami a belső oldalakon a C1-es cellába kerül át kisebb betűkkel. A C1-esben lehet egy fénykép, egy fotómontázs, ami csak a nyitólapon lesz látható. Ha ez egy céglogó, akkor annak kicsinyített formája megjelenhet más oldalakon is, és hozzárendelhetjük a nyitólapra irányító hiperhivatkozást. A C22-es cellasorban hagyjuk meg a linkek sorát, viszont az alatta lévő C231-es és C232-es cellákat összevonhatjuk, ahol a linkre történő rámutatáskor felbukkanó feliratok, esetleg képek jelenhetnek meg. Ha képeket alkalmazunk, akkor azokat mindenképpen töltsük le előre, mert az itteni tartalom megjelenése felvillanásként hat, amikor viszont nem fogadható el az, hogy hosszú másodperceket kelljen várni egy-egy díszítőelem megjelenésére.

110 A Színes téglalapok alkalmazása Ehhez kapcsolódóan a C3-as cellába elhelyezhetünk egy feliratos képet, ami gyorsan megjelenik, de eközben lehívunk egy nagyobb animált GIF-képet, vagy több önállót, és azt jelenítjük meg helyette, amint a kép megérkezett. Ehhez majd a JavaScript programban folyamatosan figyelni kell, hogy letöltődötte már a kép (if (kepek[i].complete) {}), és ha igen, akkor ki lehet cserélni a weblapon lévő kép forrását az újabbra. Ezzel a módszerrel folyamatosan hívhatunk le újabb képeket, de soha nem szembesül a látogató azzal a látvánnyal, hogy valamelyik kép hiányzik a weblapról, és annak helyét csak egy törött ikon jelzi. Tipp. A képek közötti váltást az animációknál megismert stílusokkal tehetjük még érdekesebbé, mert akkor nem csupán átvált a kép, hanem egy pillanatra odavonzza a látogató figyelmét. Azonban arra vigyázzunk, nehogy folyamatos képváltásba menjen át a bemutató, mert az már zavaró lesz. Szokásos például a hiperhivatkozásokat a bal oldalra helyezni a logó alá, ahol nálunk a termék képe jelenik meg. Készíthetünk ide egy tartalomjegyzéket, ami a webhelyen elérhető témákat összegzi kivonatosan, de az egyes témáknak nem feltétlenül kell hiperhivatkozásként is működniük, elég ha csak a webhely térképeként szolgálnak. (Lásd még: Helyi menük és HTML-térképek ; 207. o.) Ehhez kapcsolódóan a jobb oldali tartalmi területre, a C4-es cellába a nyitólapon az IFRAME helyére elhelyezhetünk egy táblázatot, amely az egyes témák rövid ismertetőjét tartalmazza. Ebben az esetben a C23-as sorba javasolt felbukkanó ajánlók itt kerülnek megjelenítésre. Kapcsolhatunk hozzá egy kis animációt is. Ha például rámutatunk a bal oldali tartalomjegyzéken egy címre, akkor a jobb oldali részen a hozzá tartozó leírás cellájának háttérszíne átválthat egy másik színre, jelezve az összetartozásukat. Tipp. Apró szolid megjelenésű animációkkal feldobhatunk egy látszólag egyszerű oldalt is, de vigyázzunk, hogy ne vigyük túlzásba a villongást, mert azt a látogatók nem biztos, hogy értékelik. Soha ne alkalmazzunk villogást, folyamatosan mozgó animációt, mert az zavaró és nem figyelemfelkeltő. Összességében elmondhatjuk, hogy a nyitólapon általában bemutatkozni szokás, vagyis bemutatni azt, hogy mi vár a látogatóra, ha beljebb lép a webhelyen. Itt vonultatjuk fel a céglogót, a navigálásra szolgáló linksort, és bemutathatunk pár egyszerű animációs fogást, amellyel később is találkozhat a látogató. A linkeket soha ne dugjuk el, és ne kelljen a felhasználónak kitalálni, hogy milyen trükkel tudja azokat megjeleníteni, előcsalni valami rejtett zugból. 111

111 Egyedi elrendezésű weblapok A webhely címének megjelenése a nyitólapon és a belső oldalakon Talán úgy gondolják, hogy egy cím áthelyezése nem jelent különösebb problémát, ezért felesleges kiemelten foglalkozni vele. Azonban mi most egy sötét alapon lévő kisebb feliratot helyezünk át egy világos alapra, ahol ráadásul nagyobb méretben szeretnénk ugyanazt viszontlátni. Ebben az esetben gondolhatnánk arra, hogy módosítsuk a stílusfájlban valamelyik elem jellemzőit, de vajon melyikét? Ha formázás nélkül tesszük a cellába a feliratot, akkor ugyanolyan karakterjellemzőkkel jelenik meg, mint a többi oldalon a főcím. Ez is jó, de a nyitólapon azért legyen egy kicsit nagyobb és erőteljesebb a honlap főcíme. Nem hagyhatjuk H1-ben sem, mert az világos színű, lévén a többi oldalon sötét alapon jelenik meg. Mi akkor a megoldás? A probléma felhívja a figyelmet arra, hogy a nyitólap stílusa, és a belső lapoké részben eltér, ezért indokolja külön stíluslap alkalmazását, de az átfedések miatt ez sem tökéletes megoldás. A megoldás a CSS értelmezésében rejlik, ami angolul Cascading Style Sheets, magyarul pedig Lépcsős stílustáblázatok a megfelelője. Ez azt jelenti, hogy a stíluslapok lépcsősen egymásra épülnek, és a webböngésző a weblap felépítésekor mindegyiket figyelembe veszi, de a legutolsó szó a weblapon belüli információké. Ennek ismeretében válasszuk ketté a stílusfájlt, és hozzunk létre egyet, amelyik tartalmazza az összes weblapra egyaránt érvényes információkat, míg egyet-egyet a nyitólapnak, illetve az adott szintű oldalaknak. Az első szint a nyitólapról elérhető témák szintje, a második az onnan kiválaszthatóké. Ezzel megoldható a felmerült probléma, és mindegyik szinten alkalmazhatunk egyéni elemeket, amelyek nem zavarják feleslegesen az összes oldal megjelenítését. Fontos! A több stíluslap alkalmazása nem a számítógépnek jelent egyszerűséget, mert az a pár kilobájt igazán nem számít még egy lassú kapcsolatnál sem. Azonban nekünk könnyíti meg a helyzetünket az oldal jellemezőinek áttekintésekor, mert csak azt látjuk a fájlban, ami az adott oldalnál szükséges. Ennek szellemében most másoljuk le a stilus1.css fájlt több példányban, és nevezzük a többit stilus0.css fájlnak, ahol a számot módosítsuk 1-re, 2-re, jelezve az összes többi szintet. A minden oldalon szükséges stílusfájl neve legyen stilusfo.css. Ebben a fájlban csak azt hagyjuk meg, amely elemekre minden oldalon szükségünk lesz, tehát a body elemre, a táblázatokra és cellákra vonatkozó jellemzőket. Amennyiben az oldalakon nem lesz sok hiperhivatkozás, és azok jellemzői megegyeznek minden oldalon, úgy az a elemeket is hagyjuk meg a főfájlban. A stilus0.css fájl a nyitólap egyedi stílusait írja le, mint például a h1, h2, a súgóterület és az új leírócella formátumát. 112

112 A Színes téglalapok alkalmazása Azt is megtehetjük, hogy a felső C2-es cellában lévő táblázat sorait átméretezve az adott helyzetnek megfelelően igazítjuk a méreteket. Így a példánkban a stilusfo.css fájlban lévő pixeles felosztást módosíthatjuk a stilus0.css-ben pixeles arányra. Ezzel a C2-es cella magassága nem változik, de a navigáló sor egy kicsit feljebb kerül, és a nyitóoldalnak jobban megfelelő arányban osztja fel a felső részt. (Persze azon is lehet vitatkozni, hogy jót teszünk-e azzal, hogy ez a sáv az oldalak közti váltásnál elmozdul, hiszen úgy is magyarázhatjuk a dolgot, hogy a látogató ezt majd valamiféle méretezési hibának fogja nézni, ami nem vet jó fényt az oldalra.) Az említett arányváltást úgy valósítjuk meg, hogy a stilus0.css-ben az alábbi módon felülírjuk az eredetileg stilusfo.css-ben már egyszer definiált stílusok egyes jellemzőit..cella_c21 }.cella_c22 }.cella_c23 } stilus0.css részlete { height: 60px; { height: 20px; { height: 60px; vertical-align: top; background-color: white; A példában láthatjuk, hogy a stilusfo.css-ben sokkal részletesebben írtuk le a stílus jellemzőit, de a nyitólaphoz rendelt stilus0.css-ben csak ezen pár paramétert akartuk módosítani, ezért a többihez nem nyúltunk. A C23-as cellát nem adtuk meg az eredeti stílusfájlban, mert ott azonnal felosztottuk két cellára, és ott azokat részleteztük. 82. ábra. Az új design nyitólapja 800x600-as képernyőre tervezve 113

113 Egyedi elrendezésű weblapok JavaScript: Az oldal elemei életre kelnek Az alábbiakban olyan JavaScript programokat ismerhetünk meg, amelyek nélkül az oldalunk szépen megjelenik, de alkalmazásukkal mozgással telik meg. Az egyes programokat, tippeket ne használjuk egyszerre, válogassunk belőlük. A súgószöveg területének aktivizálása A linkekre történő rámutatás során megjelenhet például a hiperhivatkozások alatti területen egy kiegészítő üzenet, ami segíti a látogatót a választásban. Az így megjelenő kiegészítéssel három dolog történhet. A megjelenést követően a feliratok kint maradhatnak, amíg egy másik esemény azt el nem tünteti, vagy azonnal eltűnhet, amint a link vagy a link cellájának területét elhagyja az egérmutató. Általában ez a jellemző, de ha például itt egy legördülő menü jelenik meg, akkor az csak akkor tűnhet el, ha annak területét hagyjuk el. A harmadik megoldás nem általános, éppen ezért érdekes és egyedi oldalra tehetünk szert e tipp alkalmazásával. Hagyjuk kint a feliratot, de indítsunk el időzítőt, ami pár másodperc eltelte után bezárja azt. Sőt, a bezárást késleltetheti, ha a látogató az egérmutatóval a megjelent szöveg területén belül tartózkodik, viszont ha azt elhagyja, akkor már kisvártatva valóban bezáródhat. Az ilyen különleges szolgáltatások programozása nem bonyolult, viszont a sok apró dolog nem látszik annyira, ezért sokan haszontalannak érzik. Azonban nem árt tudni, hogy az ilyen apróságoktól válik profivá az oldalunk. Fontos! Az különbözteti meg az egyszerű weblapot a profitól, hogy aprólékos munkával és odafigyeléssel történik minden funkció programozása, az elemek megjelenítése. Ne használjunk semmi felesleges giccset az oldalainkon, és legfőképpen ne csapjuk agyon az egészet egy ingyenes reklámmal. Kezdjük először az egyszerű változattal, ahol a hiperhivatkozásra történő rámutatáskor a súgószöveg megjelenik, majd az egérmutató elhúzásakor a szöveg visszavált az alapértelmezett kiírásra. Ehhez felhasználjuk az onmouseover és az onmouseout eseménykezelőket, amelyekhez hozzárendeljük a saját függvényünket, amelyet hamarosan elkészítünk. A HTML forráskódot az alábbiak szerint módosítsuk értelemszerűen az összes C22-es cellánál. Az (1) paraméter pedig sorban növekedjen mindegyik linknél, de a (0) maradjon, mert az állítja helyre az eredeti kiírást. <td class="cella_c22"><a href="cb.html" onmouseover="kiirsugo(1)" onmouseout="kiirsugo(0)">computerbooks</a></td>

114 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"></script> </head>... <td class="cella_c23" colspan="5"> <p id="bub" class="sugo">üdvözlöm a honlapomon!</p> </td>... 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 = [ web3.js részlete 'Üdvözlöm.', '<a class="link1" href=" target="_blank" '+ 'title="a megnyitás külön ablakban történik">computerbooks</a>'+ ' 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

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. 116 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 (<html id="weblap">), é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. uj=window.open('','','fullscreen') uj.document.open(); uj.document.write( weblap.outerhtml ); web3.js részlete 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

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 <div> vagy <table> 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 <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" id="tabla_r1" style="display:none; font-size:8pt;"> <tr> <td colspan="2">a könyvek választéka:</td> </tr> <tr> <td><ul type="square"> <li>mobiltelefon a kezekben</li> <li>levelezés az interneten</li> </ul></td> <td><ul type="square"> <li>windows-tippek újratelepítéshez</li> <li>tippek a CD-íráshoz</li> </ul></td> </tr> </table> 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] } web3.js részlete á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 <a> 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. Képek behívása egymás után folyamatosan A bal oldalon lévő képet használhatjuk a weblapunkon díszítőelemként, de más feladatot is adhatunk neki. Például, ha a látogató a nyitólapon több időt eltölt, mert van elegendő látnivaló, akkor ezt a képet folyamatosan lecserélhetjük. Ennek egyik előnye, hogy újabb változatosságot jelent a weblapon, továbbá előre letölt olyan képeket, amelyekre csak később lesz szükség. Így ha a látogató majd átvált valamelyik belső oldalra, akkor az ottani díszítőkép már le lesz töltve, így az oldal megjelenése sokkal gyorsabb lesz, ami kellemes érzéssel fogja a felhasználót eltölteni, különösen, ha ő maga amúgy lassú kapcsolattal rendelkezik, és ezzel tisztában is van. 119

119 Egyedi elrendezésű weblapok A képek között válthatunk egyszerűen, amikor kicseréljük egy időközönként meghívott JavaScript függvényben a kép forrását. E módszer finomítása, ha az időzítő előbb lehívja a képet, és csak akkor jeleníti meg, ha a kép már le van töltve. Így a megjelenés villanásszerű lesz, ami szokatlan a weblapokon. A másik módszer (ezt fogjuk megnézni), hogy a lap lehívásakor elindítjuk előre a képek letöltését, majd egy későbbi időpontra időzítjük a képek váltását. A váltások között is több másodperces szünetet tartunk, így a lapozást már akkor is alkalmazhatjuk, amikor még az utolsó kép nem töltődött le, de ez nem probléma, mert csak sokára fog rákerülni a sor. A programunk tartalmazni fog egy biztonsági elemet, ami megakadályozza abban, hogy olyan képet akarjon megjeleníteni, ami még valami okból nincs letöltve. Ha a kép például hiányzik a szerverről (vagy valamiért nagyon lassan jön le), akkor azt egyszerűen átlépjük, és a következő már letöltött képet jelenítjük meg. <img id="kep1" class="cella_c3_i" src="mobil_cb2.jpg"> Első lépésben adjunk egy azonosítót a bal alsó cellában található képnek. Más módosítás nem lesz most a weblapon. A szkriptet először csak a nyitólapon próbáljuk ki, és rendeljünk hozzá külön JS-fájlt, nevezzük web3nyito.js-nek. web3nyito.js részlete window.onload=mindenablakra; var keptomb, kepek, effekt=0, maxkep=5, maxeff=23, ii=0, kiir="", x=0; function mindenablakra() { kepek =["kep-0.jpg", "kep-1.jpg", "kep-2.jpg", "kep-3.jpg", "kep-4.jpg"]; keptomb = new Array(maxKep); for (i=0; i<maxkep; i++) { keptomb[i] = new Image(); keptomb[i].src = kepek[i]; } // A képek letöltése előre... window.settimeout("kepcserelo()", 4000); sbar(); // vagy sbar_v2(); } function kepcserelo() { ujra = false; do { ii++; if (ii>=maxkep) ii=0; if (keptomb[ii].complete) { ujra = false; kep1.src = kepek[ii]; } else { ujra = true; } } while (ujra); window.settimeout("kepcserelo()", 4000); } ábra. A weblapon lévő kép váltása előre letöltött képre

120 A Színes téglalapok alkalmazása Először definiáljuk a globális változókat, amelyek majd a weblap érvényessége alatt folyamatosan elérhetők lesznek, és nem veszítik el értéküket. Ezután a lap behívásának idejére (onload) időzítjük a mindenablakra() függvényünket, amelyben feltöltjük értékekkel a szükséges változókat. Létrehozzuk a fájlneveket tartalmazó tömböt, majd egy ciklus segítségével elindítjuk a képek előre történő lehívását. Végrehajtási szempontból jó ha tudjuk, hogy a képobjektumok létrehozása (new Image();) és a további értékadások csak egy pillanatig tartanak, de a háttérben külön programszálakon megindul a webböngészőben a képek letöltése, amelynek befejezéséről mi is értesülhetünk (kep1.complete true). Tipp. Ha a weblapunkat a látogató internetes sávszélességéhez szeretnénk igazítani, akkor a lehívások indítása előtt tároljuk el az aktuális időt, majd az összes kép letöltődése után ismét olvassuk ki az időt. A kettő különbségéből és a lehívott képfájlok fájlméretéből kiszámíthatjuk, hogy a látogató számítógépe milyen sebességgel töltötte le a képeket (... bps). Az eljárás végén időzítjük (settimeout) a kepcserelo() programunk indítását 4 másodperccel későbbre, és elindítjuk az sbar() programot, amely az állapotsorba fogja folyamatosan kiírni a képek letöltöttségének állapotát. Erre általában nincs szükség, és a végleges weblapon nem is szabad meghagyni, de nekünk a tesztelés, tanulás idejére szükségünk van rá. Tipp. A képek előre történő lehívását merevlemezen tárolt képekkel nem lehet tesztelni, mert ott minden azonnal és villámgyorsan megjelenik. Azonban van a számítógépünkben egy igen lassú elérésű hely, és ez a flopilemez. Másoljuk át a weblapot és a képeket a flopira egy mappába, nevezzük át a mappát, és nyissuk meg a weblapot onnan. A képek szép lassan fognak betöltődni. Amikor eljön az ideje, elindul a képcserélő programunk. Egyszerű esetben itt megadhatnánk a kép forrását a kep1.src=kepek[ii++]; utasítással, amivel egyben még az ii változót is megnövelnénk eggyel. Azonban ez magában hordozza azt a veszélyt, hogy a kép még nincs letöltve, és egy törött kép ikonja, vagy egy félig letöltődött kép jelenne meg, ami nem szép látvány. Ezért a következő cselhez folyamodunk. Elindítunk egy ciklust, ami megnöveli az ii változót, ellenőrzi, hogy annak értéke nehogy túl nagy legyen, mert akkor lenullázza. Ezután megnézi, hogy a keptomb[] nevű tömbben tárolt előre lehívott kép letöltődött-e már (complete?), és ha igen, akkor már nem indul újra a ciklus, és átválthatjuk a kep1 azonosítóval rendelkező kép forrását a megadott névre. Ellenkező esetben a ciklus újraindul, és addig próbálkozik, amíg nem talál egy letöltött képet, majd arra vált át. 121

121 Egyedi elrendezésű weblapok A program végén a függvény önmagát időzíti egy újabb időpontra. A tesztelés idején ezt az időt állítsuk as értékre, így látni fogjuk, hogy először csak a már lehívott 1-2. képek között vált a program, majd később 1-3, 1-4 stb. között. Ha hiányoznak egyes fájlok, akkor azokat értelemszerűen átlépi, és csak az elérhető képek között fog váltani. Tipp. A tesztelés idejére hozzunk létre a Windows Paint programban nagy méretű számozott képeket, hogy jól lássuk, mikor melyiket tölti be. A képeket érdemes egy felnagyított halványított képre helyezni, majd a Photo Editorban valamilyen effektust alkalmazni rá, hogy jó nagy legyen a fájlmérete, így a flopiról történő behívás kellően lassú legyen. Most nézzük meg az állapotsorban történő visszajelző programunkat, amelyből két verziót is megismerhetünk. Az első egyszerű módon kiírja, hogy mely képek vannak már letöltve, ahol a true kiírás jelenti a kész állapotot. web3nyito.js részlete... function sbar() { kiir = ""; for (i=0; i<maxkep; i++) { kiir += i + ":" + keptomb[i].complete + " - "; } window.status = kiir; window.settimeout("sbar()", 100) } function sbar_v2() { kiir = ""; x = 0; for (i=1; i<maxkep; i++) if (keptomb[i].complete) x++; i--; window.status = kiir + " Letöltés... " + (100*x/i) + "% kész."; if (i!=x) window.settimeout("sbar_v2()", 100) else window.status = "Üdvözlöm a honlapomon!"; } ábra. Az állapotsorban történő visszajelzésekből sokat tanulhatunk A második verzió már tartalmaz egy kis szolgáltatást, amelyet felhasználhatunk bizonyos helyzetekben akár a weblapon is. Ez a program ne írja ki, hogy mely képek vannak letöltve, csak megszámolja (az x változóval) azokat, és kiírja az állapotsorba, hogy az összeshez képest hány százalék van kész. Ha minden képet lehívtunk, akkor többször már nem indítja el önmagát.

122 A Színes téglalapok alkalmazása A képek animációval történő váltása Az előző fejezetben ismertetett program jól működik, de a képek váltása villanásszerű, amelyet tovább finomíthatunk az Internet Explorer webböngészővel hozzánk látogatók számára. A módszer előnye, hogy más böngészőknél a hatás elmarad, de megjelenési hibát nem okoz. <img id="kep1" class="cella_c3_i" src="mobil_cb2.jpg"> Először adjunk egy azonosítót a képnek (id=kep1), és egészítsük ki a kép stílusát a már megismert szűrők (filter) alkalmazásával..cella_c3_i { width: 180; height: 240; border: 15px solid #006699; filter: revealtrans(duration=4.0, Transition=0); } A filter megadásával egyidejűleg meg kell adnunk vagy a méretét, vagy a pozícióját kell átváltanunk absolute/relative értékek egyikére. A szűrő megadásakor elegendő lenne csak a revealtrans() beírása, mert a két paraméterét meg fogjuk a programban változtatni. Vegyük észre még a stílusban, hogy irdatlan vastag keretet adtunk a képnek. Ez általában ellenjavallt, de itt a kép körül hagyott margót éppen megfelezi, így különleges duplakeretezést hoz létre. Próbáljuk ki a border-nél a double, groove, ridge, inset, outset paramétereket is, amelyek különleges hatást keltenek. (Ez még az Opera 7-ben is megjelenik rendesen. Az ábrán a solid és a groove látható.) 89. ábra. Az áttűnések közben elkapott pillanatfelvételek 123

123 Egyedi elrendezésű weblapok A megjelenés már elkészült, most következzen a programozott képváltás. Az előkészítő munkálatok megegyeznek a 120. oldalon lévő programmal, sőt ott láthatunk pár olyan változót is a globális változók sorában, amelyeket most fogunk felhasználni (például effekt, maxeff). A különbség csupán annyi lesz, hogy a kepcserelo() helyett a cserelostart() nevű függvényünket hívjuk meg, és nincs szükség az sbar() eljárásra sem.... function cserelostart() { kep1.filters.revealtrans.apply(); kep1.filters.revealtrans.transition = effekt; lapozz(); kep1.filters.revealtrans.play(2.0); window.settimeout("cserelostart()", 4000); } web3.js részlete // Az állapot rögzítése. // Az effektus megadása. // Az új kép kijelölése. // A váltás lejátszása. function lapozz() { do { ii++; if (ii>=maxkep) ii=0; if (keptomb[ii].complete) { ujra = false; kep1.src = kepek[ii]; } else { ujra = true; } } while (ujra); effekt++; if (effekt==24) effekt = 0; } 90. ábra. Animált képváltás megvalósítása (csak az Internet Explorerben fut) A programunk egészen egyszerű, és könnyen áttekinthető, így nem lesz nehéz dolgunk, ha használni akarjuk. Az első lépésben az Apply() eljárással rögzítjük a kiindulási állapotot, majd megadjuk a kívánt effektus sorszámát (0..23), ami elmaradhat, ha előre kiválasztottuk a stílusban, hogy milyen váltást szeretnénk látni. Ezután a lapozz() eljárással átváltjuk a kép forrását, de ez a váltás nem fog megvalósulni azonnal, mert az Apply() eljárás lefagyasztotta a képet, és a váltást majd csak a Play() fogja elvégezni a megadott effektus alkalmazásával a kért ideig. Végezetül a függvény időzíti önmaga újbóli indítását. A lapozó függvényünk azonos az előzővel, csak kiegészül az effekt változó növelésével, amely a végrehajtható effektusok sorszámát tartalmazza [0-23] tartományban. Azért nem kell változtatni semmit a függvényünkön, mert itt is ugyanúgy át kell váltanunk a kép forrását, de a tényleges váltást csak a Play() eljárás fogja elvégezni, míg az előbbi feladatban ez azonnal megvalósult. 124

124 A Színes téglalapok alkalmazása Szuperkülönleges oldalváltás a szűrők alkalmazásával Az eddigiek során láthattunk már példát arra, hogyan válthatunk az effektusok segítségével két szöveg között, két kép között, de elvileg lehetőségünk van bármilyen tartalmú div- vagy egyéb tároló tartalmát is áttűnéssel leváltani, ha adott legalább az egyik mérete. Most azt nézzük meg, hogyan lehetne elegánsan átváltani az oldalt, amikor a látogató egy linkre vagy más egyéb elemre kattint. Előbb kisebb próbát végzünk, majd a linkekre is kiterjesztjük a különleges hatásokat, hogy valóban egyedivé tegyük az oldalunkat. Ismét hozzunk létre egy új stílust, amelynél megadjuk az effektus jellemzőit..effektus { position: relative; height: 100%; filter: revealtrans(duration=4.0, Transition=0); } Rendeljük hozzá a body elemhez ezt az új stílust, és lássuk el egy azonosítóval. <body id="redony" class="effektus"> El kell még helyeznünk egy aktiválási pontot, amely elindítja az egész folyamatot. Ehhez most válasszunk ki egy tetszőleges elemet a weblapon, például a C1-es cellában lévő h2-es formátumú bekezdést. <h2 onclick="redonyle()"> Itt az onclick eseményhez rendeljük hozzá a redonyle() nevű függvényünket, amely eltünteti a weblap tartalmát egy speciális effektus segítségével. A rövidke JavaScript forrásprogram az alábbiak szerint alakul. function redonyle() { redony.filters.revealtrans.apply(); redony.innerhtml=""; redony.filters.revealtrans.play(); } web3.js részlete Ennek a kis kiegészítésnek köszönhetően a következő fog történni. Ha rákattintunk egyet a sarokban lévő ártalmatlan főcímre, akkor elindul a redonyle() függvény, amely előbb rögzíti a body állapotát, majd megkapja az üres karakterláncot, amire át kell váltania az oldalt, és a Play() eljárással elvégzi az animált áttűnést a stílusban kiválasztott effektus felhasználásával. Ezután most nem történik semmi, mert nem adtuk meg, de erre is hamarosan sort kerítünk. Frissítsük az oldalt az [F5]-tel, és újra megjelenik minden. 125

125 Egyedi elrendezésű weblapok Most adjunk egy gyakorlatban is használatos funkciót ennek a különleges hatásnak, és rendeljük hozzá egy hiperhivatkozáshoz. A tervünk az, hogy a linkre kattintva elindul az áttűnés, majd a végén átvált a következő oldalra. Ehhez fel kell használnunk egy új eseménykezelőt a body elemnél. <body id="redony" class="effektus" onfilterchange="vege()"> Az onfilterchange akkor kerül meghívásra, amikor az effektus befejezte a működését. Mivel mi oldalt szeretnénk váltani, ezért ez az esemény éppen kapóra jön, mert így a látvány végeztével könnyedén átváltjuk az oldal címét. A váltást egyszerűen úgy végezzük el, hogy megadjuk a dokumentum helyének (document.location) a hiperhivatkozását (href). function vege() { document.location.href = ujlink; } // web3.js Hamarosan adunk egy értéket az ujlink változónak is, de előbb módosítsuk a hiperhivatkozásunk forrását, hogy az a kattintásra ne váltson át azonnal a másik oldalra, mert azt mi akarjuk elvégezni helyette. index.html részlete <td class="cella_c22"><a href="cb.html" onclick="link();return false;" onmouseover="kiirsugo(1)" onmouseout="kiirsugo(0)">computerbooks</a></td> 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

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

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

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. window.open("felfedez.html","felfedez"); web3.js első sorába írandó: felfedez.html teljes fájl <html><head> <STYLE TYPE="TEXT/CSS"> body { margin:30pt; font-family:arial; font-size:10pt; } </STYLE></head> <body> <p> <input id="t1"type="text" size="50" name="t1" value="window.opener.document"> <input type="submit" value="nézzük" onclick="nezz();"> </p> <p align=right> <input id="t2"type="text" size="50" name="t2" value="window.opener.document.title='módosítva'"> <input type="submit" value="beállít" onclick="ok();"> </p><hr> <p id="adatok"></p> <script LANGUAGE="JavaScript"> <!-- nezz(); function ok() { eval( T2.value ); } function nezz() { adatok.innertext = jellemzok( T1.value ); } function jellemzok(neve) { var kesz = "", ebben = eval(neve); for (var i in ebben) kesz += neve + "." + i + " = " + ebben[i] + "\n"; return kesz; } // --></script> <hr> </body></html> 92. ábra. Minden létező tulajdonság a felszínre kerül 129

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 = # 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 = # 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/ :57:10 window.opener.document.linkcolor = #0000ff window.opener.document.links = [object] window.opener.document.location = file:///e:/dokumentumok_xp/webdesign/web3/index.html 130

130 A Színes téglalapok alkalmazása window.opener.document.mimetype = HTML-dokumentum window.opener.document.nameprop = Könyv: Mobiltelefon a kezekben window.opener.document.onafterupdate = null window.opener.document.onbeforeeditfocus = null window.opener.document.onbeforeupdate = null window.opener.document.oncellchange = null window.opener.document.onclick = null window.opener.document.oncontextmenu = function ablak() { alert('kérem, a bal gombbal kattintson!'); return false; } window.opener.document.ondataavailable = null window.opener.document.ondatasetchanged = null window.opener.document.ondatasetcomplete = null window.opener.document.ondblclick = null window.opener.document.ondragstart = null window.opener.document.onerrorupdate = null window.opener.document.onhelp = null window.opener.document.onkeydown = null window.opener.document.onkeypress = null window.opener.document.onkeyup = null window.opener.document.onmousedown = function klick() { if (event.button==2) ablak();} window.opener.document.onmousemove = null window.opener.document.onmouseout = null window.opener.document.onmouseover = null window.opener.document.onmouseup = null window.opener.document.onpropertychange = null window.opener.document.onreadystatechange = null window.opener.document.onrowenter = null window.opener.document.onrowexit = null window.opener.document.onrowsdelete = null window.opener.document.onrowsinserted = null window.opener.document.onselectstart = null window.opener.document.onstop = null window.opener.document.parentwindow = [object] window.opener.document.plugins = [object] window.opener.document.protocol = File protokoll window.opener.document.readystate = complete window.opener.document.referrer = window.opener.document.scripts = [object] window.opener.document.security = Az ilyen típusú dokumentum nem rendelkezik... window.opener.document.selection = [object] window.opener.document.stylesheets = [object] window.opener.document.title = Könyv: Mobiltelefon a kezekben window.opener.document.url = file://e:\dokumentumok_xp\webdesign\web3\index.html window.opener.document.vlinkcolor = # window.opener.document.calc_1 = [object] window.opener.document.calc_2 = [object] window.opener.document.calc_3 = [object] window.opener.document.calc_5 = [object] 93. ábra. A nyitóoldal összes lehetséges jellemzője 131

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. 132 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 +Grafikai fogás: Képes oldalmenü készítése A Színes téglalapok alkalmazása 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

133 Egyedi elrendezésű weblapok 94. ábra. Egyszerű képmontázs készítése 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. 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). 134 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

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. 136 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

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. 138 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

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. 140 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 (<td>), é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 á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

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). 142 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

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% C51: 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. 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

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, 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

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 <html> <head> <title>erdei Vasutak Rt.</title> <link rel="stylesheet" type="text/css" href="stilusfo.css"> </head> <body> <table class="tabla_fo" cellspacing="0" cellpadding="0"> <tr> <td class="cella_c1"></td><!-- A kis ikonok területe--> <td class="cella_c2"></td><!-- A cégnév szalagcímének helye --> </tr> <tr><td class="cella_hr" colspan="2"></td></tr><!-- Elválasztó vonal --> <tr> <td class="cella_c3" id="c3"></td> <td class="cella_c4"></td> </tr> <tr><td class="cella_hr" colspan="2"></td></tr> <tr> <td class="cella_c5"></td> <td class="cella_c6"></td> </tr> <tr><td class="cella_hr" colspan="2"></td></tr> <tr> <td class="cella_c99" colspan="2"></td> </tr> </table> <script LANGUAGE="JavaScript" src="web4.js"></script> </body> </html> á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 body { font-family: Arial; font-size: 8pt; background-color: #006699; margin: 5px; overflow:auto; text-align:center;.tabla_fo { width:600; border: 1px solid #006699; }.cella_hr { height:2; background-color: #006699; }.cella_c1 { width:140; height:30; background-color: rgb(186, 216, 247); text-align: right; }.cella_c2 { width:460; height:30; vertical-align:bottom; background-color: white; }.cella_c3 { width:140; height:100; background-color: rgb(186, 216, 247); text-align:right; }.cella_c4 { width:460; height:100; background-image: url('vonat.jpg'); background-repeat: no-repeat; vertical-align:bottom; text-align:left; }.cella_c5 { width:140; height:100%; }.cella_c51 { width:140; height:100%; background-color: rgb(186, 216, 247); }.cella_c52 { width:140; height:477px; max-height:477px; background-image: url('vonat2.jpg'); background-repeat: no-repeat; vertical-align: bottom; text-align:right; font-size: 8pt; padding: 3px; }.cella_c6 { width:460; height:100%; background-color: white; vertical-align:top; }.cella_c99 { width:100%; height:20; background-color: white; vertical-align: bottom; text-align:center; } 103. ábra. A weblap alaprészének stílusát megadó CSS-fájl részlete 147

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. 148 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 <img src="ikon_1.gif" width="16" height="16" border="0"> <img src="ikon_2.gif" width="16" height="16" border="0"> <img src="ikon_3.gif" width="16" height="16" border="0"> 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 href="index.html" title="vissza a nyitólapra."> <img src="felirat-erdei.gif" width="460" height="20" border="0"> </a> 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

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 á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. <td class="cella_c4"><img src="felirat-mert.gif"></td> 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 <td class="cella_c3" id="c3"> <table class="tabla_link"> <tr> <td class="cella_bal">erdei vonatok</td> <td><div id="link_1" onmouseover="tegla_be(1)" onmouseout="tegla_ki(1)" onclick="tegla_klikk(1)"> <table class="tabla_jel" cellspacing="0" cellpadding="0"> <tr><td class="cella_jobb"></td></tr></table> </div></td> </tr> <tr> <td class="cella_bal">menetrend</td> <td><div id="link_2" onmouseover="tegla_be(2)" onmouseout="tegla_ki(2)" onclick="tegla_klikk(2)"> <table class="tabla_jel" cellspacing="0" cellpadding="0"> <tr><td class="cella_jobb"></td></tr></table> </div></td> </td> </tr> <tr> <!--... stb. 5 db a fenti blokkokból. --> </tr> </table> 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

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. 152 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 </body> 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 <p> elemből áll, de mégis egyedi felsorolásjelet használunk á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 <ul> és <li> 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 <table id="tabla_l1" class="tabla_uszo" cellspacing="0" cellpadding="0"> <tr> <td> <!-- Minden táblánál növeljük meg a sorszámot az ID-ben! --> <p class="lista_1" onclick="tart(1,1)"> Időszakos</p> <p class="lista_1" onclick="tart(1,2)"> Menetrendi</p> <p class="lista_1" onclick="tart(1,3)"> Csoportoknak</p> <p class="lista_1" onclick="tart(1,4)"> Teherszállításra</p> </td> </tr> </table> 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

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. 154 stilusfo.css részlete.tabla_uszo { width:120; height:76; display:none; border:1px solid blue; background-image: url('arny-s.gif'); font-size:8pt; }.lista_1 { margin-top:2; margin-bottom:2; margin-left:5; cursor:hand; } 109. ábra. A beúszó táblázatokhoz szükséges stíluselemek A stílusjegyek között a legfontosabb a display:none elem, amely megtiltja az adott elem megjelenítését. Eltérően a visiblity:hidden -től, ez nem foglal helyet az elemnek, és erre most nincs is szükségünk. A listánál érdekes elem a hiperhivatkozást utánzó cursor:hand jellemző megadása. A táblázat stílusánál megadott kép különleges lesz, mivel üveghatást kelt, így a mögötte lévő kép részben átlátszódik rajta. Ennek megvalósítására a Grafikai fogásnál térünk ki részletesen. Tipp. Az átlagostól eltérő és szokatlan megoldásokat csak korlátozott mértékben alkalmazzuk a weblapunkon, mert különben elterelik a figyelmet az érdemi tartalomról, vagy elbizonytalanítják a látogatót. Az előzetes ismertetésben arról volt szó, hogy a nyitólapon viszonylag kevés szöveg lesz, ezért nincs mód a kép elhelyezésére, mert nincs akkora magassága a szövegnek, hogy a kép jól mutasson rajta. Viszont kis mennyiségű kép mindig jól mutat egy oldalon, ezért használhatunk a nyitólapon is képet, de az vagy igazodjon a tartalmi terület (C6-os cella) magasságához, vagy annak csak harmada, de inkább negyede legyen, és az elhalványítással futtassuk át a színét. Tipp. A nyitólapon elhelyezhetjük a cégvezető vagy a cég kiemelt termékének a függőleges kiterjedésű képet. Például egy állókép éppen ideális lenne. A nyitólapon ezért két dolgot tehetünk. Ha nem alkalmazunk képet, akkor írjuk át a cella stílusát cella_c5 -ről cella_c51 -re, és akkor a többi oldalon is alkalmazott egyszínű cella lesz a köszöntőszöveg mellett. Ha viszont képet is teszünk bele, akkor a C5-ös cellában el kell helyeznünk egy táblázatot, amely két sorból áll, az első cellája csak egyszínű lesz, a másodikba pedig kerül az imént megszerkesztett kép.

154 Bővebb tartalomhoz Szolid sávos stílus Ahogyan azt már előre elterveztük, a C5-ös cellába kerülő felső cella üresen marad, míg az alsóba alulra és jobbra igazítva kerül az impresszum, vagy más szóval az általános céges elérhetőségi adatok felsorolása. Mivel a kép miatt ez nehezebben lesz olvasható, ezért pontosan olyan jól elbújik az oldalon, amennyire ez szükséges, hiszen ezeket az adatokat nem akarjuk erőteljesen kiemelni, és ezt a célunkat elérjük vele. A weblaprészlethez tartozó stílusokat lásd a 147. oldalon. cella_c5 tartalma <td class="cella_c5"> <table width="100%" height="100%" cellspacing="0" cellpadding="0"> <tr> <td class="cella_c51"></td> </tr> <tr> <td class="cella_c52"> Útvonal: <br> Gyöngyös - Mátrafüred.<br> Forgalmi iroda: Gyöngyös<br> Tel.: <br> (@): <a href="mailto: @erdeivrt.hu"> @erdeivrt.hu</a> </td> </tr> </table> </td> 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. <td class="cella_c6"> <h1>tisztelt Látogató!</h1> <p class="bekezdes">... </p> <p class="bekezdes">... </p> <h2>ismerkedjen meg az újdonságainkkal!</h2> <p class="bekezdes"> : <br> Új csoportos kedvezmények... </p> </td> cella_c6 tartalma 111. ábra. A tartalmi területet adó cella egyszerű bekezdések sorozata 155

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; } á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

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 x- small 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. 158 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 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 ábra. Az üveghatáshoz szükséges kép elkészítése és kipróbálása 159

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. 160 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 á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

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. 162 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. 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 web4.js részlete 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

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. 164 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 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

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 ben elküldöm. Írjon a news@moricznet.hu címre egy levelet, és postafordultával megkapja a weblapot csatolva ábra. Az esemény jellemzőinek kiíratása az új változatban 166

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. 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 web4.js részlete 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

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. 168 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

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. 170 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 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

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

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 á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

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 á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

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 <object classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase= " version=5,0,0,0" width="600" height="40" align="right"> <param name=movie value="felirat-erdei-v.swf"><param name=quality value=high> <embed src="felirat-erdei-v.swf" quality=high pluginspage= " P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="600" height="40"></embed> </object> á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 Helyigény: Logó. (283x100px, ha C1+C3+C4) C2: 492x84px Helyigény: 468x60px reklámcsík. Margó: 12px körben. C3:... x16px C4: C x 80px 16px C4 C5: 155px C6: 465px és tetszőleges magasságú ( ). C7: 155px 775px (=5x155) 155px 620px (=4x155) 620px (=4x155) 124. ábra. A háromoszlopos design felosztási terve 155px 177

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 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 =620 px, ami elfér a 622 pixel szélességű ablakba. A =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 á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 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 á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 os és a 17 -os 179

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: vagy 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 á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

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 á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

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 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 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 ábra. A böngészők eloszlása két webhely kimutatásai alapján

184 A megfelelő stílus megtervezése A Háromoszlopos stílus részegységei 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

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

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

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. 188 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 á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

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

190 A tartalom rendszerezése A Háromoszlopos stílus részegységei 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 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

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

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 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

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. 194 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( <table><... ) 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

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 á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

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 á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

198 JavaScript: A színvizsgáló weblap elkészítése A Háromoszlopos stílus részegységei 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. <html> <head><title>-=# Színteszt #=-</title></head> szinteszt.html <body style="margin:0;"> <table cellspacing="0" cellpadding="0" border="1" width="765" height="100" style="cursor: crosshair;"> <tr> <td id="szin_1" width="33%"></td> <td width="33%" id="szin_4"></td> <td width="33%" id="szin_7"></td> </tr> <tr> <td id="szin_2"></td> <td id="szin_5"></td> <td id="szin_8"></td> </tr> <tr> <td id="szin_3"></td> <td id="szin_6"></td> <td id="szin_9"></td> </tr> </table> <script LANGUAGE="JavaScript" src="web5.js"></script> </body> </html> 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

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

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 = hex(255-b); 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: " + (255-b) + ";"; szin_5.innertext = "R: "+(255-b)+"; G: "+(255-r)+"; B: " + (255-g) + ";"; szin_6.innertext = "R: "+(255-g)+"; G: "+(255-b)+"; B: " + (255-r) + ";"; } var xr=oke(255-r+dx), xg=oke(255-g+dx), xb=oke(255-b+dx); var hr3 = hex(xr), hg3 = hex(xg), hb3 = hex(xb); szin_7.style.backgroundcolor = "#"+hr3+hg3+hb3; szin_8.style.backgroundcolor = "#"+hb3+hr3+hg3; szin_9.style.backgroundcolor = "#"+hg3+hb3+hr3; szin_7.innertext = "R: "+(xr)+"; G: "+(xg)+"; B: " + (xb) + ";"; szin_8.innertext = "R: "+(xb)+"; G: "+(xr)+"; B: " + (xg) + ";"; szin_9.innertext = "R: "+(xg)+"; G: "+(xb)+"; B: " + (xr) + ";"; 201

201 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 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

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 <td background="images/index_r2_c8.jpg"> <iframe src="folyoszoveg.html" frameborder=0 style="width: 100%; height: 100%; margin: 0px;" ></iframe> </td> 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 á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 t 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

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 <html> <body style="margin:3px; overflow:hidden; scrollbar-face-color: white; scrollbar-shadow-color: red; scrollbar-highlight-color: yellow; scrollbar-3dlight-color: white; scrollbar-darkshadow-color: black; scrollbar-track-color: red; scrollbar-arrow-color: blue; background-repeat: no-repeat; background-attachment: fixed; background-image: url(images/index_r2_c8.jpg);"> <script language="javascript"><!-- var ok=true; document.onclick=nem; document.ondblclick=igen; function nem() { ok=false; } function igen() { ok=true; gorgess(); } function gorgess() { window.scrollby(0,1); if (ok) settimeout('gorgess()',100); } gorgess(); //--></script> <p style="font-family: Arial; font-size:0.8em;"> <b> : </b><br><i>nőnapi akció:</i><br> 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! </p>...stb. </body></html> á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 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

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 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: ábra. Egyszerűbb színgyűjtő programok A 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 ábra. Változatosan definiálhatunk színeket és egyéni listákat hozhatunk létre

206 További segédprogramok Helyi menük és HTML-térképek 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

207 További segédprogramok Xtreeme SiteXpert v6.1 Forrás: Honlap: Mérete: 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 á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 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: 1 st Cool Button v5.0 Forrás: Honlap: Mérete: 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 ábra. Néhány egészen speciális alkalmazása e programnak 209

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 á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: Honlap: 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 ábra. Egyszerű párbeszédablak JavaScript alkalmazásához 211

211 További segédprogramok Selteco Menu Maker v3.03 Honlap: 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 á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: Honlap: Mérete: 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

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 á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

214 Selteco Bannershop Gif Animator v4.5 Speciális gombok és feliratok Honlap: Mérete: 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 á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

215 További segédprogramok Xara Webstyle v2.0 és v3.1 Forrás: PC World január... Mérete: 9 MB (v2.0, teljes változat). Honlap: 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 á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

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: Mérete: 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 á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) á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 vagy a 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

219 További segédprogramok Evrsoft 1 st Page 2000 Honlap: Mérete: 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 ábra. Ha minden program szinte egyforma, akkor miért ne használjuk ingyen? A beépített JavaScript programokat itt is a 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

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: 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 á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

221 További segédprogramok Gombkészítés: DeKnop v4.1 Forrás: PC World január... Mérete: 842 kb. (ingyenes) Honlap: (+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 á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 á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 február... Mérete: 726 kb. Honlap: (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

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 á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 október... Mérete: kb Honlap: (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 ben a regisztrációs kódot. 225