Ajouter une image dans Dreamweaver CC 2018

Ajouter une image dans Dreamweaver CC 2018

Table of Contents:

1. 📌 Introduction
2. 📌 Adding an Image to the Site Directory
3. 📌 Creating a Logo Container
4. 📌 Saving the Image File in the Local Directory
5. 📌 Placing the Image on the Web Page
6. 📌 Adjusting the Size of the Image with CSS
7. 📌 Understanding Different File Types for Images
8. 📌 PNG Files with Transparent Backgrounds
9. 📌 JPEG Files for Colorful Images
10. 📌 Conclusion

📌Introduction

Dans cette vidéo, nous allons voir comment ajouter une image dans le répertoire de votre site et ensuite comment ajouter cette image dans votre page. Nous nous concentrons aujourd'hui spécifiquement sur l'ajout d'une image de logo dans l'en-tête. Nous allons commencer par supprimer ce texte fictif que nous avions initialement. Créons un conteneur pour le logo en utilisant une balise div avec la classe "logo". Ensuite, nous allons enregistrer une image dans le répertoire du site et la placer sur la page en utilisant la balise img. Enfin, nous allons ajuster la taille de l'image à l'aide de CSS. Commençons par ajouter une image dans le répertoire du site.

📌Ajout d'une image dans le répertoire du site

Pour éviter les problèmes de liens et de chargement incorrect de l'image une fois votre site en ligne, il est préférable de sauvegarder les éléments localement dans votre répertoire du site. Pour cela, recherchez une image de logo sur Internet et enregistrez-la sur votre ordinateur. Ensuite, accédez à votre répertoire du site et créez un dossier "images" si vous n'en avez pas encore un. Enregistrez l'image de logo dans ce dossier en utilisant un nom approprié, tel que "logo.png". Assurez-vous d'avoir cette image dans votre répertoire du site avant de la placer sur la page.

📌Création d'un conteneur pour le logo

Maintenant que nous avons l'image de logo prête, nous allons créer un conteneur pour l'accueillir dans l'en-tête de la page. Utilisons une balise div avec la classe "logo" pour cela. Assurez-vous que vous avez donné à la balise div la bonne indentation et ajoutez une note pour rappeler que c'est le conteneur du logo. Ajoutons également une balise de fin pour le conteneur du logo, afin de faciliter la réutilisation de ce code à l'avenir. Le conteneur du logo est prêt, passons maintenant à l'étape suivante.

📌Enregistrement du fichier image dans le répertoire local

Avant de placer l'image sur la page, nous devons d'abord vérifier si nous avons bien enregistré l'image dans le répertoire du site. Retournez au répertoire du site dans votre éditeur de code et assurez-vous que le fichier image "logo.png" se trouve dans le dossier "images". Si le fichier est présent, vous pouvez passer à l'étape suivante.

📌Placement de l'image sur la page

Maintenant que l'image de logo est dans le répertoire du site, nous pouvons la placer sur la page. Retournez à la position où vous souhaitez afficher le logo dans le conteneur que nous avons créé précédemment. Utilisez la balise img pour insérer l'image. Assurez-vous de spécifier le bon chemin d'accès à l'image dans l'attribut src de la balise img. Dans notre cas, l'image se trouve dans le dossier "images" et s'appelle "logo.png". Ajoutez également un texte alternatif en utilisant l'attribut alt pour améliorer l'accessibilité de votre site. Maintenant que l'image est sur la page, passons à l'étape suivante.

📌Ajustement de la taille de l'image avec CSS

L'image du logo semble actuellement trop grande et ne correspond pas à l'en-tête. Utilisons CSS pour ajuster la taille de l'image. Dans notre feuille de style CSS, ciblons la classe "logo" en utilisant la bonne hiérarchie CSS. Dans ce cas, nous voulons modifier l'image spécifiquement à l'intérieur du conteneur du logo. Définissons la hauteur de l'image sur 70 pixels, de manière à ce qu'elle corresponde à la hauteur de l'en-tête. Rafraîchissez la page pour voir l'effet de cet ajustement de taille de l'image. Maintenant que l'image est parfaitement alignée avec l'en-tête, passons à la prochaine étape.

📌Compréhension des différents types de fichiers pour les images

Il est important de comprendre les différentes options de formats de fichiers pour les images afin de choisir le format le plus approprié en fonction de vos besoins. Les deux formats d'image les plus couramment utilisés sont le PNG et le JPEG. Les images PNG sont idéales lorsque vous avez besoin d'un fond transparent ou de couleurs vives. Les fichiers JPEG sont plus adaptés aux images avec des dégradés de couleurs ou des photographies réalistes. Prenons le temps de comprendre ces différences avant de choisir le format de notre image de logo.

📌Fichiers PNG avec fond transparent

Les fichiers PNG sont parfaits lorsque vous souhaitez avoir un fond transparent autour de votre image. Cela signifie que votre image pourra se superposer harmonieusement à n'importe quel arrière-plan sans créer de bordure visible. Les images PNG sont également recommandées pour les graphiques avec des couleurs vives et des formes complexes. Assurez-vous de sauvegarder votre image de logo au format PNG si vous avez besoin d'un fond transparent ou de couleurs vives.

📌Fichiers JPEG pour des images colorées

Les fichiers JPEG sont plus adaptés aux images avec des dégradés de couleurs ou des photographies réalistes. Ils offrent une compression avec perte, ce qui peut réduire la taille du fichier mais aussi la qualité de l'image. Les images JPEG sont souvent utilisées pour les photographies de produits ou les images de sites web avec des couleurs riches et complexes. Si votre image de logo est basée sur des couleurs ou des dégradés complexes, vous pouvez envisager de l'enregistrer au format JPEG.

📌Conclusion

Dans cette vidéo, nous avons appris comment ajouter une image de logo dans le répertoire de notre site web et comment l'afficher sur la page. Nous avons également ajusté la taille de l'image à l'aide de CSS pour qu'elle s'adapte parfaitement à l'en-tête. Nous avons également compris les différences entre les fichiers PNG et JPEG et comment choisir le bon format d'image en fonction de nos besoins. Maintenant, vous pouvez appliquer ces connaissances pour ajouter des images à votre propre site web et les personnaliser selon vos préférences.

Ressources:

• URL du site de recherche d'images
• URL du répertoire du site