Fiches
technique pour formation à
l'Institut français d'Istanbul
l'Institut français de Valence
Réalisation:
Guillaume Garçon
ÉTAPE
1- Créer une première page avec une charte graphique
Nouveau
site
1-
Pour commencer sélectionner Fichier > Nouveau site 2- Donner un nom au site 3- Sélectionner le dossier racine local en cliquant
sur le dossier jaune 4- Cliquer sur OK et accepter la création
du fichier cache
Tous
les objets du site (textes, images, sons, …)
doivent impérativement être enregistrés
dans le dossier racine local
Le
nom des dossiers/fichiers ne doivent pas excéder 8
caractères
(chiffres- lettres) sans accents, ni majuscules, ni espaces
Exemples : page1, liens, cv, a,
Premiers conseils avant de commencer :
- Réfléchir à une page d'accueil attrayante
et modifiable
- Penser à la charte graphique (disposition de chaque
éléments sur la page, police de caractères,
arrière plan …
- Prévoir le nombre de rubriques, l'évolution
du site
- Regrouper les documents dans le dossier racine prêts
pour l'édition
Arrière
plan
1.
Clic droit sur la page blanche de départ puis
Propriétés de la page
2.
Cliquer sur Appliquer, Modifier si besoin 3. Enregistrer le document Fichier > Enregistrer
sous …dans le dossier racine local
Nommer cette première page index
1- Donner un titre à la page
Ne pas confondre le titre de la page et le nom du fichier de
cette page
Le titre va apparaître en haut de la page dans le navigateur
Web
2-
Sélectionner une image comme arrière-plan en
cliquant sur Parcourir (non recommandé)
3-
Cliquer et sélectionner une couleur d'arrière
plan Possibilité de sélectionner une couleur
déjà définie avec la pipette
4/5-
Modifier les couleurs du texte et des liens
6-
Indique le dossier du document et le dossier racine
Maquette
Le
travail sera simplifié en créant une maquette
que l'on utilisera pour chaque page en l'enregistrant
comme modèle.
1.
Réfléchir à la maquette la plus adaptée
au site. Conseil : S'inspirer du travail d'autres sites
tout en restant modeste
Prévoir des marges de chaque côté de l'écran
2. Convertir la maquette en insérant un tableau
Si cette barre est absente, cliquer sur Fenêtre>Objets
1-
Insérer une image
2- Insérer un tableau
3- Insérer une barre horizontale
Insérer
un tableau
1.
Dans la barre d'objets, cliquer sur l'icône du tableau
Indiquer
le nombre de lignes et de colonnes désirées
La
bordure 0 signifie que les bords du tableau seront invisibles
2.
Dans la fenêtre principale, ajuster le tableau en tirant
sur les poignées de celui ci avec la souris.
Pour faciliter le travail, utiliser la grille et/ou la règle Affichage > Règles > Afficher
et Affichage > Grille > Afficher
Ces deux outils sont paramétrables
3.
Sélectionner une cellule du tableau
Avec la barre de propriétés (Modifier
> Propriétés de la sélection),
possibilité de:
- Fractionner une cellule ou de fusionner plusieurs cellules
(1)
- Paramètrer la disposition du texte dans la cellule
(2)
- Modifier la taille d'une cellule (préférer
le réajustement avec la souris) (3)
- Changer la couleur d'arrière plan d'une cellule(4)
1
2
3
4
Insérer
du texte
Sélectionner
une cellule du tableau et saisir le texte. Remarque : Dreamweaver ne conserve pas la mise
en forme d'un texte saisi sous Word
Vous
pouvez choisir la police de caractère que vous voulez
pour votre site mais sachez que si l'Internaute ne possède
pas cette police, les caractères de votre document
seront illisibles.
Pour éviter cela, utilisez les polices suivantes
:
ARIAL VERDANA TIMES GEORGIA HELVETICA COURIER
Ainsi, vous êtes certains que les Internautes possèdent
ces polices et donc qu'ils n'auront pas de problème
de lecture.
On
retrouve les principales fonctions d'un traitement
de texte :
1. Attribue un format particulier au texte sélectionner 2/3. Modifie la police de caractères et
la taille 4. Changer la couleur du texte. Cliquer sur l'icône,
une palette de couleurs apparaît 5. Gras, italique, aligner à gauche, centrer,
a droite 6. Puces et retrait du texte
Insérer
une image
Pour
insérer des images, il faut au préalable créer
un tableau. Ce tableau peut très bien être insérer
à l'intérieur d'un autre tableau 1.Clic droit > Tableau > Fractionner la cellule 2. Choisir le nombre de lignes et de colonnes requises 3. Cliquer sur l'icône " insérer une
image "
4.
Sélectionner l'image désirée sur le disque
dur. Si cette image n'est pas enregistrée dans le dossier
racine local, Dreamweaver propose d'en faire une copie et de l'enregistrer. 5. Enregistrer le document (Ctrl+S ou fichier
> enregistrer)
Garder toujours en tête que les images et le graphisme en
général, s'avèrent souvent très lourd
en poids et influent énormément sur le chargement
d'un site. Optimiser les éléments graphiques : taille
(moins de 30ko) et format (Gif, Jpeg, Png)
Aperçu
dans un navigateur
Pour
visualiser le résultat du travail dans un navigateur
Web (Internet explorer, Netscape Navigator) :
1.
Ouvrir le navigateur (ici Internet Explorer)
2.
Ouvrir la page crée : Fichier >Ouvrir > Parcourir ou
Ctrl+O > Parcourir
3.
Sélectionner le fichier à visualiser > Ok
(ici index)
Laisser
une page du navigateur toujours ouverte, modifier dans
Dreamweaver la page et enregistrer, puis retourner
dans le navigateur et rafraîchir la page (bouton
Actualiser)
Dreamweaver
peut visualiser les pages Fichier > Aperçu dans le navigateur
mais il crée des fichiers temporaires dans la racine
du site local (non recommandé)
