1, Megnézzük a grafikát és megtervezzük az összerakáshoz szükséges blokkokat. Megkeressük, mi a fix elem és mi fog ismétlődni.

Átírás

1 A kész Gimppel rajzolt grafikát összerakjuk CSS és XHTML sablonként. Az előzményekből egy állományra lesz szükség a veglegesweblap-sablon.xcf állományra. A fájlt kapjon egy m_ (m_vegleges-weblap-sablon.xcf) előtagot, később erről már tudni fogjuk, mire is használtuk előzőleg. A másik jelentősége a lépésének az, hogy az eredeti grafikán nem állítjuk el a segédvonalakt. Weboldal grafika készítés elméleti síkon A webgrafika gyakorlati megvalósítása Táblás (table/tbody/tr/td) design előnyei a layeres (div) megjelenítéssel szemben: Mindegyik táblában egy jó pohár tej van, csak hátrányt szenvedünk, ha ezt használjuk. Viccet félretéve ez a korszak már lejárt, használjuk adatbázis jellegű adatok megjelenítésére. A megnyitott állományunkból töröljük a régi segédvonalakt, mert nagy valószínűséggel most nem fogjuk tudni használni mindent. (Menü: Kép/segédvonalak/összes segédvonal törlése) 1, Megnézzük a grafikát és megtervezzük az összerakáshoz szükséges blokkokat. Megkeressük, mi a fix elem és mi fog ismétlődni. Több módon is összerakhatnánk, még is az egyszerűbb 3 elemből és némi pozíciónállásból álló változat mellett döntöttem. Előnyök: Gyorsan látjuk a végterméket. Nem egy bonyolult, sok darabból álló változat. Hátrányok:

2 A grafikai elemek picit nagyok lesznek. A dobozok pozíciójával el lehet szórakozni. További hátrányok: A lábléc terültét tükörképpel növeltem. A vágási felületek amik a képen látszanak: Fix elem: felső fejléc szakasz, ami a menü sávot is magában foglalja. Ismétlődő szakasz: ez fog nyúlni a tartalom függvényébe Fix elem: alsó lábléc szakasz A sötéttel jelölt részeket szerkeszthetővé tesszük. 2, Behúzkodjuk a segédvonalakat, amik mellet kivágjuk a képelemeket. Ha megvagyunk vele, jöhet egy trükk. Én beállítok magamnak mindig gyorsbillentyűket. (Menü: GIMP eszköztár ablak / fájl/ gyorsbillentyűk/szerkesztés) Látható másolása: ALT+Q Beillesztés újként ALT+W. Ha ez megvan csak kijelölöm a területet majd nyomok egy ALT+Q és ALT+W kombinációt. Ezután új ablakban jelenik meg a kívánt elem, elmentem, majd bezárom az ablakot. Grafika elemek mentéséről: Az képelemek tömörítését úgy válasszuk meg, hogy a lehető legkisebb fájlméretet eredményezze, de a kép még szalonképes maradjon. (képminőség: 75-85% legyen). A grafika 52 KB-ra sikeredett.

3 A túlzott optimalizálás tünetei: Pixeles lesz a kép A kép elemek nem illeszkednek A képelemek és a háttér színe nem egyezik Elvileg a rajzoló programot be is zárhatjuk, jöhet az összerakás fázisa. Nagyvonalakban: A 2 nagy elem háttérként kerül a fejléc és lábléc CSS DIV elembe. A tartalmi részben egy ismétlődő háttér kerül, ami a szövegeknek megfelelően lefelé nyújtja az oldalsávot és a tartalmi részt. A többit elemet pedig pozíció alapján helyeztük el. Stíluslap elhelyezése, lehetőségünk van magába az adott HTML fájlban elhelyezni (lásd: index_beagyazott_stiluslap.html), vagy külső fájlból történő behívásra (lásd: index.html). Az első esetében a head és /head tagok közé kell beszúrni. 1. <style type= text/css > 2. <! 3. /*stílus definíciók helye*/ 4. > 5. </style> A külső fájlból történő beemelés, média típusok: (all, aural, braille, hand- held, print, projection, screen, tty, tv ) all= mind print = printer screen=képernyő, igazából ezt ként használni, de mivel nincs más ezért mindenre ráhúzzuk. Külső fájlból történő beágyazás amit szintén a head és /head közé kell biggyeszteni: 1. <link rel= stylesheet type= text/css href= style.css media= all /> Mivel a tartalmi rész 967 pixel szélles grafikánk gyakorlatilag 1 elemből épül fel, ezért a tartalomnak és oldalsávnak kellet még 2 doboz egymás mellet. Az ismétlődő háttér az egész oldal (id= oldal ) alatt végigfut, esetenként (fejléc, lábléc háttér elemnél) nem látszik mivel egy felette lévő réteg kitakarja. 1. <div id= oldal > 2. <div id= fejlec > 3. <div class= logo > <h1>#lorem co.</h1> </div> 4. <div class= jobb_fejlec >#jobb fejlec</div> 5. </div> 6. <div id= tartalom > 7. <div id= bal >#bal, tartalom</div> 8. <div class= menu >#menu ul,li</div> 9. <div class= laptetejen >#lap teteje</div> 10. <div id= jobb >#jobb</div> 11. </div> 12. <div id= lablec > 13. <div id= lablec_bal > 14. <div class= lapaljan >#lap alja</div> 15. <div class= menu_bottom >#menu ul,li</div> 16. </div> 17. <div id= lablec_jobb >#menu_also</div> 18. <div class= tukor >#tukor</div> 19. </div> 20. </div> Mit jelentenek az alábbi dolgok:

