|
|
Объединяем все вместе - простое навигационное менюДля иллюстрации одного из способов объединения списков и ссылок, ниже представлен простой пример раскрывающегося навигационного меню, показанного на рис. 32.31. Раскрывающиеся меню являются очень распространенной навигационной системой. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " ><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv= "Content-Type" content="text/html; charset=utf-8"/> <title>Styling Lists example - basic flyout list</title> <link rel="stylesheet" href="styling-lists-example-flyout.css" type="text/css" media= "screen, projection"/> <script type="text/javascript" src="styling-lists-example-flyout.js"></script></head><body><div id="page"> <h1 >Home</h1> <!-- Обратите внимание, что ID контейнерного списка должен соответствовать ID, заданному в Javascript. -- > <ul id="nav"> <li><a href="http://example.com/">Home</a> <ul> <li><a href="http://example.com/">Nested Item</a></li> <li><a href="http://example.com/">Nested Item</a></li> </ul> </li> <li><a href="http://example.com/">About Us</a> <ul> <li><a href="http://example.com/">Nested Item</a></li> <li><a href="http://example.com/">Nested Item</a></li> </ul> </li> <li><a href="http://example.com/">Our Products</a > <ul> <li><a href="http://example.com/">Nested Item</a></li> <li><a href="http://example.com/">Nested Item</a></li> </ul> </li> <li><a href="http://example.com/">Contact Us</a> <ul> <li><a href="http://example.com/">Nested Item</a></li> <li><a href="http://example.com/">Nested Item</a></li> </ul> </li> </ul> <h2>Stuff</h2> <p>Text</p> <p>Text</p> </div> <!-- // #page -- ></body></html>
Рис. 32.31. Снимок с экрана примера раскрывающегося меню Заключение Хорошие навыки оформления списков и ссылок являются существенно важными для разработчиков Web, так как они используются повсеместно. Они регулярно объединяются для создания навигации сайта; в то же время четкое оформление ссылок является критически важным при использовании любого сайта. Плохое оформление ссылок может серьезно запутать любого, и может даже сделать сайт непригодным для некоторых людей. Контрольные вопросы · Как выбирать оформление базовых списков, например, квадратные маркеры или римские цифры для упорядоченного списка? · Что такое спрайт изображения, и зачем он используется? · Почему важен цветовой контраст, и как проверить, что ссылки используют подходящие цвета? · Что такое правильный порядок задания оформления различных состояний ссылок? Дополнительное чтение · Список исправлений WCAG Samurai для WCAG 1.0 (http://www.wcagsamurai.org/errata/errata.html), со специальной ссылкой на Рекомендацию 2. Не полагается только на цвет (http://www.wcagsamurai.org/errata/errata.html#GL2)) · Шрифт и цвет (глава из книги "Создание доступных Web-сайтов ", Джо Кларк) (http://joeclark.org/book/sashay/serialization/Chapter09.html) · Juicy Studio: Выделение ссылок (http://juicystudio.com/article/highlighting-links.php) · Max Design- Простые доступные внешние ссылки (http://www.maxdesign.com.au/presentation/external/) · Анализатор контраста 2.0 (Paciello Group) (http://www.paciellogroup.com/resources/contrast-analyser.html) · A List Apart: Спрайты CSS (http://alistapart.com/articles/sprites) . Лекция 33: Оформление таблиц A | версия для печати < Лекция 32 || Лекция 33: 123456 || Лекция 34 > Аннотация: В данной лекции рассматриваются различные аспекты оформления таблиц. Показывается структура таблицы, оформление отдельных элементов: таблицы в целом, заголовка, отдельных ячеек, границ, фона. Также рассматриваются основные дизайнерские приемы по оформлению таблиц: разметка "зебра", неравные столбцы, неполные и внутренние сетки. В конце лекции показываются две распространенные ошибки, связанные с оформлением таблиц, а также способы их устранения Введение Иногда кажется, что таблицы поняты немного неправильно в современной разработке Web. Так много внимания уделяется тезису "не используйте таблицы!", что люди иногда забывают, что тезис на самом деле имеет вид "не используйте таблицы для компоновки". Таблицы прекрасно справляются с тем, для чего они на самом деле предназначены - представлением табличных данных. Поэтому имеет смысл знать, как оформлять их правильно.Это руководство рассматривает эффективное применение CSS для создания таблиц данных с четким и легко читаемым оформлением. Также будут рассмотрены некоторые распространенные конструктивные решения для таблиц. Статья имеет следующее содержание: Структура таблицы Основы Ширина таблицы и ячейки Выравнивание текста Границы Заполнение Размещение заголовка таблицы Фон Исправление IE с помощью условных стилей Простой дизайн Распространенные варианты использования Разметка зебра Неравные столбцы Неполные сетки Внутренние сетки Две распространенные ошибки Ошибка border-collapse Ошибка поле/заголовок Заключение Контрольные вопросы Дополнительное чтениеСтруктура таблицы Прежде чем переходить к CSS, давайте рассмотрим ключевые структурные элементы таблиц, которые понадобятся для хорошего оформления: · Заголовки столбцов таблицы · Ячейки данных таблицы · Заголовок таблицы Когда пользователи сайта читают таблицу, они должны иметь возможность легко понять и следовать структуре таблицы. Чаще всего для этого используют границы, цвет фона, или то и другое.Нет необходимости следовать этим соглашениям оформления, однако, нужно гарантировать, что имеются четкие различия между ячейками th и td; заголовок таблицы должен четко ассоциироваться с таблицей и отличаться от остального текста на странице. Основы Рассмотрим, как изображается следующая нестилизованная таблица (это тот же пример, который был рассмотрен в статье 19 о таблицах HTML):
Данные легко понятны, но требуется некоторое усилие, чтобы определить, что происходит. Давайте добавим некоторое оформление, чтобы облегчить чтение. Ширина таблицы и ячеек Прежде всего, необходимо определить ширину таблицы. Браузер по умолчанию использует настройку table { width: auto; }, что приводит к выводу таблицы во всю ширину контента. Это обычно выглядит не слишком хорошо.Давайте предположим, что таблица связана со столбцом контента шириной 600px. Зададим для таблицы размер в 100% доступной ширины, чтобы максимально использовать доступное пространство. Так как имеется четыре столбца, давайте также зададим ширину ячеек таблицы по 25% для каждой: table { width: 100%;} th, td { width: 25%;}Можно на самом деле задать просто ширину для th и она будет задавать ширину всех столбцов; однако ничто не мешает быть основательнее. Это простое оформление создает результат, показанный на рис. 33.1:
Ячейки имеют сейчас одинаковую ширину. Мы рассмотрим задание неравной ширины ячеек позже, но пока двинемся дальше. Выравнивание текста Таблицу все еще немного неудобно читать, поэтому давайте зададим выравнивание текста немного точнее - дополнительное правило ниже будет выравнивать заголовки столбцов слева в соответствии с контентом (по умолчанию браузеры центрируют заголовки столбцов таблицы). table { width: 100%;} th, td { width: 25%; text-align: left;}Это немного улучшает внешний вид, как можно видеть на рис. 33.2:
В данный момент все ячейки вертикально выровнены по центру. При желании можно задать выравнивание текста по верху или по низу ячейки, или любое другое выравнивание по вертикали, которое нравится. Новые правила ниже задают выравнивание текста по верху: table { width: 100%;} th, td { width: 25%; text-align: left; vertical-align: top;}Таблица теперь выглядит как на рис. 33.3:
Обратите внимание, что верхняя строка заголовков столбцов выровнена по верху, даже хотя "Last Major Eruption" располагается на двух строках. Границы Таблица выглядит немного лучше, однако ее все еще затруднительно читать вдоль каждой строки. Пришло время задать несколько границ, чтобы облегчить чтение содержимого. Необходимо задать границы отдельно для каждой части таблицы, а затем решить, как эти границы должны комбинироваться. Чтобы показать, где будут задана граница, рисунок ниже показывает различные границы для таблицы (сплошная черная), заголовка таблицы (сплошная серая), th (штриховая синяя) и td (точечная красная).
Обратите внимание, как граница table обходит по контуру вокруг всех ячеек заголовков столбцов и данных, затем между ячейками и заголовком таблицы. Можно также видеть, что, по умолчанию, границы th и td находятся на некотором расстоянии друг от друга.Давайте посмотрим на другое оформление таблицы - можно задать простую черную границу для таблицы и ячеек, используя свойствоborder - это делается с помощью новых правил, представленных ниже: table { width: 100%; border: 1px solid #000;} th, td { width: 25%; text-align: left; vertical-align: top; border: 1px solid #000;}Получаемый результат показан на рис. 33.4:
Рис. 33.4. Таблица с простыми черными границами Это существенно облегчает чтение строк, однако может не понравиться пробел между ячейками. Существует два способа это изменить.Первый, можно просто закрыть разрывы, используя свойство border-spacing, следующим образом: table { width: 100%; border: 1px solid #000;} th, td { width: 25%; text-align: left; vertical-align: top; border: 1px solid #000; border-spacing: 0;}Это заставит границы соприкоснуться, вместо раздельного размещения. Граница толщиной 1px заменится границей в 2px, как видно на рис. 33.5:
Рис. 33.5. Таблица с удаленными пробелами между границами, что создает эффект границы толщиной 2px Можно также увеличить пробел между ячейками, используя border-spacing, хотя помните, что это свойство не работает в браузере Internet Explorer.Если требуется сохранить границу толщиной в 1px, необходимо задать таблицу так, чтобы границы "схлопывались" друг в друга. Это можно сделать с помощью свойства border-collapse вместо свойства border-spacing: table { width: 100%; border: 1px solid #000;} th, td { width: 25%; text-align: left; vertical-align: top; border: 1px solid #000; border-collapse: collapse; }Этот код создает таблицу с границей толщиной 1px, как на рис. 33.6:
Рис. 33.6. Таблица со свойством border-collapse, заданным как collapse, уменьшает толщину границы до 1px Когда задается схлопывание границ, необходимо помнить, что это может создавать проблемы, если к смежным ячейкам были применены различные стили оформления границ. Когда схлопываются различные стили границ, они могут "конфликтовать" друг с другом. Это разрешается согласно правилам разрешения конфликтов границ таблиц спецификации W3C CSS2 (http://www.w3.org/TR/REC-CSS2/tables.html#border-conflict-resolution), которые определяют, какие стили "выигрывают", когда они схлопываются. Заполнение Теперь, когда ячейки имеют границы, может быть полезно добавить свободное пространство в заголовок и ячейки таблицы. Для этого используется заполнение (padding). table { width: 100%; border: 1px solid #000;} th, td { width: 25%; text-align: left; vertical-align: top; border: 1px solid #000; border-collapse: collapse; padding: 0.3em;} caption { padding: 0.3em;}Это позволяет тексту "вздохнуть" немного свободнее, как показано на рис. 33.7:
Рис. 33.7. Таблица с заполнением, добавленным во все ячейки   Система охраняемых территорий в США Изучение особо охраняемых природных территорий(ООПТ) США представляет особый интерес по многим причинам...  Что делать, если нет взаимности? А теперь спустимся с небес на землю. Приземлились? Продолжаем разговор...  Что вызывает тренды на фондовых и товарных рынках Объяснение теории грузового поезда Первые 17 лет моих рыночных исследований сводились к попыткам вычислить, когда этот...  ЧТО И КАК ПИСАЛИ О МОДЕ В ЖУРНАЛАХ НАЧАЛА XX ВЕКА Первый номер журнала «Аполлон» за 1909 г. начинался, по сути, с программного заявления редакции журнала... Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте:
|
