Лабораторные работы. Краева / Web-технологии. Отчет №3
.pdfМинистерство цифрового развития, связи и массовых коммуникаций Российской Федерации
Федеральное государственное бюджетное образовательное учреждение Высшего образования «Санкт-Петербургский государственный университет телекоммуникаций им. Проф. М. А. Бонч-Бруевича» (СПбГУТ)
Факультет Информационных технологий и программной инженерии
Кафедра Программной инженерии и вычислительной техники
Лабораторная работа №3
По дисциплине «Web-технологии»
На тему «Блочная верстка с использованием CSS»
Выполнил: Студент 3-го курса Дневного отделения Группы ИКПИ-32 Яковлев М. А. Преподаватель: Краева Е. В.
Санкт-Петербург 2025
Цель работы
Цель работы — изучить принципы и методы блочной верстки веб-страницы с использованием тегов HTML и каскадных таблиц стилей (CSS).
Ход выполнения
Упражнение №1. Разработка структуры HTML-документа
Был создан файл с базовой структурой HTML5. Для создания каркаса страницы использованы семантические теги:
·<header> для шапки сайта,
·<nav> для навигационного меню,
·<aside> для левого сайдбара,
·<div> для основной части контента,
·<footer> для подвала. [Рис. 1]
Рисунок 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() (для выбора элементов по их порядковому номеру в родителе).