Министерство
экономического развития и торговли
Российской Федерации
Государственное образовательное учреждение высшего профессионального образования
Российский государственный торгово-экономический университет
Самарский институт (филиал)
Кафедра информатики и математики
Мотов В.В., Хонин А.С.
Технология разработки сайта
электронного магазина
Учебно-методическое пособие
Самара 2004
ББК 32.97
УДК 004.738.5
Т38
Рекомендована к изданию Ученым советом Самарского института (филиала) государственного образовательного учреждения высшего профессионального образования «РГТЭУ»
Т
Т38
Рассматриваются основы языка гипертекстовой разметки документов (HTML). Подробно разбирается пример создания Web-сайта – витрины электронного магазина.
Составители: канд. техн. наук, доцент Мотов Владислав Васильевич,
ст. преподаватель Хонин Александр Станиславович
Рецензент: Жиров В.Г., к.т.н., доцент кафедры информационных технологий Самарского государственного технического университета
ББК 32.97
УДК 004.738.5
© Мотов В.В., Хонин А.С., 2004
©
ГОУ ВПО “РГТЭУ” Самарский институт
(филиал), 2004
Оглавление
Введение 6
1. Элементы языка HTML 6
Теги форматирования текста 8
Гиперссылки 12
Списки 12
Встраивание графических изображений 13
Создание таблиц 14
2. Каскадные таблицы стилей 16
Селекторы элементов 17
Селекторы классов 18
Селекторы идентификаторов 18
Единицы измерения, принятые в каскадных таблицах стилей 19
Внешние каскадные таблицы стилей 19
Задание цвета в каскадных таблицах стилей 20
3. Формы 21
Элементы управления формы 22
Тег input 23
Тег textarea 24
Тег select 24
4. Разработка Web-сайта электронного магазина 25
Планирование сайта 25
Задачи и информационное содержание сайта 25
Макеты страниц 26
Логическая структура сайта 28
Физическая структура сайта 29
Разработка главной страницы 29
Разработка страницы – витрины книжной продукции 38
Разработка страницы для формирования заказа 43
Заключение 46
Список литературы 48
Введение
В последнее время информационные технологии вышли на качественно новый уровень. Их стремительное развитие оказывает влияние на самые разные сферы человеческой деятельности, в том числе, на бизнес. Например, использование сетевых технологий Интернет в коммерческой деятельности позволяет завоевывать новые рынки и потребителей, организовывать новые каналы сбыта, повышая качество обслуживания клиентов и гибкость потребительского сервиса. Отсюда следует, что современные специалисты в области экономики, менеджмента, коммерческой деятельности, чтобы идти в ногу со временем, должны овладевать новейшими методами информационных технологий, и, в частности, методами интернет-технологий.
Цель данного учебно-методического пособия – оказать помощь студентам в практическом овладении методами разработки Web-сайта на примере создания витрины электронного магазина.
1. Элементы языка html
Для разработки Web-страниц используется язык HTML (HiperText Markup Language – гипертекстовый язык разметки).
Описание Web-страницы – это текстовый документ, который может быть подготовлен обычным текстовым редактором. Кроме текста в таком документе имеются специальные инструкции, определяющие правила форматирования документа и передающие обозревателю различную служебную информацию.
Инструкции языка HTML называются тегами (от английского слова - tag).
Тег записывается в угловых скобках. Большинство тегов являются парными, например
<html>
Текст HTML-документа
</html>.
Тег <html> называется открывающим, а тег </html> – закрывающим. Парные теги называют также контейнерами или тегами контейнерного типа.
Тег состоит из имени и списка атрибутов: <имя_тега список_атрибутов>. Атрибуты задают свойства тега.
Теги, формирующие разделы HTML-документа, называются структурными. К основным разделам HTML-документа относятся заголовок и тело документа. Пара тегов <head> . . . </head> формируют заголовок документа, а теги <body> . . . </ body > определяют тело документа.
Для того чтобы вывести название документа в строку заголовка окна обозревателя, используется пара тегов <title> . . . </ title >.
Итак, структура типичного HTML-документа, описывающего Web-страницу, выглядит следующим образом:
<html>
<head>
Заголовок документа
<title> Название документа, отображаемое в строке заголовка окна обозревателя </ title >
</head>
<body>
Основная часть HTML-документа
</body >
</html>
В соответствии с приведенной выше структурой сформируем HTML-документ:
<html>
<head>
Магазин «КНИГА»
<TITLE>ЗАО «Знания – сила»</TITLE >
</head>
<body>
</body >
</html>
Для ввода текста этого HTML-документа можно воспользоваться стандартной программой Windows «Блокнот». Следует внимательно отнестись к процессу сохранения документа. При определении имени файла важно не забыть добавить расширение htm. Например, сохраним только что созданный нами HTML-документ в файле test1.htm. Задание расширения htm позволит в дальнейшем открывать файл test1.htm с помощью обозревателя.
На рис 1.1. представлен результат обработки обозревателем текста HTML-документа, в котором указаны заголовок документа и название страницы. Для того чтобы страница выглядела более выразительно, обычно заголовок выделяется более крупным шрифтом и центрируется. Эти операции позволяют осуществлять теги форматирования текста.