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