Sideshow barker

Защо използването на таблици за оформяне на страницата е глупаво:

дефиниране на проблемите, възможни решения

Таблиците са въведени в HTML с едно-единствено предназначение: визуализиране на таблични данни. После, обаче, border="0" осигури на дизайнерите една решетка, върху която да разполагат изображения и текст. При все че това все още е най-разпространеният начин за създаване на визуално богати уеб страници, той пречи на изграждането на един по-добър, по-достъпен, гъвкав и функционален Уеб. Предстои ви да откриете от къде произлизат проблемите и да научите да създавате хибридни или напълно без-таблични лейаути.

Yuppie holding a cigar

Доведете шефа си

Има ли хора от "началството" сред зрителите? Ако шефовете ви са тук, в Сийболд, но са на друга презентация - доведете ги. Те са хората, които трябва да научат как уеб стандартите могат да спестят пари на компанията.

Plumber with a toliet plunger

Обобщение: Каква е ползата?

Ще ви въведем в един начин на работа, който:

Освен това ще обясним защо създаването на страници с Cascading Style Sheets (CSS) изисква малко по-различен подход към вашето съдържание и код, от колкото сте свикнали.

Man in a top hat, tuxedo, and white tie

Сайтове-убийци: вложени таблици и spacer.gif-ове

В началото Интернет беше среда, използвана предимно от учени, изследователи и военни за по-лесна и бърза обмяна на информация. Не мина много време, обаче, и предприемчивите мечтатели разбраха, че тази нова среда е идеална за продаване на всичко - от пресен зарзават и кучешка храна до коли втора употреба и спортни предавания на живо.

Но както всяка нова среда, ранният Интернет беше доста ‘суров’ от естетическа гледна точка (и ни най-малко привлекателен за потенциалните купувачи), докато през 1997 Дейвид Зийгъл публикува своят основополагащ труд, който предложи някои брилянтни workarounds за ограниченията на текущите браузъри и спецификациите на W3C (става дума за Netscape 2 и 3, приятели)

Тези workarounds бяха толкова добри, че, де факто, до ден днешен те са най-разпространеният метод за създаване на уеб страници.

Mad scientist hatches his evil plot

Проблемът на таблиците е, че:

Preacher testifying to the mortal danger of using tables for layout

Спасението е тук

Модерните браузъри са много по-добри в интерпретирането на уеб стандартите, за това и не е нужно да продължаваме да ползваме тези архаични методи.

Вместо да влагаме таблици в други таблици и да пълним празни клетки със spacer.gif-ове, можем да използваме много по-прост код и CSS, за да изграждаме красиви сайтове, които се зареждат по-бързо, преправят се по-лесно и са по-достъпни за всички.

Boxer exhausted between rounds of a fight

Решението: CSS и структуриран код

Като използвате правилно структуриран код в нашите HTML документи и Cascading Style Sheets за визуално оформяне на страниците, можем да разделим съдържанието от презентацията.

Това има редица предимства пред използването на таблиците...

Film director shouting at his crew

Редизайнът е по-лесен и по-евтин

Чрез премахването на презентационен код от страниците ви, редизайнът на сайта и съдържанието му става много по-лесен и много по-евтин. За да промените визията на сайта, всичко, което трябва да направите, е да смените CSS файла; не е нужно да редактирате всички страници една по една.

Например, вижте CSS Zen Garden или различните стилове на сайта на Eric Meyer. За повече информация по темата, вижте Алтернативен Стил от Paul Sowden.

Reporter grilling a lawmaker about his website

Трафикът не е безплатен

Употребата на уеб стандартите намалява размерите на файловете във вашите сайтове, тъй като вече не е нужно потребителите да свалят презентационни данни с всяка страница, която посетят. CSS файловете, които контролират визията на сайта, се кешират от браузърите на потребителите.

Намалените размери водят до по-бързо зареждане на страницата и по-ниски хостинг такси.

Sweating orchestra conductor

Хей, всички тези страници изглеждат еднакво!

Освен всичко останало, употребата на уеб стандартите улеснява неимоверно поддържането на визуално постоянство в сайта. Тъй като всички страници използват един и същ CSS документ, всички имат еднакво форматиране.

Това подсилва вашият имидж и прави сайтът ви по-използваем.

Cowboy talking about the importance of accessibility

Пишете веднъж, използвайте навсякъде, за всеки

Ползването на уеб стандартите прави нашите страници много по-достъпни за хора с увреждания и такива, които ползват телефон или PDA, за да разглеждат Мрежата.

Не е необходимо посетителите, използващи екранни четци (както и тези с бавна връзка), да се лутат из безброй таблични клетки, за да намерят същинското съдържание.

С други думи, разделянето на съдържанието от презентацията прави самото съдържание платформено независимо.

Woman freaking out because her markup is ruining her SEO

Google е сляп

Като заговорихме за достъпност, намаляването на кода и писането на семантично правилен код (например употребата на тагове като <h1>, <h2>, <p>) ще подобри позицията ви в резултатите на търсачките.

Намаляването на съотношението на код и съдържание, използването на ключови думи в <hX> таговете, заместването на ненужните GIF файлове с истинско съдържание - всичко това ще допринесе за по-доброто позициониране на сайта ви в търсачките.

Construction worker committed to using his old tools

Използвайте таблици, ако наистина имате нужда, но не прекалявайте

Това ще предостави на посетители (и шефове), които са твърдо решени да ползват стари браузъри до сетния си ден, приемливо приближение на това, което вижда останалата част от света.

Overconfident yuppie not worried about his code

Хубава таблица, на пръв поглед

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.
Bellboy struggling

Погледнете под повърхността

Всъщност, това би могло да се направи много по-просто.Познайте колко код е нужен за тази малка табличка? 13.7k. Има 17 реда и 9 колони в това чудо. А споменахме ли всички spacer.gif-ове?
Има прекалено много клетки и spacer.gif-ове.И всички пунктирани контури са направени с атрибута background на всяка клетка поотделно, което, освен това, няма и да се валидира.
Вложена таблица? Но защо?
За да направим неподреден списък? Майтапиш се, нали?
Това цялото може да бъде направено само с 8 клетки и 4 CSS правила.Сериозно. 8 клетки и 4 CSS правила, това е всичко.
О, не, още една таблица, която симулира неподреден списък.
Просто опишете вашите списъци в кода като списъци и оставете CSS да свърши останалото.
Имате нужда от CSS правило за <table>, <td>, <ul> и <li>.Това е. Имате ли тези правила - всичко е наред.
И така е много по-добре, отколкото да използваме още 8 клетки, за да наподобим един неподреден списък, който, в крайна сметка, става и много по-недостъпен.
Прекрасно! Последният фалшив лист.

Кодът, който показва структурата на таблицата:

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

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

Man telephoning his co-worker in a panic

Така е много по-добре

Много по-добреПознайте колко код е нужен за тази малка табличка? 2.1k. В нея има 4 реда и 2 колони. И няма spacer.gif-ове.
ПравилноА всички тези пунктирани рамки са направени със CSS и са напълно валидни.
  • Това е точка от списък
  • Точно както е редно да бъде
Всичко това е направено с 8 клетки и 4 CSS правила.Сериозно. 8 cells and 4 CSS rules, това е.
  • Ура за списъците
  • Просто опишете вашите списъци в кода като списъци и оставете CSS да свърши останалото.
Имате нужда от правило за <table>, <td>, <ul> и <li>.Това е. Имате ли тези правила - всичко е наред.
  • Просто обичам списъците
  • Прекрасно! Стига вече фалшиви списъци

А това е нужният CSS, за да се отървете от безсмисления код:

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 }

Policeman signaling for us to stop and think

Хибридни лейаути: обобщение

Използвайте margin и padding вместо излишни таблици, клетки и spacer.gif-ове.

Използвайте link и @import за да вкарате в употреба CSS файловете. Първото за старите браузъри, второто - за новите.

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

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

Няколко примера:

Чакайте, има още:

Повече информация за хибридните лейаути можете да получите от глава първа на Eric Meyer on CSS и по-голямата част на Designing with Web Standards от Jeffrey Zeldman.

Young coder realizing that he does not need to use tables for layout

CSS лейаути: бъдещето е тук

Огромна част от браузърите, които потребителите използват в наши дни, имат доста добра поддръжка на CSS. Всички те си имат своите особености, но веднъж като им свикнете ще можете лесно да ги заобикаляте.

Писането на CSS е лесно. Дори за човек като мен, който си мисли, че повечето JavaScript прилича на псувни:

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

Всяко CSS правило има селектор и декларация. Декларацията съставена от променлива и стойност. Променливите, които са съставени от две думи, трябва да имат тире.

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}

Superhero flying to our rescue

Структуриран код: пишете каквото мислите, мислете преди да пишете

Въпреки че писането на същинският CSS е просто, употребата на CSS за изработването на лейаута изисква малко по-различен подход, отколкото повечето от нас са свикнали.

Вместо да мислим за нещата като "това ще седи тук, онова - там", докато работим по лейаута на дадена страница трябва да мислим за вида на информацията в страницата и структурата на тази информация.

Обозначаваме най-важното заглавие на страницата с тага <h1>, подзаглавията маркираме с тагове <h2>, <h3> и т.н., а параграфите - като параграфи: <p>

Това се нарича "структуриран" или "семантичен" код.

Вместо да поставяте съдържанието си в таблици и клетки, поставете го в <div> таг. Наименувайте вашите семантични div елементи с характеристиката id или пък им добавете class, като нека името или класа описват съдържанието и функцията, а не визията.

Chef preparing tag soup

Избягвайте таговете <b> и <br>

Помислете защо бихте искали нещо да изглежда по определен начин, какво е неговото значение? Вашият код може и трябва да предава смисъла, дори и за някой, който не може да види страницата ви. Семантичният код прави страниците ви по-достъпни за всеки, включително и търсачките.

Когато правите даден текст курсив, искате да поставите акцент (<em>) на него или да цитирате заглавие на книга (<cite>)?

Ако текста е получерен, вероятно трябва да го дефинирате с тага <strong>.

Ако искате нов ред след някой текст, най-верятно този текст трябва да бъде маркиран като заглавие (с <h1> и т.н.). Ако не е заглавие, не е ли част от някой клас, който използвате в целия сайт? Ако това е така, използвайте CSS вместо <br>. Например:

.foo {display:block}

За да научите повече, вижте статията Bed and BReakfast markup (B&BR) на Tantek Çelik.

Evil villain mocking us

Неща, в които таблиците са по-добри от CSS

Има някои неща, които се реализират по-лесно с таблици, отколкото със CSS.

Например, да кажем, че имате черна вертикална навигация, която искате да се разтяга според дължината на съдържанието. Ако използвате таблици, това е елементарно - просто поставете на въпросната клетка <td> черен фон.

Това може да се направи и със CSS, но се иска различно мислене.

Ако поставим на нашия div с навигацията черен фон, черното ще се простира само до края на навигацията. На повечето страници, съдържанието ще е по-дълго от навигацията, така че това не върши работа.

Вместо това можем да използваме един черен GIF файл за фон на div-а с навигацията и можем да зададем на този div достатъчно padding от ляво, но ако навигацията е по-дълга от съдържанието, това също няма да свърши работа.

Друг начин да се преборим с този проблем е да използваме един черен GIF файл за фон на тага <body>, което е решение, освен ако не искате да използвате друго изображение за фон на тага <body>.

Или пък можем да заградим цялата страница в един 'обобщаващ' div и да поставим черният GIF за фон на този div. Това, обаче, добавя не-семантичен баласт към иначе спретнатия код.

И, разбира се, ако използваме повтарящо се изображение за фон, това определено няма да сработи, ако искаме ширината на навигацията да не е фиксирана.

Както казахме, има някои неща, които стават по-лесно с таблици, отколкото със CSS. Но в крайна сметка трябва да се запитате дали всички трудности, с които е свързан лейаута с таблици, си заслужават.

Friendly mailman

Миграция от table hacks към уеб стандарти: общ поглед

Първо трябва да изградите стратегия за изпълнението на миграцията. Целият сайт наведнъж ли ще преправяте или ще го преработвате секция по секция?

