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

Тема: Веб-разработка  |   Дата: 23.05.2014   |  Автор: Александр Длабик

Вёрстка дизайна сайта

Вёрстка сайта — это преобразование макета страницы в понятный браузеру вид с помощью гипертекстовой размётки (языки HTML, XHTML, XML). Проще говоря, это создание структуры сайта, без наполнения его содержанием. Которая в дальнейшем станет каркасом для размещения всей необходимой web-ресурсу информации (текста, картинок, аудио- и видеоматериалов, баннеров, всплывающих окон и др.).   

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

Стоимость вёрстки сайта зависит от многих параметров, начиная от способа вёрстки, заканчивая масштабом работы. Одно дело сверстать 3-4 страницы и совсем другое - создать гигантский корпоративный портал.  Самой дорогой будет ручная вёрстка сайта с нуля, когда от верстальщика требуется написать полностью оригинальный код, максимально отличающийся от всех существующих, но при этом абсолютно валидный (соответствующий стандартам W3C). Однако в большинстве случаев шаблонная вёрстка сайтов лучше оправдает себя, поскольку занимает меньше времени и заранее оптимизирована под требования браузеров и поисковиков. Используя шаблоны, верстальщик использует чужую модель, лишённую недостатков оригинальной продукции, хотя и теряет при этом уникальность. Впрочем, большинству пользователей важнее, чтобы страницы сайта быстро загружались, хорошо читались и содержали полезную информацию. 

Как верстается сайт? 

Существует несколько видов вёрстки сайтов. Каждый из них имеет свои преимущества и недостатки. Профессиональный верстальщик должен уметь обращаться с каждым из них, иначе его сайты будут содержать массу ненужных ошибок:

• слишком «неудобоваримый», грязный код;
• локационные нарушения в используемых тегах (семантическая вёрстка сайта);
• игнорирование требований поисковых систем (информация о кодировке страниц, title, description, заголовки h1 – h6);
• не эффективное использование свободной площади веб-страницы (резиновый сайт, сайт с фиксированной шириной страницы).  

Наиболее популярные способы web-вёрстки сайта:

1. Шаблонная вёрстка сайта. Не требует глубоких познаний в HTML. Даёт великолепные результаты, если используется как фундамент, на котором опытный верстальщик «достраивает» необходимые ему элементы.
2. Автоматическая вёрстка сайта. Выгодна начинающим верстальщикам и пользователям, желающим самостоятельно создать свой сайт без погружения в тонкости мастерства. На сегодняшний день существует ряд программ для вёрстки сайтов, переводящих разработанный дизайн-макет в понятный браузерам вид.
3. Вёрстка сайта с помощью слоёв. Этот способ позволяет наслаивать различные элементы сайта друг на друга с точностью до пикселя, благодаря чему можно создавать различные эффекты (всплывающие окна, разворачивающиеся баннеры, анимационные сюжеты и др.). Требует от верстальщика глубоких познаний и, что немаловажно, чувства меры.
4. Табличная вёрстка сайта. Она проста, интуитивно понятна пользователям и позволяет великолепно структурировать информацию. Но при этом менее «интересна» роботам поисковых систем и занимает слишком много трафика. При медленном соединении пользователя с Интернетом, такие сайты будут слишком долго загружаться, что негативно отразиться на желании пользователя  «познакомиться с сайтом поближе».
5. Верстка сайта CSS. Каскадные таблицы стилей – это своеобразный способ сайту «похудеть», избавиться от лишних элементов, сделать структуру более стройной и логически обоснованной. Даёт великолепные результаты при использовании в блочной вёрстке.
6. Блочная вёрстка сайта. DIV верстка является одной из самых популярных технологий разметки веб-страниц. В её основе лежит шаблон, состоящий из набора блоков, определённым образом размещённых на странице. Сайт, сверстанный таким образом, имеет очень простую и понятную пользователям структуру. Это оправдывает себя, хотя и существенно ограничивает полёт фантазии создателя сайта.

Как сделать вёрстку сайта? 

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

Бесплатная вёрстка сайта может стать реальностью после принятия решения заняться вёрсткой самостоятельно.  В этом случае хорошим подспорьем станут: видео-уроки по вёрстке сайтов, самоучители (Например, «Вёрстка сайта с нуля» - Русаков), мастер-классы и рекомендации профессиональных верстальщиков, а также профессиональные программы (WYSIWYG редакторы, текстовые редакторы или редактор HTML для написания и редактирования кода, различные графические программы для «нарезки» дизайн-макета).  

Если же ни желания, ни времени для самостоятельной вёрстки - нет, то лучше всего обратиться к профессионалам. В идеальном варианте вёрсткой сайта должна занимается та же компания, которая разрабатывает дизайн, отвечает за наполнение контента и даже за его дальнейшее продвижение в сети. Благодаря этому удаётся создать практически беспроблемный ресурс, адекватно отображающийся в любом браузере (Opera, Google Chrome,  Internet Explorer, Mozilla Firefox, Safari, Netscape Navigator и др.) и «нравящийся» как популярным поисковым системам (Google, Yandex, Meta), так и посетителям. Если же дизайн-макет и текстовое наполнение уже есть, можно воспользоваться услугами верстальщика-фрилансера. Который, за оговоренное время, выполнит вёрстку, согласно вашей задумке.