Создаем каркас для сайта

Создание каркаса является первым шагом при проектировании любого интернет-сайта. И в этом уроке мы создадим каркас для нашего сайта www.plata.ru

Создание каркаса для сайта — важный и очень ответственный процесс, поэтому постарайтесь максимально сосредоточиться при прочтении данного урока.

Виды каркасов для сайта.

При создании сайтов используются несколько типов верстки каркаса:

• табличный
• блочный
• фреймовый

Из всех перечисленных технологий наиболее удобной является табличная верстка, т.к. фреймовые сайты неправильно индексируются поисковыми машинами, а блочная верстка основана на технологии css, что может привести к совсем неправильному отображению в старых броузерах, например IE6, которым, к сожалению, еще пользуются очень многие.

Табличная верстка делится на несколько основных подвидов:

• с абсолютным размером (жесткий каркас)
• с относительным размером (резиновый каркас)

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

Сайты, основанные на табличном каркасе с относительным размеров имеют ширину, заданную в процентах, то есть при смене разрешения экрана ширина сайта будет занимать одну и туже область в процентах (то есть сайт будет расширятся или сжиматься).

У обоих способов есть свои плюсы и минусы, например при относительном размере сайт может деформироваться на нестандартных разрешениях.

Для нашего сайта будем использовать табличный каркас с относительным размером, равным 99%.

Создаем табличный каркас.

 Для начала открываем дримвивер, а в нем уже созданную страницу index.html.

 Создаем таблицу, состоящую из 3-х строк и одного столбца, с заданной шириной 99% и выравниванием по центру страницы.

Задаем значения отступов внутри ячейки и между ячейками таблицы, равными 0px:

cellpadding=»0″ cellspacing=»0″

Значение ширины таблицы мы зададим в нашем CSS файле, для чего установим идентификатор таблицы —id=»main_table»:

#main_table {width:99%; background – color : #ECECEC; border : 2px solid #696969; }

Здесь мы указываем ширину таблицы, фоновый цвет и выделяем границы таблицы. Итак код таблицы на которой будет держаться весь сайт выглядит следующим образом:

 Дримвивер автоматически ставит символы неразрывных пробелов ( ) в пустых ячейках таблицы, иначе ячейки могут попросту не отобразиться на экране.

Верхней ячейке таблицы присваиваем идентификатор id=»td_header», а в таблицах стилей задаем ей фоновое изображение, которое я подготовил заранее

#td_header {

background – image : url(img/plata_header_bg.png);
background – repeat : repeat – x;
background – position : bottom;
}

Затем в этой ячейке создаем еще одну таблицу, которая станет шапкой для нашего сайта. Состоять она будет из одной строки и 3х столбцов, в левом из которых размещаем созданный нами логотип:

<table width=»100%» border=»0″ align=»right» cellpadding=»0″ cellspacing=»0″>
<tr>
<td width=»19%»><img src=»img/plata_header.png» width=»300″ height=»150″></td>
<td width=»69%» valign=»bottom»>&nbsp;</td>
<td width=»12%»>&nbsp;</td>
</tr>
</table>

В центральной ячейке нашей основной таблицы создаем еще одну таблицу, которая станет основным окном для нашего сайта. Состоять она будет из одной строки и 3х столбцов, в пропорциях 8/83/8. Левой ячейке устанавливаем класс id=»td_menu», центральной – id=»td_center» и правой – id=»td_menu_right», которым, в свою очередь задаем следующие CSS параметры:

#td_menu {
background – image : url(img/plata_menu_bg.png);
background – repeat : repeat – x;
border – right : 1px groove White;
}

#td_center{
background – color : #F5F5F5;
border – right : 1px groove #696969;
border – left : 1px groove #696969;
border – top : 1px groove #696969;
border – bottom : 1px groove #696969;
}

#td_menu_right {
background – image : url(img/plata_menu_bg.png);
background – repeat : repeat – x;
border – left : 1px groove White;
}

Код только что созданной нами таблицы, которая выполнит роль основной ячейки сайта представлен ниже:

<table width=»100%» border=»0″ cellpadding=»0″ cellspacing=»0″ >
<tr>
<td width=»8%» height=»493″ valign=»top» id=»td_menu»>></td>
<td width=»83%» valign=»top» id=»td_center»></td>
<td width=»9%» valign=»top» id=»td_menu_right»>&nbsp;</td>
</tr>
</table>

Нижней ячейке основной таблицы присваиваем идентификатор id=»td_footer», которому задаем следующие параметры отображения в CSS:

#td_footer{
background – image : url(img/plata_footer_bg.png);
background – repeat : repeat – x;
}

В итоге каркас страницы выглядит следующим образом:

А вот и полный HTML код каркаса:

Все! Создание каркаса для нашего сайта окончено.

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

В следующем уроке мы будем создавать красивое меню навигации для нашего сайта, основанное на технологии CSS.