Вступление

HTML изначально задумывался как язык, которому не нужны средства оформления, такие как цвет, размер, рамки или что-то подобное. Разработанный в Европейском институте физики частиц (CERN), HTML был игрушкой ученых, их, прежде всего, интересовала логика информации, а не её визуальное представление. Тогда ещё не существовало понятия веб-дизайна и вёрстки как таковой, все сайты по своему оформлению были практически однотипными, в стиле, называемом сейчас «академический дизайн». Пример до сих пор можно посмотреть на lib.ru.

Однако пользователи преимущественно думали иначе и, глядя на красивую картинку, отдавали предпочтение именно ей. Разработчики браузера Netscape понимали это и вводили в HTML новые теги, улучшающие внешний вид документа. Эти теги не были стандартизированы и работали только в Netscape, что в эпоху повального засилья этого браузера, не имело значения. Доля Netscape составляла более 90% от всех существующих браузеров.

Влияние Netscape оказалось губительным для академического дизайна, фактически похоронив его и благотворным для становления веб-дизайна. Разработчики сайтов поняли, что дизайн это не просто разноцветный текст и вставленные наобум картинки. Это возможность красочно и эффектно подать материал, придать определённое настроение сайту, заинтересовать посетителя и задержать его. Дизайн стал непосредственным этапом разработки сайта, за которым последовала и вёрстка. Нарисованные в Фотошопе макеты следовало превратить из картинки в набор изображений, стилевых и HTML-файлов, способных быстро загружаться по сети, сохраняя при этом особенности дизайна.

Век Netscape продолжался до тех пор, пока часть рынка браузеров не захватила Microsoft со своим браузером Internet Explorer, что в итоге принесло только головную боль разработчикам сайтов. Разные подходы Netscape и Internet Explorer к отображению сайта, противоречивая поддержка стилей и тегов, большое количество мелких ошибок привело к тому, что сайт приходилось тестировать и отлаживать долгое время.

Устаревшие версии браузеров не в полной мере поддерживали CSS (Cascading Style Sheets, каскадные таблицы стилей), поэтому код представлял собой окрошку из HTML и CSS. Это привело к тому, что для макетов стали применяться таблицы с невидимой границей, на долгое время ставшими стандартом дефакто.

Следующим этапом развития разработки сайтов стало рождение спецификации, которая была названа

Cascading Style Sheets Level 2, сокращенно CSS2. Следом появилось обновление Cascading Style Sheets Level 2 Revision 1 (CSS 2.1), которое используется по сей день. Выпуск новых версий браузеров, поддерживающих, пусть и не в полной мере, эту спецификацию, серьёзно облегчил работу над сайтами. В итоге, начал происходить постепенный переход от табличной вёрстки к блочной или, как она ещё называется, вёрстке слоями, в которой расположение элементов на странице и их вид задаётся через стили.

В настоящее время уже можно заявить, что табличная вёрстка в большинстве своём является архаизмом. Тем не менее, существует ещё множество сайтов вроде yandex.ru, lenta.ru и других, свёрстанных именно при содействии таблиц. Такой консерватизм связан со следующими обстоятельствами.

Вёрстка слоями сложнее, чем таблицами, поскольку требует от разработчика глубоких знаний спецификации CSS.

Браузеры содержат разные ошибки при интерпретации стилевых свойств, поэтому необходимо знать особенности поведения основных браузеров, их ошибки и уметь обходить их.

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

оптимальности требуется практический опыт, чтобы иметь в запасе разные методы, применяемые в конкретных ситуациях.

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

Запугал вас всеми этими сложностями и ответственностью? В конце концов, у вас же есть книга по вёрстке, которая, может, не содержит ответы на все вопросы, но здорово поможет разобраться с ними. Только помните, что вёрстка это практическая дисциплина и самостоятельно решая разные задачи и работая над проектами, вы сможете освоить это искусство гораздо быстрее.

Для кого эта книга

Для новичков мы расскажем, как использовать на своей странице стили, как их применять для оформления элементов — ссылок, рисунков, таблиц, форм и списков. Подробные примеры, описание всех действий и комментарии позволяют легко воспроизвести приведенные технологии на практике и модернизировать код под свои нужды.

Опытные пользователи получат более подробные сведения об особенностях популярных браузеров и о том, как они работают с тегами и стилями. Это позволит учитывать различия между браузерами и создавать универсальные документы, которые будут корректно в них отображаться.

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

Как организована книга

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

Книга состоит из десяти глав.

Глава I. Введение в CSS. Описаны основные принципы спецификации CSS и применение их на практике для управления видом элементов.

Глава II. Режимы браузеров. Перечислены режимы работы браузеров, способы переключения между ними и основные их особенности. Указана взаимосвязь режимов с элементом <!DOCTYPE>, даны рекомендации по его использованию.

Глава III. Принципы вёрстки слоями. Перечислены фундаментальные принципы вёрстки, описано поведение разных элементов: блочных, строчных, плавающих. Рассказано про позиционирование элементов на странице.

Глава IV. Вёрстка с помощью таблиц. Описаны особенности таблиц, изменение их вида с помощью стилей, приведены двух и трёхколоночные макеты на основе табличной вёрстки.

Глава V. Браузер Internet Explorer. В главе объясняется модель отображения разных версий браузера, перечислены их ошибки и способы обхода.

Глава VI. Макеты, применяемые на сайтах. Приводятся различные виды макетов: фиксированные, резиновые, комбинированные и способы создания одно, двух и трёхколоночных макетов разного вида.

Глава VII. Типовые элементы веб-страницы. Представлены способы вставки различных элементов на страницу вроде меню, форм, изображений, модальных окон и др.

Глава VIII. Вёрстка сайта на практике. На примере конкретного сайта пошагово рассматриваются этапы его вёрстки.

Глава IX. Использование HTML5. В этой главе указаны новые теги HTML5, показано их применение на практике.

Глава X. Тестирование и отладка готового кода. Разные инструменты для облегчения работы по вёрстке, отыскания ошибок отображения веб-страниц и их исправления.

Поддержка

Ваши замечания, предложения и вопросы направляйте автору на адрес электронной почты vlad@htmlbook.ru.

Обозначения

Для удобства и наглядного представления материала используется разделение по цветам различных элементов.

<strong> — тег, стилевой селектор.

align — атрибут тега, стилевое свойство, ключевое слово или выделение.

right — значение.

layer — имя класса или идентификатора.

File > Open — пункт меню указанной программы.

Tab— клавиша на клавиатуре.

Этот символ призван привлечь внимание к некоторому замечанию по тексту.

Браузеры

В таблице с браузерами встречаются такие изображения:

— свойство полностью поддерживается браузером со всеми допустимыми значениями;

— свойство браузером не воспринимается и игнорируется;

— свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации;

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

Примеры

Как правило, примеры содержат список браузеров, в которых проверялся код. Для сокращения места браузеры обозначаются двумя буквами с номером версии.

IE — Internet Explorer.

Cr — Google Chrome.

Op — Opera.

Sa — Apple Safari.

Fx — Mozilla Firefox.

Работоспособность примера в браузере помечается цветом, совпадающим с цветами в таблице с браузерами.