Internet > Dreamweaver > Dreamweaver 2.0 : utilisation 3

Utilisation de Dreamweaver (3)

 

 

Liens hypertexte :

Les liens hypertextes permettent :
- de se déplacer à l'intérieur d'une page, à l'intérieur d'un site,
- d'afficher une image en taille supérieure,
- d'accéder à d'autres sites, etc.

Dreamweaver permet de réaliser facilement des liens hypertexte.

 

Créer un lien hypertexte à partir d'un texte ou d'une image :

- sélectionner un mot ou un groupe de mots,
ou :
- sélectionner une image.

Dans la fenêtre Propriétés :
1 - Si le lien doit désigner une page d'un autre site, ou un endroit précis de la page en cours ou d'une autre page du site :
- rentrer l'adresse du lien dans la case Lien.

Création d'un lien hypertexte

2 - S'il s'agit d'une autre page du site, ou d'une image :
- cliquer sur l'icône de dossier à droite de la case Lien,

Dans la fenêtre de dialogue :
- sélectionner le format du fichier dans la case type,
- aller dans le dossier contenant le fichier,
- sélectionner le fichier.

 

Pour se rendre sur un site :

Il faut que la page s'affiche dans une nouvelle fenêtre :

- sélectionner le texte ou l'image,
- rentrer l'adresse complète de la page dans la case Liens.
Dans la case Cible :
- sélectionner : blank

 

Pour se déplacer dans la page en cours (ex : haut de page) :

- sélectionner le texte ou l'image,
- taper #home dans la case Liens,
- cliquer en haut de la page,
- menu Insertion, Ancre nommée (ou Ctrl+Alt+A),
Dans la fenêtre de dialogue :
- taper home.

 

Pour aller à une autre page du site :

- sélectionner le texte ou l'image,
- rentrer le nom de la page (ex. : index.htm) dans la case Liens.

Pour se rendre à un endroit précis de la page :
- rentrer le nom de la page suivi de l'ancre (ex. : index.htm#home).

A savoir Le caractère # s'obtient en tapant : Alt Gr + 3

 

 

Les feuilles de style :

Voir mes pages : Feuilles de style (CSS)

 

Les feuilles de style permettent d'uniformiser la présentation d'un site :
Pour chaque partie du texte (paragraphe, titre principal, sous-titres, etc) on choisit une police de caractère (et ses attributs).

 

Par exemple, pour ce site, j'ai défini les styles suivants :

p (paragraphe) : police Helvetica, taille : 1em

h4 (titre 4) : police Helvetica, taille : 1.3em, gras, couleur bleue

h5 (titre 5) : police Helvetica, taille : 1.2em, gras, couleur bleue
h6 (titre 6) : police Helvetica, taille : 1.1em; gras, italique, couleur bleue

 

La modification d'un style entraînera automatiquement la modification du texte sur toutes les pages concernées.
On pourra ainsi "essayer" plusieurs présentations sans avoir à modifier les pages.

Les feuilles de style viennent en complément des modèles (voir), pour faciliter la modification et l'évolution d'un site.
Elles permettent de réduire sensiblement la taille d'une page web en limitant l'utilisation de balises HTML consacrées à la définition des polices de caractère.

 

Caractéristiques d'un style :

Un style est déterminé essentiellement par :
- la police de caractère (Arial, Times, Verdana, etc),
- sa taille (à définir en pixel, en pourcentage, etc.),
- son épaisseur (normal, gras, etc.)
- son style (normal, italique, etc.)
- sa couleur,
- l'alignement du texte (gauche, droite, centré, justifié),
- la couleur d'arrière-plan,
- les bordures (épaisseur en pixels, style solide, pointillé, double, etc.),
- etc.

Remarque J'énumère ici les paramètres les plus courants. Il en existe d'autres, mais il faudra se méfier de leur utilisation, du fait de la mauvaise gestion des feuilles de style sur les anciens navigateurs.
Il sera donc souhaitable de vérifier le bon affichage des textes avec plusieurs navigateurs (Internet Explorer, Firefox, Opéra, etc.)

Infos sur les feuilles de style :
http://www.allhtml.com/css/css45.php

 

 

- créer une feuille de style :

Il s'agit de créer une feuille de style externe.
C'est un fichier texte, qui sera placé à la racine du site, et qui contiendra tous les styles utilisés.
Le format du fichier sera caractérisé par son extension : .css (ex : styles.css).

Remarque Si on utilise les modèles, la feuille de style devra être créée à partir du modèle lui-même, ou d'un document détaché du modèle.

Afficher la fenêtre Styles :
- menu Fenêtres, Styles,
ou :
- cliquer sur Styles dans le Lanceur.

- cliquer sur Editer...
Dans la boîte de dialogue :
- cliquer sur Liens...,
- nommer la feuille de style : exemple : /styles.css
(le / pour être sûr qu'elle soit enregistrée à la racine du site)
- cocher "lien",
- cliquer sur OK.

- sélectionner la feuille de style qui vient d'être créée,
- cliquer sur "Editer" (écran),
Dans la fenêtre "styles.css" :
- cliquer sur "Nouveau",
- donner un nom au style que l'on désire créer : exemple : .texte
(le point est obligatoire, mais Dreamweaver l'ajoute lui-même)
- cliquer sur OK (écran).

Dans la fenêtre "Définition du style pour .texte dans style.css" :
- définir les paramètres souhaités,
- cliquer sur OK (écran).

- cliquer sur "Enregistrer" (écran),
- cliquer sur "Terminé".

- enregistrer le document ou le modèle.

La fenêtre Styles apparaît ainsi :

Fenêtre Styles

Si la feuille de style a été créée à partir du modèle, elle est utilisable dans tous les documents créés à partir du modèle.
Pour utiliser la feuille de style dans un autre document, il faudra d'abord la lier à ce document :

- ouvrir le document,
- ouvrir la fenêtre de Styles,
- cliquer sur "Editer",
Dans Editer feuille de style :
- cliquer sur "Lien...",
- cliquer sur "Parcourir...",
- sélectionner le fichier styles.css à la racine du site,
- cliquer sur "Sélectionner".

- cliquer sur OK,
- cliquer sur "Terminé".

 

 

- utiliser une feuille de style :

Pour appliquer un style à un texte, il n'est pas nécessaire de sélectionner le texte, sauf si on désire que le style s'applique à un mot ou un groupe de mots.

Pour appliquer un style à un titre ou un paragraphe :

1 - Avec le bouton droit :
- cliquer avec le bouton droit à l'intérieur du texte,
- sélectionner "Style personnalisé", puis le style souhaité.
(cette commande est également accessible dans le menu Texte)

2 - Avec la fenêtre Styles :
- afficher la fenêtre Styles,
- cliquer à l'intérieur du texte,
Dans la fenêtre Styles :
- sélectionner le style souhaité.

Pour appliquer un style à un mot ou un groupe de mots :

- sélectionner le mot ou le groupe de mots,
- appliquer le style souhaité comme décrit précédemment.

Remarque On peut également modifier les attributs du mot ou du groupe de mots par l'intermédiaire de l'Inspecteur de Propriétés.

 

 

Transférer des pages sur le Site distant :

Le transfert des pages sur le Site Distant se fait dans la fenêtre Site.

 

Préparation du transfert :

Faire une vérification des liens hypertextes :
- menu Site, recréer le cache du site,
- menu Fichier, Vérifier les liens, Site entier.

En cas de difficulté de connexion :
- fermer le programme et le relancer,
ou :
- redémarrer l'ordinateur.

- cliquer sur le titre de la colonne Modifié, pour faire apparaître les derniers fichiers modifiés en premier,
(c'est en général ceux que l'on doit transférer)
- sélectionner un ou plusieurs fichiers, ***
- cliquer avec le bouton droit dans la partie en surbrillance,
- sélectionner "Placer".
ou :
- cliquer sur le bouton "Placer".

La connexion se fera automatiquement.
En bas à gauche de la fenêtre Site, on voit le nom des fichiers transférés.

Quand le transfert est effectué (la date de modification est actualisée),
- cliquer sur le bouton Déconnecter.

Conseil *** Pour sélectionner les fichiers à transférer, on peut utiliser les touches Maj ou Ctrl (voir).

Ne pas oublier de transférer les fichiers images en même temps.

 

Erreurs :

530 : login (nom de l'utilisateur) incorrect.
550 : mauvais répertoire (Répertoire de l'hôte) ou serveur FTP (Hôte FTP) incorrect.

503 : cette erreur survient parfois lorsque la connexion a été interrompue. Le serveur FTP n'a pas pris en compte cette interruption, et il refuse l'accès.
Il faut attendre pour se connecter à nouveau... parfois plusieurs heures.