Цель:Освоить создание простой web-страницы с помощью программы FrontPage. Создание простой web-страницы с помощью FrontPage
1. Запустите программу FrontPage одним из стандартных способов. Изучите элементы окна FrontPage. Для получения подсказки о назначении инструментов на панели управления воспользуйтесь всплывающей подсказкой, как показано на рисунке 8.1.
Рисунок 8.1 - Окно FrontPage
2. Просмотрите и измените свойства создаваемой страницы, для чего выберите команду Файл > Свойства. В окне Свойства страницы перейдите на вкладку Язык, в поле Сохранить документ, используя: выберите кодировку Кириллица для отображения и сохранения документа, как показано на рисунке 8.2. Завершите изменение свойств страницы, щелкнув на кнопке ОК.
Рисунок 8.2 - Определение кодировки символов на web-странице
3. Создайте элемент текст, для чего, установив курсор в окне документа, введите нужный текст, допустим, Пример web-страницы, созданной в редакторе FrontPage. Выделив введенный текст, присвойте ему стиль Заголовок 3, выравнивание по центру.
4. Вставьте в создаваемый web-документ таблицу, в которой перечислите основные элементы web-страницы. Для вставки таблицы укажите место в окне доку мента, затем, щелкнув на кнопке Добавить таблицу на панели инструментов Стандартная, укажите мышью число строк – 2 и число столбцов – 3.
5. Вставьте в первый столбец таблицы текст из справки FrontPage о возможностях редактора, для чего вызовите справку, перейдите на вкладку Содержание и выберите тему Новые возможности. Выделив нужный текст, запомните его в буфере обмена (Ctrl+C), затем закройте окно справки и вставьте текст справки из буфера обмена в таблицу (Ctrl+V).
6. Вставьте во второй столбец рисунок, для чего, указав место вставки рисунка, выберите Вставка > Рисунок > Из файла. В открывшемся диалоговом окне Рисунок укажите нужную папку и файл изображения. Щелкнув на кнопке Открыть, завершите вставку рисунка. Выделив рисунок и используя маркеры изменения размера рамки, измените его размеры.
7. Для вставки таблицы в третий столбец существующей таблицы установите курсор в первую строку третьего столбца и выберите в меню Таблица команду Вставить таблицу. В диалоговом окне Добавить таблицу задайте количество строк, колонок, определите в области Раскладка параметры раскладки: выравнивание, размер рамки, заполнение ячеек, промежуток между столбцами. Щелкните на кнопке ОК. Введите в ячейки новой таблицы текст, например Текст в 1-й строке и 1-м столбце, затем установите размер и начертание символов текста.
8. Вставьте над первой строкой таблицы еще одну, для чего, выделив первую строку таблицы, выберите в меню Таблицы команду Вставить строки или столбцы. В диалоговом окне Вставить строки или столбцы укажите число строк 1, установите флажок Над выделенным и щелкните на кнопке ОК. Введите в ячейки вставленной строки текст заголовков Пример текста, Пример рисунка, Пример таблицы.
9. Вставьте над первой строкой таблицы еще одну строку, введите в нее текст Элементы web-страницы. Выделив все ячейки вставленной строки, выберите в меню Таблицы команду Объединить ячейки.
10. Создайте элемент гиперссылка, для чего, выделив фрагмент текста в первом столбце, в меню Вставка выберите команду Гиперссылка. В раскрывшемся диалоговом окне укажите адрес web-страницы в Интернете, например http://www.infoart.ru. Щелкните на кнопке ОК.
11. В нижней части создаваемой web-страницы введите текст Дата последнего обновления страницы: и вставьте после текста компонент Дата и время, позволяющий помещать метки времени. Для этого выберите в меню Вставка команду Дата и время. В диалоговом окне Дата и время установите флажок Дата последнего изменения страницы, выберите формат даты и щелкните на кнопке ОК.
12. Задайте свойства web-страницы, для чего выберите в меню Файл команду Свойства. Перейдите на вкладку Фон, выберите фон светло-серый и щелкните на кнопке ОК. Если вы хотите использовать в качестве фона рисунок, то на вкладке Фон установите флажок Фоновый рисунок и, щелкнув на кнопке Обзор, откройте диалоговое окно Выделите фоновое изображение. Щелкните на кнопке Обзор, найдите папку и файл рисунка и, щелкнув на кнопке Открыть, завершите выбор рисунка для фона. Щелкнув на кнопке ОК в диалоговом окне Свойства, завершите определение параметров web-страницы.
13. Сохраните созданный документ на диске, для чего выберите в меню Файл команду Сохранить как, в диалоговом окне задайте название страницы и, щелкнув на кнопке Как файл, укажите папку и имя файла. Щелкнув по кнопке Сохранить, завершите сохранение web-страницы как файла.
14. Для просмотра созданной web-страницы щелкните по кнопке Просмотр в Microsoft Internet Explorer. Закройте окно Microsoft Internet Explorer. Созданная web-страница будет иметь вид, показанный на рисунке 8.3.
Рисунок 8.3 - Web-страница, созданная в редакторе FrontPage
Обратите внимание, что вид указателя мыши изменяется при подведении его к гиперссылке, а в строке статуса web-обозревателя отображается адрес документа, связанный с данным фрагментом web-страницы.
15. Щелкнув по кнопке Код, просмотрите, как выглядит созданный web-документ на языке HTML.Найдите в тексте и изучите теги, описывающие таблицу на web-странице.
16. После просмотра web-страницы закройте окно Internet Explorer.