Отправляет email-рассылки с помощью сервиса Sendsay

Программирование на JavaScript: просто о сложном.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Всё о работе в Интернет" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Май 2005   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
31.05.2005
11:59:44
12:24:00
Автор
Владимир

Статистика

1.761 подписчиков
0 за неделю
←   Все выпуски   →

Программирование на JavaScript: просто о сложном.


Информационный Канал Subscribe.Ru

ГЛАВНАЯ     УЧЕБНИК     СКРИПТЫ     1000 СКРИПТОВ    



ВЫПУСК 6

Использование таблиц в дизайне страницы

Приятное свойство таблиц состоит в том, что если вы захотите, то можете сделать их границы невидимыми. Это позволяет с помощью тага <ТАВLЕ> красиво размещать на странице текст и графику. До сих пор таг <ТАВLЕ> остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически такой же свободой использования <пустого пространства>, что и создатели печатных страниц. Таблицы в большей мере, чем что-либо другое, помогают отойти от иерархического размещения текста на Web-страницах.

Если броузер вообще поддерживает таблицы, он обычно правильно отображает наиболее интересные эффекты, полученные с помощью таблиц.

Пример 

  
 <HTML>  
 
 <BODY>   

 <CENTER>   

 <TABLE CELLPADDING=10 CELLSPACING=0 BORDER=16>   

 <TR> 

   <TD ALIGN=CENTER>   

 <H1>ПЕРФОРАТОР</H1> 

   <H3>Только сегодня!</H3>   

 <TABLE BORDER WIDTH=100%>  

  <TR><

TD ALIGN=CENTER>

<I>Почти бесплатно!</I>

</TD> 

  </TR> 

   </TABLE>  

  </TD>   

 </TR >  

 </TABLE>  

 </CENTER >  

 </BODY>  

 </HTML>

Создание разноцветных таблиц

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

Цветные границы в Netscape Navigator

Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в таге <ВODY> как фон страницы. Затем задайте цвет фона страницы. В результате ваш таг <ВОDY> будет выглядеть примерно так: 

  
 <BODY ВАСКGROUND="сооLBG.GIF" ВGCOLOR=" # FF0000">

Вы создали двойной фон - GIF и заданный цвет. В результате фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях (<НR>). Вне зависимости от того, является ли ваш фоновый GIF серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF не слишком сложно устроен, время загрузки страницы лишь немного возрастет. На приведенном ниже примере показано какие, широкие возможности дает использование цвета в HTML и в частности в таблицах.

Пример 

  
 <HTML>   

 <BODY BACKGROUND="BGR.GIF"  BGCOLOR="YELLOW" >  

  <CENTER>  

 <TABLE BORDER=3 CELLPADDING=20>  

 <CAPTION ALIGN=TOP>

<H2>Как просверлить бетонную    стену</H2>

</CAPTION>  

 <TR> 

  <TD BGCOLOR=GRAY> 

   <TABLE CELLPADDING=10 CELLSPACING=0 BORDER=16>  

  <TD BGCOLOR=RED ALIGN=CENTER>  

  <H1>ПЕРФОРАТОР</H1>   

 <H3>Только сегодня!</H3>   

 <TABLE BORDER WIDTH=100%> 

   <TR> 

   <TD BGCOLOR=AQUA ALIGN=CENTER>

<I>Почти бесплатно!</I>

</TD> 

  </TR>  

  </TABLE>   

 </TABLE>  

 <TD WIDTH=50% BGCOLOR=BROWN ALIGN=CENTER>  

 <IMG SRC="PERFOR1.GIF" WIDTH=200 HEIGHT=150>  

 </TD>   

 </TR>  

 <TR> 

  <TD BGCOLOR=PINK> 

  <FONT SIZE=6 COLOR=BLUE>От 6 до 20 мм</FONT>  

 </TD> 

  <TD  BGCOLOR=BLUE> 

  <FONT SIZE=6 COLOR=PINK>Просверлим все</FONT>

   </TD>  

 </TR> 

  </TABLE>   

 </CENTER >   

 </BODY>   

 </HTML>




А сейчас - новый скрипт:

Текстовая "змейка на пружине" за курсором 

   

<html>
<title>Текстовая "змейка на пружине" за курсором</title>
<head>
<style>
 .spanstyle {
xposition:absolute;
visibility:visible;
top:-50px;
font-size:10pt;
font-family:Verdana;
font-weight:bold;
color:black;
}
</style>
</head>
<body onload="makesnake()">
<div>
<script>
var x,y
var step=14
var flag=0

var message="1000 яваскриптов в одном файле! "
message=message.split("")

var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50
}

var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
ypos[i]=-50
}

function handlerMM(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
flag=1
}

function makesnake() {
if (flag==1 && document.all) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y

for (i=0; i<message.length-1; i++) {
var thisspan = eval("span"+(i)+".style")
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}
}

else if (flag==1 && document.layers) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y

for (i=0; i<message.length-1; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
var timer=setTimeout("makesnake()",30)
}

</script>
<script>
<!-- Beginning of JavaScript -

for (i=0;i<=message.length-1;i++) {
document.write("<span id='span"+i+"' class='spanstyle'>")
document.write(message[i])
document.write("</span>")
}

if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;

// - End of JavaScript - -->
</script>
</div>
</body>
</html>

Этот скрипт взят из "Сборника 1000 яваскриптов".

На этом на сегодня все.
До встречи в следующих выпусках.

javascript05@narod.ru


Уважаемые читатели. Специально для всех интересующихся JAVASCRIPT я подготовил электронную книгу "Сборник 1000 яваскриптов -демонстрационная версия". Скачать эту книгу Вы сможете отсюда -
СКАЧАТЬ ДЕМОНСТРАЦИОННУЮ ВЕРСИЮ СБОРНИКА    
Subscribe.Ru
Поддержка подписчиков
Другие рассылки этой тематики
Другие рассылки этого автора 		Подписан адрес:
Код этой рассылки: inet.webbuild.javascript05 		Отписаться
Вспомнить пароль
В избранное