|
(917 mots dans ce texte ) -
lu : 603 Fois
 Les tutoriaux on ete realisé sur dreamweaver 4, mais il sont surement valable sur dreamweaver MX avec peut etre quelques modificactions ( mes je vous conseil dreamweaver 4 car c'est vraiment un outil genial !).
Ouverture du logiciel et création de la structure du site :
Présentation de l'ensemble:
Lorsque vous ouvrez votre logiciel Dreamweaver vous accédez à un fichier html vide et à la hiérarchie du site. Sinon à partir de la page vide allez à Site/carte du site.
Pour construire un site je crée dans mon environnement (windows ou mac) un dossier (ex : tutoriaux). Dans ce dossier je vais créer plusieurs dossiers :
- HTML : Pour contenir mes pages html
- IMAGES : Pour contenir les gifs, jpeg et png qui iront dans mon site
- PSD : Pour mes images originales (pratique pour modifier plus tard son site)
- TEMPLATES : Pour les pages html type (modèle)
Puis dans Site/Définir site/nouveau vous allez nommer votre site et sélectionner le dossier (ici tutoriaux). Dreamweaver va alors enregistrer votre structure. Vous pourrez faire appel à votre site à partir de Site/ouvrir site/"nom du site" d'une page html. Il est possible de rajouter des dossiers ou fichiers après à partir de "Site".
Paramétrer vos navigateurs sur Dreamweaver :
Lorsque vous créez des pages html, votre souci premier doit être de rendre votre site cohérent pour les principaux navigateurs. Malheureusement Netscape ne supporte pas les même codes que Internet Explorer. Dreamweaver vous propose pour cela de paramétrer vos deux navigateurs afin de tester à tout moment vos pages avec l'un ou l'autre. Personnellement j'installe même des vieilles version de Netscape pour être sûr du résultat sur un large public. Pour cela allez à : Edition/Préférence/Aperçu dans le navigateur. Puis vous entrez le chemin du fichier exe de votre navigateur. A partir d'une page html vous pourrez vérifier le rendu avec F12 pour votre premier navigateur et Ctrl F12 pour le second.
Fenêtres utiles:
Dreamweaver propose une grande quantité de fenêtres. Bien qu'elles soient toutes utiles, il est totalement impossible de travailler avec toutes en même temps. Il est nécessaire de bien connaître vos besoins.
J'utilise deux fenêtres:
- La boite objects (Fenêtre/Objects) ci-contre.
- La boîte propriétés (Fenêtre/propriétés) ci-dessous.
Les autres commandes sont accessibles soit par clic droit soit par raccourci clavier. Notamment l'éditeur HTML accessible à partir de la touche F10.
La fenêtre "Objects" se compose de plusieurs sous-familles. Pour y accéder cliquer sur la flèche à droite de commun.
a - La sous-famille "commun" permet d'insérer des images, des RollOver, des tableaux...
b - La sous-famille "caractères" qui permet d'entrer des caractères spéciaux comme le ©. Vérifiez cependant que les caractères sont interprétés par tous les navigateurs.
c - la sous-famille "cadre" (frame).
d - La sous-famille "en-tête" permet de gérer les metas. Les metas sont des balises (invisibles) qui s'insèrent dans le <Head> et qui permettent de rentrer des mots clés pour les moteurs de recherche, le nom du concepteur, la description du site...
e - La sous-famille "formulaire" qui permet de créer des champs formulaires de tout type.
f - Et la sous-famille "invisibles" qui permet notamment d'entrer des espaces lorsque la barre d'espace ne le permet pas.
|
Mise en place de la première page:
Entête:
Tout d'abord nommez votre page. Si c'est la première elle s'appellera "index".
Puis entrez la couleur de la page. Si c'est du blanc pensez à rentrer la couleur blanche car tous les navigateurs ne rentreront pas forcément du blanc par défaut. Modifier/Propriété de la page dans titre, le nom et dans couleur d'arrière-plan mettre la couleur désirée. Je vous conseille de choisir une couleur dans la palette proposée au début et non de prendre une couleur dans les palettes personnalisées. Vous risquez sinon de ne pas offrir les mêmes couleurs à tous les navigateurs.
Dans la balise body, Dreamweaver va rentrer le code couleur correspondant
Les metas:
La clé: Elle permet d'insérer des mots clés destinés aux moteurs de recherche et de gérer un référencement efficace. Par exemple graphisme, images, designer,... pour un site de concepteur.
Description: Entrez la description du contenu du site
Insérer un meta: Vous pouvez entrer votre propre meta.
Par exemple : attribut = nom, valeur = "author" , contenu : "Conception graphique réalisé par Serge.
Voila, votre page est prête, vous entrez ensuite dans le , contenu de la page.
Retour à la sous-rubrique :
Autres publications de la sous-rubrique : | 
