Miért butaság a táblázatos szerkezet:

a probléma körülírása és a felkínált megoldás

A táblázat a HTML-ben egy ok miatt létezett: hogy adatokat jelenítsen meg. Később lehetővé vált a border="0" használatával, hogy egy ráCSSzerkezet segítségével helyezzünk el képeket és szövegeket az oldalakon. Mai napig még mindig a táblázatos szerkesztési stílus a meghatározó elv a gazdag látványvilágú oldalak tervezésénél, ami manapság már gátolja a jobb, hozzáférhetőbb, rugalmasabb és működőképesebb oldalak készítését. Fedezze fel, honnan ered a probléma forrása, és sajátítsa el a megoldásokat a teljesen standard és táblázat nélküli weblap készítéséhez.

Kapja el a főnökét

Vannak öltönyösök a hallgatóság soraiban? Vagy itt vannak a főnökeik, de épp egy másik gyűlésen vesznek részt? Gyerünk, kapják el őket. Ők azok akiknek igazán fontos tudniuk, hogyan lehet pénzt megtakarítani a Web standardok használatával.

Áttekintés: Miért jó ez nekem?

Bevezetjük egy olyan munkamódszerbe ami:

• az oldalai gyorsabb letöltődését eredményezi
• csökkenti a tárhely-költségeket
• az újratervezést hatékonyabbá és kevésbé költségessé teszi
• egységes kontrollt ad az összes oldal megjelenítésében
• jobb keresőeredményeket produkál
• elérhetőbbé teszi az oldalait a látogatók és böngészőprogramok számára
• versenyelőnyhöz juttatja (biztosabb munkahely), mivel egyre többen állnak át Web standardok használatára.

Arról is lesz szó, hogyan szerkesszük meg oldalainkat a Cascading Style Sheets (CSS) használatával, ami eddigi gondolkodásától némileg eltérő szemléletet igényel a tartalomról és forráskódról.

Király oldalak: egymásba ékelt táblázatok és távtartó GIF-ek

Kezdetben az Internet egy közvetítő eszköz volt, és az akadémikusok, kutatók és a hadsereg információ-cseréjét szolgálta. Mindazonáltal nem kellett sok idő a vállalkozó szellemű látnokoknak, hogy rájöjjenek, ez az új médium ideális arra, hogy segítségével eladjunk bármit, kezdve a friss termékektől és a kutyakajától a használtautókon át a sport közvetítésekig.

A korai Internet (mint bármelyik médium kezdeti szakaszában) esztétikailag ‘megmunkálatlan’ volt (és nem valami csábító a vásárlók számára) egészen addig amíg David Siegel megjelentette átütő sikerű könyvét, ami nagyszerű megoldásokat kínált az akkori W3C specifikációk határain belül és böngészőprogramok tudásához képest 1997 körül. (a Netscape 2, 3-ról van szó)

Ezek a megoldások olyan brilliánsak voltak, hogy gyakorlatilag a mai napig is elterjedt módszerei a Weboldal szerkesztésnek.

A gond a táblázatok használatával:

• Keveredik a kinézet és a tartalom.
  • Ez szükségtelenül naggyá teszi az oldalak méretét, mivel a felhasználónak minden egyes megnézett oldalon le kell töltenie ezeket a stíluselemeket.
  • A sávszélesség nem ingyenes.
• Az újjászerkesztést rendkívül munkaigényessé (és költségessé) teszi.
• Ugyanakkor szinte ellehetetleníti (és megint csak költségessé teszi) az egységes látvány kialakítását a teljes oldalon.
• A táblázat alapú oldalak mindemellett kevésbé elérhetőek csökkent képességű látogatók és mobiltelefon, illetve PDA felhasználók számára.

A megváltás kéznél van

A modern böngészők egyre jobbak a Web standardok megjelenítésében, szóval nekünk soha többé nem kell ezeket az ősi módszereket használnunk.

Ahelyett, hogy táblázatokat illesztenénk táblázatokba, és távtartó GIF-ekkel töltenénk ki az üres cellákat, sokkal egyszerűbb struktúrált forráskódot és CSS-t használnunk szebbnél szebb oldalak készítéséhez, amelyek gyorsabban betöltődnek, könnyebben újjászerkeszthetőek és mindenki számára sokkalta elérhetőbbek.

A megoldás: CSS és strukturált forráskód

Ha strukturált kódot használunk a HTML dokumentumainkban és CSS használatával szerkesztjük az oldalaink kinézetét, akkor az aktuális tartalom elkülöníthető a stíluselemektől.

Ez jónéhány előnnyel rendelkezik a táblázatokhoz képest...

Az újjászerkesztés könnyebb és olcsóbb

Ha kivesszük a stíluselemeket a forráskódból, akkor az új stílus megszerkesztése sokkal kevésbé munkaigényes és költséges lesz. Az oldalak kinézetének megváltoztatásához csak a style sheet-eket ("stíluslapokat") kell egyedül átírni; magukhoz az oldalakhoz hozzá sem kell nyúlni.

Például, nézze meg a CSS Zen Garden-t, vagy a stílusváltót Eric Meyer oldalán. Vagy tanuljon meg még többet, és nézze meg az Alternative Style-t Paul Sowden-től.

A sávszélesség nem ingyenes

A Web standardok használata csökkenti az oldal file-jainak méretét, mivel a felhasználóknak nem kell a stíluselemeket letölteniük minden egyes meglátogatott oldallal. A Style sheets - ami a stílus(oka)t tartalmazza - a böngésző cache-ében marad.

A csökkentett file méret gyorsabb töltődést és alacsonyabb tárhely költséget jelent.

Hé, ezek az oldalak mind ugyanúgy néznek ki!

A Web standardok használata különösen könnyűvé teszi az egységes látvány fenntartását az összes oldalon. Mivel az oldalak ugyanazt a CSS dokumentumot használják a megjelenítésükhöz, mindegyikőjük ugyanúgy fog kinézni.

Ez erősíti a profilját és a honlapot használhatóbbá teszi.

Írd le egyszer, használd bárhol, mindenki számára

A Web standardok használata elérhetőbbé teszi az oldalt azon felhasználók számára, akik csökkent képességűek, vagy mobiltelefonon illetve PDA-n böngésznek.

A látogatóknak, akik képernyő olvasókat használnak (illetve akiknek lassú internetkapcsolatuk van) nem kell átvergődniük számtalan táblázat cellán és helykitöltőn, hogy az oldalaink aktuális tartalmát elérjék.

Más szóval, a tartalom és a megjelenítés elkülönítése az oldal eszközfüggetlenségét eredményezi.

A Google vak

Ha már az elérhetőségnél tartunk, a forráskód minimalizálása és header tag-ek megfelelő használata elősegíti a keresőkben való magasabb találati helyezést.

A kód-tartalom arány csökkentése, kulCSSzavak használata a header tag-ekben, cím képek aktuális szöveggel való felcserélése mind a keresőkben való jobb eredményt szolgálják.

Még mindig használhatsz táblázatokat, ha szükséges, csak ne túl sokat belőlük

Ez egy elfogadható megközelítést ad a 4-es verziójú böngészők használatához kötött felhasználóknak (és főnököknek) arról, mit lát a világ másik része (addig míg el nem tűnnek).

Egy kellemesen jól kinéző táblázat

		Lorem ipsum dolor sit amet, consectetuer adipiscing elit.				Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
		Suscipit lobortis nisl ut aliquip ex ea commodo consequat.				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. • At vero eros et accumsan et iusto odio dignissim qui blandit • Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
		Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.				Diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. • Epsum factorial non deposit quid pro quo hic escorol. • Olypian quantels et gomilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.
		Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed. • Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. • Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore.

