Teksti i parë

Teksti i dytë

Në këtë postim do t'ju tregoj, si zakonisht vendosni sfondin e sajtit 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 të djathtë 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.

Përshëndetje! Shërbëtori juaj i përulur është në kontakt me ju me një pjesë të materialit të dobishëm dhe praktik se si të vendosni një sfond për një sajt. Ky është fillimi në paraqitjen html, dhe këtu unë do të demonstroj qartë me një shembull se si mund të krijoni një sfond të bukur për një faqe që patjetër do të tërheqë përdoruesin e Internetit dhe do të shtojë origjinalitet.

Nëse e keni vënë re, shumica e bizneseve të internetit përdorin një sfond unik në faqet e tyre të shitjeve dhe regjistrimit. Sot do të analizojmë komponentin teknik të këtij procesi.

Pra, për fillim, na duhet, natyrisht, një fotografi. Ekziston një faqe shumë e mirë në internetin e huaj ku mund të shkarkoni të ndryshme fotot e sfondit të faqes në internet. Ka vetëm një numër të madh të tyre. Faqja quhet Modele Delikate.

Ai shfaqet në listën e motorëve të kërkimit Google në radhë të parë, kështu që unë e rekomandoj atë në punën time. Ju gjithashtu mund të gjeni një numër të madh faqesh të tjera nëse shkruani në motorin e kërkimit fraza të tilla si "modelet e imazhit të sfondit", "shkarkoni imazhin e sfondit për sajtin" etj.

Kush nuk ka probleme me anglishten, atëherë do ta kuptoni pa vështirësi.

Në këtë artikull, unë kam zgjedhur një temë dhe quhet tweed. Mund ta shkarkoni.

Ja se si duket në një version të vogël në faqe

Së pari, krijoni një dokument të ri në program

Dhe sigurohuni që ta ruani nën një emër përpara se ta redaktoni, për shembull index.html dhe krijoni një dosje në kompjuterin tuaj, për shembull, mund të krijoni një dosje “My site” dhe të vendosni skedarin tonë të indeksit (index.html) në të. Është më mirë të krijoni një dosje në anglisht në mënyrë që shfletuesi të mos ngatërrohet dhe shfaq gabimisht faqen.

Përveç kësaj, në dosjen kryesore "faqja ime" ju duhet të krijoni dy nënfoldera të tjerë, në një do të vendosim të gjitha fotot tona dhe do të quhet "imazhe", dhe tjetra do t'i japim emrin "CSS" (stili kaskadë fletë) dhe vendoseni skedarin aty stil.css

Tani mund të punojmë në dokumentin tonë. Hapi tjetër që duhet të fusim është një kod html bosh, i ashtuquajturi korniza kryesore nga e cila fillon gjithçka. Mund ta shkarkoni direkt. Më pas, kopjoni gjithçka nga ky skedar dhe transferojeni në skedarin tonë të programit. Rezultati përfundimtar duhet të jetë diçka si më poshtë

Pranë emrit të skedarit do të vini re një disketë të kuqe. Pra, nëse është e kuqe, atëherë skedari nuk ruhet, sigurohuni që të klikoni në butonin e ruajtjes në mënyrë që disketa të bëhet blu.

Në etiketën e titullit, mund të ndryshoni emrin e dokumentit, për shembull, mund të bëni "Uebfaqja ime e parë". Dhe sigurohuni që faqja juaj të ruhet në kodim UTF-8

Përndryshe, nëse ka një kodim tjetër, për shembull windows-1251, atëherë teksti i dokumentit në shfletues do të shfaqet në hieroglife. Mund ta ndryshoni kodimin në seksionin "Encodings - Encode in Utf-8 (pa BOM)" në shiritin e veglave të programit.

Dhe mos harroni të ruani çdo veprim tonë.

Tani le të fillojmë krijimin e sfondit në dokumentin tonë. Më duhet të them menjëherë se të gjitha veprimet tona në hartimin e faqes në internet do të zhvillohen duke përdorur fletë stili kaskadë të quajtur CSS, domethënë, ne do ta bëjmë kornizën në html dhe do ta sjellim atë në një stil dhe pamje të bukur duke përdorur CSS .

Kështu, ju do të mësoheni me rendin e saktë të veprimeve. Nuk është e nevojshme të merreni me stilet drejtpërdrejt në dokumentin html, është më mirë t'i hiqni ato në një dokument të veçantë.

Për ta bërë këtë, në programin tonë Notepad ++, ne do të krijojmë një skedar tjetër dhe do ta quajmë Style.css dhe do ta ruajmë në një dosje të re css, e cila do të gjendet në dosjen e përbashkët "My site".

Mirë! Në mënyrë që shfletuesi ynë të shfaqë faqen në mënyrë korrekte, duhet të përfshijmë një fletë stili në dokumentin tonë html. Ja si bëhet

Shkruani drejtpërdrejt të gjithë rreshtin e mësipërm. Me këtë linjë ne përfshijmë fletën tonë të stilit.
Tani do të përcaktojmë një imazh të sfondit për etiketën e trupit tonë përmes një fletë stili. Për ta bërë këtë, ne krijojmë strukturën e mëposhtme në dokumentin style.css (ju gjithashtu e merrni atë drejtpërdrejt dhe e shkruani në kodin e programit)

Këtu do të shpjegoj pak. Atributi i sfondit ka shumë vlera, njëra prej të cilave është përsëritja e sfondit, e cila është përgjegjëse për shtrirjen e imazhit tonë të sfondit për një dokument ueb.

Sfondi-Përsëriteni:

PËRSËRITJE //(përsërite horizontalisht dhe vertikalisht) PËRSËRITJE-X // (vetëm shtrirje horizontalisht) PËRSËRITJE-Y //(Vetëm shtrirje vertikalisht) JO-PERSËRITJE //(mos e përsërit imazhin e sfondit)

Në rastin tonë, ne përsërisim foton tonë të vogël si vertikalisht ashtu edhe horizontalisht. Si rezultat, e gjithë faqja është e mbushur me imazhin tonë. Ja se si duket në shfletues:

Gjithashtu, veçanërisht për ju, bëra një përzgjedhje të sajteve ku mund të shkarkoni një sfond të bukur për sitin

Vlad Merzheviç

Për shkak të veçorive të faqeve në internet, imazhet e sfondit marrin një rol të rëndësishëm në paraqitjen e dokumenteve të faqes. Në të njëjtën kohë, ata janë të përfshirë në mënyrë aktive në një sërë aktivitetesh, të tilla si automatizimi i procesit të bashkëngjitjes së imazheve në tekst, krijimi i tranzicioneve të gradientit dhe, natyrisht, shtimi i një sfondi nën përmbajtje. Më poshtë janë disa aspekte të përdorimit të imazheve të sfondit.

Sfondi në një faqe interneti

Vendosja e imazhit të sfondit në një faqe interneti bëhet tradicionalisht përmes atributit të sfondit të etiketës . Një model i tillë përsëritet horizontalisht dhe vertikalisht, duke mbushur të gjithë dritaren e shfletuesit në këtë mënyrë. Është e qartë se këtu nuk ka opsione të veçanta për kreativitet, kështu që le të kthehemi te stilet dhe të shohim se çfarë mund të bëjmë me CSS.

Ekzistojnë pesë atribute në CSS që kontrollojnë një imazh të sfondit: futja, pozicioni dhe përsëritja e tij. Megjithatë, të gjithë këta parametra zëvendësohen nga një sfond universal i pronës, dhe ne do ta përdorim atë në të ardhmen.

Shtimi i një imazhi të sfondit

Shtimi i një fotografie bëhet duke vendosur adresën e figurës përmes fjalës kyçe url. Argumentet pa përsëritje (pa përsëritje), përsëritje-x (përsëritje horizontale) dhe përsëritje-y (përsëritje vertikale) përdoren për të kontrolluar se si imazhi përsëritet. Kjo rezulton në faqen e internetit të paraqitur në Fig. një.

Për të vendosur një imazh në një faqe interneti, shtoni veçorinë e stilit të sfondit në përzgjedhësin BODY, siç tregohet në shembullin 1.

Shembull 1. Imazhi i sfondit

Në këtë shembull, target.gif grafik përcaktohet si sfondi i faqes së internetit pa përsëritur imazhin. Për të parandaluar që imazhi të jetë i rehatshëm në skajet e shfletuesit, ai zhvendoset 30 pikselë djathtas dhe 20 pikselë poshtë nga pozicioni i tij origjinal.

përsëritja e modelit

Me aftësinë për të vendosur imazhin e sfondit të përsëritet horizontalisht ose vertikalisht, disa opsione të dizajnit të faqeve të internetit janë të disponueshme. Për shembull, për të krijuar një shirit vertikal përgjatë skajit të majtë (Fig. 2), ju nevojitet imazhi i paraqitur në Fig. 3.

Vizatimi duhet të jetë i tillë që të përshtatet vertikalisht pa shtresa të dukshme, dhe gjithashtu të formojë një tërësi të vetme me ngjyrën e specifikuar të sfondit të faqes së internetit. Shembulli 2 tregon se si të krijohet një imazh i tillë i sfondit, duke përdorur përsëri veçorinë e sfondit dhe vlerën e tij repeat-y .

Shembulli 2: Përsëriteni sfondin vertikalisht

Në mënyrë të ngjashme, ju mund të përsërisni sfondin horizontalisht, për shembull, duke krijuar një gradient dhe duke e vendosur atë si një imazh të sfondit (Fig. 4).

Për të marrë faqen e internetit të paraqitur në Fig. 4, së pari do t'ju duhet të bëni një fotografi me një tranzicion gradient. Gjerësia është e mjaftueshme për të specifikuar 20-40 piksele, dhe lartësia e figurës varet nga qëllimi i dokumentit dhe lartësia e synuar e përmbajtjes së faqes në internet. Gjithashtu, mos harroni se një vizatim i madh do të çojë në një rritje të madhësisë së skedarit grafik. Dhe kjo do të ndikojë negativisht në shpejtësinë e ngarkimit të tij dhe, në fund të fundit, do të ngadalësojë shfaqjen e sfondit. Për këtë rast, një fotografi me përmasa 30x200 piksele ishte mjaft e përshtatshme (Fig. 5).

Shembulli 3 tregon kodin HTML për krijimin e një sfondi gradient.

Shembulli 3: Përsëritja e sfondit horizontalisht

Modeli i gradientit funksionon mirë me bllokun me ngjyra të forta, kështu që ky shembull shton një shtresë për të shfaqur përmbajtjen e faqes së internetit.

Shtimi i një fotografie në tekst

Me një imazh të sfondit, ju mund të automatizoni procesin e shtimit të fotografive në tekst të caktuar, siç janë titujt. Për ta bërë këtë, përdorni veçorinë universale të sfondit, e cila zbatohet në përzgjedhësin e dëshiruar. Si vlerë, specifikoni shtegun drejt figurës dhe, në mënyrë që të mos përsëritet, argumentin pa përsëritje (shembulli 4).

Shembulli 4: Shtimi i një fotografie

kokë

Teksti kryesor

Siç tregohet në këtë shembull, fotografia mund të zhvendoset horizontalisht dhe vertikalisht nga pozicioni i saj origjinal, si parazgjedhje ky është këndi i sipërm i majtë i elementit të bllokut. Zhvendosja e sfondit ju lejon të vendosni imazhin në lidhje me tekstin në mënyrën e dëshiruar. Për të parandaluar që teksti të mbivendoset në figurë, sigurohuni që të shtoni veçorinë padding-left, për shkak të së cilës teksti zhvendoset djathtas me distancën e specifikuar. Ai është individual në secilin rast dhe zakonisht është i barabartë me gjerësinë e figurës plus hapësirën e dëshiruar midis imazhit dhe tekstit.