Come mettere una foto nel titolo di una pagina web utilizzando Dreamweaver

September 2

Come mettere una foto nel titolo di una pagina web utilizzando Dreamweaver


A rigor di termini, non è possibile includere le immagini all'interno del <title> sezione di un documento HTML. Quello che gli utenti di Internet in genere percepiscono come una foto accanto al titolo pagina web è in realtà una piccola immagine chiamata una favicon. Il termine è una versione ridotta di "icona preferita", così chiamato perché sembra più comunemente accanto al titolo di una pagina web salvata nella cartella Preferiti di un browser web. Utilizzare Adobe Dreamweaver per inserire una favicon nel titolo della tua pagina web.

istruzione

1 Selezionare un'immagine appropriata. Favicons sono molto piccole, che misura solo 16 pixel quadrati, per cui l'immagine selezionata deve essere abbastanza semplice da rimanere leggibili formato miniatura. loghi complessi spesso sembrano angusti o potrebbero avere bordi frastagliati quando ridimensionata a 16 pixel. Se ciò si verifica, è consigliabile utilizzare un'immagine alternativa che non include il vostro logo, ma invece riflette sia il tipo di contenuto sul tuo sito web o tavolozza dei colori del sito. In entrambi i casi, assicurarsi che l'immagine è un quadrato perfetto per garantire anche la riduzione.

2 Ridimensionare l'immagine. Dopo la scelta di una immagine che riduce bene, aprire il file in Photoshop. Nel menu nella parte superiore dello schermo, selezionare "Immagine", poi cliccare su "Dimensioni immagine". Nella finestra di dialogo risultante, cambiare sia la larghezza e l'altezza dell'immagine a 16 pixel, quindi fare clic su OK.

3 Salvare l'immagine come GIF o PNG. GIF e PNG esperienza meno problemi quando convertito in formato ICO nel passaggio seguente. Per salvare l'immagine in uno di questi formati, selezionare "File" dal menu in alto in Photoshop, quindi fare clic su "Salva con nome". Dare vostro file favicon un nome, quindi fare clic sul menu a discesa sotto il campo del nome del file e selezionare l'opzione "Compuserve GIF" o "PNG". Fai clic su "Salva".

4 Convertire l'immagine in formato ICO. Photoshop non è possibile salvare i file di immagine in formato ICO richiesto da sola. Invece, è necessario scaricare un plug-in di Photoshop o utilizzare un programma di utilità web. Ad esempio, utilizzare il generatore di favicon gratuitamente dal sito favicon.cc (vedi Bibliografia). Dalla prima pagina di questo sito, fare clic sul pulsante "Importa immagine". Individuare il file GIF o PNG creato nel passaggio 3 e fare clic su "Carica". Nel giro di pochi secondi, l'utility trasformerà il vostro file di immagine a 16 pixel quadrati in. Per salvare questo al vostro computer in formato ICO, individuare l'intestazione con l'etichetta "Anteprima" nella parte inferiore della pagina, quindi fare clic su "Download Favicon". Salvare il file nella cartella con il resto dei tuoi file delle pagine web.

5 Aggiungere la favicon alla tua pagina web. Favicon dei collegamenti a singole pagine web allo stesso modo come file esterni, come JavaScript e Cascading Style Sheets. Apri la tua pagina web in Dreamweaver, quindi passare alla visualizzazione del codice selezionando "Visualizza" dal menu nella parte superiore dello schermo e scegliere l'opzione "Codice". Successivamente, includere il seguente codice tra l'apertura e la chiusura <head> tag della tua pagina web e dopo i tag <title>:

<Link rel = "icona di collegamento" href = "images / favicon.ico" type = "image / x-icon" />
<Link rel = "icona" href = "images / favicon.ico" type = "image / x-icon" />

Questo codice presuppone esiste la favicon nella cartella immagini. Se si posiziona il favicon altrove, aggiornare la posizione contenuta in ogni attributo href. Perché è necessario includere due link? compatibilità cross-browser. Internet Explorer 7 gestisce favicon in modo diverso rispetto ad altri browser e richiede una regola unica per garantire la presentazione accurata.

6 Salva la tua pagina web, quindi aprirlo nel browser. Ora vedrete il vostro favicon. Se il browser è già aperto, potrebbe essere necessario chiudere completamente e riavviarlo prima che appaia la favicon. Si noti inoltre che alcuni browser mostrano favicon per i titoli delle pagine situate nelle cartella Preferiti non solo, la barra del titolo del browser stesso.


Articoli Correlati