Графические объекты

Картинки, которые используются WEB-страницами, должны быть представлены в определенном формате, а именно JPEG - фотографический формат с расширением .jpg, или GIF (Graphics Interchange Format) - формат с расширением .gif,иливформате .bmp. Файлы в других форматах могут быть не понятны броузеру.

Ярлык для размещения картинки имеет вид:

<IMG SRC = “имя файла”>, где

IMG (Image) означает изображение, а параметр SRC (Source) – источник. В качестве источника надо указать имя файла, содержащего изображение. Изображение (картинка, рисунок) будет размещено в том месте страницы, где находится ярлык.

Чтобы сообщить броузеру информацию о размере изображения, размещенного вместе с текстом, надо указать дополнительные параметры в тэге <IMG>. К таким параметрам относятся HEIGHT и WIDTH, которые позволяют броузеру в процессе загрузки текста, зарезервировать место (в пикселях) для вставки изображения. Например:

<img src = “foto1.jpg” height=100 width=65>.

Файл foto1.jpg должен находится в том же каталоге, что и создаваемая Web- страница. Изображение может быть выровнено отдельно от текста или вместе с ним по правому краю, или по левому, или по центру. Для этого в тэг надо добавить атрибут ALIGN в сочетании с параметрами TOP, BOTTOM или MIDDLE.

TOP — относительно текста выровнена верхняя часть изображения.

BOTTOM — относительно текста выровнена нижняя часть изображения.

MIDDLE — относительно текста выровнена средняя часть изображения.

Примеры записей:

1. <img src = “рис.gif ”align=top> - верхняя часть рисунка выровнена относительно текста.

(возможный вариант: <img src = “рис.bmp”align=top>)

2. <img src = “рис.gif” height=120 width=250> - заданы вертикальный и горизонтальный размеры рисунка внутри окна броузера.

3. <img src = “рис.gif” vspace = “8” hspace “8”> - задает добавление верхнего, нижнего, левого и правого пустых полей.

4. <img src = “рис.gif” border = “2”> - задает толщину рамки (в пикселях) вокруг изображения.

5. <img src = “рис.gif” alt = “рисунок”>- задает текст, заменяющий изображение. Здесь атрибут alt – обозначает альтернативный текст.

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

1. Открыть программу Word, в строке Рисование, щелкнув по пиктограмме Вставка рисунков, выбрать рисунок и кликнуть на кнопку «вставка клипов». В документе появится рисунок.

Выделите этот рисунок, скопируйте. Затем включите графический редактор Paint вставьте скопированный рисунок.

Созданный рисунок лучше сохранить с расширением .gif, но можно и с расширением .bmp.

Путь такой: Файл – Сохранить как… В диалоговом окне, в строке Тип файла выбрать строку Формат GIF, в строке Имя файла задать имя, например, рис.1. Может появится сообщение об изменении цвета. Согласитесь. Напоминаю, что рисунок должен быть сохранен в той же папке, где сохранена ваша WEB – страница.

Файлы формата gif(Graphic Interchange Format) занимают значительно меньше места, чем растровый рисунок в формате .bmp. Изображение в формате gif содержит 256 цветов, заданных палитрой. Броузеры позволяют использовать графические изображения в качестве фона. Фоновое изображение задается в тэге <body>

<body background = “имя файла.gif ”>

Задание:Откройте любой из уже созданных файлов и произведите вставку рисунка, используя любой из примеров записи.

Бегущая строка

Задается тегом Marquee. Тег Marquee поддерживается только Internet Explorer.

<marquee height="10" width="270" bgcolor="#99CCFF">
Бегущая строка
</marquee>

Все атрибуты уже знакомы: bgcolor - цвет фона бегущей строки, height - высота строки, width - ширина строки.

Также для бегущей строки можно задать и другие знакомые атрибуты - hspace, vspace и align

<marquee height="10" width="270" loop="2">
Бегущая строка

</marquee>

Параметр loopзадает сколько раз прокрутится строка, в данном примере указано loop="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 - самое быстрое.

Задание:Откройте, например, файл «Игроки», откройте просмотр в блокноте через Вид - В виде HTML, и сделайте вставку после тэга <body>

<marquee height="10" width="270" bgcolor="#99CCFF" loop="4">
Веселая команда
</marquee>

Сохраните и посмотрите, что получилось.

Гиперссылки

Для реализации гиперсвязи надо указать координаты того документа, к которому осуществляется переход.

Ярлык гиперсвязи такой: <A> … </A>

Полный синтаксис имеет вид:

<A HREF = “имя _файла”> подсвеченный текст </A>.

HREF(Hyper Reference - гиперссылка) – имеет значение полного имени файла, на который осуществляется переход или адрес чьей-либо страницы.

Например:

<A HREF = “inform.html”> логика</A>.

На экране, в броузере, увидим слово логика подчеркнутым и синего цвета.

Щелкнув на слове «логика», попадем в файл inform, содержащий информацию о логике.

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

<A HREF = “http://www.narod.ru”>WEB-страница </A>.

На экране появится начальная страница сайта.

WEB-страница – это совокупность связанных между собой страниц.

В качестве гиперссылок могут быть использованы изображения (фотографии, картинки, рисунки). Например:

<A HREF= “str2.html”>< img src = “foto.jpg” alt = “портрет”></A>

Эта запись устанавливает гиперссылку на изображении foto.jpg (при нажатии в области рисунка кнопкой мыши осуществляется переход на документ str2.html, находящийся в той же директории, что и текущая страница).

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

<html>

<head>

</head>

<body>

<H4>Содержание</H4>

<!"гиперсвязи с другими файлами">

<A HREF = "графика.html"> Компьютерная графика</A>

<P>

<A HREF = "музыканты.html"> Зарубежные композиторы</A>

<P>

<A HREF = "поэзия.html"> Баратынский</A>

<P>

<A HREF = "списки.html"> Занимательные игры</A>

</body>

</html>

При просмотре в броузере увидите содержание, состоящее из подчеркнутых названий. При подведении курсора мыши к этим названиям, курсор – стрелочка превращается в курсор «рука с пальчиком». Это гиперссылка. Щелчком мыши откройте документ. На экране текст созданного файла. Выйти обратно в оглавление можно, щелкнув по кнопке «назад» в меню броузера. Откройте поочередно все подчеркнутые документы.

Фреймы

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

Технология создания рамок предусматривает возможность вертикального и горизонтального деления экрана. Каждая область экрана может иметь вертикальные и горизонтальные полосы прокрутки.

Горизонтальное деление экрана задается при помощи атрибута rows, а вертикальное – при помощи атрибута cols. Значения атрибутов могут быть выражены в пикселах или процентах. Кроме этого, используется символ «*» для обозначения оставшейся части экрана.

Отдельная рамка определяется одиночным ярлыком <FRAME>, который имеет инструкцию SRC (source - источник) для описания файла, который размещается в данной рамке. <FRAME SRC = “имя_файла.html”>. Совокупность рамок задается с помощью двойного тега <FRAMESET>…</ FRAMESET>. В пределах этого тега можно определить отдельные рамки и их взаимное расположение и размеры. При использовании тега <FRAMESET>,тег <BODY> не используется.

Атрибут scrolling управляет прокруткой внутри одной области. Он может принимать значения YES (полосы прокрутки создаются в обязательном порядке), NO (прокрутка запрещена) и AUTO (полосы прокрутки появляются когда необходимо). Если этот атрибут отсутствует, броузер создает полосы прокрутки для тех документов, которые не умещаются целиком в отведенных им областях.

Создадим страницу с тремя горизонтальными рамками, которые будут содержать файлы, созданные ранее и сохраним ее с именем «рамки.html»

<html>

<! Пример страницы с 3-мя горизонтальными рамками внутри>

<head>

<title>рамки</title>

</head>

<! Тег BODY здесь не нужен>

<! первая и третья рамки одинаковы, средняя - самая широкая>

</FRAMESET >

</html>

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

Теперь изменим расположение рамок, и рассмотрим вторую возможность задания их размера.

<html>

<! Пример страницы с 3-мя вертикальными рамками внутри>

<head>

<title>рамки 1</title>

</head>

<! первая и третья рамки одинаковы, средняя - в 2 раза толще>

</FRAMESET >

</html>

При просмотре в броузере увидим:

Рассмотрим еще один случай, когда WEB-страница может содержать и горизонтальные, и вертикальные рамки.

<html>

<! Пример страницы с вертикальными и горизонтальными рамками внутри>

<head>

<title>рамки 2</title>

</head>

<! первый тег FRAMESET разделит экран на 2 части по вертикали>

<! второй тег FRAMESET разделит правую часть экрана на 2 части по горизонтали>

</FRAMESET >

</html>

При просмотре в броузере увидим:

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

Рамки позволяют поместить страницу оглавление в левой части, а страницу, на которую производится ссылка – в правой части.

Для этого применяются два дополнительных параметра: NAME(имя) и TARGET (цель).

В следующем примере воспользуемся уже созданным файлом, содержащим гиперссылки на несколько файлов. Это файл с именем Link.html. Внесем в него некоторые изменения, добавив указатель (TARGET) на имя правой рамки (main).

<html>

<head>

</head>

<body>

<H4>Содержание</H4>

<!"гиперсвязи с другими файлами">

<A HREF = "графика.html" target="main"> Компьютерная графика</A>

<P>

<A HREF = "музыканты.html" target="main"> Зарубежные композиторы</A>

<P>

<A HREF = "поэзия.html" target="main"> Баратынский</A>

<P>

<A HREF = "списки.html" target="main"> Занимательные игры</A>

</body>

</html>

Теперь создадим файл-рамку, который сохраним с именем frame.html

<!Файл-рамка (frame.html)>

<html>

<head>

<title> frame</title>

</head>

<!"в левой части будет файл - оглавление">

<!"В правой части поместим любую из четырех страниц и

введем имя правой части "main" через параметр NAME">

</frameset>

</html>

Благодаря вводу параметра NAME, появляется возможность указать месторасположение вызываемой страницы. Откройте сохраненный файл frame.html и посмотрите, что получилось.

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

1 2 34

Дата добавления: 2016-01-18; просмотров: 596;