Tutoriel Dreamweaver

Dreamweaver

Découvez la puisssance de Dreamweaver dans ces tutoriels.

HTML HTML5 CSS Bootstrap PHP

Organisation de site avec Dreamweaver

Etape 1

  • Créer un dossier qui va contenir tous les éléments de mon site (Pages html, feuilles de style css, Javascripts ...)
  • A l'intérieur de ce dossier, je crée maintenant un nouveau dossier qui s'appellera "images" (Ou je stockerai toutes les images que je vais insérer dans mon site)

Etape 2

Gestion site Dreamweaver

Dans Dreamweaver

  • Je vais dans le Menu site
  • Je sélectionne - Nouveau site
Informations locales
  1. Je compléte le nom du site (Je lui donne le nom que je veux)
  2. Dossier racine local: Ou se trouve mon site sur mon disque dur
  3. Dossier des images par défaut: je vais sélectionner le dossier "images" que j'ai crée à l'étape 1

Gagner du temps en créant un modéle

Je vais créer un modéle HTML qui contiendra toute la mise en forme de mon site.
A partir mon modéle, je pourrai créer des pages web (ex: index.html, contact.html, truc.html) qui seront basés par rapport à celui ci.
Donc toutes mes pages auront bien la mise en forme contenue dans mon modéle
  • Je crée une nouveau document, page vierge - Modéle HTML.

Modéle HTML

  • Je crée et lie ma feuille de style CSS dans mon modéle
Ajouter feuille de style CSS

Dans le panneau Style CSS

Cliquer sur l'icône Ajouter une feuille de style CSSµ

Cette boîte de Dialogue apparaît :

Feuille de style CSS Cliquer sur "Parcourir", sélectionner votre fichier
Puis valider par OK
  • Faîtes votre mise en forme avec des tableaux ou des balises DIV avec CSS (Je vous conseille davantage cette méthode)
  • Placer les régions modifiables dans votre modéle (Dans la barre d'outil Commun, cliquer sur l'icône comme dans l'exemple ci dessous

Dreamweaver - Région modifiable

  • Renseigner tout de suite les Meta informations que vous mettez dans la balise head, dans la région modifiable "head" que Dw vous a crée

Meta balise

  • Enregistrer votre document (Ne pas mettre d'espace ni de caractéres spéciaux)
  • Dw créera un dossier Templates, votre modéle portera l'extension ".dwt" Ex: formation.dwt

Creer des pages a partir de mon modele

Allez dans le menu Fichier - Nouveau - Page issue d'un modéle

Nouvelle pahe issue d'un modéle

  • Enregistrez votre document avec l'extension .html

Ne pas mettre d'espace, d'accents ou caractéres spéciaux dans le nom de ma page, si je veux utiliser des noms composés, je remplace l'espace par "_" ou "-"
La page d'accueil de mon site doit TOUJOURS S'APPELER index je peux lui donner l'extension .html, htm, php, asp selon les langages utilisés

Ex: index.html ou index.htm ou index.php etc ...

  • Ensuite, créer vos autres pages issues de votre modéle en respectant ces régles
  • Remplissez le contenu de vos pages
  • N'oublier pas de compléter vos balises Meta description et keywords (Qui sont différentes sur chaque page) ainsi que la balise title
  • Ensuite, il ne vous reste qu'à mettre en ligne votre site