Первый сайт с FrontPage




Глава 20 Использование сложных элементов


    Глава 20 Использование сложных...
    Глава 20 Использование сложных элементов при оформлении Web-страниц Использование эффектов динамического HTML Меняющиеся кнопки Анимация на Web-страницах Использование анимации при смене страниц,...
    Использование эффектов динамического HTML
    Использование эффектов динамического HTML Совсем недавно можно было только мечтать о размещении на Web-страницах динамических объектов, кнопок, меняющих внешний вид при установке на них курсора, б...
    Бегущая строка
    Бегущая строка Один из динамических элементов HTML, создаваемый программой FrontPage — бегущая строка, представляющая собой прямоугольную область, в которой перемещается текст, оформленный в виде...
    Рис. 20.1. Диалоговое окно Вставка компонента веб-узла
    Рис. 20.1. Диалоговое окно Вставка компонента веб-узла 4. Окно содержит два списка. Из списка компонентов выбрано находящееся в нем значение Динамические эффекты (Dynamic Effects). В правом списке...
    Рис. 20.2. Диалоговое окно Свойства бегущей строки
    Рис. 20.2. Диалоговое окно Свойства бегущей строки 5. В верхней части диалогового окна расположено поле Текст (Text), предназначенное для размещения текста, который будет представлен на экране в в...
    Налево (Left) направо (Right)...
    налево (Left) направо (Right) 7. Область Скорость (Speed) содержит два счетчика, управляющих скоростью перемещения строки и имеющих следующее назначение: Задержка (Delay) — задает период времени (...
    Замечание
    Замечание Не злоупотребляйте применением данного флажка. Все хорошо в меру. Постоянно бегающая строка может раздражать и отпугнуть посетителей Web-узла. 11. Для задания цвета фона прямоугольной об...
    Меняющиеся кнопки
    Меняющиеся кнопки При создании гиперссылок можно использовать кнопки, которые будут изменять свой цвет при установке на них курсора. Разместим на странице нашего тестового Web-узла 7 кнопок по кол...
    Рис. 20.6. Диалоговое окно Свойства меняющейся кнопки
    Рис. 20.6. Диалоговое окно Свойства меняющейся кнопки 6. Введите в поле Текст кнопки (Button text) текст, помещаемый на кнопку (например, название страницы, на которую осуществляется переход при н...
    Рис. 20.7. Диалоговое окно Выбор...
    Рис. 20.7. Диалоговое окно Выбор гиперссылки для меняющейся кнопки 9. Список Эффект (Effect) содержит 7 значений, определяющих эффекты цветового оформления, предоставляемых программой FrontPage. В...
    Совет
    Совет Для изменения размера кнопки можно также использовать маркеры выделения, появляющиеся, если на ней щелкнуть кнопкой мыши. 11. Из списка Цвет эффекта (Effect color) выберите цвет, который буд...
    Замечание
    Замечание В оформлении изменяющейся кнопки можно применять графическое изображение и звук. Для использования этих возможностей в диалоговом окне Свойства меняющейся кнопки нажмите кнопку Другие (C...
    Анимация на Web-страницах
    Анимация на Web-страницах Программа FrontPage позволяет при оформлении Web-страниц использовать различные анимационные эффекты, заимствованные из программы PowerPoint, входящей в программный пакет...
    Рис. 20.9. Панель инструментов Эффекты DHTML
    Рис. 20.9. Панель инструментов Эффекты DHTML На панели инструментов расположены три списка. Список Вкл (Оn) содержит события, при наступлении которых выполняется динамический HTML-эффект. В табл....
    Рис. 20.11. Бегущая строка с примененным...
    Рис. 20.11. Бегущая строка с примененным к ней эффектом анимации Динамический эффект: Вылет Наверх 7. Перейдите в режим просмотра Web-страницы, выбрав вкладку Просмотр (Preview), расположенную в н...
    Использование анимации при смене...
    Использование анимации при смене страниц, Сворачивающиеся списки Программа FrontPage позволяет использовать анимационные эффекты при переходе между страницами Web-узла. Для задания этого эффекта и...
    Рис. 20.12. Диалоговое окно Смена страниц
    Рис. 20.12. Диалоговое окно Смена страниц Список Событие (Event) данного диалогового окна содержит перечень событий (табл. 20.3), при наступлении которых применяются анимационные эффекты. Таблица...
    Сворачивающиеся списки
    Сворачивающиеся списки Чтобы оживить Web-страницы, не обязательно использовать анимацию или сложные DHTML-эффекты. Порой достаточно небольшой мелочи, и нужный эффект будет достигнут. Рассмотрим ис...
    Рис. 20.14. Диалоговое окно Свойства...
    Рис. 20.14. Диалоговое окно Свойства списка позволяет сделагь список сворачивающимся...
    Рис. 20.15. Просмотр сворачивающегося списка
    Рис. 20.15. Просмотр сворачивающегося списка...
    Объявление на странице
    Объявление на странице, Диспетчер объявлений Объявлением на странице называется специальным образом оформленный заголовок страницы. Этот элемент страницы также называют баннером. По умолчанию при...
    Рис. 20.16. Изменение названия страницы в режиме Переходы
    Рис. 20.16. Изменение названия страницы в режиме Переходы 6. Чтобы разместить баннер на странице, выберите в меню Вставка (Insert) команду Объявление на странице (Page Banner). Открывается диалого...
    Рис. 20.17. Диалоговое окно Свойства объявления на странице
    Рис. 20.17. Диалоговое окно Свойства объявления на странице 7. Введите в это поле другое название заголовка (например, Новый заголовок страницы ) , и нажмите кнопку ОК. 8. Перейдите в режим Перехо...
    Рис. 20.18. Использование темы в оформлении баннера
    Рис. 20.18. Использование темы в оформлении баннера...
    Используя объект Диспетчер объявлений...
    Используя объект Диспетчер объявлений (Banner Ad Manager), можно украшать Web-страницы сменяющими друг друга слайдами. Данный объект удобно использовать для размещения на Web-страницах информации...
    Рис. 20.19. Диалоговое окно Свойства диспетчера объявлений
    Рис. 20.19. Диалоговое окно Свойства диспетчера объявлений 7. В полях Ширина (Width) и Высота (Height) задайте размеры слайдов (в пикселах). Если слайды имеют разные размеры, установите размер сам...
    Использование фреймов при создании Web-страниц
    Использование фреймов при создании Web-страниц Мощным средством представления информации в Web-узлах являются фреймы, позволяющие разбивать Web-страницы на прямоугольные области, в каждой из котор...
    Шаблоны фреймов
    Шаблоны фреймов Использование шаблонов фреймов значительно облегчает их создание, особенно, если вы только начинаете знакомиться с фреймами. Для просмотра списка шаблонов фреймов выполните следующ...
    Рис. 20.21. Диалоговое окно Шаблоны...
    Рис. 20.21. Диалоговое окно Шаблоны страниц, содержащее шаблоны фреймов 4. В окне вкладки находятся 10 значков шаблонов. Назначение шаблонов фреймов описано в табл. 20.4. Таблица 20.4. Шаблоны фре...
    Содержание фрейма Объявление и...
    Содержание фрейма Объявление и оглавление (Banner and Contents) Область заголовка, оглавление и область отображения основной информации Оглавление (Contents) Область оглавления и область отображен...
    Рис. 20.22. Шаблон фрейма Оглавление
    Рис. 20.22. Шаблон фрейма Оглавление Используя эти кнопки, вам необходимо указать страницы, которые будут загружаться по умолчанию в области фрейма при его открытии, а также создать ссылки с указа...
    Создание фрейма
    Создание фрейма Рассмотрим пример создания Web-узла, в состав которого входит фрейм, представленный на рис. 20.23, и Web-страницы, просматриваемые с его помощью. Фрейм состоит из трех областей: за...
    Замечание
    Замечание Чтобы не запутаться в названиях страниц при создании ссылок, им лучше давать имена, которые будут ассоциироваться с областью фрейма, в которой эта страница будет отображаться. Присвоим с...
    Рис. 20.24. Выбранный шаблон фрейма Объявление и оглавление
    Рис. 20.24. Выбранный шаблон фрейма Объявление и оглавление...
    Рис. 20.25. Диалоговое окно Добавление...
    Рис. 20.25. Диалоговое окно Добавление гиперссылки позволяет указать страницу, которая будет размещаться во фрейме при его загрузке 14. Используя кнопки Задать начальную страницу (Set Initial Page...
    Рис. 20.26. Диалоговое окно Конечная рамка
    Рис. 20.26. Диалоговое окно Конечная рамка...
    Рис. Диалоговое окно Конечная рамка
    Рис. 20.27. Диалоговое окно Конечная рамка с выбранной областью конечного фрейма, в которую будет загружаться страница 19. Нажмите кнопку ОК для закрытия диалогового окна Конечная рамка (Target Fr...
    Рис. 20.28. Отображение страницы...
    Рис. 20.28. Отображение страницы раздела в правой области фрейма при его выборе из оглавления В рассмотренном примере мы устанавливали в диалоговом окне Конечная рамка (Target Frame) один и тот же...
    Режимы просмотра фрейма
    Режимы просмотра фрейма В нижней части рабочей области программы FrontPage при размещении в ней фрейма (см. рис. 20.28) вместо трех вкладок, соответствующих режимам просмотра обычных Web-страниц,...
    Свойства фреймов
    Свойства фреймов Для настройки свойств фрейма используется дишюговое окно Свойства рамки (рис. 20.29). Чтобы его открыть, выделите фрейм и выполните одно из следующих действий: В меню Рамки (Frame...
    Рис. 20.29. Диалоговое окно Свойства рамки
    Рис. 20.29. Диалоговое окно Свойства рамки В верхней части диалогового окна расположены два поля. Поле Имя (Name) содержит название редактируемого фрейма, а поле Начальная страница (Initial page)...
    Рис. 20.30. Вкладка Рамки диалогового окна Свойства страницы
    Рис. 20.30. Вкладка Рамки диалогового окна Свойства страницы...
    Поле Интервал между рамками (Frame...
    Поле Интервал между рамками (Frame Spacing) позволяет указать толщину разделительных линий между фреймами на странице. Флажок Показать границы (Show Borders) определяет, показывать ли разделительн...
    Управление фреймами
    Управление фреймами Для изменения размеров фрейма, размещенного на странице, можно использовать не только диалоговое окно Свойства рамки (Frame Properties), но и мышь. Достаточно установить курсор...
    Рис. 20.31. Добавление во фреймсет нового фрейма
    Рис. 20.31. Добавление во фреймсет нового фрейма Образовавшийся новый фрейм (рис. 20.31) содержит кнопки Задать начальную страницу (Set Initial Page) и Создать страницу (New Page), позволяющие опр...
    Рис. 20.32. Диалоговое окно Разделить рамку
    Рис. 20.32. Диалоговое окно Разделить рамку Чтобы удалить фрейм из фреймсета, установите на него курсор и в меню Рамки (Frame) выберите команду Удалить рамку (Delete Frame). Освободившееся после у...
    Стили
    Стили Для форматирования на Web-страницах текста (задание шрифта, цвета, интервала между строками, отступа для абзаца, выравнивания, величины полей) мы использовали панель инструментов Форматирова...
    Создание внешней таблицы стилей
    Создание внешней таблицы стилей Внешняя таблица стилей CSS, создаваемая программой FrontPage, может быть связана с отдельными страницами Web-узла или со всеми сразу. После этого форматирование эле...
    Рис. 20.33. Вкладка Таблицы стилей...
    Рис. 20.33. Вкладка Таблицы стилей диалогового окна Шаблоны страниц 6 . Выберите один из предлагаемых шаблонов и нажмите кнопку ОК. 7. Диалоговое окно Шаблоны страниц закрывается, а в Web-узел доб...
    Рис. 20.34. Страница, содержащая описание стилей
    Рис. 20.34. Страница, содержащая описание стилей Использование внешней таблицы стилей Мы рассмотрели создание внешней таблицы стилей. Для того чтобы таблицу можно было использовать, ее необходимо...
    Рис. 20.35. Диалоговое окно Связать с таблицей стилей
    Рис. 20.35. Диалоговое окно Связать с таблицей стилей 5. В открывшемся диалоговом окне Выбор таблицы стилей (Select Style Sheet) выберите созданную таблицу стилей. В нашем примере это файл styles....
    Создание внутренних стилей страницы
    Создание внутренних стилей страницы Внешняя таблица стилей определяет оформление всех элементов страницы или даже всего Web-узла. Но это не значит, что если вы захотите изменить форматирование отд...
    Теги стилей абзацев
    Теги стилей абзацев При создании внутренней таблицы стилей в левой части названия стиля мы указывали символы, определяющие тег, предназначенный для форматирования текста. Для заголовка первого уро...
    Встроенные стили
    Встроенные стили Работая с программой FrontPage, вы, наверное, обращали внимание, что в диалоговых окнах свойств некоторых объектов Web-страницы присутствует кнопка Стиль (Style), позволяющая пере...
    Рис. 20.39. Диалоговое окно Изменение стиля
    Рис. 20.39. Диалоговое окно Изменение стиля Рассмотрим последовательность действий для применения встроенного стиля при форматировании маркированного списка: 1. Выделите на Web-странице маркирован...









Начало