Школа Майкрософт

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

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

При создании Web-узлов чаще всего применяют графические форматы JPEG (Joint Photographic Experts Group) и GIF (Graphics Interchange Format). При записи файлов в этих форматах происходит сжатие данных. Выбор того или иного формата определяется поставленными задачами. Формат GIF применяется для изображений, содержащих меньше 256 цветов, и используется, в основном, для создания анимационных эффектов. Если изображение содержит более 256 цветов, то используется формат JPEG. Все вышесказанное не означает, что не подойдут для использования в программе FrontPage графические файлы, имеющие другие форматы. FrontPage позволяет импортировать файлы следующих форматов:

GIF
JPEG (JPG)
PNG
BMP (Windows или OS/2)
TIFF(TIF)
WMF (Метафайлы Windows)
SUN Raster (RAS)
EPS (Инкапсулированный Postscript)
PCX (Paintbrush)
TGA(Targa)
PCD (Kodak PhotoCD)

По умолчанию импортируемые форматы, за исключением форматов GIF и JPEG, преобразовываются FrontPage в формат GIF.

При создании Web-страниц вы можете использовать графические изображения из библиотеки Clip Art, входящей в состав Microsoft Office, файлы, разработанные с использованием графических редакторов (например, CorelDraw, Adobe Photoshop), а также применять изображения, полученные со сканера.

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

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

Сначала рассмотрим, как изменить предлагаемый по умолчанию программой FrontPage белый фон страницы на другой цвет. Для задания однотонного фона Web-страницы выполните следующие действия:

1. Откройте созданный нами Web-узел. Для этого в меню Файл (File) выберите команду Последние веб-узлы (Recent Webs) и в появившемся списке выберите My Test_Web.

2. Откройте домашнюю страницу, дважды щелкнув на панели Список папок (Folder List) имя файла index.htm.

3. В меню Формат (Format) выберите команду Фон (Background). На экране открывается диалоговое окно Свойства страницы (Page Properties), содержащее шесть вкладок. По умолчанию открыта вкладка Фон (рис. 15.1).

Рис. 15.1. Диалоговое окно Свойства страницы

Замечание

Для открытия диалогового окна Свойства страницы вы можете также воспользоваться командой Свойства (Properties) меню Файп (File) или командой контекстного меню страницы Свойства страницы.

Область Цвета (Colors) содержит 5 раскрывающихся списков, позволяющих задать цвета следующих элементов Web-страницы:

Фон (Background) — фона Web-страницы
Текст (Text) — текста
Гиперссылка (Hyperlink) — гиперссылок
Просмотренная ссылка (Visited hyperlink) — гиперссылок, по которым уже осуществлялся переход
Активная ссылка (Active hyperlink) — активных гиперссылок

4. Для задания цвета фона нажмите кнопку со стрелкой, предназначенную для раскрытия списка Фон (Background). Откроется палитра, содержащая 16 стандартных цветов (рис. 15.2). Для замены текущего фона достаточно выбрать на палитре понравившийся цвет.

5. В том случае, если ни один из цветов вам не подходит, и вы хотите использовать дополнительные цвета, щелкните в области Другие цвета (More Colors). Откроется диалоговое окно Другие цвета (рис. 15.3).

6. Для подбора цвета фона удобно использовать кнопку Выбрать (Select), которая переводит курсор в активное состояние. При перемещении кур сора по цветовой палитре, цвет, на который указывает курсор, отобража ется в области Новый (New), что позволяет лучше рассмотреть цвет. Об- ласть Текущий (Current) диалогового окна отображает текущий цвет фона. Выбрав из предложенных цветов понравившийся, нажмите еще раз кнопку Выбрать, а затем кнопку ОК. Диалоговое окно закроется, а выбранный цвет отобразится в списке Фон (Background).

Рис. 15.2. Палитра для задания цвета

Рис. 15.3. Диалоговое окно Другие цвета

7. Если вам не удалось подобрать цвет фона в диалоговом окне Другие цвета — еще не все потеряно. Нажмите кнопку Другой (Custom). Откроется диалоговое окно Цвет (рис. 15.4), содержащее в области Основная палитра 48 готовых цветов и позволяющее дополнительно создать 16 пользовательских. Для создания пользовательского цвета выберите на палитре необходимый оттенок цвета с помощью курсора. С правой стороны окна находится движок, который имеет форму треугольника. Используя этот движок, задайте яркость. Есть еще способ формирования цвета: можно вводить числовые данные в поля ввода, задающие оттенок, контраст, яркость и значения красного, зеленого и синего цветов. Получив необходимый цвет, нажмите кнопку ОК для закрытия диалогового окна.

8. Вернувшись в диалоговое окно Свойства страницы, нажмите кнопку ОК Для его закрытия.

Рис. 15.4. Диалоговое окно для создания пользовательского цвета

Использование изображения в качестве фона

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

1. Откройте созданный Web-узел.
2. Откройте домашнюю страницу, дважды щелкнув мышью на панели Список папок (Folder List) на файле index.htm.
3. В меню Файл (File) выберите команду Свойства (Properties) или выберите команду контекстного меню страницы Свойства страницы.
4. В открывшемся диалоговом окне Свойства страницы (Page Properties) перейдите на вкладку Фон (Background).
5. Установите расположенный в верхней части диалогового окна флажок Фоновый рисунок (Background picture).
6. Установите также флажок Подложка (Watermark). Если он установлен, то при перемещении по Web-странице с помощью полосы прокрутки не происходит смещения рисунка фона относительно объектов, расположенных на странице.
7. Для указания имени и расположения графического файла, содержимое которого будет использовано в качестве фона, нажмите кнопку Обзор (Browse). На экране открывается диалоговое окно Выбрать фоновый рисунок (Select Background Picture) (рис. 15.5), в списке Папка (Look in) которого указано имя открытого Web-узла.

