Снимки и мултимедия

от Fuedo - Уеб дизайн енциклопедия

Направо към: навигация, търсене

С времето снимките и мултимедията се превърнаха в неизменна част от всяка страница. Невъзможно е да си представим една уебстраница, създадена без помощта на изображенията.

Съдържание

Изображения

Добавянето на снимки към текста ви, иконки към навигацията, снимка като фон на даден елемент може да направи доста по приятен за потребителите, и в същото време да даде допълнителна информация, която да помогне за ориентирането на посетителите. Има 3 основни формата снимки който съвременните браузъри поддържат, .PNG, .GIF, .JPG . Разликата е в компресията, различните разщирения предлагат по добра компресия на данните в различните ситуации. Форматите .png и .gif ни дават възможност да зададем прозрачност. Един проблем с който много млади дизайнери се сблъскват е преименуването на даден файл от един формат в друг. Не можете просто да смените разширението на даден файл от .jpg на .gif и да очаквате браузарите да го декомпресират и изрисуват правилно :-). Затова не правете такива глупости! Ако искате да смените компресията на даден файл, използвайте програми за обработка на образи, като Photoshop или Gimp например. Тагът за вмкване на снимка е <img />. Тагът върви с един задължителен атрибут src който посочва пътят до снимката. Други атрибути на тагът <img /> са:

  • src : повочва пътят до снимката(местонахождението на снимката на сървара)
  • alt : задава алтернативен текст за снимката който се изписва ако снимката не може да се зареди.
  • longdesc : Ако алтернативният текст за снимката е по дълъг от 1024 символа, по добре е да използвате атрибутът longdesc, който указва път до страница с обяснение за снимката.
  • align : подравнява снимката в зависимост от зададената на атрибута стойност. Възможните стойности са, left,center, right, top, middle, bottom, texttop, absmiddle, baseline, absbottom.
  • border : задава рамка около снимката, като дебелината на рамката зависи от стойността на атрибута. Приема стойности в пиксели.
  • width : задава широчина на снимката в пиксели или проценти
  • height : задава височина на снимката в пикслеи или проценти
  • hspace : задава хоризонтално отстояние на снимката от обграждащите я елементи. Стойността на атрибута определя разстоянието в пиксели.
  • vspace : задава вертикално отстояние на снимката от обграждащите я елементи. Стойността на атрибута определя разстоянието в пиксели.

Нека направим няколко примера, за да видим всеки един от атрибутите поотделно в действие.


<HTML>
<HEAD>
<TITLE>Test</TITLE>
</HEAD>
<BODY>
<img src="put/do/snimka.gif" />
</BODY>
</HTML>

Както виждате това е съвсем прост пример. Имаме таг img и атрибут src. Тагът img няма затварящ таг затова за да го затворите трябва да поставите на края му затваряща наклонена. Стойността на атрибута src показва пътят до снимката. Има един единствен случай в който атрибутът src не е необходим, когато се използва атрибутът dynsrc за да изобразите филмче. Тази опция се поддържа само от Интернет Експлорер, така че по-добре не я използвайте :-) Ако имате някоя снимка на вашият компютър(на 100% съм сигурен, че имате)сложете като стойност на src пътят до снимката. Така примерът ще ви стане още по ясен, защото ще видите снимката. Ако не посочите пътят до снимката по правилен начин, ще получите само една празно квадратче с хиксче в него(В случая когато използвате като браузър Интернет Експлорер). Един друг атрибут, alt, ви позволява да поставите текст, в това празно квадратче в случаите когато снимката не се зареди(било то защото не сте указали правилен път, или просто снимките са забранени). ALT трябва да съдържя обяснителен текст към снимката. Целта му е да обясни какво не може да се види на снимката, така че помислете преди да напишете някоя глупост в ALT атрибута. Ето и примерче:


<HTML>
<HEAD>
<TITLE>Test</TITLE>
</HEAD>
<BODY>
<img src="put/do/snimka.gif" 
alt="Kratko obqsnenie za snimkata." />
</BODY>
</HTML>

Като погледнете този пример в браузър ше видите, че на снимката която не се е заредила, по очевидни причини е изрисуван текстът който е като съдържание на ALT атрибутът. В интернет експлорер ALT атрибутът има и още едно приложение, поставя така нареченият tooltip на снимката. Когато поставите поставите мишката върху снимката, в едно жълто квадратче се изписва съдържанието на alt атрибута. Ако дължината на Обяснителният текст надвишава 1024 символа по-добре е да използвате един друг атрибут longdesc(long description). Като стойност на longdesc поставяте линк към страница която съдържа обяснението за снимката. Сега да разгледаме атрибутът align. Нещо което пропуснах дотук да кажа е, че тагъ img е инлайн елемент. Това значи, че като го поставим посредата на текст той просто ще следва текстът сякаш е дума от текста. Проблемът е, че ако текста е 12 пиксела висок а снимката 300 пиксела височината на реда ще стане 300 пиксела което е доста грозновато. За да изкарате снимката от "потока" на текста трябва да използвате атрибутът align със една от трите му стойности ,left,center и right. Така текстът ще заобикаля окло снимката и ще изглежда доста приятно. Ето пример:


