Лабораторная работа № 1 «Разработка структуры и дизайна сайта»

Цель работы: «Изучение форм, способов и методов разработки структуры и дизайна сайта».

Оборудование и программное обеспечение для выполнения практической работы: IBM-совместимые ПК, ОС Windows 7, браузер MS Internet Explorer, офисный пакет MS.

Порядок выполнения работы:

  1. Ознакомление с теоретической частью (разделы 1, 2).
  2. Выполнение практической части работы (в соответствии с заданием и вариантом).
  3. Ответы на контрольные вопросы к лабораторной работе.
  4. Оформление отчета.

1.Разработка структуры сайта

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

Есть 2 основных вида структуры:

  1. «резиновый сайт» — все элементы сайта наполняют весь монитор по ширине и «тянутся» при ее увеличении.
  2. «центрированный сайт» — все элементы расположены по центру на ширине 980px, на более широких мониторах расширяется только фон.

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

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

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

Рис 1. Сравнение логической и физической структуры сайта

2. Дизайн-макет

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

Макет представляется в виде картинки, которая будет отображена в интернет браузере, без активных кнопок и других динамических элементов.

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

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

— Задача на разработку дизайна должна быть конкретной и детально проработанной. В нашей компании создана анкета (бриф), который заполняет клиент;

— Исходные материалы должны быть хорошего качества. Материалы предоставляются клиентом или создаются дополнительно. Графические и фотоизображения при необходимости приобретаются в фотобанках. Текстовые материалы желательно готовить заранее с привлечением профессионалов по теме;

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

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

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

3. Практическая часть.

3.1. В составе бригады (по два человека) выберите один из вариантов назначения сайта и выполните структуру с учетом изложенных требований и рекомендаций:

№ п/п № бригады (вариант) Назначение сайтапримечание
1. 1. Торговая компания «Гарант Софт Сервис»Поставка программного обеспечения. (коммерческий сайт)
2. 2.Общественная организация «Первопроходцы целины»Социальная группа (некоммерческий сайт)
3.3. Дилерская сеть по продаже косметических товаровРозничная и оптовая продажа. (коммерческий сайт)
44.Фармацевтическая компания «Сеть аптечных пунктов Айя»Розничная торговля (коммерческий сайт)
5. 5.Молодежная общественная организация «Байконурцы»Социальная группа (некоммерческий сайт)
6. 6.Колледж «Космос»Информационно-образовательная группа (некоммерческий сайт)
7. 7.Общественно-территориальный фонд «Арал»Социальная группа (некоммерческий сайт)