Зарегистрироваться | Забыли пароль


Для начинающих

bottom

Уроки

bottom

Полезное

bottom

Файлы

bottom

Ссылки

bottom

Главная страница » Уроки по HTML

Резиновая шапка для сайта

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

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

Теперь создадим таблицу, в которой будут располагаться изображения:

<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width="30">
<img src="images/left.gif" width="30" height="80" border="0">
</td>
<td class="header">
<h1>WEB Разработка</h1>
</td>
<td width="30">
<img src="images/right.gif" width="30" height="80" border="0">
</td>
</tr>
</table>

Параметры cellspacing="0" и cellpadding="0" являются обязательными, иначе будут видны рамки таблицы. В первую и третью ячейки вставляем изображения которые находились по краям шапки, а среднюю ячейку мы заполняем повторяющимися изображениями при помощи CSS:

.header{
background-image:url(images/center.gif);}

Пропишите эти строчки в своей таблице стилей либо между тегами <style></style>  заменив путь до изображения на свой. Ну вот, теперь Ваша шапка будет изменять свою ширину при изменении размеров окна браузера.

Автор: Евгений Бочкарев · Урок добавлен: 5 Августа 2009 в 16:40 · Просмотров: 1038

Рекомендую
  • Currently 5.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 5.0/5 (всего 2 голоса)

Понравился сайт? Внесите свой вклад в его развитие?
R314489888859
41001346159934




   Комментарии к уроку

12
Ваш комментарий может быть первым...
 
34
12

   Добавить комментарий


Ваше имя:


Текст комментария:

Получать уведомления по Email могут только зарегистрированные пользователи. Регистрация
Введите цифры с картинки


 
34