Разработка сайтов для СРО

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Создание и раскрутка сайтов в Интернете

Что нужно для SEO?

Текст & Всемирная Паутина

Инструмент веб-строителя

HTML - язык гипертекста

CSS - каскадные таблицы стилей

Поисковая оптимизация

Что такое раскрутка сайта?

Контекстная реклама

Что такое обмен ссылками?

Почтовые рассылки

Соблюдайте правила

Что препятствует рейтингу?

Что такое CMS?

Краткий словарь терминов

Полезные книги

Карта сайта

Этапы создания сайта

Десять важных шагов

Разработка семантического ядра

Обновление информации

Заголовки

Проверка ссылок

Проверка ошибок в коде

Шрифтовое оформление

Навигация по сайту

Метаданные

Выбор кодировки

Ключевые слова

 
Разработка сайтов под ключ

Ссылки по теме

Blogger: Создайте блог БЕСПЛАТНО

WordPress: Платформа для ведения блога

Online-переводчик :: Компания ПРОМТ

Поисковая оптимизация – все дело в написании текстов

Стратегия продвижения сайтов

Новые исследования поискового поведения пользователей

Орфографические словари

Словарь русских синонимов Абрамова

Орфографический словарь Лопатина

Современный словарь иностранных слов

Толковый словарь русского языка Ожегова

Архивы форума "Говорим по-русски"

FAR — программа управления файлами и архивами

FCKEditor - текстовый редактор для браузера

NotPad++ - текстовый редактор

PSPad — текстовый редактор

UltraEdit-32 - текстовый редактор

Nvu - HTML редактор

CoffeeCup - HTML редактор

 

Смешанная разметка и компактный код в XHTML

Главная « Статьи « Смешанная разметка и компактный код в XHTML

версия для печати

Смешанная разметка и компактный код в XHTML

Смешанная разметка - за и против…

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

Стандарт CSS все еще находится на стадии развития, некоторые браузеры по-прежнему только учатся обрабатывать CSS 1 и CSS 2, поэтому для некоторых проектов имеет смысл использовать простые XHTML-таблицы для расположения основных элементов сайта. Однако не стоит путать табличную разметку с бестолковой разметкой, а сайты со смешанной разметкой и несколькими неструктурными компонентами довольно сильно отличаются от запутанного бестолкового кода, используемого в большинстве сайтов и по сей день.


внимание!

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

 
Распространенные ошибки смешанной разметки

Распространенные ошибки смешанной разметки…

Давайте рассмотрим типичный для табличной разметки дизайн сайта с навигационным меню, изменяющим свой внешний вид в зависимости от местонахождения пользователя на сайте.

В качестве логотипа сайта, скорее всего, будет использоваться простое изображение, вероятнее всего, в формате GIF. Пункты меню (Новости, О компании, Контакты и т.д.) могут также быть как изображениями, так и простыми гипертекстовыми ссылками.

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

Современные дизайнеры обратятся для этого к CSS, однако при неверном использовании полученные результаты могут быть еще хуже.

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

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

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

 
Класситы: болезнь кода

Классисты: болезнь кода…


внимание!

Каким образом мы отличаем ячейки таблицы, служащие пунктами меню, от остальных ячеек на странице? Или заставляем ссылки внутри этих ячеек отличаться от всех иных ссылок страницы?

Точно не с помощью устаревших тегов оформления и атрибутов вроде bgcolor, как вы уже могли догадаться.

Мы не используем подобный код:

Код:
<td align="left" valign="top" bordercolor="black" bgcolor="white">
   <font family="verdana, arial" size="2">
      <b><a href="/contact/">КОНТАКТЫ</a></b>
   </font>
</td>

Но также мы не хотим, чтобы к каждому элементу, требующему особенного обращения, присваивался class, что встречается довольно часто:

Код:
<td class="blackborder">
   <span class="menuclass">
      <font class="menufontclass">
         <b><a href="/contact/">КОНТАКТЫ</a></b>
      </font>
   </span>
</td>

Я называю такой стиль разметки классистским. На подобных сайтах каждый тег имеет свой класс. Чрезмерное использование элемента class необоснованно увеличивает размер кода каждой страницы. Появление этого приема уходит корнями во времена, когда браузеры едва-едва поддерживали CSS, а также оно отражает весьма неглубокие и поверхностные познания дизайнера в CSS.

