Работа в Microsoft FrontPage XP
         

Добавление графических клипов


FrontPage позволяет легко добавлять на веб-страницу все виды мультимедиа, включая графику, изображения, видеоклипы и даже звуковые эффекты. Если вы ищете способ быстрого и простого графического представления без лицензионных затрат, то достаточно простым решением является использование графических клипов (clip art). Довольно большая библиотека графических клипов поставляется вместе с Microsoft Office XP, и практически неограниченные возможности выбора предоставляются на сайте Microsoft Design Gallery Live по адресу dgl.microsoft.com. Если ни в одном из этих источников нет того, что вам нужно, вы можете найти сотни небольших галерей графических клипов в Web. Вы можете также приобретать диски CD-ROM с графическими клипами, многие из которых посвящены определенным темам или определенным стилям графических клипов.

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

Новый и улучшенный органайзер клипов (Clip Organizer, который раньше назывался Clip Gallery) позволяет осуществлять доступ к медиа-файлам и организовывать их с помощью простого интерфейса панели задач. Clip Organizer содержит сотни новых графических клипов и помогает легко находить дополнительные цифровые изображения в World Wide Web.

Вы можете осуществлять поиск, доступ и вставку для разнообразных медиа-файлов из панели задач Вставка картинки (Insert Clip Art). Кроме традиционных графических клипов, которые обычно представляют из себя нечто аналогичное анимационным рисункам, вы можете делать выбор среди фотографий, фрагментов из фильмов и звуков. Использование этой огромной области ресурсов интересно само по себе!

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




Для этого упражнения не требуется никакой рабочей папки.

Выполните следующие шаги.

    Если программа FrontPage еще не открыта, запустите ее. Если новая страница еще не открыта, щелкните на кнопке Создание новой обычной страницы (Create a new normal page)
    , чтобы открыть новую пустую страницу и использовать ее как "холст" для вашей графики. В меню Вставка (Insert) укажите пункт Рисунок (Picture) и затем выберите пункт Картинки (Clip Art). Если вы открыли панель задач Вставка картинки (Insert Clip Art) в первый раз, то появится диалоговое окно Добавление клипов в коллекцию (Add Clips to Organizer).



    Чтобы включать в каталог медиа-файлы, выполните следующее. Щелкните на кнопке Параметры (Options), чтобы получить доступ к следующему списку папок, из которого будут импортироваться графические клипы.



    Щелкните на кнопке Отмена (Cancel), чтобы подтвердить использование заданных по умолчанию папок импорта и закрыть диалоговые окна Параметры автоматического импорта (Auto Import Settings) и Добавление клипов в коллекцию (Add Clips to Organizer). В меню Вставка (Insert) укажите пункт Рисунок (Picture) и снова выберите пункт Картинки (Clip Art).

    Теперь щелкните на кнопке Сейчас (Now), чтобы каталогизировать все медиа-файлы, имеющиеся на вашем компьютере.

    По окончании процесса каталогизации панель задач Вставка картинки (Insert Clip Art) изменится, как это показано на рисунке.



    Проследите за тем, чтобы в поле Искать объекты (Results should be) был представлен вариант Все файлы мультимедиа (All media file types), после чего выполните поиск графического клипа, связанного с садоводством, набрав в поле Искать текст (Search text) слово сад и щелкнув на кнопке Найти (Search). Результаты поиска будут представлены в окне Результаты (Results).



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

    FrontPage выполнит вставку выбранного изображения на вашей странице в заданной точке ввода, как это показано ниже.


    увеличить изображение

    Как видите, графический клип имеет слишком большие размеры. Ниже в этой лекции мы покажем, как изменять размеры изображений. Щелкните на кнопке Закрыть (Close) этого файла, чтобы закрыть текущий файл; когда получите запрос сохранения этой работы, щелкните на кнопке Нет (No).



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


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

Команды редактирования и форматирования изображений содержатся в панели инструментов Рисунки (Pictures).


увеличить изображение

Щелкните на кнопке Добавить рисунок из файла (Insert Picture From File), чтобы открыть диалоговое окно Рисунок (Picture), где вы можете выполнить поиск и вставку другого изображения.Используйте кнопку Текст (Text), чтобы создать в области изображения текстовое окно, в котором можете ввести собственный текст.Щелкните на кнопке Автоэскизы (Auto Thumbnail), чтобы создать небольшую версию вашего изображения, которая становится гиперссылкой на исходное изображение. Посетители могут щелкать на этой миниатюре, чтобы получать доступ к полноразмерной версии.Используйте кнопки Абсолютное (Absolutely), Переместить вперед (Bring Forward) и Переместить назад (Send Backward) для управления местоположением изображения относительно других элементов: перемещение вместе с окружающим текстом либо размещение впереди или позади других объектов.Используйте кнопки Повернуть влево (Rotate Left), Повернуть вправо (Rotate Right), Отразить слева направо (Flip Horizontal) и Отразить сверху вниз (Flip Vertical) для поворота и отражения изображений.Используйте кнопки Увеличить контрастность (More Contrast), Уменьшить контрастность (Less Contrast), Увеличить яркость (More Brightness) и Уменьшить яркость (Less Brightness) для увеличения и уменьшения контрастности и яркости выделенного изображения.Используйте кнопку Обрезка (Crop) для обрезки изображения; это не сжатие изображения, а указанное вами отсечение лишних частей.Щелкните на кнопке Тип линии (Line Style), чтобы открыть диалоговое окно стилей линии, где вы можете изменять ширину, длину, цвет и форму линий.Щелкните на кнопке Формат полотна (Format Picture), чтобы открыть диалоговое окно Формат полотна (Format Picture).Используйте кнопку Установить прозрачный цвет (Set Transparent Color), чтобы указать, что заданный цвет будет прозрачным, когда изображение будет представлено на веб-странице.

Это очень удобно, когда нужно


Это очень удобно, когда нужно показать объект с необычным контуром (не имеющий прямых границ).Щелкните на кнопке Цвет (Color), чтобы изменить окраску изображения на черно-белую или в градациях серого либо получить "размытую" версию изображения.Щелкните на кнопке Багетная рамка (Bevel), чтобы создать эффект объемности.Используйте кнопку Сокращение цветов (Resample), чтобы повысить четкость изображения, которое было увеличено или сжато.Щелкните на кнопке Выбрать (Select), чтобы изменить курсор точки ввода на курсор, позволяющий выделять изображение для редактирования. Эта кнопка выбрана по умолчанию, когда открывается панель инструментов рисунков.Используйте кнопки Гиперпрямоугольник (Rectangular Hotspot), Гиперкруг (Circular Hotspot), Гипермногоугольник (Polygonal Hotspot) и Выделить гиперобъекты (Highlight Hotspots) для выделения и визуализации активных областей (карты отображений) на вашем изображении. Эти области можно использовать для создания гиперссылок, позволяющих переходить к другим изображениям, другим веб-страницам или другим сайтам. Их можно даже использовать для формирования сообщений электронной почты!Щелкните на кнопке Восстановить (Restore) для отмены всех изменений, внесенных в изображение после того, как была открыта панель инструментов Рисунки (Pictures).



Панель инструментов Рисунки (Pictures) появляется автоматически при выделении изображения для редактирования; вы можете также открыть ее сами в любой момент, щелкнув правой кнопкой на области панелей инструментов и выбрав из контекстного меню пункт Рисунки (Pictures).

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

Для этого упражнения не используется никакой рабочей папки.



Выполните следующие шаги.

    В стандартной панели инструментов щелкните на кнопке Создание новой обычной страницы (Create a new normal page), чтобы создать новую страницу. Если панель задач Вставка картинки (Insert Clip Art) еще не открыта, выберите в меню Вид (View) пункт Область задач (Task Pane) и выберите из раскрывающегося списка пункт Вставка картинки (Insert Clip Art). Если в панели задач Вставка картинки (Insert Clip Art) будут все еще представлены результаты предыдущего поиска, щелкните на кнопке Изменить (Modify), чтобы запустить новый поиск. В диалоговом окне Искать текст (Search text) наберите розы. В раскрывающемся списке поля Другие параметры поиска (Results should be) сбросьте флажки Картинки (Clip Art), Фильмы (Movies) и Звуки (Sounds), оставив установленным только флажок Фотографии (Photographs). Затем щелкните вне этого раскрывающегося списка, чтобы закрыть его, и щелкните на кнопке Искать (Search) для поиска изображений роз. Щелкните на фотографии для ее вставки. Закройте панель задач Вставка картинки (Insert Clip Art), чтобы освободить побольше пространства для работы. В меню Вид (View) укажите пункт Панели инструментов (Toolbars) и затем щелкните на пункте Картинки (Pictures), чтобы открыть панель инструментов Картинки (Pictures). Ваш экран будет выглядеть, как показано ниже.


    увеличить изображение

    Перетащите панель инструментов Картинки (Pictures) вниз для ее закрепления на нижней границе окна, чтобы она не закрывала розу. Щелкните на изображении, чтобы выделить его, и затем щелкните на кнопке Crop (Кадрирование)
    в панели инструментов Картинки (Pictures). На изображении появится штриховая рамка, определяющая границы области кадрирования. Перетаскивайте маркеры рамки кадрирования, чтобы оставить внутри этой рамки только центральную розу, как это показано ниже.


    увеличить изображение

    Рамка кадрирования указывается штриховой линией Снова щелкните на кнопке Обрезка (Crop), чтобы кадрировать изображение рамкой с заданной формой и размером. Дважды щелкните на изображении, чтобы появилось диалоговое окно Свойства рисунка (Picture Properties), как показано ниже.





    Установите флажок Задать размер (Specify size) и задайте в поле Ширина (Width) значение 200 пикселов. Чтобы избежать искажений, проследите за тем, чтобы был установлен флажок Сохранять пропорции (Keep aspect ratio). Высота автоматически изменится, чтобы сохранить пропорции при новой ширине. Щелкните на кнопке OK, чтобы закрыть это диалоговое окно и применить изменения. FrontPage изменит размеры изображения в соответствии с заданными значениями, как это показано ниже.


    увеличить изображение

    В панели инструментов Рисунки (Pictures) щелкните на кнопке Цвет (Color)
    . В раскрывающемся меню цветов выберите вариант Оттенки серого (Grayscale). Изображение будет преобразовано в оттенки серого, но сохранит исходный уровень детализации. В панели инструментов Рисунки (Pictures) щелкните на кнопке Багетная рамка (Bevel)
    .

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


    увеличить изображение

    Щелкните на кнопке Закрыть (Close) этого файла, чтобы закрыть текущий файл; когда получите запрос сохранения этой работы, щелкните на кнопке Нет (No).



Совершенствование сайта с помощью графики


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

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

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

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

В этой лекции вы будете работать с файлами, которые хранятся в следующих подпапках папки Office XP SBS\FrontPage\Chap20: AddPicture, Thumbnail и PhotoGallery.



Создание и отображение автоэскизов


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

pictures.htm

Для этого упражнения используется рабочая папка Office XP SBS\FrontPage\Chap20\Thumbnail.

Выполните следующие шаги.

    Откройте файл pictures.htm, находящийся в рабочей папке. Щелкните на изображении этой страницы, чтобы выделить его и открыть панель инструментов Рисунки (Pictures). В панели инструментов рисунков щелкните на кнопке Автоэскизы (Auto Thumbnail)
    . Изображение сожмется до размера миниатюры и будет окружено синей рамкой, что указывает на присутствие гиперссылки, см. ниже.


    увеличить изображение

    Гиперссылка связывает эту миниатюру с исходным изображением, которого уже нет на данной странице. Щелкните на кнопке HTML внизу окна просмотра и редактирования страниц, чтобы вывести на экран HTML-код, указывающий связь миниатюры с исходным изображением.

    HTML-код имеет следующий вид:

    <img border="2" src=="../../../WINDOWS/TEMP/FrontPageTempDir PH01245J [1]_small.jpg" width="100" height="151" xthumbnail-orig image="PH01245J[1].jpg"> Щелкните на кнопке обычного режима внизу окна просмотра и редактирования страниц. Перетащите маркеры выделенной миниатюры, чтобы сделать ее больше. При увеличении миниатюра станет размытой и "зернистой" (точечной), поскольку миниатюрная версия содержит меньше деталей, чем исходное изображение. Увидев результаты увеличения миниатюры, щелкните на кнопке Отмена (Undo)

    , чтобы вернуть миниатюру к прежнему размеру. Чтобы проверить гиперссылку этой миниатюры, щелкните на кнопке Просмотр (Preview) внизу окна просмотра и редактирования страниц, чтобы перейти в режим просмотра, и затем щелкните на миниатюре, чтобы открыть исходное изображение в панели просмотра. Решение проблем. Определенные типы файлов, включая файлы формата Windows Metafile (WMF), не открываются в панели просмотра. Для просмотра этих изображений нажмите и удерживайте клавишу (Ctrl), когда находитесь в панели Обычный (Normal), и щелкните на автоэскизе, чтобы открыть исходное изображение в отдельном окне. Чтобы увидеть действие гиперссылки автоэскиза для веб-посетителей, щелкните в стандартной панели инструментов на кнопке Просмотр в обозревателе (Preview in Browser)
    . Сохраните страницу и встроенные изображения, если появится соответствующий запрос. Ваша веб-страница откроется в вашем браузере с представленными на экране миниатюрой и гиперссылкой. Щелкните на миниатюре, чтобы вывести на экран полноразмерное изображение, и затем щелкните на кнопке браузера Назад (Back), чтобы вернуться к миниатюре. Закройте браузер, чтобы вернуться в программу FrontPage. Закройте данную страницу без сохранения изменений.



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


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

FrontPage 2002 позволяет осуществлять доступ к файлам изображений, находящимся на вашем компьютере, или на другом компьютере в вашей сети, или (при соединении в Internet) даже на каком-либо сайте.

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

Совет. Работая в программе FrontPage, вы можете легко преобразовывать графику файлов другого типа в формат GIF или JPG. В режиме просмотра страниц щелкните правой кнопкой на соответствующем изображении и затем выберите в контекстном меню пункт Свойства изображения (Picture Properties). В секции Тип (Type) на вкладке Общие (General) щелкните на GIF или JPG.

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

Для этого упражнения используется рабочая папкаOffice XP SBS\FrontPage\Chap20\AddPicture .

Выполните следующие шаги.

    В стандартной панели инструментов щелкните на кнопке Создание новой обычной страницы (Create a new normal page)
    , чтобы создать новую страницу. Новая страница откроется в окне просмотра и редактирования страниц, причем точка ввода будет помещена вверху страницы. В меню Вставка (Insert) укажите пункт Рисунок (Picture) и затем выберите пункт Из файла (From File), чтобы открыть диалоговое окно Рисунок (Picture). В диалоговом окне Рисунок (Picture) перейдите в рабочую папку.


    Файл Garden4.gif уже выделен, поскольку это единственный файл в данной папке. Если в этом диалоговом окне не показан предварительный вид изображения, щелкните на стрелке кнопки представлений в панели инструментов диалогового окна Рисунок (Picture) и затем выберите в раскрывающемся меню пункт Просмотр (Preview)
    . В диалоговом окне появится предварительный вид, как это показано ниже.


    увеличить изображение

    Щелкните на кнопке Вставить (Insert), чтобы выполнить вставку изображения на веб-странице в текущей точке ввода. Щелкните на кнопке Закрыть (Close)
    этого файла, чтобы закрыть текущий файл; когда получите запрос сохранения этой работы, щелкните на кнопке Нет (No).