Использование ПО с открытым исходным кодом для создания Web-сайта для совместной работы: Часть 8. Оформление стиля c CSS

Исследуйте методы структурирования содержимого нового экстранет Web-сайта, включая методы изменения представления и оформления содержимого, поставляемого Drupal.

Элистер Льюис-Боуэн, старший инженер-программист, IBM

Элистер Льюис-БоуэнЭлистер Льюис-Боуэн (Alister Lewis-Bowen) работает старшим инженером-программистом в IBM Internet Technology Group. Он занимается Интернет и web-технологиями как сотрудник IBM UK с 1993. Элистер был переведен в США для работы над Web-сайтами спортивных событий, спонсируемых IBM, а затем как старший Web-мастер ibm.com. В настоящее время он помогает создавать семантические Web-прототипы.



Стефен Эванчик, инженер-программист, IBM

Стефен ЭванчикСтефен Эванчик (Stephen Evanchik) работает инженером-программистом в IBM Internet Technology Group. Он принимает участие во многих проектах с открытыми исходными кодами, самым известным из которых является его IBM TrackPoint-драйвер в ядре Linux. Стефен в настоящее время работает с появляющимися семантическими Web-технологиями.



Луис Вайцман, старший инженер-программист, IBM

Луис ВайцманЛуис Вайцман (Louis Weitzman) работает старшим инженером-программистом в IBM Internet Technology Group. В течение 30 лет он работал на стыке дизайна и вычислений. Помогал разрабатывать XML, фрагментированную систему управления содержимым, используемую для ibm.com, а в настоящее время участвует в обеспечении процесса проектирования новых проектов.



25.12.2006

Введение

В данной серии статей группа разработчиков IBM® Internet Technology Group описывает процесс создания специализированного Web-сайта для вымышленной компании International Business Council (IBC). Для сайта требуется создать хранилище документов, дискуссионные группы, специализированные рабочие группы, систему планирования конференций и описание запланированных сессий.

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

Drupal позволяет дизайнерам тем использовать CSS для изменения представления XHTML-содержимого. Стилизация при помощи CSS является общим подходом для всех Web-сайтов (не только для Drupal) и является частью создания удобного и приятного Web-сайта. Поэтому в данной статье рассматриваются общепринятые подходы к использованию CSS. Мы приведем некоторые из использованных нами технических приемов оформления Web-сайта IBC для использования созданной нами структуры. Вы узнаете о методах, которые мы использовали для:

  • Проектирования удобной в обслуживании CSS-структуры.
  • Обеспечения пропорциональных схем страниц.
  • Идентификации и визуализации разделов Web-сайта.
  • Создания управляемых при помощи CSS ниспадающих меню.
  • Разрешения переключаемых пользователем схем.
  • Обеспечения стилизации вывода.

Система поддержки тем в Drupal, которая рассматривалась в предыдущих статьях, позволяет нам сохранить отделение структуры и представления от программной логики. Мы также пытаемся сохранить, насколько это возможно, представление нашего Web-сайта отделенным от структуры содержимого. Теперь, при наличии хорошо подготовленных шаблонов, структурирующих содержимое при помощи XHTML, мы можем оформить стиль содержимого, используя CSS.

Информация, приведенная в данной серии статей, должна рассматриваться не как строгий набор правил разработки, а просто как пример оформления стиля Web-сайта.

Совместимость

Оформление стиля Web-сайтов является проверкой терпения и решимости. Если ваша XHTML-структура логична, то ваша жизнь облегчается. Однако дизайнеры тем очень хорошо знают тщетность попыток заставить CSS работать одинаково во всех браузерах, их версиях, на различных платформах и т.д.

Хотя сейчас с этим стало легче, обратная совместимость зависит от ожиданий вашего клиента и требований пользователей. Вы должны понимать эти требования и четко определить их. Мы, что касается Web-сайта IBC, работаем с пользователями, довольно хорошо подготовленными технически, которые, в основном, используют современные браузеры. Используя идеи семантической разметки для структуры содержимого, мы можем создать Web-страницы, имеющие рациональную схему в старых браузерах, в которых даже может быть недоступен CSS. На рисунке 1 приведено сравнение отображения домашней страницы IBC при наличии и отсутствии поддержки стиля в браузерах.

Рисунок 1. Домашняя страница с использованием CSS и без
Рисунок 1. Домашняя страница с использованием CSS и без

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

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


Организация CSS-файла

В седьмой части данной серии статей мы создали новый каталог темы в каталоге themes путем копирования темы Bluemarine, поставляемой с дистрибутивом Drupal. Для организации этого каталога мы решили создать в нем подкаталог c, содержащий все наши файлы стилей. Мы также создали подкаталоги i и j для изображений и JavaScript-файлов соответственно, специфичных для данной темы.

Вы также можете указать Drupal, какую таблицу стилей вы хотите добавить, используя функцию theme_add_styles в функции hook_init вашего модуля или файле темы templates.php. Эта функция позволяет добавить путь к вашей таблице стилей и связанным с ней файлам. Это выглядит в ваших шаблонах как сформированный набор элементов LINK в переменной $styles, передаваемой механизмом phptemplate. Вместо этого мы вручную кодируем наши элементы LINK в файле page.tpl.php. Этот метод может быть более предпочтительным для вашего дизайнера темы, поскольку он может контролировать использование таблиц стилей непосредственно в файле шаблона.

По умолчанию Drupal использует файл styles.css, расположенный в каталоге misc. Вместо того, чтобы поместить все стили в один большой файл, мы хотим определить несколько таблиц стилей и связать их с отдельными задачами стилевого оформления. Вместо использования элемента LINK для каждой из них в разделе HEAD шаблона page.tpl.php мы выбрали вариант создания одной таблицы стилей, содержащей в себе все остальные, ориентированные на отдельные задачи таблицы стилей. В листинге 1 приведено содержимое файла screen.css, который мы использовали для определения стилей наших основных компонентов экрана.

Листинг 1. Таблицы стилей в одном файле screen.css
@import url("base.css");
@import url("form.css");
@import url("layout.css");
@import url("banner.css");
@import url("nav_bar.css");
@import url("side_bar.css");
@import url("login.css");
@import url("home.css");
@import url("workgroups.css");
@import url("conferences.css");
@import url("members.css");
@import url("announcements.css");
@import url("action_items.css");
@import url("agenda_items.css");
@import url("search.css");
@import url("discussions.css");
@import url("comments.css");
@import url("filegallery.css");
@import url("companies.css");

В этом файл имеется несколько включаемых таблиц стилей, в том числе базовый набор стилей XHTML-элементов, форм, схем страниц, основных областей схемы (баннер, навигация, боковая панель) и основных разделов Web-сайта.

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

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

Другим способом улучшить возможности для поиска в наших таблицах стилей являлось применение маркера, помогающего искать комментарии в файлах. В листинге 2 показан пример использования знака равенства, который не используется в CSS-синтаксисе, в комментариях разделов. Эта идея, предложенная Дугом Боуманом (Doug Bowman) (см. раздел "Ресурсы"), является очень полезной для быстрого поиска разделов стилей.

Еще одним полезным методом являлось расположение всех стилей в алфавитном порядке. Этот технический прием обеспечивает определенную логичность при поиске стилей.

Листинг 2. Легкий для поиска комментарий в CSS-файле
/* -----------------------------------------------------------------
 *	=announcement_summary
 * -----------------------------------------------------------------
 */
.announcement_summary {
	margin: 0 0 .8em 0;
}
.announcement_summary h3 a {
	font-size: 90%;
}

Браузер будет применять для XHTML стили по умолчанию, что может привести в замешательство дизайнера тем. Мы решили нормализовать все XHTML-элементы селекторы, зная те, которые будем использовать, и установили для них значения полей (margin и padding) в ноль, как показано в листинге 3. Стилевое оформление этих элементов теперь более предсказуемо. Еще один способ - применить нулевые поля margin и padding для всех элементов при помощи селектора *. Однако мы хотели сохранить определенную степень контроля над тем, на какие элементы воздействовать.

На Web-сайте Эрика Мэйера (Eric Mayer) приведена более подробная информация об эффектах применения браузерами стилей по умолчанию (см. раздел "Ресурсы").

Листинг 3. Нормализация стилей полей margin и padding для селекторов, которые мы хотим использовать
p, ul, li, ol, dl, dt, dd, h1, h2, h3, h4, 
form, fieldset, blockquote, table, th, tr, td {
	margin: 0;
	padding: 0;
}

Оформление стиля для большей доступности

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

Пропорциональные размеры

Под установкой пропорциональных размеров мы понимаем использование процентов и единиц em для размеров контейнера, длин полей, размеров шрифтов и так далее. Такой подход позволяет создавать растягиваемые схемы (fluid layout) со шрифтами, которые все сразу пропорционально меняют размеры. Еще одним предметом рассмотрения является способ, нужный нам для оформления стиля изображений таким образом, чтобы они работали эффективно в растягиваемой схеме.

Гибкие шрифты
Современные браузеры способны менять размеры шрифта по умолчанию в отображаемой Web-странице. Это очень полезная возможность, когда пользователю нужно увидеть больший объем информации в окне браузера путем уменьшения размера шрифта или когда нужно сделать Web-страницу более удобочитаемой путем увеличения шрифта. На рисунках 2 и 3 показано, как меняется схема сайта IBC при переходе с маленького на большой шрифт.

Рисунок 2. Схема с уменьшенным размером шрифта
Рисунок 2. Схема с уменьшенным размером шрифта
Рисунок 3. Схема с увеличенным размером шрифта
Рисунок 3. Схема с увеличенным размером шрифта

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

Как показано в листинге 4, в начале нашей базовой таблицы стилей (base.css) мы определили стили, включая размер шрифта.

Листинг 4. Установка первоначального стиля шрифта для селектора body
body {
	background: #fff;
	color: #333;
	font-family: Verdana, sans-serif;
	font-size: small;
	line-height: 1.5em;
	margin: 0;
	padding: 0;
}

Для любых других изменений размера шрифта мы использовали процентное соотношение для сохранения пропорциональности при изменениях пользователем размера шрифтов по умолчанию в браузере. Например, в листинге 5 показано, как мы установили размер шрифта для контейнера sidebar.

Листинг 5. Оформление стиля контейнера sidebar в layout.css
#sidebar {
  background: transparent url(/themes/ibc/i/bg_sidebar_right.gif) no-repeat top right;
  float: right;
  font-size: 80%;
  line-height: 1.4em;
  width: 30%;
}

То есть, теперь размер шрифта в боковой панели равен 80% от начального размера (small). Однако помните о том, что при использовании процентного соотношения для стилей дочерних селекторов, соотношение накапливается. Например, если мы установим размер шрифта для области содержимого внутри этого контейнера в 90%, то этот размер будет равен 90% из 80% начального размера шрифта. Более "глубокое" использование процентных соотношений в Document Object Model (DOM) становится менее эффективным.

