|
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.
 |
<!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.
|
11590 afisari |
1h 30 min
|
Incepator
