De obicei, care începe procesul de aspect? Începe cu studiul layout-ului sau a layout-urilor site-ului viitor. Cel mai adesea, aceste modele sunt create într-un program de Adobe Photoshop, astfel încât să, ca coder ar trebui să poată utiliza acest program, și anume, să fie în măsură să taie din imaginea de layout, măsurarea adâncitura dintre elementele pentru a calcula dimensiunea și parametrii diferitelor componente ale viitoarelor pagini web, etc. Mai întâi, să facem ajustarea spațiului de lucru în Adobe Photoshop pentru comoditate.
Personalizați spațiul de lucru în Adobe Photoshop
Toate exemplele vor fi afișate în Adobe Photoshop CS5. cu o interfață în limba engleză.
Deschideți programul Adobe Photoshop, veți vedea ceva de genul:
- Linia de meniu principală;
- Parametri;
- Bara de instrumente;
- Panouri suplimentare.
Trebuie să configurați un set de panouri suplimentare. Mergeți mai întâi la meniul ferestrei - New Workspace:
Introduceți un nume pentru noul spațiu de lucru, de exemplu, spațiul meu de lucru. și faceți clic pe Salvați. Acum trebuie să selectăm panourile necesare pentru lucru. Mergem în fereastră și punem o bifă în fața Istoriei. Info. Straturi. Navigator. Opțiuni. Instrumente. Din restul panourilor puteți debifa casetele dacă sunt instalate.
Acum trebuie să reparăm aceste panouri. Pentru a face acest lucru, faceți clic pe partea de sus a panoului și trageți-l în locația dorită, astfel încât în final spațiul dvs. de lucru să arate astfel:
Când apare o bandă transparentă albastră, eliberați cursorul pentru a fixa panoul în această locație:
Pentru a închide filele inutile, faceți clic pe pictograma din colțul din dreapta sus al filei și din meniul derulant selectați opțiunea Închidere:
Primul aspect pe care îl vom scrie cu dvs. se numește simple_text.psd. acesta este localizat în dosarul templates. Deschideți-o în Adobe Photoshop, ținând apăsate tastele Ctrl + O (sau prin meniul File - Open) și selectați fișierul.
Porniți rigla folosind tastele rapide Ctrl + R sau prin meniul View - Rulers:
Acum faceți dublu clic pe riglă și deschideți fila Unități Riglele. pentru a regla unitățile. Selectați în blocul Unități pentru categoriile de conducători și tip de pixeli:
Acum totul este gata, puteți începe să faceți un aspect.
Crearea unei structuri de pagină Web
Creați un dosar pe desktop și denumiți textul simplu. În acest director, creați două fișiere, index.html și style.css.
Pe măsură ce vă amintiți structura paginii web create în HTML. Prin urmare, deschideți mai întâi fișierul index.html. și scrieți în el codul original:
Acum, între etichete
creați un bloc utilizând eticheta :etichetă
Să scriem în acest bloc elementele prezente în layout, și anume titlul și paragrafele:
Adăugați un text între aceste etichete.
Acum, în recipient
specificați calea către fișierul cu stiluri:Modelarea unei pagini web
Dacă deschideți index.html în browserul dvs., veți vedea o pagină web scrisă în HTML pur. Este foarte diferit de cel descris în plan. Vom corecta acest lucru cu foi de stil în cascadă.
Deschideți fișierul stil.css și resetați toate indentările folosind selectorul universal de stele:
Acum, să scriem proprietățile etichetei
:Cum știu culoarea de fundal a unei pagini web în Adobe Photoshop? Pentru a face acest lucru, faceți clic pe una din cele două casete cu culoarea:
Apoi dați clic pe meniul derulant din fundal al planului și copiați codul hexaj reprezentat în fereastra Color Picker:
Cum știți dimensiunea, distanța dintre linii, stilul fontului, familia fontului și culoarea textului? Pentru aceasta, selectați stratul de text, apoi deschideți panoul Caracter. În acest panou sunt afișate următoarele opțiuni:
Rețineți că pentru culoarea textului, în loc de codul hexazecimal, am notat numele nuanței: culoare: alb; Numele nuanțelor sunt convenabile pentru alb-negru alb și negru. deoarece numele este scris mai repede decât codul hexazecimal. Toate denumirile nuanțelor de culori pot fi văzute în acest tabel.
Proprietăți pentru bloc
Pentru acest bloc, specificăm lățimea, precum și indicele din partea de sus, din stânga și din dreapta:
Pentru multe proprietăți, veți vedea o înregistrare a valorilor în variantele următoare:
În primul caz, specificăm valorile pentru fiecare dintre cele patru laturi, de exemplu marja: 10px 12px 20px 15px; 10px - liniuță de sus, 12px - liniuță spre dreapta, 20px - liniuță dedesubt, 15px - liniuță spre stânga. Această înregistrare este folosită de obicei atunci când indicele de pe fiecare parte este diferit.
În cel de-al doilea caz, se înregistrează trei valori, de exemplu marja: 10px 12px 20px; 10px - liniuță de sus, indent la dreapta și stânga pe 12px, 20px - liniuță de dedesubt. O astfel de înregistrare este convenabilă atunci când valorile din dreapta și din stânga sunt egale, iar valorile din partea de sus și de jos sunt diferite. Valoarea automată este utilizată atunci când este necesar ca browserul să calculeze automat liniuțele din stânga și din dreapta.
În cel de-al treilea caz, se folosesc două valori, de exemplu marja: 10px 12px; o indentare de sus și de jos pe 10px, o liniuță pe dreapta și pe stânga pe 12px. Dacă indenturile sunt egale și superioare și egale una cu cealaltă, indentarea este dreaptă și stângă, este convenabil să scrieți doar două valori, ca în exemplul nostru.
În al patrulea caz, o valoare este scrisă, de exemplu, marja: 10px; Marja pe fiecare parte este de 10 pixeli. Atunci când parametrii de pe toate părțile sunt egali, este convenabil să se folosească doar o astfel de înregistrare.
Cum se măsoară lățimea sau înălțimea unui element în Adobe Photoshop? Luați în considerare unul dintre modurile: luați instrumentul de marcaj dreptunghiular (hotkey M).
Apoi, selectați zona, de exemplu, trebuie să găsim linia din marginea superioară a aspectului înainte de începerea conținutului, selectați-o:
În panoul Informații, uitați-vă la înălțimea lui H. sau la lățimea lui W. dacă trebuie să cunoașteți lățimea elementului:
Să trecem la titlu
Aici trebuie să specificăm mărimea, spațierea liniei, umbra și indentarea de dedesubt. Cum să prescrieți primele două proprietăți pe care le cunoașteți deja.
Pentru a specifica o umbră, avem nevoie de proprietatea umbră text:
- Aici 0 este indentarea de-a lungul axei X;
- 1px - liniuță pe axa Y;
- 0 este raza de estompare a umbrei;
- rgba (0,0,0,0,3) - culoarea umbrei. În acest caz, folosim formatul RGBA, care include un canal alfa, care specifică transparența elementului. În paranteze, primele trei valori sunt responsabile pentru culoarea în format rgb. iar cea de-a doua valoare este responsabilă pentru transparență. Această valoare este scrisă în intervalul de la 0 la 1, unde 0 corespunde transparenței totale și 1 - opacității.
Cum știu setările de umbră din Adobe Photoshop? Selectați stratul dorit din panoul straturilor și faceți clic pe pictograma ƒx:
Se deschide fereastra Layer Style. În acesta, selectați fila Drop Shadow:
Parametrul Există Opacitatea este responsabil pentru transparență, parametrul Distanța determină adâncitura de pe axa Y parametru Dimensiune responsabil pentru estomparea, și este responsabil pentru stabilirea unghiului indentare pe axa X. Deoarece umbra noastră cade în unghiuri drepte, apoi aliniate cu axa X este zero. Culoarea umbrei poate fi găsită în pătratul opus parametrului Blend Mode:
Valoarea culorii în format RGB și cu canalul alfa în acest caz va arăta astfel:
Rămâne să înregistrați indentarea de dedesubt.
Dacă trebuie să scrieți o valoare pentru una din cele patru laturi, utilizați această intrare:
Deoarece trebuie să specificăm o liniuță de mai jos, vom scrie margin-bottom: 30px;
Ca rezultat, obținem acest cod în fișierul style.css:
Primul paragraf. Selectorii vecinilor
Să scriem proprietățile pentru primul paragraf:
Acum, dacă salvați modificările și deschideți fișierul index.html în browser, veți vedea că aceste proprietăți se aplică tuturor paragrafelor din pagină. Deoarece trebuie să scriem aceste proprietăți doar pentru primul paragraf, atunci în acest caz putem folosi selectorii vecini. Ce este? În șablonul html, etichetele
și
(vom lua primul paragraf) mergeți unul după altul, ceea ce înseamnă că ele sunt tag-uri vecine, în selectorii css vecini sunt scrise astfel:
Acum, aceste proprietăți se vor aplica numai primului paragraf.
Ultimul paragraf. Clase în CSS
Acum, să trecem la ultimul paragraf. Deoarece este de asemenea diferit de textul principal, atunci pentru el vom specifica o clasă. În șablonul html, scrieți ultimul atribut al ultimului paragraf cu valoarea ultima-p. Numele clasei, precum și identificatorul, trebuie să înceapă cu literele alfabetului latin:
În clasele CSS sunt redactate astfel:
Aceste proprietăți vor funcționa numai pentru ultimul paragraf din șablonul nostru.
Spre deosebire de identificatori, puteți folosi o clasă cu o anumită valoare pe pagină de câte ori doriți.
Proprietatea de aliniere a textului cu valoarea corectă este utilizată atunci când doriți să aliniați textul la dreapta. De asemenea, puteți utiliza alte valori, de exemplu, text-align: center; în acest caz, textul va fi aliniat la centrul blocului.
Alte paragrafe
Pentru restul paragrafelor, vom scrie următoarea proprietate:
Alte proprietăți: culoarea, familia fontului, mărimea, spațierea liniei, această etichetă va moșteni de la elementul părinte, adică etichetă
.
Dacă vom micșora fereastra browserului, vom vedea că conținutul este atașat în părțile laterale ale ferestrei. Pentru a rezolva acest lucru, adăugați pentru indentarea internă selector div:
Gruparea selectorilor
În cazul în care mai multe elemente de pagini web conțin aceleași proprietăți cu aceleași valori, cum ar fi în exemplul nostru, titlul și ultimul paragraf au în comun - este umbra, puteți grupa în selectorii, scriindu-le separate prin virgulă:
Nu uitați să eliminați proprietățile din elementele individuale, în cazul nostru, trebuie să eliminați umbra din selectorii h1 și p.last-p.
Articole similare
-
-
Prezentare pentru o lecție despre buchete de dulciuri, descărcare gratuită, rețea socială
-
Schița lecției pe substantivul subiect ca parte a discursului, descărcare gratuită, rețea socială
Trimiteți-le prietenilor:
Pentru acest bloc, specificăm lățimea, precum și indicele din partea de sus, din stânga și din dreapta:
Pentru multe proprietăți, veți vedea o înregistrare a valorilor în variantele următoare:
În primul caz, specificăm valorile pentru fiecare dintre cele patru laturi, de exemplu marja: 10px 12px 20px 15px; 10px - liniuță de sus, 12px - liniuță spre dreapta, 20px - liniuță dedesubt, 15px - liniuță spre stânga. Această înregistrare este folosită de obicei atunci când indicele de pe fiecare parte este diferit.
În cel de-al doilea caz, se înregistrează trei valori, de exemplu marja: 10px 12px 20px; 10px - liniuță de sus, indent la dreapta și stânga pe 12px, 20px - liniuță de dedesubt. O astfel de înregistrare este convenabilă atunci când valorile din dreapta și din stânga sunt egale, iar valorile din partea de sus și de jos sunt diferite. Valoarea automată este utilizată atunci când este necesar ca browserul să calculeze automat liniuțele din stânga și din dreapta.
În cel de-al treilea caz, se folosesc două valori, de exemplu marja: 10px 12px; o indentare de sus și de jos pe 10px, o liniuță pe dreapta și pe stânga pe 12px. Dacă indenturile sunt egale și superioare și egale una cu cealaltă, indentarea este dreaptă și stângă, este convenabil să scrieți doar două valori, ca în exemplul nostru.
În al patrulea caz, o valoare este scrisă, de exemplu, marja: 10px; Marja pe fiecare parte este de 10 pixeli. Atunci când parametrii de pe toate părțile sunt egali, este convenabil să se folosească doar o astfel de înregistrare.
Cum se măsoară lățimea sau înălțimea unui element în Adobe Photoshop? Luați în considerare unul dintre modurile: luați instrumentul de marcaj dreptunghiular (hotkey M).
Apoi, selectați zona, de exemplu, trebuie să găsim linia din marginea superioară a aspectului înainte de începerea conținutului, selectați-o:
În panoul Informații, uitați-vă la înălțimea lui H. sau la lățimea lui W. dacă trebuie să cunoașteți lățimea elementului:
Să trecem la titlu
Aici trebuie să specificăm mărimea, spațierea liniei, umbra și indentarea de dedesubt. Cum să prescrieți primele două proprietăți pe care le cunoașteți deja.
Pentru a specifica o umbră, avem nevoie de proprietatea umbră text:
- Aici 0 este indentarea de-a lungul axei X;
- 1px - liniuță pe axa Y;
- 0 este raza de estompare a umbrei;
- rgba (0,0,0,0,3) - culoarea umbrei. În acest caz, folosim formatul RGBA, care include un canal alfa, care specifică transparența elementului. În paranteze, primele trei valori sunt responsabile pentru culoarea în format rgb. iar cea de-a doua valoare este responsabilă pentru transparență. Această valoare este scrisă în intervalul de la 0 la 1, unde 0 corespunde transparenței totale și 1 - opacității.
Cum știu setările de umbră din Adobe Photoshop? Selectați stratul dorit din panoul straturilor și faceți clic pe pictograma ƒx:
Se deschide fereastra Layer Style. În acesta, selectați fila Drop Shadow:
Parametrul Există Opacitatea este responsabil pentru transparență, parametrul Distanța determină adâncitura de pe axa Y parametru Dimensiune responsabil pentru estomparea, și este responsabil pentru stabilirea unghiului indentare pe axa X. Deoarece umbra noastră cade în unghiuri drepte, apoi aliniate cu axa X este zero. Culoarea umbrei poate fi găsită în pătratul opus parametrului Blend Mode:
Valoarea culorii în format RGB și cu canalul alfa în acest caz va arăta astfel:
Rămâne să înregistrați indentarea de dedesubt.
Dacă trebuie să scrieți o valoare pentru una din cele patru laturi, utilizați această intrare:
Deoarece trebuie să specificăm o liniuță de mai jos, vom scrie margin-bottom: 30px;
Ca rezultat, obținem acest cod în fișierul style.css:
Primul paragraf. Selectorii vecinilor
Să scriem proprietățile pentru primul paragraf:
Acum, dacă salvați modificările și deschideți fișierul index.html în browser, veți vedea că aceste proprietăți se aplică tuturor paragrafelor din pagină. Deoarece trebuie să scriem aceste proprietăți doar pentru primul paragraf, atunci în acest caz putem folosi selectorii vecini. Ce este? În șablonul html, etichetele
și
(vom lua primul paragraf) mergeți unul după altul, ceea ce înseamnă că ele sunt tag-uri vecine, în selectorii css vecini sunt scrise astfel:
Acum, aceste proprietăți se vor aplica numai primului paragraf.
Ultimul paragraf. Clase în CSS
Acum, să trecem la ultimul paragraf. Deoarece este de asemenea diferit de textul principal, atunci pentru el vom specifica o clasă. În șablonul html, scrieți ultimul atribut al ultimului paragraf cu valoarea ultima-p. Numele clasei, precum și identificatorul, trebuie să înceapă cu literele alfabetului latin:
În clasele CSS sunt redactate astfel:
Aceste proprietăți vor funcționa numai pentru ultimul paragraf din șablonul nostru.
Spre deosebire de identificatori, puteți folosi o clasă cu o anumită valoare pe pagină de câte ori doriți.
Proprietatea de aliniere a textului cu valoarea corectă este utilizată atunci când doriți să aliniați textul la dreapta. De asemenea, puteți utiliza alte valori, de exemplu, text-align: center; în acest caz, textul va fi aliniat la centrul blocului.
Alte paragrafe
Pentru restul paragrafelor, vom scrie următoarea proprietate:
Alte proprietăți: culoarea, familia fontului, mărimea, spațierea liniei, această etichetă va moșteni de la elementul părinte, adică etichetă
.Dacă vom micșora fereastra browserului, vom vedea că conținutul este atașat în părțile laterale ale ferestrei. Pentru a rezolva acest lucru, adăugați pentru indentarea internă selector div:
Gruparea selectorilor
În cazul în care mai multe elemente de pagini web conțin aceleași proprietăți cu aceleași valori, cum ar fi în exemplul nostru, titlul și ultimul paragraf au în comun - este umbra, puteți grupa în selectorii, scriindu-le separate prin virgulă:
Nu uitați să eliminați proprietățile din elementele individuale, în cazul nostru, trebuie să eliminați umbra din selectorii h1 și p.last-p.
Articole similare
-
Prezentare pentru o lecție despre buchete de dulciuri, descărcare gratuită, rețea socială
-
Schița lecției pe substantivul subiect ca parte a discursului, descărcare gratuită, rețea socială
Trimiteți-le prietenilor: