Как сделать кнопку подписаться вконтакте в группе. Подключение кнопки «Подписаться. Работа с библиотекой
Большинство документов HTML не помещается на одной странице, поэтому для их просмотра пользователю приходится сдвигать документ в окне навигатора. Кроме того, для навигации необходимо искать ссылки на другие документы, которые могут быть расположены в любом, самом неожиданном месте страницы.
Вы сможете сделать свой сервер намного удобнее для просмотра, если предоставите пользователю многооконный интерфейс, реализованный при помощи фреймов. В этом случае окно навигатора разделяется на несколько окон (фреймов), в каждом из которых отображается содержимое различных документов HTML (рис. 6.1). Таким образом, можно работать одновременно с несколькими документами.
Рис. 6.1. Страница нашего сервера WWW, реализованная с использованием фреймов
Наша страница состоит из трех фреймов. Первый фрейм расположен в верхней части окна и служит для отображение логотипа. Второй фрейм предназначен для отображения ссылок на различные разделы сервера, представляющие собой ни что иное, как обычные документы HTML. И, наконец, третий фрейм имеет самые большие размеры и предназначен для просмотра документов.
Мы настроили параметры фрейма оглавления и фрейма просмотра таким образом, что пользователь может менять их горизонтальный размер, передвигая мышью вертикальную разделительную линию, расположенную между фреймами. Если содержимое документа не помещается внутри фрейма, в правой части соответствующего окна появляется полоса просмотра.
Пользуясь ссылками в окне фрейма оглавления, вы можете загружать в фрейм просмотра различные документы, которые, в свою очередь, также могут иметь ссылки. Разумеется, мы не претендуем на то, что расположение и назначение фреймов выбраны на нашем сервере оптимальным образом, однако вы можете создать для своего сервера любое количество фреймов и расположить их как угодно.
Заметим, что далеко не все навигаторы способны работать с фреймами. Поэтому несмотря на то что фреймы придают страницам сервера более привлекательный вид и облегчают работу пользователя, их можно встретить далеко не на всех серверах WWW. В качестве альтернативы фреймам обычно применяют таблицы.
Структура документа с фреймами
Прежде всего необходимо подготовить документ HTML, в котором содержится описание размеров, расположения и других параметров фреймов. Этот документ должен иметь следующий вид:
В начале документа HTML, который предназначен для описания фреймов, нет привычного оператора
. Вместо этого там расположен оператор определения набора фреймов . Параметры оператора -
- в третий столбец загружаем всё тот же файл с декорациями
- захлопываем
Посмотрите пример, а потом я объясню почему избрал путь с пятью окнами
Так почему пять окон? Помнится мне, я уже писал про то, что у разных пользователей сети Интернет на мониторах выставлены разные разрешения и соответственно на разных экранах наш сайт будет выглядеть по разному.. и если нет конкретных размеров все наши рисунки, тексты, таблицы что называется "поплывут" у тех пользователей, разрешения мониторов которых отлично от Вашего. Когда мы верстали сайт с помощью таблицы, вопрос с размерами страницы решался при помощи присуждения этой таблице конкретной ширины и высоты, к сожалению, с фреймами так поступить нельзя.. даже если указывать ширину фреймов не в процентах, а в пикселях, всё равно последний столбец растянется на оставшеюся ширину окна браузера и страница, что называется, потеряет "товарный вид". Так как же быть? Приходится идти на маленькие хитрости.. Задав центральному столбцу (в котором у нас собственно и размещена вся страница) размер 800 пикселей мы раз и навсегда определи его ширину, а безразмерные первый и третий столбцы помимо декора выполняют роль своего рода "пружин" на которых подвешен центральный столбец.. Так, у людей с маленьким разрешением монитора эти окна/поля будут узкими, а людей с большим разрешением широкими, таким образом центральный столбец никак не пострадает и теперь мы можем с полной уверенностью размещать в нём какие либо объекты, с точной привязкой по месту, не переживая за их дальнейшую судьбу. Сравните первый пример, где три окна и третий, где их уже пять, неправда ли так лучше?
На этом с размещением и размерами фреймов закончим.. и так здесь долго задержались.. идём дальше.
Приводим фреймы в опрятный вид.
В последнем нашем примере первое, что бросается в глаза, это целая куча полос прокруток, которые стоят где надо и не надо.. Давайте от них избавимся, ну можно и оставить кое где.. Делается это при помощи атрибута scrolling - тега , он может иметь одно из трёх значений:
- no
- yes - всегда показывать,
- auto
scrolling="no" >
scrolling="no" >
scrolling="no" >
Поля фреймов или иначе расстояние от границ фрейма до текста или картинки, как в нашем случае, задаются в пикселях при помощи атрибутов marginwidth и marginheight тега
marginwidth="0" marginheight="0" >
marginwidth="10" marginheight="10" >
Поговорим немного о рамках вокруг наших фреймов.
Если Вы обратили внимание, то в последнем примере наведя курсор на границу фрейма он, курсор то бишь, приобретает другой вид (захватить и переместить) и теперь эту границу можно перетащить в какую либо сторону удерживая левой кнопкой мыши. Иногда такая "мобильность" границ фреймов играет на руку веб-мастеру, но чаще всё же мешает.. Для того, чтобы запретить пользователю играться с размерами окон для тега придумали атрибут noresize
noresize >
noresize >
noresize >
noresize >
noresize >
А вот давно нам знакомый атрибут border
задаёт ширину в пикселях этих самых рамок между фрёймами.. пишется он внутри тега
Фреймы и ссылки.
Настало время оживить наш сайт ссылками, да вот беда, знакомая нам обыкновенная ссылка Бобы в горшочке по-итальянски откроет данный документ в том же фрейме где она и находится, в нашем случае непосредственно в фрейме с содержанием, а само содержание в момент перехода по этой ссылки уйдёт в небытие.. можете взглянуть на корявый пример.. кликнете в нём на любую ссылку.. Что бы впредь такого не происходило, необходимо указывать браузеру в каком фрейме следует открывать необходимый нам документ, ну если конечно Вам и в правду не нужно открывать его в этом же фрейме.
Помнится мы уже знакомились, в главе посвящённой ссылкам, с атрибутами name - имя и target - цель, применяются они также и при работе с фреймами механизм немного изменён а так почти тоже самое. первым делом фрейму в котором мы хотели бы открывать какие либо документы необходимо присвоить индивидуальное имя.
пишется так:
name="osnovnoe" > имя можно придумать любое.. главное его не забыть..
Пишется так:
target="osnovnoe" >Бобы в горшочке по-итальянски
Ну я думаю Вам уже не стоит объяснять, что прежде чем ссылаться на какие либо документы, их необходимо создать.. в моём случае файлы (рецепты) имеют имена text.html, text1.html, text2.html…
Посмотрите пример:
Файл index.html
name="osnovnoe" marginwidth="10" marginheight="10" noresize>
Файл menu.html
Меню:
target="osnovnoe" >Суп из шампиньонов
target="osnovnoe" >Бобы в горшочке по-итальянски
target="osnovnoe" >Австралийский летний салат
... ... ...
Так же как и раньше документ можно открыть в отдельном окне. Напомню, пишется так:
target="_blank" >Бобы в горшочке по-итальянски
Или же присвоив атрибуту target значение _top открыть его в этом же окне браузера, но на весь экран.. "обнулив" при этом всё что бы там не находилось.. пишется так:
target="_top" >Бобы в горшочке по-итальянски
Такой вот сайтик получился.. конечно над ним ещё работать и работать.. к тому же по моёй задумке он будет иметь несколько иную структуру в плане навигации по сайту, в нем будет ёщё целая куча страниц, красивое меню, но что касается фреймовой структуры, думаю она останется прежней..
Плавающий фрейм
Иногда в страницу содержащую в себе не фреймовую структуру необходимо в отдельном окне вставить другой HTML документ или даже ряд таковых документов. Для выполнения этой цели существует тег
Данный тег имеет ряд атрибутов:
src - обязательный атрибут, указывающий путь к открываемой страницеwidth - ширина плавающего фрейма в пикселях или процентах
height - высота плавающего фрейма
scrolling - показ полосы прокрутки
- no - никогда не показывать полосу прокрутки,
- yes - всегда показывать,
- auto - показывать в том случае если она необходима.
- left - слева
- right - справа
- top - выше
- bottom - ниже
- 1 - включить рамку
- 0 - выключить рамку
Всё вместе пишется так:
Пример документа с плавающим фреймом:
Плавающий фрейм
В эту страницу введён так называемый "плавающий фрейм".
В отдельном окне он открывает для показа другой документ html.
… … …
Noframes
Некоторые браузеры не поддерживают фреймовую структуру документа или неправильно её интерпретируют, кроме того зачастую пользователи в настройках своих браузеров умышленно отключают поддержку фреймовой структуры html документа. И хотя процент таких браузеров и пользователей невелик, но тем не менее они есть.
Теперь представьте что Вы построили свой сайт с помощью фреймовой структуры и вот некоторые посетители, может быть сами не подозревая в чем проблема, пытаются открыть Ваш сайт, а их браузер выдает ошибку! Что они подумают о Вашем сайте? я думаю, что то типа: "Фу.. ерунда какая то.. больше сроду сюда не зайду!".
Для того что бы дать понять пользователю, что его браузер/настройки браузера не поддерживают фреймы существует тег
Тег
Результат примера будет заметен, если Ваш браузер и в правду не поддерживает фреймы (тут я надолго задумался.. :) если это так, то зачем вообще читать эту главу?) или же Вы в качестве эксперимента выключили поддержку фреймов в своём браузере.
Тег
С плавающим фреймом всё ещё более просто, достаточно написать нужный текст между
Перед тем как начать создавать страницу с использованием фрёймовой структуры проанализируйте её макет, размеры каждого окна, наличие или отсутствие в них полос прокруток и т. д. После этого можно создавать подключаемые HTML файлы особо не переживая за их взаимное расположение относительно друг друга..
Используйте тег
Навигатор Microsoft Internet Explorer позволяет создавать еще одну разновидность фреймов - так называемые плавающие фреймы.
Вы можете использовать плавающий фрейм не только для размещения текста в тексте, но и для организации ссылок на другие документы.
Вокруг плавающего фрейма может располагаться текст или другие графические изображения. Вы можете указывать для фрейма такие же атрибуты выравнивания, как и для графических изображений.
Плавающий фрейм вставляется в документ
HTML
при помощи оператора
Еще один параметр, который допустим при описании плавающего фрейма - FRAMEBORDER. Он может принимать значения 1 или 0. Если значение этого параметра равно 1, плавающий фрейм заключается в трехмерную рамку (используется по умолчанию), а если 0 - рамка не отображается.
Параметр SCROLLING может принимать значения “yes”,“no”или“auto”. Если указано значение“yes”, окно плавающего фрейма будет иметь полосы просмотра. Если“no” - полос просмотра не будет. В том случае, когда для параметра SCROLLING указано значение“auto”, полосы просмотра будут создаваться только при необходимости, когда содержимое документа не помещается в окне фрейма.
Пример
Размещение плавающих фреймов в документах HTML
Вы можете включить внутрь документа HTML плавающий фрейм:
Если указано выравнивание по левой границе,
текст, расположенный рядом с плавающим фреймом, будет
расположен справа от фрейма
В этом документе определен плавающий фрейм, в который загружается документ HTML, расположенный в файлеinclude.html
Include.Html
Содержимое этого документа отображается внутри
плавающего фрейма.
Оно отображается в окне, которое имеет
вертикальную полосу просмотра.
Если содержимое документа,
загруженного в плавающий фрейм, не помещается в окне фрейма,
пользователь может пролистать его при помощи этой
полосы просмотра.
Лабораторное задание №5
1) Создать документ с фреймами следующего вида:
2) Создать документ с фреймами следующего вида:
3) Создать документ с фреймами следующего вида:
Первоначально здесь должна быть расположена информация об авторе |
|
Видеофрагмент 1 |
на заранее созданныеhtmlдокументы, при нажатии на ссылки их содержание должно отображаться в окне фрейма №1. |
В окне фрейма2 должна располагаться страница с видеофрагментом1, при нажатии на видеофрагмент1 в окно фрейма3 должна загрузиться информация, содержащая: описание видеофрагмента1 и ссылку на видеофрагмент 2, при нажатии на эту ссылку в окне фрейма 2 должен загрузиться видеофрагмент 2, при нажатии на видеофрагмент2 в окне фрейма 3 должна загрузиться информация, содержащая: описание видеофрагмента2 и ссылку на видеофрагмент 1…
4) Самостоятельно придумать 4 примера документов с фреймами для демонстрации работы параметра TARGET с предопределенными именами (_top, _parent, _self, _blank).
5) Самостоятельно придумать примеры документов с фреймами, чтобы продемонстрировать умение:
задавать размер фреймов
задавать рамки для фреймов
задавать расстояние между фреймами
задавать отступ
знать, как сделать невозможным изменение окна фрейма
сделать появление полосы прокрутки, только при необходимости
6)Создать документ с плавающим фреймом, без рамки, полоса прокрутки должна появляться при необходимости, текст, расположенный рядом с фреймом должен быть расположен слева от фрейма.