МИНОБРНАУКИ РОССИИ
Федеральное государственное бюджетное образовательное учреждение
высшего образования
«МИРЭА – Российский технологический университет»
РТУ МИРЭА
Институт информационных технологий (ИТ)
Кафедра инструментального и прикладного программного обеспечения (ИиППО)
КУРСОВАЯ РАБОТА
по дисциплине: Разработка клиентских частей интернет-ресурсов
по профилю: Разработка программных продуктов и проектирование информационных
систем
направления профессиональной подготовки: 09.03.04 «Программная инженерия»
Тема: Клиентская часть интернет-ресурса «Автосалон»
Студент: Родионов Анатолий Анатольевич
Группа: ИКБО-32-21
Работа представлена к защите___.12.2022__________/Родионов А.А./
(подпись и ф.и.о. студента)
Руководитель: старший преподаватель, Матчин Василий Тимофеевич
Работа допущена к защите___.12.2022_________/Матчин В.Т./
(подпись и ф.и.о. рук-ля)
Оценка по итогам защиты: __________
___.12.2022/ ___________/Алпатов А.Н., доцент, к.т.н., доцент/
___.12.2022 / ___________/ Матчин В.Т., ст.преподаватель/
(подписи, дата, ф.и.о., должность, звание, уч. степень двух преподавателей, принявших
защиту)
М. РТУ МИРЭА. 2022 г.
АННОТАЦИЯ
Курсовая работа содержит 36 страниц отчёта, 9 иллюстраций, 7
листингов.
Целью данной курсовой работы является создание интернет-ресурса
“Автосалон”
В разделе “Введение” даётся информация по данной курсовой работе, а
именно: актуальность темы, её основные цели, описание предмета
исследования
Основана часть состоит из трёх разделов: общие сведенья, описание
логической структуры и оптимизация интернет ресурса
В разделе “Общие сведенья” излагаются обозначения, наименования,
программное обеспеченье, необходимое для разработки интернет-ресурса.
В разделе “Описание логической структуры” определяются основные
вопросы и подразделы, такие как анализ предметной области, ряд выбранных
технологий.
В разделе “Оптимизация
клиентской части интернет ресурса”
демонстрируются необходимость оптимизации веб-страниц для различных
устройств.
В разделе “Заключение” формируются выводы и предложения,
описывающие успех в достижении поставленных ранее целей.
В разделе “Список используемых источников” находится перечень
источников, использованных при разработке данного интернет-ресурса
СОДЕРЖАНИЕ
АННОТАЦИЯ ...................................................................................................... 3
СПИСОК СОКРАЩЕНИЙ И СПЕЦИАЛЬНЫХ ТЕРМИНОВ ......................... 5
ВВЕДЕНИЕ .......................................................................................................... 6
1.ОБЩИЕ СВЕДЕНИЯ ........................................................................................ 7
1.1 Наименование клиентской части интернет-ресурса.................................. 7
1.2 Прикладное программное обеспечение, необходимое для разработки и
функционирования клиентской части интернет ресурса ................................ 7
1.3 Языки и технологии, с помощью которых реализована клиентская часть
интернет-ресурса ............................................................................................... 7
2. ОПИСАНИЕ ЛОГИЧЕСКОЙ СТРКУТУРЫ .................................................. 9
2.1 Анализ предметной области разрабатываемой части интернет-ресурса . 9
2.2 Описание и выбор технологий, описание и выбор средств разработки. .. 9
2.3 Наполнение контентом и оформление веб-страниц с проработкой
межстраничного взаимодействия. Создание стилей CSS3 ........................... 10
2.4 Создание межстраничной навигации ....................................................... 28
2.5 Реализация слоя клиентской логики веб-страниц с применением
технологии JavaScript ...................................................................................... 28
3. ОПТИМИЗАЦИЯ КЛИЕНТСКОЙ ЧАСТИ ИНТЕРНЕТ-РЕСУРСА. ......... 33
4. ЗАКЛЮЧЕНИЕ .............................................................................................. 36
СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ ................................................ 37
СПИСОК СОКРАЩЕНИЙ И СПЕЦИАЛЬНЫХ ТЕРМИНОВ
РКЧИР – Разработка клиентской части интернет ресурсов
КР – Курсовая работа
JS – JavaScript
ПК – Персональный компьютер
IDE – Интегрированная среда разработки
GUI – Графический интерфейс пользователя
WebStorm – Среда разработки
HTML – Hypertext Markup Language
CSS – Cascading Style Sheets
div – Тег универсального контейнера
a – Тег гиперссылки
p – Тег параграфа
span – Тег строчного элемента
h1 – h6 – Теги заголовков
body – Тег контента
button – Тег кнопки
header – Тег вводного контента
footer – Тег нижнего колонтитула
li – Тег списка
ul – Тег неупорядоченного списка
title – Тег заголовка
style – Тег информации о стилях
nav – Тег секции навигации
script – Тег подключения JavaScript кода
ВВЕДЕНИЕ
На данный момент одна из основных технологий в мире является
распределённая система, которая предоставляет доступ к документам,
связанным между собой, находящихся на разных компьютерах, имеющих
доступ к сети интернет. На 6 августа 2021 года, в интернете насчитывается
около 1.8 миллиарда сайтов. Нельзя отрицать всю ту пользу, которую можно
получить,
пользуясь
различными
сайтами.
Исходя
из
всего
вышеперечисленного, можно прийти к выводу, что на данный момент работа
актуальна.
Цель работы и задачи, на практике ознакомиться с современными
инструментами разработки клиентской части интернет ресурсов, а именно
HTML, CSS, JavaScript
HTML – язык гипертекстовой разметки документов для просмотра вебстраниц в браузере. Браузер получает HTML код по одному из двух
протоколов HTTP или HTTPS, а затем интерпретирует полученный код в
интерфейс, отображаемый в окне браузера. HTML – это основа сайта, а его
элементы можно интерпретировать как базовые, из которых стоится сайт. CSS
– каскадные таблицы стилей. Язык описания того, как будет выглядеть
внешний вид документа, написанного на языке разметки(HTML/XHTML).
JavaScript – язык программирования, наиболее часто используемый в сайтах
для добавления различных взаимодействий на сайте. При помощи
вышеописанных инструментов надо реализовать клиентскую часть интернет
ресурса по продаже поддержанных автомобилей.
1.ОБЩИЕ СВЕДЕНИЯ
1.1 Наименование клиентской части интернет-ресурса
В данной курсовой работе рассматривается и разрабатывается
клиентская часть интернет ресурса “Автосалон” с использованием HTML,
CSS, JavaScript.
1.2 Прикладное программное обеспечение, необходимое для
разработки и функционирования клиентской части интернет ресурса
В качестве среды разработки была выбрана программа WebStorm Интегрированная среда разработки на JavaScript, CSS & HTML от компании
JetBrains, разработанная на основе платформы IntelliJ IDEA. С помощью
данной программы разработка упрощается и ускоряется, из-за таких функций
как: Автоматический поиск ошибок и генератор решений для исправления
найденных ошибок, Подсветка ключевых слов в коде, из-за чего упрощается
читабельность кода.
Для тестирования клиентской части ресурса были использованы такие
браузеры, как: Chrome, Firefox, Yandex.
1.3 Языки и технологии, с помощью которых реализована
клиентская часть интернет-ресурса
HTML – это язык гипертекстовой разметки. Веб-браузеры получают
HTML документ от сервера по протоколам HTTP/HTTPS или открывают с
локального диска, далее интерпретируют код в интерфейс, который будет
отображаться на экране монитора. Данный язык используется для написания
“каркаса” сайта, а именно его основных элементов – заголовки, параграфы,
навигационная панель и.т.д.
CSS – это каскадные таблицы стилей. формальный язык описания
внешнего вида документа (веб-страницы), написанного с использованием
языка разметки (чаще всего HTML или XHTML). Также может применяться к
любым XML-документам, например, к SVG или XUL. С помощью данного
языка можно предать презентабельный внешний вид страницам ресурса.
JavaScript -
язык программирования. Поддерживает объектно-
ориентированный, императивный и функциональный стили. Данный язык
позволит нам добавить функционал интернет ресурсу
2. ОПИСАНИЕ ЛОГИЧЕСКОЙ СТРКУТУРЫ
Курсовая работа имитирует интернет ресурс автосалона поддержанных
автомобилей.
2.1 Анализ предметной области разрабатываемой части интернетресурса
В
ходе
разработки
были
выдвинуты
следующие
критерии,
соответствующие функционалу интернет автосалона, которым должен
работать сайт:
1.Приятный интерфейс, для повышения продаж
2.Доступность всей нужной информации
Приятный интерфейс один из ключевых критериев удержания
пользователя на сайте. Неприятный и не интуитивный интерфейс будет
отпугивать пользователя, из-за чего снизятся продажи и популярность данного
ресурса. Так же и важна информация о товаре. Если не будет достаточно
доступной информации, это так же отпугнёт, как и пользователей, так и людей,
которые хотели бы продать свои машины на данном ресурсе. Исходя из
вышеперечисленных размышлений и были выведены требования, описанные
выше.
2.2 Описание и выбор технологий, описание и выбор средств
разработки.
HTML5 – это язык гипертекстовой разметки. Данная разметка
реализуется за счёт тегов. Тэги это какое либо ключевое слово, заключённое в
треугольные скобки. В HTML5 реализовано множество новых синтаксических
особенностей. Например, элементы <video>, <audio> и <canvas>, а также
возможность использования SVG и математических формул. С помощью SVG
тега можно реализовать изображения на сайте, которые будут в хорошем
разрешении на любом экране.
CSS3 – каскадные таблицы стилей. Данная технология позволить
придать тегам оригинальное оформление и полностью изменить внешний вид
сайта. В CSS3 появились такие полезные функции как: тень от блоков и текста,
и скругления углов у блоков. Данные функции помогут более гибко придавать
внешний вид ресурсу.
JavaScript – язык программирования. Будет использоваться для
добавления функционала ресурсу. Тем самым он будет выглядеть более
“живым” и функциональным, что сделает интерфейс более интуитивным и
приятным в использовании.
WebStorm – среда разработки, разработанная JetBrains, имеет много
плюсов:
Удобное автодополнение как кода на HTML, CSS, так и на
JavaScript.
Проверка на наличие ошибок и удобная отладка кода
обеспечивается с помощью интеграции с рядом систем
отслеживания ошибок.
Встроенная интеграция с такими системами управления
версиями как GitHub, Git, а также Subversion, Perforce и Mercurial.
2.3 Наполнение контентом и оформление веб-страниц с
проработкой межстраничного взаимодействия. Создание стилей CSS3
В данном ресурсе находится 5 страниц, каждая из которых даёт пользователю
определённую информацию:
1. Главная страница: Первое что видит пользователь. Предоставляет
информацию о каждой из следующих страниц.
2. Каталог: Основная страница. На данной странице пользователь может
отыскать нужный ему автомобиль.
3. Калькулятор: На данной странице пользователь в бедующем сможет
рассчитать кредит у банков-партнёров.
4. Контакты: На этой странице присутствуют все нужные контакты, а
также график работы офлайн магазина.
5. Авторизация: В будущем, на данной странице сможет войти в свой
аккаунт.
На данный момент сайты становятся все более и более сложными и с
новыми технологиями их интерфейс тоже становится более красивым и
лаконичным. Продажи сайта на прямую зависят от того, на сколько
сайт приятен глазу и на сколько он удобен. Особенно важна главная
страница, ведь это именно то, что первым делом видит пользователь,
открывая сайт. Если он не уверен в данной компании и главная
страница не будет привлекать его, то с довольно большим шансом он
просто закроет сайт, не зайдя глубже. Поддержанные автомобили ещё
долгое время будут востребованными, так как производство
автомобиля довольно долгий и дорогой процесс, что делает новые
автомобили менее доступными. Зайдя на главную страницу
пользователь сразу понимает, что данный ресурс о автомобилях, о чём
говорит крупная картинка автомобиля почти в центре экрана на жёлтом
фоне, что делает её ещё более заметной. С помощью навигационной
панели пользователь может перемещаться по сайту, а наводя на
кнопки, текст в центре экрана будет изменяться в зависимости от того
на какую кнопу навёл пользователь, давая информацию, о том куда
ведёт та или иная кнопка. Главная страница представлена на картинке
1.
Рисунок 1 – Главная страница
В листинге 1 представлены свойства главной страницы.
Листинг 1 – Код свойств CSS, использованных на главной странице.
body{
box-sizing: border-box;
margin: 0px;
padding: 0px;
background-color: rgba(228,249,245,100);
font-family: 'Montserrat', sans-serif;
color: #40514E;
}
body::before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("../assets/images/skyline r34.jpg");
background-repeat:no-repeat;
background-size: cover;
background-position:center;
z-index: -2;
}
body::after{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(228,249,245);
background: linear-gradient(180deg, rgba(228,249,245,0.7) 0%,
rgba(128,255,231,1) 100%);
z-index: -1;
}
.header{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 15vh;
}
.logo-text{
text-decoration: none;
font-size: 48px;
margin: 0px 40px;
color: #11999E;
}
.nav{
display: flex;
flex-direction: row;
margin: 0 40px;
border-radius: 10px;
}
.nav-button{
margin: 0 20px;
display: flex;
flex-direction: row;
align-items: center;
font-size: 40px;
transition: 0.3s;
border-radius: 10px;
}
.nav-text{
color: #40514E;
text-decoration: none;
transition: 0.3s;
}
@media screen and (min-width: 1295px) {
.nav-button:hover{
background-color: rgba(64, 81, 78, 0.7);
border-radius: 10px;
padding: 5px 20px;
backdrop-filter: blur(5px);
}
.nav-button:hover > .nav-text{
color: #30E3CA;
}
.nav-button:hover > svg{
fill: #30E3CA;
}
}
.nav-button > svg{
width: 40px;
height: 40px;
margin: 0px 10px;
fill: #40514E;
transition: 0.3s;
}
.hero{
height: 80vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
.hero-section{
width: 35vw;
font-size: 30px;
animation: appearing 0.5s;
}
.hero-main-text{
font-size: 60px;
}
.hero-sub-text{
font-size: 30px;
}
.car-image{
position: relative;
aspect-ratio: 15/10;
width: 700px;
z-index: 2;
}
.car-image-container{
position: relative;
}
.car-image-container::after{
position: absolute;
content: '';
width: 600px;
height: 400px;
top: 60px;
left: 0;
background-color: yellow;
z-index: 0;
border-radius: 400px 100px 400px 100px;
}
.footer{
position: absolute;
left: 40px;
bottom: 10px;
}
@keyframes appearing {
0%{
transform: translateY(-10px);
opacity: 0;
}
100%{
transform: translateY(0px);
opacity: 1;
}
}
@media screen and (max-width: 1294px) {
.nav{
position: relative;
flex-direction: column;
z-index: 2;
height: 40px;
border-radius: 20px 0px 0px 20px;
overflow: hidden;
margin: 0px;
align-items: center;
z-index: 5;
}
.nav::before{
content: '';
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0,0,0, 10%);
backdrop-filter: blur(10px);
z-index: -1;
}
.nav:hover{
transform: translateY(45%);
margin-top: 33px;
height: calc(100vh - 40px);
border-radius: 20px 0px 0px 0px;
}
.nav-button{
font-size: 30px;
height: 60px;
}
.hero-main-text{
font-size: 40px;
}
.hero-sub-text{
font-size: 20px;
}
.car-image{
width: 500px;
}
.car-image-container::after{
width: 500px;
height: 300px;
}
.nav-button{
width: 100%;
border-radius: 0px;
}
.nav-text{
padding: 0px 10px;
}
.nav-button:hover{
background-color: rgba(64, 81, 78, 0.7);
backdrop-filter: blur(5px);
}
.nav-button:hover > .nav-text{
color: #30E3CA;
}
.nav-button:hover > svg{
fill: #30E3CA;
}
}
@media screen and (max-width: 1000px) {
.nav-button{
font-size: 30px;
}
.nav-button > svg{
width: 30px;
height: 30px;
}
.hero > svg{
width: 200px;
height: 200px;
}
.car-image{
width: 40vw;
}
.car-image-container::after{
top: 5vw;
width: 35vw;
height: 20vw;
}
}
@media screen and (max-width: 472px) {
.logo-text{
margin: 0px 10px;
}
.footer{
left: 10px;
}
.hero-section{
font-size: 20px;
}
.hero > svg{
width: 150px;
height: 150px;
}
.car-image{
width: 200px;
}
}
На рисунке 2 Можно увидеть вторую страницу сайта увидеть страницу сайта
с каталогом. На данной странице пользователь может подобрать нужной ему
автомобиль.
Рисунок 2 – Страница с каталогом
В листинге 2 представлены основные стили для страницы с каталогом.
Листинг 2 – Код свойств основных CSS, для страницы с каталогом.
.settings{
position: fixed;
width: 20.83vw;
background-color: rgba(64,81,78, 0.2);
backdrop-filter: blur(10px);
height: 100vh;
padding-top: 15vh;
z-index: 1;
}
.settings-div{
display: flex;
align-items: center;
}
.settings-input{
height: 40px;
width: 75%;
margin: 5px 5px 0px 10px;
border: none;
border-radius: 10px;
font-size: 24px;
padding: 0px 10px;
font-family: Montserrat;
}
.settings-input:focus{
outline: none;
}
.settings-input::placeholder{
font-family: Montserrat;
color: #888;
opacity: 1;
}
.settings-svg{
opacity: 0.5;
}
.settings-range-div{
background-color: white;
border-radius: 10px;
margin: 10px 10px;
}
.settings-text{
font-size: 24px;
color: #888;
}
.settings-info{
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 10px;
}
.settings-range-input{
height: 40px;
width: 60%;
margin: 0.26vw 5px 0px 0.52vw;
border: none;
border-radius: 10px;
font-size: 24px;
background-color: #30E3CA;
box-shadow: 0px 3px 0px #5CB9A7;
color: white;
font-family: Montserrat;
padding: 0px 10px;
}
.settings-range-input:focus{
outline: none;
}
.settings-range{
width: 93%;
margin: 0.26vw 10px 0px 0.52vw;
}
.settings-range {
-webkit-appearance: none !important;
background: #11999E;
height:3px;
border: none;
}
.settings-range::-webkit-slider-thumb {
-webkit-appearance: none !important;
background: #30E3CA;
box-shadow: 0px 2px 0px #5BC0AD;
border:none;
border-radius: 10px;
height:14px;
width:14px;
margin-top: -3px;
}
.settings-range::-moz-range-thumb{
-webkit-appearance: none !important;
-moz-appearance: none;
background: #30E3CA;
box-shadow: 0px 2px 0px #5BC0AD;
border:none;
height:14px;
width:14px;
margin-top: -3px;
}
.settings-slider{
font-size: 13px;
display: flex;
justify-content: space-between;
margin: 0px 10px;
}
.show-result-button{
position: relative;
left: 10px;
margin-top: 40px;
height: 60px;
border-radius: 10px;
margin-right: 20px;
background-color: #FAFF00;
box-shadow: 0px 5px 0px #8a8f00;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s;
cursor: pointer;
}
.show-result-button-text{
font-size: 35px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.show-result-button:hover{
transform: translateY(5px);
box-shadow: 0px 0px 0px #8a8f00;
}
.show-result-button:active{
background-color: #8a8f00;
}
.catalog{
display: grid;
justify-items: center;
position: absolute;
width: 78vw;
height: 80vh;
right: 0;
bottom: 0;
}
.car-card{
display: grid;
grid-template-columns: auto 1fr;
overflow: hidden;
border-radius: 30px;
height: 200px;
width: 90%;
background-color: rgba(64,81,78,0.2);
backdrop-filter: blur(5px);
margin-bottom: 10px;
transition: 0.3s;
}
.hidden{
opacity: 0;
scale: 0;
}
.car-content{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 60px 20px 1fr;
align-items: center;
margin-left: 10px;
}
.car-name,.car-mileage,.car-year,.car-info,.car-drive,.car-transmission,.carlocation,.car-cost{
margin: 0px;
}
.car-name,.car-mileage,.car-year{
font-size: 32px;
}
.car-info,.car-drive,.car-transmission,.car-location{
font-size: 16px;
}
.car-year,.car-transmission{
justify-self: center;
}
.car-location{
grid-column: 1/2;
grid-row: 3/4;
height: 26px;
align-self: flex-end;
}
.car-cost{
position: relative;
font-size: 24px;
grid-column: 3/4;
grid-row: 3/4;
height: 35px;
align-self: flex-end;
justify-self: center;
z-index: 2;
}
.car-cost::after{
content: '';
position: absolute;
width: 250%;
height: 40px;
top: -5px;
left: -40px;
border-radius: 20px 0px 0px 0px;
background-color: #FAFF00;
z-index: -1;
}
.nav-button > svg{
width: 40px;
height: 40px;
margin: 0px 10px;
fill: #40514E;
transition: 0.3s;
}
На рисунке 3 представлена страница с основными контактами, а также
расписанием офлайн магазина.
Рисунок 3 – Страница с контактами.
В листинге 3 представлен CSS код для вышеупомянутой страницы.
Листинг 3 – CSS код страницы с контактами.
body{
box-sizing: border-box;
margin: 0px;
padding: 0px;
background-color: rgba(228,249,245,100);
font-family: 'Montserrat', sans-serif;
color: #40514E;
overflow: hidden;
}
body::before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("../assets/images/skyline r34.jpg");
background-repeat:no-repeat;
background-size: cover;
background-position:center;
z-index: -2;
}
body::after{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(228,249,245);
background: linear-gradient(180deg, rgba(228,249,245,0.7) 0%,
rgba(128,255,231,1) 100%);
z-index: -1;
}
.header{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 15vh;
}
.logo-text{
text-decoration: none;
font-size: 48px;
margin: 0px 40px;
color: #11999E;
z-index: 20;
}
.nav{
display: flex;
flex-direction: row;
margin: 0 40px;
border-radius: 10px;
}
.nav-button{
margin: 0 20px;
display: flex;
flex-direction: row;
align-items: center;
font-size: 40px;
transition: 0.3s;
border-radius: 10px;
}
.nav-text{
color: #40514E;
text-decoration: none;
transition: 0.3s;
}
@media screen and (min-width: 1295px) {
.nav-button:hover{
background-color: rgba(64, 81, 78, 0.7);
border-radius: 10px;
padding: 5px 20px;
backdrop-filter: blur(5px);
}
.nav-button:hover > .nav-text{
color: #30E3CA;
}
.nav-button:hover > svg{
fill: #30E3CA;
}
}
.nav-button > svg{
width: 40px;
height: 40px;
margin: 0px 10px;
fill: #40514E;
transition: 0.3s;
}
.hero{
height: 80vh;
align-self: center;
display: flex;
justify-content: center;
align-items: center;
}
.contacts{
position: relative;
z-index: 2;
}
.contacts::after{
content: '';
position: absolute;
background-color: #FAFF00;
top: -100px;
left: -50px;
width: 500px;
height: 600px;
border-radius: 300px 100px 400px 50px;
z-index: -1;
}
.contact-text{
font-size: 24px;
z-index: 5;
}
@media screen and (max-width: 1294px) {
.nav{
position: relative;
flex-direction: column;
z-index: 2;
height: 40px;
border-radius: 20px 0px 0px 20px;
overflow: hidden;
margin: 0px;
align-items: center;
z-index: 5;
}
.nav::before{
content: '';
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0,0,0, 10%);
backdrop-filter: blur(10px);
z-index: -1;
}
.nav:hover{
transform: translateY(45%);
margin-top: 33px;
height: calc(100vh - 40px);
border-radius: 20px 0px 0px 0px;
}
.nav-button{
font-size: 30px;
height: 60px;
}
.hero-main-text{
font-size: 40px;
}
.hero-sub-text{
font-size: 20px;
}
.car-image{
width: 500px;
}
.car-image-container::after{
width: 500px;
height: 300px;
}
.nav-button{
width: 100%;
border-radius: 0px;
}
.nav-text{
padding: 0px 10px;
}
.nav-button:hover{
background-color: rgba(64, 81, 78, 0.7);
backdrop-filter: blur(5px);
}
.nav-button:hover > .nav-text{
color: #30E3CA;
}
.nav-button:hover > svg{
fill: #30E3CA;
}
}
@media screen and (max-width: 1000px) {
.contact-text{
font-size: 20px;
}
.nav-button{
font-size: 30px;
}
.nav-button > svg{
width: 30px;
height: 30px;
}
.hero > svg{
width: 200px;
height: 200px;
}
.car-image{
width: 40vw;
}
.car-image-container::after{
top: 5vw;
width: 35vw;
height: 20vw;
}
}
@media screen and (max-width: 472px) {
.logo-text{
margin: 0px 10px;
}
.footer{
left: 10px;
}
.hero-section{
font-size: 20px;
}
.hero > svg{
width: 150px;
height: 150px;
}
.car-image{
width: 200px;
}
}
На
рисунке
4
представлена
страница
бедующей
страницы
с
калькулятором кредитов при поддержке сайтов партнёров.
Рисунок 4 – Страница с бедующей страницей с калькулятором
кредитов.
На данной странице использовались все те же стили, что использовались
в предыдущих страницах.
На рисунке 5 показана страница с авторизацией.
Рисунок 5 – Страница с авторизацией.
В листинге 4 показаны основные стили для вышеупомянутой страницы.
Листинг 4 – Основной CSS код для страницы с авторизацией
.login-form{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 30vw;
height: 400px;
background-color: rgba(64, 81, 78, 10%);
border-radius: 20px;
backdrop-filter: blur(5px);
}
.login-text{
margin: 30px 0px;
font-size: 40px;
color: #40514E;
}
.input{
width: 80%;
height: 30px;
border: none;
border-radius: 10px;
color: #11999E;
font-size: 20px;
padding-left: 10px;
}
.input:focus{
outline: none;
}
.send-button{
background-color: #40514E;
display: flex;
justify-content: center;
border-radius: 10px;
align-items: center;
margin: 30px 0px;
width: 40%;
transition: 0.3s;
}
.send-button > p{
color: #E4F9F5;
font-size: 20px;
margin: 5px 0px;
}
.send-button:hover{
background-color: #11999E;
}
2.4 Создание межстраничной навигации
Межстраничная навигация реализована с помощью тега <a> в HTML5.
В вверху страниц находится навигационная панель, с помощью которой
можно перемещаться по страницам интернет-ресурса. Схема переходов
продемонстрирована в рисунке 6.
Рисунок 6 – Схема переходов между интернет ресурсами.
2.5 Реализация слоя клиентской логики веб-страниц с
применением технологии JavaScript
JS код на данном Интернет-ресурсе применён для разнообразного рода
задач. Например, на главной странице при наводке на кнопки навигации, текст
в центре экрана меняется, демонстрируя информацию о той странице, на
кнопку перехода которой навёлся пользователь. Это можно увидеть на
рисунках 7-8.
Рисунок 7 – Страница при наводке на кнопку каталога
Рисунок 8 – Страница при наводке на кнопку контактов
Данный код продемонстрирован в листинге 5.
Листинг 5 – Код смены текста на главной странице.
const catalog_text = `
<div class="hero-section">
<p class="hero-main-text">Used cars for all</p>
<p class="hero-sub-text">pick up the car you've always
dreamed</p>
</div>
`
const selection_text = `
<div class="hero-section">
<p class="hero-main-text">Cant find car by yourself?</p>
<p class="hero-sub-text">Contact to our experts!</p>
</div>
`
const calculator_text = `
<div class="hero-section">
<p class="hero-main-text">Dont have enough money now?</p>
<p class="hero-sub-text">Take a loan in our partner banks</p>
</div>
`
const account_text = `
<div class="hero-section">
<p class="hero-main-text">This your account</p>
<p class="hero-sub-text">You can find your liked car and much
more</p>
</div>
`
let current_text = "catalog";
window.onmousemove = ev => {
const button = (ev.target.closest(".nav-button") !== null) ?
ev.target.closest(".nav-button") : undefined;
let hero = document.querySelector("div.hero")
if(button.dataset.type === "catalog" && button.dataset.type !=
current_text){
document.querySelector("div.hero-section").remove()
hero.insertAdjacentHTML("afterbegin", catalog_text);
current_text = "catalog"
}else if(button.dataset.type === "selection" && button.dataset.type !=
current_text){
document.querySelector("div.hero-section").remove()
hero.insertAdjacentHTML("afterbegin", selection_text);
current_text = "selection"
}
else if(button.dataset.type === "calculator" && button.dataset.type !=
current_text){
document.querySelector("div.hero-section").remove()
hero.insertAdjacentHTML("afterbegin", calculator_text);
current_text = "calculator"
}
else if(button.dataset.type === "account" && button.dataset.type !=
current_text){
document.querySelector("div.hero-section").remove()
hero.insertAdjacentHTML("afterbegin", account_text);
current_text = "account"
}
}
Так же JS был применён для реализации ползунков в настройках
фильтров на станице с каталогом. Пример работы данного кода
продемонстрирован на рисунке 9.
Рисунок 9 – Демонстрация работы кода ползунков на странице с
каталогом.
Данный код показан в листинге 6.
Листинг 6 – JS код со страницы с каталогом.
const mileage_slider = document.querySelector('input#mileage')
const mileage_input = document.querySelector('input.mileage-input')
const cost_slider = document.querySelector('input#cost')
const cost_input = document.querySelector('input.cost-input')
mileage_slider.addEventListener("input", () => {
let mileage_value = parseInt(mileage_slider.value)
mileage_input.value = `${mileage_value} km`
})
mileage_input.addEventListener("input", () => {
let input_value = parseInt(mileage_input.value)
if(input_value != NaN){
mileage_slider.value = input_value
}
})
cost_slider.addEventListener("input", () => {
let cost_value = parseInt(cost_slider.value)
cost_input.value = `${cost_value} ₽`
})
cost_input.addEventListener("input", () => {
let input_value = parseInt(cost_input.value)
if(input_value != NaN){
cost_slider.value = input_value
}
})
3. ОПТИМИЗАЦИЯ КЛИЕНТСКОЙ ЧАСТИ ИНТЕРНЕТРЕСУРСА.
За адаптивность сайта отвечают медиа запросы, которые были
подремонтированы в листинге 7, но такие медиа запросы присутствуют в
каждом CSS файле.
Листинг 7 – Код CSS с медиа запросами
@media screen and (max-width: 1294px) {
.nav{
position: relative;
flex-direction: column;
z-index: 2;
height: 40px;
border-radius: 20px 0px 0px 20px;
overflow: hidden;
margin: 0px;
align-items: center;
z-index: 5;
}
.nav::before{
content: '';
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0,0,0, 10%);
backdrop-filter: blur(10px);
z-index: -1;
}
.nav:hover{
transform: translateY(45%);
margin-top: 33px;
height: calc(100vh - 40px);
border-radius: 20px 0px 0px 0px;
}
.nav-button{
font-size: 30px;
height: 60px;
}
.hero-main-text{
font-size: 40px;
}
.hero-sub-text{
font-size: 20px;
}
.car-image{
width: 500px;
}
.car-image-container::after{
width: 500px;
height: 300px;
}
.nav-button{
width: 100%;
border-radius: 0px;
}
.nav-text{
padding: 0px 10px;
}
.nav-button:hover{
background-color: rgba(64, 81, 78, 0.7);
backdrop-filter: blur(5px);
}
.nav-button:hover > .nav-text{
color: #30E3CA;
}
.nav-button:hover > svg{
fill: #30E3CA;
}
}
@media screen and (max-width: 1000px) {
.nav-button{
font-size: 30px;
}
.nav-button > svg{
width: 30px;
height: 30px;
}
.hero > svg{
width: 200px;
height: 200px;
}
.car-image{
width: 40vw;
}
.car-image-container::after{
top: 5vw;
width: 35vw;
height: 20vw;
}
}
@media screen and (max-width: 472px) {
.logo-text{
margin: 0px 10px;
}
.footer{
left: 10px;
}
.hero-section{
font-size: 20px;
}
.hero > svg{
width: 150px;
height: 150px;
}
.car-image{
width: 200px;
}
}
4. ЗАКЛЮЧЕНИЕ
В результате работы было выполнено задание в полном объёме,
соблюдая все требования. Ресурс соответствует заданной теме. Клиентская
часть
интернет-ресурса
была
выполнена
при
помощи
современных
технологий. Так же сайт соответствует современным требованиям вебдизайна.
В данной работе были использованы такие технологии, как HTML5,
CSS3, JavaScript. В ходе выполнения данной работы были приобретены
навыки использования данных технологий на примере учебного проекта.
В заключение, можно сказать, что, как и рынок поддержанных
автомобилей, так и web технологий ещё долгое время будут востребованы.
СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ
1.
htmlbook.ru [Электронный источник] http://htmlbook.ru/html
Дата обращения (11.11.2022)
2.
htmlbook.ru [Электронный источник] http://htmlbook.ru/css Дата
обращения (11.11.2022)
3.
habr.com [Электронный источник] https://habr.com/ru/post/467049/
Дата обращения (12.11.2022)
4.
habr.com [Электронный источник]
https://habr.com/ru/company/macloud/blog/564182/
Дата обращения
(12.11.2022)
5.
Youtube.com [Электронный источник]
https://www.youtube.com/watch?v=Bluxbh9CaQ0&t=9996s&ab_channel=Владил
енМинин
6.
Дата обращения (13.11.2022)
Youtube.com [Электронный источник]
https://www.youtube.com/watch?v=GKgOOuTL0po&ab_channel=Фрілансерпож
иттю Дата обращения (13.11.2022)
7.
Youtube.com [Электронный источник]
https://www.youtube.com/watch?v=yZFg3cuq_LU&ab_channel=Фрілансерпожи
ттю Дата обращения (13.11.2022)
8.
Youtube.com [Электронный источник]
https://www.youtube.com/watch?v=uQEGUpsnqsw&t=3s&ab_channel=Фрілансе
рпожиттю Дата обращения (14.11.2022)
9.
Youtube.com [Электронный источник]
https://www.youtube.com/watch?v=lv47xClJolw&ab_channel=webDev
Дата
обращения (15.11.2022)
10.
Youtube.com [Электронный источник]
https://www.youtube.com/watch?v=sTdmUdsfOkY&ab_channel=VideoSmile
Дата обращения (15.11.2022)
11.
Youtube.com [Электронный источник]
https://www.youtube.com/watch?v=FShnKqPXknI&t=1s&ab_channel=CodingNe
pal
Дата обращения (16.11.2022)
12.
developer.mozzila.org [Электронный источник]
https://developer.mozilla.org/en-US/docs/Web/API/Event
Дата обращения
(17.11.2022)
13.
developer.mozzila.org [Электронный источник]
https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Functions
Дата
обращения (18.11.2022)
14.
developer.mozzila.org [Электронный источник]
https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Working_with_Object
s
Дата обращения (18.11.2022)
15.
developer.mozzila.org [Электронный источник]
https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Iterators_and_Generat
ors
Дата обращения (18.11.2022)
