42243

Использование карт ссылок и фреймов в Web-страницах

Лабораторная работа

Информатика, кибернетика и программирование

работа 207 Использование карт ссылок и фреймов в Webстраницах 1. Программное обеспечение: операционная система Windows Webбраузер Internet Explorer версии 6. Клиентский вариант карты ссылок Карты ссылок Imgemp Imge Mp re Mp Clickble Mp Sensitive Mp предоставляют пользователям возможность перехода на другие Webстраницы при щелчке мышью по отдельным фрагментам изображения. При использовании обычной гиперссылки для изображения переход на другую Webстраницу выполняется при щелчке мышью в любом месте изображения т.

Русский

2013-10-28

209.5 KB

1 чел.

 13 -

Лабораторная Шонин В.А. работа 2-07

Использование карт ссылок и фреймов в Web-страницах

1. Цель работы

Целью работы является знакомство со средствами создания карт ссылок  и фреймов в языке HTML.

2. Состав рабочего места

2.1. Оборудование: IBM-совместимый   персональный компьютер (ПК).

2.2. Программное обеспечение: операционная система Windows, Web-браузер Internet Explorer версии 6.0 и выше.

3. Краткие теоретические сведения

3.1.  Клиентский вариант карты ссылок

Карты ссылок (Imagemap, Image Map, Area Map, Clickable Map, Sensitive Map) предоставляют пользователям возможность перехода на другие Web-страницы при щелчке мышью по отдельным фрагментам изображения. Эти фрагменты называются активными областями изображения. При использовании обычной гиперссылки для изображения, переход на другую Web-страницу выполняется при щелчке мышью в любом месте изображения, т.е. гиперссылка определена для всего изображения. Если для изображения определена карта ссылок, каждая активная область может быть связана  с помощью определенной для нее гиперссылки со своей Web-страницей.  Обычно активные области и ссылки, на которые они указывают,  тем или иным способом выделяются и задаются на изображении.

Существуют два варианта программной реализации карты ссылок – клиентский вариант (client-side image map) и серверный вариант (server-side image map).

При использовании клиентского варианта (в модуле Client-side Image Map) описание конфигурации активных областей выполняется в документе HTML и переход по ссылке в выбранную активную область выполняет Web-браузер. Для этого используются атрибут usemap в элементе <img>, а также элементы <map> и <area>. Значением атрибута usemap является ссылка на описание конфигурации карты, например

<img src="map.gif" usemap="#imagemap">

В этом примере изображение, хранящееся в файле с именем map.gif, является опорным для карты ссылок, реализуемой в клиентском варианте. Описание конфигурации активных областей должно располагаться в том же файле, что и элемент <img>, и иметь для данного примера имя imagemap.

Для описания конфигурации областей карты ссылок используется контейнер <map>…</map>. Помимо общих атрибутов class, dir, id, lang, style и title  в элементе <map>  можно использовать атрибут name. Значение этого атрибута или атрибута id определяет метку, на которую задана ссылка в атрибуте usemap элемента <img>, например:

<map id="imagemap">

Внутри контейнера <map>…</map> располагаются описания активных областей карты. Каждая активная область описывается в элементе <area>. Активные области могут перекрываться. В случае, если некоторая точка относится одновременно к нескольким активным областям, будет реализована та ссылка, описание которой располагается первым в списке областей.

Помимо общих атрибутов class, dir, id, lang, style и title  в элементе <area>  используются атрибуты, представленные в табл. 7.1.

Таблица 7.1. Допустимые атрибуты элемента <area>

Имя атрибута

Что определяет

Значение по умолчанию

alt

Текст для описания данной активной области.

coords

Координаты x и y точек активной области.

нет

href

URL активной области.

нет

nohref

Данная активная область не имеет ссылки (атрибут задается по имени, без значения).

нет

shape

Форму активной области.

rect

target

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

нет

Атрибут shape определяет форму активной области. Допустимыми значениями этого атрибута являются значения, представленные в табл. 7.2.

Таблица 7.2. Допустимые значения атрибута shape

Значение атрибута shape

в элементе

<area>

Действие

default

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

circle

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

poly

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

rect

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

Значением атрибута coords является список координат точек, определяющих активную область, разделенных запятыми. Координаты записываются в виде целых неотрицательных чисел. Начало координат располагается в верхнем левом углу изображения, которому соответствует значение 0,0. Первое число определяет координату x (по горизонтали), второе – координату y (по вертикали). Список координат зависит от типа области.

Для области типа rect задаются четыре числа: координаты x и y верхнего левого и правого нижнего углов прямоугольника. Для области типа circle задаются три числа – координаты x и y центра круга и радиус. Для области типа poly задаются координаты x и y вершин многоугольника в нужном порядке. Последняя точка в списке координат не обязательно должна совпадать с первой. Если они не совпадают, то при интерпретации данных для этой формы области Web-браузер автоматически соединяет последнюю точку с первой. Область типа default не требует задания координат. Значение default атрибута shape не воспринимается в Internet Explorer, поэтому если необходимо задать в качестве активной области все изображение, необходимо задать область типа rect, в котором координаты левого верхнего угла равны (0,0), а ширина и высота области совпадают с шириной и высотой изображения (эта область должна быть задана последней).   

Атрибуты href и nohref являются взаимоисключающими. Если не задан не один из этих атрибутов, то считается, что для данной области не имеется   ссылки. То же самое явно определяет атрибут nohref, не требующий значения. Атрибут href определяет адрес ссылки, который может записываться в абсолютной или относительной форме.

Атрибут target употребляется при работе с фреймами и будет рассмотрен в модуле Frames.

Атрибут alt позволяет записать альтернативный текст для каждой из активных областей изображения. В Internet Explorer атрибут alt действует аналогично атрибуту title.

3. 2. Модуль Frames 

Фреймы, или кадры,  позволяют разбить окно просмотра Web-браузера на несколько прямоугольных областей, располагающихся рядом друг с другом. В каждую из этих областей можно загрузить отдельный документ HTML, просмотр которого осуществляется независимо от других. Между фреймами, как и между окнами, можно организовать взаимодействие, которое заключается в том, что выбор ссылки Шонин В.А.в одном из фреймов может привести к загрузке нужного документа в другой фрейм или окно Web-браузера.

3.2.1. Формирование фреймов

В модуле Frames определены элементы <frameset>, <frame> и <noframes>, предназначенные для работы с фреймами.

Фреймы определяются в контейнере <frameset> … </frameset>.  Этот контейнер используется для страниц, содержащих фреймы, вместо контейнера <body> … </body> обычной Web-страницы. Внутри контейнера <frameset> … </frameset> могут содержаться только одиночные элементы <frame> и вложенные контейнеры <frameset>…</frameset>. Кроме того, если документ HTML, содержащий описания фреймов, оформлен в соответствии со спецификацией HTML 4.01, необходимо использовать следующее объявление DTD:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

       "http://www.w3.org/TR/REC-html40/frameset.dtd">.

Основными атрибутами элемента <frameset> являются Шонин В.А. атрибут rows (строки) и атрибут cols (столбцы). Можно определить значения для rows или cols, или обоих вместе. Необходимо определить, по меньшей мере, два значения хотя бы одного из этих параметров. Если другой атрибут отсутствует, то его значение принимается равным 100%.

Список значений атрибутов rows и cols представляет собой разделенный запятыми список значений, которые могут задаваться тремя разными способами:

  •  в пикселях;
  •  в процентах;
  •  в относительных единицах.

Число строк или столбцов определяется количеством значений в соответствующем списке. Например, запись

<frameset rows="100,240,140">

определяет набор грех фреймов. Первый фрейм (первая строка) имеет высоту 100 пикселей, второй – 240 и последний – 140 пикселей. Если сумма значений в атрибутах rows или cols не равно разрешению экрана по высоте или ширине, значения будут пропорционально масштабированы, чтобы в итоге получилось ровно высота или ширина экрана.

В примере

<frameset rows="25%,50%,25%">.

создаются три фрейма, размещаемые как строки во всю ширину экрана. Верхняя строка займет 25% от доступной высоты экрана, средняя строка – 50% и нижняя – 25%. Если сумма заданных процентов не равна 100%, то значения будут пропорционально масштабированы, чтобы в итоге получилось ровно 100%.

Если при задании значений в пикселях или процентах вместо последнего параметра задан символ "*", то последний фрейм займет все оставшееся по ширине или высоте пространство.

Значения в относительных единицах выглядят следующим образом:

<frameset cols="*,2*,3*">.

