Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
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. Interface de conception
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

Interface de conception

L’environnement système

Les copies d’écran de ce livre ont été réalisées sous MacOS, mais que les utilisateurs de Windows ne s’inquiètent pas, l’environnement de Dreamweaver est identique entre les deux plates-formes, à de très rares exceptions.

L’installation de Dreamweaver

À la fin de l’installation de Dreamweaver, ce dernier démarre aussitôt.

images/18C02-001.png

Une fois démarré, Dreamweaver vous demande de le configurer.

La première étape vous demande si vous avez déjà utilisé Dreamweaver. Dans cet exemple, c’est le bouton Non, je débute qui est cliqué.

images/18C02-002.png

Ensuite, Dreamweaver vous demande de choisir l’environnement de travail que vous souhaitez utiliser en fonction de vos compétences. Dans cet exemple, c’est le bouton Espace de travail standard qui est choisi.

images/18C02-003.png

Puis, vous devez choisir un thème de couleur pour l’interface générale de Dreamweaver. Dans cet exemple, c’est le thème gris foncé qui est choisi. Notez que vous pourrez par la suite modifier ce paramètre.

images/18C02-004.png

Pour terminer cet assistant de configuration, vous devez choisir par quoi vous souhaitez commencer :

  • avec un exemple de fichier,

  • avec un nouveau projet ou,

  • avec un tutoriel vidéo.

images/18C02-005.png

 Dans cet exemple, cliquez sur la zone Démarrer avec un dossier nouveau ou existant. Vous devez créer ou sélectionner le dossier du site web que vous allez concevoir par la suite.

 Dans le gestionnaire de fichiers (l’Explorateur Windows sur Windows ou le Finder sur Mac), dans le dossier Documents par exemple, créez un dossier nommé mon-site.

images/18C02-006.png

 Cliquez sur le bouton...

La synchronisation des paramètres

Dreamweaver CC vous permettra de synchroniser les paramètres du logiciel et les paramètres de vos sites en construction sur le cloud d’Adobe. Cela va vous permettre de récupérer ces paramètres de travail quelle que soit la machine sur laquelle vous travaillez. Une machine de bureau ou un ordinateur portable que vous emmenez chez le client ou en voyage de travail.

Au premier démarrage de Dreamweaver vous avez cette fenêtre qui s’affiche :

images/18C02-007.png

En cliquant sur le bouton Synchroniser les paramètres, vous activez la synchronisation des paramètres entre votre machine locale et ceux qui seront stockés dans votre espace du Cloud d’Adobe.

En cliquant sur le bouton Désactiver les paramètres de synchronisation, vous n’activez pas cette synchronisation.

En cliquant sur le bouton Avancé, vous affichez les préférences de synchronisation.

Si vous avez déjà utilisé Dreamweaver, ce dernier vous indique que la synchronisation est effectuée.

images/18C02-008.png

Dans les deux fenêtres de synchronisation, vous pouvez paramétrer la synchronisation en cliquant sur le bouton Avancé.

images/18C02-009.png

Dans ces préférences, vous pouvez :

  • Activer la synchronisation automatique pour la mettre en œuvre.

  • Importer les paramètres synchronisés pour avoir les mêmes paramètres...

L’écran d’accueil

Quand vous avez terminé d’installer Dreamweaver, vous visualisez l’écran d’accueil avec le thème de couleurs choisi précédemment. Pour plus de facilité de lecture, nous allons activer le thème le plus clair.

 Dans le menu Edition sous Windows et Dreamweaver CC sous Mac, choisissez Préférences.

 Cliquez sur la catégorie Interface.

 Dans les choix de Thème de l’application, cliquez sur le bouton le plus clair.

images/18C02-011.png

 Cliquez sur le bouton Appliquer, puis Fermer.

Voici l’interface avec ce thème :

images/18C02-012.png

Les espaces de travail

Les espaces de travail de Dreamweaver vous permettent d’agencer votre interface selon deux environnements : Standard et Développeur.

Ces espaces de travail sont accessibles à droite de la barre des menus. L’espace de travail actif correspond au choix que vous avez fait lors de la configuration de Dreamweaver.

images/18C02-013.png

 Dans la barre des menus, dans les espaces de travail, choisissez Standard ou Développeur.

 Vous pouvez aussi utiliser le menu Fenêtre - Présentation de l’espace de travail

Les panneaux

1. Utiliser les panneaux

La plupart des fonctionnalités de Dreamweaver sont accessibles dans les panneaux. Les panneaux sont affichés dans la partie droite de l’interface de Dreamweaver, dans le dock. Notez que tous les panneaux sont aussi accessibles par le menu Fenêtre.

Nous utiliserons majoritairement les panneaux dans cet ouvrage. Sachez que les fonctionnalités de Dreamweaver se retrouvent aussi et bien sûr dans les différents menus de l’application.

2. Afficher les panneaux

 Pour afficher un panneau, vous pouvez aussi cliquer sur son onglet, si vous le visualisez dans le dock. Dans cet exemple, c’est une partie du panneau Insertion qui est affiché :

images/18C02-014.png

 Pour afficher le panneau Fichiers, il suffit de cliquer sur son onglet :

images/18C02-015.png

 Pour masquer ou afficher tous les panneaux, dans le menu Fenêtre, choisissez Masquer/Afficher les panneaux (F4).

3. L’affichage du dock

 Vous pouvez agrandir ou réduire la largeur du dock. Placez le pointeur à la limite des panneaux et de la fenêtre de la page HTML, votre pointeur prend alors la forme d’une double flèche : effectuez un cliqué-glissé.

images/18C02-016.png

 Tous les panneaux sont affichés sous forme d’onglets. Pour les réduire sous la forme d’icônes, en haut à droite du dock, cliquez sur le bouton Réduire en icônes.

images/18C02-017.png

Les panneaux affichés...

Les panneaux importants

1. Le panneau Propriétés

Le panneau Propriétés est très important dans la conception d’un site web. Il est bien sûr accessible par le menu Fenêtre, comme tous les autres panneaux. Pour un accès rapide et facile, ce panneau peut être placé en bas de l’écran.

images/18C02-026.png

Ce panneau permet une mise en forme contextuelle : l’affichage du contenu du panneau varie en fonction du contexte de sélection. Vous n’aurez pas accès aux mêmes fonctionnalités selon l’élément sélectionné.

Voici le panneau Propriétés avec un paragraphe de texte sélectionné et avec le bouton CSS actif :

images/18C02-027.png

Voici le panneau Propriétés avec un tableau sélectionné :

images/18C02-028.png

Voici le panneau Propriétés avec une image sélectionnée :

images/18C02-029.png

2. Le panneau Insertion

Le panneau Insertion permet d’insérer rapidement différents objets dans votre page web.

images/18C02-030.png

 Pour choisir la catégorie d’objets à insérer, utilisez la liste déroulante qui est sur la catégorie HTML par défaut.

images/18C02-031.png

Ici, c’est la catégorie Formulaire qui est sélectionnée :

images/18C02-032.png

3. Le panneau Fichiers

Le panneau Fichiers permet de gérer tous les fichiers de votre site web. Il permet aussi d’accéder à la gestion...

Les barres d’outils

1. La barre d’outils Document

Par défaut, Dreamweaver affiche la barre d’outils Document (Fenêtre - Barres d’outils).

images/18C02-034.png

Les boutons de cette barre d’outils permettent de gérer l’affichage.

  • Le bouton Code permet de n’afficher que le code source de la page active.

  • Le bouton Fractionner permet de scinder la fenêtre en deux. La partie supérieure affiche le rendu de la page, c’est-à-dire que vous avez l’affichage réel de votre page web. La partie inférieure affiche le code.

  • Le bouton suivant permet d’afficher, soit le mode Création du rendu, c’est-à-dire l’affichage de la conception de la page, soit le mode En direct du rendu, c’est-à-dire l’affichage réel de la page.

images/18C02-035.png

2. La barre d’outils Standard

 Dans le menu Fenêtre - Barres d’outils, choisissez Standard.

Cette barre d’outils permet d’accéder aux fonctions standards des documents : nouveau document, ouvrir, enregistrement, annulation...

images/18C02-036.png

3. La barre d’outils Commun

 Dans le menu Fenêtre - Barre d’outils, choisissez Commun.

Cette barre d’outils est affichée par défaut et elle s’affiche sur la gauche de la fenêtre principale. Elle est dédiée à la gestion de la fenêtre en mode Création et en mode Code.

images/18C02-037.png

En cliquant...

La barre d’état

Située sous la page web en cours de création, cette barre est très importante car elle affiche de précieuses informations techniques.

1. Voir le code HTML en cours

 Dans la barre d’état, vous visualisez sur la gauche le code HTML correspondant à l’élément sélectionné dans la page. Dans cet exemple, c’est une cellule de tableau (<td>) qui est sélectionnée :

images/18C02-038.png

2. Validation du code

Le bouton suivant indique si le code généré est valide avec l’encoche verte images/18C02-039.png, ou s’il contient des erreurs avec la croix rouge images/18C02-040.png.

3. Langage utilisé

Ensuite vous voyez l’indication du langage utilisé dans la page active. Dans cet exemple c’est du HTML :

images/18C02-041.png

4. La taille de la fenêtre de création

Sur la droite, vous avez à votre disposition une liste déroulante pour afficher votre page web selon un type ou une taille d’écran donnés.

images/18C02-042.png

Dans les Préférences (menu Edition sous Windows, menu Dreamweaver CC sous Mac OS), dans la catégorie Tailles de la fenêtre, vous pouvez créer d’autres tailles de fenêtre. 

Le dernier bouton vous permet de choisir le navigateur pour visualiser la page web active.

images/18C02-043.png

L’environnement de création

1. Le zoom de la page

 Pour zoomer la page affichée, dans le menu Affichage - Options de création d’affichage, choisissez Zoom, puis une valeur de zoom.

 Vous pouvez aussi utiliser les commandes Zoom avant et Zoom arrière.

2. Les règles

L’ajout de règles horizontale et verticale va vous permettre de placer, de positionner, de dimensionner correctement les différents éléments de votre page web.

 Dans le menu Affichage - Options de création d’affichage - Règles, choisissez Afficher. Pour l’unité, privilégiez plutôt le pixel, qui est l’unité usuelle du web, car nous avons une diffusion écran qui utilise des pixels. Dans le menu Affichage - Options de création d’affichage - Règles, choisissez Pixels.

 Vous pouvez déplacer l’origine 0x0 des règles, en effectuant un cliqué-glissé depuis l’intersection des règles. Lâchez la souris là où vous souhaitez placer l’origine.

images/18C02-044.png

Pour replacer l’origine 0x0 des règles, faites un double clic à l’intersection des règles, ou dans le menu Affichage - Options de création d’affichage - Règles, choisissez Rétablir origine.

3. La grille

Afficher une grille de composition peut être aussi très...