Când Collis a lansat acest site și a cerut cititorilor cereri de tutorial, unul comun a fost pentru o temă "reviste tematice" cum să pentru platforme blog. Acest tutorial se concentrează asupra primei părți a procesului: aplicarea unei rețele CSS în design pentru a realiza prototipul unui șablon de pagină de pornire.
Demo și sursă
Puteți vedea o demonstrație a acestui tutorial făcând clic pe butonul "Demo", de mai jos. Pentru sursă, descărcarea fișierului ZIP nu include codul Blueprint CSS.
Ce construim
Accentul se concentrează aici pe un exemplu de proiectare a paginii web folosind cadrul de rețea Blueprint CSS, bazat pe articolul meu anterioar ce CSS Grid Framework. Cu toate acestea, puteți aplica același proces pentru orice cadru de rețea CSS pe care îl preferați. Dacă nu vă place să utilizați cadre de rețea pe site-urile de producție, puteți întotdeauna să înlocuiți codul CSS și clasele corespunzătoare HTML cu propriile dvs..
Designul paginii prezentat mai jos este influențat de numeroasele teme ale revistei WordPress, astfel încât este posibil să vedeți elemente de design familiare, deși acest tutorial nu este un tutorial specific WP.
Un proces tipic de proiectare grafică
Permiteți-mi să subliniez că sunt doar un "fotoliu", designer auto-învățat, iar natura minimalistă a designului meu va reflecta lipsa mea de formare adecvată. Sperăm că vă permite să vă concentrați asupra procesului general de proiectare și codificare a rețelei, care se bazează pe elemente geometrice, nu pe stil.
Un proces tipic de proiectare pentru paginile web este de a începe cu o schiță pe hârtie, urmată de o machetă grafică în Photoshop sau Fireworks etc. Picăturați toate elementele de design, poziționate aproximativ în locul în care doriți. Mai târziu, în faza de proiectare a rețelei CSS, veți determina măsurătorile exacte.)
FilmPundits este un site deținut de un prieten pe care îl construiesc. Modelul de mai jos este unul dintre mai multe modele "FilmScenic" pe care le-am făcut prototip. Subiectul filmului se împrăștie doar în acest exemplu din cauza imaginilor în format panoramic.
Dacă doriți să utilizați un design similar pentru subiecte non-film, trebuie doar să ajustați înălțimile imaginii pentru a le face să pară mai puțin ecran lat. Pentru nevoile mele de design, cea mai mare imagine trebuie să aibă cel mai mare impact. Deci, compoziția este poziționată ușor în afara centrului, orizontal. Aceasta face ca intreaga pagina sa fie mai dinamica si atrage atentia asupra celor mai importante elemente.
Să aruncăm o privire la liniile "ghid" de mai jos, care formează grila de proiectare pentru mockup-ul de mai sus.
Utilizați software-ul grafic preferat pentru a transforma liniile de ghidare într-o hartă "felie":
Dacă nu utilizați o rețea CSS, veți codifica manual pagina dvs. web și fișierul CSS în acest moment sau permiteți software-ului dvs. să genereze codul pentru dvs..
Procesul de proiectare pe bază de grilă CSS
Acum că avem o machetă de design grafic, trebuie să o traducem în cod HTML și CSS. Pentru a reitera, folosirea unui cadru de rețea CSS accelerează procesul de prototipare. Puteți măsura elementele de design în lățimi pixel și finetune pentru a se potrivi grila CSS pe care o utilizați. (Nu am prea mult în poziționarea verticală, deoarece am tendința de a controla asta cu înălțimile imaginii și marginile de sus / jos).
Aici este procesul pe care îl folosesc în mod obișnuit pentru a aplica rețelele CSS, care tratează macheta de design grafic ca pe o parte. Va trebui să ajustați acest lucru pentru a vă satisface nevoile.
Pe o bucată de hârtie, desenați un dreptunghi delimitator - peisaj sau portret - reprezentând forma generală a designului paginii.
Împărțiți dreptunghiul de delimitare în secțiuni brute: antetul, subsolul, conținutul principal, bara laterală.
Împărțiți secțiunile grosiere mai departe, după cum este necesar.
Alegeți cadrul dvs. de rețea CSS, fie pre-construit, fie personalizat. Folosesc Blueprint. Puteți utiliza acest document PDF într-o singură pagină ca "foaie de înșelătorie".
Decideți la lățimea maximă a paginii. Am folosit lățimea implicită a paginii Blueprint de 950 de pixeli, formată din 24 coloane cu o lățime de 30 de pixeli fiecare și 10 jetoane laterale între coloane (24x30 - 10 = 950 px).
Mock up design-ul dvs. în software-ul grafice raster (Photoshop, Fireworks, etc), dacă doriți. Tind să trec peste acest pas pentru că. Rețineți că cele mai multe cadre de rețea CSS includ o rețea PNG sau JPG pe care o puteți suprapune ca ghid. Nu am folosit grilă în procesul de proiectare grafică discutat mai sus.
Decideți la lățimi minime pentru diferitele dvs. secțiuni.
Am vrut ca bara laterală să aibă o lățime de cel puțin 190 de pixeli (5 coloane Blueprint), dar a lăsat acest lucru până la sfârșit, pentru a asigura că cele trei blocuri de mici dimensiuni din stânga jos aveau prioritate.
Partea din stânga a blocului "caracteristici" ar trebui să aibă un spațiu mic de spațiu alb (> = 30 px, deoarece aceasta este lățimea unei coloane în Blueprint). După răsucirea cu secțiunile cu prioritate înaltă, am stabilit 3 coloane = lățime de 110 px.
Cele trei blocuri mici de caracteristici trebuie să aibă aceeași lățime. Orice cu o lățime mai mică de 190 de pixeli nu ar avea același impact vizual. Orice mai mult de 190 px nu ar lăsa spațiu suficient pentru spațiul alb spre stânga. (Dacă am avut timp și înclinație, aș fi putut crea un cadru Blueprint personalizat care să ofere un control mai fin sau să folosească o pagină cu lățime mai mare.)
Lățimea imaginii mari a caracteristicilor (590 px = 15 coloane) este decisă automat, deoarece trebuie să se întindă pe lățimea tuturor celor trei blocuri de caracteristici mai mici. Raportul de înălțime / lățime este mai mare decât pentru imaginile de dimensiuni mai mici, pentru impact vizual și astfel înseamnă că este "mai important" decât alte elemente de pagină. Toate aceste imagini oferă o atracție asemănătoare ecranului, în ciuda raporturilor diferite înălțime / lățime.
În secțiunea "Postări recente" din bara laterală, lățimea imaginii este forțată la 70 de px (2 colți) - în loc de degetele dorite 48x48 - ca urmare a faptului ce imobiliar pe ecranul orizontal este lăsat. (Iată unde un cadru al rețelei CSS poate fi o răspundere: dimensiuni forțate.) În final însă, chiar și micile miniaturi indică ușor tema "widescreen".
Orice blocuri de text care sunt prea largi pot fi reparate cu ușurință utilizând un font mai mic - de preferință folosind o familie de fonturi care este încă lizibilă la dimensiunea redusă.
Determinați înălțimile elementelor acolo unde este posibil. Satisfăcătorul pentru preferințele de înălțime este o preocupare mai puțin importantă pentru mine, dar am minimizat plasarea elementelor de design pe verticală, astfel încât designul general al paginii să reflecte o senzație de "ecran lat". Cel puțin pentru acest șablon de pagină de pornire, nu am vrut ca înălțimea paginii să fie atât de mare încât majoritatea cititorilor ar trebui să deruleze în jos. Aceasta ar distruge efectul "ecran lat".
Meniul este doar un substituent și nu este acoperit aici în cod. Se întinde întreaga "conținut" de lățime de 710 px (18 colți).
Înălțimea imaginii de lungime mare a fost determinată de aspect. Proporțiile sale ar trebui să semene cu un "ecran lat".
Imaginile de mici dimensiuni sunt o versiune redusă a celor pe care le folosesc la un alt site de film. Originalele sunt 470 x 175 h. Din moment ce există doar 190 de lățime pentru a lucra cu, scalarea unei imagini originale face ca înălțimea rezultată 71 px, pe care le-am tăiat aici la 70 px. Proporția rezultată oferă în același timp o senzație de ecran lat, dar reamintește faptul că aceste blocuri nu sunt la fel de importante ca imaginea de lungime mare.
Înălțimea textului fiecărei secțiuni de mici dimensiuni este definită de patru secțiuni verticale: titlul filmului, data postului, autorul și descrierea postului, precum și mai multe "limite inferioare". (Mai târziu, în codul CSS veți vedea că înălțimea liniei implicite este de 115%.)
Înălțimea articolelor din blocul Mesaje recente are un minim de 49 px, deși variază în funcție de lungimea titlului unei postări.
Partea superioară a secțiunii Știri nu se încadrează perfect în partea de sus a caracteristicilor mici. Există modalități de a realiza acest lucru, deși nu am acoperit acest lucru aici.
Determinați lățimile finale ale fiecărui element, factorizând setările cadrului de rețea. Puteți folosi schița de hârtie sau macheta grafică ca ajutor.
Plasați macheta grafică, dacă o utilizați și salvați segmente în fișiere imagine.
Adăugați etichetele Blu divrint necesare și atributele de clasă pentru a vă susține designul.
Testați și optimizați până veți avea un design final cu care vă bucurați.
Dacă doriți, eliminați cadrul Blueprint. Aceasta înseamnă înlocuirea cadrului explicit (HTML, CSS) cu unul implicit - ceea ce mi se pare ca o mulțime de lucruri inutile (dar asta sunt doar eu). Cel puțin, în producție, utilizați versiunea "comprimată" a fișierelor Blueprint.
Du-te si traieste.
Dacă sunteți un designer adevărat, spre deosebire de mine, probabil că veți face cea mai mare parte a machetei de design din pachetul dvs. preferat de editare grafică. Prefer, în general, să schițez pe hârtie, apoi să machez în zbor folosind codurile HTML și CSS (clase Blueprint și personalizate), după cum se discută mai jos.
Grid-Based Coding Proces
Acum, că aveți o machetă a aspectului paginii dvs., puteți începe codarea în HTML și CSS. Iată un proces brut al etapelor actuale de codificare:
Includeți referințele CSS Blueprint necesare și codul condițional IE în cap element al paginii dvs. web.
În eticheta corporală, începeți cu a div a caror clasă atributul este setat la "container". Acesta este un cod Blueprint pentru a specifica o zonă de containere pentru elementele de proiectare. Această secțiune este pe întreaga pagină. Dacă doriți ca grila să fie vizibilă, pentru a vă ajuta să plasați elemente în mod corespunzător, adăugați și valoarea "showgrid" la clasă atributul div.
Începeți rafinarea blocurilor în secțiuni mai mici utilizând conținutul HTML înfășurat în div tag-uri, precum și dreptunghiuri controlate de CSS pentru imagini. Pentru a specifica lățimile, utilizați clasele "span-x" Blueprint. Adăugați în orice clase personalizate CSS de care aveți nevoie. De obicei, pun blocuri personalizate redundante (cu un fundal gri), apoi le elimina după ce am implementat propriul design în cod.
Puteți continua să perfecționați fiecare bloc brut sau să treceți la pasul următor.
Creați toate logo-urile, pictogramele sau bannerele necesare care nu au fost create anterior.
Înlocuiți blocurile brute cu elemente de design reale. Adăugați potrivirea div tag-uri, orice valori ale clasei Blueprint rămase.
Exemplu de cod HTML și CSS
Pentru a face procesele de mai sus mai clare, să aruncăm o privire asupra unor fragmente reale de cod HTML și CSS pentru exemplul de design al site-ului filmului imaginat mai devreme. Rețineți că am mers extreme cu etichetele non-Blueprint div doar pentru claritate în acest tutorial. Probabil că veți dori să eliminați toate clasele excesive, eventual să îmbinați etichetele imbricate div.
Rețineți, de asemenea, că am folosit câteva clase "urâte" non-Blueprint CSS pentru claritate. Toate acestea sunt precedate de "fs-", urmate de un nume funcțional, pentru a clarifica pentru ce le folosesc.
Am codat cinci etape pentru acest tutorial, pentru a ilustra procesul de rafinare în HTML și CSS. În mod normal, aș comprima etapa 1-3.
Blank template cu clasa Blueprint "container" și fișierul CSS gol.
Stadiul blocaj brut 1.
Stadiul blocării grave 2. Rafinați blocurile brute din etapa 1.
Stadiul blocării grave 3. Rafinarea finală a blocului în secțiunile necesare.
Pagina web finală și CSS.
Acești pași vor fi mai clare în secțiunile de mai jos.
Pasul 1: Codul șablonului gol
Pentru a începe cu, dorim să setăm fișierul HTML:
Șablonul de film
antet, conținut, bara laterală și subsolul mergeți aici
Share
Accentsconagua