МЕТОДИЧЕСКОЕ ПОСОБИЕ ПО ВЕБ-ДИЗАЙНУ

but a {border-radius: 10px; /*закруглённыеуглыэлемента*/box-shadow: inset 0 -5px 0 #1FAB89; /*цветтенивнизуэлемента*/}.buta:hover,.buta.active {/*при наведении и когда кнопка выбрана*/box-shadow: inset 0 -80px 0 #1FAB89, 2px 2px 3pxrgba(0, 0, 0, 0.3); /*цвет и положение тени*/color: white; /*цвет текста*/}Тестирование сайтаВид главной страницы на мобильном устройстве показан на рисунке 16.Рисунок 16 – Главная страница сайта на мобильном устройствеПроверка осуществлена в браузере GoogleChrome в режиме «Инструменты разработчика» (F12). Все разделы сайта перестроились в вертикальную структуру, шрифт заголовка страницы уменьшился.Вид Главной страницы сайта в браузерахYandexa),Operaб), GoogleChrome в), InternetExplorer г) показан на рисунке 17.а)б)в)г)Рисунок 17 – Вид Главной страницы сайта в разных браузерахГлавная страница отображается одинаково во всех браузерах, как и все остальные страницы сайта.Выводы по разделуРазработанный сайт представляет собой электронный учебник с методическими материалами по веб-дизайну. Определено содержание страниц и разделов сайта, выбрана цветовая гамма и шрифт, построен макет, по которому спроектированы все страницы сайта. В соответствии с макетом выполнена HTML-разметка, внешний вид элементов прописан в таблицах каскадных стилей CSS с учётом отображения на устройствах с разным разрешением экрана.Как видно по результатам тестирования, структура сайта перестраивается для корректного отображения на мобильных устройствах и единообразно отображается во всех популярных браузерах.Используя материалы сайта html5book, приведены примеры оформления некоторых блоков веб-страниц, чтобы пользователь мог использовать готовый html и css код для оформления своего сайта.ЗАКЛЮЧЕНИЕВ настоящее время мы переживаем крайне быстрый технологический прогресс, который затрагивает нас всех. Весь мир «уходит» в интернет. На сайтах можно получить разнообразную информацию, вести бизнес, получать образование, стать участником социальных сетей и т.д. И чем качественнее разработан интернет-ресурс, тем успешнее будет его жизнь в сети.Веб-разработчик — специалист, который создаёт и поддерживает сайты и веб-сервисы. Фронтенд-разработчик (веб-дизайнер) отвечает за внешний вид интернет-ресурса, бэкенд-разработчик (веб-программист) занимается функциональностью веб-приложения, фулстек-разработчик совмещает в себе обе роли. Освоить профессию можно в вузе, на онлайн-курсах и самостоятельно.Качественныйвеб-дизайн, спроектированный с учётом основных правил разработки сайтов и трендов развития дизайна, является основой любого сайта. Для самостоятельного изучения основ веб-дизайна разработано электронное методическое пособие (сайт) для направления подготовки 09.03.02 «Информационные системы и технологии».Разработанный сайт представляет собой электронный учебник с методическими материалами по веб-дизайну. Определено содержание страниц и разделов сайта, выбрана цветовая гамма и шрифт, построен макет, по которому спроектированы все страницы сайта. В соответствии с макетом выполнена HTML-разметка, внешний вид элементов прописан в таблицах каскадных стилей CSS с учётом отображения на устройствах с разным разрешением экрана. Результаты тестирования показали, что структура сайта перестраивается для корректного отображения на мобильных устройствах и единообразно отображается во всех популярных браузерах. Используя материалы сайта html5book, приведены примеры оформления некоторых блоков свеб-страниц, чтобы пользователь мог использовать готовый html и css код для оформления своего сайта.БИБЛИОГРАФИЧЕСКИЙ СПИСОККнигиАлексеев, А. П. Введение в Web-дизайн. Учебное пособие / А. П. Алексеев. – М.: ДМК Пресс, 2019. – 184 с.Кириченко, А. В. HTML5 + CSS3. Основы современного WEB-дизайна, 2-е изд. / А. В. Кириченко, А. А. Хрусталев. - М.: Наука и техника, 2019. – 352 с.Круг, Стив. Не заставляйте меня думать. Веб-юзабилити и здравый смысл. 3-е издание / С. Круг. – М.: Эксмо, 2022. – 256 с.Трэйси, Осборн. Веб-дизайн для недизайнеров / О. Трейси. – СПб.: Питер, 2022. – 176 с.СтатьиКалугина Ю.В., Кондакова А.А., Михайлов А.С., Стрельникова С.В. Роль цвета в веб-дизайне // Решетневские чтения. 2018. – С 560-562. URL: https://cyberleninka.ru/article/n/rol-tsveta-v-veb-dizayne (дата обращения: 15.03.2023).Электронные ресурсы12 вдохновляющих трендов веб-дизайна в 2023 году [Электронный ресурс] - URL:https://blog.tutortop.ru/glavnyye-trendy-veb-dizayna-v-2023-godu.В России резко вырос спрос на IT-специалистов [Электронный ресурс] - URL:https://www.forbes.ru/tekhnologii/484192-v-rossii-rezko-vyros-spros-na-it-specialistov.Веб-разработка для начинающих: HTML и CSS [Электронный ресурс] - URL:https://stepik.org/course/38218/promo.Веб-разработчик с нуля [Электронный ресурс] - URL:https://netology.ru/programs/web-developer#.Зарплаты айтишников в первом полугодии 2022: впервые за пять лет средняя зарплата не изменилась [Электронный ресурс] - URL: https://habr.com/ru/article/679698.Краткая история создания CSS [Электронный ресурс] - URL:https://it-black.ru/kratkaja-istorija-sozdanija-css.Кто такой веб-разработчик, чем он занимается и как им стать [Электронный ресурс] - URL:https://netology.ru/blog/12-2022-web-developer-who-is-it.Правила веб-дизайна, которые должен знать каждый профессионал [Электронный ресурс] - URL: https://webformyself.com/pravila-veb-dizajna-kotorye-dolzhen-znat-kazhdyj-professional.Специализация Python для всех [Электронный ресурс] - URL:https://www.coursera.org/specializations/python.Что такое юзабилити [Электронный ресурс] - URL:https://practicum.yandex.ru/blog/chto-takoe-usability-sayta.Что нового в HTML5? [Электронный ресурс] - URL:https://msiter.ru/tutorials/html5/vvedenie/HTML – история развития языка разметки гипертекста [Электронный ресурс] - URL:https://www.castcom.ru/publications/web/html_istoriya_razvitiya_yazyka_razmetki_giperteksta.html.HTML5 // Htmlbook.Ru[Электронный ресурс] - URL:http://htmlbook.ru/html5.ПРИЛОЖЕНИЕ АСтилевое оформление сайтаФайл styles.css/* сбросстилейбраузера */* {box-sizing: border-box; }html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;vertical-align: baseline;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1.2;}ol { padding-left: 1.4em;list-style: decimal;}ul {padding-left: 1.4em;list-style: square;}table {border-collapse: collapse;border-spacing: 0;} /* конец кода сброса стилей браузера */.clear:after {content: " ";display: table;clear: both;}.clear {zoom: 1;}body {font-family: 'Times New Roman' sans-serif;background-color: rgb(215,251,232);}header {background-color:rgb(31,171,137);padding-bottom: 30px;box-shadow: 0 5px 14px rgba(0,0,0,0.25), 0 10px 10pxrgba(0,0,0,0.22);}header h1 {font-size: 3em;color: rgb(31,171,137);font-weight: bold;padding-top: 10px;clear: both;text-align: center;}.logo {width: 150px;margin-right: 10px;margin-left: 10px;}.text-shadow{color: white; text-shadow: -1px -1px gray, 1px 1px gray, 2px 2px #7a7a7a, 3px 3px #757575, 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161;}aside h2 {font-size: 1.3em;margin-top: 10px;}aside h3 {font-size: 1.1em;margin-top: 15px;}aside p, aside li {font-size: .75em;margin-top: 10px;}a {display: inline-block;text-decoration: none;text-transform: uppercase;letter-spacing: 1px;margin: 5px 5px;padding: 15px 10px;font-size: 12px;font-weight: bold;font-family: 'Times New Roman', sans-serif;transition: 0.2s ease-in-out;}.but a {border-radius: 10px;color: black;box-shadow: inset 0 -5px 0 #1FAB89;}.but a:hover,.but a.active {box-shadow: inset 0 -80px 0 #1FAB89, 2px 2px 3px rgba(0, 0, 0, 0.3);color: white;}.main h2 {font-size: 2em;margin-top: 10px;}.main h3 {font-size: 1.5em;margin-top: 20px;}.main p {margin-bottom: 15px;}footer {margin-top: 15px;font-size: 1em;padding: 10px 10px 30px 10px;background-color: rgb(31,171,137);color: black;font-weight: bold;box-shadow: 14px 5px 20px rgba(0,0,0,0.25), 14px 10px 20px rgba(0,0,0,0.22);}footera {color: white;}/* пользовательские стили *//* раскомментируйте этот стиль, если хотите всю страницу, включая фоновый цвет, ограничить центрированным блоком размером 1200 пикселов *//*.pageWrapper {max-width: 1200px;margin: 0 auto;}*/.columnWrapper {float: left;width: 80%;}.sidebar1 {float: left;width: 25%;padding: 0 20px 0 10px;}.main {text-align: justify;float: right;width: 75%;padding: 0 20px;border-left: dashed 1px rgb(153,153,153);border-right: dashed 1px rgb(153,153,153);}blockquote {margin: 0;color: black;padding: 30px 30px30px 90px;position: relative;font-family: 'Lato', sans-serif;}blockquote:before {content: "\201C";font-family: serif;position: absolute;top: 20px;left: 16px;color: black;width: 40px;height: 40px;border-radius: 50%;background: rgb(31,171,137);font-size: 40px;font-weight: bold;text-align: center;line-height: 50px;}blockquote:after {content: "";width: 4px;background: rgb(31,171,137);position:absolute;left: 70px;top: 20px;bottom: 20px;}blockquote p {margin-top: 0;font-size: 24px;font-weight: 300;}blockquote cite {font-style: normal;text-transform: uppercase;}.sidebar2 {float: left;text-align:justify;width: 20%; padding: 0 10px 0 20px;}* {box-sizing: border-box;}form {position: relative;width: auto;margin: 0 auto;}input {width: 100%;height: 42px;padding-left: 10px;border: 2px solid rgb(31,171,137);border-radius: 5px;outline: none;background: rgb(215,251,232);color: black;}button {position: absolute; top: 0;right: 0px;width: 42px;height: 42px;border: none;background: rgb(31,171,137);border-radius: 0 5px 5px 0;cursor: pointer;}button:before {content: "\f002";font-family: FontAwesome;font-size: 16px;color: white;}footer {clear: both; }header h1, footer p, .contentWrapper {max-width: 1200px;margin: 0 auto; }img {max-width: 100%;}img.half {max-width: 50%;}img.left {float: left;margin: 0 20px 20px 0; }img.right {float: right;margin: 0 0 20px 20px;}.topbutton {width:auto;border:2px solid rgb(31,171,137);outline: solid 2px rgb(255,255,255);background:color;text-align:center;padding:5px;position:fixed;bottom:15px;right:15px;cursor:pointer;color:black;font-size:12px;border-radius: 5px;}.topbutton:hover{background:rgb(31,171,137);color:white;}@media (min-width: 481px) and (max-width:768px) {.sidebar2 {float: none;width: auto;clear: both;border-top: 2px solid black;padding-top: 10px; } .columnWrapper {width: auto;} .main {border-right: none; }}@media (max-width:480px) {.columnWrapper, .main, .sidebar1, .sidebar2 .but {float: none;width: auto;}.main {border: none;}.sidebar1, .sidebar2 {border-top: 2px solid black;margin-top: 25px;padding-top: 10px; }header h1 {font-size: 1.5em;}.sidebar2 }