Веб-дизайн без таблиц - Tableless web design

Каскадные таблицы стилей
Концепции
Философии
инструменты
Сравнения

Веб-дизайн без таблиц (или веб-макет без таблицы) это веб-дизайн метод, который избегает использования Таблицы HTML, для макет страницы в целях контроля. Вместо HTML-таблиц таблица стилей языки, такие как Каскадные таблицы стилей (CSS) используются для размещения элементов и текста на веб-страница.

История

HTML - это язык разметки чье визуальное представление изначально оставалось на усмотрение пользователя. Однако, как Интернет расширился из академического и исследовательского мира в мейнстрим в середине 1990-х и стал более ориентированным на средства массовой информации, графические дизайнеры искали способы контролировать внешний вид своих веб-страниц. Как популяризировал особенно дизайнер Дэвид Сигел в его книге Создание сайтов-убийц, таблицы и распорки (обычно прозрачный одиночный пиксель Гифка изображения с явно указанной шириной, высотой или полями) использовались для создания и поддержки макетов страниц.[1]

В конце 1990-х годов появились первые достаточно мощные WYSIWYG на рынок пришли редакторы, а это означало, что веб-дизайнерам больше не требовалось техническое понимание HTML для создания веб-страниц.[2] Такие редакторы косвенно поощряли широкое использование вложенных таблиц для размещения элементов дизайна. По мере того, как дизайнеры редактировали свои документы в этих редакторах, в документ добавлялся ненужный код и пустые элементы. Более того, неквалифицированные дизайнеры, вероятно, будут использовать таблицы больше, чем требуется при использовании редактора WYSIWYG. Эта практика часто приводила к тому, что многие таблицы вкладывались в таблицы, а также таблицы с ненужными строками и столбцами. Использование графических редакторов с инструментами нарезки, которые выводят HTML и изображения напрямую, также способствовало созданию плохого кода с таблицами, часто имеющими много строк с высотой или шириной в 1 пиксель. Иногда для рендеринга контента использовалось гораздо больше строк кода, чем сам контент.

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

Каскадные таблицы стилей (CSS) были разработаны для улучшения разделение между дизайном и содержанием, и вернуться к семантической организации контента в сети. Термин «дизайн без таблиц» подразумевает использование CSS вместо таблиц макета для размещения элементов HTML на странице. Таблицы HTML по-прежнему имеют законное место при представлении табличной информации на веб-страницах,[3] а также иногда все еще используются в качестве устройств компоновки в ситуациях, когда поддержка CSS плохая или проблематичная, например, вертикальное центрирование элемента. Еще одна область, где все еще используются таблицы, - это электронные почтовые программы, и причина этого в том, что многие популярные почтовые клиенты действительно не успевают за модемным рендерингом HTML и CSS. В таком сценарии сложные электронные почтовые программы теряют часть своей структурной и творческой согласованности.

Принятие

Спецификация CSS1 была опубликована в декабре 1996 г. W3C[4] с целью улучшения веб-доступность и подчеркивая разделение презентационных деталей в таблицах стилей от семантический содержание в HTML документы. CSS2 в мае 1998 года (позже пересмотренный в CSS 2.1 и CSS 2.2) расширил CSS1 средствами позиционирования и компоновки таблиц.

Предпочтение использования таблиц HTML вместо CSS для управления компоновкой целых веб-страниц было вызвано несколькими причинами:

  • желание издателей контента повторить существующие корпоративный дизайн элементы на их веб-сайте;
  • ограничения на время поддержки CSS в браузерах;
  • то установленная база браузеров, не поддерживающих CSS;
  • незнание новых веб-дизайнеров стандартами CSS;
  • незнание или беспокойство по поводу причин (включая HTML семантика и веб-доступность ), чтобы использовать CSS вместо того, что считалось более простым способом быстрого достижения намеченных макетов, и
  • новое поколение WYSIWYG инструменты веб-дизайна, поощряющие эту практику.

Вехи в принятии макетов на основе CSS включают Проект веб-стандартов кампания по обновлению браузера в феврале 2001 г. и журнал о веб-дизайне Список отдельно 's одновременный редизайн, за которым последовала Проводной редизайн в 2002 году.[5] В CSS Zen Garden веб-сайт, запущенный в 2003 году, получил признание за популяризацию безтабличных макетов.[6]

Обоснование

Предназначенная и семантическая цель таблиц HTML заключается в представлении табличные данные[3][7] вместо того, чтобы раскладывать страницы.[8]Преимущества использования CSS для макета страницы включают улучшенную доступность информации для более широкого круга пользователей, используя широкий спектр пользовательские агенты. Экономия полосы пропускания за счет большого количества семантически бессмысленных <table>, <tr> и <td> Теги удаляются с десятков страниц, оставляя меньше, но более значимых заголовков, абзацев и списков. Инструкции по макету переносятся в таблицы стилей CSS для всего сайта, которые можно скачано однажды и кешированный для повторного использования, пока каждый посетитель перемещается по сайту. Сайты могут стать более удобными в обслуживании, так как весь сайт может быть изменен или переименован за один проход, просто изменив разметку конкретного CSS, что повлияет на каждую страницу, которая использует эту таблицу стилей. Новый HTML-контент может быть добавлен таким образом, чтобы согласованные правила макета немедленно применялись к нему существующим CSS без каких-либо дополнительных усилий.

