Загрузка...Noresize в html
2.15. CSS3 UI
Спецификация CSS3 UI описывает свойства и значения, связанные с пользовательским интерфейсом.
Свойства для стилизации элементов взаимодействия с пользователем
- Содержание:
- 1. Свойства внешнего контура
- 1.1. Краткая запись внешнего контура: свойство outline
- 1.2. Толщина внешнего контура: свойство outline-width
- 1.3. Узор внешнего контура: свойство outline-style
- 1.4. Цвет внешнего контура: свойство outline-color
- 1.5. Смещение внешнего контура: свойство outline-offset
- 2. Изменение размера блоков: свойство resize
- 3. Стилизация курсора: свойство cursor
- 4. Цвет каретки вставки: свойство caret-color
1. Свойства внешнего контура
Контуры позволяют выделять активные элементы интерфейса, такие как, кнопки, поля формы, карты изображений и т.п.
Браузеры часто отображают контуры элементов в состоянии :focus , поэтому не рекомендуется делать контур невидимым для таких элементов без альтернативного механизма выделения.
Контур всегда находится сверху и не влияет на положение или размер блока или любых других блоков. Поэтому отображение или скрытие контуров не вызывает перекомпоновку.
Части контура не обязательно должны быть прямоугольными, например, он повторяет закругленные углы элемента.
1.1. Краткая запись внешнего контура: свойство outline
Свойство представляет краткую запись свойств outline-color outline-style outline-width . Значение по умолчанию outline: invert none medium .
Свойство не наследуется.
1.2. Толщина внешнего контура: свойство outline-width
Свойство outline-width задает толщину внешнего контура, принимает те же значения, что и свойство border-width .
Свойство не наследуется.
1.3. Узор внешнего контура: свойство outline-style
Свойство outline-style принимает те же значения, что и border-style , за исключением значения hidden .
Свойство не наследуется.
1.4. Цвет внешнего контура: свойство outline-color
Свойство outline-color позволяет установить цвет внешнего контура с помощью значений цвета и ключевого свойства invert .
Свойство не наследуется.
1.5. Смещение внешнего контура: свойство outline-offset
По умолчанию контур рисуется начиная с края рамки элемента. Свойство outline-offset позволяет сместить контур от края границы на указанную величину.
Свойство не наследуется.
2. Изменение размера блоков: свойство resize
Поддержка браузерами
IE: —
Edge: —
Firefox: 5
Chrome: 4
Safari: 4
Opera: 15
iOS Safari: —
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 5
Свойство resize позволяет указать, может ли пользователь изменять размер элемента, и если да, то вдоль какой оси/осей. Свойство применяется к элементам, чье вычисленное значение overflow отличается от visible .
Если для элемента установлено изменение размеров, в правом нижнем углу появляется треугольник, с помощью которого элемент можно растягивать в обеих направлениях. Уменьшение первоначальных размеров элемента не предусмотрено.
Браузер должен позволять пользователю изменять размер элемента без каких-либо других ограничений, кроме ограничений, накладываемых свойствами min-width , max-width , min-height и max-height .
Фреймы (теги frame, frameset, noframe, iframe)
Наверняка Вы уже не один раз слышали о таком понятие, как фреймы. Прочитать о них можно в любом html-учебнике, а также на ресурсах о создании сайтов. Изучив множество примеров и описаний, я решил рассказать все о фреймах своими словами в очень простой форме. О плюсах, о минусах и о будущем фреймов будет сказано в самом низу этой страницы. Итак, что же такое фреймы в html?
Что такое Фреймы в html
Не пугайтесь, что это звучит немного непонятно. Давайте сразу приведем самый простой пример и тогда все станет ясно.
Отройте помощь (help) в любой программе (это может быть блокнот, какая-то программа, браузер и т.п.). Практически всегда Вы увидите хелп состоящий из двух частей (слева навигация, справа содержимое). Левая и правая части как раз и являются отдельными фреймами. Ниже представлен скриншот сделанный из хелпа самого обыкновенного блокнота Windows:
То что Вы видите, является веб-страничкой состоящий из двух отдельных независимых фреймов. Приведем примерный html код такого фрейма из хелпа.
Пример с фреймами №1 (делаем помощь)
В каркасе выше рассмотренный хелп будет выглядеть следующим образом:
Разбиение страницы на области с помощью фреймов очень напоминает табличную верстку html (см. HTML тег table). Примерный код такой страницы может выглядеть следующим образом:
Пояснение к примеру №1
Как видно из кода выше, страница созданная из фреймов очень похожа на обыкновенную html-страницу: есть открывающий тег html, раздел , заголовок , но есть одно большое различие. Наверное, Вы обратили внимание, что тег body, который отвечает за тело страницы — отсутствует. Вместо него вставлен тег , который отвечает за тело страницы. У этого тега есть два атрибут cols=»25%,75%» , что означает разбить все тело страницы на две области по вертикали в пропорции 1:3. Первая область займет 25% от ширины всего экрана (в ней будет первый фрейм menu.html ), вторая область займет 75% от ширины всего экрана (в ней будет второй фрейм content.html ).
Последний совсем необязательный тег это . Он нужен для браузеров, которые не поддерживают фреймы. Если браузер не поддерживает фреймы, то рекомендуется вежливо сообщить об этом пользователю через этот тег.
Кстати, обратите внимание, что для тега не нужен закрывающий тег.
Надеюсь, что теперь у Вас есть представления о фреймах. Чтобы понять более трудные примеры, давайте попробуем создать простую html-страницу состоящую из 4 фреймов. Это будет пример №2.
Пример с 4 фреймами №2
Каркас для примера 2:
Код исходной html-страницы с фреймом будет следующий:
Код файла top.html
Код файла menu.html
Код файла content.html
Код файла about-site.html
Код файла about-autor.html
Код файла footer.html
Пояснение к примеру №2
Первоначально вся страница разбивается на три области по горизонтали в пропорции 3:14:3. За это отвечает атрибут rows=»15%,70%,15%» . Первый фрейм в нашем примере — шапка (мы её обозвали top.html ), на нее отводится 15% места по высоте. Далее идет большой фрейм занимающий 70% по высоте. Мы его разбиваем на две части с помощью cols=»25%,75%» в пропорции 1:3. Слева будет фрейм menu.html , справа content.html . Мы специально дали имя второму фрейму name=»main» с целью возможности переключения страниц. Обратите внимание, что в файле menu.html к каждой ссылки приписан атрибут target=»main» , что позволяет при нажатии на эту ссылку загружать элементы в область с именем main. Внизу сайта расположился последний фрейм footer.html .
Если вы реализуете пример №2, то должны получить такую html-страницу в исходном состоянии:
При переходе на страницу о сайте страница будет выглядеть следующим образом:
При переходе на страницу об авторе вы увидите следующие:
Тег нужен для вставки внешнего фрейма на страницу. Типичным примером может являться код видео из youtube. Формат этого тега выглядит очень просто:
Необязательные атрибуты этого тега являются width=»ширина» и height=»высота» , а обязательный атрибут src=»https://zarabotat-na-sajte.ru/uroki-html/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D1%84%D1%80%D0%B5%D0%B9%D0%BC%D0%B0″ .
Атрибуты и свойства тега
1. Атрибут COLS=»Параметры»
Задает количество разбиений страницы по вертикали.
2. Атрибут ROWS=»Параметры»
Задает количество разбиений страницы по горизонтали.
Теперь рассмотрим каким образом можно задать параметры разбиение.
а) С помощью числа , которому будет соответствовать количество пикселей. Например, cols = «100,100,300» задает разбиение страницы на три области, каждая из которых будет по ширине: 100 пикселей, 100 пикселей и 300 пикселей соответственно.
б) С помощью процентов от общей ширины/высоты. В рассмотренных выше примерах мы использовали именно процентное разбиение, поэтому приводить пример мне кажется бессмысленно.
в) С помощью * (звездочки). Например, cols = «2*,3*,100» задает первые две области в соотношение 2:3, а третья область будет шириной в 100 пикселей.
Все три способа можно совмещать. Например, cols=»2*,100,15%,4*» .
3. Атрибут frameborder=»
Определяет наличие рамки у фрейма. Если ответ yes, то следующий четвертый атрибут border имеет силу.
4. Атрибут border=»параметр»
В пикселях border задает толщину обводки области фрейма. Например, frameborder = «2» задает область с выделенным контуром в 2 пикселя.
5. Атрибут bordercolor=»цвет»
Определяет цвет рамки, если она есть. Цвет можно задать как словами, так и кодом (см. цветовая палитра html).
Примечание: обратите внимание, что тегу нужен закрывающий тег .
Атрибуты и свойства тега
1. Атрибут src=»https://zarabotat-na-sajte.ru/uroki-html/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0″
В качестве параметра здесь должен указываться полный URL к адресу элемента. Этот атрибут обязателен. Он уже знаком Вам, т.к. он присутствовал в примерах 1 и 2.
2. Атрибут marginwidth=»число»
Задает отступ внутри фрейма от границ в пикселях по ширине. Например, marginwidth=»10″ задаст отступ содержимого слева и справа от границы фрейма.
3. Атрибут marginhight=»число»
Аналогичен второму с той лишь разницей, что задает отступ по высоте.
4. Атрибут scrolling=»
Задает возможность прокрутки фрейма, в случае если он не смог уместиться в рамки отведенной ему области. По умолчанию стоит значение auto (означает, что при необходимости создавать скролл).
5. Атрибут noresize
Если установлен этот атрибут, то пользователю запрещается самостоятельно менять границы фрейма. По умолчанию этот атрибут не стоит и пользователь может менять границы как хочет.
5. Атрибут name=»название»
С помощью этого атрибута можно давать фрейму имя. Это нужно для того, чтобы к этому фрейму могли обращаться другие фреймы. В примере №2 как раз рассматривается такой случай.
Примечание:
Имя не должно начинаться с нижнего подчеркивания «_».
6. Атрибуты frameborder, border и bordercolor
Эти три атрибута такие же как и у frameset (см. атрибуты frameset выше).
Преимущества и недостатки фреймов
Плюсы фреймов
- Возможность отображения в одном окне независимо несколько страниц (пример 1 и 2 выше);
- Возможность переключать содержимое страницы не перезагружая страницу (меняется только одна область экрана);
- Возможность построить гибко структуру сайта (шапка, меню, футер и т.д. — вся статическая информация хранится отдельно в файлах, а это позволяет быстро отредактировать часть сайта);
- Пользователь может сам изменять размер области просмотра, в случае если не установлена опция noresize;
Минусы фреймов
- Поисковые системы плохо индексируют сайты на фреймах, поскольку не в состоянии интерпретировать подгружаемые файлы во фреймах. Поисковая машина различает страницы по их адресу (URL), а у фреймов несмотря на разные состояния, адрес страницы не изменяется. Это противоречит правилам поисковой машины, а значит не факт, что поисковик сможет проиндексировать сайт.
- Невозможно сохранить в закладки сайт на фреймах, т.к. URL страницы будет одинаковый. Таким образом, можно лишь сохранить исходное состояние фрейма.
- Не все браузеры поддерживают фреймы.
Будущее фреймов:
От фреймов уже давно стали отказываться многие вебмастеры. Это связано с трудностями продвижения в поисковиках. Сейчас все переходят на Ajax, как более динамичный и современный способ отображения информации на одной странице сайта.
Уважаемый читатель, мы рассмотрели теги html документа касающиеся фреймов. Несмотря на сомнительное будущее этого направления, знать про фреймы должен каждый вебмастер.
Ссылка на следующий урок: Урок 12. Свойство CSS position
2.15. CSS3 UI
Спецификация CSS3 UI описывает свойства и значения, связанные с пользовательским интерфейсом.
Свойства для стилизации элементов взаимодействия с пользователем
- Содержание:
- 1. Свойства внешнего контура
- 1.1. Краткая запись внешнего контура: свойство outline
- 1.2. Толщина внешнего контура: свойство outline-width
- 1.3. Узор внешнего контура: свойство outline-style
- 1.4. Цвет внешнего контура: свойство outline-color
- 1.5. Смещение внешнего контура: свойство outline-offset
- 2. Изменение размера блоков: свойство resize
- 3. Стилизация курсора: свойство cursor
- 4. Цвет каретки вставки: свойство caret-color
1. Свойства внешнего контура
Контуры позволяют выделять активные элементы интерфейса, такие как, кнопки, поля формы, карты изображений и т.п.
Браузеры часто отображают контуры элементов в состоянии :focus , поэтому не рекомендуется делать контур невидимым для таких элементов без альтернативного механизма выделения.
Контур всегда находится сверху и не влияет на положение или размер блока или любых других блоков. Поэтому отображение или скрытие контуров не вызывает перекомпоновку.
Части контура не обязательно должны быть прямоугольными, например, он повторяет закругленные углы элемента.
1.1. Краткая запись внешнего контура: свойство outline
Свойство представляет краткую запись свойств outline-color outline-style outline-width . Значение по умолчанию outline: invert none medium .
Свойство не наследуется.
1.2. Толщина внешнего контура: свойство outline-width
Свойство outline-width задает толщину внешнего контура, принимает те же значения, что и свойство border-width .
Свойство не наследуется.
1.3. Узор внешнего контура: свойство outline-style
Свойство outline-style принимает те же значения, что и border-style , за исключением значения hidden .
Свойство не наследуется.
1.4. Цвет внешнего контура: свойство outline-color
Свойство outline-color позволяет установить цвет внешнего контура с помощью значений цвета и ключевого свойства invert .
Свойство не наследуется.
1.5. Смещение внешнего контура: свойство outline-offset
По умолчанию контур рисуется начиная с края рамки элемента. Свойство outline-offset позволяет сместить контур от края границы на указанную величину.
Свойство не наследуется.
2. Изменение размера блоков: свойство resize
Поддержка браузерами
IE: —
Edge: —
Firefox: 5
Chrome: 4
Safari: 4
Opera: 15
iOS Safari: —
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 5
Свойство resize позволяет указать, может ли пользователь изменять размер элемента, и если да, то вдоль какой оси/осей. Свойство применяется к элементам, чье вычисленное значение overflow отличается от visible .
Если для элемента установлено изменение размеров, в правом нижнем углу появляется треугольник, с помощью которого элемент можно растягивать в обеих направлениях. Уменьшение первоначальных размеров элемента не предусмотрено.
Браузер должен позволять пользователю изменять размер элемента без каких-либо других ограничений, кроме ограничений, накладываемых свойствами min-width , max-width , min-height и max-height .
How to Automatically Resize an iframe
Use HTML and JavaScript to create dynamic iframes, acting as if they’re part of the parent window
The allows web developers to embed one HTML page inside another. It’s so useful because they’re a part of HTML so you can use them almost anywhere — in website builders like Wix and Squarespace or in your next full-stack project.
YouTube uses iframes to allow embedded videos, Google uses them for their OAuth2 authentication, and by SaaS companies such as Mailchimp, Typeform and Outgrow to offer embeddable content.
However, iframes can also cause their fair share of problems and we’ll discuss some of the most common ones in this article.
The Problem
By default, iframes have a fixed height. That’s fine if your content also has a fixed height but if your content’s height changes you could easily end up looking at a double-scrollbar monstrosity like this:
What if we wanted our iframe to behave like regular HTML elements, with content that wraps vertically?
To do this, we’d need to dynamically change the iframe’s height but security considerations mean it is impossible for a parent window to access elements within the iframe.
In this article, I’ll explain a foolproof way of achieving this effect, using vanilla JavaScript.
The Solution
Using the window.postMessage() method, we can safely communicate between the iframe and the parent window. That way, we can send a height value from the iframe to the parent window. Then, in the parent window, we can set a simple script to dynamically update the height of the iframe.
The Code
For this tutorial, we’ll need two HTML files: a parent file where we put the iframe, and a child file containing the iframe’s contents.
child.html
Our child file will contain a simple dummy text generator, where people can click a button to add another paragraph of lorem ipsum text.
As this tutorial is about the iframe, and not the functionality of what’s in it, feel free to copy and paste the following into child.html :
You can try out the code above in this CodePen:
parent.html
We can now insert our iframe into parent.html .
Add the usual HTML5 boilerplate code, and then insert the following between the body tags:
But here we encounter our problem. Because we set overflow: hidden , the buttons and half of the first paragraph disappear.
And if we hadn’t set overflow: hidden we’d see two scroll-bars, as in the image above. To resolve this, we need to send post messages from child.html to the parent window!
child.html
So, back in child.html , we need to add new event listeners to the script section.
We need to notify the parent element of the iframe’s height:
- every time it loads,
- whenever the window is resized, and
- whenever a button is pressed.
When each of these events occurs, we’ll trigger a function called sendPostMessage .
Put the following code just before the closing
If you host your child.html file online (using a service like GitHub or Netlify), you can then insert your new URL into the src property of the code above and send it to anyone. Anyone can now embed your content as a dynamic iframe!
I hope you’ve found this tutorial useful! Thanks for reading.
Фреймы (теги frame, frameset, noframe, iframe)
Наверняка Вы уже не один раз слышали о таком понятие, как фреймы. Прочитать о них можно в любом html-учебнике, а также на ресурсах о создании сайтов. Изучив множество примеров и описаний, я решил рассказать все о фреймах своими словами в очень простой форме. О плюсах, о минусах и о будущем фреймов будет сказано в самом низу этой страницы. Итак, что же такое фреймы в html?
Что такое Фреймы в html
Не пугайтесь, что это звучит немного непонятно. Давайте сразу приведем самый простой пример и тогда все станет ясно.
Отройте помощь (help) в любой программе (это может быть блокнот, какая-то программа, браузер и т.п.). Практически всегда Вы увидите хелп состоящий из двух частей (слева навигация, справа содержимое). Левая и правая части как раз и являются отдельными фреймами. Ниже представлен скриншот сделанный из хелпа самого обыкновенного блокнота Windows:
То что Вы видите, является веб-страничкой состоящий из двух отдельных независимых фреймов. Приведем примерный html код такого фрейма из хелпа.
Пример с фреймами №1 (делаем помощь)
В каркасе выше рассмотренный хелп будет выглядеть следующим образом:
Разбиение страницы на области с помощью фреймов очень напоминает табличную верстку html (см. HTML тег table). Примерный код такой страницы может выглядеть следующим образом:
Пояснение к примеру №1
Как видно из кода выше, страница созданная из фреймов очень похожа на обыкновенную html-страницу: есть открывающий тег html, раздел , заголовок , но есть одно большое различие. Наверное, Вы обратили внимание, что тег body, который отвечает за тело страницы — отсутствует. Вместо него вставлен тег , который отвечает за тело страницы. У этого тега есть два атрибут cols=»25%,75%» , что означает разбить все тело страницы на две области по вертикали в пропорции 1:3. Первая область займет 25% от ширины всего экрана (в ней будет первый фрейм menu.html ), вторая область займет 75% от ширины всего экрана (в ней будет второй фрейм content.html ).
Последний совсем необязательный тег это . Он нужен для браузеров, которые не поддерживают фреймы. Если браузер не поддерживает фреймы, то рекомендуется вежливо сообщить об этом пользователю через этот тег.
Кстати, обратите внимание, что для тега не нужен закрывающий тег.
Надеюсь, что теперь у Вас есть представления о фреймах. Чтобы понять более трудные примеры, давайте попробуем создать простую html-страницу состоящую из 4 фреймов. Это будет пример №2.
Пример с 4 фреймами №2
Каркас для примера 2:
Код исходной html-страницы с фреймом будет следующий:
Код файла top.html
Код файла menu.html
Код файла content.html
Код файла about-site.html
Код файла about-autor.html
Код файла footer.html
Пояснение к примеру №2
Первоначально вся страница разбивается на три области по горизонтали в пропорции 3:14:3. За это отвечает атрибут rows=»15%,70%,15%» . Первый фрейм в нашем примере — шапка (мы её обозвали top.html ), на нее отводится 15% места по высоте. Далее идет большой фрейм занимающий 70% по высоте. Мы его разбиваем на две части с помощью cols=»25%,75%» в пропорции 1:3. Слева будет фрейм menu.html , справа content.html . Мы специально дали имя второму фрейму name=»main» с целью возможности переключения страниц. Обратите внимание, что в файле menu.html к каждой ссылки приписан атрибут target=»main» , что позволяет при нажатии на эту ссылку загружать элементы в область с именем main. Внизу сайта расположился последний фрейм footer.html .
Если вы реализуете пример №2, то должны получить такую html-страницу в исходном состоянии:
При переходе на страницу о сайте страница будет выглядеть следующим образом:
При переходе на страницу об авторе вы увидите следующие:
Тег нужен для вставки внешнего фрейма на страницу. Типичным примером может являться код видео из youtube. Формат этого тега выглядит очень просто:
Необязательные атрибуты этого тега являются width=»ширина» и height=»высота» , а обязательный атрибут src=»https://zarabotat-na-sajte.ru/uroki-html/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D1%84%D1%80%D0%B5%D0%B9%D0%BC%D0%B0″ .
Атрибуты и свойства тега
1. Атрибут COLS=»Параметры»
Задает количество разбиений страницы по вертикали.
2. Атрибут ROWS=»Параметры»
Задает количество разбиений страницы по горизонтали.
Теперь рассмотрим каким образом можно задать параметры разбиение.
а) С помощью числа , которому будет соответствовать количество пикселей. Например, cols = «100,100,300» задает разбиение страницы на три области, каждая из которых будет по ширине: 100 пикселей, 100 пикселей и 300 пикселей соответственно.
б) С помощью процентов от общей ширины/высоты. В рассмотренных выше примерах мы использовали именно процентное разбиение, поэтому приводить пример мне кажется бессмысленно.
в) С помощью * (звездочки). Например, cols = «2*,3*,100» задает первые две области в соотношение 2:3, а третья область будет шириной в 100 пикселей.
Все три способа можно совмещать. Например, cols=»2*,100,15%,4*» .
3. Атрибут frameborder=»
Определяет наличие рамки у фрейма. Если ответ yes, то следующий четвертый атрибут border имеет силу.
4. Атрибут border=»параметр»
В пикселях border задает толщину обводки области фрейма. Например, frameborder = «2» задает область с выделенным контуром в 2 пикселя.
5. Атрибут bordercolor=»цвет»
Определяет цвет рамки, если она есть. Цвет можно задать как словами, так и кодом (см. цветовая палитра html).
Примечание: обратите внимание, что тегу нужен закрывающий тег .
Атрибуты и свойства тега
1. Атрибут src=»https://zarabotat-na-sajte.ru/uroki-html/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0″
В качестве параметра здесь должен указываться полный URL к адресу элемента. Этот атрибут обязателен. Он уже знаком Вам, т.к. он присутствовал в примерах 1 и 2.
2. Атрибут marginwidth=»число»
Задает отступ внутри фрейма от границ в пикселях по ширине. Например, marginwidth=»10″ задаст отступ содержимого слева и справа от границы фрейма.
3. Атрибут marginhight=»число»
Аналогичен второму с той лишь разницей, что задает отступ по высоте.
4. Атрибут scrolling=»
Задает возможность прокрутки фрейма, в случае если он не смог уместиться в рамки отведенной ему области. По умолчанию стоит значение auto (означает, что при необходимости создавать скролл).
5. Атрибут noresize
Если установлен этот атрибут, то пользователю запрещается самостоятельно менять границы фрейма. По умолчанию этот атрибут не стоит и пользователь может менять границы как хочет.
5. Атрибут name=»название»
С помощью этого атрибута можно давать фрейму имя. Это нужно для того, чтобы к этому фрейму могли обращаться другие фреймы. В примере №2 как раз рассматривается такой случай.
Примечание:
Имя не должно начинаться с нижнего подчеркивания «_».
6. Атрибуты frameborder, border и bordercolor
Эти три атрибута такие же как и у frameset (см. атрибуты frameset выше).
Преимущества и недостатки фреймов
Плюсы фреймов
- Возможность отображения в одном окне независимо несколько страниц (пример 1 и 2 выше);
- Возможность переключать содержимое страницы не перезагружая страницу (меняется только одна область экрана);
- Возможность построить гибко структуру сайта (шапка, меню, футер и т.д. — вся статическая информация хранится отдельно в файлах, а это позволяет быстро отредактировать часть сайта);
- Пользователь может сам изменять размер области просмотра, в случае если не установлена опция noresize;
Минусы фреймов
- Поисковые системы плохо индексируют сайты на фреймах, поскольку не в состоянии интерпретировать подгружаемые файлы во фреймах. Поисковая машина различает страницы по их адресу (URL), а у фреймов несмотря на разные состояния, адрес страницы не изменяется. Это противоречит правилам поисковой машины, а значит не факт, что поисковик сможет проиндексировать сайт.
- Невозможно сохранить в закладки сайт на фреймах, т.к. URL страницы будет одинаковый. Таким образом, можно лишь сохранить исходное состояние фрейма.
- Не все браузеры поддерживают фреймы.
Будущее фреймов:
От фреймов уже давно стали отказываться многие вебмастеры. Это связано с трудностями продвижения в поисковиках. Сейчас все переходят на Ajax, как более динамичный и современный способ отображения информации на одной странице сайта.
Уважаемый читатель, мы рассмотрели теги html документа касающиеся фреймов. Несмотря на сомнительное будущее этого направления, знать про фреймы должен каждый вебмастер.
Ссылка на следующий урок: Урок 12. Свойство CSS position
