ОТЧЕТ ВЕБ 4
.odtМИНОБРНАУКИ РОССИИ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ
УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«НИЖЕГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ
УНИВЕРСИТЕТ ИМ. Р.Е. АЛЕКСЕЕВА»
(НГТУ)
Практическое занятие №4
Верстка веб-страницы по макету
Выполнил: |
Студент гр. 23-ИСТ-1-1 |
Какушкина О.В |
Проверил: Шутов А.А |
Нижний Новгород
2025
Ход работы
Цель работы:
Сверстать веб-страницы по макету
Задание 1. Сверстать несколько страниц ИС по имеющемуся макету. Одна из страниц должна содержать форму (не менее 2 полей).
Выполнение:
Сверстано 3 страницы информационной системы:
Главная страница (index.html) рисунок 1
Страница портфолио (portfolio.html) рисунок 2
Страница "О нас" (about.html) рисунок 3
Рисунок 1 Главная страница (index.html)
Рисунок 2 Страница портфолио (portfolio.html)
Рисунок 3 Страница "О нас" (about.html)
На странице портфолио реализована контактная форма с 4 полями (имя, телефон, email, сообщение) и валидацией
<div class="contact-section" id="contact-form">
<div class="contact-container">
<h2 class="contact-title">ОСТАВЬТЕ ЗАЯВКУ И С ВАМИ СВЯЖЕТСЯ МЕНЕДЖЕР</h2>
<form class="contact-form" id="application-form">
<div class="form-group">
<input type="text" id="name" name="name" placeholder="ИМЯ" class="form-input" required>
<div class="error-message" id="name-error"></div>
</div>
<div class="form-text">ОСОБЫЕ УСЛОВИЯ СОТРУДНИЧЕСТВА ДЛЯ АРХИТЕКТОРОВ, ЛАНДШАФТНЫХ ДИЗАЙНЕРОВ И СТРОИТЕЛЕЙ</div>
<div class="form-group">
<input type="tel" id="phone" name="phone" placeholder="ТЕЛЕФОН" class="form-input" required>
<div class="error-message" id="phone-error"></div>
</div>
<div class="form-group">
<textarea id="message" name="message" placeholder="ВАШЕ СООБЩЕНИЕ (НЕОБЯЗАТЕЛЬНО)" class="form-input" rows="3"></textarea>
</div>
<div class="form-group">
<input type="email" id="email" name="email" placeholder="ПОЧТА" class="form-input" required>
<div class="error-message" id="email-error"></div>
</div>
<button type="submit" class="submit-button">ОСТАВИТЬ ЗАЯВКУ</button>
</form>
</div>
</div>
Все страницы имеют единый стиль оформления и общие компоненты (шапка, подвал)
Использованы семантические HTML-теги для улучшения доступности
Применены современные техники вёрстки (flexbox, grid)
Задание 2. Добавить ссылки на страницы ИС, доступные с любой страницы
Выполнение:
Реализована навигационная панель в шапке сайта с ссылками на все основные страницы
<header class="header">
<div class="header-content">
<div class="logo">GRIN AIR</div>
<nav class="nav-menu">
<a href="index.html" class="nav-item">ГЛАВНАЯ</a>
<a href="portfolio.html" class="nav-item">ПОРТФОЛИО</a>
<a href="about.html" class="nav-item">О НАС</a>
</nav>
</div>
<div class="header-divider"></div>
</header>
Навигация дублируется в подвале сайта
<footer class="footer">
<div class="footer__content">
<div class="footer__logo">GRIN AIR</div>
<nav class="footer__nav">
<a href="index.html" class="footer__nav-item">ГЛАВНАЯ</a>
<a href="portfolio.html" class="footer__nav-item">ПОРТФОЛИО</a>
<a href="about.html" class="footer__nav-item">О НАС</a>
</nav>
<div class="footer__contact">
<div class="footer__phone">7 080 986 00</div>
<address class="footer__address">улица Минина и Пожарского 23 а</address>
</div>
<div class="footer__copyright">
© 2023 GRIN AIR. Все права защищены
</div>
</div>
</footer>
Ссылки выделяются при наведении (эффект hover)
Навигация сохраняет работоспособность на всех страницах
Для мобильных устройств добавлено адаптивное меню
.
@media (max-width: 768px) {
.main {
padding: 1.5rem;
}
.header__container {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.header__nav {
justify-content: center;
}
.project-card__content {
align-items: center;
text-align: center;
}
.footer__nav,
.footer__contact {
align-items: center;
text-align: center;
}
}
@media (max-width: 480px) {
.portfolio-container {
padding-top: 0.5rem;
}
.portfolio-title {
margin: 2rem 0;
}
.projects-gallery {
margin: 2rem auto;
}
.work-process {
padding: 1.5rem 1rem;
}
.contact-section {
padding: 2rem 1rem;
}
}
Задание 3 Добавить адаптив для страниц ИС.
Выполнение:
Реализована адаптивная вёрстка с использованием медиазапросов
Оптимизировано отображение для экранов разного размера (от 320px до 1920px+)
Гибкие изображения и блоки, которые меняют размер и расположение
Улучшена читаемость текста на маленьких экранах
Оптимизирована навигация для мобильных устройств
Использованы относительные единицы измерения (rem, vw, %) для гибкости
.
.hero__image {
width: 100%;
height: clamp(200px, 40vw, 515px);
max-width: 1271px;
margin: 0 auto;
}
Выводы
В ходе выполнения работы я успешно сверстала три веб-страницы (главную, портфолио и "О нас") по предоставленному макету, реализовав на странице портфолио форму обратной связи с валидацией данных. Была создана удобная навигационная система, доступная с любой страницы через шапку и подвал сайта. Особое внимание я уделила адаптивности вёрстки - с помощью медиазапросов и гибких единиц измерения страницы корректно отображаются на устройствах с разными разрешениями экрана. В процессе работы я освоила современные технологии вёрстки, включая Flexbox и Grid, научилась создавать интерактивные формы с JavaScript-валидацией, а также получила ценный опыт адаптации дизайна под мобильные устройства. Все поставленные задачи выполнены в полном объёме, результат соответствует современным стандартам веб-разработки и готов к дальнейшему развитию и доработке.