Джейсон Кренфорд Тиге. dhtml и css. Быстрый старт

DHTML И CSS

БЫСТРЫЙ СТАРТ

Джейсон Кренфорд Тиге

Aristokl

Typewritten Text

ЧАСТЬ II

1313131313основы динамическихтехнологий

Почти весь DHTML основан на несколь-ких приемах, с помощью которых можноскрывать и снова отображать объекты,перемещать и изменять их. В большин-стве случаев эти технологии основаны наизменении свойств позиционирования вCSS, то есть единственных общих для всехбраузеров CSS-свойств, которые разреша-ется менять. В Netscape 4 невозможно по-лучить доступ к каким-либо другим CSS-свойствам.В Netscape 6 и Internet Explorer 4 допусти-мо менять любые CSS-свойства (см. главу15), но из-за Netscape 4 в DHTML, общемдля браузеров, появляются ограничения.Однако, возможно, с выходом Netscape 6предыдущая версия, Netscape 4, уйдет впрошлое.

Отображение и сокрытиеобъектовС помощью свойств, определяющих види-мость элемента, можно указать, будет онвиден на экране (visible) или нет(hidden) – см. раздел «Определение види-мости элемента» в главе 9. С помощьюJavaScript определяется не только текущеесостояние видимости (см. раздел«Cостояние видимости объекта» в главе12), но и предыдущее и последующее (ли-стинг 13.1, рис. 13.1 и 13.2)

237

Изменение состояния видимостиобъекта

1. <script scr="findDOM.js"></script>В любую функцию JavaScript, котораянепосредственно обращается к объек-ту на экране, следует включить кодfindDOM. Для этого добавьте внешнийтекстовый файл и затем импортируй-те его на ту страницу, где он будетприменяться (см. раздел «Использова-ние общей для браузеров DOM» в главе11).

2. f u n c t i o nsetVisibility(objectID,state) {...}В сценарий JavaScript добавьте функ-цию setVisibility(). При обращениик объекту она задействует его ID, кото-рый передается в функцию как пере-менная objectID. Таким образом со-здается DOM. Затем функция приме-няет этот ID для доступа к текущемусвойству видимости, установленномудля этого объекта, и изменяет его в за-висимости от того состояния, котороевы определили при запуске функциииз обработчика событий (см. шаг 6).

3. function toggleVisibility(objectID){...}

В сценарий JavaScript добавьте функ-цию toggleVisibility(). При обраще-нии к объекту она использует его ID,

Листинг 13.1. Функции setVisibility()и toggleVisibility() изменяют состояниевидимости отдельного объекта в окне браузера

<html><head>

<script scr="findDOM.js"></script><script>

function setVisibility(objectID,state) {var dom = findDOM(objectID,1);dom.visibility = state;

}

function toggleVisibility(objectID) {var dom = findDOM(objectID,1);state = dom.visibility;if (state == 'hidden' || state ==->'hide')

dom.visibility = 'visible';else {

if (state == 'visible' || state ==->'show')

dom.visibility = 'hidden';else dom.visibility = 'visible';}

}</script><style type="text/css">

#cheshireCat {position: absolute;top: 70px;left: 0pxvisibility: visible; }</style>

</head><body onLoad="setVisibility->('cheshireCat','visible');">

<a href="javascript:void('')"->onClick="setVisibility->('cheshirecat', 'hidden');">

Hide the Cat</a> |<a href="javascript:void('')"->onClick="setVisibility->('cheshirecat', 'visible');">

Show the Cat</a> |<a href="javascript:void('')"->onClick="toggleVisibility->('cheshirecat');">

Листинг 13.1 (окончание)

Change the Cat's Visibility?</a><div id="cheshireCat">

<img scr="alice24.gif" width="640"->height="435" border="0">

</div></body></html>

Отображение и сокрытие объектов

Основы динамических технологий238

который передается в функцию какпеременная objectID. Таким образомсоздается DOM. Затем функция прове-ряет текущее состояние видимости иизменяет его на противоположное.

4. #cheshireCat {...}С помощью значений position, typeи visibility установите ID объектов.

5. onLoad="..."Чтобы инициализировать видимостьнужных объектов, используйте в тэге<body> функцию setVisibility(). Что-бы функция toggleVisibility() рабо-тала соответствующим образом, нуж-но установить начальную видимость.

6. onClick="setVisibility ('object1')"Чтобы запустить функцию, созданнуюна шаге 2, добавьте обработчик собы-тий и передайте ему ID объекта, к ко-торому хотите обратиться.

7. onClick="setVisibility->('cheshireCat','hidden');"

Чтобы запустить функцию, созданнуюна шаге 2, добавьте обработчик собы-тий и передайте ему ID объекта, к ко-торому вы хотите обратиться, и состо-яние видимости, которое требуетсяприсвоить объекту.

8. <div id="cheshireCat">...</div>Установите CSS-слои.

Заметьте, что в качестве возможных значе-ний состояния определяются не только зна-чения visible или hidden, но и значенияshow или hide. Netscape 4 принимает стан-дартные значения visible или hidden, ноон записывает их как show или hide,

Рис. 13.1. До того момента, как посетитель нажметна ссылку, кот остается на экране

Рис. 13.2. После того как посетитель нажална ссылку, Чеширский кот исчез

и такими они остаются на выходе.

Возможность установки состояния види-мость важна для создания выпадающихменю (см. главу 24), показа слайдов (см.главу 25) и для уменьшения четкости HTML-текста (см. главу 26).

239

Перемещение объектовОбъект можно располагать на экране, ис-пользуя CSS (см. раздел «Определениеположения по отношению к левому вер-хнему углу» в главе 8), затем с помощьюJavaScript легко выяснить положениеобъекта (см. раздел «Левая и верхняя по-зиции объекта» в главе 12). Но чтобыстраница стала действительно динами-ческой, нужно также уметь перемещатьобъекты по экрану, меняя их положение(листинг 13.2 и рис. 13.3).

Изменение положения объекта

1. <script scr="findDOM.js"></script>В любую функцию JavaScript, котораянепосредственно обращается к объек-ту на экране, необходимо включитькод findDOM. Для этого добавьте внеш-ний текстовый файл и затем импор-тируйте его на ту страницу, где он бу-дет использоваться.

2. function moveObjectTo(objectID,x,y){...}

В сценарий JavaScript добавьте функ-цию moveObjectTo(). При обращениик объекту она применяет его ID, кото-рый передается в функцию как пере-менная objectID. Таким образом со-здается DOM. Затем функция исполь-зует значения x и y для того, чтобы из-менить свойства left и top.

3. #madHatter {...}С помощью значений position, top иleft установите ID объектов.

Перемещение объектов

Листинг 13.2. Функция moveObject() меняетположение отдельного объекта в окне браузера

<html><head>


function moveObjectTo(objectID,x,y) {var domStyle = findDOM(objectID,1);->domStyle.left = x; domStyle.top = y;


#madHatter {position: absolute;top: 30px;left: 30px; }</style>

</head><body>

<a href="javascript:void('')"->onMouseOver="moveObjectTo->('madHatter',200,200);"

onMouseOut="moveObjectTo->('madHatter',30,30);">->I want a fresh cup...</a><div id="madHatter">




4. onMouseOver="moveObjectTo('madHatter',200,200);"

Чтобы запустить функцию, созданнуюна шаге 2, добавьте обработчик собы-тий и передайте ему ID объекта, к ко-торому вы хотите обратиться, и его но-вые координаты.

5. <div id="madHatter">...</div>Установите CSS-слои.

Заметьте, что для определения левогои верхнего положения объекта использова-лись свойства top и left. Однако в каждомбраузере есть свое ключевое слово, кото-рое служит для нахождения значений этихсвойств. В Netscape 4 – top и left,в Netscape 6 – offsetLeft и offsetTop,в Internet Explorer 4/5 – pixelTop и pixel-Left. Значения свойств top и left можноустанавливать и с помощью указанныхключевых свойств, но лучше придержи-ваться обычных top и left.

Перемещение объектов подробно обсужда-ется в части 4 этой книги, где будет пока-зано, как создавать всплывающие меню(см. главу 24), собственные полосы про-крутки (см. главу 25) и плавающие объек-ты (см. главу 26).

Рис. 13.3. Болванщик ищет новую чашку чая

241

Перемещение объектана заданное расстояниеУметь перемещать объект из одной точкив другую весьма полезно, но необходимоточно знать место, куда требуется переме-стить объект. Часто же нужно просто пе-редвинуть объект на заданное расстояние(листинг 13.3 и рис. 13.4).

Перемещение объекта

1. <script scr="findDOM.js"></script>В любую функцию JavaScript, котораянепосредственно обращается к объектуна экране, необходимо включить кодfindDOM. Для этого добавьте внешнийтекстовый файл и затем импортируй-те его на ту страницу, где он будет ис-пользоваться.

2. function moveObjectBy->(objectID,deltaX,deltaY) {...}В сценарий JavaScript добавьте функ-цию moveObjectBy(). При обращениик объекту она применяет его ID, кото-рый передается в функцию как пере-менная objectID. Таким образом со-здается DOM. Затем функция заменя-ет значения свойств left и top на зна-чения deltaX и deltaY. В InternetExplorer устанавливаются значенияp i x e l T o pи pixelLeft. В Netscape 6 задаются по-ложения top и left, но их нужно до-бавить и в текущее положение объек-та. В Netscape 4 положения не опреде-ляются непосредственно, а использу-ется встроенная функция moveBy().

3. #madHatter {...}

Перемещение объекта на заданное расстояние

Листинг 13.3. Функция moveObjectBy() меняетположение отдельного объекта в окне браузера наопределенную величину каждый раз, когдауказатель мыши наводится на ссылку

<html><head>


function moveObjectBy(objectID,deltaX,->deltaY) {

var domStyle = findDOM(objectID,1);var dom = findDOM(objectID,0);if (domStyle.pixelLeft) {

domStyle.pixelLeft += delataX;domStyle.pixelTop += delataY;

}else {

if (dom.offsetLeft !=null) {var plusLeft = dom.offsetLeft;var plusTop = dom.offsetTop;domStyle.left=deltaX + plusLeft;domStyle.top=deltaY + plusTop;

}else dom.moveBy(deltaX,deltaY);}


#madHatter {position: absolute;top: 30px;left: 30px; }</style>

</head><body>

<a href="javascript:void('')"->onMouseOver="moveObjectBy->('madHatter',75,100);"->onMouseOut="moveObjectBy->('madHatter',-25,-55);"> I want a->fresh cup... </a><div id="madHatter">




С помощью значений position, top иleft установите ID объектов.

4. onMouseOver="moveObjectBy->('madHatter',75,100);"

Чтобы запустить функцию, созданнуюна шаге 2, добавьте обработчик собы-тий и передайте ему ID объекта, к ко-торому вы хотите обратиться, и коли-чество пикселов, на которое нужно пе-реместить объект. С помощью поло-жительных значений объектпередвигается вниз и вправо, а с помо-щью отрицательных – вверх и влево.


В Netscape 6 лучше не добавлять прираще-ние непосредственно к свойствам leftи top. В Internet Explorer 4/5/6 для добавле-ния значений delta к текущей позицииобъекта можно использовать +=, в Net-scape 4 – функцию moveBy(), но в Netscape6 придется вычислять текущее положениеобъекта и добавлять значения delta, а за-тем присваивать полученные значениясвойствам left и top.

Для установления позиции элемента прощеиспользовать свойства top и left, но есливы хотите переместить объект на опре-деленное расстояние, придется использо-вать pixelLeft и pixelTop. Иначе InternetExplorer перепутает эти значения, и объект

Рис. 13.4. Болванщик передвигается с местана место в поисках новой чашки чая

243

будет выступать за границы экрана.

Перемещение объектов в 3DВсе позиционированные элементы мож-но разместить в порядке стека (см. раздел«Элементы в порядке стека (3D-позицио-нирование)» в главе 8), а чтобы выяснитьпорядок элементов и затем менять его,используется JavaScript в z-индексе (см.раздел «Z-индекс объекта» в главе 12) –листинг 13.4, рис. 13.5 и 13.6.

Определение 3D-позиции объекта

1. <script scr="findDOM.js"></script>В любую функцию JavaScript, котораянепосредственно обращается к объектуна экране, следует включить код findDOM.Для этого добавьте внешний тексто-вый файл и затем импортируйте его нату страницу, где он будет использо-ваться.

2. var prevObjectID=null; varprevLayer=0;

В JavaScript инициализируйте две пере-менные:– prevObjectID. В ней хранится ID пре-

дыдущего выбранного объекта;– prevLayer. В ней хранится z-индекс

предыдущего выбранного объекта.3. function setLayer(objectID,layerNum)

{...}

В сценарий JavaScript добавьте функ-цию setLayer(), которая присваиваетсвойству z-index номер указанногоуровня.

4. function findLayer(objectID) {...}В код JavaScript добавьте функциюfindLayer(). При обращении к объек-ту она применяет его ID, который пе-редается в функцию как переменная

Перемещение объектов в 3D

Рис. 13.5. Порядок объектов при первой загрузкестраницы

Рис. 13.6. Изображения королевы и Алисы теперьнаходятся на переднем плане


objectID. Таким образом создаетсяDOM. Затем функция использует IDдля того, чтобы получить доступ ксвойству z-index, и возвращает этозначение.

5. function swapLayer(objectID) {...}В сценарий JavaScript добавьте функ-цию swapLayer(). Она уменьшает z-ин-декс предыдущего выбранного уровня(если таковой есть) и перемещает вы-бранный слой вверх.

6. #object {...}Листинг 13.4. В результате совместной работы функций swapLayer(), setLayer() и findLayer() объектперемещается на верхний уровень стека

<html><head>


var prevObjectID = null;var prevLayer = 0;function setLayer(objectID,layerNum) {

var dom = findDOM(objectID,1);var dom.zIndex = layerNum;

}function findLayer(objectID) {

var dom = findDOM(objectID,1);if (dom.zIndex != null)

return dom.zIndex;return (null);

}function swapLayer(objectID) {if (prevObjectID !=null)

setLayer(prevObjectID,prevLayer)prevLayer = findLayer(objectID);prevObjectID = objectID;setLayer(objectID,1000);}

</script><style type="text/css">

#object1 { position: absolute; border: gray solid 2px; z-index: 3; top: 175px;->left: 255px }#object2 { position: absolute; border: gray solid 2px; z-index: 2; top: 100px;->left: 170px }#object3 { position: absolute; border: gray solid 2px; z-index: 1; top: 65px;->left: 85px }

245

С помощью значений position и z-index установите ID объектов.

7. onLoad="..."Чтобы инициализировать z-индексвсех нужных объектов, в тэге <body>используйте функцию setLayer().

8. <div id="object1">...</div>Установите CSS-слои.

9. onClick="swapLayer('object1')"Чтобы запустить функциюswapLayer(), добавьте в слой обработ-чик событий.

Определение z-индексов в тэге <body>с помощью обработчика событий onLoadможет показаться скучным занятием, есливы уже установили z-индекс в CSS. НоInternet Explorer 5/6 и Netscape 6 распо-


#object4 { position: absolute; border: gray solid 2px; z-index: 0; top: 5px; left:5px }</style>

</head><body onLoad="setLayer('object1',3); setLayer('object2',2); setLayer('object3',1);->setLayer('object4',0);">

<div id="object1"><a href="javascript:void('')" onClick="swapLayer('object1');">

<img scr="alice22.gif" width="100" height="147" border="0"></a>-><br clear="all">

</div>

<div id="object2"><a href=" javascript:void('')" onClick="swapLayer('object2');">


</div>



</div>




Перемещение объектов в 3D


знают z-индекс только в том случае, еслион установлен с помощью JavaScript.

Возможность установления и переопреде-ления z-индекса оказывается важной присоздании теней (см. главу 26).

Прокрутка Web-страницыОбычно считается, что пользователь про-кручивает страницу с помощью встроен-ных полос прокрутки, которые находятсясправа и снизу в окне или фрейме. Вы ужезнаете, как определить положение про-крутки Web-страницы с помощьюJavaScript (см. раздел «Положение прокрут-ки страницы»в главе 12). Используя простой прием Ja-vaScript, можно установить горизонталь-ную или вертикальную прокрутку стра-ницы (листинг 13.5, рис. 13.7 и 13.8).

Добавление прокруткиWeb-страницы

1. var isIE=0;Чтобы выяснить, совместим ли брау-зер с Internet Explorer, используйте ме-тод определения браузера.

2. function scrollPageTo(x,y) {...}В сценарий JavaScript добавьте функ-цию scrollPageTo(). Если браузер со-вместим с Internet Explorer, то функцияприменяет свойства scrollLeft иscrollRight, чтобы прокрутить стра-ницу в точкус координатами (x,y). В противномслучае используется встроенная в Net-scape функция scrollTo().

3. #overHere {...}С помощью значений position, left иtop установите ID объектов. В этом при-мере определено два объекта: один в са-

Рис. 13.7. С помощью элементов управления Downи Over страница прокручивается таким образом,что мы можем видеть разные ее части

Рис. 13.8. Прокрутив страницу, посетитель видит,как поет Болванщик. Чтобы вернутьсяк начальному положению, можно нажатьBack. Ползунок на нижней полосе прокруткипереместился влево

247

мой нижней части страницы, другой –справа. Теперь можно применить фун-кцию scrollPageTo().

4. <a href="javascript:scrollPageTo->(0,1990)">...</a>

Чтобы запустить функциюscrollPageTo(), определите ссылку и пе-редайте функции координаты того мес-та, куда требуется прокрутить страни-цу. Помните, что нет необходимостиприменять обработчик событий, что-бы запустить эту функцию, так как онане обращается к DOM.

В этом примере страница прокручиваетсяпосле того, как пользователь совершит ка-кое-либо действие. Используя другой обра-ботчик событий (например, onLoad), можносделать так, что страница будет прокручи-ваться и без непосредственной командыпользователя. Однако при этом нужно бытьосторожным: если страница вдруг начнет пе-ремещаться из стороны в сторону, это мо-жет запутать или даже заставит волновать-ся посетителя вашего сайта.

Прокрутка Web-страницы

Листинг 13.5. Функция scrollPageTo() передвигаетWeb-страницу по вертикали и/или горизонталив зависимости от желания пользователя

<html><head>

<script>var isIE = 0;if (navigator.appName.index0f('Microsoft->Internet Explorer') !=-1) {isIE = 1;}

function scrollPageTo(x,y) {if (isIE) {

document.body.scrollLeft = x;document.body.scrollTop = y;

return;}else {

scrollTo(x,y);return;

}}


#overHere {position: absolute;top: 10px;left: 2000px;width: 1000px;z-index: 100;visibility: visible; }

#downHere {position: absolute;top: 2000px;left: 10px;height: 1000px;z-index: 100;visibility: visible; }</style>

</head><body>

<a href="javascript:scrollPageTo->(0,1990)">v Down</a> |<a href=->"javascript:scrollPageTo(1990,0)"->Over > <br style="clear:both">-><img scr="alice25.gif" width="300"->height="228" border="0"></a><div id="downHere">


<a href="javascript:scrollPageTo->(0,0)">̂ Back to Top</a><p><a href="javascript:scrollPageTo->(0,0)"><img scr="alice27.gif"->width="200" height="180"->border="0"></a></p>

</div><div id="overHere"><a href="javascript:scrollPageTo->(0,0)">> Back to Left</a><br

->style="clear:both"><p><img scr="alice26.gif" width="179"->height="200" border="0"></p>

</div><br clear="all">

</body></html>


В Netscape 4 (Windows) и Netscape 6 (всеверсии) есть особенность, из-за которойописанный метод не работает во фрейме соскрытыми полосами прокрутки (scrol-ling="no"). В этом случае не только уби-раются с экрана полосы прокрутки, но ивесь фрейм невозможно прокручиватьдаже с помощью JavaScript.

Видимая область объектаУстанавливая размеры отсекаемой облас-ти, мы определяем ту часть объекта, кото-рая будет видна на экране (см. раздел«Определение видимой части элемента» вглаве 9). Если с объектом не производить

Рис. 13.9. Чтобы узнать, почему улыбаетсяЧеширский кот, проведите указателем мышинад ссылкой

Рис. 13.10. Чеширский кот смеется над тем, чтоКороль не может приказать палачам отрубитьголову, у которой нет туловища. И это очень злитКоролеву

249

никаких действий, он остается видимым.Но, отсекая какую-либо часть объекта, мыустанавливаем степень его видимости наэкране. Для определения отсекаемой обла-сти используется JavaScript (см. раздел «Ви-димая область объекта» в главе 12). К томуже с помощью DHTML можно легко изме-нять отсекаемую область (листинг 13.6,рис. 13.9и 13.10).

Изменение видимой областиобъекта

1. <script scr="findDOM.js"></script>В любую функцию JavaScript, котораянепосредственно обращается к объектуна экране, следует добавить код findDOM.Для этого создайте внешний текстовыйфайл и затем импортируйте его на тустраницу, где он будет использоваться.

2. function setClip(objectID,clipTop,->clipRight,clipBottom,clipLeft){...}

В сценарий JavaScript добавьте функ-цию setClip(). При обращении кобъекту она использует его ID, которыйп е р е д а е т с яв функцию как переменная objectID.Таким образом создается DOM. Затемфункция заменяет отсекаемую об-ласть. В Netscape 4 и 6 это делается с по-мощью свойств отсекаемой областиtop, right, bottom и left, а в InternetExplorer 4/5 свойство clip применяетсянепосредственно.

3. #cheshireCat {...}Установите ID объектов и добавьте на-чальную отсекаемую область.

4. <div id="cheshireCat">...</div>Установите CSS-слои.

5. onMouseOver="setClip->('cheshireCat',35,320,400,70)"

Видимая область объекта

Листинг 13.6. Функция setClip() перерисовываетграницы отсекаемой области объекта

<html><head>


function setClip(objectID,clipTop,->clipRight,clipBottom,clipLeft) {

var dom = findDOM(objectID,1);if (dom.clip.left) {

dom.clip.top = clipTop;dom.clip.right = clipRight;dom.clip.bottom = clipBottom;dom.clip.left = clipLeft;

}else {

dom.clip = 'rect(' + clipTop ' ' +->clipRight + ' ' + clipBottom + '->' + clipLeft +')';}


#cheshireCat {position: absolute;top: 60px;left: 0px;overflow: hidden;clip: rect(15 350 195 50); }</style>

</head><body>

<a href="javascript:void('')"->onMouseOver="setClip('cheshireCat',->35,320,400,70);" onMouseOut="setClip->('cheshireCat',15,350,195,50);">

What is the Cheshire Cat smiling->about? </a>

<div id="cheshireCat"><img scr="alice31.gif" width="379"->height="480" border="0">


1414141414РазвитыединамическиетехнологииПомимо основных описанных здесь при-емов существуют и другие методы, с помо-щью которых создается динамический ин-терфейс Web-сайта. В некоторых из нихиспользуется объектная модель документа(DOM), описанная в главе 11, в других –специальные приемы на JavaScript, позволя-ющие лучше управлять сайтом.

Повторный запуск функцииДля создания постоянно изменяющихся эле-ментов часто бывает необходимо вызыватькакую-либо функцию несколько раз (лис-тинг 14.1). Такой рекурсивный вызов позволя-ет объектам двигаться или, чтобы продол-жить движение, ожидать события, котороедолжно произойти в окне браузера (рис. 14.1).

Рис. 14.1. Щелкните по картинке, чтобы остановить ее мигание

251

Создание рекурсивной функции

1. theDelay=1000;Инициализируйте глобальные перемен-ные:– theDelay устанавливает промежуток

времени (в миллисекундах) междудвумя запусками функции. Значение,равное 1000 мс, соответствует задерж-ке в одну секунду;

– domStyle записывает DOM;– state сохраняет текущее состояние

видимости объекта, на которое дей-ствует функция;

– toStop. Если эта переменная равна 1,то функция перезапускается, чего непроисходит, если переменной при-сваивается значение 0.

2. function setUpAnnoyingFlash(objectID,->onOffon) {...}В сценарий JavaScript добавьте функциюsetUpAnnoyingFlash(). Если переменнаяonOffon равна 1, переменной toStop при-сваивается значение 1 (функция переза-пускается). При обращении к объектуэта функция использует его ID, кото-рый передается в функцию как пере-менная objectID. Таким образом созда-ется DOM (см. раздел «Построение об-щей DOM» в главе 11). Затем вызыва-ется функция annoyingFlash(). Еслипеременная onOffon равна 0, переменнойtoStop присваивается значение 0 и функ-ция annoyingFlash() не вызывается.

3. function annoyingFlash() {...}В JavaScript добавьте функцию anno-yingFlash(). Она вызывается функциейsetUpAnnoyingFlash() на шаге 2. Если пе-ременная toStop равна 1, то состояниевидимости изменяется: объект отобража-ется на экране, если был невидим, и на-оборот. Затем функция перезапускается

Листинг 14.1. В функции setUpAnnoyingFlash()инициализируются переменные, которые затемиспользуются в функции annoyingFlash().Последняя вызывается снова и снова,изображение появляется и исчезает с интерваломв одну секунду до тех пор, пока пользовательне щелкнет по картинке

<html><head>


theDelay = 1000;var domStyle = null;var state = null;var toStop = 0;

function setUpAnnoyingFlash->(objectID,onOffon) {

if (onOffon == 1) {toStop = 1;domStyle = findDOM(objectID,1);domStyle.visibility = 'visible';state = 'visible';annoyingFlash();

}else toStop = 0;

}function annoyingFlash() {

if (toStop == 1) {if (state == 'hidden' || state ==->'hide')

domStyle.visibility = 'visible';else {

if (state == 'visible' || state->== 'show')domStyle.visibility = 'hidden';

else domStyle.visibility = 'visible';}state = domStyle.visibility;setTimeout ('annoyingFlash()',->theDelay);

}else {

domStyle.visibility = 'visible';return;

}}</script>

Повторный запуск функции

Развитые динамические технологии252

при помощи метода setTimeOut(). Функ-ция annoyingFlash() вызывается до техпор, пока переменная toStop не ста-новится равной 0. В этом случае свой-ству visibility присваивается значе-ние visible, и функция больше не вы-зывается.

4. #cheshireCat {...}Установите ID объектов с помощьюопределения position и visibility.

5. onLoad="setUpAnnoyingFlash->('cheshireCat',1);"

Чтобы вызвать функцию, созданную нашаге 2, добавьте обработчик событийи передайте ему ID того объекта, кото-рый будет появляться и исчезать на эк-ране. Также добавьте 1, если хотите,чтобы объект мерцал, и 0 – в против-ном случае.

6. <div id="cheshireCat">..</div>Установите CSS-слои.

Заметьте, что остановить мигание картин-ки, щелкнув по ней, можно, только еслиее состояние – visible. Ссылка появляет-ся на странице лишь в том случае, еслиизображение видимое.


<style type="text/css">#cheshireCat {

position: relative;visibility: visible; }</style>

</head><body onLoad="setUpAnnoyingFlash->('cheshireCat',1);">

MAKE IT STOP!!!! MAKE IT STOP!!!!->(click to make it stop)<div id=" cheshireCat"><a href=->"javascript:void('')" onClick=->"setUpAnnoyingFlash->('cheshireCat',0);">

<img scr="alice24.gif" width="640"->height="435" border="0"></a>


Зачем использовать метод setTimeOut()?

Если вы перезапускаете функцию с по-мощью метода setTimeOut(), то у васможет возникнуть вопрос: «Почему быпросто не вызвать функцию рекурсив-но?» Этого не стоит делать по двумпричинам:

при рекурсивном запуске функциив Netscape 4 возникает ошибка, ко-торая приводит к сбою в работевсего браузера;с помощью setTimeOut() легкоуправлять интервалом между запус-ками функции. Это весьма удобнов том случае, если требуется, чтобыфункция была вызвана повторночерез определенное время.

253Передача события в функцию

Передача событияв функциюВсе события, происходящие в окне брау-зера (см. раздел «Обнаружение события»в главе 11), генерируют соответствую-щую информацию: какое событие про-изошло, в какой части окна и каким об-разом (рис. 14.2). Эти сведения можнопередать непосредственно в функциюJavaScript. Таким образом, функция по-лучит доступ к объекту, не создавая об-щую DOM (листинг 14.2).Как и в случае со всеми остальными воз-можностями Web-дизайна, Internet Explo-rer и Netscape по-разному осуществляютпередачу события. Однако эти методылегко комбинируются.

Передача события в функциюJavaScript

1. function passItOn(evt) {...}В сценарий JavaScript добавьте функ-цию passItOn(). Ей передается перемен-ная evt, затем на экране отображаетсядиалоговое окно с предупреждением.Переменная evt представляет собойDOM для объекта, в котором произош-ло событие. В Internet Explorer она ге-нерируется автоматически, а в Netscapeсоздается с помощью свойства event.

2. onClick="passItOn(event)"Для запуска функции добавьте одинили несколько обработчиков событий.Чтобы получить доступ к свойствуevent в Netscape, нужно передать функ-ции значение event.

Почему нельзя всегда использовать пере-менную evt вместо создания общей DOM?Мой опыт показывает, что эта переменнаяв разных браузерах ведет себя непредска-зуемо, особенно если вы пытаетесь полу-чить доступ к CSS-стилям (см. ниже).

Рис. 14.2. После того как вы нажметена изображение саламандры, появитсяпредупреждение о том, что обнаружен объект[object]

Листинг 14.2. Функция passItOn() получаетсобытие и затем отображает результатв предупреждении, где указывается тип события

<html><head>

<script>function passItOn(evt) {

if (evt) {alert (evt);return;

}}

</script></head>


Глобальный обработчиксобытийДля каждого объекта на Web-странице су-ществует событие (см. раздел «Обработчи-ки событий» в главе 11). Но иногда нужноустановить результат некоторого события,не имеющего отношения к объекту. Этоможно сделать как в Internet Explorer, таки в Netscape (рис. 14.3 и листинг 14.3).

Создание глобальногообработчика событий

1. <script scr="findDOM.js"></script>Мы не будем использовать код findDOM.jsдля создания общей DOM, но восполь-зуемся этим файлом, чтобы обнаружитьDHTML-браузер (см. раздел «Использо-вание общей для браузеров DOM» в гла-ве 11).

2. var isNS=0;В сценарий JavaScript добавьте метод оп-ределения браузера (см. раздел «Назва-ние и версия браузера» в главе 12).

3. function defaultEvents() {...}В код JavaScript добавьте функцию de-faultEvents(). Эта функция создает гло-бальный обработчик событий, которыйбудет использоваться в Netscape. Затемопределяются функции, которые нач-нут выполняться, если где-либо в окнебраузера произойдет событие. Обработ-чики событий перечислены в разделе«Обработчики событий» в главе 11. Выможете выбрать любой из них.

4. function errorOn() {...}


<body><div id="object1">

<a href="javascript:void('')"->onClick="passItOn(event)">

<img scr="alice13.gif" width=->"174" height="480" border="0">

</a></div>

</body></html>

Рис. 14.3. Не нажимайте на картинку! Я васпредупредил

255

В сценарий JavaScript добавьте функции,которые будут вызываться, когда встре-тятся события, описанные в функциииз шага 2. В этом примере функцииerrorOn() и validate() запускаются в тотмомент, когда в окне браузера происхо-дят события onClick и onMouseOut.

5. onLoad="defaultEvents()"

Листинг 14.3. Функция defaultEvents() определяет глобальные события, которые срабатываютнезависимо от того, где и когда они произошли

<html><head>


var isNS = 0;var isIE = 0;if (navigator.appName.index0f('Netscape') != -1) {isNS = 1;}else {if (navigator.appName.index0f('Microsoft Internet Explorer') != -1) {isIE = 1;}}function defaultEvents() {

if (isNS) {document.captureEvents(Event.CLICK || Event.MOUSEOUT)

}if (isDHTML) {

document.onClick = ErrorOn;document.onMouseOut = validate;

}}function ErrorOn(){

alert('Please do not click here again');}function validate(){

alert('Where do you think you are going?');}

</script></head><body onLoad="defaultEvents()">

<img scr="alice34.gif" width="409" height="480" border="0"></a></div>

</body></html>

Чтобы запустить функцию, созданнуюна шаге 3, добавьте в тэг <body> обра-ботчик событий.

Глобальный обработчик событий


Анимационные объектыКогда говорят о динамических технологи-ях, обычно представляют себе объекты, непросто перемещающиеся из точки в точку(см. раздел «Перемещение объекта на за-данное расстояние» в главе 13), а плавнопередвигающиеся по экрану (рис. 14.4).Используя рекурсивную функцию (см. раз-дел «Повторный запуск функции»), мож-но заставить позиционированный объект(см. раздел «Тип позиционирования» в гла-ве 8) плавно передвигаться по экрану (лис-тинг 14.4).

Рис. 14.4. Болванщик быстро передвигаетсяпо экрану

Листинг 14.4. Функция startAnimate() выясняет начальное левое верхнее положение объекта,устанавливает DOM и запускает рекурсивную функцию animateObject(). Она изменяет положениеобъекта шаг за шагом до тех пор, пока он не достигнет конечной точки

<html><head>


var animaeDelay = 5;var domStyle;var fX = null;var fY = null;

function findLeft(objectID) {var domStyle = findDOM(objectID,1);var dom = findDOM(objectID,0);if (domStyle.left)

return domStyle.left;if (domStyle.pixelLeft)

return domStyle.pixelLeft;if (domStyle.offsetLeft)

return domStyle.offsetLeft;return (null);

}

257

Создание анимационного объекта

1. animaeDelay=5;Инициализируйте глобальные перемен-ные:– animaeDelay устанавливает промежу-

ток времени между рекурсивнымизапусками функции. Чем большечисло, тем медленнее объект сколь-зит по экрану. Однако в этом случаедостигается не самый лучший анима-ционный эффект;

– domStyle записывает DOM;– fX сохраняет конечное левое положе-

ние объекта;– fY записывает конечное верхнее по-

ложение объекта.2. function findLeft(objectID) {...}

В сценарий JavaScript добавьте функцииfindLeft() и findTop() (см. раздел «Ле-вая и верхняя позиции объекта» в гла-ве 12).

3. function startAnimate(objectID,x,y)->{...}

В код JavaScript добавьте функциюstartAnimate(), в которой запоминает-ся конечное положение объекта (fX,fY)и вычисляется его текущее положение(cX,cY). При обращении к объекту функ-ция использует его ID, который пере-дается в нее как переменная objectID.Таким образом создается DOM. Затемэта функция вызывает функцию anima-teObject() и передает ей текущие коор-динаты объекта (cX,cY).

Листинг 14.4 (продолжение)

function findTop(objectID) {var domStyle = findDOM(objectID,1);var dom = findDOM(objectID,0);if (domStyle.top)

return domStyle.top;if (domStyle.pixelTop)

return domStyle.pixelTop;if (domStyle.offsetTop)

return domStyle.offsetTop;return (null);

}

function startAnimate(objectID,x,y) {fX = x;fY = y;var cX = findLeft(objectID);var cY = findTop(objectID);domStyle = findDOM(objectID,1);animateObject(cX,cY)

}

function animateObject(cX,cY) {if (cX != fX) {

if (cX > fX) { cX -=1; }else { cX +=1; }

}if (cY != fY) {

if (cY > fY) { cY -=1; }else { cY +=1; }

}if ((cX != fX) || (cY != fY)) {

if (domStyle.pixelLeft) {domStyle.pixelLeft = cX;domStyle.pixelTop = cY;

}else {domStyle.left = cX;

domStyle.top = cY;}setTimeOut('animateObject(' + cX + ','->+ cY + ')',animaeDelay);}

}</script>

Анимационные объекты

259

Нахождение положенияуказателя мышиНезависимо от того, куда вы направляе-тесь, вы там обязательно окажетесь. Опре-делить положение указателя мыши в окнебраузера вам поможет сценарий, описан-ный ниже.Все события, совершающиеся в окне бра-узера, генерируют соответствующую ин-формацию о происходящем (см. ранеераздел «Передача события в функцию»).Самым важным в этих сведениях являет-ся место на экране, где возникло событие(рис. 14.5).

Определение положения указателямыши в окне браузера

1. function findXCoord(evt) {...}В сценарий JavaScript добавьте функ-ции findXCoord() и findYCoord(). Когдапроисходит событие, они возвращаюткоординаты указателя мыши (в пиксе-лах). Метод (в Internet Explorer ис-пользуются x и y, а в Netscape – pageXи pageY) задается с помощью способаопределения возможностей браузера(листинг 14.5).

Рис. 14.5. Когда посетитель щелкает мышьюв окне браузера, появляются координатыуказателя мыши

Листинг 14.5. Когда в окне браузера происходит событие, функции findXCoord() и findYCoord()выясняют координаты указателя мыши

<html><head>

<script>function findXCoord(evt) {

if (evt.x) return evt.x;if (evt.pageX) return evt.pageX;

}

Нахождение положения указателя мыши


2. onClick="alert('Left='->+findXCoord(event)+'px Top='->+findYCoord(event))+'px'">

Чтобы вызвать функцию, описанную нашаге 2, добавьте обработчик событий.Область, в которой функция произво-дит поиск координат указателя мыши,зависит от местоположения обработчи-ка событий. Если он находится в тэге<body>, то координаты указателя можноопределить в любом месте экрана. Еслион содержится в тэге <a>, то координа-ты указателя устанавливаются тольковнутри области ссылки.

В Netscape 4 событие onClick можно гене-рировать только в тэге <a>. Поэтому в при-мере этот браузер игнорирует onClick в тэге<body> и показывает координаты указателямыши только в том случае, если пользова-тель щелкнет по картинке.


function findYCoord(evt) {if (evt.y) return evt.y;if (evt.pageY) return evt.pageY;

}</script>

</head><body onClick="alert('Left = ' +->findXCoord(event) + 'px Top = ' +->findYCoord(event)) + 'px'">

<div id="object1"><a href="javascript:void('')"->onClick="alert('Left = ' +->findXCoord(event) + 'px Top = ' +->findYCoord(event)) + 'px'">

<img scr="alice13.gif"->width="174" height="480"->border="0">

</a></div>

</body></html>

261

Идентификация объектана экранеРанее в разделе «Передача события в функ-цию» было показано, как использовать зна-чение evt для нахождения объекта, с ко-торым связано начало события. DHTMLпозволяет задействовать браузер для опре-деления ID объекта, в котором произош-ло событие (рис. 14.6). Эта задача оченьпросто решается в Internet Explorer и Net-scape 6, так как имя объекта является час-тью события (листинг 14.6).Решение этой задачи в Netscape 4 займетбольше времени. Чтобы функция зарабо-тала, придется воспользоваться слоями(см. главу 16).

Идентификация объекта на экране

Рис. 14.6. Можно выбрать любое изображениеАлисы

Листинг 14.6. Функция findObject() находит ID или имя объекта, в котором произошло запустившееее событие

<html><head>

<script>var name = null;function findObject(evt) {

if (document.layers) {var testObj;var xPos = evt.pageX;var yPos = evt.pageY;for (var i = document.layers.length – 1; i >= 0; i–) {

testObj = document.layers[i]if ((xPos > testObj.left) &&(xPos < testObj.left + testObj.clip.width) &&(yPos > testObj.top) &&(yPos < testObj.top + testObj.clip.height)) {

objectID = testObj.name;alert('You clicked' + objectID + '.');return;

}}

}else {

objectID = evt.target.name;alert('You clicked' + objectID + '.');return;}


Определение элемента, в которомпроизошло событие

1. function findObject(evt) {...}В сценарии JavaScript добавьте функциюfindObject() в заголовок документа.В этом сценарии определяются CSS-эле-менты, в которых произошло событие.Затем на экран выводится сообщение,с указанием найденного элемента. Функ-ция состоит из двух частей. Одна ис-пользуется в Netscape 4, другая – в Inter-net Explorer и Netscape 6:– if (document.layers) {...}. Если код

работает в Netscape 4, то функцияопределяет положение указателя мы-ши и затем проверяет каждый слойв массиве слоев (в списке слоев, кото-рые находятся в окне), определяя, ка-кой из них находится под указателем;

– else {...}. Если код работает в Inter-net Explorer, выясняется имя нужногообъекта, то есть имя элемента, в кото-ром произошло событие.

2. #alice1 {...}Задайте CSS-элементы с помощьюсвойств стиля. В этом примере опре-деляются три картинки (alice1, alice2и alice3), и у каждой из них есть уни-кальный ID.

3. onClick="findObject(event)"Чтобы вызвать функцию, созданнуюна шаге 1, добавьте обработчик собы-тий и передайте ему параметр событиядля Netscape 4.

Заметьте, что имя объекта определяетсяв тэге <image>, а ID – в тэге <div>. Netscapeиспользует ID действительной картинки,а Internet Explorer – ее имя. Чтобы код ра-ботал во всех браузерах, лучше включатьв него как имя объекта, так и его ID.


return;}


#alice1 {position: absolute;top: 5px;left: 5px;visibility: visible }

#alice2 {position: absolute;top: 150px;left: 200px;visibility: visible }

#alice3 {position: absolute;top: 5px;left: 300px;visibility: visible }</style>

</head><body>

<div id="alice1"><a href="javascript:void('')"->onClick="findObject(event)">

<img scr="alice04.gif"->width="301" height="448"->border="0" name="alice1">

</a></div><div id="alice2">

<a href="javascript:void('')"->onClick="findObject(event)">


</a></div><div id="alice3">

<a href="javascript:void('')"->onClick="findObject(event)">


</a></div>

</body></html>

263

Управление содержаниемво фреймахЧтобы управлять объектами в одном фрей-ме, можно использовать JavaScript (рис. 14.7).Трудности возникают, когда вы создаетеобщую для браузеров DOM, которой тре-буется найти путь к элементу другогофрейма. Это похоже на добавление кодастраны в адрес (см. раздел «DOM – путево-дитель по Web-странице» в главе 11). Вамнужно создать еще одну версию findDOM.js,которая называется findDOMFrame.js. Функ-ция не обращается к объекту в том же са-мом документе, а ищет объект в докумен-те другого фрейма. Это означает, чтофункции необходимо передать не толькоимя объекта, который следует изменить,но и имя фрейма, в котором данныйобъект находится.

Управление элементами в другихфреймах

1. findDOMFrame.jsСоздайте новую версию внешнего файлаfindDOM, содержащую вариацию функ-ции findDOM():findDOMFrame(objectID,frameName,

->withStyle).Эта версия позволяет передавать функ-ции имя фрейма, которое включенов общую DOM, созданную для обраще-ния к объекту в конкретном фрейме(листинг 14.7). Используйте этот кодвместо кода, созданного в разделе «Ис-пользование общей для браузеров DOM»в главе 11.

Управление содержанием во фреймах

Рис. 14.7. Кролик может быть в разных фреймах,но DOM находит его и заставляет бежать

Листинг 14.7. Эта версия сценария для общейDOM, findDOMFrame.js, позволяет передаватьфункции имя фрейма. Затем функция создаетDOM для объекта в определенном фрейме

var isDHTML = 0;var isLayers = 0;var isAll = 0;var isID = 0;

if (document.getElementByID) {isID=1;->isDHTML=1;}else {if (document.all) {isAll=1; isDHTML=1;}else {browserVersion =->parseInt(navigator.appVersion);if ((navigator.appName.index0f->('Netscape') !=-1) && (browserVersion->== 4)) {isLayers = 1; isDHTML = 1;}}}


2. index.htmlСоздайте документ с фреймами, убеди-тесь, что фреймы с динамическим со-держанием имеют названия (рис. 14.8).Названия будут использоваться в DOM,созданной на шаге 1 (листинг 14.8).

3. content.htmlТеперь создайте HTML-документ, со-держащий объекты, которые требует-ся контролировать из другого фрейма,и включите туда позиционированныеобъекты, которыми позволяет управ-лять JavaScript, и их ID (листинг 14.9).

4. controls.htmlСоздайте HTML-документ, управляю-щий элементом второго фрейма. Не-обходимо импортировать код find-DOMFrame.js, созданный на шаге 1, и до-бавить DHTML-функцию, которую выхотите использовать. Функцию следу-ет слегка изменить, чтобы ей можнобыло передавать имя фрейма, котороенаряду с objectID и withStyle создаетDOM (листинг 14.10).

В этом примере показано, как перемещатьобъекты из фрейма во фрейм. Однако выможете применять любую функцию, управ-ляющую содержанием фреймов.

Окно также представляет собой фрейм.С помощью описанного метода устанавли-вают связи между двумя открытыми ок-нами, если у них есть имена.


function findDOMFrame(objectID,->frameName,withStyle) {if->(document.getElementById) {isID=1;->isDHTML=1;} else {if (document.layers)->{isLayers = 1; isDHTML = 1;} else {if->(document.all) {isAll=1; isDHTML=1;}}}

if (withStyle == 1) {if (isID) { return (top->[frameName].document.->getElementById(objectID).style); }else {

if (isAll) {return ( top->[frameName].document.all->[objectID].style); }

else {if (isLayers) {return (top->[frameName].document.layers->[objectID]); }

}}}else {

if (isID) { return top->[frameName].document.->getElementById(objectID)); }else {

if (isAll) {return ( top->[frameName].document.all->[objectID]); }

else {if (isLayers) {return (top->[frameName].document.layers->[objectID]); }

}}}

}

265

Листинг 14.8. В этом примере (index.html)создан документ с двумя фреймами, которыеназываются content и controls. Источники этихфреймов – content.html и controls.htmlсоответственно

<html><frameset rows="*,50">

<frame scr="content.html" name=->"topframe" noresize scrolling="no"><frame scr="controls.html" name=->"bottomframe" noresize scrolling="no">

</frameset></html>

Листинг 14.9. Создан объект whiteRabbit,которым можно управлять из текущего илилюбого другого фрейма с помощью его DOM

<html><head>

<style type="text/css">#whiteRabbit { position: absolute; top:->125px; left: 350px }

</style></head><body>

<div id="whiteRabbit"><img scr="alice02.gif" width="200"->height="300" border="0">


Листинг 14.10. В controls.html применяетсявидоизмененная функция moveObject()(см. раздел «Перемещение объекта на заданноерасстояние» в главе 13). Разница заключаетсяв том, что в функцию передается не только IDперемещаемого объекта, но и название егофрейма. Затем, чтобы определитьместоположение объекта в окне браузера,функция moveObject() использует функциюfindDOMFrame(), которая была импортированаиз файла findDOMFrame.js

<html><head>

<script scr="findDOMFrame.js"></script><script>

function moveObject(objectID,->frameName,x,y) {

var domStyle = findDOMFrame(objectID,->frameName,1);if (domStyle.pixelLeft) {domStyle.pixelLeft = x;domStyle.pixelTop = y;

}else {

domStyle.left = x;domStyle.top = y;

}}

</script></head><body>

<a href="#"onMouseOver="moveObject->('whiteRabbit','topFrame,10,10);"->onMouseOut="moveObject('whiteRabbit',->'topFrame,350,125);">-> Run Rabbit, run! </a></body></html>

Рис. 14.8. Набор фреймов устанавливаетсяиз index.html

Управление содержанием во фреймах


Позиционирование окнабраузераПри создании интерфейса пользователяв Web желательно позиционировать окнобраузера на экране посетителя (рис. 14.9).Это особенно важно, если на вашем сайтебудет открываться много окон и вам нуж-но установить начальное положение окнатак, чтобы окна не закрывали друг друга(см. следующий раздел).

При этом вы сможете перемещать окно изего начального положения на заданноерасстояние (листинг 14.11).

Определение положения окнана экране

1. moveTo(10,15)

В сценарий JavaScript добавьте функ-цию moveTo(x,y). Эта встроенная функ-ция JavaScript сообщает браузеру, чтонужно переместить его левый верхнийугол в точку с указанными координата-ми (x,y) по отношению к левому верхне-му углу действительной области экрана(см. раздел «Размеры экрана» в главе 12и рис. 14.10).

Рис. 14.9. Начальное положение окна браузерана экране

Листинг 14.11. Окно браузера перемещаетсяв конкретное место на экране или наопределенное расстояние с помощью функцийJavaScript moveTo(x,y) и moveBy(x,y)

<html><head>

<b>Window Controls</b> ||<a href="javascript:moveTo(10,15)">

Move to 10,15</a> |<a href="javascript:moveBy(10,15)">

Move by 10,15<br><br><img scr="alice42.gif" width="360"->height="480" border="0"></a>

</body></html>

267Позиционирование окна браузера

Рис. 14.10. Окно переместилось в точкус координатами (10,15)

Рис. 14.11. Окно переместилось на 10 пикселоввправо и на 15 пикселов вниз

2. moveBy(10,15)В сценарий JavaScript добавьте move-By(dx,dy). Эта встроенная функцияJavaScript перемещает окно браузерана указанное расстояние (dx,dy) поосям Х и Y (рис. 14.11).

Описанный метод больше всего подходитдля перемещения окна, которое было от-крыто в первый раз. Это можно сделать,поместив moveTo() или moveBy() в обра-ботчик события onLoad в тэге <body> (см.следующий раздел).


Новое окно браузераЧасто в Web используется такой прием, какоткрытие нового окна браузера (рис. 14.12).Окна используются в разных целях: содер-жат элементы навигационного управления,рекламу и другие данные, дополняющиеинформацию в главном окне.При работе с всплывающими окнами при-меняются следующие функции:

openWindow() открывает новое окно и по-мещает его на передний план;closeWindow() закрывает окно;toggleWindow() как открывает, так и за-крывает окна. Если окно закрыто, функ-ция его откроет и поместит на пере-дний план. Если окно открыто, функ-ция закроет его.

Открытие и закрытие нового окнабраузера

1. index.htmlСоздайте новый файл и сохраните егокак index.html. В нем будут содержать-ся элементы управления, которые ис-пользуются при открытии и закрытиивсплывающего окна (листинг 14.12).

2. var newWindow=null;Инициализируйте переменную newWindow,которая является указателем на объект,соответствующий всплывающему окну.Значение null означает, что окно не со-здано.

3. function openWindow(contentURL,->windowName,windowWidth,

->windowHeight) {...}В сценарий JavaScript добавьте функ-цию openWindow(), которая открывает

Рис. 14.12. Экран с всплывающим окном

Листинг 14.12. Функции openWindow(),closeWindow() и toggleWindow() открываюти закрывают всплывающее окно

<html><head>

<script>var newWindow = null;

function openWindow(contentURL,->windowName,windowWidth,windowHeight) {widthHeight = 'height=' + windowHeight +->',width=' + windowWidth;newWindow = window.open(contentURL,->windowName,widthHeight);newWindow.focus()}

function closeWindow() {if (newWindow != null) {

newWindow.close();newWindow = null;

}}

function toggleWindow(contentURL,->windowName,windowWidth,windowHeight {

if (newWindow == null) {widthHeight = 'HEIGHT=' +->windowHeight + ',WIDTH='->+ windowWidth;newWindow = window.open->(contentURL,windowName,->widthHeight);

269

новое окно, используя следующие па-раметры:– contentURL является именем HTML-

файла, который нужно поместитьв новое окно;

– windowName представляет собой имянового окна;

– windowWidth и windowHeight определя-ют ширину и высоту нового окна.

Метод newWindow.focus() помещает окнона передний план.

4. function closeWindow() {...}В сценарий JavaScript добавьте функ-цию closeWindow(), которая проверяет,открыто ли окно. Если окно открыто,функция закрывает его и присваиваетпеременной newWindow значение null.

5. function toggleWindow(contentURL,->windowName,windowWidth,

->windowHeight) {...}В код JavaScript добавьте функциюtoggleWindow(). Она представляет собойкомбинацию функций, описанных нашаге 3 и 4, однако открывает окнотолько в том случае, если переменнойnewWindow присваивается значение null(закрыто). В противном случае она за-крывает окно.

6. onUnLoad="closeWindow()"Вы можете добавить обработчик собы-тия onUnLoad, чтобы новое окно закры-валось, когда закрывается расположен-ная в нем страница. Этот обработчиксобытий препятствует возникновениюнового окна, когда пользователь уходитс родительской страницы.

7. openWindow('newWindow.html',->'myNewWindow',150,50)

В код HTML добавьте вызов функцииopenWindow(). Он может быть частьюобработчика события (см. шаг 6) иличастью сценария JavaScript в описанииссылки.


newWindow.focus()}else {

newWindow.close();newWindow = null;

}}

</script></head><body onUnLoad="closeWindow()">

<b>Window Open Controls</b><a href="javascript:openWindow->('newWindow.html',->'myNewWindow',150,50)">Open</a> |<a href="javascript:closeWindow()">Close</a> |<a href="javascript:toggleWindow->('newWindow.html',->'myNewWindow',150,50)">Toggle</a>

</body></html>

Новое окно браузера


Определение содержаниявсплывающего окна

1. newWindow.htmlСоздайте новый файл и сохраните егокак newWindow.html. Он будет загружать-ся во всплывающем окне (листинг 14.13).Как и в любой Web-странице, в этомдокументе можно помещать любуюинформацию.

2. function closeWindow() {...}В сценарии JavaScript добавьте функ-цию closeWindow() в только что создан-ный файл. Если ее запустить, всплыва-ющее окно закроется.

3. onUnLoad="opener.newWindow=null;"В тэг <body> добавьте обработчик собы-тий onUnLoad, который присваивает пе-ременной newWindow значение null, ког-да окно закрыто. Эта переменная сооб-щает открывающему окну, что всплы-вающее окно закрывается.

4. onLoad="window.moveTo(100,100)"Чтобы при первом открытии перемес-тить окно в заданную позицию на экра-не, в тэг <body> добавьте обработчик со-бытий onLoad (см. раздел «Позициони-рование окна браузера»).

5. <a href="javascript:->closeWindow()">...</a>

Для вызова функции closeWindow() опре-делите ссылку, чтобы пользователь могзакрыть окно.

Листинг 14.13. Файл newWindow.html –это Web-страница, которая появляетсяво всплывающем окне

<html><head>

<script>function closeWindow() {

self.close();}

</script></head><body onLoad="window.moveTo(100,100)"->onUnLoad="opener.newWindow = null;">

New Window<br><a href="javascript:->closeWindow()">Close Window</a>

</body></html>

271

Обычно предпочтение отдается именнофункции toggleWindow(). Но иногда по-лезно использовать и две другие, так какв некоторых случаях необходимо точнознать, открыто окно или нет.

При создании страниц с фреймами я пред-почитаю применять пункт 4 приведенноговыше списка. Событие onUnLoad помеща-ется в тэг <frameset>. Когда посетительпокидает сайт и страница закрывается,всплывающее окно исчезает.

Если вам потребуется открыть несколькоокон, в сценарии может возникнуть ошиб-ка, поскольку нельзя каждый раз пользо-ваться переменной newWindow. Вместоэтого для каждого окна придется добав-лять отдельную функцию (openWindow1(),openWindow2() и т.д.) и использовать но-вое имя (newWindow1, newWindow2 и т.д.)1.

Новое окно браузера

1 Можно переписать функции так, чтобы в нихпередавалась переменная, указывающая на окно,с которым надо произвести действия. Тогдадостаточно будет указать количество перемен-ных и всплывающих окон и при вызове функ-ции передавать ей соответствующую перемен-ную. – Прим. ред.

Проблемы, возникающиепри использовании всплывающих окон

Многие разработчики сайтов, приме-няющие всплывающие окна, недо-вольны их поведением.Допустим, вы поместили во всплыва-ющее окно форму, в которую пользо-ватель вводит информацию, а затемэти сведения задействуются в главномокне. Что произойдет, если пользова-тель не ввел данные и не закрыл окно,но вернулся на главную страницу? Сис-тема ожидает информацию, которая,вероятно, никогда не поступит. Посети-тель в это время вносит на страницудругие изменения, затем возвращаетсяк всплывающему окну и вводит нуж-ные данные. Подобные действия запу-тывают систему.Решить эту проблему просто. Еслиоткрытое всплывающее окно можетпривести к ошибке, добавьте в тэг<body> документа кодonblur="self.close();"

Тогда окно закроется, как только посе-титель покинет его. Окно легко сноваоткрыть с главной страницы, однакопосетитель не сможет вернуться к немунапрямую.


Размеры окнаПри открытии нового окна в Netscapeможно установить его начальные размеры(см. предыдущий раздел). После этогоразмеры окна допускается менять дина-мически (листинг 14.14). В данном разде-ле рассматривается работа только с брау-зерами Netscape; Internet Explorer не под-держивает названную возможность. Нарис. 14.13 окно находится в начальном по-ложении, то есть до применения кода,описанного ниже. Рис. 14.13. Начальные размеры окна браузера

Листинг 14.14. Функции changeWindowSize(), magnifyWindow() и fillScreen() управляютразмерами окна браузера

<html><head>

<script>function changeWindowSize(windowWidth,windowHeight) {

if (window.outerWidth) {resizeTo(windowWidth,windowHeight);

}}

function magnifyWindowSize(dwindowWidth,dwindowHeight) {if (window.outerWidth) {

resizeBy(dwindowWidth,dwindowHeight);}

}

function fillScreen() {if (window.outerWidth) {

windowWidth = screen.width;windowHeight = screen.height;moveTo(0,0)resizeTo(windowWidth,windowHeight);

}}

</script></head.<body>

Window Size ||<a href="javascript:changeWindowSize(300,300);">

273

Изменение размеров окна

1. function changeWindowSize->(windowWidth,windowHeight) {...}В сценарий JavaScript добавьте функ-цию changeWindowSize(). Сначала онаиспользует метод определения воз-можностей, чтобы установить, реальноли выяснить внешнюю ширину окнабраузера. Если ей это удается, значит,браузер принадлежит к типу Netscape(см. раздел «Размеры окна браузера»в главе 12). Затем функция применяетметод resizeTo() для того, чтобы по-менять размеры окна на windowWidthи windowHeight (рис. 14.14).

2. function magnifyWindow->(dwindowWidth,dwindowHeight) {...}В код JavaScript добавьте функциюmagnifyWindowSize(). Сначала она ис-пользует метод определения возмож-ностей, чтобы установить, реально ливыяснить внешнюю ширину окна брау-зера. Если ей это удается, значит, брау-зер принадлежит к типу Netscape. Затемфункция применяет метод resizeBy()для того, чтобы вычесть из размеровокна или добавить к ним значенияdwindowWidth и dwindowHeight (рис. 14.15).

3. function fillScreen() {...}В код JavaScript добавьте функциюfillScreen(). Сначала она используетметод определения возможностей, что-бы установить, реально ли выяснитьвнешнюю ширину окна браузера. Еслией это удается, значит, браузер принад-лежит к типу Netscape. Затем функциянаходит ширину и высоту действитель-ной области экрана, перемещает верх-ний левый угол окна в верхний левыйугол экрана и изменяет размеры окнадо размеров действительной областиэкрана (рис. 14.16).

Размеры окна


Resize to 300 by 300</a> |<a href=javascript:->magnifyWindow(30,30);">Increase</a> |<a href=javascript:->magnifyWindow(-30,-30);">Decrease</a> |<a href=javascript:fillScreen();">Fill Screen</a><br><br><img scr="alice04.gif"->width="301" height="448" border="0">

</body></html>

Рис. 14.14. Размеры окна изменились. Текущийразмер – 300×300 пикселов

Рис. 14.15. Ширину и высоту окна увеличилина 30 пикселов


4. changeWindowSize(300,300)В функцию, которую вы хотите ис-пользовать, добавьте вызов функцииchangeWindowSize() и передайте ей со-ответствующие параметры. Функциюлегко вызвать из обработчика событийили же его можно включить в атрибутhref ссылки.

Рис. 14.16. Окно браузера заполняет весь экран

1515151515Динамическиетехнологии CSS

Использование объектной модели доку-мента (DOM) для Internet Explorer 4/5/6и Netscape 6 приводит к интересным ре-зультатам, когда динамический HTMLсоздается с помощью CSS. В отличие отNetscape 4, в котором можно корректиро-вать лишь CSS-свойства позиционирова-ния, Internet Explorer 4/5/6 и Netscape 6распознают изменения в любых доступ-ных им CSS-свойствах (см. приложение 2).В результате нетрудно динамически управ-лять CSS в окне браузера, модифицируястили. Такие изменения немедленно отоб-ражаются на экране – это и есть динами-ческие CSS.В данной главе показано, как динамическидобавлять и отменять CSS-правила и опре-деления, таблицы стилей будут при этомрассматриваться как объекты.

Изменение определенияИспользуя CSS, определения (рис. 15.1)можно устанавливать, а с помощью Java-Script – изменять (рис. 15.2). Допустимо из-менять или добавлять любое CSS-свойство,указанное для какого-либо объекта на эк-ране. По крайней мере, такая функция су-ществует и в Internet Explorer, и в Netscape 6(листинг 15.1).

Рис. 15.1. До того как указатель мыши пройдетнад фразой «Eat Me», размер шрифта останетсямаленьким

Динамические технологии CSS276

Как изменить определения

1. <script scr="findDOM.js"></script>В любую функцию JavaScript, котораянепосредственно обращается к объектуна экране, нужно добавить код findDOM.Для этого создайте внешний текстовыйфайл и затем импортируйте его на тустраницу, где он будет применяться(см. «Использование общей для браузе-ров DOM» в главе 11).

2. function changeStyle(objectID,->styleName,newVal) {...}В сценарий JavaScript добавьте функциюchangeStyle(). При обращении к объек-ту она использует его ID, который пе-редается в функцию как переменнаяobjectID. Таким образом создается DOM(см. «Построение общей DOM» в гла-ве 11). Затем функция при помощиDOM заменяет стиль, который она по-лучила как styleName, на новое значе-ние (newVal).

3. #object1 {...}Установите ID объектов с помощьюCSS-свойств, которые вы хотите изме-нить.


5. onClick="changeStyle('object1',->'fontSize,'18px')"

Чтобы запустить функцию, созданнуюна шаге 2, добавьте обработчик собы-тий. Передайте функции ID объекта,к которому вы хотите обратиться, свой-ство стиля, которое требуется изменить,и новое значение.

Рис. 15.2. После того как указатель мыши прошелнад фразой «Eat Me», размер шрифта увеличилсяс 4 до 18 пикселов

Листинг 15.1. Функция changeStyle() изменяетстили в определении конкретного объекта в окнебраузера или добавляет их в это определение.Если посетитель наведет указатель мышина фразы «Eat Me» и «Drink Me», размер текстаувеличится или уменьшится

<html><head>


function changeStyle(objectID,stylename,->newVal) {

var dom = findDOM(objectID,1);

277

Заметьте, что обработчик событий нахо-дится в тэге <div>. Это сделано из-затого, что описанный код работает тольков Internet Explorer 4/5/6 и Netscape 6. Незабывайте, что Netscape 4 в настоящеевремя является единственным браузером,который не поддерживает события длявсех объектов на странице.

Имена стилей в CSS состоят из двух илиболее слов, разделенных дефисом (font-size). Чтобы использовать имена в дина-мических CSS, нужно перевести их в именастилей JavaScript (fontSize).

Изменение определения


dom [styleName] = newVal;}


#object1 {font-size: 4px;position: relative;width: 300px; }

#eatMe {font-size: 18px;position: relative;margin-right: 20px; }

#drinkMe {font-size: 4px;position: relative;margin-left: 20px; }</style>

</head><body>

<span id="eatMe" onmouseover=->"changeStyle('object1','fontSize',->'18px'); changeStyle('drinkMe',->'fontSize','18px');->this.style.fontsize = '4px';">

Eat Me</span> |<span id="drinkMe" onmouseover=->"changeStyle('object1','fontSize',->'4px'); changeStyle('eatMe',->'fontSize','18px');->this.style.fontsize = '4px';">

Drink Me</span><div id="object1">'Curiouser and->curiouser!' cried Alice...</div>

</body></html>

Имена в JavaScript

Имена объектов в JavaScript обладаютнекоторыми особенностями. Здесьнельзя использовать точки, дефисы,пробелы или другие разделители. Вме-сто этого сложные слова записываютсяследующим образом: все буквы долж-ны быть строчными, кроме первойбуквы слов, стоящих за первым сло-вом. CSS-свойство font-size преобразу-ется в fontSize.Я рекомендую придерживаться этихправил при присвоении имен функци-ям и переменным JavaScript, а такжеCSS-классам и ID. Это значительнооблегчит вашу работу.


CSS-класс объектаВ возможности изменять и добавлять от-дельные определения есть много полезно-го (см. предыдущий раздел). Но на изме-нение нескольких определений тратитсямного времени. Вместо этого можно мо-дифицировать сразу несколько определе-ний (рис. 15.3 и 15.4). Данную задачу не-трудно решить, изменив весь CSS-классобъекта (листинг 15.2).

Изменение CSS-класса объекта

1. <script scr="findDOM.js"></script>В любую функцию JavaScript, котораянепосредственно обращается к объектуна экране, нужно включить код findDOM.Для этого создайте внешний текстовыйфайл и затем импортируйте его на тустраницу, где он будет использоваться.

2. function setClass(objectID,newClass)->{...}

В сценарий JavaScript добавьте функциюsetClass(). При обращении к объектуона использует его ID, который переда-ется в функцию как переменная objectID.Таким образом создается DOM. Затемфункция с помощью DOM изменяет имякласса, применяемого к объекту, на но-вое (newClass).

3. #object1 {...}Установите ID слоев с помощью любыхстилей по вашему желанию.

4. .copyTiny {...}Определите классы, которые будут при-меняться к объектам.

Рис. 15.3. До того как указатель мыши пройдетнад фразой «Drink Me», текст будет отображатьсячерным цветом, а его размер останетсянебольшим, так как используется класс copyTiny

Рис. 15.4. После того как указатель мыши прошелнад фразой «Drink Me», шрифт стал красным, егоразмер увеличился, так как класс переименовалив copyHuge

279

5. onmouseover="setClass('object1',->'copyHuge');"

Чтобы вызвать функцию, созданную нашаге 2, добавьте обработчик событий.Передайте функции ID объекта, к кото-рому вы хотите обратиться, и названиестиля, который требуется применитьк объекту.


Листинг 15.2. Функция setClass()переопределяет CSS-класс конкретного объектав окне браузера

<html><head>


function setClass(objectID,newClass) {var dom = findDOM(objectID,0);dom.className = newClass;


#object1 { position: relative; }#eatMe {

position: relative;margin-right: 20px; }

#drinkMe {position: relative;margin-left: 20px; }

.copyTiny {font-size: 4px;position: relative;color: black;width: 300px; }

.copyHuge {font-size: 24px;position: relative;color: red;width: 600px; }

.tiny {font-size: 4px;position: relative;color: black; }

.huge {font-size: 18px;position: relative;color: black; }</style>

</head><body>

<span class="huge" id="eatMe"->onmouseover="setClass('object1',->'copyHuge'); setClass('drinkMe',->'huge'); this.className = 'tiny';">


Eat Me</span> |<span class="tiny" id="drinkMe"->onmouseover="setClass('object1',->'copyTiny'); setClass('eatMe',->'huge'); this.className = 'tiny';">

Drink Me</span>

<div id="object1" class="copyTiny">->'Curiouser and curiouser!' cried->Alice...</div>

</body></html>

CSS-класс объекта


Добавление новогоправилаВ данном разделе описывается работа толь-ко с Internet Explorer.Умение изменять классы вам очень приго-дится в дальнейшем (см. предыдущийраздел). Но что делать, если требуетсядобавить правило, которое в данный мо-мент не существует, или заменить имею-щееся (рис. 15.5 и 15.6)?Сначала следует добавить в тэг <style> ID,с помощью которого он становится до-ступным из сценария (листинг 15.3). Затемдля доступа к таблице стилей можно ис-пользовать JavaScript.1. function addARule(selector,definition)

->{...}

В сценарий JavaScript добавьте функ-цию addARule(). Она привносит в табли-цу стилей, которая будет определенана шаге 2, новое правило. С этой цельюиспользуется имя селектора, для кото-рого добавляется правило (см. «ТипыHTML-тэгов» в главе 1), и определения,которые вы хотите применить к данно-му селектору.

2. <style id="myStyles">...</style>В заголовок документа добавьте тэг<style>, даже если вы не устанавливае-те начальные правила, и присвойте емуID, который функция из шага 1 будетиспользовать при обращении к таблицестилей.

Рис. 15.5. До того как пользователь щелкнетпо ссылке, в окне используются значения,установленные на странице по умолчанию(черный текст на белом фоне)

Рис. 15.6. После щелчка по ссылке вступаетв действие набор правил, установленный для тэга<body> (белый текст на красном фоне)

Листинг 15.3. Функция addARule() добавляетновое CSS-правило в таблицу стилей myStyles

<html><head>

<script>function addARule(selector,definition) {document.styleSheets.myStyles.addRule->(selector,definition);}

</script><style id="myStyles">

h1 { font-size: 24pt;}body { color: gray; }

281

3. onClick="addARule('body','background-->color:red;color:white');"

Чтобы вызвать функцию addARule(),созданную на шаге 1, добавьте обработ-чик событий. Передайте функции на-звание селектора, в который требуетсядобавить правило, и определения, кото-рые необходимо приписать этому пра-вилу.

Отмена таблицы стилейНиже рассматривается работа только с In-ternet Explorer. Здесь рассказывается, какотменить CSS-правило – не изменить илидобавить, а удалить и вернуться к значени-ям, установленным в браузере по умолча-нию (рис. 15.7 и 15.8).Как и при добавлении правила (см. преды-дущий раздел), вы можете получить до-ступ к стилю, у которого есть ID. Но здесьвы не добавляете правило, а исключаетеего (листинг 15.4).Иногда посетители хотят видеть текст безстилей. Это их выбор, у каждого свой вкус.В Internet Explorer можно отменять от-дельные стили, а затем включать их снова.Данная функция не работает в Netscape 6.

Отключение таблицы стилей

1. <style id="strangeStyle">...</style>В заголовке документа установите таб-лицу стилей. Присвойте тэгу <style> IDи имя. В этом примере таблица стилейназывается strangeStyle.

Отмена таблицы стилей



<h1><a href="javascript:void('');"->onClick="addARule('body',->'background-color:red;->color:white');">

Click Me</a></h1>

<p>Down, down, down. Would the fall-><i>never</i> come to an end!.../p>

</body></html>

Рис. 15.7. До того как посетитель щелкнетпо ссылке, размер шрифта останется большим,цвет – светлым. Такой текст трудно читать


Рис. 15.8. После щелчка по ссылке стиль текстаопределяет браузер (по умолчанию это шрифтчерного цвета размером 12 пунктов)

2. onClick="document.styleSheets.->strangeStyle.disabled=true;"

Укажите обработчик событий, в кото-ром свойству disabled таблицы стилей,определенной на шаге 1, присваиваетсязначение true.

Если вы присвоите свойству disabledзначение false, а не true, таблица стилейстанет активной.

Листинг 15.4. Когда посетитель щелкает по слову«here», свойству disabled таблицы стилейstrangeStyle присваивается значение true. Оноотменяет действие таблицы стилей, а всеэлементы на экране, использующие ее,принимают первоначальный вид. Для элементатакже установлено свойство display, которомуприсваивается значение none. В данном свойственаходится обработчик событий onClick. Элементисчезает вместе со стилем, и это не запутаетпосетителя сайта, так как стиль уже отменен

<html><head>

<style id="strangeStyle">.bizzaro {

color: #eeeeee;font: italic 100px fantasy; }</style>

</head><body>

<span class="bizzaro">'What a curious->feeling!'</span><br><span id="styleOff">If you can not read->the above, click –> <span onClick=->"document.styleSheets.strangeStyle.->disabled=true; document.all.styleOff.->style.display='none';">here</span>-><– </span>

</body></html>

1616161616Слои Netscape

С помощью слоев Netscape в окне браузерасоздаются независимые объекты, которыеможно позиционировать, скрывать илиотображать, помещать в стек или изменятьих положение. Чем же слои Netscape отли-чаются от слоев CSS? В основном их функ-ции похожи, но само устройство слоев раз-лично. Слой Netscape представляет собойеще один объект на экране, но метод егосоздания немного отличается от методасоздания объекта (см. раздел «Созданиеобъекта» в главе 11).Важным отличием слоев Netscape являет-ся то, что они поддерживаются только од-ним браузером, Netscape 4. Компания Net-scape обещала, что последующие версиибраузеров будут работать со слоями, ноэтого не произошло. Netscape 6 (выпущен-ный после Netscape 4) не поддерживаетслои Netscape.Но поскольку слои используются в Net-scape 4, их приходится включать в некото-рые версии общего для браузеров DHTMLвместе с технологиями, которые характер-ны для Internet Explorer.В этой главе рассказывается, как приме-нять тэги <layer> и <ilayer>, как добавлятьвнешнее содержимое и при необходимос-ти менять его.

Слои Netscape284

Что такое слой NetscapeСлой Netscape – это независимая частьWeb-содержимого внутри HTML-доку-мента, которая определяется с помощьюодной из двух пар тэгов:

<layer>. Его эквивалент в CSS – <divstyle="position:absolute;">;<ilayer>. Его эквивалент в CSS – <spanstyle="position:relative">.

На Web-странице разрешается помещатьсколько угодно слоев Netscape. Каждыйслой имеет собственные свойства, кото-рыми вы можете управлять динамическис помощью JavaScript.В общем, все, что применимо к CSS-слоям,применимо и к слоям Netscape. Как и CSS-слои, слои Netscape допустимо помещатьв стек и менять местами, делать невидимы-ми (с помощью hide) или видимыми (ис-пользуя значение show), а также определятьизображения на заднем плане и цвет фона.Большим преимуществом слоев являетсято, что с их помощью можно добавлятьсодержимое из внешнего URL и динами-чески модифицировать его. Такого же ре-зультата добиваются и с помощью CSS,используя <ilayer> в Netscape и <iframe>в Internet Explorer (см. раздел «Тэги ilayerи iframe» в главе 23).Другим преимуществом слоев Netscape яв-ляется то, что с ними разрешается исполь-зовать обработчики событий JavaScript, чтоневозможно сделать в Netscape 4 с помо-щью CSS-слоев (см. раздел «Обработчи-ки событий» в главе 11). В Internet Explo-rer и в Netscape 6 обработчики событий,связанные с указателем мыши, допустимопомещать в любой HTML-тэг. Однаков Netscape 4 их можно запускать тольков тэгах <a> или <layer>.

Слои Netscape в сравнении с CSS-слоями

Разница между слоями Netscape и CSS,стандартизированными W3C, заклю-чается в позиционировании элементовна экране. Компания Netscape, при-держиваясь тенденции, которая появи-лась с выпуском первого браузера Net-scape, добавляла новые тэги в надеждерасширить возможности HTML.В свою очередь W3C пытался сохра-нить HTML как чистый язык разметкитекста, добавляя новые свойства в стан-дарт таблиц стилей.Создатели как Netscape, так и InternetExplorer обещали придерживаться стан-дартов W3C в новых версиях браузеров.Так, CSS-слои становятся будущим ди-намического содержания Web.

285

Создание слояВ отличие от CSS-слоев, слои Netscape(рис. 16.1) требуют использования одногоиз двух HTML-тэгов (расширения HTMLв Netscape), которые определяют, будет лисодержимое слоя свободно позициониро-ваться на экране (табл. 16.1). Слои, позици-онированные абсолютно, задействуют тэги<layer>...</layer> (сравните с position:absolute). В относительных слоях приме-няются тэги <ilayer>...</ilayer> (сравни-те с position:relative).Как и у многих HTML-тэгов, у тэга <layer>есть большой набор атрибутов, кото-рые управляют его видом и поведением(табл. 16.2).

Что такое слой Netscape

Таблица 16.1. Тэги <layer>

Тэг Действие тэга

<layer>... В Netscape 4 создается</layer> дискретная область HTML-кода,

которую можно разместитьв любом месте страницыи определить с помощьюатрибутов слоя

<ilayer>... В Netscape 4 создается</ilayer> дискретная область HTML-кода,

которую можно позиционироватьотносительно окружающих ееэлементов и определитьс помощью атрибутов слоя

<nolayer>... Содержимое, предназначенное</nolayer> для браузеров, которые

не поддерживают слои,скрывается от браузеров,их поддерживающих

Рис. 16.1. Пять слоев в окне браузера Netscape 4


В основном атрибуты слоев совпадаютс теми, что используются в CSS. Но естьнесколько исключений:

pageX и pageY. С помощью этих атрибу-тов можно позиционировать слои абсо-лютно, считая началом верхний левыйугол документа, даже если слой встро-ен в другие;

Таблица 16.2. Атрибуты тэга <layer> в Netscape

Атрибут Значения Действие

id <alphanumeric> Определение слоя для использования в JavaScript

name <alphanumeric> Идентичен ID. Предпочтительнее использовать ID

left <length> Горизонтальное положение по отношениюк родительскому элементу

top <length> Вертикальное положение по отношениюк родительскому элементу

pageX* <length> Горизонтальное положение; всегда по отношениюк окну

pageY* <length> Вертикальное положение; всегда по отношениюк окну

z-index <length> Порядок уровня в стеке по отношению к другим

above* <alphanumeric> Имя слоя, который находится над текущим

below* <alphanumeric> Имя слоя, который находится под текущим

width <length> Длина по горизонтали

<percentage>

height <length> Длина по вертикали

<percentage>

clip <length,length> Видимая область

visibility show Состояние видимости

hide

inherit

bgcolor <color> Цвет фона слоя

background-color <color> Аналогично предыдущему

background <url> Фоновое изображение (в формате GIF или JPEG)

background-image <url> Аналогично предыдущему

scr* <url> URL внешнего содержимого,которое нужно загрузить в слой

* Нет эквивалентов в CSS.

scr. Используя данный атрибут, можноопределять внешний файл, который за-тем включается в документ (см. следу-ющий раздел);above и below. Эти атрибуты задаютв свойстве z-index трехмерное позици-онирование слоев.

287

Листинг 16.1. Пять слоев определяют пятьположений

<html><body>

<layer top="150" left="300"->bgcolor="#666666"><h2>Layer 1</h2></layer>

<layer top="-5" left="-5"->bgcolor="#CCCCCC"><h2>Layer 2</h2><layer top="100" left="100"->bgcolor="#999999"><h2>Layer 3</h2></layer></layer>

<layer top="150" left="85"->bgcolor="#666666"><h2>Layer 4</h2><ilayer top="0" left="100"->bgcolor="#CCCCCC"><h2>Layer 5</h2></ilayer></layer>

</body></html>

Определение слоя

1. <layer top="150" left="300"->bgcolor="#666666">

В HTML-документе создайте слой с по-мощью тэга <layer> или <ilayer>.В табл. 16.2 перечислены атрибуты,которые можно добавить в тэг, а так-же действия, которые эти атрибутыпроизводят со слоем (листинг 16.1).

2. <h2>Layer 1</h2>В тэг <layer> поместите содержимоеслоя. Оно ничем не отличается от обыч-ного содержимого HTML-документа.

3. </layer>Закройте тэг с помощью соответствую-щего ему закрывающего тэга (</layer>или </ilayer>).

Inline-тэг <ilayer> определяется так же,как и тэг <layer>, описанный в этом раз-деле.

Создание слоя


Импорт внешнегосодержимого с помощьюслоев NetscapeОдна из наиболее полезных функций слоевNetscape – возможность импорта внешнегосодержимого из других HTML-файлов, тоесть содержимое слоя легко импортироватьиз какого-либо HTML-документа.

Добавление содержимого в слой

1. layer1.htmlСоздайте внешний файл, который будетимпортироваться в файл index.html.В нем может содержаться любой стан-дартный код HTML, который обычнонаходится внутри тэга <body> в HTML-документе, но в нем не должно быть тэ-гов <html>, <head> и <body> (листинг 16.2).

2. index.htmlСоздайте HTML-файл, куда будет им-портироваться файл, созданный на ша-ге 1, и сохраните его как index.html.Действия, описанные в шагах 3 и 4, вы-полняются с этим файлом (листинг 16.3).

3. <layer id="layer1" scr="layer1.html"->bgcolor="#CCCCCC">

Откройте тэг <layer>. В тэге слоя изшага 1 напишите атрибуты, которыевы хотите использовать для определе-ния слоя. В данном примере в слой за-гружается внешний документ. Слойопределяется с помощью имени (layer1)и цвета фона.

Листинг 16.2. Файл layer1.html включает в себявнешнее содержимое, которое используетсяв файле index.html. Заметьте, что в нем неттэгов <html>, <head> и <body>

<h2>Layer 1</h2><img scr="alice26.gif" width="134"->height="150">

Листинг 16.3. В файле index.html содержитсячетыре слоя Netscape. В первый слойимпортируется содержимое из файлаlayer1.html

<html><body>

<layer id="layer1" scr="layer1.html"->bgcolor="#CCCCCC"></layer>

<layer id="layer2" above="layer1"->width="100" height="100" top="125"->left="125" bgcolor="#666666"><h2>Layer 2</h2></layer>

<layer id="layer3" top="10" left="350"->bgcolor="#CCCCCC"><h2>Layer 3</h2><layer id="layer4" pagey="125"->pagex="250" bgcolor="#666666"->width="100" height="100"><h2>Layer 4</h2></layer></layer>

</body></html>

289

4. </layer>Закройте тэг <layer>. Если вы определя-ете внешний источник для слоя с помо-щью атрибута SCR, вы не сможете доба-вить никакое другое содержимое внут-ри контейнера уровня.В результате первый слой втягивает в се-бя внешний файл с Болванщиком. Из-затого что во втором слое установлен ат-рибут above, первый слой находится надвторым, хотя первый слой был опреде-лен раньше (рис. 16.2). Четвертый слойвстроен в третий, но он имеет абсолют-ное положение по отношению ко всемудокументу, а не к третьему слою, таккак позиционировался с помощью pageXи pageY.

Импорт внешнего содержимого с помощью слоев Netscape

Рис. 16.2. Определены четыре слоя. В первый слой из внешнего файла импортируетсяизображение Болванщика


Доступ к слоям с помощьюJavaScriptНаряду с атрибутами слоя, тэг <layer> мо-жет включать в себя обработчики событийonMouseOver, onMouseOut, onFocus, onBlurи onLoad. Их добавляют к слою, чтобы по-лучить доступ к функциям JavaScript (см.раздел «Обработчики событий» в главе 11),так как Netscape 4 не позволяет сделать этонепосредственно с помощью CSS-слоев(рис. 16.3 и 16.4).В табл. 16.3 представлены все свойстваобъектов слоя, а также указано, может липользователь менять эти свойства.

Получение доступа к слоям

1. function toggleLayerViz(objectID,->state){...}

В сценарий JavaScript добавьте функ-цию, которая будет менять одно илинесколько свойств слоя Netscape (лис-тинг 16.4). Для этого получите доступк слою, используя его ID в массиве слоев:document.layers[objectID].visibility=->state;

В данном примере изменяется свойствоvisibility, но подобным образом мож-но получить доступ к любому свойству.

2. <layer id="layer1"...>Создайте слой с помощью атрибута id.Чтобы запустить функцию, созданнуюна шаге 1, добавьте обработчик собы-тий в тэг <layer>:onmouseover="toggleLayerViz('layer2',

->'hide')"

Когда указатель мыши проходит надслоем, обработчик вызывает функциюtoggleLayerViz() и передает ей ID тогослоя, состояние которого требуется по-менять.

Рис. 16.4. Когда посетитель проводит указателеммыши над вторым слоем, третий исчезает

Рис. 16.3. При первой загрузке страницына экране видны все три слоя

291Доступ к слоям с помощью JavaScript

Таблица 16.3. Свойства объектов слоя Netscape

Свойство Возможность Действиеего измененияс помощьюJavaScript

document Нет Каждый слой можно рассматривать как независимыйдокумент, который используется для доступак картинкам, апплетам, встроенным элементам,ссылкам и встроенным слоям

name Нет Слою присваивается ID или имя

left Да Горизонтальное положение элемента. Для тэга <layer>оно абсолютное по отношению к странице и относительноепо отношению к окружающим слоям. Для тэга <ilayer>элемент относительно позиционирован в документе илив окружающих его слоях

top Да Вертикальное положение элемента. Для тэга <layer> оноабсолютное по отношению к странице и относительноепо отношению к окружающим слоям. Для тэга <ilayer>элемент относительно позиционирован в документе илив окружающих его слоях

pageX Да Горизонтальное положение элемента по отношениюк документу независимо от типа слоя

pageY Да Вертикальное положение элемента по отношениюк документу независимо от типа слоя

z-index Да Положение слоя в стеке по отношению к слоям,имеющим тот же родительский элемент

visibility Да Видимость слоя на экране

clip.width Да Горизонтальная видимая область слоя

clip.height Да Вертикальная видимая область слоя

bgcolor Да Цвет фона, на котором находится содержимое слоя

backgroundcolor Да Картинка, на фоне которой находится содержимое слоя

siblingAbove Нет Имя или ID слоя, который имеет тот же родительскийэлемент, что и данный слой, и в стеке находится надданным слоем

siblingBelow Нет Имя или ID слоя, который имеет тот же родительскийэлемент, что и данный слой, и в стеке находится подданным слоем

above Нет Имя или ID слоя в z-index, который в стеке находитсянад данным слоем

below Нет Имя или ID слоя в z-index, который в стеке находитсяпод данным слоем

parentLayer Нет Имя родительского элемента слоя. По умолчанию, еслинет родительского элемента, это имя окна

scr Да URL внешнего содержания для слоя


Допустимо изменять источник файла (scr)для слоя. Таким образом, вы получаете воз-можность динамически управлять выборомотображаемого внешнего HTML-файла (см.главу 23). В CSS такой функции нет.

Независимо от того, позиционируете высодержимое с помощью слоев Netscape илиCSS-слоев, Netscape 4 для доступа к элемен-там использует DOM слоя. С помощью CSS-слоев Navigator 4 обращается с различны-ми ID как со слоями, к которым можно по-лучить доступ через соответствующую DOM(см. раздел «DOM – путеводитель по Web-странице» в главе 11).

В массиве слоев Netscape, как и во всех мас-сивах, первый слой всегда имеет номер 0.Так, третий слой, определенный в докумен-те, на самом деле является вторым (0, 1, 2)в любом массиве.

В отличие от большинства элементов, ко-торым можно приписать обработчик со-бытий, из событий, находящихся в слоях,можно вызывать только функции и мето-ды JavaScript. В кавычках после обработ-чика событий JavaScript помещать нельзя.

Заметьте, что в функции toggleLayerViz()использовалась переменная objectID, а неlayerID. На самом деле при некоторыхограничениях переменную можно называтьлюбым именем. Слой представляет собойеще один объект на экране.

Листинг 16.4. В окне создано три слоя, в каждомиз которых используется обработчик событийonmouseover для сокрытия последующего слояи onmouseout для отображения предыдущего

<html><head>

<script language="JavaScript">function toggleLayerViz(objectID,state){->document.layers[objectID].visibility=->state;}}


<layer id="layer1" bgcolor="#CCCCCC"->width="100" height="100"->top="10" left="10" onmouseover=->"toggleLayerViz('layer2','hide');"->onmouseout="toggleLayerViz('layer3',->'show');" visibility="show">

<center><h2>Layer 1</h2></center></layer>

<layer id="layer2" bgcolor="#999999"->width="100" height="100" top="10"->left="200" onmouseover=->"toggleLayerViz('layer3','hide');"->onmouseout="toggleLayerViz->('layer1','show');" visibility="show">


<layer id="layer3" bgcolor="#666666"->width="100" height="100" top="200"->left="100" onmouseover=->"toggleLayerViz('layer1','hide');"->onmouseout="toggleLayerViz('layer2',->'show');" visibility="show">


</body></html>

293

Изменение слоевс помощью JavaScriptКроме объекта layer, позволяющего ме-нять различные свойства, существует не-сколько методов, с помощью которыхможно выполнять различные задачи в слое(рис. 16.5). Данные методы перечисленыв табл. 16.4.Метод – это стандартная функция JavaScript,которая выполняет простые задачи, напри-мер перемещение уровня по экрану, гораз-до быстрее, позволяя сэкономить время.

Изменение слоев с помощью JavaScript

Рис. 16.5. Перемещая указатель мыши над слоем,мы постепенно открываем изображениеЧеширского кота. Если провести мышьюв обратном направлении, кот исчезнет

Таблица 16.4. Методы объекта layer в Netscape

Метод Действие

moveBy(x,y) Перемещает слой из текущего положения вправо на x пикселов и внизна y пикселов

moveTo(x,y) Перемещает слой внутри содержащего его слоя или внутри документав точку с координатами (x,y)

moveToAbsolute(x,y) Перемещает слой внутри документа в точку с координатами (x,y)

resizeBy(x,y) Изменяет текущий размер слоя на x пикселов вправо и на y пикселоввниз

resizeTo(x,y) Ширине слоя присваивает значение x пикселов, а высоте – y пикселов

moveAbove(layer) Помещает данный слой над определенным слоем

moveBelow(layer) Помещает данный слой под определенным слоем

load(URL,width) Загружает URL, определенный как источник содержания для слояс указанной шириной. Если ширину изменять не потребуется, ее можноне задавать


Увеличение размеров слоя

1. function clipLayer(objectID,x,y) {...}Определите функцию, использующуюобъект layer, и метод, который хотитеприменить к уровню (листинг 16.5).В этом примере для изменения размераlayer1 служит метод resizeTo: docu-ment.layers[objectID].resizeTo(x,y)

Похожим образом можно задейство-вать любой метод из табл. 16.4.

2. <layer id="cheshireCat">Создайте слой с указанием атрибута id.Чтобы вызвать функцию, созданную нашаге 1, добавьте обработчик событийв тэг <layer>:onmouseover="clipLayer('cheshireCat',

->400,271)"

Передайте функции ID слоя и парамет-ры применяемого метода.

К сожалению, Netscape 6 не поддержива-ет описанные методы, в противном слу-чае можно было бы сэкономить многовремени.

Листинг 16.5. Функция clipLayer() изменяетразмеры слоя. При первой загрузке страницыразмер видимой области слоя составляет200×175 пикселов. Когда указатель мышипроходит над видимой частью слоя, размеризображения увеличивается до 400×271 пикселов.Когда указатель мыши выходит за пределы слоя,размер становится прежним – 200×175

<html><head>

<script language="Javascript">function clipLayer(objectID,x,y){->document.layers[objectID].->resizeTo(x,y);}}


<layer id="cheshireCat" clip="200,175"->onmouseover="clipLayer('cheshireCat',->400,271)" onmouseout="clipLayer->('cheshireCat',200,175)" top="0"->left="0" visibility="show">

<img scr="alice24.gif" width="400"->height="271">

</layer></body></html>

295

Отображение содержимогослоев в браузерах, которыеих не поддерживаютКак тэг <noframes> позволяет отображатьсодержимое фрейма в браузерах, которыене распознают фреймы, так и тэг <nolayers>служит для отображения содержимогослоев в браузерах, которые их не поддер-живают (рис. 16.6 и 16.7).

Добавление содержимого в тэг<nonlayer>

1. <ilayer id="special" top="10" height=->"10" scr="daily_special.html">-></ilayer>

Добавьте содержимое слоя Netscape,которое вы хотите отобразить на Web-странице. В этом примере (листинг 16.6)импортируется внешний файл daily_special.html (листинг 16.7) – см. раздел«Импорт внешнего содержимого с по-мощью слоев Netscape».

2. <nolayer>

Отображение содержимого слоев в браузерах, которые их не поддерживают

Рис. 16.7. Netscape 6 не поддерживает тэг<ilayer>, но в нем доступна ссылка

Рис. 16.6. Страница отображается в Netscape 4,в слой импортируется внешний файл


Листинг 16.6. В тэге <ilayer> импортируетсявнешний файл daily_special.html, такжев этот тэг включена ссылка на страницу,помещающаяся в тэге <nolayer>

<html><body>

<h1>Mad Tea-Party Menu</h1><h3>DAILY SPECIAL</h3><p><ilayer id="special" top="10"->height="10" scr="daily_special.html"></ilayer><nolayer><a href="daily_special.html">The Daily->Specials are available here!</a></nolayer>

</body></html>

Листинг 16.7. При использовании браузераNetscape 4 код импортируется в слой в файлеindex.html. В противном случае добавляетсяссылка на страницу, в тэг <nolayers>помещается обратная ссылка на меню

<nolayers><a href="index.html"><<Return to->Menu</a>

</nolayers><!-HTML CONTENT GOES HERE ->

С помощью тэга <nolayer> в докумен-те откройте область, не содержащуюслоев.

3. <a href="daily_special.html">The Daily->Specials are available here!</a>Добавьте содержимое, которое вы хо-тите отобразить в браузерах, не поддер-живающих слои Netscape. В этом при-мере добавлена ссылка на файл, кото-рый импортируется на шаге 1.

4. </nolayer>Закройте тэг <nolayer>.

1717171717Internet Explorerдля Windows

Internet Explorer для Windows имеет рядвстроенных специальных возможностей,которые позволяют оживить Web-страницу.Например, использование фильтров припереходе от объекта к объекту или от стра-ницы к странице поможет украсить стра-ницу.Специальные эффекты, которые рассмат-риваются в этой главе, поддерживаютсятолько Internet Explorer 4/5/6 для Win-dows. Их следует применять осторожно,поскольку эти эффекты не поддержива-ются браузерами Netscape (а также верси-ями Internet Explorer для Macintosh илиUnix). Рассматриваемые возможности ос-нованы на технологии ActiveX, все правана использование которой принадлежатMicrosoft.В отличие от JavaScript или каких-либодругих Web-технологий, ActiveX – нестан-дартизированная технология. Она до сихпор не поддерживается другими браузера-ми (кроме вышеупомянутого Internet Explo-rer для Windows). Таким образом, вы може-те применять эти эффекты при созданииWeb-страниц, если посетителями вашегосайта будут преимущественно пользовате-ли Windows-версии Internet Explorer.

Internet Explorer для Windows298

Перетекание объектовБезусловно, наиболее популярным спосо-бом перехода от элемента к элементу явля-ется перетекание одного объекта в другой(фединг). В Internet Explorer для Windowsвы можете взять два изображения (или двалюбых других элемента на экране), кото-рые будут сменять друг друга. Когда пер-вое изображение медленно исчезает, «рас-творяясь» в другом, второе постепенно про-является (рис. 17.1).

Определение перетеканияэлементов

1. function fadeElement(){…}Используя JavaScript, определите функ-цию fadeElement() в заголовке докумен-та. Она применяет фильтр blendTransдля смены изображений image1 из фай-лов alice04.gif и alice05.gif (листинг 17.1).

2. <img id="alice" src="alice04.gif"Выберите изображение, которое появля-ется первым при загрузке вашей Web-страницы.

3. style="filter:blendTrans(duration=3)"->onclick="fadeElement()">

В атрибут style изображения image1 до-бавьте вызов фильтра blendTrans InternetExplorer и установите длительность 3 с.Фильтр активизируется при щелчке поизображению, после чего вызываетсяфункция fadeElement().

Рис. 17.1. Перетекание одного изображенияв другое

Листинг 17.1. Функция fadeElement() вызываетфединг изображений из файлов alice04.gifи alice05.gif

<html><head>

<script>var isFade = 0;

function fadeElement() {if (document.all && isFade == 0) {

isFade = 1;alice.filters.blendTrans.Apply();alice.src = "alice05.gif";alice.filters.blendTrans.Play();

}}

</script></head>

299Смена страниц


<body>This fade will only work in Internet->Explorer 4 and above for Windows.

<img id="alice" src = "alice04.gif»->style="filter:blendTrans->(duration=3)" onclick=->"fadeElement()"><br>

</body></html>

Рис. 17.2. Страница показывается в тот момент,когда изображение с королем и королевой еще незаняло место предыдущего изображения

Таблица 17.1. Фильтры преобразования в InternetExplorer

Преобразование Значение

BoxIn 0

BoxOut 1

CircleIn 2

CircleOut 3

WipeUp 4

WipeDown 5

WipeRight 6

WipeLeft 7

VerticalBlinds 8

HorizontalBlinds 9

CheckerboardAcross 10

ChekerboardDown 11

RandomDissolve 12

SplitVerticalIn 13

SplitVerticalOut 14

SplitHorizontalIn 15

SplitHorzontalOut 16

StripsLeftDown 17

StripsLeftUp 18

StripsRightDown 19

StripsRightUp 20

RandomBarsHorizontal 21

RandomBarsVertical 22

Random 23

Смена страницКогда посетитель переходит с одной Web-страницы на другую, ему приходитсяждать, пока исчезнет первая картинка,а новая медленно проявится. ФильтрыRevalTrans() позволяют переходить отодной страницы к другой, создав некото-рое подобие анимации (рис. 17.2).В табл. 17.1 перечислены использующиесядля таких переходов фильтры.


Установка перехода междустраницами

1. <meta http-equiv="Page-Enter"Поместите тег <meta> в заголовке доку-мента (листинг 17.2). Для события Page-Enter установите атрибут http-equiv.

2. content="RevalTrans(Duration=20,->Transition=3)>

Сначала введите атрибут content для тега<meta>, чтобы активизировать фильтрRevealTrans(), установив длительность2 с. Затем укажите вид перехода из таб-лицы. В этом примере описывается эф-фект сужающейся окружности.

3. <meta http-equiv="Page-Exit" content=->"RevalTrans(Duration=20,

->Transition=3)>

Чтобы запустить фильтр в случае,если посетитель покидает Web-стра-ницу, введите еще один тег <meta> длясобытия Page-Exit. В данном примереописывается фильтр расширяющейсяокружности.

Листинг 17.2. В данном примере тег <meta>используется для активизации фильтров переходав случаях, когда документ открыт и закрыт

<html><head>

<meta HTTP=EQUIV="Page-Enter"->CONTENT="RevealTrans(Duration=20,->Transition=3)"><meta HTTP=EQUIV="Page-Exit"->CONTENT="RevealTrans(Duration=20,->Transition=3)">

</head><body style="background-color:red">

This transition will only work in-> Internet Explorer 4 and above for->Windows.<center><a href="page2.html">

<img src = "alice01.gif"->height="90%"><br>Next Picture ->

</a></center>

</body></html>

301

Эффект размытогоизображенияЭффект размытого изображения (или тек-ста) помогает создать впечатление, чтоизображение (текст) движется (рис. 17.3).

Создание эффекта размытогоизображения

1. function blurOn(currStrength,currDirection){…}

При помощи JavaScript добавьте функ-цию blurOn() в заголовок вашего до-кумента. Данная функция рекурсивноприменяет размывание к изображениюblurMe. Это происходит до тех пор,пока значение strength не достигнет360. Данный атрибут (strength) опре-деляет степень размытости изображе-ния (листинг 17.3).

2. <body on load="blurOn(15, 15)">Добавьте обработчик событий onLoad,который вызовет функцию blurOn.

3. <img id="blurMe" src="alice33.gif"->height="95%" style="FILTER:

->blur(strength=0, direction=5)">

В теле документа укажите, для какогоизображения следует использовать эф-фект размытости. Для тэга <img> опреде-лите атрибут style. Присвойте перемен-ным strength и direction начальное зна-чение 0.

Эффект размытого изображения

Рис. 17.3. Изображение грифона размытопо горизонтали

Листинг 17.3. Функция blurOn() медленноразмывает изображение по горизонтали

<html><head>

<script>function blurOn(currStrength,->currDirection) {

if (document.all && currStrength < 360){

currStrength += 1;currDirection += 1;document.all.blurMe.style.filter =->"blur(strength= " + currStrength->+ ", " + currDirection +")";setTimeout("blurOn(" + currstrength->+ ", " + currDirection + ")",100);

}}

</script></head><body onLoad="blurOn(15,15)">

The blur will only work in Internet->Explorer 4 and above for Windows.<img id="blurMe" src="alice33.gif"->height="95%" style="FILTER:blur->(strength=0, direction=5)">

</body></html>


Эффект волныФильтр «волнистых» изображений позво-ляет добавить эффект волны. Применивэтот фильтр, вы увидите, что изображениеведет себя подобно флагу, развевающему-ся на ветру (рис. 17.4).

Создание эффекта волны

1. <img src="alice08.gif" height="90%"Определите изображение в вашем до-кументе (листинг 17.4).

2. style="FILTER:wawe(freq=3,->strength=6)">

Установите свойство style для изобра-жения, используя «волновой» фильтрс частотой 3 (этот атрибут задает ко-личество «гребней волны»). Присвойтеатрибуту strength значение 6 (размер«волны»).

Рис. 17.4. Пока Алиса переплывает с одного краяэкрана на другой, по изображениюперекатываются волны

Листинг 17.4. В данном примере «волновой»фильтр используется для изображения alice08.gif

<html><body>

The wave will only work in Internet->Explorer 4 and above for Windows.

<img src="alice08.gif" height="90%"->style="FILTER:wave(freq=3,->strength=6)">

</body></html>

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

Часть IIIИспользование инструментов

для создания DHTML и CSS

ГЛАВА 18 ◆◆◆◆◆ Знакомство с GoLiveЗнакомство с GoLiveЗнакомство с GoLiveЗнакомство с GoLiveЗнакомство с GoLive ........................................................................................................................................................................................................................................... 304304304304304ГЛАВА 19 ◆◆◆◆◆ Введение в DreamweaverВведение в DreamweaverВведение в DreamweaverВведение в DreamweaverВведение в Dreamweaver .................................................................................................................................................................................................................. 317317317317317

1818181818Знакомство с golive

GoLive представляет собой пакет программ,предназначенный для создания HTML-стра-ниц. В нем соединены редактор HTML-кодаи WYSIWYG-редактор (What You See IsWhat You Get – что ты видишь, то и полу-чаешь). Данный пакет был создан компа-нией GoLive и первоначально называлсяCyberStudio. Затем права на пакет GoLiveбыли приобретены компанией Adobe Sys-tems Inc., которая и направила все усилияна разработку, вероятно, одного из самыхярких и успешных продуктов для созданияWeb-приложений.В течение многих лет пакет GoLive совер-шенствовался, изменялся, присоединяя раз-личные технологии. На сегодняшний деньон включает в себя такие инструменты, какязык описания сценариев JavaScript, CSSи HTML. Тем не менее, совмещая в себе всеперечисленные инструменты, пакет GoLiveимеет простой и понятный интерфейс. Тэгиудобно расположены и могут быть измене-ны из различных палитр. Все модификации,которые вы вносите, сразу отображаютсяна экране. Таким образом, вы можете кон-тролировать рабочий процесс.В этой главе рассказывается, как создаватьв GoLive DHTML и CSS, а также добавлятьстили и анимировать сложные объекты.

305

Рис. 18.1. Интерфейс GoLive включает в себя окно документа, панель инструментов, узел управленияи различные палитры

Интерфейс GoLiveХотя программа GoLive изначально созда-валась не Adobe, тем не менее в ее послед-них версиях воплотились все преимуще-ства продуктов этой компании. КомпанияAdobe внесла туда множество новых функ-циональных возможностей, сумев при этомсохранить хорошую организацию и про-стоту интерфейса.Интерфейс GoLive, построенный по прин-ципу WYSIWYG, позволяет даже новичкамсоздавать собственные Web-страницы. Ноэтот программный пакет также включаетв себя достаточно мощные инструменты

Интерфейс GoLive

редактирования кода (для HTML, JavaScriptи CSS), полезные для профессионалов.Интерфейс можно логически разделить напять областей: окно документа (documentwindow), панель инструментов (toolbar),узел управления (site controls) и другиеинструменты (рис. 18.1).

Окно документа

Окно документа представляет собой частьинтерфейса, в котором отображается код,описывающий Web-страницу. В этом окневы можете редактировать код. Для перехо-да из одного режима в другой щелкните по

Знакомство с GoLive306

кнопке в верхней части окна. Ниже пере-числены все режимы работы в окне GoLive:

Layout Mode (Режим разметки страни-цы) очень похож на аналогичный ре-жим текстового редактора. Он позволя-ет работать непосредственно со страни-цей, а не с HTML-тэгами, и наблюдать,как она изменяется (рис. 18.2);Frame Mode (Фреймовый режим) пред-назначен для размещения и редактиро-вания фреймов на странице;Source Mode (Просмотр исходного ко-да) позволяет редактировать код HTML,CSS и JavaScript (рис. 18.3);Outline Mode (Режим структуры) оченьполезен для просмотра структуры Web-страницы (рис. 18.4);Preview Mode (Режим предварительно-го просмотра) позволяет увидеть стра-ницу такой, какой она будет при запус-ке из браузера.

Панель инструментов

На панели инструментов расположеныкнопки, предназначенные для быстрогодоступа к наиболее часто используемымстилям и функциям. Панель расположенав верхней части экрана, однако ее можносвободно перемещать.Панель инструментов является контекст-но-зависимым элементом интерфейса. Этозначит, что набор инструментов, располо-женных на ней, определяется тем, что вы-делено и что отображается в окне доку-мента. Например, если вы редактируететекст в режиме разметки документа, то напанель выводятся инструменты, необходи-мые для его форматирования (рис. 18.5).Если вы выделите слой (плавающий блокв GoLive), то на панели инструментов по-явятся кнопки, позволяющие изменять раз-мер шрифта, местоположение и выравни-вание слоя (рис. 18.6).

Рис. 18.2. Окно документа в режиме разметки. Выможете добавлять, перемещать и изменятьэлементы, не имея ни малейшего представленияо HTML-тэгах

Рис. 18.3. Окно документа в режиме просмотраисходного кода. Режим позволяет редактироватькод Web-страницы, включая CSS и JavaScript

307

Палитры

Более дюжины различных палитр предо-ставляют доступ к огромнейшему количе-ству свойств и функций. Вы можете отоб-ражать и скрывать палитры из меню Win-dows. Далее перечислены наиболее важ-ные палитры для CSS и DHTML:

Objects (Объекты). Эти палитры обеспе-чивают доступ к бессчетному количе-ству HTML-тэгов и тэгов других объек-тов, которые вы можете использоватьпри создании своей Web-страницы;Color (Цвет). Данная палитра позволяетвыбирать цвета переднего плана и фона;Inspector (Инспектор). Эта палитрапредназначена для определения атри-бутов выделенного объекта. Inspector –контекстно-зависимая палитра, и еесвойства зависят от типа выделенногообъекта;Source Сode (Просмотр исходного ко-да). Данная палитра позволяет читатьи изменять исходный код в режиме раз-метки страницы.

Рис. 18.4. Режим структуры также позволяетредактировать код Web-страницы, однако в этомрежиме отображается иерархическая структуракода, что очень полезно при его проверке

Рис. 18.6. Здесь представлен вид панели при выделении слоя. Определенные элементы (например,выделение документа, предварительный просмотр и вызов справки) остаются не активизированными

Рис. 18.5. Панель инструментов изменяет набор кнопок в зависимости от элементов, выделенных в окнедокумента. На рисунке показан вид панели при выделении текста

Интерфейс GoLive


Узел управления

В GoLive включены великолепные ин-струменты управления страницей и FTP-клиент. Различные опции позволяют нетолько управлять сайтом, но и выбороч-но загружать файлы, которые были не-давно изменены.

Прочие инструменты

GoLive также включает в себя программупроверки орфографии. Наряду с этим дан-ный программный пакет содержит инстру-мент, который помогает определить времязагрузки страницы, способен предупредитьо возможных проблемах, возникающих призагрузке из различных браузеров, а такжепроверить связи между страницами.Кроме того, в GoLive имеется несколькоредакторов новых Web-технологий, в томчисле CSS-редактор и JavaScript.

Внедрение CSSПервая часть этой книги посвящена табли-цам стилей. GoLive содержит ряд инстру-ментов, которые помогают добавлять CSSи управлять видом страницы или целогоWeb-сайта (см. разделы «Добавление CSSна Web-страницу» и «Добавление CSS наWeb-сайт» в главе 2).

Внедрение CSS в Web-страницу

1. Откройте новый или существующийHTML-файл, выбрав в меню пунктыFile ⇒ New (Файл ⇒ Создать) или File ⇒Open (Файл ⇒ Открыть).

Рис. 18.7. Кнопка CSS открывает окно стилейстраницы

Рис. 18.8. В окне стилей отображаются вседоступные для данной Web-страницы стили

Рис. 18.9. Если окно стилей страницы открыто, можно при помощи панели инструментов добавлятьстили, присоединять внешние файлы или копировать выделенные стили

2. В режиме разметки страницы (см. пре-дыдущий раздел) нажмите на кнопкуCSS в верхнем правом углу окна доку-мента (рис. 18.7), чтобы получить до-ступ к окну стилей страницы (рис. 18.8).

3. На панели инструментов (рис. 18.9)щелкните по кнопке выбора типа CSS,который вы хотите использовать: HTML,класс или ID (см. главу 1). Новый эле-мент стиля появляется в окне стилейстраницы.

309

4. В палитре Inspector установите те свой-ства CSS, которые вы будете исполь-зовать (см. ниже раздел «Таблицы сти-лей в палитре Inspector»).

5. После определения всех необходимыхсвойств и правил CSS вернитесь в окнодокумента.

6. Если потребуется указать какие-либоклассы, перейдите в режим разметкистраницы и воспользуйтесь таблицейстилей палитры Inspector (рис. 18.10).

7. Можно также установить и внешниеCSS-файлы, а затем связать их с Web-страницей при помощи GoLive.

Связывание внешнего файлаи Web-страницы

1. Для загрузки нужного файла выберитев меню пункты File ⇒ New Special ⇒Style Sheet Document (Файл ⇒ Новыйспециальный ⇒ Таблица стилей доку-мента) – рис. 18.11.

2. При помощи панели инструментов вы-берите CSS-стиль: HTML, класс или ID.Новый элемент стиля появится в окнестилей страницы.

3. При помощи палитры Inspector устано-вите свойства CSS.

4. Сохраните файл (рис. 18.12).5. Откройте существующий или создайте

новый HTML-документ.6. В режиме разметки страницы в окне

документа нажмите на кнопку CSS.7. На панели инструментов щелкните по

кнопке CSS, чтобы добавить связьс внешним файлом. Пустая ссылка навнешний файл появится в окне стилейстраницы.

Внедрение CSS

Рис. 18.11. Окно внешней таблицы стилей похожена окно стилей страницы (рис. 18.9). Окноостается пустым, пока не введена какая-либоинформация

Рис. 18.12. Сохранение внешней таблицы стилей

Рис. 18.10. При выделении какого-либо элементав режиме разметки страницы активизируетсяпалитра Inspector, которая позволяет получитьдоступ к стилям класса


Рис. 18.13. Если выбрана ссылка на внешнюютаблицу стилей, вы можете ввести ее URL припомощи палитры Inspector

8. Выделив в окне стилей страницы пус-тую ссылку на внешний файл, при по-мощи палитры Inspector введите в нееURL внешнего файла (рис. 18.13).

9. Повторите шаги 1–8 для присоединениявсех необходимых внешних файлов.

В более ранних версиях GoLive существо-вала проблема с прописными буквами.Хотя программа воспринимала прописныебуквы в названиях классов и ID, она заме-няла все прописные буквы в CSS строчны-ми. Тем не менее при создании стилейGoLive использовала нужный регистр. Вомногих браузерах это приводило к возник-новению ошибок.

Таблицы стилей в палитре Inspector

Когда вы добавляете CSS на Web-страни-цу или редактируете таблицы стилей,в палитре Inspector появляются восемьзакладок, которые позволяют получитьдоступ к управлению следующими атри-бутами элемента:

Overview (Обзор). Полностью отобра-жает отредактированный CSS, но недает возможности изменять определе-ния (рис. 18.14);

Font Controls (Шрифт). Позволяет на-страивать свойства шрифта (рис. 18.15);

Text Controls (Форматирование тек-ста). Содержит редактор свойств текста(рис. 18.16);Block (Border and Margin) Controls (Ин-струмент разметки страницы). Предна-значен для управления атрибутами, опи-сывающими внутренние отступы и поляэлементов (рис. 18.17);Position Controls (Позиционирование).Управляет положением элемента на стра-нице (рис. 18.18);

Рис. 18.14. Закладка Overview

311

Рис. 18.15. Закладка Font Controls Рис. 18.17. Закладка Block (Border and Margin)Controls

Рис. 18.16. Закладка Text Controls Рис. 18.18. Закладка Position Controls



Border Controls (Управление рамкой).Позволяет настраивать вид рамки эле-мента (рис. 18.19);Background Controls (Управление фо-ном). Управляет атрибутами фона эле-мента (рис. 18.20);List and Other Controls (Элемент управ-ления списками). Настраивает вид спис-ков и других элементов Web-страницы(рис. 18.21). Стоит отметить, что на дан-ной закладке можно устанавливать дажете CSS-свойства, которые GoLive не под-держивает напрямую.

Рис. 18.19. Закладка Border Controls

Рис. 18.20. Закладка Background Controls

Рис. 18.21. Закладка List and Other Controls

313

Создание слояРанее было показано, как определить CSS-слой, превратив обычный элемент в объект(см. раздел «Создание объекта» в главе 11).GoLive рассматривает CSS-слои как плава-ющие блоки, но тем не менее эти два поня-тия идентичны.

Добавление CSS-слояна Web-страницу

1. В режиме разметки страницы в окнедокумента дважды щелкните по кноп-ке Floating Block (Плавающий блок)в палитре Object (Объект) – рис. 18.22.Теперь этот слой появится в окне доку-мента как пронумерованный прямо-угольник. Числа расположены в поряд-ке создания слоев.

2. Переместите курсор к любому краюслоя таким образом, чтобы стрелка сме-нилась изображением руки (рис. 18.23).Затем нажмите кнопку мыши, чтобывыделить или перетащить объект в лю-бое место на экране.

3. Для изменения размера выделенногоблока, перетащите один из манипулято-ров, расположенных в каком-либо изего углов (рис. 18.24).

Создание слоя

Рис. 18.22. Кнопка Floating Block, позволяющаядобавлять новые слои, располагается в палитреObject

Рис. 18.23. Вы можете выделить весь слой,щелкнув мышью по одной из его границ

Рис. 18.24. Если слой выделен, легко изменятьего ширину или высоту при помощи одногоиз манипуляторов


Изменение свойств CSS-слоя

1. Выделив слой в режиме разметки стра-ницы, при помощи палитры Inspec-tor настройте необходимые свойства(рис. 18.25). Палитра Inspector вклю-чает и элементы управления анимаци-ей (см. следующий раздел).

2. Введите имя слоя, которое будет ис-пользоваться как уникальный ID в CSS.

3. Укажите координаты верхнего левогоугла слоя (см. раздел «Определение по-ложения по отношению к левому верх-нему углу» в главе 8).

4. Задайте высоту и ширину слоя (см. раз-дел «Ширина и высота элемента» в гла-ве 7).

5. Впишите глубину слоя для объектовс z-индексом (см. главу 8).

6. Определите, будет ли слой видимым(см. «Определение видимости элемен-та» в главе 9).

7. Установите фоновое изображение илицвет (см. главу 6).

Помните, что CSS-слой – это объект, кото-рому присвоен уникальный ID с опреде-ленным типом расположения. CSS-слойобычно заключается в тэги <div> или<span>.

По умолчанию положение слоя заданов абсолютных координатах. Но вы можетезадать положение и в относительных ко-ординатах с помощью палитры Inspector.

Рис. 18.25. При выделении слоя в режимеразметки страницы палитра Inspector позволяетизменять свойства слоя

315

Создание DHTML-анимацииРанее был затронут вопрос создания обыч-ной поточечной анимации (см. раздел«Анимационные объекты» в главе 14). Дан-ный способ очень эффективен для переме-щения простого объекта по прямой, но бо-лее сложные способы анимации лучше со-здавать при помощи программ, подобныхGoLive. Дело в том, что вычисления, необ-ходимые для создания сложной анимации,достаточно громоздки и их трудно добав-лять в код самостоятельно.В следующем примере вводится пять но-вых слоев, каждый из которых содержитпо одной букве из слова Alice (рис. 18.26).После запуска анимации буквы, переме-щаясь по странице, должны составить имяALICE.

Создание анимации в GoLive

1. Установите CSS-слой (см. раздел «Со-здание слоя») и поместите в него какое-либо содержимое (рис. 18.27).

2. Выделив слой, нажмите на кнопку Ti-meline (Временная шкала) в верхнемправом углу окна документа, междукнопками CSS и JavaScript (рис. 18.28).Откроется окно редактора Timeline Edi-tor (рис. 18.29).

Создание DHTML-анимации

Рис. 18.26. Буквы начинают перемещатьсяпо экрану, придерживаясь заданной траектории,и образуют имя ALICE

Рис. 18.27. Первый слой в положенииинициализации

Рис. 18.28. Кнопка Timeline открывает окноредактора временной шкалы

Рис. 18.29. При первом вызове редактора окнопусто


3. Не снимая выделения со слоя, в режимеразметки страницы в палитре Inspectorвыберите кривую линию из ниспадаю-щего меню Animation (Анимация). За-тем нажмите на кнопку Record (За-пись) – рис. 18.30.

4. Переместите объект по произвольнойтраектории (рис. 18.31). В окне редак-тора временной шкалы вы увидитепрямоугольник, в котором будет ука-зана каждая точка траектории движе-ния (рис. 18.32). Эти точки называютсяопорными кадрами.

5. Повторите шаги 1–4 для каждого слояанимации.

Когда страница загружена в Web-браузер,слои должны перемещаться заданным об-разом (рис. 18.33).

Рис. 18.30. Выделив слой, вы можете при помощипалитры Inspector задать траекторию егодвижения

Рис. 18.31. По окончании движения слоятраектория остается видимой

Рис. 18.32. Окно редактора временной шкалыпосле того, как добавлены все пять букв

Рис. 18.33. Изображение появляется только послетого, как буквы образовали слово ALICE

1919191919Введениев Dreamweaver

Изначально программа Dreamweaver пред-назначалась для разработки DHTML и вклю-чала в себя достаточно много различныхинструментов. Распространено мнение, чтоWYSIWYG-редакторы, созданные сторон-ними компаниями, представляют програм-мы, наиболее полно отвечающие всемтребованиям и удобные для редактирова-ния HTML. И до последнего времени этомнение было весьма обоснованным. Од-нако не так давно появился новый конку-рент в области, практически всецело за-нятой WYSIWYG, – Dreamweaver 4.Новый продукт содержит набор инстру-ментов и утилит, таких как FTP и инстру-менты управления Web-страницей. Dream-weaver позволяет создавать шаблоны, со-держание которых совершенно не зависитот их реализации. Компания Macromediaкак разработчик Flash поместила в Dream-weaver несколько инструментов, которыепозволяют добавлять Flash-текст и кнопки,даже если Flash у вас не установлен (см.раздел «Flash и DHTML» в главе 10).В этой главе рассказывается, как настроитьCSS, используя инструменты Dreamweaver,а также как создавать анимацию сложныхобъектов.

Введение в Dreamweaver318

Интерфейс DreamweaverMacromedia усердно работала над превра-щением Dreamweaver из DHTML-генерато-ра в полноценную программу для разра-ботки Web-приложений. И усилия увенча-лись успехом: компания достигла впечатля-ющих результатов. Если ранние выпуски еепрограммного обеспечения были неудач-ными по причине отсутствия совместимос-ти с WYSIWYG-редакторами, то уже в по-следних версиях выпускаемых программэтот недостаток был устранен.В программе Dreamweaver используетсянесложный режим разметки страницы, ко-торый позволяет добавлять, двигать и уда-лять объекты непосредственно на страни-це, в то время как редактор генерируетсоответствующий HTML-код (рис. 19.1).Но вы также можете и сами редактироватьHTML-код.

Рис. 19.1. Интерфейс Dreamweaver включает окно документа, панель свойств, блок управления сайтоми различные палитры

Окно документа

Окно документа предназначено для созда-ния Web-страниц и работы с кодом. Ис-пользуя кнопки, расположенные в верхнейчасти окна, нетрудно переключаться меж-ду следующими режимами отображениядокумента:

Layout view (Режим разметки страни-цы). Работа в этом режиме сходна с ра-ботой в текстовом редакторе. Вы може-те просмотреть страницу в том виде,в каком она будет выведена в окне бра-узера, а также позиционировать и изме-нять элементы (рис. 19.2);Source view (Просмотр исходного ко-да). Данный режим позволяет напрямуюработать с HTML-тэгами Web-страницы(рис. 19.3);

319

Source and Layout view (Совмещенныйрежим разметки страницы и исходногокода). В этом режиме окно документаразделено на две части, что позволяетодновременно работать и с кодом, и состраницей в режиме разметки. Измене-ния, которые вы вносите в одно из по-лей, отображаются и в другом.

Панель свойств

Панель свойств позволяет контролироватьвсе атрибуты объекта, выделенного в окнедокумента. На ней располагаются кнопкидля быстрого вызова наиболее часто ис-пользуемых тэгов и стилей, которые мож-но применить к выделенному объекту.Кроме того, с помощью панели свойств выможете вводить поля, предназначенные дляустановки свойств элементов.Набор опций, представленных на панелисвойств, изменяется в зависимости от того,какой элемент выделен. Например, при ре-дактировании текста вы видите инструмен-ты для определения уровня заголовка, раз-метки страницы, изменения параметровшрифта и т.д. (рис. 19.4). При выделениислоя на панели отобразятся инструментыдля изменения его размера, расположенияи видимости (рис. 19.5).

Палитры

Dreamweaver содержит двенадцать встро-енных палитр, которые помогут допол-нить Web-страницу некоторыми свойства-ми и функциональными возможностями.Если дополнений не требуется, палитрыможно закрыть. Наиболее важными в Dre-amweaver являются следующие:

Objects (Объекты). Эта палитра обес-печивает быстрый доступ к огромномуколичеству HTML-тэгов и объектов,

Рис. 19.2. Окно Dreamweaver в режиме разметкистраницы. Этот режим позволяет добавлять новыеэлементы и менять положение существующих,как в текстовом процессоре

Рис. 19.3. Окно Dreamweaver в режиме просмотраисходного кода. Вы можете напрямуюредактировать исходный код (HTML,JavaScript и CSS)

Интерфейс Dreamweaver


которые вы можете добавить на Web-страницу;Reference (Справка). Здесь представле-но несколько Web-справочников длябыстрого знакомства с программой;CSS Styles (CSS-стили). Данная палит-ра обеспечивает доступ ко всем клас-сам и стилям, включая связывающиеклассы и внешние таблицы стилей.Кроме того, она позволяет вызвать Мас-тер, который проведет вас через весьпроцесс создания и настройки стилей;Layers (Слои). По мере ввода новыхCSS-слоев усложняется процесс управ-ления ими. Эта палитра выводит списоквсех слоев; таким образом, вы можетевыбрать требуемый слой из списка,а также изменить при необходимостиего имя.

Блок управления сайтом

Программа Dreamweaver содержит наборинструментов для управления Web-узлами.Например, один из инструментов предна-значен для регистрации и подтверждениязагрузки файлов на сервер и с него, чтобыне были потеряны изменения, если с сайтомрабоает сразу несколько человек.

Прочие инструменты

Dreamweaver предоставляет все необходи-мые инструменты, которые должны бытьобязательно в каждом полноценном пакетедля разработки Web-приложений: инстру-менты проверки орфографии, проверкикода, проверки связей и т.д. Кроме того,Dreamweaver может импортировать раз-личные форматы в HTML.

Рис. 19.5. На рисунке показана панель свойств при выделении слоя

Рис. 19.4. Панель свойств изменяет набор отображаемых опций в зависимости от того, какой элементвыделен в окне документа. На рисунке показана панель при выделении текста

321

Внедрение CSSВ первой части этой книги были рассмот-рены способы добавления таблиц стилейна Web-страницы. Dreamweaver включаетв себя ряд инструментов, которые помога-ют избавиться от монотонной, рутинной ра-боты по созданию и настройке таблиц сти-лей. Вы можете использовать Dreamweaver,чтобы внедрить CSS в отдельную Web-стра-ницу или даже в целый Web-сайт.

Внедрение CSS в Web-страницу

1. Создайте новый или откройте уже су-ществующий HTML-файл, выбрав в ме-ню пункты File ⇒ New (Файл ⇒ Соз-дать) или File ⇒ Open (Файл ⇒ От-крыть).

2. В палитре стилей CSS щелкните по кноп-ке New Style (Создать стиль) – рис. 19.6.Если палитра не открыта, выберитепункты Window ⇒ CSS styles (Окно ⇒CSS-стили). Откроется диалоговое окноNew Style (Создать стиль) – рис. 19.7.

3. Выберите типы CSS-селектора, которыебудете использовать (см. главу 2). Есливы хотите добавить класс, отметьтепункт меню Make Custom Style (class) –Cоздать собственный класс. Для присво-ения ID задайте опцию Redefine HTMLТag (Переопределить HTML-тэг) илиUse CSS Selector (Использовать CSS-се-лектор).

4. Нажмите на кнопку This DocumentOnly (Только этот документ), чтобывключить созданный вами стиль в тэг<style>, затем щелкните по кнопке OK.


Рис. 19.6. Палитра CSS Styles отображает вседоступные в текущем документе классы (на этомрисунке нет доступных классов)

Рис. 19.7. Диалоговое окно New Style позволяетвыбрать тип добавляемого стиля, а так же указатьместо его размещения – во внешнем файлеили нет


5. В окне определения стиля выставьтетолько те определители CSS, которыебудете использовать (см. раздел «CSS-редактор»). Вы можете в любой мо-мент щелкнуть по кнопке Apply (При-менить), чтобы войти в окно докумен-та и посмотреть, какие изменения вне-сены.

6. После определения CSS-правила на-жмите на кнопку OK, чтобы вернутьсяв окно документа.

7. Если вы настраиваете какой-либо класс,используйте палитру CSS Style, чтобыустановить класс для выделенного объ-екта в окне документа (рис. 19.8).

Процесс добавления новых внешних таблицстилей схож с добавлением стиля к страни-це. Dreamweaver автоматически настраива-ет и проверяет связи.

Присоединение внешнегоCSS-файла

1. Создайте новый или откройте уже су-ществующий HTML-файл.

2. В палитре CSS Styles нажмите на кноп-ку New Style (Создать стиль). Откроет-ся диалоговое окно.

3. Выберите типы CSS-селектора. Для при-своения ID укажите опцию RedefineHTML Тag (Переопределить HTML-тэг)или Use CSS Selector (ИспользоватьCSS-селектор).

4. Удостоверьтесь, что выделена кнопка,находящаяся рядом с пунктом Next Sty-le Sheet File (Следующий файл с табли-цами стилей).

5. Настройте те опции CSS, которые выбудете использовать. С помощью кноп-ки Apply вы можете в любой моментвойти в окно документа и посмотреть,какие изменения внесены.

6. После определения CSS-правил нажмитена кнопку OK, чтобы вернуться в окнодокумента.

7. При настройке класса используйте па-литру CSS Style, чтобы установить классдля выделенного объекта в окне доку-мента.

Dreamweaver не позволяет добавлять клас-сы, таким образом, имеются только стан-дартные классы. Однако допускается до-бавлять правила классов непосредственнов окне редакторе кода.

Рис. 19.8. Было добавлено два стиля. Первый –bodycolor – встроен в саму страницу, а второй –sidecolor – располагается во внешнем файле (наиконке, отмечающей этот стиль, присутствуетзвено цепочки)

323

CSS-редакторПри добавлении или создании правил CSSDreamweaver требует использования CSS-редактора для ввода значений каждогоправила. CSS-редактор состоит из следую-щих страниц (чтобы переключаться меж-ду страницами, выберите соответствующееназвание из списка в левой части окна):

Type (Тип). На этой странице устанав-ливаются атрибуты шрифта (рис. 19.9);Background (Фон). Здесь настраивают-ся свойства фона элемента (рис. 19.10);Block (Блок). Отсюда можно задатьсвойства абзацев (рис. 19.11);Box (Поля и внутренние отступы). Этастраница предназначена для указанияполей элемента и внутренних отступов(рис. 19.12);

CSS-редактор

Рис. 19.9. Страница Type

Рис. 19.10. Страница Background

Рис. 19.11. Страница Block Рис. 19.12. Страница Box


Border (Рамка). Здесь настраиваетсявид рамки элемента (рис. 19.13);List (Список). С этой страницы вы може-те установить вид списков (рис. 19.14);Positioning (Положение). Элементыуправления данной страницы позво-ляют определить положение объекта(рис. 19.15);Extensions (Дополнительно). На этойстранице расположены элементы управ-ления настройкой дополнительныхсвойств, зависящих от типа браузера,под который оптимизируется страни-ца, – например, cursor и т.п. (рис. 19.16).

Рис. 19.13. Страница Border

Рис. 19.14. Страница List

Рис. 19.15. Страница Positioning

Рис. 19.16. Страница Extensions

325

Создание дополнительногослояВы создаете CSS-слой, присваивая объектуID и определяя его местоположение настранице (абсолютное или относительное)при помощи тэга <div> (см. раздел «Созда-ние объекта» в главе 11). Dreamweaverобеспечивает простой доступ к управле-нию слоями.

Добавление слоя на Web-страницу

1. Находясь в режиме разметки страни-цы в окне документа (или в режимепросмотра исходного кода и разметкистраницы), перетащите пиктограммуDraw Layer (Добавить слой) из палитрыObjects в окно документа (рис. 19.17).Добавленный слой появится в окне до-кумента в виде прямоугольника.

2. Переместите указатель мыши к любо-му краю слоя таким образом, чтобыкурсор превратился в руку (рис. 19.18).Вы можете щелчком мыши выделитьэтот слой или передвинуть его в любоеместо экрана.

3. Чтобы изменить размер выделенногослоя (прямоугольника), перетащитеодин из маркеров, находящихся в углахвыделенной области (рис. 19.19).

Создание дополнительного слоя

Рис. 19.17. Перетаскивая пиктограмму Draw Layerиз палитры Objects в окно документа, выдобавляете слой к Web-странице

Рис. 19.18. Чтобы выделить слой, щелкнитепо любой из его границ

Рис. 19.19. Вы можете изменять ширину и/иливысоту слоя, перемещая маркер на нужнойстороне


Изменение свойств CSS-слоя

1. Выделив слой в окне документа, исполь-зуйте панель свойств для доступа к егосвойствам (рис. 19.20).

2. Введите имя этого слоя. Оно будет ис-пользоваться аналогично ID CSS-объекта.

3. Укажите координаты левого верхнегоугла слоя (см. раздел «Определение по-ложения по отношению к левому верх-нему углу» в главе 8).

4. Задайте высоту и ширину слоя (см. раз-дел «Ширина и высота элемента» в гла-ве 7).

5. Введите z-индекс слоя (см. раздел«Элементы в порядке стека (3D-пози-ционирование)» в главе 8).

6. Установите видимость данного слоя(см. раздел «Определение видимостиэлемента» в главе 9).

7. Укажите цвет фона или фоновое изоб-ражение (см. главу 6).

8. Определите тип тэга, используемогослоем. Обычно применяется <div> или<span>, но допустимы и Netscape-тэг(для Netscape 4) <layer> или <ilayer>(см. главу 16). По умолчанию он соот-ветствует <div>, что более предпочти-тельно.

9. Установите левый, верхний, правыйи нижний края отсекаемой области,если это возможно. Затем укажите, ка-ким образом должна обрабатываться не-видимая часть (см. разделы «Определе-ние видимой части элемента» и «Управ-ление невидимой частью» в главе 9).

Dreamweaver располагает все CSS-слоив тэге <div>, предпочитая это расстанов-ке ID в тэге <style>. Я считаю наиболееудобным способом определение ID в тэге<style> или добавление его из внешнегофайла, но метод, используемый Dream-weaver, также имеет право на жизнь.

Рис. 19.20. Панель свойств обеспечивает доступ к свойствам слоя, контролируемым CSS

327

Создание анимацииРанее было показано, как создавать про-стые поточечные анимации (см. раздел«Анимационные объекты» в главе 14). Ими-тацию движения объекта по кривой илианалогичную анимацию нескольких слоевудобнее задать при помощи программ, по-добных Dreamweaver. Представьте, что вамнеобходимо отобразить каждый пикселизображения в отдельности, определив длякаждого положение и цвет. Не так уж и ве-село, правда? И в данном случае на помощьприходят редакторы изображений, кото-рые берут львиную долю рутинной работына себя. То же самое касается и DHTML-анимации. Вы можете создавать анимациювручную, но это достаточно трудоемко,а кроме того, велика вероятность допус-тить ошибку. К тому же возникает мно-жество проблем при необходимости быс-трого обновления.В рассматриваемом далее примере вво-дится пять слоев, каждый из которых со-держит одну букву (рис. 19.21). Буквы, пе-ремещаясь по экрану в течение несколь-ких секунд, составят имя ALICE.

Создание анимации при помощиDreamweaver

1. Создайте CSS-слой (см. раздел «Созда-ние дополнительного слоя») и введитетребуемое содержимое (рис. 19.22).

2. Выберите пункты Window ⇒ Timelines(Окно ⇒ Временные шкалы). Откроет-ся окно Timelines (рис. 19.23).

Создание анимации

Рис. 19.21. Когда документ загружаетсяна Web-страницу, буквы начинают перемещатьсяпо заданным траекториям и составляютимя ALICE

Рис. 19.22. Первый слой в исходном положении

Рис. 19.23. Так выглядит окно Timelines послепервой загрузки (до анимации объектов)


3. Выделив в окне документа созданныйна шаге 1 слой, выберите из ниспадаю-щего меню (оно расположено в правомверхнем углу) пункт Record Path ofLayer (Записать путь слоя) – рис. 19.24.

4. Передвиньте объекты по произвольнойтраектории (рис. 19.25). В окне Timelinesвы увидите кружки, обозначающие каж-дую точку движения (рис. 19.26). Этиточки называются опорными кадрами.

5. Повторите шаги 1–4 для всех слоев, ко-торые требуется включить в анимацию.

6. Проверьте, отмечен ли пункт Autoplay(Автовоспроизведение) в окне Timelines,позволяющий запустить созданную ани-мацию при загрузке в окно браузера.

При загрузке этой страницы в DHTML-со-вместимый Web-браузер слои должны пе-ремещаться указанным образом.

Рис. 19.24. Для записи анимации выберите пунктRecord Path of Layer из ниспадающего меню

Рис. 19.25. Dreamweaver отобразил точками траекторию движения слоя

329

Рис. 19.26. Теперь окно Timelines включает все пять слоев

Рис. 19.27. Изображение появляется только после того,как все буквы заняли заданное положение

Можно использовать опорные кадры дляизменения видимости объекта и его z-ин-декса. В приведенном примере изображе-ние Алисы появляется только после того,как буквы составят ее имя (рис. 19.27).Чтобы добиться этого, пометьте кадры, подостижении которых программа отобра-зит данный слой на экране или скроет его.Затем снимите флажок Visible в свойствахобъекта. Объект будет невидимым, покавы не выберете другой кадр и не устано-вите этот флажок.

Создание анимации


Окно Timelines

Web-дизайнеры долгое время работали с временными шкалами, чтобы создаватьи контролировать анимацию. Большинство коммерческих программ для созданияанимации используют эту технологию, и в Dreamweaver также применяется имен-но этот способ.Окно Timelines позволяет не только перемещать объекты по экрану, но и указы-вать, когда именно надо начать движение или сколько для этого потребуется вре-мени.Работа в окне Timelines на первый взгляд может показаться сложной, но на самомделе все достаточно просто. Окно состоит из следующих частей:

Playback controls (Управление воспроизведением). При помощи данного инстру-мента можно переместиться в любой момент времени воспроизведения анима-ции;Keyframe editing (Редактирование опорных кадров). Инструмент позволяетуправлять позиционированием и видимостью объектов в любой момент;FPS controls (Управление FPS). Устанавливая частоту кадров (их число в секун-ду), вы можете изменять качество воспроизведения;Autoplay and looping controls (Управление автовоспроизведением и повторени-ем). Вы можете запустить созданную анимацию сразу по загрузке страницы и прижелании повторять ее бесконечное количество раз.

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

Часть IVДинамические Web-сайты

ГЛАВА 20 ◆◆◆◆◆ Понятие о динамических Web-сайтахПонятие о динамических Web-сайтахПонятие о динамических Web-сайтахПонятие о динамических Web-сайтахПонятие о динамических Web-сайтах ......................................................................................................... 332332332332332ГЛАВА 21 ◆◆◆◆◆ Создание динамического Web-сайтаСоздание динамического Web-сайтаСоздание динамического Web-сайтаСоздание динамического Web-сайтаСоздание динамического Web-сайта .............................................................................................................. 344344344344344ГЛАВА 22 ◆◆◆◆◆ Разметка Web-страницыРазметка Web-страницыРазметка Web-страницыРазметка Web-страницыРазметка Web-страницы ............................................................................................................................................................................................................. 355355355355355ГЛАВА 23 ◆◆◆◆◆ Импорт внешнего содержимогоИмпорт внешнего содержимогоИмпорт внешнего содержимогоИмпорт внешнего содержимогоИмпорт внешнего содержимого ................................................................................................................................................. 381381381381381ГЛАВА 24 ◆◆◆◆◆ Навигация Web-сайтаНавигация Web-сайтаНавигация Web-сайтаНавигация Web-сайтаНавигация Web-сайта ...................................................................................................................................................................................................................................... 389389389389389ГЛАВА 25 ◆◆◆◆◆ Средства управленияСредства управленияСредства управленияСредства управленияСредства управления ........................................................................................................................................................................................................................................... 419419419419419ГЛАВА 26 ◆◆◆◆◆ Специальные эффекСпециальные эффекСпециальные эффекСпециальные эффекСпециальные эффектытытытыты ....................................................................................................................................................................................................................... 451451451451451ГЛАВА 27 ◆◆◆◆◆ МуМуМуМуМульльльльльтиметиметиметиметимедиадиадиадиадиа ....................................................................................................................................................................................................................................................................................................... 476476476476476ГЛАВА 28 ◆◆◆◆◆ Отладка кодаОтладка кодаОтладка кодаОтладка кодаОтладка кода ....................................................................................................................................................................................................................................................................................................... 494494494494494ГЛАВА 29 ◆◆◆◆◆ БББББууууудддддущее динамического Internetущее динамического Internetущее динамического Internetущее динамического Internetущее динамического Internet ............................................................................................................................................ 504504504504504

2020202020Понятиео динамическихWeb�сайтах

Пусть заданы точки A и B, тогда отрезок,соединяющий их, – кратчайший путь източки A в точку B. Движение по этому от-резку, без каких либо отклонений и преры-ваний, – единственный быстрый способпопасть из одной точки в другую. Всессылки, по которым передается информа-ция, являются в основном линейными.Очень часто в повседневной жизни мысталкиваемся с последовательным, пря-мым доступом к информации. Так, услы-шав какое-нибудь новое слово, вы направ-ляетесь к книжной полке, берете энцикло-педию и ищете нужное слово – это и естьпрямой доступ к информации. Вы про-сматриваете видеозапись или пролистыва-ете книгу до интересующего вас места –это также пример прямого доступа к ин-формации. Как показывает практика, дан-ный метод является наиболее удобным.Однако человек мыслит не прямолинейно:он мыслит хаотично, запутанно, и зачастуютрудно сразу сформулировать какую-тоопределенную мысль. Следовательно, да-леко не всегда простые прямые связи могутотразить пожелания человека. Исследова-ния, поиск наилучших решений поставлен-ной задачи, метод проб и ошибок – таков

333

Рис. 20.1. Первая модель представляет линейныепути от A к B, а далее к C и D. Это типичнаялинейная модель. По такому принципу выпросматриваете кинофильм: от начала и доконца. Динамическая модель (снизу) позволяетпереходить от одной точки к другой, минуяпромежуточные, находить альтернативныеварианты решения поставленной задачи (d)и находить новую информацию (4)

наш путь познания. Очень часто какие-либо догадки позволяют нам достичь по-ставленной цели. Мы крайне редко дума-ем прямолинейно, все поставленные переднами задачи, все проблемы мы решаемдинамически (рис. 20.1).

Всемирная сеть в большей или меньшейстепени отражает особенности человечес-кого мышления и структурирования зна-ний. Гипертекст – это огромный скачоквперед, однако у нас еще есть возможностьопережать развитие новых технологий. Webдолжен стать динамичнее.

В данной главе рассматриваются пробле-мы, которые необходимо решать при со-здании динамического Web-сайта. Эта ин-формация понадобится при изучении сле-дующей главы, в которой рассказываетсяо том, как определять, проектировать и реа-лизовывать динамические Web-сайты.

Отличительные чертыдинамического Web-сайтаТермин «динамика» может означать мно-гое, его значения в большой степени зави-сят от сферы и времени применения дан-ного слова. Под этим термином понимаюткак анимацию, так и системы мультиме-диа.

Всемирная сеть представляет, по сути, вы-соко динамичную среду, в основе функци-онирования которой лежит использованиегипертекста, помогающего разработчикамWeb-приложений связывать информациюи создавать более понятное человеку окру-жение. Применяя CSS, JavaScript и Docu-ment Object Model (DOM), можно созда-вать динамические Web-сайты.

Отличительные черты динамического Web-сайта

Понятие о динамических Web-сайтах334

На сегодняшний день большинство сайтовстатичны. Загрузив однажды подобнуюстраницу, вы едва заметите какие-либо из-менения. DHTML позволяет Web-разра-ботчикам преобразовывать их творенияи создавать интерактивные страницы, ко-торые быстро реагируют на действия по-сетителя. Динамические Web-страницыдолжны удовлетворять как минимум сле-дующим критериям (рис. 20.2):

интерактивность. Web-сайт быстрореагирует на действия посетителя;синхронность. Web-сайт объединяет по-иск информации и возможность обра-щения к различным источникам с ми-нимальным временем поиска разделов,необходимых пользователю;

гибкость. Web-сайт предоставляет по-сетителю различные способы нахожде-ния информации или метод выполне-ния задания, наиболее удовлетворяю-щий его потребностям;адаптируемость. Web-сайт подстраива-ется под посетителя. Иногда процессадаптации происходит на сервере: вы-дается только та информация, которуюзапрашивает посетитель. Но многое дляудобства пользователя может сделатьи сам разработчик;активность. Web-сайт использует ани-мацию и звуковые сигналы, чтобы при-влечь внимание посетителя к изменени-ям, происходящим на экране.

Рис. 20.2. Что же означает термин «динамический»? Вот несколько вариантов ответа

335

Что такое гипертекстМногие путают гипертекст с навигацион-ными ссылками. Действительно, здесь нетак уж сложно ошибиться. В Web как гипер-текст, так и навигационные ссылки опре-деляются при помощи одного и того жеHTML-кода – <a>…</a>. Навигационныессылки используются для последователь-ного перемещения из раздела в раздел.А гипертекст позволяет посетителю послещелчка по слову, фразе или изображениюна Web-странице получить более подроб-ные сведения по интересующему предмету.Благодаря гипертексту простая страницатеоретически может содержать бесконеч-ный объем информации (рис. 20.3 и 20.4).На практике, конечно, нельзя объять не-объятное, но все же нетрудно включитьдостаточно данных, которые способен про-смотреть посетитель. Авторы, подготавли-вающие содержание сайта, указывают, в ка-ких случаях необходимы гипертекстовыессылки.При создании сайта Web-разработчикпреследует две цели: помочь посетителямкак можно быстрее найти нужные сведе-ния и позволить просматривать, опреде-лять и обсуждать информацию при помо-щи гипертекста.Internet является не только огромнейшейбазой знаний или средством интеллекту-ального и эмоционального развития, такимкак книга, когда автор через произведениедоносит людям свои чувства, эмоции и пе-реживания. Internet представляет собойеще и средство непосредственного обще-ния людей: возможность осуществлять ин-терактивную переписку, принимать учас-тие в различных форумах, происходящихв режиме реального времени, и т.д. Исполь-зуя Глобальную сеть, многие люди обща-ются друг с другом, обмениваются опытом.

Что такое гипертекст

Рис. 20.3. Сайт, посвященный астрономическойкартине дня, поможет вам понять отличиягипертекста от навигации. Ссылки в основномтексте дают доступ к более подробнойинформации о встреченном термине (этогипертекст), а навигационные ссылки открываютдругую страницу сайта

Рис. 20.4. Щелкнув по ссылке гипертекста, выпереходите на страницу, которая дает полнуюинформацию о термине «regolith»


С другой стороны, зачем нужен Web? Видео,аудио и текст – все это вы найдете в Сети,но ведь можно обойтись и обычными сред-ствами связи, ничем не уступающими покачеству Web, а порой даже превосходящи-ми, такими как телефон, телевидение, ра-дио и печатные издания.При помощи гипертекста Internet может из-менить линейную модель и наиболее полносоответствовать человеческому мышлению.Однако этот потенциал останется неза-действованным, пока Web-разработчикине начнут использовать уникальные воз-можности гипертекста.

Динамический дизайнВозможно, люди заходят на ваш Web-сайтне для того, чтобы полюбоваться на наво-роченные спецэффекты, а чтобы найтитам определенные сведения. Цель любогосайта – помочь посетителю удовлетворитьпотребность в информации. Но надо по-мнить, что правильно разработанный ди-намический сайт всегда лучше статичес-кого.Вот несколько принципов, которых следу-ет придерживаться при создании динами-ческого сайта:

сделайте его простым. Многие людитермин «динамический» понимают как«запутанный»: больше опций, большефункций, необходимо многое запоми-нать и знать. Вообще говоря, посетите-лям не требуется огромный набор оп-ций, им нужно только все самое необ-ходимое. Динамичность в Web-сайтедолжна делать его понятнее и прощев использовании;

отображайте только важную информа-цию. Информация становится знаниемлишь в том случае, когда понятна ееважность. Более того, необязательныесведения могут отвлекать, а большойобъем данных, скорее всего, запутаетпосетителя вашей страницы. Исполь-зуйте DHTML, чтобы при необходимо-сти отображать и скрывать важную ин-формацию;делайте изменения заметными. Зачас-тую мы не замечаем изменений, проис-ходящих вокруг нас. Изменения в со-держании Web-страницы должны про-исходить немедленно по запросу посе-тителя и быть заметными;помогайте определить местоположениеи направление. Существует главным об-разом один недостаток, касающийсявсей сети, – в ней легко заблудиться. Посравнению с окружающим нас миром,в котором можно хотя бы оглянуться,чтобы определить, откуда мы пришлии куда направляемся, многие Web-сай-ты кажутся лабиринтами. ИспользуйтеDHTML, чтобы помочь посетителямсориентироваться в виртуальном про-странстве;не будьте диктатором, предоставьтесвободу выбора. Главная цель любогосайта – позволить посетителям свобод-но перемещаться по его содержимому.Направьте посетителей к нужной иминформации, однако позвольте им до-бираться теми путями, которые они из-берут. Ссылки, которые вы включаетев Web-страницу, важны так же, как раз-мещенные на ней текст и графическиеобъекты.

337

Размещение объектовна Web-страницеВы можете свободно изменять размер ак-тивного окна, разрешение экрана, размершрифтов, однако необходимо тщательнопродумать, как будет выглядеть ваша стра-ница, прежде чем приступить к действиям.Например, вам известно, что сайт будетрасполагаться в окне браузера, но будут лиразмеры окна достаточными, чтобы вмес-тить всю запланированную информацию?Перед тем как начинать реализацию проек-та, каждый Web-разработчик должен тща-тельно продумать, какой из четырех основ-ных стилей размещения объектов будетиспользоваться.Стили состоят из двух основных частей.Первая часть – область содержания, кото-рая включает навигацию, заголовки, графи-ку и текст – другими словами, все, интере-сующее посетителя. Другой составляющейлюбого стиля является «заполнитель». Не-зависимо от того, пуст «заполнитель» илинет, он предназначен только для заполне-ния пустого пространства в окне браузера.Если вы хотите сделать страницу действи-тельно привлекательной, очень важно най-ти золотую середину между размерами об-ластей содержания и «заполнителя».Ниже перечислены четыре основных сти-ля организации страницы, в которых со-блюдается этот баланс:

Unrestrained (Неограниченный). Содер-жание в окне располагается по горизон-тали слева направо и по вертикали свер-ху вниз, таким образом, окно браузеразадействуется полностью (рис. 20.5).Этот дизайн исключает необходимостьв «заполнителе». Но широкие колонкитекста – характерный признак стиляUnrestrained – не всегда легко читать.Новостной сайт Wired (рис. 20.6) ис-пользует стиль Unrestrained, позволяя

Рис. 20.5. Так выглядит страница, при созданиикоторой использовался стиль размещенияUnrestrained

Динамический дизайн

Рис. 20.6. Сайт Wired News использует стильразмещения Unrestrained: содержимое занимаетвсе окно браузера


содержимому в центральной колонкезанимать все свободное пространство;Fixed width (Фиксированная ширина).Содержание помещается в столбце фик-сированной ширины. Ограничение можетбыть слева, справа или с обеих сторон(рис. 20.7). На сайте Salon (www.salon.com)содержимое страницы ограничиваетсяпо ширине, располагаясь в центре окнабраузера. Размер колонки составляет736 пикселов (близко к размеру, кото-рый может отобразить дисплей 800 пик-селов без скроллинга, если окно занима-ет весь экран), а белые полосы заполня-ют незанятое пространство слева и спра-ва (рис. 20.8);Fixed height (Фиксированная высота).Содержание размещается в полосе фик-сированной высоты. Ограничение мо-жет быть сверху, снизу и/или с обеихсторон (рис. 20.9). Поэтому содержи-мое такой Web-страницы располагает-ся по горизонтали. Подобный дизайнприменяется достаточно редко, так какобычно целесообразнее максимальноувеличить высоту информационнойобласти. Я использовал этот способ длятого, чтобы создать небольшой сайтдля фотографий со дня рождения моейдочери – www.webbedenvironments.com/jocelynstory (рис. 20.10);

Рис. 20.7. Стиль размещения Fixed

Рис. 20.8. На сайте Salon используется стильразмещения Fixed width: вся информациярасполагается в центральной колонке

Рис. 20.9. Стиль размещения Fixed height

339

Fixed size (Фиксированный размер). Каквысота, так и ширина области отображе-ния содержания ограничены (рис. 20.11).Вы можете задать такое расположениедвумя способами. Первый заключаетсяв ограничении области при помощифреймов извне. На Web-сайте Portis-head (www.portishead.co.uk) использует-ся именно этот способ (рис. 20.12). Дру-гой метод – открыть в браузере новоеокно фиксированного размера (см. раз-дел «Новое окно браузера» в главе 14).

Рис. 20.11. Стиль размещения Fixed size Рис. 20.12. Web-сайт Portishead применяет стильFixed size. Это помогает контролировать областьэкрана, в которой будет отображатьсясодержимое, но использование такого стиляприводит к тому, что страница отображаетсяодинаково и не зависит от размера окна браузераи установленного разрешения монитора

Рис. 20.10. Я использовал стиль Fixed height длясайта дочери, чтобы создать атмосферу кино

Размещение объектов на Web-странице


Навигация: рекомендациии запретыВ существующих сайтах, на мой взгляд,можно отыскать множество ошибочныхрешений. Это становится очевидным, ког-да Web-дизайнеры «сваливают в кучу» всенавигационные ссылки сайта. Посколькунавигационные средства появились не такдавно, Web-разработчики все еще экспери-ментируют, воплощая новые идеи и приме-няя новые технологии. После шести летсобственных экспериментов я уяснил, ка-кие действия стоит выполнять, а каких сле-дует избегать, и могу предложить несколь-ко проверенных практикой рекомендацийи обосновать запреты.

Рекомендации

Некоторые из приведенных правил могутпоказаться очевидными, но когда вы нахо-дитесь на средней стадии выполнения про-екта, очень легко забыть даже самые про-стые из них.

реализуйте навигацию последовательно.После определения общей структурынавигации вашего сайта не вносите ни-каких кардинальных изменений на от-дельные страницы. Если главное окнонавигации находится на экране слева, ненужно перемещать его вправо, в областьтекстового окна. Если вы расположиливспомогательную навигацию снизу, неследует располагать в этой области бан-неры. Но, как и в любом правиле, здесьсуществует ряд исключений. Навигаци-онная система главной страницы сайтаотличается от систем остальных стра-ниц, как обложка журнала отличаетсяот его содержимого;помогите посетителю ориентироватьсяна сайте. Создание общего пути поможет

указать посетителям дорогу к исходнойстранице. Самый простой способ – по-ставить на страницах метки (обычноначиная с главной), чтобы посетителимогли определить свое местонахожде-ние: Home > Forest > More forest >Witch’s house. Этот путь отражает ло-гическую последовательность событий,и каждый заголовок представляет со-бой ссылку, помогающую вернутьсяназад. Подобно тому, как Тезей вышелиз лабиринта Минотавра, посетителивашего сайта смогут вернуться к нача-лу своего путешествия;предупреждайте, если навигация неосу-ществима. Очень полезно уметь ориен-тироваться в Сети. Посетители, ужезнакомые с вашим сайтом, могут непонять некоторые из тех терминов, ко-торыми вы описываете навигацию. Не-довольство пользователей Сети частовызвано тем, что во время поиска необ-ходимой информации их направляютпо неверному пути. Кроме того, имприходится ждать загрузки ненужныхстраниц. Добавьте к терминам одно-два поясняющих предложения, чтобыподсказать посетителям, что они най-дут среди приведенных ссылок. Еслиу вас на экране нет места для отобра-жения подобной информации, исполь-зуйте DHTML (см. раздел «Всплываю-щий гипертекст» в главе 25);предоставьте посетителю свободу дей-ствий. На сегодняшний день про-граммное обеспечение позволяет поль-зователям перемещать по экрану па-литры управления, добавлять инстру-менты и настраивать интерфейс. Webограничивает пользовательский кон-троль над интерфейсом, однако же-лательно включить в сайт некоторыеполезные возможности. В маленьком

341

окне управления следует поместитькарту сайта. С ее помощью посетителибудут быстро перемещаться по сайту(см. раздел «Панель управления сайтом»в главе 24). Некоторые посетители при-выкли использовать навигационные ссыл-ки на главной странице, другим нравитсясвободно перемещаться по страницам.Необходимо предоставить посетителюправо выбора;не создавайте тупиков на карте стра-ницы. Недавно я читал статью в одномпопулярном Internet-журнале для ар-хитекторов. Дочитав ее до конца, я об-наружил, что могу свободно перелис-тывать страницы статьи, но не в состо-янии вернуться обратно на главнуюстраницу сайта или попасть в какую-либо другую его часть. Нет ничего, чтовызвало бы большее раздражение, чемтупик в конце страницы. Между про-чим, подобные варианты планированиясайтов встречаются достаточно часто.Например, когда при заполнении ка-кой-либо анкеты вы вводите всю ин-формацию и нажимаете Submit (Под-твердить), появляется страница, гдекрасуется благодарственная надписьи ничего более. Нередко такие страни-цы не содержат даже стандартной на-вигации.

Запреты

Теперь, когда вы узнали о рекомендациях,я расскажу о том, чего следует избегатьпри проектировании системы навигации:

избегайте ненужных навигационных ссы-лок. Любая ссылка, не представляющаяинтереса для посетителя, только зани-мает место на экране. Тем не менеемногие Web-разработчики заполняютместо на странице ссылками, которыми

посетитель вообще не пользуется. Рас-смотрим банковский сайт, который пре-доставляет ряд услуг частным вкладчи-кам, предпринимателям и корпорациям.На первой странице перечислены всетри опции, эта же страница являетсяи отправной точкой в диалоге с посети-телем, будь это частное лицо, бизнес-мен или представитель компании. Носсылки на все три категории остаютсяна экране и при загрузке следующихстраниц. Возможно ли, что частныйвкладчик вдруг заинтересуется услу-гами, предоставляемыми компаниям,и перейдет в другой раздел? Малове-роятно. Да и очень трудно представитьсебе, при каком условии это можетслучиться. Но даже если подобный ин-терес возникнет, почему бы не вер-нуться на главную страницу и не на-чать все оттуда?размещайте навигационные элементытаким образом, чтобы они всегда былидоступными. Представьте, что вы наби-раете письмо в текстовом редакторе.Когда вы доходите до конца области пе-чати, она автоматически увеличивается,и написанный текст смещается вверх,скрывая строку меню. И каждый раз,когда вам необходим доступ к меню,приходится перемещаться к началуписьма, чтобы строка меню опять по-явилась. Подобный процесс не очень-топриятен, однако большинство Web-ди-зайнеров разрабатывают сайты именнотаким образом. Один из способов реше-ния этой проблемы заключается в раз-мещении на странице ссылки Return totop (В начало). Но есть и более изящ-ные выходы из описанной ситуации.Я предпочитаю располагать навигаци-онные элементы во фреймах таким об-разом, что при прокрутке страницы

Навигация: рекомендации и запреты


они остаются на одном месте и ими все-гда можно воспользоваться. Посетите-лям не приходится нескончаемо долгоискать необходимую страницу и тра-тить свое драгоценное время. Конечно,важно уменьшить размер этих фреймов,чтобы увеличить место для содержимо-го Web-страницы (см. раздел «Открытиеи закрытие фреймов» в главе 22);не путайте типы навигации. Не всетипы навигаций создаются одинаковымспособом. Web-страницы могут совме-щать различные типы, применение како-го-либо из них зависит от множествафакторов. Посетители используют ос-новную навигацию для перемещениямежду наиболее важными узлами сайта.Визуализация – наиболее удобный спо-соб различать типы навигаций (см. раз-дел «Установка сложных ссылок» в гла-ве 24);не полагайтесь на навигацию, встроен-ную в браузер. Многие посетители явля-ются заложниками встроенных в браузе-ры навигационных систем. Они удобны,а результат от нажатия кнопок Back (На-зад) и Forward (Вперед) вполне пред-сказуем. Но некоторые люди не умеютпользоваться этой функцией и не смогутдобраться до нужного места на сайте,если вы не предоставите им необходи-мых ссылок. Делайте все, чтобы посети-тели без труда находили выход с любойстраницы вашего сайта. Никогда не за-водите их в тупик. Наоборот, создавайтессылку, которая возвращала бы посети-теля на ту страницу, с которой он при-шел (см. раздел «Создание кнопки Back»в главе 25).не размещайте одни и те же ссылки накаждой странице. Одна из наиболеераспространенных ошибок, допускае-

мых Web-дизайнерами, – размещениевсех возможных ссылок на каждойстранице сайта. Они ошибочно полага-ют, что посетители в любой момент за-хотят перейти в любое место сайта. Ноэто приводит не только к неразумнойтрате пространства экрана, но и к тому,что поиск необходимой информации насайте затрудняется (см. раздел «Иголкав стоге сена»). Любая ссылка, котораяне представляет интереса для посетите-ля, напрасно занимает место на экране.Если посетитель не щелкнул по ссылкена главной странице сайта, шанс, что онвоспользуется ею позднее, уменьшается,так как человек всегда движется к своейцели по прямой. Поэтому структурасайта должна позволять перемещатьсямежду страницами, продвигаясь к болеедетализированной информации и не от-влекаясь на огромное количество под-робных ссылок (см. раздел «Выпадаю-щее меню» в главе 24).

343

Иголка в стоге сена

Особенность, отличающая Всемирную сеть от других средств информации, заклю-чается в возможности связывать фрагменты данных таким образом, чтобы указатьна их взаимосвязь. Это гипертекст, который и отличает Internet от книг, телевиде-ния, кинематографа и телефонии.Так почему же часто создается впечатление, что большинство Web-страниц и сай-тов копируют перечисленные информационные средства? Некоторые разработчикииспользуют индекс-подобные меню, которые не дают посетителю никакого пред-ставления о их местонахождении на сайте. Страницы, страницы информации…Читателю приходится перелопачивать весь этот объем, чтобы найти действительнонеобходимые сведения. Экраны, заполненные графикой, баннерами и различнымикнопками… Для их загрузки, наверное, потребуется целая вечность!Еще хуже выглядят страницы, на которых всевозможные ссылки, позволяющие пе-рейти к любому месту сайта, заполняют практически весь экран. В результате поискнужной ссылки превращается в поиск иголки в стоге сена.Единственный довод, который можно привести в пользу подобных страниц, – этоуменьшение времени ожидания. Ведь для того, чтобы изменить содержание Web-страницы, необходимо загрузить еще одну, и, таким образом, посетителю прихо-диться ждать, ждать и ждать… А ведь время – деньги. Поэтому, чтобы позаботитьсяо материальном благосостоянии посетителя и не заставлять его терять время, мно-гие Web-дизайнеры размещают все содержание на одной странице.DHTML все меняет. Он позволяет показывать и прятать объекты динамически, фор-мируя содержание Web-страницы в зависимости от нужд посетителей. Различное со-держание может быть загружено на одной странице; вы способны отображать то, чтонужно, без ожидания загрузки новых страниц.

Навигация: рекомендации и запреты

2121212121СозданиединамическогоWeb�сайта

Прежде, чем разрабатывать какой бы то нибыло Web-сайт, следует тщательно проду-мать его устройство, его план. Этот планпоможет вам определить структуру сайта,а затем, отталкиваясь от нее, расположитьграфику, текст и код.Большие Web-сайты, созданные без про-ектирования, с большой вероятностью бу-дут неработоспособны, как наверняка раз-валился бы небоскреб, построенный безнеобходимых расчетов. Но даже если высоздаете относительно небольшой Web-сайт, хорошее проектирование, несомнен-но, поможет сэкономить время.Если вы решили сделать сайт динамичес-ким, предварительное проектирование ста-новится еще более необходимым. Динами-ческое содержание влечет за собой появле-ние дополнительных опций, что повышаетвероятность сбоев. Поэтому простая преду-смотрительность не помешает.В данной главе вы узнаете о стадиях созда-ния динамических Web-сайтов (рис. 21.1).

Рис. 21.1. При освещении основных аспектовсоздания динамических сайтов я будуиспользовать сайт, созданный в поддержку этогоиздания

345

Шаг 1..... ПроектированиеВсемирная сеть – это информационноепространство, а потому созданию сайтапредшествует этап сбора и сортировкиинформации.Разработка динамического сайта требуетнамного больше сил, чем связывание не-скольких Web-страниц, но потраченныеусилия того стоят.Придумываете вы Web-сайт для школьно-го спектакля вашего ребенка, размещенияфотографий или сети intranet, позволяю-щей страховым компаниям обрабатыватьзапросы клиентов, вам необходимо опре-делить его содержание.

Пользователь или посетитель

Большинство Web-дизайнеров называют посетителей своего сайта пользователями.Я никогда не был поклонником этого термина. Во-первых, слово «пользователь»имеет какой-то негативный оттенок, а я ни в коем случае не хочу относиться такк людям, которые посещают мой сайт. Во-вторых, «пользователь» (или «user») зву-чит так, как если бы специалист по маркетингу решил описать рабочих и служа-щих, используя термин «человеческий ресурс». Я считаю, что термин «пользова-тель» принижает достоинство людей, для которых я разрабатываю сайт.Вместо этого я предпочитаю использовать термин «посетитель». Данные терминыотличаются только написанием, но не стоит забывать, что язык – очень мощноесредство, которое формирует наши взгляды. Я предпочитаю думать о себе как о хо-зяине, принимающем гостей или посетителей, а не как о поставщике для пользова-телей.Всегда помните, что посетитель – это человек, для которого вы делаете сайт. Создаетевы личный сайт или многомиллионное Web-приложение, вы должны помнить о посе-тителях всегда, начиная от стадии обдумывания сайта и вплоть до непосредственнойего разработки.Но DHTML решает и эту проблему. С его помощью легко отображать и изменятьобъекты динамически, то есть отбирать содержимое Web-страницы согласно запро-сам посетителя, загружать различную информацию и затем обновлять ее, не затра-чивая ценное время посетителя на загрузку другой Web-страницы.

Шаг 1. Проектирование

Сбор и сортировка информации

Этот шаг кажется вполне очевидным, одна-ко вы были бы удивлены, узнав, разработ-чики скольких сайтов никогда не задавалисьвопросом, для чего нужен их сайт (рис. 21.2).А какова цель создания вашего сайта?Вам необходимо классифицировать всюинформацию и продумать систему нави-гации; решить, каким образом разделитьданные на различные разделы Web-сайта,как назвать эти разделы, каким образомих лучше преподнести. Это первоочеред-ные задачи при разработке плана сайта.

Создание динамического Web-сайта346

Например:

текст введения;образец раздела;примеры кодов.

Определение читательскойаудитории

Тематика вашего сайта полностью опреде-ляет его аудиторию (рис. 21.3). Этот фак-тор является наиболее важным при прогно-зировании запросов посетителей. Чем точ-нее вы опишете содержание сайта, тем точ-нее сможете представить его аудиторию.Кроме того, содержание поможет правиль-но оформить страницы. Например, посети-тели сайта компьютерного магазина, веро-ятно, будут удивлены, увидев на заднемплане цветы, – они этого не ожидают.После того как вы определили предпола-гаемый контингент посетителей, проду-майте следующие вопросы:

какие функции и в каких случаях будетиспользовать посетитель;какой браузер и сопутствующее про-граммное обеспечение применит посе-титель вашего сайта;что полезного для себя почерпнет посе-титель из вашего сайта.

Простой сайт, точнее Web-страница, мо-жет иметь множество различных назначе-ний. Придумайте различные сценарии длянескольких потенциальных посетителей,которых будет интересовать совершенноразличная информация вашего сайта. Опре-делите, каким образом посетители моглибы добираться до своей цели, и, используяэту информацию, как можно лучше про-думайте навигационную систему сайта.

Рис. 21.3. Определитечитательскую аудиториювашего сайта

Рис. 21.2. Соберитеинформацию для сайта

Например:

профессиональные Web-разработчики;разработчики-новички;менеджеры Web-проекта.

Формулировка целей

Теперь, когда вы знаете, кто будет посещатьваш островок во Всемирной сети, пора, на-конец, твердо решить, чего же хотите вы(рис. 21.4). Какую цель вы преследуете, ска-зав свое слово в безумном Internet-мире?Некоторые Web-сайты подстраиваются поджелания своих посетителей, другие могутпреследовать самые эгоистичные цели. Нотем не менее вы обязаны знать, чего хоти-те добиться, проделывая всю эту огром-ную работу.Например:

предусмотреть место под просмотрпримеров;предусмотреть место под загрузкукода;предусмотреть модернизацию и кор-ректировку.

347

Предоставляемые функциии интерактивность

Теперь пора определить набор функцийи возможностей, которые вы будете исполь-зовать, чтобы достичь поставленной цели(рис. 21.5). Нужны ли этому сайту видеои звуковое сопровождение? А как насчетDHTML? Желаете интерактивную навига-цию, сэр? А не применить ли CGI? Можетбыть, Java? Вспомогательные базы данных?Flash? Ищите самый простой способ, что-бы выполнить работу.

Например:

навигация: ниспадающее меню;

спецэффекты: текст с федингом;

управление: всплывающий гипертекст.

Стиль оформления

Определите, какой стиль оформленияв полной мере соответствует тематикесайта и вашим запросам, продумайте на-бор предоставляемых функций. И, ко-нечно, не забывайте о своих посетителях,попробуйте представить их ожидания.Решите, какую цветовую гамму, какиешрифты и графику вы будете использо-вать (рис. 21.6).

Например:

разметка: ограниченная высота;

цвет: пурпурный, серебряный, зеленыйи красный;

шрифты: Arial, Arial Black, Trebuchet MS.

Рис. 21.4. Сформулируйте свои цели

Рис. 21.5. Продумайтепредоставляемые функциии интерактивность

Рис. 21.6. Определите стильоформления

Рис. 21.7. Схема позволяет логически построитьсайт, наиболее важные разделы располагаютсяна верхнем уровне, более детальные – под ними

Шаг 1. Проектирование


Шаг 2..... РазработкаСколько людей, столько и мнений. Этокасается и разработки Web-сайтов. Длялюдей, имеющих образование в сфере ис-кусства, дизайн – это то, как станет вы-глядеть Web-сайт в итоге: какие цвета бу-дут использованы и какой общий видпримет страница. Для тех, кто много летизучал технические дисциплины, слово«дизайн» означает работу и взаимодей-ствие между собой различных программ-ных компонентов.В принципе и те, и другие правы. Под тер-мином «дизайн» следует понимать каквнешний вид сайта, так и его кодовую ре-ализацию.Во время разработки необходимо обду-мать различные стороны сайта и убедить-ся, что они будут функционировать сла-женно.

Схема сайта

Схема рассматривает сайт как линейныйобъект, у которого каждый раздел сайтарасполагается в верхушке схемы, а каж-дая Web-страница соответствует своейкатегории (рис. 21.7). Схема сайта отра-жает его файловую структуру. Хотя су-ществует одно «но»: поскольку схемаотображает линейную модель, она можетприводить к ошибкам при проектирова-нии Web-сайтов, у которых есть ссылкимежду разделами.

Создание плана сайта

План сайта позволяет вашим клиентами коллегам (художникам, программис-там, менеджерам проекта и т.д.) понятьего структуру и наметить общие путиразработки (рис. 21.8).

Рис. 21.8. План сайта очень нагляден и хорошо отображает характер связей между страницами.В данном примере каждый блок – это страница, линии – связи. Блоки со скругленными угламии пунктирными линиями представляют Web-страницы, находящиеся вне сайта

349

Блок-схемы показывают, каким образомработают и взаимодействуют друг с дру-гом различные страницы сайта. Как прави-ло, страницы изображают прямоугольника-ми, а ссылки – линиями, но вы также може-те добавлять и другие условные обозначе-ния: внешние связи, Java-приложения и др.Преимущество блок-схем над простымисхемами заключается в том, что разработ-чик способен более точно описать харак-тер связей между страницами.

Первый эскиз сайта

Выберите стиль разметки Web-страницы(см. раздел «Размещение объектов на Web-странице» в главе 20). Затем на листе бу-маги или в графическом редакторе набро-сайте структуру Web-страницы (рис. 21.9).Не нужно подробно вырисовывать схемукаждой создаваемой страницы, просто по-метьте, где и какие элементы вы хотитеразместить.

Шаг 2. Разработка

Чтобы описать интерактивные элементы,вы можете использовать комментарии.Попробуйте воплотить самые вычурныеидеи. Не бойтесь экспериментировать, осо-бенно сейчас, при создании эскиза сайта,ведь легче что-либо исправить на даннойстадии, чем при разработке кода.

Создание раскадровкиРаскадровка (рис. 21.10) подобна блок-схеме, но с ее помощью можно визуальнопредставить Web-страницу и ее содержа-ние. Обычная блок-схема представляетстраницу в виде символа (например, пря-моугольника) и не дает ни малейшегопредставления о ее содержании.Раскадровка отображает разметку каж-дой страницы и комментарии о работесайта и позволяет любому человеку, дажене обладающему в полной мере вообра-жением, представить будущий сайт. Этоособенно полезно, когда вы описываете

Рис. 21.9. Эскиз сайта позволяет определить, как будут располагаться и взаимодействовать различныеэлементы


интерактивные процессы, происходящиена одной странице.Раскадровки занимают много места, по-этому их приходиться размещать на до-статочно больших листах.

Внешний вид определяет первоевпечатлениеВ графических редакторах, таких как Pho-toshop, создание модели сайта основано

на использовании его эскиза (рис. 21.11).Программы, подобные Photoshop и Mac-romedia Fireworks, позволяют создаватьинтерактивные графические изображе-ния и подготавливать их для размещенияв Web.На этой стадии разработки сайта вы може-те свободно экспериментировать с дизай-ном – еще не поздно все исправить!

Рис. 21.10. Раскадровка очень эффективна для планирования задач, которые сможет выполнятьпосетитель. В данном примере посетитель хочет посмотреть пример кода. Раскадровкапоказывает, какие ссылки будут активизированы и как выглядит экран в каждом случае

351

Рис. 21.11. Общий вид Web-сайта и первоевпечатление при его загрузке во многом зависятот оформления. Оформление сайтов обычнопроводится в графическом редакторе Photoshop.Такие элементы, как текстовые ссылки, должнысоздаваться при помощи HTML-текста,окончательная отладка – при помощи CSS.В данном примере тип оформления используетсявременно, в окончательной версии все будетвыглядеть иначе

Сетка расположения

В вашем распоряжении есть еще один замечательный инструмент – Сетка располо-жения (Layout grid). Содержание Web-страницы помещается в особые прямоуголь-ные области. Если вы разработали четкую схему сайта, то можете свободно создаватьмножество различных вариантов разметок в пределах одного стиля (одной темы).Если вы правильно используете эту функцию, она автоматически определяет, гдев содержании страницы применяется особый тип текста, и помогает выяснить по-следовательность появления Web-страниц. Сетка разбивает страницу на областипо типу содержания: заголовки, иллюстрации, текст, номера страниц и т.д.Вы можете создавать схему разбиения для любого типа разметки Web-страниц.У каждого формата есть свои достоинства и недостатки, зависящие от размераокна браузера.Например, текстовые колонки при использовании стиля Unrestrained настолькошироки, что их неудобно читать. Результатом ограничения ширины может статьпоявление достаточно больших промежутков между словами, а ограничение высо-ты неудобно для посетителей, обладающих компьютерами с широкоформатнымимониторами.

Шаг 2. Разработка


Шаг 3..... РеализацияТеперь все становиться на свои места, тре-щины заделаны, шпаклевка наложена –осталось наклеить обои. Подготовительнаяработа окончена, и настало время действи-тельно заняться созданием своего сайта.Перед тем как приступить к последнейстадии, еще раз просмотрите информа-цию, касающуюся сайта (аудитория, цели,содержание и функции).Теперь все, что было подготовлено с та-ким огромным трудом, окупится с лихвой(а может быть, и нет)!

Подготовка содержания

Соберите всю информацию, которую тре-буется разместить на сайте: текст, видео,анимацию и звук. Тщательно все проверьтеи подготовьте к опубликованию, напримерзапишите текст в формате Word (рис. 21.12)или поместите в файлах тэги (<p>, <br>, <h1>).

Подготовка кода

Если вы используете код из этой книги (будьто JavaScript, CSS или DHTML), его необхо-димо изменить под ваш сайт (рис. 21.13).

Создание шаблона

В HTML-редакторе (или в каком-либо дру-гом) установите общий тип вашей Web-страницы. Определите HTML и CSS, кото-рые вы планируете использовать для нави-гации на каждой странице. Протестируйтестраницу в различных браузерах, при раз-личных условиях и совершенствуйте коддо тех пор, пока не достигнете требуемогорезультата.

Рис. 21.12. Проверьте содержание вашего сайтана наличие ошибок

Рис. 21.13. Перед тем как перейтинепосредственно к созданию Web-сайта,протестируйте и отладьте написанный вами код

353

Теперь, когда у вас есть действующийпрототип Web-страницы, удалите со стра-ниц все лишнее. Так вы получите шаблонсайта. Вы можете его использовать, чтобыдоработать оставшуюся часть страницв таких программах, как Dreamweaver илиGoLive.

Компоновка страниц

Применяя созданный шаблон как основудля каждой страницы, введите оставшую-ся часть шаблона (рис. 21.14). На всякийслучай у вас должна быть чистая копияшаблона для каждой Web-страницы.

Тестирование сайта

Перед тем как выпустить ваше произве-дение, протестируйте его. Даже малейшиеошибки, если они не были исправлены настадии отладки, могут привести к боль-шим проблемам. Вам следует тестиро-вать свои сайты в различных браузерахи операционных системах (рис. 21.15).

Рис. 21.14. Произведите компоновку элементов

Рис. 21.15. Результат моей усердной работы(www.webbedenvironments.com/dhtml)

Шаг 3. Реализация


Разметка: CSS или таблицы?

До того как появились таблицы, Web-разметка представляла собой широкие стра-ницы текста, занимавшие весь экран. У разработчиков не было возможности каким-либо образом разбить колонку. Web-дизайнеры пытались изменить такое располо-жение, размещая текст в две колонки и более.С появлением таблиц Web-разработчики получили возможность создавать эскизразметки, содержащий большое число колонок. Хотя не предполагалось, что табли-цы будут выполнять большую часть работы по разметке Web-страниц, на протяже-нии достаточно большого промежутка времени у них не было достойной альтерна-тивы.Но с появлением CSS ситуация радикально изменилась – CSS позволяют создаватьвеликолепные разметки Web-страниц без помощи таблиц. Но, к сожалению, не всетак просто.С возникновением CSS у Web-дизайнеров появился широкий спектр возможностейдля размещения объектов на странице. Однако эта технология потерпела неудачупри создании разметок с уплотненной компоновкой. Компоновка информации наWeb-странице при помощи CSS – новый способ, и многие дизайнеры до сих порэкспериментируют с его функциями.Мне удалось избежать использования таблиц в проекте своего Web-сайта. Правда,пришлось довольствоваться относительно простым вариантом разметки, в которомвсего лишь один ряд и две колонки (слева – навигация, справа – содержание) и ещенесколько других элементов.Если вы проводите разметку большого объема страниц, используя CSS и не приме-няя таблицы, пришлите мне, пожалуйста, URL вашего сайта. Я с удовольствием егопроверю!

2222222222РазметкаWeb�страницы

Существует много различных способовиспользования CSS и DHTML. Но покаданные средства создания Web-приложе-ний являются относительно новыми, и раз-работчики все еще открывают новые гори-зонты их возможностей. Это обусловлено,вероятно, еще и тем, что некоторые разра-ботчики, которые изначально были увле-чены невероятными возможностями CSSпри создании динамического HTML, игно-рировали чрезвычайную полезность кас-кадных таблиц стилей при разметке Web-страниц.Спеша поэкспериментировать с динами-ческими возможностями CSS, многие Web-дизайнеры не заметили, что с помощьюCSS легко решить одну из основных проб-лем разработки – выполнение разметкиWeb-страниц.В этой главе содержится множество полез-ных рекомендаций по работе с CSS, а так-же описываются приемы использованияDHTML при разметке страницы.

Разметка Web-страницы356

Устранение ошибкив Netscape CSSРассмотрим наиболее часто упоминаемуюошибку Netscape в реализации CSS. Когдапосетители изменяют размеры окна брау-зера, все CSS-форматирование, созданноес использованием внешнего CSS-файла(который импортировался при помощитэга <link>), внезапно исчезает, будто при-соединенная таблица стилей никогда ра-нее не существовала. Однако, если посети-тель перезагрузит эту страницу, формати-рование вновь появится (рис. 22.1 и 22.2).Такая ошибка вполне могла бы отбитьу посетителей желание заходить на вашсайт, особенно если они и не подозревают,что нужно просто перезагрузить страницу.Как проверить, что страница была пере-загружена после того, как изменился ееразмер? Все очень просто; за этим просле-дит браузер, если вы, конечно, скажетеему об этом (листинг 22.1).

Перезагрузка страницыпосле изменения ее размеров

1. if(document.layers){…}В тэге <script> в заголовке <head> вашейHTML-страницы введите код, которыйопределяет, использует ли браузер DOMслоя (см. раздел «Определение возмож-ностей браузера» в главе 11). В случаеутвердительного ответа программныйкод выведет текущие значения высоты(innerHeight) и ширины (innerWidth) ви-димой области страницы (см. раздел«Видимая область объекта» в главе 12).

Рис. 22.1. Так должна выглядеть страницав Netscape

Рис. 22.2. Так будет выглядеть страница приизменении размеров, если не исправить ошибкуреализации CSS. Для отображения страницыиспользуются установки браузера по умолчанию

357

2. function reloadPage(){…}Добавьте функцию reloadPage() в код.При загрузке страницы она сравниваеттекущие значения ширины и высотыокна со значениями, определенными нашаге 1.

3. onresize = reloadPage;Присвойте событию onresize значениефункции reloadPage. Если посетительизменяет размеры окна, в которомотображается страница, то браузер пе-резагружает ее, восстанавливая фор-матирование CSS.

Лучше написать этот код в отдельном фай-ле с расширением .js, а затем присоеди-нить его к каждой странице сайта, приме-няющего CSS (см. раздел «Внешний файлJavaScript» в главе 23).

Устранение ошибки в Netscape CSS

Листинг 22.1. Если данный браузер используетслои (то есть Netscape 4), JavaScript записываетзначения (ширину и высоту) для инициализацииактивного окна. Изменение размера окнаопределяется при помощи данного кода:сравниваются размеры до и после изменения,затем страница обновляется и форматированиевосстанавливается

<html><head>

<script>if (document.layers) {

origWidth = innerWidth;origHeight = innerHeight;}

function reloadPage() {if (innerWidth != origWidth ||->innerHeight != origHeight)location.reload();}

if (document.layers) onresize =->reloadPage;

</script><link rel="stylesheet"->href="styles.css">

</head><body>

<h1>Designing With Cascading Style->Sheets</h1><p class="copy">Whenever you type in a->section title...</p><p class="copy">A previous article->looked at a ...</p><div class="code">

selector {property: value;}<BR></div><p class="copy">Where the-><I>selector</I> is the keyword->part of an HTML...</p>

</body></html>


CSS и операционнаясистемаМежду операционными системами MacOSи Windows существует ряд несоответствий,которые зачастую создают излишние про-блемы Web-дизайнерам, использующимCSS при создании сайтов. Это касается цве-товой палитры и размеров шрифтов. Насамом деле проблема заключена не в CSS,а в том, как операционные системы опре-деляют размеры шрифтов и цвета.Не вдаваясь в технические подробностии не углубляясь в историю, отмечу, что ос-новная проблема заключается в том, чтов Windows шрифт отображается болеекрупным, а цвета – более темными, чемв Mac. Дизайн, разработанный для Mac, мо-жет выглядеть идеально, но при загрузкев Windows вместо превосходного дизайнана экране появятся гигантские шрифтыи темные цвета.Используя JavaScript и CSS-файлы, ориен-тированные на каждую ОС, вы можете до-биться правильного отображения шрифтови цветовой гаммы в операционной системепосетителей вашего сайта (рис. 22.3–22.5).

Определение CSS дляоперационной системы посетителя

1. default.cssСоздайте внешний CSS-файл, которыйсодержит стили, используемые на Web-сайте, и сохраните его под именем de-fault.css (листинг 22.2). Этот файл на-прямую присоединяется к каждой Web-странице (см. шаг 3).

Рис. 22.3. Так выглядит страница, загруженнаяпри помощи Internet Explorer 5 для Windows

Рис. 22.4. Та же самая страница при загрузке изInternet Explorer 5 для Mac (без корректировки) –шрифт мельче и слишком бледный

359

2. mac.cssСоздайте второй файл и сохраните егопод именем mac.css (листинг 22.3). Этаверсия дополняет файл default.css и адап-тирует CSS вашего сайта для пользо-вателей Mac. Нет необходимости вводитьповторно все определения в default.css.

3. <link href="default.css" rel=->"styleSheet" type="text/css">

В тэге <head> HTML-документа (в при-мере используется файл index.html, см.листинг 22.4) привяжите версию табли-цы стилей, которая применяется поумолчанию.

4. if((navigator.appVersion.indexOf->('Mac')!=1)){…}

После тэга <link> напишите строкуJavaScript, чтобы определить операци-онную систему, в которой работаетбраузер. Если это Mac, то тэг <link> дляMac уже добавлен к странице при по-мощи JavaScript. Этот второй стиль из-меняет установки таким образом, что-бы они больше подходили под опера-ционную систему Mac.

Хотя класс copy в Mac-версии CSS не со-держит гарнитуры шрифта, текст по-преж-нему отображается как Times. Так почемуже определение класса copy в файлеdefault.css сменяется определением изmac.css? Термин «каскадный» в понятии«каскадные таблицы стилей» означает воз-можность перекрывать определения, дажеесли они взяты из разных источников.

CSS и операционная система

Рис. 22.5. Та же самая страница, загруженная припомощи Internet Explorer 5 для Mac, но ужеподкорректированная. Увеличился размершрифта, цвет стал более темным

Листинг 22.2. Файл default.css содержит стилиWeb-страницы, которые будут использоватьсяпо умолчанию

.copy {color: #cc3;font: 20px/32px "Times New Roman",->Georgia, Times, serif;width: 500px}

body {background-color: #fff}

Листинг 22.3. Стили в файле mac.css дублируютаналогичные из файла default.css

.copy {color: #bb2;font: 23px/35px;width: 600px}


Операционные системы – это не един-ственная проблема при создании CSS.Браузеры, даже работающие в одной ОС,имеют различную интерпретацию размерашрифта и позиционирования элементов.Вы можете использовать технологию, по-добную описанной выше для различныхоперационных систем, чтобы устанавли-вать тип браузера (см. раздел «Названиеи версия браузера» в главе 12) и соответ-ственно изменять таблицы стилей.

Описанный прием использования JavaScriptудобен для достижения различных резуль-татов. Если потребовалось предоставитьпосетителю возможность выбирать таблицустилей для вашего сайта, вы должны ввес-ти некоторую переменную, чтобы опре-делить, какая таблица стилей загружена.Приведенный код дает как посетителю, таки разработчику значительно больший кон-троль над отображением страницы, и, та-ким образом, Web-дизайнерам нет необхо-димости создавать отдельные страницыдля каждой из версий.

Листинг 22.4. JavaScript определяет, используетсяли на компьютере MacOS; случае положительногоответа загружаются другиеCSS-стили, помогающие осуществить коррекцию

<html><head>

<link href="default.css"->rel="styleSheet" type="text/css"><script language="JavaScript">

if ((navigator.appVersion.indexOf("Mac")->!= -1)) {document.write('<link href="mac.css"->rel="styleSheet" type="text/css">'); }


<p class="copy">Down, down, down...-></p><p class="copy">Presently she began->again...</p>

</body></html>

361

ЗаголовкиОдна из проблем разработчика – это заго-ловки, созданные при помощи графики.Всякий раз приходится создавать новыйграфический объект для каждого заголов-ка. Используя свойство CSS для определе-ния фона, вы можете получить огромноеколичество различных фонов для заголов-ков без необходимости каждый раз рабо-тать над новым графическим объектом.Кроме того, это не повлечет за собой уве-личения времени загрузки сайта.

Создание заголовковпри помощи фона

1. background_headline.gifПри помощи графического редакторасоздайте фоновое изображение и со-храните его. Назовите файл backgro-und_headline.gif (рис. 22.6).

2. h3.graphic{…}Определите в CSS для тэга <h3> (лис-тинг 22.5) ассоциированный классgraphic (см. раздел «Определение клас-сов для создания тэгов» в главе 2). До-бавьте атрибут фона и укажите создан-ный вами на шаге 1 файл (см. раздел«Установка отдельных свойств фона»в главе 6).Можно не называть класс, созданныйна шаге 2, graphic. Назовите его так, каквам больше нравится.

3. <h3 class="graphic">->CHAPTER VII<br>A Mad Tea-Party</h3>

Фоновый рисунок всегда будет появ-ляться при использовании заголовков3-го уровня, пока вы определяете в кодеатрибут class и присваиваете ему класс,созданный вами на шаге 2 (рис. 22.7).

Рис. 22.6. Изображение, на фоне которого будетпомещен заголовок

Листинг 22.5. Способ добавления фоновогоизображения в заголовок документа вполнеочевиден, тем не менее появляющиеся при этомвозможности практически безграничны

<html><head>

<style type="text/css">h3.offset {

color: #000000;font-weight: bold;font-size: 14px;font-family: Verdana, Arial,->Helvetica, sans-serif;background-color: #ccc;padding: 3px;border: solid 1pt #000000;position: relative;width: 440px; }

h3.graphic {background: black url->(background_headline.gif) no-repeat;font: bold 16px helvetica,sans-serif;color: white;width: 400px;padding:10px; }

p {font: normal 10pt/14pt times,serif;left-margin: 25px;width: 400; }</style>

</head><body>

<h3 class="offset">CHAPTER VII<br>A Mad Tea-Party</h3><p>The table was a large one...</p><h3 class="graphic">CHAPTER VII<br>A Mad Tea-Party</h3><p>There was a table set out under a->tree in front of the house...</p>

</body></html>

Заголовки


Таким же образом можно определятьи другие уровни заголовков, использоватькак одинаковые, так и различные фоно-вые изображения (см. раздел «Опреде-ление тэгов с помощью одинаковых пра-вил» в главе 2).

Экспериментируйте, пробуя различные фо-новые рисунки. Одно из фоновых изобра-жений, которые я использовал на своемWeb-сайте, представляет собой полоскуспектра: цвет плавно изменяется справаналево, постепенно переходя в цвет основ-ного фона (рис. 22.8).

Фиксированный заголовокОдин из принципов Web-дизайна – помо-гать посетителям ориентироваться на сай-те. Посетитель всегда должен знать, на ка-кой странице находится. К сожалению,чтобы просмотреть Web-страницу полно-стью, ее необходимо прокрутить, поэтомутакая важная информация, как, например,заголовок, может попросту скрыться с глазпосетителя по мере прокрутки страницы.Используя CSS, нетрудно зафиксироватьзаголовок в верхней части Web-страницы,помогая посетителю определить местона-хождение на сайте (рис. 22.9).Однако следует помнить, что Internet Ex-plorer 4 (Mac и Windows), Internet Explo-rer 5 (Windows) и Netscape 4/6 (Mac и Win-dows) не поддерживают фиксированноерасположение объектов. Единственнымсовместимым браузером является InternetExplorer 5 (Mac).

Рис. 22.7. Два примера заголовков.Поэкспериментируйте с графикой и рамкамидля получения различных эффектов

Рис. 22.8. Заголовки about the site и Readingthe Code представляют собой обычный текст,расположенный на фоновом рисунке

Рис. 22.9. Заголовок остается фиксированнымв верхней части Web-страницы, хотя текст ужепереместился вверх

363

Фиксация заголовка

1. #header {При помощи класса или ID откройтесписок определений. В приведенномпримере создается ID с именем header(листинг 22.6).

2. position: fixed;Атрибуту position присвойте значениеfixed.

3. color: red;Добавьте любые другие определения,которые хотите использовать для со-здания заголовка. В примере заголовоккрасного цвета отображается на серомфоне.

4. }Закройте список определений фигур-ной скобкой.

5. <div id="header"> <i>AliceInWonderLand-></i>By Lewis Carrol</div>

Добавьте ID к нужному элементу. В дан-ном случае тэг <div> служит для выде-ления заголовка страницы.

Помните, что этот метод работает не вовсех браузерах. Браузеры, которые не под-держивают фиксированные заголовки, рас-сматривают такой заголовок как статичес-кий элемент, поэтому он исчезает вместес текстом при прокрутке страницы.

Неплохо расположить ссылку в фиксиро-ванном заголовке, но ошибка в InternetExplorer 5 делает это абсолютно беспо-лезным (см. раздел «Фиксированное по-зиционирование» в главе 8).

Фиксированный заголовок

Листинг 22.6. Для неподвижного заголовкаустанавливается ID, который затем добавляетсяв тэг <div>

<html><head>

<style type="text/css">#header {

color: red;font-weight: bold;font-size: 16px;font-family: "Times New Roman",->Georgia, Times, serif;background-color: #aaa;padding: 5px;position: fixed;z-index: 1000;top: 0px;left: 0px;width: 110%;visibility: visible; }</style>

</head><body>

<div id="header"><i>Alice In Wonderland</i> By Lewis->Carrol

</div><br><p>'I'm sure those are not the right->words,...</p><p><img src="alice08.gif" width="200"->height="131" border="0"->align="right">As she said this she looked down at->her hands...</p><p>'That <i>was</i> a narrow->escape!...</p><p>As she said these words her foot->slipped...</p>

</body></html>


Боковое менюБоковые меню (Sidebar), вероятно, один излучших и часто используемых способовсоздания навигации. Традиционный способоформления Web-страницы – это длинныегоризонтальные изображения, а также боко-вые меню и фоновый цвет для поля с тек-стом. При помощи CSS вы можете приме-нять гораздо меньшее количество графикина странице, а боковое меню представитьв виде колонки, располагающейся в левойчасти экрана. Данный способ позволяет со-кратить время загрузки страницы, посколь-ку уменьшается размер фоновой графики.

Создание бокового меню

1. background_side.gifСоздайте изображение – полосу, шири-ну которой определите соответственноширине бокового меню.

2. body{background: #cccccc

->url(background_side.gif) repeat-y;}

Настройте селектор body в документе,чтобы можно было использовать графи-ческий объект, созданный на шаге 1, нозадайте его повтор только в направленииоси Y (см. раздел «Установка отдельныхсвойств фона» в главе 6). Допустимотакже установить цвет фона для всейWeb-страницы (см. листинг 22.7).

3. Применяйте таблицы или CSS, чтобыпоместить содержание бокового менюв колонке слева, а правую часть стра-ницы освободить для других элемен-тов. В приведенном примере созданыдве колонки, расположение которых за-дано в абсолютных координатах; в ле-вой колонке будет располагаться боко-вое меню, а правая предназначена длясодержания.

Рис. 22.10. Данное фоновое изображениеиспользуется для того, чтобы создать боковоеменю шириной 160 пикселов

Рис. 22.11. Боковое меню располагается в колонкев левой части окна, а фоновый цвет применяетсядля остальной части страницы

Поэкспериментируйте с различной графи-кой и эффектами. Попробуйте располо-жить графические объекты в верхней час-ти страницы (repeat-x), чтобы создатьверхнее меню, а не боковое. Ваши возмож-ности безграничны!

365

Листинг 22.7. В этом примере создается боковое меню при помощи фонового изображения. Страницаразделяется на две колонки

<html><head>

<style type="text/css">body {

background: #cccccc url(background_side.gif) repeat-y; }#sidebar {

position: absolute;top: 10px;left: 30px;width: 150px; }

#content {position: absolute;top: 10px;left: 175px }</style>

</head><body>

<div id="sidebar"><h3>Menu</h3><img src="b_book.gif" width="69" height="81"><br>Book<br><img src="b_portrait.gif" width="69" height="81"><br>Portrait<br><img src="b_portfolio.gif" width="72" height="79"><br>Portfolio<br><img src="b_painting.gif" width="69" height="81"><br>Painting<br><img src="b_letter.gif" width="72" height="79"><br>Letter<br><img src="b_hammer.gif" width="72" height="81"> <br>Tools

</div><div id="content">

<H3>My Conversation with Alice</H3><p>'I've been to a day-school, too,' said Alice; 'you needn't be so proud as all->that.'</p><p>'With extras?' asked the Mock Turtle a little anxiously.</p><p>'Yes,' said Alice, 'we learned French and music.'</p><p>'And washing?' said the Mock Turtle.</p><p>'Certainly not!' said Alice indignantly. </p>


Боковое меню


Верхние и нижниеколонтитулыОдна из проблем, возникающих при разра-ботке больших Web-сайтов, заключаетсяв невозможности изменить стиль дизайна,если вы уже начали использовать какой-тоопределенный.На моем Web-сайте количество статей при-ближается к сотне, столько их скопилось загоды моей работы. Поскольку я не гурубаз данных, то хранятся они в виде стати-ческих HTML-страниц. Но я всегда стре-мился к лучшему и старался сделать своисайты привлекательными. Например, вер-хние и нижние колонтитулы я не разме-щаю непосредственно на страницах, а ис-пользую JavaScript, чтобы «вписать» ихв страницы. Переменные JavaScript позво-ляют в каждом новом случае отображатьзаголовок, дату и другую информацию,касающуюся статьи (см. раздел «Внеш-ний файл JavaScript» в главе 23).

Установка верхнего и нижнегоколонтитула

1. header.jsСоздайте внешний файл JavaScript и со-храните его под именем header.js. Онбудет импортирован в начало файлаindex.html (см. шаг 4). Введите строкуdocument.writeln(…), чтобы указатьHTML для верхних колонтитулов стра-ницы. Кроме того, код в этом файле бу-дет использовать переменные (index.html),чтобы каждый раз обновлять заголовки,подзаголовки, дату и т.д. (листинг 22.8).

Листинг 22.8. Чтобы создать верхний колонтитулдокумента, код JavaScript необходимоимпортировать в начало файла index.html

document.writeln ("<h1>")document.writeln (title)document.writeln ("</h1>")document.writeln ("<h3>")document.writeln (subTitle)document.writeln ("</h3>")document.writeln ("<i>")document.writeln (teaser)document.writeln ("</i><br><br> <span->style="font: 10pt arial">')document.writeln (dDate + " " + mDate +->" " + yDate)document.writeln ("</span>")

367

2. footer.jsСоздайте внешний файл JavaScript и со-храните его под именем footer.js. Онбудет импортирован в конец файлаindex.html (см. шаг 4). Введите строкуdocument.writeln(…), чтобы описатьHTML для нижних колонтитулов стра-ницы. В приведенном примере нижнийколонтитул отображает название страни-цы, заключенное между тэгом <title>(title – это не переменная JavaScript)и URL страницы. В колонтитуле пред-ставлена также ссылка на страницуоригинала и ссылка, после активиза-ции которой будет запущен почтовыйклиент (листинг 22.9).

3. title='The Beginning of the End';В тэге <script> в заголовке <head> доку-мента, для которого требуется создатьколонтитулы, определите следующиепеременные: title, subTitle, teaser,dDate, mDate и yDate. JavaScript будет ис-пользовать их при отображении верхне-го колонтитула (листинг 22.10).

4. <script src="header.js"></script>В тэге <body> HTML-страницы определи-те тэг <script>, который будет содержатьссылки на источники URL для верхнегои нижнего колонтитулов (рис. 22.12).

Верхние и нижние колонтитулы

Листинг 22.9. Этот код помещается в конец файлаindex.html, чтобы создать нижний колонтитулдокумента

document.writeln('<br><hr><br clear=->"all">')document.writeln('<span class=->"copyright">')document.writeln('<b>Title:</b> ' +->self.document.title)document.writeln('</br>')document.writeln('<b>URL:</b> <a href="->' + self.location + '">' +->self.location + '</a>' )document.writeln('</br>')document.writeln('<a href="../aux/->copyright.html">Copyright ©</a> 1998-2000 <A HREF=->"mailto:[email protected]">->Jason Cranford Teague</A>. All rights->reserved.' );document.writeln('</span></br>')

Листинг 22.10. Приведенный код размещаетна странице верхний и нижний колонтитулы.Он использует ряд переменных JavaScript дляколонтитулов. В этих переменных содержитсяинформация о название статьи, подзаголовках,дате и т.д.

<html><head>

<script>title = 'The Begining of the End';subTitle= 'Why I went to the Store';teaser = 'The day started like any other,but little did I know that it would soonturn into the worst day of my life!'dDate = '01'mDate = 'January'yDate = '2001'

</script>


Вы можете размещать любой код в колон-титулах. В приведенном примере код нави-гации находится также во внешнем файлеJavaScript. Это позволяет добавлять илиудалять отдельные элементы навигации безизменения каждой страницы Web-сайта.

Переменные, которые вводятся на шаге 3, –это всего лишь пример того, какую инфор-мацию можно отображать для каждой Web-страницы в отдельности, используя им-портируемый код JavaScript. Разрешаетсявключать любые данные, касающиеся тойили иной страницы, например ее порядко-вый номер, расположение на сайте и т.п.

Рис. 22.12. Web-страница с динамическимиэлементами – верхним и нижним колонтитулами.Поскольку вы непосредственно не создавали коддля колонтитулов, разметка страницы,информация о которой хранится в файлеJavaScript, осталась прежней. Кроме того, вы невносили никаких изменений, которые могли быповлиять на HTML страницы, где используетсяразметка определенного типа


<link rel="stylesheet"->href="default.css">

</head><body>

<script src="header.js"></script><!–– Begin Content ––>

<p>Et quid erat, quod me delectabat,->nisi amare et amari? </p>

<!–– End Content ––><script src="footer.js"></script>

</body></html>

369

Границы фреймовОдна из проблем с фреймами заключает-ся в том, что границы, устанавливаемыеHTML между ними, выглядят как-то не-уклюже (рис. 22.13). Однако при заданиифона вы можете использовать любой видграниц (рис. 22.14).Хотя эти границы могут быть размещенытолько по левому краю или по верху от-дельного фрейма, они очень полезны, еслинеобходимо показать четкую границу меж-ду фреймами.

Создание границы фрейма

1. border.gifСоздайте изображение для границыфрейма. В приведенном примере я ис-пользую фрагмент орнамента, которыйсохранен в файле border.gif (рис. 22.15).Вы можете взять любые другие изобра-жения для создания таких границ.

2. index.htmlСоздайте документ фрейма, обязатель-но проверив, что границы фреймов,расставляемые по умолчанию, отклю-чены: border="0" framespacing="0"frameborder="no"

Сохраните эти настройки в файлеindex.html.

3. right_frame.htmlУкажите фоновое свойство в тэге <body>HTML-документа (листинги 22.12 и 22.13),чтобы поместить изображение границы,созданное на шаге 1, в качестве фона вы-бранного фрейма (см. рис. 22.14). Задайтеповтор этого изображения как по верти-кали (repeat-y), так и по горизонтали(repeat-x) – см. раздел «Установка фона»в главе 6).

Границы фреймов

Рис. 22.13. Фреймы с границами, установленнымипо умолчанию

Рис. 22.14. Применение CSS: границы междуфреймами отмечены орнаментом

Рис. 22.15. Изображения, применяемыедля создания границ фреймов. Вы можетеиспользовать на своем сайте любые изображения


Этот способ действует только при разме-щении левой или верхней границ фрейма.Вы не можете воспользоваться им длятого, чтобы установить одновременно обеграницы или создать нижнюю и правуюграницу.

Какой будет граница фрейма – узкой илиширокой, длинной или короткой, яркойили блеклой – зависит только от вашейфантазии. Такие границы имеют лишьодин недостаток по сравнению с граница-ми, устанавливаемыми по умолчанию: нивы, ни посетитель не могут с их помощьюменять размер фрейма.

Листинг 22.12. Фрейм с вертикальными границами

<html><head>

<style type="text/css">body {

background: white url(border.gif)->repeat-y }


<h4>Table Of Contents</h4><hr width="90%" align="left"><p><a href="#">Chapter I</a></p>

</body></html>

Листинг 22.13. Фрейм с горизонтальнымиграницами

<html><head>

<style type="text/css">body {background: silver url(border.gif)->repeat-x 0px 0; }


<h3>Chapter V - Advice from a->Caterpillar</h3></body></html>

Листинг 22.11. Документ с описанием фреймов

<html><frameset rows="*,40" border="0"->framespacing="0" frameborder="no">

<frameset cols="*,150" border="0"->framespacing="0" frameborder="no">

<frame src="center_frame.html"->name="center" noresize><frame src="right_frame.html"->name="right" noresize>

</frameset><frame src="bottom_frame.html" name=->"bottom" noresize scrolling="no">

</frameset></html>

371

Открытие и закрытиефреймовСущественный недостаток использованияфреймов на Web-странице состоит в том,что их нельзя изменять. Все пространство,которое они занимают на Web-странице, –всевозможные меню, заголовки и т.п. –жестко привязано к экрану. Это может бытьудобным, если у вашего компьютера доста-точно большой монитор, однако совсем неподходит менее удачливым посетителям –обладателям меньших мониторов.Далее я расскажу о разработанной мноютехнологии, которая применяет вложен-ные фреймы и JavaScript при открытиии закрытии меню во фрейме (рис. 22.16и 22.17). Когда меню закрыто, область,отведенная под отображение содержания,расширяется; таким образом, становитсябольше свободного места, которое можноэффективно использовать.

Создание скрытых фреймов

1. index.htmlОпределите структуру фреймовой стра-ницы. В приведенном примере устанав-ливается два фрейма: header и content(листинг 22.14). Фрейм header – стати-ческий (не меняет свой исходный код),содержит файл header.html, в которомнаходится большая часть JavaScript-кода, необходимого для создания скры-того фрейма.

Открытие и закрытие фреймов

Рис. 22.16. Меню закрыто

Рис. 22.17. Меню открыто

Рис. 22.18. Файл настроек фрейма index.html


Листинг 22.15. Структура фреймов, которая будетзагружена во фрейм содержания index.html, когдаменю закрыто

<html><frameset cols="25,*" border="0"->framespacing="0" frameborder="no">

<frame name="control"->src="control.html" marginwidth="0"->marginheight="0" scrolling="no"->frameborder="no" noresize><frame name="content2"->src="content.html" marginwidth="10"->marginheight="10" scrolling="auto"->frameborder="no">

</frameset></html>

2. nomenu_frames.htmlСоздайте фреймовую структуру (тэг<frameset>), состоящую из двух коло-нок, и сохраните их в файле nome-nu_frames.html (листинг 22.15). Первыйфрейм (control) содержит файл cont-rol.html, второй (content2)– файл con-tent.html.

3. menu_frames.htmlСоздайте фреймовую структуру, содер-жащую три колонки, и сохраните еев файле menu_frames.html (листинг 22.16).Два вторых фрейма в этой настройкеаналогичны фреймам из nomenu_fra-mes.html. Ширина первого фрейма со-ставляет 150 пикселов, он отображаетфайл menu.html.

Листинг 22.14. Файл настроек фрейма используетсядля создания разметки Web-страницы

<html><frameset rows="35,*" border="0"->framespacing="0" frameborder="no">

<frame name="header" src="header.html"->scrolling="no" frameborder="no"->noresize marginHeight="2px"->marginWidth="2px"><frame name="content"->src="nomenu_frames.html"->marginwidth="10" marginheight="10"->frameborder="no">

</frameset></html>

Рис. 22.19. Структура фреймов nomenu_frames.html,которая будет загружена во фрейм content файлаindex.html при закрытии меню

Рис. 22.20. Cтруктура фреймов menu_frameset.html,которая будет загружен во фрейм content файлаindex.html, когда меню открыто

373

4. header.htmlСоздайте HTML-файл, который будетиспользоваться во фрейме header, создан-ном на шаге 1, и сохраните его под име-нем header.html (листинг 22.17). ФункцияmenuToggle() является основой этой стра-ницы. Она вызывается, когда посетительщелкает по ссылке Menu в control.html.Сначала функция определяет, какойHTML-документ загружен во фреймcontent2 и сохраняет URL в переменнойcontentSRC. Затем она проверяет, отобра-жается ли меню, и переходит в зависимо-сти от этого к файлу nomenu_frames.htmlлибо menu_frames.html. В переменнойframeState записывается текущее состоя-ние меню: 0 (закрыто) или 1 (открыто).

Листинг 22.16. Структура фреймов загруженаво фрейм содержания в файл index.html, когдаменю открыто

<html><frameset cols="100,25,*" border="0"->framespacing="0" frameborder="no"><frame name="menu" src="menu.html"->marginwidth="10" marginheight="10"->scrolling="no" frameborder="no"->noresize><frame name="control" src="control.html"->marginwidth="0" marginheight="0"->scrolling="no" frameborder="no"->noresize><frame name="content2"->src="content.html" marginwidth="10"->marginheight="10" scrolling="auto"->frameborder="no"></frameset></html>

Листинг 22.17. HTML-документ, использующийсяво фрейме header файла index.html. Он содержитфункцию menuToggle(), которая при запускеоткрывает (или закрывает) фреймовое меню

<html><head>

<script language="JavaScript">var frameState = 0;var contentSRC = null;function menuToggle() {

if (frameState == 0) {contentSRC = parent.content.

->content2.location.href;top.content.location =->'menu_frames.html';frameState = 1;return;

}else {

contentSRC = parent.content.->content2.location.href;

top.content.location =->'nomenu_frames.html';


frameState = 0;return;

}}


h2 { color: gray; font-weight: bold;font-size: 24px; font-family: "Trebuchet->MS", Arial, Helvetica, Geneva,->sans-serif; }body { background-color: #333; }


<h2>webbedENVIRONMENTS</h2></body></html>



5. menu.htmlСоздайте HTML-файл, который будетотображаться, когда меню открыто, и со-храните его под именем menu.html (лис-тинг 22.18). В этом примере использова-ны HTML-ссылки, но вы можете помес-тить любое содержание. Для всех ссылокследует указывать, что открывать ихнадо во фрейме content2.

6. control.htmlСоздайте HTML-файл, который будетприменяться во фрейме control, и сохра-ните его как control.html (листинг 22.19).Файл содержит ссылку, при щелчке покоторой запускается функция menuTog-gle(), созданная на шаге 4.

Листинг 22.18. HTML-документ, которыйсодержит отображаемое меню из файлаmenu_frames.html. Он может включать в себялюбое HTML-содержание

<html><head>

<style type="text/css">body { color: gray; font: bold 12px/24px->"Trebuchet MS", Arial, Helvetica,->Geneva, sans-serif; background-color:->black }a:link { color: white; text-decoration:->none; }a:hover { color: white; text-decoration:->underline }a:active { color: silver; text-->decoration: underline }a:visited { color: white;->text-decoration: none }


<a href="home.html"->target="content2">Home</a><br><a href="page1.html"->target="content2">Page 1</a><br><a href="page2.html"->target="content2">Page 2</a><br><a href="page3.html"->target="content2">Page 3</a><br>

</body></html>

Листинг 22.19. HTML-документ, используемыйдля контроля фреймов из файловmenu_frames.html и nomenu_frames.html. Онсодержит ссылку, которая вызывает функциюmenuToggle() из header.html

<html><head><body>

<div id="tabs"><a href="javascript:top.header.->menuToggle();">

<img src="images/tabMenu.gif"->width="20" height="100"->border="0">

</a></div>

</body></html>

375

7. content.htmlСоздайте HTML-страницу, которая со-держит код, представленный в листин-ге 22.20. Этот документ – промежуточ-ный этап и никогда не остается долго наэкране. Он определяет, какой документнаходится во фрейме content2, присваи-вая переменной header адрес того фрей-ма, который его загрузил (contetSCR).После этого он обновляет документ.Если ранее ничего не было загружено(например, при первом открытии Web-сайта), запускается home.html.

8. home.htmlСоздайте страницы вашего сайта (лис-тинг 22.21). Они будут содержаться вофрейме content2.

Этот метод позволяет посетителю сайтаоткрывать и закрывать меню навигации.

Нет необходимости использовать менюв скрытом фрейме. Однажды для однойорганизации я создавал сеть intranet, ко-торая была построена именно на описан-ном выше методе.

Из-за наличия ограничений для обеспече-ния надлежащего уровня безопасностикак в Internet Explorer, так и в Netscape, выне сможете открыть или закрыть меню,пока фрейм content2 содержит документс сервера – за исключением тех страниц,которые связаны с вашим Web-сайтом.Таким образом, вы не вправе одновремен-но пользоваться файлами с разных сер-веров.

Листинг 22.20. Файл инициализации, которыйзагружается во фрейм content2 из файловmenu_frames.html и nomenu_frames.html. КодJavaScript, содержащийся в этом файле,определяет URL страницы, отображавшейся передизменением меню (полученный URL записываетсяв переменную contentSRC из файла header.html),и перезагружает страницу в данный фрейм

<html><head>

<script language="JavaScript">var contentSRC;function replaceContent() {

contentSRC = top.header.contentSRC;if (contentSRC == null) {self.location->= "home.html";}else {self.location = contentSRC;}

}</script>

</head><body onload="replaceContent();"></body></html>

Листинг 22.21. Типичная страница содержаниясайта

<html><head>

<style media="screen" type="text/css">body {

background-color: white }h2 { color: silver; font-weight: bold;->font-size: 36px; font-family:->"Trebuchet MS", Arial, Helvetica,->Geneva, sans-serif; } </style></head><body>

<h2>Home</h2></body></html>



Размещение страницво фреймахПредставьте, что вы читаете книгу. Вы за-канчиваете поздно ночью и оставляете за-кладку на последней прочитанной страни-це. Следующим вечером вы берете книгуи хотите продолжить чтение. Но закладкакаким-то мистическим образом исчезлас того места, где вы ее оставили, и оказа-лась лежащей рядом с книжкой. Какая не-приятность! Ох, уж эти барабашки! И те-перь вам приходится листать книгу в поис-ках страницы, на которой остановились.Если вы создаете Web-сайт, используя фрей-мы, такая же оказия может приключитьсяи с вашими посетителями. Они помещаютзакладку на какой-нибудь странице вашегосайта, которую они долго искали и наконецнашли, а затем обнаруживают, что закладканаходится на первой странице!Сказанное касается не только Web-сайтов,содержащих фреймы. Что, если вы хотитенаправить посетителей к какой-нибудьособенной странице по электронной по-чте или с другого сайта? Конечно, вы мо-жете дать им URL этой страницы, но есливы адресуете их на страницу непосред-ственно, без помощи фреймов, вы пред-лагаете им книгу, в которой выдраны по-следние страницы или нет корешка. До-пустимо создавать различные контейне-ры с описанием структуры фреймов длякаждой страницы, но это очень хлопотнои неразумно.Существует более легкий путь решенияпроблемы. Вы не вправе изменить работуфреймов, поскольку по некоторым причи-нам производители браузеров игнорирова-ли поддержку такой возможности. Однакоесть и обходной путь (рис. 22.21 и 22.22).

Рис. 22.21. Страница загружается на «пустой»экран, но практически стразу же…

Рис. 22.22. …экран мигает, и страница, которуювы только что видели, предстает пред вамив новом виде – с использованием фреймов

377

Автоматическое размещениеHTML-страницы

1. framed.jsСоздайте внешний файл JavaScript (см.раздел «Внешний файл JavaScript» в гла-ве 23) и сохраните его под именем fra-med.js (листинг 22.22). Добавьте код,определяющий, загружен ли документ вофрейм (сравнивая URL документа с URLцелого окна). Если документ размещенво фрейме, то адреса различны и ника-ких действий не выполняется. Если ад-реса одинаковы (документ не помещенво фрейм), программа соединяет URLфрейма (в данном случае index.html)c URL документа (myPage), ставя меж-ду ними знак вопроса (?). Выполнениефункции завершается переходом на сге-нерированный адрес.

2. index.htmlПри помощи JavaScript создайте доку-мент с описанием структуры фреймов,чтобы ввести HTML-код для страницы,и сохраните его как index.html (лис-тинг 22.23). Этот код извлекает URLстраницы, которая помещается во фреймcontent из URL текущей загруженнойстраницы. Если знак вопроса (?) появ-ляется в полном адресе страницы, про-грамма использует расположенный заним код в качестве адреса фрейма с со-держанием для URL фрейма content,сохраненного в переменной contentSRC.В противном случае применяется URL,установленный по умолчанию (в дан-ном примере defaultContent.html), в ко-торый вы можете ввести любой адрес.

Листинг 22.22. Небольшой внешний файл,содержащий код JavaScript, проверяет, находятсяли во фреймах помещенные в них страницы

myPage = self.location;thisPage = top.location;

if (thisPage == myPage) {contentSRC = escape(myPage);frameURL = "index.html?" + contentSRC;top.location.href = frameURL;

}

Листинг 22.23. Настройки фрейма не закодированынепосредственно в HTML, но они сохраняютсяв коде JavaScript, чтобы вы могли добавлятьпеременные в HTML

<html><script language="JavaScript">contentSRC = (location.search.->substring(1)) ? location.search.->substring(1) : "defaultContent.html";contentSRC = unescape(contentSRC);var writeFrame = "";writeFrame += '<FRAMESET COLS=->"*,575,*" BORDER="0"->FRAMESPACING="0" FRAMEBORDER="NO">';writeFrame += '<FRAME SRC=->"filler.html">';writeFrame += '<FRAMESET ROWS=->"50,*,50">';writeFrame += '<FRAME SRC=->"filler.html">';writeFrame += '<FRAME SRC="' +->( contentSRC ) + '" NAME="content"->NORESIZE>';writeFrame += '<FRAME SRC=->"filler.html">';writeFrame += '</FRAMESET>';writeFrame += '<FRAME SRC=->"filler.html">';writeFrame += '</FRAMESET>';document.write(writeFrame);

</script></html>

Размещение страниц во фреймах


3. content.htmlСоздайте страницы Web-сайта (листин-ги 22.24 и 22.25). В тэге <head> всех до-кументов, которые следует динамичес-ки разместить во фрейме content, опре-делите загрузку внешнего файла Java-Script, созданного на шаге 1: <scriptsrc="framed.js"></script>

Если вы хотите направить посетителя наопределенную страницу вашего сайта, ото-шлите ему URL документа, созданного нашаге 2 (index.html). Любая HTML-страницабудет размещаться во фрейме автоматичес-ки, так как вы импортировали в нее файлframed.js (см. шаг 3). Если посетитель пе-реходит к одной из таких страниц по ссыл-ке и оставляет на ней закладку, впослед-ствии он сможет быстро вернуться к ней.

В Netscape для Windows и Internet ExplorerWindows/Mac закладка на страницах вофреймах помещается следующим образом:нужно щелкнуть по интересующей стра-нице и, удерживая кнопку мыши нажатой(Mac) или дважды щелкнув ею (Windows),выбрать необходимую опцию из всплыва-ющего меню. Когда посетитель, поместивзакладку на фреймовой странице, котораябыла создана описанным выше способом,возвращается к этой странице, она автома-тически загружается во фрейм.

Данный метод не позволяет избавитьсяот всех проблем, возникающих при раз-мещении закладок на фреймовых страни-цах. Но пока производители браузеров неприложат все усилия для совместногоразрешения этих проблем, он поможетсделать ваши сайты, использующие тех-нологию размещения во фреймах, болееудобными.

Листинг 22.24. Эта страница загружается в томслучае, если URL не включает знака вопроса (?).Она содержит ссылку на файл frames.js, котораяпри необходимости помещает страницу во фрейм

<html><head>

<script src="framed.js"></script><link rel="stylesheet"->href="default.css">

</head><body>

<h2>Page 1</h2></body></html>

Листинг 22.25. Эта страница содержит ссылкус кодом из файла frames.js

<html><head>

<script src="framed.js"></script><link rel="stylesheet"->href="default.css"></head>

<body><h2>Page 2</h2>

</body></html>

379

Отображение страницына экране и при выводена печатьЯ никогда не видел офис, в котором небыло бы бумажных документов, а увидев,очень удивился бы. Однако самым боль-шим обещанием, сопровождающим про-движение компьютерных технологий, явля-ется обещание избавить вашу жизнь от бу-маги – мол, не будет больше заваленныхкабинетов и погубленных деревьев. Однакоэто всего лишь утопия. Наверное, мы поле-тим к другим галактикам раньше, чем из-бавимся от бумаги.С появлением лазерных и струйных принте-ров мир оказался погребенным под груда-ми прекрасно отпечатанных листов. ДажеInternet сыграл в этом свою роль: многиелюди распечатывают Web-страницы, еслиони целиком не помещаются на экране.Однако Internet предназначен для отобра-жения информации на экране компьютера,а не для печати. Графика, оптимизирован-ная под Web, на распечатке выглядит ужас-но, так как хорошо просматривается пик-сельная структура в виде прямоугольныхэлементов. Однако для улучшения внешне-го вида отпечатанных страниц все же мож-но кое-что сделать. Это требует немногодополнительных усилий, зато посетителивашего сайта будут вам очень благодарны.Ниже перечислены советы, следуя кото-рым вы можете значительно улучшитьвнешний вид ваших Web-страниц при вы-воде на печать:

используйте CSS. Каскадные таблицыстилей – будущее разметки Web. CSSпозволяет создавать документы, выгля-дящие так же, как и распечатанные изкакого-нибудь текстового процессора;

указывайте способы отображения доку-мента. CSS позволяет определять таб-лицы стилей для различных способовотображения документов – на экранеили на бумаге (см. раздел «НастройкаCSS для печати» в главе 2);используйте разрывы страниц, чтобызаголовки не отделялись от текста.Хотя не всеми браузерами поддержива-ются знаки разрыва страниц (см. раздел«Установка разрыва страницы для печа-ти» в главе 4), они, скорее всего, станутуниверсальным стандартом в будущем;отделяйте содержимое страницы отсредств навигации при помощи фрей-мов. Старайтесь размещать содержи-мое в отдельном фрейме: в таком слу-чае вы можете расположить средстванавигации в других фреймах. Это по-зволит посетителям вашего сайта распе-чатывать только нужную им информа-цию (см. раздел «Открытие и закрытиефреймов»).избегайте использования фонового цветаили рисунков, а так же светлого цветатекста. Хотя цветной фон или фоноваяграфика могут сделать страничку сим-патичной, они мешают при чтении тек-ста после вывода на печать. Некоторыебраузеры позволяют печатать докумен-ты без фона и фоновой графики, однакосветлый текст при этом плохо виден набелой бумаге;не применяйте прозрачные цвета в гра-фике. Это рекомендация особенно ак-туальна в том случае, если графика рас-полагается поверх цветного фона илиповерх другой картинки. Прозрачныеобласти картинок при распечатке обыч-но окрашены в белый цвет вне зависи-мости от того, какой цвет фона нахо-дится под ними. Это не так страшно,

Отображение страницы на экране и при выводе на печать


когда картинка располагается на беломфоне, однако результат просто ужасен,если фон темный;избегайте использования текста в гра-фике. Текст, реализованный в виде кар-тинки, выглядит на экране гладким, а нараспечатке – состоящим из квадратов.Напротив, обычный текст может бытьугловатым на экране, но печатаетсясглаженным на большинстве современ-ных принтеров. Старайтесь применятьобычный текст;создавайте специальные версии страниц,предназначенные для распечатки. Пред-почтительнее создать отдельный доку-мент для печати, чем заставлять посети-телей вашего сайта следовать по ссыл-кам и распечатывать каждую страницуотдельно. Одним из лучших способовхранить информацию для печати в бо-лее или менее универсальном форма-те является Adobe Acrobat. Документыв этом формате не только содержатнеобходимую информацию, но и со-храняют форматирование, шрифты,графику. За более подробной информа-цией обращайтесь на сайт Adobe (http://www.adobe.com).

2323232323импорт внешнегосодержимого

Представьте себя разработчиком большо-го Web-сайта, на каждой странице которо-го располагается одно и тоже меню. Когданужно внести изменения в меню, вам при-ходиться изменять каждую страницу. Приэтом трудоемкость – не единственная про-блема, с которой приходится столкнуться,велика и вероятность совершить ошибку.Гораздо легче описать меню в одном фай-ле и затем прикрепить его к каждой стра-нице. Таким образом, можно редактиро-вать всего один файл, а не целый сайт,а результат внесения изменений будет ви-ден во всем Web-проекте.Для этого необходимо импортироватьвнешние данные в HTML-файлы. Допус-тимо использовать любой из трех мето-дов, каждый из которых имеет свои дос-тоинства и недостатки.

Импорт внешнего содержимого382

Тэги <ilayer> и <iframe>Самый простой способ (по крайней мере,в Netscape 4) разместить в HTML-доку-менте данные, хранящиеся во внешних ис-точниках, – воспользоваться тэгом <ilayer>.Когда вы указываете для него источник, онимпортирует HTML-файл и применяет еготак, как если бы внешняя информацияявлялась частью самого файла (рис. 23.1).К сожалению, этот тэг доступен толькопри работе с Netscape 4, а значит, стоитзадуматься о других способах импорти-рования внешних данных, например длябраузеров Internet Explorer или Netscape 6.Тэг <iframe> также может размещать внеш-ние данные в HTML-документе. Однаков данном случае подобная информациярассматривается как отдельная часть, а несоставляющая документа, поэтому онапо-другому взаимодействует с объектамиHTML (рис. 23.2). Кроме того, необходимопредусмотреть ограничения для тех посе-тителей, которые не используют браузер,поддерживающий слои Netscape.

Импорт информации из внешнихисточников при помощи тэгов<iframe> и <ilayer>

1. <ilayer></ilayer>В тэге <body> HTML-документа (лис-тинг 23.1) определите тэг <ilayer> (см.раздел «Импорт внешнего содержимогос помощью слоев Netscape» в главе 16).

2. <nolayer>…</nolayer>Введите тэг <nolayer>. Он скрывает в се-бе код от Netscape 4 (см. раздел «Отоб-ражение содержимого слоев в брау-зерах, которые их не поддерживают»в главе 16).

Рис. 23.1. При помощи тэга <ilayer> Netscape 4импортирует внешнюю информацию

Рис. 23.2. Netscape 6 поддерживает тэг <iframe>.Однако Web-страница в обоих браузерахвыглядит одинаково

383

3. <ifarme>…</iframe>В тэге <nolayer> укажите тэг <iframe>и установите для него импорт внешне-го содержимого.

4. <a href="external.html"> External->Content</a>

В тэге <iframe> укажите ссылку на файлexternal.html, используемый для брау-зеров, которые не поддерживают тэги<iframe> и <ilayer>.

5. external.htmlСоздайте новый HTML-файл и сохра-ните его под именем external.html (лис-тинг 23.2). Он не содержит обычных от-крытых и закрытых тэгов <html> (онинаходятся в главном документе), затоиспользуется тэг <body>; кроме того, выможете добавить любые другие тэги.

Тэг <iframe> работает так же, как и неза-висимый фрейм, поэтому вам необходимоустановить все ссылки в файле external.htmlна тэг <top> или фрейм, в котором будетотображаться содержимое. В любом случаевсе эти ссылки следует указать в тэге<iframe>.

Однажды я использовал описанный вышеметод при создании Web-сайта. В нижнейчасти страницы, содержащей интереснуюстатью, я расположил список рекомен-дуемых для прочтения статей. Я создал14 внешних файлов, включающих эти ста-тьи, каждая из которых имела свое название.Файлы были импортированы в документпри помощи тэгов <ilayer> и <iframe>.Когда я размещал новую статью на своемсайте, я просто добавил ссылку на файл,содержащий ее в основном документе.И каков же результат? Все статьи сайта,которые ссылались на статью из новогофайла, автоматически обновились.

Листинг 23.1. Файл HTML использует тэги<iframe> и <ilayer> в зависимости от типабраузера (Netscape или Internet Explorer) дляимпорта внешнего содержимого

<html><body>

<ilayer id="htNAV"->src="external.html"></ilayer><nolayer>

<iframe id="htIE" src=->"external.html" frameborder="0"->marginheight="0" marginwidth="0"->width="100%" height="100%">

<a href="external.html">External->Content</a>

</iframe></nolayer>

</body></html>

Листинг 23.2. Внешнее содержимоеимпортируется в файл index.html

<div style="text-align:center"><h1>Alice In Wonderland</h1><h3>Chapter 2</h3><img src="alice36.gif" width="360"->height="480" border="0">

</div>

Тэги <ilayer> и <iframe>


Включения на сторонесервераСамый простой способ импортироватьвнешние файлы– использовать включениена стороне сервера (server-side include). Этоне HTML-тэг, а тэг, указывающий серверу,какой именно файл нужно добавить. Реали-зация данного метода зависит от того,воспринимается ли данный тэг вашим сер-вером, однако большинство серверов егоподдерживают.

Добавление включенияна страницу

1. <!–#include virtual="external.html"–>Добавьте этот тэг в любом месте тэга<body> вашего HTML-документа и ука-жите импортируемый файл external.html(листинг 23.3).

2. <!–#echo var="DATE_LOCAL"–><!–#echo var="DATE_GMT"–>Другой полезный серверный тэг – это#echo, при помощи которого сервер вы-дает информацию о дате, местном вре-мени или времени по Гринвичу (GMT).

3. external.htmlСоздайте новый HTML-файл и сохра-ните его под именем external.html. Он несодержит обычного тэга <html> (кото-рый содержится в основном документе),в этот файл включены тэги <body>, а так-же другие тэги, которые могут присут-ствовать в обычном HTML-документе(листинг 23.4). Результат показан нарис. 23.3.

Листинг 23.3. Тэг включения на стороне серверапозволяет использовать внешние данные, нотолько при условии, что страница загружаетсяс Web-сервера

<html><body>

<!–– #include virtual=->"external.html" ––><br><br><!–– #echo var="DATE_LOCAL" ––><br><br><!–– #echo var="DATE_GMT" ––><br><br>

</body></html>

Листинг 23.4. Внешнее содержимое,импортированное в HTML-документ. Код,описывающий содержимое, может быть любогоHTML-стандарта, но не должен включать тэги<html> или <body>

<div style="text-align:center"><h1>Alice In Wonderland</h1><h3>Chapter 1</h3><img src="alice28.gif" width="358"->height="481" border="0">

</div>

385

Недостаток этого метода состоит в том,что внешнее содержимое не появится наэкране до тех пор, пока не загрузитсяс сервера. При попытке просмотреть файлс жесткого диска вы ровным счетом ниче-го не увидите.

С помощью описанного метода вы можетедобавить часы, которые показывали быпосетителям точное время.

Внешний файл JavaScriptИспользуя тэг <script>, можно присоеди-нить внешний файл к HTML-документупри помощи JavaScript-кода. Так же допус-кается применять файл JavaScript для опи-сания HTML-кода вашей Web-страницы.Преимущество использования этого мето-да заключается в том, что посредствомJavaScript легко «привязать» к странице ка-кое-либо содержимое (см. раздел «Верх-ние и нижние колонтитулы» в главе 22).

Импорт внешнего файла JavaScriptв HTML-документ

1. <script src="external.js"></script>Импортировать внешний файл JavaScriptнесложно. Определите атрибут src тэга<script> и ничего не располагайте внут-ри самого тэга (листинг 23.5). Этот ме-тод позволяет поместить внешний кодJavaScript в HTML-файл. Если JavaScriptдобавляет на страницу HTML-тэги, тоони также будут помещены в ту частьосновного документа, к которой «привя-зывается» файл JavaScript.

Рис. 23.3. Внешнее содержимое былоимпортировано правильно

Листинг 23.5. Вы можете расположить тэг<script> в любом месте HTML-документа, ночтобы добавить внешнее содержимое, вамнеобходимо поместить его в тэге <body>. Этопозволяет создавать HTML-страницы при помощиJavaScript

<html><body>

<script src="external.js"></script></body></html>

Внешний файл JavaScript


2. external.jsСоздайте внешний файл JavaScript и со-храните его как external.js (листинг 23.6).Он может содержать любой код на Ja-vaScript, но чтобы импортировать егосодержимое в HTML-документ, необ-ходим код, описывающий HTML-тэги.Каждая строка HTML-кода добавляетсяв документ при помощи оператора docu-ment.write. Результат добавления внеш-него кода представлен на рис. 23.4.

Недостаток описанного метода заключает-ся в том, что приходится помещать каж-дую строку HTML-кода в JavaScript. Этодостаточно трудоемкая работа; кроме того,в результате увеличивается объем файлаи затрудняется отладка. Сказанное касаетсябольшинства программ WYSIWYG.

Если вы помещаете какое-либо содержа-ние в тэг <script>, оно не воспринимает-ся программой.

Помните, что содержимое, созданное припомощи JavaScript, должно заключатьсяв одинарные кавычки ('). Если при опи-сании на JavaScript возникает необходи-мость использовать в тексте одинарнуюкавычку, то перед ней ставиться обратныйслэш (\). То есть код document.write('How's it going?'); работать не будет.Правильное написание включает слэш:document.write('How\'s it going?');.

Листинг 23.6. Внешний файл JavaScript можетсодержать любой код (написанный на JavaScript),но если вы хотите включить HTML-содержимое,используйте оператор document.write длякаждой строки HTML-кода

document.writeln('<div style=->"text-align:center">');document.writeln('<h1>Alice In->Wonderland</h1>');document.writeln('<h3>Chapter 3</h3>');

Рис. 23.4. Импортированный файл JavaScriptсоздает заголовок, под которым помещаетизображение

387

Изучение работы другихсайтовНаилучший способ изучить DHTML и CSS(помимо чтения соответствующей литера-туры) – посмотреть, как работают другиесайты, и разобрать использованный при ихсоздании код. К сожалению, Web-дизайне-ры обычно скрывают код своих творений,размещая его во внешних файлах, которыенельзя увидеть, применяя обычные методы.Но не все потеряно: вы можете просмот-реть исходный код, если копнете чутьглубже.

Просмотр исходного кода страницы

1. Откройте Web-страницу, код которойтребуется проанализировать (рис. 23.5).

2. Просмотрите исходный код. В различ-ных браузерах доступ к нему осущест-вляется по-разному. Но в большинствеслучаев достаточно выбрать опциюView Source (Просмотр исходного кода)или просто Source (Исходный код) в ме-ню View (Просмотр) – рис. 23.6 и 23.7.

3. В исходном коде найдите ссылку навнешний источник, код которого нужнопросмотреть (рис. 23.8). Вам, возможно,придется проделать ряд операций, что-бы добраться до этого кода, но в тэге<head> документа вы обязательно обна-ружите тэги <script> (для JavaScript) или<link> (для CSS).

4. Соедините URL и внешнее содержимое.Тэг <script> имеет атрибут src для URL,в то время как тэг <link> используетhref. Если URL – абсолютный путь (на-чинается с http://), используйте путь,описанный на шаге 5. В противном слу-чае выберите текущий URL (в адреснойстроке браузера), но добавьте к немуотносительный путь. Удалите последний

Изучение работы других сайтов

Рис. 23.5. Страница, внешний код которойтребуется просмотреть. Абсолютный URL указанв адресной строке

Рис. 23.6. Меню View в браузере Internet Explorer 5для Windows

Рис. 23.7. Меню View в браузере Netscape 6 дляWindows


уровень URL текущей страницы, а так-же «../» в относительном URL. Удалитедополнительный уровень из URL теку-щей страницы. Затем добавьте оставшу-юся часть URL страницы к относитель-ному пути, не используя «../» (рис. 23.9).

5. Откройте URL внешнего содержимо-го, который вы определили на шаге 4(рис. 23.10). Разные браузеры применя-ют различные методы реализации техили иных возможностей, но обычнов меню File (Файл) следует выбрать оп-цию Open Location (Открыть адрес).Некоторые браузеры открывают кодв окне, другие требуют, чтобы файл,находящийся по данному URL, был пе-реписан на диск (рис. 23.11), а затем от-крыт в таких программах, как Notepadили SimpleText (рис. 23.12).

Рис. 23.8. Исходный код Web-страницы. Многиеиз ссылок на внешние файлы используютотносительные пути

Рис. 23.9. Код, позволяющий определитьабсолютный URL внешнего содержимого

Рис. 23.10. URL внешнего кода написанв адресной строке браузера

Рис. 23.11. Некоторые браузеры требуютобязательной записи файла на диск, не позволяяпросматривать код непосредственно в своем окне

Рис. 23.12. Внешний код найден

2424242424НавигацияWeb�сайта

Без навигации не может существовать ниодин сайт. С ее помощью ваш сайт находятпосетители. Существует множество навига-ционных элементов, помогающих переме-щаться от страницы к странице: главноеменю с различными подменю, вспомога-тельные меню, всевозможные карты (путе-водители), гипертекстовые ссылки и т.п.Хорошо спланированная система навига-ции позволяет посетителям быстро нахо-дить нужную информацию. Бессистемноеиспользование навигации может оттолк-нуть посетителей от вашего сайта: людипопросту заблудятся на нем, не сумев най-ти интересующие их данные, после чеговряд ли захотят вернуться на ваш сайт.Прочитав эту главу, вы узнаете о наибо-лее продуктивных способах создания ди-намической навигации, которые позволя-ют улучшить гибкость сайта, а также су-щественно расширить диапазон содержа-щейся на нем полезной информации.

Навигация Web-сайта390

Определение стилейссылокБольшинство браузеров позволяют устано-вить стиль ссылок в тэге <body> (например,цвет, зависящий от состояния ссылки). Ис-пользуя CSS, вы можете задавать не толькоцвет, но и другие свойства ссылок.Хотя ссылка определяется в тэге (<a>), пе-реопределить ее специфичные атрибутыневозможно. Чтобы задать соответствую-щие свойства ссылки, необходимо приме-нять псевдоклассы, связанные с каждым изэтих свойств (листинг 24.1).

Листинг 24.1. Здесь определяется четыре ссылки.Установка одной или нескольких из этих ссылокповлияет на все тэги <a>, расположенныена странице

<html><head>

<style type="text/css">a:link {

color: #cc0000;font-weight: bold;}

a:active {color: #990000;background-color: #ff0000;text-decoration: none;}

a:visited {color: #990000;text-decoration: none;font-weight: normal;}

a:hover {text-decoration: none;color: #ff0000;cursor: nw-resize;}</style>

</head><body>

<h3>CHAPTER XI<br>Who Stole the Tarts?</h3>

<p><a href="index.html">The King</a>->and <a href="#">Queen of Hearts</a>->were seated on their throne when they->arrived, with a great crowd->assembled...</p>

</body></html>

Не совсем класс

Браузеры, поддерживающие CSS, авто-матически распознают определенныеспециальные классы – псевдоклассы(pseudo-class). Псевдоклассы, по су-ти, являются тэгами, имеющими на-бор определенных уникальных атрибу-тов. Атрибуты допускается задавать не-зависимо от других свойств. В тэге <a>,например, можно указать несколькотипов состояний ссылки: active (актив-ная), visited (посещенная), hover (ука-занная) и link (состояние по умолча-нию). Вы можете определять псевдо-классы так же, как HTML-селекторы.

391

Отображение ссылки в зависимостиот ее состояния

1. a:link{…}Псевдокласс link позволяет определятьвид гипертекстовой ссылки, котораяеще не была выделена (рис. 24.1).

2. a:active{…}С помощью псевдокласса active устана-вливается вид активизированной ссылки(рис. 24.2).

3. a:visited{…}Данный псевдокласс (visited) задаетотображение уже посещенной ссылки(рис. 24.3).

4. a:hover{…}Псевдокласс hover описывает вид ссыл-ки, если посетитель указывает на неекурсором мыши (рис. 24.4).

Псевдоклассы hover и visited не поддер-живаются Netscape 4.

Порядок определения стилей ссылки мо-жет повлиять на ее отображение в неко-торых браузерах. Так, например, в InternetExplorer 5 для Windows, размещая hoverдо visited, вы не сможете добиться вы-полнения псевдокласса hover, если посе-титель воспользовался данной ссылкой.Классы выполняются в том же порядке,в каком размещены в коде, поэтому псев-докласс active определяется до hover.

Определение стилей ссылок

Рис. 24.1. Стиль гипертекстовой ссылки

Рис. 24.2. Гипертекстовая ссылка, которая толькочто была активизирована

Рис. 24.3. Гипертекстовая ссылка, которойпосетитель уже воспользовался

Рис. 24.4. Гипертекстовая ссылка, на которуюуказывает курсор мыши


Наследуются все состояния, определяю-щие стили ссылки. Например, шрифт,который используется при отображенииссылки, должен наследоваться состояни-ями active, visited и hover. Но междубраузерами существует ряд несоответ-ствий. Чтобы избежать связанных с этимнеприятностей, определяйте все атрибу-ты для каждого стиля ссылки.

Всемирная паутина – это среда гипертекста,поэтому очень важно, чтобы пользователимогли ориентироваться во всем разнооб-разии текстовой информации и ссылок.Нельзя рассчитывать на то, что все посети-тели активизируют опцию подчеркиванияссылок, поэтому необходимо установитьотображение ссылки для всех документов,входящих в вашу Web-страницу.

Выбор цветов ссылки

В большинстве браузеров для обозначения ссылок по умолчанию используются си-ний, красный или пурпурный цвета (например, синий – для непосещенной ссылки,а красный – для посещенной). Проблема, возникающая при таком разделении ссы-лок, заключается в том, что посетитель способен забыть, какой цвет в том или иномслучае используется. Выбирайте цвета таким образом, чтобы ссылка отличалась отостального текста на экране и чтобы посетитель мог легко определять ее состояние(visited, hover, active или link). Однако ссылки не должны бросаться в глаза и от-влекать посетителя от чтения.Я рекомендую устанавливать для ссылок контрастные цвета по отношению к цветуфона и текста. Для посещенных ссылок задавайте более яркий или, наоборот, болеетемный оттенок выбранного цвета (в зависимости от того, яркий или темный цветфона). Неактивизированные ссылки должны отличаться от посещенных более яр-ким цветом.При разработке страницы с белым фоном и текстом черного цвета я, возможно,применял бы красный цвет для непосещенных ссылок (#ff0000), а розовый – для по-сещенных. Яркий цвет выделяется на общем фоне, а светлый привлекает меньшевнимания, но все-таки делет ссылку отличимой.

Хотя CSS позволяет задавать не толькоцвет ссылки, я советую быть осторожнымпри изменении других атрибутов с помо-щью псевдокласса hover. Например, мо-дификация типа шрифта, его размераи других свойств часто приводит к тому,что на экране шрифт выглядит бóльшим,чем вы его задали, а текст выходит заграницы отведенного для него слоя. При-ходится обновлять всю страницу, что мо-жет вызвать недовольство посетителейсайта.

393

Определение различныхстилей для ссылокПри установке правил вы можете работатьсо стилями ссылок как с любыми другимиHTML-тэгами, например ассоциироватькласс с псевдоклассом ссылки или опре-делять псевдокласс неявно при помощидругих HTML-тэгов. Количество устанав-ливаемых стилей для одной страницы неограничено, поэтому допускается созда-вать столько стилей, сколько потребуется.Если необходимо, чтобы ссылки, находя-щиеся в навигационном меню, отличалисьпо цвету от ссылок, используемых в тек-сте, следует определить два независимыхстиля (рис. 24.5 и 24.6).

Установка сложных ссылок1. a.menu:link{…}

Вы можете установить стили ссылок какчасть класса, если расположите раздели-тель (.) и имя класса до двоеточия (:).В приведенном примере (листинг 24.2)стили ссылки задаются для классаmenu, который является классом тэга<a> ссылки (см. раздел «Определениеклассов для создания тэгов» в главе 2).Или для определения сложных ссылоквы можете воспользоваться следующимспособом:

2. p a:link{…}Вы также можете установить стиль ссыл-ки неявно. Ссылка будет отображаться

Определение различных стилей для ссылок

Рис. 24.5. Стиль для ссылок меню. На экране этиссылки должны быть красными

Рис. 24.6. Стиль для ссылки в тексте. На экранеэти ссылки должны быть зелеными

Листинг 24.2. В приведенном коде добавляетсядва стиля ссылок. Первый из них определяеткласс menu, а второй задает отображение ссылок,заключенных в тэге <p>

<html><head>

<style media="screen" type="text/css">a.menu:link {

color: #cc0000;font-weight: bold;text-decoration: none; }

a.menu:active {color: #666666;font-weight: bold;text-decoration: none; }

a.menu:visited {color: #cc0000;font-weight: bold;text-decoration: none; }

a.menu:hover {text-decoration: none;

Еще одно состояние ссылки

Хотя четыре состояния ссылки, используемые в CSS, чрезвычайно полезны, было бынеплохо добавить к этому стандартному набору пятое состояние – current. Данныйатрибут позволил бы управлять стилем отображения ссылки, если она указывает наотображаемую страницу (URL Web-страницы, например такой же, как и href). Приме-няя это состояние, Web-разработчики с помощью CSS могли бы определять, на какойстранице находится посетитель, не добавляя программный код на каждую страницу.


заданным образом, если ее родителемявляется определенный тэг. В рассматри-ваемом примере отображение тэга ссыл-ки (<a>) установлено, если она находит-ся внутри тэга <p> (см. раздел «Опреде-ление тэгов в контексте» в главе 2).

Определение нескольких цветов ссылкипозволяет посетителю отличать типы ссы-лок. В приведенном примере ссылки менюи ссылки, находящиеся в тексте, различныпо внешнему виду. Может быть, вы захо-тите, чтобы ссылки, ведущие на другиесайты, отличались от всех остальных.


color: #ff0000;cursor: move; }

p a:link {color: #00cc00;font-weight: bold; }

p a:active {color: #666666;text-decoration: none; }

p a:visited {color: #00cc00;text-decoration: none;font-weight: normal; }

p a:hover {text-decoration: none;color: #00ff00;cursor: nw-resize; }</style>

</head><body>

<h3><a class="menu" href=->"#"><Previous Chapter</a> |<a class="menu" href="#">Next->Chapter ></a>

</h3><h3>CHAPTER XI<br>

Who Stole the Tarts?</h3><p><a href="index.html">The King</a>->and <a href="#">Queen of Hearts</a>->were seated on their throne when they->arrived, with a great crowd->assembled about them...</p>

</body></html>

Оформление текста: подчеркивать или нет

Подчеркивание – самый распростра-ненный способ выделения ссылок. До-вольно часто разработчики используютодин цвет как для текста, так и для ссы-лок, предполагая, что посетители легкораспознают подчеркнутые ссылки сре-ди остального текста. Но как посети-тель сможет отличить ссылки, если от-ключит опцию подчеркивания?Кроме того, при подчеркивании ссылоквозникает еще одна проблема. Если навашей странице много ссылок, оформ-ленных таким образом, страница пре-вращается в какое-то подобие азбукиМорзе с бесконечным набором точеки тире. Текст становится трудно читать.CSS позволяет отключать опцию под-черкивания ссылок независимо от поль-зователя. Я рекомендую использоватьэту возможность, а также применятьцвета для выделения гипертекстовыхссылок. А подчеркивание можно задатьдля состояния hover. При наведении нассылку указателя мыши посетителюясно видны ее изменения.

Однако не следует слишком далеко захо-дить в экспериментах со ссылками. Есливы используете слишком много цветов,посетитель просто запутается и не сможетотличить ссылки от обычного текста.

395

Выпадающее менюВыпадающее меню (drop-down menu) – этонаиболее любимый Web-дизайнерамии часто используемый GUI-элемент (Gra-phical User Interface – графический пользо-вательский интерфейс). Заголовок менюотображается в верхней части окна, прищелчке по заголовку раскрывается списокпредоставляемых опций. Например, в ме-ню File (Файл) вы можете найти опцииSave (Сохранить), Close (Закрыть) и Print(Печать).Таким образом вы можете достигнуть неко-торых полезных эффектов (рис. 24.7 и 24.8).

Добавление выпадающего менюна страницу

1. <script src="findDOM.js"></script>В большинство функций JavaScript, припомощи которых изображения размеща-ются на экране, необходимо включитькод findDOM (см. раздел «Использованиеобщей для браузеров DOM» в главе 11).Для этого поместите код во внешнемтекстовом файле, который затем следу-ет импортировать на ту страницу, гдекод будет применяться (листинг 24.3).

2. var menuTop=45;Инициализируйте переменные, кото-рые осуществляют контроль и записьразличных величин:– menuTop записывает положение верх-

ней границы выпадающего меню(позже будет переопределена);

– menuLeft сохраняет положение левойграницы выпадающего меню (позжебудет переопределена);

– domSMenu записывает DOM для данно-го меню;

– oldDomSMenu сохраняет DOM для по-следнего открытого меню;

Выпадающее меню

Рис. 24.7. Заголовки меню

Рис. 24.8. После наведения мыши на заголовок

Листинг 24.3. Функция popMenu() отображаетменю. Функция delayHide() не дает емузакрыться прежде, чем будет выбрана однаиз предоставляемых опций

<html><head>

<script src="findDOM.js"></script><script>

var menuTop = 45;var menuLeft = 400;

var domSMenu = null;var oldDomSMenu = null;var t = 0;var lDelay = 3;var lCount = 0;var pause = 100;


– t определяет, будет меню закрыто (1)или нет (2);

– lDelay указывает время, в течение ко-торого меню должно оставаться от-крытым;

– lCount определяет, как долго менюоставалось открытым до закрытия.Когда lCount = lDelay, меню закрыва-ется.

Вам наверняка захочется изменить пе-ременную lDelay. Она определяет вре-мя, в течение которого меню остаетсяоткрытым, если посетитель не выбрални одну из появившихся опций. Чембольше значение lDelay, тем дольшеменю остается на экране.

3. function popMenu(menuNum){…}Введите, используя JavaScript, функциюpopMenu(). Сначала она закрывает дру-гие открытые меню, потом вычисляетположение левой и нижней границ заго-ловка, чтобы правильно расположитьвыпадающее меню, и затем отображаетего на экране.

4. function delayHide(){…}Введите функцию delayHide(), исполь-зуя JavaScript. Она скрывает видимоеменю после небольшой задержки, зада-ваемой переменной lDelay.

5. .menuStyle{…}Создайте класс стиля для меню, кото-рый определяет внешний вид меню и за-головка.

6. #menuHead1{…}Каждому заголовку меню присвойтеID, который должен быть задан в отно-сительных координатах.

7. #menu2{…}Присвойте ID каждому меню. Они опре-деляют отдельные меню и должны бытьзаданы абсолютными координатами.


function popMenu(menuNum){if (isDHTML) {

t = 2;if (oldDomSMenu) {

oldDomSMenu.visibility = 'hidden';oldDomSMenu.zIndex = "0";t = 2;lCount = 0;

}var idMenu = 'menuHead';var domMenu = findDOM(idMenu,0);var idMenuOpt = 'menuHead' + menuNum;var domMenuOpt =->findDOM(idMenuOpt,0);

var idSMenu = 'menu' + menuNum;var domSMenu = findDOM(idSMenu,1);

if (isID || isAll) {var menuLeft =->(domMenu.offsetLeft) +->(domMenuOpt.offsetLeft) + 5;var menuTop =->(domMenu.offsetTop) +->(domMenu.offsetHeight) + 5;}

if (isLayers) {var menuLeft = document.layers->[idMenu].layers[idMenuOpt].->pageX - 5;var menuTop = domMenu.pageY +->domMenu.clip.height - 5;

}if (oldDomSMenu != domSMenu) {

domSMenu.left = menuLeft;domSMenu.top = menuTop;domSMenu.visibility = 'visible';->domSMenu.zIndex = '100';oldDomSMenu = domSMenu;

}else { oldDomSMenu = null; }

}else { return null; }

}

function delayHide() {if ((oldDomSMenu) && (t == 0)) {

oldDomSMenu.visibility = 'hidden';

397

8. a.menuLink:link{…}

Создайте стиль ссылок для всех меню.Этот пункт необязателен, но я реко-мендую его выполнить, чтобы сделатьменю более привлекательным.

9. <divid="menuHead"->class="menuStyle">…</div>

Создайте CSS-слой для заголовковменю. Ссылки на все заголовки меню,создаваемые на шаге 10, будут разме-щаться в этом слое.

10. <a id="menuHead1" class="menuLink"->href="#" onMouseOver=->"popMenu(1)" onMouseOut="t=1;->delayHide()">Menu1</a> |Для каждого заголовка меню создайтессылку. По своей сути заголовки менюявляются ссылками, которые вызыва-ют функцию popMenu() при событииonMouseOver и функцию delayHide присобытии onMouseOut.

11. <div id="menu1" class="menuStyle">…-></div>

Добавьте CSS-слой для каждого меню.Меню можно назвать слоем, содержа-щим HTML-ссылки. Их вы создадитена следующем шаге.

12. <a class="menuLink" onMouseOut="t=1;->delayHide()" onMouseOver="t=2;"->onClick="t=0; delayHide();"->href="#">Option1.1</a><br>

Добавьте ссылки на каждый пункт со-здаваемого меню. Меню открываетсяпри наведении указателя мыши на за-головок меню. Если убрать указательсо ссылки, меню через некоторое вре-мя закроется. Как только указательопять будет наведен на ссылку, менюснова отобразится на экране.


oldDomSMenu.zIndex = '0';oldDomSMenu = null;

lCount = 0;return false;

}if (t == 2) { lCount = 0;->return false; }if (t == 1) {

lCount = lCount + 1;if (lDelay <= lCount) { t = 0; }if (lDelay >= lCount) { setTimeout->('delayHide(' + t + ')',pause); }

}}


body { color: white; font-family:->"Trebuchet MS", Arial, Helvetica, Geneva,->sans-serif; background-color: #333; }

#content { margin-top: 35px; }.menuStyle { color: #000000; font-size:->12px; font-family: "Trebuchet MS",->Verdana, Arial, Helvetica, sans-serif;->background-color: #ccc; padding: 5px;->width: 100%; border: solid 1px #000000; }#menuHead { background-color: #ccc;->position: absolute; z-index: 50; top:->0px; left: 0px; }#menuHead1, #menuHead2, #menuHead3 {->position: relative; }#menu1,#menu2,#menu3 { position:->absolute; z-index: 100; visibility:->hidden; width: 150px; }a.menulink:link { font-weight: bold;->text-decoration: none; }a.menulink:visited { font-weight: bold;->text-decoration: none; }a:menulink:active { color: #666;->font-family: "Trebuchet MS", Verdana,->Arial, Helvetica, sans-serif;->text-decoration: underline; }a.menulink:hover { color: #900;->font-family: "Trebuchet MS", Verdana,->Arial, Helvetica, sans-serif;->font-weight: bold; text-decoration:->none; cursor: ne-resize; }



Вы можете открывать меню другим спосо-бом, если расположите заголовки не погоризонтали, а вертикально; выпадающиеменю при этом находятся не слева и сни-зу, а справа и сверху.

Этот код является одним из моих люби-мых. Я использую его при создании менюсвоего Web-сайта (рис. 24.9).

Большинство операционных систем откры-вает меню только при щелчке по его заго-ловку. Вы можете изменить событие, вызы-вающее данную функцию, на onClick.



<div id="menuHead" class="menuStyle"><b>

<a id="menuHead1" class="menuLink" href="#" onMouseOut="t = 1; delayHide()"->onMouseOver="popMenu(1)">Menu 1</a> |<a id="menuHead2" class="menuLink" href="#" onMouseOut="t = 1; delayHide()"->onMouseOver="popMenu(2)">Menu 2</a> |<a id="menuHead3" class="menuLink" href="#" onMouseOut="t = 1; delayHide()"->onMouseOver="popMenu(3)">Menu 3</a> |</b>

</div><div id="menu1" class="menuStyle">

<b><a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"->onClick="t = 0; delayHide();" href="#">Option 1.1</a><br><a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"->onClick="t = 0; delayHide();" href="#">Option 1.2</a><br><a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"->onClick="t = 0; delayHide();" href="#">Option 1.3</a><br></b>


<b><a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"->onClick="t = 0; delayHide();" href="#">Option 2.1</a><br><a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"->onClick="t = 0; delayHide();" href="#">Option 2.2</a><br><a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"->onClick="t = 0; delayHide();" href="#">Option 2.3</a><br>

Рис. 24.9. Такое меню используется на сайтеwebbedENVIRONMENTS

399


<a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"->onClick="t = 0; delayHide();" href="#">Option 2.4</a><br></b>


<b><a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"->onClick="t = 0; delayHide();" href="#">Option 3.1</a><br><a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"->onClick="t = 0; delayHide();" href="#">Option 3.2</a><br><a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"->onClick="t = 0; delayHide();" href="#">Option 3.3</a><br><a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"->onClick="t = 0; delayHide();" href="#">Option 3.4</a><br><a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"->onClick="t = 0; delayHide();" href="#">Option 3.5</a><br><a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"->onClick="t = 0; delayHide();" href="#">Option 3.6</a><br></b></div>

<div id="content"><p>Et quid erat, quod me delectabat, nisi amare et amari?</p>


Защита от проблем при навигации

Я заметил, что Web-сайты обычно содержат множество неорганизованных ссылок –огромные списки, зачастую выходящие за пределы окна. Подобные перечни неочень-то радуют глаз, занимают драгоценное место на экране и не представляютникакой навигационной ценности.Посетители, которые быстро переходят от сайта к сайту, изучая только важнуюинформацию, никогда не будут тратить время на чтение всей Web-страницы. Ониее быстро просматривают в поисках самого важного. Человек не способен перера-батывать слишком большой поток данных. Если Web-страница загромождена раз-личными сведениями, посетителю приходиться пробираться через сотни ссылок,прежде чем он найдет нужную. Однако разработчики Web-приложений могут по-мочь посетителю ориентироваться в море информации, представленной на страни-це. Выпадающие меню – один из лучших способов сделать навигацию более удоб-ной и устранить проблемы, которые могут возникнуть на пути посетителя.



Выдвижное менюВы устали от сайтов с древней навигацией,элементы которой расположены в левойили правой части страницы? Меню вашегоWeb-сайта занимают все больше и большеценного места? Страницы загроможденыссылками, которые посетители применяюттолько для перемещения в какую-нибудьособую часть страницы и не используютпри изучении содержимого?Если вы ответили «Да!» хотя бы на один изэтих вопросов, я могу предложить оченьпростое решение: позвольте посетителямвызывать или скрывать меню по мере необ-ходимости, то есть создайте выдвижноеменю (sliding menu)– рис. 24.10–24.12.

Создание выдвижного меню

1. <script src="findDOM.js"></script>В любую функцию JavaScript, котораянепосредственно размещает объект настранице, необходимо включить кодfindDOM. Для этого поместите его вовнешнем текстовом файле, а затем при-соедините файл к странице, на которойкод будет использоваться (листинг 24.4).

2. var open=0;Инициализируйте следующие перемен-ные:– open записывает, открыто или закры-

то меню;– slideDelay содержит информацию

о времени, которое понадобится дляоткрытия меню. Чем больше значе-ние, хранящееся в этой переменной,тем медленнее открывается («выдви-гается») меню, однако при этом дви-жение не будет плавным;

– domStyle сохраняет DOM для меню.3. function setMenu(objectID){…}

Добавьте функцию setMenu() в код Java-Script. Она устанавливает начальную (cX)

Рис. 24.10. На экране отображается толькозакладка меню

Рис. 24.11. После щелчка по закладке менювыдвигается

Рис. 24.12. Теперь меню отображено полностью

401

и конечную (fX) точки выдвигающего-ся меню в зависимости от его текущегосостояния (открыто или закрыто). Пер-вая переменная (cX) определяет теку-щее положение левой границы менюи изменяется в диапазоне от –80 до 0.Нижняя граница этого диапазона зави-сит от разности между шириной менюи закладки.Например, когда cX=–80, первые 80 пиксе-лов меню скрыты, отображается толькозакладка меню шириной около 20 пик-селов. Значит, меню закрыто. КогдаcX=0, левый край меню совпадает с ле-вым краем окна – меню открыто. Этафункция также присваивает перемен-ной open значение 0 (закрыто), еслименю было открыто, и значение 1 (от-крыто), если оно было закрыто. Крометого, данная функция вызывает функ-цию slideMenu().

4. function slideMenu(cX,fX){…}Используя JavaScript, опишите функциюslideMenu(). Она сначала проверяет, со-впадает ли текущее положение cX с ко-нечным fX. Если ответ положительный,то выполнение прекращается. Если этизначения не совпадают, функция при-бавляет или вычитает два пиксела иззначения, хранящегося в cX, в зависимо-сти от того, открывается или закрывает-ся меню. Она также присваивает пере-менной, контролирующей левый крайменю, новое значение положения. Затемфункция продолжает выполнение, ноуже с новым значением cX. Она выпол-няется циклически до тех пор, пока зна-чение cX не станет равным fX (меню какбы выдвигается из края окна).

5. .menu{…}#mainMenu{…}

В тэге <head> документа установите таб-лицу стилей, содержащую один главныйкласс, который имеет все свойства меню

Выдвижное меню

Листинг 24.4. Функция setMenu()инициализирует данные, а затем вызываетфункцию slideMenu(), выдвигающую меню

<html><head>

<script src="findDOM.js"></script><script language="JavaScript">

var open = 0;var slideDelay = 0;var domStyle = null;

function setMenu (objectID) {if (isDHTML){

domStyle = findDOM(objectID,1);if (open) { fX = -80; cX = 0;->open = 0; }else { fX = 0; cX = -80; open = 1; }slideMenu(cX,fX);

}}

function slideMenu (cX,fX) {if (cX != fX) {

if (cX > fX) { cX -= 2; }else { cX += 2; }domStyle.left = cX;setTimeout('slideMenu(' + cX + ','->+ fX + ')', slideDelay);}

return;}


body { margin-left: 30px; }#mainMenu { left: -80px; top: 0px; }.menu{ position:absolute; }a:link { color: red; font: bold 12px->"Trebuchet MS", Arial, Helvetica,->Geneva, sans-serif;}


<span id="mainMenu" class="menu"><table border="0" cellpadding="5"->cellspacing="0" frame width="100"->bgcolor="#999999">

<tr>


(.menu), и каждому создаваемому менюприсвойте ID. В приведенном примереопределяется простое меню (mainMenu).Заметьте, что левая граница в .menu, ко-торая затем изменится при запуске функ-ции slideMenu(), инициализирована зна-чением –80. Такая установка не скрываетменю, закладка остается видимой.

6. <span id="mainMenu"->class="menu">…</span>

В тэге <body> страницы создайте меню.В рассматриваемом примере меню со-здано при помощи таблицы, контроли-рующей слой. Один из элементов <td>содержит ссылку, которая при щелчкезапускает функцию setMenu(), заставляяменю выдвигаться.

Вы можете создать столько меню, сколь-ко потребуется, при этом каждое менюдолжно располагаться в собственном тэге<span>, а также иметь собственный ID.Удостоверьтесь, что меню не перекрыва-ют друг друга. В тэге <span> допускаетсяпомещать любое содержание: графику,гипертекстовые ссылки, формы и т.д.

Как меню отображается в браузерах, не под-держивающих DHTML? Это зависит от того,каким образом вы его создаете. В приве-денном примере меню будет появлятьсяу левой границы страницы. Если бы выразмещали меню в таблице с каким-либосодержанием в правой части окна, оновыглядело бы как обыкновенное боковоеменю (нединамическое).


<td bgcolor="#cccccc" width="80" align="right"><a href="#">Option 1</a></td>-><td rowspan="6" width="10"><div align="left"><a href="javascript:setMenu("mainMenu")"><img src="menuTab.gif" width="15"->height="100" border="0">

</a></div></td></tr><tr><td width="80" align="right"><a href="#">Option 2</a></td></tr><tr><td bgcolor="#cccccc" width="80" align="right"><a href="#">Option 3</a></td></tr><tr><td width="80" align="right"><a href="#">Option 4</a></td></tr><tr><td bgcolor="#cccccc" width="80" align="right"><a href="#">Option 5</a></td></tr><tr><td width="80" align="right"><a href="#">Option 6</a></td></tr></table>

</span><p>Et quid erat, quod me delectabat, nisi amare et amari?</p>

</body></html>

403

Панель управления сайтомВы можете упростить поиск необходимойинформации и сделать свой сайт болеепривлекательным, создав панель управления(remote control). В Internet панель управ-ления представляет собой небольшое окнобраузера, в котором расположены ссылки.С их помощью посетитель может изме-нять содержимое в главном окне браузера(рис. 24.13).Для создания панели управления откройтев браузере новое окно (см. раздел «Новоеокно браузера» в главе 14) и расположитев нем HTML-файл, содержащий ссылки,в атрибутах которых указывается, что но-вые страницы надо открывать в главномокне браузера.

Создание панели управлениясайтом

1. var remote=null;На Web-странице, которая будет со-держать панель управления, инициали-зируйте переменную remote значениемnull. Это означает, что при загрузкестраницы панель управления закрыта(листинг 24.5).

2. window.name="content"Чтобы содержимое отображалось в глав-ном окне, ему нужно присвоить имя, на-пример content.

3. function openRemote(contentURL,->windowName,x,y){…}

Создайте, используя JavaScript, функциюopenRemote(). Она открывает новое окнобраузера, ширина которого равна x, а вы-сота – y. Этому окну присвойте имяwindowName. Исходный код – contentURL.Чтобы окно панели управления всегдапоявлялось поверх остальных окон, вве-дите в сценарий функцию focus.

Панель управления сайтом

Рис. 24.13. Ссылки в окне управления браузером

Листинг 24.5. Функция openRemote() открываетдополнительное окно

<html><head>

<script>var remote = null;window.name = "content";function openRemote(contentURL,->windowName,x,y) {

widthHeight = "height=" + y + ",->width=" + x;remote = window.open(contentURL,->windowName,widthHeight);remote.focus();


h1 { color: silver; font-size: 36px;->font-family: Palatino, "Times New->Roman", Georgia, Times, serif; }

</style></head><body onLoad="openRemote('remote.html',->'remote',150,300)">

<b><a href="javascript:openRemote->('remote.html','remote',150,300)">Open Remote Control </a><h1>Home</h1>

</body></html>


4. openRemote('remote.html','remote',->150,300)

Функция, которая открывает окно па-нели управления (шаг 3), вызываетсяпри помощи ссылки или обработчикасобытий. Для ее вызова необходимоввести исходный файл, имя окна и егоразмеры.

5. remote.htmlИсходный файл для панели управленияможет содержать любой требуемый код.Я рекомендую применять фреймовуюструктуру с инструментами управле-ния, расположенными в верхнем фрей-ме, и узким фреймом в нижней частистраницы, содержащим ссылку, котораязакрывает окно с панелью управления(листинг 24.6). В приведенном примереиспользуется событие onLoad, чтобывызвать новое окно с панелью управле-ния. Функция сообщает главному окнуо закрытии фрейма, присваивая пере-менной remote значение null.

6. controls.htmlВсе ссылки, находящиеся в окне панелиуправления, должны указывать на содер-жимое главного окна (в данном примереcontent), допустим target="content"(листинг 24.7).

7. close.htmlФайл close.html содержит простуюфункцию closeWindow(), которая за-крывает окно, если посетитель щелк-нул по ссылке (листинг 24.8).

Листинг 24.6. Данная фреймовая структураразмещает элементы управления в верхней частиокна пульта управления, а также содержитссылку, закрывающую это окно

<html><frameset rows="*,20" border="0"->framespacing="0" frameborder="no"->onLoad="window.moveTo(100,100);"->onUnload="opener.remote = null;">

<frame src="controls.html"->name="controls" noresize><frame src="close.html" name="close"->noresize scrolling="no"->marginHeight="0" marginWidth="0">

</frameset></html>

Листинг 24.7. Файл controls.html содержитправила обработки событий. Используя ссылки,посетитель может изменять содержимое главнойстраницы

<html><body>

<h2>Menu </h2><p><a href="index.html"->target="content">Home</a></p><p><a href="page1.html"->target="content">Page 1</a></p><p><a href="page2.html"->target="content">Page 2</a></p><p><a href="page3.html"->target="content">Page 3</a></p>

</body></html>

405

Панель управления может содержать все,что вы закладываете в обычный документ.Но помните, что все элементы окна управ-ления должны соответствовать габаритам,заданным в функции openRemote(). Есливы хотите, чтобы ссылки из окна панелиуправления появлялись в главном окне,направьте их на фрейм содержимого.

В отличие от стандартного окна окно па-нели управления не отображает меню, на-вигацию браузера – стрелки Back (Назад)и Forward (Далее), текущий URL и т.п., тоесть все находящееся вокруг стандартногоокна. В верхнем правом углу окна управле-ния находится стандартная кнопка Close(Закрыть), позволяющая посетителю за-крыть это окно в любой момент.

Чтобы открыть окно панели управления, не-обходимо вызвать функцию openRemote().Вы можете сделать это несколькими спосо-бами, например запуская ее автоматическипри загрузке главного окна браузера (собы-тие onLoad). Еще один хороший способ –разместить в главном окне ссылку, позволя-ющую заново открывать это окно, если онобыло закрыто, или помещать его поверхвсех открытых окон.

Заметьте, что функция openRemote() ис-пользует функцию focus, которая размеща-ет окно панели управления поверх остальныхоткрытых окон. Если бы в коде не былофункции focus, то открытое окно панелиуправления находилось бы за другими окна-ми. Вызов функции openRemote() загрузилбы его заново, но не переместил на первыйплан. Таким образом, посетитель просто неувидел бы окно на экране.

Листинг 24.8. Функция closeWindow() позволяетпосетителям скрывать панель управления

<html><head>

<script>function closeWindow()->{ top.self.close(); }


body { background-color: #366; }a:Link { color: #6ff; font-size: 12px->"Courier New", Courier, Monaco,->monospace; text-decoration: none; }


<div style="align: center"><a href="javascript:->closeWindow();"><Close></a></div>

</body></html>

Панель управления сайтом


Рекомендации, полезные присоздании панели управлениясайтом

Универсальная панель управления – эточрезвычайно полезный инструмент. Нижеперечислены возможности, которые следу-ет учитывать при создании пульта управ-ления:

обзор Web. Вы вправе разместить в окнепанели управления любимую страницусвоего Web-сайта. Таким образом, по-сетители смогут путешествовать поInternet, но в то же время будут иметьбыстрый доступ к вашему сайту. Выоцените все преимущества данногометода, посетив сайт CommunicationArts www.commarts.com/interactive/ia home.html (рис. 24.14);информационное окно. Многие сайтыиспользуют окно панели управлениядля размещения различной информа-ции о новых специальных предложени-ях и т.п. К сожалению, некоторые сайты,например Netscape (www.netscape.com),применяют этот метод для размещениярекламы, которая обычно только раз-дражает посетителей (рис. 24.15);панель управления. Вы можете повыситьфункциональность Web-сайта, создавпанель управления. Так, на сайте акаде-мического журнала «Kairos» (рис. 24.16)используется подобная панель, состоя-щая из двух фреймов. Левый фреймсодержит ссылки, правый отображаетинформацию о журнале, ссылки поис-ковой машины и пр.

Рис. 24.14. На сайте Communication Arts окнопанели управления используется дляотображения путеводителя по лучшим сайтам

Рис. 24.15. На сайте Netscape окно панелиуправления используется для показа рекламы

Рис. 24.16. «Kairos» использует окно панелиуправления не только для навигации, но такжедля ссылок на источники и ресурсы, находящиесякак на самом сайте, так и вне его

407

Раскрывающееся менюЛюбой, кто когда-либо использовал GUI(для Mac, Windows или UNIX), видел, какпоявляются и исчезают меню в окне. Щел-чок по директории открывает список на-ходящихся в ней файлов. В это время дру-гие файлы и папки автоматически сдвига-ются вниз, чтобы можно было просмот-реть содержание выбранного каталога.В Windows нужно щелкнуть по значкам«плюс» и «минус», в Mac – по треугольни-кам. Подобного эффекта можно добитьсяи в Internet при помощи свойства display(рис. 24.17 и 24.18).

Создание раскрывающегося меню

1. <script src="findDOM.js"></script>В любую JavaScript-функцию котораяразмещает объект на экране, необходи-мо включить код findDOM. Для этогопоместите его во внешнем текстовомфайле и импортируйте файл на страни-цу, на которой код будет использовать-ся (листинг 24.9).

2. function toggleClamShellMenu->(objectID){…}

С помощью JavaScript определите функ-цию toggleClamShellMenu(). При запускев браузере, поддерживающем ID илиDOM, через переменную objectID онаприсваивает объекту ID для созданияDOM (см. главу 11). Затем функцияприсваивает свойству display объектазначение none, если его первоначальноезначение было block, и block, если пер-воначальное значение было none. На эк-ране создается впечатление, что менюкак бы отодвигает все, что находитсяпод ним. Если же браузер не поддержи-вает ID или DOM, функция отображаетменю со всеми предоставляемыми оп-циями при щелчке по нему.

Рис. 24.17. Список опций меню располагаетсяслева, а содержание – справа

Рис. 24.18. Подменю Menu1 и Menu3 содержатссылки на информацию, отображающуюся справа

Раскрывающееся меню


3. #menu{…}Создайте правило ID для каждого рас-крывающегося меню, присваивая свой-ству display значение none (см. раздел«Отображение элемента на экране» в гла-ве 7). Таким образом, меню не появля-ются на экране при первой загрузке стра-ницы.

4. toggleClamShellMenu('menu1')Установите для каждого меню ссылки,которые будут вызывать функцию, со-зданную на шаге 2. Ей должно передает-ся ID меню, которое необходимо отоб-разить.

5. <span id="menu">…</span>Используйте тэг <span> для созданияменю и присвоения ему ID.

6. menu1.htmlЕсли вы хотите, чтобы данная функциябыла совместима с Netscape 4, создайтедублирующий вариант каждой опциименю. Его будут использовать браузеры,не поддерживающие свойство display.

Листинг 24.9. Функция toggleClamShellMenu() отображает или скрывает подменю

<html><head>


function toggleClamShellMenu(objectID) {if (isAll || isID) {

domStyle = findDOM(objectID,1);if (domStyle.display =='block') domStyle.display='none';else domStyle.display='block';

}else {

destination = objectID + '.html';self.location = destination;

}return;


.menuHead { color: blue; font-weight: bold; font-size: 14px; font-family:->"Trebuchet MS", Arial, Helvetica, Geneva, sans-serif; text-decoration: none }.menuOption { color: blue; font-size: 12px; font-family: "Trebuchet MS", Arial,->Helvetica, Geneva, sans-serif; margin-left: 10px; }#menu1,#menu2,#menu3 { display: none; }body { font-family: "Trebuchet MS", Arial, Helvetica, Geneva, sans-serif;->background-color: silver; }

</style></head>

409

В подобных меню можно размещать лю-бые элементы, в том числе графику, спис-ки и т.п. А как это оформить наилучшимобразом – решать вам.

В версии Internet Explorer для Mac при ис-пользовании CSS в функциях возникаютнекоторые проблемы. Поэтому описанныйметод в этом браузере может не работать.Раскрывающиеся меню не поддерживают-ся и Netscape 4. Более того, посколькусвойство display первоначально содер-жит значение none, меню не появляется.Поэтому следует предусмотреть дубликат.Если нет необходимости поддерживатьNetscape 4, вы можете не создавать соот-ветствующую часть функции.


<body><hr width="90" align="left"><a class="menuHead" href="javascript:toggleClamShellMenu("menu1");"><b>>->Menu 1 </b></a><span id="menu1">

<a class="menuOption" href="option1.html" target="content">Option 1</a><br><a class="menuOption" href="option2.html" target="content">Option 2</a><br><a class="menuOption" href="option3.html" target="content">Option 3</a><br><a class="menuOption" href="option4.html" target="content">Option 4</a><br>

</span><br><hr width="90" align="left"><a class="menuHead" href="javascript:toggleClamShellMenu("menu2");"><b>>->Menu 2</b></a><span id="menu2">


</span><br><hr width="90" align="left"><a class="menuHead" href="javascript:toggleClamShellMenu("menu3");"><b>>->Menu 3</b></a><span id="menu3">


</span></body></html>

Раскрывающееся меню


Уточняющее менюВ разделе «Навигация: рекомендации и за-преты» главы 20 упоминалось о том, как по-лезно создавать уточняющие меню (bread-crumb menu). Посетитель сайта, выбираякакую-либо ссылку, видит, куда он направ-ляется и откуда пришел.Такой подход позволяет посетителям ука-зывать опции из нескольких меню, чтобыдостичь желаемого результата. Если посе-титель изменит свои первоначальные на-мерения, проходя через каскады меню, онвсегда может обратиться к другой опциииз предыдущего меню (рис. 24.19–24.23).

Рис. 24.19. Сначала появляется основное меню

Рис. 24.20. Меню первого уровня отображаетдополнительные опции, знак > говорит о наличииследующих уровней

Рис. 24.21. Меню второго уровня

Рис. 24.22. Меню третьего уровня

Рис. 24.23. В любой момент посетитель можетвыбрать любую опцию из предыдущего меню

411

Создание уточняющего меню

1. <script src="findDOM.js"></script>В любую функцию JavaScript, котораяразмещает объект на странице, добавьтекод findDOM. Для этого поместите данныйкод во внешнем файле и импортируйтеего на страницу, которая будет исполь-зовать данный код (листинг 24.10).

2. var domLevel1=null;Для каждого из уровней меню инициа-лизируйте переменные domLevel#.

Уточняющее меню

3. function showMenu(level1,level2,->level3){…}

Определите функцию showMenu(), исполь-зуя JavaScript. Она сначала скрывает ме-ню, имеющие более низкий уровень, чемвыбранное, а затем отображает заданноеменю в зависимости от его уровня.

4. .menu{…}Введите класс menu, который будет свя-зан со всеми меню. Кроме того, он опре-деляет все меню в абсолютных коорди-натах: 75 пикселов от верха страницыи 115 пикселов в ширину.

Листинг 24.10. При выборе какой-либо опции функция showMenu() открывает следующий уровень меню

<html><head>


var domLevel1 = null;var domLevel2 = null;var domLevel3 = null;function showMenu(level1,level2,level3) {

if (domLevel1 != null){if (level2 == null) { domLevel1.visibility = 'hidden'; }if (domLevel2 != null){

if (level3 == null) { domLevel2.visibility = 'hidden'; }if (domLevel3 != null) { domLevel3.visibility = 'hidden'; }

}}if (level2 == null) { objectID = 'menu' + level1; domLevel2 = null; }else {

if (level3 == null) { objectID = 'menu' + level1 + '–' + level2;->domLevel3 = null; }else { objectID = 'menu' + level1 + '–' + level2 + '–' + level3 }

}var domStyle = findDOM(objectID,1);domStyle.visibility = 'visible';if (level2 == null) { domLevel1 = domStyle; }else {

if (level3 == null) { domLevel2 = domStyle; }else { domLevel3 = domStyle; }

}}

</script>


5. #menuMain{…}Для главного меню укажите ID. Задай-те положение его левого края равным5 пикселам, убедитесь, что оно видимопри инициализации.

6. #menu1, #menu2, #menu3{…}Для каждого меню, расположенного настранице, установите ID. Все меню одно-го уровня должны иметь одинаковое зна-чение положения левого края – 125 пик-селов от положения меню предыдущегоуровня.

7. <div id="enuMain" class="menu">…</div>Определите главное меню как CSS-слой(см. раздел «Создание объекта» в главе 11).Все ссылки, которые будут созданы нашаге 8, будут находиться в этом слое.

8. <a href="javascript:showMenu->(1,null,null);">Option1></a>

Для каждой опции меню установитессылку. Если ссылка указывает на но-вую страницу, задействуйте ее URL дляатрибута href. Если ссылка открываетменю другого уровня, воспользуйтесьфункцией showMenu(), передавая ей но-мер меню, которое следует отобразитьна первом уровне.


<style type="text/css">a:link { color: white; font-weight: bold; width:100%; font-size: 12px; font-family:->Arial, Helvetica, Geneva, sans-serif; text-decoration: none; }a:visited { color: white; font-weight: bold; font-size: 12px; font-family: Arial,->Helvetica, Geneva, sans-serif; text-decoration: none; }a:hover { background-color: #666666; color: white; font-weight: bold; font-size:->12px; font-family: Arial, Helvetica, Geneva, sans-serif; text-decoration: none; }h3 { color: #777; font-size: 14px; font-family: "Times New Roman", Georgia, Times; }h1 { color: #bbb; font-size: 34px; font-family: "Times New Roman", Georgia, Times; }.menu { background-color: #000; layer-background-color: #000; padding: 10px; position:->absolute; width: 115px; top: 75px; }

#menuMain { left: 5px; visibility: visible; }#menu1,#menu2,#menu3 { left: 125px; visibility: hidden; }#menu1–1,#menu1–2,#menu1–3,#menu2–1,#menu2–2,#menu3–1 { left: 245px; visibility:->hidden; }#menu1–1–1,#menu1–2–2,#menu1–3–3,#menu2–2–2 { left: 365px; visibility: hidden; }body { background-color: #777; }


<h1> Choose Your Path...</h1><div id="menuMain" class="menu">

<h3>Main Menu</h3><a href="javascript:showMenu(1,null,null);">Option 1 ></a><br><br><a href="javascript:showMenu(2,null,null);">Option 2 ></a><br><br><a href="javascript:showMenu(3,null,null);">Option 3 ></a>

</div>

413

9. <div id="menu" class="menu">…</div>

Определите меню первого уровня какCSS-слои, применяя для каждого менюотдельный слой. Все ссылки, созданныена шаге 10, будут находиться в этихслоях.

10. <a href="javascript:showMenu->(1,1,null);">Option1.1></a>

Как было сделано на шаге 8, для каждойопции меню установите ссылки. Однакотеперь необходимо передавать функцииshowMenu() значение уровня (1 или 2).


<div id="menu1" class="menu"><h3>Menu 1</h3><a href="javascript:showMenu(1,1,null);">Option 1.1 ></a><br><br><a href="javascript:showMenu(1,2,null);">Option 1.2 ></a><br><br><a href="javascript:showMenu(1,3,null);">Option 1.3 ></a>

</div><div id="menu2" class="menu">

<h3>Menu 2</h3><a href="javascript:showMenu(2,1,null);">Option 2.1 ></a><br><br><a href="javascript:showMenu(2,2,null);">Option 2.2 ></a><br><br>

<a href="#">Option 2.3</a></div><div id="menu3" class="menu">

<h3>Menu 3</h3><a href="javascript:showMenu(3,1,null);">Option 3.1 ></a><br><br><a href="#">Option 3.2</a><br><br>

<a href="#">Option 3.3</a></div><div id="menu1–1" class="menu">

<h3>Menu 1.1</h3><a href="javascript:showMenu(1,1,1);">Option 1.1.1 ></a><br><br><a href="#">Option 1.1.2</a><br><br>

<a href="#">Option 1.1.3</a></div><div id="menu1–2" class="menu">

<h3>Menu 1.2</h3><a href="#">Option 1.2.1</a><br><br><a href="javascript:showMenu(1,2,2);">Option 1.2.2 ></a><br><br><a href="#">Option 1.2.3</a>

</div>

11. <div id="menu1-1" class="menu">Определите меню второго уровня какCSS-слои, используя для каждого менюотдельный слой. Все ссылки, созданныена шаге 12, будут находиться в этихслоях.

12. <a href="javascript:showMenu->(1,1,1);">Option1.1.1></a>

Для каждой опции меню создайтессылки. Теперь необходимо передаватьфункции showMenu() значение уровня 1,2 или 3.

Уточняющее меню



<div id="menu1–3" class="menu"><h3>Menu 1.3</h3><a href="#">Option 1.3.1-></a><br><br><a href="#">Option 1.3.2-></a><br><br><a href="javascript:showMenu(1,3,3);->">Option 1.3.3 ></a>

</div><div id="menu2–1" class="menu">

<h3>Menu 2.1</h3><a href="#">Option 2.1.1-></a><br><br><a href="#">Option 2.1.2-></a><br><br><a href="#">Option 2.1.3</a>

</div><div id="menu2–2" class="menu">

<h3>Menu 2.2</h3><a href="#">Option 2.2.1-></a><br><br><a href="javascript:showMenu(2,2,2);->">Option 2.2.2 ></a><br><br><a href="#">Option 2.2.3</a>

</div>

13. <div id="menu1-1-1" class="menu">Определите меню третьего уровня какCSS-слои, используя для каждого менюотдельный слой. Все ссылки, созданныена шаге 14, будут находиться в этихслоях.

14. <a href="#">Option1.1.1.1</a>Установите ссылки для каждой опциименю. Поскольку уточняющее меню несодержит пятого уровня, ссылки долж-ны указывать на определенные URL.

В приведенном примере уточняющее менюсодержит четыре уровня, однако вы мо-жете установить любое произвольное ихколичество.


<div id="menu3–1" class="menu"><h3>Menu 3.1</h3><a href="#">Option 3.1.1-></a><br><br><a href="#">Option 3.1.2-></a><br><br><a href="#">Option 3.1.3</a>

</div><div id="menu1–1–1" class="menu"><h3>Menu 1.1.1</h3><a href="#">Option 1.1.1.1-></a><br><br><a href="#">Option 1.1.1.2-></a><br><br><a href="#">Option 1.1.1.3</a>

</div><div id="menu1–2–2" class="menu">

<h3>Menu 1.2.2</h3><a href="#">Option 1.2.2.1-></a><br><br><a href="#">Option 1.2.2.2-></a><br><br><a href="#">Option 1.2.2.3</a>






415

Навигация для браузеров,не поддерживающихDHTML и CSSСегодня практически все посетители Web-сайтов используют браузеры, поддержива-ющие JavaScript. Однако еще есть браузе-ры, не имеющие данной функции, крометого, некоторые пользователи отключаютподдержку JavaScript в браузерах.Ваша задача в данном случае состоит в том,чтобы обеспечить таких посетителей хотябы основным набором навигационныхсредств и сделать доступной ту часть сво-его сайта, которую вы определили как ди-намическую (рис. 24.24 и 24.25).

Использование тэга <noscript>

1. <noscript>…</noscript>В тэге <noscript> находится информация,которая скрыта от браузерах, поддержи-вающих JavaScript (листинг 24.11). Брау-зеры, не поддерживающие JavaScript, иг-норируют тэг <noscript> и отображаютвсе, что содержится в нем. Таким обра-зом, если вы хотите добавить содержи-мое, которое отображалось бы в браузе-рах, не поддерживающих JavaScript, раз-местите его в тэге <noscript>.

Навигация для браузеров, не поддерживающих DHTML и CSS

Рис. 24.24. Отображение страницы в браузереInternet Explorer, поддерживающем JavaScript

Рис. 24.25. Тот же самый код в браузере,не поддерживающем JavaScript. Хотя страницывыглядят приблизительно одинаково, навигацияи заголовок взяты из разных источников

Листинг 24.11. В тэге <noscript> содержитсяинформация, которая отображается браузером,не поддерживающим JavaScript

<html><head>

<script language="JavaScript">aNum=0;pageTitle='Providing Navigation for Non-Dynamic Browsers'

</script></head>


<body><noscript>

<a href="menu.html">Main Menu

</a><h1>Webbed Environments</h1><br><h2>Providing Navigation for->Non-Dynamic Browsers</h2>

</noscript>

417Дополнительные возможности

Установка тэга <link>

1. <link rel="home" href="index.html">В тэге <head> вашего документа опреде-лите тэг <link>. Величине rel (от англ.relationship – отношение) присвойтеодно из значений из табл. 24.1, исполь-зуя кавычки, затем укажите, к какойссылке относится href (листинг 24.12).

Установка тэга <meta>

1. <meta name="Author" content=->"Jason Cranford Teague">

В тэге <head> поместите тэг <meta>, в ко-тором укажите соответствующую ин-формацию:автор, авторские права, клю-чевое слово, описание (табл. 24.2). Вве-денное вами имя определяет тип инфор-мации.

Таблица 24.1. Возможные атрибуты тега <link>

Значение Описаниеатрибута rel (на что ссылается)

home Главная страница(home page)

start Первая страница сайта

next Следующая страница сайта

prev Предыдущая страницасайта

contents Содержание или картасайта

index Содержание или картасайта

glossary Глоссарий

help Страница помощи

chapter Начало главы

section Начало раздела

subsection Начало подраздела

appendix Приложения

copyright Информация об авторскихправах

made О странице

Листинг 24.12. Тэги <meta> и <link> содержат информацию о содержимом страницы и ее положенииотносительно других страниц сайта

<html><head>

<meta name="Author" content="Jason Cranford Teague"><meta name="copyright" content="1998-2000 Jason Cranford Teague"><meta name="keywords" content="Jason Cranford Teague,Webbed Environments, CSS,->DHTML, JavaScript,HTML,Search Engines, Information Architecture,World Wide Web,->Web Art,GIF,JPEG,PNG, Macromedia Flash"><meta name="description" content="In the Future Everyone will be a Web Designer."><link rel="home" href="index.html"><link rel="index" href="index.html"><link rel="first" href="index.html"><link rel="last" href="copyright.html"><link rel="next" href="siteMap.html"><link rel="prev" href="index.html"><link rel="glossary" href="glossary.html"><link rel="chapter" href="index.html"><link rel="section" href="index.html">


Большинство браузеров, к сожалению, неподдерживают тэг <link>. Стоит ли вклю-чать его в Web-страницу? Может быть,и нет. Однако это очень изящное решениедля сайта, и в будущем вы наверняка за-хотите включить этот тэг в его состав.

Помните, что указанные тэги могут связатьсо страницей любую информацию. Web-полиция не явится к вам ночью и не будетбарабанить в дверь, если вы свяжете ссыл-ку home с файлом help.html, но вашим по-сетителям это вряд ли понравится.

Вопреки всеобщему убеждению не все по-исковые машины используют тэги <meta>,а те, которые используют, вообще рас-сматривают их как дополнительное описа-ние содержимого страницы. Их не реко-мендуется включать в Web-страницу безособой необходимости. Не слишком-тополагайтесь на них, если хотите продви-нуть вашу разработку к вершинам хит-па-рада поисковиков.

Как уже было отмечено, необходимо все-гда включать два тэга <meta> в тэг <head>вашего документа для того, чтобы попастьв поле зрения поисковой машины. Тэг<description> включает в себя одно-двапредложения. Он сообщает поисковой ма-шине о том, какая информация находитсяна странице. В свою очередь поисковая ма-шина использует содержимое этого тэгадля описания вашей страницы при распе-чатке результатов поиска. Более важнымпо сравнению с тэгом <description> яв-ляется тэг <keywords>. Он представляетсобой набор самых важных, ключевыхслов на странице.

Таблица 24.2. Допустимые метатэги

Возможные Располагаемаязначения информацияметатега

author Автор страницы

copyright Информация об авторскихправах

keywords Список ключевых слов,относящихся к теместраницы

description Краткое описаниестраницы


<link rel="subsection"->href="index.html"><link rel="appendix"->href="appendix.html"><link rel="help" href="help.html"><link rel="copyright"->href="copyright.html"><link rel="made" href="mailto:->[email protected]"><style type="text/css">

h1 { color: silver; font-size: 36px;->font-family: Arial, Helvetica, Geneva,->Sans-Serif; }


<h1>Home</h1><p>Et quid erat, quod me->delectabat...</p>

</body></html>

2525252525Средства управления

Используя только HTML, вы ограничивае-те право посетителей контролировать про-исходящее на экране. Они могут восполь-зоваться полосой прокрутки, но у них нетникаких инструментов, чтобы каким-либообразом изменять содержимое Web-стра-ницы.Динамический Web-сайт позволяет посе-тителям непрерывно взаимодействовать состаницами. Вы должны предусмотретьсредства управления, которые обеспечилибы интерактивную работу Web-сайта.В данной главе описываются интерактив-ные функции, предоставляющие посети-телю средства управления Web-страницей.

Средства управления420

Полоса прокруткиПольза, получаемая от GUI (Graphical UserInterface – графический пользовательскийинтерфейс) без полосы прокрутки, точнотакая же, как и от машины без руля. Поло-са прокрутки (scrollbar) позволяет разме-щать бесконечное количество информа-ции на ограниченном пространстве страни-цы. Операционные системы задают опре-деленный вид полосы прокрутки, и этонесколько стесняет дизайнеров при разра-ботке интерфейса Web-приложения.В главе 13 (раздел «Прокрутка Web-страни-цы») рассказывалось, как данный элементдобавляется на страницу. Вы также може-те использовать DHTML для прокрутки(скроллинга) отдельных слоев в окне илифрейме (рис. 25.1 и 25.2).

Создание полосы прокрутки

1. index.htmlСоздайте файл с фреймовой структуройи сохраните его под именем index.html(листинг 25.1). Создайте два фрейма-колонки. Первая колонка – фрейм,в который загружается код из файлаscrollBar.html. Здесь будет располагать-ся полоса прокрутки. Во второй фреймбудет загружен файл content.html.

2. scrollBar.htmlСоздайте HTML-файл и сохраните егопод именем scrollBar.html (листинг 25.2).Он будет содержать элементы управле-ния полосой прокрутки. Далее вы буде-те постоянно возвращаться к этому фай-лу (см. шаги 3–14).

Рис. 25.1. Средства управления позволяютпосетителю перемещаться по странице

Рис. 25.2. Я использовал эту технологию присоздании Web-сайта, разработанного для фильма«The Sandman» (www.sandmanfilm.com)

421

3. <script src="findDOMFrame.js"></script>В любую функцию, написанную на Ja-vaScript, которая непосредственно раз-мещает объект на экране, необходимодобавить код findDOM. Поскольку вашастраница разбита на фреймы, следуетиспользовать фреймовую версию этогокода (см. раздел «Управление содержа-нием во фреймах» в главе 14).

4. var scrolling=0;В тэге <script> в файле scrollBar.htmlинициализируйте следующие перемен-ные:– scrolling определяет, прокручивает-

ся ли в данный момент слой;– yT записывает текущее положение

верхней границы прокручиваемогослоя;

– lT устанавливает первоначальное по-ложение верхней границы слоя;

– yI определяет величину инкрементадля скроллинга слоя. Вы можете из-менять эту величину: чем большезначение, тем быстрее прокручивает-ся слой, а чем меньше, тем медленнееосуществляется прокрутка;

– yH определяет высоту слоя;– domStyle записывает общую объект-

ную модель документа (DOM) дляпрокручиваемого слоя, чтобы полу-чить доступ к свойствам стиля;

– dom сохраняет общую DOM для про-кручиваемого слоя, чтобы получитьдоступ к прочим свойствам.

Листинг 25.1. Этот код устанавливает двафрейма-колонки: узкая колонка слевапредназначена для полосы прокрутки,а содержание занимает все оставшееся местона экране

<html></head><frameset cols="35,*" border="0"->framespacing="0" frameborder="NO">

<frame src="scrollBar.html"->name="scrollBar" scrolling="NO"->noresize marginheight="0"->marginwidth="0"><frame src="content.html"->name="content" scrolling="NO"->noresize>

</frameset></html>

Листинг 25.2. Весь сценарий JavaScript,контролирующий содержимое страницы,помещается в файле scrollBar.html. Функцияscroll() осуществляет прокрутку слояscrollArea во фрейме содержимого, а функцииURT() и URB() перемещают в начало и конецстраницы соответственно

<html><head>

<script src="findDOMFrame.js">-></script><script language="JavaScript">

var scrolling = 0;var yT = 5;var lT = 5;var yI = 5;var yH = 0;var domStyle;var dom;if (document.images){

imag = new Array();imag[0] = "up_off.gif";imag[1] = "up_on.gif";imag[2] = "down_off.gif";imag[3] = "down_on.gif";

Полоса прокрутки


5. function startScroll(objected,->frameName,direction){…}

Определите, используя JavaScript, функ-цию startScroll(). Она присваивает пе-ременной scrolling значение 1 (начатьпрокрутку), определяет текущее поло-жение верхней границы слоя (yT), высо-ту слоя (–25, оставить нижнюю границу),а затем вызывает функцию scroll().

6. function scroll(direction){…}

Посредством JavaScript создайте функ-цию scroll(). Она перемещает слойвверх или вниз в зависимости от значе-ния переменной direction (1 – вверх, 0 –вниз), а также учитывая значение ин-кремента. Функция выполняется дотех пор, пока значение переменнойscrolling равно 1.

7. function stopScroll(){…}

С помощью JavaScript запишите функ-цию stopScroll(). Она присваивает пе-ременной scrolling значение 0 (пре-кратить прокрутку).

8. function URB(objected,frameName){…}

Введите, используя JavaScript, функ-цию URB(). Она совмещает нижнююграницу слоя с нижней границей окна.

9. function URT(objected,frameName){…}

Определите функцию URT() при помо-щи JavaScript. Она совмещает верхнююграницу слоя с верхней границей окна.

10. tartScroll('scrollArea','content',1);return false;

Средства управления необходимо опре-делять как ссылки с обработчиками событий. Чтобы добавить событие«прокрутка вверх», вызовите функ-цию startScroll() в обработчике со-бытий onMouseDown. Передайте функ-ции ID объекта, к которому необходи-мо применить скроллинг, имя фрейма,


imag[4] = "top_off.gif";imag[5] = "top_on.gif";imag[6] = "bottom_off.gif";imag[7] = "bottom_on.gif";im = new Array();for (var i = 0; i < imag.length; i++)

{im[i] = new Image();im[i].src = imag[i];}

}

function startScroll(objectID,->frameName,direction) {

domStyle = findDOMFrame(objectID,->frameName,1);dom = findDOMFrame(objectID,->frameName,0);scrolling = 1;yT = domStyle.top;if (document.getElementById) {

pxLoc = yT.indexOf("px");if (pxLoc >= 1) yT = yT.substring->(0,pxLoc);

}if (window.innerHeight != null)

yH = window.innerHeight - 25;else

yH = document.body.clientHeight - 25;if (dom.offsetHeight != null)

yH = yH - dom.offsetHeight;else

yH = yH - dom.clip.height;scroll(direction);

}

function scroll(direction) {if (scrolling == 1) {

if ((direction == 1) && (yT <= lT)){

yT = (yT/1) + yI;if (yT > lT) yT = lT;domStyle.top = yT; }

else {if ((direction == 0) && (yT >= yH))

423


{yT -= yI;

if (yT < yH) yT = yH;domStyle.top = yT; }

}if (document.getElementById) {

yT = domStyle.top;pxLoc = yT.indexOf('px');if (pxLoc >= 1) yT =->yT.substring(0,pxLoc);

}code2run = 'scroll('+ direction + ')';setTimeout(code2run,0);

}return false;

}

function stopScroll() {scrolling = 0;return false;

}

function URB(objectID,frameName) {domStyle = findDOMFrame(objectID,->frameName,1);dom = findDOMFrame(objectID,->frameName,0);if (window.innerHeight != null)

yH = window.innerHeight - 25;else

yH = document.body.clientHeight - 25;if (dom.offsetHeight != null)

yH = yH - dom.offsetHeight;else

yH = yH - dom.clip.height;domStyle.top = yH;

}

function URT(objectID,frameName) {domStyle = findDOMFrame(objectID,->frameName,1);domStyle.top = lT;

}

function toggle(imgName,num){

содержащего этот объект, и присвойтезначение 1 (вверх).

11. startScroll('scrollArea','content',0)Вызовите функцию startScroll() в об-работчике событий onMouseDown соответ-ствующей ссылки. Передайте в функ-цию ID объекта, к которому необходи-мо применить скроллинг, и имя фрей-ма, содержащего этот объект.

12. stopScroll()Чтобы остановить прокрутку слоя,используйте функцию stopScroll(),вызываемую в обработчике событияonMouseUp.

13. URT('scrollArea','content')Чтобы переместиться к верхней грани-це слоя, вызовите функцию URT() и пе-редайте ей ID объекта и имя фрейма,содержащего этот объект.

14. URB('scrollArea','content')Чтобы переместиться к нижней грани-це слоя, вызовите функцию URB() и пе-редайте ей ID объекта и имя фрейма,содержащего этот объект.

15. content.htmlСоздайте HTML-файл и сохраните егопод именем content.html (листинг 25.3).Он будет содержать прокручиваемыйслой. Следующие два шага (16 и 17)выполняются в этом файле.

16. #scrollArea{…}В файле content.html установите ID –scrollArea. Он должен быть задан в аб-солютных координатах.

17. <span id="scrollArea">…</span>Определите слой scrollArea в тэге <div>или <span> (см. раздел «Создание объ-екта» в главе 11).




if (document.images && imgName){imgName.src = im[num].src;

}return false;


body { background: white url(bg_scroll.gif) repeat-y 33px 30px; margin-left: 3px; }</style></head><body>

<table border="0" cellpadding="0" cellspacing="0" width="25" height="100%"><tr><td align="center" valign="top">

<a href="javascript:void('');" onmouseover="window.status='Up'; return true;"->onmousedown="toggle(up,1); startScroll('scrollArea','content',1); return->false;" onmouseup="stopScroll(); toggle(up,0);"><img height="25" width="25"->src="up_off.gif" border="0" vspace="5" name="up"></a><a href="javascript:void('');" onmouseover="window.status='Return To Top'; return->true;" onmousedown="toggle(top,5); URT('scrollArea','content'); return false;"->onmouseup="toggle(top,4);"><img height="25" width="25" src="top_off.gif"->border="0" vspace="5" name="top"> </a>

</td></tr><tr><td align="center" valign="bottom">

<a href="javascript:void('');" onmouseover="window.status='Go To Bottom'; return->true;" onmousedown="toggle(bottom,7); URB('scrollArea','content'); return->false;" onmouseup="toggle(bottom,6);"><img height="25" width="25"->src="bottom_off.gif" border="0" vspace="5" name="bottom"> </a><a href="javascript:void('');" onmouseover="window.status='Down'; return true;"->onmousedown="toggle(down,3); startScroll('scrollArea','content',0); return->false;" onmouseup="stopScroll(); toggle(down,2);"><img height="25" width="25"->src="down_off.gif" border="0" vspace="5" name="down"></a>

</td></tr></table></body></html>

425

Листинг 25.3. Во фрейме содержания расположенслой scrollArea, который будет прокручиватьсяс помощью функций, находящихся во фреймес полосой прокрутки

<html><head>

<style type="text/css">#scrollArea {

position: absolute;top: 5px;left: 15px;}

body {color: black;font-size: 12px;line-height: 14px;font-family: "Times New Roman",->Georgia, Times, serif;background: white url(bg_content.gif)}</style>

</head><body>

<span id="scrollArea"><h2>Scroll Bar Example</h2><h3>By Jason Cranford Teagues</h3><p>Et quid erat, quod me delectabat,->nisi amare et amari?

</span></body></html>

В данном примере добавлена простаяфункция, запускаемая при нажатии награфический элемент слоя, таким обра-зом, средства управления выделяютсяпри щелчке мышью.

Используйте команду return false в об-работчике событий для элементов управле-ния прокруткой, чтобы не допустить отоб-ражения всплывающего меню в MacOS.

Средства управления прокруткой можноразмещать в одном HTML-файле со сло-ем (content.html). Но сначала нужно уда-лить все ссылки на frameName и исполь-зовать внешний файл findDOM.js вместоfindDOMFrame.js.



Создание кнопки BackПри создании Web-приложения, возможно,потребуется отключить средства управле-ния, имеющиеся в браузере, чтобы запре-тить посетителю перелистывать страницысайта во время какой-либо важной проце-дуры.Однако лишение свободы выбора можетвызвать недовольство посетителя. Поэтомувам необходим сценарий, который помогбы вернуть кнопку Back (а также и Next)обратно в интерфейс (рис. 25.3 и 25.4).

Создание кнопок Back и Next

1. history.go(–1)Добавьте метод go() объекта historyи передайте значение –1, чтобы вернуть-ся на один уровень назад в списке посе-щенных страниц браузера (листинг 25.4).

2. history.go(1)Используйте данную строку, чтобыпродвинуться на один уровень историибраузера вперед.

Хотя элемент истории допускается исполь-зовать для перемещения вверх и вниз посписку истории браузера, нельзя получитьнепосредственный доступ к URL или опре-делить, содержит список следующий илипредыдущий элементы. Это значительноограничивает возможности Web-дизайне-ра по динамическому отображению кно-пок Back и Next.

Рис. 25.3. Щелчок по кнопке Back на странице 2…

Рис. 25.4. …возвращает посетителяна предыдущую посещенную страницу

Листинг 25.4. Чтобы создать кнопку Back,используйте JavaScript, позволяющий получитьдоступ к объекту истории

<html><body>

<p><a href = "javascript:history.go(-1);">Back</a> |<a href = "javascript:history.go(1);">Next </a></p><h1>Page 1</h1><p><a href="index2.html">page 2</a></p>

</body></html>

427

Отключение средств управления, встроенных в браузер

Отключение средств управления, встроенных в браузер, вызывает много споровв среде Web-разработчиков. Некоторые справедливо полагают, что лишение сво-боды передвижения по сайту вызывает раздражение посетителей. Отключать этисредства управления следует только в том случае, если использование стандарт-ных средств может повлечь за собой какие-либо катастрофические последствия дляработы сайта.Приведу пример, иллюстрирующий необходимость такого вынужденного отключе-ния. Я видел сайты, которые требуют от посетителей заполнить многостраничнуюанкету. Если посетитель щелчком по кнопке Back попытается вернуться на преды-дущую страницу, чтобы исправить неверно записанные данные, может рухнуть всясистема. В таком случае посетителю приходится не только заполнять ее заново, нои перезагружать браузер.

Организация слайд-шоуЕсли вам нужно продемонстрировать се-рию фотографий (или каких-либо иллюс-траций) в определенном порядке, пред-ставьте их в формате слайд-шоу. Допускает-ся показывать даже два или более слайд-шоуодновременно, чтобы отразить различныестороны вашей работы (рис. 25.5).Используя слайд-шоу, вы можете скры-вать и отображать объекты (см. главу 13),располагая элементы с абсолютными ко-ординатами в элементах, размещенныхотносительно (см. раздел «Абсолютныеэлементы, встроенные в относительные»в главе 8).

Создание кнопки Back

Рис. 25.5. Элементы управления слайд-шоупозволяют перемещаться вперед и назадв определенном порядке


Создание слайд-шоу

1. <script src="findDOMNested.js">-></script>

В любую JavaScript-функцию, непосред-ственно размещающую объект на экра-не, введите код findDOM (листинг 25.5).Так как в нем используются вложен-ные слои, необходимо применять осо-бый вариант кода findDOM, работающийв Netscape 4 (см. раздел «Netscape 4и встроенные слои» в главе 11).

2. slideT=new Array();Создайте два новых массива. Первыймассив, sideT[], записывает количе-ство отображаемых слайдов, а второй,slideC[], сохраняет текущий отобража-емый слайд.

3. slideT[0]=5;Для каждого слайд-шоу инициализи-руйте массив slideT[] и запишите в негоколичество слайдов.

4. slideC[0]=1;Для каждого слайд-шоу инициализи-руйте массив slideC[] со значением 1(первый слайд).

5. function nextSlide(setNum){…}Создайте с помощью JavaScript функ-цию nextSlide(). Она скрывает теку-щий отображаемый слайд и показыва-ет следующий за ним. Если текущийслайд – последний, функция снова вы-водит на экран первый слайд.

6. function previousSlide(setNum){…}Используя JavaScript, определите функ-цию previousSlide(). Она скрывает те-кущий слайд и отображает предыду-щий. Если отображаемый слайд – пер-вый в серии, то следующим на экранепоявится последний слайд.

Листинг 25.5. Код слайд-шоу позволяетпрокручивать слайды вперед и назад

<html><head>

<script src="findDOMNested.js">-></script>

<script>slideT = new Array();slideC = new Array();

slideT[0] = 5;slideC[0] = 1;

slideT[1] = 3;slideC[1] = 1;

function nextSlide(setNum) {var objectID1 = 'slideSet' + setNum;var objectID2 = 'slide' + setNum +->slideC[setNum];var domStyle = findDOM(objectID1,->objectID2,1);domStyle.visibility = 'hidden';if (slideT[setNum] == slideC[setNum])->slideC[setNum] = 1;else slideC[setNum]++;var objectID1 = 'slideSet' + setNum;var objectID2 = 'slide' + setNum +->slideC[setNum];var domStyle = findDOM(objectID1,->objectID2,1);domStyle.visibility = 'visible';

}

function previousSlide(setNum) {var objectID1 = 'slideSet' + setNum;var objectID2 = 'slide' + setNum +->slideC[setNum];var domStyle = findDOM(objectID1,->objectID2,1);domStyle.visibility = 'hidden';if (slideC[setNum] == 1)->slideC[setNum] = slideT[setNum];else slideC[setNum]–;var objectID1 = 'slideSet' + setNum;var objectID2 = 'slide' + setNum +->slideC[setNum];

429

7. #slideSet0,#slideSet1{…}

Каждому ряду слайдов присвойте IDи имя slideSet#. Этот слой будет со-держать все слайды, задавая для отно-сительной последовательности слай-дов абсолютное положение.

8. .slides{…}

Определите класс слайдов – slides. Онустанавливает общий стиль для всехслайдов и должен иметь абсолютноеположение.

9. #slide01,#slide11{…}

Присвойте слайдам ID, называя каж-дый slide##. Слайды пронумерованыследующим образом: первая цифраопределяет принадлежность к соответ-ствующему ряду слайдов, вторая опи-сывает его порядковый номер в этомряду. Таким образом, slide01 – первыйслайд в нулевом ряду.

10. <div id="slideSet0">…</div>Введите CSS-слой и определите егопри помощи ID slideSet#.

11. <div class="slides" id="slide01">->…</div>

Используя ID slide##, для каждого слай-да установите слой, вложенный в слой,который создан на шаге 10. Поместитев этом слое содержимое слайда.

12. onClick="previousSlide(0)"Введите ссылку, вызывающую функ-цию previousSlide() для соответству-ющего ряда.

13. onClick="nextSlide(0)"Определите ссылку, которая будет вы-зывать функцию nextSlide() для соот-ветствующего ряда.

Слайд-шоу, созданное при помощи DHTML,может содержать не только изображения,но и любой HTML-код.


var domStyle = findDOM(objectID1,->objectID2,1);domStyle.visibility = 'visible';


#slideSet0,#slideSet1 {position: relative;background-color: silver;layer-background-color: silver;width: 140px;height: 140px;text-align: center;}

.slides {position: absolute;top: 0px;left: 0px;z-index: 1;}

.controls {position: absolute;top: 120px;left: 110px;z-index: 10;}

#slide01,#slide11 {visibility: visible;}

#slide02,#slide03,#slide04,#slide05,->#slide12,#slide13{

visibility: hidden;}</style>

</head><body>

<h1>Slide Set 0</h1><div id="slideSet0">

<div class="slides" id="slide01"><h3>Slide 1</h3><img src="0010s.gif" width="100"->height="67" border="0">

</div><div class="slides" id="slide02"><h3>Slide 2</h3>

Организация слайд-шоу



<img src="0016s.gif" width="100"->height="67" border="0"></div><div class="slides" id="slide03"><h3>Slide 3</h3><img src="0021s.gif" width="100" height="67" border="0"></div><div class="slides" id="slide04"><h3>Slide 4</h3>

<img src="0022s.gif" width="100" height="67" border="0"></div><div class="slides" id="slide05"><h3>Slide 5</h3><img src="0023s.gif" width="100" height="67" border="0"></div>

<div class="controls"><a href="javascript: void('');" onclick="previousSlide(0);"><img src="back.gif" width="10" height="10" border="0"></a><a href="javascript: void('');" onclick="nextSlide(0);"><img src="next.gif" width="10" height="10" border="0"></a>

</div></div><script>

////// Òðåáóåòñÿ äîïîëíèòåëüíûé ðàçäåëèòåëü äëÿ îòäåëåíèÿ ñëàéä-øîó â Netscape 4if (isLayers) { document.write ("<br><br><br><br><br><br><br><br><br><br><br>") }</script>

<h1>Slide Set 1</h1><div id="slideSet1">

<div class="slides" id="slide11"><h3>Slide 1</h3><img src="0007s.gif" width="67" height="100" border="0"></div>



<div class="controls"><a href="javascript: void('');" onclick="previousSlide(1);">-><img src="back.gif" width="10" height="10" border="0"></a>-><a href="javascript: void('');" onclick="nextSlide(1);"><img src="next.gif"->width="10" height="10" border="0"></a>

</div></div>

</body></html>

431

Всплывающий гипертекстГипертекст предоставляет посетителям до-ступ к дополнительной информации. Нодля получения доступа необходимо щелк-нуть по ссылке, которая откроет новый до-кумент. Это может иногда действовать нанервы, не говоря уже о низкой скоростисоединения. А если информация – текстили изображения – просто появлялась быпод ссылкой, на которую указывает кур-сор? Такой механизм действительно являл-ся бы гипертекстом (рис. 25.6 и 25.7).

Создание всплывающегогипертекста

1. <script src="findDOM.js"></script>В любую JavaScript-функцию, котораянепосредственно размещает объект наэкране, поместите код findDOM. Для это-го запишите его во внешнем текстовомфайле, а затем импортируйте файл нату страницу, где код будет использо-ваться (листинг 25.6).

2. function findLivePageWidth(){…}Определите функцию findLivePage-Width(), используя JavaScript (см. раз-дел «Размеры клиентской области ок-на» в главе 12).

3. function popUp(evt,objected){…}Используя JavaScript, введите функциюpopUp(). Она проверяет ширину окнабраузера, а затем, в зависимости от зна-чения переменной objectID, создает ос-нову DOM для отображаемого объектагипертекста. Затем функция скрываетобъект (если он видим) или размещаетего под соответствующей ссылкой (вы-равнивая объект, если он находитсяочень близко к краю экрана), а затемотображает.

Всплывающий гипертекст

Рис. 25.6. Когда посетитель наводит указательна ссылку…

Рис. 25.7. … под ней появляется текст


4. .hypertext{…}В CSS определите класс hypertext. Онбудет базовым для всех гипертексто-вых объектов, а также определит ихвнешний вид.

5. #ht1,#ht2{…}Каждому всплывающему объекту гипер-текста присвойте ID – ht#. Определитекаждый ID в абсолютных координатах,как скрытый и имеющий z-индекс, кото-рый размещает данный объект поверхостальных. При необходимости положе-ние этих объектов будет изменено.

6. <span id="ht1" class="hypertext">…</span>Для каждого всплывающего объекта ги-пертекста создайте слой в соответствиис настройками класса hypertext и ID,присвоенным на шаге 5. При желаниивы можете разместить любое содержа-ние в тэге <span>.

7. <a href="#" onMouseOver="popUp->(event,'ht1');" onMouseOut=->'popUp(event,'ht1');">…</a>

Определите ссылку, которая будет вы-зывать появление гипертекста при на-ведении указателя мыши на какой-либо текст или другой элемент стра-ницы. В ссылку включите обработчи-ки событий onMouseOver и onMouseOut,которые будут вызывать функциюpopUp(). Передайте в функцию собы-тие и ID всплывающего объекта (см.раздел «Передача события в функ-цию» в главе 14).

Листинг 25.6. Код всплывающего гипертекстаиспользует информацию обработчика событийдля размещения гипертекста под ссылкой

<html><head><script src="findDOM.js"></script>

<script>function findLivePageWidth(){

if (window.innerWidth != null)return window.innerWidth;

if (document.body.clientWidth != null)return document.body.clientWidth;

return (null);}

function popUp(evt,objectID){

if (isDHTML) {var livePageWidth =->findLivePageWidth();domStyle = findDOM(objectID,1);dom = findDOM(objectID,0);state = domStyle.visibility;if (dom.offsetWidth) elemWidth =->dom.offsetWidth;else { if (dom.clip.width)->elemWidth = dom.clip.width; }if (state == 'visible' || state ==->'show') { domStyle.visibility =->'hidden'; }else {

if (evt.pageY) {topVal = evt.pageY + 4;leftVal = evt.pageX -->(elemWidth / 2);

}else {

if (evt.y) {topVal = evt.y + 4 +->document.body.->scrollTop;leftVal = evt.x -->(elemWidth / 2) +->document.body.->scrollLeft;

}}

433


if(leftVal < 2) { leftVal = 2; }else {

if ((leftVal + elemWidth) >->livePageWidth) { leftVal =->leftVal - (elemWidth / 2);}

}domStyle.top = topVal; //->Ïîçèöèÿ ýëåìåíòà ñâåðõódomStyle.left = leftVal; //->Ïîçèöèÿ ýëåìåíòà ñëåâàdomStyle.visibility = 'visible';// Ñäåëàòü ýëåìåíò âèäèìûì

}}


#ht1,#ht2 {position: absolute;z-index: 100;top: 0px;left: 10px;visibility: hidden; }

.hyperText {color: #333333;font: 10px/12px "Trebuchet MS", Arial,->Helvetica, Geneva, sans-serif;background-color: #cccccc;padding: 5px;border: solid 2px #ff6666;width: 250px;layer-background-color: #CCCCCC}</style>

</head><body>

<span id="ht1" class="hyperText">Too much information is as bad as too->little. All too often designers treat->the Web like a hose through which to->force information.</span><span id="ht2" class="hyperText">

Hypertext allows you to include->"meta-textual"->information for readers who want->to know more.

Заметьте, что ссылки, связанные с всплы-вающим текстом, никуда не приводят (насамом деле они связаны с верхней частьюстраницы). Можно связать их с докумен-тами, которые уточняют и дополняют ин-формацию, отображаемую во всплываю-щем гипертексте. Допустимо использоватьпростую функцию, которая не возвращаетникакого значения, но делает ссылки нереагирующими на щелчок мышью.

Вы можете поместить во всплывающемобъекте подсказку, которая объясняет зна-чение каждой ссылки в навигации, иливключить гипертекст в изображение картывашего сайта. Эта технология становитсяпросто необходимой, если у вашего сайтаесть большое графическое представление(карта сайта), где имеются области, требу-ющие пояснения.


</span><p>A webbed environment is a Web site->that does not frustrate the user->with long download times, or confuse->them with<a href="#"->ONMOUSEOUT="popUp(event,'ht1');"->onmouseover="popUp(event,'ht1');">millions of navigation points at once</a>. Instead, a successful webbed->environment will appear to have->smooth transitions as content->changes and provide easy to use->features,<a href="#"->onmouseout="popUp(event,'ht2');"

onmouseover="popUp(event,'ht2');">hypertext</a>, and navigation that is convenient->but not overwhelming.</p>

</body></html>

Всплывающий гипертекст


Использование формыввода для созданиядинамических эффектовСамым распространенным способом вза-имодействия с Web-страницей являетсящелчок мышью. Но на сайте могут содер-жаться и различные формы, которые по-сетители заполняют, используя клавиату-ру. В главе 13 было показано, как переме-щать объект из одной точки в другую, приэтом положение объекта определялосьвами. Применим здесь данный эффект, нотеперь право принимать решение предо-ставим посетителю.

Получение запроса посетителяпри помощи формы

1. <script src="findDOM.js"></script>В любую функцию JavaScript, котораянепосредственно размещает объект настранице, добавьте код findDOM. Дляэтого поместите его во внешнем файлеи импортируйте файл на страницу, накоторой будет использоваться код (лис-тинг 25.7).

2. function moveObjectTo(objectID,x,y){…}Добавьте в ваш документ, используяJavaScript, функцию moveObjectTo().Она передвигает элемент из текущегоположения в новое (см. раздел «Пере-мещение объектов» в главе 13). Пере-мещение происходит с учетом значе-ний xVal и yVal, полученных при по-мощи формы.

Листинг 25.7. Введите координаты дляперемещения фотографии кота по экрану

<html><head>


var theForm = null;function moveObjectTo(objectID,formNum) {

x = document.forms[formNum].xVal.value;y = document.forms[formNum].yVal.value;var domStyle = findDOM(objectID,1);if (domStyle.pixelLeft != null) {

domStyle.pixelLeft = x;domStyle.pixelTop= y;

}else {

domStyle.left = x;domStyle.top= y;

}}


<div id="object1" style="position:->absolute; top: 60px; left: 60px;->visibility: visible">

<img src="coco.jpg" width="138"->height="168" border="0"><h2>meep</h2>

</div><form action="#" name="form1"->method="get">

x:<input type="TEXT" name="xVal"->size="3"><br>y:<input type="TEXT" name="yVal"->size="3"><br><input type="button" value="Move"->onclick="moveObjectTo->("object1",0)">

</form></body></html>

435

3. <div id="object1" style="position:->absolute; top: 60px; left: 60px;->visibility: visible">…</div>

Создайте CSS-слой, положение кото-рого задано при помощи свойств topи left.

4. <form action="#" name="form1"->method="get">…</form>

Создайте простую форму и присвойтеей имя.

5. <input type="TEXT" name="xVal" size=3>Добавьте поля ввода, которые позволя-ют посетителям указывать координатыx и y точки, в которую они хотят пере-двинуть объект.

6. <input type="button" value="Move"->onClick="moveObjectTo('object1',0)>

Поместите на форму кнопку, вызываю-щую функцию moveObjectTo(). Пере-дайте в функцию ID объекта, которыйтребуется переместить, и номер формы,созданной вами на шаге 5. Нажимая наэту кнопку, можно передвинуть объектв новое положение, определяемое вве-денными координатами (рис. 25.8).

Использование формы ввода для создания динамических эффектов

Рис. 25.8. Фотография кота переместиласьв новое положение, определенное пользователем


Контекстная формаФормы используются для ввода информа-ции на Web-страницу. Эти данные отсы-лаются на сервер и обрабатываются. Одна-ко часто создатели форм не знают, какиесведения может ввести посетитель.Если я регистрирую какую-либо програм-му (рис. 25.9), я могу делать это либо отсвоего имени (рис. 25.10), либо от именисвоей компании (рис. 25.11). Эти две воз-можности требуют создания различныхформ. Традиционный подход к решениюданной задачи – поместить на страницессылки для вызова каждой из форм, рас-положенных на одной странице или наразных. Однако, используя DHTML, мож-но разместить обе формы на одной стра-нице, отображая ту или иную в зависимос-ти от данных, введенных посетителем.

Рис. 25.11. Форма «Business»

Рис. 25.10. Форма «Personal»

Рис. 25.9. Так выглядит страница при первойзагрузке

437

Создание контекстной формы

1. <script src="findDOMNested.js">-></script>

В любую JavaScript-функцию, котораянепосредственно располагает объектна экране, включите код findDOM (лис-тинг 25.8). Для этого поместите его вовнешнем текстовом файле, а затем им-портируйте файл на нужную страницу.Поскольку в таком коде используютсявложенные слои, необходимо преду-смотреть и дублирующий вариант кодадля Netscape 4 (см. раздел «Netscape 4и встроенные слои» в главе 11).

2. var oldDom=null;Присвойте переменной oldDom значениеnull. Это позволит функции swapForm()при первом запуске не вызывать ошибку.

3. function swapForm(ibjectID){…}Определите функцию swapForm(), ис-пользуя JavaScript. Она скрывает теку-щую отображаемую форму, а затемпоказывает форму, выбранную посе-тителем.

4. #formStack{…}Стеку форм присвойте ID, которыйпредставляет собой объект с относи-тельными координатами, содержащийстек расположенных абсолютно форм.

5. #personal, #business{…}Установите ID для всех форм, делая ихскрытыми и расположенными абсо-лютно. Все формы имеют одинаковоеопределение, поэтому их можно вклю-чить в общий список (см. раздел «Опре-деление тэгов с помощью одинаковыхправил» в главе 2).

Контекстная форма

Листинг 25.8. Данный код определяетфункционирование кнопки, которая позволяетпосетителю выбрать форму «Рersonal» или«Business»

<html><head>

<script src="findDOMNested.js">-></script><script language="JavaScript">

var oldDom = null;function swapForm(objectID){

dom = findDOM('formStack',objectID,1);if (oldDom) oldDom.visibility =->'hidden';dom.visibility = 'visible';oldDom = dom;oldObjectID = objectID;


#formStack {position: relative;width: 300px;visibility: visible}

#personal,#business { padding: 5px;->border: solid 1px gray; position:->absolute; top: 0px; left: 0px;->visibility: hidden }


<form name="myForm" method="get"><input type="radio"->onclick="swapForm('personal');"->name="context">Personal <input->type="radio" onclick=->"swapForm('business');"->name="context">Business

</form><div id="formStack">

<div id="personal"><form name="personalForm"->action="submit.html" method="get">

Name <input type="text" name="name"->size="24"><br><br>


6. <input type="radio" onclick="swapForm->('personal')" name="context">

В тэге <body> вашего документа опи-шите форму, которая позволит поль-зователю выбрать нужное направле-ние, и в ней для каждой формы из сте-ка введите тэг <input>. Для каждойкнопки формы укажите обработчиксобытий onClick, который вызываетфункцию swapForm() и передает ей имяоткрываемой формы.

7. <div id="formstack">…</div>Определите для стека форм новыйслой. Он будет содержать вложенныеслои, а также позволит размещать фор-мы на странице.

8. <div id="personal">…</div>Внутрь слоя, определенного вами нашаге 7, введите отдельный слой длякаждой из используемых форм.

9. <form name="personalForm" action=->"submit.html" method="get">…</form>

В слое, созданном на шаге 8, помести-те код формы. Она располагается настранице отдельно от других форми включает кнопки Submit (Подтвер-дить) и Clear (Очистить).

Эта версия контекстной формы достаточнопроста, единственный минус – ограничениеNetscape 4. Хорошо было бы использоватьлишь одну кнопку Submit и создавать не-сколько различных форм, заключенныхв одну большую. Однако Netscape 4 непозволяет внедрять CSS и таблицы в тэг<form>.


Age<input type="text" name="age"->size="3"><br><br>SS# <input type="password"->name="ss#" size="7"><br><br><input type="submit"->name="submitPeronal"->value="Submit Peronal"> <input->type="reset" name="clearPersonal"->value="Clear">

</form></div><div id="business"><form name="businessForm"->action="submit.html" method="get">

Company <input type="text"->name="company" size="24"><br><br>Location<input type="text"->name="location" size="24"><br><br>Tax # <input type="password"->name="tax#" size="7"><br><br><input type="submit"->name="submitBusiness"->value="Submit Business">-><input type="reset"->name="clearBusiness"->value="Clear"></form></div>


439

Перемещаемые объектыЕще одна характерная черта графическогоинтерфейса – это возможность передвигатьэкранные объекты: например, перетаски-вать окна, файлы по экрану, а затем поме-щать их в какой-либо другой объект.В качестве примера рассмотрим созданиеприложения, составляющего поэтическиестрочки из слов, разбросанных по экрану:слова нужно перемещать таким образом,чтобы в результате получилась строчка изкакого-либо стихотворения (рис. 25.12).

Создание перемещаемого элемента

1. <script src="findDOM.js"></script>В любую JavaScript-функцию, котораянепосредственно располагает объект настранице, внедрите код findDOM (лис-тинг 25.9). Для этого поместите его вовнешнем текстовом файле, а затем им-портируйте этот файл на нужную стра-ницу.

2. var domStyle=null;Введите переменную domStyle для запи-си стиля объектной модели документа(DOM).

3. function pickIt(evt){…}При помощи JavaScript задайте функциюpickIt(). Она очень похожа на функ-цию findObject() (см. раздел «Иденти-фикация объекта на экране» в главе 14)и устанавливает ID объекта, на которыйуказывает посетитель (вне зависимостиот типа браузера). Если посетитель вы-бирает один из объектов, содержащихв ID слово chip, функция присваиваетзначение 100 z-индексу этого объекта.Поэтому объект располагается поверхостальных на странице. В противномслучае функция не выполняет никакихдействий.

Перемещаемые объекты

Рис. 25.12. А вы можете привести в порядок этохаотическое собрание слов?

Листинг 25.9. Щелкните по элементуи перетащите его. Эти три функции позволяютпосетителю передвигать объекты по экрану

<html><head>

<script language="JavaScript"->src="findDOM.js"></script><script language="JavaScript">

var domStyle = null;

function pickIt(evt) {if (isLayers) {

var testObject;var xPos = evt.pageX;var yPos = evt.pageY;for (var i = document.layers.->length - 1; i >= 0; i–) {

testObject = document.layers[i]if ((xPos > testObject.left) &&->(xPos < testObject.left +->testObject.clip.width) &&(yPos > testObject.top) &&(yPos < testObject.top +->testObject.clip.height)) {

domStyle = testObject;}


4. function dragIt(evt){…}Напишите с помощью JavaScript функ-цию dragIt(), которая будет вызывать-ся каждый раз, когда посетитель пере-мещает курсор мыши. Она не выпол-няет никаких действий до тех пор, покапосетитель не щелкнет по объекту, со-держащему слово chip. После этогофункция перемещает выбранный объ-ект вслед за курсором мыши.

5. function dropIt(){…}Посредством JavaScript определите функ-цию dropIt(). Она вызывается каждыйраз, когда пользователь отпускает кла-вишу мыши; переопределяет перемен-ную domStyle значением null и устанав-ливает z-индекс элемента в нуль.

6. function defaultEvents(){…}Используя JavaScript, добавьте в сценарийфункцию defaultEvents(). Она вызыва-ется при помощи обработчика событияonLoad в тэге <body> документа. Эта функ-ция устанавливает, какую функциюследует запустить при наступленииопределенного события (onMouseDown,onMouseMove и onMouseUp) в окне браузе-ра (см. раздел «Глобальный обработ-чик событий» в главе 14).

7. .chip{…}Установите стиль класса для описаниявнешнего вида создаваемого средства.Определите все объекты, содержащиеслово chip, в абсолютных координатахи с z-индексом, равным нулю.

8. #chip1{…}Для каждого элемента, содержащегослово chip, определите уникальный IDи присвойте начальные координатылевого верхнего угла.


}}else {

objectID = event.srcElement.id;if (objectID.indexOf('chip') !=->-1){

domStyle = findDOM(objectID,1);}

}if (domStyle) {

domStyle.zIndex = 100;return false;

}else {

domStyle = null;return;

}}

function dragIt(evt) {if (domStyle) {

if (isLayers) {domStyle.left = evt.pageX;domStyle.top = evt.pageY;

}else {

domStyle.left = window.event.x;domStyle.top = window.event.y;

} }}

function dropIt() {if (domStyle) {

domStyle.zIndex = 0;domStyle = null;

}}

function defaultEvents() {if (isLayers) {//Óñòàíàâëèâàåò ãëîáàëüíûé îáðàáîò÷èê->ñîáûòèé â Navigator 4.

441

9. onLoad="defaultEvents()"

В тэге <body> введите обработчик со-бытий onLoad для вызова функцииdefaultEvent().

10. <span id="chip1" class="chip">->One</span>

Создайте необходимое количество сло-ев (один слой для каждого chip-элемен-та) и каждому из них присвойте уни-кальный ID.

В Internet Explorer 4 возникает проблема,связанная с отображением объектов вовремя их перемещения по экрану. Крометого, нельзя использовать данную функ-цию при загрузке страницы из браузераNetscape 6.


document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE->| Event.MOUSEUP)

}if (isDHTML){document.onmousedown = pickIt;document.onmousemove = dragIt;document.onmouseup = dropIt;}

}</script>

<style type="text/css">.chip {position: absolute; z-index: 0;->color: black; font: bold 16pt->helvetica,sans-serif; background-color:->#999999;layer-background-color:->#999999; cursor: move;}#chip1 {top: 123px; left: 225px;}#chip2 {top: 5px; left: 25px;}#chip3 {top: 200px; left: 45px;}#chip4 {top: 55px; left: 55px;}#chip5 {top: 150px; left: 60px;}#chip6 {top: 75px; left: 125px;}</style></head><body onload="defaultEvents()">

<span id="chip1" class="chip">One-></span><span id="chip2" class="chip">Ring-></span><span id="chip3" class="chip">to-></span><span id="chip4" class="chip">Rule-></span><span id="chip5" class="chip">Them-></span><span id="chip6" class="chip">All-></span>

</body></html>

Перемещаемые объекты


Свопинг изображенийЯзык описания сценариев JavaScript широ-ко распространен во Всемирной паутине.Он позволяет создавать действительно ди-намические Internet-приложения. Так, на-пример, когда посетитель Web-страницынаводит указатель на гипертекстовую ссыл-ку (рис. 25.13), ее отображение меняется(рис. 25.14). Передвиньте указатель на дру-гой элемент страницы, и ссылка приметпервоначальный вид.

Создание свопинга изображений

1. o1_off.gifСоздайте для каждого из следующихсостояний кнопки графическое пред-ставление (рис. 25.15):– off используется, когда кнопка не

выбрана;– rdy применяется, когда на кнопку на-

веден указатель мыши;– on используется, когда кнопка вы-

брана.В зависимости от событий, происходя-щих в данный момент на экране, длякнопки применяется разное графичес-кое отображение.

2. imag=newArray();Имена необходимых файлов хранятсяв массиве imag (листинг 25.10). Каждоеизображение в этом массиве имеет свойуникальный номер, начинающийся с 0,а не с 1. Посредством номера вы можетессылаться на изображение из массива.

3. im=newArray();Чтобы загрузить какое-либо изображе-ние в окно браузера, используйте массивim[]. Вызываемая функция с помощью

Рис. 25.13. Когда посетитель помещает указательмыши над надписью Option 1…

Рис. 25.14. …она изменяется

Рис. 25.15. Три состояния надписи: off, rdy(ready) и on

443

массива im[] изменяет объекты, то естьосуществляет их свопинг. Вы можетедобавлять любое количество изобра-жений в массив imag[], но каждое изних должно иметь уникальный номер.В рассматриваемом примере загружа-ется шесть изображений, и для каждо-го из них применяются версии off и rdy.

4. function toggleImage(imgName,num){…}С помощью JavaScript напишите функ-цию toggleImage(). Она достаточнопроста. Сначала она определяет, можетли браузер осуществлять свопинг изоб-ражений (document.images) и существуетли такое изображение (imgName), затемизменяет источник изображения imgNameна изображение из массива в зависимос-ти от значения, содержащегося в пере-менной num.

Свопинг изображений

Листинг 25.10. Этот код изменяет изображениев зависимости от события, происходящегово фрейме содержания

<html><head>

<script language="JavaScript">var o1,o2,o3;if (document.images){

imag = new Array();imag[0] = "media/o1_off.gif";imag[1] = "media/o1_rdy.gif";imag[2] = "media/o2_off.gif";imag[3] = "media/o2_rdy.gif";imag[4] = "media/o3_off.gif";imag[5] = "media/o3_rdy.gif";im = new Array();for (var i = 0; i < imag.length; i++){im[i] = new Image();im[i].src = imag[i];}}

function toggleImage(imgName,num){if (document.images && imgName){

imgName.src = im[num].src;}

return;}


body {background: white url(media/bg.gif);margin-top: 10px}</style>

<base target="content"></head><body marginHeight="0" topmargin="0">

<a href="option1.html"->onmouseover="toggleImage(o1,1);"->onmouseout="toggleImage(o1,0);">

<img height="45" width="100"->src="media/o1_off.gif" border="0"->name="o1">

</a>


<a href="option2.html"->onmouseout="toggleImage(o2,2);"->onmouseover="toggleImage(o2,3);">

<img height="45" width="100" src=->"media/o2_off.gif" border="0"></a><img height="45" width="100"->src="media/o2_off.gif" border="0"->name="o2"><a href="option3.html" onmouseout=->"toggleImage(parent.content.->document.o3,4);" onmouseover=->"toggleImage(parent.content.->document.o3,5);">

<img height="45" width="100" src=->"media/o3_off.gif" border="0">

</a></body></html>


Изменение изображения

1. <img height="45" width="100"->src="media/o1_off.gif" border="0"->name="o1">

Определите изображение и присвойтеему уникальное имя.

2. onmouseover="toggle(o1,1);"В ссылку, созданную для объекта (см.шаг 1), добавьте обработчик событийonmouseover, который будет вызыватьфункцию toggleImage(). Укажите назва-ние изображения, которое требуетсяизменить, а также номер заменяющегоизображения (из массива img[]).

3. onmouseout="toggle(o1,1);"В ссылку, которая вызывает функциюtoggleImage(), включите обработчик со-бытий onmouseout. Укажите названиеизображения, которое требуется изме-нить, а также номер изображения (измассива img[]), сменяющего текущее.Изображению в приведенном коде былоприсвоено имя o1. Каждому изображе-нию, которое будет изменяться, необхо-димо назначить уникальное имя. Когдапосетитель наводит на изображение ука-затель мыши (onmouseover), вызываетсяфункция toggleImage(), в которую пере-дается имя изменяемого изображения –o1 (imgName), а также 1 (1 определяет, чтонадо отобразить rdy-версию кнопки,хранящуюся в массиве img[]).Когда указатель перемещается за гра-ницы области, в которой находитсяизображение (onmouseout), функцияtoggleImage() вызывается снова, чтобыопять изменить изображение o1. Онозамещается изображением, хранящим-ся в imag[0] (off-версией).

Рис. 25.16. Когда посетитель указывает мышьюна кнопку Option 2, изменяется следующаяза ней кнопка

445

Нет ни одного правила, согласно которо-му изображение может изменяться толькопри наведении на него указателя мыши(рис. 25.16). Вы можете использовать обра-ботчик событий onmouseover, который бу-дет изменять совершенно другое изобра-жение на экране. Все зависит от того, ка-кое имя вы передаете при вызове функцииtoggleImage().

Изменение соседнего изображения

1. <img height="45" width="100"->src="media/o2_off.gif" border="0">

Определите изображение и ссылку нанего.

2. onmouseover="toggle(o2,3);"В ссылку, созданную для объекта (см.шаг 1), добавьте обработчик событийonmouseover, который будет вызыватьфункцию toggleImage(). Укажите назва-ние изображения, которое требуетсяизменить, а также номер заменяющегоизображения (из массива img[]).


Определите изображение, которое не-обходимо заменить, и присвойте емууникальное имя.

Вы можете изменять не только те изобра-жения, на которые указывает курсор мыши,но и те, которые находятся в других фрей-мах (рис. 25.17).

Рис. 25.17. При наведении указателя на кнопкуOption 3 изменяется кнопка с таким же названием,находящаяся в соседнем фрейме

Свопинг изображений


Изменение изображения,находящегося в другом фрейме

1. <frameset>Определите фреймы документа, каж-дому из фреймов присвойте уникальноеимя (листинг 25.11).

2. <img height="45" width="100"->src="media/o3_off.gif" border="0">

В файле menu.html определите изобра-жение и создайте ссылку на него (лис-тинг 25.12).

3. ommouseover="toggle(parent.content.->document.o3,4);"

К созданной на шаге 1 ссылке добавьтеобработчик событий onmouseover длявызова функции toggleImage(). Пере-дайте в эту функцию имя изменяемогоизображения, а также номер заменяю-щего изображения (из массива imag[]).Имя изображения должно содержатьпуть к графическому объекту o3, кото-рое находится во фрейме content. Еслиизображение не существует, никакихдействий не выполняется.


В файле option1.html определите изоб-ражение, которое будет изменяться прииспользовании ранее созданной ссылки,и присвойте ему имя.

Что же происходит после активизацииссылки? В следующем разделе будет пока-зано, как создать подсветку кнопки, послеактивизации которой загружается информа-ция, и обеспечить подсветку нужной кнопкипри загрузке определенного содержимого.

Листинг 25.12. В данном примере на страниценаходится изображение, которым можноуправлять при помощи меню

<html><head>

<style type="text/css">body { background: white; }


<h2>Option 1</h2><img height="45" width="100"->src="media/o3_off.gif" border="0"->name="o3">

</body></html>

Листинг 25.11. Данный код описывает двафрейма: в верхнем находится меню, а в нижнем –содержимое

<html><frameset rows="55,*" border="0"->framespacing="0" frameborder="NO">

<frame src="menu.html" name="menu"->scrolling="NO" noresize->marginHeight="0px"->marginWidth="0px"><frame src="option1.html"->name="content" noresize>

</frameset></html>

Допустимо использовать свопинг не толькодля смены одного изображения, но и дляодновременной смены нескольких: в томже обработчике событий вызовите функ-цию несколько раз, передавая ей имена раз-личных изображений.

447

«Умное» менюВ этом разделе рассказывается, как пере-мещаться между двумя изображениямив зависимости от того, где находится ука-затель мыши. Но прежде необходимо со-ставить код, позволяющий выводить наэкран то или иное изображение при за-грузке соответствующей страницы. Дру-гими словами, загружающаяся во фреймстраница сообщает меню название разде-ла, а «умное» меню (smart menu) автома-тически обновляется с учетом получен-ной информации (рис. 25.18).Эта технология предназначена в основномдля сайтов, на которых для создания ин-терфейса используются фреймы.

Создание «умного» меню

1. o1_off.gifСоздайте графическое представлениедля следующих состояний кнопки (лис-тинг 25.13):– off используется, когда кнопка не

выбрана;– rdy применяется при наведении ука-

зателя мыши на кнопку;– on используется, когда кнопка вы-

брана.В зависимости от событий, происходя-щих в данный момент на экране, длякнопки применяется разное графичес-кое отображение.

2. index.htmlСоздайте новый документ с фреймами(листинг 25.14), в котором один фреймпредназначен для меню (ему присваива-ется имя menu), а второй фрейм – дляотображения информации (content).

«Умное» меню

Рис. 25.18. При загрузке файла option1.htmlв меню поступает информация о том, что следуетвыделить кнопку Option 1

Листинг 25.13. Объект меню содержит элементыглавной навигации сайта, а также код JavaScript,позволяющий изменять изображенияи определять нужную кнопку при показесоответствующей информации

<html><head>

<script language="JavaScript">var o1,o2,o3;var optionCurrent;var option;var nowLoaded = 0;

if (document.images){imag = new Array();

imag[0] = "media/o1_off.gif";imag[1] = "media/o1_rdy.gif";imag[2] = "media/o1_on.gif";imag[3] = "media/o2_off.gif";imag[4] = "media/o2_rdy.gif";imag[5] = "media/o2_on.gif";imag[6] = "media/o3_off.gif";imag[7] = "media/o3_rdy.gif";imag[8] = "media/o3_on.gif";

im = new Array();for (var i = 0; i < imag.length; i++)


3. menu.htmlСоздайте новый HTML-файл и сохра-ните его под именем menu.html. Дей-ствия, выполняемые на шагах 4–10, бу-дут относиться к этому файлу.

4. var nowLoaded=0;Введите глобальные переменные, а пе-ременную nowLoaded инициализируйтенулем (false). Страницы, отображаю-щие какую-либо информацию, прове-ряют значение этой переменной, чтобыустановить, было ли загружено соот-ветствующее меню.

5. imag=newArray();Имена используемых файлов хранятсяв массиве imag. Каждое изображениеимеет в нем уникальный номер, начи-нающийся с 0, а не с 1. С его помощьювы можете ссылаться на изображение измассива.

6. im=newArray();Чтобы загрузить какое-либо изображе-ние в окно браузера, применяйте мас-сив im[]. Вызываемая функция при по-мощи массива im[] изменяет объекты,то есть осуществляет их свопинг. Выможете добавлять любое количествоизображений в массив imag[], но каж-дое из них должно иметь уникальныйномер.

7. function toggleImage(imgName,num){…}Напишите на JavaScript функцию tog-gleImage(). Она похожа на одноименнуюфункцию из раздела «Свопинг изобра-жений». Но в этом примере функция оп-ределяет, активно ли изображение, кото-рое необходимо заменить. Если полученутвердительный ответ, то функция невыполняет никаких действий.


{im[i] = new Image();im[i].src = imag[i];

}}

function toggleImage(imgName,num){if (document.images){

if (optionCurrent == imgName.name){ Õreturn;}

imgName.src = im[num].src;}

return;}

function setButtons() { if (document.images) {

option = parent.content.option;optionCurrent = 'o' + option;if (option == 1)->{ document.o1.src = im[2].src }else { document.o1.src = im[0].src }if (option == 2)->{ document.o2.src = im[5].src }else { document.o2.src = im[3].src }if (option == 3)->{ document.o3.src = im[8].src }else { document.o3.src = im[6].src }

}}


body { background: white url(media/->bg.gif); margin-top: 10px; }

</style><base target="content">

</head><body onload="setButtons(); nowLoaded =->1;" marginHeight="0" topmargin="0">

<a href="option1.html"->onmouseover="toggleImage(o1,1);"->onmouseout="toggleImage(o1,0);"->onclick="toggleImage(o1,0);">

<img height="45" width="100"->src="media/o1_off.gif"->border="0" name="o1">

</a>

449

8. function setButtons(){…}

Напишите на JavaScript функцию set-Buttons(). Она активизирует кнопку изменю, соответствующую отображае-мой информации во фрейме содержа-ния. Она также определяет значениепеременной option, которая находитсяв загруженном во фрейм документе.В зависимости от этого значения функ-ция активизирует соответствующуюкнопку меню и отключает остальные.

9. onmouseover="toggle(o1,1);"->onmouseout="toggle(o1,0);"->onclick="toggle(o1,0);"

Создайте ссылки меню и изображения,используя для каждой ссылки обработ-чики событий onmouseover, onmouseoutи onclick. Помните, что каждому изоб-ражению необходимо присвоить имя.

10. onload="setButtons(); nowLoaded=1;"В тэге <body> документа укажите обра-ботчик событий onload, который будетвызывать функцию setButtons() и при-сваивать переменной onLoad значение 1(true).

11. option1.htmlСоздайте необходимое количество стра-ниц для отображения какой-либо ин-формации (листинг 25.15). Все стра-ницы должны содержать код, запи-санный на шагах 12–15.

12. function doNothing(){…}Во все страницы, размещающие со-держание сайта, добавьте функциюdoNothing(). Сама по себе она не вы-полняет никаких действий. Однако привыгрузке страницы эта функция по-могает предупредить ошибку, возни-кающую в некоторых версиях InternetExplorer. Она предотвращает повтор-ный вызов кода JavaScript, когда стра-ница загружается из кэша.


<a href="option2.html"->onclick="toggleImage(o2,3);"->onmouseout="toggleImage(o2,3);"->onmouseover="toggleImage(o2,4);">


</a><a href="option3.html"->onclick="toggleImage(o3,6);"->onmouseout="toggleImage(o3,6);"->onmouseover="toggleImage(o3,7);">


</a></body></html>

Листинг 25.14. В данном примере создаются двафрейма: узкий – для меню в верхней части экрана,широкий – для отображения основнойинформации

<html><frameset rows="55,*" border="0"->framespacing="0" frameborder="NO">

<frame src="menu.html" name="menu"->scrolling="NO" noresize->marginheight="0"><frame src="option1.html"->name="content" noresize>

</frameset></html>

«Умное» меню


13. var option=3На каждой странице с содержимымсоздайте переменную option. Ее значе-ние отвечает за опцию меню, с кото-рой связана конкретная страница.

14. if (top.menu.nowLoaded)->{top.menu.setButtons();}

Используя JavaScript, составьте код,который будет проверять, загруженоли меню, а затем вызывать функциюsetButtons во фрейме menu.

15. onunload="doNothing();"В тэге <body> вашего документа ука-жите обработчик событий onunload,который будет вызывать функциюdoNothing(). Это позволяет определен-ным версиям Internet Explorer занововызывать функции JavaScript, еслистраница загружается из кэша.

Казалось бы, легко изменить текущее со-стояние опции меню на on при наступле-нии события onclick. А если посетителизаходят на страницу, не задействуя соот-ветствующую опцию? Может быть, онивоспользовались путеводителем по сайтуили ссылкой, расположенной на другойстранице, а не в меню, или, что еще веро-ятнее, кнопкой Back стандартной навига-ции браузера. В этих случаях обработчиксобытий onclick не будет вызван, следо-вательно, отображение опции не изменит-ся. Использование рассмотренной вышетехники позволяет убедиться в том, чтодля показываемого содержания всегда вы-бирается нужная картинка в меню.

Листинг 25.15. Каждая страница Web-сайтадолжна содержать следующий код JavaScript.Введите переменную option, чтобы отображатьнеобходимую клавишу из меню навигации

<html><head>

<script language="JavaScript">function doNothing() {}var option = 1;if (top.menu.nowLoaded) {->top.menu.setButtons(); }


body { background: white; }</style>

</head><body onunload="doNothing();">

<h2>Option 1</h2></body></html>

2626262626Специальныеэффекты

Зачем создавать скучные Web-страницы,которые просто занимают место на экра-не в ожидании, что посетитель щелкнетнаконец по какой-нибудь кнопке? В этойглаве рассказывается о некоторых забав-ных эффектах, которые вы способны со-здать, используя CSS и DHTML.Некоторые из этих эффектов вполне мож-но отнести к разряду дурацких Internet-шуточек, но они помогут превратить вашупустынную страницу в висячие сады Се-мирамиды. Однако я хочу предостеречьвас: сайт, перенасыщенный эффектами,может быстро надоесть посетителю.

Специальные эффекты452

БуквицаБуквица – это традиционный стиль оформ-ления начальной буквы первого предложе-ния нового раздела или новой главы книги.Средневековые монахи применяли букви-цы для украшения манускриптов, а вы мо-жете добавить их на страницы своего сайта(рис. 26.1).Чтобы вставить в текст буквицу, следуетувеличить размер первой буквы абзацаи сдвинуть несколько первых строк вправо.

Вставка буквицы при помощи тэга<span>

1. p { font: normal 12px/14px helvetica,->arial, sans-serif; }

Определите тэг абзаца, который вы хо-тите украсить буквицей (листинг 26.1).В рассматриваемом примере используетсяшрифт Helvetica размером 10 пунктови междустрочным интервалом 12 пунк-тов. (Если необходима помощь при выбо-ре размера шрифта, обратитесь к главе 3.)

2. .dropcap {font: bold 300% times, serif;->color: red; float: left;}

Определите класс, который устанавли-вает следующие свойства шрифта: по-лужирный (bold), размер – в три разабольше основного текста. Остальнойтекст будет обтекать справа «усилен-ный» элемент (см. раздел «Обтеканиетекстом» в главе 7).

Рис. 26.1. Буквица

453

Листинг 26.1. Буквица помогает посетителюопределить первый абзац на странице

<html><head>

<style type="text/css">p {font: 12px/14px helvetica,arial,sans-->serif;}.dropcap {

font: bold 300% times,serif;color: red;float: left; }</style>

</head><body>

<h3>CHAPTER VI<br>Pig and Pepper</h3><p><span class="dropcap">F</span>or a->minute or two she stood looking at->the house, and wondering what to do->next, when suddenly a footman in->livery came runningout of the wood -->(she considered him to be a footman->because he was in livery: otherwise,->judging by his face only, she would->have called him a fish)–and rapped->loudly at the door with his->knuckles. </p>

</body></html>

Псевдоэлемент

Более легкий способ создания буквиц – использование псевдоэлементов (pseudo-element) первых букв. Псевдоэлемент – это специфичная, уникальная часть элемен-та, отображением которого можно управлять независимо от остальной его части.Допустимо применять псевдоэлементы первых букв для создания стиля отображе-ния начальной буквы первой строки текста.p:first-letter {font: bold 300% times, serif; float: left;}

Здесь описан псевдоэлемент first-letter, который позволяет задавать отображениепервой буквы.К сожалению, ни Netscape 4, ни Internet Explorer 4 не поддерживают псевдоэлемен-ты. Поэтому использовать их можно только на свой страх и риск.

3. <p> <span class="dropcap">F</span>->or a minute or two …</p>

Чтобы для создания буквицы использо-вать класс dropcap, в HTML-документнужно включить тэг <span>. В данномпримере буквица размером 30 пунктоврасположена на одном уровне с первойстрокой.

В Internet Explorer выравнивание буквицыи основного текста происходит не по верх-ней части, а по нижней (то есть буквы на-ходятся на одной линии). Поэтому буквы,для отображения которых использовалсястиль dropcap, являются не совсем букви-цами.

Буквица


Простая теньЕще один распространенный эффект наWeb-сайтах – создание тени объекта.Тень от текста (особенно от больших за-головков) четко выделяется на странице(рис. 26.2). До появления CSS единствен-ным способом создания теней в Internetбыло использование графического фор-мата; теперь уже нет необходимости пе-реводить текст в графику.

Создание тени при помощи CSS

1. #title {…}В списке правил CSS (листинг 26.2) со-здайте три ID и назовите их title, textи shadow. Первые два должны быть за-даны в относительных координатах,а последний – в абсолютных. Положе-ние верхнего левого угла этих ID нуж-но чуть сместить относительно друг

Рис. 26.2. Эффект тени

Листинг 26.2. Слои текста и его тени расположены в слое заголовка

<html><head>

<style media="screen" type="text/css">#title { font: bold 75px "Hoefler Text", serif, "Times New Roman", Georgia, Times;->position: relative; top: 5px; left: 5px; }#text { position: relative; top: 0px; left: 0px; color: #000000; z-index:2; }#shadow { position: absolute; top: 4px; left: 4px; color: #999999; z-index:1; }


<div id="title"><span ID="text">Alice in Wonderland</span><span ID="shadow">Alice in Wonderland</span>

</div><p>Down, down, down. Would the fall <i>never</i> come to an end! 'I wonder how many->miles I've fallen by this time?'</p>

</body></html>

455

друга (см. раздел «Абсолютные эле-менты, встроенные в относительные»в главе 8).

2. <div id="title">…</div>Создайте слой заголовка. Он содержитслои переднего плана (text) и фона(shadow) и позволяет сгруппировать этиэлементы в один.

3. <span id="text">…</span>В слое title определите слой text длятекста, который будет отображатьсяповерх тени.

4. <span id="shadow">…</span>Затем введите слой shadow – слой тени,который должен содержать такой жетекст, что и слой text.

Браузеры, не поддерживающие CSS, вмес-то текста с тенью отображают простойтекст, зато два раза подряд (рис. 26.3).

Обязательно поэкспериментируйте с раз-личными цветами для тени и шрифтамидля основного текста и текста-тени. С по-мощью СSS и JavaScript можно создаватьпостепенно исчезающие тени (см. следую-щий раздел).

Объемная теньПростой вариант создания тени дает хоро-ший эффект, но все-таки метод, описан-ный ниже, позволяет добиться лучшегорезультата. С помощью этой технологииможно не только размещать тень под тек-стом, но и создать иллюзию текста, при-поднятого над страницей и отбрасывающе-го на нее тень (рис. 26.4).

Рис. 26.3. Так выглядит эффект тенипри просмотре страницы из браузера,не поддерживающего CSS

Простая тень

Рис. 26.4. Может быть, тень и не стольестественная, как созданная с помощьюPhotoshop, но загрузка такого текста занимаетгораздо меньше времени


Создание объемной тени

1. var shadowLength=10;В сценарии JavaScript инициализируйтеследующие переменные (листинг 26.3):– shadowLength определяет количество

повторений текста. Можно изменятьзначение этой переменной. Чем боль-ше значение, хранящееся в ней, темдлиннее будет тень от текста;

– offsetLeft задает величину смеще-ния текста. Допускается изменятьзначение, хранящееся в этой пере-менной, однако если вы хотите полу-чить более ровную и реалистичнуютень, лучше присвоить ей значение 1;

– oL записывает положение левого краякаждого повтора текста. (Текст, длякоторого создается тень, повторяет-ся, с каждым разом смещаясь влево.Он окрашен в цвет, выбранный длятени; таким образом, повторив текстнесколько раз, можно получить до-статочно реалистичную тень.) На-чальное значение данной переменнойдолжно быть нулем;

– oT сохраняет координаты верхнейграницы текста. Переменная опреде-ляет положение левой границы каж-дого повтора текста и должна бытьинициализирована нулем;

– bgR, bgG, bgB. Объявите переменныедля управления красным (bgR), зеле-ным (bgG) и синим (bgB) цветами фона.Вы можете изменять значения этих пе-ременных, но они должны находитьсяв диапазоне от 0 до 255 (см. раздел«Значения и единицы» во введении);

– shR, shG, shB. Задайте переменные длякрасного, зеленого и синего цветовтени. Диапазон значений – от 0 до 255;

Листинг 26.3. В данном примере тень создаетсяпри помощи нескольких слоев, в которыхсодержится один и тот же текст. Цвет слоевприближается к цвету фона, а каждый из нихслегка смещен относительно предыдущего

<html><head>

<script language="JavaScript">var shadowLength = 10;var offsetLeft = 1;var offsetTop = 1;oL = 0;oT = 0;var bgR = 255;var bgG = 255;var bgB = 255;var shR = 0;var shG = 0;var shB = 0;var fgR = 255;var fgG = 0;var fgB = 0;var cR = shR;var cG = shG;var cB = shB;zC = shadowLength;var iR = Math.round((Math.abs(bgR -->shR))/shadowLength);var iG = Math.round((Math.abs(bgG -->shG))/shadowLength);var iB = Math.round((Math.abs(bgB -->shB))/shadowLength);

function colourShift () {if ( cR >= bgR ) { cR -= iR; }else { cR += iR; }if ( cG >= bgG ) { cG -= iG; }else { cG += iG; }if ( cB >= bgB ) { cB -= iB; }else { cB += iB; }

}

function writeLayer(layerPrefix,message){

document.writeln ('<div id="title">')

457

– fgR, fgG, fgB. Определите переменныедля красного, зеленого и синего цве-тов основного текста, для которогосоздается тень. Диапазон значений –от 0 до 255;

– cR, cG, cB записывают значения крас-ного, зеленого и синего цветов для те-кущего слоя. Начальные значенияэтих переменных равны соответству-ющим значениям переменных цветатени, однако с каждым повтором тек-ста данные величины приближаютсяк цвету фона;

– zC сохраняет значение z-индекса длякаждого слоя. Эти переменные долж-ны быть инициализированы тем жезначением, что и shadowLength;

– iR, iG, iB записывают величину инкре-мента для красного, зеленого и синегоцветов соответственно.

2. function colorShift(){…}Напишите, используя JavaScript, функ-цию colorShoft(). Она изменяет пере-менные, контролирующие красный, зе-леный и синий цвета текущего слоя.

3. function writeLayer(layerPrefix,->message){…}

С помощью JavaScript определите функ-цию writeLayer(). Получая имя слояи текст, который необходимо в него за-писать, она создает слой для каждогоповтора.

4. function writeCSS(layerPrefix){…}Введите JavaScript-функцию writeCSS().Получая имя каждого слоя, она создаетдля него CSS, содержащий тень. Приэтом каждый раз после создания новогослоя вызывается функция colorShift()для изменения цвета тени.

Объемная тень


document.writeln ('<span id="text">')document.writeln (message)document.writeln ('</span>')for (var i = 1; i <= shadowLength;->i++) {document.writeln ('<span id="'+->layerPrefix + i + '">')document.writeln (message)document.writeln ('</span>')

}document.writeln ('</div>')}

function writeCSS(layerPrefix) {document.writeln ('#text{')document.writeln ('color: rgb(' + fgR +->',' + fgG + ',' + fgB + ');')document.writeln ('position:->relative;')document.writeln ('z-index: ' + zC + ';')document.writeln ('left: ' + oL + ';->top: ' + oT + ';')document.writeln ('}')for (var i = 1; i <= shadowLength;->i++) {

oL = oL + offsetLeft; oT = oT +->offsetTop; zC = zC - 1;document.writeln ('#'+ layerPrefix +->i + '{')document.writeln ('color: rgb(' +->cR + ',' + cG + ',' + cB + ');')document.writeln ('position:->absolute;')document.writeln ('z-index: ' + zC +->';')document.writeln ('left: ' + oL +->'; top: ' + oT + ';')document.writeln ('}')colourShift();

}}

</script><script language="JavaScript">

document.writeln ('<style type=->"text/css">')


5. document.writeln('<style type=->"text/css">');

Введите код JavaScript, который вписы-вает CSS в тэг <body> документа, исполь-зуя переменные, объявленные на шаге 1для определения цвета фона страницы.

6. writeCSS('shadow');Добавьте вызов функции writeCSS(),передавая в нее имя слоя, в котором со-здается элемент тени.

7. #title{…}Определите правило для CSS. На дан-ном шаге создается элемент тени, за-данный в относительных координатах.

8. writeLayer('shadow', 'Alice In->Wonderland');

В теле документа вызовите функциюwriteLayer(), передайте в нее именаслоев тени и текст, который там необ-ходимо отобразить.

Данный метод используется только в томслучае, если для фона выбран сплошнойцвет, иначе тень будет выглядеть неестест-венно.

Изменяя переменные смещения, вы може-те создавать достаточно оригинальныеэффекты в духе 70-х годов (рис. 26.5).


document.writeln ('body {')document.writeln ('background-color:->rgb(' + bgR + ',' + bgG + ',' +->bgB + ');')document.writeln (' }')writeCSS('shadow')document.writeln ('</style>')


#title { font: bold 75px "Hoefler Text",->serif, "Times New Roman", Georgia,->Times; position: relative; top: 5px;->left: 5px }


<script language="JavaScript">writeLayer('shadow','Alice in Wonder->Land');

</script><p>Down, down, down. Would the fall-><i>never</i> come to an end! 'I->wonder how many miles I've fallen by->this time?'</p>

</body></html>

Рис. 26.5. Объемная тень, для создания которойпеременной offsetLeft присваивается значение 5

459

Фединг HTML-текстаИспользуя принцип формирования объем-ной тени, можно создать исчезающий и по-степенно появляющийся на экране HTML-текст. При этом вам не придется использо-вать анимированные файлы GIF (рис. 26.6–26.8). Однако следует учесть, что данныйметод вызывает ошибки при просмотрестраницы в Netscape 4 для Windows.

Создание текста с федингом

1. <script src="findDOM.js"></script>В любой функции JavaScript, котораянепосредственно располагает объектна экране, необходимо поместить кодfindDOM (см. раздел «Использованиеобщей для браузеров DOM» в главе 11).Для этого запишите его во внешнемтекстовом файле, а затем импорти-руйте файл на нужную страницу (лис-тинг 26.4).

2. var domTop;В коде JavaScript инициализируйте сле-дующие переменные:– domTop записывает объектную модель

документа (DOM) для отображаемо-го слоя;

– domNew сохраняет DOM нового отоб-ражаемого слоя;

– layerAlpha записывает номер теку-щего слоя;

– layerOmega определяет максимальноечисло слоев. Эта переменная контро-лирует количество повторов слоевпри создании фединга текста. Такимобразом, чем больше значение, хра-нящееся в этой переменной, тем бо-лее ровной (и более медленной) бу-дет «проявка» текста;

– layerCurent сохраняет имя (ID) теку-щего отображаемого слоя;

Рис. 26.6. На экране видна только ссылка.Посетитель наводит на нее указатель мыши…

Рис. 26.7. …и текст начинает постепеннопоявляться

Рис. 26.8. В конце концов текст становится виденотчетливо

Фединг HTML-текста


– layerNumberUp записывает номер теку-щего отображаемого слоя, если функ-ция fadeText() отображает текст;

– layerNumberDown определяет номертекущего отображаемого слоя, еслифункция fadeText() скрывает текст;

– delay устанавливает величину задерж-ки между рекурсивными запускамифункции (см. раздел «Повторный за-пуск функции» в главе 14). Это значе-ние можно изменять. Чем больше ве-личина, хранящаяся в данной пере-менной, тем медленнее осуществля-ется фединг;

– fgR, fgG, fgB. Определите переменныедля красного, зеленого и синего цве-тов основного текста. Допускаетсяизменять значения этих переменных,но они должны находиться в диапазо-не от 0 до 255;

– cR, cG, cB записывают значения крас-ного, зеленого и синего цветов длятекущего слоя. Начальные значенияэтих переменных равны соответству-ющим значениям переменных цветатени, однако с каждым повтором тек-ста данные величины приближаютсяк цвету фона;

– iR, iG, iB определяют величину инкре-мента для красного, зеленого и синегоцветов.

3. function fadeText(layerPrefix,->direction){…}

Используя JavaScript, введите функциюfadeText(). Определяя направление фе-динга (0 – «проявка» текста, 1 – обрат-ное действие), она изменяет нужным об-разом переменные и вызывает функциюfadeUp() или fadeDown() в зависимости отзначения переменной direction.

Листинг 26.4. Как и объемная тень, текстс федингом состоит также из нескольких слоев.Каждый слой отображается один раз

<html><head>


var domTop;var domNew;var layerAlpha = 1;var layerOmega = 60;var layerCurrent =null;var layerNumberUp = null;var layerNumberDown = null;var delay = 75;var bgR = 255;var bgG = 255;var bgB = 255;var fgR = 0;var fgG = 0;var fgB = 0;var cR = bgR;var cG = bgG;var cB = bgB;var iR = Math.round((Math.abs(bgR --> fgR))/layerOmega);var iG = Math.round((Math.abs(bgG -->fgG))/layerOmega);var iB = Math.round((Math.abs(bgB -->fgB))/layerOmega);

function fadeText(layerPrefix,direction){

if (layerCurrent == null) {if (direction == 0 ) {

layerCurrent = layerPrefix +->layerAlpha;layerNumberUp = layerAlpha;fadeUp(layerPrefix);

}else {

layerCurrent = layerPrefix +->layerOmega;layerNumberDown = layerOmega;fadeDown(layerPrefix);

}}else {

if (direction == 0 ) {

461

4. function fadeUp(layerPrefix){…}Используя JavaScript, определите функ-цию fadeUp(). Она создает серию слоев,отображая и скрывая каждый по очере-ди. Таким образом текст постепеннопроявляется на экране.

5. function fadeDown(layerPrefix){…}При помощи JavaScript задайте функ-цию fadeDown(). Она создает серию сло-ев, отображая и скрывая каждый поочереди. Текст на экране постепеннорастворяется.

6. function colorShift(){…}Опишите, используя JavaScript, функ-цию colorShoft(). Она изменяет пере-менные, контролирующие красный, зе-леный и синий цвета текущего слоя, ко-торые применяются в CSS.

7. function writeLayer(layerPrefix,->message){…}

Введите функцию JavaScript writeLayer().Получая имя каждого слоя (layerPrefix)и текст, который необходимо в него за-писать, она создает слой для каждого по-втора.

8. function writeCSS(layerPrefix){…}Поместите в сценарий JavaScript функ-цию writeCSS(). Получая имя каждогослоя (layerPrefix), она создает CSS длякаждого слоя, содержащего тень, приэтом каждый раз после создания новогослоя вызывается функция colorShift()для изменения цвета текста.

9. document.writeln('<style type=->"text/css">');

Введите код JavaScript, который вписы-вает CSS в тэг <body> документа, исполь-зуя переменные, объявленные на шаге 1для определения цвета фона страницы.


layerNumberUp = layerNumberDown + 1;layerNumberDown = layerAlpha;fadeUp(layerPrefix);

}else {

layerNumberDown = layerNumberUp - 1;layerNumberUp = layerOmega;fadeDown(layerPrefix);

}}

}

function fadeUp(layerPrefix) {layerPrevious = layerCurrent;layerCurrent = layerPrefix +->layerNumberUp;domTop = findDOM(layerPrevious,1);domNew = findDOM(layerCurrent,1);

domTop.visibility = 'hidden';domNew.visibility = 'visible';domTop.zIndex = '0';domNew.zIndex = '100';layerNumberUp++;if (layerNumberUp <= layerOmega) {

code2run = 'fadeUp("' + layerPrefix->+ '")';setTimeout(code2run,delay);

}}

function fadeDown(layerPrefix) {layerPrevious = layerCurrent;layerCurrent = layerPrefix +->ÕlayerNumberDown;domTop = findDOM(layerPrevious,1);domNew = findDOM(layerCurrent,1);domTop.visibility = 'hidden';domNew.visibility = 'visible';domTop.zIndex = '0';domNew.zIndex = '100';layerNumberDown–;if (layerNumberDown >= layerAlpha) {

code2run = 'fadeDown("' +->layerPrefix + '")';

setTimeout(code2run,delay);}

}

Фединг HTML-текста


10. writeCSS('shadow');Добавьте вызов функции writeCSS(),передавая в нее имя слоя, которое выприменили при создании ID.

11. #title{…}Укажите ID для используемого CSS.В этом пункте создается элемент фе-динга, заданный в относительных ко-ординатах.

12. onmoseover="fadeText('f',0)"Вызовите функцию fadeText(), пере-давая в нее имя (ID) объекта, для ко-торого создается фединг, а также на-правление фединга (определяется пе-ременной direction).

13. <div id="title">…</div>Установите CSS-слой и назовите егоtitle. Введите код JavaScript, начинаяс шага 10.

14. writeLayer('à', 'DHTML Rules');В теле документа вызовите функциюwriteLayer(), передайте в нее имя слоя,которое вы использовали при созданииID, и текст, для которого применяетсяфединг.

Поскольку текст в приведенном примерене является прозрачным, этот метод недаст хорошего результата при использова-нии неоднородного фона страницы.


function colourShift () {if ( cR >= fgR ) { cR -= iR; }else { cR += iR; }if ( cG >= fgG ) { cG -= iG; }else { cG += iG; }if ( cB >= fgB ) { cB -= iB; }else { cB += iB; }

}

function writeLayer(layerPrefix,message) {for (var i = 1; i <= layerOmega; i++) {

document.writeln ('<span id="'+->layerPrefix + i +->'" class="fadeText">');document.writeln (message);document.writeln ('</span>');

}}

function writeCSS(layerPrefix) {for (var i = 1; i <= layerOmega; i++) {

document.writeln ('#'+ layerPrefix +->i + '{');document.writeln ('color: rgb(' +->cR + ',' + cG + ',' + cB + ');');document.writeln ('}');colourShift();}

}</script><script language='JavaScript'>

document.writeln ('<style type=->'text/css'>')document.writeln ('body {')document.writeln ('background-color:->rgb(' + bgR + ',' + bgG + ',' +->bgB + ');')document.writeln ('color: white;')document.writeln (' }')document.writeln ('.fadeText {')document.writeln ('font-size: xx-large;')document.writeln ('font-family: "Arial->Black", Arial, Helvetica, Geneva,->sans-serif;')

463


document.writeln ('position: absolute;')document.writeln ('visibility: hidden;')document.writeln ('top: -12px;')document.writeln ('left: -3px;')document.writeln ('}')writeCSS('f')document.writeln ('</style>')


#title { font: bold 75px "Hoefler Text",->serif, "Times New Roman", Georgia,->Times; position: relative; top: 5px;->left: 5px }


<h2><a href="#"->onmouseover="fadeText('f',0);"->onmouseout="fadeText('f',1);">Fade-></a></h2><div id="title">

<script language="JavaScript">writeLayer('f','DHTML Rules.');

</script></div>

</body></html>

Отслеживание указателямышиКак и полоса прокрутки (см. раздел «Поло-са прокрутки» в главе 25), указатель мышиявляется неотъемлемой частью пользова-тельского интерфейса. К сожалению, немно-гие браузеры позволяют управлять отоб-ражением курсора, что ограничивает фанта-зию Web-дизайнера (см. раздел «Форма ука-зателя мыши» в главе 5).Однако, используя DHTML, несложно со-здать слой, который позволяет отслежи-вать перемещение указателя мыши. В бра-узерах, где можно установить состояниеуказателя в none, допускается заменитьуказатель мыши собственным вариантом(рис. 26.9).

Отслеживание указателя мыши

Рис. 26.9. Эффект прожектора. Черный текст находится на черном фоне. Белое пятноперемещается под текстом, но поверх фона. У посетителя создается впечатление, что, управляямышью, он освещает текст прожектором


Создание объекта,отслеживающего перемещениеуказателя мыши

1. <script src="findDOM.js"></script>В любой функции JavaScript, котораянепосредственно располагает объект наэкране, поместите код findDOM. Для это-го запишите данный код во внешнемтекстовом файле, а затем импорти-руйте файл на нужную страницу (лис-тинг 26.5).

2. var evt=null;Инициализируйте следующие перемен-ные:– evt. Присвойте переменной события

значение null;– isNS. Введите переменную, которая

будет содержать информацию обиспользуемом браузере: 1 – Netscape,0 – другой тип браузера.

3. if (navigator, appName.indexOf->('Netscape') != –1) {isNs=1;}

Укажите браузер, в котором отобража-ется страница, – Netscape или другойтип (см. раздел «Название и версия бра-узера» в главе 12). Присвойте перемен-ной isNS значение 1, если браузер совме-стим с Netscape.

4. function defaultEvents(evt){…}Используя JavaScript, введите функциюdefaultEvents(). Она устанавливаетглобальный обработчик событий (см.раздел «Глобальный обработчик собы-тий» в главе 14). При любом переме-щении указателя вызывается функцияfollowMe().

Листинг 26.5. Глобальный обработчик событийпозволяет отслеживать перемещения указателяи связывать с ними позиционированиеграфического объекта

<html><head>

<script language="javascript"->src="findDOM.js"></script><script language="javascript">

var evt = null;var isNS = 0;

if (navigator.appName.indexOf->('Netscape') != -1) {isNS = 1;}

function defaultEvents(evt) {if (isNS) {

document.captureEvents->(Event.MOUSEMOVE);

}if (isDHTML){

document.onmousemove = followMe;}

}

function followMe(evt) {if (isNS) event = evt;

domStyle = findDOM('spotLight',1);if (event.pageX != null) {

domStyle.left = event.pageX - 150;domStyle.top = event.pageY - 150;return;

}else {

domStyle.left = event.x - 150;domStyle.top = event.y - 150;return;

}}

</script><style media="screen" type="text/css">

#spotLight {position: absolute;top: 20px;left: 20px;

465

5. function followMe(evt){…}В сценарий JavaScript введите функциюfollowMe(). Она перемещает особыйобъект (в рассматриваемом примереобъект spotlight) вслед за указателеммыши, отставание при этом составля-ет 150 пикселов. Так как объект пред-ставляет собой изображение размером300×300 пикселов, указатель появляет-ся в его середине.

6. #spotlight{…}Присвойте объекту, который будет от-слеживать перемещения курсора, IDв абсолютных координатах. Начальныезначения координат верхней и левойграниц объекта не имеют принципи-ального значения, поскольку они бу-дут изменяться при перемещении ука-зателя.

7. onload="defaultEvents(event);"При загрузке страницы необходимо об-рабатывать различные события, для это-го в тэге <body> документа укажите об-работчик событий onload, который бу-дет вызывать функцию defaultEvent().

8. <span id="spotlight">…</span>Определите слой, который будет пере-мещаться вместе с указателем. В рас-сматриваемом примере в нем находит-ся графический объект, но допускаетсяиспользовать HTML-текст, GIF-анима-цию, то есть все, что можно располо-жить в CSS-слое.


z-index: 0;}#content {

font: bold 50px fantasy;position: absolute;top: 100px;left: 100px;z-index: 100;}

body {background-color: black;color : black;cursor: none;}</style>

</head><body onload="defaultEvents(event);">

<span id="spotLight"><img src="spotLight.gif"->width="300" height="300">

</span><div id="content">Are you afraid of->the dark?</div>

</body></html>

Отслеживание указателя мыши


Чем больше объект в слое, отслеживаю-щем перемещения указателя, тем большевремени потребуется компьютеру, чтобыего отобразить, а затем обновить. Такимобразом, перемещение будет происходитьзаметно медленнее и резче, нежели прииспользовании небольшого объекта.

Рис. 26.10. Экран представляет собой информационное «болото», полное беспорядочнорасположенных строк. По нему перемещается управляемое мышью пятно, при помощи которогопосетитель может найти заветную ссылку

Одновременно с этой технологией допус-кается использовать и какие-либо другие,чтобы добиться еще более интересныхэффектов. Можно работать со слоями,имеющими различные z-индексы (см. раз-дел «Элементы в порядке стека (3D-пози-ционирование)» в главе 8), чтобы созда-вать Web-страницы в виде головоломки(рис. 26.10), или использовать PNG-гра-фику (см. раздел «Прозрачная графикав формате PNG»), чтобы отображать кур-сор в виде прицела (рис. 26.11).

Рис. 26.11. Курсор в виде прицела. Здесь была использована PNG-графика, чтобы сделать прицелпрозрачным и создать падающую от него тень. Однако подобного эффекта можно добитьсяне во всех браузерах

467

Движущиеся объектыДанный эффект действительно может при-влечь внимание посетителя. Объекты пере-мещаются по экрану, вращаются, ускоря-ют и замедляют движение. Хотя этот эф-фект и не является верхом совершенства, онвсе-таки очень интересен (рис. 26.12).

Создание движущихся объектов

1. <script src="findDOM.js"></script>В любой функции JavaScript, котораянепосредственно располагает объект наэкране, поместите код findDOM. Для это-го запишите его во внешнем текстовомфайле, а затем импортируйте файл нанужную страницу (листинг 26.6).

2. var tall=200;Инициализируйте следующие перемен-ные:– tall задает высоту области, в которой

будет перемещаться объект. Объектспособен передвигаться на достаточ-но большие расстояния влево и впра-во от положения Xpos. Допускаетсяизменять значение этой переменной.Чем больше хранящееся в ней число,тем дальше от центра (вверх и вниз)может смещаться объект;

– wide определяет ширину области пе-ремещений объекта. Объект способенпередвигаться на достаточно большиерасстояния от положения, определяе-мого Ypos. Допускается изменять зна-чение этой переменной. Чем большехранящееся в ней число, тем дальшеот центра (влево и вправо) может сме-щаться объект;

Рис. 26.12. Буквы перемещаются по странице,пока посетитель не покинет ее

Движущиеся объекты


– step задает величину инкремента дляпеременной nextStep. Допускаетсяизменять значение этой переменной.Чем меньше хранящееся в ней число,тем медленнее будет перемещатьсяобъект;

– delay контролирует продолжитель-ность паузы между запусками функ-ции в цикле (см. раздел «Повторныйзапуск функции» в главе 14). Допуска-ется изменять значение этой перемен-ной; чем больше хранящееся в нейчисло, тем медленнее будет переме-щаться объект;

– nextStep контролирует текущую ско-рость объекта;

– numObjects определяет число плава-ющих объектов. Присвойте этой пе-ременной значение, равное числуобъектов;

– Xpos устанавливает расстояние от ле-вой границы страницы. Объект будетперемещаться относительно даннойточки. Допускается изменять значе-ние этой переменной;

– Ypos записывает расстояние от верх-ней границы страницы. Объект будетперемещаться относительно даннойточки. Допускается изменять значе-ние этой переменной.

3. function objectsFloat(){…}Введите, используя JavaScript, функциюobjectsFloat(). Она изменяет положениекаждого из объектов, используя опре-деленную формулу, которая задает ихтраекторию и тип вращения относитель-но точки Xpos/Ypos. Пока посетитель непокинет страницу, эта функция рекур-сивно вызывается.

Листинг 26.6. Плавающие объекты кружатсяпо эллиптическим орбитам вокруг центра

<html><head>

<script src="findDOM.js"></script><script language=JavaScript>

var tall = 200;var wide = 200;var step = .25;var delay = 50;var nextStep = 0;var numObjects = 6;var Xpos = 200;var Ypos = 200

function objectsFloat() {for (var xx = 1 ; xx < (numObjects + 1) ;->xx++ ) {var objectID = 'object' + xx;domStyle = findDOM(objectID,1)domStyle.top = Ypos +->Math.cos((20*Math.sin(nextStep/->(30+xx)))+xx*70) * tall *->(Math.sin(10+nextStep/10)+0.2) *->Math.cos((nextStep+ xx*55)/10);domStyle.left = pos +->Math.sin((20*Math.sin(nextStep/30))->+xx*70) * wide *->(Math.sin(10+nextStep/(10+xx))+0.2) *->Math.cos((nextStep+ xx*55)/10);}nextStep += step;setTimeout('objectsFloat()', delay) ;}

</script></head><body onload="objectsFloat();">

<div id="object1" style="position:->absolute; left: 300; top: 140;->visibility: visible; font: 136px->times; color:#000000;">D</div><div id="object2" style="position:->absolute; left: 690; top: 240;->visibility: visible; font: 136px->times; color:#333333;">H</div>

469

4. onload="objectsFloat();"В тэге <body> вашей Web-страницы ука-жите обработчик событий onload, кото-рый будет вызывать функцию objects-Float().

5. <div id="object1" style="position:->absolute; left: 300; top: 140;->visibility: visible; font:->136px times; color:#000000;">…</div>

Используя тэг <div>, установите CSS-слои для перемещаемых объектов, при-свойте им ID и укажите необходимыеатрибуты стилей (см. раздел «Добавле-ние CSS в HTML-тэг» в главе 2). Стильопределяет объект в абсолютных коор-динатах и задает начальное положениеверхнего левого угла. Кроме того, онможет содержать любые другие опреде-ления.

В рассматриваемом примере плавающиеобъекты начинают перемещение при по-мощи обработчика событий onload, нодопустимо использовать любой другой об-работчик.

Вы можете помещать в CSS-слой любойобъект, но помните, что чем он больше,тем хуже будет качество анимации.

В данном примере определения каждого изшести слоев находятся в тэге <div>. Но естьи другие варианты: можно создать шестьразличных ID в тэге <style> или исполь-зовать внешний CSS-файл (см. разделы«Добавление CSS на Web-страницу» и «До-бавление CSS на Web-сайт» в главе 2).


<div id="object3" style="position:->absolute; left: 400; top: 340;->visibility: visible;font: 136px times;->color:#666666;">T</div>

<div id="object4" style="position:->absolute; left: 400; top: 340;->visibility: visible;font: 136px->times; color:#999999;">M</div><div id="object5" style="position:->absolute; left: 400; top: 340;->visibility: visible;font: 136px->times; color:#CCCCCC;">L</div><div id="object6" style="position:->absolute; left: 400; top: 340;->visibility: visible;font: 136px->times; color:#FFFFFF;">!</div>

</body></html>

Движущиеся объекты


Прозрачная графикав формате PNGНаиболее перспективным форматом дляграфических объектов, пришедшим насмену GIF, можно назвать PNG (PortableNetwork Graphics – портируемая сетеваяграфика). Он является стандартизирован-ным, непатентованным, кроме того, онподдерживается WЗС и имеет ряд преиму-ществ по сравнению с GIF.Основное достоинство PNG состоит в том,что этот формат позволяет создавать про-зрачные изображения. В формате GIF подоб-ного эффекта добиться нельзя (рис. 26.13).В данном разделе рассказывается, как со-здавать PNG-графику при помощи AdobePhotoshop или Macromedia Fireworks.

Создание PNG-графикипри помощи Photoshop

1. Откройте новый документ в режимеRGB, 72dpi и установите прозрачныйфон (рис. 26.14). Задайте размер изобра-жения.

2. Создайте изображение.Изображение может отбрасывать тени(допускается использовать и другиеэффекты). У слоев может быть различ-ный уровень прозрачности (рис. 26.15).Обрежьте ненужные области созданно-го изображения или примените инстру-мент Ножницы, чтобы получить изоб-ражение нужного размера.

3. Выполните команду File ⇒ Save forWeb (Файл ⇒ Сохранить для Web)Откроется диалоговое окно сохранения.

4. Из ниспадающего меню Settings (Уста-новки) выберите пункт PNG-24, включи-те флажок Transparency (Прозрачность),затем нажмите OK (рис. 26.16). Откроетсядиалоговое окно Save Optimized As (Со-хранить оптимизированный как…).

Рис. 26.13. Оба изображения одинаковы, нопервое было сохранено в формате GIF, а второе –в формате PNG. Заметьте, что изображениев GIF-формате целиком закрывает текст, дажев прозрачной области, в то время как черезизображение в формате PNG вы можетесвободно видеть текст

Рис. 26.14. Диалоговое окно Photoshop. Создаетсяновое изображение: 72dpi, RGB, прозрачный фон

471

5. Введите название изображения.6. Выберите папку, в которой следует со-

хранить изображение (рис. 26.17).

Создание PNG-графикипри помощи Fireworks

1. Откройте новый документ в режимеRGB, 72dpi и установите прозрачныйфон (рис. 26.18). Задайте размер изобра-жения.

Прозрачная графика в формате PNG

Рис. 26.15. Изображение в Photoshop: двапересекающихся круга, прозрачность областипересечения 25%. Круги отбрасывают небольшуютень

Рис. 26.16. Диалоговое окно сохранения для Web.Формат изображение необходимо установитьна PNG-24

Рис. 26.17. Диалоговое окно Save Optimized Asв Photoshop

Рис. 26.18. Диалоговое окно Fireworks. Создаетсяновое изображение: 72dpi, RGB, прозрачный фон


2. Создайте изображение.Изображение может отбрасывать тени(допускается использовать и другие эф-фекты). У слоев может быть различныйуровень прозрачности (рис. 26.19). Об-режьте ненужные области созданногоизображения или примените Ножницы,чтобы получить изображение нужногоразмера.

3. На панели управления отметьте опциюOptimize (Document), установите фор-мат изображения PNG-24 (рис. 26.20).Если вы не можете найти данный пунктна панели управления, выберите Win-dow ⇒ Optimize (Окно ⇒ Оптимизиро-вать).

4. Выполните команду File ⇒ Export Pre-view (Файл ⇒ Экспортный предвари-тельный просмотр).Откроется диалоговое окно (рис. 26.21).

Рис. 26.19. Изображение в Fireworks: двапересекающихся круга, прозрачность областипересечения 25%. Круги также отбрасываютнебольшую тень

Рис. 26.21. Диалоговое окно Export Preview(Предварительный просмотр) в Fireworks. Есливы забыли установить формат изображенияPNG-24, можно сделать это в данном окне

Рис. 26.20. Диалоговое окно Optimize в Fireworks.Необходимо установить формат изображенияPNG-24

473

5. Убедитесь, что для изображения заданформат PNG-24, затем нажмите кноп-ку Export (Экспортировать).

6. Введите имя изображения.7. Укажите папку, в которой следует со-

хранить изображение (рис. 26.22).

Добавление графики в форматеPNG на страницу

1. <img src="image1.png" width="164"->height="116" border="0"

->alt="TwoCircles">

Введите тэг <img> и, используя URL со-зданного вами изображения в форматеPNG, определите файл с изображениемкак источник данных тега (листинг 26.7).Поскольку формат PNG – графичес-кий, вы вполне можете использоватьтэг <img>. Некоторые браузеры не под-держивают данный формат, поэтомув этот тэг рекомендуется включать ат-рибут alt.

К сожалению, у формата PNG есть два ос-новных недостатка, которые мешают сде-лать его общим стандартом. Во-первых,в нем нельзя создавать анимацию, во-вто-рых, он не поддерживается третьими и бо-лее ранними версиями браузеров. В дей-ствительности многие из великолепныхвозможностей, предоставляемых форма-том PNG (в том числе прозрачность), неподдерживаются многими браузерами, ко-торые все же отображают графическиеобъекты, сохраненные в этом формате.

С появлением PNG отпала необходимостьбеспокоиться о цвете созданного вами фо-на. Изображение может приспособитьсяк любому фону.

Рис. 26.22. Диалоговое окно Export в Fireworks

Листинг 26.7. Данный код показываетизображение в формате PNG, помещенноев CSS-слое. Этот слой расположен поверх текста

<html><head>

<style type="text/css">body { color: black; font-size: 14px;->line-height: 16px; font-family: Times,->"Times New Roman", Georgia, serif;->background-color: white; }#overlay { position: absolute; top:->25px; left: 25px; visibility: visible; }


<div id="overlay"><img src="image1.gif" width="164"->height="116" border="0" alt="Two->Circles">

<img src="image1.png" width="164"->height="116" border="0" alt="Two->Circles"></div><p>Quamquam mihi semper frequens->conspectus vester multo->iucundissimus, hic autem locus ad->agendum amplissimus...</p>

</body></html>

Прозрачная графика в формате PNG


Создание часовЕсли вы разрабатываете Web-сайт, гдепользователи должны вводить информа-цию, связанную со временем, или простохотите напоминать посетителям о том, какдолго они находятся на сайте, вы можетевключить в код сайта сценарий, отобража-ющий часы.Часы показывают время, которое беретсяс компьютера посетителя (рис. 26.23). Дан-ная функция не работает в Netscape 6.

Добавление часов на страницу

1. function countThis(){…}При помощи JavaScript определите функ-цию countThis(). Она получает информа-цию о времени из компьютера пользова-теля, преобразует эти данные из внутрен-него формата представления в двенадца-тичасовой и записывает их в CSS-слойcounter. Эта функция вызывается рекур-сивно до тех пор, пока посетитель не по-кинет страницу (листинг 26.8).

2. #clock{…}Создайте ID и назовите его clock. Онопределяет слой, где будет отображать-ся время. Задайте положение слоя настранице, его высоту и ширину в зави-симости от размера шрифта, которыйвы выбрали в clockStyle (см. шаг 3).

3. .clockStyle{…}Создайте класс clockStyle и укажитев нем стиль отображения часов. Часымогут быть большими или маленьки-ми – это зависит от размера шрифта.

Рис. 26.23. Часы отображают время часовогопояса, в котором находится пользователь

475

4. onLoad="countThis();"В тэге <body> вашего документа введи-те обработчик событий onload, которыйбудет вызывать функцию countThis().Данный шаг запускает часы.

5. <div id="clock"></div>Создайте слой для часов. Для этогов тэге <div> укажите для атрибута IDзначение clock.

Описанный способ создания часов сильноотличается от создания кода времени, от-считываемого сервером, или от гринвич-ского времени (GMT), о которых расска-зывалось в главе 23, раздел «Включенияна стороне сервера». Эти часы показыва-ют (и обновляют каждую секунду) мест-ное время, которое берется с компьютерапользователя. Таким образом, если посе-титель неправильно установил время насвоем компьютере, ваши часы также будутпоказывать неверное время.

Листинг 26.8. Данный код рекурсивнозаписывается в слой, при этом каждую секундуотображаемое время обновляется

<html><head>

<script>function countThis(){

if (!document.layers&&!document.all)->return;var Digital=new Date();var hours=Digital.getHours();var minutes=Digital.getMinutes();var seconds=Digital.getSeconds();var dn="am"if (hours>12){

dn="pm"hours=hours-12

}if (hours==0) hours=12;if (minutes<=9) minutes="0"+minutes;if (seconds<=9) seconds="0"+seconds;countDown='<span class=->"clockStyle">'+hours+':'+minutes+':->'+seconds+' '+dn+'</span>';if (document.layers){

document.layers.clock.->document.write(countDown);

document.layers.clock.document.close();}

else if (document.all)->clock.innerHTML=countDown;setTimeout('countThis()',1000);


#clock {position: absolute; top: 10px;->left: 10px; height: 20px; width: 200px;->z-index: 201; }.clockStyle { font: bold 25px->helvetica,arial; }

</style></head>

<body onLoad="countThis()"><div id="clock"></div></body>

</html>

Создание часов

2727272727мультимедиа

С тех самых пор, как Всемирная паутинастала одним из главных средств массовойинформации, ее создатели обещали, чтоочень скоро можно будет работать с муль-тимедийными данными так, как будто онинаходятся на CD-ROM. Время идет, а обе-щание все еще не выполнено.На сегодняшний день не существует спо-соба передачи мультимедийных данных,способного конкурировать с CR-ROM,даже несмотря на то, что при помощиMacromedia Flash можно добиться впечат-ляющих эффектов.С увеличением объема передаваемой ин-формации все чаще стали применятьсяозвучивание и анимация изображений –мультимедиа. Файлы мультимедиа могутсущественно замедлять работу приложе-ния, поскольку требуется много временидля перемещения и обработки таких объ-ектов, даже при достаточно высокой ско-рости некоторых видов Internet-соедине-ний. Кроме того, их применение не прино-сит таких хороших результатов, как ис-пользование телевидения, CD и DVD. Новсе-таки мультимедиа может предложитькачественно более высокий уровень со-здания интерактивных Web-приложений.Остается лишь увеличить пропускнуюспособность Internet-соединений.

В этой главе рассматриваются основы со-здания эффектов мультимедиа на Web-сайте. Здесь не описывается каждый ас-пект использования мультимедийных тех-нологий, а дается лишь обзор некоторыхвозможностей.

477

Использование звукав WebВ браузерах Internet Explorer и Netscapeимеются встроенные средства воспроизве-дения звука, что позволяет использовать наWeb-странице различные аудиофайлы.Можно создать звуковое фоновое сопро-вождение (рис. 27.1), управляемое посе-тителями.В этом разделе рассказывается, как разме-щать звуковые файлы на Web-странице,работая одновременно с тэгами <object>и <embed>. Хотя тэг <embed> наиболее уни-версален при использовании его в любыхбраузерах, тэг <object> является стандарт-ным и в будущем станет применяться го-раздо чаще. Одновременная работа двухэтих тэгов позволит добиться максималь-ной совместимости с любыми версиямибраузеров (листинг 27.1).

Добавление звуковых файловна страницу

1. ambiant.wavСначала необходимо создать звуковойфайл (рис. 27.2). Формат файла можетбыть любым: WAVE (.wav), MIDI (.mid),AU (.au) или QuickTime (.mov).

2. <object>В тэге <body> вашего HTML-документаопределите тэг <object>, открывающийконтейнер объекта.

3. <param name="hidden" value="true">Внутри контейнера определите характе-ристики объекта, используя тэг <param>.В табл. 27.1 перечислены наиболее важ-ные параметры и переменные для созда-ния звука.

Использование звука в Web

Рис. 27.1. Хотя нет ни малейшего видимого намекана то, что эта страница использует звуковоесопровождение, здесь есть аудиофайл,имитирующий звук ветра на другой планете

Листинг 27.1. Звуковой файл находитсяна странице, но управление аудиоэффектомскрыто от пользователей. Требуется несколькотэгов для включения звукового файла настраницу, но только одновременноеиспользование тэгов <object> и <embed>позволяет добиться максимальной совместимостис различными браузерами

<html><head>

<style type="text/css">body { background-image:->url(mars1_pathfinder.jpg); }


<h1>Welcome to my world...</h1><object width="100" height="100">

<param name="hidden" value="true"><param name="loop" value="true"><param name="autostart" value="true"><param name="src"->value="ambiant.wav"><embed src="ambiant.wav" width=->"100" height="100" autostart=->"true" loop="true" hidden="true">

</object></body></html>

Мультимедиа478

4. <embed src="ambiant.wav"->autostart="true"->loop="true" hidden="true">

В контейнере объекта введите тэг <embed>,определите его атрибуты тем же самымобразом, как было сделано на шаге 3.

5. </object>Закройте контейнер объекта.

Время загрузки звуковых файлов можносократить, используя формат MP3, но невсе браузеры поддерживают новые фор-маты звукозаписей.

Чрезмерное увлечение звуковыми эффек-тами при оформлении Web-страницы мо-жет не понравиться вашим посетителямне только из-за длительной загрузки, нои потому, что они часто создают лишь на-зойливый шум.

Анимация в формате GIFКогда в детстве у меня появился первыйблокнот, первое, что я сделал (был 1977год), – это постарался создать мульт-фильм о сражении X-wing и TIE fighter1.Я сначала рисовал одну картинку, затемна следующей странице другую, но уженемного смещенную, чтобы создать впе-чатление, что она двигается. И так далеена нескольких десятках страниц… Затем,быстро пролистывая страницы, я виделрезультат своего творчества: истребительX-wing уничтожал TIE fighter.

Рис. 27.2. Визуальное представление звуковогофайла в программе редактирования звуковыхфайлов

Таблица 27.1. Параметры воспроизведения звука

Имя Возможные Функциязначения

src <url> Обозначениепути к звуковомуфайлу

hidden true, false Отображениепанели управленияна экране

loop true, false Повторвоспроизведения

autostart true, false Воспроизведениес моментазагрузкистраницы

pluginpage <url> Путь к модулюрасширения длявоспроизведениязвука

1 Истребители из фильма «Звездные войны». –Прим. ред.

479

Формат GIF (Graphic Interchange Format –формат обмена графикой) позволяет по-лучать аналогичный тип анимации. Хотясредства, инструменты и метод ее созданиярадикально изменился с 1977 года, но идея,лежащая в основе, осталась той же. Вы со-здаете изображение в одном слое, затемеще одно – в следующем, но уже с неболь-шими отличиями, и т.д. Когда одно изоб-ражение быстро сменяется другим, созда-ется ощущение, что объект движется.Существует множество различных инстру-ментов для создания анимации в форматеGIF. Наиболее удобные встроенные сред-ства имеются в Adobe ImageReady и Mac-romedia Fireworks.

Создание GIF-анимациив Macromedia Fireworks

1. Откройте новый документ необходимогоразмера с разрешением 72dpi (рис. 27.3).Как и при создании любой графики,большой объект увеличивает размерфайла, следовательно, возрастает времязагрузки.

2. В палитре Optimize (Оптимизировать)выберите опцию Animated GIF (Ани-мированный GIF) из выпадающего ме-ню (рис. 27.4).

3. В первом кадре создайте изображение(рис. 27.5).

4. Создайте остальные кадры, затем по-местите в каждый кадр то же изобра-жение, скопировав его из первого кад-ра (рис. 27.6). Используя палитру Fra-me (Кадр), выберите циклический илиоднократный показ анимационногоролика.

5. Затем выберите пункты File ⇒ Export(Файл ⇒ Экспортировать). Откроетсядиалоговое окно Export (Экспорт).

Анимация в формате GIF

Рис. 27.3. Диалоговое окно New Document(Создать документ). Убедитесь, что установленоразрешение 72dpi

Рис. 27.4. При выборе типа изображенияукажите опцию Animated GIF

Рис. 27.5. Первый кадр создаваемой анимации:мяч находится внизу


6. Введите имя изображения (убедитесь,что используется расширение .gif), вы-берите папку, в которой оно будет хра-ниться, и нажмите кнопку Save (Сохра-нить).

Создание GIF-анимациив ImageReady

1. Создайте новый документ необходимогоразмера с разрешением 72dpi (рис. 27.7).Как и при создании любой графики,большой объект увеличивает размерфайла, следовательно, возрастает времязагрузки.

2. В первом кадре создайте изображение(рис. 27.8).

3. Создайте остальные кадры, затем по-местите в каждый кадр то же изобра-жение, скопировав его из первого кад-ра (рис. 27.9). Используя палитру Fra-me (Кадр), выберите циклический илиоднократный показ анимационногоролика.

Рис. 27.6. В последнем кадре мяч находитсяу левого края изображения, обернувшись противчасовой стрелки

Рис. 27.7. Диалоговое окно New Document(Создать документ). Убедитесь, что установленоразрешение 72dpi

Рис. 27.8. Первый кадр создаваемой анимации:мяч находится внизу

481

4. Затем выберите пункты File ⇒ SaveOptimized (Файл ⇒ Сохранить опти-мизированный). Откроется диалоговоеокно Save Optimized.

5. Введите имя изображения (убедитесь,что используется расширение .gif), вы-берите папку, в которой оно будет хра-ниться, и нажмите кнопку Save (Сохра-нить).

Добавление анимациина Web-страницу

1. <img src="redBall.gif" width="50"height="50" border="0">

Анимационный файл в формате GIFпомещается на страницу так же, каки любое изображение в формате GIF(листинг 27.2 и рис. 27.10).

Если у вас нет ни ImageReady, ни Fire-works, воспользуйтесь средствами для со-здания GIF-анимации, имеющимися в Inter-net. Для Mac я рекомендую GIFBuilder,а для Windows – GIF Construction Set (см.приложение 5); эти программы имеютсяна сайте www.download.com.

Помните, что хотя GIF-анимация может за-нимать то же самое место, что и обычныйстатический GIF-файл, каждый фрейм GIF-анимации является полноценным изобра-жением.

Рис. 27.9. В последнем кадре мяч находитсяу левого края изображения, обернувшись противчасовой стрелки

Рис. 27.10. Мяч сначала находится снизу, потомперемещается вправо, наверх, а затем влево.Далее ролик повторяется

Листинг 27.2. В данном коде ссылка <img>на файл GIF-анимации идентична ссылке <img>на любой файл формата GIF

<html><body>

<img src="redBall.gif" width="50"->height="50" border="0">

</body></html>

Анимация в формате GIF


Назначение GIF-анимацииАнимация в формате GIF существует нетак давно, но уже приобрела популяр-ность и довольно часто встречается насамых разных Web-сайтах. И хотя не все-гда такие изображения используются пра-вильно (иногда они создают неприятныеглазу помехи), это все же не означает, чтоGIF-анимация не может сделать страни-цы более информативными, динамичны-ми и привлекательными для посетителей.Необходимо только тщательно проду-мать ее применение, чтобы добиться же-лаемого эффекта.Я разместил несколько примеров GIF-анима-ции на сайте www.webbedenviroments.com/dhtml/gifanimate. Там вы сможете просмот-реть анимационные ролики.JavaScript-визуализация. Обычно JavaScriptслужит для того, чтобы отображать изме-нение кнопок и ссылок, например при на-ведении на них указателя (рис. 27.11). Этотметод позволяет визуализировать события,происходящие на экране (см. раздел «Сво-пинг изображений» в главе 25). Так какизображения находятся в формате GIF, выможете использовать их для создания та-ких «откликов» на действия посетителей.

Я создал два графических изображениякнопки: одно для неактивного состояния,а другое – для активного.

В Netscape 4 возникает ошибка, котораядает о себе знать, если на одной страницеприсутствует слишком много анимирован-ных GIF-файлов.

Фон. Долгое время формат Animated GIFнельзя было использовать в качестве фона;по крайней мере, ролик не прокручивал-ся. Посетитель видел либо первый, либопоследний кадры (это зависело от брау-зера). Теперь браузеры поддерживаютфон в формате Animated GIF (рис. 27.12).Фоновая анимация может отвлекать посе-тителя от содержания Web-страницы, по-этому, применяя ее, не переусердствуйте.

Иллюстрации. Одно из наиболее очевид-ных применений GIF-анимации – иллюс-трировать какой-либо процесс (рис. 27.13).Например, для отображения пошаговыхдействий, таких как установка в компью-тер модуля памяти, крайне трудно исполь-зовать статические изображения. При по-мощи анимации GIF можно более четкоиллюстрировать очередность действий.

Рис. 27.11. Данный пример работает как JavaScript-визуализация, но изображение – это файл в форматеAnimated GIF

483

Показ слайдов. Если вы хотите показать не-сколько изображений в ограниченной обла-сти, используйте GIF-анимацию (рис. 27.14).Вместо показа анимационного ролика раз-местите каждое изображение в отдельномфрейме и установите промежуток времени,в течение которого этот кадр будет отоб-ражаться на экране. Если вы установитециклическое повторение показа слайдов,

Назначение GIF-анимации

ролик может продолжаться до бесконечно-сти. В зависимости от того, какие изобра-жения вы используете, время их загрузкитакже может увеличиться до бесконечнос-ти. Поэтому следует всегда помнить, чтоGIF-анимация состоит из кадров, содержа-щих обычные изображения в формате GIF.Таким образом, их размер влияет на времязагрузки.

Рис. 27.12. Каждый кадр содержит «визуальный шум», который при использовании его в качествефона создает иллюзию просмотра телевизора

Рис. 27.13. Здесь дается подробное описание действий, необходимых для установки чипа памяти в слот


Рис. 27.14. Вот несколько фотографий, которые я сделал в Англии

Flash-анимацияИзначально Flash создавался, как альтер-натива GIF для анимации в Web. Он предо-ставляет гораздо больше возможностей,чем сейчас предлагает GIF. И по сей деньFlash является великолепным средствомдля создания несложной анимации. Допу-стимо использовать его для этих целейвместе с DHTML.На рис. 27.15 показан движущийся лого-тип, созданный при помощи Flash-анима-ции. Это солнечное затмение. Луна мед-ленно перемещается по экрану и затемзаслоняет Солнце.

485

Создание Flash-анимации

1. Создайте изображение в формате Flashили импортируйте векторный графичес-кий объект из любой другой программы,выбрав пункты File ⇒ Import in Flash(Файл ⇒ Импортировать в Flash) –рис. 27.16.

2. В диалоговом окне Import (Импортиро-вать) убедитесь, что вы сохранили слои,хранящиеся в созданном вами файле,затем нажмите OK (рис. 27.17). Все слоидолжны присутствовать на временнойшкале (рис. 27.18).

Flash-анимация

Рис. 27.15. Солнечное затмение, созданноепри помощи Flash-анимации

Рис. 27.16. Средства для рисования во Flashнесколько сложны. Я создал логотип в другойпрограмме, работающей с векторной графикой.Каждый фрейм анимации содержитсяв отдельном слое

Рис. 27.17. Используя диалоговое окно Import,вы можете сохранять слои, созданныев другой программе (в данном случаеFreeHand), при работе над Flash-анимацией


3. Чтобы определить продолжительностьанимации, укажите кадры для каждойточки временной шкалы, затем выбе-рите пункты Insert ⇒ Keyframe (Вста-вить ⇒ Опорный кадр) – рис. 27.19. Наэтом шаге устанавливается конечнаяточка анимации.

Рис. 27.18. Файл был импортирован из FreeHand с сохранением всех использованных слоев

4. Чтобы создать анимацию объекта, выбе-рите первый кадр в слое, который со-держит нужный объект, и переместитеего в начальное положение (рис. 27.20).Если кадр не является текущим опор-ным, выберите пункты Insert ⇒ Key-frame.

487

Рис. 27.19. Flash-анимация создаетсяиз неподвижных кадров, которые припроигрывании в определенной последовательностидают имитацию движения. Во Flash устанавливаютсяопорные кадры, чтобы определить начальнуюи конечную точки воспроизведения. На рисункепродолжительность воспроизведения составляет2,5 с. В качестве опорных определены первыекадры всех трех используемых слоев,а последним является тридцатый кадр (2,4 с)

5. Выделите кадры, находящиеся междуначальным и конечным кадрами ани-мации, затем откройте палитру Frame(Кадр) и выберите пункт Motion (Дви-жение) из ниспадающего меню Tweening(рис. 27.21). Flash вычисляет кратчайшеерасстояние между начальным и конеч-ным положениями объекта и дополняетфайл недостающими кадрами.


Рис. 27.20. Я хотел, чтобы Луна начинала движение от правого нижнего угла, поэтомуначальное положение анимации установлено в первом кадре слоя Луны. Щелкнувпо данному слою, я устанавливаю начальное положение Луны


6. Чтобы просмотреть созданный анима-ционный ролик, выберите пункты Con-trol ⇒ Play (Управление ⇒ Воспроизве-дение). Можно сохранить Flash-файли отредактировать его позже. Чтобы со-здать на его основе Web-анимацию, не-обходимо конвертировать файл в фор-мате Flash в формат Shockwave (.swf).

7. Выберите пункты File ⇒ Export Movie(Файл ⇒ Экспортировать анимацию), наэкране появится диалоговое окно. Вве-дите имя файла (убедитесь, что исполь-зуется расширение .swf), затем щелкни-те по кнопке Save (Сохранить).

8. Нажмите OK.Теперь осталось разместить созданнуюанимацию на Web-странице.

Добавление Flash-анимациина Web-страницу

1. <object>В тэге <body> HTML-документа укажи-те тэг <object>, открывающий контей-нер объекта (листинг 27.3).

2. <param name="movie" value="logo.swf">В контейнере определите параметры объ-екта, используя тэг <pàram>. В табл. 27.2перечислены параметры и значения,необходимые для настройки анимации.

3. <embed>Поместите в контейнер тэг <embed>, опре-делите его атрибуты (см. шаг 2).


Рис. 27.21. Палитра Frame позволяет задатьпостроение промежуточных изображений. Такимобразом вы можете получить недостающиефреймы, которые находятся между двумяопорными

Таблица 27.2. Важные параметры Flash-анимации

Имя Возможные Функцияатрибута значения

movie <url> Обозначение путик файлу .swf

quality best Качествоhigh воспроизведенияauto high анимацииauto lowlow

loop true Повтор анимацииfalse

play true Запуск анимацииfalse сразу после

загрузки страницы

pluginpage <url> Обозначение путик странице,содержащейпроигрывательFlash

489

Может показаться, что дублирование тэговизлишне, однако одновременное исполь-зование тэгов <object> и <embed> позво-ляет достичь максимальной совместимос-ти. Большинство браузеров поддерживаюттэг <embed>, однако тэг <object> такжеявляется стандартизированным и наверня-ка будет применяться в следующих поко-лениях браузеров.

Размеры Flash-анимации автоматическиподгоняются под размеры окна браузера.Я установил атрибуты width и height рав-ными 95%, поэтому анимация занимаетвсю свободную область в окне. Если жезадать 100%, окно браузера «обрежет»края анимации.

Листинг 27.3. Файл формата Shockwave (.swf), созданный во Flash, внедряется в Web-страницу.Анимация занимает все свободное место в окне

<html><head>

<style type="text/css">body { background-color: black }


<div align="center"><object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/->swflash.cab#version=4,0,2,0" width="400" height="400" align="middle"->name="MoonshadowNM">

<param name="loop" value="false"><param name="movie" value="logo.swf"><param name="quality" value="best"><param name="play" value="true"><embed src="logo.swf" type="application/x-shockwave-flash" width="400"->height="400" pluginspage="http://www.macromedia.com/shockwave/download/->index.cgi?P1_Prod_Version=ShockwaveFlash" quality="best" play="true"->align="middle" name="MoonshadowNM" loop="false">

</object></div>

</body></html>

Не только файлы GIF-анимации имеют не-большой размер, существуют анимации,подобные GIF, размер которых гораздоменьше (например, 51 Kб для GIF против5 Kб альтернативного формата).

Flash-анимацию можно использовать длятех же целей, что и GIF-анимацию (см. раз-дел «Назначение GIF-анимации»).



Видео в InternetС середины 90-х годов во Всемирной сетипоявилось видео. Качество и скорость ви-деороликов с тех пор значительно улучши-лись, но все же видео в Сети не сравнить соспутниковым или кабельным телевидени-ем. Но Internet обладает рядом достоинств,которых нет ни у какого другого средствасвязи. Например, не нужно покупать теле-передатчик для трансляции своего видео-сигнала (рис. 27.22).

В Web существуют различные форматыдля передачи изображения: RealMedia, Win-dows Media и MPEG. Далее рассказывается,как использовать формат QuickTime.

Использование видео в форматеQuickTime

1. JocelyWeb.movСначала необходимо создать видеоро-лик в формате QuickTime. Существуетмножество предназначенных для этогопрограмм; я, например, всегда исполь-зую iMovie от Apple (рис. 27.23).

2. <object>В тэге <body> HTML-документа укажи-те тэг <object>, открывающий контей-нер объекта (листинг 27.4).

3. <param name="src" value="->JocelyWeb.mov">

В контейнере определите параметрыобъекта, используя тэг <param>. В табл. 27.3перечислены параметры и значения, при-меняемые для настройки видео в фор-мате QuickTime.

4. <embed>Напишите в контейнере тэг <embed>и определите его атрибуты (см. шаг 3).


Рис. 27.22. Видеоролик воспроизводится в окне.В этом примере средства управления былиудалены. Такая настройка выглядит лучше, нопри этом посетитель не может регулироватьгромкость звука или повторить просмотр ролика

491

Листинг 27.4. Видео в формате QuickTime помещается на Web-страницу. Текст располагается справаот видео

<html><head>

<style type="text/css">body { color: #9c6; font-size: 24px; font-family: "Times New Roman", Georgia, Times,->serif; background-color: #600; text-align: center }


<object style="float: left" width="240" height="180"><param name="loop" value="true"><param name="playeveryframe" value="true"><param name="cache" value="true"><param name="controller" value="false"><param name="autoplay" value="true"><param name="src" value="JocelynWeb.mov"><embed style="float: left" src="JocelynWeb.mov" width="240" height="180"->autoplay="true" controller="false" cache="true" type="video/quicktime"->playeveryframe="true" loop="true">

</object><p>A Day in the Life...<br>Jocelyn Cranford Teague</p>

</body></html>

Может показаться, что дублирование тэговизлишне, однако одновременное исполь-зование тэгов <object> и <embed> позво-ляет достичь максимальной совместимос-ти. Большинство браузеров поддерживаюттэг <embed>, однако тэг <object> такжеявляется стандартизированным и наверня-ка будет применяться в следующих поко-лениях браузеров.

Можно размещать текст вокруг видео (илилюбого тэга <object>), определяя свойствоfloat в тэгах <object> и <embed> (см. раз-дел «Обтекание текстом» в главе 7).

Рис. 27.23. Программа iMovie позволяет быстрои легко создавать видео в формате QuickTimeдля Mac

Видео в Internet


Таблица 27.3. Важные параметры для настройки видео в формате QuickTime

Имя атрибута Возможные Функциязначения

src <url> Обозначение пути к воспроизводимому файлув формате QuickTime

cache true, false Сохранение фильма в кэш-памяти компьютерапосетителя для ускорения просмотра

loop true, false Повтор воспроизведения

autoplay true, false Запуск сразу после загрузки страницы

playeveryframe true, false Показ всех кадров без исключения(может замедлять воспроизведение)

volume от 0 до 100 Управление громкостью

pluginpage <url> Обозначение пути к странице,содержащей проигрыватель QuickTime

В одном файле с видео можно разместитьи звуковое сопровождение, но это увели-чит размер файла.

Если вы хотите больше узнать о созданиивидео в программе iMovie, прочитайте книгуСкотта Смита (Scott Smith) «Making iMovies».

Добавление Java-апплетовЯзык программирования Java позволяетвключать небольшие программы (или ап-плеты) в Web-страницу. В данной книгене рассматривается вопрос о том, как ихсоздавать, но их нетрудно найти в Internetи поместить на свои Web-страницы. ЯзыкJava – великолепное средство, при помо-щи которого можно добавить на Web-сайтсамые разнообразные элементы, напри-мер эти замечательные часы (рис. 27.24).

Рис. 27.24. Часы, созданные при помощи Java,отсчитывают время

493Добавление Java-апплетов

Добавление Java-апплетана Web-страницу

1. BillsClock.classСначала создайте апплет или найдитеего в Internet.

2. <applet>В тэге вашего HTML-документа напи-шите тэг <applet> (листинг 27.5) и ука-жите в нем атрибут code, который со-держит URL апплета JavaScript, а такжесвойства width, height и codebase.

Вы можете найти бесплатные Java-апплетына различных сайтах в Web. Часы, которыеизображены на рис. 27.24, я отыскал насайте Freeware Java (www.freewarejava.com),они созданы Вильямом Джайлом (WilliamGiel).

Работа Java-апплета на компьютере посети-теля зависит от нескольких факторов, в томчисле от уровня поддержки языка Java ис-пользуемой операционной системой.

Листинг 27.5. Тэг <applet> только показываетналичие Java-апплета в коде. НастоящийJava-апплет находится в импортируемомфайле класса

<html><head>

<style type="text/css">body { color: #9f3; font-weight: bold;->font-size: 24px; font-family: Arial,->Helvetica, Geneva, sans-serif;->background-color: #000; text-align:->center }


<applet code="BillsClock.class"->width="300" height="300"->codebase="bills_clock"->alt="Clock"></applet><p>Greenwich Mean Time</p>

</body></html>

Различие между Java и JavaScript

Язык программирования Java разработан компанией Sun Microsystems. Он использу-ется для создания программных продуктов, не требующих наличия Web-браузера.Кроме того, Java применяется для написания апплетов (небольших приложений),которые можно включать в Web-страницу.Язык описания сценариев JavaScript разработан Netscape Communications Corp. Онпредназначен для управления HTML на Web-странице и создавался для использова-ния в браузерах.Языки сценариев и языки программирования могут выполнять сходные задачи. Язы-ки сценариев, как правило, легче выучить, но возможности их применения суще-ственно ограничены.

2828282828отладка кода

Если для создания Web-страниц вы ис-пользуете CSS и DHTML, рано или позднов программах начнут возникать ошибки.Подобных проблем не избежать, так жекак смерти и налогов.Я протестировал код, приведенный в этойкниге, в различных браузерах и операци-онных системах, и надеюсь, что в нем нетошибок. Но вам придется изменять код,выбирая другие переменные, значения,URL и стили. Вы можете совмещать код изразличных примеров или создавать соб-ственные функции.Так или иначе это приведет к возникнове-нию ошибок.В данной главе описаны наиболее общиеошибки, возникающие в кодах, рассказа-но, как быстрее их обнаружить и устра-нить. Надеюсь, что смогу удержать вас отпопытки разнести монитор, если что-то небудет получаться.

495

Обнаружение ошибок CSSВы аккуратно определяете правила табли-цы стилей, запускаете браузер и… не ви-дите никаких результатов! Не беспокой-тесь, такое случается с каждым.

Проверка кода

Существует множество различных вариан-тов ответа на вопрос, почему программа неработает. Большинство ошибок, приводя-щих к тому, что определенные вами CCS-правила не функционируют, очень легковычислить. На рис. 28.1 показаны наиболеечасто встречающиеся ошибки.

Чтобы отыскать ошибку в определенииCCS-правил, необходимо проверить сле-дующее:

все ли определенные вами свойства под-держиваются вашим браузером и опера-ционной системой. Многие свойства неподдерживаются Internet Explorer и/илиNetscape, что зависит от используемойоперационной системы. В приложении 2указана совместимость тех или иныхсвойств с браузером и ОС;нет ли в применяемом вами селектореопечаток. Если вы не поставили в нача-ле определения класса или ID открыва-ющий знак или знак #, правило не бу-дет работать. Помимо этого, следуетизбегать подчеркивания в именах IDили классах, так как Netscape 4 не вос-принимает подчеркивание;

Рис. 28.1. На рисунке представлено несколько самых распространенных ошибок, возникающихпри использовании CSS

Обнаружение ошибок CSS

Отладка кода496

указанные значения используются с со-ответствующими свойствами. Примене-ние неверных значений может привестик ошибке или непредсказуемым резуль-татам;не пропустили ли вы точку с запятой.Если вы не поставили в конце опреде-ления точку с запятой, CCS-правило небудет работать;все определения были начаты и закон-чены фигурной скобкой. Чаще всегопропускают именно фигурную скобку;все многострочные тэги комментариевбыли закрыты. Если тэг не закрыт, тооставшаяся часть CSS-кода рассматри-вается как комментарий (см. раздел«Комментарии в CSS» в главе 2);HTML-тэги в документе введены пра-вильно. Тэг абзаца всегда закрываетсяпри помощи </p>, только таким обра-зом можно добиться корректной рабо-ты CSS (см. раздел «Типы HTML-тэгов»в главе 1);в тэге <style> не должно быть опечаток,если все правила находятся в заголовке.Опечатки в тэге <style> означают, что неустановлены какие-либо определения(см. раздел «Добавление CSS на Web-страницу» в главе 2);при ссылке на таблицу стилей или ееимпорте указан верный файл. Проверьтезаданный вами путь к файлу. Помните,что нельзя включать тэг <style> во внеш-ний CSS-файл (см. раздел «ДобавлениеCSS на Web-сайт» в главе 2);нет повторяющихся или даже противо-речащих друг другу правил для одногои того же тэга. Проверьте каскадныйпорядок (см. раздел «Определение кас-кадного порядка» в главе 2).

Крайние меры

Если вы до сих пор не можете заставитьпрограмму работать, сделайте следующее:

удалите правила и определите их сно-ва. Когда вы не можете понять, в чемкроется ошибка, попробуйте набратьчасть кода заново, чаще всего это по-могает;проверьте код в другом браузере и/илиоперационной системе. Возможно, чтов данной операционной системе илибраузере некоторое свойство не вос-принимается, что и приводит к нерабо-тоспособности кода. Может быть, бра-узер не позволяет использовать опре-деленное свойство в том или ином тэге;отдохните. Шучу, конечно, но взять не-большой пятнадцатиминутный пере-рыв перед очередным штурмом ошиб-ки иногда просто необходимо;если ничего не помогает, попробуйтесделать еще что-нибудь.

497

Проверка CSS-правилаХотя и Dreamweaver, и GoLive проверяютCSS-код, W3С создал сайт, который назы-вается CSS Validator. Он позволяет прове-рять CSS-код на наличие ошибок и соот-ветствие стандартам W3C (рис. 28.2).

Использование CSS Validator от W3C

1. Зайдите на сайтjigsaw.w3.org/css-validator/.

2. Определите метод, при помощи ко-торого вы будете проверять CSS-код(рис. 28.3). Разрешается указать URL(при помощи URI), поместить CSS-коднепосредственно в форму (в текстовуюобласть) или загрузить ваши файлы(при помощи ссылки upload). В данномпримере используется URL.

3. Введите URL Web-сайта или таблицыстилей (рис. 28.4). Я рекомендую ука-зывать URL таблицы стилей.

4. Задайте способ отображения преду-преждений, а также метод проверки(обычно CSS2), затем нажмите кнопкуSubmit This URI for Validation (Под-твердить проверку по этому URI). Про-верка займет несколько секунд. Вы по-лучите полный отчет об ошибках и дру-гих возможных проблемах в CSS-коде(рис. 28.5).

Проверка CSS-правила

Рис. 28.2. Домашняя страница сайта CSS Validator

Рис. 28.3. Я использую CSS Validator, чтобыпроверить файл в режиме online

Рис. 28.4. Я указал URL внешнего файла CSS,используемого на своем сайте


Любой Web-дизайнер способен показать,что лежит в основе его сайта, поэтому вывправе использовать значок CSS (рис. 28.6).Однако только те страницы, которые про-шли подтверждение при помощи CSS Vali-dator, могут содержать значок Valid CSS(рис. 28.7).

Допустимо не проверять CSS браузера,отображающего ваш код, но такая провер-ка иногда позволяет найти ошибки в коде.

Рис. 28.5. Сообщение об ошибках в CSS

Рис. 28.6. Скажите громко и с гордостью:«Сделано с использованием CSS!»

Рис. 28.7. Если CSS-правила прошлипроверку, вы также можете поместитьна странице значок Valid CSS

499

Определение ошибокв коде JavaScriptХотя JavaScript – не настоящий язык про-граммирования, как, например, Java (см.раздел «Различие между Java и JavaScript»в главе 27), он также требует умения логи-чески мыслить и правильно строить после-довательность событий. Вот тут-то и мо-гут возникнуть ошибки.Вам не нужно просматривать код JavaScriptи искать в нем ошибки, в отличие от рабо-ты с CSS-правилом. Большинство браузе-ров выдают сообщения, в которых указы-ваются ошибки, допущенные вами при на-писании кода JavaScript.

Поиск ошибок в коде JavaScript

в Netscape 4 напишите javascript: в ад-ресной строке браузера (рис. 28.8). Наэкране появится окно, в котором отоб-ражаются сообщения о любых ошиб-ках в коде JavaScript (рис. 28.9);в Netscape 6 выберите пункт Tasks ⇒Tools ⇒ JavaScript Console (Задания ⇒Инструменты ⇒ Консоль JavaScript).Откроется окно, где выводятся сообще-ния о любых ошибках в коде JavaScript(рис. 28.10);в Internet Explorer сообщения об ошиб-ках в коде JavaScript отображаются помере их появления, если, конечно, выне отключили соответствующую оп-цию (рис. 28.11).

После того как ошибка найдена, вы може-те исправить ее и проверить код заново.

Определение ошибок в коде JavaScript

Рис. 28.8. Наберите javascript: в адреснойстроке

Рис. 28.9. Экран с сообщениями об ошибкахв Netscape 4

Рис. 28.10. Экран с сообщениями об ошибкахв Netscape 6


Проверка кода

Ниже перечислены наиболее часто встре-чающиеся ошибки:

пропуск фигурной скобки ({}) при на-писании блоков команд. Если не хвата-ет одной из скобок, появится сообще-ние об ошибке;пропуск кавычек (''). В данном случаетакже будет выводиться сообщение обошибке;ссылки на переменные и объекты, неописанные и не инициализированныев коде. Эта ошибка называется проблемойсинхронизации. Если в одном фреймеесть ссылка на несуществующий объектили объект, который еще не загрузился,то при обработке кода возникнет ошиб-ка. Единственным способом найти ее яв-ляется проверка существования пере-менной или объекта, на который указы-вает ссылка. Это можно сделать, помес-тив в код следующую строку:if (document.nextFrame.value1)->{document.nextFrame.value1=x}

Рис. 28.11. Сообщение об ошибке в InternetExplorer

Рис. 28.12. Наиболее часто встречающиеся ошибки в JavaScript

501

использование зарезервированных словкак имен переменных. Некоторые слова,например new, имеют в JavaScript спе-циальное значение и их нельзя приме-нять для обозначения переменной. Та-кое слово используется только в соче-тании с другими словами, напримерnewObject. Список всех зарезервиро-ванных слов приведен в приложении 3;одинаковые имена переменных. Опе-чатка в названии переменной можетпривести к непредсказуемым результа-там. JavaScript также различает и ре-гистр букв, поэтому случайное измене-ние регистра хотя бы одной буквы про-воцирует возникновение ошибок;неправильный порядок и неполный со-став передаваемых при вызове функциипараметров. Программа на JavaScriptв этом случае либо не выполняется,либо ведет себя непредсказуемо. Вы неповерите, но я потратил на отладку кодамного часов, пока не обнаружил, чтопри вызове функции указал неправиль-ный порядок переменных;пропуск круглых скобок, в которые за-ключаются аргументы при использова-нии оператора if. Лично я всегда забываюо скобках. Запомните, что структура опе-ратора условия выглядит следующимобразом: if (argument) doThis;загрузка другого кода. Иногда про-грамма по каким-то причинам не запус-кается. Наилучший способ определе-ния такого типа ошибки – размещениемаркеров alert в ключевых местахкода. Они покажут, какая часть кода за-пускается, а какая – нет. Поместитеследующую строку в ту часть кода,которая, как предполагается, работаетнеправильно: alert('Got Here');. Еслиэта часть кода запускается, должно по-явиться указанное сообщение;

некорректные значения переменных.Иногда переменным присваиваются иныезначения, чем те, которые вы ожидаете.Разместите маркер alert сразу же пос-ле той части кода, где переменной при-сваивается какое-либо другое значение:alert('myVariable='+myVariable);нарушение логической связи. Ну, здесьвсе ясно. Удостоверьтесь, что все напи-санное вами имеет логический смысл.Если в коде программы нарушена логи-ческая связь, не ждите желаемого, всебудет не так (если вообще будет). Прой-дите через весь ваш код так, как если бывы были компьютером. Проконтроли-руйте, что всем переменным присваива-ются корректные значения и в указанноевремя вызываются нужные функции.

При написании кода на JavaScript и HTMLможно использовать как двойные кавычки(""), так и одинарные (''), но я рекомен-дую применять одинарные для JavaScript,а двойные – для HTML. Такое разграниче-ние поможет избежать многих проблем.Лично я делаю гораздо меньше ошибок,придерживаясь этого правила.

В JavaScript существует общепринятая сис-тема обозначения переменных. Вы можетевзять несколько слов, обозначающих объект,с которым связана переменная, и записатьих подряд. При этом первое слово начина-ется с маленькой буквы, а следующие –с большой. Так, например, new object пре-вращается в newObject и т.п.

Определение ошибок в коде JavaScript


Различия междубраузерамиHTML, CSS, JavaScript и объектная модельдокумента (DOM) – все это интерпрети-рованные языки. Каждый браузер можетс легкостью распознать их, устанавливаясоответствующие правила, которые по-могают правильно отображать на экранедействия, определяемые кодом. К сожа-лению, эти правила в той или иной степе-ни варьируются при переходе от браузе-ра к браузеру.Мой друг экспериментировал с CSS насвоем Web-сайте. Параметр line-height(отвечающий за высоту строки) он задалкак normal во всех правилах (см. главу 4).Эта установка выглядела хорошо при рабо-те в Internet Explorer 5 для Windows, а в вер-сии для Mac строки заголовка почему-тоналезали одна на другую. Очевидно, чтопри создании Internet Explorer для Windowsпрограммисты Microsoft решили, что приуказании normal браузер должен использо-вать установленный размер шрифта длякаждой конкретной точки страницы. А раз-работчики Mac-версии при определениипараметра normal указали, что высота стро-ки будет соответствовать какому-то значе-нию размера шрифта по умолчанию. Такимобразом, в Windows параметр line-heightбудет иметь то же значение, что и высотатекста, например 36 пикселов, а в Mac – уста-новленное по умолчанию, то есть 12 пиксе-лов; в результате строчки частично перекры-вают друг друга (рис. 28.13).Я часто сталкиваюсь с такими проблема-ми. Многие из них на самом деле не явля-ются ошибками в программном обеспече-нии: дело в небольших отличиях в интер-претации кода HTML, CSS или JavaScriptразличными браузерами. Это похоже наомонимы в обычном языке, то есть слова,

Рис. 28.13. В Internet Explorer 5 для Windowsзаголовок выглядит нормально, посколькупараметр высоты строки определен как normal.Однако в версии для Mac строки заголовкачастично перекрывают друг друга

503

одинаковые по звучанию и написанию, норазличные по смыслу. Подобные разно-чтения не приводят к катастрофическимпоследствиям, но нервы потреплют изряд-но. Устранить различия в интерпретациистрок кода невозможно, только если высами создадите какой-нибудь браузер, ко-торый все люди мира установят на своикомпьютеры.Попробуйте поставить заплатки на «вза-имные недопонимания» браузеров:

скорректируйте код. Мой друг поступилследующим образом: он выкинул стро-ку line-height: normal из кода, и про-грамма стала работать просто замеча-тельно;подгоните код под операционную систе-му и/или браузер (см. раздел «CSS и опе-рационная система» в главе 22);создайте страницу каким-нибудь дру-гим способом. Например, в Netscape 6возникают проблемы с отображениемфона и границ во вложенных CSS-сло-ях. Если необходимы именно вложен-ные слои, придется отказаться от опре-деленного вами цвета границ;оставьте как есть. Для решения некото-рых проблем не стоит прилагать и ма-лейшего усилия. Если проблема незна-чительная, например в одном браузерепосле тэга <h1> ставится еще несколькоразделителей страницы, а в другом –нет, то не стоит тратить драгоценноевремя на исправление этого недостатка,займитесь лучше чем-нибудь более ин-тересным.

Различия между браузерами

Брюки или нижнее белье?

Когда я был студентом и жил в Лондо-не, я часто посещал один из местныхпабов (один из шести по пути к квар-тире) на берегу Темзы.Однажды я разговаривал со своим дру-гом, а рядом стоял пьяный регбисти постоянно что-то проливал на меня.После того как это произошло не-сколько раз, я встал и начал кричать нанего: «Эй, ты что? Хочешь постиратьмои брюки?» К сожалению, я забыл,что в Британии, в отличие от Америки,слово «pants» (брюки), которое я сказал,означает нижнее белье. Регбист и егошестеро друзей позже попытались ис-купать меня в Темзе. Не делайте такихошибок. Язык может убить!

2929292929БудущеединамическогоInternet

Предположим, вы делаете какую-то рабо-ту – например, решили построить яхту,о которой долго мечтали. И друг любезнопредложил свою помощь. Он измеряетпервую доску и говорит, что следующуюнадо сделать длиной 350,3 см. Вы смотри-те на свою рулетку и видите, что по нейвсе измеряется в дюймах, а не в сантимет-рах. Что же делать? Нет ничего проще:надо разделить число сантиметров на 2,54,и вы получите ту же самую длину, но вы-раженную в дюймах. В результате длинадоски составит что-то около 138 дюймов.Обрежьте доску, и дерзайте дальше!Все эти дюймы, ярды, футы являлись стан-дартами долгое время. Проблема исполь-зования такой системы измерения заклю-чается в том, что в одной миле, например,не целое число ярдов и т.п. Зато в метри-ческой системе все просто: в одном метресто сантиметров (см. раздел «Все из-за не-соблюдения стандартов»).Стандарты – великая мысль человечества.Если бы мы не пытались улучшать нашистандарты, то до сих пор перепрыгивалибы с дерева на дерево, пытаясь выяснить,кому достался самый хороший банан.

Internet-технология, которая вчера каза-лась невозможной, сегодня является стан-дартом. Ошибка – причина постоянногозависания вашего браузера – в будущемтоже способна стать стандартом. Однакоэто реально при условии, что люди, созда-ющие Web, будут пользоваться подобны-ми технологиями.

505

Необходимость стандартовНулевой (гринвичский) меридиан – стан-дарт, помогающий нам определять с высо-кой точностью наше положение на Земле(рис. 29.1). Этот стандарт может использо-ваться везде, он универсален и понятен. Онпомогает морякам бороздить моря и океа-ны, а летчикам ориентироваться в воздуш-ном пространстве. С тех пор как был при-нят данный стандарт, нам открылся мирпутешествий, ставший куда более доступ-ным и безопасным.Идея стандартов лежит и в основе Всемир-ной сети: необходимо обеспечить передачуинформации на любой компьютер, в лю-бую точку планеты, и данные должны отоб-ражаться так, как это было задумано авто-ром. На самой заре Internet существовалтолько один вид HTML. Не возникало ни-каких проблем совместимости: поклонни-ки Сети путешествовали при помощи брау-зера Mosaic, первого графического браузе-ра, который соответствовал всем суще-ствовавшим тогда стандартам.С появлением Netscape возникли и различ-ные дополнения к HTML. Они работалитолько в браузерах Netscape, и все, кто небыл его счастливым обладателем, находи-лись вне игры. Хотя дополнения Netscapeигнорировали стандарты W3C, большин-ство из них, или, по крайней мере, некото-рые версии впоследствии стали частью это-го самого стандарта. Говорят, что с тех порВсемирная сеть стала приходить в упадок.Internet – это одно из самых замечатель-ных изобретений человечества, способ-ствующих общению, со времен, когда лю-ди, живущие в одной деревне, собирались

Необходимость стандартов

Рис. 29.1. Web-сайт королевской обсерваториив Гринвиче (The Royal Observatory Greenwich),www.rog.nmm.ac.uk

Будущее динамического Internet506

вечером у костра и рассказывали другдругу разные истории. Проблема заключа-ется в том, что если не будет стандартовв такой «мировой деревне», как Web, то некаждый сможет «заглянуть на огонек».При создании Web-сайта допустимо ис-пользовать любые оригинальные методи-ки – JavaScript, Flash, QuickTime, VBScript,слои, – но далеко не все посетители уви-дят результат вашего творчества, и такимобразом, вы не пускаете на свой огонекмногих одиноких жителей большой «ми-ровой деревни».Я провел 80% всего времени, потраченно-го на написание программ, пытаясь отла-дить код таким образом, чтобы он рабо-тал как в Internet Explorer, так и в Netscape.И так создаются почти все Web-проекты:большая часть времени отводится на от-ладку кода, чтобы добиться одинаковойработы приложения в различных браузе-рах. Если бы производители браузеровпридерживались единого стандарта, по-добной проблемы бы не возникало.Web-дизайнеру необходимо знать стан-дарты Всемирной сети, по возможностивсегда ими руководствоваться и требоватьих соблюдения от разработчиков браузе-ров. Например, группа The Web StandardsProject (www.webstandards.org) занимаетсяустановлением стандартов, следит, чтобывсе разработчики браузеров придержива-лись существующих правил, в созданиикоторых они также участвуют (рис. 29.2).Присоединяйтесь!

Все из-за несоблюдения стандартов

Из-за несоблюдения стандартов частовозникают проблемы. В качестве при-мера рассмотрим причины потери кос-мического зонда Martian Climat Or-biter. Компания, которая производилазонд, использовала британскую систе-му мер, в то время как NASA – метри-ческую (научный стандарт). В резуль-тате расстояние, которое, как предпо-лагалось, зонд пройдет до Марса, былорассчитано неточно, и он просто раз-бился о поверхность планеты.Вот еще один пример: 22 октября 1707года четыре корабля Королевскогофлота неправильно определили своеположение и разбились у побережьяСицилии, и все из-за несоблюдениястандартов.

Рис. 29.2. Сайт компании The Web StandardsProject, следящей за соблюдением стандартовв Web

507

Extensible Markup LanguageSGML (Standard Generalized Markup Lan-guage – стандартный обобщенный языкразметки) – это, можно сказать, дедушкабольшинства языков разметок, использу-емых как для печати, так и для Internet.SGML – международный стандарт, при-меняемый для определения структурыи внешнего вида документа. SGML слу-жил для создания различных типов доку-ментов в самых разных областях, напри-мер в физике, бухгалтерии, химии и т.д.HTML представляет собой Web-версиюэтого языка, однако по сравнению с SGMLу него есть ряд недостатков. Прежде все-го, HTML не позволяет информироватьбраузер о типе отображаемых данных,кроме как в тэге <meta> (см. главу 24).XML (Extensible Мarkup Language – расши-ряемый язык разметки) – это другая разно-видность SGML (рис. 29.3). В отличие отHTML данный язык позволяет Web-дизай-нерам определять не только структурустраницы, но и типы отображаемой ин-формации. Страница, созданная с его по-мощью, работает подобно базе данных,что значительно упрощает поиск необхо-димых сведений. Поэтому можно с уве-ренностью сказать, что XML – это величай-шее достижение Web-технологий со вре-мен появления HTML.Язык XSL (Extensible Style Language – рас-ширяемый язык стилей) – рис. 29.4, конвер-тирует документы XML в другие типы до-кументов (например, в HTML для исполь-зования в Web). Однако XSL не являетсяаналогом CSS.

Принципы работы XML

Язык XML во многом схож с HTML и CSS.Он состоит из тэгов, которые определяют,каким образом браузер должен работать

Рис. 29.3. Сайт W3C, посвященный XML(www.w3.org/XML)

Рис. 29.4. Страница, посвященная XSL(www.w3.org/Style/XSL)

Extensible Markup Language


с документом. Автор документа пишеттэги, чтобы разбить документ на области.Затем создается файл определения типовдокумента (DTD-файл), в котором ука-зывается, какие имена используются длятэгов, какой тип информации содержиткаждый введенный автором тэг, в какомконтексте применяется тот или иной тэг.Предположим, у вас есть список: Doctor,John Smith, UNIT. На первый взгляд кажет-ся, что каждый элемент списка имеет опре-деленное значение: Doctor – доктор, уче-ная степень, John Smith – Джон Смит, имяи фамилия. Но что же такое UNIT? Крометого, первые два элемента списка могутиспользоваться и в совершенно другомсмысле. Для компьютера эти слова – всеголишь набор букв и цифр, не имеющийникакого значения.Но с помощью XML допустимо определитькаждый из этих элементов и указать доку-менту, где находится соответствующийDTD-файл (листинг 29.1). Затем необходи-мо создать сам DTD-файл (листинг 29.2).Вы также можете задать способы отобра-жения каждого тэга.

С точки зрения графики и дизайна XML ка-жется бесполезным. Конечно, разрешаетсяопределять собственные тэги, однако припомощи CSS сделать это намного проще.Но XML был разработан как основа для со-здания стандартов графики и мультимедиа,находящихся на стадии предложения. Одиниз этих стандартов – SVG, который мы об-судим позже в этой главе (см. раздел«Масштабируемая векторная графика»).

На сегодняшний день XML требует отдель-ной программы синтаксического анализа(небольшого приложения, которое помо-гает браузеру определить вид обработкикода XML). Подобные программы быливключены в Internet Explorer 4/5, но их небыло в составе Netscape 4.

Листинг 29.1. В DTD указано, что identityсостоит из name и organization; name – из realи alias, а real и alias, organization являютсябуквенными символами и цифрами

<!ELEMENT identity (name,organization) ><!ELEMENT name (real,alias) ><!ELEMENT real (#PCDATA) ><!ELEMENT alias(#PCDATA) >

Листинг 29.2. Данный код связываетидентификатор человека с данными real, name,alias и organization. Здесь также содержитсяссылка на DTD-файл identity.dtd, которыйиспользуется для определения тэгов

<?xml version="1.0" ?><!DOCTYPE identity SYSTEM "identity.dtd"><identity><name><real>Doctor</real><alias>John Smith</alias></name><organization>UNIT</organization></identity>

XML, CSS и DOM

В главе 11 рассказывалось, как получитьдоступ к объектной модели документа(DOM). Далее было показано, как при по-мощи DOM изменять HTML-объекты наWeb-странице. Но DОМ применима нетолько к HTML, ее удобно использовать настраницах, созданных при помощи XML.То же самое можно сказать и о работе CSSс XML. В действительности CSS являетсянеотъемлемой частью этого языка раз-метки.

509

Extensible Hypertext MarkupLanguageС помощью языков XML и XSL в Web мож-но добиться очень неплохих результатов,например сделать содержимое страницнезависимым от разметки. Вместо тогочтобы тщательно прорабатывать все дета-ли на каждой странице, можно управлятьразметкой сайта из одного файла.

Но как заставить Web-дизайнеров отказать-ся от привычного HTML и перейти к болеесложному XML? Ответ прост: применитьXHTML (Extensible Hypertext Markup Lan-guage – расширяемый язык разметки гипер-текста).

XHTML представляет собой гибрид недавноусовершенствованного стандарта HTML 4.01(www.w3.org/TR/html40/) и XML. Многие на-деются, что XHTML – самый легкий путьперехода от HTML к XML (рис. 29.5).

XHTML использует определения типовдокумента (DTD), характерные для XMS,и те же тэги, что и HTML DTD. И наконец,на Web-страницах, созданных при помо-щи XHTML, можно размещать и XML-код,причем браузер будет прекрасно пони-мать его даже в том случае, если не под-держивает XML.

Обоснование переходаот HTML к XML

Если стандарты настолько схожи, зачемпереходить от HTML к XML? Вот доводы,приводимые W3C:

буква «X» в XHTML означает extensible(расширяемый). То есть новые воз-можности легче добавлять в XHTML,нежели в HTML. Принцип работы тэ-гов определяется в DTD-файле, а несамим браузером, поэтому XHTML

Extensible Hypertext Markup Language

Рис. 29.5. Сайт, посвященный XHTML(www.w3.org/TR/xtml1/)


обладает более высокой степенью со-вместимости. Следовательно, XHTMLможет быть улучшены в следующихпоколениях браузеров;W3C заявляет, что уже к нынешнемугоду 75% трафика в Web будет прихо-диться на новые типы платформ, такиекак телевизионные Internet-приставки,Palm Pilot, и телефоны. Если сложносоздать HTML для нескольких браузе-ров, представьте, что будет, если надосоздать такой код для десятков различ-ных устройств. Определенно требуетсястандартизованный язык. Кроме того,так как данные устройства имеют не-большие габариты, необходимо ис-пользовать как можно более компакт-ный код, и в этом случае идеальнымвыходом является XHTML.

Консорциум W3C надеется, что если Web-разработчики обратятся к XHTML, то ониначнут использовать все достоинства XML,не отказываясь от столь любимого HTML.На самом деле, если вы знаете HTML, мож-но сказать, что вы знаете и XHTML. Глав-ное, что следует помнить, – каким образомможно (или нельзя) задействовать тэги.В XHTML существует гораздо большеограничений, чем в HTML, однако все этиограничения идут на пользу, они помога-ют создавать более эффективный и лег-кий для понимания код.

Преобразование HTMLв XHTMLИтак, в чем же различие между HTMLи XHTML? XHTML более строг, чем HTML.Он не дает нарушать правила написаниякода или обходиться без них. XHTMLподдерживает те же тэги, что и HTML, такчто перевести ваши страницы с HTML наXHTML будет довольно легко. Достаточ-но помнить несколько простых правил:

не использовать перекрывающиеся тэги.Для многих браузеров не существененпорядок открытия и закрытия тэгов.Следующий код всегда работает пра-вильно:<p> Bad <b>Nesting</p></b>

Однако в XTHML верный порядок рас-положения открывающих и закрываю-щих тэгов будет таким:<p> Bad <b>Nesting</b></p>

тэги и их атрибуты печатаются строч-ными буквами. XML является языком,чувствительным к регистру символов.<li> и <LI> – это различные тэги. Запи-сывайте все тэги и атрибуты строчны-ми символами;всегда используйте закрывающий тэг.Очень часто разработчики Web-страницставят единственный тэг <p> для того,чтобы разделить абзацы. В XHTML выобязательно должны применить закры-вающий тэг, например:<p>Your text</p>

511

кодируйте знак амперсанда (&) в значе-ниях атрибутов специальным выражени-ем. Амперсанд (&) должен быть замененспециальным выражением – &.

Неправильно:

<img src="bill&ted.gif" />

Правильно:

<img src="bill&ted.gif" />

не используйте HTML-комментарий в тэ-гах-контейнерах сценариев и стилей.Один из приемов, описанных в даннойкниге, – постановка HTML-коммента-рия сразу после тэга <script> и <style>.Это необходимо, чтобы спрятать код отустаревших браузеров, не поддержива-ющих его. В XHTML так делать нельзя.

Неправильно:<style><!–p{font: times;}// –></style>

Правильно:<style>p{font: times;}</style>

Скорее всего, будущее Web – за XHTMLи CSS. Однако, пока производители брау-зеров медленно адаптируют свои тво-рения к новым стандартам, консорциумW3C сделал XHTML обратно совмести-мым с HTML.

Преобразование HTML в XHTML

ставьте пробел и слэш в пустых тэгах.Предыдущее правило необязательнодля тэгов, которые не содержат значи-мой части, то есть пустых (например,<br> и <li>). Для корректной обработ-ки таких тэгов браузером необязатель-но ставить закрывающий тэг, достаточ-но просто дополнить открывающийпробелом и слэшем – сделать его «са-мозакрытым», например:<br />

не создавайте вложенных ссылок. Следу-ющий код работать не будет:

<a href="this.html>This<a href=->"that.html">That</a></a>

Правильный порядок:

<a href="this.html>This</a><a href=->"that.html">That</a>

указывайте как атрибут id, так и name.Если вы планируете искать и изменятьэлементы на экране, задавайте них ат-рибуты id и name, например:

<div id="object1" name="object1">…</div>

заключайте значения атрибутов в ка-вычки. Если какой-нибудь тэг имеет ат-рибуты, значения последних должныбыть заключены в кавычки, например:

Неправильно:

<img src=myImage.gif / >

Правильно:

<img src="myImage.gif" / >


Synchronized MultimediaIntegration LanguageSMIL (Synchronized Multimedia IntegrationLanguage – язык интеграции синхронизи-рованной мультимедиа) предназначен длясоздания мультимедиа в Web (рис. 29.6).Подобно тому, как HTML работает с тек-стом и изображениями, SMIL используеттэги для определения файлов мультиме-диа – аудио, видео, текст, статическая гра-фика (извините, пока не умеем передаватьзапахи) – и их положения на странице.Что еще более важно, SMIL позволяет опи-сывать поведение объектов мультимедиапри помощи тех же самых инструментов,что Dreamweaver и GoLive (см. главы 18и 19) для создания DHTML-анимации.Язык SMIL основан на XML – языке, разра-ботанном на базе HTML. Но не надо ду-мать, что SMIL – это HTML либо какое-тоего дополнение или расширение. SMILи HTML представляют собой два совер-шенно разных языка, в них используютсяразличные тэги. В лучшем случае HTMLи SMIL можно считать двоюродными бра-тьями.HTML прекрасно подходит для работыс текстом и статическими объектами, од-нако он не предназначен для созданиямультимедиа, даже если вы применяетеи DHTML, и JavaScript. Здесь необходимименно SMIL, предоставляющий системуописательных тэгов специально для рабо-ты с таким типом данных, включая раз-метку, формат, хронологию и т.д.SMIL позволяет разработчикам управлятьразметкой мультимедиа в документе припомощи CSS. Как и HTML, CSS определяетотдельные элементы на странице, которыепри необходимости можно позициониро-вать, перемещать, отображать, скрыватьи т.п. Это очень похоже на работу JavaScriptи DHTML.

Рис. 29.6. Страница, посвященная SMIL(www.w3.org/AudioVideo)

Главное отличие состоит в способе созда-ния кода SMIL. В CSS все размещалосьв тэге <style>, а в SMIL для этих целей слу-жит тэг <layout>. Он определяет отдельныеобласти экрана, для управления которымииспользуется SMIL.Помимо перемещения объектов может по-требоваться синхронизировать отдельныеэлементы на временной шкале. Если вамкогда-либо доводилось работать с про-граммами для создания мультимедиа, таки-ми как Macromedia Director и MacromediaFlash, либо у вас есть опыт работы на теле-видении или в области производства филь-мов, вы, наверное, знаете принципы исполь-зования временной шкалы. Она определяет,каким образом будет осуществляться со-вместная работа различных мультимедий-ных компонентов.В SMIL включены несколько тэгов, которыепозволяют Web-дизайнерам указывать, ког-да, где и как будет отображаться мультиме-диа. Вы можете устанавливать время запус-ка или остановки клипов мультимедиациклического запуска, а также их цикли-ческое воспроизведение. Вы можете син-хронизировать запуск нескольких клиповпри помощи тэгов, подобных тэгам HTML.

513

Нет необходимости пользоваться сложны-ми языками (например, JavaScript) или до-рогим программным обеспечением.Другое препятствие на пути высококаче-ственного мультимедиа в Web – пропуск-ная способность сетей. В то время как по-сетитель, использующий соединение черезлинии T1, не испытывает трудностей с за-грузкой видео в формате QuickTime, посе-титель, имеющий модем 14,4 Кбит/с, про-сто не сможет открыть страницу.

Каково же будущее SMIL? КонсорциумW3C рекомендует этот язык как стандарт,и, вероятнее всего, он будет принят всемиучастниками World Wide Web.

Масштабируемаявекторная графикаМасштабируемая векторная графика (Sca-lable Vector Graphics – SVG) представляетсобой один из методов создания векторнойграфики в Web (рис. 29.7). SVG позволяетизбежать утомительного рисования каж-дой точки изображения, он описывает сра-зу две точки, а затем соединяет их отрез-ком или частью кривой (с этим вы ужевстречались во Flash).В отличие от Flash, который использует ре-дактор для создания файлов изображенийи скрывает большую часть кода, SVG рабо-тает с разновидностью XML (рис. 29.8). Бо-лее важным является то, что SVG-графикаописывается при помощи DOM и, такимобразом, обладает всеми возможностямиDHTML, рассмотренными в этой книге(рис. 29.9).Формат SVG рекомендован только W3C,и хотя Adobe предлагает SVG-расширениедля браузеров, пока нет ни одного брау-зера, поддерживающего данный формат.В принципе SMIL и SVG готовы нанестиудар по Flash.

Масштабируемая векторная графика

Рис. 29.7. Страница, посвященная SVG(www.w3.org/graphics/SVG)

Рис. 29.8. Код SVG, сгенерированный в AdobeGoLive

Рис. 29.9. Результат выполнения кода,показанного на рис. 29.8. Предварительныйпросмотр в GoLive


CSS третьего уровняВ настоящее время специалисты W3C ра-ботают над следующей версией каскаднойтаблицы стилей CSS – CSS3 (рис. 29.10).В этой версии будут устранены многие не-дочеты CSS2 (www.w3.org/TR/css3-roadmap).Данный стандарт находится все еще настадии предложения, но уже сейчас мно-гие новшества CSS3 позволяют добиватьсяпоразительных результатов:

колонки. Наиболее впечатляющая воз-можность CSS3 – создание гибких коло-нок для разметки страницы. Как упоми-налось в главе 21, CSS не в состояниизаменить таблицы для разметки страни-цы на несколько колонок. Но в CSS3 этанедоработка будет исправлена;шрифты Web. Хотя в CSS2 существуетвозможность загружать шрифты (см.раздел «Загрузка шрифтов» в главе 3),ее пока достаточно трудно использо-вать. W3C намерен устранить даннуюпроблему;профили цветов. Общая проблема всехграфических объектов – различная яр-кость отображения на компьютерах раз-ных типов. CSS3 позволит разработчи-кам Web-приложений решить эту зада-чу, создавая описания цветов;пользовательский интерфейс. В CSS3 по-явится больше указателей, состоянийформ, способов настройки цветовой гам-мы посетителем (см. раздел «Использо-вание стилей посетителя» в главе 3);поведение. CSS3 позволяет применять CSSне только для определения стилей отоб-ражения, но также и для указания пове-дения объектов. Это значительно упро-щает динамическое управление сайтом.

Стандарты теряют всякий смысл, если ихне поддерживают браузеры. Помните, чтоу вас есть право голоса. На сайте The WebStandards Project (www.webstandards.org)вы найдете более детальную информациюо том, как можно помочь в нелегкой борьбеза выпуск программного обеспечения, под-держивающего существующие стандарты.

Рис. 29.10. Будущее Web-дизайна: CSS третьегоуровня

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

○

приложения

ПРИЛОЖЕНИЕ 1 ◆◆◆◆◆ Браузеры, поддерживающие DHTML и CSSБраузеры, поддерживающие DHTML и CSSБраузеры, поддерживающие DHTML и CSSБраузеры, поддерживающие DHTML и CSSБраузеры, поддерживающие DHTML и CSS ............... 516516516516516ПРИЛОЖЕНИЕ 2 ◆◆◆◆◆ Краткая справка о CSSКраткая справка о CSSКраткая справка о CSSКраткая справка о CSSКраткая справка о CSS ..................................................................................................................................................................... 520520520520520ПРИЛОЖЕНИЕ 3 ◆◆◆◆◆ Краткая справка о DHTMLКраткая справка о DHTMLКраткая справка о DHTMLКраткая справка о DHTMLКраткая справка о DHTML ............................................................................................................................................ 529529529529529ПРИЛОЖЕНИЕ 4 ◆◆◆◆◆ Шрифты, поддерживаемые браузеромШрифты, поддерживаемые браузеромШрифты, поддерживаемые браузеромШрифты, поддерживаемые браузеромШрифты, поддерживаемые браузером ................................... 534534534534534ПРИЛОЖЕНИЕ 5 ◆◆◆◆◆ Дополнительные инструментыДополнительные инструментыДополнительные инструментыДополнительные инструментыДополнительные инструменты .................................................................................................... 539539539539539ПРИЛОЖЕНИЕ 6 ◆◆◆◆◆ Дополнительные источникиДополнительные источникиДополнительные источникиДополнительные источникиДополнительные источники ............................................................................................................................. 545545545545545

11111Браузеры,поддерживающиеDHTML и CSS

Если браузер совместим с DHTML и CSS,он должен поддерживать и следующие тех-нологии:

HTML. На HTML основан DHTML.Предпочтительна поддержка последнейверсии HTML 4 (версии 4.01);JavaScript. Если считать HTML основой,фундаментом DHTML, то JavaScriptможно назвать его угловым камнем;CSS первого уровня. CSS поддерживаетнеобходимые функции контроля фор-мата Web-страницы, а также дает воз-можность определять элементы в каче-стве объектов;CSS-позиционирование или CSS второгоуровня. Для перемещения и измененияобъектов браузер должен поддержи-вать создание элементов управления,при этом следует применять либо бо-лее ранний стандарт CSS-P, которыйзатем вошел в CSS2, либо сам CSS2;DOM. Браузер должен поддерживатьобъектную модель документа. Пред-почтительно использование стандарт-ной версии W3C (см. главу 11).

В этом приложении рассматриваются брау-зеры, которые удовлетворяют или будутудовлетворять перечисленным требованиям.

Браузеры, не поддерживающие DHTML

Не все браузеры могут обрабатыватьDTHML-код, особенно это касаетсяпортативных устройств, подключен-ных к сети. Если вы не хотите поте-рять большую часть потенциальнойаудитории, ваши Web-страницы долж-ны работать и без DHTML. Неплохобыло бы протестировать сайт передопубликованием на всех доступныхWeb-браузерах.

517

Internet ExplorerInternet Explorer компании Microsoft сталосновным Web-браузером, через него про-ходит львиная доля информации Internet.Хотя я рекомендую создавать Web-сайты,совместимые почти со всеми браузерамии соответствующие мировым стандартам,скорее всего, большинство людей, посе-тивших вашу страничку, используют однуиз версий Internet Explorer.

Internet Explorer 4

За последние два года применение InternetExplorer 4 значительно сократилось, таккак большинство пользователей перешлина Internet Explorer 5 и 6, которые большесоответствуют стандартам. 4-я версия былапервым конкурентоспособным Web-брау-зером от компании Microsoft. Несмотряна дебаты по поводу включения браузерав операционную систему Windows, InternetExplorer – именно тот браузер, которыйотнял у Netscape часть аудитории.В Internet Explorer 4 реализованы многиестандарты W3C. Хотя браузер не был иде-альным, он стал первым, где DHTML пы-тались построить на базе этих стандартов.Internet Explorer 4 поддерживает HTML,CSS1 (частично), CSS-P (частично), JavaScriptи объектную модель документа (DOM) In-ternet Explorer.

Internet Explorer (Windows)

Internet Explorer 5 был включен в операци-онную систему Windows и теперь занима-ет главенствующее положение на рынкеWeb-браузеров.

Есть некоторое сомнение, что 5-я версияпо сравнению с 4-й была большим шагомв сторону принятия стандартов. Но реали-зация CSS и DOM в Internet Explorer 5 пред-ставлена на более качественном уровне.Таким образом, включив браузер в опера-ционную систему, компания Microsoftразделила пользователей Internet Explorerдля Windows и пользователей других бра-узеров, даже Internet Explorer для Macin-tosh (о нем будет рассказано далее). В дей-ствительности Microsoft не совсем чест-но реализовала некоторые из наиболееважных стандартов, таких как W3C DOMи HTML 4, чем вызвала гнев большинстваразработчиков, например команды проек-та Web-стандартов (Web Standards Project –www.webstandards.org/wfw/ieah.html).Хотя Internet Explorer 5.5 (а позже и вер-сии 6) улучшил реализацию стандартов посравнению с 5-й версией, он основан на та-ких технологиях, как VBScript и ActiveX.У Internet Explorer большое будущее.Internet Explorer 5 для Windows поддер-живает HTML 4 (частично), CSS1 (частич-но), CSS2 (частично), XML (частично),JavaScript, PNG (частично) и W3C DOM(частично).

Internet Explorer 5 (Macintosh)

Несмотря на то что Internet Explorer 5 дляWindows и для Macintosh были разработа-ны Microsoft, у них не так много общего.Обе версии – Web-браузеры, и обе называ-ются Microsoft Internet Explorer 5. Но наэтом их сходство заканчивается. InternetExplorer 5 для Macintosh отличается от вер-сии для Windows так же кардинально, какMacOS отличается от Windows.

Браузеры, поддерживающие DHTML и CSS

Приложение 1518

Первое, что вы видите при запуске InternetExplorer, – указатель на то, что интерфейссоответствует Macintosh. Браузер не толькоимеет новый графический пользовательскийинтерфейс, но и обладает всеми преимуще-ствами Macintosh. В отличие от более ран-них версий, которые были всего лишь пере-несены с платформы Windows, Internet Ex-plorer 5 полностью переписан для Macintosh.С точки зрения разработчика, Internet Ex-plorer 5 для Macintosh является важнымшагом вперед не потому, что в нем пред-ставлены новые технологии (как в Netscapeпоявились фреймы и JavaScript), а потому,что он полностью соответствует требовани-ям системы.Internet Explorer 5 для Macintosh поддер-живает HTML 4, CSS1, CSS2 (частично),XML, JavaScript, PNG и W3C DOM.

Netscape NavigatorХотя компания, создавшая этот замеча-тельный, инновационный программныйпродукт, была поглощена компанией Ame-rica Online, Netscape всегда останется в па-мяти пользователей, как и браузер, кото-рый сделал Сеть настолько популярной.3-я версия Web-браузера уже была пере-именована в Navigator. Но я называю егопросто Netscape – по имени создавшейего компании.

Netscape 4

Более четырех лет Netscape 4 оставалсяглавным Web-продуктом компании Netsca-pe и применялся многими Web-разработ-чиками, хотя не полностью поддерживалWeb-стандарты. Большинство используе-мых сегодня стандартов в то время либо

не существовали, либо только начиналипоявляться.

Netscape 4 внес в создание сайтов свою«изюминку» – DHTML, основанный на тэге<layer> (см. главу 16). Этот метод так и нестал популярным, и впоследствии Netscapeотдала предпочтение развитию стандартов,устанавливаемых W3C.

Netscape 4 поддерживает HTML, CSS1 (час-тично), CSS-P (частично), JavaScript и Net-scape Layers DOM.

Netscape 6

Netscape 6 (именно 6, а не 5) был создан набазе движка Gecko, разработанного в соот-ветствии с последними стандартами Web.Для Web-дизайнеров, мучительно пытаю-щихся создать сайты для несовместимыхWeb-браузеров, это явилось настоящей на-ходкой.

Gecko – замечательный инструмент, ком-пактный, удивительно быстрый и наибо-лее соответствующий стандартам. Его со-здатели должны гордиться своей работой.

Но интерфейс браузера переполнен раз-личными меню, кнопками и опциями,расположенными без четкой иерархии.Многие меню в нижней части экрана неболее чем ссылки на Web-страницы Net-scape. Я не смог найти способ изменитьэти ссылки для удовлетворения потреб-ностей пользователей. Хотя возможностьсоздания собственного бокового меню –шаг в правильном направлении, она, ка-жется, существует исключительно длятого, чтобы пользователи заходили насайты Netscape и ее компаньонов, а не дляобеспечения удобного и настраиваемогоинтерфейса.

519Браузеры, поддерживающие DHTML и CSS

Netscape 6 поддерживает HTML 4, CSS1,CSS2 (частично), XML, JavaScript, PNG (час-тично) и W3C DOM.

Другие браузерыВерите вы или нет, но существуют и дру-гие браузеры, кроме Netscape и InternetExplorer. Хотя при построении DHTML-со-ставляющей Web-сайта в первую очередьстоит подумать именно об этих браузерахи вспомнить о двух конкурентах: Opera(Mac/Windows) и iCab (Mac).

Opera (Mac/Windows)

Компания Opera Software (www.opera.com)поставила перед собой цель – создать бра-узер, полностью соответствующий стан-дартам. В 5-й версии компания Opera наи-более близко подошла в своей цели. Хотяи этот браузер несовершенен, Opera счи-тает, что стандарты W3C являются не про-сто пожеланиями, а руководством к дей-ствию.К тому же браузер Opera достаточно ком-пактен (нужно загрузить всего лишь 2 Мббез Java), страницы загружаются поразитель-но быстро, уровень безопасности высок.Хотя изначально Opera предназначалсятолько для Windows, компания добавилаподдержку некоторых других платформ(включая EPOC, Linux и MacOS), он такжеможет работать на любой версии BeOS. Насегодняшний день версия для Macintoshвсе еще тестируется; кажется, некоторыестандарты либо пропущены, либо не пол-ностью реализованы.

Opera 5 поддерживает HTML 4, CSS1, CSS2(частично), JavaScaipt, XML и W3C DOM(частично).

iCab (Mac)

Браузер iCab (www.icab.de) так же, как и Ope-ra, компактен: загружается всего лишь 900 Kб.Он обладает хорошей скоростью, стра-ницы появляются сразу после щелчка поссылке. У iCab гораздо больше опций, чему всех браузеров, которые я когда-либо ви-дел. Его создатели четко придерживалисьстандартов, дословно следуя рекоменда-циям W3C. Он предоставляет пользователюсамые разнообразные возможности (или,по крайней мере, будет предоставлять, ког-да закончится его тестирование). На се-годняшний день браузер находится настадии разработки, кроме того, ему нехватает определенных ключевых возмож-ностей, таких как CSS и полная поддерж-ка JavaScript.Какая же крупная корпорация трудитсянад созданием этого великолепного браузе-ра? На самом деле iCab придумал немец-кий программист Александр Клаус (Ale-xander Clauss) и несколько его друзей.Хотя браузер полностью соответствуетстандартам W3C, скорее всего, вы не бу-дете ежедневно пользоваться бета-версиейiCab, так как она не полностью поддержи-вает JavaScript, CSS или DHTML. Но в бу-дущем планируется включить в браузерне только эти возможности, но и многиедругие.iCab поддерживает HTML 4 и JavaScript(частично), в следующих версиях предпо-лагается добавить CSS1 и CSS2.

22222Краткаясправка о CSS

В главах 3–9 говорится о свойствах, кото-рые можно использовать с CSS. В данномприложении они представлены более чет-ко. Также предлагается информация о свя-зях свойств и HTML-тэгах, по отношениюк которым это свойство может быть при-менено:

табл. П2.1 описывает управление шриф-том (см. главу 3);табл. П2.2 представляет форматирова-ние текста (см. главу 4);табл. П2.3 содержит сведения об управ-лении списком и курсором (см. главу 5);табл. П2.4 описывает управление цве-том и фоном (см. главу 6);табл. П2.5 содержит информацию обуправлении разметкой страницы (см.главу 7);табл. П2.6 описывает регулированиеположения (см. главу 8);табл. П2.7 представляет управление ви-димостью (см. главу 9);табл. П2.8 содержит описание псевдо-элементов и псевдоклассов (см. главы 24и 26);

521Краткая справка о CSS

Краткая справкаДалее помещена информация о том, какопределенное свойство можно применитьк различным тэгам HTML. Каждое свой-ство описывается таким образом: с какимтэгом его используют, связано ли оно с до-черними элементами, какими браузерамии операционными системами оно поддер-живается.Свойства, которые помечены значком Pв столбце, относящемся к браузеру, час-тично реализованы в одной или обеих опе-рационных системах. Я бы не рекомендо-вал их использовать.Не забывайте, что у каждого браузера естьнесколько версий, причем порядковый но-мер у них может совпадать. Например, несуществует Netscape 4, а есть нескольковерсий (4.06, 4.5 и 4.7), не сильно отличаю-щихся друг от друга. В этом приложениипредставлена только проверенная инфор-мация, но если вы все-таки захотите про-тестировать CSS-возможности своего бра-узера, попробуйте применить специальнопредназначенный для этого инструмент отW3C, который вы найдете на сайте http://www.w3.org/Style/CSS/Test/.

Легенда

для Macintosh и Windows;ни для одной, ни для дру-гой системы;

W только для Windows;M только для Macintosh;P некоторые проблемы;Все свойство можно применять

ко всем тэгам HTML;Разметка свойство может быть ис-

пользовано только для тэ-гов, относящихся к размет-ке страницы;

Линейный свойство можно применитьтолько к inline-тэгам;

Выделение полужирным показывает,каково значение свойства по умолча-нию.

Краткая справка о CSS


Таблица П2.1. Управление шрифтом

Наименование Значение Применимо к Унаследованное N4 N6 IE4 IE5

font-family <family-name> Все Даserifsans-serifcursive Mfantasy Mmonospace

font-style normal Все Даitalicoblique

font-variant normal Все Даsmall-caps P

font-weight normal Все Даboldbolder Wlighter100-900*

font-size <length> Все Да<percentage>smaller Plarger PXX-small PX-small Psmall Pmedium Plarge PX-large PXX-large P

font <font-style> Все Да<font-variant> P<font-weight><font-size>/ P<lineheight><font-family>

* Требует наличия на компьютере пользователя специальных шрифтов.


Таблица П2.2. Форматирование текста


word-spacing normal Все Да М М<length> М М

letter-spacing normal Все Да<length>

vertical-align baseline Линейный Нет<percentage> М*subsupertop М**text-top М**middle М**bottom М**text-bottom М**

line-height normal Все Да<number><length> P<percentage> P

text-decoration none Все Нетunderlineoverlineline-thoughblink

text-transform none Все Даcapitalizeuppercaselowrcase

text-aling left Разметка Даrightcenterjustify P W

text-indent <length> Разметка Да<percentage>

white-space normal Разметка Да **pre *nowrap **

* Только для MacOS, в Windows недоступно.

** IE5.5 для Windows.


Таблица П2.3. Управление списком и курсором


list-style-tipe disk Все* Даcirclesquaredecimallower-romanupper-romanlower-alphaupper-alpha

list-style-image none Все* Даurl(<url>)

list-style-position outside Все* Даinside

list-style <list-style-type> Все* Да<list-style-->position><list-style-image>

cursor auto Все Даcrosshairhand**pointermoven-resizene-resizee-resizese-resizes-resizesw-resizew-resizenw-resizetextwaithelp

* В Netscape и IE относится лишь к тэгу <list>. По стандарту CSS может применяться толькок тэгу, имеющему в своем описании атрибут display со значением _list_item (display:_list_item).

** Только в IE. Аналогично значению pointer.


Таблица П2.4. Управление цветом и фоном


color <color> Все Да

background-color transparent Все Нет<color>

background-image none Все Нетurl (<url>)

background-repeat repeat Все Нетrepeat-x Prepeat-y Pno-repeat

background- scroll Все Нетattachment fixed

background-position <percentage> Разметка Нет<length>topcenterbottomleftcenterright

background <background- Все Нет->color><background-->image><background-->repeat><background-->attachment><background-->position>


Таблица П2.5. Управление разметкой страницы


margin-top, -right, <length> Все Нет P P-bottom, -left <percentage> P P

auto P P *margin <length> Все Нет

<percentage>auto

padding-top, -right <length> Все Нет P P-bottom, -left <percentage> P P

padding <length> Все Нет P P<percentage> P P

border-color <color> Все Нет P

border-style none Все Нетdotted М *dashed М *soliddoublegrooveridgeinsetoutset

margin-top, -right, medium Все Нет P-bottom, -left <length> P

thin Pthick P

border-width medium Все Нет P<length> Pthin Pthick P

margin-top, -right, <border-width> Все Нет P-bottom, -left <border-style> P

<color> P

border <border-width> Все Нет P P<border-style> P P<öâåò> P

width auto Разметка Нет P P<length> P P<percentage> P P

height auto Разметка Нет P<length> P

float none Все Нетleft P Pright P P


Таблица П2.6. Регулирование размещения


position static Все Нетabsoluterelativefixed *

left auto Все** Нет<length><percentage>

top auto Все** Нет<length><percentage>

bottom auto Все** Нет<length><percentage>

right auto Все** Нет<length><percentage>

z-index auto Все Нетnumber

* Только в MacOS, в Windows недоступно.

** Атрибут position должен иметь значение absolute или relative.

Таблица П2.5. Управление разметкой страницы (окончание)


clear none Все Нетleft P Мright P Мboth

display block Все Нет Pinline Wlist-item P М Мnone

* Только IE5.5 для Windows.


Таблица П2.7. Управление видимостью


clip auto Все* Нет<shape>

overflow visible Все* Нетhiddenscrollauto

visibility inherit Все Да**visiblehiddenhideshow

* Атрибут position должен иметь значение absolute или relative.

** Когда атрибут visibility имеет значение inherit.

Таблица П2.8. Псевдоклассы и псевдоэлементы


:link – Якорь Да

:active – Якорь Да

:visited – Якорь Да

:hover – Все Да

:first-line – Разметка Нет *

:first-letter – Разметка Нет *

* Только IE5.5 для Windows.

33333Краткая справкао DHTML

В главе 11 описаны наиболее часто приме-няемые обработчики событий, которымивы регулярно будете пользоваться при по-строении своих Web-страниц. А в главе 12дана подробная информация о среде вы-полнения браузера и соответственно ва-шего сайта. Эти сведения структурирова-ны в таблицах данного приложения.


Таблица П3.1. Основные обработчики событий

Имя Когда происходит событие Применимо к

onLoad После начала загрузки объекта Документы и изображения

onUnload После окончания загрузки объекта Документы и изображения

onFocus Когда элемент выделен Документы и формы

onBlur Когда выделение с объекта снято Документы и формы

onMouseOver Когда указатель мыши находится над областью Все*

onMouseOut Указатель мыши больше не находится Все*над областью

onCliuck При щелчке мышью по области Все*

onMouseDown Пока кнопка мыши нажата Все*

onMouseUp Когда кнопка мыши отпущена Все*

onMouseMove Во время движения курсора Документ

onKeyDown Пока клавиша на клавиатуре нажата Документы и формы

onKeyUp Когда клавиша на клавиатуре отпущена Документы и формы

onKeyPress Когда клавиша нажата и сразу отпущена Документы и формы

onResize** При изменении размера окна браузера или кадра Документ

OnMove*** Во время перемещения окна браузера Документ

* Доступно только для ссылок и изображений в Netscape 4.

** Не поддерживается в IE4.

*** Не поддерживается в IE4/5 и Netscape 6.

Таблица П3.2. Свойства системы

Параметры поиска Имя Значение Совместимость

Операционная система navigator.appVersion <string> IE3, N2

Ширина экрана (всего) screen.width <pixels> IE4, N4

Высота экрана (всего) screem.height <pixels> IE4, N4

Ширина экрана (текущая) screen.availWidth <pixels> IE4, N4

Высота экрана (текущая) screen.availHeight <pixels> IE4, N4

Количество цветов screen.colorDepth <number> IE4, N4

Таблица П3.3. Свойства браузера


Имя браузера navigator.appName <string> IE3, N2

Версия браузера parselnt(navigator.appVersion) <number> IE3, N2

Ширина окна браузера window.outerWidth <pixels> N4

Высота окна браузера window.outerHeight <pixels> N4

531Краткая справка о DHTML

Таблица П3.4. Параметры страницы


Ссылка self.location <string> IE3, N2

Заголовок document.title <string> IE3, N2*

Ширина видимой части window.innerWidth <pixels> N4document.body.clientWidth <pixels> IE4

Высота видимой части window.innerHeight <pixels> N4document.body.clientHeight <pixels> IE4

Положение документа window.pageXOffset <pixels> N4при прокрутке влево document.body.scrollLeft <pixels> IE4

Положение документа window.pagtYOffset <pixels> N4при прокрутке вверх document.body.scrollTop <pixels> IE4

* Ошибка в Netscape 4 для MacOS: вместо заголовка возвращает имя файла.

Таблица П3.5. Параметры объекта


Widht offsetWidth <length> IE4, N6width <length> N4

Height offsetHeight <length> IE4, N6height <length> N4

Left Position offsetLeft <length> N6pixelLeft <length> IE4left <length> N4

Top Position offsetTop <length> N6pixelTop <length> IE4top <length> N4

Z-index zindex <number> IE4, N4

Visibility visible IE4, N4hidden IE4, N4show N4 (только)hide N4 (только)

Clip clip[] <array> IE

Clip Top clip.top <pixel> N4*

Clip Left clip.left <pixel> N4*

Clip Bottom clip.bottom <pixel> N4*

Clip Right clip.right <pixel> N4*

Clip Width clip.width <pixel> N4*

Clip Height clip.height <pixel> N4*

* Хотя в IE можно обрабатывать величины ограничений, здесь необходимо обрабатывать мас-сив (см. главу 12).


Служебные словаПри создании класса CSS, ID CSS илиимен переменных JavaScript не забывайте,что у браузера есть слова, зарезервиро-ванные для определенных целей. Я не ре-комендую их использовать.Допустимо применять служебные словав сочетаниях слов. Например, new и label –не совсем удачные имена для переменных,а newLabel – отличный вариант.

Служебные слова JavaScript и Java

Ниже приводятся служебные слова языкаJavaScript или Java, в любом случае лучшеих не употреблять.

abstract finally shortboolean float staticbreak for superbyte function switchcase goto synchronizedcatch if thischar implements throwclass import throwscomment in transientconst instanceOf truecontinue int trydebugger interface typeofdefault label vardelete long voiddo native whiledouble new withelse nullenum packageexport privateextends protectedfalse publicfinal return

533Краткая справка о DHTML

Другие слова, которых следуетизбегать

Хотя официально эти слова не входятв список служебных слов, они применя-ются в JavaScript. Их использование мо-жет приводить к ошибкам.Не забывайте, что Netscape чувствителенк регистру, поэтому слово, начинающее-ся с заглавной буквы, и слово, написанноепрописными буквами, означают совсем неодно и то же. Например, history и Historyимеют разные значения.

alert event lenght outerHeight SelectAnchor evt Link outerWidth selfArea FileUpLoad location Packages setIntervalarguments find Location pageXoffset setTimeoutArray focus locationbar pageYoffset statusassign Form Math parent statusbarblur Frame menubar parseFloat stopBoolean frames MimeType parseInt StringButton Function moveBy Password Sub,itcallee getClass moveTo personalbar suncaller Hidden name Plugin taintcapture Events hide NaN print TextCheckbox history navigate prompt TextareaclearInterval History navigator prototype toolbarclearTimeout home Navigator Radio topclose Image netscape ref toStringclosed Infinity Number RegExp unescapeconfirm innerHeight Object releaseEvents untaintconstructor innerWidth onBlur Reset unwatchDate isFinite onError resizeBy valueOfdefaultStatus isNaN onFocus resizeTo watchdocument java onLoad routeEvent windowDocument JavaArray onUnload scroll WindowsElement JavaClass open scrollBarsescape JavaObject opener scrollByeval JavaPackage Option scrollTo

Шрифты,поддерживаемыебраузером

44444В главе 3 представлены шрифты, которыеподдерживаются браузером. В данном при-ложении содержится информация о шриф-тах: приведено написание каждого шрифта,плотность и стили, относящиеся к данномушрифту, а также название исходного се-мейства шрифтов.

С помощью CSS можно придать шрифтуполужирное или курсивное начертание.Однако шрифты, у которых есть полу-жирный, курсивный и полужирный кур-сивный варианты, смотрятся на экранезначительно лучше остальных.

535Шрифты, поддерживаемые браузером

Таблица П4.1. Microsoft Internet Explorer (MacOS и Windows)

Название Плотность и стили Семейство Пример

Arial Black Моноширинный Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Comic Полужирный Cursive ABCDEFGHIJKLMNOPQRSTUVWXYZSans MS abcdefghijklmnopqrstuvwxyz

1234567890Impact Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz1234567890

Minion Web* Полужирный, курсив Serif ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Trebuchet MS* Полужирный, курсив, Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZполужирный курсив abcdefghijklmnopqrstuvwxyz

1234567890

Verdana Полужирный, курсив, Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZполужирный курсив abcdefghijklmnopqrstuvwxyz

1234567890

Webdings** Fantasy

* Как в IE5.

** Также поддерживаются шрифты: Andale, Georgia.


Таблица П4.2. Операционная система MacOS


Chicago Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Courier Полужирный, курсив, Monospace ABCDEFGHIJKLMNOPQRSTUVWXYZполужирный курсив abcdefghijklmnopqrstuvwxyz

1234567890

Geneva Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Helvetica Полужирный, курсив, Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZполужирный курсив abcdefghijklmnopqrstuvwxyz

1234567890

Monaco Monospace ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

New York Serif ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Palatino Полужирный, курсив, Serif ABCDEFGHIJKLMNOPQRSTUVWXYZполужирный курсив abcdefghijklmnopqrstuvwxyz

1234567890

Symbol Fantasy ΑΒΧΔΕΦΓΗΙϑΚΛΜΝΟΠΘΡΣΤΥςΩΞΨΖαβχιϕδεφγηκλμνοπθρστυϖωξψζ1234567890

Techno Serif ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Times* Полужирный, курсив, Serif ABCDEFGHIJKLMNOPQRSTUVWXYZполужирный курсив abcdefghijklmnopqrstuvwxyz

1234567890

* Также поддерживаются: шрифт Charcoal; только в MacOS 8.5: шрифты Apple Chancery, Capitals, Gadget, Hoefler Text, Sand, Skia и Textile.

537Шрифты, поддерживаемые браузером

Таблица П4.3. Операционная система Windows


Abadi MT Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZCondensed Light* abcdefghijklmnopqrstuvwxyz

1234567890

Arial Полужирный, курсив, Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZполужирный курсив abcdefghijklmnopqrstuvwxyz

1234567890Arial Black* Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz1234567890

Book Antiqua* Полужирный, курсив, Serif ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Calisto MT* Полужирный, курсив Serif ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Century Gothic* Полужирный, курсив, Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZполужирный курсив abcdefghijklmnopqrstuvwxyz

1234567890Comic Полужирный Cursive ABCDEFGHIJKLMNOPQRSTUVWXYZSans MS* abcdefghijklmnopqrstuvwxyz

1234567890Copperplate Serif A B C D E F G H I J K L M N O P Q R S T U V W X Y ZGothis Bold abcdefghijklmnopqrstuvwxyz

1234567890

Copperplate Serif ABCDEFGHIJKLMNOPQRSTUVWXYZGothis Light abcdefghijklmnopqrstuvwxyz

1234567890

Courier New Полужирный, курсив, Monospace ABCDEFGHIJKLMNOPQRSTUVWXYZполужирный курсив abcdefghijklmnopqrstuvwxyz

1234567890

Lucida Monospace ABCDEFGHIJKLMNOPQRSTUVWXYZConsole* abcdefghijklmnopqrstuvwxyz

1234567890

Lucida Cursive ABCDEFGHIJKLMNOPQRSTUVWXYZHandwriting Italic* abcdefghijklmnopqrstuvwxyz

1234567890

Lucida Sans Курсив Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZUnicode* abcdefghijklmnopqrstuvwxyz

1234567890News Полужирный, курсив Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZGothic MT* abcdefghijklmnopqrstuvwxyz

1234567890

OCR A Monospace ABCDEFGHIJKLMNOPQRSTUVWXYZExtended* abcdefghijklmnopqrstuvwxyz

1234567890


Таблица П4.3. Операционная система Windows (окончание)


Symbol Fantasy ΑΒΧΔΕΦΓΗΙϑΚΛΜΝΟΠΘΡΣΤΥςΩΞΨΖαβχδεφγηιϕκλμνοπθρστυϖωξψζ1234567890

Tahoma* Полужирный Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Times New Полужирный, курсив, Serif ABCDEFGHIJKLMNOPQRSTUVWXYZRoman полужирный курсив abcdefghijklmnopqrstuvwxyz

1234567890Verdana* Полужирный, курсив, Sans-serif ABCDEFGHIJKLMNOPQRSTUVWXYZ

полужирный курсив abcdefghijklmnopqrstuvwxyz1234567890

Webdings* Fantasy

Wingdings Fantasy ☺⌧

* Как в Windows 98.

Дополнительныеинструменты 55555

При создании сайтов я использую нетолько профессиональные приложения,такие как FreeHand, Photoshop, Dream-weaver и GoLive, но также и небольшиепрограммы, которые намного упрощаютработу. Некоторые программы являютсябесплатными или условно бесплатными,другие представляют собой Web-сайты.Далее вы найдете список моих самых лю-бимых программ.

Программное обеспечениеОдна из великолепных возможностей, ко-торые предоставляет Сеть, – быстрый до-ступ к любому программному обеспече-нию. Необходимые для Web-дизайнеровпрограммы, которые пылились бы на пол-ках магазинов, стали очень популярнымии нашли свою аудиторию.

Screen Ruler (Mac/Win)

www.kagi.com/microsoftНекоторые идеи настолько очевидны, про-сты и полезны, что каждый раз, используяих в своей работе, вы задаетесь одним и темже вопросом: «Почему я сам до этого недодумался?» Таким изобретением являетсяи программа Screen Ruler (рис. П5.1). Онапомещает на экран линейку, которой вы

Рис. П5.1. Программа Screen Ruler


можете пользоваться независимо от того,какие программы в данный момент запу-щены. Программа позволяет определитьположение объекта в окне браузера, на-пример указать точный размер графичес-кого изображения или задать параметрытаблицы.

Pixel Spy (Mac) и Color Picker (Win)

shakti.cc.trincoll.edu/~bhorling/pixelspy/chuting.uhome.net/colorpk.zipКак и Screen Ruler, программы Pixel Spy(рис. П5.2) и Color Picker (рис. П5.3) пред-ставляют несомненный интерес для Web-дизайнеров. При щелчке по какому-либоизображению программы указывают цветвыбранного пиксела в форматах Hex (шест-надцатеричное представление), RGB, CMYKи др. Они также находят наиболее близкийоттенок цвета из тех цветов, которые под-держивает браузер, таким образом, позво-ляя точно определять соответствия цветовв окне браузера или между программами.

Палитры цветов, поддерживаемыхбраузером (Mac/Win)

www.lynda.com/files/CLUTSwww.visibone.com/swatchesЛинда Винман (Lynda Wynman), автор по-пулярной концепции цветов, поддержива-емых браузером, разместила на указан-ном сайте копии палитр цвета, которыеприменяются в наиболее известных гра-фических программах, таких как Photo-shop, FreeHand, Paint Shop Pro и Illustrator.Я рекомендую воспользоваться коллек-цией образцов, имеющихся на сайте Visi-bone, где они представлены в дружествен-ном пользователю формате (рис. П5.4).

Рис. П5.2. Программа Pixel Spy

Рис. П5.3. Программа Color Picker

Таблицы цветов (CLUT) позволяют полу-чить быстрый доступ к цветам, поддержи-ваемым браузером, независимо от уста-новленного на вашем компьютере про-граммного обеспечения.

541Дополнительные инструменты

GIFBuilder (Mac)и GIF Construction Set (Win)

homepage.nac.com/piguet/gif.htmlwww.mindworkshop.com/alchemy/gifcon.htmlВ настоящее время рынок программногообеспечения переполнен сложными про-граммами для создания анимированныхGIF-файлов. Однако нельзя оставить безвнимания такие инструменты, как GIFBuil-der (рис. П5.5) и GIF Constructor (рис. П5.6),которые позволяют быстро и легко созда-вать анимацию непосредственно в про-грамме Photoshop. Одной из малоизвестныхвозможностей GIFBuilder является обработ-ка файла Photoshop, включающего слои,и преобразование каждого слоя в отдель-ный кадр. Указанные программы распро-страняются в Сети совершенно бесплатно.

Рис. П5.4. Таблица цветов CLUT от Visiboneв Photoshop

Рис. П5.5. Программа GIFBuilder

Рис. П5.6. Набор GIF Constructor


GraphicConverter (Mac)и Lview Pro (Win)

www.lemkesoft.de/us_gcabout.htmlwww.lview.comХотя GraphicConverter (рис. П5.7) не такаясложная программа, как Photoshop (с точ-ки зрения редактирования изображения),она помогала мне открывать файлы в та-ких форматах и кодировке, перед кото-рыми пасовали самые сложные програм-мы. К тому же GraphicConverter легко мо-жет преобразовать любое число графичес-ких файлов из одного формата в другой.

В режиме реальноговремениСеть позволяет получить доступ практичес-ки к любому программному обеспечению,а кроме того, многие Web-сайты предлага-ют функции, с помощью которых можноусовершенствовать свой сайт.

Webmaster’s Color Lab

www.visibone.com/colorlabДанный инструмент, созданный компаниейVisibone, позволяет быстро определить па-литру цветов для Web-сайта (рис. П5.8).Цвета располагаются рядом, и дизайнерспособен оценить то или иное цветовое со-четание. Один кадр содержит цветноекольцо, в котором вы найдете все цвета,поддерживаемые браузером. Если щелк-нуть по какому-либо цвету, его образецпоявится в соседнем кадре. Допустимо ука-зывать любые понравившиеся вам цвета –их образцы отобразятся рядом с первым.Webmaster’s Color Lab позволяет поместитьв образце все ранее выбранные цвета; такимобразом, вы легко можете их сравнить.

Рис. П5.7. Программа GraphicConverter

Рис. П5.8. Инструмент Webmaster’s Color Lab

543Дополнительные инструменты

ColorMix

www.colormix.com/Программа ColorMix (рис. П5.9) комбини-рует два или три цвета из 216 цветов, под-держиваемых браузером, позволяя созда-вать тысячи новых цветов. Точки разныхцветов помещается рядом, и зрительно этицвета смешиваются (например, подобноеразмещение синего и желтого цветов позво-ляет получить зеленый). Правда, созданныйтаким образом цвет не будет настолькочетким, как изначальный, а некоторыесочетания выглядят просто некрасиво. Новсе-таки данный инструмент значительнорасширит цветовую палитру вашего Web-сайта.

Тестовый пакет CSS1

www.w3.org/Style/CSS/TestЧтобы узнать, какие возможности CSS под-держивает ваш браузер, запустите его черезтестовый пакет W3C для CSS1 (рис. П5.10).В этом пакете учитываются все свойстваCSS. Он особенно полезен в том случае,когда вам необходимо убедиться, что типCSS, который вы планируете использовать,действительно будет правильно функцио-нировать. Но это следует сделать до того,как вы столкнетесь со всеми остальнымипроблемами, возникающими при созданииWeb-сайта.

Рис. П5.9. Программа ColorMix

Рис. П5.10. Тестовый пакет CSS1 от W3C


Web Site Garage

websitegarage.netscape.comИнструмент Web Site Garage позволяетполностью настроить сайт (рис. П5.11).Предоставьте ему ссылку на ваш сайт,и вскоре перед вами появится бесплатныйотчет о совместимости браузера, временизагрузки, «мертвых» ссылках, грамматикеи HTML. Каждый параметр будет оцени-ваться по шкале от «отлично» до «неудов-летворительно». Внося каждый месяц опре-деленную плату, вы сможете получить до-ступ к ряду сетевых приложений, кото-рые помогут оптимизировать Web-сайт,раскрыть весь его потенциал. Я протести-ровал свой сайт с помощью Web Site Ga-rage и получил общую оценку «хорошо».В следующем месяце я надеюсь получить«отлично».

Radio Free Underground

www.stitch.com/studioЭтот сайт не предоставляет никаких ди-зайнерских инструментов, но мне, напри-мер, всегда лучше работается, когда иг-рает приятная музыка. Здесь поможетRadio Free (рис. П5.12). Вы выбираете ка-кой-либо стиль (классику, техно, 80-е го-ды и т.д.), и на сайте для вас делают под-борку из 40 или 50 музыкальных произве-дений, которые вы можете незамедлитель-но прослушать. Каждый раз, заходя насайт, вы получаете новую подборку.

Рис. П5.11. Инструмент Web Site Garage

Рис. П5.12. Сайт Radio Free Undereground

66666Дополнительныеисточники

Я надеюсь, что эта книга не только откры-ла перед вами дверь в мир возможностейDHTML и CSS, но и предоставила необхо-димую базу для создания Web-сайта припомощи этих инструментов. Однако онадолжна стать всего лишь отправной точ-кой. В Сети вы найдете огромное количе-ство источников, которые помогут вамстать профессиональным Web-дизайнером.В этом приложении содержится информа-ция о Web-сайтах, книгах и других публи-кациях.

Web-сайты: технологияи стандартыВ книге я постарался рассказать обо всехаспектах Web-разработки, однако ещемногое осталось за кадром. На нижепере-численных сайтах вы сможете найти до-полнительные сведения о DHTML и CSS.


W3С-консорциум

www.w3.orgНа данном сайте вы найдете подробнуюинформацию обо всех Web-стандартах.Нужны ли вам сведения о последних изме-нениях в объектной модели документаили рекомендации по CSS первого уровня,этот сайт – единственный, куда стоит об-ратиться и в первом, и во втором случае(рис. П6.1).

BuildingTheWeb.com

www.buildingtheWeb.comЗдесь вы найдете все необходимые ресур-сы. Помимо большого количества ссылок,BuildingTheWeb.com содержит списки са-мых важных тем. У каждой ссылки естьописание содержания сайта, что значи-тельно упрощает поиск (рис. П6.2).

Помощь по HTML от Web DesignGroup

www.htmlhelp.comПосетив данный сайт, я сам впервые узнал,что такое CSS. С тех пор как я решил свя-зать свою работу со спецификациями W3C,именно на этом сайте я нашел наиболееполную информацию о HTML. Возможно,он оформлен не столь привлекательно, какостальные Web-сайты, однако только здесьвы получите самые подробные и понятныеобъяснения Web-стандартов (рис. П6.3).

Рис. П6.1. Сайт W3С-консорциум

Рис. П6.2. Сайт BuildingTheWeb.com

Рис. П6.3. Помощь по HTML

547Дополнительные приложения

Проект Web-стандартов

www.webstandards.orgЭта группа не устанавливает какие-либостандарты, в ее функции входит контрольза соблюдением стандартов производителя-ми браузеров. Группа также проводит кам-панию по усовершенствованию браузеров,чтобы помочь разработчикам как можноближе подвести свои проекты к стандартам(рис. П6.4).

WebReview

www.webreview.comНа сайте WebReview вы найдете статьипрофессионалов Web-дизайна на самыеразнообразные темы, примечания по ди-зайну и редакционные статьи. Если вы сле-дите за последними изменениями в индус-трии дизайна, обязательно посещайте этотсайт (рис. П6.5).

WebReference

www.webreference.comНа сайте WebReference в основном содер-жится информация об интерфейсе Web-сайтов, приводятся статьи о практическомиспользовании DHTML, CSS и других тех-нологий (рис. П6.6).

Apple Developer Connection –Internet-разработчик

developer.apple.com/internetСайт Apple Developer Connection болееинтересен для дизайнеров, работающих наMacintosh, однако здесь вы сможете найтиинформацию, полезную для любого Web-разработчика (рис. П6.7).

Рис. П6.4. Проект Web-стандартов

Рис. П6.5. Сайт WebReview.com

Рис. П6.6. Сайт WebReference.com


Dynamic Drive

www.dynamicdrive.comДанный сайт целиком посвящен DHTML.Если вы ищете информацию о новацияхв этой области, сайт Dinamic Drive – какраз то, что вам нужно (рис. П6.8).

Часто задаваемые вопросыо DHTML

www.faqts.com/knowledge_base/index.phtml/fid/128Этот сайт – один из моих любимых ресур-сов. Если у вас есть вопрос о DHTML, CSSили JavaScript, щелкните по указаннойссылке. Скорее всего, такой вопрос ужеобсуждался на данном сайте и вы найдетеподробный ответ и разъяснения професси-оналов (рис. П6.9).

DHTML для Всемирной паутины

www.webbedenvironments.com/dhtmlНа сайте поддержки данной книги содер-жатся все коды, приведенные ранее, рабо-ту которых допустимо просмотреть в ре-жиме реального времени. Для экономиивремени можете загрузить программы не-посредственно с сайта, чтобы не перепи-сывать их с книги. Кроме того, на этомсайте я буду размещать дополнения и ис-правления (рис. П6.10).

Рис. П6.7. Apple Developer Connection –Internet-разработчик

Рис. П6.8. Сайт Dynamic Drive

Рис. П6.9. Часто задаваемые вопросы о DHTML


Web-сайты: дизайн и теорияДля создания эффективного Web-сайта тре-буется больше, нежели понимание прин-ципов работы кода. Необходимо знать, какпостроить удобный для пользователя ин-терфейс.

GlassDog

www.glassdog.com/design-o-ramaНа этом сайте вы найдете много полезнойи интересной информации о Web-дизайне.Сведения изложены хорошим профессио-нальным языком с соблюдением соответ-ствующей терминологии, материал подо-бран таким образом, чтобы осветить все ас-пекты рассматриваемой темы (рис. П6.11).

Скотт Макклауд

www.scottmccloud.comСкотт Макклауд (Scott McCloud) вошелв индустрию Internet совершенно неожи-данным образом. Книга этого известногосоздателя комиксов – «Понимание комик-сов» (Understanding Comics) – стала клас-сикой Web-дизайна в середине 90-х годов.На сайте основное внимание уделено Web-комиксам, однако оригинальные авторскиерешения будут интересны и чрезвычайнополезны любому дизайнеру (рис. П6.12).

Рис. П6.10. Сайт поддержки книги

Рис. П6.11. Сайт Glass Dog

Рис. П6.12. Web-комиксы от Скотта МакКлауда


Центр Argus по архитектуреинформации

argus-acia.comБольшую часть посетителей Всемирной се-ти представляют пользователи приложений,функционирующих в режиме реальноговремени. Разработка подобных приложе-ний требует не только знания основ графи-ческого дизайна. Необходимо понимать,как создать простой и удобный пользова-тельский интерфейс, как правильно орга-низовать информацию и продумать архи-тектуру будущего сайта. На сайте argus-acia.com вы найдете великолепные статьи,в которых освещаются эти и многие другиетемы (рис. П6.13).

Useit.com

www.useit.comКак и на предыдущем сайте, здесь содер-жатся статьи, которые помогают улуч-шить Web-сайты с точки зрения простотыи удобства использования. Лично я не все-гда согласен с выводами, представленны-ми авторами сайта, однако многие их идеи,безусловно, интересны и весьма ориги-нальны (рис. П6.14).

Web Page Design для дизайнеров

www.wpdfd.comСоздатель сайта, Джо Джиллеспай (JoeGillespie), разместил на нем огромное ко-личество статей, которые помогут дизай-нерам переносить информацию из печат-ного варианта в Web. Даже ветераны сете-вых войн найдут здесь много полезныхсведений (рис. П6.15).

Рис. П6.13. Центр Argus по архитектуреинформации

Рис. П6.14. Сайт Useit.com

Рис. П6.15. Сайт Web Page Design для дизайнеров


Примеры Web-сайтовС каждым днем возрастает число сайтов,использующих DHTML. Я рекомендую по-сетить наиболее, на мой взгляд, удачные.

Splatterpunk

www.splatterpunk.comСайт разработан компанией Adobe. Здесьсодержится информация о возможностяхпредоставляемого этой компанией про-граммного обеспечения, включая GoLive.Здесь вы найдете кое-что интересное и обDHTML (рис. П6.16).

Sandman Film

www.sandmanfilm.orgПри создании этого сайта я активно исполь-зовал возможности DHTML. Здесь пред-ставлен эффект киноленты, когда кадрыпрокручиваются по горизонтали в зависи-мости от того, какой раздел вы выбирае-те в меню, расположенном в нижней час-ти страницы (рис. П6.17).

Coma2

www.coma2.comНа сайте Coma2 содержится коллекция ра-бот мастеров в сфере мультимедиа. Здесьпредставлены инновационные методы ис-пользования DHTML. К тому же сайты, накоторые ссылаются авторы, также приме-няют DHTML (рис. П6.18).

Рис. П6.16. Сайт Splatterpunk

Рис. П6.17. Сайт The Sandman

Рис. П6.18. Сайт Coma2


Kaliber 10000

www.k10k.comKaliber 10000, который больше известен какK10K, – популярный сайт, куда Web-дизай-неры заходят в поисках самых современ-ных идей. Здесь вы можете узнать о новыхметодах интеграции DHTML в интерфейссвоего сайта (рис. П6.19).

Книги, журналы и другиепубликацииПомимо Internet существует множествопечатных изданий, призванных помочьвам в познании нелегкого, но захватываю-щего дизайнерского искусства.

Визуальное представление

Печатное слово играет в нашей жизни не-малую роль, но удивительно, наскольколучше информация воспринимается не сословесных объяснений, а с визуально пред-ставленного материала. Как говорится,лучше один раз увидеть, чем сто раз услы-шать. В книге Эдварда Тюфта «Визуальноепредставление: изображения и количество,очевидность и изложение» (Edward Tufte«Visual Explanations: Images and Quantities,Evidence and Narrative»; издательство Grap-hics Press) рассматривается сложность пе-редачи информации посредством визуаль-ных элементов, а также говорится о важнойроли, которую играет зрительное восприя-тие в нашей жизни.

Понимание комиксов

Ранее я уже упоминал великолепный сайтСкотта Макклауда, стоит рассказать и о егокниге «Понимание комиксов» («Understan-ding Comics»; издательство Kitchen Sink

Рис. П6.19. Сайт Kaliber 10000

Press). На примере комиксов автор рассмат-ривает проблему визуального взаимодей-ствия с читателем. Если вы хотите коснуть-ся изумительного мира чудес, мира переда-чи информации посредством изображений,я настоятельно рекомендую вам прочитатьэту книгу.

Невидимый компьютер

«Люди не хотят пользоваться компьюте-ром, они хотят, чтобы их проблемы ре-шались». Такое справедливое замечаниесделал Дональд А. Норман в своей книге«Невидимый компьютер: почему хоро-шие товары могут не пользоваться спро-сом. Персональный компьютер слишкомсложен, будущее – за информационнымиустройствами» (Donald A. Norman «Invi-sible Computer: Why Good Products CanFail. the Personal Computer is So Complexand Information Appliances Are the Solu-tion»; издательство MIT Press). Это пре-красная книга о философии создания про-дуктов, которые распространяются с по-мощью компьютеров.


Create Online

www.createonline.co.ukЭтот журнал выходит раз в месяц. В немвы найдете множество подробных руко-водств, написанных профессионалами,а также статьи, рассматривающие целыйряд вопросов, которые могут быть инте-ресны Web-разработчику. Хотя журналCreate Online издается в Великобритании,я находил его во многих книжных мага-зинах США (рис. П6.20).

Visibone HTML и CSS Card

www.visibone.com/htmlVisibone HTML и CSS Card – отличныйдокумент для каждого пишущего Inter-net-программы. На четырех страницахсодержится практически все, что нужнознать о тэгах HTML и свойствах CSS,включая атрибуты, значения, совмести-мость браузеров, ошибки в программахи специальные символы. Этот документнеобходимо иметь под рукой любомуWeb-дизайнеру (рис. П6.21).

Рис. П6.20. Web-сайт Create Online

Рис. П6.21. Web-сайт Visibone HTML и CSS Card

предметный указатель

А

Абзац 104

Б

Блок плавающий 306Браузер

возможности 194сохраняемые цвета 17

Будущее Internet 504CSS3 514SMIL 512SVG 513XHTML 509

переход от HTML 510XML 507

CSS и DOM 508

В

Видимость 167Внутренний отступ 142Вывод на печать 379Выравнивание

вертикальное 103текста 102стиль 102

Г

Гипертекст 335Графика векторная, масштабируемая 80

Д

Динамический HTML. См. DHTMLДинамический дизайн

навигациязапреты 341рекомендации 340

принципы 336размещение объектов 337

З

Заголовки с фоном 361фиксированные 362

И

Изображение на заднем плане 126Импорт внешнего содержимого 381

включение на стороне сервера 384внешний файл JavaScript 385тэги <ilayer> и <iframe> 382

Индекс 103Интервал

между словами 98межстрочный 99

К

Кадр опорный 316Кернинг 97

555Предметный указатель

Классзависимый 53правила 51селектор 52

Колонтитул 366Комментарий 75

М

Менюбоковое 364выдвижное 400выпадающее 395раскрывающееся 407«умное» 447уточняющее 410

Метаинформация 417Мультимедиа 476

Flash-анимация 484добавление на страницу 488создание 485

GIF-анимация 478вставка на страницу 481назначение 482в ImageReady 480в Macromedia Fireworks 479

Java-апплеты 492видео 490звук 477

Н

Навигация на сайте 340, 389для браузеров без DHTML и CSS 415дополнительная 416общий стиль ссылок 390панель управления 403сложный стиль ссылок 393

О

Обработчик событий, глобальный 254Обтекание текстом 144

Объектыанимационные 256перетаскивание 439

Объектная модель документа 182Окно браузера 151

новое 268перемещение 266

ОпределениеCSS для ОС посетителя 358группа 61изменение 275

Отладка кода 494CSS

ошибки 495проверка 497

JavaScriptошибки 499проверка 500

различия между браузерами 502

П

Панель управления 403Печать Web-страницы 72Поддержка браузера DHTML 516

iCab 519Internet Explorer 517Netscape Navigator 518Opera 519

Позиционированиеабсолютное 153относительное 153статическое 153фиксированное 154

Полоса прокрутки 420Порядок стека 161Псевдокласс 390Псевдоэлемент 453

Р

Размерклиентской области окна 217объекта 222

DHTML и CSS556

окна браузера 216, 272экрана 212

С

Свойстванаследованные 69правила 33

Свопинг изображений 442элемента 442

в другом фрейме 446соседнего 445

Селекторконтекстуальный 63правила 33

Сетка расположения 351Слайд-шоу 427Слои

Netscape 283встроенные 203

доступ из JavaScript 290, 293импорт внешнего содержимого 288создание 287

Событиеобнаружение 188обработчик 186

Создание сайта 344проектирование 345

определение целей сайта 346определение читательскойаудитории 346предоставляемые функции 347сбор и сортировка информации 345стиль оформления 347

разработка 348первый эскиз 349план сайта 348раскадровка 349схема сайта 348

реализация 352компоновка страниц 353подготовка кода 352подготовка содержания 352создание шаблона 352тестирование 353

Специальные эффектыбуквица 452движущиеся объекты 467прозрачная графика 470

добавление на страницу 473создание в Fireworks 472создание в Photoshop 470

теньобъемная 455простая 454

указатель мыши 463фединг текста 459часы 474

Список 113маркер 115, 117висячий отступ 116

Средства управления 419всплывающий гипертекст 431кнопки Back и Next 426полоса прокрутки 420слайд-шоу 427

Ссылка навигационная 335Стиль 26

каскадный порядок 70наследование 66тэга 38

Страницапрокрутка 220просмотр кода 387разрыв 111

Т

Таблица стилейизменение 281каскадная 27

ТекстHTML 80векторный 80выравнивание

вертикальное 103горизонтальное 102

графический 80динамический 101украшения 106

557Предметный указатель

Тэгиinline 36, 56link 45блок-уровня 36, 58дочерний 62замененные 36набор 62переопределение 50родительский 62

У

Указатель мыши 119Устранение ошибки в Netscape CSS 356

Ф

Фонфоновая картинка 121цвет 121, 125

Формаввода 434для создания динамическихэффектов 434контекстная 437

Фреймграницы 369динамическое содержание 263открытие и закрытие 371размещение страниц 376

ФункцииaddRule 280animateObject 258annouingFlash 251blurOn 301changeStyle 276changeWindowSize 273clipLayer 294closeWindow 269defaultEvents 254errorOn 255fadeElement 298findBottom 226findClipArray 233findClipBottom 233findClipLeft 233

findClipRight 233findClipTop 233findDOM 199, 201findHeight 223findLayer 228, 243findLivePageHeight 217findLivePageWidth 218findObject 262findRight 226findScrollLeft 220findScrollTop 221findTop 225findVisibility 231findXCoord 259findYCoord 259fullScreen 273magnifyWindowSize 273moveObjectBy 241moveObjectTo 239openWindow 268passItOn 253scrollPageTo 246setClass 278setClip 232, 249setLayer 228, 243setUpAnnouingFlash 251setVisibility 230, 237swapLayer 244toggleVisibility 237toggleWindow 269рекурсивная 250

Ц

Цветасохраняемые браузером 18фона 124

Ш

Шрифт 78загрузка 83размер 87семейство 79тип 79

Cursive 79Fantasy 79

DHTML и CSS558

Monospace 79Sans-serif 79Serif 79

толщина 91установленный по умолчанию 85

Э

Элемент 131внутренний отступ 132поле 132положение 152рамка 132

вид 139содержимое 132стороны 132

Эффекты Internet Explorerперетекание объектов 298переход между страницами 299размытие изображения 301эффект волны 302

С

CSS 27ID-правило 32версии 30добавление на Web-страницу 40класс 32правила 32форматирование 42

CSS-файл, внешний 43CSS3 514

D

DHTML 174в Microsoft 176в Nescape 176недостатки 177общий 176преимущества 177

DOM 182Internet Explorer All 192Netscape Layer 190W3C ID 193общая для браузеров 201

Dreamweaver 317

F

Flash 178недостатки 179преимущества 179

G

GoLive 304

I

ID 54

L

Layout grid 351

M

Minicaps 92

S

SGML 507Sidebar 364SMIL 512SVG 513URL 19

глобальный 19локальный 19

Word spacing 98W3C 25WYSIWYG 304XHTML 509XML 507

CSS и DOM 508Z-индекс 161

Джейсон Кренфорд Тиге

DHTML и CSS

Главный редактор [email protected]

Перевод с английского Талачева М. И.

Научный редактор Нилов М. В.

Выпускающий редактор Левицкая Т. В.

Верстка Лапшова М. А.Графика и дизайн Шаклунов А. К.

Подписано в печать 10.04.2003. Формат 70×100 1/16 .Гарнитура «Миниатюра». Печать офсетная.

Усл. печ. л. 45,5. Тираж 1000 экз. Зак. №

Web-сайт издательства: www.dmk-press.ru Internet-магазин: www.a .ru

Отпечатано на ордена Трудового Красного ЗнамениГУП Чеховский полиграфический комбинат

Министерства Российской Федерации по делам печати,телерадиовещания и средств массовых коммуникаций

142300, г. Чехов Московской областиТел. (272) 71-336, факс (272) 62-536

Мовчан Д. А.

Издательство «ДМК Пресс»

lians-kniga

Джейсон Кренфорд Тиге. dhtml и css. Быстрый старт

Documents