Macromedia Dreamweaver ultra dev 4

1
L’interface d’UltraDev
Au sommaire de ce chapitre
✔ Découvrir les menus et comprendre leur utilisation
✔ Découvrir les barres d’outils et savoir les activer
✔ Découvrir les icônes et les objets HTML correspondants
✔ Savoir écrire directement du HTML en cas de besoin
✔ Personnaliser UltraDev à sa convenance
L’interface d’UltraDev
Dreamweaver UltraDev est un programme reposant sur deux modules : le module de
conception du document (Dreamweaver à proprement parler) et le module bases de
données (UltraDev en tant que tel). Les deux modules sont intégrés dans une même
interface, mais s’utilisent indépendamment l’un de l’autre. Nous allons consacrer
cette première partie à la découverte des fonctionnalités d’édition HTML de Dreamweaver. Vous serez alors en mesure de créer des documents dignes de ce nom et qui
fonctionnent bien.
Dans ce premier chapitre, nous allons faire connaissance avec l’interface. Vous vous
sentirez ensuite plus à l’aise. Ce qui différencie ce programme de bien d’autres est
que vous ne disposez pas d’une solution unique pour réaliser une tâche, mais de trois
ou quatre. Nous sommes certain que vous trouverez par vous-même encore d’autres
solutions que celles livrées dans cet ouvrage. En effet, nous découvrons sans cesse
d’autres techniques et astuces pour concevoir nos pages et interagir avec le
programme.
10
Partie I
Le développement Web dynamique
L’interface d’UltraDev est aussi souple que le programme lui-même. Vous n’avez
probablement jamais rencontré de programme vous donnant des moyens aussi variés
de visualiser vos données. La zone d’affichage du document permet de voir à quoi
ressemble votre page Web pendant que vous travaillez sur les propriétés et les attributs des objets dans une fenêtre dédiée. Pour ceux qui préfèrent aller y voir de plus
près, le code HTML est disponible, ainsi que l’éditeur de balises. Bien des barres
d’outils permettent d’insérer des codes JavaScript, des bases de données et autres
fonctionnalités.
Lorsque vous lancez UltraDev pour la première fois, vous risquez d’être déconcerté.
L’écran est, en effet, envahi de tas d’éléments qui ne demandent qu’à se rendre utiles
(voir Figure 1.1). Mais, même sans aucune référence, vous ne tarderez pas à vous y
retrouver assez rapidement. L’idée d’UltraDev est de vous rendre la vie aussi simple
que possible. Passer un temps fou à comprendre comment créer un lien alors qu’il
aurait suffi de saisir <A HREF="monlien.html">Lien</A> n’est ni de mise, ni efficace.
Figure 1.1
L’interface
d’UltraDev est
assez dense.
Se familiariser avec l’interface tout de suite est beaucoup plus efficace que rechercher dans la presse, et dans l’urgence, un élément que l’on ne connaît pas lorsqu’on
en a besoin. Si vous êtes un peu curieux, n’hésitez pas à parcourir l’interface à l’aide
Chapitre 1
L’interface d’UltraDev
11
de la souris pour prendre connaissance des info-bulles. Ces dernières fournissent
déjà une bonne indication, mais ne vous disent cependant pas tout.
Faisons donc connaissance d’un peu plus près avec l’interface. Cela vous sera utile
dès le Chapitre 2, où nous commencerons à entrer dans le vif du sujet.
Les menus
Les menus proposés par UltraDev sont les suivants :
m
Fichier. Tout ce dont vous avez besoin pour ouvrir ou enregistrer des documents
HTML se trouve dans ce menu, ainsi que les fonctions connexes, comme l’importation de sources externes. Vous remarquerez certaines commandes comme
Enregistrer comme modèle ou Design Notes qui ne seront peut-être pas immédiatement compréhensibles. Ne vous en inquiétez pas, vous découvrirez bien
assez vite ce que certaines notions signifient.
m
Edition. Pour couper, copier, coller et rechercher des objets. C’est également
dans ce menu que vous pouvez définir vos préférences. Nous y reviendrons un
peu plus loin.
m
Affichage. Ce que vous souhaitez voir ou ne pas voir dans votre fenêtre de travail
est regroupé dans ce menu. A mesure que vous progresserez dans vos travaux,
vous apprécierez certainement d’afficher certains éléments et d’en masquer
d’autres, comme des bordures ou des grilles de repères.
m
Insertion. Pour insérer un élément dans votre HTML, piochez dans ce menu si
vous ne souhaitez pas utiliser les barres d’outils dédiées.
m
Modifier. Ce menu est l’instrument idéal pour modifier un élément sélectionné
dans votre page. Vous modifiez aussi bien la cible d’un lien qu’un élément de
présentation, comme un tableau.
m
Texte. Pour mettre en forme votre texte, sous une forme ou une autre. Les
commandes sont assez semblables à celles que vous rencontrez dans votre traitement de texte favori. Vous intervenez notamment sur les polices et leurs attributs.
m
Commandes. Ce menu est orienté vers ce que vous connaissez sans doute par
ailleurs comme étant l’enregistrement de macros. Mais vous disposez ici
de nouvelles fonctionnalités, comme l’importation d’autres bibliothèques de
12
Partie I
Le développement Web dynamique
commandes. Certaines commandes sont d’autre part disponibles pour faire un
peu de "ménage" dans votre HTML, notamment si vous l’avez généré à l’aide de
Microsoft Word. Vous disposez également de la possibilité d’intervenir sur vos
modèles de couleurs. Nous verrons, au Chapitre 5, comment créer ses propres
commandes.
m
Site. Si UltraDev peut être utilisé pour créer de simples pages Web, sa capacité à
gérer des sites en entier en fait un instrument extrêmement puissant aussi bien
pour les débutants que pour les pros. Nous y reviendrons en détail au Chapitre 6.
m
Fenêtre. Ce menu permet de gérer ce qui est ou non affiché à l’écran. Si, au cours
de votre lecture, vous constatez que certains éléments que nous commentons ne
sont pas affichés, le menu Fenêtre vous servira à remédier à la situation.
m
Aide. Ce menu représente un système d’aide complet, proposant notamment des
didacticiels.
ASTUCE
Lorsque vous travaillez sur un objet, que vous l’"éditez", vous disposez habituellement
de menus contextuels. Pour accéder à un menu contextuel, sous Windows, sélectionnez
l’objet et faites un clic droit (Contrôle+clic sous Mac). Pour un grand nombre de commandes de menus, vous disposez également d’un raccourci clavier, affiché à droite de la
commande dans le menu.
La fenêtre de conception du document
Lorsque vous démarrez avec UltraDev, la plus grande partie de l’écran est, malgré
tout le reste, destinée à votre espace de travail. C’est là que vous allez concevoir vos
pages Web en mode WYSIWYG, ce qui permet de découvrir immédiatement ce que
serait votre page Web si elle était affichée dans un navigateur. La Figure 1.2 est une
illustration de ce que vous allez voir à l’écran si vous utilisez la commande Affichage > Code et création.
Vous pouvez saisir directement dans la fenêtre d’édition ou utiliser l’un des boutons
de la barre d’outils des objets pour insérer l’un des objets proposés. Le point d’insertion clignotant indique l’endroit où vous intervenez. Vous pouvez le déplacer à l’aide
de la souris ou des flèches de direction du clavier.
Chapitre 1
L’interface d’UltraDev
13
Figure 1.2
L’affichage
simultané
du code et
de l’aperçu.
INFO
A l’inverse des traitements de texte modernes, comme Word 2000 ou WordPerfect, UltraDev ne permet pas de placer le curseur où vous le souhaitez. Vous ne pouvez pas, par
exemple, cliquer au bas de la fenêtre et commencer la saisie. Nous verrons cependant au
prochain chapitre que vous pouvez créer des zones arbitraires dans lesquelles ajouter du
contenu. Ce n’est pas aussi simple que cliquer où vous voulez, mais presque.
La manipulation des objets
Les objets qui ont été ajoutés à la fenêtre peuvent être déplacés, coupés, copiés ou
encore collés. Pour sélectionner un objet, cliquez simplement dessus. Pour sélectionner un groupe d’objets, tracez un cadre de sélection autour d’eux à l’aide de la
souris. Un objet sélectionné est entouré d’une bordure foncée ; un groupe d’objets
sélectionné est globalement grisé.
Certains objets, comme les images ou les tableaux, disposent d’attributs de largeur et
de hauteur qui permettent de les redimensionner. Ces objets se présentent un peu
différemment des autres : ils possèdent des poignées de redimensionnement sur leur
14
Partie I
Le développement Web dynamique
cadre de sélection (il s’agit des petits carrés noirs que vous pouvez tirer dans un sens
ou dans un autre à l’aide de la souris pour redimensionner l’objet).
Une fois un objet sélectionné, vous pouvez utiliser les commandes du menu Edition
(Copier, Couper, Coller et Effacer) pour déplacer, dupliquer ou supprimer la sélection. La touche d’effacement arrière permet également d’effacer une sélection. Vous
disposez également des commandes Copier HTML et Coller HTMl dans le menu
Edition. UltraDev propose différents raccourcis pour sélectionner les objets. Pour
sélectionner une ligne de texte ou un objet, placez le pointeur sur sa gauche. Le pointeur se transforme en grosse flèche pointant vers la droite, indiquant que vous êtes en
mode sélection. Vous pouvez sélectionner de cette manière plusieurs lignes ou objets
en faisant glisser la souris tout en maintenant le bouton gauche enfoncé.
Il existe également deux moyens très simples de sélectionner des objets dans la
hiérarchie HTML. Dans la barre d’état, vous disposez de la liste hiérarchique des
balises de l’objet sur lequel vous travaillez. Si vous placez, par exemple, un lien dans
une cellule de tableau, la barre d’état vous affiche : <body><table><tr><td><a>.
Vous pouvez sélectionner la cellule considérée en cliquant sur la balise <td>. Vous
pouvez de la même manière sélectionner tout autre niveau hiérarchique.
Il est également possible d’utiliser les commandes Sélectionner balise parente ou
Sélectionner enfant du menu Edition pour sélectionner les objets parent ou enfant
de la hiérarchie.
La taille de la fenêtre
Vous savez sans doute que les sites Web sont souvent conçus sans tenir compte de la
taille de l’écran du navigateur. Dans bien des cas, il faut faire défiler la page pour en
visualiser tout le contenu. UltraDev permet de visualiser l’apparence d’une page
avec différentes résolutions. La résolution courante est affichée dans la barre d’état.
La résolution 600 × 300 pixels correspond au plus petit dénominateur commun des
navigateurs. Elle permet d’afficher la page complète sans avoir besoin d’agrandir la
fenêtre. Vous pouvez dès à présent sélectionner d’autres tailles prédéfinies en
cliquant sur la petite flèche du champ d’affichage de la taille. Vous pouvez personnaliser d’autres tailles dans les préférences d’UltraDev, comme nous le verrons plus
loin dans ce chapitre.
Chapitre 1
L’interface d’UltraDev
15
Ne négligez pas l’affichage WebTV
Si vous avez ouvert la liste des tailles prédéfinies, vous avez constaté que le format
WebTV était prévu. Même si cela peut vous paraître surprenant, la part de l’audience
utilisant ce support est loin d’être négligeable. Nous en avons récemment fait l’expérience en analysant les connexions d’un site : 35 % des utilisateurs étaient en mode
WebTV.
Il est important de savoir que la taille de la fenêtre de document n’est pas nécessairement la taille de l’affichage HTML. Il ne s’agit que d’un aperçu dans différentes
résolutions. Si vous insérez une image ou un tableau de 800 pixels de large et que
vous travailliez avec une fenêtre de 600 pixels, l’objet ne sera pas redimensionné en
conséquence. De la même manière, si vous travaillez sur un petit écran, demandezvous à quoi ressemblera l’affichage avec des écrans plus grands.
La taille de la page et la durée du téléchargement
Juste à droite de l’affichage de la résolution, on trouve l’affichage de la taille du
fichier et de la durée de téléchargement estimées. Bien des développeurs se soucient
du type de connexion utilisé par les visiteurs. Créer des pages magnifiques qui
mettent dix minutes à se charger n’est certainement pas un bon choix. L’estimation
de durée indiquée se réfère à l’emploi d’un modem 28.8. Vous pouvez modifier ce
paramètre dans les préférences d’UltraDev, comme nous le verrons plus loin dans
ce chapitre.
La personnalisation de la fenêtre
La fenêtre du document peut être personnalisée avec certains outils d’aide à la
conception. Dans le menu Affichage, vous pouvez afficher ou masquer le contenu de
l’en-tête, ainsi que la barre d’outils affichée en haut de la fenêtre juste en dessous
de la barre de menus. La barre peut être utile, mais elle occupe de l’espace.
Les règles et la grille
Dans le menu Affichage, vous pouvez opter pour une grille d’aide au positionnement
et paramétrer cette grille en fonction de vos besoins (voir Figure 1.3).
16
Partie I
Le développement Web dynamique
Figure 1.3
Les paramètres de la
grille permettent de
définir vos préférences en matière d’aide
au positionnement.
Les règles sont également de bons repères. Vous pouvez les afficher ou les masquer
à l’aide du menu Affichage et en définir l’unité de mesure. Pour modifier l’origine
des règles (le point 0), faites glisser l’intersection des deux règles où vous le souhaitez à l’aide de la souris. Vous pourrez toujours revenir au point d’origine via le menu
secondaire de la commande Affichage > Règles.
Le tracé de l’image
Un autre moyen très utile de personnaliser la fenêtre du document est d’utiliser un
tracé d’image. Si vous avez déjà essayé de mettre en page une page Web reposant sur
une création originale, vous avez sans doute remarqué qu’il n’était pas toujours très
simple de se conformer exactement à l’original. UltraDev donne la possibilité de
placer l’image en arrière-plan, ce qui permet d’aligner exactement les différents
éléments pour rester fidèle à l’original.
Activez la commande du menu Affichage et chargez une image. L’image est insérée
avec le coin supérieur gauche de la fenêtre comme origine. La Figure 1.4 donne un
exemple avec une grille affichée.
Vous ne souhaitez pas forcément que l’image soit calée dans le coin supérieur
gauche de la fenêtre. Vous pouvez ajuster la position de l’image à l’aide de la
commande correspondante du menu secondaire de la commande Affichage > Tracé
de l’image >Ajuster la position. Fournissez les nouvelles coordonnées X et Y en
pixels, ou utilisez les flèches de direction pour déplacer l’image. Il est également
possible d’aligner l’image sur un autre objet. Sélectionnez l’objet, puis activez la
commande correspondante du menu secondaire. Vous ne prenez aucun risque lors de
ces différentes manipulations puisque vous pouvez toujours rétablir la position
d’origine.