Kodėl naudoti lenteles išdėstymui yra kvaila:

apibrėžiamos problemos, pasiūlomi sprendimai

Lentelės egzistavo HTML dėl vienos priežasties — atvaizduoti lentelinius duomenis. Bet tada border="0" suteikė dizaineriams galimybę turėti tinklelį, ant kurio galėtų dėlioti paveikslėlius ir tekstą. Vis dar labiausiai dominuojanti priemonė kurti vizualiai turtingas Interneto svetaines — lentelių naudojimas — šiuo metu keičiama geresnio, labiau pasiekiamo, lankstaus ir funkcionalaus Interneto gamyba. Sužinok, iš kur dygsta problemos, ir išmok sprendimus, kaip kurti pereinamuosius arba visiškai belentelinius išdėstymus.

Eik, pasikviesk savo bosą

Ar yra nors vienas „kostiumuotasis“ auditorijoj? Ar tavo bosai čia, Seybolde, bet šiuo metu dalyvauja kitame pristatyme? Eik, pasikviesk juos. Jie yra tie žmonės, kurie privalo žinoti, kaip Interneto standartai gali išsaugoti tavo kompanijos pinigus.

Apžvalga: kas iš to man?

Mes pristatysime tau darbo būdą, kuris

Mes taip pat kalbėsime apie tai, kaip puslapių išdėstymas kaskadiniais stiliais (CSS) reikalauja šiek tiek kitokio galvojimo būdo apie tavo turinį ir žymėjimą, nei tas kurį tu anksčiau galėjai naudoti.

Tinklalapiai-monstrai: lentelės lentelėse ir tarpiniai GIFai

Pradžių pradžioje Internetas pirmiausiai buvo terpė akademikams, išradėjams ir kariuomenei keistis informacija. Tačiau netrukus įžvalgieji verslininkai suprato, kad ši terpė ideali parduoti viską nuo šviežių žemės ūkio produktų ir šunų maisto iki padėvėtų automobilių ir sporto rezultatų spėjimų.

Deja, kaip ir su kiekviena terpe savo kūdikystėje, jaunasis Internetas buvo estetiškai „žalias“ (ir ne ką viliojantis klientus), kol Deividas Sygelis neišspausdino savo įžymiosios knygos, kurioje pasiūlyta keletas blizgančių apėjimų aplink egzistuojančių naršyklių ir 1997-ųjų W3C specifikacijų apribojimus. (Kalbama apie Netscape 2 ir 3, žmogau)

Tie apėjimai buvo tokie spindintys, kad, faktiškai, iki šios dienos jie yra dominuojantis būdas išdėlioti Interneto puslapius.

Lentelių naudojimo problema:

Išsigelbėjimas tavo rankose

Modernios naršyklės jau daug geriau supranta Interneto standartus, ir mums jau nebereikia naudoti tų senovinių metodų.

Vietoj to, kad lentelėse įvedinėtume kitas lenteles ir pildytume tuščius langelius su tarpiniais GIFais, galime naudoti daug paprastesnį žymėjimą ir CSS, išdėstydami nuostabias svetaines, kurios greičiau užsikrauna, kurias lengviau perprojektuoti, ir kurios labiau pasiekiamos kiekvienam.

Sprendimas: CSS ir struktūrinis žymėjimas

Naudodami struktūrinį žymėjimą savo HTML dokumentuose ir kaskadinius stilius savo puslapių išdėstymui, mes galime laikyti aktualų turinį atskirtą nuo būdo, kaip jis atvaizduotas.

Tai turi keletą privalumų, palyginus su lentelių naudojimu....

Perprojektavimai yra paprastesni ir pigesni

Išmetus iš tavo puslapių vaizduojamąjį žymėjimą, egzistuojančių svetainių ir jų turinio perprojektavimas reikalauja daug mažiau įtempto darbo (ir daug mažiau kainuoja). Tam, kad pakeistum svetainės išdėstymą tereikia pakeisti vienintelį dalyką — stilių; pačių puslapių redaguoti išvis nebereikia.

Pavyzdžiui, pažvelk į CSS Zen Garden, ar stiliaus jungtukus Eriko Majerio svetainėje. Kad sužinotum daugiau, skaityk Polo Soudeno Alternatyvų stilių.

Interneto pralaidumas nėra nemokamas

Interneto standartų naudojimas sumažina tavo puslapių failų dydžius, kadangi naudotojams nebereikia parsisiuntinėti vaizduojamųjų duomenų sulig kiekvienu puslapiu, kurį jie aplanko. Stilius, kuris kontroliuoja išdėstymą, yra išsaugomas lankytojo naršyklės sparčiojoje atmintinėje.