Символ "*" используется для пропорционального деления ширины или высоты экрана. Каждая звездочка представляет собой одну часть целого. Складывая все значения чисел, стоящих перед символом "*" (если число опущено, то подразумевается единица), получим знаменатель дроби. В этом примере первый столбец займет 1/6 часть от общей ширины окна, второй столбец – 2/6 (или 1/3), а последний – 3/6 (или 1/2).

Значения атрибутов cols и rows предпочтительнее задавать в процентах или относительных единицах, поскольку количество пикселей, доступных для фреймов, зависит от разрешения дисплея пользователя.

Количество параметров в атрибутах cols или rows определяет количество фреймов и/или наборов фреймов, задаваемых в данном наборе фреймов, т.е. количество элементов <frame> и/или <frameset> в контейнере  должно быть равно количеству параметров атрибутах cols или rows элемента <frameset>.

Набор фреймов по отношению к содержащимся в нем фреймам и наборам фреймов является родительским элементом (parent element), а эти фреймы и наборы фреймов являются элементами-потомками (children elements) по отношению к родительскому элементу.

Если набор фреймов (контейнер <frameset>…</frameset>) содержит, в свою очередь, один или несколько наборов фреймов, то  такой набор называют набором с вложенными фреймами.  

Наиболее важным атрибутом элемента <frame> является атрибут src. Его значение определяет Шонин В.А.адрес URL документа, который будет загружен изначально в данный фрейм. Обычно в качестве такого адреса записывается имя файла HTML, расположенного в том же самом каталоге, что и основной документ.

Пример описания набора из двух фреймов:

<frameset rows="25%,75%">

<frame src="Page1.html">

<frame src="Page2.html">

</frameset>

Пример описания набора, содержащего вложенные фреймы:

<frameset cols="50%,50%">

<frame src="Page1.html">

<frameset rows="40%,60%">

 <frame src="Page2-1.html">

 <frame src="Page2-2.html">

</frameset>

</frameset>

3.2.2. Элемент <frameset>

В дополнение к общим атрибутам class, id, lang, style и title, для элемента <frameset> определены атрибуты, представленные в табл. 7.3.

Таблица 7. 3. Атрибуты элемента <frameset>  

Имя атрибута

Что определяет

Значение по умолчанию

border

Толщину рамок фреймов (в пикселях).

зависит от Web-браузера

bordercolor

Цвет рамок фреймов.

lightgray

cols

Количество и размер фреймов по горизонтали.

100%

frameborder

Будут ли выводится рамки фреймов.

yes

framespacing

Расстояние между фреймами (в пикселях).

2

rows

Количество и размер фреймов по вертикали.

100%

Атрибуты frameborder, border, bordercolor и framespacing хотя и не определены в спецификациях HTML 4.01 и XHTML, широко используются в Web-браузерах.

Атрибут frameborder определяет вывод рамок фреймов. Его допустимые значения – no (рамки не выводятся) и yes (рамки выводятся).

Атрибут border позволяет задать толщину рамок (в пикселях) (если задано border="0", то рамки не выводятся).

Разница между заданием атрибута frameborder="no" и заданием атрибута border="0" заключается в том, что в первом случае между фреймами в Web-браузерах Opera и Internet Explorer остается  полоса, а во втором случае фреймы вплотную прилегают друг к другу.  

Следует отметить, что если атрибут border встречается в нескольких вложенных элементах, в Internet Explore используется только значение атрибута border для самого внешнего элемента <frameset>. Для того, чтобы задать разную толщину рамок для вложенных фреймов, в Internet Explorer следует использовать атрибут framespacing.

3.2.3. Элемент <frame>

Для одиночного элемента <frame>, определяющего отдельный фрейм, помимо общих атрибутов class, id, lang, style и title,  можно задать Шонин В.атрибуты, приведенные в табл. 7.4.

Таблица 7.4. Атрибуты элемента <frame> 

Имя атрибута

Что определяет

Значение по умолчанию

border

Толщину рамок фрейма (в пикселях).

зависит от Web-браузера

bordercolor

Цвет рамок фрейма.

lightgray

frameborder

Будут ли выводится рамки фрейма.

1

framespacing

Расстояние между фреймами (в пикселях).

2

marginheight

Расстояние (сверху и снизу) между содержимым фрейма и его рамками.

зависит от Web-браузера

marginwidth

Расстояние (слева и справа) между содержимым фрейма и его рамками.

10

name

Имя фрейма.

нет

noresize

Запрет на изменение размеров фрейма.

размеры можно менять

scrolling

Наличие у фрейма полос прокрутки.

