WEB 1 Ибрагимова Шакиров
.docx
УФИМСКИЙ ГОСУДАРСТВЕННЫЙ АВИАЦИОННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ
ФАКУЛЬТЕТ ИНФОРМАТИКИ И РОБОТОТЕХНИКИ
КАФЕДРА ВЫЧИСЛИТЕЛЬНОЙ МАТЕМАТИКИ И КИБЕРНЕТИКИ
|
|
|
||
|
УТВЕРЖДАЮ Проректор университета по научной работе ФИО |
|||
|
|
|
||
|
"___" ______________ _______г. |
|||
|
|
|
||
Лабораторная работа № 1
«Вёрстка веб-страниц с использование HTML/CSS на основе готового шаблона»
|
||||
|
||||
по предмету: Web-технологии |
||||
Преподаватель |
|
Б.С. Юдинцев |
||
|
|
|
||
|
|
|
||
|
|
|
||
Исполнители |
|
К.Б. Ибрагимова А.Р. Шакиров |
||
|
|
|
||
Уфа 2021 |
||||
ЗАДАНИЕ
Выбрать готовый шаблон для оформления контентных страниц сайта.
Придумать тематическое (текстовое) наполнение страниц сайта.
Разработать на основе выбранного шаблона 4-5 (в зависимости от количества человек в подгруппе) html-страниц, используя CSS-стили и HTML5- модель верстки.
На каждой странице в блоке уникального содержимого (теги <main>) реализовать различные стилизованные элементы: список, форма ввода, изображение с текстом, таблица с текстовым наполнением, предусмотреть блок ссылок на соцсети в «подвале».
Реализовать переходы на созданные страницы через навигационное меню (простыми тегами для ссылок)
Ход работы
Для выполнения лабораторной работы был выбран макет социальной сети, состоящий из двух страниц. Первая страница – профиль пользователя (рис. 1). Вторая страница – страница сообщений пользователя (рис. 2).
Рисунок 1. Профиль пользователя
Рисунок 2. Страница сообщений
Наполнение сайта будет состоять из информации о пользователе на его личной странице и из сообщений и материалов на странице сообщений.
Сайт, разработанный в ходе выполнения лаборатрной работы, реализован средствами HTML5 и CSS3.
HTML – стандартизированный язык разметки веб-страниц во Всемирной паутине. Код HTML интерпретируется браузерами, полученная в результате интерпретации страница отображается на экране монитора компьютера или мобильного устройства. В лабораторной работе использовалася
СSS – формальный язык описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки (HTML или XHTML).
Для создания сайта был выбран компонентный подход к веб-разработке БЭМ (Блок, Элемент, Модификатор). В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая дублирования.
Блоками на странице будут являться функционально независимые компоненты, которые могут быть повторно использованы.
Пример блока header:
<header class="header">…</header>
Элементами на странице будут являться составные части блока, которые не могут использоваться в отрыве от него.
Пример блока search-form и его элемента search-form__input:
<form class="search-form">
<input class="search-form__input">
…
</form>
Модификаторами на странице будут являться сущности, определяющие внешний вид, состояние или поведение блока либо элемента.
Пример блок search-form имеет модификатор focused:
<form class="search-form search-form_focused">
<input class="search-form__input">
</form>
Для сайта была использована семантическая структура страниц HTML5. Семантические элементы HTML5 доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.
Тег <main> предназначен для содержимого, уникального для страницы. Его стоит размещать только один раз на странице и внутри тега <body>.
Тег <header> представляет собой группу вводного содержимого. Если он дочерний элемент тега <body>, то он определяет глобальный заголовок вебстраницы, здесь может быть логотип и (или) название сайта или компании. Если же <header> расположен как дочерний элемент <article> или <section>, то он определяет конкретный заголовок для этого раздела.
Тег <nav> содержит основные функции навигации для страницы. Вторичные ссылки и т. д. не входят в навигацию.
Тег <article> содержит блок связанного содержимого, который имеет смысл сам по себе без остальной части страницы (например, один пост в блоге).
Тег <section> подобен <article>, но больше подходит для группирования одной части страницы, которая представляет собой одну часть функциональности (например, мини-карту или набор заголовков статей и сводок).
Тег <footer> представляет собой группу конечного контента для страницы, т.н. «подвал».
Определим семантическую структуру личной страницы пользователя (рис.3). На странице в блоке уникального содержимого (тег <main>) реализуем различные стилизованные элементы: список, форма ввода, изображение с текстом, таблица с текстовым наполнением. Внесем блок ссылок на соцсети в «подвале» (тег < footer >).
Рисунок 3. Разметка базовых блоков на профильной странице
Заполним таблицу 1.1. названиями базовых блоков и соответствующими им именами CSS-селекторов личной страницы пользователя.
Таблица 1.1.
Блок |
CSS-селектор |
header |
.header |
main |
.content .content_profile |
nav |
.navigation .content__block |
article |
.post .content__block |
section |
.profile-wall |
aside |
.profile-photo .content__block |
footer |
.footer .content__block .content__block_down |
Реализуем переход с личной страницы на страницу сообщений. Используем тег <а>, определив атрибут href, после чего тег <а> станет ссылкой. Присвоим атрибуту href путь к файлу страницы сообщений (рис.4).
Рисунок 4. Определение элемента ссылки
Тег <а> является обёрткой тега <img>, поэтому в компоненте навигации мы видим картинки, которые являются ссылками (рис.5).
Рисунок 5. Блок навигации на профильной странице
Определим семантическую структуру страницы сообщений (рис.6). На странице в блоке уникального содержимого (тег <main>) реализуем различные стилизованные элементы: список, форма ввода, изображение с текстом, таблица с текстовым наполнением. Внесем блок ссылок на соцсети в «подвал» (тег < footer >).
Рисунок 6. Разметка базовых блоков на странице сообщений
Заполним таблицу 1.2. названиями базовых блоков и соответствующими им именами CSS-селекторов страницы сообщений пользователя.
Таблица 1.2.
Блок |
CSS-селектор |
header |
.header |
main |
.content .content_message |
nav |
.navigation .navigation_horizontal .content__block |
article |
.message |
section |
.messages__message-list |
aside |
.messages__user-list |
footer |
.footer .content__block .content__block_down |
Реализуем возврат со страницы сообщений на страницу профиля. Используем тег <а>, определив атрибут href, после чего тег <а> станет ссылкой. Присвоим атрибуту href относительный путь к файлу страницы профиля (рис.7).
Рисунок 7. Определение элемента ссылки
Вид ссылки на странице сообщений (рис. 8).
Рисунок 8. Элемент ссылка «Назад»
ВЫВОД
В ходе выполнения лабораторной работы были получены навыки работы с языками HTML и CSS. Были созданы html-страницы по шаблону с тематическим наполнением. При разработке страниц использовался компонентный подход БЭМ и семантическая структура страниц. На страницах были реализованы различные стилизованные элементы: список, форма ввода, изображение с текстом, таблица с текстовым наполнением и блок ссылок на соцсети в «подвале». Также был реализован переход на созданные страницы через навигационное меню.