Реальный пиарСоздание сайтовВёрстка → Позиционирование: всему свое место

Позиционирование: всему свое место

html коды

Как вы знаете, верстка состоит из создания блоков и их позиционирования. Получается, что позиционирование является последней преградой на пути к полному осознанию HTML-верстки. Давайте сделаем решительный шаг.
Надежность и уродство таблиц

Как я неоднократно повторял, таблицы отличаются исключительной надежностью и предсказуемостью. На основе таблиц хороший верстальщик может без проверки результата сверстать достаточно сложный макет так, что он будет правильно смотреться во всех популярных браузерах. Таблицы обладают достаточно гибкостью, чтобы позволить сверстать макет практически любой сложности. Откуда у таблиц такие свойства? Все очень просто:
спецификация таблиц в стандарте HTML 4 удачная
популярные браузеры отлично поддерживают реализацию таблиц
поддержка таблиц идентична во всех популярных браузерах

Вот три фактора, которые определяют надежность и предсказуемость таблиц. Что еще надо верстальщикам? Зачем ломать копья, придумывать какие-то новые стандарты, пытаться их воплотить и сделать на их основе нормальный сайт?

Наверное, не от хорошей жизни, как вы думаете? Вот и я думаю, что у таблиц есть определенные недостатки. Недостатки следующие:
нелогичность использования таблиц для создания структуры документа, что неудивительно, ведь таблицы изначально для этого и не предназначались
много лишнего и ненужного кода, что ведет к увеличению веса документа
относительная сложность модификации кода
плохое восприятие кода документа. Это самый противный недостаток. Он особенно ярко проявляется, когда приходится вносить изменения в сайт, который был сверстан год назад.

На самом деле, недостатки не критичные. Действительно, ведь уже несколько лет верстальщики успешно используют таблицы. Но всегда хочется лучшего. Стремление к простоте и логичности неотъемлемое свойство любого нормального верстальщика.

Именно из-за стремления к логичности создали каскадные таблицы стилей. Именно из-за него некоторые уже сейчас пытаются использовать CSS-блоки для верстки сайта. Казалось бы, что простота не такая уж необходимая вещь, чего ради нее так страдать? Возьмем идеальный вариант, когда спецификация CSS очень хорошая и корректно поддерживается всеми браузерами. Что тогда получит верстальщик?

Во-первых, экономия времени. Все будет делаться быстрее, дорабатываться быстрее и переделываться быстрее. Оптимизация процесса всегда крайне полезная вещь. Управляющие проектами будут страшно довольны, а верстальщики выкроят лишний час в день на изучение интересной новой технологии, например.

Во-вторых, чисто эстетическое удовольствие. Когда все получается гораздо проще и красивее, человек чувствует себя лучше. Поднимается настроение и работа кажется не такой уж противной.

В-третьих, документы станут легче, они будут быстрее загружаться и отображаться браузерами. Какой владелец сайта не хочет, чтобы страницы загружались не за 6 секунд, а за 4 секунды?

Для меня важны все пункты, но в особенности второй. Я отношусь к тому сорту людей, для которых простота и понятность — главное. И неважно, касается это дизайна, HTML-кода или PHP-скрипта. Все должно быть как можно понятнее и проще. Наверняка есть люди, которым кажется, что такие вещи совершенно не важны. Они получат минимум преимуществ, используя CSS.

Помечтали и хватит, давайте спустимся с небес на землю. Если использовать CSS по максимуму, то про экономию времени можно забыть. Вам придется писать кросс-браузерный код и проводить много времени, решая проблемы совместимости. Иногда поведение браузера настолько странное, что просто диву даешься. Сложность HTML-кода, конечно, значительно уменьшиться, но зато CSS-код будет очень даже непростым. Единственное, на что можно надеяться, — это уменьшение веса страниц.

Конечно, во многих случаях можно относительно легко написать кросс-браузерную таблицу стилей. Но не всегда. Во всяком случае, бывает сложно сразу найти правильный подход к макету. Иногда кажется, что лучше всего верстать таблицами, а оказывается, что и CSS-блоками было бы отлично. Оценка макета и выбор правильного подхода приходят с опытом. Мы с вами еще будем говорить о том, как смотреть на макет и как выбирать способ верстки.

В четвертой главе был пример, как не надо верстать сайты. В этой главе мы будем всячески истязать все ту же страницу и приводить ее в человеческий вид. Сначала с помощью обычных таблиц, затем с помощью CSS-блоков и CSS-позиционирования. Посмотрим, какой способ верстки для данного примера окажется более правильным. Честно говоря, мне и самому интересно, но почему-то кажется, что документ можно отлично сверстать с помощью CSS-позиционирования.

Для тех, кто забыл как выглядит главная страница сайта компании PopStar, приведен рис. 9.1.
Я пока не буду приводить код макета, который был сверстан в четвертой главе, а сразу начну верстать правильно. Все же мы с вами уже достаточно серьезно продвинулись вперед, и верстать неправильно не хотим. Заодно освоим основные принципы табличной верстки.

Итак, в четвертой главе верстальщик все запихнул (более мягкое слово сложно найти) в одну единственную таблицу. Он нарушил главный принцип табличной верстки.
ПРИНЦИП 1
Каждый горизонтальный блок по возможности надо заключать в отдельную таблицу. Чем больше отдельных таблиц, тем лучше.

Преимущества такие:
Браузер будет показывать таблицы по мере загрузки. Если все поместить в одну таблицу, то браузер покажет странице только после завершения загрузки всего кода. Визуально будет казаться, что страница загружается быстрее.
Каждую таблицу можно более гибко настроить для конкретного блока. Например, первый блок можно сверстать таблицей из трех колонок, а второй — из пяти. Если же использовать одну таблицу, то придется и первый, и второй блок верстать с помощью пяти колонок.

Если посмотреть на рис. 9.1, то сразу бросаются в глаза три больших блока, которые можно заключить в отдельные таблицы:
Первый блок содержит логотип и заголовок «Новости»
Второй блок содержит центральную часть (меню, текст и сами новости)
Третий блок содержит копирайт

Вот мы и определили общую структуру документа. Сейчас самое время заняться каждый блоком в отдельности и подумать, как его лучше сверстать.


Источник: http://webmascon.com

Рекомендуем



Использование фонового изображения для замены текста Этот класс создан для описания общих свойств подменяемых заголовков, что позволяет задать эти общие свойства всего один раз, не прописывая их всякий раз в стилевых свойствах каждого идентификатора id каждого конкретного заголовка


В печать! Если плавающий элемент вышел за пределы печатной страницы, то оставшаяся часть полностью пропадает, так и не появившись на следующей странице


Раздвижные двери CSS Если предположить, что по краям наших картинок есть нечто уникальное, как, например скругленный угол закладки, мы вряд ли захотим, чтобы одна картинка полностью закрывала другую, находящуюся позади