Растягиваемая схема
Некоторое содержимое Web-сайта IBC потенциально может быть довольно широким, поэтому мы хотели использовать как можно больший размер окна просмотра браузеров. Мы решили применить растягиваемую схему содержимого вместо фиксированной ширины. На рисунках 4 и 5 показано, как меняется схема при изменении размера окна просмотра браузера.

Рисунок 4. Схема с узким окном просмотра браузера
Рисунок 4. Схема с узким окном просмотра браузера
Рисунок 5. Схема с широким окном просмотра браузера
Рисунок 5. Схема с широким окном просмотра браузера

Это означает, что мы используем процентные соотношения для ширин содержимого главной схемы, таких как ширины главной области содержимого и боковой панели. В стиле боковой панели в листинге 5 ширина установлена в 30%. Главный контейнер содержимого, показанный в листинге 6, использует ширину менее 70% для обеспечения реализации модели ширины прямоугольного блока в Microsoft® Internet Explorer.

Листинг 6. Стилевое оформление контейнера главного содержимого в layout.css
#content {
	clear: both;
	float: left;
	width: 67%;
}

Имеется много технических приемов создания растягиваемых многоколоночных схем. Мы решили сделать растягиваемыми оба контейнера (и справа, и слева). Мы установили разумную читабельную минимальную ширину и разумную максимальную ширину для обеспечения предела размера изображений, используемых в дизайне. В листинге 7 вы можете увидеть используемое нами стилевое оформление этого в файле layout.css. Контейнер wrap, оформленный здесь, показан на рисунке 1 в седьмой части данной серии статей. Знайте, что стили max-width и min-width не имеют универсальной реализации для всех браузеров. Поскольку мы решили сделать растягиваемой боковую панель, наступает момент, когда боковая панель накладывается поверх области главного содержимого (когда ширина окна просмотра становится слишком узкой).

LЛистинг 7. Ограничение ширины в layout.css
#wrap {
	max-width: 1600px;
	min-width: 750px;
}

Мы также применили пропорциональные размеры таких элементов как BUTTON или INPUT-элементов типа submit. Для этих элементов мы использовали единицы em вместо процентов для стилей полей (margin, padding) и ширины. В листинге 8 показано, как мы оформили INPUT-элементы типа submit.

Листинг 8. Стилевое оформление INPUT-элементов типа submit, form-submit в forms.css
input.form-submit {
	background: #fff url(/themes/ibc/i/bg_btn.gif) repeat-x bottom left;
	border: 1px solid #ccc;
	border-bottom-color: #999;
	border-right-color: #999;
	cursor: pointer;
	font-size: 79%;
	margin: 1em 0 0 0;
	padding: 0.25em;
	text-align: center;
	width: 6em;
}

На рисунке 2 показан хороший пример изменения размеров элементов формы. Используемое в верхней части страницы текстовое поле увеличивается по ширине при увеличении размера шрифта.

Возможна ситуация, когда вам нужно окружить контейнерами DIV или SPAN виджет формы для доступа к нему из ваших CSS-таблиц стилей. Drupal forms API позволяет вам определить содержимое перед и после XHTML, сгенерированным для каждого виджета формы, при помощи элементов массивов #prefix и #suffix (см. примеры в листинге 11 шестой части данной серии статей).

Стилевое оформление изображений в растягиваемой схеме
Как показано на рисунках 2, 3, 4 и 5, изменения размеров шрифта и ширины окна просмотра потенциально может иметь драматическое воздействие на визуальные компоненты, размещенные на странице. Некоторые из них заполняются цветом контейнеров, например, черным фоном панели навигации. При увеличении размера шрифта увеличивается высота панели навигации. Оформление стиля этого контейнера черным фоновым цветом означает, что мы не должны беспокоиться об этом. Аналогично, мы можем использовать процентное отношение или единицы em для стиля размеров границ.

Еще одним традиционным техническим приемом является повторение визуализации изображения в фоне элемента в горизонтальном или вертикальном направлении. При этом любые изменения размеров не оказывают заметного влияния на отображение, поскольку края изображения заполняют определенный фоновый цвет. На рисунке 6 показано, как изображение, создающее градиент в BUTTON или INPUT-элементах типа submit расширяется, заполняя пространство, созданное увеличившимся размером шрифта.

Рисунок 6. Стиль фона остается неизменным
Рисунок 6. Стиль фона остается неизменным

На рисунке 7 показано, как стилевое оформление в листинге 8 создает это растягиваемое фоновое изображение в кнопке.

Рисунок 7. Устройство кнопки, изображенной на рисунке 6
Рисунок 7. Устройство кнопки, изображенной на рисунке 6

Фоновый цвет установлен белым для INPUT-элемента типа submit. Изображение используется в качестве фона для обеспечения градиента в белый цвет. Оно имеет ширину, равную одному пикселю, и размещается многократно, заполняя контейнер горизонтально. Если размер контейнера изменяется, фоновое изображение соответствующим образом заполняет пространство, создавая желаемый эффект.

Этот технический прием работает хорошо для простых градиентов, которые должны расширяться и сокращаться в горизонтальном или вертикальном направлении. Однако для более сложных изображений, таких как фон боковой панели, мы используем изображения, преднамеренно созданные большими по размеру, чем их область по умолчанию, и размещаем их соответствующим образом. При расширении схемы отображаемая видимая часть изображения увеличивается. Этот прием был предложен Дугом Боуманом (Doug Bowman) в методике "скользящих дверей" (sliding doors) (см. раздел "Ресурсы"). На рисунке 8 показано, как фон боковой панели расширяется при увеличении размеров окна просмотра браузера.

Рисунок 8. Боковая панель, отображаемая в узком и широком формате
Рисунок 8. Боковая панель, отображаемая в узком и широком формате

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

Рисунок 9. Изображения, создающие фон боковой панели
Рисунок 9. Изображения, создающие фон боковой панели

Структура боковой панели приведена в листинге 9. Внешний элемент DIV со значением атрибута ID равным sidebar содержит внутренний элемент DIV с атрибутом class равным gutter. Внутри него отображается содержимое переменной $sidebar_right.

Листинг 9. Структура sidebar в page.tpl.php
<div id="sidebar">
  <div class="gutter">
      <?php print $sidebar_right; ?>
  </div>
</div>

В листинге 10 показано, как мы оформили стиль этих двух DIV-контейнеров. Очень широкое изображение, формирующее верхнюю правую сторону фона, располагается вверху справа в контейнере sidebar. Меньшее изображение, формирующее верхнюю левую сторону фона, располагается вверху слева в контейнере gutter. Если ширина боковой панели увеличивается, фоновые изображения перемещаются друг по другу (отсюда термин "скользящие двери"), все больше открывая расположенное ниже изображение (рисунок 9). Получается, что фоновая графика расширяется и заполняет всю область. Это базовая концепция наслоения фоновых изображений, используемая во многих ситуациях.

Листинг 10. Стилевое оформление фона боковой панели в layout.css
#sidebar {
  background: transparent url(/themes/ibc/i/bg_sidebar_right.gif) no-repeat top right;
  .
  .	
}
#sidebar .gutter {
  background: transparent url(/themes/ibc/i/bg_sidebar_left.gif) no-repeat top left;
  padding: 10px 20px 0 20px; 
}

Дополнительное содержимое для не традиционных браузеров
Эта тема рассматривалась в седьмой части данной серии статей. Однако нам все еще нужно спрятать эти дополнительные элементы для использования с традиционными браузерами, поэтому мы применяем к этим контейнерам стиль display: none в классе со значением access.


Оформление разделов сайта

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

Мы хотели сохранить основную схему на всем Web-сайте IBC, чтобы избежать замешательства аудитории и обеспечить визуальную цельность. Однако, используя основную палитру, которую мы спроектировали для брендинга, мы идентифицировали главные разделы сайта путем изменения цвета определенных визуальных элементов. Некоторые из этих элементов содержатся в баннере Web-сайта, показанном на рисунке 10. Чтобы достичь этого эффекта, мы использовали CSS для изменения фонового изображения баннера, пиктограмму возле выбранного элемента меню и цвет нижней границы.

Рисунок 10. Баннеры для каждого основного раздела Web-сайта
Рисунок 10. Баннеры для каждого основного раздела Web-сайта

Во-первых, мы использовали обычный технический прием сокрытия элемента H1, представляющего заголовок Web-сайта внутри баннера (вы можете увидеть это в листинге 1 седьмой части данной серии статей). Таким образом, мы можем использовать вместо него фоновое изображение, но все равно предоставлять текстовый заголовок, если стиль не применяется. Это полезно для оформления вывода на печать, который мы рассмотрим ниже. В листинге 11 показан метод, который мы использовали для сокрытия текста H1.

Листинг 11. Предоставление изображения для заголовка сайта в header.css
#banner {
	background: #ddd url(/themes/ibc/i/bg_header_home.gif) no-repeat top left;
	height: 100%;
	overflow: hidden;
	height: 61px;
}
#banner h1 {
	display: none;
}

В баннере по умолчанию применяется фоновое изображение. Размеры баннера фиксированы, но высота могла бы быть переменной, а фоновое изображение намного большим по размеру для обеспечения еще одного эффекта "скользящих дверей", применяемого при увеличении размеров текста поисковой формы. Элемент H1 затем скрывается путем полного извлечения его из потока данных. Еще одним способом сокрытия элемента H1 является перемещение его из окна просмотра браузера, используя стиль text-indent: --999em, то есть текст остается в потоке данных документа.

Давайте рассмотрим для примера раздел Workgroups. Поскольку мы знаем, что значение атрибута class элемента BODY будет установлено в workgroup, мы можем соответствующим образом оформить стиль элементов нашего баннера. В листинге 12 показано, как меняются стили для изменения внешнего вида данного раздела.

Листинг 12. Стили раздела Workgroup в workgroups.css
.workgroups #banner {
	background: #ddd url(/themes/ibc/i/bg_header_workgroups.gif) 
	            no-repeat top left;
}
.workgroups #nav_bar #pri_nav li#t_workgroups a {
	background: transparent url(/themes/ibc/i/icon_nav_workgroups.gif) 
	            no-repeat center left;
	color: #fff;
	font-weight: bold;
}
.workgroups #nav_bar #pri_nav li#t_workgroups ul li a {
	background: transparent url(/themes/ibc/i/icon_nav_bullet_workgroups.gif)
	            no-repeat top left;
	color: #d1d1d1;
}
.workgroups #nav_bar #pri_nav li#t_workgroups ul li a:hover {
	color: #fff;
}
.workgroups #nav_bar, .workgroups #nav_bar #pri_nav li ul {
	border-bottom: 6px solid #d50304;
}
.workgroups #footer {
	border-top: 3px solid #d50304;
}

