Создание сайта при помощи Front Page 2000. Урок второй. Создание гиперссылок

Анастасия Кулакова, alex_kulakoff@pisem.net

Создание страницы "Как поступить"

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

1. Перейдите на панель Navigation (Навигация) и 2 раза щёлкните мышкой на странице "Как поступить".
2. Удалите Comments(Комментарий) и все ниже следующие надписи. Страница заметно уменьшится, и вы сможете увидеть нижнюю таблицу в окне разработки.
3. Под пунктирной линией наберите следующий текст:
   Как поступить на наш факультет?
4. Затем можно набрать такое предложение: "Для этого достаточно при необходимости пройти подготовительные курсы, сдать экзамены, пройти конкурс... и вы студент нашего факультета." и вставьте его чуть ниже последней надписи.
5. Теперь на панели инструментов включите маркеры; один из них сразу же появится, и вы уже можете ввести текст: Экзамены: какие, и в каком виде, нажмите клавишу Enter и введите: День открытых дверей: когда, где, а затем, повторив эти действия ещё раз, напишите: Курсы: когда, где, какие.
6. Теперь займёмся панелью навигации. Перейдите на Navigation. Нажмите на страничке-иконке "Содержание" и, удерживая мышку нажатой, переместите страничку между "Как поступить" и "Как учиться".
7. Перейдите на главную страницу и выделите верхнюю навигационную панель (Navigation Bar), щёлкните правой кнопкой мышки, для активизации всплывающего меню и выберите в нём Navigation Bar Properties…(Свойства навигационной панели). Выберите опции: Parent level, Home page, Horizontal, Text.
8. Теперь таким же образом откройте свойства боковой навигационной панели и установите свойства: Child level, Parent page, Vertical, Buttons.
9. Выделите теперь нижнюю навигационную панель и войдите в её свойства. Установите значения те же, что и на верхней панели.
10. Перейдите на страницу "Как поступить" и обратите внимание, что первая кнопка боковой навигационной панели называется "Up". Поскольку наш сайт является русскоязычным, то необходимо переименовать её. Для этого войдите в меню Tools (Утилиты), откройте Web Settings…(Настройка сайта).
11. Перейдите на вкладку Navigation (Навигация). Значение Home Page (Домашняя страница) должна иметь уже название "Главная", если по каким-то причинам этого нет, то назовите её так.
12. Parent Page (Исходная страница) назовите "Обратно". Нажмите кнопку Apply (Применить), а затем ОК. Теперь эта боковая панель должна выглядеть так:
13. Сохраните результаты.

Одну дополнительную страницу мы добавили. Теперь создадим остальные, относящиеся к данной теме: "Как поступить".

1. На панели Navigation (навигация) выберите страницу "Экзамены". Двойным щелчком мышки откройте её в редакторе и удалите весь текст, который находится справа от навигационной панели до нашей нижней таблицы.
2. Теперь войдите в свойства этой страницы, щёлкнув правой кнопкой мышки, и в появившемся меню выберите Page Properties…(Свойства страницы). Значение Title (Название) укажите "МГОПУ Экзамены".
3. На вкладке Language (Язык) параметр Page language (Язык страницы) укажите Russian (Русский), а HTML encoding (кодировка HTML) - Cyrillic (Кириллица). Нажмите ОК. Теперь вы спокойно печатать на русском языке и Front Page не будет считать слова за ошибки.
4. В то место, откуда мы удалили текст, можно поместить такой текст:

   Экзамены.

   Для поступающих на общих основаниях (после 11-12 лет обучения в школе).

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

   Для тех кто пришёл к нам учиться после полной средней школы наш факультет предлагает 3 формы обучения:

   дневное--5 лет обучения

   вечернее--3,5 года обучения

   заочное--5,5 лет обучения

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

   дневное--3 года обучения

   вечернее--3,5 года обучения

   заочное--4 года обучения

5. Выделите столбик о формах обучения и примените к нему список, нажав на соответствующей иконке
6. Проделайте это с другим столбиком.
7. Для двух первых строк аналогичным образом примените маркер.
8. После этого на следующей строчке вставим горизонтальную линию. В меню Insert (вставка) выберите команду Horizontal Line (Горизонтальная линия).
9. Сохраните результаты. Вторая страница общей темы готова.

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

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

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

Гиперссылки состоят из 2 частей: самой гиперссылки и адреса назначения (target), определяющего путь к странице, которая загрузится после щелчка на гиперссылке. Когда пользователь помещает указатель мыши на гиперссылку, он принимает вид указывающей руки. Такая форма указателя сообщает пользователю, что объект, расположенный под ним, представляет собой гиперссылку. Адрес гиперссылки обычно отображается в строке состояния, располагающейся в нижней части окна браузера. Создание гиперссылки без Front Page представляет собой довольно трудоёмкую работу. Однако создать ссылку при помощи Front Page довольно просто: достаточно указать адрес и щёлкнуть мышью. О деталях позаботиться программа.

Создадим гиперссылку на нашей странице "Как поступить" на страницы "Экзамены", "Курсы", "День открытых дверей".

1. Активизируйте страницу "Как поступить" (products.htm).
2. Выделите слово "Экзамены".
3. В меню Insert (Вставка) выберите команду Hyperlink (Гиперссылка). Откроется диалоговое окно Create hyperlink (Создание гиперссылки).
4. В списке файлов щёлкните на prod01.htm. В текстовом поле URL появится имя файла, которое является адресом перехода для новой гиперссылки.
5. Щёлкните по кнопке ОК. Снимите выделение со слова "Экзамены", щёлкнув мышью в любом пустом месте страницы. Программа создала гиперссылку. Обратите внимание на то, что слово "Экзамены" теперь подчёркнуто - это означает, что оно теперь является гиперссылкой.
6. Сохраните результаты.
7. Аналогичным образом создайте ссылки "День открытых дверей" на prod02.htm, "Курсы" на prod03.htm.
8. Сохраните результаты.

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

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

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

1. На панели инструментов щёлкните по кнопке Preview In Browser (Просмотреть в браузере). Наша страница "Как поступить" окажется в окне Internet Explorer'а.
2. Щёлкните на ссылке "Экзамены". В окне браузера откроется страница "Экзамены", которую мы сегодня создали.
3. На панели инструментов Internet Explorer'а щёлкните на кнопке Back (Назад). В окне браузера опять появится страница "Как поступить".
4. Теперь щёлкните на ссылке "День открытых дверей". В окне браузера появится ещё не сделанная нами страница.
5. Теперь на панели навигации этой страницы нажмите кнопку "Обратно". Вы вернётесь всё на туже страницу "Как поступить".
6. Теперь нажмите кнопку "Курсы". В окне Internet Explorer'а откроется так же ещё не готовая страница.
7. Закройте браузер и активизируйте окно Front Page. Таким образом, мы проверили не только работу текстовых гиперссылок, но и работу навигационной панели.

Различные типы гиперссылок

В диалоговом окне Create hyperlink (Создание гиперссылки) Вы можете выбрать один из нескольких типов создаваемой гиперссылки.

Файл в списке папок ------------------ На другую страницу вашего сайта

Web browser -------------------------------- На файл из Internet

Local File ---------------------------- На файл, расположенный на вашем компьютере

E-mail --------------------------- Для отправки сообщения электронной почты

New -------------------- Для создания новой страницы и установления ссылки на неё.

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

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

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

1. Перейдите на страницу "Главная" (index.htm). В нижней таблице выделите имя разработчика.
2. Щёлкните на панели инструментов по кнопке Hyperlink (Гиперссылка). Откроется диалоговое окно Create hyperlink (Создание гиперссылки).
3. В диалогом окне щёлкните по кнопке E-mail (электронная почта). Откроется диалоговое окно Create e-mail hyperlink (создание почтовой гиперссылки).
4. В тестовом поле наберите E-mail. Например: alex_registr@aport2000.ru и нажмите ОК. Это диалоговое окно закроется, а на экране появится предыдущее окно, в котором в поле URL появится адрес электронной почты с префиксом "mailto:"-
5. Нажмите кнопку ОК. Front Page создаст новую гиперссылку.
6. На панели инструментов нажмите кнопку Save (Сохранить). Все изменения будут сохранены.

