17.10.2015

Ende jo

Përshëndetje!
Ne vazhdojmë të mësojmë bazat e HTML.
Në këtë mësim do të tregoj dhe tregoj me shembuj si të bëni sfond nga një ngjyrë ose imazh në një faqe HTML.
Gjithçka është shumë e thjeshtë!
Le të fillojmë me ngjyra!
Mendoj se nuk ju ka munguar ku fola për mënyrën e ndryshimit të ngjyrës së tekstit dhe në fund të artikullit ju dhashë kode për ngjyra dhe nuanca të ndryshme. Pse ju kujtova këtë mësim? Po, sepse ka një tabelë me kode ngjyrash të gatshme, merrni ato dhe praktikoni menjëherë në këtë mësim.
Pra, si të bëni një sfond me ngjyra në HTML...

Sfondi me ngjyra në HTML

Ngjyra e sfondit në një dokument HTML është e bardhë si parazgjedhje. Si të vendosni ngjyrën sipas dëshirës?
Për këtë do të na ndihmojë atributi "bgcolor". Për të pikturuar mbi sfond, shkruani këtë atribut në etiketën "trup":

Ose si kjo:

Këtu është kodi i plotë HTML:

Teksti i faqes do të jetë i gjelbër dhe sfondi i zi.

Rezultati do të jetë si ky:

Nëse dëshironi të krijoni një sfond nga një foto, atëherë shtoni atributin "background" në etiketën "trupi":

Plotësoni çdo foto ku ndodhet faqja juaj e internetit (për shembull, faqja ime ka emrin "fon" me shtesën ".gif"):

Këtu është kodi i plotë HTML:

Rezultati do të jetë si ky:

Nëse imazhi i sfondit ndodhet në dosjen e imazheve ose në ndonjë dosje tjetër, do të duket kështu:

Këtu është kodi i plotë HTML:

Teksti i faqes në një sfond të bukur.

Kaq për sot! Unë mendoj se mësimi nuk ishte i vështirë dhe ju kuptove gjithçka. Nëse keni ndonjë pyetje, shkruani në komente.
Mezi pres t'ju shoh në mësimet e ardhshme.

Postimi i mëparshëm
Postimi i radhës

Nga autori: Mirësevini në webformyself dhe sot dua t'ju tregoj se si të ndryshoni sfondin e faqes. Ngjyra e sfondit ose imazhi në sfond mund të luajë një rol të madh në ndjesinë e një faqeje, kështu që ju duhet të dini se si ta vendosni atë.

Si të ndryshoni sfondin në wordpress

Përsëri, nëse keni një motor wordpress, atëherë ndryshimi i sfondit të përgjithshëm të faqes nuk është i vështirë. Thjesht duhet të klikoni butonin "Personalizoni" në skedën "Dukja". Këtu ju duhet të zgjidhni "Ngjyrat". Në varësi të shabllonit të zgjedhur, mund të jetë e mundur të zgjidhni ngjyrat për elementë të ndryshëm. Por ju mund të zgjidhni ngjyrën e faqes në çdo rast - një panel i përshtatshëm me ngjyra do të hapet para jush.

Numri i cilësimeve këtu varet nga modeli që keni. Në çdo rast, patjetër duhet të jetë e mundur të vendosni ngjyrën për të gjithë faqen, në shabllone të ndryshëm mund të vendosni gjithashtu sfondin dhe ngjyrën për titujt, lidhjet, etj.

Në fakt, kjo është gjithçka që duhet të dini. Nëse keni nevojë të shkarkoni saktësisht imazhin e sfondit, zgjidhni artikullin e duhur dhe gjeni skedarin e dëshiruar në kompjuterin tuaj.

JavaScript. Fillimi i shpejtë

Në një mënyrë të mirë, fotografia nuk duhet të jetë shumë e rëndë, sepse do të godasë shumë shpejt shpejtësinë e ngarkimit të faqes. Është ideale të përdorni të ashtuquajturat imazhe të sfondit pa probleme që përsëriten horizontalisht dhe vertikalisht dhe kështu mbushin të gjithë hapësirën.

Pas ngarkimit të imazhit, do t'ju paraqiten disa opsione të dobishme për personalizim. E bukura e wordpress-it është se ju shikoni ndryshimet menjëherë, në varësi të cilësimeve që zgjidhni.

Së pari, do t'ju kërkohet të zgjidhni një metodë të përsëritjes. Ka tashmë 4 opsione: përsërisni vetëm horizontalisht, vetëm vertikalisht, në të dy anët dhe mos përsërisni. Në varësi të imazhit që po përdorni, duhet të bëni një zgjedhje.

Përsëritja mund të kursejë ndjeshëm madhësinë e imazhit kur është e vogël dhe mund të përsëritet, në mënyrë që kalimet e mprehta midis përsëritjeve të mos jenë të dukshme. Në këtë mënyrë ju mund të kurseni dhjetëra kilobajt në krahasim me metodën në të cilën ngarkohet një imazh i madh i plotë.

Pozicioni. Nuk ka asgjë për të shpjeguar këtu, thjesht shikoni se si ndryshon pamja e faqes me pozicione të ndryshme të sfondit. Zgjidhni opsionin që ju pëlqen më shumë.

Lidhja. Ky është një cilësim shumë interesant, ju lejon të zgjidhni nëse do të lëvizni imazhin e sfondit së bashku me përmbajtjen ose ta ngrini atë në një vend. Personalisht, gjithmonë më pëlqen të zgjedh opsionin fiks, sepse vetëm blloqet e përmbajtjes lëvizin kur lëvizni poshtë.

Për shembull, nëse keni një lartësi imazhi të sfondit prej 1000 pikselësh, nuk e përsëritni dhe nuk e rregulloni, atëherë kur të lëvizni poshtë, ai thjesht do të zhduket nga pamja. Rregullimi i sfondit lejon që fotografia të mbetet gjithmonë në pamje. Ndonjëherë kjo është një zgjidhje shumë efektive.

JavaScript. Fillimi i shpejtë

Mësoni bazat e JavaScript me një shembull praktik të ndërtimit të një aplikacioni ueb

Në fakt, kjo është e gjitha për ndryshimin e sfondit në wordpress. Siç mund ta shihni, gjithçka është aq e thjeshtë sa të jetë e mundur.

Si të ndryshoni sfondin e faqes në html

Epo, ne kemi analizuar një version thjesht vizual, në të cilin nuk keni nevojë të futeni në kod dhe të shkruani diçka atje. Tani le të kuptojmë se si të ndryshojmë ende sfondin përmes html dhe css. Cilat janë përfitimet? Ju mund të vendosni imazhe të sfondit jo vetëm për sitin në përgjithësi, por edhe për secilin element veç e veç. Për shembull, për disa miniaplikacione, meny, kokë, etj. Kjo jep shumë më tepër mundësi në hartimin e faqes dhe ndryshimin e dizajnit të saj.

Për të hyrë në të gjithë këtë stil, duhet të gjeni fletën kryesore të stilit të shabllonit tuaj. Zakonisht ndodhet në rrënjë, ose në dosjen css dhe quhet style.css ose main.css.

Në të do të shihni kodin që dizajnon elementët e ndryshëm të faqes tuaj. Nëse dëshironi të vendosni sfondin globalisht, kjo mund të bëhet duke i caktuar një sfond përzgjedhësit të trupit, domethënë trupit të faqes.

Si është vendosur sfondi?

Mbani mend - pronën e sfondit. Sot është më mirë të përdorni versionin e shkurtuar të kësaj prone. Për shembull:

trupi (sfondi: #cccc url(bg.png) pa përsëritje 50% 50% fikse; )

trupi ( sfond: #cccc url(bg.png) pa përsëritje 50% 50% fikse;

Çfarë do të thotë e gjithë kjo? Parametri i parë është zakonisht një ngjyrë e fortë. Le të themi se kemi vendosur gri. Ngjyra mund të hiqet nëse specifikohet një imazh i sfondit. Siç mund ta shihni, imazhi specifikohet duke përdorur konstruktin url (rruga drejt skedarit). Prandaj, duhet të shkruani saktë shtegun drejt skedarit dhe sigurohuni që të specifikoni shtrirjen e tij.

Të gjithë parametrat që kam shkruar më pas janë opsionale dhe janë fakultative. Pra, unë specifikova që imazhi i sfondit të mos përsëritet, të pozicionohet në qendër si horizontalisht ashtu edhe vertikalisht, dhe gjithashtu të fiksohet në një vend në mënyrë që të mos zhduket kur lëvizni.

Siç mund ta shihni, këtu janë të gjithë të njëjtët parametra që keni vendosur vizualisht, por këtu ato regjistrohen si vlerat e pronës së sfondit.

Në këtë shembull, unë përdora shënimin e shkurtuar të pronës, është thjesht më i përshtatshëm, por në fakt, çdo parametër individual ka veçorinë e vet: sfondi-ngjyra për ngjyrën, sfondi-imazhi për imazhin, pozicioni i sfondit për vendosjen e pozicionit .

Sigurisht, për t'u bërë i rrjedhshëm në këto veti, ju këshilloj që fillimisht të ndiqni kursin tonë dhe nëse dëshironi të bëheni një përdorues i avancuar në lidhje me gjuhën css, atëherë . Aty do të mësoni se si të vendosni disa sfonde në të njëjtën kohë, të rregulloni përsëritjen e tyre, të përdorni gradientët, etj. Informacioni është shumë interesant dhe i dobishëm për ndërtuesit e faqeve.

Epo, ju thashë për bazat e punës me sfond. Regjistrohu në portalin tonë për të marrë lajme dhe për të mësuar më shumë rreth ndërtimit të faqes.

JavaScript. Fillimi i shpejtë

Mësoni bazat e JavaScript me një shembull praktik të ndërtimit të një aplikacioni ueb

61,5 mijë

Çdo dhomë do të duket shumë më mirë me një qilim të shtrenjtë persian në dysheme. Pra, çfarë nuk shkon me faqen tuaj? Ndoshta ka ardhur koha për të “mbuluar” dyshemenë e saj me një tapet të shtrenjtë elegant të punuar me dorë. Le të hedhim një vështrim më të afërt se si të krijojmë një sfond për sitin:

Sfondi për sitin

Ndodh që dizajni i vjetër i faqes është tashmë i mërzitshëm. Dhe unë dua diçka të re dhe të shijshme. Dhe dizajni i ri do të jetë i tillë nëse e gatuani vetë.

Por ndryshimi i të gjithë modelit të burimit është një gjë e pafalshme. Dhe jo të gjithë i kanë "mprehur" duart siç duhet për këtë biznes. Prandaj, është më e lehtë të rifreskoni një shabllon të vjetër duke ndryshuar ngjyrën e sfondit ose imazhin e sfondit të burimit.

Ka disa mënyra për të ndryshuar sfondin në një faqe interneti. Për këtë përdoren mundësitë e CSS ose html. Por shumë nga vetitë e sfondit kanë të njëjtin emër dhe përdorim në këto teknologji në internet.

Bazat e sfondit HTML

Disa elementë mund të përdoren si sfond:

• Ngjyrë;
• imazhi i sfondit;
• Imazhi i teksturës.

Le të shohim përdorimin e secilit prej tyre në më shumë detaje.

Për të vendosur ngjyrën e sfondit për një sajt, përdorni veçorinë e ngjyrës së sfondit të atributit stil. Kjo do të thotë, për të vendosur ngjyrën kryesore për një faqe në internet, duhet ta regjistroni atë brenda etiketës . Për shembull:

Sfondi i faqes së internetit #55D52B

Përveç kodit heksadecimal të ngjyrave, mbështetet një fjalë kyçe ose një vlerë RGB. Shembuj:

Sfondi i faqes së internetit rgb (23,113,44)

Sfondi i gjelbër i faqes në internet

Vendosja e ngjyrës së sfondit duke përdorur fjalë kyçe ka një sërë kufizimesh në krahasim me dy metodat e tjera.

Në html, mbështeten vetëm 16 fjalë kyçe me ngjyra. Këtu janë disa prej tyre: e bardhë, e kuqe, blu, e zezë, e verdhë dhe të tjerët.

Prandaj, për të vendosur sfondin për një sajt html, është më mirë të përdorni hex ose RGB.

Përveç përzgjedhjes së ngjyrave, janë të disponueshme opsione të tjera personalizimi. Vendosja e vetive të ngjyrës së sfondit në transparente e bën sfondin e faqes transparente. Kjo vlerë i është caktuar kësaj vetie si parazgjedhje.

Tani le të shohim mundësitë e gjuhës së hipertekstit për vendosjen e imazhit të sfondit për sitin. Kjo mund të bëhet me veçorinë background-image.

Siç mund ta shihni nga kodi, imazhi lidhet përmes shtegut të url-së të dhënë në kllapa. Por jo të gjitha fotografitë rezultojnë të jenë aq të mëdha sa të mbushin të gjithë zonën e ekranit me madhësinë e tyre. Le të shohim se si do të shfaqet imazhi më i vogël.

Le të supozojmë se po zhvillojmë një faqe për poezinë dhe duam të përdorim një imazh të Pegasus si sfond. Kali me krahë do të personifikojë lirinë e mendimit krijues të poetit!

Ne duam që imazhi të shfaqet një herë në mes të ekranit. Por, për fat të keq, shfletuesi nuk i kupton dëshirat tona të larta. Dhe shfaq një imazh më të vogël për sfondin e sajtit aq herë sa mund të përshtatet zona e ekranit:

Ndoshta, katër kuaj të buzëqeshur me krahë do të jenë shumë për poetët për frymëzim. Prandaj, ne ndalojmë klonimin e Pegasusit tonë. Këtë e bëjmë me vetinë e përsëritjes së sfondit. Vlerat e mundshme:

• përsëritje-x - përsërit imazhin e sfondit horizontalisht;
• përsëritje-y - vertikalisht;
• përsëris - në të dy akset;
• pa përsëritje - përsëritja është e ndaluar.

Ndër këto opsione, ne jemi të interesuar për të fundit. Para se të ndryshojmë sfondin e faqes, ne e përdorim atë në kodin tonë:

Por, sigurisht, është më mirë nëse fletushka jonë ndodhet në mes të ekranit. Vetia background-position është vetëm për pozicionimin e imazhit të sfondit në faqe. Ju mund të vendosni koordinatat e vendndodhjes në disa mënyra:

• fjale kyçe ( lart, poshtë, qendër, majtas, djathtas);
• Përqindja - numërimi mbrapsht fillon nga këndi i sipërm i majtë;
• Në njësi matëse (pikselë).

Le të përdorim opsionin më të thjeshtë për përqendrim:

Ndodh që ju duhet të rregulloni pozicionin e figurës kur lëvizni. Prandaj, përpara se të bëni një imazh në sfondin e sajtit, përdorni veçorinë speciale të sfondit-bashkëngjitje . Vlerat që pranon janë:

• rrotulloni;


• fikse.

Na duhet vlera e fundit. Tani kodi ynë i shembullit do të duket si ky:

Sfondi i teksturës së faqes në internet

Në shembullin e parë, ne përdorëm një peizazh të madh dhe të bukur shkretëtirë për sfond. Por për një bukuri të tillë ju duhet të paguani plotësisht. Pesha e një imazhi me cilësi të lartë mund të arrijë disa megabajt.

Ditë të mbarë për të gjithë ata që duan të mësojnë dhe të mësojnë diçka të re! A i keni kushtuar ndonjëherë vëmendje pamjes, gjatë zhvillimit të së cilës krijuesit ishin shumë dembelë për të dekoruar sfondin e faqeve? Dhe u ktheva. Kjo duket keq. Shpesh, për shkak të mungesës së ndarjeve midis llojeve të ndryshme të informacionit me të cilat jemi mësuar, ai ngatërrohet dhe thjesht nuk ka dëshirë për të parë më tej një burim të tillë ueb.

Në mënyrë që një fatkeqësi e tillë të mos më ndodhë, vendosa të shkruaj një artikull me temën: "Si të bëjmë një sfond faqeje në html". Pas leximit të publikimit, do të mësoni se çfarë mjetesh mund të përdorni për të vendosur dizajnin e sfondit, si ta rregulloni ose ndryshoni sfondin dhe shumë më tepër që do t'ju ndihmojnë ta bëni faqen tuaj tërheqëse. Dhe tani le të fillojmë!

Mjetet bazë për vendosjen e sfondit të faqeve të internetit

Për të vendosur një imazh të sfondit, dizajnerët e gjuhës së uebit dhanë atributin e sfondit. Është i disponueshëm si në , ashtu edhe në css.

Në gjuhën e shënjimit, ky është një atribut i etiketës së trupit, dhe në fletët e stileve, është një veti universale që ju lejon të vendosni deri në 5 karakteristika të sfondit në të njëjtën kohë. Sfondi është një element mjaft fleksibël që mund të përdoret për të vendosur sfondin në formën e një ngjyre të vetme, një imazhi me ngjyrë apo edhe të një animacioni.

Pra, për të vendosur imazhin e sfondit përmes njësisë html thjesht shkruani këtë kod: ... dhe në vend të fjalëve "adresa e skedarit" futni shtegun për në foto.

Megjithatë, vini re! Nëse dëshironi të shihni një kanavacë me një ngjyrë si sfond, të specifikuar nga një vlerë nga paleta e ngjyrave, atëherë kjo bëhet duke përdorur atributin bgcolor.

Për shembull, ..., ne kemi vendosur një sfond të zi për faqen tonë.

Ngjyrat në css dhe html përcaktohen ose me një fjalë angleze (për shembull, e kuqe) ose një kod të veçantë që përbëhet nga shenja # dhe gjashtë karaktere pas saj (për shembull, #FFDAB9).

Kur shtypni opsionin e dytë në produktet e softuerit të specializuar për zhvilluesit, paleta do të shfaqet automatikisht para jush. Nëse sapo keni filluar të studioni këto gjuhë të internetit, atëherë mund të shikoni kodin e ngjyrave në internet.

Sfondi si një veti në fletët e stilit kaskadë

Vendoset ose në një skedar të veçantë me stile css, ose në një element

Në këtë shënim, ne mund të përmbledhim punën tonë. Bashkohuni me radhët e abonentëve të mi besnikë, bëni pyetje nëse diçka nuk është e qartë dhe mos jini të pangopur për një lidhje në blogun tim, por ndajeni atë me miqtë tuaj. Ju uroj një mësim të këndshëm. Mirupafshim!

Sinqerisht, Roman Chueshov

Mësimi 7. Ngjyra e tekstit dhe e sfondit në HTML.

Data: 2008-12-05

Si të vendosni ngjyrën e sfondit dhe tekstit në një faqe interneti?

Si parazgjedhje, ngjyra e tekstit dhe, në përgjithësi, çdo font në faqet e internetit është gjithmonë e zeza (#000000 ). Por ne gjithmonë mund të vendosim absolutisht çdo ngjyrë që na pëlqen dhe duket e mirë ose më e përshtatshme për dizajnin e një siti të caktuar.

Vendosni ngjyrën e tekstit

Në HTML, ngjyra e tekstit, fontit, sfondit dhe elementëve të tjerë mund të vendoset në dy mënyra:

1. Metoda 1. Në etiketa çifte atributi është shkruar me emrin e ngjyrës së dëshiruar. Emri i ngjyrës tregohet në anglisht. Për shembull, ngjyra e titullit në faqen tonë të internetit mund të vendoset në këtë mënyrë:

Komentet për këtë artikull (mësim):

Andrey! Çfarë faqeje të mrekullueshme keni! Unë e përdor rregullisht për javën e dytë tani: Unë kam studiuar mësimet tuaja dhe video-tutorialet; Unë lexoj literaturën tuaj dhe shkarkoj programe; Unë po hedh hapat e mi të parë në programimin në ueb! Dhe, më e rëndësishmja, unë mund ta bëj atë!!! Dhe unë nuk jam aspak fizikant, por tekstshkrues! Dhe kushdo që viziton faqen time letrare mund të bindet për këtë: "POEZI NGA OLEG GUZ" Të dhënat e mia: e-mail: [email i mbrojtur] uebfaqja: http://sites.google.com/site/stihiolegguz/

kontrolloni me kujdes kodin

Kam provuar të ndryshoj ngjyrën e sfondit dhe nuk funksionon! Si të ndryshoni ngjyrën e sfondit?