Разработка рабочего наброска сайта
ПРАКТИЧЕСКАЯ ЧАСТЬ
2.1 Перечень требований по содержимому и функциям Web–сайта
Таблица 1 – Требования к содержимому
| Наименование содержимого | Описание | Тип содержимого |
| О предприятии | Молоко является самым полноценным продуктом питания. | Текст |
| Продукция | Перечисляются выпускаемые молочные продукты. | Текст. Картинка в формате jpg |
| Новости | Диетологи относят молоко к продуктам. | Текст. |
| Контакты | Контакты. | Текст. |
| Новинки | Новые молочные продукты. | Текст. |
Технические требования.
Сайт будет реализован при помощи языка HTML – стандартный язык разметки документов во Всемирной паутине. Большинство web–страниц создаются при помощи языка HTML. Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. Также используются каскадные стили таблиц – css–технология описания внешнего вида документа, написанного языком разметки.Web–страница, сверстанная на css весит гораздо меньше и быстрее загружается в браузерах. Неудивительно, ведь все данные параметров отображения документа заносятся в отдельный css–файл. За счёт этого документ становится очень легким и пользователь даже может не заметить, как быстро загрузится страничка. За счёт того, что web–страница становится очень легкой и быстрозагружаемой, она гораздо быстрее индексируется поисковыми системами. Кроме того, сайт сделанный на css–вёрстке гораздо легче и удобней оптимизировать под поисковые машины и продвинуть его в ТОП.
Требования к внешнему виду.
Рынок компьютерной техники предлагает потребителям самые разные варианты отображающих устройств – мониторов. От мониторов нетбуков (около 12´) до мониторов с диагональю свыше 21´. Поэтому, невозможно предугадать, какой техникой будет "вооружен" наш предполагаемый посетитель. Предлагается принять в качестве ориентируемого среднее значение: монитор с диагональю 17´ (1024×768 пикселей), разрешением 72 px/in и ориентироваться при верстке страниц сайта на эти значения.
Требования к функциям сайта.
Наш сайт по теме производство молока и молочных продуктов, будет относиться к сайтам - визиткам, цель такого сайта – дать пользователю общее представление о компании. Максимально заинтересовать и спровоцировать покупку или иное действие. Привлечение дополнительных клиентов. Обеспечить запоминаемость у потенциальных клиентов и посетителей. Он будет рассчитан для предоставления общей информации пользователю. Характеристика и основные элементы – наличие координат, контакты ключевых людей компании, род деятельности и предоставляемые услуги. Количество страниц – до 15. Тип и характеристика дизайна – несложный деловой дизайн.
Разработка рабочего наброска сайта
Группировка элементов.
Сайт будет состоять из пяти разделов:
- 1 раздел «О нас». Рассказывает о нашем предприятии;
- 2 раздел «Продукция». Показывает информацию о выпускаемой продукции на предприятии;
- 3 раздел «Новости». Рассказывает о полезных свойствах молока и молочных продуктов;
- 4 раздел «Контакты». Дает информацию о месте нахождения предприятия, контактные телефоны;
- 5 раздел «Новинки». Показывает информацию о новинках продукции которая начала выпускаться на предприятии.
Навигационное меню будет располагаться справа и включать в себя следующие пункты:«О нас», «Продукция», «Новости», «Контакты», «Новинки».
Раздел «Новинки» будет выполнен в виде отдельного меню.
Приоритет для каждой группы.
1 «О нас», 2 «Продукция», 3 «Новости», 4 «Контакты», 5 «Новинки».
Создание карты сайта
Набросок, который я создала для web–сайта, можно преобразовать непосредственно в карту сайта показанную на рисунке 5.
 |
Рисунок 5 – Блок – схема сайта
Разработка макета сайта
Макет – это набор правил, по которым располагаются элементы страницы сайта. Таким образом, макет – это основа верстки, – тот каркас, на котором собираются элементы дизайна и информационное наполнение страницы.
Зачем нужен макет страниц сайта? Как один из основополагающих элементов стиля, макет создает в документе единство, ощущение неделимого образного ряда. То есть макет упорядочивает документ, делает его читаемым и более удобным для восприятия.
Прежде чем начать создание макета, необходимо определить, макет чего вы собираетесь делать, что сводиться к определению количества принципиально различных страниц на вашем будущем ресурсе. Все страницы создаваемого сайта должны быть выполнены в едином стиле, разве что компоновка текстовой области у главной страницы может быть чуть более сложной, чем у внутренних страниц.
 |
