Добавяне на медийно съдържание, WebReference
Добавяне на изображения
За да добавим изображения към страницата, използваме вграден елемент. Елемент се отнася до самостоятелни или празни елементи; това означава, че не съдържа никакво съдържание и съществува като един таг. За да работи, атрибутът src трябва да бъде активиран със стойност, указваща източника на изображението. Стойността на атрибута src е URL, обикновено по отношение на сървъра, хостващ сайта.
Заедно с атрибута src, атрибутът alt (алтернативен текст) трябва да бъде приложен за описание на съдържанието на изображението. Стойността на атрибута alt се събира от търсачките и помощните технологии, за да им помогне да предадат целта на изображението. На мястото на изображението ще се покаже алтернативен текст, ако по някаква причина изображението не е налично.
Демонстрация на добавяне на изображение
Фигура: 9.01. На мястото на липсващото изображение се показва алтернативен текст
Поддържани формати на изображения
Изображенията се предлагат в различни файлови формати и всеки браузър може или не може да поддържа различни формати. Като цяло, най-разпространените формати на изображения, поддържани в Интернет, са gif, jpg и png. От тях най-широко използваните формати днес са jpg и png. JPG форматът осигурява качество на изображението с голям брой цветове, като същевременно поддържа скромен размер на файла, идеален за бързо зареждане. Форматът png е чудесен за изображения с прозрачност или малко цветове. Обикновено виждаме, че jpg изображения се използват за снимки, а png изображения се използват за икони или фонови шарки.
Размери на изображенията
Важно е да определите размера на изображението, за да кажете на браузъра колко голямо трябва да бъде изображението, преди страницата да се зареди. По този начин браузърът може да запази място за изображението и да изобрази страниците по-бързо. Има няколко различни начина за оразмеряване на изображения, които работят добре на дадена страница. Един от начините е да използвате атрибутите width и height директно върху маркера в HTML.
Освен това свойствата на CSS за ширина и височина могат да се използват за задаване на размерите на изображение. Когато CSS свойствата и HTML атрибутите се прилагат едновременно, тогава CSS свойствата ще имат предимство пред HTML атрибутите.
Посочването само на ширината или височината автоматично ще коригира размера, за да поддържа съотношението на изображението. Като пример, ако искаме изображението да е с височина 200 пиксела, но ширината не ни притеснява твърде много, тогава можем да зададем височината на 200 пиксела и ширината на изображението ще се коригира съответно. Задаването на ширина и височина едновременно също ще работи, но това може да изкриви изображението и да доведе до изкривяване.
Демонстрация на размери на изображението
Въпреки че атрибутите ширина и височина директно съхраняват някакво значение в оригиналния размер на изображението в HTML, може да е трудно да управлявате множество изображения с еднакъв размер. В такъв случай е обичайна практика да се използва CSS за преоразмеряване на изображения.
Позициониране на изображения
Можем да използваме редица различни подходи за позициониране на изображения на уеб страница. По подразбиране изображенията са позиционирани като вградени елементи, но тяхната позиция може да бъде променена с помощта на CSS, по-специално свойства на поплавък, дисплей и модел на кутия, включително подложка, рамка и поле .
Вградено позициониране на изображения
По подразбиране елементът е вграден блок. Добавянето на изображение към страницата без никакъв стил ще го позиционира на същия ред като съдържанието около изображението. Също така, височината на линията, на която се появява изображението, ще се промени, за да съответства на височината на изображението и това може да създаде големи вертикални пропуски в линията.
Демонстрация на изображение на линия
Рядко се налага да оставяте изображения, разположени по подразбиране. По-често изображенията се изобразяват като блокови или рационализирани елементи от едната страна.
Блокиране на позиционирането на изображението
Чрез добавяне на свойство display към изображението и задаване на стойността му да блокира, ние ще принудим изображението да бъде блоков елемент. Това показва изображението на отделен ред, което позволява на околното съдържание да се носи над и под изображението.
Демонстрация на блоково изображение
Позициониране на изображения наляво или надясно
Понякога показването на изображение като вграден, блок или дори вграден елемент не е идеално. Можем да направим изображението да се появява от лявата или дясната страна на съдържащия елемент, докато друго съдържание тече около изображението, ако е необходимо. За целта използваме свойството float с лява или дясна стойност. .
Връщайки се към урок 5, "Позициониране на съдържанието", припомняме, че свойството float първоначално е било предназначено да позиционира изображения отляво или отдясно на съдържащия елемент. Сега го използваме за тази първоначална цел.
Опаковането на изображението е началото, а цялото останало съдържание ще бъде подравнено точно срещуположно. Ще използваме свойството margin, за да осигурим пространство около изображението. Освен това можем да приложим свойствата на подплънките, контурите и фона, за да създадем рамка около изображението по желание.