Pagina principala – Meniul principal
Salutare! Aceasta serie de tutoriale te va invata cum sa dezvolti o pagina de prezentare completa pentru afacerea ta. Tutorialul este compus din 4 parti:
- Pagina principala – Meniul Principal
- Pagina principala – Continutul primei pagini
- Hero Slider
- Sectiuni
- Footer
- Pagina principala – SEO
- Pagina de contact – Formular de contact
Astazi vom aborda prima parte – cum sa facem meniul principal pentru site-ul nostru de prezentare.
Meniul principal
Pentru aceasta serie de tutoriale, vom dezvolta un site web pentru o companie fictiva MySa care se ocupa cu design-ul caselor. Meniul principal trebuie sa contina link-uri catre toate paginile site-ului web, pentru ca utilizatorul sa poata ajunge la informatia dorita in cel mai scurt timp.
Aplicatii folosite
Pentru acest tutorial vom folosi Visual Studio Code si Google Chrome.
Structura de fisiere
Fisierele care compun un website sunt, de obicei, pagini html, fisiere css si fisiere javascript. Impreuna, aceste fisiere compun structura vizuala si functionala a paginilor web.
Bootstrap
Framework-ul Bootstrap ne ofera o lista lunga de componente care ne scutesc de scris cod duplicat. Mai toate website-urile au aceeasi structura: un meniu, un body, un footer, o pagina de contact, etc – iar acest framework ne permite sa refolosim multe din acestea in paginile noastre.
Pentru a folosi Bootstrap, va fi nevoie sa adaugam un link catre sursa acestuia in pagina noastra principala index.html.
<html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"/> </head> <body> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> </body> </html>
In interiorul tag-ului body vom adauga codul paginii noastre. Tot ce adaugam aici va fi vizibil atunci cand un vizitator va accesa website-ul nostru. Vom incepe cu meniul principal.
Meniul principal
Vom folosi componentul navbar, parte din Bootstrap, care ne permite sa definim un meniu principal de navigare. Acest tag html va trebui adaugat in interiorul tag-ului body si va arata asa:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">MySa</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Acasa</a>
</li>
<li class="nav-item">
<a class="nav-link" href="despre.html">Despre</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Daca vei salva fisierul index.html in care am adaugat codul de mai sus folosind browser-ul preferat (Chrome / Firefox / etc), vei observa noul meniu afisat:
Daca doresti sa schimbi numele companiei pentru ca dezvolti site-ul web, poti modifica linia de cod de mai jos, inlocuind textul MySa cu orice doresti.
<a class="navbar-brand" href="#">MySa</a>
Dupa cum observi, folosim un tag de tip <a>, atribuindu-i clasa de stil navbar-brand pe care o imprumutam din fiserele de stil ale framework-ului Bootstrap si care face textul pe care il scriem noi sa apara in partea din stanga sus si sa aiba o marime de font mai mare decat celelalte butoane ale meniului.
Restul butoanelor (Acasa, Despre si Contact) se pot modifica schimband respectivul text din fisierul sursa index.html.
Vei observa la urmatoarea linie de cod ca butonul Acasa este diferit fata de celelalte 2.
<a class="nav-link active" aria-current="page" href="index.html">Acasa</a>
Clasa „active” si atributul aria-current=”page” face ca acest meniu sa apara colorat negru, in comparatie cu celelalte butoane care sunt gri. Atunci cand vom dezvolta celelalte pagini, vom adauga aceste elemente in meniul corespondent acelei pagini.
Culori si personalizare
Observam ca meniul imprumutat din Bootstrap are fundalul gri si textul negru – daca dorim sa schimbam aceste culori, trebuie sa adaugam clase de stil in fisierul nostru de stil style.css.
De exemplu, daca dorim sa schimbam culoarea butoanelor inactive din meniu, va trebui sa suprascriem stilul imprumutat din Bootstrap. Pentru a face acest lucru, in fisierul style.css, am adaugat urmatoarele:
.navbar-light .navbar-nav .nav-link {
color: brown;
}
Motivul pentru care am adaugat culoarea brown pentru clasele navbar-light, navbar-nav si nav-link este dat de locatia butoanelor in interiorul paginii noastre. Daca te vei uita in fisierul index.html, vei observa ca fiecare meniu are clasa nav-link, care se aflat sub navbar-nav, care la randul sau este situat sub navbar-light.
Am adaugat un link catre acest fisier imediat sub linkul catre Bootstrap, in index.html.
<link href="style.css" rel="stylesheet"/>
Iar rezultatul este:
In acest moment, fiecare buton din meniu ne trimite catre o pagina html diferita.
- Acasa – ne trimite pe index.html
- Despre – ne trimite pe despre.html
- Contact – ne trimite pe contact.html
Va trebui sa adaugam aceste fisiere in proiectul nostru:
Continutul acestor pagini va fi similar (pentru. moment) – am copiat continutul din fisierul index.html si l-am pus in cele 2 noi pagini. Singura diferenta va fi, asa cum am spus anterior, butonul din meniu care va avea cele 2 particularitati: clasa „active” si atributul aria-current=”page”.
Meniul din despre.html:
<a class="nav-link active" aria-current="page" href="despre.html">Despre</a>
Meniul din contact.html:
<a class="nav-link active" aria-current="page" href="contact.html">Contact</a>
Nu uitam sa eliminam aceste atribute din vechiul buton acasa.
Concluzie
Sper ca acest tutorial te-a ajutat si ca ai reusit sa intelegi cele explicate. Arhiva cu fisierele o poti gasi mai jos. Spor la treaba!