Ваш браузер не поддерживает плавающие фреймы. Плавающие фреймы. Пример: Управление границей фреймов

Для каких целей нужны программы?

Перед тем, как использовать программы для верстки сайтов, нужно разделить их на несколько категорий.

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

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

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

Для работы с макетом

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

Нужно понимать, что макет может содержать сотни слоев. Чтобы работать с ним без тормозов, нужно работать на более менее мощном железе. Многое зависит от самого макета. Чем меньше слоев и элементов, чем меньше размер файла, тем быстрее он будет обрабатываться.

Собственно верстка

С макетом все предельно понятно, а какой софт может пригодиться для верстки? Может быть, вам нужна программа для верстки сайта только на html и css. В таком случае можно выбрать что-то попроще. Чей сложнее работа, тем более функциональное решение стоит использовать.

Блокнот. Самое простое, что вы можете иметь для редактирования кода. Никакого функционала. В каких случаях вам придется им пользоваться? Допустим, нужно будет показать другу какой-то фрагмент кода, а на его компьютере не окажется подходящей программы. Блокнот не годится для редактирования и уж тем более написания кода.

Рис. 1. В блокноте нет подсветки синтаксиса, поэтому он не годится для работы с кодом.

Notepad++. А вот это уже гораздо более продвинутый инструмент. Ее часто называют блокнотом программиста. Он поддерживает подсветку синтаксиса, множество языков и кодировок. Писать код легко, удобно, есть возможность подключать плагины и работать с большим количеством файлов одновременно. В зависимости от вашего знания языков, вы можете включать или отключать подсказки. Опытные верстальщики обычно отключают их, потому что они только мешают писать код.

Рис. 2. В Notepad++ отличная подсветка синтаксиса. Теги, атрибуты, значения атрибутов и простой текст выделены по-разному.

Adobe DreamViewer. Более мощная программа, которая включает в себя не только редактор, но и инструменты для полностью визуального создания страниц и элементов. Работу с ней придется изучать, поскольку она достаточно сложна. Нужно сказать, что любой визуальный редактор вставляет много лишнего кода.

Это справедливо и в случае с Dreamviewer, но тут уж приходится платить за скорость. Программа подойдет профессионалам, когда нужно очень быстро получить код-странички, чтобы показать ее заказчику.

SublimeText. Очень похож на Notepad++. Отличается в основном только интерфейсом и различными плагинами, которые можно подключить.

Front Page. Еще одна программа от Microsoft. Тоже позволяет работать с изображениями, видеороликами и JavaScript.

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

Статистика показывает, что большинство разработчиков использует Sublime и Notepad++. Это лучшие программы для верстки сайтов. Но они подойдут вам, если вы уже знаете код и особо не нуждаетесь в помощи. Тогда эти редакторы дадут вам больше свободы.

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

Также многие хвалят NetBeans. Эта среда разработки хорошо подходит для написания веб-сценариев и скриптов. Рекомендуется начинающим программистам.

Из более современного ПО можно отметить текстовый редактор Vim. По функциональности он считается одним из самых мощных. Например, можно работать с множеством файлов в одном окне, проводить сравнение двух файлов, после чего быстро вносить правки. Еще одна особенность – неограниченная возможность отменять и возвращать какие-то свои действия.

Проверка верстки

Как правило, нормальные редакторы кода уже содержат в себе инструменты для проверки написанного. Например, подсветка кода позволяет легко выявить случайные опечатки и мелкие ошибки (незакрытый тег, лишняя точка с запятой и т.д.)

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

Этого тоже может быть недостаточно. Если шаблон должен одинаково выглядеть в большинстве популярных браузеров, нужно проверить верстку на кроссбраузерность. Для этого существует несколько онлайн-сервисов. Одним из самых популярных является crossbrowsertesting.com/. Определенные функции на сайте доступны только за деньги. Сервис обрел популярность из-за возможности проверить сайт в более чем ста версиях различных браузеров.

Рис. 3. Crossbrowsertesting – один из ресурсов, который предлагает проверку на кроссбраузерность в сотнях версий браузеров.

Все еще может быть необходима адаптация верстки под старые версии браузеров. Как известно, больше всего проблем всегда возникало с Internet Explorer. Ранее я уже писал об IE Tester – программе, где можно бесплатно проверить, как сайт будет выглядеть в старых версиях этого браузера. Для этого также подходит программа NetRederender. Она позволяет посмотреть внешний вид сайта в IE-версиях от 5.5 до 9.

Вывод

Для верстки сайта может потребоваться достаточно много сервисов и программ. В минимальной комплектации это программа для работы с графикой, 1 редактор кода и 2-3 сервиса для проверки верстки. Я видел людей, у которых набор инструментов намного больше. Здесь все зависит от сложности вашей деятельности как веб-разработчика. На сегодня все. Подписывайтесь на наш блог, если хотите знать все о сайтостроении.

Здравствуйте. Сегодня я хотел бы поделится с вами инструментами, которые помогают мне работать более продуктивно, как верстальщику и фрилансеру. Без лишних вступлений перейду сразу к делу.

Это плагин для браузера, который производит обновление текущей веб-страницы после изменения файлов в отдельных папках. Это значительно упрощает процесс верстки страниц. Теперь больше не нужно постоянно наживать F5!!!

Плагин состоит из двух небольших приложений. Первое - инсталлируется на компьютере и является по сути монитором событий, который «висит» в трее системы. Вторая часть - это либо интегрируемый в FireBug плагин (если вы работаете с Firefox), либо тулбар для Internet Explorer.

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

Zen Coding

Zen Coding - ахренительная вещь! Это мега штука которая позволяет значительно уменьшить время, которое мы затрачиваем на написание кода.

Если соединить специфику CSS селекторов с HTML разметкой, то получится Zen Coding. Конечно, я был не единственным, чья челюсть отвисла когда он впервые увидел эту штуку.

Смотрите сами:

div#container>div#contents>ul#nav>li*4

Получаем:

И это только цветочки. Установите плагин к своему редактору и вы будете приятно удивлены. Кстати, на сегодня эту мега-штуку можно использовать во многих редакторах.

Официально поддерживаемые редакторы:

1. Aptana/Eclipse (crossplatform)
2. TextMate (Mac)
3. Coda (Mac)
4. Espresso (Mac)
5. Komodo Edit/IDE (crossplatform)
6. Notepad++ (Windows)
7. PSPad (Windows)
8. (browser-based)</li> <li>editArea (browser-based)</li> </ol><p><b>Неофициальная поддержка редакторов: </b></p> <ol><li>Dreamweaver (Windows, Mac)</li> <li>Sublime Text (Windows)</li> <li>UltraEdit (Windows)</li> <li>TopStyle (Windows)</li> <li>GEdit (crossplatform)</li> <li>BBEdit/TextWrangler (Mac)</li> <li>Visual Studio (Windows)</li> <li>EmEditor (Windows)</li> <li>Sakura Editor (Windows)</li> <li>NetBeans (crossplatform)</li> <li>IntelliJ IDEA/WebStorm/PHPStorm (crossplatform)</li> <li>Emacs (crossplatform)</li> <li>Vim (crossplatform)</li> <li>ReSharper plugin <a href="/rates/vba-excel-primer-vseh-makrosov-primery-zadach-visual-basic-for-applicationvba.html">for Visual</a> Studio</li> </ol><p>В общем, пробуйте и не пожалеете.</p> <p>Большинство документов HTML не помещается на одной странице, поэтому для их просмотра пользователю приходится сдвигать документ в окне навигатора. Кроме того, для навигации необходимо искать ссылки на другие документы, которые могут быть расположены в любом, самом неожиданном месте страницы.</p> <p>Вы сможете сделать свой сервер намного удобнее для просмотра, если предоставите пользователю многооконный интерфейс, реализованный при помощи фреймов. В этом случае окно навигатора разделяется на несколько окон (фреймов), в каждом из которых отображается содержимое различных документов HTML (рис. 6.1). Таким образом, можно работать одновременно с несколькими документами.</p> <p>Рис. 6.1. Страница нашего сервера WWW, реализованная с использованием фреймов</p> <p>Наша страница состоит из трех фреймов. Первый фрейм расположен в верхней части окна и служит для отображение логотипа. Второй фрейм предназначен для отображения ссылок на различные разделы сервера, представляющие собой ни что иное, как <a href="/phone/chem-otlichayutsya-gipertekstovye-dokumenty-ot-obychnyh-gipertekstovyi-dokument.html">обычные документы</a> HTML. И, наконец, третий фрейм имеет самые <a href="/services/primery-populyarnyh-napravlenii-veb-dizaina-bolshie-razmery-bukv-v-tekstah.html">большие размеры</a> и предназначен для просмотра документов.</p> <p>Мы настроили параметры фрейма оглавления и фрейма просмотра таким образом, что пользователь может менять их <a href="/services/gorizontalnaya-avatarka-v-kontakte-novyi-dizain-vkontakte.html">горизонтальный размер</a>, передвигая мышью вертикальную <a href="/rates/kak-vstavit-razdelitelnuyu-liniyu-v-vorde-raznye-varianty.html">разделительную линию</a>, расположенную между фреймами. Если содержимое документа не помещается внутри фрейма, в правой части соответствующего окна появляется полоса просмотра.</p> <p>Пользуясь ссылками в окне фрейма оглавления, вы можете загружать в фрейм просмотра <a href="/internet/soft-dlya-sozdaniya-vyvesok-skachat-torrent-scribus-sozdanie.html">различные документы</a>, которые, в свою очередь, также могут иметь ссылки. Разумеется, мы не претендуем на то, что расположение и назначение фреймов выбраны на нашем сервере оптимальным образом, однако вы можете создать для своего сервера любое количество фреймов и расположить их как угодно.</p> <p>Заметим, что далеко не все навигаторы способны работать с фреймами. Поэтому несмотря на то что фреймы придают страницам сервера более привлекательный вид и облегчают работу пользователя, их можно встретить далеко не на всех серверах WWW. В качестве альтернативы фреймам обычно применяют таблицы.</p> <h2><span>Структура документа с фреймами </span></h2> <p>Прежде всего необходимо подготовить <a href="/internet/chto-takoe-html-struktura-dokumenta-html.html">документ HTML</a>, в котором содержится описание размеров, расположения и других параметров фреймов. Этот документ должен иметь <a href="/settings/18-dlya-chego-ispolzuyutsya-sleduyushchie-vidy-skanerov-osnovnye.html">следующий вид</a>:</p> <span> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Заголовок документа</TITLE> </HEAD> <!-- Определение фреймов --> <FRAMESET ROWS="90,*" FRAMEBORDER=1 BORDER=1> <FRAME SRC="frame1.htm"> <FRAME SRC="frame2.htm"> <!-- Вариант для навигатора, не способного работать с фреймами --> <NOFRAME> <BODY BGCOLOR="#FFFFFF"> . . . </BODY> </NOFRAME> </FRAMESET> </HTML> </span> <p>В начале документа HTML, который предназначен для описания фреймов, нет привычного оператора <BODY>. Вместо этого там расположен оператор определения набора фреймов <FRAMESET>, который используется в паре с оператором </FRAMESET>. Параметры оператора <FRAMESET> описывают набор фреймов в целом, задавая размеры, внешний вид рамки и так далее.</p> <p>Между операторами <FRAMESET> и </FRAMESET> находятся операторы <FRAME>, которые определяют параметры отдельных фреймов. В частности, операторы <FRAME> задают адреса URL документов HTML, которые загружаются в фреймы сразу после их создания.</p> <p>Помимо операторов <FRAME>, внутри пары операторов <FRAMESET> и </FRAMESET> необходимо разместить операторы <NOFRAME> и </NOFRAME>. Между этими операторами вы должны расположить документ HTML, который будет отображаться навигаторами, не способными работать с фреймами. К числу таких относятся, например, навигаторы NSCA Mosaic и <a href="/internet/php-zapretit-keshirovanie-zapret-keshirovaniya-posredstvom-php-problema-s.html">Microsoft Internet</a> <a href="/phone/system-explorer-skachat-russkaya-versiya-system-explorer-skachat-besplatno.html">Explorer версии</a> 2.0, а также Netscape Navigator версий, более ранних чем 2.0.</p> <p>В простейшем случае этот документ должен содержать сообщение о том, что <a href="/phone/kak-raskrutit-gruppu-v-kontakte-samostoyatelno-kak-raskrutit-gruppu.html">данную страницу</a> лучше всего просматривать более <a href="/rates/gps-koordinaty-na-karte-yandex-kak-vvodit-koordinaty-v-yandeks-navigator.html">современными навигаторами</a>. Однако лучше всего если вы подготовите второй вариант страницы, специально предназначенный для просмотра старыми навигаторами - кто может заранее предугадать, с какими навигаторами работает пользователь?</p> <p>Заметим, что можно создавать вложенные фреймы, определяя наборы фреймов внутри пары операторов <FRAMESET> и </FRAMESET>:</p> <span> <FRAMESET ROWS="90,*" FRAMEBORDER=0 BORDER=1> <FRAME SCROLLING="no" NAME="title" NORESIZE SRC="title.htm"> <FRAMESET COLS="25%,75%" FRAMEBORDER=0 BORDER=1> <FRAME SCROLLING="auto" NAME="toc" SRC="toc.htm"> <FRAME SCROLLING="auto" NAME="main page" SRC="main.htm"> </FRAMESET> <NOFRAME> <BODY BGCOLOR="#FFFFFF"> . . . </BODY> </NOFRAME> </FRAMESET> </span> <p>Именно таким образом созданы фреймы на нашем сервере.</p> <p>Вы можете заменить фрейм на набор фреймов, заменив соответствующий оператор <FRAME> на определение набора, сделанное оператором <FRAMESET>.</p> <h2><span>Определение параметров фреймов </span></h2> <p>Прежде всего рассмотрим параметры оператора <FRAMESET>, предназначенного для определения набора фреймов.</p> <table border="1" cellspacing="0" cellpadding="3"><tr><td width="130" valign="top"><p>Параметр</p> </td> <td width="327" valign="top"><p>Описание</p> </td> </tr><tr><td width="130" valign="top"> </td> <td width="327" valign="top"><p>Ширина колонки в процентах, пикселах или <a href="/settings/masshtabirovanie-neskolkih-fonov-otnositelnoe-izmenenie-razmera.html">относительный размер</a></p> </td> </tr><tr><td width="130" valign="top"> </td> <td width="327" valign="top"><p>Высота строки в процентах, пикселах или относительный размер</p> </td> </tr><tr><td width="130" valign="top"> </td> <td width="327" valign="top"> </td> </tr><tr><td width="130" valign="top"> </td> <td width="327" valign="top"><p>Используется только навигатором Netscape Navigator. Задает толщину рамки фрейма в пикселах</p> </td> </tr><tr><td width="130" valign="top"> </td> <td width="327" valign="top"><p>С помощью этого параметра можно задать дополнительное расстояние между фреймами в пикселах</p> </td> </tr></table><p>Параметры COLS и ROWS нужны в том случае, когда фреймы, определенные в наборе, располагаются в виде таблицы. Первый из этих параметров указывает ширину колонки, а второй - высоту строки. Если фреймы располагаются в одном столбце, параметр COLS указывать не надо. Аналогично, если фреймы занимают только одну строку, не нужно указывать параметр ROWS.</p> <p>Вы можете задать значения для параметров COLS и ROWS либо в процентном отношении, соответственно, к ширине и высоте окна навигатора, либо в пикселах. Если вместо значения указан символ *, колонка или строка занимают всю оставшуюся часть окна.</p> <p>Например, ниже указано, что высота первого фрейма равна 90 пикселам, а второй фрейм занимает всю нижнюю часть окна навигатора:</p> <FRAMESET ROWS="90,*"> <p>В следующем примере два фрейма, расположенные рядом, занимают, соответственно, 20% и 80% ширины окна навигатора.</p> <FRAMESET COLS="20%,80%"> <p>Другой оператор, который используется для определения параметров фреймов - это оператор <FRAME>. Он имеет следующие параметры:</p> <table border="1" cellspacing="0" cellpadding="3"><tr><td width="130" valign="top"><p>Параметр</p> </td> <td width="327" valign="top"><p>Описание</p> </td> </tr><tr><td width="130" valign="top"> </td> <td width="327" valign="top"><p>Используется только для “плавающих фреймов” в навигаторе Microsoft Internet Explorer. Задает выравнивание фрейма или текста, расположенного рядом с фреймом. Этот параметр может принимать следующие значения: LEFT, CENTER, RIGHT,TOP, BOTTOM</p> </td> </tr><tr><td width="130" valign="top"> </td> <td width="327" valign="top"><p>Размер отступа по вертикали от границ фрейма в пикселах</p> </td> </tr><tr><td width="130" valign="top"> </td> <td width="327" valign="top"><p>Размер отступа по горизонтали от границ фрейма в пикселах</p> </td> </tr><tr><td width="130" valign="top"> </td> <td width="327" valign="top"><p>Если значение этого параметра равно 1, фреймы будут иметь трехмерную рамку, ширина которой задается в пикселах. В том случае, когда указано значение 0, рамка не создается</p> </td> </tr><tr><td width="130" valign="top"> </td> <td width="327" valign="top"><p>Этот параметр задает имя фрейма, которое используется в операторе ссылки <A> для указания, в какой фрейм нужно загрузить новый документ</p> </td> </tr><tr><td width="130" valign="top"> </td> <td width="327" valign="top"><p>Если указан этот параметр, пользователь не сможет изменять размеры фрейма, передвигая его границы мышью</p> </td> </tr><tr><td width="130" valign="top"> </td> <td width="327" valign="top"><p>Параметр SCROLLING определяет, нужно ли создавать полосы просмотра для свертки содержимого фрейма. Для этого параметра можно указывать следующие значения:</p><p>YES полосы просмотра создаются всегда;</p><p>NO полосы просмотра не создаются;</p><p>AUTO полосы просмотра создаются только при необходимости, когда документ HTML не помещается полностью в окне фрейма</p> </td> </tr><tr><td width="130" valign="top"> </td> <td width="327" valign="top"><p>Адрес URL файла с документом HTML, который загружается в окно фрейма</p> </td> </tr></table><h2><span>Пример документа HTML с фреймами </span></h2> <p>В качестве примера приведем в сокращенном виде исходный текст документа, определяющего фреймы, показанные на рис. 6.1.</p> <span> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Alexandr Frolov & Grigory Frolov</TITLE> </HEAD> <FRAMESET ROWS="90,*" FRAMEBORDER=0 BORDER=1> <FRAME SCROLLING="no" NAME="title" NORESIZE SRC="title.htm" MARGINHEIGHT=1> <FRAMESET COLS="25%,75%" FRAMEBORDER=0 BORDER=1> <FRAME SCROLLING="auto" NAME="toc" SRC="toc.htm"> <FRAME SCROLLING="auto" NAME="main page" SRC="main.htm"> </FRAMESET> <NOFRAME> <BODY BGCOLOR="#FFFFFF"> <TABLE><TR><TD VALIGN=TOP><img src='/rates/vash-brauzer-ne-podderzhivaet-plavayushchie-freimy-plavayushchie-freimy-primer.html' loading=lazy></TD><TD VALIGN=TOP><img src='/rates/vash-brauzer-ne-podderzhivaet-plavayushchie-freimy-plavayushchie-freimy-primer.html' loading=lazy></TD></TR></TABLE> <H2></H2> <P>На этом сервере вы можете найти подробную информацию о наших книгах из серий "Персональный компьютер. Шаг за шагом" и "Библиотека системного программиста": . . . Домашняя страница<BR> Новости<BR> Книги<BR> Компьютерра<BR> Партнеры и друзья<BR> Поиск вирусов<BR> Set English Language<BR> <CENTER><HR> Эту страницу лучше всего просматривать навигаторами MS Internet Explorer v3.0 или Netscape Navigator <TABLE><TR><TD> <img src='/rates/vash-brauzer-ne-podderzhivaet-plavayushchie-freimy-plavayushchie-freimy-primer.html' loading=lazy> </TD><TD> <img src='/rates/vash-brauzer-ne-podderzhivaet-plavayushchie-freimy-plavayushchie-freimy-primer.html' loading=lazy> </TD></TR></TABLE> <img src='/rates/vash-brauzer-ne-podderzhivaet-plavayushchie-freimy-plavayushchie-freimy-primer.html' loading=lazy><BR> <FONT SIZE=2> frolov@glas.apc.org</FONT> <BR><FONT SIZE=1> </FONT> </CENTER> </BODY> </NOFRAME> </FRAMESET> </HTML> </span> <p>Здесь мы определили два набора фреймов, причем второй набор вложен в первый.</p> <p>Для первого набора мы определили один фрейм, расположенный горизонтально. Первый из них имеет высоту 90 пикселов и используется для размещения нашего логотипа, второй занимает все оставшееся пространство:</p> <span> <FRAMESET ROWS="90,*" FRAMEBORDER=0 BORDER=1> </span> <p>Как видно из этой строки, фреймы не имеют рамки (значение параметра FRAMEBORDER равно 0). Мы убрали рамку, потому что она выглядит слишком тяжеловесно. Дополнительно мы указали, что при просмотре в навигаторе Netscape Navigator фреймы должны иметь рамку толщиной 1 пиксел.</p> <p>Зачем мы эти сделали?</p> <p>Нам хотелось, чтобы сервер выглядел по возможности одинаково в окнах навигаторов Microsoft Internet Explorer и Netscape Navigator. Однако эти навигаторы работают по-разному с рамками фреймов.</p> <p>Если в операторе <FRAMESET> указать, что фреймы не должны иметь рамки, то Microsoft Internet Explorer не рисует трехмерную рамку. Однако между фреймами остается маленький зазор <a href="/services/t-mno-seryi-cvet-html-cvet-v-stilyah-mozhno-zadavat-raznymi-sposobami-po.html">серого цвета</a>, который выглядит как рамка. Эту рамку можно использовать, например, для изменения размера фрейма (если при определении фрейма для него не указан параметр NORESIZE, запрещающий изменение размера).</p> <p>Навигатор Netscape Navigator в указанной выше ситуации (когда значение параметра FRAMEBORDER равно нулю) не оставляет никакого зазора между фреймами. В этом и выражается отличие. Для того чтобы сделать зазор размером в один пиксел, мы указали <a href="/settings/vneshnyaya-ramka-css-otstupy-i-ramki-v-css-s-pomoshchyu-parametrov-margin-padding-i-border.html">параметр BORDER</a>, который распознается только навигатором Netscape Navigator.</p> <p>В <a href="/rates/kak-rasshirit-ob-m-mesta-v-razdele-zhestkogo-diska-c-ili-d-ne-teryaya-dannyh.html">свободном пространстве</a> ниже фрейма первого набора мы расположили еще один набор фреймов. Второй набор фреймов состоит из двух фреймов, расположенных вертикально. Эти фреймы занимают, соответственно, 25% и 75% ширины родительского фрейма:</p> <span> <FRAMESET COLS="25%,75%" FRAMEBORDER=0 BORDER=1> </span> <p>Вернемся опять к первому набору фреймов.</p> <p>В этом наборе определен только один фрейм:</p> <span> <FRAME SCROLLING="no" NAME="title" NORESIZE SRC="title.htm" MARGINHEIGHT=1> </span> <p>Так как этот фрейм предназначен для отображения логотипа, для него не используется свертка. Поэтому значение параметра SCROLLING равно “no”.</p> <p>Имя фрейма указано в параметре NAME как “title”. Дополнительно мы указали параметр NORESIZE, запретив изменение размера фрейма мышью.</p> <p>Параметр SRC указан как “title.htm”. Из файла с этим именем загружается документ HTML при отображении фрейма. Заметим, что файл title.htm расположен в том же каталоге, что и файл, определяющий фреймы.</p> <p>Параметр MARGINHEIGHT задает отступ по высоте, равный 1 пикселу. Мы указали этот параметр для уменьшения зазора между верхней границей фрейма и графическими изображениями логотипа.</p> <p>Файл title.htm содержит таблицу с двумя графическими изображениями и не имеет никаких особенностей:</p> <span> <HTML> <BODY BGCOLOR="#FFFFFF"> <TABLE> <TR><TD VALIGN=TOP><img src='/rates/vash-brauzer-ne-podderzhivaet-plavayushchie-freimy-plavayushchie-freimy-primer.html' loading=lazy></TD> <TD VALIGN=TOP><img src='/rates/vash-brauzer-ne-podderzhivaet-plavayushchie-freimy-plavayushchie-freimy-primer.html' loading=lazy></TD></TR> </TABLE> </BODY> </HTML> </span> <p>Теперь перейдем к второму набору фреймов, разделяющих по вертикали нижнюю часть окна навигатора на две половины. Два фрейма из этого набора определены следующим образом:</p> <span> <FRAME SCROLLING="auto" NAME="toc" SRC="toc.htm"> <FRAME SCROLLING="auto" NAME="main page" SRC="main.htm"> </span> <p>Так как для параметра SCROLLING указано значение "auto", то если содержимое не помещается в окне фрейма, около фрейма появляются полосы просмотра.</p> <p>Окно левого фрейма называется “toc”. Оно загружается из файла с именем toc.htm, который состоит из ссылок на разделы сервера:</p> <span> <HTML> <BODY BGCOLOR="#B0FFD8"> <BASEFONT SIZE=2> <LEFT> Домашняя страница<BR> Добро пожаловать<BR> Новости<BR> <P>Книги<BR> <P>КАПИТАЛ<BR> КОМПЬЮТЕРРА<BR> Вопросы и ответы<BR> Ресурсы Internet<BR> <P>Вирусы<BR> <P>Партнеры и друзья<BR> Книга гостей<BR> <P>Set English Language<BR> </LEFT> </BODY> </HTML> </span> <p>Обратите внимание, что в операторах <A> параметр TARGET, задающей имя окна для загрузки документа, имеет различные значения. В параметре TARGET вы должны указать имя окна, в которое будет выполняться загрузка документа.</p> <p>Для параметра TARGET можно указывать одно из нескольких предопределенных имен:</p> <p>Когда пользователь выбирает строку “Домашняя страница”, документ HTML с адресом http://www.glasnet.ru/~frolov/index.html загружается в окно, которое называется _top. В результате указанный документ займет все внутреннее пространство окна навигатора.</p> <p>При необходимости вы можете загружать документы и в окно левого фрейма, указав в параметре TARGET значение toc. При этом можно сделать так, что при выборе в левом фрейме какого-либо раздела содержимое этого фрейма полностью изменяется, отображая, например, названия подразделов нового раздела.</p> <p>Документ main.htm, который первоначально загружается в окно фрейма main page, представлен ниже:</p> <span> <HTML> <BODY BGCOLOR="#FFFFFF"> <BGSOUND SRC="../midi/bach.mid"></BGSOUND> <embed src="../midi/bach.mid" hidden="yes"> <H2>Добро пожаловать на наш сервер WEB!</H2> <P>На этом сервере вы можете найти подробную информацию о наших книгах из серий "Персональный компьютер. Шаг за шагом" и "Библиотека системного программиста": <UL> <LI>аннотации и оглавления; <LI>исходные тексты программ, опубликованных в книгах; <LI>наши планы на будущее; <LI>список ошибок, замеченных в наших книгах; <LI>информацию о наших друзьях; <LI>бесплатные книги, доступные в режиме online </UL> Эти серии книг предназначены для самого широкого круга людей, чья работа связана с компьютерами. <P>Мы подготовили для вас и кое-что еще! <CENTER><HR><TABLE><TR><TD> <img src='/rates/vash-brauzer-ne-podderzhivaet-plavayushchie-freimy-plavayushchie-freimy-primer.html' loading=lazy> </TD><TD> <img src='/rates/vash-brauzer-ne-podderzhivaet-plavayushchie-freimy-plavayushchie-freimy-primer.html' loading=lazy> </TD></TR></TABLE> <P><img src='/rates/vash-brauzer-ne-podderzhivaet-plavayushchie-freimy-plavayushchie-freimy-primer.html' loading=lazy><BR> <FONT SIZE=2>Посылайте ваши комментарии по адресу frolov@glas.apc.org</FONT> <BR><FONT SIZE=1> Александр Фролов, Григорий Фролов, 1997</FONT> </CENTER> </BODY> </HTML> </span> <p>Рассмотрим этот документ.</p> <p>В самом начале документа находятся два оператора, предназначенные для вставки <a href="/phone/programma-dlya-obrabotki-zvukovyh-failov-audioredaktory-zvukovye-redaktory.html">звукового файла</a>. В <a href="/internet/kak-vosstanovitsya-v-odnoklassnikah-zabyl-parol-vosstanovlenie.html">данном случае</a> мы вставили <a href="/settings/kak-zakachat-muzyku-na-ipod-raznymi-sposobami-videourok-kak-zakachat.html">музыкальный файл</a> MIDI:</p> <span> <BGSOUND SRC="../midi/bach.mid"></BGSOUND> <embed src="../midi/bach.mid" hidden="yes"> </span> <p>Первый из этих операторов работает только в навигаторе Microsoft Internet Explorer, второй - еще и в навигаторе Netscape Navigator.</p> <p>Ваш сервер доступен всей <a href="/settings/novyi-podhod-k-zashchite-informacii-sistemy-obnaruzheniya-kompyuternyh-ugroz-programmno-apparatnye-met.html">сети Internet</a>, а к этой сети подключены самые <a href="/services/sinhronizaciya-papok-i-failov-po-lokalnoi-seti-sftp-v-oblako-kak.html">разные компьютеры</a> с различными <a href="/internet/samaya-chasto-ispolzuemaya-operacionnoi-sistemoi-dlya-smartfonov.html">операционными системами</a> и навигаторами. Разумеется, вы едва ли сможете обеспечить одинаковый внешний вид страниц сервера для всех этих систем, однако стоит обязательно побеспокоиться о наиболее распространенных навигаторах. Таковыми на момент написания этой книги являются Netscape Navigator и Microsoft Internet Explorer. Как правило, большинство серверов WWW оптимизируются именно для работы с этими навигаторами.</p> <p>Если вы поступаете также, где-нибудь на видном месте неплохо было бы сообщить, какими навигаторами лучше всего просматривать страницы вашего сервера. Мы это сделали следующим образом, разместив пиктограммы навигаторов и ссылки на серверы, откуда их можно получить, в таблице:</p> <span> <CENTER><HR> Эту страницу лучше всего просматривать навигаторами MS Internet Explorer v3.0 или Netscape Navigator <TABLE><TR><TD> <img src='/rates/vash-brauzer-ne-podderzhivaet-plavayushchie-freimy-plavayushchie-freimy-primer.html' loading=lazy> </TD><TD> <img src='/rates/vash-brauzer-ne-podderzhivaet-plavayushchie-freimy-plavayushchie-freimy-primer.html' loading=lazy> </TD></TR></TABLE> </span> <p>Строка, показанная ниже, вставляет в документ HTML так называемый счетчик посещений:</p> <span> <P><img src='/rates/vash-brauzer-ne-podderzhivaet-plavayushchie-freimy-plavayushchie-freimy-primer.html' loading=lazy><BR> </span> <p>В документе этот счетчик может выглядеть по-разному, в зависимости от способа реализации. В нашем случае счетчик формируется программой CGI с именем w3count.exe, которой в качестве параметра передается имя файла frolov1. Этот файл хранит значение счетчика.</p> <p>Заметим, что программы CGI вам скорее всего придется составлять самим, хотя многие поставщики услуг Internet обычно предоставляют некоторые программы CGI для тех, кто создает на сервере поставщиков свои <a href="/rates/virtualnyi-media-server-kak-nastroit-dlna-server.html">виртуальные серверы</a> WWW. В отдельной главе нашей книги мы расскажем вам о том, как составлять такие программы.</p> <p>В конце файла main.htm мы разместили наш <a href="/internet/kak-zaregistrirovat-pochtovyi-adres-kak-voiti-v-elektronnuyu-pochtu-ot-google-kak-uprostit-rabotu-s.html">почтовый адрес</a> и сведения об авторских правах на информацию, расположенную на сервере:</p> <span> <FONT SIZE=2>Посылайте ваши комментарии по адресу frolov@glas.apc.org</FONT> <BR><FONT SIZE=1> Александр Фролов, Григорий Фролов, 1997</FONT> </span> <p>Это является общепринятой практикой и при создании своего сервера вам следует поступить аналогичным образом.</p> <p>Приведенные в этом разделе исходные тексты документов HTML с фреймами вы сможете найти на дискете, которая продается вместе с книгой, в каталоге Chap6/Frames.</p> <h2><span>Плавающие фреймы </span></h2> <p>Навигатор Microsoft Internet Explorer позволяет создавать еще одну разновидность фреймов - так называемые плавающие фреймы.</p> <p>Плавающий фрейм вставляется в документ HTML аналогично графическому изображению (рис. 6.2).</p> <p>Рис. 6.2. Образец документа HTML с плавающим фреймом</p> <p>Вы можете использовать плавающий фрейм не только для размещения текста в тексте, но и для организации ссылок на другие документы.</p> <p>Вокруг плавающего фрейма может располагаться текст или другие графические изображения. Вы можете указывать для фрейма такие же атрибуты выравнивания, как и для <a href="/internet/filtraciya-cvetnogo-izobrazheniya-graficheskie-filtry-na.html">графических изображений</a>. К сожалению, навигатор Netscape Navigator и NSCA Mosaic игнорируют плавающие фреймы, что ограничивает область применения последних.</p> <p>Плавающий фрейм вставляется в документ HTML при помощи оператора <IFRAME>, который всегда используется в паре с оператором </IFRAME>. Для этого оператора можно задавать параметр ALIGN, который задает выравнивание текста, расположенного около плавающего фрейма, <a href="/phone/izmenit-shirinu-stranicy-html-parametry-css-width-i-height-dlya-zadaniya-razmerov.html">параметры WIDTH</a> и HEIGHT, задающие размеры фрейма, а также параметры HSPACE и VSPACE, которые применяются в операторе <IMG>.</p> <p>Еще один параметр, который допустим при описании плавающего фрейма - FRAMEBORDER. Он может принимать значения 1 или 0. Если значение этого параметра равно 1, плавающий фрейм заключается в трехмерную рамку (используется по умолчанию), а если 0 - рамка не отображается.</p> <p>Параметр SCROLLING может принимать значения “yes”, “no” или “auto”. Если указано значение “yes”, окно плавающего фрейма будет иметь полосы просмотра. Если “no” - полос просмотра не будет. В том случае, когда для параметра SCROLLING указано значение “auto”, полосы просмотра будут создаваться только при необходимости, когда содержимое документа не помещается в окне фрейма.</p> <p>Приведем <a href="/settings/ustanovka-rpm-paketov-v-linux-tradicionnyi-sposob-ustanovki---ustanovka-iz.html">исходный текст</a> документа HTML, в который вставлен плавающий фрейм (листинг 6.1).</p> <p>Листинг 6.1. Файл chap6\IFrames\home.htm</p> <span> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Плавающие фреймы в документах HTML</TITLE> </HEAD> <BODY BGCOLOR=#FFFFFF> <H2>Размещение плавающих фреймов в документах HTML</H2> Вы можете включить внутрь документа HTML плавающий фрейм: <P><IFRAME SRC="include.htm" ALIGN=LEFT> </IFRAME>Если указано выравнивание по левой границе, текст, расположенный рядом с плавающим фреймом, будет расположен справа от фрейма <BR CLEAR=LEFT>А этот текст располагается ниже фрейма. </BODY> </HTML> </span> <p>В этом документе определен плавающий фрейм, в который загружается документ HTML, расположенный в файле include.htm (листинг 6.2).</p> <p>Обратите внимание, что для выполнения принудительного перехода к <a href="/rates/komandnaya-stroka-v-vindovs-10-novyi-i-samyi-udobnyi-sposob-otkryt.html">новой строке</a> после фрейма мы использовали оператор <BR> с параметром CLEAR=LEFT.</p> <p>Листинг 6.2. Файл chap6\IFrames\include.htm</p> <span> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE>Документ для плавающего фрейма</TITLE> </HEAD> <BODY BGCOLOR=#FFFFFF> <P>Содержимое этого документа отображается внутри плавающего фрейма. <P>Оно отображается в окне, которое имеет вертикальную полосу просмотра. <P>Если содержимое документа, загруженного в плавающий фрейм, не помещается в окне фрейма, пользователь может пролистать его при помощи этой полосы просмотра. </BODY> </HTML> </span> <p>Браузер Microsoft Internet Explorer разрешает использовать уникальный <a href="/services/kakoi-element-vnutri-sekcii-head-yavlyaetsya-obyazatelnym-html-tegi-html-head-body-tegi.html">тег HTML</a> <IFRAME>, который реализует концепцию плавающих фреймов. В отличие от обычных фреймов описание плавающих фреймов может встречаться в тексте обычного HTML-документа. Браузеры, не поддерживающие тег <IFRAME>, вместо фрейма будут отображать любую информацию, записанную между <IFRAME> и </IFRAME>.</p> <p>В ТЭГС <IFRAME>применяются точно такие же параметры, как и в теге описания обычных фреймов <FRAME>. Единственным исключением является параметр NORESIZE, применение которого бессмысленно, так как размер плавающих фреймов в любом случае не может быть изменен пользователем при просмотре документа.</p><p>Кроме того, для задания расположения и размеров плавающего фрейма в документе можно использовать следующие <a href="/services/sistemnye-trebovaniya-dlya-ustanovki-vindovs-7-32-posredstvom-komandnoi.html">дополнительные параметры</a>: WIDTH, HEIGHT, HSPACE, VSPACE, ALIGN. Их назначение и порядок использования совпадает с соответствующими параметрами для встроенных изображений, которые задаются тегом <IMG>.</p><p>Приведем пример использования плавающих фреймов:</p><p><TITLE>Использование плавающих фреймов</TITLE></p><p><CEMTEK><H2>Пример использования концепции плавающих фреймов</H2></СЕМТЕК></p><p><IFRAME SRC=float.htm NAME="A" HEIGHT=300 WIDTH=40% HSPACE=10 SCROLLING=YES ALIGN=RIGHT></p><p>Ваш браузер не позволяет отображать плавающие фреймы</p><p>Браузер Microsoft Internet Explorer - первый из браузеров (и пока единственный), который поддерживает так называемые "плавающие" фреймы.</p><p>Такие фреймы могут размещаться в любом месте экрана так же, как графические изображения и таблицы.</p><p>Фрейм справа от <a href="/settings/mnogostrochnyi-tekst-vvod-dannyh-polya-formy---teg-atributy-formy--.html">данного текста</a> размещен на странице с помощью специального тега <IFRAME>. При создании фрейма было указано выравнивание вправо.</p> <p>Результат отображения <a href="/settings/primer-otlichiya-informacii-ot-dannyh-ponyatie-informacii-informaciya-i-dannye.html">данного примера</a> <a href="/rates/microsoft-edge-imeet-t-mnyi-rezhim-vot-kak-ego-vklyuchit-problemy-s-zapuskom.html">браузером Microsoft</a> Internet Explorer показан на рис. 5.16. Браузеры, не поддерживающие концепцию плавающих фреймов, для данного примера вместо отображения содержимого документа float.htm выдадут текст "Ваш браузер не позволяет отображать плавающие фреймы".</p><p><i><b>Рис. 5.16. </b> Плавающий фрейм в Microsoft Internet Explorer </i></p><p>Отметим, что концепция плавающих фреймов близка по идеологии к встроенным изображениям или таблицам. Здесь в <a href="/services/geometki-v-instagram-zachem-oni-nuzhny-mesta-znat-nado-ili-v-chem-sila.html">нужное место</a> HTML-документа целиком встраивается другой HTML-документ.</p><p><i><b>Совет </b> </i></p><p><i> В <a href="/internet/arhiv-adb-programma-adb-otobrazit-spisok-ustroistv-podklyuchennyh-v-nastoyashchii.html">настоящий момент</a> применение плавающих фреймов ограничивается единственным браузером - Microsoft Internet Explorer версии 3.0 и выше. Следует помнить, что пользователи других браузеров (в частности, Netscape) не смогут увидеть содержимого плавающих фреймов. </i></p><table width="635" border="0"><tr><td width="200"> </td><td> </td><td width="200"> </td> </tr></table> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> <div class="single-popular"> <div class="single-popular-tit col-lg-12"> Популярное в рубрике: </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/5be8b76667696c4cd63a8c38979b50af.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Как объединить слои в фотошопе в один или соединить их в группу Как объединить несколько слоев в фотошоп"/ loading=lazy> <div class="single-popular-item-tit"> Как объединить слои в фотошопе в один или соединить их в группу... </div> <a href="/settings/sposoby-obedineniya-sloev-v-fotoshope-kak-obedinit-sloi-v-fotoshope-v.html" rel="bookmark" title="Как объединить слои в фотошопе в один или соединить их в группу Как объединить несколько слоев в фотошоп">читать</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/33b72e60e1d3066a9663f391221dc014.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Перенос контактов на новый телефон android"/ loading=lazy> <div class="single-popular-item-tit"> Перенос контактов на новый телефон android </div> <a href="/phone/perenos-kontaktov-na-novyi-telefon-android-android-prilozheniya.html" rel="bookmark" title="Перенос контактов на новый телефон android">читать</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/ff504b14456f4702a94368a161811b1d.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Самсунг Галакси перезагружается сам по себе — Решения Galaxy note 4 перезагружается сам по себе"/ loading=lazy> <div class="single-popular-item-tit"> Самсунг Галакси перезагружается сам по себе — Решения Galaxy note... </div> <a href="/internet/esli-xiaomi-postoyanno-perezagruzhaetsya-samsung-galaksi-perezagruzhaetsya-sam-po.html" rel="bookmark" title="Самсунг Галакси перезагружается сам по себе — Решения Galaxy note 4 перезагружается сам по себе">читать</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/242e09224609f2b7cbd6b5b9f2adc411.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Основные возможности Kaspersky Rescue Disk"/ loading=lazy> <div class="single-popular-item-tit"> Основные возможности Kaspersky Rescue Disk </div> <a href="/rates/skachat-zagruzochnyi-disk-kasperskogo-osnovnye-vozmozhnosti-kaspersky-rescue.html" rel="bookmark" title="Основные возможности Kaspersky Rescue Disk">читать</a> <div class="clr"> </div> </div> </div> <div class="clr"></div> </div> </div>  <div class="sidebar col-lg-3 col-md-4 col-sm-12"> <div class="sidebar-wrp"> <div class="sidebar-wrp-title">Последние Статьи</div> <div class="sidebar-wrp-des"> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/d93303aadea847492ee52538b585df87.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">Макбук не подключается к wifi Макбук не видит...</div> <div class="clr"></div> <a href="/phone/macbook-ne-podklyuchaetsya-k-wifi-avtomaticheski-makbuk-ne-podklyuchaetsya-k-wifi-makbuk-ne-vidit-vai-fai.html">читать</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/094fe0c598853f299be65e8611b45d60.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">Как заработать на WebMoney</div> <div class="clr"></div> <a href="/internet/kak-zarabotat-rubli-na-webmoney-kak-zarabotat-na-webmoney-proverennye.html">читать</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/280d369c9d1e343119c3d855af4b9c4d.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">"Супра", планшет: отзывы покупателей</div> <div class="clr"></div> <a href="/rates/planshet-podelka-est-takoi-supra-firma-supra-planshet-otzyvy-pokupatelei-plyusy-i-minusy.html">читать</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/b1724f08fa52145089eaa72f836127ee.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">Местонахождения судов в реальном времени</div> <div class="clr"></div> <a href="/settings/voennye-korabli-v-realnom-vremeni-onlain-mestonahozhdeniya-sudov-v.html">читать</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/534951a61241c179a7c060b9fe1143c8.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">Лучшие программы для Android Запись звонков от...</div> <div class="clr"></div> <a href="/rates/prilozheniya-dlya-android-obuchayushchie-programmy-dlya-detei-luchshie.html">читать</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/e280b0808c5e749938522ba1df2a41ec.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">Удаляем не читателей в Твиттере</div> <div class="clr"></div> <a href="/services/kak-udalit-ne-vzaimnyh-chitatelei-v-twitter-udalyaem-ne-chitatelei-v.html">читать</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/229610355b0a27a465c73ddb25664556.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">Подключаем интернет на ноутбуке: все возможные...</div> <div class="clr"></div> <a href="/phone/kak-vklyuchit-internet-na-kompyutere-ispolzuya-mobilnyi-telefon.html">читать</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/5399be52c80b405fedf00779a6136b42.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy> </div> <div class="last-post-tit">Samsung Galaxy S IV – новый флагман...</div> <div class="clr"></div> <a href="/phone/samsung-galaxy-s4-vtoroi-vzglyad-samsung-galaxy-s-iv-novyi-flagman-galakticheskogo-masshtaba-galak.html">читать</a> </div> <div class="clr"></div> </div> </div> <div id="text-4" class="widget widget_text sidebar-wrp"> <div class="textwidget"> </div> </div> <div id="ketena1" style="height:500px;width:260px;" align="center"></div> <div class="clr"></div> </div> </div> </div> </div> <div id="footer"> <div class="container"> <div class="row"> <div class="footer-contacts col-lg-6 col-md-6 col-sm-12 col-xs-12"> <img src="/logo/logo.png" loading=lazy> <div class="footer-contacts-tit">innovakon.ru<br>Мобильные телефоны и связь</div> <div class="footer-soc"> <div class="footer-soc-wrp"> <div class="soc_w"> <a href="#" class="soc-link vk" target="_blank"></a> <a href="#" class="soc-link fb" target="_blank"></a> </div> </div> </div> </div> <div class="footer-links col-lg-4 col-md-6 col-sm-12 col-xs-12"> </div> <div class="footer-links col-lg-4 col-md-4 col-sm-4 col-xs-4" style="display: block;"> <ul> <li><a href="">Редакция проекта</a></li> <li><a href="">Реклама на сайте</a></li> </ul> <ul> <li><a href="/feedback.html">Контакты</a></li> <li><a href="/sitemap.xml">Карта сайта</a></li> </ul> </div> </div> </div> <div class="copyright">© 2024 Мобильные телефоны и связь</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://innovakon.ru/wp-content/themes/trudinsp/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://innovakon.ru/wp-content/themes/trudinsp/js/SmoothScroll.js"></script> <a id="scroll-to-top" href="#" title="Scroll to Top">Top</a> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.4.1'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/jquery-smooth-scroll/js/jss-script.min.js?ver=4.8.3'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='/wp-includes/js/jquery/ui/effect.min.js?ver=1.11.4'></script> <script type='text/javascript' src='/wp-includes/js/jquery/ui/effect-blind.min.js?ver=1.11.4'></script> <script type='text/javascript'> /* <![CDATA[ */ var stbUserOptions = { "mode":"css","cssOptions":{ "roundedCorners":false,"mbottom":20,"imgHide":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/minus.png","imgShow":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/plus.png","strHide":"\u0421\u043a\u0440\u044b\u0442\u044c","strShow":"\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c"} }; /* ]]> */ </script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/wp-special-textboxes/js/wstb.min.js?ver=5.5.101'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script> <script type="text/javascript" id="slb_context">/* <![CDATA[ */if ( !!window.jQuery ) { (function($){ $(document).ready(function(){ if ( !!window.SLB ) { { $.extend(SLB, { "context":["public","user_guest"]} );} } })} )(jQuery);} /* ]]> */</script> </body> </html>