- •«Мурманский государственный технический университет»
- •Методические указания к лабораторным работам Основы создания Web-документа Мурманск
- •Введение
- •Лабораторная работа №1 Основы html
- •Раздел 1. Структура документа
- •Раздел 2. Обязательные метки
- •Раздел 3. Непарные метки
- •Раздел 4. Форматирование шрифта
- •Раздел 5. Списки
- •5.4. Вложенные списки
- •Лабораторная работа №2 Создание гиперссылок, работа с изображениями
- •Раздел 1. Гиперссылки
- •1.1. Локальные ссылки
- •1.2. Ссылки на ресурсы
- •Раздел 2. Цветовая гамма html-документа
- •Раздел 3. Бегущая строка Задание. Бегущая строка
- •Раздел 4. Изображения в html-документе
- •4.1. Обтекание графики текстом в документе html
- •4.2. Выравнивание текста html-страницы
- •4.3. Пустая область вокруг изображения html-страницы
- •4.4. Списки с графическими маркерами html-страницы
- •4.5. Задание размеров изображения html-документа
- •Лабораторная работа №3 Работа с таблицами.
- •Раздел 1. Создание таблиц
- •1.1. Фон таблицы
- •1.2. Задание высоты и ширины ячеек
- •1.3. Задание выравнивния в ячейке. Объединение ячеек
- •Раздел 2. Вложенные таблицы
- •Раздел 3. Границы таблицы.
- •Лабораторная работа №4 Работа с формами
- •Раздел 1. Форма.
- •Тип элемента radio
- •Тип элемента checkbox
- •Тип элемента text
- •Тип элемента password
- •Тип элемента reset
- •Тип элемента submit
- •Тип элемента image
- •Элемент select
- •Элемент textarea
- •Лабораторная работа №5
- •Раздел 1. Работа с фреймами
- •Задания для самостоятельного выполнения:
- •Раздел 3. Зарезервированные имена фреймов
- •Лабораторная работа №6 Работа с картой изображений
- •Раздел 1. Карта-изображение
- •1.1. Основные теги для создания карты
- •Лабораторная работа №7 Заголовок html-документа
- •Раздел 1. Заголовок html-документа
- •Лабораторная работа№8 Cascading Style Sheets/Каскадные таблицы стилей. Цвет и фон
- •Раздел 1. Способы применения правила css к Html-документу
- •Метод 1: Инлайн/In-line (атрибут style)
- •Метод 2: Внутренний (тэг style)
- •Метод 3: Внешний (ссылка на таблицу стилей)
- •Раздел 2. Цвет и фон
- •2.1. Свойство color
- •Свойство background-color
- •Свойство background-image
- •Свойство background-repeat
- •Свойство background-attachment
- •Свойство background-position
- •Лабораторная работа №9 Шрифты. Ссылки
- •Раздел 1. Свойства шрифтов
- •Свойство font-family
- •Свойство font-style
- •Свойство font-variant
- •Свойство font-weight
- •Свойство font-size
- •Сокращенная запись font
- •Раздел 2. Текст
- •Свойство text-indent
- •Раздел 3. Ссылки
- •Лабораторная работа№10 Идентификация и группирование элементов (class и id) Группирование элементов (span и div)
- •Раздел 1. Группирование элементов с помощью class
- •Раздел 2. Идентификация элемента с помощью id
- •Лабораторная работа№11 Боксовая модель
- •Раздел 1. Боксовая модель
- •Заполнение элемента
- •Установка ширины блока[width]
- •Установка высоты блока[height]
- •Размещение элементов на странице
- •Всплывающие элементы (поплавки)
- •Свойство float
- •Свойство clear
- •Позиционирование элементов
- •Принципы css-позиционирования
- •Абсолютное позиционирование
- •Раздел 3. Работа со слоями
- •Рекомендуемая литература
Раздел 3. Зарезервированные имена фреймов
Зарезервированные имена фреймов служат для разрешения специальных ситуаций. Все они начинаются со знака подчеркивания. Любые другие имена фреймов, начинающиеся с подчеркивания будут игнорироваться браузером.
TARGET="_blank"
Данное значение определяет, что документ, полученный по ссылке будет отображаться в новом окне браузера.
Задание 5.16: Измените текст созданного вами документа таким образом, чтобы одно из изображений открывалось в новом окне браузера. Сохраните созданный документ под именем пример5_16.htm
TARGET="_self"
Данное значение определяет, что документ, полученный по ссылке будет отображаться в том же фрейме, в котором находится ссылка. Это имя удобно для переопределения окна назначения, указанного ранее в тэге BASE.
TARGET="_parent"
Данное значение определяет, что документ, полученный по ссылке будет отображаться в родительском окне, вне зависимости от параметров FRAMESET. Если родительского окна нет, то данное имя аналогично "_self".
TARGET="_top"
Данное значение определяет, что документ, полученный по ссылке будет отображаться на всей поверхности окна, вне зависимости от наличия фреймов. Использование данного параметра удобно в случае вложенных фреймов.
Контрольные вопросы:
Что такое фрейм?
Как создать фрейм?
Как создать плавающий фрейм?
Что такое зарезервированные имена фреймов?
Лабораторная работа №6 Работа с картой изображений
Цель работы: получить навыки создания карты изображений.
Задачи:
научиться создавать карту изображений;
научиться оперировать атрибутами основных тегов.
Порядок выполнения работы
Раздел 1. Карта-изображение
Imagemap, Image Map, Area Map, Clickable Map, Sensitive Map — все эти англоязычные термины используются в справочной литературе для обозначения одной и той же возможности — использование встроенного в HTML-документ изображения, для которого определены "горячие" (или активные) точки или области, имеющие ссылки на различные URL-адреса. Карта-изображение-это совокупность следующих компонентов:
само изображение, которое будем называть опорным для данной карты-изображения;
описание конфигурации активных областей;
Карта-изображение фактически представляет собой обычное встроенное графическое изображение на Web-странице. Эти изображения могут иметь любой допустимый формат (GIF или JPG). При этом в формате GIF может использоваться прозрачный цвет, а также режим чередования строк. Для того чтобы изображение могло использоваться в качестве опорного для карты-изображения, формально не накладывается никаких дополнительных ограничений.
Вообще бывают два типа таких карт. Один из них - серверный. Смысл тут вот в чем. Пользователь щелкает мышкой по карте-изображению, программа просмотра запоминает координаты вашего щелчка и посылает данные серверу. Сервер запускает программу GGI, которая смотрит, а не попадают ли эти координаты в ту область, по нажатию на которой нужно послать человека туда-то и туда? Если это так, то она дает ответ браузеру послать или не послать кого-то по такому-то адресу. Второй вид- клиентский. В данной работе разбирается создание клиентской карты изображений.
Создание карт-изображений требует двух шагов:
1.Подготовки опорного изображения, на котором впоследствии будут заданы активные области. Для этого можно воспользоваться любым графическим редактором или использовать готовое изображение. Воспользуемся готовым изображением, находящимся в папке karta.jpg
2. На втором шаге необходимо отметить активные области на изображении и сопоставить им соответствующие адреса ссылок. Для описания активных областей откройте в Adobe Photoshop модифицированный файл изображения start.jpg . Определите размер изображения и координаты выделенных на рисунке областей . Для этого следует активизировать команду Window | Info и, подводя мышку от начала координат (левый верхний угол изображения) к нужным точкам.
Работа с картой включает две составляющих в тексте документа
1.Для указания того, что встроенное изображение является опорным для карты, используется параметр USEMAP тега <IMG>. Значением параметра USEMAP является ссылка на описание конфигурации карты.
Например, <IMG SRC=logo.gif USEMAP=#logo>
2.Описание конфигурации активных областей должно располагаться в том же файле, что и данная строка HTML-кода, и иметь для данного примера имя logo.