Come evidenziare Tab di un sito web

September 13

Come evidenziare Tab di un sito web


Un utile trucco di Web design è possibile utilizzare è quello di evidenziare una scheda nella barra di navigazione. La maggior parte dei web designer evidenziare la pagina corrente un visitatore sta leggendo. In questo modo si rende il vostro sito più facile da navigare, dal momento che i visitatori possono gettare uno sguardo su alla barra di navigazione e avere un'idea di dove sono sul tuo sito web. Sui siti web HTML statiche, questo trucco è facile da implementare con un po 'di Cascading Style Sheet codice (CSS).

istruzione

1 Aprire il file HTML per ogni pagina del tuo sito web che contiene la barra di navigazione. Utilizzare un editor di codice o un editor di testo come Blocco note per aprire i file.

2 Individuare il codice per la barra di navigazione. La maggior parte dei siti web utilizzano le liste non ordinate per creare la navigazione e poi lo stile degli elenchi in un file di Cascading Style Sheet (CSS). Il "<ul>" tag crea liste non ordinate e possono contenere un nome ID o classe di "menu" o "NAV".

3 Cercare scheda della pagina Web all'interno della barra di navigazione. Il codice scheda di solito si presenta così:

<Li> <a href="path/to/page.html" title="My Page"> mia pagina </a> </ li>

È necessario modificare il codice della scheda che punta alla pagina Web che si sta modificando, come ad esempio la scheda "Contatti" all'interno di un file corrispondente denominato contactus.html.

4 Aggiungere un nome di classe come "evidenziare" o "corrente" per la scheda corrente, trasformandolo in qualcosa di simile a questo:

<Li> <a href="path/to/page.html" title="My Page" class="current"> mia pagina </a> </ li>

Fate questo per ogni pagina del tuo sito web.

5 Cercare una "<link>" tag verso la parte superiore del vostro file HTML e leggere il nome del file CSS che incorpora. Aprire il file se ne trovi uno. Creare un file vuoto e salvarlo come un file CSS se il vostro sito non ha ancora un file CSS esterno. Aggiungere questo codice tra i "<head>" tag e prima di ogni "<style>" tag su ogni pagina del tuo sito web:

<Link rel = "stylesheet" href = "path / to / stylesheet.css" type = "text / css" />

6 Scrivere il seguente codice CSS per indirizzare le schede evidenziato o correnti nella barra di navigazione:

.attuale {

background-color: red;

}

Sostituire "rosso" con il nome del colore o il codice esadecimale per ogni colore che si desidera utilizzare per evidenziare la scheda.

Consigli e avvertenze

  • Se l'evidenziazione non funziona bene con il tuo sito web, provare a spostare il nome della classe del tag di ancoraggio "<a>" in "<li>" tag elemento della lista.
  • Quando si evidenzia una linguetta particolare in un sistema di contenuti dinamici come WordPress, Drupal o Joomla, consultare le relative istruzioni su come aggiungere il codice per i modelli. Regolare HTML non funzionerà.
  • Eseguire il backup di file CSS HTML e prima di loro modifica.