Главная → Программирование → by

Таблица Макеты против Div Layouts: From Hell to… ад?

За последние несколько лет, разработчики перешли от таблицы структур на основе веб-сайта дел на основе структур.Эй, это здорово.Но постойте!У разработчиков знать причины для перехода на DIV-структур, и они знают, how в?Часто кажется, что люди уходят из таблицы ад только ветер в DIV hell.

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

Photo of a road sign containing heaven and hell Изображение от lpinc.1988.

Таблица Hell

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

MAMA (анализ метаданных и горно Application) является структурным веб-страницу поисковой системы опера Software которая сканирует веб-страниц и возвращает результаты подробным страницу структур.Если мы посмотрим на основные выводы МАМА, мы видим, что средний сайт имеет табличную структуру вложенных три уровня.В списке из 10 самых популярных тегов, table td и tr все там.Элемент таблицы находится на более чем 80% страниц которого URL-адреса были сканироваться MAMA.

Семантически говоря, таблица теги предназначены для список табличных data.Это не оптимизирована для создания structure.

Удобство use

Использование таблиц для создания структуры вполне intuitive.Мы видим, табличные данные каждый день, и концепция хорошо known.

А наличие атрибутов таблицы делает для довольно плоская кривая обучения, потому что разработчику не придется использовать отдельную таблицу стилей.С дивы, разработчик должен использовать атрибут стиля или внешние таблицы стилей, потому что DIV тег не имеет атрибуты, прикрепленные к it.

Кроме того, таблицы не ломаются, когда содержание является слишком широким.Столбцы не сжала под другим столбцам, как в DIV на основе структуры.Это усиливает ощущение, что с помощью таблиц safe.

Maintainability

Таблица содержит различные метки: table теги являющийся оболочкой, tr для каждой строки и td для каждой ячейки.thead иtbody теги не используются для структурных целей, потому что они добавляют семантического значения содержания.Для удобства чтения, каждый тег обычно дается своя строка кода, с отступом.С учетом всех этих тегов для таблицы несколько дополнительных строк кода добавляется к содержимому.colspan и rowspan атрибуты сделать код более сложным, и любой разработчик, утверждая, что страница в будущем должен пройти через много кода, чтобы understand structure.

<table cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td colspan="3" height="120px">....</td>
	</tr>
	<tr>
		<td class="menu" valign="top">...</td>
		<td class="content" valign="top">...</td>
		<td class="aSide" valign="top">...</td>
	</tr>
	<tr>
		<td colspan="3">...</td>
	</tr>
</table>
<div id="header">...</div>
<div id="menu">...</div>
<div id="content">...</div>
<div id="aSide">...</div>
<div id="footer">...</div>

Как видно из примера, в таблице основе макета содержит больше кода, чем DIV-версии.Представьте теперь, если эта разница в размерах остается последовательной в качестве базового кода растет (в соотношении столько, сколько 2:1).В дел на основе структуры, это также можно пропустить меню дел и использовать неупорядоченный список (ul) в качестве контейнера instead.

Вложенные таблицы Код smell, что сайт застрял в таблице ад.Число строк кода бесконечен, и complexity является подавляющим.Таблицы далеки от чистого кода и don’ T приносит ничего семантического содержания, если you’ имеем дело с фактической табличных данных.И если you’ ве случилось, чтобы наследовать содержание сайта, который имеет плохой читаемости, it’ SA кошмар.Вложенные таблицы являются бедными замены семантически значимого уровня блока elements.

Еще один недостаток таблиц является то, что они делают это тяжелее, чтобы отделить содержание от дизайна.border width cellpadding и cellspacing теги используются примерно в 90% всех веб-сайтов, которые используют таблицы, по данным MAMA.Это добавляет код в HTML, которые должны вместо этого пойти в стиле sheet.

Превышение код замедляет развитие и повышает maintenance затраты.Там есть ограничение на количество строк кода программист может производить в час, и избыточный код является более сложным для других, чтобы понять.Разработчики могут даже не понимать свой собственный код после while.

More строк кода означает больший размер файла, который означает больше времени загрузки.Разработчики должны иметь в виду, новых средств массовой информации, таких как мобильные устройства, которые обычно имеют низкую пропускную способность.Веб-сайты должны будут поддерживать средства массовой информации, кроме традиционных мониторов в будущем, и плохой код ограничивает возможности.Большая база код имеет больше ошибок, чем маленький.Разработчики имеют тенденцию производить определенное количество ошибок на строку кода.Поскольку таблицы увеличит базу кода, таких структурах вероятно, содержат больше ошибок, чем макетов с меньшим количеством кода lines.

Screenshot of craigslist.org without a stylesheet Сайты с тегами, которые правильно описывают содержание легко идентифицировать.Отключение стилей на craigslist показывает нам, на основе таблицы макета.Новости отмечены только с тэга, и все ссылки можно легко положить виндивидуальный lists.

Гибкость media

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

Дополнительная информация:

Веб-сайты в настоящее время в таблице ада:

Div Hell

Сайты дел в аду больше дел тегов, чем это необходимо.Это также известно как “ divitis.”

DIV тег блочным элементом, который определяет раздел в document.Divs, таким образом, подходит для построения структуры веб-страниц.DIV тег также используется для описания содержания, которое не может быть правильно описано другими, более семантических тегов.Когда разработчики не понимают смыслового значения других элементов уровня блока, они часто добавляют больше дел, чем теги needed.

Heaven in hell Некоторые программисты ошибочно полагают, что использует много дивы очень хорошо.Может быть, это фото my_ladyhawk делает хорошую точку.Это злоупотребление дивы лучшие изхудший ?

Удобство use

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

DIV элемент не является визуальным как элемент таблицы.Каждый знает, что таблица выглядит, но дивы не так очевидно.Хорошая вещь о DIV, однако, что это только один элемент.Это не завернутый в родительский элемент пути td теги в таблице.Контейнер, то есть подробнее flexible и не имеет ограничений своего родителя tag.

Использование дел по структуре может сделать страницы более хрупкой, когда содержание толкает дел до своего предела.Это также может заставить столбцы падать друг под другом.Но это, как правило справедливо только для старых браузеров (в частности, IE6); новые браузеры сделать поток контента на следующий column.

Работа с браузером ошибок может быть немного сложнее первого, но с опытом разработчики могут выявить и исправить их.Поддержка браузера для W3C стандартов становится все лучше и лучше.С ростом популярности Firefox и Safari и введение Google Chrome, мы видим большой борьбе за долю на рынке, что неизбежно делает для улучшения browsers.

Maintainability

Самая большая проблема с тегами дел является то, что они используются слишком often.Divs должны быть использованы только для создания структуры и в качестве заполнителей для элементов дизайна, когда никакие другие элементы уровня блока можно описать содержание.DIV тег для логической группировки elements.

Вложенные теги DIV глубоко верный путь к обслуживанию ад, и код будет делать разработчикам подумать дважды, прежде чем дотрагиваться до него, просто потому, что it’ с таким непроницаемым.Правда, с использованием описательных класса и структуры имен делает код более понятным, но использовать их для вложенных тегов DIV не всегда easy.

Слишком много тегов DIV это код запах, что содержимое не описывается, как следует.Это означает, дивы используются при семантических уровне блоков tags бы лучше описать содержание, например, заголовки должны быть завернуты в h1 до h5 теги.Дать семантического кода обычно уменьшает базу кода, и меньше дивы с поплавками помогает держать ошибок в браузере away.

Screenshot of Twitter.com without a style sheet Отключение стилей для Twitter показывает нам некоторые хорошие семантического кода.Twitter использует списки, заголовки, hr и fieldset и показывает хорошее понимание того, как разметить содержание.

Конечно, идентификаторы и классы могут выполнятьсемантических значений, что никакие другие теги есть.Проблема в том, что эти ценности не являются стандартизированными.Например, div id="banner" могут иметь смысловое значение для программного обеспечения, содержащего передовые алгоритмы, сказав, что это знамя.Классы и идентификаторы, которые имеют семантического значения добавил к ним никогда не будет заменой теги, которые имеют семантического значения построены in.

Предоставление семантических значений классов и ids позволит значительно увеличить читабельность кода и поможет избежать плохих имен классов, как bigRedText.Кроме того, поисковые системы, такие как Google используют сложные алгоритмы, которые используют семантическую информацию в классах и ids.

Одним из интересных технологий микроформаты, которые построены на идее семантических классов.С помощью специальных стандартизированных форматов, содержание может быть автоматически обработаны микроформат-Aware software.

<div class="vcard">
 <span class="tel">
  <span class="type">home</span>:
  <span class="value">+1.415.555.1212</span>
 </span>
</div>

пример hCard микроформата.HCard является форматом для представления людей, компаний, организаций и places.

Наличие style атрибут код запах , что сайт томится в аду дел, потому что он не имеет никакого конкретного поведения визуализации.53,54% всех веб-сайтов MAMA проиндексированы содержат style атрибут, а 35,40% всех веб-сайтов имеют дивы, которые используют style атрибут.Классы и идентификаторы поможет отдельный дизайн и содержание и очистку этом широкое использование style attribute.

Классы и идентификаторы также облегчения доступа к элементам в Объект документа model (DOM) через scripts.

Семантический код помогает понять содержание машины.В то время как люди способны найти норвежский слово “ monkey” через Интернет, компьютеры не могут сделать это без человеческих направлении.Вот почему очень важно использовать теги, которые описывают содержание properly.

Вот еще пара причин, почему машины должны быть в состоянии понять содержание веб-сайта:

  • Пауки ползают веб-сайтов, индексации страниц для поисковых систем.Добавление семантического значения содержания, вероятно, делает веб-сайты ранга higher.
  • Чтения с экрана используются людьми с нарушениями зрения.Они читали вслух содержимое пользователю или отправить его на дисплей Брайля, который пользователь читает с его или ее пальцы.Кроме того, слабовидящим людям использовать клавиатуру для навигации и использовать широкий спектр команд клавиатуры.Они могут также получить список всех заголовков и ссылок на странице, и каждый из этих списков имеет мета-информации о том, сколько элементов он содержит.Установка атрибута языка также важно, чтобы программы чтения с экрана читать содержимое в правильном языке.Важность семантической разметки иллюстрируется сравнением strong и b теги.strong теги добавляет смысловое значение содержанию и b теги добавляет только визуальный смысл.В результате, люди, использующие программы чтения с экрана не будет получать такую ​​же информацию от содержания, как люди, видя его визуально.Многиестранах существуют законы, которые предписывают доступности поддержки правительственных веб-сайтов.Другие будут follow.

Photo of a braille display Дисплея Брайля.Фото: cobalt123.

Каждый дополнительный дел разработчик добавляет делает код трудным для чтения.Больше строк кода привести к увеличению времени загрузки, и так далее.Это все кольца кода запах мы получаем из таблицы на основе макетов. Злоупотребление теги DIV так плохо, как имеющий на основе таблицы layout, за исключением того, что она является более гибкой с media.

Для иллюстрации кругов ада дел, let’ посмотрим на примеры:

Menu
<div id="menu">
	<div class="selected">
		<div class="graphicLeft">
			<div class="graphicRight">
				<a href="#">Home</a>
			</div>
		</div>
	</div>
	<div>
		<div class="graphicLeft">
			<div class="graphicRight">
				<a href="#">About</a>
			</div>
		</div>
	</div>
	...
</div>

Вот типичный пример меню слишком много тегов DIV.Использование списка и установки тега до display: block В стилей сделал бы все эти дивы unnecessary.

Headings
<div class="headingOne">My heading</div>
<div class="headingTwo">My heading</div>
<div class="headingThree">My heading</div>

Рубрики создал, как это добавить только визуальный эффект содержание.Их смысловое значение теряется, и для чтения с экрана и веб-пауки не могут сказать, что они заголовками.(Это то же самое, что мы видим, когда b используется вместо strong).

Новости list
<div class="news">
	<img />
	<h2 />
	<p />
	<a />
</div>
<div class="news">
	<img />
	<h2 />
	<p />
	<a />
</div>

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

Различные ширины для containers

Page 1 

<div id="contentNormal"></div>
<div id="aSideNormal"></div>

Page 2 

<div id="contentWide"></div>
<div id="aSideSmall"></div>

Когда каждый столбец на веб-сайт получает свой собственный контейнер, много ненужных идентификаторов дел создаются.Это можно легко исправить путем добавления класса в body тег.Пусть каждый контейнер просто унаследовать класс body теги, а затем дать каждой странице своего расположения в таблице стилей.Это делает его легко читаемым содержание и страницы.Улучшения читаемости как HTML и таблицы стилей упрощают maintenance.

Гибкость media

Даже сайт в аду дел могут быть гибкими с помощью различных средств тех пор, как дизайн отделен от содержания и поставить в таблицу стилей.Прочитайте отличную статью “ Переход к Print ” на Список Apart руководящих принципов по созданию версия для печати вашего сайта.Это выходит за рамки данной статьи, но важно отметить, что дел на основе структуры является более гибким в поддержке различных СМИ, чем на основе таблицы струк …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → by

Comments are closed.