Лабораторная работа по теме «Создание сайта с помощью HTML»

(часть 4)

Цель:

- продолжение работы над созданием сайта

- уметь редактировать различные объекты сайта

- знать веб-компоненты сайта

План:

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

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

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

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

5. Добавление линии, фигуры или рисунка

6. Создание коллекции фотографий

7. О веб-компонентах

8. Добавление фигурного текста

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

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

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

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

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

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). Кроме традиционных графических клипов, которые обычно представляют из себя нечто аналогичное анимационным рисункам, вы можете делать выбор среди фотографий, фрагментов из фильмов и звуков. Использование этой огромной области ресурсов интересно само по себе!

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

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

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

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

Рисунок 1 – Окно Добавление клипов в коллекцию

Чтобы включать в каталог медиа-файлы, выполните следующее.

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

Рисунок 2 – Окно Параметры автоматического импорта

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

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

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

Рисунок 3 – Вставка картинки

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

Рисунок 4 – Вставка картинки

Вы можете раскрывать и сжимать окно результатов, щелкая на кнопке, которая находится над этим окном .

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

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

Рисунок 5 – Рабочая область FrontPage

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

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

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

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

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

1. В стандартной панели инструментов щелкните на кнопке Создание новой обычной страницы (Create a new normal page) , чтобы создать новую страницу. Новая страница откроется в окне просмотра и редактирования страниц, причем точка ввода будет помещена вверху страницы.
2. В меню Вставка (Insert) укажите пункт Рисунок (Picture) и затем выберите пункт Из файла (From File), чтобы открыть диалоговое окно Рисунок (Picture).
3. В диалоговом окне Рисунок (Picture) перейдите в рабочую папку. Файл Garden4.gif уже выделен, поскольку это единственный файл в данной папке.
4. Если в этом диалоговом окне не показан предварительный вид изображения, щелкните на стрелке кнопки представлений в панели инструментов диалогового окна Рисунок (Picture) и затем выберите в раскрывающемся меню пункт Просмотр (Preview) . В диалоговом окне появится предварительный вид, как это показано ниже (см. Рисунок 6).

Рисунок 6 – Предварительный просмотр рисунка

5. Щелкните на кнопке Вставить (Insert), чтобы выполнить вставку изображения на веб-странице в текущей точке ввода.
6. Щелкните на кнопке Закрыть (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. Сначала вы измените размеры изображения и выполните кадрирование, чтобы отсечь ненужные вам части; затем вы преобразуете изображение в черно-белое и создадите для него скошенную рамку, создающую эффект объемности.

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

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

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

Рисунок 7 – Рабочая область FrontPage

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

Рисунок 8 - Рабочая область FrontPage

Рамка кадрирования указывается штриховой линией

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

Рисунок 9 – Окно Свойства рисунка

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

Рисунок 10 - Рабочая область FrontPage

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

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

Рисунок 11 - Рабочая область FrontPage

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

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

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

pictures.htm

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

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

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

Рисунок 1 2 - Рабочая область FrontPage

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

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

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

    <img border="2"

    src=="../../../WINDOWS/TEMP/FrontPageTempDir

    PH01245J [1]_small.jpg" width="100" height="151" xthumbnail-orig

    image="PH01245J[1].jpg">

5. Щелкните на кнопке обычного режима внизу окна просмотра и редактирования страниц.
6. Перетащите маркеры выделенной миниатюры, чтобы сделать ее больше. При увеличении миниатюра станет размытой и "зернистой" (точечной), поскольку миниатюрная версия содержит меньше деталей, чем исходное изображение.
7. Увидев результаты увеличения миниатюры, щелкните на кнопке Отмена (Undo) , чтобы вернуть миниатюру к прежнему размеру.
8. Чтобы проверить гиперссылку этой миниатюры, щелкните на кнопке Просмотр (Preview) внизу окна просмотра и редактирования страниц, чтобы перейти в режим просмотра, и затем щелкните на миниатюре, чтобы открыть исходное изображение в панели просмотра.

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

9. Чтобы увидеть действие гиперссылки автоэскиза для веб-посетителей, щелкните в стандартной панели инструментов на кнопке Просмотр в обозревателе (Preview in Browser) . Сохраните страницу и встроенные изображения, если появится соответствующий запрос. Ваша веб-страница откроется в вашем браузере с представленными на экране миниатюрой и гиперссылкой.
10. Щелкните на миниатюре, чтобы вывести на экран полноразмерное изображение, и затем щелкните на кнопке браузера Назад (Back), чтобы вернуться к миниатюре.
11. Закройте браузер, чтобы вернуться в программу FrontPage.
12. Закройте данную страницу без сохранения изменений.

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

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

Команды, используемые для работы с большинством изображений, представлены в виде кнопок в панели инструментов Рисование (Drawing) и панели инструментов Холст (Drawing Canvas). Обе эти панели инструментов можно открывать в любой момент, щелкнув правой кнопкой на любой панели инструментов и затем щелкнув на их именах в контекстном меню панелей инструментов. Панель рисования открывается автоматически, когда у вас выделяется рисунок Office для редактирования. Она содержит следующие кнопки:

- Используйте команды меню Действия (Draw), чтобы управлять группированием, позиционированием и перемещением объектов.
- Щелкните на кнопке Автофигуры (AutoShapes), чтобы вывести на экран меню из более чем 130 фигур, начиная с простых геометрических форм и стрелок и заканчивая полностью сформированными указателями погоды. Сюда же входят изображения блок-схемы, баннер и символы выноски. Вы можете извлекать меню Автофигуры (AutoShapes) из панели рисовани с помощью перетаскивания, чтобы оно действовало как отдельная плавающая панель инструментов.
- Используйте кнопки Линия (Line), Стрелка (Arrow), Прямоугольник (Rectangle) и Овал (Oval), чтобы рисовать эти простые фигуры при любом размере путем щелчка и последующего протягивания на странице.
- Щелкните на кнопке Надпись (Text Box) для вставки текстовых блоков внутри изображений.
- Используйте кнопки Добавить объект WordArt (Insert WordArt), Добавить картинку (Insert Clip Art) и Добавить рисунок из файла (Insert Picture From File) для вставки новых графических элементов.
- Используйте кнопки Цвет заливки (Fill Color), Цвет линии (Line Color) и Цвет текста (Font Color) для управления цветами соответствующих элементов.
- Используйте кнопки Тип линии (Line Style), Тип штриха (Dash Style) и Вид стрелки (Arrow Style) для форматирования толщины, цвета и концевых элементов таких линий.
- Кнопка Стиль тени (Shadow Style) используется для применения теней к графическим элементам и модифицирования свойств теней.
- Используйте кнопку Объем (3-D Style), чтобы придать графическим элементам трехмерный вид.

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

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

Панель инструментов Полотно (Drawing Canvas) появляется при вставке нового рисунка.

Она содержит следующие кнопки:

- Щелкните на кнопке Подобрать размер(Fit Drawing to Contents), чтобы увеличить или уменьшить холст до размеров рисунка, который он содержит.
- Щелкните на кнопке Увеличить (Expand Drawing), чтобы увеличить рисунок до текущего размера холста.
- Щелкните на кнопке Изменение масштаба рисунка (Scale Drawing), чтобы увеличить рисунок до текущего размера холста, но поддерживая при этом исходное отношение высоты к ширине.

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

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

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

1. В стандартной панели инструментов щелкните на кнопке Создание новой обычной страницы (Create a new normal page) , чтобы создать новую страницу.
2. В меню Вставка (Insert) выберите пункт Горизонтальная линия (Horizontal Line), чтобы нарисовать линию.
3. Щелкните правой кнопкой на этой линии и затем в контекстном меню выберите пункт Свойства горизонтальной линии (Horizontal Line Properties), чтобы вызвать на экран следующее диалоговое окно (см. Рисунок 13).

Рисунок 13 – Окно Свойства горизонтальной линии

4. В диалоговом окне Свойства горизонтальной линии (Horizontal Line Properties) выполните следующее:
5. Задайте в поле Ширина (Width) значение 80 и выберите вариант В процентах от ширины окна (Percent of window).
6. Задайте в поле Высота (Height) значение 3 пиксела.
7. В раскрывающемся списке Цвет (Color) выберите зеленый цвет. Щелкните на кнопке OK, чтобы закрыть диалоговое окно и применить свои изменения.

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

Рисунок 14 – Рабочая область FrontPage

8. Теперь нажмите клавиши (Ctrl)+(End), чтобы переместить точку ввода в конец страницы.
9. В меню Вставка (Insert) укажите пункт Рисунок (Picture) и затем выберите пункт Создать рисунок (New Drawing). FrontPage выведет на экран пустой холст, панель инструментов Полотно (Drawing Canvas) и панель инструментов Рисование (Drawing) как показано ниже (см. Рисунок 15).

Рисунок 15 – Рабочая область FrontPage

Совет. Вы можете перетаскивать панели инструментов в сторону во время своей работы.

10. В панели инструментов рисование щелкните на кнопке Автофигуры (AutoShapes), чтобы увидеть меню имеющихся фигур.

Совет. Раскрывающееся меню с маркерами на нем (горизонтальными линиями в затененной полосе) можно перетаскивать в рабочую область, и оно "плавает" в этой области (как панель инструментов), пока вы не щелкнете на кнопке Закрыть (Close) соответствующей панели инструментов. Вы можете также перетаскивать это меню на панель инструментов или закреплять его на левом, правом или нижнем крае окна.

11. Укажите пункт Звезды и ленты (Stars and Banners) и затем щелкните на символе Пятно 2 (Explosion 2), как показано ниже (см. Рисунок 16).

Рисунок 16 – Окно Автофигуры

Совет. Поместите курсор мыши поверх символа, чтобы увидеть название символа, отображаемое как всплывающая подсказка.

12. Протяните курсор мыши с верхнего правого угла холста, чтобы создать небольшую фигуру в форме "взрыва", как это показано ниже (см. Рисунок 17).

Эта фигура станет головкой цветка.

13. Используйте в меню автофигур команду Блок-схема (Flow-chart) фигуры Знак завершения (Terminator) и Решение (Decision), чтобы использовать их в качестве стебля и листьев цветка, как это показано ниже (см. Рисунок 18).

Рисунок 18 – Рисование объектов

Для поворота выделенного объекта протяните и поверните по окружности его маркер

14. Для поворота листьев на подходящие углы щелкайте на каждом из них и поворачивайте его маркер вращения (зеленая точка) для перемещения в указанную ниже позицию (см. Рисунок 19).

Рисунок 19 – Рисование объектов

15. Щелкните правой кнопкой на изображении взрыва (головки цветка), в контекстном меню укажите на пункт Порядок (Order) и затем выберите пункт На передний план (Bring to Front). Головка цветка теперь окажется поверх стебля. В зависимости от степени перекрытия стебля и головки цветка это переупорядочивание может оказаться незаметным для глаза.
16. Используйте подходящие фигуры, чтобы создать обстановку сада, как это показано ниже (см. Рисунок 20).

Рисунок 20 – Рисование объектов

17. Щелкните на головке цветка, чтобы выделить ее, и, удерживая клавишу (Shift), щелкните на каждом элементе цветка, чтобы выделить эти элементы, как это показано ниже (см. Рисунок 21).

Рисунок 21 – Рисование объектов

18. Щелкните правой кнопкой на выделенных элементах и в контекстном меню укажите пункт Группировка (Grouping), затем выберите пункт Группировать (Group). Элементы цветка будут сгруппированы в один элемент, чтобы вы могли работать с цветком как с одним объектом.
19. Используя кнопки стандартной панели инструментов Копировать (Copy) и Вставить (Paste) или комбинации клавиш (Ctrl)+(C) (для копирования) и (Ctrl)+(V) (для вставки), вставьте несколько копий цветка, чтобы создать целое поле цветов.
20. Используйте маркеры изменения размеров на изображениях цветков, чтобы они отличались по размерам.
21. Щелкните правой кнопкой на каждом цветке, укажите в контекстном меню пункт Группировка (Grouping) и затем выберите пункт Разгруппировать (Ungroup), чтобы отделить элементы друг от друга для их окрашивания по отдельности.
22. Щелкните правой кнопкой на изображении солнца и в контекстном меню выберите пункт Форматировать автофигуру (Format AutoShape), чтобы появилось следующее диалоговое окно (см. Рисунок 22).

Рисунок 22 – Окно Формат автофигуры

23. В диалоговом окне Формат автофигуры (Format AutoShape) выполните следующее:

- Во вкладке Цвета и линии (Colors and Lines) задайте в меню Цвет (Color) секции Заливка (Fill) желтый цвет.
- Во вкладке Layout (Положение) в секции Обтекание (Wrapping style) выберите вариант Нет (None) и в секции Положение (Positioning style) выберите вариант Абсолютное (Absolute).
- Щелкните на кнопке OK, чтобы закрыть диалоговое окно и применить заданные настройки.

24. Окрасьте цветки, используя ваши любимые цвета, чтобы создать впечатление привлекательного сада, как это показано ниже (см. Рисунок 23).

Рисунок 23 – Рисование объектов

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

### Создание коллекции фотографий

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

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

### О веб-компонентах

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

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

В этом упражнении вы создадите коллекцию фотографий на подготовленном сайте с помощью веб-компонента Коллекция фотографий (Photo Gallery). Фотографии, используемые в этом упражнении, получены из базы данных о насекомоядных растениях по адресу www2.labs.agilent.com/bot/cp_home/ и используются с разрешения владельца этой базы данных.

GardenCo

Для этого упражнения используется рабочая папка Office XP SBS\FrontPage\Chap20\PhotoGallery. В дополнение к сайту GardenCo вы создадите гиперссылку на 12 фотографий растений, которые находятся в этой рабочей папке. Поскольку для работы веб-компонента Коллекция фотографий (Photo Gallery) требуется, чтобы он был сохранен как составная часть сайта, созданного с помощью FrontPage, вам нужно завершить это упражнение в структуре учебного сайта.

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

1. В меню Файл (File) выберите пункт Открыть веб-узел (Open Web). Перейдите в рабочую папку, щелкните на GardenCo и затем щелкните на кнопке Открыть (Open), чтобы открыть данный сайт.
2. В стандартной панели инструментов щелкните на кнопке Создание новой обычной страницы (Create a new normal page) , чтобы открыть новую страницу.
3. В меню Вставка (Insert) щелкните на пункте Веб-компонент (Web Component) и затем выберите вариант Коллекция фотографий (Photo Gallery) для получения следующего списка (см. Рисунок 24).

Рисунок 24 – Окно Вставка компонентов веб-узла

4. В окне Выберите вариант коллекции фотографий (Choose a Photo Gallery Option) щелкните на каждом из четырех вариантов и прочитайте описания, которые будут появляться в нижней панели.
5. Выберите вариант Коллаж (Montage Layout) и щелкните на кнопке Готово (Finish). Появится диалоговое окно Свойства коллекции фотографий (Photo Gallery Properties), чтобы вы могли добавлять фотографии в эту коллекцию.
6. Щелкните на кнопке Добавить (Add) и затем выберите вариант Рисунки из файлов (Pictures from Files).
7. Перейдите в папку Office XP SBS\FrontPage\Chap20\PhotoGallery, где вы найдете 12 фотографий насекомоядных растений.
8. Выделите сразу все файлы: щелкните на первом файле и, удерживая клавишу (Shift), щелкните на последнем файле. Затем щелкните на кнопке Открыть (Open).

FrontPage импортирует все изображения в коллекцию фотографий и отобразит их в диалоговом окне свойств коллекции фотографий.

9. Выберите в списке файлов plant1.jpg.
10. В поле Подпись (Caption) введите Четыре прекрасных и опасных цветка.
11. В поле Описание (Description) введите Четыре чуда из мира насекомоядных растений!
12. Выберите вариант Использовать другие параметры шрифта (Override and use custom font formatting).
13. Выделите текст в поле Подпись (Caption).
14. В раскрывающемся списке Шрифт (Font) щелкните на строке Arial.
15. В раскрывающемся списке Размер шрифта (Font Size) выберите вариант 2 (10 pt).
16. В раскрывающемся списке Цвет шрифта (Font Color) выберите пурпурный.
17. Щелкните на кнопке Полужирный (Bold) .
18. Выделите текст в поле Описание (Description) и повторите шаги 14 и 15, чтобы изменить шрифт и размер шрифта. Теперь диалоговое окно будет выглядеть следующим образом (см. Рисунок 25).

Рисунок 25 – Работа с фотографией

19. Щелкните на кнопке OK, чтобы закрыть диалоговое окно свойств коллекции фотографий и создать коллекцию.
20. В стандартной панели инструментов щелкните на кнопке Просмотр в обозревателе (Preview in browser) для просмотра этого файла в вашем браузере при заданном по умолчанию размере окна. Если появится запрос сохранения, сохраните файл этой страницы под именем Gallery.htm, а встроенные изображения - под их именами по умолчанию.

Ваша фотоколлекция будет выглядеть так, как показано ниже (см. Рисунок 26).

Рисунок 26 – Просмотр фотоколлекции в браузере

Производит прекрасное впечатление для работы, выполненной за несколько минут!

21. Закройте браузер, чтобы вернуться в программу FrontPage.
22. Щелкните на кнопке Закрыть (Close) этой страницы, чтобы закрыть ее файл; если хотите, сохраните эту работу, когда получите запрос сохранения.
23. В меню Файл (File) выберите пункт Закрыть веб-узел (Close Web), чтобы закрыть данный сайт.

Совет. Если в дальнейшем вы решите изменить тип компоновки вашей коллекции, щелкните правой кнопкой на веб-компоненте Коллекция фотографий (Photo Gallery) в режиме просмотра страниц в обозревателе и в контекстном меню выберите пункт Свойства фотоколлекции (Photo Gallery Properties), чтобы появилось диалоговое окно свойств фотоколлекции. Во вкладке Макет (Layout) выберите другой вариант компоновки и щелкните на кнопке OK, чтобы переформатировать свою фотоколлекцию.

### Добавление фигурного текста

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

- Щелкните на кнопке Добавить объект WordArt (Insert WordArt), чтобы открыть диалоговое окно Коллекция WordArt (WordArt Gallery) и создать новый объект WordArt.
- Щелкните на кнопке Изменить текст (Edit Text), чтобы открыть диалоговое окно Изменение текста WordArt (Edit WordArt Text), где вы можете изменять текст, шрифт, размер шрифта и форматирование шрифта объекта WordArt.
- Вы можете выбрать один из 30 основных типов форматирования в окне Коллекция WordArt (WordArt Gallery).
- Для изменения цветов и линий, размеров, компоновки и альтернативного веб- текста вашего объекта WordArt используйте диалоговое окно Формат объекта WordArt (Format WordArt).
- Щелкните на кнопке Форма WordArt (Edit Shape), чтобы иметь возможность выбора среди 40 основных форм, кривых и углов, на основе которых строится объект WordArt.
- Щелкните на кнопке Выровнять буквы по высоте (WordArt Same Letter Heights), чтобы прописные и строчные буквы имели одинаковую высоту.
- Щелкните на кнопке Вертикальный текст WordArt (WordArt Vertical Text), чтобы изменить принятое по умолчанию выравнивание по горизонтали на выравнивание по вертикали.
- Используйте кнопку Выравнивание (WordArt Alignment), чтобы указать выравнивание текста WordArt по левому краю, по центру или по правому краю в пределах доступного пространства либо выровнять его по словам или растянуть для заполнения пространства.
- Используйте кнопку Межзнаковый интервал (WordArt Character Spacing), чтобы управлять кернингом между буквами.

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

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

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

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

1. В стандартной панели инструментов щелкните на кнопке Создание новой обычной страницы (Create a new normal page), чтобы создать новую страницу. Новая страница откроется в окне просмотра и редактирования страниц, причем точка ввода будет помещена вверху страницы.
2. В меню Вставка (Insert) укажите пункт Рисунок (Picture) и затем выберите пункт WordArt.
3. Выберите подходящий для вас стиль в диалоговом окне Коллекция WordArt (Word Art Gallery), показанном на следующем рисунке (см. Рисунок 27).

Рисунок 27 – Окно Коллекция WordArt

4. Щелкните на кнопке OK, чтобы появилось диалоговое окно Изменение текста WordArt (Edit WordArt Text).
5. В поле Текст (Text) введите Насекомоядные растения.
6. В раскрывающемся списке Шрифт (Font) выберите Verdana.
7. В раскрывающемся списке Размер (Size) выберите значение 24.
8. Щелкните на кнопке Полужирный (Bold).
9. Щелкните на кнопке OK, чтобы закрыть это диалоговое окно и применить ваши настройки. FrontPage создаст заголовок страницы в соответствии с вашими данными, поместит его на веб-странице в точке ввода и выведет на экран панель инструментов WordArt.
10. Щелкните на кнопке Закрыть (Close) панели инструментов WordArt, чтобы закрыть эту панель инструментов.
11. Щелкните правой кнопкой на объекте WordArt и выберите в контекстном меню пункт Абзац (Paragraph), чтобы на экране появилось диалоговое окно параметров абзаца.
12. В раскрывающемся списке Выравнивание (Alignment) выберите вариант По центру (Center), затем щелкните на кнопке OK, чтобы закрыть это диалоговое окно и получить на экране следующий результат (см. Рисунок 28).

Рисунок 28 – Рабочая область FrontPage

13. Закройте файл этой страницы без сохранения изменений.
14. Если вы не переходите к следующей лекции, закройте программу FrontPage.