ugrás a tartalomhoz

Hogyan készítsünk CSS alapon weboldalakat?

Hojtsy Gábor · 2003. Jún. 6. (P), 19.45
Korábban is fogllakoztunk már a CSS Zen Garden oldallal. A webhely a CSS tervezés sokoldalú lehetőségeit teljesen gyakorlatiasan egy oldal különböző CSS stílusokkal való megjelenésén keresztül mutatja be.

Több okból is érdemes újra elővenni azt az oldalt. Először is azért, mert rengeteg új megjelenéssel bővült, melyeket mindenki saját böngészőjében tesztelhet, felismerve, hogy mi mindenre lehet képes a programja, ha kihasználják a lehetőségeit.

Ezen kívül az oldalról indulva sok hasznos forráshoz is juthatunk.

Bárki küldhet be új megjelenést. A nevezőknek ajánlanak néhány, CSS trükkökkel foglalkozó oldalt, amelyek a legtöbb Internet Explorer bugra is kínálnak megoldást. Itt egyes Zen Garden megjelenések tervezése során szerzett tapasztalatokat leíró oldalak is szerepelnek.

Aki túl nagynak gondolja ezt a mércét, és egyszerűbb példákra vágyik, az meglátogathatja Simon Willison weblogját, melyből korábban szemezgettünk. Mióta hanyagoltuk az ott megjelenő tippeket, rengeteg esettanulmány jelent meg, és számos hasznos tipp. Simon nagyon jó megközelítést választott, ugyanis meglévő oldalak áttervezését mutatja be, életszerű példákkal. Érdekességképpen újabban a saját oldalával való "játszadozásra" is lehetőséget adott így mindenki élőben kipróbálhatja, milyen hatással vannak egyes CSS változtatások az oldalra. Ugyanezzel a módszerrel saját CSS fejlesztéseinket is megkönnyíthetjük, nem kell a szerkesztő és a böngésző között váltogatnunk.

Van aki alaposan kidolgozott kiadványok segítségével tudja elsajátítani az újdonságokat. Nekik egyelőre két könyvet tudok ajánlani (bár sajnos nem saját tapasztalatból). Az egyik a szabványos webtervezés első számú gurujának, az elismert szaktekintély Jeffrey Zeldmannak most megjelent első könyve Designing with web standards címmel. A tartalomjegyzék, az olvasók eddigi visszajelzései, és Jeffrey eddigi munkássága alapján én mindenképpen csak ajánlani tudom ezt a könyvet.

Úgyszintén rendkívül szimpatikus a Sitepoint átal újonnan kiadott HTML Utopia: Designing Without Tables Using CSS című könyv. Ígéretesnek tartom a "próbaolvasásra" letölthető tekintélyes rész áttekintése után. Célja éppen a legfontosabb probléma megválaszolása, a táblázatos megoldások CSS-re váltása. Az egyszerűbb formázások rövid ismertetőkből is könnyen megtanulhatóak, a bonyolult - korábban táblázatokat alkalmazó - elrendezések tervezése és kivitelezése azonban rengeteg időbe telhet tapasztalat nélkül. Éppen ezt a problémát helyezi fókuszba ez a kiadvány.

Sajnos magyar nyelvű cikkeket, vagy könyvet egyelőre nem találtam...
 
1

Hogyan készítsünk CSS alapon weboldalakat?

Anonymous · 2003. Jún. 9. (H), 22.30
Aszem 2 eve foglalkozok honlapok keszitesevel. Tudom, ez nem sok ido, de szerintem eleg jol belejottem a dologba.

Valaki megmagyarazna nekem, hogy ez a tema miert jo?????

Letoltottem az adott honlapot.
Haaaaat. Szerintem ezzel a modszerrel elegge tul van bonyolitva a dolog.
Nem ertem miert nem jo TABLE-t hasznalni tablazat megjelenitesehez.

c.
2

Re: Hogyan készítsünk CSS alapon weboldalakat?

Granc Róbert · 2003. Jún. 10. (K), 08.56
Például:

a) A táblák nem a dizájnra lettek kitalálva. Hogy ma boldog-boldogtalan (mi is) erre használjuk őket, az más téma, de ha meg lehet csinálni szabványosan is, akkor inkább tartsuk magunkat ahhoz.
b) Az oldal elérhető látássérültek részére is, például felolvasó programon keresztül. Persze ahhoz, hogy ők is kényelmesen tudják használni, nem elég egyszerűen a táblák kihagyása, legtöbbször az oldal szöveges részének (tehát nem a megjelenésnek) a felépítésén is változtatni kell (menük, linkek töltődjenek le először, stb.), de a CSS lehetővé teszi a dolgot.
c) A jól megtervezett és kidolgozott CSS alapú honlap mérete a table tagekkel teli honlap méretének töredéke is lehet.
...

Robi
3

Re: Hogyan készítsünk CSS alapon weboldalakat?

Granc Róbert · 2003. Jún. 10. (K), 09.05
d) A honlap dizájnjának váltogatása megoldható szerveroldali sablonrendszer nélkül is.
4

Re: Hogyan készítsünk CSS alapon weboldalakat?

Hojtsy Gábor · 2003. Jún. 10. (K), 09.57
Robi megjegyzésein kívül még annyit mondanék, hogy azért is jó, mert:

a) A szabványoknak szabványos megjelenítése van (lesz), ami azt jelenti, hogy nem kell többféle böngészőre többféle HTML kódot írni (programból küldeni), a CSS szabvány pontosan definiálja, hogy hogyan kell értelmezni a kódot, mi mit jelent benne.

b) A szerver oldali programoknál maradva jó CSS használatával szinte mindegy, hogy az oldal elemeit milyne sorrendben írod ki, és a programodban kiadott HTML kód a megjelenéstől nagyban független lehet. Így később játszi könnyedséggel tudsz megjelenést váltani, nem kell a szerver oldali programjaid mélyére túrni.

b) Általában az egész szerver oldali munka leegyszerűsödik, és a feldolgozás jó részét ("renderelés") a kliens oldalra teszed át. Egy bonyolult HTML táblázatba generálni adatokat szerver oldalon sokkal több kódot, odafigyelést igényel, mint kirakni egy div elemet, aztán a CSS-re bízni az elhelyezését, formázását

c) Nem elhanyagolható szempont, hogy van egy bizonyos megbecsültségi faktora is a szabványos alapú munkának. Azaz bizonyos körlümények között magasabb óradíjjal tudsz dolgozni, ha ezt a modern technológiát használod. Talán a megrendelők egy része is felismeri már, hogy később kevesebb munka lesz az így készült oldalakkal, tehát megéri most többet fizteni érte.
5

Re: Hogyan készítsünk CSS alapon weboldalakat?

Anonymous · 2003. Jún. 11. (Sze), 10.20
Nekem tesztik a dolog.

En is foglalkozom mar egy par eve weblapok tervezesevel, es altalaban ugy szoktam csinalni hogy letesztelem a legtobbet hasznalt bongeszokben (IE, NN 4.xx, NN 6, Opera 6,7.., Mozilla, Konqueror stb) hogy mindegyikben lehetoleg ugyanaz legyen az eredmeny.

Marmost ez az oldal csak IE- ben latszik igazan jol, Operaban hianyzik egy kep, NN 4.xx meg csak a sima szoveg.

Ha esetleg van valami megoldas hogy minden bongeszoben jol latszon akkor en szivesen hasznalnam ezt a dolgot.
6

Re: Hogyan készítsünk CSS alapon weboldalakat?

Hojtsy Gábor · 2003. Jún. 11. (Sze), 20.52
Vannak megoldások persze IE, Opera és NN 4 jobb megjelenítése érdekében. Az említett könyvekben is foglalkoznak ezzel a problémával, és angol oldalakon is sok helyen lehet ilyen dolgokat begyűjteni. Az alap NN 4 megoldás az, hogy @import-al töltöd be a stíluslapot, amit NN4-en kívül minden megért. Ott defniálhatsz mindent, NN 4 számára meg külön stíluslapot tudsz csinálni. Ez persze csak egy tipp a millió közül.