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. Commençons par configurer le projet dans Dreamweaver. Ce didacticiel et le projet correspondant ont été créés par David Powers.

Créer un site Dreamweaver
  • Définir un site (1:56)
  • Explorer les sources (2:49)
  • Créer la page HTML (3:28)

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

Construire la structure HTML
  • Utiliser le panneau Insertion (2:41)
  • Utiliser l’Inspecteur des Propriétés (4:27)
  • Copier et placer du texte (7:21)

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.

Ajoutez des images et des liens.

Ajouter des images et des liens
  • Insérer une image (0:27)
  • Images avec des légendes (1:42)
  • Créer des liens (3:17)

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 <figure> et <figcaption>. Nous allons aussi ajouter des liens vers une autre page du site et vers un autre site.

Place à la mise en forme !

Mettre en forme la page
  • Joindre une feuille de style (0:55)
  • Appliquer des styles (2:07)
  • Ajouter des Edge Web Fonts (3:47)

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.

Mettez en forme la barre de navigation.

Créer une barre de navigation
  • Mise en forme de la liste (0:31)
  • Ajouter des états de bouton (3:09)
  • Montrer la page dans un navigateur (4:56)

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 !

Vidéo bonus : positionnement absolu et angles arrondis.

Utiliser le positionnement absolu
  • Mise en forme de l’article (1:56)
  • Positionner l’article (3:02)
  • Ajouter des bords arrondis (4:33)

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.