| Уроки CSS |
| Табличная вёрстка в CSS |
В этом уроке будет подробно рассмотрено создания шаблона для сайта с помощью таблиц.
В качестве примера сделаем резиновую табличную вёрстку – то есть при изменении размеров окна веб-браузера сайт будет сужаться или расширятся. Если вам нужен шаблон фиксированного размера – то в следующем уроке рассматривается блочная вёрстка с фиксированными размерами. А пока рассмотрим табличную вёрстку.
Сделаем таблицу из 5 ячеек : шапка сайта; правая колонка; середина; левая колонка; подвал сайта;
В шапке, как правило, пишут название сайта и размещают логотип.
В левой колонке удобно разместить вертикальное меню. Для примера будет взято вертикальное выпадающее меню из этого урока.
В середине всегда располагается контент сайта: текст, ссылки, картинки, таблицы, блоки и прочее.
В в правой колонке, может быть блок ссылок, новости, реклама и т.д.
В подвале сайта, актуально разместить счётчики (о них вы можете прочитать здесь), ссылки на обратную связь, всевозможные контакты, информацию о правилах и прочее.
Для каждой из 5 ячеек с помощью идентификаторов пишутся стили, в которых задаются размер поля, цвет отступы и другие параметры.
Теперь рассмотрим всё выше написанное в более "техническом свете".
Создайте файл page_style.css - в нём будут написаны стили для ячеек шаблона и каких-то отдельных тегов.
Важные параметры для шаблона:
В селекторе #pole_size { … } регулируется растяжение шаблона относительно окна веб-браузера;
vertical-align:top – параметр, благодаря которому меню (и прочий контент) будет прижиматься к верху ячейки;
Остальные параметры задают размер, цвет полей и ориентацию контента внутри них (padding: … )
После стилей для ячеек шаблона с помощью классов будут написаны стили для тегов <p></p> (ориентации относительного основного поля) и ссылок <a></a> (для наглядности цвет ссылок будет задан красным). Вы так же можете добавить любые другие глобальные стили для каких-либо других тегов.
Содержание файла page_style.css
#pole_size {
width: 100%;
}
#header {
height: 140px;
background-color:#B1F080;
padding: 32px;
}
#left_col {
width: 198px;
vertical-align:top;
background-color: White;
}
#center_col {
background-color:#ffffff;
padding: 16px;
}
#right_col {
width: 180px;
vertical-align:top;
text-align: center;
background-color:#E6EEE0;
}
#footer {
height: 50px;
padding: 12px;
background-color: #B1F080;
font-size: 12px;
}
p {
margin: 16px 10px 20px;
}
a {
color: Red;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
Теперь создайте файл test_page.html в котором будет расположена главная таблица шаблона, для каждой ячейки будет написан id=" ", в соответствии с названием селектора. Для наглядности в левой колонке будет находится вертикальное выпадающее меню, а в поле для контента демонстрация работы стилей для тегов. Между тегами <head></head> подключеник выше описанного файла со стилями, а так же файл со стилем для меню.
Содержание файла test_page.html
<!DOCTYPE html>
<html>
<head>
<title>Шаблон для сайта - резиновая табличная вёрстка </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="page_style.css" type="text/css" />
<link rel="stylesheet" href="drop_vert_menu.css" type="text/css" />
</head>
<table id="pole_size">
<tr>
<td colspan="3" id="header">
<h1 style="color: Orange;">Название сайта</h1>
</td>
</tr>
<tr>
<td id="left_col">
<ul class="drop_vert_menu">
<li><a href="#"><span>Главная</span></a></li>
<li><a href="#"><span>Контакты</span></a>
<ul>
<li><a href="#"><span>Телефон</span></a></li>
<li><a href="#"><span>E-mail</span></a></li>
<li><a href="#"><span>Адреса</span></a></li>
</ul>
</li>
<li><a href="#"><span>О сайте</span></a>
<ul>
<li><a href="#"><span>История</span></a></li>
<li><a href="#"><span>Коллектив</span></a></li>
</ul>
</li>
<li><a href="#"><span>Карта сайта</span></a></li>
<li><a href="#"><span>Ссылки</span></a></li>
</ul>
</td>
<td id="center_col">
<h2 align="center">Демонстрация </h2>
<p>Текст между тегами <b><p></p></b>, для которых прописаны стилевые параметры.</p>
<i>Наклонный текст между тегами <b><i></i></b>, для которых стили не прописаны.</i>
<br>
<br>
<a href="#">Ссылка красного цвета</a>
<br>
<br>
<big>Большой текст без применения стилей.</big>
<br>
<br>
<p> Контент заключённый между тегов <p></p>, в котором уже с другими
отступами отображаются:
<br>
<br>
<i>Наклонный текст между тегами <i></i>.</i>
<br>
<br>
<a href="#">Ссылка красного цвета</a>
<br>
<br>
<big>Большой текст между тегов <big></big>.</big>
<br>
<br>
<table border="1" cellspacing="8" cellpadding="6">
<th colspan="2">Простая таблица внутри контента</th>
<tr>
<td>Первая ячейка (1,1)</td>
<td> какой-то текст</td>
</tr>
<tr>
<td> много слов</td>
<td> Четвёртая ячейка (2,2)</td>
</tr>
</table>
</p>
</td>
<td id="right_col">
Правая колонка
</td>
</tr>
<tr>
<td colspan="3" id="footer">
© Наврятли все права защищены
</td>
</tr>
</table>
</body>
</html>
Результат резиновый табличной вёрстки
Вы можете и сами дописать необходимые стилевые атрибуты для ячеек главной таблицы, опираясь на информацию изложенную в уроках по CSS и HTML.
Таким образом можно сделать простой движок для своего сайта, если каждую из ячеек шаблона (таблицы) поместить в отдельный файл и подключать его с помощью PHP – <?php include(" … ") ?> Так можно будет внести изменения только в одном файле, а они отобразятся во всех файлах, где объявлено подключение этого элемента. (php include будет работать, только если html-страница находится на хостинге или домашнем сервере).
| ◄ Предыдущий урок | Содержание | Следующий урок ► |
