Министерствообразования и науки РФ
Уральскийгосударственный колледж имени И.И. Ползунова
РАЗРАБОТКА И СОЗДАНИЕ САЙТА «СИНЬОР ПЕКАРЬ»
Пояснительнаязаписка
Екатеринбург 2010
Введение
1. Выявление целей создания сайта и постановкипроблемы, решаемой созданием сайта
1.1Определение целей создания сайта
1.2Определение целевого сегмента потребителей
2. ВЫБОР ТЕМЫ
2.1 Анализ «сайтов–аналогов» проекта
2.2Обоснование типа разрабатываемого web–узла
3. СОЗДАНИЕ НАБРОСКА САЙТА
3.1 Переченьтребований по содержимому и функциям Web–сайта
3.2Разработка рабочего наброска сайта
3.3 Созданиекарты сайта
4. РАЗРАБОТКА НАБОРОВ МАКЕТОВСТРАНИЦ
4.1Определение функциональных зон страниц сайта
4.2Нахождение идеи пластического решения, определение колорита страниц
4.3Разработка композиционного решения страниц сайта
4.4Нахождение идеи решения основных зон страниц сайта
5. ДЕКОМПОЗИЦИЯ МАКЕТА НАСТРУКТУРНЫЕ БЛОКИ И МОДУЛИ
5.1Разработка модульной сетки на основе утвержденного макета
5.2Разработка руководства по стилю
6. Оптимизация контента САЙТА
7. ВЕРСТКА САЙТА
7.1Разработка физической и логической структуры сайта
7.2 Детализация выбранной концепции и разработка окончательногодизайн – макета сайта
8. ТЕСТИРОВАНИЕ САЙТА
ЗАКЛЮЧЕНИЕ
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
/>Введение
На 3 курсе в процессе обучения нам предстояло познакомитьсяс HTML (языком гипертекстовой разметки) исозданием сайтов. Во время выполнения работ преподаватели сказали нам, что итогомэтого курса будет создание собственного сайта.
Прошло лето. Начался новый учебный выпускной год. Ястала понимать, что уже в декабре мы должны сдать сайт. Выбор темы не составилдля меня труда, поскольку я очень люблю сладкое, то свой сайт я решилапосвятить кулинарии, а именно выпечке. Признаюсь честно я не кулинар, но надо счего – то начинать. Поэтому я поставила перед собой цель – создать свой сайт,все рецепты которого я попробую сделать сама. При создании web–узлая буду пользоваться знаниями по HTML.Врамках курсовой работы я должна продемонстрировать:
· знаниетеоретических основ web–технологий;
· умениепроектировать web–сайт, обосновыватьцелесообразность включения в него различных компонентов дизайна;
· уменияиспользовать графические редакторы для подготовки графического контента;
· уменияготовить текстовый контент для размещения на страницах сайта;
· уменияпроводить поиск и анализ информации.
Давайте посмотрим, что у меняполучилось.
/>1. Выявление целей создания сайта и постановкипроблемы, решаемой созданием сайта
/>1.1Определение целей создания сайта
Определение целей создания сайта, круга функций,которые он должен выполнять, необходимо для лучшего понимания истинных задач,которые собираются решать с помощью сайта его владельцы. Правильно, конкретнопоставленная цель позволяет сделать сайт эффективным инструментом длязаказчика, минимизировать затраты на создание сайта. От продуманностиформулировки этой задачи зависит эффективность работы сайта в долгосрочнойперспективе.
Основной моей целью является: созданиесайта для новичка–кулинара, своего рода дилетанта в этом деле. Для достиженияэтой цели я ставлю перед собой следующие задачи:
· научитьсясамой готовить выпечку;
· научитьдругого человека готовить выпечку;
· найтинеобычные рецепты;
· попробоватьприготовить их в жизни.
/>1.2Определение целевого сегмента потребителей
Перед началом создания сайта необходимо подумать:кто же будет моими основными потребителями? Для ответа на это вопрос я провеласегментирование рынка.
Сегментация – разделение рынка нагруппы покупателей, обладающих схожими характеристиками, с целью изучения ихреакции на тот или иной товар или услугу. Сегментирование потребительскогорынка проводится с помощью 4 методов:
1 Географический:значения не имеет.
2 Демографический:
· возрастот 20 лет;
· полмужской и женский;
· доходлюбой;
· родзанятий значения не имеет.
3 Психографический:
· социальнаяроль: домохозяйки, начинающие кулинары и любой другой человек, желающий что–нибудьиспечь;
· стильжизни значения не имеет (упорядоченный, свободный);
· темпераментзначения не имеет.
4 Поведенческий:
· статуспользователя – это может быть и не пользователь (раньше), бывший,потенциальный, первичный, регулярный пользователь.
/>
2. ВЫБОР ТЕМЫ
/>
2.1 Анализ «сайтов–аналогов» проекта
Перед тем как создавать свойсобственный сайт, я хочу посмотреть, как с этой задачей справились другиеразработчики web–узлов. Мне этонеобходимо для того, чтобы проанализировать плюсы и минусы уже существующихкулинарных сайтов и постараться сделать лучше.
Схема, по которой я проводилаанализ сайтов – аналогов:
· доменноеимя;
· навигационнаяструктура;
· посещаемостьданного ресурса;
· отображениев разных web–браузерах;
· быстротадоступа к сайту;
· актуальностьинформации, удовлетворение запросам целевой аудитории;
· наличиеуникальных заголовков для каждой страницы;
· наличиеописания страницы в метатеге description;
· областиактивных и пассивных полей;
· рекомендациипо улучшению дизайна узла.
Сайт №1Готовимдома (http://gotovim–doma.ru)
/>
Рисунок 1 – Главная страница сайта «Готовим дома»
/>
Рисунок 2 – Второстепенная страница сайта “Готовим дома”
Удачное доменное имя – содержит ключевые слова темы.
Удобная навигационная структура – сразу видна ипроста в использовании: при наведении курсора на раздел открывается списокподразделов, что экономит площадь сайта и позволяет разместить больше информацииили рекламы. Посещаемость по версии top–mail.ru – 105485 посетителей 734487визитов по состоянию на 20:00 22 сентября 2010. По версии liveinternet – 101337посетителей 702450 просмотров.
Одинаково адекватное отображение сайта в браузерахInternet Explorer и Mozilla Firefox, которые являются самыми распространеннымисреди пользователей сети.
Быстрота доступа и скорость загрузки зависит от типаи технических характеристик интернет–подключения. При подключении типа VPN искорости в 4 мб/сек страницы загружаются так же быстро, как и прочие сайты.
Страницы помещаются на экран без использованиягоризонтальной прокрутки.
Навигационное меню и главное меню отображаются на всехстраницах, что позволяет быстро и легко переходить между страницами и делаетневозможным тупиковые ссылки.
Предоставленная информация – кулинарные рецепты –соответствует запросам юзера, не ориентированного на блюда экзотических кухонь.Обыкновенные запросы контент «Готовим дома» вполне удовлетворяет.Соответствует заявленной теме.
Уникальные заголовки, служебные теги и изображенияприсутствуют, т. е. каждая страница сайта соответствует рекомендациям поисковыхслужб.
Поисковые системы ищут этот сайт по следующемуключевому слову: .
Здесь особых рекомендация по улучшению дизайна датьне могу, потому что этот вариант мне понравился: и цвета подобраны хорошо, инавигация удобная, и вообще читать приятно. Единственный минус – это названиесайта написано курсивом и издалека оно плохо читается, а также логотип не оченьотражает содержание контента (лимон в очках, можно подумать, например, что этосайт турфирмы или солярия какого – нибудь).
Сайт №2 Вкусности(http://vkusnosti.com)
/>
Рисунок 3 – Главная страница сайта «Вкусности»
/>
Рисунок 4 – Второстепеннаястраница сайта «Вкусности»
сайт декомпозиция макет контент верстка
Удачный домен – отражает сутьпредоставленной на сайте информации.
Удобная панель навигации,отображаемая на всех страницах сайта, что препятствует образованию тупиковыхссылок. Однако дизайн навигационной панели выполнен без всплывающего дереваподразделов, что не дает возможным рационализировать площадь сайта вместе сбольшими пассивными неиспользуемыми полями.
Посещаемость ресурса неизвестна попричине ограниченного доступа к статистике на top–mailи liveinternet, что неудобно с точкизрения рекламодателя.
Сайт одинаково отображается прииспользовании InternetExplorer и MozillaFirefox.
При вышеназванной скорости и типеинтернет–соединения страницы сайта загружаются быстро, в том числе по причинеотсутствия тяжелых flash–анимацией идругих мультимедийных элементов.
Информация с сайта соответствуетзаявленной теме и запросам целевой аудитории.
Присутствуют заголовки страниц и изображения,что облегчает поиск и соответствует рекомендациям поисковиков.
Поисковыесистемы ищут этот сайт по следующим ключевым словам: metaname=«description» content=«Все о еде и ее приготовлении:кулинарные рецепты, советы, диеты, обмен рецептами, как похудеть и поделитьсяопытом, рестораны Москвы с обзорами и отзывами, чат, кулинарные байки, рецептына скорую руку, коктейли, вина, история кулинарии, новогодние рецепты и многоедругое»/>
Провайдер Акадо, тарифный план «Простой»скорость входящего соединения 4 МБ/С. При данном тарифном плане страницы сайтазагружаются со скоростью 1–1,5 сек.
Разработчикам данного ресурса я бы посоветоваларазбить текст на абзацы, потому что большие тексты всегда трудно читать, а сэкрана монитора еще труднее. А так общее впечатление хорошее. Мне понравилосьто, что картинки большие и блюдо можно рассмотреть.
Сайт №3 Хорошая кухня (http://www.good–cook.ru)
/>
Рисунок 5 – Главная страница сайта «Хорошаякухня»
/>
Рисунок 6 – Второстепеннаястраница сайта «Хорошая кухня»
Название сайта и доменное имя отражают суть темы.
Навигационная панель хорошо оформлена в планекреативного и графического исполнения. С ее помощью можно перейти с любойстраницы в нужный раздел/подраздел, но на главную страницу сайта вернуться ужене получается.
Доступна информация о посещаемости только с ресурса openstat.Но и в этом случае подробная статистика закрыта паролем. В открытом доступетолько 63353 посетителей, 74478 визитов, 203856 просмотров. Принципформирование и включение/не включение роботов неизвестны. Ограниченностьинформации вызывает недоверие у рекламодателя.
Корректное отображение в двух вышеназванныхбраузерах.
Сайт и его отдельные страницы быстро загружаются илегко находятся поисковиками из–за соответствия рекомендациям поисковых систем.
Но на сайте представлено мало (по сравнению спредыдущими) кулинарных рецептов, что не совсем отвечает запросам целевойаудитории.
Поисковые системы ищутэтот сайт по следующимключевым словам:
.
Провайдер Акадо, тарифный план «Простой»скорость входящего соединения 4 МБ/С. При данном тарифном плане страницы сайтазагружаются со скоростью от 3 до 5 секунд.
Сайт №4 Kuking.net(kuking.net/4.htm)
/>
Рисунок 7 – Главная страница сайта «Kuking.net»
/>
Рисунок 8 – Второстепеннаястраница сайта «Kuking.net»
Удачный домен – отражает сутьпредоставленной на сайте информации, т.к. Kukingс англ. языка переводится «готовка».
Быстрота доступа к сайту, скорость загрузки отдельныхстраниц: провайдер Акадо, тарифный план «Простой» скорость входящегосоединения 4 МБ/С. При данном тарифном плане страницы сайта загружаются 1–1,5сек.
Навигационная панель оформлена вверху. Гиперссылкаглавной страницы выделена желтым цветом, поэтому видишь, где начало сайта.Единственное, что смущает, это очень мелкий шрифт как у навигационной панели,так и у гиперссылок в новостной ленте. Что касается цветового решения, топодбор цвета мне нравится. Сочетание коричневого и зеленого вызывают у меня ассоциациис кофе. Но опять, же есть «НО», разработчики сайта использовали 5цветов, которые в сочетании друг с другом не очень выразительны, нет такназываемой «живости красок».
Перемещаясь по сайту, шапка неменяется, меняется лишь содержание страниц. В навигационной панели при нажатии тогоили иного раздела, на него указывает желтая стрелка. Под навигационной панельюесть картинки–ссылки, которые постоянно меняются. Они подписаны таким образом,что прочитав название, хочется узнать подробнее.
Посещаемость ресурса неизвестна попричине отсутствия ссылки, указывающей на статистику. Это может отпугнутьпотенциального рекламодатели и, соответственно, лишить прибыли владельцевсайта. Как правило, даже при минимальной посещаемости сайта – в самом началеего существования – рекомендуется открывать сведения, но при этом завлекатьрекламодателя существенными скидками, как это делают только появляющиесяпечатные проекты.
Еще хочется сказать несколько слово жесткой верстке страниц сайта. Конечно, почти все из рассматриваемых намисайтов отличаются этим, но нам кажется не лишним еще раз указать на этураспространенную ошибку.
Все внутренние страница сайтасоответствуют заявленным темам: если это первые блюда, то на странице говоритсяпро супы, если это выпечка, то страница с пирожками, пиццами и т.д.
Сайт №5 1001 рецепт (http://www.1001recept.com)
/>
Рисунок 9 – Главная страница сайта «1001 рецепт»
/>
Рисунок 10 – Второстепенная страницасайта «1001 рецепт»
Последний анализируемый нами сайттак же отличается удачным доменным именем. Оно не только отражает суть сайта,но и достаточно просто запоминается. Главная страница удачно оформлена – гибкаяверстка адаптирует сайт к любым мониторам, при этом не появляетсягоризонтальная полоса прокрутки. Удобное дерево навигации отражает все разделысайта и позволяет легко серфить по страницам. Среди недостатков главнойстраницы – бедная цветовая палитра: фон отсутствует, черный и синий текст иохряные панели заголовков. Так же практически полностью отсутствуют графическиеи мультимедийные элементы – нет, не то что flash–анимаций,но даже картинка всего одна. В принципе, такое графическое решение могло быподойти для какого–нибудь строго информативного сайта чего – нибудь типаналоговой инспекции или генпрокуратуры РФ. Однако, для коммерческого сайтапосвященного кулинарии, который должен продавать свои площади под рекламу, таки возбуждать интерес к представленной продукции такое графическое решение неприемлемо. Это же замечание относится и к внутренним страницам сайта. Нарисунке мы видим голый тест без иллюстраций. Как уже говорилось выше,кулинарный коммерческий сайт – не тот случай, когда дизайн может быть принесенв жертву скорости загрузки. Следуя из вышесказанного, разберем предполагаемуюграфическую модель, на которую мы будем ориентироваться при созданиисобственного кулинарного сайта.
Во–первых, желательно использоватьпринципы гибкой верстки. Однако по причине отсутствия должного опыта, мы будемприменять жесткую верстку. Второе, будут использованы несколько мягких, «домашних»оттенков цвета, умеренное количество иллюстраций, чтобы одновременно поддерживатьлюбопытство юзера, но не перегружать страницу. В идеале, хотелось бы, чтобы прискорости входящего соединения типа VPNв 4 Мб/сек, страница загружалась в среднем за 1,5 секунды. Третье: использоватьразветвленное дерево навигации в совокупности с полнотекстовым поиском. Четвертое,выбирать шрифт и его размер исходя из его читабельности при различныхразрешениях монитора. Желательно использовать 2–3 шрифта одного семейства: 1шрифт для основного текста, 1 для заголовков и третий для текстовой составляющейлоготипа сайта. При этом графическая составляющая должна соответствоватьтематике сайта.
/>
2.2 Обоснование типа разрабатываемого web–узла
Сайты по своему назначению, по своей целевойаудитории бывают разные. Для того, чтобы определится к какому типу будетотноситься мой сайт, я предлагаю познакомиться с типами web-узлов.
Сайт визитка
Несложный сайт, содержащий общую информацию окомпании и роде, оказываемых услуг. Краткий и компактный, совсем как визитка.
Цель – представить компанию в Интернете.
Свойства:
· общееназначение сайта – предоставление общей информации пользователю;
· характеристикаи основные элементы – наличие координат, контакты ключевых людей компании, роддеятельности и предоставляемые услуги;
· количествостраниц – 10–15;
· типи характеристика дизайна – несложный деловой дизайн;
· системанавигации – максимально удобная и простая система навигации;
· частотаи необходимость обновления – обновление происходит нечасто, по мере необходимости;
· кемпроизводится обновление – поддержка либо через фирму–Исполнителя, либо с помощьюсистемы управления сайтом;
· кемявляются посетители – в основном, целевая аудитория, люди, которые ищут определенныйтовар, услугу;
· наличиебаннеров – баннеры на сайте–представительстве считаются плохим тоном;
· проводимаярекламная компания – индексация в поисковых системах, обмен ссылками сдружескими сайтами.
Задачи:
· датьпользователю общее представление о компании;
· максимальнозаинтересовать и спровоцировать покупку или иное действие;
· привлечениедополнительных клиентов;
· обеспечитьзапоминаемость у потенциальных клиентов и посетителей.
Промо–сайты
Сайт, являющийся прямой рекламой отдельно взятоготовара или события.
Цель – представить продукт, явление, действие дляпользователей Интернет.
Свойства:
· общееназначение сайта – проведение рекламной компании, привлечение общественноговнимания;
· характеристикаи основные элементы – яркий и динамичный сайт, как правило, с использованиемflash–технологий, содержит информацию о продукте, явлении, действии, услугах.Координаты или информация о путях их получения;
· количествостраниц – 10–15;
· типи характеристика дизайна – яркий рекламный дизайн с элементами flash, запоминающийсяи бросающийся в глаза;
· системанавигации – самая простая;
· частотаи необходимость обновления – промо–сайты, в основном, создается на периодрекламы того или иного продукта, товара или услуги. Как правило, не нуждается вобновлении, исключением может стать внесение каких–либо изменений в информации;
· кемпроизводится обновление – в основном, компанией–разработчиком;
· кемявляются посетители – по большей степени, целевая аудитория;
· наличиебаннеров – возможно;
· проводимаярекламная компания – промо–сайты сам, по сути, является рекламной компанией, восновном отображается на основном сайте компании и индексируется в поисковиках.
Задачи:
· проинформироватьпользователя об услугах, действии или явлении;
· привлечьновых клиентов;
· заинтересоватьобщественность;
· повыситьизвестность и популярность компании.
Электронный магазин
Сайт, предназначен для продажи товаров, услуг черезИнтернет. Как правило, содержит каталог продукции, прайс–листы, системузаказов.
Цель – представить компанию в Интернете, продажитовара он–лайн, сервис и поддержка клиентов.
Свойства:
· общееназначение сайта – предоставление общей информации пользователю;
· характеристикаи основные элементы – система заказа, подробное описание условий заказа, атакже описание товара, как правило, в системе каталога, возможно наличиекабинета пользователя, хорошо организованная система поиска;
· количествостраниц – от 100;
· типи характеристика дизайна – деловой дизайн;
· системанавигации – максимально удобная и простая система навигации;
· частотаи необходимость обновления – частое обновление;
· кемпроизводится обновление – как правило, обеспечивается усилиями командой людей –группой поддержки;
· кемявляются посетители – как целевая аудитория, так и потенциальные клиенты;
· наличиебаннеров – баненная система;
· проводимаярекламная компания – широко развита рекламная компания, возможно использованиеуслуг web–студий по продвижению и раскрутке сайтов.
Задачи:
· датьпользователю общее представление о компании;
· максимальнозаинтересовать и спровоцировать покупку или иное действие;
· привлечениедополнительных клиентов;
· обеспечитьзапоминаемость у потенциальных клиентов и посетителей;
· легкостьпо весу, чтобы у посетителя не было проблем с загружаемостью.
Информационный сайт
Сайт, который содержит исчерпывающую информацию понекоторой предметной области. Сайты этого типа, как правило, содержат множествостатей различных авторов, а также такие сервисы как: опросы, голосование,рассылки. В основном, некоммерческого типа.
Цель – представить некую информацию в Интернете,сервис и поддержка клиентов, оказание информационных услуг.
Свойства:
· общееназначение сайта – предоставление подробной, исчерпывающей информации пользователю;
· характеристикаи основные элементы – объемное количество сервисов: опросы, голосование, чат,призванные сделать сайт интерактивным;
· количествостраниц – варьируется в зависимости от наполнения, как правило, от 50 страниц;
· типи характеристика дизайна – в зависимости от специфики информационного наполнения,может быть как креативным, так и строго деловым;
· системанавигации – сложная система навигации;
· частотаи необходимость обновления – частое обновление;
· кемпроизводится обновление – поддержка обеспечивается дополнительными усилиями,как правило, командой людей;
· кемявляются посетители – целевая аудитория, случайные посетители;
· наличиебаннеров – баненная система обеспечивает финансовую поддержку сайта;
· проводимаярекламная компания – в зависимости от задач заказчика.
Задачи:
· датьпользователю максимальную и исчерпывающую информацию;
· обеспечитьзапоминаемость у потенциальных клиентов и посетителей;
· легкостьпо весу, чтобы у посетителя не было проблем с загружаемостью;
· оперативноеобновление, чтобы обеспечить интерес посетителей.
Корпоративное представительство
Такого типа сайты, как правило, автоматизируютдеятельность компании. Может нести такие функции как: электронный магазин,систему заказов, коммуникационные сервисы, электронный обмен документами, on–lineпереговоры и т.д.
Цель: автоматизировать деятельность предприятия, атакже представить его на рынке в Интернете.
Свойства:
· общееназначение сайта – обслуживание пользователя, клиента, рабочего персонала компании;
· характеристикаи основные элементы – совмещает в себе магазин, информационный сайт и системууправления предприятием, а также сайт–визитку, как правило, есть кабинетпользователя, объемное количество сервисов, предназначенных для решения задачкомпании;
· количествостраниц – варьируется в зависимости от наполнения, как правило, от 50 страниц;
· типи характеристика дизайна – деловой, но много зависит от специфики компании,возможны креативным или нестандартные элементы, главной особенностью являетсяотражение фирменного стиля компании;
· системанавигации – достаточно сложная;
· частотаи необходимость обновления – обновление по мере необходимости;
· кемпроизводится обновление – поддержка обеспечивается дополнительными усилиями,как правило, командой людей;
· кемявляются посетители – целевая аудитория, случайные посетители, сотрудники компании;
· наличиебаннеров – баннеры на корпоративном сайте считаются плохим тоном;
· проводимаярекламная компания – рекламная компания в зависимости от задач заказчика.
Задачи:
· обеспечитьавтоматизацию предприятия;
· предоставлениеинформационных услуг;
· сервисноеобслуживание клиентов и посетителей;
· учетбухгалтерии, заказов, изменений через web–ресурс;
· обеспечитьзапоминаемость у потенциальных клиентов и посетителей.
Портал
Это очень большой web–ресурс,который предназначен для формирования некоего сообщества людей с определеннымиинтересами. Портал может объединять множество различных сервисов, предоставлятьклиентам возможность покупки товаров, партнерам – обмен информацией.
Цель – соединение всех типов сайта для оказания какможно большего количества услуг и поддержки.
Свойства:
· общееназначение сайта – поддержка клиентов, оказание различного рода услуг, представлениекомпании в интернете;
· характеристикаи основные элементы – большое количество сервисов: опросы, форумы, голосование,чат, он–лайн операторы для оказания консультационной помощи, большое количествоинформации, служба поддержки. Может являться как коммерческим, так и некоммерческим проектом;
· количествостраниц – от 100;
· типи характеристика дизайна – самый разнообразный, в зависимости от специфики порталаи политики компании;
· системанавигации – сложная;
· частотаи необходимость обновления – обновление происходит по разделам или какой–тонебольшой информации, но системно и регулярно;
· кемпроизводится обновление – службой поддержки ресурса;
· кемявляются посетители – любой пользователь;
· наличиебаннеров – баненная система;
· проводимаярекламная компания – в зависимости от посещаемости ресурса, может какпроводиться, так и не проводиться.
Задачи:
· представитькомпанию в Интернете;
· датьпользователю максимальную и исчерпывающую информацию;
· обеспечениезапоминаемость у потенциальных клиентов и посетителей;
· обеспечениесервисной поддержки;
· обеспечитьзаинтересованность посетителей;
· постоянноеразвитие ресурса;
· дополнительныйзаработок на предоставлении рекламных мест другим компаниям (при условиивысокой посещаемости ресурса).
Система управления предприятием
Сайт, с интегрированной корпоративной информационнойсистемой предприятия.
Цель – представить компанию Интернете, сервис иподдержка клиентов, оказание информационных услуг или любых других услуг.
Свойства:
· общееназначение сайта – назначением может являться любым из выше перечисленных типовсайта, но главное особенностью являться наличие системы ведения бухгалтерии,например, через сайт;
· характеристикаи основные элементы – наличие встроенной системы управления предприятием в web–ресурс;
· количествостраниц – любое;
· типи характеристика дизайна – любой;
· системанавигации – любая;
· частотаи необходимость обновления – любая;
· кемпроизводится обновление – по желанию заказчика;
· кемявляются посетители – помимо случайных посетителей и целевой аудитории, сотрудникикомпании;
· наличиебаннеров – не рекомендуется;
· проводимаярекламная компания – любая.
Задачи:
· учеттовара, услуг, заказов, действий пользователей через web–ресурс.[1]
На основе вышеизложенной характеристики web–ресурсов я делаю вывод, что сайт, создаваемый мной по теме кулинарии, будетотноситься к информационным, т.к. цель такого сайта – представить некуюинформацию, в моем случае информация по выпечке. По своему типу он будетнекоммерческий, потому что за свои представленные на страницах сайта рецептыникаких денег я брать не буду. Мой сайт рассчитан на дилетантов кулинарногодела. Я просто хочу научиться выпекать сама и научить другого человека. Поэтомуя буду предлагать несложные рецепты, которые сначала сама дома буду пробовать,а потом выкладывать фотографии результатов и сам рецепт. Каждый рецепт будетсопровожден моим комментарием и советом, как же лучше все это сделать.
/>3.СОЗДАНИЕ НАБРОСКА САЙТА
/>
3.1 Перечень требований по содержимому и функциям Web–сайта
Таблица 1 – Требования к содержимомуНаименование содержимого Описание Тип содержимого Формат содержимого Автор Автор приветствует своего посетителя Текст Документ Microsoft Word Изображение автора Фотография автора Изображение Jpeg–файл Изображение хлеба Фотография корзины с хлебом Изображение Jpeg–фаил Виды теста Как сделать дома песочное, бисквитное, дрожжевое и слоеное тесто. Текст Документ Microsoft Word Картинки песочного, бисквитного, дрожжевого и слоеного теста Изображения примеров теста Изображения Jpeg–фаил, png–фаил Выпечка из: песочного, бисквитного, дрожжевого и слоеного теста В каждом разделе по 6 гиперссылок Текст Документ Microsoft Word Рецепты из песочного теста Описание приготовления 6 рецептов Текст Документ Microsoft Word Рецепты из бисквитного теста Описание приготовления 6 рецептов Текст Документ Microsoft Word Картинка следов Изображение следов Текст Документ Microsoft Word Рецепты из дрожжевого теста Описание приготовления 6 рецептов Текст Документ Microsoft Word Рецепты из слоеного теста Описание приготовления 6 рецептов Текст Документ Microsoft Word Рецепт дня Описание рубрики Текст Документ Microsoft Word Изображение блюда дня Изображение того блюда, которое будет главным на тот или иной день года Изображение Jpeg–фаил
Технические требования
Сайт будет реализован при помощи языка HTML – (от англ.Hyper Text Markup Language – «язык разметки гипертекста») –стандартный язык разметки документов во Всемирной паутине. Большинство web–страниц создаютсяпри помощи языка HTML. Язык HTML интерпретируется браузером и отображается ввиде документа, в удобной для человека форме. Также используются каскадныестили таблиц – css–технологияописания внешнего вида документа, написанного языком разметки. Web–страница,сверстанная на css весит гораздоменьше и быстрее загружается в браузерах. Неудивительно, ведь все данныепараметров отображения документа заносятся в отдельный css–файл. За счёт этогодокумент становится очень легким и пользователь даже может не заметить, какбыстро загрузится страничка. За счёт того, что web–страницастановится очень легкой и быстрозагружаемой, она гораздо быстрее индексируетсяпоисковыми системами. Кроме того, сайт или блог, сделанный на css–вёрсткегораздо легче и удобней оптимизировать под поисковые машины и продвинуть его вТОП. [4,5]
Требования к внешнему виду
Рынок компьютерной техники предлагает потребителямсамые разные варианты отображающих устройств – мониторов. От мониторов нетбуков(около 12´) до мониторов с диагональю свыше 21´. Поэтому,невозможно предугадать, какой техникой будет «вооружен» нашпредполагаемый посетитель. Предлагается принять в качестве ориентируемогосреднее значение: монитор с диагональю 17´ (1024×768 пикселей),разрешением 72 px/in и ориентироваться при верстке страниц сайта на этизначения. [2]
Требования к функциям сайта
Наш сайт посвящен рецептам приготовления выпечки вдомашних условиях. Соответственно, он выполняет информационную функцию – даетпредставителям целевой аудиторию информацию о способах приготовления десертныхмучных блюд дома. Владельцы сайта с целью получения прибыли могут использоватьплощади сайта для размещения рекламы компаний, занимающихся ритэйлом ингредиентов,различных полуфабрикатов для выпечки и других товаров и услуг, ядро целевойаудитории которых совпадает с ядром целевой аудитории данного сайта.
/>
3.2 Разработка рабочего наброска сайта
Группировка элементов
Я хочу сгруппировать элементы содержимого в разделы.
Раздел 1. Выпечка из песочного теста.
Раздел 2. Выпечка из бисквитного теста.
Раздел 3. Выпечка из дрожжевого теста.
Раздел 4. Выпечка из слоеного теста.
Раздел 5. Блюдо дня.
В каждой тематическом разделе будут приводиться рецепты изтого или иного теста, а также рецепт самого теста.
Блюдо дня особенная рубрика, в которую будут попадатьрецепты наиболее интересные автору сайта.
Ограничение количества уровней в каждом разделе
Моя навигационная панель состоит из 6 кнопок: Главная,Выпечка из песочного теста, Выпечка из бисквитного теста, выпечка из дрожжевоготеста, Выпечка из слоеного теста и Рецепт дня.
В каждом разделе выпечки будет по 6 гиперссылок, которыепозволят выбрать пользователю наиболее понравившийся рецепт. Этот рецепт откроетсяв новом окне.
Приоритет для каждой группы. Пять звезд будутсоответствовать наивысшему приоритету группы, четыре – группе с меньшимприоритетом и так далее
Главная ««««
Выпечка из песочного теста «««««
Выпечка из бисквитного теста «««««
Выпечка из дрожжевого теста «««««
Выпечка из слоеного теста «««««
Блюдо дня «««
/>
3.3 Создание карты сайта
Набросок, который я создала для web–сайта,можно преобразовать непосредственно в карту сайта.
/>
Рисунок 11 – Блок – схема сайта
/>4.РАЗРАБОТКА НАБОРОВ МАКЕТОВ СТРАНИЦ
/>/>/>/>/>/>
Макет – это набор правил, покоторым располагаются элементы страницы сайта. Таким образом, макет – этооснова верстки, – тот каркас, на котором собираются элементы дизайна иинформационное наполнение страницы.
Зачем нужен макет страницсайта? Как один из основополагающих элементов стиля, макет создает в документеединство, ощущение неделимого образного ряда. То есть макет упорядочиваетдокумент, делает его читаемым и более удобным для восприятия.
Прежде чем начатьсоздание макета, необходимо определить, макет чего вы собираетесь делать, чтосводиться к определению количества принципиально различных страниц на вашембудущем ресурсе. Все страницы создаваемого сайта должны быть выполнены в единомстиле, разве что компоновка текстовой области у главной страницы может бытьчуть более сложной, чем у внутренних страниц.
Моя главная задача состоит в том, чтобы продуматьдизайн начальнойстраницы и страниц уровня, который позволяет связать воедино всестраницы сайта и с максимальной эффективностью использовать возможности Internet.[2]
/>
4.1 Определение функциональных зон страниц сайта
Чтобы говорит о функциональных зонах сайта,предлагаю сначала определится с понятием контент–зоны сайта.
Что такое контент?
Контент сайта – это информацияи изображения, которые ищет посетитель сайта.
Контент (от англ. content –содержание). Под «контентом» в широком смысле понимают собственнонаполнение сайта. Контент сайта соотносится с дизайном, как содержание сформой.
В более узком смысле слова контент сайта – этоматериалы, размещенные на нем: в основном тексты, а также картинки и музыка.
Для чего же нужно разбивать сайт на контент–зоны?
Каждая контент–зона выполняет свою роль:
· логотип– предоставляет визуальную информацию;
· названиесайта – это собственно имя ресурса и его основное обозначение деятельности;
· менюнавигации – позволяет пользователю перемещаться по WEB–сайту;
· полеввода информации – это главная текстовая(информационная)
· часть,раскрывающая суть темы;
· графика– позволяет визуально представить излагаемый материал;
· рейтинг– помогает установить место, занимаемое в списке сайтов – аналогов;
· координаты– это информация о компании–разработчике данного ресурса.
Структура страницы должна состоять из элементов,которые должны присутствовать на всех страницах сайта: меню навигации, названиятемы, заголовка, поля ввода информации (текстовой, графической), контактнойинформации.
Представляю свой вариант структуры страниц сайта.
/>
Рисунок 12 – Схема размещения элементов страницы–шаблонаглавной страницы
/>
Рисунок 13 – Схема размещения элементов страницы–шаблонавторостепенной страницы
/>/>/>/>/>/>/>/>
4.2 Нахождение идеи пластического решения,определение колорита страниц
Цветовые схемы при создании web–сайта
/>/>Теперь я хочу поговорить о цвете. Символикацвета имеет давнюю историю. Люди с незапамятных времен придавали особоезначение чтению «языка красок», что нашло отражение в древних мифах,народных преданиях, сказках, различных религиозных и мистических учениях. Так,в астрологии, лучи Солнца, разложенные в спектр и дающие 7 цветов,соответствовали 7 основным планетам: красный – цвет Марса, синий – цвет Венеры,желтый – цвет Меркурия, зеленый – цвет Сатурна, пурпурный – цвет Юпитера, оранжевый– цвет Солнца, фиолетовый – цвет Луны. При этом краски символизировали нетолько планеты и их влияние, но и социальное положение людей, их различныепсихологические состояния. Это проявлялось в подборе одежды определенныхцветов, народных поговорках, обрядах и т.д. У разных народов сложиласьопределенная символика красок, дошедшая до наших дней.
Концепция цвета была выработана Гетте: все темныецвета успокаивают, светлые возбуждают. Из тьмы выходит первым синий цвет, изсвета – желтый. Это основные цвета, из них идут остальные. Цвета могутоказывать физическое (очень мимолетное) и психическое (при долгом взгляде наопределенный предмет) воздействие.
Цвета воспринимаются через ассоциацию, например –синий – холодный. От зрения восприятие цвета идет на органы и доходит дотактильных ощущений.
Цвет оказывает влияние на кровяное давление – оноповышается от синего к зеленому, к желтому и красному (в совокупности и поотдельности), обратный процесс при обратном предъявлении.
Надо обращать внимание на форму – одни цветапоглощают форму (желтый, белый), другие ею поглощаются (синий, черный).
Все цвета делятся по типу движения:
· эксцентрические(желтый);
· концентрические(синий квадрат вызывает тревогу).
Каждый цвет имеет множество значений. Существует взаимодействиецвета и времени – каждая эпоха выбирает свой цвет: серый – пуританство и послевоеннаяБритания, Древний Рим – пурпур, как символ власти. Очень большое разнообразиецветов – нация процветает.
Существует также школа исцеления с помощью цвета.Впервые над этим задумались древние греки: проходя через окно храма цветразбивается на спектр, таким образом, человек вбирал тот цвет, который хотел. ВДревнем Китае на солнце лежали в красном шелке – излечение следов оспы. В 18веке в Европе были распространены цветные витражи.
Если человек устал от одного цвета, то надопосмотреть на противоположный, то есть состояние меняется на противоположное.Красный всегда влияет на физическое состояние, желтый – на умственное, аголубой – на эмоции. Соответственно влияют и их оттенки.
Предпочитаемый цвет дает представление о сиюминутномсостоянии, отвергаемый цвет дает информацию о причинах, которые побуждаютсовершать ошибки. Например, голубой любят люди, предпочитающие отдохнуть, и нелюбят трудоголики. [6]
Мой сайт будет выполнен в теплой гамме.
Фон светло – песочного, морковного цвета. Этотцвет отвечает за удовлетворение различных способностей, постоянно держит втонусе; обладает всеми возможностями красного, но без агрессии. Его силадействует очень мягко. Воздействие, оказываемое им, является теплым, радостными возбуждающим.
Морковный цвет – это цвет теплоты, блаженства,накала, но в тоже время – мягкого блеска заходящего солнца. Он всегда радуетглаз и способствует хорошему настроению. Практически всегда имеет благотворноевлияние, т.к. показывает радостные стороны жизни.
/>
Рисунок 14 – Фон сайта
Кнопки панели навигации выполнены желтым цветом,текст красным.
Желтый – олицетворяет ум, влияние доминанта. Онсамый гибкий, везде проникает, помогает преодолеть трудности, способствуетконцентрации внимания.
Красный – олицетворяет могущество, прорыв, волю кпобеде, он всегда добивается того, чего хочет. Он всегда в движении, всегдаисточник энергии. Красный цвет любит быть первым.
Сочетание красно–желтого выражает импульсивность,т.е. моему посетителю захочется скорее «пробежаться» по всем ссылкам.
/>
Рисунок 15 – Кнопки навигации сайта
Цвет текста – красно коричневый. Красно – коричневыйотличается спокойной уверенностью в себе и энтузиазмом, которым так полны моипосетители!
/>
Рисунок 16 – Цвет текста на фоне
/>4.3Разработка композиционного решения страниц сайта
/>/>
Вот мы и определились с идеей пластического ицветового решения страниц. Начинаем работать над общей композицией главной ивнутренней страниц.
Все дизайнерские элементыв композиции никогда не бывают сами по себе. Они находятся в определенномвзаимодействии друг с другом, подчинены некой единой идее. И вот для того,чтобы вся композиция смотрелась гармонично и естественно, и не разваливалась наотдельные составляющие, лучше всего следовать базовым принципам дизайна.
Возникает вопрос, а можно ли научиться принципам дизайна. Мне кажется,что конкретных упражнений, для того чтобы научиться этим принципам, нет. Всеэти навыки уже заложены в наше восприятие. Поскольку каждый из нас интуитивночувствует гармоничная композиция, или нет.
Скорее все ниже перечисленные принципы нужно учитывать и соблюдать припостроении композиции. Нужно уметь видеть их в чужих работах и уметь описатьсобственную работу, исходя из этих принципов. И еще один момент, говорить обэтих принципах легче всего, когда они нарушены. Потому что, когда они соблюдены– все и так смотрится гармонично.
1 Баланс – эторавновесие взаимодействующих или противоположных сил в композиции. В такойкомпозиции не возникает ощущения, что какая–то ее часть доминирует над всемостальным. Баланса можно достичь с помощью правильного размещения объектов,размеров объекта и по цвету. Баланс может быть симметричным (верхний рисунок),асимметричным (нижний рисунок), радиальным (объекты расположены кругом ирасходятся из одной точки).
/>
Рисунок 17 — Баланс в композиции
/>
Рисунок 18 — Баланс в композиции
2 Контраст – этовзаимодействие противоположных элементов композиции, таких как цвет, размер,текстура и т.д. Примеры контраста: большой и маленький, шероховатый и гладкий,толстый и тонкий, черный и белый.
/>
Рисунок 19 — Контраст в композиции
3. Значимость и подчиненность. Этот принцип предполагает выделение, такназываемого, центра интереса, на котором предполагается сосредоточить вниманиезрителя. Объекты должны находиться в иерархии по значимости и подчиненности.Если все объекты будут иметь одинаковую значимость, то внимание пользователярассеивается.
/>
Рисунок 20 — Значимость и подчиненность в композиции
4 Направлениевнимания. По сути, это управление движением взгляда зрителя во время егоперемещения по сайту, чтобы привлечь его внимание к значимым элементам.
/>
Рисунок 21 — Направление внимания в композиции
5 Пропорция – этоотношение отдельной части ко всему объекту, а также соотношение отдельныхчастей друг с другом. В данном примере показано «Золотое сечение».
/>
Рисунок 22 — Пропорции в композиции
6 Масштаб – этореальный, видимый размер объекта, рассматриваемый в отношении других предметов,людей, окружающей среды.
/>
Рисунок 23 — Масштаб в композиции
7 Предполагаетповторение элементов дизайна для достижения определенной цели, например, чтобызадать направление взгляда или для непрерывности внимания.
/>
Рисунок 24 — Повторение элементов в композиции
8. Единство в разнообразии – предполагает сочетание разнообразныхэлементов композиции в целостную единую структуру, подчиненную единой концепции.
/>
Рисунок 25 — Единство в разнообразии в композиции
Я начну с набросков главной и внутренней страниц в монохромном режиме.
/>
Рисунок 26– Главная страница в монохромном режиме
/>
Рисунок 27– Внутренняя страница в монохромном режиме
Если в монохромном режимеэскизы выглядят хорошо, т. е. тексты и элементы читаемы и узнаваемы, то теперьпосмотрим, как наши эскизы страниц будут выглядеть в цвете.
/>
Рисунок 28– Главная страница в цветном варианте
/>
Рисунок 29– Внутренняя страница в цвете
Я определилась с цветами сайта, пора поговорить обидеи решения основных зон страниц сайта.
/>/>
4.4 Нахождение идеи решения основных зон страницсайта
Завершив предварительный этап создания макета, можноприступать к детализации содержания основных контент–зон.
Макет страницы содержитследующие элементы:
· схемуглобальной навигации (элементы навигации, которые содержатся на всех страницахсайта);
· текстовыеблоки, рисунки и элементы мультимедиа, их относительное расположение настраницах сайта;
· всеэлементы навигации, а также заголовки основных элементов содержимого;
· интерактивныйдизайн (как пользователи будут работать с элементами на странице);
· основныекомпоненты текстовой части.
Требования к представлениюэлементов макета страницы:
· всеэлементы навигации, а также заголовки основных элементов содержимогосопровождаются разборчивыми подписями, удобными для чтения;
· основныекомпоненты текстовой части могут обозначаться на макете />страницылатинским (наполняющим) тестом, который имитирует формат действительноготекста;
· всеэлементы графического содержимого обозначаются на макете в виде прямоугольников/>.
После того, как мы определились с тем, какиеэлементы должен содержать макет, попробуем его собрать.
/>
Рисунок 30– Эскизглавной страницы с решением основных контент – зон
На своей главной страничке я хочу поприветствовать своегопосетителя и предложить ему вместе со мной, таким же новичком в кулинарии, приготовитьинтересные блюда, при этом необязательно хорошо уметь готовить. Мы будемучиться вместе.
Графической зоной будет моя фотография и фотографиятого, что мы попробуем приготовить.
/>
Рисунок 31– Эскизвнутренней страницы с решением основных контент – зон
На внутренней странице появляется такая контент –зона, как название рецепта. Основной частью будет являться сам рецептприготовления блюда.
Графический элемент– фотография того, что должнополучиться в конце.
Для удобства передвижения по сайту внизу показано,на какой странице внутри рубрики находится пользователь (рубрикой считаетсякаждая кнопка из панели навигации). Также предлагается ссылка на главнуюстраницу.
/>5.ДЕКОМПОЗИЦИЯ МАКЕТА НА СТРУКТУРНЫЕ БЛОКИ И МОДУЛИ
/>/>
5.1 Разработка модульной сеткина основе утвержденного макета
Модульная сеткапредставляет собой набор невидимых направляющих, вдоль которых располагаютсяэлементы web–страницы. Это облегчает размещениеданных в документе, обеспечивает визуальную связь между отдельными блоками исохраняет преемственность дизайна при переходе от одной страницы к другой.
Web–страница фактически рассматриваетсякак набор прямоугольных блоков, которые выкладываются в определенном порядке.При этом, как правило, данные располагаются по колонкам, поэтому при верстке применяюттермин одно–, двух–, трехколонный макет и т.д.
Модульныесетки помогают упростить верстку сайта, потому что весь материал разбивают по отдельнымблокам, которые потом выравнивают по невидимым направляющим линиям. И хотя этиблоки и взаимосвязаны между собой, но обычно позволяют независимоередактирование данных, что в свою очередь упрощает оформление.
Перед созданием web–страницы в HTML–редакторе, удобнеесделать набросок на бумаге. Это сократит время на выбор типа модульной сетки,которая в дальнейшем будет применяться. В зависимости от количества материала ицелей сайта применяют различные типы модульной сетки (одно–, двух, трех илимногоколонную). Необходимо помнить, чем больше колонок, тем больше возможностейпо изменению вида дизайна, но и сложнее верстка такого макета. Мой вариант будетпредставлен в виде двухколонной модульной сетки.
/>
Рисунок 32– Пример двухколонной модульной сетки
/>
Рисунок 33 – Двухколонная модульная сетка внутреннейстраницы моего сайта
/>
5.2 Разработка руководства по стилю
В данном разделе я указала в виде таблицыруководство по стилю, которое включает в себя следующие элементы:
· заголовкии подзаголовки;
· основнойтекст;
· ссылки;
· форматированиетаблиц;
· цветфона;
· размерграфических элементов.
Таблица 2 – Руководствопо стилю графического и HTML–текстадля Web–сайтаStyle (Стиль) Example Font settings Headlines (Заголовок) Приготовление песочного теста дома Графический текст. Cambria Bold Курсив, 8 pt, Color# 9f193e Subheads (Подзаголовок) Состав: HTML текст. Arial, size 14 pt, Color# 9f193e Body text
· мука – 260 г,
· сливочное масло – 150 г,
· 1 яичный желток или целое яйцо,
· сметана – 1 столовая ложка,
· сахар – 2–3 столовых ложки,
· ванильный сахар – 1 чайная ложка,
· щепотка соли,
· лимонная цедра – 1 чайная ложка (по желанию) HTML текст. Arial, size 14 pt, Color# 9f193e Background(фон)
/> Цвет фона: графический текст IMG=” fon.jpg” Image 1
/>
width:235px;
height:314px; Image 2
/>
Header: width:958px;
height:320px; Image 3
/>
width: 314px;
height: 209px; Image 4
/>
width:495px;
height:324 px; Image 5
/>
width:500 px;
height:375 px; Image 6
/>
width:450 px;
height:403 px; Image 7
/>
width:515 px;
height:400px; Image 8
/>
width: 448px;
height:336 px; Image 9
/>
width:410px;
height:589 px; Image 10
/>
width:400 px;
height:220 px; Image 11
/>
width:640px;
height:480px; Image 13
/>
width:448 px;
height:336px; Image 14
/>
width:478 px;
height:594px; Image 15
/>
width:314 px;
height:10px; Image 16
/>
width:314 px;
height:10px; Image 17
/>
width:160 px;
height:76px; Image 18
/>
width:160 px;
height:33px; Image 19
/>
width:448 px;
height:15px;
6.ОПТИМИЗАЦИЯ КОНТЕНТА САЙТА
В данной главе ярассмотрю оптимизацию текстового и графического контента моего сайта, поэтомуоптимизацию сайта я условно разделю на две части: текстовая и графическаяоптимизация.
Текстовая оптимизация – свойтекст я брала из кулинарных книг. Особенных каких–либо изменений не вносила.При подготовке текста к верстке я убрала слишком непонятные слова, которыемогут встретиться неопытному кулинару, и разбила его на абзацы, чтобы онвоспринимался легче. Создала удобнуюнавигацию для простоты перемещения по страницам. Внутри каждого раздела естьсвоя уникальная навигация, представленная в виде полоски со страницами. Этопомогает посетителю понять, где именно на сайте он находится. Названиенавигационных кнопок отражают суть раздела. Для примера, предлагаюпосмотреть на текст «до» и «после» оптимизации.
Исходныйтекст:
Одна из задач Направления«Медиа–Холдинг» – это продвижениесайтов Системы в Интернет, опыт работы в этой области – 3 года.Мы готовы предложить Структурам и Направлениям Системы только качественные инедорогие услуги в этом вопросе. Сотрудничая с нами, вы можете рассчитывать наувеличение переходов с поисковиков на продвигаемый вами сайт только техпосетителей, кто реально заинтересован в реализации проектов Системы иподключении к ним. Затраты на продвижениесайтов начинают окупать себя уже со второго месяцараскрутки!
Текст после оптимизации:
Направление «Медиа–Холдинг» занимается продвижением сайтов уже 3 года.Зарекомендовало себя на рынке поисковойоптимизации сайтовСистемы в качестве профессионала. Мы готовы предложить Структурам иНаправлениям Системы только качественные и недорогие услуги по оптимизации сайтов и их дальнейшей раскрутке впоисковых системах. Поручая нам раскрутку вашегосайта, вы можете рассчитывать какна увеличение целевых переходов заинтересованных пользователей с поисковых систем, так и на быструюокупаемость затрат, на оптимизацию ипродвижение сайта.
После оптимизации осталась суть, а все лишние обороты,которые нагружают текст, убраны.
Графическая оптимизация – всеизображения подобраны по своей тематике. [3] Если это, например, песочноетесто, то и фотографии соответствующие.
/>
Рисунок 34 –Пример оптимизации изображения
Все изображения на сайте представлены в цветовоймодели RGB, изображения формата JPEGи PNG.
В зависимости отназначения изображения у меня вышли следующие эмпирические размеры: большиеизображения – 410px × 589px (367kb), средние изображения – 448 px × 336 px (91kb), основное изображение – 235px ×314px (30kb), кнопки навигации – 314px × 31 px (11kb), фоновое изображение – 960 px × 595 px (18kb).
/>7.ВЕРСТКА САЙТА
/>7.1Разработка физической и логической структуры сайта
В данной главе я рассмотрю логическую и физическуюструктуры сайта, для того чтобы по созданной мной таблицей было наглядно видночто где находится.
Таблица 3 – Оформлениедокументированного проектаИмя файла Директория Описание index.html /www Стартовая страница сайта pesochnoe_testo.html /pesochnoe_testo Стартовая страница «Песочное тесто» biskvitnoe_testo.html / biskvitnoe_testo Стартовая страница раздела «Бисквитное тесто» drozhzhevoe_testo.html / drozhzhevoe_testo Стартовая страница раздела «Дрожжевое тесто» sloenoe_testo.html / sloenoe_testo Стартовая страница раздела «Слоеное тесто» recept_dnya.html / recept_dnya Стартовая страница раздела «Рецепт дня»
По данной таблице я составила физическую илогическую структуру сайта.
/>
Рисунок 35 – Логическая структурасайта
/>
Рисунок 36 – Физическая структура сайта
/>
7.2 Детализация выбранной концепции и разработкаокончательного дизайн – макета сайта
/>Вот мы и добрались до самого интересного! Наконец–то можноначинать верстать сайт. И начну, конечно же, я с главной страницы.
/>
Рисунок 37 Главнаястраница
/>
Рисунок 38 Приготовлениепесочного теста
/>
Рисунок 39 Торт «Песочный»
/>
Рисунок 40 Бисквитноетесто
/>
Рисунок 41 Торт «Творожныйбисквит»
/>
Рисунок 42 Дрожжевоетесто
/>
Рисунок 43 Пицца «Домашняя»
/>
Рисунок 44 Слоеное тесто
/>
Рисунок 45 Слоеныепирожки с яблоками
/>
Рисунок 46 Чебуреки «Аппетитные»
/>8. ТЕСТИРОВАНИЕ САЙТА
Я опросила небольшую часть своейцелевой аудитории и получила следующие отзывы:
· балансцвета, графики и текста;
· интересноеинформационное наполнение;
· сайтхорош для размещения модульной рекламы заинтересованных компаний;
· удобнаянавигация, можно найти все, что хочется;
· можноузнать много интересного, вся информация с сайта пригодилась дома;
· сайтисполнен на хорошем уровне. Считаю, что он будет пользоваться популярностью уцелевой аудитории, также будет иметь успех от рекламы.
/>ЗАКЛЮЧЕНИЕ
Работа подошла к концу. Я создаласвой первый сайт! Чувство просто неописуемое, я смотрю на свое творчество исама не верю: это сделала я! Конечно, все не ограничивается только этойработой, нужно совершенствоваться. Но общее впечатление все, же хорошее. Янашла уникальные и несложные рецепты. Приготовила, думаю, получалось неплохо,если даже местами что-то было не так, то «я не волшебник, я только учусь!»А что касается знаний по HTML,это большой «клад», который будет, возможно, мне помогать по родумоей профессиональной деятельности, я ведь рекламист! Ведь сейчаспрослеживается тенденция роста активности продаж через интернет. Собственный сайткомпании — это ее лицо и именно по нему будут судить потенциальные клиенты,стоит им обращаться сюда или нет.
Поэтому давайте создаватькачественные сайты.
/>СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
1 Дж.Гарретт Веб-дизайн. Элементы опыта взаимодействия. — М.: Символ-Плюс, 2008.-192с.
2 СтивКруг Веб — дизайн. Не заставляйте меня думать. — С.Пб.: ИМВО, 2005. — 52с.
3 Н.В. Евдокимов Основы контентной оптимизации. — М.: Вильямс, 2007. — 30с.
4 В.Мержевич HTML и CSSна примерах. — С.Пб.: БХВ-Петербург, 2005. — 16с.
5 А.Матросов, А. Сергеев, М. Чаунин HTML4.0. — С.Пб.: БХВ-Петербург, 2003. — 114с.
6 С.Михайлов, Л. Кулеев Основы дизайна. — К.: Новое знание, 1999. — 106с.
7 www.css.manual.ru
8 www.html.manual.ru