Вы наверное заметили, что в футере (подвале) сайта всегда что-то прописано или стоят иногда рекламные кнопки. На данный момент в нашем шаблоне мы ничего не сможем прописать, потому что пока подвал является цветным изображением. Если сделать так как в прошлом уроке, то изображение исчезнет и цвет подвала станет белым.

Доработка подвала шаблона

Воспользуемся такой функцией как background, которая перенесёт изображение подвала на задний план. Вackground обладает таким свойством, что если изображение будет маленькое, то оно размножается по всей площади.

Можно на задний план пустить целое изображение, но целесообразней воспользоваться маленьким кусочком изображения. Это позволит сэкономить на весе страницы и сайт будет загружаться быстрее.

Возвращаемся в фотошоп, где находится наш шаблон и вырежем маленькую полоску из подвала шаблона. Увеличьте область выделенную на рисунке.

Подвал шаблона

В панели инструментов выбираем инструмент «рамка» и выделяем узкую вертикальную полоску и нажимаем клавишу Enter.

После нажатия на Enter получится полоска, которую нужно оптимизировать и загрузить в папку сайта. Заходим в меню Файл-Сохранить для Web и устройств… В окне оптимизации выставляем значения, если они сбились.

Жмём «сохранить» и сохраняем в папке images, которая находится в папке вашего сайта. И опять переходим к программе Dreamweaver. Делаем клик по подвалу шаблона и находим код его изображения. Код изображения будет находиться в самом низу основного кода шаблона.

Подвал шаблона
Код выглядит так:

код2

Теперь из кода картинки переносим размеры в тег, который находится выше. Выглядит это так:
код3

Следующий шаг — это надо прописать background. Для этого ставим курсор в конце тега…
и смотрим в нижнее окно программы «свойства». Необходимо установить фон, на рисунке показано. Сделаете клик по папке и выберите рисунок (узкая полоска), который Вы ранее сохранили.

бек

После этого действия в коде пропишется background и путь к нему и можно удалить код картинки, он теперь не нужен. После переделок эта часть кода будет выглядеть следующим образом
код5
Теперь общий код шаблона примет такой вид:

 

Если сделали всё правильно, то в подвале теперь можно что-то прописать. И вот что получим в результате:
подвал

 

Статья была полезной?