Начинаем работать с фоном сайта

Переходим непосредственно к редактированию файлов.

Если вы не успели подготовить свои файлы, можно воспользоваться моими исходниками.

Вот первоначальный и окончательный вид нашей страницы:

Первое, что необходимо сделать – это проверить соответствие кодировок Notepad++ (смотрим «Кодировки» в верхнем меню) и нашей страницы (смотрим строку <meta http-equiv=»content-type» content=»text/html; charset=utf-8″ /> в файле index.html).

Вот описание свойств CSS, которые нам сегодня понадобятся (после двоеточия приведены примерные значения):

background-color:#000000; — задает цвет фона html-элемента
background-image: url(header.jpg); — задает фоновое изображение html-элемента
background-repeat: no-repeat; — запрещает дублирование фонового изображения
background-repeat: repeat-x; — разрешает дублирование фонового изображения по  горизонтали
background-repeat: repeat-y;
— разрешает дублирование фонового изображения по вертикали

Начнем с фона основного окна браузера.

За него отвечает тег <body>, поэтому в файле style.css находим плавило для этого имени и добавляем строку background-color:#CCC;


Очевидно, что фон средней части (предназначенной для вывода информацмм) тоже изменился. Эта часть содержится в блоке <div id=»wrapper»></div><!— #wrapper —>, т.е в таблице стилей ей соответствует ID селектор. Чтобы вернуть белый фон для него, добавляем  строку background-color:#FFF; для правила с именем #wrapper .

Переходим к шапке (хедеру).

В файле index.html убираем шаблонный текст внутри блока

<div></div><!— #header—>.

В файле style.css для правила с именем # header убираем желтый цвет фона (background: #FFE680;) и добавляем фоновое изображение (которое берется из папки img):

background-image: url(img/header.jpg);

background-repeat: no-repeat;


Аналогично поступаем с подвалом (футером).

В файле index.html убираем шаблонный текст внутри блока

<div></div><!— #footer —>.

В файле style.css для правила с именем #footer убираем зеленый цвет фона (background: #BFF08E;) и добавляем фоновое изображение (которое так же берется из папки img, но дублируется по горизонтали):

background-image: url(img/menuBg.gif);

background-repeat: repeat-x;

В следующей статье я планирую заняться «заполнением» шапки — рассмотреть варианты вывода логотипа, горизонтального меню, заголовка и краткого описания сайта.

Опубликовал 27th Январь 2011.
Размещено в Сайт с нуля.
Метки: , ,

Комментирование закрыто.

Нужна помощь?