Урок 1 создание веб-страниц

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

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

 

Темы этого урока:

         Открытие программы FrontPage

         Создание веб-страниц

         Работа с текстом и гиперссылками

         Вставка рисунков и файлов

 

 

Запуск программы Microsoft FrontPage


Чтобы запустить программу Microsoft FrontPage, выполните следующие действия.

         На панели задач Windows нажмите кнопку Пуск , выберите в главном меню пункт Программы, а затем пункт Microsoft FrontPage.

Если программа FrontPage используется в первый раз, на экран выводится пустая страница, готовая для редактирования.

Примечания

         Если программа FrontPage уже использовалась для редактирования других веб-узлов, автоматически открывается последний из них.

         Чтобы закрыть веб-узел, в меню Файл выберите команду Закрыть.

 

Обзор рабочей области

Программа FrontPage 2002 обладает интегрированным интерфейсом, удобным для создания и редактирования веб-страниц, а также для управления веб-узлами из одного приложения. Панели инструментов и меню совместимы с другими программами Microsoft Office XP и являются полностью настраиваемыми. Удобные сочетания клавиш позволяют ускорить выполнение часто встречающихся задач, таких как открытие веб-узлов и веб-страниц, печать и многие другие команды.

В представленной далее таблице и на иллюстрации выделены наиболее часто используемые элементы интерфейса программы FrontPage 2002.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Элемент

Описание

Вкладка страницы

Удобное средство выбора нужной страницы при наличии нескольких открытых страниц.

Строка заголовка

Отображение имени текущей страницы, а также ее расположения на веб-узле.

Строка меню

Содержит меню, такие как Файл, Правка, Вид и Вставка, и является отправным пунктом при выполнении многих задач в программе FrontPage.

Поле Задать вопрос

Применяется для поиска дополнительных сведений о процедурах в программе FrontPage. В поле Задать вопрос вводится вопрос, для ответа на который используется справочная система.

Кнопка Закрыть

Эта кнопка используется для закрытия отображаемой страницы.

Полосы прокрутки

Позволяют перемещаться по странице и просматривать ее по частям.

Строка состояния

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

Переключатель представлений страницы

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

Индикатор выполнения

Показывает состояние текущего действия.

Ожидаемое время загрузки

Указывает время, необходимое для загрузки веб-страницы пользователем для просмотра в веб-обозревателе.

Область задач

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

Панели инструментов Стандартная и Форматирование

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

Панель представлений

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

 

 



Совет. Рабочую область можно настраивать, выводя на экран дополнительные панели инструментов или изменяя кнопки этих панелей. В меню Вид выберите пункт Панели инструментов, а затем выберите панели инструментов, которые необходимо отобразить. Чтобы добавить или удалить кнопку с панели инструментов, нажмите кнопку Настройка.

 

Создание домашней страницы

 

Посещение веб-узла начинается с домашней страницы. Эта страница содержит сведения о содержании и теме веб-узла и предназначена для привлечения внимания его посетителей. Домашняя страница содержит также ссылки на другие страницы веб-узла.

 

1.      На пустой странице в представлении Страница введите фразу Добро пожаловать в магазин Championzone! и нажмите клавишу ENTER.

Как и при работе с текстовым редактором, при нажатии клавиши ENTER курсор переходит на новую строку.

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

3.        Нажмите клавишу ENTER.

 

Большая часть содержимого веб-узла магазина Championzone уже создана. При создании веб-узла в программе FrontPage можно импортировать любые существующие документы непосредственно на веб-страницу, что позволяет избежать их повторного ввода.

Страница должна выглядеть следующим образом:

 

 

 

 

 

 

 

 


 

 

 

 

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

В данном примере вставляется картинка с изображением эмблемы FrontPage.

 


 

 

Вставка графического объекта на домашнюю страницу

 

1.        В меню Вставка выберите пункт Рисунок, а затем команду Из файла.

В программе FrontPage появится диалоговое окно Рисунок.

Примечание. Файл, содержащий рисунок, который необходимо вставить, расположен в папке учебника FPTutor2002, установленного вместе с файлами программы FrontPage.

2.      В поле Папка выберите жесткий диск G, на котором установлен учебник.

3.      Найдите папку FPTutor2002.

4.      В папке FPTutor2002 находятся несколько файлов. При вставке рисунка в программе FrontPage по умолчанию выполняется поиск файлов рисунков.

5.      Выберите файл frontpage.gif и нажмите кнопку Вставить.

6.      Выбранный файл рисунка будет вставлен на текущую страницу. Этот рисунок представляет собой графический объект, который посетители веб-узла смогут щелкнуть и получить дополнительные сведения о программе FrontPage 2002.

7.        Нажмите кнопку ENTER, чтобы создать новую строку.

Страница должна выглядеть следующим образом:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

Гиперссылка является указателем для перехода от текста или рисунка к другой странице или файлу в Интернете или интрасети. В Интернете гиперссылки являются основным средством перехода на другие веб-страницы или веб-узлы.

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

 

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

 

1. На домашней странице щелкните вставленный ранее рисунок кнопки с эмблемой      FrontPage 2002.

 

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

Примечание. Если панель инструментов Рисунки автоматически не отображается, в меню Вид выберите пункт Панели инструментов, а затем пункт Рисунки.

2. В меню Вставка выберите команду Гиперссылка.
 

В программе FrontPage появится диалоговое окно Добавление гиперссылки. В этом окне необходимо указать адрес назначения создаваемой гиперссылки.

 

3. В поле Адрес введите адрес www.microsoft.com/frontpage.

 

Примечания

 

 

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

 

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

Проверить наличие связанной с рисунком гиперссылки нетрудно, если навести указатель мыши на рисунок. При наличии гиперссылки в программе FrontPage в строке состояния выводится адрес URL этой гиперссылки.

 

Далее в верхней части страницы необходимо вставить рисунок с эмблемой магазина Championzone.

 

 

Вставка рисунка на домашнюю страницу

 

  1. Используйте сочетание клавиш CTRL+HOME, чтобы быстро перейти в начало текущей страницы.

    Совет. Сочетание клавиш CTRL+HOME переводит курсор в исходную позицию (рядом с верхним левым полем текущей страницы).

 

  1. В меню Вставка выберите пункт Рисунок, а затем команду Из файла.

 

В программе FrontPage сразу же отображается содержимое папки FPTutor2002. В течение каждого сеанса работы в программе FrontPage запоминаются имена и расположение папок, к которым осуществлялся переход.

 

  1. Дважды щелкните файл czlogo.gif.

 

В программе FrontPage будет выполнена вставка рисунка на текущую страницу.

 

  1. Нажмите клавишу ENTER, чтобы переместить текст приветствия на следующую строку.

Страница должна выглядеть следующим образом

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Для завершения создания домашней страницы осталось расположить текст и рисунки по центру.

 

 

 

Расположение по центру элементов на странице

 

1.      В меню Правка выберите команду Выделить все.

 

В программе FrontPage будет выделено все содержимое текущей страницы.

 

2.      В меню Формат выберите пункт Абзац.

 

В программе FrontPage будет отображено диалоговое окно Абзац. В этом окне можно изменить выравнивание выделенных элементов, а также указать отступ и интервалы для текста и рисунков.

 

3. В списке Выравнивание выберите значение по центру, а затем нажмите кнопку ОК.

 

В программе FrontPage будет выполнено выравнивание текста и рисунков по центру домашней страницы.

 

4. Щелкните страницу в любом месте, чтобы отменить выделение всех элементов страницы

 

 

Сохранение текущей страницы

 

Потратив определенное время на выполнение ряда действий, полезно сохранить полученную веб-страницу.

 

  1. В меню Файл выберите команду Сохранить как.

     

В программе FrontPage появится диалоговое окно Сохранить как. В этом окне можно указать нужное расположение для текущей страницы, а также изменить название, имя файла и его тип.

 

  1. В диалоговом окне Сохранить как найдите папку Вашего класса.
     

 

  1. Нажмите кнопку Изменить рядом с полем Имя.

     

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

 

  1. В поле Название введите Домашняя страница и нажмите кнопку ОК.

     
  2. Измените текст в поле Имя файла на текст Домашняя страница, а затем нажмите кнопку Сохранить.

     

В программе FrontPage выполняется сохранение текущей страницы.

 

Параметры представления Страница

 

Работа по созданию домашней страницы осуществлялась монопольно в обычном представлении Страница, однако существуют три различных представления текущей страницы.

 

Отображение HTML-тегов на текущей странице

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

         В программе FrontPage на экран будет выведено графическое представление стандартных HTML-тегов.

         Данное представление удобно, если при создании веб-страниц нужно знать расположение HTML-тегов.

         Чтобы скрыть теги, еще раз выберите команду Показать теги в меню Вид.

 

Отображение HTML-кода текущей страницы

 

         В представлении Страница нажмите кнопку HTML-код, расположенную в нижней части страницы.

 

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

 

         Если требуется задать способ создания HTML-кода в программе FrontPage, в меню Сервис выберите пункт Параметры страницы и откройте вкладку Разметка текста HTML. Тем, кто недостаточно хорошо знаком с языком HTML, не рекомендуется вносить изменения в этом окне. Чтобы закрыть диалоговое окно Параметры страницы, нажмите кнопку Отмена.

 

         В нижней части страницы нажмите кнопку Обычный, чтобы вернуться в Обычный режим представления страницы.

 


Совет. При работе в режиме HTML-код можно использовать многие команды меню и кнопки панелей инструментов, так же как и при работе в режиме Обычный.

 

Предварительный просмотр текущей страницы

 

         Нажмите кнопку Просмотр в нижней части страницы.

 

Примечание. Если на компьютере не установлен обозреватель Microsoft Internet Explorer, вкладка Просмотр не отображается и просмотр страницы таким способом невозможен. Для получения дополнительных сведений см. раздел Подготовка к работе.

 

Режим представления страницы Просмотр удобен для просмотра расположения и внешнего вида определенных элементов, таких как анимации, видеозаписи, таблицы и списки, в том виде, как они выводятся в веб-обозревателе.

 

         В нижней части страницы нажмите кнопку Обычный, чтобы снова вернуться в Обычный режим представления страницы.

 

Хостинг от uCoz