Codice HTML per mettere un'immagine nella barra di navigazione

August 28

Codice HTML per mettere un'immagine nella barra di navigazione


Aggiunta di un'immagine o un pulsante al menu di navigazione grafica del tuo sito web può aiutare a etichettare chiaramente il contenuto in modo che i visitatori possono navigare nel sito facilmente. Il codice Hypertext Markup Language per l'aggiunta di un'immagine a un menu di navigazione è lo stesso codice IMG SRC utilizzato per aggiungere un'immagine alla sezione del corpo principale di una pagina Web. Per garantire l'immagine viene visualizzata correttamente senza danneggiare il design menu di navigazione o il layout generale della pagina, è necessario utilizzare una piccola immagine - di solito a livello solo 10 a 20 pixel dello schermo e profondo - piuttosto che una grande foto. Potrebbe anche essere necessario per regolare la larghezza complessiva dell'elemento barra di navigazione per accogliere lo spazio aggiuntivo richiesto dal immagine.

Preparare l'immagine

Prima di aggiungere l'immagine con codice HTML, aprire il file di immagine nel vostro programma di grafica preferito o applicazione grafica predefinita del computer, ad esempio Microsoft Paint. Annotare la larghezza e l'altezza dell'immagine in pixel dello schermo. Vernice visualizza Microsoft queste informazioni nella barra di stato in basso sotto l'immagine. Se necessario, ridurre la dimensione dell'immagine finché non sia più di 10 a 20 pixel in larghezza e altezza. Carica l'immagine di server host del tuo sito web.

Trovare il menu di navigazione codice html

Avviare il programma di editor HTML, applicazione di progettazione Web o l'editor di testo Blocco note. Aprire la pagina Web che contiene la barra di navigazione a cui si desidera aggiungere l'immagine. Scorrere fino al codice esistente per la vostra barra di navigazione. Si dovrebbe essere in grado di trovare questo, cercando per l'elenco delle tue pagine web e gli URL per quelle pagine che compongono il codice per il menu di navigazione. Su alcuni siti, l'elemento di design potrebbe essere etichettato con "<- - - - Menu di navigazione - - - ->" o il testo simile.

Tipi HTML Codice della Navigazione

Un menu di navigazione del sito HTML il più delle volte contenuta all'interno di un elemento tabella HTML o un elemento divisionale DIV. Trova l'attributo width per la divisione o la tabella; . Per esempio, <div style = "width: 400px"> o <table width = "400"> Aumentare l'attributo width per incorporare la larghezza dell'immagine, ad esempio, modificarlo in "420." Anche se è necessario modificare la attributo width nell'elemento menu di navigazione, non dovrebbe aver bisogno di modificare la larghezza di altri elementi di design circostanti come la maggior parte delle strutture di pagina Web hanno sufficiente flessibilità in loro per accogliere piccoli cambiamenti dimensione del layout.

Aggiungere l'immagine del codice HTML

Per aggiungere il codice HTML per l'immagine, fare clic nel menu di navigazione codice nella posizione di inserimento per il codice dell'immagine. Digitare o incollare il seguente codice in questa posizione:

<Img src = "images / example-button.gif" alt = "example">

Modificare il percorso del file all'interno del primo gruppo di virgolette alla corretta cartella e file di percorso relativo alla pagina Web. In questo esempio, il file di immagine GIF è contenuta in una sottocartella "immagini" nella directory principale del sito. Se si aggiunge l'immagine nella cartella principale principale, non sarà necessario il "images /" parte del percorso del file e solo il nome del file sarà sufficiente. cambiare anche la descrizione dell'immagine testo "Alt" per una descrizione di uno o due parole dell'immagine. Salvare la pagina Web e caricarlo sul server Web per implementare le modifiche.