фрейм

Урок 10 Тема: изображения-карты (image maps). Изображения-карты позволяют выделить отдельные области изображений и определить для каждой из них свое действие. Скажем, какие-то части картинки будут служить ссылками на другие страницы, после клика по другим областям рисунка будет загружен и проигран музыкальный фрагмент, или выполнен JavaScript. Ниже будет рассмотрен пример. Существует два типа изображений-карт: клиентские (client-side) - когда пользователь кликает по рисунку, браузер сам интерпретирует координаты клика. Он выбирает ссылку, определенную для данной области, и переходит по ней (либо выполняет заданное действие); серверные (server-side) - координаты клика передаются для интерпретации на сервер и уже он делает соответствующие действия (например, возвращает браузеру URL для перехода). Первый тип проще и доступнее, поэтому далее рассматривать будем только его. Для создания изображения-карты используются элементы и . Элемент MAP (так и переводится - "карта") должен обязательно иметь атрибут NAME. Это позволяет указать браузеру, к какому именно рисунку на странице относится данная карта. Элемент AREA имеет следующие атрибуты: SHAPE - описывает форму выделяемой области, возможные значения: RECT - прямоугольник; CIRCLE - круг; POLY - многоугольник; DEFAULT - определяет всю область. COORDS - координаты, определяющие размеры и положение области на изображении. Количество и порядок значений зависит от значения атрибута SHAPE: RECT: - левый-X, верхний-Y, правый-X, нижний-Y (т.е. сначала координаты левого верхнего угла, затем правого нижнего); CIRCLE: - центр-X, центр-Y, радиус (т.е. горизонтальная и вертикальная координаты центра круга и радиус); POLY: - X1, Y1, X2, Y2, ..., Xn, Yn (просто перечисляются координаты всех вершин многоугольника). NOHREF - этот атрибут определяет, что данной области не соответствует никакая ссылка. Где это может пригодиться? Ну, например, если вы хотите сделать ссылку не в виде круга, а в виде кольца (подробности в примере ниже). ALT - альтернативный текст для выделенной области, используется невизуальными браузерами. TITLE - название выделенной области, выводится в виде подсказки, всплывающей при наведении курсора на область рисунка. TARGET - значение этого атрибута ("_top", "_blank", "_self" или "_parent") определяет, в каком окне будет открыт документ (подробнее в Уроке про фреймы). Если описываемые области пересекаются (накладываются друг на друга), то приоритет имеет область, описанная первой. Аттрибут USEMAP используется для того, чтобы соотнести какое-то изображение с определенной картой. Он может использоваться с элементами IMG (чаще всего!), OBJECT и INPUT. Теперь обещанный пример: Контуры ссылок точно повторяют контуры рисунков. В данном примере при клике на ссылку будет лишь появляться сообщение "Нажата ссылка...", чтобы зря не гонять вас по страницам и не отнимать драгоценное время! Рассмотрим пример подробнее: Пример изображения-карты

У элемента IMG указан атрибут USEMAP со значением "#primer". И далее следует карта (MAP) с именем "primer". Дело в том, что таких рисунков на странице может быть несколько, и соответственно несколько карт к ним. Более того, одна карта может подходить к нескольким рисункам (например, внизу и вверху страницы у вас размещены рисунки с навигацией по сайту). Чтобы браузер знал, какому рисунку какая карта соответствует, необходимо указывать имена. Как сделано кольцо? Здесь две области в виде круга накладываются друг на друга. Первая область без ссылки (NOHREF) была описана первой, а уже потом вторая в виде круга большего диаметра. Ранее мы упоминали, что при наложении двух и более областей приоритет имеет область, описанная в тексте первой. Вот потому-то центральная часть круга и не имеет ссылки! Об использовании атрибута SHAPE со значением "default". Если в данном примере после всех ссылок добавить, например, такую строку: то весь оставшийся рисунок (в данном случае фон) станет ссылкой. Урок 11 Тема: звук на страничке. Думаю, вам уже попадались странички, после загрузки которых начинала звучать музыка. Честно признаюсь, особого восторга от них я не испытываю. Но рассмотреть эту возможность надо. Самый простой способ предложить посетителю послушать музыку, это сделать простую ссылку на звуковой файл. Вот так: ДДТ, "Осень" Посетитель вашей страницы, увидев такую ссылку - ДДТ, "Осень", сам решит, хочет ли он это слушать и стоит ли по ней кликать. После клика по такой ссылке начнется загрузка файла, который затем можно прослушать. Чаще используют тег

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

Как всегда, тут не все так безоблачно, как хотелось бы. По своей давней традиции создатели Netscape и Explorer не договорились между собой, и потому в разных браузерах эта панель выглядит и, самое обидное, ведет себя по разному. Элемент

может иметь следующие атрибуты: WIDTH - ширина панели в пикселах (можно и в процентах); HEIGHT - высота панели в пикселах (или процентах); ALIGN - расположение панели относительно текста, возможные значения LEFT, RIGHT, CENTER; HIDDEN - позволяет скрыть панель, значения атрибута: TRUE - панель скрыта, FALSE - панель видима (значение по умолчанию); AUTOSTART - значение TRUE - проигрыватель стартует автоматически, FALSE - ждет нажатия на кнопку "воспроизведение"; LOOP - цикл, т.е. при значении TRUE мелодия будет проигрываться по кругу, а при значении FALSE - только один раз. Если значением будет число, то Netscape проиграет мелодию указанное количество раз, для Explorer'а числовое значение равносильно значению TRUE. Пример использования перечисленных выше атрибутов:

В данном примере панель управления будет скрыта, воспроизведение звукового файла начинается автоматически, повторяться будет бесконечно. Думаю, посетитель вашего сайта достойно оценит такое решение! Некоторые браузеры поддерживают еще атрибут CONTROLS ("органы управления" - англ.), который позволяет сконфигурировать панель управления. Он может иметь следующие значения: CONSOLE - панель обычного размера; SMALLCONSOLE - панель меньшего размера; PLAYBUTTON - вместо всей панели только кнопка "Воспроизведение"; PAUSEBUTTON - вместо всей панели только кнопка "Пауза"; STOPBUTTON - вместо всей панели только кнопка "Стоп"; VOLUMELEVER - вместо всей панели только регулятор громкости. Элемент

поддерживает звуковые файлы с расширениями MID, WAV, AIFF, AU, видеофайлы AVI. Элемент задает фоновый звук для страницы, т.е. звуковой фрагмент, который будет звучать сразу после загрузки страницы. Браузером Netscape не поддерживается. Может иметь атрибут LOOP, определяющий количество повторов фрагмента. Пример использования: Урок 12 Тема: фреймы. Объяснить, что такое фреймы и для чего они нужны, лучше всего на примере. Страница, которую вы сейчас читаете, состоит из двух фреймов: левого, в нем перечислены все уроки, и правого с собственно самими уроками. Вы можете прокручивать содержимое правого фрейма, в то время как левый остается неподвижным. Это позволяет вам в любой момент легко перейти на любой урок, не разыскивая ссылку внизу или вверху страницы. Словом, разумное использование фреймов позволяет существенно упростить навигацию по сайту и улучшить его дизайн. Суть фреймов в принципе проста: страница делится на несколько окон, в каждое из которых загружается своя страничка (или картинка), со своим собственным адресом. К примеру, в левом окне - "vasja.html", а в правом - "pupkin.html" (которая физически может находиться где-нибудь на другом сервере). Как и любые страницы в Интернете, они могут ссылаться на другие страницы и друг на друга. Кроме этих двух страниц вы должны написать третью, в которой и будут определяться размеры и свойства этих окон. Для этого используются только два тега - и . Чтобы их объяснить, рассмотрим пример: Во-первых, создадим два файла - vasja.html и pupkin.html: фрейм Меня зовут Вася!

Сайт создан в системе uCoz

фрейм А фамилия моя Пупкин. Это звучит круто!

Сайт создан в системе uCoz

Теперь делаем третий файл, назовем его index.html (назвать можно и по другому): Страница с фреймами! Вот его-то мы и рассмотрим подробнее. Во-первых, в нем отсутствуют теги и

Сайт создан в системе uCoz

. Можно сказать, их роль выполняет тег , хотя это не совсем верно. Тег (переводится как "набор фреймов") с атрибутом cols="50%,50%" указывает браузеру, что страница должна быть поделена на два окна (фрейма), каждый шириной в 50% от ширины страницы. Тег определяет содержимое и свойства каждого фрейма (заметьте, что он не имеет закрывающего тега). В данном случае указано, что содержимым первого фрейма является файл vasja.html, второго - файл pupkin.html (фреймы считаются слева направо и сверху вниз. Здесь - этот пример в действии (откроется в новом окне). Все просто! Еще несколько примеров: 20% 30% 50% Три фрейма разной ширины. 25% 75% Фреймы можно расположить рядами так же легко, как и столбцами. Просто меняем атрибут cols на rows: Значения атрибутов cols и rows могут выражаться не только в процентах. cols="150,*,100" - страница разделена на три столбца, где ширина левого 150 пикселов, правого - 100 пикселов, а средний столбец - это все оставшееся между ними место (знак *). Если вы будете размеры фреймов устанавливать в пикселах, то желательно ширину (или высоту) одного из них определить значком *. Можно, например, написать cols="150,550,100", и все будет выглядеть отлично на вашем мониторе с разрешением 600*800. Но стоит только изменить разрешение, и картина полностью изменится. Потому-то и рекомендуется использовать "звездочку". 200 * 100 Пример: 150 * 2* Можно устанавливать пропорции для окон. В этом примере левый фрейм будет шириной в 150 пикселов, а остальную часть страницы поделят между собой 2-й и 3-й фреймы, причем третий фрейм будет в 2 раза шире первого. * 15% 3* То же, но для рядов: 2-й фрейм занимает 15% от высоты окна, а 1-й и 3-й - все остальное в пропорции 1:3. Фреймы могут быть вложенными друг в друга. Это позволяет создавать более сложные конструкции страниц. Рассмотрим несколько примеров: 40% 60% * В этом примере окно разбито на два фрейма: верхний занимает 25% высоты, нижний - все остальное. В свою очередь верхний фрейм разбит еще на два, где левый фрейм занимает 40% от ширины окна, а правый - 60 процентов. Еще один пример. Предположим, мы хотим сделать такую страницу: окно, состоящее из левого фрейма шириной 200 пикселов, содержащего меню, и правого с каким-то текстом. Причем в левом фрейме вверху должен быть логотип высотой в 150 пикселов, размещенный в отдельном фрейме, а в правом внизу - баннер, который при скроллинге правого окна все время будет оставаться на месте. Должно получиться следующее: Logo Text Menu Banner Рассмотрим атрибуты тегов и . Первый из них, - парный тег, т.е. он обязательно должен иметь закрывающий тег. Может включать следующие атрибуты: cols и rows - применение и возможные значения этих атрибутов были рассмотрены выше. Внимание! Не рекомендуется одновременное использование атрибутов cols и rows, т.е. в некоторых браузерах конструкция может привести к непредсказуемым результатам; border="x" - толщина рамок фреймов в пикселах; frameborder="no|yes" или "0|1" - определяет отсутствие (no или 0) или наличие (yes или 1) рамок в определенном фреймсете. Например, таким образом в предыдущем примере можно было бы убрать только рамки между баннером и текстом и между логотипом и меню, а между левым и правым фреймами оставить; bordercolor="#hhhhhh" - цвет рамок. Значением может быть шестнадцатиричное число или зарезервированное слово (red, blue, teal, olive и т.д.); Тег может включать следующие атрибуты: src="имя" - указывает браузеру, что и откуда надо загружать в данный фрейм; name="имя" - присваивает имя фрейму. Позволяет управлять данным фреймом из других. Например, клик по ссылке в одном фрейме будет вызывать загрузку страницы в другом фрейме (подробнее в следующем абзаце); marginwidth="x" - величина отступа содержимого фрейма (текста, графики и т.п.) от границ по горизонтали. Выражается в пикселах, минимальное значение 1; marginheight="y" - величина отступа по вертикали. Минимальное значение также 1; scrolling="yes" - определяет наличие полос прокрутки у данного фрейма. Возможные значения атрибута: yes - полосы прокрутки присутствуют обязательно; no - полосы прокрутки отсутствуют всегда - независимо от того, вмещается ли документ в фрейм целиком или нет; auto - автоматический режим (значение по умолчанию): полосы прокрутки появляются при необходимости, т.е. если документ не вмещается в фрейм; noresize - наличие этого атрибута запрещает изменение размеров фрейма пользователем (обычно любую границу фрейма можно с легкостью переместить мышкой). Как указывалось выше, атрибут name тега позволяет присвоить каждому фрейму свое имя, что позволяет управлять содержимым одного фрейма из другого (т.е. как в этих уроках - вы кликаете по ссылке в левом фрейме, а меняется содержимое правого). Как это сделать, рассмотрим на примере: Меню Урок 1 В левом фрейме у нас меню, а в правом - урок первый: Правому фрейму мы присвоили имя "content" (можно любое другое). Теперь создадим файл menu.html, это будет меню для левого фрейма: menu Урок 1
Урок 2
Урок 3
Урок 4

Сайт создан в системе uCoz

Теперь клик по ссылке "Урок 2" вызовет загрузку страницы "urok2.html" в фрейме с именем "content" (т.е. в правом фрейме). При отсутствии атрибута target (перводится с английского как "цель") загрузка произошла бы в левом фрейме, где находится сама ссылка. Этот атрибут в данном примере можно указать только один раз - как атрибут тега , т.е. все ссылки по умолчанию будут загружаться в фрейме с именем "content". В таком случае текст будет выглядеть так: menu Урок 1
Урок 2
Урок 3
Урок 4

Сайт создан в системе uCoz

Кроме имени фрейма значением атрибута target может быть одно из следующих зарезервированных слов: _blank - браузер должен открыть новое окно и загрузить в него документ (на который была ссылка) - обычно используется для того, чтобы посетитель не уходил по ссылке с вашего сайта; _top - браузер должен загрузить документ в этом же окне, предварительно очистив его от всех фреймов - атрибут с этим значением надо указывать обязательно, если вы делаете ссылку на другой сайт из фрейма. В противном случае этот сайт будет загружен в фрейме; _self - документ загружается в том же фрейме, где находится сама ссылка. Может потребоваться в случае, если в тексте есть строка ; _parent - документ загружается в родительский фреймсет текущего фрейма. Все вышеперечисленные значения должны начинаться с символа подчеркивания и набираться только прописными буквами. Используя на своем сайте фреймы, нельзя забывать о том, что некоторые браузеры могут не поддерживать фреймы - старые браузеры, речевые и др. Специально для них существует тег noframes, в котором можно сделать "нефреймовую" версию сайта, или хотя бы просто перечислить ссылки на страницы сайта. Пример: Уроки HTML <body> <p>Эта страница использует фреймы. Поскольку Ваш браузер не может просматривать такие страницы, воспользуйтесь следующими ссылками: <p><a href="urok1.html">Урок 1</a> <p><a href="urok2.html">Урок 2</a> <p><a href="urok3.html">Урок 3</a> <p><a href="urok4.html">Урок 4</a> <div align="center">Сайт создан в системе <a href="http://www.ucoz.ru/" title="Создать сайт бесплатно">uCoz</a><br /></div> </body> В результате браузер, поддерживающий просмотр фреймов, отобразит на эране только фреймы с их содержимым и проигнорирует все, что находится между и . Остальные браузеры не обратят никакого внимания на содержимое контейнера , но воспоизведут содержимое . Еще одна причина, по которой следует обращать внимание на тег <noframes> - далеко не все поисковые роботы понимают фреймы. Поэтому без <noframes> ваша страница рискует остаться непроиндексированной. Придерживайтесь следующего порядка размещения: сперва контейнер <frameset>, а потом - <noframes> (т.е. как в примере). В противном случае возможна ошибка Netscap'а. Существует еще одна разновидность фреймов - встроенный фрейм (inline frame). Он может быть вставлен непосредственно в текст страницы и выглядит следующим образом: Для встраивания такого фрейма используется тег <iframe>. Наличие закрывающего тега обязательно. Между ними можно вставлять любой текст для браузеров, не поддерживающих фреймы. Аттрибуты: src="filename.html" - указывает адрес содержимого фрейма; name="name" - присвает имя фрейму; width="x" - ширина фрейма; height="y" - высота фрейма; scrolling="yes|no|auto" - наличие полос прокрутки; frameborder="1|0|yes|no" - наличие (yes или 1) или отсутствие (no или 0) рамки вокруг фрейма; marginwidth="x" - величина отступа содержимого фрейма от границ по горизонтали; marginheight="y" - величина отступа по вертикали. Для примера выше был использован следующий код: <iframe src="examples/iframe.htm" width="300" height="70" scrolling="auto" frameborder="1"> Ваш браузер не поддерживает фреймы. Здесь должен быть размещен пример встроенного фрейма. </iframe> Размеры такого фрейма не могут изменяться пользователем. Поэтому атрибут noresize не используется. И в заключение совет. Если ваш сайт будет построен с использованием фреймов, то часто посетители будут к вам приходить с поисковиков, и чаще всего они будут попадать на одну из внутренних страниц сайта. Естественно, сайт они увидят совсем не в том виде, как это задумывалось вами. Чтобы этого не происходило, вставьте в текст страниц такой код: <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> Или такой: <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> Первый скрипт выводит предложение перезагрузить страницу, если она была загружена не в фрейме. Второй делает то же самое, но без предупреждения.