Программные средства разработки Web-страниц и презентаций: Методические указания по выполнению лабораторных работ, страница 32

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

Возможен и другой подход – часть полосы занимает графика, а часть – фоновый цвет, сочетающийся с цветом края рисунка. В этом случае один из краев рисунка (нижний или верхний) должен быть практически однотонным. Этого можно добиться с помощью разнообразных приемов редактирования, доступных в графических редакторах (например, Adobe Photoshop). Однако при специальном подборе изображения поставленной цели можно добиться только средствами Expression Web.

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

В папке C:\Program Files\Microsoft Office\CLIPART\ PUB60COR содержится несколько подходящих изображений: утята (J0178932.JPG, низ), подсолнух (J0178459.JPG, верх), сурепка (J0145361.JPG, верх или низ), свечи (J0341654.JPG, J0216153.JPG, верх), город (J0149118.JPG, верх или низ). Можно использовать и другие изображения, отвечающие указанным требованиям.

Для примера выбрано изображение «утята»(J0178932.JPG). Следует подготовить его для использования в макете.

·  Создать новую пустую страницу, вставить на нее выбранное изображение.

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

Рис.45. Преобразование изображения

·  Поскольку полоса с графикой должна располагаться справа от текста, расположить утят «лицом» к странице, выполнив зеркальное отображение рисунка относительно вертикальной оси, выделив рисунок и щелкнув на инструменте Flip Horizontal  на панели Pictures (рис.45).

·  Сохранить страницу, при сохранении поместить рисунок в папку images.

·  Подобрать фоновый цвет, сочетающийся с однотонной границей рисунка: выполнить команду Format/Background, в списке выбора фонового цвета Background выбрать More Colors и выбрать инструмент Select (с изображением пипетки). Указатель мыши примет форму пипетки – щелкнуть на нижнем крае рисунка для выбора фонового цвета, затем сохранить настройки, нажав ОК. Просмотреть параметры тэга BODY в коде страницы – для рисунка «утята» выбран цвет #0B0B0B. Сохранить изменения.

·  Перейти на страницуmaket.html. Поскольку у рисунка «утята» однотонный цвет находится снизу, позиционировать его по правому верхнему краю главного контейнера страницы:

o  изменить стиль #gl_container, задав следующие свойства категории Background:

Если рисунок имеет однотонную границу сверху, его следует позиционировать по правому нижнему краю главного контейнера. В этом случае для последнего свойства (y) background-position надо задать значение bottom.

o  Просмотреть страницу в визуальном режиме – отображается только часть рисунка, соответствующая текущей высоте главного контейнера. Установить курсор в конец текста «Правая колонка» и отбить несколько строк вниз, нажимая клавишу Enter – видимая область рисунка увеличится.