13 KiB
Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)
Цели работы
- Освоение основ интернет-вёрстки.
- Освоение каскадных таблиц стилей в вебе (CSS3+).
- Изучение основных селекторов и свойств CSS.
Ход выполнения работы
- Изучение основополагающих принципов интернет-вёрстки: HTML-документ, элементы, теги, поток документа, таблицы, списки, ссылки, изображения.
- Изучение основных элементов веб-страницы: заголовок и тело документа, контейнер, абзац, заголовок текста, таблица, ссылка, изображение.
- Создание html-документа на основании фреймов из макета.
- Подключение к html-документу таблицы стилей.
- Изучение flexbox и использование для позиционирования элементов.
- Стилизация элементов страницы.
- Создание стилей для мобильного представления.
Изучение принципов интернет вёрстки
На этом этапе выполнения лабораторной работы необходимо усвоить, что такое интернет-вёрстка (похожа ли она на вёрстку газет, например), в чём отличие и схожесть HTML и обычного текстового документа, из чего состоит веб-страница внутри и по каким принципам обычно свёрстаны веб-сайты.
См. следующий материал:
- Введение в HTML - http://htmlbook.ru/samhtml/vvedenie-v-html
- Про теги - http://htmlbook.ru/samhtml/tegi
- Про историю проблем с вёрсткой - http://htmlbook.ru/samlayout
- Про табличную вёрстку (сейчас считается устаревшим) - http://htmlbook.ru/samlayout/verstka-s-pomoshchyu-tablits/osobennosti-tablits
- Про блочную вёрстку - http://htmlbook.ru/samlayout/blochnaya-verstka (и все страницы этого раздела)
Также в источниках упоминается CSS или "каскадные таблицы стилей". Они нам также пригодятся.
Изучение основных элементов веб-страницы
Когда вы разберётесь в том, что такое вёртка веб-страниц, необходимо ознакомиться с тем, из каких элементов может состоять документ HTML (или наша веб-страница).
Элементов много, но всё сводится к нескольким блочным (то есть блокам - заголовок, абзац, таблица, контейнер без явного смысла и др.) и строчным (изображение, всевозможные выделения текста, блок текста без явного смысла и др.) элементам.
Для "пробы пера" можете использовать CodePen, песочницу для проверки вёрстки и не только - https://codepen.io/pen/.
См. следующий материал:
- HTML5 и CSS3 на примерах - https://webref.ru/layout/html5-css3
- Справочник по HTML - http://htmlbook.ru/html
Создание документа HTML
На основании макета, выполненного в рамках лабораторной работы №1, необходимо добавить в HTML-документ элементы.
Главный документ должен иметь название index.html.
Если макетом планируется создание нескольких страниц, то они должны называться аналогичным образом на английском языке.
Например, orders.html, feedback.html или sitemap.html.
Для landing-page все блоки страницы должны быть обёрнуты в отдельные div-контейнеры со своим идентификатором, например:
...
<body>
<div id="nav">
<!-- Тут навигация. -->
</div>
<div id="welcome">
<!-- Тут приветственное сообщение от автора. -->
</div>
<div id="features">
<!-- Тут блок с карточками-фичами какой-нибудь системы. -->
</div>
<div id="order-form">
<!-- Тут форма для заказа. -->
</div>
</body>
...
При вёрстке Вашего макета не бойтесь объединять элементы в контейнеры и присваивать им классы как общие на несколько блоков, так и индивидуальные под каждый блок. Например:
<div class="card first">
<div class="card-header">
<h3 class="card-title">Заголовок новости-карточки 1</h3>
</div>
<div class="card-body">Текст новости-карточки.</div>
</div>
...
<div class="card last">
<div class="card-header">
<h3 class="card-title">Заголовок новости-карточки 2</h3>
</div>
<div class="card-body">Текст новости-карточки.</div>
</div>
Также можно сначала добавлять элементы без стилизации, а затем уже приниматься за "наведение красоты". Или же сразу добавлять стили к только что созданным элементам.
Пример сайта из материалов, сделанных на практике: https://vladdy-moses.github.io/docker-designer. Если посмотрите код страницы, то не увидите ничего сложного.
Вставка картинок из макета
В макете есть возможность выгружать группу элементов как изображение. Для этого в панели свойств есть меню "Export", где можно выбрать параметры выгрузки.
Стоит обратить внимание на следующие особенности:
- Если вы экспортируете иконку, где много векторной графики, т.е. графических примитивов (линий, фигур, заливки и проч.), то следует выбирать формат SVG.
- Если вы экспортируете изображение, где есть растр, т.е сетка пикселей, то следует выбирать формат JPG.
Также удобно называть слой с экспортируемым изображением на английском языке, т.к. название выгружаемого изображения будет с ним совпадать.
Например, при экспорте слоя "site-logo" в формат SVG создастся файл site-logo.svg, который можно будет подключить к HTML-документу при помощи элемента <img src="site-logo.svg" alt="Логотип" />.
Подключение каскадных таблиц стилей CSS и пример
Подключение таблицы стилей в head-элементе страницы:
<link rel="stylesheet" href="style.css" />
Пример таблицы стилей 1:
body {
background-color: #eee;
background-image: url(bg-1.png);
color: #666;
margin-top: 60px;
margin-left: 1em;
margin-right: 14pt;
margin-bottom: 15px;
/* Можно заменить просто на "margin: 60px 14pt 15px 1em;" */
padding: 10px 50px;
/* Можно заменить просто на "padding: 10px 50px 10px 50px;" */
font-size: 14px;
font-family: "Times New Roman", serif;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
.card {
border-width: 10px;
border-color: red;
border-radius: 10px;
}
.card.test-3 {
position: absolute;
top: 0;
left: 55px;
right: -50px;
bottom: 20px;
z-index: 9;
}
.card.test-4 {
position: fixed;
right: 20px;
bottom: 20px;
}
.test {
background-color: red;
}
td.test-2 {
background-color: coral;
}
.test.test-2 {
background-color: brown;
}
thead .test,
thead > tr.test > th {
background-color: blue;
}
#main-container {
background-color: aqua;
}
.test-5 {
color: white;
}
.test-5 strong {
color: red;
display: block;
}
.test-6 {
color: white;
display: inline-block;
}
Пример таблицы стилей 2: https://vladdy-moses.github.io/docker-designer/style.css.
Самоучитель по CSS можно найти по ссылке http://htmlbook.ru/samcss. Справочник по правилам CSS там же: http://htmlbook.ru/css.
Flexbox
Flexbox – новая система позиционирования элементов в CSS. С её помощью можно гибко настроить как положение элемента в контейнере, так и его поведение в зависимости от различных параметров, например, объёма содержимого.
Подробнее можно ознакомиться по этой ссылке: https://tproger.ru/translations/how-css-flexbox-works/.
Нам Flexbox поможет настроить положение отдельных элементов в контейнере для настольной и мобильной вёрстки.
В лабораторной работе предполагается, что те места, где в макете содержимое расположено в несколько колонок, они будут стилизованы через Flexbox.
Адаптивная вёрстка
Адаптивность в стилизации — свойство адаптироваться под различные устройства.
Логично предположить, что если одна и та же страница выглядит одинаково для различных устройств (смартфон, часы, компьютер, планшет, 4К-телевизор), то, скорее всего, она везде будет смотреться ужасно.
Сейчас дизайнерам необходимо формировать несколько макетов для различных устройств, а верстальщикам - несколько вариантов вёрстки. Однако такой подход довольно трудозатратен, поэтому можно сделать одну вёрстку, но так, чтобы только при помощи стилей её можно было "подправить" под вид на конкретном устройстве.
Это можно сделать при помощи @media-запросов.
С помощью них можно указать, при каких условиях соблюдаются те или иные правила стилизации.
Например, изменение главной линии, относительно которой встраивается меню сайта, для мобильных устройств можно переопределить следующим запросом:
@media (max-width: 1020px) {
nav {
flex-direction: column;
}
}
При помощи display: none можно полностью скрывать элементы при определённых условиях.
Например, так можно скрывать меню для печати страницы или изображения для мобильных версий страниц.
Все переопределённые элементы из примера, который разбирался на практике, можно найти тут: https://vladdy-moses.github.io/docker-designer/style-mobile.css.
В лабораторной работе предлагается аналогичным образом дополнить некоторые правила для мобильного вида сайта, чтобы он был похож на соответствующий frame из макета.
Дополнительные темы для самостоятельного изучения
Если вам интересна интернет-вёрстка, можете изучить самостоятельно следующие темы:
- Анимация в CSS3.
- Переменные в CSS3.
- Препроцессоры CSS: LESS, SASS/SCSS.