| 16/01/2004 |
|
Выпуск#41 |
|
ПОЛЕЗНЫЕ
СОВЕТЫ ВЕБ-ДИЗАЙНЕРУ |
|
Здравствуйте Дорогие Подписчики!
Прежде всего хочу поздравить всех с прошедшими праздниками и извиниться за задержку очередного выпуска рассылки.
Также хочу сообщить, что новый вариант сайта скоро будет готов ,старая версия сайта временно не доступна.
Приношу свои извинения за неудобства.
|
| ......................................................................................................................
|
| CSS |
|
Фильтр перехода.
Фильтр перехода создает различные эффекты при загрузке страницы. Сегодня поговорим о трех видах эффектов перехода.
Между тегами <head> и </head> нужно вставить:
| <META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=6.000,Transition=1)">
|
|
Transition - параметр эффекта
Duration - скорость загрузки. Чем больше значение, тем ниже скорость, чем меньше значение, тем выше скорость загрузки.
В нашем случае Transition=1 и означает, что страница будет "рисоваться" из поля. Числа 2, 3 означают, что страница будет загружаться в круг и из круга , соответственно.
| |
| ......................................................................................................................
|
| ИНТЕРActive |
Навигация.
Этот небольшой скрипт разместить на вашей странице симпатичное, выпадающее меню.
Меню можно подстроить под дизайн своей страницы, изменив параметры таблицы с сылками.
<html>
<head>
</head>
<body>
<SCRIPT language=JavaScript>
var eypos=-200, ejump=-4;
var typos=-260, tjump=-4;
var delay=2;
function do_menue()
{
if(typos>-260)
{
tjump=-4;
if(typos>=130)
head_fahren();
}
ejump=-ejump;
if(eypos<=-200 || eypos>=20)
menue_fahren();
}
function menue_fahren()
{
if(document.layers) document.menue.top=eypos; else document.all.menue.style.top=eypos;
eypos+=ejump;
if(eypos>-200 && eypos<20)
setTimeout("menue_fahren()", delay);
}
function do_head()
{
if(eypos>-200)
{
ejump=-4;
if(eypos>=20)
menue_fahren();
}
tjump=-tjump;
if(typos<=-260 || typos>=130)
head_fahren();
}
function head_fahren()
{
if(document.layers) document.head.top=typos; else document.all.head.style.top=typos;
typos+=tjump;
if(typos>-260 && typos<130)
setTimeout("head_fahren()", delay);
}
</SCRIPT>
<DIV
style="Z-INDEX: 2; LEFT: 337px; WIDTH: 633px; POSITION: absolute; TOP: 66px; HEIGHT: 58px">
<TABLE border=0>
<TBODY>
<TR>
<TD align=middle>Навигация по сайту.</TD></TR>
<TR><BIG>
<TD align=middle><A href="javascript:do_menue()">Нажми
здесь!</A></BIG></TD></TR></TBODY></TABLE></DIV>
<DIV id=menue style="Z-INDEX: 2; LEFT: 100px; POSITION: absolute; TOP: -200px">
<TABLE cellSpacing=0 cols=3 cellPadding=0 width=450 border=0>
<TBODY>
<TR>
<TD><A onmouseover="window.status='Link1' ;return true"
href=url>[Link1]</A><BR><A
onmouseover="window.status='Link 2' ;return true"
href=url>[Link 2]</A><BR><A
onmouseover="window.status='Link 3' ;return true"
href=url>[Link 3]</A><BR><A
onmouseover="window.status='Link 4' ;return true"
href=url>[Link4]</A><BR>
</TD></TR></TBODY></TABLE></DIV></BIG></BODY></HTML>
|
Скорость перемещения ссылок регулируется параметрами ejump=-4; и tjump=-4; (выделено жирным), путем изменения цифры.
|
|
| ......................................................................................................................
|
| #CoLors# |
Это примеры цветов и их шеснадцатеричный
код.
| A |
#6495ED |
A |
#9932CC |
А |
#696969 |
A |
#DAA520 |
A |
#CD5C5C |
A |
#F0E68C |
A |
#ADD8E6 |
A |
#FFB6C1
|
| |
| ......................................................................................................................
|
| Совет |
Вот такой вот интересный скрипт прислал нам читатель нашей рассылки Denis.
<html>
<head>
<title>This sample created by Denis Bolotnov (webdenis@inbox.ru): WE ARE FOR OPEN SOURCE!</title>
</head>
<body>
<script language="JavaScript">
function SetColor(currColor){
var clr = document.all["ColorField"].value;
if(currColor != ""){
clr = currColor;
document.all["ColorField"].value = clr;
}
if((clr.length == 6)||(clr.length == 7)){
document.all["ShowOfColor"].style.backgroundColor = clr;
}else{
alert('It\'s not a standart color format\nRight format(for example):\n#00ff00');
}
}
function GeneratePallete(){
var ColorTable = Array(
'#ffff99','#ffff00','#ffcc00','#ff9900','#ff6600','#ff3300','#ff0000','',
'#00ffff','#00ccff','#0099ff','#0066ff','#0033ff','#0000ff','',
'#00ffcc','#00ff99','#00ff66','#00ff33','#00ff00','',
'#ffcccc','#ff99cc','#ff66cc','#ff33cc','',
'#cccccc','#999999','#666666','',
'#3366cc','#3333cc','',
'#336699');
var CurrTableClr = "";
for(i=0; i<=ColorTable.length; i++){
CurrTableClr = ColorTable[i];
if(CurrTableClr != ""){
document.all["ColorPallete"].innerHTML += "style='background-color:"+CurrTableClr+";width=17;height=10;cursor:hand'
onclick=SetColor('"+CurrTableClr+"')>";
}else{
document.all["ColorPallete"].innerHTML += "
";
}
}
}
</script>
<a style="background-color:#00ff00;width:100px;height:100px" name="ShowOfColor"></a><br>
<font face="arial">Choose any color by mouse (single left click):</font>
<p id="ColorPallete"></p>
<script>GeneratePallete();</script>
<font face="arial">or fill in follow field by hands:</font><br>
<input type="text" name="ColorField"><br>
<input type="button" value="Change Color" onclick="SetColor('')">
</body>
</html>
| |
|
|
|