Blog ENI : Toute la veille numérique !
Dernière chance (fin le 29/02) : -25€ dès 75€ sur les livres en ligne, vidéos... code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Dreamweaver CC pour PC/Mac (édition 2018)
  3. Mise en page avec les CSS
Extrait - Dreamweaver CC pour PC/Mac (édition 2018) Concevoir des sites interactifs et attractifs
Extraits du livre
Dreamweaver CC pour PC/Mac (édition 2018) Concevoir des sites interactifs et attractifs
1 avis
Revenir à la page d'achat du livre

Mise en page avec les CSS

Des éléments HTML5 et des styles CSS pour la mise en page

1. L’objectif

L’HTML et les CSS vous offrent toutes les solutions nécessaires pour créer des mises en page élaborées. Le propos de ce livre n’est pas l’étude de la mise en page et du design Web, c’est pour cela que nous allons étudier un exemple simple de mise en page, avec une mise en forme et une mise en page CSS tout aussi simple. Vous pourrez vous-même ajouter toutes les propriétés CSS que vous voulez pour créer un design attractif.

2. Les boîtes <div>

Les boîtes <div> utilisent l’élément HTML <div> qui permet de créer un « conteneur non sémantique » dont vous pouvez déterminer très précisément la largeur et la hauteur. Vous insérez dans ce conteneur ce que vous voulez : du texte, des tableaux, des images, des formulaires ou d’autres boîtes.

3. Les éléments de structure HTML5

Les boîtes <div> permettent de créer des conteneurs non sémantiques. C’est-à-dire que l’on ne sait pas à quoi sert telle ou telle boîte <div>. Pour éviter ce problème, le W3C a créé des éléments de structure sémantique avec l’HTML5.

Vous avez à votre disposition...

Réalisation d’un exemple simple

Nous allons créer une mise en page simple avec les éléments HTML5 disponibles dans Dreamweaver. Notre contenu sera centré dans la fenêtre du navigateur grâce à un conteneur général. Nous aurons un en-tête, une barre de navigation, un contenu central avec sur sa droite une colonne latérale et un pied de page.

Voici le schéma de structure :

images/C21-002.png

Le conteneur général

1. Insérer la boîte <div>

Pour le conteneur général, nous allons utiliser l’élément <main>.

 Créez un nouveau document et enregistrez-le.

Le point d’insertion clignote au début de la page web.

 Dans le menu Insertion ou dans le panneau Insertion, choisissez HTML, puis Main.

images/18C21-003.png

L’en-tête de la page

1. Insérer l’élément <header>

Pour l’en-tête de notre page, nous allons utiliser l’élément HTML5 <header>. Il est fait pour cette utilisation.

 Dans la page, cliquez dans l’élément <main> précédemment inséré. Vous pouvez utiliser le mode Fractionner pour plus de facilité.

 Dans le menu Insertion ou dans le panneau Insertion, choisissez HTML, puis Header.

 Dans la fenêtre Insérer Header, dans la liste déroulante Insérer, laissez Au point d’insertion

 Ne renseignez pas les champs Class et ID.

images/18C21-009.png

 Cliquez sur le bouton OK.

Dreamweaver insère l’élément <header>.

 Supprimez le texte inséré automatiquement par Dreamweaver.

2. Insérer un titre dans l’en-tête

Dans l’élément <header> nous allons insérer un élément <h1> pour y placer le titre de notre page.

 Cliquez dans l’élément <header> inséré précédemment.

 Dans le menu Insertion ou dans le panneau Insertion, choisissez HTML, puis dans la liste déroulante Titre, choisissez H1.

images/18C21-010.png

Dreamweaver insère l’élément <h1> et y place un texte par défaut.

 Saisissez votre texte à...

La navigation

1. Insérer l’élément <nav>

Nous allons maintenant insérer la barre de navigation avec l’élément <nav> dédié à ce rôle.

 Affichez le mode Fractionner.

 Cliquez juste après la balise de fermeture de l’élément <header>.

 Dans le menu Insertion ou dans le panneau Insertion, choisissez HTML, insérez l’élément de structure Navigation.

 Dans la fenêtre d’insertion, laissez l’option Au point d’insertion.

images/18C21-015.png

 Cliquez sur le bouton OK.

Dreamweaver insère l’élément <nav> avec un texte par défaut dedans.

 Supprimez ce texte.

2. La mise en forme de la navigation

Pour cette boîte de navigation, nous allons juste ajouter une bordure inférieure.

 Dans le panneau CSS Designer, ajoutez le sélecteur nav.

 Appliquez-lui une bordure inférieure d’une épaisseur d’un pixel, en trait plein et grise (border-bottom: 1px solid #4A4A4A).

images/18C21-016.png

3. Insérer la liste des liens

Nous allons maintenant insérer une liste de lien avec l’élément <ul>.

 Cliquez dans l’élément <nav>.

 Dans le menu Insertion ou dans le panneau Insertion, choisissez HTML, puis cliquez sur l’élément Liste simple.

 Puis dans la liste...

La partie centrale de la page

1. Les éléments

Dans la partie centrale de la page, nous avons deux zones d’affichage : le contenu de la page et la colonne latérale de droite. Nous allons utiliser les éléments <article> et <aside>.

2. Insérer l’élément <article>

 Avec le mode Fractionner actif, cliquez à droite de la balise de fermeture </nav> de l’élément de navigation.

 Insérez l’élément de structure Article.

 Dans la fenêtre d’insertion, laissez l’option Au point d’insertion.

 Effacez le texte que Dreamweaver a inséré automatiquement et saisissez à la place votre texte structuré.

Dans cet exemple, nous avons un titre <h2> et du texte dans un paragraphe <p>.

images/18C21-025.png

3. La mise en forme de l’élément <article>

Nous allons appliquer à cet élément une largeur fixe, un remplissage et une bordure à droite, avec un affichage en cellule de tableau.

 Dans le panneau CSS Designer, ajoutez le sélecteur article.

 Appliquez-lui ces propriétés : une largeur de 709 pixels (width: 709px), un affichage en cellule de tableau (display: table-cell) pour plus de facilité de mise en page, un remplissage à droite de 10 pixels (padding-right: 10px) et une bordure à droite d’un...

Le pied de page

1. L’insertion de l’élément <footer>

Le pied de page va contenir des informations diverses comme par exemple une date, un copyright. 

 Avec le mode Fractionner, cliquez à droite de la balise de fermeture </aside> de la colonne latérale de droite.

 Insérez l’élément de structure Footer.

 Dans la fenêtre d’insertion, laissez l’option Au point d’insertion.

 Effacez le texte que Dreamweaver a inséré et saisissez à la place votre texte structuré.

Dans cet exemple nous utilisons un paragraphe <p>.

images/18C21-029.png

2. La mise en forme de l’élément <footer>

 Dans le panneau CSS Designer, ajoutez le sélecteur footer.

 Appliquez-lui par exemple une bordure supérieure.

images/18C21-030.png

L’affichage de la page

Voilà l’affichage obtenu pour cette mise en page structurée et cette mise en forme minimaliste.

images/18C21-031.png

L’affichage des styles CSS

À des fins de vérification, vous pouvez afficher les styles CSS utilisés par les différentes boîtes de votre mise en page lors de la conception de votre page.

1. Utiliser le panneau CSS Designer

À chaque fois que vous allez cliquer ou sélectionner un élément HTML, Dreamweaver affiche le sélecteur correspondant dans le panneau DOM et dans la barre d’état.

Dans cet exemple, nous avons cliqué dans l’élément <h1> de l’élément <header>. Le panneau DOM affiche aussitôt le sélecteur. Puis dans le panneau CSS Designer sélectionnez le même sélecteur pour afficher ces propriétés.

images/18C21-032.png

Si nous sélectionnons l’élément <aside> dans le panneau DOM, et si nous faisons de même dans le panneau CSS Designer nous affichons alors ce sélecteur et ses propriétés.

images/18C21-033.png

2. L’assistance visuelle

L’autre méthode de travail est l’utilisation de l’assistance visuelle. Dans un premier temps il faut paramétrer cette assistance.

 Dans le menu Affichage - Options de création d’affichage - Assistances visuelles, choisissez les éléments de mise en page que vous souhaitez utiliser.

images/18C21-034.png

Par défaut, tous les éléments sont affichés, sauf Arrière-plans...