Cum se creează o bară de navigare dintr-o listă neordonată de linkuri în Dreamweaver

Iată un excelent truc CSS pentru a transforma o listă cu marcatori într-o bară de navigare în Dreamweaver, cu un efect de rollover simplu. Utilizarea unei liste cu marcatori pentru barele de navigare este o convenție bine acceptată pentru site-urile web care respectă standardele actuale de accesibilitate.

Credit: Fotografii de istockphoto. com

Aceleași legături sunt încă incluse în lista neordonată, dar aplicarea stilurilor își schimbă dramatic aspectul.

Credit: Fotografii de istockphoto. com

Pentru a crea o bară de navigare utilizând CSS pentru a redefini lista neordonată și etichetele de legătură, urmați acești pași:

1. Faceți clic pentru a plasa cursorul în locul în care doriți să creați bara de navigare în pagină.

2. Introduceți textul pe care doriți să-l afișați ca link-uri, separând fiecare apăsând tasta Return sau Enter pentru a crea un retur de paragraf.

   Pentru a formata linkurile ca o listă neordonată, separați fiecare linie de text pe care doriți să o legați cu o etichetă

3. Creați linkuri prin selectarea fiecărei bucăți de text pe rând, făcând clic pe pictograma Hyperlink din panoul Common Inserare, apoi selectând pagina pe care doriți să o conectați sau introduceți o adresă URL.

4. Trageți pentru a selecta întregul set de linkuri, apoi faceți clic pe pictograma Listă neordonată din inspectorul Proprietăți.

   Un punct bullet apare la începutul fiecărui link. Dacă niciun link nu este setat cu un glonț separat, faceți clic pentru a șterge spațiul dintre acesta și link-ul din fața acestuia, apoi apăsați Return sau Enter pentru a separa linkurile cu un returnare de paragraf.

   

5. Pentru a adăuga o etichetă în jurul unei liste de linkuri (sau a oricărui alt conținut care se află deja pe o pagină), selectați conținutul și apoi faceți clic pe pictograma Div din panoul Common Insert.

   Se deschide caseta de dialog Insert Div.

   Adăugarea unei etichete în jurul listei neordonate de linkuri este utilă dacă doriți să adăugați formatarea.

6. Alegeți opțiunea Wrap Around Selection din lista derulantă Insert.

   Pentru un control mai precis asupra locului în care adăugați o nouă etichetă, puteți alege opțiunile din lista verticală Inserați în partea de sus a casetei de dialog Insert Div.

   

7. Introduceți un nume în câmpul Clasă sau în câmpul ID.

   O etichetă cu numele de clasă sau de identificare pe care ați introdus-o este adăugată automat la pagina din jurul listei de linkuri.

8. În partea de jos a casetei de dialog Insert Div, faceți clic pe butonul New CSS Rule.

   Noul nume de regulă CSS este adăugat la lista de nume de stil din panoul Selectori de desene CSS.

9. În panoul Proprietăți, specificați setările dorite pentru culoare, fundal, dimensiune, margini și umplutură.

   Formatarea stilului este aplicată automat conținutului etichetei deoarece ați aplicat stilul așa cum l-ați creat în pașii 5-7.

10. Pentru a crea un stil compus care să formateze lista neordonată numai atunci când este utilizată în bara de navigare, creați un stil compus care include numele clasei. navbar:

    1. Plasați cursorul oriunde în lista cu marcatori.

    2. Faceți clic pe semnul plus (+) din partea superioară a panoului Selectors.

    3. În câmpul Nume selector, asigurați-vă că Dreamweaver a introdus automat. navbar ul ca numele unui nou stil în panoul Selectori.

    4. În panoul Proprietăți, setați margini și umplutură la 0.

11. Creați un stil compus pentru a redefini etichetele elementului de listă:

    1. Plasați cursorul oriunde în lista cu colturi.

    2. Faceți clic pe semnul plus din partea de sus a panoului Selectors.

    3. În câmpul Nume selector, asigurați-vă că Dreamweaver a introdus automat. navbar ul li ca numele unui nou stil în panoul Selectori.

    4. În panoul Properties, setați Display to Inline.

    5. Schimbați tipul stilului listă la Nici unul pentru a elimina bulletul.

    6. Setați marginile din stânga și din dreapta la 20 de pixeli.

       Acest pas separă elementele de listă unul de altul din lista orizontală. Puteți schimba setarea pentru a crea spațiul dintre legăturile care se potrivesc cel mai bine designului dvs.

12. Creați un stil pentru a redefini eticheta de link:

    1. Faceți clic pentru a plasa cursorul într-un link din bara de navigare.

    2. Faceți clic pe semnul plus din partea de sus a panoului Selectors.

    3. Dacă doriți să modificați numele stilului, faceți dublu clic pe nume în panoul Selectori și introduceți numele pe care doriți să îl utilizați.

    4. În secțiunea Text din panoul Proprietăți, setați Text-Decoration la None.

    5. Încă în secțiunea Text, alegeți o culoare din culoarea bine pentru a specifica culoarea legăturilor atunci când sunt încărcate pe o pagină.

13. Creați un stil nou pentru a redefini eticheta hover-link, astfel încât culoarea linkului să se modifice atunci când un utilizator rotește un cursor peste link:

    1. Faceți clic pe semnul plus din partea superioară a panoului Selectors.

    2. În câmpul Nume selector, introduceți. navbar a: hover.

    3. În secțiunea Text din panoul Proprietăți, setați Text-Decoration la None.

    4. Încă în secțiunea Text, alegeți o culoare din culoarea bine pentru a specifica culoarea link-ului atunci când utilizatorii își rotește cursorul peste link.

14. Creați un stil nou pentru a redefini eticheta linkului vizitat, astfel încât culoarea linkului se modifică după ce un utilizator face clic pe un link:

    1. Faceți clic pe semnul plus din partea de sus a panoului Selectori.

    2. În câmpul Nume selector, introduceți. navbar a: vizitat.

    3. În secțiunea Text din panoul Proprietăți, setați Text-Decoration la None.

    4. Încă în secțiunea Text, alegeți o culoare din culoarea bine pentru a specifica culoarea linkului după ce a fost vizitată.

15. Faceți clic pe butonul Live din partea de sus a spațiului de lucru sau faceți clic pe butonul Previzualizare pentru a vizualiza pagina într-un browser pentru a vedea efectul stilurilor de legătură.