Преимущества

Доступность

Основные статьи: Веб-доступность и Поисковая оптимизация

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

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

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

W3C's Рекомендации по доступности веб-контента директива нет. 3 состояния «используйте разметку и таблицы стилей и делайте это правильно».[9]Контрольная точка 3.3 руководства, контрольная точка приоритета 2, гласит: «Используйте таблицы стилей для управления макетом и представлением».[10]

Экономия полосы пропускания

Бестабличный дизайн создает веб-страницы с меньшим количеством HTML-тегов, используемых исключительно для позиционирования контента. Обычно это означает, что сами страницы становятся меньше для загрузки. Философия подразумевает, что все инструкции, касающиеся компоновки и позиционирования, должны быть перенесены во внешние таблицы стилей. По основным возможностям HTTP, поскольку они редко меняются и применяются совместно ко многим веб-страницам, они будут кэшироваться и повторно использоваться после первой загрузки. Это дополнительно снижает пропускную способность и время загрузки на сайте.[11][12]

Ремонтопригодность

Поддержание веб-сайта может потребовать частых изменений, как небольших, так и крупных, в визуальном стиле веб-сайта в зависимости от цели сайта. В табличном макете макет является частью самого HTML. Таким образом, без помощи визуальных редакторов на основе шаблонов, таких как Редакторы HTML изменение позиционного расположения элементов на всем сайте может потребовать больших усилий в зависимости от количества требуемых повторяющихся изменений. Даже используя sed или аналогичные глобальные утилиты поиска и замены не могут полностью решить проблему.

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

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

Недостатки

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

Смотрите также

использованная литература

  1. ^ Грубер, Джордан С. (1 февраля 1997 г.). "Outta Site". Проводной.
  2. ^ Маас, Бенард. "Краткая история редакторов WYSIWYG". 1PMWD. Получено 10 февраля 2015. Microsoft Office FrontPage был выпущен как пакет версии Microsoft Office 1997 года, это был первый случай, когда надежный коммерческий HTML-редактор и издатель WYSIWYG был доступен для использования каждым человеком ... Когда веб-страница, созданная из программное обеспечение WYSIWYG MS FrontPage будет работать с установленным сервером FPSE, и оно будет обладать всеми возможностями, которые технолог мог бы создать, написав HTML-код с нуля. Веб-дизайнерам больше не требовалось техническое понимание HTML для создания веб-страниц.
  3. ^ а б Дженнифер Кырнин. «Таблицы для табличных данных - что такое табличные данные? Когда использовать таблицы в стандартном документе XHTML». About.com, часть компании New York Times. Получено 2009-10-22.
  4. ^ Ли, Хокон Виум; Бос, Берт (1996-12-17). «Рекомендация W3C: каскадные таблицы стилей, уровень 1». W3C. Архивировано из оригинал на 1997-06-05. Получено 2019-04-19.
  5. ^ Зельдман, Джеффри (14 мая 2003 г.). Разработка с использованием веб-стандартов (1-е изд.). Индианаполис: Новые гонщики. стр.120-134. ISBN  978-0-7357-1201-0.
  6. ^ Зельдман, Джеффри (2007). Разработка с использованием веб-стандартов (2-е изд.). Беркли: Новые гонщики. п.137. ISBN  978-0-321-38555-0.
  7. ^ «17.2.1 Анонимные объекты таблицы». Спецификация каскадных таблиц стилей, уровень 2, редакция 1 (CSS 2.1). W3C. 2009. Получено 2009-10-23.
  8. ^ Доминик Хазаэль-Массье (2005). "Бестабличный макет HOWTO". W3C. Получено 2007-09-08.
  9. ^ «Рекомендации по обеспечению доступности веб-контента 1.0». W3C. 1999 г.. Получено 2009-09-19. Рекомендация 3. Используйте разметку и таблицы стилей и делайте это правильно.
  10. ^ «Рекомендации по обеспечению доступности веб-контента 1.0». W3C. 2000 г.. Получено 2009-09-19. Используйте таблицы стилей для управления макетом и представлением.
  11. ^ Дэниел М. Фроммельт (2003). «Переоборудование Slashdot с использованием веб-стандартов». Журнал A List Apart. Получено 2009-09-20.
  12. ^ Дэн Шафер (2003). «Утопия HTML: проектирование без таблиц с использованием CSS, Глава 4: Дизайн веб-сайтов с использованием CSS». SitePoint Pty. Получено 2009-09-20. ... помимо организационных преимуществ, описанных выше, в браузере меньше кода для загрузки. На сильно спроектированных сайтах или сайтах с сотнями и более страниц это уменьшенное время загрузки может существенно повлиять как на взаимодействие с пользователем, так и на ваши затраты на полосу пропускания.

внешние ссылки