Добавил:
ivanov666
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Предмет:
Файл:Web-технологии. Учебно-методический комплекс дисциплины по направлению подготовки 51.03.06 (071900) «Библиотечно-информационная деятельность», профиль
.pdf
Формируемые компетенции:
готовность к овладению основными методами, способами и средст-
вами получения, хранения, переработки информации, наличие навыков работы с компьютером как средством управления информацией
(ОК-12);
готовность к овладению перспективными методами библиотечно-ин-
формационной деятельности на основе информационно-коммуникационных технологий (ПК-4).
В результате выполнения лабораторной работы студент должен:
знать:
тег вставки графических изображений <IMG> и его атрибуты
(ОК-12, ПК-4);
уметь:
добавлять графические изображения на web-страницы (ОК-12, ПК-4);
владеть:
навыками редактирования изображений в MS FrontPage 2003 (ОК-12,
ПК-4).
Обеспечивающие средства: персональный компьютер, операционная
система Windows, Microsoft FrontPage 2003.
Задание: создать сайт, содержащий графические объекты, имеющие
области гиперссылок.
Требования к отчету: итоги выполнения лабораторной работы пред-
ставить в виде html-документа и ответов на контрольные вопросы.
Теоретические сведения
Вставка изображения в HTML-документ осуществляется с помощью
тега <IMG> с обязательным атрибутом SRC (SouRCe, источник). Имя
файла представляет собой имя выводимого графического файла. Закрывающегося тега не требуется.
Пример вставки изображения:
<IMG SRC="image.gif">
Изображения на web-странице могут использоваться в качестве гипертекстовых ссылок, как и обычный текст. Для обозначения изображения
как гипертекстовой метки используется тот же тег <A>, что и для текста,
но между <A> и </A> вставляется тег изображения
<IMG>: <A HREF=
"адрес файла или изображения"> <IMG SRC="image.gif"></A>
41
При этом изображение, используемое в качестве гипертекстовой
ссылки, обводится дополнительной рамкой.
Атрибуты тега изображения <IMG>. Тег изображения имеет один
обязательный атрибут SRC и ряд необязательных.
В таблице 1 представлены атрибуты тега <IMG>.
Атрибут ALIGN может принимать следующие значения:
top – строка текста идет по верхней границе изображения;
bottom – строка текста идет по
нижней границе изображения;
middle – строка текста идет по середине изображения;
left – изображение находится слева, текст обтекает его по правой
границе;
right – изображение находится у правой границы, текст обтекает его
слева.
Как правило, браузеры поддерживают рисунки в форматах GIF и
JPEG. Первый из этих форматов обычно используется для хранения рисунков
с четкими деталями, небольшим набором цветов и возможностью анимации (графические кнопки), второй – для хранения полноцветной графики и
фотоизображений.
Таблица 1 – Атрибуты тега <IMG>
Атрибут Описание
SRC указывает URL файла с рисунком
ALT содержит краткое описание рисунка
ALIGN указывает на расположение рисунка относительно об-
текающего его текста
WIDTH, HEIGHT указывает ширину и высоту рисунка в пикселях
BORDER указывает ширину рамки вокруг рисунка в пикселях;
если значение установлено в 0, то рамка не выводится
HSPACE указывает величину отступа слева и справа от рисунка
до окружающего его текста в пикселях
VSPACE указывает величину отступа сверху и снизу от рисун-
ка до окружающего его текста в пикселях
USEMAP указывает на URL карты, ассоциируемой с данным
рисунком
Работа с изображениями в Microsoft FrontPage 2003
Вставка изображения в программе MS FrontPage 2003 осуществляет-
ся при помощи команды Рисунок меню Вставка.
42
Существуют следующие возможности вставки изображений, предос-
тавляемые приложением:
Картинки – возможность выбрать рисунок из коллекции Micro-
soft Office (рис. 1);
Рисунок 1 – Окно вставки рисунка из коллекции Microsoft Office
Из файла – при запуске этой команды открывается окно диалога,
показанное на рис. 2;
Рисунок 2 – Окно вставки рисунка
43
Со сканера или камеры – возможность получать изображение
непосредственно со сканера или другого устройства, поддерживающего технологию TWAIN;
Создать фотоколлекцию – выбор этой команды позволяет осу-
ществить вставку фотографии из коллекции фотографий.
Для работы с изображениями используется панель инструментов
Рисунки (рис. 3) (Вид – Панели инструментов – Рисунки), с помощью
которой можно накладывать текст на
графический объект, создавать автоэскизы, редактировать изображение, устанавливать прозрачный цвет фона
изображения, создавать области гиперссылок на изображении.
Рисунок 3 – Панель инструментов Рисунки
В таблице 2 представлено назначение кнопок панели инструментов
Рисунки.
Таблица 2 – Назначение кнопок панели инструментов Рисунки
Кнопка Назначение
добавляет изображение из файла
помещает текст на графический объект
создает автоэскиз изображения
задает абсолютное размещение рисунка для помещения его
в заданном месте страницы
перемещают изображение на передний или задний план
вращают изображение против часовой и по часовой стрелке
зеркально отображают рисунок в горизонтальном и вертикальном направлениях
регулируют контрастность изображения
регулируют яркость изображения
обрезает изображение
задает тип линии
задает формат рисунка
позволяет выбрать цвет на изображении формата GIF, кото-
рый будет прозрачным
44
Кнопка Назначение
преобразовывает изображение в оттенки серого, черно-белого,
задает размытие
задает багетную рамку, которая придает изображению объемный вид
позволяет сократить количество цветов
позволяет выбирать различные элементы рисунка
создаются гипертекстовые области прямоугольной, эллиптической и многоугольной формы
выделяет гипертекстовые области
восстанавливает изображение в исходное состояние
Для редактирования свойств графического изображения используется команда Свойства меню Формат либо команда Свойства рисунка
контекстного меню (рис. 4).
Вкладка Вид окна Свойства рисунка позволяет выбрать обтекание
изображения текстом.
Открывающийся список Выравнивание позволяет задать способ
выравнивания графического объекта на странице и его расположение относительно близлежащего текста.
В поле ввода Толщина
границы можно задать толщину рамки во-
круг изображения. Нулевое значение означает отсутствие рамки.
В полях ввода со счетчиком Интервал по горизонтали и Интервал
по вертикали задается размер отступа в пикселах от изображения
до близлежащих элементов, расположенных на web-странице.
Если установить флажок Задать размер, то можно указать точные
значения ширины и высоты
прямоугольной области, которую должно занимать изображение на странице. При установке флажка Задать размер,
важно установить флажок Сохранять пропорции, тогда при изменении
размеров изображения в одном из полей ввода (Ширина или Высота)
пропорционально изменяется значение во втором.
На вкладке Общие (рис. 5) можно выбрать формат для сохранения
изображения, нажав кнопку Тип
графических файлов. В диалоговом окне
Тип графических файлов задаются дополнительные параметры, такие,
как Качество для файлов JPEG и количество проходов при постепенном
показе файлов формата GIF.
45
Рисунок 4 – Вкладка Вид окна Свойства рисунка
В разделе Альтернативные представления окна Свойства рисун-
ка в поле Низкое разрешение можно указать файл с заранее подготовлен-
ной копией рисунка, сделанной с низким разрешением, которая будет отображаться при загрузке основного рисунка. Поле Текст позволяет задать
тестовое описание изображения, которое будет появляться при наведении
курсора мыши на рисунок и
во время его загрузки.
Поле Длинное описание позволяет с помощью кнопки Обзор выбрать файл, который будет содержать подробное описание изображения.
Этот файл должен быть импортирован в одну из папок web-сайта.
На вкладке Общие окна Свойства рисунка для рисунка можно также указать гиперссылку.
При сохранении страницы с изображениями на экране
появится
стандартный диалог сохранения файлов Сохранить как. В этом случае
необходимо указать нужное имя файла страницы и нажать кнопку Сохра-
нить. При этом появится окно Сохранение внедренных файлов (рис. 6).
46
Рисунок 5 – Вкладка Общие окна Свойства рисунка
В окне Сохранение внедренных файлов перечислены графические
изображения, добавленные на страницу во время работы. В данном окне
предлагается сохранить копии добавленных на страницу изображений в
папке сайта. При этом можно переименовать файлы с изображением (Пе-
реименовать) или выбрать для них отдельную папку (Сменить папку).
Рисунок 6 – Окно Сохранение внедренных объектов
47
При необходимости можно не создавать копию рисунка в папке сайта, а сохранить только ссылку на расположение исходного файла.
Эта возможность устанавливается с помощью кнопки Действие.
Технология работы
Работа в программе Блокнот
1. Запустите Paint и нарисуйте схему канала передачи информации
(рис. 7). Сохраните его под именем information.gif.
Рисунок 7 – Схема канала передачи информации
2. Запустите Блокнот.
3. Добавьте заголовок <h2> Передача информации </h2>
4. Добавьте рисунок:
<img src="information.gif">
1. Сохраните файл. Просмотрите его в браузере.
2. Задайте размеры рисунка и добавьте подпись к рисунку:
<img src="information.gif" width= "355" height= "213" alt= "Общая схема
передачи информации">
3. Сохраните файл information.htm. Обновите его в браузере. Наведите
курсор мыши на изображение и прочитайте всплывающую подсказку.
4. Выровняйте изображение по правому краю, теперь текст будет его
обтекать:
<img src="information.gif" width= "355" height= "213" alt= "Общая схема
передачи информации" align= "right">
5. Сохраните файл. Обновите его в браузере.
Работа в Microsoft FrontPage 2003
1. Создайте сайт из двух страниц.
На первой странице расположите следующие предложения:
Классификация информационных технологий по типу информации.
Передача информации.
48
2. Первое предложение должно быть гиперссылкой, при переходе
по которой отображается вторая страница.
Второе предложение – гиперссылкой на файл information.htm.
3. Запустите Paint и нарисуйте схему, представленную на рис. 8.
Информационные технологии
Технологии обработки
текстовой информации
Технологии обработки
графической информации
Технологии обработки
числовой информации
Технологии обработки
звуковой информации
Технологии работы
в глобальных сетях
Рисунок 8 – Классификация информационных технологий
4. Сохраните изображение под именем shema.gif.
5. Разместите изображение shema.gif на вторую страницу. Создайте
фон.
6. На изображении shema.gif сделайте две области ссылок
: прямо-
угольник «технологии обработки текстовой информации» должен
быть гиперссылкой на начальную страницу сайта, прямоугольник
«технологии работы в глобальных сетях» – на сайт поисковой систе-
мы Яндекс http://www.yandex.ru
7. Посмотрите созданный сайт в браузере.
Контрольные вопросы
1. Какой тег используется для вставки изображений на web-страницы?
2. Перечислите атрибуты тега вставки изображения и поясните
их на-
значение.
3. Каким образом изображение можно сделать гиперссылкой?
4. Какие существуют возможности вставки изображений MS FrontPage
2003?
5. Какая панель инструментов используется для работы с изображе-
ниями в MS FrontPage 2003?
49
Лабораторная работа № 5
Таблицы в HTML
4 часа
Цель работы: освоение приемов разметки HTML-документов с по-
мощью таблиц.
Задачи работы:
1) ознакомиться с тегами создания таблиц и их основными атрибутами;
2) овладеть практическими навыками создания и редактирования таб-
лиц в MS FrontPage 2003.
Формируемые компетенции:
готовность к овладению основными методами, способами и средст-
вами получения, хранения, переработки информации, наличие навы-
ков работы с компьютером как средством управления информацией
(ОК-12);
готовность к овладению перспективными методами библиотечно-
информационной деятельности на основе информационно-коммуни-
кационных технологий (ПК-4).
В результате выполнения лабораторной работы студент должен:
знать:
теги создания таблиц и их основные атрибуты (ОК-12, ПК-4);
уметь:
создавать и редактировать таблицы средствами MS FrontPage 2003
(ОК-12, ПК-4);
владеть
приемами разметки HTML-документов с помощью таблиц (ОК-12,
ПК-4).
Обеспечивающие средства: персональный компьютер, операционная
система Windows, Microsoft FrontPage 2003.
Задание: создать сайт, используя таблицы для разметки страниц.
Требования к отчету: итоги выполнения лабораторной работы пред-
ставить в виде html-документа и ответов на контрольные вопросы.
Теоретические сведения
Таблица – мощное средство структурирования web-страниц. HTML-
таблицы используются не только для представления табличных данных,
50
Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]