7.1 Этапы верстки веб-страниц

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

Вначале дизайнер готовит макеты веб-страниц в графическом редакторе (например, Adobe Illustrator, Adobe Photoshop), утверждает их у заказчика и передает верстальщику на формирование HTML-кода. Верстальщик получает работу в виде набора рисунков, где каждый из них соответствует макету отдельной страницы со своим дизайном.

Рисунок 7.1 – Изображение главной страницы

Теперь необходимо проанализировать рисунок и решить, как же его превратить в веб-страницу. Для удобства происходит логическое разбиение картинки на отдельные блоки, с которыми идет дальнейшая работа. Выделим два крупных блока – «шапка» страницы и основной контент. Рассмотрим для начала «шапку», показанную на рисунке 7.2.

Рисунок 7.2 – Изображение «шапки» главной страницы

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

1. Сделать один рисунок и применить к нему карту-изображение;

2. Разрезать изображение на фрагменты и объединить их воедино с помощью таблицы, при этом отдельные фрагменты будут служить ссылкой;

3. Воспользоваться позиционированием элементов.

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

После того, как первый блок будет готов и воплощен в HTML, можно переходить к работе над следующим блоком. Здесь теперь уже фигурирует текст, поэтому происходит формирование стилевого файла, в котором затронуты следующие факторы:

1. цвет фона веб-страницы;

2. гарнитура основного шрифта, его размер и цвет;

3. размер текста отдельных модулей (новостей, например);

4. цвет, размер и гарнитура шрифта заголовков;

5. параметры горизонтальных линий и рамок.

Затем используя созданный CSS-файл, формируется окончательный HTML-документ главной страницы.

Часто дизайнер готовит макет не только главной страницы, но и остальных разделов, которые несколько отличаются по своему виду от уже проделанной работы (рисунок 7.3).

Рисунок 7.3 – Изображение макета для раздела «Байки»

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

1. корректно ли отображаются страницы в популярных браузерах?

2. происходит сохранение целостности данных при изменении размера шрифта в браузере как в большую, так и меньшую сторону?

3. можно продолжать работу с сайтом, если отключить показ изображений?

4. как существенно влияет на вид страниц разрешения монитора?

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

Итогом работы верстальщика является набор шаблонов повторяющих рисунки дизайнера, но сделанных в виде HTML-документов. А также стилевой файл, в котором прописаны не только атрибуты, необходимые для верстки, но и параметры основного текста, заголовков, подзаголовков и других текстовых элементов. Это позволяет по единым шаблонам формировать любое число веб-страниц, оформление и вид которых будет одинаков.