Вижте всяка уеб страница и ще видите комбинация от текстово съдържание и изображения. И двата елемента са важни съставки в успеха на уебсайта. Текстовото съдържание е това, което посетителите на сайта ще прочетат и какви търсачки ще използват като част от техните алгоритми за класиране. Изображенията ще добавят визуален интерес към сайта и ще спомогнат за подчертаването на текстовото съдържание.
Добавянето на текст и изображения към уеб сайтове е лесно. Текстът се добавя със стандартни HTML тагове като параграфи, заглавия и списъци, докато изображенията се поставят на страница с елемент. След като добавите изображение към уеб страницата си обаче, може да искате текстът да се придвижва до изображението, а не да се подравнява под него (което е по подразбиране начина, по който изображението, добавено към HTML кода ще се изобрази в браузъра). Технически, можете да постигнете този вид, като използвате CSS (препоръчително) или като добавите визуалните инструкции директно в HTML (не се препоръчва, тъй като искате да запазите отделянето на стила и структурата на уебсайта си).
Използване на CSS
Правилният начин да промените начина на оформление на текста и изображенията на страницата и как се показват визуалните й стилове в браузъра е с CSS. Само не забравяйте, тъй като ние говорим за визуална промяна на страницата (правене на текст поток около изображение), това означава, че е домейн на Cascading Style Sheets.
-
Първо, добавете вашето изображение към вашата уеб страница. Не забравяйте да изключите визуални характеристики (като стойности на ширина и височина) от този HTML код. Това е важно, особено за отзивчив уебсайт, където размерът на изображението ще варира в зависимост от браузъра. Някои софтуерни продукти, като Adobe Dreamweaver, ще добавят информация за ширината и височината към изображенията, които са вмъкнати с този инструмент, така че не забравяйте да премахнете тази информация от HTML кода! Уверете се, обаче, да включите подходящ алтернативен текст. Ето един пример за това как може да изглежда вашият HTML код:
-
За целите на оформянето можете да добавите и класа към изображение. Тази стойност на класа е това, което ще използваме в нашия CSS файл. Обърнете внимание, че стойността, която използваме тук, е произволна, въпреки че за този конкретен стил имаме склонност да използваме стойности "ляво" или "дясно", в зависимост от това как искаме изображението ни да се приведе в съответствие. Смятаме, че простият синтаксис работи добре и е лесен за другите, които може би ще трябва да управляват даден сайт в бъдеще, за да разберат, но бихте могли да дадете тази стойност на класа, която искате.
Само по себе си тази класова стойност няма да направи нищо. Изображението няма автоматично да бъде изравнено вляво с текста. Затова сега трябва да се обърнем към нашия CSS файл.
-
В стиловата ви таблица вече можете да добавите следния стил:
.наляво {
плувка: ляво;
подложка: 0 20px 20px 0;
}
Това, което направихте тук, е използването на свойството "float" на CSS, което ще издърпа изображението от нормалния поток на документа (начинът, по който изображението нормално ще се показва и текстът ще бъде подравнен под него) и ще го подравни с лявата страна на контейнера , Текстът, който идва след него в HTML маркировката, сега се увива около него. Също така добавихме някои стойности на подложка, така че този текст да не е директно срещу изображението. Вместо това, той ще има някои хубави разстояния, които ще бъдат визуално привлекателни в дизайна на страницата. В стенограмата на CSS за подложка добавихме 0 стойности в горната и в лявата част на изображението и 20 пиксела вляво и отдолу. Не забравяйте, че трябва да добавите подложка от дясната страна на ляво подравнено изображение. Правното подравнено изображение (което ще разгледаме в един миг) ще има подложка, приложена от лявата му страна.
-
Ако преглеждате уеб страницата си в браузър, сега трябва да видите, че изображението ви е подравнено с лявата страна на страницата и текстът е добре обвит около нея. Друг начин да кажа това е, че изображението е "плавано вляво".
-
Ако искате да промените това изображение, за да бъде подравнено вдясно (както е в примера за снимка, който придружава тази статия), би било просто. Първо, трябва да сте сигурни, че в допълнение към стила, който току-що добавихме към нашия CSS за класовата стойност на "лявата", имаме и една за подравняване вдясно. Ще изглежда така:
.right {
float: right;
подложка: 0 0 20px 20px;
}
Можете да видите, че това е почти идентично с първото CSS, което написахме. Единствената разлика е стойността, която използваме за собствеността "float" и стойностите на подложките, които използваме (добавяне на някои в лявата страна на изображението вместо вдясно).
-
И накрая, ще промените стойността на класа на изображението от "ляво" на "надясно" във вашия HTML код:
-
Погледнете страницата си в браузъра сега и вашето изображение трябва да бъде подравнено вдясно с текста, който е добре обвит около него. Ние сме склонни да добавим и двата стила "ляво" и "дясно" към всички стилове, така че да можем да използваме тези визуални стилове, когато е необходимо, когато създаваме уеб страници. Тези два стила се превръщат в приятни, многократно използвани функции, с които можем да се обърнем, когато се налага да стилме изображения с обвиване около тях.
Използване на HTML Вместо CSS (и защо не трябва да направите това)
Макар че е възможно да се обвие текст около изображение с HTML, уеб стандартите налагат, че CSS (и стъпките, представени по-горе) е начинът да отидем, за да можем да запазим отделянето на структурата (HTML) и стила (CSS). Това е особено важно, когато смятате, че за някои устройства и оформления, този текст не може трябва да тече около изображението. За по-малки екрани, оформлението на отзивчив уебсайт може да изисква текстът наистина да се подреди под изображението и изображението да се простира по цялата ширина на екрана. Това лесно се прави с медийни заявки, ако стиловете ви са отделни от вашия HTML маркер.В днешния свят с множество устройства, където изображенията и текстът ще изглеждат по различен начин за различните посетители и на различни екрани, това отделяне е от съществено значение за дългосрочния успех и управлението на уеб страница.
