Рубрика: Профессии
Просмотров: 1 251
Рейтинг статьи: 5

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

вёрстка 1

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

вёрстка 2

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

вёрстка 3

Заключение

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

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

 
Оцените статью, пожалуйста:
5

А что Вы думаете об этом материале? Напишите в комментариях:

Ваш e-mail не будет опубликован

Вы любите читать книги и журналы? Но ведь мало написать книгу или статью, оказывается за
«Выполняйте трудные дела, пока они легкие, совершайте великие поступки, пока они небольшие. Путешествие в тысячу миль
Работа в офисе! Что может быть еще более утомительным, чем эта рутинная суета? Если Вам
Популярность удаленной работы стремительно растет с каждым годом. Конечно, ведь работать удаленно – это значит
Студенческие годы – самые веселые и беспечные, но и самые «голодные». Иногда студентам приходится буквально
Если каждое утро Вас не покидает устойчивое желание запустить органайзером с ручками и карандашами в
Экономический кризис. Только ленивый не говорит о нём последние несколько лет: это одна из любимых
Переводчик – одна из самых интересных  и престижных профессий. Всё более востребованными становятся переводчики и