Инфоурок › Информатика ›Другие методич. материалы›Методические указания Применение тегов HTML при создании web-страниц: создание шаблона сайта с помощью блочной верстки

Методические указания Применение тегов HTML при создании web-страниц создание шаблона сайта с помощью блочной верстки

Скачать материал

МИНИСТЕРСТВО ОБРАЗОВАНИЯ ОМСКОЙ ОБЛАСТИ

БЮДЖЕТНОЕ ПРОФЕССИОНАЛЬНОЕ

ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ

ОМСКОЙ ОБЛАСТИ

«Омский колледж транспортного строительства»

Рачкова Н. В.

ПРИМЕНЕНИЕ ТЕГОВ HTML ПРИ СОЗДАНИИ WEB-СТРАНИЦ:

СОЗДАНИЕ ШАБЛОНА САЙТА С ПОМОЩЬЮ БЛОЧНОЙ ВЕРСТКИ

Методические указания по выполнению практической работы

Омск 2024

Рачкова Н. В. Применение тегов HTML при создании web-страниц: создание шаблона сайта с помощью блочной верстки: Методические указания по выполнению практической работы: Омск, 2024. – 35 с.

Целью методических указаний является оказание помощи при изучении технологий использования блочной верстки при разработке web-сайтов с помощью языка разметки HTML и каскадных таблиц стилей CSS.

Предназначены для студентов очной и заочной форм обучения, преподавателей, а также для желающих самостоятельно освоить язык разметки

HTML и принципов использования каскадных таблиц стилей CSS.

СОДЕРЖАНИЕ

ВВЕДЕНИЕ.......................................................................................................... 4

Практическая работа............................................................................................ 6

Теоретические сведения................................................................................... 8

Задание к работе............................................................................................. 13

Порядок выполнения практического задания................................................ 13

Вопросы для самоконтроля............................................................................ 34

Лист самооценки............................................................................................ 34

ВВЕДЕНИЕ

МДК. 08.01 «Проектирование и разработка интерфейсов пользователя» предназначен для формирования знаний и умений в области программирования web-сайтов, необходимые для будущей трудовой деятельности выпускников колледжа.

Методические указания содержат описание практической работы, состав и содержание которых направлены для реализации Государственных требований к минимуму содержания и уровню подготовки выпускников по специальности 09.02.07 «Информационные системы и программирование» в соответствии с ФГОС, перечень работ соответствует рабочая программа профессионального модуля «ПМ08. Разработка дизайна веб-приложений».

Основными целями и задачами практической работы являются:

 формирование умений:

• выбирать наиболее подходящее для целевого рынка дизайнерское решение;

• разрабатывать интерфейс форм для web-приложений с использованием блочной верстки;

 приобретать знания:

• современные методики разработки интерфейса web-страниц с применением блочной верстки;

• государственные стандарты и требования к разработке дизайна вебприложений;

- развитие интеллектуальных умений у будущих специалистов: аналитических, проектировочных и др.

- развитие при решении поставленных задач таких профессионально значимых качеств, как самостоятельность, ответственность, точность, творческая инициатива.

При выполнении практической работы студенты овладевают профессиональными умениями и навыками в сфере web-разработки, которые в дальнейшем совершенствуются при изучении смежных МДК по выбранной специальности, и в процессе курсового и дипломного проектирования.

В ходе изучения МДК 08.01 «Проектирование и разработка интерфейсов пользователя» осуществляется связь дисциплинами «Информационные технологии», «Основы алгоритмизации и программирования», МДК 08.02 «Графический дизайн и мультимедиа», МДК 09.01 «Проектирование и разработка веб-

приложений», курсовым и дипломным проектированием.

Выполнение практической работы непосредственно связано с изучением тем и разделов данного междисциплинарного комплекса.

В методических указаниях содержится теоретический материал, описание практической работы, вопросы для самоконтроля, что позволяет студентам, приобрести практические навыки оформления web-страниц с помощью блочной вёрстки, используя язык разметки HTML и каскадные таблицы стилей CSS. Практическая работа входит в перечень практических работ в рабочей программе. На выполнение работы отводится восемь часов.

При выполнении практической работы используется частично-поисковый метод.

Перед выполнением практической работы студент должен усвоить необходимый объем домашней подготовки, перед выполнением преподавателем работы выполняется проверка готовности студента. В конце выполнения работы студент должен письменно ответить на контрольные вопросы и представить отчет о выполнении работы преподавателю.

Практическая работа

Специальность: 09.02.07 Информационные системы и программирование

Название МДК: МДК 08.01 «Проектирование и разработка интерфейсов пользователя»

Раздел программы: Основы web-технологий

Тема: Применение тегов HTML при создании web-страниц: создание шаблона сайта с помощью блочной верстки

Планируемые результаты:

ПК 1.4. Разрабатывать дизайн-концепции веб-приложений в соответствии с корпоративным стилем заказчика

ОК 2. Осуществлять поиск, анализ и интерпретацию информации, необходимой для выполнения задач профессиональной деятельности.

- способен самостоятельно определять перечень необходимых селекторов, их свойств и значений свойств, которые используются при блочной верстке во время создания web-сайтов

ОК 9. Использовать информационные технологии в профессиональной деятельности.

- способен применять каскадные таблицы стилей CSS при выполнении блочной верстки web-страниц

Цель учебного занятия: рассмотрение способов использования блочной верстки при оформлении web-страниц.

Применение тегов HTML при создании web-страниц: создание шаблона сайта с помощью блочной верстки Задачи:

1) определить понятия: верстка, блочная верстка;

2) изучить виды селекторов, их свойств и значения этих свойств, которое используются при блочной верстке;

3) использовать селекторы, их свойства и значения этих свойств для оформления web-страниц с помощью блочной верстки;

4) разработать web-страницы с использованием блочной верстки;

Информационно-образовательные ресурсы (учебники, сайты, справочники и т.д.):

1. Немцова, Т. И. Компьютерная графика и web-дизайн: учебное пособие /

Т.И. Немцова, Т.В. Казанкова, А.В. Шнякин; под ред. Л.Г. Гагариной. — Москва: ФОРУМ: ИНФРА-М, 2023. — 400 с.

2. Малышева, Е.Н. Web-технологии : учеб. пособие для обучающихся по направлениям подготовки 51.03.06 «Библиотечно-информационная деятельность», 46.03.20 «Документоведение и архивоведение», квалификация (степень) выпускника «бакалавр» / Е.Н. Малышева. - Кемерово: Кемеров. гос. ин-т культуры, 2018. - 116 с. - ISBN 978-5-8154-0449-6. - Текст: электронный. - URL:

https://znanium.com/catalog/product/1041185. – Режим доступа: по подписке.

Оборудование и материалы: ПК, раздаточный материал (методические материалы, лист оценки)

Теоретические сведения

Верстка сайтам – это преобразование готового макета в продукт, состоящий из языка разметки HTML и CSS.

Виды верстки сайта:

1. блочная верстка;

2. табличная верстка.

Концепция блочной вёрстки основана на активном использовании универсальных тегов <div>, внутрь которых помещается содержимое, включая другие теги.

Блочная вёрстка лишена недостатков табличной – поисковыми системами она индексируется лучше, её код не такой развесистый, блоки <div>, которые обычно называют «слоями», изначально задумывались универсальными, то есть «для всего», тогда как <table> — это таблица, которую нужно использовать для отображения табличных данных и не более того.

Рисунок 1 – Пример блочной вёрстки

Единственный ощутимый минус блочной вёрстки – сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем.

Блочная верстка позволяет легко создавать аккуратный, пропорциональный и главное — адаптивный сайт, чего требуют современные пользователи. Блочная верстка лучше распознается поисковыми системами и облегчает попадание сайта в топ выдачи поисковых систем.

Рисунок 2 – Пример блочной (адаптированной) верстки

Суть блочной вёрстки: в графическом редакторе создаётся макет сайта:

размечается, где какая область страницы (шапка, низ, боковая панель, основной контент) будет находиться и сколько места занимать, готовятся картинки, фоны. Далее каждая часть страницы помещается в свой блок <div>: верх сайта – в первый, меню – во второй, контент – в третий и т. д.

Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью каскадных таблиц стилей CSS.

Конечный HTML-документ представляет собой набор блоков <div> с контентом внутри. Оформление в основном находится в отдельном CSS-файле, подключенном к странице тегом <link>, или в контейнере <style> секции <head>.

Принципы блочной вёрстки:

Первый принцип – использование тега <div>, который можно назвать базовым элементом блочной структуры.

Второй принцип – принцип разделения кода, согласно которому содержимое от оформления нужно отделять: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней.

Третий принцип – таблицы нужно использовать не везде, а по необходимости, при этом полностью отказываться от них так же странно, как и применять не к месту.

Семантической называют верстку, использующую для структурирования html-документов теги, которые разделяют код на логические блоки, определяющие их роль и содержание в структуре web-страницы.

Блочные элементы:

1. тег <header> – определяет верхнюю часть страницы или элемента,

шапку страницы сайта;

2. тег <footer> – определяет нижнего колонтитула страницы (подвал) или элемента (подвал), содержит обычно правовую информацию (копирайты), имя автора, название сайта и/или компании, телефон и/или адрес компании и т.п.;

3. тег <section> – определяет раздел страницы, в котором размещается логически связанная информация, имеющая свой заголовок;

4. тег <nav> – определяет основное меню сайта (панель навигации), в меню располагают ссылки на важные страницы сайта, это могут быть страницы контактов, о компании, каталог, магазин, главная, описание услуг, новостей и т.д;

5. тег <article> – используется для разделения раздела страницы на логические блоки, блок должен быть связан с общим разделом, но иметь свой собственный смысл и быть отдельной логической единицей страницы;

6. тег <aside> – обрамляет боковую панель (сайдбар), на странице сайта.

На рисунке 3 представлена схема семантической верстки.

Рисунок 3 – Схема семантической верстки

Создание сетки на странице. CSS-свойство flex

Свойство flex — это один из двух инструментов для построения сеток и микросеток на странице. Свойство основано на концепции гибкого макета, где элементы могут растягиваться или сжиматься, чтобы использовать доступное пространство на странице наиболее эффективно.

Синтаксис:

ul { display: flex; flex-direction: row; }

Рисунок 4 – Результат использования свойства flex

Свойство flex-wrap определяет, должны ли элементы переноситься на новую строку или оставаться на одной. Имеет три значения — nowrap, wrap, wrapreverse.

Nowrap — значение по умолчанию, указывает, что элементы располагаются в контейнере в одну строку или столбец. Если элементы не помещаются по ширине или высоте контейнера, они будут масштабироваться.

Wrap — элементы могут переноситься на следующую строку или столбец, если они не помещаются. Это позволяет создавать многострочные или многоколоночные макеты. Элементы будут размещены в новых строках или столбцах сверху вниз или слева направо, в зависимости от ориентации основной оси.

Wrap-reverse — значение работает аналогично wrap, но элементы будут переноситься на следующую строку или столбец в обратном порядке. Например, если в flex-direction указано row, элементы будут переноситься на новую

строку справа налево.

Свойство justify-content распределяет элементы вдоль главной оси контейнера. У свойства есть ряд значений:

- flex-start — значение по умолчанию, оно указывает, что флекс-

элементы выровнены по началу главной оси контейнера;

- flex-end указывает, что флекс-элементы выровнены по концу главной оси контейнера;

- center указывает, что флекс-элементы выровнены по центру главной оси контейнера;

- space-between указывает, что флекс-элементы равномерно распределены вдоль главной оси контейнера. Первый элемент будет выровнен в начале оси, а последний элемент — в конце. Промежутки между элементами будут распределены равномерно.

- space-around означает, что флекс-элементы равномерно распределены вдоль главной оси контейнера с равными промежутками как до, так и после каждого элемента;

- space-evenly указывает, что элементы равномерно распределены вдоль главной оси контейнера, и промежутки между ними и на краях контейнера равны.

Задание к работе

В соответствии с приведёнными теоретическими сведениями создать приведенные ниже web-страницы, а также создать в соответствии с вариантом, выданным преподавателем создать web-страницу с применением каскадных таблиц стилей.

Порядок выполнения практического задания

I. Открыть программу Visual Studio Code. Создать папку SAIT8_ВерсткаDIV, в которой создать web-страницу с именем index.html по своей предметной области с помощью блочной вёрстки, используя макет, представленный на рисунке ниже (контент наполнять в соответствии со своей предметной областью)

Рисунок 5 – Макет страницы

Согласно макету, страница сайта будет содержать пять блоков: «шапку», навигационное меню, боковую панель, основной блок с контентом и «ноги».

1) Сначала необходимо создать HTML-страницу: обозначить структуру, разметить её:

а) в разделе HEAD подключить файл со стилями;

б) добавить в раздел Body блок div с атрибутом id="container"> (блок-

родитель, внутри которого, будут все остальные блоки);

в) внутрь блока-родителя добавить последовательно шесть блоков div с атрибутами: id="header" (для шапки сайта), id="navigation" (для меню), id="sidebar" (для боковой панели), id=" content " (для основного содержимого), id="clear" (вспомогательный слой), id=" footer " (для подвала сайта).

2) Добавить файл со стилями CSS, в котором установить стили в следующем порядке:

а) для тега body установить: цвет фона (background), цвет шрифта (color),

название шрифта (font-family: Arial, sans-serif), размер шрифта (font-size: 14px);

б) для идентификатора id="header" установить цвет фона, ширину блока

– 100%, высоту 115px;

в) для идентификатора id="container" установить цвет фона, внешние от-

ступы auto, выравнивание текста (text-align) по центру, ширину блока –80%, высоту 1500px;

г) для идентификатора id="navigation" установить цвет фона, ширину

блока – 100%, высоту 40px;

д) для идентификатора id="sidebar" установить цвет фона, ширину блока

– 20%, высоту 1400px, выравнивание элемента по левому краю (float: left);

е) для идентификатора id="content" установить цвет фона, ширину блока

– 80%, высоту 1400px, выравнивание элемента по правому краю;

ж) для идентификатора id="footer" установить цвет фона, ширину блока –

100%, высоту 100px;

з) для идентификатора id="clear" установить: (запрещает об-

текание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться).

Рисунок 5 – Результат верстки страницы

3) Далее наполнить web-страницу содержимым (по варианту предметной области):

а) в разметке заголовка добавить: логотип и заголовок с гиперссылками

на главную страницу (эту же);

б) меню (горизонтальное и боковое) создать с помощью маркированного

списка;

в) основной контент и подвал заполнить с помощью заголовков второго

уровня и параграфов;

г) для картинок в основном контенте добавить атрибуты: class="leftimg"

для левой картинки и class="rightimg" для правой картинки;

д) изменить файл со стилями:

- для тега body добавить внешние отступы верхний и нижний по 5px, левый и правый по 15px;

- для идентификатора id="header" добавить внешние отступы auto, увеличить размер шрифта;

- для идентификатора id="navigation" добавить внешние верхний и нижний отступы по 15px, увеличить размер шрифта;

- для идентификатора id="footer" увеличить размер шрифта и выравнивание текста по центру;

- для тега img установить выравнивание элемента по левому краю (float:

left), добавить внешние верхний и левый отступы по 15px, высоту и ширину по 50px;

- для селектора #header h2 (для заголовка в шапке сайта) установить выравнивание элемента по левому краю (float: left), добавить внешний верхний отступ 15px и левый отступ 50px;

- для селектора #navigation li (для маркированного списка в блоке меню) установить выравнивание элемента по левому краю (float: left), подобрать самостоятельно внутренние отступы и размер шрифта, с помощью свойства display со значением inline-block список выполнить в строчку, с помощью свойства liststyle-type со значением none убрать маркеры у списка в меню;

- для селектора #sidebar ul убрать маркеры у списка в меню, установить выравнивание элемента по левому краю, увеличить размер шрифта, выравнивание текста по центру, подобрать внешний отступ сверху и снизу;

- для селектора #sidebar li (элемент списка в левой боковой панели) по-

добрать внешние отступы сверху и снизу;

- для селектора #footer p (параграф в подвале сайта) установить выравнивание текста по центру;

- для тега p установить выравнивание текста по ширине (значение свойства justify), подобрать самостоятельно размер шрифта, внутренние отступы слева и справа, добавить межстрочный интервал 1.5 с помощью свойства lineheight, установить отступ первой строки 25px с помощью свойства text-indent

- для тега a установить цвет ссылки черный, убрать оформление с помощью свойства text-decoration со значением none;

- для класса leftimg установить выравнивание элемента по левому краю (свойство float), задать самостоятельно высоту и ширину картинки, внешние

отступы;

- для класса leftimg установить выравнивание элемента по правому краю (свойство float), задать самостоятельно высоту и ширину картинки, внешние

отступы;

4) Далее создать еще две страницы (page1.html и page2.html) с этими же стилями и связать с главной страницей с помощью меню, ниже приведен результат на рисунке 6.

Рисунок 6 – Результат верстки сайта

II. Создать еще одну страницу page3.html в соответствии с примером, представленном ниже на рисунке:

а) добавить три блока: в первом блоке (шапка сайта) разместить заголо-

вок с эффектом, во втором блоке (основная часть сайта) разместить картинки, в третьем блоке (подвал сайта) разместить заголовок с эффектом;

б) между блоками добавить разделительную линию (тег hr);

в) создать файл со стилями, в котором установить для блоков и картинок

следующие свойства:

- первый блок: цвет фона, цвет и размер шрифта, выравнивание текста, внутренние отступы, с помощью свойства text-shadow добавить тень на каждую букву текста со значениями: 5px 5px 7px #ffcccc (где первые три значе-

ния – отступы и четвертый – цвет тени);

- второй блок: высота и ширина блока в процентах, внутренние отступы, установить выравнивание элемента по левому краю (свойство float);

- третий блок: цвет фона, цвет и размер шрифта, выравнивание текста, внутренние отступы, с помощью свойства font-variant со значением smallcaps установить все буквы заглавные, с помощью свойства text-shadow добавить тень на каждую букву текста со значениями: 3px 3px 5px #ffcccc;

- для картинок (тег img) параметра рамок (толщина рамки 2px, выбрать цвет и тип рамки, задать через пробел), высоту и ширину картинок

Рисунок 7 – Результат верстки страницы page3.html

III. Создать еще одну страницу aboutme.html в папке SAIT8_ВерсткаDIV в соответствии с примером, представленном ниже на рисунке, заполнить контентом «Информация о компании: контактная информация»: шапку выполнить с помощью тега <header class="page-header">, основное содержание выполнить с помощью тега <main>, подвал выполнить с помощью тега <footer class="pagefooter">

Рисунок 8 – Результат верстки страницы aboutme.html

Примечания: в стилях для шапки использовать свойства: position, zindex, min-height, padding, color, background-image: linear-gradient, backgroundposition, background-size, box-shadow; в стилях для основного содержания: min-height, padding-top, color, background-color, background-image; в стилях для подвала: min-height, padding, font-size, color, background-color, backgroundimage: linear-gradient, background-repeat: repeat-x; background-position, background-size

Пример работы градиента в шапке:

Пример работы градиента в подвале:

Рисунок 9 – Код градиента

IV. Создать еще одну страницу page4.html в папке SAIT8_ВерсткаDIV, в которой создать по своей предметной области с помощью блочной вёрстки, используя макет, представленный на рисунке ниже (контент наполнять в соответствии со своей предметной областью):

1) на странице добавить три блока:

 первый блок (тег div с атрибутом class="header"), в котором разместить:

§ заголовок первого уровня «Наши сотрудники» с атрибутом

class="h_title"

§ тег nav с атрибутом class="links", внутри которого разместить две ссылки с атрибутом class="header_inner_links": одна на страницу «page3.html», вторая на эту же страницу:

 второй блок (тег div с атрибутом class="main"), в котором разместить:

§ вложенный блок – первая строка с карточками (тег div с атрибутом class="three_group"), в котором разместить три карточки (последовательно три тега div с атрибутом class="card") со следующим содержимым:

ü картинка (в атрибуте src указать путь к картинке, атрибут

class="card_picture", атрибуты hspace и vspace имеют значение 5px)

ü заголовок третьего уровня: фамилия сотрудника (атрибут

class="card_title")

ü параграф: должность сотрудника (атрибут class="card_text")

ü ссылка на ВК сотрудника: (атрибут class="card_link", атрибут target="_blank")

§ вложенный блок – вторая строка с карточками (см. выше)

§ вложенный блок – третья строка с карточками (см. выше)

 третий блок: подвал (тег div с атрибутом class="footer"), в котором разместить: ФИО разработчика;

2) подключить файл со стилями, в котором описать следующие стили:

- для тега body добавить внешние и внутренние отступы по 0px;

- для селектора "header" добавить свойства: display: flex; высота (10vh - процент от высоты окна просмотра), ширина (100vw процент от ширины окна просмотра); внутренние отступы 0, установить цвет фона, параметры тени: boxshadow: 0 3px 3px 0px rgb(230, 214, 172); justify-content: space-between (определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера: флексы равномерно распределяются по всей строке. Первый и последний флекс прижимаются к соответствующим краям контейнера);

- для селектора "h_title" добавить свойства: ширина 300px, внешние отступы auto, шрифт: monospace, размер шрифта – 24px, насыщенность шрифта: font-weight: 600;

- для селектора "links" добавить свойства: display: flex; flex-direction: row

(располагает элементы в строку горизонтально); внешние отступы auto, шрифт: monospace, отступы между колонками и рядами: gap: 50px;.

- для селектора "header_links" добавить свойства: display: flex; flexdirection: row (располагает элементы в строку горизонтально); внешние отступы auto; внешние отступ справа - 50px; шрифт: Cambria, Cochin, Georgia, Times,

'Times New Roman', serif; отступы между колонками и рядами: gap: 50px;

- для селектора "header_inner_links" (внутренние ссылки) добавить свойства: text-decoration: none (убрать оформление ссылки); установить цвет ссылки - darkred; размер шрифта - 20px; внутренний отступ снизу 3px; position: relative; transition: 0.6s ease-in-out (эффекты переходов: медленно начинается и медленно заканчивается); вид курсора - cursor: pointer; межбуквенное расстояние в тексте - letter-spacing: 1px;

- для селектора "header_inner_links:after" (внутренние ссылки) добавить свойства: установить цвет фона - черный; позицию правого края элемента – 0, позицию нижнего края элемента – 3px, ширину 0, высоту 2px; свойства: display: block; content: ""; transition: width 0.5s;

- для селектора "header_inner_links:hover:after" (внутренние ссылки) добавить свойства: установить цвет фона - красный; позицию правого края элемента – 0, позицию нижнего края элемента – 3px, ширину 100%, высоту 2px; свойства: display: block; content: ""; transition: width 0.5s; position: absolute;

- для тега "main": display: flex; расположить элементы в колонки (вертикально): flex-direction: column; align-items: center; внешние отступы - margin:

20px auto; максимальная ширина max-width: 1200px;

- для селектора "three_group" (блоки с тремя вложенными блоками) добавить свойства: display: flex; внешние отступы - auto; отступы между колонками и рядами: gap: 100px;.

- для селектора "card" (блок «карточка») добавить свойства: параметры рамки (1px solid bisque), радиус рамки - 15px; внутренние отступы по 10px; выравнивание текста – по центру; внешние отступы - margin: 30px auto; параметры тени (box-shadow: 1px 2px 3px); минимальная высота - 470px; минимальная ширина - 300px; параметры переходов - transition: 0.5s ease-out; ширина - 200px;

- для селектора "card:hover" (блок «карточка»: установка при наведении) добавить свойства: установить цвет фона - розовый; цвет текста – белый; параметры переходов - transition: 0.6s; параметры тени (1px 2px 3px);

- для селектора "card_picture" (в «карточке» картинка) добавить свойства: ширина 100%; минимальная высота – 400px; минимальная ширина - 100%; радиус рамки - 30px; внешний отступ сверху - 10px; подстраивание картинки под контейнер без деформации - object-fit: cover;

- для селектора "card_title" (в «карточке» заголовок) добавить свойства:

внешний отступ сверху - 10px; размер шрифта – 18px, насыщенность шрифта: 700;

- для селектора "card_text" (в «карточке» текст) добавить свойства:

внешний отступ сверху - 5px; размер шрифта – 15px, внутренние отступы по 10px;

- для селектора "card_link " (в «карточке» ссылка) добавить свойства: внешний отступ сверху - 15px; размер шрифта – 15px, внутренние отступы: 10px 50px; радиус рамки - 40px; параметры рамки (2px solid black); цвет фона – фиалетовый; цвет текста – черный; название шрифта (font-family): 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; параметры переходов - transition: 0.8s; придать свойства блочного и строчного элемента - display: inline-block; параметры прозрачности: opacity: 0.7;

- для селектора "card_link:hover " (в «карточке» ссылка при наведении) добавить свойства: параметры переходов - transition: 0.6s; параметры прозрачности: 1; параметры поворота элемента: transform: rotate(180deg); увеличение масштаба в 1,2 раза - transform: scale(1.2);

- для селектора "footer" (подвал) добавить свойства: высота - 10vh; цвет

фона – светло-розовый;

- для селектора "footer_p" (в подвале текст) добавить свойства: выравнивание текста – по центру; внешний отступ сверху - 25px; задать размер шрифта; придать свойства блочного и строчного элемента - display: inline-block;

- для селектора "a:visited" (посещённые ссылки) выбрать цвет ссылки: черный;

- для селектора "a:link" (ещё не посещённые ссылки) выбрать цвет ссыл-

ки: ;

- для селектора "a:active" (активные ссылки) выбрать цвет ссылки:

;

- для селектора "a:hover" (ссылки при наведении) выбрать цвет ссылки:

;

3) в файл со стилями добавить медиа-запросы:

Краткая справка:

Медиа-запросы (media queries) – это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств. Иными словами, это конструкции, которые позволяют определять на основании некоторых условий какие стили необходимо использовать на web-странице, а какие нет.

Создание медиа-запроса начинается с ключевого слова @media после которого указывается одно или несколько условий. В качестве условия можно указывать тип устройства или требования к определённой характеристике.

Требование к определённой характеристике записывается в круглых скобках.

Комбинирование нескольких условий выполняется с помощью логических операторов.

После составления @media, стили, указанные в нём, будут применяться только в том случае, когда итоговый результат вычисления условий является истинной.

Медиа-запросы предназначены для создания адаптивных дизайнов . Адаптивный дизайн отличается от других тем, что он может «приспосабливаться» (видоизменяться) в зависимости от того, какую ширину экрана имеет устройство (браузер).

Но при создании адаптивных веб-страниц также необходимо обратить внимание на метатег viewport. Данный тег обеспечивает корректное отображение адаптивных дизайнов сайтов на экранах устройств, имеющих высокую плотность пикселей. Иными словами, он устанавливает соответствие между CSS и физическим разрешением веб-страницы.

Подключение метатега viewport к странице осуществляется так: <meta name="viewport" content="width=device-width, initial-scale=1"> В @media можно указывать определённые типы устройств:

• all – для всех;

• print – для принтеров и в режиме предварительного просмотра страницы перед печатью;

• screen – для устройств с экранами;

• speech – для программ чтения с экрана.

Примеры запросов в работе для файла page4.html:

Рисунок 10 – Код медиа-запросов

где:

max-width: none - значение по умолчанию;

flex-wrap: wrap - флексы выстраиваются в несколько строк, их направление задаётся свойством: элементы могут переноситься на следующую строку или столбец, если они не помещаются. Это позволяет создавать многострочные или многоколоночные макеты. Элементы будут размещены в новых строках или столбцах сверху вниз или слева направо, в зависимости от ориентации основной оси.

flex-direction: column - основная ось идёт вертикально сверху вниз, попе-

речная ось идёт горизонтально слева направо; 4) Добавить в раздел HEAD:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Рисунок 11 – Результат работы с файлом page4.html

V. Создать еще одну страницу page5.html в папке SAIT8_ВерсткаDIV, в которой создать по своей предметной области с помощью блочной вёрстки, используя макет, представленный на рисунке ниже (контент наполнять в соответствии со своей предметной областью), а также выполнив действия, описанные ниже:

1) в разделе HEAD выполнить описание типа документа: <!DOCTYPE html>, указать заголовок страницы и тег <meta> для указания кодировки, подключить файл со стилями;

2) в начале файла со стилями определить шрифты с помощью правила @font-face: указываем имя шрифта, ссылку на сам шрифт и толщину шрифта:

3) аналогично подключить шрифты: Montserrat-Regular.ttf (имя шрифта такое же как у первого) и Lora-Regular.ttf (имя шрифта: Lora);

4) для универсального селектора для свойства box-sizing установить значение border-box (говорит браузеру учитывать любые границы и внутренние отступы в значениях, которые указываются в ширине и высоте элемента); для тега body обнулить внешние отступы и указать имя шрифта: Montserrat;

5) в html-файле создать секцию для первого экрана: контейнер (тег section с атрибутом class="first-screen section-bg"), внутрь которого вложить тег div с атрибутом class="container", в который вложить еще два блока (теги div);

