Лабораторная работа № 7 Тема: Создание web-страницы
Цель: Освоить создание простой 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.
Создания веб-узла с использованием шаблона
1. Запустите Microsoft FrontPage, для чего в Главном меню Windows выберите команду Программы > Microsoft FrontPage.
2. Для создания структуры веб-узла выберите в панели инструментов Область задач команду Другие шаблоны веб-узла. В окне Шаблоны веб-узлов выберите шаблон, например Личный веб-узел, в поле Указать расположение нового веб-узла введите имя диска и папки, в которой будут размещены папки и файлы создаваемого веб-узла, например С:\home\mywebs. Щелкните на кнопке ОК. Окно приложения Microsoft FrontPage 2003 с заготовкой веб-узла (см. рисунок 8.4).
Рисунок 8.4 - Окно Microsoft FrontPage 20003 с заготовкой веб-узла
В результате в левой половине окна откроется список содержимого веб-узла Список папок, в котором автоматически создаются папки private и images и несколько страниц HTML с базовым содержанием по выбранному шаблону (см. рис. 14).Созданный узел сохраняется в новой папке, которая помещается на локальный диск или на сервер Web. Этот узел можно впоследствии открыть с помощью команды Файл > Открыть или выбрав его из списка последних открытых узлов Файл > Последние узлы.
3. Рассмотрите предложенную шаблоном персональной страницы базовую структуру веб-узла. Для отображения структуры web-узла щелкните на значке Переходы. В правой части окна появилась структура веб-узла (см. рисунок 8.5). Здесь можно контролировать правильность ссылок, автоматически изменять их при переименовании файла и многое другое.
Рисунок 8.5 - Изменение структуры веб-узла
4. Удалите страницу feedback.htm из веб-узла, для чего укажите на структуре веб-узла данный элемент и, щелкнув на нем правой кнопкой мыши, раскройте контекстное меню и выберите команду Удалить (см. Рис. 8.5). В раскрывшемся окне удаления установите флажок Удалить эту страницу из сайта и щелкните на кнопке Ок.
5. Для изменения взаимного расположения и связей элементов структуры web-узла перетащите элемент в режиме Переходы на желаемое место, как показано на рисунке 8.6.
Рисунок 8.6 - Изменение взаимного расположения и связей элементов структуры веб-узла
6. Наполните содержанием веб-страницы веб-узла с измененной структурой. Для редактирования веб-страницы можно дважды щелкнуть левой кнопкой мышки на ее имени на панели Список папок или ее изображении на панели Переходы. Чтобы увеличить обзор в окне редактирования, отмените отображение списка файлов, используя меню Вид команду Список папок.
7. Откройте для редактирования стартовую веб-страницу index.htm. Внимательно рассмотрите страницу index.htm. Она состоит из заголовка страницы, панели навигации в виде кнопки под заголовком, панели навигации в виде гиперссылок в левой части страницы (Увлечения, Избранное) и текста в правой части страницы Добро пожаловать на мой ...
8. Установите основные свойства страницы. Для этого в меню Файл выберите команду Свойства. В окне Свойства страницы перейдите на вкладку Общие. Введите в поле Название название документа на русском языке, например Персональная страница. Для правильного отображения символов русского языка на вкладке Язык в списке поля Отметить текущий документ выберите Русский, а в области Набор знаков в списке поля Сохранить документ выберите Кириллица, в списке поля Повторить загрузку текущего документа выберите Кириллица и щелкните на кнопке ОК.
9. Для изменения элементов веб-страницы укажите элемент шаблона и отредактируйте его по вашему усмотрению. Для редактирования Объявления на странице (графического заголовка), указав Объявление (баннер), вызовите контекстное меню и выберите в нем команду Свойства объявления на странице, как показано на рисунке 8.7.
Рисунок 8.7 - Изменение свойств Объявления на странице
В диалоговом окне Свойства объявления на странице установите флажок Рисунок, а в поле Текст объявления введите новый текст, например Моя персональная страница, и щелкните на кнопке ОК. Текст в объявления на странице изменился.
Отредактируйте текст в правой части страницы (Добро пожаловать на мой...), например, следующим образом: Данный сайт изготовлен в качестве примера редактирования веб-узла, созданного по шаблону персональной страницы.
Для изменения формата даты обновления страницы укажите объект даты и выберите в контекстном меню команду Свойства Дата и время. В окне Дата и время измените формат даты, как показано на рисунке 8.8, и щелкните на кнопке ОК. Для изменения свойств панели ссылок в виде гиперссылок в левой части веб-страницы (Увлечения, Избранное) выделите элементы на панели и выберите в контекстном меню команду Свойства Панель ссылок. В окне Свойства панели ссылок на вкладке Общие установите переключатель Дочерний уровень, на вкладке Стиль выберите подходящий стиль в списке Выберите стиль, в разделе Ориентация и внешний вид установите переключатель Вертикальный, установите флажок Использовать активные рисунки и щелкните на кнопке ОК. После этого тексты с гиперссылками в левой части веб-страницы будут отображаться в виде вертикально расположенных кнопок.
Рисунок 8.8 - Изменение свойств объекта Дата
10. Перейдите в режим Переходы и переименуйте веб-страницу Увлечения в Интересы. Для переименования веб-страницы, указав страницу, выберите в контекстном меню команду Переименовать и введите новое название страницы.
11. Для проверки действия гиперссылки на кнопке щелкните на ней мышью при нажатой клавише Ctrl. В окне редактора FrontPage раскроется веб-страница, на которую передает управление ссылка с данной кнопки.
12. Для просмотра вида веб-страницы в web-обозревателе щелкните на значке Просмотр. Щелкнув на значке Код, вы можете посмотреть, как записан текст данной веб-страницы на языке HTML. Обратите внимание, что текст этой страницы в формате HTML значительно лаконичнее, чем текст аналогичной страницы, сгенерированный в среде Microsoft Word.
13. Для оценки вида созданной вами веб-страницы в других веб-обозревателях выберите в меню Файл команду Просмотр в обозревателе. В выпадающем списке выберите обозреватель Microsoft Internet Explorer 6.0 (800 x 600).
14. В окне обозревателя проверьте действие гиперссылок, правильность отображения текста и графических элементов страницы. По окончании просмотра закройте окно обозревателя стандартным способом.
15. Завершив формирование веб-страницы, сохраните ее. Для сохранения веб-страницы выберите в меню Файл команду Сохранить или Сохранить как, если хотите изменить имя файла.
Контрольные вопросы:
Что такое web-страница, чем она отличается от обычной страницы текста?
Что такое web-узел?
Опишите назначение web-сервера.
Что такое стартовая страница web-сайта?
Опишите назначение web-обозревателя.
Опишите этапы разработки web-сайта.
В каких режимах можно работать с web-страницей в редакторе FrontPage? Как переключить эти режимы?
Какие возможности предоставляются панелью инструментов Навигация в Front Page?
Что такое web-дизайн? Каковы основные рекомендации по web-дизайну сайта?
- Лабораторная работа №1 Тема: Текстовое оформление страниц
- Заголовок
- Лабораторная работа №2 Тема: Создание гипертекстовых ссылок
- 5. Ссылка на новое окно
- Лабораторная работа №3 Тема: Создание списков. Нумерованные списки
- Лабораторная работа № 4 Тема: Создание таблиц
- Лабораторная работа №5 Тема: Создание фреймов
- Лабораторная работа № 6
- Тема: Создание Web-сайтов средствами ms Office.
- Цель работы: Научиться создавать Web-сайт средствами ms Office: ms Word, ms Excel, ms PowerPoint.
- Разработка Web-сайта средствами ms Word.
- Разработка Web-сайта средствами ms Excel
- Создание Web-страниц средствами PowerPoint
- Лабораторная работа № 7 Тема: Создание web-страницы
- Лабораторная работа №8 Тема: Использование Microsoft FrontPage для редактирования web-узла
- Лабораторная работа № 9 Тема: Регистрация web-сайта, его публикация в сети Интернет, регистрация в поисковых системах