- •Введение
- •Глава 1. Основы
- •1.1. Браузеры
- •Преодоление различий браузеров
- •1.2. Программирование
- •1.3. Дизайн при неизвестном разрешении монитора
- •Гибкая раскладка
- •Дизайн с фиксированной шириной
- •1.4. Знакомство с серверами
- •Корневая директория для Web
- •Java-сервлеты и jsp
- •Абсолютная и относительная адресация
- •Соглашения об именах файлов
- •Выбор кодировки
- •Глава 2. Html и xhtml
- •2.1. Роль html
- •2.2. Отделение представления от структуры документа
- •2.3. Атрибуты
- •Вложенные элементы
- •Информация, которую браузеры игнорируют
- •2.4. Введение в xhtml
- •Три разновидности html 4.01 и xhtml 1.0
- •Хорошо сформированный xhtml
- •Атрибуты id и name
- •2.5. Элементарная структура документа
- •2.6. Тело документа
- •2.7. Текстовые элементы
- •Блочные элементы
- •Внутристрочные элементы логического форматирования
- •Перенос строки
- •Горизонтальные линейки
- •Стилевые элементы
- •Практика
- •Как сделать хороший html – документ
- •2.8. Создание гиперссылок
- •Организация ссылок на область документа
- •Практика
- •2.9. Таблицы
- •Описательные элементы
- •Группы строк
- •Столбцы и группы столбцов
- •2.10. Фреймы
- •Преимущества использования фреймов
- •Недостатки
- •Базовая структура набора фреймов
- •Нестандартные атрибуты
- •Нестандартные атрибуты
- •Создание строк и столбцов
- •2.11. Формы
- •Элементы форм
- •Поле для ввода текста
- •Поле для ввода пароля
- •Переключатель
- •Выбор файла
- •Многострочные текстовые поля
- •Создание меню при помощи элементов select
- •Группы вариантов
- •Надписи
- •Атрибуты accesskey и tabindex
- •Практика
- •Глава 3. Стили css
- •3.1. Преимущества css
- •Определение – задают свойства селектора.
- •3.2. Способы добавления таблиц стилей на Web-страницы
- •Href – позволяет задать url-адрес таблицы стилей.
- •Наследование
- •3.3. Конфликтующие правила стилей: каскад
- •3.4. Контекстные селекторы
- •3.5. Использование классов
- •3.6. Группировка
- •3.7. Псевдоселекторы
- •3.8. Другие псевдоклассы css 2.1
- •Псевдоэлементы
- •3.9. Единицы измерения, используемые в каскадных таблицах стилей
- •3.10. Свойства css для управления цветом
- •Практика Задание 1
- •Задание 2
- •Задание 3
- •3.11. Оформление таблиц с помощью css
- •Заголовки таблиц
- •Порядок наложения элементов
- •Границы
- •Расчет размеров таблицы (ширина, высота)
- •Алгоритм с фиксированной шириной
- •Алгоритм с автоматически определяемой шириной
- •3.12. Оформление таблиц
- •Практика
- •3.13. Блочные и внутристрочные элементы
- •3.14. Введение в блоковую модель
- •3.15. Нормальный поток
- •Свободное размещение
- •3.16. Пропуск размещаемых элементов
- •3.17. Позиционирование: основы
- •3.18. Охватывающий блок
- •3.19. Задание положения
- •3.20. Обработка переполнения
- •3.21. Расчет позиции элемента
- •3.22. Фиксированное позиционирование
- •3.23. Относительное позиционирование
- •Практика
- •3.24. Css свойства
- •3.25. Методики css
- •Центрирование страницы
- •Раскладка в 2 столбца
- •Раскладка в 3 столбца
- •Раскладка в 3 столбца c абсолютным позиционированием
- •Позиционирование трех столбцов
- •Центрирование с рамками и полями
- •Ложные столбцы
- •Заключение
- •Список литературы
- •Оглавление
- •Глава 1. Основы 4
- •Глава 2. Html и xhtml 15
- •Глава 3. Стили css 56
2.10. Фреймы
Фреймы представляют собой метод разделения окна браузера на окна меньшего размера, в каждом из которых отображается отдельный HTML-документ.
Элементы:
frame Определяется один фрейм
frameset Определяется структура фреймов и других наборов фреймов
noframes Данные, отображающиеся, если фреймы не поддерживаются
В Рекомендации HTML 4.01 и XHTML 1.0 входит DTD Frameset, предназначенный для документов с фреймами. Из XHTML 1.1 все фреймовые элементы были убраны.
Документы с фреймами обычно используются как средства навигации, где все функции навигации находятся в одном фрейме, а соответствующие им материалы – в другом фрейме. Поскольку фреймы могут включать полосы прокрутки и могут прокручиваться независимо, они могут использоваться в ситуациях, где один компонент находится на странице постоянно, а остальные можно свободно прокручивать.
Преимущества использования фреймов
Позволяют сохранять части страницы в стационарном состоянии, в то время как другие части прокручиваются.
Фреймы сводят воедино ресурсы, находящиеся на разных серверах. При помощи элемента noframes вы можете указывать альтернативный материал, если браузер не поддерживает фреймы.
Недостатки
Фреймы могут усложнить создание сайта, поскольку вам нужно создать и организовать несколько файлов для одной страницы.
Поставить закладку на документ в фрейме может быть довольно сложным делом.
Большое число фреймов на странице может существенно увеличить нагрузку на сервер.
Наличие нескольких документов на каждой Web-странице усложняет управление сайтом и его обновление.
Документы с фреймами могут создавать трудности для поисковых систем. • Сложно оценить реальное впечатление, производимое страницей, если страница является частью документа с фреймами.
Базовая структура набора фреймов
Web-страница, которая делится на фреймы, сводится воедино документом верхнего уровня – набором фреймов (frameset).
В документе «набор фреймов» вместо элемента body используется элемент frameset, в котором определяются несколько фреймов, организованных в строки и/или столбцы. Каждый фрейм в элементе frameset обозначается элементом frame . Набор фреймов содержит также обычный заголовок (элемент head).
<frameset>...</frameset>
Атрибуты
cols="список длин" (число, процент или *)
rows="список длин" (число, процент или *)
Нестандартные атрибуты
border="число" определяет толщину границы
bordercolor="#rrggbb" или "имя цвета"
frameborder="l|0"; "yes|no"
Вот пример элементарного документа-набора фреймов в XHTML. Получающийся набор фреймов состоит из двух фреймов, образующих две колонки одинаковой ширины.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Simple Framed Document</title>
</head>
<frameset cols="*,*">
<frame src="left.html" />
<frame src="right.html" /> </frameset>
<noframes>
<body>
<р>Ваш браузер не поддерживает фреймы.</р>
<р><а href="left.html">nepexoд к левой панели</а></р>
<р><а href="right.html">nepexoд к правой панели</а></р>
</body>
</noframes>
</html>
Файлы Ieft.html и right.html - это обычные (X)HTML.
Элемент <frame />
Атрибуты
Базовые (id, class, style, title)
frameborder="l|0" (IE3+и W3CRec); "yes |no" (NN3+) используется для включения (значение 1) или отключения (значение 0) «трехмерной» границы между фреймами. В рекомендациях W3C указывается, что атрибут frameborder следует применять отдельно к каждому элементу frame, но большинство браузеров также поддерживают использование атрибута frameborder и в элементе frameset (см. предыдущее примечание). Если применить границу к одному фрейму, граница рисуется со всех сторон этого фрейма.
longdesc="URL"
marginwidth="число" задает ширину левого и правого полей для фрейма.
marginheight="число" задает верхнее и нижнее поле для фрейма.
name="текст"
noresize="noresize" запрещает изменение размера фрейма путем простого перетаскивания границы между фреймами.
scrolling="yes|no|auto" определяет, будут ли полосы прокрутки отображаться во фрейме, независимо от его содержимого. Значением по умолчанию является auto.
src="URL" имя загружаемого во фрейм файла.