<<

стр. 6
(всего 11)

СОДЕРЖАНИЕ

>>

Ссылки
Первая
ссылка
Вторая Вторая новосШ Вйе; *
ссылка Больше новостей нет;
Третья
ссылка


Рис. 10.22. Так можно использовать дескриптор <COLGROUP>
для форматирования группы ячеек

Обратите внимание на пустые ячейки в первой и последней строках. За-
чем они? Если их убрать, то исчезнут и наполняющие их цветные
"квадраты", отчего нарушится дизайн страницы.
Возможно, у вас уже вертится в голове вопрос: дескриптор <COLGROUP> парный
или непарный? И если парный, то что заключено внутри него?
Давайте подойдем к этому вопросу с другой стороны. Предположим, нам требует-
ся конкретизировать свойства определенного столбца внутри группы. Например, вы-
ровнять новости по верхней границе ячеек, а даты — по нижней. Для этого использу-
ется дескриптор <COL>, расположенный внутри дескриптора <COLGROUP>. Этот дескрип-
тор описывает параметры отдельного столбца, принадлежащего группе (рис. 10.23).
Какие параметры форматирования можно описывать с помощью дескриптора
<COL>? Те же самые, что и с помощью дескриптора <COLGROUP>. И это логично:
ведь дескриптор <COL> предназначен именно для переопределения свойств от-
дельных столбцов, входящих в группу <COLGROUP>.

158 Глава 10
<TflBLE uidth*leex>
<CflPTION> <H1 Жаэвани* +ирньК/Н1 > </CflPTION>
<COLGROUP alian=c»nt»r>




Название фирмы
<TD>
<TD> В
62
<TD>
</TR>
<TR>
<TD> <a I
Вторая нов
<TD>
<TD> Snb
Больше HOI
</TR>
</TflBLE>




Рис. 10.23. Для того чтобы конкретизировать параметры отдельного
столбца, принадлежащего группе, используется дескриптор <COL>,
который помещается внутрь конструкции <COLGROUP>... </COLGROUP>

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


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

159
Табличный дизайн
Структура таблицы состоит из трех основных дескрипторов: <TABLE>, <TR> и <TD>.
Дескриптор <TABLE> описьшает параметры всей таблицы, а расположенные внутри
него дескрипторы <TR> и <TD> — параметры строк и заключенных внутрь них отдель-
ных ячеек, соответственно. Ячейки таблицы описываются построчно, слева направо.
С помощью параметров таблицы можно задавать ее ширину и высоту
(параметры width и height), положение на странице (параметр align), толщину и
цвет рамки (параметры border, bordercolor, bordercolordark и bordercolorlight), a
также цвет фона (параметр bgcolor) и фоновое изображение (параметр background).
Многие параметры, такие как align или bgcolor, встречаются в нескольких де-
скрипторах (см. Приложение Б). Но нужно помнить, что результат их применения
в разных дескрипторах может отличаться. Так, например, параметр align в деск-
рипторе <TABLE> означает выравнивание таблицы относительно окна броузера, а в
дескрипторах <TR> и <TD> — выравнивание текста относительно ячейки.
Следует сказать еще о нескольких параметрах, используемых в таблицах
HTML. Для задания отступов текста от границ ячеек и расстояния между ячей-
ками используются два параметра дескриптора <TABLE> — cellpadding и cellspac-
ing. Отступы задаются в пикселях. Для частичного отображения рамок использу-
ются параметры frame и rules. Для слияния горизонтальных и вертикальных
смежных ячеек применяются параметры дескриптора <TD> — colspan и rowspan.
В HTML предусмотрены также средства для определения заголовка и "шапки"
таблицы — дескрипторы <CAPTION> и <тн>. Первый из них помещается внутри
конструкции <TABLE>... </TABLE> и содержит заголовок всей таблицы. Второй ис-
пользуется вместо дескриптора <TD> для ячеек, которые нужно выделить.
Если все ячейки в строке имеют одинаковое форматирование, их параметры
можно описать в объединяющем их дескрипторе <TR>. Если же такие ячейки обра-
зуют столбец, то их параметры описываются с помощью специального дескриптора
<COLGROUP>. Количество смежных столбцов в группе определяется параметром span.
Если же некоторому столбцу, принадлежащему группе, нужно присвоить дополни-
тельные параметры форматирования, это делается с помощью дескриптора <COL>,
расположенного внутри конструкции <COLGROUP>... </COLGROUP>.
При всех своих преимуществах таблицы имеют свои недостатки. В частности,
они не позволяют снабдить прокруткой отдельные ячейки. Кроме того, содержи-
мое таблицы не появляется на экране, пока не загрузится полностью. Эти осо-
бенности следует учитывать при выборе дизайна для страницы.


Тесты
1. Напишите код для верхней страницы на рис. 10.1.
2. Напишите код для нижней страницы на рис. 10.1.




160 Глава 10
Глава 11

Фреймы
В этой главе...

4 Что такое фреймовая структура
4 Горизонтальные и вертикальные фреймы
4 Размеры фреймов
4 Вложенные фреймы
4 Обрамление и отступы
f Ссылки
4 Фрейм без фреймов



