Primul text

Al doilea text

Î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.
Uneori este necesar să schimbați șabloanele site-urilor de vânzare, iar acest articol vă va ajuta în acest sens.

Dacă nu știi ce este HTML, atunci poate fi numit generic limbajul site-urilor sau un set de reguli prin care site-urile sunt generate.

De exemplu, vedeți o imagine pe un site web, când în codul HTML al paginii ar putea arăta astfel:

Setează o culoare solidă pentru fundalul paginii.

Pentru a instala fundal de culoare solidă, trebuie să etichetezi 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 provine din codul de culoare din atribut bgcolor="valoare" care poate fi găsit făcând clic pe acest link.

Setarea unei imagini pe fundalul unei pagini HTML.

Pentru a setați imaginea de fundal, puteți folosi atributul fundalîn etichetă .

< html >
< head >
< title >Titlul paginii.

< body background = "http://сайт/images/mlmsecret.jpg" >Buna ziua. 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ă, trebuie să faceți clic dreapta pe imagine pe pagina cu imaginea și să faceți clic pe „Copiați adresa URL a imaginii”. astfel vei vedea numele imaginii/fondului. Puteți apoi pur și simplu să înlocuiți vechea imagine cu a dvs. folosind același nume de fișier.

Acestea au fost elementele de bază pentru configurare. fundal în html, acum cel mai interesant. 🙂

Browserele moderne vă permit să adăugați un număr arbitrar de imagini de fundal la un element, listând parametrii fiecărui fundal separați prin virgule. Este suficient să folosiți proprietatea universală de fundal și să specificați mai întâi un fundal pentru ea și al doilea separat prin virgulă.

Cum să întindeți 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 browserele mai vechi, ar trebui utilizate proprietăți specifice prefixate, așa cum se arată în exemplul 1.

Cum să adăugați o imagine de fundal la o pagină web?

Pentru a adăuga o imagine de fundal la o pagină web, specificați calea către imagine în interiorul valorii URL a proprietății de stil de fundal, care la rândul său este adăugată la selectorul de corp.

Este posibil să faci 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, pe lângă cele interactive. Formatul grafic GIF acceptă, de asemenea, cea mai simplă animație 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.

Mai întâi trebuie să creați o imagine animată în format GIF, pentru care puteți utiliza Adobe Photoshop sau un alt program potrivit în 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 să pui o imagine de fundal în colțul din dreapta jos al unei pagini?

Pentru a controla poziția imaginii de fundal pe pagină, se folosește proprietatea stilului de poziție de fundal, care setează simultan coordonatele orizontale și verticale ale imaginii. Pentru a opri repetarea unei imagini de fundal, utilizați proprietatea background-position cu valoarea no-repeat .

Cum să faci fundalul să nu se repete?

În mod implicit, imaginea de fundal se repetă pe orizontală și pe verticală, acoperind întregul câmp al paginii web. Cu toate acestea, acest comportament al fundalului nu este întotdeauna necesar, mai ales în cazul unei singure imagini, astfel încât valoarea fără repetare adăugată proprietății stilului de fundal vine în ajutor.

Cum pot face ca fundalul să se repete doar pe verticală?

Repetarea fundalului este de obicei necesară pentru a crea linii decorative sau degrade legate de înălțimea unui element sau a unei ferestre pe o pagină web. În astfel de cazuri, repetarea fundalului pe verticală oferă o imagine solidă, indiferent de dimensiunea elementelor. Doar la început ar trebui să aveți grijă ca imaginea de fundal să se repete fără îmbinări.

Salut! Umilul tău slujitor este în legătură cu tine cu o porțiune de material util și practic despre cum să stabilești un fundal pentru un site. Acesta este începutul în aspectul html și aici voi demonstra clar, cu un exemplu, cum puteți face un fundal frumos pentru un site care cu siguranță va agăța utilizatorul de internet și va adăuga originalitate.

Dacă ați observat, majoritatea companiilor de pe Internet folosesc un fundal unic în paginile lor de vânzări și înscriere. Astăzi vom analiza componenta tehnică a acestui proces.

Deci, pentru început, avem nevoie, desigur, de o poză. Există un site foarte bun pe internetul străin de unde puteți descărca diverse imagini de fundal ale site-ului web. Există doar un număr mare de ei. Site-ul se numește Subtle Patterns.