Определете кои страници и секции ще спечелят най-много от миграцията. Главната страница на сайта, промоционални страници за нови продукти и подобни локации са добра отправна точка за преправянето.

Определете типовете съдържание/информация, която е поместена на сайта ви

Surgeon in the operating room

Анализ на отделните страници

След като определите типовете информация, представени във вашият сайт, е ред да анализирате отделните страници и да разделите тяхното съдържание на логически блокове.

Анализирайте таблиците, които използвате, и огледайте за вложени такива, празни клетки и spacer.gif-ове - искаме да изградим цялата страница с div тагове или поне с много по-проста таблична структура.

Passive aggressive maid

Преглед на кода

След като анализирате отделните страници, време е да разгледате внимателно кода и да премахнете или замените презентационните елементи със структурни такива.

Fireman rescuing content

Заместете презентационните тагове със семантичен код

Можете да използвате "Find and Replace", но най-лесният начин да го направите вероятно е да отворите страницата в браузър и с помощта на "Copy and Paste" да прехвърлите текста във вашият HTML редактор.

Мислете за структурата на документа! Простото заместване на <b> със <strong> няма да свърши работа!

Кое е най-важното заглавие? Маркирайте го с таг <h1>. Маркирайте подзаглавията с <h2> и т.н.. Маркирайте навигацията като неподреден списък.

Изберете DOCTYPE и го използвайте! Препоръчваме "XHTML transitional", освен ако не сте наистина добър, в който случай се пробвайте и работете с "XHTML strict".

Clown

Разделете страницата на логически div-ове

Поставете главната навигация в div с id="mainnav". Поставете помощната навигация в div с id или class със стойност "subnav". Поставете footer в <div id="footer"> и заградете съдържанието на страницата в <div id="content">.

Може сега да не изглежда много добре, но щом започнете да добавяте CSS правила, нещата бързо ще се подобрят.

Two superheroes

Време е да започнете да пишете CSS

Като начало, поставете рамка (border) на всеки div. Примерен CSS: div {border:1px dotted gray; padding:.5em}. Това ще ви помогне на видите къде започва и свършва всеки от тях, както и дали има вложени div.

Пишете първо CSS за селекторите за основните HTML тагове (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, etc.)

Използвайте контекстуални или descendant селектори възможно най-често. Това ще направи кодът ви по-чист и четим. Например, #subnav li{border:1px solid black; padding:.5em; display: inline} ще се отрази само на елементите от листа, които се намират в помощната навигация.

Тествайте лейаута във възможно най-много браузъри и помолете вашите приятели също да го тестват в техните!

Paparazzi

Примерни сайтове, които ползват CSS за изграждане на лейаута:

Newsboy selling newspapers

Полезни четива

Очевидно не можем да покрием цялата материя в тази кратка презентация, но тези книги ще ви помогнат да разберете по-добре уеб стандартите и как да ги използвате, за да направите страниците си по-чисти, ясни и бързи.

Painter at his easel

Хартия?! Нямаме нужда от никаква хартия: онлайн ресурси

CSS-Discuss

zeldman.com The Daily Report: Проницателно, провокативно и добре написано съдържание и линкове, сервирани редовно.

A List Apart За хората, които правят уеб сайтове

The Web Standards project Благословени да са тези хора.

CSS: A guide for the unglued Много добра страница с връзки.

CSS Layout Techniques: for Fun and Profit Готови лейаути от Eric Costello, които можете да използвате във ваши проекти. Ресурси и примери.

Real World Style CSS лейаути, съвети, трикове и техники от Mark Newhouse.

The Business Benefits of Web Standards Добри новини за модерните шефове! Уеб стандартите, представени по начин, който всеки мениджър ще оцени.

Worker asleep at his computer

Благодарим ви. Някакви въпроси?

; Scott Design Inc

; Adobe Systems Incorporated

Boby Dimitrov, FlashBG (trans. content)

Sasho Kalchev, FlashBG (trans. comics)

Don't blame us!

Even though we did our best translating this thing, you still might want to read the original English version or one of the other translations.

Creative Commons LicenseThis work is licensed under a Creative Commons License.

>
Scott Design