E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale CSS

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  CSS  /  Diverse (5)

Out of the box

22.04.2008
Out of the box

Este adevarat ca CSS se bazeaza foarte mult pe grid-uri - totul urmeaza coordonate xy, dar asta nu inseamna ca designul este neinteresant. Daca intelegi cum functioneaza un grid poti sa fragmentezi sau sa abstractizezi pentru a face layout-ul mai dinamic si mai interesant.

Total vizualizari: 11971 11971 afisari   |   Comentarii  0   |   Rating   |   (8 voturi)   |   Timp necesar: 30 min 30 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  Sitepoint.com  
Autor:  E-learn.ro
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1 234567 »
comenteaza printeaza

Este adevarat ca CSS se bazeaza foarte mult pe grid-uri - totul urmeaza coordonate xy, dar asta nu inseamna ca designul este neinteresant. Daca intelegi cum functioneaza un grid poti sa fragmentezi sau sa abstractizezi pentru a face layout-ul mai dinamic si mai interesant. Descarca fisierele folosite pentru acest tutorial.

Griduri si wireframe

"Trebuie sa cunosti regulile inainte sa le incalci"
Daca ai luat cursuri de tipografie sau layout vei sti ca gridul e unul din elementele esentiale in design. Totusi daca nu esti familiarizat cu acest concept iata o introducere:

Un grid ofera organizare.
Un grid poate sa reprezinte macheta layoutului. Gridurile bine concepute pot sa creeze un efect estetic placut si organizeaza continutul.

Un grid poate sa defineasca mai multa informatie.
Un layout bine organizat ofera constanta de la o pagina la alta si defineste ce tip de informatie este oferita in diferite momente.( de exemplu: o zona laterala poate oferi informatie secundara; informatia despre copyright si informati juridice etc pot fi plasate la finanlul paginii etc)

Un grid poate uni serii.
Daca ai un ghid planificat pentru plasarea logourilor, titlurilor, imaginilor si/sau a textului in orice domeniu (carti de vizita, reclame, layout-uri pentru pagini web) iti va fi mai usor sa "legi" toate elementele. Deci gridul poate fi un element foarte important pentru un brand.

Pentru web-design, wireframes sunt folosite pentru a planifica un grid. Wireframe-ul este un ghid vizual de baza folosit pentru a sugera layout-ul si plasarea elementelor fundamentale de design din interfata.

Wireframe-urile sunt o modalitate foarte buna de a crea layout-ul site-ului fara sa te lovesti de detalii artistice. Ele permit sa te concentrezi pe plasarea continutului (navigarea, titluri, continut). Aceasta tehnica este practicata si in designul pentru imprimare. Daca site-ul are un layout multi-coloana (o zona de continut si una sau doua zone laterale) poti folosi elemente de structura (markup) (de obicei un tag div,desi asta poate varia in functie de continut) pentru a defini zonele respective, formatandu-le in coloane, randuri sau ce trebuie in functie de wireframe. Poti sa adopti aceeasi abordare pentru a formata antetul si zona de jos a paginii.

Incepi crearea
Aici ai  un exemplu de grid pe care l-ai putea vedea in mod obisnuit la un site.

Out of the box - img1


Am impartit la 5 latimea de 960px si am folosit rezultatul de 192px ca unitate la grid - coloanele vor avea aceasta latime si toate celelalte elemente de design vor fi proportionale cu ea. Antetul are inaltimea tot de 192px.

Elementele de structura (markup) si formatarile pentru acest layout pot fi foarte directe si ar arata probabil ca acest HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Example Layout</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<paginatie_link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="page">
<div id="header">
<p>Header content</p>
</div>
<div id="content-primary">
<p><strong>Primary content.</strong> Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. Suspendisse pharetra, arcu in dapibus 
sagittis, felis leo rhoncus erat, non porttitor urna libero vitae 
nibh. Ut convallis eros sed magna.</p>
<p>Aenean enim purus, adipiscing a, vehicula ut, tempor vitae, justo. 
Nam laoreet mauris vitae elit. Vivamus eros quam, euismod bibendum, 
pellentesque ut, tristique ut, nisl. <a href="#">Vestibulum ante 
ipsum primis</a> in faucibus orci luctus et ultrices posuere cubilia 
Curae; Suspendisse non metus. Nullam tempor dictum sapien. Duis enim. 
In ligula. Cras ut enim. Sed dapibus ante in eros. Nulla facilisi. In 
rhoncus eleifend nunc. Sed risus nulla, pretium in, porta eget, lacinia 
eu, nunc. In hac habitasse platea dictumst. Vestibulum feugiat lectus 
et justo. Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Sed aliquet dolor nec ipsum.</p>
<p><a href="#">Ut erat nibh</a>, aliquet ut, congue at, tempus in, nunc. 
Ut aliquet leo et lectus volutpat molestie. Vivamus nunc. Nulla facilisi. 
Suspendisse dictum nunc tempus elit. Nullam urna quam, bibendum quis, 
tincidunt a, nonummy euismod, metus. Etiam convallis, dui venenatis 
feugiat elementum, justo lacus lobortis libero, vel iaculis nibh lectus 
eu urna. Vivamus arcu. In facilisis quam et lacus. Suspendisse sit amet 
neque ac enim lobortis ullamcorper. Etiam faucibus sapien ut nunc. Nullam 
consectetuer vehicula arcu.</p>
</div>
<div id="content-secondary">
<p><strong>Secondary content.</strong> Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. Suspendisse pharetra, arcu in dapibus 
agittis, felis leo rhoncus erat, non porttitor urna libero vitae nibh. 
Ut convallis eros sed magna. Aenean enim purus, adipiscing a, vehicula ut, 
tempor vitae, justo. Nam laoreet mauris vitae elit. This is interesting 
information. Ut erat nibh, aliquet ut, congue at, tempus in, nunc. 
Ut aliquet leo et lectus volutpat molestie. Vivamus nunc. 
<a href="#">Read&nbsp;more&nbsp;&rarr;</a> </p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
Pagina:
1 234567 »
comenteaza printeaza
Alte tutoriale CSS:
Noteaza acest tutorial
Rating tutorial
 
(8 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4175
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4085
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4055
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
3875
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Python Word Bridge HTML XML AJAX JSON Flash StyleSheet RoR PSD COREL DRAW Sony Vegas Javascript SEO Fireworks XHTML Dreamweaver Fotografie MySQL Excel Lightroom Verilog Action Script Gimp Powerpoint PHP Outlook Vista Ruby on Rails SWF Photoshop Java Illustrator Swift 3D CSS
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software