Share
Astăzi vom continua seria tutorial pentru crearea designului ShutterPress, transformându-l dintr-un PSD brut într-un site web funcțional utilizând HTML și CSS. Până acum, am creat designul inițial al site-ului și am acumulat activele necesare pentru codificare. Acum o să codificăm astfel încât să funcționeze în toate browserele importante!
Astăzi este vorba despre transformarea design-ului nostru PSD într-un site HTML complet de lucru! Vă vom trece prin marcarea pas cu pas, până când vom avea un site care arată grozav în toate browserele importante. Ne apropiem de asta intermediar nivel de înțelegere, astfel încât, dacă ne mișcăm prea repede peste oricare dintre pașii de bază, nu ezitați să întrebați întrebări specifice în secțiunea Comentarii mai jos.
Se face un strigăt special CodeMyConcept, care a oferit grațios codul și tutorialul pentru această zi a seriei!
Dacă ați pierdut ultimele două zile din această serie, verificați-le aici:
Ok, cu obiectivele noastre clar definite, să începem!
În primul rând, începem prin crearea structurii de dosare de bază pentru proiectul nostru, pe care cu siguranță trebuie să o păstrăm bine structurate și organizate.
În acest caz, vom avea nevoie de un dosar "css" cu fișierul nostru principal css, un folder "imagini" și un folder "js" (Javascript) odată ce HTML și CSS sunt complete, astfel încât să putem adăuga glisorul, și pluginurile acordeonului. De asemenea, fișierul index.html din dosarul rădăcină
Apoi vom crea structura HTML de bază a aspectului cu secțiunile Stânga și Dreapta. Vom folosi un div wrap pentru a contura și a centra totul și containerele stânga și dreapta dinăuntru, precum și o div în partea de sus și de jos a ambalajului pentru a ne ajuta cu colțurile rotunjite păstrând în același timp aspectul flexibil.
ShutterPress LEFT MENU AICICONTUL DREPTULUI AICI
De fapt, preferăm să creăm HTML înainte de a scrie orice CSS, deși unii oameni fac o secțiune de HTML și CSS în același timp și apoi trec la următoarea secțiune. Am constatat că a face mai întâi întregul cod HTML ne ajută să ne gândim la CSS în prealabil și orice altceva care ar putea fi necesar, cum ar fi Javascript sau PHP include. Tot ce adaug în acest moment este Resetarea CSS.
Deci, începem prin codarea meniului din stânga. Aici vom avea nevoie de o etichetă h1 și un link pentru logo-ul nostru și o listă neordonată pentru elementele noastre de meniu. De asemenea, trebuie să cuibuiți o altă listă neordonată pe a treia etichetă li pentru submeniul nostru și să facem același lucru și cu niște elemente inactive pe a doua etichetă li, pentru a vedea dacă acordeonul nostru de javascript funcționează mai târziu.
De asemenea, trebuie să adăugăm clase "deschise" și "închise" la linkuri și submeniu, astfel încât să putem controla pictogramele și care submeniu se deschide în mod implicit, iar clasa activă pentru a evidenția pagina pe care o vizionăm în prezent.
ShutterPress
Acum, imediat după aceasta, vine icoanele sociale și câmpul de căutare din secțiunea noastră din stânga situată în partea de jos. Deci, vom crea un container div pentru partea de jos și separați [divs] pentru fiecare dintre cele două părți din interiorul containerului.
Pentru icoanele sociale, vom avea nevoie de un interval de timp pentru text și o listă pentru pictogramele, fiecare cu o clasă pentru a obține imaginea corectă a pictogramei și a stării sale corespunzătoare.
Pentru secțiunea Căutare, vom crea un formular și divs conținând intrările corespunzătoare pentru a le ajuta să le plutească și să adăugați fundalul și pictogramele. Făcând acest lucru, mai degrabă decât aplicarea stilurilor direct la intrări, funcționează mult mai bine pentru a evita problemele de navigare încrucișată cu înălțimi de linie și indentare de text.
Social:
- Tumblr
- picasa
- Vimeo
- flickr
- stare de nervozitate
- RSS
Deci, iată cum arată în browserul nostru, împreună cu Resetarea CSS
Acum, după ce am finalizat meniul din stânga, putem începe codarea părții corecte a conținutului pentru galeria de miniaturi.
Mai intai creem o lista neordonata a imaginilor in interiorul link-urilor, astfel incat sa poata face clic pe plugin-ul nostru lightbox, iar dupa aceea vom crea o div pentru a contine butoanele noastre anterioare si viitoare.
În acest moment, trebuie să începem să tăiem miniaturile și să le salvăm cu numele lor corespunzător din HTML, astfel încât să putem avea câteva imagini inline.
Iată cum ar trebui să caute tot HTML-ul nostru în Firefox
Acum, pentru un anumit stil, am creat câteva setări generale pentru fonturi, text și linkuri de culori și imagine de fundal
Accentsconagua
/ * ------------------------------ * / / * RESET GENERAL * / / * -------- -------------------- * / html, corp, div, span, applet, obiect, iframe, h1, h2, h3, h4, h5, blockquote pre, a, abbr, acronim, adresa, mare, cite, code, del, dfn, em, font, img, ins, kbd, var, b, u, i, centru, dl, dt, dd, ol, ul, li, margin: 0; padding: 0; de frontieră: 0; schiță: 0; font-size: 100%; aliniere verticală: linia de bază; fundal: nici unul; h1, h2, h3, h4, h5, h6, li line-height: 100%; blockquote, q quotes: none; q: conținut: "; tabel colaps de frontieră: colaps; distanțare frontieră: 0; intrare, textarea, selectați font: 11px Arial, Helvetica, sans-serif; 0; introducere: focus, textarea: focus outline: none; forma, fieldset stil de frontieră: none; html, --------------------------------*/ /* SETARI GENERALE */ /*-------- ----------------------- * / corp înălțime: 100%; font: 12px / 12px "Lucida Sans", "Lucida Grande", sans-serif ; culoare: # 000; fundal: url ('? /images/bg.jpg') repeta #fff; a text-decoration: none; : # 0285da; Apoi am creat stilurile de înfășurare pentru a putea construi baza structurii noastre, pe care începem să o definim lățimea ambalajului și o centram cu o marjă: 0 auto;
Pentru diviziile de sus și de jos pe care le-am definit mai devreme, am stabilit imagini de fundal și dimensiunile necesare pentru a crea colțurile noastre rotunjite de sus și de jos, iar pentru înveliș am stabilit o imagine de fundal repetată pe axa Y care va acoperi conținutul nostru care conține linia de divizare dintre conținutul din stânga și din dreapta.
Pentru partea divizoarei de bază trebuie să configurați clar: ambele; pentru că odată ce plutesc containerele mele din dreapta și din stânga, ambalajul se va prăbuși, așa că trebuie să prevenim acest lucru prin curățarea plutitorilor.
/ * -------------------------- * / / * WRAPPER * / / * ------------- ----------- * / # wrapper-top fundal: url ("? /images/content-top.jpg") centru de defilare fără repetare #FFFFFF; înălțime: 18px; lățime: 994px; #wrapper width: 994px; overflow: ascuns; margine: 64px auto 0; background: url ("? /images/content-bg.jpg") centru de repetare repeat-y #FFFFFF; # wrap-bottom fundal: url ("? /images/content-bottom.jpg") centru de defilare fără repetiție #FFFFFF; înălțime: 61px; lățime: 994px; clar: ambele; 
Iată rezultatul în browserul nostru:
Acum, când avem gata pregătită, putem continua conținutul: în primul rând, am stabilit lățimea ambelor containere din dreapta și din stânga, astfel încât să le plucem în poziția corectă.
/ * -------------------------- * / / * MENIUL STÂNGA * / / * ------------ ------------ * / / * Meniu principal * / #left width: 235px; plutește la stânga; / * ------------------------------ * / / * CONTUL DREPT * / / * ------- --------------------- * / / * Galerie miniatură Conținut * / #right width: 758px; float: dreapta;
Acum începem să stilizăm navigația creând o imagine sprite pentru logo-ul, butoanele și pictogramele de design.
Acest aspect particular nu pare să crească în înălțime, dar dorim să menținem lucrurile flexibile doar în cazul în care există o necesitate viitoare de a adăuga mai multe elemente la navigație.
Așadar, am creat containerul din stânga cu o înălțime minimă, astfel încât divul din stânga jos poate fi absolut poziționat fără a trebui să folosească o marjă imensă pentru al împinge în jos, astfel, dacă se adaugă elemente noi, aspectul va păstra în continuare dimensiunile originale.
De asemenea, am stabilit ca link-urile din navigație să fie afișate ca blocuri, astfel încât întreaga zonă să poată fi clică și nu doar textul și să se adauge fundalul deschis și apropiat folosind clasele respective și ajustând poziția spritei noastre.
Submeniul cu o clasă "închis" este setat să afișeze: none; astfel încât este afișată numai cea implicită.
/ * -------------------------- * / / * MENIUL STÂNGA * / / * ------------ ------------ * / / * Meniu principal * / #left width: 235px; plutește la stânga; min-înălțime: 615px; poziție: relativă; #left .logo a background: url ("? /images/sprite.png") parcurgere fără repetare 0 0 transparent; display: block; înălțime: 32px; margine: 8px auto 0; text-liniuță: -999999px; lățime: 190px; #left .menu lățime: 100%; frontieră-top: 1px solid #eaeaea; margin-top: 30px; #left .menu li a afișare: bloc; înălțime: 35px; linia-înălțime: 35px; padding-left: 22px; frontieră-fund: 1px solid #eaeaea; #left .menu li a.activ culoare: # 0285DA; frontieră-dreapta: 1px solid #fff; #left .menu li a.closed background: url ("? /images/sprite.png") parcurgere fără repetare 46px -231px transparent; #left .menu li a.opened background: url ("? /images/sprite.png") parcurgere fără repetare 46px -257px transparent; #left .menu li .sub-meniul li a padding-left: 38px; #left .menu .sub-menu.closed display: none; # stânga-fund poziție: absolută; fund: 0; lățime: 100%; Pentru icoanele sociale de fundal, am setat imaginile folosind clasicul corespunzător și setând imaginile de fundal folosind poziții, acest lucru este valabil și pentru starea de hovering.
/ * Social * / # left-bottom .social overflow: ascuns; înălțime: 34px; frontieră-top: 1px solid #eaeaea; frontieră-fund: 1px solid #eaeaea; padding-left: 25px; # spații sociale la stânga-jos float: left; linia-înălțime: 34px; # left-bottom .social ul float: left; margine: 9px 0 0 10px; # left-bottom .social ul li float: left; înălțime: 34px; # stânga-jos .social ul li a background: url ("? /images/sprite.png") parcurgere fără repetare -5px -50px transparent; display: block; înălțime: 16px; lățime: 16px; marcă: 0 5px 0 0; text-indent: -999999px; # stânga-jos .social ul li a: hover fundal-poziție: -5px -80px; # stânga-jos .social ul li a.picasa background-position: -26px -50px; # stânga-jos .social ul li a.picasa: hover pozitie fundal: -26px -80px; # stânga-jos .social ul li a.vimeo background-position: -47px -50px; # stânga-jos .social ul li a.vimeo: hover pozitie fundal: -47px -80px; Și pentru partea de căutare, în esență, plutim în divizia de intrare a containerului și ne confruntăm cu ele, mai degrabă decât cu intrarea.
/ * Căutați * / # left-bottom .search overflow: hidden; margin-top: 12px; # left-bottom .search .left background: url ("? /images/sprite.png") parcurgere fără repetare -5px -203px transparent; plutește la stânga; înălțime: 27px; margin-left: 20px; umplutură: 6px 0 0 10px; lățime: 158px; # left-bottom search.left input (intrare) border: none; fundal: transparent; lățime: 100%; # left-bottom search.right background: url ("? /images/sprite.png") parcurgere fără repetare -173px -203px transparent; plutește la stânga; înălțime: 27px; # left-bottom search. intrare drept fundal: niciun repetare parcurgere 0 0 transparent; frontieră: nici una mijlocie; cursor: pointer; înălțime: 27px; lățime: 27px; Deci, iata ce avem acum in Firefox
Aici plutim doar elementele din listă pentru a obține o afișare a grilei, adăugăm umplutură, culoarea de fundal și margini pentru a obține un cadru pentru fiecare tampon și pentru a adăuga, de asemenea, margini pentru separare.
In cele din urma. avem butoanele noastre cu un div container care este centrat și ambele linkuri sunt flotate.
/ * ------------------------------ * / / * CONTUL DREPTULUI * / / * -------- -------------------- * / / * Galerie miniatură Conținut * / #right width: 758px; float: dreapta; #right .thumbnails overflow: hidden; padding: 10px 0 0 32px; #right .thumbnails li float: left; margine: 0 21px 18px 0; #right .thumbnails li a graniță: 1px solid #eaeaea; padding: 2px; fundal: # f2f2f2; afișare: bloc; # dreapta. navigație margine: -10px auto 0; overflow: ascuns; lățime: 50px; #right .navigație a background: url ("? /images/sprite.png") defilați repetat 0 0 transparent; display: block; plutește la stânga; înălțime: 21px; text-liniuță: -999999px; lățime: 21px; #right .navigation .prev background-position: -159px -75px; margine: 0 8px 0 0; #right .navigație .next background-position: -186px -75px; E prima noastră pagină terminată în Firefox!
Mergem la subpagina noastra, ceea ce facem este sa duplicam index.html si sa-i numim ceva subpage.html sau inner.html, apoi vom scoate tot continutul din containerul nostru #right si vom incepe construirea html-ului necesar pentru galeria noastra de culori și cele 3 module de mai jos.
Avem nevoie de un div pentru a păstra întreaga marcare pentru prezentarea mea, o listă de imagini care vor fi diapozitivele și vom folosi de asemenea 3 versiuni diferite ale imaginilor pentru a putea vedea o acțiune ulterioară cu pluginul pentru ciclul jQuery.
De asemenea, setăm o div divizată care va fi absolut poziționată în partea superioară a imaginilor pentru a funcționa ca un cadru în cazul în care acest aspect trebuie implementat într-un CMS pentru a obține conținut dinamic. Dacă se întâmplă acest lucru, putem adăuga orice imagine fără a fi nevoie să fotografiați colțurile rotunjite și umbrele înainte de mâna.
Și în final pentru prezentarea de diapozitive trebuie să creați un div de navigare cu câteva linkuri pentru navigarea galeriei "anterioare" și "următoare".
Ultimul nostru bloc de conținut are cele 3 module fixate în containerul propriu, fiecare modul fiind un div de sine că voi pluti astfel încât să fie una lângă alta. În interior am și eticheta h2 pentru titlu și un paragraf pentru text.
Modulul unu
Sediul se află în fața unui avocat vestibulum. Cras rhoncus diam și sem gravida sagittis. Ut tempor sapien în neque ultrices varius. Lorem ipsum text.
Modulul doi
Pellentesque lacinia, augue vel venenatis commodo, ante neque tempor augue, semper rhoncus diam justo in ante. Aliquam în ultricks elefend libero, în sit amen consectetur velit quis.
Modulul trei
Suspenda porta sem vel enim molestie suscipit elementum leo porta. Cras lorem lektus, viverra sit amet semper quis, vehicula quis velit.
În acest design special, obținerea cadrului pentru diapozitive a fost un pic dificil, deci iată ce am făcut:
Am luat stratul denumit "Shape 90" și am lăsat umplutura la 0%. Apoi, faceți clic dreapta pe stratul numit "1720729_high", selectați o mască de tăiere de presă și apoi ați ascuns stratul.
Am revenit la stratul "Formă 90" și am setat opacitatea la 50%. Faceți clic dreapta pe strat și faceți un duplicat, selectați ambele straturi "Shape 90" și le îmbinați.
Acum puteți salva cadrul ca un transparent .png separat și adăugați doar un fundal alb în colțuri, astfel încât să acopere imaginile de pe spate.
Am setat dimensiunile modulelor și le-am deplasat pentru a le introduce în linie; după care am creat stilurile împreună cu sprite ca imagine de fundal pentru pictograme.
Am setat elementele listă din cursor pentru a avea o poziție: absolută; cu privire la ul, astfel încât să se prăbușească și să pară doar o singură imagine, astfel încât să putem obține aspectul real al aspectului, vom adăuga funcționalitatea după ce totul este gata.
Butoanele anterioare și următoare sunt, de asemenea, poziționate absolut, astfel încât să le putem centra pe verticală.
/ * Prezentare Galerie Conținut * / # galerie-titular poziție: relativă; lățime: 719px; margine: 20 pixeli automat 0; înălțime: 442px; # galerie deținător .slideshow-frame background: url ("? /images/slideshow-frame.png") parcurgere fără repetare 0 0 transparent; height: 442px; Poziția: absolută; top: 0; stânga: 0; lățime: 719px; z-index: 10; # galerie-suport .slideshow li height: 442px; Poziția: absolută; top: 0; width: 719px # galerie-suport .navigație a height: 92px; stânga: 0; margin-top: -44px; Poziția: absolută; top: 50%; lățime: 47px; z-index: 15; # galerie-suport .navigație a.prev background-position: -6px -103px; margin-top: -44px; # galerie deținător .navigație a.next background-position: -65px -103px; stânga: auto; dreapta: 0; # modules-holder overflow: hidden; margin-top: 24px; margin-stânga: 20px; # modules-holder .module float: left; lățime: 204px; margin-dreapta: 40px; # module-holder .module h2 font-size: 18px; font-weight: normal; margin-bottom: 5px; padding-left: 25px; # modules-holder .module h2.module-one fundal: url ("? /images/sprite.png") nu-repeta scroll -128px -170px transparent; # module-holder .module h2.module-two fundal: url ("? /images/sprite.png") nu-repeta scroll -128px -140px transparent; # module-holder .module h2.module-trei fundal: url ("? /images/sprite.png") nu-repeta scroll -128px -110px transparent; # modules-holder .module p culoare: # 6a6a6a; linia-înălțime: 15px; După toate acestea, putem vedea că titlurile modulelor au un font Museo pe ele, care nu este un font sigur pentru web, așa că va trebui să setăm acest lucru cu @ font-face. Așadar, am rulat fontul prin Font Squirrel (http://www.fontsquirrel.com/fontface/generator) și am plasat fonturile în folderul propriilor fonturi din rădăcina Proiectului nostru și am creat CSS în setările noastre generale folosind dreptul căi pentru fonturi.
/*---------------------------------*/ /* SETARI GENERALE */ /*----- -------------------------- * / corp înălțime: 100%; font: 12px / 12px "Lucida Sans", "Lucida Grande", sans-serif; culoare: # 000; fundal: url ('? /images/bg.jpg') repeta #fff; a text-decoration: none; culoare: # 000; a: hover text-decoration: nimic; culoare: # 0285da; @ font-face font-family: 'Museo700'; src: url ('? /fonts/museo700-regular-webfont.eot'); src: url ('? /fonts/museo700-regular-webfont.eot?#iefix') format ('embedded-opentype'), format url ('? /fonts/museo700-regular-webfont.woff') '), format url ('? /fonts/museo700-regular-webfont.ttf ') format (' truetype '), url ('? /fonts/museo700-regular-webfont.svg#Museo700 ') format (' svg ') ; font-weight: normal; font-style: normal; Deci, tot ce trebuie să facem acum este setarea familiei de fonturi la etichetele noastre h2, iar acum a doua pagină este completă.
# module-holder .module h2 font-family: 'Museo700'; font-size: 18px; font-weight: normal; margin-bottom: 5px; padding-left: 25px;
Acum, pentru a adăuga câteva funcționalități și o animație pentru proiectul nostru, vom folosi două pluginuri: jQuery Cycle pentru prezentarea noastră (http://jquery.malsup.com/cycle/) și prettyPhoto pentru galeria noastră de casete luminoase (http: // www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/) și apoi vom crea o funcție personalizată pentru acordeonul nostru de meniu.
Asigurați-vă că descărcați pluginul prettyPhoto și copiați activele necesare în dosarele lor (javascript în directorul "js", foile de stil pentru dosarul "css" etc.), plug-in-ul ciclului poate fi legat de Github și jQuery poate fi conectat de la API-urile Google.
Vom crea, de asemenea, un fișier principal.js în dosarul nostru JS unde putem pune funcția personalizată și configurația pluginului.
Deci, ne referim foaia de stil în antetul fișierelor html
ShutterPress
Referindu-ne, de asemenea, fișierele noastre javascript în partea de jos a documentului nostru, chiar înainte de eticheta html de închidere.