Интернет и с чем его едят

Верстка веб сайтов

Верстка веб сайтов - это создание полноценной html-страницы на основе созданного в графическом редакторе дизайна. 

Например, редактору газеты журналист сдал статью на 3 страницы. Она не читабельная. Дизайнер думает, как расположить блоки текста и картинки, чтобы разместить статью на 3х страницах журнала. Он делает шапку, красочные заголовки, размещает блоки текста, выделяя значимые моменты другими шрифтами. Находит и размещает картинки, делает обтекание их текстом. А наборщик (как и html-верстальщик) работает непосредственно с оборудованием, при помощи которого создается страница журнала и выводится на печать. Наборщик превращает картинку в готовую страницу журнала.

Что нужно знать для верстки сайтов? Графические редакторы (Photoshop), язык HTML, CSS, библиотеки Java Script (JS). 

Если мы нажмем в браузере правую кнопку мыши и выберем “Просмотреть HTML-код”, то увидим что-то подобное:

Это и есть сверстанная веб-страница.

Виды верстки

Табличная.

Для описания элементов применяются таблицы. Вся страница представляет собой скопление таблиц  <table>. В настоящее время такая верстка считается устаревшей.

Блочная.

HTML-документ представлен как совокупность блоков <div>.

Верстка сайта - с чего начать

Прежде всего, необходимо иметь макет дизайна, который обычно рисуется в Photoshop дизайнером. Верстальщик получает уже готовый макет. Внимательно рассмотрите предоставленный макет. Продумайте, с чего начать верстку. Помните, что все стили (размеры и виды шрифтов, заголовков, абзацев, картинок и т.п.) нужно выносить в отдельный файл. 

Вырежите иконки, кнопки, картинки. Сложите графику в отдельную папку.

Выпишите шрифты, которые необходимо будет отразить в CSS.

Создайте файлы index.html и styles.css (можно назвать их по-другому). HTML - это будущая сверстанная страница сайта, CSS - файл стилей. 

Начинайте с шапки - пропишите базовые элементы в теге head файла HTML. Здесь следует указать кодировку, путь к таблице стилей, title и т.д.

Стратегия верстки: с левого угла дизайн-макета по диагонали вниз начинайте описывать страницу. Сначала “одевайте” в HTML шапку сайта (слева-направо), потом спускайтесь ниже и заканчиваете переносом в код правой нижней части макета. Вы можете нарушить данное правило и производить верстку так, как вам удобно.

Сначала верстайте структуру веб-страницы в HTML. Затем в CSS выносите идентификаторы и классы (можно это делать параллельно с версткой). Каждый класс должен иметь адекватное название, которое дает понимание, что он означает. Смешно и непрофессинально выглядят названия типа “verh_shapki”, “cherny_shrift_konec” и т.п.

Закрывайте все теги, проверяйте правильность их вложения.

Работа над HTML заканчивается, и верстальщик полностью переходит на работу с файлом стилей - дополняет его, дорабатывает и т.п. 

Стилизация выполняется в определенном порядке. Сначала элементу задаются общие правила (фон блока, отступы), затем специфические свойства типа цвета рамок, размещение картинок внутри блока и т.п.).

Возвращайтесь обратно к HTML-файлу, если странице необходима динамика. Для этого предусмотрены JavaScript-библиотеки. Например, можно сделать меняющийся слайдер или адаптивное меню. Код библиотек должен быть минимизирован.

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

Изучите страницу на валидность (отсутствие ошибок в коде).

Какая верстка считается качественной

Блочная - с применением <div>.

Адаптивная. кроссбраузерная - страница ведет себя корректно в разных браузерах и на мобильных гаджетах.

Валидная - без ошибок в коде.

Текстовая. То, что можно сверстать в виде текста - не верстается “картинкой”. Поисковая система любит текстовый контент, поэтому данный факт должен учитывать каждый верстальщик.

Код минимально короткий, все стили вынесены в отдельный файл.

Все содержимое в html и css прописано строчными буквами.

Для тега <img> (картинки) обязательно указаны высота и ширина изображения.

CSS используется преимущественно. То есть если можно обойтись без JS - то динамика описывается в CSS. 

То же самое для картинок. Если спецэффекты для шрифта можно “наложить” при помощи CSS, то используется текст, а не картинка. 

JS файлы подключены внизу кода. Если вы подключаете их в head, то это плохо сказывается на скорости загрузки веб-страницы.

JS файлы объединены в один, по возможности.

Навигация по сайту реализована списками (ul, li) - поисковая система быстрее понимает такую навигацию.