Nézzünk be a felszín alá

		Hát ez tényleg sokkal egyszerűbben is megcsinálható.				Találd ki, mennyi kód van ebben a kis táblázatban? 13.7k. 17 sor és 9 oszlop van benne. És ne is említsük a rengeteg helykitöltő gif-et.
		Igazán túl sok cella és helykitöltő van itt.				És az összes pontozott szegély a cellák background-jaként van megadva, ami nem lesz valid. • Egy beszúrt táblázat? Minek? • Lista készítéséhez? Viccelsz?
		Az egész felépíthető 8 cellából és 4 CSS szabályból.				Most komolyan. 8 cella és 4 CSS szabály, ez minden. • Jaj, ne. Még egy táblázat listának álcázva. • Listaként kódold a listádat, a többit bízd a CSS-re.
		Egy szabály kell a <table>-nek, egy a <td>-nek, egy az <ul>-nek és egy a <li>-nek.				Ha ezzel megvagy, akkor király leszel. • Ez sokkal jobb, mint 8-cal több felesleges cellát használnál hamis listákhoz, ami végül is sokkal kevésbé hozzáférhető. • Nagyszerű! Az utolsó lista utánzat.

A kód ami a táblázatot megjeleníti:

table{ margin:3px; padding:2px; border:solid 2px blue }

td{ padding:2px; border-style: solid; border-width: 1px; border-color:gray gray silver silver }

Ez már sokkal jobb

És itt a CS kód, amivel megszabadultunk a sok maszlagtól:

table{ border-bottom:1px dotted fuchsia; border-left:1px dotted fuchsia }

td{ padding:11px 20px 20px 11px; border-top:1px dotted fuchsia; border-right:1px dotted fuchsia }

ul { margin-top:10px; margin-bottom:10px; margin-left:0; padding-left:1em }

li{ margin-bottom:10px }

Foglaljuk össze a transitional design elemeit.

Használj margin-t és padding-ot a távtartó gif-ek és fölösleges cellák helyett.

Link-et és @import-ot a stílusokhoz. Az elsőt a elavult böngészőkhöz, a másodikat a modernekhez.

<link href="basic.css" rel="stylesheet" type="text/css">

<style type="text/css" media="screen"><!--
@import url(modern.css) screen;
--></style>

Példák a való életből:

• Santa Cruz Montessori School
• k10k
• Fox Searchlight Pictures

De várj, van itt még valami:

További információkért nézd meg az első fejezetet Eric Meyer on CSS oldalán, és még többet Jeffrey Zeldman Designing with Web Standards című írásában.

CSS stílus: a jövő eljött.

A nagy többség által használt böngészők jól támogatják a CSS-t. Mindnek vannak fura szokásaik, de ha egyszer már használni fogod őket, tudsz majd velük dolgozni.

A CSS programozás egyszerű. Még egy olyan valakinek is, mint én, akinek a JavaScript olyan mint a káromkodás:

if(links[x].length > 0);{
for (y=0; y<links[x].length; y++) {

Minden CSS szabálynak van egy szelektor-a és egy deklaráció-ja. A deklaráció tulajdonság-ból és érték-ből áll. Azok a tulajdonságok amelyek több szóból állnak, kötőjellel válsztandók el.

body {margin:0; padding:0}

.related {float:right; width: 15em; margin-left:1em; margin-bottom:1em; color:blue}

#footer {color:gray; font-size:0.6em; line-height: 1.2em; background-color:white; margin:0}

Struktúrált kód: kódold ahogy érted, értsd ahogy kódolod.

Míg az aktuális CSS-t megírni könnyű, addig a kinézetet megszerkeszteni CSS-el már teljesen más gondolkodásmódot igényel, mint amit valószínűleg a többségünk használt eddig.

Ahelyett hogy úgy gondolkodnánk, hogy "ez jön ide az meg oda" mialatt egy oldal kinézetén dolgozunk, inkább az információk fajtáira és szerkezetére gondoljunk.

A legfontosabb címnek <h1> tag-et adjunk, az alcímnek <h2>-t, stb. És a paragrafus az paragrafus legyen.

Ez az amit "struktúrált" és "jelentéstani" programozásnak hívunk.

Ahelyett, hogy a tartalmat táblázatok celláiba tennéd, rendezd div elemekbe. Adj a div -ednek egy id-t vagy class-t, ami az adott elem funkcióját és/vagy tartalmát írja le, a megjelenítése helyett.

Kerüld el a <b>ed and <br>eakfast kódolást

Gondolj arra, miért akarod hogy egy elem úgy nézzen ki, ahogy, és mit jelent ez? A forráskód tudja és kell is hogy közvetítse az értelmét, még annak is, aki nem látja az oldalad. A semantic markup elérhetőbbé teszi oldalad mindenki számára, beleértve a keresőket is.

Amikor dőlt betűt használsz, az azért van, mert kiemelsz valamit, <em>, vagy mert az egy könyv címe, <cite>?

Ha valami kövér, akkor annak <strong>-nak kell lennie.

Ha sortörést akarsz valami után, akkor azt header-ként kell írni. Ha nem header, akkor az egy class része, ami az egész oldaladon előfordul? Ha erről van szó, akkor használj CSS-t <br> helyett.

.foo {display:block}

Ha többre vagy kíváncsi, olvasd el a Bed and BReakfast markup (B&BR) című írást Tantek Çelik tollából.

Mi a Navigáció?

Gondolj bele: a menüd egy számozatlan listája a linkeknek.

Tedd őket <ul> tag-ek közé.

• link1
• link2
• link3
• link4
• link5

Vízszintes navigáció

Használhatjuk a CSS-t a menük kinézetének szabályozására.

A display: inline használatával horizontális menüt készíthetünk.

Itt a kód amit ehhez használtunk:

#nav1{
margin-top:1em;
margin-bottom:0.5em;
}

#nav1 ul{
background-color:silver;
text-align:center;
margin-left:0;
padding-left:0;
border-bottom:1px solid gray
}

#nav1 li{
list-style-type:none;
padding:0.25em 1em;
border-left:1px solid white;
display: inline
}

#nav1 li:first-child{
border:none;
}

Vertikális navigáció

Ennek a kódja:

#nav2 {
background-color:silver;
border:solid 1px gray;
width: 8em
}

#nav2 ul{
list-style-type:none;
margin:0;
padding:0;
border:none
}

#nav2 li{
margin:0;
padding:0.25em 0.5em 0.25em 1em;
border-top:1px solid gray;
width: 100%;
display: block
}

html>body #nav2 li{
width: auto;
}

#nav2 li:first-child{
border:none
}

Bővebb információért olvasd el Mark Newhouse's cikkét, a Taming lists-et, az A List Apart -on, és a "Styling lists"-et a CSS-Discuss oldalon.

Amit a táblázat jobban tud, mint a CSS

Vannak bizonyos esetek, amikor a táblázat jobban működik, mint a CSS.

Például mondjuk legyen egy fekete oldalsó menünk, ami a tartalom teljes magasságáig ér. Táblázattal ez gyerekjáték: csak fekete háttérszínt kell annak a <td>-nek beállítani.

Ezt meg tudjuk CSS-sel is csinálni, csak egy merőben más gondolkodásmódot igényel.

Ha fekete hátteret adunk a menünk div-jének, akkor a feketeség csak addig fog tartani, amíg a menü tartalma ér. Az oldalak többségénel a tartalom hosszabb mint a navigáció, tehát ez nem jó megoldás.

Ehelyett megcsinálhatjuk azt, hogy egy fekete gif-el kirakjuk a tartalom hátterét és megfelelő left padding-ot adunk neki, de ez meg akkor nem fog működni, ha a navigáció hosszabb a tartalomnál.

Úgy is megbírkózhatunk problémával, hogy a fekete gif-et a <body>, hátterének állítjuk be, ami egészen addig működik, amíg nem akarunk másik képet a <body>.-nak.

Vagy, becsomagolhatjuk a tartalmunkat egy "wrapper" div-be és abban rakjuk ki a gif-eket háttérként. Mindenestre, ez fölösleges kód hozzáadása az oldalunkhoz.

És, természetesen, a képkirakás nem fog működni akkor, ha azt akarjuk, hogy a navigáció szélessége rugalmasan változzon.

Ahogy említettük, vannak dolgok, amiket a táblázat jobban tud, mint a CSS. De a végén fel kell tennünk a kérdést magunknak: megéri-e adatok helyett a sok táblázattal járó cók-mók használata?

Átállás táblázat trükkökről Web standardokra: Áttekintés - A lényeg

Először is, egy átállási stratégiát kell válsztani. Az egész oldalt egyben akarod átállítani, vagy külön szekciónként egyesével.

Válaszd ki azokat a részlegeket és oldalakat, amelyek a legtöbbet fogják profitálni az átállásból. Főoldalak, termékismertetők, hasonló oldalak jó kiindulópontok.

Az információ-tartalmak típusait azonosítsd és csoportosítsd az egész oldalon:

• Termék információk
• Termék árak
• Céginformációk
• Portfolió
• Szolgáltatások
• Befeketési információk
• Bevásárlókocsi
• Fórumok
• és így tovább

Oszd fel az oldalad

Mikor végre megértetted az oldalad tartalmának típusait, itt az idő, hogy az aloldalakat logikus részekre oszd fel.

• Főmenü
• Almenü
• Címek, lábjegyzetek
• Tartalom
• Kapcsolódó információk
• Egyéb

Azonosítsd a táblázataid szerkezetében a beillesztett elemeket és üres távtartókat, szegélyeket (ezeket div tag-ekkel vagy sokkal egyszerűbb táblázat-struktúrával váltjuk fel).

Nézd meg a forráskódod

Amikor azonosítottad az oldalad szerkezetét, itt az ideje a felszín alá nézni, és megkeresni a megjelenítés elemeit, amiket struktúrált kóddal fogunk felcserélni.

• Az egyszerűség és helyesség kedvéért szabadulj meg a <font> tag-ektől és távtartó gif-ektől!
• Ugyanígy tégy a <b> és <br> tag-ekkel is.
• Feljtsd el a táblázatok megjelenítésének elemeit (bgcolor, background, és hasonlók).
• Cseréld fel a teljesen CSS alapú megjelenítést (mint például <span class="header">) megfelelő struktúrális kóddal. (<h1>) (Tantek Çelik részletesen tárgyalja ezt a cikkében, az A Touch of Class-ban.)

Váltsd fel a megjelenítés elemeit struktúrált kóddal

Használhatod a keres és kicserél metódust, de a legkönnyeb módszer talán, ha nézed az oldalad egy böngészőben, és kimásolod a szövegeket a HTML szerkesztődbe.

Gondolkodj az oldalad szerkezetén! Pusztán lecserélni a <b> tag-eket <strong> tag-ekkel nem elég.

Melyik a legfontosabb cím? Jelöld <h1>-el. Az alcímeket pedig <h2>-vel és így tovább. A paragrafusokat pedig <p>-vel. A navigációt számozatlan listával készítsd.

Válassz DOCTYPE-ot, és használd. (XHTML Transitional -t ajánlunk, hacsak nem vagy megrögzött, mert akkor hajrá, használj XHTML Strict -et.)

Oszd fel az oldalad logikus div-ekre

A főmenüt tedd egy div-be mainnav id-vel; az almenüt pedig subnav id-vel vagy class-szal, a lábjegyzetet <div id="footer">-be, a tartalmat pedig rendezd <div id="content">-be.

Ez nem tűnik valami soknak most, de majd ha elkezded hozzáadogatni a szabályokat a style sheets-be, a dolgok egyszerűbben és gyorsabban fognak menni.

Itt az ideje megírni a CSS-ed

Az elején minden div-nek adj szegélyt, például: div {border:1px dotted gray; padding:.5em}. Ez segíteni fog, hogy lásd melyikük hol kezdődik és végződik, és hogy van-e beillesztés vagy nincs. (Azonban nem szabad elfelejteni, hogy a fejlesztés közben használt időleges div-ek keretének törlése után el fog tolódni minden 1px-el. Tehát ezt figyelembe kell vennünk, amikor kereteket használunk a szerkesztéskor. - a ford.)

