Этот сайт является учебным примером сайта,
сделанного на таблице

Главная

Преимущества таблиц

Недостатки таблиц

Раскраска ячеек таблицы

Синтаксис таблиц

Скачать шаблон сайта на таблице


Примеры других шаблонов на таблице:

Две колонки с левым меню

Две колонки с правым меню


Спец.эффекты:

Удаление ячеек и строк


Посмотреть другие простые шаблоны

Скачать бесплатный html-редактор со встроенными учебниками и справочниками по написанию сайтов

Скачать бесплатно FTP-клиент FileZilla Client для копирования файлов на свой сайт и в файлообменники

Скачать бесплатно Полезные скрипты для сайта

Сайт на таблице с левой колонкой меню

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

В таком шаблоне разделы Header и Footer такие же, как и в трехколоночном дизайне. Они остаются постоянными на всех других страницах сайта с этим двухколоночным дизайном. Как обычно в Header находится заголовок сайта крупными буквами и/или картинка с логотипом и там же размещаются большие горизонтальные баннеры. Также, как в трехколоночном дизайне часть Footer обычно служит для размещения копирайта, обратной связи, указания автора или разработчика и для другой служебной информации сайта.

Часть Center предназначена для основного текста страницы. Это переменная часть, на каждой странице сайта она разная.

Всё меню собрано в левой вертикальной колонке Lefter. Здесь же, обычно, располагаются и счетчики посещений, вертикальные рекламные блоки, всякие опросы, голосования, переходы на форму связи с автором сайта и другие вещи.

Часть Lefter, как правило, одинаковая для всех страниц сайта, Но никто не мешает Вам делать её разной для разных страниц сайта. Хотя это нежелательно, так как ломает стиль сайта. Пользователь, переходя на другие страницы сайта, должен чувствовать, что он еще находится в пределах данного сайта. Он не должен чувствовать, что он оказался на каком-то другом сайте.

Однако, на данном учебном сайте этот принцип не соблюдается.

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

А это шаблон html-кода таблицы на этой страницы. Шаблон сделан для ширины таблицы 1000 пиксел экрана монитора, а ширины левой колонки 310 пиксел.

-------------------------------------------------------------------------
<table width="1000">

   <tr>
      <td colspan="2">
          (Это Header. Здесь размещается заголовок или картинка.)
      </td>
   </tr>

   <tr>
      <td width="310">
          (Это Lefter. Здесь размещается меню в левой колонке.)
      </td>
      <td>
          (Здесь размещается основной контент страницы.)
      </td>
   </tr>

   <tr>
      <td colspan="2">
          (Это Footer. Здесь размещается информация в Footer страницы.)
      </td>
   </tr>

</table>

--------------------------------------------------------------------------------

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

Обратите внимание на то, что этот двухколончатый дизайн с меню в левой колонке гораздо хуже по сравнению с двухколончатым дизайном с меню в правой колонке с точки зрения SEO-раскрутки сайта в поисковых системах. Из html-кода шаблона дизайна с меню в левой колонке сразу видно, что блок с основным контентом размещается ближе к концу веб-страницы, а блок меню идет раньше и размещается перед основным значимым контентом. Для поисковых систем хуже, когда одинаковые части разных веб-страниц одного сайта располагаются в html-коде ближе к началу страницы, а не к концу. Поэтому меню в левой колонке хуже для индексирования веб-страниц поисковиками при построения сайта на табличном дизайне по сравнению с веб-страницами с меню в правой колонке.

При копировании материалов данного сайта, прямая ссылка на сайт обязательна
© Евгений Миронов, 2009