Добавлен: 18.06.2023
Просмотров: 55
Скачиваний: 3
Согласно предпочтениям и указаниям заказчика сайт должен иметь размер страниц 1024*768, 1280*1024 без горизонтальной полосы прокрутки и без пустых (белых) полей для основных типов разрешения.
Разработку главной страницы следует начать с создания шапки сайта, в которой будут присутствовать ссылки на остальные страницы сайта.
Рисунок 1. Шапка сайта
В качестве ссылки на главную был выбран логотип сайта, т.к. такое решение показалось достаточно интересным для заказчика. Для того чтобы пользователь понимал на какой странице сайта он находится была принято решение добавить белую, выделяющую активную страницу полосу. Для последующей работы с шапкой она была включена в класс page_head, а логотип в left_head. Логотипу сразу же был присвоен id main_page и гиперссылка на главную страницу. Шапка выполнена таким образом, что при прокрутке страницы вниз она остается в верхней части окна для того, чтобы пользователю не приходилось листать страницу наверх, если он захочет просмотреть другие страницы сайта.
Основные пункты меню располагаются в классе right_head, а все активные ссылки заключены в класс menu. Перечень списка меню включен в теги ul и li для горизонтального перечисления.
После блока меню на главной странице был создан класс content с изображением, на котором содержится слоган компании, а также в данном классе будет располагаться основная часть контента на главной странице.
Рисунок 2. Контент
В данном классе содержаться краткое описание, форма обратной связи и ссылки на остальные страницы сайта.
Для реализации блока о нас было создано два класса about_text и about_right, после чего с помощью таблицы стилей были настроены параметры width 35%, min-width 300px, height 300px и float left для того, чтобы текст не накладывался на изображение. Кнопка «Узнать больше» и «Посмотреть все» выполнены в виде рамки, при наведении на которую вся область кнопки заливается оранжевым цветом, данный дизайнерский ход делает элемент более заметным и обозначает, что данная кнопка является активной.
Для заливки кнопок цветом использовался тег таблицы стилей hover, который делает кнопку белой, если на неё не направлен курсор, а с помощью тега cursor: pointer заливает её желтым цветом при наведении курсора мыши в область кнопки. Блок «Продукция» выполнен таким же образом, как и блок «О нас» для поддержания единого стиля страницы.
Далее располагается блок обратной связи, в котором пользователи сайта могут оставить запрос на звонок или какие-то предложения или пожелания относительно ассортимента сайта, задать вопрос по интересующей их продукции или же выдвинуть какие-то предложения о сотрудничестве с кондитерским комбинатом.
Рисунок 3. Контент и блок обратной связи
Блок обратной связи выполнен с помощью блоков input для обозначения предназначения полей используется тег placeholder=”текст” указанием названия текста поля, чтобы пользователь мог понять какие данные нужно вводить в определенное поле. Весь блок обратной связи объединен в класс write_us и разделен на два подкласса write_left и write_right на которых располагается текст и блок с текстовыми полями соответственно.
В нижней части странице расположен блок footer в котором содержится название компании и дата реализации сайта.
Далее рассмотрим страницу с продукцией компании. На ней расположен каталог с множеством мелких блоков, на которых содержаться изображения, краткое описание и цена продукта. Каждый подраздел ассортимента так же разделен на блоки, в которых идет краткое превью ассортимента, а затем уже сама продукция.
Верхняя часть страницы так же начинается с шапки, так же, как и на главной активная страница обозначается белым цветом, помимо этого, текст выбранной страницы так же становится более ярким и отчетливым.
Рисунок 4. Продукция
Так как сайт-визитка не является интернет-магазином все представленные блоки не являются активными и на них невозможно нажать. Весь каталог выполнен с помощью классов category, block и item. В классе category располагается подпункт продукции, а в классе block располагаются позиции. В классе item находится сам продукт, его изображение, краткое описание и стоимость.
Рисунок 5. Продукция
После создания всех элементов они были расположены в определенном порядке используя таблицу стилей, для отображения блоков в ней использовались теги display: block и display: flex. Для расположения всех элементов используется блок фиксированного размера, в котором прописываются отступы между блоками, их размеры, стили текста и размеры используемых изображений.
В нижней части страницы так же располагается footer.
Рисунок 6. О компании
Далее рассмотрим страницу с контактной информацией кондитерского комбината. На данной странице содержится информация об адресе, часах работы и контактной информации.
На странице используется элемент Google карт с обозначением адреса компании. Так же благодаря встроенным Google картам пользователь может просмотреть местонахождения ближайших объектов, чтобы сориентироваться, где конкретно находится комбинат.
Рисунок 7. Контакты
Теперь рассмотрим страницу с информацией о компании. На данной странице представлен более подробный текст с историей компании, блок с изображением для более наглядного представления, чтобы страница не выглядела пустой.
Рисунок 8. Контакты
ЗАКЛЮЧЕНИЕ
В ходе выполнения курсовой работы был реализован сайт-визитка кондитерского комбината «Вишенка». Требования заказчика были полностью соблюдены, сайт отвечает всем требованиям и включает в себя весь контент, который был предоставлен для отображения на страницах сайта.
Поставленная цель курсовой работы выполнена в достаточно полном объеме.
В процессе проектирования сайта визитки были получены навыки работы в графических редакторах, способы верстки сайта с помощью таблицы стилей CSS, HTML. Были освоены новые программные средства разработки интернет-сайтов. Также был проведен анализ уже существующих сайтов-визиток, графических редакторов и редакторов HTML.
В результате сравнения уже существующих сайтов были сделаны выводы о возможных дизайнерских решениях и наполнении сайта. Шаблон данного сайта-визитки имеет универсальный дизайн и при определенной верстке может быть использован другими организациями.
Список литературы
- Кибардин М.Г., Горбач С.М. РОЛЬ ИНТЕРНЕТ-САЙТА В РАЗВИТИИ БИЗНЕСА // Научное сообщество студентов XXI столетия. ЭКОНОМИЧЕСКИЕ НАУКИ: сб. ст. по мат. XXIII междунар. студ. науч.-практ. конф. № 8(23).
- Web-дизайн: HTML, JavaScript и CSS. Карманный справочник./ Гончаров А.Ю. - М.:КУДИЦ-ПРЕСС, 2007. - 320с.
- Информационный сайт https://ru.wikipedia.org/wiki/
Приложение 1. Главная страница
<html>
<head>
<meta charset="utf-8">
<title>Вишенка</title>
<link rel="stylesheet" href="Content/style.css">
</head>
<body>
<header class="page_head">
<div class="left_head">
<a id="main_page" href="index.html">
<img class="logo" id=logo src="Image/logo.png">
</a>
</div>
<div class="right_head">
<div class="menu">
<ul>
<li><a href="products.html">ПРОДУКЦИЯ</a></li>
<li><a href="about.html">О КОМПАНИИ</a></li>
<li><a href="contacts.html">КОНТАКТЫ</a></li>
</ul>
</div>
</div>
</header>
<div class="content">
<div class="back_img">
<div class="text_img">
<div class="f_line"><br>Свежий хлеб</div>
<div class="l_line">Простые радости нашей жизни</div>
</div>
</div>
<div class="about_company">
<div class="about_left">
<div class="about">
О нас
</div>
<div class="about_text">
Кондитерский комбинат «Вишенка» работает с 2016 года. На сегодняшний день занимает лидирующие позиции на московском рынке по производству хлебобулочных и кондитерских изделий. Опираясь на опыт, проверенный годами, предприятие продолжает успешно развиваться
</div>
<a class="a_all" href="about.html">
<div class="element_sub">Узнать больше</div>
</a>
</div>
<div class="about_right">
<img src="Image/pekar.jpg" class="pekar">
</div>
</div>
<div class="about_menu">
<div class="about_left">
<img src="Image/menu.png" class="pekar_two">
</div>
<div class="about_right">
<div class="about_mm">
Продукция
</div>
<div class="about_text">
У нас вы можете найти много различных видов хлеба, пирогов, булочек и пирожных — от багетов и круассанов до макарони и улиток с корицей, а также печенье и многое другое.
</div>
<a href="products.html" class="a_all">
<div class="element_sub_left">Посмотреть все</div>
</a>
</div>
</div>
<div class="write_us">
<div class="write_left">
<div class="write_w">Напишите нам!</div>
<div class="write_text">
Если вы хотите заказать выпечку для мероприятия, предложить сотрудничество или связаться по другому интересующему вас вопросу, заполните форму связи и мы обязательно ответим!
</div>
</div>
<div class="write_right">
<input type="text" class="input_write" placeholder="Имя">
<input type="text" class="input_write" placeholder="E-mail">
<input type="text" class="input_write" placeholder="+7(__) ___-__-__">
<textarea class="input_write_multi" placeholder="Сообщение"></textarea>
<div class="submit_but">Отправить</div>
</div>
</div>
</div>
<footer>
<div class="foot_one"></div>
<div class="line_line"></div>
<div class="foot_two">
Кондитерский комбинат "Вишенка" 2018
</div>
</footer>
</body>
</html>
Приложение 2. Продукция
<html>
<head>
<meta charset="utf-8">
<title>Продукция</title>
<link rel="stylesheet" href="Content/style.css">
</head>
<body>
<header class="page_head">
<div class="left_head">
<a id="main_page" href="index.html">
<img class="logo" id=logo src="Image/logo.png">
</a>
</div>
<div class="right_head">
<div class="menu">
<ul>
<li><a href="products.html" id="active_i">ПРОДУКЦИЯ</a></li>
<li><a href="about.html">О КОМПАНИИ</a></li>
<li><a href="contacts.html">КОНТАКТЫ</a></li>
</ul>
</div>
</div>
</header>
<div class="content">
<div class="back_img_products">
<div class="f_line_all">Продукция</div>
</div>
<div class="category_one">
<div class="block_one">
<div class="l_one">Хлеб</div>
<div class="l_two">Хлеб всему голова! Свежий и ароматный, можно есть просто так, а можно намазать на него масло или повидло.</div>
</div>
<div class="block_two">
<div class="item_one">
<div class="item_image"><img src="Image/briosh.jpg" class="image_size"></div>
<div class="item_name">Бриошь</div>
<div class="item_price">210 руб.</div>
<div class="item_comment">Традиционный хлеб с кардамоном и тмином.</div>
</div>
<div class="item_two">
<div class="item_image"><img src="Image/zlake.jpg" class="image_size"></div>
<div class="item_name">Злаковый хлеб</div>
<div class="item_price">330 руб.</div>
<div class="item_comment">Семена льна, подсолнечника, ржаные хлопья, кунжут, тмин. </div>
</div>
<div class="item_three">
<div class="item_image"><img src="Image/zavar.jpg" class="image_size"></div>
<div class="item_name">Заварной хлеб</div>
<div class="item_price">410 руб.</div>
<div class="item_comment">Дрожжевой хлеб на солодовой закваске. С пряностями.</div>
</div>
</div>
</div>
<div class="category_one">
<div class="block_one">
<div class="l_one">Пирожные и булочки</div>
<div class="l_two">Лучшие рецепты и продукты - залог хорошей выпечки.</div>
</div>
<div class="block_two">
<div class="item_one">
<div class="item_image"><img src="Image/cat_2_1.jpg" class="image_size"></div>
<div class="item_name">Апельсиновые Кексы</div>
<div class="item_price">260 руб.</div>
<div class="item_comment">Цедра лимона и апельсина, нотки корицы и мускатного ореха — идеальное сочетание.</div>
</div>
<div class="item_two">
<div class="item_image"><img src="Image/cat_2_2.jpg" class="image_size"></div>
<div class="item_name">Круассан с Кремом</div>
<div class="item_price">170 руб.</div>
<div class="item_comment">Начинка из нежного ванильного крема в воздушном слоеном тесте. </div>
</div>
<div class="item_three">
<div class="item_image"><img src="Image/cat_2_3.jpg" class="image_size"></div>
<div class="item_name">Яблочные Профитроли</div>
<div class="item_price">330 руб.</div>
<div class="item_comment">Маленькие булочки из заварного теста с яблочной начинкой и корицей. </div>
</div>
</div>
</div>
<div class="category_one">
<div class="block_one">
<div class="l_one">Макарони</div>