Наиболее распространенными 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. В появившемся контекстном меню выбираем Свойства горизонтальной линии и нажимаем левую клавишу мыши.

6. В появившейся диалоговой панели Свойства горизонтальной линии отредактировать: Ширину, высоту, выравнивание, цвет. Выбрать 100%, 10, по центру, зеленый.

б) Вставка рисунка.

После зеленной линии вставить рисунок. Для этого:

1. Не закрывая окно создаваемой Веб -страницы выполнить команды Пуск ► Найти.

2. В диалоговом окне Результаты поиска выбрать Файлы и папки.

3. В разделе Поиск файлов и папок в окне Искать имена файлов или папок занести *.gif и нажать кнопку Найти.

4. Выбрать в окне Результаты поиска один из рисунков. (При наведении курсора на рисунок его вид отображается наверху справа).

5. Скопировать рисунок в буфер обмена. Для этого навести указатель курсора на рисунок, нажать правую кнопку мыши и в появившемся контекстном меню выбрать пункт Копировать.

6. Открыть папку со своей фамилией и в нее поместить выбранный рисунок. Для этого выполняются команды Правка ► Вставить.

7. Имя рисунка можно оставить без изменения ( например, cm-04), либо заменить на свое. Закрыть все окна, кроме окна с создаваемым документом.

8. В создаваемом Веб -документе установить курсор после зеленой линии.

9. Выполнить команды Вставка ► Рисунок ► Из файла.

10. В диалоговом окне Рисунок найти свою папку, в окне Имя файла указать имя рисунка, в окне Тип файла выбрать Все изображения и нажать кнопку Вставить.

11. Выбранный рисунок будет помещен после зеленой линии.

12. Отредактировать размещение рисунка. Для этого указатель курсора навести на рисунок, нажать праву. клавишу мыши и в появившемся контекстном меню выбрать пункт Свойства рисунка.

13. В диалоговом окне Свойства рисунка нажимаем клавишу Вид и выбираем Обтекание ( можно выбрать Нет, Слева, Справа). В разделе Положение выбираем По середине.

14. В разделе Размер проставляется галочка в окошке Задать размер. В разделах Ширина и Высота указываем ширину и высоту рисунка в точках или процентах ( примем в процентах и укажем 100 и 200).

15. Нажимается кнопка ОК.

16. Сохранить Веб- документ с внедренным рисунком. Для этого выполняются команды Файл ► Сохранить.

После рисунка вставить горизонтальную линию голубого цвета.

в) Вставка таблицы

После горизонтальной линии голубого цвета вставить таблицу. Для этого:

1. Поставьте курсор после голубой линии. На панели инструментов выполните команды Таблицы ► Вставить таблицу.

2. В диалоговом окне Вставка таблицы в разделе Параметры макета выбрать Задействовать параметры макета на основе содержимого таблицы.

3. В разделе Размер указать число строк и столбцов. Остальные параметры принять по умолчанию.

4. В таблицу введите три столбца и четыре строки. Заполните таблицу по прилагаемому образцу.

№№	Раздел	Страница
	Структура документа HTML
	Элемент HTML
	Гипертекстовые ссылки

5. Нажать кнопку ОК.

6. Сохранить таблицу в Веб -документе. Дайте команду Файл ► Сохранить, щелкните по кнопке Как файл и задайте имя Zadanie 10.htm. Подтвердите сохранение изображений, требующих преобразования формата.

7. а) Дважды щелкните по значку с именем Zadanie10.htm или

. б) Запустите обозреватель Internet Explorer (Пуск ► Программы ► Internet Explorer). Задайте команду Файл > Открыть. При помощи кнопки Обзор откройте файл Zadanie 10.htm.

9. Убедитесь, что созданный документ правильно отображается обозревателем.

10. Измените ширину окна обозревателя и посмотрите, как при этом меняется вид документа.

11. Вернитесь в программу FrontPage и дайте команду Вид► HTML.

12. Изучите автоматически созданный код HTML, определите, как с помощью флагов HTML реализованы использованные команды форматирования.

Задание III.6. «Создание WEB-документа при помощи табличного

процессора Excel 2003»

Цель занятия: Научиться создавать WEB-документы используя табличный процессор EXCEL. На выполнение задания отводится 15-30 минут.

Выполнение:

1. Активизируйте программу MS EXCEL.

2. В открывшемся окне программы создайте прайс-лист, согласно образцу, представленному на рисунке 4 и в соответствии с заданным вариантом.

3.Выберите команду Файл ► Сохранить как WEB-страницу.

4. В открывшемся диалоговом окне Сохранение документа выберите команду Опубликовать.

5. В диалоговом окне Публикация WEB-страницы раскройте список Выбрать. Выберите Лист 1.

6. Убедитесь, что в области Параметры просмотра снят флаг Добавить. Этот флаг управляет интерактивностью.

