Продуманы стили всех заголовков, абзацев, картинок, списков в контентной части документа.
Структурированный код, который наглядно показывает все закрывающие и открывающие теги.
Инструменты верстальщика
Обработка изображений: Adobe Photoshop, Gimp.
Работа с кодом: Notepad++, Adobe DreamViewer, SublimeText, CoffeeCup HTML Editor, UltraEdit,Firebug, Winless, CSS3 Generator
Работа с JS: Front Page, NetBeans.
Проверка на кроссбраузерность и валидность: Crossbrowsertesting, IE Tester, Dr Watson, Validator.w3, Css validator, Markup validtor.
Зачастую к верстке относятся “спустя рукава”, а подобный подход может загубить самый привлекательный дизайн, удобный функционал и топовые места веб-проекта. “Скачущие” по экрану элементы вводят в заблуждение пользователей, усложняют навигацию и снижают лояльность посетителей, что губительно сказывается как на поведенческих факторах, так и на продвижении веб-ресурса в целом. Поэтому правильной верстке при создании сайта следует уделить должное внимание.
Верстальщик сайтов
Веб верстальщик сайтов - это специалист веб-студии, создающий полноценные HTML-страницы из нарисованного дизайна.
Кто такой верстальщик и чем он занимается
Как известно, над разработкой сайта трудятся несколько технических специалистов: дизайнер, верстальщик и программист.
Рассмотрим их работу на примере производства автомобилей. Дизайнер рисует внешний вид авто. Верстальщик делает по эскизу основу - каркас автомобиля и создает все основные (самые простые) внутренности. Программист доделывает сложные механизмы и заставляет автомобиль “поехать”. В общем, веб-верстальщик - связующее звено между разработанным дизайном и полноценным автомобилем.
Рассмотрим подробнее, чем занимается каждый технический специалист при разработке сайта.
Веб-дизайнер - создает картинку в графическом редакторе. именно он определяет, как внешне будет выглядеть веб-сайта.
Веб-верстальщик - “разрезает” дизайн на кусочки, и вставляет каждый кусок в html-код. Получается полноценная веб-страница, с которой можно работать в браузере.
Программист - на основе веб-страницы подключает систему удаленного управления контентом (CMS).
Как выглядит страница, когда она поступает в работу верстальщику? Это обычный файл.psd в слоях. После того, как специалист делает верстку - то внешне страница остается такой же, но “изнутри” она приобретает определенный код.
Графический файл сначала анализируется, затем он разрезается, и верстается HTML-страница пошагово:
Создается таблица стилей CSS, где определяется цветовая гамма, шрифты и расположение элементов
Разрабатывается меню и другие элементы управления веб-ресурсом.
Макет страницы сравнивается с макетом дизайна на полное возможное дублирование.
Документ тестируется в разных браузерах и на разных разрешениях экрана.
В результате получается HTML-шаблон страницы. Если CMS к сайту не подключается, то страницы размножаются и наполняются контентом. Если к работе приступает программист, то он подключает CMS, затем сайта наполняется информацией и только после этого выкладывается на хостинг.
Что должен знать веб верстальщик сайтов
Язык разметки гипертекста - HTML.
Методы работы со стилями - CSS.
Основы JavaScript, jQuery.
Инструменты для HTML-верстки, проверки кода на валидность.
Основы работы в графических редакторах. Как правило, дизайн веб-сайта создается в Фотошопе.
Основы PHP.
Основы английского.
Инструменты для HTML-верстки
Верстать веб-сайты можно вручную в Notepad, но на это уходит много времени и сил. Поэтому разработаны специальные программы и плагины, облегчающие верстку: DreamWeaver, Amaya, KompoZer, Sublime, Komodo, Firebug, и другие.
Три кита HTML-верстальщика
Качественный валидный код. При проверке кода не должны выдаваться ошибки.
Юзабилити. Пользователям должно быть легко на сайте.
Адаптивный дизайн. Сайт должен корректно отображаться в разных браузерах и на мобильных гаджетах.
Где найти работу