|
||||||||||||
Меню сайта
Реклама на сайте:
|
Что такое вёрстка сайта?Вёрстка сайта. Статья №1 При разработке сайта очень важно, чтобы он корректно отображался в любых браузерах и устройствах. Именно с этой целью и выполняется верстка сайта — описание его визуальной части программным кодом. В разработке сайтов вёрсткой называется перевод дизайн-макетов в интерактивный, читаемый браузерами вид. То есть, верстальщик пишет код, который формирует из предоставленного графического шаблона «живую» веб-страницу, с элементами которой может работать пользователь. Версткой называют процесс разработки электронных страниц с использованием специально предназначенных для этого языков: JavaScript, CSS и HTML.Верстка веб-сайта – это один из этапов разработки сайта, на котором верстальщик преобразует все нужные будущие составляющие сайта (заголовки, изображения, текст, видео) в HTML-теги и поверх накладывает CSS-ст Работа верстальщика важна, от нее зависит:
Определение верстки плотно пересекается с валидностью. Валидная верстка веб-сайта – это зачастую «чистый», красивый код, который «нравится» поисковикам.
Вёрстка правильно располагает все элементы на странице и делает так, чтобы с ними было удобно работать. Поэтому вёрстка сайта – это ответственная задача, требующая внимательности, терпения и постоянного тестирования Страница, у которой есть даже несущественные ошибки в коде, не пройдёт валидацию. Не стоит забывать, что самый хороший валидатор – браузер, так как восприятие сайта браузером – это восприятие сайта пользователем. Рассмотрим базовые правила качественной и правильной верстки сайтаНеобходимо, чтобы верстка была кроссбраузерной (Firefox, Google Chrome, Internet Explorer, теряющий в недавнее время свою популярность и других). Сайт нужно протестировать на различных разрешениях экрана, от 1024 на 768. Верстка всех страниц, которые имеет сайт, должна пройти валидацию. Применение разнообразных CMS, модулей и готовых скриптов, добавление на сайт наполнения разного формата часто делают прохождение валидности трудным делом. Внешний вид страницы, которую сверстали, должен максимально согласовываться с дизайном: размеры шрифтов, расстояния между строчками, отступы – все это должно быть согласно настройкам PSD-макета. Достигнуть точности до пикселей часто весьма проблематично, поэтому возможен разброс отдельных частей в пороге 3-6 пикселей. CSS-стили должны быть в другом документе. В HTML-коде могут находиться только идентификаторы и классы. Необходимо, чтобы логотип сайта ссылался на главную страницу. Нужно, чтобы на HTML-страницах находились комментарии к главным элементам: меню, заголовок, шапка, контент, футер и т.д. Идентификаторы и классы нужно называть согласно их назначению, они должны быть понятными (menu, footer, header и т.п.). В таблицах стилей убедительно рекомендуется применять одни и те же единицы измерения для всех величин. Обязательно следите за тем, чтобы текст на кнопках был на одном языке, был написан прописными буквами, или начинаться с заглавной. Делайте так, чтобы у кнопок был стандартный дизайн, их следует делать либо графическими элементами, либо настраивать при помощи таблиц стилей. Следите за тем,, чтобы HTML и CSS-код был как можно меньше. Заголовки следует писать только при помощи особых тегов h1, h2 и т.д. Атрибуты должны находиться всех тегов в кавычках. Есть несколько главных подходов к верстке веб-сайта:Фиксированная верстка. Если поменять размер окна браузера, то блоки не изменят свою ширину, а на экранах с низким разрешением будет полоса прокрутки. Резиновая верстка. В зависимости от размера окна браузера, ширина блоков изменится. Адаптивная верстка. Исполняется при помощи разных скриптов и сделана под конкретные разрешения (320, 768, 1024 и т.п.). Размер изменяется рывками после того, как достигает определенного уровня. Отзывчивая верстка. Это симбиоз адаптивной и резиновой версток. Эта верстка – самая тяжелая с технической точки зрения, но в это же время самой результативной. Версия веб-сайта для мобильных устройств. В сущности, это разработка отдельного сайта с другим дизайном, версткой и адресом.
Читайте также:
|