Джеффри Зельдман

«Традиционная верстка ALA была лабиринтом из бесконечных вложенных таблиц. В прошлом, при обновлениях сайта, даже я не мог вспомнить, для чего служат те или иные colspan и rowspan - несмотря на то, что сам их создал.

<!-- Dress left -->
<table border="0" cellpadding="0" cellspacing="0">
<!-- Your variable left margin -->
<tr valign="top"><td width="15%"
bgcolor="#ffffcc">&nbsp;</td>
<td width="75%" bgcolor="#ffffcc"
valign="top">
<!-- Your actual content -->

Будьте добры - то же самое, но на человеческом языке. Я рыдал, как ребенок, при одной мысли о том, что можно заменить безумное количество таблиц на два-три чистых и незамысловатых DIV'а».
Источник.

Создание CSS-сайтов в Dreamweaver

Урок #3. Создаем HTML-разметку, идеальную для поисковых систем.
23 минуты

Вопрос о том, какой должна быть HTML-разметка, чтобы сделать страницу максимально видимой для поисковых роботов, остается дискуссионным среди веб-мастеров Рунета.

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

Надо заметить, что за рубежом это преимущество бестабличных сайтов не обсуждается. Зато в России до сих пор находятся веб-мастера, которые отрицают тот факт, что HTML-страница, состоящая из огромного количества вложенных таблиц и оформительского кода, с трудом обрабатывается поисковыми роботами (посетите диспут на эту тему).

Я же на сегодняшний день считаю разумным создавать сайты, которые отличаются простой и понятной разметкой.

На видеоуроке я показываю, как создается HTML-основа сайта в визуальном редакторе Macromedia Dreamweaver.

Ход урока:

  1. Создаем содержание документа.
  2. Делим содержание на div-блоки и присваиваем каждому уникальное имя.
  3. Связываем разметку с CSS-файлом.
  4. Варианты создания ссылок.
  5. Проверка кода на валидаторе.

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

Дополнительные материалы к уроку — удобный блокнот RPad 32 и программа для автоматического переключения клавиатуры Punto Switcher.