Guide d'utilisation Annuler

Conception de pages dynamiques

 

 

Conception de pages dynamiques sous Dreamweaver

Remarque :

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. Pour plus d’informations, consultez cet article.

Conditions préalables à la construction de sites web dynamiques

Avant d’entreprendre la création de pages web dynamiques, vous devez effectuer un certain nombre de tâches de préparation, notamment la configuration d’un serveur d’application web et la connexion à une base de données pour les applications Coldfusion, ASP et PHP. Adobe Dreamweaver gère les connexions aux bases de données différemment suivant la technologie de serveur que vous utilisez.

Remarque :

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. Pour plus d’informations, consultez cet article.

Dreamweaver et la conception de pages dynamiques

Pour concevoir et créer un site web dynamique avec succès, exécutez la procédure générale suivante.

  1. Conception de la page

    La conception visuelle de la page constitue l’une des étapes clés dans la conception d’un site web, qu’il soit statique ou dynamique. En effet, lorsque vous ajoutez des éléments dynamiques à une page web, son aspect fonctionnel dépend largement de sa conception. Réfléchissez attentivement à la façon dont les utilisateurs interagiront avec chacune des pages et avec le site web dans son ensemble.

    L’une des méthodes les plus courantes pour insérer un contenu dynamique dans une page web consiste à créer un tableau pour présenter le contenu, puis à importer le contenu dynamique dans une ou plusieurs des cellules du tableau. Cette méthode permet de présenter divers types d’informations dans un format structuré.

  2. Création d’une source de contenu dynamique

    Avant de pouvoir afficher des données dans une page, les sites web dynamiques doivent être associés à une source de contenu d’où ils peuvent extraire les données. Avant de pouvoir utiliser des sources de contenu dans une page web, effectuez les actions suivantes :

    • Créez une connexion avec la source de contenu dynamique (telle qu’une base de données) et avec le serveur d’application chargé du traitement de la page. Créez la source de données à l’aide du panneau Liaisons. Vous pouvez ensuite sélectionner et insérer la source de données dans la page.

    • Précisez les informations de la base de données à afficher ou les variables à inclure dans la page en créant un jeu d’enregistrements. Vous avez également la possibilité de tester la requête depuis la boîte de dialogue Jeu d’enregistrements et de procéder à tous les réglages nécessaires avant de l’ajouter au panneau Liaisons.

    • Sélectionnez et insérez des éléments de contenu dynamique dans la page sélectionnée.

  3. Ajout de contenu dynamique à une page web

    Après avoir défini un jeu d’enregistrements (ou toute autre source de données) et l’avoir ajouté au panneau Liaisons, vous pouvez insérer le contenu dynamique associé au jeu d’enregistrements dans la page. Grâce à l’interface à base de menus de Dreamweaver, il suffit de sélectionner une source de contenu dynamique dans le panneau Liaisons et de l’insérer dans l’objet de texte, d’image ou de formulaire approprié sur la page en cours de création pour ajouter des éléments de contenu dynamique.

    Lorsque vous insérez un élément de contenu dynamique ou un comportement de serveur dans une page, Dreamweaver insère un script côté serveur dans le code source de la page. Ce script donne pour instruction au serveur de récupérer des données à partir de la source définie et de les restituer dans la page web. Pour insérer un contenu dynamique dans une page web, procédez de l’une des manières suivantes :

    • placez ce contenu au niveau du point d’insertion en mode Code ou Création ;

    • remplacez une chaîne de texte ou un autre espace réservé ;

      insérez le contenu dans un attribut HTML. Un contenu dynamique peut, par exemple, définir l’attribut src d’une image ou l’attribut de valeur d’un champ de formulaire.

  4. Ajout de comportements de serveur à une page

    En dehors de l’ajout de contenu dynamique, vous pouvez intégrer une logique applicative complexe dans des pages web à l’aide des comportements de serveur. Les comportements de serveur correspondent à des sections de code prédéfinies côté serveur qui ajoutent une logique applicative aux pages web, ce qui optimise leur interactivité et leurs fonctionnalités.

    Les comportements de serveur de Dreamweaver vous permettent d’ajouter une logique applicative à un site web sans que vous ayez à rédiger le code vous-même. Les comportements fournis avec Dreamweaver prennent en charge les types de document ColdFusion, ASP et PHP. Les comportements de serveur sont développés et testés de sorte à être rapides, fiables et solides. Les comportements de serveur intégrés prennent en charge des pages adaptées à différents types de plates-formes et de navigateurs.

    Grâce à son interface pointer-cliquer, Dreamweaver simplifie l’application de contenu dynamique et de comportements complexes à une page et facilite par la même occasion l’insertion d’éléments de texte et de conception. Les comportements de serveur suivants sont disponibles :

    • Définition d’un jeu d’enregistrements à partir d’une base de données existante. Le jeu d’enregistrements que vous définissez est ensuite stocké dans le panneau Liaisons.

    • Affichage de plusieurs enregistrements dans une même page. Vous pouvez sélectionner soit un tableau entier, soit des cellules ou lignes précises renfermant un contenu dynamique, puis définir le nombre d’enregistrements à afficher sur chaque page.

    • Création et insertion d’un tableau dynamique dans une page, puis association du tableau à un jeu d’enregistrements. Vous pouvez ensuite modifier la région répétée et l’apparence du tableau à l’aide respectivement de l’inspecteur Propriétés et du comportement de serveur Région répétée.

    • Insertion d’un objet de texte dynamique dans une page. L’objet de texte que vous insérez est un élément provenant d’un jeu d’enregistrements prédéfini auquel vous appliquez le format de données de votre choix.

    • Création de commandes de navigation entre enregistrements et d’état des enregistrements, création de pages Principale/Détails et de formulaires destinés à mettre à jour les informations d’une base de données.

    • Affichage de plusieurs enregistrements à partir d’un enregistrement de base de données.

    • Création de liens de navigation de jeu d’enregistrements afin de permettre aux utilisateurs d’afficher les enregistrements précédant ou suivant un enregistrement de base de données.

    • Ajout d’un compteur d’enregistrements pour aider les utilisateurs à suivre le nombre d’enregistrements renvoyés et leur emplacement dans le résultat obtenu.

    Vous pouvez également enrichir les comportements de serveur de Dreamweaver en rédigeant vos propres comportements ou en installant ceux rédigés par des tiers.

  5. Test et débogage de la page

    Avant de rendre accessible sur le web une page dynamique (ou un site web entier), il est nécessaire d’en tester les fonctionnalités. Vous devriez également examiner la façon dont les fonctionnalités de votre application peuvent être adaptées aux personnes souffrant d’un handicap.

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?