În browser, pagina va fi în continuare goală, dar structura documentului poate fi deja înțeleasă, este gata.

Setarea formatării de bază

Acum să trecem la stilul CSS pentru a da documentului un stil inițial.

Deschide stil.cssși adăugați liniile de cod pe care le vedeți mai jos.

Eliminați în mod implicit umplerea și marginile de pe pagină:

* (margine: 0px; umplutură: 0px;)

Setăm culorile legăturilor în funcție de comportamentul utilizatorului (plasați cursorul, nu plasați, vizitați) și eliminați sublinierea din legăturile de deasupra cărora se află indicatorul mouse-ului:

A: link (color: # D72020;) a: hover (text-decor: none; color: # FF0000;) a: Visit (color: # D72020;)

Configurăm designul principal al paginii: prescriem culoarea de fundal și imaginea de fundal (setăm umplutura orizontală pentru imagine), setăm culoarea, stilul și dimensiunea fontului:

Corp (fundal: # FFD723 url (images / back_all.jpg) repeat-x; font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif; culoare: # 333333;)

Definiția blocului de conținut:

#content (margin: 0 auto; background: #ffffff; width: 786px; text-align: left;)

Acum puteți actualiza pagina. Este umplut cu un model de fundal. Până în prezent, singura modificare vizibilă pentru care este responsabilă proprietatea este fundal clasă corp.

Proiectarea unui meniu orizontal

Există un început, iar acum puteți începe aspectul blocurilor principale direct.

Să începem, desigur, cu pălăria. Care, la rândul său, constă din meniuri orizontale și blocuri de sigle.

Mai întâi, să setăm stilul general pentru ambele elemente ale antetului: text aliniat la stânga, fundal alb și înălțime de 306 px:

#header (fundal: #ffffff; înălțime: 306px; text-align: left;)

Deci, am obținut un fel de spațiu pentru antet: un dreptunghi alb pe care vor fi amplasate elementele sale.

Ar fi logic să abordăm meniul orizontal chiar acum. Aceasta este ceea ce vom face, dar numai înainte de a-l insera în HTML, trebuie să pregătiți regulile CSS, altfel va arăta groaznic în browser.

Să facem primele ajustări: să setăm marginea stângă la 2 pixeli grosime, lățimea și înălțimea meniului nostru, precum și imaginea de fundal care se repetă de-a lungul axei X:

#meniu (border-left: 2px solid #ffffff; width: 779px; height: 80px; background: url (images / header_top.gif) repeat-x;)

Pagina din browser se va transforma imediat și va arăta astfel.

Acum puteți adăuga meniul în sine la fișier index.html:

Reîmprospătând pagina, puteți vedea că a apărut de fapt.

Numai tipul de legături lasă de dorit. Vom stabili propriile reguli pentru acestea (alinierea, lățimea, culoarea, îndrăzneala etc.), iar pe link-urile cu mouse-ul vom seta o schimbare de culoare și vom returna sublinierea eliminată din întregul șablon:

#meniu a (float: stânga; lățime: 99 px; înălțime: 46 px; afișare: bloc; alinierea textului: centru; decorarea textului: niciuna; culoare: #ffffff; greutatea fontului: aldin; dimensiunea fontului: 14 px; umplutura -top: 35px;) #menu a: hover (color: # D72020; text-decoration: underline;)

Formatarea meniului poate fi acum potrivită cu șablonul PSD.

Acordați atenție modului în care se modifică designul articolului dacă aduceți indicatorul la acesta (regulile sunt responsabile pentru acest lucru #menu a: hover).

Configurarea siglei

Avem deja sigla și se află în dosar, rămâne să o adăugăm la pagină și să o formatăm cu regulile. Ambele se pot face folosind CSS, lucru pe care nu vom ezita să îl facem.

#logo (fundal: #ffffff url (images / big_pic.jpg) fără repetare; lățime: 738px; înălțime: 146px; text-align: stânga; padding-top: 80px; padding-left: 40px; border-left: 4px solid #ffffff;)

Logo-ul este inserat exact în dimensiune.

Singurul lucru care îi lipsește este textul. Să introducem lipsa în bloc siglă fişier index.html pentru a-l obține:

Textul a apărut, dar trebuie formatat.

Pe baza faptului că o siglă este aproape întotdeauna o legătură, vom seta designul la clasele corespunzătoare.

#logo a (text-decoration: none; text-transform: minuscule; font-style: italic; font-size: 36px; color: #FFFFFF;) #logo h2 a (font-size: 24px;)

Nu este nevoie să explicați nimic aici, sunteți familiarizați cu toate proprietățile din lecțiile CSS. Cu toate acestea, aspectul textului s-a schimbat, iar antetul general arată acum chiar mai bine decât pe aspectul PSD.

Aranjați partea principală a paginii

Apoi, configurăm cel mai mare bloc pe care va fi plasat tot conținutul unic. Acesta va ocupa 500 px și va fi situat pe partea dreaptă a site-ului. Să stabilim regulile pentru poziționarea, stilarea titlurilor, paragrafelor și linkurilor (am vorbit deja despre toate proprietățile în articolele noastre CSS).

#right (float: right; width: 500px; padding-right: 10px;) #right h4 (margin: 0; padding: 0px; font-size: 12px; color: # D72020;) #right a (color: # D72020 ; text-decor: none;) #right p (margin: 0; padding: 0; padding-bottom: 10px;) #right h2 (margin: 0; padding: 0; padding-top: 10px; color: # D72020; )

Deoarece am fixat doar lățimea blocului, nu vor exista modificări vizibile până când nu îl vom umple cu conținut - înălțimea paginii se va schimba în funcție de conținut.

Umpleți recipientul dreapta... Vom așeza imaginile într-un tabel simplu.

Galerie

Bucătării

Conținutul a primit markup, dar îi lipsește în mod clar un fundal alb, care nu va apărea complet în curând.

Crearea panoului stâng

În timpul aspectului, dar după desenarea aspectului, sa dovedit că meniul lateral va avea în continuare sub-elemente și ar trebui să apară atunci când treceți cu mouse-ul peste elementul principal și să dispară atunci când nu există niciun indicator.

Situațiile în care trebuie să finalizați designul „din mers” sunt destul de frecvente. Distanța dintre meniu și conținutul principal ne permite să inserăm sub-elemente, dar trucul cu submeniurile care dispar și reapare este interesant.

Introduceți următorul cod în fișierul CSS.

#stânga (umplutură: 10px; lățime: 237px; umplere-dreapta: 1em;) # stânga h3 (lățime: 225px; înălțime: 25px; dimensiunea fontului: 14px; greutatea fontului: aldin; umplere-stânga: 15px; sus: 15 px; transformare text: majuscule; culoare: #ffffff; fundal: url (images / title.gif) fără repetare) # stânga ul (margine: 0; umplutură: 10 px; stil listă: niciunul; lățime: 100 px ; font-size: 18px;) #left li ul (poziție: absolută; stânga: 90px; top: 0; afișare: none;) #left ul li (poziție: relativă; margin-jos: 20px;) #left ul li a (display: block; text-decoration: none; color: #ffffcc; background: # ff9900; padding: 5px; border: 1px gold solid; border-bottom: 0;) #left li: hover ul (display: block; ) #left li li (margin-bottom: 0px; width: 150px;) #left p (padding: 10px; border-bottom: 1px solid # D72020; border-left: 1px solid # D72020; border-right: 1px solid # D72020;)

Acordați atenție regulilor clasei ulși li- secretul dispariției meniului este acolo, deschideți-l singur.

Mai întâi, adăugați un bloc de informații fără meniu în containerul din stânga al documentului HTML.

informație

Vă oferim reduceri de vacanță. Mai departe...

Meniul

Fundalul alb s-a răspândit în continuare în josul paginii.

Acum este momentul să lipiți codul meniului din panoul din stânga în fișierul HTML. Spre deosebire de navigarea de sus, este implementat în liste, care pot fi văzute din regulile CSS.

• Galerie
  • Bucătării
  • Paturi
  • Pereți
  • Holuri
  • Dulapuri
  • Mese pentru computer
• Contracta
• Preț
  • Bucătării
  • Paturi
  • Pereți
  • Holuri
  • Dulapuri
  • Mese pentru computer
• Mostre
  • Sticlă
  • PAL
  • Fitinguri
  • Etc.
• Contacte
• Important

Buna dragi cititori ai site-ului blogului. Sarcina noastră de astăzi este de a forma așa-numitul aspect al site-ului nu cu ajutorul (aspectului de ieri), ci cu ajutorul Elemente div... Acestea. va trebui să construim partea de sus (antet), partea de jos (subsol) și trei coloane pentru exemplul de pe divs.

Apropo, am rezolvat deja această problemă când i-am scris pr.

S-ar părea că nu merită repetat, dar nu am de gând să fac asta. Astăzi va fi descris unul fundamental diferit metoda de dispunere a site-uluiși, în paralel, vom lua în considerare scopul directivelor @import și @media(cu partea din față) în CSS pe care le-am studiat deja (la un nivel de bază, desigur).

Aspectul site-ului pe blocuri - aveți nevoie de el?

Mai mult, în acest moment am reușit deja să analizăm limbajul Html puțin câte puțin, bazându-ne pe sursa originală reprezentată de consorțiu. Cu toate acestea, cred că nu toată lumea a fost îmbibată de îndemnurile mele și s-a grăbit imediat să studieze și ea.

Și chiar te înțeleg parțial. Într-adevăr, cunoașterea acestor lucruri în sine nu vă va aduce nici faimă, nici bogăție, ci va lua doar mult timp care ar putea fi petrecut într-o activitate mult mai plăcută. La fel, a ști să folosești tacâmurile nu garantează că ai mâncare delicioasă pe masă. Cu toate acestea, la momentul potrivit, poate fi util și poate juca un rol important.

Acum zece sau doisprezece ani, eu însumi am decis să studiez Html din toate punctele de vedere, dar am rămas blocat chiar de la început, după părerea mea, și am pierdut rapid interesul pentru această idee, preferând un joc captivant unui alt shooter decât să-mi hărțuiesc creierul plictisitor. .

Da, da, cândva jocurile erau hobby-ul meu, dar acum site-ul a devenit acest hobby și am ocazia să pun în practică câteva dintre lucrurile pe care le-am descris cândva. Mai mult, prin analogie cu jocurile, suma de bani pe care am câștigat-o este încă percepută ca un fel de ochelari virtuali care arată cât de mult reușesc să merg înainte.

Se pare că acest lucru este deja ineradicabil, deși soția mea în ultimii ani și-a schimbat destul de radical atitudinea față de următorul meu hobby (păcat că ea va fi cea care va verifica acest articol pentru erori gramaticale, altfel aș descrie toate modificările care a avut loc mai detaliat), deoarece acest blog, contrar tuturor așteptărilor și îndoielilor sale inițiale, oferă un adevărat eșapament sub formă de facturi foșnitoare (citiți despre cum să materializați legal cifrele de pe ecran în cifrele din contul curent al unui antreprenor individual.

În general, această digresiune lirică nu a fost făcută întâmplător, deoarece vreau să spun că Html și CSS sunt cărămizi mici în construirea afacerii dvs. pe internet, dar deținerea și înțelegerea principiilor de dispunere a site-ului vor oferi o anumită cantitate de puncte înaintea celor care au neglijat aceste cunoștințe.

Succesul general al unui proiect web depinde adesea tocmai de astfel de lucruri mici, a căror investigare poate fi ușor (și adesea foarte plăcută) împinsă în colțul îndepărtat. Pur și simplu nu-mi amintesc un singur lucru - ce mi-a permis să trec peste acea barieră invizibilă, țesută de lenea și leneșitatea gândirii. Este posibil ca cărțile să coboare. Prin urmare, vă doresc și dvs. să depășiți această barieră, dar nu pot spune exact cum să o faceți.

Bine, să continuăm cu cei care nu s-au schimbat. Cum pot proiecta un aspect al site-ului folosind Divs și reguli de stil? Să vedem. Bineînțeles, vom simula activitatea acestui aspect pe computerul local, aruncând pur și simplu toate fișierele de care avem nevoie într-unul din folderele sale. Fără găzduire și. Acest lucru va fi de prisos pentru a înțelege principiile.

Deci, să trecem la aspect. Mai întâi, creăm și denumim un folder pentru a stoca fișierele viitorului nostru proiect web și apoi creăm un fișier text în interiorul acestuia cu extensia .html și indexul de nume. De asemenea, creăm un alt folder în acest folder, pe care îl numim CSS (fișierele noastre de stil externe vor locui în el).

Va fi posibil să adăugăm un alt folder în care vom arunca imaginile utilizate în aspectul site-ului, care va face parte din acesta (imagini de fundal). În prealabil, vă sfătuiesc să optimizați sau, cu alte cuvinte, la maxim.

Ei bine, acum copiați „peștele” de mai jos în index.html. Pentru lucrul cu cod, este destul de convenabil de utilizat, deși, dacă aveți abilitatea de a lucra, Dreamviewer se poate dovedi a fi o soluție mai funcțională:

La început, ca întotdeauna, ar trebui să meargă, al cărui scop este descris în modul cel mai detaliat în articolul dat pe link. În interiorul metaetichetei, indicăm interpretarea corectă a acestuia de către browser atunci când ne deschidem proiectul în el. Fiecare document trebuie să aibă un (titlul paginii) completat, așa că l-am adăugat la „pește”.

Este clar că site-ul este astfel, prin definiție, datorită apartenenței tuturor documentelor sale constitutive la un singur nume de domeniu, dar pentru vizitatori argumentul principal va fi proiectarea similară a paginilor sale web și acesta este ceea ce va trebui să luăm în considerare. cont la codificare.

Prin urmare, trebuie să avem un fișier de stil extern care va fi aplicat absolut tuturor paginilor. Dar, pe lângă aceasta, pot exista și fișiere CSS suplimentare care permit, de exemplu, diferite secțiuni ale unui proiect web să arate ușor diferit.

În consecință, depășirea coloanei din stânga sau din dreapta nu va determina o creștere proporțională a blocurilor cu ID vnutr și vnesh (elementele plutitoare nu afectează înălțimea părinților lor sau, cu alte cuvinte, containerele), ceea ce înseamnă că conținutul va fi accesat cu crawlere dintre limitele lor, intră în subsol și, în general, ies din aspectul limitelor. Necazul.

Dar avem un al patrulea element de bloc cu ID-ul podporka, care nu conține niciun conținut (și, prin urmare, nu va fi vizibil pe pagina web) și care este conceput special pentru a elimina acest incident. În codul obdhiy.css, vom scrie o regulă simplă pentru acest selector. Ca rezultat, blocul cu ID-ul podporka va dobândi o proprietate care ne este utilă - va lua în considerare orice element care pluteste în fața sa (adică, situat deasupra în cod).

Acea. când conținutul crește în coloana din dreapta sau din stânga, elementul cu ID-ul podporka va fi deplasat proporțional în jos și, din moment ce această etichetă nu mai este plutitoare, apoi blocurile cu ID vnutr și vnesh o vor lua în considerare și vor crește proporțional dimensiunea lor pe verticală:

Acum totul pare să funcționeze corect. Cu toate acestea, aspectul site-ului nostru nu este încă finalizat. Să presupunem că am realizat aspectul paginii principale în index.html în acest fel, dar pentru o altă secțiune vizualizarea aspectului va trebui să fie diferită(de exemplu, ar trebui să existe nu trei, ci doar două coloane). Cum să ieși din această situație?

Este clar că în acest scop va trebui să utilizați un fișier diferit de index.html. Pentru a face acest lucru, conținutul index.html poate fi copiat într-un fișier nou, de exemplu, razdel.html, deoarece rescrierea codului existent va fi mai ușoară decât rescrierea acestuia.

Ei bine, va trebui să folosim un fișier nou cu foi de stil în cascadă, de exemplu, razdel.css. În ele vom face modificări și, în același timp, vom vedea mai detaliat cum anume folosiți directiva @importîn astfel de cazuri.

Să începem cu razdel.html:

...

Am schimbat titlul paginii Titlu și am schimbat numele foii de stil incluse în razdel.css. În acest caz, desigur, va fi necesar să creați chiar acest fișier de marcare stil în folderul CSS. Îndrăznesc să vă reamintesc că pentru index.html am inclus marcarea stilului prin osnovnoy.css, care conținea o singură directivă @import pentru încărcarea regulilor din fișierul obdhiy.css:

@ import url (obdhiy.css);

Nu vom fi originali în kilometrul nostru inteligent și chiar la începutul unui nou fișier de stil (încă gol) vom scrie absolut aceeași directivă. Astfel, vom obține din nou un aspect cu trei coloane, cu toate acestea, după ce adăugăm doar câteva reguli puțin mai târziu, îl putem transforma cu ușurință într-un aspect cu două coloane. Nici măcar asta. Vom crea un alt fișier în folderul CSS numit dvekolonki.css și următorul conținut:

#right (display: none;) #center (margin-right: 0;) #vnesh (background-image: none;)

Ce am făcut? Am dezactivat afișarea coloanei din dreapta pe paginile web folosind. De asemenea, am eliminat marginea exterioară dreaptă pentru coloana centrală, deoarece nu mai este necesară. Ei bine, în cele din urmă, am interzis afișarea imaginii de fundal în aceeași coloană din dreapta. În general, am anihilat complet această coloană din dreapta în aspectul secțiunii noastre.

Ei bine, acum, pentru a finaliza aspectul aspectului cu două coloane, rămâne doar să conectați chiar acest dvekolonki.css în fișierul razdel.css, al cărui conținut final va arăta astfel:

@ import url (obdhiy.css); @import url (dvekolonki.css);

Toate regulile din codul de mai jos (de la dvekolonki.css) vor avea o prioritate mai mare, ceea ce înseamnă că le vom observa acțiunea pe pagina web. Ca urmare, când deschideți razdel.html, puteți vedea deja un aspect cu două coloane:

De fapt, sarcina noastră suplimentară a fost să luăm în considerare opțiunile folosind directiva @import în aspectul modern al site-ului despre care, cred, ne-am ocupat.

Acum rămâne să demonstrăm cum funcționează directiva @media, pe care am menționat-o la începutul articolului. Are o relație foarte indirectă cu aspectul, dar probabil ar fi miop să nu-l menționez.

Aspect aspect pentru imprimare utilizând directiva @media

Este posibil ca directiva @media să nu vă fie utilă, ci cititorilor dvs. care doresc să imprime o pagină web fără delicii grafice și informații inutile acolo. În acest caz, utilizatorii vor avea nevoie doar de conținut care se află în coloana centrală. Nu are nevoie de antet, subsol, coloane stânga și dreapta - doar textul articolului.

Când previzualizați tipărirea în oricare dintre browserele moderne, puteți, desigur, să dezactivați tipărirea în fundal, adică designul culorilor, dar browserul nu va putea întotdeauna să separe boabele (conținutul) de pleavă (navigare), așa că va trebui să-l ajutăm în acest sens, pentru a nu spera la întâmplare.

În plus, imprimarea va pierde principalul lucru care face Internetul atât de popular - capacitatea de a naviga prin hyperlinkuri către alte pagini. Pe hârtie, toate hyperlinkurile vor deveni complet neinformative dacă nu ai grijă de el în prealabil. Să adăugăm hyperlinkuri la aspectul nostru cu trei coloane și să vedem cum arată atunci când încercăm să imprimăm o pagină web.

Astfel, utilizatorul care tipărește o astfel de pagină web nu va ști niciodată ce blog este cel mai bun. Deci, să ne ocupăm nuanțe de aspect pentru imprimare, iar directiva @media deja menționată ne va ajuta în acest sens.

Există două moduri de a utiliza suportul media pentru a specifica la ce dispozitiv să aplicați aceste stiluri. Puteți specifica atributul media în eticheta Link, cu care sunt conectate fișierele de stil externe. Dar, în acest caz, browserul va face o cerere suplimentară către server, ceea ce nu este bun. Cu toate acestea, această metodă are dreptul la viață și această rușine va arăta cam așa:

Atributul media pot fi folosite și alte valori:

1. all - este utilizat în mod implicit și înseamnă că acest fișier de stil va trebui utilizat pentru absolut orice dispozitiv de ieșire
2. braille - cititoare de degete (pentru nevăzători sau cu deficiențe de vedere)
3. handheld - PDA-uri, smartphone-uri și alte fleacuri
4. imprimare - imprimante
5. ecran - ecrane ale monitoarelor utilizatorilor, pe care vor vedea site-ul dvs.
6. vorbire - browsere de vorbire
7. proiecție - proiectoare
8. tty - teletipuri și alte junk pe care nu puteți utiliza dimensiunea în pixeli
9. tv - televizor vechi bun

În exemplul de mai sus, noi, folosind atributul Media, am conectat un fișier de stil separat la documentul web pentru afișare pe monitor și unul separat pentru imprimare (print.css). Este exact ceea ce trebuie să implementăm în acest tutorial de aspect, dar ar fi mai bine să o facem într-un mod ușor diferit, folosind directiva @media scrisă în foaia de stil.

Dacă ați acordat atenție, atunci cu acest tip de aspect, pe care l-am ales (folosind @import), avem un fișier de stil comun, care este întotdeauna conectat prin aceeași directivă - obdhiy.css. În el vom începe să conjurăm.

@media are propria sintaxă:

@media screen, tv (un set de selectoare și reguli care vor fi executate numai dacă pagina web este afișată pe dispozitivele indicate chiar mai sus, separate prin virgule)

În fișierul nostru obdhiy.css, nu vom include toate regulile existente în directiva ecranului @media, este suficient la sfârșitul acesteia să adăugați doar regulile CSS necesare pentru imprimarea unui document folosind @media tipărită:

@media print (* (culoare: # 000! important; fundal: transparent! important;) html (font: 10pt serif;) #footer, #header, # left, #right (display: none;) #center (margin: 0;) a: after (content: "(" attr (href) ")";))

Dacă vă amintiți, selectorul * înseamnă aplicarea tuturor acestor reguli de stil pentru absolut toate elementele codului HTML. Este adevărat, un astfel de selector are cea mai mică prioritate posibilă, prin urmare, setând culoarea pentru toate elementele la negru, iar fundalul la transparent, folosind regulile de culoare și fundal, trebuie să evităm să numărăm prioritățile folosind setarea.

Pentru selectorul HTML, am înregistrat setarea fontului implicit, deoarece acest lucru este mai clar pentru imprimantă. Ei bine, fontul a fost setat la orice serif. Folosind display: none, am dezactivat afișarea kitului de caroserie (antet, subsol și coloane) și folosind marginea: 0, am permis conținutului din coloana din mijloc să ocupe tot spațiul disponibil în lățime.

Ultimul selector a: după complicat și, pentru a înțelege mai bine despre ce anume vorbește, vă sfătuiesc să treceți peste următoarele publicații despre () și. Dar avem nevoie de el pentru un scop destul de simplu - vezi pe hârtie exact unde duc hyperlinkurile.

Pseudo-elementul after permite generarea de conținut în timp ce browserul construiește documentul. After ne va permite să adăugăm adresa URL a hyperlinkului imediat după locul unde este atașat chiar acest link. Acest lucru se face folosind o regulă specială de conținut CSS care funcționează numai pentru două pseudo-elemente: după și înainte.

În interiorul regulii de conținut, scriem un spațiu și o paranteză deschisă între ghilimele, apoi adăugăm conținutul după spațiu.

Acest articol se va concentra pe site-urile pe care dezvoltatorii le creează manual, adică setează.

Articolul este destinat utilizatorilor familiarizați cu HTML și CSS ... De asemenea, este recomandabil să cunoașteți cel puțin elementele de bază Adobe Photoshop

Una dintre etapele creării unui site web real este crearea unui șablon PSD. De asemenea, puteți găsi nume precum aspect, design sau sursă.

Șablonul este comandat de la proiectant. Proiectantul desenează aspectul în Adobe Photoshop și îl salvează în format PSD.

Ce este formatul PSD?

Pentru o mai bună înțelegere, se poate da un exemplu simplu de viață. În copilărie, toată lumea lipea aplicații. Au tăiat o casă din hârtie și au lipit-o pe ea. Tăiați un pom de Crăciun - l-ați lipit. Și tot așa până când lucrarea este gata.

Și acum vă puteți imagina o situație în care figurile au fost tăiate, așezate pe o foaie în locurile potrivite, dar care nu au fost încă lipite. Deci, formatul de fișier PSD poate fi comparat cu o aplicație pe care cifrele nu au fost încă lipite, dar au fost aranjate în ordinea corectă.

Datorită acestui fapt, fiecare astfel de „figură”, sau mai bine zis fiecare fragment separat al șablonului, poate fi salvat ca o imagine separată, care poate fi apoi utilizată pe site.

Iată aspectul paginii care va fi creată.

După ce avem un șablon gata făcut în format PSD, putem merge direct la aspect

1. Creați un folder în care va fi stocat aspectul, de exemplu „Site”.
2. În folderul „Site”, creați un folder pentru imagini, de exemplu img.
3. În folderul „Site”, creați un folder pentru stiluri, de exemplu css.
4. Acum trebuie să lansați programul Adobe Photoshop și să deschideți fișierul psd din acesta. De aici este necesar să „scoatem” toate imaginile care vor fi folosite pe site.

Aici trebuie să acordați atenție butonului „Straturi”. În figură, este evidențiat cu un oval roșu.

Acest buton activează și dezactivează caseta de straturi. Straturile sunt aceleași părți non-lipite ale aplicației. Pentru comoditate, straturile sunt împărțite în foldere care pot fi restrânse și extinse. Principiul de funcționare este aproape același ca în Windows Explorer.

În primul rând, este mai bine să restrângeți toate folderele. Extindeți după cum este necesar.

Acum puteți începe să „scoateți” fotografii

Primul pas este să selectați instrumentul cadru. Apoi selectați doar partea care limitează sigla site-ului

Apoi apăsați tasta Enter. Totul, cu excepția zonei selectate, va fi întrerupt.

Acum puteți elimina fundalul. Pentru a face acest lucru, opriți stratul de fundal.

Pentru a găsi rapid straturile de care aveți nevoie, puteți face următoarele:

Aici stratul este denumit „Figura 2”. Făcând clic pe imaginea ochiului, stratul devine invizibil.

Cu toate acestea, există încă două straturi care trebuie oprite și ele. Acțiunile sunt similare.

Acum puteți salva. Pentru a face acest lucru, urmați acești pași

Alegeți dintre 4 opțiuni propuse și din a doua propusă. Extensie alege gif.

Nume de fișier logo.gif ... Salvați fișierul în dosar img ... Restul imaginilor ar trebui, de asemenea, să fie salvate acolo.

Puteți urma aceste principii:

• calitate fotografică - jpg
• calitate fotografică cu fundal transparent - png-8 , nu mi-a plăcut calitatea - png-24
• câteva culori în imagine - gif

Pentru a reveni la versiunea originală înainte de tăiere, trebuie să deschideți fereastra istoric

Faceți clic pe numele fișierului și setați scala corespunzătoare.

Alte imagini sunt salvate în același mod.

Același lucru este valabil și pentru imaginea labei care apare atunci când treceți cu mouse-ul peste un element de meniu

Restul imaginilor sunt opționale. Poate fi pe alb, poate fi pe transparent.

Aici ar trebui să alegeți foarte atent opțiunea de salvare, prin urmare, imaginile cu margini slab procesate nu sunt neobișnuite în sursele psd. Iată un exemplu:

Imaginea a fost salvată cu un fundal transparent. Cu toate acestea, atunci când este vizionat în negru, marginile slab procesate sunt vizibile. Dar atunci când utilizați un fundal deschis, este posibil ca acest defect să nu fie vizibil.

Pentru fundal, va trebui să decupați o mică imagine care va umple pagina ca o țiglă. Cu toate acestea, în acest exemplu, fundalul nu se repetă. Prin urmare, este mai bine să găsiți o imagine similară. Sau puteți încerca să-l ridicați decupând diferite fragmente din fundal.

Începutul aspectului. Înveliș. Antetul site-ului.

Aspectul va fi luat în considerare folosind HTML5 și CSS3.

În dosarul site-ului dvs., trebuie să creați un fișier HTML. De exemplu index.html.

În dosar css creați fișier stil.css .

În plus, în dosar css trebuie să puneți fișierul reset.css cu următorul cod

/ * v2.0 | 20110126 Licență: none (domeniu public) * / html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronim, adresă, mare, cită, cod, del, dfn, em, img, ins, kbd, q, s, samp, mic, grevă, puternic, sub, sup, tt, var, b, u, i, centru, dl, dt, dd, ol, ul, li, set de câmpuri, formă, etichetă, legendă, tabel, legendă, tbody, tfoot, thead, tr, th, td, articol, deoparte, pânză, detalii, încorporare, figură, figcaption, subsol, header, hgroup, meniu, nav, ieșire, rubin, secțiune, rezumat, timp, marcaj, audio, video (marjă: 0; umplere: 0; margine: 0; dimensiune font: 100%; font: moștenire; vertical-align: linie de bază ;) / * Resetarea rolului de afișare HTML5 pentru browsere mai vechi * / articol, deoparte, detalii, figcaption, figura, subsol, antet, hgroup, meniu, nav, secțiune (afișaj: bloc;) corp (înălțime linie: 1;) ol, ul (list-style: none;) blockquote, q (quotes: none;) blockquote: before, blockquote: after, q: before, q: after (content: ""; content: none;) table (border- colaps: colaps; borde spațiere r: 0; )

Ideea este că diferite browsere pot avea setări diferite pentru aceeași etichetă. Pentru a asigura compatibilitatea cross-browser, acestea trebuie resetate. Codul de mai sus a fost dezvoltat de Eric Mayer.

Primul in index.html ar trebui să scrieți etichetele principale.

Pentru etichetă în stiluri trebuie să setați fundalul.

După cum am menționat, fundalul nu se repetă aici. Prin urmare, ar fi mai rațional să alegeți una similară.

Corp (imagine de fundal: url (../ img / bg.gif);)

Acum trebuie să creați un wrapper de site - un bloc în care va fi plasat tot conținutul.

Aproape de închidere

identificatorul blocului este scris în comentarii. În timp etichetele

vor fi multe și poate apărea confuzie. Nu va fi clar unde div care este închis.

De asemenea, în interiorul blocului se află cuvântul wrapper. Este acolo temporar. Scopul este de a vedea blocul în timpul aspectului și de a-l distinge de restul. Din același motiv, blocului i se va oferi temporar un fundal deschis în stiluri.

Pentru a seta stiluri, trebuie să îi cunoașteți lățimea și marginile de sus și de jos. Pentru a măsura, puteți Adobe Photoshop Selectați instrumentul Rectangular Marquee pentru a selecta imaginea site-ului de la dreapta la marginea stângă. Înălțimea nu este importantă.

Lățimea poate fi văzută în fereastra „Informații”

S-a dovedit 964px.

În mod similar, numai înălțimea zonei selectate este importantă, și nu lățimea, marginile superioare și inferioare sunt măsurate.

S-a dovedit a fi 100 px în partea de sus și 85 px în partea de jos.

În acest fel, se determină orice distanță în sursă.

# wrapper (lățime: 964px; marginea-sus: 100px; marginea-dreapta: auto; marginea-jos: 85px; marginea-stânga: auto; fundal-culoare: # FF9;)

Marginile din dreapta și din stânga sunt setate la automat. Aceasta permite centrarea blocului.

Pagină:

În acest articol, vreau să abordez patru moduri diferite de a crea machete cu mai multe coloane. Fiecare metodă are propriile sale argumente pro și contra. Pentru a demonstra cum funcționează și arată aceste aspecte, am creat un site simplu care utilizează tabele HTML, proprietatea CSS float, un cadru CSS și flexbox.

Prima zi a unei noi vieți

În acest articol, folosim patru metode diferite de aspect al site-ului:

• Mese. Nici nu trebuie să utilizați o foaie de stil separată. Și mai important, nu se rup.
• Pluti. Vorbim despre o proprietate CSS. Acesta este un mod destul de obișnuit de a crea un aspect de pagină web. Și în acest caz, va trebui să folosim o foaie de stil separată. Fișierul HTML este utilizat numai pentru a defini conținutul unei pagini web. Dacă doriți să aliniați conținutul, trebuie să utilizați un fișier CSS.
• Cadrele CSS. Funcționează la fel ca Cadruri JavaScript... Includeți fișierul sursă în antet (de exemplu, ) și este gata de plecare! Nu este nevoie să setați singur valorile proprietății. Pentru aceasta sunt utilizate clasele pe care dezvoltatorii cadrului le-au pregătit pentru dvs.
• Flexbox. Flexbox este un nume scurt CSS Flexible Box Layout Module... Această tehnologie este mai nouă în comparație cu proprietatea float. Principiul de bază al flexbox-ului este de a oferi containerului posibilitatea de a modifica lățimea, înălțimea și ordinea elementelor pe care le conține. Dacă doriți să completați tot spațiul liber în cel mai bun mod posibil, trebuie să utilizați flexbox pentru divizarea aspectelor. De exemplu, pentru a acoperi toate tipurile de dispozitive și dimensiunile ecranului. Un container plutitor va extinde articolele conținute pentru a umple întregul ecran.

Acum este momentul să încerci fiecare dintre ele.

Metode de creație

Acesta este designul site-ului meu:

Mese

Pentru a crea antetul site-ului, am folosit poziția: proprietate relativă. Să încercăm să o facem de la zero folosind un aspect de tabel.

Iată codul meu HTML:

			Cinematron
	ACASĂ	PREMIERI	BOX OFFICE	FOTOGRAFII

Și asta am primit:

După cum puteți vedea, nu este aceeași pălărie. Pare familiară, dar poziția ei s-a schimbat ușor. Si de aceea. Știți că tabelele sunt excelente pentru poziționarea simetrică. Dar în alte scopuri, ele nu sunt atât de potrivite. Rețineți, de asemenea, cât de greoaie este codul. Dar tabelele au o caracteristică utilă. Iată un truc pe care îl putem face:

tabel, td (border-colaps: colaps; border: 1px roșu continuu;)

Și veți vedea că aspectul arată astfel:

Astfel, puteți determina cu ușurință unde este, dacă vă confundați.

Acum, pentru veștile proaste. Aruncați o altă privire asupra codului HTML. Acesta este un tabel simplu, dar imaginați-vă cum ar arăta cu zeci de celule. Iată codul sursă pe care îl am:

Cinematron

Toate lucrurile pe care trebuie să le știți despre filme

• Acasă
• premiere
• box office
• fotografii

Și fișierul CSS:

#header (înălțime: 230px; background-image: url (../ images / header1.jpg); background-repeat: no-repeat; font-family: "Shift", sans-serif;) #header h2 (font- dimensiune: 4em; poziție: relativă; sus: 30px; stânga: 550px; afișare: în linie;) # header p (font-size: 1.3em; font-weight: bold; position: relative; top: 50px; left: 60px; display: inline) #menu (position: relative; top: 100px; left: 340px; display: inline-block;) #menu li (font-weight: bold; display: inline; text-transform: uppercase; margin-right: 14px;) #meniu de intrare (font-size: 0.7em; text-transform: minuscule; text-align: dreapta; poziție: relativă; top: -4px;)

În acest caz, trebuie să utilizați un aspect de site bazat pe blocuri utilizând CSS. Aplicând așa ceva:

div (poziție: relativă; sus: 100px; stânga: 100px;)

Indicați să vă mișcați

100 pixeli în jos și 100 pixeli în dreapta poziției sale inițiale. Aceste proprietăți facilitează mutarea textului pe pagină. Puteți să-l mutați dintr-un colț în altul pentru a determina ce poziție este cea mai bună. E mai bine decât o masă.

Pluti

Proprietatea float este utilizată pe scară largă în aspectul site-ului bazat pe blocuri. Vom folosi această proprietate pentru a afișa zona principală de conținut. Un mic exemplu vă va ajuta să înțelegeți mai bine cum funcționează:

Are trei elemente colorate diferite

... Verde pentru articolele principale, roșu pentru articolele de știri și albastru pentru subsol.

Iată fișierul CSS:

#verde (lățime: 200px; înălțime: 200px; margine: 1px verde solid; float: stânga; margine: 5px;) # roșu (lățime: 100px; înălțime: 200px; margine: 1px roșu continuu; margine: 5px; plutitor: stânga ;) # albastru (lățime: 310 px; înălțime: 100 px; chenar: 1 px albastru solid; margine: 5 px; clar: ambele;)

Iată ce avem:

Când vă așezați în straturi, specificați prin proprietatea float căreia doriți elementul dvs.

plutea. Apoi setați direcția de compensare pentru aceasta. Acesta este de obicei float: stânga sau float: dreapta. Când indicați un element

deplasați-vă spre stânga, el va face acest lucru până când spațiul liber se va epuiza.

Următorul flotor se va deplasa până îl întâlnește pe primul și așa mai departe. Elementul de lângă elementul plutitor va curge în jurul lui ca apa! Dar dacă nu doriți să vă trimiteți toate obiectele „la apă”, puteți utiliza proprietatea clear. Determină care părți ale unui element nu trebuie să curgă în jurul elementelor plutitoare.

Așa arată o parte din aspectul meu pentru conținutul principal:

Antetul primului articol

Primul articol corp Citiți mai multe

Al doilea antet de articol

Al doilea articol al corpului Citiți mai multe

Primul antet al articolului de știri

Corpul primului articol de știri

Al doilea antet al articolului de știri

Al doilea corp al articolului de știri

Acum să-l facem să plutească:

# main-content (lățime: 780px; float: stânga;) #news (margin-stânga: 20px; float: stânga; lățime: 180px;)

Avem un bloc mare pentru articole și un bloc mai mic pentru știri. Am folosit proprietatea float: left și pentru imagini. Observați cum eticheta se înfășoară în jurul lor. Acest aspect arată ca revista ta preferată.

Cadrele CSS

Dacă ești puțin leneș

Dacă nu aveți timp să vă deranjați cu aspectul CSS, puteți utiliza unul dintre cadrele CSS. În exemplul nostru, folosim Bootstrap. Pentru a face acest lucru, trebuie să îl descărcați și să îl includeți într-un fișier HTML.

Bootstrap conține o grilă care constă din 12 coloane de dimensiuni egale. Elementele HTML sunt ordonate să cuprindă un număr diferit de coloane. În acest fel, sunt create machete personalizate. Fiecare conținut este aliniat la această grilă prin numărul specificat de coloane pentru ao întinde.

Iată un exemplu:

În acest exemplu, am creat un șir. După aceea, am așezat două coloane de dimensiuni egale în ea. Fiecare dintre ele acoperă șase din cele douăsprezece coloane disponibile.

Cod HTML:

In curand:

Și asta am primit:

Arata bine. Și atunci când codificați un site web din PSD, nici nu trebuie să editați fișierul CSS. Dar nu vezi ce se întâmplă înăuntru.

Flexbox

Clasicii de mâine

Vom folosi flexbox pentru a crea secțiunea „Box Office” a site-ului. Iată codul HTML:

• Cenușăreasa: 67,9 milioane de dolari
• Rulați toată noaptea: 11,0 milioane USD
• Kingsman: Serviciul secret: 6,2 milioane de dolari
• Focus: 5,7 milioane USD
• Chappie: 5,7 milioane de dolari
• McFarland SUA: 3,6 milioane USD
• DUFF: 2,9 milioane de dolari
• Lunetist american: 2,8 milioane de dolari

Iată CSS pentru containerul boxoffice:

#boxoffice (lățime: 780px; înălțime: 500px; background-image: url (../ images / box_office_cropped.jpg); background-repeat: cover; border-radius: 5px; padding: 20px;)

Acum este timpul să creați un container flexibil. Pentru a face acest lucru, trebuie să setați afișajul: flex pentru element. Conform regulilor de dispunere, toate elementele flexbox sunt situate de-a lungul axelor principale și transversale:

Pentru flexbox, există două tipuri de proprietăți. Primul este utilizat pentru a controla containerul flex, al doilea este utilizat pentru a umple articolele flexibile. Să luăm în considerare primul tip în detaliu.

În mod implicit, axa principală este orizontală, astfel încât elementele se vor întinde la rând. Putem utiliza proprietatea flex-direction pentru a schimba axa principală. Poate lua următoarele valori: rând, rând-invers, coloană și coloană-invers. Vom folosi coloana valoare. Să adăugăm și o proprietate de înălțime. Pentru ce este acest lucru, veți înțelege puțin mai târziu:

container flexibil (înălțime: 300 px; afișaj: flex; direcție flexibilă: coloană;)

Așa arată micul nostru box-office:

Am folosit proprietatea înălțime, deoarece nu vrem ca containerul flexbox să se suprapună peste imaginea săgeții din partea de jos a fundalului.

Flexbox vă oferă, de asemenea, posibilitatea de a face modificări de conținut fără a modifica fișierul HTML. De exemplu, dacă doriți să inversați aspectul articolelor, puteți schimba direcția flexibilă în coloane-invers. Aceasta va inversa direcția flexboxului. Dar va trebui, de asemenea, să schimbați ordinea articolelor din interiorul containerului.

Pentru aceasta folosim proprietatea justify-content. Valorile disponibile pentru acesta sunt flex-start, flex-end, center, space-between și space-around. Trebuie setat pentru a justifica conținutul, care este echivalent cu flex-end.

Iată codul nostru:

Container flexibil (înălțime: 300 px; afișaj: flexibil; direcție flexibilă: coloană inversă; conținut justificat: capăt flexibil;)

Iată cum s-au reflectat aceste schimbări:

De asemenea, puteți muta elemente de-a lungul axei transversale. Proprietatea align-items este utilizată pentru aceasta. Îl puteți seta la următoarele valori: flex-start, flex-end, centru, linie de bază sau stretch.

Pentru ao utiliza, adăugați o proprietate la selectorul dvs. flexbox:

Container flexibil (aliniați elementele: capăt flexibil;)

Toate elementele se vor deplasa la marginea din dreapta:

O altă proprietate utilă este flex-wrap. Imaginați-vă că un box office crește rapid. Ce se întâmplă dacă devine mai mare decât containerul? Nimic în neregulă cu utilizarea proprietății flex-wrap.

Încercați să adăugați următorul cod.

Elemente de aspect HTML

Site-urile afișează adesea conținut în mai multe coloane (cum ar fi o revistă sau un ziar).

Specificația HTML5 propune noi elemente semantice care definesc diferite părți ale unei pagini web:

Aspecte HTML

Există patru moduri diferite de a crea machete cu mai multe coloane. Fiecare metodă are propriile argumente pro și contra:

• Model de tabel HTML
• Modelul CSS float
• Model cadru CSS
• Modelul flexbox CSS

Pe care să alegi?

Model de tabel HTML

Element

nu a fost conceput pentru instrumentul de aspect! Sarcina articolului afișați date tabulare. Deci, mai bine, nu este nevoie să utilizați tabele pentru a vă așeza aspectul! Îți vor încurca codul. Și imaginați-vă cât de dificil va fi să vă reconstruiți site-ul în câteva luni.

Sfat: Nu utilizați tabele pentru a vă marca aspectul!

Model cadru CSS

Dacă doriți să vă construiți rapid aspectul, puteți utiliza un cadru precum W3.CSS sau Bootstrap.

Modelul CSS float

Este obișnuit să redați machete web întregi utilizând proprietățile CSS float.

Flotorul este ușor de învățat - trebuie doar să vă amintiți cum funcționează flotantul și proprietățile clare. Dezavantaje: elementele plutitoare sunt legate de fluxul de lucru, ceea ce poate afecta flexibilitatea.

Exemplu de aspect plutitor

Galeria orașului

Londra

Londra este capitala Angliei. Este cel mai populat oraș din Regatul Unit, cu peste 13 milioane de suburbii.

Situată pe malurile râului Tamisa, Londra a fost o așezare majoră timp de două milenii, cu o istorie care datează de la întemeierea sa de către romanii care au numit-o Londinium.

Ți-a plăcut articolul? Împărtășește-l

Articole conexe recomandate

Internetul prin satelit gratuit este un mit sau o realitate?

Cum se elimină complet Mozilla Firefox de pe computer?

Cine a inventat telefonul și în ce an?

Vizitatorii discută acum

Modalități de a găsi informații pe web Android

Construcția Belomorkanal: istorie, termeni, descriere Erori

Marea Albă-Canalul Baltic Personalizare

Trimiterea unei cereri de apel înapoi (cerșetori) de la megafon Cum să trimit Aștept un apel de la un megafon Televizoare LG