Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Interface de Dreamweaver

Dans ce tutoriel Dreamweaver, nous allons voir les différents éléments qui composent l'interface de Dreamweaver (ici l'exemple est de Dreamweaver CS5.5, veuillez noter que des changements mineurs ont été apportés par rapport aux versions précédentes de Dreamweaver).

Dans ce tutoriel Dreamweaver, nous allons voir différents inspecteurs de propriétés dans Dreamweaver dont:

- Inspecteur des propriétés par défaut,

Inspecteur des formulaires:

- Formulaire par défaut,

- Champ de texte,

- Bouton,

- Case à cocher,

- Liste/Menu.

 

Inspecteur de propriétés p ar défaut

Vue HTML de l'inspecteur des propriétés:

Inspecteur de propriétés de Dreamweaver

Dans cet inspecteur de propriétés de Dreamweaver, vous avez deux vues: une vue HTML et une vue CSS.

 

En ce qui concerne la vue HTML, elle vous donne les caractéristiques des éléments HTML que ce soit du texte ou des images. Ce volet contient:

  1. Format de l'élémentFormat: c'est le format du texte, ceci est inclut dans la feuille du style de la page et peut inclure: paragraphe, en-tête avec différents styles...
  2. ID: c'est l'identité de l'élément. il sert à donner plus d'informations sur l'élément et à l'idenfitier dans le code.
  3. Classe: Ceci est inclus aussi dans la feuille de style et sert à donner plus de diversité d'apparence à votre texte; par exemple: un texte encadré.

 

 

  1. LienLien: quand vous voulez mettre un lien après avoir sélectionné l'élément: texte ou image. le lien peut être une page, un fichier, une image contenu dans votre site ou un élément extérieur: une autre page d'un autre site. Pour créer une nouvelle page par exemple, vous devez écrire son adresse et pour faire un lien vers une page existante, vous devez cliquer sur l'icône dossier et dans la fenêtre qui s'ouvrira, choisissez l'élément et enfin pour une page d'un autre site, vous devez spécifier l'adresse avec au début: http://
  2. Titre te cible du lienTitre: le titreà donner au lien. Ceci n'est pas actif qu'après avoir sélectionné un élément. Le titre est important pour le référencement et donne plus d'informations.
  3. Cible: Les attributs des liens. Là où va s'ouvrir le lien. Par défaut, le lien s'ouvre dans la même fenêtre. Là, vous avez à choisir:
  1. _self: pour l'ouverture du lien dans la même fenêtre du navigateur s'il s'agit d'une autre page de votre site ou si vous voulez ne pas déranger l'utilisateur avec l'ouverture de plusieurs fenêtres.
  2. _parent: le lien va s'ouvrir dans le même frame s'il y en a un.
  3. _new: le lien s'ouvrira dans une nouvelle fenêtre pour un frame.
  4. _top: est utilisé avec un frame; le lien va s'ouvrir dans le corps copmlet de la même fenêtre pas dans le frame.
  5. Les autres options sont: Propriétés de la page comme son nom l'indique, elle fournit des informations sur la page au niveau du style.
  6. Eléments de la liste si vous en avez créé une pour un menu déroulant par exemple.
  7. Vue CSS de l'inspecteur des propriétés de Dreamweaver:

Inspecteur de propriétés css

Cette vue apparaît après avoir cliqué sur l'icône "CSS". Elle comporte:

- Règle cible,

- Modifier la règle: est préconfiguré dans la feuille de style. Permet parmi d'autres de créer des titres et des sous-titres...

- Panneau CSS: Affiche dans un panneau latéral les règles CSS suivies dans le formatage de la page.

- Police: la police d'écriture. Vous les verrez par groupe de 3. La première étant la police du réglage et s'en suivent les autres au cas où le navigateur ne supporte pas les premières dans l'ordre.

- Taille: Règle lataille de la police.

- Propriétés de la page... Permet de régler les propriétés da la page au niveau de la police, des liens, des couleurs... Il rassemble toutes les propriétés ci-dessus et plus mais permet d'appliquer les règles de forme à toute la page pas seulement aux éléments sélectionnés.

Un clic sur "propriétés de la page" affiche la fenêtre suivante:

Propriétés de la page

Inspecteur des formulaires

Formulaire par défaut

Cet inspecteur de formulaires par défaut apparaît lorsqu'on insére un formulaire dans une page: Insertion > Formulaire > Formulaire.

Inspecteur des formulaires Dreamweaver

 

Les formulaires? On en voit partout! des formulaires de contact, des formulaires de newsletter, des formulaires de connexion...

