К вопросу о divной верстке
November 13th, 2007 by Yuriy DrozdovПо моему мнению, люди начинают верстать div'ми в трех случаях:
- когда заказчик / работодатель от них этого требует
- сами профессионально вырастают до этого
- следуют "моде", верстать div'ми "модно"
И переход с табличной верстки на div'ную может быть резким - всегда пользовались табличной версткой, а тут начальство/обстоятельства заставляют делать проект используя div'ную верстку. Может быть постепенным, верстаете таблицами, но начинаете использовать семантику элементов. Обычно, резкий переход намного сложнее чем постепенный.
Я хотел бы рассмотреть несколько примеров, которые помогли бы тем, кто работает с табличной версткой использовать семантику html элементов. В качестве примеров буду брать код из одного реального проекта и покажу чем существующий код плохой и как его можно исправить.
Пример 1
-
.style21 {
-
font-size: 16px;
-
color: #ffb400;
-
font-weight: bold;
-
}
Получаем в результате такого кода:
Рассмотрим этот код и пути его модернизации.
<span class="style21">My Title</span> является заголовком, а для заголовков в html есть элементы <h1>,<h2>,<h3> и т.д. до <h6>.
Где
- <h1> Важный заголовок </h1>
- <h2> Менее важный заголовок </h2>
- <h3> Еще менее важный заголовок </h3>
Будем считать, что My Title является важным заголовком, поэтому span меняем на h1
Вторая таблица, из вышеприведенного примера, является ни чем иным, как изображением растянутым на определенную ширину, в данном случае на 760. Данное изображение представляет из себя 1px в ширину и 17px в высоту заполненные белым цветом и посередине 1 px заполненный цветом #bcbcbc.
С помощью css можно избавиться от этой второй таблицы, сделав данный рисунок фоновым изображением для нашего заголовка. Или же, что является более разумным выходом в данном случае, сделать для заголовка нижнюю границу (border-bottom) шириной в 1px и цветом #bcbcbc. 8px до границы и после мы получим задав для заголовка padding-bottom и margin-bottom равными 8 px.
После модификаций получим такой css код:
-
h1 {
-
width:760px; /* ширина нижней картинки из кода выше */
-
border-bottom:1px solid #bcbcbc; /* заменяем нижнюю линию */
-
padding-bottom:8px; /* отступы */
-
margin-bottom:8px;
-
font-size: 16px; /* взято из .style21 высота шрифта и цвет */
-
color: #ffb400;
-
}
Т.к. все заголовки у нас будут выглядеть одинаково, я не выношу эти css свойства в отдельный класс. О том, что для css класса название style21 не является подходящим, я не говорю.
-
<h1>My Title</h1>
Пожалуй на сегодня хватит, следующие примеры рассмотрю в более поздних статьях. Будут комментарии?
CSS рулит!! хотя, сам использую смешанную верстку.. )) ни как не отвыкнуть от таблиц ))
давай еще примеры
[...] Как перейти от табличной верстки к дивной. [...]
Я табличную верстку практически не использовал. А зачем? С помощью CSS можно получить тот же результат (практически всегда).
К тому же, div’ная верстка значительно удобнее для создания тем WP и другим движкам (когда нужно вставлять php код в страницу).
И, самое главное, с помощью CSS можно изменить размещение элементов на странице не меняя html разметку.
- тут, наверное, должно быть
А что, табличная верстка не позволяет использовать CSS?
- разьве нельзя использовать
В последней строке прошлого коммента:
вместо <.h1> наверное должно быть </h1>
Спасибо большое, опечатался, поправил.
Иногда хочу убить людей, которые не умеют вообще верстать табличкой..ну не умеет он и все. Учился сразу блоками. Однако, когда доходит до сложной задачи, что не реализуется блоками, у них начинается ступор.. Однозначно убивать таких.
Ого! У нас тут киллеры завелись
Если это о моем прошлом комменте, то я писал “не пользуюсь”, а не “не умею”.
Нет, это не о Вас. Это в целом, абстрактно.
Спокойно, не надо никого убивать. Новое поколение верстальщиков этого даже не стыдится, если, конечно, от них прямо не требуют верстать на таблицах. И не надо переживать по поводу их временных проблем. Такого “ступора” становится все меньше и меньше. Стили развиваются, а таблицы - нет.
Какой DIVный H1!
ИМХО ваще пример не в тему предисловию! 
все в тему
Тогда статью надо было назвать не “К вопросу о div’ной верстке”, а, к примеру, “Правильное использование семантики HTML”. Честно, твой H1 с нижней границей на мой взгляд ну никак не вяжется с div-ной версткой. А ведь основные проблемы с которыми сталкиваются при divной верстке, при переходе от табличной верстки, это не неправильное использование семантики, а простое недопонимание зачем писать кучу дивов и выравнивать их через Ж вместо того, чтобы использовать простой табличный тег. Эти моменты никак не освещены в данной статье.
Думаю, как раз этот пример и показывает преимущество блочной верстки от табличной. Блочная (читай дивная) верстка, это не только тег div. Данная статья не является всеобъемным руководством по дивной верстке и никак на это не претендует. Она скромно называется “К вопросу о div’ной верстке”, а не “Научу дивно верстать за одно прочтение”.
Ладно, соглашусь с полезностью данной статьи только для студентов 1-го курса, не имеющих опыта веб-программирования, как обзорная по блочной верстке, люди имеющие нормальный опыт табличной верстки с семантикой обычно знакомы хорошо и не станут верстать заголовок таким извращенным способом при помощи таблицы!
Если это живой пример с проекта, то будем считать проекту повезло и им попал именно описанный мной студент 
[...] Прошлая статья имела небольшой резонанс, который заключается в ссылке на нее от LifeStyle, а также в нескольких комментариях. Хотел выразить Владимиру благодарность за замечания в комментариях. [...]
Мне тут Dmitry ссылку эту подкинул. Говорил зацени. Ну да заценил. Писец просто. И это 2007 год.
vladm + 1
Сто лет в обед в вебпрограмминге, а всё ещё на уровне децкого сада.
Это Вы о ком?
А какой плагин используется для подветки кода?
Верстаю таблицами. Пользуюсь DreamVeawer’ом 8-й версии.
Я уже писал об этом плагине здесь.