CSS и DHTML для сайтостроительства

Гид по дизайну в стиле Web 2.0. Часть 3: Шапка и границы контента

noreply@blogger.com (Natalia Macheda) — Wed, 22 Apr 2009 07:55:00 +0000

Часть 1: Обзор. Простота
Часть 2: Центрирование и количество колонок

Шапка

Шапка сайта должна выделяться и содержать в себе брэнд сайта, а также навигационные элементы.

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

Шапка сайта сигнализирует пользователю: "Это верх страницы". Она должна быть оформлена броско и выразительно: большие символы, яркие иллюстрации, лаконичные слоганы, - в стиле "web 2.0".

Где и когда использовать выразительную шапку

На любом сайте, как брэндинг, так и навигация должны быть чёткими и бросающимися в глаза.

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

Есть и другие приёмы отделения шапки от контента.

Использование разделительной линии:

Стилизация под колонтитулы:

Границы контента

После того, как мы выделили шапку, стоит подумать об остальных элементах страницы. И к ним относятся:

Навигация
Фон и поля
Основное содержимое
"Подвал"
Кросс-линки

Границы остального контента можно сделать контрастными по сравнению с шапкой. Контраст в данном случае подразумевается цветовой.

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

(...Продолжение следует...)

Таблицы против DIVов

noreply@blogger.com (Natalia Macheda) — Thu, 16 Apr 2009 10:22:00 +0000

В последние несколько лет многие веб-верстальщики перешли с табличной разметки на разметку при помощи блоков div. Вы среди их числа? Поздравляю! Но знаете ли вы о причинах такого массового "переселения"? И знаете ли вы, как оно должно быть сделано правильно? Если ответ на оба вопроса "Нет", то подозреваю, что табличный хаос вы просто заменили на div-хаос.

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

Часть 1: Хаос таблиц и div-блоков

Таблицы

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

Статистические исследования, проводимые MAMA (Metadata Analysis and Mining Application - Анализ метаданных и добыча данных приложений), показали, что в среднем таблично-ориентированные сайты содержат в своём коде вложенные таблицы (таблицы в таблице) и глубина вложения в среднем составляет три уровня. При этом количество таблично-ориентированных сайтов составляет 80% от всех сайтов, которые были проанализированы MAMA.

Популярность таблиц для построения каркаса сайта объясняется их интуитивной понятностью использования. Мы сталкиваемся с табличными (табулярными) данными каждый день и понимаем их концепцию.

С технической точки зрения веб-верстальщику не нужно изучать и использовать стили, поскольку внешний вид таблиц можно регулировать при помощи стандартных HTML-аттрибутов, неотъемлемых от тагов <table>, <tr> и <td>. Кроме того при использовании таблиц верстальщик не сталкивается с проблемой "съезжания" столбцов таблиц вниз, как это часто бывает с div-блоками. Таким образом таблицы создают ощущение надёжности и стабильности.

Однако, если мы захотим модифицировать табличный сайт, использующий простейшие тэги <table>, <tr> и <td>, то мы столкнёмся с проблемами. Например, если нам понадобится убрать какую-то колонку из таблицы, то нам придётся пройтись по всем горизонтальным её строкам (<tr></tr>). А если нам вздумается "повернуть" таблицу на 90 градусов, то, фактически, весь код должен быть переписан заново. А если в таблице используются тэги <colspan> и <rowspan>? Путаница и хаос возрастают в разы!

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

<table cellspacing="0" cellpadding="0" border="0">
 <tbody><tr>
  <<d colspan="3" height="120">....</td>
 </tr>
 <tr>
  <td class="menu" valign="top">...</td>
  <td class="content" valign="top">...</td>
  <td class="aSide" valign="top">...</td>
 </tr>
 <tr>
  <td colspan="3">...</td>
 </tr>
</tbody></table>

... и div-блоками:

<div id="header">...</div>
<div id="menu">...</div>
<div id="content">...</div>
<div id="aSide">...</div>
<div id="footer">...</div>

Сложность табличного кода растёт приблизительно в два раза быстрее сложности блокового кода по мере увеличения размера страницы. Особенно если учесть, что многие (90% от всех табличных сайтов по статистике MAMA) дизайнеры-"табличники" для задания дизайна таблицы используют аттрибуты border, width, cellpadding and cellspacing, которые прописываются к каждой строке и даже к каждой ячейке!

Громоздкий код приводит к трудности его понимания и расширения. Многие дизайнеры с трудом понимают свой собственный код, что уж говорить о тех, кому поддержка сайта переходит "в наследство". В результате, возрастате число ошибок в коде. Помимо этого табличный код загружается дольше. А веб-дизайнеры должны понимать, что число мобильных пользователей интернета неуклонно растёт.

Таблицы предназначены для представления табулярных данных, а не для построения структуры сайта.

Для дальнейшего чтения предлагаю вашему вниманию комикс Почему верстать таблицами глупо

Пример сайта в табличном хаосе: Rockford Area ASrts Council содержит 745 таблиц разной степени вложенности!

DIV-блоки

Тэг <div/> предназначен для задания блока в HTML-документе. Блоки предназначены именно для создания структуры документа, его каркаса. Помиме этого блоки очень удобны для описания фрагментов страницы, которые не могут быть описаны другими тэгами (таблицы, списки, элементы ввода и др.). Когда разработчик сайта не понимает семантику блоков, он начинает использовать их к месту и не к месту и возникает хаос блоков.

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

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

К сожалению, блочная структура не такая стабильная, как табличная: блоки могут "съехать" и весь дизайн страницынарушится. Однако стандарт W3C всё больше и больше уточняется, а браузеры с течением времени станомяься более "умными", поэтому блочная вёрстка становится всё более предсказуемой.

Основная проблема блочного метода - сличком частое и не всегда уместное использование тэгов div, которые должны использоваться лишь для логического группирования фрагментов страницы. Кроме этого, можно значительно улучшить читаемость кода, если придать блокам семантику через аттрибуты id (идентификаторы) и class (классы).

А вы знаете, что Google повышает релевантость сайта, если его код семантически продуман?

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

<div class="vcard">
 <span class="tel">
  <span class="type">home</span>:
  <span class="value">+1.415.555.1212</span>
 </span>
</div>

Пример микроформата hCard, который является форматом для описания людей, организаций и мест

Слишком частое использование аттрибута style может привести к тому, что, опят-таки, возникнет блочный хаос, особенно, если страница часто модифицировалась. Возвращаясь к статистике MAMA, 53.54% всех просканированных сайтов используют аттрибут style, причём 35.40% сайтов используют этот аттрибут в тэге div. Классы и модификаторы являются средством отделения кода (HTML-размётку) от его дизайна (стилей). Они также облегчают обращение к жлементам страницы в модели DOM.

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

Меню

<div id="menu">
 <div class="selected">
  <div class="graphicLeft">
   <div class="graphicRight">
    <a href="#">Home</a>
   </div>
  </div>
 </div>
 <div>
  <div class="graphicLeft">
   <div class="graphicRight">
    <a href="#">About</a>
   </div>
  </div>
 </div>
 ...
</div>

Это типичное злоупотребление тэгами div для построения меню. Его можно было бы избежать, использовав обычный список со стилем "display: block".

Заголовки

<div class="headingOne">My heading</div>
<div class="headingTwo">My heading</div>
<div class="headingThree">My heading</div>

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

Список новостей

<div class="news">
 <img />
 <h2 />
 <p />
 <a />
</div>
<div class="news">
 <img />
 <h2 />
 <p />
 <a />
</div>

Использование обычного списка улучшило бы читаемость кода и уменьшило бы количество div-тэгов.

Разная ширина для разных контейнеров

Контейнер 1

<div id="contentNormal"></div>
<div id="aSideNormal"></div>

Контейнер 2

<div id="contentWide"></div>
<div id="aSideSmall"></div>

Если для каждой колонки на сайте создавать собственный контейнер, то может возникнуть ситуация, когда создано слишком много ненужных идентификаторов. Это можно исправить, добавив класс к тэгу <body/>. А потом каждый контейнер в body может просто наследовать этот клас, а потом разметка каждой отдельной страницы будет задаваться таблицей стилей. Таким образом повышается читаемость и содержимого и разметки. Плюс повышается гибкость поддержки такой страницы.

Кроме того, использование блочной структуры позволяет "на лету" генерировать страницы для печати, что невозможно при использовании таблиц. Например, вы можете скрыть верхнее меню в версии для печати, просто указав соответсвующему div-блоку меню стиль display: none.

Пример сайта в блоковом хаосе: фотохостинг Photobucket

Оригинальная статья на английском языке: http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/

Гид по дизайну в стиле Web 2.0. Часть 2: Центрирование и колонки

noreply@blogger.com (Natalia Macheda) — Sun, 22 Mar 2009 22:46:00 +0000

Часть 1: Обзор. Простота

Центрирование

Если говорить кратко, то для современных веб-дизайнов характерным является то, что основной текст располагается по центру окна браузера и имеет фиксированную ширину. Лишь немногие из них всё ещё остаются "растягивающимися" на всю ширину окна или фиксированными, но выровненными слева.

Чем хорош центральный дизайн?

Дизайны по центру выглядят проще, чётче и честнее. Проще, потому что посетителю не нужно рыскать по странице в поисках информации - вот она прямо перед ним. Чётче, потому что вся информация сконцентрирована в интуитивно-понятном месте. Честнее, потому что у пользователя не возникает ощущения, что от него пытаются что-то скрыть.

Более того, поскольку мы используем "экономный" дизайн, мы не загружаем нашего посетителя точками, линиями и текстом. Мы используем меньше, чтобы донести до пользователя больше. Поэтому мы не стесняемся использовать большие поля и отступы по боками.

Где и когда использовать центральный дизайн?

Везде и всегда, если только у вас нету очень веского повода, чтобы не делать этого.

Количество колонок

Несколько лет назад 3-колоночные дизайны были нормой, а 4-колоночные - тоже частым явлением. В наше время превалирующее большинство дизайнов имеет всего лишь 2 колонки. 3 колонки - это, как правило, максимум, который уже никто не перешагивает.

Почему меньше колонок - лучше?

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

Что делать, если нужно много колонок

Разместите их в "подвале". Например, в последнее время среди блоггеров часто встречается приверженность к такому дизайну: две-три колонки в основной части и более трёх колонок в подвале с разной вспомогательной информацией (самые популярные сообщения, самые активные комментаторы, лента сообщений из ридера, всякие рейтинги и счётчики и др.)
amazon.com имеет две боковые колонки (левая - для навигации, правая - для разных фишек), а по центру три колонки с ассортиментом товаров. Таким образом, функция каждой колонки ясна, дизайн прост, а товары хорошо просматриваются.

Дизайн амазона попытался скопировать некий All Things Web2.0: две боковые колонки и две колонки основного содержания. Причём, как боковые колонки, так и основной контент мало отличаются по цвету. В итоге посетитель сайта не знает, куда смотреть в первую очередь, а куда - потом. На странице нет чётко выраженных приоритетов.

Таким образом, аккуратно используйте дизаынй с четырьмя и более колонками. А лучше не используйте их вовсе: поверьте, трёх колонок хватает за глаза.

CSS-совет: сортировка

noreply@blogger.com (Natalia Macheda) — Sun, 22 Mar 2009 09:21:00 +0000

Нет, это совет не про то, как отсортировать содержимое вашей страницы с помощью CSS (да это и нельзя сделать). Вопрос про то, как улучшить читаемость вашего CSS-кода. Ответ: сортируйте селекторы по алфавиту. Например, рассмотрим два фрагмента кода и найдём в каждом из них селектор margin-right.

Фрагмент 1:

div#header h1 {
 z-index: 101;
 color: #000;
 position: relative;
 line-height: 24px;
 margin-right: 48px;
 border-bottom: 1px solid #dedede;
 font-size: 18px;
}

Фрагмент 2:

div#header h1 {
 border-bottom: 1px solid #dedede;
 color: #000;
 font-size: 18px;
 line-height: 24px;
 margin-right: 48px;
 position: relative;
 z-index: 101;
}

Очевидно, во втором фрагменте нам было гораздо проще найти margin-right. Учтите, что пример просто иллюстративный. А если бы селекторов было больше?

Применяя этот совет на практике, вы сэкономите время и себе, и вашим коллегам, которые будут работать с вашим кодом.

Другие секреты вебдизайнера узнайте здесь

CSS-cовет: обнуление

noreply@blogger.com (Natalia Macheda) — Mon, 16 Mar 2009 10:00:00 +0000

Обнуление - это фрагмент CSS-кода, призванный привести дизайн сайта к единому виду во всех браузерах.

Проблема в том, что всякие отступы, границы и прочие настройки по умолчанию элементов дизайна разные во всех браузерах! Например, если у вас имеется маркированный список, то в некоторых браузерах маркеры будут отображаться с отступом от левого края, а в некоторых отступа не будет. Но если бы дело только касалось маркированных списков... Такого плана раночтения - они во всём: чуть-чуть другие отступы на всём протяжении страницы - и вот уже страница по другому воспринимается в файерфоксе, в отличие от эксплорера. И эти мелочи очень часто ускользают от дизайнера. А ведь достаточно с самого начала обнулить все настройки по умолчанию.

Ниже я привожу вашему вниманию универсальный "обнулятор".

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0; // все границы
 padding: 0; // отступы
 border: 0; // и рамки устанавливаются в 0
 outline: 0; // обводка элементов идёт туда же
 font-size: 100%; // шрифт нормальный
 vertical-align: baseline; // всё выравнивается однообразно
 background: transparent; // фона нет, никакого
}
body {
 line-height: 1; // межстрочный интервал одинаков
}
ol, ul {
 list-style: none; // никаких маркеров у списков нет
}
blockquote, q {
 quotes: none; // и кавычек в цитатах нет
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}

/* все элементы в фокусе (на которые перешли, например, Tab'ом)
имеют единый вид */
:focus {
 outline: 0;
}

/* не забывайте обозначить удаления и вставки */
ins {
 text-decoration: none;
}
del {
 text-decoration: line-through;
}

/* а таблицам вручную придётся прописывать 'cellspacing="0"' в HTML */
table {
 border-collapse: collapse;
 border-spacing: 0;
}

Посмотрите, как универсальнее стали выглядить ваши сайты!

Да, и ещё один маленький совет: пожалуйста, не применяйте

* { margin: 0; padding: 0; }

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

Другие секреты вебдизайнера узнайте здесь

Гид по дизайну в стиле Web 2.0. Часть 1: Обзор. Простота

noreply@blogger.com (Natalia Macheda) — Mon, 19 May 2008 16:07:00 +0000

Оригинал статьи: http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm

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

Обзор характеристик

Список ниже состоит из наиболее распространённых характеристик дизайна в стиле Web 2.0. Некоторые из них уже были перечислены в этой статье.

Понятно, что сайт не должнен в принудительном порядке использовать все перечисленные элементы. Более того, их использование не горантирует, что у сайта автоматически будет "хороший" дизайн или дизайн в стиле Web 2.0.

Простота
Центральное выравнивание
Малое количество колонок
Выделение шапки
Обозначенные границы контента
Простая навигация
Логотипы жирным шрифтом
Большой текст
Введние жирным шрифтом
Яркие цвета
Рельефность
Градиенты
Отражения
Забавные иконки
Звёзды

Сейчас мы их рассмотрим подробнее и с примерами.

Web 2.0

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

Многие люди, говоря о Web 2.0 подразумевают

Новый стиль веб-экономики
Новый уровень веб-технологий и взаимодействия между веб-страницами и веб-сервисами
Социальный феномен новых веб-сообществ и социальных сетей

Ничего подобного в данной статье не будет. Но будет лишь анализ новой школы веб-дизайна.

Wed 2.0 шаблоны

А знаете ли вы, что TemplateMonster имеет в своём арсенале шаблоны дизайнов в стиле Web 2.0? Конечно, слегка неловко осознавать, что кто-то ещё может использовать такой же дизайн, как и на твоём сайте. Но, во-первых, шаблон можно выкупить в эксклюзив. А во-вторых, список шаблонов всё время обновляется и поэтому вероятность того, что пользователи данного сервиса выберут старый шаблон. всё время убывает. Поэтому рекомендую взглянуть на этот сайт и дёшево и сердито приобрести понравившийся шаблон модного дизайна.

Введение

В данной статье я не собираюсь проводить критику или восслаление дизайнов современных сайтов. Я просто систематизирую понятие дизайна в стиле Web 2.0.

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

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

1. Простота

Веб-дизайн ещё никогда не был таким простым. И это хорошо. Дизайн в стиле Web 2.0 означает фикусировку, чистоту и простоту. И это не означает минимализм.

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

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

Чем хороша простота?

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

Когда дизайн должен быть простым? Всегда.

Как сделать дизайн простым? Есть два правила, которые позволяют ответить на этот вопрос:

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

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

Вот, кстати, контрпример простого дизайна:

Заметьте, как много здесь декоративных элементов, на которые хочется отвлечься. С другой стороны навигация нечёткая, контент захламлен, интерактивность стремится к нулю.

Сложность и красота веб-дизайна

Я совсем не против сложности, насыщенности и украшательства в веб-дизайне.

Используйте столько жекоративных элементов, сколько хотите. Но все они должны способствовать коммуникации с пользователем, которая должна состояться.

В дизайне можно создавать сообщения при помощи жёстких данных и мягкой информации.

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

Рассмотрим пример ниже.

Сайт насыщен, интересен и привлекателен. Используется ряд визуальных техник для привлечения внимания, создания заинтересованности и приятного ощущения качества работы Алекса. Но дизайн также прост, потому что визуальные элементы использованы аккуратно. Дизайн не вызывает ощущения бесплатности - он экономичный и богатый.

В заключение данного пункта запомните, что любые визуальные элементы призваны создавать коммуникацию, прежде всего. Если же вы можете создать такую же коммуникацию с менбшим количеством элементов, уберите ненужные.

(...Продолжение следует...)

Фотошоп для веб-мастеров

noreply@blogger.com (Natalia Macheda) — Wed, 07 May 2008 18:28:00 +0000

Любой веб-мастер рано или поздно сталкивается с необходимостью создания каких-то графических элементов в графических редакторов. Ни для кого не секрет, что Photoshop (фотошоп) является одним из наиболее мощных графических редакторов, в котором можно создать почти всё, что угодно: можно отретушировать фотографию, нарисовать движуйщийся gif, задизайнить кнопки для сайта или даже весь сайт... Но вот беда, фотошоп такой мощный и с таким обилием возможностей и инструментов, что непонятно, с какого бока к нему подойти.

Господа и дамы! Спокойствие, только спокойствие! Выход найден! Теперь даже самые закоренелые чайники имеют возможность фотошопить, как самые заправские гуру! Представляю вашему вниманию курс Зинаиды Лукьяновой:

Фотошоп с нуля в видеоформате

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

Дабы не быть голословной, я предлагаю вам посмотреть сайт Зинаиды: http://www.photoshop-master.ru/ Там вы абсолютно бесплатно можете посмотреть разные уроки, не вошедшие в курс, а также скачать полезные ресурсы: кисти, плагины, текстуры... Безвозмездно! То есть даром!

Если же вы подпишитесь на рассылку Зинаиды, там же, на сайте, то получите доступ к закрытому разделу сайта с ещё бОльшим набором "халявы"!

Вы всё ещё под воздействием скептицизма? Тогда скачайте бесплатную книгу "26 полезных статей для начинающих веб-мастеров", которая содержит некоторые уроки видеокурса в текстовом формате с картинками!

Скачать книгу

Подарки и бесплатности ожидают вас и при покупке видеокурса. Какие? Об этом вы узнаете, если нажмёте на эту картинку:

В общем, искренне рекомендую этот курс!

Видео: Создаём полосатый фон (вертикальные полоски)

noreply@blogger.com (Natalia Macheda) — Wed, 07 May 2008 18:10:00 +0000

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

Создание паттерна размером 50Х1 пикселей в фотошопе.
Использование CSS для повторения паттерна на HTML странице таким образом, чтобы фон страницы образовывал собой обои из разноцветных вертикальных полосок.
Размещение текстового контента от CSSZenGarden в белом контейнере поверх полосатого фона

Если вам понравилось видео, вы можете разместить его у себя в блоге. Вот ссылка на видео: http://www.bubbleply.com/player.aspx?pid=d727a6c4-c1ea-4f40-b178-2ed41936aa8e

Современный стиль в веб-дизайне

noreply@blogger.com (Natalia Macheda) — Wed, 07 May 2008 14:34:00 +0000

Оригинал статьи: http://www.webdesignfromscratch.com/current-style.cfm

Для начала я предлагаю посмотреть на дизайны следующих сайтов, которые считаются в нашими дни типичными модными дизайнами:

» Ash Web Studio

» Macaroon Design

» The Startup Business School

» The Alternative Energy Store

» Forecast Advisor

» iconbuffet.com

» Really Wild Flowers

» Save Longstone Edge

» iomega.com

» linkedin.com

» mozilla.org

» plaxo.com

» Prolotize

Что общего?

Что общего между этими сайтами?

Простоя разметка
Центральная ориентация
Наполненность контентом
3D-эффекты иногда
Мягкие, нейтральные цвета фона
Контрастные цвета иногда
Забавные иконки
Много пустого пространства
Большой шрифт

Давайте рассмотрим эти пункты более детально.

Простая разметка

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

Центральная ориентация

Пару лет назад можно было найти "жидкие" разметки, выровненные влево. Сегодня же весь дизайн сремятся выровнять по центру.

Дизайны, выровненные влево, уже не пользуются той популярностью, как раньше.

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

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

Наполненность контентом

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

Как это можно сделать?

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

То есть вы можете отлично задизайнить пустое пространство, но пользователь, в итоге, будет неудовлетворён контентом. Дизайнеры не декораторы, но коммуникаторы. Поэтому содержимое сайта, его контент, должно нести информацию.

Зачем выравнивать по центру?

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

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

Иногда до сих пор можно встретить жидкий дизайн, выровненный по центру (см. Alternative Energy Store). На таких сайтах просто выравнивание логотипа по центру даёт всё тоже ощущение дружественности. К тому же масса полезного контента показывается на странице без прокрутки.

3D эффекты

К ним относятся градиенты, полосатые фоны, закруглённые углы, выступающие иконки, тени вокруг элементов...

Отражение и переход к прозрачности очень распространены. Тени тоже, но должны использоваться с осторожностью.

Круглые звёзды:

Мягкие, нейтральные фоновые цвета

Наиболее популярные фоны - белые или серые градиенты. В результате мы имеем нейтральную базу, на фоне которой яркие звёзды привлекают к себе внимание.

Контрастные цвета

Контрастные цвета тоже привлекают внимание к элементам, в которых они используются. Конечно, при условии, что фоновый цвет нейтральный.

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

Забавные иконки

Общее правило такое: никогда не используйте слишком много элементов, привлекающих внимание, на одной странице. Особенно, если у вас уже присутствуют контрастные цвета и 3D эффекты. Если переборщить, то впечатление от страницы будет противоположным желаемому: пользователь не разберётся с содержимым, разозлится и уйдёт.

Много пустого (белого) пространства

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

Общее правило: чем больше белого пространства, тем лучше. Говоря "белое" пространство, дизайнеры подразумевают "пустое" пространство любого цвета, даже чёрного :). Глядя на дизайны с белым пространством, очень редко возникает мысль: "Не мешало бы добавить на эту страницу контента". Такова особенность человеческого восприятия.

В частности, важно оставлять пространство между элементами страницы и между строками текста. Например, посмотрите на эти замечательные использования белого пространства!

Большие шрифты

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

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

Дополнительные ссылки

Design Melt Down - различные аспекты веб-дизайна в стиле web 2.0
Andy Budd's list of "Well designed CSS sites" - Список хороших дизайнов, более 400
CSS Blast
Piepmatzel.de
Web Creme
Web Designers - Список на сайты различных веб-дизанейров мира

Принципы и элементы дизайна (часть 2, выпуск 10)

noreply@blogger.com (Natalia Macheda) — Wed, 16 Apr 2008 16:18:00 +0000

По мотивам http://www.digital-web.com/articles/principles_and_elements_of_design и http://www.digital-web.com/articles/elements_of_design/

В предыдущей статье мы рассмотрели классические принципы визуального дизайна. В частности: расположение объектов относительно друг друга. В данной статье мы рассмотрим элементы дизайна.

Что такое элементы дизайна?

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

Точка

Точка - это элемент дизайна, который имеет точное месторасположение, но не размеров. Однако, будучи использованными группами, точки могут быть интерполированы человеческим мозгом в фигуры (см. Замыкание).


Точка	Ряд точек интерполируется в линию	Замыкание точек в треугольник

В качестве примера рассмотрим Zen Garden дизайн sub:lime, который использует в шапке пикселизированное изображение двух половинок лайма. Затем суть этого мотива повторяется в остальном дизайне страницы. В пикселизированной картинке каждый пиксель - это точка. Но наш мозг объединяет их и интерполирует в изображение двух половинок лайма. Кроме того, точка расширяется в диапазон цветов, которые используются для разделения областей страницы на смысловые части. А линии (см. ниже) используются в заголовках.

Этот дизайн является хорошим примером того, как элементы дизайна используют друг друга для создания единой композиции. Дизайн имеет фиксированную ширину в 715 пикселей и центральное выравнивание.

Линия

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


Органика	Жёсткость	Разный вес

Например, Subway Dream использует линии по-разному. Во-первых, как жёсткий элемент, который обозначает каркас страницы и отделяет области с текстом от фона. Во-вторых, картинки, разбросанные по всей странице, целиком и полностью базируются на линиях. Они также имеют органическую природу, которая создаёт впечатление наброска. Украшения, фон за рисунком женщины, навигационные иконки целиком и полностью построены на линиях. Рисунок женщины имеет форму, но, тем не менее, в его основе лежит контур, а линия помогает яснее определить эту форму. Шрифт в заголовках создан при помощи органических линий, что помогает акцентировать общий дизайн страницы.

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

Форма

Форма - это замкнутый контур, характерицирующийся периметром. Существует три базовых формы: круг (сфера), прямоугольник или квадрат (параллелепипед или куб), треугольник (конус). Форма может быть двух-мерной или трёхмерной, реалистичной или абстрактной, или средним между всем перечисленным. Форма и фигура используются, как синонимы. Форма является производной от линии и точки.


Контурная форма	Пространственная форма

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

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

Текстура

Текстура - это физическая структура формы или её поверхности. Иными словами, текстура - это материал, из которого что-то сделано. Текстура является производной от формы, линии и точки. Это визуальный и тактильный феномен.

Цвет

Цвет - это реакция глаза на электромагнитные, находящиеся в цветовом диапазоне. Цветовой зиапазон - это свет, который мы видим в окружающей среде. Невооружённый человеческий глаз воспринимает волны длиной 400-700 нанометров (нм), где 700нм - это красный цвет, 400 нм - фиолетовый цвет.

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

Тон (Hue) - положение цвета на колесе. Термины "красный", "сине-зелёный", "розовато-лиловый" определяют тон данного цвета.
Яркость (Value) - тёмность или светлость данного цвета. Его близость к чёрному или белому.
Насыщенность (Saturation) - интенсивность, уровень цветового сигнала. Более серый цвет имеет более низкую интенсивность.

Гармония цветов

Цветовая гармоничность используется для описания взаимотношения цветов друг с другом, как они могут комбини роваться для создания цветовой палитры.

Комплементарные - противоположные цвета на колесе. Когда комплементарные цвета используются в соседних элементах, они увеличивают интенсивность друг друга. А когда они смешиваются, то уменьшают её.
Аналогичные - цвета с тонами, соседними на колесе. Это, как правило, семейство цветов. Например: синий, сине-фиолетовый, сине-зелёный; жёлтый, жёлто-оранжевый, жёлто-красный.

Триадные - три цвета, равноотстоящие на колесе.

Комплементарные	Аналогичные	Триадные

Цветовые пространства

Цвета обычно организованы в иерархии, на основании того, как они смешаны друг с другом. И цветовое пространство помогает определить, как они смешаны. Существуют два типа цветовых пространств:

Субтрактивный (вычитание цветов): традиционное цветовое пространтсво, которое мы используем, когда говорим о цвете. Он основан на пигменте цвета, как в изобразительном искусстве. Пигмент воздействует на длину цветовой волны. Отсутсвие пигмента - белый цвет. Смешение всех пигментов - чёрный. Основные цвета: красный, жёлтый, зелёный. Вторичные цвета: оранжевый, зелёный, филетовый.
Аддитивный (сложение цветов): электронное цветовое пространство. Основано на количестве света. Свет отображается монитором. Отсутсвие света - чёрный. Присутствие всего наличного света - белый. Основные цвета: красный, зелёный, синий. Вторичные цвета: жёлтый, фуксин, голубой.


Субтрактивное цветовое пространство	Аддитивное цветовое пространство

А сейчас рассмотрим пример опять из CSS Zen Garden. В частности, El Collar de Tomas может покаться оформленным триадными цветами, но в реальности в нём были использованы аналогичные цвета. Использованы оттенки красного, жёлтого и оранжево с серо-голубым в качестве контраста. Их яркость снижена до среднего значения, отчего жёлтый кажется почти зелёным. Вдобавок он окружён элементами красного и оранжево цвета, из-за чего эффект триадности усиливается. В результате мы имеем очень мягкий, яркий, богатый на цветовую гамму дизайн, который базируется всего лишь на трёх рядом лежащих оттенках.

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

Принципы и элементы дизайна (Выпуск 9)

noreply@blogger.com (Natalia Macheda) — Sat, 15 Mar 2008 19:29:00 +0000

По мотивам http://www.digital-web.com/articles/principles_and_elements_of_design и http://www.digital-web.com/articles/principles_of_design/

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

Баланс

Баланс - это равновесие изображения с точки зрения нашего взгляда на него в соответсвии с физической структурой (масса, сила тяжести и т.д.) каждого отдельного элемента. Баланс может быть симметричным (формальный) и ассиметричным (неформальный). При симметричном дизайне вес композиции равномерно распределён по цетральной вертикальной или диагональной оси. Иногда по обеим. Симметрия называется приблизительной, если выражается похожими, но не идентичными формами. Когда вес распределён вокруг центральной оси, то дизайн называется радиальным. При ассиметричном дизайне, как вы догадались, вес распределён не равномерно. То есть в нём используются объекты разных размеров. Чаще всего бывает, что используется один доминантный элемент и несколько второстепенных, уравновешивающих дизайн.


Горизонтальная симметрия	Приблизительная горизонтальная симметрия	Радиальная симметрия	Ассиметрия

Например, Centerfold, один из дизайнов Zen Garden, использует приблизительную горизонтальную симметрию. Может быть, правая часть страницы выглядит немного тяжелее, но в целом дизайн сбалансирован. Это достигается большим количеством пространства белого цвета. Кроме того графический текст ненавязчив. Все элементы гармонируют и с фоном, не становясь доминантными ни в каком месте. Редкие зелёные оттенки используются лишь для выделения навигационных элементов.

Ритм

Ритм - это повторение или чередование элементов в соотсветсвии с заданным интревалом (очередностью). Ритм создаёт ощущение движения и является средством для создания паттерна или текстуры.

Bиды ритма:

Регулярный	Плывущий	Прогрессивный

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

Например, дизайн Manhattan Edition использует регулярный ритм в верхней части страницы и в правой навигационной панели. Это создаёт ощущение движения в "небе" над городом и вообще добавляет дизайну текстурирования, которое дополняет текстуру зданий и заголовков. Текстурирование контрастирует с общей гладкостью чёрного фона и мягким свечением вокруг текстовой информации.

Пропорции

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

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

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

Это фиксированный центрированный дизайн шириной в 762 пикселя.

Преобладание

Говоря о преобладании, мы имеем в виду различные степени акцентирования в дизайне. Преобладание определяет визуальный вес композиции, задаёт пространство и перспективу и очень часто направляет взгляд на элементы, которые нужно видеть в первую очередь. Существуют три уровня преобладания (важности) элементов страницы по сравнению с другими:

Доминантный - элемент имеет наибольший визуальный вес и акцент, выступает на первом плане страницы
Суб-доминантный - элемент имеет вторичный акцент и находится на среднем плане композиции
Второстепенный - элемент обладает наименьшим визуальным весом и акцентом, находится на заднем плане композиции

наприемер, на картинке ниже деревья - доминантные элементы, домик на холме - суб-доминантный, гора - второстепенный.

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

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

Единство

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

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

Другие аспекты дизайна

Контраст - динамический конфлик между элементами дизайна. Позитивное и негативное пространство - непосредственное соседство объекта (позитивное пространство) и его фона (негативное пространство). Правило третей - объекты, находящиеся на расстоянии 1/3 всей ширины или высоты страницы, привлекают внимание больше всего. Визуальный центр - чуть выше и чуть правее математичского центра есть естественное расположение визуального фокуса. Цвет и типография (заслуживает отдельной статьи).

Интернет-ресурсы по теме

Art, Design, and Visual Thinking by Charlotte Jirousek
Gestalt Design and Composition by James T. Saw
Society for Gestalt Theory and its Applications
Graphic Design Basics
Introduction to the Principles of Design by Jacci Howard Bear

Книги

Design Basics by David Lauer
The Elements of Graphic Design by Alexander W. White
Principles of Two-Dimensional Design by Wucius Wong
Grid Systems in Graphic Design by Josef Muller-Brockmann
Design Principles and Problems by Paul Zelanski, Mary Pat Fisher
A Primer of Visual Literacy by Donis A. Dondis
History of Art by Anthony F. Janson
A History of Graphic Design by Philip Meggs
The Non-Designer's Design Book by Robin Williams
Geometry of Design: Studies in Proportion and Composition by Kimberly Elam

Стандартный CSS-файл для CSS Zen Garden, часть 2 (Выпуск 8)

noreply@blogger.com (Natalia Macheda) — Thu, 06 Mar 2008 15:33:00 +0000

Первая часть здесь

Познакомившись с CSS селекторами, мы легко можем продолжить изучение стандартного CSS-файла для сайта CSS Zen Garden. В частности, декларации для a:link, a:visited, a:hover, a:active описывают поведение ссылок в зависимости от наведения на них мышки, посещались ли они и т.д.

В частности, в далее следуемом коде

#container {
 background: url(zen-bg.jpg) no-repeat top left;
 padding: 0 175px 0 110px;
 margin: 0;
 position: relative;
 }

#intro {
 min-width: 470px;
 }

Мы видим стиль основного контейнера (#container) и "шапки" сайта (#intro). В стиле последнего min-width - минимальная ширина. То есть как-бы мы не изменяли размеры окна браузера, шапка всегда будет по крайней мере 470 пикселей в ширину.

Далее стиль легко читаем и понятен:

#pageHeader h1 {
 background: transparent url(h1.gif) no-repeat top left;
 margin-top: 10px;
 width: 219px;
 height: 87px;
 float: left;
 }
#pageHeader h1 span {
 display:none
 }
#pageHeader h2 {
 background: transparent url(h2.gif) no-repeat top left;
 margin-top: 58px;
 margin-bottom: 40px;
 width: 200px;
 height: 18px;
 float: right;
 }
#pageHeader h2 span {
 display:none
 }
#pageHeader {
 padding-top: 20px;
}

#quickSummary {
 clear:both;
 margin: 20px 20px 20px 10px;
 width: 160px;
 float: left;
 }
#quickSummary p {
 font: italic 10pt/22pt georgia;
 text-align:center;
 }

#preamble {
 clear: right;
 padding: 0px 10px 0 10px;
 }
#supportingText { 
 padding-left: 10px;
 margin-bottom: 40px;
 }

#footer {
 text-align: center;
 }
#footer a:link, #footer a:visited {
 margin-right: 20px;
 }

Здесть новыми стилями для нас будут float (это плавающий элемент, и рядом стоящие элементы должны обтекать его справа или слева, при этом само значение стиля будет противоположным, то есть слева или справа, т.е. left и right), display (три наиболее распространённых способа отображения элемента: none - не отображать, block - блоком, inline - в той же строке, что и находящиеся рядом элементы) и clear (запрещает обтекание плавающих элементов слева или справа, или с обеих сторон). То есть #pageHeader h1 (картинка со словами "Zen Garden") "плывёт" влево (float:left) и его текстовый аналог не показывается (display:none). Аналогично #pageHeader h2 (картинка со словами "The Beauty of CSS Design") плывёт вправо и её текстовый аналог не показывается. Элемент #quickSammary "плывёт" влево и не может обтекать элементы ни справа, ни слева. То есть если бы #preamble имело стиль float с каким-то значением, то текст в этом div'е сместился бы. Поэкспериментируйте! Сам же блок #preamble не обтекает ничего справа (clear:right).

Далее идёт объявление меню:

#linkList {
 margin-left: 600px;
 position: absolute;
 top: 0;
 right: 0;
 }
#linkList2 {
 font: 10px verdana, sans-serif;
 background: transparent url(paper-bg.jpg) top left repeat-y;
 padding: 10px;
 margin-top: 150px;
 width: 130px;
 }
#linkList h3.select {
 background: transparent url(h3.gif) no-repeat top left;
 margin: 10px 0 5px 0;
 width: 97px;
 height: 16px;
 }
#linkList h3.select span {
 display:none
 }
#linkList h3.favorites {
 background: transparent url(h4.gif) no-repeat top left;
 margin: 25px 0 5px 0;
 width: 60px;
 height: 18px;
 }
#linkList h3.favorites span {
 display:none
 }
#linkList h3.archives {
 background: transparent url(h5.gif) no-repeat top left;
 margin: 25px 0 5px 0;
 width:57px;
 height: 14px;
 }
#linkList h3.archives span {
 display:none
 }
#linkList h3.resources {
 background: transparent url(h6.gif) no-repeat top left;
 margin: 25px 0 5px 0;
 width:63px;
 height: 10px;
 }
#linkList h3.resources span {
 display:none
 }


#linkList ul {
 margin: 0;
 padding: 0;
 }
#linkList li {
 line-height: 2.5ex;
 background: transparent url(cr1.gif) no-repeat top center;
 display: block;
 padding-top: 5px;
 margin-bottom: 5px;
 list-style-type: none;
 }
#linkList li a:link {
 color: #988F5E;
 }
#linkList li a:visited {
 color: #B3AE94;
 }

В первой декларации margin-left излишне, на мой взгляд. Как мы видим, на все заголовки меню приготовлена картинка, а текстовый вариант не отображается.

Общая оценка стандартного дизайна

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

В заключение повторю: поэкспериментируйте с этим базовым CSS-файлом. В следующий раз мы рассмотрим другой дизайн.

Клиппинговые слои (Выпуск 8)

noreply@blogger.com (Natalia Macheda) — Thu, 06 Mar 2008 13:18:00 +0000

По мотивам http://www.jalix.org/ressources/internet/dhtml/_dynduo/dynduo/en/clipping.html

Отсечение или клиппинг - обозначает задание видимых частей слоя. Какова разница между клиппингом и шириной/высотой? Ширина и высота задают размер HTML элемента. А клиппинг - это окошко,через которое мы смотрим на HTML элемент.

Регион клиппинга задаётся четвёркой параметров в пикселах: (top, right, bottom, left), порядок важен.

И синтаксис клиппинга такой:

clip:rect(top,right,bottom,left)

Пример использования:

<DIV ID="blockDiv"
STYLE="position:absolute; left:50; top:20; width:100; height:50;
clip:rect(-10,110,60,-10); background-color:#FF0000;
layer-background-color:#FF0000;"></DIV>

В результате мы получим вот что:

То есть к границам прямоугольника шириной 100 пикселей и высотой 50 пикселей добавилась экстра-область шириной 10 пикселей: -10 вверх, 10 вправо (110), 10 вниз (60), -10 влево.

Обратите внимание на присутствие background-color:#FF0000; и layer-background-color:#FF0000;". Это сделано для совместимости кода в IE и NN

JavaScript и клиппинг

1. Клиппинг в NN

В NN вы можете получать или изменять значения параметров клиппинга индивидуально:

document.divName.clip.top
document.divName.clip.right
document.divName.clip.bottom
document.divName.clip.left

Пример алерта на значение верхней границы клиппинга:

alert(document.divName.clip.top)

Изменение значения верхней границы клиппинга на 50 пикселей:

document.divName.clip.top = 50

2. Клиппинг в IE

Доступ ко всему клиппингу может быть сделан так:

alert(divName.style.clip)

Пример такого алерта:

"rect(0px 50px 100px 0px)"

Изменение клиппинга тоже может быть сделано комплексно:

divName.style.clip = "rect(0px 100px 50px 0px)"

3. Общая фунцкия получения значений клиппинга

function clipValues(obj,which) {
 if (ns4) {
  if (which=="t") return obj.clip.top
  if (which=="r") return obj.clip.right
  if (which=="b") return obj.clip.bottom
  if (which=="l") return obj.clip.left
 }
 else if (ie4) {
  var clipv = obj.clip.split("rect(")[1].split(")")[0].split("px")
  if (which=="t") return Number(clipv[0])
  if (which=="r") return Number(clipv[1])
  if (which=="b") return Number(clipv[2])
  if (which=="l") return Number(clipv[3])
 }
}

Пример её вызова:

alert(clipValues(block,"t"))

Здесь "t" означает top. Аналогичным образом можно использовать "b", "r", "l" для получения значений параметров bottom, right, left соответсвенно.

Пример использования общей функции

4. Общая функция изменения клипинга

4.1 clipTo()

Эта функция позволяет присвоить польностью другие значения параметрам клиппинга:

function clipTo(obj,t,r,b,l) {
 if (ns4) {
  obj.clip.top = t
  obj.clip.right = r
  obj.clip.bottom = b
  obj.clip.left = l
 }
 else if (ie4) obj.clip = "rect("+t+"px "+r+"px "+b+"px "+l+"px)"
}

Пример вызова:

clipTo(block,0,100,100,0)

4.2 clipBy()

Позволяет сдвигать область клиппинга на заданное значение

function clipBy(obj,t,r,b,l) {
 if (ns4) {
  obj.clip.top = clipValues(obj,'t') + t
  obj.clip.right = clipValues(obj,'r') + r
  obj.clip.bottom = clipValues(obj,'b') + b
  obj.clip.left = clipValues(obj,'l') + l
 }
 else if (ie4)
            obj.clip = "rect("+(this.clipValues(obj,'t')+t)+"px "+
            (this.clipValues(obj,'r')+r)+"px "+
            Number(this.clipValues(obj,'b')+b)+"px "+
            Number(this.clipValues(obj,'l')+l)+"px)"
}

Вызывается аналогичным образом, как и предыдущая функция:

clipBy(block,0,10,5,0)

Пример использования clipTo() и clipBy()

Анимированный клиппинг (вайпинг)

Если мы поместим clipBy() в цикл, то можем создать эффект анимированного расширения или удлинения области коиппинга. Но мы поступим хитрее:

function wipe1() {
 if (clipValues(block,'r')<200) {
  clipBy(block,0,5,0,0)
  setTimeout("wipe1()",30)
 }
}

Здесь цикл if будет работать до тех пор пока правая граница клиппинга не примет значение в 200 пикселей.

Пример вайпинга

Элементы отличного дизайна: наведение глянца (Выпуск 8)

noreply@blogger.com (Natalia Macheda) — Thu, 28 Feb 2008 08:03:00 +0000

Продолжаем изучать теоретические основы дизайна. Касательно статьи 9 принципов хорошего дизайна, мы пройдёмся подробнее по всем пунктам. Сегодня рассмотрим поподробнее пункт Приоритетность. Заранее оговорюсь, что подробное рассмотрение отдельного пункта может перекликаться с рассмотрением других пунктов и статьи в целом. Тем лучше для нас!

По мотивам http://psdtuts.com/designing-tutorials/elements-of-great-web-design-the-polish/

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

Краткое предисловие

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

Рассмотрим два созданных недавно сайта: Not By The Hour и его блог FreelanceSwitch. (Прим. НМ: Рекомендую, кстати, обратить внимание на первый пост по последней ссылке, 10 фраз, которые каждый фрилансер должен вычеркнуть из своей речи). Прежде, чем перейти к конкретным вещам, посмотрите, пожалуйста, ссылку:

До и после

Шаг 1 - Ясность

Линия толщиной в 1 пиксел помогает подчеркнуть разделение и усилить резкость. Фон обесцвечен для усиления ясности и подчёркивания картинки с сейфом. Небольшие тени и серый градиент выделяет текст.

Всё, что вы делаете на странице, непосредственно касается пикселей. Всё должно быть резко и ясно, то есть:

Ясность текста
Здесь имеется ввиду сглаживание. В Photoshop вы можете управлять сглаживание так: Window->Character. В открывшейся панели вы можете выбрать None Sharp Crisp Strong. Вы можете поэкспериментировать для разных шрифтов и размеров. Я лично чаще всего использую Sharp, который иногда выравнивает, а иногда искажает пиксели. На картинке выше текст Making установлен в Sharp.
Выравнивание
На картинке выше между чёрной и тёмно-серой панелями добалена светло-серая линия толщиной 1 пиксель. Этот трюк подражает эффекту повешения резкости. Если вы хоть раз повышали резкость в фотографии, то заметили, что после применения фильтра Unsharpen у объекта фотографии появляются контрастные границы. Так и в дизайне, лёгкое подчёркивание границ делает дизайн резче.
Цвет
Цыетовая схема тоже может сделать дизайн резче. В данном случае я обесцветил фон, который был серо-зелёный и стал серым. В результате сейф зеленоватого цвета стал контрастнее, а вся картинка - резче.
Полировка объектов
А теперь задание для вас: пройтись по картинке и подумать, как можно сделать резче отдельные объекты, например, логотип, углы и т.д.

Обратите внимание на градиентный цвет текста. Рецепт очень прост: "Используется картинка в формате PNG (чистый CSS, никаких Javascript или Flash). Все, что нужно - это пустой тег <span> и фоновая картинка с CSS параметром position:absolute. Этот способ работает со следующими браузерами: Firefox, Safari, Opera и Internet Explorer 6...
...мы просто поместим в формате PNG с градиентом (с альфа прозрачностью) над текстом."

Ключевые места выделены красным:

h1 {
  font: bold 330%/100% "Lucida Grande";
  position: relative;
  color: #464646;
}
h1 span {
  background: url(gradient.png) repeat-x;
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}

Вот и все! Можете посмотреть демо.

Так как Internet Explorer 6 некорректно отображает PNG-24, нам нужно вставить специальный код для нормального отображения прозрачных картинок PNG в этом браузере (поместите его в любом месте между тегами <head>):

<!--[if lt IE 7]>

<style>
h1 span {
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gradient.png', sizingMethod='scale');
}
</style>

<![endif]-->

Вариант для любителей стандартов

Если вы хотите добиться строгого соответствия веб-стандартам, используйте метод jQuery:

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

  //prepend span tag to H1
  $("h1").prepend("<span></span>");

});
</script>

Скачать демо (zip, 51 Kb)

Шаг 2 - Свет и тень

Градиенты и тени придают большую глубину дизайну и позволяют его элементам взаимодействовать между собой.

Градиенты, градиенты, градиенты... Можно сказать, что они являются отличительной особенностью дизайна Web 2.0. И, признаюсь, я тоже постоянно использую их в своих дизайнах. Посмотрите на картинку выше: я добавил градиентов для придания дизайну большей глубины.

По моему мнению, различие между печатным дизайном и веб-дизайном выражается как раз степенью глубины в дизайне. Например, печатный дизайн какой-нибудь брошюры, имеющий монотонные цвета всё равно будет выглядеть прекрасно из-за взаимодействия и отражения света от поверхности бумаги. На мониторе, однако, такой дизайн потеряет всю привлекательность. Я не хочу сказать, что вы не должны использовать монотонные цвета в веб дизайне! Но я заметил, что все дизайнеры печатных дизайнов совершают одни и те же ошибки при переходе к веб-дизайну:

Неумение передать резкость и ясность дизайна.
При печатном дизайне вы вряд ли сможете сделать зум и модифицировать какие-то отдельные пиксели. Да и в напечатанном виде это всё равно не будет заметно глазу. Печать думает сантиметрами, а не пикселями.
Неумение намекнуть на глубину и вызвать визуальный интерес.
Градиенты не очень хорошо передаются печатью, но зато на эеране - просто праздник. То же самое касается теней и подсветок. И на экране они создают интересный визуальный эффект. Например, на картинке сверху мешки денег изначально были векторными картинками, окрашенными в монотонные цвета. Однако при нанесении незначительного градиента Burn Toolo'ом, они стали выглядеть более мягко.

Шаг 3 - Приоритетность

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

Что я подразумеваю под приоритетностью? Приоритетность - это ответ на вопрос, что пользователь будет смотреть в первую очередь, а что потом и в каком порядке. Визуальная приоритетность - это смесь различных факторов:

Размер
Очевидно, что элементы большего размера имеют приоритетность над элементами меньшего размера. Поэтому на картинке сверху сейф и заглавие будут рассматриваться в первую очередь.
Цвет
Посмотрите ещё раз картинку "До и после": там подзаголовки в области 4 (см. картинку чуть выше) были такого же тёмно синего цвета, как и "Hi there!". И поэтому между этими двумя областями не было большого различия, и было непонятно, какая из них была приоритетнее. Перекраска подзаголовков из области 4 в бежевый цвет придала им меньшую приоритетность в информационной иерархии.
Фон
Фоновый цвет и цвет вообще не имеют какого-то смысла сами по себе, но важно их взаимодействие. Например, если на странице всё в тёмных тонах, но присутствует какой-то белый объект, то, очевидно, пользователь обратит внимание на последний. На картинке ниже ясно виден котраст между светло-жёлтым и темно-серым.
Положение
Известно, что глаз просматривает область слева направо и сверху вниз. То есть элементы, расположенные вверху, имеют большую приоритетность, равно как и предметы, расположенные левее.

Размер текста и цвет создаёт приоритетность между элементами дизайна. Здесь размеры и цвета заголовков были изменены для придания дизайну большей ясности.

Шаг 4

Повторю в который раз: веб-дизайн - значит, пикселы - наше всё. На картинке выше хорошо видно, что такое градиент. На самом деле там три градиента и три однопиксельных линии.

Шаг 5

1 или 2-хпиксельный переход от фона к еле заметному градиенту нынче в моде. Имейте в виду!

Что такое web 2.0-подобный дизайн? На картинке выше показан простой эффект, когда вы создаёте 1 или 2-хпиксельную рамочку и небольшой градиент на фоне. Если вы раньше этого не замечали, то сейчас понаблюдайте за новомодными дизайнами. Этот эффект используется везде, где только можно. Но он всё равно не раздражает.