<HTML>
<HEAD>
<TITLE>Test</TITLE>
</HEAD>
<BODY>
  <p>
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst 
    <img src="put/do/snimka.gif" align="left" alt="Kratko obqsnenie za snimkata." />
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst 
  </p>
</BODY>
</HTML>

След като добавихме align, нещата изглеждат много приятни. Може да опитате да го махнете за да разберете разликата. За съжаление както може би сте забелязали, текстът се допира до ръба на снимката. зада сложите отстояние от снимката до обкръжаващите я елементи трябва да използвате атрибутите vspace и hspace. Vspace задава хоризонталното отстояние, а hspace хоризонталното. Тези два атрибута дават място на снимката да диша. Ето и примера:


<HTML>
<HEAD>
<TITLE>Test</TITLE>
</HEAD>
<BODY>
  <p>
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst 
    <img src="put/do/snimka.gif" align="left" hspace="20" vspace="10" 
    alt="Kratko obqsnenie za snimkata." />
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst 
  </p>
</BODY>
</HTML>

Така зададохте вертикално отстояние 10 пиксела и хоризонтално отстояние 20 пиксела. Понякога искаме изображението да има различен размер при изрисуване от деистжителният им размер. Атрибутите weidth и height ни помоагат да променяме размера на изображението.


<HTML>
<HEAD>
<TITLE>Test</TITLE>
</HEAD>
<BODY>
  <p>
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst 
    <img src="put/do/snimka.gif" align="left" width="100" height="100"
    hspace="20" vspace="10" alt="Kratko obqsnenie za snimkata." />
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst 
  </p>
</BODY>
</HTML>

Ако зададете стойност само по ширина или само по височина, другата стойност се променя пропорционално, т.е. ако имаме снимка с размер 250х300 и зададем стойност 25 пиксела ширина, то тогава стойността за височина автоматично ше бъде 30 пиксела.

Както виждате размерът на снимката от горния пример се промени. За съжаление, при промяна на качеството браузарите не се справят много добре с изрисуването на снимката (развалят качеството), за това ви препоръчвам да не използвате тези атрибути за промяна на размерът на снимката. Още повече, че ако се намали размерът ше зареждате повече байтове за по малка снимка, вместо да я намалите с някоя програма за графична обработка.

Тези два атрибута имат и едно предимство: да приемем, че имате бавна интернет връзка, а сраницата ви е обемиста, зареждането може да се забави. Ако изображението няма стриктно зададени размери изирисуването на текста, въпреки че е зареден, се забавя до зареждането на цялото изображение, което е малко досадно. Ако зададете размер на изображението, текстът ще се изрисува дори и да не се е заредило изображението.

Последния атрибут който ще разгледаме е border. Той ни позволява да зададем рамка около снимката. Стойността, която приема е числова и определя дебелината на рамката.


<HTML>
<HEAD>
<TITLE>Test</TITLE>
</HEAD>
<BODY>
  <p>
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst 
    <img src="put/do/snimka.gif" align="left" width="100" height="100"
    hspace="20" vspace="10" border="5" alt="Kratko obqsnenie za snimkata." />
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
    Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst 
  </p>
</BODY>
</HTML>

Мултимедия

Една много важна възможност на HTML е да възпроизвежда видео клипове и песни. Нека разгледаме възможността да пуснете песен като фон на страницата.

Песен за фон с bgsound

Тагът който използвате за да сложите музика като фон на вашата страница е bgsound.

Забележка

Този таг се поддържа само от Интернет Експлорер и също така при всяко презареждане на страницата започва да се възпроизвежда отначало.

Ето и списъка с атрибутите:

  • loop - Определя колко пъти ще се повтаря фоновата песен, ако искате безброй пъти използвате infinite
  • src - Определя пътя до файла който трябва да се възпроизведе.

<HTML>
  <HEAD>
    <TITLE>Test</TITLE>
  </HEAD>
  <BODY>
    <BGSOUND SRC="pesen.mp3">
  </BODY>
</HTML>

Съветвам ви да използвате този таг внимателно, ако изобщо някога го използвате. Много е лесно да изнервите потребителите си с фонова песен която не могат да спрат.

Лични инструменти