În această postare vă voi spune ca de obicei setați fundalul site-ului folosind HTML cod.
Vă voi arăta, de asemenea, un serviciu străin excelent pentru selecția fundalurilor perfecte.
Acum setările site-ului sunt făcute mai ușoare și mai convenabile prin console CMS, cum ar fi WordPress.
Se întâmplă că trebuie să schimbați șabloanele site-urilor de vânzare, acest articol vă va ajuta în acest sens.
Dacă nu știi ce este HTML, atunci poate fi rezumat ca limba site-urilor sau un set de reguli prin care site-urile sunt generate.
De exemplu, vedeți o poză pe site, când în codul HTML al paginii poate arăta astfel:
Setarea unei culori solide pentru fundalul paginii.
Pentru a instala fundal de culoare solidă, nevoie în etichetă adauga atribut bgcolor.
< html >
< head >
< title >Titlul paginii.
< body bgcolor = "#ffcc00" >
Puteți lipi acest cod într-un fișier text și îl puteți salva cu extensia .html. Apoi deschideți cu orice browser și vedeți rezultatul.
După cum probabil ați ghicit, culoarea de fundal apare datorită codului de culoare din atribut bgcolor = „valoare”, care poate fi selectată făcând clic pe acest link.
Setarea imaginii pe fundalul paginii HTML.
La setați la imaginea de fundal, puteți folosi atributul fundalîn etichetă .
< html >
< head >
< title >Titlul paginii.
< body background = "http://сайт/images/mlmsecret.jpg" >Salut. Aceasta este prima mea pagină.
Este posibil să observați că atributul fundal este egală cu calea fișierului care este folosit ca fundal.
Pentru a schimba rapid fundalul sau orice imagine de pe pagină, trebuie doar să specificați o nouă cale către fișier folosind un editor de text.
Pentru a afla calea anterioară, pe pagina cu imaginea, faceți clic dreapta pe imagine și faceți clic pe „Copiați adresa URL a imaginii”. astfel vei vedea numele imaginii/fondului. Apoi puteți pur și simplu să înlocuiți vechea imagine cu propria dvs. folosind același nume de fișier.
Acestea au fost cele mai simple baze de configurare. fundal în html, acum vine partea distractivă. 🙂
Browserele moderne vă permit să adăugați un număr arbitrar de imagini de fundal unui element, listând opțiunile pentru fiecare fundal, separate prin virgule. Este suficient să utilizați fundalul proprietății universale și să specificați un fundal pentru acesta mai întâi și al doilea separat prin virgule.
Cum pot întinde fundalul pe toată lățimea ferestrei?
Proprietatea background-size este destinată scalării fundalului, 100% este specificat ca valoare, apoi fundalul va ocupa toată lățimea ferestrei browserului. Pentru versiunile mai vechi de browsere, trebuie utilizate proprietăți specifice cu prefixe, așa cum se arată în Exemplul 1.
Cum adaug o imagine de fundal la o pagină web?
Pentru a adăuga o imagine de fundal la o pagină web, setați calea către imagine în interiorul valorii URL a proprietății de stil de fundal, care este, la rândul său, adăugată la selectorul de corp.
Pot face un fundal animat?
Animația este o tehnică suficient de puternică care poate aduce la viață orice document, așa că nu este de mirare că tehnologia Flash a câștigat o popularitate imensă, care adaugă desene animate paginilor web, în plus, cele interactive. Formatul grafic GIF acceptă și animația de bază prin modificări secvențiale ale cadrelor. Deci, folosind o imagine în acest format, este permisă animarea nu numai a imaginilor individuale, ci și a fundalului unei pagini web sau a unui anumit element.
În primul rând, trebuie să creați o imagine animată în format GIF, pentru care puteți utiliza programul Adobe Photoshop sau altul potrivit pentru acest scop. Există, de asemenea, biblioteci de fișiere animate gata făcute care pot fi folosite ca imagine de fundal. Apoi, imaginea este adăugată ca fundal folosind proprietatea stilului de fundal, așa cum se arată în Exemplul 1.
Cum potrivesc imaginea de fundal în colțul din dreapta jos al paginii?
Proprietatea stilului de poziție de fundal este utilizată pentru a controla poziția imaginii de fundal pe pagină; stabilește simultan coordonatele orizontale și verticale ale imaginii. Pentru a anula repetarea imaginii de fundal, utilizați proprietatea fundal-position cu valoarea no-repeat.
Cum pot preveni repetarea fundalului?
În mod implicit, imaginea de fundal se repetă orizontal și vertical, aliniându-se într-un mozaic pe întregul câmp al paginii web. Cu toate acestea, acest comportament al fundalului nu este întotdeauna necesar, mai ales în cazul plasării unei singure imagini, astfel încât valoarea no-repeat adăugată proprietății stilului de fundal vine în ajutor.
Cum fac ca fundalul să se repete doar pe verticală?
Repetarea fundalului este de obicei necesară pentru a crea linii decorative sau degrade care sunt ancorate la înălțimea unui element sau a ferestrei unei pagini web. În astfel de cazuri, repetarea fundalului pe verticală oferă o imagine perfectă, indiferent de dimensiunea elementelor. Chiar la început, ar trebui să vă îngrijorați că imaginea de fundal se repetă fără cusături.
Culoarea de fundal este un element important al oricărei pagini web. În primul rând, stabilește starea de spirit dorită și starea generală de spirit a site-ului, iar în al doilea rând, facilitează percepția textului.
Culoarea de fundal a paginii web este setată folosind atributul bgcolor al etichetei
.Exemplul 1. Schimbarea culorii de fundal
Culoarea poate fi specificată în valoare hexazecimală sau după numele acesteia.
Deși puteți specifica orice culoare pentru fundal, majoritatea site-urilor folosesc un fundal predominant alb și litere negre ca opțiune cea mai stabilită.
Imagine de fundal
Orice imagine potrivită poate fi folosită ca fundal. Fundalul nu trebuie să distragă atenția de la text, în timp ce ar trebui să se îmbine bine cu schema de culori a paginii web și să aibă dimensiuni mici pentru a se încărca rapid. Dacă după cele de mai sus doriți să adăugați o imagine de fundal în pagină, ar trebui să utilizați atributul de fundal al etichetei
.Exemplul 2. Adăugarea unei imagini de fundal
Dacă imaginea este mai mică decât dimensiunea ecranului monitorului, aceasta va fi înmulțită orizontal și vertical.
Deoarece imaginea de fundal se încarcă mai lent decât culoarea de fundal, se poate întâmpla ca textul să nu fie citit o perioadă de timp până când imaginile sunt încărcate. Același lucru se poate întâmpla atunci când imaginile sunt dezactivate în browser. Prin urmare, se recomandă să setați întotdeauna culoarea de fundal împreună cu imaginea de fundal (exemplul 3).
Exemplul 3. Utilizarea unui tapet și a unei culori de fundal
Fundal fix
În mod implicit, când utilizați bara de defilare, imaginea de fundal se mișcă odată cu conținutul paginii web. Internet Explorer permite remedierea fundalului folosind eticheta bgproperties = „fixed”.
.Exemplul 4. Setarea unui fundal fix
Prin specificarea atributului bgproperties, așa cum se arată în Exemplul 4, imaginea de fundal de pe pagina web va rămâne staționară, dar textul, grafica și alte elemente se vor muta cu bara de defilare.
Pentru a crea un site web, o întrebare importantă este cum să faci fundalul în html. Această procedură implică utilizarea anumitor etichete - cuvinte de cod și litere. Datorită lor, puteți pune un fundal diferit, îl puteți face monocromatic - îl umpleți sau puteți pune orice imagine în locul fundalului. Astfel de acțiuni vor fi foarte utile pentru toți designerii de layout și pentru cei care au decis să-și „imbrace” site-ul în mod independent.
Realizarea fundalului
Înainte de a face fundalul site-ului html, trebuie să deschideți codul html al paginii într-un editor de text. Rețineți că etichetele sunt plasate vertical pe pagină. Apoi, între etichete
… , trebuie să puneți o etichetă- aceste etichete sunt necesare pentru a clarifica stilul elementelor acestei pagini web. În locul celor trei puncte, trebuie să scrieți - corp (fond :). Aceasta este o opțiune datorită căreia puteți seta diferite stiluri pentru fundalul paginii. Puteți efectua operația de setare a culorii în două moduri. Primul:Corp (fundal: # 000000) - acum fundalul paginii ar trebui să fie negru.
Această metodă este potrivită pentru a seta atât culoarea, cât și imaginea ca fundal. După două puncte puteți pune fie un cod de culoare, fie un link către o imagine. Și puteți folosi o metodă care înseamnă doar setarea culorii - o anumită umplere pentru pagină. După două puncte, trebuie să scrieți așa-numitul parametru - culoare. Și după el, pune codul culorii în sine. Aceasta este o modalitate bună de a-l folosi ca șablon. Înregistrați-l și salvați, iar când este necesar - setați culoarea, puneți-o pe pagină.
Puteți pune, în loc de un fundal simplu, o poză. Dacă trebuie să știți: în html, cum să faceți o imagine un fundal, atunci operațiunile trebuie făcute similar. Înregistrați etichete, puneți corpul (fond: link către imagine). Trebuie amintit că imaginea în sine poate fi oriunde. Și pe site-ul de pe Internet, dar cel mai bine este să creați un folder la rădăcina documentului. În folderul în care vor fi salvate toate informațiile despre pagina site-ului, trebuie să creați altul - pentru imagini. Operația va arăta astfel:
Acum poza pe care ați ales-o va fi fundalul întregii pagini a site-ului. Sperăm că v-ați dat seama cum să faceți un fundal în html. Încearcă-l și cu siguranță vei reuși!
Mulți designeri de layout începători care tocmai intră în esența creării site-urilor web se întreabă adesea cum să creeze o imagine de fundal în html. Și dacă unii își pot da seama de această sarcină, atunci apar aceleași probleme în timpul întinderii imaginii pe toată lățimea monitorului. În același timp, aș dori ca site-ul să fie afișat la fel pe toate browserele, așa că trebuie îndeplinită cerința de cross-browser. Puteți seta fundalul în două moduri: folosind și stilul CSS. Fiecare alege cea mai bună opțiune pentru sine. Desigur, stilul CSS este mult mai convenabil, deoarece codul său este stocat într-un fișier separat și nu ocupă coloane suplimentare în etichetele principale ale site-ului, dar mai întâi să luăm în considerare o metodă simplă de a seta o imagine pe fundalul Site-ul.
Etichete HTML de bază pentru crearea unui fundal
Deci, să trecem la întrebarea, fundalul în html este ecran complet. Pentru ca site-ul să arate frumos, trebuie să înțelegeți un detaliu destul de important: trebuie doar să faceți un fundal gradient sau să-l pictați cu o culoare solidă, dar dacă trebuie să inserați o imagine în fundal, aceasta nu se va întinde. pe toată lățimea monitorului. Inițial, trebuie să selectați o imagine sau să faceți singur un design cu o astfel de extensie, în care veți afișa pagina site-ului. Abia după ce imaginea de fundal este gata, mutați-o într-un folder numit „Imagini”. În el vom stoca toate imaginile, animațiile și alte fișiere grafice folosite. Acest folder ar trebui să fie în directorul rădăcină cu toate fișierele dvs. html. Acum poți merge la cod. Există mai multe opțiuni pentru scrierea unui cod cu care fundalul se va schimba într-o imagine.
- Scrieți eticheta de atribut.
- Prin stilul CSS în cod HTML.
- Scrieți stilul CSS într-un fișier separat.
Depinde de tine cum să faci din fundal o imagine în HTML, dar aș dori să spun câteva cuvinte despre cum ar fi cea mai optimă. Prima metodă prin scrierea prin atributul tag a fost demult depreciată. A doua opțiune este folosită în cazuri foarte rare, doar pentru că se obține o mulțime din același cod. Și a treia opțiune este cea mai comună și eficientă. Iată exemple HTML de etichete:
- Prima modalitate de a scrie este prin atributul etichetei (body) din fișierul index.htm. Este scris astfel: (body background = "Folder_name / Image_name.extension") (/ body). Adică, dacă avem o poză cu numele „Imagine” și extensia JPG și am numit folderul „Imagini”, atunci codul HTML va arăta astfel: (fundalul corpului = „Imagini / Poză.jpg”) ... (/ corp) ...
- A doua metodă de scriere afectează stilul CSS, dar este scrisă în același fișier numit index.htm. (style body = „background: url (" ../ Images / Picture.jpg ")").
- Iar a treia modalitate de înregistrare se face în două fișiere. Într-un document numit index.htm este scrisă următoarea linie: (head) (link rel = "stylesheet" type = "text / css" href = "CSS_file_path") (/ head). Și în fișierul de stil denumit style.css scriem deja: body (background: url (Imagini / Picture.jpg ")).
Ne-am dat seama cum să facem un fundal o imagine în HTML. Acum trebuie să vă dați seama cum să întindeți imaginea la lățimea întregului ecran.
Modalități de a întinde imaginea de fundal la lățimea ferestrei
Să ne imaginăm ecranul ca procent. Se pare că întreaga lățime și lungime a ecranului va fi 100% x 100%. Trebuie să întindem imaginea la această lățime. Adăugați o linie la intrarea de imagine din fișierul style.css, care va întinde imaginea pe toată lățimea și lungimea monitorului. Cum este scris asta în stil CSS? Este atat de simplu!
fundal: url (Imagini / Imagine.jpg ")
dimensiunea fundalului: 100%; / * aceasta va funcționa pentru majoritatea browserelor moderne * /
Așa că ne-am dat seama cum să facem o imagine de fundal în html pe ecran complet. Există, de asemenea, o modalitate de a scrie în fișierul index.htm. Deși această metodă este depășită, este necesar ca începătorii să o cunoască și să o înțeleagă. În eticheta (head) (style) div (background-size: cover;) (/ style) (/ head), această intrare înseamnă că selectăm un bloc special pentru fundal, care va fi poziționat pe toată lățimea fereastră. Am analizat 2 moduri de a face din fundalul unui site web o imagine html, astfel încât imaginea să se întindă pe toată lățimea ecranului în oricare dintre browserele moderne.
Cum să faci un fundal fix
Dacă decideți să utilizați o imagine ca fundal al unei viitoare resurse web, atunci trebuie doar să învățați cum să o faceți nemișcată, astfel încât să nu se întindă în lungime și să nu strice aspectul estetic. Este destul de ușor să prescrii acest mic adaos cu ajutorul. Trebuie să adăugați o frază în fișierul style.css după fundal: url (Imagini / Imagine.jpg ") fix; sau adăugați o linie separată după punct și virgulă - poziție: fix. Astfel, imaginea de fundal va deveni fixă. prin conținutul de pe site, vei vedea că liniile de text se mișcă, dar fundalul rămâne pe loc. Așa ai învățat cum să faci din fundal o imagine în html în mai multe moduri.
Lucrul cu un tabel în HTML
Mulți dezvoltatori web fără experiență, când se confruntă cu tabele și blocuri, adesea nu înțeleg cum să facă o imagine pe fundalul unui tabel în html. Ca orice și stilul CSS, acest limbaj de programare web este destul de simplu. Și soluția la această problemă ar fi să scrieți câteva linii de cod. Ar trebui să știți deja că ortografia rândurilor și coloanelor din tabel se notează ca etichete (tr) și, respectiv, (td). Pentru a face fundalul tabelului sub forma unei imagini, trebuie să adăugați o frază simplă la etichetă (tabel), (tr) sau (td) cu un link către imagine: fundal = URL-ul imaginii. Pentru claritate, iată câteva exemple.
Tabele cu o imagine în loc de fundal: exemple HTML
Să desenăm un tabel 2x3 și să facem din el imaginea de fundal salvată în folderul „Imagini”: (fondul tabelului = „Imagini / Imagine.jpg”) (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tabel). Acest lucru va umple tabelul nostru cu fundalul imaginii.
Acum să desenăm aceeași placă de 2x3, dar introduceți imaginea în coloanele numerotate 1, 4, 5 și 6. (tabel) (tr) (td fundal = „Imagini / Imagine.jpg”) 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td fundal = „Imagini / Picture.jpg”) 4 (/ td) (td fundal = „Imagini / Imagine.jpg”) 5 ( / td) (td background = „Imagini / Imagine.jpg”) 6 (/ td) (/ tr) (/ tabel). După vizualizare, vedem că fundalul apare doar în acele celule în care ne-am înregistrat, și nu în întregul tabel.
Site cross-browser
Există, de asemenea, o resursă web între browsere. Aceasta înseamnă că paginile site-ului vor fi afișate la fel de corect în diferite tipuri și versiuni de browsere. În același timp, trebuie să personalizați codul HTML și stilul CSS pentru browserele necesare. În plus, în epoca modernă a dezvoltării smartphone-urilor, mulți dezvoltatori web încearcă să creeze site-uri care sunt adaptate atât pentru versiunile mobile, cât și pentru vizualizarea computerului.
