Урок 8
Возмем картинку созданную для шапки, выделим и вырежем левую сторону, то же самое сделаем с правой стороной.Это делается для того, чтобы таблица сайта хорошо растягивалась
У нас получилось две отдельные картинки. Так как в коде сайта, в строке для шапки, мы задали цвет фона такой же как и цвет фона картинок, то разрыв между ними при растягивании страницы будет не заметен.
Для вставки картинок в строке для шапки создадим вложенную таблицу, которая будет состоять из трех ячеяк. То есть у нас уже есть созданная строка для шапки ( смотри предыдущею страницу)
<tr>
<td colspan=2 width=100% height=153 bgcolor="#FBE5E7"></td>
</tr>
Между тегами <td></td> вставляем вложенную таблицу из трех ячеек
<Table>
<tr>
<td></td> - ячейка для левой картинки
<td></td> - ячейка для названия сайта
<td></td> - ячейка для правой картинки
</tr>
</table>
Смотрите добавленный код вложенной таблицы зеленым цветом
<!DOCTYPE HTML PUBLIC "-//W3C?//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title> </title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<style type="text/css">
<!---
Здесь вставите код CSS, прописанный на предыдущей странице
--->
</style>
</head>
<body>
<table width=100% CELLPADDING=0 CELLSPACING=0 border=0>
<tr>
<td colspan=2 width=100% height=153 bgcolor="#FBE5E7">
<table width=100% CELLPADDING=0 CELLSPACING=0>
<tr>
<td><img src="images/ledi.jpg"></td>
<td>
<P STYLE="filter:Shadow(color='#D3B96E', Direction='150'); width: 400; height: 38; font-size: 25pt; font-weight: bold; text-align: center; color: #A52A2A;">НАЗВАНИЕ САЙТА</p>
</td>
<td align=right><img src="images/globys1.jpg" ></td>
</TR>
</table>
</td>
</tr>
<tr>
<td colspan=2 width=100% height=34 background="images/srez.jpg">
<DIV class=newText>
<MARQUEE WIDTH="100%" BEHAVIOR="scroll" SCROLLAMOUNT="5" DIRECTION="left">Вы находитесь на главной странице сайта</MARQUEE>
</DIV>
</td>
</tr>
<tr>
<td class="menu" width=25% height=100% bgcolor="#FAF0E6">Здесь будет размещено меню </td>
<td width=75% height=100% bgcolor="#FAF0E6"> </td>
</tr>
<tr>
<td colspan=2 width=100% height=27 background="images/srez2.jpg"> </td>
</tr>
</table>
</body>
</html>
Текст для имени сайта можно написать в программе Photoshop или в любой другой графической программе, но так как название сайта у каждого свое, применен следующий код, в котором Вы можете заменить слова "Название сайта" на свое название, изменить цвет и размер шрифта. Правда смотреться так, это будет только в браузере INTERNET EXPLORER, другие браузеры эту команду не воспринимают, поэтому если захотите написать имя сайта по другому, этот код просто удалите
<P STYLE="filter:Shadow(color='#D3B96E', Direction='150'); width: 400; height: 38; font-size: 25pt; font-weight: bold; text-align: center; color: #A52A2A;">НАЗВАНИЕ САЙТА</p>
Где - (color='#D3B96E', - обозначает цвет тени, Direction='150' - обозначает направление тени, можно от 0 до 315), далее ширина,высота и цвет шрифта
<DIV class=newText>
<MARQUEE WIDTH="100%" BEHAVIOR="scroll" SCROLLAMOUNT="5" DIRECTION="left">Вы находитесь на главной странице сайта</MARQUEE>
</DIV> Этот код для бегущей строки, можете написать любой свой текст или удалить код,если эта строка Вам не нужна
Теперь страница сайта выглядит ТАК <http://www.beluys.com/primer/index4.html>
Для создания меню так же применим вложенные таблицы, добавте код зеленого цвета
<!DOCTYPE HTML PUBLIC "-//W3C?//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title> </title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<style type="text/css">
<!---
Здесь вставите код CSS, прописанный на предыдущей странице
--->
</style>
</head>
<body>
<table width=100% CELLPADDING=0 CELLSPACING=0 border=0>
<tr>
<td colspan=2 width=100% height=153 bgcolor="#FBE5E7">
<table width=100% CELLPADDING=0 CELLSPACING=0>
<tr>
<td><img src="images/ledi.jpg"></td>
<td>
<P STYLE="filter:Shadow(color='#D3B96E', Direction='150'); width: 400; height: 38; font-size: 25pt; font-weight: bold; text-align: center; color: #A52A2A;">НАЗВАНИЕ САЙТА</p>
</td>
<td align=right><img src="images/globys1.jpg" ></td>
</TR>
</table>
</td>
</tr>
<tr>
<td colspan=2 width=100% height=34 background="images/srez.jpg">
<DIV class=newText>
<MARQUEE WIDTH="100%" BEHAVIOR="scroll" SCROLLAMOUNT="5" DIRECTION="left">Вы находитесь на главной странице сайта</MARQUEE>
</DIV>
</td>
</tr>
<tr>
<td class="menu" width=25% height=100% bgcolor="#FAF0E6">
<Table CELLPADDING=3 CELLSPACING=1>
<tr>
<TD width=200 bgcolor="#A52A2A">
<table CELLPADDING=1 CELLSPACING=1>
<tr class="nav">
<td class="Nav2" width="180" background="images/meni1.jpg">
<DIV class=navText>
<A href="upl">• Ссылка-1</A>
</DIV>
</td>
</tr>
<tr class="nav">
<td class="Nav2" width="180" background="images/meni1.jpg">
<DIV class=navText>
<A href="upl">• Ссылка-2</A> Выделенный блок кода, последовательно друг
</DIV> за другом,вставте столько раз,сколько разделов меню у вас будет
</td>
</tr>
</table>
</td>
</tr>
</TABLE>
</td>
<td width=75% height=100% bgcolor="#FAF0E6"> </td>
</tr>
<tr>
<td colspan=2 width=100% height=27 background="images/srez2.jpg"> </td>
</tr>
</table>
</body>
</html>
Вот мы и создали готовый шаблон сайта, осталось заполнить его содержимым и разместить в интернете, об этом речь пойдет в следующем уроке
Сайт создан в системе
uCoz