6) первый будет содержать заголовок, а во втором будут 2 кнопки (использовать тег для ссылки), кнопкам указать классы: btn btn-bg и btn btn-outline, в атрибуте href поставить знак #;

7) в стилях для класса container установить ширину 100%, максимальную высоту 1140px, внешние отступы: 0 auto;

8) в стилях для тега section установить внутренние отступы: по вертикали

90px, по горизонтали: 0;

9) в стилях для класса first-screen установить высоту: 100vh; для свойства clip-path установить значение: ellipse(100% 60% at 50% 35%) – обрезать экран эллипсом, для свойства display установить значение: flex, для свойства alignitems установить значение: center, для свойства position установить значение: relative;

10) также эта секция будет иметь фон, поэтому в качестве фона будет svg изображение, оно будет темное, поэтому цвет текста сделать белым: для класса section-bg установить: цвет текста – белый, подключить фоновое изображение: background: url(../img/alnilam_Stars_Pattern.svg);

11) в стилях для заголовка h1 указать шрифт Lora и его размер в 80 px;

12) у ссылок (класс btn) будет внутренний отступ (по вертикали 13px и по горизонтали 20px), параметры границы (свойство border, значение 2px solid transparent) и цвет шрифта белый, шрифт будет полужирный (свойство fontweight, значение 700), для свойства text-decoration установить значение: none;

13) для кнопки-ссылки с фоном в стилях для класса btn-bg установить цвет фона #c74838; для кнопки-ссылки без фона в стилях для класса btn-outline установить для цвета границы (border-color) значение #c74838;

14) добавить стрелку для прокрутки вниз: в файле page5.html после тега div class="container" добавить тег ссылку с атрибутами: class="chevron" и href="#"; внутрь вставить картинку со стрелкой

(strelka_vniz_vddnhbpfshmm_64.png), для тега с картинкой добавить атрибут alt="scroll" (альтернативный текст);

15) установить стили для кнопки (класс chevron): для свойства display установить значение: block; для свойства position установить значение: absolute; для свойства left (позиция слева) установить значение: 50%; для свойства bottom (позиция сверху) установить значение: 150px; для свойства transform установить значение: translate(-50%, 0);

16) создать еще одну секцию (тег section): с контейнером (тег div с атрибутом class="container"), внутри которого заголовок 2-го уровня и два абзаца;

17) для заголовка в стилях указать размер шрифта (48px), название шрифта (Lora) и внешние отступы (0 0 60px);

18) для абзацев в стилях указать размер шрифта (20px), межстрочный интервал (line-height: 2;) и название шрифта (Montserrat); выравнивание текста по ширине;

19) создать еще одну секцию (тег section): с контейнером (тег div с атрибутом class="container"), внутри которого заголовок 2-го уровня «Портфолио»

20) после заголовка создать блок (тег div) с классом gallery, каждая картинка будет находиться в блоке (тег div) с классом img-wrapper; скопировать 9 раз тег div с классом img-wrapper;

21) галерея будет flex с flex-wrap, и элементы в ней равномерно распределены, для этого в стилях для класса gallery для свойства display установить значение: flex; для свойства flex-wrap установить значение: wrap; для свойства justify-content установить значение: space-between;

22) Для класса img-wrapper задать размеры (ширина - 350px, высота - 290px), внешний отступ сверху: 50px, для свойства overflow установить значение: hidden; тип курсора (свойство cursor, его значение: pointer) и для свойства display установить значение: flex; с выравниванием по центру (свойство justifycontent, его значение: center).

23) для самой картинки (селектор img-wrapper img) установить только свойство заполнения: object-fit: cover;

24) создать еще одну секцию (форма обратной связи), с контейнером (тег div), у этой секции (тег section) будет фон, как и у первой, поэтому используется уже имеющийся класс (section-bg), у контейнера класс container; выполнить блок (тег div) с классом d-flex, а в нем два блока (с классами: w-60 pr-4 и w-40) шириной 60 и 40 процентов, у первого блока сделать еще отступ справа;

25) в первый блок поместить заголовок второго уровня и небольшой абзац текста, во втором блоке создать форму, которая будет состоять из текстового поля с именем, email-адреса, поля для сообщения и кнопки.

26) сделать отдельный класс для flex и для ширины в 60 и 40 процентов: в стилях для класса d-flex для свойства display установить значение: flex; для класса .w-60 установить ширину 60%; для класса .w-40 установить ширину:

40%; для класса .pr-4 установить внутренний отступ справа: 4rem;

27) форма будет вертикальным флексом: для этого для тега form для свойства display установить значение: flex; для свойства flex-direction установить значение: column;

28) для input и textarea сделать внутренний отступ (15px), установить размер шрифта (15px) и отступ снизу (15px), а границу убрать (border: none);

29) для того же input и textarea написать еще одно правило, когда они будут в фокусе, чтобы у них не было светящейся границы: для селекторов: input:focus, textarea:focus для свойства outline установить значение none;

31) добавить стили для тега footer — небольшой внутренний отступ

(50px 0) и выравнивание текста по центру;

32) добавить эффект наведения на кнопки, для этого указать в стилях селектор кнопки и псевдокласс hover: .btn:hover и установить цвет фона: #e63a23;

Переход между состояниями

Чтобы фон менялся плавно и это было заметно, существует свойство transition, которое является краткой записью других четырех свойств.

1. transition-property — свойство, к которому будет применяться переход.

Это может быть all — т.е. все свойства или какое-то конкретное свойство — например, background.

2. transition-duration — определяет продолжительность выполнения анимации.

3. transition-timing-function — необязательное свойство; определяет, насколько быстро должно изменяться указанное значение.

4. transition-delay — тоже необязательное свойство; задает задержку, че-

рез которую анимация должна начать выполнение.

33) указать свойство transition для кнопки: в стилях найти класс btn и добавить transition: all 0.3s ease-in-out;

34) установка свойства transition на стрелку: указать для нее hover эффект и она будет сдвигаться вниз на 25 px: для этого для селектора .chevron:hover для свойства transform установить значение translate(-50%,25px); в стилях найти класс chevron и добавить transition: all 0.3s ease-in-out;

35) установить transition к картинкам в галерее: для этого для imgwrapper указать hover с трансформацией: для селектора .img-wrapper:hover для свойства transform установить значение scale(1.05); в стилях найти класс imgwrappe и добавить transition: all 0.3s ease-in-out;

36) для создания полноценной анимации создать keyframes:

37) в стилях найти класс chevron и добавить animation: chevron-

animation infinite 2s ease-in-out;

Анимация будет начинаться с нулевым смещением, а к середине анимации смещение будет равно 10, после чего оно снова будет уменьшаться до нуля. Вначале указывается имя анимации, потом количество повторений, по умолчанию повторение будет 1 раз, но чтобы было бесконечно, надо указать infinite. Затем идет длительность анимации, и в конце указывается функция. Теперь стрелка постоянно двигается, но если навести на нее, то ничего не произойдет, так как анимация перебивает трансформацию.

38) отключить анимацию при наведении: в стилях найти класс

chevron:hover и для свойства animation-play-state установить значение paused;

При наведении на стрелку анимация будет приостановлена и рывка не будет.

39) Для создания отклика при наведении на стрелку необходимо менять сам img, трансформируя его, как и раньше: для этого в стилях создать селектор .chevron img и для свойства transition установить значение all 0.5s ease-in-out; создать селектор chevron:hover img и для свойства transform установить значение translateY(25px);

Теперь никаких рывков не будет. Стрелка будет постоянно двигаться, но в момент наведения анимация будет приостановлена, и картинка будет смещена вниз.

Рисунок 12 – Результат работы с файлом page5.html

VI. Создать еще одну страницу page6.html в папке SAIT8_ВерсткаDIV, в которой создать по своей предметной области с помощью блочной вёрстки, используя макет, представленный на рисунке ниже (контент наполнять в соответствии со своей предметной областью):

Рисунок 13 – Результат работы с файлом page6.html

Темы предметных областей:

1. Разработка web-сайта для базы отдыха «Колос»

2. Web-cайт истории города Омск

3. Web-cайт о головоломках, ребусах, кроссвордах

4. Разработка web-сайта «Спортивное питание»

5. Разработка web-сайта частной медицинской клиники

6. Разработка web-сайта «Праздники для всех»

7. Разработка web-сайта для велосипедистов

8. Разработка web-сайта для путешественников «Горный Алтай»

9. Разработка web-сайта для путешественников «Байкал»

10. Разработка web-сайта для путешественников «Достопримечатель-

ности Москвы»

11. Разработка web-сайта «Достопримечательности Санкт-Петербурга»

12. Разработка web-сайта музыкального исполнителя

13. Web-cайт истории города Москва

14. Web-cайт истории мостов города Омск

15. Разработка web-сайта популярного актера

Вопросы для самоконтроля

1. Что такое верстка?

2. Назовите виды верстки.

3. Какие теги используются для блочной верстки?

4. Что такое сетка?

Лист самооценки

Фамилия имя отчество студента

№	Критерий					Студент	Преподаватель
1.	Знаю тему урока.
2.	В соответствии с dex.html.	о	бразцом св	ерстал web	-страницу in-
3.	В соответствии page1.html.	с	образцом	сверстал	web-страницу
4.	В соответствии page2.html.	с	образцом	сверстал	web-страницу
5.	В соответствии page3.html.	с	образцом	сверстал	web-страницу
6.	В соответствии page4.html.	с	образцом	сверстал	web-страницу
7.	В соответствии page5.html.	с	образцом	сверстал	web-страницу
8.	В соответствии page6.html.	с	образцом	сверстал	web-страницу
9.	В соответствии aboutme.html.	с	образцом	сверстал	web-страницу
10.	Правильно выполнил оформление всех сайтов.
	Сумма баллов:
	При наличии хотя бы одной оценки 0 ответьте на вопрос: Какой этап работы вызвал затруднение?