Что такое фреймовая структура
Вспомните, как туристы, наперебой щелкая фотозатворами, торопятся сохра-
нить хоть крохи отпускной радости, солнца, счастья! Как будто все это можно
смотать в рулончик пленки и положить в карман...Вам не кажется, что посетите-
ли Web-сайтов частенько делают нечто подобное?
Ну конечно же, делают: сохраняют понравившиеся страницы. Причем с гораз-
до большим успехом. Но иногда случаются промашки. Бывает, что сохраняется
не весь код, а какой-то непонятный обрывок, и в окне броузера вместо яркой и
интересной страницы огорченный пользователь видит окно, разделенное на две-
три части, в каждой из которых написано: "Невозможно отобразить страницу"
(рис. 11.1). И длинный список бесполезных советов...
Когда подобное случается с фотографиями и вместо довольных физиономий ви-
дишь только собственные пальцы сквозь проявленную пленку, как правило, все ясно:
засветка. То ли пленка старая, то ли "мыльницу" пора на мыло. Но почему не сохра-
няется HTML-страница? Точнее, почему одни страницы сохраняются, а другие нет?
При более пристальном рассмотрении выясняется, что на самом деле сохра-
нить такие страницы можно. Нужно только сохранять все, а не только HTML-
код. В Internet Explorer для этого используется режим Web-страница, полностью.
В результате такого сохранения мы получаем целый "выводок" файлов, один из
которых "втягивает" в окно броузера остальные. Этот "главный" файл обычно
самый маленький изо всех и содержит примерно такой код:
<FRAMESET параметр^
<FRAME src="sourcel.htm" name="framel">
<FRAME src="source2.htm" name="frame2">

</FRAMESET>




Веб-страница не доступна в
автономном оежиме
Веб-страница не i] Веб-страница недоступна в
автономном режиме
автономном реж

Internet Explorer не может отобр Internet Explorer не может отобразить эту страницу
без подключения к Интернету. без подключения к Интернету.



Попробуйте следующее
Попробуйте следующее:

Чтобы сделать эту страницу доступной
1. Чтобы сделать эту страна
автономно, подключитесь к Интернету,
автономно, подключитесь
Избранное выберите пук Избранное выберите пункт Добавить Е
избранное, затем устанс избранное, затеи установите флажок
Сделать доступной авт Сделать доступной автономно.
В меню Сервис выберите пункт
2. В меню Сервис выберите
Синхронизировать.
«К



Рис. 11.1. Иногда вместо страницы сохраняется нечто непонятное
Первое, за что цепляется глаз в этой абракадабре, — имена файлов, которые
служат значением параметра src. Этот параметр нам уже встречался при описании
изображений (см. главу 8). Мы уже знаем, что он предназначен для "подключения"
к странице внешних файлов. В данном случае это файлы с HTML-кодом содержи-
мого фреймов. Именно эти файлы "выкачиваются" из Internet вместе с "главным".
Именно они-то, как правило, и содержат нужную информацию.
Что же, в таком случае, содержится в "главном" файле?
Фреймовая структура.
Ну вот, еще один терминологический монстр... Но, с другой стороны, на-
до же это как-то называть! Собственно, все беды от того, что слово
фрейм, подобно многим компьютерным терминам (чего стоит одно только
слово файл\), осталось без нормального перевода на русский язык. Резуль-
тат — барьер между теми, кто уже освоил эту премудрость (кстати, в ос-
тальном несложную), и теми, кто еще не дошел до этого блаженного со-
стояния. Подозреваю, что именно подобным барьерам обязано своим по-
явлением слово "чайник" в применении к homo sapiens.

Вариантов перевода английского слова frame на русский язык слишком много -
"скелет", "костяк", "каркас", "рама"... И это далеко не все, а только наиболее
употребительные. Остановимся на последнем варианте — "рама", "рамка". Web-
дизайнеры любят делить окно броузера на более мелкие области и размещать в них
логически обособленные части Web-страницы. Получается и красиво, и удобно.

162 Глава 11
Один способ такого разбиения нам уже знаком — таблицы (см. гла-
ву 10). Но у таблиц есть определенные недостатки. Главный из них -
отсутствие прокрутки. Если содержимое ячейки не помещается в ней, то
либо ячейка расширяется, либо посетитель чего-то не увидит. Средства
стандартного HTML не позволяют снабдить каждую ячейку собственной
полосой прокрутки. И тут-то на помощь приходят фреймы.
Как вы могли заметить из приведенного выше фрагмента кода, фреймовая
структура состоит из нескольких файлов, объединенных с помощью конструкции
<FRAMESET> (рис. 11.2).


<FRftMESET cols=*,x>
<РРЙНЕ src=left.htnl>
<FRftME src=right.ht«l>
</FRflMESET>




!
И-'Йязннйш ' | |
|Ц '. '•ip№-^ " 1 ' В 1
1^ Ш
;
,•......,.. •» ',' j И л
1 D.\My docs\DIALECT\Htmrfmoi\TES 'j*'|




Правый
Левый
фрейм
фрейм

Рис. 11.2. Фреймовая структура состоит из нескольких
HTML-файлов, объединенных с помощью конструкции <FRAMESET>

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

163
Фреймы
при сохранении таких страниц: если посетитель не заметит фреймы, то он
может сохранить только "каркас" страницы, без ее содержимого. Нако-
нец, фреймы иногда вызывают сложности при общении с поисковыми
серверами: посетитель, придя на страницу с поисковика, может попасть
не во фреймовую структуру, а только на ее часть, открытую в отдельном
окне (подробнее о работе поисковых серверов см. в главе 14).


Горизонтальные и вертикальные фреймы
Рассмотрим такой пример. Предположим, нам нужно разработать Web-сайт
некоей фирмы, страницы которого делятся на две части: в левой находится одна
и та же панель ссылок, а содержимое правой меняется в зависимости от того, ка-
кую ссылку выберет пользователь.
Вы могли заметить сходство этого примера с описанным в главе 10, по-
священной таблицам. Это неудивительно: фреймы и таблицы занимают
в мире HTML очень близкие ниши и часто соперничают за место под
"виртуальным солнцем".
Что ж, попробуем. Создадим HTML-файлы для панели ссылок и списка ново-
стей — references.html и news.html — и объединим их во фреймовую структуру
(рис. 11.3).


<FRflMESET>
<FRftME src="references.html">
<FRflME src="n»ws.htBl">
</FRflMESET>




Ост
f -Ссылки
D:\Mydocs\DW_ECT\


Наша продукция

Наши услуги

Прайс-лист
Адреса и телефоны

История компании
Для прессы
Карта сайта


Рис. 11.3. Первая попытка объединить два файла во фреймо-
вую структуру: один файл виден, другой — нет. Что-то тут не так...

Глава 11
164
Ссылки видны, а новости — нет! Что-то здесь не так...
Почему не видно второго фрейма? Потому что мы не описали параметры
фреймовой структуры, а именно способ разбиения окна на фреймы — вдоль или
поперек — и размеры областей.
Этот способ задается параметрами cols или rows, в зависимости от того, как требу-
ется разделить окно броузера — по вертикали (на колонки) или по горизонтали (на
строки). Значениями параметров cols или rows служат размеры областей разбиения —
высота и ширина, соответственно, — которые перечисляются через запятую.


Размеры фреймов
Существует несколько способов задать размеры фреймов, на которые делится окно.
Самый простой и очевидный — в пикселях. Предположим, например, что ши-
рина левого столбца должна равняться 250 пикселям, а правого — 550. Тогда эти
значения можно задать с помощью кода, показанного на рис. 11.4. Вот теперь
фреймовая структура работает правильно: в окне видны оба фрейма.



<РНЙМЕ src="references.htnl">
<РИЙМЕ erc="newe.ht«l">
</FR«MESET>




ttvily docs\DIALECT\HmrTutoATESTHTML.html


Новости
Наша продукция

Нащи_услуги
1 января С Новым Годом!
Прайс-лист
12 января Со Старым Новым Годом!
Адреса и
15 февраля Мы любим Вас!
телефоны
23 февраля Надеемся, повестка
обошла Вас стороной...

1 марта Весна!!!
Для прессы
За милых дам!
8 марта
Карта..сайта
Вы не поверите!
1 апреля


Рис. 11.4. Размеры вертикальных фреймов определяются
параметром cols

А что получится, если использовать параметр rows? Проверим (рис. 11.5)...
Такой код работает, но с колонками было все-таки лучше.
Действительно, вертикальные фреймы используются, пожалуй, более
широко, чем горизонтальные.

165
Фреймы
••} •a

Наша продукция

Наши услуги

Поайс-пист



1 января С Новым Годом!

12 января Со Старым Новым Годом!

15 февраля Мы любим Вас!

23 февраля Надеемся, повестка обошла Вас стороной...
I


Рис. 11.5. Окно можно разбить и по горизонтали

А как должен выглядеть код, если окно делится на три колонки? Очень про-
сто: после cols= через запятую идут не две, а три цифры. Что-то наподобие этого:
<FRAMESET cols=100,200,400>

Однако все хорошо в меру. Фрейм — не ячейка таблицы, которых могут
быть десятки. Страницы из трех вертикальных фреймов, как, впрочем и
из трех горизонтальных, — большая редкость. А уж о большем количе-
стве и говорить нечего. Это объясняется, главным образом, громоздко-
стью фреймовых конструкций. Более мелкими блоками информации
удобнее манипулировать, представив их в виде табличных ячеек, нежели
в виде фреймов. Однако у фреймов есть свои преимущества, которые вы
наверняка оцените, дочитав эту главу до конца.
Удобно ли такое разбиение? Так себе. Хотя бы потому, что размер окна бро-
узера может измениться. И если броузеру не удается выдержать размеры фреймов
согласно коду, то он делит окно по-своему.
Но ведь подобная задача у нас уже возникала — при задании размеров изо-
бражений и табличных ячеек. И там она успешно решалась с помощью относи-
тельных величин. Такой способ применяется и здесь: размеры фреймов можно
задать в процентах (рис. 11.6).



Глава 11
166
U<FRftMESET
<FRBME src="references.ht«l">
<FRflHE 8rc="ne«s.ht«l">
|]</FRfiMESET>




, —•
, ,;..-, •-
:— I-PPIM »-:«•
, щ Hnt-n;«- П IT. .i,.'^,>! КурШ ; Почто
r,,,^>a ,n.i:,,,,i,
3 D:\My docs\DIALECWmlTutot\TESTHTMLhtml
1— flllf,— -rrlr-fl-Y-r-f-- = « _


Наша продукция Новости
1
Наши.У5ЛУ1И
1 января С Новым Годом!
т
Прайс-лист
12 января Со Старым Новым Годом!
Адреса и 1
15 февраля Мы любим Вас!
телефоны
23 февраля Надеемся, повестка обошла JJ
История
Вас стороной...
компании
1 марта Весна!!!
Для прессы
8 марта За милых дам!
Карта сайта :
дД
1 апреля Вы не поверите!





Рис. 11.6. Размеры фреймов можно задавать в процентах, на-
пример по правилу "золотого сечения"

Но ведь границу между фреймами можно перетаскивать и, таким образом, ме-
нять их размеры. Зачем тогда их задавать? Ведь зачастую это не принципиально.
Нельзя ли пустить все на самотек, и пускай броузер сам разбирается?
Можно поступить и так -г- не определять размеры областей. Для этого цифры
заменяются "звездочками", как при задании группы файлов с помощью маски.
Тогда броузер будет делить окно на равные части (рис. 11.7).
Такой способ, конечно, простой, но результат выглядит, пожалуй, не вполне
аккуратно. И посетителю страницы каждый раз придется самому перетаскивать
границу фреймов, чтобы привести ее в более или менее удобный вид.
Однако описание в HTML-коде размеров обоих фреймов — занятие не только
утомительное, но и явно излишнее: ведь и так ясно, что, если левый фрейм зани-
мает 30% окна, то правый займет всю остальную часть, что бы мы там ни написали.
Именно поэтому рассмотренные выше способы редко применяются в "чистом
виде". Гораздо чаще встречаются их комбинации. В самом деле, если мы хотим
разделить окно на две части, из которых одна занимает 30% окна, зачем высчи-
тывать и указывать явно, что вторая часть занимает 70%? Гораздо проще и ло-
гичнее написать, что первая часть занимает 30%, а вторая — все оставшееся про-
странство (рис. 11.8).




