Знакомства на Just click it
Скоро новый год!
Онлайн радио
Вверх
Новые статьи

Ретро газета в подарок
Архив

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

Создание каркаса является первым шагом при проектировании любого интернет-сайта. И в этом уроке мы создадим каркас для нашего сайта 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; }

 

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

 

<table border="0" cellpadding="0" cellspacing="0" id="main_table">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>

 

 

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

 

Верхней ячейке таблицы присваиваем идентификатор 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 код каркаса:

 

<table border="0" cellpadding="0" cellspacing="0" id="main_table">
<tr>
<td height="136" id="td_header"><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%"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="422"><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></td>
</tr>
<tr>
<td height="39" id="td_footer"></td>
</tr>
</table>

 

 

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

 


 

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

 

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

 

назад
далее
Наверх
Источник: Создание сайтов
Мы В Контакте Мы на Facebook Лента новостей RSS
Копирование и публикация материалов сайта разрешены только при наличии активной ссылки на источник
2011 - наши дни.. © Контакты | Лого | Реклама на сайте | Вебмастерам