Использование графических материалов

ЛАБОРАТОРНАЯ РАБОТА

Вставка на HTML-страницы изображений и других элементов (часть 1)

Цель работы:

· Изучить функциональные возможности и особенности настройки Adobe Dreamweaver;

· освоить возможности программы Adobe Dreamweaverпри использовании графических материалов;

· получить практические навыки в программе Adobe Dreamweaverпри задании таблиц.

 

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

Во время выполнения работы используется информация, предоставляемая вместе с демонстрационной версией программы Adobe Dreamweaver. В начале следует внимательно прочитать теоретическое введение к работе, ответить на контрольные вопросы. Затем надо выполнить практическое задание и подготовить отчет о выполнении лабораторной работы.

 

Отчет о выполненной работе

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

Отчет должен начинаться стандартным титульным листом и содержать следующие разделы:

1. Характеристика программы Adobe Dreamweaver, как Web-редактора (назначение, возможности, интерфейс по заданной теме).

2. Результаты выполнения практических заданий.

3. Выводы.

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

 

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

Использование графических материалов

Важнейшей возможностью, которой обладает язык HTML, является возможность вставки иллюстраций в текстовый документ. Для того, чтобы вставить изображение в редактируемый документ, необходимо нажать кнопку Images на панели объектов и в открывшемся списке выбратьImage (рис. 1.1) или выполнить команду Insert=>Image. В открывшемся диалоговом окне необходимо выбрать графический файл (в формате GIF, JPEG или PNG). Следует обратить внимание на то, что документ перед вставкой графических и большинства других элементов необходимо сохранить, иначе путь к подключаемому файлу может быть абсолютным (начиная от корня диска).

 

 

Рисунок 1.1 - Вставка изображения

 

Если выделить изображение (для этого достаточно щелкнуть по нему мышью), то на панели свойств будут отображены его свойства (рис. 6.2).

Рисунок 1.2 - Свойства графического объекта

 

Параметры W и H определяют соответственно ширину и высоту изображения. По возможности следует изменять размеры самого графического файла (используя графические редакторы), оставляя параметры W и H равными исходным размерам. Если одна из этих величин не соответствует истинному значению размеров изображения, она будет выделена жирным шрифтом. Для того, чтобы вернуть параметрам их действительные значения, достаточно щелкнуть мышкой по подписи к полю (буквам W или H) или воспользоваться кнопкой Reset Size.

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

Параметр Align задает выравнивание графического объекта относительно других элементов абзаца или строки. Возможны следующие варианты выравнивания:

· Browser Default- выравнивание по умолчанию (обычно Baseline,но может
отличаться в зависимости от настроек браузера клиента);

· Baselineи Bottom- базовая линия текста (или другого объекта) будет
выровнена по нижнему краю изображения;

· Top - верхняя граница изображения будет выровнена по верхнему краю
самого высокого элемента в текущей строке;

· Middle- выравнивание базовой линии текста по середине изображения;

· Text Top- верхняя граница изображения будет выровнена по самому
высокому текстовому элементу текущей строки;

· Absolute Middle- середина изображения будет выровнена по середине
строки;

· Absolute Bottom- выравнивание нижнего края самого "низкого" символа по
нижнему краю изображения;

· Left - располагает изображение у левого края, при этом текст обтекает его с
правой стороны. Если предшествующий текст также имел выравнивание по
левому краю, объект будет перенесен на следующую строку;

· Right- располагает изображение у правого края, при этом текст обтекает
его с левой стороны. Если предшествующий текст также имел выравнивание
по правому краю, объект будет перенесен на следующую строку.

Параметр V Space позволяет задать области пустого пространства над и под изображением (размер указывается в пикселах). Аналогично, H Space задает размер свободного пространства слева и справа от изображения.

Параметр Linkпозволяет создать гипертекстовую ссылку с данного графического элемента. При этом вокруг изображения появляется рамка, которая отображается цветом ссылок. Толщину этой рамки определяет параметр Border(если указать 0, то рамки не будет). В поле Altследует альтернативный текст,который будет отображаться вместо картинок в текстовых браузерах и при отключенной автоматической загрузке изображений. Кроме того, этот текст будет выведен в качестве всплывающей подсказки при наведении указателя мыши на объект.

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