167
Фреймы
(FRAMESET
<FRSME erc="r»f»r«nce9.ht»l">
<FRftHE sr
</FRflHESET>




D Wy doraUMLECT\HlmlTuttiVrESTHTML


Наша продукция

Наши услуги
С Новым
Годом!
Прайс-лист
Со Старым
Адреса и телефоны
Новым Годом!
История компании
15 февраля Мы любим
Вас!
Для прессы
23 февраля Надеемся,
КартасМТЛ
повестка
обошла Вас
стороной...


Рис. 11.7. Если заменить размеры областей "звездочками"
броузер разделит окно на равные части


FRflMESET
<FRftME erc^'rtfertnces.htnl")
<FRftHE src="n»HS.ht«l">
/FRflHESET>




,!) D:\My docs\DW-ECT\HtmrTutoi\TEST>ITMLhlml


Наша продукция

ши услуги
1 января С Новым Годом!
Поайс-лист
12 января Со Старым Новым Годом!
еса и
15 февраля Мы любим Вас!
гелефоны
23 февраля Надеемся, повестка обошла
Вас стороной...
1 марта Весна!!!
8 марта За милых дам!
1 апреля Вы не поверите!


Рис. 11.8. Задавать ширину последнего фрейма не обяза-
тельно, вместо нее можно поставить "звездочку"

168 Глава 11
Наконец, есть еще один любопытный способ комбинированного задания раз-
меров — специально для тех, кто не в ладу с процентами. Если перед
"звездочкой" стоит цифра и, то окно делится так, чтобы эта часть была в п раз
больше, чем остальные. Например, код
<FRAMESET cols=*,2*>
означает, что окно делится на две части, из которых вторая вдвое шире первой —
первая часть займет 1/3, а вторая — 2/3 окна по ширине (рис. 11.9).


<FRAMESET
<FRflME src="r«fer*nces.htiil">
<FRftHE ere="n*He.ht«l">
</FRflMESET>

OPOR-O B",. и.-!:г.-«-<"В Сервис
•J -.:
. .
D:\Mydoc5\Dl4LECTiHtmfTutor\TESTHTMLhlml


Наша продукция
Наши услуги
С Новым Годом!
1 января
Шай&лист
Со Старым Новым Годом!
12 января
Адреса и телефоны
15 февраля Мы любим Вас!
История компании
23 февраля Надеемся, повестка обошла
Вас стороной...
ДЩЩИЗЁСЫ
Весна!!!
Карта сайта
За милых дам!
Вы не поверите!


Рис. 11.9. Если перед "звездочкой" стоит цифра л, то окно делится
так, чтобы эта часть была в п раз больше, чем остальные


Вложенные фреймы
Хорошо, а как разбить окно и по горизонтали, и по вертикали одновременно?
Например, поместить вверху узкую горизонтальную панель с названием фирмы, а
под ней две вертикальные: потоке — со ссылками и пошире — с новостями? Дос-
таточно ли перечислить в дескрипторе <FRAMESET> размеры всех фреймов с помо-
щью параметров rows и cols (рис. 11.10)? Нет, похоже, это не то, что нам нужно...
Но на самом деле все гораздо проще, чем мы думали: сначала окно разбивает-
ся на горизонтальные фреймы, а затем один из горизонтальных фреймов — на
вертикальные. Или, наоборот, в зависимости от того, что мы хотим получить.
Другими словами, структуры <FRAMESET> бывают вложенными (рис. 10.11).

169
Фреймы
<FRAHE »rc«"h«»d.htil">
<FRftME ere = "r»f«r»ne«.ht«l">
<FRflME src="news.html">
</FRflMESET>




Наша продукция

Наши УСЛУГИ




Рис. 11.10. Если просто перечислить в дескрипторе <FRAMESET> раз-
меры и положение всех фреймов, ничего хорошего не получится



FRftMESET гон»
<FRflME src="h»«d.ht»r'>
<FR«HESET cole=«.2«>
<FRflME erc="r«f»r«nces.htnl"> %f
<FROME src="n»ns.btnl">
</FRfiMESET> %
</FRflMESET> :»|




1 Новости
Наша продукция

Наши услуги С Новым Годом!
1 января
Прайс-лист 12 января Со Старым Новым Годом!

Адрес.а.И 15 февраля Мы любим Вас!
iH
телефоны
п
23 февраля Надеемся, повестка
Истор_ия.!?Шпании обошла Вас стороной...


.
Для.прессы
1 8 марта
1 марта Весна!!!

щ
Карта сайта За милых дам!
1
Рис. 11.11. Для того чтобы разделить окно на три фрейма — горизонталь-
ный и два вертикальных, — используйте вложенную фреймовую структуру



170 Глава 11
Обрамление и отступы
Итак, как вы могли заметить, по умолчанию фреймы разделяются обычными
серыми рамками Windows, которые можно перетаскивать с помощью мыши. Если
содержимое фрейма не помещается в отведенной ему области окна, то у этой об-
ласти появляется собственная полоса прокрутки. При перетаскивании ее бегунка
перемещается только содержимое соответствующего фрейма; все остальное со-
держимое окна не изменяется.
Иногда в интересах дизайна требуется убрать рамку, изменить ее цвет или
толщину, а также запретить прокрутку и сделать невидимыми полосы прокрутки.
Рассмотрим параметры фреймовой структуры, позволяющие это сделать.
Итак, наличие рамки. За него "отвечает" параметр frameborder, который при-
нимает одно из двух значений — yes или по. Вместо yes можно ставить цифру 1, а
вместо по — 0. Впрочем, как вы, вероятно, догадываетесь, вместо frameborder=yes
можно вообще ничего не ставить: это значение подразумевается по умолчанию.
Что получится, если в главном фрейме нашего примера поставить
frameborder=0 - предсказать нетрудно. Рамки просто исчезнут, оставив
"неприкаянные" полосы прокрутки (рис. 11.12).



