8.2. Этапы проектирования web-сайтов
Разработка и создание профессионального web-сайта включает этапы: брифинг, коммерческое предложение/составление калькуляции, общая концепция, детальная концепция, концепция дизайна, реализация,usability-тестирование, запуск сайта, поддержка (рис.2).
Брифинг– переговоры с клиентом, формулирование основных требований и пожеланий. Успешный брифинг служит основой качественной реализации проекта (рис. 3).
Коммерческое предложение и калькуляция – описание необходимого для успешного выполнения проекта (рис. 4).
Общая концепция- основные понятия проекта: цель созданияweb-сайта, целевая аудитория, объем и возможности сайта, вид используемых средств мультимедиа (рис. 5).
Рис.2. Этапы проектирования web-сайта.
Детальная концепция – описание производственного процесса реализации проекта. Здесь определяются текстовая информация, графика и другие данные, используемые в проекте (рис. 6).
Концепция дизайна– описание сайта. В качестве примера приводятся страницы будущего сайта: домашняя и страница с содержанием (рис. 7).
Реализация – программирование сайта (рис. 8).
Тестирование работоспособности (usability-тест)– обнаружение и исправление ошибок, улучшающее приложение (рис. 9).
Запуск – появление сайта в режимеonline(рис. 10).
Поддержка – появление новой актуальной информации на сайте /17/.
Рис. 3 Содержание 1 этапа разработки web-сайта
Рис. 4 Содержание 2 этапа разработки web-сайта
Рис. 5 Содержание 3 этапа разработки web-сайта
Рис. 6 Содержание 4 этапа разработки web-сайта
Рис. 7 Содержание 5 этапа разработки web-сайта
Рис. 8 Содержание 6 этапа разработки web-сайта
Рис. 9 Содержание 7 этапа разработки web-сайта
Рис. 10 Содержание 8 этапа разработки web-сайта
9. Задания для выполнения лабораторных работ
9.1. Задания для выполнения лабораторной работы №1
«Разработка сайта, содержащего изображения и гиперссылки
на web-страниц»
Цель: Получить теоретические знания и практические навыки в использовании технологииHTML,CSSи гиперссылок.
Используемые приемы и технологии:HTML, слои, каскадные стилевые таблицы.
Ключевые термины: HTML-документ, тег, контейнер, браузер, кодировка, якорь, символ «#»
Варианты
1. Выдающиеся спортсмены Росси.
2. Выдающиеся музыканты Росси.
3. Выдающиеся художники России.
4. Выдающиеся политические деятели России.
5. Выдающиеся артисты эстрады России.
6. Выдающиеся писатели России.
7. Выдающиеся поэты России.
8. Выдающиеся певцы России.
9. Выдающиеся композиторы России.
10. Выдающиеся драматурги России.
11. Выдающиеся актеры кино, театра России.
12. Выдающиеся космонавты России.
13. Выдающиеся кинокритики России.
14. Выдающиеся кинорежиссеры России.
15. Выдающиеся бизнесмены России.
16. Выдающиеся депутаты государственной Думы России.
17. Выдающиеся врачи России.
18. Выдающиеся полководцы России.
19. Почетные граждане г. Кургана.
20. Лауреаты Нобелевской премии.
Последовательность выполнения задания
1. Продумайте структуру сайта. Выполните поиск графического и текстового материала для информационного контента сайта.
2. Создайте web-страницуIndex.html, на которой разместите 5-6 графических изображений, используя абсолютное позиционирование.
3. Создайте в файле Style.cssтребуемую таблицу стилей для оформления страниц по теме варианта задания. Введите в ней описание стилейbody(фоновая картинка),h2(тип шрифта в ячейке таблицы),.text(заголовок),.t1(стиль рамки для первой ячейки),.t2(стиль рамки для второй ячейки),.link(стиль для шрифта текста , который является гиперссылкой),.d1(абсолютное положение таблицы на странице),a:visitedиa:hover(цвет гиперссылок).
4. Создайте web-страницы с биографиями ученых, используя подключаемую к ним каскадную стилевую таблицуStyle.css.