Отправляет 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 СКРИПТОВ    



ВЫПУСК 8

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

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

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

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

ВНИМАНИЕ. ЕСЛИ У КОГО-ТО ПРИХОДЯТ НЕЧИТАЕМЫЕ ВЫПУСКИ - ЭТИ ВЫПУСКИ, А ТАКЖЕ ВЕСЬ АРХИВ ВЫ СМОЖЕТЕ ПРОСМОТРЕТЬ НА САЙТЕ В РАЗДЕЛЕ УЧЕБНИК

Фреймы. Продолжение.

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

Подготовка фрейма main

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

Пример 

   <HTML>  


 <HEAD>  


 <TITLE> Главная страница</TITLE>  


 </HEAD>  


 <BODY>  


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


 <HR>  


 <H3 ALIGN=LEFT><I>Открытое акционерное общество Компания основанная    в 1996 году,

является одним из ведущих поставщиков бытовой электроники    в России.</I></H3> 

 
 <HR>  


 <H3>Основными направлениями деятельности Компании являются:  

 <OL> 


  <LI>реализация бытовой электроники ведущих

 фирм мира через сеть магазинов;   


 <LI>создание сервисных центров по

 обслуживанию бытовой    электроники.</H3>  


 </OL>  


 <HR>  


 <H3><U>


<FONT COLOR=RED> Компания ищет агентов по сбыту бытовой    электроники.</FONT>


</U></H3> 


  <H5 ALIGN=CENTER>Контактная информация</H5>  


 <UL>  


 <LI>Telephone (123) 12-34-56  


 <LI>FAX (123) 12-34-56 


  <LI>Почтовый адрес 123456 г. Город, ул Лесная, 106   


<UL TIPE=CIRCLE>Электронная почта<BR>


   <LI>Общая информация: abc@abc.su  


 <LI>Продажи: abc@abc.abc.su  


 </UL>   </UL> 


  <BR>


<BLINK>Copyright</BLINK>  1997 Компания  


 </BODY>  


 </HTML>

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

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

У многих ваших посетителей еще остались броузеры, не умеющие обращаться с фреймами. По этим причинам разумно предоставить доступ к версии ваших основных страниц без фреймов. Если читатель с устаревшим броузером окажется на вашей странице с фреймовой структурой, все, что находится на ней между тагами < NOFRAMES > и </ NOFRAMES >, будет выглядеть отлично - броузер просто проигнорирует фреймы. Вот почему обязательно нужно использовать таги <ВODY></ВОDY>. Возможно, вам придется иначе организовать экран без фреймов.

Можно поместить на страницу с фреймами кнопку No Frames (Без фреймов). Ее назначение очевидно. Такой вариант достаточно разумен и легко осуществим.

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

Пример 

   <HTML>  


 <HEAD>  


 <TITLE> Пример фрейма</TITLE> 


  </HEAD>  


 <FRAMESET COLS="25%, 75%"   <FRAME SRC="HTML-PR5-2.HTMl">  


 <FRAME SRC="HTML-PR2-3.HTMl" NAME="main">  


 </FRAMESET>  


 <NOFRAMES>   Вы видите эту страницу броузером 

не поддерживающим фреймы.    Броузер поддерживающий фреймы 

не видит этот текст.   </NOFRAMES>  


 </HTML>

Имейте в виду, что поддерживающий фреймы броузер проигнорирует все, что находится между тагами < NOFRAMES > и </ NOFRAMES >. И наоборот, не поддерживающий фреймы броузер проигнорирует все, что находится между тегами <FRAMESET> и </FRAMESET>. Код без фреймов можно поместить и в начало, и в конец страницы.

Специфические таги и атрибуты фреймов

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

Таг <FRAMESET>

Таги <FRAMESET> обрамляют текст, описывающий компоновку фреймов. Здесь размещается информация о числе фреймов, их размерах и ориентации (горизонтальной или вертикальной). У тага <FRAMESET> только два возможных атрибута: ROW=, задающий число строк, и СОLS=, задающий число столбцов. Между тагами <FRAMESET> не требуется указания тага <ВОDY>, но его можно поместить между тагами <NOFRAME> в конце фреймовой структуры. Между тагами <FRAMESET> не должно быть никаких тегов или атрибутов, которые обычно используются между тагами <ВОDY>. Единственными тагами, которые могут находиться между тагами <FRAMESET> и </FRAMESET>, являются таги <FRAME>, <FRAMESET> и < NOFRAME>. Это упрощает задачу. В основном все связано с тагами <FRАМЕ> и их атрибутами. Если же вы хотите поэкспериментировать, можно сделать вложенные друг в друга таги <FRAMESET> аналогично тагам <ТАВLЕ>.