<FRAME erc="head.ht«l">
<FRflMESET eols=K,2*>
<FRfiME src="referenc»s.ht»l">
<FRflHE *гс<"
</FRflMESET>
</FRftMESET>




._
iel D \My docaWI FOT\I ilmll utui\TEG1 H i Ml html



Название фирмы
Наша продукция Новости
Н.аши..у.сл.Ш
1 января С Новым Годом!
'Прайс-лист •
12 января Со Старым Новым Годом!
Адреса и
15 февраля Мы любим Вас!
телефоны
23 февраля Надеемся, повестка
ИСТОРИЯ компании
обошла Вас стороной...
Для прессы
1 марта Весна!!!
«iixnuiv п а я я !




Рис. 11.12. Если в главном фрейме поставить frameborder=0,
рамки исчезнут


Фреймы 171
Но самое интересное заключается в том, что параметр fraraeborder можно ста-
вить не только здесь, но и во вложенных дескрипторах <FRAMESET>, и в дескрипто-
рах <FRAME>, описывающих параметры отдельных фреймов. И в каждом случае ре-
зультат будет выглядеть по-разному. Например, если в нашем примере присвоить
такой параметр внутреннему дескриптору <FRAMESET>,To рамка между вертикаль-
ными фреймами исчезнет. Останется только горизонтальная рамка, как бы отчер-
кивающая панель с названием компании от остальной информации (рис. 11.13).


<FR«MES?T
<FRAHE erc="heBd.ht«l">
<FRftMESET cols=м,2» НЯЯЯЯЯВНЯоЬ
<FRftME src="referenc»s.ht«l">
<FRflME erc="news.html">
</FRflMESET>
</FRflMESET>


Файл Правке Вид &№•"•>«»•



Ш D:\My docs\DIALECT\HmlTuttATESTHTMLhIml




Новости
Наши услуги
С Новым Годом!
Прайс-лист
т 12 января Со Старым Новым Годом!
т

Рис. 11.13. Если поставить frameborder=0 во внутреннем дескрипторе
<FRAMESET>, то рамка между вертикальными фреймами исчезнет

Толщина рамки задается в пикселях уже знакомым нам параметром border.
Так, вместо стандартной рамки можно сделать толстую (рис. 11.14). Однако этот
параметр применим только для дескрипторов <FRAMESET>.
По умолчанию рамка серого цвета, как и весь интерфейс Windows. Но, в от-
личие от последнего, ее цвет можно изменить, используя средства HTML, на-
пример параметр bordercolor. Этот параметр нам уже встречался — при определе-
нии цвета рамок таблиц. Поэтому вы уже не хуже меня должны знать, что явля-
ется его значениями — мнемоническое имя или код цвета в формате fRRGGBB.
Отметим также, что параметр bordercolor применим не только для всей фреймо-
вой структуры, но и для отдельных фреймов (рис. 11.15).




172 Глава 11
<FRflMESET roue:100,Ю
<FRflME 8rc="head.ht»l">
<FRflMESET cols=>«,2*
<FRSME src="referenc»s.ht
<FRflME src="newe.htnl">
</FRflMESET>
</FRftHESET>




D:\My docs\DtALECT\Htmrrutoi\TESTHTMLhtm




Наша продукция Новости
Нашщлуги
1 января С Новым Годом!
Прайс-лист
12 января Со Старым Новым
Годом!
саи
телефоны
15 февраля Мы любим Вас!



Рис. 11.14. С помощью параметра border можно из стан-
дартной рамки сделать толстую

Наконец, нам остался еще один параметр — framespacing. Параметр весьма
любопытный. Измеряется он в пикселях. Если мы поставим его и попробуем, что
выйдет, то не получим ничего особенно интересного: просто рамки фреймов ста-
нут такой толщины, какая указана в этом параметре. Но если убрать рамку, все
становится ясно: этот параметр делает то же, что и параметр cellspacing в табли-
цах — задает расстояние между фреймами. Результат его применения особенно
наглядно смотрится, если "подложить" под фреймы цветной фон (рис. 11.16).

О том, как "подложить" фон под всю страницу, вы узнаете в главе 13.



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




173
Фреймы
j«,TCSTHTML-6/iuK



[FRAMESET rows:100.x border:20 bordereolor:red>
<FRflME src:"head.html">
<FRftMESET cole:x,2x>
<FRAME arc:"references.html" bordercolor=yellon>
<FRflME erc:"neMs.htnl">
</FRflMESET>
/FRAMESET>




D:\My etec*WI?CTVHtmrruta\TESTHTMUltml




Наша продукция

Наши услуги
1 января С Новым Годом!
Прайс-лист
12 января Со Стары м Новым Годом!
Адреса и телефоны 1
15 февраля Мы любим Вас!
История компании
23 февраля Надеемся, повестка
обошла Вас стороной...
Для прессы



Рис. 11.15. С помощью параметра bordercolor рамки фреймов мож-
но раскрасить в разные цвета

Этими средствами являются параметры marginheight и marginwidth. Они при-
надлежат дескриптору <FRAME> и определяют вертикальный и горизонтальный
отступы содержимого фрейма от рамки. Измеряются эти отступы в пикселях
(рис. 11.17).

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




174 Глава 11
! Л TrSTMTML - Спакио г



UFRflMESET rows'100.к fra»eepacing=2e>
1
<FRflME src="head.html">
<FRflMESET cols=x,2* ИЯВНЯЯЯЙЙШЯ . ;' i-

src="r»f»renc»s.htnl">
1
<FRftME src="n»we.html">
</FRflMESET>
J</FRflMESET>
Ш 3H>\My<inr.s\l>IAII СI \> llml rulnryn SI H Т Ml hi




3 DV^y docs\DK4-ECT\HtmlTutoiMESTHTML.html




Название фирмы




Рис. 11.16. Параметр framespacing определяет расстояние между
фреймами и используется преимущественно для фреймов без рамки
Конечно, рамку можно просто убрать: нет рамки — не за что перетаскивать. Но
ведь иногда нужно оставить рамку, но сделать ее неподвижной. Как этого добиться?
Для этого используется специальный параметр дескриптора <FRAME> -
noresize. Значений у него нет. Просто, если он упомянут, то перетащить границу
фрейма не удастся. Например, если изменить код нашего примера на следующий
<FRAMESET rows=100,*>
<FRAME src="head.html" marginheight=5 noresize>
<FRAMESET cols=*,2*>
<FRAME src="references.html">
<FRAME src="news.html" marginwidth=50>
</FRAMESET>
</FRAMESET>
то границу между вертикальными фреймами, содержащими информацию из фай-
лов references.html и news.html, по-прежнему можно будет перемещать вправо-
влево, но граница верхнего фрейма с файлом head.html останется неподвижной.




Фреймы 175
FRAMESET rous=100,*>
<FRflME erc="h»ad.hti»l"
<FRflMESET cole=x,2x>
<FRflME src="references.ht»l">
<FRflME src="neus.html" merginuidth=50>
</FRftMESET>
</FRflMESET>




D:\My docs\DIALECAHtmlTutoATESTHTML html




Новости
Наша продукция

Наши услуги 1 января С Новым Годом!
Прайс-лист 12 января Со Старым Новым
Годом!
Адреса и телефоны
15 февраля Мы любим Вас!
История компании
23 февраля Надеемся, повестка
Для прессы обошла Вас
стороной...
Кащасайц,


Рис. 11.17. Параметр marginheight определяет отступ содержимого
фрейма от верхней рамки, a raarginwidth — от правой и левой рамок

Наконец, рассмотрим последний эффект, связанный с обрамлением фреймов.
Существует довольно распространенный дизайнерский прием, который заключа-
ется в создании неподвижного фрейма. Как правило, такие фреймы содержат де-
коративные элементы — заголовки, эмблемы. Разумеется, их размер должен быть
таким, чтобы содержимое помещалось в окне целиком, иначе теряется все впе-
чатление, и полосы прокрутки его только портят.
В таких случаях, для того чтобы запретить прокрутку и убрать с экрана соответ-
ствующие полосы прокрутки, используется специальный параметр дескриптора
<FRAME> — scrolling. Вообще-то, этот параметр имеет три значения — yes, no и auto.
Первое означает обязательное наличие полос прокрутки независимо от того, нужны
они или нет, второе — отсутствие полос прокрутки и запрет прокрутки даже в том
случае, если она не мешает. Последнее значение соответствует состоянию фрейма,
в котором он находится по умолчанию: если содержимое фрейма полностью поме-
щается в отведенной ему части окна, то полосы прокрутки отсутствуют; если же
часть содержимого выходит за пределы видимости, то такие полосы пояатяются.
Естественно, чаще всего используется режим scrolling=no. Так, в нашем при-
мере верхний фрейм является как раз тем самым декоративным элементом, про-
крутку которого было бы логично запретить (рис. 11.18)

Глава 11
176
Новости
Наша продукция

Наши услуги 1 января С Новым Годом!

12 января Со Старым
Новым Годом!
Адреса и
телефоны 15 февраля Мы любим Вас!




<FRftMESET гоиб=?е,>0
<FRflME src="head.html" rginheight=5 noresize
<FR(tMESET cols=«,2x>
<FRflME src="references.html">
<FRflME src="news.ht*l" narginwidth=5e>
</FRflMESET>
</FRflMESET>




Наши услуги С Новым Годом!
1 января
Прайс-лист 12 января Со Старым
Новым Годом!
впапя Мы любим Bar


Рис. 11.18. Для того чтобы ненужные полосы прокрутки не появля-
лись на экране, используйте параметр scrolling со значением по


Ссылки
Левая панель, сплошь состоящая из гиперссылок, наводит на мысль: в какой
же части окна, разделенного на фреймы, теперь будут выводиться страницы, на
которые посетитель перешел по ссылке?
По умолчанию они открываются в том же фрейме, в котором находилась
ссылка. А для случая, когда нужно поступить иначе, используются именованные
фреймы. Имя фрейму присваивают с помощью параметра name:
<FRAME src="news.htm" name=raainframe>

177
Фреймы
Для того чтобы при переходе по ссылке новая страница открывалась на том мес-
те, где раньше были новости, воспользуйтесь параметром target дескриптора <А>:
<А href="prod.html" target=mainframe>Hama продукциж/а>
Для того чтобы освежить знания о гиперссылках, советую еще раз про-
смотреть главу 9.

При работе с фреймами удобно использовать зарезервированные имена окон,
применяемые в качестве значений параметра target: _top и _parent позволяют
загрузить страницу в том же окне, на месте всей фреймовой структуры; _self — в
том же фрейме, _blank — в новом окне.

Иногда — правда, все реже и реже — встречаются броузеры, которые не
поддерживают фреймы. Специально для них в HTML оставлен дескрип-
тор <NOFRAMES>. Что помещают внутрь структуры <NOFRAMES>... </NOFRAMES>?
Лучше всего, если удается (и если у создателя страницы есть такое же-
лание) поместить там версию страницы без фреймов — пусть не так
красиво, но все же хоть что-то... Но, поскольку броузеры, не поддержи-
вающие фреймы, скоро будут встречаться примерно так же часто, как
динозавры, время дескрипторов <NOFRAMES> тоже проходит. И если уж
какой-нибудь особо вежливый автор HTML-страницы их использует, то
он, как правило, пишет что-то в таком роде:
<FRAMESET cols=2*,*>
<FRAME src="left.html">
<FRAME src="right.html">
<NOFRAMES>
К сожалению, Ваш броузер устарел.
Обновите его и приходите снова!
</NOFRAMES>
</FRAMESET>


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




Глава 11
178
((FRAMESET rous=TO,»,70>
<FRflME erc="up.htel" noreeize scrolling=no>
<FRflMESET eole=2>«,i<,«>
<FRflME erc="l»ft.htnl" noreeiz» ecrolling:no>
<FRflME erc="neue.ht«l">
<FRftME erc= "right. ht«l" noreeiz* ecr-olling=no>
</FRftMESET>
<FRflME erc="doun.htnl" nor«siz» scrolling=no>
!</FRflMESET>




$ D:\My docs\D»lECT\Hlm!TuIOI\TESTHTM..html



Верхнийфрейм
Левый фрейм Правый
фрейм




Рис. 11.19. Задачу создания на странице центрального "окна" с прокруткой можно ре-
шить с помощью "классической" фреймовой структуры. Но это громоздко и неудобно

И все-таки такое решение далеко от идеала. Хотя рамки и можно убрать, гра-
ницы между фреймами все равно остаются, и с ними приходится считаться. И
это уже не говоря о прочих неудобствах, связанных с тем, что цельный по замыс-
лу кусок страницы приходится резать на четыре части, размещать в четырех фай-
лах — left.html, right.html, up.html и down.html — и потом совмещать границы
фреймов так, чтобы внешне все смотрелось как единое целое.
Поэтому для этой задачи существует гораздо более простое решение, так на-
зываемый встроенный фрейм.
Для создания встроенного фрейма используется дескриптор <IFRAME> (от анг-
лийского inline frame). Это парный дескриптор, очень похожий на дескриптор
<FRAME>. Но дескриптор <FRAME> — непарный, a <IFRAME> — парный! Что же тогда
находится между <IFRAME> и </IFRAME>?
Здесь самое время вспомнить, что, несмотря на то, что HTML — стандарт, далеко
не все дескрипторы этого стандарта одинаково поддерживаются всеми броузерами.
Именно на этот случай рассчитано содержимое дескриптора <IFRAME>: там, как прави-
ло, помещают информацию, которая как-нибудь компенсирует посетителю тот пе-
чальный факт, что его броузер не поддерживает встроенные фреймы (рис. 11.20).



179
Фреймы
<TflBLE bgcolor=pink Midth=100X>
<TR>
<TH bgcolor'black colspan=2>
<H1XFONT colorsuhit«Ha3BaMM» «ирньК/FONTX/HI >
</THX/TR>
<TRXTD>
<H3>CcwiKH:</H3>
:й href: prod. htiOHana продукция</А>
<РХй href=seru.ht«>HaiM услуги</й>
<РХЙ href=price. ht»npaflc-nMCT</fl>
<PXfl href=contacts.ht«>fl«p»c« и т«л>»оны</Й>
<PXfl hr»f=«ap.ht«>KapTa сайта</й>
</TD>
<TD>
<НЗ>НОВОСТИ:</НЗ>
<IFRftHE src=n»ns.ht«l>
[^TflBLE bgcolor^uhitQ C9llpadding= 10 width-80/ n >
K T R X T D ualign=top>ianbsp;flHDapfl</TD:_
S|<TD ualign=top>C Нооым Годом!</TDX/TR
" <TRXTD иаПдп-1ор>125пЬср;яноарж/ТО>
^ <TD ualion=top>Co Старым Новым Г о д о м » < / Т О х / Т Р



Э D:\Wydocs\DIALEC



Название фирмы I <Jocs\DIALECnrtmrTuBl\2.hhil


Название фирмы
Новости:
'Наша пр&укция':
Нашиуслуги !Sf||
1 января С Новым:
Годом! i
ПрайЪуист
I 1 января С Новым
Адреса и телвфо Годом!
•Щита I 12 января Со Старым
Новым Годом!




Рис. 11.20. Содержимое дескриптора <IFRAME> предназначено на
тот случай, если броузер не поддерживает этот дескриптор


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


Для простоты в примере на рис. 11.20 дескриптор <IFRAME> имеет только один
параметр — src. Значением этого параметра, как обычно, является файл,
"подключаемый" для отображения в данной точке, — news.html. Однако отсутст-
вие прочих параметров отрицательно сказывается на эстетичности страницы.
В частности, с помощью параметров width и height мы можем отрегулировать
ширину и высоту встроенного фрейма. Как всегда, эти параметры могут изме-
ряться в абсолютных величинах (пикселях) или в относительных (процентах от

180 Глава 11
размеров окна или табличной ячейки, в которую "вписан" фрейм). Благодаря
этим параметрам мы можем расширить окно новостей в нашем примере
(рис. 11.21), а то его и окном-то назвать неловко: так, форточка...


СРХн href=contacts.ht«>ftapeca и тепв*оны</й>
(РХЙ href=map.htni>KapTa сайта</й>
C/TD>
СТО width:7б?>
(НЗ>НОВОСТИ:</НЗ>
CIFRflME
(TABLE bgcoloi-'Uhit» cellpadding=10 Hldth=89X>
(TRXTD ualign=top>ianbsp;flHBapfl</TD>
<TD ualign=top>C Новым ГодомК/ТОХ/ТЮ
<TR
(TD
C/T




Ссылки:
1 января С Новым Годом!
Наша продукция
12 января Со Старым Новым Годом!
Нашиуслуги
15 февраля Мы любим Вас!
Прайс-лист ;;>i.V.:|v-'
23 февраля Надеемся, повестка
Адреса и телефоны
обошла Вас стороной...
Карта сайта
1 марта Весна!!!




Рис. 11.21. Для того чтобы расширить встроенный фрейм, воспользуемся пара-
метрами width и height — их можно задавать как в пикселях, так и в процентах

Как вы могли заметить, точно такие параметры есть в дескрипторе <FRAME>.
Вообще, фрейм обычный и фрейм встроенный в смысле параметров очень похо-
жи. Как и в <FRAME>, в дескрипторе <IFRAME> внутренние отступы — расстояния от
границ встроенного фрейма до его содержимого сверху, снизу, справа и слева -
определяются параметрами marginheight и marginwidth. Как и там, здесь можно
отменить отображение рамки с помощью параметра frameborder и изменить ре-
жим прокрутки с помощью параметра scrolling. Наконец, встроенный фрейм,
как и обычный, может иметь имя, описываемое параметром name, чтобы к нему
можно было обращаться по гиперссылке.




181
Фреймы
Резюме
Фреймы — мощное средство HTML, позволяющее разделить пространство ок-
на броузера на самостоятельные информационные зоны.
Фреймовая система описывается в HTML-коде с помощью дескриптора
<FRAMESET>. В нем помещаются дескрипторы <FRAME>, описывающие параметры от-
дельных фреймов. HTML-коды содержимого этих фреймов находятся в отдельных
файлах, имена которых указаны в дескрипторах <FRAME> с помощью параметров src.
Деление окна броузера на части осуществляется с помощью параметров деск-
риптора <FRAMESET>. Для деления по вертикали используется параметр cols, а по го-
ризонтали — параметр rows. Их значениями являются размеры (ширина или высо-
та) полученных областей, перечисленные через запятую, в пикселях или процентах.
Если размер области не имеет значения, его можно заменить символом *.
В одном дескрипторе <FRAMESET> может присутствовать только один из этих
параметров — или cols, или rows. Поэтому для того чтобы разделить окно и по
вертикали, и по горизонтали, используются вложенные фреймы: вместо описания
очередного фрейма <FRAME> помещается фреймовая структура <FRAMESET>.
Каждый фрейм имеет рамку стандартной толщины и цвета. Эту рамку посети-
тель страницы может перетаскивать с помощью мыши. Если содержимое фрейма
не помещается в отведенной ему области окна, то у этой области появляется по-
лоса прокрутки. Таковы свойства фрейма по умолчанию. Однако их можно изме-
нить. С помощью параметров дескрипторов <FRAMESET> и <FRAME> можно изменить
толщину и цвет рамки или вовсе ее убрать, а также запретить прокрутку содер-
жимого фрейма и убрать с экрана соответствующую полосу прокрутки.
При ссылках на элементы фреймовой структуры широко используются имена
фреймов, назначаемые с помощью параметра name. Затем эти имена присваивают-
ся параметру target дескриптора гиперссылки <А>.
Для создания внутри окна области с собственной рамкой и самостоятельной
прокруткой используется дескриптор <IFRAME>. Он имеет те же параметры, что и
<FRME>, но не нуждается в специальной фреймовой структуре, описываемой де-
скриптором <FRAMESET>, и может располагаться внутри обычного HTML-кода.


Тесты
1. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <FRAMESET rows=70,*> ••• </FRAMESET>
б) <FRAMESET rows=70%,*,70>... </FRAMESET>
в) <FRAMESET cols=70,*%> . . </FRAMESET>
.
r) <FRAMESET cols=70000,*> ... </FRAMESET>
д) <FRAMESET rows=*,*> . . </FRAMESET>
.
е) <FRAMESET rows=2*,*> ••• </FRAMESET>


182 Глава 11
ж) <FRAMESET rows=**,*> ... </FRAMESET>
з) <FRAMESET rows=*;*> ... </FRAMESET>
и) <FRAMESET rows=*> ... </FRAMESET>
2. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <FRAMESET cols=*,*>
<FRAKE src="sourcel.htm">
</FRAMESET>
б) <FRAMESET cols=*,*>
<FRAME src="sourcel.htm">
<FRAME src="source2.htm">
</FRAMESET>
в) <FRAMESET cols=*,* rows=*,*>
<FRAME src="source1.htm">
<FRAME src="source2.htm">
<FRAME src="sources.htm">
<FRAME src="source4.htm">
</FRAMESET>
r) <FRAMESET cols=*,*,*,*>
<FRAME src="sourcel.htm">
<FRAME src="source2.htm">
<FRAME src="sources.htm">
<FRAME src="source4.htm">
</FRAMESET>
д) <FRAMESET cols=*,*>
<FRAME src="sourcel.htm">
<FRAME src="sourcel.htm">
</FRAMESET>
3. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <FRAMESET cols=*,* frameborder=no>
<FRAME src="source1.htm">
<FRAME src="source2.htm">
</FRAMESET>
б) <FRAMESET C0ls=*,*>
<FRAME src="sourcel.htm" frameborder=no>
<FRAME src="source2.htm">
</FRAMESET>
в) <FRAMESET cols=*(* border=no>
<FRAME src="sourcel.htm">
<FRAME src="source2.htm">
</FRAMESET>


Фреймы 183
г) <FRAMESET cols=*,* border=10>
<FRAME src="sourcel.htm">
<FRAME src="source2.htm">
</FRAMESET>
д) <FRAMESET cols=*,*>
<FRAME src="sourcel.htm" border=10>
<FRAME src="source2.htm">
</FRAMESET>
4. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <FRAMESET cols=*,*>
<IFRAME src="sourcel.htm" border=10>
<IFRAME src="source2.htm">
</FRAMESET>
б) <TABLE>
<TR><TD><IFRAME src="sourcel.htm" border=10></TD>
<TD><IFRAME src="source2.htm"x/TD></TR>
</TABLE>
в) <IFRAME> Содержимое встроенного фрейма</1РКАМЕ>




184 Глава 11
Глава 12

Формы
В этой главе...

4 Основная схема формы
* Из чего состоит форма
* Текстовые строки
4 Кнопки
Ф Текстовые поля
Ф Списки вариантов
4 Списки-переключатели
* Раскрывающиеся списки



Основная схема формы
Web-сайт — это почти всегда диалог. Конечно, встречаются "односторонние"
сайты, авторы которых стремятся только показать, но не услышать отзыв о пока-

<<

стр. 6
(всего 11)

СОДЕРЖАНИЕ

>>