Шаг 6

Коричневое на коричневом, да ещё и обильным текстом создаёт впечатление неаккуратного дизайна. Жёлтое на сером - приятный контраст и чёткость.

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

Исходник дизайна (PSD-файл)

Скачать PSD исходник

Кратко о CSS селекторах (Выпуск 7)

noreply@blogger.com (Natalia Macheda) — Wed, 27 Feb 2008 17:15:00 +0000

По мотивам http://msdn2.microsoft.com/en-us/library/aa358833(VS.85).aspx

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

Правила стиля

Правило стиля - это выражение, которое говорит браузеру, как отображать некую группу элементов на HTML-странице. Правило содержит селектор, за которым следует блок декларации. Блок декларации - это всё, что внутри фигурных скобок ({}). Например, следующий код модифицирует стандартное отображение HTML-элемента H1

селектор  блок декларации
--------  -----------------------------
H1        { font-variant: small-caps; }
            ------------  ----------
            свойство      значение

Как мы уже поняли ранее, декларация состоит из свойства и его значения, раздедённые между собой двоеточием (:). Пробелы в блоке декларации игнорируются, поэтому используйте их как вам нравится для форматирования CSS-файла. Множественные декларации внутри кривых скобок разделены между собой точкой с запятой (;). Хорошим тоном считается всегда завершать декларацию точкой с запятой, даже если декларация одна единственная.

Дерево документа

Дерево документа - это иерархическое представление элементов, используемых при кодировке HTML-файла. Например, для HTML-кода


  <body>
  <div id="content">
  <h1>Heading here</h1>
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor <em>sit</em> amet.</p>
  <hr>
  </div>
  <div id="nav">
  <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
  </ul>
  </div>
  </body>

дерево документа может быть представлено так:

Все взаимосвязи между элементами дерева можно описать в терминах предков, потомков, родителей, детей и братьев. А именно: каждый элемент дерева, за исключением корневого body имеет единственного родителя. Например, у h1 левый div является родителем. И наоборот, h1 - ребёнок для левого div. body - предок для h1, а h1 - потомок для body. Наконец, все li между собой братья. Стили применяются к элементам в дереве документа на основании их типов, их относительной позиции в иерархии, а также атрибутов id или class.

Селекторы и комбинаторы

Простой селектор - это типовой селектор или универсальный селектор. Типовой селектор определяет любой HTML-элемент (например, см. CSS файл для ZenGarden). Универсальный селектор обозначается символом "звёздочка" (*) и определяет любой элемент в документе.

Простой селектор может быть расширен атрибутами id или class, а также псевдо-классами в любом порядке. Правило стиля применяется, если данный элемент попадает под определение селектора. Примеры селекторов:


H1           { color:blue; } - заголовок первого уровня
                               будет синего цвета
#myID        { color:red; } - элемент с id="myID"
                              будет красного цвета
#myID:hover  { color: orange; } - элемент с id="myID"
                                  будет оранжевого цвета,
                                  если на него навести курсор мышки
P.myClass    { color:green; } - элемент p с class="myClass"
                                будет иметь текст зелёного цвета
P.myClass:hover { text-decoration:underline; } - элемент p с class="myClass"
                                будет иметь подчёркнутый текст ,
                                если на него навести курсор мышки

Простые селекторы могут быть составлены в комбинацию селекторов при помощи комбинационных символов (комбинаторов). Комбинаторы специфицируют контекстуальные отношения между простыми селекторами и бывают потомками (пробел между селекторами), детьми (знак "больше" (>)) и непосредственными братьями (знак "плюс" (+)). Например следующий код говорит, что тэг h2, являющийся непосредственным братом тэга h1 в дереве документа должен располагаться на 5 милиметров ближе к h1:

H1 + H2 { margin-top: -5mm; }

Для оптимизации размера и читаемости CSS файла, элементы, имеющие один и тот же стиль, перечисляются через запятую, то есть группируются. Например:

H1, H2, H3 { font-family: helvetica; }

Псевдо-классы и псевдо-элементы

Как уже было сказано выше, стили применяются к элементам согласно их позиции в дереве документа. Однако иногда необходимо применить особенный стиль к фрагменту HTML-документа, который невозможно распознать в дереве документа. И для стилизирования такой информации применяются псевдо-классы и псевдо-элементы. Псевдо-элементы применяются для определения стилей фрагментов элементов. Например, :first-letter или :first-line, то есть первая буква и первая строка текста соответсвенно. А псевдо-классы - для поведения элементов. Например, :first-child, :visited или :hover определяющие соответсвенно первого ребёнка, посещённую ссылку или поведение при наведении курсора мышки на элемент. Обычно псевдо-классы имеют динамическую природу в том смысле, что элемент приобретает и теряет стили в процессе взаимодействия пользователя со страницей.

При комбинировании селекторов типовые селекторы всегда должны быть раньше псевдо-элементов. Друние селекторы (id, class или псевдо-классы) могут встречаться в любом порядке.

P:first-child:first-line { text-transform: uppercase; }

Поддержка селекторов в Internet Explorer

Простые селекторы	Версия Internet Explorer
Тип, Группировка	3
Class, ID	3
Universal (*)	5.0
Комбинаторы
Descendant ( )	3
Child (>)	7
Adjacent Sibling (+)	7
Селекторы-аттрибуты
Equality [=]	7
Existence []	7
Hyphen [=]	7
Prefix [^=]	7
Substring [*=]	7
Suffix [$=]	7
Whitespace [~=]	7
Псевдо-классы и псевдо-элементы
:link, :visited	3
:hover†, :active	4
:first-letter, :first-line	5.5
:first-child	7

† Применимость селектора :hover была рапространена на все элементы лишь в Windows Internet Explorer 7.

Дополнительные ссылки

Передвижение элементов при помощи клавиатуры (Выпуск 7)

noreply@blogger.com (Natalia Macheda) — Wed, 27 Feb 2008 15:54:00 +0000

Напоминаю, что в выпуске Реакция на клавиатуру, я показала базовые функции перехвата нажатий клавиш клавиатуры. Сейчас мы рассмотрим, как можно активизировать движение элементов при помощи клавиатуры. Идея проста: вы перехватываете нажатие какой-то клавиши и для неё вызываете соответствующий обработчик. В следующем фрагменте кода мы реализуем эту идею на примере клавиши "А", которая в Internet Explorer'е имеет код (ieKey) 65, а в Netscape (nKey) 97 соответственно.

function init() {
 if (ns4) block = document.blockDiv
 if (ie4) block = blockDiv.style
 block.xpos = parseInt(block.left)

 document.onkeydown = keyDown
 if (ns4) document.captureEvents(Event.KEYDOWN)
}

function keyDown(e) {
 if (ns4) {var nKey=e.which; var ieKey=0}
 if (ie4) {var ieKey=event.keyCode; var nKey=0}
 if (nKey==97  ieKey==65) {   // if "A" key is pressed
  slide()
 }
}

function slide() {
 block.xpos += 5
 block.left = block.xpos
 status = block.xpos       // not needed, just for show
 setTimeout("slide()",30)
}

Пример функционирования кода

Активные переменные

Предыдущий скрипт слегка ограничен в том смысле, что как только движение начинается, мы не можем остановить его. И сейчас мы это исправим.

Мы будем использовать технику "активных" переменных, для кодирования состояния движения. Это движется? Или это не движется? Поскольку функции, имплементирующие движение, рекурсивны, они не обладают внутренними средствами для прерывания движения. И тут на сцену выходят активные переменные. Вставив в нужном месте if, вы обретаете контроль над движением объекта и решаете, должен ли он остановиться или продолжать движение. При этом функция будет выглядеть так:

function slide() {
 if (myobj.active) {
  myobj.xpos += 5
  myojb.left = myobj.xpos
  setTimeout("slide()",30)
 }
}

В этом случае функция slide() будет действовать до тех пор, пока myobj.active=true. А как только вы установите myobj.active=false, движение прекратится. Используя этот приём, мы сейчас напишем код, который запускает движение красного блока при нажатии клавиши "А". Движение прекращается, когда мы отпускаем клавишу "А".

Отжатие клавиши и активные переменные

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

document.onkeydown = keyDown
document.onkeyup = keyUp
if (ns4) document.captureEvents(Event.KEYDOWN  Event.KEYUP)

А вот собственно и keyUp():

function keyUp(e) {
 if (ns4) var nKey = e.which
 if (ie4) var ieKey = window.event.keyCode
 if (nKey==97  ieKey==65) block.active = false
}

Чтобы наш код был совсем уж правильным и безошибочным, мы должны добавить кое-какие строчки и в другие функции. Забегая вперёд, в нижеследующем коде для функции keyDown выражение &&!block.active используется для того, чтобы вызвать движение объекта только если он не двигается. То есть если объект движется, функция slide() не может быть выполнена.

function init() {
 if (ns4) block = document.blockDiv
 if (ie4) block = blockDiv.style
 block.xpos = parseInt(block.left)
 block.active = false

 document.onkeydown = keyDown
 document.onkeyup = keyUp
 if (ns4) document.captureEvents(Event.KEYDOWN  Event.KEYUP)
}

function keyDown(e) {
 if (ns4) {var nKey=e.which; var ieKey=0}
 if (ie4) {var ieKey=event.keyCode; var nKey=0}
 if ((nKey==97  ieKey==65) && !block.active) {   // if "A" key is pressed
  block.active = true
  slide()
 }
}
function keyUp(e) {
 if (ns4) {var nKey=e.which; var ieKey=0}
 if (ie4) {var ieKey=event.keyCode; var nKey=0}
 if (nKey==97  ieKey==65) {
  block.active = false   // if "A" key is released
 }
}

function slide() {
 if (block.active) {
  block.xpos += 5
  block.left = block.xpos
  status = block.xpos       // not needed, just for show
  setTimeout("slide()",30)
 }
}

Пример действия кода

Как узнать код клавиши?

Воспользуйтесь скриптом для определения nKey и ieKey. Вот полный листинг HTML файла и скрипта для такой странички:

<html>
<head>

<script language="JavaScript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function keyDown(e) { 
     if (ns4) {  
          var nKey = e.which  
          document.keyform.keytext.value = "nKey=" + nKey 
     } 
     if (ie4) {  
          var ieKey = event.keyCode  
          document.keyform.keytext.value = "ieKey=" + ieKey 
     }
}
document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN)  //-->
</script>
</head>

<body BGCOLOR="#FFFFFF">
<p>Here's a little tool for finding out what the nKey and ieKeys are.
<br>Use Netscape 4.0 and it'll show the nKey, use IE 4.0 and it'll show the ieKey
<form name="keyform">
<input size="12" value="Press a key" name="keytext">
</form>
</body>

</html>

Теперь вы можете создавать свои JavaScript игры, примеры которых можно найти в гугле по запросу http://www.google.com/search?hl=ru&q=javascript+game&lr=

По мотивам http://www.jalix.org/ressources/internet/dhtml/_dynduo/dynduo/en/keystrokes.html

9 принципов хорошего дизайна (Выпуск 6)

noreply@blogger.com (Natalia Macheda) — Mon, 18 Feb 2008 15:52:00 +0000

По мотивам http://psdtuts.com/designing-tutorials/9-essential-principles-for-good-web-design/

Приоритетность (направляющая взгляд).
Хороший веб-дизайн, как никакой другой дизайн, ориентирован на эффективное приподнесение информации. Главный инструмент в арсенале веб-дизайнера - приоритетность. При хорошем дизайне, пользователя ведёт по экрану дизайнер. И речь здесь идёт о том, каким визуальным весом обладают различные части дизайна.

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

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

Для достижения приоритетности, в вашем распорядении множество инструментов:

Расположение информационных блоков на странице непосредственным образов воздействует на порядок их просмотра.

Цвет: жирные и тонкие шрифты - простой способ указать пользователю, на что смотреть.

Контраст: контрастные вещи выделяются, а однотипные подразумевают вторичность.

Размер: большое имеет преимущество над маленьким (если только вы не решили сделать ВСЁ большим, а с помощью маленького - лишь подчёркивать контрастность).

Элементы дизайна: если на странице присутствует гигантская стрелка, указываюшая куда-то, угадайте, куда посмотрить пользователь.

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

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

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

Пространство белого цвета
Говоря пространство белого цвета, я не имею в виду #ffffff. Этот аспект касается прежде всего пустого пространства на странице (негативное пространство, иными словами). Пространство белого цвета используется для придания странице баланса, контраста и пропорций.

Навигация
Пользователь всегда должен знать своё расположение на сайте. Для создания навигации примите во внимание два аспекта:

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

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

Рентабельность дизайна
Жизнь дизайнера упростилась с изобретением CSS. Но всё ещё важными остаются следующие аспекты:

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

Что случится, если уменьшить окошко браузера? Что случится с повторяющимися фоновыми картинками? Как выровняется текст: по центру или слева?

Вы имеете дело с чем-то технически трудным? Даже с CSS некоторые вещи, например, вертикальное выравнивание, могут быть достаточно трудоёмкими.

Можно ли упростить работу, слегка видоизменив дизайн? Если на странице три абсолютно непересекающихся объекта, то, конечно, программирование такого дизайна будет очень простым. А если все три объекта пересекаются, то программировать CSS файл будет сложнее.

Можно ли сократить работу для большого сайта? Можно, конечно, любую кнопочку иллюстрировать картинкой. А можно акцентировать контрастность при помощи CSS, хотя это и не будет так ярко (а может, это и к лучшему).

Типография
Текст - это самый распространнёный элемент на странице. Поэтому обратим внимание на следующие аспекты:

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

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

Пространство, как уже обсуждалось чуть выше, очень важно не только между строками, но и вообще между любыми элементами страницы.

Длина строки - здесь нету каких-то жёстких правил. Запомните лишь, что чем длиннее строка, тем сложнее она читается. Посмотрите, в книгах ширина текста где-то 12-15 см. В газетах текст разбивается на колонки.

Цвет - низкоконтрастный цвет текста - это модно и привлекательно, но трудночитаемо.

Абзацы - выравнивание текста по обеим сторонам - это красиво и удобно для чтения. Но автовыравнивание иногда создаёт нелепые пробелы между словами. Редактируйте ваш текст так, чтобы он удачно вписывался в отводимое ему пространство.

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

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

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

Побудьте в шкуре пользователя. Что пользователь может захотеть увидеть на сайте? Куда он захочет перейти? Какие операции он захочет выполнить?

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

Ясность (резкость)
Поддержание ясности и резкости дизайна - супер-важно. И речь здесь идёт о пикселях, в том числе и на картинках. Подредактируйте картинки в фотошопе, сделайте их резче и контрастнее.

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

Даже если это плохой дизайн, сделайте его непротиворечивым. Противоречивый дизайн - это как опечатки, портит сразу всё впечатление.

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

Стандартный CSS-файл для CSS Zen Garden (Выпуск 6)

noreply@blogger.com (Natalia Macheda) — Mon, 18 Feb 2008 15:11:00 +0000

Напоминаю, что ранее мы рассмотрели HTML-разметку сайта http://www.csszengarden.com/. Сегодня мы познакомимся с его стандартным CSS-стилем, который из примитивной HTML-разметки создает, как по мановению волшебной палочки, прекрасный сайт. Буду рассказывать так подробно, насколько это возможно, поскольку рассылку могут читать люди, которые только-только занялись сайтостроительством. Хотя предполагается, что базовые HTML-тэги все знают :).

Пропуская коментарии, первым делом мы видим стили базовых элементов:

html {
 margin: 0;
 padding: 0;
}
body {
 font: 75% georgia, sans-serif;
 line-height: 1.88889;
 color: #555753;
 background: #fff url(blossoms.jpg) no-repeat bottom right;
 margin: 0;
 padding: 0;
}
p {
 margin-top: 0;
 text-align: justify;
}
h3 {
 font: italic normal 1.4em georgia, sans-serif;
 letter-spacing: 1px;
 margin-bottom: 0;
 color: #7D775C;
}
a:link {
 font-weight: bold;
 text-decoration: none;
 color: #B7A5DF;
}
a:visited {
 font-weight: bold;
 text-decoration: none;
 color: #D4CDDC;
}
a:hover, a:active {
 text-decoration: underline;
 color: #9685BA;
}
acronym {
 border-bottom: none;
}

Напоминаю, стиль какого либо параметра описывается в формате: параметр: стиль;. При этом полное описание стиля элемента (HTML-тэга, например) задаётся синтаксисом: элемент{параметр₁: стиль₁; параметр₂: стиль₂;...}

Далее, каждый элемент представляет собой некий кирпичик, у которого есть границы и содержимое.

margin - это пространство вокруг границ элемента. Полное описание параметра margin находится по адресу: http://msdn2.microsoft.com/en-us/library/ms530799(VS.85).aspx
padding - это пространство между границами элемента и содержательной частью элемента (аналог пробела, если говорить в терминах текста). Полное описание параметра margin находится по адресу: http://msdn2.microsoft.com/en-us/library/ms530830(VS.85).aspx

Как вы поняли, у элементов html и body оба эти параметра установлены в ноль, то есть ни отступов, ни пробелов.

color - это цвет элемента. Полное описание параметра color находится по адресу: http://msdn2.microsoft.com/en-us/library/ms530749(VS.85).aspx
background - это описание фона элемента внутри границ. Полное описание параметра background находится по адресу: http://msdn2.microsoft.com/en-us/library/ms530722(VS.85).aspx

То есть в теле документа текст имеет цвет #555753 и фон - некий рисунок blossom.jpg, который помещается лишь единожды (no repeat) в правый нижний угол (bottom right). Если же картинки в браузере отключены, то фон будет просто белым (#fff).

У текстовых элементов можно варьировать стиль шрифта при помощи параметра font, полное описание которого находится по адресу: http://msdn2.microsoft.com/en-us/library/ms530756(VS.85).aspx

В частности, в теле элемента мы будем иметь текст Georgia или Sanserif (если Georgia не установлен на компьютере) в 75% размере от стандартного.

Завершаем стиль элемента body параметром line-height, который устанавливает расстояние между строками (http://msdn2.microsoft.com/en-us/library/ms530784(VS.85).aspx). Отсутствие единиц измерения (сантиметры, дюймы и т.д. http://msdn2.microsoft.com/en-us/library/ms531211(VS.85).aspx) говорит о единице измерения по умолчанию, px (пиксели).

Для стандартного HTML абзаца (элемент р) все параметры body наследуются (http://msdn2.microsoft.com/en-us/library/ms531429(VS.85).aspx), плюс добавляется выравнивание текста слева и справа: text-align: justify; Подробнее про выравнивание текста ситайте по адресу: http://msdn2.microsoft.com/en-us/library/ms531162(VS.85).aspx

Далее идут более сложные выражения для элементов, которые называются селекторы и о них мы поговорим в следующий раз и закончим разбор стилей для основных элементов в стандартном CSS- файле для CSS Zen Garden. А пока что поэкспериментируйте со стилями других элементов. Рекомендую обращаться к справочнику по стилям для HTML элементов, находящемуся по адресу http://msdn2.microsoft.com/en-us/library/ms533054(VS.85).aspx

Реакция на клавиатуру (Выпуск 6)

noreply@blogger.com (Natalia Macheda) — Mon, 18 Feb 2008 15:05:00 +0000

А вы знаете, что с помощью DHTML можно контролировать практически полностью нажатия клавиш клавиатуры? Внимание, Netscape Communicator 4.0 не обладает возможностью перехватывать события нажатия клавиши под Unix'ом.

Первое, что вам нужно сделать, - это инициализировать событие. Вот типичная инициализация события keydown:

document.onkeydown = keyDown

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

Обработка нажатий клавиш в разных браузерах происходит по-разному.

Netscape

Для Нетскейпа нужно добавить вот такие строки:

document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN)

Если вы забудете прописать этот код, то можете получить путаницу при нажатиях клавиш клавиатуры и мышки. При этом в ваш keyDown() должен передаваться скрытый параметр, в нашем примере - буква е, как распространённая практика обозначения события (event).

function keyDown(e)

Эта буква е содержит информацию о том, какая клавиша была нажата. Чтобы получить доступ к этой информации, используйте свойство which:

e.which

Заметьте, что значение свойства which - это информация о коде клавиши, а не её буквенное или численное значение! Для того, чтобы получить буквенное или численное значение клавиши, используйте следующий код:

String.fromCharCode(e.which)

Теперь объединим всё вместе:

function keyDown(e) {
 var keycode = e.which
 var realkey = String.fromCharCode(e.which)
 alert("keycode: " + keycode + "\nrealkey: " + realkey)
}

document.onkeydown = keyDown
document.captureEvents(Event.KEYDOWN)

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

Internet Explorer

В эксплорере вым не нужно передавать загадочную переменную е. И вместо e.which нужно использовать window.event.keyCode. А всё остальное очень похоже:

function keyDown() {
 var keycode = event.keyCode
 var realkey = String.fromCharCode(event.keyCode)
 alert("keycode: " + keycode + "\nrealkey: " + realkey)
}

document.onkeydown = keyDown
document.onkeydown = keyDown

Пример использования функции (Internet Explorer только!)

Комбинирование двух методов

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

function keyDown(e) {
 if (ns4) {var nKey=e.which; var ieKey=0}
 if (ie4) {var ieKey=event.keyCode; var nKey=0}
 alert("nKey:"+nKey+" ieKey:" + ieKey)
}

document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN)

Пример использования.

По мотивам http://www.jalix.org/ressources/internet/dhtml/_dynduo/dynduo/en/keystrokes.html

Выпуск 5 (часть 2) - Шаблон сайта

noreply@blogger.com (Natalia Macheda) — Mon, 18 Feb 2008 07:57:00 +0000

Речь идёт, конечно же, о всем известном CSS Zen Garden с его практически универсальной разметкой, которая может быть уникальным образом настроена при помощи CSS к совершенно неповторимому виду, что и продемонстрировано на самом сайте.

HTML-размётка сайта находится по адресу http://www.csszengarden.com/zengarden-sample.html. Просто перейдите по этому линку, а затем кликните правой клавишей мышки и из выпадающего меню выберите "View source", чтоб посмотреть исходный код. Что вы увидите в открывшемся тектовом файле? Во-первых множество всевозможных тэгов div. Во-вторых, каждый из них имеет свой идентификатор, по имени которого не трудно догадаться о содержимом блока, окружаемого этим div'ом. Но, самое главное, что стиль каждого идентифицируемого div'а и других стандартных HTML-тэгов задаётся стилем, который приаттачивается, как внешний файл строчками:


<style type="text/css" media="all">
  @import "sample.css";
 </style>

Но посмотрим по порядку.

Внешний div с id=container задаёт смысловую часть всего сайта. Например, это письмо в рассылтоже окружено "голубой каёмочкой", ограничивающей смысловую часть выпуска. Отступы и поля - элемент дизайна. Многие сайты делают их достаточно широкими, сужая смысловую часть до стандартной ширины книжной страницы с заданным количеством знаков в строчке. Что это даёт? Просмотривая такой "стандартизированный по ширине" текст, мы просто облегчаем работу глазам, которым не нужно вращаться от левого упора до правого упора.

Далее идёт div c id=intro, который предназначен для "шапки страницы", которая разделяется на три div'a:

Первый c id=pageHeader, то есть заглавие сайта, который может быть оформлен рисунком или просто текстом. В последнем случае мы можем поместить заглавие нашего сайта в тэг <h1>. Например, <h1>Домашняя страница васи Пупкина</h1>. Далее можно разместить подзаголовок в тэг <h2>. Например, <h2>Вася Пупкин - суперэксперт по сайтостроительству!</h2>
Следующий div c id=quickSammary содержит краткую информацию о сайте. Например, <p>Сайт содержит обучающие уроки по сайтостроительству</p>. Заметьте, что текстовые поля помещены в теги <p>, то есть по абзацам, каждый из которых может имееть свой собственный идентификатор, что позволяет моделировать стиль каждого отдельного абзаца.
Наконец, div c id=preamble слегка "раскрывает тему", затронутую в quickSummary

Шапка сайта даёт нам интуитивное представление о содержимом сайта. Само же содержимое идёт в div'e с id=supportingText. В шаблоне CSSZenGarden этот div подразделяется на ряд субdiv'ов с идентификаторами: explanation, participation, benefits, requirements, footer. Все эти блоки, за исключением последнего, сайт-ориентированные, то есть объясняют развёрнуто значение сайта, приглашают дизайнеров поучаствовать в разработке новых дизайнов для этого же сайта (он ведь для этого и предназначен: показать мощь CSS), рассказывают о плюсах этого участия и, наконец, обозначают правила для участия. Последний блок содержит небольшие ссылочки на W3C стандарты: xhtml, css и прочие, которые пригодятся разработчикам дизайна.

Наконец, пространство для всеми любимых нами менюшек для навигации сайта расположены в div'e c id=linkList. Создание меню - это отдельная большая тема. Пока что мы лишь ограничимся вертикальными меню, созданными при помощи списков, то есть тагов <ul> и <li>. Каждый отдельный пункт меню может иметь свой стиль и свои подменю. Вот как это сделано в CSSZenGarden: меню различных дизайнов окружено div'ом с id=lselect, внутри которого список (таги <ul> и <li>) ссылок на дизайны. По такому же принципу построен div с id=archives, внутри которого список ссылок на архив дизайнов, не уместившихся в предыдущем меню, которое, очевидно, содержит самые "свежие" дизайны. Наконец меню, ограниченное div'ом с id=resources содержит список ссылок на различные дополнительные ресурсы, как-то FAQ, Submit Design и т.д.

