Blog ENI : Toute la veille numérique !
Jusqu'à ce soir ! : -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. L'affichage des pages
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

L'affichage des pages

L’affichage des pages dans les navigateurs

1. Tester la page dans un navigateur

Avec Dreamweaver vous travaillez dans un environnement graphique : vous voyez à l’écran ce que vous avez inséré (texte, tableau, image...). Mais vous devez bien comprendre que Dreamweaver n’est pas un navigateur web. Cela implique que le rendu que vous avez dans la fenêtre de Dreamweaver n’est pas toujours ce qui sera affiché dans un vrai navigateur web. C’est pour cela qu’il faut toujours vérifier ce que donne l’affichage, le rendu de votre page web dans un navigateur.

2. Ajouter des navigateurs

 Vous devez tester vos pages dans le plus de navigateurs possible, afin d’afficher le rendu dans plusieurs environnements. Pour paramétrer les différents navigateurs à utiliser dans Dreamweaver, allez dans les Préférences (menu Edition sous Windows, menu Dreamweaver CC sous Mac), dans la catégorie Aperçu En temps réel.

Vous affichez la liste des navigateurs déjà reconnus par Dreamweaver :

images/18C04-001.png

 À l’aide du bouton images/02sf035.png, vous pouvez ajouter un navigateur.

images/18C04-002.png

 Dans la fenêtre suivante Ajouter un navigateur, cliquez sur le bouton Parcourir pour sélectionner le navigateur. Vous pouvez lui donner un Nom précis.

Deux navigateurs pourront être déclarés : un Navigateur principal...

Les modes d’affichage classiques

Quand vous créez une page, vous pouvez l’afficher de trois manières différentes dans Dreamweaver : en mode Création, Fractionner ou Code.

1. Le mode Création

 Dans la barre d’outils Document, cliquez, si besoin est, sur l’option Création.

images/18C04-004.png

Votre page est affichée dans un mode « rapide », qui n’est pas forcément très fidèle à ce que vous pourriez voir dans un navigateur.

 Vous pouvez aussi passer par le menu Affichage - Mode d’affichage - Création.

2. Le mode Fractionner

Le mode Fractionner vous permet de diviser l’écran de conception en deux parties : une partie pour l’affichage de la page en mode Création et l’autre pour l’affichage du Code.

 Dans la barre d’outils Document, cliquez, si besoin est, sur l’option Fractionner.

images/18C04-005.png

 Vous pouvez aussi passer par le menu Affichage - Fractionner, puis Création de code.

Par défaut, l’écran est divisé horizontalement.

images/18C04-006.png

 Pour gérer l’affichage fractionné, dans le menu Affichage choisissez Fractionner.

  • Code en direct permet d’afficher dans la partie supérieure la page avec son rendu en direct.

  • Création de code permet d’afficher dans la partie supérieure la page avec le mode création. 

  • Code...

L’affichage en direct des pages statiques

Dreamweaver vous permet de visualiser vos pages web comme dans un navigateur. En effet, le mode En direct de Dreamweaver utilise le moteur d’affichage de Chromium. Ce moteur est un moteur d’affichage standard qui respecte bien les standards du web.

 Dans votre page web en création, dans la barre d’outils Document, cliquez sur le bouton En direct.

images/18C04-010.png

 Pour revenir au mode Création, dans la barre d’outils Document, cliquez sur le bouton images/icfleche.PNG associé à l’option En direct et choisissez Création.

L’affichage en direct des pages dynamiques

1. Les pages dynamiques

Les pages web actuelles utilisent beaucoup les technologies « dynamiques » : PHP, Ajax, jQuery... Cela veut dire que les pages sont construites à partir d’autres fichiers que les simples pages HTML : des pages PHP, des pages JavaScript...

En affichage « classique », en mode Création, Dreamweaver n’affiche que le code de la page HTML, mais pas l’affichage généré par les fichiers externes (PHP, JavaScript...). Avec le mode d’affichage en direct, Dreamweaver vous permet de visualiser la page qui sera réellement vue par l’utilisateur dans un navigateur, avec tous les fichiers externes qui interviennent dans la construction de cette page.

2. Les fichiers liés

Dans cet exemple, il s’agit d’une page utilisant des fichiers JavaScript avec jQuery et CSS. Cette page permet l’affichage d’un diaporama interactif.

Dès que nous ouvrons la page HTML, Dreamweaver ouvre aussi tous les fichiers liés, les fichiers apparentés dans la terminologie Dreamweaver.

Dans cet exemple, le fichier HTML est nommé tinycarousel.htm, les fichiers liés sont website.css, jquery-3.1.0.js et jquery.tinycarousel.min.js.

images/18C04-011.png

Sur la droite de la barre de titre du document, vous avez la possibilité de filtrer l’affichage...

Inspecter la page

Quand vous êtes en cours de réalisation, il est très intéressant de connaître les propriétés CSS des éléments HTML de votre page. Dreamweaver vous permet, au simple survol de la souris d’un élément, de connaître les propriétés CSS utilisées par l’élément survolé.

 Ouvrez une page conçue avec des CSS.

Nous étudierons les feuilles de style CSS dans le chapitre suivant.

 Affichez le mode Fractionner.

 Dans le menu Affichage, choisissez Inspecter (AltShiftF11) ou dans la barre d’outils Document, cliquez sur le bouton Activer le mode En direct et le mode Inspection.

images/18C04-022.png

 Survolez un élément de votre page.

Vous visualisez le code HTML correspondant dans l’affichage en mode Code.

Et dans le panneau CSS Designer vous visualisez toutes les propriétés utilisées par l’élément survolé.

images/18C04-023.png

Dans la page en mode Création, vous visualisez les propriétés de l’élément survolé.

 Cliquez sur un élément à travailler. Vous pouvez alors modifier les propriétés CSS dans le panneau CSS Designer. La mise à jour est immédiate.

images/18C04-024.png

Les propriétés des éléments de structure

La mise en page des sites web actuels se fait avec des éléments de structure HTML5. En mode Création, vous pouvez très facilement visualiser les propriétés de ces éléments utilisés dans la mise en page.

 Dans le menu Affichage - Option de création d’affichage - Assistances visuelles, veillez à ce que les items Modèle de boîtes en feuilles CSS, Contours en feuilles CSS, Arrière-plans en feuilles CSS (pour colorer les boîtes si elles n’ont pas de couleur d’arrière-plan définie) soient bien cochés.

 Sélectionnez un élément.

Vous visualisez aussitôt les marges de la boîte sous forme de hachures bleues, le remplissage sous la forme de hachures bleues plus fines et les bordures en traits gris pleins.

images/18C04-025.png

 Passez votre pointeur au-dessus des marges, des remplissages ou des bordures : un encadré apparaît avec les valeurs utilisées.

Quand votre pointeur est au-dessus de la boîte, toutes les propriétés apparaissent.