Add lw02
This commit is contained in:
Vladislav Moiseev
parent
8cfe3a48d0
commit
271fb5e605
@ -17,7 +17,7 @@
|
||||
Обязательные лабораторные работы:
|
||||
|
||||
* [Лабораторная работа №1 - Создание макета сайта (Figma)](/lw01/README.md)
|
||||
* [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/TODO/README.md)
|
||||
* [Лабораторная работа №2 - Вёрстка сайта (HTML, CSS)](/lw02/README.md)
|
||||
* [Лабораторная работа №3 - Динамика сайта (JavaScript)](/TODO/README.md)
|
||||
* [Лабораторная работа №4 - Разворачивание локального веб-сервера (PHP)](/TODO/README.md)
|
||||
* [Лабораторная работа №5 - Создание веб-приложения при помощи ASP.NET Core](/TODO/README.md)
|
||||
|
||||
218
lw02/README.md
Normal file
218
lw02/README.md
Normal file
@ -0,0 +1,218 @@
|
||||
# Лабораторная работа №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.
|
||||
Loading…
Reference in New Issue
Block a user