Искусство оформления сайта (Бердышев) - страница 59

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

Другим простым графическим элементом является кодируемая горизонтальная линия. Чтобы она появилась на страничке, достаточно набрать код ‹hr›. Добавляя этому непарному тэгу атрибуты width (длина), align (расположение) и size (толщина, размер), мы можем изменять свойства линии и даже превращать ее в геометрические фигурки. Обычно длина линии задается в процентах от величины страницы. Оптимумом для разделяющей черты считается значение 70–80 %. Но допустимо задавать длину в пикселях. При этом мы обретаем возможность нарисовать фигурку. Так, атрибуты width=60 и size=20 дают нам прямоугольник, а атрибуты width=50 и size=50 – квадрат. Цвет линии и фигурок на ее основе задается следующим образом: ‹hr noshade width=… size=… color=“red (blue, etc.)”›.

Вставка настоящего рисунка в веб-документ тоже предельно проста, она осуществляется посредством навигационной панели Web Page Maker, где есть иконка Image (или через меню Insert › Image – «Вставка › Изображение»). Но нужно уметь и пользоваться кодом. Тем более что он несложен, основывается на использовании одинарного тега ‹img›. Рассмотрим пример: ‹img src=“images/very_beautiful_girl.jpg"›: на страничке задан рисунок very_beautiful_girl.jpg, который броузер должен открыть из папки images. Атрибут src означает описание, дескрипцию тэга. Сейчас описание у нас никуда не годится, зададим дополнительные атрибуты: ‹img width=536 height=427 border=0 src=“images/very_beautiful_girl.jpg"›. Теперь у нас есть ширина, высота рисунка и толщина обрамляющей его рамки.

Эксперимента ради попробуем изменить толщину границы, напишем вместо нуля 10. Страшновато получилось (см. рис. 23, a), вот почему лучше нам добавить к рисунку новый тэг ‹div› и написать вот такую штуку: ‹div style=“border:#808080 16px window-inset"›‹img width=536 height=427 border=0 src=“images/very_beautiful_girl.jpg"›‹/div›. Тэг парный, открывающий и закрывающий свойства пространства вокруг рисунка. В данном случае, через значение border атрибута style, мы выбрали границу толщиной 16 пикселей, с форматом window-inset (оконная рама) и с расцветкой #808080 (один из оттенков серого). Мило, но выбранная нами рамка не подходит картинке по размеру (рис. 23, b). Вот почему проще будет задать указанные свойства через наш веб-конструктор. Откроем Web Page Maker, создадим новый документ, импортируем в него картинку, выделим ее и кликнем на иконку свойств Properties. Выбираем закладку Colors and Borders – заливки и границы, здесь выставляем параметры рамочки (рис. 24).