СОЗДАНИЕ WEB-СТРАНИЦ И WEB-САЙТОВ

Изучаемые темы:

1. Создание Web-страниц.

2. Размещение Web-страниц в Интернете.

3. Создание Web-страниц и Web-сайтов с помощью MS FrontPage 2002.

Тема № 1

СОЗДАНИЕ WEB-СТРАНИЦ

Вопросы: 1. Общие сведения о создании Web-страниц.

2. Создание и оформление Web-страниц.

1. Общие сведения о создании Web-страниц

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

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

HTML – HyperText Markup Language (Язык разметки гипертекста) представляет собой довольно простой набор команд, описывающих структуру документа. Этот язык разметки позволяет выделить в документе отдельные логические части – заголовки, абзацы, таблицы, списки-перечисления и т.д., но не задает конкретные атрибуты форматирования. Конкретный вид форматирования определяет сам браузер при чтении документа, и именно браузер обеспечивает наилучшее отображение Web-документа на вашем экране.

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

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

Документ в окне с кодом HTML - это текстовый документ специального формата. Все файлы этого формата имеют расширение .html или .htm. В документе HTML обычный текст сочетается с элементами разметки, заключенными в угловые скобки < и >, например <html>, <head>, <title>, </title>. Такие элементы разметки называются тэгами. Тэги бывают одиночными, открывающими и закрывающими и состоят из следующих друг за другом в определенном порядке элементов:

• левой угловой скобки <;

• необязательного символа слэш /, который означает, что тэг является конечным тэгом, закрывающим некоторую структуру, например, </title>. В этом смысле можно читать символ / как конец некоторого элемента разметки, например, строки или абзаца;

• имени тэга, например, html;

• необязательных атрибутов. Тэг может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например, align="center";

• правой угловой скобки >.

Таким образом, открывающий тэг <html>, стоящий вначале документа HTML и означающий его начало, состоит из имени html и двух угловых скобок < >, а тэг </html>, находящийся в конце Web-документа, кроме указанных элементов содержит также символ слэш /, означающий закрывающий тэг и указывающий на конец документа. Тэг <div align="center">, означающий разделение документа на части, содержит, кроме имени div, атрибут align со значением "center", означающий выравнивание по центру.

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

Язык HTML не различает большие и малые буквы, так что тэги <HEAD>, <head> и <Head> эквивалентны. Далее мы будем использовать написание тэгов в нижнем регистре.

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

В таких случаях два тэга и часть документа, заключенная между ними, образует блок, называемый элементом HTML. Некоторые тэги, например <hr>, являются одиночными, и для них закрывающий тэг не применяется. Такие тэги сами по себе являются элементами HTML.

Большинство тэгов могут иметь один или несколько атрибутов - параметров, дающих дополнительную информацию о том, как браузер должен обрабатывать текущий тэг. Однако атрибутов может и не быть вовсе. Атрибут тэга состоит из имени, например, align, знака равенства = и значения, которое задается строкой символов, например, "center":align="center". Значения атрибутов обычно заключаются в кавычки. Однако если эти значения используют только символы латинского алфавита, цифры и дефисы, то кавычки можно опустить, например: align=center.

Каждый HTML-документ имеет определенную структуру, которая выглядит следующим образом:

<html>

<head>

…

</head>

<body>

…

</body>

</html>

Структура HTML-документа содержит следующие обязательные элементы:

• тэги <html> и </html>, которые отмечают начало и конец документа;

• заголовок, ограниченный тэгами <head> и </head>;

• тело, ограниченное тэгами <body>...</body>.

В заголовке, ограниченном тэгами <head> и </head>, с помощью тэгов <title>...</title> определяется название документа, которое должно описывать его содержимое и обычно содержит не более 5-6 слов. Это название отображается браузерами в строке заголовка рабочего окна программы, а роботы, составляющие индексы для поисковых систем, идентифицируют документ, используя его название.

Кроме элемента <title>...</title>, заголовок может содержать элементы <meta>...</meta>. Открывающий тэг <meta> включает пары имя=значение, описывающие свойства документа, например, авторство, список ключевых слов и т.д. Эти данные используются также поисковыми серверами при индексации документов.

2. Создание и оформление Web-страниц

Для создания Web-страниц понадобится любой браузер - Internet Explorer или Netscape Communicator, а лучше оба, так как многие элементы HTML по-разному отображаются в разных программах просмотра и весьма желательно контролировать эту разницу. Кроме того, нужен любой текстовой редактор, например, Блокнот из Windows. Программа Блокнот нужна для подготовки HTML-файлов, а браузер - для просмотра и контроля сделанного. С помощью этих инструментов мы создадим сайт на своем локальном компьютере, после чего поместим его на один из WWW-серверов в Интернете, сделав, таким образом, ваши Web-страницы доступными всему миру.

В качестве примера создадим сайт лицея. Цель сайта - рассказать миру о лицее, сфере его деятельности, интересов, найти друзей, партнеров, спонсоров.

Для файлов нашего сайта нужна отдельная папка.

Создайте папку с именем Web на жестком диске вашего компьютера.

Теперь запустим программу Блокнот и приступим к работе.

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

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

Введите с клавиатуры следующие основные тэги, поместив каждый из них, кроме закрывающего тэга </title>, в новой строке.

<html>

<head>

</head>

<body>

</body>

</html>

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

Напомним, что первый <html> и последний </html> тэги означают соответственно начало и конец документа, элемент <head>...</head> определяет заголовок Web-страницы, элемент <body>...</body> - тело документа, а в элементе <title></title> мы сейчас укажем название Web-страницы.

Между открывающим <title> и закрывающим </title> тэгами вставьте название документа – Лицей № 1548. Этот элемент должен выглядеть следующим образом:

<title>Лицей № 1548</title>

Напомним, что название Web-страницы должно быть коротким и в максимальной степени отображать ее содержание.

Наша следующая задача - вставить в тело документа между тэгами <body>...</body> короткий текст-приветствие посетителям Web-страницы.

Вставьте пустую строку между тэгами <body> и </body> и введите в ней следующий текст:

Добро пожаловать на страничку лицея № 1548! Здесь Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших успехах и достижениях

Для каждой Web-страницы вы можете определить цвет фона и цвет текста. Это выполняется с помощью атрибутов bgcolor и text открывающего тэга <body>. Для определения цвета как значения атрибутов существует два варианта:

• словесное указание имени цвета, например, white (белый). В языке HTML предусмотрено шестнадцать таких имен;

• цифровое обозначение в шестнадцатеричной записи, например, "#ffffff" - белый, которое указывает, каким образом цвет формируется из основных цветов - красного, зеленого, синего.

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

Используем в качестве примера для фона нашей Web-страницы синий цвет (blue), а для текста - желтый (yellow).

Вставьте в открывающий тэг <body> атрибуты bgcolor=blue и text=yellow. Этот тэг должен принять вид:

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

<html>

<head>

<title>Лицей № 1548</title>

</head>

</body>

</html>

Теперь документ следует сохранить. Откройте ранее созданную папку Web, введите имя файла licey1548.html и нажмите кнопку Сохранить.

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

Возможно, в вашем браузере размер шрифта текста будет крупнее или мельче, чем на рисунке. В таком случае выберите команду меню Вид • Размер текста • Средний в браузере Internet Explorer или Вид • Увеличить шрифт, Вид • Уменьшить шрифт в браузере Netscape Communicator, чтобы установить средний размер шрифта.

Следует иметь в виду, что разные браузеры могут по-разному отображать содержимое одного и того же HTML-файла. Поэтому при создании Web-страниц желательно всегда просматривать результат в обоих наиболее популярных браузерах - Internet Explorer и Netscape Communicator. В таком случае вы будете уверены, что посетитель вашего сайта увидит именно то, что вы хотите ему показать.

Так как в элементе <body></body> мы ввели текст без разбивки на абзацы, то в браузере он отображается в виде одного абзаца и выровнен влево. Теперь следует придать тексту более наглядный вид.

2.1. Форматирование текста

Чтобы наша Web-страница выглядела более привлекательно, разделим текст на абзацы и выделим заголовок. HTML имеет шесть уровней заголовков разделов документа, пронумерованных цифрами от 1 до 6. Заголовки объявляются парой тэгов с номерами, соответствующими уровню, например, <h1></h1> - заголовок раздела первого уровня, а <h6></h6> - заголовок раздела шестого уровня. От нормального текста заголовки отличаются размером и толщиной букв. Заголовок первого уровня h1 отображается обычно очень крупным шрифтом, в то время как заголовок шестого уровня h6 - очень мелким.

Не следует путать заголовки разделов документа с рассмотренным ранее заголовком документа, определяемым элементом <head></head>.

В качестве заголовка текста используем первое предложение - Добро пожаловать на страничку лицея 1548! Для этого достаточно ограничить его тэгами <h1> и </h1>.

Вставьте в текст файла licey1548.html тэги <h1> и </h1> так, чтобы они ограничивали первое предложение текста, и этот фрагмент кода принял следующий вид:

<h1>Добро пожаловать на страничку лицея 1548!</h1>

Сохраните файл, выбрав команду Сохранить меню Файл программы Блокнот.

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

Нажмите клавишу F5 или кнопку Обновить на панели инструментов рабочего окна программы Internet Explorer или аналогичную кнопку Обновить в Netscape Communicator. Файл licey1548.html будет перезагружен, и вы увидите в окне браузера, как выглядит заголовок первого уровня.

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

По умолчанию заголовок выравнивается по левому краю страницы. Но его можно также выровнять по правому краю или центрировать. Для правостороннего выравнивания в тэге <h1> используется атрибут align=right, а для центрирования — align=center. Допускается также явное указание левостороннего выравнивания - align=left.

Добавьте в тэг <h1> атрибут align=center, чтобы центрировать заголовок. Этот элемент должен принять следующий вид:

<h1 align=center>Добро пожаловать на страничку лицея 1548!</h1>

Теперь займемся остальным текстом. Увеличим его размер и оформим текст полужирным курсивным начертанием. Для установки полужирного начертания используются парные тэги <b></b>.

Вставьте в файле licey1548.html открывающий <b> и закрывающий </b> тэги так, чтобы они ограничили текст Здесь вы узнаете… . Этот элемент должен принять следующий вид:

<b> Здесь Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших успехах и достижениях </b>

Курсивное начертание устанавливается с помощью тэгов <i></i>.

Вставьте в исходный код HTML тэг <i> и </i> так, чтобы отредактированный элемент принял следующий вид:

<b><i>Здесь Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших успехах и достижениях</i></b>

Элементы разметки могут быть вложенными, как в данной структуре, где элемент <i>...</i> вложен в элемент <b>...</b>. Современные браузеры способны правильно обрабатывать вложенные тэги. Поэтому вам необходимо следить за тем, чтобы не нарушался порядок вложения. Работа браузера окажется затрудненной, если вложенность будет нарушена. Например, такая запись будет неправильной: <b><i>...</b></i>. Соблюдение вложенности - очень важная часть общей культуры написания HTML-кода.

С помощью пары тэгов <u></u> можно установить подчеркнутое начертание текстового фрагмента, который ограничивают данные тэги, а с помощью пары тэгов <tt></tt> -отобразить текст телетайпным шрифтом.

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

Тэги <big></big> увеличивают размер шрифта текста, заключенного между ними.

Добавьте в начало и конец вышеуказанного фрагмента кода соответственно тэги <big> и </big> так, чтобы элемент принял следующий вид:

<big><b><i> Здесь Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших успехах и достижениях </i></b></big>

С помощью тэгов <small></small> вы можете уменьшить размер шрифта текста по сравнению с исходным.

Другой способ указания размера шрифта - с помощью тэгов <font></font> с атрибутом size. В качестве значений этого атрибута используются целые числа от 1 до 7. Причем значение 1 соответствует минимальному размеру шрифта, а значение 7 - максимальному.

В качестве значения атрибута size можно также использовать числа от 1 до 7 со знаком + (плюс) или - (минус). В этом случае размер шрифта соответственно увеличивается или уменьшается, по сравнению с исходным, например, тэги <font size=+1></font> увеличат размер шрифта, по сравнению с текущим, на один порядок.

В тэгах <font></font> может использоваться также атрибут color для указания цвета шрифта, ограниченного тэгами текста. Значения этого атрибута такие же, как и для рассмотренных ранее атрибутов, описывающих цвет фона и текста документа.

По умолчанию абзац с текстом Здесь Вы узнаете... выровнен влево. Центрируем его по горизонтали с помощью тэгов <center></center>. Вы можете также выровнять абзац по правому краю страницы с помощью тэгов <right></right> или по левому - с помощью тэгов <left></left>.

Вставьте тэги <center></center>, ограничив ими указанный абзац так, чтобы код HTML принял следующий вид:

<html>

<head>

<title>Лицей № 1548</title>

</head>

<h1 align=center>Добро пожаловать на страничку лицея № 1548!</h1>

<center><font size=5><b><i>Здесь Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших успехах и достижениях</i></b></font><center>

</body>

</html>

В окне браузера документ будет выглядеть примерно так, как это показано на рис. 1.

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

<dfn></dfn> - применяется для определения слова. Текст обычно выводится курсивом.

<em></em> - для выделения слов и усиления. Отображается курсивом.

<cite></cite> - для выделения названий книг, фильмов, спектаклей и т.д. Выводится курсивом.

<code></code> - для фрагментов кода программ. Показывается на экране шрифтом фиксированной ширины.

<kbd></kbd> - используется для текста, который пользователь вводит с клавиатуры. В разных браузерах может отображаться разными шрифтами.

<samp></samp> - служит для отображения сообщений программ. Выводится шрифтом фиксированной ширины.

<strong></strong> - для особо важных фрагментов. Обычно выделяется полужирным начертанием.

<var></var> - используется для указания, что часть текста или слово является символьной переменной, т.е. текстом, который может быть заменен различными выражениями. Отображается курсивом.

2.2. Вставка иллюстраций

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

Графические изображения, которые вы вставляете в свои Web-документы, должны быть созданы в таком графическом формате, который поддерживается браузером. Стандартные форматы Web-графики - GIF, JPG и PNG. Размеры их файлов минимальны по сравнению с другими форматами, что значительно сокращает время загрузки из сети.

Вставим на первую страницу нашего сайта рисунок МИР.JPG, который обычно находится в папке Windows, т.е. той папке, в которой установлена операционная система Windows. Прежде всего, этот файл следует скопировать в папку Web, которую мы создали для хранения файлов сайта.

Скопируйте файл МИР.JPG или любой другой файл с расширением .JPG или .GIF из папки Windows в папку Web.

Для вставки изображения в Web-документ используется одиночный тэг <img> с атрибутом src, значение которого соответствует имени вставляемого файла или его адресу в Интернете. С помощью необязательного атрибута <border> можно включить отображение рамки вокруг рисунка. Значение 1 для этого атрибута создаст рамку толщиной 1 пиксел. Таким образом, тэг, вставляющий рисунок, должен выглядеть следующим образом:

Вставим его после заголовка Добро пожаловать на страничку лицея № 1548!

Операционная система Windows не различает регистр букв в названиях имен файлов, но операционные системы семейства Unix различают его, поэтому следует тщательно следить за тем, чтобы имя файла в тэге указывалось с соблюдением регистра. Начинающие Web-дизайнеры часто недоумевают: почему рисунок был виден на странице при тестировании на локальном компьютере и не появляется при загрузке страниц с удаленного сервера. А все дело в том, что они указали Мир.jpg, а на диске хранится МИР.JPG.

Вставьте пустую строку после элемента <h1 align=center>Добро пожаловать на страничку лицея № 1548!</h1> и введите в ней тэг <img src=МИР.JPG border=1> для включения изображения в документ.

Чтобы выровнять рисунок по центру, следует, воспользовавшись тэгами <center></center>, записать строку кода HTML, вставляющего рисунок, следующим образом:

Ограничим размер рисунка по ширине 300 пикселами, а по высоте – 400 пикселами:

В результате текстовый файл должен выглядеть так, как это показано на рис. 2. В окне браузера документ будет выглядеть примерно как на рис. 3.

2.3. Создание списков

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

Создайте структуру Web-документа, напечатав основные тэги:

<html>

<head>

</head>

<body>

</body>

</html>

В качестве заголовка документа в тэге <title></title> введите: Чем мы занимаемся?:

<title>Чем мы занимаемся?</title>

Такой же заголовок для списка введите в теле документа между тэгами <body> и </body>, использовав для его отображения тэги <h2></h2> с атрибутом align=center, выравнивающим заголовок по центру страницы:

<h2 align=center>Чем мы занимаемся?</h2>

Самостоятельно подберите цвет фона страницы и цвет текста, указав соответствующие значения для атрибутов bgcolor и text в открывающемся тэге <body>, например, так:

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

Теперь вставим на страницу ненумерованный список с информацией о сфере деятельности нашего лицея. Ненумерованные списки создаются с помощью пары тэгов <ul></ul>, которые ограничивают список.

Между ними располагается столько элементов, начинающихся с тэга <li>, сколько элементов в списке.

Вставьте пустую строку под строкой с кодом <h2 align=center>Чем мы занимаемся?</h2> и введите в теле документа следующий код:

<ul>

<li>Изучением фундаментальных курсов физико-математических дисциплин.

<li>Изучением курсов дисциплин, составляющих основу современной теоретической и прикладной экономики.

<li>Изучением цикла гуманитарных дисциплин.

<li>Изучением сценического искусства.

</ul>

Обратите внимание: тэг <li> может использоваться как одиночный, т.е. без парного, закрывающего тэга </li>.

Полный HTML-код документа должен иметь следующий вид:

<html>

<head>

<title>Чем мы занимаемся?</title>

</head>

<h2 align=center>Чем мы занимаемся?</h2>

<ul>

<li>Изучением фундаментальных курсов физико-математических дисциплин.

<li>Изучение курсов дисциплин, составляющих основу современной теоретической и прикладной экономики.

<li>Изучением цикла гуманитарных дисциплин.

<li>Изучением сценического искусства.

</ul>

</body>

</html>

Когда ввод кода будет закончен, сохраните документ в папке Web под именем spisok.html.

Воспользовавшись командой Открыть меню Файл в браузере Internet Explorer или командой Открыть страницу меню Файл в браузере Netscape Communicator, откройте файл spisok.html из папки Web.

На экране (рис. 4) Вы увидите, что каждый элемент ненумерованного списка выделяется специальным маркером.

В нумерованном списке каждый элемент будет отмечаться его порядковым номером. Для создания нумерованных списков используются тэги <оl></оl>, между которыми помещаются элементы <li>.

2.4. Создание форм

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

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

Посмотрим, как вставить в Web-документ простую форму, которая позволит пользователю напечатать свое сообщение прямо на Web-странице и автоматически отправить его по электронной почте лицею. Но сначала вставим в HTML-документ spisok.html текст с приглашением заполнить форму, поместив его под списком. Текст приглашения следует выделить в отдельный абзац, ограничив его парой тэгов <р></р>, и выровнять по центру с помощью атрибута align=center.

Вставьте пустую строку между закрывающим тэгом </ul> и закрывающим тэгом </body> и введите в этой строке следующий код:

<р align=center>Ecли у Вас есть вопросы или предложения, напишите нам:</р>

Каждая форма начинается тэгом <form> и заканчивается тэгом </form>. HTML-документ может содержать в себе несколько форм, однако они не должны находиться одна внутри другой. Текст и тэги могут размещаться внутри формы без ограничений. Открывающий тэг <form> должен содержать обязательный атрибут action, который определяет, где находится программа-обработчик, или адрес сервера, который будет обрабатывать форму. Так как сообщение, написанное посетителем сайта, будет отправляться по электронной почте, то значение этого атрибута должно содержать адрес E-mail владельца сайта, например: action="mailto: licey1548.narod.ru".

Еще один атрибут тэга <form> - method - определяет, каким образом или с помощью какого протокола данные из формы будут переданы программе-обработчику. Так как будет использована электронная почта, то значение этого атрибута должно быть post:method=post. Таким образом, элемент <form>...</form> будет иметь примерно такой вид:

Добавьте в документе spisok.html пустую строку перед закрывающим тэгом </body> и введите указанный код.

Теперь нам нужно поместить в форме многострочное текстовое поле для ввода сообщения. Для этого служат тэги <textarea></textarea>. В качестве атрибутов открывающего тэга <textarea> необходимо указать количество строк (rows) и колонок (cols), a также имя (name), под которым содержимое текстового поля ввода будет передано программе-обработчику, например:

Такой элемент создаст текстовое поле ввода высотой 5 строк и шириной 40 символов. Введенный посетителем сайта текст будет передан обработчику под именем Comments (Комментарии). Чтобы центрировать текстовое поле относительно краев страницы, следует ограничить его тэгами <center></center>.

Вставьте пустую строку перед закрывающим тэгом </form> и введите следующий элемент, создающий текстовое поле:

Здесь для центрирования текстового поля мы использовали тэги <center></center>, a не атрибут align=center тэга <р>, так как данный атрибут предназначен преимущественно для выравнивания текстовых фрагментов, и некоторые браузеры, например, Netscape Communicator, могут игнорировать данный атрибут для поля формы.

Чтобы запустить процесс передачи данных из формы обработчику, нужен какой-то элемент управления, например, кнопка. Создать такой элемент управления очень легко с помощью одиночного тэга <input> с атрибутом type. Если нужно создать кнопку, то значение этого атрибута должно быть submit (передать):

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

Вставьте пустую строку перед закрывающим тэгом </form> и введите в ней следующий код, создающий кнопку в новом абзаце и выравнивающий ее по центру страницы:

В результате элемент <form>...</form> должен принять следующий вид:

Напомним еще раз, что в качестве значения атрибута action, в открывающем тэге <form> следует указать ваш адрес электронной почты.

2.5. Вставка гипертекстовых ссылок

Аббревиатура HTML означает «Язык разметки гипертекста». Что же такое гипертекст?

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

Для задания перехода по гиперссылке в языке HTML используются тэги <а></а> с атрибутом href, значением которого является адрес перехода. В качестве адреса может использоваться имя файла другого документа или URL-адрес.

Каждый компьютер, подключенный к Интернету, имеет свой уникальный адрес, который может быть представлен или в числовом виде, например, 204.146.46.133, или определенным сочетанием символов, например, www.microsoft.com. Поскольку каждый компьютер имеет свою уникальную структуру каталогов и файлов, то и каждая страница Web также имеет уникальный адрес, называемый URL (Uniform Resource Locator — Унифицированный указатель ресурсов). Как видно из названия, URL может указывать не только на страницы Web, но также и на другие ресурсы Интернета, например, FTP (File Transfer Protocol - Протокол передачи файлов) - хранилища файлов. В самом общем виде URL включает в себя указатель на протокол, который применяется для доступа к ресурсу - http, ftp и др. — и символьный адрес компьютера в сочетании с именем конкретного файла в структуре каталогов этого компьютера. Например, URL-адрес http://www.chat.ru/user/faq.html состоит из указателя на протокол http, который применяется для доступа к Web, имени компьютера www.chat.ru и имени файла-документа faq.html, который находится в каталоге user.

Из сказанного следует, что каждой Web-странице соответствует свой HTML-файл. Однако вы можете заметить, что во многих URL-адресах отсутствует имя файла, например, http://www.microsoft.com. Тем не менее, в окне браузера все же появляется конкретная страница. Дело в том, что администраторы Web-серверов могут указать на своих узлах некоторые HTML-файлы, которые выводятся по умолчанию, если имя файла в URL явно не задано. Обычно эти файлы имеют имена index.html или index.htm.

Посмотрим, как создать переход по ссылке с конца текущего документа spisok.html на первую страницу нашего сайта, т.е. к файлу licey1548.html. Чтобы сообщить посетителю сайта о возможности вернуться к первой странице, необходимо предусмотреть между открывающим <а> и закрывающим </а> тэгами соответствующий текст, например:

<а href="licey1548.html">Ha первую страницу</а>

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

Чтобы ссылка На первую страницу была центрирована, следует ограничить элемент <а>...</а> тэгами <center> и </center>.

Вставьте в файле spisok.html пустую строку перед закрывающим тэгом </body> и введите в ней следующий код:

<center><a href="licey1548.html">Ha первую страницу</а></сеnter>

Теперь создадим гиперссылку для перехода с первой страницы – licey1548.html - на вторую - spisok.html. Для ссылки логичней всего будет использовать текстовый фрагмент о нашей деятельности, так как список на второй странице раскрывает содержание именно этого фрагмента текста. Поэтому нам нужно в файле licey1548.html поместить открывающий тэг <а> с атрибутом href="spisok.html" перед фрагментом текста о нашей деятельности, а закрывающий тэг </а> - после него.

Для этого:

Откройте в программе Блокнот файл licey1548.html.

Отредактируйте этот файл, вставив тэг <а href="spisok.html"> перед текстом о нашей деятельности, а закрывающий тэг </а> - после него. Код HTML в файле licey1548.html должен принять следующий вид:

<html>

<head>

<title>Лицей № 1548</title>

</head>

<h1 align=center>Добро пожаловать на страничку лицея № 1548!</h1>

<p style="font-weight: bold; font-style: italic; font-size: 150%; text-align: сеnter">Здесь Вы узнаете <а href="spisok.html">о нашей деятельности</a>, о наших интересах и увлечениях, о наших успехах и достижениях</р>

</body>

</html>

Очень вероятно, что когда вы просмотрите результат в браузере, вы обнаружите, что ссылка о нашей деятельности видна очень плохо или вообще не видна. Это связано с тем, что цвет, которым браузер отображает непросмотренные ссылки, совпадает с цветом фона вашего документа. В таком случае цвет ссылок следует изменить, воспользовавшись атрибутами link и vlink тэга <body>. Атрибут link определяет цвет непросмотренной ссылки, а vlink - просмотренной. Еще один атрибут - alink определяет цвет ссылки в момент, когда на ней установлен указатель мыши и нажата левая кнопка.

Если вы устанавливаете какой-либо из атрибутов: bgcolor, text, link, vlink, alink - то устанавливайте их все. Иначе, например, установленный вами фоновый цвет может совпасть с цветом текста, установленным пользователем в браузере.

Установим для непросмотренной ссылки белый цвет (white), для просмотренной - светло-зеленый (lime), а для ссылки в момент щелчка мышью - красный (red), добавив в тэг <body> атрибуты link=white, vlink=lime, alink=red так, чтобы этот тэг имел следующий вид:

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

Для создания такой ссылки достаточно в файле licey1548.html вставить открывающий тэг <а href="spisok.html"> перед тэгом <img src=МИР.JPG border=1> и закрывающий тэг </а> после него.

Отредактируйте файл licey1548.html так, чтобы окончательный HTML-код документа имел следующий вид:

<html>

<head>

<title>Лицей № 1548</title>

</head>

<h1 align=center>Добро пожаловать на страничку лицея № 1548!</h1>

</body>

</html>

Создавая ссылки на страницы нашего сайта, мы использовали в качестве адреса имя файла. При таком указании адреса браузер всегда ищет файл в текущем каталоге. Если бы нужный файл - spisok.html - находился, предположим, в подкаталоге Doc текущего каталога, то в адресе необходимо было бы указать путь к нему от текущего каталога: <а href="Doc\spisok.html">. Такая ссылка, в которой адрес указывается относительно текущего каталога на том же компьютере, называется относительной.

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

2.6. Создание таблиц

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

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

Создайте новый текстовый файл, выбрав в меню Файл программы Блокнот команду Создать.

Введите основные тэги, создающие структуру документа. В заголовке документа укажите Меню. Цвет фона и текста документа самостоятельно выберите такими, чтобы ссылки были хорошо видны:

<html>

<head>

</head>

</body>

</html>

Каждая таблица начинается тэгом <table> и заканчивается тэгом </table>. Строки таблицы образуются парой тэгов <tr></tr>, между которыми располагаются пары тэгов <td></td>. Каждая пара этих тэгов образует один столбец. Между открывающим <td> и закрывающим </td> тэгами помещается текст или любое другое содержимое ячейки.

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

<table>

<tr><td>Главная страница</td></tr>

<tr><td>Чем мы занимаемся?</td></tr>

<tr><td>О нашем лицее</td></tr>

<tr><td>Новости</td></tr>

<tr><td>Учебный процесс</td></tr>

<tr><td>Связь с лицеем</td></tr>

</table>

Вставьте пустую строку между открывающим <body> и закрывающим </body> тэгами и, начиная с нее, введите указанный код.

Созданная нами таблица располагается у левого края экрана. Это положение можно изменить, использовав в открывающем тэге <table> атрибут align=center для выравнивания таблицы по центру или атрибут align=right - для выравнивания по правому краю окна браузера. Пункты меню расположены один под другим, а края таблицы и ячеек не видны. Это связано с тем, что по умолчанию рамка и ячейки таблицы не показываются. Чтобы включить их отображение, следует использовать в тэге <table> атрибут border, указав в качестве его значения толщину рамки в пикселах.

Добавьте в тэг <table> атрибут border=1, чтобы показать рамку и ячейки таблицы толщиной 1 пиксел:

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

Установите для таблицы ширину 140 пикселов, добавив атрибут width=140 в открывающий тэг <table> так, чтобы он принял вид:

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

При использовании для формирования столбцов таблицы тэгов <td></td> данные в ячейках представляются шрифтом нормального текста и по умолчанию выравниваются по левому краю ячеек. Если же требуется выделить данные в ячейках, например, заголовки столбцов или строк таблицы, то вместо тэгов <td></td> удобно использовать тэги <th></th>. Текст в элементах <th></th> обычно выделяется полужирным начертанием и выравнивается по центру ячеек.

Наше меню будет выглядеть лучше, если его пункты будут центрированы в ячейках и выделены полужирным шрифтом. Поэтому заменим в HTML-коде элементы <td></td> элементами <th></th>.

Отредактируйте файл menu.html, заменив тэги <td> и </td> соответственно тэгами <th> и </th>. Код HTML должен принять следующий вид:

<html>

<head>

</head>

<table>

<tr><th>Главная страница</th></tr>

<tr><th>Чем мы занимаемся?</th></tr>

<tr><th>О нашем лицее</th></tr>

<tr><th>Новости</th></tr>

<tr><th>Учебный процесс</th></tr>

<tr><th>Связь с лицеем</th></tr>

</table>

</body>

</html>

В тэгах <td> и <th> вы можете использовать следующие атрибуты:

align - для горизонтального выравнивания содержимого ячеек по центру (center), левому (left) и правому (right) краям ячейки;

width - для указания ширины ячейки в пикселах;

height - для определения высоты ячейки;

valign - для вертикального выравнивания данных в ячейке по верхнему (top) и нижнему (bottom) краям и середине (middle) ячейки; по умолчанию valign=middle.

Вы можете также изменить цвет любой ячейки, столбца, строки или всей таблицы, вставив атрибут bgcolor соответственно в тэг <th>, <tr> или <table>.

Нам осталось теперь создать ссылки двух первых пунктов меню на соответствующие страницы нашего сайта. Так как остальные страницы еще не созданы, то ограничимся этими двумя ссылками. Как и прежде, воспользуемся тэгами <а></а> с атрибутом href. В качестве значения этого атрибута для первого пункта меню - Главная страница - следует указать файл licey1548.html, т.е. href="licey1548.html", а для второго - Чем мы занимаемся? - файл spisok.html т.е. href="spisok.html".

Обычно при переходе по ссылке новый документ отображается в том же окне, что и исходный, в котором была ссылка. Чтобы отобразить его в другом окне, необходимо в открывающем тэге <а> использовать атрибут target, параметром которого должно быть имя того окна, в которое будет загружен документ. Укажем это имя как значение атрибута target в ссылке: target="frame". Web-страница будет загружаться в то же окно браузера, в котором находится ссылка, а атрибут target позволит загружать документ в другое окно.

Отредактируйте в файле menu.html строки кода, содержащие названия пунктов меню Главная страница и Чем мы занимаемся?, вставив вышеуказанные ссылки соответственно на файлы licey1548.html и spisok.html так, чтобы эти строки приняли следующий вид:

<tr><th><a href="licey1548.html" target="frame">Главная страница</а></th></tr>

<tr><th><a href="spisok.html" target="frame">Чем мы занимаемся?</а></th></tr>

Окончательный вид файла menu.html с HTML-кодом примет следующий вид:

<html>

<head>

</head>

<body>

<tr><th><a href="licey1548.html" target="frame">Главная страница</а></th></tr>

<tr><th><a href="spisok.html" target="frame">Чем мы занимаемся?</а></th></tr>

<tr><th>О нашем лицее</th></tr>

<tr><th>Новости</th></tr>

<tr><th>Учебный процесс</th></tr>

<tr><th>Связь с лицеем</th></tr>

</table>

</body>

</html>

Сохраните документ в папке Web под именем menu.html, выбрав из меню Файл программы Блокнот команду Сохранить. В браузере этот файл будет выглядеть так, как это представлено на рис. 5.

2.7. Создание фреймов

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

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

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

Для описания фреймов используется специальный HTML-файл.

В окне программы Блокнот (Notepad) создайте новый файл.

Введите основные тэги, кроме тэгов <body></body>, которые в файле, описывающем фреймы, не используются. В тэгах <title></title> заголовка укажите – Лицей № 1548:

<head>

<title>Лицей № 1548</title>

</head>

</html>

Вместо тэгов <body></body> в файле, описывающем фреймы, используется пара тэгов <frameset></frameset> с атрибутами rows или cols, определяющими, как делится экран - по горизонтали или по вертикали. В качестве значений этих атрибутов можно использовать числовое значение высоты или ширины фрейма в пикселах или в процентах от 1% до 100%. Например, если вы хотите разделить окно браузера по горизонтали на два равных по размеру фрейма, то код HTML должен быть таким:

Обратите внимание: значения атрибутов отделяются один от другого запятой.

Чтобы разделить окно браузера по вертикали на два фрейма шириной 200 и 600 пикселов, следует написать:

Однако фактическая ширина и высота окна фрейма зависит от текущего разрешения монитора. Поэтому, если у пользователя установлено разрешение, например, 1024х768 пикселов, т.е. ширина экрана - 1024 пиксела, то часть экрана может остаться незаполненной. В связи с этим рекомендуется задавать размеры фреймов в процентах так, чтобы их сумма была равна 100%. Если все же необходимо для одного из окон указать фиксированный размер в пикселах, то размер другого окна можно не указывать, заменив его значение символом *. В этом случае браузер сам подберет нужный размер для второго окна.

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

В окне программы Блокнот (Notepad) вставьте пустую строку после закрывающего тэга </head> и введите следующий код:

</frameset>

Таким образом, мы указали, что окно браузера должно быть разделено по вертикали на два фрейма. Для описания каждого фрейма в отдельности используются одиночные тэги <frame>, которые должны находиться внутри элемента <frameset>...</frameset>. Обязательным атрибутом тэга <frame> является src, значение его - адрес документа, который должен находиться в данном фрейме. Так как в первом фрейме будет находиться файл menu.html, то данный тэг следует записать так:

Вставьте в окне программы Блокнот (Notepad) пустую строку после открывающего тэга <frameset> и введите указанный тэг.

Во второй фрейм должен загружаться файл licey1548.html, поэтому второй тэг <frame> будет таким:

Чтобы во второй фрейм могли загружаться также и все остальные страницы сайта - spisok.html и другие, которые, возможно, будут созданы, - необходимо с помощью атрибута name присвоить данному фрейму имя, которое, будучи указано в ссылках любого документа в качестве значения атрибута target, определит, в какой именно фрейм следует загрузить документ. Напомним, что в общем случае, при переходе по ссылке новый документ открывается в том же окне. Именно для того, чтобы при переходе по ссылкам нашего меню страницы открывались не в первом фрейме, в котором расположено меню, а во втором, мы использовали в предыдущем вопросе в ссылках меню атрибут target со значением "frame": target="frame", где "frame" -это имя второго фрейма. И теперь имя "frame" следует присвоить второму фрейму, в котором должен открываться файл licey1548.html. Поэтому второй тэг <frame> в окончательном виде должен быть записан так:

Введите этот код, вставив пустую строку перед закрывающим тэгом </frameset>.

Сохраните файл в папке Web под именем index.html.

Имя index.html должно обязательно присваиваться файлу с главной страницей каждого сайта. Именно этот файл открывается по умолчанию при обращении к Web-узлу, если не указано другое имя файла. На некоторых сайтах имя главной страницы может быть index.htm, a index.html отображается не как страница, а как папка с именами файлов. Это надо уточнять у администратора узла.

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

<head>

<title>Лицей № 1548</title>

</head>

</frameset>

</html>

Вид файла index.html в браузере показан на рис. 6.

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

2.8. Анимация на Web-страницах

Для пользователей Интернета уже давно стали привычными появляющиеся почти на каждой Web-странице «живые» мультипликационные картинки. Это и понятно: анимация привлекает внимание гораздо сильнее, чем статические картинки, и, кроме того, на небольшой площади можно поместить значительно больше информации за счет чередующихся кадров.

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

В настоящее время существует несколько технологий создания анимации для WWW: анимационный (animated) GIF, Flash, Java и JavaScript.

Из этих технологий анимационный GIF является, пожалуй, самым простым в создании, и практически любой современный браузер может его показать. Формат GIF позволяет размещать в одном файле несколько кадров или фреймов (frames) с изображениями для их последовательного вывода на экран. В отличие от обычного фильма, где длительность анимации определяется скоростью воспроизведения, для каждого кадра GIF-анимации может быть задана длительность его показа на экране, а для всей анимации может быть указано количество повторений. Кроме того, в отличие от обычного фильма, изображения, содержащиеся в кадрах GIF-анимации, не обязательно должны быть одного размера. Для изображения каждого кадра или слоя анимации вы можете установить индивидуальный размер и расположить его по своему усмотрению, независимо от других слоев. Анимационные GIF-файлы могут быть легко подготовлены в программе Adobe ImageReady. Увидеть анимацию такого типа можно, например, на сайте по адресу http://ani.newmail.ru/gallery.

Готовые бесплатные анимационные картинки для использования на своих Web-страницах вы можете найти, например, по адресам:

www.webman.ru/animation/main.htm

http://shpak.narod.ru/collection1.htm

http://www.animation-central.com

http://www.animationlibrary.com

http://www.animationcity.net

В отличие от GIF-анимации, которая позволяет размещать в файле только изображения, Flash-технология предоставляет возможность объединить в одном формате анимацию, звук, текст, графику и, кроме того, элементы интерактивности, которые дают возможность пользователю или посетителю сайта определенным образом изменять данные на Web-странице, превращая его из наблюдателя в активного участника. Интерактивными элементами сайта могут быть игры, например, карточные, рулетка, тир, крестики-нолики, «морской бой»; онлайновые обучающие программы, викторины, тесты, калькуляторы и т.п. Примеры такой анимации вы увидите на сайтах www.legus.ru/, www.flasher.ru/, www.avestadesign.ru/. Создается подобная анимация с помощью программы Macromedia Flash. К сожалению, для просмотра Flash-анимации вам, скорее всего, придется установить дополнительный подключаемый модуль (Plug-in) для вашего браузера. Именно по этой причине не имеет смысла создавать сайты, которые предназначены для широкого круга лиц. Так как многие люди просто не смогут увидеть Flash-анимацию, а установить дополнительный подключаемый модуль не захотят или просто не смогут.

Еще один способ создания анимации - посредством программирования на языках Java и JavaScript. Эти языки позволяют разрабатывать программы, встроенные в документы HTML и называемые апплетами, которые выполняются браузерами на компьютерах пользователей. И, конечно же, возможности Java и JavaScript значительно шире, чем подготовка анимационных картинок. Он позволяет создавать масштабные Интернет-приложения. Примеры Java-апплетов можно увидеть на сайтах http://reality.sgi.com/, www.bulletproof.com/. Создание анимации с помощью Java и JavaScript, также нельзя назвать подходящим для серьезных сайтов, так как пользователи очень часто отключают поддержку Java и JavaScript в своих браузерах по соображениям безопасности. Так как с помощью программ на указанных языках, можно скопировать или испортить файлы на вашем компьютере.

Учитывая все вышесказанное, можно сказать, что самый простой, надежный и эффективный способ разместить анимацию на своих Web-страницах - это использование формата GIF.

Контрольные вопросы

1. Что такое Web-узел и Web-страница?

2. Что представляет собой язык HTML?

3. Что значит тэг? Какие бывают тэги? Порядок записи элементов тэгов.

4. Какие обязательные элементы входят в структуру HTML-документа?

5. Как определить цвет фона и цвет текста Web-страницы?

6. Как определить уровень заголовков Web-страницы средствами языка HTML?

7. Как отцентрировать текст заголовка?

8. Как увеличить (уменьшить) размер текста, оформить текст полужирным, курсивным, подчеркнутым начертанием?

9. Какие существуют стандартные форматы Web-графики?

10. Как вставить рисунок в Web-документ в GIF-формате?

11. Как создать маркированный (нумерованный) список на Web-cтранице?

12. Как вставить в Web-документ простую форму?

13. Что такое гипертекст, гиперссылка? Какие тэги используются для задания перехода по гиперссылке в языке HTML?

14. Какие атрибуты используются для изменения цвета гиперссылок?

15. Как создать таблицу на Web-странице?

16. Какие атрибуты используются для горизонтального и вертикального выравнивания ячеек в таблице, для определения высоты и ширины ячеек, их цвета?

17. Что такое фрейм? Какие тэги используются для описания фреймов. Перечислите рекомендации по созданию фреймов.

18. Какое имя должно обязательно присваиваться файлу с главной страницей каждого сайта?

19. Что такое анимация?

20. Какие в настоящее время существуют технологии создания анимации для WWW? Кратко перечислите их достоинства и недостатки.

Тема № 2

РАЗМЕЩЕНИЕ WEB-СТРАНИЦ В ИНТЕРНЕТЕ

Вопросы: 1. Общие сведения о размещении Web-страниц в Интернете.

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

3. Регистрация в поисковых системах и каталогах.

1. Общие сведения о размещении Web-страниц в Интернете

Поместить свой сайт в Интернете очень просто. Для этого достаточно скопировать файлы, из которых он состоит, на один из серверов WWW. Созданный нами сайт пока находится в папке Web одного из дисков вашего компьютера и содержит четыре HTML-файла - index.html, licey1548.html, spisok.html, menu.html, а также рисунок МИР.JPG. Все эти файлы, включая файл с рисунком, мы и должны поместить на сервер WWW. Если вы забудете скопировать какой-либо файл или рисунок, на который есть ссылка на одной из Web-страниц, то, естественно, браузер посетителя не сможет их найти и отобразить.

Для передачи файлов на сервер WWW существует несколько возможностей. Вы можете использовать специальные программы, например, Издатель Web (Web Publishing Wizard), Netscape Composer или интерфейс загрузки - файловый менеджер сервера бесплатной службы, на котором собираетесь поместить сайт. Для передачи файлов все эти варианты используют протокол HTTP - HyperText Transfer Protocol (Протокол передачи гипертекста), который обеспечивает возможность обмена информацией между передающей программой и Web-сервером. Всемирная паутина WWW объединяет десятки, а может быть, и сотни миллионов компьютеров самых разных типов, не обязательно совместимых между собой, использующих разные операционные системы и разные коммуникационные программы. Чтобы каждый из компьютеров сети мог связаться с другим, применяется единый набор правил и стандартов, который называется протоколом.

Еще один вариант передачи файлов использует доступ по протоколу FTP - File Transfer Protocol (Протокол передачи файлов). Основное назначение этого протокола - пересылать файлы в Интернете с одного компьютера на другой. Кроме того, с помощью протокола FTP можно работать с файлами на удаленном компьютере: копировать, перемещать, удалять, создавать каталоги. Чтобы воспользоваться протоколом FTP, понадобится специальная программа, так называемый FTP-клиент. FTP-клиентом может служить, например, программа управления файлами FAR, программа CuteFTP и другие. Следует иметь в виду, что способ передачи файлов на сервер определяет владелец сервера.

Где же можно поместить ваш сайт? Возможны два варианта: либо на сервере своего провайдера, либо на сервере одной из бесплатных служб.

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

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

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

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

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

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

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

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

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

www.mysiteinc.com - 2 Мб, быстрый сервер.

http://www.tripod.lycos.com/build/ - 11 Мб, быстрый сервер, FTP-доступ, можно через браузер, гостевая книга, адрес: members.tripod.com/Ваше_имя.

www.xoom.com - неограниченное дисковое пространство, быстрый сервер, FTP-доступ, адрес: members.xoom.com/Ваше_имя.

www.virtualave.net - 20 Мб, доступ к CGI, адрес: Bame_имя.virtualave.net. Недостаток - появляющееся дополнительное окно с рекламой.

www.fortunecity.com - 10 Мб, гостевая книга, счетчик, форум. Длинный адрес. Недостаток - рекламный фрейм в верхней части страницы. Если в адресе написать вместо .сот/- .com//, реклама не появится.

www.hypermart.net - 10 Мб, быстрый сервер, FTP-доступ, есть доступ к CGI. Недостаток - рекламное окно.

www.geocities.com - 11 Мб, FTP-доступ, гостевая книга. Недостатки - очень медленный сервер, длинный адрес, всплывающее окно, логотип внизу странички.

Российские бесплатные службы.

www.chat.ru - 3 Мб, почтовый ящик, доступ с помощью файлового менеджера и FTP, адрес вида www.chat.ru/~Baше_имя.

www.narod.ru - неограниченное пространство, почтовый ящик, доступ с помощью файлового менеджера и FTP, гостевая книга, чат, форум, адрес: Ваше_имя.narоd.ru.

www.null.ru - 1 Мб с возможность увеличения до 2 Мб, быстрый сервер, доступ по WWW и FTP, адрес www.null.ru/pages/Ваше_имя.

www.newmail.ru - 16 Мб, почтовый ящик с 3 адресами, 3 адреса сайта, FTP-доступ.

2. Создание адреса вашего сайта в Интернете и размещение

Web-страниц с помощью менеджера файлов бесплатной службы

Если вы решили поместить сайт на сервере своего провайдера, то вам следует получить у него информацию, необходимую для доступа:

• выделенный вам адрес URL. Возможно, провайдер даст вам возможность самому выбрать адрес;

• логин или имя для доступа;

• пароль для доступа.

Кроме того, вам необходимо выяснить, по какому протоколу осуществляется доступ к серверу: HTTP или FTP.

Следующее, что нужно сделать - это зарегистрироваться в бесплатной службе. Процедура регистрации очень простая. Рассмотрим кратко для примера, как зарегистрироваться на сервере www.narod.ru.

Установите соединение с Интернетом и загрузите начальную страницу сайта www.narod.ru (рис. 7), указав этот адрес в адресной строке браузера.

В левом верхнем углу страницы есть ссылка Регистрация. Щелкните на ней мышью. На экране появится форма (рис. 8), которую следует заполнить.

В форме вы должны указать выбранное вами имя для вашего сайта, логин и пароль для доступа, а также персональные данные: фамилию, имя, адрес, E-mail и др.

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

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

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

Когда регистрация будет закончена, прервите связь с Интернетом.

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

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

Установите связь с Интернетом и загрузите главную страницу www.narod.ru.

В правой части этой страницы в группе элементов управления Вход введите в соответствующих полях ввода ваши Логин и Пароль.

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

Нажмите кнопку Войти. На экране появится страница Мастерская (рис. 9).

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

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

Перейдите в папку Web, в которой вы сохранили файлы сайта, и щелчком мыши выберите файл index.html.

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

Выберите остальные файлы сайта – licey1548.html, spisok.html, menu.html, МИР.JPG - нажимая поочередно каждую следующую кнопку Обзор… .

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

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

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

Несмотря на то, что стандартной кодировкой русскоязычного текста для Web-страниц является кодировка Win1251, некоторые бесплатные службы используют на своих серверах другие кодировки. По данным статистики русскоязычная часть Интернета использует на 95% кодировку Win1251 и на 5% - кодировку КОИ-8. Так, например, на сервере www.chat.ru используется кодировка КОИ-8. Это, однако, не создает для пользователей никаких препятствий или проблем, если загрузка выполняется с помощью файлового менеджера. При пересылке ваших Web-страниц на этот сервер менеджер файлов службы спросит у вас, в какой кодировке составлены документы. Если вы использовали текстовый редактор в Windows, то кодировка документа Win1251, если в DOS, то кодировка DOS, если в Unix, то кодировка КОИ-8, если в Macintosh, то кодировка Мас. На основании вашего ответа файловый менеджер автоматически перекодирует ваши страницы в КОИ-8.

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

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

Иногда при загрузке Web-страниц могут возникнуть некоторые проблемы. Если ваша страница, находящаяся на сервере www.narod.ru, не загружается, и в окне браузера появляется примерно такое или похожее сообщение: «Извините, запрошенный Вами документ не найден. Попробуйте начать с главной страницы» или «Невозможно отобразить страницу» (The page cannot be displayed), то это значит, что адрес сайта введен вами неправильно. Проверьте указанный вами адрес. Если же появляется сообщение «Не найден файл index.html или доступ к каталогу запрещен», то это означает, что страница не помещена на сервер или среди посланных вами файлов отсутствует файл index.html. Содержащаяся в этом файле страница всегда выводится как первая.

3. Регистрация в поисковых системах и каталогах

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

Когда вы ищете информацию в Интернете, вы, скорее всего, обращаетесь к поисковым системам, таким как Yandex, Rambler, Altavista, или к Интернет-каталогам, например, Aport, Mail.ru, Yahoo. Поэтому очень важно, чтобы данные о вашем сайте попали в подобные системы, и каждый желающий, который интересуется тематикой вашего сайта, мог его легко обнаружить.

Процесс попадания информации о вашем сайте в каталоги и поисковые системы, иногда называемые поисковыми машинами, состоит из нескольких этапов.

• Вы вводите данные и описание своего сайта на специальной странице Интернет-каталога или поисковой машины.

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

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

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

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

• Яндекс (http://www.yandex.ru)

• Rambler (http://www.rambler.ru)

• Апорт (http://www.aport.ru)

• Altavista (http://www.altavista.com)

Из каталогов наиболее популярными являются следующие:

• Mail.RU (http://www.mail.ru)

• Интернет-столица (http://www.data.ru)

• Yahoo (http://www.yahoo.com)

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

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

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

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

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

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

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

Наберите в адресной строке вашего браузера адрес поисковой системы, например, http://www.yandex.ru. Загрузится главная страница поисковой системы.

Найдите на странице ссылку Добавить сайт, обычно расположенную в нижней части главной страницы системы, и нажмите на нее. В разных системах эта ссылка может называться по разному, например. Добавить ресурс, Добавить URL, Add URL, Submit a site и так далее. После нажатия на ссылку откроется страница добавления сайта в поисковую систему.

Прочитайте правила регистрации в системе и заполните регистрационную форму.

Нажмите кнопку Добавить URL!, и через несколько секунд загрузится страница с сообщением об успешной регистрации.

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

Нажмите кнопку Добавить!, и через несколько секунд появится сообщение о том, что ваш ресурс будет добавлен в каталог после проверки гидом.

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

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

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

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

Услуги бесплатной регистрации предоставляют следующие службы:

• TAU (http://www.design.ru/free/addurl/) - регистрирует сайт во всех основных российских и зарубежных поисковых системах.

• AddMe! (http://www.addme.com/) - регистрирует в 25 зарубежных поисковых машинах

• @Submit! (http://www.uswebsites.com/submit/) - регистрирует в основных зарубежных поисковых системах.

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

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

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

Контрольные вопросы

1. Что следует учитывать, выбирая бесплатную службу по размещению Web-страниц в Интернете?

2. Дайте краткую характеристику серверов, предоставляющих бесплатно место для Web-сайта.

3. Какую рекомендацию следует получить у провайдера для того чтобы поместить сайт на сервере?

4. Как зарегистрироваться на сервере www.narod.ru?

5. Как переслать на сервер www.narod.ru свои файлы?

6. Какие поисковые системы и каталоги вы знаете?

7. Как зарегистрировать свой сайт в поисковой системе Яндекс?

8. Какие службы предоставляют услуги бесплатной регистрации?

Тема № 3

СОЗДАНИЕ WEB-СТРАНИЦ И WEB-САЙТОВ С ПОМОЩЬЮ

MS FRONTPAGE 2002

Вопросы: 1. Общие сведения о создании Web-страниц и Web-сайтов с помощью

программы MS FrontPage 2002.

2. Создание и оформление Web-страниц.

3. Проверка Web-сайта, просмотр его в браузере и размещение на Web-сервере.

1. Общие сведения о создании Web-страниц и Web-сайтов с помощью программы MS FrontPage 2002.

FrontPage 2002 – это интегрированная среда, содержащая редактор web-страниц, модули управления структурой web-сайта и инструментами публикации web-сайта на сервере. FrontPage 2002 позволяет создавать web-страницы web-сайты как самостоятельно, пользуясь имеющимися в программе инструментами и командами меню, так и с помощью мастера.

Чтобы создать web-сайт с помощью мастера необходимо:

1. Запустить FrontPage.

2. Выбрать команду Файл – Создать – Страница или веб-узел. В области приложения откроется окно Создание веб-страниц или узла со списком шаблонов и мастеров, которыми можно воспользоваться для построения веб-узла (рис. 12).

3. В разделе Создание с помощью шаблона выберите команду Шаблоны веб-узлов… и в появившемся диалоговом окне (рис. 13) в поле раздела Параметры введите название папки, в которой будут храниться файлы узла.

4. Выберите значок Мастер корпоративного веб-узла.

5. Щелкните на кнопке ОК.

6. В первом окне мастера щелкните на кнопке Далее.

7. Второе окно предлагает список основных web-страниц, которые можно включить в новый web-узел:

§ Домашняя страница;

§ Что нового;

§ Товары и услуги;

§ Оглавление;

§ Обратная связь;

§ Форма поиска.

8. Выберите нужные Вам страницы и щелкните на кнопке Далее.

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

10. Шесть следующих окон диалога мастера настраивают вид страницы определенного типа (из тех, которые были выбраны во втором окне мастера).

11. Десятое окно мастера задает общее оформление всех страниц.

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

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

FrontPage предлагает шесть режимов просмотра web-узла, кнопки которых имеются на панели режимов (рис. 12):

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

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

· Отчеты – статистическая информация об узле и отдельных его компонентах;

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

· Гиперссылки – список web-страниц узла и схема гиперссылок выделенной страницы Режим просмотра гиперссылок позволяет просматривать дерево гиперссылок и проверять работоспособность внутренних и внешних ссылок узла;

· Задачи – список задач, связанных с определенными файлами, которые нужно не забыть выполнить до завершения разработки узла.

Переключать режимы просмотра можно как с помощью команд меню Вид, так и посредством кнопок панели режимов, расположенной в левой части окна панели FrontPage.

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

В состав FrontPage входит мощный редактор web-страниц. Во многом этот редактор похож на Word. Но формат HTML имеет свои правила построения фалов, вносящие определенную специфику в процесс создания документов.

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

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

Таблица 1

Компоненты FrontPage

Название	Описание
Примечание	Позволяет вводить в web-страницу комментарии. Они будут видны в процессе разработки, но удаленный пользователь их не увидит
Поле подтверждения	Используется для подтверждения введенных данных, например в форме web-страницы
Страница	Позволяет заменить содержимое текущей web-страницы другой web-страницей
Страница по расписанию	Дает возможность включать в web-страницу некоторый файл на строго определенное время. По прошествии заданного интервала времени файл не будет отображаться на странице
Рисунок с расписанием	Позволяет выводить изображение на web-странице в течение заданного интервала времени. По прошествии этого периода изображение появляться не будет
Поиск в Интернете	Добавляет в web-узел процедуру поиска заданного текста
Подстановка	В процессе выполнения этот компонент заменяется значением определенного параметра
Оглавление	Формирует на web-странице оглавление узла, созданного во FrontPage. Это оглавление будет автоматически обновляться при изменении содержимого узла
Дата и время	В процессе работы на место этого компонента будут выводиться дата и время
Счетчик посещений	Форма, производящая подсчет количества посетителей web–узла
Объявление на странице…	Добавляет на каждую страницу web-узла один и тот же баннер
Бегущая строка	Выводит текст в виде бегущей строки, параметры которой можно менять в широких пределах

2. Создание и оформление Web-страниц

2.1. Создание и форматирование текста

Ввод текста на страницу в редакторе FrontPage осуществляется аналогично тому, как это делается в текстовом редакторе, например, в MS Word.

Создайте новую страницу сайта с помощью команды Пустая страница, вызываемой из меню Файл, подменю Создать, командой Страница или веб-узел…. Выберите в меню Файл команду Сохранить. На экране появится стандартный диалог сохранения файлов Сохранить как…. В поле Имя фала введите имя файла страницы index.htm. Нажмите кнопку Сохранить. Диалог Сохранить как закроется, и страница будет сохранена на диске. Данная страница будет называться домашней страницей (рис. 14).

В строке заголовка введите название страницы Лицей № 1548.

В области комментария введите следующий текст:

Добро пожаловать на страничку лицея № 1548!

Здесь Вы узнаете о нашей деятельности, о наших интересах и увлечениях, о наших успехах и достижениях

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

Установите курсор на первой строке введенного текста и в открывающемся списке Стиль на панели инструментов Форматирование выберите Заголовок 2. Строка будет отформатирована данным стилем.

Выбранный стиль применяется целиком к текущему абзацу. В формате HTML абзац выделяется специальными тегами. В редакторе FrontPage ввод абзаца завершается нажатием клавиши Enter.

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

В верхней части диалога расположены списки для выбора названия шрифта (Шрифт), стиля шрифта (Начертание) и размера (Размер), которые имеются во всех стандартных диалогах выбора шрифта. Чуть ниже расположен открывающийся список для выбора цвета шрифта (Цвет) и набор флажков для задания различных эффектов (Видоизменение). В нижней части отображается пример текста с выбранными настройками (Образец). Настройки межсимвольных промежутков и положения в строке используются реже и вынесены на отдельную вкладку Межзнаковый интервал.

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

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

Если вы щелкнете на вкладке HTML-код, то увидите, как выбранные атрибуты текста будут сохранены в виде соответствующих тегов.

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

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

Для создания рамок, цвета и выбора способа заливки фона абзаца используется диалог Границы и заливка, вызываемый командой Формат - Границы и заливка… .

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

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

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

Выберите вкладку Заливка для выбора цвета и способа заливки фона абзаца.

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

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

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

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

Чем мы занимаемся?

Изучением физико-математических дисциплин.

Изучение основ современной теоретической и прикладной экономики.

Изучением цикла гуманитарных дисциплин.

Изучением сценического искусства.

Выделите строки введенного текста - со второй по пятую - и выберите в меню команду Формат – Список…. На экране появится диалог Список.

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

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

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

Чтобы разделить текст на отдельные секции, например, для выделения отдельных тематических фрагментов, на Web-страницах часто используют горизонтальную разделительную линию. Для ее создания установите курсор после слов Чем мы занимаемся? и выберите команду меню Вставка - Горизонтальная линия. На страницу будет вставлена горизонтальная линия.

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

Группа элементов управления Размер позволяет изменить ширину и высоту линии. С помощью переключателя Выравнивание линию можно выровнять по левому краю, по центру или по правому краю. В открывающемся списке Цвет: выберите произвольный цвет для линии и нажмите кнопку ОК. Разделительная линия будет окрашена выбранным цветом.

Чтобы привлечь внимание к фрагменту текста или заголовку, можно придать ему эффект бегущей строки. Придадим эффект бегущей строки набранному на странице тексту Добро пожаловать на страничку лицея № 1548!.

Для этого выделите набранный на странице текст Добро пожаловать на страничку лицея № 1548! и выберите в меню команду Вставка – Веб-компонент… - Бегущая строка. На экране появится диалог Свойства бегущей строки (рис. 15).

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

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

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

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

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

Установить курсор на странице в позицию, начиная с которой будет располагаться вставленный текст. Выбрать команду меню Вставка – Файл…. На экране появится стандартный диалог открытия файла Выбор файла. В открывающемся списке Тип файлов выбрать тип Тестовые файлы (*.txt). Найти и выделить нужный текстовый документ.

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

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

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

2.2. Добавление страницы в макет сайта. Структура навигации и разделяемые границы

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

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

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

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

Описанным выше образом создайте и сохраните в папке сайта еще три страницы - например, для описания учебного процесса в лицее – ucheba.htm, новостей – news.htm и для связи с лицеем – kontakts.htm.

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

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

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

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

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

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

Поместите на схему навигации другие страницы, так чтобы страница kontakts.htm (Контакты) находилась на одном уровне со страницей svedeniya.htm, а страница с описанием учебного процесса ucheba.htm (Учебный процесс) и страница новостей news.htm (Новости) были связана со страницей svedeniya.htm и располагались на втором уровне (рис. 16).

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

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

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

С помощью команды Развернуть все в этом же контекстном меню можно развернуть схему в горизонтальном направлении.

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

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

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

2.3. Применение темы для оформления страниц

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

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

Выберите команду меню Формат – Тема…. На экране появится диалог Темы (рис. 18).

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

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

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

Установите флажки по вашему желанию и нажмите кнопку ОК, чтобы применить выбранную тему к страницам сайта.

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

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

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

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

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

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

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

Нажмите кнопку Графика…. На экране появится диалог Изменение темы. В правой части диалога расположена область просмотра. В ней отображается пример оформления различных графических элементов страницы в зависимости от выбранных настроек темы. Слева расположен открывающийся список Элемент, в котором выбирается графический элемент, и две вкладки, на которых устанавливается рисунок и шрифт для выбранного элемента. Группа переключателей Рисунки темы: определяет использование обычной, более строгой (Обычная графика) или активной, более сложной (Активные рисунки) графики в текущей теме. На вкладке Шрифт можно выбрать название, начертание и размер шрифта, а также установить горизонтальное и вертикальное выравнивание текста для текущего графического элемента. В название шрифта может входить несколько имен шрифтов, разделенных запятой. Если первый шрифт отсутствует на компьютере пользователя, просматривающего страницу, то выбирается второй и т.д. Некоторые элементы, такие, как фоновый рисунок, маркеры и горизонтальная линия, не имеют настроек шрифта.

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

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

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

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

2.4. Вставка иллюстраций, звука и видео

Наряду с текстом иллюстрации (рисунки и фотографии) являются одним из основных элементов оформления Web-страниц. Редактор FrontPage позволяет загружать изображения из файлов различных графических форматов: GIF (обычный и анимированный), JPEG, BMP, TIFF, TGA, RAS, EPS, PCX, PNG, PCD и WMF. Вы можете поместить готовый рисунок на страницу, взяв его из библиотеки картинок программы FrontPage, из папки текущего сайта или одного из сайтов на локальном диске, из любого графического файла на локальном диске или загрузив с внешнего сайта в Интернете.

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

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

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

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

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

Щелкните правой кнопкой мыши на рисунке и в появившемся контекстном меню выберите команду Свойства рисунка…. На экране появится диалог Свойства рисунка.

Выберите вкладку Вид. Группа элементов Обтекание позволяет выбрать расположение рисунка в тексте. Открывающийся список Выравнивание позволяет задать способ выравнивания рисунка на странице и его расположение относительно близлежащего текста. В поле ввода Толщина границы можно задать толщину рамки вокруг изображения. Нулевое значение означает отсутствие рамки.

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

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

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

В программе FrontPage имеется возможность пользоваться библиотекой картинок. Для этого установите курсор в позицию, куда требуется вставить рисунок, и выберите в меню команду Вставка - Рисунок – Картинки…. На экране появится диалог Вставка картинки (рис. 20).

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

Наряду с различными специальными эффектами для «оживления» страниц широко используются мультимедиа-объекты: звук, видео, Flash-анимация и т.п. Звуковой фрагмент можно воспроизводить при нажатии на анимированную кнопку или при наведении на нее указателя мыши. Кроме этого, для каждой страницы сайта можно выбрать фоновый звук или музыку, которая будет воспроизводиться при открытии страницы.

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

В группе элементов управления Фоновый звук нажмите кнопку Обзор и в открывшемся диалоге Фоновый звук выберите файл с музыкальным фрагментом.

Звуковой файл необходимо подготовить заранее. Он может быть записан в одном из основных форматов: Wave Sound (.wav), Midi Sequencer (.mid), Real Media (.ram, .ra), AIFF Sound (.aif, .aifc, .aiff) или AU Sound (.au, .snd). Если вы заранее не поместили файл с музыкой в папку сайта, то его можно найти на диске, щелкнув на кнопке поиска. Для примера можно взять один из системных звуковых файлов в папке \Windows\Media.

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

Поместить видео на страницу сайта так же просто, как и добавить рисунок.

Чтобы поместить на страницу сайта видеоролик, установите курсор в нужную позицию и выберите в меню команду Вставка - Рисунок – Видеозапись…. На экране появится диалог Видео (рис. 22).

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

Если вы заранее поместили файл с видеороликом в папку сайта, выберите его в списке файлов и нажмите кнопку ОК.

Файл, расположенный в другом месте на локальном диске, можно найти, нажав кнопку Открыть.

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

Щелкните правой кнопкой мыши на области вывода видеоизображения и в появившемся контекстном меню выберите команду Свойства рисунка…. На экране появится диалог Свойства рисунка с открытой вкладкой Видео.

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

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

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

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

2.5. Создание таблиц

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

1. Щелкнуть мышью на кнопке Добавить таблицу на панели инструментов Стандартная, затем во вспомогательном окне указать с помощью мыши размерность таблицы.

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

3. Если на странице уже имеются данные, которые нужно отобразить в табличном виде, можно воспользоваться возможностью преобразования текста в таблицу. Для этого нужно выделить текст, выбрать команду Таблица - Преобразовать - Текст в таблицу… и указать тип разделителя в диалоге Преобразование текста в таблицу.

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

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

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

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

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

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

Для настройки параметров таблицы щелкните правой кнопкой мыши на таблице и в появившемся контекстном меню выберите команду Свойства таблицы…. На экране появится диалог Свойства таблицы (рис. 23).

В группе элементов управления Положение диалога Свойства таблицы можно установить выравнивание таблицы на странице (Выравнивание), способ обтекания таблицы текстом (Обтекание), расстояние в пикселях между содержимым ячейки и ее внутренней границей (Поля ячеек), расстояние в пикселях между соседними ячейками таблицы (Интервал ячеек), а также задать ширину и высоту таблицы. В группе элементов Границы: можно указать размер внешней границы таблицы, а также задать цвет границы. Если задать нулевой размер границы, то она станет невидимой. В группе элементов управления Фон определяется цвет фона в области таблицы и фоновый рисунок.

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

Для настройки параметров ячейки таблицы щелкните правой кнопкой мыши на выбранной ячейке и в появившемся контекстном меню выберите команду Свойства ячейки…. На экране появится диалог Свойства ячейки.

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

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

Если рядом с таблицей нужно вывести ее название, можно воспользоваться командой меню Таблица - Вставить - Подпись.

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

Если требуется поместить на страницу электронные таблицы, графики или диаграммы, вы можете воспользоваться готовыми Web-компонентами пакета MS Office. Их можно выбрать в меню Вставка – Веб-компонент. Компонент Электронная таблица представляет собой упрощенный вариант листа MS Excel. Вы можете напрямую редактировать таблицу при проектировании страницы, так и при просмотре ее в браузере. Компонент Сводная таблица позволяет составить сводную таблицу по информации из базы данных или других источников. Компонент Диаграмма предназначен для построения и отображения на странице различных диаграмм по данным из электронной таблицы, сводной таблицы или базы данных.

2.6. Создание форм

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

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

Для того чтобы создать форму, прежде всего, установите курсор на странице в позицию, куда будет помещена форма, и выберите в меню Вставка команду Форма - Форма). На страницу будет помещена форма (рис. 24).

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

Установите курсор внутри формы и выберите в меню Вставка команду Форма – Текстовое поле. На форму будет помещено поле ввода текста. Ширину поля ввода текста можно изменить, двигая его за край с помощью мыши.

Щелкните правой кнопкой мыши на поле ввода и в появившемся контекстном меню выберите команду Свойства поля формы…. На экране появится диалог Свойства текстового поля (рис. 25).

В поле Имя укажите имя поля формы. Имя поля не отображается на форме, а является внутренним идентификатором, который используется при сохранении значений поля в файле или базе данных. В поле ввода Начальное значение: можно указать текст, который будет присутствовать в поле по умолчанию. Поля Ширина в знаках и Число строк определяют видимую область поля ввода. Нажмите кнопку ОК, чтобы закрыть диалог и сохранить изменения.

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

Щелкните правой кнопкой мыши на открывающемся списке на форме и в появившемся контекстном меню выберите команду Свойства поля формы…. На экране появится диалог Свойства раскрывающегося списка (рис. 26). В поле Имя укажите имя поля формы. Нажмите кнопку Добавить. На экране появится диалог Добавление варианта. В поле ввода Вариант укажите название списка.

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

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

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

Установите курсор на следующую строку формы и выберите в меню Вставка команду Форма - Флажок. На форму будет помещен флажок. Флажок предназначен для выбора возможности, которая имеет два варианта: да или нет.

Введите справа от флажка его заголовок или пояснительный текст. Щелкните правой кнопкой мыши на флажке и в появившемся контекстном меню выберите команду Свойства поля формы…. На экране появится диалог Свойства флажка. В поле Имя укажите имя поля формы. В поле ввода Значение укажите значение, которое будет передаваться в качестве результата при установленном флажке, например, Да. Переключатель Initial Value Начальное состояние определяет, будет ли флажок по умолчанию установлен или снят.

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

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

Точно так же вы можете заменить текст на кнопке Сброс на более понятный, например, Очистить поля.

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

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

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

Щелкните правой кнопкой мыши в любой области формы и в появившемся контекстном меню выберите команду Свойства формы…. На экране появится диалог Свойства формы (рис. 27). С помощью группы элементов управления Сохранение результатов определяется способ сохранения результатов формы. По умолчанию установлен первый переключатель Отправка. Это значит, что полученные данные могут быть сохранены в текстовом файле, указанном в поле Имя файла, или отправлены по электронной почте по адресу, указанному в поле Адрес почты.

Нажмите кнопку Параметры. На экране появится диалог Сохранение результатов (рис. 28).

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

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

2.7. Вставка ссылок

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

Ссылка содержит в себе адрес или путь к объекту, записанный в определенном формате. Такой адрес часто обозначается аббревиатурой URL (Uniform Resource Locator - Стандартный указатель ресурса). Адрес может содержать название протокола передачи данных, имя Web-сервера или компьютера, имя домена, каталог и имя файла. При проектировании сайта в программе FrontPage в большинстве случаев не требуется вручную, записывать адрес ссылки, достаточно лишь указать страницу, файл или объект, и FrontPage сам создаст нужную ссылку. Если вы переименовываете файл или перемещаете его в другую папку, FrontPage автоматически обновит связанные с файлом ссылки.

Рассмотрим, как, например, можно создать ссылку с одной страницы сайта на другую.

Перейдите в режим просмотра папок и файлов сайта и дважды щелкните на странице svedeniya.htm в списке файлов. Страница svedeniya.htm будет открыта в режиме редактирования.

Установите курсор в начало страницы и наберите следующий текст: В нашем лицее изучают сценическое искусство.

Теперь выделите в набранном тексте слова сценическое искусство и выберите команду меню Вставка – Гиперссылка…. На экране появится диалог Добавление гиперссылки (рис 29).

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

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

Вы можете создать ссылку на рисунок из папки сайта, указав в диалоге Добавление гиперссылки нужный файл с изображением GIF или JPEG.

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

При этом FrontPage сформирует соответствующий адрес ссылки. Файл, на который указывает ссылка, должен быть доступен по этому адресу, когда сайт будет помещен на Web-сервер.

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

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

Вы можете создать ссылку, указывающую на документ, созданный в программах Word, Excel или PowerPoint. Когда посетитель сайта щелкает мышью на такой ссылке, браузер загружает одно из приложений MS Office или программу просмотра и открывает в ней документ. Некоторые браузеры могут сами отображать документы, созданные в программах Word и Excel, используя технологию встроенных объектов (OLE).

Если требуется изменить адрес ссылки, щелкните на ней правой кнопкой мыши и в появившемся контекстном меню выберите команду Свойства гиперссылки…. На экране при этом появится диалог Изменение гиперссылки, в котором необходимо указать новый объект или ввести новый адрес.

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

Для создания ссылки-рисунка следует выбрать команду меню Вставка - Рисунок - Из файла или нажать кнопку Добавить рисунок из файла на панели инструментов Стандартная. На экране появится диалог Picture (Рисунок). В списке файлов сайта следует выбрать файл рисунка и нажать кнопку ОК. На страницу будет помещен выбранный рисунок. Далее следует щелкнуть правой кнопкой мыши на рисунке и в появившемся контекстном меню выбрать команду Гиперссылка…. На экране появится диалог Добавление гиперссылки. В этом диалоге следует указать страницу сайта, файл или ввести адрес, так же, как это делалось для текстовой ссылки, и нажать кнопку ОК. К рисунку будет привязана ссылка с указанным адресом.

Проверить, как работает ссылка-рисунок, можно, переключившись в режим просмотра страницы.

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

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

3. Проверка Web-сайта, просмотр его в браузере и размещение

на Web-сервере

3.1. Проверка орфографии, ссылок и анализ структуры сайта

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

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

Выберите команду Орфография… из меню Сервис. На экране появится диалог Орфография (рис. 30).

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

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

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

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

После корректировки всех слов на странице или при нажатии кнопки Отмена на экране появится диалог Перейти к следующей странице?, предлагающий перейти к следующей странице сайта.

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

Анализируя текст на странице, система проверки орфографии использует словарь и правила определенного языка: русского, английского или другого. Язык устанавливается в настройках страницы. Изначально для новой страницы язык устанавливается автоматически в соответствии с языком ввода для клавиатуры. Язык страницы можно поменять в открывающемся списке Язык страницы на вкладке Язык диалога Свойства страницы, который вызывается из контекстного меню страницы командой Свойства страницы.

Язык страницы не влияет на формат хранения текста, он используется системой проверки орфографии, а также браузером для выбора шрифта при отображении страницы. Формат хранения текста определяется кодировкой страницы (HTML encoding). Кодировку страницы также можно настроить на вкладке Язык диалога Свойства страницы. Все символы, не входящие в текущую кодировку, сохраняются в виде числовых кодов стандарта Unicode.

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

Выберите команду Сводка веб-узла в меню Вид - Отчеты. В центральной области окна будет выведен сводный отчет о структуре сайта (рис. 31).

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

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

Чтобы вывести на экран панель инструментов для работы с отчетами, нужно выбрать в меню Вид - Панели инструментов команду Отчеты.

Двойной щелчок на файле в отчете открывает страницу в режиме редактирования.

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

Выберите команду Медленные страницы в меню Вид - Отчеты. В центральной области окна будет выведен отчет о медленных страницах сайта, если таковые имеются.

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

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

Количество разорванных ссылок, то есть указывающих на несуществующие объекты, выводится в сводном отчете в строке Неработающие гиперссылки (рис. 32).

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

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

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

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

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

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

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

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

Кроме перечисленных выше, в программе FrontPage имеется еще ряд вспомогательных отчетов.

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

3.2. Просмотр Web-сайта в браузере и размещение его на Web-сервере

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

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

Перейдите в режиме редактирования страницы и выберите в меню Файл команду Просмотр в обозревателе. На экране откроется диалог Просмотр в обозревателе (рис.33).

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

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

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

Когда ваш сайт готов к показу в Интернете или во внутренней сети - Интранете, необходимо разместить его на Web-сервере, чтобы к нему могли получить доступ другие люди. Такой процесс называется публикацией (publishing). Фактически публикация сайта состоит в копировании страниц и других файлов на Web-сервер.

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

Необходимые действия по подготовке к публикации зависят от расположения Web-сервера. Сайт может быть помещен на Web-сервер, находящийся в вашей локальной корпоративной сети. В этом случае достаточно знать сетевое имя сервера и иметь необходимые права доступа. В качестве сервера может использоваться и тот компьютер, на котором вы разрабатываете сайт, если установить на него необходимое программное обеспечение, например, Microsoft Personal Web Server или Internet Information Services (IIS).

Если у вас нет собственного Web-сервера с выделенным доменным именем, вы можете разместить свой сайт у одного из провайдеров, предлагающих услуги по созданию на собственном сайте пользовательских Web-страниц (Web Presence Providers), еще это называется «хостингом» (hosting). Не следует путать их с Интернет-провайдерами, предлагающими услуги по доступу в Интернет (Internet Service Providers). Хотя часто одна компания может предоставлять сразу две эти услуги. Размещение собственного сайта на чужом сервере может являться как платной, так и бесплатной услугой. В последнем случае бесплатное размещение информации обычно компенсируется принудительной демонстрацией рекламы на ваших страницах. Выбирая провайдера для размещения сайта, созданного с помощью редактора FrontPage, следует, прежде всего, обратить внимание на наличие на Web-сервере соответствующих средств поддержки, в частности пакета FrontPage Server Extensions, который обеспечивает возможность загрузки файлов по протоколу HTTP (Hyper Text Transfer Protocol - Протокол передачи гипертекста).

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

Выберите команду Опубликовать веб-узел… в меню Файл. На экране появится диалог Место публикации (рис. 34).

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

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

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

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

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

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

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

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

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

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

Контрольные вопросы

1. Как создать web-узел с помощью мастера?

2. Какие режимы просмотра web-узла используются в программе FrontPage 2002?

3. Перечислите основные компоненты FrontPage 2002. Для чего они используются?

4. Как применить стиль к введенному на web-странице тексту в программе FrontPage 2002?

5. Что необходимо сделать для выбора названия шрифта (стиля шрифта, размера шрифта, цвета шрифта)?

6. Как изменить настройки, относящиеся целиком к текущему абзацу (выравнивание, отступ, интервал)?

7. Как выбрать тип рамки, задать ее цвет и толщину, выбрать цвет и способ заливки фона абзаца?

8. Как создать маркированный (нумерованный) список в редакторе FrontPage 2002?

9. Как создать бегущую строку в редакторе FrontPage 2002?

10. Как вставить на web-страницу фрагмент текста из документа, подготовленного в одной из программ MS Office?

11. Как создать ссылки и связать их с нужными страницами в редакторе FrontPage 2002?

12. Какие ссылки можно включить в состав навигационного меню web-страниц?

13. Что необходимо сделать, для того чтобы применить тему для оформления web-страницы?

14. Какие графические форматы поддерживает программа FrontPage 2002?

15. Как вставить на web-страницу рисунок из файла (из библиотеки картинок)?

16. Какие изменения можно внести в рисунок? Что для этого необходимо сделать?

17. Какие звуковые форматы поддерживает редактор FrontPage 2002?

18. Что нужно сделать, чтобы установить фоновую музыку для web-страницы?

19. Как поместить видео на web-страницу?

20. Какими способами можно создать таблицу и поместить ее на web-страницу?

21. Как разбить (объединить) ячейки в созданной таблице?

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

23. Что необходимо сделать для создания формы в редакторе FrontPage 2002?

24. Какие элементы можно включить в состав формы? Что для этого необходимо сделать?

25. Как создать ссылку с одной страницы web-сайта на другую?

26. Как создать ссылку на рисунок (файл)?

27. Как создать ссылку, вызывающую создание электронного письма, адресованного определенному абоненту?

28. Как изменить цвет отображения ссылок на web-странице?

29. Как проверить орфографию страниц сайта?

30. Как получить статистическую информацию о составе сайта?

31. Как проверить время загрузки web-страницы?

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

33. Как откорректировать некорректную ссылку?

34. Как просмотреть недоступные страницы сайта?

35. Что необходимо сделать, чтобы быстро просмотреть web-сайт несколькими браузерами?

36. Какие действия необходимо выполнить, чтобы подготовить web-сайт к публикации?

37. Как опубликовать web-сайт?