Первый фрейм. Как создать страницу с фреймами

Фреймы — это HTML-элементы, позволяющие разделить окно веб-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация. Пользователи могут обращаться к меню в любой момент, и им не нужно возвращаться к предыдущей странице, чтобы выбрать другой пункт меню. Применение фреймов позволит вам «закрепить» в окне браузера изображения или другие неподвижные по замыслу элементы интерфейса, в то время как остальная часть страницы будет прокручиваться во фрейме.
Однако, стоит отметить, что в наши дни фреймы считаются устаревшим средством, а сайты с фреймами теперь считаются несолидными, так как профессиональные веб-мастера никогда не используют фреймы в своих проектах. С фреймами связан целый ряд печально известных проблем. Они, например, сбивают с толку поисковые машины, поскольку на страницах, которые содержат контент, нет ссылок на другие документы. Если вы хотите получать посетителей с поисковых систем, забудьте о фреймах. Понравившуюся страницу пользователю невозможно поместить в раздел закладки браузера, так как фреймы скрывают адрес страницы, на которой он находится, и всегда показывают только адрес веб-сайта. По этой причине они создают проблемы для браузеров при отслеживании хронологии и еще они не слишком приспособлены для разных размеров экранов и мобильных устройств.
Несмотря на то, что проекты с фреймами встречаются во всемирной паутине все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. У фреймов наряду с недостатками есть и некоторые достоинства, которые не позволяют отбросить эту технологию как бесперспективную.

Создание фреймов

Структура HTML-документа с фреймами внешне очень напоминает формат обычного HTML-документа. Как и в обычном HTML-документе, весь код помещен между парными тегами и , а в контейнере располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами вместо тега применяется парный тег (от англ. frame set – набор фреймов).
В следующем примере приведена структура HTML-документа с фреймами:

Пример: Структура HTML-документа с фреймами

• Попробуй сам »

В приведенном примере страница содержит три области, в каждую из которых первоначально загружаются HTML-документы frame_top.html, frame_left.html и frame_right.html. Помимо HTML-документов, фрейм может содержать и графику. Для этого необходимо указать адрес соответствующего изображения в атрибуте src , например src="image.gif" . Обратите внимание, что элемент используется без закрывающего тега.
Внутри контейнера могут содержаться только теги или другой набор фреймов, охваченный тегами и .
Тег имеет следующие атрибуты:

• rows — описывает разбиение страницы на строки:
• cols — описывает разбиение страницы на столбцы:

В значении атрибутов rows и cols необходимо указывать не количество строк или столбцов, а значение ширины и высоты фреймов. Все значения в списке разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или в процентах:

• cols="20%, 80%" — окно браузера разбивается на две колонки с помощью атрибута cols , левая колонка занимает 20%, а правая 80% окна браузера.
• rows="100, *" окно браузера разбивается на два горизонтальных окна с помощью атрибута rows , верхнее окно занимает 100 пикселов, а нижнее — оставшееся пространство, заданное символом звездочки.

Как видно из данного примера, контейнер с атрибутом rows вначале создает два горизонтальных фрейма, а вместо второго фрейма подставляется еще один , который разбивает нижний горизонтальный фрейм на две колонки с помощью атрибута cols , левая колонка занимает занимает 20%, а правая 80% окна браузера.
Если браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами </b> и <b> . Все, что находится между тегами </b> и <b> , игнорируется браузерами, поддерживающими фреймы. Таким образом разработчику нужно написать код, дублирующий содержимое фреймов другими средствами, и поместить этот код в контейнер </b> , тогда все пользователи смогут увидеть его веб-страницу.<br> Как уже отмечалось, для вставки в документ отдельного фрейма служит непарный тег <b><frame> </b> . Атрибут <b>src </b> задает документ, который должен отображаться внутри данного фрейма, например: <frame src="frame_top.html">. Если атрибут <b>src </b> отсутствует, отображается пустой фрейм.</p> <h2>Границы или пространство между фреймами</h2> <p>По умолчанию, браузер отображает серую и, как правило, в виде трехмерной линии границу между фреймами, с помощью которой посетители могут регулировать размер фрейма.<br> Границей фрейма можно управлять, как и любыми другими элементами фрейма. Для этого существует несколько атрибутов элемента <b><frameset> </b> , позволяющих настраивать границы фреймов. Толщина линии границы определяется атрибутом <b>border </b>. По умолчанию значение толщины границы равно пяти.<br> Чтобы скрыть границу фрейма, необходимо либо указать значение ширины границы равным нулю, либо присвоить значение «no» или «0» атрибуту <b>frameborder </b>. Атрибут <b>frameborder </b> может принимать только два противоположных значения. Если значение атрибута <b>frameborder </b> равно «yes» или «1», то граница фреймов будет отображаться, а если «0» или «no», то нет. Учтите, что значения атрибута <b>frameborder </b> различаются для разных браузеров. Чтобы решить эту проблему используйте дважды атрибут <b>frameborder </b>, а для некоторых браузеров требуется еще добавить атрибут <b>framespacing </b> со значением «0»:</p><p> <frameset frameborder="0" framespacing="0" frameborder="no" border="0"> </p><p>В следующем примере убираем границу между фреймами:</p> <h3>Пример: Убираем границу между фреймами</h3> <ul><li>Попробуй сам »</li> </ul><table><tr><td style="width: 10px;background-color:green;color: white;"> frame_left </td> <td style="width: 90%;background-color:lime;color: white;"> frame_right </td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Фреймы без границ</title> </head> <frameset cols="100,*" frameborder="0" framespacing="0" frameborder="no" border="0"> <frame src="frame_left.html" name=" frame_left" > <frame src="frame_right.html" name="frame_right" > </frameset> </html></p> <p>Если вы удалите границу между фреймами, посетители не смогут изменять размер фрейма в браузере. Вы можете также не допустить изменения размера фрейма, сохранив границы, используя атрибут <b>noresize </b>:</p><p> <frame src="frame_left.html" noresize> </p><p>С помощью атрибута <b>bordercolor </b> можно изменить цвет границы фрейма, необходимо только указать код или соответствующее зарезервированное имя цвета.<br> Ниже приведен пример html-страницы, которая содержит описанные выше атрибуты управления границей фрейма: цвет границы — красный, изменять размер верхнего фрейма нельзя:</p> <h3>Пример: Управление границей фреймов</h3> <ul><li>Попробуй сам »</li> </ul><table style="border-collapse:collapse;"><tr><td style="border-bottom: 4px solid red;background-color:blue;color: white;" colspan="2">frame_top</td> </tr><tr><td style="border-right: 4px solid red;width: 20%;background-color:green;color: white;">frame_left</td> <td style="width: 80%;background-color:lime;color: white;">frame_right</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Управление границей фреймов</title> </head> <frameset rows="150, *" border="10" bordercolor="red" frameborder="1" frameborder="yes"> <frame src="frame_top.html" noresize> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html"> </frameset> </frameset> </html></p> <p>Если вы хотите расположить страницу, отображаемую внутри фрейма, ближе к его границам, или, наоборот, отодвинуть дальше, измените атрибуты <b>marginheight </b> и <b>marginwidth </b> тэга <b><frame> </b> . Атрибут <b>marginheight </b> определяет отступ между содержимым фрейма и его верхней и нижней границами. Синтаксис:</p><p> <frame marginheight="число"> </p><p>Атрибут <b>marginwidth </b> определяет отступ между содержимым фрейма и его правой и левой границами. Синтаксис:</p><p> <frame marginwidth="число"> </p><p>Данная строка html, например, располагает отображаемую страницу вплотную к границе фрейма:</p> <p>Если страница отображает нежелательную для вас полосу прокрутки, вы можете решить эту проблему, указав атрибут <b>scrolling </b>="no" в тэге <b><frame> </b> . Но учтите, что если фрейм будет недостаточно большим, чтобы отобразить все содержимое страницы, то у посетителя не будет никакой возможности прокрутить отображаемую страницу.</p> <h2>Ссылки внутри фреймов</h2> <p>Переход по ссылке в обычном HTML-документе осуществляется следующим образом: нажимаете ссылку и текущий документ заменяется новым в текущем либо в новом окне браузера. При использовании фреймов схема загрузки html-документов отличается от обычной и главное отличие — это возможность загружать html-документ в один фрейм из другого фрейма.<br> Для загрузки документа в определенный фрейм используется атрибут <b>target </b> тега <b><a> </b> . В качестве значения атрибута <b>target </b> используется имя фрейма, в который будет загружаться документ, указанный атрибутом <b>name </b> тега <b><frame> </b> . Стоит также отметить, что имя фрейма должно начинаться либо с цифры либо с латинской буквы. Следующие имена используются в качестве зарезервированных:</p> <p>Для внешних ссылок следует задавать в качестве значения для атрибута target либо _top , либо _blank , для того, чтобы сторонние проекты отображались не в ваших фреймах, а занимали полное окно браузера.</p> <p>В следующем примере изображен HTML-документ, в правый фрейм которого загружается страница по ссылке, помещенной в верхний фрейм. Ссылка на документ, который откроется в правом фрейме:</p><p> <a href="http://www.google.com" target="frame_right">Google</a> </p><p>Правому фрейму присваивается имя <i>frame_right </i>:</p><p> <frame src="frame_right.html" name="frame_right"> </p><p>Чтобы документ загружался в указанный фрейм, используется конструкция <i>target="frame_right" </i>, как показано в примере:</p> <h3>Пример: Ссылка на другой фрейм</h3> <ul><li>Попробуй сам »</li> </ul><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Ссылка на другой фрейм</title> </head> <frameset rows="100, *"> <frame src="frame_topic.html"> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html" name="frame_right"> </frameset> <noframes> <p>Ваш браузер не отображает фреймы</p>

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

Элемент

На заре сайтостроения веб-ресурсы широко использовали фреймы для отображения отдельных частей страниц. Но с приходом новой версии HTML 5 всё изменилось. Элементы разметки <frame >, <frameset > и <noframes > признаны устаревшими. Заменой им стал один-единственный тег - <iframe >. Как добавить в html

В приведённой разметке достаточно заменить адрес сайта на любой другой и, если это необходимо, скорректировать размеры фрейма.

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

Часто при создании сайта возникает необходимость открывать в одном окне браузера одновременно несколько HTML документов.. так вот фреймы как раз таки и созданы для того чтобы определить рабочие области для каждого документа. Кроме того, фреймы - это хороший инструмент, с помощью которого можно заниматься версткой страницы, они служат достойной "альтернативой" табличному способу верстки страницы.. в кавычки взял слово "альтернатива" потому, что это совершенно иной способ построения сайта со своими достоинствами и недостатками и его достаточно трудно сопоставлять с доселе привычным построением сайта.. но обо всем по порядку..

Ну что, начнем? Допустим нам необходимо в одном окне браузера открыть сразу три HTML документа и расположить их к примеру вот таким способом:

Что нам для этого нужно? Для начала естественно нам необходимо создать три отдельных html документа которые мы собственно и будем открывать в одном окне.. Пусть первый документ будет нести в себе графическое изображение и будет выполнять роль логотипа назовём его logotype.html , вторым документом будет некое содержание.. назовём menu.html , ну и третьим документ с кучей текста. text.html. Конечно Вы можете придумать свои названия, как впрочем и содержание документов, но пока лучше всё же копируйте мои.. так будет удобнее и мне и Вам.

Итак, есть три файла logotype.html, menu.html и text.html.. которые нам необходимо разместить под одной крышей, а крыши у нас как раз таки ещё пока и нет..

Пишем "крышу", главный документ к которому будем подключать наши файлы. Раз он будет главным, присваиваем ему имя index.html.

Вот привычная для нас структура документа которую мы пережевали ещё в самом начале нашего обучения.. Фреймы ломают сложившиеся стереотипы! Структура фрейм документа имеет вот такой вид:

Отсутствие тега компенсирует новый тег - установить фрейм или набор фреймов.. с этим товарищем мы собственно и будем работать дальше.

Тег имеет атрибуты rows и cols - эти атрибуты указывают браузеру на то, как следует размещать фреймы в окне браузера

rows - горизонтально cols - вертикально

В нашем случае нам необходимо горизонтальное размещение фреймов.. значит пишем так:

rows="15%,15%,70%" >

Проценты после знака равенства - это не что иное, как размеры наших окошек- фреймов в одном большом окне браузера, у нас предполагается размещение трёх окон - следовательно и значений через запятую тоже три. Вспомните как мы задавали размеры ячеек для таблицы, здесь тот же принцип.. Как и в случае с ячейками таблицы, размеры фреймов можно указывать в процентах от общей площади и в пикселях.

Вот несколько примеров написания:
- такая запись говорит о том, что будет три горизонтальных окошка где последнее займет 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

scrolling="no" >

scrolling="no" >





scrolling="no" >

Поля фреймов или иначе расстояние от границ фрейма до текста или картинки, как в нашем случае, задаются в пикселях при помощи атрибутов marginwidth и marginheight тега

marginwidth="0" marginheight="0" >


marginwidth="10" marginheight="10" >

Поговорим немного о рамках вокруг наших фреймов.

Если Вы обратили внимание, то в последнем примере наведя курсор на границу фрейма он, курсор то бишь, приобретает другой вид (захватить и переместить) и теперь эту границу можно перетащить в какую либо сторону удерживая левой кнопкой мыши. Иногда такая "мобильность" границ фреймов играет на руку веб-мастеру, но чаще всё же мешает.. Для того, чтобы запретить пользователю играться с размерами окон для тега придумали атрибут noresize

noresize >

noresize >

noresize >
noresize >


noresize >

А вот давно нам знакомый атрибут border задаёт ширину в пикселях этих самых рамок между фрёймами.. пишется он внутри тега . Как и раньше значение border="0" вовсе избавит нас от рамок.

border="0" >

border="0" >

border="0" >

Фреймы и ссылки.

Настало время оживить наш сайт ссылками, да вот беда, знакомая нам обыкновенная ссылка Бобы в горшочке по-итальянски откроет данный документ в том же фрейме где она и находится, в нашем случае непосредственно в фрейме с содержанием, а само содержание в момент перехода по этой ссылки уйдёт в небытие.. можете взглянуть на корявый пример.. кликнете в нём на любую ссылку.. Что бы впредь такого не происходило, необходимо указывать браузеру в каком фрейме следует открывать необходимый нам документ, ну если конечно Вам и в правду не нужно открывать его в этом же фрейме.

Помнится мы уже знакомились, в главе посвящённой ссылкам, с атрибутами name - имя и target - цель, применяются они также и при работе с фреймами механизм немного изменён а так почти тоже самое. первым делом фрейму в котором мы хотели бы открывать какие либо документы необходимо присвоить индивидуальное имя.

пишется так:

name="osnovnoe" > имя можно придумать любое.. главное его не забыть..

Пишется так:

target="osnovnoe" >Бобы в горшочке по-итальянски

Ну я думаю Вам уже не стоит объяснять, что прежде чем ссылаться на какие либо документы, их необходимо создать.. в моём случае файлы (рецепты) имеют имена text.html, text1.html, text2.html…

Посмотрите пример:

Файл index.html










name="osnovnoe" marginwidth="10" marginheight="10" noresize>





Файл menu.html





Меню:

Так же как и раньше документ можно открыть в отдельном окне. Напомню, пишется так:

target="_blank" >Бобы в горшочке по-итальянски

Или же присвоив атрибуту target значение _top открыть его в этом же окне браузера, но на весь экран.. "обнулив" при этом всё что бы там не находилось.. пишется так:

target="_top" >Бобы в горшочке по-итальянски

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

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

Иногда в страницу содержащую в себе не фреймовую структуру необходимо в отдельном окне вставить другой HTML документ или даже ряд таковых документов. Для выполнения этой цели существует тег

Пример документа с плавающим фреймом:

Noframes

Некоторые браузеры не поддерживают фреймовую структуру документа или неправильно её интерпретируют, кроме того зачастую пользователи в настройках своих браузеров умышленно отключают поддержку фреймовой структуры html документа. И хотя процент таких браузеров и пользователей невелик, но тем не менее они есть.

Теперь представьте что Вы построили свой сайт с помощью фреймовой структуры и вот некоторые посетители, может быть сами не подозревая в чем проблема, пытаются открыть Ваш сайт, а их браузер выдает ошибку! Что они подумают о Вашем сайте? я думаю, что то типа: "Фу.. ерунда какая то.. больше сроду сюда не зайду!".

Для того что бы дать понять пользователю, что его браузер/настройки браузера не поддерживают фреймы существует тег </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>Извините, но Ваш браузер не поддерживает фреймы..

Результат примера будет заметен, если Ваш браузер и в правду не поддерживает фреймы (тут я надолго задумался.. :) если это так, то зачем вообще читать эту главу?) или же Вы в качестве эксперимента выключили поддержку фреймов в своём браузере.

Тег </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>Перед тем как начать создавать страницу с использованием фрёймовой структуры проанализируйте её макет, размеры каждого окна, наличие или отсутствие в них полос прокруток и т. д. После этого можно создавать подключаемые HTML файлы особо не переживая за их взаимное расположение относительно друг друга..</p><p>Используйте тег <b><noframes> </b> . Помните что если в Вашем браузере сайт работает и отображается так как Вы и задумывали то у других пользователей дела могут обстоять иначе!</p> </ul> <p>Здравствуйте, уважаемые читатели блога сайт. Сегодня речь пойдет о фреймах в языке Html. Понятное дело, что начнем мы сначала, а именно с того, что это такое за зверь. Так же поговорим о настоящем (Frame) и будущем (Iframe) этих элементов в языке гипертекстовой разметки текущей версии и в новом стандарте Html 5 при .</p><p>В конце статьи, после детального описания процесса создания встроенных фреймов и их классической структуры в Html коде (уже редко используется), мы затронем вопрос актуальности построения сайта на них, а так же обсудим возможные способы их применения в текущий период времени на примере моего блога.</p><h2>Что это такое и чем отличается Iframe от Frame</h2><p>Что же это такое? Оказывается, что они могут использоваться не только на сайтах, но и в каких-либо приложениях к программам, но отличаются тем, что окно web страницы или же приложения будет разделено на несколько областей, в каждую из которых загружен какой-то отдельный документ. Причем, эти области фреймов ведут себя не зависимо друг от друга.</p><p>Наверное, самый наглядный пример их использования, с которым сталкивались практически все из вас, это так называемые файлы помощи (хелпы), которые имеются у многих программ установленных на вашем компьютере.</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/chto-takoe-freim.png' width="100%" loading=lazy></p><p>В левое окно загружен файл с меню хелпа, а в правом выводится соответствующий выбранному пункту меню документ. Примечательно, что такая структура позволяет не подгружать в левое окно повторно файл с меню при открытии нового документа в правом. Именно в этом и состоит <b>основное преимущество использования фреймов </b> в Html.</p><p>Собственно, само название этих элементов следует трактовать именно как самостоятельное окно. С помощью фреймов у нас появляется возможность разбить одно большое окно на несколько фрагментов, которые в свою очередь могут служить приемниками для отдельных независимых друг от друга документов (страниц, текстов, изображений, видео и т.п.).</p><p>Как создается фреймовая структура в языке гипертекстовой разметки? Если говорить про стандарт Html 4.01 (по классификации ), который является основным на текущий момент времени, то для этого используются три элемента — Frame, Frameset и Noframes.</p><h3>Iframe — встроенный фрейм в стандарте Html 5</h3><p>Если же говорить про стандарт Html 5 (наше будущее, некоторые элементы которого уже поддерживаются многими браузерами), то там тегов Frame, Frameset и Noframes, а равно и классической фреймовой структуры уже не будет, вместо них предусмотрен один единственный тэг Iframe (встроенный фрейм), о котором мы и поговорим в начале, а потом уже все внимание обратим на классическую схему из версии 4.01, которая сейчас, собственно, и используется.</p><p>Iframe в отличии от классики, которая рассмотрена ниже, не требует замены тега Body на теги Frameset. Т.е. этот тег можно будет вставлять на обычные страницы, например, внутри параграфа или в любом другом месте. По своей сути этот элемент очень похож уже на рассмотренный нами тег Img.</p><p>Он является строчным с замещаемым контентом, потому что ведет себя в точности как строчный элемент, но вот внутри него отображается <b>посторонний внешний контент </b>. Таких элементов в языке Html всего четыре — Img, Iframe, Object и Embed. Поэтому наш герой подразумевает наличие внешнего файла, который будет подгружаться в область, размер которой задается с помощью атрибутов этого тега.</p><p>Т.о. Iframe является сточным элементом, в который загружается внешний объект (например, видеоролик). А для указания пути до этого файла, который должен подгружаться на странице, служит специальный атрибут Src. Но в отличии от Img элемент Iframe парный, т.е. <b>имеется еще и закрывающий тег </b>:</p><p> <span class="fHaAsFZL1nQ"></span> </p><p>В данном примере показан вывод на странице видеоролика с Youtube с помощью Iframe. Для того, чтобы ограничить область фрейма (окна), куда будет подгружаться внешний файл, предусмотрены атрибуты <b>Width и Height </b>, значения которых задаются в пикселах:</p><p> <span class="fHaAsFZL1nQ"></span> </p><p>Т.е. этот тег создает область, в которую загружается какой-то внешний объект (не важно, с вашего ли сайта или же с другого ресурса). Ширина и высота области задаются с помощью Width и Height, а в атрибуте Src указывается путь до этого объекта.</p><p>Все эти атрибуты элемент Iframe унаследовал от подобных ему строчных тегов с замещаемым контентом (типа уже упомянутого выше Img). Ну, и еще у картинок он взял и атрибуты <b>Hspace и Vspace </b>, которые позволяют задать отступы от границ фрейма до обтекающего его текста.</p><p>Так же показательно, что выравнивание встроенного фрейма осуществляется абсолютно так же, как мы это могли видеть при изучении картинок в Html — . Все тот же <b>Align </b>, но уже для тега Iframe с возможными значениями Bottom, Top, Middle, Left и Right.</p><p>Но этот элемент взял так же и несколько атрибутов от тэга Frame из классической фреймовой структуры, о которой мы очень и очень подробно поговорим ниже по тексту. К таким атрибутам относится Name, значение которого можно использовать в качестве значения для того, чтобы нужный вам документ при переходе по ссылке открывался именно в окне этого фрейма (подробности читайте ниже).</p><p>Так же в Iframe из тега Frame перекочевал атрибут Frameborder, который имеет только два значения — либо 0 (рамка вокруг фрейма не отображается), либо 1 (рамка видна). По умолчанию используется значение Frameborder=1, поэтому для ее удаления вам потребуется прописать Frameborder="0":</p><p> <span class="fHaAsFZL1nQ"></span> </p><p>Из Frame в этот элемент перешел еще и атрибут Scrolling, имеющий по умолчанию значение Auto — полосы прокрутки во фрейме будут появляться по мере необходимости, когда контент будет больше по размеру окна, предназначенного для его отображения.</p><p>Ну, и атрибуты Marginwidth и Marginheight тоже перешли из элемента Frame. Они будут подробно рассмотрены ниже по тексту, но в двух словах — они позволяют задать отступ по ширине и высоте от краев фрейма до контента, который в него помещается.</p><p>Как я уже упоминал, наглядным примером использования Iframe является :</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/iframe-video.png' width="100%" loading=lazy></p><p>Вставив Iframe напрямую в web страницу, вы получите вывод ролика с ютуба. Делаем вывод, что этот элемент является помесью строчных элементов с замещаемым контентом и, собственно, классических фреймов, о которых сейчас и пойдет речь.</p><h2>Фреймы на основе тегов Frame и Frameset — их структура</h2><p>Итак, создание классической фреймовой структуры начинается с того, что вы прописываете в Html коде вместо открывающего и закрывающего тега Body, который обычно должен присутствовать в любом документе, заменяющий его контейнер на основе элементов <b>Frameset </b>.</p><p>Принципиальным моментом является как раз то, что элемент Body в этом случае использовать нельзя — либо Body (для обычного документа), либо Frameset (при создании фреймовой структуры документа):</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/17-08-201318-13-43.png' width="100%" loading=lazy></p><p>Каждый фрейм, который мы с вами формируем внутри главного, создается с помощью отдельного элемента <b>Frame </b>. Этот тег является одиночным и в нем мы задаем путь до того документа, который должен будет подгружаться в это окно.</p><p>Третий элемент, который мы еще с вами не затронули — это <b>Noframes </b>. Он парный и позволяет написать внутри себя какой-то текст, который будет обработан браузером и отображен на web странице только в том случае, если этот самый браузер (или другое устройство отображения) не поддерживает фреймы. Это может произойти, например, в случае использования какого-нибудь обозревателя для мобильных устройств.</p><p>Обычно в Noframes добавляют не только информацию о сложившейся ситуации с невозможностью обработки фреймовой структуры, но и добавляют так же возможность перейти на другие страницы, где можно будет продолжить работу без их использования. Сказать о нем что-то еще трудно, поэтому продолжим.</p><p>Получается так, что элемент Frameset, используемый заместо тега Body, занимает все место, которое отведено для области просмотра, а уже внутри этой области будут создаваться фреймы с помощью отдельных элементов Frame. В связи с этим возникает вопрос — как делить область просмотра между отдельными окнами или, другими словами, как задать размер каждого из них.</p><p>Делается это с помощью добавления соответствующих атрибутов к элементу Frameset. Их имеется целых два — <b>Cols и Rows </b>. Cols задает разделение большого окна на вертикальные фреймы или же колонки, а Rows позволяет разделить его на горизонтальные окна или же строки.</p><h3>Создание структуры на основе Frameset и его атрибутов Cols и Rows</h3><p>В качестве значений для Cols и Rows Html тега Frameset выступают числа, проставленные через запятую (без пробелов). Эти числа задают пропорции тех окон, которые мы с вами хотим получить в результате. Следовательно, сколько будет написано чисел через запятую в Cols или в Rows, столько у нас фреймов и должно будет получиться в результате.</p><p>Например, с помощью такой записи мы получим три вертикальных колонки, которые по ширине будут соответствовать пропорциям 2:5:3.</p><p> <frameset cols="20%,50%,30%"> </p><p>Раз мы задали пропорции для трех фреймов, то мы должны будем обязательно прописать между открывающим и закрывающим тегом Frameset три элемента Frame, хотя бы и без указания дополнительных атрибутов:</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/17-08-201318-25-34.png' width="100%" loading=lazy></p><p>В результате наша фреймовая структура, состоящая из трех пустых окон, будет выглядеть так:</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/frame.png' width="100%" loading=lazy></p><p>В данном примере размеры окон (Frame) мы задавали с помощью процентов, которые берутся от ширины области просмотра (это в случае использования Cols) или от ее высоты (Rows). При изменении области просмотра процентное соотношение между размерами фреймов будет сохраняться. Но вместо процентов можно использовать и просто числа, которые будут означать . Тут, думаю, тоже никаких трудностей в понимании возникнуть не должно.</p><p>Но есть в обозначениях размеров и довольно необычный вариант, который выглядит как <b>звездочка «*» </b>. Причем, может стоять как просто «*», так и звездочка с цифрой впереди, например, так «3*». Хитрая штуковина, очень похожая на проценты и означающая, что мы делим пространство для Frame пропорционально.</p><p>Давайте посмотрим на примере. Теперь выберем деление области просмотра на горизонтальные строки с помощью Rows:</p><p> <frameset rows="200,500,*"> </p><p>Что означает эта запись? Вся область просмотра, доступная нам по вертикали, будет разделена на три строки. Высота первой будет взята в 200 пикселей, второй — в 500, а вот третья строка будет занимать все оставшееся пространство по высоте, т.к. в качестве ее размера использовалась «*».</p><p>Что примечательно, значение «*» и «1*» означают одно и то же — все оставшееся пространство мы делим на один и эту одну часть отдаем данному фрейму (ну, то есть все оставшееся пространство).</p><p>А вот посмотрите что получится, если использовать значение «*» с цифрой для деления в пропорции:</p><p> <frameset rows="2*,100,4*"> </p><p>Как вы думаете, каковы должны будут получиться размеры Frame в этом случае? Понятно, что вторая строка будет однозначно иметь высоту в 100 пикселей. Но как поделится оставшееся пространство по высоте между третьей и первой строкой?</p><p>Это довольно просто сосчитать — достаточно прибавить к двум (2*) четыре (4*) и разделить на этот знаменатель (помните дроби из школьной программы) двойку и четверку. Т.е. мы получим, что первая колонка с фреймом займет одну треть от оставшегося пространства по высоте, а третья колонка — две трети. Или же, другими словами, третья будет в два раза выше первой:</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/17-08-201321-11-58.png' width="100%" loading=lazy></p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/frameset.png' width="100%" loading=lazy></p><p>Можно использовать все три способа задания размеров окон фреймов в одном атрибуте, например:</p><p> <frameset cols="10%,100,4*,3*,2*"> </p><p>В результате мы получим первую колонку Frame шириной в десять процентов от всей доступной области, вторую — 100 пикселей, а три оставшихся будут иметь ширину в пропорциях четыре, три и две девятых от оставшегося пространства по ширине. Вот так вот все просто и наглядно.</p><p>Если вы хотите разбить основное окно не только на горизонтальные и вертикальные фреймы, а, например, на их комбинации, то можно будет для этого использовать вложенную структуру элементов Frameset отдельно для колонок и отдельно для строк. Например, чтобы получить структуру показанную на скриншоте чуть ниже, то достаточно использовать такую конструкцию:</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/17-08-201321-15-19.png' width="100%" loading=lazy></p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/freimy-v-html.png' width="100%" loading=lazy></p><p>Т.е. сначала мы разбиваем с помощью «frameset cols=»20%,80%"« все доступное пространство на две колонки по вертикали и задаем тегом „frame“ содержимое правой колонки, а вот вместо того, что добавить элемент „frame“ для левой колонки, мы открываем новый „frameset rows=“10%,*»".</p><p>И уже с помощью него разбиваем правую колонку на две строки с фреймами, содержимое которых задаем с помощью двух тегов «frame», после чего закрываем оба контейнера «frameset». Все просто и логично.</p><h3>Указываем путь в атрибуте Src элемента Frame</h3><p>Но это мы все говорили про элемент Frameset и его атрибуты Cols и Rows, с помощью которых формируем структуру и задаем их размеры. Теперь давайте разберемся с тем, как выводить в нужных фреймах нужные документы и как настроить взаимодействие между их окнами.</p><p>Итак, как же мы управляем внешним видом создаваемых окон? Все это заложено в атрибутах тега Frame. Первый из них, о котором стоит упомянуть — это <b>Src </b>. Мы уже встречали его в теге Img, когда рассматривали вставку изображений в Html код. Суть его не изменилась и он по-прежнему позволяет указать путь до того документа, который должен быть загружен во фрейм.</p><p>Путь до документа в Src может быть указан в виде . Относительные пути обычно используются для документа, который расположен на вашем же ресурсе, а вот абсолютные вам понадобятся, когда вы захотите загрузить в окно фрейма документ с другого сайта.</p><p>Если не будет прописан атрибут Src с указанием пути до нужного документа, то в окно будет загружен пустой документ. Лично я когда-то делал подобную вещь для своего блога (как дополнительный элемент навигации) и при этом создавал на сервере хостинга отдельную папку для него и помещал туда не только Html файлик с фреймовой структурой (который назвал index.html), но и все подгружаемые в различные окна документы, а так же файлы изображений, которые использовались в качестве фона.</p><p>Поэтому мне было проще всего использовать именно относительные ссылки в атрибуте Src тега Frame:</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/17-08-201321-23-15.png' width="100%" loading=lazy></p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/freimy-eto.png' width="100%" loading=lazy></p><p>Что примечательно, если вы замените все приведенные в этом коде ссылки с относительных на абсолютные (типа https://сайт/navigator/joomla.html) и откроете этот файл в браузере, то указанные во Frame документы будут подгружены с моего сервера и вы увидите аналогичную картинку в своем браузере. Причем не важно, где будет лежать ваш файл с фреймовой структурой (index.html) — на вашем компьютере или же на хостинге.</p><p>В приведенном на рисунке примере, в окно левого фрейма у меня загружается страничка с неким меню, которое представляет из себя обычный . Но не суть важно как формируется меню, а важно то, что произойдет после нажатия на любую из его ссылок.</p><p>Если вы проделаете это, то все произойдет именно так, как надо — документ откроется в правом нижнем окне. Но для этого мне пришлось применить одну небольшую хитрость, ибо в варианте по умолчанию документ открывался на весь размер окна, заменяя собой фреймовую структуру, что мне было вовсе не нужно, ибо исчезало навигационное меню в левом и верхнем фреймах.</p><h2>Как открывать документы по ссылке во фрейме</h2><p>Итак, когда мы говорили про гиперссылки, то упоминали такой атрибут тега «A», как Target=_blank. Помните для чего он нужен? Правильно, чтобы открывать документ, на который проставлена ссылка, в новом окне. По умолчанию же, он должен открываться в том же самом окне, что эквивалентно target="_self".</p><p>Но этим возможности <b>Target </b> не ограничиваются. Оказывается можно добавлять в него значение <b>в виде названия фрейма </b>, которое предварительно указывается в специальном атрибуте Name тега Frame. Тогда документ по этой ссылке будет открываться не в том же окне, занимая все его пространство, а в указанном вами Frame. Понятно? Если не совсем, то сейчас будет понятно при разборе примера.</p><p>Итак, вернемся к нашему примеру приведенному на расположенном чуть выше рисунке. Нам нужно открывать страницы по ссылкам из левого окна в правом нижнем (большом) фрейме. Следовательно, для начала нужно этому большому окну дать имя с помощью атрибута Name в теге Frame.</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/17-08-201321-32-09.png' width="100%" loading=lazy></p><p>Сделали и назвали его «ktona». Теперь можно смело открывать тот файл, что подгружается в качестве меню в левое окно и добавлять ко всем тегам A в нем атрибут Target="ktona":</p><p> История появления Joomla и компонента VirtueMart </p><p>Конечно же, с помощью инструмента поиска и замены в проставить его для всех гиперссылок будет не трудно, но зачем же излишне загружать код, когда у нас есть прекрасная возможность использовать <b>специальный тег Base </b>, о котором мы уже упоминали все в той же статье про гиперссылки, когда говорили про использование Target blank.</p><p>Достаточно лишь поставить между открывающим и закрывающим тегами Head элемент base target="ktona" и все ссылки в Html коде этого документа будут открывать новые страницы в указанном фрейме под названием «ktona»:</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/17-08-201321-36-13.png' width="100%" loading=lazy></p><p>Кстати, если рассматривать мой когда-то существовавший инструмент в качестве примера, то нужно еще сделать так, чтобы все ссылки из верхнего горизонтального окна открывали бы свои страницы именно в левом вертикальном фрейме, которое служит у меня левым меню. Что нужно для этого сделать?</p><p>Ну, во-первых, нужно дать имя левому вертикальному фрейму:</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/17-08-201321-38-31.png' width="100%" loading=lazy></p><p>А в файле, который загружается в верхнее окно (gor.html), нужно добавить элемент base target="gor":</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/17-08-201321-40-02.png' width="100%" loading=lazy></p><p>Все, теперь мы сделали все как надо. Все документы по ссылкам из верхнего фрейма открываются в левом окне, а все ссылки уже из него будут открывать документы в центральном и самом большом Frame. По-моему, все просто и логично.</p><h3>Атрибуты тега Frame для настройки внешнего вида окон</h3><p>Давайте теперь посмотрим, какие атрибуты кроме Src и Name можно использовать в теге Frame для настройки внешнего вида фреймов. Начнем с <b>Scrolling </b>. С помощью него мы можем настроить отображение полос прокрутки для каждого окна вашей фреймовой структуры в отдельности.</p><p>Scrolling имеет значение по умолчанию Auto — браузер будет автоматически решать, на основе размера подгружаемого во фрейм документа, отображать полосу прокрутки или нет. Если документ не будет полностью помещаться в окно, то появится полоса прокрутки, позволяющая просмотреть его весь до конца.</p><p>Так же в качестве значений для Scrolling можно использовать значения Yes (полосы прокрутки в окне будут отображаться всегда, даже если документ полностью влезает в него) и No (полосы прокрутки вообще никогда появляться не будут, даже если часть документа не влезет).</p><p> <frame scrolling="yes" src="gor.html"> </p><p>Я в своем, когда-то существовавшем инструменте, использовал значение по умолчанию Auto и полосы прокрутки во фреймах появлялись по мере необходимости:</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/freim.png' width="100%" loading=lazy></p><p>Следующий атрибут тега Frame — <b>Noresize </b> — является одиночным (у него нет значений). Прописав его, вы тем самым запретите изменение его размеров, которое по умолчанию осуществляется простым перетаскиванием границы фреймов мышью.</p><p> <frame noresize src="gor.html"> </p><p>При подведении курсора мыши к границе вы увидите, что курсор превратится в двунаправленную стрелку и теперь, нажав на левую кнопку мыши, можно передвигать границу по вашему желанию. Noresize накладывает на это своеволие запрет (при подведении курсора мыши к границе окон, двунаправленную стрелочку вы уже не увидите).</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/freimy.png' width="100%" loading=lazy></p><p>Еще один визуальный атрибут — <b>Frameborder </b>. C помощью него вы можете указать — рисовать рамку (границу) между фреймами или же не рисовать. Frameborder может иметь только два возможных значения — либо 0 (рамку не рисовать), либо 1 (границу отображать). По умолчанию, естественно, используется значение 1.</p><p>Есть одна тонкость. Если вы хотите убрать видимую рамку, то вам придется добавить Frameborder=0 во все теги Frame тех фреймов, видимые границы между которыми вы хотите убрать.</p><p> <frame frameborder="0" src="gor.html"> </p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/iframe-freim.png' width="100%" loading=lazy></p><p>Ну, и еще нам осталось рассмотреть пару атрибутов тега Frame — <b>Marginwidth и Marginheight </b>, которые задают отступы по ширине (справа и слева) и высоте (сверху и снизу) от границ окна до контента загруженного в него (число означает количество пикселов отступа):</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/iframe-freimy.png' width="100%" loading=lazy></p><h2>Почему нельзя делать сайт на фреймах?</h2><p>Давайте посмотрим в чем заключается принципиальный недостаток классических структур, который по сути ставит крест на их использовании при создании сайта. Он состоит в том, что по этой фреймовой структуры <b>невозможно отследить ее состояние </b>.</p><p>У сложных структур могут быть тысячи различных состояний (варианты документов открытых в различных окнах фреймов), но при этом Url адрес этой самой структуры не меняется. Из-за этого будет <b>невозможно пользоваться закладками браузера </b> или же отправлять ссылки на понравившиеся страницы другим пользователям. Почему?</p><p>Потому что адрес остается неизменным и при открытии его из закладок браузера, или же из письма электронной почты, вы получите страницу со стартовым состоянием фреймовой структуры, а не то ее состояние, которое вы хотели бы сохранить.</p><p>Хотя, конечно же, эта проблема решаема, но уже не средствами Html, а с помощью серверных (например, Php) или клиентских языков (ДжаваСкрипт) программирования, и решения эти будут работоспособными не на все сто процентов. Такие решения, по сути, позволяют дописывать к Url адресу фреймовой структуры дополнительные данные о ее текущем состоянии, но сделать это не просто, а надежность будет не абсолютной.</p><p>Это первый минус использования фреймов для создания сайтов и очень весомый, но есть и еще один огромный минус. Поисковики, конечно же, уже давно научились индексировать их и извлекать из них адреса тех документов, которые подгружаются в их окна. Проблема в другом.</p><p>Когда пользователь переходит из поисковой выдачи Яндекса или Google на ваш сайт, построенный на базе фреймовой структуры, то откроется только тот документ, который загружался в один из фреймов, а не вся структура. Понимаете, о чем я говорю?</p><p>Пользователь увидит документ и <b>не увидит навигации по вашему сайту </b>, ибо она будет зашита в других окнах, а они подгружаются только в составе всей структуры.</p><p>В итоге сайт, построенный на фреймах, становится просто не юзабельным. Хотя опять же есть решения этой проблемы на базе серверных скриптов, когда будет осуществляться редирект с адресов отдельных документов на фреймовую структуру находящуюся в нужном состоянии, но это опять же очень сложно и не всегда надежно.</p><p>В общем, вывод можно сделать однозначный — <b>создавать сайты на фреймах не нужно </b>. Но зато они постоянно используются для создания хелпов для различных приложений, ну и еще где-то по мелочи могут пригодиться.</p><p>Например, я создал фреймовую структуру, которую обозвал «Навигатор» (сейчас ее временно убрал) и которая стала своеобразным развернутым внешним меню для моего блога, которое, как мне кажется, должно упростить работу с ресурсом и , а следовательно и улучшить , которые сейчас «без балды» очень и очень сильно влияют на продвижение сайта.</p><p>Но, правда, во избежании каких-либо проблем с поисковыми системами, я закрыл от всю эту фреймовую структуру, а так же добавил на всякий случай во все ее Html файлы мета тег Rodots с запретом их индексации:</p><p> <head> <meta name="robots" content="noindex,nofollow"> <base target="ktona"> <meta charset="utf-8"> <title>JOOMLA</title> </head> </p><p>Но все эти ограничения касаются только структур на тегах Frame и Frameset, а <b>встроенные фреймы на тегах Iframe </b> не имеют никаких видимых недостатков, и их вполне можно и даже нужно использовать на своих проектах, хотя бы для вставки видеороликов с Ютуба.</p> <p>Удачи вам! До скорых встреч на страницах блога сайт</p><h3></h3><p>Вам может быть интересно</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/wp-content/uploads/2013/10/doctype.jpg' width="100%" loading=lazy><span>Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов) </span> <br><img src='https://i0.wp.com/ktonanovenkogo.ru/wp-content/uploads/2013/10/embed-object.jpg' width="100%" loading=lazy><span>Embed и object - Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах </span> <br><img src='https://i0.wp.com/ktonanovenkogo.ru/wp-content/uploads/2013/10/img.jpg' width="100%" loading=lazy><span>Img - Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background) </span> <br><img src='https://i1.wp.com/ktonanovenkogo.ru/wp-content/uploads/2013/10/yazyk-html.jpg' width="100%" loading=lazy><span>Что такое язык гипертекстовой разметки Html и как посмотреть список всех тэгов в валидаторе W3C </span> <span>Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля </span> <br><img src='https://i0.wp.com/ktonanovenkogo.ru/wp-content/uploads/2013/10/html-spisok-vydelenie-abzats.jpg' width="100%" loading=lazy><span>Списки в Html коде - теги UL, OL, LI и DL </span> <br><img src='https://i1.wp.com/ktonanovenkogo.ru/wp-content/uploads/2013/10/formatirovanie-teksta-v-html.jpg' width="100%" loading=lazy><span>Теги Font (Face, Size и Color), Blockquote и Pre - устаревшее форматирование текста в чистом HTML (без использования CSS) </span> <br><img src='https://i2.wp.com/ktonanovenkogo.ru/wp-content/uploads/2013/10/html-tegi.jpg' width="100%" loading=lazy><span>Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах </p> <p>Всем доброго времени суток! С Вами Бернацкий Андрей.</p> <p>Прежде, чем перейти непосредственно к статье, я Вам хочу дать ссылку на видео-версию данной темы:</p> <p>В этом выпуске мы поговорим о <b>фреймах в HTML </b>. <b>Фреймы </b> по своей сути очень похожи на таблицы, но в отличие от таблиц, каждый фрейм независим и в каждом из них может быть отдельная web страница со своим адресом.</p> <p><img src='https://i1.wp.com/webformyself.com/wp-content/uploads/2009/06/frame1.jpg' align="center" width="100%" loading=lazy></p> <p>На рисунке видим достаточно распространенную структуру сайта. Ее можно представить в виде таблицы, а можно все это сделать при помощи фреймов. В верхний фрейм можно загрузить страницу с логотипом и меню, в левый – страницу с навигацией по сайту, в центральном фрейме будет страница с основным содержимым сайта, в правый фрейм загрузим страницу с рекламными баннерами, а в нижний – страницу с контактной информацией. Вот вкратце что такое фреймы.</p> <p>Теперь рассмотрим, как это все можно осуществить.</p> <p>Особенностью документа, содержащего фреймы, является то, что он не содержит контейнера <b>BODY </b>. Вместо него используется контейнер <b>FRAMESET </b>. Общий синтаксис фреймов выглядит следующим образом:</p> <p>XHTML </p> <p><html> <head>…</head> <frameset>….</frameset> </html></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><html> </p><p><head> … </head> </p><p><frameset> …. </frameset> </p><p></html> </p> </td> </tr></table><p>В контейнере <b><frameset>….</frameset> </b> располагаются теги <b><frame /> </b>, которые определяют содержимое фреймов.</p> <p>У тега <b><frameset> </b> есть два параметра:</p> <p><b>rows = число </b> – количество строк (горизонтальных подокон).</p> <p><b>cols = число </b> – количество столбцов (вертикальных подокон).</p> <p>Вообще говоря, значение параметров rows и cols задаются не совсем числами, а перечислением чисел через запятую. Сколько будет идти чисел, столько строк или столбцов и будет, а числа определяют размер фрейма. Главное, чтоб сумма этих чисел составляла всю ширину экрана.</p> <p>Давайте, разберем это на примере, и все будет понятно. Сейчас создадим фреймовый документ следующего вида:</p> <p><img src='https://i1.wp.com/webformyself.com/wp-content/uploads/2009/06/frame2.jpg' align="center" width="100%" loading=lazy></p> <p>Код, который определит нам такую структуру фрейма, будет выглядеть так:</p> <p>XHTML </p> <p><frameset cols="30%,*,30%"> <frame src="../Урок 13/index.html" /> <frame src="http://www.mail.ru" /> <frame src="../Урок11/index.html" /> </frameset></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><frameset cols = "30%,*,30%" > </p><p><frame src = "../Урок 13/index.html" /> </p><p><frame src = "//www.mail.ru" /> </p><p><frame src = "../Урок11/index.html" /> </p><p></frameset> </p> </td> </tr></table><p>В первой строке приведенного кода открывается контейнер frameset, в параметре cols указано, что будет три вложенных фрейма. У первого ширина будет 30% от всей ширины экрана. У третьего ширина будет тоже 30% от всей ширины экрана. А второй фрейм займет все оставшееся место. Да символ <b>"*" </b>(звездочка) означает занять все оставшееся место на экране.</p> <p>Кстати, рассмотрим, каким образом фреймам можно задавать размеры в параметрах cols и rows:</p> <p>Можно задать размер, поставив просто число. Это число, будет определять размер фрейма в пикселях.</p> <p>Можно задать значение ширины в процентах. Причем, если сумма процентов всех колонок будет превышать 100%, то все фреймы пропорционально уменьшаться, что бы общая сумма было равна 100%. Аналогично ситуация будет, если сумма процентов всех колонок будет менее 100%, то все фреймы пропорционально увеличатся, что бы общая сумма было равна 100%.</p> <p>Можно задавать размер фрейма символом<b> “*” </b> (звездочка). Это означает, что фрейм должен занять все оставшееся место. Если будет указано, например <b><frameset cols="20%,*,*"> </b>, то есть две звездочки, то все оставшееся место будет поровну разделено между этими двумя фреймами (в данном случае по 40%).</p> <p>Можно комбинировать варианты задания размеров фреймов в HTML. Например:</p> <p>XHTML </p> <p><frameset cols="70,*,40%"></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><frameset cols = "70,*,40%" > </p> </td> </tr></table><p>Этот код означает, что у первого фрейма размер будет 70 пикселей, у третьего 40% ширины экрана, а второй займет все оставшееся место.</p> <p>С первой строкой кода разобрались полностью. Идем дальше.</p> <p>Далее следуют теги <b><frame src="url" /> </b>. Поскольку через запятую в параметре <b>cols </b>тега <b>frameset </b> задано три числа (то есть будет три фрейма), то и тегов <b><frame /> </b> должно быть тоже три. Значением параметра src является адрес web страницы, которая будет загружаться в данный фрейм. Адрес, как видно из примера, может быть абсолютным и относительным.</p> <p>И в последней строке закрывается контейнер <b></frameset> </b>.</p> <p>Если заменить в первой строке кода параметр cols на rows, то мы получим такой же фреймовый документ, состоящий из трех фреймов. Только разбиение на фреймы будет идти по вертикали.</p> <p>XHTML </p> <p><frameset rows="30%,*,30%"> <frame src="../Урок 13/index.html" /> <frame src="../Урок 12/index.html" /> <frame src="../Урок 11/index.html" /> </frameset></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><frameset rows = "30%,*,30%" > </p><p><frame src = "../Урок 13/index.html" /> </p><p><frame src = "../Урок 12/index.html" /> </p><p><frame src = "../Урок 11/index.html" /> </p><p></frameset> </p> </td> </tr></table><p>Параметры <b>rows </b> и <b>cols </b>одновременно использовать нельзя. Это приводит к ошибкам, и неверному отображению содержимого.</p> <p>У всех сейчас возник вопрос о том, как создать такую структуру, о которой я говорил в самом начале статьи. К этому вернемся чуть позже, а пока обратимся к тому, что у нас сейчас происходит в браузере.</p> <p>В браузере мы видим три страницы, каждая из которых находится в своем фрейме.</p> <p>При этом мы, наведя курсор мыши к границам фреймов, можем изменять размеры фреймов, так же видны полосы прокрутки и границы между фреймами. Это не всегда нужно, даже скорее совсем не нужно. А всем этим можно управлять благодаря параметрам тегов <b>frame </b> и <b>frameset </b>.</p> <p>Параметры тегов <b>frame </b> и <b>frameset </b>:</p> <p><b>src ="url" </b> – обязательный параметр. Указывает адрес страницы, которая будет отображена внутри фрейма. Используется только для frame.</p> <p><b>noresize </b> – отменяет возможность изменения размеров. Используется только для <b>frame </b>.</p> <p><b>scrolling="yes/no/auto" </b> – определяет наличие полос прокрутки. Значение yes – указывает на присутствие полос прокрутки. Значение no – указывает, что полос прокрутки не будет. При значение auto – браузер сам определяет, будут ли полоски прокрутки. Используется только для <b>frame </b>.</p> <p><b>name="frame-name" </b> – имя фрейма. Данный параметр используется для взаимодействия между фреймами. Подробнее о нем поговорим чуть позже. Используется только для <b>frame </b>.</p> <p><b>border=число </b> – толщина границ между фреймами. Если принимает значение 0, то границы между фреймами не отображаются. Используется только для frameset.</p> <p><b>framespacing="число" </b> – расстояние между фреймами. Используется только для frameset.</p> <p>Используя эти параметры, можно получить страницу, у которой не отображаются границы между фреймами, нет возможности изменять размеры фреймов и у двух последних фреймов запретим скроллинг. Код такой страницы выглядит следующим образом:</p> <p>XHTML </p> <p><frameset cols="30%,*,30%" border="0"> <frame src="../Урок 13/index.html" noresize="noresize” /> <frame src="../Урок 12/index.html" noresize="noresize" scrolling="no" /> <frame src="../Урок11/index.html" noresize="noresize" scrolling="no" /> </frameset></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><frameset cols = "30%,*,30%" border = "0" > </p><p><frame src = "../Урок 13/index.html" noresize = "noresize” /> </p><p><frame src=" . . / Урок12/ index. html" noresize=" noresize" scrolling=" no" /> </p><p><frame src=" . . / Урок11/ index. html" noresize=" noresize" scrolling=" no" /> </p><p></frameset> </p> </td> </tr></table><p>Есть еще несколько параметров, но они не однозначно работают, поэтому я считаю целесообразным их даже не упоминать в выпуске.</p> <p>Пожалуй, с параметрами все. Рассмотрели на примере как их применять.</p> <p>Теперь создадим фреймовую структуру, о которой я говорил в самом начале выпуска.</p> <p>Для этого, создаем структуру из трех фреймов с разбиением по вертикали.</p> <p>XHTML </p> <p><frameset rows="100,*,70" border="0"></p> <p>Соответственно, вместо тега <b><frame /> </b>, мы должны вставить еще один контейнер <b><frameset> </b>..<b></frameset> </b> с тремя столбцами, и в каждый записать свой адрес страницы. Видите, ничего сложного, мы просто вместо тега <b><frame /> </b> вставляем новый, нужный нам, контейнер <b><frameset> </b>..<b></frameset> </b>.</p> <p>XHTML </p> <p><frameset cols="20%,*,20%"> <frame src="../урок 7/lesson7.html" /> <frame src="../урок3/Untitled-1.html" /> <frame src="../урок1/lesson1.html" /> </frameset></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><frameset cols = "20%,*,20%" > </p><p><frame src = "../урок 7/lesson7.html" /> </p><p><frame src = <span>"../урок3/Untitled-1.html" </span> /> </p><p><frame src = "../урок1/lesson1.html" /> </p><p></frameset> </p> </td> </tr></table><p>После этого вставляем наш третий фрейм с контактной информацией и закрываем главный контейнер <b></frameset> </b></p> <p>XHTML </p> <p><frame src="../Урок11/index.html" noresize="noresize" scrolling="no" /> </frameset></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><frame src = "../Урок11/index.html" noresize = "noresize" scrolling = "no" /> </p><p></frameset> </p> </td> </tr></table><p>Полный код данной страницы приведен ниже:</p> <p>XHTML </p> <p><frameset rows="100,*,70" border="0"> <frame src="../Урок 13/index.html" noresize="noresize" /> <frameset cols="20%,*,20%"> <frame src="../урок 7/lesson7.html" /> <frame src="../урок3/Untitled-1.html" /> <frame src="../урок1/lesson1.html" /> </frameset> <frame src="../Урок11/index.html" noresize="noresize" scrolling="no" /> </frameset></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><frameset rows = "100,*,70" border = "0" > </p><p><frame src = "../Урок 13/index.html" noresize = "noresize" /> </p><p><frameset cols = "20%,*,20%" > </p><p><frame src = "../урок 7/lesson7.html" /> </p><p><frame src = <span>"../урок3/Untitled-1.html" </span> /> </p><p><frame src = "../урок1/lesson1.html" /> </p><p></frameset> </p><p><frame src = "../Урок11/index.html" noresize = "noresize" scrolling = "no" /> </p><p></frameset> </p> </td> </tr></table><p>Конечно, адреса для фреймов я взял из предыдущих выпусков рассылки, и никакого меню, логотипа, навигации и так далее мы тут не увидели. Но структуру такую как нужно мы получили. Но если создать реальные нужные страницы, то можно получить красивую структуру.</p> <p>Что мы получили в итоге. Чем это удобно или неудобно (решать вам), но при фреймовой структуре, всегда все наши фреймы остаются на странице. Независимо от величины содержимого у нас всегда будет виден логотип и меню сайта, нижняя часть сайта контактной информацией, блок навигации и баннеры. Вот, в общем-то, суть и смысл фреймов.</p> <p>Существует возможность взаимодействия между фреймами. Можно сделать так, чтобы нажав на ссылку в одном фрейме, информация появилась в другом. Сейчас мы посмотрим, как это делается.</p> <p>Создадим фрейм следующего вида:</p> <p><img src='https://i0.wp.com/webformyself.com/wp-content/uploads/2009/06/frame3.jpg' align="center" width="100%" loading=lazy></p> <p>В левом фрейме, будут располагаться наши ссылки. А в правом – страницы на которые ведут эти ссылки.</p> <p>Создаем такой фрейм:</p> <p>XHTML </p> <p><frameset cols="100,*" border="0"> <frame src="ind2.html" noresize="noresize" /> <frame src="ind3.html" name="fram1" /> </frameset></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"></td></tr></table> <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> </span> <div class="wrap-page-links clearfix"> <div class="clear"></div> </div> <div class="clearfix"> <ul class="socials-link pull-left clearfix"> <div class="post-meta-social"> <div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,gplus,twitter"></div> </div> </ul> <div class="clear"></div> </div> </div> <div class="about-author clearfix"> </div> <div class="about-author clearfix"> <div id="mc-container"> <ul id="cackle-comments"> </ul> </div> </div> <div class="widget-area-4"> <div class="widget kp-article-list-widget"> <h6 class="widget-title">Случайные статьи</h6> <ul class="clearfix"> <li> <article class="entry-item standard-post"> <div class="entry-thumb hover-effect"> <a href="/windows/kak-nastroit-uvedomleniya-na-vyklyuchennom-ekrane-kak-otklyuchit/"><img src="/uploads/6fc8470fe129531877bf016d9c90ac1d.jpg" alt="Как отключить уведомления на Android?" / loading=lazy></a> </div> <div class="entry-content"> <h6 class="entry-title"><a href="/windows/kak-nastroit-uvedomleniya-na-vyklyuchennom-ekrane-kak-otklyuchit/">Как отключить уведомления на Android?</a></h6> <p>Устанавливая каждое приложение, владелец смартфона соглашается с запросами на доступ к определенным данным и возможностям...</p> </div> </article> </li> <li> <article class="entry-item standard-post"> <div class="entry-thumb hover-effect"> <a href="/android/obzor-kross-platformennyh-menedzherov-parolei-pochemu-ya-ne-polzuyus/"><img src="/uploads/e70121d93b5fe27846d52b02d110875b.jpg" alt="Почему я не пользуюсь менеджерами паролей Менеджер паролей на своем сервере" / loading=lazy></a> </div> <div class="entry-content"> <h6 class="entry-title"><a href="/android/obzor-kross-platformennyh-menedzherov-parolei-pochemu-ya-ne-polzuyus/">Почему я не пользуюсь менеджерами паролей Менеджер паролей на своем сервере</a></h6> <p>С тем, что количество паролей, которые надо запомнить, точно больше, чем места для них в голове, столкнулись, наверное,...</p> </div> </article> </li> <li> <article class="entry-item standard-post"> <div class="entry-thumb hover-effect"> <a href="/windows/rodnye-draivera-dlya-noutbuka-lenovo-g770-ustanovka-draivera-dlya-noutbuka-lenovo-g770/"><img src="/uploads/43482bcfc5f12fadbbcc98e09405bb29.jpg" alt="Установка драйвера для ноутбука Lenovo G770" / loading=lazy></a> </div> <div class="entry-content"> <h6 class="entry-title"><a href="/windows/rodnye-draivera-dlya-noutbuka-lenovo-g770-ustanovka-draivera-dlya-noutbuka-lenovo-g770/">Установка драйвера для ноутбука Lenovo G770</a></h6> <p>Для успешной работы с любым оборудованием требуется наличие драйверов и своевременное их обновление. В случае с...</p> </div> </article> </li> <li> <article class="entry-item standard-post"> <div class="entry-thumb hover-effect"> <a href="/android/kak-vklyuchit-obnovlenie-drugih-produktov-microsoft-kak-vklyuchit/"><img src="/uploads/c50fe8ef72dfbbb9e148f8d51fdb790a.jpg" alt="Как включить обновление Microsoft Office?" / loading=lazy></a> </div> <div class="entry-content"> <h6 class="entry-title"><a href="/android/kak-vklyuchit-obnovlenie-drugih-produktov-microsoft-kak-vklyuchit/">Как включить обновление Microsoft Office?</a></h6> <p>Я установил обновление для авторов (версия 1703) на свой компьютер с Windows 10 Pro, но теперь я получаю обновления для...</p> </div> </article> </li> <li> <article class="entry-item standard-post"> <div class="entry-thumb hover-effect"> <a href="/internet/programma-dlya-skachivaniya-gif-na-aifon-kak-pravilno-sohranyat-gif-animaciyu-na/"><img src="/uploads/fa055500e15ba76008abb25a87be357e.jpg" alt="Как правильно сохранять GIF анимацию на любой iPhone" / loading=lazy></a> </div> <div class="entry-content"> <h6 class="entry-title"><a href="/internet/programma-dlya-skachivaniya-gif-na-aifon-kak-pravilno-sohranyat-gif-animaciyu-na/">Как правильно сохранять GIF анимацию на любой iPhone</a></h6> <p>GIF – растровый формат графических изображений, поддерживающий не более 256 цветов и применяющийся в первую очередь для...</p> </div> </article> </li> <li> <article class="entry-item standard-post"> <div class="entry-thumb hover-effect"> <a href="/windows/gde-v-aifone-nahoditsya-oblako-chto-takoe-icloud-i-kak-im-polzovatsya-icloud-vhod-v/"><img src="/uploads/dbb843fb9888ab626ac8107570609dff.jpg" alt="Что такое iCloud и как им пользоваться" / loading=lazy></a> </div> <div class="entry-content"> <h6 class="entry-title"><a href="/windows/gde-v-aifone-nahoditsya-oblako-chto-takoe-icloud-i-kak-im-polzovatsya-icloud-vhod-v/">Что такое iCloud и как им пользоваться</a></h6> <p>Если вам еще не приходилось пользоваться фирменным облачным хранилищем от компании Apple, вы многое потеряли. Помимо...</p> </div> </article> </li> </ul> </div> </div> </div> <div id="right-sidebar" class="widget-area-2"> <div class="widget kp-article-list-widget"> <h6 class="widget-title">Реклама</h6> <div align="center"> </div> </div> <div class="widget kp-article-list-widget"> <h6 class="widget-title">Железо</h6> <ul class="clearfix"> <li> <article class="entry-item standard-post"> <header> <span class="entry-date clearfix"><span class="entry-icon icon-time"></span><span>2023-08-17 02:10:18</span></span> </header> <div class="entry-thumb hover-effect"> <a href="/iron/kak-otpisatsya-ot-podpisok-eppl-kak-otklyuchit-avtomaticheskoe-prodlenie-podpiski-na-apple-music-po-o/"><img src="/uploads/31e9750c08969e928686c3d87459f6df.jpg" alt="Как отключить автоматическое продление подписки на Apple Music по окончании пробного периода" / loading=lazy></a> </div> <div class="entry-content"> <h6 class="entry-title"><a href="/iron/kak-otpisatsya-ot-podpisok-eppl-kak-otklyuchit-avtomaticheskoe-prodlenie-podpiski-na-apple-music-po-o/">Как отключить автоматическое продление подписки на Apple Music по окончании пробного периода</a></h6> <p>Компания Apple предоставляет своим пользователям широкий выбор сервисов, помогающих найти, сохранить и...</p> </div> </article> </li> <li> <article class="entry-item standard-post"> <header> <span class="entry-date clearfix"><span class="entry-icon icon-time"></span><span>2023-08-16 02:21:28</span></span> </header> <div class="entry-thumb hover-effect"> <a href="/iron/kak-ustanovit-mfu-bez-ustanovochnogo-diska-kak-ustanovit-lokalnyi-i/"><img src="/uploads/f57d4556aa0f1de7b7912adce072b49c.jpg" alt="Как установить локальный и сетевой принтер без установочного диска" / loading=lazy></a> </div> <div class="entry-content"> <h6 class="entry-title"><a href="/iron/kak-ustanovit-mfu-bez-ustanovochnogo-diska-kak-ustanovit-lokalnyi-i/">Как установить локальный и сетевой принтер без установочного диска</a></h6> <p>Решение задачи, связанной с тем, как настроить принтер на печать с компьютера является не такой уж сложной, как...</p> </div> </article> </li> </ul> </div> <!-- /next_cat --> <div class="widget kp-article-list-widget"> <h6 class="widget-title">Интернет</h6> <ul class="clearfix"> <li> <article class="entry-item standard-post"> <header> <span class="entry-date clearfix"><span class="entry-icon icon-time"></span><span>2023-08-15 02:25:22</span></span> </header> <div class="entry-thumb hover-effect"> <a href="/blog/kak-nastroit-telefon-chtoby-rabotal-internet-podklyuchenie-interneta/"><img src="/uploads/65a8b66d4aae2ced269a7800a77a4af1.jpg" alt="Подключение интернета на смартфоне “Андроид”: вручную через симку или ноутбук" / loading=lazy></a> </div> <div class="entry-content"> <h6 class="entry-title"><a href="/blog/kak-nastroit-telefon-chtoby-rabotal-internet-podklyuchenie-interneta/">Подключение интернета на смартфоне “Андроид”: вручную через симку или ноутбук</a></h6> <p>Практически все Android-устройства умеют подключаться к мобильному интернету, используя ресурсы сотовых...</p> </div> </article> </li> <li> <article class="entry-item standard-post"> <header> <span class="entry-date clearfix"><span class="entry-icon icon-time"></span><span>2023-08-15 02:25:22</span></span> </header> <div class="entry-thumb hover-effect"> <a href="/gadgets/kak-vklyuchit-i-vyklyuchit-mobilnyi-sotovyi-internet-ili-wi-fi-na-iphone-i-ipad/"><img src="/uploads/569bbd12b2ca11968001c5d27eda0b36.jpg" alt="Включение интернета на iPhone Как настроить мобильный интернет на айфоне 5s" / loading=lazy></a> </div> <div class="entry-content"> <h6 class="entry-title"><a href="/gadgets/kak-vklyuchit-i-vyklyuchit-mobilnyi-sotovyi-internet-ili-wi-fi-na-iphone-i-ipad/">Включение интернета на iPhone Как настроить мобильный интернет на айфоне 5s</a></h6> <p>Статьи и ЛайфхакиЕсли вы планируете использовать телефон не только для звонков, но и для выхода в Глобальную...</p> </div> </article> </li> </ul> </div> <!-- /next_cat --> <div class="widget kp-article-list-widget"> <h6 class="widget-title">Компьютеры</h6> <ul class="clearfix"> <li> <article class="entry-item standard-post"> <header> <span class="entry-date clearfix"><span class="entry-icon icon-time"></span><span>2023-08-14 02:29:29</span></span> </header> <div class="entry-thumb hover-effect"> <a href="/iron/skype-portable---chto-eto-i-kak-skachat-kak-sozdat-portativnyi-skaip-dlya-windows/"><img src="/uploads/4af73c70b453c729f388cff24f5700db.jpg" alt="Как создать портативный Скайп для Windows Скайп рабочая портативная версия для xp" / loading=lazy></a> </div> <div class="entry-content"> <h6 class="entry-title"><a href="/iron/skype-portable---chto-eto-i-kak-skachat-kak-sozdat-portativnyi-skaip-dlya-windows/">Как создать портативный Скайп для Windows Скайп рабочая портативная версия для xp</a></h6> <p>Skype Portable - это портативная (Portable) версия всемирно известного бесплатного мессенжера. Бесплатная...</p> </div> </article> </li> <li> <article class="entry-item standard-post"> <header> <span class="entry-date clearfix"><span class="entry-icon icon-time"></span><span>2023-08-13 02:55:09</span></span> </header> <div class="entry-thumb hover-effect"> <a href="/internet/ego-posle-chego-avtorizuites-s-pomoshch-avtomaticheskoe-sozdanie/"><img src="/uploads/6104a4c8d6a47b2594520374b74935a9.jpg" alt="Его после чего авторизуйтесь с" / loading=lazy></a> </div> <div class="entry-content"> <h6 class="entry-title"><a href="/internet/ego-posle-chego-avtorizuites-s-pomoshch-avtomaticheskoe-sozdanie/">Его после чего авторизуйтесь с</a></h6> <p>При входе посетителей на сайт, в систему банковских платежей, требуется авторизоваться. Что такое авторизация?...</p> </div> </article> </li> </ul> </div> <!-- /next_cat --> <div class="widget kp-article-list-widget"> <h6 class="widget-title">Android</h6> <ul class="clearfix"> <li> <article class="entry-item standard-post"> <header> <span class="entry-date clearfix"><span class="entry-icon icon-time"></span><span>2023-08-13 02:55:09</span></span> </header> <div class="entry-thumb hover-effect"> <a href="/windows/kak-otmenit-chtob-sam-komp-ne-vyklyuchalsya-kak-sdelat-tak-chtoby-kompyuter-ne/"><img src="/uploads/28326975f3e55b19e083ace26ea0a393.jpg" alt="Как сделать так, чтобы компьютер не уходил в спящий режим" / loading=lazy></a> </div> <div class="entry-content"> <h6 class="entry-title"><a href="/windows/kak-otmenit-chtob-sam-komp-ne-vyklyuchalsya-kak-sdelat-tak-chtoby-kompyuter-ne/">Как сделать так, чтобы компьютер не уходил в спящий режим</a></h6> <p>Подробности Категория: Компьютеры, ПО Опубликовано 16.03.2013 12:03 После установки Windows на ноутбук, по...</p> </div> </article> </li> <li> <article class="entry-item standard-post"> <header> <span class="entry-date clearfix"><span class="entry-icon icon-time"></span><span>2023-08-12 03:05:16</span></span> </header> <div class="entry-thumb hover-effect"> <a href="/ios/udalenie-virusa-msn-udalit-msn-homepage-iz-brauzera-instrukciya-kak/"><img src="/uploads/ac288aba54aa4cc6ab66e1988ae4d3a6.jpg" alt="Удалить MSN Homepage из браузера (Инструкция) Как убрать msn из браузера" / loading=lazy></a> </div> <div class="entry-content"> <h6 class="entry-title"><a href="/ios/udalenie-virusa-msn-udalit-msn-homepage-iz-brauzera-instrukciya-kak/">Удалить MSN Homepage из браузера (Инструкция) Как убрать msn из браузера</a></h6> <p>MSN вирус — это опасный троян, распространяемый с помощью MSN Messenger. По существу, можно сказать, что этому...</p> </div> </article> </li> </ul> </div> <!-- /next_cat --> </div> <div class="clear"></div> </div> <div id="left-sidebar" class="widget-area-1"> <div class="widget kp-search-widget"> <form action="search-results.html" class="search-form clearfix" method="get" id="searchform" method="get"> <input type="text" value="" name="search" class="search-text"> <input type="submit" value="" name="submit" class="search-submit"> </form> </div> <div class="widget kp-article-list-widget"> <h6 class="widget-title">Новое</h6> <ul class="clearfix"> <li> <article class="entry-item standard-post"> <header> <span class="entry-date clearfix"><span class="entry-icon icon-time"></span><span>2023-08-12 03:05:16</span></span> <h6 class="entry-title"><a href="/windows/istoriya-statusov-v-drug-vokrug-podrobno-o-tom-kak-udalit/">Подробно о том, как удалить страницу в «Друг Вокруг» навсегда</a></h6> </header> <div class="entry-content"> <p>Социальная сеть знакомств, в которой уже зарегистрировано свыше 60 миллионов пользователей. Тут можно найди...</p> </div> </article> </li> <li> <article class="entry-item standard-post"> <header> <span class="entry-date clearfix"><span class="entry-icon icon-time"></span><span>2023-08-11 03:07:13</span></span> <h6 class="entry-title"><a href="/internet/upravlyaem-kulerom-termokontrol-ventilyatorov-na-praktike-ponizhaem-shum-i/">Понижаем шум и обороты кулера Регулятор скорости вращения кулера 12 в схема</a></h6> </header> <div class="entry-content"> <p>Основной проблемой вентиляторов, которые охлаждают ту или иную часть компьютера, является повышенный уровень...</p> </div> </article> </li> <li> <article class="entry-item standard-post"> <header> <span class="entry-date clearfix"><span class="entry-icon icon-time"></span><span>2023-08-10 03:18:27</span></span> <h6 class="entry-title"><a href="/blog/kakie-est-besplatnye-operacionnye-sistemy-aktualnaya-os-dlya-starogo-pk-ili/">Актуальная ос для старого пк или нетбука Мини операционные системы</a></h6> </header> <div class="entry-content"> <p>Пользователи персональных компьютеров отдают предпочтение конкретным вариантам Windows. Универсальность и...</p> </div> </article> </li> <li> <article class="entry-item standard-post"> <header> <span class="entry-date clearfix"><span class="entry-icon icon-time"></span><span>2023-08-09 03:22:43</span></span> <h6 class="entry-title"><a href="/ios/kak-narisovat-animaciyu-v-fotoshope-cs6-sozdanie-gif-animacii-iz-video-v-photoshop/">Создание GIF-анимации из видео в Photoshop</a></h6> </header> <div class="entry-content"> <p>Доброго вечера, дорогие подписчики и просто читатели моего блога! Готовы ли Вы узнать о том, как “оживить”...</p> </div> </article> </li> <li> <article class="entry-item standard-post"> <header> <span class="entry-date clearfix"><span class="entry-icon icon-time"></span><span>2023-08-09 03:22:43</span></span> <h6 class="entry-title"><a href="/gadgets/kak-umenshit-razmer-kartinki-izobrazheniya-maksimalnoe/">Как уменьшить размер картинки, изображения?</a></h6> </header> <div class="entry-content"> <p>Поводом для написания статьи послужили рекомендации Google по оптимизации сайта с целью повышения дохода в...</p> </div> </article> </li> <li> <article class="entry-item standard-post"> <header> <span class="entry-date clearfix"><span class="entry-icon icon-time"></span><span>2023-08-08 03:11:05</span></span> <h6 class="entry-title"><a href="/iron/chto-takoe-gorizontalnaya-inversiya-vorld-of-tanks-kto-igraet-s-inversiei-myshi/">Кто играет с инверсией мыши?</a></h6> </header> <div class="entry-content"> <p>Как убрать инверсию? Ответ мастера: Инверсия мыши является своеобразным рабочим состоянием, когда она...</p> </div> </article> </li> <li> <article class="entry-item standard-post"> <header> <span class="entry-date clearfix"><span class="entry-icon icon-time"></span><span>2023-08-20 01:40:27</span></span> <h6 class="entry-title"><a href="/windows/kak-nastroit-uvedomleniya-na-vyklyuchennom-ekrane-kak-otklyuchit/">Как отключить уведомления на Android?</a></h6> </header> <div class="entry-content"> <p>Устанавливая каждое приложение, владелец смартфона соглашается с запросами на доступ к определенным данным и...</p> </div> </article> </li> </ul> </div> <div class="widget kp-article-list-widget"> <h6 class="widget-title">Популярное</h6> <ul class="clearfix"> <li> <article class="entry-item standard-post"> <header> <span class="entry-date clearfix"><span class="entry-icon icon-time"></span><span>2023-08-20 01:40:27</span></span> </header> <div class="entry-thumb hover-effect"> <a href="/android/obzor-kross-platformennyh-menedzherov-parolei-pochemu-ya-ne-polzuyus/"><img src="/uploads/5455a4f23f68ef4c56fb3ed36b362952.jpg" alt="Почему я не пользуюсь менеджерами паролей Менеджер паролей на своем сервере" / loading=lazy></a> </div> <div class="entry-content"> <h6 class="entry-title"><a href="/android/obzor-kross-platformennyh-menedzherov-parolei-pochemu-ya-ne-polzuyus/">Почему я не пользуюсь менеджерами паролей Менеджер паролей на своем сервере</a></h6> <p>С тем, что количество паролей, которые надо запомнить, точно больше, чем места для них в голове, столкнулись,...</p> </div> </article> </li> <li> <article class="entry-item standard-post"> <header> <span class="entry-date clearfix"><span class="entry-icon icon-time"></span><span>2023-08-19 01:59:09</span></span> </header> <div class="entry-thumb hover-effect"> <a href="/windows/rodnye-draivera-dlya-noutbuka-lenovo-g770-ustanovka-draivera-dlya-noutbuka-lenovo-g770/"><img src="/uploads/af0cd1d11b3849d652378485cb267b8f.jpg" alt="Установка драйвера для ноутбука Lenovo G770" / loading=lazy></a> </div> <div class="entry-content"> <h6 class="entry-title"><a href="/windows/rodnye-draivera-dlya-noutbuka-lenovo-g770-ustanovka-draivera-dlya-noutbuka-lenovo-g770/">Установка драйвера для ноутбука Lenovo G770</a></h6> <p>Для успешной работы с любым оборудованием требуется наличие драйверов и своевременное их обновление. В случае с...</p> </div> </article> </li> </ul> </div> </div> <div class="clear"></div> </div> <div id="bottom-sidebar"> <nav id="bottom-nav" class="text-center"> <ul id="bottom-menu" class="clearfix"> <li><a href="/category/android/">Android</a></li> <li><a href="/category/ios/">Ios</a></li> <li><a href="/category/windows/">Windows</a></li> <li><a href="/category/blog/">Блог</a></li> <li><a href="/category/gadgets/">Гаджеты</a></li> </ul> </nav> <p id="back-top"> <a href="#top">Вверх</a> </p> </div> <footer id="kp-page-footer" class="text-center"> <p id="copyright">Copyright &copy; 2024 aimgames.ru </p> <p>Гаджеты. Андроид. Интернет. Компьютеры. Железо</p> </footer> </div> <script src="templates/ultramag/js/jquery-1.10.2.min.js"></script> <script src="templates/ultramag/js/superfish.js"></script> <script src="templates/ultramag/js/bootstrap.min.js"></script> <script src="templates/ultramag/js/jquery.carouFredSel-6.2.1-packed.js"></script> <script src="templates/ultramag/js/jquery.flexslider-min.js"></script> <script src="templates/ultramag/js/jquery.prettyPhoto.js"></script> <script src="templates/ultramag/js/jquery.validate.min.js"></script> <script src="templates/ultramag/js/jquery.form.js"></script> <script src="templates/ultramag/js/jquery.timeago.js"></script> <script src="templates/ultramag/js/tweetable.jquery.min.js"></script> <script src="templates/ultramag/js/jquery.mousewheel.js"></script> <script src="templates/ultramag/js/modernizr-transitions.js"></script> <script src="templates/ultramag/js/jquery.masonry.min.js"></script> <script src="templates/ultramag/js/jquery.isotope.min.js"></script> <script src="templates/ultramag/js/custom.js" charset="utf-8"></script> <script src="https://yastatic.net/share2/share.js" async="async"></script> </body> </html>