Файл: Выпускная квалификационная работа разработка вебсайта для рекламного агентства rocont Погадаев Вячеслав Олегович.docx
Добавлен: 02.12.2023
Просмотров: 118
Скачиваний: 2
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
Рисунок 7.1 – Прототип главная страница, верхняя часть
В верхней части главной страницы представлен, логотип, навигация, кнопка с всплывающим окном обратной связи, обозначен род деятельности и описание компании, блок с логотипами довольных клиентов. Последний блок описывает одну из популярных услуг сайта и дано краткое описание, кнопка с переходом в портфолио и кнопка с переходом во все услуги.
Рисунок 7.2 – Прототип главная страница, нижняя часть
В нижней части главной страницы, представлены преимущества работы с компанией, 4 ключевых преимущества, блок для привлечения внимания клиентов который направляет на подробную информацию. Также блок с специальным программным обеспечением по сбору ключевых слов.
Приступаем к прототипу раздела возможности, в котором находиться возможности, которые предоставляет компания. Второй экран прототипа страницы возможности приведен на рисунке 8.
Рисунок 8 – Прототип страницы наши возможности
В разделе наши возможности, прописывается вся информация по описанию всех услуг, которые представляет компания. Блоки с возможностями включают в себя картинку, заголовок и описание. В возможности компании входит, разработка веб-сайтов, реклама в интернете, дизайн, разработка программного обеспечения, фото и видеосъемка.
Приступаем к прототипу раздела портфолио, в котором находиться витринные работы компании. Третий экран прототипа страницы портфолио приведен на рисунке 9.
Рисунок 9 – Прототип страницы наше портфолио
В разделе наше портфолио, в котором находиться, выполненные компанией работы. В портфолио входят такие работы как, реклама в интернете, разработка веб-сайтов, разработка программного обеспечения, фото и видеосъемка, дизайн.
Приступаем к прототипу раздела контакты, в котором написаны основные контактные данные компании. Четвертый экран прототипа страницы контакты приведен на рисунке 10.
Рисунок 10 – Прототип страницы контакты
В разделе контакты находиться, форма обратной связи для ответов на вопросы клиентов, также в информации указан, адрес, городской номер телефона, мобильный номер телефона, почта.
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.