257 lines
13 KiB
Markdown
257 lines
13 KiB
Markdown
# Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)
|
||
|
||
## Цели работы
|
||
|
||
- Освоение основ интернет-вёрстки.
|
||
- Освоение каскадных таблиц стилей в вебе (CSS3+).
|
||
- Изучение основных селекторов и свойств CSS.
|
||
|
||
## Ход выполнения работы
|
||
|
||
1. Изучение основополагающих принципов интернет-вёрстки: HTML-документ, элементы, теги, поток документа, таблицы, списки, ссылки, изображения.
|
||
2. Изучение основных элементов веб-страницы: заголовок и тело документа, контейнер, абзац, заголовок текста, таблица, ссылка, изображение.
|
||
3. Создание html-документа на основании фреймов из макета.
|
||
4. Подключение к html-документу таблицы стилей.
|
||
5. Изучение flexbox и использование для позиционирования элементов.
|
||
6. Стилизация элементов страницы.
|
||
7. Создание стилей для мобильного представления.
|
||
|
||
## Изучение принципов интернет вёрстки
|
||
|
||
На этом этапе выполнения лабораторной работы необходимо усвоить, что такое интернет-вёрстка (похожа ли она на вёрстку газет, например), в чём отличие и схожесть 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](../lw02/README.md), необходимо добавить в HTML-документ элементы.
|
||
|
||
Главный документ должен иметь название `index.html`.
|
||
Если макетом планируется создание нескольких страниц, то они должны называться аналогичным образом на английском языке.
|
||
Например, `orders.html`, `feedback.html` или `sitemap.html`.
|
||
|
||
Для landing-page все блоки страницы должны быть обёрнуты в отдельные div-контейнеры со своим идентификатором, например:
|
||
|
||
```html
|
||
...
|
||
<body>
|
||
<div id="nav">
|
||
<!-- Тут навигация. -->
|
||
</div>
|
||
<div id="welcome">
|
||
<!-- Тут приветственное сообщение от автора. -->
|
||
</div>
|
||
<div id="features">
|
||
<!-- Тут блок с карточками-фичами какой-нибудь системы. -->
|
||
</div>
|
||
<div id="order-form">
|
||
<!-- Тут форма для заказа. -->
|
||
</div>
|
||
</body>
|
||
...
|
||
```
|
||
|
||
При вёрстке Вашего макета не бойтесь объединять элементы в контейнеры и присваивать им классы как общие на несколько блоков, так и индивидуальные под каждый блок.
|
||
Например:
|
||
|
||
```html
|
||
<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-элементе страницы:
|
||
|
||
```html
|
||
<link rel="stylesheet" href="style.css" />
|
||
```
|
||
|
||
Пример таблицы стилей 1:
|
||
|
||
```css
|
||
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`-запросов.
|
||
С помощью них можно указать, при каких условиях соблюдаются те или иные правила стилизации.
|
||
|
||
Например, изменение главной линии, относительно которой встраивается меню сайта, для мобильных устройств можно переопределить следующим запросом:
|
||
|
||
```css
|
||
@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.
|