Файл: Лабораторная работа "Разработка структуры и дизайна сайта".pdf

Лабораторная работа № 1.
"Разработка структуры и дизайна сайта"
Цель работы: "Изучение форм, способов и методов разработки структуры и дизайна сайта".
Оборудование и программное обеспечение для выполнения практической работы: IBM- совместимые ПК, ОС Windows 7, браузер MS Internet Explorer, офисный пакет MS.
Порядок выполнения работы:
1. Ознакомление с теоретической частью (разделы 1, 2).
2. Выполнение практической части работы (в соответствии с заданием и вариантом).
3. Ответы на контрольные вопросы к лабораторной работе.
4. Оформление отчета.
1. Разработка структуры сайта
Структура сайта – тщательно проработанное расположение всех элементов, с
учетом принципов будущей верстки.
Есть 2 основных вида структуры:
- «резиновый сайт» - все элементы сайта наполняют весь монитор по ширине и
«тянутся» при ее увеличении.
- «центрированный сайт» - все элементы расположены по центру на ширине 980px, на более широких мониторах расширяется только фон.
У каждого из этих решений есть свои достоинства и недостатки, они обязательно должны быть учтены при выборе типа структуры. Определить, какой тип структуры будет у сайта, необходимо перед разработкой дизайн-макета.
Логическая и физическая структуры web-сайта могут не совпадать, поскольку в общем случае физическая структура ресурса разрабатывается, исходя из удобства размещения файлов.
Однако более или менее точное сохранение порядка следования логических разделов в физической структуре сайта позволит вам избежать путаницы при последующем дополнении и обновлении материалов.
Рис. Сравнение логической и физической
структуры сайта
2. Дизайн-макет
Дизайн-макет сайта – это визуальный образ будущего сайта, разработанный с учетом
технических возможностей HTML верстки. Такой макет является демонстрацией того,
как визуально будет выглядеть ваш сайт после верстки и наполнения.
Макет представляется в виде картинки, которая будет отображена в интернет браузере, без активных кнопок и других динамических элементов.
Специфика разработки графического дизайн-макета применительно к сайту представляет из себя сочетание технических и визуальных параметров будущего сайта. Это проработка расположения и размера элементов сайта с точки зрения удобства поиска и использования информации на сайте.
Основой для разработки дизайн-макета сайта являются предоставленные заказчиком материалы: логотип, слоган, фирменные (или предпочтительные) цвета, графические элементы, фотографии и другие элементы дизайна, а также заполненная клиентом анкета
- Задача на разработку дизайна должна быть конкретной и детально проработанной. В нашей компании создана анкета (бриф), который заполняет клиент;
- Исходные материалы должны быть хорошего качества. Материалы предоставляются клиентом или создаются дополнительно. Графические и фотоизображения при необходимости

приобретаются в фотобанках. Текстовые материалы желательно готовить заранее с привлечением профессионалов по теме;
- При создании сайта мы всегда думаем о том, как он будет в дальнейшем использоваться, кто будет его посещать, кто размещать информацию. Дизайн сайта - это отражение компании в интернете, и мы всегда стремимся, чтобы сайт приносил заметные результаты.
Сайт – это соединение дизайна и технологии. Современный сайт все чаще представляет собой не просто визитку или каталог, а серьезный технический проект с разветвленной навигацией и множеством функций. Интернет-магазины, личные кабинеты со статистической
информацией, и прочее.
Дизайн сайта должен отвечать требованиям отрасли, быть привлекательным для потребителей, решать задачу рекламного характера для владельца разработанного сайта, а также быть интуитивно понятным и простым с точки зрения использования.
3. Практическая часть.
3.1. В составе бригады (по два человека) выберите один из вариантов назначения сайта и выполните структуру с учетом изложенных требований и рекомендаций:
№
п/п
№ бригады
(вариант)
Назначение сайта
примечание
1.
1.
Торговая компания "Гарант Софт
Сервис"
Поставка программного обеспечения.
(коммерческий сайт)
2.
2.
Общественная организация "Первопроходцы целины"
Социальная группа (некоммерческий сайт)
3.
3.
Дилерская сеть по продаже косметических товаров
Розничная и оптовая продажа.
(коммерческий сайт)
4 4.
Фармацевтическая компания "Сеть аптечных пунктов Айя"
Розничная торговля (коммерческий сайт)
5.
5.
Молодежная общественная организация "Байконурцы"
Социальная группа (некоммерческий сайт)
6.
6.
Колледж "Космос"
Информационно-образовательная группа
(некоммерческий сайт)
7.
7.
Общественно-территориальный фонд "Арал"
Социальная группа (некоммерческий сайт)
3.2. Приведите примеры удачного исходного материала для выбранного дизайн-макета по своему варианту.
Контрольные вопросы:
1. Что представляет собой структура web-сайта? Перечислите виды структуры.
2. Каково назначение и порядка логических разделов в структуре web-сайта?
3. Что такое дизайн-макет web-сайта?
4. От каких условий зависит качество дизайн-макета?
5. Каким образом Вы представляете себе сочетание технических и визуальных параметров будущего web-сайта?
Содержание отчета:
1. Наименование и цель лабораторной работы.
2. Результаты выполнения практической части работы в соответствии с заданиями и вариантами.
3. Ответы на контрольные вопросы 1 - 5.