ПР / Хакова Ю. М. Отчет ПР3
.docxМИНИСТЕРСТВО ЦИФРОВОГО РАЗВИТИЯ,
СВЯЗИ И МАССОВЫХ КОММУНИКАЦИЙ РОССИЙСКОЙ ФЕДЕРАЦИИ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ТЕЛЕКОММУНИКАЦИЙ ИМ. ПРОФ. М.А. БОНЧ-БРУЕВИЧА»
(СПбГУТ)
Факультет Информационных технологий и программной инженерии
Кафедра Систем обработки данных
Направление: 09.03.02 Информационные системы и технологии
Профиль: Прикладные информационные системы и технологии
Практическое задание №3
«Установка элементов навигации на странице сайта»
по дисциплине
«ТFeРВП»
Выполнил:
студент группы ИСТ-223
Хакова Ю. М. «____» _________ 2025 г.
Принял:
ассистент кафедры СОД
Коровкина Е.В. «____» _________ 2025 г.
СОДЕРЖАНИЕ
Y
1 ХОД РАБОТЫ 3
2 ЛИСТИНГ INDEX-VERTICAL.HTML 3
3 ЛИСТИНГ STYLE-VERTICAL.CSS 5
4 ЛИСТИНГ INDEX.HTML 8
5 ЛИСТИНГ STYLE-HORIZONTAL.CSS 11
6 ЗАКЛЮЧЕНИЕ 17
1 ХОД РАБОТЫ
Создаем меню с вертикально расположенными пунктами. Результат приведен на рисунке 1.
Рисунок 1 – главная страница с вертикальным меню
Создаем меню с горизонтально расположенными пунктами и выпадающим меню. Результат приведен на рисунке 2.
Рисунок 2 –
2 ЛИСТИНГ INDEX-VERTICAL.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-vertical.css">
</head>
<body>
<aside class="vertical-menu">
<ul>
<li><a href="#">О проекте</a></li>
<li><a href="#">Курсы</a></li>
<li><a href="#">Форум</a></li>
</ul>
</aside>
<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-VERTICAL.CSS
body {
font-family: 'Work Sans', sans-serif;
margin: 0;
padding: 0;
display: flex;
background-color: #ffffff;
}
.vertical-menu {
width: 200px;
background: #f4f4f4;
padding: 20px;
position: fixed;
left: 0;
top: 0;
height: 100%;
}
.vertical-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.vertical-menu ul li {
padding: 15px;
border-bottom: 1px solid #ddd;
}
.vertical-menu ul li a {
text-decoration: none;
color: #1D253C;
display: block;
font-size: 16px;
}
.vertical-menu ul li a:hover {
background: #ddd;
}
/* Основной контент */
main {
flex-grow: 1;
padding: 50px;
margin-left: 220px;
}
.content {
text-align: left;
margin-top: 200px;
}
.image-container {
position: relative;
width: 800px;
height: 750px;
}
.image-container img {
width: 100%;
margin-top: -450px;
margin-left: 350px;
}
.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;
}
.text-container {
position: absolute;
top: -300px;
left: 103%;
display: flex;
gap: 40px;
}
.hvala {
position: absolute;
top: -15px;
left: -196px;
font-size: 22px;
font-weight: bold;
color: #140E4B;
}
.dobry {
position: absolute;
top: -63px;
left: 30px;
font-size: 22px;
font-weight: bold;
color: #140E4B;
}
4 ЛИСТИНГ 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-horizontal.css">
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<header>
<div class="logo">
<span class="logo-text">INTERSLAVIC</span>
</div>
<nav class="nav-menu">
<ul>
<li><a href="#">О проекте</a></li>
<li class="dropdown">
<a href="courses.html">Курсы</a>
<div class="dropdown-content">
<a href="#">Базовый курс</a>
<a href="#">Продвинутый курс</a>
<a href="#">Углубленный курс</a>
</div>
</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>
5 ЛИСТИНГ STYLE-HORIZONTAL.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;
}
.nav-menu ul {
list-style: none;
display: flex;
gap: 40px;
margin: 0;
padding: 0;
position: relative;
}
.nav-menu ul li {
position: relative;
}
.nav-menu ul li a {
text-decoration: none;
font-size: 16px;
color: #1D253C;
padding: 10px 15px;
display: block;
}
.dropdown-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
background: white;
border: 1px solid #D2D3D8;
padding: 0;
min-width: 180px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
z-index: 10;
}
.dropdown-menu li {
padding: 10px;
white-space: nowrap;
}
.dropdown-menu li a {
color: #1D253C;
text-decoration: none;
display: block;
}
.dropdown-menu li:hover {
background: #f4f4f4;
}
.nav-menu ul li:hover .dropdown-menu {
display: block;
}
6 ЗАКЛЮЧЕНИЕ
В ходе выполнения работы были созданы главные страницы с вертикальным и горизонтальным меню с выпадающим списком. Свой выбор я сделала в пользу горизонтального, так как он мне кажется более привлекательным и удобным.
Санкт-Петербург
2025