Верстка сайта - процесс перевода картинки (формата .jpg, .gif, .png, обычно .PSD) в HTML-шаблон. Данная процедура является одним их этапов создания сайта.
На этапе создания сайта, дизайнер разрабатывает макет сайта. Для этого используются различные графические редакторы, обычно это Adobe PhotoShop и Corel. HTML-верстальщик приступает к верстке сайта после утверждения и передаче ему соответствующего макета.
Стандартное требование HTML-верстальщика, чтобы макет был в формате .PSD. Это позволяет ему быстрее и качественнее сверстать сайт, так как данный формат предполагает наличие в нём слоёв. Каждый слой – это один элемент. А так как верстка осуществляется по-элементно, то процесс верстки при наличии слоев занимает меньше времени.
В процессе верстки, html-верстальщик создаёт html-шаблон, где прописывается структура документа с использование специальных тегов. Из макета верстальщик вырезает необходимые элементы, оптимизирует их и вносит в html-шаблон. Задача верстальщика – идентичное отображение предоставленного макета и создаваемого им html-шаблона – с одной стороны. С другой стороны – html-шаблон должен быть оптимизирован по интернет (быстро загружаться, иметь интерактивные элементы, понятную структуру для программиста).
HTML-верстальщик в процессе создания html-шаблона оперирует не только знанием html-тегов для правильной верстки, а в том числе, должен понимать как правильно оформлять таблицы стилей(CSS), должен понимать как реализовываются интерактивные компоненты (JavaScript, jQuery). Качественный html-шаблон должен содержать в себе все ответы на вопрос «Как должна быть представлена информация на сайте?».
Есть четкие требования, описывающие качество html-шаблонов.
Различаю следующие типы верстки:
По принципу отображения:
1. Тянущаяся (резиновая). Проверить «резиновую» верстку можно очень просто. Откройте любую страницу в броузере, сделайте размер окна броузера чуть меньше, чем он есть. Если сайт при этом как бы сжимается-разжимается при изменении размера окна броузера, то верстка данного сайта называют – «резиновая».
2. Не тянущаяся (статическая). Не тянущиеся страницы при изменении размера окна броузера не меняют расположение элементов.
По принципу верстки:
• Табличная верстка сайта
• Верстка с использованием DIV(дивная верстка сайтов)
Табличная верстка – верстка с использованием тега <TABLE>, который позволяет создавать HTML-шаблон, вписав элементы в ячейки таблицы. По-сути, при табличной верстке весь объект верстки разбивается на ячейки таблицы. Верстальщик настраивает необходимый вид таблицы и его параметры. Ячейки таблицы заполняются соответствующими элементами дизайна.
Базовые теги, описывающие структуру сайта: <TABLE> <TR> <TD>
Под версткой DIV-ами(блоками) понимают такое использование верстки, когда элементы верстки разбиваются на блоки(мелкие части). Каждый блок - это отдельный элемент сайта, которым можно удобно управлять и модифицировать.
Основные преимущества верстки дивами(блочная верстка) по сравнению с табличной:
1. Уменьшение размера html-шаблона, а следовательно и веб-страницы. Громозкие табличные структуры заменяются изящными блоками, что может привести к существенному сокращению размера html-шаблона.
2. Следствие уменьшения объема является уменьшение времени загрузки веб-сайта. Размер CSS-файла вырастает, но так как он загружается один раз, а дальше хранится в броузере, загрузка такой верстки происходит быстрее.
3. Удобство сопровождать, вносить изменения в верстку сайта. Все ключевые элементы оформления вынесены в CSS и разбиты по блокам. Иногда даже не нужно трогать саму верстку, достаточно изменить файл стилей.
4. Верстка блоками лучше воспринимается поисковыми системами. В силу того, что верстка блоками имеет меньший размер, а также имеет возможность управлять расположением блоков внутри файла, страницы, оптимизированные по SEO при всех равных, будут лучше, чем имеющие табличную верстку.
Для успешной верстки div-ами Вам необходимо обладать знаниями CSS.
Основным минусом вертки div-ами(блоками) принято считать сложность адаптации верстки по все броузеры. Дело в том, что разные броузеры по разному отрабатывают те или иные директивы CSS.
Верстка сайта
