Что такое верстка сайта простыми словами

Гайд для веб-дизайнеров по подготовке макетов для быстрой верстки

В принципе, многое описано в статье «Как стать крутым веб-дизайнером», но здесь я приведу основные пункты именно по подготовке макетов к верстке и правильной организации работы, которые, соответственно, ускорят работу в целом:

1. Не увеличивайте фотографию больше ее оригинального размера — в верстке такое фото будет некачественным;
2. Не масштабируйте графику непропорционально — такой дефект версткой точно не исправить ;-);
3. Не применяйте режимы наложения слоев, отличные от обычного (Normal) — в верстке НЕВОЗМОЖНО воспроизвести какие-либо режимы наложения, как в графическом редакторе;
4. Старайтесь не применять фильтры на изображения, которые должны иметь несколько состояний (обычно и при наведении, например). Все наложения, изменения — только посредством наложения нового слоя. Все должно быть легко воспроизведено в HTML верстке. К ретуши и подготовке фото это не относится;
5. Не масштабируйте фотографию до конвертации в смарт объект — верстальщик сам определит размер изображения в Responsive верстке, сохраняйте оригинал смарт-объекте;
6. Обрезайте фотографию только посредством обтравочной маски для фигуры, оригинал фотографии, как и в предыдущем пункте, должен быть сохранен в смарт объект — не забывайте: «Каждый раз, загружая изображение для сайта и скругляя его вручную в фотошопе, где-то в мире плачет один котенок…»;
7. Если вы рисуете иконки в Photoshop, не растрируйте их в уменьшенном размере. Не забывайте, что макету еще предстоит этап верстки и все иконки необходимо будет векторизовать. Оригинальные смарт объекты с иконками должны быть достаточно крупными для качественной трассировки;
8. В идеале, у вас должны быть все плоские иконки и графика в формате SVG, в отдельной папке. Если вы ленивый дизайнер — предусмотрите возможнсть качественной конвертации или экспорта иконок в SVG;
9. Всегда создавайте отдельную папку со всеми используемыми шрифтами в формате TTF или OTF. Иконочные шрифты также должны быть размещены в этой папке;
10. Создавайте макеты 1 в 1 (72 пикс. на дюйм). При 100% отображении макеты должны быть в таком же масштабе, в котором предполагается результат HTML верстки;
11. Обязательно используйте в работе какую-либо систему сеток. Можно разработать самому, но я рекомендую использовать систему сеток Bootstrap. Ширину контента можно кастомиировать от оригинальной ширины Bootstrap сетки, для этого можно использовать плагины для создания сеток в случае, если вы пользователь Photoshop;

Создание левой панели

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

Ситуации, когда приходится дорабатывать оформление «на ходу», встречаются довольно часто. Расстояние между меню и основным содержимым позволяет нам вставить подпункты, однако интересен фокус с исчезновением и появлением подменю.

В файл CSS впишите следующий код.

#left
{
	padding: 10px;
	width: 237px;
	padding-right: 1em;
}

#left h3
{
width: 225px;
height: 25px;
font-size: 14px;
font-weight: bold;
padding-left: 15px;
padding-top: 15px;
text-transform: uppercase;
color: #ffffff;
background: url(images/title.gif) no-repeat
}

#left ul {
	margin: 0;
	padding: 10px;
	list-style: none;
	width: 100px;
	font-size: 18px;
}

#left li ul {
	position: absolute;
	left: 90px;
	top: 0;
	display: none;
}

#left ul li {
	position: relative;
	margin-bottom:20px;
} 

#left ul li a {
	display: block;
	text-decoration: none;
	color: #ffffcc;
	background: #ff9900;
	padding: 5px;
	border: 1px solid gold;
	border-bottom: 0;
} 

#left li:hover ul {
	display: block;
}

#left li li {
	margin-bottom:0px;
	width: 150px;
}

#left p
{
padding: 10px;
border-bottom: 1px solid #D72020;
border-left: 1px solid #D72020;
border-right: 1px solid #D72020;
}

Обратите внимание на правила классов ul и li — секрет исчезновения меню находится там, раскройте его самостоятельно. В контейнер left HTML-документа добавим сначала информационный блок без меню

В контейнер left HTML-документа добавим сначала информационный блок без меню.

<h3>Информация</h3>
	<p>Мы предлагаем Вам праздничные скидки. <a href="http://test1.ru/news.php">Далее...</a></p><br />
	<h3>Меню</h3>

Белый фон распространился ещё ниже по странице.

Теперь самое время вставить в HTML-файл код меню левой панели. Оно, в отличие от верхней навигации, реализовано списками, что можно было заметить ещё из CSS-правил.

• Галерея
  • Кухни
  • Кровати
  • Стенки
  • Прихожие
  • Шкафы-купе
  • Компьютерные столы
• Договор
• Прайс
  • Кухни
  • Кровати
  • Стенки
  • Прихожие
  • Шкафы-купе
  • Компьютерные столы
• Образцы
  • Стекло
  • ДСП
  • Фурнитура
  • И т.д.
• Контакты
• Важно

Взгляните, как смотрится список. Многие могут подумать, что это таблица.

Подменю работает, надо только подвести мышку к пункту, его содержащему (у нас это Галерея, Прайс и Образцы).

Эмпатия — главный soft skill верстальщика

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

Ещё важнее понимать, что такое доступность. Удобно ли пользоваться сайтом слабовидящему или человеку с нарушениями опорно-двигательного аппарата, который работает только с клавиатурой? Таким сегментам пользователей нужно упростить взаимодействие с сайтом — продумать, каким будет input и максимально описать label. Бывает, визуально сайт хорош, а скринридер не может объяснить, для чего нужно текстовое поле.

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

Сразу отвечу на самые ожидаемые и каверзные вопросы по верстке:

1. Adobe Muse и подобные инструменты? — да, можно использовать и это будет быстро. Если только ваш проект не крупнее односложного одностраничника, который не нуждается в развитии, продвижении и системе управления.

2. Как быть с Perfect Pixel? — я искренне уверен, что Responsive Design и Perfect Pixel понятия разные и даже не совместимые. Я, как веб-дизайнер, конечно, обладаю некоторыми чертами перфекциониста, но если идея хороша, она будет блистать и в Responsive верстке, если идея плохая, то хоть сколько ее не полируй и подгоняй по пикселам, она не будет работать в результате. Поэтому включите ваш дар убеждения, запаситесь аргументами и проведите беседу с вашим клиентом относительно бесполезности такого излишнего перфекционизма.

3. Почему бы все картинки не сделать спрайтами, ведь тогда будет всего один запрос к серверу? — есть изображения, которые должны загружаться контент-менеджером. Вряд ли контент-менеджер сможет быстро и безболезненно вычислить координаты новой добавленной в спрайт картинки. Не забывате о тех, кто будет обслуживать и наполнять сайт.

4. Где кончается грань верстки и начинается Front-End, это разве не одно и то же? — все просто, если стоит задача разработать сложный интерактивный интерфейс какого-либо сервиса или веб-приложения, где нужна тесная работа с базой данных — это Front-End. Такие уникальные проекты выходят за рамки области компетенции и бюджета одного фрилансера, чаще всего подобные задачи ставятся команде разработчиков и подходы к таким проектам совершенно другие.

Другие уроки по теме «HTML и CSS»

• HTML верстка макета Figma. Часть 2 | Создание коммерческого сайта от А до Я. Урок 17
• HTML верстка макета Figma. Часть 1 | Создание коммерческого сайта от А до Я. Урок 16
• Создание крутого Swiper-слайдера от А до Я. Джедай верстки #8. Материалы курса
• Адаптивная верстка галереи без JS. HTML + CSS target. Работа с изображениями (Retina img)
• Адаптивная HTML верстка вертикального таймлайна
• Bootstrap 4. Сетка. Подробное руководство

Идеальная вакансия

Коля Шабалин, автор и преподаватель курсов в Академии, написал скрипт и проанализировал вакансии на hh и Хабр-карьере, выделил требования и посчитал, какие встречаются чаще. Оказалось, что усреднённая вакансия выглядела бы как-то так:

Требуется верстальщик, который:

• Умеет делать адаптивную кроссбраузерную оптимизированную вёрстку, совместимую с современными браузерами. В вёрстке использует SVG.
• Идеально знает CSS. Использует препроцессор Sass. Знает флексы. Умеет делать CSS-анимации и использует БЭМ. Знает библиотеку Bootstrap.
• Знает HTML. В своей работе использует Сanvas. Шаблонизирует HTML с помощью PUG.
• Использует Git. Умеет работать в GitHub.
• Может натянуть вёрстку на CMS: Bitrix и Wordpress.
• JavaScript пишет с помощью jQuery, но не чурается ES6.
• Умеет автоматизировать свою работу с Node.js, npm-скрипты, Autoprefixer, Gulp или Webрасk.
• Уверенно владеет Photoshop и Illustrator или знает Figma или Sketch.
• Имеет своё портфолио, инициативный, готов пройти испытательный срок

Уроками информатики, как видите, даже не пахнет. Много непонятных слов, давайте разберёмся.

Hard skills верстальщика

Расстрою ленивых — одними HTML и CSS вы не обойдётесь. Полезных технологий и инструментов много, однако есть must have для любого верстальщика. Перечислю всё необходимое.

Основы дизайна. Верстальщик должен владеть базовыми концепциями UX/UI. Например, понимать, почему 12-й размер шрифта слишком маленький, а светло-серый цвет на белом фоне смотрится так себе. Для начала можно прочитать книгу Стива Круга про веб-юзабилити «Не заставляйте меня думать». Это бессмертная классика для всех, кто работает с вебом.

Кадр: фильм «Волк с Уолл-стрит»

Препроцессоры. С препроцессорами вёрстка идёт удобнее и быстрее. Например, c SASS можно использовать переменные и функции в CSS, а с Pug — то же самое, только в HTML. Кроме того, с Pug можно создавать вложенные конструкции без скобок и даже взаимодействовать с JavaScript-кодом.

Пример кода Pug. Скриншот: предоставлен автором

Pug не расширяет язык, но позволяет использовать фишки, которых нет в HTML, например циклы. Представим, что нужно вывести 5 карточек товаров на статичном сайте. Способ в лоб: сверстать на HTML одну карточку, скопировать её 5 раз и в каждой копии изменить данные. А если карточек не 5, а 100? В Pug можно создать шаблон карточки, чтобы не пришлось выполнять одну и ту же работу много раз.

SASS решает аналогичные задачи. Например, у нас есть шаблон кнопки — он представляет собой набор стилей, который наследуют другие элементы button на странице. Без препроцессора нам пришлось бы копировать все стили и создавать отдельный класс для каждой кнопки. А с SASS мы лишь переопределим некоторые свойства класса. Можно даже сделать миксин — такой шаблон, который мы назовём button и будем вызывать каждый раз, когда понадобится очередная кнопка.

Пример миксина в SASS. Скриншот: предоставлен автором

Ещё один пример. Допустим, дизайнер создал 50 иконок с пятью размерами — и для каждой нужно создать отдельный класс. Можно действовать прямолинейно: 50 раз скопировать селектор и во всех копиях поменять название. А можно создать массив в SASS и в нём сделать 50 иконок. В общем, гораздо проще запрограммировать препроцессор, чем писать всё вручную.

Bootstrap и другие фреймворки. В Bootstrap все настройки находятся в одном файле _variables.scss, что значительно упрощает код и его понимание. В этом же файле указаны все цвета, параметры закругления кнопок и элементов, шрифты и отступы — их легко установить с помощью одной переменной.

Пример кода Bootstrap. Скриншот: предоставлен автором

Рекомендую изучить хотя бы один популярный фреймворк — ведь в коммерческой разработке вы неизбежно с ними столкнётесь. А зная один фреймворк, вы уже относительно быстро разберётесь с другими — как с документацией, так и с кодом. Учтите, что в документации Bootstrap описаны только основные моменты, освоить его по-настоящему можно только в процессе разработки.

JavaScript. Как минимум, нужно умение подключать сторонние библиотеки или настраивать слайдер. Верстальщик не только работает со стилем, но и создаёт базовые функциональные элементы, проверяет, как ведут себя кнопки и отправляются данные. В проектах я часто пишу что-то несложное на JavaScript: слайдеры, переключатели и простенькую анимацию. Всё это собирается на ванильном JS — и это must have. А если в команде пишут на React, то и его придётся освоить на базовом уровне.

Сборщики (например, Webpack). Если научитесь запускать их по инструкции, этого будет достаточно. Начинающему верстальщику не нужно глубоко понимать сборщики, потому что на проекте с ними, как правило, работают фронтендеры.

Виртуальные окружения. Хватит умения разворачивать и настраивать их, прокидывать пакеты, переустанавливать переменные.

Кроме того, вам наверняка пригодятся и дополнительные инструменты:

• Git — чтобы хранить проекты и управлять ими.
• Docker — чтобы упаковывать проекты со всеми окружениями и зависимостями (если Docker используют в компании).
• Командная строка Linux или macOS — чтобы автоматизировать работу.
• Node.js — чтобы устанавливать, обновлять и удалять npm-пакеты.

Остальное зависит от того, какие технологии используют в конкретной компании. Где-то пишут на PHP, а где-то на Ruby или Python. Например, у нас в Hexlet верстальщики даже иногда копаются в Ruby и строят бизнес-логику под компоненты, которые верстают. Но это скорее исключение, чем правило.

Как учиться новичку?

Учебных материалов и ресурсов по вёрстке сейчас море. У меня есть несколько любимчиков, которых я рекомендую всем начинающим.

Книги. Тут советую быть осторожнее, потому что значительная часть книг про HTML и CSS — на английском языке. И пока их переведут, стандарты уже поменяются. Но есть хорошие книги — сборники рецептов. Например, «CSS для профи» Кита Гранта или «Секреты CSS. Идеальные решения ежедневных задач» Леа Веру. Лучше проверять примеры, потому что стандарты меняются часто и некоторые рецепты уже могут устареть.

Сайты. Есть прекрасный портал CSS-Tricks, на котором выкладывают сборники рецептов и примеры кода. Также можно посмотреть авторов на CodePen — там публикуют код и примеры вёрстки, решения задач, организовывают конкурсы по вёрстке.

На YouTube есть классный канал keyframers со стримами по анимации. Мы тоже проводим вебинары и публикуем видеоуроки у себя на канале. Некоторые из них веду я. Ещё советую сайт и подкаст Вадима Макеева и CSS-LIVE с переводами актуальных статей.

Курсы. Основная ошибка новичков при самостоятельном обучении — идти за новым, пропуская базу. В результате они знают, что такое гриды, но не понимают, что такое потоки документов, как они друг на друга накладываются и как этот порядок изменить. Особенно сильно это мешает на практике, в коммерческой разработке.

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

Однако надо помнить, что курсов недостаточно, чтобы войти в новую профессию. Ни одна школа не даст достаточного количества практики, поэтому ещё во время обучения постарайтесь придумать для себя интересные проекты или набирайтесь опыта на фрилансе. Худшая стратегия — ограничить себя задачам с курсов, учебными проектами и тренажёрами.

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

Вырасти с нуля до уровня «могу сверстать лендинг» можно за месяц. Нужна лишь практика — и не только дома, но и в коммерческой разработке. Здорово, если после нескольких учебных проектов вы устроитесь на работу и будете набивать шишки в продакшне.

Кадр: фильм «История игрушек»

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

И наконец, развею один большой миф. Некоторые ребята говорят, что верстать — это просто. Я соглашусь с этим утверждением, но только если речь о начальном уровне. Чем дальше, тем сложнее. Я в IT больше десяти лет и не могу сказать, что идеально знаю вёрстку. До сих пор, читая статьи и переводы, я узнаю что-то новое. Так что процесс обучения бесконечен.

Виды верстки сайтов

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

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

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

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

Табличная верстка или верстка таблицами

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

Сегодня так страницы уже не верстают. Поисковики также не любят такие страницы и плохо их индексируют. Если вам нужно, вы можете разместить на странице таблицу или несколько, но не нужно делать с их помощью структуру страницы.

Блочная верстка, верстка блоками или div-верстка.

Это, пожалуй, самая распространенная верстка сегодня. Сетка страниц конструируется из множества блоков

и , которые вложены друг в друга. Для доступа к ним используются атрибуты id и class. Откройте исходный код (Ctrl + U) практически любой веб-страницы, и вы увидите такую верстку.

Адаптивная верстка или мобильная верстка

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

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

Гибкая верстка или flex верстка

Сначала применяется блочная верстка, а потом нужные блоки превращают во флекс-контейнеры (флексбоксы). Если говорить сложным языком, в стилях элемента указывают display: flex; элементу можно указать направление главной оси и выравнивание. Эти возможности стали доступны с приходом стандарта CSS3. Теперь страницы становятся очень гибкими. Если по-простому – элементы объединяются в специальные контейнеры, задаются простые настройки и браузеры сами выстраивают элемент максимально органично. Этот механизм является наиболее перспективным, и, хотя технология плохо поддерживается старыми браузерами, в будущем ее применения будет расширяться.

Также хорошая верстка должна обладать некоторыми свойствами.

Семантическая верстка

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

Валидная верстка или по-другому верстка без ошибок

Это верстка, выполненная в соответствии со стандартами W3C. Проверить HTML-страницу на корректность вы можете с помощью специального валидатора W3C, а невалидно сверстанные страницы нагоняют.

Кроссбраузерная верстка.

Как понятно из названия, при такой верстке страницы выглядят одинаково в разных браузерах

Сейчас, при всем многообразии используемых программ, очень важно, чтобы все пользователи видели на экране одно и то же, чтобы ничего не съезжало и не перекашивалось

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

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

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

Как формируется цена

Чтобы сберечь нервы и время, вёрстку всё же стоит доверить профессионалам. На неё у каждого издательства и фрилансера свои расценки. Одни назначают начальную цену за полосу, другие — за авторские листы. Всё зависит от целей, которые преследует клиент, а также от объёма работ и степеней сложности. В среднем это выглядит так:

• обычный текст и текст без шрифтовых выделений;
• текст с двумя-тремя выделениями, простой колонтитул;
• обтекание текста, текст со сносками, более трёх-пяти выделений текста, оформление колонтитула и колонцифры;
• не более трёх объектов на странице, включая таблицы и изображения, формулы, выноски, сложное обтекание и т. д.;
• текст с большим количеством иллюстраций и выносками.

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

Диапазон цен можно назвать только приблизительный, так как каждый случай индивидуален. Обычно это 20–50 ₽ за страницу. Но за вёрстку страницы альманаха, энциклопедии, подарочного или корпоративного издания могут запросить и все 500 ₽.

Отличия от frontend-разработчика

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

В отличие от верстальщика frontend-разработчик не только переводит макет на понятный язык для браузера, но еще и добавляет интерактивные элементы. Он знает JavaScript, AJAX, CORS, PHP, создает и адаптирует чат-ботов, формы заказов и другие технические элементы, которые верстальщики не умеют делать. Frontend-разработчика можно сравнить с начинающим программистом.

Подробнее о том, кто такой frontend-разработчик и как им стать, вы можете узнать из нашего обзора.

Как начать работать веб-верстальщиком, и сколько за это платят?

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

Также получить исчерпывающие ответы на вопрос, кто это такой дизайнер-верстальщик, и что он делает, а также обзавестись необходимой базой знаний вы можете на следующих ресурсах:

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

Есть и другие сайты, где можно получить базовые знания, а также выработать определенные навыки работы с версткой        . Но указанные выше ресурсы по праву считаются лучшими, и являются самыми популярными.

Заплата веб-верстальщика

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

За 1 проект можно получить от 2000 до 15 тыс. рублей – все зависит от направленности ресурса и стартового капитала заказчика

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

Методы и этапы вёрстки

Процесс верстки сайта можно фактически разделить на два основных этапа:

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

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

1. Табличная верстка
2. Верстка слоями
3. Блочная верстка

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

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

Наиболее популярной и перспективной сегодня является блочная верстка сайта, которая активно использует два основных инструмента тег и таблицы стилей CSS. Данный метод довольно сложен, однако, раскрывает большие возможности для верстки, позволяя создавать как простые блоги, так и серьезные социальные порталы.

Тег определяет различные блоки HTML-кода, разделяя последний довольно гармонично и четко, выделяя все элементы из общей структуры. При блочной верстке код получается более логически понятным, а главное — компактным и аккуратным. В данном методе блоками являются не только элементы дизайна сайта, но и компоненты семантической разметки (заголовки, параграфы, списки), а также различные графические изображения.

Стоит также сказать, что при блочной верстке индексирование сайта поисковыми роботами происходит более активно, нежели при табличной верстке.

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

Правильность верстки сайта определяет такой показатель, как валидность HTML-верстки. Она подразумевает уровень соответствия верстки установленным стандартам организации «W3C» (Консорциум Всемирной паутины). Для того чтобы проверить валидность сайта, можно воспользоваться специальным сервисом W3C или другими аналогичными программами.

Этапы верстки

Сверстка состоит из следующих главных этапов:

Оценка.

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

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

Нарезка изображений.

После первого этапа подбирается тип рисунка. Обычно используют такие три формата: jpg, png, gif. Нарезки изображений сохраняются в папку, которая будет в будущем использоваться для создания одностраничника. Если необходимо – картинки для большего удобства объединяются в спрайты.

Создание каркаса сайта в виде блоков.

Для того, чтобы это выполнить, программист в html-документе верстает пустые блоки для контента, правого и левого меню, подвала, шапки. После выполнения этих действий появляется структура будущего интернет-сайта в виде скелета.

1. Наполнение контейнеров изображениями.
2. Наделение веб-ресурса кроссбраузерными функциями.

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

Исправление ошибок и отладка.

Самый важный, ответственный этап. Если в конечном итоге получится сильно «забагованный» продукт – вся работа может пойти насмарку. Лучший сервис по проверке валидации разметки html – https://validator.w3.org/.

Работа дизайнера, верстальщика и фронт-энд-программиста

После того, как все пожелания приняты, а ТЗ составлено в дело вступает дизайнер. Он рисует картинку в фотошопе, как будет выглядеть законченный проект.

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

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

После того как рисунок закончен в дело вступает верстальщик. Сайт – это картинка в движении. Практически каждое изображение работает.

Кнопка – это всего лишь рисунок, но благодаря верстальщику на нее можно нажать и попасть на ту страницу, которую вам нужно. Делается это при помощи ссылок, поставленных на картинку.

Конечно же, это лишь малая часть той работы, которую выполняет верстальщик. Он разрезает макет и заново собирает все его части благодаря знанию кода html и css. Структурирует картинки по папкам, прописывает пути к ним, выставляет отступы, обрамления, цвета.

Я уже писал о популярных курсах по программированию для начинающих. Самое главное понять схему написания. Самих тегов не так много. Выучиться не так уж сложно.

Если вы ничего не понимая посмотрите на код сайта, то можете испугаться и ужаснуться, но в нем есть четкая система. Теги повторяются. Многие из них не случайный набор букв. Head, body, color. Всем знакомы эти слова.

Если бы сайт находился просто в папках, то добавление статей было бы очень трудоемким процессом. С ним бы справился только сам программист. Зачем ему на плечи такая сложность? Нужна панель управления.

Существуют разные системы. Некоторые пользуются готовыми CMS, такими как wordpress, joomla, Битрикс и так далее. Другие создают свой движок. Конечно, чтобы его написать и нужен программист. Не со всеми задачами может справиться верстальщик.

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

Если запросы не такие уж внушительные, а заказчик не хочет тратить много денег, то ему ставят готовый движок. Для него уже создано и выложено в интернет великое множество готовых бесплатных скриптов. С теми же галереями, системами заказов, калькуляторами и так далее. Так что верстальщик может взять на себя и эти обязанности.

Наверное, любого здравомыслящего человека будет интересовать вопрос: какой вариант лучше? Ответить на этот вопрос очень сложно. Все зависит от рук мастера.

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

В конце концов все книги выглядят примерно одинаково, но это же не мешает читателям.