В закладки
КонтактыО сайте

Создание фрейма в html примеры. Понятие фрейма в HTML

Инструкция

Язык HTML (HyperText Markup Language - «язык разметки гипертекста») предусматривает два вида фреймов. «Плавающий» более гибок и его проще вставить в уже существующую . В общем случае конструкция, описывающая врезку окна с помощью плавающего фрейма, выглядит так:Здесь в качестве источника данных для этого фрейма указана существующего сайта (атрибут src). Она и будет открыта во фрейме размером 400 на 300 , как это указано в атрибутах width и height.Вы можете указать в атрибуте src и страницу своего сайта. В этом случае достаточно задать относительный адрес (то есть адрес относительно страницы, в которую вставляется фрейм):В этом образце не указаны и высота фрейма, но зато есть атрибут- id. Используя его, вы можете с помощью CSS () задать для этого фрейма необходимые размеры:

Другой тип фреймов - «классический» - требует наличия отдельной страницы, которая будет содержать описание структуры фреймов. Сами фреймы будут находиться в отдельных страницах, может даже на отдельных сайтах. HTML-код такой страницы-контейнера для фреймов может выглядеть так:




Никаких блоков ... и ... , обязательных для обычных страниц, здесь быть не должно.В этом образце открывающий тег контейнера содержит атрибут rows - это , что пространство страницы должно быть поделено по вертикали и первому фрейму будет отдана верхняя часть. Если заменить rows на cols, то разделение будет горизонтальным. Значение этого атрибута "*,*" указывает, что пропорции разделения - по 50% каждому. Если указать, например "20%,*", то первому фрейму будет отдано только 20%, а остальное пространство - второму.Пользователь может сам изменять эти пропорции, перетаскивая границы фреймов мышкой, но есть возможность запретить это действие. Для этого в тег конкретного фрейма нужно добавить атрибут noresize. Можно также указать размеры отступов от соседнего фрейма по вертикали и горизонтали (атрибуты marginwidth и marginheight):Есть возможность задавать правила поведения для полос прокрутки каждого фрейма в отдельности. Для этого используется атрибут scrolling, который может содержать одно из трех предопределенных значений. Если указать scrolling="auto", то прокрутки будут появляться когда содержимое фрейма не вмещается в его границы. Если "yes" - полосы будут присутствовать постоянно, независимо от наличия необходимости в них. Если "no" - это будет означать запрет полос прокрутки для этого фрейма.

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

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

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

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

Для создания фрейма используется тег , который заменяет тег в документе и применяется для разделения экрана на области. Внутри данного тега находятся теги , которые указывают на HTML-документ, предназначенный для загрузки в область (рис. 13.1).

Рис. 13.1. Пример разделения окна браузера на два фрейма

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

Рассмотрим этапы создания фреймов на основе страницы, продемонстрированной на рис. 13.1. Нам понадобится три файла: index.html — определяет структуру документа, menu.html — загружается в левый фрейм и content.html — загружается в правый фрейм. Из них только index.html отличается по структуре своего кода от других файлов (пример 13.1).

Пример 13.1. Файл index.html

Фреймы

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

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

В данном примере окно браузера разбивается на две колонки с помощью атрибута cols , левая колонка занимает 100 пикселов, а правая — оставшееся пространство, заданное символом звездочки. Ширину или высоту фреймов можно также задавать в процентном отношении, наподобие таблиц.

В теге задается имя HTML-файла, загружаемого в указанную область с помощью атрибута src . В левое окно будет загружен файл, названный menu.html (пример 13.2), а в правое — content.html (пример 13.3). Каждому фрейму желательно задать его уникальное имя, чтобы документы можно было загружать в указанное окно с помощью атрибута name .

Пример 13.2. Файл menu.html

Навигация по сайту

В данном примере серый фон на странице задается с помощью стилей, о которых речь пойдет далее.

Пример 13.3. Файл content.html

Содержание сайта

СОДЕРЖАНИЕ

Рассмотрим более сложный пример уже с тремя фреймами (рис. 13.2).

Рис. 13.2. Разделение страницы на три фрейма

В данном случае опять используется тег , но два раза, причем один тег вкладывается в другой. Горизонтальное разбиение создается через атрибут rows , где для разнообразия применяется процентная запись (пример 13.4).

Пример 13.4. Три фрейма

Фреймы

Как видно из данного примера, контейнер с атрибутом rows вначале создает два горизонтальных фрейма, но вместо второго фрейма подставляется еще один , который повторяет уже известную вам структуру из примера 13.1. Чтобы не появилась вертикальная полоса прокрутки, и пользователь не мог самостоятельно изменить размер верхнего фрейма, добавлены атрибуты scrolling="no" и noresize .

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

В каждый фрейм в этом случае для наглядности загружен простой HTML документ, сообщающий номер фрейма и название файла, хранящего его содержимое. Если в фрейм будет загружен реальный документ, который не помещается полностью в нем, то у фрейма (внимание, не у всего окна!) появятся вертикальная и/или горизонтальная полосы прокрутки в зависимости от того, по горизонтали и/или по вертикали не помещается содержимое документа.
Например, дизайн и структура вашего сайта таковы, что есть одинаковые элементы, повторяющиеся на каждой странице сайта: название, навигационное меню, адрес в конце страницы или какие-то иные подобные элементы. Изменяется только содержание разделов. Тогда страницы можно разбить на части таким образом, чтобы неизменяемые части были помещены в отдельные фреймы, а еще один фрейм выделить для того, чтобы в него загружалось содержимое нужного раздела после щелчка на соответствующей ссылке, например, из меню.
Это дает экономию в скорости загрузки, так как одинаковые части страниц сайта повторно не загружаются, а просто все время отображаются в отведенных им фреймах.

Создание структуры фреймов элемент FRAMESET

Структура разбивки окна хранится в отдельном HTML документе, он и называется документом с фреймами. Структура фреймов формируется при помощи специального элемента FRAMESET. Обычный документ имеет один раздел HEAD и один раздел BODY, тогда как в документе с фреймами раздел BODY заменяется описанием структуры фреймов, Т.е. разделом FRAMESET.
В раздел FRAMESET может быть добавлен элемент NOFRAME с альтернативным содержанием для отображения в браузерах, не поддерживающих фреймы, или в браузерах с отключенной поддержкой фреймов. Такие браузеры просто не поймут структуры FRAMESET и NOFRAME, а отобразят помещенный внутри них текст.

Простой документ с фреймами</ТIТLЕ> </span> </HEAD> <FRAМESET > <span> ...описание структуры фреймов... </span> <NOFRAМES> <span> Альтернативное содержание для браузеров, не поддерживающих фреймы </span> </NOFRAМES> </FRAМESET> </HТМL> <p>Обратите внимание, что раздел BODY в документе отсутствует полностью, а элемент NOFRAMES содержится внутри раздела FRAMESET.<br> Сама структура фреймов формируется делением окна браузера на части — строки и колонки; В какой-то степени это похоже не создание таблиц. Для этого у элемента FRAMESET существуют атрибуты cols и rows, задающие деление на колонки и строки соответственно.<br> Единицы измерения, в которых можно задавать размеры фреймов, это, как обычно, пиксели и проценты. Есть еще возможность задавать размер в новой пока для нас единице измерения, которую условно можно назвать «часть» окна. Значения атрибутов cols и rows задаются перечислением размеров соответствующих областей через запятую. Можно комбинировать <a href="/netgear/sinhronizaciya-pk-s-android-raznymi-sposobami-sposoby-sinhronizacii-telefona/">разные способы</a> задания. Рассмотрим несколько примеров, исходя из предположения, что размер окна браузера 800х600 пикселей.</p> <FRAМESET rows= "50%, 50%"> </FRAМESET> <p>Такой код поделит окно по горизонтали на два одинаковых по высоте фрейма (строки). Если задать атрибут cols=» 50%, 50%», то получим две одинаковые по ширине колонки.</p> <span><FRAМESET cols= "120, 400. *"> </span> <span> . . . продолжение определения структуры фреймов. . . </span> </FRAМESET> <p>При таком коде получим три колонки фреймов: левая шириной 120 пикселей, средняя шириной 400 пикселей, а на третью колонку отводится все, что останется от первых двух колонок, в атрибуте это значение обозначается символом звездочки «*».</p> <FRAМESET cols= "1*, 4*"> <span> . . . продолжение определения структуры фреймов. . . </span> </FRAМESET> <p>Такой код создаст две колонки фреймов. Ширина первой принимается за единицу (это обозначается как 1 * или просто *), ширина второй в четыре раза больше. Таким образом, ширина первой будет 20%, а ширина второй 80% от общей ширины окна браузера.</p> <span><FRAМESET cols= "100, 40%, *"> </span> <span> . . . продолжение определения структуры фреймов... </span> </FRAМESET> <p>В приведенном мере комбинируются все три способа задания размеров. Ширина первой колонки будет равна 100 пикселей, для второй отводится 40% оставшейся ширины (800 — 100 = 700), и на третью остается все, что не занято первой и второй колонками.<br> Раздел FRAMESET может содержать вложенные разделы FRAMESET, что позволяет создать довольно сложную структуру фреймов. Допустим, нам надо разделить окно на 4 фрейма следующим образом:</p> <p><img src='https://i2.wp.com/samsebewebmaster.ru/wp-content/uploads/2016/06/Fr-1.jpg' align="center" width="100%" loading=lazy></p> <p>Сначала необходимо организовать 2 колонки таким образом:</p> cols= "100, * " <p>Затем вторую колонку поделить на три строки таким образом:</p> rows=" 80, *, 30" <p>Отдельный фрейм, точнее его описание, задается элементом FRAME и его атрибутами: подробнее о нем чуть позже. Вернемся к вложенным элементам FRAMESET. Рассмотрим пример кода, создающего такую структуру фреймов:</p> <FRAМESET cols= "100, * "> <span> <FRAМE name= "framel" src= "framel.html"> </span> <span> <FRAМESET rows= "80, *, 30"> </span> <span> <FRAМE name= "frame2" src= "frame2.html"> </span> <span> <FRAМE name= "frame3" src= "frame3.html"> </span> <span> <FRAМE name= "frame4" src= "frame4.html"> </span> </FRAМESET> </FRAМESET> <p>Каким образом разбивается окно на фреймы, вроде бы разобрались. При создании фреймов можно сделать так, чтобы границы между фреймами видно не было. Как вы, наверное, уже догадались, делается это при помощи атрибута border его значение должно равняться нулю. Но дело в том, что для фреймов этот атрибут не воспринимается браузером <a href="/recommend/pochemu-ne-rabotaet-explorer-ne-rabotaet-internet-explorer/">Internet Explorer</a>, зато поддерживается браузером <a href="/lan/kak-v-download-master-otklyuchit-vsplyvayushchie-novosti-ubiraem-dobavlyaem/">Netscape Navigator</a>. Для Internet Explorer граница между фреймами задается атрибутом frameborder, который не поддерживается браузером Netscape Navigator. Получается, что необходимо задавать <a href="/lan/podschet-kolichestva-yacheek-s-odinakovym-znacheniem-pyat-sposobov-kak/">одинаковые значения</a> для обоих атрибутов, чтобы оба браузера восприняли HTML код одинаково и толщина границ между фреймами была одинаковой.<br> Толщину границ или, по-другому, расстояние между фреймами также можно регулировать атрибутом framespacing, значение которого задается в пикселях. Все атрибуты элемента FRAMESET приведены в таблице.</p> <h2>Атрибуты элемента <FRAMESEТ></h2> <table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%"> <h3>Атрибут</h3> </td> <td bgcolor="#E7E7E7" width="60%"> <h3>Описание</h3> </td> <td bgcolor="#E7E7E7" width="20%"> <h3>Пример</h3> </td> </tr></tbody></table><table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%">rows </td> <td bgcolor="#E7E7E7" width="60%">Определяет количество и размеры горизонтальных фреймов (фреймов строк) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Способы задания размеров: <p>а) в процентах от высоты <a href="/program/standartnye-nastroiki-fotoshopa-v-vkladke-simvol-est-li-v-photoshop-cs6-glify/">рабочей области</a> окна браузера например: "30%, 30%, 40%" ;</p> <p>б) в виде знака «*» (звездочка), говорящего о том, что фрейм занимает все свободное пространство окна браузера, незанятое другими фреймами с явно указанными размерами например, звездочка в записи "25%, 25%, *" равносильна 50%;</p> <p>в) в пикселях например: "75, *" .</p> <p>Все три способа можно совмещать.</p> </td> <td bgcolor="#E7E7E7" width="20%"> rows= "25%, 25%, *" </td> </tr><tr><td bgcolor="#E7E7E7" width="20%">cols </td> <td bgcolor="#E7E7E7" width="60%">Определяет количество и размеры вертикальных фреймов (фреймов столбцов) в окне браузера. В качестве значения<br> задается список размеров фреймов через запятую. Размеры задаются так же, как и в <a href="/command-line/win-8-tochka-vosstanovleniya-vosstanovlenie-windows-do-predydushchego/">предыдущем параметре</a> ROWS. </td> <td bgcolor="#E7E7E7" width="20%"> cols= "265, *" </td> </tr><tr><td bgcolor="#E7E7E7" width="20%">border </td> <td bgcolor="#E7E7E7" width="60%">Определяет ширину рамок фреймов в пикселях. <a href="/windows/kak-proverit-dannye-kompyutera-kak-uznat-parametry-svoego/">Данный параметр</a> действует только в браузерах Netscape. </td> <td bgcolor="#E7E7E7" width="20%"> Border= "0" </td> </tr><tr><td bgcolor="#E7E7E7" width="20%">frameborder </td> <td bgcolor="#E7E7E7" width="60%">Данный параметр действует только в браузерах lnternet Explorer и определяет наличие рамок у содержащихся внутри элемента FRAMESET фреймов. <a href="/netgear/xsd-spisok-vozmozhnyh-znachenii-xsd-umnyi-xml-ogranicheniya-dlya-tipov-dannyh/">Возможные значения</a>: Yes отображать рамки; No или 0 не отображать рамки. </td> <td bgcolor="#E7E7E7" width="20%"> Frameborder= "0" </td> </tr><tr><td bgcolor="#E7E7E7" width="20%">framespacing </td> <td bgcolor="#E7E7E7" width="60%">Определяет расстояние (так называемую «серую область») между фреймами в пикселях. Данный параметр также необходим для создания фреймов без рамок. </td> <td bgcolor="#E7E7E7" width="20%"> framespacing= "0" </td> </tr></tbody></table><p>Теперь вернемся к элементу FRAME, который описывает отдельный фрейм внутри всей структуры. Обязательный параметр для него — атрибут src, который задает URL HTML — документа или изображения для отображения в этом фрейме. Также лучше задать фрейму имя при помощи атрибута name. Это позволит использовать <a href="/linksys/informacionnye-tehnologii-it-povtoryayushchiesya-uchastki-teksta-naprimer/">данное имя</a> в качестве значения <a href="/netgear/giperssylka-chto-eto-takoe-kak-sdelat-ssylku-i-vstavit-v-html-kod/">атрибута target</a> элемента А и управлять тем, в какой фрейм должна загружаться ссылка. Имена фреймов не могут начинаться с цифр, в качестве начальных символов допустимы только буквы латинскою алфавита (az, AZ).</p> <p>Когда в структуре фреймов не задана рамка между фреймами, их содержимое может слишком плотно примыкать друг к другу, что будет не очень красиво выглядеть. Если хотите раздвинуть содержимое фреймов и при этом все-таки не включать отображение границ между ними, то это можно сделать, задав внутри фреймов отступы. Размер этих отступов задается в пикселях и попарно: для отступов сверху и снизу атрибутом marginheight,<br> а для отступов справа и слева атрибутом marginwidth. Тогда расстояние между содержимым соседних фреймов будет равно сумме соответствующих отступов этих фреймов.</p> <p>Должна ли отображаться рамка вокруг отдельною фрейма, определяется его атрибутом frameborder. Значение yes (или 1) говорит о том, что рамка должна быть, значение no (или 0) указывает, что рамки быть не должно.<br> Пользователь может изменять размер фреймов, созданный <a href="/zyxel/pole-html-dokumenta-1s-obychnye-formy-upravlyaemye-formy-pole-html/">HTML документом</a>. Для этого достаточно подвести курсор мыши к границе фреймов (неважно, видны эти границы или нет) и стандартным для <a href="/router/operativnaya-sistema-prezentaciya-prezentaciya-sovremennaya/">операционной системы</a> способом изменить размер окна.<br> В <a href="/mts/kak-izmenit-ikonku-myshi-na-windows-7-izmenenie-kursora-v-windows/">Windows курсор</a> мыши примет вид двунаправленной черной стрелки. Нажав <a href="/d-link/knopka-myshi-rabotaet-cherez-raz-ne-rabotaet-levaya-knopka-myshi/">левую кнопку</a> мыши, можно передвинуть границу окна. Аналогично можно изменить и размер фрейма, поскольку фрейм это тоже окно. Если вы рассчитали размеры своих фреймов и не хотите, чтобы пользователь менял их, задайте атрибут noresize. В результате изменение размеров будет запрещено.<br> Как мы уже говорили ранее, полосы прокрутки у фрейма появляются в том случае, если его содержимое в заданных его границах полностью не помещается. Наличие полос прокрутки регулируется атрибутом scrolling. Допустимы три значения yes, no и auto.<br> Значение auto соответствует автоматическому появлению полос прокрутки в тех случаях, когда это действительно необходимо. Если содержимое видно и так, полос прокрутки нет, если часть содержимого не помещается появляется нужная полоса прокрутки.<br> Значение yes включает обе полосы прокрутки независимо от того, нужны они или нет. Иногда это может выглядеть не очень красиво.<br> Значение no запрещает показывать полосы прокрутки совсем. Будьте осторожны с этим значением, поскольку при его указании можете лишить пользователя возможности увидеть все содержимое фрейма, Когда оно не помещается в нем полностью. Все атрибуты элемента FRAME приведены в таблице.</p> <h2>Атрибуты элемента <FRAME></h2> <table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%"> <h3>Атрибут</h3> </td> <td bgcolor="#E7E7E7" width="60%"> <h3>Описание</h3> </td> <td bgcolor="#E7E7E7" width="20%"> <h3>Пример</h3> </td> </tr></tbody></table><table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%">src </td> <td bgcolor="#E7E7E7" width="60%">Обязательный параметр. Указывает адрес (URL) HTL<br> файла, отображаемого в данном фрейме </td> <td bgcolor="#E7E7E7" width="20%"> src= "frame2 .html" </td> </tr><tr><td bgcolor="#E7E7E7" width="20%">name </td> <td bgcolor="#E7E7E7" width="60%">Определяет имя данного фрейма, которое будет в дальнейшем использоваться для ссылки на него из других документов с помощью атрибута target (см. элемент А). В качестве значения нужно указать любое имя без пробелов с использованием латинских символов и цифр<br> (начальными символами могут быть только буквы <a href="/network-equipment/latinskii-alfavit-onlain-perevodchik-perevodchik-na-latinicu/">латинского алфавита</a>: a-z, A-Z). Имя не должно начинаться с цифр и <a href="/zyxel/kodovye-znaki-specialnye-simvoly-dlya-nika-zv-zdochki-serdechki/">специальных символов</a>. Зарезервированные имена фреймов начинаются со знака подчеркивания. </td> <td bgcolor="#E7E7E7" width="20%"> name= "menu1" </td> </tr><tr><td bgcolor="#E7E7E7" width="20%">marginwidth </td> <td bgcolor="#E7E7E7" width="60%">Определяет ширину (в пикселях) левого и правого полей фрейма. Если параметр не указан, браузер самостоятельно определит <a href="/router/formatirovanie-diska-d-kakoi-razmer-klastera-naibolee-optimalen-vypolnyaem/">оптимальный размер</a> отступа. </td> <td bgcolor="#E7E7E7" width="20%"> marginwidth= "0" </td> </tr><tr><td bgcolor="#E7E7E7" width="20%">marginheight </td> <td bgcolor="#E7E7E7" width="60%">Определяет ширину (в пикселях) верхнего и нижнего полей фрейма. Если параметр не указан, браузер самостоятельно определит оптимальный размер отступа. </td> <td bgcolor="#E7E7E7" width="20%"> marginheight= "0" </td> </tr><tr><td bgcolor="#E7E7E7" width="20%">scrolling </td> <td bgcolor="#E7E7E7" width="60%">Определяет наличие полос прокрутки содержимого фрейма. Возможные значения:<br> yes — отображать полосы прокрутки;<br> no — не отображать полосы прокрутки;<br> auto — отображать полосы прокрутки при необходимости (если документ, указанный в параметре SRC, не умещается во фрейме) </td> <td bgcolor="#E7E7E7" width="20%"> scrolling= "auto" </td> </tr><tr><td bgcolor="#E7E7E7" width="20%">noresize </td> <td bgcolor="#E7E7E7" width="60%">Не позволяет изменять размеры фрейма. Данный параметр является флагом и не требует указания значения. </td> <td bgcolor="#E7E7E7" width="20%"> noresize </td> </tr><tr><td bgcolor="#E7E7E7" width="20%">frameborder </td> <td bgcolor="#E7E7E7" width="60%">Определяет наличие рамок у фрейма. Возможные значения:<br> yes или 1 — отображать рамки;<br> no или 0 — не отображать рамки. </td> <td bgcolor="#E7E7E7" width="20%"> frameborder= "0" </td> </tr></tbody></table> <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>На рисунке видим достаточно распространенную структуру сайта. Ее можно представить в виде таблицы, а можно все это сделать при помощи фреймов. В верхний фрейм можно загрузить страницу с логотипом и меню, в левый – страницу с навигацией по сайту, в центральном фрейме будет страница с основным содержимым сайта, в правый фрейм загрузим страницу с <a href="/data-recovery/kak-ubrat-bannery-v-hrome-kak-ubrat-reklamnye-i-virusnye-bannery-v/">рекламными баннерами</a>, а в нижний – страницу с <a href="/program/kontaktnaya-informaciya-vkontakte-kak-napisat-v-tehpodderzhku-vk-besplatnaya/">контактной информацией</a>. Вот вкратце что такое фреймы.</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%, то все фреймы пропорционально уменьшаться, что бы <a href="/windows/kak-v-eksele-poschitat-obshchuyu-summu-stolbca-kak-poschitat-summu-yacheek-v/">общая сумма</a> было равна 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 является адрес <a href="/windows/razmeshchenie-grafiki-na-web-stranice-formaty-graficheskih-failov/">web страницы</a>, которая будет загружаться в <a href="/beeline/testy-po-geoinformacionnym-sistemam-v-geologii-geoinformacionnye-sistemy-v-ekologii-i-prirodopolzo/">данный фрейм</a>. Адрес, как видно из примера, может быть абсолютным и относительным.</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>Конечно, адреса для фреймов я взял из предыдущих выпусков рассылки, и никакого меню, логотипа, навигации и так далее мы тут не увидели. Но структуру такую как нужно мы получили. Но если создать реальные <a href="/program/instrumenty-dlya-analiza-konkurentov-chto-takoe-seo-analiz-konkurentov-i/">нужные страницы</a>, то можно получить красивую структуру.</p> <p>Что мы получили в итоге. Чем это удобно или неудобно (решать вам), но при фреймовой структуре, всегда все наши фреймы остаются на странице. Независимо от величины содержимого у нас всегда будет виден логотип и меню сайта, нижняя часть сайта контактной информацией, блок навигации и баннеры. Вот, в общем-то, суть и смысл фреймов.</p> <p>Существует возможность взаимодействия между фреймами. Можно сделать так, чтобы нажав на ссылку в одном фрейме, информация появилась в другом. Сейчас мы посмотрим, как это делается.</p> <p>Создадим фрейм следующего вида:</p> <p><img src='https://i2.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> </article> <div class="row article-info"> <div class="share"> <p>Поделиться:</p> <div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,twitter" data-counter="" data-image=""></div> </div> <div id="post-ratings-496" class="post-ratings" itemscope itemtype="http://schema.org/Article" data-nonce="adfbd60e67"><img id="rating_496_1" src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="1 Звезда" title="1 Звезда" onmouseover="current_rating(496, 1, '1 Звезда');" onmouseout="ratings_off(5, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" / loading=lazy><img id="rating_496_2" src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 Звезды" title="2 Звезды" onmouseover="current_rating(496, 2, '2 Звезды');" onmouseout="ratings_off(5, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" / loading=lazy><img id="rating_496_3" src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="3 Звезды" title="3 Звезды" onmouseover="current_rating(496, 3, '3 Звезды');" onmouseout="ratings_off(5, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" / loading=lazy><img id="rating_496_4" src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="4 Звезды" title="4 Звезды" onmouseover="current_rating(496, 4, '4 Звезды');" onmouseout="ratings_off(5, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" / loading=lazy><img id="rating_496_5" src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="5 Звезд" title="5 Звезд" onmouseover="current_rating(496, 5, '5 Звезд');" onmouseout="ratings_off(5, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" / loading=lazy> <span>5,00 / 3</span> </div> </div> <div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/"> <span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Роутер. Настройка. Антивирусы. Программы. Хаки. Windows" href="/" class="home"><span property="name">Главная</span></a> <meta property="position" content="1"> </span><span class="sep">→</span><span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Командная строка" href="/category/command-line/" class="taxonomy category"><span property="name">Командная строка</span></a> <meta property="position" content="2"> </span><span class="sep">→</span><span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Создание фрейма в html примеры. Понятие фрейма в HTML" href="/command-line/sozdanie-freima-v-html-primery-ponyatie-freima-v-html/" class="taxonomy category"><span property="name">Создание фрейма в html примеры. Понятие фрейма в HTML</span></a> <meta property="position" content="3"> </span><span class="sep">→</span> </div> <div class="title-30">Статьи по теме:</div> <ul class="row related"> <li><a href="/zyxel/pristavka-perfeo-pf-120-dvb-t2-instrukciya-nastroika-i-podklyuchenie-pristavki/"><img src="https://i2.wp.com/nix.ru/autocatalog/usb_chargers/337385_2254_draft_small.jpg" alt="Настройка и подключение приставки цифрового телевидения" / loading=lazy>Настройка и подключение приставки цифрового телевидения</a></li> <li><a href="/program/cifrovoi-dvb-t2-resiver-perfeo-nastroika-i-podklyuchenie-pristavki-cifrovogo/"><img src="https://i0.wp.com/video-audio.ru/system/files/upload/PF-168-1-IN-NEW_0.jpg" alt="Настройка и подключение приставки цифрового телевидения" / loading=lazy>Настройка и подключение приставки цифрового телевидения</a></li> <li><a href="/program/besprovodnaya-akustika-jbl-go-otzyvy-pokupatelei-besprovodnaya/"><img src="https://i2.wp.com/mediapure.ru/wp-content/uploads/2015/05/DSC_0015.jpg" alt="Беспроводная акустика JBL GO Black (JBLGOBLK) - Отзывы Внешний вид и элементы управления" / loading=lazy>Беспроводная акустика JBL GO Black (JBLGOBLK) - Отзывы Внешний вид и элементы управления</a></li> <li><a href="/program/cifrovaya-sistema-vch-svyazi-po-lep-mc04-plc-virtualnyi-kompyuternyi/"><img src="https://i0.wp.com/radis.ru/images/DSC1557.jpg" alt=" Виртуальный компьютерный музей Dx связь" / loading=lazy> Виртуальный компьютерный музей Dx связь</a></li> </ul> </main> <div class="container colorline sidebar-mobile"> <span class="orange"></span> <span class="green"></span> <span class="blue"></span> <span class="red"></span> <span class="orange-2"></span> </div> <aside class="height sidebar"> <div class="title-30">Подписывайтесь!</div> <div id="social" align="center"> <ul> <li class="vk"><a href="https://vk.com/share.php?url=https://exactlycase.ru/command-line/sozdanie-freima-v-html-primery-ponyatie-freima-v-html/"> </a></li> <li class="fb"><a href="https://www.facebook.com/sharer/sharer.php?u=https://exactlycase.ru/command-line/sozdanie-freima-v-html-primery-ponyatie-freima-v-html/"> </a></li> </ul> </div> <script id="custom-block-89228387" type="text/javascript">ads_block(3, 89228387, 5127);</script><div class="title-30">Популярные статьи</div> <div class="popular-articles"> <div class="article-block"> <img width="640" height="480" src="/uploads/82bebdc84b91d704bb703db1c13f4723.jpg" class="attachment-image145x100 size-image145x100 wp-post-image" alt="Как шифровалась связь: технологии защиты в годы войны Вч связь по линиям электропередачи" sizes="(max-width: 640px) 100vw, 640px" / loading=lazy> <div class="rating"><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy> <span>5,00 / 2</span></div> <a class="title" href="/data-recovery/virtualnyi-kompyuternyi-muzei-kak-shifrovalas-svyaz/">Как шифровалась связь: технологии защиты в годы войны Вч связь по линиям электропередачи</a> </div> <div class="article-block"> <img width="640" height="480" src="/uploads/7b53f01240591a70f8e86d62eecb8afa.jpg" class="attachment-image145x100 size-image145x100 wp-post-image" alt="Почему возникает ошибка "Использование модальных окон в данном режиме запрещено"?" sizes="(max-width: 640px) 100vw, 640px" / loading=lazy> <div class="rating"><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy> <span>5,00 / 2</span></div> <a class="title" href="/data-recovery/modalnaya-forma-1s-pochemu-voznikaet-oshibka-ispolzovanie-modalnyh-okon/">Почему возникает ошибка "Использование модальных окон в данном режиме запрещено"?</a> </div> <div class="article-block"> <img width="640" height="480" src="/uploads/0ba28e35715d9e5b4778445ecb25a55a.jpg" class="attachment-image145x100 size-image145x100 wp-post-image" alt="Как включить полный интерфейс в 1с 8" sizes="(max-width: 640px) 100vw, 640px" / loading=lazy> <div class="rating"><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy> <span>5,00 / 2</span></div> <a class="title" href="/linux/kak-vklyuchit-polnyi-interfeis-v-1s-8-3-panel-funkcii-tekushchego/">Как включить полный интерфейс в 1с 8</a> </div> <div class="article-block"> <img width="640" height="480" src="/uploads/9c5fe177a21ae2141f03ef3a89dd5d0a.jpg" class="attachment-image145x100 size-image145x100 wp-post-image" alt="Переключатели, обычное приложение, управляемые формы" sizes="(max-width: 640px) 100vw, 640px" / loading=lazy> <div class="rating"><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy> <span>5,00 / 2</span></div> <a class="title" href="/netgear/1s-8-pereklyuchatel-na-upravlyaemoi-forme-pereklyuchateli-obychnoe-prilozhenie/">Переключатели, обычное приложение, управляемые формы</a> </div> <div class="article-block"> <img width="640" height="480" src="/uploads/cd81568f2a505fce902e0f2b50b90a07.jpg" class="attachment-image145x100 size-image145x100 wp-post-image" alt="Атол 11 драйвер. Настройка ккт атол. Раздел1: интеграция по и ккт «атол» с использованием библиотек драйвера ккм" sizes="(max-width: 640px) 100vw, 640px" / loading=lazy> <div class="rating"><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy> <span>5,00 / 2</span></div> <a class="title" href="/network-equipment/atol-11-draiver-nastroika-kkt-atol-razdel1-integraciya-po-i-kkt/">Атол 11 драйвер. Настройка ккт атол. Раздел1: интеграция по и ккт «атол» с использованием библиотек драйвера ккм</a> </div> <div class="article-block"> <img width="640" height="480" src="/uploads/a3095541f5fbd28df38fc7f1ccf2739d.jpg" class="attachment-image145x100 size-image145x100 wp-post-image" alt="С информационной системой казначейство – клиент Федеральная информационная система федерального казначейства" sizes="(max-width: 640px) 100vw, 640px" / loading=lazy> <div class="rating"><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy> <span>5,00 / 2</span></div> <a class="title" href="/asus/osobennosti-organizacii-avtomatizirovannyh-informacionnyh-sistem-v-kaznacheistve-s-informacionnoi-si/">С информационной системой казначейство – клиент Федеральная информационная система федерального казначейства</a> </div> <div class="article-block"> <img width="640" height="480" src="/uploads/b575c7853bfef3c4005111c5e4e08f20.jpg" class="attachment-image145x100 size-image145x100 wp-post-image" alt="Функция очистки барабана в стиральной машине фирмы LG" sizes="(max-width: 640px) 100vw, 640px" / loading=lazy> <div class="rating"><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy><img src="https://exactlycase.ru/wp-content/plugins/wp-postratings/images/stars_kraska/rating_on.gif" alt="2 оценки, среднее: 5,00 из 5" title="2 оценки, среднее: 5,00 из 5" class="post-ratings-image" / loading=lazy> <span>5,00 / 2</span></div> <a class="title" href="/asus/samoochistka-stiralnoi-mashiny-lg-funkciya-ochistki-barabana-v/">Функция очистки барабана в стиральной машине фирмы LG</a> </div> </div> <div id="float-block"> <script id="custom-block-15153835" type="text/javascript">ads_block(33, 15153835, 7513);</script></div> </aside> </div> </div> <div class="container colorline"> <span class="orange"></span> <span class="green"></span> <span class="blue"></span> <span class="red"></span> <span class="orange-2"></span> </div> <footer class="footer"> <div class="small-logo"> <span><img src="/img/logo.png" alt="Роутер. Настройка. Антивирусы. Программы. Хаки. Windows" itemprop="url " loading=lazy> <br></span> <div class="counter"> </div> <br> <p class="copy">© 2024. Все права защищены</p> </div> <ul> <li><a href="" >О проекте</a></li> <li><a href="/feedback/" >Контакты</a></li> <li><a href="" >Рекламодателям</a></li> <li><a href="/sitemap.xml">Карта сайта</a></li> </ul> <div class="info"> </div> <div class="clearfix"></div> </footer> <div id="BlockPeek" style="display: block;text-align: center;position: relative;width: auto;height:0;overflow: hidden"> <div id="yandex_rtb_R-A-175272-8"></div> </div> <script src='//exactlycase.ru/assets/1512461662index1.js' type="text/javascript"></script> <script type='text/javascript'> /* <![CDATA[ */ var rlArgs = { "script":"fancybox","selector":"lightbox","customEvents":"","activeGalleries":"1","modal":"0","showOverlay":"1","showCloseButton":"1","enableEscapeButton":"1","hideOnOverlayClick":"1","hideOnContentClick":"0","cyclic":"0","showNavArrows":"1","autoScale":"1","scrolling":"yes","centerOnScroll":"1","opacity":"1","overlayOpacity":"70","overlayColor":"#666","titleShow":"1","titlePosition":"outside","transitions":"fade","easings":"swing","speeds":"300","changeSpeed":"300","changeFade":"100","padding":"5","margin":"5","videoWidth":"1080","videoHeight":"720","woocommerce_gallery":"0"} ; /* ]]> */ </script> <script src='//exactlycase.ru/assets/1512461662index1.js' type="text/javascript"></script> <script src='//exactlycase.ru/assets/1512461662index1.js' type="text/javascript"></script> <script src="https://yastatic.net/share2/share.js" async="async"></script> </body> </html>