Ħares lejn kwalunkwe paġna tal-web u se tara kombinazzjoni ta 'kontenut ta' test u xbihat. Dawn iż-żewġ elementi huma ingredjenti essenzjali għas-suċċess ta 'websajt. Il-kontenut tat-test huwa dak li l-viżitaturi tas-sit se jaqraw u liema magni tat-tiftix se jużaw bħala parti mill-algoritmi tal-klassifikazzjoni tagħhom. L-immaġini se jżidu l-interess viżiv għas-sit u jgħinu jżidu l-kontenut tat-test.
Iż-żieda tat-test u l-immaġini għall-websajts hija faċli. It-test huwa miżjud b'tikketti HTML standard bħal paragrafi, intestaturi u listi, filwaqt li stampi jitqiegħdu fuq paġna bl-element . Ladarba żidt immaġni fuq il-paġna web tiegħek, madankollu, tista 'tixtieq li jkollok il-fluss tat-test ħdejn l-immaġni, aktar milli tallinjaha taħtha (li hija l-mod awtomatiku li tiżdied immaġini miżjuda mal-kodiċi HTML fil-browser). Teknikament, hemm żewġ modi kif tista 'tikseb din il-ħarsa, billi tuża CSS (rakkomandat) jew billi żżid l-istruzzjonijiet viżwali direttament fl- HTML (mhux rakkomandat, peress li trid iżżomm is-separazzjoni tal-istil u l-istruttura tal-website tiegħek).
Bl-użu tas-CSS
Il-mod korrett biex tinbidel il-mod kif it-tqassim tat-test u l-immaġni ta 'paġna u kif l-istili viżwali tagħhom jidhru fil-browser huwa ma' CSS . Ftakar biss, peress li qed nitkellmu dwar bidla viżwali fuq il-paġna (nagħmlu l-fluss tat-test madwar immaġini), dan ifisser li huwa d-dominju ta 'Cascading Style Sheets.
- L-ewwel, żid l-immaġni tiegħek mal-paġna web tiegħek. Ftakar li teskludi kwalunkwe karatteristiċi viżwali (bħal valuri ta 'wisa' u għoli) minn dak l-HTML. Dan huwa importanti, speċjalment għal websajt li tirreaġixxi fejn id-daqs tal-immaġni se jvarja bbażat fuq il-browser. Ċerti softwer, bħal Adobe Dreamweaver, se jżidu informazzjoni dwar il-wisa 'u l-għoli għal stampi li jiddaħħlu ma' dik l-għodda, hekk kun żgur li tneħħi din l-informazzjoni mill-kodiċi HTML! Tkun żgurata , madankollu, li tinkludi t-test alt xieraq . Hawn hu eżempju ta 'kif tista' tfittex il-kodiċi HTML tiegħek:
-
- Għal skopijiet ta 'grafika, tista' wkoll iżżid klassi ma 'immaġni. Dan il-valur tal-klassi huwa dak li se nużaw fil-fajl CSS tagħna. Innota li l-valur li nużaw hawn huwa arbitrarju, għalkemm, għal dan l-istil partikolari, għandna t-tendenza li nużaw valuri ta '"xellug" jew "dritt", skond liema mod irridu li d-dehra tagħna tkun allinjata. Insibu dik is-sintassi sempliċi biex taħdem sew u tkun faċli għal oħrajn li jista 'jkollhom jimmaniġġjaw sit fil-futur biex jifhmu, imma int tista' tagħti dan il-valur tal-klassi li trid.
-
- Minnu nnifsu, dan il-valur tal-klassi mhux se jagħmel xejn. L-immaġini mhux awtomatikament tkun allinjata fuq ix-xellug tat-test. Għal dan, issa għandna bżonn ngħaddu għall-fajl CSS tagħna.
-
- Fl-istil tal-paġna tiegħek, issa tista 'żżid l-istil li ġej:
- .xejn {
- float: left;
- padding: 0 20px 20px 0;
- }
- Dak li għamilt hawn hija l-użu tal- proprjetà "float" tas - CSS , li tiġbed l-immaġini minn fluss ta 'dokument normali (il-mod kif dik l-immaġni normalment tkun tidher, bit-test allinjat taħtha) u se jallinjah man-naħa tax-xellug tal-kontenitur tiegħu . It-test li ġej warajh fl-immarkar HTML ma 'issa qajjem madwaru. Aħna żiedu wkoll xi valuri ta 'l-ikkuttunar sabiex dan it-test ma jmurx direttament kontra l-immaġni. Minflok, ikollha xi spazju sbieħ li jkun viżwalment attraenti fid-disinn tal-paġna. Fis-sekwenza tas-sekwenza tas-CSS għall-ikkuttunar, aħna żiedu 0 valuri man-naħa ta 'fuq u tax-xellug tal-immaġini, u 20 pixels lejn ix-xellug u l-qiegħ. Ftakar, għandek iżżid xi padding fuq in-naħa tal-lemin ta 'xbieha allineata xellug. Immaġini allinjata d-dritt (li se nħarsu f'mument) ikollha padding applikat fuq in-naħa tax-xellug tiegħu.
- Jekk tara l-paġna tal-web tiegħek f'brawżer, issa għandek tara li d-dehra tiegħek hija allinjata man-naħa tax-xellug tal-paġna u t-test jimmodifika sewwa madwaru. Mod ieħor biex ngħid dan huwa li l-immaġni hija "imqiegħed fuq ix-xellug".
- Jekk riedet tibdel din id-dehra biex tkun allinjata mal-lemin (bħal fil-eżempju tar-ritratti li jakkumpanja dan l-artikolu), ikun sempliċi. L-ewwelnett, trid tiżgura ruħek li, minbarra l-istil, aħna biss żiedu mas-CSS tagħna għall-valur tal-klassi ta '"xellug", aħna għandna wkoll waħda għall-allinjament dritt. Jidher bħal dan:
- .right {
- float: dritt;
- ikkuttunar: 0 0 20px 20px;
- }
- Tista 'tara li dan huwa kważi identiku għall-ewwel CSS li kittilna. L-unika differenza hija l-valur li nużaw għall-proprjetà "float" u l-valuri tal-ikkuttunar li nużaw (u żiedu xi wħud fuq in-naħa tax-xellug tal-immaġni tagħna minflok fuq id-dritt).
- Finalment, int tibdel il-valur tal-klassi tal-immaġni minn "xellug" għal "dritt" fl-HTML tiegħek:
-
- Ħares lejn il-paġna tiegħek fil-brawżer issa u l-immaġni tiegħek għandha tkun allinjata mal-lemin bit-test imgeżwer b'mod tajjeb madwaru. Għandna t-tendenza li żżid dawn iż-żewġ stili, "xellug" u "tajjeb" għall-istili ta 'l-istili kollha tagħna sabiex inkunu nistgħu nagħmlu użu minn dawn l-istili viżivi skond kif inkunu qegħdin nagħmlu paġni tal-web. Dawn iż-żewġ stili jsiru karatteristiċi sbieħ u li jistgħu jerġgħu jintużaw li nistgħu nuru meta jkollna bżonn stampi ta 'stil bit-tgeżwir tat-test madwarhom.
Bl-użu tal-HTML Minflok CSS (u Għaliex Ma Tieħux Dan)
Anki jekk huwa possibbli li jsir test tal-wrap madwar immaġni b'HTML, l-istandards tal-web jiddettaw li CSS (u l-passi ppreżentati hawn fuq) huwa l-mod biex imorru sabiex inkunu nistgħu nżommu separazzjoni tal-istruttura (HTML) u stil (CSS). Dan huwa speċjalment importanti meta tikkunsidra li, għal xi apparati u disinni, dak it-test jista 'ma jkunx jeħtieġ li jiċċirkola madwar id-dehra. Għal skrins iżgħar, it-tqassim tal-websajt li tirrispondi jista 'jeħtieġ li t-test fil-fatt jallinja taħt l-immaġni u li l-immaġni tistira l-wisa' sħiħ tal-iskrin. Dan jista 'jsir faċilment bil -mistoqsijiet tal-midja jekk l-istili tiegħek huma separati mill-markup HTML tiegħek. Fid-dinja tal-apparat multiplu tal-lum, fejn l-immaġini u t-test se jidhru b'mod differenti għal viżitaturi differenti u fuq skrins differenti, din is-separazzjoni hija essenzjali għas-suċċess u l-ġestjoni fit-tul ta 'paġna web.