От задумки до готового сайта: HTML-верстка

Filed in: HTML Add comments

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

Процесс

Заказчик или начальник или директор, одним словом Босс, желая создать веб-сайт, обычно руководствуется своим представлением о веб-дизайне. Босс может посмотреть на похожие сайты, чтобы “сделать как у них”, может изложить пару идей и найти десяток картинок или фотографий, которые “обязательно должны быть на сайте”. Крайне редко Босс может структурно изложить свои мысли в виде письменного документа.

Получив от Босса наброски сайта “на салфетке”, картинки и ссылки на похожие сайты, Дизайнер открывает Photoshop и начинает создавать макет. В макете Дизайнер не только подбирает цвета, шрифты и стиль, но также разрабатывает элементы управления (кнопки, меню, таблицы).

С первой версией макета Дизайнер идет к Боссу. После фразы “мне все нравится, но давай переделаем несколько вещей” Босс обычно не оставляет камня на камне от разработанного дизайна. Не слишком довольный Дизайнер возвращается за свой Photoshop исправлять дизайн согласно пожеланиям Босса. Затем уже с исправленным дизайном, Дизайнер снова идет к Боссу. Этот процесс может повторятся не один и не два раза. На встречи с Боссом полезно взять Программиста, которому придется писать функциональность сайта. За каждой формой ведь стоит база данных, за каждой кнопкой логина стоит целая система аутентификации и контроля доступа. Программист должен соотносить программные компоненты с нарисованым интерфейсом и участвовать в процессе разработки дизайна.

Когда дизайн основных страниц сайта более-менее утрясен, Дизайнер передает результат своей работы (чаще всего – PSD-файлы, реже PNG) и заметки Верстальщику. Верстальщик, так же как и Дизайнер, открывает Photoshop (или Fireworks, если предпочитает PNG) и начинает прикидывать, как будет лучше расположить элементы HTML, чтобы нарисованый дизайн корректно отображался. Файл PSD “нарезается” на мелкие картинки, фоны, для текстов подбираются шрифты. Конечным результатом работы Верстальщика будет HTML и CSS код, а также мелкие картинки, файлы шрифтов и др. HTML-код описывает какие элементы будут располагаться на экране, а CSS-код будет описывать их взаимное положение, цвета, стили, шрифты текстов и так далее.

Нарезка

Процесс “нарезки” картинки верстальщиком в какой-то мере творческий, неформализуемый. С другой стороны, грамотный дизайнер позаботится о правильном расположении элементов по слоям в PSD/PNG, чтобы верстальщику не пришлось слишком потеть, вычленяя нужный элемент из общего рисунка. Например лого, или маленькая иконка в списке или менюшке – дизайнер с большой вероятностью вынесет их на отдельный слой и их будет легко подхватить верстальщику. Многие картинки придется вырезать с точностью до пикселя, чтобы избежать “мохнатых” кнопок, или чтобы заставить элементы правильно сопрягатся друг с другом. Вероятно иногда придется вырезать кусочек фона или длинные полоски толщиной в 1 пиксель – для различных фоновых градиентов или “распорок”.

Кодирование

В зависимости от выбранной стратегии, верстальщик может верстать либо “табличной” версткой, либо “блочной”. Табличная верстка сейчас применяется реже, и можно сказать, что она устарела, однако у нее есть свои положительные черты. Главное – это то, что каждый элемент можно легко позиционировать относительно верхнего левого угла ячейки таблицы, и он оттуда уже никуда не денется. На табличной верстке легче сделать “резиновый” дизайн, размеры которого изменяются в зависимости от ширины окна браузера. Разные браузеры более-менее одинаково отрисовывают таблицы, т.е. проблем с отображением сайта на разных платформах и браузерах будет меньше. Если не планируется переделывать дизайн в дальнейшем, то таблица может быть более удачным выбором.

Блочная верстка хороша при необходимости быстро сменить дизайн сайта или подстроить его под отображение скажем на мобильном устройстве. Блочная структура легче поддается распознаванию не-визуальными браузерами и “ботами” поисковых систем. В блочной верстке важно установить иерархию блоков (кто чей контейнер) и затем уже накладывать CSS-стили. Пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
</head>
<body>
  <div id="header">
    <div id="logo">
    </div>
    <div id="tagline">
    </div>
  </div>
  <div id="menu">
  </div>
  <div id="content">
  </div>
  <div id="sidebar">
  </div>
  </body>
</html>

Leave a Reply

You must be logged in to post a comment.