Salutare tuturor! 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 web. 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 va atrage cu siguranță utilizatorul de internet și va adăuga originalitate.

Dacă ați observat, majoritatea oamenilor de afaceri online folosesc un fundal unic pe paginile lor de vânzări și abonament. Astăzi vom analiza componenta tehnică a acestui proces.

Deci, mai întâi avem nevoie, desigur, de o imagine. Există un site foarte bun pe internetul străin de unde puteți descărca diverse imagini pentru fundalul site-ului. Pur și simplu există un număr mare de ei acolo. Site-ul se numește Subtle Patterns.

Apare pe primul loc în lista motorului de căutare Google, așa că îl recomand pentru serviciu. De asemenea, puteți găsi un număr mare de alte site-uri dacă introduceți într-un motor de căutare ceva de genul „modele de imagine de fundal”, „descărcați imaginea de fundal pentru site” și așa mai departe.

Dacă nu aveți probleme cu limba engleză, o veți înțelege fără dificultate.

In acest articol am ales un subiect si se numeste tweed. Îl poți descărca.

Așa arată într-o versiune mică pe site

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

Și înainte de a-l edita, asigurați-vă că îl salvați sub un nume, de exemplu index.htmlși creați un folder pe computer, 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 se încurce și afișați site-ul incorect.

În plus, în folderul principal „site-ul meu” trebuie să creați încă două subdosare, într-unul vom plasa toate imaginile noastre și se va numi „imagini”, iar celălalt îl vom numi „CSS” (stil în cascadă). foi) și puneți dosarul acolo stil.css

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

Lângă numele fișierului veți observa o dischetă roșie. Deci, dacă este roșu, înseamnă că fișierul nu a fost 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 titlul documentului, de exemplu îl 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ă salvați fiecare acțiune pe care o întreprindem.

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

În acest fel, vei învăța singur ordinea corectă a acțiunilor. Nu ar trebui să vă ocupați de stiluri direct în documentul html, este mai bine să le puneț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”

Grozav! Pentru ca browserul nostru să afișeze pagina corect, trebuie să conectăm foaia de stil la documentul nostru html. Iată cum se face

Intrăm direct pe toată linia de mai sus. Cu această linie conectăm foaia noastră de stil.
Acum vom defini o imagine de fundal pentru eticheta corpului nostru prin foaia de stil. Pentru a face acest lucru, creăm următoarea structură în documentul style.css (doar să o luăm și să o scriem în codul programului)

Lasă-mă să explic puțin aici. Atributul de fundal are multe valori, dintre care una este background-repeat, care este responsabilă pentru extinderea imaginii noastre de fundal pentru documentul web.

FUNDAL-REPETARE:

REPEAT //(întinde pe orizontală și verticală) REPEAT-X // (întinde doar pe orizontală) REPEAT-Y //(întinde doar pe verticală) NU REPETĂ //(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:

Am făcut și o selecție de site-uri special pentru tine de unde poți descărca un fundal frumos pentru site

Aproape fiecare site web popular are un aspect frumos. O parte importantă a designului site-ului web este fundalul, numit și fundal, pe care fiecare dintre noi îl poate crea sau schimba. În acest articol vă voi spune cum să puneți un fundal pe un site web.

Crearea unui nou fundal pentru site-uri web

Pentru a finaliza sarcina, puteți utiliza una dintre cele 4 metode:

• 1. Fundal cu o singură culoare
• 2. Fundal cu textură
• 3. Fundal folosind un gradient
• 4. Fundal dintr-o imagine mare

Creați un fundal folosind o singură culoare

Pentru a crea sau modifica fundalul site-ului, care constă dintr-o singură culoare, trebuie să mergeți la fișier stil.css, în care găsiți valoarea - corp (este responsabil pentru corpul principal al site-ului). Acum trebuie să înregistrați funcția de culoare de fundal dacă nu a existat și să specificați codul de culoare. În cazul în care trebuie să creați un fundal alb pentru un site web, va trebui să scrieți următorul cod:

culoare de fundal: #83C5E9; (fond albastru, ca în exemplu)

Puteți găsi o listă completă de culori pe site - (STM). Pentru a schimba culoarea, pur și simplu schimbați valoarea după două puncte și bucurați-vă de eforturile voastre.

Crearea unui fundal folosind textura

Această metodă a fost deosebit de populară în ultima vreme, deoarece vă permite să creați un fundal frumos pentru site. Texturile pot fi simple, dar foarte frumoase, motiv pentru care sunt adesea folosite. Pentru a conecta orice textură, trebuie să o încărcați în folderul de imagini de pe găzduirea unde este instalat site-ul dvs. După aceasta, ar trebui să scrieți următorul cod:

culoare de fundal: #537759;

imagine de fundal: url(images/pattern.png);

Acest cod conține un parametru familiar pentru menținerea culorii (este verde) și un element care este responsabil pentru conectarea texturii verde.

Realizarea unui fundal folosind un gradient

Orice imagine care este conectată folosind funcții css poate fi repetată atât pe orizontală, cât și pe verticală (de-a lungul axelor XȘi Y). Această oportunitate ne permite să creăm orice fundal simplu pentru site cu propriile noastre mâini. Pentru a face acest lucru, trebuie să creați un gradient de 1 megapixel lățime (vezi imaginea de mai jos), să îl salvați ca imagine și să îl încărcați pe găzduire. După aceasta, puteți scrie codul necesar, și anume:

culoare de fundal: #83C5E9;

imagine de fundal: url(images/gradient.jpg);

background-repeat: repetare-x;

În acest set, în ordinea priorităților, există o funcție responsabilă de culoarea de fundal, pe care o folosim pentru reasigurare. După aceasta, un parametru care este responsabil pentru conectarea gradientului și în cele din urmă o funcție care este responsabilă cu repetarea gradientului de-a lungul axei X.

Utilizarea unei imagini mari pentru fundalul site-ului

Această metodă este a doua cea mai populară, deoarece vă permite să utilizați diferite imagini pentru a crea un fundal. Pentru a implementa această metodă, trebuie doar să încărcați o imagine mare în folderul de imagini al site-ului și să introduceți următorul cod:

culoare de fundal: #000000;

imagine de fundal: url(imagini/titlu imagine.jpg);

fundal-poziție: centru sus;

background-repeat: fără repetare;

Dacă totul este clar cu primii doi parametri, atunci ultimii doi trebuie acoperiți. A treia funcție vă permite să fixați imaginea în centrul site-ului, iar ultimul parametru blochează repetarea acesteia în întreaga structură a paginii.

Schimbarea fundalului pe site-urile web ucoz

Acele metode de creare a unui fundal pentru un site pot fi folosite pe diferite sisteme de management al conținutului, dar nu și pe site-uri - ucoz. Pentru a schimba fundalul pentru site-ul web ucoz, trebuie să accesați panoul de control al site-ului, accesați „Managementul designului”, și apoi în „Editarea șabloanelor”.

Acum trebuie să deschideți Foaia de stil (CSS), găsiți linia "corp"și parametru "fundal". După aceasta, trebuie să copiați linkul, să-l lipiți în browserul dvs. de internet și veți avea acces la imaginea care a fost fundalul.

Pentru a utiliza un fundal nou, trebuie doar să îl încărcați în Managerul de fișiere. În același timp, asigurați-vă că numele noii imagini de fundal este același ca înainte de modificare. Salvați-vă munca și accesați site-ul web pentru a vedea lucrările efectuate.

Schimbarea fundalului site-ului în HTML

Dacă doriți să faceți fundalul pe un site html folosind o imagine, atunci pur și simplu introduceți linia în cod:

Și dacă doriți să faceți fundalul site-ului folosind culoare, atunci linia ar trebui să arate astfel:

Aceasta încheie povestea noastră. Acum știi cum să faci un fundal pentru un site web. Proiecte fericite!

