Лабораторные работы по компьютерным сетям

ЛАБОРАТОРНАЯ РАБОТА №1

Тема работы: Диагностика IP-протокола.

Цель работы: Научиться проверять работоспособность сетевого подключения.

Теоретическая часть: Существуют различные утилиты, позволяющие быстро продиагностировать IP-подключение. Однако большинство операций легко может быть выполнено с использованием команд самой операционной системы.

Пользователи Windows XP для диагностики сетевого подключения могут воспользоваться специальным мастером. Эта программа вызывается из меню задачи Сведения о системе (Пуск > Все программы > Стандартные > Служебные > Сведения о системе > меню Сервис > Диагностика сети):

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

Ход работы:

Ipconfig

Для отображения параметров IP-протокола используются утилиты ipconfig (Windows NT/2000/XP) и winipcfg (Windows 9x). Эта утилита выводит на экран основные параметры настройки протокола TCP/IP: значения адреса, маски, шлюза.

1. Пуск, выберите строку меню Выполнить, наберите символы cmd и нажмите клавишу Enter на клавиатуре.

2. ipconfig /all. При нормальной работе компьютера на экран должен вывестись примерно такой листинг:

Windows IP Configuration

Host Name . . . . . . . . . . . . : vest

Primary Dns Suffix . . . . . . . : tvs.tomsk.ru

Node Type . . . . . . . . . . . . : Hybrid

IP Routing Enabled. . . . . . . . : No

WINS Proxy Enabled. . . . . . . . : No

DNS Suffix Search List. . . . . . : tvs.tomsk.ru

tomsk.ru

Ethernet adapter Local Area Connection:

Connection-specific DNS Suffix . : tvs.tomsk.ru

Description . . . . . . . . . . . : Intel(R) PRO/100 S Desktop Adapter

Physical Address. . . . . . . . . : 00-02-B3-8D-44-53

Dhcp Enabled. . . . . . . . . . . : Yes

Autoconfiguration Enabled . . . . : Yes

IP Address. . . . . . . . . . . . : 83.172.10.54

Subnet Mask . . . . . . . . . . . : 255.255.255.0

Default Gateway . . . . . . . . . : 83.172.10.254

DHCP Server . . . . . . . . . . . : 83.172.10.2

DNS Servers . . . . . . . . . . . : 192.168.0.1

83.172.10.2

Primary WINS Server . . . . . . . : 83.172.10.2

Secondary WINS Server . . . . . . : 213.183.109.3

Lease Obtained. . . . . . . . . . : 24 августа 2004 г. 9:40:41

Lease Expires . . . . . . . . . . : 27 октября 2004 г. 9:40:41

Отключите сетевое подключение, повторите команду. При отсутствующем соединении на экран выводится примерно такой листинг:

Windows IP Configuration

Host Name . . . . . . . . . . . . : vest

Primary Dns Suffix . . . . . . . : tvs.tomsk.ru

Node Type . . . . . . . . . . . . : Hybrid

IP Routing Enabled. . . . . . . . : No

WINS Proxy Enabled. . . . . . . . : No

DNS Suffix Search List. . . . . . : tvs.tomsk.ru

tomsk.ru

Ethernet adapter Local Area Connection:

Media State . . . . . . . . . . . : Media disconnected

Description . . . . . . . . . . . : Intel(R) PRO/100 S Desktop Adapter

Physical Address. . . . . . . . . : 00-02-B3-8D-44-53

Обратите внимание, что программа вывела на экран только данные о "физических" параметрах сетевой карты и указала, что отсутствует подключение сетевого кабеля (Media disconnected).

В составе Windows 95/98/ME существует программа, которая в графическом режиме показывает основные настройки протокола TCP/IP:

Это winipcfg. Для вызова программы следует набрать ее имя в командной строке и нажать клавишу Enter (это возможно только в том случае, если Вы работаете с ОС Windows 95/98/ME).

Ping

Команда используется для проверки протокола TCP/IP и достижимости удаленного компьютера. Она выводит на экран время, за которое пакеты данных достигают заданного в ее параметрах компьютера.

Проверка правильности установки протокола TCP/IP. Откройте командную строку и выполните команду:

ping 127.0.0.1

Адрес 127.0.0.1 — это личный адрес любого компьютера. Таким образом, эта команда проверяет прохождение сигнала "на самого себя". Она может быть выполнена без наличия какого-либо сетевого подключения. Вы должны увидеть приблизительно следующие строки:

Pinging 127.0.0.1 with 32 bytes of data:

Reply from 127.0.0.1: bytes=32 time<1ms TTL=128

Ping statistics for 127.0.0.1:

Packets: Sent = 4, Received = 4, Lost = 0 (0% loss),

Approximate round trip times in milli-seconds:

Minimum = 0ms, Maximum = 0ms, Average = 0ms

По умолчанию команда посылает пакет 32 байта. Размер пакета может быть увеличен до 65 кбайт. Так можно обнаружить ошибки при пересылке пакетов больших размеров. За размером тестового пакета отображается время отклика удаленной системы (в нашем случае — меньше 1 миллисекунды). Потом показывается еще один параметр протокола — значение TTL. TTL — "время жизни" пакета. На практике это число маршрутизаторов, через которые может пройти пакет. каждый маршрутизатор уменьшает значение TTL на единицу. При достижении нулевого значения пакет уничтожается. Такой механизм введен для исключения случаев зацикливания пакетов.

Если будет показано сообщение о недостижимости адресата, то это означает ошибку установки протокола IP. В этом случае целесообразно удалить протокол из системы, перезагрузить компьютер и вновь установить поддержку протокола TCP/IP.

Проверка видимости локального компьютера и ближайшего компьютера сети. Выполните команду

ping 192.168.0.19

На экран должны быть выведены примерно такие строки:

Pinging 212.73.124.100 with 32 bytes of data:

Reply from 192.168.0.19: bytes=32 time=5ms TTL=60

Reply from 192.168.0.19: bytes=32 time=4ms TTL=60

Ping statistics for 212.73.124.100:

Packets: Sent = 4, Received = 4, Lost = 0 (0% loss),

Approximate round trip times in milli-seconds:

Minimum = 4ms, Maximum = 5ms, Average = 4ms

Наличие отклика свидетельствует о том, что канал связи установлен и работает.

Tracert

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

Например, команда tracert, которая обычно используется для показа пути прохождения сигнала до желаемого хоста. Зачастую это позволяет выяснить причины плохой работоспособности канала. Точка, после которой время отклика резко увеличено, свидетельствует о наличии в этом месте "узкого горлышка", не справляющегося с нагрузкой.

В командной строке введите команду:

tracert 192.168.0.19

Вы должны увидеть примерно такой листинг:

Tracing route to 192.168.0.19

over a maximum of 30 hops:

1 <1 ms <1 ms <1 ms 192.168.0.19

Trace complete.

Route

Команда Route позволяет просматривать маршруты прохождения сетевых пакетов при передаче информации.

Выведите на экран таблицу маршрутов TCP/IP, для этого в командной строке введите команду route print.

Net view

Выводит список доменов, компьютеров или общих ресурсов на данном компьютере. Вызванная без параметров, команда net view выводит список компьютеров в текущем домене.

1. net view и вы увидите список компьютеров своей рабочей группы.

2. net view \\192.168.0.250 для просмотра общих ресурсов расположенных на компьютере 192.168.0.250

Net send

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

1. net send 192.168.0.1 Привет. Проверка связи.

Ваше сообщение получит пользователь 192.168.0.1

2. net send * Привет. Проверка связи.

Ваше сообщение получат все пользователи рабочей группы.

ЛАБОРАТОРНАЯ РАБОТА №2

Тема работы: Создание HTML-документа.

Цель работы: Научиться создавать файлы, содержащие элементы форматирования, предписанные языком HTML.

Теоретическая часть: HTML-документ — это просто текстовый файл с расширением *.php или *.php). Вот самый простой HTML-документ:

<html>
     <head>
          <title>
               Лабораторная 2. Пример 1.
          </title>
     </head>
     <body>
          <H1>
               Привет!
          </H1>
          <P>
               Это простейший пример HTML-документа.
          </P>
          <P>
               Этот html-файл может быть одновременно открыт
               и в блокноте, и в Internet Explorer'е. Сохранив изменения в
               блокноте, просто нажмите кнопку Reload ('перезагрузить') в
               Explorer'е, чтобы увидеть эти изменения.
          </P>
     </body>
</html>
Вы можете посмотреть этот пример прямо сейчас.

Для удобства чтения в примере введены дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому пример мог бы выглядеть вот так:

<html>
<head>
<title>Лабораторная 2. Пример 1.</title>
</head>
<body>
<H1>Привет!</H1>
<P>Это простейший пример HTML-документа.</P>
<P>Этот html-файл может быть одновременно открыт и в блокноте, и в Internet Explorer'е. Сохранив изменения в блокноте, просто нажмите кнопку Reload ('перезагрузить') в Explorer'е, чтобы увидеть эти изменения.</P>
</body>
</html>
Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html>) называется меткой (по-английски — tag, читается "тег").

Большинство HTML-меток — парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением "/".

Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY> и <Body> будут восприняты браузером одинаково.

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

Ход работы:

Создание простейших файлов HTML.

Создайте папку, в которой Вы будете сохранять созданные Web-страницы.

Запустите стандартную программу Блокнот (Notepad) и наберите следующий текст с элементами форматирования:

<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
Расписание занятий на вторник
</BODY>
</HTML>

Сохраните файл под именем schedule.php.

Для просмотра созданной Web-страницы загрузите броузер Microsoft Internet Explorer.

Откройте в меню броузера Файл (File), Открыть (Open), Просмотр(Обзор — Browse) и найдите созданный ранее файл schedule.php, загрузите его. Убедитесь, что название Web-страницы (Учебный файл HTML) отразилось в верхней статусной строке броузера.

Управление расположением текста на экране.

Внесите изменения в текст, расположив слова "Расписание", "занятий", "на вторник" на разных строках:

<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
Расписание
занятий
на вторник
</BODY>
</HTML>

Сохраните внесенные изменения, с помощью команд Файл (File), Сохранить (Save).

Просмотрите с помощью броузера Microsoft Internet Explorer новую полученную Web-страницу используя клавишу F5 или с помощью кнопки Обновить (Refresh).

Предыдущие шаги не вызвали никаких видимых изменений в документе html — при отображении гипертекста броузеры автоматически размещают текст на экране, не принимая во внимание встречающиеся в файле переводы строк и идущих подряд пробелов. Существуют специальные команды, выполняющие перевод строки и задающие начало нового абзаца. Кроме того, существует команда, которая запрещает программе броузера каким-либо образом изменять форматирование текста и позволяет точно воспроизвести на экране заданный фрагмент текстового файла. Тег перевода строки <BR> отделяет строку от последующего текста или графики. тег абзаца <P> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац. Оба тега являются одноэлементными (не требуют закрывающего тега).

Внесите изменения в текст файла HTML:

<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
Расписание <P>занятий <BR>на вторник
</BODY>
</HTML>
Сохраните внесенные изменения в файле schedule.php. Просмотрите с помощью броузера обновленную страницу.

Выделение фрагментов текста.

Теги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов. Существует три тега выделения фрагментов текста: <B> : </B> — для выделения полужирным, <I> : </I> — для выделения курсивом, <U> : </U> — для выделения подчеркиванием.

Внесите изменения в файл schedule.php:

<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
<B>Расписание</B> <I>занятий</I> <U> на вторник</U>
</BODY>
</HTML>

Посмотрите новую полученную Web-страницу.

Попробуейте использовать вложение тегов: <I><B>Расписание</B></I> <I>занятий</I> <U> на вторник</U>

Изменение размера текста

      Существует два способа управления размером текста, отображаемого

       броузером:

o

o

1.Внесите изменения в файл schedule.php:

<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
<H1>Расписание</H1> <I>занятий</I> <U>на вторник</U>
</BODY>
</HTML>

Просмотрите обновления через браузер.

Внесите следующие изменения в файл schedule.php:

<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
<FONT SIZE="7">Расписание</FONT> занятий на вторник
</BODY>
</HTML>

Самостоятельно измените размер шрифта для текста "занятия на вторник", используя тег <FONT>.

Гарнитура и цвет шрифта

Тег <FONT> предоставляет возможности управления размером, начертанием и цветом текста. Изменение гарнитуры шрифта выполняется простым добавлением к тегу <FONT> атрибута FACE. Например, для изображения текста шрифтом Arial необходимо записать <FONT FACE="ARIAL">.

Для изменения цвета шрифта в теге <FONT> можно использовать атрибут COLOR="X". Вместо Х надо подставить либо название цвета (в кавычках), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на три составляющие: красную(R), зеленую (G), синюю (B), каждая из которых имеет значение от 0 до FF. Примеры записи цвета в формате RGB приведены в таблице:

Цвет

RRGGBB

black | черный

000000

white | белый

FFFFFF

red | красный

FF0000

green | зеленый

00FF00

azure | бирюзовый

00FFFF

blue | синий

0000FF

gray | серый

A0A0A0

purple | фиолетовый

FF00FF

yellow | желтый

FFFF00

brown | коричневый

996633

orange | оранжевый

FF8000

violet | лиловый

8000FF

Внесите изменения в файл schedule.php:

<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
<U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">Расписание</FONT></B></I></U>
занятий на вторник
</BODY>
</HTML>
2.

Выравнивание текста по горизонтали

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

Современные броузеры для выравнивания текста используется атрибут ALIGN=, который встраивается в теги абзаца или заголовка.

ALIGN=CENTER — Выравнивание по центру

ALIGN=RIGHT — Выравнивание по правому краю

ALIGN=LEFT — Выравнивание по левому краю

1.Внесите изменения в файл schedule.php:

<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY>
<P ALIGN=CENTER>
<FONT COLOR="#008080" SIZE="7"><B>Расписание</B></FONT><BR>
<FONT SIZE="6"><I>занятий на вторник</I></FONT>
</P>
</BODY>
</HTML>

Просмотрите обновления

Задание цвета фона и текста

Цвета фона и текста документа устанавливаются в начале файла HTML в теге <BODY>. Атрибут BGCOLOR= задает цвет фона страницы, TEXT= определяет цвет текста для всей страницы, LINK= и VLINK= определяют цвета соответственно непросмотренных и просмотренных ссылок.

Внесите изменения в файл schedule.php:

<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFCC" TEXT="#330066">
<P ALIGN=CENTER>
<FONT COLOR="#008080" SIZE="7"><B>Расписание</B></FONT><BR>
<FONT SIZE="6"><I>занятий на вторник</I></FONT>
</P>
</BODY>
</HTML>
Задание на самостоятельное выполнение.

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

Самостоятельно создайте собственный HTML-документ. Пусть это будет небольшой рассказ о себе и своих увлечениях.

ЛАБОРАТОРНАЯ РАБОТА №3

Тема работы: Размещение графики на Web-странице.

Цель работы: Научиться внедрять в html-документ графические изображения.

Теоретическая часть: Одна из наиболее привлекательных черт Web — возможность включения ссылок на графические и иные типы данных в HTML-документ. Делается это при помощи тега <IMG>. Использование этого тега позволяет значительно улучшить внешний вид и функциональность документов.

Существует два способа использования графики в HTML-документах. Первый — это внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Это наиболее используемая техника при проектировании документов, называемая иногда "inline image". Синтаксис тега:

<IMG SRC="URL" ALT="text" HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop>

Элементы синтаксиса тега:

URL

Обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает броузеру где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом броузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством броузеров.

ALT="text"

Этот необязательный элемент задает текст, который будет отображен броузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство броузеров выводит пиктограмму (иконку), активизировав которую, пользователь может увидеть изображение. тег ALT рекомендуется, если ваши пользователи используют броузер, не поддерживающий графический режим, например Lynx.

HEIGTH=n1

Этот необязательный параметр используется для указания высоты рисунка в пикселах. Если данный параметр не указан, то используется оригинальная высота рисунка. Это параметр позволяет сжимать или растягивать изображения по вертикали, что позволяет более четко определять внешний вид документа. Однако, некоторые броузеры не поддерживают данный параметр. С другой стороны, экранное разрешение у вашего клиента может отличаться от вашего, поэтому будьте внимательны при задании абсолютной величины графического объекта.

WIDTH=n2

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

ALIGN

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

С версии HTML 2.0 у тега <IMG> появились дополнительные параметры:

<IMG SRC="URL" ALT="text" HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop|absmiddle|baseline|absbottom BORDER=n3 VSPACE=n4 HSPACE=n5>

Новые параметры:

BORDER

Этот параметр позволяет автору определить ширину рамки вокруг рисунка.

VSPACE

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

HSPACE

То же самое, что и VSPACE, но только по горизонтали.

Фоновые рисунки

Большинство броузеров позволяет включать в документ фоновый рисунок, который будет отображаться на фоне всего документа.Описание фонового рисунка включается в тег BODY и выглядит следующим образом:

