Share
Sunt un mare fan al designului site-urilor foto-centrice? astfel încât astăzi sunt încântat să lansez un nou tutorial "complet al site-ului", orientat spre fotografi, ilustratori și alte reclame vizuale. În Ziua 1, am creat șablonul în Photoshop folosind câteva trucuri și tehnici speciale. Astăzi, în Ziua 2, vom trece prin faza de proiectare finală și apoi vom face o pregătire "înainte de zbor" pentru faza de codificare, pe care o vom trece în detaliu în Ziua 3. În Ziua 4, vom arăta cum să creați trei site-uri complet diferite utilizând același HTML brut.
Sesiunea de astăzi va fi relativ rapidă din punct de vedere tehnic? dar vom merge greu pe sfaturile "fluxului de lucru", deci acordați atenție dacă sunteți curioși de faza unui proiect care se întâmplă după proiectare și înainte de începerea codării.
Să începem sesiunea de astăzi cu câteva note generale despre ceea ce "înainte de zbor"este: Când ați terminat de proiectat un site web, există câțiva pași importanți care ar trebui să aibă loc în mod ideal înainte de a începe procesul de codificare reală. Primul pas este de a începe slicing up designul nostru.
Ghidul pas cu pas complet scris este de mai jos. Vom începe cu documentul Photoshop pe care l-am creat în Ziua 1, dar puteți descărca și demo-ul PSD pentru a vă verifica munca împotriva mea.
Ok, cu obiectivele noastre clar definite, să începem!
Primul pas este de a tăia orice imagini care vor fi necesare în șabloanele codate. În cazul nostru, acest proces este destul de simplu: aruncați o privire bună asupra șablonului și arătați toate elementele de design care nu pot fi duplicate cu CSS sau alte trucuri de codificare. Iată lista noastră:
Să notăm unde se află designul nostru (faceți clic pe imaginea de dimensiune completă):
„>
Împărțirea acestor lucruri nu este dificilă, așa că nu voi intra în prea multă profunzime, dar înainte de a începe, merită să ne gândim dacă unele dintre aceste imagini pot fi combinate într-o singură CSS Sprite.
Ce este un CSS Sprite? Puneți pur și simplu, un sprite este o metodă de a folosi o singură imagine ca mijloc de stocare a mai multor imagini mai mici. De exemplu, aruncați o privire asupra sprite-ului folosit la Webdesigntuts:
Când începem codarea, putem folosi pur și simplu poziționarea CSS și decuparea imaginii pentru a arăta bucata de sprite pe care o dorim.
De ce să folosiți un CSS Sprite? Viteză! Utilizarea sprite pentru a stoca imaginile va reduce timpul necesar pentru a încărca o întreagă pagină web? atunci când imaginile sunt re-folosite din nou și din nou pe mai multe pagini, acest lucru poate însemna mult timp salvat.
Sprites sunt cel mai bine utilizate cu imagini mai mici, care se obisnuiesc de peste si peste din nou. De exemplu, majoritatea activelor discutate mai sus pot fi reduse de fapt la acest sprite:
Într-un singur sprite, am pregătit deja cea mai mare parte a designului nostru pentru codificare? și totul este sub 19kb! Nu e rău corect?
Pentru a crea propriul dvs. sprite, trebuie doar să creați un document gol (începeți cu orice dimensiune, în cele din urmă veți decupa acest lucru pentru a se potrivi cu greu fiecărui element al spritei), apoi adăugați elemente de design cu o cantitate rezonabilă de umplutură între fiecare element. Iată câteva trucuri suplimentare:
Pentru imaginile rămase, putem crea pur și simplu propriile noastre felii generice. Le voi lista mai jos și le voi descrie pe fiecare (și de ce nu este un sprite):
Suprafața interioară a umbrei pentru Slidedown. Nu este un sprite, deoarece este mare (ceea ce înseamnă că ar fi în mod inutil de vită până dimensiunea sprite).
Colțurile rotunjite de sus și de jos: Acestea nu sunt sprite din câteva motive: 1) ca exemplul de mai sus, ele sunt mari și greoaie; 2) acestea ar putea fi re-jupuite sau redimensionate la o dată ulterioară, ceea ce înseamnă încărcarea lor într-un sprite doar face pentru o muncă suplimentară și 3) există o bună posibilitate ca am putea decide să ștergem aceste imagini pentru metode CSS în viitor.
Imaginea de fundal: Acesta nu este un sprite deoarece 1) este probabil să fie schimbat cu o altă imagine BG și 2) trebuie să se repete pe termen nedefinit, care sprites doar nu fac bine.
Alte "non-sprites": Evident, nu vom încărca miniaturile noastre sau alte imagini de conținut în sprite. Principalul motiv aici este caracterul practic? Sprite sunt destinate elementelor UI de bază și de branding care se pot încărca rapid și pot accelera un site? dacă încărcăm EVOLUȚII imagine într-un singur sprite, ar face pentru un timp de încărcare foarte lung, chiar dacă a grăit lucrurile după încărcare. Gândiți-vă la pre-încărcătoare pentru acele site-uri uriașe Flash cu câțiva ani în urmă;)
Celălalt motiv evident este că aceste imagini de conținut se vor schimba probabil de fiecare dată când cineva actualizează site-ul. Imaginea Sprite este menită să fie destul de neschimbată atât timp cât design-ul site-ului rămâne același.
Note finale pentru feliere: Probabil că este evident, dar există și alte modalități de a tăia acest design special. Diferite abordări pot avea sens pentru propria variație a acestui design? așa că nu te limita la folosirea ideilor de mai sus. Dacă doriți să atacați colțurile rotunjite și umbra de fundal utilizând CSS3, proprietatea z-index și un PNG transparent, prin toate mijloacele mergeți pentru aceasta!
Acum, când avem toate imaginile noastre active, este timpul să ne adunăm scenariile într-un singur loc, astfel încât, atunci când ne așezăm la codarea greu, vom fi pregătiți de acțiune. Privind din nou la designul nostru, să identificăm domeniile cheie care vor necesita scripturi sau pluginuri suplimentare:
Fiecare șablon bun de fotografi are nevoie de o casetă lightbox? și există puțini mai buni decât prettyPhoto acolo chiar acum. Este ușor de instalat / personalizat, și va oferi câteva caracteristici suplimentare pe care alte casete lightbox nu le folosesc - cum ar fi navigarea prin miniaturi, add-on-uri personalizate de partajare și multe altele.
Aceasta este o problemă destul de simplă folosind unele jQuery de bază? astfel încât vom folosi de fapt un script personalizat și ușor pentru acesta. Reveniți la Ziua 3 pentru a vedea cum funcționează!
jQuery Cycle se va ocupa de ridicarea greutății pentru glisoarele noastre de imagine. Este un plugin incredibil de bine documentat, ceea ce înseamnă că va fi ușor de configurat (și personalizat) pentru a se potrivi nevoilor șablonului nostru.
Am folosit fontul Museo în design, așa că va trebui să găsim o modalitate de a folosi acest lucru în versiunea codată. Cea mai rapidă modalitate de a seta acest lucru este cu @ font-face. Deci, am rulat fontul prin Font Squirrel (http://www.fontsquirrel.com/fontface/generator) pentru a crea fisierele pe care le putem folosi in Ziua 3.
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.
În acest moment ar trebui să fim gata să începem conversia HTML / CSS. Am creat șablonul site-ului nostru, am tăiat toate imaginile pe care trebuie să le folosim și am adunat toate scenariile de la terțe părți pe care le vom cere pentru ca site-ul să funcționeze așa cum ne dorește. În etapa următoare, vom face codificarea reală? astfel încât să vă pregătiți pentru Ziua 3!
Accentsconagua