Понятно, что дизайн можно расширить дополнительными div'ами, например, рекламой от google, рекламой вашей собственной продукции и т.д.

Наложим шаблон CSSZenGarden на subscribe.ru. Смысловая часть занимает всю ширину страницы. Шапка находится в левом верхнем углу: логотип, информация о количестве подписчиков и рассылок, поиск (три элемента!). Меню смоделировано так, что находится, как навигационный панели сверху и снизу: первая - для навигации по сайту, вторая - для навигации по информации о сайте. Содержимое делится на Каталог, Сервисы, Рейтинги и Новости. Обратите внимание на разные стили, но однотипное оформление блоков: заглавие в зелёном овале и прямоугольник с закруглёнными краями для обозначения тематического блока. Наконец, всевозможные баннеры вверху и слева могли бы быть добавлены вспомогательными div'ами.

Наконец, оговорюсь, что сайт subscribe.ru размётан таблицами, а не div'ами. Однако, это устаревшая и неудобная практика: сайту трудно придать новый оригинальный вид, поскольку таблицы не обладают такой гибкостью, как div. В таблицах легко запутаться среди колонок и строк и, следовательно, содержащие их страницы трудно редактировать. Наконец, вложения типа таблица в таблице, что очень часто встречается для придания видимой гибкости сайту, может быть неправильно интерпретировано некоторыми браузерами.

В заключении я хочу добавить: прежде чем создавать супер-пупер сайт, продумайте его разметку в терминах шапка, содержимое, меню (навигация). Как вы назовёте свой сайт? Как в двух строках расскажете посетителю, о чем весь этот ворох страничек? Чем наполните содержимое? На какие тематические блоки разобъёте вашу информацию? Как вы построите навигацию (семантически, а не графически!)? Предлагаю пока что подумать над этими вопросами.

Выпуск 5 (часть 1) - Анимация по клику мышкой

noreply@blogger.com (Natalia Macheda) — Mon, 18 Feb 2008 07:52:00 +0000

Рассмотрим скрипт

function init() { if (ns4) block = document.blockDiv if (ie4) block = blockDiv.style block.xpos = parseInt(block.left) block.active = false } function slide() { if (block.active) { block.xpos += 5 block.left = block.xpos setTimeout("slide()",30) } }

... и HTML код, его вызывющий

<BODY BGCOLOR="#FFFFFF" onLoad="init()">

Click and hold the link below to move the block
<BR><A HREF="javascript:void(null)"
                   onMouseDown="block.active=true; slide(); return false;"
                   onMouseUp="block.active=false"
                   onMouseOut="block.active=false">move</A>

<DIV ID="blockDiv" style=""xposition:absolute;" left:50px; top:100px; width:30px; height:30px;
                             clip:rect(0px 30px 30px 0px); layer-background-color:red;
                             background-color:red;">
</DIV>

В результате мы увидим картинку вроде этого:

Click and hold the link below to move the block
move

Здесь при нажатии на ссылку с надписью move красный квадрат будет двигаться до тех пор, пока нажата левая клавиша мышки.

Пример функционирования можно посмотреть здесь.

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

Выпуск 4 - Слайдинг

noreply@blogger.com (Natalia Macheda) — Mon, 18 Feb 2008 07:45:00 +0000

Слайдинг - это анимированное движение элементов или эффект скроллинга. Используя циклические (или итеративные) функции, и продвигая цровни на малое количество пикселей, можно создать довольно привлекательные анимационные эффекты.

Идея такова:

block.xpos += 5 block.left = block.xpos

То есть мы сдвигаем элемент на 5 пкселей вправо. А если мы оформим это как цикл:

function slide() { if (block.xpos < 300) { block.xpos += 5 block.left = block.xpos setTimeout("slide()",30) } }

Здесь if нужен, чтобы остановить анимацию. В данном случае остановка произойдёт, если х-координата больше либо равна 300. Функция setTimeout() - это и есть то, что анимирует передвижение. Не сложно понять, что она воспроизводит выполнение функции slide() через 30 миллисекунд.

Теперь напишем скрипт:

function slide() { if (block.xpos < 300) { block.xpos += 5 block.left = block.xpos setTimeout("slide()",30) } }

function restart() { block.xpos = 50 block.left = block.xpos }

function moveTo(obj,x,y) { obj.xpos = x obj.ypos = y obj.left = obj.xpos obj.top = obj.ypos }

...и HTML-код:

<a href="javascript:slide()">slide</a> - <a href="javascript:moveTo(block,50,100)">restart</a> <div id="blockDiv" style=""LEFT:" 50px; WIDTH: 30px; CLIP: rect(0px 30px 30px 0px); POSITION: absolute; TOP: 100px; HEIGHT: 30px; BACKGROUND-COLOR: red; layer-background-color: red"></div>

Мы получим следующую картинку:

slide - restart

См. на примере 1.

Движение по диагонали предполагает, что мы изменяем обе координаты одновременно. Добавьте в функцию slide() перед setTimeout() следующие строки:

block.ypos += 3 block.top = block.ypos

А в функцию moveTo() строки

obj.ypos = y obj.top = obj.ypos

Результат должен функционировать, как в примере 2.

Однако движение по диагонали может быть сделано хитрее. Давайте вспомним курс тригонометрии фредней школы. Предствим себе прямоугольный треугольник. Если его катет равен, например, х, а угол между гипотенузой (сторона напротив прямого угла) и прилежащего катета (горизонтальная сторона) равен а, то длина прилежащего катета равна х*cos(а), а противолежащего катета (вертикальная сторона) - х*sin(а). Пусть х=5. И теперь нам нужны четыре дополнительных свойства в функции инициализации:

object.angle = 30 object.xinc = 5*Math.cos(object.angle*Math.PI/180) object.yinc = 5*Math.sin(object.angle*Math.PI/180) object.count = 0

Мы как обычно считаем инкрементацию координат x и y, чтобы определить left и top значения. Угол а необходимо умножать на Math.PI/180 для конвертации градусов в радианы, поскольку синус и косинус считаются для радианов. Свойство count будет использоваться для задания количества итераций функции.

Попробуем этот скрипт в действии:

<SCRIPT> <!-- ns4 = (document.layers)? true:false ie4 = (document.all)? true:false function init() { if (ns4) block = document.blockDiv if (ie4) block = blockDiv.style block.xpos = parseInt(block.left) block.ypos = parseInt(block.top) block.angle = 0 block.xinc = 5*Math.cos(block.angle*Math.PI/180) block.yinc = 5*Math.sin(block.angle*Math.PI/180) block.count = 0 }

// Must recalculate the xinc and yinc before you move function go() { block.angle = document.changeangle.angletext.value block.xinc = 5*Math.cos(block.angle*Math.PI/180) block.yinc = 5*Math.sin(block.angle*Math.PI/180) slide() } function slide() { if (block.count < 20) { block.xpos += block.xinc block.ypos -= block.yinc block.left = block.xpos block.top = block.ypos block.count += 1 setTimeout("slide()",30) } else block.count = 0 }function restart() { block.count = 0 moveTo(block,150,150) } function moveTo(obj,x,y) { obj.xpos = x obj.ypos = y obj.left = obj.xpos obj.top = obj.ypos } //--> </SCRIPT> <BODY BGCOLOR="#FFFFFF" onLoad="init()"> <FORM NAME="changeangle"> Type in an angle and hit Go: <BR><INPUT NAME="angletext" TYPE="TEXT" SIZE=4 VALUE="0"> <INPUT TYPE="BUTTON" VALUE="Go" onClick="go()"> <INPUT TYPE="BUTTON" VALUE="Reset" onClick="restart()"> </FORM> <DIV ID="blockDiv" style="position:absolute; left:50px; top:100px; width:30px; height:30px; clip:rect(0,30,30,0); layer-background-color:red; background-color:red;"> </DIV> </BODY>

Вот что мы получим:

Type in an angle and hit Go:

Для полную функциональность можно посмотреть в примере 3.

Выпуск 3 - Движение

noreply@blogger.com (Natalia Macheda) — Sun, 17 Feb 2008 13:36:00 +0000

Как правило проблемы совместимости не возникают при назначении некому CSS-P элементу нового расположения. Например, для перемещения элемента myelement в точку (100, 50) вы просто устанавливаете соответсвующие значения у свойств left и top:

myelement.left = 100 myelement.top = 50

Не забывайте, что myelement это указатель, определённый, например, таким образом:
function init() { if (ns4) myelement = document.myelementDiv if (ie4) myelement = myelementDiv.style }

Как уже было сказано выше, назначение нового местоположения происходит гладко во обоих браузерах. Проблемы возникают с определением текущих координат элемента. Это касается в первую очередь IE, который представляет все координаты с px на конце (см. пример в предыдущем выпуске). Дабы избавиться от этих буковок, необходимо значение координат перевести в целочисленное значение. Иными словами, вместо myelement.left, вы должны написать parseInt(myelement.left). Например, если вы хотите информировать пользователя о координатах элемента, вы можете сделать это так:

alert(parseInt(myelement.left) + ", " + parseInt(myelement.top))

Добавление новых свойств

"Всё время теперь придётся писать parseInt()?" - спросите вы. Как тоскливоооооо! К счастью, существует метод оптимизации этой проблемы. Этот метод называется добавление новых свойств к указателям, или объектам, как я буду называть их далее по тексту. Иными словами, можно сохранять текущее местоположение элемента в свойствах, определённых нами же. Для создания этих свойств, нужно просто присвоить им некие значения. Для начала, мы сохраним текущие координаты элемента так:
myelement.xpos = parseInt(myelement.left) myelement.ypos = parseInt(myelement.top)
И теперь, каждый раз, когда вам понадобятся значения свойств left и top, вы обращаетесь к myelement.xpos и myelement.ypos соответсвенно. Например, новая версия alert() будет выглядеть так:
alert(myelement.xpos + "," + myelement.ypos)

Так как насчёт определения текущей координаты?

Если вы хотите изменить текущие координаты элемента, ПРЕЖДЕ ВСЕГО вы должны изменить значения переменных xpos и ypos.А ЗАТЕМ, вы можете установить значения свойств left и top равными соответсвенно xpos и ypos. Например,
function move() { myelement.xpos = 200 myelement.ypos = -40 myelement.left = myelement.xpos myelement.top = myelement.ypos }
Значения переменных xpos и ypos должны быть всегда синхронизированы со значениями свойств left и top. Это гарантирует равенство, например, myelement.xpos и myelement.left.

Рассмотрим простой пример на движение.

Скрипт:

HTML:

<BODY bgColor=#ffffff onload=init() /> Move the block to: <A href="javascript:move1()">(100,80)</A> - <A href="javascript:move2()">(200,160)</A> - <A href="javascript:move3()">(300,240)</A><br> <A href="javascript:alert(block.xpos + ', ' + block.ypos)">check location</A> <DIV id=blockDiv style="LEFT: 50px; WIDTH: 30px; CLIP: rect(0px 30px 30px 0px); xPOSITION: absolute; TOP: 100px; HEIGHT: 30px; BACKGROUND-COLOR:red; layer-background-color: red"></DIV> </BODY>

Результирующая страница будет такая:

Move the block to: (100,80) - (200,160) - (300,240) check location

где красный квадрат перемещается так, что его левый верхний угол имеет координату(100,80), (200,160), (300,240) если пользователь нажимает одноимённый линк, и сообщение с информацией о местоположении красного квадрата появляется при нажатии на линк check location. Всё очень просто, не так ли?

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

Вы можете удивиться, почему я использую xpos и ypos вместо x и y. Это имеет вполне
серьёзное обоснование. Мало кто знает, что Netscape уже включил эти свойства (x и y) в свою имплементацию CSS-P. Если вы их будете использовать в примерах выше, они будут содержать значения целого типа. "Ну и что?" скажете вы. В примерах этого выпуска ничего. Но могут встретиться примеры, в которых необходимо хранить не целочисленные значения и это будет невозможно из-за использования x и y.

Общая функция движения

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

Функция moveTo()

Эта функция принимает в качестве параметра слой/объект и перемещает его непосредственно в другое место:

function moveTo(obj,x,y) { obj.xpos = x obj.left = obj.xpos obj.ypos = y obj.top = obj.ypos }

Используется эта функция очень просто: всё что вы должны передать в неё - слой/объект и его новые координаты x и y. Наример, если инициализация слоя происходит так:

if (ns4) mysquare = document.mysquareDiv if (ie4) mysquare = mysquareDiv.style mysquare.xpos = parseInt(mysquare.left) mysquare.ypos = parseInt(mysquare.top)

то для перемещения квадрата в точку (50,100) достаточно написать:

