Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

ОТЧЕТ ВЕБ 4

.odt
Скачиваний:
0
Добавлен:
23.06.2025
Размер:
181.25 Кб
Скачать

МИНОБРНАУКИ РОССИИ

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ

УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ

«НИЖЕГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ

УНИВЕРСИТЕТ ИМ. Р.Е. АЛЕКСЕЕВА»

(НГТУ)

Практическое занятие №4

Верстка веб-страницы по макету

Выполнил:

Студент гр. 23-ИСТ-1-1

Какушкина О.В

Проверил: Шутов А.А

Нижний Новгород

2025

Ход работы

Цель работы:

Сверстать веб-страницы по макету

Задание 1. Сверстать несколько страниц ИС по имеющемуся макету. Одна из страниц должна содержать форму (не менее 2 полей).

Выполнение:

  • Сверстано 3 страницы информационной системы:

    1. Главная страница (index.html) рисунок 1

    2. Страница портфолио (portfolio.html) рисунок 2

    3. Страница "О нас" (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-валидацией, а также получила ценный опыт адаптации дизайна под мобильные устройства. Все поставленные задачи выполнены в полном объёме, результат соответствует современным стандартам веб-разработки и готов к дальнейшему развитию и доработке.

7

Соседние файлы в предмете Web технологии