Муниципальное бюджетное образовательное учреждение

Средняя общеобразовательная школа № 11 города Глазова

Методические разработки по выполнению практических работ по предмету Информатика и ИКТ для 11 класса по теме

Основы создания Web-страниц

Учитель информатики:

Савельева Татьяна Александровна

г. Глазов

2016 год

Пояснительная записка

Практические работы являются неотъемлемой частью предмета Информатика и ИКТ. В ходе их выполнения у учащихся формируются важнейшие практические умения и навыки, необходимые для успешного усвоения основных тем предмета.

Цель данного учебного пособия - оказать помощь учащимся в усвоении и расширении кругозора в области информационных технологий.

Задания, предлагаемые в практических работах, предполагают углубленное изучение некоторых теоретических вопросов. Сами практические работы подобраны так, чтобы охватить, по возможности, все темы, изучаемые в курсе.

Для успешного выполнения практических работ используются дополнительные справочные и раздаточные материалы. Изучение литературы, список которой приведен ниже, способствует более глубокому усвоению материала и успешному выполнению практических заданий.

В структуре лабораторных работ возможны небольшие изменения, призванные учитывать технические возможности учебного учреждения. Кроме того, эти изменения помогут организовать занятия с учетом индивидуальных интересов учащихся и уровня их теоретической подготовки.

При разработке лабораторных работ была использована следующая литература:

1. Михеева, Е.В. Информатика [Текст]: учебник для СПО/ Е. В. Михеева, О. И. Титова. - 3-е изд., стер. - Москва : Академия, 2009. - 352 с.

2. Угринович, Н.Д. Информатика и информационные технологии [Текст]: учебник для 10-11кл. /Н.Д. Угринович 4-е изд. - Москва: БИНОМ. Лаборатория знаний, 2010. - 511с.

3. Семакин, И.Г. Информатика [Текст]: учебник для 10-11кл. /И.Г. Семакин. - Москва: Просвещение, 2011. - 211с.

4. Михеева, Е.В. Информационные технологии в профессиональной деятельности [Текст]: учебник для СПО / Е.В.Михеева. - 9-е изд, стер. - Москва: Академия, 2011. - 384с.

5. Александровская, А.Н. Автоматика [Текст]: учебник для СПО / А.Н. Александровская. - Москва: Академия, 2011. - 256с.

6. Цветкова, М. С. Информатика и ИКТ[Текст]: учебник для СПО/ М.С. Цветкова, Л.С. Великович. - Москва: Академия, 2011. - 352с.

7. Гохберг, Г. С. Информационные технологии[Текст]: учебник для СПО/ Г.С. Гохберг и др.. - 8-е изд., стер. - Москва: Академия, 2013. - 208с.

Порядок выполнения практических работ

1. Уясните цель выполнения работы. Внимательно прочитайте введение к практической работе. Исходя из прочитанного, составьте план действий, необходимый для достижения поставленной цели.

2. Проверьте наличие на вашем рабочем месте необходимого оборудования и программного обеспечения.

3. Ознакомьтесь с описанием практической работы. Подумайте, понятны ли вам приемы осуществления тех или иных операций. Если у вас возникают сомнения, проконсультируйтесь у преподавателя. Если вопросов нет, приступайте к работе.

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

Создание документа HTML.

Обязательная структура документа

В точности, этот документ имеет следующую структуру:

Hello

Hello world

То есть, за исключением первой строки, весь файл есть HTML элемент, который содержит HEAD элемент, (включающий TITLE элемент) и BODY элемент, с простым текстом в качестве содержимого.

HEAD (ЗАГОЛОВОК) - заголовок документа

Основная структура документа HTML всегда состоит из заглавия и тела. Явное вложение заголовка в элемент HEAD не обязательно.

Основной синтаксис

элемент TITLE

HEAD>

Содержимое

Обязательно один TITLE элемент и необязательно (в любом порядке)

BODY (ТЕЛО) - тело документа

Основная структура документа HTML всегда состоит из заголовка и тела.

Основной синтаксис

тело документа

Возможные атрибуты

фоновый цвет документа

TEXT

цветовая спецификация

цвет для текста документа

LINK

цветовая спецификация

цвет для непосещенной гипертекстовой связи

VLINK

цветовая спецификация

цвет для посещенной гипертекстовой связи

ALINK

цветовая спецификация

цвет для активной гипертекстовой связи; используется для выделения текста связи на момент, когда пользователь нажал на связь

Теги управления разметкой на web-странице

Заголовки

Заголовок обозначает начало раздела документа. В стандарте определено 6 уровней заголовков: от Н1 до Н6. Текст, окруженный тегами <Н1>Н1>, получается большим - это основной заголовок. Если текст окружен тегами <Н2>Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ>НЗ> еще меньше и так далее до <Н6>Н6>.

Заголовок 1

Заголовок 2

Параграф текста

. Тег

применяется для разделения текста на параграфы. В нем используются те же атрибуты, что и в заголовках.

Атрибут АLIGN

Атрибут АLIGN позволяет выровнять текст по левому или правому краю, по центру или ширине. По умолчанию текст выравнивается по левому краю. Данный атрибут применим также к графике и таблицам.

Далее приведены возможные значения атрибута АLIGN: АLIGN=left выравнивание по левому краю. АLIGN=right выравнивание по правому краю. АLIGN=center центрирование текста и графики.

Например <p align=center>Текст абзацаp>

Теги управления отображением символов

Теги, управляющие формой отображения

Эти теги допускают вложенность и пересечение друг с другом, поэтому все они имеют тег начала и конца.

Горизонтальные линейки - тег <НR>

Горизонтальное отчеркивание (Horizontal Rule) применяется для разделения документа на части.

Преформатированный вывод - тег <РRЕ>

Применение этого тега позволяет отобразить текст "как есть" (без форматирования), теми же символами и с тем же разбиением на строки.

Комментарии в языке HTML

При разметке документов HTML возникает необходимость в использовании комментариев, которые браузер не выводит на экран, но другой специалист, редактирующий данный документ, может прочитать. Комментарии HTML начинаются с символа "". Можно вставлять текст с любыми символами. Комментарии могут состоять из нескольких строк текста.

Практические задания: Создание текстов в HTML

1. Создайте документ содержащий: заголовки 6 уровней.

2. Создайте документ содержащий текст с различными шрифтами и размерами символов (не менее 5 типов шрифтов).

3. Создайте документ содержащий: абзац текста, выровненный по левому краю, абзац текста, выровненный по правому краю, абзац текста, выровненный по центру.

4. Создайте документ содержащий абзац текста, выровненный по левому краю, отступы сверху и слева - 40 пикселей.

5. Создайте документ содержащий 3 абзаца текста разделенных разрывами.

6. Создайте документ содержащий 3 абзаца текста разделенных горизонтальной чертой разрывами.

7. Создайте документ содержащий текст содержащий несколько абзацев текста с различными типами выделения (полужирный, курсив, подчеркнутый и их комбинации).

8. Создайте документ содержащий текст различного цвета (10 цветов) на цветном фоне.

9. Создайте документ содержащий текст различного цвета (5 цветов) на цветном фоне (5 цветов).

10. Создайте документ содержащий: заголовки 2 уровней, абзац текста, выровненный по левому краю, абзац текста, выровненный по правому краю

11. Создать HTML документ содержащий 3 абзаца текста, абзацы разделены горизонтальными линиями.

12. Создайте документ содержащий: заголовки 2 уровней, абзац текста, выровненный по левому краю, абзац текста, выровненный по правому краю. Измените цвет фона страницы на синий. (<body bgcolor=blue> или <body bgcolor=#0000ff>)

Создание списков в HTML

Списки являются важным средством структурирования текста и применяются во всех языках разметки. В НТМL имеются следующие виды списков: ненумерованный список (неупорядоченный) (Unordered Lists

• ), нумерованный список (упорядоченный) (Ordered Lists

1. ) и список определений.

Неупорядоченные списки - тег

Ненумерованный список. Ненумерованный список предназначен для создания текста типа:

• первый элемент списка;

• второй элемент списка;

Записывается данный список в виде последовательности:

• 
  
  
• первый элемент списка
  
  
• второй элемент списка
  
  

Теги

• и

Атрибуты маркеров в ненумерованном списке

Чтобы изменить маркеры на разных уровнях вложенности, можно использовать атрибут ТYРЕ.

• Тег создает сплошные маркеры такого типа, как в списках первого уровня по умолчанию.
  
  
  • Тег создает маркеры в виде окружностей.
    
    
    • Тег создает сплошные квадратные маркеры.

Упорядоченные списки - тег

Нумерованные списки. Тег

1. позволяет создавать нумерованные списки, используя в качестве номеров не только обычные числа, но и строчные и прописные буквы, а также строчные и прописные римские цифры.

<ОL ТYРЕ=l> Тег создает список с нумерацией в формате 1., 2., 3., 4. и т.д.

<ОL ТYРЕ=А> Тег создает список с нумерацией в формате А., В., С., D. и т.д.

1. Тег создает список с нумерацией в формате а., b., с., d. и т.д.
   
   <ОL ТYРЕ=I> Тег создает список с нумерацией в формате I., II., III., IV. и т.д.

Практические задания: Создание списков в HTML.

1. Создайте документ, содержащий 3 маркированных списка по 5 элемента в каждом, с разными типами маркеров.

2. Создайте документ, содержащий маркированный список из 5 элементов с картинкой в качестве маркеров.

3. Создайте документ, содержащий 5 нумерованных списков по 5 элемента в каждом, с разными типами нумерации.

4. Создайте документ, содержащий нумерованные списки из 5 элементов, с разными типами нумерации, нумерация списка начинается с 10 или D.

5. Создайте документ, содержащий список описаний из 5 элементов.

Гипертекстовые ссылки

Все рассмотренные выше средства управления отображением текста, безусловно, важны, но они только дополняют основной тег HTML-документа - гипертекстовую ссылку. Для записи гипертекстовой ссылки используется тег <А>, который называют "якорь" (аnchor). Якорь имеет несколько атрибутов, главным из которых является НREF. Простую ссылку можно записать в виде

<А НREF="www.intuit.ru/index.htm"> Отображаемое название гипертекстовой ссылки А>,

где значение атрибута HREF - адрес документа "index.htm" на машине "www.intuit.ru", доступ к которой осуществляется по протоколу НТТР. Форма записи этого адреса называется универсальным локатором ресурсов URL и является составной частью технологии WWW.

Согласно схеме HTTP нотации URI, полный адрес информационного ресурса, доступного по протоколу HTTP, надлежит записывать следующим образом:

user:password@domain.ru:port/path/some.html?query_string,

На практике редко используют все компоненты полного адреса схемы HTTP. Чаще всего первые компоненты опускают.

Естественно, что браузер при обращении к серверу будет восстанавливать полную форму URL, опираясь на некоторую схему по умолчанию, которая называется базовым URL. Иногда неполную форму URL называют относительным URL, подразумевая, что адрес задается относительно некоторого базового адреса.

По умолчанию в качестве базового используется URL каталога, в котором находится текущий документ. Если URL начинается с символа "." или "..", то это означает исчисление от текущего каталога. Если URL начинается с символа "/", то относительный URL берется от корня каталогов сервера.

Другой формой использования тега <А> является определение точек внутри текста, на которые можно сослаться. Такой метод применяется в том случае, когда документ нельзя поделить на части и необходимо быстро перемещаться из оглавления в текст:

<А NАМЕ="роint">

Для ссылки на такую точку используют следующую форму URL:

<А НREF="www.intuit.ru/index.html#роint">Ссылка на точку "роint" в документе "index.html"А>

Практические задания: Гипертекстовые ссылки

1. Создайте 2 HTML документа. Сохраните их. В первый документ вставьте ссылку на второй, а во второй на первый. Переход с первого на второй документ по слову в тексте, со второго на первый по абзацу текста.

2. Создайте 2 HTML документа с картинками. Сохраните их. В первый документ вставьте ссылку на второй, а во второй на первый. Переход с первого на второй документ по рисунку, со второго на первый - по слову в тексте.

3. Создайте HTML документ с большим количеством текста (скопируйте текст несколько раз). В начале документа создайте оглавление. Сделайте переходы переходы с оглавления на разные части документа (каждый элемент оглавления - ссылка на определенную часть текста). Создайте обратные ссылки на оглавление.

4. Создайте 2 HTML документа. Сохраните их. В первый документ вставьте ссылку на второй, а во второй на первый. Переход с первого на второй документ по слову в тексте, со второго на первый по абзацу текста.

5. Создайте 2 HTML документа с картинками. Сохраните их. В первый документ вставьте ссылку на второй, а во второй на первый. Переход с первого на второй документ по рисунку, со второго на первый - по слову в тексте.

6. Создайте HTML документ с большим количеством текста (скопируйте текст несколько раз). В начале документа создайте оглавление. Сделайте переходы переходы с оглавления на разные части документа (каждый элемент оглавления - ссылка на определенную часть текста). Создайте обратные ссылки на оглавление

Использование графики в HTML

Рассмотрим как вставить изображение в Web-страницу. Тегом НТМL, который заставляет браузер выводить изображение, является с обязательным атрибутом SRC (SouRCe, источник). Имя файла представляет собой имя выводимого графического файла. Замыкающего тега не требуется.

Изображения на Web-странице могут использоваться в качестве гипертекстовых ссылок, как и обычный текст. Для обозначения изображения как гипертекстовой метки используется тот же тег <А>, что и для текста, но между <А> и А> вставляется тег изображения :

<А НREF="адрес файла или изображения"> А>

Атрибуты и их аргументы. Тег изображения имеет один обязательный атрибут SRC и необязательные: alt="Практические работы по Информатике по теме Основы создания Web-страниц для учащихся 11 класса", ALIGN, BORDER, WIDTH, HEIGHT.

Атрибут SRC

Указывает файл изображения и путь к нему;

Атрибут alt="Практические работы по Информатике по теме Основы создания Web-страниц для учащихся 11 класса"

Позволяет указать текст, который будет выводиться вместо изображения браузерами, неспособными представлять графику.

Атрибут АLIGN

Определяет положение изображения относительно окружающего его текста. Возможные значения аргумента - ["top" | "middle" | "bottom"] (соответственно, "вверху", "посередине", "внизу").

Кроме основных значений атрибута ALIGN="ключевое слово" существует еще ряд аргументов, которые расширяют возможности взаимного размещения графики и текста. Рассмотрим их подробнее.

Дополнительные возможные значения аргумента - ["left" | "right" | "center""].

Атрибут BORDER

Значение аргумента определяет толщину рамки вокруг изображения.

Атрибуты WIDTH и HEIGHT

Оба атрибута задают значения размеров изображения по горизонтали и по вертикали соответственно.

изображение" WIDTH="100" HEIGHT="200" BORDER="2" ALIGN="left">

Практические задания: Использование графики в HTML

1. Создайте HTML документ, содержащий любую картинку.

2. Создайте HTML документ, содержащий картинку. Установите размер изображения 200 точек по вертикали и 200 точек по горизонтали.

3. Создайте HTML документ, содержащий 3 картинки. Первая картинка имеет исходные размеры, 2 картинка - высота картинки в 2 раза больше исходной, 3 картинка - ширина картинки в 2 раза больше исходной.

4. Создайте HTML документ, содержащий картинку. Установите рамку картинки толщиной в 5 точек.

5. Создайте HTML документ, содержащий картинку. Укажите текст, который будет выводиться вместо изображения, если отключить отображение рисунков. (Сервис-Свойства обозре6вателя-Дополнительно-Отображать рисунки).

6. Создайте HTML документ, содержащий 3 картинки. Первая выровнена по центру, 2 - по левому краю, 3 - по правому краю.

7. Создайте HTML документ, содержащий 3 абзаца текста. Вставьте картинку середину каждого абзаца текста. Выровняйте картинку по вертикали. В первом абзаце по центру строки, во 2 по верхней границе, в 3 - по нижней границе.

Создание таблиц в HTML

Для описания таблиц используется тег <ТАВLЕ>.

Создание строки таблицы - тег <ТR>

Тег <ТR> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами <ТR>ТR>.

Определение ячеек таблицы - тег <ТD>

Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD>ТD>. Число тегов <ТD>ТD> в строке определяет число ячеек. Пример таблица 2х2Ячейка 1.1.Ячейка 1.2.

TR><TR>

<TD>Ячейка 2.1.TD>

<TD>Ячейка 2.2.TD>

TR>

TABLE>

Заголовки столбцов таблицы - тег <ТН>

Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН>ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны <ТD>ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН>ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки.

Атрибут СОLSPAN

Объединить ячейки в строке можно с помощью атрибута СОLSPAN (Column Span, соединение столбцов). (в первой строке 1 ячейка, во второй 2)Ячейка 1

<TD >Ячейка 2.1.TD>

<TD >Ячейка 2.2TD>

TR>

TABLE>

Атрибут ROWSPAN

Атрибут ROWSPAN, подобен атрибуту СОLSPAN=, только он задает число строк, которые надо объединить

Атрибут WIDТН

Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег <ТАВLЕ>, чтобы дать ширину всей таблицы, а можно использовать в тегах <ТR> или <ТН>, чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах.

Атрибут HEIGHT

Атрибут HEIGHT задает высоту ячейки (строки) или таблицы в целом. Ширину можно указывать в пикселах или в процентах.

Атрибуты АLIGN и VALIGN

Атрибут АLIGN определяет выравнивание текста и графики по горизонтали.

ALIGN=left выравнивает содержимое ячейки по левому краю

АLIGN=сеnter располагает содержимое ячейки по центру.

АLIGN=right выравнивает содержимое ячейки по правому краю

Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. Вертикальное выравнивание может быть задано несколькими способами:

VALIGN=top выравнивает содержимое ячейки по ее верхней границе.

VALIGN=middle центрирует содержимое ячейки по вертикали.

VALIGN=bottom выравнивает содержимое ячейки по ее нижней границе.

Атрибут BORDER

Атрибут BORDER в теге <ТАВLЕ> определяет, как будут выглядеть рамки.

Практические задания: Создание таблиц в HTML

1. Создайте HTML документ, содержащий таблицу из 2 строк и 3 столбцов.

2. Создайте HTML документ, содержащий таблицу из 2 строк и 2 столбцов. Толщина границы равна 5.

3. Создайте HTML документ, содержащий таблицу из 2 строк и 2 столбцов. Ширина таблицы 100% от ширины экрана, высота - 50 % высоты экрана.

4. Создайте HTML документ, содержащий таблицу из 3 строк. В 1 строке 3 ячейки, во 2 - 1 и в 3 - 2.

5. Создайте HTML документ, содержащий таблицу из 3 столбцов. В 1 столбце 3 ячейки, во 2 - 1 и в 3 - 2.

6. Создайте HTML документ, содержащий таблицу из 2 строк и 3 столбцов. Высота строк - 150 точек, ширина столбцов - 200 точек. В 1 ячейке 1 строки текст выровнен по левому краю, во 2 - по центру, в 3 - по правому краю. В 1 ячейке 2 строки текст выровнен по верхней границе, во 2 - по центру, в 3 - по нижней границе.

7. Создайте HTML документ, содержащий таблицу из 2 строк и 2 столбцов. Цвет фона таблицы - красный.

8. Создайте HTML документ, содержащий таблицу из 2 строк и 2 столбцов. Задайте разный цвет фона у каждой ячейки таблицы.

Понятие фрейма.

На первый взгляд, фреймы - это нечто сложное, но их легче понять, если провести аналогию с ячейками таблицы. Расположение фреймов на экране и ячеек в таблице задается почти одинаково: теги и атрибуты работают так же, как их табличные "родственники". Однако, хотя аналогия между единичным фреймом на странице и ячейкой таблицы верна, нужно помнить, что есть и отличия. Содержимое ячейки задано в коде HTML-страницы с таблицей. Текст или графика, составляющие содержимое таблицы, фактически вводятся на той же странице HTML, что и тег или атрибут, описывающие таблицу. Напротив, экран с фреймами описывается в НТМL-странице, в контейнере FRAMESET. Содержимое же фрейма - это отдельная HTML-страница, которая может находиться где угодно: в другом каталоге, на локальном сервере или на удаленном узле где-то в сети. Фреймовая структура определяет только способ организации экрана с фреймами и указывает, где находится начальное содержимое каждого фрейма. Для всех фреймов задаются URL, описывающие местонахождение их данных. Как правило, на странице с фреймовой структурой содержимого фреймов нет. Такая страница обычно невелика - она описывает только кадровую структуру экрана.

Создание простой страницы с фреймами

Построим страницу с двумя фреймами. Зададим слева фрейм оглавления с заголовками статей, а справа поместим страницу с самими статьями. Сделаем так, что когда пользователь щелкает мышкой на ссылке в той части экрана, где находится оглавление, сама статья появляется в правом фрейме. Это основной, наиболее распространенный способ использования фреймов.

Задание фреймовой структуры

Для начала мы должны представить себе общий вид страницы - где расположить фреймы и какого они будут размера. Затем можно подумать об их содержании. Ниже приводится код простой фреймовой структуры с использованием тега . Обратите внимание: страница с фреймовой структурой не содержит тега <ВОDY>.

Пример фреймов

FRAMESET>

HTML>

В результате мы получили экран, разделенный на два окна. Левое окно занимает 25% экрана и содержит страницу с названием menu.html. Окно справа займет 75% экрана и содержит файл main.html. Пока у нас их нет, так что вы увидите страницу с двумя пустыми фреймами. Заметьте, что правую страницу мы назвали "main" (<главная>) с помощью строки:

Е="main">

Это означает, что фрейм под именем main будет содержать страницу main.html. Заметим, что поскольку мы не собираемся показывать в левом фрейме никаких страниц, кроме menu.html, нам не нужно его называть.

Подготовка содержимого фрейма

Теперь загрузим фреймы с содержимым. Создадим страницу menu.html. Menu.html - это обычная НТМL-страница, построенная как оглавление, каждый элемент оглавления - ссылка, на какую либо страницу. Имейте в виду, что этот фрейм узкий и высокий, так что страница, которая будет в него загружаться, должна быть спроектирована соответствующим образом. Теперь мы должны определить, где будут появляться другие страницы при щелчке мышкой на ссылке. Поскольку мы хотим, чтобы они отображались в правом фрейме, добавим атрибут TARGЕТ="main" в теги ссылок страницы menu.html. Это означает, что, когда пользователь щелкает на ссылке, вызываемая страница появляется в фрейме main. Если мы не определим атрибут ТАRGЕТ, то страница появится там, где мы щелкнули мышкой, - в левом фрейме.

Подготовка фрейма main

Правый фрейм main будет содержать сами HTML-страницы. Ваша задача - спроектировать их так, чтобы они хорошо смотрелись в меньшем, чем обычно, окне, потому что часть экрана будет занята левым кадром оглавления. Но больше эти страницы ничем не примечательны.

Макетирование фреймов - тег

Теги обрамляют текст, описывающий компоновку фреймов. Здесь размещается информация о числе фреймов, их размерах и ориентации (горизонтальной или вертикальной). У тега только два возможных атрибута: ROW, задающий число строк, и СОLS, задающий число столбцов. Между тегами не требуется указывать тег <ВОDY>. Между тегами не должно быть никаких тегов или атрибутов, которые обычно используются между тегами <ВОDY>. Единственными тегами, которые могут находиться между тегами и , являются теги , и .

Атрибут ROW

Атрибут ROW тега задает число и размер строк на странице. Количество тегов должно соответствовать указанному числу строк. Справа от знака "=" можно определить размер каждой строки в пикселах, процентах от высоты экрана или в относительных величинах (обычно это указание занять оставшуюся часть места). Следует пользоваться кавычками и запятыми, а также оставлять пробелы между значениями атрибутов. Например, следующая запись формирует экран, состоящий из трех строк: высота верхней - 20 пикселов, средней - 80 пикселов, нижней - 20 пикселов:

Следующий тег - - создает экран, на котором верхняя строка занимает 10% высоты экрана, средняя - 60%, а нижняя - оставшиеся 30%:

Можно задать относительные значения в комбинации с фиксированными, выраженными в процентах или пикселах. Например, следующий тег создает экран, на котором верхняя строка имеет высоту 20 пикселов, средняя - 80 пикселов, а нижняя занимает все оставшееся место:

<FRAMESET ROW="20, 80, *">

Атрибут СOLS

Столбцы задаются так же, как строки. Для них применимы те же атрибуты.

Задание содержимого фрейма - элемент FRАМЕ

Тег определяет внешний вид и поведение фрейма. Этот тег не имеет закрывающего тега, поскольку в нем ничего не содержится. Вся суть тега в его атрибутах. Их шесть: NАМЕ, SCROLLING, NORESIZE и SRC.

Атрибут NАМЕ

Если вы хотите, чтобы при щелчке мышью на ссылке соответствующая страница отображалась в определенном фрейме, необходимо указать этот фрейм, чтобы страница "знала", что куда загружать. В предыдущих примерах мы назвали большой правый фрейм main, и именно в нем появлялись страницы, выбранные из оглавления в левом фрейме. Фрейм, в котором отображаются страницы, называется целевым (target). Фреймы, которые не являются целевыми, именовать не обязательно. Например, можно записать такую строку:

Имена целевых фреймов должны начинаться с буквы или цифры. Одни и те же имена разрешается использовать в нескольких фреймовых структурах. По щелчку мыши соответствующие страницы будут отображаться в именованном фрейме.

Атрибут SCROLLING

Атрибут SCROLLING дает возможность пользоваться прокруткой во фрейме. Возможные варианты: SCROLLING=yes, SCROLLING=nо, SCROLLING=аutо. SCROLLING=yes означает, что во фрейме всегда будут полосы прокрутки, даже если это не нужно. Если задать SCROLLING=no, полос прокрутки не будет, даже когда это необходимо. Если документ слишком большой, а вы задали режим без прокрутки, документ просто будет обрезан. Атрибут SCROLLING=аutо предоставляет браузеру самому решать, требуются полосы прокрутки или нет. Если атрибут SCROLLING отсутствует, результат будет таким же, как при использовании SCROLLING=аutо.

Атрибут NORESIZE

Как правило, пользователь может, перемещая границу фрейма мышкой, изменить его размер. Это удобно, но не всегда. Иногда требуется атрибут NORESIZE. Помните: все границы фрейма, для которого вы задали NORESIZE, становятся неподвижными - соответственно, может оказаться так, что размеры соседних фреймов тоже станут фиксированными. Пользуйтесь этим атрибутом с осторожностью.

Атрибут SRС

Атрибут SRС применяется в теге FRАМЕ при разработке фреймовой структуры для того, чтобы определить, какая страница появится в том или ином кадре. Если вы зададите атрибут SRС не для всех фреймов, у вас возникнут проблемы. Даже если страницы, отображаемые во фрейме, выбираются в соседнем фрейме, вы должны по крайней мере задать для каждого фрейма начальную страницу. Если вы не укажете начальную страницу и URL, фрейм окажется пустым, а результаты могут быть самыми неожиданными.

Атрибут ТАRGЕТ

Чтобы разобраться с атрибутом ТАRGЕТ, необходимо вернуться к простому примеру с кадром оглавления. Когда пользователь щелкает мышкой на одной из ссылок в левом фрейме, соответствующая страница должна появиться в правом фрейме, а оглавление остается неизменным. Чтобы этого добиться, нужно определить целевой фрейм ТАRGЕТ, в котором будет отображаться страница для каждого пункта оглавления. Целевые фреймы задаются в ссылках левого фрейма. Вот зачем всем кадрам во фреймовой структуре были присвоены имена. Правый фрейм называется main, так что нужно в каждой ссылке добавить атрибут ТАRGЕТ="main", в результате чего соответствующая страница появится во фрейме main. Обратите внимание: каждая ссылка содержит атрибут ТАRGЕТ="main", который по щелчку мыши отображает страницу во фрейме main.

Пример использования страницы с фреймами

Основная страница, задающая структуру фреймов

<HTML>

Страница 1.htm

1фрейм 222

333</

Страница 2.htm

2фрейм

Страница 3.htm

3фрейм

Практические задания: Понятие фрейма.

1. Создайте HTML документ с 2 фреймами. Ширина первого фрейма 20% ширины окна, второго - 80%.

2. Создайте HTML документ с 2 фреймами. Высота первого фрейма 200 точек, второго - 400.

3. Создайте HTML документ с 3 фреймами. В первой строке 1 фрейм высотой 110 точек. Во второй строке 2 фрейма. Ширина первого фрейма 200 точек, второго - оставшаяся часть окна. В верхний фрейм выведите странцу с рисунком, в левом нижнем фрейме страница с 2 ссылками. Страницы, на которые ведут ссылки отображаются в правом фрейме.

4. Создайте HTML документ с 5 фреймами. В первой строке 1 фрейм высотой 150 точек. Во второй строке 3 фрейма. Ширина крайних фреймов 100 точек, второго - оставшаяся часть окна. В последней строке 1 фрейм. В верхний и нижний фреймы выведите странцы с рисунками. В крайних фреймах второй строки список ссылок (по 2 ссылки). Страницы, на которые ведут ссылки отображаются в среднем фрейме.