Share
În acest tutorial vom construi o pagină de blog utilizând tehnici de generație următoare din HTML 5 și CSS 3. Tutorialul urmărește să demonstreze modul în care vom construi site-uri web atunci când specificațiile vor fi finalizate și furnizorii de browsere le-ar fi implementat. Dacă știți deja codul HTML și CSS, ar trebui să fie ușor de urmărit.
Înainte de a începe, luați în considerare utilizarea unui Template HTML5 sau a unui CSS pentru viitorul dvs. proiect - adică dacă aveți nevoie de o soluție rapidă și profesională. Sau puteți încerca unul dintre dezvoltatorii experimentați de la Envato Studio care vă pot ajuta cu o gamă largă de proiecte personalizate HTML5 și CSS.
În caz contrar, este timpul să sapi în aceste tehnici.
HTML 5 este următoarea versiune majoră a HTML. Acesta introduce o grămadă de elemente noi care vor face paginile noastre mai semantice. Acest lucru va face mult mai ușor pentru motoarele de căutare și pentru ecranele de navigare pentru a naviga paginile noastre și pentru a îmbunătăți experiența web pentru toată lumea. În plus, HTML 5 va include, de asemenea, API fantezie pentru desenarea grafică pe ecran, stocarea datelor offline, tragerea și plasarea și multe altele. Să începem să marcăm pagina blogului.
Înainte de a începe marcarea paginii ar trebui să obținem structura generală drept:
În HTML 5 există etichete specifice destinate marcării antetului, navigării, barei laterale și subsolului. Mai întâi, aruncați o privire la marcaj și vă voi explica după aceea:
Titlul paginii Titlul paginii
Încă arată ca marcaj HTML, dar sunt câteva lucruri de reținut:
În loc să folosim divs pentru a conține diferite secțiuni ale paginii, folosim acum etichete semantice adecvate. Ele vor face mult mai ușor pentru motoarele de căutare și cititorii de ecran să afle ce este ceea ce într-o pagină.
Navigarea este marcată exact așa cum o vom face în HTML 4 sau XHTML, utilizând o listă neordonată. Cheia este că această listă este plasată în etichetele nav.
Am definit deja o nouă secțiune în document utilizând eticheta secțiunii. Acum avem nevoie doar de conținut.
Iti plac florile la fel de mult ca noi?
Lorem ipsum dolor este așezat în amonte, în funcție de timpul de aderare, de la locul de muncă temporar la locul de muncă și de la alte persoane. Ut enim ad minim veniam, quis exerciții de muncă ullamco laboris nisi ut.
Adăugăm un id la eticheta secțiunii, astfel încât să o putem identifica mai târziu atunci când o facem. Utilizăm eticheta antetului pentru a înfășura elementul introductiv h2. În plus față de descrierea unui document întreg, eticheta antetului trebuie de asemenea utilizată pentru a descrie secțiunile individuale.
Zona noastră principală de conținut constă din trei secțiuni: postarea pe blog, comentariile și formularul de comentariu. Folosind cunoștințele noastre despre noile etichete structurale din HTML 5, ar trebui să fie ușor de marcat.
Mergeți prin marcaj și voi explica elementele noi după aceea.
Acesta este titlul unui post de blog
postat pe de Mads Kjaer - 3 comentarii
Lorem ipsum dolor stați amet, consectetur adipiscing elit. Proin euismod tellus ue orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sucuri ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio ...
Începem o nouă secțiune și împachetăm întreaga postare de blog într-o etichetă de articol. Eticheta articolului este utilizată pentru a indica o intrare independentă într-un blog, discuție, enciclopedie etc. și este ideală pentru a fi utilizată aici. Din moment ce vedem detaliile unei singure posturi, avem doar un singur articol, dar pe prima pagină a blogului vom înfășura fiecare post într-un articol-tag.
Elementul antet este utilizat pentru a prezenta antetul și metadatele despre postarea pe blog. Spunem utilizatorului când a fost scris postul, cine la scris și câte comentarii are. Rețineți că marcajul temporal este înfășurat într-un tag. Această etichetă este, de asemenea, nouă pentru HTML 5 și este utilizată pentru a marca un anumit loc în timp. Conținutul atributului datetime trebuie să fie:
Marcarea comentariilor este destul de simplă. Nu sunt utilizate etichete sau atribute noi.
Comentarii
George Washington pe Lorem ipsum dolor este așezat în amonte, în funcție de timpul de aderare, de la locul de muncă temporar la locul de muncă și de la alte persoane. Ut enim ad minim veniam, quis exerciții de muncă ullamco laboris nisi ut.
Benjamin Franklin Lorem ipsum dolor este așezat în amonte, în funcție de timpul de aderare, de la locul de muncă temporar la locul de muncă și de la alte persoane. Ut enim ad minim veniam, quis exerciții de muncă ullamco laboris nisi ut.
Mai multe îmbunătățiri ale formularelor au fost introduse în HTML 5. Mai aveți de a face validarea pe partea clientului a câmpurilor obligatorii, a e-mailurilor etc. Browserul are grijă de asta pentru dvs..
Există două noi tipuri noi de intrări, email și url. E-mailul specifică faptul că utilizatorul trebuie să introducă un mesaj de poștă electronică valabil și trebuie să indice că utilizatorul trebuie să introducă o adresă web valabilă. Dacă scrieți ca un atribut, utilizatorul nu poate trimite un câmp gol. "Necesar" este un atribut boolean nou pentru HTML 5. Aceasta înseamnă doar că atributul trebuie declarat fără valoare.
Marcarea barei laterale și a subsolului este extrem de simplă. Cateva sectiuni cu un anumit continut in interiorul marcajelor corespunzatoare si footer.
Puteți vizualiza marcajul final, unstyled aici. Acum pentru stil.
CSS 3 se bazează pe principiile despre stiluri, selectori și cascada pe care o cunoaștem atât de bine din versiunile anterioare ale CSS. Acesta adaugă o mulțime de caracteristici noi, inclusiv noi selectori, pseudo-clase și proprietăți. Folosind aceste funcții noi devine mult mai ușor să configurați aspectul. Hai să ne aruncăm.
Pentru a începe cu noi vom defini câteva reguli de bază privind tipografia, culoarea de fundal a paginii etc. Veți recunoaște toate acestea din CSS 2.1
/ * Makeshift Resetare CSS * / margine: 0; umplutura: 0; / * Spuneți browser-ului să redea HTML 5 elemente ca bloc * / antet, subsol, în afară, nav, articol display: block; organism marja: 0 auto; lățime: 940px; font: 13px / 22px Helvetica, Arial, sans-serif; fundal: # f0f0f0; h2 font-size: 28px; linia-înălțime: 44px; padding: 22px 0; h3 font-size: 18px; linia-înălțime: 22px; padding: 11px 0; p padding-bottom: 22px;
Mai întâi restul stilurilor de margine și de umplere cu o regulă simplă. Într-un mediu de producție aș folosi o Resetare CSS mai completă, cum ar fi Eric Meyer's (pentru CSS 2.1), dar pentru scopul tutorialului pe care îl va face.
Apoi, îi spunem browserului să redea toate elementele HTML 5 ca bloc. Browser-ele sunt bine cu elemente pe care nu le recunosc (de aceea HTML 5 este compatibil într-o oarecare măsură), dar nu știu cum ar trebui să fie redate aceste elemente în mod implicit. Trebuie să le spunem acest lucru până când standardul este pus în aplicare pe scară largă.
De asemenea, rețineți modul în care am ales să dimensiunea fonturilor în pixeli în loc de ems sau%. Aceasta este de a menține caracterul progresiv al tutorialului. Atunci când browserele majore într-o zi sunt complet terminate, implementând HTML 5 și CSS 3, toți vom avea acces la mărirea paginilor în loc să redimensionăm doar textul. Acest lucru elimină necesitatea de a defini dimensiuni în unități relative, deoarece browserul va scala pagina oricum.
Vedeți ce arată pagina cu stilul de bază aplicat. Acum putem trece la modelarea restului paginii. Nu sunt necesare stiluri suplimentare pentru antet, așa că vom merge direct la navigație.
Este important să rețineți că lățimea corpului a fost definită ca 940px și că a fost centrat. Bara noastră de navigare trebuie să se întindă pe întreaga lățime a ferestrei, așa că va trebui să aplicăm câteva stiluri suplimentare:
Accentsconagua
nav poziție: absolută; stânga: 0; lățime: 100%; fundal: url ("nav_background"); Poziționăm absolut elementul nav, aliniem-l la stânga ferestrei și îl facem să se întindă pe întreaga lățime. Vom centraliza lista imbricate pentru ao afișa în limitele aspectului:
nav ul margine: 0 auto; lățime: 940px; listă: nu există;
Acum vom defini câteva stiluri suplimentare pentru a face elementele de navigare să pară mai frumoase și să le alinieze la grila pe care se bazează aspectul. Am inclus, de asemenea, un stil pentru evidențierea paginii pe care este utilizatorul și un anumit stil personalizat pentru link-ul de abonament.
nav ul li float: stânga; nav ul li a afișare: bloc; margin-dreapta: 20px; lățime: 140px; font-size: 14px; linia-înălțime: 44px; text-align: centru; text-decoration: nici unul; culoare: # 777; nav ul li: hover culoare: #fff; nav ul li.selected a culoare: #fff; nav ul.subscribe un margin-left: 22px; padding-left: 33px; text-aliniere: stânga; fundal: url ("rss.png") centru stânga no-repeat; Marcajul pentru introducere este destul de simplu: o secțiune cu o rubrică și un paragraf de text. Cu toate acestea, vom folosi câteva noi trucuri CSS 3 pentru a face acest lucru mai atractiv.
#intro margin-top: 66px; padding: 44px; fundal: # 467612 url ("intro_background.png") repeat-x; dimensiunea fundalului: 100%; raza de graniță: 22px; Utilizăm două proprietăți noi. Prima este dimensiunea de fundal, care vă permite să scalați imaginea de fundal. În cazul nostru, o scarăm la 100% pe ambele axe. Dacă caseta se extinde pe măsură ce adăugăm mai mult conținut la ea, fundalul de gradient se va scala și ea. Acesta este un lucru care nu a fost posibil în CSS 2.1 fără marcare ne-semantică și alte probleme de browser.
A doua proprietate nouă este raza de graniță, care aplică colțuri rotunjite elementului. Raza colțurilor noastre rotunjite este de 22 de pixeli în fiecare colț. Puteți specifica valori diferite pentru fiecare colț sau alegeți să rotiți numai colțurile individuale.
Din păcate, niciuna dintre proprietăți nu este implementată pe deplin în browserele majore. Cu toate acestea, putem obține un anumit sprijin prin utilizarea atributelor specifice vânzătorului. Dimensiunea fundalului este susținută de versiuni mai noi ale Safari, Opera și Konqueror. Frontieră-raza este susținută de versiuni mai noi de Safari și Firefox.
#intro ... / * Dimensiunea fundalului nu este încă implementată * / -webkit-background-size: 100%; - dimensiunea fundalului: 100%; -khtml-dimensiune fundal: 100%; / * Raza de graniță nu este încă implementată * / -moz-border-radius: 22px; -webkit-border-radius: 22px;
Deoarece avem o culoare de fundal definită, nu vor exista probleme majore în browserele care nu acceptă dimensiunea de fundal, cum ar fi Firefox. Acum trebuie doar să stilizăm rubrica și textul.
#intro h2, #intro p¬ † lățime: 336px; #intro h2 umplutură: 0 0 22px 0; font-weight: normal color: #fff; #intro p padding: 0; culoare: # d9f499;
Imaginea de floare poate fi adăugată cu ușurință, oferind #intro o imagine de fundal secundă, ceva ce suportă CSS 3.
#intro ... background: # 467612 url ("intro_background.png") sus la stânga (287px 100%) repet-x, url ("intro_flower.png" Dăm celor două imagini de fundal dimensiuni explicite pentru a ne asigura că nu se suprapun și ne-am stabilit. Notați notația scurtă a mărimii fundalului.
Din păcate, niciun browser nu acceptă în mod fiabil acest lucru încă, așa că va trebui să o facem în mod vechi: prin includerea unei imagini inline și poziționarea utilizând CSS. Consultați exemplul final pentru a vedea cum a fost făcut.
Zona de conținut și bara laterală vor fi aliniate una lângă cealaltă. În mod tradițional, veți face acest lucru folosind flotoare, dar în CSS 3 vom folosi tabele!
- Ce? - Mese? s-ar putea să te întrebi și să te uiți confuz. Probabil că ați învățat cu ani în urmă că folosirea meselor pentru aspectul web este un mare nu-nu și încă mai este. Nu trebuie să utilizați niciodată elementul de masă pentru a marca un aspect. Cu toate acestea, în CSS 3, putem face ca elementele să se comporte ca niște tabele, fără să apară vreodată în marcaj! Pentru a începe, vom avea nevoie de câteva diviziuni pentru a grupa secțiunile într-un mod mai logic.
Totul are sens semantic, dar acum îl putem modela. Vrem ca diviziunea #content să se comporte ca un tabel, cu #mainContent și, în plus, ca table-cells. Cu CSS 3, acest lucru este foarte simplu:
#content display: table; #mainContent display: cell-cell; lățime: 620px; padding-right: 22px; în afară display: cell-cell; lățime: 300px;
Asta e tot! Nu mai există imagini de fundal plutitoare, de coloană falsă, margini de compensare sau colaps. Am făcut elementele să se comporte ca o masă și acest lucru face mult mai ușor pentru noi să facem aspectul.
Stilul antetului postului este destul de banal, așa că voi trece la partea distractivă: aspectul cu mai multe coloane.
Mai multe coloane de text nu au fost posibile anterior fără divizarea manuală a textului, dar cu CSS 3 este o bucată de tort, deși trebuie să adăugăm o div în jurul mai multor paragrafe pentru ca aceasta să funcționeze cu browserele actuale.
Lorem ipsum dolor stai amet ...
Pellentesque ut sapien arcu ...
Vivamus vitae nulla dolor ...
...
Acum putem adăuga două proprietăți simple și numim o zi.
.blogPost div (numărul de coloane: 2; coloană-decalaj: 22px;
Vrem 2 coloane și un spațiu de 22px între coloane. Div div suplimentare este necesar, deoarece în prezent nu există nici o modalitate acceptată de a face un element să acopere mai mult de o coloană. În viitor, totuși, veți putea specifica proprietatea span coloane și am putea scrie:
.blogPost număr de coloană: 2; coloană-decalaj: 22px; .blogPost header column-span: all;
Desigur, proprietățile coloanei și ale decalajului de coloane sunt acceptate numai de unele browsere, Safari și Firefox. Pentru moment, trebuie să folosim proprietățile specifice furnizorilor.
.blogPost div / * Numărul de coloane nu este încă implementat * / -moz-column-count: 2; -webkit-count-count: 2; / * Coloana nu a fost încă implementată * / -moz-column-gap-22px; -webkit-gap-column: 22px;
Dacă vă uitați atent la imaginea din postarea pe blog, veți vedea o umbră. Putem genera acest lucru folosind CSS 3 și proprietatea box-shadow.
.blogPost img marja: 22px 0; box-shadow: 3px 3px 7px # 777;
Primul "3px" indică browserului unde dorim ca umbra să se oprească orizontal. Cel de-al doilea "3px" ne spune unde ne dorim ca umbra să se oprească vertical. Ultimul "7px" este cât de neclar ar trebui să fie marginea. Dacă îl setați la 0, va fi complet solid. Nu în ultimul rând, definim culoarea de bază a umbrei. Această culoare este, desigur, estompată, în funcție de cât de mult vă estompați umbra.
Probabil că nu este o surpriză faptul că această proprietate nu este încă implementată în toate browserele. De fapt, funcționează numai în Safari și trebuie să utilizați proprietatea specifică vânzătorului.
.blogPost img marja: 22px 0; -webkit-box-shadow: 3px 3px 7px # 777;
Plasarea cu zebra, sau evidențierea fiecărui al doilea element într-o serie, implică în mod tradițional selectarea tuturor elementelor prin javascript, apoi prin looping prin ele și evidențierea tuturor elementelor ciudate. CSS 3 introduce pseudo-clasa "n-copil", ceea ce face ridicol de simplu să facă acest lucru fără javascript. O vom folosi pentru a citi comentariile din zebra.
secțiune # comentarii articol: nth-copil (2n + 1) padding: 21px; fundal: # E3E3E3; frontieră: 1px solid # d7d7d7; / * Raza de graniță nu este încă implementată * / -moz-border-radius: 11px; -webkit-border-radius: 11px;
Valoarea ciudată "2n + 1" este de fapt destul de simplă dacă înțelegeți ce înseamnă:
Alternativ, puteți scrie pur și simplu:
secțiune # comentarii articol: nth-child (nui adevărat) ...
Deoarece standardul include cele două valori cele mai utilizate ca o stenogramă, ciudată și uniformă. Restul stilului de comentariu ar trebui să fie ușor de înțeles cu noile tale cunoștințe.
Câteva tehnici CSS 3 sunt refolosite în stilul formularului de comentariu, al footerului și al barei laterale. În formularul de comentarii și în subsol am folosit același tip de tehnică de masă a tabelului utilizată în aspectul principal. În bara laterală, raza de margine este utilizată pentru a adăuga colțuri rotunjite la secțiunile diferite.
Vedeți designul final cu toate aplicațiile de styling.
Pagina se redă corect în browserele Safari 4 și mai noi pe webkit, deoarece este singurul motor de redare care acceptă toate tehnicile CSS 3 pe care le-am utilizat. Firefox 3 are unele probleme de aplicare a colțurilor rotunjite la imaginea noastră de flori și nu suportă dimensiunea fundalului, dar în plus, aspectul funcționează. Am ales să ignor Internet Explorer deoarece necesită un pic de hacking pentru a obține HTML 5 pentru a funcționa. De asemenea, ați putea defini mai multe reguli și puteți obține tot ce funcționează în cadrul unor browsere importante, dar toate acestea sunt în afara scopului tutorialului.
Când HTML 5 și CSS 3 sunt implementate într-o zi în toate browserele, va fi mult mai ușor să construiți site-uri web. În sfârșit, vom putea să nu mai folosim flotoare pentru aspect (pentru care nu au fost niciodată folosite) și vom petrece mult mai puțin timp scriind javascript pentru a mări imaginile de fundal sau tabelele din zebră. Sperăm că vom folosi tot acest timp suplimentar pentru a studia câteva domenii neglijate de web design, cum ar fi optimizarea frontului și arhitectura informațiilor adecvate.
Uitați-vă la șabloanele HTML5 sau la temele CSS - dacă aveți nevoie de o soluție profesională și gata pentru următorul dvs. proiect web.