Создание закладок на странице

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

Проблему эту можно решить при помощи закладок (bookmarks). В программе Front Page закладка представляет собой ссылку на определённый участок страницы. Страницы "Главная", "Экзамены" достаточно длинные, поэтому нам необходимо добавить несколько закладок, чтобы облегчить жизнь посетителям сайта. Для этого:

1. В списке папок дважды щёлкните на файле prod01.htm. программа отобразит страницу "Экзамены" в режиме Page (Страница).
2. Прокрутите эту страницу до конца и найдите предложение: "Если Вы пришли учиться к нам…..".
3. Выделите словосочетание "после педколледжа".
   Нет необходимости предварительно текст для создания закладки. Вы можете просто поместить курсор в то место, где должна помещаться закладка, а затем в меню Insert выбрать команду Bookmark. Наберите имя новой закладки и щёлкните ОК.
4. В меню Insert (Вставка) выберите команду Bookmark (Закладка). Откроется диалоговое окно Bookmark.
5. Щёлкните по кнопке ОК, а затем отмените выделение текста, щёлкнув в любом месте страницы. Front Page создаст закладку. Обратите внимание на то, что текст подчёркнут ломаной линией. Такой тип линии позволяет отличить закладку от обычной гиперссылки.
6. Теперь просмотрите страницу и найдите предложение "Для тех, кто пришёл к нам учиться…" и выделите словосочетание "после полной средней школы". В меню Insert (Вставка) выберите команду Bookmark (Закладка).
7. Откроется диалоговое окно Bookmark. Щёлкните по кнопке ОК. На странице "Экзамены" появится ещё одна закладка.
8. Отмените выделение текста. Сохраните изменения.

Создаём ссылку на закладку на той же странице

1. Прокрутите страницу "Экзамены" в начало, так чтобы в окне разработки был виден маркированный список.
2. Выделите первое предложение "Для поступающих на общих основаниях (после 11-12 лет обучения в школе)".
3. В меню Insert (Вставка) выберите команду Hyperlink (гиперссылка), в списке файлов диалогового окна щёлкните на файле prod01.htm.
4. Щёлкните на стрелке поля Bookmark (Закладка), выберите закладку "после полной средней школы" и щёлкните на кнопке ОК. Front Page поместит на страницу новую ссылку.
5. Сохраните результаты.
6. Выделите второе предложение маркированного списка.
7. В меню Insert (Вставка) выберите команду Hyperlink (гиперссылка), в списке файлов диалогового окна щёлкните на файле prod01.htm.
8. Щёлкните на стрелке поля Bookmark (Закладка), выберите закладку "после педколледжа" и щёлкните на кнопке ОК. Front Page поместит на страницу новую ссылку.
9. Сохраните результаты.

Проверка закладок

На панели инструментов щёлкните по кнопке Preview In Browser (Просмотреть в браузере). Наша страница "Экзамены" окажется в окне Internet Explorer'а. Проверьте работу закладок и гиперссылок как мы делали это раньше. Закройте браузер и вернитесь во Front Page. Сохраните результаты.

Дополнительные гиперссылки

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

1. Найдите предложение "Если Вы пришли учиться к нам…..".
2. Над ним напишите словосочетание "Вверх страницы" и нажмите клавишу Enter для создания пробела межу этим словосочетанием и предложением.
3. Теперь наберите это же словосочетание с этими же параметрами текста внизу страницы над нижней панелью навигации.
4. Вернитесь в начало страницы и поместите курсор перед гербом университета. Откройте диалоговое окно для создания закладки и наберите "item1".
5. Теперь выделите словосочетание "Вверх страницы", которое находится в середине текста, и нажмите иконку Hyperlinks (Гиперссылка) на панели инструментов.
6. В списке файлов выберите файл prod01.htm, а в строке Bookmark наберите "item1". Нажмите кнопку ОК.
7. Программа создала ссылку. Сохраните результаты.
8. Теперь сделайте то же самое с нижним словосочетанием "Вверх страницы". Сохраните результаты и проверьте работу в браузере.

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

Продолжение следует...

Интернет-проект "От Анастасии", http://nasta.virtualave.net