O zi bună tuturor celor care vor să învețe și să învețe ceva nou! Ați acordat vreodată atenție aspectului site-urilor web, în ​​timpul dezvoltării cărora creatorii au fost prea leneși să proiecteze fundalul paginilor? Și am făcut. Arată rău. Adesea, din cauza lipsei diviziunilor obișnuite între diferitele tipuri de informații, acestea se amestecă și pur și simplu nu există dorința de a privi ceva mai departe pe o astfel de resursă web.

Pentru a preveni un astfel de dezastru în proiectul dvs., am decis să scriu un articol pe tema: „Cum să faceți un fundal de pagină în html”. După ce ați citit publicația, veți afla ce instrumente puteți utiliza pentru a seta designul de fundal, cum să faceți fundalul fixat sau schimbat și multe altele care vă vor ajuta să vă faceți site-ul atractiv. Acum să începem!

Instrumente de bază pentru setarea fundalurilor paginilor web

Pentru a seta o imagine de fundal, dezvoltatorii de limbaj web au furnizat atributul de fundal. Este disponibil atât în ​​format html, cât și în css.

În limbajul de marcare, acesta este un atribut al etichetei body, iar în foile de stil, este o proprietate universală care vă permite să setați până la 5 caracteristici de fundal în același timp. Fundalul este un element destul de flexibil care poate fi folosit pentru a seta fundalul sub forma unei singure culori, a unei imagini color sau chiar a unei animații.

Deci, pentru a seta imaginea de fundal prin unitatea html doar scrie urmatorul cod: ... iar în loc de cuvintele „adresă fișier” introduceți calea către imagine.

Cu toate acestea, vă rugăm să rețineți! Dacă doriți să vedeți o pânză cu o singură culoare ca fundal, specificată de o valoare din paleta de culori, atunci acest lucru se face folosind atributul bgcolor.

De exemplu, ..., am setat un fundal negru pentru site-ul nostru.

Culorile în css și html sunt specificate fie de un cuvânt englezesc (de exemplu, roșu), fie de un cod special, care constă din semnul # și șase caractere după acesta (de exemplu, #FFDAB9).

Când introduceți a doua opțiune în software specializat pentru dezvoltatori, paleta va apărea automat în fața dvs. Dacă tocmai ați început să învățați aceste limbi web, atunci puteți căuta codul de culoare pe Internet.

Fundalul ca proprietate în foile de stil în cascadă

Este setat fie într-un fișier separat cu stiluri css, fie într-un element

Pe această notă ne putem rezuma munca noastră. Alăturați-vă rândurilor abonaților mei fideli, puneți întrebări dacă ceva nu este clar și nu fiți lacomi cu un link către blogul meu, ci împărtășiți-l prietenilor dvs. Vă doresc o experiență plăcută de învățare. Pa! Pa!

Bine ati venit pe blogul meu. Să continuăm să învățăm elementele de bază ale html. Acest tutorial va fi atât de simplu și interesant, încât sper că veți dori să aflați mai multe despre limbajele de programare. În doar câteva minute vei învăța cum să faci o imagine ca fundal în HTML și să obții rezultate excelente.

Voi vorbi și despre câteva nuanțe care vor face fundalul cât mai neted și frumos. Ei bine, începem?

Selectarea unei imagini

Aș dori să încep prin a alege o imagine. Pentru a arăta mai uniform și mai frumos pe pagină și nu trebuie să vă deranjați cu dimensiunile și alinierea. Vă sugerez să căutați imediat texturi fără sudură. Ce este?

Din păcate, este imposibil să întindeți o imagine în html pentru a umple întregul ecran. Fotografia este folosită la dimensiunea reală. Dacă imaginea este mică, atunci va acoperi întreaga zonă, ca în captura de ecran de mai jos. Pentru a întinde imaginea, va trebui să creați un document CSS suplimentar, fără acesta nu va funcționa.

Deși, aveți posibilitatea de a ocoli sistemul. Pentru a face acest lucru, utilizați Photoshop și imagini până la lățimea ecranului (1280x720). Deși în acest caz, la derularea în jos, imaginea va înlocui pe alta.

O opțiune mult mai bună dacă nu doriți să utilizați css este să utilizați texturi fără sudură. Nu au articulații vizibile. Sunt ca tapetul sau plăcile moderne în design. Unul îl înlocuiește pe celălalt și nu sunt vizibile îmbinări.

Dacă sunteți interesat de absența consecințelor legale pentru utilizarea lor, atunci vă recomand să căutați pe site Pixabay.com .

HTML

Acum să lucrăm cu codul. Ar trebui să remarc imediat că acum lucrăm cu html, adică schimbăm imaginea nu pentru întregul site, ci doar pentru o anumită pagină pentru care se scrie codul. Dacă sunteți interesat să schimbați întreaga resursă, atunci trebuie să codificați folosind css, Dar mai multe despre asta mai târziu.

Deci, puteți lucra în notepad, eu prefer NotePad++. Este mult mai convenabil să lucrezi în el: codul este completat pentru tine, etichetele sunt evidențiate. Programul este gratuit și cântărește aproximativ 3 MB. Îl recomand cu căldură, mai ales dacă ești începător.

Deci, la etichetă corp trebuie să adăugați un atribut fundalși indicați un link către imaginea de unde va fi făcută fotografia. Așa arată în program.

Puteți doar să deschideți notepad și să copiați acest cod. Între ghilimele, pune un link către poza care îți place.

Aș dori să notez pentru începători, acesta este ideea. Dacă luați o imagine de la Pixabay, atunci trebuie să lipiți linkul nu pe pagina cu imaginea, ci să deschideți imaginea în fila următoare.

Copiați această adresă URL exactă.

Salvați documentul. Nu uitați că, dacă utilizați notepad, trebuie să utilizați extensia .html . Numiți documentul, de exemplu, înapoi.html . În caz contrar, va fi salvat ca document text, iar browserul pur și simplu nu va înțelege ce trebuie să facă.

Gata, pagina este umplută cu o culoare diferită.

Dacă doriți să aflați mai multe despre html, vă sugerez să descărcați curs gratuit de Evgeniy Popov . Din el veți învăța mai multe etichete, capacități lingvistice, veți încerca câteva tehnici noi și veți afla mai multe.

Nu voi spune că cursurile lui Evgeniy Popov sunt extrem de populare. Mulți experți îl certa, iar dacă ați dat peste astfel de afirmații, atunci iată părerea mea. Aceste lecții sunt oferite gratuit și, în ciuda acestui fapt, fac o treabă excelentă în sarcina lor principală - să arate începătorului elementele de bază și să-l actualizeze.

Așa cum fiecare scriitor are propria sa viziune despre cum să scrie, la fel și programatorii au propriul stil. Îți poți petrece întreaga viață învățând cum să creezi site-uri web, dar trebuie să începi de undeva. Din cărți? Nu asta. Da, conțin informații mai de încredere, informații actualizate, dar sunt atât de greu de stăpânit.

Nu sunteți de acord cu mine? Pot oferi o alternativă. Carte de Elizabeth și Erica Freeman Învățarea HTML, XHTML și CSS " Nu este un bestseller foarte plictisitor și a fost lansat nu cu mult timp în urmă, în 2016. Informațiile nu au devenit încă depășite.

CSS

Dacă aveți nevoie ca fundalul să fie repetat pe toate paginile site-ului dvs., atunci CSS este o necesitate. Desigur, puteți specifica calea de fiecare dată, ca în capitolul anterior. Dar imaginați-vă dacă în timp trebuie să îl înlocuiți: linkul devine depășit sau pur și simplu doriți să schimbați designul. Mergi la fiecare pagină și schimbi codul? Acest lucru nu va funcționa.

CSS ajută la rezolvarea acestei probleme. Trebuie să creați un fișier cu extensia css și să introduceți următorul cod:

Să vorbim puțin despre codul în sine. Între paranteze, după url puteți introduce un link către o imagine dintr-o sursă terță parte sau pur și simplu numele documentului dacă imaginea se află în același folder cu acest fișier.

Pentru cei care vor să știe mai bine

Cu css te poți întinde imagine de fundal, asigurați-vă că nu se repetă, adăugați animație GIF și multe altele.

Nu poți scrie totul într-un articol. Și nu mi-am propus o astfel de sarcină. Există o mulțime de subtilități, iar dacă promit că vă vor spune totul într-un singur articol, atunci aceasta nu este altceva decât o înșelăciune.

Vrei să înveți cum să scrii corect site-uri web? Vă recomand să învățați limbaje de programare. Pot recomanda cursul lui Andrey Bernatsky” HTML5 și CSS3 de la Zero la Pro " Îmi place foarte mult acest autor. Nu am urmat acest curs anume în urmă cu câțiva ani, era ceva asemănător, dar mai puțin modern.

Autorul vorbește foarte frumos, totul este ușor și de înțeles. Punctul culminant al acestui curs este că nu doar studiezi, ci creezi un site web specific împreună cu profesorul. Drept urmare, vei primi o carte de vizită, un blog și chiar un magazin online. Foarte tare. Puteți urmări primele trei lecții teoretice despre HTML5 de la acest curs chiar aici și acum.

Apropo, împreună cu acest curs primești 7 bonusuri: elementele de bază ale html și css de Andrei Bernatsky, aspect pentru începători, crearea unei pagini de destinație într-o seară și multe altele. Înainte de a vă angaja la un antrenament serios, încercați cursul gratuit " Exersați HTML5 și CSS3 ».

Ei bine, asta e tot. Abonați-vă la newsletter pentru a afla mai multe. Foarte curând vă voi spune puțin mai multe despre aspectul adaptiv, creșterea câștigurilor de la orice blog și vă voi oferi o mulțime de sfaturi utile pentru simplificarea muncii dvs. Ne revedem și mult succes în demersurile tale.

Browserele moderne vă permit să adăugați un număr arbitrar de imagini de fundal unui element, listând parametrii fiecărui fundal separați prin virgule. Este suficient să utilizaț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?

Pentru a scala fundalul, utilizați proprietatea background-size setați-i valoarea la 100%, apoi fundalul va ocupa întreaga lățime a ferestrei browserului. Pentru versiunile mai vechi de browsere, ar trebui să utilizați proprietăți specifice cu prefixe, 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, setați calea către imagine în valoarea 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ă destul de puternică care poate aduce la viață orice document, așa că nu este surprinzător faptul că tehnologia Flash, care adaugă desene animate în paginile web și, de asemenea, cele interactive, a devenit extrem de populară. Formatul grafic GIF acceptă, de asemenea, animație simplă prin schimbarea secvențială a cadrelor. Deci, folosind o imagine în acest format, este posibil să animați nu numai imagini individuale, ci și fundalul unei pagini web sau un anumit element.

În primul rând, va trebui să creați o imagine animată în format GIF, pentru care puteți utiliza Adobe Photoshop sau un alt program adecvat î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 se pune o imagine de fundal în colțul din dreapta jos al paginii?

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

Cum pot preveni repetarea fundalului?

În mod implicit, imaginea de fundal se repetă orizontal și vertical, formând un mozaic pe întreg câmpul paginii web. Cu toate acestea, acest comportament de fundal nu este întotdeauna necesar, mai ales atunci când plasați o singură imagine, așa că adăugarea unei valori fără repetare la proprietatea stilului de fundal va ajuta.

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

Repetarea fundalului este de obicei necesară pentru a crea linii decorative sau degrade care sunt legate de înălțimea unui element sau a unei ferestre de pagină web. În astfel de cazuri, repetarea fundalului pe verticală oferă o imagine consistentă, indiferent de dimensiunea elementelor. Numai la început ar trebui să vă asigurați că imaginea de fundal se repetă fără cusături.