Создаем, программируем, шлифуем и раскручиваем web-caйт. Серия Быстро и легко - Алексеев Ю.М.
Скачать (прямая ссылка):
Бесшовный фон для Web-страниц
Используемый фон может существенно влиять на привлекательность Web-страниц. Обычно фон состоит из одинаковых рисунков, расположенных друг за другом, причем между изображениями могут быть видны швы. В этом знакомстве мы расскажем, как создавать бесшовный фон для Web-страниц.
Сначала загрузим с диска базовый рисунок, который будет использоваться при подготовке фона.
> Выберите команду меню File ¦ Open (Файл * Открыть). На экране появится диалог Открыть (Open) (Рис. 3.64).
о Ф Б* (*ЭТ
JgS Вшіар.рпд ^jQ rid G-fjui Л" Chiffon png
ff Confetti, png j№ H etch 1. gif ц Crosshatch 1 cjl * Hatch 2gi( %Closshatch 2.gif Hatch З.ЦІІ $j Crosshatch 3.gif *$| Hatch 4.gif ADNZLpng p Fioel.png ||e] Giain.png «Іі Giess.png JjGiid l.gif % Grid 2.gif
W Line Veit 3.gif «Ї S»i«h.png Ji| Meth.png ?1 Vein png
аф Metal.png p Oilslick.png A Ony«.png
¦4'Wallle.gil ? Wood, png
PJ Parchment, png ft Piano Keys, png % Plaid Loose, gif Plaid Tight.gif
*6lid3gil ^ Slid 4.gii ^ Grid 5.gif
з-
4| Hatch 5. gil "* Line-Diag l.gil
•* Line Diag 2.gu ^_
¦*Lin«-Horiz l.gil •? Platter png
14?;Line-Hoiiz 2.gif §?Sand.png
4"Lme-Hoiiz3.gil « Sandpapei.png
^iLine-Hoiiz4.gif ^ Scratch, png
Щ Line Veit l.gil Й Smokj.png
1SUiIe-VeIt 2.gif fji Swills png
1 Vimn файла:
J 5 »«* Lt pre
r
I Открыть
JAI iiMdabte flat
?
J Отмена
? Open as "urtrierT O Open as ¦yiimation
Рис. 3.64. Диалог Открыть (Open)
> В открывающемся списке Папка (Look in) выберите диск с программой Macromedia Fireworks MX 2004, по умолчанию диск С:.
> В списке папок и файлов диалога Открыть (Open) выберите папку, в которой хранится программа Macromedia Fireworks MX 2004, по умолчанию program files\macromedia\fireworks MX 2004, а затем подкаталог configuration\textures.
>• Щелкните мышью на файле swirls.png в списке папок и файлов диалога. В поле ввода Имя файла (File name) появится имя выбранного файла.
4 - 5967
98
Быстро и легко создаем, программируем и раскручиваем Web-сайт
* Нажмите кнопку Открыть (Open). Диалог Открыть (Open) закроется, и на экране ¦ .-появится окно .. с рисунком (Рис. 3.65). . '...=,.•.• V -. .&,]я**ш.-~-, .м ... • ¦¦: • .••: ... v
НИШИЕШІ
Гід Edit Vie» Select Modify Tut Command* Fileis Windau» Help
me к f>- M і сі !>• о
: ¦ ¦ Puc. 3.65. Базовый рисунок для фона.
По нижней части окна документа можно заметить размеры рисунка: 96 точек по горизонтали и вертикали.
Для удаления шва, который будет возникать в фоне на границах рисунков, воспользуемся .следующим алгоритмом. Сначала разобьем прямоугольник изображения на Четыре части (Рис. 3.66). Затем нужно поменять местами противоположные части (Рис. 3.67). | ..
а
b
с
d
d
с
b
а
Рис. 3,66. Исходный рисунок '. ' ¦¦ Рис. 3.67. Измененный рисунок ¦
¦? •• »
Обратите внимание, что после замены частей внутренние горизонтальная и вертикальная линии показывают границы между рисунками фона. Теперь легко удалить швы, например, размыть участки указанных линий. Далее достаточно переместить части изображения на исходные места. После редактирования рисунка фон не будет содержать швов.
Итак, поменяем местами части изображения and. - v .
> Выберите панель Info (Информация) (Рис. 3.19). ¦ . ' ' • •• ; !
> Нажмите кнопку - Marquee Tool (Инструмент «Область») на панели Tools (Инструменты).
> Установите указатель мыши так, чтобы справа от символов X и Y в нижней части панели Info (Информация) отображались числа 0 и 0 - координаты левой верхней вершины части а.
> Нажмите и удерживайте левую кнопку мыши.
ГЛАВА 3. Подготовка графики с помощью Macromedia Fireworks MX_
99
> Не отпуская левую кнопку мыши, перемещайте мышь. На экране появится синяя прямоугольная рамка, размеры которой будут изменяться при передвижении мыши.
> Когда в полях ввода W и Н панели Info (Информация) отобразятся числа 48 и 48 -ширина и высота части а в пикселах, отпустите левую кнопку мыши. Часть а будет
выделена движущейся пунктирной рамкой.
Напомним, что если размер и позиция выделенной области не такие, то их легко поправить, введя координаты и размеры на панели Info (Информация).
>¦ Выберите команду меню Edit ¦ Cut (Правка ¦ Вырезать). Выделенный участок будет ' помещен в буфер обмена операционной системы Windows, и вместо части а в окне документа появится шахматная мозаика (Рис. 3.68).
Iii'-. мО*7 '
"' ' •". P^c- 3.68. Рисунок с вырезанной частью
Установите указатель мыши так, чтобы справа от символов X и Y в нижней части панели Info (Информация) отображались числа 48 и 48 - координаты левой верхней
вершины части d.
> >
Нажмите и удерживайте левую кнопку мыши.
Не отпуская левую кнопку мыши, перемещайте мышь. На экране появится синяя прямоугольная рамка.
Когда в полях ввода W и Н панели Info (Информация) отобразятся числа 48 и 48 -
ширина и высота части d в пикселах, отпустите левую кнопку мыши. Часть d будет
