DHTML И CSS by alex

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

DHTML И CSS БЫСТРЫЙ СТАРТ

ЧАСТЬ II

основы динамических технологий Почти весь 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 Листинг 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: 0px visibility: 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');">

Изменение состояния видимости объекта 1. <script scr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, следует включить код findDOM. Для этого добавьте внешний текстовый файл и затем импортируйте его на ту страницу, где он будет применяться (см. раздел «Использование общей для браузеров DOM» в главе 11). 2. f u n c t i o n setVisibility(objectID,state){...} В сценарий JavaScript добавьте функцию setVisibility(). При обращении к объекту она задействует его ID, который передается в функцию как переменная objectID. Таким образом создается DOM. Затем функция применяет этот ID для доступа к текущему свойству видимости, установленному для этого объекта, и изменяет его в зависимости от того состояния, которое вы определили при запуске функции из обработчика событий (см. шаг 6). 3. function toggleVisibility(objectID) {...} В сценарий JavaScript добавьте функцию toggleVisibility(). При обращении к объекту она использует его ID, Листинг 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. Затем функция проверяет текущее состояние видимости и изменяет его на противоположное. #cheshireCat{...} С помощью значений position, type и visibility установите ID объектов. onLoad="..." Чтобы инициализировать видимость нужных объектов, используйте в тэге <body> функцию setVisibility(). Чтобы функция toggleVisibility() работала соответствующим образом, нужно установить начальную видимость. onClick="setVisibility ('object1')" Чтобы запустить функцию, созданную на шаге 2, добавьте обработчик событий и передайте ему ID объекта, к которому хотите обратиться. onClick="setVisibility ->('cheshireCat','hidden');" Чтобы запустить функцию, созданную на шаге 2, добавьте обработчик событий и передайте ему ID объекта, к которому вы хотите обратиться, и состояние видимости, которое требуется присвоить объекту. <divid="cheshireCat">...</div> Установите CSS-слои. Заметьте, что в качестве возможных значений состояния определяются не только значения visible или hidden, но и значения show или hide. Netscape 4 принимает стандартные значения visible или hidden, но он записывает их как show или hide,

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

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

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

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

<html> <head> <script scr="findDOM.js"></script> <script> function moveObjectTo(objectID,x,y) { var domStyle = findDOM(objectID,1); ->domStyle.left = x; domStyle.top = y; } </script> <style type="text/css"> #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"> <img scr="alice39.gif" width="200" ->height="163" border="0"> </div> </body> </html>

Перемещение объектов Объект можно располагать на экране, используя 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 объектов.

240 Основы динамических технологий 4. onMouseOver="moveObjectTo ('madHatter',200,200);" Чтобы запустить функцию, созданную на шаге 2, добавьте обработчик событий и передайте ему ID объекта, к которому вы хотите обратиться, и его новые координаты. 5. <divid="madHatter">...</div> Установите CSS-слои. Заметьте, что для определения левого и верхнего положения объекта использовались свойства top и left. Однако в каждом браузере есть свое ключевое слово, которое служит для нахождения значений этих свойств. В Netscape 4 – top и left, в Netscape 6 – offsetLeft и offsetTop, в Internet Explorer 4/5 – pixelTop и pixelLeft. Значения свойств top и left можно устанавливать и с помощью указанных ключевых свойств, но лучше придерживаться обычных top и left. Перемещение объектов подробно обсуждается в части 4 этой книги, где будет показано, как создавать всплывающие меню (см. главу 24), собственные полосы прокрутки (см. главу 25) и плавающие объекты (см. главу 26).

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

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

<html> <head> <script scr="findDOM.js"></script> <script> 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); } } </script> <style type="text/css"> #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"> <img scr="alice39.gif" width="200" ->height="163" border="0"> </div> </body> </html>

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

Перемещение объекта 1. <script scr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, необходимо включить код findDOM. Для этого добавьте внешний текстовый файл и затем импортируйте его на ту страницу, где он будет использоваться. 2. functionmoveObjectBy ->(objectID,deltaX,deltaY){...} В сценарий JavaScript добавьте функцию moveObjectBy(). При обращении к объекту она применяет его ID, который передается в функцию как переменная objectID. Таким образом создается DOM. Затем функция заменяет значения свойств left и top на значения deltaX и deltaY. В Internet Explorer устанавливаются значения p i x e l T o p и pixelLeft. В Netscape 6 задаются положения top и left, но их нужно добавить и в текущее положение объекта. В Netscape 4 положения не определяются непосредственно, а используется встроенная функция moveBy(). 3. #madHatter{...}

242 Основы динамических технологий С помощью значений position, top и left установите ID объектов. 4. onMouseOver="moveObjectBy ->('madHatter',75,100);" Чтобы запустить функцию, созданную на шаге 2, добавьте обработчик событий и передайте ему ID объекта, к которому вы хотите обратиться, и количество пикселов, на которое нужно переместить объект. С помощью положительных значений объект передвигается вниз и вправо, а с помощью отрицательных – вверх и влево. 5. <divid="madHatter">...</div> Установите CSS-слои. В Netscape 6 лучше не добавлять приращение непосредственно к свойствам left и top. В Internet Explorer 4/5/6 для добавления значений delta к текущей позиции объекта можно использовать +=, в Netscape 4 – функцию moveBy(), но в Netscape 6 придется вычислять текущее положение объекта и добавлять значения delta, а затем присваивать полученные значения свойствам left и top. Для установления позиции элемента проще использовать свойства top и left, но если вы хотите переместить объект на определенное расстояние, придется использовать pixelLeft и pixelTop. Иначе Internet Explorer перепутает эти значения, и объект

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

Перемещение объектов в 3D 243 будет выступать за границы экрана.

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

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

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

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

1. <script scr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, следует включить код findDOM. Для этого добавьте внешний текстовый файл и затем импортируйте его на ту страницу, где он будет использоваться. 2. var prevObjectID=null; var prevLayer=0; В JavaScript инициализируйте две переменные: – prevObjectID. В ней хранится ID предыдущего выбранного объекта; – prevLayer. В ней хранится z-индекс предыдущего выбранного объекта. 3. functionsetLayer(objectID,layerNum) {...} В сценарий JavaScript добавьте функцию setLayer(), которая присваивает свойству z-index номер указанного уровня. 4. function findLayer(objectID) {...} В код JavaScript добавьте функцию findLayer(). При обращении к объекту она применяет его ID, который передается в функцию как переменная

244 Основы динамических технологий objectID. Таким образом создается DOM. Затем функция использует ID для того, чтобы получить доступ к свойству z-index, и возвращает это значение. 5. functionswapLayer(objectID) {...} В сценарий JavaScript добавьте функцию swapLayer(). Она уменьшает z-индекс предыдущего выбранного уровня (если таковой есть) и перемещает выбранный слой вверх. 6. #object{...}

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

<html> <head> <script scr="findDOM.js"></script> <script> 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 }

Перемещение объектов в 3D 245 С помощью значений position и zindex установите ID объектов.

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

9. onClick="swapLayer('object1')" Чтобы запустить функцию swapLayer(), добавьте в слой обработчик событий. Определение z-индексов в тэге <body> с помощью обработчика событий onLoad может показаться скучным занятием, если вы уже установили z-индекс в CSS. Но Internet Explorer 5/6 и Netscape 6 распо-

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

#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');"> <img scr="alice32.gif" width="140" height="201" border="0"></a> -><br clear="all"> </div> <div id="object3"> <a href=" javascript:void('')" onClick="swapLayer('object3');"> <img scr="alice15.gif" width="150" height="198" border="0"></a> -><br clear="all"> </div> <div id="object4"> <a href=" javascript:void('')" onClick="swapLayer('object4');"> <img scr="alice29.gif" width="200" height="236" border="0"></a> -><br clear="all"> </div> </body> </html>

246 Основы динамических технологий знают z-индекс только в том случае, если он установлен с помощью JavaScript. Возможность установления и переопределения z-индекса оказывается важной при создании теней (см. главу 26).

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

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

Добавление прокрутки Web-страницы 1. varisIE=0; Чтобы выяснить, совместим ли браузер с Internet Explorer, используйте метод определения браузера. 2. function scrollPageTo(x,y) {...} В сценарий JavaScript добавьте функцию scrollPageTo(). Если браузер совместим с Internet Explorer, то функция применяет свойства scrollLeft и scrollRight, чтобы прокрутить страницу в точку с координатами (x,y). В противном случае используется встроенная в Netscape функция scrollTo(). 3. #overHere{...} С помощью значений position, left и top установите ID объектов. В этом примере определено два объекта: один в са-

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

Прокрутка Web-страницы 247 Листинг 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; } } </script> <style type="text/css"> #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 &gt; <br style="clear:both"> -><img scr="alice25.gif" width="300" ->height="228" border="0"></a> <div id="downHere">

мой нижней части страницы, другой – справа. Теперь можно применить функцию scrollPageTo(). 4. <ahref="javascript:scrollPageTo ->(0,1990)">...</a> Чтобы запустить функцию scrollPageTo(), определите ссылку и передайте функции координаты того места, куда требуется прокрутить страницу. Помните, что нет необходимости применять обработчик событий, чтобы запустить эту функцию, так как она не обращается к DOM. В этом примере страница прокручивается после того, как пользователь совершит какое-либо действие. Используя другой обработчик событий (например, onLoad), можно сделать так, что страница будет прокручиваться и без непосредственной команды пользователя. Однако при этом нужно быть осторожным: если страница вдруг начнет перемещаться из стороны в сторону, это может запутать или даже заставит волноваться посетителя вашего сайта. Листинг 13.5 (окончание)

<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)">&gt; 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>

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

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

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

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

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

<html> <head> <script scr="findDOM.js"></script> <script> 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 +')'; } } </script> <style type="text/css"> #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"> </div> </body> </html>

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

Изменение видимой области объекта 1. <script scr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, следует добавить код findDOM. Для этого создайте внешний текстовый файл и затем импортируйте его на ту страницу, где он будет использоваться. 2. functionsetClip(objectID,clipTop, ->clipRight,clipBottom,clipLeft) {...} В сценарий JavaScript добавьте функцию setClip(). При обращении к объекту она использует его ID, который п е р е д а е т с я в функцию как переменная objectID. Таким образом создается DOM. Затем функция заменяет отсекаемую область. В Netscape 4 и 6 это делается с помощью свойств отсекаемой области top, right, bottom и left, а в Internet Explorer 4/5 свойство clip применяется непосредственно. 3. #cheshireCat {...} Установите ID объектов и добавьте начальную отсекаемую область. 4. <divid="cheshireCat">...</div> Установите CSS-слои. 5. onMouseOver="setClip ->('cheshireCat',35,320,400,70)"

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

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

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

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

<html> <head> <script scr="findDOM.js"></script> <script> 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>

Создание рекурсивной функции 1. theDelay=1000; Инициализируйте глобальные переменные: – theDelay устанавливает промежуток времени (в миллисекундах) между двумя запусками функции. Значение, равное 1000 мс, соответствует задержке в одну секунду; – domStyle записывает DOM; – state сохраняет текущее состояние видимости объекта, на которое действует функция; – toStop. Если эта переменная равна 1, то функция перезапускается, чего не происходит, если переменной присваивается значение 0. 2. functionsetUpAnnoyingFlash(objectID, ->onOffon){...} В сценарий JavaScript добавьте функцию setUpAnnoyingFlash(). Если переменная onOffon равна 1, переменной toStop присваивается значение 1 (функция перезапускается). При обращении к объекту эта функция использует его ID, который передается в функцию как переменная objectID. Таким образом создается DOM (см. раздел «Построение общей DOM» в главе 11). Затем вызывается функция annoyingFlash(). Если переменная onOffon равна 0, переменной toStop присваивается значение 0 и функция annoyingFlash() не вызывается. 3. functionannoyingFlash(){...} В JavaScript добавьте функцию annoyingFlash(). Она вызывается функцией setUpAnnoyingFlash() на шаге 2. Если переменная toStop равна 1, то состояние видимости изменяется: объект отображается на экране, если был невидим, и наоборот. Затем функция перезапускается

252 Развитые динамические технологии при помощи метода setTimeOut(). Функция annoyingFlash() вызывается до тех пор, пока переменная toStop не становится равной 0. В этом случае свойству visibility присваивается значение visible, и функция больше не вызывается. 4. #cheshireCat{...} Установите ID объектов с помощью определения position и visibility. 5. onLoad="setUpAnnoyingFlash ->('cheshireCat',1);" Чтобы вызвать функцию, созданную на шаге 2, добавьте обработчик событий и передайте ему ID того объекта, который будет появляться и исчезать на экране. Также добавьте 1, если хотите, чтобы объект мерцал, и 0 – в противном случае. 6. <divid="cheshireCat">..</div> Установите CSS-слои.

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

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

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

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

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

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

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

<html> <head> <script> function passItOn(evt) { if (evt) { alert (evt); return; } } </script> </head>

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

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

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

Создание глобального обработчика событий 1. <scriptscr="findDOM.js"></script> Мы не будем использовать код findDOM.js для создания общей DOM, но воспользуемся этим файлом, чтобы обнаружить DHTML-браузер (см. раздел «Использование общей для браузеров DOM» в главе 11). 2. varisNS=0; В сценарий JavaScript добавьте метод определения браузера (см. раздел «Название и версия браузера» в главе 12). 3. functiondefaultEvents(){...} В код JavaScript добавьте функцию defaultEvents(). Эта функция создает глобальный обработчик событий, который будет использоваться в Netscape. Затем определяются функции, которые начнут выполняться, если где-либо в окне браузера произойдет событие. Обработчики событий перечислены в разделе «Обработчики событий» в главе 11. Вы можете выбрать любой из них. 4. functionerrorOn(){...}

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

<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()"

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

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

<html> <head> <script scr="findDOM.js"></script> <script> 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>

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

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

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

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

<html> <head> <script scr="findDOM.js"></script> <script> 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 Листинг 14.4 (продолжение)

Создание анимационного объекта 1. animaeDelay=5; Инициализируйте глобальные переменные: – animaeDelay устанавливает промежуток времени между рекурсивными запусками функции. Чем больше число, тем медленнее объект скользит по экрану. Однако в этом случае достигается не самый лучший анимационный эффект; – domStyle записывает DOM; – fX сохраняет конечное левое положение объекта; – fY записывает конечное верхнее положение объекта. 2. functionfindLeft(objectID){...} В сценарий JavaScript добавьте функции findLeft() и findTop() (см. раздел «Левая и верхняя позиции объекта» в главе 12). 3. functionstartAnimate(objectID,x,y) ->{...} В код JavaScript добавьте функцию startAnimate(), в которой запоминается конечное положение объекта (fX,fY) и вычисляется его текущее положение (cX,cY). При обращении к объекту функция использует его ID, который передается в нее как переменная objectID. Таким образом создается DOM. Затем эта функция вызывает функцию animateObject() и передает ей текущие координаты объекта (cX,cY).

258 Развитые динамические технологии 4. functionanimateObject(cX,cY){...} В сценарий JavaScript добавьте функцию animateObject(), которая вызывается из функции startAnimate(), определенной на шаге 3. Она уменьшает или увеличивает на единицу значения координат текущего положения объекта (в зависимости от того, больше или меньше эти величины значений координат конечного положения) и устанавливает новое положение. Затем функция перезапускается, и все начинается сначала (сложение/вычитание, перемещение, сложение/вычитание, перемещение и т.д.). Она работает до тех пор, пока текущие координаты (cX,cY) не становятся равными координатам конечного положения (fX,fY), которые были определены на шаге 2. 5. #madHatter{...} Установите ID объектов с помощью значений position, top и left. 6. onLoad="startAnimate ->('madHatter',200,200)" Чтобы вызвать функцию, созданную на шаге 3, добавьте обработчик событий и передайте ему ID объекта, который будет перемещаться по экрану, и координаты его конечного положения. 7. <divid="madHatter">...</div> Установите CSS-слои.

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

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

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

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

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

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

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

<html> <head> <script> function findXCoord(evt) { if (evt.x) return evt.x; if (evt.pageX) return evt.pageX; }

260 Развитые динамические технологии 2. onClick="alert('Left=' ->+findXCoord(event)+'pxTop=' ->+findYCoord(event))+'px'"> Чтобы вызвать функцию, описанную на шаге 2, добавьте обработчик событий. Область, в которой функция производит поиск координат указателя мыши, зависит от местоположения обработчика событий. Если он находится в тэге <body>, то координаты указателя можно определить в любом месте экрана. Если он содержится в тэге <a>, то координаты указателя устанавливаются только внутри области ссылки. В Netscape 4 событие onClick можно генерировать только в тэге <a>. Поэтому в примере этот браузер игнорирует onClick в тэге <body> и показывает координаты указателя мыши только в том случае, если пользователь щелкнет по картинке.

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

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

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

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

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

Листинг 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; }

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

Определение элемента, в котором произошло событие 1. functionfindObject(evt){...} В сценарии JavaScript добавьте функцию findObject() в заголовок документа. В этом сценарии определяются CSS-элементы, в которых произошло событие. Затем на экран выводится сообщение, с указанием найденного элемента. Функция состоит из двух частей. Одна используется в Netscape 4, другая – в Internet Explorer и Netscape 6: – if (document.layers) {...}. Если код работает в Netscape 4, то функция определяет положение указателя мыши и затем проверяет каждый слой в массиве слоев (в списке слоев, которые находятся в окне), определяя, какой из них находится под указателем; – else {...}. Если код работает в Internet Explorer, выясняется имя нужного объекта, то есть имя элемента, в котором произошло событие. 2. #alice1{...} Задайте CSS-элементы с помощью свойств стиля. В этом примере определяются три картинки (alice1, alice2 и alice3), и у каждой из них есть уникальный ID. 3. onClick="findObject(event)" Чтобы вызвать функцию, созданную на шаге 1, добавьте обработчик событий и передайте ему параметр события для Netscape 4. Заметьте, что имя объекта определяется в тэге <image>, а ID – в тэге <div>. Netscape использует ID действительной картинки, а Internet Explorer – ее имя. Чтобы код работал во всех браузерах, лучше включать в него как имя объекта, так и его ID.

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

return; } </script> <style type="text/css"> #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)"> <img scr="alice22.gif" ->width="329" height="482" ->border="0" name="alice2"> </a> </div> <div id="alice3"> <a href="javascript:void('')" ->onClick="findObject(event)"> <img scr="alice30.gif" ->width="353" height="480" ->border="0" name="alice3"> </a> </div> </body> </html>

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

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

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

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

var var var var

isDHTML = 0; isLayers = 0; isAll = 0; 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;} }}

Чтобы управлять объектами в одном фрейме, можно использовать 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.

264 Развитые динамические технологии 2. index.html Создайте документ с фреймами, убедитесь, что фреймы с динамическим содержанием имеют названия (рис. 14.8). Названия будут использоваться в DOM, созданной на шаге 1 (листинг 14.8). 3. content.html Теперь создайте HTML-документ, содержащий объекты, которые требуется контролировать из другого фрейма, и включите туда позиционированные объекты, которыми позволяет управлять JavaScript, и их ID (листинг 14.9). 4. controls.html Создайте HTML-документ, управляющий элементом второго фрейма. Необходимо импортировать код findDOMFrame.js, созданный на шаге 1, и добавить DHTML-функцию, которую вы хотите использовать. Функцию следует слегка изменить, чтобы ей можно было передавать имя фрейма, которое наряду с objectID и withStyle создает DOM (листинг 14.10). В этом примере показано, как перемещать объекты из фрейма во фрейм. Однако вы можете применять любую функцию, управляющую содержанием фреймов. Окно также представляет собой фрейм. С помощью описанного метода устанавливают связи между двумя открытыми окнами, если у них есть имена.

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

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

Рис. 14.8. Набор фреймов устанавливается из index.html Листинг 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"> </div> </body> </html>

Листинг 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>

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

Позиционирование окна браузера При создании интерфейса пользователя в 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 2. moveBy(10,15) В сценарий JavaScript добавьте moveBy(dx,dy). Эта встроенная функция JavaScript перемещает окно браузера на указанное расстояние (dx,dy) по осям Х и Y (рис. 14.11).

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

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

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

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

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

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

Открытие и закрытие нового окна браузера 1. index.html Создайте новый файл и сохраните его как index.html. В нем будут содержаться элементы управления, которые используются при открытии и закрытии всплывающего окна (листинг 14.12). 2. varnewWindow=null; Инициализируйте переменную newWindow, которая является указателем на объект, соответствующий всплывающему окну. Значение null означает, что окно не создано. 3. functionopenWindow(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 Листинг 14.12 (окончание)

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>

новое окно, используя следующие параметры: – contentURL является именем HTMLфайла, который нужно поместить в новое окно; – windowName представляет собой имя нового окна; – windowWidthи windowHeight определяют ширину и высоту нового окна. Метод newWindow.focus() помещает окно на передний план. functioncloseWindow(){...} В сценарий JavaScript добавьте функцию closeWindow(), которая проверяет, открыто ли окно. Если окно открыто, функция закрывает его и присваивает переменной newWindow значение null. functiontoggleWindow(contentURL, ->windowName,windowWidth, ->windowHeight){...} В код JavaScript добавьте функцию toggleWindow(). Она представляет собой комбинацию функций, описанных на шаге 3 и 4, однако открывает окно только в том случае, если переменной newWindow присваивается значение null (закрыто). В противном случае она закрывает окно. onUnLoad="closeWindow()" Вы можете добавить обработчик события onUnLoad, чтобы новое окно закрывалось, когда закрывается расположенная в нем страница. Этот обработчик событий препятствует возникновению нового окна, когда пользователь уходит с родительской страницы. openWindow('newWindow.html', ->'myNewWindow',150,50) В код HTML добавьте вызов функции openWindow(). Он может быть частью обработчика события (см. шаг 6) или частью сценария JavaScript в описании ссылки.

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

Определение содержания всплывающего окна 1. newWindow.html Создайте новый файл и сохраните его как newWindow.html. Он будет загружаться во всплывающем окне (листинг 14.13). Как и в любой Web-странице, в этом документе можно помещать любую информацию. 2. functioncloseWindow(){...} В сценарии JavaScript добавьте функцию closeWindow() в только что созданный файл. Если ее запустить, всплывающее окно закроется. 3. onUnLoad="opener.newWindow=null;" В тэг <body> добавьте обработчик событий onUnLoad, который присваивает переменной newWindow значение null, когда окно закрыто. Эта переменная сообщает открывающему окну, что всплывающее окно закрывается. 4. onLoad="window.moveTo(100,100)" Чтобы при первом открытии переместить окно в заданную позицию на экране, в тэг <body> добавьте обработчик событий onLoad (см. раздел «Позиционирование окна браузера»). 5. <ahref="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(). Но иногда полезно использовать и две другие, так как в некоторых случаях необходимо точно знать, открыто окно или нет.

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

При создании страниц с фреймами я предпочитаю применять пункт 4 приведенного выше списка. Событие onUnLoad помещается в тэг <frameset>. Когда посетитель покидает сайт и страница закрывается, всплывающее окно исчезает. Если вам потребуется открыть несколько окон, в сценарии может возникнуть ошибка, поскольку нельзя каждый раз пользоваться переменной newWindow. Вместо этого для каждого окна придется добавлять отдельную функцию (openWindow1(), openWindow2() и т.д.) и использовать новое имя (newWindow1, newWindow2 и т.д.)1.

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

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

Размеры окна При открытии нового окна в 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 Листинг 14.14 (окончание)

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 пикселов

Изменение размеров окна 1. functionchangeWindowSize ->(windowWidth,windowHeight){...} В сценарий JavaScript добавьте функцию changeWindowSize(). Сначала она использует метод определения возможностей, чтобы установить, реально ли выяснить внешнюю ширину окна браузера. Если ей это удается, значит, браузер принадлежит к типу Netscape (см. раздел «Размеры окна браузера» в главе 12). Затем функция применяет метод resizeTo() для того, чтобы поменять размеры окна на windowWidth и windowHeight (рис. 14.14). 2. functionmagnifyWindow ->(dwindowWidth,dwindowHeight){...} В код JavaScript добавьте функцию magnifyWindowSize(). Сначала она использует метод определения возможностей, чтобы установить, реально ли выяснить внешнюю ширину окна браузера. Если ей это удается, значит, браузер принадлежит к типу Netscape. Затем функция применяет метод resizeBy() для того, чтобы вычесть из размеров окна или добавить к ним значения dwindowWidthи dwindowHeight(рис. 14.15). 3. functionfillScreen(){...} В код JavaScript добавьте функцию fillScreen(). Сначала она использует метод определения возможностей, чтобы установить, реально ли выяснить внешнюю ширину окна браузера. Если ей это удается, значит, браузер принадлежит к типу Netscape. Затем функция находит ширину и высоту действительной области экрана, перемещает верхний левый угол окна в верхний левый угол экрана и изменяет размеры окна до размеров действительной области экрана (рис. 14.16).

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

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

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

15 Использование объектной модели документа (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-правила и определения, таблицы стилей будут при этом рассматриваться как объекты.

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

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

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

Как изменить определения 1. <scriptscr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, нужно добавить код findDOM. Для этого создайте внешний текстовый файл и затем импортируйте его на ту страницу, где он будет применяться (см. «Использование общей для браузеров DOM» в главе 11). 2. functionchangeStyle(objectID, ->styleName,newVal){...} В сценарий JavaScript добавьте функцию changeStyle(). При обращении к объекту она использует его ID, который передается в функцию как переменная objectID. Таким образом создается DOM (см. «Построение общей DOM» в главе 11). Затем функция при помощи DOM заменяет стиль, который она получила как styleName, на новое значение (newVal). 3. #object1{...} Установите ID объектов с помощью CSS-свойств, которые вы хотите изменить. 4. <divid="object1">...</div> Установите CSS-слои. 5. onClick="changeStyle('object1', ->'fontSize,'18px')" Чтобы запустить функцию, созданную на шаге 2, добавьте обработчик событий. Передайте функции ID объекта, к которому вы хотите обратиться, свойство стиля, которое требуется изменить, и новое значение.

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

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

<html> <head> <script scr="findDOM.js"></script> <script> function changeStyle(objectID,stylename, ->newVal) { var dom = findDOM(objectID,1);

Изменение определения 277 Листинг 15.1 (окончание)

dom [styleName] = newVal; } </script> <style type="text/css"> #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>

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

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

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

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

Изменение CSS-класса объекта 1. <scriptscr="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно обращается к объекту на экране, нужно включить код findDOM. Для этого создайте внешний текстовый файл и затем импортируйте его на ту страницу, где он будет использоваться. 2. functionsetClass(objectID,newClass) ->{...} В сценарий JavaScript добавьте функцию setClass(). При обращении к объекту она использует его ID, который передается в функцию как переменная objectID. Таким образом создается DOM. Затем функция с помощью DOM изменяет имя класса, применяемого к объекту, на новое (newClass). 3. #object1{...} Установите ID слоев с помощью любых стилей по вашему желанию. 4. .copyTiny{...} Определите классы, которые будут применяться к объектам.

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

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

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

<html> <head> <script scr="findDOM.js"></script> <script> function setClass(objectID,newClass) { var dom = findDOM(objectID,0); dom.className = newClass; } </script> <style type="text/css"> #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';">

5. onmouseover="setClass('object1', ->'copyHuge');" Чтобы вызвать функцию, созданную на шаге 2, добавьте обработчик событий. Передайте функции ID объекта, к которому вы хотите обратиться, и название стиля, который требуется применить к объекту. 6. <divid="object1">...</div> Установите CSS-слои.

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

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>

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

Добавление нового правила В данном разделе описывается работа только с Internet Explorer. Умение изменять классы вам очень пригодится в дальнейшем (см. предыдущий раздел). Но что делать, если требуется добавить правило, которое в данный момент не существует, или заменить имеющееся (рис. 15.5 и 15.6)? Сначала следует добавить в тэг <style> ID, с помощью которого он становится доступным из сценария (листинг 15.3). Затем для доступа к таблице стилей можно использовать JavaScript. 1. functionaddARule(selector,definition) ->{...} В сценарий JavaScript добавьте функцию addARule(). Она привносит в таблицу стилей, которая будет определена на шаге 2, новое правило. С этой целью используется имя селектора, для которого добавляется правило (см. «Типы HTML-тэгов» в главе 1), и определения, которые вы хотите применить к данному селектору. 2. <styleid="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 Листинг 15.3 (окончание)

</style> </head> <body> <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>

3. onClick="addARule('body','background->color:red;color:white');" Чтобы вызвать функцию addARule(), созданную на шаге 1, добавьте обработчик событий. Передайте функции название селектора, в который требуется добавить правило, и определения, которые необходимо приписать этому правилу.

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

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

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

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

282 Динамические технологии CSS 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 –&gt; <span onClick= ->"document.styleSheets.strangeStyle. ->disabled=true; document.all.styleOff. ->style.display='none';">here</span> ->&lt;– </span> </body> </html>

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

Слои Netscape

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

284 Слои Netscape

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

<layer>. Его эквивалент в CSS – <div style="position:absolute;">; <ilayer>. Его эквивалент в CSS – <span style="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 Explorer и в Netscape 6 обработчики событий, связанные с указателем мыши, допустимо помещать в любой HTML-тэг. Однако в Netscape 4 их можно запускать только в тэгах <a> или <layer>.

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

Что такое слой Netscape 285 Таблица 16.1. Тэги <layer> Тэг

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

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

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

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

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

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

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

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

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

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

Значения

Действие

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

name

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

left

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

top

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

pageX*

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

pageY*

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

z-index

Порядок уровня в стеке по отношению к другим

above*

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

below*

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

width

Длина по горизонтали

<percentage> height

Длина по вертикали

<percentage> clip

<length,length>

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

visibility

show

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

hide inherit bgcolor

<color>

Цвет фона слоя

background-color

<color>

Аналогично предыдущему

background

<url>

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

background-image

<url>

Аналогично предыдущему

scr*

<url>

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

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

Создание слоя 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. <layertop="150"left="300" ->bgcolor="#666666"> В HTML-документе создайте слой с помощью тэга <layer> или <ilayer>. В табл. 16.2 перечислены атрибуты, которые можно добавить в тэг, а также действия, которые эти атрибуты производят со слоем (листинг 16.1). 2. <h2>Layer1</h2> В тэг <layer> поместите содержимое слоя. Оно ничем не отличается от обычного содержимого HTML-документа. 3. </layer> Закройте тэг с помощью соответствующего ему закрывающего тэга (</layer> или </ilayer>). Inline-тэг <ilayer> определяется так же, как и тэг <layer>, описанный в этом разделе.

288 Слои Netscape

Импорт внешнего содержимого с помощью слоев 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. <layerid="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>

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

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

290 Слои Netscape

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

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

Получение доступа к слоям 1. functiontoggleLayerViz(objectID, ->state){...} В сценарий JavaScript добавьте функцию, которая будет менять одно или несколько свойств слоя Netscape (листинг 16.4). Для этого получите доступ к слою, используя его ID в массиве слоев: document.layers[objectID].visibility= ->state; В данном примере изменяется свойство visibility, но подобным образом можно получить доступ к любому свойству. 2. <layerid="layer1"...> Создайте слой с помощью атрибута id. Чтобы запустить функцию, созданную на шаге 1, добавьте обработчик событий в тэг <layer>: onmouseover="toggleLayerViz('layer2', ->'hide')" Когда указатель мыши проходит над слоем, обработчик вызывает функцию toggleLayerViz() и передает ей ID того слоя, состояние которого требуется поменять.

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

Доступ к слоям с помощью JavaScript 291 Таблица 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 внешнего содержания для слоя

292 Слои Netscape Допустимо изменять источник файла (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;} } </script> </head> <body> <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"> <center><h2>Layer 2</h2></center> </layer> <layer id="layer3" bgcolor="#666666" ->width="100" height="100" top="200" ->left="100" onmouseover= ->"toggleLayerViz('layer1','hide');" ->onmouseout="toggleLayerViz('layer2', ->'show');" visibility="show"> <center><h2>Layer 3</h2></center> </layer> </body> </html>

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

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

294 Слои Netscape

Увеличение размеров слоя 1. functionclipLayer(objectID,x,y){...} Определите функцию, использующую объект layer, и метод, который хотите применить к уровню (листинг 16.5). В этом примере для изменения размера layer1 служит метод resizeTo: document.layers[objectID].resizeTo(x,y) Похожим образом можно задействовать любой метод из табл. 16.4. 2. <layerid="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);} } </script> </head> <body> <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). Рис. 16.6. Страница отображается в Netscape 4, в слой импортируется внешний файл

Добавление содержимого в тэг <nonlayer> 1. <ilayerid="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>, но в нем доступна ссылка

296 Слои Netscape С помощью тэга <nolayer> в документе откройте область, не содержащую слоев. 3. <ahref="daily_special.html">TheDaily ->Specialsareavailablehere!</a> Добавьте содержимое, которое вы хотите отобразить в браузерах, не поддерживающих слои Netscape. В этом примере добавлена ссылка на файл, который импортируется на шаге 1. 4. </nolayer> Закройте тэг <nolayer>.

Листинг 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">&lt;&lt;Return to ->Menu</a> </nolayers> <!-HTML CONTENT GOES HERE ->

Internet Explorer для Windows

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

298 Internet Explorer для Windows

Перетекание объектов Безусловно, наиболее популярным способом перехода от элемента к элементу является перетекание одного объекта в другой (фединг). В 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 Internet Explorer и установите длительность 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 Листинг 17.1 (окончание)

<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>

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

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

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

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

Значение

BoxIn

BoxOut

CircleIn

CircleOut

WipeUp

WipeDown

WipeRight

WipeLeft

VerticalBlinds

HorizontalBlinds

CheckerboardAcross

ChekerboardDown

RandomDissolve

SplitVerticalIn

SplitVerticalOut

SplitHorizontalIn

SplitHorzontalOut

StripsLeftDown

StripsLeftUp

StripsRightDown

StripsRightUp

RandomBarsHorizontal

RandomBarsVertical

Random

300 Internet Explorer для Windows

Установка перехода между страницами 1. <meta http-equiv="Page-Enter" Поместите тег <meta> в заголовке документа (листинг 17.2). Для события PageEnter установите атрибут 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 -&gt; </a> </center> </body> </html>

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

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

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

Рис. 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>

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.

302 Internet Explorer для Windows

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

○ ○ ○ ○ ○

○

Использование инструментов для создания DHTML и CSS

○

Часть III ГЛАВА 18 ◆ Знакомство с GoLive ............................................... 304 ГЛАВА 19 ◆ Введение в Dreamweaver .......................................... 317

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

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

Интерфейс GoLive 305

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

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

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

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

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

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

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

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

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

Интерфейс GoLive 307

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

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

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

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

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

308 Знакомство с GoLive

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

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

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

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

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

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

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

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

Внедрение CSS 309 4. В палитре Inspector установите те свойства CSS, которые вы будете использовать (см. ниже раздел «Таблицы стилей в палитре Inspector»). 5. После определения всех необходимых свойств и правил CSS вернитесь в окно документа. 6. Если потребуется указать какие-либо классы, перейдите в режим разметки страницы и воспользуйтесь таблицей стилей палитры Inspector (рис. 18.10). 7. Можно также установить и внешние CSS-файлы, а затем связать их с Webстраницей при помощи GoLive. Рис. 18.10. При выделении какого-либо элемента в режиме разметки страницы активизируется палитра Inspector, которая позволяет получить доступ к стилям класса

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

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

Связывание внешнего файла и 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, чтобы добавить связь с внешним файлом. Пустая ссылка на внешний файл появится в окне стилей страницы.

310 Знакомство с GoLive 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.13. Если выбрана ссылка на внешнюю таблицу стилей, вы можете ввести ее URL при помощи палитры Inspector

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

Внедрение CSS 311

Рис. 18.15. Закладка Font Controls

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

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

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

312 Знакомство с GoLive

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

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

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

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

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

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

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

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

Добавление CSS-слоя на Web-страницу 1. В режиме разметки страницы в окне документа дважды щелкните по кнопке Floating Block (Плавающий блок) в палитре Object (Объект) – рис. 18.22. Теперь этот слой появится в окне документа как пронумерованный прямоугольник. Числа расположены в порядке создания слоев. 2. Переместите курсор к любому краю слоя таким образом, чтобы стрелка сменилась изображением руки (рис. 18.23). Затем нажмите кнопку мыши, чтобы выделить или перетащить объект в любое место на экране. 3. Для изменения размера выделенного блока, перетащите один из манипуляторов, расположенных в каком-либо из его углов (рис. 18.24).

314 Знакомство с GoLive

Изменение свойств CSS-слоя 1. Выделив слой в режиме разметки страницы, при помощи палитры Inspector настройте необходимые свойства (рис. 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 позволяет изменять свойства слоя

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

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

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

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

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

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

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

1. Установите CSS-слой (см. раздел «Создание слоя») и поместите в него какоелибо содержимое (рис. 18.27). 2. Выделив слой, нажмите на кнопку Timeline (Временная шкала) в верхнем правом углу окна документа, между кнопками CSS и JavaScript (рис. 18.28). Откроется окно редактора Timeline Editor (рис. 18.29).

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

316 Знакомство с GoLive 3. Не снимая выделения со слоя, в режиме разметки страницы в палитре Inspector выберите кривую линию из ниспадающего меню Animation (Анимация). Затем нажмите на кнопку Record (Запись) – рис. 18.30. 4. Переместите объект по произвольной траектории (рис. 18.31). В окне редактора временной шкалы вы увидите прямоугольник, в котором будет указана каждая точка траектории движения (рис. 18.32). Эти точки называются опорными кадрами. 5. Повторите шаги 1–4 для каждого слоя анимации.

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

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

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

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

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

Введение в Dreamweaver

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

318 Введение в Dreamweaver

Интерфейс Dreamweaver

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

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

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

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

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

Интерфейс Dreamweaver 319

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

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

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

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

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

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

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

320 Введение в Dreamweaver

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

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

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

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

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

Внедрение CSS 321

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

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

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

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

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 Document Only (Только этот документ), чтобы включить созданный вами стиль в тэг <style>, затем щелкните по кнопке OK.

322 Введение в Dreamweaver 5. В окне определения стиля выставьте только те определители CSS, которые будете использовать (см. раздел «CSSредактор»). Вы можете в любой момент щелкнуть по кнопке Apply (Применить), чтобы войти в окно документа и посмотреть, какие изменения внесены. 6. После определения CSS-правила нажмите на кнопку OK, чтобы вернуться в окно документа. 7. Если вы настраиваете какой-либо класс, используйте палитру CSS Style, чтобы установить класс для выделенного объекта в окне документа (рис. 19.8). Процесс добавления новых внешних таблиц стилей схож с добавлением стиля к странице. Dreamweaver автоматически настраивает и проверяет связи.

Рис. 19.8. Было добавлено два стиля. Первый – bodycolor – встроен в саму страницу, а второй – sidecolor – располагается во внешнем файле (на иконке, отмечающей этот стиль, присутствует звено цепочки)

Присоединение внешнего CSS-файла 1. Создайте новый или откройте уже существующий HTML-файл. 2. В палитре CSS Styles нажмите на кнопку New Style (Создать стиль). Откроется диалоговое окно. 3. Выберите типы CSS-селектора. Для присвоения ID укажите опцию Redefine HTML Тag (Переопределить HTML-тэг) или Use CSS Selector (Использовать CSS-селектор). 4. Удостоверьтесь, что выделена кнопка, находящаяся рядом с пунктом Next Style Sheet File (Следующий файл с таблицами стилей). 5. Настройте те опции CSS, которые вы будете использовать. С помощью кнопки Apply вы можете в любой момент войти в окно документа и посмотреть, какие изменения внесены.

6. После определения CSS-правил нажмите на кнопку OK, чтобы вернуться в окно документа. 7. При настройке класса используйте палитру CSS Style, чтобы установить класс для выделенного объекта в окне документа. Dreamweaver не позволяет добавлять классы, таким образом, имеются только стандартные классы. Однако допускается добавлять правила классов непосредственно в окне редакторе кода.

CSS-редактор 323

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

Рис. 19.9. Страница Type

Type (Тип). На этой странице устанавливаются атрибуты шрифта (рис. 19.9); Background (Фон). Здесь настраиваются свойства фона элемента (рис. 19.10); Block (Блок). Отсюда можно задать свойства абзацев (рис. 19.11); Box (Поля и внутренние отступы). Эта страница предназначена для указания полей элемента и внутренних отступов (рис. 19.12);

Рис. 19.10. Страница Background

Рис. 19.11. Страница Block

Рис. 19.12. Страница Box

324 Введение в Dreamweaver

Border (Рамка). Здесь настраивается вид рамки элемента (рис. 19.13); List (Список). С этой страницы вы можете установить вид списков (рис. 19.14); Positioning (Положение). Элементы управления данной страницы позволяют определить положение объекта (рис. 19.15); Extensions (Дополнительно). На этой странице расположены элементы управления настройкой дополнительных свойств, зависящих от типа браузера, под который оптимизируется страница, – например, cursor и т.п. (рис. 19.16).

Рис. 19.14. Страница List

Рис. 19.15. Страница Positioning

Рис. 19.13. Страница Border

Рис. 19.16. Страница Extensions

Создание дополнительного слоя 325

Создание дополнительного слоя Вы создаете CSS-слой, присваивая объекту ID и определяя его местоположение на странице (абсолютное или относительное) при помощи тэга <div> (см. раздел «Создание объекта» в главе 11). Dreamweaver обеспечивает простой доступ к управлению слоями. Рис. 19.17. Перетаскивая пиктограмму Draw Layer из палитры Objects в окно документа, вы добавляете слой к Web-странице

Рис. 19.18. Чтобы выделить слой, щелкните по любой из его границ

Рис. 19.19. Вы можете изменять ширину и/или высоту слоя, перемещая маркер на нужной стороне

Добавление слоя на Web-страницу 1. Находясь в режиме разметки страницы в окне документа (или в режиме просмотра исходного кода и разметки страницы), перетащите пиктограмму Draw Layer (Добавить слой) из палитры Objects в окно документа (рис. 19.17). Добавленный слой появится в окне документа в виде прямоугольника. 2. Переместите указатель мыши к любому краю слоя таким образом, чтобы курсор превратился в руку (рис. 19.18). Вы можете щелчком мыши выделить этот слой или передвинуть его в любое место экрана. 3. Чтобы изменить размер выделенного слоя (прямоугольника), перетащите один из маркеров, находящихся в углах выделенной области (рис. 19.19).

326 Введение в Dreamweaver

Изменение свойств 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> или добавление его из внешнего файла, но метод, используемый Dreamweaver, также имеет право на жизнь.

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

Создание анимации 327

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

Рис. 19.21. Когда документ загружается на Web-страницу, буквы начинают перемещаться по заданным траекториям и составляют имя ALICE

Ранее было показано, как создавать простые поточечные анимации (см. раздел «Анимационные объекты» в главе 14). Имитацию движения объекта по кривой или аналогичную анимацию нескольких слоев удобнее задать при помощи программ, подобных Dreamweaver. Представьте, что вам необходимо отобразить каждый пиксел изображения в отдельности, определив для каждого положение и цвет. Не так уж и весело, правда? И в данном случае на помощь приходят редакторы изображений, которые берут львиную долю рутинной работы на себя. То же самое касается и DHTMLанимации. Вы можете создавать анимацию вручную, но это достаточно трудоемко, а кроме того, велика вероятность допустить ошибку. К тому же возникает множество проблем при необходимости быстрого обновления. В рассматриваемом далее примере вводится пять слоев, каждый из которых содержит одну букву (рис. 19.21). Буквы, перемещаясь по экрану в течение нескольких секунд, составят имя ALICE.

Создание анимации при помощи Dreamweaver Рис. 19.22. Первый слой в исходном положении

Рис. 19.23. Так выглядит окно Timelines после первой загрузки (до анимации объектов)

1. Создайте CSS-слой (см. раздел «Создание дополнительного слоя») и введите требуемое содержимое (рис. 19.22). 2. Выберите пункты Window ⇒ Timelines (Окно ⇒ Временные шкалы). Откроется окно Timelines (рис. 19.23).

328 Введение в Dreamweaver 3. Выделив в окне документа созданный на шаге 1 слой, выберите из ниспадающего меню (оно расположено в правом верхнем углу) пункт Record Path of Layer (Записать путь слоя) – рис. 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 Можно использовать опорные кадры для изменения видимости объекта и его z-индекса. В приведенном примере изображение Алисы появляется только после того, как буквы составят ее имя (рис. 19.27). Чтобы добиться этого, пометьте кадры, по достижении которых программа отобразит данный слой на экране или скроет его. Затем снимите флажок Visible в свойствах объекта. Объект будет невидимым, пока вы не выберете другой кадр и не установите этот флажок.

Рис. 19.26. Теперь окно Timelines включает все пять слоев

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

330 Введение в Dreamweaver Окно Timelines Web-дизайнеры долгое время работали с временными шкалами, чтобы создавать и контролировать анимацию. Большинство коммерческих программ для создания анимации используют эту технологию, и в Dreamweaver также применяется именно этот способ. Окно Timelines позволяет не только перемещать объекты по экрану, но и указывать, когда именно надо начать движение или сколько для этого потребуется времени. Работа в окне Timelines на первый взгляд может показаться сложной, но на самом деле все достаточно просто. Окно состоит из следующих частей: Playback controls (Управление воспроизведением). При помощи данного инструмента можно переместиться в любой момент времени воспроизведения анимации; Keyframe editing (Редактирование опорных кадров). Инструмент позволяет управлять позиционированием и видимостью объектов в любой момент; FPS controls (Управление FPS). Устанавливая частоту кадров (их число в секунду), вы можете изменять качество воспроизведения; Autoplay and looping controls (Управление автовоспроизведением и повторением). Вы можете запустить созданную анимацию сразу по загрузке страницы и при желании повторять ее бесконечное количество раз.

○ ○ ○ ○ ○

○

Динамические Web-сайты

○

Часть IV ГЛАВА 20 ГЛАВА 21 ГЛАВА 22 ГЛАВА 23 ГЛАВА 24 ГЛАВА 25 ГЛАВА 26 ГЛАВА 27 ГЛАВА 28 ГЛАВА 29

◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆

Понятие о динамических Web-сайтах ..................... 332 Создание динамического Web-сайта ...................... 344 Разметка Web-страницы ......................................... 355 Импорт внешнего содержимого ............................. 381 Навигация Web-сайта .............................................. 389 Средства управления ............................................... 419 Специальные эффек ты ........................................... 451 эффекты Му ль тиме диа ........................................................... 476 Муль льтиме тимедиа Отладка кода ........................................................... 494 Буд ущее динамического Internet ............................ 504

Понятие о динамических Web сайтах

Пусть заданы точки A и B, тогда отрезок, соединяющий их, – кратчайший путь из точки A в точку B. Движение по этому отрезку, без каких либо отклонений и прерываний, – единственный быстрый способ попасть из одной точки в другую. Все ссылки, по которым передается информация, являются в основном линейными. Очень часто в повседневной жизни мы сталкиваемся с последовательным, прямым доступом к информации. Так, услышав какое-нибудь новое слово, вы направляетесь к книжной полке, берете энциклопедию и ищете нужное слово – это и есть прямой доступ к информации. Вы просматриваете видеозапись или пролистываете книгу до интересующего вас места – это также пример прямого доступа к информации. Как показывает практика, данный метод является наиболее удобным. Однако человек мыслит не прямолинейно: он мыслит хаотично, запутанно, и зачастую трудно сразу сформулировать какую-то определенную мысль. Следовательно, далеко не всегда простые прямые связи могут отразить пожелания человека. Исследования, поиск наилучших решений поставленной задачи, метод проб и ошибок – таков

Отличительные черты динамического Web-сайта 333 наш путь познания. Очень часто какиелибо догадки позволяют нам достичь поставленной цели. Мы крайне редко думаем прямолинейно, все поставленные перед нами задачи, все проблемы мы решаем динамически (рис. 20.1).

Рис. 20.1. Первая модель представляет линейные пути от A к B, а далее к C и D. Это типичная линейная модель. По такому принципу вы просматриваете кинофильм: от начала и до конца. Динамическая модель (снизу) позволяет переходить от одной точки к другой, минуя промежуточные, находить альтернативные варианты решения поставленной задачи (d) и находить новую информацию (4)

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

Отличительные черты динамического Web-сайта Термин «динамика» может означать многое, его значения в большой степени зависят от сферы и времени применения данного слова. Под этим термином понимают как анимацию, так и системы мультимедиа. Всемирная сеть представляет, по сути, высоко динамичную среду, в основе функционирования которой лежит использование гипертекста, помогающего разработчикам Web-приложений связывать информацию и создавать более понятное человеку окружение. Применяя CSS, JavaScript и Document Object Model (DOM), можно создавать динамические Web-сайты.

334 Понятие о динамических Web-сайтах На сегодняшний день большинство сайтов статичны. Загрузив однажды подобную страницу, вы едва заметите какие-либо изменения. DHTML позволяет Web-разработчикам преобразовывать их творения и создавать интерактивные страницы, которые быстро реагируют на действия посетителя. Динамические Web-страницы должны удовлетворять как минимум следующим критериям (рис. 20.2):

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

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

Рис. 20.2. Что же означает термин «динамический»? Вот несколько вариантов ответа

Что такое гипертекст 335

Что такое гипертекст

Рис. 20.3. Сайт, посвященный астрономической картине дня, поможет вам понять отличия гипертекста от навигации. Ссылки в основном тексте дают доступ к более подробной информации о встреченном термине (это гипертекст), а навигационные ссылки открывают другую страницу сайта

Рис. 20.4. Щелкнув по ссылке гипертекста, вы переходите на страницу, которая дает полную информацию о термине «regolith»

Многие путают гипертекст с навигационными ссылками. Действительно, здесь не так уж сложно ошибиться. В Web как гипертекст, так и навигационные ссылки определяются при помощи одного и того же HTML-кода – <a>…</a>. Навигационные ссылки используются для последовательного перемещения из раздела в раздел. А гипертекст позволяет посетителю после щелчка по слову, фразе или изображению на Web-странице получить более подробные сведения по интересующему предмету. Благодаря гипертексту простая страница теоретически может содержать бесконечный объем информации (рис. 20.3 и 20.4). На практике, конечно, нельзя объять необъятное, но все же нетрудно включить достаточно данных, которые способен просмотреть посетитель. Авторы, подготавливающие содержание сайта, указывают, в каких случаях необходимы гипертекстовые ссылки. При создании сайта Web-разработчик преследует две цели: помочь посетителям как можно быстрее найти нужные сведения и позволить просматривать, определять и обсуждать информацию при помощи гипертекста. Internet является не только огромнейшей базой знаний или средством интеллектуального и эмоционального развития, таким как книга, когда автор через произведение доносит людям свои чувства, эмоции и переживания. Internet представляет собой еще и средство непосредственного общения людей: возможность осуществлять интерактивную переписку, принимать участие в различных форумах, происходящих в режиме реального времени, и т.д. Используя Глобальную сеть, многие люди общаются друг с другом, обмениваются опытом.

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

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

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

отображайте только важную информацию. Информация становится знанием лишь в том случае, когда понятна ее важность. Более того, необязательные сведения могут отвлекать, а большой объем данных, скорее всего, запутает посетителя вашей страницы. Используйте DHTML, чтобы при необходимости отображать и скрывать важную информацию; делайте изменения заметными. Зачастую мы не замечаем изменений, происходящих вокруг нас. Изменения в содержании Web-страницы должны происходить немедленно по запросу посетителя и быть заметными; помогайте определить местоположение и направление. Существует главным образом один недостаток, касающийся всей сети, – в ней легко заблудиться. По сравнению с окружающим нас миром, в котором можно хотя бы оглянуться, чтобы определить, откуда мы пришли и куда направляемся, многие Web-сайты кажутся лабиринтами. Используйте DHTML, чтобы помочь посетителям сориентироваться в виртуальном пространстве; не будьте диктатором, предоставьте свободу выбора. Главная цель любого сайта – позволить посетителям свободно перемещаться по его содержимому. Направьте посетителей к нужной им информации, однако позвольте им добираться теми путями, которые они изберут. Ссылки, которые вы включаете в Web-страницу, важны так же, как размещенные на ней текст и графические объекты.

Динамический дизайн 337

Размещение объектов на Web-странице

Рис. 20.5. Так выглядит страница, при создании которой использовался стиль размещения Unrestrained

Рис. 20.6. Сайт Wired News использует стиль размещения Unrestrained: содержимое занимает все окно браузера

Вы можете свободно изменять размер активного окна, разрешение экрана, размер шрифтов, однако необходимо тщательно продумать, как будет выглядеть ваша страница, прежде чем приступить к действиям. Например, вам известно, что сайт будет располагаться в окне браузера, но будут ли размеры окна достаточными, чтобы вместить всю запланированную информацию? Перед тем как начинать реализацию проекта, каждый Web-разработчик должен тщательно продумать, какой из четырех основных стилей размещения объектов будет использоваться. Стили состоят из двух основных частей. Первая часть – область содержания, которая включает навигацию, заголовки, графику и текст – другими словами, все, интересующее посетителя. Другой составляющей любого стиля является «заполнитель». Независимо от того, пуст «заполнитель» или нет, он предназначен только для заполнения пустого пространства в окне браузера. Если вы хотите сделать страницу действительно привлекательной, очень важно найти золотую середину между размерами областей содержания и «заполнителя». Ниже перечислены четыре основных стиля организации страницы, в которых соблюдается этот баланс:

Unrestrained (Неограниченный). Содержание в окне располагается по горизонтали слева направо и по вертикали сверху вниз, таким образом, окно браузера задействуется полностью (рис. 20.5). Этот дизайн исключает необходимость в «заполнителе». Но широкие колонки текста – характерный признак стиля Unrestrained – не всегда легко читать. Новостной сайт Wired (рис. 20.6) использует стиль Unrestrained, позволяя

338 Понятие о динамических Web-сайтах

содержимому в центральной колонке занимать все свободное пространство; 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

Размещение объектов на Web-странице 339

Fixed size (Фиксированный размер). Как высота, так и ширина области отображения содержания ограничены (рис. 20.11). Вы можете задать такое расположение двумя способами. Первый заключается в ограничении области при помощи фреймов извне. На Web-сайте Portishead (www.portishead.co.uk) используется именно этот способ (рис. 20.12). Другой метод – открыть в браузере новое окно фиксированного размера (см. раздел «Новое окно браузера» в главе 14).

Рис. 20.10. Я использовал стиль Fixed height для сайта дочери, чтобы создать атмосферу кино

Рис. 20.11. Стиль размещения Fixed size

Рис. 20.12. Web-сайт Portishead применяет стиль Fixed size. Это помогает контролировать область экрана, в которой будет отображаться содержимое, но использование такого стиля приводит к тому, что страница отображается одинаково и не зависит от размера окна браузера и установленного разрешения монитора

340 Понятие о динамических Web-сайтах

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

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

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

указать посетителям дорогу к исходной странице. Самый простой способ – поставить на страницах метки (обычно начиная с главной), чтобы посетители могли определить свое местонахождение: Home > Forest > More forest > Witch’s house. Этот путь отражает логическую последовательность событий, и каждый заголовок представляет собой ссылку, помогающую вернуться назад. Подобно тому, как Тезей вышел из лабиринта Минотавра, посетители вашего сайта смогут вернуться к началу своего путешествия; предупреждайте, если навигация неосуществима. Очень полезно уметь ориентироваться в Сети. Посетители, уже знакомые с вашим сайтом, могут не понять некоторые из тех терминов, которыми вы описываете навигацию. Недовольство пользователей Сети часто вызвано тем, что во время поиска необходимой информации их направляют по неверному пути. Кроме того, им приходится ждать загрузки ненужных страниц. Добавьте к терминам однодва поясняющих предложения, чтобы подсказать посетителям, что они найдут среди приведенных ссылок. Если у вас на экране нет места для отображения подобной информации, используйте DHTML (см. раздел «Всплывающий гипертекст» в главе 25); предоставьте посетителю свободу действий. На сегодняшний день программное обеспечение позволяет пользователям перемещать по экрану палитры управления, добавлять инструменты и настраивать интерфейс. Web ограничивает пользовательский контроль над интерфейсом, однако желательно включить в сайт некоторые полезные возможности. В маленьком

Навигация: рекомендации и запреты 341

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

Запреты Теперь, когда вы узнали о рекомендациях, я расскажу о том, чего следует избегать при проектировании системы навигации:

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

посетитель вообще не пользуется. Рассмотрим банковский сайт, который предоставляет ряд услуг частным вкладчикам, предпринимателям и корпорациям. На первой странице перечислены все три опции, эта же страница является и отправной точкой в диалоге с посетителем, будь это частное лицо, бизнесмен или представитель компании. Но ссылки на все три категории остаются на экране и при загрузке следующих страниц. Возможно ли, что частный вкладчик вдруг заинтересуется услугами, предоставляемыми компаниям, и перейдет в другой раздел? Маловероятно. Да и очень трудно представить себе, при каком условии это может случиться. Но даже если подобный интерес возникнет, почему бы не вернуться на главную страницу и не начать все оттуда? размещайте навигационные элементы таким образом, чтобы они всегда были доступными. Представьте, что вы набираете письмо в текстовом редакторе. Когда вы доходите до конца области печати, она автоматически увеличивается, и написанный текст смещается вверх, скрывая строку меню. И каждый раз, когда вам необходим доступ к меню, приходится перемещаться к началу письма, чтобы строка меню опять появилась. Подобный процесс не очень-то приятен, однако большинство Web-дизайнеров разрабатывают сайты именно таким образом. Один из способов решения этой проблемы заключается в размещении на странице ссылки Return to top (В начало). Но есть и более изящные выходы из описанной ситуации. Я предпочитаю располагать навигационные элементы во фреймах таким образом, что при прокрутке страницы

342 Понятие о динамических Web-сайтах

они остаются на одном месте и ими всегда можно воспользоваться. Посетителям не приходится нескончаемо долго искать необходимую страницу и тратить свое драгоценное время. Конечно, важно уменьшить размер этих фреймов, чтобы увеличить место для содержимого Web-страницы (см. раздел «Открытие и закрытие фреймов» в главе 22); не путайте типы навигации. Не все типы навигаций создаются одинаковым способом. Web-страницы могут совмещать различные типы, применение какого-либо из них зависит от множества факторов. Посетители используют основную навигацию для перемещения между наиболее важными узлами сайта. Визуализация – наиболее удобный способ различать типы навигаций (см. раздел «Установка сложных ссылок» в главе 24); не полагайтесь на навигацию, встроенную в браузер. Многие посетители являются заложниками встроенных в браузеры навигационных систем. Они удобны, а результат от нажатия кнопок Back (Назад) и Forward (Вперед) вполне предсказуем. Но некоторые люди не умеют пользоваться этой функцией и не смогут добраться до нужного места на сайте, если вы не предоставите им необходимых ссылок. Делайте все, чтобы посетители без труда находили выход с любой страницы вашего сайта. Никогда не заводите их в тупик. Наоборот, создавайте ссылку, которая возвращала бы посетителя на ту страницу, с которой он пришел (см. раздел «Создание кнопки Back» в главе 25). не размещайте одни и те же ссылки на каждой странице. Одна из наиболее распространенных ошибок, допускае-

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

Навигация: рекомендации и запреты 343 Иголка в стоге сена Особенность, отличающая Всемирную сеть от других средств информации, заключается в возможности связывать фрагменты данных таким образом, чтобы указать на их взаимосвязь. Это гипертекст, который и отличает Internet от книг, телевидения, кинематографа и телефонии. Так почему же часто создается впечатление, что большинство Web-страниц и сайтов копируют перечисленные информационные средства? Некоторые разработчики используют индекс-подобные меню, которые не дают посетителю никакого представления о их местонахождении на сайте. Страницы, страницы информации… Читателю приходится перелопачивать весь этот объем, чтобы найти действительно необходимые сведения. Экраны, заполненные графикой, баннерами и различными кнопками… Для их загрузки, наверное, потребуется целая вечность! Еще хуже выглядят страницы, на которых всевозможные ссылки, позволяющие перейти к любому месту сайта, заполняют практически весь экран. В результате поиск нужной ссылки превращается в поиск иголки в стоге сена. Единственный довод, который можно привести в пользу подобных страниц, – это уменьшение времени ожидания. Ведь для того, чтобы изменить содержание Webстраницы, необходимо загрузить еще одну, и, таким образом, посетителю приходиться ждать, ждать и ждать… А ведь время – деньги. Поэтому, чтобы позаботиться о материальном благосостоянии посетителя и не заставлять его терять время, многие Web-дизайнеры размещают все содержание на одной странице. DHTML все меняет. Он позволяет показывать и прятать объекты динамически, формируя содержание Web-страницы в зависимости от нужд посетителей. Различное содержание может быть загружено на одной странице; вы способны отображать то, что нужно, без ожидания загрузки новых страниц.

Создание динамического Web сайта

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

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

Шаг 1. Проектирование 345

Шаг 1.. Проектирование

Сбор и сортировка информации

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

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

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

346 Создание динамического Web-сайта Например:

текст введения; образец раздела; примеры кодов.

Рис. 21.2. Соберите информацию для сайта

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

Рис. 21.3. Определите читательскую аудиторию вашего сайта

Например:

профессиональные Web-разработчики; разработчики-новички; менеджеры Web-проекта.

Формулировка целей Теперь, когда вы знаете, кто будет посещать ваш островок во Всемирной сети, пора, наконец, твердо решить, чего же хотите вы (рис. 21.4). Какую цель вы преследуете, сказав свое слово в безумном Internet-мире? Некоторые Web-сайты подстраиваются под желания своих посетителей, другие могут преследовать самые эгоистичные цели. Но тем не менее вы обязаны знать, чего хотите добиться, проделывая всю эту огромную работу. Например:

предусмотреть место под просмотр примеров; предусмотреть место под загрузку кода; предусмотреть модернизацию и корректировку.

Шаг 1. Проектирование 347

Предоставляемые функции и интерактивность Рис. 21.4. Сформулируйте свои цели

Рис. 21.5. Продумайте предоставляемые функции и интерактивность

Теперь пора определить набор функций и возможностей, которые вы будете использовать, чтобы достичь поставленной цели (рис. 21.5). Нужны ли этому сайту видео и звуковое сопровождение? А как насчет DHTML? Желаете интерактивную навигацию, сэр? А не применить ли CGI? Может быть, Java? Вспомогательные базы данных? Flash? Ищите самый простой способ, чтобы выполнить работу. Например:

навигация: ниспадающее меню; спецэффекты: текст с федингом;

управление: всплывающий гипертекст.

Рис. 21.6. Определите стиль оформления

Стиль оформления Определите, какой стиль оформления в полной мере соответствует тематике сайта и вашим запросам, продумайте набор предоставляемых функций. И, конечно, не забывайте о своих посетителях, попробуйте представить их ожидания. Решите, какую цветовую гамму, какие шрифты и графику вы будете использовать (рис. 21.6). Например:

Рис. 21.7. Схема позволяет логически построить сайт, наиболее важные разделы располагаются на верхнем уровне, более детальные – под ними

разметка: ограниченная высота; цвет: пурпурный, серебряный, зеленый и красный; шрифты: Arial, Arial Black, Trebuchet MS.

348 Создание динамического Web-сайта

Шаг 2.. Разработка

Схема сайта

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

Схема рассматривает сайт как линейный объект, у которого каждый раздел сайта располагается в верхушке схемы, а каждая Web-страница соответствует своей категории (рис. 21.7). Схема сайта отражает его файловую структуру. Хотя существует одно «но»: поскольку схема отображает линейную модель, она может приводить к ошибкам при проектировании Web-сайтов, у которых есть ссылки между разделами.

Создание плана сайта План сайта позволяет вашим клиентам и коллегам (художникам, программистам, менеджерам проекта и т.д.) понять его структуру и наметить общие пути разработки (рис. 21.8).

Рис. 21.8. План сайта очень нагляден и хорошо отображает характер связей между страницами. В данном примере каждый блок – это страница, линии – связи. Блоки со скругленными углами и пунктирными линиями представляют Web-страницы, находящиеся вне сайта

Шаг 2. Разработка 349 Блок-схемы показывают, каким образом работают и взаимодействуют друг с другом различные страницы сайта. Как правило, страницы изображают прямоугольниками, а ссылки – линиями, но вы также можете добавлять и другие условные обозначения: внешние связи, Java-приложения и др. Преимущество блок-схем над простыми схемами заключается в том, что разработчик способен более точно описать характер связей между страницами.

Первый эскиз сайта Выберите стиль разметки Web-страницы (см. раздел «Размещение объектов на Webстранице» в главе 20). Затем на листе бумаги или в графическом редакторе набросайте структуру Web-страницы (рис. 21.9). Не нужно подробно вырисовывать схему каждой создаваемой страницы, просто пометьте, где и какие элементы вы хотите разместить.

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

Создание раскадровки Раскадровка (рис. 21.10) подобна блоксхеме, но с ее помощью можно визуально представить Web-страницу и ее содержание. Обычная блок-схема представляет страницу в виде символа (например, прямоугольника) и не дает ни малейшего представления о ее содержании. Раскадровка отображает разметку каждой страницы и комментарии о работе сайта и позволяет любому человеку, даже не обладающему в полной мере воображением, представить будущий сайт. Это особенно полезно, когда вы описываете

Рис. 21.9. Эскиз сайта позволяет определить, как будут располагаться и взаимодействовать различные элементы

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

Внешний вид определяет первое впечатление В графических редакторах, таких как Photoshop, создание модели сайта основано

на использовании его эскиза (рис. 21.11). Программы, подобные Photoshop и Macromedia Fireworks, позволяют создавать интерактивные графические изображения и подготавливать их для размещения в Web. На этой стадии разработки сайта вы можете свободно экспериментировать с дизайном – еще не поздно все исправить!

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

Шаг 2. Разработка 351

Рис. 21.11. Общий вид Web-сайта и первое впечатление при его загрузке во многом зависят от оформления. Оформление сайтов обычно проводится в графическом редакторе Photoshop. Такие элементы, как текстовые ссылки, должны создаваться при помощи HTML-текста, окончательная отладка – при помощи CSS. В данном примере тип оформления используется временно, в окончательной версии все будет выглядеть иначе

Сетка расположения В вашем распоряжении есть еще один замечательный инструмент – Сетка расположения (Layout grid). Содержание Web-страницы помещается в особые прямоугольные области. Если вы разработали четкую схему сайта, то можете свободно создавать множество различных вариантов разметок в пределах одного стиля (одной темы). Если вы правильно используете эту функцию, она автоматически определяет, где в содержании страницы применяется особый тип текста, и помогает выяснить последовательность появления Web-страниц. Сетка разбивает страницу на области по типу содержания: заголовки, иллюстрации, текст, номера страниц и т.д. Вы можете создавать схему разбиения для любого типа разметки Web-страниц. У каждого формата есть свои достоинства и недостатки, зависящие от размера окна браузера. Например, текстовые колонки при использовании стиля Unrestrained настолько широки, что их неудобно читать. Результатом ограничения ширины может стать появление достаточно больших промежутков между словами, а ограничение высоты неудобно для посетителей, обладающих компьютерами с широкоформатными мониторами.

352 Создание динамического Web-сайта

Шаг 3.. Реализация Теперь все становиться на свои места, трещины заделаны, шпаклевка наложена – осталось наклеить обои. Подготовительная работа окончена, и настало время действительно заняться созданием своего сайта. Перед тем как приступить к последней стадии, еще раз просмотрите информацию, касающуюся сайта (аудитория, цели, содержание и функции). Теперь все, что было подготовлено с таким огромным трудом, окупится с лихвой (а может быть, и нет)!

Подготовка содержания

Рис. 21.12. Проверьте содержание вашего сайта на наличие ошибок

Соберите всю информацию, которую требуется разместить на сайте: текст, видео, анимацию и звук. Тщательно все проверьте и подготовьте к опубликованию, например запишите текст в формате Word (рис. 21.12) или поместите в файлах тэги (<p>, <br>, <h1>).

Подготовка кода Если вы используете код из этой книги (будь то JavaScript, CSS или DHTML), его необходимо изменить под ваш сайт (рис. 21.13).

Создание шаблона В HTML-редакторе (или в каком-либо другом) установите общий тип вашей Webстраницы. Определите HTML и CSS, которые вы планируете использовать для навигации на каждой странице. Протестируйте страницу в различных браузерах, при различных условиях и совершенствуйте код до тех пор, пока не достигнете требуемого результата.

Рис. 21.13. Перед тем как перейти непосредственно к созданию Web-сайта, протестируйте и отладьте написанный вами код

Шаг 3. Реализация 353 Теперь, когда у вас есть действующий прототип Web-страницы, удалите со страниц все лишнее. Так вы получите шаблон сайта. Вы можете его использовать, чтобы доработать оставшуюся часть страниц в таких программах, как Dreamweaver или GoLive.

Компоновка страниц

Рис. 21.14. Произведите компоновку элементов

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

Тестирование сайта Перед тем как выпустить ваше произведение, протестируйте его. Даже малейшие ошибки, если они не были исправлены на стадии отладки, могут привести к большим проблемам. Вам следует тестировать свои сайты в различных браузерах и операционных системах (рис. 21.15).

Рис. 21.15. Результат моей усердной работы (www.webbedenvironments.com/dhtml)

354 Создание динамического Web-сайта Разметка: CSS или таблицы? До того как появились таблицы, Web-разметка представляла собой широкие страницы текста, занимавшие весь экран. У разработчиков не было возможности какимлибо образом разбить колонку. Web-дизайнеры пытались изменить такое расположение, размещая текст в две колонки и более. С появлением таблиц Web-разработчики получили возможность создавать эскиз разметки, содержащий большое число колонок. Хотя не предполагалось, что таблицы будут выполнять большую часть работы по разметке Web-страниц, на протяжении достаточно большого промежутка времени у них не было достойной альтернативы. Но с появлением CSS ситуация радикально изменилась – CSS позволяют создавать великолепные разметки Web-страниц без помощи таблиц. Но, к сожалению, не все так просто. С возникновением CSS у Web-дизайнеров появился широкий спектр возможностей для размещения объектов на странице. Однако эта технология потерпела неудачу при создании разметок с уплотненной компоновкой. Компоновка информации на Web-странице при помощи CSS – новый способ, и многие дизайнеры до сих пор экспериментируют с его функциями. Мне удалось избежать использования таблиц в проекте своего Web-сайта. Правда, пришлось довольствоваться относительно простым вариантом разметки, в котором всего лишь один ряд и две колонки (слева – навигация, справа – содержание) и еще несколько других элементов. Если вы проводите разметку большого объема страниц, используя CSS и не применяя таблицы, пришлите мне, пожалуйста, URL вашего сайта. Я с удовольствием его проверю!

Разметка Web страницы

22 Существует много различных способов использования CSS и DHTML. Но пока данные средства создания Web-приложений являются относительно новыми, и разработчики все еще открывают новые горизонты их возможностей. Это обусловлено, вероятно, еще и тем, что некоторые разработчики, которые изначально были увлечены невероятными возможностями CSS при создании динамического HTML, игнорировали чрезвычайную полезность каскадных таблиц стилей при разметке Webстраниц. Спеша поэкспериментировать с динамическими возможностями CSS, многие Webдизайнеры не заметили, что с помощью CSS легко решить одну из основных проблем разработки – выполнение разметки Web-страниц. В этой главе содержится множество полезных рекомендаций по работе с CSS, а также описываются приемы использования DHTML при разметке страницы.

356 Разметка Web-страницы

Устранение ошибки в Netscape CSS Рассмотрим наиболее часто упоминаемую ошибку Netscape в реализации CSS. Когда посетители изменяют размеры окна браузера, все CSS-форматирование, созданное с использованием внешнего CSS-файла (который импортировался при помощи тэга <link>), внезапно исчезает, будто присоединенная таблица стилей никогда ранее не существовала. Однако, если посетитель перезагрузит эту страницу, форматирование вновь появится (рис. 22.1 и 22.2). Такая ошибка вполне могла бы отбить у посетителей желание заходить на ваш сайт, особенно если они и не подозревают, что нужно просто перезагрузить страницу. Как проверить, что страница была перезагружена после того, как изменился ее размер? Все очень просто; за этим проследит браузер, если вы, конечно, скажете ему об этом (листинг 22.1).

Рис. 22.1. Так должна выглядеть страница в Netscape

Перезагрузка страницы после изменения ее размеров 1. if(document.layers){…} В тэге <script> в заголовке <head> вашей HTML-страницы введите код, который определяет, использует ли браузер DOM слоя (см. раздел «Определение возможностей браузера» в главе 11). В случае утвердительного ответа программный код выведет текущие значения высоты (innerHeight) и ширины (innerWidth) видимой области страницы (см. раздел «Видимая область объекта» в главе 12).

Рис. 22.2. Так будет выглядеть страница при изменении размеров, если не исправить ошибку реализации CSS. Для отображения страницы используются установки браузера по умолчанию

Устранение ошибки в Netscape CSS 357 Листинг 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>

2. function reloadPage(){…} Добавьте функцию reloadPage() в код. При загрузке страницы она сравнивает текущие значения ширины и высоты окна со значениями, определенными на шаге 1. 3. onresize = reloadPage; Присвойте событию onresize значение функции reloadPage. Если посетитель изменяет размеры окна, в котором отображается страница, то браузер перезагружает ее, восстанавливая форматирование CSS. Лучше написать этот код в отдельном файле с расширением .js, а затем присоединить его к каждой странице сайта, применяющего CSS (см. раздел «Внешний файл JavaScript» в главе 23).

358 Разметка Web-страницы

CSS и операционная система Между операционными системами MacOS и Windows существует ряд несоответствий, которые зачастую создают излишние проблемы Web-дизайнерам, использующим CSS при создании сайтов. Это касается цветовой палитры и размеров шрифтов. На самом деле проблема заключена не в CSS, а в том, как операционные системы определяют размеры шрифтов и цвета. Не вдаваясь в технические подробности и не углубляясь в историю, отмечу, что основная проблема заключается в том, что в Windows шрифт отображается более крупным, а цвета – более темными, чем в Mac. Дизайн, разработанный для Mac, может выглядеть идеально, но при загрузке в Windows вместо превосходного дизайна на экране появятся гигантские шрифты и темные цвета. Используя JavaScript и CSS-файлы, ориентированные на каждую ОС, вы можете добиться правильного отображения шрифтов и цветовой гаммы в операционной системе посетителей вашего сайта (рис. 22.3–22.5).

Определение CSS для операционной системы посетителя 1. default.css Создайте внешний CSS-файл, который содержит стили, используемые на Webсайте, и сохраните его под именем default.css (листинг 22.2). Этот файл напрямую присоединяется к каждой Webстранице (см. шаг 3).

Рис. 22.3. Так выглядит страница, загруженная при помощи Internet Explorer 5 для Windows

Рис. 22.4. Та же самая страница при загрузке из Internet Explorer 5 для Mac (без корректировки) – шрифт мельче и слишком бледный

CSS и операционная система 359

Рис. 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 }

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? Термин «каскадный» в понятии «каскадные таблицы стилей» означает возможность перекрывать определения, даже если они взяты из разных источников.

360 Разметка Web-страницы Операционные системы – это не единственная проблема при создании 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">'); } </script> </head> <body> <p class="copy">Down, down, down... -></p> <p class="copy">Presently she began ->again...</p> </body> </html>

Заголовки 361

Заголовки Рис. 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>

Одна из проблем разработчика – это заголовки, созданные при помощи графики. Всякий раз приходится создавать новый графический объект для каждого заголовка. Используя свойство CSS для определения фона, вы можете получить огромное количество различных фонов для заголовков без необходимости каждый раз работать над новым графическим объектом. Кроме того, это не повлечет за собой увеличения времени загрузки сайта.

Создание заголовков при помощи фона 1. background_headline.gif При помощи графического редактора создайте фоновое изображение и сохраните его. Назовите файл background_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).

362 Разметка Web-страницы Таким же образом можно определять и другие уровни заголовков, использовать как одинаковые, так и различные фоновые изображения (см. раздел «Определение тэгов с помощью одинаковых правил» в главе 2). Экспериментируйте, пробуя различные фоновые рисунки. Одно из фоновых изображений, которые я использовал на своем Web-сайте, представляет собой полоску спектра: цвет плавно изменяется справа налево, постепенно переходя в цвет основного фона (рис. 22.8).

Фиксированный заголовок Один из принципов Web-дизайна – помогать посетителям ориентироваться на сайте. Посетитель всегда должен знать, на какой странице находится. К сожалению, чтобы просмотреть Web-страницу полностью, ее необходимо прокрутить, поэтому такая важная информация, как, например, заголовок, может попросту скрыться с глаз посетителя по мере прокрутки страницы. Используя CSS, нетрудно зафиксировать заголовок в верхней части Web-страницы, помогая посетителю определить местонахождение на сайте (рис. 22.9). Однако следует помнить, что Internet Explorer 4 (Mac и Windows), Internet Explorer 5 (Windows) и Netscape 4/6 (Mac и Windows) не поддерживают фиксированное расположение объектов. Единственным совместимым браузером является Internet Explorer 5 (Mac).

Рис. 22.7. Два примера заголовков. Поэкспериментируйте с графикой и рамками для получения различных эффектов

Рис. 22.8. Заголовки about the site и Reading the Code представляют собой обычный текст, расположенный на фоновом рисунке

Рис. 22.9. Заголовок остается фиксированным в верхней части Web-страницы, хотя текст уже переместился вверх

Фиксированный заголовок 363 Листинг 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>

Фиксация заголовка 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> служит для выделения заголовка страницы.

Помните, что этот метод работает не во всех браузерах. Браузеры, которые не поддерживают фиксированные заголовки, рассматривают такой заголовок как статический элемент, поэтому он исчезает вместе с текстом при прокрутке страницы. Неплохо расположить ссылку в фиксированном заголовке, но ошибка в Internet Explorer 5 делает это абсолютно бесполезным (см. раздел «Фиксированное позиционирование» в главе 8).

364 Разметка Web-страницы

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

Рис. 22.10. Данное фоновое изображение используется для того, чтобы создать боковое меню шириной 160 пикселов

Создание бокового меню 1. background_side.gif Создайте изображение – полосу, ширину которой определите соответственно ширине бокового меню. 2. body{ background: #cccccc ->url(background_side.gif) repeat-y;} Настройте селектор body в документе, чтобы можно было использовать графический объект, созданный на шаге 1, но задайте его повтор только в направлении оси Y (см. раздел «Установка отдельных свойств фона» в главе 6). Допустимо также установить цвет фона для всей Web-страницы (см. листинг 22.7). 3. Применяйте таблицы или CSS, чтобы поместить содержание бокового меню в колонке слева, а правую часть страницы освободить для других элементов. В приведенном примере созданы две колонки, расположение которых задано в абсолютных координатах; в левой колонке будет располагаться боковое меню, а правая предназначена для содержания.

Рис. 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> </div> </body> </html>

366 Разметка Web-страницы

Верхние и нижние колонтитулы Одна из проблем, возникающих при разработке больших 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 Листинг 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 &copy;</a> 1998-2000 <A HREF= ->"mailto:jason@webbedenvironments.com"> ->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 soon turn into the worst day of my life!' dDate = '01' mDate = 'January' yDate = '2001' </script>

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).

368 Разметка Web-страницы Вы можете размещать любой код в колонтитулах. В приведенном примере код навигации находится также во внешнем файле JavaScript. Это позволяет добавлять или удалять отдельные элементы навигации без изменения каждой страницы Web-сайта. Переменные, которые вводятся на шаге 3, – это всего лишь пример того, какую информацию можно отображать для каждой Webстраницы в отдельности, используя импортируемый код JavaScript. Разрешается включать любые данные, касающиеся той или иной страницы, например ее порядковый номер, расположение на сайте и т.п.

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

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

Границы фреймов 369

Границы фреймов Одна из проблем с фреймами заключается в том, что границы, устанавливаемые HTML между ними, выглядят как-то неуклюже (рис. 22.13). Однако при задании фона вы можете использовать любой вид границ (рис. 22.14). Хотя эти границы могут быть размещены только по левому краю или по верху отдельного фрейма, они очень полезны, если необходимо показать четкую границу между фреймами. Рис. 22.13. Фреймы с границами, установленными по умолчанию

Рис. 22.14. Применение CSS: границы между фреймами отмечены орнаментом

Рис. 22.15. Изображения, применяемые для создания границ фреймов. Вы можете использовать на своем сайте любые изображения

Создание границы фрейма 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).

370 Разметка Web-страницы Этот способ действует только при размещении левой или верхней границ фрейма. Вы не можете воспользоваться им для того, чтобы установить одновременно обе границы или создать нижнюю и правую границу. Какой будет граница фрейма – узкой или широкой, длинной или короткой, яркой или блеклой – зависит только от вашей фантазии. Такие границы имеют лишь один недостаток по сравнению с границами, устанавливаемыми по умолчанию: ни вы, ни посетитель не могут с их помощью менять размер фрейма.

Листинг 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>

Листинг 22.12. Фрейм с вертикальными границами

<html> <head> <style type="text/css"> body { background: white url(border.gif) ->repeat-y } </style> </head> <body> <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; } </style> </head> <body> <h3>Chapter V - Advice from a ->Caterpillar</h3> </body> </html>

Открытие и закрытие фреймов 371

Открытие и закрытие фреймов

Рис. 22.16. Меню закрыто

Существенный недостаток использования фреймов на Web-странице состоит в том, что их нельзя изменять. Все пространство, которое они занимают на Web-странице, – всевозможные меню, заголовки и т.п. – жестко привязано к экрану. Это может быть удобным, если у вашего компьютера достаточно большой монитор, однако совсем не подходит менее удачливым посетителям – обладателям меньших мониторов. Далее я расскажу о разработанной мною технологии, которая применяет вложенные фреймы и JavaScript при открытии и закрытии меню во фрейме (рис. 22.16 и 22.17). Когда меню закрыто, область, отведенная под отображение содержания, расширяется; таким образом, становится больше свободного места, которое можно эффективно использовать.

Создание скрытых фреймов

Рис. 22.17. Меню открыто

Рис. 22.18. Файл настроек фрейма index.html

1. index.html Определите структуру фреймовой страницы. В приведенном примере устанавливается два фрейма: header и content (листинг 22.14). Фрейм header – статический (не меняет свой исходный код), содержит файл header.html, в котором находится большая часть JavaScriptкода, необходимого для создания скрытого фрейма.

372 Разметка Web-страницы 2. nomenu_frames.html Создайте фреймовую структуру (тэг <frameset>), состоящую из двух колонок, и сохраните их в файле nomenu_frames.html (листинг 22.15). Первый фрейм (control) содержит файл control.html, второй (content2) – файл content.html. 3. menu_frames.html Создайте фреймовую структуру, содержащую три колонки, и сохраните ее в файле menu_frames.html (листинг 22.16). Два вторых фрейма в этой настройке аналогичны фреймам из nomenu_frames.html. Ширина первого фрейма составляет 150 пикселов, он отображает файл menu.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>

Листинг 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 Листинг 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>

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.17. HTML-документ, использующийся во фрейме header файла index.html. Он содержит функцию menuToggle(), которая при запуске открывает (или закрывает) фреймовое меню Листинг 22.17 (окончание) <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; } } </script> <style type="text/css"> h2 { color: gray; font-weight: bold; font-size: 24px; font-family: "Trebuchet ->MS", Arial, Helvetica, Geneva, ->sans-serif; } body { background-color: #333; } </style> </head> <body> <h2>webbedENVIRONMENTS</h2> </body> </html>

374 Разметка Web-страницы 5. menu.html Создайте HTML-файл, который будет отображаться, когда меню открыто, и сохраните его под именем menu.html (листинг 22.18). В этом примере использованы HTML-ссылки, но вы можете поместить любое содержание. Для всех ссылок следует указывать, что открывать их надо во фрейме content2. 6. control.html Создайте HTML-файл, который будет применяться во фрейме control, и сохраните его как control.html (листинг 22.19). Файл содержит ссылку, при щелчке по которой запускается функция menuToggle(), созданная на шаге 4.

Листинг 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>

Листинг 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 } </style> </head> <body> <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>

Открытие и закрытие фреймов 375 Листинг 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>

7. content.html Создайте HTML-страницу, которая содержит код, представленный в листинге 22.20. Этот документ – промежуточный этап и никогда не остается долго на экране. Он определяет, какой документ находится во фрейме content2, присваивая переменной header адрес того фрейма, который его загрузил (contetSCR). После этого он обновляет документ. Если ранее ничего не было загружено (например, при первом открытии Webсайта), запускается home.html. 8. home.html Создайте страницы вашего сайта (листинг 22.21). Они будут содержаться во фрейме content2.

Этот метод позволяет посетителю сайта открывать и закрывать меню навигации.

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

376 Разметка Web-страницы

Размещение страниц во фреймах Представьте, что вы читаете книгу. Вы заканчиваете поздно ночью и оставляете закладку на последней прочитанной странице. Следующим вечером вы берете книгу и хотите продолжить чтение. Но закладка каким-то мистическим образом исчезла с того места, где вы ее оставили, и оказалась лежащей рядом с книжкой. Какая неприятность! Ох, уж эти барабашки! И теперь вам приходится листать книгу в поисках страницы, на которой остановились. Если вы создаете Web-сайт, используя фреймы, такая же оказия может приключиться и с вашими посетителями. Они помещают закладку на какой-нибудь странице вашего сайта, которую они долго искали и наконец нашли, а затем обнаруживают, что закладка находится на первой странице! Сказанное касается не только Web-сайтов, содержащих фреймы. Что, если вы хотите направить посетителей к какой-нибудь особенной странице по электронной почте или с другого сайта? Конечно, вы можете дать им URL этой страницы, но если вы адресуете их на страницу непосредственно, без помощи фреймов, вы предлагаете им книгу, в которой выдраны последние страницы или нет корешка. Допустимо создавать различные контейнеры с описанием структуры фреймов для каждой страницы, но это очень хлопотно и неразумно. Существует более легкий путь решения проблемы. Вы не вправе изменить работу фреймов, поскольку по некоторым причинам производители браузеров игнорировали поддержку такой возможности. Однако есть и обходной путь (рис. 22.21 и 22.22).

Рис. 22.21. Страница загружается на «пустой» экран, но практически стразу же…

Рис. 22.22. …экран мигает, и страница, которую вы только что видели, предстает пред вами в новом виде – с использованием фреймов

Размещение страниц во фреймах 377 Листинг 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>

Автоматическое размещение HTML-страницы 1. framed.js Создайте внешний файл JavaScript (см. раздел «Внешний файл JavaScript» в главе 23) и сохраните его под именем framed.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), в который вы можете ввести любой адрес.

378 Разметка Web-страницы 3. content.html Создайте страницы Web-сайта (листинги 22.24 и 22.25). В тэге <head> всех документов, которые следует динамически разместить во фрейме content, определите загрузку внешнего файла JavaScript, созданного на шаге 1: <script src="framed.js"></script>

Если вы хотите направить посетителя на определенную страницу вашего сайта, отошлите ему URL документа, созданного на шаге 2 (index.html). Любая HTML-страница будет размещаться во фрейме автоматически, так как вы импортировали в нее файл framed.js (см. шаг 3). Если посетитель переходит к одной из таких страниц по ссылке и оставляет на ней закладку, впоследствии он сможет быстро вернуться к ней. В Netscape для Windows и Internet Explorer Windows/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), они, скорее всего, станут универсальным стандартом в будущем; отделяйте содержимое страницы от средств навигации при помощи фреймов. Старайтесь размещать содержимое в отдельном фрейме: в таком случае вы можете расположить средства навигации в других фреймах. Это позволит посетителям вашего сайта распечатывать только нужную им информацию (см. раздел «Открытие и закрытие фреймов»). избегайте использования фонового цвета или рисунков, а так же светлого цвета текста. Хотя цветной фон или фоновая графика могут сделать страничку симпатичной, они мешают при чтении текста после вывода на печать. Некоторые браузеры позволяют печатать документы без фона и фоновой графики, однако светлый текст при этом плохо виден на белой бумаге; не применяйте прозрачные цвета в графике. Это рекомендация особенно актуальна в том случае, если графика располагается поверх цветного фона или поверх другой картинки. Прозрачные области картинок при распечатке обычно окрашены в белый цвет вне зависимости от того, какой цвет фона находится под ними. Это не так страшно,

380 Разметка Web-страницы

когда картинка располагается на белом фоне, однако результат просто ужасен, если фон темный; избегайте использования текста в графике. Текст, реализованный в виде картинки, выглядит на экране гладким, а на распечатке – состоящим из квадратов. Напротив, обычный текст может быть угловатым на экране, но печатается сглаженным на большинстве современных принтеров. Старайтесь применять обычный текст; создавайте специальные версии страниц, предназначенные для распечатки. Предпочтительнее создать отдельный документ для печати, чем заставлять посетителей вашего сайта следовать по ссылкам и распечатывать каждую страницу отдельно. Одним из лучших способов хранить информацию для печати в более или менее универсальном формате является Adobe Acrobat. Документы в этом формате не только содержат необходимую информацию, но и сохраняют форматирование, шрифты, графику. За более подробной информацией обращайтесь на сайт Adobe (http:/ /www.adobe.com).

импорт внешнего содержимого

Представьте себя разработчиком большого 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.

Рис. 23.1. При помощи тэга <ilayer> Netscape 4 импортирует внешнюю информацию

Импорт информации из внешних источников при помощи тэгов <iframe> и <ilayer> 1. <ilayer></ilayer> В тэге <body> HTML-документа (листинг 23.1) определите тэг <ilayer> (см. раздел «Импорт внешнего содержимого с помощью слоев Netscape» в главе 16). 2. <nolayer>…</nolayer> Введите тэг <nolayer>. Он скрывает в себе код от Netscape 4 (см. раздел «Отображение содержимого слоев в браузерах, которые их не поддерживают» в главе 16).

Рис. 23.2. Netscape 6 поддерживает тэг <iframe>. Однако Web-страница в обоих браузерах выглядит одинаково

Тэги <ilayer> и <iframe> 383 Листинг 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>

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>. Когда я размещал новую статью на своем сайте, я просто добавил ссылку на файл, содержащий ее в основном документе. И каков же результат? Все статьи сайта, которые ссылались на статью из нового файла, автоматически обновились.

384 Импорт внешнего содержимого

Включения на стороне сервера Самый простой способ импортировать внешние файлы – использовать включение на стороне сервера (server-side include). Это не HTML-тэг, а тэг, указывающий серверу, какой именно файл нужно добавить. Реализация данного метода зависит от того, воспринимается ли данный тэг вашим сервером, однако большинство серверов его поддерживают.

Добавление включения на страницу 1. <!–#includevirtual="external.html"–> Добавьте этот тэг в любом месте тэга <body> вашего HTML-документа и укажите импортируемый файл external.html (листинг 23.3). 2. <!–#echovar="DATE_LOCAL"–> <!–#echovar="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>

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

Внешний файл JavaScript

Рис. 23.3. Внешнее содержимое было импортировано правильно

Листинг 23.5. Вы можете расположить тэг <script> в любом месте HTML-документа, но чтобы добавить внешнее содержимое, вам необходимо поместить его в тэге <body>. Это позволяет создавать HTML-страницы при помощи JavaScript

Используя тэг <script>, можно присоединить внешний файл к HTML-документу при помощи JavaScript-кода. Так же допускается применять файл JavaScript для описания HTML-кода вашей Web-страницы. Преимущество использования этого метода заключается в том, что посредством JavaScript легко «привязать» к странице какое-либо содержимое (см. раздел «Верхние и нижние колонтитулы» в главе 22).

Импорт внешнего файла JavaScript в HTML-документ 1. <scriptsrc="external.js"></script> Импортировать внешний файл JavaScript несложно. Определите атрибут src тэга <script> и ничего не располагайте внутри самого тэга (листинг 23.5). Этот метод позволяет поместить внешний код JavaScript в HTML-файл. Если JavaScript добавляет на страницу HTML-тэги, то они также будут помещены в ту часть основного документа, к которой «привязывается» файл JavaScript.

386 Импорт внешнего содержимого 2. external.js Создайте внешний файл JavaScript и сохраните его как external.js (листинг 23.6). Он может содержать любой код на JavaScript, но чтобы импортировать его содержимое в HTML-документ, необходим код, описывающий HTML-тэги. Каждая строка HTML-кода добавляется в документ при помощи оператора document.write. Результат добавления внешнего кода представлен на рис. 23.4.

Листинг 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>');

Недостаток описанного метода заключается в том, что приходится помещать каждую строку HTML-кода в JavaScript. Это достаточно трудоемкая работа; кроме того, в результате увеличивается объем файла и затрудняется отладка. Сказанное касается большинства программ WYSIWYG. Если вы помещаете какое-либо содержание в тэг <script>, оно не воспринимается программой. Помните, что содержимое, созданное при помощи JavaScript, должно заключаться в одинарные кавычки ('). Если при описании на JavaScript возникает необходимость использовать в тексте одинарную кавычку, то перед ней ставиться обратный слэш (\). То есть код document.write ('How's it going?'); работать не будет. Правильное написание включает слэш: document.write('How\'s it going?');.

Рис. 23.4. Импортированный файл JavaScript создает заголовок, под которым помещает изображение

Изучение работы других сайтов 387

Изучение работы других сайтов

Рис. 23.5. Страница, внешний код которой требуется просмотреть. Абсолютный URL указан в адресной строке

Наилучший способ изучить DHTML и CSS (помимо чтения соответствующей литературы) – посмотреть, как работают другие сайты, и разобрать использованный при их создании код. К сожалению, Web-дизайнеры обычно скрывают код своих творений, размещая его во внешних файлах, которые нельзя увидеть, применяя обычные методы. Но не все потеряно: вы можете просмотреть исходный код, если копнете чуть глубже.

Просмотр исходного кода страницы

Рис. 23.6. Меню View в браузере Internet Explorer 5 для Windows

Рис. 23.7. Меню View в браузере Netscape 6 для Windows

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 (в адресной строке браузера), но добавьте к нему относительный путь. Удалите последний

388 Импорт внешнего содержимого уровень URL текущей страницы, а также «../» в относительном URL. Удалите дополнительный уровень из URL текущей страницы. Затем добавьте оставшуюся часть URL страницы к относительному пути, не используя «../» (рис. 23.9). 5. Откройте URL внешнего содержимого, который вы определили на шаге 4 (рис. 23.10). Разные браузеры применяют различные методы реализации тех или иных возможностей, но обычно в меню File (Файл) следует выбрать опцию Open Location (Открыть адрес). Некоторые браузеры открывают код в окне, другие требуют, чтобы файл, находящийся по данному URL, был переписан на диск (рис. 23.11), а затем открыт в таких программах, как Notepad или SimpleText (рис. 23.12).

Рис. 23.9. Код, позволяющий определить абсолютный URL внешнего содержимого

Рис. 23.10. URL внешнего кода написан в адресной строке браузера

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

Рис. 23.8. Исходный код Web-страницы. Многие из ссылок на внешние файлы используют относительные пути

Рис. 23.12. Внешний код найден

Навигация Web сайта

24 Без навигации не может существовать ни один сайт. С ее помощью ваш сайт находят посетители. Существует множество навигационных элементов, помогающих перемещаться от страницы к странице: главное меню с различными подменю, вспомогательные меню, всевозможные карты (путеводители), гипертекстовые ссылки и т.п. Хорошо спланированная система навигации позволяет посетителям быстро находить нужную информацию. Бессистемное использование навигации может оттолкнуть посетителей от вашего сайта: люди попросту заблудятся на нем, не сумев найти интересующие их данные, после чего вряд ли захотят вернуться на ваш сайт. Прочитав эту главу, вы узнаете о наиболее продуктивных способах создания динамической навигации, которые позволяют улучшить гибкость сайта, а также существенно расширить диапазон содержащейся на нем полезной информации.

390 Навигация Web-сайта

Определение стилей ссылок Большинство браузеров позволяют установить стиль ссылок в тэге <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; }

Не совсем класс Браузеры, поддерживающие CSS, автоматически распознают определенные специальные классы – псевдоклассы (pseudo-class). Псевдоклассы, по сути, являются тэгами, имеющими набор определенных уникальных атрибутов. Атрибуты допускается задавать независимо от других свойств. В тэге <a>, например, можно указать несколько типов состояний ссылки: active (активная), visited (посещенная), hover (указанная) и link (состояние по умолчанию). Вы можете определять псевдоклассы так же, как HTML-селекторы.

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>

Определение стилей ссылок 391

Отображение ссылки в зависимости от ее состояния Рис. 24.1. Стиль гипертекстовой ссылки

Рис. 24.2. Гипертекстовая ссылка, которая только что была активизирована

Рис. 24.3. Гипертекстовая ссылка, которой посетитель уже воспользовался

Рис. 24.4. Гипертекстовая ссылка, на которую указывает курсор мыши

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. Порядок определения стилей ссылки может повлиять на ее отображение в некоторых браузерах. Так, например, в Internet Explorer 5 для Windows, размещая hover до visited, вы не сможете добиться выполнения псевдокласса hover, если посетитель воспользовался данной ссылкой. Классы выполняются в том же порядке, в каком размещены в коде, поэтому псевдокласс active определяется до hover.

392 Навигация Web-сайта Наследуются все состояния, определяющие стили ссылки. Например, шрифт, который используется при отображении ссылки, должен наследоваться состояниями active, visited и hover. Но между браузерами существует ряд несоответствий. Чтобы избежать связанных с этим неприятностей, определяйте все атрибуты для каждого стиля ссылки. Всемирная паутина – это среда гипертекста, поэтому очень важно, чтобы пользователи могли ориентироваться во всем разнообразии текстовой информации и ссылок. Нельзя рассчитывать на то, что все посетители активизируют опцию подчеркивания ссылок, поэтому необходимо установить отображение ссылки для всех документов, входящих в вашу Web-страницу.

Хотя CSS позволяет задавать не только цвет ссылки, я советую быть осторожным при изменении других атрибутов с помощью псевдокласса hover. Например, модификация типа шрифта, его размера и других свойств часто приводит к тому, что на экране шрифт выглядит бóльшим, чем вы его задали, а текст выходит за границы отведенного для него слоя. Приходится обновлять всю страницу, что может вызвать недовольство посетителей сайта.

Выбор цветов ссылки В большинстве браузеров для обозначения ссылок по умолчанию используются синий, красный или пурпурный цвета (например, синий – для непосещенной ссылки, а красный – для посещенной). Проблема, возникающая при таком разделении ссылок, заключается в том, что посетитель способен забыть, какой цвет в том или ином случае используется. Выбирайте цвета таким образом, чтобы ссылка отличалась от остального текста на экране и чтобы посетитель мог легко определять ее состояние (visited, hover, active или link). Однако ссылки не должны бросаться в глаза и отвлекать посетителя от чтения. Я рекомендую устанавливать для ссылок контрастные цвета по отношению к цвету фона и текста. Для посещенных ссылок задавайте более яркий или, наоборот, более темный оттенок выбранного цвета (в зависимости от того, яркий или темный цвет фона). Неактивизированные ссылки должны отличаться от посещенных более ярким цветом. При разработке страницы с белым фоном и текстом черного цвета я, возможно, применял бы красный цвет для непосещенных ссылок (#ff0000), а розовый – для посещенных. Яркий цвет выделяется на общем фоне, а светлый привлекает меньше внимания, но все-таки делет ссылку отличимой.

Определение различных стилей для ссылок 393

Определение различных стилей для ссылок Рис. 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;

При установке правил вы можете работать со стилями ссылок как с любыми другими HTML-тэгами, например ассоциировать класс с псевдоклассом ссылки или определять псевдокласс неявно при помощи других HTML-тэгов. Количество устанавливаемых стилей для одной страницы не ограничено, поэтому допускается создавать столько стилей, сколько потребуется. Если необходимо, чтобы ссылки, находящиеся в навигационном меню, отличались по цвету от ссылок, используемых в тексте, следует определить два независимых стиля (рис. 24.5 и 24.6).

Установка сложных ссылок 1. a.menu:link{…} Вы можете установить стили ссылок как часть класса, если расположите разделитель (.) и имя класса до двоеточия (:). В приведенном примере (листинг 24.2) стили ссылки задаются для класса menu, который является классом тэга <a> ссылки (см. раздел «Определение классов для создания тэгов» в главе 2). Или для определения сложных ссылок вы можете воспользоваться следующим способом: 2. pa:link{…} Вы также можете установить стиль ссылки неявно. Ссылка будет отображаться

Еще одно состояние ссылки Хотя четыре состояния ссылки, используемые в CSS, чрезвычайно полезны, было бы неплохо добавить к этому стандартному набору пятое состояние – current. Данный атрибут позволил бы управлять стилем отображения ссылки, если она указывает на отображаемую страницу (URL Web-страницы, например такой же, как и href). Применяя это состояние, Web-разработчики с помощью CSS могли бы определять, на какой странице находится посетитель, не добавляя программный код на каждую страницу.

394 Навигация Web-сайта заданным образом, если ее родителем является определенный тэг. В рассматриваемом примере отображение тэга ссылки (<a>) установлено, если она находится внутри тэга <p> (см. раздел «Определение тэгов в контексте» в главе 2). Определение нескольких цветов ссылки позволяет посетителю отличать типы ссылок. В приведенном примере ссылки меню и ссылки, находящиеся в тексте, различны по внешнему виду. Может быть, вы захотите, чтобы ссылки, ведущие на другие сайты, отличались от всех остальных.

Оформление текста: подчеркивать или нет Подчеркивание – самый распространенный способ выделения ссылок. Довольно часто разработчики используют один цвет как для текста, так и для ссылок, предполагая, что посетители легко распознают подчеркнутые ссылки среди остального текста. Но как посетитель сможет отличить ссылки, если отключит опцию подчеркивания? Кроме того, при подчеркивании ссылок возникает еще одна проблема. Если на вашей странице много ссылок, оформленных таким образом, страница превращается в какое-то подобие азбуки Морзе с бесконечным набором точек и тире. Текст становится трудно читать. CSS позволяет отключать опцию подчеркивания ссылок независимо от пользователя. Я рекомендую использовать эту возможность, а также применять цвета для выделения гипертекстовых ссылок. А подчеркивание можно задать для состояния hover. При наведении на ссылку указателя мыши посетителю ясно видны ее изменения.

Листинг 24.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= ->"#">&lt;Previous Chapter</a> | <a class="menu" href="#">Next ->Chapter &gt;</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>

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

Выпадающее меню 395

Выпадающее меню

Рис. 24.7. Заголовки меню

Выпадающее меню (drop-down menu) – это наиболее любимый Web-дизайнерами и часто используемый GUI-элемент (Graphical User Interface – графический пользовательский интерфейс). Заголовок меню отображается в верхней части окна, при щелчке по заголовку раскрывается список предоставляемых опций. Например, в меню File (Файл) вы можете найти опции Save (Сохранить), Close (Закрыть) и Print (Печать). Таким образом вы можете достигнуть некоторых полезных эффектов (рис. 24.7 и 24.8).

Добавление выпадающего меню на страницу

Рис. 24.8. После наведения мыши на заголовок Листинг 24.3. Функция popMenu() отображает меню. Функция delayHide() не дает ему закрыться прежде, чем будет выбрана одна из предоставляемых опций

<html> <head> <script src="findDOM.js"></script> <script> var menuTop = 45; var menuLeft = 400; var var var var var var

domSMenu = null; oldDomSMenu = null; t = 0; lDelay = 3; lCount = 0; pause = 100;

1. <scriptsrc="findDOM.js"></script> В большинство функций JavaScript, при помощи которых изображения размещаются на экране, необходимо включить код findDOM (см. раздел «Использование общей для браузеров DOM» в главе 11). Для этого поместите код во внешнем текстовом файле, который затем следует импортировать на ту страницу, где код будет применяться (листинг 24.3). 2. varmenuTop=45; Инициализируйте переменные, которые осуществляют контроль и запись различных величин: – menuTop записывает положение верхней границы выпадающего меню (позже будет переопределена); – menuLeft сохраняет положение левой границы выпадающего меню (позже будет переопределена); – domSMenu записывает DOM для данного меню; – oldDomSMenu сохраняет DOM для последнего открытого меню;

396 Навигация Web-сайта

– t определяет, будет меню закрыто (1) или нет (2); – lDelay указывает время, в течение которого меню должно оставаться открытым; – lCount определяет, как долго меню оставалось открытым до закрытия. Когда lCount = lDelay, меню закрывается. Вам наверняка захочется изменить переменную lDelay. Она определяет время, в течение которого меню остается открытым, если посетитель не выбрал ни одну из появившихся опций. Чем больше значение lDelay, тем дольше меню остается на экране. functionpopMenu(menuNum){…} Введите, используя JavaScript, функцию popMenu(). Сначала она закрывает другие открытые меню, потом вычисляет положение левой и нижней границ заголовка, чтобы правильно расположить выпадающее меню, и затем отображает его на экране. functiondelayHide(){…} Введите функцию delayHide(), используя JavaScript. Она скрывает видимое меню после небольшой задержки, задаваемой переменной lDelay. .menuStyle{…} Создайте класс стиля для меню, который определяет внешний вид меню и заголовка. #menuHead1{…} Каждому заголовку меню присвойте ID, который должен быть задан в относительных координатах. #menu2{…} Присвойте ID каждому меню. Они определяют отдельные меню и должны быть заданы абсолютными координатами.

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

Выпадающее меню 397 Листинг 24.3 (продолжение)

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); } } } </script> <style type="text/css"> 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; }

8. a.menuLink:link{…} Создайте стиль ссылок для всех меню. Этот пункт необязателен, но я рекомендую его выполнить, чтобы сделать меню более привлекательным. 9. <divid="menuHead" ->class="menuStyle">…</div> Создайте CSS-слой для заголовков меню. Ссылки на все заголовки меню, создаваемые на шаге 10, будут размещаться в этом слое. 10. <aid="menuHead1"class="menuLink" ->href="#"onMouseOver= ->"popMenu(1)"onMouseOut="t=1; ->delayHide()">Menu1</a>| Для каждого заголовка меню создайте ссылку. По своей сути заголовки меню являются ссылками, которые вызывают функцию popMenu() при событии onMouseOver и функцию delayHide при событии onMouseOut. 11. <divid="menu1"class="menuStyle">… -></div> Добавьте CSS-слой для каждого меню. Меню можно назвать слоем, содержащим HTML-ссылки. Их вы создадите на следующем шаге. 12. <aclass="menuLink"onMouseOut="t=1; ->delayHide()"onMouseOver="t=2;" ->onClick="t=0;delayHide();" ->href="#">Option1.1</a><br> Добавьте ссылки на каждый пункт создаваемого меню. Меню открывается при наведении указателя мыши на заголовок меню. Если убрать указатель со ссылки, меню через некоторое время закроется. Как только указатель опять будет наведен на ссылку, меню снова отобразится на экране.

398 Навигация Web-сайта Вы можете открывать меню другим способом, если расположите заголовки не по горизонтали, а вертикально; выпадающие меню при этом находятся не слева и снизу, а справа и сверху. Этот код является одним из моих любимых. Я использую его при создании меню своего Web-сайта (рис. 24.9). Большинство операционных систем открывает меню только при щелчке по его заголовку. Вы можете изменить событие, вызывающее данную функцию, на onClick.

Рис. 24.9. Такое меню используется на сайте webbedENVIRONMENTS

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

</style> </head> <body> <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> </div> <div id="menu2" class="menuStyle"> <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>

Выпадающее меню 399 Листинг 24.3 (окончание)

<a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t ->onClick="t = 0; delayHide();" href="#">Option 2.4</a><br> </b> </div> <div id="menu3" class="menuStyle"> <b> <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t ->onClick="t = 0; delayHide();" href="#">Option 3.1</a><br> <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t ->onClick="t = 0; delayHide();" href="#">Option 3.2</a><br> <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t ->onClick="t = 0; delayHide();" href="#">Option 3.3</a><br> <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t ->onClick="t = 0; delayHide();" href="#">Option 3.4</a><br> <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t ->onClick="t = 0; delayHide();" href="#">Option 3.5</a><br> <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t ->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> </div> </body> </html>

= 2;"

= 2;" = 2;" = 2;" = 2;" = 2;" = 2;"

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

400 Навигация Web-сайта

Выдвижное меню Вы устали от сайтов с древней навигацией, элементы которой расположены в левой или правой части страницы? Меню вашего Web-сайта занимают все больше и больше ценного места? Страницы загромождены ссылками, которые посетители применяют только для перемещения в какую-нибудь особую часть страницы и не используют при изучении содержимого? Если вы ответили «Да!» хотя бы на один из этих вопросов, я могу предложить очень простое решение: позвольте посетителям вызывать или скрывать меню по мере необходимости, то есть создайте выдвижное меню (sliding menu) – рис. 24.10–24.12.

Рис. 24.10. На экране отображается только закладка меню

Создание выдвижного меню 1. <script src="findDOM.js"></script> В любую функцию JavaScript, которая непосредственно размещает объект на странице, необходимо включить код findDOM. Для этого поместите его во внешнем текстовом файле, а затем присоедините файл к странице, на которой код будет использоваться (листинг 24.4). 2. var open=0; Инициализируйте следующие переменные: – open записывает, открыто или закрыто меню; – slideDelay содержит информацию о времени, которое понадобится для открытия меню. Чем больше значение, хранящееся в этой переменной, тем медленнее открывается («выдвигается») меню, однако при этом движение не будет плавным; – domStyle сохраняет DOM для меню. 3. function setMenu(objectID){…} Добавьте функцию setMenu() в код JavaScript. Она устанавливает начальную (cX)

Рис. 24.11. После щелчка по закладке меню выдвигается

Рис. 24.12. Теперь меню отображено полностью

Выдвижное меню 401 Листинг 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; } </script> <style type="text/css"> 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;} </style> </head> <body> <span id="mainMenu" class="menu"> <table border="0" cellpadding="5" ->cellspacing="0" frame width="100" ->bgcolor="#999999"> <tr>

и конечную (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> документа установите таблицу стилей, содержащую один главный класс, который имеет все свойства меню

402 Навигация Web-сайта (.menu), и каждому создаваемому меню присвойте ID. В приведенном примере определяется простое меню (mainMenu). Заметьте, что левая граница в .menu, которая затем изменится при запуске функции slideMenu(), инициализирована значением –80. Такая установка не скрывает меню, закладка остается видимой. 6. <span id="mainMenu" ->class="menu">…</span> В тэге <body> страницы создайте меню. В рассматриваемом примере меню создано при помощи таблицы, контролирующей слой. Один из элементов <td> содержит ссылку, которая при щелчке запускает функцию setMenu(), заставляя меню выдвигаться.

Вы можете создать столько меню, сколько потребуется, при этом каждое меню должно располагаться в собственном тэге <span>, а также иметь собственный ID. Удостоверьтесь, что меню не перекрывают друг друга. В тэге <span> допускается помещать любое содержание: графику, гипертекстовые ссылки, формы и т.д. Как меню отображается в браузерах, не поддерживающих DHTML? Это зависит от того, каким образом вы его создаете. В приведенном примере меню будет появляться у левой границы страницы. Если бы вы размещали меню в таблице с каким-либо содержанием в правой части окна, оно выглядело бы как обыкновенное боковое меню (нединамическое).

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

<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

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

Рис. 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(); } </script> <style type="text/css"> 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>

Вы можете упростить поиск необходимой информации и сделать свой сайт более привлекательным, создав панель управления (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.

404 Навигация Web-сайта 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 Листинг 24.8. Функция closeWindow() позволяет посетителям скрывать панель управления

<html> <head> <script> function closeWindow() ->{ top.self.close(); } </script> <style type="text/css"> body { background-color: #366; } a:Link { color: #6ff; font-size: 12px ->"Courier New", Courier, Monaco, ->monospace; text-decoration: none; } </style> </head> <body> <div style="align: center"> <a href="javascript: ->closeWindow();">&lt;Close&gt;</a> </div> </body> </html>

Панель управления может содержать все, что вы закладываете в обычный документ. Но помните, что все элементы окна управления должны соответствовать габаритам, заданным в функции openRemote(). Если вы хотите, чтобы ссылки из окна панели управления появлялись в главном окне, направьте их на фрейм содержимого. В отличие от стандартного окна окно панели управления не отображает меню, навигацию браузера – стрелки Back (Назад) и Forward (Далее), текущий URL и т.п., то есть все находящееся вокруг стандартного окна. В верхнем правом углу окна управления находится стандартная кнопка Close (Закрыть), позволяющая посетителю закрыть это окно в любой момент. Чтобы открыть окно панели управления, необходимо вызвать функцию openRemote(). Вы можете сделать это несколькими способами, например запуская ее автоматически при загрузке главного окна браузера (событие onLoad). Еще один хороший способ – разместить в главном окне ссылку, позволяющую заново открывать это окно, если оно было закрыто, или помещать его поверх всех открытых окон. Заметьте, что функция openRemote() использует функцию focus, которая размещает окно панели управления поверх остальных открытых окон. Если бы в коде не было функции focus, то открытое окно панели управления находилось бы за другими окнами. Вызов функции openRemote() загрузил бы его заново, но не переместил на первый план. Таким образом, посетитель просто не увидел бы окно на экране.

406 Навигация Web-сайта

Рекомендации, полезные при создании панели управления сайтом Универсальная панель управления – это чрезвычайно полезный инструмент. Ниже перечислены возможности, которые следует учитывать при создании пульта управления: обзор Web. Вы вправе разместить в окне панели управления любимую страницу своего Web-сайта. Таким образом, посетители смогут путешествовать по Internet, но в то же время будут иметь быстрый доступ к вашему сайту. Вы оцените все преимущества данного метода, посетив сайт Communication Arts 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

Раскрывающееся меню

Рис. 24.17. Список опций меню располагается слева, а содержание – справа

Любой, кто когда-либо использовал GUI (для Mac, Windows или UNIX), видел, как появляются и исчезают меню в окне. Щелчок по директории открывает список находящихся в ней файлов. В это время другие файлы и папки автоматически сдвигаются вниз, чтобы можно было просмотреть содержание выбранного каталога. В Windows нужно щелкнуть по значкам «плюс» и «минус», в Mac – по треугольникам. Подобного эффекта можно добиться и в Internet при помощи свойства display (рис. 24.17 и 24.18).

Создание раскрывающегося меню

Рис. 24.18. Подменю Menu1 и Menu3 содержат ссылки на информацию, отображающуюся справа

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, функция отображает меню со всеми предоставляемыми опциями при щелчке по нему.

408 Навигация Web-сайта 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> <script src="findDOM.js"></script> <script> 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; } </script> <style type="text/css"> .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, вы можете не создавать соответствующую часть функции.

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

<body> <hr width="90" align="left"> <a class="menuHead" href="javascript:toggleClamShellMenu("menu1");"><b>&gt; ->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>&gt; ->Menu 2</b></a> <span id="menu2"> <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("menu3");"><b>&gt; ->Menu 3</b></a> <span id="menu3"> <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> </body> </html>

410 Навигация Web-сайта

Уточняющее меню В разделе «Навигация: рекомендации и запреты» главы 20 упоминалось о том, как полезно создавать уточняющие меню (breadcrumb 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> <script src="findDOM.js"></script> <script> 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>

412 Навигация Web-сайта 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(), передавая ей номер меню, которое следует отобразить на первом уровне.

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

Уточняющее меню 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).

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.

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

<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>

414 Навигация Web-сайта 13. <div id="menu1-1-1" class="menu"> Определите меню третьего уровня как CSS-слои, используя для каждого меню отдельный слой. Все ссылки, созданные на шаге 14, будут находиться в этих слоях. 14. <a href="#">Option1.1.1.1</a> Установите ссылки для каждой опции меню. Поскольку уточняющее меню не содержит пятого уровня, ссылки должны указывать на определенные URL. В приведенном примере уточняющее меню содержит четыре уровня, однако вы можете установить любое произвольное их количество.

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

<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>

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

<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> </div> <div id="menu1–3–3" class="menu"> <h3>Menu 1.3.3</h3> <a href="#">Option 1.3.3.1 -></a><br><br> <a href="#">Option 1.3.3.2 -></a><br><br> <a href="#">Option 1.3.3.3</a> </div> <div id="menu2–2–2" class="menu"> <h3>Menu 2.2.2</h3> <a href="#">Option 2.2.2.1 -></a><br><br> <a href="#">Option 2.2.2.2 -></a><br><br> <a href="#">Option 2.2.2.3</a> </div> </body> </html>

Навигация для браузеров, не поддерживающих DHTML и CSS 415

Навигация для браузеров, не поддерживающих DHTML и CSS

Рис. 24.24. Отображение страницы в браузере Internet Explorer, поддерживающем JavaScript

Сегодня практически все посетители Webсайтов используют браузеры, поддерживающие JavaScript. Однако еще есть браузеры, не имеющие данной функции, кроме того, некоторые пользователи отключают поддержку JavaScript в браузерах. Ваша задача в данном случае состоит в том, чтобы обеспечить таких посетителей хотя бы основным набором навигационных средств и сделать доступной ту часть своего сайта, которую вы определили как динамическую (рис. 24.24 и 24.25).

Использование тэга <noscript>

Рис. 24.25. Тот же самый код в браузере, не поддерживающем JavaScript. Хотя страницы выглядят приблизительно одинаково, навигация и заголовок взяты из разных источников Листинг 24.11. В тэге <noscript> содержится информация, которая отображается браузером, не поддерживающим JavaScript

<html> <head> <script language="JavaScript"> aNum=0; pageTitle='Providing Navigation for NonDynamic Browsers' </script> </head>

1. <noscript>…</noscript> В тэге <noscript> находится информация, которая скрыта от браузерах, поддерживающих JavaScript (листинг 24.11). Браузеры, не поддерживающие JavaScript, игнорируют тэг <noscript> и отображают все, что содержится в нем. Таким образом, если вы хотите добавить содержимое, которое отображалось бы в браузерах, не поддерживающих JavaScript, разместите его в тэге <noscript>.

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

<body> <noscript> <a href="menu.html"> Main Menu </a> <h1>Webbed Environments</h1><br> <h2>Providing Navigation for ->Non-Dynamic Browsers</h2> </noscript>

416 Навигация Web-сайта Используйте тэг <noscript> при импорте внешнего содержимого, созданного с помощью JavaScript (см. раздел «Внешний файл JavaScript» в главе 23). Таким образом, вы открываете доступ к этой информации для всех посетителей вашего сайта.

Дополнительные возможности Если задуматься, то и компьютер, и браузер вовсе не так разумны, как кажется на первый взгляд. Они выполняют только то, что мы им говорим. Браузер не имеет ни малейшего понятия, какая информация содержится на загружаемой им странице. Метаданные позволяют заполнить некоторые бланки, содержащие сведения об авторском праве, ключевых словах и описаниях. В тэге <meta>, который включен в тэг <head>, хранится описание типа страницы. Некоторые из этих тэгов будут использоваться непосредственно браузерами, если посетитель захочет просмотреть информацию о HTML-файле. Однако с метаданными наиболее часто работают поисковые машины, разбивая с их помощью Web-сайты на определенные категории. Взаимосвязь между ссылками помогает браузеру определить положение текущей страницы Web-сайта относительно других (рис. 24.26). Действие этой взаимосвязи аналогично работе тэга <link>, который применяется при импорте таблиц стилей (см. раздел «Добавление CSS на Web-сайт» в главе 2). Браузер с помощью такой информации устанавливает дополнительную навигацию помимо существующей на Web-странице.

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

Рис. 24.26. Управление ссылками iCab позволяет осуществлять навигацию на Web-сайте, не используя расположенные на странице ссылки. На странице представлены ссылки home (первая страница), start of site (начало сайта), previous page (предыдущая страница), next page (следующая страница), end of site (конец сайта), index (индекс), help (помощь), copyright (авторские права) и contact information (контактная информация)

Дополнительные возможности 417 Таблица 24.1. Возможные атрибуты тега <link>

Установка тэга <link>

Значение атрибута rel

Описание (на что ссылается)

home

Главная страница (home page)

start

Первая страница сайта

Следующая страница сайта

Предыдущая страница сайта

contents

Содержание или карта сайта

Установка тэга <meta>

index

Содержание или карта сайта

glossary

Глоссарий

help

Страница помощи

chapter

Начало главы

section

Начало раздела

subsection

Начало подраздела

appendix

Приложения

1. <meta name="Author" content= ->"Jason Cranford Teague"> В тэге <head> поместите тэг <meta>, в котором укажите соответствующую информацию: автор, авторские права, ключевое слово, описание (табл. 24.2). Введенное вами имя определяет тип информации.

Информация об авторских правах

made

О странице

1. <link rel="home" href="index.html"> В тэге <head> вашего документа определите тэг <link>. Величине rel (от англ. relationship – отношение) присвойте одно из значений из табл. 24.1, используя кавычки, затем укажите, к какой ссылке относится href (листинг 24.12).

Листинг 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">

418 Навигация Web-сайта Большинство браузеров, к сожалению, не поддерживают тэг <link>. Стоит ли включать его в Web-страницу? Может быть, и нет. Однако это очень изящное решение для сайта, и в будущем вы наверняка захотите включить этот тэг в его состав. Помните, что указанные тэги могут связать со страницей любую информацию. Webполиция не явится к вам ночью и не будет барабанить в дверь, если вы свяжете ссылку home с файлом help.html, но вашим посетителям это вряд ли понравится. Вопреки всеобщему убеждению не все поисковые машины используют тэги <meta>, а те, которые используют, вообще рассматривают их как дополнительное описание содержимого страницы. Их не рекомендуется включать в Web-страницу без особой необходимости. Не слишком-то полагайтесь на них, если хотите продвинуть вашу разработку к вершинам хит-парада поисковиков. Как уже было отмечено, необходимо всегда включать два тэга <meta> в тэг <head> вашего документа для того, чтобы попасть в поле зрения поисковой машины. Тэг <description> включает в себя одно-два предложения. Он сообщает поисковой машине о том, какая информация находится на странице. В свою очередь поисковая машина использует содержимое этого тэга для описания вашей страницы при распечатке результатов поиска. Более важным по сравнению с тэгом <description> является тэг <keywords>. Он представляет собой набор самых важных, ключевых слов на странице.

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

Таблица 24.2. Допустимые метатэги Возможные значения метатега

Располагаемая информация

author

Автор страницы

Информация об авторских правах

keywords

Список ключевых слов, относящихся к теме страницы

description

Краткое описание страницы

Средства управления

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

420 Средства управления

Полоса прокрутки Польза, получаемая от GUI (Graphical User Interface – графический пользовательский интерфейс) без полосы прокрутки, точно такая же, как и от машины без руля. Полоса прокрутки (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 Листинг 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";

3. <script src="findDOMFrame.js"></script> В любую функцию, написанную на JavaScript, которая непосредственно размещает объект на экране, необходимо добавить код findDOM. Поскольку ваша страница разбита на фреймы, следует использовать фреймовую версию этого кода (см. раздел «Управление содержанием во фреймах» в главе 14). 4. var scrolling=0; В тэге <script> в файле scrollBar.html инициализируйте следующие переменные: – scrolling определяет, прокручивается ли в данный момент слой; – yT записывает текущее положение верхней границы прокручиваемого слоя; – lT устанавливает первоначальное положение верхней границы слоя; – yI определяет величину инкремента для скроллинга слоя. Вы можете изменять эту величину: чем больше значение, тем быстрее прокручивается слой, а чем меньше, тем медленнее осуществляется прокрутка; – yH определяет высоту слоя; – domStyle записывает общую объектную модель документа (DOM) для прокручиваемого слоя, чтобы получить доступ к свойствам стиля; – dom сохраняет общую DOM для прокручиваемого слоя, чтобы получить доступ к прочим свойствам.

422 Средства управления 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 объекта, к которому необходимо применить скроллинг, имя фрейма,

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

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 Листинг 25.2 (продолжение)

11.

{ 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;

12.

13.

} 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){

14.

15.

16.

17.

содержащего этот объект, и присвойте значение 1 (вверх). startScroll('scrollArea','content',0) Вызовите функцию startScroll() в обработчике событий onMouseDown соответствующей ссылки. Передайте в функцию ID объекта, к которому необходимо применить скроллинг, и имя фрейма, содержащего этот объект. stopScroll() Чтобы остановить прокрутку слоя, используйте функцию stopScroll(), вызываемую в обработчике события onMouseUp. URT('scrollArea','content') Чтобы переместиться к верхней границе слоя, вызовите функцию URT() и передайте ей ID объекта и имя фрейма, содержащего этот объект. URB('scrollArea','content') Чтобы переместиться к нижней границе слоя, вызовите функцию URB() и передайте ей ID объекта и имя фрейма, содержащего этот объект. content.html Создайте HTML-файл и сохраните его под именем content.html (листинг 25.3). Он будет содержать прокручиваемый слой. Следующие два шага (16 и 17) выполняются в этом файле. #scrollArea{…} В файле content.html установите ID – scrollArea. Он должен быть задан в абсолютных координатах. <span id="scrollArea">…</span> Определите слой scrollArea в тэге <div> или <span> (см. раздел «Создание объекта» в главе 11).

424 Средства управления Листинг 25.2 (окончание)

if (document.images && imgName){ imgName.src = im[num].src; } return false; } </script> <style type="text/css"> 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.

426 Средства управления

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

Рис. 25.3. Щелчок по кнопке Back на странице 2…

Создание кнопок Back и Next 1. history.go(–1) Добавьте метод go() объекта history и передайте значение –1, чтобы вернуться на один уровень назад в списке посещенных страниц браузера (листинг 25.4). 2. history.go(1) Используйте данную строку, чтобы продвинуться на один уровень истории браузера вперед. Хотя элемент истории допускается использовать для перемещения вверх и вниз по списку истории браузера, нельзя получить непосредственный доступ к URL или определить, содержит список следующий или предыдущий элементы. Это значительно ограничивает возможности Web-дизайнера по динамическому отображению кнопок Back и Next.

Рис. 25.4. …возвращает посетителя на предыдущую посещенную страницу Листинг 25.4. Чтобы создать кнопку Back, используйте JavaScript, позволяющий получить доступ к объекту истории

Создание кнопки Back 427

Организация слайд-шоу

Рис. 25.5. Элементы управления слайд-шоу позволяют перемещаться вперед и назад в определенном порядке

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

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

428 Средства управления

Создание слайд-шоу 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 Листинг 25.5 (продолжение)

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-код.

430 Средства управления Листинг 25.5 (окончание)

<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 4 if (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="slides" id="slide12"> <h3>Slide 2</h3> <img src="0012s.gif" width="67" height="100" border="0"></div> <div class="slides" id="slide13"> <h3>Slide 3</h3> <img src="0014s.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). Рис. 25.6. Когда посетитель наводит указатель на ссылку…

Рис. 25.7. … под ней появляется текст

Создание всплывающего гипертекста 1. <script src="findDOM.js"></script> В любую JavaScript-функцию, которая непосредственно размещает объект на экране, поместите код findDOM. Для этого запишите его во внешнем текстовом файле, а затем импортируйте файл на ту страницу, где код будет использоваться (листинг 25.6). 2. function findLivePageWidth(){…} Определите функцию findLivePageWidth(), используя JavaScript (см. раздел «Размеры клиентской области окна» в главе 12). 3. function popUp(evt,objected){…} Используя JavaScript, введите функцию popUp(). Она проверяет ширину окна браузера, а затем, в зависимости от значения переменной objectID, создает основу DOM для отображаемого объекта гипертекста. Затем функция скрывает объект (если он видим) или размещает его под соответствующей ссылкой (выравнивая объект, если он находится очень близко к краю экрана), а затем отображает.

432 Средства управления 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 Листинг 25.6 (продолжение)

if(leftVal < 2) { leftVal = 2; } else { if ((leftVal + elemWidth) > ->livePageWidth) { leftVal = ->leftVal - (elemWidth / 2);} } domStyle.top = topVal; // ->Ïîçèöèÿ ýëåìåíòà ñâåðõó domStyle.left = leftVal; // ->Ïîçèöèÿ ýëåìåíòà ñëåâà domStyle.visibility = 'visible'; // Ñäåëàòü ýëåìåíò âèäèìûì } } } </script> <style type="text/css"> #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 ->&quot;meta-textual&quot; ->information for readers who want ->to know more.

Заметьте, что ссылки, связанные с всплывающим текстом, никуда не приводят (на самом деле они связаны с верхней частью страницы). Можно связать их с документами, которые уточняют и дополняют информацию, отображаемую во всплывающем гипертексте. Допустимо использовать простую функцию, которая не возвращает никакого значения, но делает ссылки не реагирующими на щелчок мышью. Вы можете поместить во всплывающем объекте подсказку, которая объясняет значение каждой ссылки в навигации, или включить гипертекст в изображение карты вашего сайта. Эта технология становится просто необходимой, если у вашего сайта есть большое графическое представление (карта сайта), где имеются области, требующие пояснения. Листинг 25.6 (окончание)

</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>

434 Средства управления

Использование формы ввода для создания динамических эффектов Самым распространенным способом взаимодействия с 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> <script src="findDOM.js"></script> <script language="JavaScript"> 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; } } </script> </head> <body> <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

Рис. 25.8. Фотография кота переместилась в новое положение, определенное пользователем

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).

436 Средства управления

Контекстная форма Формы используются для ввода информации на Web-страницу. Эти данные отсылаются на сервер и обрабатываются. Однако часто создатели форм не знают, какие сведения может ввести посетитель. Если я регистрирую какую-либо программу (рис. 25.9), я могу делать это либо от своего имени (рис. 25.10), либо от имени своей компании (рис. 25.11). Эти две возможности требуют создания различных форм. Традиционный подход к решению данной задачи – поместить на странице ссылки для вызова каждой из форм, расположенных на одной странице или на разных. Однако, используя DHTML, можно разместить обе формы на одной странице, отображая ту или иную в зависимости от данных, введенных посетителем.

Рис. 25.10. Форма «Personal»

Рис. 25.11. Форма «Business»

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

Контекстная форма 437 Листинг 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; } </script> <style type="text/css"> #formStack { position: relative; width: 300px; visibility: visible } #personal,#business { padding: 5px; ->border: solid 1px gray; position: ->absolute; top: 0px; left: 0px; ->visibility: hidden } </style> </head> <body> <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>

Создание контекстной формы 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).

438 Средства управления 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>.

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

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> </div> </body> </html>

Перемещаемые объекты 439

Перемещаемые объекты Еще одна характерная черта графического интерфейса – это возможность передвигать экранные объекты: например, перетаскивать окна, файлы по экрану, а затем помещать их в какой-либо другой объект. В качестве примера рассмотрим создание приложения, составляющего поэтические строчки из слов, разбросанных по экрану: слова нужно перемещать таким образом, чтобы в результате получилась строчка из какого-либо стихотворения (рис. 25.12). Рис. 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; }

Создание перемещаемого элемента 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-индексу этого объекта. Поэтому объект располагается поверх остальных на странице. В противном случае функция не выполняет никаких действий.

440 Средства управления 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 и присвойте начальные координаты левого верхнего угла.

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

} } 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 Листинг 25.9 (окончание)

9. onLoad="defaultEvents()" В тэге <body> введите обработчик событий onLoad для вызова функции defaultEvent(). 10. <span id="chip1" class="chip"> ->One</span> Создайте необходимое количество слоев (один слой для каждого chip-элемента) и каждому из них присвойте уникальный ID. В Internet Explorer 4 возникает проблема, связанная с отображением объектов во время их перемещения по экрану. Кроме того, нельзя использовать данную функцию при загрузке страницы из браузера Netscape 6.

442 Средства управления

Свопинг изображений Язык описания сценариев 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 Листинг 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; } </script> <style type="text/css"> 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>

массива im[] изменяет объекты, то есть осуществляет их свопинг. Вы можете добавлять любое количество изображений в массив imag[], но каждое из них должно иметь уникальный номер. В рассматриваемом примере загружается шесть изображений, и для каждого из них применяются версии off и rdy. 4. function toggleImage(imgName,num){…} С помощью JavaScript напишите функцию toggleImage(). Она достаточно проста. Сначала она определяет, может ли браузер осуществлять свопинг изображений (document.images) и существует ли такое изображение (imgName), затем изменяет источник изображения imgName на изображение из массива в зависимости от значения, содержащегося в переменной num.

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

<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>

444 Средства управления

Изменение изображения 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().

Изменение соседнего изображения

Рис. 25.17. При наведении указателя на кнопку Option 3 изменяется кнопка с таким же названием, находящаяся в соседнем фрейме

1. <img height="45" width="100" ->src="media/o2_off.gif" border="0"> Определите изображение и ссылку на него. 2. onmouseover="toggle(o2,3);" В ссылку, созданную для объекта (см. шаг 1), добавьте обработчик событий onmouseover, который будет вызывать функцию toggleImage(). Укажите название изображения, которое требуется изменить, а также номер заменяющего изображения (из массива img[]). 3. <img height="45" width="100" ->src="media/o2_off.gif" border="0" ->name="o2"> Определите изображение, которое необходимо заменить, и присвойте ему уникальное имя. Вы можете изменять не только те изображения, на которые указывает курсор мыши, но и те, которые находятся в других фреймах (рис. 25.17).

446 Средства управления

Изменение изображения, находящегося в другом фрейме 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. Если изображение не существует, никаких действий не выполняется. 4. <img height="45" width="100" ->src="media/o3_off.gif" border="0" ->name="o3"> В файле option1.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>

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

<html> <head> <style type="text/css"> body { background: white; } </style> </head> <body> <h2>Option 1</h2> <img height="45" width="100" ->src="media/o3_off.gif" border="0" ->name="o3"> </body> </html>

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

«Умное» меню 447

«Умное» меню

Рис. 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++)

В этом разделе рассказывается, как перемещаться между двумя изображениями в зависимости от того, где находится указатель мыши. Но прежде необходимо составить код, позволяющий выводить на экран то или иное изображение при загрузке соответствующей страницы. Другими словами, загружающаяся во фрейм страница сообщает меню название раздела, а «умное» меню (smart menu) автоматически обновляется с учетом полученной информации (рис. 25.18). Эта технология предназначена в основном для сайтов, на которых для создания интерфейса используются фреймы.

Создание «умного» меню 1. o1_off.gif Создайте графическое представление для следующих состояний кнопки (листинг 25.13): – off используется, когда кнопка не выбрана; – rdy применяется при наведении указателя мыши на кнопку; – on используется, когда кнопка выбрана. В зависимости от событий, происходящих в данный момент на экране, для кнопки применяется разное графическое отображение. 2. index.html Создайте новый документ с фреймами (листинг 25.14), в котором один фрейм предназначен для меню (ему присваивается имя menu), а второй фрейм – для отображения информации (content).

448 Средства управления 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 функцию toggleImage(). Она похожа на одноименную функцию из раздела «Свопинг изображений». Но в этом примере функция определяет, активно ли изображение, которое необходимо заменить. Если получен утвердительный ответ, то функция не выполняет никаких действий.

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

{ 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 } } } </script> <style type="text/css"> 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 Листинг 25.13 (окончание)

<a href="option2.html" ->onclick="toggleImage(o2,3);" ->onmouseout="toggleImage(o2,3);" ->onmouseover="toggleImage(o2,4);"> <img height="45" width="100" ->src="media/o2_off.gif" ->border="0" name="o2"> </a> <a href="option3.html" ->onclick="toggleImage(o3,6);" ->onmouseout="toggleImage(o3,6);" ->onmouseover="toggleImage(o3,7);"> <img height="45" width="100" ->src="media/o3_off.gif" ->border="0" name="o3"> </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>

8. function setButtons(){…} Напишите на JavaScript функцию setButtons(). Она активизирует кнопку из меню, соответствующую отображаемой информации во фрейме содержания. Она также определяет значение переменной 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(). Сама по себе она не выполняет никаких действий. Однако при выгрузке страницы эта функция помогает предупредить ошибку, возникающую в некоторых версиях Internet Explorer. Она предотвращает повторный вызов кода JavaScript, когда страница загружается из кэша.

450 Средства управления 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(); } </script> <style type="text/css"> body { background: white; } </style> </head> <body onunload="doNothing();"> <h2>Option 1</h2> </body> </html>

Специальные эффекты

26 Зачем создавать скучные 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>

3. <p> <span class="dropcap">F</span> ->or a minute or two …</p> Чтобы для создания буквицы использовать класс dropcap, в HTML-документ нужно включить тэг <span>. В данном примере буквица размером 30 пунктов расположена на одном уровне с первой строкой. В Internet Explorer выравнивание буквицы и основного текста происходит не по верхней части, а по нижней (то есть буквы находятся на одной линии). Поэтому буквы, для отображения которых использовался стиль dropcap, являются не совсем буквицами.

Псевдоэлемент Более легкий способ создания буквиц – использование псевдоэлементов (pseudoelement) первых букв. Псевдоэлемент – это специфичная, уникальная часть элемента, отображением которого можно управлять независимо от остальной его части. Допустимо применять псевдоэлементы первых букв для создания стиля отображения начальной буквы первой строки текста. p:first-letter {font: bold 300% times, serif; float: left;} Здесь описан псевдоэлемент first-letter, который позволяет задавать отображение первой буквы. К сожалению, ни Netscape 4, ни Internet Explorer 4 не поддерживают псевдоэлементы. Поэтому использовать их можно только на свой страх и риск.

454 Специальные эффекты

Простая тень Еще один распространенный эффект на 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; } </style> </head> <body> <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

Рис. 26.3. Так выглядит эффект тени при просмотре страницы из браузера, не поддерживающего CSS

друга (см. раздел «Абсолютные элементы, встроенные в относительные» в главе 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.4. Может быть, тень и не столь естественная, как созданная с помощью Photoshop, но загрузка такого текста занимает гораздо меньше времени

456 Специальные эффекты

Создание объемной тени 1. varshadowLength=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 Листинг 26.3 (продолжение)

– 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() для изменения цвета тени.

458 Специальные эффекты 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(), передайте в нее имена слоев тени и текст, который там необходимо отобразить. Данный метод используется только в том случае, если для фона выбран сплошной цвет, иначе тень будет выглядеть неестественно.

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

document.writeln ('body {') document.writeln ('background-color: ->rgb(' + bgR + ',' + bgG + ',' + ->bgB + ');') document.writeln (' }') writeCSS('shadow') document.writeln ('</style>') </script> <style type="text/css"> #title { font: bold 75px "Hoefler Text", ->serif, "Times New Roman", Georgia, ->Times; position: relative; top: 5px; ->left: 5px } </style> </head> <body> <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>

Изменяя переменные смещения, вы можете создавать достаточно оригинальные эффекты в духе 70-х годов (рис. 26.5).

Рис. 26.5. Объемная тень, для создания которой переменной offsetLeft присваивается значение 5

Фединг HTML-текста 459

Фединг HTML-текста Используя принцип формирования объемной тени, можно создать исчезающий и постепенно появляющийся на экране HTMLтекст. При этом вам не придется использовать анимированные файлы GIF (рис. 26.6– 26.8). Однако следует учесть, что данный метод вызывает ошибки при просмотре страницы в Netscape 4 для Windows.

Создание текста с федингом Рис. 26.6. На экране видна только ссылка. Посетитель наводит на нее указатель мыши…

Рис. 26.7. …и текст начинает постепенно появляться

Рис. 26.8. В конце концов текст становится виден отчетливо

1. <script src="findDOM.js"></script> В любой функции JavaScript, которая непосредственно располагает объект на экране, необходимо поместить код findDOM (см. раздел «Использование общей для браузеров DOM» в главе 11). Для этого запишите его во внешнем текстовом файле, а затем импортируйте файл на нужную страницу (листинг 26.4). 2. var domTop; В коде JavaScript инициализируйте следующие переменные: – domTop записывает объектную модель документа (DOM) для отображаемого слоя; – domNew сохраняет DOM нового отображаемого слоя; – layerAlpha записывает номер текущего слоя; – layerOmega определяет максимальное число слоев. Эта переменная контролирует количество повторов слоев при создании фединга текста. Таким образом, чем больше значение, хранящееся в этой переменной, тем более ровной (и более медленной) будет «проявка» текста; – layerCurent сохраняет имя (ID) текущего отображаемого слоя;

460 Специальные эффекты – 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> <script src="findDOM.js"></script> <script language="JavaScript"> 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 ) {

Фединг HTML-текста 461 Листинг 26.4 (продолжение)

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); } }

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 для определения цвета фона страницы.

462 Специальные эффекты 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, и текст, для которого применяется фединг.

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

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

Отслеживание указателя мыши 463 Листинг 26.4 (окончание)

document.writeln ('position: absolute;') document.writeln ('visibility: hidden;') document.writeln ('top: -12px;') document.writeln ('left: -3px;') document.writeln ('}') writeCSS('f') document.writeln ('</style>') </script> <style type="text/css"> #title { font: bold 75px "Hoefler Text", ->serif, "Times New Roman", Georgia, ->Times; position: relative; top: 5px; ->left: 5px } </style> </head> <body> <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. Эффект прожектора. Черный текст находится на черном фоне. Белое пятно перемещается под текстом, но поверх фона. У посетителя создается впечатление, что, управляя мышью, он освещает текст прожектором

464 Специальные эффекты

Создание объекта, отслеживающего перемещение указателя мыши 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 Листинг 26.5 (окончание)

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>

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-слое.

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

Одновременно с этой технологией допускается использовать и какие-либо другие, чтобы добиться еще более интересных эффектов. Можно работать со слоями, имеющими различные z-индексы (см. раздел «Элементы в порядке стека (3D-позиционирование)» в главе 8), чтобы создавать Web-страницы в виде головоломки (рис. 26.10), или использовать PNG-графику (см. раздел «Прозрачная графика в формате PNG»), чтобы отображать курсор в виде прицела (рис. 26.11).

Рис. 26.10. Экран представляет собой информационное «болото», полное беспорядочно расположенных строк. По нему перемещается управляемое мышью пятно, при помощи которого посетитель может найти заветную ссылку

Рис. 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. Буквы перемещаются по странице, пока посетитель не покинет ее

468 Специальные эффекты – 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 Листинг 26.6 (окончание)

<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>

4. onload="objectsFloat();" В тэге <body> вашей Web-страницы укажите обработчик событий onload, который будет вызывать функцию objectsFloat(). 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).

470 Специальные эффекты

Прозрачная графика в формате PNG Наиболее перспективным форматом для графических объектов, пришедшим на смену GIF, можно назвать PNG (Portable Network Graphics – портируемая сетевая графика). Он является стандартизированным, непатентованным, кроме того, он поддерживается WЗС и имеет ряд преимуществ по сравнению с GIF. Основное достоинство PNG состоит в том, что этот формат позволяет создавать прозрачные изображения. В формате GIF подобного эффекта добиться нельзя (рис. 26.13). В данном разделе рассказывается, как создавать PNG-графику при помощи Adobe Photoshop или Macromedia Fireworks.

Создание PNG-графики при помощи Photoshop 1. Откройте новый документ в режиме RGB, 72dpi и установите прозрачный фон (рис. 26.14). Задайте размер изображения. 2. Создайте изображение. Изображение может отбрасывать тени (допускается использовать и другие эффекты). У слоев может быть различный уровень прозрачности (рис. 26.15). Обрежьте ненужные области созданного изображения или примените инструмент Ножницы, чтобы получить изображение нужного размера. 3. Выполните команду File ⇒ Save for Web (Файл ⇒ Сохранить для Web) Откроется диалоговое окно сохранения. 4. Из ниспадающего меню Settings (Установки) выберите пункт PNG-24, включите флажок Transparency (Прозрачность), затем нажмите OK (рис. 26.16). Откроется диалоговое окно Save Optimized As (Сохранить оптимизированный как…).

Рис. 26.13. Оба изображения одинаковы, но первое было сохранено в формате GIF, а второе – в формате PNG. Заметьте, что изображение в GIF-формате целиком закрывает текст, даже в прозрачной области, в то время как через изображение в формате PNG вы можете свободно видеть текст

Рис. 26.14. Диалоговое окно Photoshop. Создается новое изображение: 72dpi, RGB, прозрачный фон

Прозрачная графика в формате PNG 471 5. Введите название изображения. 6. Выберите папку, в которой следует сохранить изображение (рис. 26.17).

Создание PNG-графики при помощи Fireworks 1. Откройте новый документ в режиме RGB, 72dpi и установите прозрачный фон (рис. 26.18). Задайте размер изображения.

Рис. 26.15. Изображение в Photoshop: два пересекающихся круга, прозрачность области пересечения 25%. Круги отбрасывают небольшую тень

Рис. 26.17. Диалоговое окно Save Optimized As в Photoshop

Рис. 26.16. Диалоговое окно сохранения для Web. Формат изображение необходимо установить на PNG-24

Рис. 26.18. Диалоговое окно Fireworks. Создается новое изображение: 72dpi, RGB, прозрачный фон

472 Специальные эффекты 2. Создайте изображение. Изображение может отбрасывать тени (допускается использовать и другие эффекты). У слоев может быть различный уровень прозрачности (рис. 26.19). Обрежьте ненужные области созданного изображения или примените Ножницы, чтобы получить изображение нужного размера. 3. На панели управления отметьте опцию Optimize (Document), установите формат изображения PNG-24 (рис. 26.20). Если вы не можете найти данный пункт на панели управления, выберите Window ⇒ Optimize (Окно ⇒ Оптимизировать). 4. Выполните команду File ⇒ Export Preview (Файл ⇒ Экспортный предварительный просмотр). Откроется диалоговое окно (рис. 26.21).

Рис. 26.20. Диалоговое окно Optimize в Fireworks. Необходимо установить формат изображения PNG-24

Рис. 26.21. Диалоговое окно Export Preview (Предварительный просмотр) в Fireworks. Если вы забыли установить формат изображения PNG-24, можно сделать это в данном окне

Рис. 26.19. Изображение в Fireworks: два пересекающихся круга, прозрачность области пересечения 25%. Круги также отбрасывают небольшую тень

Прозрачная графика в формате PNG 473 5. Убедитесь, что для изображения задан формат PNG-24, затем нажмите кнопку Export (Экспортировать). 6. Введите имя изображения. 7. Укажите папку, в которой следует сохранить изображение (рис. 26.22).

Добавление графики в формате 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; } </style> </head> <body> <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>

1. <img src="image1.png" width="164" ->height="116" border="0" ->alt="TwoCircles"> Введите тэг <img> и, используя URL созданного вами изображения в формате PNG, определите файл с изображением как источник данных тега (листинг 26.7). Поскольку формат PNG – графический, вы вполне можете использовать тэг <img>. Некоторые браузеры не поддерживают данный формат, поэтому в этот тэг рекомендуется включать атрибут alt.

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

474 Специальные эффекты

Создание часов Если вы разрабатываете 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 Листинг 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); } </script> <style type="text/css"> #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>

4. onLoad="countThis();" В тэге <body> вашего документа введите обработчик событий onload, который будет вызывать функцию countThis(). Данный шаг запускает часы. 5. <div id="clock"></div> Создайте слой для часов. Для этого в тэге <div> укажите для атрибута ID значение clock. Описанный способ создания часов сильно отличается от создания кода времени, отсчитываемого сервером, или от гринвичского времени (GMT), о которых рассказывалось в главе 23, раздел «Включения на стороне сервера». Эти часы показывают (и обновляют каждую секунду) местное время, которое берется с компьютера пользователя. Таким образом, если посетитель неправильно установил время на своем компьютере, ваши часы также будут показывать неверное время.

мультимедиа С тех самых пор, как Всемирная паутина стала одним из главных средств массовой информации, ее создатели обещали, что очень скоро можно будет работать с мультимедийными данными так, как будто они находятся на CD-ROM. Время идет, а обещание все еще не выполнено. На сегодняшний день не существует способа передачи мультимедийных данных, способного конкурировать с CR-ROM, даже несмотря на то, что при помощи Macromedia Flash можно добиться впечатляющих эффектов. С увеличением объема передаваемой информации все чаще стали применяться озвучивание и анимация изображений – мультимедиа. Файлы мультимедиа могут существенно замедлять работу приложения, поскольку требуется много времени для перемещения и обработки таких объектов, даже при достаточно высокой скорости некоторых видов Internet-соединений. Кроме того, их применение не приносит таких хороших результатов, как использование телевидения, CD и DVD. Но все-таки мультимедиа может предложить качественно более высокий уровень создания интерактивных Web-приложений. Остается лишь увеличить пропускную способность Internet-соединений.

В этой главе рассматриваются основы создания эффектов мультимедиа на Webсайте. Здесь не описывается каждый аспект использования мультимедийных технологий, а дается лишь обзор некоторых возможностей.

Использование звука в Web 477

Использование звука в Web

Рис. 27.1. Хотя нет ни малейшего видимого намека на то, что эта страница использует звуковое сопровождение, здесь есть аудиофайл, имитирующий звук ветра на другой планете Листинг 27.1. Звуковой файл находится на странице, но управление аудиоэффектом скрыто от пользователей. Требуется несколько тэгов для включения звукового файла на страницу, но только одновременное использование тэгов <object> и <embed> позволяет добиться максимальной совместимости с различными браузерами

<html> <head> <style type="text/css"> body { background-image: ->url(mars1_pathfinder.jpg); } </style> </head> <body> <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>

В браузерах 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 перечислены наиболее важные параметры и переменные для создания звука.

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>

Путь к модулю расширения для воспроизведения звука

Анимация в формате GIF 479

Рис. 27.3. Диалоговое окно New Document (Создать документ). Убедитесь, что установлено разрешение 72dpi

Формат GIF (Graphic Interchange Format – формат обмена графикой) позволяет получать аналогичный тип анимации. Хотя средства, инструменты и метод ее создания радикально изменился с 1977 года, но идея, лежащая в основе, осталась той же. Вы создаете изображение в одном слое, затем еще одно – в следующем, но уже с небольшими отличиями, и т.д. Когда одно изображение быстро сменяется другим, создается ощущение, что объект движется. Существует множество различных инструментов для создания анимации в формате GIF. Наиболее удобные встроенные средства имеются в Adobe ImageReady и Macromedia Fireworks.

Создание GIF-анимации в Macromedia Fireworks

Рис. 27.4. При выборе типа изображения укажите опцию Animated GIF

Рис. 27.5. Первый кадр создаваемой анимации: мяч находится внизу

1. Откройте новый документ необходимого размера с разрешением 72dpi (рис. 27.3). Как и при создании любой графики, большой объект увеличивает размер файла, следовательно, возрастает время загрузки. 2. В палитре Optimize (Оптимизировать) выберите опцию Animated GIF (Анимированный GIF) из выпадающего меню (рис. 27.4). 3. В первом кадре создайте изображение (рис. 27.5). 4. Создайте остальные кадры, затем поместите в каждый кадр то же изображение, скопировав его из первого кадра (рис. 27.6). Используя палитру Frame (Кадр), выберите циклический или однократный показ анимационного ролика. 5. Затем выберите пункты File ⇒ Export (Файл ⇒ Экспортировать). Откроется диалоговое окно Export (Экспорт).

480 Мультимедиа 6. Введите имя изображения (убедитесь, что используется расширение .gif), выберите папку, в которой оно будет храниться, и нажмите кнопку Save (Сохранить).

Создание GIF-анимации в ImageReady 1. Создайте новый документ необходимого размера с разрешением 72dpi (рис. 27.7). Как и при создании любой графики, большой объект увеличивает размер файла, следовательно, возрастает время загрузки. 2. В первом кадре создайте изображение (рис. 27.8). 3. Создайте остальные кадры, затем поместите в каждый кадр то же изображение, скопировав его из первого кадра (рис. 27.9). Используя палитру Frame (Кадр), выберите циклический или однократный показ анимационного ролика.

Рис. 27.6. В последнем кадре мяч находится у левого края изображения, обернувшись против часовой стрелки

Рис. 27.7. Диалоговое окно New Document (Создать документ). Убедитесь, что установлено разрешение 72dpi

Рис. 27.8. Первый кадр создаваемой анимации: мяч находится внизу

Анимация в формате GIF 481 4. Затем выберите пункты File ⇒ Save Optimized (Файл ⇒ Сохранить оптимизированный). Откроется диалоговое окно Save Optimized. 5. Введите имя изображения (убедитесь, что используется расширение .gif), выберите папку, в которой оно будет храниться, и нажмите кнопку Save (Сохранить).

Рис. 27.9. В последнем кадре мяч находится у левого края изображения, обернувшись против часовой стрелки Листинг 27.2. В данном коде ссылка <img> на файл GIF-анимации идентична ссылке <img> на любой файл формата GIF

<html> <body> <img src="redBall.gif" width="50" ->height="50" border="0"> </body> </html>

Добавление анимации на Web-страницу 1. <img src="redBall.gif" width="50" height="50" border="0"> Анимационный файл в формате GIF помещается на страницу так же, как и любое изображение в формате GIF (листинг 27.2 и рис. 27.10).

Если у вас нет ни ImageReady, ни Fireworks, воспользуйтесь средствами для создания GIF-анимации, имеющимися в Internet. Для Mac я рекомендую GIFBuilder, а для Windows – GIF Construction Set (см. приложение 5); эти программы имеются на сайте www.download.com. Помните, что хотя GIF-анимация может занимать то же самое место, что и обычный статический GIF-файл, каждый фрейм GIFанимации является полноценным изображением.

Рис. 27.10. Мяч сначала находится снизу, потом перемещается вправо, наверх, а затем влево. Далее ролик повторяется

482 Мультимедиа

Назначение 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

Назначение GIF-анимации 483 Показ слайдов. Если вы хотите показать несколько изображений в ограниченной области, используйте GIF-анимацию (рис. 27.14). Вместо показа анимационного ролика разместите каждое изображение в отдельном фрейме и установите промежуток времени, в течение которого этот кадр будет отображаться на экране. Если вы установите циклическое повторение показа слайдов,

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

Рис. 27.12. Каждый кадр содержит «визуальный шум», который при использовании его в качестве фона создает иллюзию просмотра телевизора

Рис. 27.13. Здесь дается подробное описание действий, необходимых для установки чипа памяти в слот

484 Мультимедиа

Рис. 27.14. Вот несколько фотографий, которые я сделал в Англии

Flash-анимация Изначально Flash создавался, как альтернатива GIF для анимации в Web. Он предоставляет гораздо больше возможностей, чем сейчас предлагает GIF. И по сей день Flash является великолепным средством для создания несложной анимации. Допустимо использовать его для этих целей вместе с DHTML. На рис. 27.15 показан движущийся логотип, созданный при помощи Flash-анимации. Это солнечное затмение. Луна медленно перемещается по экрану и затем заслоняет Солнце.

Flash-анимация 485

Создание Flash-анимации 1. Создайте изображение в формате Flash или импортируйте векторный графический объект из любой другой программы, выбрав пункты File ⇒ Import in Flash (Файл ⇒ Импортировать в Flash) – рис. 27.16. 2. В диалоговом окне Import (Импортировать) убедитесь, что вы сохранили слои, хранящиеся в созданном вами файле, затем нажмите OK (рис. 27.17). Все слои должны присутствовать на временной шкале (рис. 27.18). Рис. 27.15. Солнечное затмение, созданное при помощи Flash-анимации

Рис. 27.16. Средства для рисования во Flash несколько сложны. Я создал логотип в другой программе, работающей с векторной графикой. Каждый фрейм анимации содержится в отдельном слое

Рис. 27.17. Используя диалоговое окно Import, вы можете сохранять слои, созданные в другой программе (в данном случае FreeHand), при работе над Flash-анимацией

486 Мультимедиа 3. Чтобы определить продолжительность анимации, укажите кадры для каждой точки временной шкалы, затем выберите пункты Insert ⇒ Keyframe (Вставить ⇒ Опорный кадр) – рис. 27.19. На этом шаге устанавливается конечная точка анимации.

4. Чтобы создать анимацию объекта, выберите первый кадр в слое, который содержит нужный объект, и переместите его в начальное положение (рис. 27.20). Если кадр не является текущим опорным, выберите пункты Insert ⇒ Keyframe.

Рис. 27.18. Файл был импортирован из FreeHand с сохранением всех использованных слоев

Flash-анимация 487

Рис. 27.19. Flash-анимация создается из неподвижных кадров, которые при проигрывании в определенной последовательности дают имитацию движения. Во Flash устанавливаются опорные кадры, чтобы определить начальную и конечную точки воспроизведения. На рисунке продолжительность воспроизведения составляет 2,5 с. В качестве опорных определены первые кадры всех трех используемых слоев, а последним является тридцатый кадр (2,4 с)

5. Выделите кадры, находящиеся между начальным и конечным кадрами анимации, затем откройте палитру Frame (Кадр) и выберите пункт Motion (Движение) из ниспадающего меню Tweening (рис. 27.21). Flash вычисляет кратчайшее расстояние между начальным и конечным положениями объекта и дополняет файл недостающими кадрами.

Рис. 27.20. Я хотел, чтобы Луна начинала движение от правого нижнего угла, поэтому начальное положение анимации установлено в первом кадре слоя Луны. Щелкнув по данному слою, я устанавливаю начальное положение Луны

488 Мультимедиа 6. Чтобы просмотреть созданный анимационный ролик, выберите пункты Control ⇒ 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). 4. </object> Закройте контейнер объекта.

Рис. 27.21. Палитра Frame позволяет задать построение промежуточных изображений. Таким образом вы можете получить недостающие фреймы, которые находятся между двумя опорными

Таблица 27.2. Важные параметры Flash-анимации Имя Возможные атрибута значения

Функция

movie

<url>

Обозначение пути к файлу .swf

quality

best high auto high auto low low

Качество воспроизведения анимации

loop

true false

Повтор анимации

play

true false

Запуск анимации сразу после загрузки страницы

pluginpage

<url>

Обозначение пути к странице, содержащей проигрыватель Flash

Flash-анимация 489 Может показаться, что дублирование тэгов излишне, однако одновременное использование тэгов <object> и <embed> позволяет достичь максимальной совместимости. Большинство браузеров поддерживают тэг <embed>, однако тэг <object> также является стандартизированным и наверняка будет применяться в следующих поколениях браузеров.

Не только файлы GIF-анимации имеют небольшой размер, существуют анимации, подобные GIF, размер которых гораздо меньше (например, 51 Kб для GIF против 5 Kб альтернативного формата). Flash-анимацию можно использовать для тех же целей, что и GIF-анимацию (см. раздел «Назначение GIF-анимации»).

Размеры Flash-анимации автоматически подгоняются под размеры окна браузера. Я установил атрибуты width и height равными 95%, поэтому анимация занимает всю свободную область в окне. Если же задать 100%, окно браузера «обрежет» края анимации.

Листинг 27.3. Файл формата Shockwave (.swf), созданный во Flash, внедряется в Web-страницу. Анимация занимает все свободное место в окне

<html> <head> <style type="text/css"> body { background-color: black } </style> </head> <body> <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>

490 Мультимедиа

Видео в Internet С середины 90-х годов во Всемирной сети появилось видео. Качество и скорость видеороликов с тех пор значительно улучшились, но все же видео в Сети не сравнить со спутниковым или кабельным телевидением. Но Internet обладает рядом достоинств, которых нет ни у какого другого средства связи. Например, не нужно покупать телепередатчик для трансляции своего видеосигнала (рис. 27.22). В Web существуют различные форматы для передачи изображения: RealMedia, Windows 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). 5. </object> Закройте контейнер объекта.

Рис. 27.22. Видеоролик воспроизводится в окне. В этом примере средства управления были удалены. Такая настройка выглядит лучше, но при этом посетитель не может регулировать громкость звука или повторить просмотр ролика

Видео в Internet 491 Может показаться, что дублирование тэгов излишне, однако одновременное использование тэгов <object> и <embed> позволяет достичь максимальной совместимости. Большинство браузеров поддерживают тэг <embed>, однако тэг <object> также является стандартизированным и наверняка будет применяться в следующих поколениях браузеров. Можно размещать текст вокруг видео (или любого тэга <object>), определяя свойство float в тэгах <object> и <embed> (см. раздел «Обтекание текстом» в главе 7). Рис. 27.23. Программа iMovie позволяет быстро и легко создавать видео в формате QuickTime для Mac

Листинг 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 } </style> </head> <body> <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>

492 Мультимедиа В одном файле с видео можно разместить и звуковое сопровождение, но это увеличит размер файла. Если вы хотите больше узнать о создании видео в программе iMovie, прочитайте книгу Скотта Смита (Scott Smith) «Making iMovies».

Таблица 27.3. Важные параметры для настройки видео в формате QuickTime Имя атрибута

Возможные значения

Функция

src

<url>

Обозначение пути к воспроизводимому файлу в формате QuickTime

cache

true, false

Сохранение фильма в кэш-памяти компьютера посетителя для ускорения просмотра

loop

true, false

Повтор воспроизведения

autoplay

true, false

Запуск сразу после загрузки страницы

playeveryframe

true, false

Показ всех кадров без исключения (может замедлять воспроизведение)

volume

от 0 до 100

Управление громкостью

pluginpage

<url>

Обозначение пути к странице, содержащей проигрыватель QuickTime

Добавление Java-апплетов Язык программирования Java позволяет включать небольшие программы (или апплеты) в Web-страницу. В данной книге не рассматривается вопрос о том, как их создавать, но их нетрудно найти в Internet и поместить на свои Web-страницы. Язык Java – великолепное средство, при помощи которого можно добавить на Web-сайт самые разнообразные элементы, например эти замечательные часы (рис. 27.24). Рис. 27.24. Часы, созданные при помощи Java, отсчитывают время

Добавление Java-апплетов 493 Листинг 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 } </style> </head> <body> <applet code="BillsClock.class" ->width="300" height="300" ->codebase="bills_clock" ->alt="Clock"></applet> <p>Greenwich Mean Time</p> </body> </html>

Добавление 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), они созданы Вильямом Джайлом (William Giel). Работа Java-апплета на компьютере посетителя зависит от нескольких факторов, в том числе от уровня поддержки языка Java используемой операционной системой.

Различие между Java и JavaScript Язык программирования Java разработан компанией Sun Microsystems. Он используется для создания программных продуктов, не требующих наличия Web-браузера. Кроме того, Java применяется для написания апплетов (небольших приложений), которые можно включать в Web-страницу. Язык описания сценариев JavaScript разработан Netscape Communications Corp. Он предназначен для управления HTML на Web-странице и создавался для использования в браузерах. Языки сценариев и языки программирования могут выполнять сходные задачи. Языки сценариев, как правило, легче выучить, но возможности их применения существенно ограничены.

отладка кода

28 Если для создания Web-страниц вы используете CSS и DHTML, рано или поздно в программах начнут возникать ошибки. Подобных проблем не избежать, так же как смерти и налогов. Я протестировал код, приведенный в этой книге, в различных браузерах и операционных системах, и надеюсь, что в нем нет ошибок. Но вам придется изменять код, выбирая другие переменные, значения, URL и стили. Вы можете совмещать код из различных примеров или создавать собственные функции. Так или иначе это приведет к возникновению ошибок. В данной главе описаны наиболее общие ошибки, возникающие в кодах, рассказано, как быстрее их обнаружить и устранить. Надеюсь, что смогу удержать вас от попытки разнести монитор, если что-то не будет получаться.

Обнаружение ошибок CSS 495

Обнаружение ошибок CSS Вы аккуратно определяете правила таблицы стилей, запускаете браузер и… не видите никаких результатов! Не беспокойтесь, такое случается с каждым.

Чтобы отыскать ошибку в определении CCS-правил, необходимо проверить следующее:

Проверка кода Существует множество различных вариантов ответа на вопрос, почему программа не работает. Большинство ошибок, приводящих к тому, что определенные вами CCSправила не функционируют, очень легко вычислить. На рис. 28.1 показаны наиболее часто встречающиеся ошибки.

все ли определенные вами свойства поддерживаются вашим браузером и операционной системой. Многие свойства не поддерживаются Internet Explorer и/или Netscape, что зависит от используемой операционной системы. В приложении 2 указана совместимость тех или иных свойств с браузером и ОС; нет ли в применяемом вами селекторе опечаток. Если вы не поставили в начале определения класса или ID открывающий знак или знак #, правило не будет работать. Помимо этого, следует избегать подчеркивания в именах ID или классах, так как Netscape 4 не воспринимает подчеркивание;

Рис. 28.1. На рисунке представлено несколько самых распространенных ошибок, возникающих при использовании CSS

496 Отладка кода

указанные значения используются с соответствующими свойствами. Применение неверных значений может привести к ошибке или непредсказуемым результатам; не пропустили ли вы точку с запятой. Если вы не поставили в конце определения точку с запятой, CCS-правило не будет работать; все определения были начаты и закончены фигурной скобкой. Чаще всего пропускают именно фигурную скобку; все многострочные тэги комментариев были закрыты. Если тэг не закрыт, то оставшаяся часть CSS-кода рассматривается как комментарий (см. раздел «Комментарии в CSS» в главе 2); HTML-тэги в документе введены правильно. Тэг абзаца всегда закрывается при помощи </p>, только таким образом можно добиться корректной работы CSS (см. раздел «Типы HTML-тэгов» в главе 1); в тэге <style> не должно быть опечаток, если все правила находятся в заголовке. Опечатки в тэге <style> означают, что не установлены какие-либо определения (см. раздел «Добавление CSS на Webстраницу» в главе 2); при ссылке на таблицу стилей или ее импорте указан верный файл. Проверьте заданный вами путь к файлу. Помните, что нельзя включать тэг <style> во внешний CSS-файл (см. раздел «Добавление CSS на Web-сайт» в главе 2); нет повторяющихся или даже противоречащих друг другу правил для одного и того же тэга. Проверьте каскадный порядок (см. раздел «Определение каскадного порядка» в главе 2).

Крайние меры Если вы до сих пор не можете заставить программу работать, сделайте следующее:

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

Проверка CSS-правила 497

Проверка CSS-правила Хотя и Dreamweaver, и GoLive проверяют CSS-код, W3С создал сайт, который называется CSS Validator. Он позволяет проверять CSS-код на наличие ошибок и соответствие стандартам W3C (рис. 28.2).

Использование CSS Validator от W3C

Рис. 28.2. Домашняя страница сайта CSS Validator

Рис. 28.3. Я использую CSS Validator, чтобы проверить файл в режиме online

Рис. 28.4. Я указал URL внешнего файла CSS, используемого на своем сайте

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).

498 Отладка кода Любой Web-дизайнер способен показать, что лежит в основе его сайта, поэтому вы вправе использовать значок CSS (рис. 28.6). Однако только те страницы, которые прошли подтверждение при помощи CSS Validator, могут содержать значок Valid CSS (рис. 28.7).

Рис. 28.6. Скажите громко и с гордостью: «Сделано с использованием CSS!»

Допустимо не проверять CSS браузера, отображающего ваш код, но такая проверка иногда позволяет найти ошибки в коде. Рис. 28.7. Если CSS-правила прошли проверку, вы также можете поместить на странице значок Valid CSS

Рис. 28.5. Сообщение об ошибках в CSS

Определение ошибок в коде JavaScript 499

Определение ошибок в коде JavaScript

Рис. 28.8. Наберите 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). После того как ошибка найдена, вы можете исправить ее и проверить код заново.

Рис. 28.9. Экран с сообщениями об ошибках в Netscape 4

Рис. 28.10. Экран с сообщениями об ошибках в Netscape 6

500 Отладка кода

Проверка кода Ниже перечислены наиболее часто встречающиеся ошибки:

пропуск фигурной скобки ({}) при написании блоков команд. Если не хватает одной из скобок, появится сообщение об ошибке; пропуск кавычек (''). В данном случае также будет выводиться сообщение об ошибке; ссылки на переменные и объекты, не описанные и не инициализированные в коде. Эта ошибка называется проблемой синхронизации. Если в одном фрейме есть ссылка на несуществующий объект или объект, который еще не загрузился, то при обработке кода возникнет ошибка. Единственным способом найти ее является проверка существования переменной или объекта, на который указывает ссылка. Это можно сделать, поместив в код следующую строку: if(document.nextFrame.value1) ->{document.nextFrame.value1=x}

Рис. 28.11. Сообщение об ошибке в Internet Explorer

Рис. 28.12. Наиболее часто встречающиеся ошибки в JavaScript

Определение ошибок в коде 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 и т.п.

502 Отладка кода

Различия между браузерами 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 Брюки или нижнее белье? Когда я был студентом и жил в Лондоне, я часто посещал один из местных пабов (один из шести по пути к квартире) на берегу Темзы. Однажды я разговаривал со своим другом, а рядом стоял пьяный регбист и постоянно что-то проливал на меня. После того как это произошло несколько раз, я встал и начал кричать на него: «Эй, ты что? Хочешь постирать мои брюки?» К сожалению, я забыл, что в Британии, в отличие от Америки, слово «pants» (брюки), которое я сказал, означает нижнее белье. Регбист и его шестеро друзей позже попытались искупать меня в Темзе. Не делайте таких ошибок. Язык может убить!

одинаковые по звучанию и написанию, но различные по смыслу. Подобные разночтения не приводят к катастрофическим последствиям, но нервы потреплют изрядно. Устранить различия в интерпретации строк кода невозможно, только если вы сами создадите какой-нибудь браузер, который все люди мира установят на свои компьютеры. Попробуйте поставить заплатки на «взаимные недопонимания» браузеров:

скорректируйте код. Мой друг поступил следующим образом: он выкинул строку line-height: normal из кода, и программа стала работать просто замечательно; подгоните код под операционную систему и/или браузер (см. раздел «CSS и операционная система» в главе 22); создайте страницу каким-нибудь другим способом. Например, в Netscape 6 возникают проблемы с отображением фона и границ во вложенных CSS-слоях. Если необходимы именно вложенные слои, придется отказаться от определенного вами цвета границ; оставьте как есть. Для решения некоторых проблем не стоит прилагать и малейшего усилия. Если проблема незначительная, например в одном браузере после тэга <h1> ставится еще несколько разделителей страницы, а в другом – нет, то не стоит тратить драгоценное время на исправление этого недостатка, займитесь лучше чем-нибудь более интересным.

Будущее динамического Internet Предположим, вы делаете какую-то работу – например, решили построить яхту, о которой долго мечтали. И друг любезно предложил свою помощь. Он измеряет первую доску и говорит, что следующую надо сделать длиной 350,3 см. Вы смотрите на свою рулетку и видите, что по ней все измеряется в дюймах, а не в сантиметрах. Что же делать? Нет ничего проще: надо разделить число сантиметров на 2,54, и вы получите ту же самую длину, но выраженную в дюймах. В результате длина доски составит что-то около 138 дюймов. Обрежьте доску, и дерзайте дальше! Все эти дюймы, ярды, футы являлись стандартами долгое время. Проблема использования такой системы измерения заключается в том, что в одной миле, например, не целое число ярдов и т.п. Зато в метрической системе все просто: в одном метре сто сантиметров (см. раздел «Все из-за несоблюдения стандартов»). Стандарты – великая мысль человечества. Если бы мы не пытались улучшать наши стандарты, то до сих пор перепрыгивали бы с дерева на дерево, пытаясь выяснить, кому достался самый хороший банан.

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

Необходимость стандартов 505

Необходимость стандартов

Рис. 29.1. Web-сайт королевской обсерватории в Гринвиче (The Royal Observatory Greenwich), www.rog.nmm.ac.uk

Нулевой (гринвичский) меридиан – стандарт, помогающий нам определять с высокой точностью наше положение на Земле (рис. 29.1). Этот стандарт может использоваться везде, он универсален и понятен. Он помогает морякам бороздить моря и океаны, а летчикам ориентироваться в воздушном пространстве. С тех пор как был принят данный стандарт, нам открылся мир путешествий, ставший куда более доступным и безопасным. Идея стандартов лежит и в основе Всемирной сети: необходимо обеспечить передачу информации на любой компьютер, в любую точку планеты, и данные должны отображаться так, как это было задумано автором. На самой заре Internet существовал только один вид HTML. Не возникало никаких проблем совместимости: поклонники Сети путешествовали при помощи браузера Mosaic, первого графического браузера, который соответствовал всем существовавшим тогда стандартам. С появлением Netscape возникли и различные дополнения к HTML. Они работали только в браузерах Netscape, и все, кто не был его счастливым обладателем, находились вне игры. Хотя дополнения Netscape игнорировали стандарты W3C, большинство из них, или, по крайней мере, некоторые версии впоследствии стали частью этого самого стандарта. Говорят, что с тех пор Всемирная сеть стала приходить в упадок. Internet – это одно из самых замечательных изобретений человечества, способствующих общению, со времен, когда люди, живущие в одной деревне, собирались

506 Будущее динамического Internet вечером у костра и рассказывали друг другу разные истории. Проблема заключается в том, что если не будет стандартов в такой «мировой деревне», как Web, то не каждый сможет «заглянуть на огонек». При создании Web-сайта допустимо использовать любые оригинальные методики – JavaScript, Flash, QuickTime, VBScript, слои, – но далеко не все посетители увидят результат вашего творчества, и таким образом, вы не пускаете на свой огонек многих одиноких жителей большой «мировой деревни». Я провел 80% всего времени, потраченного на написание программ, пытаясь отладить код таким образом, чтобы он работал как в Internet Explorer, так и в Netscape. И так создаются почти все Web-проекты: большая часть времени отводится на отладку кода, чтобы добиться одинаковой работы приложения в различных браузерах. Если бы производители браузеров придерживались единого стандарта, подобной проблемы бы не возникало. Web-дизайнеру необходимо знать стандарты Всемирной сети, по возможности всегда ими руководствоваться и требовать их соблюдения от разработчиков браузеров. Например, группа The Web Standards Project (www.webstandards.org) занимается установлением стандартов, следит, чтобы все разработчики браузеров придерживались существующих правил, в создании которых они также участвуют (рис. 29.2). Присоединяйтесь!

Рис. 29.2. Сайт компании The Web Standards Project, следящей за соблюдением стандартов в Web

Все из-за несоблюдения стандартов Из-за несоблюдения стандартов часто возникают проблемы. В качестве примера рассмотрим причины потери космического зонда Martian Climat Orbiter. Компания, которая производила зонд, использовала британскую систему мер, в то время как NASA – метрическую (научный стандарт). В результате расстояние, которое, как предполагалось, зонд пройдет до Марса, было рассчитано неточно, и он просто разбился о поверхность планеты. Вот еще один пример: 22 октября 1707 года четыре корабля Королевского флота неправильно определили свое положение и разбились у побережья Сицилии, и все из-за несоблюдения стандартов.

Extensible Markup Language 507

Extensible Markup Language

Рис. 29.3. Сайт W3C, посвященный XML (www.w3.org/XML)

Рис. 29.4. Страница, посвященная XSL (www.w3.org/Style/XSL)

SGML (Standard Generalized Markup Language – стандартный обобщенный язык разметки) – это, можно сказать, дедушка большинства языков разметок, используемых как для печати, так и для 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. Он состоит из тэгов, которые определяют, каким образом браузер должен работать

508 Будущее динамического Internet с документом. Автор документа пишет тэги, чтобы разбить документ на области. Затем создается файл определения типов документа (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 является неотъемлемой частью этого языка разметки.

Extensible Hypertext Markup Language 509

Extensible Hypertext Markup Language

Рис. 29.5. Сайт, посвященный XHTML (www.w3.org/TR/xtml1/)

С помощью языков XML и XSL в Web можно добиться очень неплохих результатов, например сделать содержимое страниц независимым от разметки. Вместо того чтобы тщательно прорабатывать все детали на каждой странице, можно управлять разметкой сайта из одного файла. Но как заставить Web-дизайнеров отказаться от привычного HTML и перейти к более сложному XML? Ответ прост: применить XHTML (Extensible Hypertext Markup Language – расширяемый язык разметки гипертекста). 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

510 Будущее динамического Internet

обладает более высокой степенью совместимости. Следовательно, 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>

Преобразование HTML в XHTML 511

ставьте пробел и слэш в пустых тэгах. Предыдущее правило необязательно для тэгов, которые не содержат значимой части, то есть пустых (например, <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> заключайте значения атрибутов в кавычки. Если какой-нибудь тэг имеет атрибуты, значения последних должны быть заключены в кавычки, например: Неправильно: <imgsrc=myImage.gif/> Правильно: <imgsrc="myImage.gif"/>

кодируйте знак амперсанда (&) в значениях атрибутов специальным выражением. Амперсанд (&) должен быть заменен специальным выражением – &amp;. Неправильно: <img src="bill&ted.gif" /> Правильно: <img src="bill&amp;ted.gif" />

не используйте HTML-комментарий в тэгах-контейнерах сценариев и стилей. Один из приемов, описанных в данной книге, – постановка HTML-комментария сразу после тэга <script> и <style>. Это необходимо, чтобы спрятать код от устаревших браузеров, не поддерживающих его. В XHTML так делать нельзя. Неправильно: <style> <!– p{font: times;} // –> </style> Правильно: <style> p{font: times;} </style>

Скорее всего, будущее Web – за XHTML и CSS. Однако, пока производители браузеров медленно адаптируют свои творения к новым стандартам, консорциум W3C сделал XHTML обратно совместимым с HTML.

512 Будущее динамического Internet

Synchronized Multimedia Integration Language SMIL (Synchronized Multimedia Integration Language – язык интеграции синхронизированной мультимедиа) предназначен для создания мультимедиа в 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 и Macromedia Flash, либо у вас есть опыт работы на телевидении или в области производства фильмов, вы, наверное, знаете принципы использования временной шкалы. Она определяет, каким образом будет осуществляться совместная работа различных мультимедийных компонентов. В SMIL включены несколько тэгов, которые позволяют Web-дизайнерам указывать, когда, где и как будет отображаться мультимедиа. Вы можете устанавливать время запуска или остановки клипов мультимедиа циклического запуска, а также их циклическое воспроизведение. Вы можете синхронизировать запуск нескольких клипов при помощи тэгов, подобных тэгам HTML.

Масштабируемая векторная графика 513 Нет необходимости пользоваться сложными языками (например, JavaScript) или дорогим программным обеспечением. Другое препятствие на пути высококачественного мультимедиа в Web – пропускная способность сетей. В то время как посетитель, использующий соединение через линии T1, не испытывает трудностей с загрузкой видео в формате QuickTime, посетитель, имеющий модем 14,4 Кбит/с, просто не сможет открыть страницу. Рис. 29.7. Страница, посвященная SVG (www.w3.org/graphics/SVG)

Каково же будущее SMIL? Консорциум W3C рекомендует этот язык как стандарт, и, вероятнее всего, он будет принят всеми участниками World Wide Web.

Масштабируемая векторная графика

Рис. 29.8. Код SVG, сгенерированный в Adobe GoLive

Рис. 29.9. Результат выполнения кода, показанного на рис. 29.8. Предварительный просмотр в GoLive

Масштабируемая векторная графика (Scalable 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.

514 Будущее динамического Internet

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 не только для определения стилей отображения, но также и для указания поведения объектов. Это значительно упрощает динамическое управление сайтом.

Рис. 29.10. Будущее Web-дизайна: CSS третьего уровня

Стандарты теряют всякий смысл, если их не поддерживают браузеры. Помните, что у вас есть право голоса. На сайте The Web Standards Project (www.webstandards.org) вы найдете более детальную информацию о том, как можно помочь в нелегкой борьбе за выпуск программного обеспечения, поддерживающего существующие стандарты.

○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○

○

приложения ПРИЛОЖЕНИЕ 1 ПРИЛОЖЕНИЕ 2 ПРИЛОЖЕНИЕ 3 ПРИЛОЖЕНИЕ 4 ПРИЛОЖЕНИЕ 5 ПРИЛОЖЕНИЕ 6

◆ ◆ ◆ ◆ ◆ ◆

Браузеры, поддерживающие DHTML и CSS ... 516 Краткая справка о CSS ................................. 520 Краткая справка о DHTML ............................ 529 Шрифты, поддерживаемые браузером ....... 534 Дополнительные инструменты .................... 539 Дополнительные источники ......................... 545

Браузеры, поддерживающие DHTML и CSS Браузеры, не поддерживающие DHTML Не все браузеры могут обрабатывать DTHML-код, особенно это касается портативных устройств, подключенных к сети. Если вы не хотите потерять большую часть потенциальной аудитории, ваши Web-страницы должны работать и без DHTML. Неплохо было бы протестировать сайт перед опубликованием на всех доступных Web-браузерах.

Если браузер совместим с 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 и CSS 517

Internet Explorer Internet Explorer компании Microsoft стал основным Web-браузером, через него проходит львиная доля информации Internet. Хотя я рекомендую создавать Web-сайты, совместимые почти со всеми браузерами и соответствующие мировым стандартам, скорее всего, большинство людей, посетивших вашу страничку, используют одну из версий Internet Explorer.

Internet Explorer 4 За последние два года применение Internet Explorer 4 значительно сократилось, так как большинство пользователей перешли на Internet Explorer 5 и 6, которые больше соответствуют стандартам. 4-я версия была первым конкурентоспособным Web-браузером от компании Microsoft. Несмотря на дебаты по поводу включения браузера в операционную систему Windows, Internet Explorer – именно тот браузер, который отнял у Netscape часть аудитории. В Internet Explorer 4 реализованы многие стандарты W3C. Хотя браузер не был идеальным, он стал первым, где DHTML пытались построить на базе этих стандартов. Internet Explorer 4 поддерживает HTML, CSS1 (частично), CSS-P (частично), JavaScript и объектную модель документа (DOM) Internet Explorer.

Internet Explorer (Windows) Internet Explorer 5 был включен в операционную систему Windows и теперь занимает главенствующее положение на рынке Web-браузеров.

Есть некоторое сомнение, что 5-я версия по сравнению с 4-й была большим шагом в сторону принятия стандартов. Но реализация CSS и DOM в Internet Explorer 5 представлена на более качественном уровне. Таким образом, включив браузер в операционную систему, компания Microsoft разделила пользователей Internet Explorer для Windows и пользователей других браузеров, даже Internet Explorer для Macintosh (о нем будет рассказано далее). В действительности 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. Но на этом их сходство заканчивается. Internet Explorer 5 для Macintosh отличается от версии для Windows так же кардинально, как MacOS отличается от Windows.

518 Приложение 1 Первое, что вы видите при запуске Internet Explorer, – указатель на то, что интерфейс соответствует Macintosh. Браузер не только имеет новый графический пользовательский интерфейс, но и обладает всеми преимуществами Macintosh. В отличие от более ранних версий, которые были всего лишь перенесены с платформы Windows, Internet Explorer 5 полностью переписан для Macintosh. С точки зрения разработчика, Internet Explorer 5 для Macintosh является важным шагом вперед не потому, что в нем представлены новые технологии (как в Netscape появились фреймы и JavaScript), а потому, что он полностью соответствует требованиям системы. Internet Explorer 5 для Macintosh поддерживает HTML 4, CSS1, CSS2 (частично), XML, JavaScript, PNG и W3C DOM.

Netscape Navigator Хотя компания, создавшая этот замечательный, инновационный программный продукт, была поглощена компанией America Online, Netscape всегда останется в памяти пользователей, как и браузер, который сделал Сеть настолько популярной. 3-я версия Web-браузера уже была переименована в Navigator. Но я называю его просто Netscape – по имени создавшей его компании.

Netscape 4 Более четырех лет Netscape 4 оставался главным Web-продуктом компании Netscape и применялся многими Web-разработчиками, хотя не полностью поддерживал Web-стандарты. Большинство используемых сегодня стандартов в то время либо

не существовали, либо только начинали появляться. Netscape 4 внес в создание сайтов свою «изюминку» – DHTML, основанный на тэге <layer> (см. главу 16). Этот метод так и не стал популярным, и впоследствии Netscape отдала предпочтение развитию стандартов, устанавливаемых W3C. Netscape 4 поддерживает HTML, CSS1 (частично), CSS-P (частично), JavaScript и Netscape Layers DOM.

Netscape 6 Netscape 6 (именно 6, а не 5) был создан на базе движка Gecko, разработанного в соответствии с последними стандартами Web. Для Web-дизайнеров, мучительно пытающихся создать сайты для несовместимых Web-браузеров, это явилось настоящей находкой. Gecko – замечательный инструмент, компактный, удивительно быстрый и наиболее соответствующий стандартам. Его создатели должны гордиться своей работой. Но интерфейс браузера переполнен различными меню, кнопками и опциями, расположенными без четкой иерархии. Многие меню в нижней части экрана не более чем ссылки на Web-страницы Netscape. Я не смог найти способ изменить эти ссылки для удовлетворения потребностей пользователей. Хотя возможность создания собственного бокового меню – шаг в правильном направлении, она, кажется, существует исключительно для того, чтобы пользователи заходили на сайты Netscape и ее компаньонов, а не для обеспечения удобного и настраиваемого интерфейса.

Браузеры, поддерживающие DHTML и CSS 519 Netscape 6 поддерживает HTML 4, CSS1, CSS2 (частично), XML, JavaScript, PNG (частично) и W3C DOM.

Opera 5 поддерживает HTML 4, CSS1, CSS2 (частично), JavaScaipt, XML и W3C DOM (частично).

iCab (Mac)

Другие браузеры Верите вы или нет, но существуют и другие браузеры, кроме Netscape и Internet Explorer. Хотя при построении 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 все еще тестируется; кажется, некоторые стандарты либо пропущены, либо не полностью реализованы.

Браузер iCab (www.icab.de) так же, как и Opera, компактен: загружается всего лишь 900 Kб. Он обладает хорошей скоростью, страницы появляются сразу после щелчка по ссылке. У iCab гораздо больше опций, чем у всех браузеров, которые я когда-либо видел. Его создатели четко придерживались стандартов, дословно следуя рекомендациям W3C. Он предоставляет пользователю самые разнообразные возможности (или, по крайней мере, будет предоставлять, когда закончится его тестирование). На сегодняшний день браузер находится на стадии разработки, кроме того, ему не хватает определенных ключевых возможностей, таких как CSS и полная поддержка JavaScript. Какая же крупная корпорация трудится над созданием этого великолепного браузера? На самом деле iCab придумал немецкий программист Александр Клаус (Alexander Clauss) и несколько его друзей. Хотя браузер полностью соответствует стандартам W3C, скорее всего, вы не будете ежедневно пользоваться бета-версией iCab, так как она не полностью поддерживает JavaScript, CSS или DHTML. Но в будущем планируется включить в браузер не только эти возможности, но и многие другие. iCab поддерживает HTML 4 и JavaScript (частично), в следующих версиях предполагается добавить CSS1 и CSS2.

Краткая справка о CSS

2 В главах 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);

Краткая справка о CSS 521 Легенда для Macintosh и Windows; ни для одной, ни для другой системы; W только для Windows; M только для Macintosh; P некоторые проблемы; Все свойство можно применять ко всем тэгам HTML; Разметка свойство может быть использовано только для тэгов, относящихся к разметке страницы; Линейный свойство можно применить только к inline-тэгам; Выделение полужирным показывает, каково значение свойства по умолчанию.

Краткая справка Далее помещена информация о том, как определенное свойство можно применить к различным тэгам HTML. Каждое свойство описывается таким образом: с каким тэгом его используют, связано ли оно с дочерними элементами, какими браузерами и операционными системами оно поддерживается. Свойства, которые помечены значком P в столбце, относящемся к браузеру, частично реализованы в одной или обеих операционных системах. Я бы не рекомендовал их использовать. Не забывайте, что у каждого браузера есть несколько версий, причем порядковый номер у них может совпадать. Например, не существует Netscape 4, а есть несколько версий (4.06, 4.5 и 4.7), не сильно отличающихся друг от друга. В этом приложении представлена только проверенная информация, но если вы все-таки захотите протестировать CSS-возможности своего браузера, попробуйте применить специально предназначенный для этого инструмент от W3C, который вы найдете на сайте http:// www.w3.org/Style/CSS/Test/.

522 Приложение 2 Таблица П2.1. Управление шрифтом Наименование

Значение

Применимо к

Унаследованное

font-family

<family-name> serif sans-serif cursive fantasy monospace

Все

Да

font-style

normal italic oblique

Все

Да

font-variant

normal small-caps

Все

Да

font-weight

normal bold bolder lighter 100-900*

Все

Да

<length> <percentage> smaller larger XX-small X-small small medium large X-large XX-large

Все

<font-style> <font-variant> <font-weight> <font-size>/ <lineheight> <font-family>

Все

font-size

font

IE4 IE5

M M

Да P P P P P P P P P Да

* Требует наличия на компьютере пользователя специальных шрифтов.

P P

Краткая справка о CSS 523 Таблица П2.2. Форматирование текста Наименование

Значение

Применимо к

Унаследованное

word-spacing

normal <length>

Все

Да

letter-spacing

normal <length>

Все

Да

vertical-align

baseline <percentage> sub super top text-top middle bottom text-bottom

Линейный

Нет

normal <number> <length> <percentage>

Все

text-decoration

none underline overline line-though blink

Все

Нет

text-transform

none capitalize uppercase lowrcase

Все

Да

text-aling

left right center justify

Разметка

Да

text-indent

Разметка

Да

white-space

normal pre nowrap

Разметка

Да

line-height

IE4 IE5 М М

М М

М*

М** М** М** М** М** Да P P

* Только для MacOS, в Windows недоступно. ** IE5.5 для Windows.

** * **

524 Приложение 2 Таблица П2.3. Управление списком и курсором Наименование

Значение

Применимо к

Унаследованное

list-style-tipe

disk circle square decimal lower-roman upper-roman lower-alpha upper-alpha

Все*

Да

list-style-image

none url(<url>)

Все*

Да

Все*

Да

<list-style-type> Все* <list-style->position> <list-style-image> auto Все crosshair hand** pointer move n-resize ne-resize e-resize se-resize s-resize sw-resize w-resize nw-resize text wait help

Да

list-style-position outside inside list-style

cursor

IE4 IE5

Да

* В Netscape и IE относится лишь к тэгу <list>. По стандарту CSS может применяться только к тэгу, имеющему в своем описании атрибут display со значением _list_item (display: _list_item). ** Только в IE. Аналогично значению pointer.

Краткая справка о CSS 525 Таблица П2.4. Управление цветом и фоном Наименование

Значение

Применимо к

Унаследованное

color

<color>

Все

Да

background-color

transparent <color>

Все

Нет

background-image

none url (<url>)

Все

Нет

background-repeat

repeat repeat-x repeat-y no-repeat

Все

Нет

backgroundattachment

scroll fixed

Все

Нет

background-position

<percentage> <length> top center bottom left center right

Разметка

Нет

background

<background->color> <background->image> <background->repeat> <background->attachment> <background->position>

Все

Нет

P P

IE4 IE5

526 Приложение 2 Таблица П2.5. Управление разметкой страницы Наименование

Применимо к

Унаследованное

margin-top, -right, <length> -bottom, -left <percentage> auto margin <length> <percentage> auto

Значение

Все

Нет

P P P

IE4 IE5 P P P

Все

Нет

padding-top, -right <length> -bottom, -left <percentage>

Все

Нет

P P

padding

Все

Нет

P P

border-color

<color>

Все

Нет

border-style

none dotted dashed solid double groove ridge inset outset

Все

Нет М М

margin-top, -right, medium -bottom, -left <length> thin thick

Все

Нет

P P P P

medium <length> thin thick

Все

Нет

P P P P

margin-top, -right, <border-width> -bottom, -left <border-style> <color>

Все

Нет

P P P

border

<border-width> <border-style> <öâåò>

Все

Нет

P P

P P P

width

auto <length> <percentage>

Разметка

Нет

P P P

height

auto <length>

Разметка

Нет

float

none left right

Все

Нет

border-width

P P P P

P P

* *

Краткая справка о CSS 527 Таблица П2.5. Управление разметкой страницы (окончание) Наименование

Значение

Применимо к

Унаследованное

clear

none left right both

Все

Нет

block inline list-item none

Все

display

P P Нет

IE4 IE5 М М

P W М

* Только IE5.5 для Windows.

Таблица П2.6. Регулирование размещения Наименование

Значение

Применимо к

Унаследованное

position

static absolute relative fixed

Все

Нет

left

auto <length> <percentage>

Все**

Нет

top

auto <length> <percentage>

Все**

Нет

bottom

auto <length> <percentage>

Все**

Нет

right

auto <length> <percentage>

Все**

Нет

z-index

auto number

Все

Нет

IE4 IE5

* Только в MacOS, в Windows недоступно. ** Атрибут position должен иметь значение absolute или relative.

528 Приложение 2 Таблица П2.7. Управление видимостью Наименование

Значение

Применимо к

Унаследованное

clip

auto <shape>

Все*

Нет

overflow

visible hidden scroll auto

Все*

Нет

visibility

inherit visible hidden hide show

Все

Да**

IE4 IE5

* Атрибут position должен иметь значение absolute или relative. ** Когда атрибут visibility имеет значение inherit.

Таблица П2.8. Псевдоклассы и псевдоэлементы Наименование

Значение

Применимо к

Унаследованное

:link

–

Якорь

Да

:active

–

Якорь

Да

:visited

–

Якорь

Да

:hover

–

Все

Да

:first-line

–

Разметка

Нет

:first-letter

–

Разметка

Нет

* Только IE5.5 для Windows.

Краткая справка о DHTML

В главе 11 описаны наиболее часто применяемые обработчики событий, которыми вы регулярно будете пользоваться при построении своих Web-страниц. А в главе 12 дана подробная информация о среде выполнения браузера и соответственно вашего сайта. Эти сведения структурированы в таблицах данного приложения.

530 Приложение 3 Таблица П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

IE3, N2

Ширина экрана (всего)

screen.width

IE4, N4

Высота экрана (всего)

screem.height

IE4, N4

Ширина экрана (текущая)

screen.availWidth

IE4, N4

Высота экрана (текущая)

screen.availHeight

IE4, N4

Количество цветов

screen.colorDepth

IE4, N4

Таблица П3.3. Свойства браузера Параметры поиска

Имя

Значение

Совместимость

Имя браузера

navigator.appName

IE3, N2

Версия браузера

parselnt(navigator.appVersion)

IE3, N2

Ширина окна браузера

window.outerWidth

Высота окна браузера

window.outerHeight

Краткая справка о DHTML 531 Таблица П3.4. Параметры страницы Параметры поиска

Имя

Значение

Совместимость IE3, N2

Ссылка

self.location

Заголовок

document.title

IE3, N2*

Ширина видимой части

window.innerWidth document.body.clientWidth

N4 IE4

Высота видимой части

window.innerHeight document.body.clientHeight

N4 IE4

Положение документа при прокрутке влево

window.pageXOffset document.body.scrollLeft

N4 IE4

Положение документа при прокрутке вверх

window.pagtYOffset document.body.scrollTop

N4 IE4

* Ошибка в Netscape 4 для MacOS: вместо заголовка возвращает имя файла.

Таблица П3.5. Параметры объекта Параметры поиска

Имя

Значение

Совместимость

Widht

offsetWidth width

IE4, N6 N4

Height

offsetHeight height

IE4, N6 N4

Left Position

offsetLeft pixelLeft left

N6 IE4 N4

Top Position

offsetTop pixelTop top

N6 IE4 N4

Z-index

zindex

Visibility

visible hidden show hide

Clip

clip[]

IE4, N4 IE4, N4 IE4, N4 N4 (только) N4 (только)

<array>

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).

532 Приложение 3

Служебные слова При создании класса CSS, ID CSS или имен переменных JavaScript не забывайте, что у браузера есть слова, зарезервированные для определенных целей. Я не рекомендую их использовать. Допустимо применять служебные слова в сочетаниях слов. Например, new и label – не совсем удачные имена для переменных, а newLabel – отличный вариант.

Служебные слова JavaScript и Java Ниже приводятся служебные слова языка JavaScript или Java, в любом случае лучше их не употреблять.

abstract boolean break byte case catch char class comment const continue debugger default delete do double else enum export extends false final

finally float for function goto if implements import in instanceOf int interface label long native new null package private protected public return

short static super switch synchronized this throw throws transient true try typeof var void while with

Краткая справка о DHTML 533

Другие слова, которых следует избегать Хотя официально эти слова не входят в список служебных слов, они применяются в JavaScript. Их использование может приводить к ошибкам. Не забывайте, что Netscape чувствителен к регистру, поэтому слово, начинающееся с заглавной буквы, и слово, написанное прописными буквами, означают совсем не одно и то же. Например, history и History имеют разные значения. alert Anchor Area arguments Array assign blur Boolean Button callee caller capture Checkbox clearInterval clearTimeout close closed confirm constructor Date defaultStatus document Document Element escape eval

event evt FileUpLoad find focus Form Frame frames Function getClass Hidden Events history History home Image Infinity innerHeight innerWidth isFinite isNaN java JavaArray JavaClass JavaObject JavaPackage

lenght Link location Location locationbar Math menubar MimeType moveBy moveTo name hide navigate navigator Navigator netscape Number Object onBlur onError onFocus onLoad onUnload open opener Option

outerHeight outerWidth Packages pageXoffset pageYoffset parent parseFloat parseInt Password personalbar Plugin NaN prompt prototype Radio ref RegExp releaseEvents Reset resizeBy resizeTo routeEvent scroll scrollBars scrollBy scrollTo

Select self setInterval setTimeout status statusbar stop String Sub,it sun taint print Text Textarea toolbar top toString unescape untaint unwatch valueOf watch window Windows

Шрифты, поддерживаемые браузером

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

Đ¨Ń&#x20AC;Đ¸Ń&#x201E;Ń&#x201A;Ń&#x2039;, ĐżĐžĐ´Đ´ĐľŃ&#x20AC;ĐśĐ¸Đ˛Đ°ĐľĐźŃ&#x2039;Đľ ĐąŃ&#x20AC;Đ°Ń&#x192;ĐˇĐľŃ&#x20AC;ĐžĐź 535 Đ˘Đ°ĐąĐťĐ¸Ń&#x2020;Đ° Đ&#x;4.1. Microsoft Internet Explorer (MacOS Đ¸ Windows) Đ?Đ°ĐˇĐ˛Đ°Đ˝Đ¸Đľ

Đ&#x;ĐťĐžŃ&#x201A;Đ˝ĐžŃ Ń&#x201A;Ń&#x152; Đ¸ Ń Ń&#x201A;Đ¸ĐťĐ¸

ĐĄĐľĐźĐľĐšŃ Ń&#x201A;Đ˛Đž

Đ&#x;Ń&#x20AC;Đ¸ĐźĐľŃ&#x20AC;

Arial Black

Đ&#x153;ĐžĐ˝ĐžŃ&#x2C6;Đ¸Ń&#x20AC;Đ¸Đ˝Đ˝Ń&#x2039;Đš

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Comic Sans MS

Đ&#x;ĐžĐťŃ&#x192;ĐśĐ¸Ń&#x20AC;Đ˝Ń&#x2039;Đš

Cursive

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Trebuchet MS* Đ&#x;ĐžĐťŃ&#x192;ĐśĐ¸Ń&#x20AC;Đ˝Ń&#x2039;Đš, ĐşŃ&#x192;Ń&#x20AC;Ń Đ¸Đ˛, ĐżĐžĐťŃ&#x192;ĐśĐ¸Ń&#x20AC;Đ˝Ń&#x2039;Đš ĐşŃ&#x192;Ń&#x20AC;Ń Đ¸Đ˛

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Verdana

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Fantasy

$%&'()*,-+./01234567 89:;<=DLMEFGHIJKNOPQRS TUVWXYZ[\]

Impact

Minion Web*

Webdings**

Đ&#x;ĐžĐťŃ&#x192;ĐśĐ¸Ń&#x20AC;Đ˝Ń&#x2039;Đš, ĐşŃ&#x192;Ń&#x20AC;Ń Đ¸Đ˛

Đ&#x;ĐžĐťŃ&#x192;ĐśĐ¸Ń&#x20AC;Đ˝Ń&#x2039;Đš, ĐşŃ&#x192;Ń&#x20AC;Ń Đ¸Đ˛, ĐżĐžĐťŃ&#x192;ĐśĐ¸Ń&#x20AC;Đ˝Ń&#x2039;Đš ĐşŃ&#x192;Ń&#x20AC;Ń Đ¸Đ˛

* Đ&#x161;Đ°Đş Đ˛ IE5. ** Đ˘Đ°ĐşĐśĐľ ĐżĐžĐ´Đ´ĐľŃ&#x20AC;ĐśĐ¸Đ˛Đ°Ń&#x17D;Ń&#x201A;Ń Ń? Ń&#x2C6;Ń&#x20AC;Đ¸Ń&#x201E;Ń&#x201A;Ń&#x2039;: Andale, Georgia.

536 Приложение 4 Таблица П4.2. Операционная система MacOS Название

Плотность и стили

Семейство

Пример

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Monospace

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Monaco

Monospace

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

New York

Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Symbol

Fantasy

ΑΒΧΔΕΦΓΗΙϑΚΛΜΝΟΠΘΡΣΤΥ ςΩΞΨΖαβχιϕδεφγηκλμνοπθρστυϖωξψζ 1234567890

Techno

Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Chicago

Courier

Полужирный, курсив, полужирный курсив

Geneva

Helvetica

Palatino

Times*

Полужирный, курсив, полужирный курсив

* Также поддерживаются: шрифт Charcoal; только в MacOS 8.5: шрифты Apple Chancery, Capitals, Gadget, Hoefler Text, Sand, Skia и Textile.

Шрифты, поддерживаемые браузером 537 Таблица П4.3. Операционная система Windows Название

Плотность и стили

Семейство

Пример

Abadi MT Condensed Light*

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Arial

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Полужирный, курсив, полужирный курсив

Arial Black*

Book Antiqua*

Полужирный, курсив,

Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Calisto MT*

Полужирный, курсив

Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Century Gothic* Полужирный, курсив, полужирный курсив

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Comic Sans MS*

Cursive

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Copperplate Gothis Bold

Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Copperplate Gothis Light

Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Monospace

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Lucida Console*

Monospace

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Lucida Handwriting Italic*

Cursive

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Lucida Sans Unicode*

Курсив

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

News Gothic MT*

Полужирный, курсив

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Monospace

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Courier New

OCR A Extended*

Полужирный

Полужирный, курсив, полужирный курсив

538 Приложение 4 Таблица П4.3. Операционная система Windows (окончание) Название

Плотность и стили

Symbol

Семейство Пример Fantasy

ΑΒΧΔΕΦΓΗΙϑΚΛΜΝΟΠΘΡΣΤΥςΩΞΨΖ αβχδεφγηιϕκλμνοπθρστυϖωξψζ 1234567890

Tahoma*

Полужирный

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Times New Roman

Полужирный, курсив, полужирный курсив

Serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Verdana*

Полужирный, курсив, полужирный курсив

Sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Webdings*

Fantasy

$%&'()*+,-./01234567 89:;<=DELMFGHIJKNOPQRS TUVWXYZ[\]

Wingdings

Fantasy

☺ ⌧

* Как в Windows 98.

Дополнительные инструменты

При создании сайтов я использую не только профессиональные приложения, такие как FreeHand, Photoshop, Dreamweaver и GoLive, но также и небольшие программы, которые намного упрощают работу. Некоторые программы являются бесплатными или условно бесплатными, другие представляют собой Web-сайты. Далее вы найдете список моих самых любимых программ.

Рис. П5.1. Программа Screen Ruler

Программное обеспечение Одна из великолепных возможностей, которые предоставляет Сеть, – быстрый доступ к любому программному обеспечению. Необходимые для Web-дизайнеров программы, которые пылились бы на полках магазинов, стали очень популярными и нашли свою аудиторию.

Screen Ruler (Mac/Win) www.kagi.com/microsoft Некоторые идеи настолько очевидны, просты и полезны, что каждый раз, используя их в своей работе, вы задаетесь одним и тем же вопросом: «Почему я сам до этого не додумался?» Таким изобретением является и программа Screen Ruler (рис. П5.1). Она помещает на экран линейку, которой вы

540 Приложение 5 можете пользоваться независимо от того, какие программы в данный момент запущены. Программа позволяет определить положение объекта в окне браузера, например указать точный размер графического изображения или задать параметры таблицы.

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 и др. Они также находят наиболее близкий оттенок цвета из тех цветов, которые поддерживает браузер, таким образом, позволяя точно определять соответствия цветов в окне браузера или между программами.

Рис. П5.2. Программа Pixel Spy

Палитры цветов, поддерживаемых браузером (Mac/Win) www.lynda.com/files/CLUTS www.visibone.com/swatches Линда Винман (Lynda Wynman), автор популярной концепции цветов, поддерживаемых браузером, разместила на указанном сайте копии палитр цвета, которые применяются в наиболее известных графических программах, таких как Photoshop, FreeHand, Paint Shop Pro и Illustrator. Я рекомендую воспользоваться коллекцией образцов, имеющихся на сайте Visibone, где они представлены в дружественном пользователю формате (рис. П5.4).

Рис. П5.3. Программа Color Picker

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

Дополнительные инструменты 541

GIFBuilder (Mac) и GIF Construction Set (Win)

Рис. П5.4. Таблица цветов CLUT от Visibone в Photoshop

homepage.nac.com/piguet/gif.html www.mindworkshop.com/alchemy/gifcon.html В настоящее время рынок программного обеспечения переполнен сложными программами для создания анимированных GIF-файлов. Однако нельзя оставить без внимания такие инструменты, как GIFBuilder (рис. П5.5) и GIF Constructor (рис. П5.6), которые позволяют быстро и легко создавать анимацию непосредственно в программе Photoshop. Одной из малоизвестных возможностей GIFBuilder является обработка файла Photoshop, включающего слои, и преобразование каждого слоя в отдельный кадр. Указанные программы распространяются в Сети совершенно бесплатно.

Рис. П5.5. Программа GIFBuilder

Рис. П5.6. Набор GIF Constructor

542 Приложение 5

GraphicConverter (Mac) и Lview Pro (Win) www.lemkesoft.de/us_gcabout.html www.lview.com Хотя GraphicConverter (рис. П5.7) не такая сложная программа, как Photoshop (с точки зрения редактирования изображения), она помогала мне открывать файлы в таких форматах и кодировке, перед которыми пасовали самые сложные программы. К тому же GraphicConverter легко может преобразовать любое число графических файлов из одного формата в другой.

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

Рис. П5.7. Программа GraphicConverter

Webmaster’s Color Lab www.visibone.com/colorlab Данный инструмент, созданный компанией Visibone, позволяет быстро определить палитру цветов для Web-сайта (рис. П5.8). Цвета располагаются рядом, и дизайнер способен оценить то или иное цветовое сочетание. Один кадр содержит цветное кольцо, в котором вы найдете все цвета, поддерживаемые браузером. Если щелкнуть по какому-либо цвету, его образец появится в соседнем кадре. Допустимо указывать любые понравившиеся вам цвета – их образцы отобразятся рядом с первым. Webmaster’s Color Lab позволяет поместить в образце все ранее выбранные цвета; таким образом, вы легко можете их сравнить.

Рис. П5.8. Инструмент Webmaster’s Color Lab

Дополнительные инструменты 543

ColorMix

Рис. П5.9. Программа ColorMix

www.colormix.com/ Программа ColorMix (рис. П5.9) комбинирует два или три цвета из 216 цветов, поддерживаемых браузером, позволяя создавать тысячи новых цветов. Точки разных цветов помещается рядом, и зрительно эти цвета смешиваются (например, подобное размещение синего и желтого цветов позволяет получить зеленый). Правда, созданный таким образом цвет не будет настолько четким, как изначальный, а некоторые сочетания выглядят просто некрасиво. Но все-таки данный инструмент значительно расширит цветовую палитру вашего Webсайта.

Тестовый пакет CSS1

Рис. П5.10. Тестовый пакет CSS1 от W3C

www.w3.org/Style/CSS/Test Чтобы узнать, какие возможности CSS поддерживает ваш браузер, запустите его через тестовый пакет W3C для CSS1 (рис. П5.10). В этом пакете учитываются все свойства CSS. Он особенно полезен в том случае, когда вам необходимо убедиться, что тип CSS, который вы планируете использовать, действительно будет правильно функционировать. Но это следует сделать до того, как вы столкнетесь со всеми остальными проблемами, возникающими при создании Web-сайта.

544 Приложение 5

Web Site Garage websitegarage.netscape.com Инструмент Web Site Garage позволяет полностью настроить сайт (рис. П5.11). Предоставьте ему ссылку на ваш сайт, и вскоре перед вами появится бесплатный отчет о совместимости браузера, времени загрузки, «мертвых» ссылках, грамматике и HTML. Каждый параметр будет оцениваться по шкале от «отлично» до «неудовлетворительно». Внося каждый месяц определенную плату, вы сможете получить доступ к ряду сетевых приложений, которые помогут оптимизировать Web-сайт, раскрыть весь его потенциал. Я протестировал свой сайт с помощью Web Site Garage и получил общую оценку «хорошо». В следующем месяце я надеюсь получить «отлично».

Рис. П5.11. Инструмент Web Site Garage

Radio Free Underground www.stitch.com/studio Этот сайт не предоставляет никаких дизайнерских инструментов, но мне, например, всегда лучше работается, когда играет приятная музыка. Здесь поможет Radio Free (рис. П5.12). Вы выбираете какой-либо стиль (классику, техно, 80-е годы и т.д.), и на сайте для вас делают подборку из 40 или 50 музыкальных произведений, которые вы можете незамедлительно прослушать. Каждый раз, заходя на сайт, вы получаете новую подборку.

Рис. П5.12. Сайт Radio Free Undereground

Дополнительные источники

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

Web-сайты: технология и стандарты В книге я постарался рассказать обо всех аспектах Web-разработки, однако еще многое осталось за кадром. На нижеперечисленных сайтах вы сможете найти дополнительные сведения о DHTML и CSS.

546 Приложение 6

W3С-консорциум www.w3.org На данном сайте вы найдете подробную информацию обо всех Web-стандартах. Нужны ли вам сведения о последних изменениях в объектной модели документа или рекомендации по CSS первого уровня, этот сайт – единственный, куда стоит обратиться и в первом, и во втором случае (рис. П6.1).

BuildingTheWeb.com

Рис. П6.1. Сайт W3С-консорциум

www.buildingtheWeb.com Здесь вы найдете все необходимые ресурсы. Помимо большого количества ссылок, BuildingTheWeb.com содержит списки самых важных тем. У каждой ссылки есть описание содержания сайта, что значительно упрощает поиск (рис. П6.2).

Помощь по HTML от Web Design Group www.htmlhelp.com Посетив данный сайт, я сам впервые узнал, что такое CSS. С тех пор как я решил связать свою работу со спецификациями W3C, именно на этом сайте я нашел наиболее полную информацию о HTML. Возможно, он оформлен не столь привлекательно, как остальные Web-сайты, однако только здесь вы получите самые подробные и понятные объяснения Web-стандартов (рис. П6.3).

Рис. П6.2. Сайт BuildingTheWeb.com

Рис. П6.3. Помощь по HTML

Дополнительные приложения 547

Проект Web-стандартов www.webstandards.org Эта группа не устанавливает какие-либо стандарты, в ее функции входит контроль за соблюдением стандартов производителями браузеров. Группа также проводит кампанию по усовершенствованию браузеров, чтобы помочь разработчикам как можно ближе подвести свои проекты к стандартам (рис. П6.4). Рис. П6.4. Проект Web-стандартов

WebReview www.webreview.com На сайте WebReview вы найдете статьи профессионалов Web-дизайна на самые разнообразные темы, примечания по дизайну и редакционные статьи. Если вы следите за последними изменениями в индустрии дизайна, обязательно посещайте этот сайт (рис. П6.5).

WebReference Рис. П6.5. Сайт WebReview.com

www.webreference.com На сайте WebReference в основном содержится информация об интерфейсе Webсайтов, приводятся статьи о практическом использовании DHTML, CSS и других технологий (рис. П6.6).

Apple Developer Connection – Internet-разработчик

Рис. П6.6. Сайт WebReference.com

developer.apple.com/internet Сайт Apple Developer Connection более интересен для дизайнеров, работающих на Macintosh, однако здесь вы сможете найти информацию, полезную для любого Webразработчика (рис. П6.7).

548 Приложение 6

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).

Рис. П6.7. Apple Developer Connection – Internet-разработчик

DHTML для Всемирной паутины www.webbedenvironments.com/dhtml На сайте поддержки данной книги содержатся все коды, приведенные ранее, работу которых допустимо просмотреть в режиме реального времени. Для экономии времени можете загрузить программы непосредственно с сайта, чтобы не переписывать их с книги. Кроме того, на этом сайте я буду размещать дополнения и исправления (рис. П6.10).

Рис. П6.8. Сайт Dynamic Drive

Рис. П6.9. Часто задаваемые вопросы о DHTML

Дополнительные приложения 549

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

GlassDog

Рис. П6.10. Сайт поддержки книги

www.glassdog.com/design-o-rama На этом сайте вы найдете много полезной и интересной информации о Web-дизайне. Сведения изложены хорошим профессиональным языком с соблюдением соответствующей терминологии, материал подобран таким образом, чтобы осветить все аспекты рассматриваемой темы (рис. П6.11).

Скотт Макклауд

Рис. П6.11. Сайт Glass Dog

Рис. П6.12. Web-комиксы от Скотта МакКлауда

www.scottmccloud.com Скотт Макклауд (Scott McCloud) вошел в индустрию Internet совершенно неожиданным образом. Книга этого известного создателя комиксов – «Понимание комиксов» (Understanding Comics) – стала классикой Web-дизайна в середине 90-х годов. На сайте основное внимание уделено Webкомиксам, однако оригинальные авторские решения будут интересны и чрезвычайно полезны любому дизайнеру (рис. П6.12).

550 Приложение 6

Центр Argus по архитектуре информации argus-acia.com Большую часть посетителей Всемирной сети представляют пользователи приложений, функционирующих в режиме реального времени. Разработка подобных приложений требует не только знания основ графического дизайна. Необходимо понимать, как создать простой и удобный пользовательский интерфейс, как правильно организовать информацию и продумать архитектуру будущего сайта. На сайте argusacia.com вы найдете великолепные статьи, в которых освещаются эти и многие другие темы (рис. П6.13).

Рис. П6.13. Центр Argus по архитектуре информации

Useit.com www.useit.com Как и на предыдущем сайте, здесь содержатся статьи, которые помогают улучшить Web-сайты с точки зрения простоты и удобства использования. Лично я не всегда согласен с выводами, представленными авторами сайта, однако многие их идеи, безусловно, интересны и весьма оригинальны (рис. П6.14).

Рис. П6.14. Сайт Useit.com

Web Page Design для дизайнеров www.wpdfd.com Создатель сайта, Джо Джиллеспай (Joe Gillespie), разместил на нем огромное количество статей, которые помогут дизайнерам переносить информацию из печатного варианта в Web. Даже ветераны сетевых войн найдут здесь много полезных сведений (рис. П6.15). Рис. П6.15. Сайт Web Page Design для дизайнеров

Дополнительные приложения 551

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

Splatterpunk

Рис. П6.16. Сайт Splatterpunk

www.splatterpunk.com Сайт разработан компанией Adobe. Здесь содержится информация о возможностях предоставляемого этой компанией программного обеспечения, включая GoLive. Здесь вы найдете кое-что интересное и об DHTML (рис. П6.16).

Sandman Film www.sandmanfilm.org При создании этого сайта я активно использовал возможности DHTML. Здесь представлен эффект киноленты, когда кадры прокручиваются по горизонтали в зависимости от того, какой раздел вы выбираете в меню, расположенном в нижней части страницы (рис. П6.17). Рис. П6.17. Сайт The Sandman

Coma2 www.coma2.com На сайте Coma2 содержится коллекция работ мастеров в сфере мультимедиа. Здесь представлены инновационные методы использования DHTML. К тому же сайты, на которые ссылаются авторы, также применяют DHTML (рис. П6.18).

Рис. П6.18. Сайт Coma2

552 Приложение 6

Kaliber 10000 www.k10k.com Kaliber 10000, который больше известен как K10K, – популярный сайт, куда Web-дизайнеры заходят в поисках самых современных идей. Здесь вы можете узнать о новых методах интеграции DHTML в интерфейс своего сайта (рис. П6.19).

Книги, журналы и другие публикации Помимо Internet существует множество печатных изданий, призванных помочь вам в познании нелегкого, но захватывающего дизайнерского искусства.

Визуальное представление Печатное слово играет в нашей жизни немалую роль, но удивительно, насколько лучше информация воспринимается не со словесных объяснений, а с визуально представленного материала. Как говорится, лучше один раз увидеть, чем сто раз услышать. В книге Эдварда Тюфта «Визуальное представление: изображения и количество, очевидность и изложение» (Edward Tufte «Visual Explanations: Images and Quantities, Evidence and Narrative»; издательство Graphics Press) рассматривается сложность передачи информации посредством визуальных элементов, а также говорится о важной роли, которую играет зрительное восприятие в нашей жизни.

Понимание комиксов Ранее я уже упоминал великолепный сайт Скотта Макклауда, стоит рассказать и о его книге «Понимание комиксов» («Understanding Comics»; издательство Kitchen Sink

Рис. П6.19. Сайт Kaliber 10000

Press). На примере комиксов автор рассматривает проблему визуального взаимодействия с читателем. Если вы хотите коснуться изумительного мира чудес, мира передачи информации посредством изображений, я настоятельно рекомендую вам прочитать эту книгу.

Невидимый компьютер «Люди не хотят пользоваться компьютером, они хотят, чтобы их проблемы решались». Такое справедливое замечание сделал Дональд А. Норман в своей книге «Невидимый компьютер: почему хорошие товары могут не пользоваться спросом. Персональный компьютер слишком сложен, будущее – за информационными устройствами» (Donald A. Norman «Invisible Computer: Why Good Products Can Fail. the Personal Computer is So Complex and Information Appliances Are the Solution»; издательство MIT Press). Это прекрасная книга о философии создания продуктов, которые распространяются с помощью компьютеров.

Дополнительные приложения 553

Create Online

Рис. П6.20. Web-сайт Create Online

www.createonline.co.uk Этот журнал выходит раз в месяц. В нем вы найдете множество подробных руководств, написанных профессионалами, а также статьи, рассматривающие целый ряд вопросов, которые могут быть интересны Web-разработчику. Хотя журнал Create Online издается в Великобритании, я находил его во многих книжных магазинах США (рис. П6.20).

Visibone HTML и CSS Card www.visibone.com/html Visibone HTML и CSS Card – отличный документ для каждого пишущего Internet-программы. На четырех страницах содержится практически все, что нужно знать о тэгах HTML и свойствах CSS, включая атрибуты, значения, совместимость браузеров, ошибки в программах и специальные символы. Этот документ необходимо иметь под рукой любому Web-дизайнеру (рис. П6.21). Рис. П6.21. Web-сайт Visibone HTML и CSS Card

предметный указатель А

Абзац 104

Динамический HTML. См. DHTML Динамический дизайн навигация запреты 341 рекомендации 340 принципы 336 размещение объектов 337

Б Блок плавающий 306 Браузер возможности 194 сохраняемые цвета 17 Будущее Internet 504 CSS3 514 SMIL 512 SVG 513 XHTML 509 переход от HTML 510 XML 507 CSS и DOM 508

З Заголовки с фоном 361 фиксированные 362

Видимость 167 Внутренний отступ 142 Вывод на печать 379 Выравнивание вертикальное 103 текста 102 стиль 102

Изображение на заднем плане 126 Импорт внешнего содержимого 381 включение на стороне сервера 384 внешний файл JavaScript 385 тэги <ilayer> и <iframe> 382 Индекс 103 Интервал между словами 98 межстрочный 99

Гипертекст 335 Графика векторная, масштабируемая 80

Кадр опорный 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 Отладка кода 494 CSS ошибки 495 проверка 497 JavaScript ошибки 499 проверка 500 различия между браузерами 502

П Панель управления 403 Печать Web-страницы 72 Поддержка браузера DHTML 516 iCab 519 Internet Explorer 517 Netscape Navigator 518 Opera 519 Позиционирование абсолютное 153 относительное 153 статическое 153 фиксированное 154 Полоса прокрутки 420 Порядок стека 161 Псевдокласс 390 Псевдоэлемент 453

Р Размер клиентской области окна 217 объекта 222

556 DHTML и CSS окна браузера 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 findClipRight 233 findClipTop 233 findDOM 199, 201 findHeight 223 findLayer 228, 243 findLivePageHeight 217 findLivePageWidth 218 findObject 262 findRight 226 findScrollLeft 220 findScrollTop 221 findTop 225 findVisibility 231 findXCoord 259 findYCoord 259 fullScreen 273 magnifyWindowSize 273 moveObjectBy 241 moveObjectTo 239 openWindow 268 passItOn 253 scrollPageTo 246 setClass 278 setClip 232, 249 setLayer 228, 243 setUpAnnouingFlash 251 setVisibility 230, 237 swapLayer 244 toggleVisibility 237 toggleWindow 269 рекурсивная 250

Тэги inline 36, 56 link 45 блок-уровня 36, 58 дочерний 62 замененные 36 набор 62 переопределение 50 родительский 62

У Указатель мыши 119 Устранение ошибки в Netscape CSS 356

Ф Фон фоновая картинка 121 цвет 121, 125 Форма ввода 434 для создания динамических эффектов 434 контекстная 437 Фрейм границы 369 динамическое содержание 263 открытие и закрытие 371 размещение страниц 376 Функции addRule 280 animateObject 258 annouingFlash 251 blurOn 301 changeStyle 276 changeWindowSize 273 clipLayer 294 closeWindow 269 defaultEvents 254 errorOn 255 fadeElement 298 findBottom 226 findClipArray 233 findClipBottom 233 findClipLeft 233

Ц Цвета сохраняемые браузером 18 фона 124

Ш Шрифт 78 загрузка 83 размер 87 семейство 79 тип 79 Cursive 79 Fantasy 79

558 DHTML и CSS Monospace 79 Sans-serif 79 Serif 79 толщина 91 установленный по умолчанию 85

Э Элемент 131 внутренний отступ 132 поле 132 положение 152 рамка 132 вид 139 содержимое 132 стороны 132 Эффекты Internet Explorer перетекание объектов 298 переход между страницами 299 размытие изображения 301 эффект волны 302

С CSS 27 ID-правило 32 версии 30 добавление на Web-страницу 40 класс 32 правила 32 форматирование 42 CSS-файл, внешний 43 CSS3 514

D DHTML 174 в Microsoft 176 в Nescape 176 недостатки 177 общий 176 преимущества 177

DOM 182 Internet Explorer All 192 Netscape Layer 190 W3C 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 507 Sidebar 364 SMIL 512 SVG 513 URL 19 глобальный 19 локальный 19 Word spacing 98 W3C 25 WYSIWYG 304 XHTML 509 XML 507 CSS и DOM 508 Z-индекс 161

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

DHTML и CSS Главный редактор

Мовчан Д. А.

dm@dmk-press.ru

Перевод с английского Научный редактор Выпускающий редактор Верстка Графика и дизайн

Талачева М. И. Нилов М. В. Левицкая Т. В. Лапшова М. А. Шаклунов А. К.

Подписано в печать 10.04.2003. Формат 70×100 1/16 . Гарнитура «Миниатюра». Печать офсетная. Усл. печ. л. 45,5. Тираж 1000 экз. Зак. № Издательство «ДМК Пресс» Web-сайт издательства: www.dmk-press.ru Internet-магазин: www.alians-kniga.ru Отпечатано на ордена Трудового Красного Знамени ГУП Чеховский полиграфический комбинат Министерства Российской Федерации по делам печати, телерадиовещания и средств массовых коммуникаций 142300, г. Чехов Московской области Тел. (272) 71-336, факс (272) 62-536