Introduction à Dreamweaver
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
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
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
=> 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
=> 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
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.
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
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.
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.
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
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
Commentaires récents