Sumažintas failo dydis reiškia greitesnius krovimusis ir mažesnius talpinimo tarnybinėje stotyje kaštus.

Ei, šie puslapiai atrodo taip pat!

Be to, Interneto standartų naudojimas ypatingai palengvina išlaikyti vizualią darną visoje svetainėje. Kadangi puslapiai naudoja tą patį CSS dokumentą savo išdėstymams, jie visi suformatuojami vienodai.

Tai sustiprina tavo kokybiško darbo įvaizdį ir padaro tavo svetainę naudojamesnę.

Kartą parašai — naudojasi kiekvienas ir bet kur

Interneto standartų naudojimas padaro mūsų puslapius daug labiau prieinamus naudotojams su negalia ir naršytojams, naudojantiems mobiliuosius telefonus bei PDA kompiuterius, jungiantis prie Interneto.

Lankytojai, naudojantys balso naršykles (tiek ir turintys lėtą Interneto ryšį) nebeprivalo bristi per nesuskaičiuojamą daugybę lentelių langelių ir tarpinių nematomų paveikslėlių, kad išgautų tikrąjį puslapių turinį.

Kitais žodžiais tariant, turinio atskyrimas nuo būdo jį atvaizduoti padaro turinį nepriklausomą nuo peržiūros priemonės.

Google yra neregys

Kalbant apie pasiekiamumą, žymėjimo minimizavimas ir tinkamas aprašo žymių naudojimas padės pagerinti reitingus paieškos sistemose.

Santykio tarp kodo ir turinio sumažinimas, raktinių žodžių naudojimas aprašo žymėse ir paveikslėlių keitimas tekstu viršūnėlėje — visa tai padės tavo svetainėms atsirasti aukščiau paieškų rezultatuose.

Tu vis dar gali naudoti lenteles, jei tau reikia, bet nenaudok jų per daug

Tai sudarys kompromisą tarp lankytojų (taip pat bosų), kurie prisirišę ir kategoriškai pasiryžę naudoti 4 versijos naršykles iki mirties, ir likusio Pasaulio.

Gana maloniai atrodanti lentelė

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.

Žvilgtelk iš vidaus

Tai tikrai galėtų būti padaryta daug paprasčiau.Spėk, kiek žymėjimo yra šioje mažutėje lentelėje? 13,7kB. Šitam dalyke yra 17 eilučių ir 9 stulpeliai. O ar aš jau paminėjau visus tarpinius GIFus?
Čia ryškiai per daug langelių ir tarpinių paveikslėlių.O visi tie taškiniai rėmeliai padaryti, naudojant background atributą lentelės langeliuose, ko neįteisintų tikrintuvai.
Lentelė lentelėje? Kam?
Kad padarytum nenumeruojamąjį sąrašą? Tu turbūt juokauji!?
Visa tai gali būti padaryta iš 8 lentelės langelių ir 4 CSS taisyklių.Tikrai. 8 langeliai ir 4 css taisyklės — tik tiek ir tereikia.
O ne, dar vienas lentelės apsimetinėjimas nenumeruojamuoju sąrašu.
Tiesiog pažymėk nenumeruojamąjį sąrašą nenumeruojamuoju sąrašu ir leisk visa kita atlikti CSS.
Tau reikia po taisyklę <table>, <td>, <ul> ir <li>.Tai tiek. Kai tik juos turi, tu auksas.
Tai geriau nei naudoti papildomus 8 lentelės langelius, kad falsifikuotum nenumeruojamąjį sąrašą, gaudamas kur kas mažiau pasiekiamą rezultatą.
Puiku! Paskutinis falsifikatas.

Kodas, kuris parodo šios lentelės struktūrą:

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

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

Tai kur kas geriau

Daug geriau!Spėk kiek žymėjimo yra šioje mažoje lentelėje? 2,1kB. Šiame dalyke yra 4 eilutės ir 2 stulpeliai. Ir jokių tarpinių GIFų.
Iš tiesų!Ir visi šitie taškiniai rėmeliai yra padaryti su CSS ir yra visiškai įteisinami.
  • Dabar čia jau sąrašo įrašas
  • Tiesiog taip, kaip ir turėtų būti
Visa tai padaryta iš 8 lentelės langelių ir 4 css taisyklių.Tikrai. 8 langeliai ir 4 css taisyklės — tik tiek ir nė trupučio daugiau.
  • Valio nenumeruojamiesiems sąrašams
  • Kodėl gi nepažymėjus nenumeruojamųjų sąrašų nenumeruojamaisiais sąrašais ir nepalikus viso kito atlikti CSS?
