Outils pour utilisateurs

Outils du site


html:td1

Prise en main de Dreamweaver

Faire un dossier (nommé test) sur son compte FTP (dans le dossier web) avec FileZilla

Lancer Dreamweaver

Créer un nouveau site

image 01

Donnez-lui un nom (test) et son adresse (http://src.pu-pm.univ-fcomte.fr/public/src2006/votreLogin/test)
image 02

Pas de technologie serveur (sinon PHP)
image 03

Donnez le répertoire « local » ou stockez les fichiers (ex. : Z:/test)
image 04

Indiquer comment placer les fichiers par FTP sur le serveur
image 05
Penser à tester la connexion…

Rq : Si la connexion au serveur échoue, modifier les paramètres suivant dans l'onglet Avancée. Puis retourner a l'onglet élémentaire

Pas de fonctions de synchronisation des fichiers
image 06

Relire et valider
image 07

Terminer ou plutôt commencer…
Rq: N'apparait pas avec la version 9 de DreamWeaver
image 08
Remarque : vous pouvez enregistrer les paramètres de votre site pour plus de sécurité (bouton Exporter…)

Régler DreamWeaver pour qu'il crée les documents au bon format :
XHTML 1.0 Strict et encodage UTF-8

image 09

image 10

La gestion des fichiers

image 11
Établis la connexion

Créer un nouveau fichier
image 12

Le renommer index.html
image 13

Vérifier que l'entête soit est la suivante (XHTML 1.0 Strict et UTF-8) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

À l'occasion, changer le titre : Accueil
image 14

Ajouter un petit texte (en grand titre)
image 15

Pré visualisé dans Dreamweaver (F5 pour actualiser l'affichage)
image 16

Visualiser dans un navigateur (F12)
image 17

Modifier la liste des navigateurs

Rq : Avec DreamWeaver 9, Firefox est déjà configuré. Vous pouvez ajouter Opera et/ou Safari si ils sont installés sur vos postes.

image 18

Ajouter Firefox (en principal F12), IE en secondaire (Ctrl+F12)
image 19

Validé dans Dreamweaver (Touche F7 si le volet Résultats n'est pas affiché)
image 20

Publiez sur le web

Activer l'option : placer les fichiers dépendants
image 21 Penser à vérifier que vous êtes connecté.

Dreamweaver vous permet de voir les fichiers présents sur le compte FTP
image 22
Pensez à revenir en affichage local

Visualiser sur le web
image 23

Valider par le web

Rq : Si l'accès au serveur src est impossible de l'extérieur, utiliser l'extension : Html Validator

Allez à l'adresse http://validator.w3.org/ et donner l'adresse de votre page :
image 24

En toute logique, votre page sera valider sauf :
image 25

Ajouter un fichier .htaccess

Pour que le serveur envoie avec le bon type mine, il faut ajouter dans le dossier un fichier nommé : .htaccess contenant :

AddCharset UTF-8 .html

Rq : ne pas utiliser Dreamweaver, prendre un simple éditeur (Scite ou Bloc-Note)

FIXME Développer la procédure

Re-valider
(Comme au-dessus mais sans le rouge ;-)

Faire des pages

Faire 3 fichiers page1.html page2.html page3.html
Modifier leurs titres (page 1, page 2, page 3) Rq : on peut recopier index.html
image 26

Ajouter des liens à index.html
image 27

Dreamweaver vous assiste pour la saisie
image 28
image 29

Tester en local (F5 ou F12 ou Ctrl+F12), publier et tester sur le serveur.
image 30

Les Feuilles de styles

Ajouter un style CSS pour la balise h1
image 31

Dreamweaver va vous demander le nom du fichier pour la feuille de styles :site.css
image 32

Vous avez maintenant une boite de dialogue pour éditer le style : Ex. : modifier la couleur
image 33

Ex. : ajouter un bord en bas
image 34

Testez en local (F5 ou F12)
image 35

Ajoutez un style pour la balise : a
image 36

Spécifier que les liens ne seront pas soulignés
image 37

Ajouter un style pour a:hover
image 38

Spécifier que les liens survolés seront soulignés
image 39

Testez (F12)
image 40

Ajouter la feuille de style à page1.html
image 41

Visualisez (F5 ou F12)
image 42

Ajouter une image

Faire un répertoire images
Copier une image dans le répertoire image
Ajouter une balise img
image 43

Choisir l'image
image 44 image 45

Visualisez avec (F5 ou F12)
image 46

Publier sur le serveur
Validez avec Dreamweaver
Important : Valider avec le site validator.w3.org
Trouver et corriger l'erreur

Modifier la feuille de style à la main
image 47

Pour finir

Faire la mise en forme visible dans les exemples de TD :

ou
image 48

Rq : http://lipsum.org/ pour obtenir du texte factice

html/td1.txt · Dernière modification: 2008/04/24 22:00 (modification externe)