Лабораторные работы. Краева / Web-технологии. Отчет №3
.docxМинистерство цифрового развития, связи и массовых коммуникаций Российской Федерации
Федеральное государственное бюджетное образовательное учреждение Высшего образования «Санкт-Петербургский государственный университет телекоммуникаций им. Проф. М. А. Бонч-Бруевича» (СПбГУТ)
Факультет Информационных технологий и программной инженерии
Кафедра Программной инженерии и вычислительной техники
Лабораторная работа №3
По дисциплине «Web-технологии»
На тему «Блочная верстка с использованием CSS»
Выполнил:
Студент 3-го курса
Дневного отделения
Группы ИКПИ-32
Яковлев М. А.
Преподаватель:
Краева Е. В.
Санкт-Петербург
2025
Цель работы
Цель работы — изучить принципы и методы блочной верстки веб-страницы с использованием тегов HTML и каскадных таблиц стилей (CSS).
Ход выполнения
Упражнение №1. Разработка структуры HTML-документа
Был создан файл с базовой структурой HTML5. Для создания каркаса страницы использованы семантические теги:
· <header> для шапки сайта,
· <nav> для навигационного меню,
· <aside> для левого сайдбара,
· <div> для основной части контента,
Рисунок
1. Начальный код
<footer> для подвала. [Рис. 1]
Рисунок
2. Вид страницы
сходная
структура без применения стилей
отображалась в браузере как простой
вертикальный список элементов. [Рис. 2]
Упражнение №2. Применение стилей CSS для блочной верстки
Для придания странице требуемого вида был написан CSS-код, размещенный внутри тега <style> в секции <head>.
Были заданы стили для всех основных блоков: установлены ширина, высота, цвет фона. Для бокового расположения сайдбара и основного контента использовано свойство float: left. [Рис. 3]
Рисунок
3. Обновленный код
ассчитана
суммарная ширина смежных блоков (aside —
10%, #content — 90%), чтобы они корректно
разместились в одной строке. Для
предотвращения «наезжания» подвала
использовано свойство clear: both в служебном
блоке #clear.
Внешний вид страницы изменился на следующий [Рис. 4]:
Рисунок
4. Новый внешний вид
Упражнение №3. Дополнение страницы и расширенные стили
Страница была наполнена контентом на тему «Британская короткошёрстная кошка».
1. Навигационное меню реализовано с помощью таблицы (<table>).
2. В сайдбаре добавлены пункты меню, стилизованные классом .menuButton с применением псевдокласса :hover для интерактивности.
3. В основную часть добавлен <iframe> с контентом из Википедии.
4. В подвал добавлен текст.
5. Для шапки, сайдбара и подвала применены сложные стили: градиенты: радиальный для шапки (radial-gradient) и линейный для сайдбара (linear-gradient). Анимация: для текста в подвале создана анимация slidein, изменяющая отступ и цвет. Изображение: для подвала установлена фоновая картинка. [Рис. 5]
Рисунок
5. Обновленный код
Создан CSS-файл [Рис. 6]:
Рисунок
6. CSS-файл
нешний
вид страницы изменился на следующий
[Рис. 7]:
Рисунок
7. Вид страницы
Заключение
В ходе выполнения лабораторной работы были успешно изучены и применены на практике основы блочной верстки с использованием HTML и CSS. Была создана семантически верная структура страницы, которая с помощью CSS-стилей была преобразована в классический макет с шапкой, навигацией, сайдбаром, основным контентом и подвалом.
Контрольные вопросы
№1. Анимация в CSS.
Анимация в CSS позволяет изменять значения свойств элемента плавно, в течение заданного времени. Для создания анимации используется правило @keyframes, в котором описываются ключевые кадры (от и до или в процентах). Для применения анимации к элементу используются свойства: animation-name (имя @keyframes), animation-duration (длительность), animation-timing-function (функция сглаживания) и другие.
№2. Градиент в CSS.
Градиент в CSS— это плавный переход между двумя или более цветами. Существуют линейные градиенты (linear-gradient), радиальные (radial-gradient) и конические (conic-gradient). Градиенты задаются в качестве значения для свойств background-image или background.
№3. Псевдоклассы в CSS.
Псевдоклассы в CSS— это ключевые слова, которые добавляются к селекторам и определяют особое состояние элемента. Самый распространенный пример — :hover, который применяет стили к элементу, когда пользователь наводит на него курсор мыши. Другие примеры: :focus (элемент в фокусе), :active (элемент активирован, например, нажата кнопка мыши), :nth-child() (для выбора элементов по их порядковому номеру в родителе).