Презентация на тему "Таблицы и фреймы"

Содержание

• 
  Слайд 1

  Таблицы и фреймы

  По материалам курса University of Washingtonhttp://www.cs.washington.edu/education/courses/cse190m/07sp/index.shtml

• 
  Слайд 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 solidblack;} td {border: 1px solid black; } collapse.html table {border-collapse: collapse; border: 1px solidblack;} td {border: 1px solid black; } Стиль, при котором границы таблицы и отдельных ячеек разделены,задается значением border-collapse: separate;(принят по умолчанию). При этом можно задавать ширину промежутка междуячейками таблицы с помощью стиля border-spacing, например table {border-collapse: separate; border: 1px solidblack; 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

  Замечания: Элементом frameset’а может быть frameset, что позволяет получатьразличные структуры разбиений. Браузер может не поддерживать фреймы (это очень старые браузеры). Если в страницу включен DTD, то это специальный Frameset DTD. Элемент

  включается только для элемента

  .
• 
  Слайд 8

  Управление поведением и видом фреймов

  По умолчанию каждый фрейм имеет границу, размер его можно менятьдинамически и, если содержимое страницы не помещается во фрейм, ток нему автоматически добавляются полосы прокрутки (scrollbars). frames-attr.html Все это можно задавать с помощью атрибутов элемента (не CSS!)

• 
  Слайд 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):