Në këtë postim do t'ju tregoj, si zakonisht vendosni sfondin e faqes duke përdorur HTML kodi.
Unë do t'ju tregoj gjithashtu një shërbim të shkëlqyer të huaj për zgjedhjen e sfondeve pa probleme.
Tani cilësimet e faqes janë bërë më të lehta dhe më të përshtatshme përmes konzollave CMS si WordPress.
Ndonjëherë është e nevojshme të ndryshoni shabllonet e faqeve të shitjes, dhe ky artikull do t'ju ndihmojë me këtë.
Nëse nuk e dini se çfarë është HTML, atëherë mund të quhet përgjithësisht gjuha e sajteve ose një grup rregullash me të cilat krijohen faqet.
Për shembull, ju shihni një foto në një faqe interneti, kur në kodin HTML të faqes mund të duket kështu:
Vendos një ngjyrë të fortë në sfondin e faqes.
Për të instaluar sfond me ngjyra të forta, duhet të etiketoni shtoni atribut bgcolor.
< html >
< head >
< title >Titulli i faqes.
< body bgcolor = "#ffcc00" >
Mund ta ngjisni këtë kod në një skedar teksti dhe ta ruani me shtesën .html. Pastaj hapeni me çdo shfletues dhe shikoni rezultatin.
Siç mund ta keni marrë me mend, ngjyra e sfondit vjen nga kodi i ngjyrës në atribut bgcolor = "vlera" të cilat mund të gjenden duke klikuar në këtë lidhje.
Vendosja e një imazhi në sfondin e një faqe HTML.
Në mënyrë që vendos imazhin e sfondit, mund të përdorni atributin sfond në etiketë .
< html >
< head >
< title >Titulli i faqes.
< body background = "http://сайт/images/mlmsecret.jpg" >Përshëndetje. Kjo është faqja ime e parë.
Ju mund të vini re se atributi sfondështë e barabartë me shtegun e skedarit që përdoret si sfond.
Për të ndryshuar shpejt sfondin ose ndonjë fotografi në faqe, thjesht specifikoni një shteg të ri për skedarin tuaj duke përdorur një redaktues teksti.
Për të gjetur rrugën e mëparshme, duhet të klikoni me të djathtën në foto në faqen me foton dhe të klikoni "Kopjo URL-në e imazhit". në këtë mënyrë do të shihni emrin e figurës/sfondit. Ju thjesht mund të zëvendësoni imazhin e vjetër me tuajin duke përdorur të njëjtin emër skedari.
Këto ishin bazat për vendosjen. sfond në html, tani më interesantja. 🙂
Shfletuesit modernë ju lejojnë të shtoni një numër arbitrar të imazheve të sfondit në një element, duke renditur parametrat e secilit sfond të ndarë me presje. Mjafton të përdorni veçorinë universale të sfondit dhe të specifikoni së pari një sfond për të dhe të dytën të ndarë me presje.
Si të zgjasni sfondin në gjerësinë e plotë të dritares?
Vetia e madhësisë së sfondit është menduar për shkallëzimin e sfondit, 100% është specifikuar si vlera e saj, atëherë sfondi do të zërë të gjithë gjerësinë e dritares së shfletuesit. Për shfletuesit më të vjetër, duhet të përdoren veçori specifike të prefiksuara, siç tregohet në shembullin 1.
Si të shtoni një imazh të sfondit në një faqe në internet?
Për të shtuar një imazh të sfondit në një faqe interneti, specifikoni shtegun drejt imazhit brenda vlerës së url-së së vetive të stilit të sfondit, e cila nga ana tjetër shtohet në përzgjedhësin e trupit.
A është e mundur të krijoni një sfond të animuar?
Animacioni është një teknikë mjaft e fuqishme që mund të sjellë në jetë çdo dokument, kështu që nuk është për t'u habitur që teknologjia Flash ka fituar një popullaritet të jashtëzakonshëm, e cila shton karikaturat në faqet e internetit, përveç atyre interaktive. Formati grafik GIF gjithashtu mbështet animacionin më të thjeshtë përmes ndryshimeve të njëpasnjëshme të kornizës. Pra, duke përdorur një imazh në këtë format, lejohet të animohen jo vetëm imazhe individuale, por edhe sfondi i një faqeje interneti ose një elementi specifik.
Së pari ju duhet të krijoni një fotografi të animuar në formatin GIF, për të cilën mund të përdorni Adobe Photoshop ose një program tjetër të përshtatshëm për këtë qëllim. Ekzistojnë gjithashtu biblioteka me skedarë të gatshëm të animuar që mund të përdoren si imazh sfondi. Më pas, imazhi shtohet si sfond duke përdorur veçorinë e stilit të sfondit, siç tregohet në shembullin 1.
Si të vendosni një imazh të sfondit në këndin e poshtëm djathtas të një faqeje?
Për të kontrolluar pozicionin e imazhit të sfondit në faqe, përdoret vetia e stilit të pozicionit të sfondit, ajo cakton njëkohësisht koordinatat horizontale dhe vertikale të figurës. Për të ndaluar përsëritjen e një imazhi të sfondit, përdorni veçorinë e pozicionit të sfondit me vlerën pa përsëritje.
Si ta bëni sfondin të mos përsëritet?
Si parazgjedhje, imazhi i sfondit përsëritet horizontalisht dhe vertikalisht, duke shtruar me pllaka të gjithë fushën e faqes së internetit. Megjithatë, kjo sjellje e sfondit nuk kërkohet gjithmonë, veçanërisht në rastin e një imazhi të vetëm, kështu që vlera e mospërsëritjes e shtuar në vetinë e stilit të sfondit vjen në ndihmë.
Si mund ta bëj që sfondi të përsëritet vetëm vertikalisht?
Përsëritja e sfondit zakonisht kërkohet për të krijuar linja dekorative ose gradientë të lidhur me lartësinë e një elementi ose dritareje në një faqe interneti. Në raste të tilla, përsëritja e sfondit vertikalisht siguron një pamje solide pavarësisht nga madhësia e elementeve. Vetëm në fillim duhet të kujdeseni që imazhi i sfondit të përsëritet pa nyje.
Ngjyra e sfondit është një element mjaft i rëndësishëm i çdo faqe interneti. Së pari, vendos disponimin e duhur dhe disponimin e përgjithshëm të faqes, dhe së dyti, lehtëson perceptimin e tekstit.
Ngjyra e sfondit të një faqe interneti vendoset duke përdorur atributin bgcolor të etiketës
.Shembulli 1: Ndryshimi i ngjyrës së sfondit
Ngjyra mund të specifikohet në vlerë heksadecimal ose me emrin e saj.
Megjithëse mund të specifikoni çdo ngjyrë për sfondin, shumica e sajteve përdorin një sfond kryesisht të bardhë dhe shkronja të zeza si opsionin më të vendosur.
foto sfondi
Si sfond, mund të përdorni çdo imazh të përshtatshëm për këtë. Sfondi nuk duhet të zvogëlojë tekstin, ai duhet të përzihet mirë me skemën e ngjyrave të faqes së internetit dhe të jetë i vogël në madhësi për t'u ngarkuar shpejt. Nëse, pas sa më sipër, ende dëshironi të shtoni një imazh të sfondit në faqe, duhet të përdorni atributin e sfondit të etiketës
.Shembulli 2: Shtimi i një imazhi të sfondit
Nëse imazhi është më i vogël se madhësia e ekranit të monitorit, ai do të riprodhohet horizontalisht dhe vertikalisht.
Meqenëse imazhi i sfondit ngarkohet më ngadalë se ngjyra e sfondit, mund të ndodhë që teksti të mos jetë i lexueshëm për një kohë derisa imazhet të ngarkohen. E njëjta gjë mund të ndodhë me imazhet e çaktivizuara në shfletues. Prandaj, rekomandohet të vendosni gjithmonë ngjyrën e sfondit së bashku me imazhin e sfondit (shembulli 3).
Shembulli 3: Përdorimi i një imazhi të sfondit dhe i ngjyrës së sfondit
sfond fiks
Si parazgjedhje, kur përdorni shiritin e lëvizjes, imazhi i sfondit lëviz me përmbajtjen e faqes së internetit. Internet Explorer ju lejon të rregulloni sfondin duke përdorur atributin bgproperties="fixed" të etiketës
.Shembulli 4 - Vendosja e një sfondi fiks
Duke specifikuar atributin bgproperties, siç tregohet në shembullin 4, imazhi i sfondit në faqen e internetit do të mbetet i palëvizshëm dhe teksti, grafika dhe elementët e tjerë do të lëvizin me shiritin e lëvizjes.
Për të krijuar një faqe, një çështje e rëndësishme është se si të krijoni një sfond në html. Kjo procedurë përfshin përdorimin e etiketave të caktuara - fjalë kodike dhe shkronja. Falë tyre, ju mund të vendosni një sfond tjetër, ta bëni atë monofonik - ta mbushni ose të vendosni ndonjë fotografi në vend të sfondit. Veprime të tilla do të jenë shumë të dobishme për të gjithë projektuesit e paraqitjes, dhe për ata që vendosin të "vishen" vetë faqen e tyre.
Krijimi i sfondit
Përpara se të bëni sfondin e faqes html, duhet të hapni kodin e faqes html në një redaktues teksti. Mos harroni se etiketat në faqe janë vendosur vertikalisht. Pastaj, midis etiketave
… , ju duhet të vendosni një etiketë- Këto etiketa janë të nevojshme për të qartësuar stilin e elementeve të kësaj faqeje interneti. Në vend të tre pikave, duhet të shkruani - body (sfondi:) . Ky është një cilësim që ju lejon të vendosni stile të ndryshme për sfondin e faqes. Mund ta kryeni funksionin e vendosjes së ngjyrave në dy mënyra. Së pari:Trupi (sfondi:#000000) - Sfondi i faqes tani duhet të jetë i zi.
Kjo metodë është gjithashtu e përshtatshme për vendosjen e ngjyrës dhe imazhit të sfondit. Është pas dy pikave që mund të vendosni ose një kod ngjyre ose një lidhje për një imazh. Ose mund të përdorni një metodë që nënkupton vetëm vendosjen e një ngjyre - një mbushje specifike për faqen. Pas dy pikave, duhet të regjistroni të ashtuquajturin parametër - ngjyra. Dhe pas saj, vendosni kodin e vetë ngjyrës. Kjo metodë është e mirë nëse përdoret si shabllon. Regjistrojeni atë dhe ruani atë, dhe kur është e nevojshme - vendosni ngjyrën, vendoseni në faqe.
Në vend të një sfondi të thjeshtë, mund të vendosni një foto. Nëse duhet të zbuloni: në html, si ta bëni një imazh një sfond, atëherë duhet të bëni operacione të ngjashme. Regjistro etiketat, vendos trupin (sfondi: lidhja me imazhin). Duhet mbajtur mend se vetë fotografia mund të jetë kudo. Dhe në një faqe interneti në internet, por është më mirë të krijoni një dosje në rrënjën e dokumentit. Në dosjen brenda së cilës do të ruhen të gjitha informacionet në lidhje me faqen e faqes, duhet të krijoni një tjetër - për fotografi. Operacioni do të duket si ky:
Tani fotografia që keni zgjedhur do të jetë sfondi i të gjithë faqes së faqes. Shpresojmë të kuptoni se si të krijoni një sfond në html. Thjesht provoni dhe patjetër do të keni sukses!
Shumë stilistë rishtar të paraqitjes, të cilët thjesht po gërmojnë në thelbin e krijimit të faqeve, shpesh pyesin veten se si të bëjnë një imazh të sfondit në html. Dhe nëse disa njerëz mund ta kuptojnë këtë detyrë, atëherë ka ende probleme gjatë shtrirjes së imazhit në gjerësinë e plotë të monitorit. Në të njëjtën kohë, do të doja që faqja të shfaqet në të njëjtën mënyrë në të gjithë shfletuesit, kështu që duhet të plotësohet kërkesa për pajtueshmërinë e ndërshfletuesve. Ju mund ta vendosni sfondin në dy mënyra: duke përdorur dhe stilimin e CSS. Secili zgjedh opsionin më të mirë për veten e tij. Sigurisht, stili CSS është shumë më i përshtatshëm, sepse kodi i tij ruhet në një skedar të veçantë dhe nuk merr kolona shtesë në etiketat kryesore të faqes, por së pari, le të shohim një metodë të thjeshtë për vendosjen e një imazhi në sfondin e faqes.
Etiketat bazë HTML për krijimin e një sfondi
Pra, le të kalojmë te çështja, sfondi në html është me ekran të plotë. Në mënyrë që faqja të duket e bukur, duhet të kuptoni një detaj mjaft të rëndësishëm: mjafton vetëm të bëni një sfond gradient ose ta pikturoni atë me një ngjyrë të fortë, por nëse keni nevojë të futni një foto në sfond, nuk do shtrihet në të gjithë gjerësinë e monitorit. Fillimisht, duhet të zgjidhni një imazh ose të bëni vetë një dizajn me një shtrirje të tillë në të cilën do të shfaqni faqen e faqes. Vetëm pasi imazhi i sfondit të jetë gati, ne e transferojmë atë në një dosje të quajtur "Images". Në të do të ruajmë të gjitha fotografitë, animacionet dhe skedarët e tjerë grafikë të përdorur. Kjo dosje duhet të jetë në direktoriumin rrënjë me të gjithë skedarët tuaj html. Tani mund të kalojmë te kodi. Ka disa opsione për të shkruar kodin që do të ndryshojë sfondin në një imazh.
- Shkruani etiketën e atributeve.
- Përmes stilit CSS në kodin HTML.
- Shkruani stilin CSS në një skedar të veçantë.
Varet nga ju që të vendosni se si ta bëni sfondin një fotografi në HTML, por unë do të doja të them disa fjalë se si do të ishte më optimale. Metoda e parë, duke shkruar përmes një atributi tag, është zhvlerësuar prej kohësh. Opsioni i dytë përdoret në raste shumë të rralla, vetëm sepse ka shumë të njëjtin kod. Dhe opsioni i tretë është më i zakonshmi dhe efektiv. Këtu janë shembuj të etiketave HTML:
- Mënyra e parë për të shkruar është përmes atributit tag (trupi) në skedarin index.htm. Shkruhet kështu: (sfondi i trupit= "Emri_dosjes/Emri_imazhi.extension")(/body). Kjo do të thotë, nëse kemi një fotografi me emrin "Picture" dhe shtesën JPG, dhe e kemi emërtuar dosjen si "Images", atëherë hyrja e kodit HTML do të duket kështu: (body background="Images/Picture.jpg" )… (/trupi) .
- Metoda e dytë e shkrimit ndikon në stilin CSS, por shkruhet në të njëjtin skedar të quajtur index.htm. (body style="background: url("../Images/Picture.jpg")").
- Dhe metoda e tretë e regjistrimit bëhet në dy skedarë. Në një dokument të quajtur index.htm, rreshti i mëposhtëm është shkruar në: (head)(link rel="stylesheet" type="text/css" href="Path_to CSS_file")(/head). Dhe në skedarin e stilit të quajtur style.css ne tashmë shkruajmë: body (background: url (Images/Picture.jpg")).
Si ta bëjmë sfondin një fotografi në HTML, ne kemi çmontuar. Tani duhet të kuptoni se si ta shtrini imazhin në të gjithë ekranin.
Mënyrat për të shtrirë imazhin e sfondit në gjerësinë e dritares
Le të paraqesim ekranin tonë si përqindje. Rezulton se e gjithë gjerësia dhe gjatësia e ekranit do të jetë 100% x 100%. Ne duhet ta shtrijmë imazhin në këtë gjerësi. Le të shtojmë një rresht në hyrjen e imazhit në skedarin style.css, i cili do ta shtrijë imazhin në gjerësinë dhe gjatësinë e plotë të monitorit. Si shkruhet kjo në stilin CSS? Gjithçka është e thjeshtë!
sfond: url (Images/Picture.jpg")
madhësia e sfondit: 100% /* kjo hyrje do të funksionojë për shumicën e shfletuesve modern */
Pra, ne kuptuam se si të bëjmë një imazh në sfond në html në ekran të plotë. Ekziston një mënyrë tjetër për të shkruar në skedarin index.htm. Edhe pse kjo metodë është e vjetëruar, është e nevojshme që fillestarët ta dinë dhe ta kuptojnë atë. Në etiketën (head)(style) div ( background-size: cover; ) (/style) (/head), kjo hyrje do të thotë që ne zgjedhim një bllok të veçantë për sfondin, i cili do të pozicionohet në të gjithë gjerësinë e dritare. Ne shikuam 2 mënyra për ta bërë sfondin e faqes një imazh html në mënyrë që imazhi të shtrihet në gjerësinë e plotë të ekranit në cilindo nga shfletuesit modernë.
Si të bëni një sfond fiks
Nëse vendosni të përdorni një imazh si sfond të një burimi të ardhshëm në internet, atëherë thjesht duhet të zbuloni se si ta bëni atë të palëvizshëm në mënyrë që të mos shtrihet në gjatësi dhe të prishë pamjen estetike. Mjafton vetëm të përshkruani këtë shtesë të vogël me ndihmë. Duhet të shtoni një frazë në skedarin style.css pas sfondit: url(Images/Picture.jpg") fikse; ose në vend të kësaj të shtoni një rresht të veçantë pas pikëpresjes - pozicioni: fiks. Kështu, imazhi juaj i sfondit do të rregullohet. Gjatë duke lëvizur nëpër përmbajtjen e faqes, do të shihni se linjat e tekstit lëvizin, por sfondi mbetet në vend. Kështu që ju mësuat se si ta bëni sfondin një imazh në html, në disa mënyra.
Puna me një tabelë në HTML
Shumë zhvillues të papërvojë të uebit, kur përballen me tabela dhe blloqe, shpesh nuk e kuptojnë se si ta bëjnë një imazh sfondin e një tabele në html. Si çdo gjë dhe stili CSS, kjo gjuhë programimi në internet është mjaft e thjeshtë. Dhe zgjidhja për këtë problem do të jetë shkrimi i disa rreshtave të kodit. Duhet ta dini tashmë se shkrimi i rreshtave dhe kolonave të tabelës shënohet me etiketat (tr) dhe (td), përkatësisht. Për ta bërë sfondin e tabelës të duket si një imazh, shtoni një frazë të thjeshtë në etiketën (tabela), (tr) ose (td) me një lidhje me imazhin: sfond = URL e imazhit. Për qartësi, ne japim disa shembuj.
Tabelat me një fotografi në vend të një sfondi: shembuj HTML
Le të vizatojmë një tabelë 2x3 dhe ta bëjmë atë sfondin e imazhit të ruajtur në dosjen "Images": (sfondi i tabelës = "Images/Picture.jpg") (tr) (td)1(/td) (td)2(/ td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/tabela) . Kështu që tabela jonë do të pikturohet në sfondin e figurës.
Tani le të vizatojmë të njëjtën tabelë me dimensione 2x3, por futim figurën në kolonat me numër 1, 4, 5 dhe 6. (tabela)(tr)(td sfond = “Images/Picture.jpg”)1(/td) (td )2 (/td) (td)3(/td)(/tr) (tr)(td sfond = “Images/Picture.jpg”)4(/td) (td sfond = “Images/Picture.jpg”) 5( /td) (td sfond = "Imazhe/Picture.jpg")6 (/td) (/tr) (/tabela). Pas shikimit, shohim që sfondi shfaqet vetëm në ato qeliza në të cilat jemi regjistruar, dhe jo në të gjithë tabelën.
Faqja e ndër-shfletuesve
Ekziston gjithashtu një gjë e tillë si burimi i uebit i ndër-shfletuesit. Kjo do të thotë që faqet e sajtit do të shfaqen në mënyrë të barabartë në lloje dhe versione të ndryshme të shfletuesve. Në këtë rast, ju duhet të personalizoni kodin HTML dhe stilin CSS për shfletuesit e nevojshëm. Për më tepër, në epokën moderne të zhvillimit të smartfonëve, shumë zhvillues të uebit po përpiqen të krijojnë faqe që janë përshtatur si për versionet celulare ashtu edhe për një pamje kompjuterike.
