Отправляет email-рассылки с помощью сервиса Sendsay

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

Рассылка закрыта

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

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Февраль 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Автор
Наталия

Статистика

779 подписчиков
-1 за неделю
←   Все выпуски   →

Keystroke. CSS для Zen Garden. Принципы хорошего дизайна.


Количество подписчиков: 26

Выпуск 6 - Keystroke. CSS для Zen Garden. Принципы хорошего дизайна.

Здравствуйте, дорогие читатели!

Реакция на клавиатуру

А вы знаете, что с помощью 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!!!), мы на каждое нажатие клавиши будем получать диалоговое окно с кодом и значением нажатой клавиши.

>>Прочитать целиком и обсудить>>

Стандартный CSS-файл для CSS Zen Garden

Напоминаю, что в прошлом выпуске мы рассмотрели 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-тэга, например) задаётся синтаксисом: элемент{параметр1: стиль1; параметр2: стиль2;...}

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

>>Прочитать целиком и обсудить>>

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

9 принципов хорошего дизайна

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

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

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

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

    Для достижения приоритетности, в вашем распорядении множество инструментов:
    • Расположение информационных блоков на странице непосредственным образов воздействует на порядок их просмотра.
    • Цвет: жирные и тонкие шрифты - простой способ указать пользователю, на что смотреть.
    • Контраст: контрастные вещи выделяются, а однотипные подразумевают вторичность.
    • Размер: большое имеет преимущество над маленьким (если только вы не решили сделать ВСЁ большим, а с помощью маленького - лишь подчёркивать контрастность).
    • Элементы дизайна: если на странице присутствует гигантская стрелка, указываюшая куда-то, угадайте, куда посмотрить пользователь.

>>Прочитать целиком и обсудить>>

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

С уважением,
Наталия Македа
natalia.macheda at gmail.com
2008-02-18
В избранное