Встраивание изображений в HTML-документ.

Для встраивания изображений в HTML-документ следует использовать тег < IMG>, имеющий единственный обязательный параметр SRC, определяющий URL-адрес файла с изображением.

Простейший пример встраивания изображения:

< IMG SRC=имя файла.gif>

Данный тег может иметь ряд параметров, действия которых приведены ниже:

 

Таблица 2

Значения параметра ALIGN

__________________________________________________

Значение параметра ALIGN	Действие
TOP	Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.
TEXTTOP	Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки.
MIDDLE	Выравнивание середины изображения по базовой линии текущей строки
ABSMIDDLE	Выравнивание середины изображения посередине текущей строки
BASELINE или BOTTOM	Выравнивание нижней границы изображения по базовой линии текущей строки
ABSBOTTOM	Выравнивание нижней границы изображения по нижней границе текущей строки.
LEFT	Изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны.
RIGHT	Изображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны.

 

Пример:

< P> Выравнивание< IMG SRC=primer.gif ALIGN=top> по верхнему краю.

< P> Выравнивание< IMG SRC=primer.gif ALIGN=baseline> по базовой линии.

< P> Изображение< IMG SRC=primer.gif ALIGN=left> прижимается к левому полю окна.

< P> Изображение< IMG SRC=primer.gif ALIGN=right> прижимается к правому полю окна.

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

Пример:

< IMG SRC=primer.gif WIDTH=150>

< IMG SRC=primer.gif>

< IMG SRC=primer.gif WIDTH=75>

 

Для тега < IMG> можно задавать параметры HSPASE и VSPASE, значения которых определяют отступы от изображения, оставляемые пустыми, соответственно по горизонтали и вертикали. Это гарантирует, что между текстом и изображением останется пространство, необходимое для нормального восприятия.

Изображение, встраиваемое на страницу, можно поместить в рамку различной ширины. Для этого служит параметр BORDER тега < ING>. В качестве значения параметра используется число, означающее толщину рамки в пикселях. По умолчанию рамка вокруг изображения не рисуется.

 

< IMG SRC=имя рисунка ALIGN=left HSPASE=20 VSPASE=20 BORDER=10>

 

(Текст абзаца)

Ещё одним из параметров тега < IMG> является параметр ALT, определяющий альтернативный текст. Его указание даёт возможность пользователем неграфических браузеров или пользователям, работающим в режиме отключения загрузки изображений, получить некоторую текстовую информацию о встроенных изображений.

Пример:

< ING SRC=primer.gif ALT=" Картинка" >

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

Пример:

< A HREF=имя файла.html> < IMG SRC=имя файла.gif> < /A>

 

Фреймы.

Выбор фреймовой структуры отображения информации на WWW оправдан в следующих случаях:

1.При необходимости организовать управление загрузкой документов в одну из подобластей окна просмотра браузера при работе в другой области.

2.Для расположения в определённом месте окна просмотра информации, которая должна постоянно находиться на экране вне зависимости от содержания других подобластей экрана.

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

 

Правила описания фреймов:

Контейнер из тегов < FRAMESET> и < /FRAMESET> обрамляет каждый блок определений фрейма.

Внутри контейнера < FRAMESET> могут содержаться только теги < FRAME> и вложенные теги < FRAMESET>.

Тег < FRAMESET> имеет два параметра: ROWS(строки) и COLS(столбцы) и записывается в следующем виде:

< FRAMESET ROWS=" список значений" COLS=" список значений" >

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

Пример:

< FRAMESET ROWS=" 100, 240, 140" >

< FRAMESET ROWS=" 25%, 50%, 25%" >

< FRAMESET ROWS=" *, 2*, 3*" >

 

Звёздочка (*) используется для пропорционального деления пространства.

Можно использовать все три варианта задания значений:

< FRAMESET ROWS=" 100, 25%, *, 2*" >

В этом примере 1-ый столбец будет иметь ширину 100 пикселей. 2-ой столбец займёт 25% от всей ширины окна просмотра, 3-ий столбец-1/3 оставшегося пространства и, наконец, последний столбец- 2.3.

 

Тег < FRAME> определяет одиночный фрейм. Он должен располагаться внутри тегов < FRAMESET> и < /FRAMESET>.

Например:

< FRAMESET ROWS=" *, 2*" >

< FRAME>

< FRAME>

< /FRAMESET>

 

Тег < FRAME> не является контейнером и не имеет завершающего тега. Тег < FRAME> имеет шесть парметров: SCR, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING и NORESIZE.

 

Наиболее важный параметр SRC (сокращение от слова sourse). Значение этого параметра определяет URL-адрес документа, который будет загружен изначально в данный фрейм.

 

< FRAME SRC=" sample.htm" >

< FRAME SRC=" http: //www.bhv.ru/example.gif>

 

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

