Comment mettre une photo dans le titre d'une page Web en utilisant Dreamweaver

Strictement parlant, il est impossible d'inclure des images dans le section d'un document HTML. Qu'est-ce que les internautes perçoivent généralement comme une image à côté d'un titre de la page web est en fait une petite image appelée favicon. Le terme est une version raccourcie 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.

Sommaire

  • Instructions
  • Choses que vous devez








    • Adobe Dreamweaver



    • Adobe Photoshop

    Instructions

    1. Sélectionnez une image appropriée. Favicons sont très petites, mesurant seulement 16 pixels carrés, afin que l'image que vous sélectionnez doit être suffisamment simple pour rester lisible au format miniature. Logos complexes se tournent 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 la place 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 le bien, ouvrez le fichier dans Photoshop. Dans le menu en haut de l'écran, sélectionnez "Image," puis cliquez sur "Taille de l'image." Dans la boîte de dialogue résultante, changer à la fois la largeur et la hauteur de l'image de 16 pixels, puis cliquez sur OK.

    3. Enregistrez votre image au format GIF ou PNG. GIF et PNG images éprouvent le moins de problèmes lors de la conversion au format ICO dans l'étape suivante. Pour enregistrer votre image dans l'un de ces formats, sélectionnez "Fichier" dans le menu supérieur dans Photoshop, puis cliquez sur "Enregistrer Sous." Donnez votre fichier favicon un nom, puis cliquez sur le menu déroulant ci-dessous le champ de nom de fichier et sélectionnez le "Compuserve GIF" ou "PNG" option. Cliquez "Enregistrer."

    4. Convertir votre image au format ICO. Photoshop ne peut pas enregistrer les fichiers image au format requis OIC sur son propre. Au lieu de cela, vous devez soit télécharger un plug-in Photoshop ou utiliser un utilitaire Web. Par exemple, utiliser le générateur de favicon gratuitement sur le site de favicon.cc (voir références). De la première page de ce site, cliquez sur le "Importer une image" bouton. Localisez le fichier GIF ou PNG créé à l'étape 3 et cliquez "Upload." En quelques secondes, l'utilitaire va transformer votre fichier dans une image de 16 pixels carrés. Pour sauver ce à votre ordinateur en format ICO, recherchez la rubrique intitulée "Avant-première" 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 pages 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 à la vue de 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 Tags de votre page web et après la tags:


      Ce code suppose le favicon existe dans le dossier des images. Si vous placez votre favicon ailleurs, mettre à jour l'emplacement contenue dans chaque attribut href. Pourquoi avez-vous besoin d'inclure deux liens? La compatibilité cross-browser. Internet Explorer 7 gère favicons différemment que les autres navigateurs et nécessite une unique règle pour assurer une présentation exacte.

    6. Enregistrer votre page Web, puis ouvrez-le dans votre navigateur. Vous allez maintenant voir votre favicon. Si votre navigateur est déjà ouvert, vous pouvez avoir besoin de fermer complètement et redémarrer avant le favicon apparaît. A noter é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.

    » » » » Comment mettre une photo dans le titre d'une page Web en utilisant Dreamweaver