Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке. В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.
Часть 1. Верстка стандартными средствами
Преимущество данной верстки состоит в том, что код получается более «чистым», а значит быстрее загружается и легче изменяется под специфические нужды. Недостаток такой верстки заключается в том, что она требует значительно больше времени, чем при использовании фреймворков.
Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.
Структура файлов
Первым шагом давайте создадим простую структуру файлов для наших файлов.
Создаем папку с названием нашего проекта, например Whitesquare.
В ней создаем пустой файл index.html.
В папке проекта создаем папку css с пустым файлом styles.css.
В папке проекта создаем пустую папку images.
Предварительный осмотр
После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи:
Как будут нарезаться изображения?
Какими будут основные стили?
Какой макет у нас получится?
Только после того, как вы мысленно себе ответите на эти вопросы, можно переходить к нарезке изображений и написанию кода. Давайте рассмотрим эти вопросы по-порядку.
Общие изображения
На данном этапе нужно нарезать и сохранить только общие изображения, которые будут на всех страницах сайта и не относятся к контенту. В нашем случае это будет светло-серый фон страницы, фон заголовка, пустое изображение, два логотипа и кнопки социальных сетей.
Сохраним логотипы следующим образом: /images/logo.png /images/footer-logo.png
В качестве пустых картинок из макета будем использовать однопиксельное серое изображение, которое будем растягивать по необходимости /images/ sample.png
Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали. /images/bg.png /images/h1-bg.png
Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Для этого можно склеить картинки вручную в Photoshop, а можно сначала нарезать по одной, а затем склеить с помощью специально сервиса, например http://ru.spritegen.website-performance.org. В итоге получится два файла: /images/social.png /images/social-small.png
Общее правило при именовании изображений заключается в том, что мелкие и простые картинки, такие, как иконки, логотипы и т.д. сохраняются в формате png, а фотографии в формате jpg.
Основные стили
И только теперь можно начинать писать код. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS.
На данном этапе желательно перенести все визуальные стили из дизайна в CSS, которые будут применяться по умолчанию для каждого тега.
Основной цвет фона примерно соответствует цвету #f8f8f8. Он будет показан в случае, если фоновая картинка не загрузится. Наверху страницы находится серая дизайнерская полоска. Применим ее через свойство border для body.
Основным шрифтом является тот шрифт, которым написан текст в области контента. Чтобы узнать его стили нужно выделить его в Photoshop’е и посмотреть свойства шрифта. В данном случае это Tahoma 12px с цветом #8f8f8f. Так же в этом макете параграфы имеют увеличенные отступы.
В дальнейшем мы все стили будем писать в этот же файл, поэтому будем называть его просто «стили».
Каркас HTML
И вот, наконец, мы можем попрактиковаться в написании HTML кода. Запишем в index.html следующее:
Whitesquare
Макет
В данном случае, мы видим, что сайт состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), в которой располагаются три горизонтальных блока: логотип с поиском, меню и название страницы. В самом низу под колонками располагается серый горизонтальный блок футера (footer).
Опишем это в теге body:
Wrapper используется для объединения блоков и их выравнивания по центру страницы.
Для отображения меню необходимо создать список со ссылками внутри тега nav:
CSS стили для него будут следующие:
nav a < text-decoration: none; >nav ul < margin: 0; padding: 0; >nav li < list-style-position: inside; font: 14px 'Oswald', sans-serif; padding: 10px; >.top-menu li < display: inline-block; padding: 10px 30px; margin: 0; >.top-menu li.active < background: #29c5e6; color: #fff; >.top-menu a
Здесь мы указали, что для всех навигаций ссылки не будут иметь подчеркивания, убрали стандартные отступы для элементов списка, отобразили список горизонтально и указали нужные цвета и шрифт.
Заголовок страницы
Заголовок страницы помещается в div с идентификатором heading
Рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.
Колонки
Для того, чтобы создать колонки страницы нужно прописать следующие стили:
aside < float: left; width: 250px; >section
Здесь мы задали фиксированную ширину 250 пикселей для сайдбара, прибили его к левому краю и отодвинули колонку с контентом вправо на 280 пикселей от левого края. Также добавили отступ у контента снизу.
Подменю
Подменю создаем аналогично главному меню. Для этого в теге aside прописываем следующее:
Для подменю применяется более тонкий шрифт и квадратные маркеры. Для отображения разделителей рисуем верхнюю границу у каждого элемента списка, кроме первого.
Контент сайдбара
В контенте сайдбара помимо подменю в макете располагается также изображение с расположением офисов.
Здесь мы убрали стандартные отсупы у figure, отобразили его как инлайновый блок и применили нужный шрифт. Изображение отображаем как блочный элемент с белой рамкой. Вторую серую рамку можно сделать через css-свойство outline. Самое интересное находится в последнем правиле, которое задает левый отступ у всех figure кроме первого внутри тега section.
Блок «Our team»
При верстке этого блока добавим сначала заголовок:
Таким образом, карточка (figure) состоит из фотографии (img), подписи (figcaption) с именем сотрудника и его должностью (div). Карточки будут иметь следующие стили:
Здесь мы задали шрифт и отступ для подписи, размер и цвет должности, добавили верхний отступ для карточек и указали, что для всех карточек в строке, кроме первой, должен быть отступ слева.
Футер
Футер состоит из четырёх больших блоков: ленты Твиттера, карты сайта, социальных ссылок и логотипа с копирайтом.
Для начала создадим контейнер футера с этим блоками:
Контейнер с находится внутри тега footer, это даёт нам возможность через тег footer задать серую область по всей ширине экрана, а через внутренний div отцентрировать с максимальной шириной 960 пикселей. Также этот div задает обоим блокам высоту 90 пикселей.
Лента Твиттера
Верстаем содержимое ленты Твиттера:
TWITTER FEED
In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug
footer h3 < font: 14px 'Oswald', sans-serif; color: #fff; border-bottom: 1px solid #919191; margin: 0 0 10px 0; >#twitter time a < color: #b4aeae; >footer p < margin: 5px 0; >#twitter < float: left; width: 300px; >#twitter p
Из интересных моментов здесь следующее: подчеркивание у заголовка мы сделали через нижнюю границу, а сам блок твиттера, как и последующие блоки выровняем по левому краю и задаём ширину.
Карта сайта
Карта сайта представляет собой два блока со ссылками:
SITEMAP
Home About Services
Partners Support Contact
Ссылкам задаем цвет и оставляем подчеркивание только для наведённых. Колонки со ссылками делаем через инлайновые блоки и затем свойством #sitemap div + div отодвигаем вторую колонку от первой.
footer a < color: #dbdbdb; >#sitemap < width: 150px; float: left; margin-left: 20px; padding-right: 15px; >#sitemap div < display: inline-block; >#sitemap div + div < margin-left: 40px; >#sitemap a < display: block; text-decoration: none; font-size: 12px; margin-bottom: 5px; >#sitemap a:hover
Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классом отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью css сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.
Копирайт
Блок с копирайтом и логотипом – это картинка со ссылкой и параграф с текстом под ним.
Стили делают аналогично предыдущим блокам с той лишь разницей, что блок прибивается к правому краю и выравнивание внутри него так же по правому краю:
#footer-logo
На этом наши работы закончены. Готовый проект можно скачать здесь.
Верстка сайта: инструкция для начинающих
Разработка сайта – это долгая и плодотворная работа, которая, как правило, разделена на несколько этапов. Начальный этап заключается в прототипировании, когда прорисовывается основная структура сайта. На основе этого разрабатывается макет будущих страниц, который в последующем верстается. Верстка сайта – это преобразование готового макета в продукт, состоящий из языка разметки HTML и CSS.
О том, что включает в себя верстка сайта и какие этапы проходит профессиональный верстальщик, поговорим в сегодняшней статье.
Что включает в себя верстка сайта
Основная задача верстальщика – переместить прототип в код, который будет в точности отображать проделанную работу дизайнера. Верстку можно сравнить с издательской деятельностью – книги, журналы и газеты содержат структурированную информацию, в них текст и графические материалы упорядочены таким образом, чтобы максимально облегчить читателю процесс потребления информации и заинтересовать его.
Выделяется два типа разработчиков сайтов:
Backend– занимается разработкой внутренней части сайта, программирует основной функционал;
Frontend – занимается внешней частью сайта, настраивает отображение всех элементов, добавляет к ним анимацию и так далее.
Верстка – это про Frontend, в основу которого входит язык разметки HTML, базис любого сайта.
HTML позволяет показывать страницы и контент, размещенный на них, в заданном порядке. Работа с языком разметки заключается в описании тегов. Вот основные из них:
– главный тег, в котором содержатся другие теги;
– включает в себя различные SEO-элементы, код JavaScript и многое другое;
– внутри этих тегов находится все содержимое страницы;
– используется для обозначения заголовка первого уровня;
– используется для обозначения заголовка второго уровня, после которого следуют заголовки h3, h4, h5, h6;
– здесь прописывается текстовое описание, например заголовок статьи;
– придает тексту жирность;
– текст, написанный внутри этого тега, отрображается курсивом;
– обозначает маркированный список;
– обозначает нумерованный список;
– указывает на пункты внутри списка;
– позволяет добавить к тексту ссылку на другую страницу, номер телефона, почту или иной элемент с помощью атрибута href;
– используется, чтобы добавить картинку на сайт с компьютера либо из интернета;
— тег для создания таблицы.
Теги работают следующим образом:
Привет – это мой первый сайт!
В таком случае на странице будет отображен заголовок h1 со стандартным шрифтом, размером и начертанием.
Аналогичным образом прописываются другие теги, в результате чего получается готовый сайт.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Виды верстки
Существует два вида верстки – блочная и табличная.
Табличная верстка
Первый вид верстки, с которого началась эпоха сайтов. Именно через таблицы создавались простые веб-ресурсы в далеком 2000-м году. При табличной верстке страница поделена на соседствующие ячейки, что напоминает стандартную работу с таблицами в Excel.
Минус такого подхода состоял в том, что приходилось создавать дополнительные таблицы, которые впоследствии могли остаться пустыми. Например, если требовалось разместить изображение и зафиксировать его положение, то необходимо было создать новую строку и разделить ее на несколько столбцов. Только один из них бы содержал изображение, а другие служили бы для него фиксаторами.
Таким образом, страница могла содержать большое количество пустых таблиц, из-за которых сайт становился «тяжелым». Мало того, что такой сайт долго грузится, на него еще не любят заходить поисковые роботы для индексации страниц.
Блочная верстка
Самый актуальный вид верстки сайтов – блочный. Он основан на теге , с помощью которого создаются контейнеры, включающие в себя весь контент страницы или отдельного блока. Например, мы можем разделить сайт на несколько блоков: первый экран, о компании, контакты – для каждого блока будет отведен свой тег .
Внутри тега уже находятся другие теги, отвечающие за те или иные элементы. Вот пример небольшого блока:
Привет – это мой первый сайт!
Сегодня 2021 год и я сделал свой первый сайт.
Прописав его в HTML-документе, получим следующую страницу: При таком подходе язык разметки HTML всегда взаимодействует с CSS-стилями, которые преобразуют обычную страницу в стильное дизайнерское решение: добавляются цвета, устанавливаются отступы для элементов, задается базовая анимация и многое другое.
Например, у нас есть тег h1, и мы хотим сделать его красным – для этого в стилях прописывается следующий код:
Заголовок нашей страницы примет следующий вид:
HTML и CSS обычно хранят в разных файлах – такой подход позволяет быстро вносить изменения и не путаться в больших проектах.
Также стоит сказать, что блочная верстка позволяет легко создать адаптивный сайт, что в наше время является обязательным требованием для каждого проекта. Такая разработка позволяет не только создавать сайты для телефонов и планшетов, но и обеспечивает попадание сайта в топ выдачи поисковых систем.
Вот так выглядит типичная схема блочной верстки:
Валидная верстка
Валидная верстка – это верстка, соответствующая стандарту W3C и означающая корректное отображение сайта на всех пользовательских устройствах. Такой подход обеспечивается строгим соблюдением правил построения кода, его оптимизации и минимизации. В результате это позволяет выводить сайт на более высокий уровень – его репутация в поисковиках сильно улучшается.
При валидной верстке элементы HTML-кода должны находиться строго на своих местах, в начале обязательно прописывается тег , а также , , .
Когда верстка считается правильной
Существует множество правил, которых следует придерживаться во время верстки. Нарушение некоторых из них может привести к плохой оптимизации сайта.
Рекомендуется разбивать HTML-код, CSS-стили и JavaScript-код на разные файлы.
Весь написанный код должен быть чистым и легко читаемым.
Верстка макета сайта чаще всего должна быть пиксель в пиксель, но в некоторых случаях допускаются погрешности, согласованные с заказчиком.
Для оптимизации кода рекомендуется использовать методологию БЭМ от Яндекса.
Сайт должен работать одинаково во всех браузерах.
Используйте заголовки H1-H6, а также знайте, что H1 – единственный заголовок на одной странице. Важно соблюдать это правило, иначе могут появиться проблемы с поисковыми системами.
Также для поисковиков важно, чтобы были заполнены атрибуты , и .
Не используйте «тяжелые» изображения, чтобы избежать длительной загрузки сайта.
Сайт должен быть адаптирован для мобильных устройств.
Естественно, что это не все основы «идеальной» верстки, но соблюдение даже этих правил позволит создать быстрый и устойчивый сайт.
Инструменты для верстки сайта
Верстальщик – это не простой разработчик, который работает с блокнотом и пишет в нем теги да атрибуты.
Если говорить об инструментах разработчика, то чаще всего используются:
Notepad++ – простой редактор кода;
SublimeText – наиболее используемый редактор;
Webstorm – самый мощный редактор.
Последняя программа для верстки сайтов платная, однако для обучения можно получить ее студенческую версию даром и с полным функционалом.
Как проверить верстку
После того как сайт будет сверстан, потребуется проверить его работоспособность. Базовое тестирование включает в себя проверку адаптивности на всех устройствах.
Более обширную информацию можно получить на сервисах Jigsaw.W3 и Validator.W3.
Если требуется узнать, соответствует ли верстка макету пиксель в пиксель, то для этого подойдет сервис WellDoneCode.
Сервис Page Ruler нужен как линейка, чтобы в пикселях измерить сверстанные блоки и прочие элементы страниц.
Window Resizer – расширение для Google Chrome, позволяющее узнать, насколько хорошо страница адаптирована под разные устройства.
Верстка сайта
Представляем вам курс по полноценной верстке веб сайта. За курс мы будем заниматься созданием сайта на основе HTML, CSS, JS и jQuery. По итогу у нас должен получиться неплохой шаблон сайта, который вы сможете использовать для своих проектов.
Видеоурок
Информация про курс
В видеокурсе мы будем создавать сайт, на котором вы сейчас находитесь. Естественно, современная версия сайта itProger отличается от той версии, которую мы создаем в видеокурсе, но от этого полезность курса не меняется.
В курсе не будут затронуты темы, связанные с сервером или базой данных. Мы рассмотрим лишь верстку сайта, его адаптацию под различные форматы экранов и наполнение сайта различной информацией.
По итогу вы сможете создать неплохой шаблон сайта, который можно использовать в дальнейшем в своих целях для создания сайтов.
В видеокурсе не будут рассматриваться темы изучения каких-либо технологий. Предполагается, что вы уже знакомы с HTML, CSS, JavaScript и библиотекой jQuery хотя бы на минимальном уровне. В курсе мы будем создавать сайт и комбинировать эти технологии для создания чего-нибудь красивого и функционального.
Если вы не знаете какую-либо из этих технологий, то изначально стоит ознакомиться с ней. На нашем сайте вы можете найти соответсвующие курсы по этим технологиям:
Курс по HTML5 ;
Курс по CSS3 ;
Курс по JavaScript ;
Курс по jQuery .
Основы современной верстки
На этом курсе вы изучите основы верстки сайтов HTML. Знание этого языка пригодится, когда вы начнете работать над версткой своих первых веб-страниц. Вы узнаете больше об HTML-разметке и возможностях современного стандарта HTML5. Также вы получите базовые знания по стилизации с помощью CSS: научитесь подключать стили, использовать селекторы, работать с каскадностью. В дополнение к HTML и CSS, вы научитесь работать со встроенными в браузер средствами отладки верстки, в частности с Google Chrome DevTools. В итоге вы научитесь использовать язык разметки HTML для верстки текста на сайте, а также познакомитесь с базовыми правилами использования CSS и стилизации текста.
Новые навыки вы сможете сразу же применить на практике — мы изучим редакторы для верстки и плагины к ним. В конце каждого урока вы будете встречать небольшие самостоятельные задания. Они направлены на более практическое понимание освещенной темы, поэтому очень рекомендуемы для выполнения.
Основы верстки пригодятся, если вы решите изучать веб-разработку вне зависимости от направления. Знания из этого курса помогают программистам размечать данные и выводить их на сайт. Этот курс подойдет новичкам и разработчикам, которые не сталкивались с версткой в своей работе.
Программа курса
Продолжительность 9 часов
Введение
Курс «Основы современной верстки» является базой для изучения основ верстки сайтов HTML и CSS. В этом уроке мы кратко расскажем о том, что узнаем на курсе и как эти знания можно применять на практике.
