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

Рецепты HTML

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

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

←   Февраль 2005   →
 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
Автор
Влад Мержевич

Статистика

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

Рецепты HTML # 148


Информационный Канал Subscribe.Ru
htmlbook.ru Для тех, кто делает сайты Помощь по сайту
СтатьиКнигиФорум

Добрый день.

Открыл для себя две новые программы. Первая называется NVU и предназначена для создания и редактирования веб-страниц. В отличие от существующих редакторов она совершенно бесплатна и доступна для скачивания на сайте http://nvu.mozilla.ru.

Преимущества:

  • содержит визуальный редактор, удобный редактор кода, а также просмотр результата;
  • программа бесплатна для использования;
  • позволяет управлять сайтом целиком;
  • open source, это означает, что программа постоянно улучшается и дорабатывается;
  • достаточно удобна для работы.

Недостаток один, но существенный – программа еще сырая и даже не дошла до версии 1.0. Однако посмотреть ее в деле рекомендуется, возможно, именно ей придется пользоваться в недалеком будущем.

Вторая программа, ZBrush уже не новая, но я только недавно познакомился с версией 2.0. По сравнению с предыдущей версией 1.55 полностью переделан интерфейс и включены некоторые дополнительные возможности.

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

Предугадывая вопрос, где взять программу, зайдите на сайт www.zbrush.com, на нем доступна для скачивания пробная версия 1.55. Также доступны различные мануалы, тьюторы, сэмплы и другие непонятные слова облегчающие жизнь.

На сайте продолжается работа по обновлению уже существующих материалов. Так подверглись ревизии краткие справочники по CSS и HTML. Теперь в них содержится список параметров стилей и тегов с указанием браузера, где они работают. Для любителей браузеров Mozilla и Firefox указаний нет, но примите во внимание, что они построены на том же ядре Gecko, что и Netscape 6. Поэтому если вы встречаете упоминание NC6, значит и Firefox корректно понимает код.

Краткий справочник по CSS (htmlbook.ru/content/128.html)
Краткий справочник по тегам (htmlbook.ru/content/129.html)

Основное изменение коснулось раздела Веб-цвета (htmlbook.ru/content/124.html), теперь все они представлены в наглядной и красивой форме. Кроме того, по ходу поменялись документы раздела «Инструментарий», где также требовался выбор цвета. Реализацию можно посмотреть на примере создания одинарной рамки (htmlbook.ru/content/130.html). Чтобы заметить эффект, нажмите на кнопку Выбор цвета.

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

Вначале рассмотрим общий пример, а затем разберем его на составляющие (пример 1).

Пример 1. Код для создания таблицы с веб-цветами
<html>
<head>
<style type="text/css">

/* Стиль таблицы с цветом */
.colorTable {
width: 100%

}

/* Стиль ячеек таблицы с цветом */
.colorTable TD {
border: 1px solid black;
width: 13%
}

 

/* Стиль для текстового обозначения выбранного цвета */
#infocolor {
color: red;
margin-left: 10%;
padding: 5px
}

 

/* Стиль выделения цвета в таблице при наведении на него курсора мыши */
.colorTable TD.selcolor {
border: 1px solid white
}

</style>
</head>

<body>
<div id=infocolor>&nbsp; </div>

<script language="JavaScript">

color = new Array ("00", "33", "66", "99", "CC", "FF");
r = 0;

document.write("<table width=80% align=center cellspacing=0 cellpadding=0 style="\"border-collapse:" collapse\">");

for (i=0;i<2;i++) {
document.write ("<tr>");
for (j=0;j<3;j++) {
document.write ("<td>");

colorTable(r++);

document.write ("</td>");
}
document.write ("</tr>");
}

document.write("</table>");


// Выводим цветовую таблицу

function colorTable(r) {

document.write("<table cellspacing=0 class=colorTable>");
for (i2=0;i2<6;i2++) {
document.write ("<tr>");
for (j2=0;j2<6;j2++) {
bg = "#" + color[r] + color[j2] + color[i2];

document.write ("<td bgcolor=" + bg + " onMouseOver=\"infoColor('" + bg + "'); this.className = 'selcolor'\" onMouseOut=\"infoColor(0); this.className=''\">&nbsp;</td>")
}
document.write ("</tr>");
}

document.write("</table>");
}

 

// Функция для вывода названия цвета

function infoColor(newcolor) {

if (newcolor == 0) document.getElementById("infocolor").innerHTML = "&nbsp;";
else document.getElementById("infocolor").innerHTML = "Цвет: " + newcolor;

}

</script>
</body>
</html>

Общая цветовая таблица состоит из 6 ячеек, в каждую из них выводится отдельная таблица 6 на 6 ячеек. Таким образом, и получаем 216 веб-цветов (6 х 6 х 6). Внешняя таблица имеет невидимую границу и нужна как модульная сетка, чтобы аккуратно разместить цветовые блоки. Создание таблицы происходит через JavaScript как описано в примере 2.

Пример 2. Создание таблицы с помощью JavaScript
document.write("<table width=80% align=center cellspacing=0 cellpadding=0 style="\"border-collapse:" collapse\">");
for (i=0;i<2;i++) {
document.write ("<tr>");
for (j=0;j<3;j++) {
document.write ("<td>");
colorTable(r++);
document.write ("</td>");
}
document.write ("</tr>");
}
document.write("</table>");

Ширина таблицы и другие параметры задаются в теге TABLE, там же указываем атрибут border-collapse со значением collapse, он требуется, чтобы границы между ячейками получились одинаковой толщины в местах соприкосновения таблиц.

С помощью вложенного цикла создается таблица размером 3 х 2 ячеек. Содержимое ячеек формируется функцией colorTable.

Конечно, в данном случае объем таблицы не очень большой и можно обойтись вообще без циклов путем простого набора кода HTML. Но в некоторых случаях использование кода HTML достаточно удобно. Например, в функции colorTable приходится выводить большое число однотипных данных и применение JavaScript позволяет сократить объем кода и легко манипулировать им (пример 3).

Пример 3. Вывод цветовой таблицы
function colorTable(r) {

document.write("<table cellspacing=0 class=colorTable>");
for (i2=0;i2<6;i2++) {
document.write ("<tr>");
for (j2=0;j2<6;j2++) {
bg = "#" + color[r] + color[j2] + color[i2];

document.write ("<td bgcolor=" + bg + " onMouseOver=\"infoColor('" + bg + "'); this.className = 'selcolor'\" onMouseOut=\"infoColor(0); this.className=''\">&nbsp;</td>")
}
document.write ("</tr>");
}

document.write("</table>");
}

Веб-цвета получаются комбинацией красной, зеленой и синей компоненты с шестнадцатеричными значениями 00, 33, 66, 99, CC, FF, которые перечислены в массиве color. В функции «фиксируем» красный цвет, а значения синего и зеленого цвета меняем в цикле. Остается только сложить полученные значения, добавить вначале символ решетки и добавить результат (переменная bg) к параметру bgcolor тега TD.

Обратите внимание, что в цикле используются переменные i2 и j2. Дело в том, что переменные i и j являются глобальными и применять их нельзя, иначе возникнет ошибка.

Чтобы выводить значение цвета используется событие onMouseOver, которое возникает при наведении курсора мыши на ячейку таблицы. В этом случае мы вызываем функцию infoColor и меняем стиль ячейки на selcolor. При этом вокруг выбранного цвета отображается белая рамка. Наоборот, когда курсор уводится с ячейки, наступает событие onMouseOut и стиль ячейки меняется на первоначальный, кроме того, скрывается информация о цвете (пример 4).

Пример 4. Вывод информации о текущем цвете
function infoColor(newcolor) {

if (newcolor == 0) document.getElementById("infocolor").innerHTML = "&nbsp;";
else document.getElementById("infocolor").innerHTML = "Цвет: " + newcolor;

}

Вывод текста, содержащего именование цвета, происходит через метод innerHTML. Чтобы он работал, вначале следует создать слой с идентификатором infocolor в желаемом месте. Цвет текста и другие параметры управляются с помощью стилей.


Copyright © 2002 - 2004 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru
Материалы сайта охраняются законом об авторском праве. Ни одну статью нельзя воспроизводить или использовать в какой бы то ни было форме, для каких бы то ни было целей или какими бы то ни было средствами без письменного разрешения автора.

http://subscribe.ru/
http://subscribe.ru/feedback/		 Подписан адрес:
Код этой рассылки: inet.webbuild.htmlbook		 Отписаться
В избранное