ubiquitour.com

Cómo marcar la opción de un sitio web

Cómo marcar la opción de un sitio web

Una útil Web diseño truco que se puede utilizar es marcar una opción en la barra de navegación. Mayoría de los diseñadores Web ponen de relieve la página actual que un visitante está leyendo. Esto facilita su sitio de Internet navegar, ya que los visitantes pueden echar un vistazo para arriba en la barra de navegación y tener una idea de donde están en su sitio de Internet. En los sitios web HTML estático, este truco es fácil de implementar con un poco de código de la hoja de estilos en cascada (CSS).

Instrucciones

1 Abra el archivo HTML para cada página de su sitio web que contiene la barra de navegación. Utilice un editor de código o un editor de texto como Bloc de notas para abrir los archivos.

2 Busque el código de la barra de navegación. Mayoría de sitios Web utilice listas desordenadas para crear la navegación y luego estilo de las listas en un archivo de hoja de estilos en cascada (CSS). La etiqueta "< ul >" crea listas sin ordenar y puede contener un nombre de ID o clase de "menú" o "Nav"

3 Busque la pestaña de la Página Web en la barra de navegación. La pestaña code normalmente tiene este aspecto:

< li >< un href="path/to/page.html" title = "Mi página" > página < /a >< /li >

Necesita cambiar el código de la ficha que apunta a la página que está editando, como la pestaña "Contáctenos" dentro de un correspondiente archivo llamado contactus.html.

4 Agregar un nombre de clase como "destacado" o "actual" a la pestaña actual, cambia a algo como esto:

< li >< un href="path/to/page.html" title = "Mi página" class = "actual" > página < /a >< /li >

Hacer esto para cada página de su sitio Web.

5 Busque una etiqueta "< link >" hacia la parte superior de los archivos HTML y leer el nombre de archivo del archivo CSS que incrusta. Abrir el archivo si encuentras uno. Crear un archivo en blanco y guárdelo como un archivo CSS si su web no tiene todavía un archivo CSS externo. Agregue este código entre las etiquetas "< head >" y antes de cualquier "< style >" etiquetas en cada página de su sitio de Internet:

< link rel = "stylesheet" href="path/to/stylesheet.css" tipo = "text/css" / >

6 Escriba el siguiente código CSS para las pestañas resaltadas o actuales en su barra de navegación:

.Current {}

color de fondo: rojo;

}

Reemplace "rojo" con el nombre de color o el código hexadecimal de cualquier color que desee utilizar para marcar la opción.

Consejos y advertencias

  • Si el resaltado no funciona bien con el sitio web, trate de mover el nombre de clase de la etiqueta "< a >" anclaje dentro de la etiqueta de elemento de lista "< li >".
  • Cuando destacando una ficha determinada en un sistema dinámico de contenido como WordPress, Drupal o Joomla, consulte las instrucciones sobre cómo agregar código a sus plantillas. HTML normal no funciona.
  • Respaldo de archivos HTML y CSS antes de editarlos.