Initiation à dreamweaver mx 2004

dw2 - création de cette page

Bonjour Didier,

Installe-toi confortablement , je commence. : Organise ton environnement : tu as créé hors de Dreamweaver un dossier pour contenir l'ensemble des éléments de ton site. Ouvre Dreamweaver . Installe quelques panneaux qui vont t'être utiles avec le menu Fenêtre/coche en cliquant dessus : Insertion, Propriétés, Fichiers.

1 - installation de ton environnement de travail

Sur le panneau de droite, tu vois les panneaux suivant :

Sur le panneau Fichiers, tu vois le squelette de ton site . Dans mon exemple, mon site s'appelle lagazettedesaintaubin et tu vois une partie de mes fichiers dont le fichier pour cette page dw2_premiere_page. Ce panneau me permettra d'établir des liens faciles et de me repèrer dans le site sans aller me promener dans sur mon disque dur. Cool, non....

Remarque que je ne mets pas d'accent dans mes noms de fichiers ou d'images et je ne mets pas de tiret mais la touche soulignée du clavier _. Les browsers qui lisent l'anglais ne connaissent pas les accents et ne supportent pas certains caractères comme le tiret, les chiffres en tête des noms et en général les signes comme le . qui ont d'autres significations pour eux !

en bas de la fenêtre le panneau Propriétés :

telle que je la vois en ouvrant un nouveau document .

2 - Création d'un nouveau dossier

Dans le cours précédent nous avons créer un fichier pour le site et dedans ce fichier un dossier pour les images

Je fais un clic droit(CD) sur le dossier général du site et clic gauche (CG) sur nouveau dossier qui se met tout en bas de la hiérarchie des dossiers dans le panneau Fichiers ( untitled) et je le nomme dw2_premiere_page.Valider ce nom en tapant sur la touche "Enter" de ton clavier .( on peut valider de différentes façons, tu vas les découvrir).

3 - La barre des menus et des outils

Regarde maintenant en haut de ta fenêtre : tu vois ceci :

Ce sont les barres de menus et d'outils. Nous allons les découvrir au fur et à mesure de nos besoins. Cela évitera de consommer de l'aspirine !

La 5ème barre horizontale comporte une zone de titre ; tu CG dedans et tu donnes un titre . Pour cette page c'est Dreamweaver_mx .

Je suis en mode de Mise en forme Standard .

4 - Enregistre la page

Et maintenant il convient d'enregistrer la page par le menu Fichier/ enregistrer sous... tu cherches le dossier dw2_premiere_page, tu l'ouvres et en bas de la fénêtre, tu nommes la page dw2_premiere_page. Voilà, elle est enregistrée.

5 - Propriétés de la page

On peut organiser la page , CG dans le panneau de Propriétés sur le bouton Propriétés de la page ou le menu Modifier / propriétés de la page et on obtient cette fenêtre :

Police : je laisse par défaut

taille : je laisse par défaut

Couleur du texte : pour cette page j'ai mis :#225C7D

Couleur d'arrière plan : J'ai mis blanc : #FFFFFF

Image d'arrière-plan : Je cherche avec le bouton Parcourir la tuile que j'ai mise dans le dossier image du site .Je te donne l'image pour que tu puisses faire l'arrière-plan :

Fais un clic droit sur la tuile pour l'enregistrer sur ton ordinateur.

J'ai organisé mon site ainsi, une image qui sert plusieurs fois dans plusieurs pages du site, je la place dans le dossier image du site et une image spécifique qui sert un fois dans la page, je la mets dans le dossier pour la page.

Marges : Si je ne mets rien, il y aura une petite marge par défaut. Si je ne veux pas de marge je mets 0 et comme ici, je veux une marge de 35 en haut, à gauche et à droite. Je laisse par défaut en bas.

Puis Appliquer, OK.

De temps en temps, je pense à enregistrer....

6 - Je place mon cours dans un tableau.

C'est conseillé de toujours écrire sa page dans un tableau Pour bien mettre en page.

Je suis en mode Insertion, Mise en forme Standard . Je le vois sur la 4ème barre en sélectionnant l'onglet Mise en forme

Tout en bas dans la barre d'état , à gauche tu suis les balises principales en html ; Au fait, j'ai oublié, si tu veux suivre le code html , dans la 5ème barre du haut, tu cliques sur Code , tu vois bien en plus ton pointeur qui se trouve exactement, là où dans le mode Création . Pour revenir à la vision de ta page, cliques sur le bouton Création et si tu veux suivre le code et voir ce que tu fais, clique sur Fractionner. Tu peux apprendre le html ainsi :-))))

Revenons à nos moutons... la taille de la fenêtre se trouve à droite dans la barre d'état. Je mets 760 x 420 .

C'est une taille générale depuis que les écrans de 17" se sont généralisés. Si tu restes dans ces dimensions, tu n'obligeras pas tes visiteurs à prendre la barre de défilement horizontale pour aller de droite à gauche de ton texte ce qui donne mal à la tête.Tes images ne doivent pas faire plus de 650 pixels de large pour ne pas avoir de barre de défilement horizontale ce qui est très possible.

Revenons au tableau ...Menu Insertion/ Tableau. La fenêtre s'affiche :

Ce tableau à 100% n'aura qu'1 ligne et 1 colonne . Les largeurs de bordure, marge intérieure de la cellule, espacement entre les cellules sont de 4 ( le dernier chiffre n'a pas d'importance car il n'y a qu'1 cellule !).

J'ai mis 100% comme cela le tableau s'adaptera à différentes dimensions de l'écran car sa largeur est ainsi relative. C'est plus souple et le visiteur pourra resserrer sa fenêtre si les images ne sont pas trop larges.

Le tableau prenant 671 pixels ,Je dispose de 655 pixels en largeur(671 moins les bordures et retraits prévus) pour écrire et disposer mon cours.

CG sur OK .

Et le panneau des propriétés me donne les propriétés du TABLEAU

Je complète par Aligner : center ; Couleur contour : #225C7D ( la même couleur que le texte). Je ne mets pas de couleur d'arrière-plan qui me laisse voir ma tuile après la bordure du tableau.

Les propriétés de la cellule .

Je clique dans le tableau et le panneau des Propriétés me donne les propriétés de la cellule ( unique dans e tableau)

Tu trouves les propriétés du texte puis en dessous les propriétés de formatage de la cellule : J'ai défini la couleur de l'arrière-plan #B7E2B4 et celle de la bordure intérieure #225C7D.

Voilà ma page peut être écrite dans sont décor, comme au théâtre.

7 - Titre de la page

Je cliques CG dans le tableau : J'obtiens les propriétés de formatage de la cellule. Je vais mettre le titre Initiation à Dreamweaver MX 2004 avec le format : En-tête 1, le couleur de police que j'ai défini une fois pour toute la page dans les propriétés de la page #225C7D mais que je pourrais changer ici , je justifie le texte centrer

Je repars à la ligne et j'écris le sous-titre dw2-Création de cette page , je n'ai besoin que de changer le format Entête-2

Suite page suivante

Retour page précédente

Retour Ateliers

Retour Accueil

Pour faire ce lien je surligne page suivante et je clique sur le rond à côté de la zone de lien et je tire le fil jusqu'à la page dw2_premiere_page2. le lien s'écrit dans la zone de lien !

Tutoriel et page réalisés par Danyelle Grünberg le samedi 6 mars 2004