Моя главная задача состоит в том, чтобы продумать дизайн начальной страницы и страниц уровня, который позволяет связать воедино все страницы сайта и с максимальной эффективностью использовать возможности Internet.
Выбираем двух колоночный макет (Смотри рисунок 6).
Рисунок 6 - Двух колоночный макет
Определение функциональных зон страниц сайта.
Контент (от англ. content – содержание). Под "контентом" в широком смысле понимают собственно наполнение сайта. Контент сайта соотносится с дизайном, как содержание с формой.
В более узком смысле слова контент сайта – это материалы, размещенные на нем: в основном тексты, а также картинки и музыка.
Каждая контент–зона выполняет свою роль: логотип – предоставляет визуальную информацию, название сайта – это собственно имя ресурса и его основное обозначение деятельности, меню навигации – позволяет пользователю перемещаться по WEB–сайту, поле ввода информации – это главная текстовая(информационная), часть, раскрывающая суть темы, графика – позволяет визуально представить излагаемый материал, рейтинг – помогает установить место, занимаемое в списке сайтов – аналогов, координаты – это информация о компании–разработчике данного ресурса.
Структура страницы должна состоять из элементов, которые должны присутствовать на всех страницах сайта: меню навигации, названия темы, заголовка, поля ввода информации (текстовой, графической), контактной информации.
Представляю свой вариант структуры страниц сайта показанный на рисунке 7.
Рисунок 7 – Схема размещения элементов страницы–шаблона страницы
Цветовая схема сайта
Мой сайт будет выполнен в теплой гамме. Фон светло – желтый #FFFFE0. Желтый – олицетворяет ум, влияние доминанта. Он самый гибкий, везде проникает, помогает преодолеть трудности, способствует концентрации внимания.
Заголовки панели меню и рамка панелей выполнены светло серым нейтральным цветом.
Цвет текста коричнево-серый, #464032. Заголовки меню томатно-красного цвета, #A42903. Заголовки текста Н1, Н2, Н3 коричневого цвета.
Графический логотип должен иметь светлые тона с присутствием белого и желтых цветов.
Оптимизация контента сайта
В данной главе я рассмотрю оптимизацию текстового и графического контента моего сайта, поэтому оптимизацию сайта я условно разделю на две части: текстовая и графическая оптимизация.
Текстовая оптимизация. При подготовке текста к верстке я убрала слишком непонятные слова и разбила его на абзацы, чтобы он воспринимался легче.
Графическая оптимизация. Все изображения подобраны по своей тематике.
Все изображения на сайте представлены в цветовой модели RGB, изображения формата JPEG.
 |
