Учебник по веб дизайну
 Свободное программное обеспечение. Доступно. Бесплатно. Легально.
Учебник
HTML
CSS
DHTML
JavaScript
SSI
Раскрутка
Справочник
HTML
JavaScript
SSI
Браузеры
Хостинг
Скрипты
JavaScript
PHP
Статьи
SEO
HTML
Flash
Все об Интернет
Новости Интернет
Утилиты
Конструктор
Информер
А так же...
Наши баннеры
Контакты
Гостевая
Реклама на сайте

Позиционирование с помощью таблиц

Доброго Вам времени суток, уважаемые подписчики!

Представляю Вашему вниманию восемнадцатый выпуск информационной рассылки сайта "Веб дизайн в примерах". В этом выпуске рассмотрим способы компоновки и позиционирования элементов на странице.


Содержание выпуска:
Способы позиционирования. Позиционирование с помощью таблиц

Различают два основных способа разметки структуры документа: позиционирование с помощью таблиц и с помощью кастадных таблиц стилей (CSS). Основное преимущество первого способа заключается в его простоте и совместимости со всеми видами браузеров. Недостаток состоит в грамозкости кода, причем с ростом уровня сложности разметки количество кода становиться огромным. При разметке с помощью CSS, количество кода значительно меньше и для сложной структуры страницы этот способ является предпочтительным. Недостатком является то, что совместимость со всеми основными видами браузеров достигается использованием целого ряда неочевидных ухищрений, про представляет определенные трудности для начинающего вебмастера.

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

В качестве примера возьмем двуколончатую разметку (левая колонка будет содержать навигационное меню, а центральная - информационную часть страницы) с шапкой (для логотипа) и подвалом (для счетчиков, описания авторский прав и т.п.). В общем, страница будет выгдядеть примерно вот так:

Logo - Логотип, название, краткое описание сайта.
Menu.
Здесь будет навигационное меню.
  Content. Здесь информационная часть страницы.
Footer - счетчики, авторские права и т.п.

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

<style>

table.maintable {
width:400px;
margin-bottom:5px;
border:none;
font-size:14px;
}

#tdtop {
background:#eee;
text-align:center;
vertical-align:middle;
height:60px;
border: solid 1px #000;
}

#tdright {
width:100px;
height:200px;
background:#fff;
text-align:left;
vertical-align:top;
border: solid 1px #000;
}

#tdgap {
width:10px;
border: none;
}

#tdcenter {
width:290px;
background:#fff;
text-align:left;
vertical-align:top;
border: solid 1px #000;
}

#tdbottom {
background:#eee;
text-align:center;
vertical-align:middle;
height:60px;
border: solid 1px #000;
font-size:12px;
}

</style>

Класс maintable определяет ширину таблицы (400px) и параметры отступов между ячейками таблицы. Стили tdtop и tdbottom задают стиль оформления "шапки" и "подвала" страницы. Стили tdright и tdcenter определяют навигационную и основную секции (левая и центральная колонка). Для трехколончатой верстки необходимо добавить описание еще одной секции по аналогии с предыдущими. И, наконец, класс tdgap определяет промежуток между колонками.

Сам html код страницы имеет следующий вид:

<table class="maintable" align="center">
<tr>
<td id="tdtop">
Logo - Логотип, название, краткое описание сайта.
</td>
</tr>
</table>
<table class="maintable" align="center">
<tr>
<td id="tdright">
Menu.
Здесь будет навигационное меню.
</td>
<td id="tdgap">
&nbsp; </td>
<td id="tdcenter">
Content. Здесь информационная часть страницы.
</td>
</tr>
</table>
<table class="maintable" align="center">
<tr>
<td id="tdbottom">
Footer - счетчики, авторские права и т.п.
</td>
</tr>
</table>

Для использования приведенного выше шаблона необходимо создать html файл и скопировать стилевую часть в элемент head (и изменить численные значения свойств, под свой дизайн) и html код в элемент body. Для трехколончатой верстки также необходимо добавить соответствующее описание стиля и html код.

Анонс следующего выпуска

В следующем выпуске будет рассмотрен вариант с позиционированием с помощью CSS.

Новости сайта/полезные ссылки

P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет").

Реклама

Если твой компьютер завис - выдерни шнур, выдави стекло.
главная :: наверх :: добавить в избранное :: сделать стартовой :: рекомендовать другу :: карта сайта

Rambler's Top100

Страница сгенерированна за 0.0076 сек.
Сайт оптимизирован под разрешение 800х600 и браузер MS IE 6.0.
Copyright © 2005-2010 originweb.info, design.originweb.info.
Хостинг ruweb.net