Верстка страниц таблицами
На основе кода таблицы №3 мы с Вами сделаем страничку
Откройте блокнот и скопируйте в него:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru">
<head>
<title>Хризолит (поделочные камни)</title>
<meta name="description" content="Хризолит -хризолитом называют прозрачную
разновидность минерала оливина - силиката железа и магния">
<meta name="keywords" content="хризолит">
<meta name="author" content="Kon Green">
<meta name="robots" content="all">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
Сюда вставляем стили
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan=3>
<h1><span class="c1">Хризолит (поделочные камни)</span></h1>
</td>
</tr>
<tr>
<td width="20%" class="left">
<h5>Навигация</h5>
</td>
<td width="55%">
<h3>Хризолит (оливин, перидот)</h3>
</td>
<td width="25%" class="sub_content">
<h4>Альмандин</h4>
</td>
</tr>
<tr>
<td width="20%" valign="top" class="left">
<ul class="menu">
<li><a href="index.html" title="Ссылка">Нефрит</a></li>
<li><a href="index.html" title="Ссылка">Жадеит</a></li>
<li><a href="index.html" title="Ссылка">Малахит</a></li>
<li><a href="index.html" title="Ссылка">Лазурит</a></li>
<li><a href="index.html" title="Ссылка">Чароит</a></li>
<li><a href="index.html" title="Ссылка">Флюорит</a></li>
<li><a href="index.html" title="Ссылка">Оникс</a></li>
<li><a href="index.html" title="Ссылка">Кварц</a></li>
<li><a href="index.html" title="Ссылка">Серпентин</a></li>
<li><a href="index.html" title="Ссылка">Родонит</a></li>
<li><a href="index.html" title="Ссылка">Хризопраз</a></li>
<li><a href="index.html" title="Ссылка">Яшма</a></li>
<li><a href="index.html" title="Ссылка">Агат</a></li>
<li><a href="index.html" title="Ссылка">Бирюза</a></li>
<li><a href="index.html" title="Ссылка">Амазонит</a></li>
<li><a href="index.html" title="Ссылка">Сердолик</a></li>
</ul>
</td>
<td width="60%" valign="top" id="content">
<p>
Хризолит - полудрагоценный золотисто-зеленый камень, связанный с любовью и
миром. Он открывает перед человеком тайники эзотерической информации, дает
человеку - обычному, простому, возможность быть в мире сразу в нескольких планах
одновременно.
</p>
<p>
Его можно носить человеку с сильным Хироном. Хризолит связан с Хироном и знаками
Весов и Стрельца. Противопоказан он для Овнов и Близнецов — там Хирон слаб. Он
дает возможность распутывать запутанные дела, дает возможность победы в судах,
поэтому для выигрыша в деле — надевайте хризолит.
</p>
<p>
<img border="0" src="hriz.jpg" alt="Хризолит" width="150" height="120"
class="img-h">
Хризолитом называют прозрачную разновидность минерала оливина - силиката железа
и магния. Цвет хризолита зеленый с различными оттенками: золотистым, желтым,
фисташковым, травяным, оливковым, бурым. Окраска очень редко интенсивная, чаще
бледных тонов. Слово «хризолит» (то есть «золотой камень»; греч. chrysos —
«золотой») существовало уже в глубокой древности. Оно встречается в старинных
текстах, начиная с III в. до н. э. Тем не менее, в трактовке современного
значения этого минералогического термина существуют разногласия.
</p>
<p>
Согласно одной точке зрения, слово «хризолит» является синонимом термина
«оливин». В английской и немецкой минералогической литературе ювелирный оливин
(силикат магния и железа) называют обычно перидотом.
</p>
<p>
По армянским верованиям X-XII веков, если долго смотреть на хризолит, то
улучшается зрение. Он полезен при проказе, а если его истолочь и приложить к
глазам, то он уймет чесотку глаз. Вьетнамская медицина считает, что зеленый
оливин-хризолит полезен при заболеваниях печени и успокаивает раздражение. В
Европе хризолиту приписывали способность уберечь от неразумных поступков и
делать человека мягким и поэтичным.
</p>
</td>
<td width="20%" valign="top" class="sub_content">
<p class="c2">
Альмандин - красно-фиолетовый сорт граната. Это самая твердая и одна из самых
распространенных разновидностей гранатов. Большей твердостью от альмандинов
отличаются лишь похожие на них по окраске рубины.
</p>
<p class="c2">
Редко встречаются почти черные альмандины. Название минерала является искаженным
словом «алабанда» — так в Малой Азии назывался город, где издавна гранились эти
камни. По другой версии, местечко Алабанда было лишь перевалочным пунктом
древних торговых путей. В любом случае понятно, почему альмандины нередко в
старину называли «алабандиновыми рубинами». Плиний Старший называл в своих
сочинениях альмандин «алабандской венисой».
</p>
</td>
</tr>
<tr>
<td colspan=3 id="footer">
<p>
2008 Design by Kon Green
</p>
<a class="inline" href="http://validator.w3.org/check?uri=referer"
rel="nofollow">HTML 4.01</a>
<a class="inline"
http://jigsaw.w3.org/css-validator/validator?uri=referer"
rel="nofollow">CSS</a>
</td>
</tr>
</table>
</body>
</html>
Для внесения изменений во внешний вид страницы используем "Глобальные Таблицы Стилей"
Глобальные стили задают вид элементов всего документа.
Для этого используется
<style type="text/css"> ... </style>
Размещаются стили между тегами <head> и </head>
Пример
<html>
<head>
<title>Глобальные Таблицы Стилей</title>
<style type="text/css">
h1{color:red; font-style:italic; font-size:32px}
</style>
</head>
<body>
<h1>Заголовок красным курсивом </h1>
</body>
</html>
Скопируйте отсюда две картинки для страницы и расположите их в той же папке где лежит учебная страница.
body {
margin:0; /* - отступ от внешних границ - */
}
span.c1 {
display:none; /* - прячем то, что заключено в тег span - */
}
h1 {
background:url(dom.jpg) no-repeat; /* - вместо заголовка будет картинка - */
height:150px; /* - высота картинки - */
margin:0; /* - отступ - */
}
.img-h{
float : right; /* - картинка справа - */
padding : 0 0 3px 11px; /* - отступ от картинки слева и снизу- */
}
.left{
background-color:#D9D6CE; /* - Цвет фона в левой ячейке - */
}
#content{
background-color:#fff;/* - Цвет фона в центральной ячейке - */
padding : 0 0 20px 0; /* - отступ снизу, чтобы текст не лепился к нижней части ячейки - */
}
.sub_content{
background-color:#96968B; /* - Цвет фона в правой ячейке - */
}
#footer{
background-color:#475651; /* - Цвет фона в нижней ячейке - */
margin:0;padding:0 0 10px 0; /* отступ сверху, чтобы текст не лепился к верхней части ячейки */
border-top:1px solid #C4C7CE; /* - Цвет верхней границы ячейки - */
text-align:center; /* - выравнивание по центру - */
}Скопируйте и вставьте в код страницы
Теперь свойства стилей для текста на странице
p.c2 {
font:11px verdana, helvetica, sans-serif;color:#EBEBE9; /* Цвет и размер текста в правой ячейке */
padding : 0 7px 0 7px ; line-height:1.5; /* отступ текста и межстрочный интервал в правой ячейке */
}
#content p { /* - Свойства шрифта в центральной ячейке - */
font:12px verdana, helvetica, sans-serif;color:#333;
padding : 0 11px 0 11px; line-height:1.5;
text-align:justify; /* - выравнивание текста по ширине - */
}
#footer p { /* - Свойства шрифта в нижней ячейке - */
font:10px verdana, arial, helvetica, sans-serif;
color:#7B8880;
padding:5px 0 0 0;
}
#footer a { /* - Свойства ссылок в центральной ячейке - */
font:10px verdana, arial, helvetica, sans-serif;
color:#7B8880;
}
h3{
color:#88A299; /* - Цвет и размер заголовка в центральной ячейке - */
font:28px Times New Roman, verdana, arial, helvetica, sans-serif;
font-weight:900; /* - насыщенность шрифта - */
margin: 5px 0 5px 10px; /* - отступ текста сверху, справа и слева - */
}
h4 {
color:#DBD6C4;
font:20px Times New Roman, verdana, arial, helvetica, sans-serif;
font-weight:900;
margin: 5px 0 5px 10px;
}
h5 {
color:#96968B;
font:20px Times New Roman, verdana, arial, helvetica, sans-serif;
font-weight:900;
margin: 5px 0 5px 10px;
}
/* - Навигация - */
.menu {
list-style-type:none; /* - убираем маркеры - */
margin:0;
padding:0;
}
.menu li a {
color:#8D866D; /* - Цвет текста - */
font:12px verdana, arial, helvetica, sans-serif;
font-weight:900;
display:block; /* - Элемент показывается как блочный - */
width:86%; /* - Ширина - */
margin-left:13px; /* - Отступ слева- */
border-bottom:dotted 1px #96968B; /* - Цвет границы снизу - */
text-decoration:none; /* - Убрали подчеркивание - */
padding:3px; /* - Отступ в три пикселя - */
}
.menu li a:visited { /* - Посещенная ссылка - */
color:#8D866D;
font:12px verdana, arial, helvetica, sans-serif;
font-weight:900;
}
.menu li a:hover,.menu li a:active {
color:#3F4B47; /* - Цвет ссылок при наведении курсора - */
font:12px verdana, arial, helvetica, sans-serif;
font-weight:900;
background-color:#CDC9BE; /* - Цвет фона при наведении курсора - */
}Скопируйте и вставьте в код страницы
Смотрим на результат
