Rechercher sur Google
Ma nouvelle adresse :-)

Recherche sur le site
Aide Débutant (index)
La souris et le clavier
Programmes et documents
Fenêtres et menus
Le copier-coller
 
Aide Windows (index)
Présentation
Configuration
Utilisation
Ajout et suppression de programmes
 
Urgence
Les périphériques
Utilitaires de Windows
Entretien de Windows
 
Virus et antivirus
Firewall et mot de passe
 
Protection et sécurité
Trucs et astuces
Conseils, astuces et problèmes
 
• Avancé
Installation de Windows
Base de Registre
Installation d'un disque dur
Partitionnement
 
Créer une page en HTML
Présentation de Dreamweaver 2.0
Utilisation de Dreamweaver 2.0
version actualisée sur http://www.aidewindows.net

 

Créer son site avec Dreamweaver 2
Mise en route
 
Présentation de Dreamweaver
La fenêtre Site
La fenêtre Document
- les éléments de la fenêtre Document
La palette Objets
L'inspecteur de Propriétés
Le Lanceur
 
Transféré pages suivantes :
 
Utilisation de Dreamweaver
 
Création de pages
- Utiliser les modèles
- Ma méthode
Evolution du site
- Modifier un document
 
Images et tableaux
Images
Tableaux
- créer un tableau
- modifier un tableau
 
Liens hypertexte
 
Feuilles de style
- créer une feuille de style
- utiliser une feuille de style
 
Transfert de pages

 

Créer son site avec Dreamweaver 2

Dreamweaver 2 est disponible gratuitement sur le kit de connexion Wanadoo ou sur le site Wanadoo (voir).

C'est un logiciel très complet. Une fois qu'on a compris les principes de bases, il est simple à utiliser.
Son grand avantage est d'effectuer en même temps la création et le transfert des pages. Ce qui dispense d'utiliser un logiciel FTP.

Cependant, on doit prendre garde à l'instabilité du logiciel (risques de plantages), en sauvegardant régulièrement ses documents.

Mise en route :

Voici comment "démarrer" son site avec Dreamweaver 2 :
1 créer les dossiers site et images, et le fichier index.htm,
2 créer un Nouveau site dans Dreamweaver

1 Création des dossiers et du fichier index.htm :

Il faut, avant tout, créer les dossiers du site sur le disque dur.

Avant d'ouvrir Dreamweaver :
- créer un dossier site et un sous-dossier images à l'intérieur de Mes documents (voir),

A l'ouverture de Dreamweaver, enregistrer le Document sans titre :
- menu Fichier, Enregistrer sous...
- aller à l'intérieur du dossier site,
- nommer le document index.htm.

PS Au lieu de créer un fichier index.htm maintenant, on peut consulter le paragraphe concernant les modèles (voir), et nommer le premier document créé index.htm.
L'important, c'est de savoir que le fichier index.htm est le premier document d'un site.

Voici donc les éléments indispensables.
Il faut maintenant créer un Nouveau site dans Dreamweaver.

2 Création d'un Nouveau site dans Dreamweaver :

Cela consiste à indiquer dans Dreamweaver :
- le chemin d'accès du dossier site sur le disque dur,
- les paramètres de connexion (obtenus auprès de son FAI (voir)),
- l'emplacement de la page index.htm.

Dans la fenêtre index.htm :
- menu Fichier, Nouveau site...,

Dans la fenêtre "Définition du site pour..." :

Catégorie Infos locales (écran 1) :
Dans Nom du site :
- donner un nom pour son site (ex : Mon site)
Dans Dossier racine local :
- cliquer sur l'icône dossier pour sélectionner le dossier du site,
- ouvrir le dossier du site,
- cliquer sur Enregistrer lorsqu'on est à l'intérieur du dossier.
Dans Cache :
- cocher "Utiliser le cache pour accélérer les mises à jour des liens".

