Разработка web-сайта фотографа

Министерство образования и науки Российской Федерации

Уральский государственный колледж имени И.И. Ползунова

КП.032401.13.ПЗ

РАЗРАБОТКА WEB-САЙТА ФОТОГРАФА

Пояснительная записка

Руководитель                        Разработала

___________/И.В. Гусаревич/              _________/А.О. Бабинова /

Екатеринбург 2010

Содержание

Введение                            5

1 Выявление целей создания сайта и постановка проблемы, решаемой с созданием сайта              6

1.1 Определение целей сайта              6

1.2 Определение целевого сегмента потребителей              7

2 Выбор темы                            9

2.1 Анализ сайтов - «аналогов» проекта              9

2.2 Обоснование типа разрабатываемого Web-узла              16

3 Создание наброска сайта              20

3.1 Перечень требований по содержимому и функциям Web-сайта              20

3.2 Создание рабочего наброска сайта              21

3.3 Создание карты сайта              22

4 Разработка набора макетов страниц              23

4.1 Определение функциональных зон страниц сайта              23

4.2 Нахождение идеи пластического решения, определение колорита страниц                            25

4.3 Разработка композиционного решения страниц сайта              27

4.4 Нахождение идеи решения основных зон страниц сайта              32

5 Декомпозиция макета на структурные блоки и модули              34

5.1 Разработка модульной сетки на основе утвержденного макета              34

5.2 Разработка руководства по стилю              38

6 Оптимизация контента сайта              39

7 Верстка                            41

7.1 Разработка логической и физической структуры сайта              41

7.2 Детализация выбранной концепции и разработка окончательного дизайн - макета сайта                            43

8 Тестирование сайта              46

Заключение                            47

Список использованных источников              48

ВВЕДЕНИЕ

Интернет стал, наиболее эффективным средством рекламы и продвижения и является одним из важных элементов  современной цивилизации. Интернет может удовлетворить все потребности современного человека- это покупки, заключение деловых отношений, поиск  клиентов и так далее. Но многие заходят в интернет   читать, развлекаться, общаться, открывать что-то новое для себя. Поэтому создание сайтов стало таким популярным. Каждая организация непременно должна иметь свой собственный сайт, чтобы искать клиентов, рассказать о  себе.

В ходе выполнения курсового проекта мне необходимо создать свой собственный web-сайт.

Основная задача   курсовой работы - закрепить теоретические и практические знания  полученные  при изучении дисциплин «Компьютерная графика» и  «Мультимедиа». В рамках курсовой работы я должна продемонстрировать:

-знание теоретических основ    web - технологий

-  умение проектировать  web - сайт,

- умение использовать графические редакторы  для подготовки графического контента.

-  умение готовить текстовый контент для размещения на страницах сайта

- умение проводить поиск и анализ информации.
1 Выявление целей создания сайта и постановка проблемы, решаемой с созданием сайта

1.1 Определение целей сайта

Это – один из самых важных этапов в создании сайта, потому что нельзя добиться поставленной цели, если она поставлена неверно. От целей будет зависеть весь дальнейший процесс создания вашего сайта, каждый его этап. Поэтому к постановке цели нужно подходить с максимальной серьёзностью. Правильно поставленная цель – это уже половина успеха.

Создание сайта фотографа Бабиновой Анастасии преследует следующие цели:

1)     Помочь начинающему фотографу утвердится в сети Интернет. Наличие собственного веб–сайта значительно улучшает репутацию фотографа среди потенциальных потребителей.

2)     Стать инструментом распространения информации о фотографе, о его возможностях, услугах. Полноценный Интернет-сайт предоставляет всем пользователям материалы (документы, аудио-, фотоматериалы), необходимые для формирования положительного мнения о фотографе.

3)     Увеличить количество потребителей предоставляемой услуги. Благодаря тому, что в Сети расстояние не имеет принципиального значения, фотограф, при помощи сайта, может привлечь большее количество потенциальных потребителей и людей, интересующихся фотографией.

4)     При помощи сайта можно не только оперативно отвечать на вопросы, возникающие у заказчиков, но и формировать базу часто задаваемых вопросов. Таким образом, можно избежать многократных разъяснений по решению одних и тех же вопросов.

5)     Узнавать мнение о фотографе. С помощью веб-сайта можно проводить различные опросы, анализы, с целью выявления отношения в целом к фотографии.

1.2 Определение целевого сегмента потребителей

Сегментация – разделение рынка на группы , обладающих схожими характеристиками, с целью изучения их реакции на тот или иной товар или услугу.

Сегмент – группа покупателей, обладающая похожими потребностями, желаниями и возможностями. Разделение рынка на различные сегменты и их последующее изучение позволяет компаниям сконцентрировать свое внимание на наиболее перспективных, с точки зрения прибыльности, сегментах (целевых).

Целевая аудитория – определенная по какому-либо признаку группа пользователей, в привлечении которой заинтересован автор.

Определение и поиск целевой аудитории фотографа– один из основных вопросов при создании сайта. Правильный ответ на него гарантирует сайту успешность и привлекательность.

1)     Выбор сегмента рынка:

      тип целевой аудитории – целевая аудитория в сфере людей, имеющих отношение к фотографии (люди  увлекающиеся фотографией), желающие запечатлеть важные моменты в жизни;

      тип посетителей – посетители от 14 – до 45 лет;

      тип мотивации – любовь к фотографии, желаннее сделать качественную фотосъемку, желаннее запечатлеть важные моменты жизни;

2)     Портрет целевой аудитории:

      географические: плотность – любой населенный пункт;

      демографические: возраст от 14 – до 45 лет;

      экономические: уровень дохода – средний- выше среднего;

        психологические или психографические: люди, имеющие отношение к фотографии или люди, имеющие желаннее получить качественные фотоработы;

        поведенческие привычки: интерес ко всему новому, необычному и в то же время информационно полезному.

2 Выбор темы

2.1 Анализ сайтов - «аналогов» проекта

В этой главе будут рассмотрены и проанализированы сайты-аналоги фотографов.

Схема анализа:

1) Определение полей сайта.

2) Внешний вид.

3) Структура и навигация.

4) Контент (содержание).

5) Юзабилити.

6) Главные цели дизайна.

7) Рекомендации по улучшению дизайна узла.

Проведем анализ официального сайта Фотографа Марина Скутина.

Не совсем удачное доменное имя – не содержит название,  не сразу понятно, чему посвящён сайт. Разве что фотографии представленные на главной странице дают малое представление о том где мы находимся.

Сайт№1 http://www.marinaphoto.ru/

Рисунок 1 – Главная страница сайта

Рисунок 2 - Второстипенная страница

Второстепенной страницы как токовой не существует, представлено портфолио.

1) Синим цветом отмечены активные поля, зеленым– пассивные поля, красным отмечены пробелы.

2) Цветовая гамма сайта хорошо гармонизирована между собой. Белый, чёрный и жёлтые цвета хорошо сочетаются друг с другом, но данное сочетание очень дерзкое, информация в активном поле почти не читаема.

3) Навигация данного сайта не совсем удобна, поскольку кнопки не названы своими именами, например: кнопка фотограф ведет на главную страницу. Информация предоставлена по разделам - по альбомам фотографий.

4) Основная цель данного сайта – предоставление информации о фотографе марине Скутеной.

5) Данный сайт доступен для всех платформ и браузеров. Вся информация на сайте будет понятна для его посетителя.

6) Сайт  не совсем удобен и понятен в эксплуатации, но на нем достаточно хорошо и интересно представлены работы, за счет этого  можно закрыть глаза на навигацию.

7) Очень хороший сайт, приятен в обращении, интересное оформление, дает дополнительное представление о фотографе.

Проведем анализ сайта «Профессиональный фотограф Казаков Владимир Александрович»:

Удачное доменное имя – Профессиональный фотограф Казаков Владимир Александрович, кратко и лаконично. Пользователю понятно на какой сайт он пришел.

Сайт№2 http://www.fotovak.ru

Рисунок 3 – Главная страница

Рисунок 4 - Второстепенная страница

1) Синим цветом отмечены активные поля, зеленым - пассивные поля, красным отмечены пробелы.

2) Как токовой цветовой гаммы у сайта нет.  Присутствует светло-голубой  по краям, совершенно не сочетается с зеленым цветом шапки.

3) Навигация данного сайта удобна, поскольку она есть на каждой странице. Информация предоставлена по разделам, что позволяет быстро найти необходимое.

4) Основная цель данного сайта –  предоставление информации о фотографе и предоставление его портфолио.

5) Данный сайт доступен для всех платформ и браузеров. Вся информация доступно изложена для посетителей.

6) Сайт удобен и понятен в эксплуатации

7) Сайт  не очень хорош с точки зрения дизайна. Все-таки фотограф обязан продемонстрировать себя с точки зрения творческой личности способной сотворить что-то не обычное.

Проведем анализ сайта «Андрей@Шишов фотограф»:

Удачное доменное имя – содержит Имя, и так же ясна сфера деятельности.

Сайт№3 http://www.foto-ru.ru/

Рисунок 5 – Главная страница

Рисунок 6 – Второстепенная страница

1) Синим цветом отмечены активные поля, зеленым - пассивные поля, красным отмечены пробелы.

2) Сайт выдержан белом цвете – цвете праздника и свадебного платья. Присутствуют вкрапления черного для выделения ссылок, а также белый, который служит фоном. В целом удачная цветовая гамма.

3) Навигация сайта удобна, присутствует на каждой странице. Информация предоставлена по разделам, что позволяет быстро найти необходимое.

4) Основная цель данного сайта –  предоставление информации о фотографе и предоставление его портфолио.

5) Данный сайт доступен для всех платформ и браузеров. Содержание сайта понятно для посетителей.

6) Сайт удобен и понятен в эксплуатации. Отрицательных эмоций не вызывает.

7) В целом, удачный вариант исполнения сайта, вот только белого многовато, и пробелов. Их можно «прикрыть» изображениями или же полезной информацией.

Проведем анализ сайта «фотограф Дмитрий Судаков»:

Удачное доменное имя, содержит название и также ясна сфера деятельности.

Сайт№4 http://www.bridephoto.ru/

Рисунок 7 – Главная страница

Рисунок 8 – Второстепенная страница

1) Синим цветом отмечены активные поля, зеленым - пассивные поля, красным отмечены пробелы.

2) В оформлении сайта присутствует много белого, вкраплениями присутствуют коричневый и бежевый. Не совсем удачный вариант цветовой гаммы, выглядит слишком просто.

3) Навигация сайта не совсем  удобна, отсутствует  на каждой странице. Информация предоставлена по альбомам, что  не дает возможности быстро найти необходимое.

4) Основная цель данного сайта –  предоставление информации о фотографе и предоставление его портфолио.

5) Данный сайт доступен для всех платформ и браузеров. Содержание сайта понятно для посетителей.

6) Сайт прост в эксплуатации. Отрицательных эмоций не вызывает.

7) Сайт хорош в плане количества представленных работ, но вот выглядит слишком просто. Можно добавить картинок, анимаций, ярких цветов.

2.2 Обоснование типа разрабатываемого Web-узла

Чаще всего сайты делятся на следующие категории (виды):

1) Сайт-визитка – обычно состоит из нескольких страниц и имеет уникальный, но простой и функциональный дизайн; идеально подходит для компаний, которые хотят разместить информацию о себе и своих услугах в Интернете; основные разделы сайта: «О компании», «Продукция или услуги», «Прайс-листы», «Контактная информация»; сайт-визитка используется предприятиями, организациями и частными лицами.

2) Корпоративный информационный web сайт – необходим для автоматизации внутреннего документооборота, учёта показателей компании, управления персоналом, может быть оснащён функциями обмена информацией между удалёнными филиалами; корпоративный сайт позитивно влияет на репутацию и имидж компании; дизайн должен соответствовать фирменному стилю компании; чаще всего, включает «администраторскую часть» для создания и изменения контента, позволяющую менеджеру или секретарю компании добавлять или менять новости, информационные статьи, справочную и прочую информацию на сайте; используется минимум графики, основной упор идет на текст.

3) Корпоративный имиджевый web сайт – идеально подходит для обеспечения имиджевого присутствия в Сети; сайт служит для предоставления подробной информации о компании, истории торговой марки, сведений об оказываемых услугах или поставляемых товарах; корпоративный сайт обычно содержит ленту новостей компании, средства публикации информации о рекламных и торговых акциях, информацию для прессы и другие сведения; нередко корпоративные сайты сочетают информацию о компании с каталогом продукции; используется эксклюзивный оригинальный дизайн, выгодно представляющий компанию; использование нестандартных идей и решений в оформлении, процентное соотношение текст/графика = 50/50.

4) Интернет-магазин, он же Сетевой магазин, Электронный магазин, Internet shop, E-shop – интерактивный веб-сайт рекламирующий товар или услугу, принимающий заказы на покупку, предлагающий пользователю выбор варианта расчета, выписывающий счет на оплату, служащий одновременно подтверждением заказа; при этом администратор магазина обязан:

- организовать доставку товара;

- проконтролировать расчеты с покупателем за поставку.

5) Информационный сайт – достаточно большой виртуальный массив информации, включающий в себя множество различных тематических разделов меньшего размера, либо некоторое количество самостоятельных проектов; является для клиента основным источником информации, напоминает энциклопедию или специализированный журнал.

6) Игровой портал – сложный развлекательный интерактивный проект, предусматривающий большую посещаемость и ресурсоемкость.

Персональный проект – личный проект, содержит все, что угодно и оформляется в любом стиле, который найболее полно сможет раскрыть и отобразить тематику сайта.

7) Контент-проект – это сайт, как правило некоммерческой направленности, который представляет собой собрание текстов, статей и прочих материалов, основная задача которого – привлечение посетителей по определенной тематике. В дальнейшем, этот трафик обычно перенаправляется на коммерческие сайты и, по сути, контент-проект используется, как рекламная площадка. Может быть выполнен в виде интернет – библиотеки, энциклопедии или справочника. Каждая отдельная страничка сайта контент-проекта дает, как правило, незначительный трафик, однако общий трафик такого сайта может быть очень внушительным. Контент-проект, при условии размещения на нем подходящей по тематике рекламы, дает самый качественный и тематический трафик на коммерческие сайты партнеров (а значит и конвертацию посетителей в покупателей), т.к. эта тема, с очень высокой долей вероятности, будет интересна большинству посетителей, пришедших с сайта контент-проекта. Также может представлять собой образовательный или развлекательный ресурс.

8) Промо-сайт – это сайт созданный специально для продвижения какого-либо товара либо услуги или основного сайта компании. Промо-сайт – это почти всегда неосновной сайт компании, исключением здесь может быть только промо-сайт, созданный фирмой специально для продвижения одного конкретного продукта или товарной группы.

Причина этого лежит в оптимизации сайта с целью получения более высоких мест в рейтингах поисковых машин, которые дают сайту (а значит – компании) большее количество посетителей, а значит больший доход. Промо-сайт обычно хорошо оптимизируют под поисковые машины, для которых он, в основном, и предназначен. Дело в том, что с точки зрения оптимизации, гораздо выгоднее создать несколько сайтов с более узкой и нацеленной тематикой и оптимизировать их каждый по своей специфике. В общем итоге, отдача от вложения средств в создание основного сайта компании возрастает многократно.

9) Сайт-форум может быть самостоятельным сайтом, а может быть разделом сайта. Чаще всего сайт-форум делается на поддомене основного сайта и предназначен для организации общения посетителей сайта между собой и с администратором сайта.

Сайт-форум может быть удобным способом набора контента для основного сайта. Новые темы, открытые на форуме могут быть использованы в качестве анонса новых статей для ленты новостей основного сайта или анонса статей, выдержки из которых можно использовать для почтовой рассылки. Используя сайт-форум совместно с почтовой рассылкой, можно быстро увеличить посещаемость основного сайта.Таким образом, сайт-форум – хороший инструмент для проведения маркетинговых исследований рынка и раскрутки основного сайта.

10) Блог – это сайт, представляющий собой интернет-дневник, или журнал, который ведется наподобие новостной ленты, при этом на каждую тему блога посетители могут оставлять свои комментарии-сообщения, доступные с главной страницы соответствующей темы. Блог обычно очень часто обновляется, по этой причине он может намного чаще индексироваться поисковыми машинами, чем обычные сайты. Блог часто используется для общения людей объединенных какими-либо общими интересами, и в этом, чем-то, напоминает форум. Самые последние события в мире зачастую раньше появляются на различных блогах, и только немного позже в сообщениях новостных интернет-изданий.

В общем можно говорить о том, что блог представляет собой странный гибрид ленты новостей, гостевой книги и форума одновременно.

Исходя из поставленных перед созданием сайта целей и задач, сайт фотографа Бабиновой Анастасии подходит под категорию «1», т.е. «сайт-визитная карточка».

3 Создание наброска сайта

3.1 Перечень требований по содержимому и функциям Web-сайта

Требование к содержимому

Таблица 1 – Краткий перечень содержимого сайта

Технические требования. При создании сайта «фотограф Анастасия Бабинова» будет использоваться язык гипертекстовой разметки HTML -стандартный язык разметки документов во Всемирной паутине. Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. С течением времени, основная идея платформонезависимости языка HTML была отдана в своеобразную жертву современным потребностям в мультимедийном и графическом оформлении.

Текстовые документы, содержащие код на языке HTML (такие документы традиционно имеют расширение .html или .htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет - обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса веб - страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Internet Explorer, Mozilla Firefox, Safari, Google Chrome и Opera.

Так же в своей работе я планирую использовать CSS (англ.Cascading Style Sheets – каскадные таблицы стилей) – технология описания внешнего вида документа, написанного языком разметки.

Требования к внешнему виду.

Требования к функциям сайта. Сайт будет выполнять функцию визитной карточки.  Это очень важно  втом плане, что само наличие сайта и его доступность в сети положительно влияет на статус и популярность фотографа.

3.2 Создание рабочего наброска сайта

1) Группировка элементов. Я считаю, что «Портфолио» и «Контактную информацию» можно объединить в одну группу «Портфолио». А на главной странице можно также разместить «Гостевую книгу», в которой посетители смогут задать свой вопрос.

2) Количество уровней навигации в сайте. На моем сайте будет 3 элемента навигации: «Портфолио», «Главная», «Прайс-лист»,- эти ссылки будут одного уровня. На странице «Портфолио» будет находиться ещё одна вложенная ссылка: «Контактная информация». На главной странице также будет находится ссылка «Гостевая книга». Также при отправке сообщения в «Гостевую книгу» на экран будет выводиться страница с благодарностью.

3) Приоритет для каждой группы. Три звездочки будут соответствовать наибольшему приоритету группы, две – группе с меньшим приоритетом и одна – наименее важной группе. Назначая приоритет, я смогу определиться с главными, вторичными и дополнительными элементами навигации.

«Портфолио»             

«Главная»

«Прайс-лист»

« Контактная информация»

«Гостевая книга»

3.3 Создание карты сайта

Карта сайта – схема для визуализации структуры будущего web-сайта. На карте сайта представлен полный перечень разделов, либо всех страниц, имеющихся на сайте. Карта сайта может принести пользу любому сайту.

Рисунок 11 – Карта сайта

4 Разработка набора макетов страниц

4.1 Определение функциональных зон страниц сайта

Макет - это набор правил, по которым располагаются элементы страницы сайта. Таким образом, макет - это основа верстки, - тот каркас, на котором собираются элементы дизайна и информационное наполнение страницы.

Зачем нужен макет страниц сайта? Как один из основополагающих элементов стиля, макет создает в документе единство, ощущение неделимого образного ряда. То есть макет упорядочивает документ, делает его, в общем случае, легко читаемым и более удобным для восприятия.

Прежде чем начать создание макета, необходимо определить, макет чего делать, что сводиться к определению количества принципиально различных страниц на вашем будущем ресурсе.

Все страницы создаваемого сайта должны быть выполнены в едином стиле.

Создание макета страницы сайта - это не только конструкторская задача, но и, в некотором роде, творческий процесс.

Область основного содержания – то, ради чего, собственно, создается страница, ее полезная площадь. Важно осознать тот факт, что пространства для основного содержания страницы следует отводить как можно больше, но в то же время с расчетом, чтобы не было ущерба функциональности прочих элементов.

На макете главной страницы сайта в блоке основного текста желательно присутствие места для краткой аннотации – пояснения, кому адресован этот ресурс. Наличие такого описания – признак уважения к личному времени пользователя: если ему неинтересна тематика сайта, он незамедлительно покинет страницу; если же тематика вызывает интерес, со вкусом составленная аннотация только подогреет его. На главной странице часто размещают и новости.

Подвал – немаловажная часть интерфейса, которой, к сожалению, многие разработчики не уделяют должного внимания. Чисто композиционная роль подвала – уравновесить шапку, придать странице законченность. В информационном плане он тоже весьма полезен: в самой нижней области страницы можно разместить выходные данные, контактную информацию, дату последнего обновления, различные счетчики, рекламные баннеры и прочие элементы подобного рода.

При первом посещении ресурса пользователю должны быть совершенно ясны принципы как собственно построения структуры сайта, так и поиска интересующей посетителя информации. Кроме того, желательно иметь возможность лёгкого перехода из любого места проекта в любое другое.

Существует несколько видов макетов страниц:

Эластичный макет страницы сайта (Flexible page layout site);

Жесткий макет страницы сайта (Hard page layout site).

Рисунок 12 -Схема размещения контент-зон главной страницы

Рисунок 13 - Схема размещения контент – зон внутренней страницы

4.2 Нахождение идеи пластического решения, определение колорита страниц

Поскольку я создаю сайт для фотографа, что я является конкурентной сферой, то и сайт должен отличаться от основной массы. Поэтому основным цветом для сайта я выбрала - светло серый цвет. Этот цвет не перебивает, не напрягает зрения. По моей задумке, на его фоне будут однотонные элементы, также не раздражающие глаз. По моему мнению, серые тона будут выглядеть ещё выигрышней потому, что одна из модных тенденций это черно-белая  фотография. Почти все иллюстрации будут в черно-белом цвете, что позволит идеально вписаться в общую картину, а тёмно-синий шрифт будет легко различим. А сам сайт запомниться посетителям своей простотой и понятностью. В виду того, что данный сайт посвящён фотографу, у заинтересованных людей такое цветовое решение отторжения не вызовет.

Рисунок 14 - Основная цветовая гамма моего сайта

Рисунок 15 – Главная страница сайта в цветовом решении

Рисунок 16 – Второстепенная страница сайта в цветовом решении.

4.3 Разработка композиционного решения страниц сайта

Пройдя этапы пластического и цветового решения, мы можем приступить к созданию композиции Интернет сайта.

Под термином «компоновка» в классической веб - архитектуре следует понимать рациональное (в первую очередь, понятное), эстетичное и удобное), а также стилистически соответствующее концепции художественного образа расположение информационных массивов на конечных элементах публикации.

Рисунок 17 - Общая ширина макета

Рисунок 18 – Ширина зоны контента

Верхняя часть страницы, используется, как правило, для размещения «шапки» - логотипа, эмблемы, названия фирмы и другой важной информации.

Рисунок 19 –Пример верстки 

Рисунок 20 – Пример верстки

Нижняя часть страницы, используется, как правило, для контактной информации, или данных, структурно требующих разделения с данными, размещенными в верхней части сайта.

Рисунок 21 – Пример размещения навигации

Рисунок 22 – Пример размещения навигации

Область для гиперссылок или панели навигации сайта должна размещаться в удобном, для частого использования месте. Количество ссылок может повлиять на компоновку сайта (вертикальное или горизонтальное размещение ссылок).

Рисунок 23 - Пример фиксированного размера сайта

Веб-дизайн (от англ. Web design) – отрасль веб - разработки и разновидность дизайна, в задачи которой входит проектирование пользовательских веб - интерфейсов для сайтов или веб - приложений. Веб - дизайнеры проектируют логическую структуру веб - страниц, продумывают наиболее удобные решения подачи информации, а также занимаются художественным оформлением веб - проекта. В результате пересечения двух отраслей человеческой деятельности грамотный веб - дизайнер должен быть знаком с последними веб-технологиями и обладать соответствующими художественными качествами.

Для грамотного создания сайта необходимо создать набросок. Он поможет в визуализации замыслов.

Рисунок 24 - Набросок главной страницы моего сайта

Рисунок 25 - Набросок второстепенной страницы моего сайта

Далее следует рассмотреть страницы в цвете:

Рисунок 26 - Главная страница моего сайта

Рисунок 27 - Второстепенная страница моего сайта

Разработав наброски сайта в цвете следует проверить найденное цветовое решение в черно-белом варианте. Тексты должны быть читабельными, а формы элементов и цветовые оттенки должны сохранить композиционное равновесие. Это необходимо для того, чтобы проверить, как будет выглядеть наша страница на монохромном мониторе.

Рисунок 28 - Главная страница моего сайта

Рисунок 29 - Второстепенная страница сайта

4.4 Нахождение идеи решения основных зон страниц сайта

После завершения предварительного этапа создания макета, можно приступать к детализации содержания основных контент - зон.

На абсолютно всех сайтах есть текстовые и графические контенты. Для того что бы сайт пользовался популярностью, был визуально приятным и интересным следует хорошо продумать его содержание.

Рисунок 30 - Страница с текстовым контентом

Рисунок 31 - Страница с графическим контентом

5 Декомпозиция макета на структурные блоки и модули

5.1 Разработка модульной сетки на основе утвержденного макета

Модульная сетка - это набор скрытых направляющих, вдоль которых располагаются элементы веб - страницы. Применение модульной сетки облегчает размещение разнообразных данных на сайте, обеспечивая между различными блоками визуальную связь.

При верстке веб - страница рассматривается как набор прямоугольных блоков, которые располагаются в определенном порядке. Как правило, при этом данные размещают по колонкам, отсюда пошли термины одно-, двух-, трехколонный макет и т.д.

Одноколонный макет

Чаще всего такая модульная сетка применяется в академическом дизайне при публикации большого текста.

Такой дизайн отличает минимализм оформления. Здесь основное внимание уделяется содержательной части, а дизайн, как таковой, практически отсутствует. В основном такой академический дизайн можно встретить в научной среде.

Рассмотрим типичную схему одноколонной модульной сетки. Обычно здесь присутствуют четыре основных блока – это заголовок страницы, навигация по сайту, основной текст, контактная и правовая информация в самом низу страницы. При большом объеме основного текста, когда высота страницы очень большая, то внизу дублируют блок навигации по сайту или ставят ссылку «Наверх».

Рисунок 32 – Пример однокомпонентного макета

Как видно из примера, рисунки присутствуют в тексте, при этом обычно текст обтекает их по контуру. Если на сайте планируется размещать много изображений, то удобнее всего применять фиксированный макет. В этом случае изображения можно делать определенного размера, которые идеально впишутся в макет веб – страницы.

Двухколонный макет

Один из наиболее распространенных вариантов применения на сайтах. Такая модульная сетка состоит из двух колонок – в одной размещается основной текст, во второй - навигация и другая необходимая информация.

Рисунок 33 – Пример двукомпонентного макета

