Михаил Дубаков
Позиционирование с помощью таблиц.
Как вы знаете, верстка состоит из создания блоков и их позиционирования. Получается, что позиционирование является последней преградой на пути к полному осознанию HTML-верстки. Давайте сделаем решительный шаг.
Как я неоднократно повторял, таблицы отличаются исключительной надежностью и предсказуемостью. На основе таблиц хороший верстальщик может без проверки результата сверстать достаточно сложный макет так, что он будет правильно смотреться во всех популярных браузерах. Таблицы обладают достаточно гибкостью, чтобы позволить сверстать макет практически любой сложности. Откуда у таблиц такие свойства? Все очень просто:
спецификация таблиц в стандарте HTML 4 удачная
популярные браузеры отлично поддерживают реализацию таблиц
Возможно вы искали - Реферат: Раздвижные двери CSS
поддержка таблиц идентична во всех популярных браузерах
Вот три фактора, которые определяют надежность и предсказуемость таблиц. Что еще надо верстальщикам? Зачем ломать копья, придумывать какие-то новые стандарты, пытаться их воплотить и сделать на их основе нормальный сайт?
Наверное, не от хорошей жизни, как вы думаете? Вот и я думаю, что у таблиц есть определенные недостатки. Недостатки следующие:
нелогичность использования таблиц для создания структуры документа, что неудивительно, ведь таблицы изначально для этого и не предназначались
много лишнего и ненужного кода, что ведет к увеличению веса документа
Похожий материал - Реферат: Сортировка карточек: полное описание метода
относительная сложность модификации кода
плохое восприятие кода документа. Это самый противный недостаток. Он особенно ярко проявляется, когда приходится вносить изменения в сайт, который был сверстан год назад.
На самом деле, недостатки не критичные. Действительно, ведь уже несколько лет верстальщики успешно используют таблицы. Но всегда хочется лучшего. Стремление к простоте и логичности неотъемлемое свойство любого нормального верстальщика.
Именно из-за стремления к логичности создали каскадные таблицы стилей. Именно из-за него некоторые уже сейчас пытаются использовать CSS-блоки для верстки сайта. Казалось бы, что простота не такая уж необходимая вещь, чего ради нее так страдать? Возьмем идеальный вариант, когда спецификация CSS очень хорошая и корректно поддерживается всеми браузерами. Что тогда получит верстальщик?
Во-первых, экономия времени. Все будет делаться быстрее, дорабатываться быстрее и переделываться быстрее. Оптимизация процесса всегда крайне полезная вещь. Управляющие проектами будут страшно довольны, а верстальщики выкроят лишний час в день на изучение интересной новой технологии, например.
Очень интересно - Реферат: Карта сайта и индекс: что это такое и для чего это нужно?
Во-вторых, чисто эстетическое удовольствие. Когда все получается гораздо проще и красивее, человек чувствует себя лучше. Поднимается настроение и работа кажется не такой уж противной.
В-третьих, документы станут легче, они будут быстрее загружаться и отображаться браузерами. Какой владелец сайта не хочет, чтобы страницы загружались не за 6 секунд, а за 4 секунды?
Для меня важны все пункты, но в особенности второй. Я отношусь к тому сорту людей, для которых простота и понятность — главное. И неважно, касается это дизайна, HTML-кода или PHP-скрипта. Все должно быть как можно понятнее и проще. Наверняка есть люди, которым кажется, что такие вещи совершенно не важны. Они получат минимум преимуществ, используя CSS.
Помечтали и хватит, давайте спустимся с небес на землю. Если использовать CSS по максимуму, то про экономию времени можно забыть. Вам придется писать кросс-браузерный код и проводить много времени, решая проблемы совместимости. Иногда поведение браузера настолько странное, что просто диву даешься. Сложность HTML-кода, конечно, значительно уменьшиться, но зато CSS-код будет очень даже непростым. Единственное, на что можно надеяться, — это уменьшение веса страниц.
Конечно, во многих случаях можно относительно легко написать кросс-браузерную таблицу стилей. Но не всегда. Во всяком случае, бывает сложно сразу найти правильный подход к макету. Иногда кажется, что лучше всего верстать таблицами, а оказывается, что и CSS-блоками было бы отлично. Оценка макета и выбор правильного подхода приходят с опытом. Мы с вами еще будем говорить о том, как смотреть на макет и как выбирать способ верстки.
Вам будет интересно - Реферат: Использование фонового изображения для замены текста
В четвертой главе был пример, как не надо верстать сайты. В этой главе мы будем всячески истязать все ту же страницу и приводить ее в человеческий вид. Сначала с помощью обычных таблиц, затем с помощью CSS-блоков и CSS-позиционирования. Посмотрим, какой способ верстки для данного примера окажется более правильным. Честно говоря, мне и самому интересно, но почему-то кажется, то документ можно отлично сверстать с помощью CSS-позиционирования.
Для тех, кто забыл как выглядит главная страница сайта компании PopStar, приведен рис. 9.1.
Рис. 9.1 Макет сайта компании PopStar
Я пока не буду приводить код макета, который был сверстан макет в четвертой главе, а сразу начну верстать правильно. Все же мы с вами уже достаточно серьезно продвинулись вперед, и верстать неправильно не хотим. Заодно освоим основные принципы табличной верстки.
Похожий материал - Реферат: Дизайн для портативных устройств: ваш веб-сайт на маленьком экране
Итак, в четвертой главе верстальщик все запихнул (более мягкое слово сложно найти) в одну единственную таблицу. Он нарушил главный принцип табличной верстки.
ПРИНЦИП 1
Каждый горизонтальный блок по возможности надо заключать в отдельную таблицу. Чем больше отдельных таблиц, тем лучше.
Преимущества такие: