4. Практическое занятие: Разработка макета Интернет-магазина

Данное практическое занятие освещает вопросы разработки статических страниц Веб-сайта с применением HTML и CSS, а также отладку CSS с помощью инструментов разработчика в IE8.

Содержание

4.1. Описание структуры сайта

4.2. Основные принципы создания макета страниц

4.3. Обзор HTML

4.3.1. Структура HTML-документа

4.3.2. Основные элементы

4.3.2.1. Гиперссылки

4.3.2.2. Текстовые блоки

4.3.2.3. Форматирование текста

4.3.2.4. Списки

4.3.2.6. Объекты

4.3.2.7. Изображения

4.3.2.8. Таблицы

4.3.2.9. Формы

4.4. Общее описание Dynamic Web Templates

4.5. Общее описание CSS

4.6. Отладка CSS с помощью инструментов разработчика в IE8

4.6.1. Открытие и закрытие средств разработчика

4.6.2. Выбор объектов на веб-странице

4.6.3. Проверка элементов HTML

4.6.4. Использование средств "Стиль" и "Отслеживать стили"

4.6.5. Использование средства "Раскладка"

4.6.6. Использование средства "Атрибуты"

4.6.7. Проверка правил CSS

4.7. Создание сайта из шаблона в Expression Studio

4.8. Создание сайта в Visual Studio

4.8.1. Работа со стилями в Microsoft Visual Studio 2008

4.9. Результат

4.10. Ключевые термины

4.11. Краткие итоги

Цель практического занятия: Основная цель данного занятия – создать статический макет сайта на примере Интернет-магазина, т.е. задать структуру сайта, задать разметку основным страницам и шаблонам, а также определить необходимые CSS-классы, а также рассмотреть использование для этих целей Microsoft Expression Web 3 и Microsoft Visual Studio 2008 Expression Web.

4.1. Описание структуры сайта

Структура разрабатываемого сайта представлена на рис. 4.1.

Рис. 4.1.  Структура сайта интернет-магазина AdventureWorks

Сайт состоит из следующих страниц:

• главная страница (default.html);

• о компании (about/default.html);

• контакты (contact/default.html);

• продукты (products/default.html);

• карта сайта (site_map/default.html).

Помимо страниц, в сайт включен файл, с описанием динамического веб-шаблона (master.dwt), папка "images", содержащая изображения, используемые на сайте (в некоторых других папках также присутствуют подпапки "images" с картинками, например, в products располагаются все картинки продуктов), а также папка "styles", содержащая используемые в сайте CSS файлы.

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

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

4.2. Основные принципы создания макета страниц

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

В качестве технологии для разработки шаблона можно использовать Dynamic Web Templates (DWT), о которой будет рассказано ниже. Также в следующих занятиях будет рассматриваться технология Master Page. Конечно, можно поддерживать шаблон руками, копируя код из него в каждую страницу, однако это неудобно.

Перейдем к созданию внешнего вида Веб-страниц.

Начнем с главной страницы. Традиция оформления главной страницы пришла из полиграфического дизайна. В книге или журнале есть функциональная необходимость присутствия обложки. Обложка – "лицо" книги. Главную страницу сайта также можно сравнить с "лицом" интерактивной мультимедийной книги – она определяет образ всего сайта.

Существует два основных вида домашних страниц: презентационная и информационная. Презентационная страница создается для не очень больших узлов, она красиво оформляется, часто почти целиком состоит из графики и имеет малое количество ссылок. Такая страница, как правило, должна помещаться на экране. Информационная страница, наоборот, создается с использованием минимума графики и содержит большое количество информации. Многие известные Веб-узлы не стесняются "раздувать" ее до 3-х и более экранов. Ее главная задача – продемонстрировать посетителю обилие информации на узле и предоставить все самое актуальное.

Независимо от вида домашней страницы существует несколько основных правил ее организации:

• самая актуальная информация по возможности должна быть видна в первом экране;

• элементы навигации (меню) должны быть очевидны и заметны;

• домашняя страница должна пояснять, чему посвящен этот узел, или же как-то привлекать внимание посетителя.

Страница-шаблон, обычно содержит следующие элементы (см. рис. 4.2):

• меню навигации по темам;

• логотип;

• тематическая графика;

• название страницы;

• основная область;

• координаты;

• шапка;

• подвал.

Рис. 4.2.  Шаблон типовой страницы интернет-сайта

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