Este afișat în primul rând în lista motorului de căutare Google, așa că îl recomand în munca mea. De asemenea, puteți găsi un număr mare de alte site-uri dacă introduceți în motorul de căutare expresii precum „modele de imagine de fundal”, „descărcați imaginea de fundal pentru site” și așa mai departe.

Cine nu are probleme cu engleza, atunci vei intelege fara dificultate.

În acest articol, am ales un subiect și se numește tweed. Îl poți descărca.

Iată cum arată într-o versiune mică pe site

Mai întâi, creați un nou document în program

Și asigurați-vă că îl salvați sub un nume înainte de a-l edita, de exemplu index.htmlși creați un folder pe computerul dvs., de exemplu, puteți crea un folder „Site-ul meu” și plasați fișierul nostru index (index.html) în el. Este mai bine să creați un folder în limba engleză, astfel încât browserul să nu facă confuzie și afișa incorect site-ul.

În plus, în folderul principal „site-ul meu” trebuie să creați încă două subdosare, într-unul ne vom pune toate pozele și se va numi „imagini”, iar celuilalt îi vom da numele „CSS” (stil în cascadă). foi) și puneți dosarul acolo stil.css

Acum putem lucra la documentul nostru. Următorul pas este introducerea unui cod html gol, așa-numitul cadru principal de la care pornește totul. Îl poți descărca direct. Apoi, copiați totul din acest fișier și transferați-l în fișierul nostru de program. Rezultatul final ar trebui să fie ceva de genul următor

Lângă numele fișierului veți observa o dischetă roșie. Deci, dacă este roșu, atunci fișierul nu este salvat, asigurați-vă că faceți clic pe butonul de salvare, astfel încât discheta să devină albastră.

În eticheta de titlu, puteți schimba numele documentului, de exemplu, puteți face „Prima mea pagină web”. Și asigurați-vă că pagina dvs. este salvată în codificare UTF-8

În caz contrar, dacă există o altă codificare, de exemplu windows-1251, atunci textul documentului din browser va fi afișat în hieroglife. Puteți modifica codificarea în secțiunea „Codificări - Codificare în Utf-8 (fără BOM)” din bara de instrumente a programului.

Și nu uitați să ne salvați fiecare acțiune.

Acum să începem să creăm fundalul în documentul nostru. Trebuie să spun imediat că toate acțiunile noastre asupra designului paginii web se vor desfășura folosind foi de stil în cascadă numite CSS, adică vom face cadrul în html și îl vom aduce la un stil și un aspect frumos folosind CSS. .

Astfel, te vei obișnui cu ordinea corectă a acțiunilor. Nu este necesar să vă ocupați de stiluri direct în documentul html, este mai bine să le scoateți într-un document separat.

Pentru a face acest lucru, în programul nostru Notepad ++, vom crea un alt fișier și îl vom numi Style.css și îl vom salva într-un nou folder css, care va fi localizat în folderul partajat „Site-ul meu”.

Amenda! Pentru ca browserul nostru să afișeze pagina corect, trebuie să includem o foaie de stil în documentul nostru html. Iată cum se face

Introduceți direct întreaga linie de mai sus. Cu această linie includem foaia noastră de stil.
Acum vom defini o imagine de fundal pentru eticheta corpului nostru printr-o foaie de stil. Pentru a face acest lucru, creăm următoarea structură în documentul style.css (de asemenea, o luați direct și o scrieți în codul programului)

Aici am sa explic putin. Atributul de fundal are multe valori, dintre care una este background-repeat , care este responsabilă pentru extinderea imaginii noastre de fundal pentru un document web.

FUNDAL-REPETARE:

REPEAT //(replicare orizontală și verticală) REPEAT-X // (întindere numai pe orizontală) REPEAT-Y //(întindere numai pe verticală) NU REPETARE //(nu repeta imaginea de fundal)

În cazul nostru, replicăm imaginea noastră mică atât pe verticală, cât și pe orizontală. Ca urmare, întreaga pagină este umplută cu imaginea noastră. Iată cum arată în browser:

De asemenea, special pentru tine, am făcut o selecție de site-uri de unde poți descărca un fundal frumos pentru site

Vlad Merjevici

Datorită particularităților paginilor web, imaginile de fundal capătă un rol semnificativ în aspectul documentelor site-ului. În același timp, aceștia sunt implicați activ într-o varietate de activități, de exemplu, automatizarea procesului de atașare a imaginilor la text, crearea de tranziții în gradient și, desigur, adăugarea unui fundal sub conținut. Următoarele sunt câteva aspecte ale utilizării imaginilor de fundal.

Fundal pe o pagină web

Setarea imaginii de fundal pe o pagină web se face în mod tradițional prin atributul de fundal al etichetei . Un astfel de model se repetă pe orizontală și pe verticală, umplând în acest fel întreaga fereastră a browserului. În mod clar, nu există opțiuni speciale pentru creativitate aici, așa că hai să ne întoarcem la stiluri și să vedem ce putem face cu CSS.

Există cinci atribute în CSS care controlează o imagine de fundal: inserarea, poziția și repetarea acesteia. Cu toate acestea, toți acești parametri sunt înlocuiți cu un fundal de proprietate universală și îl vom folosi în viitor.

Adăugarea unei imagini de fundal

Adăugarea unei imagini se face prin setarea adresei imaginii prin cuvântul cheie url . Argumentele no-repeat (fără repetare), repetare-x (repetare orizontală) și repetare-y (repetare verticală) sunt folosite pentru a controla modul în care se repetă imaginea. Rezultă pagina web prezentată în Fig. unu.

Pentru a seta o imagine pe o pagină web, adăugați proprietatea stil de fundal la selectorul BODY, așa cum se arată în exemplul 1.

Exemplul 1. Imagine de fundal

În acest exemplu, graficul target.gif este definit ca fundalul paginii web fără a repeta imaginea. Pentru a preveni ca imaginea să fie fixată pe marginile browserului, aceasta este deplasată cu 30 de pixeli la dreapta și cu 20 de pixeli în jos față de poziția inițială.

repetarea modelului

Cu posibilitatea de a seta imaginea de fundal să se repete orizontal sau vertical, sunt disponibile mai multe opțiuni de design pentru pagini web. De exemplu, pentru a crea o bandă verticală de-a lungul marginii din stânga (Fig. 2), aveți nevoie de imaginea prezentată în Fig. 3.

Desenul trebuie să fie astfel încât să se unească pe verticală fără cusături vizibile și, de asemenea, să formeze un singur întreg cu culoarea de fundal dată a paginii web. Exemplul 2 arată cum să creați o astfel de imagine de fundal, folosind din nou proprietatea de fundal și valoarea acesteia repeat-y .

Exemplul 2: Repetați fundalul pe verticală

În mod similar, puteți repeta fundalul pe orizontală, de exemplu, creând un gradient și setându-l ca imagine de fundal (Fig. 4).

Pentru a obține pagina web prezentată în Fig. 4, mai întâi va trebui să faceți o imagine cu o tranziție în gradient. Lățimea este suficientă pentru a specifica 20-40 de pixeli, iar înălțimea imaginii depinde de scopul documentului și de înălțimea dorită a conținutului paginii web. De asemenea, nu uitați că un desen mare va duce la o creștere a dimensiunii fișierului grafic. Și acest lucru va afecta negativ viteza de încărcare și, în cele din urmă, va încetini afișarea fundalului. Pentru acest caz, o imagine de 30x200 pixeli era destul de potrivită (Fig. 5).

Exemplul 3 arată codul HTML pentru crearea unui fundal gradient.

Exemplul 3: Repetarea fundalului pe orizontală

Modelul gradient funcționează bine cu blocul de culoare solidă, așa că acest exemplu adaugă un strat pentru a afișa conținutul paginii web.

Adăugarea unei imagini la text

Cu o imagine de fundal, puteți automatiza procesul de adăugare a imaginilor unui anumit text, cum ar fi titluri. Pentru a face acest lucru, utilizați proprietatea universală de fundal, care este aplicată selectorului dorit. Ca valoare, specificați calea către imagine și, pentru ca aceasta să nu se repete, argumentul fără repetare (exemplul 4).

Exemplul 4: Adăugarea unei imagini

antet

Textul principal

După cum se arată în acest exemplu, imaginea poate fi deplasată orizontal și vertical din poziția inițială, implicit acesta este colțul din stânga sus al elementului bloc. Deplasarea fundalului vă permite să setați imaginea în raport cu textul în modul dorit. Pentru a preveni suprapunerea textului cu imaginea, asigurați-vă că adăugați proprietatea padding-left, datorită căreia textul este deplasat la dreapta cu distanța specificată. Este individual în fiecare caz și este de obicei egal cu lățimea imaginii plus distanța dorită dintre imagine și text.