Практическое занятие № 29. Создание гиперссылок

 

1. Цель занятия

-получить практические навыки по работе в системе дистанционного обучения

 

2. Перечень необходимых средств обучения (оборудование, материалы)

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

 

Используемое программное обеспечение:

- Microsoft Windows XP /7

- OpenOffice.org

- Антивирус Касперского 6.0

- Интернет-браузер

- Ресурс www.moodle.novsu.ru

 

Основные теоретические положения

 

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

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

Новый файл, который откроет браузер, может быть любой страницей из www, страницей на Интернет сервер в корпоративной сети или просто файлом, который хранится на компьютере пользователя.

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

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

Применение стилей

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

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

 

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

 

В программе FrontPage существуют 3 способа применения стилей:

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

2. Можно создать таблицу стилей страницы. Если изменить оформление элемента страницы (например, заголовка или абзаца) в таблице стилей страницы, изменится и оформление всех элементов этой страницы данного типа. Например, можно создать стиль для основного текста, абзацы должны быть выровнены по центру страницы, а сам текст набран шрифтом Arial размером 36 пт, красным цветом. Если применить такой стиль к странице, то весь основной текст окажется красного цвета, набран шрифтом Arial размером 36 пт, а абзацы будут выровнены по центру страницы. Для создания таблицы стилей страницы нужно выбрать команду Стиль из меню Формат, а затем в диалоговом окне Стиль произвести необходимые изменения.

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

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

 

Компоненты FrontPage – это готовые программы, которые выполняются, когда пользователь загружает с помощью браузера вашу страницу. Компоненты FrontPage позволяют легко и быстро расширять функциональность страниц, избавляя от необходимости изучения языков сценариев или программирования компонентов ActiveX или Java. В табл. 29.1 перечислены некоторые компоненты FrontPage.

 

Таблица 29.1 Компоненты FrontPage

Компонент	Описание
Комментарий	Вставляет в HTML-код страницы комментарий, поясняющий программный код или элементы оформления страницы. Этот компонент не виден при просмотре страницы в браузере
Баннер *	Помещает баннер вверху страницы
Счетчик посещений *	Показывает число, соответствующее количеству посещений страницы
Всплывающая кнопка	Воспроизводит особый визуальный эффект, когда указатель мыши оказывается расположенным над кнопкой, который заключается в изменении внешнего вида кнопки
Бегущая строка	Отображает на странице горизонтальную полосу, в которой прокручивается текст
Включаемая страница	Помещает страницу в определённое место на другой странице. Например, при помощи этого компонента вы можете помещать на каждую страницу информацию об авторских правах
Рисунок, отображаемый по расписанию *	Отображает рисунок в течение определенного времени, а затем может заменяться другим рисунком. Компонент полезен, когда необходимо представить пользователям информацию, зависящую от времени
Замещение	Заменяет часть текста на странице
Категории	Вставляет гиперссылки на страницы по категориям. Он полезен при составлении оглавления страниц определенного типа, например, где приводятся отчёты о расходах или планах
Форма поиска *	Этот компонент позволяет посетителям искать на вашем сайте страницы, содержащие определённые фрагменты текста
Содержание *	Создаёт оглавление сайта
* Помечены компоненты, которые поддерживает программа Front-Page Server Extensions.

 

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

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

 

4. Содержание заданий:

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

 

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

 

1. Активизировать страницу Как поступить (products.htm).

2. Выделить слово Экзамены.

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

4. В списке файлов щёлкнуть на prod03.htm. В текстовом поле URL появится имя файла, которое является адресом перехода для новой гиперссылки.

5. Щёлкнуть по кнопке ОК. Снять выделение со слова Экзамены, щёлкнув мышью в любом пустом месте страницы. Программа создала гиперссылку. Обратите внимание на то, что слово Экзамены теперь подчёркнуто – это означает, что оно теперьявляется гиперссылкой.

6. Сохранить результаты.

7. Аналогичным образом создать ссылки Специальности на prod01.htm, Схема подготовки на prod02.htm.

8. Сохранить результаты.

 

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

Задание 2. Проверка гиперссылок

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

1. На панели инструментов щёлкнуть по кнопке Файл → Просмотреть в обозревателе, или просто нажать F12. Страница Как поступить окажется в окне Internet Explorer.

2. Щёлкнуть на ссылке Экзамены. В окне браузера откроется страница Экзамены.

3. На панели инструментов Internet Explorer щёлкнуть на кнопке Back. В окне браузера опять появится страница Как поступить.

4. Теперь щёлкнуть на ссылке Специальности. В окне браузера появится ещё не сделанная нами страница.

5. Теперь на панели навигации этой страницы нажать кнопку Обратно. Вы вернётесь все на ту же страницу Как поступить.

6. Теперь нажать кнопку Схема подготовки. В окне Internet Explorer откроется также ещё не готовая страница.

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

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

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

ü с текущей папкой – на другую страницу вашего сайта;

ü новым документом – на файл, расположенный на вашем компьютере;

ü местом в документе – на определённое место в текущем документе;

ü электронной почтой – для отправки сообщения электронной почтой.

 

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

1. Перейти на страницу Главная (index.htm). В нижней таблице выделить имя разработчика.

2. Щёлкнуть на панели инструментов по кнопке Гиперссылка. Откроется диалоговое окно Создание гиперссылки.

3. В диалогом окне щёлкнуть по кнопке Электронная почта. Откроется диалоговое окно Создание почтовой гиперссылки.

4. В тестовом поле набрать E-mail. Например: [e-mail] и нажать ОК. Это диалоговое окно закроется, а на экране появится предыдущее окно, в котором в поле URL появится адрес электронной почты с префиксом "mailto:"-

5. Нажать кнопку ОК. FrontPage создаст новую гиперссылку.

6. На панели инструментов нажать кнопку Save (Сохранить). Все изменения будут сохранены.

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

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

 

1. В списке папок дважды щёлкнуть на файле prod01.htm.

2. Выделить словосочетание На заочную форму. Затем в меню Вставка выбрать команду Закладка. Набрать имя новой закладки, а можно оставить и предлагаемое и щёлкнуть ОК (рис. 29.1).

Рис. 29.1. Имя закладки

 

3. Щёлкнуть по кнопке ОК, а затем отменить выделение текста, щёлкнув в любом месте страницы. FrontPage создаст закладку. Обратите внимание на то, что текст подчеркнут ломаной линией. Такой тип линии позволяет отличить закладку от обычной гиперссылки.

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

5. Откроется диалоговое окно Закладка. Щёлкнуть по кнопке ОК. На странице Экзамены появится ещё одна закладка.

6. Отменить выделение текста. Сохранить изменения.

Задание 5. Создание ссылки на закладку на той же странице

1. Страницу Экзамены прокрутить в самое начало.

2. Выделить в первом предложении слово дневной.

3. В меню Вставка выбрать команду Гиперссылка и Местом в документе и щёлкнуть по имени соответствующей закладки.

4. Щёлкнуть на кнопке ОК. FrontPage поместит на страницуновую ссылку.

5. Сохранить результаты.

6. Выделить в первой строке слово заочной.

7. В меню Вставка выбрать команду Гиперссылка, в списке закладок текущего документа щёлкнуть по закладке дневную_форму. Обратите внимание, что в закладках слова связываются через знак подчёркивания.

8. Сохранить результаты.

Задание 6. Проверка закладок

На панели инструментов щёлкнуть по кнопке Просмотреть в обозревателе. Страница Экзамены окажется в окне InternetExplorer. Проверить работу закладок и гиперссылок как мы делали это раньше. Закрыть браузер и вернуться во FrontPage. Сохранить результаты.

Задание 7. Применение темы к отдельной странице

1. В списке папок дважды щёлкнуть на файле index.htm.

2. В меню Формат выбрать команду Тема (рис. 28.2) и область задач на закладки Темы.

3. Просмотреть внешний вид вашей странички при использовании разных тем.

 

Рис. 29.2. Веб-страница – 3-й этап

Попробуйте включить и отключить фоновый рисунок.

 

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

 

1. В списке папок дважды щёлкнуть на файле с именем prod01.htm. В окне просмотра откроется нужная страница.

2. В меню Формат выбрать команду Стиль. Откроется диалоговое окно Стиль (рис. 29.3).

Рис. 29.3. Диалоговое окно Стиль

3. Прокрутить список Стили, выбрать стиль p, а затем нажать кнопку Изменить. Откроется диалоговое окно Изменить стиль.

4. Щёлкнуть по кнопке Формат и в контекстном меню выбрать команду Шрифт. Откроется диалоговое окно Шрифт.

5. Щёлкнуть на стрелке поля Цвет, выбрать какой-нибудь из прямоугольников, закрашенных синим цветом, но так, чтобы сочеталось с цветом ссылок, Tahoma, 14 pt, а затем 2 раза нажать кнопку ОК. На экране снова появится диалоговое окно Стиль.

6. Закрыть это окно. Теперь страница изменена. При желании можно сохранить результаты или отменить применение стиля. Для этого в диалоговом окне Стиль в поле Список выбрать параметр Пользовательские стили.

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

 

Задание 9. Применение бегущей строки

1. С помощью панели навигации Переходы перейти на страницу Специальности.

2. Удалить весь текст, находящийся справа от боковой панели навигации.

3. В меню Вставка выбрать Компонент и щёлкнуть на пункте Бегущая строка. Программа отобразит диалоговое окно Свойства бегущей строки (рис. 29.4).

 

Рис. 29.4. Диалоговое окно Свойства бегущей строки

 

4. В поле Текст набрать: Выбирайте любую специальность.

5. В разделе Размер установить флажок в поле Ширина, а в соответствующем поле набрать 400. Включить опцию В точках.

6. В разделе Повторы установить флажок Непрерывно.

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

7. Для форматирования текста бегущей строки щёлкнуть правой кнопкой мыши на ней, после чего в контекстном меню выбрать пункт Шрифт.

8. Выбрать любой яркий цвет. Пункты являются мерой высоты шрифта: в одном дюйме содержится 72 пт, то есть, высота символа размером 72 пт – 1 дюйм, символ размером 12 пт – одна шестая дюйма.

9. Нажать ОК. Сохранить результаты. Просмотреть страницу в браузере, нажав на панели инструментов иконку Просмотреть в обозревателе.

 

Задание 10. Создание страницы Отделения

1. Открыть файл serv01.htm в режиме Страница.

2. Удалить все комментарии и текст, следующий ниже до нижней таблицы.

3. Установить курсор на уровне верхней кнопки навигационной панели.

4. Набрать слово Отделения.

5. Теперь войти в свойства этой страницы, щёлкнув правой кнопкой мыши, и в появившемся меню выбрать Page Properties (Свойства страницы). Указать значение Title (Название) ПТК НовГУ Отделения.

6. Сохранить результаты.

 

Задание 11. Использование таблиц для упорядочивания элементов на странице

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

1. Открыть файл serv01.htm. Удалить все комментарии и то, что расположено ниже, до нижней таблицы.

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

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

– в текстовом поле Число строк удалить присутствующее там число 2 и набрать число 4, в поле Число столбцов набрать 2, затем выбрать параметр Специальная ширина и установить опцию В процентах. Таким образом таблица будет ровно и правильно отображаться при любых разрешениях экрана монитора. Нажать кнопку ОК;

– сохранить результаты.

3. В каждую из ячеек поместить информацию об отделениях (табл. 29.2).

 

Таблица 29.2 Перечень отделений

Компьютерные системы и комплексы Программирование в компьютерных системах Сети связи и системы коммутации	Заведующая отделением Яковлева Валентина Степановна
Техническое обслуживание и ремонт автомобильного транспорта Дизайн	Заведующая отделением Кузнецова Елена Григорьевна
Автоматизация технологических процессов и производств (по отраслям) Технология машиностроения	Заведующая отделением Таранец Ирина Викторовна

 

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

 

Задание 12. Создание страницы Предметно-цикловые комиссии (Кафедры)

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

2. Теперь войти в свойства этой страницы, щелкнув правой кнопкой мыши, и в появившемся меню выбрать Свойства страницы. Указать значение Название ПЦК ПТК НовГУ.

3. В свободное место можно поместить такой текст:

 

Таблица 29.3 Перечень ПЦК

Специальность	Отвественный
Программирование в компьютерных системах	Сазонова Наталья Владимировна
Компьютерные системы и комплексы	Кушнарёва Анастасия Леонидовна
Сети связи и системы коммутации	Цыбульская Галина Владимировна
Техническое обслуживание и ремонт автомобильного транспорта	Чернега Анна Михайловна
Дизайн	Клименко Елена Николаевна
Автоматизация технологических процессов и производств (по отраслям)	Таранец Ирина Викторовна
Технология машиностроения	Ефимова Евгения Анатольевна
Общеобразовательных, общих гуманитарных и социально-экономических и естественно-научных дисциплин колледжа	Белорусова Лина Петровна

 

Сохранить результаты. Страница ПЦК готова.

 

 

5. Содержание отчёта:

5.1 Гиперссылка на странице Как поступить на страницы Экзамены, Специальности, Схема подготовки

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

5.3 Ссылка на закладку на текущей странице

5.4 Созданная таблица стилей

5.5 Созданная навигационная панель

 

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

6.1 Что такое гиперссылка? Гиперссылка состоит из двух частей. Назовите эти части.

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

6.3 Применение темы.

6.4 Создание бегущей строки.

 

 

7. Список рекомендуемой литературы

7.1 Могилев А.В. Практикум по информатике: учеб.пособие для вузов. - М.: Академия, 2008. - 608с.

7.2 Угринович Н. Д. Информатика и ИКТ:10,11 кл.- М.:БИНОМ. Лаборатория знаний, 2008. - 512с.

7.3 Могилев А.В. Практикум по информатике: учеб.пособие для вузов. - М.: Академия, 2008. - 608с.