Паглядзіце на любы вэб-старонцы, і вы ўбачыце спалучэнне ўтрымання тэксту і малюнкаў. Абодва гэтыя элемента з'яўляюцца важнымі кампанентамі ў поспеху сайта. Змест тэксту што наведвальнікі сайта будуць чытаць і што пошукавыя сістэмы будуць выкарыстоўваць у якасці часткі сваіх алгарытмаў ранжыравання. Выявы дадаць візуальны цікавасць да сайта і дапаможа акцэнтаваць тэкставае ўтрыманне.
Даданне тэксту і малюнкаў на вэб-сайты лёгка. Тэкст дадаецца са стандартнымі HTML тэгаў, такіх як абзацы, загалоўкі і спісы, у той час як выявы размешчаны на старонцы з элементам . Пасля таго, як вы дадалі малюнак на вэб-старонцы, аднак, вы можаце мець паток тэксту побач з выявай, а не выраўноўваць пад ім (што шлях па змаўчанні малюнак дадаецца ў HTML код будзе аказваць у браўзэры). Тэхнічна, ёсць два спосабу , вы можаце дасягнуць гэтага погляду, альбо з дапамогай CSS (рэкамендуецца) або шляхам дадання візуальных інструкцый непасрэдна ў HTML (не рэкамендуецца, так як вы хочаце , каб падтрымліваць падзел стылю і структуры для вашага сайта).
выкарыстанне CSS
Правільны спосаб змяніць спосаб тэксту і малюнкаў старонкі толькі макет , і як іх візуальныя стылі з'яўляюцца ў браўзэры з дапамогай CSS . Проста памятаеце, так як мы кажам аб візуальным змене на старонцы (што робіць тэкст обцяканьне малюнка), гэта азначае, што дамен каскадных табліц стыляў.
- Па-першае, дадайце малюнак на вэб-старонцы. Памятаеце, каб выключыць якія-небудзь візуальныя характарыстыкі (напрыклад, значэнні шырыні і вышыні) з гэтага HTML. Гэта вельмі важна, асабліва для спагадным сайта , дзе памер малюнка будзе мяняцца ў залежнасці ад браўзэра. Некаторыя праграмы, як Adobe Dreamweaver, дадасць шырыню і вышыню інфармацыі да малюнкаў, якія устаўленыя з гэтым інструментам, таму не забудзьцеся выдаліць гэтую інфармацыю з HTML-кода! Будзьце ўпэўненыя, аднак, ўключыць адпаведны альтэрнатыўны тэкст . Вось прыклад таго, як ваш HTML код можа выглядаць:
-
- Для мэт мадэлявання, вы можаце таксама дадаць клас да выявы. Гэта значэнне класа, што мы будзем выкарыстоўваць яе ў нашым файле CSS. Звярніце ўвагу, што значэнне, якое мы выкарыстоўваем тут адвольна, хоць для гэтага канкрэтнага стылю, мы схільныя выкарыстаць значэнне «налева» або «направа», у залежнасці ад таго, як мы хочам, каб наш малюнак, каб выраўнаваць. Мы знаходзім, што просты сінтаксіс добра працаваць і быць лёгка для тых, хто, магчыма, давядзецца кіраваць сайтам у будучыні, каб зразумець, але вы маглі б даць гэта значэнне любога класа вы хочаце.
-
- Само па сабе гэта значэнне класа не будзе нічога рабіць. Малюнак не будзе аўтаматычна выраўноўваюцца па левым краі тэксту. Для гэтага нам трэба звярнуцца да нашага файлу CSS.
-
- У табліцы стыляў, вы можаце дадаць наступны стыль:
- .left {
- плаваць: злева;
- абіўка: 0 20px 20px 0;
- }
- То , што вы зрабілі тут выкарыстоўваць ўласцівасць CSS «паплавок» , які будзе цягнуць малюнак з нармальнага патоку дакумента ( такім чынам , што малюнак , звычайна адлюстроўваць б, з тэкстам выраўнаваны пад ім) , і ён будзе ўзгадняць яго з левага боку кантэйнера , Тэкст, які прыходзіць пасля яго ў HTML-перадзеле з кампаніяй абгарнуць вакол яго. Мы таксама дадалі некаторыя значэння водступаў, так што гэты тэкст не толькі непасрэдна супраць малюнка будзе. Замест гэтага ён будзе мець некаторы добрае адлегласць, якое будзе візуальна прывабным дызайнам старонкі. У CSS скарачэнні для запаўнення, мы дадалі 0 значэння ў верхнюю і левы бок малюнка, і 20 пікселяў на яго левы і ніжнюю частку. Памятаеце, што вам трэба дадаць водступы правай частка левых выраўнаваны малюнкаў. Права выраўнавана малюнак (якое мы разгледзім у дадзены момант) будзе мець абіўку прымяняецца да левай баку.
- Пры праглядзе вэб-старонкі ў браўзэры, вы павінны ўбачыць, што выява выраўноўваецца па левым боку старонкі і тэкст добра абгортвае вакол яго. Іншы спосаб сказаць гэта тое, што выява «паплыў налева».
- Калі вы хочаце змяніць гэта малюнак, каб быць выраўнаваны па правым краі (як у прыкладзе фатаграфіі, суправаджалы гэтую артыкул), гэта было б проста. Па-першае, вы павінны пераканацца ў тым, што, у дадатак да стылю мы толькі што дадалі ў наш CSS для класа значэння «левых», у нас ёсць адзін для правага выраўноўвання. Гэта будзе выглядаць наступным чынам:
- .right {
- плаваць: права;
- абіўка: 0 0 20px 20px;
- }
- Вы можаце бачыць, што гэта амаль ідэнтычна першаму CSS мы пісалі. Адзіным адрозненнем з'яўляецца значэнне, якое мы выкарыстоўваем для ўласцівасці «плавае» і значэння водступаў мы выкарыстоўваем (даданне некаторых да левай баку нашага ладу, а не справа).
- І, нарэшце, вы б змяніць значэнне класа выявы ў дыяпазоне ад «левага» на «права» ў вашым HTML:
-
- Паглядзіце на сваёй старонцы ў браўзэры цяпер і ваша малюнак павінна быць выраўнавана па правым краі з тэкстам акуратна абгарнуўшы вакол яго. Мы, як правіла, дадаць абодва гэтыя стылі, «налева» і «права» на ўсе нашы табліцы стыляў, так што мы можам выкарыстоўваць гэтыя візуальныя стылі, як трэба, калі мы ствараем вэб-старонкі. Гэтыя два стылю сталі добрыя, шматразовыя функцыі, якія мы можам звярнуцца да кожны раз, калі нам трэба стылізаваць выявы з абкручванні тэксту вакол іх.
Выкарыстанне HTML Замест CSS (і чаму вы не павінны & # 39; т зрабіць гэта)
Нягледзячы на тое, што можна зрабіць тэкст абгарнуць вакол малюнак з HTML, вэб-стандарты дыктуюць, што CSS (і этапы, апісаныя вышэй) з'яўляецца шлях, каб мы маглі падтрымліваць падзел структуры (HTML) і стыль (CSS). Гэта асабліва важна , калі ўлічыць , што для некаторых прылад і схем, што тэкст не можа спатрэбіцца обцяканьне малюнка. Для невялікіх экранаў, размяшчэнне спагадны вэб-сайта можа запатрабаваць, каб тэкст сапраўды выраўноўваць ніжэй малюнка і што малюнак расцягваецца на ўсю шырыню экрана. Гэта лёгка зрабіць з запытамі сродкаў масавай інфармацыі , калі вашы стылі асобна ад HTML - разметкі. У сучасным свеце мульты-прылада, дзе малюнкі і тэкст будуць выглядаць па-рознаму для розных наведвальнікаў і на розных экранах, гэты падзел мае важнае значэнне для доўгатэрміновага поспеху і кіравання вэб-старонкі.