Adobe Dreamweaver CC

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

(Lecture : 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, 200 Ko)

Télécharger le PDF Feuille de référence Dreamweaver

Vous voulez obtenir une page web de ce genre ? Voici comment faire.

Ce didacticiel vidéo vous guide tout au long des étapes de création d'une page web. 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. Si vous rencontrez des difficultés au cours de ce didacticiel, n'hésitez pas à demander de l'aide sur notre forum. Commençons par configurer le projet dans Dreamweaver.

Définition d'un site (1:45) ; Analyse des ressources (2:50) ; Création du fichier HTML (3:08)

Créez la structure de la page et ajoutez du texte.

Le panneau Insérer de Dreamweaver vous fait gagner du temps en créant tout le code HTML nécessaire à votre place. Vous gardez cependant le contrôle, et pouvez choisir les éléments les plus appropriés et leur emplacement sur la page. Après avoir créé la structure HTML de la page, nous allons copier et coller le texte à partir d'un fichier RTF. L'option Collage spécial convertit la mise en forme des fichiers RTF et documents Microsoft Word en HTML, ce qui vous fait gagner du temps.

Utilisation du panneau Insertion (0:55) ; Utilisation de l'inspecteur de propriétés (2:14) ; Collage du texte de l'espace réservé (4:53)

Il est temps d'agrémenter notre page de quelques images. La grande image d'en-tête va occuper toute la largeur de la page, tandis que la petite image sera accompagnée d'une légende utilisant les éléments HTML5. Nous allons aussi ajouter des liens vers une autre page du site et vers un autre site.

 

 

 

Insertion d'une image (0:24) ; Images et légendes (1:23) ; Création de liens (2:50)

Place à la mise en forme !

Nous avons maintenant une page web fonctionnelle, mais qui manque cruellement de style. À l'étape 4, nous allons ajouter une feuille de style contenant toute une série de styles prédéfinis. Nous améliorerons ensuite l'aspect des titres grâce à une police Edge Web Fonts et créerons une maquette à deux colonnes à l'aide de CSS Designer, l'outil de mise en forme graphique de Dreamweaver.

Ajout d'une feuille de style (0:22) ; Application de styles (1:39) ; Ajout de polices Edge Web Fonts (3:04)

Mettez en forme la barre de navigation.

Auparavant, pour obtenir une barre de navigation, il fallait utiliser un programme de graphisme distinct pour créer plusieurs images pour chaque bouton. Vous pouvez désormais tout faire dans Dreamweaver, sans images, simplement avec HTML et CSS, en créant quelques règles de style simples. Nous allons maintenant appliquer à la liste à puces créée pour la navigation le comportement d'une barre de navigation horizontale.

Et voilà, il a suffi de cinq étapes simples pour obtenir une page web élégante. Mais ce n'est pas fini... Il y a un bonus !

Mise en forme de la liste (0:27) ; Ajout d'états de bouton (2:52) ; Affichage de la page active (4:44)

Vidéo bonus : positionnement absolu et angles arrondis.

Nous allons vous dévoiler le secret du positionnement d'une zone de texte ou autre à un endroit précis d'une image. Nous vous apprendrons également à ajouter des angles arrondis à un arrière-plan en quelques secondes.

Mise en forme de l'article (1:39) ; Positionnement de l'article (2:18) ; Ajout d'angles arrondis (3:57)

Donnez-nous votre avis.

Et voilà, vous avez terminé ! Donnez-nous votre avis sur ce didacticiel en répondant à notre enquête.

david-powers_83x83

David Powers est l'auteur de sept ouvrages de référence sur la création web portant principalement sur PHP, CSS et Dreamweaver, notamment The Essential Guide to Dreamweaver CS4 with CSS, Ajax, and PHP. David prodigue régulièrement ses conseils sur les forums Adobe Dreamweaver. Il est aussi modérateur sur Adobe Community Help. Il fait partie des spécialistes Dreamweaver professionnels de la communauté, un statut accordé à seulement 40 personnes dans le monde.