Презентация на тему "Гиперссылки и графические изображения"

Содержание

• 
  Слайд 1
  

  Графические изображения. Гиперссылки НОВОПОЛОЦК, 2013 КИТ Web-технологии Лекция 3

• 
  Слайд 2

  СОДЕРЖАНИЕ

  Вставка изображений Атрибуты изображения (альтернативный текст, размеры изображений, выравнивание, рамки, поля) Оптимизация графики для Web-страниц Использование гипертекстовых ссылок Создание изображения-карты 2

• 
  Слайд 3

  Выберите формат для предложенных изображений

  3 Мерцающие звезды Пейзаж Картинка с неровным краем, оттенками цвета

• 
  Слайд 4

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

  4 Форматы графических изображений в WWW

• 
  Слайд 5
  

  5 не рекомендуются

• 
  Слайд 6

  Абсолютная адресация

  6 site images rus eng page.html ris.gif html index.html D:/site/images/ris.gif http://www.company.by/images/ris.gif Баннер: 

• 
  Слайд 7

  Относительная адресация

  7 site images eng page.html ris.gif html index.html logo.png rus для index.html  Задача: вставить на каждую из страниц изображение из файла ris.gif для page.html  вставка logo.pngна page.html (страница и изображение лежат в одной папке) 

• 
  Слайд 8

  Атрибут ALT(альтернативный текст)

  8  Альтернативный текст – текст, который выводится браузером, пока идет загрузка изображения (или браузером, не поддерживающим отображение графики) logo.png

• 
  Слайд 9

  Атрибут TITLE(всплывающая подсказка)

  9 Всплывающая подсказка– текст, который выводится браузером при наведении курсора на изображение Для изображений, которые выполняют дизайнерские или служебные функции значения alt и title можно оставлять пустыми: alt=“” title=“” (атрибуты обязательны в XHTML)

• 
  Слайд 10

  Атрибуты WIDTH и HEIGHT (размеры изображения)

   

• 
  Слайд 11

  Атрибут ALIGN(выравнивание)

  11 top — верхний край объекта выравнивается по верхнему краю строки align=“top” middle— центр объекта выравнивается по базовой линии строки align=“middle” bottom— нижний край объекта выравнивается по базовой линии строки align=“bottom” left — объект выравнивается по левому краю, при этом возможно обтекание объекта текстом align=“left” right — объект выравнивается по правому краю, при этом возможно обтекание объекта текстом align=“right”

• 
  Слайд 12

  Атрибуты BORDER(рамки вокруг изображения)

  12 Атрибут border задает ширину (в пикселах) рамки, одинаковой по цвету с текстом на странице:

  По умолчанию цвет текста (и рамки) черный:

• 
  Слайд 13

  Атрибуты VSPACE и HSPACE(поля вокруг изображения)

  13 Атрибут hspace и vspace позволяют задать размер в пикселах пустого пространства по горизонтали и вертикали соответственно вокруг изображения, чтобы текст не «наезжал» на него hspace vspace

• 
  Слайд 14

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

  14 текст или графика Some text goes here  Пример: адресная часть указатель ссылки

• 
  Слайд 15

  Типы гиперссылок

  15 Гиперссылки Внешние Внутренние Переход внутри документа Переход ВНЕ текущего веб-узла Полный (абсолютный) URL-адрес документа Переход на другую страницу ТЕКУЩЕГО веб-узла Относительный путь к документу Быстрый переход от фрагмента к фрагменту внутри документа без прокрутки Якорь

• 
  Слайд 16

  Внешние ссылки

  16 Переход ВНЕ текущего веб-узла Ссылка на сайт Microsoft Отправить письмо Ссылка на zip-архив

• 
  Слайд 17

  Внутренние ссылки

  17 Относительныйадрес: ссылка с index.html на page.html ссылка с page.html на index.html ссылка с page.html на ris.gif site images rus eng page.htm ris.gif html index.htm Переход на другую страницу ТЕКУЩЕГО веб-узла

• 
  Слайд 18

  Использование якоря

  18 Переход от фрагмента к фрагменту

  Пример якоря

  Оглавление

  Глава 1 Глава 2

  Наверх страницы

  Глава 2

  Наверх страницы

• 
  Слайд 19

  Цель гиперссылки (TARGET)

  19 Имя окна или фрейма, где будет открыт документ, который указан в href. В качестве аргумента используется имя окна или фрейма или значение: _blank— откроет документ в новом окне _parent— откроет документ во фрейме-родителе. Если такого нет, откроет в текущем окне. _top— отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, откроет в текущем окне _self — откроет в текущем окне (по умолчанию) Ссылка на сайт Microsoft, которая загрузится в новом окне

• 
  Слайд 20

  Создание изображения-карты

  20 Изображения-карты (image map) позволяют пользователю связывать ссылки на другие документы с отдельными частями изображений

• 
  Слайд 21
  

  21 … активные области изображения

• 
  Слайд 22

  Активные области

  22

• 
  Слайд 23

  Форма и координаты активной области

  23 Значения атрибута shape (форма): rect – прямоугольник circle – круг poly – многоугольник rect:coords="a,b,c,d" a,b - координаты x и y верхнего левого угла области c,d - координаты x и y правого нижнего угла области Значения атрибута coords (координаты) зависят от формы активной области: circle:coords="a,b,c" a,b - координаты x и y центра окружности c - радиус окружности poly:coords="a,b,c,d, ... ,a,b" каждая пара задает координаты x и y вершин многоугольника первая и последняя пары совпадают, задавая замкнутую фигуру a,b c,d a,b c

• 
  Слайд 24

  Изображение-карта и графическое изображение

  24 Чтобы привязать к созданной карте графическое изображение, необходимо ввести атрибут usemapв тег img: Следует задать ширину и высоту изображения В качестве примера создадим изображение-карту на основе графического файла postart.gif

• 
  Слайд 25
  

  Это активные области, которые необходимо выделить; Координаты можно просчитать с помощью Photoshop, выставив направляющие

• 
  Слайд 26

  Пример

  В нужном месте документа вставляем изображение с требуемыми параметрамиС помощью атрибута usemap добавляем ссылку на описание изображения-карты. Определяем изображение-карту с именем, указанным в usemap… Определяем активные области изображения 26

• 
  Слайд 27

  Пример (листинг)

  27