Отправляет 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
Автор
Владимир

Статистика

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

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


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

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



ВЫПУСК 7

Здравствуйте, уважаемые подписчики.

В ваших письмах очень много вопросов по HTML, а также - как вставить какой-либо яваскрипт в html-текст.

На первый вопрос отвечу так: скачивайте HTML-учебник отсюда и изучите его. Учебник очень доступен и прост в изучении.

На второй вопрос ответ такой: в своих выпусках рассылки, а также на сайте я даю яваскрипты полностью готовыми к использованию. Вам остается только скопировать их, вставить в блокнот и сохранить как HTML - документ. В сборнике "1000 яваскриптов" дается подробная инструкция - как их использовать.

Фреймы

Что такое фрейм?

В каком-то смысле фрейм - это именно то, что означает данное слово: рамка вокруг картинки, окошко или страница. Вводя таг <FRAME>, дизайнер НТМL-страницы разделяет экран броузера на части. В результате человек, просматривающий страницу, может изучать одну часть страницы независимо от остальной части. Фактически броузер, распознающий фреймы, загружает разные страницы в разные секции, или фреймы, экрана. Например, вы можете построить страницу таким образом, что фирменный знак будет зафиксирован в верхней части экрана, в то время как остальную часть страницы пользователь пролистывает обычным способом. Можно расположить сбоку кнопки навигации, которые не перемещаются, когда читатель щелкает их мышкой, так что изменяется только часть экрана, а сама полоска навигации остается неподвижной.

Для чего можно использовать фреймы

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

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

Как работают фреймы

На первый взгляд, фреймы - это нечто сложное, но их легче понять, если провести аналогию с ячейками таблицы. Расположение фреймов на экране задается почти так же, как ячеек в таблице: таги и атрибуты работают так же, как их табличные родственники. Однако, хотя аналогия между единичным фреймом на странице и ячейкой таблицы полезна, нужно помнить, что есть и отличия. Содержимое ячейки задано в коде HTML-страницы с таблицей. Текст или графика, составляющие содержимое таблицы, фактически вводятся на той же самой странице HTML, что и таг или атрибут, описывающие таблицу. Напротив, экран с фреймами описывается в НТМL-странице, называемой (frameset ). Содержимое же фрейма - это отдельная HTML-страница, которая может находиться где угодно - в другом каталоге, на локальном сервере или на удаленном узле где-то в сети. Фреймовая структура определяет только способ организации экрана с фреймами и указывает, где находится начальное содержимое каждого фрейма. Для всех фреймов задаются URL, описывающие местонахождение их данных. Как правило, на странице с фреймовой структурой нет содержимого фреймов. Такая страница обычно невелика - она описывает только кадровую структуру экрана. Когда документ загружается в фрейм, вы можете щелкать мышкой на ссылке в этом документе, что вызовет появление связанных документов в других кадрах, заданных в фреймовой структуре.

Создание простой страницы с фреймами

Создадим, для лучшего понимания, пару простых страничек с фреймами, чтобы стало понятно, каково строение НТМL страницы с фреймами и для чего нужны основные таги и атрибуты.

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

Задание фреймовой структуры

Для начала мы должны представить себе общий вид страницы - где и какого размера будут фреймы. Затем можно подумать об их содержании. Ниже приводится код простой фреймовой структуры с использованием тага <FRAMESET>. Обратите внимание: страница с фреймовой структурой не содержит тага <ВОDY>.

Пример 

   <HTML>   


 <HEAD>   


 <TITLE>Пример фреймов</TITLE>   


 </HEAD>   


 <FRAMESET COLS="25%, 75%"   


 <FRAME SRC="A.HTMl">    


<FRAME SRC="B.HTMl" NAME="main">   


 </FRAMESET>   


 <NOFRAMES>   


 Вы видите эту страницу броузером не поддерживающим фреймы.   

 

</NOFRAMES>   


 </HTML>

Вот и весь код, необходимый для задания фреймовой структуры. Обратите внимание на таг <NOFRAMES>. Через несколько минут мы к нему вернемся. В результате мы получили экран, разделенный на два окна. Левое окно занимает 25 процентов экрана и содержит страницу с названием A.HTML. Окно справа займет 75 процентов и вначале покажет файл B.HTMl. Пока у нас их нет, так что вы увидите страницу с двумя пустыми фреймами. Прежде чем она появится, нам придется пару раз щелкнуть мышкой в ответ на сообщения об ошибках, потому что броузер будет пытаться найти несуществующие страницы. Заметьте, что правую страницу мы назвали <main > ( <главная>) с помощью строки: 

   <FRAME 

SRC="B.HTMl" NAMЕ="main">

Это означает, что фрейм под именем MAIN будет содержать страницу B.HTML. Заметим, что поскольку мы не собираемся показывать в левом фрейме никаких страниц, кроме MENU.HTMl, нам не нужно его называть.

Подготовка содержимого фрейма

Теперь давайте загрузим фреймы с содержимым. Зададим страницу MENU.HTML в левом фрейме, где мы собираемся щелкать мышью, переключаясь между двумя страницами в правом фрейме. Файл MENU.HTMl - это обычная НТМL-страница, построенная как оглавление. На самом деле мы можем взять готовую страницу с оглавлением и использовать ее. Имейте в виду, что этот фрейм узкий и высокий, так что страница, которая будет в него загружаться, должна быть соответствующим образом спроектирована. Теперь мы должны определить, где будут появляться другие страницы при щелчке мышкой на ссылке. Поскольку мы хотим, чтобы они отображались в правом фрейме, добавим атрибут ТАRGET= (TARGЕТ="main") в таг ссылки. Это означает, что когда пользователь щелкает на ссылке, вызываемая страница появляется в фрейме main. Мы отображаем все страницы в фрейме main, поэтому давайте добавим атрибут ТАRGЕТ="main" во все таги ссылок в оглавлении. Если мы не определим атрибут ТАRGЕТ, то страница появится там, где мы щелкнули мышкой, - в левом фрейме, что нас не устраивает, хотя в какой-нибудь другой ситуации подобное поведение было бы очень кстати. Например, вы можете добавить ссылку <Другие пункты оглавления>, которая будет просто выводить следующие ссылки. Имеет смысл сделать оглавление подлиннее, чтобы читатели видели как можно больше ссылок. Но сейчас давайте ограничимся простым примером. Ниже приведен код для левого фрейма MENU.HTMl.

Пример 

   <HTML>   


 <HEAD>   


 <TITLE> Меню</TITLE>   


 </HEAD>   


 <BODY>   


 <H3 ALIGN=CENTER>Компания.</H3>  


  <HR>   


 <UL><font color="#400040" size="4">   


 <LI><a href="HTML-PR2-4.HTMl" ТАRGЕТ="main">Главная</a>  


  <LI><a href="NEWS.HTMl" ТАRGЕТ="main">Новости</a>  


  <LI><a href="PRODUCTS.HTMl" ТАRGЕТ="main">Товары</a>   


  <LI><a href="SERVIS.HTMl" ТАRGЕТ="main">Услуги</a>    


 <LI><a href="CONTACT.HTMl" ТАRGЕТ="main">Контакты</a> 


    <LI><a href="SEARCH.HTM" ТАRGЕТ="main">Поиск</a>    


 </UL>   </font>   </BODY>   


 </HTML>

Заметим, что здесь ничего не говорится о фреймах. О них все сказано в фреймовой структуре. Единственное, о чем нужно позаботиться на каждой НТМL странице, появляющейся в фрейме, так это о том, где поместить ссылки, активирующие те или иные действия. В нашем примере, в левом фрейме, где находится оглавление, будет располагаться только одна страница. Мы хотим, чтобы при щелчке мышкой в левой странице ссылочный документ появлялся бы в правом фрейме main.



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

Летающий заголовок 

   

<html>

<head>
<title>Летающий заголовок</title>
<style type="text/css">

#supertext {
xposition:absolute;
left:0;
top:0;
visibility:hide;
visibility:hidden;

}

</style>

</head>
<body >
<script language="JavaScript1.2">

/*
Bouncy message script- By Dynamicdrive.com
*/

//Configure the below three variables

//1) Введите свое сообщение (HTML тэги также), <h4></h4> определяют размер 

шрифта
var thecontent='<h4><font color="#0000FF">Сборник 1000 

яваскриптов</font></h4>'
//2) Установите скорость "рекошетирования" (1-50)
var BallSpeed = 5;



var hidetimer='';
var contentWidth;
var contentHeight;
var maxBallSpeed = 50;


var xMax;
var yMax;
var xPos = 0;
var yPos = 0;
var xDir = 'right';
var yDir = 'down';
var superballRunning = true;
var tempBallSpeed;
var currentBallSrc;
var newXDir;
var newYDir;

function initializeBall() {
if (document.all) {
xMax = document.body.clientWidth
yMax = document.body.clientHeight
document.all("supertext").style.visibility = "visible";
contentWidth=supertext.offsetWidth
contentHeight=supertext.offsetHeight
}
else if (document.layers) {
xMax = window.innerWidth;
yMax = window.innerHeight;
contentWidth=document. supertext.document.width
contentHeight=document. supertext.document.height
document.layers["supertext"]. visibility = "show";
}
setTimeout('moveBall()',400);
if (hidetimer!='')
setTimeout("hidetext()",hidetimer)
}

function moveBall() {
if (superballRunning == true) {
calculatePosition();
if (document.all) {
document.all("supertext").style.left = xPos + document.body.scrollLeft;
document.all("supertext").style.top = yPos + document.body.scrollTop;
}
else if (document.layers) {
document.layers["supertext"].left = xPos + pageXOffset;
document.layers["supertext"].top = yPos + pageYOffset;
}
animatetext=setTimeout('moveBall()',20);
}
}

function calculatePosition() {
if (xDir == "right") {
if (xPos> (xMax - contentWidth - BallSpeed)) { 
xDir = "left";
}
}
else if (xDir == "left") {
if (xPos < (0 + BallSpeed)) {
xDir = "right";
}
}
if (yDir == "down") {
if (yPos > (yMax - contentHeight - BallSpeed)) {
yDir = "up";
}
}
else if (yDir == "up") {
if (yPos < (0 + BallSpeed)) {
yDir = "down";
}
}
if (xDir == "right") {
xPos = xPos + BallSpeed;
}
else if (xDir == "left") {
xPos = xPos - BallSpeed;
}
else {
xPos = xPos;
}
if (yDir == "down") {
yPos = yPos + BallSpeed;
}
else if (yDir == "up") {
yPos = yPos - BallSpeed;
}
else {
yPos = yPos;
}
}

function hidetext(){
if (document.all)
supertext.style.visibility="hidden"
else if (document.layers)
document.supertext.visibility="hide"
clearTimeout(hidetext)
}

if (document.all||document.layers){
document.write('<span id= "supertext"> <nobr>'+thecontent+'</nobr></span>')
window.onload = initializeBall;
window.onresize = new Function("window.location.reload()");
}

</script >
</body>
</html>

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

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

javascript05@narod.ru


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