- •Введение
- •1. Элементы языка html
- •Теги форматирования текста
- •Гиперссылки
- •Встраивание графических изображений
- •Создание таблиц
- •2. Каскадные таблицы стилей
- •Селекторы элементов
- •Селекторы классов
- •Селекторы идентификаторов
- •Единицы измерения, принятые в каскадных таблицах стилей
- •Внешние каскадные таблицы стилей
- •Задание цвета в каскадных таблицах стилей
- •3. Формы
- •Элементы управления формы
- •4. Разработка Web-сайта электронного магазина Планирование сайта
- •Задачи и информационное содержание сайта
- •Макеты страниц
- •Макет страницы можно выполнить с помощью обычного текстового редактора. На рис. 4.4 представлен результат такой работы.
- •Логическая структура сайта
- •Обозреватель преобразует данный html-код к следующему виду:
- •Для формирования стиля заголовка страницы воспользуемся селектором класса:
- •Для формирования стиля нижней части страницы воспользуемся селектором класса:
- •Заключение
- •Список литературы
4. Разработка Web-сайта электронного магазина Планирование сайта
Под Web-сайтом обычно понимается некоторое множество связанных ссылками Web-страниц определенной тематической направленности. Примером может служить множество Web-страниц Интернет-магазина, содержащих каталоги товаров с их описаниями, фотографиями и ценами, перечни услуг с подробными описаниями и прейскурантами.
Планирование – это первый и очень важный этап разработки сайта. На этом этапе требуется выполнить следующие действия:
- четко определить назначение сайта, продумать, какая информация будет представлена на сайте, собрать всю необходимую информацию (тексты, картинки и т.п.);
- разработать макеты страниц сайта;
- разработать логическую структуру сайта;
- разработать физическую структуру сайта (распределение файлов сайта по папкам в исполняемой папке сайта).
Задачи и информационное содержание сайта
Предположим, требуется организовать книжный Интернет-магазин. В этом случае, прежде чем приступить к разработке макетов страниц, следует ответить, по крайней мере, на следующие вопросы:
- кто является потенциальным покупателем;
- какова тематическая направленность книжной продукции, предназначенной для реализации;
- каковы информационные разделы сайта.
Будем считать (предположим, на основании маркетинговых исследований), что основная категория покупателей – это студенты торгово-экономических специальностей. Этим выбором определяются предпочтения и интересы покупателей, а, следовательно, и книжная тематика. Теперь уже легче будет определить информационные разделы сайта.
Классифицируем всю книжную продукцию на три категории: книги по коммерции и маркетингу, книги по экономике и финансам, книги по информационным технологиям и компьютерной технике.
Кроме этого, следует позаботиться о том, чтобы посетитель сайта мог получить информацию о ценах (прайс-листы), о новых поступлениях, мог оставить свои отзывы о работе магазина и предложения, а также узнать адрес офиса, контактные телефоны и другую вспомогательную информацию.
Макеты страниц
Начиная разработку макетов страниц, следует иметь ввиду, что некоторые части сайта бывает удобно повторять на каждой странице сайта. В рассматриваемом случае к таким частям можно отнести группы ссылок на перечисленные выше информационные разделы сайта (полезное содержимое сайта). Кроме того, для каждого информационного раздела сайта следует предусмотреть, по крайней мере, по одной web-странице.
В настоящее время существует большое разнообразие схем компоновки Web-страниц. На рис 4.1 – рис 4.3 представлены некоторые из довольно часто встречающихся схем.
-
Заголовок сайта
Набор гиперссылок для перехода между страницами сайта
Полезное содержимое сайта
Рекламные баннеры.
Сведения о правах разработчика сайта
Рис 4.1. Компоновка страницы с набором гиперссылок, расположенным сверху
-
Заголовок сайта
Полезное содержимое сайта
Набор гиперссылок для перехода между страницами сайта
Рекламные баннеры.
Сведения о правах разработчика сайта
Рис 4.2. Компоновка страницы с набором гиперссылок, расположенным справа
-
Логотип
Заголовок сайта
Набор гиперссылок для перехода между страницами сайта
Набор гиперссылок для перехода между страницами сайта
Полезное содержимое сайта
Сведения о правах разработчика сайта
Рис 4.3. Компоновка страницы с наборами гиперссылок, расположенными сверху и слева
Для разработки главной страницы (как и всех остальных повторяющихся областей страниц сайта) можно выбрать любую и представленных выше схем. Поскольку необходимо предпочесть какую-то одну схему, остановимся на последней (рис 4.3).