Электронная коммерция. Учебное пособие по выполнению практических работ
.pdf
Лабораторный практикум по первой части третьей темы
13. Посмотрите отображение этого файла. Установите связь между элементами кода HTML и фрагментами документа, отображаемого на экране. Текст Zadanie1 будет выделен как гиперссылка. Активизация этого текста вызывает появление файла Zadanie1.
Вид созданного документа показан на рисунке 3.2.
Рис. 3.2. Создание Web-страницы с элементами форматирования
51
Часть 1. Разработка WEB-документов языком HTML
Задание 3.3. Создание таблиц
Цель занятия: научиться создавать простейшую Web-страницу с включением таблицы. На выполнение задания отводится 30—45 минут.
Выполнение:
1.Скопируйте в свою папку файл с именем Zadanie1.txt.
2.Удалите в скопированном файле весь текст, находящийся между флагами <BODY> и </BODY>. Последующий текст будет вводиться после флага <BODY>. В данном упражнении используется список номеров телефонов.
3.Введите флаг <TABLE BORDER= "10" WIDTH= "100%">.
4.Введите строку <CAPTION= "TOP"> Список телефонов </CAPTION>.
5.Первая строка таблицы содержит заголовки столбцов. Введите:
<TR BGCOLOR= "YELLOW" ALIGN= "CENTER"> <TH> СЛУЖБА <TH> Номер телефона.
6. Введите:
<TR> <TD> Курс валют ЦБ РФ </TD> <TD> 587219 </TD> <TR><TD> Медицинский центр РАМН </TD> <TD>
9648401</TD>
<TR> <TD> Образование в Москве </TD> <TD> 9650009 </TD>
7.Завершите таблицу флагом </TABLE>.
8.Сохраните документ под именем Zadanie3.htm и второй раз под именем Zadanie3.txt.
9.Дважды щелкните левой клавишей мыши при расположении указателя курсора на значке с именем Zadanie3.htm, ëèáî:
10.Запустите обозреватель Internet Explorer (Пуск Программы Internet Explorer). Дайте команду Файл Открыть. Щелкните по кнопке Обзор и откройте файл Zadanie3.htm.
11.Изучите, как созданная таблица отображается в программе Internet Explorer.
Вид созданного документа показан на рисунке 3.3.
Задание 3.4. Создание прайс-листа средствами языка HTML
Средствами языка HTML создайте прайс-лист. Образец прайс-листа показан на рисунке 3.4.
52
Лабораторный практикум по первой части третьей темы
Список телефонов
Служба |
Номер телефона |
Курсы валют ЦБ РФ |
2587219 |
Медицинский центр РАМН |
9648401 |
Образование в Москве |
9650009 |
Погода в Москве |
9759111 |
|
|
Рис. 3.3. Создание таблицы
Рис. 3.4. Прайс-лист |
Для этого прайс-листа ниже показан листинг 3.2 с кодом программы на языке HTML.
Листинг 3.2. Код программы прайс-листа на языке HTML
<HTML>
<HEAD>
<TITLE> прейскурант компании ООО"Ф-Центр" </TITLE> </HEAD>
<BODY>
<H1> ООО"Ф-Центр" </H1> <HR>
<H2> Москва, ВВЦ, павильон ¹74, тел. 785-1-785 <P> наш адрес в Интернет e-mail: f-center@mtu-net.ru </H2>
<HR SIZE="10" WIDHT=80% ALIGN="CENTER" COLOR="GREEN"> <TABLE BORDER="10" WIDHT=100%>
<CAPTION="TOP"> компьютер </CAPTION> <TR BGCOLOR="YELLOW" ALIGN="CENTER"> <TH> модель <TH> конфигурация <TH> цена
53
Часть 1. Разработка WEB-документов языком HTML
<TR> <TD> M700</TD>
<TD> AMD DURON-700/DIMM 128/10WD/MIDI ATX A312 </TD> <TD> 9294 </TD>
<TR> <TD> M1400 </TD>
<TD> AMD ATHLON-1400/DIMM 128/10WD/MIDI ATX A312 </TD> <TD> 11815 </TD>
<TR> <TD> M2 735 CEL </TD>
<TD> CELERON-733/DIMM 128/10WD/MIDI ATX A312 </TD> <TD> 10105 </TD>
<TR> <TD> M2 1000 CEN </TD>
<TD> CELERON-1000/DIMM 128/10WD/MIDI ATX A312 </TD> <TD> 10340 </TD>
<TR> <TD> M3 866 </TD>
<TD> PENTIUM 3 866/DIMM 128/10WD/MIDI ATX A312 </TD> <TD> 11906 </TD>
<TR> <TD> M 4 P4 1,8 GHZ </TD>
<TD> PENTIUM 4 1,8 GHZ/DIMM 128/10WD/MIDI ATX A312 </TD> <TD> 18227 </TD>
</BODY>
</HTML>
Вставьте в прайс-лист рисунок на соответствующую тему из коллекции Интернета.
Варианты задания.
|
|
Вариант 1 |
|
Дисководы |
|
|
|
|
Наименование |
Модель |
Öåíà, ðóá. |
|
|
|
CD DRIVE |
IDE 40X TEAC «CD54CE» |
1436 |
|
|
|
CD DRIVE |
IDE 52X SAMSUNG «152» |
934 |
|
|
|
DVD ROM DRIVE |
16(40) XLG «8160B» |
2010 |
|
|
|
DVD ROM DRIVE |
16(40) PANASONIC «SR-8587» |
2472 |
|
|
|
|
|
|
|
|
Вариант 2 |
|
Видеокарты |
|
|
|
|
Наименование |
Модель |
Öåíà, ðóá. |
|
|
|
SVGA AGP |
32 Mb «GeForce 2 MX» |
1482 |
|
|
|
|
|
|
54
Лабораторный практикум по первой части третьей темы
Наименование |
|
Модель |
Öåíà, ðóá. |
|
|
|
|
SVGA AGP |
64 |
Mb «GeForce2 Ti» |
2835 |
|
|
|
|
SVGA AGP |
16 Mb STB «VOODOO-3» SDRAM |
1647 |
|
|
|
|
|
SVGA AGP |
64 |
Mb SUMA PLATINUM GeForce Ti DDR |
2801 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Вариант 3 |
|
|
|
Дисководы FD |
|
|||
|
|
|
|
|
|
|
|
Наименование |
|
|
|
|
Модель |
Öåíà, ðóá. |
|
|
|
|
|
|
|
|
|
FDD 3,5” |
|
SAMSUNG |
327 |
||||
|
|
|
|
|
|
|
|
FDD 3,5” |
|
MITSUMI |
346 |
||||
|
|
|
|
|
|
|
|
FDD 3,5” |
|
PANASONIC |
346 |
||||
|
|
|
|
|
|
|
|
FDD 3,5” |
|
SONY |
|
|
|
|
360 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Вариант 4 |
|
|
Материнские платы |
|
|
|||
|
|
|
|
|
|
|
|
Наименование |
|
|
Öåíà, ðóá. |
|
Гарантия |
||
|
|
|
|
|
|
|
|
ASUS P4B266-C ATX |
|
|
2930 |
|
6 ìåñ. |
||
|
|
|
|
|
|
|
|
ChainTech CT-9BJD ATX |
|
|
2640 |
|
6 ìåñ. |
||
|
|
|
|
|
|
|
|
EPOX EP-4BEA2 ATX |
|
|
2962 |
|
6 ìåñ. |
||
|
|
|
|
|
|
|
|
Gigabyte GA-8GE667 ATX |
|
|
2415 |
|
6 ìåñ. |
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Вариант 5 |
|
|
|
Процессоры |
|
|
||
|
|
|
|
|
|
||
Наименование |
|
|
Öåíà, ðóá. |
|
Гарантия |
||
|
|
|
|
|
|
||
Celeron 850 MHz FPGA |
|
|
1256 |
|
1 ãîä |
||
|
|
|
|
|
|
||
Celeron 1200 MHz FPGA |
|
|
1578 |
|
1 ãîä |
||
|
|
|
|
|
|||
Pentium III 1200 256 K 133 MHz |
|
3510 |
|
1 ãîä |
|||
|
|
|
|
|
|
||
Pentium IV 1500 |
|
|
3787 |
|
1 ãîä |
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
55
Часть 1. Разработка WEB-документов языком HTML
Задание 3.5. Создание Web-документа при помощи редактора FrontPage2003
Цель занятия: научиться создавать простейшие Web-документы, используя редактор FrontPage 2003. На выполнение задания отводится 30 минут.
Наиболее распространенными HTML-редакторами являются FrontPage, HotDog. Рассмотрим создание Web-документа, используя редактор FrontPage 2003.
Выполнение:
1.Запустите программу FrontPage 2003, выполнив команды Пуск Программы FrontPage2003 либо активизировав значок программы на рабочем столе.
2.Выполните команду Файл Создать.
3.В открывшемся с правой стороны списке в разделе Создать страницу активизируем пункт Пустая страница.
4.Открывается пустая страница, на которой затем будет создаваться веб-страница.
5.Выполняем команду Файл Сохранить как.
6.В разделе Имя файла заносим имя, например, Zadanie 10.
Âполе Тип файла выбираем веб-страница. В поле Папка указываем имя своей папки (папки со своей фамилией. Если она не создана, то нужно ее создать).
7.Нажимаем кнопку Сохранить.
Для открытия созданного веб-документа (пока пустого) активизируем программу FrontPage2003.
Заполнение веб-страницы.
Вставка горизонтальной линии
1.В поле Имя выбираем значок с именем созданного веб-доку- мента (в нашем примере Zadanie 10) и дважды нажимаем левую клавишу мыши.
2.Открывается пустая страница созданного веб-документа.
3.В поле Вставка выбираем Горизонтальная линия.
4.Устанавливаем курсор на появившейся горизонтальной линии и нажимаем правую клавишу мыши.
5.В появившемся контекстном меню выбираем Свойства горизонтальной линии и нажимаем левую клавишу мыши.
56
Лабораторный практикум по первой части третьей темы
6. В появившейся диалоговой панели Свойства горизонтальной линии отредактировать ширину, высоту, выравнивание, цвет. Выбрать 100%, 10, по центру, зеленый.
Вставка рисунка
После зеленой линии вставить рисунок. Для этого:
1.Не закрывая окно создаваемой веб-страницы выполнить команды Пуск Найти.
2.В диалоговом окне Результаты поиска выбрать Файлы и папки.
3.В разделе Поиск файлов и папок в окне Искать имена файлов или папок занести *.gif и нажать кнопку Найти.
4.Выбрать в окне Результаты поиска один из рисунков. (При наведении курсора на рисунок его вид отображается наверху справа.)
5.Скопировать рисунок в буфер обмена. Для этого навести указатель курсора на рисунок, нажать правую кнопку мыши и в появившемся контекстном меню выбрать пункт Копировать.
6.Открыть папку со своей фамилией и в нее поместить выбранный рисунок. Для этого выполняются команды Правка Вставить.
7.Имя рисунка можно оставить без изменения (например, cm-04) либо заменить на свое. Закрыть все окна, кроме окна с создаваемым документом.
8.В создаваемом веб-документе установить курсор после зеленой линии.
9.Выполнить команды Вставка Рисунок Из файла.
10.В диалоговом окне Рисунок найти свою папку, в окне Имя файла указать имя рисунка, в окне Тип файла выбрать Все изображения и нажать кнопку Вставить.
11.Выбранный рисунок будет помещен после зеленой линии.
12.Отредактировать размещение рисунка. Для этого указатель курсора навести на рисунок, нажать правую клавишу мыши и в появившемся контекстном меню выбрать пункт Свойства рисунка.
13.В диалоговом окне Свойства рисунка нажимаем клавишу Вид и выбираем Обтекание (можно выбрать Нет, Слева, Справа).
Âразделе Положение выбираем По середине.
14.В разделе Размер проставляется галочка в окошке Задать размер. В разделах Ширина и Высота указываем ширину и высоту рисунка в точках или процентах (примем в процентах и укажем 100 и 200).
15.Нажимается кнопка ОК.
57
Часть 1. Разработка WEB-документов языком HTML
16. Сохранить веб-документ с внедренным рисунком. Для этого выполняются команды Файл Сохранить.
После рисунка вставить горизонтальную линию голубого цвета.
Вставка таблицы
После горизонтальной линии голубого цвета вставить таблицу. Для этого:
1.Поставьте курсор после голубой линии. На панели инструментов выполните команды Таблицы Вставить таблицу.
2.В диалоговом окне Вставка таблицы в разделе Параметры макета выбрать Задействовать параметры макета на основе содержимого таблицы.
3.В разделе Размер указать число строк и столбцов. Остальные параметры принять по умолчанию.
4.В таблицу введите три столбца и четыре строки. Заполните таблицу по прилагаемому образцу.
¹ |
Раздел |
Страница |
|
|
|
1 |
Структура документа HTML |
1 |
2 |
Элемент HTML |
2 |
3 |
Гипертекстовые ссылки |
3 |
|
|
|
5.Нажать кнопку ОК.
6.Сохранить таблицу в веб-документе. Дайте команду Файл Сохранить, щелкните по кнопке Êàê ôàéë и задайте имя Zadanie10.htm. Подтвердите сохранение изображений, требующих преобразования формата.
7.Дважды щелкните по значку с именем Zadanie10.htm èëè запустите обозреватель Internet Explorer (Пуск Программы Internet Explorer). Задайте команду Файл Открыть. При помощи кнопки Обзор откройте файл Zadanie10.htm.
9.Убедитесь, что созданный документ правильно отображается обозревателем.
10.Измените ширину окна обозревателя и посмотрите, как при этом меняется вид документа.
11.Вернитесь в программу FrontPage и дайте команду Âèä HTML.
12.Изучите автоматически созданный код HTML, определите, как с помощью флагов HTML реализованы использованные команды форматирования.
58
Лабораторный практикум по первой части третьей темы
Задание 3.6. Создание Web-документа при помощи табличного процессора Excel 2003
Цель занятия: научиться создавать Web-документы, используя табличный процессор EXCEL. На выполнение задания отводится 15—30 минут.
Выполнение:
1.Активизируйте программу MS EXCEL.
2.В открывшемся окне программы создайте прайс-лист, согласно образцу, представленному на рисунке 3.4, и в соответствии
ñзаданным вариантом.
3.Выберите команду Файл Сохранить как Web-страницу.
4.В открывшемся диалоговом окне Сохранение документа укажите имя папки (папка с фамилией студента), задайте имя файла, например, Zadanie11.htm, тип файла Веб-страница (*.htm; *.html), выберите команду Опубликовать.
5.В диалоговом окне Публикация Web-страницы раскройте список Выбрать. Выберите Лист 1 или другой лист, на котором создан документ.
6.Убедитесь, что в области Параметры просмотра ñíÿò ôëàã Добавить. Этот флаг управляет интерактивностью.
7.Задайте заголовок публикуемым данным, нажав кнопку Изменить. Введенный заголовок будет отображаться в заголовке браузера, независимо от текущего заголовка Web-страницы.
8. ïîëå Имя файла введите имя файла и полный путь к файлу.
9.Чтобы сразу увидеть результаты публикации в своем браузере, установите флаг Открыть страницу в обозревателе.
10.Нажать кнопку Опубликовать.
11.Если флаг Открыть страницу в обозревателе не установлен, то для открытия и просмотра созданного фрагмента необходимо войти в свою папку, выбрать значок созданного файла с расширением .htm и дважды нажать левую клавишу мыши.
59
Часть 2. Создание интерактивных веб-страниц и динамической графики при помощи языка JavaScript
Язык JavaScript является объектно-ориентированным языком создания сценариев, входящих в состав HTML-документа. Он является подмножеством языка С и унаследовал все основные особенности языка С++. В его основе лежит механизм манипулирования объектами, однако он не поддерживает классы и наследование. В нем отсутствуют многие стандартные средства, присущие языкам программирования, как управление файлами, системными и сетевыми ресурсами. Язык JScript — это версия JavaScript, разработанная фирмой Microsoft для браузера Internet Explorer. В каче- стве альтернативы этому языку фирма Microsoft разработала язык сценариев VBScript, который базируется на синтаксисе Visual Basic.
Одним из применений языка JavaScript является создание интерактивных HTML-документов и динамической графики в HTML-документах. При помощи языка можно создавать программы (сценарии), позволяющие пользователю осуществлять диалог на веб-страницах, красочно оформлять веб-страницы, используя при этом динамическую графику, вводить исходные данные при помощи различных средств управления и обрабатывать их, а также текстовую информацию. Программа на языке JavaScript представляет собой последовательность операторов. Если в одной строке располагаются несколько операторов, то между ними ставится разделитель-точка с запятой (;). При размещении в каждой строке по одному оператору запись разделителя не обязательна.
2.1. Элементы языка JavaScript
2.1.1. Литералы
Литералом называются простейшие данные, с которыми может оперировать программа. Литералы могут задаваться в десятичном (число с основанием 10), шестнадцатеричном или восьмеричном представлении. Знак числа записывается перед числом. Вещественные числа записываются так, что дробная часть отделяется от
60