219 lines
12 KiB
Markdown
219 lines
12 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, необходимо добавить в HTML-документ элементы.
|
|||
|
|
|
|||
|
|
Главный документ должен иметь название `index.html`.
|
|||
|
|
Если макетом планируется создание нескольких страниц, то они должны называться аналогичным образом на английском языке.
|
|||
|
|
Например, `orders.html`, `feedback.html` или `sitemap.html`.
|
|||
|
|
|
|||
|
|
При вёрстке Вашего макета не бойтесь объединять элементы в контейнеры и присваивать им классы как общие на несколько блоков, так и индивидуальные под каждый блок.
|
|||
|
|
|
|||
|
|
Также можно сначала добавлять элементы без стилизации, а затем уже приниматься за "наведение красоты".
|
|||
|
|
Или же сразу добавлять стили к только что созданным элементам.
|
|||
|
|
|
|||
|
|
Пример сайта из материалов, сделанных на практике: <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;
|
|||
|
|
/*same as "margin: 60px 14pt 15px 1em;"*/
|
|||
|
|
|
|||
|
|
padding: 10px 50px;
|
|||
|
|
/*same as "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.
|