Отправляет email-рассылки с помощью сервиса Sendsay

Самоучитель по HTML и CSS

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Декабрь 2007   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю
←   Все выпуски   →

Самоучитель по HTML и CSS - 21


Самоучитель по HTML и CSS

15. Плавающие фреймы

Разговор о фреймах будет неполным без упоминания плавающих фреймов. Так называется фрейм, который можно добавлять в любое место веб-страницы. Еще одно его название — встроенный фрейм, он называется так из-за своей особенности встраиваться прямо в тело веб-страницы. На рис. 15.1 приведен пример такого фрейма.

Рис. 15.1

Рис. 15.1. Плавающий фрейм на веб-странице

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

Создание плавающего фрейма происходит с помощью тега <IFRAME>, он имеет обязательный параметр src, указывающий на загружаемый во фрейм документ (листинг 15.1)

Листинг 15.1. Использование тега <IFRAME>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Плавающий фрейм</title>
</head>
<body>
<p><iframe src="rgb.html" width="300" height="120"></iframe></p>
</body>
</html>

В данном примере ширина и высота фрейма устанавливается через параметры width и height. Сам загружаемый во фрейм файл называется rgb.html. Заметьте, что если содержимое не помещается целиком в отведенную область, появляются полосы прокрутки.

Тег <IFRAME> в «строгой» версии HTML уже не признается валидным, поэтому в примере DOCTYPE установлен «переходным».

Более подробно о параметрах тега <IFRAME> можно посмотреть по адресу http://htmlbook.ru/html/iframe.html

Еще одно удобство плавающих фреймов состоит в том, что в него можно загружать документы по ссылке. Для этого требуется задать имя фрейма через параметр name, а в теге <A> указать это же имя в параметре target (листинг 15.2).

Листинг 15.2. Загрузка документа во фрейм

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Плавающий фрейм</title>
</head>
<body>
<p><a href="rgb.html" target="color">RGB</a> | <a href="cmyk.html" target="color">CMYK</a> | <a href="hsb.html" target="color">HSB</a></p>
<p><iframe src="model.html" name="color" width="100%" height="300"></iframe></p>
</body>
</html>

В данном примере добавлено несколько ссылок, они открываются во фрейме с именем color.

Вопросы для проверки

1. Какой параметр тега <FRAME> не является валидным?

  1. bordercolor
  2. frameborder
  3. name
  4. noresize
  5. scrolling

2. Паше требуется разбить окно браузера на два фрейма: правый фрейм должен занимать ширину 200 пикселов, а левый — оставшееся пространство. Какой код должен использовать Паша?

  1. <frameset rows="200" cols="2">
  2. <frameset cols="200,*">
  3. <frameset cols="*,200">
  4. <frameset rows="*,200">
  5. <frameset rows="*" cols="200">

3. Какой параметр тега <FRAMESET> является валидным?

  1. border
  2. bordercolor
  3. cols
  4. frameborder
  5. framespacing

4. Аня делает ссылку, которая должна открываться во фрейме с именем content. Однако Аня сделала ошибку, и написала: <a href="text.html" target="cotent">Ссылка</a>. Что произойдет в данном случае?

  1. Ссылка не откроется.
  2. Документ text.html откроется в новом окне.
  3. Документ text.html откроется в том же фрейме, что и ссылка.
  4. Все фреймы исчезнут, документ text.html откроется в обычном окне.
  5. Документ text.html откроется во фрейме с именем content.

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

  1. noresize тега <FRAMESET>
  2. borderno тега <FRAME>
  3. frameborder тега <FRAMESET>
  4. border тега <FRAMESET>
  5. noresize тега <FRAME>

6. Если ширина плавающего фрейма не указана явно, какое значение будет установлено браузером?

  1. 100%
  2. 150 пикселов
  3. 200 пикселов
  4. 300 пикселов
  5. auto

Рецепты CSS

Как сделать, чтобы цвет маркеров в списке отличался от цвета текста?

Существует два способа изменения цвета маркеров, условно назовем их простой и хитрый. Простой метод состоит в том, что внутрь контейнера <LI> вкладываем тег <SPAN>, а уже внутрь него помещаем текст. Иными словами вместо традиционной схемы <li>текст</li> создаем конструкцию <li><span>текст</span></li>. При этом цвет маркеров определяется стилевым параметром color для селектора LI, а цвет текста — для селектора SPAN.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Цвет текста и маркеров в списке</title>
<style type="text/css">
LI {
 color: green; /* Цвет маркеров */
}
LI SPAN {
 color: navy; /* Цвет текста */
}
</style>
</head>
<body>
<ul>
 <li><span>Скрипка</span></li>
 <li><span>Гитара</span></li>
 <li><span>Волынка</span></li>
 <li><span>Шарманка</span></li>
 <li><span>Челеста</span></li>
</ul>
</body>
</html>

Результат данного примера показан ниже.

Рис. 1

Маркеры, отличающиеся по цвету от основного текста

Несмотря на простоту, метод неудобен, особенно при объемных списках, ведь к каждому пункту списка теперь придется добавлять тег <SPAN>. Поэтому разберем хитрый способ, полностью основанный на работе CSS.

Смысл в следующем — убираем оригинальные маркеры списка через атрибут list-style-type и добавляем свои собственные маркеры с помощью псевдоэлемента before и параметра content. Такая связка называется «генерируемое содержание» и позволяет вставлять любой текст или символ перед элементом, в данном случае LI. Причем видом текста (цвет, шрифт, фон и др.) также можно управлять через стили, что и продемонстрировано в примере. Здесь в качестве маркеров используется символ параграфа ¶.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Цвет текста и маркеров в списке</title>
<style type="text/css">
LI {
 color: red; /* Цвет текста */
 list-style-type: none; /* Прячем исходные маркеры */
}
LI:before {
 color: black; /* Цвет маркера */
 content: "\00B6 "; /* Сам маркер в формате юникод */
}
</style>
</head>
<body>
<ul>
 <li>Север</li>
 <li>Юг</li>
 <li>Запад</li>
 <li>Восток</li>
</ul>
</body>
</html>

Результат данного примера показан ниже.

Рис. 2

Маркеры, созданные с помощью стилей

Учтите, что псевдоэлемент before и атрибут content не поддерживаются в браузере Internet Explorer ни в одной его версии. Зато прекрасно работают в Firefox и Opera.

Copyright 2007 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное