it_vse (519823), страница 44
Текст из файла (страница 44)
Имеет следующие параметры:NAME – имя списка, VALUE – значение, выбранное пользователем, SIZE - количествозначений, одновременно отображаемых в списке, MULTIPLY – позволяет выбрать изсписок сразу несколько значений.<OPTION> </OPTION> - элемент списка.<OPTION SELECTED> </OPTION> - элемент списка, выбранный по умолчанию.<OPTION DISABLED> </OPTION> - отключенный элемент списка, отображаетсясерым цветом.Область с полосами прокрутки для ввода большого количества текста.
Имеет следующиепараметры: NAME – имя области текста, ROWS - высота области (строк), COLUMNS ширина области (колонок), WRAP - способ переноса текста в документе (off отключен, virtual – перенос отображается только при вводе в форму, реальносимволы конца строки не вставляются, physical – включен). Ляхевич А.Г., 2000 - 2002 годФреймы в HTMLФреймы делят HTML-страницу на несколько независимых областей, каждая из которых функционируетнезависимо и может отображать свой URL-адрес. Возможен также случай, когда фрейм представлен в видеотдельного окна. Другими словами, фреймы – это попытка сделать HTML-страницу многооконной.Для того, чтобы страница HTML-страница могла содержать фреймы, тэги <BODY> </BODY>,обрамляющие тело HTML-документа должны быть заменены на тэги <FRAMESET></FRAMESET>.
Нижеприведен текст HTML-страницы, содержащей фреймы, и даны пояснения некоторых тэгов.File2.htmFile1.htmFile3.htmFile4.htmрис. 8.4. Страница фреймов.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head> <title> Страница фрэймов </title> </head><frameset cols="45%,*"><frame name="levo" src="File1.htm" scrolling="no" frameborder="NO" noresize><frameset rows="100px,200px,*"><frame name="verx"src="File2.htm" scrolling="auto" frameborder="NO"><frame name="seredina" src="File3.htm" scrolling="yes"><frame name="niz"src="File4.htm" scrolling="yes"></frameset><noframes><body> Эта страница использует фреймы, однако Ваш браузер их не поддерживает. </body></noframes></frameset></html>Значение некоторых тэгов пояснено ниже:Таблица 8.5.Тэги создания фреймов.Тэг<frameset></frameset><frame><noframes></noframes>ЗначениеКонтейнер фреймов.
Параметры ROWS и COLS задают разбиение страницы или повертикали (COLS=45%,* указывает на 2 части: одна 45% ширины экрана, вторая – всеостальное пространство * ) или по горизонтали (ROWS=100,200,* указывает на 3 части:одна высотой 100 пикселей, вторая 200 пикселей и третяя – все остальное). С помощьюконтейнера экран можно разбить по вертикали или по горизонтали. Если надоодновременно разбить экран и по вертикали и по горизонтали, то лучше всего вложитьодин контейнер в другой, как это показано в примере.Задает URL-адрес файла, отображаемого в контейнере и его параметры.Name – имя фрейма, Src – URL-адрес файла фрейма, Scrolling – наличие полос прокрутки(yes, no, auto), Noresize – запрещает изменять размер фрейма, FrameBoder – задаетотображение рамки фрейма (yes, no).Данные между этими тэгами предназначены для браузеров, которые не могут обрабатыватьфреймы.
В примере, в этих тэгах помещен текст, который увидят пользователи, если ихбраузер не воспринимает фреймы.Использование разделенного рисункаРазделенные рисунки — это один самых распространенных способов перемещения по страницам Web-узла.Они представляют собой рисунки, разделенные на несколько областей, каждая из которых выступает в ролиотдельной ссылки. Щелчок на каждой из областей одного рисунка приводит к выполнению разных командсценария. Существует два типа разделенных рисунков — клиентские и серверные. Клиентские разделенныерисунки определяют области ссылок на изображении в документе HTML и создаются с помощью HTML.Серверные разделенные рисунки требуют создания специального файла определения карты разделениярисунка, которым управляет Web-сервер.
Здесь будут рассматриваться клиентские разделенные рисунки. Ляхевич А.Г., 2000 - 2002 годЧтобы создать клиентский разделенный рисунок, сделайте следующее.1) В графическом редакторе создайте рисунок в формате GIF или JPEG.2) Задайте карту разбиения рисунка на области в формате:<MAP name="Имя_карты_разбиения"><AREA SHAPE="rect" COORDS="x1, y1, x2, y2" HREF="http://adress1.com"><AREA SHAPE="rect" COORDS="x1, y1, x2, y2" HREF="http://adress2.com"><AREA SHAPE="rect" COORDS="x1, y1, x2, y2" HREF="http://adressN.com"></MAP>3) Включите рисунок в страницу, указав, что для него необходимо использовать созданную вами карту:<IMG SRC="file.gif" alt="пример карты" USEMAP = "#Имя_карты_разбиения">Пример:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><BODY><MAP NAME="karta1"><AREA SHAPE=RECT COORDS="1,1,100,300" HREF="http://magazin.com/zal"><AREA SHAPE=RECT COORDS="110,1,200,300" HREF="http://magazin.com/sklad"></MAP><H1>Пример клиентского разделенного рисунка</H1> <BR><IMG SRC="file1.gif" alt="пример карты" USEMAP="#karta1" WIDTH="200px" HEIGHT="300px"></BODY> </HTML>Создание бегущей строки при помощи тэга <MARQUEE>.Используя тэг <MARQUEE> можно просто создать бегущую строку, например так:<marquee> Приветик </marquee>Или в более полном варианте:<marquee width="75%" height="20px" bgcolor="yellow" direction="left" behaviour="scroll" loop="10"scrollamount="30px" scrolldelay="30" align="top"> Приветик </marquee>Таблица 8.6.Тэг marquee.Параметрwidth, height, bgcolordirectionbehaviourloopscrollamountscrolldelayalignЗначениеСоответственно ширина, длина и цвет фона окна бегущей строки.Направление движения: left – слева, right – справа.Поведение: scroll – прокрутить текст n-раз и исчезнуть, slide-прокрутить текст nраз и остаться, alternate – отскакивать от краев экрана.Число раз прокрутки.
Если loop не указано, или указано число –1, то прокруткабудет бесконечной.Количество пикселей, на которое строка смещается за 1 шаг.Задержка в милисекундах перед каждым шангом прокрутки.Выравнивание строки в своем окне: top - верх, middle – центр, bottom - низ.Слои DHTML, каскадные таблицы стилей CSS.Традиционный HTML позволяет описать структуру документа, но не указывает "как" должен выглядеть документ. Тот или иной браузер сам решает каким шрифтом отобразить, например, заголовок первого уровня(тэг <H1>).
Гораздо большего контроля над внешним видом документа можно добиться, используя каскадные таблицы стилей (CSS). Они позволяют явно задать цвет, размер, название и начертание шрифта, фон,тип рамки и т.п., для какого-либо фрагмента документа. Стили описываются при помощи тэга <STYLE>.Стили также могут быть описаны в отдельном файле (обычно, с расширением CSS), подключаемом кHTML-документам при помощи ссылки вида <link rel="stylesheet" type="text/css" href="файл_стилей.css">. Вподключаемом файле тэги <STYLE> </STYLE> указывать не надо.Помимо стилей, в DHTML таже предусмотрено существование слоев в документе.
Слои чем-тонапоминают листы кальки, наложенные друг на друга, или слои в Photoshop и др. графических редакторах.Слои могут быть наложены друг на друга в определенном порядке и перекрываться. С помощью JavaScriptих также можно перемещать по экрану, скрывать и отображать. К каждому слою может быть примененуникальный стиль CSS. Слои описываются при помощи тэга <DIV>. Рассмотрим работу со стилями ислоями подробнее. Ляхевич А.Г., 2000 - 2002 годСтили описываются при помощи тэга <STYLE>, который может находиться в заголовке документа,теле документа, или входить как параметр в состав другого тэга.
Стиль может описываться для какого-либотэга, для слоя в документе, или описываться как "класс", который может быть применен к любому тэгу вдокументе или части текста, при помощи вспомогательного тэга <SPAN>. В нормальном состоянии стиликаскадно "спускаются" по странице, т.е. если один тэг вложен в другой, то он наследует стили, определенные в "вышестоящем" по уровню вложенности тэге, если только эти стили не были переопределены в самомвложенном тэге.
Тэг <SPAN> "отсекает" каскадное наследование стилей и создает в документе "вложенныйконтейнер", внешний вид содержимого которого полностью определяются стилями, примененными в тэге<SPAN>. Пример:Таблица 8.7.Пример использования стилей CSS и слоев DHTML.Текст HTML-страницы<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> Слои DHTML истили CSS </TITLE><STYLE>BODY { background-color : #EEEEEE;color : #000000; font-size:14px;font-family : Arial, Helvetica, sans-serif; }H1, FONT {font-size:110%; font-style:italic;font-weight:bold; }A:HOVER, INPUT{color : #FF009F;text-decoration : underline; }A:LINK, A:VISITED {color : #000099;text-decoration : none; }#s1 {position:absolute; left:10px; top:300px;width:200px; height:100px; visibility:show;zIndex:1;}.
zagolovok {color : #FF009F; font-size:large;}</STYLE></HEAD><BODY><H1> Новый заголовок первого уровня </H1><H1 class="zagolovok"> К заголовку первогоуровня применен класс zagolovok </H1><A href="www.sait.com"> Гиперссылка </A> Ляхевич А.Г., 2000 - 2002 годКомментарийНачало HTML-документа и области заголовка, названиеHTML-документа.Начало описания стилей документа.Описания стиля для тэга BODY. Сначала указываетсяназвание тэга, для которого описывается стиль, а затем вфигурных скобках указывается название параметра, двоеточие, значение параметра, точка с запятой, следующиепараметры.