Com crear una barra de navegació a partir duna llista denllaços no ordenats a Dreamweaver

Aquí teniu un gran truc de CSS per convertir una llista amb vinyetes en una barra de navegació a Dreamweaver amb un simple efecte de rollover. L'ús d'una llista amb vinyetes per a les barres de navegació és una convenció ben acceptada per als llocs web que compleixen els estàndards d'accessibilitat actuals.

Crèdit: Fotos de istockphoto.com

Els mateixos enllaços encara es troben a la llista no ordenada, però l'aplicació dels estils canvia dràsticament la seva aparença.

Crèdit: Fotos de istockphoto.com

Per crear una barra de navegació amb CSS per redefinir la llista no ordenada i les etiquetes d'enllaç, seguiu aquests passos:

Feu clic per situar el cursor on voleu crear la barra de navegació a la pàgina.

Introduïu el text que voleu servir com a enllaços, separant cadascun prement la tecla Retorn o Retorn per crear un retorn de paràgraf.

Per formatar els enllaços com a llista no ordenada, separeu cada línia de text que vulgueu enllaçar amb a

etiqueta.

Creeu enllaços seleccionant cada fragment de text al seu torn, fent clic a la icona d'hiperenllaç al tauler Inserció comú i, a continuació, seleccionant la pàgina a la qual voleu enllaçar o introduint un URL.

Arrossegueu per seleccionar tot el conjunt d'enllaços i, a continuació, feu clic a la icona Llista no ordenada a l'inspector de propietats.

Apareix una vinyeta al començament de cada enllaç. Si cap enllaç no està configurat amb una vinyeta separada, feu clic per suprimir l'espai entre aquest i l'enllaç anterior i, a continuació, premeu Retorn o Retorn per separar els enllaços amb un retorn de paràgraf.

Per afegir a

etiqueta al voltant d'una llista d'enllaços (o qualsevol altre contingut que ja estigui a una pàgina), seleccioneu el contingut i, a continuació, feu clic a la icona Div al tauler Common Insert.

S'obre el quadre de diàleg Insereix div.

Afegint a

etiquetar a la llista no ordenada d'enllaços és útil si voleu afegir format.

Trieu Selecció envoltant a la llista desplegable Insereix.

Per a un control més precís sobre on n'afegiu un nou

etiqueta, podeu triar opcions de la llista desplegable Insereix a la part superior del quadre de diàleg Insereix div.

Introduïu un nom al camp Classe o al camp ID.

A

L'etiqueta amb el nom de classe o identificador que heu introduït s'afegeix automàticament a la pàgina que envolta la llista d'enllaços.

A la part inferior del quadre de diàleg Insereix div, feu clic al botó Nova regla CSS.

El nou nom de la regla CSS s'afegeix a la llista de noms d'estil al tauler CSS Designer Selectors.

Al tauler Propietats, especifiqueu la configuració desitjada per a color, fons, mida, marges i farciment.

El format d'estil s'aplica automàticament al contingut del fitxer

etiqueta perquè heu aplicat l'estil tal com el vau crear als passos 5-7.

Per crear un estil compost que formatearà la llista no ordenada només quan s'utilitza a la barra de navegació, creeu un estil compost que inclogui el nom de classe .navbar:

Col·loca el cursor a qualsevol lloc de la llista amb vinyetes.

Feu clic al signe més (+) a la part superior del tauler Selectors.

Al camp Nom del selector, assegureu-vos que el Dreamweaver hagi introduït automàticament .navbar ul com a nom d'un estil nou al tauler Selectors.

Al tauler Propietats, establiu els marges i el farciment a 0.

Creeu un estil compost per redefinir les etiquetes d'elements de la llista:

Col·loca el cursor a qualsevol lloc de la llista amb vinyetes.

Feu clic al signe més a la part superior del tauler Selectors.

Al camp Nom del selector, assegureu-vos que el Dreamweaver hagi introduït automàticament .navbar ul li com a nom d'un estil nou al tauler Selectors.

Al tauler Propietats, configureu Visualització en línia.

Canvieu el tipus d'estil de llista a Cap per eliminar la vinyeta.

Estableix els marges esquerre i dret a 20 píxels.

Aquest pas separa els elements de la llista entre si a la llista horitzontal. Podeu canviar la configuració per crear la quantitat d'espai entre enllaços que millor s'adapti al vostre disseny.

Creeu un estil per redefinir l'etiqueta d'enllaç:

Feu clic per situar el cursor dins d'un enllaç a la barra de navegació.

Feu clic al signe més a la part superior del tauler Selectors.

Si voleu canviar el nom de l'estil, feu doble clic al nom al tauler Selectors i introduïu el nom que voleu utilitzar.

A la secció Text del panell Propietats, establiu Text-Decoration a Cap.

Encara a la secció Text, trieu un color del pou de color per especificar el color dels enllaços quan es carreguen en una pàgina.

Creeu un estil nou per redefinir l'etiqueta de l'enllaç per passar el cursor per tal que el color de l'enllaç canviï quan un usuari passi el cursor per sobre de l'enllaç:

Feu clic al signe més a la part superior del tauler Selectors.

Al camp Nom del selector, introduïu .navbar a:hover.

A la secció Text del panell Propietats, establiu Text-Decoration a Cap.

Encara a la secció Text, trieu un color del pou de color per especificar el color de l'enllaç quan els usuaris passen el cursor per sobre de l'enllaç.

Creeu un estil nou per redefinir l'etiqueta d'enllaç visitada de manera que el color de l'enllaç canviï després que un usuari faci clic en un enllaç:

Feu clic al signe més a la part superior del tauler Selectors.

Al camp Nom del selector, introduïu .navbar a:visited.

A la secció Text del panell Propietats, establiu Text-Decoration a Cap.

Encara a la secció Text, trieu un color del pou de color per especificar el color de l'enllaç després d'haver-lo visitat.

Feu clic al botó Live a la part superior de l'espai de treball o feu clic al botó Vista prèvia per veure la pàgina en un navegador i veure l'efecte dels estils d'enllaç.