Guide d'utilisation Annuler

Ajout de contenus dynamiques aux pages

 

 

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.

À propos de l’ajout de contenu dynamique

Après avoir défini une ou plusieurs sources de contenu dynamique, vous pouvez les utiliser pour ajouter un contenu dynamique à la page. Les sources de contenu peuvent être une colonne dans un jeu d’enregistrements, une valeur envoyée par un formulaire HTML, la valeur d’un objet de serveur, etc.

Sous Dreamweaver, vous pouvez placer du contenu dynamique presque n’importe où sur une page web ou son code source HTML. Il est possible de placer le contenu dynamique au niveau du point d’insertion, de remplacer une chaîne de texte ou d’insérer le contenu en tant qu’attribut HTML. Un contenu dynamique peut, par exemple, définir l’attribut src d’une image ou l’attribut value d’un champ de formulaire.

Vous pouvez ajouter du contenu dynamique à une page en sélectionnant une source de contenu dans le panneau Liaisons. Dreamweaver insère alors un script côté serveur dans le code de la page pour instruire au serveur de transférer les données de la source du contenu au code HTML lorsque le navigateur effectue sa demande.

Il existe souvent différentes méthodes pour rendre dynamique un élément d’une page. Dans le cas d’une image, par exemple, vous pouvez utiliser le panneau Liaisons, l’inspecteur Propriétés ou la commande Image du menu Insertion.

Par défaut, une page HTML ne peut afficher qu’un enregistrement à la fois. Pour afficher les autres enregistrements du jeu, ajoutez un lien afin d’explorer les enregistrements un à un ou créez une région répétée pour afficher plusieurs enregistrements sur une seule page.

À propos du texte dynamique

Le texte dynamique adopte le formatage du texte initial ou du point d’insertion. Le contenu dynamique conserve ainsi le style de feuille de style en cascade (CSS, Cascading Style Sheet) du texte sélectionné qu’il remplace. Vous pouvez également ajouter ou modifier le format du texte d’un contenu dynamique à l’aide de n’importe quel outil de formatage de texte de Dreamweaver.

Vous pouvez également appliquer un format de données à un texte dynamique. Par exemple, si vos données sont des dates, vous pouvez déterminer un format spécifique tel que 04/17/00 pour les visiteurs américains ou 17/04/00 pour les visiteurs français

Création de texte dynamique

Vous pouvez substituer un texte dynamique à un texte existant ou le placer à un point d’insertion donné de la page.

Ajout de texte dynamique

  1. En mode Création, sélectionnez du texte sur la page ou cliquez à l’endroit où insérer le texte dynamique.
  2. Sélectionnez une source de contenu dans le panneau Liaisons (Fenêtre > Liaisons). Si vous sélectionnez un jeu d’enregistrements, indiquez la colonne de votre choix dans le jeu d’enregistrements.

    Cette source doit contenir du texte brut (texte ASCII), ce qui inclut HTML. Si aucune source de contenu n’apparaît dans la liste ou si aucune des sources disponibles ne correspond à vos besoins, cliquez sur le bouton Plus (+) pour définir une nouvelle source de contenu

  3. (Facultatif) Sélectionnez un format de données pour le texte.
  4. Cliquez sur Insertion ou faites glisser la source de contenu sur la page.

    Un espace réservé pour contenu dynamique s’affiche. (tout texte sélectionné dans la page est remplacé par l’espace réservé). La syntaxe de l’espace réservé pour le contenu d’un jeu d’enregistrements est {RecordsetName.ColumnName}, où Recordset est le nom du jeu d’enregistrements et ColumnName le nom de la colonne choisie dans ce jeu.

    Il arrive que la longueur de l’espace réservé d’un texte dynamique déforme la mise en page dans la fenêtre de document. Dans ce cas, utilisez des accolades vides pour représenter les espaces réservés, comme l’explique la section suivante.

Affichage d’espaces réservés pour le texte dynamique

  1. Choisissez Édition > Préférences > Eléments invisibles (Windows) ou Dreamweaver > Préférences > Eléments invisibles (Macintosh).
  2. Dans le menu déroulant Afficher le texte dynamique sous, choisissez { }, puis cliquez sur OK.

Création d’images dynamiques

Vous pouvez ajouter des images dynamiques à votre page. Supposons que vous conceviez une page qui affiche les articles d’une vente de charité. Chaque page doit contenir un texte descriptif, ainsi qu’une photo de l’article. La mise en forme générale de la page doit rester la même pour chaque article, mais la photo (et le texte) peuvent changer.

  1. Ouvrez la page en mode Création (Affichage > Création) et placez le point d’insertion à l’endroit où l’image doit apparaître sur la page.
  2. Choisissez Insertion > Image.

    La boîte de dialogue Sélectionnez la source de l’image s’affiche.

  3. Cliquez sur l’option Sources de données (Windows) ou sur le bouton Source de données (Macintosh).

    La liste des sources de contenu s’affiche.

  4. Sélectionnez une source de contenu dans la liste, puis cliquez sur OK.

    La source de données doit être un jeu d’enregistrements qui contient les chemins d’accès de vos fichiers d’image. En fonction de la structure de fichiers de votre site, ces chemins peuvent être absolus, relatifs au document ou relatifs à la racine.

    Remarque :

    Dreamweaver ne prend pas en charge les images binaires stockées dans une base de données.

    Si aucun jeu d’enregistrements n’apparaît dans la liste ou si aucun des jeux disponibles ne correspond à vos besoins, définissez un nouveau jeu.

