- •Создание web-страниц в программе Microsoft FrontPage 2002 Учебно-методическое пособие
- •Введение
- •Глава 1. Введение в программу FrontPage
- •1.1. Запуск FrontPage
- •1.2. Главное окно программы
- •1.3. Открытие Web-узла
- •1.4. Открытие Web-страницы
- •1.5. Панели Список папок и Область переходов
- •1.6. Режимы просмотра и редактирования Web-страницы
- •1.7. Режим просмотра структуры папок
- •1.8. Режим Переходы
- •1.9. Режим Гиперссылки
- •1.10. Режим формирования и просмотра отчетов
- •1.11. Режим формирования и просмотра задач
- •1.12. Выход из программы FrontPage
- •Глава 2. Создание Web-узла с помощью мастеров и шаб-
- •2.1. Мастера создания Web-узлов
- •2.2. Шаблоны для создания Web-узлов
- •2.3. Шаблон создания одностраничного Web-узла
- •2.4. Шаблон создания пустого Web-узла
- •Images.
- •Страничный веб-узел
- •2.5. Шаблоны и мастера для создания Web-страниц
- •Глава 3. Размещение на Web-странице текста и заголовков
- •3.1. Форматирование текста на странице
- •3.2. Создание таблиц
- •Глава 4. Оформление одностраничного Web-узла
- •4.1. Размещение горизонтальных линий
- •4.2. Размещение даты
- •4.3. Создание общих областей
- •4.4. Просмотр результатов работы в обозревателе
- •Глава 5. Использование изображений, звука и видео для оформления Web-страницы
- •5.1. Фон страницы
- •5.2. Размещение графических изображений
- •5.3. Настройка свойств изображения
- •5.4. Редактирование изображений
- •5.5. Автоэскизы
- •5.6. Задание фонового звука страницы
- •5.7. Размещение видеозаписи
- •5.8. Использование тем в оформлении страницы
- •Глава 6. Создание текстовых и графических гиперссылок
- •6.1. Добавление в Web-узел новой страницы
- •6.2. Гиперссылки
- •6.3. Закладки
- •6.4. Создание графических ссылок
- •6.5. Режим просмотра гиперссылок Web-узла
- •6.6. Режим переходов Web-узла
- •6.7. Панель ссылок
- •Создание панели ссылок
- •6.8. Использование общих областей при создании панелей ссылок
- •Го уровня иерархии
- •Глава 7. Использование документов Microsoft Office при создании Web-страниц
- •7.1. Использование буфера обмена Windows
- •7.2. Размещение на Web-странице диаграммы Microsoft
- •7.3. Размещение файлов других форматов
- •7.4. Импорт файлов без преобразования формата
- •7.5. Сохранение документов Microsoft Office в html-
- •Глава 8. Использование сложных элементов при оформле-
- •8.1. Использование эффектов динамического html
- •8.2. Бегущая строка
- •8.3. Меняющиеся кнопки
- •8.4. Анимация на Web-страницах. Эффекты dhtml
- •8.5. Использование анимации при смене страниц
- •Гового окна Свойства страницы
- •8.6. Сворачивающиеся списки
- •8.7. Объявление на странице
- •Глава 9. Использование фреймов и стилей при создании
- •9.1. Шаблоны фреймов
- •9.2. Создание фрейма
- •9.3. Режимы просмотра фрейма
- •9.4. Свойства фреймов
- •9.5. Стили
- •9.6. Создание внешней таблицы стилей
- •9.7. Использование внешней таблицы стилей
- •9.8. Формы
- •Глава 10. Использование компонентов при создании Web-
- •10.1. Использование подстановок
- •Заключение
- •Контрольные вопросы
- •Задание на лабораторную работу «Создание web-узлов при по-
- •Глава 2. Создание Web-узла с помощью мастеров и шаблонов ..... 18
- •Глава 3. Размещение на Web-странице текста, заголовков и
- •Глава 4. Оформление одностраничного Web-узла ........................... 31
- •Глава 5. Использование изображений, звука и видео для
- •Глава 6. Создание текстовых и графических гиперссылоки ........... 52
- •Глава 7. Использование документов Microsoft Office при
- •Глава 8. Использование сложных элементов при оформлении
- •Глава 9. Использование фреймов и стилей при создании
- •Глава 10. Использование компонентов при создании
- •650043, Кемерово, ул. Красная, 6.
- •650043, Кемерово, ул. Ермака, 7.
9.5. Стили
Для форматирования на Web-страницах текста (задание шрифта, цвета, интервала между строками, отступа для абзаца, вы- равнивания, величины полей) мы использовали панель инструмен-
тов Форматирование и команды меню Формат. Помимо этого,
для форматирования можно использовать как стили, поставляемые с программой FrontPage, так и стили, созданные разработчиком.
Для хранения стилей в программе FrontPage используется таб- лица стилей Cascading Style Sheets (Каскадная таблица стилей), сокращенно CSS. В программе FrontPage имеются три вида стилей:
• External Style Sheet — внешняя таблица стилей. Данная таб- лица стилей хранится в файле с расширением CSS. Она может быть связана со всеми страницами Web-узла
• Embedded Style Sheet — внутренняя таблица стилей. Эта таб- лица стилей включается в код HTML-страницы и может быть связана с одной страницей
• Inline Style — встроенный стиль. Применяется к отдельным элементам Web-страницы
9.6. Создание внешней таблицы стилей
Внешняя таблица стилей CSS, создаваемая программой FrontPage, может быть связана с отдельными страницами Web-узла или со всеми сразу. После этого форматирование элементов, раз- мешенных на Web-странице, будет определяться в соответствии со значениями, содержащимися в этой таблице.
Для создания внешней таблицы стилей Web-узла выполните следующие действия:
1. Откройте Web-узел, для которого хотите создать таблицу стилей CSS.
2. На панели Список папок выберите самую верхнюю папку,
содержащую название узла.
3. В меню Файл выберите команду Создать, а затем из от-
крывшегося подменю — опцию Страница или веб-узел.
4. На появившейся панели Создание веб-страницы или узла
выберите команду Шаблоны страниц.
5. Открывается диалоговое окно Шаблоны страниц, в кото- ром перейдите на вкладку Таблицы стилей. Она содержит шабло- ны стилей, предлагаемые программой FrontPage.
6. Выберите один из предлагаемых шаблонов и нажмите кнопку ОК.
7. Диалоговое окно Шаблоны страниц закрывается, а в Web-
узел добавляется страница, имеющая расширение CSS (рис. 9.8). Посмотрите ее содержимое. Она содержит описание стилей, кото- рые будут использоваться для форматирования содержимого стра- ниц: сначала идет название элемента Web-страницы, а за ним в скобках — параметр форматирования. На этой странице последова- тельно описаны все элементы, встречающиеся в Web-узле и подле- жащие форматированию — фон страницы, ссылки, заголовки, текст, таблицы, а также используемые в их оформлении цвета, шрифты и т. п.
8. Сохраните страницу в Web-узле, воспользовавшись кнопкой
Сохранить на стандартной панели инструментов.
9. В открывшемся диалоговом окне Сохранить как в поле Имя файла введите имя файла (например, styles), и нажмите кноп- ку Сохранить.
Посмотрите на панель Список папок. Там появился файл
styles.ess, представляющий собой таблицу стилей.
9.7. Использование внешней таблицы стилей
Для того чтобы таблицу можно было использовать, ее необхо-
димо связать со страницами Web-узла. Для этого выполните сле-
дующие действия:
1. Откройте Web-узел, содержащий созданную нами внешнюю таблицу стилей.
лей.
2. В меню Формат выберите команду Ссылки таблицы сти-
3. Открывается диалоговое окно Связать с таблицей стилей
(рис. 9.9). В его верхней части расположены две опции:
• все страницы;
• выделенные страницы — связывает таблицу стилей с вы-
бранной страницей.
Чтобы связать созданную таблицу стилей со всеми страница-
ми, установите опцию все страницы.
4. Для указания названия таблицы стилей, с которой необхо-
димо связать страницы Web-узла, нажмите кнопку Добавить.
Рис. 9.9. Диалоговое окно Связать с таблицей стилей
5. В открывшемся диалоговом окне Выбор таблицы стилей выберите созданную таблицу стилей. В нашем примере это файл styles.css. Имя файла переносится в поле Адрес URL.
6. Нажмите кнопку ОК.
7. Вы возвращаетесь в диалоговое окно Связать с таблицей стилей. Имя таблицы CSS размещено в списке под опциями.
8. Нажмите кнопку ОК для закрытия окна. Посмотрите на страницы Web-узла, с которыми связана таблица CSS. Ко всем эле-
ментам Web-страниц применено форматирование в соответствии со значениями таблицы стилей.
Откройте любую страницу Web-узла, с которой связана таб-
лица стилей, в режиме просмотра HTML кодов. Среди кодов Web- страницы вы обязательно найдете строку приблизительно следую- щего вида: <link rel="stylesheet" type="text/css" href="styles.css">. В ней указано наименование таблицы CSS, с которой связана данная страница.