Таблицы и фреймы По материалам курса University of Washington. - презентация

1 Таблицы и фреймы По материалам курса University of Washington

2 Таблицы Таблицы следует использовать в том случае, если размещаемый материал имеет табличную природу: расписание, глоссарий,... Пример таблицы: расписание занятий. Расписание занятий Понедельник Алгебра 15:00 Среда Матанализ 13:30 Пятница Javascript 17:00 Таблицы не следует использовать для размещения материала на странице, для этого лучше использовать позиционирование блоков. Таблица – это блочный элемент, содержащий внутри себя строки – блочные элементы, которые, в свою очередь, содержат внутри себя элементы данных – ячейки (строчные элементы ). Все, что находится вне ячеек таблицы, размещается перед таблицей. Например, элемент в примере, приведенном выше, задает заголовок таблицы.

3 Заголовки и стили Кроме собственно заголовка таблицы, можно некоторые ячейки помечать как заголовки. По умолчанию они выделяются жирным шрифтом и центрируются. Расписание занятий День Предмет Время Понедельник Алгебра 15:00 Среда Матанализ 13:30 Пятница Javascript 17:00 С помощью стилей можно задать вид таблицы и отдельных ее элементов. Например: table { caption-side: bottom; border: 2px solid; } th { font-size: larger; background-color: yellow; } td { background-color: #e0e0e0; color: blue; } caption { font-size: 16pt; font-style: italic; } IE не понимает указание положения заголовка caption-side ! table.html

4 Коллапс границ По умолчанию границы ячеек отстоят друг от друга и от границы самой таблицы на некоторое расстояние. Это легко увидеть, если задать границу ячеек и таблицы: С помощью задания стиля border-collapse можно убрать промежутки между границами: table { border: 1px solid black; } td { border: 1px solid black; } collapse.html table { border-collapse: collapse; border: 1px solid black; } td { border: 1px solid black; } Стиль, при котором границы таблицы и отдельных ячеек разделены, задается значением border-collapse: separate; (принят по умолчанию). При этом можно задавать ширину промежутка между ячейками таблицы с помощью стиля border-spacing, например table { border-collapse: separate; border: 1px solid black; border-spacing: 0.2cm 1em; }

5 Колонки Вообще говоря, таблица состоит из строк ( ). Но для задания стилей для отдельных колонок можно указать отдельные элементы для разных колонок и групп колонок в таблице (, ). columns.html Расписание занятий День Предмет Время Понедельник Алгебра 15:00 Среда Матанализ 13:30 Пятница Javascript 17:00 Чаще всего это используется для задания ширины отдельных колонок, но может также использоваться для выделения колонок цветом, задания специфического шрифта и т.д.

6 Слияние ячеек Для некоторых отдельных ячеек можно указать, что данные занимают несколько рядов и/или колонок. Для этого в элементе задают атрибуты rowspan и colspan, например: spans.html Расписание занятий День Предмет Время Понедельник Алгебра 15:00 Геометрия 15:00 Среда Матанализ 13:30 Пятница Физкультура - целый день

7 Фреймы Страница может быть разбита визуально на несколько областей, в каждую из которых помещается содержание отдельной страницы. Структура разбиения задается в отдельном HTML-файле, а уже в нем имеются ссылки на страницы, формирующие содержимое. frames.html Расписание занятий Замечания: 1. Элементом framesetа может быть frameset, что позволяет получать различные структуры разбиений. 2. Браузер может не поддерживать фреймы (это очень старые браузеры). 3. Если в страницу включен DTD, то это специальный Frameset DTD. 4. Элемент включается только для элемента.

8 Управление поведением и видом фреймов По умолчанию каждый фрейм имеет границу, размер его можно менять динамически и, если содержимое страницы не помещается во фрейм, то к нему автоматически добавляются полосы прокрутки (scrollbars). frames-attr.html Все это можно задавать с помощью атрибутов элемента (не CSS!) Атрибут Возможные значения frameborder0, 1 noresize scrollingyes, no, auto marginwidth, marginheightразмер в пикселях

9 Загрузка страниц во фреймы При переходах по гиперссылкам можно указывать, в какое окно загружать целевую страницу, с помощью атрибута target. targets.html Загружает страницу в новое окно Загружает страницу в текущее окно Загружает страницу на место главной («вырваться» из фреймов) Загружает страницу в окно (фрейм) с именем name Того же эффекта можно добиться, используя метод open в программах на Javascript. window.open(url, name); где аргумент url соответствует атрибуту href, а аргумент name – атрибуту target. buttons.html

10 Особенности программирования Программы, исполняющиеся в разных фреймах, независимы друг от друга, они используют разный глобальный контекст, объект window у них свой. window.parent; Тем не менее, можно получить ссылку на контекст другого окна, используя связь «родитель – ребенок». Если хотим изнутри фрейма получить ссылку на «родительское» окно: Если хотим из «родительского» окна получить доступ к документу фрейма: window.document.getElementById(frameId).contentDocument; IE не поддерживает этот W3C стандарт! Но в нем документ имеет массив фреймов, а у них есть атрибут document : window.document.frames[frameId].document;

11 Пример программирования Напишем функцию, которая работает в одном фрейме, и при этом определяет цвет фона для тела документа в другом фрейме. function findColor(frameName) { var frame = parent.document.getElementById(frameName); if (!frame) return 'white'; var color = frame.contentDocument.body.style.backgroundColor; if (!color) color = 'white'; return color; } js-frames.html Вот как подобная функция используется в примере (реальный пример сделан чуть-чуть сложнее, чем приведенная выше функция, чтобы обеспечить совместимость с IE):