(Microsoft FrontPage 2003 - это обширная прикладная программа

1
Лабораторная работа №6. Основы работы в Microsoft FrontPage
Microsoft FrontPage 2000 - это обширная прикладная программа (приложение MS
Office 2000), которую можно использовать для разработки веб-узлов (сайтов, страниц).
Используя FrontPage, вы сможете легко создавать интересные Web-сайты с хорошим
дизайном и сложными элементами, не вводя ни одной строки программных кодов языка
HTML (Hypertext Markup Language). Но если у вас есть определенный опыт
программирования
на
языке
HTML,
то
программа
FrontPage
позволяет
легко
осуществлять доступ к соответствующим кодам на языке HTML, которые она
автоматически создает в процессе работы.
Для запуска FrontPage в меню Пуск выберите Программы – Microsoft Front Page.
При первом открытии программы Вы увидите в окне просмотра и редактирования
страниц файл новой страницы с именем new_1.htm.
В процессе работы с FrontPage вы создаете группу взаимосвязанных файлов,
которые совместно образуют узел (сайт), построенный на основе FrontPage. Вебстраницы – это элементы, образующие структуру любого узла. Разрабатывая узел, Вы
работаете с отдельными страницами и с общей структурой узла. Если Вам нужно
отредактировать одну страницу FrontPage, то Вы сначала открываете узел и затем
открываете нужную Вам страницу.
Различные режимы просмотра веб-узла
Слева в рабочей области FrontPage расположены шесть кнопок для переключения
между различными режимами представления веб-узла.
■ В режиме просмотра Page (Страница) Вы можете видеть и изменять содержимое данной
открытой страницы. В режиме просмотра Page (Страница) можно просматривать вебстраницу четырьмя разными способами.
1. Панель Нормальный показывает веб-страницу так, как она выглядит в веб-браузере.
Создание веб-страницы вы начинаете с работы именно в этом представлении.
Дополнительно отображаются такие вспомогательные элементы, как линии общих фреймов (shared borders), границы таблиц и ячеек.
2.
Панель HTML показывает HTML-код веб-страницы. Элементы кода выделяются
разными цветами, чтобы вам было легче различать текст и содержимое. Каждая строка
кода пронумерована. Сообщения об ошибках часто ссылаются на номера строк HTMLкода, что позволяет быстро отыскать место расположения этих ошибок.
3.
Панель Просмотр показывает веб-страницу так, как она на самом деле будет
выглядеть в окне веб-браузера. В этом режиме работают гиперссылки и большинство
элементов страницы.
2
Большая часть пользователей программы FrontPage будет выполнять основную
работу по проектированию своих веб-страниц в панели Нормальный, интерфейс которой
достаточно прост.
■ В режиме просмотра Folders (Папки) отображаются видимые файлы и папки, которые
являются составной частью открытого узла. В этом режиме для каждого файла
указывается имя файла, заголовок страницы, размер и тип файла, когда и кем в
последний раз модифицирован файл, а также другие комментарии, добавленные к
информации о файле.
■ В
режиме
просмотра
Reports
(Отчеты)
отображается
любой
из
31
отчетов об открытом узле. По умолчанию отображается последний открытый отчет.
Если в текущем сеансе FrontPage не открыто других отчетов, то по умолчанию
выводится отчет Site Summary (Сводка по узлу), где объединены результаты всех
отчетов. Для просмотра одного из этих отчетов щелкните на имени-гиперссылке отчета
или выберите отчет в меню View (Вид) или в панели отчетов.
■ В режиме просмотра Navigation (Навигация) отображается в графическом виде
иерархическое
(древовидное)
представление
всех
файлов,
включенных
в
навигационную структуру открытого узла. Чтобы добавить какой-либо файл к
навигационной структуре, нужно просто перетащить этот файл в окно Navigation
(Навигация) и поместить его в нужном месте. Чтобы уместить содержимое узла в этом
окне, вы можете переключаться между режимом Portrait (Книжная) и Landscape
(Альбомная) или использовать кнопки увеличения или уменьшения масштаба на
панели инструментов переходов.
■ В режиме просмотра Hyperlinks (Гиперссылки) представлены гиперссылки на
выбранную страницу и из выбранной страницы открытого узла. Показаны как
внутренние, так и внешние гиперссылки, а также гиперссылки на электронную почту.
Для просмотра гиперссылок на файл и из файла нужно выбрать этот файл в списке
папок и затем щелкнуть на знаке «плюс» рядом с именем файла для дальнейшего
раскрытия этого представления.
■ В режиме просмотра Tasks (Задачи) выводится список задач, которые должны быть
выполнены в открытом узле. Вы можете также создавать собственные задачи. Для
каждой задачи выводятся ее состояние, имя и описание. Указывается также, кому
назначена эта задача, какой приоритет присвоен задаче — High (Высокий),
Medium (Средний) или Low (Низкий), и когда в последний раз модифицировалась
данная задача. Задачи являются полезным средством отслеживания степени готовности
узла.
3
Для перехода к нужному режиму просмотра нужно щелкнуть на этом режиме в
меню View (Вид) или на кнопках слева в рабочей области.
Создание Web-узла с помощью шаблона
Самый простой способ создания нового узла — это использование одного из
шаблонов FrontPage. Шаблоны позволяют создать макет определенного типа вебстраницы или узла, обозначая с помощью заполнителей рамки, в которые Вы должны
поместить определенную информацию, после чего вы получаете готовую страницу или
узел.
Для создания узла с помощью шаблона нужно просто выбрать этот шаблон и указать
место, где должен быть создан узел. Для создания простого одностраничного узла
выполните следующее:
1. запустите MS FrontPage
2. в меню Файл выберите пункт Нов. (New) и затем пункт Сайт. Ваш экран будет
выглядеть так, как показано на рисунке:
3. в диалоговом окне шаблонов веб-узлов щелкните на значке One Page Web
(одностраничный Web-узел).
4. в окне Указать место нового сайта введите с клавиатуры адрес для создания
одностраничного узла (D:\work\аспиранты\фамилия\сайт) и нажмите Ok. Через
несколько минут программа Front Page отобразит структуру созданного одностраничного
узла.
Задание для самостоятельного выполнения:
Создайте личный Web-узел с помощью шаблона Personal Web.
Удаление веб-узла
Начиная
создавать
узлы
с
помощью
FrontPage,
Вы
захотите,
возможно,
4
поэкспериментировать и в результате на Вашем жестком диске, скорее всего, появятся
ненужные веб-узлы. Удалять веб-узлы Вы должны в программе FrontPage.
1. Откройте веб-узел, который необходимо удалить.
2. В списке папок щелкните правой кнопкой на папке верхнего уровня этого узла и в
контекстном меню выберите пункт Delete (Удалить), чтобы открыть диалоговое окно
Confirm Delete (Подтвердить удаление).
3. Выберите вариант Delete this Web entirely (Полностью удалить веб-узел) и
щелкните на кнопке ОК, чтобы удалить узел. Узел будет удален, и панель списка папок
будет закрыта, поскольку представленное на экране содержимое уже не существует.
Задание для самостоятельного выполнения:
Удалите два веб-узла, которые Вы создали с помощью шаблонов в начале работы.
Создание нового веб-узла
Самый лучший способ изучения того, как строится «сложный» веб-узел, — это
формирование веб-узла страница за страницей, элемент за элементом. Вы должны создать
«каркас», с помощью которого будете строить новый веб-узел на основе FrontPage. Взяв
за основу пустой веб-узел, к нему можно затем добавлять страницы и связывать их
требуемым способом. Для создания базовой структуры веб-узла выполните следующее:
1. запустите программу FrontPage 2000.
2. укажите в меню File (Файл) пункт New (Нов.) и пункт Сайт.
3. Выполните один щелчок мышью на значке Empty Web (Пустой сайт).
4. В окне Указать место нового сайта введите с клавиатуры адрес для создания
Вашего личного веб-сайта (D:\work\аспиранты\фамилия\личный сайт) и ОК.
Через несколько секунд FrontPage отобразит структуру только что созданного
пустого веб-узла. Новый веб-узел будет представлен двумя пустыми папками -_private и
images.
Задание для самостоятельного выполнения:
На диске D\Work\аспиранты в папке под Вашей фамилией создайте новый узел с
именем Личный сайт.
5
Добавление новой веб-страницы
Добавлять страницы к веб-узлу необходимо следующим образом:
1. Если необходимо откройте требуемый узел: в меню File (Файл) щелкните на
пункте Open Site (Открыть сайт).
В диалоговом окне Open Site (Открытие сайта) перейдите на папку, содержащую
узел. Выполните двойной щелчок на веб-узле, а затем щелкните на кнопке Open
(Открыть).
3. На стандартной панели инструментов щелкните на кнопке
Нов. страница
(Create a new normal page). Появится новая пустая страница с именем new_2.htm, причем
точка ввода будет помещена вверху страницы. Эта страница пока не представлена в
панели Folder List (Список папок), поскольку еще не сохранена как часть веб-узла.
4. Введите в окне редактора: «Добро пожаловать на личный сайт!» После начала
ввода рядом с именем файла на вкладке страницы появится символ «звездочка». Символ
«звездочка» указывает, что файл изменился с момента его последнего сохранения (в
данном случае файл еще ни разу не сохранялся).
5. В меню File (Файл) выберите пункт Save As (Сохранить как), чтобы открыть
диалоговое окно Save As. В раскрывающемся списке Save in (Сохранить в) уже выделен
Ваш веб-узел.
Первой и обязательной страницей для любого веб-узла является домашняя страница.
Эта страница появляется первой на экране посетителя, если он ввел URL-адрес данного
узла. Файл домашней страницы обязательно должен быть назван index.htm. Поскольку в
папке этого веб-узла еще нет домашней страницы, FrontPage предлагает для файла домашней страницы имя index.htm. Если необходимо введите в окне File name имя созданной
страницы index.htm.
Каждая страница веб-узла находится в собственном файле. По мере создания вебузла Вы будете сразу получать информацию о его структуре и сможете легко определять
страницы по имени их файлов. Однако посетителям веб-узла желательно, чтобы страницы
имели интуитивно понятные имена, и для этого используются заголовки страниц.
Заголовок страницы — это текст, который будет представлен посетителям в
линейке состояния, когда эта страница откроется в их браузере. Заголовок страницы не
обязательно совпадает с именем соответствующего файла.
Предлагаемый заголовок страницы, «Добро пожаловать на личный сайт», вполне
подходит для домашней страницы, поэтому можно оставить его без изменений.
6. Подтвердите согласие с предложенными параметрами, щелкнув на кнопке Save
(Сохранить). FrontPage сохранит этот файл как составную часть Вашего веб-узла, после
6
чего он будет представлен в панели Folder List (Список папок). Имени файла будет
предшествовать значок домашней страницы.
Задание для самостоятельного выполнения:
Создайте титульную страницу и сохраните ее как домашнюю страницу веб-узла Мой
личный сайт.
Настройка свойств страницы
Для установки свойств страницы, выберите команду Page Properties (Свойства
страницы) в меню File или в контекстном меню, появляющиеся после щелчка правой
кнопкой мыши. В диалоговом окне Page Properties, состоящем из 6 закладок (см. рис. 2),
помимо общей информации, типа названия страницы, устанавливаются такие параметры,
как фоновый рисунок и фоновый звук, цвет фона, стандартные цвета текста и
гиперссылок, поля страницы, а также некоторые переменные. Для редактирования
свойств, страница должна быть открыта в редакторе Подробно разберем каждый из
параметров:
1. закладка General (Основные свойства) показана на рис. 2
Рис. 2. Диалоговое окно Page Properties, вкладка General.
В текстовом поле Title (Название) можно ввести или отредактировать название
страницы;
поле
Base
Location
(Основное
место)
предназначено
для
задания
необязательного базового URL страницы. В секции Background Sound (Фоновый звук)
можно задать и изменить свойства фонового звука.
2. закладка Background (Фон), вид которой приведен на рис. 3, задает параметры
фона и цвета различных ссылок.
7
Рис. 3. Диалоговое окно Page Properties, вкладка Background.
В секции Форматирование Вашему вниманию предлагаются следующие опции:
- Фоновый рисунок. Установив этот флажок, вы можете выбрать изображение,
которым будет заполнен фон вашей страницы. Браузеры автоматически размножают этот
рисунок, выкладывая им, как плиткой, задний план страницы.
- Водяной знак. Фоновый рисунок, который при прокручивании страницы остается
неподвижен. Чтобы сделать фоновый рисунок статичным, установите флажок Водяной
знак , затем нажмите кнопку Обзор и выберите нужный файл.
- Фон. Если вы не используете фоновых рисунков, то имейте в виду возможность
изменения цвета фона страницы; чтобы задать цвет фона, отличный от установленного по
умолчанию, выберите нужный цвет в раскрывающемся списке Background. Выбирая цвет
фона, удостоверьтесь, что текст и изображения будут хорошо на нем смотреться.
- Текст. Чтобы задать цвет, в который по умолчанию будет окрашен текст на вашей
странице, воспользуйтесь раскрывающимся списком Текст. Стандартным является черный
цвет, однако не бойтесь экспериментировать с любыми цветами, которые будут хорошо
восприниматься на выбранном Вами фоне.
- Гиперссылка. В этом списке выберите цвет, которым будут выделены на странице
все еще не посещенные гиперссылки.
- Посещенная ссылка. После перехода по гиперссылке она изменит свой цвет на
заданный этим параметром. Чтобы задать цвет посещенных ссылок, выберите его в
раскрывающемся списке Посещенная ссылка. По умолчанию обычным цветом ссылок
является синий (Blue), а для посещенных ссылок установлен фиолетовый (Purple).
- Активная ссылка. Активной гиперссылка становится при нажатии на нее; чтобы
выбрать цвет, в который будут окрашены активные ссылки, воспользуйтесь списком
8
Активная ссылка.
В разделе Получить фоновую информацию из другой страницы на закладке Фон
окна Свойства страницы Вы можете указать, что на данной странице следует
использовать такой же набор вышеперечисленных параметров (цвет фона, рисунок, цвета
текста и ссылок), как на некоторой другой странице. Установите переключатель на эту
опцию и выберите подходящую страницу текущего сайта, нажав кнопку Обзор. Если у вас
уже есть нужным образом оформленная страница, то вы сэкономите время на повторной
установке тех же самых значений для текущей страницы.
Команда Получить фоновую информацию из другой страницы (Get Background
and Colors from Page) является замечательным средством для создания "стилевых
страниц". Если, например, вы вносите изменения в подкладку и набор цветов стилевой
страницы, то эти изменения будут отражены на всех использующих ее страницах.
3. Чтобы задать верхнее и/или левое поля страницы, перейдите на вкладку Margins
(Поля), установите соответствующий флажок и введите в текстовом поле нужное
значение (в пикселах). Если вы захотите прижать текст или изображение к самому краю
окна браузера, установите значения полей равными нулю.
4. на закладке Custom (Пользовательский) Вы увидите список используемых на
вашей странице метапеременных (meta tags), которые находятся в коде HTML страницы и
содержат информацию о странице, такую как тип содержимого, набор символов, название
приложения сгенерировавшего код и т. п. Они никогда ни в каком виде не отображаются,
но для тех браузеров, которые способны их распознать, они несут полезную информацию.
На
этой
закладке
можно
добавлять,
удалять
и
редактировать
системные
и
пользовательские метапеременные.
5. закладка Язык диалогового окна Page Properties предназначена для задания
кодировки символов страниц HTML; эта операция необходима при создании Web-страниц
на языках, отличных от английского.
Задание для самостоятельного выполнения:
Выберите графические файлы для фона страниц сайта и поместите указанные файлы
в папку Images Вашего узла. Задайте настройки Вашей домашней страницы (фон, цвет
шрифта, оформление) узла Мой личный сайт.
Вставка и редактирование текста
Вы можете вводить новый текст на странице путем его непосредственного набора и
оформления, используя стандартные функции пакета MS Office. Также FrontPage
позволяет очень просто копировать и вставлять текст через буфер обмена.
9
Предварительный просмотр
Будем считать, что Вы работаете над своим сайтом off-line, без подключения к
серверу. Время от времени вам хочется посмотреть, как ваша страница будет выглядеть в
реальности. Переключитесь в режим предварительного просмотра (Preview view); для
этого надо просто перейти на вкладку Preview (Просмотр) внизу редактора FrontPage.
Вкладка Preview (Просмотр) очень удобна для просмотра сайта при отсутствии
соединения с Internet, но чтобы увидеть сайт в реальных условиях, в особенности для
тестирования, его необходимо смотреть в браузере, подключенном к Internet.