Etapele de aspectul site-ului - aspect pas cu pas

cap de locuri de muncă

De ce să lucrați capul? Înainte de a trece la aspectul, aveți nevoie pentru a analiza structura existentă. De exemplu, este posibil să se bazeze pe o foaie de caiet structurii sale, să se gândească imediat, prin care proprietăți pot face o astfel de rețea, care este reprezentat de un designer. În pași simpli aspectul site-ului poate fi împărțit în trei părți.

Acesta este primul pas. judecata pas. Ai nevoie pentru a înțelege modul de abordare a aspectul general al aspectului particular. În mintea mea ești deja construiți acțiuni care va continua.

Lucrul cu aspect

Când se taie toate grafica, va trebui să fie pliat într-un dosar. Denumit în mod obișnuit ca imagini. De fapt, acum sunteți gata să pentru a începe aspectul. Prima etapă de gândire vă va permite să-și imagineze gândurile un plan pe care le va fi ghidat.

HTML5 și CSS3 practica de la zero la rezultatul!

Fig. 1. Lucrul cu layout-ul.

Apoi începe lucrul cu conținutul imediat. Asta e tot ce va fi în tag-ul. Ar trebui să înceapă de la stânga sus se deplasează spre dreapta jos. Aceasta este, în primul rând ați descrie antetul (partea stângă și apoi dreapta), apoi de mai jos descriu partea structurală și, astfel, se transferă treptat codul de aspect.

Aceasta nu este o regulă obligatorie. Puteți impune mai întâi bara laterală dreapta, și apoi conținutul, și apoi altceva. Cele de mai sus este doar un consiliu care este complet logic din punct de vedere al bunului simț.

În primul rând, structura coder scrie HTML. În același timp, el atârnă doar clase de elemente și ID-uri pentru a le stiliza mai târziu, în css. coder normal trebuie să vină cu nume de clasă corespunzătoare. De exemplu, meniu, cap, widget, și altele asemenea Pentru a face clar ce fel de element de.

De exemplu, atunci când am început, codul meu ar amuza probabil cineva. Acesta a fost urmat de astfel de nume de clasă ca: verh_sayta, konec și Bok. Desigur, e mai bine decât block1, block3, block459, dar se pare ca ceva neprofesional si nu este clar despre ce anume elementul în cauză.

HTML5 și CSS3 practica de la zero la rezultatul!

stilizare

Structura este scrisă, ID-uri și sunt date clase. Acest lucru înseamnă că puteți începe să utilizați CSS. Aș spune chiar că nu neapărat prescrie pe deplin structura și numai apoi atinge stiluri. Aceasta ar putea și ar trebui să funcționeze în paralel. La un moment dat ați terminat complet structura și este în totalitate axat pe stilurile. (Sau poate nu, totul depinde de cât de bine totul va scrie inițial).

procesa în continuare aspectul site-ului va fi în principal cu ajutorul css-fișier, în care trebuie să scrie proprietățile și regulile necesare. Cât timp poate dura acest timp? Depinde de profesionalismul tau. Am văzut oameni care au o oră, pentru a typeset un odnostranichnik decent. Cu toate acestea, el a fost receptiv și a avut efecte animate. Un profesionist poate impune o simplă pagină de 20 de minute.

Acest lucru este posibil dacă utilizați maxim soluțiile gata făcute. De exemplu, în cadrul, toate au fost Procesul de Bootstrap de mult stil, trebuie doar să adăugați clasele de stil necesare pentru elementul tau.

Styling este, de asemenea, să fie efectuate în ordine. Mai întâi trebuie să vă înregistrați câteva reguli generale. De exemplu, fondul general al paginii, fontul de bază. Nu uitați să resetați marginile.

În continuare, prescris mai multe proprietăți specifice. rame de culori, stiluri pentru bara laterală, subsol, logo-ul, locația și mult mai mult - aceasta este așa-numita a doua fază a stilul, atunci când lucrați cu fiecare unitate în parte.

De exemplu, vă decideți să scrie stiluri pentru pălării. Așa că le scrie la sfârșitul anului, nu a comuta la alte elemente! La sfârșitul css-fișierului este de obicei prescris interogări media (pentru adaptabilitate dacă este necesar). Acesta poate fi, de asemenea, conectat aici fonturi și descrise diverse efecte, care pot fi apoi aplicate la blocuri prin specificarea unei clase de stil.

Aici trebuie să știți ce sarcini de care avem nevoie pentru a efectua cu script-uri. Dacă site-ul dvs. are foarte puține script-uri web, aveți nevoie pentru a minimiza bibliotecile de cod care nu utilizează bucăți uriașe de cod pentru punerea în aplicare a unei perechi de lucruri utile.

Presupun aspectul dvs. este gata. Rămâne să-l verifice. Firește, prima dată este imposibil de a face totul, deci sigur că nu doar deschide fișierele pentru editare. Este demn de a verifica aspectul în toate browserele pe care le au. Puteți utiliza serviciile online. De asemenea, este util să se utilizeze instrumentele necesare pentru test care sunt oferite în acest articol.

Fig. 2. validatori aspect de W3C.

Faptul că există diferite tipuri de aspectul site-ului, astfel încât secvența dată în articol este potrivit pentru cele mai populare tehnologii - bloc. Dacă aveți tabele pentru layout, va avea mai mult de cositori cu html-structura. Am analizat principalele etape ale aspectul site-ului. Dacă doriți să aflați mai multe, asigurați-vă că vă abonați la blog.

HTML5 și CSS3 practica de la zero la rezultatul!

Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram