Как сделать фрейм в html
Обновлено: 05.07.2024
Итак, фреймы.. для чего они нужны и какую пользу в себе несут? Об этом я и постараюсь рассказать в этой главе, ну и естественно о том, как их внедрять и работать с ними..
Часто при создании сайта возникает необходимость открывать в одном окне браузера одновременно несколько HTML документов.. так вот фреймы как раз таки и созданы для того чтобы определить рабочие области для каждого документа. Кроме того, фреймы - это хороший инструмент, с помощью которого можно заниматься версткой страницы, они служат достойной "альтернативой" табличному способу верстки страницы.. в кавычки взял слово "альтернатива" потому, что это совершенно иной способ построения сайта со своими достоинствами и недостатками и его достаточно трудно сопоставлять с доселе привычным построением сайта.. но обо всем по порядку..
Ну что, начнем? Допустим нам необходимо в одном окне браузера открыть сразу три HTML документа и расположить их к примеру вот таким способом:
Испольльзуя фрэймы, позволяющие разбивать Web-страниц скроллируемые подокна, вы можете значительно улучшить внешний вид и функциональность информационных систем и Web-приложений. Каждое подокно, или фрэйм, может иметь следующие свойства:
Каждый фрэйм имеет свой URL, что позволяет загружать его независимо от других фрэймов. Каждый фрэйм имеет собственое имя (параметр NAME), позволяющее переходить к нему из другого фрэйма. Размер фрэйма может быть изменен пользователем прямо на экране при помощи мыши (если это не запрешено указанием специального параметра). Данные свойства фрэймов позволяют создавать продвинутые интерфейсные решения, такие как:
Размещение статической информации, которую автор считает необходимым постоянно показывать пользователю, в одном статическом фрэйме. Это может быть графический логотип фирмы, copyright, набор управляющих кнопок.
Помещение в статическом фрэйме оглавления всех или части WEB-документов, содержащихся на WEB-сервере, что позволяет пользователю быстро находить интересующую его информацию.
Создавать окна результатов запросов, когда в одном фрэйме находится собственно запрос, а в другом результаты запроса.
Создавать формы типа "мастер-деталь" для WEB-приложений, обслуживающих базы данных.
Формат документа, использующего фрэймы, внешне очень напоминает формат обычного документа, только вместо тэга BODY используется контейнер FRAMESET, содержащий описание внутренних HTML-документов, содержащий собственно информацию, размещаемую во фрэймах.
Однако, фрэйм-документ является специфичным видом HTML-документа, поскольку не содержит элемента BODY и какой-либо информационной нагрузки соответственно. Он описывает только фрэймы, которые будут содержать информацию (кроме случая двойного документа, который мы рассмотрим позже).
+Представим общий синтаксис фрэймов:
Общий контэйнер FRAMESET описывает все фрэймы, на которые делится экран. Вы можете разделить экран на несколько вертикальных или несколько горизонтальных фрэймов. Тэг FRAME пописывает каждый фрэйм в отдельности. Рассмотрим более детально каждый компонент.
Тэг имеет завершающий тэг . Все, что может находиться между этими двумя тэгами, это тэг , вложенные тэги и , а также контейнер из тэгов
Внимание! Совместное использование данных параметров может привести к непредствазуемым результатам. Например, строка: может привести к ошибочной ситуации.
- описывает три фрэйма, два по 50 точек справа и слева, и один внутри этих полосок.
- описывает три фрэйма, первый из которых занимает 20% площади сверху экрана, второй 3/4 оставшегося от первого фрэйма места (т.е. 60% всей площади окна), а последний 1/4 (т.е. 20% всей площади окна.
- аналогично предыдущему примеру.
Тэги могут быть вложенными, т.е. например:
Результат данного примера мы рассмотрим позже.
Данный тэг определяет фрэйм внутри контейнера FRAMESET.
Описывает URL документа, который будет отображен внутри ланного фрэйма. Если он отсутствует, то будет отображен пустой фрэйм.
Данный параметр описывает имя фрэйма. Имя фрэйма может быть использовано для определения действия с данным фрэймом из другого HTML-документа или фрэйма (как правило, из соседнего фрэйма этого же документа). Имя обязат должно начинаться с символа. Содержимое поименованных фрэймов может быть задействовано из других документов при помощи специального атрибута TARGET, описываемого ниже.
Это атрибут может быть использован, если автор документа хочет указать величину разделительных полос между фрэймами сбоку. Значение value указывается в пикселах и не может быть меньше единицы. По умолчанию данное значение зависит от реализации поддержки фрэймов используемым клиентом броузером.
То же самое, что и MARGINWIDTH, но для верхних и нижних величин разделительных полос.
Этот атрибут позволяет задавать наличие полос прокрутки у фрэйма. Параметр yes указывает, что полосы прокрутки будут в любом случае присутствовать у фрэйма, параметр no наоборот, что полос прокрутки не будет. Auto опре дполос прокрутки только при их необходимости (значение по умолчанию).
Данный атрибут позволяет создавать фрэймы без возможности изменения размеров. По умолчанию, размер фрэйма можно изменить при помощи мыши так же просто, как и размер окна Windows. NORESIZE отменяет данную возможность. Если у одного фрэйма установлен атрибут NORESIZE, то у соседних фрэймов тоже не может быть изменен размер со стороны данного.
Данный тэг используется в случае, если вы создаете документ, который может просматриваться как броузерами, поддерживающими фрэймы, так и броузерами, их не поддерживающими. Данный тэг помещяется внутри контейнера FRAMESET, а все, что находится внутри тэгов и игнорируется броузерами, поддерживающими фрэймы.
Рассмотрим реализацию фрэймов для подобного разбиения окна:
Ваша версия WEB-броузера не поддерживает фрэймы!
С появлением фрэймов сразу возникает вопрос: "А как сделать так, чтобы нажимая на ссылку в одном фрэйме инициировать появление информации в другом?"
Ответом на данный вопрос является планирование взаимодействия фрэймов (далее - планирование). Каждый фрэйм может иметь собственное имя, определяемое параметром NAME при описании данного фрэйма. Существует, также, специальный атрибут - TARGET, позволяющий определять, к какому фрэйму относится та или иная операция. Формат данного атрибута следующий:
Данный атрибут может встречаться внутри различных тэгов:
Это самое прямое использование TARGET. Обычно, при активизации пользователем ссылки соответствующий документ появляется в том же окне (или фрэйме), что и исходный, в котором была ссылка. Добавление атрибута TARGET позволяет произвести вывод документа в другой фрэйм. Например:
Размещение TARGET в тэге BASE позволит вам не указывать при описании каждой ссылки фрэйм-приемник документов, вызываемых по ссылкам. Это очень удобно, если в одном фрэйме у вас находится меню, а в другой - выводится информация. Например:
Документ п 2 (doc2.htm).
Таже можно включать тэг TARGET в описание ссылки при создании карты изображения. Например:
То же относится и к определению формы. В данном случае, после обработки переданных параметров формы результирующий документ появится в указанном фрэйме.
Привет, друзья! Сегодня в Анапе дождь и пока я сижу в номере, решила для вас написать статью о том, что такое фрейм сайта и как сделать фрейм быстро и легко. На сегодняшний день такой вид сайта облегчает работу с продвижением партнерских программ, чтобы прятать в нём длинные партнерские ссылки, которые не нравятся социальным сетям и другим сайтам.
Сегодня в этой статье я вам расскажу о том, что такое фреймовый сайт, для чего он нужен и как его можно создать всего за 5 минут. Фрейм сегодня может сделать абсолютно любой человек, имея всего партнерскую ссылку и хостинг. Поэтому советую внимательно дочитать эту статью до конца и уже после прочтения вы уже сегодня сможете пользоваться этой классной возможностью создавать такие сайты. Итак, давайте начнём.
Что такое фрейм?
Давайте для начала разберёмся, что же такое фрейм.
Озвучу вам описание фрейма так, как написано в Векипедии:
Фрейм (от англ. frame — рамка) — отдельный, законченный HTML-документ, который вместе с другими HTML-документами может быть отображён в окне браузера.
То есть, вы можете встраивать в свой сайт содержимое другого сайта, используя партнерскую ссылку. Получается, что ваша партнерская ссылка будет вшита во фрейм, а в строке браузера будет ссылка с вашим доменом (сайтом) и это будет выглядеть так, как будто это ваш сайт.
Фреймовый сайт предназначен больше для использования для работы с партнерскими программами , где очень важно не раскидывать людям длинные партнерские ссылки, а давать красивую ссылку с уже встроенной в него партнерской ссылки, переходя по которой человек тут же закрепляется за вами и при его покупке с этого сайта – вы получаете свои комиссионные. Если вам интересно узнать, что такое партнерские программы и как можно на них зарабатывать, вы можете ознакомиться в этой статье .
Как выглядит фреймовый сайт
Например, я сделала фреймовый сайт по партнерской ссылке на обучающую программу Евгения Вергуса (смотрите на ссылку ниже).
Перейдя по этой ссылке, вы видите, что это сайт Евгения Вергуса, который он сам делал, но в строке браузера стоит не его домен, а мой домен. Таким образом и работает фрейм.
Для чего нужен фреймовый сайт
Вообще, фреймовый сайт используется чаще всего для того, чтобы прятать длинные партнерские ссылки.
Во-первых, для человека, который видит такую ссылку больше доверия, чем к какой-то длинной непонятной ссылке.
Во-вторых, это повышает количество кликов по такой ссылке, что повышает возможность получить больше комиссионных с партнерской программы.
Для того, чтобы сделать самому такой сайт не нужно каких-то специальных знаний и навыков, как подумает наверно каждый человек. Достаточно сделать всего несколько несложных действий и ваш фреймовый сайт уже готов.
Для фреймового сайта создать лучше отдельный домен , на котором вы будете размещать все свои фреймы, не засоряя свои основные домены.
Как создать фрейм сайта
Для того, чтобы создать фрейм сайта, много ума и знаний не нужно. Вы просто можете скачать готовый html код, где вы просто добавляете свою партнерскую.
Вот пример такого кода (смотрите скрин ниже):
Далее, после того, как вы скачали html код, вы должны его открыть с помощью одного текстового редактора, который называется Notepad++.
Кстати, в файл с кодом вы можете вставлять также код ретаргетинга перед тегом , чтобы отслеживать всех посетителей сайта и в дальнейшем делать рекламу на свою целевую аудиторию (смотрите скриншот ниже):
Итак, вы скачали html код фрейма и текстовый редактор Notepad++. Далее вам нужно проделать некоторые действия.
Пошаговая настройка фрейма
После того, как вы поместили в папку с названием партнерского инфопродукта пустой файл с html кодом, этот файл вы открываете с помощью текстового редактора Notepad++, который вы также скачали в этой статье чуть выше (ссылка выше в статье). Вы нажимаете на этот пустой файл index.html, кликаете по нему правой кнопкой мыши и перед вами выпадает меню, где сверху у вас появляется программка Notepad++ (смотрите скриншот ниже как это выглядит):
После того, как вы нажали в меню на Notepad++, перед вами появляется сам html код, где вам нужно будет добавить партнерскую ссылку, прописать название партнерского инфопродукта и всё это сохранить, нажав на значок дискеты. Вот как это выглядит – смотрите ниже на скриншоте:
Теперь у вас готов ваш файлик и вам сейчас нужно будет поместить на ваш хостинг . Я на сегодняшний день пользуюсь хостингом SWEB. Это очень удобный и качественный хостинг с отличной тех. поддержкой и возможностью создавать на нём домены и поддомены. Я им пользуюсь уже 2 года и я им очень довольна. Поэтому, если вы не знаете где найти хороший хостинг, то можете зарегистрироваться на хостинге SWEB и им тоже пользоваться. Для регистрации на хостинге пройдите здесь и при регистрации введите промокод adisudun, чтобы получить бесплатный пробный период и разные бонусы, и ощутить все прелести этого хостинга.
Если вы не знаете, что такое хостинг и зачем он нужен, можете прочитать в этой статье .
Схема переноса фрейма сайта на хостинг
После этого вы попадаете в ISP manager, где вы будете управлять своими доменами и файлами. Именно туда мы с вами будем добавлять наш файлик с html кодом. Для этого у вас должен быть свой домен, который вы должны добавить на этот хостинг или купить на этом хостинге. Если вы будете перемещать свой домен на хостинг, то вы должны прописать DNS сервера хостинга Leohost на вашем сайте-регистраторе, на котором вы покупали свой домен. Я их укажу ниже.
DNS сервера хостинга Leohost:
ns1.leohost.pro
ns2.leohost.pro
Также и при покупке домена на хостинге Leohost нужно будет также прописать эти DNS сервера.
Если вы не знаете, что такое домен и как покупать домен, то прочитайте эту статью , где я рассказываю подробно как регистрировать домен на похожем хостинге Offerhost, где такая же панель управления. Если вы что-то не поймёте или у вас не получится, пишите в комментариях, я вам помогу.
Перед вами отобразится ваш домен (сайт) или несколько сайтов, как у меня (смотрите скриншот ниже):
Если вы хотите тоже создать свой поддомен, то посмотрите ниже моё видео, где я подробно показываю по шагам как это правильно сделать.
**
После того, как вы выбрали свой домен (сайт), нажимаете на него два раза мышкой, и вы попадаете в папку своего домена, куда вы будете вставлять файл с html кодом. Если вы до этого не создавали фреймовых сайтов, то внутри папки у вас будет пусто.
Теперь в вашем каталоге появится файл, который называется index.html (смотрите скриншот):
Вот ваш фрейм сайта и готов! Если у вас получилось сделать его на этапе прочтения этой статьи, то вы молодцы! Если же что-то не получилось, пишите вопросы в комментариях. Или попробуйте заново пройтись по инструкции и сделать с начала. У вас обязательно получится!
И вот что у нас получается (смотрите скриншот):
Ваш фреймовый сайт готов! Теперь вы можете спокойно распространять этот фреймовый сайт везде и будьте уверены, что люди будут относится к нему очень лояльно.
С первого раза вам покажется это очень долгой и трудной процедурой. Но с каждым разом это у вас будет уже получатся всё быстрее и быстрее. Я сейчас делаю фреймовый сайт за 2 минуты. Хотя когда-то у меня на это уходил где-то час 🙂
Согласитесь, что фрейм очень сильно выручает, когда нужно прорекламировать очень длинную партнерскую ссылку с длинным хвостом, которую, кстати, некоторые люди специально урезают, чтобы не выплачивались комиссионные партнеру, а чтобы оплата была напрямую автору инфопродукта.
Заключение
Я надеюсь эта статья была для вас полезна. Если у вас возникли какие-то вопросы, задавайте их в комментариях ниже!
Благодарю вас за внимание к моей статье и буду благодарна, если подпишитесь на мой Инстаграм!
Подписывайтесь на мой Инстаграм — там много интересного!
Жмите ниже на кнопку и подписывайся!
НЕ ЗАБУДЬТЕ!
Подписывайтесь на мой Инстаграм и мой Супер Полезный Телеграм Блог 👇
Поделитесь статьей с друзьями в социальных сетях
Если статья была вам полезна, поделитесь ей с друзьями в социальных сетях!
Комментарии 11
Вера, я все снова просмотрела и все получилось .Спасибо за статью!
Любовь, я очень рада, что у вас всё получилось и моя статья вам помогла!!))
Любовь, я не делаю рекламу в РСЯ. Я не пойму куда вы хотите загрузить папку. Задайте, пожалуйста, вопрос более корректно.
Наконец-то статья без всяких недомолвок, очень точно и понятно! Большое спасибо!
Юрий, спасибо! Я стараюсь делать контент более понятный и полезный, так как чувствую свою аудиторию!)) Успехов вам!
Здравствуйте, Вера.
Во-первых большое спасибо Вам за очень полезную информацию.
Впервые от Вас узнал о фреймовых сайтах, уже настроил на своем, и почти с первой попытки.
Правда мой сайт на шерлокхосте, и там немного другая процедура загрузки индекс файла, но хоть и с трудом, но получилось.
Теперь думаю, как теперь отслеживать всех посетителей сайта?
Подскажите, пожалуйста.
Дмитрий, чтобы отслеживать посетителей сайта, Вам нужна Яндкс Метрика. У меня на Блоге есть статья подробная об установке Яндекс Метрики. Можете прочитать по этой ссылке
Здравствуйте, Вера. Скажите пожалуйста. Ваше мнение по поводу качества хостинга (Leohost)? Инструменты, шаблоны, подписная, скорость, возможность переноса, и, т.д. Спасибо…
Антон, Леохостом пользуюсь уже 3 года. Всё отлично работает! Рекомендую!
Добавить комментарий Отменить ответ
Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.
- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
В данном видеоуроке мы поговорим о фреймах. Три года назад я изучал HTML по электронному учебнику. Не помню, какого автора. Уникальность учебника заключалась в том, что он был построен по фреймам. Слева вверху был логотип. Чуть ниже — меню. Справа — контент. Впрочем, казалось бы, ничем не отличается от таблиц. Но у такой верстки были преимущества. Например, при прокрутке страницы, меню фиксировалось и оставалось на месте. Меня это заинтересовало, и я начал вплотную изучать фреймы.
Недостатки фреймов
Я не буду давать про них много информации, так как тема сама по себе и так объемная, но недостатки фреймов я вам сейчас приведу:
Что такое фрейм?
Фрейм, говоря простым языком, — это страница, в которой находится несколько страниц. Сейчас объясню. У нас есть страница. В ней есть еще две страницы. Одна страница — наш логотип, вторая — меню, третья — контент. Такую страницу мы и будем сейчас создавать. Прежде, чем приступим к созданию такого фрейма, хочу предупредить, что в версии HTML5.0 фреймы не поддерживаются. Но так как мы изучаем HTML 4.01, то мы их разберем.
Как создать фрейм в HTML?
Перейдем на наш рабочий стол. Создадим еще папку. Назовем ее Frames. Откроем ее и свернем. Зайдем в папку site2. Скопируем из нее индексный файл и вставим его в папку Frames. Откроем файл через notepad и удалим все ненужное, в том числе и тег .
— Эй, Олег, где мое тело?
— Мы тебя трансформируем.
Прописываем . Про тег мы забываем.
Сохраним наш документ и создадим еще один. Копируем в него какой-нибудь индексный файл. Удаляем здесь все, что находится в теге . Тег не трогаем. И пишем сюда изображение.
Давайте сохраним нашу страничку в папку Frames. Назовем ее header.html.
Перейдем на рабочий стол, зайдем в папку site2, скопируем изображение info- line из папки img, переименуем в logo и закроем папку site2.
Сохраняем как menu.html. Создадим третью страничку — контент. Копируем из того же файла наш контент. Сохраним как content.html.
Мы все сделали. Теперь перейдем в файл index.html. Тег имеет атрибут rows, означающий высоту. Высота указывается по порядку тех фреймов, которые будут прописаны ниже. Прописываются они с помощью тега и атрибуда src. Тег закрывающего тега не имеет. В кавычках указывается путь к документу. Первым пусть идет логотип, потом меню и третьим — контент.
Сохраним. Проверим в браузере. Смотрим, что у нас получилось. Идет логотип (можно было фрейм для логотипа сделать больше либо уменьшить сам логотип). Потом — меню (с ним все нормально). Далее — контент с полосой прокрутки. Кстати, мы можем двигать наши фреймы: некоторые делать шире, некоторые — уже.
Давайте теперь сделаем нашу страничку следующего вида: слева — логотип, потом меню, оставшееся место — контент. Грубо говоря, мы повернем страницу на 90 градусов.
Перейдем в код и заменим атрибут rows на cols. Значения оставим те же.
Сохраняем, переходим в браузер. Проверяем. У нас получилось то, что мы задумали.
Усложняем задачу — создадим то, что мы планировали. В верхнем левом углу — логотип, под ним — меню. Остальное место займет контент.
Давайте перейдем в наш код и разберемся, как это делать. Подводный камень тега заключается в том, что мы не можем использовать вместе атрибут cols и rows. Как же нам поступить в этом случае? Мы добавим еще один фрейм в наш настоящий фрейм. Но сначала перейдем в хедер и уменьшим логотип. Мы уже знаем, как это делать.
Сохраняем. Перейдем снова в index.html. Прописываем еще один тег . В ширине указываем ширину наших полей: хедера и меню. Она у нас будет равна 150, допустим. Потом идет ширина контента — это оставшаяся часть. Она равна звездочке. В следующем теге мы указываем высоту логотипа — 150 пикселей, потом идет запятая и звездочка. То есть menu.html будет занимать оставшееся место на странице.
Давайте сохраним и проверим в браузере. Обновим страницу — получили то, что хотели. Давайте только увеличим расстояние до двухсот.
На этом мы заканчиваем этот видеоурок. Поэкспериментируйте с фреймами. Попробуйте другие формы. Поставьте себе какие-нибудь задачи, выполните их и приступайте к следующему видеоуроку, в котором мы разберем последнюю тему — это интересные теги и все, что мы упустили по прохождении курса.
Читайте также: