Rugalmas webtervek

Description

Ez a könyv azt szeretné megtanítani, hogy miért is jó a rugalmas tervezés, és hogyan érdemes ezt használni. Elsőre úgy tűnhet, hogy a web a maga rugalmasságával egyszerű módon lehetővé teszi a folyékony vagy nyújtható honlapok kialakítását. Sajnos ez nincs így. Annak ellenére, hogy a rugalmasság valóban szervesen hozzátartozik a világhálóhoz, és sok előnnyel jár a kihasználása, meglehetősen kevés a folyékony és nyújtható webhely. Talán azért van ez így, mert létrehozásuknak megvannak a maga nehézségei, mind a tervezési, mind a fejlesztési szakaszban - ezekhez pedig a legtöbb webfejlesztő nincs hozzászokva. Nincs túl sok irodalom arról, hogy ezekkel a nehézségekkel hogyan is lehet megküzdeni, ez a könyv azonban éppen erről szól. Ez a könyv a következőket szeretné megtanítani: # a rugalmas elrendezési típusok előnyei # hogyan válasszuk ki a megfelelő elrendezési típust és dizájnt a tartalmunk megjelenítéséhez, a felhasználói kör megelégedésére # milyen vizuális elemek alkalmasak a rugalmas tervezéshez, és melyek nem # hogyan állítsuk elő (és hogyan daraboljuk föl) grafikai komponenseinket a rugalmas honlaphoz # az (X)HTML és CSS használata a folyékony, a nyújtható és a hibrid elrendezéshez # hogyan alakítsuk ki a hátteret és a tartalmakat, hogy együttműködjenek a rugalmas elrendezés alkotóelemeivel Köszönetnyilvánítás Tartalomjegyzék Bevezetés Mit fogunk megtanulni (és mit nem)? Kinek érdemes elolvasnia ezt a könyvet? Példák és gyakorlatok A könyvben használt fogalmak 1. fejezet - A rugalmas oldalelrendezés fogalma Az oldalelrendezés típusai A rögzített szélesség: adott pixelszám Nem mindenki használ 16 pontos betűtípust Folyékony oldalelrendezés: illesztés a nézőfelülethez Nyújtható elrendezés: a betűmérethez való illeszkedés Hibrid elrendezések A folyékony és nyújtható oldalelrendezések kihívásai Kitörni a rácsszerkezet mögül: mi van a tervezés kényelmi zónáján túl? Mondjunk búcsút a pixel szintű tökéletességnek! Kicsiben és nagyban is jól mutató arculat tervezése Túlcsorduló sarok kezelése Vízszintes görgetősávok kezelése Rögzített szélességű tartalom rugalmas dobozban Megnő a tervezési és tesztelési idő Böngészőhibák A megfelelő oldalelrendezés kiválasztása webhelyünk számára Rögzített szélesség Folyékony oldalak Nyújtható oldalak 2. fejezet - Hogyan tervezzünk rugalmas oldalelrendezéseket? A rugalmas oldalelrendezések tervezési alapszabályai Kerüljük el a szöveget tartalmazó egységek magasságának rögzítését! Kerüljük a szabálytalan alakzatokat Kerüljük el a nyújthatatlan képhez illeszkedő szövegeket Kerüljük el a rögzített szélességű, tartalommal teljesen kitöltött felületet Kerüljük az oszlopok vízszintes igazítását Törekedjünk olyan képek használatára, amelyek eredeti méretükön túl is nagyíthatóak Törekedjünk megfelelő térköz kialakítására a maximális szélességen túl Törekedjünk arra, hogy az egymás melletti elemek több sorba törhetőek legyenek Ilyen volt, olyan lett: adott egy inkompatibilis, rögzített szélességű látványterv 3. fejezet - A látványterv előkészítése a megvalósításhoz A tervvázlat kialakítása A rajzvászon méretének megválasztása Rétegek használata Visszafordítható szerkesztési módszerek A képek nagyméretű, eredeti változatainak elmentése Grafikai szeletelés a rugalmas arculattervhez Külön állományok létrehozása a szeleteléshez Rugalmas dobozok darabjainak szeletelése Készítsük elő a Beechwood Animal Shelter tervvázlatát megvalásításra Navigáció a tervvázlatban A fejléc szeleteinek kialakítása A nyitólap szeleteinek kialakítása A "Programok" oldalhoz tartozó szeletek kialakítása A képek exportálása 4. fejezet - Folyékony lapszerkezetek építése A lap előkészítése a CSS használatához A weblapok készítésének univerzális lépései Lapok készítése a fejezetben előforduló példákhoz Folyékony oszlopok létrehozása lebegő elemek segítségével Hasábok és alkalmazkodó margók létrehozása lebegő objektumokkal Oszlopok létrehozása a teljes tartalom lebegtetésével Oszlopok létrehozása lebegtetéssel és negatív margókkal A teljes szélességnél kisebb terjedelem használata a teljes lapszerkezetre A hasábok szélességének változtatása Oldalsó margók meghatározása Százalékos szélesség megadása a befoglaló elemre Építészeti gyakorlat: hozzuk létre az állatmenhely webhelyének belső lapjait A lap előkészítése Az alapstílusok létrehozása A kéthasábos szerkezet kialakítása A két oszlop szélességének csökkentése 5. fejezet - Nyújtható lapszerkezetek kialakítása A méretek kifejezése em-ben Mi is az az em? Em-ben megadott mértékek egymásba ágyazása Az em-ben megadott méretek kiválasztása Nyújtható oszlopok létrehozása lebegő elemek segítségével Emlékeztető a fejezetben szereplő kódok alapszerkezetéről Hasábok létrehozása lebegő elemek és megfelelő margók segítségével A hasábok létrehozása minden elem lebegtetésével Építészeti gyakorlat: az állatmenhely webhelyének további finomítása újabb szerkezeti elemekkel A lap előkészítése Az alapstílusok létrehozása A hasábok létrehozása 6. fejezet - A flexibilitás korlátozásának módszerei Hibrid lapszerkezetek készítése Rögzített szélességű oldalsávok folyékony középső hasábbal Rögzített szélességű oldalsávok nyújtható középső hasábbal Legkisebb és legnagyobb szélesség meghatározása A felhasználók, a lapterv és a tartalom védelme A min-width és max-width értékek helyes megválasztása A min-width és max-width tulajdonságok használata Az Internet Explorer 6-os és korábbi verzióival kapcsolatos inkompatibilitás A hajlékonyság korlátozásának alternatív módszerei Az overflow tulajdonság használata A hasábok leesésének engedélyezése Építészeti gyakorlat: a szélesség korlátozása az állatmenhely weblapjain A ,.Programok" oldal módosítása A kezdőlap módosítása 7. fejezet - Térközök A megfelelő mértékegységek megválasztása A térközök megadása folyékony lapszerkezeteknél Térközök megadása nyújtható lapszerkezetek esetén A különböző mértékegységek keverése Margó és térkitöltés rendelése szélesség nélküli div-ekhez Margó és térkitöltés rendelése a befoglaló elem helyett a tartalomhoz Puffer div-ek használata Építészeti gyakorlat: térközök kialakítása a kezdőlapon és a belső oldalakon Térközök a fejléc körül Térközök kialakítása a láblécben A margók összeolvasztásának kezelése Térközök kialakítása a Programs lap tartalmában Térközök kialakítása a nyitóoldal tartalmán belül 8. fejezet - Háttérképek, háttérszín megadása Áttűnő háttérképek kialakítása Színátmenetek létrehozása Lekerekített sarkok létrehozása Ívelt élek létrehozása "Azonos magasságú oszlopok" létrehozása Áloszlopos megoldás rögzített/folyékony hibrid oldalakhoz Áloszlopok teljesen folyékony oldalelrendezésekhez Áloszlopos megoldások nyújtható oldalelrendezésekhez Építészeti gyakorlat: háttér megadása a nyitólaphoz és a belső oldalakhoz A háttér és a színek kialakítása oldalaink fejlécében A háttér kialakítása a "Programok" oldalon A nyitólap hátterének beállítása 9. fejezet - Rugalmas képek készítése A képek megjelenítési felületének dinamikus változtatása Az oldalmérethez igazodó méretű képek A képek egy részének eltakarása vagy megjelenítése Egymásra csúszó képkompozíciók (Sliding Composite Images) létrehozása Rugalmas képgyűjtemények létrehozása Áruminta bélyegképlisták Bélyegkép-galériák Építészeti gyakorlat: rugalmas képek felvitele a nyitólapra Változó kivágású bannerkép kialakítása Áruminta bélyegképlista kialakítása Tárgymutató Források, köszönetnyilvánítás Ábrák Fényképek