Créer un site avec Dreamweaver
Un site est un ensemble de fichiers informatiques lisibles et interprétés par un logiciel appelé « navigateur » ( exemple : Google, Yahoo…).
1. Créer un répertoire racine
Il est indispensable que tous les fichiers du site se trouvent dans un même répertoire.
► Créer ce répertoire dans :
U : – PHY-CHIM – PC_MPI – MPI classes – 2_5 – votre dossier ...
Le nommer en prenant votre prénom et celui de votre binôme (exemple : Romeo et Juliette)…si vous avez déjà crée un sous dossier « nos documents », il suffira de prendre ce sous dossier et de le renommer !
Les documents nécessaires à la constitution du site sont disposés dans 2 sous-répertoires du répertoire racine.
► Créer ces 2 sous-répertoires en les nommant données et images dans le répertoire Romeo et Juliette.
Dans « données », vous mettrez tous les documents qui seront utiles ( cours, TP complétés…)
Dans « images » vous mettrez toutes les images utilisées sur votre site…
2. Plan du site
Ce site comprend une page de présentation (accueil) et 4 autres pages (bases de l'électricité, informatique, capteurs, électronique,)
3. Créer la page d’accueil
Lancer Dreamweaver. Le logiciel ouvre une page vierge. L’enregistrer dans le répertoire Romeo et Juliette sous le nom de index.htm.
a. Présentation de Dreamweaver :
Accueil Bases de
l’électricité Informatique capteurs Electronique
La page ouverte présente une barre de menus déroulants classique où l’on retrouve toutes les commandes du logiciel.
Il n'y a pas de barre d'outils classique mais la commande Fenêtre puis Objets permet d'afficher une boîte à outils flottante.
La commande Propriétés du menu Fenêtre déclenche l'affichage de l'inspecteur de propriété. Cet inspecteur est contextuel. Il changera selon que l'objet mis en surbrillance est du texte, une image ou un tableau.
b. Proposition de mise en forme de la page d’accueil : Vous allez créer une page accueil de ce style…..
b.1. Insérer un tableau
Cliquer sur l'icône tableau de la fenêtre d'objets "commun". Une boîte de paramétrage s'affiche pour définir les caractéristiques du tableau. On peut également utiliser le menu Insertion puis Tableau.
Le tableau se crée, remplissez-le...
La frappe du texte se fait comme dans un traitement de texte classique et toutes les commandes de format, de couleur, etc... sont réglables dans l’inspecteur de propriétés.
Pour fusionner des cellules, les sélectionner puis - soit Modifier puis Tableau puis Fusionner les cellules.
- soit dans l’inspecteur des propriétés, cliquer sur le symbole
Il est conseillé d’afficher les Règles en pixels dans Affichage pour mettre en forme la page d’accueil.
Pour donner une couleur à chaque cellule, la sélectionner et dans l’inspecteur des propriétés, cliquer sur la case près de Ar-pl (couleur d’arrière plan).
Ne pas oublier d’enregistrer régulièrement votre travail !!!
b.2. Insérer une image
L'outil image de la fenêtre d'objets "commun" permet de choisir l'image dans une fenêtre du genre « explorateur ».
L’image recherchée doit se trouver dans le sous-répertoire images du répertoire Romeo et Juliette. On peut également utiliser le menu Insertion puis Image.
Il est possible de visualiser votre page avec le navigateur utilisé sur son ordinateur avec le menu Fichier puis Aperçu dans le navigateur.
4. Créer des images
Plutôt que d’écrire le texte ( électronique…) dans le tableau, on va créer des boutons….
Lancer le logiciel de traitement d’images ( Photofiltre) pour créer 4 images (bases de l'électricité, informatique, capteurs, électronique).
Dimensions, par exemple, 100 x 35 pixels, résolution 72 ppp.
Ecrire du texte.
Exemple de bouton
Les enregistrer en format
Jpeg
dans le sous-répertoire images du répertoire Romeo et Juliette.Remplacer le texte de la page d’accueil par les boutons correspondants.
5. Réaliser des liens
Mettre en surbrillance un (ou quelques) mot(s) du texte, ou l'image, qui sera le point de départ du lien.
Dans l’inspecteur de propriétés, en face de la fenêtre lien, cliquer sur l’icône Parcourir les fichiers. Dans la nouvelle fenêtre qui apparaît, sélectionner le fichier à lier dans les sous répertoires de Roméo et Juliette.
Procéder ainsi pour lier les images bases de l'électricité, informatique, capteurs, électronique aux pages du même nom.
Quand une page est terminée, ne pas oublier de l’enregistrer et de la visualiser avec le navigateur utilisé (pour voir notamment si les liens programmés sont bien fonctionnels).
6. Créer les autres pages
Procéder de la même manière que la page d’accueil pour créer ces pages (il est possible de faire un copier-coller).
Ne pas insérer d’image dans la partie centrale….
Vous pouvez :
Soit créer un lien vers chacune des autres pages ( avec un texte ou le bouton…) en disposant chaque page comme la page d’accueil ; cela vous permet de passer d’une page à l’autre sans repasser par la page d’accueil !
Soit simplement créer un lien vers la page d’accueil
Ne pas oublier d’enregistrer ces pages dans le répertoire Romeo et Juliette sous les noms de bases de l'électricité.htm informatique.htm capteurs.htm et électronique.htm.
7. réalisation du site
Mettre vos documents dans le dossier « données ».
Créer des liens vers chaque document à partir de la page concernée….
