Веб дизайн. Маленькие тонкости и хитрости создания красивых сайтов.
Для привлечения внимания пользователя к определённым элементам сайта веб дизайнерам не редко приходиться использовать маленькие хитрости и тонкости веб дизайна. При этом дизайн сайта в целом остаётся не тронутым.
Эти тонкости и хитрости веб дизайна, как правило, украшают веб страницы и придают сайту оживлённость.
Не обычный дизайн привлекает внимание пользователя, тем самым увеличивает время пребывания на сайте.
В итоге Вы получаете клик по нужной ссылке.
Мигающий текст
Для привлечения внимания к какому-то параграфу или тексту на веб-странице можно разместить мигающий текст. Для этого можно использовать Java скрипт:
<body bgcolor=white text=black leftMargin=0 topMargin=0 marginwidth=0 marginheight=0 onLoad="show5();">
<font>
<span id="liveclock"></span>
<script language="JavaScript">
<!--
var trigg="0"
function show5(){
if (!document.layers&&!document.all)
return
var Digital=new Date()
var seconds=Digital.getSeconds()
if (trigg=="0"){
trigg="1"
myclock="Текст мигает"
}
else { if (trigg=="1"){
trigg="0"
myclock=" "
}
}
if (document.layers){
document.layers.liveclock.document.write(myclock)
document.layers.liveclock.document.close()
}
else if (document.all)
liveclock.innerHTML=myclock
setTimeout("show5()",1000)
}
//-->
</script>
</font>
Полный текст - в файле blink.htm. Посмотреть, как это работает.
Если вы смотрите на своем компьютере, не забудьте разрешить выполнение Java скриптов.
"Объемный" заголовок без графики
Посмотрите на разные варианты одного и того же заголовка:
Верхний, псевдообъемный, заголовок выглядит предпочтительнее. При этом он выполнен наложением трех одинаковых текстов разного цвета со сдвигом в 1 pixel.
Для этого используем слои:
<DIV id="waterMark" style="position:absolute;top:6;left:6">
<p align=center><table bgcolor=red border=0 cellpadding=0 cellspacing=0 width=750>
<tr>
<td><font size=7 color=black face="Arial,Tahoma,Helvetica"><b>Английский язык</b></font></a></td>
</tr>
</table>
</DIV>
Здесь показан HTML код только для самого нижнего (первого) слоя (color=black ),
а position:absolute;top:6;left:6 задают его абсолютные координаты на экране (координаты простой таблицы из одной строки). В данном примере - отступ 6 pix по вертикали и горизонтали.
Полный текст HTML кода для псевдообъемного заголовка - смотрите в файле title.txt
Каждый их этих текстов можно оформить как ссылку - все они проиндексируются.
Тэг <DIV> позволяет выделить разделы в документе. <DIV> - блочный тэг, функционирующий подобно тэгу <P>. <DIV> может иметь атрибут align, который указывает отступ left, center или right. Каждый следующий раздел игнорирует, заданное для предыдущего раздела, значение align.
Синтаксис: <DIV align=отступ> Текст раздела </DIV>
Подсвечиваем фон текста
Если вы хотите привлечь внимание к какому-то фрагменту текста, когда его просматривает посетитель, используйте следующий скрипт
<script language="JavaScript">
<!--
function mOvr(src,clrOver){if (!src.contains(event.fromElement)){src.bgColor = clrOver;}} function mOut(src,clrIn){if (!src.contains(event.toElement)){src.style.cursor = "default";src.bgColor = clrIn;}}
//-->
</script>
Применение в строке таблицы:
<td onmouseover="mOvr(this,'a58439');" onmouseout="mOut(this,'');">
Когда вы таким образом доработаете строку таблицы, ее фон будет меняться, когда указатель мыши будет будет по ней перемещаться:
Демонстрационный HTML код - в файле bgcolor.htm
Подсвечиваем текст
Если совсем не много модернизировать код скрипта, то можно подсвечивать не фон текста, а менять цвет самого текста. Цвет текста меняется, когда пользователь проводит по тексту мышкой.
Для функции mOv нужно заменить src.bgColor на src.style.color, а вызов функции с параметрами выполнять в тэге <font>:
<font size=2 color=#e4db90 face="Arial,Tahoma,Helvetica" onmouseover="mOvr(this,'29D517');" onmouseout="mOut(this,'');">
Демонстрационный HTML код - в файле forecolor.htm
