Создаем каркас для сайта
Создание каркаса является первым шагом при проектировании любого интернет-сайта. И в этом уроке мы создадим каркас для нашего сайта 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> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> |
Дримвивер автоматически ставит символы неразрывных пробелов ( ) в пустых ячейках таблицы, иначе ячейки могут попросту не отобразиться на экране.
Верхней ячейке таблицы присваиваем идентификатор 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»> </td>
<td width=»12%»> </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»> </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»> </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»> </td> </tr> </table></td> </tr> <tr> <td height=»39″ id=»td_footer»></td> </tr> </table> |
Все! Создание каркаса для нашего сайта окончено.
Здесь мы создали каркас для нашего сайта, а это значит, что первый большой шаг уже сделан. Данный каркас будет продублирован на все страницы сайта и останется неизменным, изменяться будет только контент.
В следующем уроке мы будем создавать красивое меню навигации для нашего сайта, основанное на технологии CSS.