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


    Изменение границ объекта.
С этого выпуска мы начнем говорить о границах объектов и их возможных изменениях. Сегодня поговорим о применении стиля "groove". Этот стиль задает рамку вокруг обьекта в виде трехмерной бороздки.
В код страницы между тегами <head> и </head> нужно вставить следующее:

<style type="text/css">
<!--
DIV {border-style: groove; border-color: #ff0000; border-width: 2px;}
-->
</style>

Где border-style: есть свойство, задающее стиль рамки вокруг объекта, а border-color: есть свойство, задающее цвет этой рамки. Кроме того можно задавать и ширину границы , за что отвечает свойство border-width: .

   ИНТЕРActive

   
    Бегающий рисунок возле ссылки .

Скрипт состоит из двух частей, одну из которых следует поместить между тегами </HEAD> и <HEAD> , а вторую между тегами <BODY> и </BODY>

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
browser_name = navigator.appName; browser_version = parseFloat(navigator.appVersion);
if (browser_name == "Netscape" && browser_version >= 3.0) { roll = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 3.0) { roll = 'true'; }
else { roll = 'false'; }
function load(location){
return image;
}
if (roll == 'true'){
tr=new Image();
tr.src="ваша картинка";
}
function show(where){
if (roll == 'true'){
stored=where;
storedLocation=document.images[where].src;
document.images[where].src="ваша картинка";
}
}
function hide(){
if (roll == 'true') document.images[stored].src=storedLocation;
}
//--></SCRIPT>
</HEAD>
<BODY>
<IMG SRC="ваша картинка" NAME="имя картинки1" BORDER=0 HEIGHT=11 WIDTH=8>
<A HREF="URL" onMouseOver="show('имя картинки1')" onMouseOut="hide()">Текст вашей ссылки </A> <BR> <IMG SRC="ваша картинка" NAME="имя картинки2" BORDER=0 HEIGHT=11 WIDTH=8>
<A HREF="URL" onMouseOver="show('имя картинки2')" onMouseOut="hide()">Текст вашей ссылки </A> <BR> </BODY>
</HTML>

   Заметьте , что в первой части скрипта нужно указать имя нужного графического файла, который будет появляться около ссылки , поместив его вместо надписи "ваша картинка". А во второй части этого скрипта следует указать имя другого "невидимого" рисунка (в случае , если требуется чтобы картинка напротив ссылки появлялась только в случае наведения на нее мышки). Для этого достаточно нарисовать точку , форматом 1*1 пиксель и сохранить под желаемым именем ( желательно в формате .gif ). В случае если нужно чтобы рисунок заменялся при наведении на ссылку мышки, во второй части скрипта нужно указать имя графического файла , который должен появляться при загрузке страницы.
  Так же каждой новой ссылке во второй части скрипта в теге <img> при помощи атрибута "name" (как покзано в примере) необходимо присвоить имя для рисунка, которое следует указать и для параметра "OnMouseOver" после слова "show" в скобках .
Примечание: Присваивать имя необходимо каждый раз новое ( отличное от предыдущих ссылок ) , даже если картинка одна и таже .

   #CoLors#

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

A
#DEB887
A
#00FFFF
А
#006400
A
#FF8C00
A
#E9967A
A
#9400D3
A
#ADFF2F
A
#ADD8E6


   Совет
 
Для воспроизведения звукового файла при загрузке страницы используется
дискриптор <bgsound>. Например : <bgsound src= "имя файла">
   Вопрос\Ответ
Вопрос:
Как сделать так, чтобы все четыре границы таблицы были разного цвета?
Ответ:
Для этого существуют такие свойства CSS как border-top-color; border-left-color; border-right-color; border-bottom-color; которые позволяют задавать разные цвета для каждой стороны объекта. Т.е. , например :
В код страницы между тегами <head> и </head> нужно вставить:
<style type="text/css">
<!--
#table {border-top-color: #ff0000; border-left-color: #0000ff; border-right-color: #00ff00; border-bottom-color: #ffff00; border: 1px solid; }
-->
</style>

А между тегами <body> и </body> вставьте:
<table id="table">
<tr><td>
Содержимое вашей таблицы
</td></tr>
</table>

Мы задали цвета каждой стороне вашей таблицы. Теперь поясним:
1. Мы задали таблице идентификатор ( #table ) с помощью CSS . Это значит, что стиль описанный в CSS будет применяться ко всем объектам с этим идентификатором, в данном случае мы присвоили его таблице при помощи атрибута "id".
2. Далее при помощи все тех же свойств CSS "border: 1px solid" мы задали ширину рамки и ее стиль. Где "1px" есть ширина в пикселях, а "solid" стиль рамки , означающий сплошную линию .

Вопрос:
Подскажите как можно сделать поля для ввода в формах, одномерными и одного цвета?
Ответ:
Тут нужно встроить стиль в форму. Т.е. в нужный тег (там гденужно поменять
параметры) нужно вставить style="border: 1px solid #ffffff" . Например:
<TEXTAREA rows="10" cols="50" style="background-color=#ff0066; border: 1px
solid #ffffff"></TEXTAREA>
border: 1px solid #ffffff"- это параметры рамки, толщена, стиль и цвет.
background-color=#ff0066; - задает цвет фона формы. 
Эдмон и Ирэн
Напоминаем, что в скриптах могут быть ошибки, о которых мы бы хотели, чтобы вы сообщали.
Архив рассылки вы можете посмотреть на http://friends.pomorsu.ru/~admont/
Наш e-mail: web-design@hotmail.ru