В зависимости от назначения изображения у меня вышли следующие размеры показанные на рисунке 9:
Рисунок 9 – Изображения используемые на страницах сайта
ПРАКТИЧЕСКАЯ ЧАСТЬ
2.1 Перечень требований по содержимому и функциям Web–сайта
Таблица 1 – Требования к содержимому
| Наименование содержимого | Описание | Тип содержимого |
| О предприятии | Молоко является самым полноценным продуктом питания. | Текст |
| Продукция | Перечисляются выпускаемые молочные продукты. | Текст. Картинка в формате jpg |
| Новости | Диетологи относят молоко к продуктам. | Текст. |
| Контакты | Контакты. | Текст. |
| Новинки | Новые молочные продукты. | Текст. |
Технические требования.
Сайт будет реализован при помощи языка HTML – стандартный язык разметки документов во Всемирной паутине. Большинство web–страниц создаются при помощи языка HTML. Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. Также используются каскадные стили таблиц – css–технология описания внешнего вида документа, написанного языком разметки.Web–страница, сверстанная на css весит гораздо меньше и быстрее загружается в браузерах. Неудивительно, ведь все данные параметров отображения документа заносятся в отдельный css–файл. За счёт этого документ становится очень легким и пользователь даже может не заметить, как быстро загрузится страничка. За счёт того, что web–страница становится очень легкой и быстрозагружаемой, она гораздо быстрее индексируется поисковыми системами. Кроме того, сайт сделанный на css–вёрстке гораздо легче и удобней оптимизировать под поисковые машины и продвинуть его в ТОП.
Требования к внешнему виду.
Рынок компьютерной техники предлагает потребителям самые разные варианты отображающих устройств – мониторов. От мониторов нетбуков (около 12´) до мониторов с диагональю свыше 21´. Поэтому, невозможно предугадать, какой техникой будет "вооружен" наш предполагаемый посетитель. Предлагается принять в качестве ориентируемого среднее значение: монитор с диагональю 17´ (1024×768 пикселей), разрешением 72 px/in и ориентироваться при верстке страниц сайта на эти значения.
Требования к функциям сайта.
Наш сайт по теме производство молока и молочных продуктов, будет относиться к сайтам - визиткам, цель такого сайта – дать пользователю общее представление о компании. Максимально заинтересовать и спровоцировать покупку или иное действие. Привлечение дополнительных клиентов. Обеспечить запоминаемость у потенциальных клиентов и посетителей. Он будет рассчитан для предоставления общей информации пользователю. Характеристика и основные элементы – наличие координат, контакты ключевых людей компании, род деятельности и предоставляемые услуги. Количество страниц – до 15. Тип и характеристика дизайна – несложный деловой дизайн.
Разработка рабочего наброска сайта
Группировка элементов.
Сайт будет состоять из пяти разделов:
- 1 раздел «О нас». Рассказывает о нашем предприятии;
- 2 раздел «Продукция». Показывает информацию о выпускаемой продукции на предприятии;
- 3 раздел «Новости». Рассказывает о полезных свойствах молока и молочных продуктов;
- 4 раздел «Контакты». Дает информацию о месте нахождения предприятия, контактные телефоны;
- 5 раздел «Новинки». Показывает информацию о новинках продукции которая начала выпускаться на предприятии.
Навигационное меню будет располагаться справа и включать в себя следующие пункты:«О нас», «Продукция», «Новости», «Контакты», «Новинки».
Раздел «Новинки» будет выполнен в виде отдельного меню.
Приоритет для каждой группы.
1 «О нас», 2 «Продукция», 3 «Новости», 4 «Контакты», 5 «Новинки».
Создание карты сайта
Набросок, который я создала для web–сайта, можно преобразовать непосредственно в карту сайта показанную на рисунке 5.
| |
Рисунок 5 – Блок – схема сайта
Разработка макета сайта
Макет – это набор правил, по которым располагаются элементы страницы сайта. Таким образом, макет – это основа верстки, – тот каркас, на котором собираются элементы дизайна и информационное наполнение страницы.
Зачем нужен макет страниц сайта? Как один из основополагающих элементов стиля, макет создает в документе единство, ощущение неделимого образного ряда. То есть макет упорядочивает документ, делает его читаемым и более удобным для восприятия.
Прежде чем начать создание макета, необходимо определить, макет чего вы собираетесь делать, что сводиться к определению количества принципиально различных страниц на вашем будущем ресурсе. Все страницы создаваемого сайта должны быть выполнены в едином стиле, разве что компоновка текстовой области у главной страницы может быть чуть более сложной, чем у внутренних страниц.
| |
Моя главная задача состоит в том, чтобы продумать дизайн начальной страницы и страниц уровня, который позволяет связать воедино все страницы сайта и с максимальной эффективностью использовать возможности Internet.
Выбираем двух колоночный макет (Смотри рисунок 6).
Рисунок 6 - Двух колоночный макет
Определение функциональных зон страниц сайта.
Контент (от англ. content – содержание). Под "контентом" в широком смысле понимают собственно наполнение сайта. Контент сайта соотносится с дизайном, как содержание с формой.
В более узком смысле слова контент сайта – это материалы, размещенные на нем: в основном тексты, а также картинки и музыка.
Каждая контент–зона выполняет свою роль: логотип – предоставляет визуальную информацию, название сайта – это собственно имя ресурса и его основное обозначение деятельности, меню навигации – позволяет пользователю перемещаться по WEB–сайту, поле ввода информации – это главная текстовая(информационная), часть, раскрывающая суть темы, графика – позволяет визуально представить излагаемый материал, рейтинг – помогает установить место, занимаемое в списке сайтов – аналогов, координаты – это информация о компании–разработчике данного ресурса.
Структура страницы должна состоять из элементов, которые должны присутствовать на всех страницах сайта: меню навигации, названия темы, заголовка, поля ввода информации (текстовой, графической), контактной информации.
Представляю свой вариант структуры страниц сайта показанный на рисунке 7.
Рисунок 7 – Схема размещения элементов страницы–шаблона страницы
Цветовая схема сайта
Мой сайт будет выполнен в теплой гамме. Фон светло – желтый #FFFFE0. Желтый – олицетворяет ум, влияние доминанта. Он самый гибкий, везде проникает, помогает преодолеть трудности, способствует концентрации внимания.
Заголовки панели меню и рамка панелей выполнены светло серым нейтральным цветом.
Цвет текста коричнево-серый, #464032. Заголовки меню томатно-красного цвета, #A42903. Заголовки текста Н1, Н2, Н3 коричневого цвета.
Графический логотип должен иметь светлые тона с присутствием белого и желтых цветов.