Cum Să Setați Un Fundal Pe Un Site Web

Cuprins:

Cum Să Setați Un Fundal Pe Un Site Web
Cum Să Setați Un Fundal Pe Un Site Web

Video: Cum Să Setați Un Fundal Pe Un Site Web

Video: Cum Să Setați Un Fundal Pe Un Site Web
Video: Tutorial, curs video Dezvoltare Web - CSS, Cum setati fundalul(background) 2024, Mai
Anonim

Proiectarea oricărui site se bazează pe imagini de fundal și culori, ca o casă pe o fundație. Dacă doriți să înlocuiți fundația tipică a resursei dvs. Internet cu ceva mai individual, atunci ar trebui să începeți cu dezvoltarea designului. Și când este gata, partea pur tehnică va rămâne, adică înlocuirea designului vechi al fundalului site-ului specificat în codul sursă al paginilor cu cel nou. Există mai multe modalități de a implementa acest lucru în practică.

Cum să setați un fundal pe un site web
Cum să setați un fundal pe un site web

Instrucțiuni

Pasul 1

Mai întâi trebuie să aflați care dintre modurile în care este setat fundalul în versiunea curentă a site-ului. Pentru aceasta, deschideți codul HTML al paginii. Puteți face acest lucru cu un editor de text simplu descărcând fișierul de pe server în avans. Sau puteți utiliza editorul paginilor sistemului de gestionare a conținutului, dacă utilizați unul. Editorul de pagini nu necesită descărcarea fișierului, ci îl modifică direct pe server folosind browserul ca o interfață. Codul HTML (HyperText Markup Language) al paginii pe care îl deschideți constă din linii de instrucțiuni pentru browser. Acestea descriu tipurile, aspectul și locația fiecăruia dintre elementele unei pagini web. Aceste instrucțiuni sunt denumite în mod obișnuit „etichete”. Ordinea etichetelor în sine în codul paginii respectă, de asemenea, regulile limbajului HTML - acestea sunt împărțite în blocuri, dintre care primul trebuie să fie un bloc de titlu care începe cu o etichetă și se termină. Ar trebui să fie urmat de blocul care vă interesează acum mai mult - corpul documentului. Este limitat la etichete și. În eticheta de deschidere a acestui bloc (), puteți pune informații despre fundalul paginii. Astfel de informații din etichete se numesc „atribute”. Atributul etichetei de corp care setează culoarea de fundal este notat ca bgcolor și în cod ar putea arăta astfel: Aici setăm culoarea de fundal a paginii la argintiu. Browserul poate recunoaște unele dintre culori după numele lor, dar pentru a nu vă înșela, este mai bine să indicați codurile lor hexazecimale. Această versiune cu culoare argintie în expresie hexazecimală va arăta astfel: Deci, trebuie să găsiți eticheta începând cu <body în codul paginii și să verificați dacă are o culoare de fundal. Dacă da, înlocuiți indicația culorii din aceasta cu noua dvs. versiune și salvați modificările pe pagină.

Pasul 2

Fundalul din designul actual al site-ului dvs. poate fi setat nu după culoare, ci printr-o imagine. Atributul corespunzător al etichetei de corp se numește fundal și poate arăta astfel în cod: Aici, fundalul este imaginea bg.jpg

Pasul 3

Când descrieți aspectul paginilor cu un design relativ complex, utilizați „foi de stil în cascadă” - CSS (Cascading Style Sheets). Blocuri de cod CSS pot fi incluse direct în codul paginii sau conținute într-un fișier extern cu extensia „css”. Trebuie să căutați eticheta de descriere a stilului începând cu <stil în partea de antet a codului paginii (între etichete și). Dacă conține un link către un fișier extern, va arăta cam așa: @import "style.css"; Iată un link către o foaie de stil denumită style.css. Trebuie să deschideți fișierul specificat pentru editare. Și dacă nu există niciun link, iar după deschiderea <stil tag există instrucțiuni de stil, atunci trebuie să le editați aici. În ambele opțiuni, printre descrierile stilurilor, trebuie să le căutați pe cele legate de corpul documentului (corpul). Acest bloc de descrieri poate arăta astfel: body {

culoare de fundal: argintiu;

culoarea neagra;

} Aici trebuie să înlocuiți valoarea parametrului fundal-culoare cu valoarea noii dvs. culori și mai bine în aceleași valori hexazecimale. Opțiunea de imagine de fundal din instrucțiunile CSS ar trebui să arate astfel: body {

fundal: # C0C0C0 url (img / bg.jpg) repetare-y;

culoarea neagra;

} Aici linkul către imagine este similar cu cel discutat mai sus și # C0C0C0 înainte de link înseamnă că spațiul paginii care nu este ocupat de imaginea de fundal va avea un fundal argintiu. „Repeat-y” indică faptul că imaginea de fundal trebuie înmulțită de-a lungul axei Y (verticală).„Repeat-y” poate fi înlocuit cu „repeat-x” (replicare orizontală) sau „no-repeat” (nu reproduceți). Dacă nu specificați deloc repetarea, atunci imaginea de fundal va fi placată în spațiul de fundal al paginii în toate direcțiile.

Recomandat: