Специалист по вёрстке сайтов: обзор профессии

Профессии
524

Специалист по вёрстке сайтов: обзор профессии

Расскажите об этой статье своим друзьям:

X
Осуществите Ваш 100 % переход на удаленную работу, используя нашу проверенную технологию и многолетний опыт работы

Друзья, приветствую! На связи Ирина. Сегодня делаем обзор ещё по одной востребованной интернет-профессии, без которой не создаётся ни одни сайт.

Сразу скажу, что верстальщик веб-страниц и дизайнер веб-страниц – это не одно и тоже. Это – две самостоятельные профессии. Дизайнер создаёт макет веб-страницы, а верстальщик верстает этот макет, воплощая в жизнь художественный замысел дизайнера. Иногда дизайн и вёрстку веб-страницы делает один специалист. Если Вы на такого попадёте, считайте, что Вам повезло.

Различают 2 вида вёрстки:

  • полиграфическая вёрстка
  • вёрстка веб-страниц

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

Труд верстальщика остаётся за кадром, но именно он обеспечивает:

  • бесперебойность работы веб-страницы на разных устройствах
  • скорость загрузки веб-страницы

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

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

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

Верстальщик делает разметку макета, разделяя его на горизонтальные блоки – так называемые «этажи».

После этого каждый «этаж» анализируется отдельно. Верстальщик делает разметку каждого «этажа», разделяя его на прямоугольные блоки – так называемые «колонки».

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

Чаще всего подготовленная информация в прямоугольник не помещается (или его, напротив, слишком мало в прямоугольнике), и верстальщик либо повторяет процесс разметки сначала, каждый раз подгоняя его и под макет дизайнера и под объём информации для наполнения, либо начинает «играться» с размерами шрифтов, интервалов и проч.

После этого верстальщик снова пьёт валерьянку и начинает проверять веб-страницу на кросс-платформенность, отвечая себе на вопросы:

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

Некорректные смещения вносятся в план вёрстки, и она… повторяется сначала. Oh, mamma mia!

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

Обзор по способам вёрстки:

Вёрстка таблицами:

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

Вёрстка слоями:

Этот способ позволяет накладывать слои друг на друга. Но в  спецификацию HTML этот способ не был включён.

Вёрстка блоками

Вёрстка фреймами:

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

Типовые примеры разметки веб-страниц для новичков:

Одноколоночная

вёрстка 1

Двухколоночная

вёрстка 2

Трёхколоночная

вёрстка 3

Заключение

Труд верстальщика не оценить никакими деньгами, настолько он кропотлив, скрупулёзен, изнурителен, ответственен. Что бы мы без них делали? Цените этот труд, берегите этих специалистов, прислушивайтесь к их мнению – и Ваши веб-страницы будут самыми лучшими!

Если Вы – начинающий создатель сайтов, прочитайте следующие статьи:

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

Здорово

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

Внесите Ваши данные в форму прямо сейчас - и мы свяжемся с Вами по телефону

Ваши данные никогда не будут переданы 3-м лицам.