< FRAME SRC=" sample.htm" NAME=" Frame_1" >

 

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

 

Например:

< A HREF=" other.htm" TARGET=" Frame_1" > Щёлкните здесь для загрузки документа other.htm во фрейм с именем Frame_1< /A>

 

Параметры MARGINWIDTH и MARGINHEIGHT дают возможность устанавливать ширину полей фрейма.

MARGINWIDTH=" value",

где " value" - абсолютное значение в пикселях. Например:

< FRAME MARGINWIDTH=" 5" MARGINHEIGHT=" 7" >

 

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

Форма записи:

< FRAME SCROLLING=" YES|NO|AUTO" >

Значение AUTO действует так же, как и в случае отсутсствия параметра SCROLLING.

Значение YES вызывает появление полос прокрутки вне зависимости от необходимости этого, а NO- запрещает их появление.

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

Все эти параметры могут использоваться совестно, так и отдельно.

 

Для пользователей, применяющих браузеры без поддержки фреймов, необходимо предусмотреть альтернативную информацию, которая записывается между парой тегов < NOFRAME> и < /NOFRAME>.

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

< FRAMESET ROWS=" *, 2*" COLS=" 20%, 30%" >

< FRAME SRC=" Forms.htm" >

< FREME SCR=" Frames.htm" >

< FREME SCR=" Imagemap.htm" >

< FREME SCR=" Tables.htm" >

< /FREMESET>

 

Взаимодействие между фреймами.

Взаимодействие между фреймами заключается в возможности загрузки документов в выбранный фрейм по командам из другого фрейма. Для этой цели используется параметр TARGET тега < A>.

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

TARGET документ загружается в текущий фрейм или окно. Это умолчание может быть изменено заданием тега < BASE> с нужным значением параметра TARGET.

Имена фреймов должны начинаться с латинской буквы или цифры. Имеется четыре зарезервированных имени, при задании которых выполняются специальные действия. Эти имена начинаются с символа подчёркивания (_): " _blank", " _self", " _parent", " _top".

 

TARGET=" _blank" -обеспечивает загрузку документа в новое окно. Это окно не будет иметь имени, а следовательно, в него невозможно будет загружать другой документ.

TARGET=" _self" -загрузка документа будет произведена в текущий фрейм (или окно). Такую запись следует использовать для обхода умолчания, заданного тегом < BASE> /

TARGET=" _top" -вызывает загрузку документа в полное окно. Если документ уже располагается в полном окне, то данное значение действует так же, как " self".

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

Предупреждение: Зарезервированные имена фреймов " _blank", " _self", " _parent", " _top"

должны записываться строчными латинскими буквами. Заметим, что такая требовательность присуща только Netscape. Браузер Microsoft Internet Explorer правильно распознаёт зарезервированные имена, записанные на любом регистре.

 

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

Первый файл с именем frame_a.htm:

< HTML>

< HEAD>

< TITLE> Документ для фрема A< /TITLE>

< /HEAD>

< BODY>

< A HREF=" test.htm" TARGET=" B" > 1. Загрузка документа во фрейм B< /A> < P>

< A HREF=" test.htm" TARGET=" C" > 2. Загрузка документа во фрейм C< /A> < P>

< A HREF=" test.htm" TARGET=" D" > 3. Загрузка документа в окно с именем D< /A> < P>

< A HREF=" test.htm" TARGET=" _blank" > 4. Загрузка документа в новое окно< /A> < P>

< A HREF=" test.htm" TARGET=" _top" > 5. Загрузка документа в полное окно< /A> < P>

< A HREF=" test.htm" TARGET=" _self" > 6. Загрузка документа в текущий фрейм< /A> < P>

< /BODY>

< /HTML>

 

Второй файл test.htm крайне прост:

 

< HTML>

< HEAD>

< TITLE> Тестовый документ< /TITLE>

< /HEAD>

< BODY>

Текст тестового документа

< /BODY>

< /HTML>

 

И, наконец, третий пустой файл empty.htm:

 

< HTML>

< HEAD>

< /HEAD>

< BODY>

< /BODY>

< /HTML>

 

Дальше необходимо набрать следующий HTML-код и сохранить под каким-либо именем, допустим под L3_a.htm:

< HTML>

< HEAD>

< TITLE> Использование фреймов< /TITLE>

< /HEAD>

< FRAMESET COLS=2*, *, *>

< FRAME SRC=frame_a.htm NAME=" A" >

< FRAME SRC=empty.htm NAME=" B" >

< FRAME SRC=empty.htm NAME=" C" >

< /FRAMESET>

< /HTML>

После того как созданы все эти файлы, запускается последний L3_a.htm.

Задание.

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

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

⇐ Предыдущая12345678910Следующая ⇒

Поделиться: