diff --git a/README.md b/README.md index cc89edc..edd914c 100644 --- a/README.md +++ b/README.md @@ -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) diff --git a/lw02/README.md b/lw02/README.md new file mode 100644 index 0000000..be57c8e --- /dev/null +++ b/lw02/README.md @@ -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, песочницу для проверки вёрстки и не только - . + +См. следующий материал: + +- HTML5 и CSS3 на примерах - https://webref.ru/layout/html5-css3 +- Справочник по HTML - http://htmlbook.ru/html + +## Создание документа HTML + +На основании макета, выполненного в рамках лабораторной работы №1, необходимо добавить в HTML-документ элементы. + +Главный документ должен иметь название `index.html`. +Если макетом планируется создание нескольких страниц, то они должны называться аналогичным образом на английском языке. +Например, `orders.html`, `feedback.html` или `sitemap.html`. + +При вёрстке Вашего макета не бойтесь объединять элементы в контейнеры и присваивать им классы как общие на несколько блоков, так и индивидуальные под каждый блок. + +Также можно сначала добавлять элементы без стилизации, а затем уже приниматься за "наведение красоты". +Или же сразу добавлять стили к только что созданным элементам. + +Пример сайта из материалов, сделанных на практике: . +Если посмотрите код страницы, то не увидите ничего сложного. + +## Вставка картинок из макета + +В макете есть возможность выгружать группу элементов как изображение. +Для этого в панели свойств есть меню "Export", где можно выбрать параметры выгрузки. + +Стоит обратить внимание на следующие особенности: + +- Если вы экспортируете иконку, где много векторной графики, т.е. графических примитивов (линий, фигур, заливки и проч.), то следует выбирать формат SVG. +- Если вы экспортируете изображение, где есть растр, т.е сетка пикселей, то следует выбирать формат JPG. + +Также удобно называть слой с экспортируемым изображением на английском языке, т.к. название выгружаемого изображения будет с ним совпадать. + +Например, при экспорте слоя "site-logo" в формат SVG создастся файл `site-logo.svg`, который можно будет подключить к HTML-документу при помощи элемента `Логотип`. + +## Подключение каскадных таблиц стилей CSS и пример + +Подключение таблицы стилей в head-элементе страницы: + +```html + +``` + +Пример таблицы стилей 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: . + +Самоучитель по CSS можно найти по ссылке . +Справочник по правилам CSS там же: . + +## Flexbox + +Flexbox – новая система позиционирования элементов в CSS. +С её помощью можно гибко настроить как положение элемента в контейнере, так и его поведение в зависимости от различных параметров, например, объёма содержимого. + +Подробнее можно ознакомиться по этой ссылке: . + +Нам Flexbox поможет настроить положение отдельных элементов в контейнере для настольной и мобильной вёрстки. + +В лабораторной работе предполагается, что те места, где в макете содержимое расположено в несколько колонок, они будут стилизованы через Flexbox. + +## Адаптивная вёрстка + +Адаптивность в стилизации — свойство адаптироваться под различные устройства. + +Логично предположить, что если одна и та же страница выглядит одинаково для различных устройств (смартфон, часы, компьютер, планшет, 4К-телевизор), то, скорее всего, она везде будет смотреться ужасно. + +Сейчас дизайнерам необходимо формировать несколько макетов для различных устройств, а верстальщикам - несколько вариантов вёрстки. +Однако такой подход довольно трудозатратен, поэтому можно сделать одну вёрстку, но так, чтобы только при помощи стилей её можно было "подправить" под вид на конкретном устройстве. + +Это можно сделать при помощи `@media`-запросов. +С помощью них можно указать, при каких условиях соблюдаются те или иные правила стилизации. + +Например, изменение главной линии, относительно которой встраивается меню сайта, для мобильных устройств можно переопределить следующим запросом: + +```css +@media (max-width: 1020px) { + nav { + flex-direction: column; + } +} +``` + +При помощи `display: none` можно полностью скрывать элементы при определённых условиях. +Например, так можно скрывать меню для печати страницы или изображения для мобильных версий страниц. + +Все переопределённые элементы из примера, который разбирался на практике, можно найти тут: . + +В лабораторной работе предлагается аналогичным образом дополнить некоторые правила для мобильного вида сайта, чтобы он был похож на соответствующий frame из макета. + +## Дополнительные темы для самостоятельного изучения + +Если вам интересна интернет-вёрстка, можете изучить самостоятельно следующие темы: + +- Анимация в CSS3. +- Переменные в CSS3. +- Препроцессоры CSS: LESS, SASS/SCSS.