Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Учебник по Html для чайников. Дополнительные.
Ступенька 31-ая.
Наверное, пройдясь по ступенькам, вы уже поняли, что некоторые тэги и некоторые атрибуты тэгов поддерживаются не всеми броузерами. Не будем искать причин почему (да, и откуда мне лично знать, что толкает производителей броузеров придумывать свои специфические тэги и атрибуты, о которых вспецификации (официальной документации по HTML) нет ни слова, а также мне неведомо, почему броузеры не поддерживают некоторые тэги и атрибуты, которые по идее должны поддерживать, т.к. в той же спецификацииэти тэги и атрибуты упомянуты), лучше поговорим о некоторых специфических атрибутах для тега BODY, которые вам когда-нибудь, да пригодятся.
Многие, когда верстают сайт, сталкиваются со следующей проблемой: поля по краям документа, которые, они не знают, как убрать. Что я имею ввиду – посмотрите пример, и вы увидите те самые поля, которые так нам часто мешают жить: посмотрите пример.
К счастью, если нам нужно мы можем управлять ими: мы можем увеличить их, если они нам нужны, а если они нам не нужны, то мы можем убрать их. Рассмотрим вариант, когда нам нужно убрать поля документа:
<Body text="#000000" bgcolor="ffffff" topmargin="0" leftmargin="0">
Topmargin - определяет ширину верхнего поля документа, leftmargin - определяет ширину левого поля документа. Чтобы убрать поля мы приравняли эти параметры к нулю. Можете посмотреть, что у нас получилось.
Вы можете удивиться, в чем же специфичность этих параметров. Дело в том, что topmargin и leftmargin поддерживаются только Internet Explorer.
Но не стоит расстраиваться, Нетскейп (Netscape Navigator) не окажется за бортом, т.к. для этого броузера есть свои аналогичные специфические атрибуты для тега Body - marginheight и marginwidth. Marginheight - аналогичен topmargin, а marginwidth - аналогичен leftmargin.
Теперь, чтобы убрать отступы и для NN, и для IE, надо просто прописать все эти атрибуты вместе для тэга BODY:
<Body text="#000000" bgcolor="ffffff" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
Таким образом, и в IE все будет хорошо, и NN будет не обижен, и многие другие броузеры тоже :).
Но не торопитесь перебежать на следующую ступеньку.
Topmargin и leftmargin в Интернет Иксплорер убирает только верхнее и левое поля документа. Чтобы убрать правое и нижнее надо ввести еще атрибуты rightmargin и bottommargin для тэга Body.
<Body text="#000000" bgcolor="ffffff" rightmargin="0" bottommargin="0" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
Итак, мы узнали, как убирать поля в IE и NN. Но, что же с другими броузерами?
|
|
|
|
<style type="text/css"><!-- |
Вставьте этот загадочный код между тегами <head></head>, и проблему с полями можно считать решенной.
Сразу предвижу вопросы относительно приведенного мной загадочного кода. Что это такое? Это CSS – таблицы каскадных стилей, дополнительное средство, при помощи которого вы можете управлять содержимым ваших страниц, CSS, по сути, дополняет HTML, но при этом это отличный от html стандарт. Как вводить стили в документ и о их возможностях мы поговорим позже, в уроках, в которых мы рассмотрим и другие средства, которые помогают сделать наш неуклюжий html-документ динамичным.
Учебник по Html для чайников. Дополнительные.
Ступенька 32-ая.
В предыдущей версии учебника тему списки я рассматривала практически в самом начале нашего обучения. В этой версии некоторые главы поменялись местами, и в итоге я решила, что логичнее и правильнее рассказать вам о списках, когда вы немного уже начнете понимать специфику HTML.
Итак, многие тэги не только отвечают за то, как будет выглядеть наша страница, они определяют структуру документа. Вспомним о заголовках, они не просто выделяют наш текст полужирным шрифтом, информация из заголовка может использоваться броузерами пользователей, например, для автоматического построения оглавления документа. Т.е. получается, что у заголовков более широкое назначение, чем просто визуально выделять фрагмент текста.
Тоже самое и со списками, они также определяют структуру документа. Визуально списки отображаются следующим образом:
Это называется неупорядоченный список. Кроме неупорядоченных списков существуют еще и упорядоченные списки:
Различные типы списков можно употреблять одновременно друг с другом. Неупорядоченные списки вводятся тэгом <ul>:
|
|
|
|
<ul> |
Чтобы ввести элементы списка (текст один, текст другой…), нам нужно ввести в нашу конструкцию тэг <li> (не требует закрывающего тэга):
|
|
|
|
<ul> |
В итоге получим:
У тэга <li> есть атрибут type, он отвечает за стиль элемента списка, визуально это выглядит так:
В случае (1) - <li type="disk">,
в случае (2) - <li type="circle">,
в случае (3) - <li type="square">.
Атрибут type может вводиться не только для каждого элемента списка <li>, но и для всего списка в целом:
|
|
|
|
<ul type="square"> |
Очень часто тэг <ul></ul>, которым вводятся неупорядоченные списки, используется кодерами немного нестандартно, для создания отступа (табуляции). Если вы пользовались текстовыми редакторами (допустим Вордом), то вы знаете, что такое табуляция (это когда вы жмете на кнопочку Tab и весь текст сдвигается, допустим, вправо), тоже самое мы можем сделать средствами html:
<ul>Ваш текст</ul>
В этом случае мы не использовали тэг <li>, и не ввели элементы списка. Как я уже говорила, такое применение тэга <ul></ul> не стандартно, а значит нежелательно, т.к. не предусмотрено спецификацией, однако, если вам это нужно, то я считаю, что, в данном случае, не страшно нестандартно воспользоваться тэгом <ul>, ведь визуально это отобразиться всеми броузерами, а также избавит вас от необходимости вводить лишние таблицы в ваш документ, чтобы достичь того же эффекта стандартными средствами. Чтобы отступ (табуляция) был больше, можно вложить тэг <ul> в самого себя:
<ul><ul>Два отступа</ul></ul>
<ul><ul><ul>Три отступа</ul></ul></ul>
На этом с неупорядоченными списками мы закончили, теперь поговорим об упорядоченных списках, но уже на следующей ступеньке.
Учебник по Html для чайников. Дополнительные.
Ступенька 33-ая.
Упорядоченные списки вводятся тэгом <ol>:
|
|
|
|
<ol> |
Как и в случае с неупорядоченными списками, нам нужно ввести в нашу конструкцию тэг <li>:
|
|
|
|
<ol> |
В итоге получим:
Для упорядоченных списков также может употребляться атрибут type. Для упорядоченных списков возможны следующие значение атрибута type:
|
1 |
арабские цифры |
1, 2, 3, ... |
|
a |
буквы нижнего регистра |
a, b, c, ... |
|
A |
буквы верхнего регистра |
A, B, C, ... |
|
i |
римские цифры в нижнем регистре |
i, ii, iii, ... |
|
I |
римские цифры в верхнем регистре |
I, II, III, ... |
Как вы можете понять из этой таблички – регистр, в котором вы пропишите значение атрибута type, учитывается.
|
|
|
|
<ol type="I"> |
Получаем:
С упорядоченными списками на этом наше знакомство закончилось. Кроме упорядоченных и неупорядоченных списков еще существуют и списки определений. Но о них мы говорить не будем. Почему? Потому что вашим заданием после того, как мы прошли несколько разделов, будет самостоятельное знакомство с этим типом списков посредством спецификации HTML, которая должна стать вашим другом, а также быть сохранена на вашем компьютере. Поверьте, вам порой придется обращаться к этому официальному документу за уточнениями, к тому же я ставлю целью ваше ознакомление с HTML, и некоторыми специфическими моментами, а не пересказ спецификации.
Кстати, спецификация это официальный документ по стандарту HTML от разработчиков стандарта. Существует такая организация, как W3C – World Wide Web Consortium, которая разрабатывает различные стандарты для веб, чтобы вы могли видеть странички в своих броузерах, чтобы вы могли передавать друг другу информацию и многая прочая. Организация W3C существует уже очень давно, и будет существовать еще долго, в конце концов, вы же не думали, что интернет и интернет технологии сами когда-то упали к нам с неба и развиваются до сих пор сами по себе, это все творение голов и рук людских, ничего сверхъестественного :)
Учебник по Html для чайников. Дополнительные.
Ступенька 34-ая.
Эту главу мы с вами посвятим специфическом тэгу, речь пойдет о тэге Marquee - бегущей строке (текста).
Тэг Marquee поддерживается только Internet Explorer, но многих людей, начинающих осваивать сайтостроение, это не останавливает, и они с удовольствием его употребляют. Т.к. это болезнь массовая, то мне придется рассказать подробно о тэге Marquee (те, у кого броузер не IE, не будут в этой главе оставлены за бортом, для них я бросила спасательный круг в конце главы).
|
|
|
|
<marquee height="10" width="270" bgcolor="#99CCFF"> |
Как видите, все просто. Текст, который мы помещаем в тэге <marquee></marquee>, становится бегущей строкой.
Все атрибуты тэга <marquee></marquee> вам уже знакомы: bgcolor - цвет фона бегущей строки, height - высота строки, width - ширина строки.
Также для бегущей строки можно задать и другие знакомые вам атрибуты - hspace, vspace и align (тот, кто их не помнит, срочно возвращается к Простейшим ступенькам и освежает свою память). В наш пример я их вводить не буду, вы можете сами.
|
|
|
|
<marquee height="10" width="270" loop="2"> |
Атрибут loop задает сколько раз прокрутится строка, в нашем примере указано loop="2" - 2 раза, а это значит, что к тому моменту, когда вы дойдете до этого примера, строка может уже не бежать, поэтому обновите страницу и убедитесь в правоте моих слов - строка пробежит только два раза.
Далее будут лишь описания атрибутов без наглядных примеров, подставляйте их сами в код, и смотрите, что будет получаться.
Direction - задает направление движения бегущей строки - direction="left" (right, up, down) - движение влево (вправо, вверх, вниз).
Behavior - поведение строки - behavior="scroll" (slide, alternate). Scroll - обычная прокрутка (можно не прописывать, оно так и есть по умолчанию). Slide - прокрутка с остановкой, строка пробегает до края и останавливается. Если одновременно с behavor="slide" употребить параметр loop, то строка прокрутится установленное количество раз и остановится у края. Alternate - строка будет двигаться от края к краю.
Scrollamount - скорость движения строки, scrollamount="1". Может принимать значения от 1 до 10. 1 - самое медленное движение, 10 - самое быстрое.
Уф! Все :)
Теперь, когда мы разобрались со всеми параметрами тэга Marquee, я немного позанудничаю, призывая читателя все же быть разумным и не особо злоупотреблять этим тэгом. Вернитесь хотя бы к первому примеру. Посмотрите на бегущую строку задумчиво и признайтесь, что она мешала вам сосредоточиться на чтении и ознакомиться с этой главой, а также смотрится она не очень, непрофессионально, любительски. Уже эти два аргумента должны заставить вас задуматься, нужны ли бегущие строки вам на вашем сайте. Кроме того, текст самой бегущей строки не удобно читать, что опять же служит аргументом против нее. Итак, это не красиво и не удобно, а значит не особо и нужно, только если вы хотите побаловаться в пределах вашей домашней страницы ради интереса.
Итак, что делать, если вы не признаете Internet Explorer, или хотите, чтобы пользователи других броузеров увидели вашу бегущую строку. Помните, в предыдущих главах я упоминала CSS – таблицы каскадных стилей, дополнительное средство, при помощи которого вы можете управлять содержимым ваших страниц.
Кроме таблиц каскадных стилей мы можем вводить в наш html-документ и скрипты, это опять же замечательное средство, чтобы делать ваш неуклюжий HTML-документ динамичным. О скриптах, и как их вводить в наш документ, мы опять же поговорим попозже.
Но почему я завела о них разговор? Дело в том, что при помощи скриптов мы можем ввести бегущую строку в наш документ, это будет правильнее, и это увидят пользователи не только Internet Explorer, но и других броузеров.
Коды скриптов с бегущей строкой в можете посмотреть здесь и здесь, чтобы потом ввести бегущую строку на ваш сайт, если вам этого очень хочется.
Учебник по Html для чайников. Фреймы.
Ступенька 35-ая.
Вот мы добрались и до фреймов (frames). Что же это такое и чем они замечательны? Фреймы позволяют нам открыть в окне броузера - не один, а одновременно несколько документов (допустим, документ menu.html, который содержит меню, logo.html - документ, который содержит логотип, шапку страницы, и content.html - документ с непосредственным содержанием нашего сайта).
Это можно использовать по-разному: некоторые веб-мастера при помощи фреймов воплощают свои сумасшедшие задумки и повергают в восхищение публику, некоторые используют фреймы, потому что их сайту просто не возможно без фреймов обойтись, а некоторые используют фреймы, потому что им так удобнее - это все хорошо, главное, чтобы оно не смотрелось ужасно и некрасиво, и было удобно для вашего посетителя.
Вы могли слышать на форумах или где-то еще о том, что фреймы это плохо. Отсюда у вас вполне закономерно может возникнуть ко мне вопрос: "Фреймы это хорошо, или все же плохо?"
Споры относительно того, как относиться к фреймам, как мне кажется, никогда не прекратятся. Наверное, это связано с тем, что помимо достоинств, фреймы имеют также и серьезные недостатки, и поэтому имеет смысл изучить все аспекты применения фреймов, а уж затем принимать какую-либо позицию по отношению к ним.
Я не буду разглагольствовать о всех проблемах, связанных с фреймами, и их решением, я лишь традиционно напомню вам о правой колонке и ценных ссылках в ней, которые подробнее расскажут вам о плюсах и минусах фреймов.
Что же касается моей позиции - то я всегда считала, что фреймы - это хорошо, очень хорошо, если их использование оправдано, если они смотрятся красиво и эстетично, и использованы они с умом. С умом, это значит, что, когда мы вводим фреймы в наш документ, мы не ограничиваемся средствами HTML, мы также вводим скрипты для корректной работы фреймов. Но об этом все в правой колонке, наша же с вами задача научиться создавать фреймы при помощи стандартных средств, не более того.
Итак, для того, чтобы наш любимый броузер показал одновременно несколько документов, надо создать специальный фрейм-документ, в котором мы укажем, сколько документов откроется в одном несчастном окне броузера, сколько места будет занимать каждый, каким образом они будут располагаться относительно друг друга (не все так просто, как хотелось бы:).
Т.к. первый документ на сайте, который показывается посетителю это index.html (или вроде него), то мы его и будем мучить, пусть он будет фрейм-документом. Создадим документ index.html:
|
|
|
|
<html> |
На первый взгляд - вполне стандартное начало, только вот... опа! нет тэга body! И это не ошибка, фрейм-документ не содержит тэга body, такого обязательного в других случаях.
Что ж, не будем грустить о тэге body, и найдем ему вполне достойного заместителя:
|
|
|
|
<html> |
Здравствуйте Frameset, какое красивое имя, говорят, что вы решили изменить кое-что в жизни нашего сайта и ввести фреймы :), очень приятно, мы всегда рады новым и практичным решениям.
Теперь надо найти frameset достойных помощников и задать ему некоторые жизненно необходимые атрибуты, но это на следующей ступеньке.
Учебник по Html для чайников. Фреймы.
Ступенька 36-ая.
Прежде, чем что-нибудь предпринимать дальше, надо решить по какому принципу мы будем размещать наши документы, и вообще, какие документы мы будем показывать посетителю одновременно. Предлагаю классический вариант - logo.html, menu.html, content.html - о котором я упоминала в предыдущей главе.
Расположить мы можем это по-разному, вот для примера четыре варианта из множества возможных:
При помощи фреймов мы делим броузер на несколько окон, заданного размера, в которых помещаем независимые друг от друга документы. Это нам позволит оставлять некоторую информацию видимой, в то время как другая информация прокручивается или заменяется (так, например, мы будем постоянно видеть в одном окне документ с меню, в другом – документ с нашим логотипом, а в третьем окне у нас будут при нажатии на ссылки в документе меню загружаться разные документы с текстом, картинками и прочим).
Т.к. документы, которые мы размещаем во фреймах независимые, то соответственно каждый документ может содержать в себе что угодно (и текст, и картинки, и таблицы). Почему я особо оговариваю этот момент: некоторые неразумные читатели почему-то воображают, что фреймы – это альтернатива таблицам. ЭТО НЕ ВЕРНО!
Итак, сначала создадим такой вариант (предварительно не забудьте создать обычные *.html документы с логотипом, меню и основным содержанием):
|
|
|
|
<html> |
Давайте разберемся, что и для чего. При помощи атрибута rows тэга <frameset> мы указали, что наши фреймы будут расположены горизонтально (рядами). В значении атрибута rows мы прописали высоту каждого фрейма (rows="100,*,150"). Высота первого фрейма - 100 пикселов, третьего - 150, а второй занимает все оставшееся пространство по высоте (это мы указали значком *), - полагаю, здесь должно быть все ясно.
Тэг frame сообщает броузеру какие же документы у нас будут загружены во фреймах. В нашем случае: в первом фрейме будет загружен - logo.html (документ с логотипом), второй фрейм займет документ с непосредственным содержанием (content.html), а третий - меню. Если вы хотите, чтобы меню было во втором ряду (фрейме), то вам следует поменять его местами с content.html
|
|
|
|
<html> |
Посмотрите что у нас получилось. Опаньки... Поменять-то мы их местами - поменяли, а вот теперь надо задать новые значения атрибуту rows, чтобы меню у нас снова занимало только 150 пикселов по высоте, а содержание - все остальное:
|
|
|
|
<html> |
Вот теперь другое дело:) Все-таки от перемены мест слагаемых кое-что меняется...
Учебник по Html для чайников. Фреймы.
Ступенька 37-ая.
Эту главу мы начнем с небольшого фокуса: замените атрибут rows, на cols:
|
|
|
|
<html> |
Ну-ка, посмотрите наш пример. Ловкость рук и никакого мошенства :)
Итак, атрибут cols говорит нашему броузеру, что наши фреймы будут расположены вертикально (столбцами). Т.е. значения атрибута cols (cols="100,150,*") задают уже не высоту, а ширину каждого фрейма. Ширина первого фрейма – 100 пикселов, ширина второго – 150, а третий фрейм занимает по ширине все оставшееся пространство.
Кстати, мы получили еще один из четырех вариантов, которые собирались сделать:
Итак, подведем итоги. Мы можем расположить наши фреймы горизонтально (рядами) или вертикально (колонками) относительно друг друга, делаем мы это с помощью параметров тэга <frameset> Cols и Rows. Другого способа деления не существует. Одновременно эти параметры использовать нельзя.
При помощи rows мы разбиваем располагаем фреймы горизонтально (рядами) и задаем какую высоту будет иметь каждый фрейм, при помощи cols располагаем фреймы вертикально (столбцами) и задаем какую ширину будет иметь каждый фрейм.
Кстати, ширина и высота могут задаваться не только в пикселях, но и в процентах от общей ширины (высоты) окна:
<frameset cols="10%,15%,75%">
Помните, что в сумме это все должно равняться 100%. А то бывают же умники...
Учебник по Html для чайников. Фреймы.
Ступенька 38-ая.
В этой главе мы разберемся, как расположить документы в окне следующим образом
или
В предыдущей главе я говорила, что не можем использовать атрибуты rows и cols одновременно применительно к одному тэгу <frameset>. Тогда как же расположить наши документы в окне так, как указано на рисунках? Просто, ввести в наш фрейм документ еще одного господина <frameset>, но обо всем по порядку.
Начнем с первого рисунка:
Каким образом мы будем делить окно? - На ряды. В первом ряду у нас будет располагаться logo.html, а второй ряд мы поделим на два столбца, в которых будут располагаться документы menu.html и content.html.
|
|
|
|
<html> |
Принцип построения ясен, только вот как обозначить ряд, разбитый на два столбца? Как я уже говорила, тут нам поможет господин Frameset.
|
|
|
|
<html> |
Для тех, кто не уследил за движениями моих рук, поясняю. Первый ряд мы оформили как положено, при помощи тэга frame. Во втором ряду на сцену выгодит тэг <frameset></frameset>.
С помощью атрибута cols тэга <frameset></frameset> мы делим второй ряд на два столбца (первый шириной 150 пикселов, второй по ширине занимает все оставшееся пространство). А тэги <frame>, которые содержит <frameset></frameset>, определяют, какие документы будут показаны загружены в вертикальных фреймах во втором ряду (menu.html и content.html).
Теперь разберем вариант, изображенный на втором рисунке:
Здесь мы будем делить окно на столбцы. Второй столбец будет содержать в себе документ content.html (содержание), а первый столбец мы разобьем на два ряда, и поместим в них документы logo.html и menu.html.
|
|
|
|
<html> |
Вот так. Ничего сложного здесь нет:)
Однако, если у вас возникли трудности с освоением фреймов, и вы считаете, что вам нужны более подробные уроки и более простое повествование, то я советую вам обратиться к учебнику по фреймам Джо Барта, который мы перевели для вас, и который вы можете найти на нашем сайте.
А мы же с теми, у кого не возникает проблем с предметом, перешагнем на следующую ступеньку, чтобы узнать, что еще можно сделать с фреймами.
Учебник по Html для чайников. Фреймы.
Ступенька 39-ая.
Допустим, мы решили остановиться на последнем варианте фреймовой структуры для нашей страницы, значит будем приводить его в более-менее нормальный вид. Для начала избавимся от полосы прокрутки (скрулинга) во фрейме, содержащим документ logo.html.
|
|
|
|
<html> |
Scrolling - атрибут тэга <frame>. Он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появится только тогда, когда она нужна.
Собственно, scrolling="auto", можно не прописывать, т.к. если атрибут scrolling не задан, то полоса прокрутки появится, если она нужна, а если нет - ее не будет.
Если вы подведете мышку к границе какого-либо фрейма, то увидите, что потянув за нее, вы можете изменить размеры фрейма. Как же запретить вашему посетителю это делать? При помощи атрибута noresize для тэга <frame>:
|
|
|
|
<html> |
Теперь давайте избавимся от рамок между фреймами. Для этого мы используем параметр border, с которым мы раньше уже встречались. Итак, border="0".
|
|
|
|
<html> |
Так уже лучше :). Но все же, что-то еще хочется исправить... А! Картинку с чёртом так и хочется прижать в левый верхний угол:
|
|
|
|
<html> |
Атрибуты marginwidth и marginheight вам уже знакомы, они определяют ширину полей фрейма. В нашем документе мы убрали поля, задав значения этим атрибутам равные нулю для фрейма, содержащего документ с нашим чертом (logo.html).
Стоп, стоп, скажет мой читатель, вы же говорили об этих атрибутах, как о нестандартных. Да, конечно, но не стандартны они лишь при употреблении с тэгом <body>, т.к. этого спецификация не предусматривает, однако для тэга <frame>, они могут использоваться без опасений, т.к. для него они в спецификации как раз и предусмотрены.
Вот такие пироги:) Остальное будет на других ступеньках.
Учебник по Html для чайников. Фреймы.
Ступенька 40-ая.
В этой главе мы поговорим о том, что становиться проблемой для каждого человека, начинающего осваивать фреймы.
Итак, обратимся к нашему примеру. Нажмите на любую из ссылок. Документ, на который введет ссылка, откроется в том же фрейме, в котором располагается документ с меню. А нам нужно, чтобы он открылся во фрейме с основным содержанием, а меню осталось в нетронутом виде. Как это сделать?
Для начала, господа, познакомьтесь с новым атрибутом тэга <frame> - name (кстати, name, мне кажется, что мы с вами уже знакомы:). Пустим name в дело:
|
|
|
|
<html> |
Параметр name задает уникальное имя для фрейма (в нашем случае для того, который содержит документ content.html).
Имя фрейма может быть в дальнейшем использовано для ссылки на него из других документов (фреймов), с помощью атрибута тэга <a> target (target="имя_фрейма"), с которым мы, кстати, тоже уже знакомы.
Введем атрибут target в документе со ссылками - menu.html.
|
|
|
|
<html> |
Вот такой он (menu.html), в нашем случае. Теперь для каждой ссылки укажем параметр target="window-1", где window-1 - это имя фрейма, в котором у нас располагается документ с основным содержанием (content.html).
|
|
|
|
<html> |
Теперь, все ссылки открываются в нужном нам фрейме, а меню никуда не исчезает, при этом мы не приложили никаких особых усилий, а только изменили немного два документа :) – наш фрейм-документ (index) и документ, содержащий ссылки (меню).
Бывают ситуации, когда нам нужно, чтобы открываемый документ открылся во все окно, для этого надо параметру target задать значение _top:
<a href="project.html" target="_top">Мой проект о рыбках</a>
Страница с проектом о рыбках откроется в полное окно, закрыв (уничтожив) остальные кадры (фреймы).
Учебник по Html для чайников. Фреймы.
Ступенька 41-ая.
Вот мы добрались и до последней главы о фреймах. Собственно, о фреймах мы закончили говорить в предыдущей главе, а на этой ступеньке мы поговорим об IFrame - "плавающем" фрейме.
Итак, что такое Iframe, и чем он отличается от просто фреймов. IFrame - "плавающий" или встроенный фрейм. Вы, наверняка встречали его уже много раз на разных сайтах. Для Iframe нам не нужно создавать фрейм-документ, и прописывать в нем фреймовую структуру нашей страницы. Iframe позволяет нам вставить один html-документ в другой html-документ.
Как это выглядит:
Как вы видите, появляется форма заданного размера, в которой отображается нужный нам документ. Это очень удобно, вы уже наверняка встречались с "плавающим" фреймом, когда регистрировались на каких-либо сайтах, как правило соглашения с пользователем заключены для удобства в "плавающий фрейм", чтобы вы могли ознакомиться с соглашением, не переходя на другую страницу сайта, сразу.
«Плавающий» фрейм вводится в наш обычный html-документ при помощи тэга <iframe></iframe>:
<IFRAME src="../files/157/ancorpri.html" width="300" height="250" scrolling="auto" frameborder="1"></IFRAME>
В атрибуте src мы указываем путь к документу, который отобразиться во встроенном фрейме.
Атрибуты height и width отвечают за ширину и высоту встроенного фрейма.
Атрибут scrolling (полоса прокрутки) и его значения мы тоже уже знаем из уроков по фреймам: он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появится только тогда, когда она нужна.
Атрибут frameborder указывает отображать или нет границы встроенного фрейма, возможные значения 1 (да, отображать) и 0 (нет, не отображать).
Границы встроенного фрейма растягивать при помощи мыши ваш посетитель не может, поэтому атрибута noresize встроенные фреймы не имеют.
Iframe может выравниваться относительно содержимого страницы: текста и картинок, и может, соответственно, быть заключен в тэги выравнивания и таблицы.
Какие подводные камни нас могут ожидать при использовании Iframe – он не поддерживается многими броузерами, в основном старыми версиями броузеров, поэтому стоит подумать прежде, чем включать этот элемент на страницы вашего сайта, так ли это уж необходимо.
На этом наш разговор о фреймах завершен, напоминаю о полезных ссылках в правой колонке, советую изучить, а после переходить к следующей ступеньке, на которой мы начнем новую тему поговорим об объектах и дополнительных средствах, которые облегчают нашу жизнь, делают html-документы динамичными, расширяют наши возможности при создании страниц.