Верстка сайта – это размещение элементов на странице. На сайтах всегда есть текст, заголовки, картинки, формы обратной связи и таблицы. Задача верстальщика создать их и расположить на экране так, чтобы пользователю было удобно пользоваться ими.
Что такое верстка
Верстальщик – это человек, у которого задача – написать html и css код для веб-страницы. Сначала дизайнер создает макет будущего сайта. Подбирает шрифты, размеры текстов и блоков, загружает изображения. Отправляет получившийся результат верстальщику, который делает из полученного макета веб-страницу, на которую пользователь не только может смотреть, но и взаимодействовать с ней.
Разработчик создает структуру проекта из макета. Для примера, обычный интернет-ресурс имеет верхний блок с заголовком, в центре экрана располагается основная информация и меню, а внизу пишутся данные о компании, адрес или телефон. Для этих блоков он используют специальные html-тэги, которые создают контентную часть сайта.
Принципы верстки
Для того чтобы верстка соответствовала профессиональным стандартам, необходимо соблюдать определенные шаги и принципы в работе, а также понимать, с чего начинать верстку.
Макет
После получение макета от дизайнера, верстальщику нужно определить сетку сайта. Сетка – это разделение всего макета на структурные элементы. Чаще всего, специалисты сразу выделяют верхнюю часть, то есть header, в которой помещают логотип и навигацию по сайту, и нижнюю часть — footer, в которой идут блоки с дополнительной информацией о владельце ресурса. После этого выделяют в независимые блоки основную информацию.
Написание кода
После определения сетки, верстальщик приступает к написанию html кода. Для ускорения работы можно использовать специальные расширения доступные в текстовых редакторах кода. Одним из таких является Emmet. Благодаря ему веб-специалист делает свою работу гораздо быстрее. Писать все элементы своими руками не нужно, потому что в этом плагине предусмотрены горячий клавиши, которые создают большую часть тэгов.
Переиспользование кода
Профессиональные разработчики сохраняют части своего кода из проекта в Github Gist. Это такой сервис, который позволяет разместить и сохранить код, для того чтобы позже его использовать в других проектах. Это также уменьшает время на работу. Пользователи Github имеют доступ к коду других разработчиков. В связи с этим можно выбирать чужую реализацию и использовать её для решения собственных задач.
Автоматизирование задач
К рутинным задачам верстки относятся:
- настройка веб-сервера, который обновляется при сохранении изменений в коде.
- оптимизация изображений для разных экранов.
- соединение раздельных файлов css, html в один.
Для автоматизации используется Gulp или Webpack.
Использование jQuery
JQuery — это javascript библиотека, которая решает много задач. Некоторые элементы после верстки необходимо оживить. Человек наводит мышкой на какой-нибудь блок, и он всплывает, пролистывает картинки, сортирует по разным параметрам результат поиска. Эти задачи решаются при помощи jQuery. В нем уже есть много готовых плагинов, которые остается только установить и использовать.
Как сверстать сайт
Верстка сайта делается двумя способами: таблицей или блоками. Раньше специалисты делали верстку только таблицами. Этот способ имеет как свои преимущества, так и недостатки. Преимущества:
- просто создается структура.
- поддерживают все браузеры, поэтому отображается сайт одинаково.
Недостатки:
- нужно писать много кода, который тяжело в дальнейшем поддерживать.
- для изменения кода нужно долго разбираться со структурой верстки.
Создавать разметку при помощи блоков – легче. Структура создается при помощи элементов div. Это прямоугольники, которые растягиваются на всю ширину экрана.
На картинке ниже, показано как выглядит код сайта, сделанный из div элементов.
Для создания блока с навигацией, футером и двумя колонками используются различные тэги: div, nav, section и другие. Так проектируется структура ресурса. Нет никакой таблицы, только блоки, которые могут располагаться друг под другом, а также вкладываться один в другой. Блоки оформляются при помощи css. В целом блочная верстка гораздо проще табличной. Её легче исправлять, поддерживать и дополнять.
Работа над созданием сайта происходит в несколько этапов. Сначала дизайнер делает макет в Photoshop. Получается подобное изображение сайта.
Также можно посмотреть то, как разделил дизайнер на блоки макет. Для этого в Photoshop есть специальная кнопка, расположенная справа.
Верстальщик перед началом работы выбирает программу, в котором будет писать код. Можно использовать для этой цель Notepad++.
На картинке ниже показан файл style.css. В основном он создается уже после того, как структура написана. В нем легко разобраться. Так, каждое свойство отвечает за внешний вид ресурса. Так, например:
- background отвечает за цвет фона;
- width – ширина блока;
- height – высота блока и т.п.
В Photoshop есть огромный список цветов. Для выбора определенного цвета нужно нажать несколько раз по цветовой палитре.
А вот так выглядит html файл. В нем уже есть структура, состоящая из навигации, меню, шапки и футера сайта. H2 – это заголовок. Между тэгами можно вписать любой текстовый контент.
Эти два документа необходимо создать и положить в одну папку. Запустить файл index.html в любом браузере.
Так выглядит быстро сверстанный сайт. Код можно изменить. Добавить другие цвета, изображения и новые элементы.
От профессионализма верстальщика многое зависит. При плохом написании кода, в будущем сайт будет медленно работать, поддерживать код станет невозможно, потому что был плохо организован.
Курсы для изучения верстки
Мы показали основы верстки сайтов. Но, чтобы полноценно обучиться верстке придется потратить не один месяц. Стоит обратить внимания не специальные ресурсы, которые хорошо себя зарекомендовали в плане обучения верстке для начинающих:
- Udemy– онлайн-сервис, на котором размещено тысячи курсов на самые разные темы. Стоимость курса – от 50 долларов до 200, но почти каждый день идут скидки, и тогда цена падает до 10$. Есть возможность заниматься не только на компьютере, но и на планшете.
- Codecademy – на этом сайте доступны интерактивные курсы, то есть ученик сразу применяет свои знания на практике, в специальном браузере. Это большой плюс, потому что новичок сразу видит результат своей работы.
- Htmlacademy – это русский обучающий проект, который предлагает сначала изучить бесплатно доступный интерактивный материал. Также есть платные курсы. Для новичков предусмотрен базовый, а для продвинутых – профессиональный курс. Продолжительность курса — 9 недель.
- Skillbox – популярная образовательная платформа в России. Цена курса составляет – 50 тысяч рублей. За эти деньги ученик получит личного наставника, в обязанности которого входит проверка выполненных заданий и объяснение непонятого.
- GeekBrains– это курсы от mail.ru. Длятся 7 месяцев. Обучение стоит 50 тысяч рублей, но если пройти финальный экзамен, то будет предложено трудоустройство.