- •Информационные технологии
- •Часть 2 Конспект лекций
- •220100 - Вычислительные машины, комплексы, системы и сети,
- •220200 – Автоматизированные системы обработки информации и управления
- •Введение
- •Всемирная сеть Internet
- •5. Электронная почта
- •5.1. Основные пользовательские функции пакетов электронной почты
- •Графический интерфейс
- •Оперативная справочная система
- •Особенности интерфейса с пользователем
- •Оповещение о прибытии почты
- •Подготовка текста сообщения
- •Адресация сообщений
- •Посылка сообщений
- •Присоединение файлов
- •Чтение почты
- •Обработка сообщений: ответ, переадресация, удаление
- •Хранение сообщений
- •Списки рассылки
- •Полномочия
- •Обеспечение безопасности
- •5.2. Использование Microsoft Outlook при обслуживании электронной почты Используемые обозначения
- •5.3. Использование Outlook Express для работы с электронной почтой
- •Чтение писем
- •Создание письма
- •6. Особенности сети Internet
- •Поиск информации в www
- •Домены Internet
- •6.1. Html - язык для создания Web-документов
- •Гипертекст
- •Теги языка html
- •Атрибуты тегов
- •Комментарии
- •6.2. Популярные Web-броузеры
- •7. Работа в Internet Explorer
- •7.1. Рабочее окно Internet Explorer
- •Настройка домашней страницы
- •7.2. Движение по www
- •Каталог временных файлов Internet
- •Просмотр часто посещаемых страниц
- •Журнал посещений
- •Сохранение ссылок на страницы в папке Избранное
- •Поиск в Internet
- •7.3. Сохранение найденной информации
- •7.4. Печать Web-страниц
- •Настройка параметров страницы для печати
- •7.5. Команды меню Вид
- •7.6. Как ускорить отображение страниц
- •8. Создание html-документов с помощью простейшего текстового редактора Блокнот
- •8.1. Обязательные теги
- •Структура минимального html – документа
- •Пример 1. Минимальный html –документ.
- •8.2. Технология работы над html-документом с использованием блокнота
- •8.4. Теги заголовков разных уровней
- •Пример 3. Html –документ с тегами заголовков
- •8.5. Оформление списков
- •Маркированный список
- •Нумерованный список
- •Пример 4. Html-документ с маркированным и нумерованным списками
- •Списки-определения
- •Пример 5. Html-документ со списком-определением
- •Вложенные списки
- •Пример 6. Html-документ с вложенными списками
- •8.6. Абзацы и разрывы строк
- •Пример 7. Html-документ с разрывами строк и разбивкой на абзацы
- •Разделительная горизонтальная линия
- •Пример 8. Html-документ с горизонтальными разделительными линиями
- •8.7. Задание характеристик шрифта
- •Теги эффектов шрифтов
- •Пример 9. Использование различного шрифтового оформления
- •8.8. Таблицы
- •Теги таблицы
- •Атрибуты тегов таблиц
- •Пример 10. Простейшие таблицы
- •Пример 11. Таблица, содержащая объединенные ячейки
- •8.9. Рисунки в html-документах
- •Атрибуты тега img
- •Пример 12. Страница с рисунком
- •Пример 13. Страница с несколькими рисунками, хранящимися в отдельной папке
- •8.10. Создание гиперссылок
- •Пример 14. Документ со ссылками
- •8.11. Сенсорные изображения (изображения-карты)
- •Создание клиентского сенсорного изображения
- •Устройство
- •Пример 15. Документ с сенсорным изображением
- •8.12. Фреймы
- •Пример 16. Страница с фреймами
- •8.13. Цвета в html
- •Шестнадцать стандартных цветов
- •Шестнадцатеричные коды цветов
- •8.13. Список базовых тегов html:
- •9. Создание html – документов с помощью FrontPage Express
- •9.1. Рабочее окно пакета FrontPage Express
- •9.2. Команды главного меню FrontPage Express
- •Меню Файл
- •Панель форм
- •9.4. Контекстное меню
- •9.5. Создание, сохранение и открытие Web-страницы
- •9.6. Редактирование текста Web-страницы
- •Выделение фрагментов документа
- •Отображение абзацных меток
- •Поиск и замена текста
- •9.7. Стили форматирования
- •Физические стили
- •Логические стили
- •Раскрашивание текста
- •9.9. Создание ссылок во FrontPage Express
- •Вставка закладок в документ
- •Создание ссылок на документ с закладками
- •9.10. Дизайн web-страниц с помощью таблиц
- •Вставка таблицы в документ
- •Изменение конфигурации таблицы
- •Свойства таблицы
- •9.11. Дизайн web-страниц с использованием графики
- •Вставка картинок в документ
- •Альтернативное отображение картинок
- •Список литературы
- •Оглавление
- •5. Электронная почта 6
- •6. Особенности сети Internet 30
- •7. Работа в Internet Explorer 38
- •8. Создание html-документов с помощью простейшего текстового редактора Блокнот 47
- •9. Создание html – документов с помощью FrontPage Express 89
- •Информационные технологии
- •Часть 2 Конспект лекций
Создание клиентского сенсорного изображения
Сенсорное изображение можно создать практически из любого рисунка. Сначала нужно разбить изображение на части. Для этого используются теги <MAP> и <AREA>. Тег <MAP> формирует схему (карту) изображения. Его атрибут NAME задает имя этой схемы.
Тег <AREA> описывает каждый отдельный участок разбиения изображения и соответствующие этому участку ссылки. Атрибуты тега <AREA>:
Shape - содержит форму фрагмента; возможные значения:
rect - прямоугольник;
circle - круг;
poly - многоугольник произвольной формы.
COORDS - координаты области в пикселях; для прямоугольного фрагмента нужно задать четыре координаты – левого верхнего угла и правого нижнего; для круга – три числа – координаты центра и величину радиуса; для многоугольника нужно задать координаты каждого его угла.
HREF - ссылка.
ALT - альтернативный текст.
После того как описана схема изображения, нужно с помощью атрибута USEMAP тега IMG задать имя схемы.
Рассмотрим пример создания сенсорного изображения.
Создадим Web-документ, содержащий информацию об устройстве компьютера. На главной странице этого документа сделаем заголовок «Устройство компьютера» и поместим изображение компьютера (файл рисунка - computer.jpg), включающее основные конструктивные элементы современного ПК (системный блок, монитор, клавиатур, мышь). Вид этого документа в броузере см. на рис. 8.14. Сохраним этот документ с именем computer.htm.
Создадим еще один документ, содержащий информацию об устройстве и назначении отдельных частей компьютера. Сохраним его с именем comp_dop.htm. Разобьем весь текст этого документа на главы. Название каждой главы оформим с помощью тегов заголовка первого уровня. Кроме того, сделаем закладки на каждом заголовке с помощью тега <A name= имя закладки>. Например, глава содержащая информацию об устройстве и назначении системного блока компьютера, будет иметь заголовок, оформленный следующим образом:
<h1><a name="блок"></a>Системный блок</h1>
Аналогично следует оформить заголовки глав «Монитор» (имя закладки – монит), «Клавиатура» (имя закладки – клав), «Мышь» (имя закладки – мышь). Закладки позволят сделать ссылки на разные части одного и того же документа.
Теперь приступим к составлению карты изображения в документе computer.htm. На рисунке выделим три прямоугольные области, охватывающие изображения монитора, системного блока и клавиатуры, и одну область в форме многоугольника, охватывающую изображение мыши.
Устройство
Рис. 8.14. Документ с сенсорным изображением
Области задаются с помощью координат. Координаты измеряются в пикселях, отсчет ведется от левого верхнего угла изображения.
Примечание. Вручную подбирать значения координат фрагментов довольно трудоемко и долго. К счастью, существует ряд удобных средств, облегчающих задание фрагментов для изображения-карты. Это такие программы, как MapThis, Live Image, CrossEye. Пользоваться этими программами несложно. Достаточно загрузить изображение (файл картинки), затем выбрать форму фрагмента с помощью кнопок панели инструментов и мышью очертить этот фрагмент на рисунке. Затем в диалоговом окне Area Settings (Параметры фрагмента) ввести имя файла (или URL), на который будет ссылаться фрагмент. Выполнить эти действия для всех фрагментов изображения, затем сохранить файл карты в формате HTML.
В нашем примере для каждой из четырех выделенных областей рисунка сделаем ссылку на соответствующую главу документа comp_dop.htm. В целом карта изображения будет выглядеть следующим образом:
<MAP NAME="computer">
<AREA SHAPE="RECT" COORDS="17, 3, 350, 281" HREF="comp_dop.htm#монит" >
<AREA SHAPE="RECT" COORDS="7, 298, 360, 380" HREF="comp_dop.htm#клав" >
<AREA SHAPE="RECT" COORDS="374, 15, 546, 348" HREF="comp_dop.htm#блок" >
<AREA SHAPE="POLYGON" COORDS="395, 367, 403, 356, 449, 357, 458, 369, 458, 380, 395, 383, 395, 367" HREF="comp_dop.htm#мышь" >
</MAP>
Описание карты сенсорного изображения следует поместить в начале документа (например, сразу после тега <Body> или после заголовка). В дальнейшем при вставке рисунка в документ (тег <img>) следует указать, что для данного рисунка используется карта с соответствующим именем (атрибут Usemap). В нашем случае имя карты – computer.
Полный текст документа, содержащий описание карты и вставку сенсорного изображения, приведен в примере 15.