книги хакеры / журнал хакер / специальные выпуски / Специальный выпуск 2_compressed
.pdf
X/WEB |
0009 |
9 |
MILLENIUM |
|
|
Пример: |
Пример: |
Пример: |
<ol атрибуты></ol> - упорядоченный список элементов <li>
Пример:
<p атрибуты></p> - абзац
<tr атрибуты></tr> - строка в таблице <td атрибуты></td> - столбец в таблице <table атрибуты></table> - таблица
В принципе, как ни странно, этого набора тебе вполне хватит, чтобы наваять что-то стоящее. Хотя это далеко и не полный список тегов, я перечислил все самые основные и часто используемые. А многие фичи делаются графикой и потом просто тегами собираются и форматируются. Для примера можно что-нибудь наваять. :) Так как я не приверженец фреймов, то все сделаю с помощью таблицы, да и тебе со-
10 000A X/WEB
MILLENIUM
ветую делать таблицами, а не в фреймах. Осталось придумать, что бы наваять. :) Вот что вышло:
Замечания:
-картинки мне было лениво ваять, и я просто сослался абсолютными ссылками на картинки с сайта www.xakep.ru
-чтобы твоя картинка грузилась быстрее, всегда пиши width и height в <img...>
Ну и вот, в принципе, сам код:
Писать этот код, как ни странно, минуты 2 от
силы. На этом примере я всего лишь показал
тебе элементарный хтмл. Со временем это
для тебя будет так же элементарно, как вык-
лючить компьютер. Другое дело, что потом
ты можешь юзать всякие другие фичи, применительные к вебу: скрипты, апплеты, динамический хтмл (DHTML) и т.п. Хотя все по мере надобности. С виду простыми тегами можно будь здоров что наваять, если еще хорошо владеть графикой. Одним словом, ваяй, фигарь и угорай! :0)
Отдельно еще рассмотрю формы и фреймы |
<html> |
(кадры). Начнем с фреймов. Если уж приби- |
<head> |
ло использовать тебя фреймы, то эта фича |
<title>Пример для журнала “Хакер”</title> |
юзается следующим макаром. Сначала гру- |
</head> |
зится файл с фреймовой структурой, в кото- |
<body> |
ром ты определяешь параметры каждого |
<center> |
фрейма и то, что изначально в каждый |
<font face=”Arial, Helvetica” size=”2”>Простенький пример хакерской странички, поучающей ла- |
фрейм загружается. А то, что грузится в каж- |
меров хтмл-ю (:</font> |
дый отдельный фрейм, ни что иное, как |
<br><br> |
обычный хтмл-документ. Для примера соз- |
<table border=”0” cellspacing=”2” cellpadding=0 width=”620”> |
дадим 3 фрейма: один вверху и два внизу. В |
<tr><td><a href=”http://www.xakep.ru” target=”_top”><img align=”left” |
верхний загрузим какую-нить картинку с Ха- |
src=”http://www.xakep.ru/x-joke/images/00003.jpg” width=”400” height=”287” border=”0” alt=”Òèïà |
кера, :) а в двух нижних подпишемся. :) |
ìîå ôîòî :0)”></a> |
|
<p align=”justify”><h4>Если</h4> очень поднатужиться, то... не-а :) то можно сделать текст, |
|
обтекающий картинку - для этого просто в теге <img...> добавь феню align=”left”, тоды тек- |
|
ст будет обтекать, :) хых, круто сказано, текст будет обтекать, :))) ну так вот, текст будет обте- |
|
кать картинку справа... А чтобы он особо не был кривым, отформатируем его абзацем с недоку- |
|
ментированным параметром align=”justify”. Кстати, неплохо вроде вышло. :) |
|
Про трудную жизнь свиней, я думаю, сам сочинишь. А я щас буду плодить таблицу дальше и по- |
|
казывать всякие фени.</p></td></tr> |
|
<tr><td bgcolor=”#CC99CC”>тексь <b>эту ячеечку</b> <u>мы</u> <i>покрасим</i> в |
|
#CC99CC öâåò</td></tr> |
|
<tr><td bgcolor=”#CCCCCC”>À <sub>òóò</sub> <sup>ìû</sup> <sub>ùàñ</sub> |
|
<sup>бум</sup> испытывать остальные теги типа :)</td></tr> |
|
</table> |
|
<br><br> |
|
<a href=”http://www.xakep.ru” target=”_top”><img src=”http://www.xakep.ru/xakep.gif” border=”0” |
|
width=”88” height=”31” alt=”Xakep”></a> |
<br><br>
<font face=”Arial, Helvetica” size=”1”>© Copyright Lamer Production 2000 :)</font> </center>
</body>
</html>
X/WEB |
000B 11 |
MILLENIUM 
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<html> |
|
|
|
|||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<head> |
|
|
|
|||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<title>Пример для журнала “Хакер”</title> |
|
|
|
|||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</head> |
|
|
|
|||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<body> |
|
|
|
|||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<center> |
|
|
|
|||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<table bgcolor=”#CC99CC” border=”0” |
|
|
|
|||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
cellspacing=”2” cellpadding=0 width=”620”> |
|
|
|
|||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<tr><td align=”center”><p align=”cen- |
|
|
|
|||||||||||||||
|
|
|
Главный |
|
õòìë-ôàéë |
|
будет |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ter”>Чувак, ты крут как никогда, ты постиг |
|
|
|
||||||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||||||||||||||||||
|
|
|
выглядеть |
|
âîò òàê: |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
фреймы :)</p></td></tr> |
|
|
|
|||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</table> |
|
|
|
|||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||
|
|
|
<html> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<font face=”Arial, Helvetica” |
|
|
|
||||||||||||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||||||||||||||||||
|
|
|
<head> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
size=”1”>© Copyright Lamer Production |
|
|
|
||||||||||||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||||||||||||||||||||
|
|
|
<title>Пример для журнала “Хакер”</title> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2000 :)</font> |
|
|
|
|
|||||||||||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||||||||||||||||||||
|
|
|
</head> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</center> |
|
|
|
||||||||||||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||||||||||||||||||||
|
|
|
<frameset rows=”60%, 40%”> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body> |
|
|
|
||||||||||||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||||||||||||||||||||
|
|
|
<frame src=”frame1.html” name=”frame1”> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</html> |
|
|
|
||||||||||||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||||||||||||||||||||
|
|
|
<frameset cols=”65%, 20%”> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||
|
|
|
<frame src=”frame2.html” name=”frame2”> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||||||||||
|
|
|
<frame src=”frame3.html” name=”frame3”> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||||||||||
|
|
|
</frameset> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||||||||||
|
|
|
<noframes> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||||||||||
|
|
|
<font color=”#FF0000”><h1>Лопух, уже весь мир перешел на браузеры новых версий! |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||||||||||||||||
|
|
|
Бросай свою дремучую и качай поновее.</h1></font> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||||||||||||||||||||||
|
|
|
</noframes> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||||||||||
|
|
|
</frameset> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||
|
|
|
</html> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Íó |
è |
ïëþñ |
êîäû |
|
|
|
äëÿ |
|
õòìë-åê |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||||||
|
|
äëÿ |
âñåõ 3 |
-õ |
фреймов: |
|
|
|
|
|
|
|
<html> |
|
|
||||||||||||||||||||||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<head> |
|
|
|||||||||||||||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<title>Пример для журнала “Хакер”</title> |
|
|
|||||||||||||||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||||||||||||||||||||||||
|
<html> |
|
|
</head> |
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||
|
<head> |
|
|
<body> |
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||
|
<title>Пример для журнала “Хакер”</title> |
|
|
<center> |
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||
|
</head> |
|
|
<table border=”0” cellspacing=”2” cellpadding=0 width=”620”> |
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||
|
<body> |
|
|
<tr><td><a href=”http://www.xakep.ru” target=”_top”><img src=”http://www.xakep.ru/x- |
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||
|
<center> |
|
|
joke/images/00007.jpg” width=”398” height=”325” border=”0” alt=”Òèïà ìîå ôîòî :0)”></a></td></tr> |
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||
|
<a href=”http://www.xakep.ru” target=”_top”><img |
|
|
</table> |
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||
|
src=”http://www.xakep.ru/xakep.gif” border=”0” |
|
|
<br><br> |
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||
|
width=”88” height=”31” alt=”Xakep”></a> |
|
|
<a href=”http://www.xakep.ru” target=”_top”><img src=”http://www.xakep.ru/xakep.gif” border=”0” |
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||
|
</center> |
|
|
width=”88” height=”31” alt=”Xakep”></a> |
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||
|
</body> |
|
|
<br><br> |
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||
|
</html> |
|
|
<font face=”Arial, Helvetica” size=”1”>© Copyright Lamer Production 2000 :)</font> |
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</center> |
|
|
|||||||||||||||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||||||||||||||||||||||||||||
</body>
</html>
12 |
000C |
X/WEB |
|
|
|
|
|
|
|
|
MILLENIUM |
|
Ну и теперь децел о формах. Удобные такие |
<html> |
|
|
хрени, которые позволяют создавать формочки |
<head> |
|
|
со списками чего-либо, текстовыми полями, |
<title>Пример для журнала “Хакер”</title> |
|
|
радиокнопками и т.п. Причем потом все вве- |
</head> |
|
|
денные данные можно при нажатии кнопки |
<body> |
|
|
Submit обработать скриптом или же переслать |
<p align=”left”> |
|
|
на мыло. Остановимся на втором варианте и |
<form name=”xakep_forma” method=”post” action=”mailto:òâîå_ìûëî” enctype=”text/plain”> |
|
|
наваяем для примера простенькую форму, но |
<hr size=”1” color=”#000080” width=”100%”> |
|
|
содержащую разные элементы: |
|
<font face=”Arial Cyr, Arial” size=”2” color=”#FF0000”>Чудная форма :</font> |
|
|
|
<br> |
|
|
|
<hr size=”1” color=”#000080” width=”100%”> |
|
|
|
Êòî òàì :<br> |
|
|
|
<input type=”text” name=”who” size=”30” value=””> |
|
|
|
<br><br> |
|
|
|
Кликуха :<br> |
|
|
|
<input type=”text” name=”nickname” size=”30” value=””> |
|
|
|
<br><br> |
|
|
|
׸ íàäà : |
|
|
|
<input type=”radio” name=”what” value=”shokolad” checked>Шоколаду |
|
|
|
<input type=”radio” name=”what” value=”money”>Денег |
|
|
|
<input type=”radio” name=”what” value=”girl”>Девочку |
|
|
|
<br><br> |
|
|
|
È êàê? |
|
|
|
<select name=”how”> |
|
|
|
<option selected>красную |
|
|
|
<option>зеленую |
|
|
|
<option>в обертке |
|
|
|
</select> |
|
Код формы: |
|
Быстро? |
|
|
<input type=”checkbox” name=”quickly” value=”yes”>Óãó |
|
|
|
|
<br><br> |
|
Ну что, вник? :) А это тока самые основы, |
Пожелания :<br><textarea type=”text” name=”contact_order” cols=40 rows=5 |
|
|
дальше как в анекдоте - чем дальше в лес, |
value=””>Ìëÿ</textarea> |
|
|
тем жирнее партизанки. :) Короче, распеча- |
<br><br> |
|
|
тай, повесь на стенку и проверяй зрение. :) |
<input type=”submit” name=”submit” value=” Послать на”><input type=”reset” name=”reset” |
|
|
Еще можно другу загнать за четвертной. :) То |
value=” Очистить на”></form> |
|
|
есть статья очень ценная, вырежи и не выб- |
</p> |
|
|
расывай. ;) |
|
</body> |
|
|
|
</html> |
X/WEB |
000D 13 |
MILLENIUM 
g
http://wwwhttp://www.seire.org .seire
THE
BEST
14 |
000E |
X/WEB |
|
|
|
|
|
MILLENIUM |
ОЖИВИ СВОЮ СТРАНИЧКУ |
||
MOOF (MOOF@xakep.ru ; http://anynews.agava.ru) |
||
Каскадные таблицы стилей
Cтрашно? Мне тоже не по себе от такого названия. Когда я его впервыеуслышал, то подумал о множестве
мелких монстров, которые живут по ту сторону браузера и съедают полезную информацию, а на ее место вешают огромные баннеры. :)
Но все оказалось ни так страшно. Каскадные таблицы стилей (CSS1 - Cascading Style Sheets Level One) дали возможность вебмастеру круто украшать свою страницу, переопределяя теги. Например, ты пишешь:
<h1>Òóò áûë Âàñÿ</h1>, и текст выводится большими черными буквами с краю экрана (òåã <H1> говорит браузеру о создании заголовка). Если ты хочешь, чтобы текст был зеленым, ты пишешь так:
<h1><font color=”#00FF00”> Òóò áûë Âàñÿ</font></h1>.
А если ты захочешь, чтобы все заголовки были зелеными, что будешь делать? Правильно: писать каждый раз одно и то же (<h1><font color=”#00FF00”> и т.д.), из-за этого твоя страничка неимоверно “растолстеет”. А теперь скажем спасибо DHTML и CSS: с их помощью мы с тобой переопределим тег <h1>. Задав зеленый цвет по умолчанию:
<style type=”text/css”> <!—
h1 { color: 00FF00} —>
</style>
вставив вышестоящий текст в заголовке HTML файла (между тегами <head> è </head>), мы переопределим цвет тега <h1>. И теперь написав:
<h1>Òóò áûë Âàñÿ</h1>
мы увидим зеленый текст. Если ты думаешь,
Intro
Внимание! Леди и джентльмены! Поприветствуем DynamicHTML (буря аплодисментов)!!!. С его помощью мы “оживим” твою страничку, заставим ее реагировать на действия юзера. Но для начала немного истории. Однажды Биллу Г. надоело смотреть на странички в Интернете, на которых ничего не менялось: ни текст, ни картинки, не было реакции на перемещение крысы. И тогда он, в очередной раз, решил забить на все стандарты, и в частности на стандарт HTML (в то время это была версия 3.2), и выпустил Internet Explorer 4. IE - был революционным браузером, в том плане, что в нем появилась поддержка этого самого, DHTML. С появлением DHTML и IE 4 вебмастер смог:
-прятать текст и изображение в документе, а потом показывать их, в зависимости от действий пользователя;
-перемещать текст и изображение по страничке;
-красиво форматировать текст;
-создать формы, которые незамедлительно реагируют на любые пользовательские действия;
-сделать страничку объемной (создать несколько слоев текста, картинок и т.д.)
èмногое другое, на что хватит фантазии. А главное, ни один из этих пунктов не требует перезагрузки страницы. Все происходит у тебя в браузере! Но вместе с IE 4 увидел свет другой не менее замечательный (в то время) браузер: Netscape Navigator. Как ни странно, он был тоже версии 4. NN обладал несколько меньшими возможностями по сравнению с IE, и самое обидное, что их версии DHTML были не совместимы на 100% между собой, что вызвало множество трудностей. Но есть и “приятные” моменты: так, например, тебе не нужно будет изучать ни Java, ни ActiveX, чтобы создать “живую” страничку. Весь DHTML основан на JavaScript и VBSript (кому что больше нравится). Многие, заслышав знакомое JS и VBS, тут же начинают спрашивать: “А какая разница между HTML страничкой со скриптом и DHTML страничкой с тем же скриптом?”. На это я ответственно заявляю: страничку можно счи- тать написанной на DHTML, когда она использует каскадные таблицы стилей (что это - смотри дальше) вместе со сценариями. Ладно, поговорили, вспомнили, теперь займемся делом.
что на этом приколы кончаются, то ты круто обламываешься! Но сначала разберемся с синтаксисом. Тег
<style type=”text/css”>
означает то, что дальше идет описание стилей, браузеры четвертого (и выше) поколения понимают этот тег, а вот старые браузеры его не понимают, и специально для них идет следующая строчка:
<!—
Увидев ее, старые браузеры пропускают весь следующий текст до “—>”. Между этими двумя тегами располагаются описания различных характеристик тегов. Для переопределения тега (в нашем случае <h1>) мы пишем имя тега, затем открываем фигурную скобку “{“ и в ней описываем сами характеристики, разделяя их “;”. Описание тега заканчивается также фигурной скобкой “}”. Мы можем переопределить свойства сразу нескольких тегов, для этого пишем:
h1,h2,h3 {color: 00FF00}
и все заголовки первого, второго и третьего уровней станут зелеными. Описание стилей заканчивается тегами:
—> </style>
Кроме переопределения тегов ты можешь создавать свои классы и идентификаторы. Ведь количество тегов ограничено, а создав свой класс или идентификатор, ты получаешь неограниченные возможности по переопределению, форматированию и украшению своей странички. Создание класса и идентификатора похоже на переопределение тега, но вместо имени тега ты пишешь имя класса, которое должно начинаться с точки:
.vasia { color: 00FF00}
Так мы создаем класс vasia. Или имя идентификатора, которое начинается со знака “#”;
#vasia {color: 00FF00}
Теперь для использования класса необходимо в тексте документа вставить следующее:
X/WEB |
000F 15 |
MILLENIUM 
<html><head><title
10px;
250px;
Courier;on;}</he<bo
<div class=vasia>Òóò áûë Âàñÿ<div> |
font-size: 120px; |
|
а для идентификатора |
font-family: Courier; |
Как ты видишь, получилось неплохо. С по- |
<div id=vasia>Òóò áûë Âàñÿ<div> |
} |
мощью тега <div> мы создали несколько слоев |
|
—> |
и, установив свойство “margin-top”, наложили |
Давай сделаем что-нибудь посложнее, ОК? |
</style> |
их друг на друга. Давай разберемся с осталь- |
|
</head> |
ными свойствами. Приведу описание несколь- |
<html><head><title> Домашняя страничка |
<body><center> |
ких свойств тегов, |
Âàñè</title> |
<div class=vasia>ÂÀÑß</div> |
относящихся к шрифту, в следующей таблице: |
<style type=”text/css”> |
<div class=layer1>был здесь</div> |
|
<!— |
</center></body> |
|
.vasia { |
</html> |
|
color: 00FF00; |
|
|
margin-top: 10px; |
|
|
font-size: 250px; |
|
|
font-family: Courier; |
|
|
font-weight: 900 ; |
|
|
} |
|
|
.layer1{ |
|
|
color: black; |
|
|
margin-top: -185px; |
|
|
16 |
0010 |
|
X/WEB |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
MILLENIUM |
Характеристика |
|
Величина |
Комментарии |
|||
Color |
|
шестнадцатиричное число |
устанавливает цвет текста |
|||
font-family |
|
название шрифта |
устанавливает шрифт, которым будет выведен текст |
|||
font-size |
|
размер шрифта |
в пикселях (px), сантиметрах (cm), миллиметрах (mm) и т.д. |
|||
font-style |
|
стиль шрифта |
нормальный (normal) или наклонный (italic) |
|||
font-weight |
|
число от 100 до 900 |
жирность шрифта |
|||
Описание всех свойств можно найти в Инете. |
Он сложнее в освоении, чем FrontPage, однако |
В таблице внизу представлены некоторые ос- |
||||
|
|
|
|
более пригоден для создания каскадных таб- |
новные события. |
|
Описание стилей можно вынести в отдельный |
лиц стилей. И, как я уже сказал, есть еще один |
|
||||
файл с расширением “CSS”. Это полезно, ес- |
продукт: Visual CSS, автором которого являюсь |
Теперь заставим слово “Вася” из предыдущего |
||||
ли ты захочешь использовать одинаковое |
я. ;) Этот продукт бесплатен и полностью на |
примера реагировать при наведении на него |
||||
оформление на всем своем сайте или на нес- |
русском языке, в отличие от прочих. Весит это |
курсора крысы, для этого после тега <body> |
||||
кольких страничках. Для этого запиши все сти- |
чудо 40Кб (в архиве), и найти его можно по ад- |
вставим небольшой скрипт: |
||||
ли в отдельный файл. Он будет выглядеть при- |
ðåñó http://www.anynews.agava.ru в разде- |
<script language=JavaScript> |
||||
мерно так: |
|
|
ëå “ñîôò”. |
|
function |
|
|
|
|
|
|
|
changeColor1(){vasia.style.color=”FF0000”;} |
.vasia { |
|
|
|
|
function |
|
|
color: 00FF00; |
|
|
|
changeColor2(){vasia.style.color=”00FF00”;} |
|
|
margin-top: 10px; |
|
|
|
</script> |
|
|
font-size: 250px; |
|
|
|
Поскольку из скриптов нельзя обращаться к |
|
|
font-family: Courier; |
|
|
|
классам, мы переделаем все классы в |
|
|
font-weight: 900 ; |
|
|
|
идентификаторы. После чего сделаем так, |
|
} |
|
|
|
|
|
чтобы Вася краснел при наведении на него |
|
|
|
|
|
|
ìûøè: |
А в HTML документ вставляется следующий |
|
|
<div id=vasia |
|||
текст: |
|
|
|
|
|
onMouseOver=”changeColor1()” |
<style type=”text/css”> |
|
|
|
onmouseout=”changeColor2()”>ÂÀ- |
||
|
@import url (http://ïóòü.ê/ôàé- |
|
|
Ñß</div> |
||
ëó.css); |
|
|
|
|
Сохраняемся и грузим в Експлорере. Ну как? |
|
</style> |
|
|
Åñòü êîíò |
|
Нравится? |
|
èëè |
|
|
|
|
|
|
<LINK |
href=” |
http://путь.к/файлу.css “ |
Ну вот, мы с тобой научились форматиро- |
Я знаю, что еще не хватает твоей страничке! |
||
rel=stylesheet type=text/css> |
|
вать текст по своему вкусу. Теперь пришло |
Давай теперь сделаем ей меню с интерактив- |
|||
|
|
|
|
время заставить его двигаться. Для начала |
ными пунктами: |
|
Все это очень хорошо, скажешь ты, но мне в |
разберемся с событиями. Каждый объект |
|
||||
лом учить и запоминать все характеристики, |
(текст, кнопка и т.д.) может реагировать на |
<HTML><STYLE TYPE=”text/css”> |
||||
параметры и еще какие-то теги! И будешь |
различные события (наведение мыши, клик |
.newID {font-size: 30px; |
||||
прав. Специально для тебя такие софтверные |
мыши, таймер и много еще чего), благодаря |
color: green} |
||||
монстры, как Microsoft, Adobe и я, ;) выпустили |
чему мы имеем возможность следить за дей- |
</STYLE><BODY> |
||||
продукты, |
облегчающие |
создание |
ствиями юзверя и менять облик страницы в |
|
||
DynamicHTML документов с CSS. У мелкомяг- |
реальном времени. |
|
Тут тебе должно быть все понятно. |
|||
ких есть целых два продукта FrontPage98 и |
|
|
<table><tr><td width=”250”> |
|||
2000 - это огромные программы монстры, пи- |
|
|
|
|||
хающие кучу лишних тегов в текст твоей стра- |
|
|
|
|||
нички, но обладающие простым (особенно во |
|
|
|
|||
FP2000) интерфейсом и большим набором го- |
|
|
|
|||
товых тем. У Adobe есть чуть более замечатель- |
Событие |
Комментарии |
||||
ный продукт: Adobe GoLive. |
|
|
|
|
||
|
|
|
|
Onmousedown |
происходит при нажатии левой кнопкой мыши |
|
|
|
|
|
Onmousemove |
происходит при перемещении мыши |
|
|
|
|
|
Onclick |
при клике |
|
|
|
|
|
Onload |
при загрузке страницы |
|
|
|
|
X/WEB |
0011 |
17 |
MILLENIUM |
|
|
|
|
|
Создаем таблицу, чтобы сохранить форматиро- |
А эта функция будет менять местами картин- |
|
|
|
|
вание страницы. |
ки, имена которых мы передали в парамет- |
Этот текст необходим для вычисления положе- |
|||
|
ðàõ. |
|
ния курсора на экране и перемещения надписи |
||
<DIV onMouseOver=”this.className=’newID’; |
|
|
вслед за курсором. Тут нет ничего сложного - |
||
Description.innerText=’Журнал Хакер’” |
</HEAD> |
|
только математические формулы. Ты, как кул |
||
onMouseOut=”this.className=’’; |
<BODY> |
|
хацкер, в них обязательно разберешься. ;) Ес- |
||
Description.innerText=’ ‘“ > |
<IMG SRC=”ms_sux1.gif” NAME=”kartinka” |
ли нет, то сходи к своему другу “ботанику” |
|||
<ahref=”http://www.xakep.ru”>Xakep</a></DIV> |
OnMouseOver=”change(‘kartinka’,’image2’)” |
(привет, Шурик!), и он тебе объяснит, что к че- |
|||
|
OnMouseOut=”change(‘kartinka’,’image1’)”> |
му. Построите пару-тройку трехмерных графи- |
|||
В теге <div> создаем текстовый объект, кото- |
</BODY> |
|
ков зависимости температуры на кулере и по- |
||
рый будет реагировать на наведение мыши и |
|
|
ложения курсора на экране. Так, чего-то я от- |
||
менять текст описания в идентификаторе |
А вот этой картинке мы дали имя “kartinka” |
влекся. |
|
|
|
“Description”, который находится дальше по |
и добавили два действия. И ВСЕ! Очень прос- |
|
|
|
|
тексту страницы. |
òî. |
|
<script for=”document” Event=”onmouse- |
|
|
|
|
|
move()”> |
|
|
</td><td rowspan=”2”> |
|
|
ex=document.body.scrollLeft+event.x; |
|
|
<h2><DIV ALIGN=RIGHT |
ß ÕÀÖ |
|
ey=document.body.scrollTop+event.y; |
|
|
ID=”Description”></DIV></h2> |
|
|
</script> |
|
|
|
Пусть все узнают, что ты хацкер! Что для этого |
|
|
|
|
А вот и он. Описание и содержание этого тега |
надо? Да ничего особенного - заставь текст (“Я |
Этот скрипт реагирует на движение мыши и вызы- |
|
||
меняется в зависимости от того, на какую из |
ХАЦКЕР!”) летать за курсором мыши по твоей |
вает “нужные” функции. |
|
|
|
ссылок навел курсор юзверь. |
страничке! Давай посмотрим, как это делается: |
|
|
|
|
|
|
|
<DIV ID=”cur” STYLE=”position:absolute; top: |
||
</td></tr><tr><td> |
<html><body onLoad=”setHandlers()”> |
100; left:100;” ><h1> Я ХАКЕР! |
|
||
<DIV onMouseOver=”this.className=’newID’; |
|
|
</h1></DIV> |
|
|
Description.innerText=’Новости от AnyNews’” |
При загрузке страницы выполнится JavaScript |
|
|
|
|
onMouseOut=”this.className=’’; |
функция с именем “setHandlers()”. |
Тут мы создаем объект, который будет дви- |
|
||
<ahref=”http://www.anynews.agava.ru”> |
|
|
гаться по страничке вслед за курсором. Вмес- |
||
AnyNews</a></DIV> |
<script> |
|
то слов “Я ХАЦКЕР!” ты можешь вставить ка- |
|
|
</td></tr></table> |
ex=100; |
|
кую-нибудь картинку (<img |
|
|
|
ey=100; |
|
scr=”http://www.microsoft.com/ms_suxx_logo.jpg”>). |
||
А это второй пункт меню. Как видишь, чтобы |
|
|
|
|
|
создать такое меню, не требуется каких-ли- |
Устанавливаем начальное положение надписи |
</body></html> |
|
|
|
бо особых знаний программирования и сек- |
на экране в координатах (100,100). |
|
|
|
|
ретных технологий НАСА и ФСБ. Чтобы до- |
|
|
Заканчиваем документ. Ну, как? Сложно? Мне |
||
бавить еще один пункт меню, достаточно |
function myhandler(e) |
почему-то кажется, что НЕТ. ;) |
|
||
создать еще один объект (между тегами |
{ |
ex=e.pageX; ey=e.pageY; |
|
|
|
<div>). |
return routeEvent(e); |
|
|
|
|
|
} |
|
|
|
|
|
function moveit() |
Печатная машинка |
|
|
|
Теперь мы сделаем картинку, которая будет |
{ |
dy=ey-y0-20; dx1=ex-x0-20; |
|
|
|
реагировать на наведение мыши и меняться на |
dx2=ex-x0-60; r=Math.sqrt(dx1*dx1+dy*dy); |
Еще один потрясающий по своей простоте |
|||
другую. Если несколько таких картинок объеди- |
if(r<20) r=20 |
эффект: строка текста печатается, а потом сти- |
|||
нить вместе, то может получиться отличное ме- |
dx1=dx1*10/r+x0+10; dy1=dy*10/r+y0+10; |
рается. |
|
|
|
íþ: |
r=Math.sqrt(dx2*dx2+dy*dy); |
|
|
|
|
|
if(r<20) r=20 |
<html> |
|
|
|
<HEAD> |
dx2=dx2*10/r+x0+50; ae.left=x0; |
<script language=”javascript”> |
|
||
<SCRIPT LANGUAGE=”JavaScript”> |
ae.top=y0; |
var delay=20;var nextm=0; |
|
|
|
image1 = new Image(); |
} |
|
var link=0;var numb=0; |
|
|
image1.src = “ms_sux1.gif”; |
function setHandlers() |
|
|
|
|
image2 = new Image(); |
{ |
y0=document.all.cur.style.pixelTop; |
Начинаем файл, устанавливаем задержку меж- |
||
image2.src = “ms_sux2.gif”; |
x0=document.all.cur.style.pixelLeft; ae=docu- |
ду появлением букв текста. |
|
||
|
ment.all.cur.style; |
|
|
|
|
Вначале загружаем необходимые картинки. |
realx=x0+0.1;realy=y0+0.1;moveall(); |
var msg=new Array |
|
|
|
|
} |
|
(‘Вася’,’самый крутой’,’хакер’); |
|
|
function change(x,y) |
function moveall() |
|
|
|
|
{ |
{ |
realx+=(ex-realx)*0.1; realy+=(ey- |
Создаем массив из нескольких фраз, которые |
||
if (document.images) |
realy)*0.1; |
|
будут печататься на страничке. Также ты мо- |
||
document.images[x].src = eval(y+”.src”); |
x0=Math.round(realx); y0=Math.round(realy); |
жешь добавить или поменять (слово “хакер” на |
|||
} |
moveit(); tid=setTimeout(‘moveall()’,100); |
“ламер”) тут что-нибудь. |
|
|
|
</script> |
} |
|
|
|
|
|
</script> |
|
|
|
|
18 |
0012 |
X/WEB |
|
|
MILLENIUM
function doit(text, pos, dir) |
width: 200; |
} |
|
||
{ var out=’[ ’+text.substring(0, |
padding:5; |
|
|
|
|
pos)+’ ]’; |
border-width: 1; |
|
|
||
stroka.innerHTML=out; |
border-style: solid; |
А эта функция, как следует из ее названия, бу- |
|||
pos+=dir; |
background: white; |
дет выдвигать меню. |
|
||
if(pos>text.length) |
color: red; |
|
|
|
|
|
|
} |
|
function init() |
|
setTimeout(‘doit(“‘+text+’”,’+pos+’,’+(- |
</style> |
|
{ for(i=0; i<maxmenus; i++){ |
||
dir)+’)’, delay*100); |
|
|
mpos[i]=-130; |
||
else { |
|
Все понятно? Думаю, да. |
mdir[i]=-5; |
} |
|
|
if(pos<0){ |
|
|
} |
|
|
|
<script> |
|
|
|
if(++nextm>=msg.length)nextm=0; |
var mpos=new Array(); |
Параметр “mdir[i]” |
устанавливает скорость |
||
|
link=link+1 |
var mdir=new Array(); |
появления меню. |
|
|
|
if |
var maxmenus=3; |
|
|
|
(link>=numb+1)link=1; |
var delay=1; |
</script> |
|
||
|
text=msg[nextm];dir=-dir; |
function do_menu(e, menu) |
<div id=”menu0” class=”menu”> |
||
|
} |
{ |
mdir[menu]=-mdir[menu]; |
<p>Журнал Хакер</p></div> |
|
|
|
|
if(mpos[menu]<=-130) |
<div id=”menu1” class=”menu”> |
|
setTimeout(‘doit(“‘+text+’”,’+pos+’,’+dir+’)’ |
{ |
if(document.layers) |
<p>Новости от AnyNews</p></div> |
||
, delay); |
{ |
|
|
|
|
} |
|
document.layers[“menu”+menu].top=e.pageY-130; |
Подсказки, которые будут всплывать для пун- |
||
} |
|
|
|
êòîâ ìåíþ. |
|
|
|
document.layers[“menu”+menu].left=e.pageX; |
|
|
|
|
|
} else |
|
<p> |
|
Эта функция вызывается при загрузке страни- |
{ |
|
<ahref=”www.xakep.ru” |
||
цы (ее вызов находится дальше). Она печатает |
document.all[“menu”+menu].style.top=event.y-130; |
onmouseover=”do_menu(event, 0)” onmouse- |
|||
текст на экране или наоборот стирает его. Дли- |
|
|
out=”do_menu(event, 0)”>Хакер</a> |
||
на строки и количество надписей определяется |
document.all[“menu”+menu].style.left=event.x; |
<ahref=”www.anynews.agava.ru” |
|||
операторами “text.length” и “msg.length” соот- |
}move_menu(menu); |
onmouseover=”do_menu(event, 1)” onmouse- |
|||
ветственно. |
}if(mpos[menu]>=0)move_menu(menu); |
out=”do_menu(event, 1)”>AnyNews</a> |
|||
|
|
} |
|
</p> |
|
</script> |
|
|
</body> |
|
|
<body |
bgcolor=”#000000” text=”#00FF00” |
Сначала инициализируем переменные, потом |
</html> |
|
|
onload=”doit(msg[0], 0, 1)”> |
пишем функцию, которая будет отвечать за |
|
|
||
<div id=”stroka”></div> |
размещение меню на экране. |
|
|
||
</body> |
|
|
Тут тоже вопросов быть никаких не должно. |
||
</html> |
function move_menu(menu) |
|
|
||
|
|
{ |
mpos[menu]+=mdir[menu]; |
|
|
Здесь нет ничего нового. Все это было описа- |
|
if(document.layers) |
|
|
|
но выше на аналогичных примерах. |
{ |
|
|
|
|
|
|
document.layers[“menu”+menu].top+=mdir[m |
Out |
|
|
|
|
enu]; |
|
|
|
|
|
document.layers[“menu”+menu].clip.top=- |
Ну вот, мы и проникли с тобой в основы |
||
Всплывающее ме |
mpos[menu]; |
DHTML. Надеюсь, ты уже начал делать свой |
|||
|
|
}else{ |
|
хакерский сайт? Если еще нет, то поспеши, а |
|
Вот еще один пример украшательства страни- |
|
|
то тебя опередят. |
|
|
чек с помощью DHTML. |
document.all[“menu”+menu].style.top=parseI |
И вот еще что: все примеры были протести- |
|||
|
|
nt(document.all[“menu”+menu].style.top)+mdi |
рованы на IE4 и 5. Для других браузеров ра- |
||
<html> |
|
r[menu]; |
|
бота не гарантирована. ;) Со всеми претен- |
|
<BODY onload=”init()”> |
|
|
зиями по этому поводу обращайся по адресу |
||
<style> |
|
document.all[“menu”+menu].style.clip=”rect( |
askbill@microsoft.com. Думаю, тебе там |
||
.menu |
|
“+(-mpos[menu])+”,auto,auto,auto)”; |
помогут. ;) |
|
|
{ |
position: absolute; |
}if(mpos[menu]>-130 && mpos[menu]<0) |
|
|
|
top:-200; |
setTimeout(“move_menu(“+menu+”)”, delay); |
|
|
||