Причем не имеет принципиального значения, где будет располагаться колонка с навигацией - слева или справа.

Из-за своего удобства такие двухколонные сетки стали стандартом при создании информационных сайтов. Здесь все «под рукой» – и основной текст и навигация, и ссылки, к тому же эта сетка позволяет применение горизонтальной навигации.

Двухколонные макеты очень удобны при создании сайтов и не требуют особых знаний по верстке. Единственный недостаток, который им приписывают - такие сайты выглядят достаточно однообразно. Однако пользователям гораздо удобнее работать с сайтом привычного вида.

Трехколонный макет

Чаще всего трехколоночную сетку применяют на главной странице сайта, где пользователю нужно показать много информации. Также такая сетка применяется и на внутренних страницах, если двух колонок не хватает для размещения всей информации.

Рисунок 34 – Пример трехкомпонентного макета

В таком макете в одной колонке размещают навигацию, во второй – под основной текст, а в третьей колонке помещают дополнительную информацию (ссылки, рекламу и т.д.)

Такая сетка дает больше простора для дизайнера: можно разбить контент на отдельные фрагменты, объединить колонки или отделить различные блоки. При этом макет получится достаточно сложным, однако результат стоит того.

Рисунок 35 – Возможности разбивки макета

Основной недостаток трехколонной сетки - сложность верстки подобного макета. Для того чтобы получить необходимый результат приходится потратить много времени отладку веб - страницы в разных браузерах и на создание файла стилей.

Существуют и многоколонные виды модульных сеток, но из-за ограничения по ширине окна браузера на практике они встречаются очень редко. В этом случае текст нужно делать мелким чтобы избежать появления горизонтальной полосы прокрутки. А это повлияет на удобство восприятия читателем информации.

Итак: Модульные сетки помогают упростить верстку сайта, потому что весь материал разбивают по отдельным блокам, которые потом выравнивают по невидимым направляющим линиям. И хотя эти блоки и взаимосвязаны между собой, но обычно позволяют независимое редактирование данных, что в свою очередь упрощает оформление.

Перед созданием веб - страницы в HTML-редакторе, удобнее сделать набросок на бумаге. Это сократит время на выбор типа модульной сетки, которая в дальнейшем будет применяться. В зависимости от количества материала и целей сайта применяют различные типы модульной сетки (одно-, двух, трех или многоколонную). Помните, чем больше колонок, тем больше возможностей по изменению вида дизайна, но и сложнее верстка такого макета.

Для создания своего сайта я буду использовать одноколонную сетку, поскольку считаю её наиболее подходящей.

5.2 Разработка руководства по стилю

В разработке сайта есть очень много небольших нюансов, один из них это стиль графического и html текста. Прежде чем начать вставлять текст в сайт нужно продумать какой у него будет шрифт, размер, цвет и т.д.

Таблица 2 – Пример руководства по стилю графического и HTML-текста для Web-сайта

6 ОПТИМИЗАЦИЯ КОНТЕНТА САЙТА

Оптимизация сайта – это комплекс действий, направленный на поднятие Вашего сайта в результатах поиска в поисковых системах по определённым ключевым запросам с целью получения с них бесплатных целевых посетителей на Ваш сайт.

Оптимизация сайта – это:

– Наиболее сложный вид раскрутки моего сайта, требующий комплексного подхода;

– Наиболее долгий, требующий определённого минимального времени.

– Применительно к Web-ресурсам, контент можно разделить на три основных типа:

– Графический – это различные иллюстрации, фотографии, диаграммы, чертежи, схемы, а также анимация и видео;

– Фактический – сюда включаются технические характеристики, инструкции по эксплуатации, данные исследований, числовая информация;

– Текстовый – представляет собой тексты самого разнообразного содержания – рассказ о компании, описания товаров и услуг, тематические статьи и пр. Текстовый контент отличается от фактического примерно так же, как публицистика, научно-популярная и художественная литература отличается от технических и статистических данных.

Прежде чем выкладывать информацию на свой сайт, она несколько раз прочитывается, сокращается, так что бы не потерять главную мысль и потом еще раз прочитывается. В тексте, выкладываемом на сайте, не должно быть лишней информации, что бы не загрязнять свой сайт. Информация должна быть тщательно отобрана, так что бы читателю было интересно.

Так как на сайте не может быть только текстовая часть, там должны еще присутствовать графические элементы. Что бы графические элементы сильно не тормозили загрузку сайта, они должны быть определенного формата и разрешения. Самые распространенные форматы для картинок это JPG, GIF, PNG. Для создания моего сайта я использовала иллюстрации в формате .jpg, поскольку изображения в этом формате загружаются с наибольшей скоростью.

7 ВЕРСТКА

Верстка сайтов является неотъемлемой частью процесса изготовления сайтов. Что такое верстка сайта – это процесс формирования веб - страницы по готовому макету. Этот процесс заключает в себе создание кода страницы при помощи понятного браузерам языка размётки гипертекста html, и оформление её с помощью каскадных таблиц стилей (CSS). Не нужно самому пытаться сверстать сайт, целесообразнее заказать услуги верстальщика. Ведь профессиональная верстка сайтов должна учитывать многочисленные особенности, как правил верстки, так и параметров отображения документов в различных браузерах.

7.1 Разработка логической и физической структуры сайта

После того как я определился с количеством, названиями и содержанием всех разделов своего проекта, можно переходить к следующему этапу создания сайта – проектированию его логической и физической структуры.

Логическая структура сайта – это система организации ссылок между страницами сайта. Структура сайта должна определяться еще на первых этапах создания проекта до начала разработки дизайна.

Условно можно выделить три основных способа организации структуры сайта:

– Линейная структура. Веб - страницы идут одна за другой, и пользователь должен просматривать их как слайд-шоу.

– Древовидная структура. Пользователь при заходе на главную страницу оказывается перед выбором, куда идти дальше. После перехода в нужный раздел, он подбирает необходимый подраздел и т. п.

– Решетчатая структура. В ней все страницы размещаются в различных ветках. У пользователя есть возможность перемещаться по ним не только вертикально (вверх-вниз) но и горизонтально (то есть между ветками на разных уровнях).

– Физическая структура сайта описывает размещение файлов и папок на диске компьютера.

Когда мы сохраняли все файлы Web-страниц и связанных с ними графических изображений в одну папку, мы не думали о какой-то там физической структуре. И правильно! В подавляющем большинстве случаев такой подход приемлем для небольших сайтов, вроде нашего. В таких случаях можно не ломать себе голову, в какой папке поместить тот или иной файл, – лучше сосредоточиться на содержании. Все равно, если сайт состоит из двух-трех десятков файлов, от сложной физической структуры вы не получите никаких преимуществ.

Но когда количество файлов вырастает до сотни, лучше потратить время и разложить их по полочкам, то есть по папкам.

Правильная организация файлов и папок файловой системы поможет вам в дальнейшем держать все это хозяйство в порядке. В самом деле, намного проще найти jpg-файл среди нескольких десятков других jpg-файлов, лежащих в отдельной папочке, чем рыться среди сотен разнородных файлов, сваленных как попало в одну папку. К тому же, вам будет проще обновлять файлы сайта, если вы «разбросаете» их по отдельным папкам.

Рисунок 36 - Логическая и физическая структура моего сайта

7.2 Детализация выбранной концепции и разработка окончательного дизайн - макета сайта

Завершив все этапы разработки моего сайта фотографа, я получила простой и понятный веб - сайт.

Результат моей работы:

Рисунок 37 – Главная страница

Рисунок 38 – Страница «Портфолио»

Рисунок 39 – Страница «Контактная информация»

Рисунок 39 – Страница «Прайс-лист»

Рисунок 40 – Страница «Гостевая книга»

Рисунок 41 – Страница после отправления вопроса

8 ТЕСТИРОВАНИЕ САЙТА

Сайт разработан по всем рекомендациям. Весь контент сайта полностью соответствует теме фотографии. Навигация и ссылки работают хорошо. Загрузка сайта происходит быстро. Никаких затруднений в ходе тестирования сайта не обнаружено.

ЗАКЛЮЧЕНИЕ

Закончив разработку сайта для фотографа, я могу утверждать, что я воплотила всю изученную мной теорию на практике. Созданный мною сайт, как мне кажется, достаточно привлекателен и информативен. Он легко может выполнить все поставленные перед ним цели и задачи.

Научившись основам веб-дизайна сейчас, поняв последовательность этапов создания сайта, в дальнейшем я смогу создавать подобные проекты на порядок выше уровнем, ещё более совершенные.

Все те умения, что я применяла при написании курсовой работы, безусловно, пригодятся мне в будущем.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1        http://www.chatpages.ru/chat/color/color.html –цвета html

2        www.htmlbook.ru – сайт для тех, кто делает сайты

3        http://www.highstar.ru/ – учебник  для начинающих

4        www.wikipedia.ru – информационный сайт

5        http://www.marinaphoto.ru/ - Марина Скутина

6        http://www.fotovak.ru - Фотограф Казаков Владимер Александрович

7        http://www.foto-ru.ru/ -Андрей@Шишов фотограф

8        http://www.bridephoto.ru/ фотограф Дмитрий Судаков