Из Википедии, бесплатной энциклопедии
Перейти к навигации Перейти к поиску
Каскадные таблицы стилей
Концепции
Философии
Инструменты
Сравнения

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

История [ править ]

HTML - это язык разметки , визуальное представление которого изначально оставалось на усмотрение пользователя. Однако, как Интернет расширилась с научно-исследовательского мира в основное русло в середине 1990-х годов, и стал более ориентированных СМИ, графические дизайнеры искали способы контролировать внешний вид своих веб - страниц. Как особенно популяризировал дизайнер Дэвид Сигел в его книге « Создание веб-сайтов-убийц» , таблицы и разделители (обычно прозрачные однопиксельные изображения в формате GIF с явно заданной шириной, высотой или полями) использовались для создания и поддержки макетов страниц. [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 на основе макетов включают Project Web Standards 'Browser Upgrade кампании с февраля 2001 года и веб - дизайн журнала A List Apart ' s одновременное редизайн, а затем по проводной перепланировки в 2002 году [5] The CSS Zen Garden Веб-сайт, запущенный в 2003 году, получил широкое признание за популяризацию макетов без таблиц. [6]

Обоснование [ править ]

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

Преимущества [ править ]

Доступность [ править ]

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

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

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

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

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

Экономия полосы пропускания [ править ]

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

Ремонтопригодность [ править ]

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

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

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

Недостатки [ править ]

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

См. Также [ править ]

  • Обрамление (всемирная паутина)
  • Адаптивный веб-дизайн
  • Веб-грамотность (дизайн и доступность)
  • Святой Грааль (веб-дизайн)

Ссылки [ править ]

  1. ^ Gruber, Джордан С. (1997-02-01). "Outta Site" . Проводной .
  2. ^ Маас, Бенард. "Краткая история редакторов WYSIWYG" . 1PMWD . Проверено 10 февраля 2015 года . Microsoft Office FrontPage был выпущен как пакет версии Microsoft Office 1997 года, это был первый раз, когда надежный коммерческий HTML WYSIWYG редактор и издатель был доступен для использования каждым человеком ... Когда веб-страница, созданная из программное обеспечение WYSIWYG MS FrontPage будет работать с установленным сервером FPSE, и оно будет обладать всеми возможностями, которые технолог мог бы создать, написав HTML-код с нуля. Веб-дизайнерам больше не требовалось техническое понимание HTML для создания веб-страниц.
  3. ^ a b Дженнифер Кирнин. «Таблицы для табличных данных - что такое табличные данные? Когда использовать таблицы в стандартном документе XHTML» . About.com, часть компании The New York Times . Проверено 22 октября 2009 .
  4. ^ Ли, Хокон Виум; Бос, Берт (1996-12-17). «Рекомендация W3C: каскадные таблицы стилей, уровень 1» . W3C . Архивировано из оригинала на 1997-06-05 . Проверено 19 апреля 2019 .
  5. ^ Zeldman, Джеффри (2003-05-14). Разработка с веб-стандартами (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 . Проверено 23 октября 2009 .
  8. ^ Доминик Азаилом , -Massieux (2005). «Бестабличный макет HOWTO» . W3C . Проверено 8 сентября 2007 .
  9. ^ «Руководство по доступности веб-контента 1.0» . W3C. 1999 . Проверено 19 сентября 2009 . Рекомендация 3. Используйте разметку и таблицы стилей и делайте это правильно.
  10. ^ «Методы для руководства по доступности веб-контента 1.0» . W3C. 2000 . Проверено 19 сентября 2009 . Используйте таблицы стилей для управления макетом и представлением.
  11. ^ Дэниел М. Фроммельт (2003). «Переоснащение Slashdot с помощью веб-стандартов» . Журнал A List Apart . Проверено 20 сентября 2009 .
  12. ^ Дэн Шафер (2003). «Утопия HTML: проектирование без таблиц с использованием CSS, Глава 4: Дизайн веб-сайтов с использованием CSS» . SitePoint Pty . Проверено 20 сентября 2009 . ... помимо организационных преимуществ, описанных выше, в браузере меньше кода для загрузки. На сильно спроектированных сайтах или сайтах с сотнями и более страниц это уменьшенное время загрузки может существенно повлиять как на взаимодействие с пользователем, так и на ваши затраты на пропускную способность.

Внешние ссылки [ править ]

  • W3C Tableless layout HOWTO
  • 13 причин, по которым CSS превосходит таблицы в дизайне веб-сайтов
  • Open Designs (коллекция W3C-совместимых веб-шаблонов без таблиц)