fredreillier.com

Webdesign, contenus et stratégie web

Introduction à Dreamweaver – 2

1.Insertion d’une image

=> Barre Insertion >> Onglet Commun

=> Insertion >> Image

dw_inserer_image

L’insertion d’une image nécessite l’enregistrement ou la création préalable d’une image dans le répertoire images du site.

Une fois une image insérée dans une page, il ne faut pas déplacer l’image dans un autre répertoire ni changer son nom (le nom du fichier) car la page html où l’image avait été insérée ne trouverait plus l’image.

Note : Si vous souhaitez mettre un lien sur l’image, il est souhaitable de mettre la bordure à la valeur 0 (sinon, on a un cadre autour de l’image)

dw_image_bordure_zero

Alignement de l’image par rapport au texte

=> Inspecteur de propriétés >> Aligner
>> Droite/Gauche

Puis déplacer la balise jaune pour déterminer l’endroit du texte à partir duquel on veut aligner l’image.

Le texte entoure l’image

dw_image_aligner

Insérer une image survolée

=> Barre Insertion >> Onglet Commun

=> Insertion >> Image survolée

dw_image_survolee

Le principe : lorsque le pointeur de la souris passe sur l’image 1, l’image 2 prend sa place. L’insertion d’une image survolée (rollover) nécessite l’enregistrement ou la création préalable de deux images de format identique.

2.Insertion de lien /ancre / document à télécharger / adresse mail

Insérer un lien vers un site web

=> Souligner la partie du texte qui doit apparaître comme lien, puis, dans l’Inspecteur de propriétés, insérer l’adresse du lien proprement dit

(ex : http://www.zazieweb.fr),
sans mention de police ou d’enrichissement (taper directement, copier hors Dreamweawer ou copier depuis Dreamweawer en faisant Copier).

Insérer un lien vers une page du site

=> cliquer sur le dossier jaune dans l’Inspecteur de propriétés et sélectionner le fichier.

dw_faire_lien

Tous vos liens entre les pages du site doivent être des liens relatifs (du type ../../ qui indique le niveau entre les répertoires), et non des liens absolus (par ex. vers C://mes documents/…). Vérifier la syntaxe des liens (Inspecteur propriétés ou code).

Cible d’un lien : permet d’ouvrir un lien dans une nouvelle fenêtre ou dans une fenêtre déjà ouverte. Par défaut un lien s’ouvre dans la fenêtre ou cadre courant.

Il est possible qu’un lien vers un site web s’ouvre dans une autre fenêtre : dans les propriétés du lien, choisir cible _blank

dw_lien_target

Insérer un téléchargement vers un document

Mettre le document à télécharger dans un dossier documents du dossier site (le document a télécharger peut être un document texte, un document word, un fichier son, etc)

Modifier le nom du fichier à télécharger si celui-ci comporte des espaces, accents ou autre caractère spécial

Sous dreamweaver => Souligner la partie du texte qui doit apparaître comme lien, puis, dans l’Inspecteur de propriétés cliquer sur le dossier jaune dans l’Inspecteur de propriétés et sélectionner le fichier.

Insérer une ancre liée (lien interne à la page)

1) Cible (destination) => Insertion >> Ancre nommée, attribuer un nom simple, sans espace ni accent

2) Source (point de départ) => souligner la partie du texte qui doit apparaître comme lien vers l’ancre, puis, dans l’Inspecteur de propriétés, taper le nom de l’ancre précédé de « # » .

Ex. #bio pour faire un lien vers la partie biographique, à laquelle a été attribuée l’ancre nommée ‘bio’.

dw_ancre

Insérer une adresse mail avec lien

=> Barre Insertion >> Onglet Commun

=> Insertion >> lien de messagerie

L’utilisation de cette fonctionnalité n’est pas recommandée : les robots qui récupèrent les adresses mail sur les pages pour le compte des spammeurs sont de plus en plus nombreux et efficaces.

Pour indiquer à ses visiteurs son adresse email, trois options :

  • la « déformer » : fred at lanquarem.com
  • Créer une image gif avec votre adresse (les robots ne savent pas lire les images… Mais les non-voyants non plus, votre site ne sera donc pas accessible)
  • Si votre hébergeur propose ce service, utiliser un formulaire de contact, qui évite d’exposer votre adresse sur la page

dw_lien_mail

3.Finalisation & visualisation de la page

Corriger l’orthographe

=> Maj + F7 ou Texte >> Orthographe

Nettoyer le HTML (code propre)

=> Commandes >> nettoyer le code HTML ou nettoyer HTML Word

Visualiser la page depuis un navigateur

=> Fichier >> Aperçu dans le navigateur

=> Depuis son navigateur, ouvrir le fichier voulu après l’avoir enregistré dans Dreamweawer (inutile de le fermer).

4.Mettre en ligne le site sur internet

Entrer les paramètres de connexion au site distant

=> menu Site >> Modifier les sites >> Choisir
le site >> Modifier

Appuyer sur le bouton suivant jusqu’à la question : Comment vous connectez-vous à votre serveur distant ?

Choisir FTP puis remplir les paramètres.

Transférer le site local sur le site distant

=> panneau Fichiers, cliquer sur le bouton de Connecter à un hôte distant

Puis => panneau Fichiers, cliquer sur le bouton Développer/Réduire

Puis faire glisser les fichiers de la zone Fichiers locaux vers la zone Site distant de la fenêtre

5.Testez votre site

Visualiser dans un navigateur les pages mises en ligne en vous connectant à l’adresse du site. Corriger les fichiers sur votre poste.

Remettre en ligne les fichiers modifiés.

Tester immédiatement la page en ligne ; pour ce faire, actualiser plusieurs fois dans le navigateur : MAJ + bouton Actualiser la page

ou

Recorriger éventuellement son fichier, le remettre en ligne.

Re-tester…

Laisser un commentaire

Champs Requis *.