31/01/2003
Еженедельная электронная рассылка
Выпуск# 35
ПОЛЕЗНЫЕ СОВЕТЫ
ВЕБ-ДИЗАЙНЕРУ


    CSS


    Тень (встраивание стиля).
Сегодня поговорим о встраивании стиля и с помощью этого приема применим фильтр "эфект тени". Встраивание стиля в документ подразумевает применение листов каскадных стилей непосредственно в теле документа, т.е. между тегами <body> и </body>. Применить таким образом стиль можно практически к любому объекту: таблице, форме, параграфу и т.д. Для примера применим фильтр тени для текста. Для этого поместим текст в таблицу и встроим в нее стиль.
В код страницы между тегами <body> и </body> нужно вставить следующее:

<table border=0 style="filter:DropShadow(color=gray, offx=2, offy=2, positive=1)">
<tr><td>
<p>Ваш текст</p>
</td></tr>
</table>

Где offx- параметр горизонтального смещения,
а offy- параметр вертикального смещения;
color- цвет тени;
positive- параметр, который указывает площадь применения тени.
   ИНТЕРActive

   
    Плавающее меню.


Забавное меню, перемещающееся по вертикали то вверх, то вниз. В данном скрипте можно изменять по вкусу внешний вид меню, изменяя таблицу, которую как и сам скрипт поместим между тегами <HEAD> и </HEAD>. Можно так же поменять скорость движения меню, изменив цифру в параметре "var delay_time=30;" во второй части скрипта (выделено жирным шрифтом).

<HTML>
<HEAD>
<TITLE>
</TITLE>
<div id="point1" STYLE="position:absolute;visibility:visible;">
<table width="100" border="1" bordercolor="#BBBBBB" cellspacing="0" cellpadding="4">
<tr>
<td align=center>
<font size="2"><a href="somepage.html">Link One</a></font>
</td>
</tr>
<tr>
<td align=center>
<font size="2"><a href="somepage.html">Link Two</a></font>
</td>
</tr>
<tr>
<td align=center>
<font size="2"><a href="somepage.html">Link Three</a></font>
</td>
</tr>
</table>

</div>
<script LANGUAGE="JavaScript1.2">
var XX=20; // X position of the scrolling objects
var xstep=1;
var delay_time=30;
//Begin of the unchangable area, please do not modify this area
var YY=0;
var ch=0;
var oh=0;
var yon=0;
var ns4=document.layers?1:0
var ie=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0
if(ie){
YY=document.body.clientHeight;
point1.style.top=YY;
}
else if (ns4){
YY=window.innerHeight;
document.point1.pageY=YY;
document.point1.visibility="hidden";
}
else if (ns6){
YY=window.innerHeight
document.getElementById('point1').style.top=YY
}

function reloc1()
{
if(yon==0){YY=YY-xstep;}
else{YY=YY+xstep;}
if (ie){
ch=document.body.clientHeight;
oh=point1.offsetHeight;
}
else if (ns4){
ch=window.innerHeight;
oh=document.point1.clip.height;
}
else if (ns6){
ch=window.innerHeight
oh=document.getElementById("point1").offsetHeight
}
if(YY<0){yon=1;YY=0;}
if(YY>=(ch-oh)){yon=0;YY=(ch-oh);}
if(ie){
point1.style.left=XX;
point1.style.top=YY+document.body.scrollTop;
}
else if (ns4){
document.point1.pageX=XX;
document.point1.pageY=YY+window.pageYOffset;
}
else if (ns6){
document.getElementById("point1").style.left=XX
document.getElementById("point1").style.top=YY+window.pageYOffset
}
}
function onad()
{
if(ns4)
document.point1.visibility="visible";
loopfunc();
}
function loopfunc()
{
reloc1();
setTimeout('loopfunc()',delay_time);
}
if (ie||ns4||ns6)
window.onload=onad
</script>
</HEAD>
<BODY>
</BODY>
</HTML>

   #CoLors#

Это примеры цветов и их шеснадцатеричный код.

A
#696969
A
#228B22
А
#800000
A
#00FA9A
A
#FFE4E1
A
#4169E1
A
#A0522D
A
#FF6347


   Совет
Определяем заголовок таблицы.
Тег <caption> позволяет задать заголовок таблицы и имее следующие атрибуты:
topпомещает заголовок над таблицей
bottom-помещает заголовок под таблицей
left-помещает заголовок слева от таблицы
right-помещает заголовок справа от таблицы. Например: <caption align="top">текст заголовка</caption>
Примечание: Элемент Caption должен размещаться непосредственно после открывающего тега <table>

Эдмон и Ирэн
Напоминаем, что в скриптах могут быть ошибки, о которых мы бы хотели, чтобы вы сообщали.
Архив рассылки вы можете посмотреть на http://friends.pomorsu.ru/~admont/
Наш e-mail: web-design@hotmail.ru