"Истина где-то рядом."

Уроки HTML

Скрипты PHP

Шаблоны HTML

Меню сайта
Уроки HTML
Уроки CSS
HTML5
Скрипты JAVA
Вёрстка
Графика
Обзор хостингов
Дополнительно


Реклама на сайте:




Что такое вёрстка сайта?


папка digest

Вёрстка сайта

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

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

Версткой называют процесс разработки электронных страниц с использованием специально предназначенных для этого языков: JavaScript, CSS и HTML.

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

Работа верстальщика важна, от нее зависит:

  • Скорость загрузки веб-сайта.
  • Соответствие стандартам HTML.
  • Нормальность отображения в браузере.
  • Соответствие требованиям поисковиков.
  • Оптимизация под разные дисплеи пользователя.

Определение верстки плотно пересекается с валидностью. Валидная верстка веб-сайта – это зачастую «чистый», красивый код, который «нравится» поисковикам.

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

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

Страница, у которой есть даже несущественные ошибки в коде, не пройдёт валидацию. Не стоит забывать, что самый хороший валидатор – браузер, так как восприятие сайта браузером – это восприятие сайта пользователем.


Рассмотрим базовые правила качественной и правильной верстки сайта

Необходимо, чтобы верстка была кроссбраузерной (Firefox, Google Chrome, Internet Explorer, теряющий в недавнее время свою популярность и других). Сайт нужно протестировать на различных разрешениях экрана, от 1024 на 768. Верстка всех страниц, которые имеет сайт, должна пройти валидацию. Применение разнообразных CMS, модулей и готовых скриптов, добавление на сайт наполнения разного формата часто делают прохождение валидности трудным делом. Внешний вид страницы, которую сверстали, должен максимально согласовываться с дизайном: размеры шрифтов, расстояния между строчками, отступы – все это должно быть согласно настройкам PSD-макета. Достигнуть точности до пикселей часто весьма проблематично, поэтому возможен разброс отдельных частей в пороге 3-6 пикселей. CSS-стили должны быть в другом документе. В HTML-коде могут находиться только идентификаторы и классы. Необходимо, чтобы логотип сайта ссылался на главную страницу.

Нужно, чтобы на HTML-страницах находились комментарии к главным элементам: меню, заголовок, шапка, контент, футер и т.д. Идентификаторы и классы нужно называть согласно их назначению, они должны быть понятными (menu, footer, header и т.п.). В таблицах стилей убедительно рекомендуется применять одни и те же единицы измерения для всех величин.

Обязательно следите за тем, чтобы текст на кнопках был на одном языке, был написан прописными буквами, или начинаться с заглавной.

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

Заголовки следует писать только при помощи особых тегов h1, h2 и т.д. Атрибуты должны находиться всех тегов в кавычках.


Есть несколько главных подходов к верстке веб-сайта:

Фиксированная верстка.

Если поменять размер окна браузера, то блоки не изменят свою ширину, а на экранах с низким разрешением будет полоса прокрутки.

Резиновая верстка.

В зависимости от размера окна браузера, ширина блоков изменится.

Адаптивная верстка.

Исполняется при помощи разных скриптов и сделана под конкретные разрешения (320, 768, 1024 и т.п.). Размер изменяется рывками после того, как достигает определенного уровня.

Отзывчивая верстка.

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

 



Создано|Обновлено: 18.10.2020.