Этапы проектирования сайта

1. Этап постановки проблемы. В ходе этого этапа следует ответить на вопрос: зачем нужен этот проект? Ответьте себе на этот вопрос (например, познакомить посетителей Интернет с продукцией фирмы, с услугами организации, с вашим хобби). В итоге вы определяете:

1) тему проекта; 2) цель создания сайта,

3) предполагаемый контингент посетителей сайта.

2. Определение общего содержания и структуры сайта. В итоге создаётся модель сайта, отражающая его логическую структуру - из каких разделов (web-страниц) сайт будет состоять, и как они будут связаны ссылками (навигационная схема сайта) (см. рис. 16).

3. Этап определения, как запланированное содержание сайта расположить на web-страницах. Для этого создаётся макет (или эскиз) страниц сайта.

В макете нужно отразить: какая компоновка страницы выбрана – 1-, 2- или 3-полосная, показать расположение заголовка – "шапки" сайта, навигационной панели (со ссылками на разделы сайта); место под рекламные баннеры, место под полосу с основным содержанием сайта и пр.

Макеты будут отличаться прежде всего тем, 1-, 2- или 3-полосная компоновка выбрана. Поэтому покажем отличия макетов web-стра­-ниц с разной компоновкой (рис. 13-15)

Рис. 13. 2-полосной дизайн сайта. Панель навигации - слева

Рис. 14. 2-полосной дизайн сайта. Панель навигации - справа

Рис. 15. 1-полосной дизайн сайта. Панель навигации – вверху и внизу

Элементы навигации можно разместить не только по правой и левой границе страницы, но и в верхней части документа (рис. 15). Такая компоновка наиболее подходит при создании домашних страничек: тогда все объекты страницы гармонично «вписываются» в заданную ширину невидимой таблицы, при этом подгонка самой таблицы упрощается. Недостаток макета: необходимо дублировать элементы навигации в нижней части документа.

`Шапку` сайта можно создать из коллажа, созданного в Photoshop.

Если для сайта разрабатывается сложный графический дизайн, его сначала отражают в виде эскиза страницы сайта. Эскиз рисуют в Photoshop.

4. Поискконкретной информации для содержательного наполнения сайта (можно с использованием ресурсов сети Интернет).

5. Формулировка конкретных названий разделов (страниц) сайта. Формирование текста разделов (текста будущих web-страниц). Текст разделов сначала удобно формировать, редактировать в редакторе MS Word.

6. Определение возможных форм представления информации на сайте (графики, анимационных баннеров и пр.).

7. Выбор необходимого программного обеспечения для реализации проекта.

8. Компьютерная реализацияпроекта: разработка дизайна интерфейса сайта, обработка графики, разметка сайта, наполнение сайта содержимым, настройка ссылок.

9.Анализ и представление HTML-кода web-страниц - листинга. В Dreamweaver html-код web-страницы отражается в окне html-кода. Его можно просмотреть, проанализировать и скопировать в описание данного этапа проекта.

10. Представление результатов. Готовый вид страниц сайта представляют в виде скриншотов (копий экранов), выполненных при просмотре web-страниц в браузере Internet Explorer.

Приведём пример пояснительной записки к проекту web-сайта.

ПОСНИТЕЛЬНАЯ ЗАПИСКА К ПРОЕКТУ САЙТА

Содержание этапов работы по проектированию сайта

1. Темаweb-сайта: _______________

Цель создания сайта: ____________

Предполагаемый контингент посетителей сайта: ____________________

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

Рис. 16. Пример отражения структуры сайта

3. Макет 1й web-страницы сайта.

Допустим, вы выбрали 2-полосной дизайн сайта. Тогда в пункте 3 нужно построить макет 1й страницы сайта, наподобие рис.13, 14. И пояснить свой выбор, например так: "наш макет отражает, что выбран 2-полосный табличный дизайн сайта.Он наиболее распространен в WWW ввиду его удобства и практичности. Основное содержимое расположено в правой полосе, левая отводится под навигацию и другие служебные цели".

4. В результате этапа поиска информации для наполнения сайта использованы следующие ресурсы сети Интернет:

§ www. …. …ru (ресурс компании «…» о ….);

§ www. …. …ru (ресурс общества «…» о ….);

§ www. …. …ru (авторский сайт Иванова А.А. «…» о ….); …. …. ….

5. Сформулированы конкретные названия разделов(web-страниц) сайта:

1) Главная страница, 2) Раздел 2 «…», 3) Раздел 3 «…»,
4) Раздел 4 «Фото галерея …», 5) Раздел 5 «Портфолио. Работы автора».

6. Формы представления информации на сайте:

§ текстовая информация - основное содержательное наполнение сайта (предварительно сформировано, отредактировано в MS Word),

§ коллаж с текстовой надписью (в формате *.png) для верхней заставки-"шапки" сайта, выполнен в Adobe Photoshop,

§ фото для фотогаллереи сайта (в форматах *.jpg, *.gif, *.png);

§ анимированный баннер (в формате *.gif), разработан в Adobe Image Reader

7.Для реализации проекта использовано следующее программное обеспечение:

§ Adobe Photoshop, Corel Draw – обработка графического оформления сайта

§ Macromedia Dreamweaver – разработка web-страниц сайта

§ Adobe Image Reader – создание рекламного баннера.

§ MS Word – оформление пояснительной записки о этапах проектирования сайта

8. Компьютерная реализацияпроекта: разработан дизайна интерфейса сайта и обработана графика (в редакторе графики Photoshop, Image Ready); в редакторе Dreamweaver проведена табличная 2-полосная разметка сайта, сайт наполнен подготовленным содержимым, настроены ссылки, отлажен html-код.

8. Анализ и представление листинга Html-документа. Ниже представлен html-код web-страниц сайта. Он проанализирован, а обязательные теги (отвечающие за структуру web-страницы) выделены жирным шрифтом.

9. Результаты проекта. Ниже представляются скриншоты (фотокопии) web-страниц сайта, выполненные при их просмотре в браузере Internet Explorer.

Рекомендуемая литература

1. Залогова Л.А. Практикум по компьютерной графике. - М.: Лаборатория Базовых Знаний, 2007. – 320 с.

2. Компьютерная графика. Учебник/М.Н.Петров, В.П.Молочков. - СПб.:Питер, 2005.

3. Кэплин С. Хитрости Photoshop. Искусство создания фотореалистичных монтажей /Пер. с англ. С.В. Корсакова. – М.: НТ Пресс, 2005. – 320 с.

4. Леонтьев Б.К. Web-дизайн: Руководство пользователя. – М.: Познавательная книга плюс, 2007. – 320 с.

5. Миронов Д.Ф. Компьютерная графика в дизайне: Учебник для вузов /Д.Ф. Миронов. – Спб.: Питер, 2007. – 224 с.

6. Полное руководство по цветовой коррекции цифровых изображений /Пер. с англ./Уокер М., Барстоу Н. – М.: "Омега", 2005. – 192 с., ил.

7. Солоницын Ю. Photoshop 7 для подготовки web-графики. Учебный курс. – СПб.: Питер, 2008. – 336 с.

8. Петюшкин А.В. Основы баннерной рекламы. – СПб.:БХВ-Петербург, 2002.-464 с.

9. Рожков Н.Г., Данилов П.П., Шитов В.Н. Графический дизайн и реклама на компьютере. Краткое руководство.. - М.: Издательский дом "Вильямс", 2006. – 320 с.

10. Томилова О.В. Компьютерная графика и web-дизайн: учебное пособие. – Омск: Изд-во ОмГТУ, 2008. – 104 с.

11. Уильямс Робин. Недизайнерская книга о дизайне. – СПб.: ИД "ВЕСЬ", 2007. -128с.

Подписано в печать 30.09.10. Формат 60х84 1/16.

Печать офсетная. Бумага офсетная. Усл. п.л. 7,0.

Тираж 100 экз. Заказ № 134

РИО Брянского государственного университета
им. акад. И.Г. Петровского

241036, г. Брянск, ул. Бежицкая, 14

Отпечатано в ООО «Ладомир»