Frames - фреймы презентация

Содержание

Слайд 2

Frames - фреймы Позволяют разбить окно браузера на несколько независимых

Frames - фреймы

Позволяют разбить окно браузера на несколько независимых частей.
Позволяют отобразить

более одного документа в отдельном окне. Каждый отдельный документ – фрейм.
Не будут поддерживаться в дальнейших версиях. В HTML5 нет!
Труднопонимаемые
Проблема авторских прав
Слайд 3

Описание фреймовой структуры находится в отдельном файле. ... ... Между

Описание фреймовой структуры

находится в отдельном файле.


...


...


Между и

не должно быть даже точки!!!!
Часть ... заменяет часть
Страница с фреймовой структурой не содержит тега <воdy> (исключение - <воdy> может быть внутри ). <br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide4" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 4</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/122800/slide-3.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Если будем проверять страницу валидатором, то должно быть: HTML 4.01 Frameset XHTML 1.0 Frameset" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/122800/slide-3.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/122800/slide-3.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/122800/slide-3.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/122800/slide-3.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Если будем проверять страницу валидатором, то должно быть:<br>HTML 4.01 Frameset<br><!DOCTYPE HTML</div></h2><div class="slides-content">PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><br>XHTML 1.0 Frameset<br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide5" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 5</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/122800/slide-4.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="… Определяет фреймовую структуру. Задает сколько и какого размера будeт" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/122800/slide-4.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/122800/slide-4.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/122800/slide-4.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/122800/slide-4.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p><frameset>… </frameset><br><p>Определяет фреймовую структуру.<br>Задает сколько и какого размера будeт фреймов.<br>могут быть</div></h2><div class="slides-content">вложенными<br>deprecated<br>Единственными тегами, которые могут находиться между тегами <frameset> и </frameset>, являются теги: <br><frame ... /><br><frameset> ... </frameset><br><noframes>... </noframeset><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide6" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 6</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/122800/slide-5.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Атрибуты : cols, rows cols – задает количество и размер" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/122800/slide-5.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/122800/slide-5.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/122800/slide-5.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/122800/slide-5.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Атрибуты <frameset>: cols, rows<br><p>cols – задает количество и размер столбцов, значения</div></h2><div class="slides-content">разделяются запятыми<br>rows - задает количество и размер столбцов, значения разделяются запятыми <br>Размеры можно задавать: <br>в пикселях ("100px" или "100"), <br>процентах ("50%"), <br>долях (*). <br> Если * (доля) одна, то = все оставшееся пространство.<br>Порядок расчета размеров:<br>Сначала все пиксели<br>% (от всей ширины)<br>Доли (части) – от оставшегося пространства<br><frameset cols=”25%, 100, 2*,3*,*”><br><frameset cols=”*,*,*”> -- три равные части<br>Браузер сам контролирует, чтобы не было больше чем 100%.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide7" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 7</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/122800/slide-6.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/122800/slide-6.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/122800/slide-6.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/122800/slide-6.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/122800/slide-6.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div></div></h2><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide8" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 8</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/122800/slide-7.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/122800/slide-7.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/122800/slide-7.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/122800/slide-7.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/122800/slide-7.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div></div></h2><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide9" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 9</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/122800/slide-8.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="bordercolor – цвет рамки (не во всех браузерах) frameborder =" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/122800/slide-8.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/122800/slide-8.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/122800/slide-8.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/122800/slide-8.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>bordercolor – цвет рамки (не во всех браузерах)<br>frameborder = 0|1 –</div></h2><div class="slides-content">будет или нет отображаться рамка (не во всех браузерах)<br>CSS <br>border:5px solid red;<br>border-width<br>border-style<br>border-color<br><frameset cols="50%,50%" style="border:medium double rgb(250,0,255)" ><br><p>Атрибуты <frameset> <br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide10" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 10</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/122800/slide-9.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Тег Определяет отдельное окно (фрейм) фреймовой структуры. deprecated. Not in" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/122800/slide-9.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/122800/slide-9.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/122800/slide-9.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/122800/slide-9.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Тег <frame … /> <br><p>Определяет отдельное окно (фрейм) фреймовой структуры.<br>deprecated. Not</div></h2><div class="slides-content">in HTML5 <br>Не является контейнерным (не имеет закрывающего тега)<br>Количество тегов <frаmе> (<frameset>) должно соответствовать указанному числу строк или/и столбцов при описании фреймовой структуры.<br>Размеры фреймов и количество задается в теге <frameset><br>Каждый фрейм может иметь свои настройки (возможность прокрутки, изменения размеров и т.д.)<br>Если фрейм имеет видимые границы, то его размер можно менять путем перетаскивания границ.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide11" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 11</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/122800/slide-10.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Your browser does not handle frames!" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/122800/slide-10.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/122800/slide-10.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/122800/slide-10.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/122800/slide-10.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p><html><br><frameset cols="25%,50%,25%"><br> <frame src="frame_a.htm" /><br> <frame src="frame_b.htm" /><br> <frame src="frame_c.htm" /><br> <noframes><br> <body><br> Your</div></h2><div class="slides-content">browser does not handle frames!<br> </body><br>


Слайд 12

Вложенные фреймовые структуры

Вложенные фреймовые структуры

Слайд 13

Использование фреймов для организации навигационной панели menu.htm Frame a Frame b Frame c

Использование фреймов для организации навигационной панели

menu.htm
Frame a

href ="frame_b.htm" target ="showframe">Frame b
Frame c





Слайд 14

Атрибуты : src src – URL источника, документа, который будет

Атрибуты : src

src – URL источника, документа, который будет отображаться

в данном фрейме.
Может быть абсолютным, относительным, может быть указатель на закладку src=”link.html#Ch10”
если страницы, отображаемые во фрейме, выбираются в соседнем фрейме, необходимо задать для каждого фрейма начальную страницу, иначе фрейм окажется пустым, а результаты непредсказуемыми.
Слайд 15

Атрибуты : frameborder frameborder – задает, будет ли отображаться рамка

Атрибуты : frameborder

frameborder – задает, будет ли отображаться рамка вокруг

фрейма (0 | 1) (no | yes)
толщина задается у
не во всех браузерах корректно работает
Слайд 16

Атрибуты : bordercolor bordercolor – цвет рамки (не во всех

Атрибуты : bordercolor

bordercolor – цвет рамки (не во всех браузерах корректно

работает)
CSS
border:5px solid red;
border-width
border-style
border-color




Слайд 17

Атрибуты : marginheight, marginwidth marginheight – задает величину отступа в

Атрибуты : marginheight, marginwidth

marginheight – задает величину отступа в пикселях

от содержимого фрейма до верхней и нижней границы фрейма
marginwidth – задает величину отступа в пикселях от содержимого фрейма до правой и левой границы фрейма
Наименьшее значение этого атрибута равно 1. Нельзя указать 0.
По умолчанию атрибут равен 6.
Слайд 18

Атрибуты : name name – задает имя фрейма (используется в

Атрибуты : name

name – задает имя фрейма (используется в JavaScript

коде, при ссылке на фрейм,..)
deprecated, вместо него используется id
Фрейм, в котором отображаются страницы, называется целевым (target).
Фреймы, которые не являются целевыми, именовать необязательно
Имена должны начинаться с буквы или цифры. нельзя начинать со знака подчеркивания; не использовать спец.символы.
Одни и те же имена разрешается использовать в нескольких фреймовых структурах.
Слайд 19

Атрибуты : noresize noresize – задает запрет изменения размера фрейма

Атрибуты : noresize

noresize – задает запрет изменения размера фрейма пользователем.
оказывает

влияние на соседние фреймы
в XHTML: noresize="noresize"
Слайд 20

Атрибуты : scrolling scrolling – задает, будет или нет полоса

Атрибуты : scrolling

scrolling – задает, будет или нет полоса прокрутки:
auto

- Отображается только в случае необходимости (по умолчанию)
yes - Будет всегда, даже если нет надобности
no - Не будет никогда, даже если нужна (используется для баннеров, заголовков страницы)
Слайд 21

Атрибуты : longdesc longdesc – задает URL документа, содержащего описание

Атрибуты : longdesc

longdesc – задает URL документа, содержащего описание содержимого

фрейма
Не поддерживается во многих браузерах.
Нужен для невизуальных браузеров
   

Слайд 22

Загрузка во фрейм Документы загружают во фрейм с использованием атрибута

Загрузка во фрейм

Документы загружают во фрейм с использованием атрибута target

в
Label.html
...
 New document
...
Должен быть фрейм с name или id со значением ”content”
target =
_top – вместо всей фреймовой структуры
_blank – в новом окне
_self – на место того фрейма, в котором кликнули ссылку
_parent - в родительском фрейме (в IE работает как _top, разница – где фреймы вложенные)
frame_name – в указанном фрейме
Значение target по умолчанию можно задать для всего документа в раздела
Если во фрейм загружать страницу с фреймами => то РС может повиснуть!!!! = рекурсивный вызов...
Слайд 23

-- если даже одна только картинка, то лучше в виде отдельного документа .html



-- если даже одна только картинка,

то лучше в виде отдельного документа .html






Слайд 24

Тег … Используется для браузеров, которые не поддерживают фреймовые структуры.

Тег …

Используется для браузеров, которые не поддерживают фреймовые

структуры.
Может содержать любые элементы, которые могут располагаться в части body обычного HTML документа.
Чаще всего используется для указания ссылки на версию страницы без использования фреймов или для отображения сообщения.
Должен быть размещен внутри тега (перед закрывающим тегом ).
! В XHTML, текст помещенный в элемент noframes должен быть помещен внутрь тега .
Примечание: Если будет производиться валидация страницы, содержащей фреймы, то необходимо указать doctype как "Frameset DTD".
Слайд 25

iframe - Плавающие фреймы

iframe - Плавающие фреймы

Слайд 26

Плавающие фреймы - iframe используется для отображения web-страницы внутри другой

Плавающие фреймы - iframe

используется для отображения web-страницы внутри другой web-страницы.
На

странице Web можно определить любое количество плавающих фреймов.
Является контейнерным тегом
закрывающий тег является обязательным, даже если он ничего не замыкает.

iframe является inline элементом.
Между открывающим и закрывающим тегами размещают текст для браузеров, не поддерживающих фреймы.
 

Your browser does not support iframes.



Слайд 27

src src – задает URL документа, отображаемого во фрейме. Your browser does not support iframes.

src

src – задает URL документа, отображаемого во фрейме.

Слайд 28

name Определяет имя плавающего фрейма, используется для указания ссылок, при

name

Определяет имя плавающего фрейма, используется для указания ссылок, при выводе

в данный фрейм,…

target="iframe_a">W3Schools.com
deprecated, вместо него используется атрибут id
Слайд 29

align Deprecated Определяет вертикальное и горизонтальное выравнивание относительно окружающих элементов

align

Deprecated
Определяет вертикальное и горизонтальное выравнивание относительно окружающих элементов
iframe –

является inline элементом – не размещается автоматически на отдельной строке
align="left | right | middle | top | bottom"
CSS:

EXAMPLES\iframes.html
Имя файла: Frames---фреймы.pptx
Количество просмотров: 58
Количество скачиваний: 0
- Предыдущая
Сетевое планирование и управление. Лекция 6
Следующая -
Разработка электронной торговой площадки магазина мебели “Пчелка”

Похожие презентации

Создание мультфильма
Основные направления развития информационных систем и вычислительной техники
Мультимедійні дані та їх опрацювання. (Урок 15)
Поточные системы шифрования
Безопасный интернет. Для родительского собрания
Правила оформления дипломного проекта
Driver installation for SP BSP tools
Перші кроки до електронного декларування. Отримання електронних цифрових підписів
Автоматическая обработка информации. Машина Поста
ICT as a digital industry. An ICT role in key sectors of development of society.(Module 1.)
Творчі завдання з використанням ІКТ на уроках літератури
Векторная графика. Графический дизайн
Мастер по обработке цифровой информации
Оформление списка литературы к научной работе
Ai logic hirextra
Создание Web-страниц средствами языка HTML Пример веб-страницыH1&gt;
Training Manual
Средства защиты от НСД в ОС семейства Windows
Introduction to computer systems. Architecture of computer systems
Основные понятия теории баз данных
Программа Gaussian
Записи в мові Паскаль. Множини. Оператор приєднання WITH
Алгоритм и его свойства
Программа для медицины
Складання циклічних алгоритмів опрацювання величин
Технологии обучения бизнесу. Правительство
Циклические алгоритмы. Оператор цикла For
Информационные системы
Обратная связь
Email: Нажмите что бы посмотреть