auto

src

URL Web-страницы, выводимой во фрейме.

нет

Атрибут name определяет имя фрейма, которое может использоваться для ссылки к данному фрейму. Обычно ссылка задается из другого фрейма, располагающегося на той же самой странице. Например:

<frame src="sample.htm" name="Frame_1" />                  

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

Атрибуты marginwidth и marginheight дают возможность устанавливать ширину соответственно  вертикальных и горизонтальных полей фрейма в пикселях, т.е. эти атрибуты  определяют пространство внутри фрейма, в пределах которого не будет располагаться никакая информация. Минимально допустимое значение атрибутов marginwidth и marginheight равно единице.

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

Таблица 7.5. Допустимые значения атрибута scrolling

Значение атрибута scrolling в элементе

<frame>

Действие

auto

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

no

Отмена вывода полос прокрутки.

yes

Полосы прокрутки выводятся всегда.

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

Атрибуты border, bordercolor и framespacing в элементе <frame> выполняют те же функции, что и соответствующие атрибуты элемента <frameset>.

Для большинства Web-браузеров допустимыми значениями атрибута frameborder являются значения no (рамки не выводятся) и yes (рамки выводятся).

3.2.4. Элемент <noframes>

В контейнере  <noframes>...</noframes>, помещаемом внутри контейнера <frameset>...</frameset>,  записывается альтернативная текстовая информация для Web-браузеров, не имеющих возможности работы с фреймами. В элементе <noframes> можно задавать только общие атрибуты class, dir, id, lang, style и title.

3.2.5. Загрузка Web-страниц во фреймы

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

Взаимодействие между Шонин В.А.фреймами заключается в возможности загрузки документов в выбранный фрейм по командам из другого фрейма. Для этой цели используется атрибут target элемента <а>. Этот  атрибут определяет имя фрейма (заданное в этом фрейме с помощью атрибута name) или окна Web-браузера, в которое будет загружаться документ, на который указывает данная ссылка.

Пусть задан следующий набор фреймов:

<frameset rows="25%,75%">

<frame src="contents.html">

<frame src="Page1.html" name="outFrame">

</frameset>

В этом случае, если задан элемент <a> со следующими атрибутами:

<a href="Page2.html" target="outFrame">Страница 2</a>,

то  при щелчке по этой ссылке во фрейм с именем outFrame будет вместо Web-страницы Page1.html загружена страница Page2.html.   

По умолчанию (при отсутствии атрибута target) документ загружается в текущий фрейм (или окно). Это умолчание может быть изменено заданием в элементе <base>  атрибута target с нужным значением. Задание имени фрейма, в который осуществляется загрузка по умолчанию, очень удобно для тех случаев, когда большое количество ссылок должно направлять документы в определенный фрейм. Типичной является ситуация, когда в одном из фреймов размещается оглавление,  ссылки из которого загружают соответствующие документы в смежный фрейм.

Имена фреймов должны начинаться с латинской буквы или цифры. В качестве имени может задаваться имя существующего окна или фрейма, но можно указываться новое имя, под которым будет открыто новое окно. Имеете четыре зарезервированных имени, при задании которых выполняются специальные действия. Эти имена начинаются с символа подчеркивания "_" и могут иметь значения, представленные в табл. 7.6.

Таблица 7.6. Зарезервированные значения атрибута target

Зарезервированные значения атрибута target в элементе <a>

Действие

_blank

Обеспечивает загрузку документа в новое окно (это окно не будет иметь имени, а, следовательно, в него невозможно будет загрузить другой документ).

_parent

Вызывает загрузку документа в область, занимаемую фреймом-родителем текущего фрейма (при отсутствии фрейма-родителя данное значение параметра действует так же, как значение "_top").

_self

Загрузка документа будет произведена в текущий фрейм (или окно) (такую запись следует использовать для обхода умолчания, заданного элементом <base>).

_top

Вызывает загрузку документа в полное окно (если документ располагается в полном окне, то данное значение действует так же, как значение "_self").

Любое другое имя в атрибуте target, начинающееся с символа "_", недопустимо.

3.3. Элемент <iframe>

Модуль Iframe содержит элемент <iframe>, который позволяет задавать Шонин В.А.так называемые «плавающие» фреймы. Контейнер <iframe>...</iframe> позволяет включить фрейм прямо текст документа HTML (при этом нет необходимости использовать элементы <frameset> и <frame>). Помимо общих атрибутов class, id, style и title,  для элемента <iframe> можно задать Шонин В.атрибуты, представленные в табл. 7.7.

