fredreillier.com

Webdesign, contenus et stratégie web

Introduction à Dreamweaver – 1

Introduction à Dreamweaver

dw_espace_travail

Si une barre ou un groupe de panneaux, ou encore l’inspecteur de propriétés disparaissent, vous pouvez les afficher en les sélectionnant dans le menu Fenêtre.

1.Création du site pour travailler en local (sur l’ordinateur)

  • Créer un répertoire SITE sur votre espace disque.
  • Créer des sous répertoires images, documents
  • Menu Site >> nouveau site (répondre aux différentes questions :
  • Non, je ne veux pas utiliser de technologie de serveur telle que ColdFUsion, ASP.NET, ASP, JSP ou PHP ? ;
  • Modifier les copies locales sur ma machine, puis télécharger vers le serveur lorsque je suis prêt
  • Où voulez-vous stocker les fichiers sur votre ordinateur ? >> sélectionner le dossier SITE qui contiendra le site internet
  • Comment vous connectez-vous à votre serveur distant ? >> Aucun

dw_arbo_site

Organisationdes fichiers.

2.Création de la structure du site

Création des fichiers html (pages du site) par clic droit dans le Panneau

fichiers >> onglet Site ou menu Fichier >> Nouveau fichier

Créer un fichier index.html (= page d’accueil du site) et les autres fichiers .html représentant les différentes pages du site. Copier les matériaux récupérés sur internet (images, sons, …) dans le répertoire images de votre site

Attention à ne pas choisir de noms de fichiers complexes :
votre site web a de fortes chances d’être hébergé sur un serveur UNIX : Pas d’espaces, pas de caractères accentués, attention aux majuscules et aux minuscules.

3.Création d’une page

=> Panneau Fichiers >> onglet Site >> double cliquer sur le fichier correspondant à la page que vous voulez créer ;

ou bien => Fichier >> Nouveau

dw_creation_page

Modifier le titre / le fond de la page / les couleurs du texte et
des liens / les marges

=> Modifier >> Propriétés de la page

Note : En général, il est préférable d’avoir : les 4 marges à la valeur 0

Insérer des balises Meta (référencement de la page)

=> Barre Insertion >> Onglet En-tête

dw_balises_meta

=> Insertion >> Balises d’en-Tête >> Meta ou Mots-clés ou Description

4.Création de la navigation, menu & structure graphique de la page

La navigation interne du site doit être claire. Pour que le site soit ergonomique, on doit pouvoir passer d’une page à l’autre sans être obligé de revenir à l’accueil.

L’utilisation des tableaux est recommandée pour la structuration graphique de la page et la création de la navigation.

Insérer un tableau

=> Barre Insertion >> Onglet Commun

dw_onglet_commun

=> Insertion >> Tableau

Mettre Bordure à la valeur 0 pour avoir un tableau invisible

Choisir si on veut un tableau de largeur « fixe » en pixel (par exemple 740 pixels) ou bien « élastique » en % qui s’agrandit quand on agrandit la taille de la fenêtre du navigateur

Pour avoir un rendu graphique de la page qui soit à peu près identique sur tout type de navigateur, il est préférable
de choisir d’utiliser les tableaux de taille fixe

5.Intégration et mise en forme de texte

Insérer du texte

Conserver une mise en forme de texte (copié du Web, de Word) et produire les balises des caractères accentués

=> Edition >> Coller

(Inversement, exporter du texte de Dreamweawer sans les balises HTML : => Edition >> Copier)
Pour passer de Word à Dreamweawer

=> Dans Word : Fichier >> Enregistrer sous et choisir comme type de fichier Page Web (*.htm ;*.html) ;

dans Dreamweaver : Fichier >> Ouvrir depuis Dreamweawer, ou faire => Fichier >> Importer >> HTML Word,

puis corriger le HTML (Commandes >> Nettoyer HTML Word ou Commandes >> Code le HTML

Cette fonction n’est pas du tout efficace pour créer un code « propre » et gérable. A utiliser seulement si vous n’avez pas le choix.

Même après avoir « nettoyé le code Word », il est nécessaire (et pénible) de retoucher le code à la main.

Insérer un retour à la ligne (sans saut de ligne)

=> Maj + Enter, ou

=> Insertion >> Caractères spéciaux >> Saut de ligne

Alignement et retrait

=> Inspecteur de propriétés (Pour afficher l’Inspecteur s’il n’est pas visible : Fenêtre >> Propriétés )

=> Texte >> Aligner >> Gauche, Texte >> Aligner >> Centrer et

Texte >> Retrait ou Texte >> Retrait négatif

dw_alignement

Changer la police

=> Inspecteur de propriétés

=> Texte >> Police ou Texte >> Taille

Il est préférable d’utiliser de l’Arial, Helvetica ou de la Verdana pour les textes longs.

dw_changer_police

Mettre le texte en couleurs

Une partie du texte :

=> Inspecteur de propriétés

=> Texte >> Couleur

Tout le texte de la page en couleurs :

=> Modifier >> Propriétés de la page >> Couleur du texte

dw_texte_couleur

Mettre en gras, en italique, une partie de texte

=> Inspecteur de propriétés

=> Texte >> Style

Très important : sur le web, on ne souligne jamais un texte qui n’est pas un lien.

dw_gras_italique

Insérer des caractères spéciaux

=> Barre d’insertion >> onglet Caractères (Pour afficher la barre d’insertion : Fenêtre >> Insertion )

=> Insertion / Caractère : liste, ou / Autre

Si absent, insérer dans le code HTML à l’emplacement voulu la balise &#…; correspondante.

dw_caracteres_speciaux

Créer/utiliser des styles HTML

Création => Panneau Création (afficherle panneau de création : Fenêtre >> StyleHTML ) >> Onglet Styles HTML

=> Texte >> Style HTML >> Nouveau style

Utilisation => Panneau Création >> Onglet StylesHTML

=> Texte >> Style HTML

dw_styles_html

Créer et utiliser des styles CSS

Création => Panneau Création (pour afficher le panneau de création : Fenêtre >> Style CSS ) >> Onglet Styles CSS

=> Texte >> Style HTML >> Nouveau style CSS

Utilisation => Panneau Création >> Onglet Styles CSS

=> Texte >> Style CSS

dw_styles_css

Laisser un commentaire

Champs Requis *.