Рассылка закрыта
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Школа Web - пошаговые инструкции для создания сайта
Школа Веб - Dreamweaver
Выпуск 13 от 2001-07-30
Школа Веб
∙ Ведущий рассылки Eris
|
В предыдущей статье я рассказывал, как добавить ссылки к текстовому документу. Сегодня мы попытаемчя несколько оживить нашу страничку Добавив к ней графику. Я буду избегать рассказов о том, как нарисовать ту или иную вещь - это не входит в тематику сайта. Я не буду рассказывать в этой статье об опримизации графики для веб - это тема отдельной статьи. В нашу задачу на ближайшее время входит только установка готовых изображений и различные навороты к ним. В этой статье я опишу, как добавить фон на страничку. Работа с изображениями
Вы, вероятно, часто видели, что текст страницы располагается не на простом белом фоне, а на черном, цветном или, на фоне с рисунком (например, на бумаге в клеточку ;). За цвет и рисунок фона страницы отвечает тег <body>. Для экспериментов с этим тегом откройте в нашем тестовом проекте новый файл. По умолчанию Dreamweaver создает новую страницу с больнично-унылым белым фоном. Разверните окно документа так, что бы был виден и html-код и визуальное изображение страницы. Найдите в верхней части окна тег <body>. Он будет выглядеть примерно так: <body bgcolor="#FFFFFF" text="#000000"> Сам тег означает начало тела html-документа - все что после него теоретически должно выводиться пользователю и вплоть до тега </body>. Внутри тега даны два параметра. Первый из них - bgcolor="#FFFFFF" задает цвет фона странички. Если вы вдруг забыли, то цвет можно залавать либо по имени, либо 16-ричным значением. 16-ричное значение задается в форме #RRGGBB, где R,G,B могут принимать значение 0..9, A,B,C,D,E,F. Так код #000000 означает черный, #FFFFFF - белый, #00000FF - синий. Таблицу стандартных кодов и их имен я помещу в библиотеку, но в большинстве случаев мы будем пользоваться собственными средствами Dreamweaver.
Давайте попробуем немного поиграться с цветом страницы. Наберите в странице какой -нибудь текст - все-равно какой, и создайте какую-нибудь ссылку. В меню Modify выберите Page Properties (рис.1) В поле Background нажмите прямоугольничек выбора цвета. Появится таблица со стандартными цветами. Выберите какой-нибудь светлый цвет. (Если вам нравится что-нибудь нестандартное -нажмите на кнопку с цветовым кругом и выберите, что пожелаете). После того, как выберите цвет нажмите Apply в окне свойств страницы (можно и ОК, но тогда это окно закроется, а нам оно еще будет нужно). Взгляните на фон в нижней части окна документа и на тег <body> в верхней. Внизу страница будет перекрашена в выбранный вами цвет, а в теге <body> параметр bgcolor изменит свое значение. Теперь перекрасьте страницу в другой цвет - но только очень темный. Все получилось без проблем? Все-таки одна проблема появилась. Взгляните на набранный вами текст и ссылку - они почти не видны, их нужно бы сделать светлыми. Делается это в том же окне свойств страницы. Напротив надписи Text нажмите на кнопку выбора цвета и установите в какой-нибудь светлый цвет. Нажмите Apply. Теперь цвет хорошо виден? Вы можете на закрывая окно настроек просто подобрать сочетание фона и цвета текста. Вы сможете сделать это быстро, выбрав не то, что на клавиатуре набралось, а именно то сочетание цветов, которое вам понравится. Обратите внимание на Теперь то же самое можно сделать и с ссылками. Links - это установка цвета ссылок, на которых пользователь не был (тех, которых нет в history броузера); Visited Links - установка цвета ссылок, где пользователь уже был; Active Links цвет активных ссылок (не забивайте пока этим себе голову, пока ставьте его такой-же, как и цвет ссылок). Нажимаем Apply и смотрим что получилось. Во-первых, поменялся цвет ссылок на страничке, во-вторых добавились дополнительные параметры в теге <body>. И наконец, последнее действо с фоном - фон в клеточку, полосочку, или, если захотите в цветочек. Прежде всего, нужно подобрать рисунок фона. У меня набралась коллекция всяческих текстур, но мне понадобится время для создания библиотеки. Если у вас нет ничего под рукой, снимите фон с этой странички - не Бог весть что, но для экспериментов сойдет. В поле Background Image нажмите на Browse и в появившемся окне найдите свой файл. Если этот файл лежит за пределами корневой директории сайта, Dreamweaver спросит вас, не нужно ли перенести его в сайт, поскольку иначе сервер не найдет его. Соглашайтесь, и укажите куда именно в пределах корневой директории его надо сохранить. Нажимаете Apply - и страничка приобретает презентабельный (я надеюсь :) вид. Имейте ввиду, что рисунок забъет цвет фона. Но вместе с тем при медленной загрузке часто получается, что фон не успевает загрузиться, и некоторое время текст оказывается представленным непонятно на чем. Тогда я рекомендую все же указать цвет фона совместно с картинкой фона. Например для фона в клеточку можно указать белый - и вначале появится текст на белом фоне, а потом появятся и сами клеточки. И в заключение к статье о фонах - маленький трюк. В тег <body> добавьте еще один параметр: bgProperties=fixed Это нужно сделать вручную, Dreamweaver этого не делает. Добавьте на страничку блок произвольного текста, больший чем высота экрана, нужно что бы он прокручивался в окне броузера. Сохраните полученную страничку и загрузите ее в Explorer. Возникает любопытный эффект, когда текст покручивается, а фон остается на месте. В Netscape этот фокус не пройдет, но и ошибка не возникает. Следующая статья, посвященная Dreamwever будет рассказывать о работе с изображениями - как их вставлять, изменять размеры, сочетать с текстом. Если вы не получали предыдущих выпусков, найти их вы сможете на сайте рассылки Всего наилучшего ;)
|
| http://subscribe.ru/
E-mail: ask@subscribe.ru | Отписаться | Рейтингуется SpyLog |
| В избранное | ||
