L’interface utilisateur a été simplifiée sous Dreamweaver et versions ultérieures. Par conséquent, il se peut que vous ne trouviez pas certaines options décrites dans cet article sous Dreamweaver et versions ultérieures.
Vue d’ensemble et objectif
Dreamweaver CS6 organise l’espace de travail pour faciliter la création et la gestion de pages web, en particulier les formulaires et les interactions avec les bases de données via des menus déroulants et des champs de saisie. Ce guide décrit comment construire une page de mise à jour à partir d’une page de résultats, où chaque sélection dans la liste mène à une page de mise à jour affichant le contenu de l’enregistrement correspondant.
Navigation et pages liées
La page de recherche et la page de résultats permettent de travailler avec la page de mise à jour. Vous créez des liens sur la page de résultats pour ouvrir la page de mise à jour. La page de mise à jour utilise cet identifiant pour trouver l’enregistrement demandé dans la base de données et l’afficher. Transmettre un identifiant d’enregistrement est indispensable pour récupérer l’enregistrement souhaité.
Si la boîte de dialogue avancée s’affiche, cliquez sur Simple. L’enregistrement spécifié par la page de résultats est ensuite chargé dans la page de mise à jour, qui génère un jeu d’enregistrements contenant uniquement l’enregistrement sélectionné. Un jeu d’enregistrements filtré permet de récupérer l’enregistrement d’une table de base de données dans un formulaire HTML.
Formulaire HTML et comportement serveur
Un formulaire HTML permet aux utilisateurs de modifier les données de l’enregistrement; un comportement de serveur Mettre à jour l’enregistrement met à jour la base de données. Dreamweaver ajoute à la fois un formulaire HTML et un comportement de serveur de mise à jour d’enregistrement à votre page. Le formulaire vierge est créé sur la page et les objets de formulaire sont destinés à la saisie de données (texte, numérique, valeurs d’option Booléen).
Si la valeur est un nombre, sélectionnez l’option Numérique. Dreamweaver ajoute un comportement de serveur à la page qui permet aux utilisateurs de mettre à jour des enregistrements dans une table de base de données en modifiant les informations affichées dans le formulaire HTML et en cliquant sur le bouton Envoyer.
Pour chaque colonne de la table de base de données, créez un objet de formulaire correspondant et disposez-les dans la liste, avec un bouton Moins (-) pour supprimer si nécessaire. Dans la zone Étiquette, saisissez la description à afficher à côté du champ de saisie. Dans le menu déroulant Afficher comme, sélectionnez l’objet de formulaire à utiliser comme champ de saisie de données (Champ de texte, Zone de texte, Menu, Case à cocher, Groupe de boutons radio). Pour les entrées en lecture seule, choisissez Texte. Dans le menu Envoyer en tant que, sélectionnez le format de données accepté par la colonne.
Définissez les propriétés de chaque objet de formulaire. Pour les champs de texte et les zones de texte, vous pouvez entrer une valeur initiale. Pour les menus et les groupes de boutons radio, ouvrez une autre boîte de dialogue pour définir les propriétés; pour les options, sélectionnez Cochée ou Non cochée. Dreamweaver génère alors à la fois un formulaire HTML et un comportement de serveur de mise à jour d’enregistrement sur la page, en ajoutant l’enregistrement à la liste des sources de données.
Composants et propriétés des formulaires
Dans Dreamweaver CS6, l’interface permet de configurer des champs de saisie selon le type choisi: texte, zone de texte, menu, case à cocher, groupe de boutons radio et texte en lecture seule. Pour définir des propriétés supplémentaires, utilisez les boîtes de dialogue associées aux objets de formulaire. Le choix d’un type d’objet détermine les propriétés disponibles et leur comportement lors de l’envoi des données.
Si une valeur est numérique, l’option Numérique est sélectionnée; sinon, d’autres types comme Texte ou Zone de texte peuvent être choisis. Dreamweaver met en place un flux qui récupère l’enregistrement à afficher et permet sa modification via le formulaire, puis met à jour la base de données avec le comportement serveur correspondant.
Gestion des sources de données et organisation
Dans la liste des sources de données, Dreamweaver gère les objets et les champs associés, avec des icônes et des outils pour ajouter, dupliquer, exporter ou importer des configurations de site et des sources de données. L’objectif est de disposer d’un formulaire fonctionnel et correctement lié à la base de données, en évitant les erreurs de récupération ou d’envoi des données.
La conception et l’organisation des pages se font aussi via le panneau Documents et les fenêtres de configuration: propriétés HTML et CSS, gestion des styles et propriétés d’éléments. Les outils de Dreamweaver CS6 permettent de tester et de prévisualiser le formulaire et son comportement serveur, garantissant que l’affichage des données et leur mise à jour se font comme prévu.
Personnalisation visuelle et propriétés de page
Pour modifier l’apparence, utilisez le Page Properties (propriétés de page) afin de changer l’arrière-plan ou la couleur du texte. Dans la boîte de dialogue Appara rence, vous pouvez changer les couleurs et les styles pour l’ensemble du site. Le Document Title est affiché dans la barre de titre du navigateur et peut être adapté en fonction du contenu.
La gestion des layouts et des documents se fait via le Document Toolbar et les options Design ou Code, avec le Live View permettant de voir le rendu sans éditer directement le code. Le processus de création de pages peut commencer par la sélection d’un layout, puis le choix du type de document (HTML, XHTML, HTML5 selon les besoins).
Enfin, il est conseillé de sauvegarder les pages avec des noms clairs reflétant leur contenu et leur fonction, afin de faciliter la maintenance et l’évolution du site.
Dreamweaver CS5 : Formulaires (3)
tags: #menu #deroulant #dreamweaver #cs6