Реферат: Выпускная квалификационная работа разработка вебсайта для рекламного агентства rocont Погадаев Вячеслав Олегович
Внимание! Если размещение файла нарушает Ваши авторские права, то обязательно сообщите нам
2.2 Создание дизайна веб-сайта
Как мы видим веб-дизайн получается достаточно обильный по информации, хорошим расположением для удобного просмотра. Теперь, когда готов прототип можно проступать к более тщательной прорисовке и определению окончательного дизайна будущего веб-сайта. Разработка производилась в программе Figma,так как эта программа позволяет быстро и качественно выполнить её. В дизайне используем мягкие цвета. В качестве акцентного цвета используем цвет, взятый из логотипа компании.Приступаем к веб-дизайну главного экрана веб-сайта. Веб-дизайн первого экрана приведен на рисунке 11.Рисунок 11.1 – Веб-дизайн главная страница, верхняя частьРисунок 11.2 – Веб-дизайн главная страница, нижняя частьПриступаем к веб-дизайну раздела возможности. Второй экран веб-дизайна приведен на рисунке 12.Рисунок 12 – Веб-дизайн раздела возможностиПриступаем к веб-дизайну раздела портфолио. Третий экран веб-дизайна приведен на рисунке 13.Рисунок 13 – Веб-дизайн раздела портфолиоПриступаем к веб-дизайну раздела контакты. Четвертый экран веб-дизайна приведен на рисунке 14.Рисунок 14 – Веб-дизайн раздела контакты2.3 Верстка веб-сайта
Перед непосредственным создание веб-сайта необходимо подготовить папки в которых будут содержаться необходимые документы такие как шрифты изображения таблицы стилей библиотеки и скрипты. Также должна содержаться страничка index.html которая будет являться главной страницей веб-сайта. Структура папок веб-сайта приведена на рисунке 15.Рисунок 15 – Структура папок веб-сайта
Для начала мы устанавливаем в файле index.htmlвсю необходимую служебную информацию подключаем стили указываем титульную надпись веб-страницы также указываем путь до каскадной таблицы стилей. Все это делается в теге . Служебная информация веб-страницы приведена на рисунке 16.Рисунок 16 – Служебная информация веб-страницыТакже необходимо подключить шрифты, которые будут использоваться при верстке, которые будут использоваться по умолчанию. Подключение шрифтов приведено на рисунке 17.Рисунок 17 – Подключение шрифтовДалее ориентируясь на макет начинаем создавать блоки с нужным содержанием внутри тега и в файле style.cssописывать свойства объектов. Полный текст HTMLкода содержится в приложении A.Все отдельные элементы веб-сайта удобно заключать в теги
и .
Тег
Тег
и тег не имеют свойств по умолчанию для внешнего отображения они представляют собой так называемые контейнеры поэтому к ним можно применять всевозможные CSS-стили чтобы элементы внутри этих тегов приняли желаемый вид.
В настоящее время тег
В настоящее время тег
используется для группирования блочных элементов. Тег также позволяет объединять любой набор таких элементов как заголовок несколько абзацев список в единственном блоке который потом можно позиционировать на веб-страницы создавая сложную схему разметки.Тег
следует применять только в том случае если для выделения области не подходит другой элемент страницы.Тег применяется для выделения внутренних (inline) элементов таких как отдельные слова и фразы, находящихся в пределах абзаца теста или заголовка.
Верстка происходит сверху вниз поэтому, следуя макету сперва создаем логотип, который также будет является ссылкой на главную страницу веб-сайта.Полный текст html-кода содержится в приложении A.
На веб-сайте имеется возможность клиенту оставить заявку на определенную услугу. Пример формы заказа товара приведен на рисунке 18.
Рисунок 18 – Форма заказа услуги
При заполнении формы на электронную почту придет письмо с введенными данными, и сотрудники офиса могут связаться с клиентом.
Также на веб-сайте имеется возможность связаться с клиентом и обсудить детали, через форму обратной связи. Пример формы заказа товара приведен на рисунке 19.
Рисунок 19 – Форма обратной связи
При заполнении формы на электронную почту придет письмо с ответом на интересующий вопрос клиента по той или иной услуге.
Подвал веб-сайта содержит контактную информацию, а также в нем содержаться основные пункты меню и контактная информация. Также здесь располагается встроенная карта, на которой подробно можно посмотреть где находится офис компании. Пример подвала веб-сайта приведен на рисунке 20.
Рисунок 20 – Подвал веб-сайта
В настоящее время веб-сайт — это необходимая площадка каждой современной организации. Веб-сайт может считаться лицом компании в интернете. Ведь благодаря веб-сайту компании могут понятно доводить информацию до партнеров и клиентов, структурированно излагать свою политику работы, а от этого зависит успех любого бизнеса. В рамках данной работы мы рассмотрели основные теоретические вопросы создания веб-сайтов, языковые и программные средства, используемые при разработке веб-сайтов. Нами были изучены современные методы создания веб-сайтов, от банальной ручной верстки сайтов и с использований систем управления содержимым (CMS). В итоге мы разработали логическую структуру и веб-дизайн для рекламной компании «Rocont». Используя язык текстовой разметки HTML и каскадных таблиц стилей CSS. Впоследствии мы оптимизировали и минимизировали верстку для быстрого отображения в браузерах. Были прописаны определенные сео-теги, с помощью которых веб-сайт занимает хорошие позиции в поиске. Результатом проделанной работы является полноценный рабочий веб-сайт компании «Rocont» наполненный информационным контентом.
1. Гончаров А.Н. Самоучитель HTML А.Н. Гончаров.- СПб.: Питер, 2012.
2. Горнаков С.Г. Осваиваем популярные системы управления сайтом С.Г. Горнаков.- М.: Наука, 2015.
3. Ежевский Д.О. О критериях создания электронных учебных пособий Д.О. Ежевский.- М.: Эксмо, 2014.
4. Колисниченко Д.Н. Движок для вашего сайта. CMS Joomla!, Slaed, PHP-Nuke Д.Н. Колесниченко.- М.: НТ Пресс, 2016.
5. Колисниченко Д.Н. Joomla!: Руководство пользователя / Д.Н. Колисниченко.- М.: Диалектика, 2017.
6. Норт Б. Joomla! : Практическое руководство / Б. Норт.- М.: Символ-плюс, 2015.
7. Рамел Д. Самоучитель Joomla! / Д. Рамел.- СПб.: Питер, 2015.
8. Хаген Г. Создание веб-сайтов с помощью Joomla! 1.5 / Г. Хаген.- М.: Вильямс, 2015.
9. Чиртик А.В. Популярный самоучитель HTML / А.В. Чиртик.- СПб.: Питер, 2016
10. Шишкин В.В. Многоуровневая концепция создания электронных учебных пособий / В.В. Шишкин. - М.: Махаон, 2014.
Верстка происходит сверху вниз поэтому, следуя макету сперва создаем логотип, который также будет является ссылкой на главную страницу веб-сайта.Полный текст html-кода содержится в приложении A.
На веб-сайте имеется возможность клиенту оставить заявку на определенную услугу. Пример формы заказа товара приведен на рисунке 18.
Рисунок 18 – Форма заказа услуги
При заполнении формы на электронную почту придет письмо с введенными данными, и сотрудники офиса могут связаться с клиентом.
Также на веб-сайте имеется возможность связаться с клиентом и обсудить детали, через форму обратной связи. Пример формы заказа товара приведен на рисунке 19.
Рисунок 19 – Форма обратной связи
При заполнении формы на электронную почту придет письмо с ответом на интересующий вопрос клиента по той или иной услуге.
Подвал веб-сайта содержит контактную информацию, а также в нем содержаться основные пункты меню и контактная информация. Также здесь располагается встроенная карта, на которой подробно можно посмотреть где находится офис компании. Пример подвала веб-сайта приведен на рисунке 20.
Рисунок 20 – Подвал веб-сайта
Заключение
В настоящее время веб-сайт — это необходимая площадка каждой современной организации. Веб-сайт может считаться лицом компании в интернете. Ведь благодаря веб-сайту компании могут понятно доводить информацию до партнеров и клиентов, структурированно излагать свою политику работы, а от этого зависит успех любого бизнеса. В рамках данной работы мы рассмотрели основные теоретические вопросы создания веб-сайтов, языковые и программные средства, используемые при разработке веб-сайтов. Нами были изучены современные методы создания веб-сайтов, от банальной ручной верстки сайтов и с использований систем управления содержимым (CMS). В итоге мы разработали логическую структуру и веб-дизайн для рекламной компании «Rocont». Используя язык текстовой разметки HTML и каскадных таблиц стилей CSS. Впоследствии мы оптимизировали и минимизировали верстку для быстрого отображения в браузерах. Были прописаны определенные сео-теги, с помощью которых веб-сайт занимает хорошие позиции в поиске. Результатом проделанной работы является полноценный рабочий веб-сайт компании «Rocont» наполненный информационным контентом.
Список используемых источников
1. Гончаров А.Н. Самоучитель HTML А.Н. Гончаров.- СПб.: Питер, 2012.
2. Горнаков С.Г. Осваиваем популярные системы управления сайтом С.Г. Горнаков.- М.: Наука, 2015.
3. Ежевский Д.О. О критериях создания электронных учебных пособий Д.О. Ежевский.- М.: Эксмо, 2014.
4. Колисниченко Д.Н. Движок для вашего сайта. CMS Joomla!, Slaed, PHP-Nuke Д.Н. Колесниченко.- М.: НТ Пресс, 2016.
5. Колисниченко Д.Н. Joomla!: Руководство пользователя / Д.Н. Колисниченко.- М.: Диалектика, 2017.
6. Норт Б. Joomla! : Практическое руководство / Б. Норт.- М.: Символ-плюс, 2015.
7. Рамел Д. Самоучитель Joomla! / Д. Рамел.- СПб.: Питер, 2015.
8. Хаген Г. Создание веб-сайтов с помощью Joomla! 1.5 / Г. Хаген.- М.: Вильямс, 2015.
9. Чиртик А.В. Популярный самоучитель HTML / А.В. Чиртик.- СПб.: Питер, 2016
10. Шишкин В.В. Многоуровневая концепция создания электронных учебных пособий / В.В. Шишкин. - М.: Махаон, 2014.
Источник: https://files.student-it.ru/previewfile/208532