Comment mettre une photo dans le titre d`une page web en utilisant dreamweaver

Video: #5 HTML - CSS : Insérer une image

Au sens strict, il est impossible d`inclure des images dans le section d`un document HTML. Ce que les internautes perçoivent généralement comme une image à côté d`un titre de page Web est en fait une petite image appelée favicon. Le terme est une version abrégée de "icône de favori," ainsi nommé parce qu`il apparaît le plus souvent à côté du titre d`une page Web enregistrée dans le dossier Favoris d`un navigateur Web. Utilisez Adobe Dreamweaver pour insérer un favicon dans le titre de votre page Web.

Video: TUTOriel HTML Comment mettre un icon et titre sur un site, ©Smilight

1

Sélectionnez une image appropriée. Favicons sont très petites, mesurant seulement 16 pixels carrés, de sorte que l`image que vous sélectionnez doit être assez simple pour rester lisible au format miniature. logos complexes ressemblent souvent à l`étroit ou semblent avoir des bords dentelés lorsque redimensionné à 16 pixels. Si cela vous arrive, pensez à utiliser une autre image qui ne comprend pas votre logo, mais reflète plutôt soit le type de contenu sur votre site ou la palette de couleurs du site. Dans les deux cas, assurez-vous que votre image est un carré parfait pour assurer une réduction.

2

Redimensionner votre image. Après avoir choisi une image qui réduit bien, ouvrez le fichier dans Photoshop. Dans le menu en haut de l`écran, sélectionnez "Image," puis clique "Taille de l`image." Dans la boîte de dialogue qui, changer la largeur et la hauteur de l`image à 16 pixels, puis cliquez sur OK.

3

Enregistrez votre image en format GIF ou PNG. images GIF et PNG expérience le plus petit nombre de problèmes lors de la conversion au format ICO à l`étape suivante. Pour enregistrer votre image dans l`un de ces formats, sélectionnez "Fichier" dans le menu de Photoshop, puis cliquez sur "Enregistrer sous." Donnez votre favicon un nom au fichier, puis cliquez sur le menu déroulant en dessous du champ de nom de fichier et sélectionnez la "CompuServe GIF" ou "PNG" option. Cliquez "Sauvegarder."

4

Convertir votre image au format ICO. Photoshop ne peut pas enregistrer des fichiers d`image au format ICO requis lui-même. Au lieu de cela, vous devez télécharger une Photoshop plug-in ou utiliser un utilitaire Web. Par exemple, utiliser le générateur de favicon gratuitement sur le site de favicon.cc (voir les références). De la première page de ce site, cliquez sur le "Importer l`image" bouton. Localisez le fichier GIF ou PNG créé à l`étape 3 et cliquez sur "Télécharger." En quelques secondes, l`utilitaire va transformer votre fichier dans une image pixel 16 carrés. Pour enregistrer ce sur votre ordinateur au format ICO, recherchez la rubrique intitulée "Aperçu" près du bas de la page, puis cliquez sur "Télécharger favicon." Enregistrez ce fichier dans le dossier avec le reste de vos fichiers de page Web.

5

Ajouter le favicon à votre page Web. Favicons lien vers des pages web individuelles de la même manière que les fichiers externes, tels que les javascripts et Cascading Style Sheets. Ouvrez votre page Web dans Dreamweaver, puis passer en mode Code en sélectionnant "Vue" dans le menu en haut de votre écran et en cliquant sur la "Code" option. Ensuite, inclure le code suivant entre l`ouverture et la fermeture de votre page web et après la Mots clés:

Ce code suppose que le favicon existe dans le dossier images. Si vous placez votre favicon ailleurs, mettre à jour l`emplacement contenu dans chaque attribut href. Pourquoi avez-vous besoin d`inclure deux liens? compatibilité inter-navigateur. Internet Explorer 7 gère favicons différemment que les autres navigateurs et exige une règle unique pour assurer une présentation précise.

6

Enregistrez votre page Web, puis ouvrez-le dans votre navigateur. Vous verrez maintenant votre favicon. Si votre navigateur est déjà ouvert, vous devrez peut-être fermer complètement et redémarrer avant le favicon apparaît. Notez également que certains navigateurs montrent favicons pour les titres de page situés dans le dossier Favoris, et non la barre de titre du navigateur lui-même.

Articles Tu auras besoin de

Les références

  • lien Favicon.cc: Générateur favicon

A propos de l`auteur

Craig Witt a écrit professionnellement depuis 2005 dans les secteurs public et privé en tant que journaliste, le marketing et les relations publiques concepteur-rédacteur professionnel. Il écrit le plus souvent des logiciels grand public et le matériel des articles pratiques pour eHow. Witt a obtenu un baccalauréat ès arts en communications de l`Université de Washington.

Articles connexes