3.8. Фреймы в качестве парадигм
«До тех пор, пока не была создана эта парадигма схоластов (средневековая теория „первого толчка“), маятники как таковые не были известны людям, а ученые видели в них только качающиеся камни. Существование маятников было открыто благодаря
автора
Соколова Татьяна Юрьевна
Фреймы
Фреймы позволяют разделить веб-страницу на несколько независимых окон и в каждом из них разместить отдельную веб-страницу. Спор о том, нужно это или нет, продолжается. Я скажу одно: при умелом использовании фреймов можно создать страницу-шедевр, а в противном
Из книги
HTML, XHTML и CSS на 100%
автора
Квинт Игорь
5.1.10. Плавающие и внутристрочные объекты
Текстовый процессор Pages различает два вида объектов: плавающие и внутристрочные.Плавающие объектыПлавающие объекты не имеют привязки к тексту, ни форматирование символов, ни форматирование абзацев не влияет на положение объекта
Из книги
автора
Плавающие видовые экраны
Когда пользователь впервые переключается в пространство листа, графический экран пуст и представляет собой «чистый лист», где будет компоноваться чертеж. В пространстве листа создаются перекрывающиеся (плавающие) видовые экраны, содержащие
Из книги
автора
Плавающие видовые экраны
Когда пользователь впервые переключается в пространство листа, графический экран пуст и представляет собой «чистый лист», где будет компоноваться чертеж. В пространстве листа создаются перекрывающиеся (плавающие) видовые экраны, содержащие
Из книги
автора
Глава 5
Фреймы
5.1. Создание фреймов5.2. Границы фрейма5.3. Полосы прокрутки5.4. Ссылки внутри фреймов5.5. Изменение размеров фреймов5.6. Плавающие фреймы5.7. Управление пространством внутри фрейма5.8. Достоинства и недостатки фреймовФреймы (frames) – это HTML-элементы, позволяющие
Итак, фреймы.. для чего они нужны и какую пользу в себе несут? Об этом я и постараюсь рассказать в этой главе, ну и естественно о том, как их внедрять и работать с ними..
Часто при создании сайта возникает необходимость открывать в одном окне браузера одновременно несколько HTML документов.. так вот фреймы как раз таки и созданы для того чтобы определить рабочие области для каждого документа. Кроме того, фреймы - это хороший инструмент, с помощью которого можно заниматься версткой страницы, они служат достойной "альтернативой" табличному способу верстки страницы.. в кавычки взял слово "альтернатива" потому, что это совершенно иной способ построения сайта со своими достоинствами и недостатками и его достаточно трудно сопоставлять с доселе привычным построением сайта.. но обо всем по порядку..
Ну что, начнем? Допустим нам необходимо в одном окне браузера открыть сразу три HTML документа и расположить их к примеру вот таким способом:
Что нам для этого нужно? Для начала естественно нам необходимо создать три отдельных html документа которые мы собственно и будем открывать в одном окне.. Пусть первый документ будет нести в себе графическое изображение и будет выполнять роль логотипа назовём его logotype.html , вторым документом будет некое содержание.. назовём menu.html , ну и третьим документ с кучей текста. text.html. Конечно Вы можете придумать свои названия, как впрочем и содержание документов, но пока лучше всё же копируйте мои.. так будет удобнее и мне и Вам.
Итак, есть три файла logotype.html, menu.html и text.html.. которые нам необходимо разместить под одной крышей, а крыши у нас как раз таки ещё пока и нет..
Пишем "крышу", главный документ к которому будем подключать наши файлы. Раз он будет главным, присваиваем ему имя index.html.
фреймы
Вот привычная для нас структура документа которую мы пережевали ещё в самом начале нашего обучения.. Фреймы ломают сложившиеся стереотипы! Структура фрейм документа имеет вот такой вид:
фреймы
Отсутствие тега
компенсирует новый тег - установить фрейм или набор фреймов.. с этим товарищем мы собственно и будем работать дальше.
Тег имеет атрибуты rows
и cols
- эти атрибуты указывают браузеру на то, как следует размещать фреймы в окне браузера
rows
- горизонтально cols
- вертикально
В нашем случае нам необходимо горизонтальное размещение фреймов.. значит пишем так:
фреймы
Проценты после знака равенства - это не что иное, как размеры наших окошек- фреймов в одном большом окне браузера, у нас предполагается размещение трёх окон - следовательно и значений через запятую тоже три. Вспомните как мы задавали размеры ячеек для таблицы, здесь тот же принцип.. Как и в случае с ячейками таблицы, размеры фреймов можно указывать в процентах от общей площади и в пикселях.
Вот несколько примеров написания:
- такая запись говорит о том, что будет три горизонтальных окошка где последнее займет 70% площади окна браузера, а первые два по 15%.
- здесь три окна расположены вертикально ширина которых указана в пикселях.
- такая запись значит, что первое и третье окно будут иметь ширину 100 и 180 пикселей соответственно, а второй фрейм займет всю оставшеюся площадь.
С размещением документов покончили, теперь собственно осталось их подключить и насладится первым результатом..
Тег
и его атрибут src
укажет браузеру путь к html документу который следует открыть в отведенном для него месте. У нас имеется три отдельных документа logotype.html, menu.html и text.html теперь к каждому нужно прописать путь, что мы собственно и делаем. (предполагаю, что у Вас все четыре файла находятся в одной папке и пути к ним имеют самую простую запись по типу:
)
Файл index.html
фреймы
Файл logotype.html
фреймы
Файл menu.html
фреймы
Меню:
Суп из шампиньонов
Бобы в горшочке по-итальянски
Австралийский летний салат
... ... ...
Файл text.html
фреймы
Суп из шампиньонов
куча текста..
В данном примере я выложил все четыре HTML документа где index.html является основным, а остальные три, это подключаемые страницы, каждая из которых в принципе может работать автономно и содержать в себе всё что угодно картинки, таблицы, тексты, ссылки.. сделал я это для того что бы дать Вам понять принцип работы с фреймами. В дальнейших примерах я буду выкладывать лишь головной файл с фреймами, (а то уж больно много места на странице они все вместе занимают), а Вы знайте что у меня "где то там" есть все остальные файлы содержащие в себе графику, тексты, может быть ещё что ни будь.. ну и не отставайте за мной потихоньку редактируйте свои собственные странички к будущему тренировочному сайту.. Не знаю про что Вы будите писать свой, а я тут пообещался помочь одной девушке в написании сайта посвящённого кулинарии..)) так что решил так сказать сразу на двух зайцев замахнуться.. на девушку зайку и сайт..)) как-то так..))
В выше изложенном примере мы расположили все окна горизонтально, поменяв атрибут rows
на cols
можно расположить их в вертикальном порядке. А как быть, если требуется разместить наши окна
вот так?: или так?: или даже так?:
Выход есть. Разберём на примерах.
Начнём с первого случая.. что мы видим? А видим мы две строки, где вторая поделена на два столбца.
A теперь по порядку:
- делим окно браузера на две строки
- в первую строку загружаем наш логотип
- а вторую строку делим на два столбца
- в первом будет меню
- а во втором куча текста
- закрываем тег деления на столбцы
- закрываем тег деления на строки
Вообще то говорить столбцы и строки неверно, так как фреймы никакого отношения к таблицам не имеют кроме как визуального подобия, правильно говорить горизонтальные и вертикальные фреймы.. ну это я так изрекаюсь что б Вам понятнее было..
Ну да ладно, смотрим пример:
фреймы
Во втором случае у нас имеется два столбца в котором второй поделен на две строки, значит будем писать так:
- делим окно на два столбца
- в первом будет содержание
- а второй делим на две строки
- логотип
- и основной текст
- закрываем деление на строки
- закрываем деление на столбцы
фреймы
Третий случай немного посложней, но бояться его не стоит.. тем более что именно такое построение лично я выбрал для сайта про кулинарное искусство, чуть ниже объясню почему. Что мы имеем? три столбца причем во второй столбец по сути заключён наш первый случай..
- делим окно на три столбика (обратите внимание второй столбец занимает ровно 800 пикселей а два крайних точного размера не имеют и поделят пополам оставшееся место)
-в первый столбец загружаем html документ который будет выполнять сугубо декоративную функцию
-
-
- во второй столбец вставляем наш "первый случай"
-
-
-
-
- в третий столбец загружаем всё тот же файл с декорациями
- захлопываем
Посмотрите пример, а потом я объясню почему избрал путь с пятью окнами
фреймы
Так почему пять окон? Помнится мне, я уже писал про то, что у разных пользователей сети Интернет на мониторах выставлены разные разрешения и соответственно на разных экранах наш сайт будет выглядеть по разному.. и если нет конкретных размеров все наши рисунки, тексты, таблицы что называется "поплывут" у тех пользователей, разрешения мониторов которых отлично от Вашего. Когда мы верстали сайт с помощью таблицы, вопрос с размерами страницы решался при помощи присуждения этой таблице конкретной ширины и высоты, к сожалению, с фреймами так поступить нельзя.. даже если указывать ширину фреймов не в процентах, а в пикселях, всё равно последний столбец растянется на оставшеюся ширину окна браузера и страница, что называется, потеряет "товарный вид". Так как же быть? Приходится идти на маленькие хитрости.. Задав центральному столбцу (в котором у нас собственно и размещена вся страница) размер 800 пикселей мы раз и навсегда определи его ширину, а безразмерные первый и третий столбцы помимо декора выполняют роль своего рода "пружин" на которых подвешен центральный столбец.. Так, у людей с маленьким разрешением монитора эти окна/поля будут узкими, а людей с большим разрешением широкими, таким образом центральный столбец никак не пострадает и теперь мы можем с полной уверенностью размещать в нём какие либо объекты, с точной привязкой по месту, не переживая за их дальнейшую судьбу. Сравните первый пример, где три окна и третий, где их уже пять, неправда ли так лучше?
На этом с размещением и размерами фреймов закончим.. и так здесь долго задержались.. идём дальше.
Приводим фреймы в опрятный вид.
В последнем нашем примере первое, что бросается в глаза, это целая куча полос прокруток, которые стоят где надо и не надо.. Давайте от них избавимся, ну можно и оставить кое где.. Делается это при помощи атрибута scrolling
- тега
, он может иметь одно из трёх значений:
- no
- yes
- всегда показывать,
- auto
фреймы
Поля фреймов или иначе расстояние от границ фрейма до текста или картинки, как в нашем случае, задаются в пикселях при помощи атрибутов marginwidth
и marginheight
тега
фреймы
Поговорим немного о рамках вокруг наших фреймов.
Если Вы обратили внимание, то в последнем примере наведя курсор на границу фрейма он, курсор то бишь, приобретает другой вид (захватить и переместить) и теперь эту границу можно перетащить в какую либо сторону удерживая левой кнопкой мыши. Иногда такая "мобильность" границ фреймов играет на руку веб-мастеру, но чаще всё же мешает.. Для того, чтобы запретить пользователю играться с размерами окон для тега
придумали атрибут noresize
фреймы
А вот давно нам знакомый атрибут border
задаёт ширину в пикселях этих самых рамок между фрёймами.. пишется он внутри тега . Как и раньше значение border="0"
вовсе избавит нас от рамок.
фреймы
Фреймы и ссылки.
Настало время оживить наш сайт ссылками, да вот беда, знакомая нам обыкновенная ссылка Бобы в горшочке по-итальянски
откроет данный документ в том же фрейме где она и находится, в нашем случае непосредственно в фрейме с содержанием, а само содержание в момент перехода по этой ссылки уйдёт в небытие.. можете взглянуть на корявый пример.. кликнете в нём на любую ссылку.. Что бы впредь такого не происходило, необходимо указывать браузеру в каком фрейме следует открывать необходимый нам документ, ну если конечно Вам и в правду не нужно открывать его в этом же фрейме.
Помнится мы уже знакомились, в главе посвящённой ссылкам, с атрибутами name
- имя и target
- цель, применяются они также и при работе с фреймами механизм немного изменён а так почти тоже самое. первым делом фрейму в котором мы хотели бы открывать какие либо документы необходимо присвоить индивидуальное имя.
пишется так:
name="osnovnoe"
> имя можно придумать любое.. главное его не забыть..
Пишется так:
target="osnovnoe"
>Бобы в горшочке по-итальянски
Ну я думаю Вам уже не стоит объяснять, что прежде чем ссылаться на какие либо документы, их необходимо создать.. в моём случае файлы (рецепты) имеют имена text.html, text1.html, text2.html…
Посмотрите пример:
Файл index.html
фреймы
Файл menu.html
фреймы
Меню:
target="osnovnoe"
>Суп из шампиньонов
target="osnovnoe"
>Бобы в горшочке по-итальянски
target="osnovnoe"
>Австралийский летний салат
... ... ...
Так же как и раньше документ можно открыть в отдельном окне. Напомню, пишется так:
target="_blank"
>Бобы в горшочке по-итальянски
Или же присвоив атрибуту target
значение _top
открыть его в этом же окне браузера, но на весь экран.. "обнулив" при этом всё что бы там не находилось.. пишется так:
target="_top"
>Бобы в горшочке по-итальянски
Такой вот сайтик получился.. конечно над ним ещё работать и работать.. к тому же по моёй задумке он будет иметь несколько иную структуру в плане навигации по сайту, в нем будет ёщё целая куча страниц, красивое меню, но что касается фреймовой структуры, думаю она останется прежней..
Плавающий фрейм
Иногда в страницу содержащую в себе не фреймовую структуру необходимо в отдельном окне вставить другой HTML документ или даже ряд таковых документов. Для выполнения этой цели существует тег
Пример документа с плавающим фреймом:
Плавающий фрейм
Плавающий фрейм
В эту страницу введён так называемый "плавающий фрейм".
В отдельном окне он открывает для показа другой документ html.
… … …
Noframes
Некоторые браузеры не поддерживают фреймовую структуру документа или неправильно её интерпретируют, кроме того зачастую пользователи в настройках своих браузеров умышленно отключают поддержку фреймовой структуры html документа. И хотя процент таких браузеров и пользователей невелик, но тем не менее они есть.
Теперь представьте что Вы построили свой сайт с помощью фреймовой структуры и вот некоторые посетители, может быть сами не подозревая в чем проблема, пытаются открыть Ваш сайт, а их браузер выдает ошибку! Что они подумают о Вашем сайте? я думаю, что то типа: "Фу.. ерунда какая то.. больше сроду сюда не зайду!".
Для того что бы дать понять пользователю, что его браузер/настройки браузера не поддерживают фреймы существует тег <![CDATA[
</b> .</p>
<p>Тег <b><noframes>
</b> выводит текст, заключенный в него в том случае, если браузер пользователя не поддерживает фреймы или они принудительно выключены в его настройках. Если же фреймы поддерживаются браузером пользователя, то данный тег попросту игнорируется.</p>
<p> <html> <br>
<head> <br>
<title>фреймы</title> <br>
</head> <br>
<frameset cols="*,800,*" border="0"> <br><b><noframes>Извините, но Ваш браузер не поддерживает фреймы..]]>
Результат примера будет заметен, если Ваш браузер и в правду не поддерживает фреймы (тут я надолго задумался.. :) если это так, то зачем вообще читать эту главу?) или же Вы в качестве эксперимента выключили поддержку фреймов в своём браузере.
Тег <![CDATA[
</b> должен быть расположен внутри тега <b><frameset>
</b></p>
<p>С плавающим фреймом всё ещё более просто, достаточно написать нужный текст между <b><iframe> </iframe>
</b> и данная надпись будет выводится на экран, в том случае если браузер не поддерживает фреймы.</p>
<p>
<iframe src="primer.html" width="300" height="250" align ="left" scrolling="auto" frameborder="1"><b>Извините, но Ваш браузер не поддерживает фреймы..
</b></iframe>
</p>
<ul><p>Перед тем как начать создавать страницу с использованием фрёймовой структуры проанализируйте её макет, размеры каждого окна, наличие или отсутствие в них полос прокруток и т. д. После этого можно создавать подключаемые <a href="/settings/chem-otkryt-obemnyi-fail-html-chem-otkryt-fail-html.html">HTML файлы</a> особо не переживая за их взаимное расположение относительно друг друга..</p><p>Используйте тег <b><noframes>
</b> . Помните что если в Вашем браузере сайт работает и отображается так как Вы и задумывали то у других пользователей дела могут обстоять иначе!</p>
</ul>
<p>Большинство документов HTML не помещается на одной странице, поэтому для их просмотра пользователю приходится сдвигать документ в окне навигатора. Кроме того, для навигации необходимо искать ссылки на другие документы, которые могут быть расположены в любом, самом неожиданном месте страницы.</p>
<p>Вы сможете сделать свой сервер намного удобнее для просмотра, если предоставите пользователю многооконный интерфейс, реализованный при помощи фреймов. В этом случае окно навигатора разделяется на несколько окон (фреймов), в каждом из которых отображается содержимое различных документов HTML (рис. 6.1). Таким образом, можно работать одновременно с несколькими документами.</p>
<p>Рис. 6.1. Страница нашего сервера WWW, реализованная с использованием фреймов</p>
<p>Наша страница состоит из трех фреймов. Первый фрейм расположен в верхней части окна и служит для отображение логотипа. Второй фрейм предназначен для отображения ссылок на различные разделы сервера, представляющие собой ни что иное, как <a href="/phone/chem-otlichayutsya-gipertekstovye-dokumenty-ot-obychnyh-gipertekstovyi-dokument.html">обычные документы</a> HTML. И, наконец, третий фрейм имеет самые <a href="/services/primery-populyarnyh-napravlenii-veb-dizaina-bolshie-razmery-bukv-v-tekstah.html">большие размеры</a> и предназначен для просмотра документов.</p>
<p>Мы настроили параметры фрейма оглавления и фрейма просмотра таким образом, что пользователь может менять их <a href="/services/gorizontalnaya-avatarka-v-kontakte-novyi-dizain-vkontakte.html">горизонтальный размер</a>, передвигая мышью вертикальную <a href="/rates/kak-vstavit-razdelitelnuyu-liniyu-v-vorde-raznye-varianty.html">разделительную линию</a>, расположенную между фреймами. Если содержимое документа не помещается внутри фрейма, в правой части соответствующего окна появляется полоса просмотра.</p>
<p>Пользуясь ссылками в окне фрейма оглавления, вы можете загружать в фрейм просмотра <a href="/internet/soft-dlya-sozdaniya-vyvesok-skachat-torrent-scribus-sozdanie.html">различные документы</a>, которые, в свою очередь, также могут иметь ссылки. Разумеется, мы не претендуем на то, что расположение и назначение фреймов выбраны на нашем сервере оптимальным образом, однако вы можете создать для своего сервера любое количество фреймов и расположить их как угодно.</p>
<p>Заметим, что далеко не все навигаторы способны работать с фреймами. Поэтому несмотря на то что фреймы придают страницам сервера более привлекательный вид и облегчают работу пользователя, их можно встретить далеко не на всех серверах WWW. В качестве альтернативы фреймам обычно применяют таблицы.</p>
<h2><span>Структура документа с фреймами
</span></h2>
<p>Прежде всего необходимо подготовить документ HTML, в котором содержится описание размеров, расположения и других параметров фреймов. Этот документ должен иметь <a href="/settings/18-dlya-chego-ispolzuyutsya-sleduyushchie-vidy-skanerov-osnovnye.html">следующий вид</a>:</p>
<span>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE>
</HEAD>
<!-- Определение фреймов -->
<FRAMESET ROWS="90,*" FRAMEBORDER=1 BORDER=1>
<FRAME SRC="frame1.htm">
<FRAME SRC="frame2.htm">
<!-- Вариант для навигатора, не способного работать с фреймами -->
<NOFRAME>
<BODY BGCOLOR="#FFFFFF">
. . .
</BODY>
</NOFRAME>
</FRAMESET>
</HTML>
</span>
<p>В начале документа HTML, который предназначен для описания фреймов, нет привычного оператора <BODY>. Вместо этого там расположен оператор определения набора фреймов <FRAMESET>, который используется в паре с оператором </FRAMESET>. Параметры оператора <FRAMESET> описывают набор фреймов в целом, задавая размеры, <a href="/services/kak-otlichit-poddelku-s4-ot-originala-samsung-galaxy-s4-kitaiskaya-kopiya.html">внешний вид</a> рамки и так далее.</p>
<p>Между операторами <FRAMESET> и </FRAMESET> находятся операторы <FRAME>, которые определяют параметры отдельных фреймов. В частности, операторы <FRAME> задают адреса URL документов HTML, которые загружаются в фреймы сразу после их создания.</p>
<p>Помимо операторов <FRAME>, внутри пары операторов <FRAMESET> и </FRAMESET> необходимо разместить операторы <NOFRAME> и </NOFRAME>. Между этими операторами вы должны расположить документ HTML, который будет отображаться навигаторами, не способными работать с фреймами. К числу таких относятся, например, навигаторы NSCA Mosaic и Microsoft Internet Explorer версии 2.0, а также Netscape Navigator версий, более ранних чем 2.0.</p>
<p>В простейшем случае этот документ должен содержать сообщение о том, что <a href="/phone/kak-raskrutit-gruppu-v-kontakte-samostoyatelno-kak-raskrutit-gruppu.html">данную страницу</a> лучше всего просматривать более <a href="/rates/gps-koordinaty-na-karte-yandex-kak-vvodit-koordinaty-v-yandeks-navigator.html">современными навигаторами</a>. Однако лучше всего если вы подготовите второй вариант страницы, специально предназначенный для просмотра старыми навигаторами - кто может заранее предугадать, с какими навигаторами работает пользователь?</p>
<p>Заметим, что можно создавать вложенные фреймы, определяя наборы фреймов внутри пары операторов <FRAMESET> и </FRAMESET>:</p>
<span>
<FRAMESET ROWS="90,*" FRAMEBORDER=0 BORDER=1>
<FRAME SCROLLING="no" NAME="title" NORESIZE SRC="title.htm">
<FRAMESET COLS="25%,75%" FRAMEBORDER=0 BORDER=1>
<FRAME SCROLLING="auto" NAME="toc" SRC="toc.htm">
<FRAME SCROLLING="auto" NAME="main page" SRC="main.htm">
</FRAMESET>
<NOFRAME>
<BODY BGCOLOR="#FFFFFF">
. . .
</BODY>
</NOFRAME>
</FRAMESET>
</span>
<p>Именно таким образом созданы фреймы на нашем сервере.</p>
<p>Вы можете заменить фрейм на набор фреймов, заменив соответствующий оператор <FRAME> на определение набора, сделанное оператором <FRAMESET>.</p>
<h2><span>Определение параметров фреймов
</span></h2>
<p>Прежде всего рассмотрим параметры оператора <FRAMESET>, предназначенного для определения набора фреймов.</p>
<table border="1" cellspacing="0" cellpadding="3"><tr><td width="130" valign="top"><p>Параметр</p>
</td>
<td width="327" valign="top"><p>Описание</p>
</td>
</tr><tr><td width="130" valign="top">
</td>
<td width="327" valign="top"><p>Ширина колонки в процентах, пикселах или <a href="/settings/masshtabirovanie-neskolkih-fonov-otnositelnoe-izmenenie-razmera.html">относительный размер</a></p>
</td>
</tr><tr><td width="130" valign="top">
</td>
<td width="327" valign="top"><p>Высота строки в процентах, пикселах или относительный размер</p>
</td>
</tr><tr><td width="130" valign="top">
</td>
<td width="327" valign="top">
</td>
</tr><tr><td width="130" valign="top">
</td>
<td width="327" valign="top"><p>Используется только навигатором Netscape Navigator. Задает толщину рамки фрейма в пикселах</p>
</td>
</tr><tr><td width="130" valign="top">
</td>
<td width="327" valign="top"><p>С помощью этого параметра можно задать дополнительное расстояние между фреймами в пикселах</p>
</td>
</tr></table><p>Параметры COLS и ROWS нужны в том случае, когда фреймы, определенные в наборе, располагаются в виде таблицы. Первый из этих параметров указывает ширину колонки, а второй - высоту строки. Если фреймы располагаются в одном столбце, параметр COLS указывать не надо. Аналогично, если фреймы занимают только одну строку, не нужно указывать параметр ROWS.</p>
<p>Вы можете задать значения для параметров COLS и ROWS либо в процентном отношении, соответственно, к ширине и высоте окна навигатора, либо в пикселах. Если вместо значения указан символ *, колонка или строка занимают всю оставшуюся часть окна.</p>
<p>Например, ниже указано, что высота первого фрейма равна 90 пикселам, а второй фрейм занимает всю нижнюю часть окна навигатора:</p>
<FRAMESET ROWS="90,*">
<p>В следующем примере два фрейма, расположенные рядом, занимают, соответственно, 20% и 80% ширины окна навигатора.</p>
<FRAMESET COLS="20%,80%">
<p>Другой оператор, который используется для определения параметров фреймов - это оператор <FRAME>. Он имеет следующие параметры:</p>
<table border="1" cellspacing="0" cellpadding="3"><tr><td width="130" valign="top"><p>Параметр</p>
</td>
<td width="327" valign="top"><p>Описание</p>
</td>
</tr><tr><td width="130" valign="top">
</td>
<td width="327" valign="top"><p>Используется только для “плавающих фреймов” в навигаторе Microsoft Internet Explorer. Задает выравнивание фрейма или текста, расположенного рядом с фреймом. Этот параметр может принимать следующие значения: LEFT, CENTER, RIGHT,TOP, BOTTOM</p>
</td>
</tr><tr><td width="130" valign="top">
</td>
<td width="327" valign="top"><p>Размер отступа по вертикали от границ фрейма в пикселах</p>
</td>
</tr><tr><td width="130" valign="top">
</td>
<td width="327" valign="top"><p>Размер отступа по горизонтали от границ фрейма в пикселах</p>
</td>
</tr><tr><td width="130" valign="top">
</td>
<td width="327" valign="top"><p>Если значение этого параметра равно 1, фреймы будут иметь трехмерную рамку, ширина которой задается в пикселах. В том случае, когда указано значение 0, рамка не создается</p>
</td>
</tr><tr><td width="130" valign="top">
</td>
<td width="327" valign="top"><p>Этот параметр задает имя фрейма, которое используется в операторе ссылки <A> для указания, в какой фрейм нужно загрузить новый документ</p>
</td>
</tr><tr><td width="130" valign="top">
</td>
<td width="327" valign="top"><p>Если указан этот параметр, пользователь не сможет изменять размеры фрейма, передвигая его границы мышью</p>
</td>
</tr><tr><td width="130" valign="top">
</td>
<td width="327" valign="top"><p>Параметр SCROLLING определяет, нужно ли создавать полосы просмотра для свертки содержимого фрейма. Для этого параметра можно указывать следующие значения:</p><p>YES полосы просмотра создаются всегда;</p><p>NO полосы просмотра не создаются;</p><p>AUTO полосы просмотра создаются только при необходимости, когда документ HTML не помещается полностью в окне фрейма</p>
</td>
</tr><tr><td width="130" valign="top">
</td>
<td width="327" valign="top"><p>Адрес URL файла с документом HTML, который загружается в окно фрейма</p>
</td>
</tr></table><h2><span>Пример документа HTML с фреймами
</span></h2>
<p>В качестве примера приведем в сокращенном виде исходный текст документа, определяющего фреймы, показанные на рис. 6.1.</p>
<span>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Alexandr Frolov & Grigory Frolov</TITLE>
</HEAD>
<FRAMESET ROWS="90,*" FRAMEBORDER=0 BORDER=1>
<FRAME SCROLLING="no" NAME="title" NORESIZE SRC="title.htm" MARGINHEIGHT=1>
<FRAMESET COLS="25%,75%" FRAMEBORDER=0 BORDER=1>
<FRAME SCROLLING="auto" NAME="toc" SRC="toc.htm">
<FRAME SCROLLING="auto" NAME="main page" SRC="main.htm">
</FRAMESET>
<NOFRAME>
<BODY BGCOLOR="#FFFFFF">
<TABLE><TR><TD VALIGN=TOP><img src='/internet/plavayushchie-freimy-razmeshchenieplavayushchih-freimov-v-dokumentah-html.html' loading=lazy></TD><TD VALIGN=TOP><img src='/internet/plavayushchie-freimy-razmeshchenieplavayushchih-freimov-v-dokumentah-html.html' loading=lazy></TD></TR></TABLE>
<H2></H2>
<P>На этом сервере вы можете найти подробную информацию
о наших книгах из серий "Персональный компьютер. Шаг за шагом" и
"Библиотека системного программиста":
. . .
Домашняя страница<BR>
Новости<BR>
Книги<BR>
Компьютерра<BR>
Партнеры и друзья<BR>
Поиск вирусов<BR>
Set English Language<BR>
<CENTER><HR>
Эту страницу лучше всего просматривать навигаторами MS Internet Explorer v3.0 или Netscape Navigator
<TABLE><TR><TD>
<img src='/internet/plavayushchie-freimy-razmeshchenieplavayushchih-freimov-v-dokumentah-html.html' loading=lazy>
</TD><TD>
<img src='/internet/plavayushchie-freimy-razmeshchenieplavayushchih-freimov-v-dokumentah-html.html' loading=lazy>
</TD></TR></TABLE>
<img src='/internet/plavayushchie-freimy-razmeshchenieplavayushchih-freimov-v-dokumentah-html.html' loading=lazy><BR>
<FONT SIZE=2> frolov@glas.apc.org</FONT>
<BR><FONT SIZE=1> </FONT>
</CENTER>
</BODY>
</NOFRAME>
</FRAMESET>
</HTML>
</span>
<p>Здесь мы определили два набора фреймов, причем второй набор вложен в первый.</p>
<p>Для первого набора мы определили один фрейм, расположенный горизонтально. Первый из них имеет высоту 90 пикселов и используется для размещения нашего логотипа, второй занимает все оставшееся пространство:</p>
<span>
<FRAMESET ROWS="90,*" FRAMEBORDER=0 BORDER=1>
</span>
<p>Как видно из этой строки, фреймы не имеют рамки (значение параметра FRAMEBORDER равно 0). Мы убрали рамку, потому что она выглядит слишком тяжеловесно. Дополнительно мы указали, что при просмотре в навигаторе Netscape Navigator фреймы должны иметь рамку толщиной 1 пиксел.</p>
<p>Зачем мы эти сделали?</p>
<p>Нам хотелось, чтобы сервер выглядел по возможности одинаково в окнах навигаторов Microsoft Internet Explorer и Netscape Navigator. Однако эти навигаторы работают по-разному с рамками фреймов.</p>
<p>Если в операторе <FRAMESET> указать, что фреймы не должны иметь рамки, то Microsoft Internet Explorer не рисует трехмерную рамку. Однако между фреймами остается маленький зазор <a href="/services/t-mno-seryi-cvet-html-cvet-v-stilyah-mozhno-zadavat-raznymi-sposobami-po.html">серого цвета</a>, который выглядит как рамка. Эту рамку можно использовать, например, для изменения размера фрейма (если при определении фрейма для него не указан параметр NORESIZE, запрещающий изменение размера).</p>
<p>Навигатор Netscape Navigator в указанной выше ситуации (когда значение параметра FRAMEBORDER равно нулю) не оставляет никакого зазора между фреймами. В этом и выражается отличие. Для того чтобы сделать зазор размером в один пиксел, мы указали <a href="/settings/vneshnyaya-ramka-css-otstupy-i-ramki-v-css-s-pomoshchyu-parametrov-margin-padding-i-border.html">параметр BORDER</a>, который распознается только навигатором Netscape Navigator.</p>
<p>В <a href="/rates/kak-rasshirit-ob-m-mesta-v-razdele-zhestkogo-diska-c-ili-d-ne-teryaya-dannyh.html">свободном пространстве</a> ниже фрейма первого набора мы расположили еще один набор фреймов. Второй набор фреймов состоит из двух фреймов, расположенных вертикально. Эти фреймы занимают, соответственно, 25% и 75% ширины родительского фрейма:</p>
<span>
<FRAMESET COLS="25%,75%" FRAMEBORDER=0 BORDER=1>
</span>
<p>Вернемся опять к первому набору фреймов.</p>
<p>В этом наборе определен только один фрейм:</p>
<span>
<FRAME SCROLLING="no" NAME="title" NORESIZE SRC="title.htm" MARGINHEIGHT=1>
</span>
<p>Так как этот фрейм предназначен для отображения логотипа, для него не используется свертка. Поэтому значение параметра SCROLLING равно “no”.</p>
<p>Имя фрейма указано в параметре NAME как “title”. Дополнительно мы указали параметр NORESIZE, запретив изменение размера фрейма мышью.</p>
<p>Параметр SRC указан как “title.htm”. Из файла с этим именем загружается документ HTML при отображении фрейма. Заметим, что файл title.htm расположен в том же каталоге, что и файл, определяющий фреймы.</p>
<p>Параметр MARGINHEIGHT задает отступ по высоте, равный 1 пикселу. Мы указали этот параметр для уменьшения зазора между верхней границей фрейма и графическими изображениями логотипа.</p>
<p>Файл title.htm содержит таблицу с двумя графическими изображениями и не имеет никаких особенностей:</p>
<span>
<HTML>
<BODY BGCOLOR="#FFFFFF">
<TABLE>
<TR><TD VALIGN=TOP><img src='/internet/plavayushchie-freimy-razmeshchenieplavayushchih-freimov-v-dokumentah-html.html' loading=lazy></TD>
<TD VALIGN=TOP><img src='/internet/plavayushchie-freimy-razmeshchenieplavayushchih-freimov-v-dokumentah-html.html' loading=lazy></TD></TR>
</TABLE>
</BODY>
</HTML>
</span>
<p>Теперь перейдем к второму набору фреймов, разделяющих по вертикали нижнюю часть окна навигатора на две половины. Два фрейма из этого набора определены следующим образом:</p>
<span>
<FRAME SCROLLING="auto" NAME="toc" SRC="toc.htm">
<FRAME SCROLLING="auto" NAME="main page" SRC="main.htm">
</span>
<p>Так как для параметра SCROLLING указано значение "auto", то если содержимое не помещается в окне фрейма, около фрейма появляются полосы просмотра.</p>
<p>Окно левого фрейма называется “toc”. Оно загружается из файла с именем toc.htm, который состоит из ссылок на разделы сервера:</p>
<span>
<HTML>
<BODY BGCOLOR="#B0FFD8">
<BASEFONT SIZE=2>
<LEFT>
Домашняя страница<BR>
Добро пожаловать<BR>
Новости<BR>
<P>Книги<BR>
<P>КАПИТАЛ<BR>
КОМПЬЮТЕРРА<BR>
Вопросы и ответы<BR>
Ресурсы Internet<BR>
<P>Вирусы<BR>
<P>Партнеры и друзья<BR>
Книга гостей<BR>
<P>Set English Language<BR>
</LEFT>
</BODY>
</HTML>
</span>
<p>Обратите внимание, что в операторах <A> параметр TARGET, задающей имя окна для загрузки документа, имеет различные значения. В параметре TARGET вы должны указать имя окна, в которое будет выполняться загрузка документа.</p>
<p>Для параметра TARGET можно указывать одно из нескольких предопределенных имен:</p>
<p>Когда пользователь выбирает строку “Домашняя страница”, документ HTML с адресом http://www.glasnet.ru/~frolov/index.html загружается в окно, которое называется _top. В результате указанный документ займет все внутреннее пространство окна навигатора.</p>
<p>При необходимости вы можете загружать документы и в окно левого фрейма, указав в параметре TARGET значение toc. При этом можно сделать так, что при выборе в левом фрейме какого-либо раздела содержимое этого фрейма полностью изменяется, отображая, например, названия подразделов нового раздела.</p>
<p>Документ main.htm, который первоначально загружается в окно фрейма main page, представлен ниже:</p>
<span>
<HTML>
<BODY BGCOLOR="#FFFFFF">
<BGSOUND SRC="../midi/bach.mid"></BGSOUND>
<embed src="../midi/bach.mid" hidden="yes">
<H2>Добро пожаловать на наш сервер WEB!</H2>
<P>На этом сервере вы можете найти подробную информацию
о наших книгах из серий "Персональный компьютер. Шаг за шагом" и
"Библиотека системного программиста":
<UL>
<LI>аннотации и оглавления;
<LI>исходные тексты программ, опубликованных в книгах;
<LI>наши планы на будущее;
<LI>список ошибок, замеченных в наших книгах;
<LI>информацию о наших друзьях;
<LI>бесплатные книги, доступные в режиме online
</UL>
Эти серии книг предназначены для самого широкого
круга людей, чья работа связана с компьютерами.
<P>Мы подготовили для вас и кое-что еще!
<CENTER><HR><TABLE><TR><TD>
<img src='/internet/plavayushchie-freimy-razmeshchenieplavayushchih-freimov-v-dokumentah-html.html' loading=lazy>
</TD><TD>
<img src='/internet/plavayushchie-freimy-razmeshchenieplavayushchih-freimov-v-dokumentah-html.html' loading=lazy>
</TD></TR></TABLE>
<P><img src='/internet/plavayushchie-freimy-razmeshchenieplavayushchih-freimov-v-dokumentah-html.html' loading=lazy><BR>
<FONT SIZE=2>Посылайте ваши комментарии по адресу frolov@glas.apc.org</FONT>
<BR><FONT SIZE=1> Александр Фролов, Григорий Фролов, 1997</FONT>
</CENTER>
</BODY>
</HTML>
</span>
<p>Рассмотрим этот документ.</p>
<p>В самом начале документа находятся два оператора, предназначенные для вставки <a href="/phone/programma-dlya-obrabotki-zvukovyh-failov-audioredaktory-zvukovye-redaktory.html">звукового файла</a>. В <a href="/internet/kak-vosstanovitsya-v-odnoklassnikah-zabyl-parol-vosstanovlenie.html">данном случае</a> мы вставили <a href="/settings/kak-zakachat-muzyku-na-ipod-raznymi-sposobami-videourok-kak-zakachat.html">музыкальный файл</a> MIDI:</p>
<span>
<BGSOUND SRC="../midi/bach.mid"></BGSOUND>
<embed src="../midi/bach.mid" hidden="yes">
</span>
<p>Первый из этих операторов работает только в навигаторе Microsoft Internet Explorer, второй - еще и в навигаторе Netscape Navigator.</p>
<p>Ваш сервер доступен всей <a href="/settings/novyi-podhod-k-zashchite-informacii-sistemy-obnaruzheniya-kompyuternyh-ugroz-programmno-apparatnye-met.html">сети Internet</a>, а к этой сети подключены самые <a href="/services/sinhronizaciya-papok-i-failov-po-lokalnoi-seti-sftp-v-oblako-kak.html">разные компьютеры</a> с различными <a href="/settings/operacionnaya-sistema-rosa-novaya-rossiiskaya-operacionnaya-sistema-dlya-pk.html">операционными системами</a> и навигаторами. Разумеется, вы едва ли сможете обеспечить одинаковый внешний вид страниц сервера для всех этих систем, однако стоит обязательно побеспокоиться о наиболее распространенных навигаторах. Таковыми на момент написания этой книги являются Netscape Navigator и Microsoft Internet Explorer. Как правило, большинство серверов WWW оптимизируются именно для работы с этими навигаторами.</p>
<p>Если вы поступаете также, где-нибудь на видном месте неплохо было бы сообщить, какими навигаторами лучше всего просматривать страницы вашего сервера. Мы это сделали следующим образом, разместив пиктограммы навигаторов и ссылки на серверы, откуда их можно получить, в таблице:</p>
<span>
<CENTER><HR>
Эту страницу лучше всего просматривать навигаторами MS Internet Explorer v3.0 или Netscape Navigator
<TABLE><TR><TD>
<img src='/internet/plavayushchie-freimy-razmeshchenieplavayushchih-freimov-v-dokumentah-html.html' loading=lazy>
</TD><TD>
<img src='/internet/plavayushchie-freimy-razmeshchenieplavayushchih-freimov-v-dokumentah-html.html' loading=lazy>
</TD></TR></TABLE>
</span>
<p>Строка, показанная ниже, вставляет в документ HTML так называемый счетчик посещений:</p>
<span>
<P><img src='/internet/plavayushchie-freimy-razmeshchenieplavayushchih-freimov-v-dokumentah-html.html' loading=lazy><BR>
</span>
<p>В документе этот счетчик может выглядеть по-разному, в зависимости от способа реализации. В нашем случае счетчик формируется программой CGI с именем w3count.exe, которой в качестве параметра передается имя файла frolov1. Этот файл хранит значение счетчика.</p>
<p>Заметим, что программы CGI вам скорее всего придется составлять самим, хотя многие поставщики услуг Internet обычно предоставляют некоторые программы CGI для тех, кто создает на сервере поставщиков свои <a href="/rates/virtualnyi-media-server-kak-nastroit-dlna-server.html">виртуальные серверы</a> WWW. В отдельной главе нашей книги мы расскажем вам о том, как составлять такие программы.</p>
<p>В конце файла main.htm мы разместили наш <a href="/internet/kak-zaregistrirovat-pochtovyi-adres-kak-voiti-v-elektronnuyu-pochtu-ot-google-kak-uprostit-rabotu-s.html">почтовый адрес</a> и сведения об авторских правах на информацию, расположенную на сервере:</p>
<span>
<FONT SIZE=2>Посылайте ваши комментарии по адресу frolov@glas.apc.org</FONT>
<BR><FONT SIZE=1> Александр Фролов, Григорий Фролов, 1997</FONT>
</span>
<p>Это является общепринятой практикой и при создании своего сервера вам следует поступить аналогичным образом.</p>
<p>Приведенные в этом разделе исходные тексты документов HTML с фреймами вы сможете найти на дискете, которая продается вместе с книгой, в каталоге Chap6/Frames.</p>
<h2><span>Плавающие фреймы
</span></h2>
<p>Навигатор Microsoft Internet Explorer позволяет создавать еще одну разновидность фреймов - так называемые плавающие фреймы.</p>
<p>Плавающий фрейм вставляется в документ HTML аналогично графическому изображению (рис. 6.2).</p>
<p>Рис. 6.2. Образец документа HTML с плавающим фреймом</p>
<p>Вы можете использовать плавающий фрейм не только для размещения текста в тексте, но и для организации ссылок на другие документы.</p>
<p>Вокруг плавающего фрейма может располагаться текст или другие графические изображения. Вы можете указывать для фрейма такие же атрибуты выравнивания, как и для <a href="/internet/filtraciya-cvetnogo-izobrazheniya-graficheskie-filtry-na.html">графических изображений</a>. К сожалению, навигатор Netscape Navigator и NSCA Mosaic игнорируют плавающие фреймы, что ограничивает область применения последних.</p>
<p>Плавающий фрейм вставляется в документ HTML при помощи оператора <IFRAME>, который всегда используется в паре с оператором </IFRAME>. Для этого оператора можно задавать параметр ALIGN, который задает выравнивание текста, расположенного около плавающего фрейма, параметры WIDTH и HEIGHT, задающие размеры фрейма, а также параметры HSPACE и VSPACE, которые применяются в операторе <IMG>.</p>
<p>Еще один параметр, который допустим при описании плавающего фрейма - FRAMEBORDER. Он может принимать значения 1 или 0. Если значение этого параметра равно 1, плавающий фрейм заключается в трехмерную рамку (используется по умолчанию), а если 0 - рамка не отображается.</p>
<p>Параметр SCROLLING может принимать значения “yes”, “no” или “auto”. Если указано значение “yes”, окно плавающего фрейма будет иметь полосы просмотра. Если “no” - полос просмотра не будет. В том случае, когда для параметра SCROLLING указано значение “auto”, полосы просмотра будут создаваться только при необходимости, когда содержимое документа не помещается в окне фрейма.</p>
<p>Приведем <a href="/settings/ustanovka-rpm-paketov-v-linux-tradicionnyi-sposob-ustanovki---ustanovka-iz.html">исходный текст</a> документа HTML, в который вставлен плавающий фрейм (листинг 6.1).</p>
<p>Листинг 6.1. Файл chap6\IFrames\home.htm</p>
<span>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Плавающие фреймы в <a href="/internet/chto-takoe-html-struktura-dokumenta-html.html">документах HTML</a></TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H2>Размещение плавающих фреймов в документах HTML</H2>
Вы можете включить внутрь документа HTML плавающий фрейм:
<P><IFRAME SRC="include.htm" ALIGN=LEFT>
</IFRAME>Если указано выравнивание по левой границе,
текст, расположенный рядом с плавающим фреймом, будет
расположен справа от фрейма
<BR CLEAR=LEFT>А этот текст располагается ниже фрейма.
</BODY>
</HTML>
</span>
<p>В этом документе определен плавающий фрейм, в который загружается документ HTML, расположенный в файле include.htm (листинг 6.2).</p>
<p>Обратите внимание, что для выполнения принудительного перехода к <a href="/rates/komandnaya-stroka-v-vindovs-10-novyi-i-samyi-udobnyi-sposob-otkryt.html">новой строке</a> после фрейма мы использовали оператор <BR> с параметром CLEAR=LEFT.</p>
<p>Листинг 6.2. Файл chap6\IFrames\include.htm</p>
<span>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Документ для плавающего фрейма</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<P>Содержимое этого документа отображается внутри
плавающего фрейма.
<P>Оно отображается в окне, которое имеет
вертикальную полосу просмотра.
<P>Если содержимое документа,
загруженного в плавающий фрейм, не помещается в окне фрейма,
пользователь может пролистать его при помощи этой
полосы просмотра.
</BODY>
</HTML>
</span>
<script type="text/javascript">
<!--
var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()
//-->
</script><br>
<br>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
</div>
<div class="single-popular">
<div class="single-popular-tit col-lg-12">
Популярное в рубрике:
</div>
<div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="single-popular-item-wrp">
<img width="150" height="120" src="/uploads/5be8b76667696c4cd63a8c38979b50af.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Как объединить слои в фотошопе в один или соединить их в группу Как объединить несколько слоев в фотошоп"/ loading=lazy>
<div class="single-popular-item-tit">
Как объединить слои в фотошопе в один или соединить их в группу... </div>
<a href="/settings/sposoby-obedineniya-sloev-v-fotoshope-kak-obedinit-sloi-v-fotoshope-v.html" rel="bookmark" title="Как объединить слои в фотошопе в один или соединить их в группу Как объединить несколько слоев в фотошоп">читать</a>
<div class="clr">
</div>
</div>
</div>
<div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="single-popular-item-wrp">
<img width="150" height="120" src="/uploads/33b72e60e1d3066a9663f391221dc014.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Перенос контактов на новый телефон android"/ loading=lazy>
<div class="single-popular-item-tit">
Перенос контактов на новый телефон android </div>
<a href="/phone/perenos-kontaktov-na-novyi-telefon-android-android-prilozheniya.html" rel="bookmark" title="Перенос контактов на новый телефон android">читать</a>
<div class="clr">
</div>
</div>
</div>
<div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="single-popular-item-wrp">
<img width="150" height="120" src="/uploads/ff504b14456f4702a94368a161811b1d.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Самсунг Галакси перезагружается сам по себе — Решения Galaxy note 4 перезагружается сам по себе"/ loading=lazy>
<div class="single-popular-item-tit">
Самсунг Галакси перезагружается сам по себе — Решения Galaxy note... </div>
<a href="/internet/esli-xiaomi-postoyanno-perezagruzhaetsya-samsung-galaksi-perezagruzhaetsya-sam-po.html" rel="bookmark" title="Самсунг Галакси перезагружается сам по себе — Решения Galaxy note 4 перезагружается сам по себе">читать</a>
<div class="clr">
</div>
</div>
</div>
<div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="single-popular-item-wrp">
<img width="150" height="120" src="/uploads/242e09224609f2b7cbd6b5b9f2adc411.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Основные возможности Kaspersky Rescue Disk"/ loading=lazy>
<div class="single-popular-item-tit">
Основные возможности Kaspersky Rescue Disk </div>
<a href="/rates/skachat-zagruzochnyi-disk-kasperskogo-osnovnye-vozmozhnosti-kaspersky-rescue.html" rel="bookmark" title="Основные возможности Kaspersky Rescue Disk">читать</a>
<div class="clr">
</div>
</div>
</div>
<div class="clr"></div>
</div>
</div>
<div class="sidebar col-lg-3 col-md-4 col-sm-12">
<div class="sidebar-wrp">
<div class="sidebar-wrp-title">Последние Статьи</div>
<div class="sidebar-wrp-des">
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/d93303aadea847492ee52538b585df87.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">Макбук не подключается к wifi Макбук не видит...</div>
<div class="clr"></div>
<a href="/phone/macbook-ne-podklyuchaetsya-k-wifi-avtomaticheski-makbuk-ne-podklyuchaetsya-k-wifi-makbuk-ne-vidit-vai-fai.html">читать</a>
</div>
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/094fe0c598853f299be65e8611b45d60.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">Как заработать на WebMoney</div>
<div class="clr"></div>
<a href="/internet/kak-zarabotat-rubli-na-webmoney-kak-zarabotat-na-webmoney-proverennye.html">читать</a>
</div>
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/280d369c9d1e343119c3d855af4b9c4d.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">"Супра", планшет: отзывы покупателей</div>
<div class="clr"></div>
<a href="/rates/planshet-podelka-est-takoi-supra-firma-supra-planshet-otzyvy-pokupatelei-plyusy-i-minusy.html">читать</a>
</div>
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/b1724f08fa52145089eaa72f836127ee.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">Местонахождения судов в реальном времени</div>
<div class="clr"></div>
<a href="/settings/voennye-korabli-v-realnom-vremeni-onlain-mestonahozhdeniya-sudov-v.html">читать</a>
</div>
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/534951a61241c179a7c060b9fe1143c8.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">Лучшие программы для Android Запись звонков от...</div>
<div class="clr"></div>
<a href="/rates/prilozheniya-dlya-android-obuchayushchie-programmy-dlya-detei-luchshie.html">читать</a>
</div>
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/e280b0808c5e749938522ba1df2a41ec.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">Удаляем не читателей в Твиттере</div>
<div class="clr"></div>
<a href="/services/kak-udalit-ne-vzaimnyh-chitatelei-v-twitter-udalyaem-ne-chitatelei-v.html">читать</a>
</div>
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/229610355b0a27a465c73ddb25664556.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">Подключаем интернет на ноутбуке: все возможные...</div>
<div class="clr"></div>
<a href="/phone/kak-vklyuchit-internet-na-kompyutere-ispolzuya-mobilnyi-telefon.html">читать</a>
</div>
<div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6">
<div class="last-post-img">
<img width="60" height="48" src="/uploads/5399be52c80b405fedf00779a6136b42.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div>
<div class="last-post-tit">Samsung Galaxy S IV – новый флагман...</div>
<div class="clr"></div>
<a href="/phone/samsung-galaxy-s4-vtoroi-vzglyad-samsung-galaxy-s-iv-novyi-flagman-galakticheskogo-masshtaba-galak.html">читать</a>
</div>
<div class="clr"></div>
</div>
</div>
<div id="text-4" class="widget widget_text sidebar-wrp"> <div class="textwidget">
</div>
</div>
<div id="ketena1" style="height:500px;width:260px;" align="center"></div>
<div class="clr"></div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="footer-contacts col-lg-6 col-md-6 col-sm-12 col-xs-12">
<img src="/logo/logo.png" loading=lazy>
<div class="footer-contacts-tit">innovakon.ru<br>Мобильные телефоны и связь</div>
<div class="footer-soc">
<div class="footer-soc-wrp">
<div class="soc_w">
<a href="#" class="soc-link vk" target="_blank"></a>
<a href="#" class="soc-link fb" target="_blank"></a>
</div>
</div>
</div>
</div>
<div class="footer-links col-lg-4 col-md-6 col-sm-12 col-xs-12">
</div>
<div class="footer-links col-lg-4 col-md-4 col-sm-4 col-xs-4" style="display: block;">
<ul>
<li><a href="">Редакция проекта</a></li>
<li><a href="">Реклама на сайте</a></li>
</ul>
<ul>
<li><a href="/feedback.html">Контакты</a></li>
<li><a href="/sitemap.xml">Карта сайта</a></li>
</ul>
</div>
</div>
</div>
<div class="copyright">© 2024 Мобильные телефоны и связь</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://innovakon.ru/wp-content/themes/trudinsp/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://innovakon.ru/wp-content/themes/trudinsp/js/SmoothScroll.js"></script>
<a id="scroll-to-top" href="#" title="Scroll to Top">Top</a>
<script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script>
<script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.4.1'></script>
<script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/jquery-smooth-scroll/js/jss-script.min.js?ver=4.8.3'></script>
<script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/ui/effect.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='/wp-includes/js/jquery/ui/effect-blind.min.js?ver=1.11.4'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var stbUserOptions = { "mode":"css","cssOptions":{ "roundedCorners":false,"mbottom":20,"imgHide":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/minus.png","imgShow":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/plus.png","strHide":"\u0421\u043a\u0440\u044b\u0442\u044c","strShow":"\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c"} };
/* ]]]]><![CDATA[> */
</script>
<script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/wp-special-textboxes/js/wstb.min.js?ver=5.5.101'></script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script>
<script type="text/javascript" id="slb_context">/* <![CDATA[ */if ( !!window.jQuery ) { (function($){ $(document).ready(function(){ if ( !!window.SLB ) { { $.extend(SLB, { "context":["public","user_guest"]} );} } })} )(jQuery);} /* ]]]]><![CDATA[> */</script>
</body>
</html>]]>
