Adobe Dreamweaver CC

Création et mise en forme d'une page web dans Dreamweaver

Apprenez à créer une page web réactive de A à Z. (Try it, 45 min)

Création et mise en forme d'une page web dans Dreamweaver

45 min

De quoi ai-je besoin ?

Télécharger les fichiers Fichiers d'exemple pour s'entraîner (ZIP, 12,6 Mo)

Télécharger le PDF Raccourcis clavier Dreamweaver

Apprenez à créer une page web réactive

Ce tutoriel vidéo détaille les différentes étapes du processus de création d'une page web réactive à l'aide des fonctionnalités introduites dans Dreamweaver CC 2015. Pour commencer, vous devez télécharger les ressources du projet. Ensuite, nous configurerons ensemble un site dans Dreamweaver afin de créer les liens avec les images et les autres pages. Enfin, nous créerons une page vierge en responsive web design. Si vous rencontrez des difficultés au cours de ce tutoriel, n'hésitez pas à demander de l'aide sur notre forum. Commençons par configurer le projet dans Dreamweaver.

Ajout d'un titre de page et d'un conteneur

Ajoutez le titre qui s'affichera dans l'onglet du navigateur web et distinguera votre page dans les futurs résultats de recherche. Pour clore cette section, nous ajouterons le conteneur qui habillera le contenu et adaptera le projet à la largeur de la page.

Ajout d'une structure et d'un contenu

Créez la structure générale de la page en ajoutant les composants HTML nécessaires. À cette étape, nous ajouterons les espaces réservés pour la navigation du menu principal, un diaporama, le corps principal du contenu, une vignette et un pied de page. Nous n'avons pas encore mis la page en forme à ce stade, mais il sera plus facile de le faire, maintenant que nous avons les bases.

Ajout de contenu personnalisé

Changez le contenu des espaces réservés ajoutés par Dreamweaver lorsque vous utilisez les composants prédéfinis du panneau Insertion. À cette étape, nous ajouterons nos propres libellés à la navigation du menu et nous changerons la structure pour qu'elle coïncide avec le projet final. Nous remplacerons ensuite le texte des légendes du diaporama et les sections de vignettes en fonction des images que nous ajouterons plus loin dans ce tutoriel. Enfin, nous ajouterons du texte pour le titre principal et les paragraphes du corps de la page, et nous remplacerons le contenu du pied de page par des informations de copyright.

Ajout d'images et de liens

Remplacez les images des espaces réservés dans le diaporama et la section des vignettes pour que la page commence à prendre forme. Ajoutez des liens au menu pour naviguer vers une autre page du site et un site web externe. À cette étape, nous étudierons quelques techniques permettant de pointer vers des images et de définir des liens.

Mise en forme du contenu textuel

Appliquez un style et une mise en page au texte. À cette étape, nous verrons comment utiliser CSS Designer pour ajouter des couleurs et repositionner le texte dans différentes sections de la page.

Mise en forme du menu

Changez le menu pour lui donner un aspect plus moderne et le fusionner avec le reste de la maquette de page. Dans cette vidéo, nous verrons comment personnaliser la mise en forme par défaut du menu en changeant la couleur d'arrière-plan, la bordure et le positionnement du menu sur la page.

Ajout de la touche finale

Finalisez la page en lui donnant un aspect plus soigné et changez le style par défaut des images pour qu'elles s'affichent correctement sur n'importe quel terminal. Dans cette vidéo, nous appliquerons des feuilles de style CSS aux images du diaporama pour qu'elles occupent toute la largeur de la page. Nous modifierons ensuite les vignettes pour que leur largeur corresponde à celle de leur conteneur. Enfin, nous ajusterons le conteneur de la page principale pour la touche finale.