/
Автор: Урбанович П.П. Пацей Н.В.
Теги: компьютерные технологии кибернетика информационные технологии html учебно-методическое пособие веб дизайн язык программирования javascript
ISBN: 985-434-385-5
Год: 2004
Текст
Учреждение образования «БЕЛОРУССКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНОЛОГИЧЕСКИЙ УНИВЕРСИТЕТ»
ОСНОВЫ WEB-ДИЗАЙНА
Учебно-методические пособие для аспирин гои и студентов всех специальностей
Минск 2004
УДК 681.3
ББК 32.81
0-75
Рассмотрено и рекомендовано к изданию редакционноиздательским советом университета
Составители:
П.П. Урбанович, Н.В. Пацей
Рецензенты:
ректор ПИТ БГУИР доцент, канд. техн, наук А.Г. Якубенко; ст. преподаватель кафедры АППиЭ БГТУ канд. техн, наук Д.А. Гринюк
Основы Web-дизайна. Учеб.- метод, пособие для аспирантов 0-75 и студентов всех специальностей / Сост. П.П. Урбанович, Н.В. Пацей. - Мн.: БГТУ, 2004. - 104 с.
ISBN 985-434-385-5.
В пособии рассматриваются основы Web-технологий: язык гипертекстовой разметки HTML, язык программирования динамического контента JavaScript, спецификация разработки прикладного программного обеспечения - CGI и спецификация описания стилей представления информации CSS.
УДК 681.3
ББК 32.81
ISBN 985-434-385-5
© Учреждение образования «Белорусский государственный технологический университет», 2004
ВВЕДЕНИЕ
Цель пособия - дать студентам и аспирантам представление об основах Web-технологий и научить их создавать и опубликовывать в сети Internet свои собственные статические и динамические Web-сайты .
Содержательно пособие обучает четырем основным технологиям: HTML. CSS, JavaScript и CG1. Изложение материала опирается на множество примеров по созданию и размещению Web-узла научного или общеобразовательного учреждения, распространяющего большие массивы информации с организацией поиска и доступа к ней.
Типичная структура Web-узла фирмы обычно представлена следующим образом.
Информация об организации. Рассказывается о целях и деловом облике организации, ее истории и т.д.
Информация о продукции и услугах. Размещаются на Web-странице фотографии или рисунки продукции, услуг. Описываются их свойства и преимущества, представляются каталоги продукции. Если планируется прием информации через Internet, то на узле помещается бланк заказа, поступающего по электронной почте.
Информационная поддержка. Публикуются дополнительная техническая информация, часто задаваемые вопросы, советы и т.п.
Новости. Пользователи информируются о новшествах, изменениях. Публикуются пресс-релизы и т.п.
Обратная связь. Сообщается как можно связаться с организацией, где она находится. Помещаются форма для отзыва, гостевая книга, адреса электронной почты, на которые пользователь может отправить запрос и т.п.
Для того чтобы создать уникальный информационный ресурс, не обязательно изобретать что-то принципиально новое, можно, по-другому оформить уже существующий. Однако нужно помнить, что составляющие его отдельные документы должны быть объединены общим стилем оформления и средствами навигации. Это не значит, Ч1О документы должны быть похожи друг на друга, но общая идея, единый стиль должны присутствовать обязательно. Пользователь должен без труда понимать, где он находится сейчас и как можно попасть в любое другое место. Необходимо предусмотреть возможность перехода к первому' документу, программе поиска или к схеме Web-
3
узла. Последовательность, логичность, постоянство - вот необходимые качества хорошего Web-узла.
Существуют уже сложившиеся правила построения Web-документов, из которых состоит Web-узел:
Структура. Web-документ должен содержать следующие разделы: заглавие, название организации, навигационную панель, содержание, контактную информацию, дату и время обновления и статус документа.
Логотип. Название организации всегда должно присутствовать на экране. Для этого в начале каждого Web-документа обычно помещается логотип. Кроме того, название должно присутствовать и в выходных данных ко всем документам.
Навигационная панель. Одним из наиболее важных разделов Web-документа является навигационная панель, или панель управления. Гипертекстовые ссылки обеспечивают полную связность публикуемых материалов. Навигационная панель Web-узла должна присутствовать в каждом документе. В первую очередь она должна включать в себя направляющие ссылки типа «Вперед» - «Назад» («Следующий» - «Предыдущий»), указывающие на соседние документы в структуре Web-узла Далее должны идти ссылки на все крупные разделы Web-узла - разделы первого уровня. Кроме этою, пользователь всегда должен иметь возможность мгновенно вернуться на главную страницу Web-узла. Помимо ссылок следует указать путь к локальной поисковой системе и индексу.
Содержание. Должно отвечать таким трсбовашгям, как грамматическая и орфографическая корректность, точность и достоверность предлагаемых материалов и многое другое.
Сейчас выработалось единое мнение, что Web-ссрвер необходимо строить на основе одноэкранных документов. Если размер документа превышает одну страницу, то он может быть поделен на несколько логических частей, каждая из которых будет занимать не более одной страницы. Есть два исключения из этого правила: оно не распространяется на статьи, публикуемые в WWW, и анкетные формы, которые нельзя разрывать.
Графика. При разработке с границ нужно выбирать оптимальное соотношение графических и текстовых материалов. Одна хорошая картинка может заменить тысячу строк текста, но и загружаться она будет дольше. Можно исходить из того, что графики на странице должно быть чуть меньше, чем хочется. Обычно панель управления.
4
логотип и название фирмы выполняются в виде графических элементов. Общий размер документа не должен превышать значения 170-300 Кбайт.
Страницы по функциональному назначению можно разделить на несколько типов. Информационные страницы - это последовательное изложение информации с возможностью гипертекстовых контекстных переходов (подсказки, руководства, описания компаний, исторические справки и т.п.). Навигационные страницы - это совокупность гипертекстовых ссылок, которые позволяют ориентироваться в материалах Web-узла (как правило, это совокупность различных меню), а также это страницы обмена данными, которые позволяют передать на сервер некоторый объем информации.
После создания макета можно приступить к его реализации с помощью языка HTML и иных средств, предлагаемых современными технологиями.
Использование SSI (Server Side Includes, вставки на стороне сервера) позволяет вставлять небольшие объемы динамических данных непосредственно в пересылаемый пользователю HTML-документ С помощью SSI можно включать один файл в состав другого, исполнять CGl-сцснарии (Common Gateway Interface, общий шлюзовой интерфейс) и передавать другую информацию.
CGI - спецификация, позволяющая Web-серверу выполнять произвольные прикладные программы. В результате работы таких программ (сценариев, или «скриптов») создаются HTML-документы. С помощью CGI-сценариев могут приниматься данные от пользователя, они позволяют организовать диалог на Web-страницах, запросы к базам данных и т.д. Создать CGI-сценарий можно с помощью языков программирования: Perl, Basic, С, C++, Pascal и т.п.
Завершив создание Web-узла, необходимо разместить его в Internet. Здесь возможны три варианта: первый - использовать компьютер. который вместе с Web-сервером и Web-узлом находится-в вашей организации и подключается к Internet; второй - зарегистрировать собственное доменное имя, обративший в одну из организаций, занимающуюся проверкой и выдачей адресов в сети http://www.intermc.net, http://wv'w.ripn.net/mc; третий - воспользоваться для размещения Web-узла услугами специальных организаций. Как правило, возможность размещения Web-узла предоставляется за небольшую плату или бесплатно (прил. 1).
5
1. ПРИНЦИПЫ ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ HTML
HyperText Markup Language (HTML) - язык разметки гипертекста. В нем используются указатели разметки (тэги). Отдельный документ, выполненный в формате HTML, называется HTML-документом, Web-документом или Web-страницей. Такие страницы, как правило, имеют расширение .htm или .hunt. Группа Web-страниц, принадлежащих одному автору или одному издателю и взаимосвязанных общими гиперссылками, образует структуру, которая называется Web-узлом или Web-сайтом.
1.1. Структура HTML-документа
Тэговая модель описывает документ как совокупность контейнеров, каждый из которых начинается и заканчивается тэгами, т.е. документ HTML представляет собой обычный ASCII-файл с добавленными в него управляющими HTML-кодами (тэгами).
HTML-тэг состоит из имени, за которым может следовать необязательный список атрибутов. Текст тэга заключается в угловые скобки («<» и «>»), конечный тэг всегда снабжается косой чертой. HTML не чуствшпелен к строчным и прописным символам.
При использовании в документе вложенных элементов разметки, тэги нужно закрывать начиная с последнего. Отдельные элементы разметки не имеют конечного компонента, поскольку являются автономными. В некоторых случаях конечные тэги в документе можно опускать.
Кроме тэгов, элементами HTML являются CER (Character Entity Reference), они предназначены для представления специальных символов в документе HTML. Каждый из CER начинается с амперсанта «&» (прил. 2).
Атрибут - параметр или свойство элемента. Атрибуты располагаются внутри начального тэга и отделяются друг от друга пробелами.
Все тэги HTML по их назначению и области действия можно разделить на следующие основные группы:
• определяющие структуру документа;
• оформляющие блоки гипертекста (параграфы, списки, таблицы, картинки);
6
• гипертекстовые ссылки и закладки;
• формы для организации диалога;
• вызывающие программы.
HTML-документ - это один большой контейнер, который начинается с тэга <HTML> и заканчивается тэгом </HTML>:
<НТМЬ>Содержание документа</НТМ1_>
В табл. 1 приведена структура типичного Web-документа.
Таблица 1
Пример тэгов Описание
<HTML> Тэг начала HTML-документа
<HEAD> Тэг- указывает на начало области заголовка Web-страницы. Служит для формирования областей структуры документа
<TITLE> Структура Web-страницы </TITLE> Элемент для размещения заголовка Web-страницы. Строка отображается в заголовке окна браузера
<BASE HREF=http://www.bstu.by/ta sks/ TARGET=new> t Контейнер BASE можно использовать вне документа, в заголовке или теле документа. С помощью этого тэга определяют базовый URL для гипертекстовых ссылок документа, заданных з неполной (частичной) форме. А также позволяет определить окно загрузки документа по умолчанию при выборе гипертекстовой ссылки текущего документа TARGET
<META http-equiv-’Content-Type" content-'text/html; char-set=windows-1251 "> Этот тэг несет служебную информацию и не отображается в экране браузера. В данном случае идет речь о кодировке Web-страницы. Достаточно лишь каждый-раз вставлять этот тэг в таком виде на свою страницу, тогда она будет использовать кодировку windows-1251, наиболее распространенную на сегодняшний день
<META name-’Author" content-'Ivanov lvan"> Имя автора Web-страницы ‘ •
<META name="Keywords" content="WWW, HTML, document, страничка, структура"> Набор ключевых слов для поиска. Раньше этими словами пользовались поисковые машины для отбора сайтов по тематике запроса. Сегодня эти слова поисковыми машинами практически не используются
<META name-'Description" content-'Это пример составления страницы"> Краткое описание содержимого станицы
7
Окончание табл. 1
Пример тэгов Описание
</HEAD> Конец области заголовка Web-страницы
<BODY bgcolor-'blue" bacKground-'image.gif" text=#OOOOFF vlink=#FFOOOO link=#00FF00> Начало собственно содержимого Web-страницы. Тэг BODY включает в себя атрибуты: bgcolor, который задает цвет фона (если не использовать этот атрибут, то по умолчанию, цвет страницы будет белым), text - цвет текста, vlink- цвет пройденных гипертекстовых ссылок, link - цвет гипертекстовой ссылки в виде названия (black) или шестнадцатеричной нотации (#000000), bacKground - задает фоновое изображение для документа
<H2> Заголовок странички </H2> <Н2> </Н2> Элемент заголовка
<P> Текст первого абзаца странички </Р> <Р> </Р> Элемент абзаца
< Р> Текст второго абзаца странички </Р>
<SCRIPT lan-g u age=" JavaScript" src=script.code> Служит для размещения кода JavaScript, VBScript или JScript
</SCRIPT> Конец скрипта
</BODY> Конец содержимого Web-страницы
</HTML> Конец HTML-документа
1.2. Форматирование текста
Уровни заголовка <Н1> </Н1> . <Н6> </Н6>
Пример:
<Н1> ЭТО САМЫЙ БОЛЬШОЙ И ЖИРНЫЙ ШРИФТ </Н1>
Абзац <Р> </Р>
Атрибуты: align-'left" - выравнивание текста по левому краю экрана; align-'center" - по центру экрана; align-'right" - по правому краю экрана.
Пример:
<Р align="center“>TeKCT абзаца выровнен по центру зкрана</Р>
Принудительный переход на новую строку <BR>
Пример:
Уронили мишку на пол <BR> Оторвали мишке лапу <BR>
8
Выделение текста полужирным шрифтом <В> </В>
Пример:
<В>Этот текст выделен полужирным шрифтом</В>
Выделение текста курсивом <1> </1>
II ример;
<1>Этот текст выделен курсивом</1>
Подчеркивание текста <U> </U>
Пример:
<и>Подчеркнуть</и^
Определение типа, размера и цвета шрифта <FONT> <ZFONT>
Атрибуты size-3 - абсолютный размер шрифта (возможные значения от 1 до 7); color=r"blue" - цвет шрифта; face='*arial" -определение гарнитуры шрифта.
<FONT size=3 color=’'biue" face="arial,r> </FONT> - все атрибуты могут быть использованы совместно внутри данного тэга.
Пример:
<FONT size=1>9ro шрифт 1</FONT>
«FONT size=6>9TO шрифт 6</FONT>
<FONT со1ог="Ыие">Это шрифт синего цвета</РО!МТ>
<FONTface-'arial" size=3 color="blue">
' Это шрифт arial размером 3, цвет синий. </FONT>
Цитата <BLOCKQUOTE> </BLOCKQUOTE>
Пример:
Это обычный текст абзаца.
<BLOCKQ'JOTE>A это текст цитаты </BLOCKQUOTE>
А это снова обычный текст.
Маркированный список <UL> <LI> </UT >
Атрибут type задает начертание, которое может принимать значения: disc - сплошные маркеры, square - сплошные квадратные, и circle - маркеры в виде окружностей.
Пример:
^UL type="circle">
<LI> Первый пункт списка.
<LI> Второй пункт списка;
<□> Третий пункт списка.
</UL>
Нумерованный список <ОЕ> <LI> </OL>
Атрибут type=l задает тип нумерации арабскими цифрами 1,2,3,..; type-a задает тип нумерации латинскими буквами а,Ь,с,..;
9
type^A - тип нумерации латинскими заглавными буквами А,В,С,...; type=i - тип нумерации римскими цифрами в нижнем регистре i,ii,iii,iv,..; type=I - соответственно римскими цифрами в верхнем регистре I, II, III, IV,..; start—1 указывает с какого индекса ничинается нумерация.
Пример:
<О1_>
< 1_1> Первый пункт списка;
< LI> Второй пункт списка;
< LI> Третий пункт списка.
</OL>
Списки определений <DL> <DT> <DD> </DL>
Пример:
<DL>
<ОТ>Термин 1<00>0пределение первого термина.
<ВТ>Термин 2<00>0пределение второго термина.
</DL>
Увеличение/уменынение размера текста на единицу
<BIG> </BIG> <SMALL> </SMALL>
Пример:
<ВЮ>Этот текст будет больше стандартного</ВЮ>
<SMALL>3tot текст меньше стандартного</8МАЫ_>
Верхний и нижний индекс <SUP> </SUP> h.<SUB> </SUB>
Пример: C2H5OH или 32=9
С <SUB>2</SUB>H<SUB >5</SUB> ОН или 3<SUP>2</SUP>=9
Вычерчивание горизонтальных линий <HR>
Атрибуты: align=left - определяет выравнивание линии в документе; size=10 - устанавливает высоту линии в пикселах; width=150 -устанавливает ширину линии в пикселах или в процентах от ширины внешнего элемента.
Пример:
< HR width=80% align=left>
< HR width=50% align=center size=10>
< HR width=150 align=right >
1.3. Управление цветом
Кодирование цвета используется для раскрашивания шрифтов, линий, фона и других элементов страницы. Цвета обозначаются анг-
10
лийскими названиями или шестнадцатеричными кодами (табл. 2).
Таблица 2
Аквамарин aqua #00FFFF Светло-зеленый lime #00FF00
Белый white #FFFFFF Серебристый silver #C0C0C0
Желтый yellow #FFFF00 Серый gray #808080
Зеленый green #008000 Сизый teal #008080
Золотистый gold #FFD700 Синий blue #0000FF
Индиго indigo #4130080 Ультрамарин navy #000080
Каштановый maroon #800000 Фиолетовый violet #EE80EE
Красный red #FFQ000 Фуксиновый fuchsia #FF00FF
Оливковый oliv #808000 Черный black #000000
Пурпурный purple Г#800О8и
Цвет шрифта можно заДать с помощью атрибута color в тэге <FONT>.
Пример:
<FONT со!ог="ГР5800">Это цветной текст 1</FONT>
<FONT со1ог="Ыие‘’>Это цветной текст 2</FONT>
Задать цвет фона страницы позволяет атрибут color внутри тэга <BODY>.
Пример:
х <BODY color="FFFFCC">
Если вы хотите установить рисунок в качестве обоев странички, то в тэге <BODY> используйте атрибут background с указанием адреса рисунка обоев.
Пример:
<BODY background="wood.jpg">
1.4. Вставка объектов
Вставка графического объекта <IMG>
Обязательный атрибут src - указатель на файл графики, src-'Ссылка на файл".
Пример:
<IMG src="bos2.gif' alt-'Портрет маленького джентельмена">
Alt - выводит текст в тех местах, где должны располагаться рисунки, пока они не за] ружены.
Width и height - задает ширину' и высоту области, в которой демонстрируется рисунок, по умолчанию изменяется автоматически.
И
Пример:
<IMG src=Mbos2 gif’ ="12Г> или
<IMG src="bos2.g!f' width=’’176">
Атрибут border предназначен для создания рамки вокруг объекта; ширина рамки задается в пикселах.
Пример:
<IMG src="pantera gif' border="2" >
Align - задает выравнивание изображения относительно текущей строки: top - но верхнему полю, middle - по базовой линии текущей строки, bottom - по нижнему полю, left - по левому нолю, right -по правому полю.
Пример:
<IMG src-cake.gif aiign=top>
Созание активных изображений <МАР> </МАР>
Для создания изображения с так называемыми активными областями, которые ссылаются на URL других страниц или узлов, изображению назначают карту. В тэге IMG указывается атрибут usemap со значением name, соответсвуюшим тэгу <МАР>.
Пример:
<МАР name~,‘exainple,,>
</МАР>
<IMG src-’exarriple.gif' usemap=''#examole">
«Горячие» области изображения, т.е. области при нажатии на которые можно загрузить другой файл html. <AREA>
Ат рибуты: href задает адрес страницы, которая будет загружат ься этой областью; shape - форма «горячей» области - может принимать значения: circle - окружность, rect - прямоугольник, poly - полигон любой формы. Атрибут coords задает координаты области. Все координаты отсчитываются от левого верхнего угла изображения. Они могут задаваться либо в пикселах, либо в процентах от размеров изображения, т.е. X от ширины, a Y от вышины. Для окружности: coords="X центра, Y центра, радиус”. Для прямоугольника: соогб5=''лево верх X, лево верх Y, право низ X, право низ Y". Для полигонов: coords-'Х точки 1, Y точки 1, X точки 2, Y точки 2, Атрибут nohref предназначен для запрета области, т.е. той на которую нельза нажимать. Атрибут alt, как и у изображений, сообщает текст браузеру, который будет выводиться при наведении мыши на «горячую» область.
12
Пример:
«IMG src="image gif' alt-’Изображения" usemap="#imap">
«МАР name="imap">
«AREA shape=rect coords-’5,5t15,15" nohref;*
«AREA href-'main.html" shape-’rect coords="0,0,20,20' alt="Main">
</MAP>
Пример:
<MAP name="prob">
«AREA href-'koi html" snape-'PIrcle" coords="60,18,12">
«AREA href-'win html" shape-'poly"
coords~"62,37,68,30,86,30,92,37,87,46,69,46’>
<AREA href-'iso.html" shape-'circle’’ coords="78,63,12">
«AREA href-'main.html" shape="rect" coords-'19.73,60,92">
</MAP>
<P><IMG src-'step13.gif' usemap="#prob" alt-'Menu '> При мер (рис. 1):
<!MG src="map gif" и®етар="#я1!регтя " hnrder= o>
<MAP name= supermap">
«AREA shape="circle" coords="34,32.23"
href-’payel .html" title-'ссылкаГ>
<AREA shape="poly" coords="12,110,37,62,72,114"
href="page2 html" title="ccbinKa 2">
«AREA shapes "rect" coords="83,44,133,94"
href-‘page3 html" title-'ссылка 3">
</MAP>
Рис. 1
Разрезание картинки на прямоугольники для вставки в таблицу
Сначала устанавливаются размеры рамки таблицы и пространств между ячейками, равными нулю. Затем прописываются все 8 картинок.
Пример:
<TABlE border-0 cellspacmg=0 cellpadding=0>
<TR>
<TD colspan=2><IMG src="1.gif>
<A href="">«IMG src-’2.gif" alt-Koi border=0>«ZA>
«IMG src="3.gif'x/TD>
</TR>
<TR> .
«TDxIMG src-'4 gif"></TD>
<TD><A href="">
<!MG src-'5.gif' a!t=W)n border=0></A><BR>
13
<A href-
<JMG src="6 gif' alt=lso boraer-0></A></TD>
</TR>
<TR>
<TD>
<A href=""> <IMG src="7 gif' alt=Main border=0>
</A></TD>
<TD><IMG src="8 gif'x/TD>
</TRx/TABLE>
Задание фонового звучания после загрузки страншji>i
<BGSOUND>
Атрибут src указывает URL звукового файла в формате WAV, AU или MIDI. Атрибут loop задает количество воспроизведений зву кового файла, принимает значения 1 или infinite - бесконечно.
Пример:
<BGSOUND src-"URL" loop=1>
Бегущая строка <MARQUEE > </MARQUEE>
Атрибуты: bgcolor - цвет фона бегущей строки, height - высота строки; width - ширина строки; loop задает, сколько раз прокрутится строка; direction - указывает направление движения бегущей строки: direction="left" (right, up, down) - движение влево (вправо, вверх, вниз); scroll amount - скорость движения троки, принимает значения от 1 до 10.
Пример:
<MARQUEE height="10" width="270" bgcolor="#99CCFF"> Этс бегущая строка
</MARQUEE>
1.5. Гиперссылки
Гиперссылка <А> </А>
Текст является гиперссылкой:
< А href-'./Папка/файл тип">Текстдля щелчка</А>
Видимая часть гиперссылки представляет собой рисунок:
< А href= 'Адрес ссылки"> <IMG src-'Ссылка на рисунок"></А>
Гиперссылка используется для отправки электронной почты указанному адресату:
< А href="mailto:bstu@uibel Ьу">БГТУ</А>
Пример:
Чтобы вернуться к уроку "Гиперссылки", нажмите на кнопку
14
</\ href="links.htm">
<IMG src-'knopka.gif' width="112" height="50"></A>
Атрибуты гиперссылки внутри тэга <BOD Y>
Атрибут link задает цвет ссылок на всей Web-странице, vlink -цвет посещенных ссылок, alink - цвет активных ссылок (цвет появляется при нажатии мыши).
Пример:
<BODY link="0000FF' vlink="CC0066" alink="FFOOOO">
Закладка <A> s
Она позволяет без прокрутки сразу перейти на нужную строку или заголовок. Атрибут name-'название закладки" - задает закладку. Атрибут id идентичен атрибуту-name с той разницей, что он может вставиться в другие тэги, отличные от тэга <А>.
Пример:
< Р ia-'имя абзаца"> далее в тексте..
< А href-'# имя абзаца"> Ссылка</А >
Пример: Закладка располагается в другом файле
< А href=#mark1>riepBan метка</А>
< А href=exam2.html#mark3>3aicnaflKa во втором докумен ге</А>
Для визуализации подсказки ссылки используется атрибут title, который задаст название ссылки <А title-'имя ссылки"> Ссылка</А>
Пример: '
<НЗ>Оглавление</НЗ>
< А href=#head1 Заголовок 1</A><BR>
< А href=#head2>3aronoeOK 2</A><BR>
... <HR>
< А name=head1> <НЗ>Заголсвск 1 </НЗ>
< А name=head2> <НЗ>Заголовок 2</НЗ>
1.6. Фреймы
Фреймы помогают разбить рабочее пространство окна браузера на любое количество частей разных размеров. В каждую такую часть потом можно будет загрузить собственную страницу.
Для фреймов необходимо создать отдельный файл, который при зафузке разделит окно и подскажет браузеру, где взять содержимое каждого фрейма.
Разбиение файла на фреймы, задание относительного и абсо
15
лютного размера фреймов
<FRAMESET> </FRAMESF.T> вместо <BODY> </BODY>
Аэрибуты: rows задает разбиение на «строки», т.е. делит окно на горизонтальные области, a cols — на «колонны», т.е. делит окно на вертикальные области; frameborder имеет значение yes или тю и устанавливает признак окантовки фрейма; border задает ширину окантовки фрейма в пикселах, a bordercolor - цвет окантовки фрейма.
Пример: Окно разделится на 3 вертикальные части, первая будет ЮО пикселов в ширину, вторая - 10% от размера окна, а размер последней будет зависеть от размеров предыдущих, т.е. от того, сколько останется до полного размера окна.
<FRAMESET cols=100,10%,*>
</FRAMESET>
Определение содержимого заданных фреймов <FRAME> (должен находится внутри раздела <FRAMESET>)
В атрибуте name указывается имя области, по которому лотом можно будет к ней обращаться. Это имя должно быть уникальным и не должно повторяться. Crs - источник этой области, т.е. имя файла или URL документа, который будет сюда загружен. Атрибуты marginheight и marginwidth задают вертикальный и горизонтальный размер границы фрейма в пикселах. Признак отображения границы фрейма устанавливается frameborder; имеет значение yes или по. Атрибут scrolling имеет значения yes, по или auto и отвечает за использование скроллинга области, если ее содержимое полностью не помещается. При использовании значения yes скроллинг будет присутствовать всегда, при auto скроллинг будет появляться только когда он нужен, а при по вы его не увидите никогда. Атрибут noresize запрещает изменение размера фрейма. Flo умолчанию размер каждой области можно менять перетаскиванием границ мышкой. Атрибут bordercolor задает цвет окантовки фрейма.
Пример: Разбиваем окно на 2 вертикальные части и загружаем в них два соответствующих файла.
<HTML>
<FRAMESET col=100,* border=0>
<FRAME name-’menu" src-'menu.html" noresize scrolling=no>
<FRAME name="mainframe" src="title.html" scrolling=auto> </FRAMESET>
<NOFRAMES>
<Р>Ваш браузер не поддерживает данный режим.
16
<ВР>Измените браузер и повторите !!!
</NOFRAMES>
</HTML>
Вставка в тело BODY окна, в котором визуализируется другая страница <1FRAME> -----------
В атрибуте src указывается документ, который ₽agei должен быть отображен во фрейме (рис. 2). Атрибут ftameborder задает наличие или отсутствие обрамления у фреймов и принимает значения: 1 - соответствует наличию, а 0 - отсутствию обрамления: Рис. 2
<IFRAME frameborder="1 или □">
Атрибут marginheight устанавливает толщину верхнего и нижнего обрамления в пикселах: <IFRAME margmheight="4ncno">
Атрибут margin width - толщину правого и левого обрамления в пикселах: <1FRAME marginwidth=,’4ncno">
Атрибут name задает любое имя фрейма, по которому можно будет обращаться к нему в ссылках и направлять в него содержимое. Атрибут align позволяет позиционировать кадр по отношению к тексту, принимает значения Jett, right, middle, top и bottom: <iFRAME align="lett">
Атрибут scrolling задает наличие у кадра полос прокрутки, принимает значения yes, по и auto:
<FRAME. scrolling-'значение">
Атрибут width определяет ширину кадра в пикселах;
<IFRAME width-'число">
Атрибут height определяет высоту кадра в пикселах-
<IFRAME height="4Hcno' >
За1рузить страницу в определенном фрейме
<А href="left.html" target="leftr>
А эта ссылка загрузится во фрейме с именем leftl !!!
</А>
Существует несколько зарезервированных браузером имен: _top, jparent - используются для загрузки страницы в текущем окне, но при этом все предыдущие фреймы удаляются, _self-для загрузки страницы в этом же фрейме, blank - для загрузки страницы создается новое окно.
Пример (рис. 3):
<НТМ1_> <HEAD>
<Т ITLE>FRAMES</TITLE>
</HEAD>
17
<FRAMESET frameborder=1 border=2 rows=150,*> <FRAME scrolling-'yes" noresize src- pagel.html" name='T'>
<FRAMESET irameborder=1 border=2 cols=150,*>
<FRAME scrolling-'yes" noresize src="page2 html" name= 2 >
<FRAME scrolling="yes" noresize src="page3.html" name="3">
</FRAMESFT>
</FRAMESET>
</HTML>
-----------------------3
РАСЫ
3
----------------------3
PAGE ’ ' PAGE 3
4 I
Ji___________J
Рис. 3
1.7. Таблицы
Внешний элемент талицы <TABLE> </ТABLE>
<TABLE width="500"> - ширина этой таблицы 500 пикселов;
<TABLE width*="100%"> - таблица на всю ширину экрана;
<TABLE bgcolor="#00CC99"> - цвет фона лля всей таблицы;
<TABLE bac*<ground="img.gif"> - фоновое изображение для таблицы;
«TABLE width=”100%" bgcolor-"#G0CC9S'' border="3"> - ширина боковой 1рани в пикселах задает атрибут border (border-'О4 - грани таблицы невидимы).
Задание строки таблицы <TR> </TR>
Атрибут align позволяет выравнивать данные в ячейках по горизонтали: left - выравнивание влево, right - выравнивание вправо, center - центрирование; атрибут valign позволяет выравнивать текст по вертикали: top - выравнивание по верхнему краю ячейки, center - по центру, baseline - по первой строке. Атрибут rowspan объединяет указанное количество ячеек в одну по вертикали, a colspan - ячейки по горизонтали.
<TR bgcolor=green> - устанавливает цвет строки.
Задание ячейки таблицы <TD> </TD>
Пример: Задаем отдельно цвет ячеек таблицы
<TR>
<TD bgcolor="#0000FF"><nD>
<TD bgcolor="#33FF66"></TD>
<TD bgcolor-'#FF00FFh><7TD>
</TR>
Пример:
<TABLE>
18
<TR>
<TD> Первая ячейка первой строки<ЛГО>
<TD> Вторая ячейка первой строки</ТО>
</TR>
<TR>
<ТО>Первая ячейка второй строки</ТО>
<ТО>Вторая ячейка второй строки</ТО>
</TR>
</TABLE>
Пример:
<TABLE width-'100%" border="1" cellspacing="0" cellpadding="5" align="center">
<TR>
<TD width="257">BbipaBHMBaHne по горизонтали
<TD width="233" align="center"> По центру
<TD width="217" align="left"> По левому краю
<TD width="246" align="right"> По правому краю
<TR>
<TD width="257" height="112">Выравнивание по вертикали
<TD width="233" height="112" valign="top">no верхнему краю
<TD width="217" height="112" valign="middle">no центру
<TD width="246" height="112" valign="baseline">
По нижнему краю
</TABLE>
Пример (рис. .4):
<TABLE border=2>
<TR>
<TD>1
<TD>2
<TD>3
<TD>4
<TD>5
<TR>
<TD colspan=2 rowspan=2>6
<TD colspan=2>7
<TD rowspa n=2>8
<TR>
<TD>9
<TD>10
<TR>
<TD>11
<TD>12
<TD>13
<TD>14
<TD>15</TABLE>
19
Задание заголовков таблиц <CAPTION> </CAPTION>
По умолчанию заголовки центрируются и размещаются либо над <CAPTION align-'top">, либо под таблицей <CAPTION align-"bottom">.
1.8. Формы
Формы предназначены для получения отклика пользователя на предоставленную информацию и сбора данных о пользователе. После заполнения формы и запуска процесса ее обработки информация' из нее попадает в программу, работающую на сервере.
)1ля обработки большого количества откликов используются программы, поддерживающие Common Gateway Interface (CGT) и расположенные на сервере, в адрес которого поступают отклики.
Процесс создания формы состоит из двух этапов. На первом этапе создается сама форма, а на втором - сценарий CGI на сервере (будет расмотрено далее)
Обозначение документа как формы и определение границы использования тэгов, размещаемых в форме <FORM> </FORM>
Атрибут method устанавливает, как должны обрабатываться входные данные из формы, принимает значения get или post. Action указывает на URL программы, ответственной за обработку этих данных. Атрибут enctype определяет способ кодирования содержимого формы.
Пример:
<FORM method-post"
action^ 'mailto:yourname@your email. address">
Определение элементов управления формы <INPUT>
Основной атрибут name используется для определения наименования переменной поля.
Дополнительные атрибуты: maxlength ограничивает число символов, вводимых пользователем в текущее поле, size определяет размер видимой на экране области, занимаемой текущим полем: value обеспечивает начальное значение поля ввода.
Атрибут type-’text" используется для ввода небольшого количества текста (одна или несколько строк).
Пример (рис. 5):
<INPUT type="TEXT" name-'Hobby" maxlength=“35"
size="20“ value="Mmsk">
20
Рис. 5
P
Рис 6
Атрибут type-'checkbox" используется для вывода нескольких флагов. В нем [Minsk должны присутствовать атрибуты и name, и value.
Приме р(рис. 6):
<INPUT type="checkbox" name="send mail" value-'yes" checked>
Пример:
<ВР>Россия
<INPUT пате="Страна" type="checkoox" уа1ие="Россия">
Страны СНГ
<INPUT name-’Страна" type-'checkbox" value="CHr’>
Для атрибута type-'radio" - отображение радиокнопки - должны быть указаны атрибуты name и value.
Прим ер (рис. 7):
Visa
<INPUT type-"radio" name="payment_type" value-'visa"> Mastercard
<INPUT type-'radio" name="payment_type" value-'mastercard"> American Express
<INPUT type-'radio" name-'payment_type" value="AmE.x" checked>
Visa C Mastercard *' American Express
Рис. 7
Пример:
<BR>rion мужской
<INPUT name-'Пол" type=radio value="MyxcKoPi'>
Пол женский
<INPUT name-'Пог." type=radio уа1ие="Женский">
Если используется атрибут type-’image", то, когда пользователь щелкает мышью по изображению, браузер сохраняет координаты соответствующей точки экрана. Далее он «обрабатывает» введенную- в форму информацию. Должен содержать также атрибуты name и src.
Пример:
<ВР>Выберите точку
<INPUT type-'image" name-"point" src="image gif”>
Для организации ввода пароля без вывода на экран составляющих его символов предназначен атрибут type-’password" .
Пример:
<ВР>Подпись
21
<INPUT name="login">
Пароль
<INPUT type-'password" пате="Слово">
Прим ер:
<INPUT type-'password” name="password_box" maxlength-'35" size- '20 '>
Атрибут type="reset'' определяет кнопку Reset, по которой пользователь может щелкнуть мышью, чтобы вернуться к первоначальным значениям полей. Атрибут наше задает надпись на кнопке.
Пример:
<INPUT type-‘reset" value-'Очистить форму"> •
Пр и мер (рис. 8):
<INPUTtype-'reset" уа!ие="очистка"> ?ис- 8
Атрибут 1ype-"submit" опеределяет кнопку, по
которой пользователь может щелкнуть, чтобы завершить процесс редактирования. Данный элемент может содержать два дополнительных атрибута: name и value. Атрибут name хранит значение переменной поля в вашей форме. Атрибут value указывает наименование кнопки Submit.
Пример:
<BR>
<INPUT type="submit" уа1ие="Отправить сообщение">
Пример (рис. 9):
<FORM method-'get' или 'post"
action- 'mailto name@aomen ru" >
<INPUT type="submit" value-'послать">
</FORM>
Скрытые поля type-'hidden." позволяют включить в отправляемую форму значения атрибутов name и value, которые пользователь изменить не может.
Создание многострочных областей ввода текста
<TEXTAREA> </TEXTAREA>
Атрибут cols указывает число колонок (число символов), содержащихся в текстовой области. Атрибут пате определяет наименование поля. Атрибут rows задает количество видимых строк текстовой области.
Пример:
<BR><TEXTAREA пате=тема cols=38 rows=3></TEXTAREA>
Пр им ер (рис. 10):
<FORM>
<НЗ>Введи текст
Рис. 9
22
cTEXTAREA лате-'кпючевое слово" rows=5 cols=30> Область для ввода текста
</TEXTAREA>
</НЗ>
<INPUT type-'reset" value-'очистка">
</FORM>
Выбери нужное
] Первый
Списки с прокруткой и выпадающие меню <SELECT>
Атрибуты: multiple позволяет выбрать более чем одно наименование, паше определяет наименование объекта, size - число видимых пользователю пунктов списка.
Определения списка пунктов <OPTION>
' Атрибут selected используется для первоначального выбора значения элемента по умолчанию. Атрибут value указывает на значение, возвращаемое формой после выбора пользователем данного пункта.
При м ер (рис. 11):
<НЗ>Выбери нужное</НЗ>
<SELECT multiple>
<OPTION уа1ие="а">Первый</ОРТЮМ>
<OPTION value-'Ь">Второй</ОРТЮМ> OPTION value="c">Tpe™n</OPTION> OPTION
уа1ие="б">Четвертый</ОРТЮМ>
</SELECT>
При м ер (рис. 12):
<FORM action-’гпа1Ио:имя@домен.ги?
subject-'Commentfrom Home Page"
method-'post" enctype="text/plain"> Ваше мнение о сайте: <BR>
<SELECT пате="мнение">
<OPTION>xopoLuee </OPTION> <OPTION>Hennoxoe</OPTION>
<ОРТ1ОМ>так ce6e</OPTION>
<ОРТ10М>отстой</ОРТЮМ>
Второй
'Третий Четвертый
23
Электронная почта:
Рис. 12
<ОРТ10М>никакое </OPTION>
</SELECT>
<BR> Ваш личный комментарий <BR>
<ТEXTARЕА type="text" пате-'комментарий" rows-'5" cols="50">
</TEXTAREA>
<BR>Bauje имя: <BP>
<INPUT type="text" name-'имя" size="57"> <BR>
Электронная почта. <BR>
<INPUTtype-'text" name-'e-mail" size="52" maxlength="3G0"> <BR>
<INPUT type-'reset" value="C6poc">
<INPUT type="submit" \/а1ие="Послать">
</FORM>
Прим e p (рис. 13):
<FORM action="URL" method="post">
<TABLE>
<TR> <TD>
<LABEL for="fname">HMH</LABEL> Рис. 13
<TD>
<INPUT type="text" name="firstname" id="fname">
<TR>
<TD><LABEL Тог="1пате">Фамилия</ЬАВЕ1_>
<TD><lNPUT type="text" name="lastname" id="lname">
</TABLE> </FORM>
Пр и мер (рис. 14):
<FORM acticn="URL" method-'post">
< LAB EL for="firstname">l/1ivm:
</LABEL>
IIldH
Фамилия[
24
Имя: Г
Фамилия: I e-mail: [
Мужской
О Жен ский
Отправить 4 -.Ftep.ejt'j
Рис. 14
<INPUT type-’text" id="firstname"><BR>
<LABEL
Тог="1а81пагге">Фамилия:
<7LABEL>
<INPUT type-'text" id="lastname"><BR>
<LABEL for="emair>e-mair
</LABEL>
<INPUT type-’text" id="email"><BR>
<INPUT typa='‘radio" pame-’sex" value-'Мужской">Му>кской<ВР>
<1NPUT type-'radio" name="sex" уа1ие='7Кенский">Женский<ВР>
<INPUT type-'submit" уа1ие="0тправить"> <INPUT type-'Reset">
</FORM>
1.9. Создание Web-узлов и страниц в редакторе FrontPage
Режимы FrontPage
Редактор MS FrontPage условно состоит из четырех областей (рис. 15): панели инструментов (сверху), панели задач (в правой области экрана), представлений (в левой области экрана), основного окна. В нижей части экрана содержатся три вкладки для переключения режимов просмотра: Обычный - для редактирования документа в редакторе, HTML-код - для редактирования в коде и Просмотр - для просмотра вида страницы в браузере.
Рис. 15
25
Редактор FrontPage позволяет создавать структуру Web-узла автоматически, назначая ссылки между Web-страницами. Существует шесть режимов просмотра: Страница, Переходы, Гиперссылки, Отчеты, Папки и Задачи.
После создания нового Web-узла или открытия ранее созданного в режиме Переходы можно добавлять, удалять, переименовы
вать, копировать, открывать страницы командами из контекстного меню. Все создаваемые страницы пусты и выполняют функции заполнителей. Фактическую информацию в них можно добавить в режиме Страница. Для облегчения управления и навигации используются общие поля и навигационные панели. Навигационные панели (navigation bar) представляют собой наборы кнопок на каждой Wcb-
странице, которые позволяют переходить на другие страницы данного узла. Обычно они размещаются в той части Web-страницы, которая называется общими полями (shared border) и имеет одно и то
же содержание на всех страницах. После создания навигационной
панели автоматически
Рис. 16
добавляются гиперссылки в тех местах текущей страницы, где это необходимо. При перемещении, удалении или добавлении страницы FrontPage автоматически обновляет созданные им ссылки.
После создания Web-сзраницы можно изменить ее связи путем перетаскивания на новую позицию (рис. 16). В режиме Переходы каждая родительская Web-страница имеет кнопку Свернуть со знаком «миную» для того,
чтобы «спрятать» дочерние Web-страницы и сосредоточиться на оп-
ределенной части сайта В этом случае знак «минус» изменяется на занк «плюс» (рис. 17).
Режим Гиперссылок позволяет просматривать взаимосвязи между Web-страницами узла. Имеется две панели просмотра: список Web-страниц в левой панели и схема их взаимосвязей в правой (рис. ] 8). Степень детализации просмотра можно изменять. В этом режиме отображается схема связей между Web-
страницами и другими объектами Web-узла. Каждая страница или файл представлены в виде значка, названия, имени файла или URL.
Просмотреть информацию, свойства папок и файлов Web-узла
26
во FrontPage можно в режиме Папки. Режим Отчеты позволяет получить подробную статистическую информацию о узле.
Постоянная поддержка узла требует выполнения множества разнообразных задач, кроме того, над одним и тем же узлом могут работать несколько авторов. Режим Задачи предоставляет инструмент
отслеживания выполнения конкретных задач на страницах, ссылках или файлах.
fte:///C:/Nataly/lecturj^ i
».. |§| Класси l_class_niet.htm |*| Методические ук |Д| наследование
! Ц| New р^де 1 j- шаблоны metodik
Уровень 1 f^~|
вровень 2
New РатвД
Ге ///С- /Nat- Jy/lectures/C/IEemesti
Рис. 18
Форматирование текста и абзацев, оформление списков, вставка гиперссылок, таблиц и рисунков в Microsoft Frontpage выполняется так же, как в текстовом процессоре Word с помощью панели инструментов Форматирование и Стандартная. Для анимации текста или другого элемента Web-страницы используется команда Фор-мат/Эффекты/Dynamic HTML, которая открывает панель инструментов DHTML Effects.
Графические объекты и оформление Web-узла
Вставка и форматирование графических объектов выполяется также, как и в MS Word. Такие свойства, как альтернативные свойства изображения, текст, повтор видеоклипов, тип выравнивания, размер и другие можно установить в диалоговом окне Свойства изображения (аналогичная команда контекстного меню или Формат/Свойства из основного меню, а также при помощи панели инструментов Изображение).
Для создания графических карт или «горячих» областей изображения необходимо, во-первых, загрузить изображение. Во-вторых, определить «горячие» области. Для этого - выделите изображение, выберите инструмент Прямоугольная область панели инструментов Изображение и выделите область. Но окончании определения
27
размера «горячей» области откроется диалоговое окно Создание гиперссылки, в котором определите целевой ресурс гиперссылки. Для определения областей нестандартной формы можно воспользоваться инструментом Многоугольная область М
Создание фреймов
Для создания страниц с фреймами или рамками перейдите в режим Страница, в области задач Создание веб-страниц или веб-узла выберите ссылку Шаблоны страниц и откройте вкладку Страница рамок (рис. 19). Выделите один из предложенных шаблонов страниц рамок и назначьте страницы, которые будут отображаться в рамках.
Рис. 19
Для назначения с границ фреймов можно нажать кнопку Задать начальную страницу внутри рамки и выбрать страницу среди созданных. Чтобы создать новую страницу и назначить ее в качестве начальной для рамки, можно использовать кнопку Создать страницу внутри рамки. При редактировании страницы фреймов отдельные страницы можно выбирать просто щелчком мыши или командой из контекстного меню. Для изменения размера фрейма необходимо мышью перетащить рамку фрейма. Вызов команд контекстного меню Свойства фрейма и Свойства страниц позволяют менять размеры, поля, стили фреймов и т.п. Сохраняются фреймы последовательно, начиная с главной.
28
Создание форм
Форма может быть создана командой Файл/Создать/Страиица на основе имеющихся шаблонов,- Confirmation Form (Форма подтверждения), Feedback Form (Форма обратной связи), Guest Book (Книга посетителей), Search Page (Поисковая страница; и User Registration (Регистрация пользователя) и др. Кроме того, можно создать собственную форму в пошаговом режиме с помощью мастера Form Page Wizard.
При добавлении формы ? I в окно будет вставлена прямоугольная область, выделенная пунктирной линией. Внутрь прямоугольной области можно добавлять текст и управляющие элементы формы, такие как текстовые поля переключатели флажки К, раскрывающиеся списки кнопки И и т.д. Для изменения свойств введенного элемента по нему необходимо дважды щелкнуть мышью и в открывшемся окне установить новые параметры.
Для создания новой формы на той же странице поместите курсор вне зоны, ограниченной пунктирной линией и добавьте новую форму. В созданную форму можно добавлять элементы управления командой Вставка/Форма или щелчком по соответствующей кнопке панели инструментов Формы
, Вторым этапом создания, формы является настройка обработчика. Вызовите из контекстного меню диалоговое окно Свойства формы и выберите способ обработки данных: Send to Filename (Направить в файл), Send to E-mail (Отправить по электронной почте), Send to Database (Сохранить в базе данных), Send to Other (Другое) (рис. 20). После выбора способа обработки щелкните на кнопке Options (Параметры), чтобы открыть окно, соответствующее выбранному варианту. Диалоговое окно Options for Saving Results of Form (Параметры сохранения результатов формы) появляется в случае направления данных в файл или их отправки по электронной почте. Проверьте и. измени! е четыре вкладки этого диалогового окна: File Results (Запись результатов в файл), E-mail Results (Отправка результатов по электронной почте), Confirmation Page (Страница подтверждения) и Saved Fields (Сохраняемые поля).
! Темы
Функция Frontpage Темы обеспечивает единообразие оформления страниц: фоновый узор, цветовую схему, кнопки, панели навигации, шрифты, активную графику и другие элементы. Для выбора, из
29
менения и удаления темы используется команда Формат/Тема или кнопка Тема панели инструментов Вид.
Использование редактора ускорит и упростит создание страниц, однако в исходный код HTML будет добавлено много лишних тэгов, и размер файла значительно увеличится, а соответственно увеличится и время загрузки страниц.
Рис. 20
Публикация Web-узла
После создания Web-узла протестируйте его и только потом приступайте к публикации, например, на вашем компьютере или в локальной сети. Вызовите команду Файл/Опубликовать узел или нажмите кнопку Выберите сервер или папку на диске, куда будет скопирован Web-узел, введите его путь и название.
Другим средством, которое может быть использовано для публикации Web-узлов FrontPage на серверах, не имеющих расширений Frontpage, является Web Publishing Wizard (Програм-мы/Стандартные/Средства Интернета/Web Publishing Wizard), осуществляющий соединение с сервером и передачу файлов.
Для изменения прав доступа к активному Web-узлу используется команда Сервис/Безопасностъ/Права доступа, которая выводит на экран диалоговое окно Права доступа. Можно установить один из трех уровней доступа для пользователя, компьютера или группы
30
пользователей к каждому Web-узлу, имеющемуся на сервере.
Если требуется обеспечить доступ к Web-узлу другим пользователям, можно использовать Web-сервер, обеспечивающий поддержку FrontPage Server Extensions. В настоящее время разработано множество серверов, поддерживающих FrontPage, и один из них - Microsoft Personal Web Server (PWS). Когда сервер находится в рабочем состоянии, вы видите соответствующий значок на панели задач.
v Задание № 1
1. Создайте Web-сайт, состоящий из пяти страниц. На каждой странице должны быть гиперссылки и иллюстрации. Предлагаемые темы: БГТУ - кафедра ХХХХХХ; свой личный сайт; сайт о любимом виде спорта. Если у вас есть готовая тема, обсудите ее с преподавателем.
2. Откройте текстовый редактор «Блокнот». Наберите в нем структуру HTML-документа, которая представлена в табл. 1 (левый столбец).
3. Сохраните файл в своей папке, присвоив ему имя mdex.html
, 4. Зайдите в свою папку и откройте index.html. Вы увидите, как выглядит созданный вами файл в окне браузера.
5 Вернитесь к сохраненному файлу в «Блокноте». Внесите в него следующие изменения. Укажите в ней ваши фамилию, имя, кафедру. Используйте для этого форматирование текса. В строке <T1TLE> укажите: «Домашняя страничка (ваши имя и фамилия)».
6. Создайте страницу, состоящую из двух фреймов. В левом фрейме должен быть файл с содержанием Web-узла При нажатии на ссылку в правом фрейме должна открыться соответствующая страница. Оформите содержание в виде списка. Разбейте текст на абзацы. Задайте цвет основного текста; выделите заголовок.
7. Вставьте в свои странички: горизонтальную линию; фотографию, выровняв ее относительно текста; расположите, фотографии и текст с помощью таблицы.
8. На каждую страницу вставьте полоску картинок-гиперссылок (или один рисунок с «горячими» областями)
9. Составьте таблицу расписания. Задайте ширину таблицы, выравнивание, фон, заглавие и гиперссылки внутри таблицы.
10. Создайте страницу7 с формой для тематического тестирова
31
ния. Используйте поля ввода, списки, радиокнопки, флаги, командные кнопки.
11. Откройте редактор FrontPage. Отредактируйте структуру вашего узла в режиме Переходы, добавьте одну пустую страницу, проверьте гиперссылки страниц в соотвстсвутощем режиме.
12. Перейдите в режим Папки и измените элементы созданных Web-страниц: текст, графические объекты, расположение и количество фреймов, страницу с формой, примените одну из предлагаемых Тем. Наполните содержимым созданную пустую страницу (например, список литературы с гиперссылками на URL), Сохраните изменения.
2. КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕН CSS
2.1. Введение
До появления таблиц стилей форматирование документов HTML осуществлялось при помощи атрибутов, определяющих цвет, выравнивание, шрифты, размеры и т.д. (см главу 1). Естественно, что цри создании документов большого объема, такое форматирование требовало много времени и сил, особенно, если по прошествии определенного периода возникала необходимость смены дизайна страницы. В этом смысле, использование таблиц стилей стало выходом из положения. :-
Суть метода заключается в предварительном задании стиля для любого из элементов документа. Кроме того, в CSS (Cascading Style Sheets) реализована возможность задавать стиль в отдельном файле, подключаемом ко многим страницам сайта одновременно, и изменять их внешний вид редактированием одного лишь этого файла, равно как и внедрять стили внутрь форматируемых тэгов. Наличие перечисленных возможностей позволяет говорить о CSS как о средстве разделения логической структуры документа и формы его представления. Логическая. структура документа определяется элементами HTML-разметки, в то время как форма представления каждого из этих элементов задается CSS-описателем элемента.
Пример: Отображение текста курсивом <1>Огобразим текст курсу всм</1>
Л теперь переопределим стиль отображения для элемента разметки I:
<1 STYLE-'text decoration:underlinefont-style:normal;"> Отобразим текст курсивом</1>
В данной технологии HTML-разметка носит чисто декларативный характер. . '
Процесс создания узла с помощью CSS-можно формализовать и представить в виде последовательности действий:
• разбить все страницы проектируемого Web-узла на типы, например домашняя страница, навигационные, информационные, коммуникационные страницы и т.п.;
• разработать для каждого типа определенную логическую структуру (стандартный набор компонентов страницы);
• разработать стиль отображения каждого стандартного компо
33
нента страницы (CSS-описатель);
• сгенерировать содержимое страниц.
2.2. Способы применения и синтаксис CSS
Различают четыре способа применения стилей:
• переопределение стиля в элементе разметки;
• размещение описания стиля в заголовке документа в элементе STYLE;
• размещение ссылки на внешнее описание через элемент LINK;
• импорт описания стиля в документ.
Переопределение стиля. Под переопределением стиля в элементе разметки понимается применение атрибута STYLE у элемента разметки:
<Н1 STYLE-'font-weight:normal; font-style:italic; font-size: 10pt;">
Заголовок первого уровня</Н1>
Пример: Определение ширины и выравнивания элемента HR
<HR STYLE="width: 100px;">
Стили разработаны в первую очередь для управления отображением текста.
Элемент STYLE. Это основной способ внедрения каскадных таблиц стилей в HTML-документ. Помимо управления отображением элементов разметки, элемент STYLE позволяет описывать стилевые свойства элементов, которые можно изменять при программировании на JavaScript. Элемент STYLE дает возможность определить стиль отображения:
• для стандартных элементов HTML-разметки;
• для произвольных классов (селектор CLASS);
• для HTML-объектов (селектор ID).
Работа с селекторами в браузерах различных производителей может иметь различного рода нюансы.
Стандартные элементы разметки описываются в элементе STYLE следующим образом:
<HEAD>
<STYLE>
р {color:darkred;text-align:justify;font-size:8pt;} </STYLE>
</HEAD>
34
<BODY> ...
<P>
Пример применения стиля для стандартного элемента HTML </Р>
.. </BODY>
Теперь все параграфы документа будут отображаться стилем из элемента STYLE, если только стиль не будет переопределен. В STYLE можно определить стиль любого элемента разметки.
Ссылка на внешнее описание. Этот метод требует создания отдельного файла таблицы с основными стилями. Такой файл должен иметь расширение файл.сзз. Затем необходимо связать нужные документы с данной таблицей и поместить в связываемом документе где-нибудь между тагами <HEAD> и </HEAD> следующую строку:
<LINК rel=stylesheet href-'cpavtn.css" type="texVcss"> либо
<STYLE> ©import URL("0ann.css"); </STYLE>
Здесь важны значения атрибутов rel и type. Атрибут rel должен иметь значение stylesheet. Туре может принимать значения text/css или textjavascript. Атрибут href задает универсальный локатор ресурса (URL) для внешнего файла описания стилей.
ч Импорт описания стилей. Импортировать стиль можно либо внутрь элемента STYLE, либо внутрь внешнего файла, который представляет собой описатель стиля. Оператор импорта стиля должен предшествовать всем прочим описателям стилей.
Пример.
<HTML>
<HEAD>
</HEAD>
<STYLE>
BODY {color. #000000;}
H3 {color: ffOOOOff;}
A {color: #ffOOOO;}
</STYLE>
<BODY> содержимое
</BODY>
</HTML>
Синтаксис стиля не слишком сильно отличается от синтаксиса HTML и записывается следующим образом:
Селектор[,селектор[, ..]] {атрибут: значение.[атрибут:значение. ]}
J3 примере перечислены селекторы, для которых действует дан
35
ное описание стиля. Под селектором подразумевается элемент, для которого задается стиль. В качестве селектора можно использовать имя элемента разметки, имя класса и идентификатор объекта на HTML-странице. Атрибут определяет свойство отображаемого элемента, например, левый отступ партрафа (margin-left), а значение - значение этого атрибута, например, 10 типографских пунктов (10 pt).
/(ля определения общего стиля всех страниц необходимо прописать стили в файл описания стилей (а не в файлы HTML-страниц) для. всех элементов HTML-разметки, которые будут использоваться на страницах.
Селекторы могут описывать следующие элементы:
• тэги: Р {color red) - стиль применяется к тэгу <Р>;
• тэги потомков. Н1 В {color red} - стиль применяется к тэ1у <В>, находящемуся внутри заголовка первого уровня;
• дочерние тэги: <OL>LI {color: ted} - стиль применяется к тэгу <LI>, который является дочерним элементом для тэга <OL>;
• сестринские тэги: Н1+Н2 {margin-top. -5mm} - стиль применяется к сестринским тэгам <Н I > и <Н2>;
• атрибуты тэгов: DIV|CLASS=red] {color: red} - стиль применяется ко всем элементам, включенным в <I)IV>, у которых атрибут CLASS равен red;
• классы, red {color: red} - стиль применяется к любомым тэгам, у которых атрибут class равен red;
• псевдоклассы: A:visited {color- red } - стиль применяется к посещенному тэгу <А>.
В том случае, если свойств у тэга предположительно много, то их разделяют точкой с запятой: Н2 {color, red; font-size: 15pt}.
2.3. Группирование стилей и назначение классов
Существуют дополнительные методы, которые расширяют' функциональные возможности таблиц стилей. Стили можно сгруппировать путем создания логических групп, это позволяет уменьшить количество необходимых атрибутов и аргументов. Группирование таблиц стилей может происходить по одинаковым тэгам или по агри-бутам одного семейства. В случае группирования атрибутов между ними запятые не ставятся, исключение составляет атрибут семейства шрифта - перед ним запятая ставится.
36
Пример: Группирование по тэгам
Н1,Н2,НЗ {font-family: arial;font-size: 14pt}
Пример: Группирование
BODY
{margin-top: 12pt;
margin-right: 1Opt;
margin-left: 15pt}
по атрибутам одного семейства:
BODY {margin: 12pt 10pt 15pt}
Для того чтобы сделать работу более универсальной, можно создать несколько вариантов - классов свойств стилей и применять их к элементам поочередно. Сгруппировав стили по свойствам, необходимо дать им названия в виде расширения к элементу.
Пример: Создание и использование класса
Пусть необходимо опеределить
Н1 .left {text-align: left}
Н1.right {text-align: right}
далее в документе указывается либо <Н1 class=left>, либо <Н1 class=right>.
Аналогично можно создать универсальный класс и применять его потом к различным элементам:
, .left {text-align: left} right {text-align: right}
Затем в документе указывается либо <тэг class=left>, либо <тэг class=right>.
Пр и мер (рис. 21):
<STYLE> .test {color:white;background-color:black;} </STYLE>
<P CLASS="test">
Этот параграф мы выделим белым цветом на черном фоне
</Р>
... <Р>
Эту <А CLASS="test">
гипертекстовую ссылку</А> мы выделим белым цветом на черном фоне.
</Р>
Таким образом, в любом элементе разметки можно сослаться на
описание класса отображения. При этом совершенно необязательно, чтобы элементы разметки были однотипными. В примере к одному
37
Этот параграф мы выделим белым цветом на черном фоне___________
тшертекстовую ссыл:
выделим белым цветом на черном фоне.
Рис. 21
классу отнесены и параграф, и гипертекстовая ссылка в другом параграфе.
2.4. Идентификатор объекта
Объектная модель документа (Document Object Model) описывает его как дерево объектов, которыми являются сам документ, его разделы (элемент DIV), картинки, параграфы, приложения и т.п. Каждому из объектов можно давать идентификатор, или именовать, и затем обращаться к нему по имени или идентификатору.
Применение идентификатора объекта оправдано еще и в случае модификации атрибута описания стиля для данного объекта в его CSS-описании. Вместо двух описаний классов, которые отличаются только одним из параметров, можно создать одно описание класса и описание идентификатора объекта. Описание стиля для объекта задается строкой, в которой селектор представляет собой имя этого объекта с лидирующим символом
a.mainlink {color:darkred;text-decoration:underline:font-style:italic;}
#blue {color:#003366 }
<A CLASS=mainlink>ocHOBHaB гиперссылка</А>
<A CLASS=mainlink Ю=Ыие>модифицированная гиперссылка </A>
Интерпретация идентификаторов объектов в Internet Explorer и Netscape Navigator различна. При идентификации объекта Netscape Navigator обычно имеет дело с атрибутом name элемента разметки, а Internet Explorer — с атрибутом ID.
2.5. Наследование и переопределение
При использовании стилей действуют следующие правила старшинства стилей (рис. 22).
Сначала применяются стили браузера по умолчанию, которые переопределяются прилинкованными стилями (элемент LINK заголовка документа). Прилинкованные стили переопределяются описаниями стилей в элементе STYLE, которые в свою очередь переопределяются атрибутом STYLE в любом из элементов разметки.
Не все атрибуты стиля могут наследоваться. Например, «набивка» (отступ содержания элемента от его границ) элемента BODY не
38
наследуется вложенными в него элементами, а определяется по умолчанию или прописывается для каждого элемента отдельно. Алгоритмы наследования в Internet Explorer и в Netscape Navigator разные, поэтому для единства отображения элементов следует прописывать стиль по максимуму атрибутов.
<HEAD>
<BODY>
Элементы тела документа
Элементы заголовка документа
<Р> ч <R>
<qiv> <да>
<qiv> </dw>
<Ut> <UL>
Рис. 22
2.6. Относительные и абсолютные размеры. Единицы определения цвета
4 К относительным единицам измерения относятся: ет - размер, относительно размера буквы "m1'; ех - размер, относительно вертикального размера букв, соответствующего шрифта; рх - размер, использующий пикселы, относительно устройства вывода; % -размер, использующий процентные значения, относительно основного размера.
Пример:
Н1 { margin-left. 1 5em }
НЗ { margin-left: 2ех }
span {font-size: 16рх}
Р {font-size: 150%рх }
Абсолютные единицы измерения полезны только в том случае, когда известны физические параметры устройства вывода. К ним относятся: in - размер, в дюймах, 1 дюйм равен 2.54 сантиметрам; ст -размер, в сантиметрах: mm - размер, в миллиметрах; pt - размер, в точках, 1 точка равна 1/72 дюйма; рс- размер, в пиках, 1 пика равна 12 точкам.
Пример:
Н1 { margin: 1.5in }
39
Н2 { line-height: 5cm }
НЗ {word-spacing: 3mm }
H4 {font-size: 16pt}
H4 {font-size: 2pc}
Существуют следующие единицы определения цвета:
Н1 { color: background }
Н2 { color: red }
НЗ { color: #ff0033mm }
H4 { color: rgb(100%, 0%, 0%)}
H4 { color: rgb(255. 0, 125)}
2.7. Свойства
Свойства шрифта
Атрибут font-family определяет тип шрифта по следующим элементам: название {font-family: Times}, дополнительные {font-family: times,garamond,arial,hevletica}; название семейства шрифтов (Serif - с засечками, Sans Serif - без засечек, Cursive - курсивные, Fantasy - декоративные, Monospace - моноширинные {font-family: Serif}.
Атрибут font-size изменяет размер шрифта: {font-size: 12pt}. Атрибут font-style задает стиль начертания шрифта, может принимать значения: italic, normal, oblique. Атрибут font-variant позволяет установить размер начертания шрифта: {font-variant: normal}, может принимать значения: small-caps, normal. Атрибут font-weight определяет насыщенность начертания шрифта: {font-weight' normal}, может принимать значения: normal, bold, число в пределах от 100 до 900, extra-light, light, extra-bold и др. Атрибут font-face определяет загружаемый шрифт с расширением .eot: @font-face {font-family: имя; src: URL(http://domen.ru/nyTb/file.eot)}
Свойства текста
Атрибут word-spacing задает оформление интервала между словами: {word-spacing: normal}. Атрибут letter-spacing позволяет оформить интервал между символами: {letter-spacing: normal}. Атрибут white-space определяет оформление пробелов в тексте, может принимать значения: normal, pre, nowrap. Атрибут line-height устанавливает межстрочный интервал при помощи одной из абсолютных единиц: {line-heigh: 12pt}. Атрибут text-decoration предназначен для оформления начертания шрифта: none, underline, overline, italic, line-through. Атрибут text-indent указывает отступ текста при помощи одной из абсолютных единиц: {text-indent: 12cm}. Атрибут text-align позволяет изме
40
нить режим выравнивания текста, принимает значения right, left или center: {text-align: center}. Атрибут text-transform изменяет регистр шрифта, может принимать значения: capitalize, uppercase, lowercase.
Пример:
<Р STYLE="line-height:12pt; font-size: 12pt; color:darkred;">
Этот параграф мы набрали кеглем 12 pt. Line-height - задан в 12 pt. </Р>
Свойства обрамления
Блок текста обладает свойствами: высота (height), ширина (width), граница (border), отступ (margin), отбивка (padding), произвольное размещение (float), управление обтеканием (clear) (рис. 23).
Рис. 23
Атрибуты margin-left, margin-right, margin-top, margin-bottom определяют соответсвенно отступ от объекта слева {margin-left: auto}, справа {margin-right: 12pt}, сверху {margin-top: 12pt}, снизу {margin-bottom: 12cm} в пунктах, дюймах, сантиметрах, пикселах. Графически свойства представлены на рис. 24.
Аналогично атрибуты padding-left, padding-right, padding-top, padding-bottom устанавливают отступы от содержимого элемента до обрамления: {padding-left: 12рх}, {padding-right: 12cm}, {padding-top: 12in}, {padding-bottom: 12pt} (рис. 25).
41
. граница внутреннегоотступа
Рис. 24 Рис. 25
Атрибут border-style используется для оформления рамок вокруг объектов. Принимает значения dotted, solid, double, groove, insert, ridge, outset, none. Например: {border-style: groove},
Атрибуты border-color и border-width задают цвет и толщину рамок вокруг объектов соответсвенно.
Атрибут border-позиция определяет оформление вида и цвета рамок вокруг объектов выборочно с любой из сторон. Например: border-top-color, border-bottom-color, border-right-color, border-left-color, border-top-style, border-bottom-style и т.п.
Пример:
P{text-align:left; border-width.2px; border-coloridarkred; border-style solid;}
Свойства позиционирования
Атрибуты top и left позволяют задать соответсвенно у и х-координаты элемента в окне браузера значениями: n рх, п % , auto.
Атрибуты width и height устанавливают ширину и высоту элемента.
Атрибут position позволяет позиционировать элемент: absolute -когда значения left и top задаются относительно левого верхнего угла контейнера или страницы; relative - относительно текста, за которым следует элемент, static - относительно страницы статично.
Атрибут z-index указывает порядок перекрытия элементами друг друга при расположении их слоями, при этом элемент с более высоким индексом будет располагаться над элементом с низким индексом: {z-index1 2} (рис. 26). В случае если атрибут не задан специально, браузер присваивает более высокий индекс элементу, который в исходном коде описан позже.
42
Атрибут clear позволяет задать обтекание текстом объекта, например картинки, выровненной по левому или правому краю, присвоив ему одно из значений: left, right, both.
Атрибут overflow изменяет вид текста, переполнившего границы элемента. Ему присваивается одно из значений: non, clip, scroll. Например: {overflow: none}.
Атрибут float аналогичен атрибуту align: {float: left}.
Визуальные свойства
Атрибут cursor определяет вид курсора, присвоив ему одно из значений: crosshair, hand; pointer, move, e-resize, ne-resize, text, help, auto и др.: {cursor: hand}.
Атрибут filter позволяет задать фильтр для текста или изображения, при
своив ему одно из значений:
alpha, blur, chroma, dropshadow, flipv, fliph, glow, gray, invert, light, mask, shadow, wave, xray.
Атрибут visibility устанавливает видимость фрагмента документа, присвоив ему одно из значений:' inherit, none, visible: {visibility:
inherit}.
Атрибут list-style-position определяет вид текста внутри списка, если текст элемента списка по объему больше одной строки. Принимает значения outside и inside: {list-style-position: outside}.
Атрибут list-style-type предназначен для оформления маркеров в списках: {list-style-type: disc}, {list-style-type: square}, {list-style-type: circle}, {list-style-type: decimal}, {list-style-type:lower-roman} и др.
Пример: Наложение прозрачного слоя, эффект-тени (рис. 27),
<НТМ1_>
<HEAD>
<STYLE type="text/css"> body
{font-family: Verdana; font-size: 30pt, font-weight: bold;}
.d1
{position: absolute;
color: silver;
43
Рис. 27
top 10%;
left: 10%;}
,d2
{position: absolute;
color: navy;
top: 9%;
left: 9%;}
</STYLE>
</HEAD>
<BODY>
<DIV CLASS="d1">MoM публикации^ DIV>
<DIV CLASS="d2">Mon публикации</ DIV>
</BODY>
</HTML>
2.8. Примеры исходных кодов
Пример 1: Карточки пере- ..
крываются. Если нажать на гипер- -----------------л
текстовую ссылку «Переложить», то । • jyg
голубая карточка поползет вниз и Г~ - — — -
при обратном ходе ее положение от-
носительно красной карточки изме- Карточка голубого цвета нится (рис. 28).
<HTML>
<HEAD>
<LINK href-7ssi/style.css" рие 28
type="text/'css" rcl="stylesheet">
</HEAD>
<BODY leftmargin-'10" topmargin-’10" marginheight-'10" marginwidth="10">
<TABLE border="0" cellpadding="O"
cellspacing="0" width="100%" height="100%">
<TR><TD>
<SCRiPT>
function changeQ
{if(window.cocument.all.first.style zlndex>
44
window.document.all. second, style.zlndex)
{window.document.all. second, style. zlndex= window.document.all.first. style.zlndex;
window.document.all.first.style.zlndex--;}
else
{window.document.all.first.style.zlndex=
window.document.all.second.style.zlndex;
window.document.all.second.style.zlndex-;}
}
function move_down()
{flag=O;
if(window.document.all. second. style.pixelTop<0)
{flag=1; window.document.all.second.style.pixelTop+=10;
.. setTimeoutf’move down();",100);}
if(flag==O)
{change();
move_up();}
}
function move_up()
{ if(window.document.all.second.style.pixelTop>-120)
{window.document.all.second.style.pixelTop-=10;
setTimeout("move_up();",100);}
}
</SCRIPT>
' <DIV> ,
<DIV ID=first
STYLE="position:relative;top:0;left:0;width:295px;;height:160px;"> <IMG src-’cardr.gif’ border=0 width=295 height=160> </DIV>
<DIV ID=second STYLE-’position:relative;top:~
120;left:30;width:295px;;height:160px;">
<lMg src="cardb.gif" border=0 width=295 height=160>
</DIV>
<CENTER>
[<A href="" onClick="move_down();return false;">riepeno>KHTb</A>] </CENTER>
</DIV>
</TD>
</TR>
<TR>.<TD valign-’bottom" align-'center">
<HR><A href-'#" onclick="window.close();
return false;" class-'allnews">3aKpbiTb okho</A><BR>
</7D>
</TR>
<TABLE></BODY></HTML>
45
Пример файла style.scc.
p,b,div,span,td,body {color:#000000; font-family: Verdana, Anal, Helvetica, sans-serif; font-size: 10pt}
.head, .rur
{color; #990000,
font-weight: bold;
font-size: 10pt;}
headsub
{color: #330066;
font-weight: bold;
font-size: 10pt;}
help
{color’ #666666;
font-size :8pt;}
.date rtxt
{font-size:8pt;}
.example
{margin left:lOpx;
colordarkred;
font-family monospace:
font-size: 10pt;
texi-align:left}
inputs, select, mput, rexiarea {
<|-#if expr="$HTTP_USER AGENT = /MSIE/1| $HTTP_USER. AGEN Г = /Opera/7' ->
font-size: 8pt;
<!--#else -->
font-family: Verdana, Arial, Helvetica, sans-serif;
<!-#endif-> }
П p и м e p 2: В недренная
таблица стилей (рис. 29).
<HTML>
<HEAD>
<TITLE> Пример внедренной таблицы стилей</Т1Т1_Е> </HEAD>
<STYLE>
BODY
{ background: #ffffff;
color: #000000;
margin-top 120pt;
margin-left. 150pt;
Рис. 29
46
margin-right: 100pt}
H3
{ font: 14pt verdana;
color: #OOOOff}
P
{ font: 12pt times;
background-color: #OOffOO;
text-indent. 0 5in}
A
{color: tfffOOOO}
</STYLE>
<BODY>
<НЗ>Документ с внедренной таблицей стилей </H3>
<Р> В этом документе фон белый, шрифт черный;
поля 150 пикселов, 120 И'100; </Р>
<Р> Все заголовки третьего уровня будут выведены синим шрифтом Verdana высотой 14 пикселов. </Р>
<Р> Абзацы простого текста оформлены красной строкой
в 1/2 дюйма и выведены шрифтом Times высотой 12 пикселов
<А href="anyfile Мт">Ссылка</А>
красного цвета </Р>
</BODY>
</HTML>
ПримерЗ: Внешняя таблица стилей (рис. 30).
Файл style.css
Заголовок 14 пикселов Verdans синий
Абзац: шрифт 12 пикселов отступ текста 1/2 дюйма, выравнивание, справа и слева 0,75 дюйма
Ссылка (красная
Рис. 30
<STYLE>
BODY
{backgrou nd.#ffffff;
color #000000, margin-top .25in}
H3
{font: 14ptveraana;
color: #0000ff}
P
47
{font: I2pt times;
text-indent: 0.5in;
margin-left: ,75in;
margin-nght- 75in}
A
{color:#ff0000}
</STYLE>
Исходный код страницы
<HTML>
<HEAD>
<TITLE> Пример внешней таблицы стилей </TITLE>
<LINK rel=stylesheet href-'Style.css" type-'text/css">
</HEAD>
<BODY>
<НЗ>Заголовок 14 пикселов Verdana синий</НЗ>
<Р>Абзац: шрифт 12 пикселов отступ текста 1/2 дюйма, выравнивание справа и слева 0,75 дюйма</Р>
<А ЬгеТ-'апуА1е.Ь1т">Ссылка</А>красная
</BODY></HTML>
2.9. Создание н применение внешней таблицы стилей во FrontPage
Для создания таблицы стилей войдите в редактор FrontPage и выберите команду Файл/Создать/Страпица или веб-узел. В области задач Создание веб-страницы в поле Создание с помощью шаблона выберите ссылку Шаблоны страниц. В появившемся диалоговом окне откройте вкладку Таблицы стилей (рис. 31), выберите нужный тип таблицы стилей и нажмите кнопку ОК.
Для создания новой таблицы стилей выберите ярлык Обычная таблица стилей, после чего будет создан файл с расширением .css.
На экране отобразится панель инструментов Стиль Для
создания нового стиля выберите команду Стиль на пиктографическом меню или Формат/Стиль. В открывшемся диалоговом окне Стиль нажмите на кнопку Создать, которая открывает новое диалоговое окно Создание стиля (рис. 32). В поле Имя (для выбора) введите имя создаваемого стиля. В поле Тип стиля выберите, будет ли стиль применяться к целому абзацу (пункт Абзац) или только к знакам текста (пункт Знак). Кнопка Формат определяет характеристики нового стиля - шрифт, абзац, границы, нумерацию, размещение.
48
Рис. 32
Чтобы применить созданные стили к тексту в представлении Страница выделите текст или объект, который требуется изменить, в поле Стиль на панели инструментов форматирование выберите встроенный или определенный пользователем стиль, который нужно применить. Для изменения стиля объекта в представлении Страница в области Обычный выделите элемент страницы, который необходимо изменить. Выберите команду Формат/Свойства, в открывшемся окне нажмите кнопку Стиль. Чтобы применить стиль из внедренной таблицы каскадных стилей для страницы, щелкните поле Класс, а затем выберите значение в списке доступных имен классов. Чтобы при
49
менять стиль из внешней CSS, введите имя стиля в поле Класс. Чтобы применить имя кода, введите его имя в поле Код.
Для подключ ения/отключения таблиц каскадных стилей в меню Сервис выберите команду Параметры страницы, а затем - вкладку Совместимость. В ipymie Доступные технологии установите или снимите флаг CSS 1.0 (форматирование) или CSS 2.0 (расположение).
Прежде чем использовать внешнюю таблицу стилей во Frontpage, следует создать на.нее ссылку. Для этого необходимо открыть страницу или несколько страниц, выбрать команду Формат/ Ссылки на таблицы стилей, в результате чего будет открыто окно диалога Ссылка на таблицу стилей. В этом окне диалога перечислены созданные ранее ссылки на таблицы стилей. Для создания ссылки на другую таблицу нажмите кнопку Добавить. Для изменения порядка следования таблиц в списке можно использовать кнопки: Вверх и Вниз, для удаления - Удалить. Порядок таблиц определяет приоритет использования стилей при наличии конфликтов между ними (эффект каскадности). После того, как все требуемые таблицы стилей будут добавлены в список, выберите, следует ли связать их с выделенными страницами или со всеми страницами Web-узла. FrontPage автоматически создаст требуемый HTML-код на соответствующих страницах узла.
Задание № 2
1. В соответствии со структурой разработанного Web-узла создайте во FrontPage внешние описания стилей для каждой категории страниц с целью достижения единообразия в оформлении.
Определите стили следующих параметров:
- alignment (выравнивание): поля, отступы, автоперенос;
- borders (границы): стиль, цвет, ширина;
- colors (цвета): фон, передний план, фоновый рисунок, вложение, повторение, положение по вертикали и горизонтали;
- font (шрифт): первичный и вторичный шрифт, размер шрифта;
- text (текст): тип, стиль, вариант, трансформация, элементы украшения, отступ, высота строки, межсимвольный интервал, выравнивание, выравнивание по вертикали.
2. Модифицируйте исходный текст страниц: укажите ссылки на файлы *.css, определите соответствующие классы.
50
3. ОСНОВЫ JAVASCRIPT
JavaScript - это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента (JavaScript это не Java, Java - компилируемый, a JavaScript язык интерпретаций). Основная идея JavaScript состоит в возможности изменения значений атрибутов HTML-контейнеров и свойств среды отображения в процессе просмотра HTML-страницы пользователем. Это выражается в том, что можно, например,, открыть новое окно или выдать предупреждение, обработать простые диалоговые формы, выполнить поиск, реализовать графические, текстовые эффекты, создать меню, анимацию, игры, звуковые эффекты и др.
3.1. Объектная модель
Для создания механизма управления страницами на клиентской стороне было предложено использовать объектную модель документа. Суть модели в том, что каждый HTML-контейнер - это объект, который характеризуется: свойствами, методами, событиями.
Объекты с одинаковым набором свойств, методов и событий объединяются в классы однотипных объектов. Классы - это описания возможных объектов. Сами объекты появляются только после загрузки документа браузером или как результат работы программы.
Свойства. Многие HTML-тэги имеют атрибуты. Если рассматривать тэг <А>...</А> как объект, то атрибут href будет задавать свойство объекта. Можно изменить значение атрибута и, следовательно, свойство объекта: document.links[0].href-1ntuit.htm”;
Однако не у всех атрибутов можно изменять значения.-
Методы. В терминологии JavaScript методы объекта определяют, функции изменения его свойств. Например, с объектом "документ" связаны методы open(), write(), close(). Эти методы позволяют сгенерировать или изменить содержание документа.
События. Кроме методов и свойств объекты характеризуются событиями. Суть программирования на JavaScript заключается в написании обработчиков этих событий. Например, с объектом типа Button может происходить событие click, т.е. пользователь может нажать на кнопку. Для этого атрибуты контейнера INPUT расширены атрибутом
51
обработки события click - onClick. В качестве значения этого атрибута указывается программа обработки события, которую необходимо написать на JavaScript: <INPUT lype=bu1ton value-'Нажать" onClick=
"window.alertfПожалуйста, нажмите еще раз');">
Обработчики событий указываются в тех тэгах, с которыми эти события связаны. Наиболее часто используются: onLoad выполнение скрипта или функции при загрузке, onChange порождается при изменении значения элемента формы, onClick - при выборе объекта (button, checkbox и т.п.), onSelect - при выборе текстового объекта (text, textarea), onSubmit - при нажатии на кнопку Submit, onUnload -при переходе к другой странице.
3.2. Размещение кода
Можно выделить четыре способа функционального применения JavaScript:
• гипертекстовая ссылка (схема URL);
• обработчик события (handler);
• подстановка (entity);
• вставка (контейнер SCRIPT).
Схема URL - это один из основных элементов Web-технологии. JavaScript позволяет поменять стандартную программу на программу пользователя: <А href="javascript:JavaScript_KOfl"> ,</А> или <IMG sre-'javasenpt JavaScript _код>.
Пример: При нажатии на кнопку типа Submit в форме можно заполнить текстовое поле этой же формы (рис. 33).
<FORM name=f method=post action^
"javascriptwindow.
document.f.i. value=
'Нажали кнопку Click';void(0);">
j H вжал и Ki -i и п к у Cl i ck | Glfck | R.es&t
Рис. 33
<TABLE border=0>
<TR>
< TD> <INPUT name=i> </TD>
< TD> <INPUT lype=submit value=Click> </TD>
< TD> <INPUT type=rcset value~Reset> <7TD>
</TABLE>
</FORM>
Таким образом, при программировании гипертекстового пере
хода интерпретатор получает управление после того, как пользователь «кликнул» по гипертекстовой ссылке.
Профаммы-обработчики событий (handler) указываются в атрибутах контейнеров, с которыми эти события связаны.
Пример: При нажатии на кнопку происходит событие click:
<FORM>
<INPUT type=button value-'Кнопка" onClick= "win-dow.alert('intuit');">
</FORM>
Подстановка (entity) - это инструмент генерации HTML-страницы на стороне браузера. Подстановки используются в качестве значений атрибутов HTML-контейнеров. Код скрипта оформляют как HTML-комментарий. Браузеры, которые умеют работать со скриптами, об этом знают, а другие проигнорируют скрипты.
Пример: Как значение по умолчанию поля формы, определяющего домашнюю страницу пользователя, будет указан IJRJ. текущей страницы
<SCRIPT language="JavaScnpt">
<!- Это комментарий ...JavaScript-код .
function 1()
' { str - window.location href,
return(str.tength);} //->
</SCRIPT>
<FORM><INPUT value-’&{window. location, href}:" size="&{l()};"> </FORM>
<BODY> . Тело документа ... </BODY>
В качестве значения атрибута language у тэга начала контейнера указано значение "JavaScript". Данный атрибут можно опустить - значение "JavaScript" принимается по умолчанию, В заголовок помещают декларации общих переменных и .функций, которые будут затем использоваться в теле документа.
Пример: Размещение и использование функции
<НТМ1_>
<HEAD>
<SCRIPT>
function time scroll()
{d = new Date():
window.status =d.getHoursO+""+
d getMinutes()+"."+d getSecondsQ;
53
setTimeout('time_scroll();';500);}
</SCRIPT>
</HEAD>
<BODY onLoad=time_scroll()>
<CENTER>
<Н1>Часы в строке статуса</Н1>
В случае подстановки интерпретатор получает управление в момент разбора браузером (компонент парсер) HTML-документа. Как только парсер встречает конструкцию &{..} у атрибута контейнера, он передает управление интерпретатору JavaScript, который после исполнения кода это управление возвращает парсеру.
Контейнер SCRIPT - это развитие подстановок до возможности генерации текста документа JavaScript-кодом. При разборе документа HTML-парсер передает управление интерпретатору после того, как встретит тэг начала контейнера SCRIPT. Интерпретаз op получает па исполнение весь фрагмент кода внутри контейнера SCRIP ! и возвращает управление IITML-napcepy для обработки текста страницы после тэга конца контейнера SCRIPT. Контейнер SCRIP Г выполняет две основные функции: размещение кода внутри HTML-документа; условная генерация HTMI,-разметки - на стороне браузера.
Код можно разместить либо в заголовке документа, внутри контейнера HEAD, либо внутри BODY.
Пример: Код в заголовке размещается внутри контейнера SCRIPT. Декларируем функцию lime scroll!) в заголовке документа, а потом вызовем ее как обработчик события load в тэге начала контейнера BODY (onLoad=-time_scroll()) (рис. 34).
<HTML>
<HEAD>
<SCRIFT>
function time_scroll()
{d = new Date();
window.status =
d.getHousrs()+":"+d.getMinutes()+":"+d getSconds(); setTimeout('time_scroll();';500);
}
</SCRIPT>
</HEAD>
<BODY onLoaa=time_scroll()>
<CENTER>
<Н1>Часы в строке статуса</Н1>
54
<FORM> --------------------------------------
<input type=button Часы в строке статуса
value-'Закрыть
окно1' |
onClick= -----------------—--------------------
window.c!ose()> рис 34
</FORM>
</CENTER>
</BODY>
</HTML>
Пример: Контейнер SCRIPT размешают в теле документа.
Встроим в страницу локальное время (рис. 35).
<BODY> ..
<SCRIPT>
d = new Date();
document write("<BR>");
doc-ument.write("MoMeHT загрузки страницы:
"+d.getHours()+
":"+d getMinutes()+":"+d.getScconds()):
document.write("<BR>");
</SCRIPT>
... </BODY>
Mo ме йт з агрузки стр ан и ц ы: 14 13 47
Рис. 35
3.3. Управление окнами
Объектно-ориентированный язык программирования предполагает наличие иерархии классов объектов. В JavaScript такая иерархия начинается с класса объектов Window, т.е. каждый объект приписан к тому или иному окну. Для обращения к объекту или его свойству указывают полное или частичное имя этого объекта или его свойства, начиная со старшего в иерархии объекта, (рис. 36).
Браузер создает несколько массивов объектов. Каждый такой массив содержит все соотвествующие элементы документа. Нумерация в массивах начинается с 0. Для получения доступа к самому первом}7 изображению в документе нужно составить имя: document.images|0).
55
Window *----------Самый старший класс Javascript
(self, pacont, top)
navigator
plucjms[] mimelypesf]
Встроенные массивы браузера । п po гр а м м ы и подд е ржи вае м ые
MIME-типы)
—— frames!] *---------------
— location *---------------
—— history *----------------
—— document
Фреймы окна - сами окна Location - URL документа История визитов
М а с с и в ы
— forms[]
к У гл <5 н т а
—— anchors[] — links[]
—— images!J
—- applets!] — — embeds!]
Packages [J
elements!] buttons
- Checkbox
- File Up load
- Hidden
- Password
- Radio
- Reset
- Sei ecu options! J)
- Submit
- Text
- Textarea
Элементы формы одни из основных объектов Javascnpt-програмы
Рис. 36
Для облегчения доступа к объектам в HTML существует атрибут тэга name. Если <IMG src="1.gif' name="ris1" alt="images[1]"> то после такого определения тэга изображения можно обращаться к изображению l.gif двумя способами: document.images[1] или document ris1.
Рассмотрим некоторые методы управления окнами.
Метод alertf) позволяет выдать окно предупреждения.
Пример:
<А hfef="javascriptwindow.alert('EHWMaHMe')">r[oBTopvTTe запрос!
</А>
Метод confirm!) позволяет задать пользователю вопрос, на ко-
торый тот может ответить либо положительно, либо отрицательно.
Пример (рис. 37):
<FORM>
<INPUT type=button
value-'Что вы знаете о
JavaScript?"
onClick-’
if(window.confirm('3Hara Bce')==true)
{docu-
Что^вы эмаете>в JavaScript?
Рис. 37
56
ment.formsI0].elements[1].vaiue=
'Да';}
else
{document.forms[0].elements[1] vaiue=
'Нет'; };"><BR>
</FORM>
Метод promptQ позволяет принять от пользователя короткую строку текста, которая набирается в поле ввода информационного окна. Введенной пользователем строчке можно присвоить любую переменную и потом использовать ее в JavaScript-программе.
Приме р(рис. 38):
<FORM>
<INPUT type=button value-'Открыть окно ввода"
onClick="document.forms[C].elements[0].value= window рготрЦ'Вводите сообщение');'^
<INPUT size=30>
</FORM>
Рис. 38
Метод openQ предназначен для создания новых окон. В общем случае его синтаксис выглядит следующим образом:
open(''llRL","window_name","param, param,. ..".replace);
где URL - страница, которая будет загружена в новое окно’ window ваше - имя окна, которое можно использовать в атрибуте TARGET в контейнерах А и FORM. В табл. 3 приведено назначение параметров метода.
Пример: При нажатии на кнопку «простое окно» получаем окно со следующими параметрами: без мешо, ширина и длина 200 рх, поле location отсутствует, размер изменять нельзя, полосы прокрутки и статусная строка отсутствуют, системные кнопки браузера отсутствуют. При нажатии кнопки «сложное окно» получаем окно: без меню,
57
ширина и длина 200 рх, поле location отсутствует, размер изменять нельзя, есть полосы прокрутки, статусная строка и системные кнопки браузера (рис. 39).
Таблица 3
Параметры Назначение
replace позволяет при открытии окна управлять записью в массив history
param список параметров
width и height соответсвенно ширина и высота окна в пикселах
toolbar создает окно с системными кнопками боаузера
location создает окно с полем location
directories создает окно с меню предпочтений пользователя
status создает окно с полем статуса status
menubar создает окно с меню
scrollbar создает окно с полосами прокрутки
resizable создает окно, размер которого можно будет изменять
<FORM>
<INPUT type=button value-'Простое окно"
ullUiUft- Ли lUO«».UfJCi Ц duLrUi.lJialllx , ICOi i , u:: ico I Iw,
height=200,location=no menubar-no,resizable=no, scrollbars-no, status^no tooibar=no width=200');">
<!NPUT type=button \/а!ие="Сложное окно"
onClick-’window ореп('аоои1. blank’,'test2,,'directories-yes, height=2C0,locatfon=yes,menubar=yes,resizable-yes,
scrollbars=yes, status=yes,foolbar=yes.width=200');">
</FORM>
Рис. 39
58
Метод closeQ позволяет закрыть окно, например: текущее - win-dow.close();self.close(); родительское - window.opener.close(); произвольное (сначала нужно получить его идентификатор) - id=window.open(); ... id.close().
Метод focusQ применяется для передачи фокуса при открытии, закрытии и выборе окна, с которым он использовался.
3.4. Программирование форм
Обычно контейнер FORM и поля форм именованы, например:
<FORM name=f_name method=get action="javascript:void(0);">
<INPUT name=i_name sizE=30 maxlengt.h=30>
</FORM>
Поэтому в программах на JavaScript к ним обращаются по имени: window.document.f_name.i_name.value="TeKCTOBoe поле";
Не только к форме, но и к полю формы можно обратиться как к элементу массива:
window.document.forms[0].elements[0].value="TeKCTOBoe поле";
Свойства форм
' Свойство action отвечает за вызов скрипта (CGI-скрипта).
Приме р (рис. 40) :
<FORM method=post action-'javascriptwindow. alert ('использование cpopM');void(0);"> <INPUT type=submit value-‘JavaScript в action"> </FORM>
Void(0) отменяет перезагрузку документа, браузер не генерирует событие submit, т.е. не обращается к серверу при нажатии на кнопку.
Свойство method определяет метод доступа к ресурсам. На практике чаще всего используются методы GET и POST. По умолчанию установлен метод GET.
Свойство target определяет имя окна, в которое следует загружать результаты обращения к CGI-скрипту. Применение значения этого свойства внутри JavaScrip-программ не оправдано. Для загрузки внешнего файла в окно всегда можно применить метод window. ореп().
Пример: Организован цикл перебора имен фреймов. Если имя
59
совпадает с указанным, то фрейм считается выбранным. К полям обращаются по имени, но можно обращаться и по индексу массива полей формы:
for(i=1 ;i<id.frames.length;i++)
{if(id,frames[i].name==id.frames[O].document fO.sO
optionslia frames[0] document.fO.sO.selectedindexJ.text) {id.frames[i].document.open();
id.framesfi],document write("<CENTER>
Этот фрейм</СЕЬ1ТЕЕ>");
id.frames[i].document.close();
}
else
{
id.frames[i].document.open(),
id.frames[i].document.write("<CENTER>
He этот cbpeiiM</CENTER>");
id.frames[i].document.close();
}
)
Метод reset() (не обработчик события - onReset) позволяет установить значения полей формы по умолчанию. При этом использовать кнопку типа Reset не требуется.
Пример: По гипертекстовой ссылке происходит возврат в форме значения по умолчанию (рис. 41).
<FORM name=r>
<INPUT value-'Значение по умолчанию" size=3C maxlength=30>
<INPUT type=button vaIue-'Изменим текст в поле ввода" onClick-'document.r.elements[0].
value-Изменили текст';">
</FORM>
<А HREF="javascript:document.r.reset();void(0);">
Установили значение по умолчанию
</А>
|3начение по умолчанию
Установили значение по умолчанию
Рис. 41
60
Введите цифру или 6укву:[ь
Отправить данные
Microsoft Internet fypfet
Данные подтверждены
Рис. 42
Метод submit() позволяет проинициировать передачу введенных в форму данных на сервер. При этом методом submit() инициируется тот же процесс, что и нажатием на кнопку типа Submit.
Пример (рис. 42):
<FORM name=s method=post action-'javascript: window, alert ('Данные подтверждены'); void(0);"> Введите цифру или букву:
<INPUT size=1 maxlength=1>
</FORM>
<A
href="javascript:document.s.submit();">
Отправить данные</А>
События
Событие onReset позволяет контейнеру FORM переопределить функцию обработки события reset.
Пример:
<FORM onReset=
"javascriptwindow.alert
('Event Reset'); return false;"> x <INPUT value-'Значение по умолчанию">
<1NPUT type=reset уа!ие="Врсстановить">
</FORM>
В этом примере обработчик события reset возвращает логическое значение false. Это сделано для того, чтобы перехватить обработку события reset полностью. Если обработчик события возвращает значение false, то установка полей по умолчанию не производится.
Событие submit возникает при нажатии на графическую кнопку (тип image) или при вызове метода submit(). Для переопределения метода обработки события submit в контейнер FORM добавлен атрибут onSubmit. В зависимости от того, что функция вернет в качестве зна-' чения, данные либо будут отправлены, либо нет.
Пример: Функция test() возвращает значения .true или false. Соответственно, данные либо отправляются на сервер, либо нет (рис. 43).
<SCRIPT>
function test()
{if(parselnt(document.sub. digit. value).toString()=="NaN")
{window.alert("HeKoppeKTHbie данные в поле формы.");
61
return false;} else
{return true;}
}
</SCRIPT>
Рис. 43
<FORM name=sub onSubmit-'return test();" method=post action-'javascripLwindow alerlfflaHHbie подтверждены'); void(0);”>
<INPUT name~digit size=1 maxlength=1>
'INPUT type=submit 7а1ие="Отправить">
</FORM>
Поля ввода (контейнер INPUT типа text) являются одним из наиболее популярных объектов программирования на JavaScript.
Пример: Первое ноле формы - это поле ввода. Используя подстановку, мы присваиваем ему значение по умолчанию, а потом при помощи кнопки изменяем это значение (рис. 44):
<FORM>
Число гипертекстовых ссылок:
<INPIJT size=10 maxlenght=10 value="&{document. links. Iength};"> до момента обработки формы.
<INPUT type=button
value-'Число всех гипертекстовых ссылок в документе" onClick="window.document.forms[0].elements[0].value =document.!inks length;">
<INPUT type=reset уа1ие="Установить по умолчанию’^
</FORM>
Рис. 44
Реакция на изменение значения поля ввода обрабатывается посредством программы, указанной в атрибуте onChange. Обработчик onChange вызывается только тогда, когда ввод в поле закончен.
Списки и выпадающие меню являются важнейшими элементами интерфейса пользователя меню. Для реализации меню используются
62
поля типа select (контейнер SELECT, который, в свою очередь, вмещает в себя контейнеры OPTION). Для управления полями типа select в JavaScript существуют объекты Select и Option. Остановимся только на типичных способах применения их комбинаций.
Объект Option, в отличие от других объектов JavaScript, имеет конструктор. Это означает, что объект Option можно создать-
opt = new Option([ text, [ value, [ defaultSelected, [ selected ]]]]); где text - строка текста, которая размещается в контейнере <L1> (<Ы>текст); value - значение, которое передается серверу при выборе альтернативы, связанной с объектом Option; defaultSelected - альтернатива выбрана по умолчанию (true/false); selected - альтернатива выбрана (true/false).
Среди свойств Option нет свойства пате. К встроенным в документ объектам Option можно обращаться только как к элементам массива options[J объекта Select. Массив optionsQ - это свойство объекта Select. Элементы этого массива обладают теми же свойствами, что и' объекты Option. Они создаются по мере загрузки страницы браузером. Можно не только создавать новые объекты, но и удалять уже созданные браузером.
Пример: При загрузке страницы с сервера определено три альтернативы. Они появляются, если выбрать поле select. После нажатия на кнопку удаления последнего варианта остается только две альтернативы. Если еще раз нажать на кнопку удаления альтернативы, останется только одна альтернатива и т.д. В конечном счете, вариантов может не остаться вообще, так как после нажатия на эту кнопку-содержание поля SELECT не восстанавливается (рис. 45).
Первый вариант
Второй вариант
|Тре-ч1й вариант
Рис. 4 5
<SCRIPT language="JavaScript">
<!—
function loadPage(pageURL)
{location, href =
pageURL.options[pageURL.selectedlndex].*/alue}
//->
63
</SCRIPT>
<FORM name=fO>
<SELECT name=s onChange="loadPage(this)">
<OFTION value-'1.htm">nepBbiii вариант
<OPTION value="2.htm">BTopon вариант
«OPTION value="3.htm">TpeTHii вариант
</SELECT>
<INPUT type=button value-'Удалить последний вариант" onClick="document.f0.s0.options[document.f0.s0.length-1]
=null;">
<INPUT type-reset value=Reset>
</FORM>
Вариант: ESfiB * J Выбрали индекс. _o_
Рис. 46
JavaScript позволяет реализовать подменю путем программирования поля select. В примерах перепрограммирования options[] активно используется свойство объекта Select length. Оно определяет количество альтернатив, заданных для поля выбора. При помощи этого свойства можно удалять и восстанавливать списки.
Пример: Для обращения к элементам текущей формы используется имя Form. Оно указывает на объект Form, к которому принад-ЛСЛ’ХТГТТ'Т' ПГ^ГГСУ 1ч Г*'Т'Г Г» Г Т ТТ т/-О ТТН ПТ/МА/Л Тт Г\ ТТОЛ Л-О.ТТ/-О Дл/лчлххт т Т-Тлч ттпттттт ттт » < Z-K
CJKnr iiMJiv. juyvuo па oiv/pv/n vpvjpfviDi. па даппэш xviu-
мент он не определен, событие произойдет, когда будут выбираться варианты. К этому моменту поле уже будет определено (рис. 46).
<FORM> Вариант:
<SELECT name=sO
onChange="forrn.elements[1].value=selectedlndex;">
<ОРТЮМ>Один
<ОРТЮМ>Два
</SELECT>
Выбрали индекс:
<INPUT size=1 maxlength=1> </FORM>
Событие change наступает в тот момент, когда изменяется значение выбранного индекса в объекте Select.
Свойство selected объекта Option, может принимать два значения: истина (true) или ложь (false).
Свойство text представляет собой отображаемый в меню текст, который соответствует альтернативе.
Пример: Свойство text выводится в текстовое поле формы
<SELECT onChange= "form.elements[2].value=
form.elements[0].options [form.elements[01.selectedlndex].text;">
</SELECT>
64
При передаче данных от браузера к серверу в запросе передается текст выбранной опции, если не было указано значение в атрибуте value контейнера OPTION.
Обмен данными
Передача данных на сервер из формы осуществляется по событию submit. Это событие происходит при одном из следующих действий пользователя: нажата кнопка Submit; нажата графическая кнопка; нажата клавиша Enter в форме из одного поля; вызван метод submit().
Пример: Собственная программа обработки события submit. Если подтвердить необходимость перезагрузки страницы, она действительно будет перезагружена, а при отказе (cancel) вы вернетесь в текущую страницу без перезагрузки (рис. 47).
<SCRIPT>
function my_submit()
{
if(window.confirm
("Хотите перегрузить страницу?"))
return true;
else
return false;
}
</SCRIPT>
Рис. 47
<FORM>
<INPUT my_submit();">
</FORM>
type=submit
value=Submit onClick-'return
Если в программе вызывается метод submit, то данные из формы, к которой применяется этот метод, передаются на сервер.
Пример: Использование поля ввода и меню выбора. При выборе альтернативы пользователь сразу инициирует обмен данными с сервером. Событие submit в данном случае обработчиком событий не перехватывается, в отличие от нажатия Enter (рис. 48).
<FORM onSubmit="window.alert('CflenaHo');return false;">
<INPUT size=10 maxlength=10> <SELECT
onChange="form.submit();"> <ОРТЮМ>Вариант 1 <ОРТЮМ>Вариант 2
Рис. 48
65
</SELECT>
</FORM>
Cookies
Волшебные ключики, или cookies, не являются полями формы. Основная их функция - поддержка сеанса работы между клиентом (браузером) и сервером. Cookie — это небольшой фрагмент текста, который передается от сервера браузеру и потом может быть возвращен. Программа на JavaScript способна прочитать выставленное значение cookie и даже изменить его. Для этой цели используют свойство объекта document - cookie.
Пример: Cookies отображаются в виде одной большой строки со множеством значений
<FORM>
<INP'JT type=button value-'Показать Cookies"
onClick="window.alen(window.document.coc>kie);">
</FORM>
Свойство cookies документа можно переопределить.
Пример (рис. 49):
<SCR!PT>
function asign()
{document.ccokie="n1=3";
window alert(document. cookie);
}
</SCRIPT>
<FORM>
<INPUT type=button value-''Изменить n1" onClick="asign()">
</FORM>
Браузер рассматривает cookies как ассоциированный массив (хеш) и изменяет значение cookie по имени «ключика». Наконец, cookie можно удалить, точнее - деактивировать, указав время его действия.
Пример: В данном примере будем «удалять» cookie за счет параметра expires (времени, до которого cookie живет). Так как берется текущее время, то cookie исчезает из списка "ключиков". Многократно нажимая на кнопку, можно удалить все cookies для данной страницы
<SCRIPT>
function change_cookies()
66
{a = new Array();
c = new Date/):
a = document.cookie.split(';');
document,CGokie=a[0]+";
expires="+c.toGMTString()+l‘;" window.alert(document.cookie); }
</SCRIPT>
<FORM>
<INPUT type=button value-'Удален cookies" onClick="change_cookies()">
</FORM>
3.5. Программирование графики
Для реализации мультипликации используют метод объекта Window - setTimeout(). Существуют способы запуска мультипликации: onLoad() и onClickQ, onChangeQ. Наиболее популярный -setTimcout() при onl.oad(). Событие onLoad() наступает в момент окончания загрузки документа браузером. Обработчик события указывается в контейнере BODY:...<BODY cnLoad-’JavaScript_code">
Запуск и остановка мультипликации
Прим е-р. Запуск и остановка движения на странице по требованию пользователя
varflag1=0; //Рекурсивная функция
function movie() //прокрутки шести последовательных картинок {if(flag1==O)
{eval("document.images[0].src-clcck',+i+".gif;");
i++;
if(i>6) i=0;}
setTimeout("movie(),",500),
} . ’ ’
<BODY onLoad="movie();">
<FORM>
<INPUT type=button \zalue="Start/Stop" onClick="if(flag1==0) flag1=1; else flag1=O;"> </FORM>
Графика и таблицы
Одним из наиболее популярных приемов дизайна страниц Web-
67
Рис. 50
узла является техника нарезки картинок на части. Можно выделить следующие способы применения этой техники для организации навигационных компонентов страницы: горизонтальные и вертикальные меню, вложенные меню, навигационные графические блоки.
Пример: Определим многострочное меню с гипертекстовыми ссылками (рис. 50).
<PRE>
<IMG src-'tree.gif’ width=27 height=21 border-O
<A h ref-'javascript: vo id (0); ">
<IMG src="image1 gif'width=103
height=21 border=0>
</A>
<IMG src=tree.gif width=27
height=21 border-0>
<A href="javascript:void(0);">
<IMG src="image2 gif' w>dth=103
height=2l border=0>
</A>
<IMG src="tree.gif' width=27 height=21 border=0>
<A href="javascript:void(0);M>
<IMG src="image3.gif width=103 height=21 border=0>
</A>
<IMG src-'tree gif’ width=27 height=21 border=0>
<A href="javascriprvoid(0);">
<IMG src="image4.gif' width=103 heights 1 border=0>
</A>
</PRE>
Вертикальные и горизонтальные меню
Графическое меню удобно тем, что можно всегда достаточно точно расположить его компоненты на экране. Это позволяет и другие элементы страницы точнее располагать относительно элементов меню.
Пример: меню с подменю из линков и рисунков (рис. 51).
<HEAD>
<SCRIPT >
<!—
var head-'display""
function doit(header)
{
var head=header.style
68
if (head.display=="none") hoad.dispiay="" else
head.display-'none" } //-> </SCRIPT>
</HEAD>
<BODY>
<DIV>
Щелкните по заголовку меню для появления подменю.<BR> <BR>.
<НЗ siyle="cursor:hand"
onClick- 'doit(documentall[this.sourcelndex+1])"> ЗАГОЛОВОК 1
</H3>
<SPAN style-'displaynone'’>
< A href==- '#top">nHHK 1</A>
< A href-'#1ор">Линк 2</A>
< A 1тгеТ="#1ор">Линк 3</A>
</SPAN>
<H3 style="cursor:hand'1
onClick-"doit(aocument.all[th!s.sourcelndex+1])"> ЗАГОЛОВОК 2
</H3>
<SPAN style-"display:nonel,>
< A href="#top"><:img src- 'fift1.gif border-'0"></A>
< A href-"#top"><irng src="fift2.gif" bcrder-"0"></A>
< A href="#top"><img src= "fift3.gif border="0"></A> </SPAN>
</DtV>
</BODY>
Рис. 51
Пример: Реализация вертикального основе графических блоков текста (рис. 52).
<ТАВ1_Е border="0" cel!padding="Ob' cellspacmg="O" align="center">
<TR>
<TD>
<A href="javasoript:void(0); "onMouseover= "document.eventel. src ="corner.gif’;
меню, построенного на
Рис. 52
69
"onMouseout=
"document.eventel. src-'clear.gif
<IMG src="image1 gif' border="0"></A>
</TD>
<TD>
< A href="javascript:void(0);
"onMousecver="documenl eventel src -'corner.gif';
"onMouseout-'document eventel.src="clear.g!f';">
<IMG name="evente1" src-'ernpty.gif' border="0"></A>
<TD>
</TR>
<TR>
<TD>
< A href-"javascript:void(0);
"cnMouseover= "document.evente2.src -'corner git";
"onMouseout="document.evente2.src -'clear.gif
<IMG src="image2.gif' border-'0"></A>
</TD>
<TD>
< A href="javascript:void(0);
"onMouseover-'document evente2.src - 'corner.gif';
"onMouseout="document.evente2 src='clear gif:">
<IMG name-"evente2" src="clear.gif border="0"></A>
</TD>
</TR>
<TR>
<TD>
< A href-'javascript void(O);
"onMouseover ="document.evente3.src - 'corner.gif';
"onMouseout -'document evente3.src ="clear.gif';">
<IMG $rc="image3 gif' border="0"></A>
</TD>
<TD>
< A href="javascripf:void(0);
"onMouseover-'document.evente3 src - 'corner gif';
"onMouseout- 'document.evente3. src- 'clear gif';">
<IMG namE="evente3" src-'clear.gif' border="0"></A>
</TD>
</TR>
<TR>
<TD>
< A href="javascript'void(0);
"onMouseover -'document.evente4.src =''corner.gif';
"onMouseout - ‘document.evente4.src ="clear.gif';">
<IMG src="image4.gif" border-'0"></A>
70
</TD>
<TD>
<A href="javascript:void(0);
"onMouseover="document.evente4.src ="corner.gif";
"onMouseout="document.evente4.src="clear.gif';">
<IMG name="evente4" src="cleargif' border="0"></A>
</TD>
</TR> </TABLE>
При премещении курсора у соответствующего компонента, попавшего в фокус мыши, «отгибается уголок». В данном случае «уголок» - это самостоятельная картинка. Для того чтобы гипертекстовая ссылка срабатывала по обеим картинкам (тексту и «уголку»), применяются одинаковые контейнеры А, охватывающие графические образы.
Вложенные меню
Пример: Эффект вложенности достигается за счет изменения цвета. Подчиненность меню можно подчеркнуть его положением относительно основного меню. В этом случае для продвижения меню вниз необходимо зарезервировать место при помощи невидимых или видимых картинок. Используя слои, можно создать настоящее выпадающее меню (рис. 53).
• <SCRIPT>
function submenu(a)
{if(a==1) .
{document menuOO.src-’imagel.gif'; //1 (активна) document.menu10.src="image2.gif'; // 2 document.menuOI.src="image3.gif';
//1 пункт вложенного меню 1
document.menu02.src-"image4.gif';
И 2 пункт вложенного меню 1
}
if(a==2)
{document.menu00.src="image1 .gif'; И 2
document.menu10.src="image2.gif'; //1 (активна) document.menuOI.src="image3.gif';
И 1 пункт вложенного меню 2
document.menu02.src="image4.gif';
// 2 пункт вложенного меню 2
}
}
</SCRIPT>
<TABLE border="0" cellpadding="O" cellspacing="O" align="center">
71
<TR>
<TD><A href="javascript:void(0);"onMouseover="submenu(1); return true;">
<IMG name=menuOO src=image1.gif border=0></A>
</TD>
<TD><IMG name=menuO1 src=image3.gif border=0>
</TD>
</TR>
<TR>
<TD><A href="javascript:void(0);"onMouseover="submenu(2); return true;">
<IMG name=menu10 src=image2.gif border=0> ></A>
<HD>
<TD><IMG name=menu02 src=image4.gif border=0>
</TD>
</TR></TABLE>
Рис. 53
3.6. Примеры программ динамических страниц
Пример 1: Использование функции движения рисунка по экрану на основе JavaScript и управления слоями в CSS. Рисунок звезда перемещается по экрану слева направо под текстом «Это ближе» и над текстом «Это дальше» (рис. 54).
<НТМ1_> <HEAD>
<МЕТА http-equiv="Content-Type" content-'text/html;
charset=windows-1251 "> <TITLE>
Использование JavaScript и CSS
Использование JavaScript и CSS
Рис. 54
72
</TITLE>
<SCRIPT language=JavaScript> el-
ver tim; // таймер
function Move() // Шаг перемещения по экрану
{var obj = document.all["move"].style;
iffobj.posLeft < 500) obj posLeft +=2;
else clearlnterval(tim),
}
//->
</SCRIPT>
</HEAD>
<BODY bgcolor=white text=black
onload='.'tim=setlnterval('Move()',20)">
<Н2>Испопьзозание JavaScript и CSS</H2> <HR>
<DIV style="position:absolute; top:5C; left-140;
height: 130; width. 100;
background.green; font-size:60; color: white; z-index:3"> Это ближе
</DIV>
<DIV style="position:absoiute; top. 50; left.3G0, h
eight' 30: width: 100: background blue; font-size:30;
color:white; z-index:1">
Это дальше
</DIV>
<DIV id=move style-'position.absolute; top.80; left.O,
width: 125;z-index:2">
<IMG src=sun.gif width="125" heiaht="82" alt =""> </DIV>
</BODY> </HTML>
Пример 2: Страница тестирования пользователей. Предлагаются вопросы, необходимо поставить флаги напротив правильных ответов, ввести ответы в строки вода. При нажатии на кнопку «Оценка» выводится окно сообщений с результатами (рис. 55).
<HTML lang="ru"> •
<HEAD>
//Объявление внешнего файла для обработки результатов
<SCRIPT language-'JavaScript" src="common.js">
</SCRIPT>
<SCRIPT language=JavaScript>
<!-
var room = new Check!asks(4)
//->
</SCRIPT>
73
</HEAD>
<P> Нажмите кнопку <ЕМ>Сброс</ЕМ>, затем приступайте к решению.
<FORM>
<INPUT type=reset value-'Сброс" onclick="room.lni()">
<0L>
<LI>
Отметьте верные высказывания:<ВР>
<INPUT type="checkbox" name="C1">
JavaScript — это язык программирования<ВР>
<INPUT type="checkbox" name="C1">
Программы на JavaScript выполняет Windows<BR>
<INPUTtype-'checkbox" name="C1">
Программы на JavaScript выполняет 6pay3ep<BR>
<INPUT type-’button" value-'Проверить" onclick=
"if (this.form.C1[0].checked && !this.form.C1[1].checked && this.form.C1 [2].checked ) room.Answer=room.Yes;
else room.Answer=room.No;
room.Check(this.form, 1);">
<INPUT type-'text" size="14" name="result1" readonly>
<BR><BR>
<LI>
Напишите название тэга HTML,
который задает начало скрипта. <BR>
<INPUT type-'text" size="8" maxlength-'6" name="T1" onkeypress-'if(event.keyCode==13) {ret = false;
if(this.value.toLowerCase()=-script') ret = true;
room.Answer = ret ? room.Yes : room.No;
room.Check(this.form,2);
}"><BR>
<INPUT type-’button" value-'Проверить" onclick=
"if (this.form.T 1 ,value.toLowerCase()=-script') room. Answer=room. Yes;
else room.Answer=room.No;
room.Check(this.form, 2);”>
<INPUT type-'text" size="14" name="resuit2" readonly> <BR><BR>
<LI>
Напишите название функции JavaScript, которая создает всплывающее информационное okho.<BR>
<INPUT type-'text" size="8" maxlength="5" name="T2" onkeypress="if(event.keyCode==13) {ret = false;
74
if(this value.toLowerCase()=-alert’) ret = true.
room Answer = ret ? room.Yes room No;
room.Check(this.form,3),
}"><BR>
<INPUT type="button" value-’Прсверить" oncltck=
"if (this.form.T2.value == 'alert') room.Answer=room.Yes;
else room.Answer=room.No,
room Check(this.form, 3);">
<INPUT type="text" size="14" name="result3" readonly>
<BR><BR>
<LI>
Как вы думаете, эта страница построена<ВР>
<INPUT type-'radio" checked name-'R1">
средствами классического HTML<BR>
<INPUT type-'radio" name="R1">
с помощью JavaScript<BR>
<INPUT type-’button" value-'Проверить"
onclick="if (this.torm.R1[1],checked) room.Answer =
room Yes;
else room.Answer = room.No;
room Check(this.form, 4);">
<!NPUT type-'text" size="14" name="result4" readonly> BR><BR>
</0L>
<P> Чтобы увидеть результат работы, нажмите кнопку Оценка <BR><BR>
<SCRIPT language-JavaScript>
<!-
if (MsNavigator) document.write
("<IMG src="bonus.gif" width-113' height-41 m+ "border='0' alt="name- BQNUS'"+ "onMouseUp ='room.Bcnus();
'"+"onMcuseDown ="Src!mg(BONUS, Bonus2_);
'"+r'onMouseOver -”Srcimg(BONUS, Bonus1_);
'"+"onMouseOut ="Srclrng(BONUS, Bonus_);’>" );
else document.write
('<A href="javascript void(0)'"i-
oncl:ck=-"Srclmg('BONUS,Bonus2_J;
room Bonus();"'+' onMouseOver-'Srclmg(BONUS, Bonus1_);
'"+' onMouseOut=''Srclmg(BONUS, Bonus_);
">’+'<IMG src="bonus.gif”
width="113" height="41 "*+’border="0" alt=""name="BONUS"> </A>');
//->
75
</SCRIPT>
</BODY>
</HTML>
Текст внешнего скрипта common.js
var MsNavigator = (navigator.appName=
-'Microsoft Internet Explorer")
&& (navigator.appVersion >= "4.0");
function ShowTextlnBrouser(name)
{ var newWin = window.open();
newWin.document.write(name.elements[0].value);
}
// Объект CheckTasks для проверки решений
//---------
1) Создать объект до входа в зачетный класс
//2) По событию click на кнопке type="reset" вызывать метод lni();
//3) Решение задачи с № i фиксировать методом Check(form, i);
//form - ссылка на форму
//4) Общую оценку выводить методом Bonus();
//---------Конструктор объекта
// num - число задач
// rez - основа имени строки, в которую выводится сообщение
И о правильности выполнения i-ro задания.
// Можно не задавать rez, тогда по умолчанию он будет "result".
function CheCkTasks(num, rez) // свойства объекта
{this.Num = num; //число заданий
this.Task = new Array(); // если задача решалась - true
this.Error =0; //число ошибок
this.Yes = "верно"; // верный ответ
this.No = "есть ошибки"; //неверный ответ
this.Answer; // результат проверки ответа
this.Rez = rez ? rez:"result"; //основа имени тэга с сообщ.
// методы объекта this.lni =_lni;
this.Check = _Check; this.Bonus = _Bonus;
this. Ini();
>
j
// начальные установки
// проверка задания
// вывод оценки
И вызов начальных установок
//--------начальные установки
function _Jni()
{this. Error = 0; // ошибок нет
for(var i=0; i<this.Num; i++) this.Taskfi] = false;
} // задачи не решались
//----------form _ это ссылка на форму
// Задачи нумеруются от 1 до this.Num
76
function _Check(form, ntask) И Защита от неверных данных
{if (ntask < 1 || ntask > this.Num)
{а1егЦ"Неверный номер задачи: "+ntask); return;
}
this.Task[ntask-1] = true; // задача решалась
if (this.Answer == this.No) this.Error++; // ошибки суммируются var temp = this.Answer;
eval("form.result"+ntask+".value=1emp");
}
//---------Вывести оценку. Алгоритм определения оценки:
// 5 - ошибок нет; 4 - ошибок меньше 2/5 от числа задач
// 3 - ошибок меньше 1/2; 2 - в остальных случаях
function _Bonus()
{var result =
var bonus, var ntask;
И Проверим, все ли задачи были решены
ntask = 0;
for(var i=0; i<this.Num; i++)
if (this.Taskfi]) ntask++;
else {result += eval(i+1)+ ",";}
// задачи решены гее, вычисляем оценку
if (ntask == this. Num)
{if ((this.Error) bonus = 5;
-else if (this.Error < 2*this.Num/5) bonus = 4;
else if (this.Error < this.Num/2) conus - 3, else bonus = 2;
alert("\nBauja оценка;"+Ьопиз+"\л"+"Числс- ошибок:”+ this.Error);
}
// задачи решены не все, сообщаем какие не решались else
{var str=resuit;
if (result.charAt(result.length-2) ==",")
str = result.substring(0,result.length-2);
a!ert("\nHe решены задани\я:\п" + str);
}
}
//.-------
function Copyr()
{var okno=:,scrollbars=1 ,fullscreen=O.status-0,toolbar=0, top=0,left=0,width=620,heignl=440,resizable=1";
window.open("copyr.htrn",null,okno);
}
77
var Bonus_ = new lmage(); Bonus .src = "bonus.gif;
var Bonus1_ = new lmage(); Bonus1_.src = "bonusl .gif';
var Bonus2_ = new lmage(); Bonus2_.src = "bonus2.gif;
function Srclmg(Namelmg, NewSrc)
{Namelmg.src = NewSrc.src}
Рис. 55
Пример 3: Программа конструкции экзамена. Вопросы и от веты выводятся через окна ввода. Выставляется оценка (рис. 56-58).
<HTML lang="ru">
<HEAD> <МЕТА http-equiv="Content-Type" content="text/html; charset=windows-125Г>
78
<Т1Т1_Е>Экзамен </TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<Н1>Экзамен </H1> <HR>
<SCRlPT>
<!—
// Счетчик верных ответов
var bonus = 0;
// Номер вопроса
var num = 1;
// Вопрос
var question;
И 1-й вопрос.
question = "Вопрос " + num + ". Верных ответов = " + bonus +"AnJavaScript это язык программирования Да или Нет?"; if(prompt(question, "Да") == "Да") bonus++; num++;
// 2-й вопрос.
question = "Вопрос " + num + ". Верных ответов = " + bonus +".\пПрограммы на JavaScript выполняет Windows Да или Нет?";
if(prompt(question, "Да") == "Нет") bonus++; num++;
// 3-й вопрос.
question = "Вопрос" + num + ". Верных ответов = " + bonus +"ЛпПрограммьГна JavaScript выполняет браузер Да.йли Нет?";
if(prompt(question, "Да") == "Да") bonus++; num++;
// 4-й вопрос.
question = "Вопрос" + num + ". Верных ответов = " + bonus +".\пТэг <SCRIPT> задает начало скрипта Да или Нет?"; if(prompt(question, "Да") == "Да") bonus++; num++;
И 5-й вопрос.
question = "Вопрос" + num +". Верных ответов =" + bonus +".\пКак вы думаете, эта станица построена средствами классического HTML Да или Нет?";
if(prompt(question, "Да") == "Нет") bonus++;
// Показ результата в окне alert.
if(bonus < 2) bonus = 2;
alertf'Bauja оценка за работу: " + bonus);
//->
</SCRIPT >
<Р>
Экзамен закончен!
</BODY>
</HTML>
79
Рис. 56
Рис. 57
Рис. 58
Пример 4 : Изменение картинки через гипертекстовую ссылку в одном окне (рис. 59).
<HTML>
<HEAD>
<Т1Т|_Е>Просмотр кнопок</Т1Т1_Е>
<SCRIPT>
<!-
function l_image(a)
{document.images[Oj.src-a }
//->
</SCRIPT>
</HEAD>
<BODY text="#OOOOOC‘' bgcolor="#FFFFCC" link="#0000EE" vlink="#551A8B" alink="#FF0000">
<H1>
<FONT color-'#0С0С99">Просмотр картинок кнопок</ЕОМТ> </H1>
<CENTER>
<TABLE cols=2 width="100%" >
<CAPTION>
<FONT COLOR="#000099" size=+2>
Образцы кнопок</ЕОМТ>
</CAPTION>
<TR> <TD>
<UL>
80
<LI>
< A href-'javascript:IJmage('next1 .gif )">
Кнопка следующий</А> </LI>
<U><A href="javascript:IJmage('explorer.gif)">
Кнопка Explorer</Ll>
< LI><A href="javascript:l_irnage('prev1 .gif)">
Кнопка предыдущий</1_1>
<LI>
< A href="javascript:l_image('home1 .gif)">
Домашняя страница</1_1>
<LI><A href="javascriptljmage('add.gif)">
Дополнительно</1_1>
<LI><A hrcf="javascript:l_image('addback.gif)">
Вернуться</1_1>
</UL>
</TD>
<TD align=center valign=center>
<IMG src="explorer.gif name-'tool" >
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Просмотр картинок кнопок
Образцы кнопок
Кнопка следующий
Кнопка Explorer
Кнопка предыдущий Домашняя страница Дополнительно Вернуться
Рис. 59
Пример 5: Листание и прокрутка картинок. Вся страница размечается как таблица, состоящая из одного столбца и двух ячеек. В первой ячейке размещаются три кнопки управления просмотром картинок «Вперед», «Старт/Стоп», «Назад»; во второй - картинки (рис. 60).
81
<SCRIPT> <!--pictures = new Array() for(i=0;i<8;i++)
{pictures[i] = new lmage() if(i==O) pictures[i].src= "explorer.gif" if(i==1) pictures[i].src = "next1.gif" if(i==2) pictures[i].src = "home1.gif if(i==3) pictures[i].src = "add.gif' if(i==4) pictures[i].src = "addback.gif" if(i==5) pictures[i].src = "prevl .gif if(i==6) pictures[i].src = "donus.gif }
n=0; flag=O;
function next_image() {if(flag==0)
{n++;if(n>6) n=0; docu-
ment.images[O].src = pictures[n].src } г J
function back_image()
{if(flag==0) Рис. 60
{ n-; if(n<0) n=6;
document.images[0].src = pictures[n].src }
}
function scroll_image()
{if(flag==1) { n++; if(n>6) n=0;
document. images[0].src= pictures[n].src }
setTimeout("scroll_image()",1500);
}
function start_stop()
{if(flag==0) flag=1;
else flag=0 }
//->
</SCRIPT>
<TABLE cols=2 width-’100%" >
<CAPTION>
<FONT color- #000099" SIZE=+2> Образцы кнопок</РО1ЧТ>
82
</CAPTION>
<TR> <TH>
<FORM name=form1>
<INPUT name=f type=button value=Bnepefl
onClick=next_image()>
<INPUT name=ss type=button уа!ие="Старт/Стоп"
onClick=start_stop()>
<INPUT name=b type=button value=Hasafl onClick=back_image()>
</FORM>
<ЯН>
</TR>
<TR>
<TH align=center valign=center>
<IMG src="add.gif" name-'tool" > </TH>
<fTR>'
</TABLE>
Пример 6: Текстовые эффекты - по циклу увеличивающийся и уменьшающийся текст (рис. 61).
<HTML>
<SCRIPT language=javaScript>
<!-
var thissize=O;
var step=1;
var ,rnaxfontsize=400;
var textcolor="AAAAAA";
var textfont- Arial";
var message-'Текстовый эффект";
function stretch()
{if (thissize<0)
{step=1;
thissize=O}
if (thissize < maxfontsize)
{ if(document.all)
{zoomer.innerHTML=
"<SPAN style='font-family:"+textfont+"; .
font-size:"+thissize+"px;
color:"+textcolor+'">"+message+"</SPAN>"
; }
if(document.layers)
{document zoomer.document.write
("<SPAN style='font-family:"+textfont+";
font-size:"+thissize +"px;
color:" +textcolor +'">"+message+"</SPAN>")
83
document close(),
step++;
thissize=th issize+step;
var timer=setTimeout("stretch()",50);
}
else
{clearTimeout(timer);
var intermezzo=setTimeout("snrink()",1000)'
}
}
function shrink()
{if (thissize > -0)
{if(document.all)
{zoomer.innerHTML=
"<SPAN style=*font-family:"+textfont+";
font-size:"+thissize+"px;
color:"+textcolor+'">"+message+"</SPAN>"
}
if(document. layers)
{aocument.zoomer.document, write
("<SPAN style='font-family "+textfont+";
font-size."+thissize+"px;
color:" +textcolor+'">" +message +”</SPAN>") document.close();
}
if (step >= 2) step-step-1;
else step-1;
thissize=thissize-step;
vartimer=setTimeout("shrink()",50);
}
else
{clearTimeout(timer);
var intermezzo=setTimeout("stretch()",1000);
}
}
//->
</SCRIPT>
<BODY bgcolor-'#FFFFFF" onLoad="stretch()">
<DIV id="zocmer" style-'position absolute:
visibility:visible;top: 10px; left: 10px">
</DIV>
</BODY>
84
Текстовый э
S S
4 я
Рис. 61
Пример 7: Титры - записанный в msg массив текста, который появи1яется и исчезает побуквенно (рис. 62).
<HTML>
<HEAD>
<SCRIPT language-'javascnpt”>
<!-
var delay=100; // Задержка
var nextm-0, Рис. 62
var msg=new Array // Массив текста ( 'Один', 'Два', 'Три', 'Четыре');
function start_ticker()
{do_ticker(msg[0], 0. 1);} function do_ticker(text, pos, dir)
{var out-<FONT> ,
<FONT color=blue>
<FONT size=10>'+text.substring(0, pos)+'</FONT> </FONT> </FONT>';
v if(navigator.appName=="Netscape")
with(document.ticker.document) { open();
— write(out);
closed;
}
else ticker mnerHTML=out;
pos+=dir;
\ if(pos>text. length)
setTimeout('do_ticker('"+text+"','+pos+',4-(-dir)+')', delay*10);
else
{if(pos<0)
{if(++nextm>=!msg.length) nextm=0;
text=msg[nextm]; dir=-dir;
} setTimeout('do_ticker('"+tcxt+'",'+pos+,,'+dir+')', delay); }}
//->
</SCR!PT>
85
</HEAD>
<BODY bgcolor="#OFFOOO" text="#OOOOOO" link="#OOOOFF" vlink="#7F007F" alink="#FFOOOO" onload="start_ticker()"> <DIV id="ticker" style-'position: absolute, top: 100;
left: 1OO;"> </DIV>
</BODY>
</HTML>
3.7. Создание скриптов во FrontPage
Для того чтобы HTMI,-страница поддерживала скрипты необходимо выбать команду Сервис/IJ ара метры страницы. В открывшемся окне на вкладке Совместимость установить флажок JavaScript. Команда Сервис/Макрос/Редактор сценариев озкрывает редактор сценариев (рис. 63).
Рис. 63
Для создания функции обрабоки выбирается объект и событие из выпадающего списка (рис. 64).
86
Рис. 64
F onblu:
Автоматически в <TJEAD> добавится тэг <SCRIPT> с атрибутом "clientEventHandlers" или "serverEventHandlers". Меняется аргумент language на JavaScript в окне Properties (рис. 65) и вводится текст функции.
j Properties
|ctiefrtEventHai <script>
j(Idj .dentEventHandlersVBS
jsaipt
javascript
vbs vbscript xml
Рис. 65
Задание № 3
1. Создайте навигационное графическое (анимированное, с выпадающим подменю) меню на главной странице. При выборе пунктов меню должны открываться или новые окна с различными параметрами, или страницы в выбранном фрейме. Меню строится по аналогии с примерами.
2. Добавьте на страницы текстовые и графические эффекты.
3. Создайте программу для обработки формы регистрации и ввода информации пользователем.
--4. Создайте страницу фотоальбома с кнопками прокрутки картинок в обоих направлениях.
5. Разработайте страницу с тематическим тестом или электо-ронным вариантом экзамена (по аналогии с одним из предложенных примеров) и выставлением итоговой оценки. Для реализации вариантов ответа используйте флаги и стоки ввода. Создайте программу на JavaScript с функциями обработки ответов.
87
4. ПРОГРАММИРОВАНИЕ В CGI
Common Gateway Interface (CGI) - спецификация обмена данными между прикладной профаммой, выполняемой по запросу пользователя, и ПТТР-сервером, который запускает эту программу.
Программ}’, работающую по данной спецификации совместно с Web-сервером, принято называть шлюзом, скриптом или CGI-программой. Протокол разработан таким образом, чтобы можно было использовать любой язык программирования (С, Perl, shell), который может работать со стандартными устройствами ввода/вывода. А это умеет даже сама операционная система, поэтому часто если не требуется сложный скрипт, его можно просто сделать в виде командного файла.
4.1. Передача данных серверу
Различают два типа запросов к CGI-скриптам: по методу GET и по методу POST. В свою очередь, запросы по методу GET подразделяются на запросы по типам кодирования: isindex и 1'orm-urlencoded, а запросы по методу POST - multipart/form-data и fbrm-urlencoded.
В запросах по методу GET данные от клиента (все что стоит за «?») передаются скрипту в переменной окружения QUERY STRING.
Пример:
Ьйр://.../сд|-Ь1п/1ез!.сд|?имя=значение&имя1=значение1&,
В запросах по методу POST данные от скрипта передаются в потоке стандартного ввода скрипта. При передаче через поток стандартного ввода в переменной окружения CONTENT LENGHT указывается число передаваемых символов.
Чтобы шлюз мог узнать какой метод используется для передачи данных, сервер создает переменную среды REQUEST METHOD, в которую записывает GET или POST.
4.2. Струкаура CGI-программы
Программа должна полущить данные, обработать их и вывести результат работы в наглядной форме, Весь процесс получения данных от Web-сервера можно представить следующим образом:
88
1. Получить все необходимые переменные окружения Наиболее важной на данном этапе является REQUEST METHOD.
2. Получить данные от сервера в зависимости от метода передачи:
Если (REQUESTJMETHOD="GET”), то
Взять данные из переменной окружения QUERY STRING Иначе
Если (REQUEST_METHOD^"POST>), то
Проанализировать переменную QUERY_STRJNG
Получить длину данных из CONTENT LENGTH
Если (CONTENT_LENGTH>0), то
Считать CONTENT_LENGTH байт из sdtin как данные.
Иначе
Бывать сообщение об ошибке и выйти.
3. Декодировать все полученные Оанные и, если надо, разбить их на пары "имя—значение" в удобной для программы форме.
Программирование на С
Считывание данных через поток ввода должно осуществляться в динамическую память, или во временный файл.
При мтгр г Программа на С считывает данные из потока ввода в статическую память
char cgi_data[1000];
long contentJength=atol(getenv('’CONTENT_LENGTH")); fread(cgi_data,content_length,1,stdin); ..
В данной реализации возможно переполнение, поэтому более приемлемо динамическое выделение памяти.
Пример:
char *cgi_data;
long content_length=atol(getenv("CONTENT_LENGTH"));
cgi_data=(char*)ma!loc(content_length);
if (cgi_datal=NULL)
fread(cgi_data,content_length,1,stdin); ...
После получения данных от сервера их надо еще декодировать.
Пример: Декодирование данных из буфера. Используя функцию getparam, можно получить какой-нибудь параметр.
/* Возвоащает верхний регистр символа*/ char upperchar(char ch)
{ if ((ch>='a') && (ch<-z'))
89
{ch=!A'+(ch - 'a');
return ch;
}
else
return ch;
};
/* Переводит из Hex в Dec*/
char gethex(char ch)
{ ch=upperchar(ch);
if ((ch>='0')&&(ch<= ’9')) return (ch-'O’);
if ((ch>='A')&&( ch<='F')) return (ch-'A'+10);
};
/* Ищет и возвращает параметр с именем name, в buffer.
/* Если параметр name не найден, возвращает NULL.
Вызов:
message = getparam(post_buffer,"message=");
char *getparam(char *buffer,char ‘name)
{ if (buffer==NULL) return NULL;
char *pos;
long leng=512,i=0,j=0;
char h1,h2,Hex;
char *p=(char *)malloc(leng);
pos=strstr(buffer,name);
if (pos == NULL) return NULL;
if ((pos'=buffer) && (*(pos-1 )!='&')) return NULL;
pos+=strlen(name);
while ((*(pos+i)!='&')&&( *(pos+i)!=’\0'))
{ if ( *(pos+i)=='%')
{ i++;
h 1 =gethex(*(pos+i));
i++;
h2=gethex(*(pos+i));
h1=h1«4;
*(p+j)=h1+h2;
} else
{if (*(pos+i)!='+') *(p+j)=*(pos+i);
else *(p+j)='';
};
i++; j++;
if 0 >= leng) p=(char*) realloc(p,leng+20); leng+=20;
};
if (j < leng) p=(char*) realloc(p,j+1);
*(p+j)='\O’;
90
return p;
};
Программирование на Perl
Язык программирования Perl является основным средством разработки CGI-скриптов для Web-узлов. У программы нет жестко заданной структуры. Она исполняется интерпретатором Perl. При программировании CGI-скриптов в Unix интерпретатор вызывается из того же файла, который содержит программу, в данном случае это первая строка с указанием полного пути:
#!//usr/local/bin/perl
print "Привет, Perl."
Perl предоставляет довольно разнообразный инструментарий для работы, которую условно можно разделить на четыре части: работа с файлами, работа с каталогами, работа с каналами (конвейеры), работа с сетевыми ресурсами через сокеты (пара «IP-адрес - номер порта»).
4.3. Обработка и вывод информации
' Внутри программы размещается код обработки информации (запись, сортиройка, вычисления). -Единственная тонкость -организация возможности многопользовательской работы скрипта. После этого, для вывода данных скрипт должен сообщить браузеру тип выводимых данных и как с ними работать. Это действие производит заголовок.
Существует два типа заголовков. Первый осуществляет переадресацию браузера на другой ресурс в сети:
Location: URL-адрес ресурса
Под URL-адресом может быть заранее заготовленная страница. ответа - страница или файл на чужом сервере.
Пример:
Location: http://www.mjk.msk.ru/~dron/88.gif
Второй тип заголовка описывает данные, которые будет выводить непосредственно скрипт. Задает их тип, длину и другие вспомогательные параметры. Самый простой заголовок записывается в виде:
Content-type: данные
Данные состоят из двух составляющих: типа и формата. Тип
91
принимает значение: application - данные для какого-либо приложения; audio - аудиоданные, например RealAudio; video -видеоданные, например MPEG или AVI; image - изображение; text -текст. Далее через слэш указывается формат данных.
Пример: Заголовки
Content-type: text/html
Content-type: image/gif
Content-type: video/mpeg
Заголовок может включать в себя вспомогательные параметры, Content-length - длина содержимого, Expires - время существования в кэше и т.д. Каждый параметр указывается в отдельной строке и заканчивается переносом строки \п.
Пример:
Content-type: image/gif
Content-length: 1052
После того как заголовок сформирован и отправлен, надо отправить пустую строку, чтобы отделить его от основных данных. Если она не будет отправлена, то сервер выдаст ошибку.
Сервер и скрипт общаются между собой через стандартные потоки ввода/вывода и переменные среды.
Переменные среды
GATEWAY 1NTERFАСЕ - указывает версию интерфейса CGI, который поддерживает сервер (CGI/1.1); SERVERNAME - содержит IP-адрес сервера или его доменное имя (www.mjk.msk.ru); SERVER_PORT - номер порта, по которому сервер получает http-запросы (80); SERVER_PROTOCOL - версия протокола HTTP, который использует сервер для обработки запросов (НТТР/1.1); SERVER_SOFTWARE - название и версия программы сервера (Apache/1.3.3 (Unix) (Red Hat/Linux)).
AUTH_TYPE - тип авторизации, используемой сервером (Basic); CONTENT FILE - путь к файлу с полученными данными (c:\website\cgi-temp\103421.dat); CONTENTLENGTH длина
переданной информации в байтах (10 353); CONTENT ТУРЕ - тип содержимого, посланного серверу клиентом (text/html); OUTPUT FILE- файл для вывода данных; QUERY_STRING-содержит данные, переданные через URL (http://.../cgi-bin/1.cgi?d=123&name=kostia), тогда переменная QUERY_STRING будет содержать d=123&name=kostia); REMOTE_ADDR - содержит IP-адрес пользователя пославшего запрос шлюзу (192.168.1.36);
92
REMOTEHOST - содержит доменное имя (d6032.dialup cornell.edu или dial57127.mtu-net.ru); REQUEST METHOD - содержит метод передачи данных шлюзу: GET или POST; REQUEST LINE - содержит строку из запроса протокола HTTP (GET /cgi-bin/1 .cgi HTTP/1.0); SCRIPT_NAME - содержит имя вызванного скрипта (l.cgi.').
НТТР_АССЕРТ - перечисляет все типы данных, которые может получать и обрабатывать клиент (*/*,image/gif,image/x-xbitmap); HTTP_REFERER - содержит URL страницы, с которой был произведен запрос (http://www.mjk.msk.ru/~dron/index.html);
HTTP USER AGENT - содержит в себе название и версию браузера (MyBrowser/1.0 (MSIE 4.0 Compatible, Win98)).
4.4. Обработка форм
Посылка письма
Пример: В данном примере отправляется значение поля формы nl по электронной почте абоненту user@bstu.by. После заполнения поля и выбора кнопки «Отправить», браузер откроет окно программы почтового клиента, а само значение поля исчезнет.
<FORM action=mailto:user@bstu.by>
<INPUT name=n1 value="none1">
<INPUT уа1ие="0тправить”>
</FORM>
Это происходит по той причине, что сообщение состоит из двух частей: заголовка и тела. В том виде, в каком использовался контейнер FORM, метод доступа к ресурсу не указан и, следовательно, по умолчанию выбирается GET. Кроме того, в примере мы применяем схему URL mailto. Она соответствует спецификации протокола SMTP (Simple Mail Transfer Protocol). В этой схеме, в отличие от схемы HTTP, расширенный путь после доменного имени стандартом не предусмотрен.
Пример: Получим тело сообщения, укажем метод POST. Сообщение должно уйти абоненту без открытия окна почтового клиента.
<FORM method=post action=mailto:user@bstu.by>
<INPUT name=n1 уа1ие="Поле1">
<INPUT уа1ие-'0тправить">
</FORM>
Отправка файла
93
Типовая задача, которая возникает при создании архивов публикаций, заключается в необходимости отправить на сервер файл, содержащий публикацию. Первый способ - это электронная почта.
Пример: Протокол - SMTP. Кроме заголовка необходимо еще и тело сообщения, поэтому метод - POST. Для того чтобы обеспечить составное тело сообщения, применяется тип кодирования содержания - multipart/fbrm-dalа (по умолчанию используется метод кодирования - application/x-www-form-urlencoded).
<FORM enctype=multipart/forrn-data
method=post action=mailto.user@bstu.by>
<INPUT type=file name-file>
<INPUT type=submit value- 'Опубликовать"»
</FORM>
Кардинальное решение заключается в вызове скрипта, который примет файл и выполнит его преобразование, разместит файл на сервере.
Пример:
<FORM enctype=multipart/form-dala method=post action=file.cgi>
<!NPUT type=file name=file>
<INPUT type=submit уа1ие-'Опубликовать">
</FORM>
Преимущество такого подхода заключается в том, что файл присоединяется к сообщению как двоичные данные. Механизм передачи файлов от клиента к серверу получил название File-upload. В отличие от обычной обработки запросов типа form-urlencoded при File-upload необходимо выполнить последовательно три основные группы действий: выделить части составного сообщения, найти описатели каждой из частей сообщения, выделить и обработать содержание каждой из частей составного сообщения.
Разобрать составное сообщение нс так легко. Поэтому целесообразнее использовать библиотеки готовых модулей для работы в режиме File-upload.
Задание № 4
1. Организуйте на одной из созданных страниц обратную связь с посетителями сайта. Добавьте окно ввода сообщения. Разработайте скрипты отправки по электронной почте и сохранения информации
2. Разработайте скрипт закачки на ваш сайт файлов пользователя (книги, публикации, контрольные, курсовые).
94
5. ПОНЯТИЯ ASP, PHP, SSI, XML
Active Server Pages (ASP) - активные серверные страницы -это HTML-c границы с дополнительным программным кодом для динамического построения страниц на основании данных, полученных из БД SQL. Для работы с ASP необходим Windows NT Server, Internet Information Server (ITS) и ASP, MS SQL Server. Для серьезной разработки нужен InterDev из MS Visual Studio.
Пример: Создание страницы Testi.asp.
< %@ Language=VBScnpt %>
<HTML> “
<HEAO>
<META name-'GENERATOR"
Content-'Microsoft Visual Studio 6.0">
</HEAD>
<BODY>
<P> </P>
</BODY>
^-/LJ-TRJI "’‘/II I IVIL-^
Тэг <% %> используется для обозначения любого сценария, который должен исполняться сервером. Клиент никогда не видит кода внутри этого тэга. Тэг <•%= %> предназначен для записи HTML-кода в том месте передаваемого документа, где находится этот тэг.
Пример: Присваиваем переменной intCount значение 10.
< % intCount = 10%>
Пример: Вставляем в HTML-документ значение переменной intCount. На экране мы увидим число 10.
< % = intCount %>
ASP-сервер различает сценарии для клиента и сервера но атрибуту runat. Если значение равно "server", то ASP анализирует, компилирует и выполняет данный сценарий. В противном случае сценарий передается клиенту.
Пример: Сценарий выполняет сервер.
<SCRIPT language-'vbscript" runat="server"></SGRIPT>
Пример: Запрос к БД.
< %@ Language=VBScript %>
< НТМ1_> ’
<HEAD> <МЕТА name-’GENERATOR"
content-'Microsoft Visual Studio 6.0"></HEAD>
<BODY>
<P>ASP по шагам</Р>
95
<%.
'Строка обращается к объекту Server и создает соединение:
Set Conn = Server.CreateObject("ADODB.Connection") 'Строка открытия сессии использует глобальную переменную, 'объявленную в другом файле
Conn.Open Session("DBConnectionString")
‘Открываем RecordSet с именем RS, используя для этого SQL 'запрос к БД
DoubleInfo и таблице TJnfoRub.
Set RS = Conn.Execute("select * from DoubleInfo..TJnfoRub") %>
'Начинаем цикл no RecordSet
<% Do While Not RS.EOF %>
'Выводим значение поля FldStrName таблицы TJnfoRub
<%=RS("FldStrName")%>
'Начинаем новую строку для следующей записи
</br>
<%
'Переходим к следующей записи
RS.MoveNext
'Конец цикла по записям
Loop
'Закрываем RecordSet
RS.Close
'Закрываем соединение
Conn.Close
%>
</BODY>
</HTML>
PHP - это скриптовый server-side язык программирования. Это не CGI, но может его заменить. РНР очень похож на ASP (существует конвертор asp2php), но приспособлен к UNIX-подобным системам и чаще всего используется с Web-сервером APACHE, хотя может работать и с MS IIS, и в принципе с любым другим Web-сервером. Кроме того, РНРЗ является объектно-ориентированным.
Чтобы выложить на сайт новую статью или новость, можно просто добавить запись на SQL сервере с помощью MS Access, а при запросе страницы пользователем соответствующий php-скрипт достанет из SQL то, что надо и выдаст оформленную, готовую страницу.
Пример: Передача списка файлов в текущем каталоге.
<HTML>
<BODY>
96
Список файлов:
<?
$dir = opendir(".");
while($file = readdir($dir))
echo "$file<BR>";
closedir($dir);
?>
</BODY>
</HTML>
Код, помещенный в теги <? и ?> не передается браузеру, а выполняется на стороне сервера. Выдается то, что выводит команда echo. PHP похож на С, или Perl, или Basic.
Пример: Работа с MySQL. Выводит таблицу tabl из базы данных db на локальном MySQL сервере.
<?
$conn=mysql_connect("127.0.0.1");
if (mysql_select_db("db",$conn))
$res=mysql_query("select * from tabl", $conn); whiie(($data=mysql_fetch_row($res)))
echo("$data[0] $data[1]\n");
}
' else echo "Error!\n";
?>
Для PHP существуют четыре способа отделения его от общего кода HTML (имеется в виду для интерпретации):
• <? echo ("SGML инструкции\п"); ?>
<?php echo("XML документ^"); ?>
• <script language="php">
echo ("специально для FrontPage");
</script>
• <% echo ("ASP-стиль"); %>
• <%= $variable; # Комментарий "<%echo .."
Server Side Include (SSI) - технология, позволяющая Web-серверу включать в текст HTML-страниц любой другой текст: содержимое текстовых файлов или, например, результат работы CGI-скриптов (который, как известно, обычно оформляется в виде HTML-текста). Происходит «включение» непосредственно перед передачей текста HTML-страницы браузеру пользователя.
Пример: На каждой странице сайта надо поместить список доступных разделов. Для этого создается отдельный текстовый файл и
97
заносится HTML-код списка разделов (sections.html). В страницы сайта, в том месте, где должен находиться список разделов, вставляется следующая инструкция: <!--#include virtuak"sections.html"->
Когда кто-либо захочет просмотреть эту страницу, сервер заменит инструкцию <#include> содержимым файла sections.html. Если изменится файл sections.htmlто все страницы, где использовался <#include>, обновятся автоматически.
Вместо имени обычного текстового файла в инструкции <#include> можно указывать имя CGI-скрипта. В этом случае сервер сначала выполнит CGI-скрипт, а потом вставит результат работы скрипта в текст WWW-страницы. Из-за использования шаблонов типа вышеуномянугого sections.btml WWW-страницы будут меньшими ио объему.
Функционирование SSI обеспечивается сервером, поэтому при просмотре HTML-файлов с локального жесткого диска, браузер проигнорирует директивы SSL Кроме того, сервер должен быть настроен для поддержки SSI (на некоторых бесплатных серверах SSI не разрешается).
extensible Markup Language (XML) - это расширяемый язык разметки документа; он позволяет представлять в текстовом формате сложные, иерархические объекты.
Тело документа XML состоит из элементов разметки (markup) и непосредственно содержимого документа - данных (content). Так же как и в JITML, инструкции, заключенные в угловые скобки, называются тэгами и служат для разметки основного текста документа.
Простейший XML-документ может выглядеть так:
<?xml version="1.0"?>
<list_of_items>
<item id="1"><first/>riepBbiM</item>
<item 10="2">Второй <виЬ_Иет>подпункт 1</sub_item></item>
<item id="3">TpeTnii</item>
<item id="4"><last/>riocneflHHM</item>
</list_of_items>
Таким образом, XML-документ - это иерархическая структура, которая содержит в себе описание структуры данных и сами данные, /удучи текстовым файлом, он не зависит от операционной системы и может создавагься при помощи любых языков программирования.
Язык может применяться для обмена данными между разными нрофаммами, организациями, а также между базой данных и Интернет-приложением.
98
ПРИЛОЖЕНИЕ 1
URL бесплатного размещения Web-узлов
http://narod.ru http://www.newmail.ru http://www.agava.ru http://www.freeserwers.com http://www.gocities.com http://www.spree.com http://www.tripod.com http://www.xoom.com http://www.bizland.com http://www.fsn.net http://www.crosswinds.net http://www.virtualave.net http://www.az.ru http://www.tam.ru
http ://www. Sunday ,ru http://www.halyava.ru http://www.zk.ru http://www.lgg.ru http://www.netcity.ru http ://www.hotmail ,ru http://www.ussr.tohttp://webservis.ru http://home.vibor.ru http://windoms.sitek.net http://www.intergrad.com http://home.c99.ru http://www.artnet.ru/generator
99
ПРИЛОЖЕНИЕ 2
Специальные символы CER
Числовой код Именная замена Символ Описание
" " 11 Кавычка
& & & Амперсант
< < < Меньше
> > > Больше
  Неразрывный пробел
¡ ¡ i Перевернутый восклицательный знак
¢ ¢ Цент
£ £ £ Фунт
¤ ¤ a Валюта
¥ ¥ ¥ Йена
¨ ¨ Умляут
© © © Копирайт
« « « Левая угловая кавычка
® &гег: Зарегистрированная торговая марка
± (fcplusmn; Плюс или минус
», » » 11равая угловая кавычка
100
ЛИТЕРАТУРА
1. Храмцов П.Б., Брик С.А., Русак А.М., Сурин А.И. Основы web-технологий // Интернет-университет информационных технологий. - М.: ИНТУИТ.ги, 2003.
2. Будилов В.А. Практические занятия по HTML. Краткий курс. - М.: Наука и техника, 2001.
3. Крамер Э. HTML: наглядный курс web-дизайна. М.: Диалектика, 2001.
4. Spainhour S., Eckstein R. Webmaster in a Nutshell. 2nd Edition. - O'Reilly, 1999.
5. Паттерсон Л. Использование HTML 4.0. Ясно, кратко, надежно. - M.: Диалектика, 1999.
6. Муссиано Ч., Кеннеди Б. HTML и XHTML. Подробное руководство. - М.: Символ-Плюс, 2002.
7. Пэтчетт К., Райт М. CGI/Perl: создание программ для Web. -Киев: BHV, 2000.
8. Ливенгстон Д., Браун М. CSS и DHTML. Web-профессионалам. - Киев: BHV, 2001.
9. Айзекс С. Dynamic HTML. -СПб.: BHV, 2001.
ч 10. Штайнер Г. HTML/XML/CSS: Справочник. - Лаборатория Базовых Знаний, .2001.
И. Коржинский С.Н. Настольная книга Web-мастера: эффективное применение HTML, CSS и JavaScript. - М.: КноРус, 2000.
12. Каскадные таблицы стилей И. Спецификация CSS2. - URL: http://194.226.53.126:8000/~ivk/css2/cover.html
13. CGI Documentation. - URL: http.7/cgi-doc.virtualave.net/
14. Client-Side JavaScript Reference. - URL:
http://developer.netscape.coni/docs/manuals/is/client/jsref/index.htm
101
ОГЛАВЛЕНИЕ
ВВЕДЕНИЕ............................................. 3
1. ПРИНЦИПЫ ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ HTML ............ 6
1.1. Структура HTML-документа...................... 6
1.2. Форматирование текста......................... 8
1.3. Управление цветом .................................10.
1.4. Вставка объектов..............................11
1.5. Гиперссылки ..................................14
1.6. Фреймы .......................................15
1.7. Таблицы ......................................18
1.8. Формы ........................................20
1.9. Создание Web-узлов и страниц в редакторе FrontPage.25
Задание № 1 .......................................31
2. КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ CSS .....................33
2.1. Введение .....................................33
2.2. Способы применения и синтаксис CSS ...........34
2.3. Группирование стилей и назначение классов.....36
2.4. Идентификатор объекта ........................38
2.5. Наследование и переопределение ...............38
2.6. Относительные и абсолютные размеры. Единицы определения цвета .................................39
2.7 Свойства.......................................40
2.8. Примеры исходных кодов........................44
2.9. Создание и применение внешней таблицы стилей во FrontPage.......................................48
Задание № 2 .......................................50
3. ОСНОВЫ JAVASCRIPT ................................51
3.1. Объектная модель .............................51
3.2. Размещение кода...............................52
3.3. Управление окнами.............................55
3.4. Программирование форм ........................59
3.5. Программирование графики .....................67
3.6. Примеры программ динамических страниц.........72
3.7. Создание скриптов во FrontPage ...............86
Задание № 3 .......................................87
102
4. ПРОГРАММИРОВАНИЕ В CGI.......................... 88
4.1. Передача данных серверу..................... 88
4.2. Структура CGI-программы .................... 88
4.3. Обработка и вывод информации................ 91
4.4. Обработка форм ............................. 93
Задание № 4 ..................................... 94
5. ПОНЯТИЯ ASP, PHP, SSI, XML...................... 95
ПРИЛОЖЕНИЕ 1. URL бесплатного размещения Web-узлов. 99
ПРИЛОЖЕНИЕ 2. Специальные символы CER..............100
ЛИТЕРАТУРА ........................................101
Учебное издание
ОСНОВЫ WEB-ДИЗАЙНА
Учебно-методическое пособие
Составители: Урбанович Павел Павлович Парей Наталья Владимировна
Редактор Ю.В. Кравцова
Подписано в печать 24.12.2004. Формат 60х841/16.
Бумага офсетная. Гарнитура Таймс. Печать офсетная.
Уел. печ. л. 6,2. Уч.-изд. л. 6,3-Тираж 400 экз. Заказ 744.
Учреждение образования «Белорусский государственный технологический университет». 220050. Минск, Свердлова, 13а. ЛИ№ 02330/0133255 от 30.04.2004.
Отпечатано в лаборатории полиграфии учреждения образования «Белорусский государственный технологический университет».
220050. Минск, Свердлова, 13.
ЛП№ 02330/0056739 от 22.01.2004.