4 Mit jelentenek az alábbi dolgok: 1. div id= tartalom ha megnézzük a CSS (style.css fájl) információkat akkor találunk egy ilyen bejegyzést: 1. #tartalom {} az id= tartalom -mal azonosítva stílus információt adunk az adott id-vel rendelkező elemnek 1. class= tukor többször felhasználható osztály definiáltunk a CSS fájlban.tukor néven és erre hivatkozunk. A böngészők ezt értelmezik és adott elemre alkalmazzák a stílus információkat A id= bal és id= jobb elemek úsztatva vannak balra, így kerülnek egymás mellé (float:left; css paraméterek segítségével). Az úsztatás következménye az, hogy az alattuk lévő elemek is hasonlóan szeretnének viselkedni. Tehát ha a id= lablec elem sítlus információi között találunk egy ilyet clear:both; ez megszünteti az úsztatást így visszaáll oldal szerkesztése a megszokott formába. Elég száraz volna méretekkel telebombázni a leírást, ráadásul az ember hamar elveszti a fonalat még tapasztalt CSS bajnokként is, inkább javaslom a forrás fájlok nézegetését. A sablon letölthető és az oldal irányelveinek megfelelően szabadon felhasználható. A grafikai tervezés, megvalósítás, CSS és XHTML sablon készítés nagyjából 3 könyvben lehetne leírni, és ez még csak az elmélet. A gyakorlatban rengeteg rutin kell ahhoz, hogy tényleg minden böngészőben ugyanazt a képet kapjuk (tényleg igaz, a gyakorlat teszi a mestert). Jelen esetben Ubuntu Linuxon készült a sablon, Firefox 3.0 böngészővel tesztelve, és csak végén néztem meg IE-6-ban és Operában. Szerencsémre működött módosítás nélkül. Egy ilyen sablon elkészülési ideje nagyjából 3-4 óra lehetett, cseresznyefa koromban még 2 napot is igényelt volna a folyamat. Néhány megfigyelés, javaslat: Ha a grafika Firefoxban jó, nagy valószínűséggel IE-7 -ben is hasonló képet fogunk látni Először Firefox-hoz igazodva rakjuk össze a designt majd ezután hegesszük meg IE-6,IE-7-hez, Operához. Operában általában jól jelennek meg az oldalak Ha már nem szerkesztjük a CSS fájlt tömörítsük le és úgy használjuk opendir.hu/css_tomorito A grafikai elemek méretét minimalizáljuk Táblás designt csak ott használjunk ahol indokolt, adatbázis jellegű adatok megjelenítésére. Méretek: Egyéb: CSS fájl ~2 KB HTML fájl ~2 KB Képelemek 58 KB Összesen: 62 KB információt kell letölteni egy alkalommal. (később lehet ennél kevesebbet)

5 Sablon Múködj itt CSS Múködj itt HTML múködj itt Letöltések, csatolva Felhasználhatóság az oldal irányelveinek megfelelően. nincs kapcsolódó bejegyzés. Téma: Webalkalmazás fejlesztés Forrás: Szerző: ArtH2O Erdeti URL: