МИНИСТЕРСТВО ЦИФРОВОГО РАЗВИТИЯ,
СВЯЗИ И МАССОВЫХ КОММУНИКАЦИЙ РОССИЙСКОЙ ФЕДЕРАЦИИ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ТЕЛЕКОММУНИКАЦИЙ ИМ. ПРОФ. М.А. БОНЧ-БРУЕВИЧА»
(СПбГУТ)
Факультет Информационных технологий и программной инженерии
Кафедра Систем обработки данных
Направление: 09.03.02 Информационные системы и технологии
Профиль: Прикладные информационные системы и технологии
Практическое задание №2
«Компоновка элементов в окне браузера (верстка первых двух уровней сайта)»
по дисциплине
«ТFeРВП»
Выполнил:
студент группы ИСТ-223
Хакова Ю. М. «____» _________ 2025 г.
Принял:
ассистент кафедры СОД
Коровкина Е.В. «____» _________ 2025 г.
Содержание
Y
1 ХОД РАБОТЫ 3
2 ЛИСТИНГ INDEX.HTML 4
4 ЛИСТИНГ COURSES.HTML 10
5 ЛИСТИНГ STYLE-COURSES.CSS 12
6 ЗАКЛЮЧЕНИЕ 16
1 Ход работы
Создаем файловую структуру проекта (Рисунок 1).
Рисунок 1 – Структура проекта
Файл index.html – главная страница веб-сайта. В нем содержится разметка сайта. В шапке размещен логотип, навигационное меню с разделами «О проекте», «Курсы», «Форум», а также кнопка для входа и регистрации. В основной части страницы размещён заголовок «INTERSLAVIC – мост между славянскими народами», кнопка «Начать обучение» и изображения из папки images.
Файл courses.html содержит разметку страницы с курсами. В нём представлены заголовок «Курсы», описание учебных программ и карточки курсов, каждая из которых включает название, краткое описание и изображение. Навигация и шапка страницы остаются такими же, как в index.html, обеспечивая единообразие дизайна.
Файл style.css определяет внешний вид сайта, регулируя оформление заголовков, фона, шапки, навигации и кнопок. В нём заданы размеры, цвета, отступы и расположение элементов, а также стили анимации и эффектов при наведении. Все графические элементы загружаются из папки images.
Файл style-courses.css определяет стили для страницы с курсами. В нём описаны параметры отображения заголовков, карточек курсов, их размеров, теней и кнопок. Все графические элементы загружаются из папки images.
Папка images содержит все графические элементы, используемые на сайте для изучения межславянского языка. В ней хранятся логотип, иллюстрации, фоновые изображения и другие визуальные материалы, необходимые для оформления страниц. Изображения представлены в форматах PNG.
2 Листинг index.Html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INTERSLAVIC</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">
<span class="logo-text">INTERSLAVIC</span>
</div>
<nav class="nav-menu">
<ul>
<li><a href="#">О проекте</a></li>
<li><a href="courses.html">Курсы</a></li>
<li><a href="#">Форум</a></li>
</ul>
</nav>
<button class="auth-button">ВХОД/РЕГИСТРАЦИЯ</button>
</header>
<main>
<div class="content">
<h1>INTERSLAVIC - мост <br> между славянскими <br> народами</h1>
<button class="start-button">НАЧАТЬ ОБУЧЕНИЕ</button>
</div>
<div class="image-container">
<img src="./images/image.png" alt="Illustration">
<div class="text-container">
<span class="hvala">HVALA!</span>
<span class="dobry">DOBRY DENJ!</span>
</div>
</div>
</main>
</body>
</html>
3 Листинг style.Css
body {
font-family: 'Work Sans', sans-serif;
margin: 0;
padding: 0;
background-color: #ffffff;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 50px;
background-color: #ffffff;
}
.logo-text {
font-family: 'Yaldevi Colombo', sans-serif;
font-weight: 600;
font-size: 36px;
color: #291D9A;
}
.header-container {
display: flex;
align-items: left;
justify-content: space-between;
padding: 20px;
}
.nav-menu {
display: flex;
gap: 40px;
margin-right: -550px;
}
.nav-menu ul {
list-style: none;
display: flex;
gap: 40px;
margin: 0;
padding: 0;
}
.nav-menu ul li a {
text-decoration: none;
font-size: 16px;
color: #1D253C;
}
.auth-button {
font-weight: bold;
width: 207px;
height: 44px;
border: 2px solid #D2D3D8;
border-radius: 8px;
background: none;
font-size: 14px;
color: #1D253C;
cursor: pointer;
transition: 0.3s;
}
.auth-button:hover {
background: #1D253C;
color: #ffffff;
}
main {
display: flex;
align-items: center;
justify-content: space-between;
padding: 100px 50px;
}
.content {
max-width: 500px;
margin-top: -200px;
}
.content h1 {
font-size: 48px;
font-weight: bold;
color: #140E4B;
}
.start-button {
margin-top: 20px;
width: 216px;
height: 61px;
background: #291D9A;
color: white;
font-size: 16px;
font-weight: bold;
padding: 12px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
}
.start-button:hover {
background: #1A0D75;
}
.image-container {
position: relative;
width: 750px;
height: 650px;
}
.image-container img {
width: 100%;
margin-top: -120px;
}
.text-container {
position: absolute;
top: 20px;
left: 60%;
display: flex;
gap: 40px;
}
.hvala {
position: absolute;
top: -15px;
left: -190px;
font-size: 22px;
font-weight: bold;
color: #140E4B;
}
.dobry {
position: absolute;
top: -60px;
left: 25px;
font-size: 22px;
font-weight: bold;
color: #140E4B;
}