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

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

Чтобы успешно превратить макет с сайта в рабочий код, нужно одинаково хорошо знать как HTML(XHTML), так и CSS(CSS3). Это два наиболее легких языка из всех. Но легкость в изучении с лихвой компенсируется огромным количеством различных способов и вариантов, с помощью которых можно сверстать один и тот же блок. Изначально для разметки страниц использовался чистый HTML, но с развитием технологий на помощь ему пришел мощный и гибкий CSS. В паре они хорошо спелись и могут творить настоящие чудеса = )

Весь интернет сейчас выделяет 2 вида верстки - это табличная и блочная. Я крайне не уважаю таких людей - это говорит в первую очередь об их ограниченности. Нельзя так просто взять и поделить - это табличное, а это блочное. Это все равно что руками воду делить. Нет отдельно ни табличной, ни блочной верстки. Есть одна - смешанная. Постараюсь объяснить почему.

Изначально всё делалось на таблицах, так как браузеры были в своих зачаточных состояниях и каждый обрабатывал один и тот же код по разному. Но с развитием интернета в целом и браузеров в частности, ситуация стала выравнивать и больше не нужно было использовать громоздкие HTML конструкции в виде таблиц. Большая часть кода перекочевала в CSS, а таблицы стали использоваться там где им и место - для создания таблиц (извиняюсь за тавтологию). На смену пришли блоки или блочная верстка. Она удобнее, гибче и обладает большим количеством возможностей. Это простой процесс развития кода, но не как не смена одного типа верстки на другой. Поэтому я считаю, что есть одна верстка - смешанная. Хотя я вообще не вижу смысла выделять какие-то особые типы верстки - таблицы используются там где они нужны, блоки используются как основной инструмент верстки, а все кто до сих пор делят блоки на таблицы - просто еще не осознали, что занимаются ерундой.

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

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

Это обычная заготовка, в которой написаны все основные теги и подключены файлы стилей CSS. В самом верху я указываю, что это XHTML:

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

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

Строчка:

написана для правильного отображения сайта в IE8 и 9. Она необходимо, так как в этих браузерах часто без ведома пользователя по умолчанию включена кнопка "Совместимость", что заставляет браузер работать как старые версии. Данный код принудительно отключает эту кнопку, если она включена.

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