Лабораторная работа №2. Графика и фреймы

Цели и задачи

Цель:Научиться работать с HTML – документами, создавать многостраничные сайты на основе фреймов, размещать на них графику, звук, видео, бегущую строку

Задание:Создайте HTML – страничку, разместив на ней не менее 3 фреймов. Оформите вид страницы с фреймами как главную страницу сайта различными шрифтами, заголовками, рамками, бегущей строкой. Во фреймах разместите навигационную панель, ранее разработанную страницу в соответствии с темой, выбранной в лабораторной работе №1.

Теоретические сведения

Бродя по Интернету, вы наверняка не раз видели странички разбитые на несколько частей. Эти части и называются фреймами. Программно разбиение окна браузера на фреймы реализуется так:

1. Создается html файл (обычно это первая страничка сервера по имени index.htm) в котором задаются размеры и количество фреймов, а также имена файлов соответствующих фреймам и некоторые атрибуты для каждого фрейма.

2. Создаются отдельные html странички для каждого фрейма.

Попробуем создать html файл реализующий разбиение экрана на две части. Для этого нам понадобится два обычных html файла с именами homepage.htm и menu.htm. Главный файл обзовем к примеру index.htm, вот как он должен выглядеть:

<HTML>
<TITLE>Названиевашейстранички</TITLE>
<FRAMESET cols="*,140">
<FRAME SRC="homepage.htm" NAME="frame1">
<FRAME SRC="menu.htm" NAME="frame2">
</FRAMESET>
</HTML>

Рассмотрим каждый тэг по отдельности:

<HTML></HTML> и <TITLE><TITLE> - стандартные тэги для всех html файлов

<FRAMESET> в этом тэге задается количество рядов или столбцов ROWS и COLS соответственно, а также их размеры и расположение. Существует три способа задания их размера:

по пикселам- просто напишите высоту или ширину в пикселах.
процентами- пишите сколько процентов от окна браузера вы хотите отдать фрейму и после цифр ставите знак % Также позаботьтесь чтобы все ваши %`ы в суме составляли 100%.
звездочка- все оставшееся место в окне равняется значку *. Например вы можете написать 20%,20%,60% или 20%,20%,* и никакой разницы не будет.

В этом же тэге можно задать толщину разграничительной линии и окаймляющей рамки командами FRAMEBORDER="X" и BORDER="Y" где x и y толщина в пикселах.

В нашем случае (<FRAMESET cols="*,140">) мы разделяем окно на два столбца, правое шириной в 140 пикселов, а левое шириной во весь оставшийся экран

<FRAME> - здесь задаются атрибуты для каждого фрейма персонально.

Команда SRC задает имя файла который загрузится в этом фрейме, в нашем случае имя файла homepage.htm (<FRAME SRC="homepage.htm" ...).

Команда NAME задает имя данного фрейма, в нашем случае имя "frame1" . Имя необходимо для того чтобы в последствии указать к какому фрейму использовать ссылку. К примеру мы хотим чтобы нажимая на ссылку в фрейме содержащем файл menu.htm содержимое файла ссылки показывалось в фрейме содержащем файл homepage.htm. Для этого нам необходимо откоректировать html код ссылки:

<A HREF="file.htm">file</A> - что было
<A HREF="file.htm" TARGET="frame1">file</A> - что должно быть
А если вы хотите чтобы файл загрузился в главном окне браузера то напишите в ссылке TARGET="_top"

Также в этом тэге можно задать величину границы фрейма за которую ничего кроме бэкграунда не может заходить. Это делается командами MARGINи MARGINHEIGHT="y", где x и y величина в пикселах.

</FRAMESET> закрывающий тэг.

Вот несколько примеров создания фреймов:

Изображения в HTML-документе

Встроить изображение в HTML-документ очень просто. Для этого нужно только иметь это самое изображение в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg) и одну строчку в HTML-тексте.

Допустим, нам нужно включить в документ изображение, записанное в файл picture.gif, находящийся в одном каталоге с HTML-документом. Тогда строчка будет вот такая:

Метка <IMG SRC="[имя файла]"> может также включать атрибут ALT="[текст]", например:

Встретив такую метку, браузер покажет на экране текст Картинка и начнет загружать на его место картинку из файла picture.gif. Атрибут ALT может оказаться необходимым для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений (при медленном подключении к Интернет это делается для экономии времени).

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

Разберем все, что мы знаем об изображениях, с помощью пример 6.

<HTML><HEAD><TITLE>Пример 6</TITLE></HEAD><BODY><H1>Изображения</H1><P>Изображение можно встроить очень просто: </P><P><IMG SRC="picture.gif"></P><P>Кроме того, изображение можно сделать "горячим", то есть осуществлять переход при нажатии на изображение:</P><P><A HREF="index.html"><IMG SRC="picture.gif"></A></P></BODY></HTML>

Обратите внимание на вторую часть примера. Если ссылка на изображение находится между метками <A HREF="..."> и </A>, изображение фактически становится кнопкой, при нажатии на которую происходит переход по ссылке

Тег<MARQUEE> позволяет создать так называемую бегущую строку, т. е. эффект прокручивания текста в заданном поле. Характеристики бегущей строки задаются следующими атрибутами:

WIDTH— ширина поля бегущей строки в пикселах или процентах от ширины окна;
HEIGHT— высота поля бегущей строки (в пикселах);
HSPACE, VSPACE — интервалы по горизонтали и вертикали между текстом строки и краями ее поля (в пикселах);
ALIGN—положение текста бегущей строки в ее поле; возможные аргументы:

ТОР (вверху);
BOTTOM (внизу);
MIDDLE(посередине);

DIRECTION— определяет направление движения; возможные аргументы:

LEFT(справа налево);
RIGHT(слева направо);

BEHAVIOR— характер движения строки; возможные аргументы:

SCROLL— текст появляется от одного края и скрывается за другим;
SLIDE— строка вытягивается из одного края поля и останавливается у другого края;
ALTERNATE— задаетпеременноенаправлениедвижения, отодного края к другому, а затем обратно;

LOOP— количество повторений текста в бегущей строке, задаваемое числом; если необходимо «бесконечное» количество повторений, то следует задать аргумент в виде ключевого словаINFINITY.

Атрибут LOOPне влияет на поведение бегущей строки, если для атрибута BEHAVIORзаданы аргументы ALTERNATEилиSLIDE;

SCROLLAMOUNT — устанавливает длину (в пикселах) «прыжка» те кета за один такт; при большом значении этого параметра текст движется рывками, а при малом — замедленно;
SCROLLDELAY— определяет величину паузы между тактами перемещения текста в миллисекундах;
BGCOLOR— устанавливает цвет поля бегущей строки, задаваемый шестнадцатеричным числом или именем.

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

В следующем примере бегущая строка «бесконечно» прокручивается на желтом поле шириной 75% от ширины окна браузера.

<HTML>
<НЕАD><ТIТLЕ>Бегущая строка</ТIТLЕ></НЕАD>
<BODY>
Ниже расположена "бегущая строка"
<MARQUEE HEIGHT=50 HSPACE=5 VSPACE=5 ALIGN=TOP BGCOLOR=YELLOW DIRECTION=LEFT LOOP=INFINIТЕ BEHAVIOR=SCROLL SCROLLAMOUNT=5 SCROLLDELAY=100>
<H1> Это сообщение будет прокручиваться на экране справа налево</Н1></MARQUEE>
</BODY>
</HTML>

Дата добавления: 2018-04-04; просмотров: 625; Мы поможем в написании вашей работы!

Поделиться с друзьями:

⇐ Предыдущая 1 234 5 6 7 8 9 10 Следующая ⇒

Мы поможем в написании ваших работ!