Таблица 7.7. Атрибуты элемента <iframe>

Имя атрибута

Что определяет

Значение по умолчанию

frameborder

Будут ли выводится рамки фрейма.

1

height

Высота фрейма (в пикселях или процентах от высоты экрана).

Нет

name

Имя фрейма.

Нет

scrolling

Наличие у фрейма полос прокрутки.

auto

src

URL Web-страницы, выводимой во фрейме.

Нет

width

Ширина фрейма (в пикселях или процентах от высоты экрана).

Нет

«Обтекание» фрейма задается также, как для изображения и таблицы (с помощью свойства float). Кроме того, с помощью свойства vertical-align можно задать вертикальное выравнивание внутреннего фрейма. Ширину полей, границы и отступы между границей и фреймом по различным направлениям также, как для изображений и таблиц, задаются с помощью соответствующих свойств стилей.  

Атрибуты name,  scrolling и src имеют те же значения и действуют аналогично соответствующим атрибутам элемента <frame>.

В контейнере <iframe>...</iframe> можно также поместить текст, который будет выводиться в том случае, если Web-браузер не поддерживает «плавающие» фреймы.

Пример описания «плавающего» фрейма:

<iframe scrolling="yes" src="FramePage.html"  

width="50%" height="300"></iframe>.

4. Порядок выполнения работы

  1.  Откройте модифицированную в лабораторной работе 2-06 Web-страницу для вашего варианта в текстовом редакторе.
  2.  Поместите содержимое контейнера <style>…</style> в отдельный файл с именем stylesномер-варианта.css. Удалите из документа HTML контейнер и вставьте на его место элемент <link> со ссылкой на созданную вами внешнюю таблицу стилей (см. разд. 3.8.2 в лабораторной работе 2-04).
  3.  Создайте файл Headerномер-варианта.html и скопируйте в него следующие фрагменты вашего документа в заданной последовательности: начало документа (с первой строки до строки <body>), контейнер <h1>…<h1>, элементы </body>  и </html>. Замените содержимое контейнера <title>…</title> на слово "Заголовок".
  4.  Создайте файл Contentномер-варианта.html и скопируйте в него следующие фрагменты вашего документа в заданной последовательности: начало документа (с первой строки до строки <body>), заголовок "Оглавление", строки оглавления документа (с гиперссылками), элементы </body>  и </html>. Замените содержимое контейнера <title>…</title> на слово "Оглавление".
  5.  Создайте файл Introномер-варианта.html (если в документе имеется введение) или файл Part-01-номер-варианта.html (если документ начинается с первого раздела)  и скопируйте в него следующие фрагменты вашего документа в заданной последовательности: начало документа (с первой строки до строки <body>), введение или первый раздел с заголовком, элементы </body>  и </html>. Замените содержимое контейнера <title>…</title> на слово "Введение" или наименование первого раздела.
  6.  Аналогичным образом скопируйте в отдельные файлы остальные разделы документа с их заголовками и новыми значениями контейнера <title>…</title>.
  7.  Откройте файл  Contentномер-варианта.html в текстовом редакторе и измените в строках оглавления внутренние ссылки на разделы в атрибуте href ссылками на соответствующие Web-страницы разделов, а ссылки на подразделы и пункты – внутренними ссылками в страницах разделов.
  8.  Поместите созданные вами в лабораторной работе 2-02 рисунки в папку images вашей папки.
  9.  Откройте, находясь в вашей папке программу ImageReady. Откройте в ней ваш рисунок, содержащий элементы "Оглавление" и "Стрелка «Вперед»". Задайте карту ссылок для элементов этого рисунка (см. разд. 3.3.5.3 в лабораторной работе 2-03). Для элемента "Оглавление" параметр URL – ссылка на файл оглавления, а для элемента "Стрелка «Вперед»" – ссылка на Web-страницу с первым разделом (если в документе есть введение) или на Web-страницу со вторым разделом (если в документе нет введения). В параметре Цель задайте значение "main". Сохраните описание карты ссылок в файле с произвольным именем.
  10.   Скопируйте из этого файла элемент <img> и контейнер <map>. Откройте в текстовом редакторе  Web-страницу с введением (если оно есть) или Web-страницу первого раздела (если введения нет). Вставьте элемент  <img> и контейнер <map> в конец тела страницы (перед элементом </body>). Проверьте правильность ссылки на рисунок в атрибуте src элемента <img>.
  11.  Откройте в ImageReady ваш рисунок, содержащий элементы "Стрелка «Назад»" и "Оглавление". Задайте карту ссылок для элементов этого рисунка (см. разд. 3.3.5.3 в лабораторной работе 2-03). Для элемента "Оглавление" параметр URL – ссылка на файл оглавления, а для элемента "Стрелка «Назад»" – ссылка на Web-страницу с предпоследним разделом. В параметре Цель задайте значение "main". Сохраните описание карты ссылок в файле с произвольным именем.
  12.  Повторите операцию вставки, описанную в п.10, для Web-страницы, содержащей последний раздел документа.
  13.  Откройте в ImageReady ваш рисунок, содержащий элементы "Стрелка «Назад»", "Оглавление" и "Стрелка «Вперед»". Задайте карту ссылок для элементов этого рисунка (см. разд. 3.3.5.3 в лабораторной работе 2-03). Для элемента "Оглавление" параметр URL – ссылка на файл оглавления, для элемента "Стрелка «Назад»" – ссылка на Web-страницу, содержащую введение (если введение есть), либо  на Web-страницу, содержащую первый раздел  (если введения нет), а для элемента "Стрелка «Вперед»" – ссылка на Web-страницу, содержащую второй раздел (если введение есть), либо  на Web-страницу, содержащую третий раздел  (если введения нет). В параметре Цель задайте значение "main". Сохраните описание карты ссылок в файле с произвольным именем.
  14.  Повторите операцию вставки, описанную в п.10, для Web-страницы, содержащей первый раздел документа (если введение есть) или второй раздел документа (если введения нет).  Затем повторите операцию вставки для всех следующих Web-страниц документа до предпоследней Web-страницы включительно. При этом в каждой Web-странице скорректируйте атрибут href в элементе (или элементах)  <area> для элемента "Стрелка «Назад»" так, чтобы он содержал ссылку на Web-страницу  с предыдущим разделом, а тот же атрибут  в элементе (или элементах)  <area> для элемента "Стрелка «Вперед»" так, чтобы он содержал ссылку на Web-страницу  со следующим разделом.
  15.  Проверьте действие гиперссылок в картах ссылок на ваших Web-страницах в Web-браузере и покажите результаты преподавателю.
  16.  Создайте документ HTML с именем indexномер-варианта.html, описывающий фреймы и имеющий структуру, представленную на рис. 7.1.

 

Рис. 7.1. Структура фреймов для Web-страниц

  1.  Задайте горизонтальную рамку фреймов толщиной 10 пикселей, вертикальную рамку – толщиной 2 пикселя, а также расстояние 20 пикселей от границы фрейма для разделов документа (по вертикали и горизонтали).
  2.  Чтобы все Web-страницы выводились во фрейм с именем main, добавьте во всех строках оглавления (файл Contentномер-варианта.html) в элементе <a> атрибут target со значением "main".
  3.  Создайте (в файле stylesномер-варианта.css) правило стиля для селектора div класса icenter со значением свойства выравнивания текста, равным "center".
  4.  Создайте (в файле stylesномер-варианта.css) правило стиля для селектора p класса iframe с той же гарнитурой шрифта, что и для правила стиля селектора p, выравниванием по ширине  и значением размера шрифта на 2 пункта меньшим, чем задано в правиле стиля селектора p.  
  5.   Создайте правило (в файле stylesномер-варианта.css) стиля для селектора iframe класса left со значением свойства float, равным "left".
  6.  Создайте один внутренний фрейм, выровненный по центру (для этого контейнер <iframe>…</iframe> должен быть заключен в контейнер <div>…</div> класса icenter) и один внутренний фрейм с «обтеканием» текста  (для этого элемент <iframe> должен быть класса left). Предварительно абзац или абзацы, содержащие внутренний фрейм должны быть вырезаны из свой Web-страницы и помещены в файл Include1-номер-варианта.html  (для внутреннего фрейма, выровненного по центру) или в файл   Include2-номер-варианта.html (для внутреннего фрейма, выровненного влево). Каждый из этих файлов оформляется аналогично отдельной Web-странице, т.е. перед вырезанным абзацем или абзацами должна быть вставлена заголовочная часть (с первой строки до элемента <body> включительно), а после абзацев должны быть вставлены элементы </body> и </html>.  Внутренние фреймы должны быть помещены в то же место, где находились вырезанные фрагменты.
  7.   Вырезаемые фрагменты текста, их форматирование, а также значения атрибутов width и height элемента <iframe> для каждого варианта представлены в табл. 7.8.  