Рис. 15.5. Диалоговое окно для выбора графического изображения фона страницы •

8. Если вы поместили графический файл в папку images, откройте ее, выберите подготовленный для фона страницы файл и нажмите кнопку ОК.
9. В случае если вы заранее не позаботились о размещении файла в папках Web-узла, для его поиска воспользуйтесь кнопками, расположенными слева в диалоговом окне Выбрать фоновый рисунок. Кнопки Журнал (History), Мои документы (My Document), Рабочий стол (Desktop), Избранное (Favorites), Мое сетевое окружение (My Network Places) позволяют искать файл в папках Recent, Мои документы, Рабочий стол, Избранное и Мое сетевое окружение, соответственно. Кнопка Найти в Интернете (Search the Web) запускает обозреватель для поиска в Интернете файла, который может быть использован в качестве фона Web-страницы.

Выбрав необходимый файл, нажмите кнопку ОК для закрытия диалогового окна Выбрать фоновый рисунок.

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

На рис. 15.6 показана Web-страница, для которой в качестве фонового изображения использован файл из библиотеки Windows.

Рис. 15.6. В качестве фона использовано графическое изображение

Вы можете использовать единое графическое изображение на нескольких страницах Web-узла в качестве фона, устанавливая в диалоговом окне Свойства страницы флажок Получить сведения о фоне с другой страницы (Get background information from another page). В этом случае, если вы решите изменить фон, нет необходимости менять его на всех страницах, использующих одинаковое изображение, — достаточно сделать это на одной единственной странице. Рассмотрим последовательность действий при использовании этого флажка:

1. Откройте Web-узел.
2. Откройте домашнюю страницу, дважды щелкнув на панели Список папок (Folder List) на имени файла index.htm.
3. В меню Формат (Format) выберите команду Фон (Background).
4. В открывшемся диалоговом окне Свойства страницы на вкладке Фон (Background) установите флажки Фоновый рисунок (Background picture) и Подложка (Watermark).
5. Нажмите кнопку Обзор, расположенную рядом с полем, в котором будет размещено имя графического файла. 6. В открывшемся диалоговом окне Выбрать фоновый рисунок (Select Background Picture) выберите графический файл, который хотите использовать в качестве фона страницы, и нажмите кнопку ОК.
7. Нажмите кнопку ОК для закрытия диалогового окна Свойства страницы.
8. Сохраните Web-страницу с размещенным фоновым изображением и исходный графический файл в папке images.
9. Откройте в режиме редактирования вторую страницу Web-узла.
10. Откройте для этой страницы диалоговое окно Свойства страницы.
11. На вкладке Фон (Background) установите флажок Получить сведения о фоне с другой страницы (Get background information from another page).
12. Нажмите расположенную рядом с флажком кнопку Обзор.
13. В открывшемся диалоговом окне Текущий веб-узел (Current Web) (рис. 15.7) выберите из папки images сохраненную Web-страницу с фоновым графическим изображением и нажмите кнопку ОК.
14. Нажмите кнопку ОК для закрытия диалогового окна Свойства страницы.

Рис. 15.7. Диалоговое окно Текущий веб-узел

Теперь, если вы захотите изменить фоновое изображение на всех страницах Web-узла, вам достаточно выполнить следующие действия:

1. Поместите новое графическое изображение в папку images Web-узла.
2. Откройте окно свойств страницы, размещенной в папке images, для которой вы установили графическое фоновое изображение.
3. Измените фоновое изображение, используя размещенный в данной папке новый графический файл.
4. Закройте окно свойств страницы.

Размещение графических изображений

Графические изображения, размещенные на Web-странице, не только способствуют лучшему восприятию информации, но и позволяют сделать страницы более яркими и запоминающимися. Графические изображения вы можете подготовить сами или воспользоваться услугами дизайнеров. Можно также использовать библиотеки графических файлов программных продуктов, таких как Microsoft Office, CorelDraw и т.д.

Разместим на домашней странице создаваемого нами Web-узла графическое изображение из библиотеки Clip Art, входящей в состав Microsoft Office. Для этого выполните следующие действия:

1. Откройте созданный Web-узел.
2. Откройте домашнюю страницу, дважды щелкнув мышью на имени файла index.htm в панели Список папок (Folder List).
3. В меню Вставка (Insert) выберите команду Рисунок (Picture), а затем в открывшемся подменю — опцию Картинки (Clip Art). В окне программы FrontPage появляется панель Вставка картинки (Insert Clip Art).
4. Выберите на этой панели команду Коллекция картинок (Media Gallery). Открывается диалоговое окно, позволяющее выбрать графическое изображение (рис. 15.8).

Рис. 15.8. Диалоговое окно Коллекция картинок (Microsoft)

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

Кнопка	Назначение
Поиск	Отображает в окне панель Поиск, предназначенную для поиска мультимедийных файлов
Список коллекций	Отображает в окне панель Список коллекций со списком категорий и разделов библиотеки
Коллекция картинок в Интернете	Запускает обозреватель для поиска изображения в Интернете

5. Панель Список коллекций содержит папки вашего компьютера с мультимедийными файлами, а также файлы картинок библиотеки Clip Art. Откройте папку интересующей вас категории картинок. В рабочей области окна появятся изображения данной категории. При установке курсора на изображение видна подсказка с указанием имени, размера изображения и файла, в котором он содержится, а также формата графического изображения (рис. 15.9).

Рис. 15.9. Подсказка с указанием размера файла при установке курсора на изображение

6. Нажмите кнопку со стрелкой с правой стороны выбранного изображения. Появляется контекстное меню.
7. Выберите в контекстном меню команду Копировать (Сору).
8. Перейдите на Web-страницу и вставьте на нее из буфера обмена изображение, используя для этого любое удобное средство. Например, нажмите комбинацию клавиш <Shift>+<Ins>.
9. Сохраните Web-страницу с размещенным в ней графическим изображением, нажав кнопку Сохранить (Save) на стандартной панели инструментов. Появляется диалоговое окно Сохранение внедренных файлов (Save Embedded Files) (рис. 15.10), предлагающее сохранить размещенное на странице изображение в папке images Web-узла под именем, с которым файл находился в библиотеке. Это окно содержит кнопки следующего назначения:

Переименовать (Rename) — позволяет переименовать файл.
Сменить папку (Change Folder) — открывает диалоговое окно Смена папки (Change Folder), содержащего папки текущего Web-узла, позволяя выбрать иную папку для сохранения файла.
Действие (Set Action) открывает диалоговое окно Задание действия, позволяющее изменить значение Сохранить (Save) столбца Действие (Action) на Не сохранять (Don't Save). При выборе значения Сохранить рисунок сохраняется в указанной вами папке Web-узла, в противном случае на Web-странице останется ссылка на изображение, находящееся в библиотеке Clip Art.

Область Рисунок (Picture preview) показывает размещаемое изображение. Установив в диалоговом окне Сохранение внедренных файлов нужные параметры, нажмите кнопку ОК. Графический файл будет сохранен в указанной вами папке Web-узла.

Рис. 15.10. Диалоговое окно Сохранение внедренных файлов

Размещение графического изображения из файла

Мы рассмотрели размещение на Web-странице графического изображения из библиотеки Clip Ait. Для размещения на странице графического изображения из файла выполните одно из следующих действий:

В меню Вставка (Insert) выберите команду Рисунок (Picture), а затем в открывшемся подменю — опцию Из файла (From File)
Нажмите кнопку Добавить рисунок из файла (Insert Picture From File) на стандартной панели инструментов
Нажмите кнопку Добавить рисунок из файла (Insert Picture From File) на панели инструментов Рисунки (Pictures)

При выполнении любого из этих действий открывается диалоговое окно Рисунок (Picture) (рис. 15.11). Найдите с помощью этого окна требуемый графический файл и для его размещения на Web-странице нажмите кнопку Вставить (Insert). Диалоговое окно закроется, а изображение будет размещено на странице.

Рис. 15.11. Диалоговое окно Рисунок

Настройка свойств изображения

После размещения изображения на Web-странице необходимо настроить его свойства, используя диалоговое окно Свойства рисунка (Picture Properties) (рис. 15.12). Для его открытия щелкните мышью на изображении, а затем выполните одно из следующих действий:

В меню Формат (Format) выберите команду Свойства (Properties)
Выберите команду контекстного меню Свойства рисунка (Picture Properties)
Нажмите комбинацию клавиш <Alt>+<Enter>

Диалоговое окно Свойства рисунка содержит три вкладки: Общие (General), Видеозапись (Video), Вид (Appearance). Рассмотрим более подробно возможности настройки с помощью данного диалогового окна.

Рис. 15.12. Вкладка Общие диалогового окна Свойства рисунка

Вкладка General

В верхней части вкладки Общие (General) находится поле Источник рисунка (Picture source), в котором указано местоположение графического файла. Это может быть папка открытого Web-узла или адрес в Интернете. Рядом с полем расположены две кнопки:

Обзор (Browse) — открывает диалоговое окно Рисунок, позволяющее выбрать изображение для размещения на Web-странице
Изменить (Edit) — запускает графический редактор для изменения текущего файла

Область Тип (Туре) указывает один из двух форматов графического изображения (GIF и JPEG). Если на Web-странице размещается изображение иного формата, FrontPage преобразовывает этот формат в один из форматов, используемый программой FrontPage. Так, если импортируемый файл содержит менее 256 цветов, он преобразовывается в формат GIF, если более 256 цветов — в формат JPEG. Область Альтернативные представления (Alternative representations) вкладки Общие (General) содержит поля, позволяющие задать параметры, которые будут использованы при просмотре Web-страницы, содержащей данное графическое изображение, в обозревателе, не поддерживающем графику или имеющем низкое разрешение:

Низкое разрешение (Low-Res) — указывает имя и расположение файла, содержащего графическое изображение, имеющее низкое разрешение, который будет загружаться вместо исходного графического файла. Для задания файла используется диалоговое окно Выбрать другой рисунок (Select Alternate Picture), открываемое при нажатии кнопки Обзор, расположенной рядом с полем.
Текст (Текст) — позволяет задать текст, который будет появляться вместо изображения при отсутствии или отключении в обозревателе режима отображения графики.

Поля области Гиперссылка по умолчанию (Default hyperlink) позволяют использовать текущее графическое изображение в качестве гиперссылки:

Расположение (Location) — при нажатии кнопки Обзор (Browse), расположенной рядом с этим полем, открывается диалоговое окно Изменение гиперссылки (Edit Hyperlink), позволяющее задать или изменить установленную ссылку на страницу текущего Web-узла, страницу в Интернете или установить ссылку на новую страницу.

Замечание

Подробнее это диалоговое окно будет описано в главе 16 при рассмотрении текстовых и графических ссылок.

Конечная рамка (Target Frame) — в данном поле указывается ссылка на конечный фрейм.

Замечание

Вопросы использования фреймов при создании страниц будут рассмотрены в главе 20.

Вкладка Видеозапись

Вкладка Видеозапись (Video) диалогового окна Свойства рисунка позволяет поместить в Web-страницу аудио- или видеозапись, при этом графическое изображение будет использовано в качестве заставки при загрузке файла.

Вкладка Вид

Вкладка Вид (Appearance) диалогового окна Свойства рисунка (рис. 15.13) содержит параметры, позволяющие задать расположение графического изображения на Web-странице.

Рис. 15.13. Вкладка Вид диалогового окна Свойства рисунка

Раскрывающийся список Выравнивание (Alignment) области Положение (Layout) содержит значения, устанавливающие расположение изображения по отношению к окружающему его тексту. Тип выравнивания в зависимости от значения списка указан в табл. 15.1. На рис. 15.14 показан пример взаимного расположения текста и изображения при использовании опций слева (Left) и справа (Right).

Таблица 15.1. Зависимость типа выравнивания от выбора значения из списка Выравнивание

Значение списка		Тип выравнивания
По левому краю (Left)		Изображение располагается по левому краю абзаца, а текст — справа от него
По правому краю (Right)		Изображение располагается по правому краю абзаца, а текст — слева от него
По верхнему краю (Тор)		Текст выравнивается по верхней границе изображения
По верхнему краю щрифта (Texttop)		Изображение выравнивается по верхней границе текста
По середине (Middle)		Текст выравнивается по середине изображения
По середине шрифта (Absmiddle)		Изображение выравнивается по середине текущей строки текста
По линии шрифта (Baseline)		Изображение выравнивается по базовой линии текущей строки текста
По нижнему краю (Bottom)	Текст выравнивается по нижней линии изображения
По нижнему краю шрифта (Absbottom)	Изображение выравнивается по нижней линии текущей строки текста
По центру (Center)	Текст выравнивается по средней линии изображения

Замечание

Для выравнивания изображения можно также использовать опции области Обтекание (Wrapping style) и кнопки По левому краю (Align Left) и По правому краю (Align Right) на панели форматирования.

Рис. 15.14. Выравнивание с помощью опций слева и справа

Остальные поля области Положение (Layout) имеют следующее назначение:

Толщина границы (Border thickness) — задает толщину рамки (в пикселах) вокруг графического изображения
Интервал по горизонтали (Horizontal spacing) — задает расстояние по горизонтали (в пикселах) от изображения до окружающего его текста
Интервал по вертикали (Vertical spacing) — задает расстояние по вертикали от изображения до окружающего его текста в пикселах Параметры области Размер (Size) предназначены для указания размера изображения в пикселах или процентах от размера окна обозревателя. При этом чтобы изображение сохранило свои пропорции, необходимо установить флажок Сохранять пропорции (Keep aspect ratio). Область содержит два поля, имеющих следующее назначение:
Ширина (Width) — ширина изображения
Высота (Height) — высота изображения

Замечание

Для указания ширины и высоты графического изображения необходимо предварительно установить флажок Задать размер (Specify size). При установке этого флажка в HTML-код включаются теги с указанием ширины и высоты графического файла, тогда при загрузке Web-страницы в обозреватель сразу резервируется место под изображение. Если HTML-код не содержит данные теги, то обозреватель загружает графический файл и лишь затем освобождает под него место, смещая другие объекты страницы.

Совет

Изменить ширину и высоту изображения можно также с использованием курсора. Для этого выделите графическое изображение. Затем установите курсор на угловой маркер выделения. Он примет вид двунаправленной стрелки. Нажмите кнопку мыши и, удерживая ее нажатой, перемещайте в сторону центра для уменьшения размера или в обратную сторону — для увеличения размера изображения. Установив нужный размер, отпустите кнопку мыши. Если для изменения размера графического изображения вы будете использовать боковые маркеры выделения объекта, то пропорции изображения не будут сохранены.

Редактирование изображений

При размещении на Web-странице графического изображения на экране появляется панель инструментов Рисунки (Pictures), предоставляющая средства по его обработке (рис. 15.15).

Рис. 15.15. Панель инструментов Рисунки

Совет

Если панель инструментов Рисунки не появилась на экране, то в меню Вид (View) выберите команду Панели инструментов (Toolbars), а затем — опцию Рисунки.

На панели инструментов Рисунки имеется множество кнопок, которые удобно использовать для корректировки изображения. Их назначение описано в табл. 15.2.

Таблица 15.2. Кнопки панели инструментов Рисунк

Кнопка	Название		Назначение
	Добавить рисунок из файла (Insert Picture From File)		Открывает диалоговое окно Рисунок, позволяющее выбрать графическое изображение, содержащееся в файле, и разместить его на Web-странице
	Текст (Text)		Размещает на графическом изображении форматированный текст, который можно связывать с активной областью
	Автоэскизы (Auto Thumbnail)		Представляет графическое изображение в виде автоэскиза
	Position Absolutely (Абсолютное положение)		Позволяет позиционировать изображение
	Переместить вперед (Bring Forward)		Перемещает изображение на верхний слой
	Переместить назад (Send Backward)		Перемещает изображение на нижний слой
	Повернуть влево (Rotate Left) .		Поворачивает изображение против часовой стрелки на 90 градусов
	Повернуть вправо (Rotate Right)		Поворачивает изображение по часовой стрелке на 90 градусов
	Отразить слева направо (Flip Horizontal)		Отражает изображение относительно вертикальной оси (создает горизонтальное зеркальное отражение)
	Отразить сверху вниз (Flip Vertical)		Отражает изображение относительно горизонтальной оси (создает вертикальное зеркальное отражение)
	Увеличить контрастность (More Contrast)		Увеличивает контрастность изображения
	Уменьшить контрастность (Less Contrast)		Уменьшает контрастность изображения
	Увеличить яркость (More Brightness)		Увеличивает яркость изображения
	Уменьшить яркость (Less Brightness)		Уменьшает яркость изображения
	Тип линии (Line Style)		Задает стиль линии
		Обрезка (Crop)		Обрезает изображение, находящееся вне выделенного контура
		Установить прозрачный цвет (Set Transparent Color)		Делает прозрачным один из цветов изображения, представленного в формате GIF
		Цвет (Color)		Открывает меню, содержащее команды, управляющие цветом изображения. Так, например, команда Оттенки серого (GrayScale) преобразовывает цветное изображение в полутоновое, а Черно-белое (Black & White) — в черно-белое. Команда Размытие (Wash Out) делает изображение более блеклым
		Багетная рамка (Bevel)		Придает изображению эффект выпуклости
		Сокращение цветов (Resample)		Устраняет небольшие дефекты изображения, возникающие при изменении его размеров
		Выбрать (Select)		Выбирает объект
		Гиперпрямоугольник (Rectangular Hotspot)		Размещает на изображении активную область в виде прямоугольника, используемую для создания гиперссылки
		Гиперкруг (Circular Hotspot)		Размещает на изображении активную область в виде круга, используемую для создания гиперссылки
		Гипермногоугольник (Polygonal Hotspot)		Размещает на изображении активную область в виде многоугольника, используемую для создания гиперссылки
		Выделить гиперобъекты (Highlight Hotspots)		Показывает все размещенные на изображении активные области
		Восстановить (Restore)		Отменяет все последние изменения в графическом изображении с момента последнего сохранения файла

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

Перед использованием средств редактирования изображения создайте резервную копию изображения
Получив приемлемый промежуточный результат, сохраните его
В том случае, если ваши действия ухудшили изображение, воспользуйтесь кнопкой Восстановить (Restore) на панели инструментов Рисунки. Она отменит все выполненные вами действия с момента последнего сохранения результатов работы.

Рассмотрим несколько примеров использования кнопок панели инструментов Рисунки.

Вращение изображения

На панели инструментов размещены 4 кнопки, позволяющие в режиме редактирования графического изображения развернуть рисунок: Повернуть влево (Rotate Left), Повернуть вправо (Rotate Right), Отразить слева направо (Flip Horizontal) и Отразить сверху вниз (Flip Vertical).

При нажатии кнопки Повернуть влево изображение поворачивается против часовой стрелки, а кнопки Повернуть вправо — по часовой стрелке на 90°.

Кнопка Отразить слева направо на панели инструментов Рисунки используется в том случае, если нужно получить зеркальное изображение исходного графического изображения. Для получения перевернутого изображения выделите его и нажмите кнопку Отразить сверху вниз.

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

На рис. 15.16 представлен пример обработки изображения с использованием этих кнопок. Первое изображение является исходным, четыре остальных — результат применения поворота по часовой стрелке, против часовой стрелки, а также эффекта зеркального отражения и эффекта переворачивания.

Изменение яркости и контраста

В том случае, если необходимо немного подкорректировать контрастность изображения, вы можете воспользоваться кнопками Увеличить контрастность (More Contrast) и Уменьшить контрастность (Less Contrast) на панели инструментов Рисунки, увеличивающей и уменьшающей, соответственно, значение данного параметра. Для изменения яркости предназначены кнопки Увеличить яркость (More Brightness) и Уменьшить яркость (Less Brightness).

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

Вырезание части изображения

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

1. Выделите изображение.
2. Нажмите на панели инструментов Рисунки кнопку Обрезка (Crop).
3. Вокруг всего изображения появляется рамка с маркерами выделения. Устанавливая курсор поочередно на маркеры, перемещайте контуры рамки, изменяя размер ограничиваемой рамкой области таким образом, чтобы она выделила на изображении нужную область. Для перемещения рамки по изображению используйте клавиши со стрелками на клавиатуре.

Совет

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

4. После того как необходимая часть изображения выделена рамкой, нажмите еще раз кнопку Обрезка или клавишу <Enter>.

На рис. 15.17 показано исходное изображение и изображение, полученное в результате обрезки.

Рис. 15.17. Изображение и вырезанная его часть

Применение опции прозрачности

Кнопка Установить прозрачный цвет (Set Transparent Color) на панели инструментов Рисунки позволяет сделать прозрачным один из цветов, используемых в изображении. Данная операция может быть применена только к графическим файлам в формате GIF.

Для преобразования одного из цветов изображения в прозрачный выполните следующие действия:

1. Выделите изображение, к которому хотите применить данный эффект.
2. Нажмите на панели инструментов Рисунки кнопку Установить прозрачный цвет.
3. Если ваше изображение имеет формат, отличный от GIF, на экране появляется запрос на изменение формата файла (рис. 15.18). Если вы хотите продолжить выполнение операции, нажмите кнопку ОК.

Рис. 15.18. Запрос на преобразование файла в формат GIF

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

На рис. 15.19 представлены два изображения. Первое является исходным, второе — результат применения эффекта преобразования цвета в прозрачный.

Рис. 15.19. Результат применения к изображению эффекта преобразования цвета в прозрачный

Замечание

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

Преобразование в полутоновое изображение

В том случае, если вы хотите уменьшить размер графического файла, содержащего изображение (что позволит ускорить его загрузку в обозреватель), можете преобразовать исходное изображение в полутоновое. Для этого на панели инструментов Рисунки нажмите кнопку Цвет (Color) и выберите из появившегося меню команду Оттенки серого (Grayscale).

При сохранении файла, к которому применен эффект преобразования в полутоновое изображение, информация о цвете теряется.

Эффект объемности

В том случае, если вы хотите использовать размещенное на Web-странице изображение в качестве ссылки, можете придать ему объемность, воспользовавшись кнопкой Багетная рамка (Bevel) на панели инструментов Рисунки. При этом изображение принимает вид трехмерной кнопки за счет того, что его верхняя и правая граница затемняются, а нижняя и левая — осветляются.

Эффект размытия

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

Чтобы применить к графическому изображению эффект размытия, нажмите на панели инструментов Рисунки кнопку Цвет (Color) и выберите из появившегося меню команду Размытие (Wash Out).

Рис. 15.20. Результат применения к изображению эффекта размытия

Автоэскизы

Кнопка Автоэскизы (Auto Thumbnail) на панели инструментов Рисунки позволяет представить графическое изображение в уменьшенном виде, оформленном как автоэскиз.

Совет

Для преобразования изображения в автоэскиз можно также использовать комбинацию клавиш <С1г1>+<Т>.

Прежде чем автоэскиз создавать, необходимо настроить его параметры. Для настройки параметров автоэскиза используется вкладка Автоэскизы (Auto Thumbnail) диалогового окна Параметры страницы (Page Options) (рис. 15.21), открываемого при выборе из меню Сервис (Tools) команды Параметры страницы (Page Options).

Рис. 15.21. Диалоговое окно для настройки параметров автоэскизов

Используя раскрывающийся список Задать (Set) вкладки Auto Thumbnail, вы можете задать один из следующих параметров автоэскиза (в пикселах):

по ширине (Width) — высота миниатюры
по высоте (Height) — ширина миниатюры
по меньшей стороне (Shortest side) — наименьший размер
по большей стороне (Longest side) — наибольший размер

Замечание

С помощью списка Задать (Set) вы устанавливаете один из размеров автоэскиза. Второй размер устанавливается программой FrontPage автоматически исходя из размеров исходного изображения с учетом сохранения его пропорций.

Чтобы миниатюра, создаваемая с помощью кнопки Автоэскизы (Auto Thumbnail), была помещена в рамку, необходимо на вкладке Автоэскизы диалогового окна Параметры страницы установить флажок Толщина границы (Border thickness). Для задания толщины рамки используется поле Точек (Pixels), расположенное рядом с этим флажком.

Для придания миниатюре эффекта объемности установите флажок Рельефная граница (Beveled edge). При этом создаваемая миниатюра будет иметь вид кнопки.

Замечание

Результаты, полученные при установке флажка Рельефная граница, аналогичны результатам после нажатия кнопки Багетная рамка (Bevel) на панели инструментов Рисунки.

Задание фонового звука страницы

Мультимедиа играет большую роль в World Wide Web. В путешествии по сети Интернет вы, наверное, не раз встречали ссылки на аудио- и видеофайлы, для воспроизведения которых используются специальные проигрыватели, являющиеся составной частью системы Windows. Программа FrontPage поддерживает следующие звуковые форматы:

RealMedia (RAM, RA)
Wave sound (WAV)
MIDI sequencer (MID)
AIFF sound (AIF)
AU sound (AU)

Для своего Web-узла вы можете задать фоновый звук, который будет включаться при его открытии и воспроизводиться заданное количество раз. Для этого выполните следующие действия:

1. В меню Файл (File) выберите команду Свойства (Properties) или в контекстном меню страницы выберите команду Свойства страницы (Page Properties). Появляется одноименное диалоговое окно (рис. 15.22) с открытой по умолчанию вкладкой Общие (General).
2. В поле Расположение (Location) области Фоновый звук (Background sound) введите расположение и имя звукового файла. Для поиска файла вы можете использовать диалоговое окно Фоновый звук (рис. 15.23), открываемое после нажатия кнопки Обзор (Browse) и предлагающее выбрать файл из папок текущего Web-узла, с диска или из Интернета. Завершив выбор файла, нажмите кнопку ОК.
3. В поле Повтор (Loop) введите количество повторений звучания файла.

Рис. 15.22. Диалоговое окно Свойства страницы

Рис. 15.23. Диалоговое окно Фоновый звук

Замечание

Если хотите, чтобы звук воспроизводился непрерывно, установите флажок Непрерывно (Forever). Но не злоупотребляйте звуковыми эффектами. Звучащая непрерывно мелодия может многих раздражать.

4. Нажмите кнопку ОК для закрытия диалогового окна Свойства страницы.
5. Сохраните страницу. В открывшемся диалоговом окне Сохранение внедренных файлов (Save Embedded Files) в случае необходимости измените имя звукового файла, укажите его расположение в папках Web-узла и нажмите кнопку ОК.

Размещение видеозаписи и настройка ее свойств

FrontPage позволяет размещать на Web-страницах видеозаписи в формате AVI, позволяя тем самым оживить отображаемую информацию. При загрузке такого файла Internet Explorer автоматически загружает проигрыватель для его воспроизведения. Необходимо только при размещении видеозаписи на Web-страницах учитывать, что они имеют большой объем и замедляют загрузку Web-узла.

Для размещения видеозаписи выполните следующие действия:

1. Установите курсор в место предполагаемого размещения видеофайла.
2. В меню Вставка (Insert) выберите команду Рисунок (Picture), а затем в открывшемся меню — опцию Видеозапись (Video).
3. На экране открывается диалоговое окно Видео (Video), предлагающее выбрать файл из папок текущего Web-узла, с диска, из Интернета. Выбрав необходимый файл, нажмите кнопку ОК. Диалоговое окно закроется, а видеозапись будет размещена на странице.
4. После того как видеозапись размещена, необходимо настроить ее свойства. Для этого выделите созданный объект и откройте окно его свойств, выполнив одно из следующих действий:

Выберите в меню Формат (Format) команду Свойства (Properties)
Выберите в контекстном меню команду Свойства рисунка (Picture Properties)
Нажмите комбинацию клавиш <Alt>+<Enter>

В открывшемся диалоговом окне Свойства рисунка (Picture Properties) (рис. 15.24) по умолчанию будет открыта вкладка Видеозапись (Video). Поле Источник видеозаписи (Video source) указывает расположение и наименование размещенной на Web-странице видеозаписи.

5. В поле Повтор (Loop) области Повторять (Repeat) укажите число повторений видеозаписи, а в поле Задержка повтора (Loop delay) — интервал (в миллисекундах) между повторениями.

Рис. 15.24. Вкладка Видеозапись диалогового окна Свойства рисунка

Замечание

Если вы хотите, чтобы видеозапись воспроизводилась в течение всего просмотра Web-страницы, установите флажок Forever (Непрерывно).

6. Параметры области Начать (Start) позволяют задать момент начала воспроизведения видеозаписи. Чтобы видеозапись запускалась при загрузке Web-страницы в обозреватель, установите флажок при открытии файла (On file open). Для запуска файла на воспроизведение при указании на него курсора установите флажок при наведении указателя мыши (On mouse over).
7. Завершив установку параметров, нажмите кнопку ОК для закрытия диалогового окна.

Использование тем в оформлении страницы

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

Для просмотра тем, предлагаемых программой FrontPage, выполните одно из следующих действий:

Выберите в меню Формат (Format) команду Тема (Theme)
Отобразите контекстное меню страницы и выберите из него команду Тема

В результате на экране откроется диалоговое окно Темы (Themes) (рис. 15.26).

Рис. 15.26. Диалоговое окно Темы

В левой части этого диалогового окна расположен переключатель Применить тему (Apply Theme to), содержащий две опции, которые позволяют указать, на какие страницы Web-узла будут распространяться выбранные установки:

ко всем страницам (All pages) — выбранная тема оформления будет применена ко всем страницам Web-узла
к выбранным страницам (Selected page(s)) — выбранная тема будет применена только к указанным вами страницам

Ниже находится список тем оформления, предлагаемых программой FrontPage. Просмотрите этот список. При выборе того или иного образца в области Образец темы (Sample of Theme) вы можете увидеть, как будут выглядеть заголовки, маркеры оформления списков, кнопки навигации, гиперссылки при использовании данной темы в оформлении страницы.

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

Флажок	Назначение
Яркие цвета (Vivid colors)	Используемые в оформлении цвета становятся более насыщенными
Активные рисунки (Active graphics)	Добавляется активная графика
Фоновый рисунок (Background picture)	Добавляется фоновое изображение
Применить с помощью CSS (Apply using CSS)	Добавляется внешняя таблица стилей CSS

Рис. 15.27. Вид диалогового окна Темы после нажатия кнопки Изменить

При нажатии кнопки Изменить (Modify), расположенной в нижней части диалогового окна Темы (Themes), появляются кнопки Цвета (Colors), Графика (Graphics), Текст (Text), Сохранить как (Save As), позволяющие на основе предложенных тем создать собственную, модифицировав используемую цветовую гамму, оформление графических элементов и шрифты (рис. 15.27). Созданную пользовательскую тему затем можно применять при оформлении разрабатываемых Web-страниц.

Изменение цветовой схемы темы

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

1. В диалоговом окне Темы выберите тему, которую хотите взять за основу при создании собственной темы, и нажмите кнопку Изменить.
2. Нажмите кнопку Цвета (Colors). Откроется диалоговое окно Изменение темы (Modify Theme).
3. На вкладке Цветовые схемы (Color Schemes), выбирая из списка цветовые схемы, предложенные программой FrontPage, и просматривая их в области Пример темы (Sample of Theme), подберите подходящую (рис. 15.28).

Рис. 15.28. Вид диалогового окна Изменение темы при изменении цветовой схемы

4. Перейдите на вкладку Цветовой круг (Color Wheel). Используя движок Яркость (Brightness), установите необходимую яркость подобранной цветовой схемы.
5. На вкладке Другой (Custom), используя списки Элемент (Item) и Цвет (Color), вы можете по своему усмотрению изменить цвета любого элемента оформления Web-страницы: гиперссылок, активных гиперссылок, заголовков любого уровня, панелей управления и т. д. Список Элемент содержит следующие настраиваемые элементы:

Гиперссылки
Гиперссылка (активная)
Гиперссылка (использованная)
Граница таблицы
Заголовок 1 — Заголовок 6
Основной текст
Текст объявления
Текст панели переходов
Фон

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

6. Завершив установку всех необходимых параметров, нажмите кнопку ОК для закрытия диалогового окна Изменение темы.
7. Чтобы сохранить созданную тему, нажмите кнопку Сохранить как (Save As). На экране появляется диалоговое окно Сохранение темы (Save Theme) (рис. 15.29), в котором введите наименование темы и нажмите кнопку ОК.

Предупреждение

В диалоговом окне Темы для сохранения результатов модификации можно использовать кнопку Сохранить (Save). Но в этом случае, если вы решите отказаться от введенных изменений, восстановление исходной темы потребует значительных усилий. Лучше модифицированную схему сохранить под новым именем.

Рис. 15.29. Диалоговое окно Сохранение темы

Посмотрите на список тем в диалоговом окне Темы. В нем появилось наименование созданной вами темы. При установке курсора мыши на созданную тему становится доступной кнопка Удалить (Delete), с помощью которой можно удалить из списка пользовательские темы, если они больше не нужны. Данная кнопка не позволяет удалять темы, входящие в состав программы FrontPage.

Изменение оформления графических элементов

Программа FrontPage предоставляет возможность изменять оформление графических элементов в теме. Для этого используется диалоговое окно Изменение темы (Modify Theme), открываемое при нажатии кнопки Графика (Graphics). Чтобы изменить оформление графических элементов, выполните следующие действия:

В диалоговом окне Темы (Themes) выберите созданную вами тему.
2. Нажмите кнопку Графика (Graphics). На экране открывается диалоговое окно Изменение темы (рис. 15.30), содержащее две вкладки Рисунок (Picture) и Шрифт (Font).

Рис. 15.30. Вид диалогового окна Изменение темы, используемого для изменения оформления графических элементов

3. В верхней части диалогового окна расположен список Элемент (Item) настраиваемых графических объектов:

Горизонтальная линейка (Horizontal Rule)
Кнопка "Вверх" (Quick Up Button)
Кнопка "Вперед" (Quick Next Button)
Кнопка "Назад" (Quick Back Button)
Кнопка "Домой" (Quick Home Button)
Кнопки глобальных переходов (Global Navigation Buttons)
Маркированный список (Bullet List)
Объявления (Banner)
Переходы по вертикали (Vertical Navigation)
Переходы по горизонтали (Horizontal Navigation)
Фоновый рисунок (Background Picture)

Выберите из этого списка настраиваемый графический объект и откройте вкладку Рисунок (Picture).

4. На вкладке Рисунок вы можете указать графический файл, который будет использоваться при оформлении выбранного элемента. Для этого введите в поле ввода расположение и наименование файла или для выбора файла воспользуйтесь кнопкой Обзор (Browse). После нажатия этой кнопки открывается диалоговое окно Открытие файла (Select Picture), позволяющее выбрать графический файл из папок открытого Web-узла, в Интернете или на диске.
5. Перейдите на вкладку Шрифт. Она содержит списки Шрифт (Font), Размер (Size), Начертание (Style), Выровнять по оси X (Horizontal Alignment) и Выровнять по оси Y (Vertical Alignment), позволяющие в оформлении выбранного элемента изменить шрифт, его размер, стиль и задать выравнивание текстовой информации, размещенной на этом графическом элементе.
6. Настроив необходимые графические элементы, нажмите кнопку ОК для закрытия диалогового окна Изменение темы.
7. Сохраните введенные изменения, нажав кнопку Сохранить (Save) диалогового окна Темы (Themes).

Изменение оформления текстовых элементов

Если необходимо изменить в теме, предложенной программой FrontPage, оформление только текстовых элементов, воспользуйтесь диалоговым окном Изменение темы (рис. 15.31), открываемым при нажатии кнопки Текст (Text) в диалоговом окне Темы (Themes). верхней части открывшегося диалогового окна расположен список Элемент (Item) настраиваемых объектов. Среди них находятся заголовки всех уровней и текстовая информация Web-страницы. Список Шрифт (Font) coдержит все шрифты, доступные на вашем компьютере.

Используя данные списки, измените необходимые параметры и нажмите кнопку ОК для закрытия диалогового окна.

Рис. 15.31. Вид диалогового окна Изменение темы при изменении оформления текст

Добавить в избранное || Продолжаем создание Web-узла || Введение || Создание текстовых и графических гиперссылок

top

графика, хтмл, для, начинающий, начинающих, чайников, новичков, просто, основа, основы, графика, страница, домашний, домашняя, сайт, новый, новичок, html, обучение, учеба, пример, веб, мастер, веб-мастер, дизайн, веб-дизайн, вебдизайн, дезайн, веб-дезайн, вебдезайн, дезайнер, дизайнер, ступени, тэги, тэг, теги, тег, аттрибут, атрибуты, парамет, design, web, help, помощь, icq, e-mail, guest, book, guestbook, гостевая, книга, форум, аська, контакт, ссылка, link, links, banner, обмен, баннер, баннерами, банер, baner, друзья, friends, почитать, написать, вопросы, вопрос, ответ, проект, ступени, словарь, excel, exel, excell, exsel, эксель, ексель, для, начала, сначала, таблицы, форматирование, ряды, строки, ячейка, начинающий, начинающих, чайников, новичков, просто, основа, основы

Хостинг от uCoz