поддержка
проекта:
разместите на своей странице нашу кнопку!И мы
разместим на нашей странице Вашу кнопку или ссылку. Заявку прислать на
e-mail
код нашей кнопки:
Копии рисунков были выполнены с плохим расширением, т.к. что не
обессудьте (как говорится моей вины здесь нет, вся ответственность лежит
на том кто сканировал), а я только, где мог ошибки исправил. В
дальнейшем, сделаю копии рисунков и диалоговых окон в хорошем
разрешении.
В предыдущих главах вы ознакомились с рядом приемов создания и
форматирования Web-страниц. Настоящая глава имеет ту же тематику, но в
ней освещены расширенные возможности редактирования, предлагаемые
Frontpage 2000, в частности:
• Применение существующих тем.
• Создание и использование таблицы стилей.
• Размещение текста вокруг объектов.
• Добавление анимационных эффектов с помощью Dynamic HTML.
Применение существующих тем
Имея опыт использования тем, предлагаемых в Frontpage, вы,
возможно, пришли к выводу, что несмотря на множество вариантов не так-то
просто выбрать интересующую и актуальную для вас тему. Вам
предоставляется возможность выбрать одну из тем, добавить к ней логотип
своей фирмы, изменить стили, цвета, рисунки, а затем сохранить данную
тему под определенным именем. Таким образом вы создаете свою собственную
тему. Изменение темы
Процесс создания новой темы вы начинаете с открытия существующей темы.
Затем вы изменяете ее и закрываете, чтобы потом вновь открыть с
внесенными вами изменениями.
1. Откройте Frontpage в любом режиме просмотра. Откройте меню Formatи выберите команду Theme. Появится диалоговое окно Themes, какпоказано на рис. 11.1.
2. Выбирая темы в списке, просмотрите их, отключив опции Vivid Colors(яркие цвета), Active Graphics (активная графика). Background
Picture(фоновый рисунок).
Рис. 11.1. Выбор существующей темы для изменения
Примечание
Если вы не можете найти нужную тему, то выберите в списке пункт InstallAdditional Themes (установить дополнительные темы) и
инсталлируйтенедостающие темы с компакт-диска
с Microsoft Office или Frontpage 2000.
3. Выберите тему, которую вам хотелось бы изменить, например Blank.
4. Нажмите на кнопку Modify. Появится дополнительный набор кнопок,как показано ниже, что позволит вам изменять цвета, рисунки и
стилитекста в выбранной теме, а потом
сохранить тему под новым именем.
Изменение цветовой палитры в теме
Цвета в теме распространяются на все части Web-страницы, включаяфон, заголовки, гиперссылки, текстовые баннеры, области таблицы.
Изменить цвета можно следующим образом:
1. Нажмите на кнопку Colors. Откроется диалоговое окно Modify Theme(изменить тему), показанное на рис. 11.2. Вам предложат три
способаустановки цветов, используемых в теме:
готовую схему цветов, "цветовоеколесо" и
пользовательские цвета.
Рис. 11.2. Выбор или создание схемы цветов
2. Выберите вкладку Color Schemes (схема цветов), выберите в списке темус определенной цветовой палитрой и затем прокрутите окно
предварительного просмотра Sample Of Theme (образец темы) для того,
чтобыувидеть, как установлены цвета.
3. Выберите вкладку Color Wheel (цветовое колесо). Перетащите маленькийкружок в колесе цветов для того, чтобы увидеть, как изменяется
цветоваясхема. Переместите бегунок Brightness
(яркость) и проследите за возможными эффектами.
4. Выберите вкладку Custom. Просмотрите список Item, в котором
представлены названия элементов Web-страницы, цвета которых вы можетеизменить.
5. Выберите элемент Web-страницы, цвет которого вы хотите изменить, и вполе списка Color выберите необходимый цвет.
6. Открыв вкладку Color Schemes, вы увидите пользовательскую схему(Custom) с выбранными вами цветами.
7. Нажмите кнопку ОК для закрытия диалогового окна Modify Theme.
Изменение элементов темы
Изменению можно подвергнуть следующие элементы темы: фон, "шапку",
списки и кнопки. Далее выполните следующие действия:
1. Нажмите на кнопку Grafics. Снова появится диалоговое окно ModifyTheme, которое в данном случае позволит изменить внешнее
представление определенного графического элемента Web-страницы (рис.
11.3).
Рис. 11.3. Выбор рисунка и типа шрифта для элемента страницы
2. В диалоговом окне Modify Theme откройте поле списка Item, для того
чтобы просмотреть список элементов Web-страницы, которые можно изменить.
Он изображен ниже.
3. Выберите в списке Item элемент Web-страницы, который вы хотите
изменить. На вкладке Picture для выбранного элемента введите в поле
название выбранного вами рисунка (или с помощью кнопки Browse укажите
путь к нему).
Например, для элемента Horizontal Navigation предлагается три варианта
оформления (обычная кнопка, кнопка выбора — selected button,
анимированная кнопка).
Нажмите кнопку Browse и выберите новое графическое изображение для
выделенного элемента. Элементы данной темы находятся в папке \Темр\
FrontPageTempDir\Mstheme корневой папки Windows.
4. После того как вы изменили графические элементы страницы, выберите
вкладку Font. Здесь вы можете изменить шрифты, стили абзаца, размер, тип
выравнивания текстовых элементов, используемых совместно с графическими
объектами.
5. Выбрав все необходимое для страницы, графику и шрифты, нажмите кнопку
ОК для возврата в диалоговое окно Themes.
Присвоение теме различных стилей текста
Кнопка Graphics позволяет устанавливать шрифты, размеры текста,
начертания шрифтов (bold — жирный, italic — курсив) для текста в
графических элементах темы, таких как баннеры и кнопки. Кнопка Text
позволяет вам выполнять те же задачи в работе с основным текстом и
заголовками Web-страницы. Вы можете также создавать и изменять стили,
относящиеся к теме. Далее мы предлагаем ознакомиться с возможными
способами модификации текста.
1. Нажмите на кнопку Text. Откроется диалоговое окно Modify Theme. В
этом случае вы можете выбрать стиль основного текста страницы или один
из стилей заголовка, а затем выбрать необходимый шрифт.
Откройте поле списка Item. Вы увидите шесть видов заголовков и элемент
Body (все остальные типы текстового оформления страницы). Выберите
изменяемый вами стиль.
3. При выборе элемента Body в правой части окна (рис. 11.4) вы увидите
образец выбранного стиля основного текста Web-страницы Выбрав затем
шрифт в поле списка Font, вы сможете увидеть в правой части окна, как
этот шрифт будет выглядеть на Web-странице. Прежде чем применить
какой-либо шрифт, обратите внимание на плотность его символов.
Рис 11.4. Определение типа шрифта для элементов страницы
4. Выберите в поле списка элемент Body или один из заголовков и задайте
для него шрифт Аналогичные действия выполните для всех элементов текста.
Когда вы завершили выбор шрифтов, нажмите на кнопку More Text Styles
(другие стили текста). Появится диалоговое окно Style, изображенное на
рис. 11.5.
Рис 77.5. Подробное описание стилей
6. В поле списка List по умолчанию выбран пункт User-Defined Styles
(стили, определенные пользователем). Не изменяя эту установку, выберите
элемент Body в списке Styles. Появится описание стиля и его образец.
7. Нажмите на кнопку Modify для открытия диалогового окна Modify Style
Нажмите в нем кнопку Format и в появившемся меню выберите команду Font.
В диалоговом окне Font вы можете выбрать стиль шрифта, размер, цвет и
эффекты, необходимые для выбранного стиля По завершении закройте
последовательно диалоговые окна с помощью кнопок ОК
8. Повторите действия, описанные в пунктах 6 и 7, для всех стилей,
которые хотите изменить. По завершении нажмите кнопку ОК для закрытия
диалогового окна Style, затем снова нажмите ОК для закрытия диалогового
окна Modify Theme.
9. В диалоговом окне Themes щелкните на кнопке Save As Ведите имя новой
темы и нажмите кнопку ОК. Название новой темы появится в списке тем в
области Apply Theme To (применить тему для). Нажмите кнопку Cancel для
закрытия диалогового окна Themes.
10. Эту тему вы можете использовать в новых или существующих Web-узлах.
Для этого в меню Format активизируйте команду Theme Огкроется диалоговое
окно Themes. В поле Apply Theme To задайте опцию All Pages, затем
выберите вашу новую тему и нажмите ОК После создания Web-страницы вы
можете выбрать стиль, который хотите применить для определенных
элементов страницы, из поля списка стилей, находящегося в левой части
панели инструментов Formatting.
Создание и использование таблицы стилей
Таблицы стилей, называемые также каскадными таблицами стилей (cascading
style sheets — CSS), позволяют предварительно определить набор стилей
для дальнейшего оформления Web-узла. Применение таблиц стилей сведет к
минимуму ваши действия по оформлению узла, поскольку вы будете
оперировать готовыми труппами параметров. Как было сказано ранее, вы
можете использовать таблицу стилей в работе с темами. Вы также можете
определить собственную таблицу стилей и использовать ее для работы и
управления созданным вами Web-узлом.
Существует два вида таблиц стилей: внутренняя таблица стилей, которая
используется только для страницы, в которой она находится, и внешняя
таблица стилей, которая связана со страницами. Принцип работы таблиц
двух видов отличается друг от друга, но использование их идентично. Примечание
Ранние версии Web-броузеров (до Internet Explorer 3.0 и Netscape
Navigator 4.0) не поддерживали таблицы стилей, а форматирование страниц
с их помощью не полностью соответствовало замыслам автора Web-узла.
Существует два стандарта таблиц стилей: CSS 1.0 (форматирование) и CSS
2.0 (позизиционирование объектов). Internet Explorer 3.0 поддерживает
стандарт CSS 1.0, a Internet Explorer 4.0 и поздние версии, а также
Navigator 4.0 и его новые версии поддерживают CSS 1.0 и CSS 2.0.
Создание внутренней таблицы стилей
Внутренняя таблица стилей создается на странице, на которой
предполагается ее использование. Это можно сделать следующим образом: Примечание
Если команда Style меню Format недоступна, необходимо выполнить
следующие действия, чтобы доступ к ней был открыт: в меню Tools выбрать
команду Page Options, в загрузившемся диалоговом окне щелкнуть на
вкладке Compatibility (соответствие), затем активизировать опции CSS 1.0
и CSS 2.0, находящиеся в области Technologies, и закрыть окно
посредством кнопки ОК.
1. В режиме просмотра Page, откройте страницу, в которую вы хотите
включить таблицу стилей. Затем откройте меню Format и выберите
команду Style. Откроется диалоговое окно Style (рис. 11.5).
На рис. 11.5 изображен список Styles, содержащий стили, определенные
пользователем. Если вы в поле списка List выберете пункт User-Defined
Style, то увидите пустой список Style. Для конструирования таблицы
стилей вы можете выбрать либо тег HTML для добавления стиля, либо
создать на основе тега HTML свой стиль. Если вы выбрали тег HTML, то
стиль применяется автоматически (например, стиль Body автоматически
применяется на каждой Web-странице, в то время как тег <Н1> используется
с заголовком 1-го уровня). Стили, определяемые пользователем,
устанавливаются вручную.
Выберите элемент Body в списке Styles, а затем нажмите на кнопку Modify
для создания стиля основного текста страниц (можно просто два раза
щелкнуть на элементе Body). Откроется диалоговое окно Modify Style, в
котором демонстрируется стиль и дается его описание.
В меню кнопки Format выберите команду Font. Откроется диалоговое окно
Font, показанное на рис. 11.6. Выберите шрифт, стиль шрифта, размер,
цвет и необходимые эффекты. На вкладке Character Spacing вы можете
выбрать межсимвольный интервал в поле списка Spacing. В поле списка
Position определяется направление смещения текста относительно базовой
линии — вверх или вниз.
Рис 11.6. Выбор стиля, размера и цвета шрифта, а также необходимых
эффектов
4. Нажмите кнопку ОК для закрытия диалогового окна Font.
5. Возвратитесь в диалоговое окно Modify и выберите в меню кнопки Format
элемент Paragraph. Откроется диалоговое окно Paragraph, в котором вы
можете выбрать выравнивание абзаца, задать отступы и интервалы между
строками и словами.
6. Нажмите кнопку ОК для закрытия диалогового окна Paragraph. С помощью
команд меню кнопки Format вы можете получить доступ к диалоговым окнам
Borders and Shading, Bullets and Numbering и Position.
7. После того как вы вернулись в диалоговое окно Modify Style, нажмите
кнопку ОК для возврата в диалоговое окно Style. Нажав кнопку ОК в
диалоговом окне Style, вы сохраните изменненый стиль Body, находящийся в
списке User-Defined Styles.
8. Для того чтобы определить стили для других тегов (например, HI),
выберите пункт All HTML Tags из списка List, затем выберите тег HI в
списке Styles, нажмите кнопку Modify и повторите инструкции пунктов 3-7.
9. Для того чтобы установить свой стиль (например, Red HI — красный для
заголовка Heading 1), нажмите на кнопку New, введите имя .hi (red) и,
открыв меню кнопки Format, измените необходимые вам параметры в
соответствии с инструкциями пунктов 3—7.
10. После того как вы задали все стили, нажмите на кнопку ОКддя закрытия
диалогового окна Style, затем сохраните страницу и закройте Web-узел.
Чтобы увидеть список стилей, откройте поле списка Style слева на панели
инструментов Formatting. Вы увидите стандартные стили (Normal и Body) в
верхней части списка, а созданные вами ~ в нижней. Например, созданный
вами стиль .hi (red) будет присутствовать в нижней части списка Styles.
Создание внешних таблиц стилей
Внешняя таблица стилей имеет ряд преимуществ при использовании набора
стилей на Web-узле. При внесении изменений во внешнюю таблицу стилей вы
изменяете внешний вид всех страниц, связанных с этой таблицей.
Внешняя таблица стилей является более мощным инструментом, чем
внутренняя Ниже приведен способ создания внешней таблицы стилей
1. Выберите команду Page подменю New меню File В загрузившемся
диалоговом окне выберите вкладку Style Sheets (см рис 11.7.) Эта вкладка
позволяет вам либо создать свою таблицу стилей (Normal Style Sheet),
либо начать работу с готовыми таблицами стилей, которые также
используются в темах В любом случае вы можете добавлять новые стили и
изменять существующие стили в таблице стилей, с которой начали работать
Рис 11.7. Каскадные таблицы cmuieu
2.Выберите таблицу стилей Btuepnnt, чтобы начать работать с готовой
таблицей стилей В этой таблице для заголовков, гиперссылок и основного
текста используется шрифт Century Gothic
3. Нажмите на кнопку ОК В режяме просмотра Page откроется новая страница
(рис 11 8) Файл данной страницы имеет расширение CSS Обратите внимание,
что внизу окна cтpaницы нет вкладок Страницы такого типа редактируют-я
на уровне HTML-кода Вы можете изменять таблицу статей двумя способами
редактировать и добавлять изменения непосредственно в HTML-странице,
следуя правилам написания HTML, или использовать опцию Style в меню
Format либо в плавающей панели инструментов Style
4. Используйте полосу прокрутки, чтобы увидеть группу стилей заголовков,
а затем стили индивидуальных заголовков Группа определяет шрифты,
которые используются во всех заголовках, d цвет каждою стиля заголовка
задается индивидуально
Рис 11.8. Внешняя таблица стилей в режиме просмотра Page
5. Нажмите на кнопку Style одноименной панели Откроется диалоговое окно
со стилями, установленными пользователем (как показано ниже) Вы можете
самостоятельно добавить или изменить стили
6. После того как вы внесли дополнения и изменения, нажмите на кнопку
ОКдля закрытия диалогового окна Style. В Frontpage откройте меню File,
сохраните страницу с расширением CSS. Затем закройте Web-узел Если
бы вы использовали пустой шаблон Normal Style Sheet вместо готовой
таблицы, то открыли бы пустую страницу таблицы стилей, к которой могли
бы добавить собственные стили
Присоединение внешней таблицы стилей
Для того чтобы использовать внешнюю таблицу стилей на странице, страница
должна быть связана с таблицей стилей. При такой связи таблица стилей
будет выполнять функцию внутренней таблицы стилей. Выполнив следующие
инструкции, вы сможете связать внешнюю таблицу стилей со страницей:
1. В режиме просмотра Page откройте страницу, к которой вы хотите
применить внешнюю таблицу стилей. В меню Format выберите команду Style
Sheet Links. Откроется диалоговое окно Link Style Sheet.
2 Нажмите кнопку Add, чтобы добавить в список URL путь к внешней таблице
стилей. Откроется диалоговое окно Select Hyperlmk. Щелкните на кнопке
Select a File on Your Computer, в результате чего откроется диалоговое
окно Select File. Выберите диск и папку, где находится ваша таблица
стилей (папка по умолчанию C:\Inetpub\Wwwroot), затем два раза щелкните
на таблице стилей
Диалоговые окна Select File и Select Hyperlink закроются, и вы увидите
путь к вашей таблице стилей в диалоговом окне Link Style Sheet, как
показано на рисунке
3. Нажмите кнопку ОК. Стили внешней таблицы будут применены к вашей
странице. Внешняя таблица стилей не обязательно должна находиться
на локальном жестком диске, она может располагаться на компьютере в
локальной сети или даже в Internet.
Использование таблицы стилей
Использовать таблицы стилей просто -- вы выбираете нужный стиль
следующим образом:
1. Откройте страницу с внутренней таблицей стилей или страницу,
связанную с таблицей стилей, в режиме просмотра Page.
2. Откройте поле списка Style на панели инструментов Formatting и
выберите стиль Heading 1. Введите заголовок и нажмите клавишу [Enter].
Следующей строке будет присвоен стиль текста Normal или Body. Наберите
строку и снова нажмите клавишу [Enter].
3. Из списка стилей выберите Heading 2. Введите заголовок и нажмите
клавишу [Enter]. Следующей строке снова будет присвоен стиль Normal.
4. Наберите текст, который вы хотите включить в гиперссылку, выделите
его, нажмите кнопку Hyperiink на панели инструментов и определите пункт
назначения ссылки.
5. Попробуйте поработать с другими выбранными стилями. Используйте эти
рекомендации и связанную таблицу стилей. Ваша страница может выглядеть
так, как показано на рис. 11.9. Если вы используете другие стили,
страница, естественно, будет выглядеть по-другому.
6. Закройте страницу, не сохраняя ее.
Размещение текста вокруг объектов
При размещении объекта (например, рисунка) на Web-странице, которая уже
содержит текст, по умолчанию объект будет расположен слева, а текст
сместится так, что его начальная позиция окажется у нижнего правого угла
объекта (рис. 11.10).
Рис. 11.9. Применение таблицы стилей к странице
Рис. 11.10. Рисунок, и текст на странице
Размещение объектов на странице
Расположение объектов на странице по умолчанию может быть изменено
посредством свойств позиционирования объектов. Простейшее
позиционирование объектов производится путем выравнивания. Использование
таблиц для позиционирования поддерживается большинством броузеров, но
для позиционирования, описанного в этом разделе, требуются Web-броузеры,
поддерживающие CSS 2.0 (например, Internet Explorer 4.0 или более
поздние версии). Позиционирование объектов может быть относительным
(относительно других объектов) или абсолютным (привязанным к
определенной системе координат). Объект может размещаться в определенном
слое (layer) или иметь соответствующее положение по координате z (z-order)
в стеке объектов страницы. Позиционирование производится с помощью окна
свойств объектов или панели инструментов Positioning.
Использование абсолютного позиционирования
Абсолютное позиционирование позволяет указывать точную позицию верхнего
левого угла объекта в пикселях. Вы можете сделать это, либо перетянув
объект на эту позицию, либо указать позицию в диалоговом окне Position
или на панели инструментов Positioning. При абсолютном позицировании
обтекание не выполняется. Текст расположится сверху или снизу объекта на
отдельном слое. Абсолютное позиционирование означает, что объект
размещен согласно определенным координатам в пикселях, независимо от
разрешения экрана. Следовательно, его координаты не изменятся, даже если
вследствие изменения разрешения монитора объекты, для которых
применялось относительное позицирование, переместятся. Поэтому
необходимо посмотреть на внешний вид страницы, на которой для объектов
используется абсолютное позиционирование, используя все обычные
разрешения монитора (640х480, 800х600 и 1024х768) как в Netscape
Navigator, так и в Internet Explorer. Рассмотрим абсолютное
позиционирование объектов на примере.
Мы будем использовать созданную нами в главе 6 страницу Tatj_Ma-hal.htm
1. Выделите рисунок и активизируйте команду Position меню Format.
Откроется диалоговое окно Position, как показано на рис. 11.11
Рис. 11.11. Диалоговое окно Position с параметрами для позиционирования
объектов и обтекания текста
3. Выберите режим позицирования Absolute. Обратите внимание на числовые
значения в полях Left и Тор. Абсолютноя позиция на странице — это
расстояние в пикселях от левого верхнего края страницы. Вы можете
изменить эту позицию, изменив цифры.
4. Измените значение элемента Left на 130 и нажмите кнопку ОК для
закрытия диалогового окна. Рисунок окажется вверху и по центру текста,
как показано ниже.
5. Выберите команду Positioning подменю Toolbars меню View. На
появившейся панели инструментов Positioning будет указана позиция
выбранного рисунка.
Поместите указатель мыши на рисунке Переместите рисунок Обратите
внимание, что на панели инструментов показана его позиция в пикселях
(рис 11.12.)
Рис 11.12 Рисунок пол с абсолютным позиционированием
1. Сохраните вашу страницу под именем Absolute htm, откройте меню File,
выберите команду Preview in Biowser и в загрузившемся диалоговом окне
выберите броузср Internet Explorer Вид с границы в Internet Explorer
(рис 11.13.) несколько отличается oт того, что вы имели в Frontpage
(сравните с рис 11.12)
8. Возвратитесь в Frontpage, открои ге меню File, выберите команду
Preview in Browser и в загрузившемся диалоговом окне выбери ге броузер
Netscape Navigator Расположение рисунка в этом броузере отличается и от
Frontpage, и от Internet Explorer 5.0
9. Закройте Internet Explorer, Netscape Navigator и вашу текущую с
границу в Frontpage Закроите панель инструментов Positioning .
Попробуйте изменить разрешение экрана Для рисунков, использованых в
примере, было задано разрешение экрана 800х600, после изменения
разрешения на 1024х768 или 640х480 разница не ощущается. Но это бывает
не во всех случаях Если вы используете абсолютное позиционирование
объектов, вам необходимо проверь ь внешний вид ваших Web-страниц при
различных разрешениях
Рис. 11.13. Вид страницы в Internet Explorer 5.0 с использованием
абсолютного позиционирования
Относительное позиционирование и эффект обтекания объекта текстом
Относительное позиционирование позволяет устанавливать позицию объекта
по отношению к другим объектам страницы, поэтому независимо от того, как
изменяется размер страницы, объекты занимают одну и ту же относительную
позицию. Это позволяет разместить текст вокруг рисунка, и относительное
расположение текста и рисунка не изменяется при различных разрешениях
экрана. Для примера используем созданную нами в главе 6 страницу
Tatj_Mahal.htm, добавив текст и рисунок.
1. Загрузите страницу Tatj_Mahal.htm. Переместите курсор в конец файла и
активизируйте команду Clip Art подменю Picture меню Insert. Загрузится
диалоговое Clip Art Gallery. Прокрутите содержимое окна вниз, чтобы
увидеть пиктограмму Places. Щелкните на ней два раза. В окне будут
представлены изображения, относящиеся к рубрике Places. Выберите
изображение с египетскими пирамидами и на появившейся панели нажмите
кнопку Insert Clip. Изображение будет помещено на страницу.
2. Расположите курсор под изображением и введите следующий текст:
"Великая пирамида в Египте была воздвигнута по повелению фараона Хуфу
(по-гречески Хеопса) из IV династии (около 3000 лет до н.э.) На ее
сооружение пошло 6,5 млн. тонн известняка. Пирамиды должны были служить
грандиозными гробницами правителей Египта, но, возможно, их сооружение
преследовало и иные цели Группа больших пирамид была возведена немногим
более чем за столетие По мнению некоторых ученых, строительство пирамид
было удобным способом объединения населения Древнего Египта, создания
централизованной власти. Рисунок с изображением 1адж-Махала должен
быть выровнен по левому краю, рисунок с пирамидами — по правому Страница
будет выглядеть, как показано на рисунке
3. Отметьте рисунок с изображением Тадж-Махала, затем из меню Format
выберите команду Position для открытия диалогового окна Position (рис
11.11)
4. Выберите стиль обтекания Right в области Wrapping Style и стиль
размещения Relative в области Positioning Style (относительное
размещение стиля) и нажмите на кнопку ОК Рисунок Тадж-Махала
переместится вправо, а текст поднимется вверх и сдвинется влево от
рисунка
5. Выберите рисунок с изображением египетских пирамид, снова откроите
диалоговое окно Position, выберите стиль обтекания Left и сгиль
размещения Relative, нажмите на кнопку ОК Рисунок сдвинется влево, а
текст переместится вверх и вправо, как показано на рис 11.14
Рис 11.14. Относительное позиционирование позволило вам разместить текст
вокруг рисунка
6. Сохраните страницу под именем Relatrve.htm, а затем просмотрите
границу в Internet Explorer и Netscape Navigator. Измените разрешение
экрана На рис 1115 страница показана в Netscape Navigator при разрешении
монитора 1024х768, а на рис. 11.16 — в Internet Explorer при разрешении
монитора 800х600.
7. Закроите Internet Explorer и Netscape Navigator, а также вашу
страницу . В данном случае только Internet Explorer отображает страницу
правильно Однако необходимо просмотреть страницу в обоих броузерах,
чтобы предотвратить и вовремя исправить ошибки в отображении информации
Рис. 11.15. Вид страницы с использованием относительного
позиционирования в Netscape Navigator
Рис. 11.16. Вид страницы с использованием относительного
позиционирования в Internet Explorer 5.0
Добавление анимационных эффектов Dynamic HTML
Dynamic HTML помогает вам придать анимационные эффекты эле ментам
страницы. Например, вы можете создать абзац, который будет появляться
справа или слева страницы при ее загрузке. Frontpage 2000
позволяет легко использовать Dynamic HTML. Это можно сделать следующим
образом:
1. Создайте новую страницу в Frontpage. Введите заголовок страницы,
например "Падающий заголовок". С новой строки введите абзац, например
"При открытии страницы вы увидите, что данный абзац "вылетает" с правой
стороны.".
2 Затем переместите курсор в конец страницы и активизируйте команду Clip
Art подменю Picture меню Insert. Загрузится диалоговое Clip Art Gallery.
Прокрутите содержимое окна вниз, чтобы увидеть пиктограмму Maps.
Щелкните на ней два раза. В окне будут представлены изображения,
относящиеся к рубрике Maps. Выберите изображение земного шара и на
появившейся панели нажмите кнопку Insert Clip. Изображение будет
помещено на страницу.
3. Выделите заглавную строку, откройте меню Format, выберите команду
Dynamic HTML Effects. Появится плавающая панель DHTML Effects, на
которой можно выбрать эффект, который будет задан для объекта при
наступлении указанного события.
4. Выберите в поле списка On пункт Page Load. Станет доступным поле
списка Apply. В списке Apply выберите пункт Drop In By Word.
5. Щелкните на вкладке Preview Вы увидите, как заголовок "падает" сверху
страницы. Вернитесь на вкладку Normal.
6. Выделите первый абзац. На панели инструментов DHTML Effects в списке
On выберите пункт Page Load, в списке Apply — Fly In и From Right. Снова
перейдите на вкладку Preview — вы увидите, как абзац вылетает с правой
стороны после того, как заголовок "выпадет" с верхней части страницы.
Вернитесь на вкладку Normal.
7. Выберите рисунок земного шара. На панели инструментов DHTML Effects в
списке On выберите пункт Click, в списке Apply выберите Swap Picture, в
появившемся следующем списке — Choose Pictine, а затем в загрузившемся
диалоговом окне Picture щелкните на кнопке ClipArt. Загрузится
диалоговое окно Clip Art Gallery. Прокрутите содержимое окна вниз, чтобы
увидеть пиктограмму Maps. Щелкните на ней два раза. В окне будут
представлены изображения, относящиеся к рубрике Maps. Выберите
изображение земного шара с улетающим самолетом и на
появившейся панели нажмите кнопку Insert Clip.
8. На вкладке Preview щелкните на изображении земного шара, и вы
увидите, как оно сменится изображением улетающего от земли самолета. При
повторном щелчке появится изображение земного шара. Вернитесь на вкладку
Normal.
9. Если кнопка Highlight Dynamic HTML Effects на панели DHTML Effects
активизирована, то вы увидите, что заголовок и первый абзац расположены
в светло-голубых прямоугольниках. Теперь, если вы поместите курсор мыши
на эти прямоугольники или на рисунок земного шара, то увидите подсказку,
которая разъяснит, что собой представляет заданный для объекта эффект
DHTML (рис. 11.17).
Рис. 11.17. Вид страницы с использованием DHTUL-эффектов в режиме
просмотра Page
10. Сохраните эту страницу под именем DHTMLdone.htm, а затем просмотрите
ее в Internet Explorer и Netscape Navigator. Вы убедитесь, что броузеры
воспроизводят все исправно.
11. Закройте броузеры, панель инструментов DHTML Effects и свою
Web-страницу.
Применяя эффекты Dynamic HTML, необходимо тестировать созданные страницы
в различных броузерах.