Рассылка закрыта
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Программирование для начинающих #28
Программирование для начинающихВыпуск 28
Ведущий рассылки: Вячеслав Мацнев | e-mail: stac@stacmv.net | |||||||
|
| В этом выпуске читайте: |
|
Здравствуйте, друзья! Это Вячеслав Мацнев и я буду с вами на протяжении этого часа или что-то в этом роде.
Уж как они надоедают эти проблемы всяческие. Но, однако, как же скучно порой без них ... В последнее время я очень подозрителен. Вот и сейчас я подозреваю, что домен stacmv.net либо прекратил свое существование, либо соответствующий сервер испытывает какие-то трудности. Поэтому я решил обнародовать свой резервный email. При случае пишите мне на stacmv@newmail.ru.
Итак, мы добрались до фреймов. Необходимость их использования довольно часто ставится под сомнение и порождает массу споров и дискуссий, напоминающих собой споры по поводу применения оператора GOTO в языках высокого уровня. Во многих учебниках и руководствах, распространенных в Сети, авторы - практикующие вебдизайнеры - настоятельно не рекомендуют применять фреймы своим ученикам. Они, естественно, приводят довольно веские причины, и я generally с ними согласен. В принципе мне не стоило бы вам рассказывать о фреймах, дабы не забивать вам этим голову. Однако мое теперешнее положение (я здесь типа учитель) вынуждает меня быть откровенным с вами. Поэтому слушайте грустную историю фреймов. Сначала было слово. И слово это было "фрейм". Инородное такое словечко, которое не переводится однозначно на русский язык (т.е. его перевод зависит от контекста). "Frame"(фрэйм) означает то, что у нас принято называть остовом, каркасом, фундаментом. В теории механизмов и машин есть такое понятие, как "стойка"(неподвижное звено). И это тоже frame. Т.е. фрейм это нечто такое, что служит основой для чего-то другого. Еще "frame" переводится как "кадр" (фотопленки, ...). В нашем русском языке кадр не очень-то похож на фундамент, однако это все же так: кадр является фундаментом для содержимого кадра (скажем, для изображения). В таком вот смысле "frame" используется и в HTML и часто переводится на русский как "кадр". Обычно в браузер загружена одна страница (один файл). Эта страница занимает всю окно. Однажды разработчики сетевого контента стали создавать сайты с развитой навигацией (красивые менюшки и все такое). Они лепили эти менющки на каждую свою страницу, чтобы все они выглядели одинаково. Это был "каменный век" вебдизайна, поэтому поддерживать сайты было тяжело: при появлении нового раздела нужно было обновить меню на каждой странице. Совместно с дизайнерами разработчики браузеров придумали фреймы. Теперь браузеры могли в одном окне показывать несколько страниц (несколько файлов). Основа или фундамент каждой страницы и есть фрейм (еще можно сказать что фрейм это контейнер, т.е. он содержит в себе страницу). Обычно используются два фрейма - один для меню, другой для основного содержания страницы (собственно полезного контента). Но поддержка фреймов в браузере организована таким образом, что в одном окне может быть любое число фреймов. Вот несколько схематичных иллюстраций.
*------------------------------* *-----*------------------------* | меню | | | | *------------------------------* | м | | | | | | | | | | е | | | | | | | | | | н | контент | | контент | | | | | | | ю | | | | | | | | | | | | | | | | | | | | | | *------------------------------* *-----*------------------------* Вы видите, что окно браузера разделено на несколько частей - фреймов. В каждый фрейм загружена вебстраница. Фрейм может иметь имя, по которому на него можно ссылаться. Например, можно сделать так, чтобы при нажатии ссылки в одном фрейме (меню) загрузилась страница в другом фрейме (контент). Кстати, фреймы это независимые объекты. Так, у каждого фрейма могут быть свои полосы прокрутки. Вы можете как угодно прокручивать содержимое, скажем фрейма "контент", а меню при этом останется на своем месте, т.е. всегда будет на экране. Тем более, меню хранится всего лишь в одном файле, поэтому изменив его можно изменить меню на всем сайте. Это, конечно очень удобно и сейчас довольно широко используется, не смотря на рекомендации умудренных опытом вебмастеров. Фреймы это довольно-таки соблазнительная вещь. Так, мой первый сайт использовал фреймы, даже не использовал, а был целиком на них основан. Тогда я уже знал, что использовать фреймы не рекомендуется, знал почему, но не понимал почему это плохо. Со временем, однако, я полностью разобрался в этом вопросе. И сайт рассылки "Программирование для начинающих" был изначально задуман, как не имеющий фреймов. Однако на данный момент полностью отказаться от фреймов мне не удалось (и думаю пока не стоит). Потому что, как и в случае с оператором GOTO есть ситуации, когда применение фреймов более чем оправдано. На сайте рассылки фреймы используются в Архиве рассылки. При этом в верхнем фрейме отображена навигационная панель, позволяющая выбрать выпуск, а в нижнем загружен выбранный выпуск рассылки. После всего сказанного достоинства фреймов должны быть для вас очевидны, чего нельзя сказать о недостатках. Чтобы разобраться в недостатках нам нужно знать как реализованы фреймы в HTML. Этим и займемся. Чтобы организовать фреймы нужно создать специальную вебстраницу, т.н. фрейм-контейнер, в которой будет описана структура фреймов (их положение на экране, размеры и другие свойства, как-то наличие полос прокрутки, разделительных рамок и пр.) Рассмотрим конкретный пример - небольшой сайт, имеющий четыре страницы содержащие контент (content - это содержание; фраза "содержащие содержание" звучит не красиво, поэтому я буду использовать слово "контент" в значении "полезное содержание", т.е. то зачем посетитель пришел на сайт). Меню у нас будет определено в файле menu.html, еще будет страница с информацией о сайте и его авторе в файле about.html, страница с какой-то полезной статьей, из-за которой собственно народ на сайт и заходит, в файле article.html, страница с сылками по теме статьи в файле links.html и страница с новостями в файле news.html. Обратите внимание, что имена для страниц выбраны так, что они характеризуют содержание этих страниц, т.е. имена - осмысленные. Итак сайт имеет одну структуру фреймов, значит нам нужен один фрейм контейнер. Разумно использовать для этого файл index.html, чтобы он автоматически открывался при заходе посетителя на сайт. Страница фрейм-контейнер отличается от обычной страницы тем, что она не имеет тела (BODY), вместо этого в ней описан набор фреймов (FRAMESET). Вообще для описания фреймов используются всего два тега (имеются в виду обычные фреймы, о которых мы сейчас говорим, потому что бывают еще плавающие, но об этом позже) плюс один вспомогательный тег <NOFRAMES>. Тег <FRAMESET> описывает структуру фреймов, а тег <FRAME> описывает каждый фрейм входящий в эту структуру. Наш файл index.html будет примерно таким:
<HTML> <HEAD> <TITLE> Сайт с интересной статьей </TITLE> </HEAD> <FRAMESET ROWS="5%,*"> <FRAME NAME="menu" SRC="menu.html"> <FRAME NAME="content" SRC="news.html"> </FRAMESET> </HTML> Тег FRAMESET может иметь два параметра ROWS и COLS, которые определяют способ разделения окна на фреймы (на строки или на столбцы). В примере используется ROWS, т.е. один фрейм будет вверху, другой внизу, а разделительная линия горизонтальной. Значением параметров ROWS и COLS является строка значений высоты или ширины (короче, размера) для входящих в структуру фреймов. Размер можно задать тремя способами: - абсолютно в пикселах (ROWS="50,400,50" - три фрейма высотой 50,400 и 50 пикселей соответственно); - относительно в процентах (COLS="20%,80%" - два вертикальных фрейма шириной 20% и 80%, которая будет меняться при изменении размера окна браузера); - относительно в долях (частях) (ROWS="*,*" - два одинаковых фрейма. "*" обозначает одну часть. Браузер анализирует строку, вычисляет сколько всего "частей", в данном случае две, значит каждая равняется половине высоты окна. Перед звездочкой может стоять число: COLS="*,2*,*" - три фрейма с шириной равной соответственно 1/4, 1/2, 1/4 от ширины окна (всего четыре части, значит на "*" приходится 1/4. "2*" это две четверти или 1/2)). Допускается комбинировать все три способа. Несколько примеров: ROWS="5%,*" - верхний фрейм - 5%, нижний фрейм - все остальное пространство (от всей высоты отнимается 5%, делится на части и, т.к. часть определена одна, то она и равняется 95%) COLS="100,25%,*,2*" - четыре фрейма: левый - 100 пикселей, второй с лева - 25%, остальное пространство пропорционально делится между двумя правыми фреймами, один отхватывает одну часть, второй две. COLS="*,3*,2*" - три фрейма с шириной 1/6, 3/6=1/2, 2/6=1/3. COLS="*,20%" - два фрейма, правый - 20%, левый - все остальное. Итак FRAMESET определяет число, размеры и ориентацию (или положение) фреймов. Каждый отдельный фрейм описывается своим тегом FRAME. В примере выше показаны основные параметры, которые может иметь тег FRAME, а соответственно и сам фрейм. Это имя фрейма, по которому на него можно будет ссылаться и файл-источник, который будет загружен во фрейм. Т.е. если вы откроете в браузере наш index.html, то увидите, что окно браузера поделится на две части. Если будут найдены файлы-источники для фреймов, они будут загружены. Между фреймами вы можете увидеть разделительную линию. Можно "зацепить" ее мышью и переместить вверх или вниз, изменив размеры фреймов. Это похоже на изменение размера окна программы. Часто дизайн сайта не предполагает, что пользователь будет менять размеры фреймов. Дизайнер может дать указание браузеру о запрете изменения размеров того или иного фрейма. Для нужно указать параметр NORESIZE в соответствующем теге FRAME:
<FRAME NAME="menu" SRC="menu.html" NORESIZE> Можно управлять наличием полос прокрутки у фрейма. За это отвечает параметр SCROLLING, который может принимать значения: AUTO - полосы прокрутки отображаются при необходимости YES - полосы прокрутки отображаются всегда NO - полосы прокрутки не отображаются Наиболее часто применяется SCROLLING="NO", чтобы запретить полосы прокрутки у фрейма с меню, которые могут появиться, если пользователь уменьшит окно браузера.
<FRAME NAME="menu" SRC="menu.html" NORESIZE SCROLLING="NO"> У тега FRAME есть еще два параметра MARGINHEIGHT и MARGINWIDTH, которые определяют высоту и ширину границы фрейма. Обратите внимание, что граница это не рамка, это пространство отделяющее элемент, в данном случае фрейм, от других элементов. У многих начинающих вебдизайнеров (именно они особенно активно применяют фреймы) возникает вопрос о том, как можно убрать линию, разделяющую фреймы. Обычно визуально фреймы разделяются с помощью специально подготовленных фоновых изображений, поэтому разделительная линия оказывается лишней и только портит дизайн. В HTML 4.0 определен параметр FRAMEBORDER тега FRAME, который может принимать значения 1 или 0 (по умолчанию: 1). Чтобы убрать разделительную линию, нужно установить FRAMEBORDER="0" у всех фреймов, которые разделяет эта линия:
<FRAME NAME="menu" SRC="menu.html" NORESIZE SCROLLING="NO" FRAMEBORDER="0"> <FRAME NAME="content" SRC="news.html" FRAMEBORDER="0"> Некоторые браузеры не поддерживают фреймы (в основном это старые браузеры). Поэтому для пользователей таких браузеров нужно в тег FRAMESET вставлять тег NOFRAMES. Его содержимое будет отображено, если браузер не поддерживает фреймы. Обычно это выглядит так:
... <FRAMEST ...> ... <NOFRAMES> <p> Ваш браузер не поддерживает фреймы. Скачайте новую версию MSIE отсюда: <A HREF=...>...<A> </p> </NOFRAMES> </FRAMESET> Но лучше так не делать, потому что это не совсем красиво. Лучше в теге NOFRAMES привести ссылки на все (или основную часть) страницы вашего сайта, чтобы пользователь, чей браузер не поддерживает фреймы, тоже мог до них добраться без необходимости обновлять браузер. В выпуске 25 в рубрике ОКРУЖЕНИЕ были даны ссылки на браузер Lynx. Некоторые версии этого браузера не поддерживают фреймы. Следующий вопрос: как из одного фрейма обращаться к другому? В HTML обращаться к одному документу из другого можно посредством гиперссылок (мы изучали их в выпуске 10). Это делается с помощью тега <A> в котором указывается адрес документа на который мы хотим сослаться. Тег <A> имеет еще один параметр, который мы не рассмотрели в 10-м выпуске, но который будет полезен нам сейчас. Это параметр TARGET ("цель"). Значение этого параметра - имя фрейма или окна браузера, в которое будет загружен документ, если кликнуть по ссылке. В меню нашего сайта мы можем использовать накую строку:
<A HREF="news.html TARGET="content">Новости</A> Как помните, во фрейм-контейнере мы определили фрейм с именем "content". Файл news.html будет загружен в этот фрейм. Имеется также несколько зарезервированных имен, имеющих специальное значение. Это: _blank (знак подчеркивания обязателен) - новое окно _parent - родительское окно (фреймы могут быть воженными) _top - окно браузера (окно самого высокого (top) уровня) Можно также использовать произвольное имя. Если оно не определено, то будет создано новое окно браузера с этим именем. Наиболее частые применения зарезервированных имен: _blank - открытие документа с другого сайта в новом окне так, чтобы пользователь не ушел с вашего сайта (дешевый трюк, но иногда полезный) _parent - открутие другого фрейм-контейнера или страницы без фреймов (используется на сайте рассылки в ссылках ведущих из Archive browser) _top - избавление от фреймов Кто-то может создать фрейм, в который будет загружена страница с вашего сайта (без вашего на то согласия). Вы можете у всех ссылок установить TARGET=_top. Если по ним кликнуть, то страница будет загружена в окно браузера, а не во фрейм. Однако такой прием чейчас используется редко (или не используется совсем). Для избавления от нежелательных фреймов применяется скрипт на JavaScript, который определяет, загружена ли страница во фрейм и перезагружает ее в окно браузера, если так. Но не об этом сейчас речь... Если все ссылки или большая их часть должны иметь одинаковое значение TARGET, как в случае с меню, то можно использовать тег <BASE>, для задания глобального значения TARGET.
<BASE TARGET="content"> Теперь все ссылки, не имеющие параметра TARGET будут использовать TARGET тега BASE, который, кстати, лучше поместить в раздел HEAD документа. Вернемся к нашему сайту. Обновите файл index.html, создайте файлы остальные файлы для нашего примера и проверьте его работу в браузере.
*----------------------------------------*
<HTML>
<!-- index.html -->
<HEAD>
<TITLE>
Сайт с интересной статьей
</TITLE>
</HEAD>
<FRAMESET ROWS="5%,*">
<FRAME NAME="menu" SRC="menu.html" NORESIZE SCROLLING="NO" FRAMEBORDER="0">
<FRAME NAME="content" SRC="news.html" FRAMEBORDER="0">
<NOFRAMES>
<p>Ваш браузер не поддерживает фреймы.
<p>
<UL>Получить доступ к материалам сайта Вы можете воспользовавшись
следующими ссылками:
<LI><A HREF="news.html">Новости</A>
<LI><A HREF="article.html">Интересная статья</A>
<LI><A HREF="links.html">Ссылки по теме статьи</A>
<LI><A HREF="about.html">О сайте и его авторе</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>
Обязательно создайте все эти файлы и посмотрите, как все работает в браузере. Это полезно. Кроме того, это может Вам понравиться и натолкнуть на ряд отличных идей по применению фреймов. Давайте сделаем паузу. Вы поэкспериментируйте с нашим примером, а я пока посмотрю программу, чего у нас там по телеку сейчас.
Ок. Теперь настала пора вам узнать о недостатках присущих сайтам, использующим фреймы. Сами по себе такие сайты работают хорошо. Однако покажите мне сайт в Интернете, который был бы сам по себе. Кроме собственно сайта всегда есть ссылки, указывающие на него. Эти ссылки могут быть как на других сайтах, так и в закладках разных людей. Я думаю вам захочется, чтобы кто-то ссылался на какие-то страницы на вашем сайте. Теперь подумайте, как это можно сделать. Можно поставить ссылку на любой файл. Например, на index.html. В этом случае загрузится меню и страница новостей. Поставить ссылку на статью или на страницу ссылок не так просто. Можно сослаться на файл article.html, и он будет загружен. Но не будет меню! И посетитель не сможет перейти на другие страницы сайта. Это основная проблема сайтов с фреймами. Но даже если вы будете уверены, что никто не ссылается на страницы вашего сайта, кроме как на главную страницу, то все равно нет гарантии, что кто-то не попадет на одну из ваших страниц через поисковую машину. Проблема это, естественно, решаема. Можно использовать на страницах тапа article.html скрипт, который определив, что страница загружена не в фрейм будет загружать index.html. Также можно создать страницу article_frm.html которая будет точно такой же, как index.html, но загружать в нижний фрейм не страницу новостей, а статью. Теперь люой может ссылаться на статью, как на articles_frm.html (но это не решает проблемы с поисковиками). В этом случае пропадает одно из достоинств фреймов: необходимость редактировать один файл вместо целой кучи. Да, мы будем иметь одно меню, но много фрейм-контейнеров. Кстати, такой способ я использовал при организации архива рассылки. У меня есть файлы с выпусками, например, issue20.htm. Есть файл-меню issue_top.html и есть файлы-фреймконтейнеры, например, issue20_frm.html. Для каждого выпуска есть свой фрейм-контейнер. Однако у меня нет проблем с их созданием и редактированием, т.к. они генерируются MHTML скриптом. Таким же образом можно генерировать и меню на каждой странице, если не использовать фреймы (что также делается в случае сайта рассылки). Таким образом, подходим к главной мысли сегодняшнего разговора: использовать фреймы можно, но лишь тогда, когда это действительно нужно. Кстати, в связи с тем, что использование фреймов считается многими дизайнерами чем-то плохим, сайты, не имеющие фреймов, выглядят более профессионально сделанными. Итак это были обычные фреймы. Спасибо. Далее в нашей программе фреймы... плавающие! AKA встроенные. Встроенный фрейм размечается тегами <IFRAME> </IFRAME>. Между этими тегами должен быть текст (или HTML код) для браузеров, не поддерживающих плавающие фреймы. Сам плавающий фрейм определяется почти также, как и обычный, т.е. через параметры тега. IFRAME может иметь следующие параметры: * аналогичные параметрам тега FRAME: NAME - имя SRC - файл-источник, который будет загружен во фрейм SCROLLING - наличие полос прокрутки * аналогичные параметрам тега IMG: WIDTH - ширина HEIGHT - высота HSPACE - отступы слева и справа VSPACE - отступы сверху и снизу ALIGN - выравнивание Пример:
<IFRAME SRC=frame.html NAME="iframe" HEIGHT=200 WIDTH=30% HSPACE=40 VSPACE=10 ALIGN=right SCROLLING="YES">Ваш браузер не поддерживает плавающие фреймы и не может отобразить страницу <A HREF=frame.html TARGET="iframe">frame.html</A>. Кликните по ссылке, чтобы открыть страницу frame.html в новом окне.</IFRAME> В браузере это выглядит примерно так: Правда, я убрал параметр ALIGN, чтобы фрейм случайно не залез на текст. Я думаю, вы сами легко придумаете, как можно использовать плавающие фреймы. Сейчас, например, с помощью IFRAME реализованы некоторые баннеры. Такой "баннер" может представлять из себя все, что угодно, ведь во фрейм загружается страница, которая может содержать любой HTML код. А для браузеров не поддерживающих плавающие фреймы показывается обычная картинка. Можно на базе плавающих фреймов организовать систему обмена произвольной информацией с другими сайтами. Например, можно импортировать с других сайтов новости. А так как имеется возможность задать размеры фрейма, то он хорошо впишется в дизайн сайта. Вот и все, что я хотел рассказать вам о фреймах.
В свое время мы уже обсуждали тему доступа к ресурсам Сети через электронную почту. Однако мы лишь едва-едва коснулись этой темы,очень интересной для многих подписчиков. Теперь, друзья, у нас есть авторитетный источник информации по этому вопросу. Это рассылка "Интернет почтой. Старт для начинающих".
До следующего выпуска!
|
| http://subscribe.ru/
E-mail: ask@subscribe.ru |
Отписаться
Убрать рекламу |
| В избранное | ||