Catégorie Infos du serveur Web (écran 2 ) :
dans Accès au serveur :
- choisir FTP,
dans Hôte FTP :
- rentrer le nom du serveur FTP de son FAI,
dans Nom d'utilisateur :
- rentrer son login (la première partie de son adresse email),
dans Mot de passe :
- rentrer son mot de passe de messagerie, et cocher la case Enregistrer.

Catégorie Mise en forme de la carte du site (écran 3 ) :
dans Page d'accueil :
- cliquer sur l'icône dossier pour sélectionner la page index.htm,
- cliquer sur Ouvrir.

- valider en cliquant sur OK.

Remarque Toute modification ultérieure de ces paramètres se feront :
à partir de la fenêtre Site :
- menu Site, Définir les sites...
ou à partir d'une fenêtre de document :
- menu Fichier, Ouvrir site, Définir les sites...

 

Présentation de Dreamweaver :

Il faut distinguer :
- la fenêtre Site (écran), qui permet de gérer le site.
- la fenêtre Document, avec les palettes, qui permet de créer et modifier les pages.

La fenêtre Site :

La fenêtre Site contient :
- dans sa partie droite, le Répertoire local : arborescence du site sur le disque dur (dossiers, fichiers).
- dans la partie gauche, on affichera le Site distant en cliquant sur l'icône située en dessous du menu Fichier :

Afficher le Site distant

On utilisera essentiellement la partie droite de la fenêtre Site :

Pour modifier les pages du site :
- double-cliquer sur un document pour l'ouvrir,

Pour transférer les fichiers du site :
- cliquer avec le bouton droit sur un document pour accéder au menu contextuel.

Pour se connecter au serveur FTP de son FAI :
- cliquer sur un fichier avec le bouton droit, et sélectionner "Placer",
ou :
- cliquer sur le bouton Connecter.
Bouton Connecter

Pour se déconnecter :
- cliquer sur Déconnecter.

Conseil Pour plus de clarté, on peut afficher uniquement la fenêtre Site au démarrage de Dreamweaver :

- menu Edition, Préférences...,
- cocher "Afficher seulement la fenêtre du site au démarrage".

 

La fenêtre Document :

"La fenêtre Document affiche une image *approximative* du document en cours".
Il faudra donc, lors de la création ou de la modification d'une page, vérifier l'aspect de celle-ci, après enregistrement, dans Internet Explorer, et de temps en temps dans Netscape.
Le menu Fichier possède une commande "Aperçu dans le navigateur". Je ne la recommande pas, car elle entraîne la création d'un fichier temporaire à l'intérieur du dossier du site.

On peut ouvrir plusieurs fenêtres Document en même temps.

La fenêtre Document est l'espace de travail de Dreamweaver.
Il faut considérer :
- les éléments de la fenêtre,
- les différentes palettes accessibles par le menu Fenêtres.

Les éléments de la fenêtre document :

- la barre de titre Barre de titre
elle comporte : le nom de la page (menu Modifier, Propriétés de la page...), et le nom du fichier, accompagné d'un astérisque s'il a été modifié depuis le précédent enregistrement.

- le sélecteur de balise Sélecteur de balise
il permet de sélectionner une partie de la page en fonction des balises HTML.
On peut ainsi délimiter précisément la partie à modifier.
exemple :
- cliquer sur <p> pour modifier le paragraphe en cours,
- cliquer sur <table> pour modifier le tableau contenant le paragraphe,
- cliquer sur <body> pour modifier la page entière.

- la dimension de la fenêtre document, et la taille du fichier Dimension et taille
permet de régler la taille de la fenêtre document :
- cliquer pour faire apparaître le menu contextuel,
- choisir une taille, ou sélectionner "Modifier les tailles...".
permet de connaître la taille du fichier, et son temps de chargement (approximatif).

