CATALOGUE Design et Infographie Formation Photoshop Apprendre Photoshop CC pour le Web - Photoshop orienté Web et mobile

Intégration d'une image PNG avec Dreamweaver

Retour à la formation
Chapitre 9 Leçon 3
Précédent
Suivant

Découvrez comment intégrer facilement une image PNG dans une page HTML à l'aide de Dreamweaver et styliser le lien avec CSS.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons vous montrer comment intégrer une image au format PNG dans une page HTML en utilisant Dreamweaver. Nous commencerons par créer une page HTML et enregistrer le document dans un dossier de travail nommé index.html. Vous apprendrez à naviguer entre les différents modes de Dreamweaver tels que le mode création, le mode code, et le mode fractionné afin d'avoir un aperçu de votre travail.

Ensuite, nous couvrirons les bases de HTML5, y compris l'utilisation d'un doctype simplifié et la structure de la page HTML comprenant les métadonnées et appels de script. Une partie importante de la leçon sera de créer un lien hypertexte, le styliser avec CSS en utilisant diverses propriétés comme display-block, position, width, height, et text-align.

Enfin, nous intégrerons notre image en utilisant la propriété background-image. En suivant ce tutoriel, vous pourrez créer des pages web plus interactives et visuellement attrayantes.

Objectifs de cette leçon

Les objectifs de cette vidéo sont :


  • Apprendre à créer une page HTML avec Dreamweaver.
  • Comprendre les bases de la structure HTML5.
  • Savoir ajouter et styliser un lien hypertexte avec CSS.
  • Intégrer une image de fond dans un élément HTML.

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez :


  • Maitriser les bases de HTML.
  • Connaitre les règles fondamentales du CSS.
  • Avoir Dreamweaver installé sur votre ordinateur.

Métiers concernés

Ces compétences peuvent être appliquées dans les métiers suivants :


  • Développeur web
  • Intégrateur HTML/CSS
  • Designer web

Alternatives et ressources

Comme alternatives à Dreamweaver, vous pouvez utiliser :


  • Sublime Text pour l'édition de code.
  • Visual Studio Code, un éditeur de texte puissant et extensible.
  • Atom, une application open-source pour les éditeurs de code.

Questions & Réponses

Pour créer une page HTML dans Dreamweaver, commencez depuis l'écran d'accueil, sélectionnez l'option pour créer une nouvelle page HTML, et enregistrez le fichier dans votre dossier de travail.
La structure de base d'une page HTML5 comprend un doctype simplifié, une balise englobante, une entête () pour les métadonnées et scripts, et un corps () pour le contenu visible.
Pour centrer un texte horizontalement dans un bloc en CSS, utilisez la propriété text-align: center. Pour centrer verticalement, utilisez la propriété line-height de la même hauteur que le bloc.