Верстка

Вёрстка — создание структуры html-кода, размещающего элементы веб-страницы (текст, изображения, видео и прочее) в окне браузера, согласно намеченному макету, чтобы элементы дизайна выглядели аналогично макету.

Этапы

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

Полученный макет нужно отобразить в браузере. На этом этапе и вступает в работу верстальщик. Используя язык разметки html, он создает документы, которые понимает браузер и отображает их привычными всем веб-страницами.

Методы

При верстке можно выделить два основных метода:

  1. Табличная верстка;
  2. Блочная верстка.

Табличная верстка раньше была основной. Имеет сложную и объемную структуру кода (по сравнению с блочной). Чтобы изменить табличную верстку нужно затратить большое количество времени и усилий, долго вникать в уже существующую структуру.

Блочная верстка является основной в среде веб-разработчиков. В блочной верстке каркас документа состоит из тегов. Главным ее преимуществом является концепция семантической верстки, т. е. разделение содержимого и оформления.

Известны еще два метода: Вёрстка слоями и верстка фреймами, но в современной работе такие два метода практически не используются.

Макеты

Все сайты по макету вёрстки можно разделить на 5 групп:

  1. Фиксированные (фиксированная ширина);
  2. Резиновые (проценты);
  3. Эластичные (em);
  4. Адаптивные;
  5. Комбинированные.

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

Валидность

Валидность  — это соответствие HTML-верстки стандартам организации The World Wide Web Consortium (W3C). Отсутствие ошибок в вёрстке документа — один из основных показателей качества вёрстки. Автоматическая проверка вёрстки на ошибки может быть проведена как с помощью онлайн сервиса W3C, так и различными программами «валидаторами».

Программы

Для создание простых веб-страниц можно использовать даже обычный блокнот. Для более сложных проектов используют специальные html-редакторы. В профессиональной среде принято использовать следующие программы:

  • Notepad++;
  • Macromedia Dreamweaver;
  • Microsoft FrontPage;
  • NetBeans;
  • Coda.

Такие программы разделяются на обычные и визуальные редакторы. В профессиональной редко используются визуальные редакторы, так как в процессе верстки страницы, они дописывают много лишнего «мусорного» кода и ограничивают верстальщика в использовании всей гибкости кода.

Смотрите также:
Оглавление

Нашли ошибку в описании?
Напишите письмо.