Атрибуты ROW= и СОLS= похожи. Имейте в виду, что для каждой строки и столбца, упомянутых в таге <FRAMESET>, должен быть свой набор тагов <FRАМЕ>.

  1. Атрибут ROW=

    Атрибут ROW= тага < FRAMESET > задает число и размер строк на странице. Количество тагов <FRАМЕ> должно соответствовать указанному числу строк. Справа от знака = можно определить размер каждой строки в пикселях, процентах от высоты экрана или в относительных величинах (обычно это указание занять оставшуюся часть места). Не забывайте пользоваться кавычками и запятыми и оставлять пробелы между значениями атрибутов. Например, следующая запись формирует экран, состоящий из трех строк: высота верхней равна 20 пикселей, средней - 80 пикселей, нижней - 20 пикселей:

    Следующий таг < FRAMESET > создает экран, на котором верхняя строка занимает 10% высоты экрана, средняя - 60%, а нижняя - оставшиеся 30%. 

       <FRAMESET ROW="10%, 60%, 30%->

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

       < FRAMESET ROW="20, 80, *" >

    А можно сделать так: 

       < FRAMESET ROW="20, 2*, *" >

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

  2. Атрибут СOLS=

    Столбцы задаются так же, как строки. Для них применимы те же атрибуты.

  3. Таг <FRАМЕ>

    Таг <FRАМЕ> определяет внешний вид и поведение фрейма. Этот таг не имеет закрывающего тага, поскольку в нем ничего не содержится. Вся суть тага <FRАМЕ> в его атрибутах. Их шесть: NАМЕ=, MARGINWITH=, MARGINHEIGHT=, SCROLLING=, NORESIZE= и SRC=.

  4. Атрибут NАМЕ=

    Если вы хотите, чтобы при щелчке мыши на ссылке соответствующая страница отображалась в определенном фрейме, вы должны указать этот фрейм, чтобы страница знала, куда что загружать. В предыдущих примерах мы назвали большой правый фрейм main, и именно в нем появлялись страницы, выбранные из оглавления в левом фрейме. Фрейм, в котором отображаются страницы, называется целевым (target). Фреймы, которые не являются целевыми, именовать не обязательно. Например, можно записать такую строку: 

       <FRАМЕ SRC="MY.HTMl" NАМЕ="main">

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

  5. Атрибут МАRGINWITH=

    Атрибут МАRGINWITH = действует аналогично атрибуту таблиц CELLPADDING=. Он задает горизонтальный отступ между содержимым кадра и его границами. Наименьшее значение этого атрибута равно 1. Нельзя указать 0. Можно ничего не присваивать - по умолчанию атрибут равен б.

  6. Атрибут МАRGINHEIGHT=

    Атрибут МАRGINHEIGHT= действует так же, как и МАRGINWITH =. Он задает поля в верхней и нижней части фрейма.

  7. Атрибут SCROLLING=

    Хотите ли вы, чтобы ваши читатели пользовались прокруткой в фрейме? Иногда бывает разумно лишить их этого удовольствия. Возможные варианты: SCROLLING =YES, SCROLLING =NО, SCROLLING =АUТО. SCROLLING =YES означает, что в фрейме всегда будут полосы прокрутки, даже если это не нужно. При задании SCROLLING =NО полос прокрутки не будет, даже если они необходимы. Если документ слишком большой, а вы задали режим без прокрутки, то документ просто будет обрезан. Атрибут SCROLLING =АUТО предоставляет броузеру самому решать, требуются ли полосы прокрутки или нет. Если атрибут SCROLLING= отсутствует, результат будет таким же, как и при задании SCROLLING =АUТО.

  8. Атрибут NORESIZE

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

  9. Атрибут SRС=

    Атрибут SRС= применяется в таге FRАМЕ при разработке фреймовой структуры для того, чтобы определить, какая страница появится в том или ином кадре. Если вы зададите атрибут SRС= не для всех фреймов, у вас возникнут проблемы. Даже если страницы, отображаемые в фрейме, выбираются в соседнем фрейме, вы должны по крайней мере задать для каждого фрейма начальную страницу. Если вы не укажите начальную страницу и URL, фрейм окажется пустым, а результаты могут быть самыми неожиданными - например, ваш броузер начнет выводить все новые и новые окна просмотра.

  10. Атрибут ТАRGЕТ=

    Чтобы разобраться с атрибутом ТАRGЕТ=, давайте вернемся к нашему простому примеру с кадром оглавления. Когда пользователь щелкает мышкой на одной из ссылок в левом фрейме, соответствующая страница должна появиться в правом фрейме, а оглавление остается неизменным. Чтобы этого добиться, нужно определить целевой фрейм ТАRGЕТ, в котором будет отображаться страница для каждого пункта оглавления. Задание целевых фреймов осуществляется в ссылках левого фрейма. Вот зачем всем кадрам в фреймовой структуре были присвоены имена. Правый фрейм называется main, так что нужно в каждой ссылке добавить атрибут ТАRGЕТ="main", в результате чего соответствующая страница появится в фрейме main. Обратите внимание: каждая ссылка содержит атрибут ТАRGЕТ="main", который в ответ на щелчок мышью отображает страницу в фрейме main.

    Атрибут ТАRGЕТ= можно задавать для нескольких различных тагов. При использовании в таге <ВАSЕ> он направляет все ссылки в определенный целевой фрейм, если в дальнейшем особо не оговорено другое. Можно задать атрибут ТАRGЕТ= в таге <АRЕА> в активном изображении или в таге <FОRМ>. Фреймы полезны для организации форм. Пользователи будут видеть одновременно и форму, и результат своего выбора. Обычно при щелчке мышью кнопки Submit форма исчезает и возникает страница с результатами выбора. Сочетание форм и фреймов может оказаться удобным средством навигации.

"Волшебные" целевые фреймы

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

Имена <волшебных> целевых фреймов всегда начинаются с символа подчеркивания (_); никакие другие фреймы не могут так называться. < Волшебные> фреймы необязательно указывать в фреймовой структуре. Если не проявить должной аккуратности, то это - еще один повод вашему броузеру открыть кучу окон.

Фрейм "blank"

Если атрибут ТАRGЕТ= ссылается на " blank", то документ всегда будет появляться в новом пустом окне.

Фрейм "self"

Имя "self" указывает на то, что выбранная страница загружается в тот же фрейм, где была активирована ссылка. Если вы щелкнете мышкой на ссылке в фрейме оглавления, выбранная страница окажется в том же самом фрейме. Если вы задали фрейм для всего документа в атрибуте ВАSЕ=, то "self" помогает нейтрализовать ссылку в ВАSЕ=.

Фрейм "раrent"

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

Фрейм "top"

При указании ссылки "tор" документы появляются в отдельном окне вне фрейма. Независимо от вашего желания броузер откроет новое окно просмотра.

Вложенные и множественные кадровые структуры

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

В основном вложенные фреймы действуют так же, как вложенные таблицы. Задайте кадровую структуру, а внутри какого-нибудь фрейма в ней еще одну структуру. Помните, что таг <FRАМЕ> не имеет закрывающего тага. Вы, наверное, заметили, что при работе с фреймами не используются таги <СОLSРАN> и <ROWSРАN>. Их роль играют множественные, или вложенные, фреймы. Задав внутри одной объемлющей фреймовой структуры две независимых подструктуры, можно поместить в левой части экрана столбец из двух, а в правой - из трех фреймов.



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

24-часовые часы. 

   

<html>

<head>
<SCRIPT Language="JavaScript">
<!-- hide from old browsers
function jsClock24hr(){
var time = new Date()
var hour = time.getHours()
var minute = time.getMinutes()
var second = time.getSeconds()
var temp = "" + ((hour < 10) ? "0" : "") + hour
temp += ((minute < 10) ? ":0" : ":") + minute
temp += ((second < 10) ? ":0" : ":") + second
document.clockForm24hr.digits.value = temp
id = setTimeout("jsClock24hr()",1000)
}
//-->
</SCRIPT>


</head>

<BODY>
<BODY ONLOAD="jsClock24hr()">

<FORM NAME="clockForm24hr">


 <FONT face="Courier New,Courier" size=3>


<B>


<INPUT TYPE="text" NAME="digits" SIZE="6" VALUE="Loading">


</B>
</FONT></FORM> 

</body>
</html>

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

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

javascript05@narod.ru


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