В CSS вы можете заметить, что большая часть стилевого оформления указывается в элементе UL основной навигации (листинг 7, часть 7). Эти стили изменяют стиль по умолчанию, указанный в файле nav-bar.css. В приведенном выше листинге 12 фон баннера меняется - для него используется изображение, предназначенное для конкретного раздела. Затем меняется фон для anchor элемента списка workgroup, что выглядит так, как будто маркер элемента меню изменяет цвет. Для дополнительного выделения меняется цвет и ширина шрифта этого элемента списка и всех элементов списка следующего уровня вложенности. Стиль элементов списка следующего уровня вложенности тоже меняется, так что фоновые изображения, используемые для создания маркеров, появляются с соответствующим цветом. Это относительно простой способ оформления стиля разделов сайта. Конечно, можно использовать CSS и для более существенного изменения схемы страницы.


Навигация

Основная навигация по IBC является динамической. Структура навигации использует неупорядоченный список элементов anchor. Для подменю мы встроили другой уровень элементов UL. В листинге 7 седьмой части данной серии статей показан XHTML-код. При использовании этого метода семантика навигации сохраняется даже при отсутствии стиля (рисунок 11). Это также позволяет нам использовать повторяющиеся изображения в фоне элементов anchor в CSS. Это облегчает создание дополнительных меню и уменьшает время загрузки.

Рисунок 11. Навигация по Web-сайту без применения стилевого оформления
Рисунок 11. Навигация по Web-сайту без применения стилевого оформления

Для создания эффекта ниспадающего меню со встроенными элементами UL используется CSS. Существует много ссылок в Web и информации в печатной документации по вопросу использования CSS для реализации ниспадающих меню. Мы выбрали методику, основанную на Suckerfish Dropdowns. В листинге 13 показан стиль, примененный для элемента UL первого уровня.

Листинг 13. Стилевое оформление элементов неупорядоченного списка для навигации по сайту в nav-bar.css
#pri_nav {
	float: left;
	display: block;
	list-style: none;
	margin: 0;
	padding: 0 1em .5em 1em;
}
#pri_nav li {
	float: left;
}
#pri_nav li#t_home {
	width: 5.1em;
}
#pri_nav li#t_workgroups, #pri_nav li#t_workgroups ul li {
	width: 10em;
}
#pri_nav li#t_conferences, #pri_nav li#t_conferences ul li {
	width: 10em;
}
#pri_nav li#t_members, #pri_nav li#t_members ul li {
	width: 8em;
}
#pri_nav li a {
	background: transparent url(/themes/ibc/i/icon_nav.gif) 
	            no-repeat center left;
	border: 0;
	color: #d1d1d1;
	color: #e0e0e0;
	display: block;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	text-decoration: none;
	text-indent: 16px;
	text-transform: uppercase;
}
#pri_nav li a:hover {
	color: #fff;
}

Первые два правила оформления устанавливают элемент UL на отображение всех дочерних элементов LI горизонтально и без маркеров. Следующие четыре правила устанавливают ширину каждого из элементов LI, представляющих основные разделы сайта. Они также гарантируют неизменность ширины любых встроенных ниспадающих списков. На рисунке 12 показано, как выглядит меню с элементом UL первого уровня, оформленного с использованием приведенного выше CSS.

Рисунок 12. Навигация с оформленными элементами UL первого уровня
Рисунок 12. Навигация с оформленными элементами UL первого уровня

Элементы первого уровня представляются соответствующим образом. Однако встроенные элементы UL должны быть корректно выровнены, оформлены изображениями маркера и должны появляться только тогда, когда курсор мышки наведен на LI, содержащий их. В листинге 14 показан CSS для стилевого оформления этих встроенных элементов UL.

Листинг 14. Стилевое оформление встроенных элементов неупорядоченного списка для навигации по сайту в nav-bar.css
#pri_nav li {
	position: relative;
}
#pri_nav li ul {
	background: #000;
	border-bottom: 6px solid #666;
	left: -999em;
	margin: 0;
	padding: .7em .1em 0 .5em;
	position: absolute;
	top: 1.3em;
	width: 10em;
}
#pri_nav li:hover ul, #pri_nav li.over ul {
	left: 0;
}
#pri_nav li ul li {
	float: left;
	list-style: none;
	width: 10em;
}
#pri_nav li ul li a {
	background: transparent url(/themes/ibc/i/icon_nav_bullet.gif) 
	            no-repeat top left;
	border-top: 1px solid #333;
	display: block;
	font-size: 95%;
	padding-left: 12px;
	text-indent: 0;
	text-transform: capitalize;
	width: 9em;
}
#pri_nav li ul li a:hover {
	color: #fff;
}

Более интересная часть этого CSS содержится в трех первых правилах стилевого оформления. Первое правило гарантирует, что мы можем установить позицию встроенных элементов UL относительно содержащих их элементов LI. Второе правило устанавливает позиции встроенных элементов UL за границами окна просмотра браузера, используя стиль left: -999em; так, чтобы их нельзя было увидеть. Мы используем здесь абсолютное позиционирование, для того чтобы удалить эти элементы UL из потока данных страницы и чтобы их высота не добавлялась к высоте содержащих элементов. Если бы вместо этого использовалось относительное позиционирование, страница отображалась бы так, как показано на рисунке 13. Последние три правила оформления стиля, продемонстрированные здесь, выравнивают и оформляют стиль текста и обеспечивают новые фоновые изображения для встроенных элементов, представляющих ниспадающие списки.

Рисунок 13. Использование относительного позиционирования для селектора #pri_nav li ul в nav-bar.css
Рисунок 13. Использование относительного позиционирования для селектора #pri_nav li ul в nav-bar.css

Есть третье правило оформления стиля в листинге 14, которое создает иллюзию падения, перемещая встроенный элемент UL из позиции вне окна просмотра браузера в позицию под содержащим его элементом LI.

Теперь стилевое оформление ниспадающего списка завершено. На рисунке 14 показано, что происходит при помещении курсора мыши над ссылкой MEMBERS.

Рисунок 14. Помещение курсора мыши над ссылкой законченного ниспадающего меню
Рисунок 14. Помещение курсора мыши над ссылкой законченного ниспадающего меню

На момент написания данной статьи Internet Explorer (IE) не поддерживал псевдо класс hover в элементах LI. В листинге 14 вы можете увидеть селектор #pri_nav li.over ul. Класс over в IE используется в качестве ловушки для отображения встроенных элементов UL. Эти классы могли бы быть вручную помещены в XHTML-код навигации. Либо, как указывается в методике Suckerfish Dropdown, можно активизировать в событии onload небольшой JavaScript-код для анализа DOM и вставки класса over в содержащие элементы LI.


Переключение схем

Обмен данными и совместная работа индивидуумов в IBC имеют большое значение, а одним из требований к Web-сайту является обеспечение различных способов просмотра профилей членов сообщества. Для просмотра информации о членах IBC (об их компании или вовлеченности в Web-сайт) мы используем закладки. Исходя из опросов пользователей, предоставление фотографий каждого члена (как показано на рисунке 15) является ценной функциональной возможностью.

Рисунок 15. Схема для фотографий членов Web-сайта
Рисунок 15. Схема для фотографий членов Web-сайта

Однако администраторы сайта IBC обнаружили, что легче просматривать более традиционные списки, показанные на рисунке 16, которые позволяют им быстрее получить больше информации о пользователях.

Рисунок 16. Компактная схема для просмотра информации о членах Web-сайта
Рисунок 16. Компактная схема для просмотра информации о членах Web-сайта

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

Мы уже имеем одну таблицу стилей, которая управляет схемой с фотографиями, members.css. Для создания таблицы стилей для визуализации компактной схемы мы скопировали ее в этот же каталог и переименовали в members_alt.css.

Поскольку альтернативный набор стилей для сотрудников может быть сгруппирован с нашими обычными таблицами стилей, мы скопировали screen.css в этот же каталог и переименовали в screen_alt_members.css. В этом файле мы заменили include для members.css (листинг 1) на members_alt.css.

Для завершения процесса и предоставления альтернативного стиля для браузера мы добавили новый элемент LINK в раздел head страницы в page.tpl.php. В листинге 15 показаны элементы LINK, а также то, как у них отличается атрибут title.

Листинг 15. Определение альтернативных стилей в page.tpl.php
<link rel="stylesheet" 
      type="text/css" 
      media="screen" 
      href="themes/ibc/c/screen.css" 
      title="Default layout"/>
<link rel="alternate stylesheet" 
      type="text/css" 
      media="screen" 
      href="themes/ibc/c/screen_alt_member.css" 
      title="Alternate member layout"/>

Браузер распознает, что существует альтернативный способ оформления стиля Web-сайта и позволяет вам выбрать это новое представление через интерфейс браузера, как показано на рисунке 17.

Рисунок 17. Переключение стилей через интерфейс браузера Firefox
Рисунок 17. Переключение стилей через интерфейс браузера Firefox

Однако некоторые браузеры не распознают альтернативные стили; мы все-таки должны предоставить визуальный маркер на странице раздела member, указывающий на возможность переключения стиля и позволяющий пользователю активизировать изменение схемы страницы. Для этого существуют различные способы, но мы решили использовать метод, основанный на методике, описанной Плом Соуденом (Paul Sowden) (см. раздел "Ресурсы").

В шаблоне, который управляет схемой списка узлов member, мы добавили пару ссылок. Как показано в листинге 16, эти элементы anchor содержат триггеры onclick, вызывающие JavaScript-функцию setActiveStyleSheet.

Листинг 16. Ссылки для переключения стилей
<span class="actions common"><a 
   href="#" onclick="setActiveStyleSheet('Default layout');return false;" 
   title="Display the member information using member photographs">Photo layout</a>
</span>

<span class="actions common"><a href="#" 
   onclick="setActiveStyleSheet('Alternate member layout');return false;" 
   title="Display the member information using a compact layout">Compact layout</a>
</span>

JavaScript анализирует элементы LINK с атрибутом media равным screen из DOM и устанавливает атрибут disable, если какой-нибудь элемент LINK не соответствует атрибуту title, переданному функцией setActiveStyleSheet. Этот выбор сохраняется в куки для запоминания состояния активной таблицы стилей.


Оформление стиля для вывода на печать

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

На следующих двух рисунках показано, как страница conference Web-сайта IBC (рисунок 18) распечатывается при помощи специализированной таблицы стилей (рисунок 19).

Рисунок 18. Страница conference с повесткой дня
Рисунок 18. Страница conference с повесткой дня
Рисунок 19. Распечатанные страницы, представляющие Web-страницу, изображенную на рисунке 18
Рисунок 19. Распечатанные страницы, представляющие Web-страницу, изображенную на рисунке 18

При оформлении стиля для вывода на печать стали очевидными следующие моменты:

  • Тестирование при помощи реального принтера является дорогим и длительным по времени.
  • Обычно вы не имеете доступа к широкому диапазону печатающих устройств для тестирования.
  • Мы хотели принять во внимание возможность распечатки монохромной палитры, которая могла иметь ограниченный спектр серого.
  • Цвета выделения иногда бывают настолько ненасыщенными, что принтер может их не печатать. Любая выделенная информация теряется. Должны быть созданы альтернативные способы представления такой информации.
  • Большинство печатающих устройств не может изменять размеры шрифта или масштаб изображений так, как это делают браузеры. Должен использоваться базовый размер шрифта, который легко читается большинством пользователей.
  • Информация, полезная для Web-сайта, такая как гиперссылки или формы, может быть бесполезной в печатном виде.
  • Поскольку схема нашего Web-сайта является растягиваемой, пользователь может для большего удобства изменить размер окна просмотра браузера. Стандартная печатная страница не имеет такой возможности.
  • Стандартная печатная страница представляет информацию в вертикальном аспекте. Необходимо решить, как разместить на странице блоки содержимого, например боковую панель.
  • Стилевое оформление для печатающих устройств по нашему мнению до конца не реализовано в современных браузерах. Следовательно, мы шли на компромиссы, например, при реализации смены страниц, используя стили page-break-before, page-break-inside и page-break-after. В одной версии распространенного браузера использование символов смены страницы разрушало приложение.

Создание таблицы стилей для вывода на печать

Для наших целей мы создали новую таблицу стилей print.css в том же каталоге, в котором размещены остальные таблицы стилей. Для представления этой таблицы стилей браузеру мы добавили еще одни элемент LINK в файл шаблона page.tpl.php (перед приведенными в листинге 15). Листинг 17 определяет цель этой таблицы стилей, устанавливая значение атрибута media в print.

Листинг 17. Включение предназначенной для печатающих устройств таблицы стилей в page.tpl.php
<link rel="stylesheet" 
      type="text/css" 
      media="print" 
      href="themes/ibc/c/print.css" />

Естественно, если бы мы определили наш screen.css со значением атрибута media равным all и поместили бы после него элемент LINK, наше стилевое оформление для печати унаследовало бы все экранные стили. Однако для большего контроля мы решили не делать этого.

Содержимое, удобное для печати

Давайте используем страницу IBC Announcement в качестве примера того, как мы решили реализовать наш стиль print. На рисунке 20 выделены заголовок Web-сайта и актуальное содержимое уведомления, поскольку они хорошо преобразуются для печатающих устройств. Оставшаяся часть страницы представляет ссылки, которые не выполняют какой-либо функции, кроме как сокрытие информации на Web-сайте, предоставление ссылок к этой информации или активизации действий над этой информацией.

Рисунок 20. Заголовок (A) и содержимое (B) хорошо выводятся на печать
Рисунок 20. Заголовок (A) и содержимое (B) хорошо выводятся на печать

Мощь семантической разметки

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

Базовая схема

Итак, как нам начать создавать стиль для вывода на печать? Первое, что мы сделали, - определили основной тип шрифта и его размер. Хотя мы могли определить цвет фона, цвет шрифта и размеры полей, мы решили использовать настройки печатающего устройства по умолчанию. Затем мы спрятали те области Web-страницы, которые не являлись полезными для вывода на печать. Как было показано на приведенном выше рисунке 20, мы использовали только заголовок сайта и область главного содержимого. В листинге 18 приведены основные стили, с которыми мы начали работать.

Листинг 18. Основной стиль print, используемый в print.css
body {
	font: 12pt Georgia, "Times New Roman", Times, serif;
}
#nav_bar, #sidebar, #footer {
	display: none;
}
.action, .more, .return_top, .tabs, .index {
	display: none;
}

Стиль шрифта использует значение 12pt, являющееся обычным размером при печати. Мы выбрали стандартный шрифт serif. Второе и третье правило стилевого оформления скрывают те части содержимого, которые не должны присутствовать в печатном документе.

Тестирование стилей для вывода на печать

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

Мы обнаружили некоторые отличия в способе применения браузерами стилей для вывода на печать, но эти отличия были значительно меньшими, нежели отличия для экранных устройств. Различные подключаемые модули, как, например, Web Developer extension for Firefox (см. раздел "Ресурсы"), позволяют просматривать Web-страницу, используя различные типы устройств вывода, определенные в XHTML. Однако мы обнаружили, что функция print preview представляла более правдоподобную картину того, как может выглядеть распечатанная страница. Реальным тестом, естественно, является распечатка вашей Web-страницы. Но, по крайней мере, вы можете делать это только тогда, когда страница выглядит нормально в окне предварительного просмотра.

Рисунок 21. Предварительный просмотр уведомления
Рисунок 21. Предварительный просмотр уведомления

Тонкая настройка стиля для печати

Вы можете быстро получить приемлемое печатное представление Web-содержимого, но мы обнаружили, что имеется много мелочей, которые могли бы улучшить читабельность. Например, применение стиля border для заголовка. В следующем списке показаны примеры модификаций, примененных для стиля print сайта IBC.

Пробелы
Стиль для распечатки, используемый в браузере по умолчанию, создаст довольно читабельный документ. Однако мы заметили, что некоторые поля между элементами не являются идеальными. Например, нам пришлось увеличить пробел между параграфами. В листинге 19 показан стиль, примененный к элементу P для настройки свободного пространства до и после параграфа.

Листинг 19. Настройка параграфов в print.css
p {
	margin: 0.2em 0;
}

Ссылки
Мы упоминали о том, что ссылки не несут полезной информации в контексте печатающих устройств. Это является предметом спора и зависит от требований ваших пользователей. Вы можете захотеть выделить слово или фразу, являющуюся гиперссылкой на другой Web-документ. Возможно, это должен быть знак подчеркивания, поскольку жирный и наклонный шрифт - это обычные приемы выделения текста, и они могут скрыть значение содержимого. Можно подумать об использовании цвета, что рассматривается ниже. Еще одним техническим приемом является вывод URL ссылки после связанного с ней текста. В листинге 20 показано, как мы использовали псевдо элемент after и стиль content для отображения URL ссылки.

Листинг 20. Отображение URL после текста ссылки
a:link:after, a:visited:after {
	content: "[link:"attr(href)"]";
	font-size: 90%;
}
Рисунок 22. IBC-ссылка на Web-странице и на распечатке
Рисунок 22. IBC-ссылка на Web-странице и на распечатке

Если в XHTML-ссылке используется относительный URL, печатная версия может смутить пользователя. Абсолютный URL http://intbizcouncil.org:96/forum имеет большее значение в этом контексте, чем относительный forum.

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

Еще одним использованием цвета было отображение состояния некоторых объектов, например, членов IBC. Член Web-сайта, видимый только оперативному персоналу, мог бы быть выделен цветом. Преобразуя это для вывода на печать, мы используем прием, аналогичный показанному в листинге 21, для добавления некоторого поясняющего текста (рисунок 23).

Листинг 21. Отображение состояния невидимых членов IBC
.member_summary.hl_red .fn:before {
	content: "(Not visible) ";
}
Рисунок 23. Невидимые члены IBC на Web-странице и на распечатке
Рисунок 23. Невидимые члены IBC на Web-странице и на распечатке

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

Объект node файла шаблона, который структурирует схему страницы conference, включает не только повестку дня, но и суммарную информацию о таких вещах, как, например, логистическую информацию о том, как добраться до конференции. В предназначенной для вывода на экран таблице стилей (conference.css) мы спрятали такую информацию в элементе DIV, но предоставили ссылку на отдельную страницу, на которой она отображается. В предназначенной для печатающих устройств таблице стилей такая информация отображается, предоставляя пользователю дополнительную информацию о конференции на одной странице. Однако это может вызвать определенные дискуссии по дизайну относительно согласованного представления информации.

Смена страниц
Представление некоторой информации может потребовать использования логического разделения по страницам. Стили смены страниц (page-break-before, page-break-inside и page-break-after) обеспечивают способ принудительного использования этого условия в вашем CSS.

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


Прогнозирование и тестирование

Оформление стиля Web-сайта с динамическим содержимым не является тривиальной задачей. Web-сайт со статическим содержимым обеспечивает очень устойчивую базу, для которой можно применить ваш CSS. Здесь нет неожиданных изменений содержимого структуры XHTML и, потенциально, результата работы CSS. Например, редактор содержимого сайта IBC может решить, что пользователи захотят скопировать некоторый текст из только что прочтенного ими документа в поле в новом уведомлении. Дизайнер темы не имеет возможности предсказать, каким будет это скопированное содержимое! Будет ли оно структурировано так, что не останутся открытыми какие-либо XHTML-теги? Не превысит ли оно определенную длину, так что отображение этого текста будет накладываться на какие-либо другие элементы страницы? Есть ли какие-либо специальные символы в содержимом, которые будет некорректно визуализироваться на странице? В определенной степени это компромисс, и использование таких вещей, как максимальная длина поля и tinyMCE для контроля вводимой пользователем информации, может помочь.

По мере добавления ролей в вашу систему и использования этих ролей как способа изменения того, что видит пользователь, вы добавляете дополнительную степень изменяемости структуры и представления содержимого. Как уменьшить эти сюрпризы? Дизайнер темы не может точно предсказать возможные изменения структуры содержимого, но он может попытаться предсказать, по крайней мере, 80 % сценариев посредством прогнозирования и тестирования.

В седьмой части данной серии статей мы рассмотрели эффективные контейнеры, обеспечивающие логическое разделение для семантики нашего содержимого. Для сайта со статическим содержимым атрибутов id или class, примененных к контейнерам, может быть полностью достаточно для оформления стиля этого содержимого. Однако при оформлении сайта, содержимое которого может меняться, дизайнеры тем обычно должны выполнить итерацию по структуре содержимого в шаблонах для добавления дополнительных атрибутов id и class, либо дополнительных контейнерных элементов DIV и SPAN для управления представлением. Значительное количество этих итераций можно уменьшить путем прогнозирования результатов изменения содержимого. Отличным примером является шаблон, использованный для Zen Garden (см. раздел "Ресурсы").

Тестирование

Для тестирования этих прогнозированных эффектов нам нужны данные, пользователи и назначенные им роли. Полезно ввести в ваш Drupal-сайт тестовые данные, но на этой стадии разработки у вас должна иметься возможность использовать реальные данные. Естественно, если вы выполняете реконструкцию существующего Web-сайта, возможно будет иметься достаточной объем реальных данных для мигрирования со старого сайта и заполнения базы данных Drupal. В процессе разработки сайта IBC у нас был этап, на котором мы попросили заказчика начать водить реальные данные. Это не только обеспечило нас данными, необходимыми для начала разработки стиля темы, но также обеспечило:

  • Обучение интерфейсу администратора Drupal
  • Тестирование всех новых модулей
  • Усовершенствование структурной схемы содержимого
  • Ценные предварительные замечания заказчика
  • Чувство вовлеченности в процесс разработки у заказчика

Резюме

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

В следующей статье данной серии рассматривается уровень абстракции базы данных Drupal, а также вопросы использования DB2 Express-C в качестве альтернативы MySQL или PostgreSQL.

Ресурсы

Научиться

Получить продукты и технологии

Обсудить

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Open source
ArticleID=185559
ArticleTitle=Использование ПО с открытым исходным кодом для создания Web-сайта для совместной работы: Часть 8. Оформление стиля c CSS
publish-date=12252006