Верстка для самых маленьких. верстаем страницу по бэму

Кто такой Веб-верстальщик

Ваши верные спутники на первые 6 месяцев (взято с сайта с design2cms.net)

Для общего понимания – разработка сайта состоит из трех основных этапов:

1. Создание дизайна. Дизайнер рисует общий вид сайта, определяет цвета оформления, размещение блоков, размеры объектов.
2. Программирование. Backend-программист работает над внутренней составляющей сайта, он отвечает за серверную часть WEB-сайта.
3. Верстка. Это как раз то, что нас сейчас интересует. Верстальщик отвечает за этап создания визуальной части сайта: он переводит дизайн-макет в WEB-форму, делает дизайн функциональным, заставляет все работать.

Таким образом, верстальщик – один из специалистов, без которого сайт не может существовать. От него зависит правильность отображения дизайна в браузерах пользователей. Он задает все оформление страницы в соответствии с дизайн-макетом: размеры шрифтов; размещение и оформление заголовков, текстов, изображений. В общем, не будь такой профессии, все сайты в интернете выглядели бы одинаково: как напечатанный в блокноте WordPad текст.

Подписывайтесь на наши новости

Одно письмо в неделю с самыми актуальными статьями + обзор digital-профессий!

*Нажимая «Подписаться» вы даете согласие на обработку персональных данных.

Что должен знать и уметь верстальщик

• язык разметки. HTML, HTML5, дополнительно желательно знать HTML-фреймворки: Twitter Bootstrap или Semantic UI;
• CSS (каскадную таблицу стилей). При помощи нее задается стилистика страниц;
• основы JavaScript, jQuery. При помощи них задается динамика;
• основы PHP;
• принципы работы визуальных редакторов;
• инструменты проверки правильности, валидности кода.

Важно: нельзя путать понятие верстальщика и Frontend-разработчика. Часто в вакансиях на должность верстальщика «светятся» требования, которые нельзя относить к этой должности

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

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

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

Что еще нужно для работы веб-верстальщиком

Вам нужно знать некоторые из них, но в перспективе – это все ваше.

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

Писать код можно и в Notepad, но это неудобно. Для верстальщиков и программистов придуманы специальные программы: редакторы кода. Вот некоторые из них: Visual Studio Code, Sublime Text, Atom, Vim и другие. Установите что-то из перечисленного, это упростит и ускорит вашу работу.

Также must have для начинающего верстальщика – Photoshop, Figma или Avacode – для разбора дизайн-макета на части.

Шаблон

Визуально разделим на высокоуровневое дерево блоков.

Найдём строки и колонки макета

Шаг 2

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

1. Шапка;
2. Тело;
3. Боковые панели;
4. Подвал.

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

И пока нам этого достаточно. Тут мы можем разделить нашу задачу на две большие группы:

1. Техническую и
2. Семантическую.

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

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

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

Чаще всего это форматы, созданные в таких инструментах как Figma, Sketch или Adobe Photoshop, которые в себе уже содержат практически исчерпывающую информации о макете, самое главное:

1. Положение элементов;
2. Тип элементов;
3. Стили элемента.

Но почему же подобные решения не привели к эффекту разорвавшейся бомбы и спустя 2 года нет ничего лучше старой доброй ручной вёрстки?

Тут я повторюсь, моё мнение, причина этого два фактора:

1. Высокие требования к качеству;
2. Необходимость в контроле.

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

Таким образом, первостепенным является первое требование. Но что же делает код качественным? Если убрать за скобки официальные показатели качества как LTR, Accessibility и подобное, мы останемся с важными показателями качества для разработчиков:

1. Правильное дерево;
2. Семантика;
3. Отсутствие избыточности;
4. Читаемость и редактируемость;
5. Использование вырванных из потока блоков только там, где это нужно.

Таким образом главной задачей для автоматизации и будет соответствие этим критериям.

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

Ограничения

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

Многообразие форматов

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

Верстка отличается различными подходами к этому вопросу:

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

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

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

Почему прямоугольники?

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

Как правило верстальщик получает от дизайнера утверждённый дизайн-макет страницы. Далее, верстальщик анализирует полученный макет. Разбивает его на горизонтальные линии (полосы) — «этажи». Далее, каждый «этаж» анализируется отдельно и разбивается на прямоугольные блоки — колонки.

Далее происходит рекурсивный процесс вёрстки этих отдельных строк, а в них столбцов.

После вёрстки страница проверяется на кросс-платформенность. В общем случае можно отвечать на следующие вопросы:

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

Критические исправления вносятся в документ, и проверка повторяется с самого начала.

Верстка создаётся для шаблонов

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

Например, верхняя полоса с логотипом и нижняя с важной информацией. Такие кусочки верстки называются шаблонами (от англ. template).

Разметка страницы

По принципам использования средств разметки HTML различают логическую разметку и презентационную (физическую).

Например, курсивный текст можно получить как с помощью тега <i>, так и с помощью тега <em>.

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

Иными словами, при первом подходе ориентируются на внешний вид, а во втором — на логическое предназначение.

Преимуществом второго подхода является независимость вёрстки от используемого типа устройств и дизайна веб-страниц.

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

Блочная вёрстка

Слои представляют собой структурные элементы, которые можно размещать на веб-странице путём наложения их друг на друга с точностью до пикселя. В HTML 4 и XHTML слой — это элемент веб-страницы, созданный с помощью тега <div>, к которому применяется стилевое оформление.