moveTo(mysquare,50,100)

Функция moveBy()

Эта функция имеет те же самые принципы работы, что и предыдущая, за исключением того, что слой/объект перемещается не в в точку (x,y), но смещается на (x,y) пикселов, относительно текущей координаты слоя:
function moveBy(obj,x,y) { obj.xpos += x obj.left = obj.xpos obj.ypos += y obj.top = obj.ypos }

Для смещения квадрата на 5 пикселов вправо и на 10 пикселов вверх нужно написать:

moveBy(mysquare,5,-10)

Полный пример, который использует функции moveTo() и moveBy():

Скрипт:

<SCRIPT language=JavaScript> <!-- ns4 = (document.layers)? true:false ie4 = (document.all)? true:false function init() { if (ns4) block = document.blockDiv if (ie4) block = blockDiv.style block.xpos = parseInt(block.left) block.ypos = parseInt(block.top) } function moveTo(obj,x,y) { obj.xpos = x obj.left = obj.xpos obj.ypos = y obj.top = obj.ypos } function moveBy(obj,x,y) { obj.xpos += x obj.left = obj.xpos obj.ypos += y obj.top = obj.ypos }

function showObject(obj) { if (ns4) obj.visibility = "show" else if (ie4) obj.visibility = "visible" } function hideObject(obj) { if (ns4) obj.visibility = "hide" else if (ie4) obj.visibility = "hidden" } //--> </SCRIPT>

HTML:

<BODY bgColor=#ffffff onload=init()> Check Values: <A href="javascript:alert('X: ' + block.xpos)">xpos</A>, <A href="javascript:alert('Y: ' + block.ypos)">ypos</A> <BR> Visibility: <A href="javascript:showObject(block)">show</A>, <A href="javascript:hideObject(block)">hide</A> <BR> MoveTo: <A href="javascript:moveTo(block,100,100)">(100,100)</A>, <A href="javascript:moveTo(block,200,160)">(200,160)</A>, <A href="javascript:moveTo(block,300,240)">(300,240)</A> <BR> MoveBy: <A href="javascript:moveBy(block,10,0)">(10,0)</A>, <A href="javascript:moveBy(block,-10,0)">(-10,0)</A>, <A href="javascript:moveBy(block,0,10)">(0,10)</A>, <A href="javascript:moveBy(block,0,-10)">(0,-10)</A> <DIV id=blockDiv style="LEFT: 50px; WIDTH: 30px; CLIP: rect(0px 30px 30px 0px); xPOSITION: absolute; TOP: 100px; HEIGHT: 30px; BACKGROUND-COLOR: red; layer-background-color: red"></DIV> </BODY>

Результат:

Check Values: xpos, ypos Visibility: show, hide MoveTo: (100,80), (200,160), (300,240) MoveBy: (10,0), (-10,0), (0,10), (0,-10)

Выпуск 2 - Кросс-браузерный Java-Script

noreply@blogger.com (Natalia Macheda) — Sun, 17 Feb 2008 13:00:00 +0000

Кросс-браузерный JavaScript

JavaScript используется для доступа к CSS свойствам элементов страницы и изменеия их значений. Однако синтаксис, распознаваемый Netscape 4.0 и IE 4.0 отличаются. Дабы знать, где собака порылась где кроется это различие, я покажу вам простой способ создания кросс-браузерных скриптов, написанных на JavaScript, которые будут работать и в Netscape 4.0 и в IE 4.0.

Проверка кросс-браузерности

Прежде всего мы должны узнать, каким браузером пользователь просматривает страницы. Небольшой фрагмент кода будем стандартной проверкой браузера почти во всех примерах рассылки:
ns4 = (document.layers)? true:false ie4 = (document.all)? true:false

Объект document.layers специфичен для Netscape 4.0, а document.all, соответственно, -для IE 4.0. Таким образом, обычной проверкой существования объекта мы создаем переменные типа boolean: ns4 (для Netscape 4.0) and ie4 (для Internet Explorer 4.0). Значения этих переменных принимают зачения true или false в зависимости от используемого браузера. Тепер, как только вы захотите проверить браузер, вы вставляете в JavaScript проверку if (ns4) или if (ie4). Например:

function check() { if (ns4) { // do something in Netscape Navigator 4.0 } if (ie4) { // do something in Internet Explorer 4.0 } }

Использование JavaScript и CSS-P

Допустим, у нас имеется DIV таг следующего вида:

<DIV ID="blockDiv" style="position:absolute; left:50; top:100; width:30;"> <IMG SRC="block.gif" WIDTH=30 HEIGHT=30 BORDER=0> </DIV>
Не забываем, что это пример. А значит, blockDiv может быть переименован во что угодно и новый код будет работать по такому же принципу, что и приведенный здесь.

Для Netscape типичный способ доступа к CSS-P свойствам такой: document.blockDiv.propertyName или document.layer["blockDiv"].propertyName
Для Internet Explorer немного другой:
blockDiv.style.propertyName
или
document.all["blockDiv"].style.propertyName
где propertyName - одно из свойств перечисленных в прошлом выпуске: width, height и так далее.

Сейчас мы введём дополнительную переменную-указатель, которая позволит оптимизировать дальнейший код:

if (ns4) block = document.blockDiv if (ie4) block = blockDiv.style

Теперь переменная block может использоваться для доступа к свойствам DIV тага в обоих браузерах одинаково. Например, если вы хотите получить левую координату DIV тага, то вы можете просто написать block.left.

Пример полностью

Этот пример показывает как можно получать свойства left, top и visibility элемента, расположенного на страничке.

Скрипт:

<SCRIPT LANGUAGE="JavaScript">  </SCRIPT>

HTML:

<BODY onLoad="init()"> <A HREF="javascript:alert(block.left)">left</A> - <A HREF="javascript:alert(block.top)">top</A> - <A HREF="javascript:alert(block.visibility)">visibility</A> <DIV ID="blockDiv" style="position:absolute; left:50px; top:100px; width:30px; height:30px; clip:rect(0px 30px 30px 0px); background-color:red; layer-background-color:red;"> </DIV> </BODY>

Важно! Функция init() вызывается в BODY таге на событие onLoad="", то есть выполняется сразу после того, как загрузится вся страница, и DIV таг существует. Если вы попробуете выполнить этот скрипт перед полной загрузкой страницы, вы получите JavaScript ошибку вроде "block is not defined" (block не определён).

Различия

Если вы попробуете этот пример в Netscape и в IE, то получите два разных результата:

Свойство	Результат в Netscape	Результат в Internet Explorer
left	50	50px
top	100	100px
visibility	show	visible

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

По мотивам http://www.jalix.org/ressources/internet/dhtml/_dynduo/dynduo/en/javascript.html

Выпуск 1 (продолжение) - Dynamic Duo

noreply@blogger.com (Natalia Macheda) — Sun, 17 Feb 2008 12:51:00 +0000

The Dynamic Duo

The Dynamic Duo - это учебное пособие созданнае Дэном Штейнманом (Dan Steinman) и служащее одним из источников данной рассылки. Отличительная особенность этого пособия - ориентированность на кросс-браузерность (то есть применимость и для Netscape и для IE). Кроме того, пособие может быть стартовой точкой для новичков в JavaScript и CSS, поскольку, хоть и рассамтривает с самого начала достаточно продвинутые темы, делает это медленно и внимательно по отношению к базовым понятиям, необходимых для понимания функционирования DHTML. Концепции программирования представлены не сильно "заумно". Однако это же является и ограничением, поскольку превращает это пособие только в схему изучения. Поэтому я очень надеюсь на Вашу помощь, дорогие подписчики, в том смысле, что я жду от вас предложений и заявок на интересующие вас темы в веб-строительстве вообще и в клинтской интерактивности сайтов в частности.

Позиционирование CSS

CSS являются базисом для DHTML как в браузере от Netscape, так и в IE от Microsoft. CSS позволяет создавать набор "стилей", которые определяют расположение и параметры элементов на вашей странице. Позиционирование каскадных таблиц стилей (CSS Positioning, CSS-P) это расширение CSS, которое даёт разработчику доступ к расположению чего бы то ни было на экране с точностью до пикселя. Я не буду пересказывать документацию CSS и CSS-P. Я вам даю линк: W3C CSS Positioning.

Итак, приступим к DHTML!

DIV таги

CSS-P активно использует DIV (division-разделение), пустой не форматирующий таг. Если вы поместите фрагмент HTML документа или просто текст между <DIV> и </DIV>, то вы получите "DIV блок", "DIV елемент", "CSS-слой" или просто "слой". Таким образом, использование DIV тага ничем не отличается от большинства других HTML тагов:

<DIV> Это DIV таг </DIV>

Эффект от использования DIV тага такой же, как и в случае применения <P> и </P>. Но использование DIV вместе с CSS определяет, как содержимое между <DIV> и </DIV> будет размещёно на странице, какого будет цвета, размера и т.д. Для этого нужно присвоить DIV тагу аттрибут ID с "персональным" именем DIV'а:

<DIV ID="truck"> Это DIV таг c ID truck </DIV>

Значение аттрибута ID может состоять из букв (a-z, A-Z), цифр (0-9) и
символа подчёркивания (_) , но начинаться с буквы.

Подключение CSS

Подключение CSS в HTML может происходить двумя способами. Первый способ - объявление стиля тага непосредственно в самом таге:

<DIV ID="truck" style="здесь идёт определение стиля (см. ниже)"> Это стилизованый DIV таг </DIV>

Второй способ - это использование внешнего тага STYLE:

<STYLE TYPE="text/css">  </STYLE> <DIV ID="truck"> Это стилизованный DIV таг </DIV>

Заметьте, как ID может использоваться для применения стилей

Кросс-браузерные свойcтва СSS

Поскольку цель данной рассылки - создание сайтов при помощи DHTML так, что эти сайты отображаются правильно и функционируют в обоих браузерах, мы слегка ограничены в выборе средств предлагаемых CSS. Ниже я привожу (неполный) список свойств, которые имплементированы очень похоже на то, как это стандартизировано в W3C.

Название свойства	Значение свойства
position	Определяет как DIV так позиционируется: relative-относительно других HTML элементов, absolute - согласно определённо заданным координатам.
left (right)	Расстояние в пикселах от левого (правого) края окна браузера(абсолютное позиционирование) или относительного HTML элемента (относительное позиционирование)
top (bottom)	Расстояние в пикселах от верхнего (нижнего) края окна браузера(абсолютное позиционирование) или относительного HTML элемента(относительное позиционирование)
width	Ширина DIV тага. Любой HTML элемент или текст, вставленный в этот DIV, должен автоматически настраиваться по длине согласно этому значению. Важно! Если вы используете слои для создания анимации, обязательно установите ширину явно. Потому что в IE ширина автоматически равна 100%. Тогда во время движения анимации внизу окна возникает элемент прокрутки, который снижает скорость анимации.
height	Высота DIV тага. Это свойство используется очень редко, в основном для ограничивания размеров слоя.
clip	Определяет прямоугольник, ограничивающий уровень. Прямоугольник определяется через 4 координаты: clip:rect(top,right,bottom,left);
visibility	Определяет видимость DIV тага: visible - видимый, hidden - невидимый, inherited - наследует видимость элемента, внутри которого расположен (значение по умолчанию)
z-index	Порядок наложения слоёв друг на друга
background-color	Фоновый цвет DIV тага. В Netscape это свойство применимо только к тексту, но если вы хотите рисовать прямоугольники, вы должны также прописать layer-background-color с тем же значением
layer-background-color	Фоновый цвет DIV тага в Netscape
background-image	Фоновая картинка DIV тага для IE
layer-background-image	Фоновая картинка DIV тага для Netscape
color	Цвет текста внутри DIV тага

Синтаксис CSS отличается от синтаксиса HTML: свойство, двоеточие, значение свойства, точка с запятой. Не нужно устанавливать значения для всех свойств. Кроме того, единица меры по умолчанию - пихел (точка на экране), так что необязательно ставить "px" после left, top, width, хотя и рекомендуется. Наконец, пробелы между объявлениями свойств игнорируются: вы можете разместить их в одной строке, или в разных строках, и даже с
табуляцией между ними.

Если вставить эти строки

position:relative; clip:rect(0px 200px 100px 0px); left:50px; top:10px; width:200px; height:100px; color:yellow; background-color:#FF0000; layer-background-color:#FF0000;

вместо "здесь идёт определение стиля (см. ниже)" в примерах приведенных
выше, то получится вот такой красный прямоугольник с надписью:

Это стилизованный DIV таг

Абсолютное позиционирование

Фраза "Абсолютное позиционирование" была создана вот таким стилем:

position:absolute; left:500px; top:2900px; width:80px; color:teal;

По мотивам http://www.jalix.org/ressources/internet/dhtml/_dynduo/dynduo/en/stylesheets.html