Войти
Веб-дизайн без таблицы (или веб-макет без таблицы ) - это веб-дизайн, который позволяет избежать использования таблиц HTML для макета страницы в целях управления. Вместо таблиц HTML используются языки таблиц стилей, такие как каскадные таблицы стилей (CSS), для упорядочивания элементов и текста на веб-странице.
HTML - это язык разметки, визуальное представление которого изначально оставалось на усмотрение пользователя. Однако по мере того, как Интернет расширился из академического и исследовательского мира в мейнстрим в середине 1990-х годов и стал более ориентированным на средства массовой информации, графические дизайнеры искали способы контролировать внешний вид своих веб-страниц. Как особенно популяризировал дизайнер Дэвид Сигел в его книге «Создание сайтов-убийц», таблицы и разделители (обычно прозрачные однопиксельные GIF изображения с явно указанной шириной, высотой или поля) использовались для создания и поддержки макетов страниц.
В конце 1990-х на рынке появились первые достаточно мощные редакторы WYSIWYG, что означало, что веб-дизайнерам больше не требовалось техническое понимание HTML для создания веб-страниц. Такие редакторы косвенно поощряли широкое использование вложенных таблиц для размещения элементов дизайна. По мере того, как дизайнеры редактировали свои документы в этих редакторах, в документ добавлялся ненужный код и пустые элементы. Более того, неквалифицированные дизайнеры, вероятно, будут использовать таблицы больше, чем требуется при использовании редактора WYSIWYG. Эта практика часто приводила к тому, что многие таблицы вкладывались в таблицы, а также таблицы с ненужными строками и столбцами. Использование графических редакторов с инструментами нарезки, которые выводят HTML и изображения напрямую, также способствовало плохому кодированию с таблицами, часто имеющими много строк с высотой или шириной 1 пиксель. Иногда для рендеринга контента использовалось гораздо больше строк кода, чем сам контент.
Использование таблиц для разметки вызвало ряд проблем. Многие веб-страницы были разработаны с таблицами, вложенными в таблицы, что привело к созданию больших HTML-документов, которые используют большую пропускную способность, чем документы с более простым форматированием. Кроме того, когда макет на основе таблицы линеаризуется, например, при анализе программой чтения с экрана или поисковой системой, результирующий порядок содержимого может быть несколько беспорядочным и запутанным.
Каскадные таблицы стилей (CSS) были разработаны для улучшения разделения между дизайном и контентом и возврата к семантической организации контента в сети. Термин «дизайн без таблиц» подразумевает использование CSS вместо таблиц макета для размещения элементов HTML на странице. Таблицы HTML по-прежнему занимают свое законное место при представлении табличной информации на веб-страницах, а также иногда используются в качестве устройств макета в ситуациях, когда какая поддержка CSS является плохой или проблематичной, например, вертикальное центрирование элемента. Еще одна область, где все еще используются таблицы, - это электронные письма, и причина в том, что многие популярные почтовые клиенты действительно не успевают за модемным рендерингом HTML и CSS. при таком сценарии сложные электронные почтовые программы теряют часть своей структурной и творческой согласованности.
Спецификация CSS1 была опубликована в декабре 1996 г. W3C с целью улучшения веб-доступности и подчеркивания отделения деталей представления в таблицах стилей от семантического содержимого в документах HTML. CSS2 в мае 1998 г. (позже пересмотрен в CSS 2.1 и CSS 2.2) расширенный CSS1 с возможностями для positio нинг и сервировка стола.
Предпочтение использования таблиц HTML, а не CSS для управления макетом целых веб-страниц было вызвано несколькими причинами:
Достопримечательности К принятию макетов на основе CSS относятся кампания по обновлению браузера Web Standards Project в феврале 2001 г. и одновременный редизайн журнала A List Apart, за которым следует Редизайн Wired в 2002 году. Веб-сайт CSS Zen Garden, запущенный в 2003 году, получил признание за популяризацию макетов без таблиц.
Предполагаемая и семантическая цель HTML-таблиц заключается в представлении табличных данных, а не в макете страниц. Преимущества использования CSS для макета страницы включают улучшенную доступность информации для более широкого круга пользователей с использованием большого количества пользовательских агентов. Существует экономия полосы пропускания, поскольку большое количество семантически бессмысленных тегов Из-за быстрого роста Интернета, расширения законодательства о дискриминации по инвалидности и все более широкого использования мобильных телефонов и КПК, необходимо, чтобы веб-контент был доступен для пользователей, работающих с широким спектром устройств, помимо относительно однородной экосистемы настольного компьютера и ЭЛТ-монитора. Интернет впервые стал популярным на. Веб-дизайн без таблиц значительно улучшает веб-доступность в этом отношении. Устройства чтения с экрана и Брайля имеют меньше проблем с безтабличным дизайном, потому что они следуют логической структуре. То же самое верно и для поисковой системы поисковых роботов, программных агентов, которые, как надеется большинство издателей веб-сайтов, найдут их страницы, точно классифицируют их и, таким образом, позволят потенциальным пользователям легко находить их в соответствующих поиски. В результате разделения дизайна (CSS) и структуры (HTML) также возможно предоставить разные макеты для разных устройств, например карманные компьютеры, мобильные телефоны и т. Д. Также можно указать другую таблицу стилей для печати, например чтобы скрыть или изменить внешний вид рекламы или элементов навигации, которые не имеют отношения к делу и мешают печатной версии страницы. Руководство W3C Рекомендации по обеспечению доступности веб-контента ' 3 состояния «используйте разметку и таблицы стилей и делайте это правильно». Контрольная точка 3.3, контрольная точка приоритета 2, гласит: «Используйте таблицы стилей для управления макетом и представлением». Дизайн без таблиц создает веб-страницы с меньшим количеством HTML-тегов, используемых исключительно для позиционирования содержание. Обычно это означает, что сами страницы становятся меньше для загрузки. Философия подразумевает, что все инструкции относительно компоновки и позиционирования должны быть перенесены во внешние таблицы стилей. В соответствии с основными возможностями HTTP, поскольку они редко меняются и применяются совместно ко многим веб-страницам, они будут кэшироваться и повторно использоваться после первой загрузки. Это дополнительно сокращает пропускную способность и время загрузки на сайте. Поддержание веб-сайта может потребовать частых изменений, как небольших, так и крупных, в визуальном стиле веб-сайта, в зависимости от цели сайт. В табличном макете макет является частью самого HTML. Таким образом, без помощи визуальных редакторов на основе шаблонов, таких как изменение позиционного макета элементов на всем сайте, может потребоваться много усилий, в зависимости от количества требуемых повторяющихся изменений. Даже использование sed или аналогичных утилит глобального поиска и замены не может полностью решить проблему. В макете без таблиц с использованием CSS информация о макете может находиться в документе CSS. Поскольку информация о макете может быть централизована, возможно, что эти изменения могут быть сделаны быстро и глобально по умолчанию. Сами файлы HTML могут не нуждаться в корректировке при изменении макета. Кроме того, поскольку информация о макете может храниться вне HTML, может быть довольно легко добавить новый контент в дизайн без таблиц, будь то изменение существующей страницы или добавление новой страницы. Напротив, без такого дизайна макет каждой страницы может потребовать более трудоемкого ручного изменения каждого экземпляра или использования глобальных утилит поиска и замены. Однако владельцы сайтов часто хотят, чтобы определенные страницы отличались от других на сайте либо на короткий период, либо на долгий срок. Это часто требует разработки отдельной таблицы стилей для этой страницы. Однако содержимое страницы (или шаблона) обычно может оставаться неизменным, чего нельзя сказать о дизайне на основе таблиц. Поскольку CSS можно кэшировать, макет, полностью основанный на CSS, может отображаться некорректно, если внесены изменения, а клиент все еще использует устаревшую таблицу стилей. Это можно смягчить, если тщательно разработать и использовать методы.,
и удаляется с десятков страниц, оставляя меньше, но более значимых заголовков, абзацев и списков. Инструкции по макету переносятся в таблицы стилей CSS для всего сайта, которые можно загрузить один раз и кэшировать для повторного использования, пока каждый посетитель перемещается по сайту. Сайты могут стать более удобными в обслуживании, так как весь сайт может быть изменен или переименован за один проход, просто изменив разметку конкретного CSS, что повлияет на каждую страницу, которая использует эту таблицу стилей. Новый HTML-контент может быть добавлен таким образом, чтобы согласованные правила макета немедленно применялись к нему существующим CSS без каких-либо дополнительных усилий. ПреимуществаДоступность
Экономия полосы пропускания
Удобство обслуживания
НедостаткиСм. ТакжеСсылкиВнешние ссылки
Последняя правка сделана 2021-06-09 07:04:56
Содержание доступно по лицензии CC BY-SA 3.0 (если не указано иное).
