| 19/10/2002 |
Еженедельная
электронная рассылка
|
Выпуск#
33
|
|
|
ПОЛЕЗНЫЕ СОВЕТЫ
ВЕБ-ДИЗАЙНЕРУ
|
Здравствуйте уважаемые!
Давненько я не писал вступлений, но всё же :-) Как вы уже успели заметить, трудолюбие,
усердие и настойчивость Ирэн (конечно без самой Ирэн тоже не обошлось:-D) принесли нам новый дизайн рассылки! Собственно об этом я и хотел вам поведать. Хотя...
нет, приоткрою ещё одну тайну. Наконец-то начались работы над созданием новой версии сайта рассылки, помимо архива вы там увидите ещё и... хех, так я вам и сказал:-)))
Пока не будем загадывать наперёд...
Ну хватит тут разглагольствовать... поехали!
|
|
| CSS |
|
Изменение границ объекта.
В сегодняшнем выпуске мы заканчиваем говорить о границах объектов и их возможных изменениях. Последние два стиля- это "ridge" - трехмерный гребень и "solid" - сплошная неприрывная. Соответственно первый стиль задает трехменрный гребень, а второй задает сплошную неприрывную линию вокруг обьекта.
В код страницы между тегами <head> и </head> нужно вставить
следующее:
<style type="text/css">
<!--
DIV {border-style: solid; border-color: #00ff00; border-width:1pt;}
-->
</style> |
ЛИБО
<style type="text/css">
<!--
DIV {border-style: ridge; border-color: #00ff00; border-width:1pt;}
-->
</style> |
Где border-style: есть свойство, задающее стиль рамки вокруг объекта, border-color: есть свойство, задающее цвет этой рамки, а
border-width : свойство , задающее толщену рамки. |
|
| ИНТЕРActive |
Комментарий к ссылке ( усовершенствованная версия ).
Сегодня мы представляем вам усовершенствованную версию скрипта с прошлого номера, предложенную нашим активным читателем Djadja Stjopa.
<HTML>
<HEAD>
<STYLE>
.tooltip{color:black;text-decoration:none;border-width:0px;cursor:help}
</STYLE>
<script>
function tooltip(mensaje, status)
{
if(document.forma.ett.checked)
{
var tooltip = open('','Tooltip','width=200,height=300,left=1px,top=1px')
{
if(status != 0)
{
if(tooltip != null)
tooltip_window = tooltip
tooltip.window.resizeTo(200, mensaje.length*2)
tooltip.document.open()
tooltip.document.write('<html><head><title>Имя окна</title></head><body bgcolor=#ffffff>')
tooltip.document.write(mensaje)
tooltip.document.write('</body></html>')
tooltip.document.close()
tooltip.focus()
}
else
{
tooltip_window.blur()
}
}
}
}
</script>
</HEAD>
<BODY onunload=tooltip_window.close()>
<form NAME="forma">
<p><input TYPE="checkbox" NAME="ett" CHECKED value="ON">
Вкл/выкл подсказки</p><br>
</form><br>
<a HREF="url" onMouseover="tooltip('<center><b>Ваш комментарий к ссылке</b></center>', 1)" onMouseout="tooltip('', 0)"><br>
Текст вашей ссылки</a>
<br><br>
<A HREF="#" class="tooltip" onMouseover="tooltip('Комментарии могут быть к любому HTML-объекту.<br><br>
В комментерии можно использовать<b>теги</b> <i>форматирования</i>.', 1)" onMouseout="tooltip('', 0)">
Ваш текст с комментарием.
</a>
<br><br>
<span>
Ваш текст без комментариев.
</span>
</BODY>
</HTML> |
Кстати, заголовок всплывающего окна тоже можно редактировать... И форматировать текст подсказки лучше не глобально, а в самой подсказке...
Автоматическая прокрутка текста.
<HTML>
<HEAD>
<script language="JavaScript1.1">
<!--
var y=300
var bgticker
function initObjects() {
if (document.all) {
bgticker = document.all.bgtick.style
bgticker.posLeft = 0
bgticker.posTop = 400
mainbody = document.all.mainbod.style
mainbody.posLeft = 0
mainbody.posTop = 0
}
if (document.layers) {
bgticker = document.bgtick
bgticker.left = 0
bgticker.top = 300
mainbody = document.mainbod
mainbody.left = 0
mainbody.top = 0
}
scroll()
}
function scroll() {
if (y > -200) {
y--
if (document.all) {bgticker.posTop = y; mainbody.posTop=0}
if (document.layers) {bgticker.top = y; mainbody.top=0}
}
else {
y=300
}
var timer = setTimeout('scroll()',20)
}
// - End of JavaScript - -->
</script>
<STYLE>
.text {
position: absolute;
font-family:Verdana;
color:0000ff;
font-size:60px;
}
</STYLE>
</HEAD>
<BODY onLoad="initObjects()">
<div id="bgtick" class="text">
Ваш текст.
</div>
<div id="mainbod" style="position:absolute; visibility:visible">
</div>
</BODY>
</HTML> |
Скорость прокрутки можно регулировать, поменяв значение числа в var timer = setTimeout('scroll()',20) (в примере выделенно жирным шрифтом) . Чем выше число, тем медленнее скорость.
Размер шрифта, шрифт и цвет шрифта текста можно менять, изменив значения
font-family:Verdana; - Гарнитура шрифта
color:0000ff;- Цвет шрифта
font-size:60px;- Размер шрифта
в установках стиля.
|
|
| #CoLors# |
Это примеры цветов и их шеснадцатеричный код.
| A |
#2F4F4F
|
A |
#00BFFF
|
А |
#F08080
|
A |
#E0FFFF
|
A |
#3CB371
|
A |
#F5DEB3
|
A |
#D8BFDB
|
A |
#4682B4
|
|
|
| Совет |
Для того, что бы рамка таблицы выводилась только слева и справа , примените атрибут "frame" к дескриптору <table> и установите ему значение "vsides".
Например: <table frame="vsides">
Примечание: при этом в теге <table> следует указать значение атрибута "border" большее "0" .
|
|
|
|
|