Először az elem kiválasztók CSS-ét írd meg. (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, stb.)

Használj összefüggő és leszármaztatott kiválasztókat, ha lehet. Ez tisztábban fogja tartani a kódod. Például a #subnav li{border:1px solid black; padding:.5em; display: inline} csak azokat a list elemeket érinti, amik a subnav div-ben fordulnak elő.

Teszteld az oldalt annyi fajta böngészőben, amennyiben csak tudod, és a barátaidat is kérd meg, hogy próbálják ki az övéikben.

Példa oldalak, amik CSS -t használnak

• CSS Zen Garden
• Adobe Studio
• Wired News
• ESPN
• Quark
• Inc.com
• PGA Open Championship
• phish.com
• CSS Edge

Olvass el mindent a témáról

Nyilvánvalóan nem tudunk elmondani mindent amit tudni kell a CSS-ről egy óra alatt, de ezek a könyvek segíthetnek a Web standardok megértésében, és hogy az oldalaid gyorsabbak, átláthatóbbak és egyszerűbbek legyenek:

• Eric Meyer on CSS: Mastering the Language of Web Design; Eric Meyer; New Riders; 2002
• Designing with Web Standards; Jeffrey Zeldman; New Riders; 2003
• Cascading Style Sheets: Separating Content from Presentation; Owen Briggs, Steven Champeon, Eric Costello, and Matt Patterson; glasshaus; 2002
• SAMS Teach Yourself CSS in 24 Hours; Kynn Bartlett; SAMS; 2002
• Cascading Style Sheets: Designing for the Web; Hakon Wium Lee and Bert Bos; Addison-Wesley Pub Co; 1999
• Cascading Style Sheets: The Definitive Guide; Eric Meyer; O'Reilly & Associates; 2000

Papír? Nekünk nem kell ócska papír: online források

CSS-Discuss

• mailing list: Aktív. hasznos.
• Wiki: "Egyéb dolgok mellett a wiki egy hosszú távú gyűjtőhelyként szolgál a résztvevő tagok számára." Meg akarsz valamit értetni a Windows Internet Explorer-ével de más böngészőkkel jobban meg tudod oldani a problémád? Itt megtalálod a válaszokat a kérdéseidre.
• Archives: Van egy kis gondod a CSS-sel, ami megzavart kicsit? Ne aggódj, másvalaki már találkozott biztosan ezzel a feladattal és megtalálta a segítséget rá. Itt járj utána a válaszoknak.

zeldman.com A Napi Jelentés: Éleselméjű, gondolat-provokáló, kiválóan megírt témák és linkek rendszeresen tálalva.

A List Apart Azoknak akik készítik a Web oldalakat.

• Taming lists, Mark Newhouse. Nélkülözhetetlen információk arra az esetre ha értelemszerűen akarod a navigációd kódolni.
• CSS: Going to Print, Eric Meyer. Soha többé nem kell "nyomtató-barát verziót" készítened.
• Alternative Style: Working With Alternate Style Sheets, Paul Sowden. Engedd a látogatóidnak, hogy eldöntsék, hogyan akarják az oldalaid nézni.
• Using XHTML and CSS for an effective Search Engine Optimization Campaign, Brandon Olejniczak. A struktúrált kód abban is segít, hogy jobb kereső helyezést érj el.

The Web Standards project Magasztald ezeket az embereket.

CSS: A guide for the unglued Kiváló link-gyűjtemény.

CSS Layout Techniques: for Fun and Profit Sablonok Eric Costello-tól, amiket használhatsz a munkáidban. Ezen kívül források és leckék is vannak itt.

Real World Style CSS szerkesztési tippek, trükkök és technikák Mark Newhouse-tól.

The Business Benefits of Web Standards Jó hír a menedzsereknek. A Web standardok evangéliuma olyan formában tálalva, ahogy azt egy menedzser is méltányolni tudja.

Köszönöm. Kérdés?