Вам понадобится
- - иметь собственный сайт
Инструкция
1
Чтобы сделать резиновую шапку, сначала нарисуйте ее в фотошопе. Затем отделите 3 части картинки: 2 боковых и середину. Эти части должны быть шириной примерно в 10-20 пикселей и высотой в нужную высоту шапки. Сохраните каждый элемент так, чтобы у вас получилось 3 разных файла: 1.gif, 2.gif, 3.gif. Залейте эти изображения на сайт.
2
Затем создайте таблицу, в которой будут помещаться элементы верхней части сайта. Для этого в HTML-коде напишите:
<table cellspacing="0" cellpadding="0" width="100%">
</table>Таблица с шириной 100% будет растягиваться или сжиматься в зависимости от размеров экрана пользователя.
<table cellspacing="0" cellpadding="0" width="100%">
</table>Таблица с шириной 100% будет растягиваться или сжиматься в зависимости от размеров экрана пользователя.
3
Сделайте в таблице строку, в ячейке которой разместите левую часть шапки сайта 1.gif:
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width="20">
<img src="images/1.gif" width="20" height="80" border="0">
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width="20">
<img src="images/1.gif" width="20" height="80" border="0">
</td>
</tr>
</table>
4
Создайте среднюю часть шапки сайта, состоящую из повторяющейся картинки 2.gif. Для этого в CSS-коде сделайте такую запись:
.header{background-image:url('images/2.gif');}
.header{background-image:url('images/2.gif');}
5
Теперь в строке таблицы создайте еще одну ячейку и поместите в нее средний элемент верхней части сайта, указав на его название header в CSS-коде:
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width="20">
<img src="images/1.gif" width="20" height="80" border="0">
</td>
<td class="header">
<h1>Название сайта
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width="20">
<img src="images/1.gif" width="20" height="80" border="0">
</td>
<td class="header">
<h1>Название сайта
6
Создав третью ячейку в строке таблицы, расположите в этой ячейке правую часть шапки сайта 3.gif:
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width="20">
<img src="images/1.gif" width="20" height="80" border="0">
</td>
<td class="header">
<h1>Название сайта</h1>
</td>
<td width="30">
<img src="images/3.gif" width="30" height="80" border="0">
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width="20">
<img src="images/1.gif" width="20" height="80" border="0">
</td>
<td class="header">
<h1>Название сайта</h1>
</td>
<td width="30">
<img src="images/3.gif" width="30" height="80" border="0">
</td>
</tr>
</table>
Источники:
- AJAX.RU