Dans Dreamweaver, il existe un inspecteur différent pour chaque type de formulaire. Celui en haut est l'inspecteur de formulaires par défaut.

Voyons les éléments qui le composent:

- ID de formulaire: est le nom que vous donnerez au formulaire pour le reconnaître. Chaque formulaire doit avoir un nom pour que le serveur qui va l'interpréter le reconnaise et sache quel formulaire et quelle action va-t-il entreprendre.

- Action: c'est l'URL où les données vont être envoyées quand on clique sur "envoyer". C'est l'adresse de la page où se trouve le script qui interprète l'action. (voir comment créer un formulaire avec Dreamweaver).

- Méthode: dit à la page l'action d'envoi du résultat de l'action de la page. Vous en verrez:

Action du formulaire- Get: va envoyer les champs du formulaire comme une requête du type: (votrepage.asp?nom1=valeur1&nom2=valeur2).

- Post: va envoyer les champs du formulaire en arrière-scène là où votre script CGI, votre page ASP, CF, PHP etc, peut analyser le code à l'intérieur du serveur.

- Par défaut: va envoyer les données normalement comme avec la méthode Post mais il est bon de spécifier la méthode d'envoi: GET ou POST en tout cas.

Champ de texte

Inspecteur champ de texte Dreamweaver

Apparaît dans le panneau de propriétés en insérant un champ de texte dans la page.

- Champ de texte: doit avoir un nom unique sans espace ni accents, ni caractères spéciaux. Il sert à l'identification du formulaire par le script d'intérprétation côté serveur.

- Larg. de caract: indique simplement la largeur des caractères. Il sert à l'adapter à votre page.

- Nb max de caract: indique le nombre maximum de caractères à introduire dans le champ par l'utilisateur.

- Type: une ligne simple pour un nom d'utilisateur par exemple, Muli lignes pour un commentaire par exemple, mot de passe avec un eseule ligne et les caractères entrés seront remplacés par des *

- Classe: si vous avez une classe spécifique dans votre feuille de style.

- Val. init: la valeur initiale qui apparaît dans le champ pour l'utilisateur. Peut être une indication.

- Désactivé: pour désactiver le champ.

- Lecture seule: ne pas permettre l'écriture.

Bouton

Inspecteur de bouton

- Bouton: le nom donnée au formulaire.

- Valeur: le nom qui apparaît sur le bouton.

- Action: Envoyer le formulaire, rétablir le formulaire pour retourner au formulaire vide, aucune ne fait rien.

- Classe: pour la feuille de style si vous avez une apparence spécifique dans cette feuille sinonn laisser Aucune.

Case à cocher

Case à cocher

- Nom de la case à cocher: le nom qui identifie la case.

- Valeur: ce que doit engendrer la case étant cochée.

- Etat initial: si activé, la case est cochée par déafut sinon la case est vide et est à cocher.

- Classe: se rapporte à la feuille de style.

Liste/menu

Liste menu dreamweaver

 

En insérant une Liste/Menu via: Insertion > Formulaire > Sélectionner (Liste/Menu), vous verrez apparaître cet inspecteur de propriétés en bas.

- Sélectionner: le nom donnée à la liste/menu.

- Type: Un menu ou une liste. Dans l'exemple en haut, nous avons Menu. Il s'agit d'un menu déroulant où apparaît seulement un élément. Si vous choisissez Liste, vous aurez une liste avec tous les éléments visibles et là vous aurez apparaître dans l'inspecteur: Hauteur pour régler la hauteur et Sélections si vous voulez autoriser la sélection de plusieurs éléments de la liste en même temps.

- Initialement sélectionné: l'élément qui apparaît le premier dans la liste et qui est sélectionné par défaut.

- Valeurs de la liste: se sont les éléments qui composent la liste/menu.En y cliquant, une fenêtre apparaît pour renseigner ces éléments.

Valeurs de la liste

- Etiquette de l'élément: le nom qui apparaît.

- Valeur: c'est l'information qui le formulaire envoit.

Pour ajouter d'autres éléments à la liste/menu, cliquez sur le symbole"+" et pour en supprimer, cliquez sur le symbole "-".

Une fois que vous ayez ajouter un formulaire à une page avec Dreamweaver, il faut aussi créer une autre page qui interprète le script et traite l'envoi du formulaire. Regardez ce tuto pour en apprendre plus.

Haut de page

Dreamweaver® est une marque déposée d'Adobe® Systems Incorporated. Les logos et les noms de marques cités dans ce site sont les propriétés respectives de leurs développeurs.

 

Création de sites web

hit counter