Практическое занятие. «Microsoft FrontPage: редактирование Web-страниц со вставкой рисунков, таблиц, гиперссылок»

1. Запустите Microsoft FrontPage и откройте созданный ранее web-сайт, для чего выберите команду Файл (File) > Открыть (Open), затем в окне Открыть файл (Open File) выберите папку Mywebs, в которой были сохранены папки и файлы web-сайта, укажите файл index.htm и щелкните на кнопке Открыть (Open).

2. Выберите на панели Папки(Folders) страницу, с которой собираетесь работать, например, interests.htm, и откройте ее для редактирования, для чего дважды щелкните левой кнопкой мыши на ее названии.

Добавьте на страницу текст описания одного из ваших увлечений, например: Мне нравится ездить на автомобиле, ухаживать за ним. Много интересного об автомобилях я узнал на сайте «Автомобили России».

Откройте Microsoft Internet Explorer и загрузите страницу с адресом http://www.auto.ru. Найдите на сайте «Автомобили России» фотографию какого-либо автомобиля и сохраните ее в папке images.

Вернитесь в окно Microsoft FrontPage. На страницу Интересы вставьте рисунок автомобиля, для чего, указав место вставки рисунка, выберите в меню Вставка (Insert) команду Изображение (Picture) > Из файла (From File). Нажмите пиктограмму проводника и в открывшемся окне Выбор файла (Select file) выберите файл с изображением автомобиля. Нажмите кнопку ОК.

3. Для установки и изменения свойств изображения, щелкнув правой клавишей мыши на вставленном рисунке и выбрав в контекстном меню Свойства изображения (Picture Properties), перейдите в открывшемся окне на вкладку Основные (General). В области Альтернативные представления (Alternative representations) в поле Текст (Text) введите Автомобили. Откройте вкладку Внешний вид (Appearance), установите в поле Толщина границ (Border thickness) значение 1, в полях Горизонтальное расстояние (Horizontal spacing) и Вертикальное расстояние (Vertical spacing) установите значение 2. Для применения внесенных изменений щелкните на кнопке ОК.

4. Создайте абсолютную гиперссылку на слова Автомобили в России, для чего, выделив их, щелкните на кнопке Гиперссылка (Hyperlink) на стандартной панели инструментов. В окне Создание гиперссылки (Create Hyperlink) введите в поле URL адрес web-страницы http://www.auto.ru. Завершите создание гиперссылки, щелкнув на кнопке ОК.

5. Одним из наиболее удобных и гибких форм организации материала на web-страницах являются таблицы. Построить таблицу в редакторе FrontPage можно, либо непосредственно нарисовав ее на странице, либо вставив с помощью меню Таблица (Table).

Откройте для редактирования страницу photo.htm, если это не было сделано ранее, удалите из нее текст шаблона, фотографии, вставленные из шаблона. Сейчас мы создадим на странице таблицу из двух строк и трех колонок, в которой разместим фотографии автомобилей. Для примера скопируйте в папку images фотографии с сайта, посвященного автомобилям, например с http://www.cars.com.

Для вставки таблицы укажите место вставки таблицы и выберите команду Таблица (Table) > Вставка (Insert) > Таблица (Table). В окне Вставить таблицу (Insert table) укажите в области Размер (Size) количество строк (Rows) 2, количество колонок (Columns) 3, в области Размещение (Layout) в поле Размер (Border size – ширина рамки таблицы) задайте 0 (рамка не будет отображаться) и щелкните на кнопке ОК для создания таблицы.

Для вставки фотографии укажите ячейку таблицы, а затем выберите Вставка (Insert) > Изображение (Picture) > Из файла (From File), в окне Изображение (Picture), используя пиктограмму проводника , выберите папку и файл рисунка. Щелкните на кнопке ОК.

Для изменения свойств рисунка, указав рисунок, выберите в контекстном меню команду Свойства изображения (Picture Properties), на вкладке Главное (General) в разделе Альтернативные представления (Alternative representations) введите в поле текст, например, Джип. На вкладке Внешний вид (Appearance) в поле Толщина границ (Border thickness) установите значение 0, в полях Горизонтальное Расстояние (Horizontal spacing) и Вертикальное Расстояние (Vertical spacing) установите значения 1. Для применения внесенных изменений щелкните на кнопке ОК.

6. Сохраните страницу photo.htm, щелкнув на кнопке Сохранить (Save) на стандартной панели инструментов. Для проверки вида страницы перейдите в режим Просмотр (Preview).

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

7. Оформите на web-странице Избранное перечень ссылок на ресурсы в Интернете в виде списка. Для перехода к редактированию web-страницы Избранное в разделе Список папок (Folder List) щелкните на файле favorite.htm. После этого данная страница будет раскрыта для редактирования в окне редактора FrontPage. Если это не было сделано ранее, удалите со страницы лишний текст, введите свой текст, например: На данной странице я собираю наиболее интересные, на мой взгляд, ссылки в Интернете:

Федерация Интернет-Образования,

СОМ – Сетевое объединение методистов

Орловский региональный центр ФИО.

Оформите данный текст в виде списка, для чего, выделив данный текст, щелкните на кнопке Список (Bullets) на панели инструментов форматирования.

Создайте гиперссылки на элементы списка: Федерация Интернет-Образования – http://www.fio.ru, СОМ – Сетевое объединение методистов – http://center.fio.ru/som, Орловский региональный центр ФИО – http://www.orel.fio.ru.

Для создания гиперссылки выделите элемент списка, например, Федерация Интернет-Образования, выберите в контексном меню команду Гиперссылка (Hyperlink), затем в окне Создать гиперссылку (Create Hyperlink) в поле URL введите http://www.fio.ru и щелкните на кнопке ОК. Аналогично создайте гиперссылки на остальных элементах списка.

8. Сохраните внесенные изменения, выбрав Файл (File) > Сохранить (Save). Для просмотра вида web-страницы щелкните на закладке Просмотр (Preview) и просмотрите, как она будет выглядеть в web-браузере. Проверьте правильность отображения текста и графических элементов страницы, действие гиперссылок на другие страницы web-сайта, на web-страницы в Интернете. Щелкнув на закладке HTML, посмотрите, как записан текст данной web-страницы на языке HTML.

9. По окончании просмотра закройте окно FrontPage стандартным образом.



Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: