Création d’un ensemble de données Spry
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
Mettez facilement en place un ensemble de données Spry en quelques étapes. Vous pouvez intégrer à la fois des ensembles de données HTML et XML.
This content requires Flash
Conditions requises
Pour suivre ce tutoriel, vous avez besoin des logiciels et des fichiers suivants:
Adobe Dreamweaver CS4
Fichiers d'exemple
lrvid4047_dw_fr.zip (ZIP, 5.7MB)
Connaissances à avoir
Connaissances de base de l’interface de Dreamweaver
Création d’un ensemble de données Spry
Le Spry Data sets vous permet d’afficher dynamiquement des données liées partout dans votre site Web sans avoir à les relier à une base de données ou à un script côté serveur. Dans ce tutoriel, vous apprendrez à construire un bloc d’affichage détaillé interactif en utilisant l’ensemble de données Spry HTML dans Adobe® Dreamweaver® CS4.
Définir un ensemble de données Spry
Dreamweaver permet de définir un ensemble de données Spry de façon relativement simple. Vous pouvez définir un ensemble de données Spry en utilisant une interface rassemblant un ensemble d’assistants vous guidant tout au long du processus. Pour définir un ensemble de données Spry :
- Ouvrez le document HTML contenant un calendrier d’évènements dans Dreamweaver. Dans ce tutoriel, vous créerez un ensemble de données Spry depuis un calendrier structuré en tableau.
- Allez dans le panneau Insertion et accédez à la section Spry. Agrandissez le menu Spry en cliquant sur la flèche.
Image 1: Le panneau Insertion
- Choisissez Ensemble de données. L’assistant Ensemble de données Spry s’ouvre dans une fenêtre annexe.
Image 2: L’assistant Ensemble de données Spry
- Choisissez Sélectionnez le type de données > HTML.
- Dans le champ Nom de l’ensemble de données, entrez un nom descriptif pour la source de données.
Astuce: Quand vous travaillez avec des ensembles de données multiples, il est fortement recommandé de leur donner des noms descriptifs le plus proche de leur contenu, comme dsCalendar (ds pour data source, et Calendar pour les informations calendaires que vous voulez afficher).
- Spécifiez un fichier source de données en cliquant sur Parcourir. La boîte de dialogue Sélectionnez la source du fichier s’ouvre et affiche le dossier racine de votre site.
Image 3: Sélection d’un fichier source
- Sélectionnez le fichier approprié depuis le dossier racine et cliquez sur OK. Quand vous sélectionnez un fichier, un aperçu de ce fichier apparaît dans la fenêtre Définir la source de données.
- Si vous avez plusieurs éléments dans la page, vous devez sélectionner la source de données. La source de données peut être n’importe quel élément de la page possédant un ID. Une flèche jaune indique quels éléments peuvent servir comme sources de données (appelés également conteneur).
- Pour sélectionner un conteneur de données, cliquez sur la flèche jaune située à côté de l’élément actif. Une fois que vous avez sélectionné une source de données, la fenêtre Aperçu des données est alimentée des données issues de la source de données.
Image 4: Sélection d’un conteneur de données
- Maintenant, vous pouvez faire définir des données avancées, comme les sélecteurs de classe, pour filtrer quels éléments seront intégrés dans la source de données. Dans ce tutoriel, sélectionnez toutes les données en cliquant sur le bouton Suivant en bas de la fenêtre. Un aperçu des données apparaît dans la fenêtre Aperçu des données dans la fenêtre suivante de l’assistant Définir les options des données.
Tri et affichage des données
- Vous pouvez maintenant trier et modifier la façon dont les données seront affichées. Pour trier et modifier la façon d’afficher les données, cliquez pour sélectionner la colonne When dans le tableau Aperçu des données. Modifiez le type de date de cette colonne depuis Chaîne jusqu'à Date en utilisant le menu Type en haut de la fenêtre. Dreamweaver reconnaît maintenant toutes les entrées de la colonne comme étant des dates et les trie comme telles.
Image 5: Tri et affichage des données
- Allez dans Autres options dans le bas de la fenêtre. Cliquez sur le menu Colonne de tri et choisissez When. Puis, sélectionnez Croissant. Les dates les plus récentes du calendrier apparaissent maintenant en haut de la colonne et les dates les plus reculées dans le bas.
Image 6: Modification du critère de tri
- Cliquez sur Suivant. L’assistant d’ensemble de données Spry s’ouvre dans la phase suivant de définition du processus, Choisissez les options d’insertion.
Image 7: Choisir les options d’insertion
Remarque : Si vous choisissez l’option Ne pas insérer de code HTML dans le bas de la fenêtre Choisir les options d’insertion, vous pourrez aller dans le panneau Liaison plus tard, définir la liaison depuis un ensemble de données, et alimenter la page avec. Les autres options disponibles dans l’interface contiennent Insérer un tableau, Insérer un bloc d’affichage principal/détaillé, Insérer des conteneurs empilés, et Insérer des conteneurs empilés avec zone focalisables.
- Pour préserver l’interactivité, séléctionnez Insérer un bloc d’affichage principal/détaillé.
- Plutôt que d’accepter les réglages par défaut, cliquez sur Configurer. Une boîte de dialogue s’ouvre vous invitant à sélectionner les colonnes principales et de détails.
Image 8: La boîte de dialogue Insérer une mise en forme Base/Détails
- La première colonne est sélectionnée par défaut comme Colonne principale. Pour changer cette colonne et rajouter une colonne supplémentaire, cliquez sur l’icône Plus. Cliquez sur les colonnes When, What, Where pour les désigner comme colonne principales additionnelles.
- Utilisez les flèches opposées haut et bas pour modifier l’ordre d’empilement. Cliquez sur la flèche haut pour déplacer la colonne What juste après la colonne Thumb.
- Répétez les étapes 6 à 7 comme vous le désirez pour ajuster l’ordre des colonnes.
- Cliquez sur OK pour appliquer vos paramètres. Cliquez sur Terminé et l’assistant se ferme.
Vous avez mis en place avec succès un bloc d’affichage principal. Les colonnes sont insérées dans votre page HTML en place et format que vous avez spécifiés pendant le processus de définition.
Astuce: Vous pouvez maintenant avoir un aperçu de l’interactivité de votre page Web. Pour prévisualiser votre page Web, cliquez sur Affichage en direct. Quand vous cliquez sur les vignettes de votre page, la zone d’informations détaillées à droite de la vignette est automatiquement mise à jour.
Mise à jour d’une source de données
La mise à jour des fichiers source provoque sur n’importe quelle page HTML basée sur un ensemble de données sa mise à jour, sans autres entrées supplémentaires. Pour mettre à jour une source de données :
- Activez le document contenant le tableau original du calendrier. Modifiez quelques dates, puis choisissez Ficher > Enregistrer.
Image 10: Mise à jour d’une source de données
- Activez la page HTML contenant l’ensemble des données Spry liées au calendrier.
- Choisissez Fichier > Enregistrer. Une boîte de dialogue apparaît, vous invitant à télécharger tous les fichiers nécessaires JavaScript ou CSS dépendants.
- Cliquez sur Affichage en direct, et descendez comme vous le désirez pour visualiser les nouvelles dates.
Pour aller plus loin…
- Dreamweaver CS4 Assistance et Support
- Apprenez Dreamweaver CS4
- Travailler avec des documents liés, par Birnou Sébarte
- Utilisation de JavaScript, DOM, SPRY et conseils de code, par Birnou Sébarte
- Widgets Spry info-bulles et validation de formulaire, par Jean-Luc Delon
- video2brain.fr
Cette oeuvre est placée sous la licence suivante : Creative Commons Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 3.0 Unported
A propos des auteurs
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