При этом придерживаются следующих принципов:

• Разделение содержимого и оформления;
• Активное применение тега <div>;
• Таблицы применяются только для представления табличных данных.

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

Скрипты позволяют изменять параметры слоя динамически. Это даёт возможность создавать на странице разные эффекты, такие как выпадающие меню, игры, разворачивающиеся баннеры, плавающие окна и прочее.

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

Более современные версии браузеров стали строже придерживаться стандартов и содержать средства по работе со слоями.

Преимущества и недостатки

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

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

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

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

См.также: Tableless web design

Тип ресурса

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

• визитка;
• блог;
• интернет магазин;
• лендинг, он же одностраничник;
• гелерея;
• информационный портал;
• форум.

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

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

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

Лендинг создается в первую очередь для продажи какого-то одного товара. Чаще всего это какая-то новинка или редкое изобретение.
Лендинг представляет собой ресурс, состоящий из одной страницы, на котором изложена вся информация о продающемся товаре и есть форма заказа. Такая функциональность достаточна для одностраничника.
Заказать верстку будет не очень сложно, так как главной его особенностью являются изображения и грамотно составленные тексты, чем обычно занимаются профессионалы этой области.

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

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

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

Верстать может любой дурак?

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

Честно говоря, я и сама часто видела, как верстают дураки, а точнее результаты их работы, так что доля правды в этом есть. Но вот хорошими верстальщиками становятся далеко не все (тут доказывать нет смысла, лучше просто пройтись по интернету и попробовать отыскать отлично наверстанные сайты — в самом деле, это не настолько просто). 

Для верстки не требуется столько умственных способностей, как для программирования — это так. Но есть много других особенностей, которые необходимы.

Если вы дурак, который хорошо понимает, что такое сайт, способный выучить некоторые правила и следить за новостями в веб разработке, готовый постоянно развиваться, настроенный часами исправлять небольшие баги, если вам нравится днями напролет копаться в коде, договариваться со шрифтами и дизайнерами, тогда верстка именно для вас! Поздравляю!

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

Просто скриншот с ноутбука верстальщика:

Лично мне верстка подходит, потому что я придирчива к мелочам и усидчива. Я люблю делать интересные сложные проекты по верстке, которые нуждаются в особом подходе. Мне приятно наблюдать, как графический макет становится сайтом. Но верстать однотипные макеты или макеты, сделанные через одно место — это ужасно!

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

В общем, меня занесло немного не в ту сторону. Просто многие задаются вопросом «Что такое верстка сайтов?», как раз в размышлениях заняться ею. Надеюсь, что у меня получилось объяснить нюансы профессии верстальщика, и что вы не будете зря тратить свое время на обучение, если вам такое не близко.

Обязанности верстальщика

В круг обязанностей верстальщика входят следующие задачи.

1. Создание шаблонов на основе имеющихся psd-макетов.
2. Интеграция шаблонов на систему управления.
3. Верстка промо-страниц и email-рассылок.
4. Написание кодов на языке JavaScript и AJAX.
5. Создание принт-версий страниц.

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

Приведу должностные обязанности дизайнера-верстальщика.

1. Компьютерная верстка полиграфической продукции (визитные карточки, буклеты, каталоги, календари и другое).
2. Верстка таблиц и графических элементов.
3. Внесение правок в текст.
4. Допечатная подготовка макета.
5. Обработка изображений.
6. Создание эскизов и выполнение работ по художественному оформлению обложек печатной продукции.

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

CSS каскадные таблицы

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

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

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

Одно что могу посоветовать, это начинать учить что такое:

• Grid layout верстка;
• Flexbox верстка;
• Блочная верстка;
• Работа с текстом;
• margin и padding
• Background и работа с картинками;
• Width и heigth;
• Единицы измерения: px, pt, em, rem, %, vw, vh;
• Media запросы;

Каждому из этих пунктов нужно уделить особое внимание, а все потому, что лично для меня css стал очень важной составляющей верстки с которой можно сделать практически все, в некоторых случаях даже анимацию. Так же для того чтобы было удобнее верстать, буквально сейчас я начал использовать scss, что делает разработку более понятной и простой, но на начальных этапах лучше начинать с самого простого. А после приобрести книгу «css для профи», автор Кит Грант (не реклама, просто мне эта книга понравилась) кому не лень почитать литературу не из интернета — очень крутая книга

А после приобрести книгу «css для профи», автор Кит Грант (не реклама, просто мне эта книга понравилась) кому не лень почитать литературу не из интернета — очень крутая книга

Так же для того чтобы было удобнее верстать, буквально сейчас я начал использовать scss, что делает разработку более понятной и простой, но на начальных этапах лучше начинать с самого простого. А после приобрести книгу «css для профи», автор Кит Грант (не реклама, просто мне эта книга понравилась) кому не лень почитать литературу не из интернета — очень крутая книга.

Но анимацию стоит рассматривать только тогда, когда ты будешь уверенно работать со всем выше описанным, а до этого решить все эти проблемы можно немного проще, а именно с javascript.

Верстка таблиц и формул

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

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

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

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

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

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

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

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

Обратите внимание, что если формуле в вашем тексте предшествует короткая конечная строка какого-то текста, то формулу сверху отбивать не нужно, даже частично

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

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