Задание №3
Работа с цветом и фоном в HTML.
Цвет и фон страницы выбираються по желанию дизайнера, но нужно учитывать и тот факт, что от них зависит визуальное восприятие всего сайта. Не стремитесь все затемнить, текст удобно читать, если его хорошо видно.
Итак сначала про цвет. Для его вставки в строку с тегом <BODY> Вашего документа нужно добавить параметр BGCOLOR и указать его значение - название цвета или его шестнадцатиричный вид. Данные два примера заполняют страницу документа красным цветом.
<BODY BGCOLOR="RED"> (использовано название цвета) <BODY BGCOLOR="#FF0000"> (использован шестнадцатиричный вид цвета)
Теперь о фоновой картинке. Фоном может быть как большой графический файл (учтите - в этом случае страничка будет грузиться дольше) так и его фрагмент, что более разумно. При использовании последнего он будет автоматически размножен Вашим Обозревателем, поэтому подбирайте фрагмент хорошо стыкующимся. Вставить в страницу фоновую картинку можно так:
<BODY BACKGROUND="images.gif"> Параметру BACKGROUND присвоено значение images.gif - это имя графического файла с расширением (поддерживаются *.jpg, *.gif, *.png). Естественно оно может быть другим. Предполагается, что графический файл расположен в одной папке с Вашим документом, иначе нужно указать к нему путь. Разберемся с путями на примере файла images.gif.
На два уровня вниз. Параметр="Folder_1/Folder_2/images.gif" |
На два уровня вверх. Параметр="../../images.gif" |
Подобное указание путей применяется для разных элементов, например, ссылок, рисунков, файлов.
Использование фонового цвета более рационально с соображений быстрой загрузки сайта, рисунки вообще грузятся дольше, даже самые маленькие.
Тег <BODY> может также иметь параметры отступов в документе (определяются числовым значение).
leftmargin - отступ слева rightmargin - отступ справа topmargin - отступ сверху bottom margin - отступ снизу
<BODY leftmargin="0", topmargin="0", marginwidth="0" marginheight="0">
В данном теге могут присутствовать и другие параметры, например, какие-то функции JavaScript, задание цветов текста и ссылок.
Откройте файл D002.html. Зададим фон в рабочей области. Для этого в коде страницы найдите тег <body>, перед закрывающимся элементом нажмите пробел и в выпадающем списке выберите bgcolor, в появившейся палитре цветов выберите любой цвет. Сохраните документ под именем D003_1.html.
Создайте в Photoshop’e вертикальный градиент, вырежьте из него инструментом Slice кусочек. Оптимизируйте и сохраните созданный элемент Slice в отдельном файле.
Откройте файл D002.html. Зададим в качестве фона в рабочей области созданный градиент. Для этого в коде страницы найдите тег <body>, перед закрывающимся элементом нажмите пробел и в выпадающем списке выберите background, нажмите на появившееся поле Browse и выберите созданный файл.
После перехода в окно редактирования содержания вы увидите нечто похожее
Для того, чтобы не было подобных повторов градиента необходимо добавить еще одно свойство в тег <body>. Снова помещаем указатель мыши к закрывающей скобке, нажимаем на пробел, в выпадающем списке выбираем style, а затем background-repeat. В нашем случае (вертикальный градиент) уместно использовать повтор только по горизонтали параметр repeat-x. На рисунке представлен результат.
Остальные параметры позволяют делать повторы как по обоим направлениям (вертикаль, горизонталь), так и вообще без повторов.
В нашем случае градиент уходит в белый фон, поэтому необходимо добавить перед кавычкой точку с запятой, нажать пробел, выбрать в выпадающем списке background-color и задать ему белый цвет #FFFFFF. Общее выражение будет выглядеть подобным образом:
<body background="images/123_01.gif" style="background-repeat:repeat-x; background-color:#FFFFFF">
В зависимости от вашего градиента может быть выбран другой фоновый цвет. Сохраните документ под именем D003_2.html.
Создайте горизонтальный градиент, повторите действия, описанные в пункте 3. Сохраните документ под именем D003_3.html.