Tau reikia po taisyklę <table>, <td>, <ul> ir <li>.Tai tiek. Kai tik juos turi, tu auksas.
  • Aš tiesiog negaliu atsispirti nenumeruojamiesiems sąrašams.
  • Nuostabu! Daugiau jokių falsifikatų

O štai čia CSS, kuri reikia naudoti, norint išvengti nesąmoningo žymėjimo:

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 }

Reziumuojam pereinamojo dizaino ypatybes

Naudok paraštes (margin) ir atitraukimus (padding) vietoj papildomų langelių ir tarpinių GIFų.

Naudok sąsajas (link) ir stiliaus importus (@import). Pirmąsias senoms naršyklėms, antruosius — šiuolaikinėms.

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

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

Tikro pasaulio pavyzdžiai:

Bet luktelk, čia yra dar:

Dėl daugiau informacijos apie pereinamąjį dizainą skaityk pirmą skyrių iš Erikas Majeris daro CSS ir daugumą Džefrio Zeldmano knygos Projektavimas, naudojant Interneto standartus.

CSS išdėstymai: ateitis yra čia

Naršyklės, kurias šiandien naudoja totali dauguma lankytojų, gerai palaiko CSS. Jos visos turi savo keistenybių, bet kartą su jomis susidūrus, galima išmokti jas apeiti.

CSS kodo rašymas yra lengvas. Net tokiam vyrukui kaip aš, kuris mano, kad dauguma Javaskripto atrodo kaip keiksmažodžiai.

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

Kiekviena CSS taisyklė turi filtrą ir apibrėžimą. Apibrėžimas susideda iš savybių ir reikšmių. Savybės, kurios susideda iš dviejų žodžių, atskiriamos brūkšneliais.

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ūrinis žymėjimas: koduok, ką turi omeny; turėk omeny, ką koduoji

Nors rašyti paprastą CSS yra lengva, CSS naudojimas tavo išdėstymams reikalauja šiek tiek kitokio mąstymo būdo, nei tas, prie kurio dauguma iš mūsų buvo pripratę.

Vietoj to, kad beprojektuodami puslapį galvotume kažką panašaus į „šis bus čia, o šitas — čia“, mes privalome galvoti apie informacijos rūšis puslapyje ir tos informacijos struktūrą.

Pačią svarbiausią antraštę pažymime <h1> žyme; paantraštės pažymimos <h2> žymėmis ir pan.; o pastraipos yra pastraipos.

Visa tai vadinama „struktūriniu“ arba „semantiniu“ žymėjimu.

Vietoj to, kad turinį sukištum į lentelių langelius, apsiausk juos div elementais. Suteik savo div elementams id arba class, kurie aprašytų turinį ir/ar funkcionalumą, o ne išvaizdą.

Venk <b>ulvių ir <br>okolių žymėjimo

Galvok apie tai, kodėl tu nori, kad kažkas būtų atvaizduota tam tikru būdu; ką tai reiškia? Tavo žymėjimas gali ir turėtų perteikti reikšmę, netgi kažkam, kas negali tavo puslapio matyti. Semantinis žymėjimas paverčia mūsų puslapius labiau pasiekiamais visiems, įskaitant paieškos sistemas.

Kai pakreipi tekstą kursyvu, taip darai, nes nori tai akcentuoti (<em>), ar todėl, kad tai knygos pavadinimas (<cite>)?

Jei kažkas yra pastorinama, tai tikriausiai turėtų būti pažymėta kaip <strong>.

Jei tau reikia nukelti eilutę po kažko, didelė tikimybė, kad tai turėtų būti pažymėta kaip antraštės elementas. Jei tai nėra antraštė, gal tai tam tikras elementas su ta pačia klase (class), kuris pasikartoja visoje tavo svetainėje? Jei tai toks atvejis, geriau vietoj <br> naudok CSS.

.foo {display:block}

Kad sužinotum daugiau, žiūrėk Tanteko Çeliko Bulvių ir BRokolių žymėjimą (B&BR).

Tai, ką lentelės sugeba geriau nei CSS

Yra konkrečių dalykų, ką CSS geba ne taip gerai, kaip lenteliniai išdėstymai.

Tarkim, nori navigacijos juostą juodu fonu ištempti per visą turinio aukštį. Su lenteliniu išdėstymu tai padaryti vieni juokai — tiesiog nurodyk <td> juodą foną.

Galime tai padaryti ir naudodami CSS, bet tai reikalauja skirtingo mąstymo būdo.

Jei mes nurodysime juodą foną mūsų navigacijos divui, juoda spalva tęsis tik kol baigsis navigacija. Daugumoj puslapių turinys būna ilgesnis nei navigacija, todėl tai nėra gerai.

Vietoj to mes galėtume iškloti juodais GIFais juostą mūsų turinio dive, o patį divo turinį pakankamai atitraukti nuo kairio krašto, bet jei mūsų navigacija bus ilgesnė už turinį, tai taipogi neveiks.

Kitas būdas susidoroti, yra iškloti GIFais mūsų <body> foną, kas būtų puiku, kol mūsų <body> fonui neužsinorime kito paveikslėlio.

Arba mes galime apgaubti turinį apgaubiančiuoju div ir tą div iškloti paveikslėliais. Tačiau tai būtų ne semantinio blizgučio pridėjimas mūsų žymėjimui.

Ir, žinoma, išklojimas fono paveikslėliais išvis nesuveiks, jei norėsime navigacijos plotį turėti plaukiančio pločio.

Kaip jau sakėme, yra dalykų, kuriuos lentelės daro geriau nei CSS. Bet galiausiai paklausk savęs, ar visas bagažas, kuris ateina kartu su lenteliniais išdėstymais vietoj duomenų, yra to vertas.

Migravimas nuo lentelinio išsisukinėjimo prie Interneto standartų: bendras vaizdas

Pirmiausia, tau reikia nuspręsti migravimo strategiją. Ar ruošiesi pakeisti visą svetainę iškart, ar ruošiesi tai daryti dalis po dalies?

Nustatyk, kurie straipsniai ir puslapiai gaus didžiausios naudos iš pakeitimo. Namų puslapiai, naujų produktų pristatymai ir panašūs puslapiai yra tai, nuo ko galėtum pradėti.

Nustatyk visos svetainės turinio/informacijos tipus

  • Produkto informacija
  • Kainų informacija
  • Kompanijos informacija
  • Atliktų darbų aplankas
  • Siūlomos paslaugos
  • Investavimo informacija
  • Prekių krepšelis
  • Naudotojo forumai
  • ir pan.

Puslapių pjaustymas

Kai jau suvoki savo svetainės turinio tipus, ateina laikas išanalizuoti, kaip logiškai padalinti egzistuojančių puslapių turinį.

  • Pagrindinė navigacija
  • Antro lygmens navigacija
  • Antraštės ir poraštės
  • Turinys
  • Susijusi informacija
  • Kita

Išsianalizuok lentelių lentelėse struktūrą ir tuščius tarpinius bei rėmelinius langelius. (Norime juos pakeisti div žymėmis arba daug paprastesnės lentelės struktūra.)

Žvelk dar giliau

Kai jau išsianalizuojam savo puslapių struktūrą, ateina laikas atlikt robinhudišką veiklą ir ištirti egzistuojantį atvaizduojamąjį HTML žymėjimą, kurį galima keisti struktūriniu žymėjimu.

  • Visų vargšų ir gerųjų meilės vardan, atsikratyk <font> žymių ir tarpinių GIFų!
  • Panašiai, išmesk <b> ir <br> žymėjimo.
  • Atsikratyk atvaizduojamojo žymėjimo lentelėms (bgcolor, background ir pan.).
  • Pakeisk varganai atvaizduojantį CSS kodavimą (kaip kad <span class="header">) atitinkamu struktūriniu žymėjimu. (Tantekas Çelikas dar labiau įsigilina į detales savo naujienoje Klasės prisilietimas.)

Pakeisk atvaizduojamąsias žymes struktūriniu žymėjimu

Gali naudoti „rask ir pakeisk“ funkciją (taip pat dėsningąsias išraiškas), bet lengviausias būdas tai padaryti galėtų būti egzistuojančio puslapio peržiūra naršyklėje ir tiesioginis teksto kopijavimas iš ten ir įterpimas į savo HTML redaktorių.

Galvok apie savo dokumento struktūrą! Paprasčiausio <b> žymių pakeitimo į <strong> žymes negana.

Koks yra svarbiausias pavadinimas? Pažymėk jį <h1>. Pažymėk antro lygmens pavadinimus <h2> ir t.t. Pažymėk pastraipas <p> žymėmis. Pažymėk savo navigaciją nerūšiuotais sąrašais.

Pasirink savo DOCTYPE ir naudok jį. (Mes rekomenduojame pereinamąjį XHTML, nebent tu užkietėjęs asas, — tokiu atveju, naudok griežtą XHTML.)

Padalink savo puslapį į loginius divus

Įdėk savo pagrindinę navigaciją į divą su id, lygiu mainnav; įdėk savo antro lygmens navigaciją į divą su id arba class, lygia subnav, įdėk savo poraštę į <div id="footer"> ir apgaubk savo turinį <div id="content">.

Dabar tai dar neatrodys niekaip ypatingai, bet kai tik pradėsi savo stiliui pridėjinėti taisykles, vaizdas greitai pagerės.

Laikas pradėti rašyti savo CSS

Pradžioje, nurodyk kiekvienam divui po rėmelį. Pavyzdžiui, div {border: 1px dotted gray; padding: .5em} Tai leis tau matyti, kur jie prasideda ir kur baigiasi, taip pat ar jie guli vienas kitame.

Pirmiausiai rašyk CSS elementams (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li> ir t.t.)

Kiek galima daugiau naudok kontekstinius arba paveldimus filtrus. Tai išlaikys daug švaresnį žymėjimą. Pavyzdžiui, #subnav li {border: 1px solid black; padding: .5em; display: inline} paveiks tik tuos sąrašo elementus, kurie yra tavo antro lygmens navigacijos dive.

Testuok kiek galima didesniame skaičiuje naršyklių ir duok draugams pratestuoti savo naršyklėse.

Paskaityk apie visa tai

Suprantama, mes negalime apžvelgti visko, ką tau reikia žinoti apie projektavimą, naudojant CSS, per valandą, tačiau šios knygos gali padėti sugriebti Interneto standartus už ragų, kad padarytum liesesnius, švaresnius ir greitesnius puslapius.

Popierius? Mums nereikia jokių šlykščių popierių: šaltiniai Internete

CSS diskusija

  • pašto konferencija: labai aktyvi, labai informatyvi.
  • Wiki: „Be kitų dalykų, wiki tarnauja jos naudotojams kaip kolektyvinė ilgalaikė atmintis.“ Nori Vindousiniam Interneto Eksploreriui duoti kažką, ką jis supranta, o visiems kitiems — „tikrąjį reikalą“? Čia tu sužinosi, kaip tai padaryti ir dar daugiau.
  • Archyvai: CSS problema tau pakišo koją? Nesijaudink, kas nors kitas jau išsprendė (ir gavo susijusios pagalbos apie) tokią pačią problemą. Čia atrask atsakymus.

zeldman.com Kasdienis reportažas: įžvalgus, provokuojantis apmąstymams ir gerai parašytas turinys ir nuorodos patiekiamos reguliariai

A List Apart žmonėms, kurie gamina Interneto svetaines

Interneto standartų projektas Pašlovink šiuos žmones.

CSS: gidas žlugusiems nuostabių nuorodų puslapis

CSS išdėstymo technikos: dėl smagumo ir dėl naudos Eriko Kostelo išdėstymai, kuriuos tu gali naudoti savo projektuose. Šaltiniai ir vadovėliai taip pat.

Realybės stilius Marko Njuhauso CSS išdėstymai, patarimai, triukai ir technikos.

DevEdge Netscape šoninės kortelės Neapsakomai patogios nuorodos į W3C CSS, HTML ir DOM specifikacijas.

Nju Jorko viešosios bibliotekos stiliaus gidas Labai patogus šaltinis XHTML ir CSS pagrindų gavimui.

Interneto standartų nauda verslui Geros naujienos šiuolaikiškiems šefams. Interneto standartų evangelija išreikšta terminais, kuriuos pripažįsta verslo magistrai.

Ačiū. Klausimų yra?

Visi dievina kvailas lenteles

(Na gal ne pačias lenteles, bet tikrai atrodo, kad žmonėms patinka šis pristatymas.)

Ačiū už pastangas žmonėms, išvardintiems žemiau. „Kodėl naudoti lenteles išdėstymui yra kvaila“ buvo išversta į šias kalbas.

Jei norėtum išversti tai į savo gimtąją kalbą, pranešk mums. (Nagi, japonai, kur jūs? O kaip jūs, danai ir rusai? Tik nesakyk, kad visame Indijos kontinente ar Vidurio Rytuose neatsiras nė vieno, suprantančio Interneto standartų vertę. Aš jos neįpirkčiau.)

Pastaba Internet Explorer naudotojams:

Tam, kad teisingai matytum puslapius, naudojančius ne lotyniškas abėcėles (tokius, kaip bulgariški ir kiniški šios svetainės vertimai), tau reikia pakeisti kalbos/šriftų nustatymus taip, kad standartinė simbolių aibė būtų „Universalusis alfabetas (UTF-8)“. Tai nepaveiks nė vienos iš svetainių, kurias įprastai žiūri, ir suteiks priėjimą prie gausybės svetainių netgi tomis kalbomis, kuriomis tu ir taip nemoki skaityti.