Ajout de contenus dynamiques aux pages

Dernière mise à jour le 25 avr. 2024
Annotation

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 utiliser les sources pour ajouter du contenu dynamique sur la page. Les sources de contenu peuvent inclure une colonne dans un recordset, une valeur soumise par un formulaire HTML, la valeur contenue dans un objet serveur, ou d'autres données.

Dans Dreamweaver, vous pouvez placer du contenu dynamique presque n'importe où dans une page web ou son code source HTML. Vous pouvez placer du contenu dynamique au point d'insertion, remplacer une chaîne de texte, ou l'insérer comme attribut HTML.Par exemple, le contenu dynamique peut 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 un script côté serveur dans le code de la page indiquant au serveur de transférer les données de la source de contenu vers le code HTML de la page lorsque la page est demandée par un navigateur.

Il existe souvent plusieurs façons de rendre un élément de page donné dynamique. Par exemple, pour rendre une image dynamique, vous pouvez utiliser le panneau Liaisons, l'inspecteur de propriétés, ou la commande Image dans le menu Insertion.

Par défaut, une page HTML ne peut afficher qu’un enregistrement à la fois. Pour afficher les autres enregistrements dans le recordset, vous pouvez ajouter un lien pour parcourir les enregistrements un à la fois, ou vous pouvez créer une zone géographique répétitive pour afficher plusieurs enregistrements sur une seule page.

À propos du texte dynamique

Le texte dynamique adopte tout formatage de texte appliqué au texte existant ou au point d'insertion. Par exemple, si un style CSS (Cascading Style Sheet) affecte le texte sélectionné, le contenu dynamique qui le remplace est également affecté par le style.Vous pouvez ajouter ou modifier le format de texte du contenu dynamique en utilisant l'un des outils 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 spécifier un format de date particulier tel que 04/17/00 pour les États-Unis.ou 17/04/00 pour les visiteurs canadiens.

Création de texte dynamique

Vous pouvez remplacer le texte existant par du texte dynamique, ou vous pouvez placer du texte dynamique à un point d'insertion donné sur la page.

Ajout de texte dynamique

Dans l'affichage Création, sélectionnez du texte sur la page, ou cliquez où vous voulez ajouter du texte dynamique.
Dans le panneau Liaisons (Fenêtre > Liaisons), sélectionnez une source de contenu dans la liste. Si vous sélectionnez un recordset, spécifiez la colonne que vous voulez dans le recordset.

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 les sources de contenu disponibles ne répondent pas à vos besoins, cliquez sur le bouton Plus (+) pour définir une nouvelle source de contenu.

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

Un espace réservé pour contenu dynamique s’affiche. (Si vous avez sélectionné du texte sur la page, l'espace réservé remplace la sélection de texte.) L'espace réservé pour le contenu de recordset utilise la syntaxe {RecordsetName.ColumnName}, où Recordset est le nom du recordset et ColumnName est le nom de la colonne que vous avez choisie dans le recordset.

Parfois, la longueur des espaces réservés pour le texte dynamique déforme la mise en page dans la fenêtre Document.Vous pouvez résoudre le problème en utilisant des accolades vides comme espaces réservés, comme décrit dans le sujet suivant.

Affichage des espaces réservés pour le texte dynamique

Sélectionnez Édition > Préférences > Éléments invisibles (Windows) ou Dreamweaver > Préférences > Éléments invisibles (Macintosh).
Dans le menu contextuel Afficher le texte dynamique sous la forme de, sélectionnez { }, puis cliquez sur OK.

Création d’images dynamiques

Vous pouvez ajouter des images dynamiques à votre page. Par exemple, supposons que vous conceviez une page pour afficher des articles en vente lors d'une vente aux enchères caritative.Chaque page inclurait un texte descriptif et une photo d'un article.La mise en page générale de la page resterait la même pour chaque article, mais la photo (et le texte descriptif) pourrait changer.

Avec la page ouverte en mode Design (Affichage > Design), placez le point d'insertion là où vous voulez que l'image apparaisse sur la page.
Choisissez Insertion > Image.

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

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.

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

La source de contenu doit être un recordset qui contient les chemins vers vos fichiers image.Selon la structure des fichiers de votre site, les chemins d'accès peuvent être absolus, relatifs au document ou relatifs à la racine.

Annotation

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

Si aucun recordset n'apparaît dans la liste, ou si les recordsets disponibles ne répondent pas à vos besoins, définissez un nouveau recordset.

Création d’attributs HTML dynamiques

Vous pouvez modifier dynamiquement l'apparence d'une page en liant des attributs HTML aux données.Par exemple, vous pouvez modifier l'image d'arrière-plan d'un tableau en liant l'attribut background du tableau à un champ d'un recordset.

Vous pouvez lier des attributs HTML dans le panneau Liaisons ou dans l'inspecteur de propriétés.

Rendre les attributs HTML dynamiques avec le panneau Liaisons

Ouvrez le panneau Liaisons en choisissant Fenêtre > Liaisons.
Assurez-vous que le panneau Liaisons répertorie la source de données que vous voulez utiliser.

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

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

Par exemple, pour sélectionner un tableau HTML, cliquez à l'intérieur du tableau et cliquez sur la balise <table> dans le sélecteur de balises en bas à gauche de la fenêtre de document.

Dans le panneau Liaisons, sélectionnez une source de contenu dans la liste.
Dans la zone Lier à, sélectionnez un attribut HTML dans le menu déroulant.
Cliquez sur Lier.

La prochaine fois que la page s'exécutera sur le serveur d'application, la valeur de la source de données sera attribuée à l'attribut HTML.

Rendre les attributs HTML dynamiques avec l'inspecteur de propriétés

En mode Design, sélectionnez un objet HTML et ouvrez l'inspecteur de propriétés (Fenêtre > Propriétés).

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

La façon dont vous liez une source de contenu dynamique à l'attribut HTML dépend de l'endroit où elle se trouve.
  • Si l'attribut que vous souhaitez lier a une icône de dossier à côté dans l'Inspecteur de propriétés, cliquez sur l'icône de dossier pour ouvrir une boîte de dialogue de sélection de fichier ; puis cliquez sur l'option Sources de données pour afficher une liste de sources de données.

  • Si l'attribut que vous souhaitez lier n'a pas d'icône de dossier à côté, cliquez sur l'onglet Liste (le plus bas des deux onglets) sur le côté gauche de l'inspecteur.

    La vue Liste de l'inspecteur de propriétés apparaît.

  • Si l'attribut que vous souhaitez lier n'est pas répertorié dans la vue Liste, cliquez sur le bouton Plus (+) ; puis entrez le nom de l'attribut ou cliquez sur le petit bouton fléché et sélectionnez l'attribut dans le menu contextuel.

Pour rendre la valeur de l'attribut dynamique, cliquez sur l'attribut ; puis cliquez sur l'icône éclair ou l'icône de dossier à la fin de la ligne de l'attribut.

Si vous avez cliqué sur l'icône éclair, une liste de sources de données apparaît.

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

Sélectionnez une source de contenu dans la liste des sources de contenu et cliquez sur OK.

La source de contenu doit contenir des données appropriées pour l'attribut HTML que vous souhaitez lier. Si aucune source de contenu n'apparaît dans la liste, ou si les sources de contenu disponibles ne répondent pas à vos besoins, définissez une nouvelle source de contenu.

La prochaine fois que la page s'exécutera sur le serveur d'application, la valeur de la source de données sera attribuée à l'attribut HTML.

Rendre les paramètres ActiveX, Flash et d'autres objets dynamiques

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

Avant de commencer, assurez-vous que les champs de votre jeu d'enregistrements contiennent des données appropriées pour les paramètres d'objet que vous souhaitez lier.

En mode Création, sélectionnez un objet sur la page et ouvrez l'Inspecteur de propriétés (Fenêtre > Propriétés).
Cliquez sur le bouton Paramètres.
Si votre paramètre n'apparaît pas dans la liste, cliquez sur le bouton Plus (+) et entrez un nom de paramètre dans la colonne Paramètre.
Cliquez sur la colonne Valeur du paramètre, puis cliquez sur l'icône éclair pour spécifier une valeur dynamique.

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

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

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