Сохранение изображений

Размещенные на странице изображения не сохраняются в файле HTML; они записываются как отдельные файлы соответствующего формата (GIF или JPEG), а в коде HTML указываются только ссылки на их местоположение. Процесс сохранения изображений зависит от того, открыт ли в этот момент Проводник.

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

Если вы работаете, не используя Проводник, то Frontpage вообще не станет задавать вопросы относительно сохранения изображений и будет записывать их по тому пути, откуда они были взяты и с тем же именем. При этом не забывайте, что для последующего воспроизведения Frontpage должен иметь доступ к этим изображениям; другими словами, в этом режиме не следует вставлять в страницу изображения с дискеты или из Internet, не сохранив их предварительно на своем компьютере.

Работа с Проводником

Если при работе в Редакторе Проводник у вас открыт и вы вставляете в страницу изображения откуда-либо помимо текущего сайта, то при очередном сохранении страницы вам будет предложено записать файлы изображений. Для этого используется диалоговое окно Save Embedded Files, показанное на рис. 8.5.

Рис. 8.5. Диалоговое окно Save Embedded Files

В левой части окна вы увидите список файлов, подлежащих сохранению, с указанием их имен, местоположения и способа сохранения. При выборе файла из этого списка в окне Image Preview (Предварительный просмотр изображения) вы увидите миниатюрное изображение его содержимого. Используя соответствующие кнопки, вы можете также переименовать файл (кнопка Rename), сохранить его в другом месте (Change Folder), а также изменить способ сохранения (Set Action). По окончании нажмите кнопку ОК. Frontpage сохранит ваши файлы.

Коллекция иллюстраций

Frontpage располагает целой коллекцией иллюстраций (Clip Art), а помимо этого ему доступна библиотека иллюстраций Microsoft Office (если таковой у вас установлен). Добраться до коллекции иллюстраций можно двумя способами: либо по нажатию кнопки Clip Art диалогового окна Image, либо командой Clipart меню Insert. В обоих случаях вы увидите диалоговое окно Microsoft Clip Gallery, показанное на рис. 8.6.

Рис. 8.6. Диалоговое окно Microsoft Clip Gallery

Из четырех имеющихся вкладок выберите: Clip Art (Иллюстрации), Pictures (Изображения), Sounds (Звуки) или Video (Видео). После того как вы найдете нужное изображение, выберите его в окне предварительного просмотра и нажмите Insert (Вставить). Если вы просматриваете звуки или видеоролики, то прежде чем вставлять, вы можете их проиграть, нажав кнопку Play. Если вам не понравились предложенные изображения, то вы можете нажать кнопку Connect to Web for additional clips (Пойти за дополнительными иллюстрациями в Internet), находящуюся в правой нижней части диалогового окна. В этом случае вы сразу попадете на сайт www.microsoft.com, где найдете десятки бесплатных иллюстраций. Любые выбранные здесь изображения будут автоматически добавлены к вашей библиотеке.

Ваши дальнейшие действия

После того как вы разместили изображения на ваших страницах, Frontpage предоставит массу возможностей управления ими посредством диалогового окна Image Properties. Здесь вы найдете такую полезную информацию об изображении, как его тип, размеры и многое другое. В ваше распоряжение также предоставляется целый набор инструментов редактирования изображения, доступных на панели Image (все они подробно обсуждаются далее в этой главе).

Изменение свойств изображения

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

1. Выбрать изображение в Редакторе, щелкнув на нем мышью.

2. Выбрать в меню Edit пункт Image Properties. Вы увидите диалоговое окно Image Properties, показанное на рис. 8.7, состоящее из трех вкладок:
General (Общие), Video (Видео) и Appearance (Оформление).

Рис. 8.7. Диалоговое окно Image Properties

3. Внести необходимые изменения. По окончании изменения параметров настройки нажмите кнопку ОК. Естественно, эти параметры не будут высечены в камне, поэтому если вам снова потребуется их изменить, то вы в любой момент сможете вернуться к диалоговому окну Image Properties.

Ниже детально рассматриваются параметры настройки диалогового окна, начиная с вкладки General.

Подсказка:   Вывести диалоговое окно Image Properties можно, щелкнув по изображению правой кнопкой мыши и выбрав в появившемся меню пункт Image Properties. Еще быстрее открыть диалоговое окно Image Properties можно, выделив изображение и нажав комбинацию клавиш <Alt>+<Enter>.

На вкладке General вы найдете следующие параметры:

• Image Source (Источник изображения). В этом текстовом поле стоит либо относительный URL изображения, находящегося на открытом сайте Frontpage, либо абсолютный URL, если изображение берется из Internet, либо путь и имя локального файла, если оно располагается на вашем компьютере. Если вы хотите сменить изображение, то нажмите кнопку Browse; откроется диалоговое окно Image. Если вы хотите открыть изображение для дальнейшей обработки в графическом редакторе, нажмите кнопку Edit

• Type (Тип). В этом разделе задается формат текущего изображения (GIF или JPEG) и специфические для выбранного формата параметры. Положение переключателя Type соответствует текущему формату; если вы поставите его в другое положение, формат изображения будет автоматически преобразован

При выборе опции GIF вы можете задать следующие свойства изображения: Transparent (Прозрачный) и Interlaced (Чересстрочный); оба параметра можно задать одновременно.

• Transparent. Эта опция допустима только для изображений в формате GIF; флажок Transparent автоматически устанавливается в том случае, если в изображении присутствует прозрачный цвет. Для того чтобы вернуть невидимым частям изображения нормальный цвет и сделать изображение непрозрачным, уберите этот флажок. Как сделать цвет прозрачным, объяснено ниже в этой главе

• Interlaced. Если установлен переключатель Interlaced, то изображение при просмотре в браузере будет проявляться постепенно, сначала грубо, становясь по мере загрузки более четким

При выборе опции JPEG становится доступным поле Quality (Качество).

• Quality (Качество). Качество изображения варьируется в пределах от 1 до 100. Большее значение означает меньшую степень сжатия и более высокое качество изображения; однако это также означает и больший размер файла изображения и более длительную загрузку. Чем меньше это значение, тем, соответственно, больше сжатие, что влечет за собой ухудшение качества изображения, но вместе с тем и уменьшение размера файла. По умолчанию значение Quality равно 75

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

• Low-Res (Низкое разрешение). Здесь задается изображение с грубым разрешением, которое во время загрузки изображения с высоким разрешением будет отображаться вместо него. Нажмите кнопку Browse, выберите альтернативное изображение и затем нажмите кнопку ОК. Для знатоков HTML: задание альтернативного изображения эквивалентно использованию атрибута LOWSRC

Совет:  Ни Frontpage, ни браузер не проверяют, является ли в действительности грубое изображение версией реального изображения в низком разрешении. В качестве грубого изображения удобно использовать полутоновую версию с небольшим количеством цветов.

• Text (Текст). В этом поле задается альтернативный текст, который появится вместо изображения, если отображение графики в браузере пользователя отключено или отсутствует вовсе. Если вы не считаете нужным отказывать этим посетителям в гостеприимстве, не пожалейте времени на то, чтобы снабдить текстом весь графический материал вашего сайта. В некоторых браузерах этот текст выводится во время загрузки изображения. По умолчанию Frontpage вставит в это поле имя и размер изображения; вы же, со своей стороны, можете произвольным образом изменить эту информацию

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

Чтобы установить ссылку по умолчанию: Нажав кнопку Browse, вы увидите диалоговое окно Edit Hyperlink. В качестве ссылки вы можете использовать одну из открытых в настоящее время страниц; страницу или файл с сайтов WWW, Gopher, Newsgroup или FTP; наконец, новую страницу. Нажав кнопку Make a hyperlink that sends E-mail, вы поставите ссылку, с которой можно будет отправлять электронную почту. Установите ссылку; чтобы вернуться в диалоговое окно Image Properties, нажмите OK

