Rappel de séance Création de pages web/site avec Dreamweaver. Etape 1 : création d’un nouveau site dans le logiciel Lorsque l’on utilise Dreamweaver, on doit signifier au logiciel sur quel projet on désire travailler. Lorsque qu’aucun projet n’est actif, il faut cliquer sur « Créer » un nouveau site sur l’écran d’accueil du logiciel : 1 : créer un nouveau site Plusieurs questions vous sont posées durant la création du nouveau site, vous devez simplement vous préoccuper de l’endroit ou vous souhaitez intégrer les fichiers de votre site web dans l’ordinateur. Si cet endroit n’existe pas encore, vous devez créer un dossier spécifique. (Important : Tous les fichiers du site doivent être centralisés dans ce dossier) Ce choix de dossier concerne ces deux écrans :
Le site est prêt lorsque l’on voit apparaître son nom dans la colonne « fichiers » de droite. Ensuite il faut créer une nouvelle page HTML qui apparaît au milieu de votre surface de travail. (Description page suivante)
1
Barre de menus
Barre d’outils rangés par famille Volet de droite : Plusieurs fenêtres dont la fenêtre « Fichiers » qui permet de visualiser, modifier, renommer les fichiers du site. Les fenêtres que l’on souhaite voir
Onglets des différents fichiers ouverts durant la session de travail Barre d’options qui permet de visualiser son travail en mode « code » ou bien en mode Wysiwyg. Vous devez également ajouter un titre à votre page.
Séparateur qui permet de masquer la colonne de droite
Barre de propriétés contextuelles : on trouve ici toutes les options relatives à la sélection dans la surface de travail. (Texte, tableau, page, objet flash etc..) 2
Etape 2 : création d’une première page web Cette page se présente sous la forme suivante : un titre, un texte sur la gauche et une image sur la droite. Sur la surface de travail, on peut ajouter directement du texte (pour l’exemple : « Le vin des amants ») Ensuite pour placer un texte et une image sur une même ligne, on doit fabriquer un tableau (Barre d’outils -> Tableau ( )). Les caractéristiques du tableau sont les suivantes : 1 ligne, 2 colonnes, 800 px de large, bordure 0 (pour ne pas voir les contours du tableau dans le résultat final)) On écrit ensuite le texte dans la cellule de son choix (un copier coller d’une autre source est également possible en faisant bien attention de ne pas sélectionner l’éventuel tableau dans lequel se trouve le texte d’origine). Pour insérer une image, se placer dans la bonne cellule, puis bouton « insertion image » ( ) de la barre d’outil puis on sélectionne une image dans le navigateur de fichier qui est apparu. Si cette image se trouve en dehors du dossier du site, Dreamweaver vous propose d’enregistrer cette image dans le bon dossier. Toujours répondre « oui » à cette question pour être sûr que l’image se trouve dans le dossier du site. Une fois la page terminée, on pense à la titrer (barre d’option en haut de l’écran) puis on l’enregistre en veillant bien à respecter les règles pour les noms de fichier (pas de majuscule, pas d’espace, pas d’accent) Etape 3 : création d’une deuxième page et mise en lien Pour créer une nouvelle page, menu « fichier » puis « Nouveau », « Page de base », « html ». Insérer dans celle-ci une nouvelle fois l’image puis faire la mise en page. Ensuite on retourne sur la première page pour poser un lien sur l’image. Pour créer un lien dans une page web, il faut sélectionner dans un premier temps l’élément qui va accepter le lien (une lettre, un mot, un paragraphe, une image etc..) puis dans la barre de propriétés du bas de l’écran on accès au champ lien : Trois possibilités s’offrent à nous : - écrire l’adresse du fichier directement - utiliser la cible en pointant directement dans la colonne de droite le bon fichier - utiliser le dossier jaune pour sélectionner le fichier Une fois le lien posé, on peut tester ses pages en lançant « l’aperçu dans le navigateur » à l’aide de la touche F12.
3
Etape 4 : Les différents types de lien Il existe 3 types de liens principaux : - Le lien vers un fichier préalablement créé (voir méthode de l’étape 3) - Le lien vers un site web ou une page de site web (déjà hébergée sur internet et disposant d’une URL). On le tape directement dans le champ « lien » de la fenêtre de « propriétés » sans oublier le protocole http devant l’url. Exemple : http://www.boulognebillancourt.com/ - Le lien vers un email. On tape directement dans le champ lien le code suivant « mailto : », sans « espaces ». Exemple : mailto :monadresse@mail.fr Etape 5 : Les comportements dans Dreamweaver Les comportements permettent d’ajouter sur sa sélection (texte, image) une action de souris de son choix qui déclenche un comportement. Pour utiliser les comportements, il faut faire apparaître la fenêtre dédiée. Cliquer sur « Fenêtre », « comportements ». Si les comportements prévus ou choisis concernent des images, il faut penser à les nommer dans le logiciel. Remplir le champ vide à droite de la miniature de l’image dans la fenêtre « Propriétés ». Pour créer un comportement, il faut sélectionner l’élément déclencheur (texte, tableau ou image) du comportement puis cliquer sur « + » dans la fenêtre comportements. Une fenêtre affiche les différents comportements disponibles (si le nombre de comportements est réduit, passer à la version la plus récente du navigateur dans « afficher les évènements pour » tout en bas de la fenêtre apparue) Ensuite on sélectionne le comportement (pour l’exemple : « permuter une image ») et on règle le comportement. Choisir dans le cadre du haut l’image à intervertir puis dans « parcourir » l’image qui apparaitra à sa place. A noter qu’il faut deux images d’orientation identique (paysage ou portrait) pour éviter toute déformation.
4
La coche « Précharger les images » permettra au chargement de la page web de télécharger également les images non visibles. « Restaurer les images onMouseOut » permet de créer automatiquement un deuxième comportement qui permettra de retrouver l’image initiale lorsque l’on ne survole plus l’image avec la souris. Les comportements apparaissent de manière empilés en deux parties : La partie de droite présente le comportement (ici, permuter une image) La partie de gauche présente le déclencheur. OnMouseOver veut dire « au survol de la souris ». onMouseOut, au sortir du survol, onClick au clic etc..
Etape 6 : déterminer une zone active dans une image Lorsqu’on sélectionne une image, apparaissent dans la fenêtre de propriétés les outils carte-image. Ils permettent de déterminer une zone dans l’image à laquelle on pourra y déterminer un « lien » ou un comportement. On choisit la forme de l’outil puis on dessine sur l’image la carte-image. Ensuite on sélectionne dans la fenêtre propriétés les réglages voulus.
5
Etape 7 : utilisation des calques Dans Dreamweaver, un calque est un bloc dans lequel on peut intégrer du texte ou des images. Les calques peuvent se placer ou l’on souhaite dans la page mais ne bougent jamais (position absolue). Pour créer un calque, il faut sélectionner l’outil « calque » ( )dans la famille d’outils « Mise en forme » . Ensuite on dessine le calque sur sa page html puis on ajoute du contenu (texte, image, objet flash etc..) Les calques peuvent être configurés à l’aide de la fenêtre propriétés :
Nom donné au claque
Largeur, hauteur du calque et positionnement.
Couleur d’arrière- plan
Image d’arrièreplan
Le calque va adapter sa taille à son contenu. Cependant on peut déterminer une taille de base et le fond de couleur gardera en mémoire cette taille de base (idem lorsqu’on ajoute une barre de défilement) Etape 8 : les comportements avec les calques Dans la liste des comportements il y en a un qui se nomme : « afficher/masquer les calques ». Ce comportement permet de faire apparaître ou disparaître des calques avec une action de souris. Pour commencer, il faut déterminer l’aspect du calque : Cliquer dans le menu « Fenêtre » puis sur « Calques » (F2) afin d’ajouter la fenêtre calques à la colonne de droite. Apparaît dans cette fenêtre chacun des calques de la page avec leur nom. A gauche on peut déterminer l’aspect du calque en fermant ou en ouvrant l’œil du calque. C’est l’aspect que va revêtir le calque au chargement de la page. Si l’œil est fermé le calque est masqué et un comportement peut éventuellement l’afficher.
6
Pour créer le comportement d’affichage de calque, on sélectionne l’élément qui va déclencher le comportement (image ou texte), puis on clique sur « ajouter un comportement » (« + »de la fenêtre comportement). On sélectionne le comportement « afficher-masquer les calques » puis dans la fenêtre suivante on sélectionne quel calque on veut voir s’afficher ou se masquer et on sélectionne l’action voulue. Le comportement s’affiche alors dans la fenêtre comportement, et on sélectionne le déclencheur. (voir étape5)
7