Урок_7

ДЕЛАЕМ САЙТ
В уроке по построению таблиц, мы научились делать фиксированную таблицу для сайта, то есть задавали ширину и высоту ячейкам таблицы. В данном уроке, будем делать сайт резиновый, чтобы страница сайта растягивалась на всю ширину экрана. Сделаем такой сайт <http://www.beluys.com/primer/index.html>.
Этот сайт только для обучения, размещать его в интернете не стоит, чтобы у всех, кто будет изучать эти уроки, не было одинакового сайта. Но заменив цвета и картинки на шапке, в зависимости от тематики Вашего сайта, у каждого получится свой индивидуальный сайт.
Шапки для сайта можно найти в интернете, написав в поисковой строке запрос "Шапки для сайта", а можно сделать самим, я делаю в программе"PHOTOSHOP".К сожалению выложить эту программу для скачивания, я не могу,но в интернете ее можно найти бесплатно.

И так, приступим к созданию сайта. Начнем с таблицы каскадных стилей CSS
Таблица каскадных стилей представляет собой набор правил для оформления различных элементов страницы. Применяя CSS можно описать все элементы применяемые к странице, такие как цвет текста,размер шрифта,расположение шрифта и много других элементов. Описание стилей размещается между тегами <HEAD> и </HEAD> в тегах <STYLE> и </STYLE>.
Описание стилей может распологаться как в самой странице сайта, так и в отдельном файле.Описание стиле зазмещается в фигурных скобка { } Если описание стилей располагается в странице сайта, между тегами < HEAD > и </HEAD>помещается следующий код: <style type="text/css"> </STYLE> и выглядеть это будет так:

<HTML>
<HEAD>
<TITLE> </TITLE>
<STYLE type="text/css">


</STYLE>
</HEAD>
<BODY>
Если описание стилей распологается в отдельном файле,что очень удобно, когда сайт состоит из множества страниц. Если понадобиться изменить дизайн сайта, то не придется менять во всех страницах, а только в файле CSS. Для отдельного файла в HTML странице, межу тегами <HEAD> </HEAD> добавляется ссылка на файлCSS, это будет выглядеть так:
<HTML>
<HEAD>
<TITLE> </TITLE>

<LINK href="main.css" type=text/css rel="stylesheet">

</HEAD>
<BODY>
Для нашего сайта, описание стилей расположим в самой странице сайта.
В программе "Блокнот" cоздайте файл index.html и напишите следующею строку:
< !DOCTYPE HTML PUBLIC "-//W3C?//DTD HTML 4.01 TRANSITIONAL//EN">
Этот код указывает браузеру какая версия HTML применяется. Затем напишите следующий код красного цвета:
<html>
<head>
<title> </title>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<style type="text/css">  </style> Начало кода CSS Эта скобка применяется,чтобы код не был виден на странице Чтобы не было промежутков между таблицей и границами экрана Указывает отступ слева и сверху от края, для меню Для бегущей строки, отступ слева и справа на 220 пикселей,текст жирный, размер шрифта 16 пикселей,название и цвет шрифта Указывает границы текста помещенного в теги <p> Расположение и цвет текста класа Nav2,в данном примере цвет черный,текст жирный, располагается посредине Цвет ссылки, text-decoration: none: - означает,что ссылка не будет подчеркнутой, если вместо "none" написать "underline" ,ссылка будет подчеркнутой. Цвет и шрифт посещенной ссылки Цвет ссылки при наведении на нее курсора. Padding-left:15px - отступ текста меню слева на 15 пикселей, bold - шрифт жирный, размером 12 пикселей,высота ячейки меню 20 пикселей, цвет шрифта и расположение текста, в данном примере посредине. Закрываем скобку видимости кода Конец кода CSS
</head>
<body>
<table width=100% CELLPADDING=0 CELLSPACING=0 border=0>

<tr>
<td colspan=2 width=100% height=153 bgcolor="#FBE5E7"> </td>
</tr>

<tr>
<td colspan=2 width=100% height=34 background="images/srez.jpg"> </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>
Чтобы наша страница растягивалась на все ширину экрана, размер таблицы мы задали в процентах, то есть width=100%, левой колонке обозначили 25%, правой колонке 75% Теперь при любом разрешении экрана страница будетвыглядеть одинаково.