Возможно также, что многие дизайнеры так и не переросли этот этап поверхностных знаний о CSS, так как перешли на изучение других технологий Web-дизайна, или учили CSS с помощью просмотра кода, создаваемого их визуальными редакторами, прилепляющими class к каждому генерируемому ими тегу.

Даже самый лучший и современный визуальный редактор все равно норовит вставить несколько ненужных атрибутов class туда, где они совершенно не нужны. Это объясняется именно тем, что это визуальные редакторы, а не люди, которые могут абстрагироваться от частностей и мыслить глобально. То есть, когда вы задаете абзацу стиль в CSS, вы знаете, что собираетесь задать этот стиль всем абзацам.


внимание!

Но редактор не может читать ваши мысли.

Таким образом, например, если вы работаете в таком редакторе и создадите пять абзацев, отформатированных шрифтом Verdana 8pt, приложение может создать для каждого абзаца свой class. Несмотря на всю мощь и совместимость со стандартами таких редакторов, как Dreamweaver и GoLive, вам все равно не помешает иногда просматривать созданный ими код и редактировать его.

 
Дивисты - популярные конкуренты класситов

Дивисты - популярные конкуренты класситов…

Самым удачливым классистам иногда удается остаться незамеченными даже в таком коде:

Код:
<р class="text">Это плохой способ создавать сайты.</р>
<р class="text">Heт необходимости использовать все эти классы.</р>
<р class="text">Хорошие дизайнеры стараются избегать этого.</р>

Такой пример вполне может являться фрагментом кода, сгенерированного самым мощным, современным и совместимым со стандартами визуальным Web-редактором. Однако у классистов есть не менее популярные конкуренты, я называю их дивисты:

Код:
<div class="content">
   <div class="box">
      <div class="heading">
         <span class="headingtext">Добро пожаловать</span> на страницу для участников!
      </div>
      <div class="bodytext"Приветствуем зарегистрированных участников.</div>
      <div class="warningfirst">Ecли вы не зарегистрированы <а href="/reg/" class="warningsecond">нажмите здесь</а>!</div>
   </div>
</div>

В этом коде нет даже намека на структуру - только десятки байт ненужного кода. Зайдите на такой сайт с помощью Pocket PC или текстового браузера, и вы ни за что не догадаетесь, как элементы соотносятся друг с другом.

По правде говоря, согласно этому коду, они никак не соотносятся друг с другом. Дивисты превращают структуру в полный «мусор».

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

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

 
В div нет ничего плохого

В div нет ничего плохого…

Кто-то из Вас, наверное, посчитал меня непоследовательным. В одной статье я пишу, что использовать div не надо, а в другой статье (div, id и другие помощники) сам использовал div. Как это понимать?

На самом деле я никогда не говорил, что использовать div - плохо. Тег div является вполне приемлемым элементом кода, предназначенным для расположения структурных элементов на вашем сайте.

Но стоит не использовать div лишь тогда, когда вы слишком часто заменяете им другие, более уместные элементы. То есть, если вы создали абзац, то пусть он будет абзацем и помечен соответствующим образом, а не элементом div класса text.

Самый крупный заголовок на странице должен быть помечен тегом <h1>, а не <div class="head">.

Чувствуете разницу? Конечно, да.

 
Почему div?

Почему div?

Многие дизайнеры используют тег div в далеком от структуры контексте для замены любых элементов - от абзаца до заголовка.

Большинство из них приобрели эту привычку, обнаружив, что браузеры, в частности Mozilla FireFox, вставляют ненужное пустое пространство, разрушающее разметку, вокруг структурных элементов вроде <h1>, однако с разметкой, использующей неструктурные элементы div, все хорошо.

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


внимание!

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

А надо было написать в CSS, всего две строчки, и проблема ненужного пустого пространства была бы решена:

Код:
h1 {
  margin-top: 0px;
  margin-bottom: 0px;
}

Еще одним примером использования div является ситуация, когда дизайнер заражается вирусом «таблицы - плохо, CSS - хорошо» и с энтузиазмом заменяет «замусоренный» код на 100 вложенных div.


внимание!

Таким образом нельзя добиться положительного результата, вместо этого лишь затрудняется редактирование документов.

 
Любовь к id

Любовь к id…

Итак, если неструктурный код отменяется, классиcты и дивиcты тоже, то какие правила дизайна мы применим к области навигации нашего сайта при смешанной разметке, сочетающей таблицы и CSS? Мы сделаем это с помощью атрибута id.

Присвоим уникальную, метаструктурную метку таблице, содержащей меню:

Код:
<table id="navigator">

Позднее, при создании таблицы стилей, мы создадим селектор «navigator» и связанный с ним набор правил CSS, указывающих параметры отображения для ячеек таблицы, текстовых и других элементов.

При использовании гипертекстовых ссылок в качестве пунктов меню можно обойтись еще меньшими усилиями:

Код:
<td><a href="/contact/">КОНТАКТЫ</a></td>

«А где остальное?» - спросите вы. А больше ничего и не требуется, кроме кода для других ячеек таблицы. Пометив таблицу идентификатором «navigator» или другим подходящим именем и используя «navigator» в качестве CSS селектора в таблице стилей, вы избежите всех описанных здесь ошибок.

Нет классистов, нет дивистов, нет ненужных тегов <font>. Нет надобности использовать устаревшие параметры высоты, ширины, выравнивания, фонового цвета для каждого экземпляра элемента <td>. С помощью одного идентификатора id вы подготовили чистый и компактный код для обработки в отдельной таблице стилей.

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

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

 
А как насчет изображений?

А как насчет изображений?

Работает ли эта комбинация уникального id, компактного XHTML и таблицы стилей так же хорошо, если для табличных меню используются изображения, а не гипертекстовые ссылки?


внимание!

Хороший вопрос! Схема работы такая же.

Создайте таблицу с самыми необходимыми элементами, проделайте ту же процедуру с изображениями и убедитесь, что каждое изображение имеет соответствующий атрибут alt.

Можно комбинировать прозрачные изображения GIF с правилами CSS, создающими эффекты при наведении указателя мыши без использования JavaScript.

 
Подводим итоги

Подводим итоги…


внимание!

Табличные разметки могут быть легкими, доступными, совместимыми со стандартами и чрезвычайно логичными.

Тем не менее CSS-разметка может предложить гораздо больше: облегчить ваш труд и нагрузку на сервер, разделить структуру и оформление, предоставить дизайнерам средства для воплощения своего творческого видения.

 
Дата: 03.09.2007 | Автор: Коровенков Юрий

Обсудить на форуме…

 
Valid XHTML 1.0! Valid CSS!
Как устроены поисковые системы?

Облик поисковиков

Поисковые системы

Индекс поисковой системы

Полнотекстовый поиск

Учет морфологии

Релевантность

Методы регистрации

Индекс цитирования

 
Заголовки разделов текущей страницы…

Оглавление

Распространенные ошибки смешанной разметки…

Классисты: болезнь кода…

Дивисты - популярные конкуренты класситов…

В div нет ничего плохого…

Почему div?

Любовь к id…

А как насчет изображений?

Подводим итоги…

 
Статьи на тему SEO

Статьи на тему SEO

Как управлять индексированием?

Разработка хорошей навигации на Web-сайте

Правильное использование элементов фраз

В защиту подчеркивания ссылок!

Два подхода в создании макетов web-страницы

Как повысить эффективность баннеров?

Оформляем сайт с учетом интересов пользователя

Поисковые машины и метаданные

Разработка сайтов в XHTML

Структура и метаструктура в XHTML

Макеты Web-страниц на основе табличной HTML-разметки

Раскрутка сайтов в Интернете

Раскрутка сайта начинающего Web-мастера

Как правильно оформлять текст на сайте?

Десять причин перехода на XHTML

Фундаментальный принцип юзабилити

Применение XHTML-списков для навигации

Технологии маркетинга поисковых машин

Контентная оптимизация под поисковые машины

Разработка семантического ядра поисковых запросов

Теория оптимизационной структурной HTML-разметки

Честные технологии поисковой оптимизации сайтов

SEO-текст — поплавок для сайта

Как составить файл robots.txt?

Навигация и структура информации на сайте

Правильный подход к созданию корпоративного сайта

Что такое веб-дизайн?

Реклама и PR в Интернете

Аналитика посещаемости сайтов в Интернете

Как привлечь целевых посетителей на сайт?

Как бесплатно разместить пресс-релиз компании?

 

NotPad++ - текстовый редактор…

 

наверх

 
Контактная информация

Пишите:
Звоните: + 7 (916) 597-36-78

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Copyright (©) 2004— by Yuriy Korovenkov