Опубликован: 23.11.2006 | Доступ: свободный | Студентов: 1327 / 383 | Оценка: 4.13 / 3.80 | Длительность: 08:04:00
Специальности: Менеджер
Лекция 9:

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

< Лекция 8 || Лекция 9: 12345 || Лекция 10 >
Аннотация: Изучив эту лекцию, вы сможете: добавлять к веб-странице графические элементы, создавать фотоколлекцию.

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

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

  4. В диалоговом окне Свойства горизонтальной линии (Horizontal Line Properties) выполните следующее:
  5. Задайте в поле Ширина (Width) значение 80 и выберите вариант В процентах от ширины окна (Percent of window).
  6. Задайте в поле Высота (Height) значение 3 пиксела.
< Лекция 8 || Лекция 9: 12345 || Лекция 10 >