7. Задайте заголовок публикуемым данным, нажав кнопку Изменить. Введенный заголовок будет отображаться в заголовке браузера, независимо от текущего заголовкаWEB-страницы.

8. В поле Имя файла введите имя файла и полный путь к файлу.

9. Чтобы сразу увидеть результаты публикации в своем браузере установите флаг Открыть страницу в обозревателе.

10. Нажать кнопку Опубликовать.

Часть 2. Создание интерактивных Веб - страниц и динамической графики при помощи языка JavaScript

Одним из применений я зыка JavaScript является создание интерактивных HTML –документов и динамической графики в HTML –документах. При помощи языка можно создавать программы (сценарии), позволяющие пользователю осуществлять диалог на Веб - страницах, красочно оформлять Веб – страницы, используя при этом динамическую графику, вводить исходные данные при помощи различных средств управления и обрабатывать их, обрабатывать текстовую информацию. Программа на языке JavaScript представляет собой последовательность операторов. Если в одной строке располагаются несколько операторов, то между ними ставится разделитель-точка с запятой (; ). При размещении в каждой строке по одному оператору запись разделителя не обязательна.

Элементы языка JavaScript

2.1.1 Литералы. Литералом называются простейшие данные, с которыми может оперировать программа. Литералы могут задаваться в десятичном (число с основанием 10), шестнадцатеричном или восьмеричном представлении. Знак числа записывается перед числом. Вещественные числа записываются так, что дробная часть отделяется от целой части точкой. Например, число 123.456. Кроме того, может использоваться экспоненциальная форма записи. Например, записанное ранее число может быть представлено в виде 0.123456Е3. Строковый литерал представляет собой последовательность символов, заключенную в одинарные или двойные кавычки. Например, “программа” или ‘программа’.

2.1.2 Переменные. Переменные используются для хранения данных. Переменные представляются идентификаторами. Идентификатор должен начинаться с символа латинского алфавита, либо с символа подчеркивания. После первого символа могут идти символы латинского алфавита, цифры, знак подчеркивания. Перед идентификатором записывается служебное слово var. Например:

var a, b, c

var d=5

var e=true

var k= “программа”

В этом примере переменная d имеет тип number, e- логический тип, k -тип string (строка). Тип function имеют все стандартные функции и функции, определяемые пользователем. Тип Object присваивается объектам и переменным, которые могут хранить объекты. Переменные, описанные в частях программы Head и Body, имеют одну и ту же область действия. Это глобальные переменные. Переменные, описанные в теле функции, являются локальными. Они работают только в пределах использующей их функции. Все переменные, используемые в программе, должны быть описаны. Для неописанной переменной фиксируется ошибка. Для обозначения неопределенного значения используется литерал null.

Примечание: При записи переменных следует обращать внимание на регистр, на котором вводится переменная. Язык JavaScript критичен к записи прописного или строчного символа. Так, переменные К и к – это различные переменные.

2.1.3 Выражения. Выражения строятся из литералов, переменных, знаков операций и скобок. Результатом выполнения выражения может быть число (целое или вещественное), строка или логическое выражение. К основным операциям относятся: +(сложение), - (вычитание), * (умножение), / (деление), ++ (увеличение значения на единицу), -- (уменьшение значения на единицу).

2.1.4 Объекты клиента. Программа Обозреватель (браузер), обрабатывающая Веб – документ, создает объекты JavaScript. Они являются основными инструментальными средствами. Свойства объектов могут задаваться, либо определяться значениями параметров флагов (тегов) языка HTML. Структура документа отражается в иерархической структуре объектов, соответствующих HTML – флагам. Родителем всех объектов является объект Windows. Он располагается на самом верхнем уровне иерархии. Этот объект представляет окно браузера и создается при запуске браузера. Для открытия нового окна и отображения в нем нового документа используется метод open, для закрытия используется метод close.

Подчиненными по отношению к объекту Windows являются объекты document, history, location, frame. Объект document в зависимости от своего содержания может иметь объекты, являющиеся для него подчиненными или дочерними. К подчиненным относятся объекты form, image, link, area, anchor, layer, plugin, applet. Для каждой страницы создается один объект document. Некоторые свойсва его соответствуют параметрам флага < Body> : bgColor, fgColor, linkColor, alinkColor, vlinkColor.

Методы write и writeln записывают в документ текст, задаваемый параметрами. Например, для отображения на экране монитора результатов действий, задаваемых в программе, записывается следующий текст:

document.write (“текст”, формула или переменная) или

document.writeln (“текст”, формула или переменная).

Во втором случае вывод производится в новую строку. Если документ содержит графические изображения, то доступ к ним может быть осуществлен при помощи переменной, указанной в параметре name тега < IMG> . Например:

< IMG src=”имя рисунка.gif или .jpg ” name=p1 width=100>. Здесь “имя рисунка.gif или .jpg” это задаваемое пользователем имя рисунка с расширением .gif или .jpg. Имя переменной в программе p1, параметр width=100 –это ширина рисунка в пикселях. Обязательный параметр src определяет URL –адрес файл с изображением. Другим способом доступ к графическим рисункам осуществляется при помощи свойства images объекта image. Если документ содержит несколько рисунков, то доступ к первому рисунку осуществляется при помощи конструкции document.images(0), ко второму рисунку document.images(1) и т.д.

Если Веб- страница содержит форму, то доступ к ней осуществляется либо при помощи флагов < Form> ……< /Form> , либо при помощи конструкции document.forms(0), document.forms(1)…и т.д. Например, можно записать:

< FORM name=”form1”>

Выражения, реализуемые в форме

< /FORM>

При записи document.forms(0) реализуется доступ к первой форме, при записи document.forms(1) реализуется доступ ко второй форме и т.д.

Свойства объекта history представляют адреса ранее загруженных Веб - документов. Свойства объекта location связаны с URL –адресами отображаемого документа. Свойства объекта frame связаны со специальным способом представления данных.

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

Оператор присвоения	Сокращенная форма оператора
X=X+Y	X+=Y
X=X-Y	X-=Y
X=X*Y	X*=Y
X=X/Y	X/=Y
X=X%Y	X%=Y

В языке используются операции отношения, применимые к операндам любого типа. Это операции < (меньше), < =(меньше или равно), = = (равно), ! = (не равно), > =( больше или равно), > (больше). К логическим операциям относятся! ( не), & & (логическое И), │ │ (логическое ИЛИ). Например, если переменная Х имеет значение true, то выражение! Х имеет значение false.

Для строковых переменных справедлива операция соединения строк. Например, в выражении a=”строковая” + “переменная” переменная а получит значение ”строковая переменная”. Если a=”строковая” и b=”переменная”, то в результате выполнения операции а+=в переменная а получит значение ”строковая переменная”. Дальше записаны операции в последовательности, соответствующей убыванию приоритетов операций: ++ (инкремент), - - (декремент),! (отрицание), - (унарный минус), *(умножение), / или % (деление, остаток от деления), +(сложение), - (вычитание), операции сравнения (<, >, < =, > =), = = (равенство), ! = (неравенство), & & (логическое И), │ │ (логическое ИЛИ), операции присваивания ( =, +=, -=, *=, /=, %=, ! =). Для изменения приоритета выполнения операций используются скобки. Например, в выражении x=(a+b)/c сначала выполняется операция суммирования переменных а и в, а затем деление суммы на переменную с.

2.1.5 Функции. Часть программы( подпрограммы), которая может многократно использоваться в процессе работы программы может выделяться в структурную единицу- функцию. Функции могут быть стандартными и написанными пользователем. К стандартным функциям относятся, например, такие математические функции как abs( абсолютное значение переменой), тригонометрические функции sin, cos, tan, экспонента exp и др. Они относятся к объекту Math и являются его методами. Например, для вычисления синуса переменной Х и присвоения этого значения переменной y следует записать y=Math.sin(x). Описание функций, создаваемых пользователем, имеет вид function F (v) {s}. Здесь F это имя функции, v это формальные параметры. В списке формальных параметров переменные разделяются запятой. Тело функции s. Это выражения, по которым вычисляется значение функции. В нем задаются действия, которые необходимо выполнить для получения результата. Для задания конкретных значений параметрам функции они должны быть описаны в обращении к функции. Обращение к функции имеет вид: F(w) или F(w1, w2, …, wn), где w1, w2, …, wn – это фактические значения, с которыми производятся действия, записанные в теле функции. При отсутствии параметров описание функции имеет вид F( ){S}, а вызов функции F( ).

2.1.6 Включение программ (сценариев) на языке JavaScript в HTML – документ. Сценарии (программы) на языке JavaScript помещаются в Веб – документ, написанный на языке HTML при помощи флагов (тегов) < script> и < /script>. Параметром флага script является слово language. При использовании языка JavaScript в тексте HTML – документа запись имеет вид < script language =” JavaScript ” >, при использовании языка VBSript запись имеет вид < script language =” VBScript ” > . Параметр language =” JavaScript ” можно не записывать, так как браузер выбирает этот язык по умолчанию. При использовании в Веб – документе флагов, которые не поддерживаются конкретным браузером, Веб – страница может отображаться неверно. Для исключения этого рекомендуется помещать операторы языка JavaScript в флаги комментария <!.....-->, а перед закрывающим флагом рекомендуется ставить символы //. Таким образом, сценарий на языке JavaScript в теле HTML – документа имеет вид:

< script>

<! --//

Операторы языка JavaScript

//-->

< /script>

HTML – документ может содержать несколько сценариев на языке JavaScript. Они могут помещаться как в раздел < Head>, так и в раздел < Body> .

Часть3. Примеры и задания по использованию сценариев на языке JavaScript в HTML – документе

Предыдущая 1 2 3 4 5 678 9 10 11 Следующая