Création d’attributs HTML dynamiques

Vous pouvez modifier l’apparence d’une page de manière dynamique en liant des attributs HTML aux données. Par exemple, modifiez l’image d’arrière-plan d’un tableau en liant l’attribut background de ce tableau au champ d’un jeu d’enregistrements.

Vous pouvez lier des attributs HTML à l’aide du panneau Liaisons ou de l’inspecteur Propriétés.

Création d’attributs HTML dynamiques avec le panneau Liaisons

  1. Ouvrez le panneau Liaisons (Fenêtre > Liaisons).
  2. Assurez-vous qu’il contient la source de données à utiliser.

    Cette source de contenu doit contenir les données appropriées pour l’attribut HTML à lier. Si aucune source de contenu n’apparaît dans la liste ou si aucune des sources disponibles ne correspond à vos besoins, cliquez sur le bouton Plus (+) pour définir une nouvelle source de données.

  3. En mode Création, sélectionnez un objet HTML.

    Par exemple, pour sélectionner un tableau HTML, cliquez dedans, puis cliquez sur la balise <table> du sélecteur de balises qui figure en bas à gauche dans la fenêtre de document.

  4. Dans la liste du panneau Liaisons, sélectionnez une source de contenu.
  5. Dans le champ Lier à, sélectionnez un attribut HTML dans le menu contextuel.
  6. Cliquez sur Lier.

    Lors de la prochaine exécution de la page sur le serveur d’applications, la valeur de la source de données sera affectée à l’attribut HTML.

Ajout d’attributs HTML dynamiques avec l’inspecteur Propriétés

  1. En mode Création, sélectionnez un objet HTML, puis ouvrez l’inspecteur Propriétés (Fenêtre > Propriétés).

    Par exemple, pour sélectionner un tableau HTML, cliquez dedans, puis cliquez sur la balise <table> du sélecteur de balises qui figure en bas à gauche dans la fenêtre de document.

  2. La manière dont il faut lier une source de contenu dynamique à l’attribut HTML dépend de l’endroit où ce dernier est situé.
    • Si une icône de dossier est visible à côté de l’attribut que vous souhaitez lier dans l’inspecteur Propriétés, cliquez sur l’icône du dossier afin d’ouvrir une boîte de dialogue de sélection de fichier, puis activez l’option Sources de données pour afficher la liste des sources de données.

    • Si aucune icône de dossier n’apparaît à côté de l’attribut que vous souhaitez lier, cliquez sur l’onglet Liste (onglet du bas) à gauche de l’inspecteur.

      La liste de l’inspecteur Propriétés s’affiche.

    • Si l’attribut à lier n’apparaît pas dans ce mode, cliquez sur le bouton Plus (+), puis tapez le nom de l’attribut ou cliquez sur le petit bouton fléché et sélectionnez l’attribut dans le menu déroulant.

  3. Pour rendre la valeur de l’attribut dynamique, cliquez sur l’attribut, puis sur l’icône en forme d’éclair ou sur l’icône de dossier située à la fin de la ligne de l’attribut.

    Si vous cliquez sur l’icône en forme d’éclair, une liste de sources de données s’affiche.

    Si vous avez cliqué sur l’icône de dossier, une boîte de dialogue affiche une sélection de fichiers. Cliquez sur l’option Sources de données pour afficher la liste des sources de contenu.

  4. Sélectionnez une source de contenu dans la liste, puis cliquez sur OK.

    Cette source de contenu doit comprendre les données appropriées pour l’attribut HTML à lier. Si aucune source de contenu n’apparaît dans la liste ou si aucune des sources disponibles ne correspond à vos besoins, définissez une nouvelle source.

    Lors de la prochaine exécution de la page sur le serveur d’applications, la valeur de la source de données sera affectée à l’attribut HTML.

Création de paramètres d’objet (ActiveX, Flash, etc.) dynamiques

Vous pouvez rendre dynamiques les paramètres des plug-ins et des applets Java, ainsi que les paramètres des objets ActiveX, Flash, Shockwave, Director et Generator.

Assurez-vous au préalable que les champs de votre jeu d’enregistrements contiennent des données appropriées pour les paramètres d’objet que vous voulez lier.

  1. En mode Création, sélectionnez un objet sur la page et ouvrez l’inspecteur Propriétés (Fenêtre > Propriétés).
  2. Cliquez sur le bouton Paramètres.
  3. Si votre paramètre ne s’affiche pas dans la liste, cliquez sur le bouton Plus (+), puis saisissez son nom dans la colonne Paramètre.
  4. Pour déterminer une valeur dynamique, cliquez sur la colonne Valeur du paramètre, puis sur l’icône en forme d’éclair.

    La liste des sources de données s’affiche.

  5. Sélectionnez une source de données dans la liste, puis cliquez sur OK.

    Cette source doit contenir des données appropriées pour le paramètre d’objet que vous voulez lier. Si aucune source de données n'apparaît dans la liste ou si aucune des sources disponibles ne correspond à vos besoins, définissez une nouvelle source.

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?