<BODY BACKGROUND="picture.gif">

Ход работы:

Размещение графики на Web-странице.

Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG. Перед выполнением упражнения поместите файл schedule.jpg в ту же папку, которая будет использована для хранения создаваемой Web-страницы.

Внесите изменения в файл schedule.php (если файл утрачен, создайте новый):

<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#330066">
<P ALIGN=CENTER>
<FONT COLOR="#008080" SIZE="7"><B>Расписание</B></FONT><BR>
<FONT SIZE="6"><I>занятий на вторник</I></FONT><BR><BR>
<IMG SRC="schedule.jpg">
</P>
</BODY>
</HTML>

Самостоятельно внесите изменения в файл schedule.php, опробовав использование таких атрибутов графики как ALT, BORDER, HEIGHT, WIDTH. Пример использования атрибутов приведен в таблице ниже:

Атрибут

Формат

Описание

ALT

<IMG SRC="schedule.jpg" ALT="картина">

Надпись "картинка" выводится на экран при подведении указателя мыши к изображению.

BORDER

<IMG SRC="schedule.jpg" BORDER="3">

Задает рамку вокруг изображения толщиной 3 пикселя.

ALIGN

<IMG SRC="schedule.jpg" ALIGN=TOP">

Выравнивает изображение относительно текста по верхней границе текста.

HEIGHT

<IMG SRC="schedule.jpg" HEIGHT=111>

Вертикальный размер изображения принудительно устанавливается в 111 пикселей.

WIDTH

<IMG SRC="schedule.jpg" WIDTH=220>

Горизонтальный размер изображения принудительно устанавливается в 220 пикселей.

VSPACE

<IMG SRC="schedule.jpg" VSPACE="8">

Атрибут добавляет верхнее и нижнее пустые поля высотой 8 пикселей.

HSPACE

<IMG SRC="schedule.jpg" HSPACE="8">

Добавляет левое и правое пустые поля шириной 8 пикселей.

Фоновое отображение графики на Web-странице

Поместите файл back.jpg в ту же папку, что и schedule.php.

Внесите изменения в файл schedule.php:

<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<BODY BACKGROUND="back.jpg" TEXT="#330066">
<P ALIGN=CENTER>
<FONT COLOR="#008080" SIZE="7"><B>Расписание</B></FONT><BR>
<FONT SIZE="6"> <I>занятий на вторник</I></FONT><BR><BR>
</P>
</BODY>
</HTML>
На экране вы увидите:

В действительности же графический файл back.jpg выглядит так:

Линейки и буквицы

Графические элементы возможно применять в качестве различного вида "украшений". Если Вы придумаете что-нибудь оригинальное, ваша веб-страница будет смотреться необычно и запомнится посетителю. Вот несколько ставших уже традиционными вариантов такого применения графики. Во-первых, это различные графические разделители, обычно горизонтальные, применяемые вместо горизонтальной черты (<HR>).

Вот так он выглядит в окне браузера:

Хотя тег <HR> и поддается настройке, графический разделитель вместо <HR> часто выглядит лучше:

Во-вторых, можно применить графический элемент в качестве буквицы. Встроить буквицу в текст можно следующим образом: <IMG SRC="r.gif" WIDTH="60" HEIGHT="59" BORDER="0" АLТ="В">

Разместите в Вашем документе schedule.php разделитель anim_hr.gif.

Задайте этому изображению высоту, равную 2 пикселям.

Сместите анимированный разделитель в центр документа.

В слове Расписание замените букву Р изображением, взять его Вы можете в папке с лабораторными работами(файл r.gif ).

Изменяя значение атрибута ALIGN, добейтесь наилучшего расположения буквы на экране.

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

Графические маркеры.

Язык HTML позволяет создавать маркированные и нумерованные списки.

Пример маркированного списка:

элемент списка

элемент списка

...

элемент списка

В терминах языка HTML это выглядит так:

<ul>
<li>элемент списка
<li>элемент списка
<li>...
<li>элемент списка
</ul>
Пример нумерованного списка:

5.

6.

7.

8.

В терминах языка HTML это выглядит так:

<ol>
<li>элемент списка
<li>элемент списка
<li>...
<li>элемент списка
</ol>
Одно дело, когда маркерами списка являются стандартные кружочки, и совсем другое — когда каждый сам имеет возможность создать маркер. Маркером может быть все, что угодно — от просто цветных и немного выпуклых кружков и квадратов до изощренных миниатюрных художественных работ. Чтобы проиллюстрировать возможность вставки в список графических маркеров, заменим кружки в маркированном списке на красные треугольники.

Сначала надо создать такой треугольник в любой программе либо скопировать уже готовый из папки с лабораторными работами(файл marker.gif )..

Этот файл нужно поместить рядом с уже созданным файлом schedule.php.

Теперь введем в тег <UL> атрибут STYLE= (этот атрибут подробнее мы рассмотрим при изучении CSS — Cascading Style Sheets):

<UL STYLE="list-style-image: url('marker.gif');">

Ваш список должен выглядеть так:

элемент списка

элемент списка

...

элемент списка

Обратите внимание на то, что при указании имени файла мы заключили его не в обычные двойные кавычки, а в одинарные. Это сделано потому, что все значение атрибута STYLE= заключено в двойные кавычки.

Оформление кнопок.

Еще одно частое применение графических элементов — это оформление кнопок. Вообще говоря, кнопка — это элемент взаимодействия с пользователем, так как предполагается, что когда он на ней нажмет, то что-нибудь произойдет. Сейчас мы не будем рассматривать методы такого взаимодействия. Пока мы только научимся создавать кнопки и использовать в них элементы графики.

Чтобы создать кнопку, поместите в Ваш html-документ следующий код:

<BUTTON>ЭТO KHОПKА</BUTTON>

В браузере она должна выглядеть так: ЭТO KHОПKА

Между тегами <BUTTON>...</BUTTON> можно поместить не только текст, но и изображение. Если мы поместим туда тег <IMG>, то получим кнопку с графическим изображением.

Скопируйте изображение home-button.gif из папки с лабораторными работами , поместите его в ту же папку, что и файл schedule.php.

Замените текст ЭТO KHОПKА на описание тега <IMG>, указывающего на файл home-button.gif.

В тег <BUTTON> введите атрибут onClick — этот атрибут позволяет описать действия, которые необходимо отработать браузеру при шелчке мыши по объекту. Обновленный тег должен вылядеть так:

<BUTTON onClick="location.href='http://www.mail.ru'">

Теперь при нажатии указателем мыши на созданную кнопку браузер перейдет на страницу www.mail.ru:

ЛАБОРАТОРНАЯ РАБОТА №4

Тема работы: Создание таблиц в HTML-документе.

Цель работы: Научиться создавать и редактировать таблицы в терминах языка HTML.

Теоретическая часть: Таблицы представляют собой особую часть HTML-документа. Данные в ней организованы в виде прямоугольной сетки, состоящей из вертикальных столбцов и горизонтальных рядов. Каждая клетка таблицы является ячейкой. Ячейки могут содержать в себе текст, графику или другую таблицу. Таблица состоит из трех основных частей:

название таблицы,

заголовки столбцов,

ячейки.

Таблица заполняется горизонтальными рядами ячейка за ячейкой слева направо. Заполнение начинается с левого верхнего угла и заканчивается правым нижним. Каждая ячейка должна быть заполнена. Для создания пустых ячеек используются пробелы.

Теги оформления таблиц

Тег

Форма записи

Примечание

TABLE

<TABLE>текст</TABLE>

Объявление таблиц.

TR

<TR>текст</TR>

Объявление строки.

TD

<TD>текст</TD>

Объявление ячейки в строке.

Атрибуты тега <TABLE>

Атрибут

Форма записи

Примечание

BORDER

<TABLE BORDER=X>

Задает рамку вокруг таблицы.

WIDTH

<TABLE WIDTH=XX%>

Задает ширину таблицы как ХХ% от ширины страницы или как ХХ пикселов.

BGCOLOR

<TABLE BGCOLOR="#RRGGBB">

Задает цвет фона таблицы.

Атрибуты тегов <TD> и <TR>

Атрибут

Форма записи

Примечание

ALIGN

<TD ALIGN=X>

Устанавливает выравнивание по горизонтали (Right, Left, Center)

VALIGN

<TD VALIGN=X>

Устанавливает выравнивание по вертикали (Top, Middle, Bottom, Baseline)

BGCOLOR

<TD BGCOLOR= "#RRGGBB">

Задает цвет фона ячейки.

Еще один тег для оформления ячеек таблиц — тег <TH>...</TH> — нужен для задания заголовочных ячеек. Он во всем совпадает с тегом <TD>, но в отличие от него, содержимое выдается жирным шрифтом и центрируется.

Если нужно задать заголовок всей таблицы, используйте тег <CAPTION параметры>...</CAPTION>. Он должен быть внутри тега <TABLE>, но вне описания ячеек. Тег имеет один параметр: ALIGN - указывает положение заголовка: он может быть в верхней (TOP) или нижней (BOTTOM) части таблицы.

Ход работы:

Создание простой таблицы.

Запустите стандартную программу Блокнот (Notepad) и наберите следующий текст с элементами форматирования:

<html>
<body>
<table border=2>
<tr><td>Мама</td></tr>
<tr><td>Папа</td></tr>
<tr><td>Сын</td></tr>
</table>
</body>
</html>

Для просмотра созданной Web-страницы используйте броузер Microsoft Internet Explorer.

Вставьте в тег <table> следующие атрибуты: width=50% align="center" bgcolor="yellow" bordercolor="blue". Просмотрите обновленный документ в браузере.

Добавьте в тег <table> атрибут: cellspacing=5. Просмотрите обновленный документ в браузере.

Измените значение атрибута cellspacing на 10, 30 и посмотрите что произойдет с таблицей.

Добавьте между второй парой тегов <tr>:</tr> теги <td> дядя </td> <td>дедушка</td> Просмотрите полученный документ в окне браузера.

Добавьте между третьей парой тегов <tr>:</tr> теги <td> дочь </td> <td>внучка</td> Просмотрите обновленный документ в браузере.

Добавьте в первой паре тегов <tr>:</tr> в теге <td> атрибут colspan=3. Просмотрите полученный документ в окне браузера.

Добавьте в первой паре тегов <tr>:</tr> в теге <td> еще атрибут align="center" Просмотрите полученный документ в окне браузера.

Добавьте во второй паре тегов <tr>:</tr> в первом теге <td> атрибут rowspan=2 Просмотрите полученный документ в окне браузера.

Удалите из второй пары тегов <tr>:</tr> тег <td>внучка</td> Просмотрите полученный документ в окне браузера.

Задание на самостоятельное выполнение.

Создайте страницу, содержащую расписание Вашей учебной группы. HTML-код должен выглядеть примерно так:

<HTML>
<HEAD>
<TITLE> Учебный файл HTML </TITLE>
</HEAD>
<TITLE> Расписание занятий V курса</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<P ALIGN=CENTER>
<FONT COLOR="RED" SIZE="6" FACE="ARIAL"><B> V курс </B></FONT><BR>
</P>
<FONT COLOR="BLUE" SIZE="4" FACE="COURIER"><B> Понедельник </B></FONT><BR>
<TABLE BORDER="1" WIDTH=100% BGCOLOR="99CCCC">
<TR BGCOLOR="CCCCFF" ALIGN=CENTER>
<TD>Пара</TD> <TD>3-8581</TD> <TD>3-8582</TD> <TD>3-8583</TD>
</TR>
2.
<TD>1</TD> <TD>Мировые инф. рес-сы</TD> <TD>Проектирование Интернет-приложений</TD> <TD>Тхн. проект-ия СП</TD>
</TR>
<TR>
<TD>2</TD> <TD>Проектирование Интернет-приложений</TD> <TD>Мировые инф. рес-сы</TD> <TD>Проектирование Интернет-приложений</TD>
</TR>
<TR>
<TD>3</TD> <TD>Тхн. проект-ия СП</TD> <TD>Тхн. проект-ия СП</TD> <TD>Мировые инф. рес-сы</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Сохраните файл под именем schedule_monday.php.

Используя различные варианты оформления таблиц, создайте файлы с именами schedule_tuesday.php и schedule_wednesday.php, содержащие расписание на вторник и среду, соответственно.

В файле schedule_friday.php создайте таблицу такого вида:

Для созданной таблицы установите следующие параметры: расположение на экране — центральное, ширина 550 пикселей. Цвет вертикальной общей ячейки — голубой. Цвет всей таблицы — зеленый. Расположение текста в ячейках — по центру.

В файле schedule_sunday.php создайте таблицу такого вида:

Для созданной таблицы установите следующие параметры: расположение на экране — левостороннее, ширина 550 пикселей. Цвет общей горизонтальной ячейки — красный. Цвет всей таблицы — желтый.

В файле schedule_thursday.php создайте таблицу такого вида:

Для созданной таблицы установите следующие параметры: расположение на экране — правостороннее, ширина 550 пикселей. Цвет общей ячейки — оранжевый. Цвет всей таблицы — серый.

ЛАБОРАТОРНАЯ РАБОТА №5

Тема работы: Создание гиперссылок в HTML-документе.

Цель работы: Научиться формировать гиперссылки на смежные документы Internet и на метки в текущем документе.

Теоретическая часть: Важнейшим свойством языка HTML является возможность размещения на странице ссылок на другие документы. Возможны ссылки:

на удаленный HTML файл,

на некоторую точку в текущем HTML-документе,

на любой файл, не являющийся HTML-документом.

В качестве ссылки можно использовать текст или графику.

Ссылки в пределах одного документа Такие ссылки требуют наличие двух частей: метки и самой ссылки. Метка определяет точку, к которой происходит переход по ссылке. Ссылка использует имя метки. Ссылки выделяются цветом или подчеркиванием, в зависимости от того, как настроен броузер.

Ссылка должна выглядеть примерно так: <A HREF="#ПН">Понедельник</A>

Перед именем метки ПН, указывающей куда производится ссылка, ставится символ #. Между символами > и < располагается текст Понедельник, на котором производится щелчок для перехода по ссылке.

Метка должна выглядеть примерно так: <A NAME="ПН">Понедельник</A>

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

Ссылка должна выглядеть примерно так: <A HREF="example.php">Пример</A>

После имени файла example.php, указывается между символами > и < текст Пример, по которому производится щелчок для перехода к этому файлу.

Ход работы:

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

Откройте файл yoga.php с помощью текстового редактора "Блокнот" (Notepad) и поместите в начало страницы следующий код:

<TABLE WIDTH=100%>
<TR>
<TD>Понедельник</TD>
<TD>Вторник</TD>
<TD>Среда</TD>
<TD>Четверг</TD>
<TD>Пятница</TD>
<TD>Суббота</TD>
</TR>
</TABLE>
<BR>

Определите для слова Суббота в расписании метку:

<A NAME="СБ">Суббота</A>

Определите ссылку для выбранной метки:

...
<TABLE WIDTH=100%>
<TR>
<TD>Понедельник</TD>
<TD>Вторник</TD>
<TD>Среда</TD>
...
<TD><A HREF="#СБ">Суббота</A></TD>
...

Сохраните файл.

Для просмотра созданной Web-страницы используйте броузер Microsoft Internet Explorer.

Вы должны увидеть Web-страницу с определенной в ее верхней части ссылкой "Суббота", щелчок мыши по ссылке должен перемещать видимую часть страницы, фокусируя внимание пользователя на расписании на выбранный день.

Определите ссылки и соответствующие метки для остальных дней недели.

Продемонстрируйте полученный документ преподавателю.

Создание ссылок на другой HTML-документ.

Создайте с помошью текстового редактора "Блокнот" (Notepad) файл my_schedule.php и поместите в начало страницы следующий код:

<TABLE WIDTH=100%>
<TR>
<TD>Понедельник</TD>
<TD>Вторник</TD>
<TD>Среда</TD>
<TD>Четверг</TD>
<TD>Пятница</TD>
<TD>Суббота</TD>
</TR>
</TABLE>
<BR>

Сохраните созданный файл в ту же папку, что и файлы schedule_monday.php, schedule_tuesday.php, ... schedule_sunday.php из лабораторной работы N4.

Определите для слова Понедельник ссылку на внешний документ:

4.           <A HREF="schedule_monday.php">Понедельник</A>

Сохраните файл.

Для просмотра Web-страницы используйте броузер Microsoft Internet Explorer.

Убедитесь, что после щелчка указателем мыши на ссылку Понедельник в окне браузера загружается страница schedule_monday.php.

Определите ссылки для остальных дней недели.

Создание графической ссылки.

Сохраните графический файл yoga.gif в ту же папку, что и файл my_schedule.php.

Внесите изменения в файл my_schedule.php так, чтобы в конце страницы была ссылка на страницу yoga.php. В качестве ссылки используется графический файл yoga.gif:

<CENTER>
<A HREF="yoga.php"><IMG SRC="yoga.gif"></A>
</CENTER>

Сохраните файл.

Для просмотра созданной Web-страницы используйте броузер Microsoft Internet Explorer.

Измените созданную ссылку таким образом, чтобы по щелчку мыши браузер загружал страницу yoga.php и фокусировался на метке Суббота.

Продемонстрируйте полученный документ преподавателю.

Задание карты ссылок.

Элемент IMG позволяет использовать изображения, отдельные части которых связаны со ссылками и позволяют выполнять переходы. Такие изображения называются картами (mар). Для определения полей карты используется атрибут

usemap="#Имя"

Это имя ставится в соответствие со значением соответствующих атрибутов элементов AREA и MAP (см. ниже), которые определяют конфигурацию карты. Задание атрибутов usemap придает элементу IMG свойства, характерные для элемента А, то есть возможность осуществления перехода.

Для определения карты необходимо обязательное совместное использование сразу трёх элементов: AREA, IMG и MAP.

Элемент MAP необходим для общего определения карты. Внутри него определяются области карты при помощи элементов AREA и задается имя карты при помощи атрибута:

name="Имя"

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

href="http://Адрес"

Атрибут для задания текста, заменяющего изображение карты, не является обязательным:

alt="Текст подсказки"

Атрибуты, определяющие форму области на карте, являются обязательными. Существует три стандартных вида областей: круг (circle), прямоугольник (rect) и многоугольник произвольной формы (polygon).

Для круга необходимо задать координаты центра и радиус (r), выраженные в пикселах. Координаты центра отсчитываются от левого края (х) и верхнего края (у) рисунка. Шаблон для задания круговой области таков:

shape="circle", coords=x, у, r

Для определения области произвольной конфигурации задают координаты (х, у) каждого из углов многоугольника, который точно или приблизительно соответствует по форме этой области:

shape="poly" coords=x1, у1, х2, у2, х3, у3 ...

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

shape="rect" coords=x1, y1, x2, y2

Сохраните графический файл week.jpg в ту же папку, что и файл my_schedule.php.

В начало файла my_schedule.php вставьте следующий код:

<map name="schedule_map">
<area аlt="Понедельник" shape="rect" coords="2, 0, 312, 31" href="schedule_monday.php">
<area аlt="Пятница" shape="rect" coords="2, 118, 312, 148" href="schedule_friday.php">
</map>
<img src="week.jpg" usemap="#schedule_map" alt="Расписание на неделю">

Сохраните файл.

Для просмотра созданной Web-страницы используйте броузер Microsoft Internet Explorer.

Вы должны увидеть Web-страницу с определенным в ее начале графическим изображением дней недели. При щелчке указателем мыши на дни Понедельник и Пятница браузер загружает страницы с соответствующим расписанием.

Определите ссылки на карте для остальных дней недели.

Продемонстрируйте полученный документ преподавателю.

ЛАБОРАТОРНАЯ РАБОТА №6

Тема работы: Создание веб-узла вымышленного магазина спорттоваров Championzone. Изучение программного продукта MS FrontPage 2002.

Цель работы: научиться форматировать текст, гиперссылки, добавлять рисунки, анимацию, клипы и файлы, форматировать списки, размещать объекты, создавать формы обратной связи и коллекции картинок, разработать структуру веб-узла.

Ход работы.

Эта лабораторная работа посвящена созданию веб-узла, на котором хранятся сведения о вымышленном магазине спорттоваров Championzone. Веб-узел будет содержать сведения о товарах, коллекцию фотографий, а также список ссылок на другие веб-узлы.

При создании веб-узла вам понадобятся графические и текстовые файлы, которые Вы можете найти в папке с лабораторными работами.

Общие сведения

Этапы выполнения этой работы:

· Открытие программы FrontPage

· Создание веб-страниц

· Работа с текстом и гиперссылками

· Вставка рисунков и файлов

· Форматирование списков

· Размещение объектов

· Добавление формы обратной связи

· Создание коллекции фотографий

· Создание структуры веб-узла

· Сохранение результатов

Запуск программы Microsoft FrontPage

Чтобы запустить программу Microsoft FrontPage, выполните следующие действия.

· На панели задач Windows нажмите кнопку Пуск Программы à Microsoft Office , а затем — пункт Microsoft FrontPage.

Если программа FrontPage используется в первый раз, на экран выводится пустая страница, готовая для редактирования.

Примечания

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

Чтобы закрыть веб-узел, в меню Файл выберите команду Закрыть.

Обзор рабочей области

Программа FrontPage 2002 обладает интегрированным интерфейсом, удобным для создания и редактирования веб-страниц, а также для управления веб-узлами из одного приложения. Панели инструментов и меню совместимы с другими программами Microsoft Office и являются полностью настраиваемыми. Удобные сочетания клавиш позволяют ускорить выполнение часто встречающихся задач, таких как открытие веб-узлов и веб-страниц, печать и многие другие команды.

В представленной далее таблице и на иллюстрации выделены наиболее часто используемые элементы интерфейса программы FrontPage 2002.

Элемент

Описание

Вкладка страницы

Удобное средство выбора нужной страницы при наличии нескольких открытых страниц.

Строка заголовка

Отображение имени текущей страницы, а также ее расположения на веб-узле.

Строка меню

Содержит меню, такие как Файл, Правка, Вид и Вставка, и является отправным пунктом при выполнении многих задач в программе FrontPage.

Поле <Задать вопрос>

Применяется для поиска дополнительных сведений о процедурах в программе FrontPage. В поле Задать вопрос вводится вопрос, для ответа на который используется справочная система.

Кнопка <Закрыть>

Эта кнопка используется для закрытия отображаемой страницы.

Полосы прокрутки

Позволяют перемещаться по странице и просматривать ее по частям.

Строка состояния

Предназначена для вывода сведений о состоянии текущей задачи. Например, в строке состояния при открытии домашней страницы может быть выведен текст <Извлечение Index.php>, а при наведении указателя мыши на ссылку в области Обычный — адрес, на который указывает гиперссылка.

Переключатель представлений страницы

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

Индикатор выполнения

Показывает состояние текущего действия.

Ожидаемое время загрузки

Указывает время, необходимое для загрузки веб-страницы пользователем для просмотра в веб-обозревателе.

Область задач

Область в программах Office, содержащая наиболее часто используемые команды. Удобное расположение и небольшой размер области задач позволяют использовать эти команды непосредственно во время работы с файлами.

Панели инструментов Стандартная и Форматирование

Отображаются по умолчанию. Эти панели инструментов предоставляют быстрый доступ к наиболее часто используемым командам в программе FrontPage.

Панель представлений

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

Совет. Рабочую область можно настраивать, выводя на экран дополнительные панели инструментов или изменяя кнопки этих панелей. В меню Вид выберите пункт Панели инструментов, а затем выберите панели инструментов, которые необходимо отобразить. Чтобы добавить или удалить кнопку с панели инструментов, нажмите кнопку Настройка.

Приступая к работе

Эта лабораторная работа посвящена созданию веб-узла, содержащего четыре веб-страницы со сведениями о вымышленном магазине спорттоваров. Создание веб-узла не займет много времени. При создании веб-узла можно постепенно добавлять веб-страницы и сведения. В отличие от напечатанных писем, служебных записок и текстовых документов веб-узлы можно изменять и обновлять даже после их публикации. Имеется возможность добавлять, удалять и изменять текст и рисунки, а также всю страницу целиком в любой момент времени.

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

Создание домашней страницы

Посещение веб-узла начинается с домашней страницы. Эта страница содержит сведения о содержании и теме веб-узла и предназначена для привлечения внимания его посетителей. Домашняя страница содержит также ссылки на другие страницы веб-узла.

1. На пустой странице в представлении Страница введите фразу Добро пожаловать в магазин Championzone! и нажмите клавишу ENTER. Как и при работе с текстовым редактором, при нажатии клавиши ENTER курсор переходит на новую строку.

2. Затем введите предложение Узнайте больше о наших спортивных товарах, просмотрите фотографии товаров и коллекцию фотографий, посвященных спорту.

3. Нажмите клавишу ENTER. Большая часть содержимого веб-узла магазина Championzone уже создана. При создании веб-узла в программе FrontPage можно импортировать любые существующие документы непосредственно на веб-страницу, что позволяет избежать их повторного ввода.

Страница должна выглядеть так:

Теперь необходимо добавить картинку на веб-страницу. Картинки могут представлять собой отсканированные фотографии, рисунки или компьютерные графические объекты, созданные с помощью графических редакторов.

В данном примере вставляется картинка с изображением эмблемы FrontPage.

Вставка графического объекта на домашнюю страницу

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

2. Выберите папку с лабораторными работами, дважды щелкнитке по ней.

3. Выберите файл frontpage и нажмите кнопку Вставить. Выбранный файл рисунка будет вставлен на текущую страницу. Этот рисунок представляет собой графический объект, который посетители веб-узла смогут щелкнуть и получить дополнительные сведения о программе FrontPage 2002.

4. Нажмите кнопку ENTER, чтобы создать новую строку.

Страница должна выглядеть так:

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

Гиперссылка является указателем для перехода от текста или рисунка к другой странице или файлу в Интернете или интрасети. В Интернете гиперссылки являются основным средством перехода на другие веб-страницы или веб-узлы.

Далее необходимо создать гиперссылку для графического объекта, вставленного на домашнюю страницу.

Создание гиперссылки для рисунка

1. На домашней странице щелкните вставленный ранее рисунок кнопки с эмблемой FrontPage 2002.

Выделенный рисунок отображается с маркерами файла, которые представляют собой восемь маленьких квадратов, расположенных вдоль границ рисунка. Они могут использоваться для изменения размеров рисунка или его внешнего вида. При выделении рисунка в программе FrontPage на экране появляется панель инструментов Рисунки. С помощью панели инструментов Рисунки можно получить доступ к средствам редактирования и форматирования рисунков, о которых будет рассказано далее.

Примечание. Если панель инструментов Рисунки автоматически не отображается, в меню Вид выберите пункт Панели инструментов, а затем — пункт Рисунки.

2.  В меню Вставка выберите команду Гиперссылка. В программе FrontPage появится диалоговое окно Добавление гиперссылки. В этом окне необходимо указать адрес назначения создаваемой гиперссылки.

3. В поле Адрес введите адрес www.microsoft.com/frontpage.

Примечания В программе FrontPage автоматически добавляется префикс http. Поскольку создается ссылка для кнопки с эмблемой Microsoft FrontPage, ссылка будет указывать на домашнюю страницу FrontPage в Интернете. При нажатии этой кнопки в обозревателе будет открыта домашняя страница FrontPage.

4. Нажмите кнопку ОК, чтобы завершить создание гиперссылки. Внешний вид кнопки не изменился. В отличие от текстовых гиперссылок, которые обычно подчеркнуты и выделены синим цветом, рисунок с гиперссылкой не позволяет так же просто определить наличие гиперссылки. Это сделано намеренно, поскольку изменение внешнего вида рисунка в некоторых случаях может ухудшить внешний вид страницы. Проверить наличие связанной с рисунком гиперссылки нетрудно, если навести указатель мыши на рисунок. При наличии гиперссылки в программе FrontPage в строке состояния выводится адрес URL этой гиперссылки. Далее в верхней части страницы необходимо вставить рисунок с эмблемой магазина Championzone.

Вставка рисунка на домашнюю страницу

1. Используйте сочетание клавиш CTRL+HOME, чтобы быстро перейти в начало текущей страницы.

Совет. Сочетание клавиш CTRL+HOME переводит курсор в исходную позицию (рядом с верхним левым полем текущей страницы).

2. В меню Вставка выберите пункт Рисунок, а затем — команду Из файла. В программе FrontPage сразу же отображается содержимое папки с лабораторными работами. В течение каждого сеанса работы в программе FrontPage запоминаются имена и расположение папок, к которым осуществлялся переход.

3. Перейдите в папку с лабораторными работами.

4. Дважды щелкните файл czlogo. В программе FrontPage будет выполнена вставка рисунка на текущую страницу.

5. Нажмите клавишу ENTER, чтобы переместить текст приветствия на следующую строку.

Страница должна выглядеть так:

Для завершения создания домашней страницы осталось расположить текст и рисунки по центру.

Расположение по центру элементов на странице

1. В меню Правка выберите команду Выделить все. В программе FrontPage будет выделено все содержимое текущей страницы.

2. В меню Формат выберите пункт Абзац. В программе FrontPage будет отображено диалоговое окно Абзац. В этом окне можно изменить выравнивание выделенных элементов, а также указать отступ и интервалы для текста и рисунков.

3. В списке Выравнивание выберите значение по центру, а затем нажмите кнопку ОК. В программе FrontPage будет выполнено выравнивание текста и рисунков по центру домашней страницы.

4. Щелкните страницу в любом месте, чтобы отменить выделение всех элементов страницы.

Сохранение текущей страницы

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

1. В меню Файл выберите команду Сохранить как. В программе FrontPage появится диалоговое окно Сохранить как. В этом окне можно указать нужное расположение для текущей страницы, а также изменить название, имя файла и его тип.

2. В диалоговом окне Сохранить как выберите Вашу папку (при её отсутствии – создайте свою папку).

3. Нажмите кнопку Изменить рядом с полем Название. Появится диалоговое окно Название страницы. В этом окне в качестве названия страницы по умолчанию выводится первая строка текста текущей страницы. Заголовок определяет содержимое страницы при отображении ее в веб-обозревателе. Далее предстоит изменить название страницы на более наглядное.

4. В поле Название введите Домашняя страница и нажмите кнопку ОК.

5. Измените текст в поле Имя файла на текст Домашняя страница, а затем нажмите кнопку Сохранить. В программе FrontPage выполняется сохранение текущей страницы.

Параметры представления Страница

Работа по созданию домашней страницы осуществлялась монопольно в обычном представлении Страница, однако существуют три различных представления текущей страницы.

Отображение HTML-тегов на текущей странице

· В представлении Страница Вид команду Показать теги.

· В программе FrontPage на экран будет выведено графическое представление стандартных HTML-тегов.

· Данное представление удобно, если при создании веб-страниц нужно знать расположение HTML-тегов.

· Чтобы скрыть теги, еще раз выберите команду Показать теги в меню Вид.

Отображение HTML-кода текущей страницы

· В представлении Страница нажмите кнопку HTML-код, расположенную в нижней части страницы.

В этом режиме в программе FrontPage отображается HTML-код созданной домашней страницы. Эти инструкции расшифровываются в веб-обозревателях при отображении страницы. Область HTML предназначена для опытных веб-разработчиков, которым необходимо изменить HTML-код, созданный в программе FrontPage.

· Если требуется задать способ создания HTML-кода в программе FrontPage, в меню Сервис выберите пункт Параметры страницы и откройте вкладку Разметка текста HTML. Тем, кто недостаточно хорошо знаком с языком HTML, не рекомендуется вносить изменения в этом окне. Чтобы закрыть диалоговое окно Параметры страницы, нажмите кнопку Отмена.

· В нижней части страницы нажмите кнопку HTML, чтобы просмотреть html-разметку страницы.

· В нижней части страницы нажмите кнопку Обычный, чтобы вернуться в Обычный режим представления страницы.

Совет. При работе в режиме HTML-код можно использовать многие команды меню и кнопки панелей инструментов, так же как и при работе в режиме Обычный.

Предварительный просмотр текущей страницы

· Нажмите кнопку Просмотр в нижней части страницы.

Примечание. Если на компьютере не установлен обозреватель Microsoft Internet Explorer, вкладка Просмотр не отображается и просмотр страницы таким способом невозможен. Режим представления страницы Просмотр удобен для просмотра расположения и внешнего вида определенных элементов, таких как анимация, видеозаписи, таблицы и списки, в том виде, как они выводятся в веб-обозревателе.

· В нижней части страницы нажмите кнопку Обычный, чтобы снова вернуться в Обычный режим представления страницы.

Создание веб-узла в программе FrontPage

Веб-узел представляет собой домашнюю страницу и связанные с ней страницы, рисунки, документы, мультимедийные и другие файлы. Веб-узлы сохраняются на веб-сервере или на жестком диске компьютера. Веб-узлы на основе средств Microsoft FrontPage содержат также файлы, обеспечивающие работу с программой FrontPage и позволяющие открывать, копировать, редактировать и изменять веб-узлы, а также управлять ими в программе FrontPage.

Выполнив описанные действия, нетрудно убедиться в том, что создание веб-страницы с помощью программы FrontPage не представляет труда. После запуска приложения можно немедленно приступить к вводу и редактированию документа, а затем сохранить его на жестком диске, как и при работе в текстовом редакторе. Хотя таким образом можно создать веб-узел целиком, это потребует много ручного труда и детальной проработки вопросов организации гиперссылок и исходных файлов, а также обновления содержимого.

При сохранении веб-страниц на веб-узле в программе FrontPage может автоматически выполняться управление гиперссылками и их восстановление, упорядочение файлов и папок, ведение панелей динамических ссылок, проверка орфографии и создание отчетов со сведениями о проблемах, возникших при работе со страницами и файлами.

Создание нового веб-узла

1. В меню Файл выберите команду Закрыть, чтобы закрыть текущую страницу.

2. В меню Файл выберите команду Создать, а затем — пункт Страница или веб-узел. В программе FrontPage будет отображена область задач Создание веб-страницы. В этом окне можно выбрать шаблон или мастер, указать, куда необходимо сохранить веб-узел, а также задать его имя.

3. В группе Создание с помощью шаблона выберите ссылку Шаблоны веб-узлов.

4. Щелкните значок Одностраничный веб-узел и нажмите клавишу TAB. При нажатии клавиши TAB курсор перемещается в поле, в котором указывается имя и расположение нового веб-узла.

5. Измените содержимое поля Укажите расположение нового веб-узла Имя Вашей папки\Championzone и нажмите кнопку ОК.

· В программе FrontPage будет создан новый веб-узел Championzone, а в строке заголовка в верхней части окна программы FrontPage будет выведено его имя и расположение.

· Поскольку придется работать с несколькими файлами на веб-узле, в программе FrontPage также выводится Список папок, в котором содержатся файлы и папки текущего веб-узла. В открывшемся окне файлы и папки отображаются так же, как и в проводнике Windows. Рекомендации по работе со Списком папок содержатся в лабораторной работе N7.

6. Если Список папок на экране отсутствует, выполните следующие действия.

· На стандартной панели инструментов щелкните стрелку справа от кнопки Переключить панель Список папок.

7. Щелкните значок Переходы Представления. Если веб-узел открыт, значки панели Представления позволяют изменять представление сведений на веб-узле. Представление Переходы является графическим представлением структуры веб-узла. Поскольку был создан одностраничный веб-узел, в программе FrontPage эта страница автоматически устанавливается в качестве домашней страницы веб-узла, на что указывает маленький значок с изображением домика При работе в представлении Переходы в окне программы выводится также панель инструментов Переходы. Панель инструментов Переходы можно перетащить в любую область экрана.

Рядом с панелью Представления в программе FrontPage выводится Список папок, как в представлении Страница.

Теперь предстоит заменить новую пустую домашнюю страницу созданной ранее страницей. Однако предварительно необходимо создать структуру для других страниц веб-узла магазина Championzone.

При создании структуры веб-узла в представлении Переходы становятся доступными некоторые средства, такие как объявления и панели переходов, автоматически обновляемые при изменении, добавлении или удалении станиц веб-узла. Данная возможность позволяет легко вносить необходимые изменения. Эти средства будут подробно описаны позже.

Создание структуры переходов

1. В представлении Переходы нажмите кнопку Создание новой обычной страницы

В программе FrontPage будет создана новая страница с названием <Новая страница 1>, расположенная в структуре веб-узла под домашней страницей. Фактически в представлении Переходы выводятся не сами страницы текущего веб-узла, а соответствующие им рамки. Перед созданием содержимого веб-узла можно попробовать различные варианты структуры и организации веб-узла.

2. Чтобы быстро создать остальные страницы, удерживайте нажатой клавишу CTRL, нажмите клавишу N три раза.

Использование сочетания клавиш CTRL+N эквивалентно выбору команды Создание новой обычной веб-страницы. В программе FrontPage поддерживаются стандартные для системы Windows и приложений Microsoft Office сочетания клавиш, использование которых позволяет ускорить выполнение повторяющихся действий. Вновь созданные страницы отображаются в структуре под домашней страницей, поскольку домашняя страница была выделена при вызове команды.

Примечание. В представлении Переходы выделенная страница окрашена синим цветом, а остальные страницы остаются желтыми.

3. Выделив домашнюю страницу, нажмите клавишу TAB. При нажатии клавиши TAB выделяется следующая страница в структуре, а ее название активизируется для изменения. При этом выделяется также текст с именем страницы, чтобы упростить ввод нового имени.

4. Введите имя О нас и нажмите клавишу TAB. Название <О нас> является названием одной из создаваемых страниц веб-узла магазина Championzone.

5. Повторите те же действия с другими страницами, изменив название страницы Новая страница 2 на Товары, страницы Новая страница 3 на Коллекция фотографий, а страницы Новая страница 4 на Связи.

6. При нажатии клавиши ENTER после изменения названия страницы происходит сохранение нового названия, однако другая страница не выделяется. Чтобы отменить выделение всех страниц, в представлении Переходы щелкните любую область вне страниц.

Экран должен выглядеть так:

Можно быстро открыть страницу в представлении Страница для ее редактирования, дважды щелкнув страницу в представлении Переходы или в Списке папок (страницы не отображаются в списке папок, пока они не сохранены).

Далее предстоит заменить пустую домашнюю страницу, созданную в программе FrontPage при помощи шаблона веб-узла, импортировав домашнюю страницу, созданную ранее и сохраненную в Вашей папке .

Импорт страницы на веб-узел

1. В представлении Переходы дважды щелкните страницу index.php, чтобы открыть ее в представлении Страница. В программе FrontPage будет открыта пустая домашняя страница, созданная при помощи шаблона веб-узла.

2. В меню Вставка выберите команду Файл. Появится диалоговое окно Выбор файла. В этом окне можно выполнить вставку веб-страниц, текстовых документов и текстовых файлов, а также других документов в текущую веб-страницу.

3. В диалоговом окне Выбор файла найдите Вашу папку , если она еще не отображена.

4. Выберите файл Домашняя страница и нажмите кнопку Открыть. В программе FrontPage выполняется импорт на текущую страницу ранее сохраненной домашней страницы.

5. Чтобы сохранить текущую страницу на веб-узле, нажмите кнопку Сохранить В программе FrontPage будет отображено диалоговое окно Сохранение внедренных файлов. В этом окне можно просматривать, переименовывать, сохранять и обновлять внедренные файлы, которые будут использованы на текущем веб-узле.

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

6. В диалоговом окне Сохранение внедренных файлов нажмите кнопку ОК. В программе FrontPage будет выполнено сохранение домашней страницы под именем Index.php, а также сохранение копий внедренных файлов рисунков на текущем веб-узле.

Совет.   Для домашних страниц используются зарезервированные имена. В программе FrontPage в качестве имени страницы будет автоматически использовано одно из двух зарезервированных имен, которые рекомендуется изменять только в случае особой необходимости. Если на компьютере установлено локальное программное обеспечении веб-сервера, например Internet Information Services (IIS), то для домашней страницы по умолчанию будет задано имя Default.php. Если локальный веб-сервер не установлен или страница сохраняется на локальный жесткий диск, а не на веб-узел на веб-сервере, то страница получит имя Index.php.

Эти имена зарезервированы для домашних страниц, поскольку в веб-обозревателях автоматически выполняется поиск этих имен, если вместо ссылки на определенную страницу посетитель указывает URL-адрес веб-узла.

Создание содержимого веб-узла

Теперь, когда домашняя страница стала частью текущего веб-узла, необходимо создать содержимое остальных страниц веб-узла Championzone.

Редактирование страницы <О нас>

1. Выберите в меню Вид пункт Переходы, чтобы вернуться к представлению Переходы.

Примечания В Списке папок теперь отображаются два файла рисунков, которые вы сохранили на данном веб-узле. Файл Index.php является новой домашней страницей. Позднее можно будет удалить оставшуюся копию домашней страницы из папки Мои документы.

В Списке папок названия файлов были автоматически образованы из названий страниц, указанных пользователем в представлении Переходы. В этой лабораторной работе названия изменяться не будут.

2. Дважды щелкните страницу О нас, чтобы открыть ее в представлении Страница. Эта страница будет содержать пример описания вымышленной компании для посетителей веб-узла. В настоящей лабораторной работе мы уже подготовили для вас подобный текст, поэтому вы можете просто поместить его на страницу.

3. В меню Вставка выберите команду Файл.

4. В диалоговом окне Выбор файла найдите папку с лабораторными работами, дважды щелкая каждую папку пути, пока искомая папка не появится в поле Папка.

5. Выберите Текстовые файлы (*.txt) в списке Тип файлов для отображения только файлов данного типа. Вы увидите один файл с именем about.

6. Выберите файл about из списка и нажмите кнопку Открыть. Вставляемый текст не был сохранен в HTML-формате, поэтому появится диалоговое окно Преобразование текста для управления импортом файла.

7. В диалоговом окне Преобразование текста выберите Вставить как HTMLи нажмите кнопку OK.

Программа Microsoft FrontPage импортирует файл и поместит его в указанное место на странице О нас.

8. На стандартной панели инструментов нажмите кнопку Сохранить О нас.

9. Закройте Список папок. Далее будет подготовлена страница под названием Товары. Она будет предоставлять посетителям сведения о спортивных товарах, продаваемых в магазине Championzone. На данной странице также будет находиться форма обратной связи для сбора замечаний и предложений посетителей веб-узла Championzone.

Редактирование страницы <Товары>

1. На стандартной панели инструментов нажмите кнопку Переключить панель Список папок.

2. Дважды щелкните страницу Товары.php в Списке папок, чтобы открыть эту страницу в представлении Страница.

3. Щелкните стрелку справа от кнопки Переключить панель и выберите Список папок, чтобы скрыть его.

4. В меню Вставка выберите команду Файл.

5. В диалоговом окне Выбор файла откройте список Тип файлов и выберите Формат RTF (*.rtf) для отображения файлов данного типа в папке исходных файлов веб-узла. Будут показаны подходящие файлы.

6. Дважды щелкните файл productinfo. Так как данный файл содержит форматирование, он будет автоматически конвертирован в HTML-формат и помещен на страницу.

7. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице Товары.

Дизайн страницы

Страница О нас унаследует свое форматирование от графической темы, которую вы примените к веб-узлу Championzone далее в лабораторной работе N7. Однако дизайн страницы Товары потребует больше усилий.

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

Создание маркированного списка

1. На странице Товары в представлении Страница найдите слова <спортивная сумка>. Если список не виден полностью, используйте полосы прокрутки для его просмотра. Список начинается со слов <спортивная сумка> и заканчивается словами <сетка для ворот>.

2. Щелкните текст слева от буквы <с> в слове <спортивная>, затем, удерживая нажатой клавишу SHIFT, щелкните текст сразу после слова <ворот> и отпустите клавишу SHIFT. Список будет выделен целиком.

3. На панели инструментов Форматирование нажмите кнопку Маркеры Произойдет преобразование выделенного текста в маркированный список.

4. Щелкните страницу в любом месте, чтобы отменить выделение списка.

Страница должна выглядеть следующим образом:

С помощью программы Microsoft FrontPage можно также создавать нумерованные списки. При добавлении новых элементов в нумерованный список они автоматически последовательно нумеруются. Вы можете добавлять элементы в нумерованные и маркированные списки, нажимая клавишу ENTER после последнего элемента. Для завершения списка нажмите клавишу ENTER дважды после ввода последнего элемента.

Далее на текущую страницу будут помещены четыре рисунка и затем с помощью средств позиционирования выровнены с абзацами, к которым они относятся. Это позволит придать странице более привлекательный вид.

Позиционирование рисунков в тексте

1. На странице Товары в представлении Страница поместите курсор после слов <Новинки недели>.

2. Нажмите кнопку Добавить рисунок из файла Когда рисунок был вставлен в прошлый раз, данный веб-узел не был открыт, поэтому программа Microsoft FrontPage автоматически открывала диалоговое окно Выбор файла. Но сейчас, при открытом веб-узле, предполагается, что вы намереваетесь работать с рисунками, которые уже являются частью этого веб-узла, поэтому появляется диалоговое окно Рисунок.

3. Так как необходимые рисунки на текущую страницу еще не добавлены, щелкните раскрывающийся список Папка и найдите папку с лабораторными работами.

4. Выберите файл FPTutor001 и нажмите кнопку Вставить. Изображение футболистов будет вставлено сразу после слов <Новинки недели>.

5. Далее щелкните изображение футбольного мяча, чтобы выделить его.

6. В меню Формат выберите пункт Положение. Появится диалоговое окно Положение.

7. В группе Обтекание выберите вариант справа и нажмите кнопку ОК. Рисунок будет выровнен по правой границе текущей страницы, а маркированный список переместится влево от него.

8. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице Товары.

9. В диалоговом окне Сохранение внедренных файлов нажмите кнопку ОК.

Страница должна выглядеть следующим образом:

Рисунки можно вставлять один за другим или сразу импортировать все необходимые рисунки. Вставка одиночных файлов производится в представлении Страница, а вставка группы файлов — в представлении Папки.

Добавление группы файлов к текущему веб-узлу

1. Щелкните значок Папки Представления, чтобы переключиться в представление Папки. Представление Папки является расширением списка папок, доступного в представлениях Переходы и Страница. Здесь, как и в проводнике, доступны подробные сведения о файлах и папках вашего веб-узла, а также допускается добавление, удаление, перемещение, копирование и переименование файлов.

2. В меню Файл выберите команду Импорт. Появится диалоговое окно Импорт. В этом окне можно добавлять файлы и папки, находящиеся на локальном компьютере, в локальной сети, на файл-сервере или в Интернете, например на FTP-сервере.

3. В диалоговом окне Импорт нажмите кнопку Добавить файл.

4. В диалоговом окне Добавление файла в список для импорта перейдите к папке с лабораторными работами.

5. Далее щелкните список Тип файлов и выберите тип GIF и JPEG (*.gif, *.jpg) для отображения всех файлов данного типа в папке исходных файлов веб-узла.

6. Выберите файл czbanner.

7. Удерживая нажатой клавишу CTRL, выберите файлы FPTutor002, FPTutor003, FPTutor004, FPTutor005, и FPTutor006.

8. После отбора файлов в диалоговом окне Добавление файла в список для импорта отпустите клавишу CTRL и нажмите кнопку Открыть. Выбранные рисунки будут автоматически добавлены в список в диалоговом окне Импорт.

9. Нажмите кнопку ОК для импорта перечисленных файлов в текущий веб-узел.

Теперь, когда все рисунки добавлены, необходимо завершить компоновку страницы Товары.

Завершение компоновки страницы

1. Щелкните значок Страница на панели Представления, чтобы переключиться в представление Страница.

2. Если открыт Список папок, закройте его, чтобы видеть большую часть страницы, с которой вы работаете.

Чтобы закрыть Список папок, выполните следующие действия.

1. На стандартной панели инструментов нажмите кнопку Переключить панель Список папок.

2. На странице Товары поместите курсор после предложения <ШИРОЧАЙШИЙ ВЫБОР СПОРТИВНЫХ ТОВАРОВ> и нажмите кнопку Добавить рисунок из файла на панели инструментов.

3. В диалоговом окне Рисунок по-прежнему доступны импортированные ранее рисунки — выберите файл FPTutor002 из списка. Допускается также вставка картинок или, при наличии сканера или цифровой камеры, изображений с этих устройств.

4. Чтобы вставить рисунок, нажмите кнопку ОК.

5. Щелкните только что вставленный рисунок и нажмите кнопку По правому краю

Страница должна выглядеть так:

Расположение рисунков и других элементов страницы вокруг текста делает ее более привлекательной наподобие страницы журнала или газеты. Расположение рисунков вдоль границ позволит сохранить компоновку страницы при различных разрешениях экрана и размерах окна обозревателя.

Для завершения страницы Товары будет создана форма обратной связи для общения с посетителями веб-узла. Форма обратной связи позволит собирать замечания и мнения посетителей веб-узла.

Создание формы обратной связи

1. В представлении Страница нажмите клавиши CTRL+END для быстрого перехода в нижнюю часть текущей страницы или используйте для этого полосу прокрутки.

2. В новой пустой строке введите фразу Нам нужен ваш отклик! и нажмите клавишу ENTER.

3. В меню Вставка выберите пункт Форма, а затем — пункт Поле. На страницу будет автоматически вставлена новая форма с текстовым полем. Штриховая линия будет обозначать границы формы. По умолчанию новая форма содержит также кнопки Отправить и Сброс.

Далее следует настроить форму, добавив другие поля и их заголовки, чтобы посетители понимали, какие сведения хотят от них получить.

Настройка формы

1. Нажмите кнопку Отправить, а затем — кнопку По центру

2. Нажмите клавишу <Стрелка влево>, чтобы поместить курсор перед кнопкой Отправить и нажмите клавишу ENTER. Нажатие клавиши ENTER добавляет новую строку к форме.

3. Щелкните поле и нажмите клавишу <Стрелка влево>, чтобы поместить курсор в начало формы.

4. В первой строке введите фразу Ваше имя: и нажмите клавиши SHIFT+ENTER. Нажатие клавиши ENTER при удерживаемой клавише SHIFT вводит разрыв строки. Разрывы строк удобны для размещения строк текста с интервалом меньше стандартного интервала между абзацами.

5. Поместите курсор после поля и нажмите клавишу ENTER.

6. На следующей строке наберите фразу Ваш адрес электронной почты: и нажмите клавиши SHIFT+ENTER.

7. В меню Вставка выберите пункт Форма, еще раз выберите Поле и нажмите клавишу ENTER.

8. В следующей строке введите фразу Ваши комментарии: и нажмите клавиши SHIFT+ENTER.

9. В меню Вставка выберите пункт Форма, а затем — пункт Текстовое поле. В форму будет автоматически помещено текстовое поле с полосой прокрутки.

10. Дважды щелкните только что вставленное текстовое поле. Появится диалоговое окно Свойства текстового поля. В нем можно изменить внешний вид текстового поля.

11. В диалоговом окне Свойства текстового поля измените параметры Ширина в знаках и Число строк, задав для них значения 30 и 5 соответственно, а затем нажмите кнопку ОК. Текстовое поле увеличится в размерах, чтобы побудить посетителей веб-узла к написанию более подробных комментариев. По завершении создания формы и страницы Товары необходимо сохранить результаты работы. Примечание. Проверка формы до публикации веб-узла на сервере невозможна.

12. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице Товары.

Страница должна выглядеть так:

Создание формы и страницы Товары завершено. Теперь добавим еще две страницы: интерактивную коллекцию фотографий и список ссылок на несколько веб-узлов в Интернете.

Создание коллекции фотографий

В Интернете используется графический интерфейс, поэтому неудивительно, что множество веб-узлов содержит фотографии и другие типы изображений. Сканеры и цифровые камеры стали более доступными, и многие фотомастерские предлагают изображения на компакт-дисках, которыми можно обмениваться в интерактивном режиме.

Как было показано выше, размещение рисунков на веб-страницах с помощью программы FrontPage не представляет труда. Эта часть лабораторной работы посвящена созданию интерактивной коллекции фотографий.

Коллекция фотографий — это веб-страница, содержащая определенным образом упорядоченные изображения. Для веб-узла Championzone будет создана коллекция спортивных фотографий.

Программа Microsoft FrontPage 2002 предоставляет пользователям несколько вариантов компоновки изображений. В этой лабораторной работе используется горизонтальная компоновка.

Редактирование страницы коллекции фотографий

1. На стандартной панели инструментов щелкните стрелку на кнопке Переключить панель Список папок.

2. В Списке папок дважды щелкните файл photo_gallery.php, чтобы открыть данную страницу.

3. Щелкните стрелку справа от кнопки Переключить панель и выберите Список папок, чтобы скрыть его.

4. После появления в представлении Страница чистой страницы введите в первой строке фразу Спортивные фотографии и нажмите клавишу ENTER.

5. В следующей строке введите фразу Познакомьтесь с нашей коллекцией спортивных фотографий.

6. Дважды нажмите клавишу ENTER, чтобы освободить место.

7. В меню Вставка выберите пункт Веб-компонент.

8. На левой панели выберите Коллекция фотографий.

9. На правой панели выберите первый вариант компоновки (горизонтальная компоновка) и нажмите кнопку Готово.

10. Автоматически откроется диалоговое окно Свойства коллекции фотографий.

11. Нажмите кнопку Добавить и выберите Рисунки из файлов.

12. Выберите файл FPTutor003 и, удерживая нажатой клавишу SHIFT, выберите файл FPTutor006. Будут выбраны файлы FPTutor003, FPTutor004, FPTutor005 и FPTutor006.

13. Нажмите кнопку Открыть, а затем кнопку ОК.

14. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице Коллекция фотографий.

15. В диалоговом окне Сохранение внедренных файлов нажмите кнопку ОК.

Страница должна выглядеть так:

Создание ссылок на другие веб-узлы

Теперь осталось отредактировать только страницу Ссылки. Страница Ссылки будет содержать список текстовых гиперссылок на некоторые популярные спортивные страницы в Интернете.

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

Начало создания страницы <Ссылки>

1. На стандартной панели инструментов щелкните стрелку на кнопке Переключить панельСписок папок.

2. Дважды щелкните файл links.php в Списке папок, чтобы открыть страницу в представлении Страница.

3. Щелкните стрелку справа от кнопки Переключить панель и выберите Список папок, чтобы скрыть его.

4. После появления в представлении Страница чистой страницы введите фразу Ссылки на спортивные веб-узлы и нажмите клавишу ENTER.

Далее будет создана несложная анимация в заголовке абзаца. Программа Microsoft FrontPage содержит коллекцию забавных эффектов, которые можно применять к тексту заголовков или целым абзацам.

Создание динамического текстового эффекта

1. Щелкните любой фрагмент фразы Ссылки на спортивные веб-узлы на странице Ссылки.

2. В меню Формат выберите пункт Эффекты DHTML. Появится панель инструментов Эффекты DHTML. С ее помощью необходимо выполнить ряд последовательных операций, результатом которых будет несложный динамический HTML-сценарий (DHTML-сценарий) анимации, действующий на текст при его появлении в окне обозревателя. Динамический формат HTML является расширением языка HTML, позволяющим создавать эффекты представления текста и других объектов наподобие показа слайдов Microsoft PowerPoint. С помощью панели инструментов Эффекты DHTML нетрудно добавить простые эффекты к страницам, не прибегая к программированию.

3. В списке Вкл выберите Загрузка страницы. Это заставит веб-обозреватель включать эффект при загрузке страницы.

4. В списке Применить выберите Скачок. В программе Microsoft FrontPage применяется эффект <Скачок>. В веб-обозревателе данный эффект заставит слова <прыгать> по странице.

5. Нажмите кнопку Закрыть в верхнем правом углу панели инструментов Эффекты DHTML. Панель Эффекты DHTML будет закрыта, а эффект будет выделен на странице светло-синим цветом.

Советы

· Если установлен обозреватель Microsoft Internet Explorer, можно просмотреть, как будет выглядеть данный эффект в веб-обозревателе, нажав на кнопку Просмотр в представлении Страница. Нажмите кнопку Обычный для возврата в представление Страница.

· Для изменения эффекта в режиме Обычный следует выделить текст, содержащий эффект, выбрать пункт Эффекты DHTML в меню Формат и применить новый желаемый эффект.

Далее будут добавлены гиперссылки на другие веб-узлы в Интернете. Программа Microsoft FrontPage позволяет создавать текстовые гиперссылки различными способами, которые описаны ниже. При создании собственного веб-узла можно воспользоваться любым подходящим способом.

Создание текстовых гиперссылок

1. На странице Ссылки нажмите клавишу <Стрелка вниз>, введите фразу MSN Sports и нажмите клавишу ENTER.

2. Выделите с помощью мыши введенные слова.

3. В меню Вставка выберите команду Гиперссылка. Появится диалоговое окно Добавление гиперссылки. В нем следует указать конечный адрес создаваемой гиперссылки. Это может быть файл, находящийся на вашем веб-узле, локальном компьютере, веб-сервере или на любом другом веб-узле Интернета.

4. В поле Адрес введите адрес www.msnbc.com/msn>/msnsports_front.asp и нажмите кнопку ОК. Префикс HTTP будет вставлен автоматически.

5. Нажмите клавишу <Стрелка вниз>, чтобы отменить выделение текста. Слова изменят цвет с черного на синий, и под ними появится подчеркивание, указывающее на наличие гиперссылки. При отображении данной страницы в веб-обозревателе выбор этой ссылки вызовет загрузку домашней страницы MSN.

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

Вставка специальных знаков или символов

1. Щелкните страницу сразу после букв MSN в созданной ссылке.

2. В меню Вставка выберите пункт Символ. Появится диалоговое окно Символ. Это окно позволяет выбирать и вставлять специальные знаки в месте вставки. Пока это диалоговое окно отображается на экране, можно вставить несколько символов.

3. В диалоговом окне Символ выберите символ, нажмите кнопку Вставить, а затем — кнопку Закрыть. После букв MSN будет автоматически вставлен указанный символ. Команда Символ может использоваться для вставки знаков, которые невозможно ввести непосредственно с клавиатуры.

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

Создание автоматической гиперссылки

1. На странице Ссылки нажмите клавишу <Стрелка вниз>, введите фразу www.sports.yahoo.com и нажмите клавишу ENTER. Сразу же после нажатия клавиши ENTER введенный адрес URL станет синим с подчеркиванием, указывающим на наличие гиперссылки. Как и остальные программы пакета Microsoft Office, программа Microsoft FrontPage поддерживает автоматическое создание гиперссылок. Но, так как сами адреса URL не содержат никаких описаний, при необходимости их можно заменить названиями веб-узлов, на которые они указывают. Просто перепишите текст, не удаляя гиперссылку.

Примечание. Yahoo! является популярной поисковой службой Интернета, обеспечивающей поиск сведений по ключевым словам и тематическим рубрикаторам. Данный адрес URL указывает на спортивную страницу Yahoo.

2. Используя мышь, выделите введенный адрес URL.

3. После выделения адреса http://sports.yahoo.com/ введите текст Yahoo! для замещения выделенного текста.

Гиперссылка указывает на тот же адрес URL, но теперь она названа по имени веб-узла.

Далее будет создана гиперссылка с помощью используемого веб-обозревателя. Данный метод создания гиперссылок является наиболее точным, так как нужная страница посещается перед созданием гиперссылки на нее. Кроме того, программа Microsoft FrontPage копирует адрес URL из поля адреса веб-обозревателя, поэтому проверенный адрес не придется вводить заново.

Создание проверенной гиперссылки

1. Нажмите клавишу <Стрелка вниз> для перемещения курсора на новую строку ниже предыдущей гиперссылки.

2. Введите фразу Национальная Баскетбольная Ассоциация и нажмите клавишу ENTER.

3. Выделите введенную фразу с помощью мыши.

4. На панели инструментов нажмите кнопку Добавление гиперссылки Появится диалоговое окно Добавление гиперссылки.

5. В диалоговом окне Добавление гиперссылки нажмите кнопку Интернет Программа Microsoft FrontPage запустит ваш веб-обозреватель. После посещения нужной страницы и возврата в программу Microsoft FrontPage поле адреса URL будет содержать адрес этой страницы.

6. В поле Адрес веб-обозревателя введите фразу http://www.nba.com/ и нажмите клавишу ENTER. В окне обозревателя появится домашняя страница Национальной Баскетбольной Ассоциации (НБА), где можно больше узнать о НБА, командах, игроках, посмотреть расписание игр и т. д.

7. Нажмите клавиши ALT+TAB, чтобы вернуться в диалоговое окно Добавление гиперссылки. Адрес URL домашней страницы программы Microsoft FrontPage появится в поле Адрес диалогового окна Добавление гиперссылки.

8. Нажмите кнопку OK.

9. Нажмите клавишу <Стрелка вниз>, чтобы отменить выделение текста. Слова <Национальная Баскетбольная Ассоциация> будут подчеркнуты, что указывает на наличие гиперссылки.

10. Для сохранения изменений на странице Ссылки нажмите кнопку Сохранить на панели инструментов.

Страница должна выглядеть так:

Форматирование заголовков абзацев

После успешного заполнения содержимым всех страниц создаваемого веб-узла необходимо отформатировать абзацы и задать шрифты, чтобы все заголовки абзацев на всех страницах выглядели одинаково.

Применение стилей абзацев к заголовкам

1. Выберите файл index.php на вкладке страниц. На экране появится домашняя страница. Когда в области Обычный открыто сразу несколько страниц, вкладки страниц позволяют переключаться между ними.

Примечание. Если вы закрыли страницу на предыдущем шаге, в меню Файл выберите команду Открыть, а затем в диалоговом окне Открытие файла выберите файл index.php.

2. Щелкните заголовок Добро пожаловать в Championzone.

3. Щелкните список Стиль на панели инструментов <Форматирование> и измените стиль Обычный на Заголовок 3.

4. Стиль <Заголовок 3> будет применен к текущей строке текста. Размер текста не изменится, однако шрифт станет полужирным.

5. Стили заголовков в списке Стиль базируются на стандартах языка HTML. Заголовок первого уровня является наибольшим по размеру для веб-страниц, а заголовок шестого уровня — наименьшим.

Примечание. Список Стиль может содержать также стили из каскадных таблиц (CSS), однако нами они не рассматриваются.

6. На панели инструментов нажмите кнопку Сохранить для сохранения изменений домашней страницы.

7. Выберите файл About_Us.php на вкладке Страница. На экране вновь появится страница О нас.

8. Щелкните заголовок О нас вверху страницы.

9. Щелкните список Стиль на панели инструментов и выберите стиль Заголовок 4.

10. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице О нас.

Повторное форматирование абзацев с помощью формата по образцу

Программа Microsoft FrontPage предоставляет удобный способ копирования стилей форматирования выделенного фрагмента текста на другой фрагмент нажатием одной кнопки. Этот прием можно освоить на примере страницы Товары.

1. Выберите файл Products.php на вкладке Страница. На экране появится страница Товары.

2. Щелкните строку <ШИРОЧАЙШИЙ ВЫБОР СПОРТИВНЫХ ТОВАРОВ> вверху страницы.

3. Щелкните список Стиль на панели инструментов и выберите стиль Заголовок 4.

4. После применения стиля щелкните предложение в любом месте и нажмите кнопку Формат по образцу Форматирование.

5. Прокрутите страницу вниз до фразы Нам нужен ваш отклик.

6. Используя Формат по образцу Нам нужен ваш отклик. Форматирование предыдущего заголовка будет автоматически скопировано и применено к текущему заголовку. Инструмент <Формат по образцу> удобен при одновременном копировании нескольких вариантов форматирования с одного фрагмента текста на другой.

7. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице Товары.

Совет. Повторное форматирование может применяться к нескольким выделенным фрагментам текста. Для этого следует выделить текст с нужным форматированием и дважды нажать кнопку Формат по образцу. Выделите различные фрагменты текста, на которые будет копироваться форматирование, а по завершении копирования снова нажмите кнопку Формат по образцу. Далее следует завершить форматирование заголовков на двух оставшихся страницах.

Завершение применения стилей абзацев к заголовкам

1. Выберите файл photo_gallery.php на вкладке Страница. На экране появится страница Коллекция фотографий.

2. Щелкните заголовок Спортивные фотографии вверху страницы.

3. Щелкните список Стиль на панели инструментов и выберите стиль Заголовок 4.

4. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице Коллекция фотографий.

5. В меню Окно выберите файл links.php.

6. Щелкните фразу Ссылки на спортивные веб-узлы.

7. Щелкните список Стиль на панели инструментов и выберите стиль Заголовок 4.

8. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице Ссылки.

Завершение работы с программой Microsoft FrontPage

· В меню Файл выберите команду Выход.

Программа Microsoft FrontPage завершит свою работу.

ЛАБОРАТОРНАЯ РАБОТА №7

Тема работы: Создание веб-узла вымышленного магазина спорттоваров Championzone. Изучение программного продукта MS FrontPage 2002.

Цель работы: научиться добавлять на страницы веб-узла панели переходов, примененять и измененять графические темы, предварительно просматривать и тестировать веб-узел; подгототовить веб-узел к публикации в Интернете.

Общие сведения

Эта лабораторная работа посвящена изучению следующих действий:

· Создание гиперссылок на другие страницы внутри веб-узла

· Добавление общих границ и панелей переходов

· Применение и настройка графических тем

· Предварительный просмотр и тестирование узла с помощью веб-обозревателя

· Организация файлов и папок

· Создание сводки по узлу

· Проверка орфографии на странице и всем веб-узле

· Замена текста на веб-страницах

· Публикация веб-узла в Интернете

Улучшение внешнего вида веб-узла

Если переход к данному заданию выполняется сразу после завершения лабораторной работы N6, веб-узел Championzone должен быть еще открыт в программе FrontPage. В этом случае пропустите процедуру Создание гиперссылок на другие страницы.

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

Открытие существующего веб-узла

1. На панели задач нажмите кнопку Пуск, выберите в главном меню пункт Программы -- Microsoft Office, а затем — Microsoft FrontPage. 2. В меню Файл выберите Последние веб-узлы и затем Championzone, чтобы открыть веб-узел Championzone, созданный на предыдущей лабораторной работе.

В программе Microsoft FrontPage будет открыт данный веб-узел.

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

Создание гиперссылок на другие страницы

1. На стандартной панели инструментов щелкните стрелку на кнопке Переключить панель   и выберите вариант Список папок.

Список папок следует оставить на экране, пока будут создаваться гиперссылки на остальные страницы веб-узла.

2. Дважды щелкните файл index.php в Списке папок, чтобы открыть домашнюю страницу в представлении Страница.

3. Когда домашняя страница появится в представлении Страница, нажмите клавиши CTRL+END, чтобы поместить курсор в конец этой страницы.

4. Далее следует найти страницу О нас в Списке папок. Папки и файлы представлены в Списке папок в алфавитном порядке. Значок каждого файла играет роль подсказки о его типе. Теперь страницу О нас нужно перетащить в нижнюю часть домашней страницы. После этого на домашней странице будет автоматически создана гиперссылка на страницу О нас. 5. Щелкните файл About_Us.php в Списке папок и, удерживая клавишу мыши нажатой, переместите указатель мыши на строку под кнопкой программы Microsoft FrontPage внизу домашней страницы, а затем отпустите клавишу мыши. На указателе мыши появится значок ярлыка, показывающий, что будет вставлена гиперссылка на страницу О нас, а не сама страница. Заголовок страницы About Us.php (<О нас>) автоматически вставляется как текст ссылки. Синий подчеркнутый текст означает гиперссылку.

6. Повторите шаги 4 и 5 для других страниц веб-узла Championzone, включая Products.php, Links.php, и Photo_gallery.php. Каждую новую ссылку следует размещать сразу после предыдущей.

7. Нажмите клавишу <Стрелка вниз>, чтобы отменить выделение последней гиперссылки.

Страница должна выглядеть так:

Хотя этот способ может использоваться для создания гиперссылок на все остальные страницы вашего веб-узла, это займет много времени, особенно если веб-узел большой. Более того, в случае добавления или удаления страниц данного веб-узла после создания гиперссылок, придется вручную добавлять или удалять гиперссылки на эти страницы.

Программа Microsoft FrontPage предоставляет более простой способ создания, управления и автоматического обновления навигационных гиперссылок, соединяющих ваши страницы в единое целое. Перед изучением этого способа необходимо избавиться от четырех ранее созданных гиперссылок.

Использование многократной команды <Отменить>

1. На стандартной панели инструментов щелкните стрелку справа от кнопки Отменить

2. На экране появится список нескольких последних действий, которые можно отменить. Первое из действий будет выбрано по умолчанию. Если щелкнуть его, будет отменено только это действие. Чтобы включить и остальные элементы списка в команду Отменить, их следует выделить с помощью мыши.

3. Так как нужно избавиться сразу от четырех гиперссылок, которые были перенесены на домашнюю страницу, выделите с помощью мыши четыре команды Завершение перетаскивания. В строке состояния появится надпись Отменить действий: 4.

4. Щелкните последнюю команду Завершение перетаскивания в списке. Произойдет отмена последних четырех действий, и четыре созданных гиперссылки будут удалены с домашней страницы.

5. Для сохранения изменений на текущей странице выберите в меню Файл команду Сохранить или нажмите кнопку Сохранить на панели инструментов.

Добавление общих границ и панелей переходов

Управление гиперссылками веб-узла Championzone, которые посетители будут использовать для перемещения по вашему веб-узлу, берет на себя программа Microsoft FrontPage. Это обеспечивается комбинацией двух мощных средств: общих границ и автоматических панелей переходов.

Общие границы являются участками страниц, зарезервированными для содержимого, повторяющегося на каждой странице вашего веб-узла. Эти границы могут содержать объявления и панели переходов страниц. Объявления содержат заголовки страниц, присваиваемые им при создании или сохранении. Панель переходов представляет собой ряд или колонку гиперссылок на другие страницы данного веб-узла. Программа Microsoft FrontPage поддерживает автоматическое обновление общих границ и панелей переходов для сохранения правильной структуры переходов веб-узла даже в случае добавления, перемещения или удаления страниц.

На предыдущей лабораторной работе был освоен первый шаг, необходимый для использования автоматических панелей переходов, а именно: создание основной структуры веб-узла в представлении Переходы. Так как этот шаг уже пройден, на этом этапе на страницах веб-узла будут включены общие границы.

Создание общих границ на страницах веб-узла

1. Выберите в меню Вид пункт Переходы, чтобы вернуться к представлению Переходы.

2. Щелкните стрелку справа от кнопки Переключить панель и выберите Список папок, чтобы скрыть его.

3. Выберите в меню Формат пункт Общие границы.

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

4. Убедитесь, что в диалоговом окне Общие границы выбран параметр Ко всем страницам.

5. Для добавления горизонтальной общей границы установите флажок Сверху, а также находящийся под ним флажок Включить кнопки переходов.

6. Для добавления вертикальной общей границы установите флажок Слева, а также находящийся под ним флажок Включить кнопки переходов.

7. Не устанавливая флажки Справа и Снизу, нажмите кнопку ОК. Для всех страниц текущего веб-узла будут автоматические созданы общие границы и стандартные панели переходов. Внесенные изменения будут доступны для просмотра после возврата к представлению Страница. Далее выполняется настройка внешнего вида стандартных панелей переходов. Так как они являются общими для всех страниц текущего веб-узла, изменить их свойства можно на любой странице, и эти изменения затронут весь веб-узел.

Проверка гиперссылок на панели ссылок

1. В представлении Переходы дважды щелкните файл Домашняя страница (index.php).

2. Щелкните стрелку справа от кнопки Переключить панель и выберите Список папок, чтобы скрыть его.

Примечание. Домашняя страница была изменена программой Microsoft FrontPage. Теперь эта страница содержит также верхнюю и левую общие границы. Верхняя граница содержит объявление с названием текущей страницы, а левая граница — список навигационных гиперссылок, которые выглядят так же, как и созданные вручную. Проверить гиперссылки на страницы и файлы вашего веб-узла можно в представлении Страница.

3. Удерживая нажатой клавишу CTRL, щелкните первую навигационную гиперссылку с именем О нас в левой части страницы. Будет открыта страница, на которую указывает эта гиперссылка. Общие границы и панели переходов были добавлены также на страницу <О нас>. Однако на этой странице ссылки на другие страницы оказались на верхней границе непосредственно под объявлением. Это произошло потому, что для определения уровня текущей веб-страницы программа Microsoft FrontPage использует структуру веб-узла, созданную в представлении Переходы. По умолчанию верхняя общая граница указывает на страницы того же уровня, что и текущая, тогда как левая граница адресует страницы более низкого уровня. В следующем разделе эта стандартная настройка будет изменена нужным образом.

Настройка панелей ссылок

1. Выберите файл index.php на вкладке страниц. На экране появится домашняя страница.

2. На верхней границе домашней страницы дважды щелкните фразу Измените свойства этой панели для отображения на ней гиперссылок. Двойной щелчок панели ссылок приведет к появлению диалогового окна Свойства панели ссылок. В этом окне можно настроить внешний вид панели ссылок, а также создаваемые на этой панели гиперссылки. В настоящее время горизонтальная панель ссылок указывает на страницы того же уровня. Так как домашняя страница занимает собственный уровень в структуре веб-узла, других страниц на этом уровне нет. Поэтому на этой общей границе панели ссылок не отображаются. Для веб-узла Championzone требуются горизонтальная панель ссылок на домашней странице и вертикальные панели переходов на остальных страницах. Для этого следует изменить стандартную настройку обеих панелей ссылок. Необходимые изменения могут быть выполнены на текущей странице, так как после этого они отражаются на всех страницах веб-узла.

3. В диалоговом окне Свойства панели ссылок выберите Дочерний уровень, снимите флажки Домашняя страница и Родительская страница и нажмите кнопку ОК. Автоматически создается панель переходов с гиперссылками на все страницы, уровень которых ниже уровня домашней страницы.

4. Нажмите клавишу HOME, чтобы отменить выделение панели переходов.

Страница должна выглядеть так:

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

5. Дважды щелкните вертикальную панель переходов на левой общей границе домашней страницы.

6. В диалоговом окне Свойства панели ссылок выберите Тот же уровень, установите флажок Домашняя страница и нажмите кнопку ОК. Панель переходов будет заменена местозаполнителем, содержащим текст Измените свойства этой панели для отображения на ней гиперссылок. Этот текст отображается только в представлении Страница и отсутствует в веб-обозревателе. Адресация гиперссылок этой панели переходов на уровень домашней страницы позволяет удалить эти гиперссылки с левой границы, так как на уровне домашней страницы нет других страниц. Кроме того, в этом случае устраняется избыточность горизонтальной и вертикальной панелей переходов.

7. Для сохранения изменений домашней страницы выберите в меню Файл команду Сохранить или нажмите кнопку Сохранить на панели инструментов.

Страница должна выглядеть так:

8. В меню Окно выберите файл About_Us.php.

9. На экране появится страница О нас. Изменения горизонтальной и вертикальной панелей переходов домашней страницы автоматически распространяются на данную страницу и на остальные страницы вашего веб-узла.

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

Применение графических тем

Хотя добавленные рисунки, списки, формы, общие границы и панели переходов придали страницам веб-узла Championzone более элегантный и стройный вид, тем не менее, черно-синий текст на белом фоне смотрится довольно невзрачно.

Нетрудно представить, сколько времени заняло бы создание цветовой схемы текста и графики, графических объявлений, кнопок переходов, маркеров списков и фоновых текстур для всех страниц веб-узла. А в случае поддержки нескольких непохожих друг на друга веб-узлов объем работ по созданию уникальной графики возрос бы многократно.

Программа Microsoft FrontPage включает более 50 профессионально разработанных графических тем с соответствующими цветовыми схемами, которые могут быть применены к отдельным или ко всем страницам создаваемого веб-узла. Графическая тема состоит из элементов дизайна для маркеров, шрифтов, рисунков, кнопок переходов и других графических объектов. Графические темы придают страницам, объявлениям, кнопкам переходов и другим элементам веб-узла гармоничный и привлекательный вид.

Применение графической темы к веб-узлу

1. Выберите файл index.php на вкладке Страница. На экране появится домашняя страница.

2. В меню Формат выберите пункт Тема. Появится диалоговое окно Темы. В этом окне можно выбрать графическую тему из списка тем, установленных по умолчанию, или установить полный набор тем с компакт-диска программы FrontPage. Оцените внешний вид графической темы, предварительно просмотрите элементы темы или измените выбранную тему.

3. Прокрутите список и выберите несколько имен тем. Если щелкнуть имя темы, то в окне Образец темы выводится пример с графическими элементами этой темы. Таким образом можно предварительно просмотреть тему до ее применения к выбранным или всем страницам веб-узла. Перед применением темы имеется возможность изменить параметры темы, влияющие на внешний вид ее компонентов. Например, параметр Яркие цвета меняет цвета текста и графики на более яркие, параметр Активные рисунки управляет анимацией отдельных компонентов темы, а параметр Фоновый рисунок задает графический фон страниц веб-узла. Графическая тема может быть также применена в виде таблицы каскадных стилей. Для веб-узла Championzone большая часть стандартных настроек не используется.

4. Убедитесь, что под словами Применить тему выбран параметр Ко всем страницам.

5. В списке установленных тем выберите тему Перетекание.

6. Снимите флажок Активные рисунки и нажмите кнопку ОК. Так как в данном случае тема применяется к веб-узлу впервые, следует сообщение о том, что применение темы приведет к замене некоторых созданных пользователем элементов ручного форматирования. В данной лабораторной работе намеренно не рассматриваются большинство приемов создания элементов дизайна вручную, поэтому следует принять это сообщение к сведению и продолжить процедуру применения темы.

7. Нажмите кнопку Да, чтобы применить тему. Тема <Перетекание> будет применена ко всем страницам текущего веб-узла. Для сохранения изменений на домашней странице выберите в меню Файл команду Сохранить или нажмите кнопку Сохранить на панели инструментов.

Страница должна выглядеть так:

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

Отображение графических кнопок переходов на всех страницах

1. В меню Окно выберите файл About_Us.php. На экране появится страница О нас. Эта страница унаследовала графическую тему и элементы этой темы от домашней страницы, однако вертикальная панель переходов на левой границе все еще содержит текстовые гиперссылки. По умолчанию вертикальные панели переходов отображаются простым текстом, поэтому они сохраняют свой вид и после применения темы. Настройки панели переходов могут быть легко изменены даже после применения графической темы.

2. Дважды щелкните вертикальную панель переходов на левой общей границе страницы О нас.

3. В окне Выберите стиль на вкладке Стиль выберите параметр Использовать тему страницы и нажмите кнопку ОК. Если элемент Использовать тему страницы в списке не виден, прокрутите список стилей вверх до конца.

4. Щелкните страницу в любом месте, чтобы отменить выделение панели переходов. Форматирование элементов переходов будет автоматически изменено путем замены их графическими кнопками из этой темы. Теперь веб-узел выглядит профессионально и привлекательно.

5. Для сохранения изменений на странице выберите в меню Файл команду Сохранить или нажмите кнопку Сохранить на панели инструментов.

Совет. Некоторые темы содержат эффекты анимации. При применении темы установка флажка Активные рисунки позволяет включить анимацию объявлений и эффекты панели переходов, если тема содержит соответствующие элементы. Образцы тем не обеспечивают предварительный просмотр применяемых эффектов. Для просмотра эффектов активных рисунков следует применить тему, а затем просмотреть страницу в представлении Просмотр или использовать команду Просмотр в обозревателе (меню Файл).

Изменение настроек темы

Хотя объявление на данной странице уже выглядит неплохо, однако что-нибудь непосредственно связанное с содержимым веб-узла Championzone смотрелось бы лучше. Воспользуйтесь готовым объявлением, позволяющим изменить текущую графическую тему.

Изменение графической темы

1. Выберите файл index.php на вкладке Страница. На экране появится домашняя страница.

2. В меню Формат выберите пункт Тема. Появится диалоговое окно Темы. По умолчанию будет выбрана тема <Перетекание>, так как она уже была применена к текущему веб-узлу.

3. Убедитесь, что в диалоговом окне Темы выбран параметр Ко всем страницам.

4. Затем нажмите кнопку Изменить.

5. Под словами Предполагаемые изменения выберите параметр Графика. Появится диалоговое окно Изменение темы. В этом окне можно добавить пользовательские рисунки к объявлениям на страницах, кнопкам переходов, фоновым рисункам и другим элементам. Текст автоматически накладывается на эти графические элементы, поэтому их не придется изменять при изменении названий, добавлении или удалении страниц. В этом примере изменяется графическое объявление, на которое помещаются заголовки страниц веб-узла Championzone.

6. В списке Элемент выберите Объявление.

7. На вкладке Рисунок нажмите кнопку Обзор, расположенную под именем файла текущего графического элемента объявления. Появится диалоговое окно Открытие файла, содержащее список рисунков данного веб-узла. Так как необходимый графический элемент объявления пока не является частью веб-узла, его придется найти на компьютере пользователя.

8. Перейдите в папку с лабораторными работами.

9. Дважды щелкните файл czbanner. Текущий графический элемент объявления будет автоматически заменен пользовательским.

10. Нажмите кнопку ОК в диалоговом окне Изменение темы, а затем еще раз нажмите кнопку ОК в диалоговом окне Темы. Последует запрос о том, следует ли сохранить изменения текущей темы.

11. Нажмите кнопку Да. Появится диалоговое окно Сохранение темы с сообщением Тема доступна только для чтения. Введите новое название для сохранения.

12. Введите Championzone в качестве названия измененной темы и нажмите кнопку ОК.

13. Нажмите кнопку Да, чтобы применить тему. Измененная тема сохраняется с заменой объявления новым на всех страницах.

14. Для сохранения страницы выберите в меню Файл команду Сохранить или нажмите кнопку Сохранить на панели инструментов.

Страница должна выглядеть так:

Совет. В данной лабораторной работе представлен лишь образец объявления, показывающий, что изменить существующие темы совсем несложно. Для создания пользовательских элементов дизайна на замену существующим следует повторить описанную выше процедуру настройки элементов темы.

Поздравляем, создание веб-узла Championzone практически завершено! Чтобы убедиться в том, что все страницы будут правильно выглядеть в Интернете, веб-узел следует предварительно просмотреть в имеющемся веб-обозревателе.

Предварительный просмотр веб-узла Championzone

В представлении Страница веб-страницы отображаются максимально близко к веб-обозревателю, однако некоторые элементы и местозаполнители представлены иначе для облегчения работы с ними. Просмотр страницы или всего узла в веб-обозревателе перед публикацией веб-узла позволяет убедиться в том, что внешний вид всех страниц отвечает предъявляемым требованиям.

Предварительный просмотр веб-узла в веб-обозревателе

1. В меню Файл выберите команду Просмотр в обозревателе. Появится диалоговое окно Просмотр в обозревателе. В этом окне можно выбрать веб-обозреватель из списка установленных на данном компьютере, добавить обозреватели, установленные после установки программы Microsoft FrontPage, а также выбрать размер окна обозревателя для просмотра веб-узла. Команда Просмотр в обозревателе загружает текущую страницу в веб-обозреватель, позволяя просмотреть ее перед публикацией созданного веб-узла. Для использования этой функции должен быть установлен по крайней мере один веб-обозреватель.

2. В диалоговом окне Просмотр в обозревателе выберите обозреватель Microsoft Internet Explorer и нажмите кнопку Просмотр. Будет запущен указанный веб-обозреватель и открыта домашняя страница.

Экран должен выглядеть так:

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

3. Используйте кнопки на панели переходов для просмотра других страниц. Обратите внимание на вертикальную панель переходов на страницах более низкого уровня, чем домашняя страница. На странице Товары перейдите к ранее добавленной на эту страницу форме обратной связи. Поля формы можно заполнить, но она не будет работать, пока веб-узел Championzone не будет опубликован на веб-сервере. На странице Коллекция фотографий проверьте гиперссылки на полноформатные рисунки, щелкая их эскизы. Вернитесь на страницу Коллекция фотографий с помощи кнопки Назад обозревателя. Наконец, на странице Ссылки обратите внимание на динамическую анимацию заголовка абзаца Ссылки на связанные веб-узлы.

4. По завершении просмотра веб-узла Championzone закройте окно веб-обозревателя.

Организация файлов создаваемого веб-узла

Теперь, когда веб-узел содержит несколько страниц и файлов, для их организации понадобится представление Папки. Как и проводник Windows, представление Папки позволяет управлять файлами и папками вашего веб-узла. Страницы и файлы веб-узла могут быть перемещены без нарушения целостности гиперссылок, заголовков объявлений на страницах или подписей к кнопкам переходов.

В представлении Папки в левой части экрана выводится иерархический список папок вашего веб-узла. Если щелкнуть папку в Списке папок, ее содержимое появится в окне Содержимое в правой части экрана.

На следующих шагах файлы рисунков веб-узла Championzone будут перемещены в папку Images, созданную программой Microsoft FrontPage как часть веб-узла.

Использование проводника Windows или другого менеджера файлов для перемещения страниц и файлов из одной папки в другую привело бы к нарушению ссылок на эти страницы и их элементы. Однако представление Папки обеспечивает обновление страниц и гиперссылок вашего веб-узла в соответствии с новым расположением перемещенных файлов и папок.

Перемещение файлов рисунков в папку

1. Щелкните значок Папки Представления. Будет включено представление Папки программы Microsoft FrontPage.

2. В области Список папок выберите папку Имя Вашей папки\Championzone. Это позволит убедиться в том, что в окне содержимого отображаются все папки и файлы, содержащиеся в корневой папке веб-узла.

3. Щелкните заголовок столбца Тип в области Содержимое. Если щелкнуть заголовок столбца, файлы в области Содержимое будут отсортированы по соответствующему условию. При первом щелчке заголовка столбца список сортируется по возрастанию, при втором щелчке — по убыванию. Список файлов теперь сгруппирован по типу файлов, при этом все рисунки GIF находятся в начале списка, за ними следуют файлы HTM (веб-страницы), а замыкают список рисунки JPG.

4. В окне Содержимое щелкните первый файл рисунка (czbanner) в начале списка.

5. Далее, удерживая нажатой клавишу SHIFT, щелкните последний файл рисунка GIF в списке (frontpage.gif). В представлении Папки поддерживаются все стандартные сочетания клавиш Windows для выделения файлов: SHIFT+щелчок для выделения файлов подряд и CTRL+щелчок для выделения отдельных файлов.

6. При нажатой правой клавише мыши наведите указатель на значок любого из выделенных файлов.

7. Перетащите указатель мыши на папку Images в области Список папок.

8. После выделения папки Images отпустите клавишу мыши и выберите в контекстном меню команду Переместить. Появится диалоговое окно Переименование, которое автоматически открывается при перемещении выбранных файлов в папку Images, так как при этом автоматически изменяются гиперссылки на перемещаемые файлы.

9. Повторите шаги 4-8 для всех файлов рисунков JPG с FPTutor003.jpg по FPTutor006.jpg включительно.

10. В области Содержимое щелкните заголовок столбца Имя, чтобы вернуться к упорядочению списка оставшихся папок и файлов по именам. Теперь все рисунки успешно сгруппированы в папке Images.

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

Создание новой папки

1. В Списке папок щелкните папку, в которой следует создать новую подпапку. Список папок позволяет сворачивать и разворачивать папки для просмотра содержащихся в них подпапок. Щелкните значок <плюс> (+) или <минус> (-) рядом с названием папки для разворачивания или сворачивания списка ее подпапок.

2. В меню Файл выберите команду Создать, а затем — пункт Папка. Будет создана новая папка с временным именем.

3. Выделите временное имя папки (Новая_папка), впишите вместо него настоящее имя и нажмите клавишу ENTER. Новая папка будет переименована, и в нее можно будет перемещать файлы. Созданная папка в этой лабораторной работе не понадобится, поэтому перед публикацией веб-узла ее следует удалить.

4. Щелкните правой кнопкой мыши только что созданную папку в Списке папок.

5. Выберите в контекстном меню команду Удалить.

6. В диалоговом окне Подтверждение удаления нажмите кнопку Да. Папка будет удалена с веб-узла.

Создание сводки по узлу

Представление Отчеты является важным инструментом оценки общего состояния веб-узла перед его публикацией в Интернете. В разнообразных отчетах о веб-узле могут использоваться до 14 категорий.

Создание отчета <Сводка по узлу>

· Щелкните значок Отчеты Представления. Будет включено представление Отчеты. Сводка по узлу является отчетом по умолчанию. Этот отчет содержит сводные статистические данные о страницах и файлах веб-узла Championzone. Ниже перечислены некоторые разделы, которые необходимо просмотреть перед публикацией веб-узла.

· Все файлы. Ваш веб-узел содержит 23 файла общим объемом около 435 килобайт. Указанное количество свободного места потребуется на веб-сервере для размещения веб-узла.

· Медленные страницы. Эта категория содержит страницы, время открытия которых при заданной скорости загрузки превышает заданное.

· Неработающие гиперссылки. Щелкните эту категорию для просмотра подробного отчета о неработающих гиперссылках, если таковые имеются. Автоматически создается список непроверенных гиперссылок, например внешних ссылок на странице Ссылки, а также список неработающих гиперссылок.

· Функционирующие гиперссылки. Чтобы проверить, указывает ли гиперссылка на существующий веб-узел, щелкните ее правой кнопкой в представлении Отчеты и выберите в контекстном меню команду Проверить гиперссылку. Для исправления неработающей гиперссылки необходимо открыть нужную страницу и исправить адрес URL, на который указывает эта гиперссылка.

Проверка орфографии

Проверка орфографии — важный инструмент создания содержимого веб-узла на профессиональном уровне. Даже единственная опечатка на какой-либо странице может поставить под сомнение точность всего содержимого веб-узла. Гибкие настройки программы Microsoft FrontPage позволяют проверить орфографию страниц в процессе их создания и изменения, а также проверить все страницы подряд перед публикацией веб-узла в Интернете.

В программе Microsoft FrontPage поддерживаются три способа проверки орфографии:

· автоматически проверка орфографии при вводе текста;

· проверка орфографии текущей страницы вручную;

· проверка орфографии на всех страницах веб-узла.

Автоматическая проверка орфографии В представлении Страница текст автоматически проверяется по мере его ввода на странице, как это делается в программах Microsoft Word, Microsoft PowerPoint и остальных программах пакета Microsoft Office. Для неизвестных или подозрительных слов может последовать приглашение проверить эти слова вручную. Обычно требуют проверки имена людей и географические названия.

Если вы уверены, что подозрительные слова написаны правильно, выберите режим игнорирования и сохранения таких слов без изменения или добавления их в пользовательский словарь, который используется при последующих проверках орфографии в программе Microsoft FrontPage. Если же слово действительно введено с ошибкой, его можно быстро исправить, щелкнув правой кнопкой мыши и выбрав один из предлагаемых вариантов написания.

Проверка орфографии вручную Постраничная проверка орфографии доступна в представлении Страница. Для этого следует щелкнуть правой кнопкой мыши отдельные слова или выбрать команду Орфография в меню Сервис.

Проверка орфографии на всем веб-узле Кроме автоматической постраничной и фоновой проверки орфографии в представлении Страница команда Орфография может использоваться в любом другом представлении для проверки всех или только выбранных страниц веб-узла. Сквозная проверка орфографии поддерживается любым представлением веб-узла.

Возможна проверка орфографии тех элементов страницы, которые могут быть сразу же изменены на этой странице. Проверка орфографии других текстовых элементов, таких как заголовки страниц в объявлениях страниц или текст в компонентах FrontPage, не поддерживается.

Проверка орфографии текущего веб-узла

1. В меню Сервис выберите команду Орфография. Появится диалоговое окно Орфография. В этом окне можно задать проверку всех или только выбранных страниц веб-узла.

2. В диалоговом окне Орфография выберите параметр На всем веб-узле, а затем установите флажок Добавлять задачу для каждой страницы с ошибками. Для каждой страницы, содержащей неправильно написанные слова, в список задач будет добавлена отдельная задача. Представление Задачи рассматривается в следующем разделе.

3. В диалоговом окне Орфография нажмите кнопку Начать, чтобы начать проверку орфографии. На экране будет развернуто диалоговое окно Орфография для отображения хода проверки орфографии. По завершении этой операции автоматически выводятся список слов, содержащих ошибки, и перечень задач, добавленных в список задач в представлении Задачи.

4. Нажмите кнопку Отмена, чтобы закрыть диалоговое окно Орфография. На этом проверка орфографии заканчивается, однако исправления будут внесены только после выполнения задач, перечисленных в списке задач.

Замена текста на веб-страницах

Команда Заменить позволяет без труда находить и заменять содержимое выбранных или всех страниц текущего веб-узла. Кроме замены текста на текущей странице в представлении Страница эту команду можно использовать в других представлениях для замены текста на всех или только выбранных страницах текущего веб-узла. Для замены доступен любой текст, который может быть изменен непосредственно на данной странице. Автоматическая замена других текстовых элементов, таких как заголовки страниц в объявлениях страниц или текст в компонентах FrontPage, не поддерживается.

Замена текста на всех страницах текущего веб-узла

1. В меню Правка выберите команду Заменить. Появится диалоговое окно Найти и заменить. В этом окне можно ввести строку текста для поиска и строку для замены. Замена текста может быть осуществлена на всех или только на выбранных страницах текущего веб-узла.

2. Установите переключатель в положение На всех.

3. В диалоговом окне Найти и заменить в поле Найти введите фразу Добро пожаловать на Championzone.

4. В поле Заменить на введите фразу Благодарим за посещение Championzone.

5. Установите флажок Учитывать регистр и нажмите кнопку Найти на веб-узле. Диалоговое окно Найти и заменить будет развернуто для отображения хода поиска. Искомый текст будет обнаружен на домашней странице Index.php. По завершении операции будет выведен список найденных вхождений.

6. Нажмите кнопку Заменить в диалоговом окне Найти и заменить.

7. Будет открыта домашняя страница с выделенной фразой Добро пожаловать на Championzone.

8. Нажмите кнопку Заменить.

9. Когда в окне появится поле Проверено страниц, нажмите кнопку Назад в список, затем — кнопку Отмена.

Выполнение задач веб-узла

В представлении Задачи отображается список всех невыполненных задач, связанных с текущим веб-узлом. Задачи — это вопросы, на которые надо обратить внимание перед публикацией веб-узла.

В предыдущих упражнениях в список были добавлены задачи, связанные с действиями, отложенными на более позднее время. Например, при проверке орфографии страниц веб-узла был задан режим добавления новой задачи для каждой страницы, содержащей орфографические ошибки. Добавление задач в список позволяет внести подобные исправления все вместе.

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

Выполнение задач в представлении <Задачи>

1. Щелкните значок Задачи Представления. Появится список Задачи.

2. Дважды щелкните первую задачу Исправление слов с ошибками. Появится диалоговое окно Сведения о задаче. В этом окне можно просмотреть подробные сведения о выбранной задаче. Для задачи может быть установлен приоритет. Задачу можно назначить другому исполнителю, работающему в сети. Кроме того, задачу можно выполнить самостоятельно и удалить ее из списка.

3. В диалоговом окне Сведения о задаче нажмите кнопку Запустить. Будет включено представление Страница и открыта страница, содержащая слова с орфографическими ошибками.

4. В ответ на запрос о правильности названия Championzone в диалоговом окне Орфография нажмите кнопку Добавить. Слово Championzone будет добавлено в словарь.

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

5. Нажмите кнопку OK.

6. Проверка орфографии завершается. При желании можно вернуться в представление Задачи и пометить данную задачу как завершенную.

ЛАБОРАТОРНАЯ РАБОТА №8

Тема работы: Изучение языка JavaScript.

Цель работы: Изучить основы языка программирования JavaScript на стороне клиента.

Теоретическая часть:

JavaScript — это язык программирования, предназначенный прежде всего для создания интерактивных HTML-страниц. Первая версия языка была разработана фирмой Netscape Communications в 1995 году. Обратите внимание, с языком Java, созданным фирмой Sun Microsystems, у JavaScript мало общего.

Программу на языке JavaScript обычно встраивают прямо в HTML-файл. Чтобы программа была выполнена, HTML-файл должен быть открыт в браузере пользователя.

JavaScript — интерпретируемый язык. Это означает, что для исполнения программы не требуется предварительная компиляция (преобразование исходного текста программы в системо-зависимый машинный код). Текст программы интерпретируется, то есть анализируется и сразу же исполняется.

Приведем простейший пример HTML-страницы с программой на JavaScript:

<HTML>
<HEAD>
<TITLE>Заголовок страницы</TITLE>
<SCRIPT language="JavaScript">
function click_func(){
alert('Hello, world!');
}
</SCRIPT>
</HEAD>
<BODY>
<input type="button" value="Click me!" onClick="javascript:click_func();">
</BODY>
</HTML>

Создайте данную HTML-страницу и посмотрите как она работает.

Текст программы заключен между тегами <SCRIPT> и </SCRIPT>. Программа состоит из одной функции click_func(), которая, в свою очередь вызывает стандартную функцию alert с параметром "Hello, world!". Функция активизируется по событию onClick — нажатие на кнопку. Результатом выполнения программы является вывод на экран окна предупреждения с заданным текстом.

Язык JavaScript может не только выводить на экран вновь создаваемы окна, но и динамически изменять уже загруженную браузером страницу. Перепишем как указано ниже:

<HTML>
<HEAD>
<TITLE>Заголовок страницы</TITLE>
<SCRIPT language="JavaScript">
function click_func(){
document.write('Hello, world!');
}
</SCRIPT>
</HEAD>
<BODY>
<input type="button" value="Click me!" onClick="javascript:click_func();">
</BODY>
</HTML>

Создайте данную HTML-страницу и посмотрите как она работает.

Как вы заметили, вместо вызова функции alert производится вызов функции write объекта document. Эта функция выводит на экран текст, передаваемый в качестве параметра и стирает все, что содержалось на странице до ее вызова.

Объект document создается браузером в момент загрузки страницы. Необходимо отметить, что в JavaScript определена целая иерархия объектов, которые должен создавать браузер всякий раз при загрузке страницы или при открытии окна. Эти объекты доступны для использования разработчиками. Их использование сводится к вызову методов объекта или чтения/переопределения его свойств. Методы объекта вызываются так:

объект.метод([параметры])

Вспомните, так было для объекта document, когда мы вызывали его метод write.

Доступ к свойствам осуществляется по той же схеме:

объект.свойство.

Например, document.location будет содержать строку с адресом страницы.

Разберем, как пользоваться подобными свойствами в программе. Рассмотрим пример:

<title>Тестируем JavaScript</title>
<SCRIPT LANGUAGE="JavaScript">
var bgc = document.bgColor;
var fgc = document.fgColor;
var lc = document.linkColor;
var al = document.alinkColor;
var vlc = document.vlinkColor;
var url = document.location;
var ref = document.referrer;
var t = document.title;
var lm = document.lastModified;
document.write("Цвет фона этой страницы: " + bgc);
document.write("<br>Цвет текста этой страницы: " + fgc);
document.write("<br>Цвет ссылок этой страницы: " + lc);
document.write("<br>Цвет активных ссылок: " + al);
document.write("<br>Цвет посещенных ссылок: " + vlc);
document.write("<br>URL этой страницы: " + url);
document.write("<br>До этого вы были на странице: " + ref);
document.write("<br>Заголовок этой страницы: " + t);
document.write("<br>Последние изменения внесены: " + lm)
</SCRIPT>
Создайте данную HTML-страницу и посмотрите на работу этого скрипта.

Иерархию объектов языка JavaScript можно сопоставить с иерархией объектов в реальном мире. Колеса, руль и педали — это все объекты, принадлежащие велосипеду. Велосипед представляет собой объект, принадлежащий к средствам наземного транспорта, которые, в свою очередь, принадлежат к более общей категории средств передвижения.

В терминах объектов JavaScript эти взаимоотношения могли бы быть выражены следующим образом:

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

Проиллюстрируем иерархию объектов:

navigator
window
|
+--location
|
  +--history
|
+--document
       |
       +--forms
       |    |
       | elements (text fields, textarea, checkbox, password
       |            radio, select, button, submit, reset)
       +--links
       |
       +--images
       |
       +--anchors
Используя иерархию объектов, попробуем вывести в статус-панель адрес первой ссылки на текущей странице. Статус-панель находиться в самом низу вашего обозревателя:

Если эта панель скрыта, вы можете подключить ее: меню View > Status Bar.

При нажатии на в статус-панели должен появиться адрес первой ссылки на текущей странице.

Исходный текст выглядит так:

<input type=button value="эту кнопку" onClick="javascript:window.status=window.document.links[0].href">
Обратите внимание, что первую ссылку на странице мы нашли в массиве links под номером 0. К самому массиву доступ был получен перечислением всех объектов иерархии текущего документа window.document.links. Адрес, относящийся к ссылке, хранится в свойстве href объекта link, в нашем случае это links[0].

Ход работы:

Объявление функций.

С помощью текстового редактора "Блокнот" (Notepad) создайте страницу testjs.php и поместите в начало страницы следующий код:

2.
3.
4.
5.
6.
7.
8.
9.
10.       document.write("Это JavaScript!<br>");
11.
12.
13.       document.write("Это JavaScript!<br>");
14.
15.
16.       document.write("Это JavaScript!<br>");
17.
18.
19.
20.

Сохраните страницу и просмотрите ее с помощью браузера.

Такой скрипт выведет на экран следующий текст:

23.
24.
три раза. Наверняка вы заметили, что для получения необходимого результата определенная часть его кода была повторена три раза. Это неэффективно, поэтому попробуем оптимизировать код.

Определите функцию welcome_func(), которая будет выводить на экран строки:

26.
27.

Затем вызовите функцию несколько раз. Для этого вы можете использовать цикл:

29.
30.       for(i=0; i<3; i++){
31.       welcome_func();
32.       }
33.

Функции могут также использоваться в совместно с процедурами обработки событий. Рассмотрим пример. Создайте страницу testjs2.php, введите следующий код:

35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.       <input type="edit" onFocus="calculation()">
56.
57.
58.
59.

В приведенном примере интрес представляют следующие нововведения:

var x = 12; — так в JavaScript объявляются переменные, тип переменной не дифференцируется — одинаково объявляются переменные типа double, integer, String и прочие; window.status = result; — свойству window.status присваивается новое значение, в нашем случае это строка 17, эта строка будет отображена в статус-панели браузера. onFocus — это команда, которая вызывает действие, когда пользователь "фокусируется" на элементе страницы, в нашем случае — помещает курсор в текстовое поле.

Сохраните файл.

Для просмотра созданной Web-страницы используйте браузер Microsoft Internet Explorer.

Вы должны увидеть Web-страницу с определенным в ее верхней части окном редактирования, установка курсора в этом окне приведет к появлению строки 17 в статус-панели браузера.

На этой же странице создайте функцию, которая будет вызываться при потере фокуса полем редактирования и помещать в статус-панель результат, полученный от разности чисел x и y. Обработчику события "потеря фокуса" в JavaScript соответствует параметр onBlur.

Продемонстрируйте полученный документ преподавателю.

Манипуляция объектами.

Сохраните на жестком диске своего компьютера файлы aircraft1.jpg и aircraft2.jpg.

Создайте с помошью текстового редактора "Блокнот" (Notepad) файл testjs3.php и поместите в начало страницы следующий код:

3.           <IMG NAME="aircraft" SRC="aircraft1.jpg">
В своем скрипте вы можете назначать этому объекту новое изображение:

document.images["aircraft"].src='new_image.jpg'
Обратите внимание, что к интересующему нас объекту Image в массиве images мы обращаемся не по порядковому номеру, а по имени элемента images["aircraft"]. Более того, если имя объекта на странице оригинально, мы можем обратиться к нему напрямую, минуя упоминание массива:

document.aircraft.src='new_image.jpg'

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

5.           <IMG NAME="aircraft" SRC="aircraft1.jpg">
6.
7.           document.aircraft.src='aircraft2.jpg';
8.

Попробуйте просмотреть страницу в браузере — сразу же после загрузки документа картинка aircraft1.jpg должна замениться на aircraft2.jpg.

Эффект происходит очень быстро и заметить его сложно. Модифицируем страницу таким образом, чтобы рисунки замещались при наведении курсора мыши на рисунок:

11.       <IMG NAME="aircraft" SRC="aircraft1.jpg" onMouseOver="onOver();">
12.
13.
14.
15.       document.images["aircraft"].src='aircraft2.jpg';
16.
17.

Попробуйте просмотреть страницу в браузере — картинка aircraft1.jpg заменяется на aircraft2.jpg при наведении указателя мыши на изображение.

Добавьте обработчик события onMouseOut — удаление указателя мыши с поверхности изображения. Пусть по этому событию активным становится рисунок aircraft1.jpg.

Скачайте и сохраните на своей машине файл aircraft3.jpg.

Добавьте обработчик события onMouseDown — нажатие мыши. Пусть при клике на изображении активным рисунком становится aircraft3.jpg

Сохраните файл.

Управление объектами формы.

Форма (form) — это контейнер html-страницы, в котором могут быть размещены элементы, позволяющие пользователю вводить данные для отправки на сервер. К таким элементам можно отнести тектстовые поля, списки, кнопки выбора и т.п.

С помощью текстового редактора "Блокнот" (Notepad) создайте страницу testform.php и поместите на странице следующий код:

3.
4.
5.
6.
7.
8.           <img src="aircraft1.jpg" name="pic1">
9.
10.
11.
12.
13.
14.
15.       <input type="text" name="name" value=""><br>
16.
17.
18.       <input type="text" name="email" value=""><br><br>
19.
20.       <input type="button" value="Нажмите!" name="myButton">
21.
22.
23.
24.       <img src="aircraft2.jpg" name="pic2">
25.
26.
27.
28.
29.
30.

Вот так должна выглядеть Ваша страница:

На странице размещено два рисунка, одна ссылка и форма с двумя полями для ввода текста и одной кнопкой. Как уже отмечалось выше, с точки зрения языка JavaScript, загруженная в настоящий момент html-страница, представляет собой объект document. Через этот объект можно получить доступ ко всем элементам, размещенным на странице. На следующем рисунке иллюстрируется иерархия объектов, создаемая HTML-страницей, приведенной в примере:

Создадим скрипт, который позволит заполнять текстовые поля формы предопределенными значениями.

В разделе <head> ... </head> разместите следующий код:

35.
36.
37.       document.forms[0].elements[0].value = "Евгений";
38.       document.forms[0].elements[1].value = "vest@list.ru";
39.
40.

Привяжите запуск функции к событию onClick кнопки "Нажмите!".

Сохраните страницу и просмотрите ее в окне браузера. При правильно работе скрипта по нажатию кнопки "Нажмите!" текстовые поля должны заполняться значениями.

Так как все элементы на странице имеют свои уникальные имена (обратите внимание на параметр name в каждом элементе), в скрипте их можно вызывать не по индексам, а по именам в соответствующих массивах:

44.
45.
46.       document.forms['myForm'].elements['name'].value = "Евгений";
47.       document.forms['myForm'].elements['email'].value = "vest@list.ru";
48.
49.
или даже так:

<script>
function fillIn(){
document.myForm.name.value = "Евгений";
document.myForm.email.value = "vest@list.ru";
}
</script>

Продемонстрируйте полученный документ преподавателю.

ЛАБОРАТОРНАЯ РАБОТА №9

Тема работы: Изучение языка PHP.

Цель работы: Изучить основы языка серверного скриптования PHP.

Теоретическая часть:

PHP (официальное название "PHP: Hypertext Preprocessor") — язык скриптования на стороне сервера, встраиваемый в HTML-документ.

Для того, чтобы понять, что это означает, разберем пример простого скрипта:

<html>
    <head>
        <title>Пример</title>
    </head>
    <body>

        <?php
        echo "Привет, это PHP-скрипт!";
        ?>

    </body>
</html>
Создайте данную HTML-страницу и посмотрите как она работает.

Обратите внимание, не программный код выводит на экран теги html-документа, сам гипертекстовый документ содержит небольшой встроенный программный код. Иными словами, вебмастер по-прежнему может создавать гипертекстовые страницы с помошью привычного ему редактора, а затем, при необходимости, встраивать элементы динамической обработки — небольшие скрипты. В рассмотренном примере вся программа состоит из одной строки:

echo "Привет, это PHP-скрипт!";

Сервер "узнает" о том, что это исполняемая программа по специальным тегам:

<? ... ?>

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

Все страницы, содержащие программный код, должны иметь расширение .phtml или .php, однако, если вы имеете доступ к админимстрированию сервера, вы можете настроить препроцессор PHP таким образом, чтобы на содержание скрипта проверялись все страницы, включая .php.

Ход работы:

Вывод на экран и переменные в РНР.

С помощью текстового редактора "Блокнот" (Notepad) создайте файл testphp1.phtml и поместите в начало страницы следующий код:

<html>
<head>
<title>Вывод на экран и переменные в РНР</title>
<?php
echo "Привет, мир!";
?>
</head>
<body>
</body>
</html>

Попробуем ввести в скрипт переменные каждого из перечисленных типов:

<html>
<head>
<title>Вывод на экран и переменные в PHP</title>
</head>
<body>
<?php
$i = 6; // целое
$d = 4.89; // дробное
$str = "PHP для всех!"; // строка
echo ($i + $d);
echo "<br>Привет, мир! ".$str;
?>
</body>
</html>

Обратите внимание, что все переменные в PHP должны начинаться с символа dollar ($), тип переменной не задается в явном виде, он вычисляется препроцессором PHP в зависимости от контекста. В результате работы скрипта на экран первой строкой будет выведена сумма значений двух переменных $i и $d и результат конкатенации двух строк "<br>Привет, мир!" и значения переменной $str.

Поддерживаются все арифметические операции и функции, многоуровневые скобки, логические операции, операции увеличения или уменьшения на единицу и многое другое. Кроме того, очень просто и естественно организуется сравнение если — то — иначе. Для этого в РНР применяется конструкция:

if (условие)
{
код для выполнения N1;
}
else
{
код для выполнения N2;
}

Рассмотрим несложный пример:

<html>
<head>
<title>Вывод на экран и переменные в РНР</title>
</head>
<body>
<?php
$i = 6; // целое
$v = 7;
$d = 4.89; // дробное
$str = "РНР для всех!"; // строка
echo ($i + $d);
echo "<br>Привет, мир!".$str;
if($i == $v)
{
echo $i + $v;
}
else
{
echo $i.$v;
}
?>
</body>
</html>

При сравнении на истину применяется два знака равенства для того, чтобы интерпретатор мог без труда отличить сравнение от присваивания. Результат работы скрипта — 67, т.к $i не равно $v, а команда echo $i.$v; объединяет две строки: "6" и "7". Неравенство (ложь) обозначается символами !=, допустимы все остальные арифметические и логические символы и операторы (например, or, and, >, <= и т.д.).

В РНР есть средства быстрого изменения переменной на единицу в сторону увеличения или уменьшения. Для этого нужно указать имя переменной и за ней, без знака равенства, — подряд два плюса или минуса соответственно. Например, $a++; — переменная $a будет увеличена на единицу. Поддерживается одновременное присваивание одного значения нескольким переменным — $a = $b = 4;. Введите на странице testphp1.phtml следующий код:

<html>
<head>
<title>Вывод на экран и переменные в РНР</title>
</head>
<body>
<?php
$b = $a = 5;
echo "<br>переменная a=$a, b=$b";
$c = $a++;
echo "<br>переменная a=$a, c=$c";
$e = $d = ++$b;
echo "<br>переменная e=$e, d=$d, b=$b";
$g = 10;
$h = $g += 10;
echo "<br>переменная g=$g, h=$h";
?>
</body>
</html>

Обратите внимание, что операция присваивания тоже дает свой результат, так операция $a = 5 дала результат 5, именно поэтому переменная b была проинициализирована в 5. В операции $c = $a++; сначала было произведено присваивание, а затем переменная $a была увеличена на 1. В операции $d = ++$b; сначала была увеличена на 1 переменная $b, а уже затем присвоено получившееся значение.

Передача параметров по ссылке, передача параметров из формы (GET и POST -- запросы).

С помощью текстового редактора "Блокнот" (Notepad) создайте файл testphp2.phtml и поместите в начало страницы следующий код:

<html>
<head>
<title>Вывод на экран входящих параметров</title>
</head>
<body>
<?php
echo $message.", ".$name;
?>
</body>
</html>

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

Создайте страницу testphp2_form.php. Задайте на ней форму:

<form name="myform" method="get" action="testphp2.phtml">
<br>Сообщение:<br>
<input type="text" name="message">
<br>Имя:<br>
<input type="text" name="name">
<br><input type="submit" value="Обработать данные">
</form>

Проверьте работоспособность скрипта.

Обратите внимание, что на странице с формой элементам назначены имена, соответствующие именам переменных в принимающем скрипте.

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

Вместо элемента <input type="text" name="name"> определите на странице выпадающее меню, такое, как приведено ниже:

Измените работу скрипта таким образом, чтобы пользователь мог выбрать имя из списка, ввести приветствие, нажать кнопку "Обработать данные" и получить приветствие для выбранного имени.

Измените страницу с формой так, чтобы пользователь мог выбрать приветствие, нажав кнопку зависимой фиксации (radiobutton):

Привет Здравствуйте Рад Вас снова видеть Добрый день

Измените страницу с формой так, чтобы пользователь мог выбрать фон страницы (средство выбора — на Ваше усмотрение).

Динамическое формирование страницы.

Создайте 3 файла с именами: testphp3_inc1.php, testphp3_inc2.php и testphp3_inc3.php. Поместите небольшой текст в каждый.

Создайте файл testphp3.phtml, поместите в него следующий код:

<html>
<head>
<title>Динамическое формирование страниц</title>
</head>
<body bgcolor=silver>
<?php
$file = "";
if ($link == 1) { $file = "testphp3_inc1.php"; }
if ($link == 2) { $file = "testphp3_inc2.php"; }
if ($link == 3) { $file = "testphp3_inc3.php"; }
if ($file == "") { ?>
<h3>Пожалуйста, выберите cтихотворение:</h3>
<a href="testphp3.phtml?link=1"> текст N1</a><br>
<a href="testphp3.phtml?link=2"> текст N2</a><br>
<a href="testphp3.phtml?link=3"> текст N3</a>
<? } else {
include($file);
}
?>
</body>
</html>

Сохраните созданные файлы, затем запустите файл testphp3.phtml.

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

Измените скрипт таким образом, чтобы тексты включались в таблицу с желтым фоном; ссылка на страницу, которая импортирована в файл в настоящий момент, была неактивна.

Cоздайте массив $titles, который будет содержать названия текстов. Из этого массива должно формироваться содержимое тега <title>...</title> в зависимости от импортируемой страницы.

Внизу страницы поместите ссылки Предыдущее, К оглавлению и Следующее. Ссылка Предыдущее должна вести к предыдущему (по порядковому номеру) стихотворению, ссылка Следующее должна вести к следующему (по порядковому номеру) стихотворению. Ссылки должны исчезать со страницы, если предыдущие/следующие стихотворения исчерпаны. Ссылка К оглавлению должна приводить страницу в первоначальный вид и исчезать на странице оглавления.

Перенесите файлы testphp3_inc1.php, testphp3_inc2.php и testphp3_inc3.php в папку includes и внесите соответствующие изменения в скрипт.

Работа с файлами.

Создайте файл testphp4_form.php, поместите в него форму, которая будет содержать текстовое поле <textarea name=message cols=10 rows=4></textarea>, поле редактирования <input type=text name=person> и кнопку для отправки данных.

Настройте форму таким образом, чтобы данные направлялись скрипту testphp4.phtml.

Создайте файл testphp4.phtml, поместите в него следующий код:

<html>
<head>
<title>Гостевая книга</title>
</head>
<body bgcolor=silver>
<?php
$filename = "messages.txt";
$fp = fopen($filename,"a");
if($fp)
{
fputs($fp, $message." ".$person);
fclose($fp);
}
include($filename);
?>
</body>
</html>

Создайте пустой файл messages.txt — в него будут сохраняться все сообщения пользователей.

Запустите файл testphp4_form.php, убедитесь в работоспособности скрипта.

Должно происходить следующее: переменные $message и $person принимаются скриптом testphp4.phtml, открывается файл messages.txt (делается это методом fopen, подробнее о нем читайте), помещает в его конец строку, состоящую из значений переданных переменных, разделенных пробелом (делается это методом fputs, подробнее о нем читайте).

Измените работу скрипта таким образом, чтобы сообщения и имена пользователей выводились в отформатированном виде, например, поместите их в ячейки таблицы.

Измените работу скрипта таким образом, чтобы форма находилась в файле testphp4.phtml, иными словами, удалите файл testphp4_form.php.

В начало страницы поместите guestbook.jpg .