Варна - 2006

Съдържание:

HTML - Въведение
HEAD
BODY - фон, текст, цветове на връзките
FONT - работа с текстове
Форматиране на параграфи
Цветове
Хипервръзки
IMG - Изображения
Таблици
Списъци
Формуляри
Линии
Фреймове
Музикален фон

Изображения

  • Изображенията - картинки, фотографии и др., анимирани или статични - са важна част от почти всеки сайт в мрежата.
  • Добре подбрани и разположени, те могат да "освежат" HTML-страницата ви, но претрупването на една страница с изображения може да постигне и обратния ефект, като я направи непривлекателна.

Формати на файловете за изображения:

  • gif формат , който се използва предимно за картинки, илюстрации и надписи, които не са оцветени в богата цветова гама и не съдържат "сложни" оттенъци и светлосенки.
    • Файловете с разширение gif имат две важни предимства пред другия основен формат:
      • могат да съдържат "прозрачен" елемент в себе си - това например може да е фона на буквите от някакъв надпис, който ще прозира и под него ще се вижда фона на страницата. Тогава този файл ще "пасва" на страници с различно оцветен фон.
      • могат да бъде анимирани - да съдържат движеща се картинка.
  • jpeg или jpg формат (и двете разширения са валидни и равностойни), който се използва предимно за висококачествени фотографии.
  • Възможностите на този формат за показване на цветове и оттенъци са по-богати от тези на gif формата, но за сметка на това jpg файла не може да бъде анимиран, нито да съдържа прозрачни елементи.

Търсене и сваляне на изображения от WEB

  • Безплатни изображения може да намерите като търсите по ключови думи, например free images, free animated gifs, free pictures, free graphics, free clip art, free buttons, free backgrounds, free interfaces и т.н.
  • Записване на изображение с командата "Save Picture As".
  • Преди да вземете някое изображение и да го използвате в страницата си е нужно да се уверите, че то не е обект на авторското право и че е безплатно!!!

Показване на изображения в HTML -документа

  • Използва се тага <img src=" myimage.gif " />
  • По подразбиране изображението се появява в лявата част на страницата.
  • Ако желаем да разположим изоброжението вдясно или в средата на страницата трябва да използваме тага <div> и атрибута му align със съответните стойности - left (което е и по подразбиране), right и center.
    • Например
      <div align="center">
      <img src="Example.gif" />
      </div>

Атрибути на тага за изображение:

  • Атрибутите width и height задават съответно ширина и височина на изображението в пиксели.
  • Атрибута alt задава алтернативно название на изображението (текст, който се показва, в случай, че браузъра не може да зареди изображението).
    <img src="Example.gif" width="163" height="73" alt="Моята картинка " />
  • Атрибута align – подравняване на изображението спрямо текста
    <img src="Example.gif" width="163" height="73" align=“ top/bottom/middle и др." />
  • Атрибута hspace задава свободно пространство отляво и отдясно на изображението, а атрибута vspace - отгоре и отдолу. Стойностите са в пиксели.

Упражнение 11:

а) Копирайте следния текст в лявата част на прозореца по-долу и натиснете бутона над него.

<html>
<body>

<p>
Една картинка:
<img src="constr4.gif"
width="144" height="50">
</p>

<p>
Анимирано изображение:
<img src="hackanm.gif"
width="48" height="48">
</p>

</body>
</html>

б) Направете редакция, като добавите атрибути на тага IMG

в) Добавете картинка от друг сайт - <img src="http://www.w3schools.com/images/ie.gif">
</p>

г) Направете една картинка хипервръзка:

<html>
<body>
<p>Картинката може да бъде линк:
<a href="http://www.otlichen.com/web">
<img border="0" src="buttonnext.gif" width="65" height="38">
</a>
</p>

</body>
</html>

Упражнение 12:

Работа с изображения в Dreamweaver

  1. Вмъкването на изображение става от менюто Insert/Image.
  2. В Properties се попълват атрибутите alt, border и т.н.
  3. В полето link се въвежда адреса на страницата, към която искате да има връзка.
  4. В едно изображение може да се направи карта (map), така че различни части от него да са хипервръзки към различни страници. Това се прави като се посочи MAP от Properties и се използват инструментите за очертаване, за да се очертаят области от изображението.
JDJ © 2006 Всички права запазени.