- le mini-lanceur, version miniature du lanceur (voirmini-lanceur

Les palettes accessibles dans le menu Fenêtre.

D'abord, les trois principales, affichées par défaut à l'ouverture de Dreamweaver.

menu Fenêtre

- Objets : sert surtout à insérer des images et des tableaux. On pourra utiliser les raccourcis clavier à la place (Ctrl+I ou Ctrl+T), ou le menu Insertion.
- Propriétés : très utile pour mettre en forme du texte, élaborer des liens hypertexte.
- Lanceur : surtout utile pour son premier bouton Site, et le dernier HTML. Remarquer que ces boutons fonctionnent comme des interrupteurs.

La palette Objets :

Elle est composée de quatre séries de boutons, accessibles en cliquant sur le triangle en haut de la palette.
Les commandes sont également accessibles par le menu Insertion.

Commun : affichée par défaut.
Pour ajouter rapidement un tableau, une image, une barre horizontale, etc.

En-tête :
Pour ajouter des balises Meta sans passer par l'affichage HTML.
Noter cependant que cette opération devra se faire en une seule fois, notamment pour l'insertion de mots-clés, sinon il y aura création de plusieurs balises.
Il vaut mieux contrôler manuellement le résultat avec l'inspecteur HTML.

Formulaire :
Pour créer un formulaire.

Invisible :
Pour ajouter divers éléments invisibles (ancre de lien hypertexte (voir), commentaire, script, etc.)

L'inspecteur de Propriétés :

Il permet de visualiser et modifier les caractéristiques de l'élément sélectionné de la page (texte, image, tableau).
Il est utile pour insérer des liens hypertexte.

Son contenu est différent, suivant l'élément sélectionné.
En cliquant sur le triangle, en bas à droite, on affiche / masque des informations supplémentaires.

Texte :

Certaines commandes sont accessibles en cliquant à l'intérieur du texte :
- modifier le format, l'alignement du texte.

D'autres en sélectionnant le texte :
- modifier la police de caractère, sa taille, sa couleur, son style (gras, italique),
- créer un lien hypertexte.

Propriétés d'un texte

Pour sélectionner le texte :
- double-cliquer sur un mot pour le sélectionner (et lui affecter un lien hypertexte)
- cliquer sur la balise <p> dans le sélecteur de balise pour sélectionner le paragraphe.

Quand le texte est situé à l'intérieur d'un tableau, la partie inférieure contient les caractéristiques du tableau :

Propriétés d'un texte dans un tableau

Image :

 

Propriétés d'une image

Nom de l'image :
pour utiliser celle-ci dans un langage de script.

Dimensions de l'image (en pixels) :
affiché automatiquement par Dreamweaver.
Si les chiffres apparaissent en gras :
- cliquer avec le bouton droit sur l'image,
- sélectionner "Actualiser la taille".

Src (fichier source de l'image) :
- taper le chemin d'accès de l'image, ou cliquer sur dossier pour ouvrir une boîte de dialogue.

Lien :
- taper l'adresse du lien (URL ou ancre), ou cliquer sur dossier pour sélectionner un fichier du site.

Aligner :
- aligner l'image et le texte.

Sec (texte secondaire) :
- texte qui s'affiche lorsque le pointeur est placé au-dessus de l'image.

Tableau :

 

Propriétés d'un tableau

 

Le Lanceur :

Il permet d'accéder à certaines palettes disponibles dans le menu Fenêtre :
- Bibliothèque, Styles, Comportement, Scénario.
Il est très utile pour afficher le code HTML du document en cours.
Il permet d'afficher la fenêtre Site.

Lanceur

 

Haut de la page
 
Aide Internet (index)
Débuter sur Internet
Utilisation d'Internet
Conseils divers
Les forums de discussion
Configurer une connexion Internet
 
• Internet Explorer
Utilisation
Configuration
• Outlook Express
Utilisation
Configuration
Maintenance
Les virus dans Outlook Express
 
• Page perso
Créer sa page Web
Créer une page en HTML
Utiliser Dreamweaver 2.0
 
Liens
 
Macintosh
 
Copyright
Remerciement
Ecrivez-moi
Mon livre d'or