- •1. Структура web-документа. Вставка комментария.
- •2. Текст - логика и физика..
- •3. Форматирование Web-документа
- •Теги физического форматирования текста.
- •Логическая разметка текста.
- •Теги логического форматирования текста.
- •Полезные советы:
- •4. Организация ссылок. Правила записи ссылок Организация ссылок
- •Правила записи ссылок
- •Ссылки на документы различных типов
- •Ссылки на другие ресурсы Интернета
- •5. Списки нумерованные и маркированные. Списки определений Создание списков html страницы
- •Нумерованный список html страницы
- •Маркированный список html страницы
- •Многоуровненвый список html страницы
- •Списки определений html страницы
- •7. Встраивание изображений в web-документ. Выравнивание изображений. Задание размеров выводимого изображения. Отделение изображения от текста. Альтернативный текст
- •Выравнивание изображений.
- •Задание размеров выводимого изображения.
- •Отделение изображений от текста.
- •Рамки вокруг изображений.
- •Альтернативный текст.
- •8. . Использование изображения в качестве ссылки. Баннеры.
- •9. Графические форматы для web-документа
- •10. Таблицы. Создание простейших таблиц. Представление таблиц на странице.
- •11.Форматирование данных внутри таблицы.
- •12. Вложенные таблицы.
- •13. Объединение ячеек таблицы по горизонтали и по вертикали.
- •Объединение ячеек html таблицы по вертикали
- •14. Особенности построения таблицы. Отображение пустых ячеек в таблице. Выравнивание данных в столбцах таблицы Особенности построения html таблиц
- •Выравнивание данных в столбцах html таблицы
- •15. Фреймы. Сферы применения фреймов.
- •Сферы применения фреймов
- •16. Правила описания фреймов.
- •17. Особенности навигации при использовании фреймов. Взаимодействие между фреймами. Различие между фреймами и окнами браузера.
- •Взаимодействие между фреймами в html
- •18. Плавающие фреймы. Варианты их использования.
- •19. Карты-изображения. Графическое представление карты-изображения. Описание конфигурации карты-изображения. Средства создания карты-изображения.
- •20. Каскадные таблицы стилей. Встраивание таблицы стилей в документ.
- •21. Группирование и наследование.
- •22. Селекторы. Селектор class и Селектор id.
- •Пример 2. Использование классов c тегами
- •Пример 3. Использование классов c тегами
- •Теги Span и Div
- •Пример 2. Использование тега div
- •Селекторы id Параметр id задает уникальное имя элемента, которое используется для обращения к нему скриптов. Это позволяет управлять стилем элемента динамически. Синтаксис id селектора следующий.
- •Пример 3. Использование идентификатора id
- •23. Примеры применения контекстных селекторов.
- •24. Псевдоклассы. Псевдоклассы связей.
- •25. Модель форматирования. Блоковые элементы. Встроенные элементы.
- •26. Стилевые свойства форматирования текста.
- •27. Стилевые свойства для цвета и фона.
- •28. Блоки. Визуальное форматирование
- •2 9. Абсолютное, относительное и статическое форматирование.
- •30. Отображение списков.
16. Правила описания фреймов.
Перейдем теперь к рассмотрению правил записи тэгов, используемых для документов с фреймовыми структурами. Давайте для начала рассмотрим полный HTML-код, создающий документ с фреймами средней сложности: <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <FRAMESET ROWS="25%,50%,25%"> <FRAME SRC="header.htm"> <FRAMESET COLS="25%,75%"> <FRAME SRC="list.htm"> <FRAME SRC="info.htm"> </FRAMESET> <FRAME SRC="footer.htm"> </FRAMESET> <NOFRAMES> Ваш браузер не может отображать фреймы </NOFRAMES> </HTML>
Этот пример создает страницу с фреймами, показанную на рис. 5.7. Как вы видите, этот HTML-код определяет четыре фрейма. Верхний фрейм занимает всю ширину страницы и содержит заголовок. Далее идут два центральных фрейма, один из которых расположен с левой стороны и занимает 25 процентов от ширины экрана, а второй занимает оставшееся место. Последний, четвертый фрейм занимает нижнюю четверть экрана. В каждый из фреймов загружается отдельный HTML-документ, имя которого определяется параметром SRC.
Как видно из примера, для описания структуры фреймов применяются тэги <FRAMESET>, <FRAME> и <NOFRAMES>. Рассмотрим назначение этих тэгов.
Тэг <FRAMESET>
Фреймы определяются в структуре, называемой FRAMESET, которая используется для страниц, содержащих фреймы, вместо раздела BODY обычного документа. Web-страницы, составленные из фреймов, не могут содержать раздел BODY в своем HTML-коде. В свою очередь, страницы с разделом BODY не могут использовать фреймы. Так как для страниц с фреймами не применяется раздел BODY, то нет возможности задать фоновое изображение и цвет фона для всей страницы в целом. Напомним, что эти установки определяются параметрами BACKGROUND и BGCOLOR, записываемыми в тэге BODY. Однако это не мешает в каждый фрейм загружать документы, имеющие свои параметры фона. Контейнер из тэгов <FRAMESET> И </FRAMESET> обрамляет каждый блок определений фрейма. Внутри контейнера <FRAMESET> могут содержаться только ТЭГИ <FRAME> И ВЛОЖеННЫе ТЭГИ <FRAMESET>. Тэг <FRAMESET> имеет два параметра: ROWS (строки) и COLS (столбцы) и записывается в следующем виде: FRAMESET ROWS="crmcoK значений» COLS="cnMCOK значений»>. Некоторые браузеры разрешают использовать дополнительные параметры тэга <FRAMESET>. Обзор возможностей браузеров Netscape и Microsoft Internet Explorer дается в конце главы. Можно определить значения для ROWS или COLS, или обоих вместе. Необходимо определить, по меньшей мере, два значения хотя бы одного из этих параметров. Если другой параметр опущен, то его значение принимается равным 100%. Если в тэге <FRAMESET> определено только одно значение для ROWS и COLS, то этот тэг будет считаться ошибочным и браузер проигнорирует его. Другими словами, нельзя определить <FRAMESET>, СОСТОЯЩИЙ ТОЛЬКО ИЗ ОДНОГО фрейма.
Список значений параметров ROWS и COLS тэга <FRAMESET> представляет собой разделенный запятыми список значений, которые могут задаваться в пикселах, в процентах или в относительных единицах. Число строк или столбцов определяется числом значений в соответствующем списке. Например, запись <FRAMESET ROWS="100,240,140"> определяет набор трех фреймов. Эти значения представляют собой абсолютные значения в пикселах. Другими словами, первый фрейм (первая строка) имеет высоту 100 пикселов, второй - 240 и последний - 140 пикселов. Задание значений размеров фреймов в пикселах не очень удобно. Здесь не учитывается тот факт, что браузеры запускаются в различных операционных системах и с различными разрешениями дисплеев. В то же время, можно определить абсолютные значения размеров для некоторых случаев, например, для отображения небольшого изображения с известными размерами. Лучшим вариантом будет задание значений в процентах или в относительных единицах, например: <FRAMESET ROWS="25%,50%,25%">. В этом примере создаются три фрейма, размещаемые как строки во всю ширину экрана. Верхняя строка займет 25 процентов от доступной высоты экрана, средняя строка - 50 процентов и нижняя - 25 процентов. Если сумма заданных процентов не равна 100%, то значения будут пропорционально отмасштабированы, чтобы в итоге получилось ровно 100%. Значения в относительных единицах выглядят следующим образом: <FRAMESET COLS="*,2*,3*">.
Звездочка (*) используется для пропорционального деления пространства. Каждая звездочка представляет собой одну часть целого. Складывая все значения чисел, стоящих у звездочек (если число опущено, то подразумевается единица), получим знаменатель дроби. В этом примере первый столбец займет 1/6 часть от общей ширины окна, второй столбец - 2/6 (или 1/3), а последний - 3/6 (или ½). Помните, что числовое значение без каких-либо символов определяет абсолютное число пикселов для строки или колонки. Значение со знаком процента (%) определяет долю от общей ширины (для COLS) или высоты (для ROWS) от окна просмотра, а значение со звездочкой (*) задает пропорциональное распределение оставшегося пространства. Приведем пример, использующий все три варианта задания значений: <FRAMESET COLS="100,25%,*,2*">.
В этом примере первый столбец будет иметь ширину 100 пикселов. Второй столбец займет 25 процентов от всей ширины окна просмотра, третий столбец - 1/3 оставшегося пространства и, наконец, последний столбец - 2/3. Абсолютные значения рекомендуется назначать первыми по порядку слева направо. За ними следуют процентные значения от общего размера пространства. В заключение записываются значения, определяющие пропорциональное разбиение оставшегося пространства. Если вы используете абсолютные значения параметров COLS или ROWS, то задавайте их небольшими, чтобы они могли поместиться в любом окне браузера, и дополняйте их, по крайней мере, одним значением, заданным в процентной или относительной форме, для заполнения оставшегося пространства. Если используется тэг <FRAMESET>, в котором заданы значения и COLS, и ROWS, то будет создана сетка из фреймов. Например: <FRAMESET ROWS="*,2*,*" COLS="2*,*»> Эта строка HTML-кода создает сетку фреймов с тремя строками и двумя столбцами. Первая и последняя строки занимают ¼ высоты каждая, а средняя строка - половину. Первый столбец занимает 2/3 ширины, а второй - 1/3. Контейнер <FRAMESET> </FRAMESET> может быть вложен внутрь другого такого же контейнера, как это было показано в начальном примере. Рассмотрим далее использование тэга <FRAME>. В некоторых источниках по языку HTML указывается, что параметры COLS и ROWS тэга <FRAMESET> являются взаимоисключающими. Однако и Netscape, и Microsoft Internet Explorer допускают их совместное использование. Тэг <FRAME> Тэг <FRAME> определяет одиночный фрейм. Он должен располагаться внутри пары тэгов <FRAMESET> и </FRAMESET>. Например: <FRAMESET ROWS="*,2*"> <FRAME> <FRAME> </FRAMESET>
Обратите внимание, что тэг <FRAME> не является контейнером и в отличие от <FRAMESET> не имеет завершающего тэга. Все определение одиночного фрейма выполняется одной строчкой HTML-кода. Необходимо записать столько тэгов <FRAME>, сколько отдельных фреймов определено при задании тэга <FRAMESET>. В предыдущем примере тэгом <FRAMESET> задано две строки, поэтому потребовалось записать два тэга <FRAME>. Однако этот пример, по существу, бесполезен, так как ни один из фреймов не имеет какого-либо содержания! Тэг <FRAME> имеет шесть параметров: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING И NORESIZE.
Некоторые браузеры разрешают использовать ряд дополнительных параметров тэга <FRAME>. Приведем запись тэга <FRAME> СО всеми параметрами: <FRAME SRC="url" NAME="window_name" SCROLLING=YES |NO|AUTO MARGINWIDTH="value" MARGINHEIGHT="value" NORESIZE>
На практике в тэге <FRAME> редко используются одновременно все параметры. Наиболее важный параметр - SRC (сокращение от слова source). Довольно часто в тэге <FRAME> задается единственный параметр SRC. Например: <FRAME SRC="url">.
Значение параметра SRC определяет URL-адрес документа, который будет загружен изначально в данный фрейм. Обычно в качестве такого адреса записывается имя HTML-файла, расположенного в том же самом каталоге, что и основной документ. Тогда строка определения фрейма будет выглядеть, например, так: <FRAME SRC="sample.htm">. Обратите внимание, что любой HTML-файл, заданный в описании фрейма, должен быть полным HTML-документом, а не фрагментом. Это означает, что документ должен иметь тэги HTML, HEAD, BODY и т. д.
Конечно, в качестве значения SRC может быть задан любой допустимый URL-адрес. Если, например, фрейм используется для отображения изображения в формате GIF, которое располагается на сервере издательства данной книги, то следует записать: <FRAME SRC="http://www.bhv.ru/example.gif">.
Не задавайте в документе, описывающем структуру фреймов, никакого содержания. Обычный текст, заголовки, графические изображения и другие элементы не могут прямо использоваться в документе, который описывает структуру фреймов. Все содержание фреймов должно быть определено в отдельных HTML-файлах, имена которых задаются параметром SRCтэга <FRAME>. Параметр NAME определяет имя фрейма, которое может использоваться для ссылки к данному фрейму. Обычно ссылка задается из другого фрейма, располагающегося на той же самой странице. Например: <FRAME SRC="sample.htm" NAME=»Frame_l»>.
Такая запись создает фрейм с именем "Frame_l", на который может быть выполнена ссылка. Например: <А HREF="other.htm" ТАК6ЕТ="Ргате_1">Щелкните здесь для загрузки документа other.htm во фрейм с именем Frame_l</A>. Обратите внимание на параметр TARGET, который ссылается на имя фрейма. Если для фрейма не задано имя, то будет создан фрейм без имени, и не будет возможности использовать ссылки на него из другого фрейма. Имена фреймов должны начинаться с алфавитно-цифрового символа. Параметры MARGINWIDTH И MARGINHEIGHT дают возможность устанавливать ширину полей фрейма. Записывается это следующим образом: MARGINWIDTH="value", где "value" - абсолютное значение в пикселах. Например: <FRAME MARGINHEIGHT= «5» MARGINWIDTH= "7">.
Данный фрейм имеет поля сверху и снизу по 5 пикселов, а слева и справа -по 7 пикселов. Не забудьте, что здесь идет речь о полях, а не о рамках. Параметры MARGINWIDTH и MARGINHEIGHT определяют пространство внутри фрейма, в пределах которого не будет располагаться никакая информация. Минимально допустимое значение этих параметров равно единице. Для фреймов будут автоматически создаваться и отображаться полосы прокрутки, если содержимое фрейма не помещается полностью в отведенном пространстве. Иногда это нарушает дизайн страницы, поэтому было бы удобно иметь возможность управлять отображением полос прокрутки. Для этих целей используется параметр SCROLLING. Формат записи: <FRAME SCROLLING="YES| NO IAUTO">.
Параметр SCROLLING может принимать три значения: YES, NO или AUTO. Значение AUTO действует так же, как и в случае отсутствия параметра SCROLLING. Значение YES вызывает появление полос прокрутки вне зависимости от необходимости этого, aNO - запрещает их появление. Например: <FRAME SCROLLING=YES>.
Обычно пользователь может изменять размер фреймов при просмотре страницы. Если установить курсор мыши на рамке фрейма, то курсор примет форму, указывающую на возможность изменения размеров, и позволит выполнить перемещение рамки в нужное место. Это иногда нарушает структуру красиво спроектированных фреймов. Для предотвращения возможности изменения пользователем размера фреймов следует воспользоваться пара-метромNORESIZE: <FRAME NORESIZE>.
Этот параметр не требует никаких значений. Естественно, когда задан параметр NORESIZE для одного из фреймов, то размер любого из смежных фреймов также не может быть изменен. Иногда, в зависимости от расположения фреймов, использования параметра NORESIZE в одном из фреймов будет достаточно, чтобы предотвратить возможность изменения размеров любого из них на экране. Тэг <NOFRAMES>
Возможность работы с фреймами не предполагалась ни в стандарте HTML 3.0, ни в HTML 3.2. Здесь до последнего времени складывалась достаточно типичная ситуация, когда реально используемые возможности активно применяются на многих WWW-страницах, однако не являются частью стандарта. Это означало, что браузеры вполне законно могли игнорировать фреймы. С появлением стандарта HTML 4.0 ситуация изменилась - теперь поддержка фреймовых структур закреплена стандартом. Заметим, что большинство современных браузеров распознавали фреймы и до появления HTML 4.O. Тем не менее, необходимо предоставлять информацию пользователям, применяющим браузеры без поддержки фреймов. Для таких браузеров можно предусмотреть альтернативную информацию, которая записывается между парой тэгов <NOFRAMES> и </NOFRAMES>. Это выглядит следующим образом: <NOFRAMES> весь HTML-документ </NOFRAMES>
Все, что размещено между тэгами <NOFRAMES> И </NOFRAMES>, будет отображаться браузерами, не имеющими возможностей поддержки фреймов. Браузеры с поддержкой фреймов проигнорируют всю информацию между этими тэгами. Заметим, что в реальной жизни разработчики HTML-страниц часто не используют возможности тэга <NOFRAMES> ДЛЯ создания страниц без фреймовых структур, а просто создают две версии своих HTML-документов. Для такого варианта на стартовой странице обычно предлагается выбор загрузки документа с фреймовой структурой или без нее. Далее в зависимости от выбора пользователя загружается только один вариант документа.