Чтобы изменить ссылку по умолчанию: Если с изображением уже связана гиперссылка, нажмите кнопку Browse; вы увидите диалоговое окно Edit Hyperlink. Редактирование ссылки производится точно так же, как и установка. Отредактируйте ссылку и нажмите кнопку ОК, чтобы вернуться в диалоговое окно Image Properties.

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

Для присоединения или редактирования связанной с изображением таблицы стилей нажмите кнопку Style. Более подробно о таблицах стилей написано в главе 10.

Вкладка Video диалогового окна Image Properties, показанная на рис. 8.8, позволяет помещать на страницу файлы типа AVI (аудио- и видеофайлы). Изображение, заданное на вкладке General, используется в качестве заставки на время загрузки файла AVI. Добавление на страницу видеороликов с помощью команды Video меню Insert выглядит немного иначе; более подробно об использовании команды Video было рассказано в главе 7.

Рис. 8.8. Вкладка Video диалогового окна Image Properties

• Video Source (Источник видеоданных). В этом поле вы можете ввести путь и имя вашего видеофайла или указать файл, используя кнопку Browse

• Show Controls in Browser (Показывать в браузере элементы управления). При установленном флажке вместе с видеороликом в браузере будут отображаться следующие элементы управления: Play (Пуск), Stop (Стоп) и ползунок перемотки ролика

• Repeat (Повтор). В этом разделе устанавливается частота и момент начала воспроизведения видеофайла

• Loop (Цикл). Укажите в этом поле число повторений вашего видеофрагмента

• Loop fielay (Задержка). Этот параметр задает временной интервал в миллисекундах между последовательными повторениями

• Forever (Всегда). Установите этот флажок в том случае, если вы хотите, чтобы видеоролик крутился все время показа страницы

• Start (Запуск). В этом разделе вы можете указать момент времени начала проигрывания видеофайла

• On File Open (При открытии файла). При установке этого флажка видеоролик будет запущен сразу после загрузки в браузер

• On Mouse Over (По курсору мыши). При установке этого флажка воспроизведение видеофайла начнется в тот момент, когда пользователь установит на его заставку курсор мыши

Третья вкладка диалогового окна Image Properties называется Appearance (рис. 8.9), с ее помощью вы будете управлять некоторыми параметрами оформления изображения.

Рис. 8.9. Вкладка Appearance диалогового окна Image Properties

• Layout (Размещение). В этом разделе определяется положение изображения на странице

• Alignment (Выравнивание). Задает характер выравнивания изображения по отношению к окружающему тексту. В вашем распоряжении несколько вариантов выравнивания

Bottom: Выравнивание текста по нижней границе изображения таким образом, что текст начинается внизу изображения

Middle: Выравнивание текста по середине изображения Тор: Выравнивание текста по верхней границе изображения

Absbottom: Выравнивание изображения по нижней границе текущей строки

Absmiddle: Выравнивание изображения по середине текущей строки

Texttop: Выравнивание верхней границы изображения по верху самого высокого текста в строке

Baseline: Выравнивание изображения по опорной линии текущей строки

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

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

Совет:   Управлять расположением изображения (слева, справа и по центру страницы) можно также при помощи кнопок выравнивания панели инструментов Редактора. Все эти операции происходят в режиме WYSIWYG, так что вы сразу сможете оценить, как изображение будет выглядеть в браузере.

Эти установки имеют смысл только для изображений, расположенных на одной строке с текстом. Если изображение является в строке единственным элементом, то выравнивание будет иметь значение Bottom.

• Border Thickness (Толщина рамки). Задает ширину (в пикселах) черной рамки вокруг изображения. Чтобы изменить ширину, выделите значение в текстовом поле и введите вместо него новое

• Horizontal Spacing (Горизонтальный интервал). Задает горизонтальный интервал в пикселах до ближайшего изображения или текста с обеих сторон изображения