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  /  Navigare (1)

Navigare in CSS

19.04.2008
Navigare in CSS

Daca nu te limitezi la siteuri web cu o singura pagina va trebui sa creezi navigarea. Ea este una din cele mai importante componente ale web-designului si necesita o atentie sporita pentru ca vizitatorii sa poata naviga pe site cu usurinta.

Total vizualizari: 21401 21401 afisari   |   Comentarii  2   |   Rating   |   (5 voturi)   |   Timp necesar: 1h 30 min 1h 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 234567891011 »
comenteaza printeaza

Daca nu te limitezi la siteuri web cu o singura pagina va trebui sa creezi navigarea. Ea este una din cele mai importante componente ale web-designului si necesita o atentie sporita pentru ca vizitatorii sa poata naviga pe site cu usurinta.

CSS este recunoscut pentru posibilitatea crearii unui sistem de navigare simplu si eficient. Metodele mai vechi de creare al sistemului de navigare se bazau pe multe imagini, tabele si JavaScript ceea ce afecta accesibilitatea si usurinta de folosire a siteului. Daca pe site nu se poate naviga folosind un dispozitiv/aplicatie (device) care nu suporta JavaScript, nu numai ca blochezi accesul utilizatorilor care au oprit JavaScript dar si aplicatiilor text-only precum motoare de cautare si screen readers si astfel nu vor trece niciodata de prima pagina pentru a indexa continutul siteului.

CSS iti permite sa creezi un sistem de navigare atractiv care, in realitate nu este nimic altceva decat text -- text care care poate fi marcat astfel incat sa fie si accesibil si inteligibil de catre toti care nu pot vedea designul fizic, dar vor totusi sa acceseze continutul. In acest capitol vom trece in revista o serie de solutii pentru a crea un sistem de navigatie bazat pe CSS. Unele se preteaza a fi implementate pe un site existent pentru a-l face sa incarce mai repede si sa impulsioneze accesibilitatea inlocuind navigarea de moda veche bazata pe imagini. Alte solutii sunt mai potrivite pentru incorporarea intr-un layout CSS pur.

Inainte sa incepi, descarca acest articol in format PDF, astfel incat sa il folosesti offline. (PDF-ul include si alte capitole din The CSS Anthology, 101 Essential Tips, Trisks and Hacks desre folosirea CSS cu imagini , accesibilitate si aplicatii alternative)
 
Cum creez o lista structurala ca un meniu de navigatie?
Pentru site-urile noi ar fi bine sa eviti folosirea tabelurilor pentru layout sau foloseste-le numai acolo unde este absolut necesar. Eliminand elementele tabelare vei vedea ca pagina ta va contine mult mai putin markup. Un sistem de navigare este pur si simlu o lista cu locuri pe care utilizatorii le viziteaza pe site, deci o lista neordonata este modalitatea ideala de a marca navigarea ta.

Sistemul de navigare din imaginea de mai jos este structurat ca o lista si formatat (styled) folosind CSS.

Navigare folosind CSS - img1

<!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-US">
<head>
<title>Lists as navigation</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listnav1.css" />
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
</body>
</html>

#navigation {
width: 200px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}

Pentru a crea un sistem de navigare bazat pe o lista neordonata, mai intai creaza lista, plasand fiecare link de legatura/navigare inauntrul unui element <li>.

<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>

Apoi, incadreaza textul cu <div> si cu un ID corespunzator (element de identificare, denumire).

<div id="navigation">
<ul>
<li><a href="#">Recipes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>

Aceasta marcare nu arata extraordinar daca lasam formatarea implicita a browserului.


Navigare folosind CSS - img2

Pagina:
1 234567891011 »
comenteaza printeaza
Alte tutoriale CSS:
Noteaza acest tutorial
Rating tutorial
 
(5 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
COMENTARII (2) spune-ti parerea
alexandra alexandra , Luni, 27 Februarie 2012, ora 05:41
#2

@craca

Daca vrei sa aliniezi elementele unele sub altele, dupa fiecare sectiune a meniului ii poti pune un div cu clear:both si width:100%. Sau - pune fiecare sectiune a meniului intr-un alt div care sa nu aiba float:left.

Raporteaza acest comentariu ca injurios!
craca , Duminica, 26 Februarie 2012, ora 08:29
#1

Foarte interesant, dar si mai interesant ar fi daca ne-ati putea explica cum facem sa mutam elementele in jos ale meniului at cand dorim sa facem un meniu vertical cu submeniuri ( adica nu mai folosim float:left)

Raporteaza acest comentariu ca injurios!
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
4305
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4165
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4160
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
3985
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
MySQL RoR Gimp XHTML CSS COREL DRAW HTML Lightroom XML Action Script Bridge Powerpoint Swift 3D Vista Excel Illustrator Dreamweaver Flash AJAX Sony Vegas PSD Ruby on Rails StyleSheet SEO Fotografie Outlook Fireworks Java Verilog Python Javascript Photoshop Word JSON SWF PHP
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