Таблица 7.8. Параметры внутренних файлов

Вариант

Формати-рование

Фрагмент

Атрибуты <iframe>

width

height

1.

по центру

Второй абзац во введении (начиная со слова "Компьютерные" и кончая словами "в сети").

40%

100

влево

Второй абзац в разд. 3.4 (начиная со слова "Представим" и кончая словом "слушают").

60%

100

2.

по центру

Второй абзац в разд. 3 (начиная со слова "Обеспечение" и кончая словом "телевидением").

50%

100

влево

Первый абзац в разд. 4.1 (начиная со слова "Тюнер" и кончая словом "демодулятор").

60%

100

3.

по центру

Второй и третий абзацы во введении (начиная со слов "При передаче" и кончая словом "радиоканал").

45%

150

влево

Третий абзац в разд. 2 (начиная со слова "Наиболее" и кончая словами "на терминал").

50%

100

4.

по центру

Последний абзац в разд. 1.3.1 (начиная со слова "Последнее" и кончая словами "до 100Мбит/с").

55%

120

влево

Предпоследний абзац в разд. 3 (начиная со слова "После" и кончая словом " Windows").

65%

100

5.

по центру

Второй абзац во введении (начиная со слов "До недавнего" и кончая словом "филиалами").

50%

100

влево

Первый абзац в разд. 4.2.1 (начиная со слов "При шифровании" и кончая словом "сообщения").

65%

100

6.

по центру

Второй абзац в разд. 1.1 (начиная со слова "Когда" и кончая словами "с Интернетом").

65%

130

влево

Пятый абзац в разд. 3 (начиная со слов "Каждая часть" и кончая словом "платы").

60%

100

7.

по центру

Второй абзац в разд. 1 (начиная со слова "Человеческий" и кончая словом "линии").

50%

100

влево

Второй абзац после рис. 4  в разд. 3 (начиная со слова "QAM" и кончая словом "несущей)").

65%

100

8.

по центру

Первый абзац в разд. 3.2 (начиная со слова "Концентратор" и кончая словом "станции").

40%

110

влево

Первый и второй абзацы в разд. 4.2 (начиная со слова "Единственное" и кончая словом "конце").

60%

100

9.

по центру

Первый абзац в разд. 1 (начиная со слова "Стандартная" и кончая словом "задачи").

50%

120

влево

Первый абзац в разд. 5.2 (начиная со слова "DSLAM" и кончая словом "пользователей").

65%

100

10.

по центру

Последний абзац в разд. 4 (начиная со слов "В трехуровневой" и кончая словом "маршрутизации").

40%

100

влево

Первый абзац после табл. 1 в разд. 3 (начиная со слова "Как" и кончая словами  "к D").

65%

100

11.

по центру

Первый абзац после рис. 6 в разд. 5.2 (начиная со слова "Заготовка" и кончая словом "нить").

40%

100

влево

Первый абзац после рис. 1 в разд. 6 (начиная со слов "В физике" и кончая словом  "угла").

70%

90

12.

по центру

Второй абзац в разд. 1 (начиная со слова "Internet" и кончая словом "шлюзов").

50%

110

влево

Первый абзац после рис. 5 в разд. 4 (начиная со слов "Режим" и кончая словом  "WWW").

65%

100

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

 

5. Содержание отчета

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

6. Вопросы для самоконтроля

  1.  Каковы основные компоненты карты-изображения?
  2.  Какими двумя способами можно реализовать карты-изображения?
  3.  Как задается ссылка на карту изображение и как описывается карта-изображение?
  4.  Какие формы активных областей допустимы в карте-изображении и в каком дескрипторе они задаются?
  5.  Для каких целей используется форма активной области default?
  6.  Как задаются координаты активной области для разных форм активных областей?
  7.  Для  каких целей используется атрибут nohref в дескрипторе <area>?
  8.  Чем отличается документ, содержащий описание структуры фреймов, от обычного документа HTML?
  9.  Как в дескрипторе <frameset> задается разбиение окна просмотра на фреймы?
  10.  Для каких целей используется атрибут name в дескрипторе <frame>?
  11.  Как можно управлять выводом полос прокрутки для фреймов?
  12.  Как отменить вывод рамки между фреймами?
  13.  Как в дескрипторе <a> организуется гиперссылка с выводом Web-страницы в заданное окно фрейма?
  14.  Как задается внутренний фрейм в документе HTML?


 

А также другие работы, которые могут Вас заинтересовать

64279. Антенные решетки, синтезированные по широкополосному сигналу, для средств связи беспилотных авиационных комплексов 241.5 KB
  Объект исследования антенные устройства наземной и бортовой составляющих в составе указанных комплексов. Задача решаемая в диссертации состоит в разработке методов повышения энергетического потенциала и помехозащищенности линии связи с беспилотным летательным аппаратом...
64280. МОДЕЛІ АРХІТЕКТУРНИХ РІШЕНЬ ТА МЕТОДИ ЇХ ОЦІНКИ В ПРОЦЕСІ РЕІНЖИНІРИНГУ ІНФОРМАЦІЙНИХ СИСТЕМ ОРГАНІЗАЦІЙНОГО УПРАВЛІННЯ 3.38 MB
  Цей контекст визначає важливість задачі забезпечення ефективної трансформації архітектури інформаційної системи. Саме адекватна архітектурна модель та її послідовна реалізація в процесі розробки інформаційної системи забезпечує логічну цілісність проекту...
64281. РОЗРОБКА ТЕХНОЛОГІЇ КОВБАСНИХ ВИРОБІВ ЗІ ЗНИЖЕНИМ ВМІСТОМ НІТРИТУ 205.5 KB
  Метою роботи є наукове обґрунтування та розробка технології варених варенокопчених та сирокопчених ковбасних виробів зі зниженим вмістом нітриту натрію за...
64282. ОЦІНЮВАННЯ ОБМЕЖЕНЬ У ВИКОРИСТАННІ ЕКОНОМІЧНОГО ПОТЕНЦІАЛУ ПІДПРИЄМСТВА 147 KB
  При цьому ряд ознак впливу цих чинників інтенсивність тривалість і сила впливу та його негативний характер дозволяє стверджувати вже не про тимчасовий негативний вплив окремого чинника або їх групи а про існування...
64283. УКРАЇНСЬКЕ ПОРІВНЯЛЬНЕ ЛІТЕРАТУРОЗНАВСТВО КІНЦЯ ХІХ - ПЕРШОЇ ТРЕТИНИ ХХ СТ.: ТЕОРЕТИКО-МЕТОДОЛОГІЧНИЙ ДИСКУРС 303 KB
  Для сучасного літературознавства характерне розмаїття поглядів та співіснування різних течій, напрямів, шкіл. Посилюється інтерес до інтердисциплінарних, рецептивних, феноменологічних досліджень; вагомою є теорія дискурсу архетипів, концептів...
64284. Енерго- та ресурсозберігаючі технології муниципальної теплоенергетики на основі установок термознешодження відходів 431.04 KB
  Для досягнення поставленої мети вирішені наступні задачі: на підставі огляду літературних джерел і існуючих способів і засобів теплопостачання міст виявлені напрямки підвищення ефективності їх роботи...
64285. СІЛЬСЬКОГОСПОДАРСЬКЕ МАШИНОБУДУВАННЯ УКРАЇНСЬКОЇ РСР В УМОВАХ НАРОСТАННЯ КРИЗОВИХ ЯВИЩ 210.5 KB
  Отже вивчення стану справ у сфері сільськогосподарського машинобудування України в 1980х роках дає змогу виявити причини існуючої на той час невідповідності рівня технічного...
64286. Закономірності формування структури і фізико-механічних властивостей вольфрамових важких сплавів з високим вмістом нікель-залізної зв’язки 1.7 MB
  Закономірності отримання порошків вольфраму встановлені Меєрсоном Г. свідчать про те що у процесі відновлення вольфраму воднем з вихідних вольфрамвмісних речовин реалізуються декілька стадій що впливають на морфологію та дисперсність частинок кінцевого продукту.
64287. РОЗВИТОК РЕГІОНАЛЬНОЇ ПРОМИСЛОВОЇ ПОЛІТИКИ ДЕРЖАВИ В РИНКОВИХ УМОВАХ 326.5 KB
  З цього приводу необхідні чітко відпрацьовані в теоретичному та практичному аспектах підходи до формування та реалізації регіональної промислової політики держави.