Travailler avec des documents liés
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:
Travaillez avec l'ensemble des documents liés ou attachés au document actif sans perdre le lien avec celui-ci.
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
lrvid4044_dw_fr.zip (ZIP, 1MB)
Connaissances à avoir
Niveau intermédiaire dans la création de pages Web
Travailler avec des documents liés
Les pages Web intègrent souvent des documents intégrés tels que HTML avec CSS, JavaScript ou les deux. Les versions précédentes d’Adobe® Dreamweaver® vous obligeaient à prévisualiser les documents intégrés dans le navigateur pour tester la mise en page et l’interactivité. Adobe Dreamweaver CS4 intègre désormais une nouvelle fonctionnalité permettant la visualisation des pages Web de façon intuitive et efficace. Dans ce tutoriel, vous apprendrez à utiliser l’affichage en direct, le navigateur de code et les documents intégrés pour prévisualiser les pages sans avoir à les ouvrir individuellement pour faire des modifications.
L’affichage en direct
L’affichage en direct vous permet de prévisualiser votre page Web dans Dreamweaver, même si elle inclut des éléments CSS ou JavaScript. Pour utiliser l’affichage en direct :
- Ouvrez une page dans Dreamweaver. La page doit contenir une région Spry. Spry est une bibliothèque Ajax d’Adobe. Un élément Spry nécessite un fichier externe JavaScript et peut aussi avoir un fichier CSS associé.
- Réduisez le panneau ancré situé dans la partie droite de la fenêtre Dreamweaver.
- Cliquez sur le bouton Affichage en direct dans la boîte à outils du document situé dans le haut de la fenêtre Dreamweaver. Affichage en direct est situé à coté des icônes Code, Fractionner et Création. Vous pouvez vérifier le rendu final de votre page. De la même façon, vous pouvez vérifier votre mise en page CSS et l’interactivité JavaScript directement dans Dreamweaver.
Image 1: Utilisation de L’affichage en direct
- Si vous voulez prévisualiser une page dans un état particulier, vous pouvez figer votre page en mode Affichage en direct en choisissant Affichage en direct > Figer JavaScript. Quand vous cliquez ou survolez n’importe quel élément, il reste inactif. La possibilité de geler les éléments est pratique quand vous modifiez un état particulier d’un objet multi-états.
Image 2: Gel du JavaScript
- Pour dégeler un élément, choisissez Affichage en direct > Dégeler JavaScript.
Astuce :Vous pouvez également Geler/Dégeler des éléments en appuyant sur les touches de fonction F6/Option+F6.
Le navigateur de code
Quand vous travaillez sur des documents composés, trouver une règle CSS spécifique gérant un élément particulier peut être difficile. Le navigateur de code rend ces recherches spécifiques plus simples :
- Cliquez sur un élément, et laissez la souris au-dessus de celui-ci. Un icône représentant un gouvernail de bateau apparait. C’est l’icône Navigateur de code.
Image 3: L’icône du Navigateur de code
- Cliquez sur l’icône Navigateur de code.
Image 4: Le menu Navigateur de code
- Notez que le navigateur de code est accessible que vous cliquiez ou survoliez un élément. Pour désactiver l’activation du navigateur de code, cliquez sur le bouton Désactiver le Navigateur de code, comme sur l’image n°4.
Astuce: Pour accéder au navigateur de code à n’importe quel moment, faites Alt-click/Command+Option-click.
Remarque: Le navigateur de code peut être très pratique quand vous avez besoin d’isoler des lignes de code spécifiques. Par exemple, quand vous sélectionnez des éléments dont les états survol et sélectionné ne sont pas identiques. Pour visualiser les différences entre ces deux états, utilisez le navigateur de code pour isoler la règle CSS exacte qui contrôle l’apparence de l’état Lien. Quand vous sélectionnez un élément, les règles appliquées à cet élément sont listées dans le navigateur de code dans l’ordre dans lequel elles sont appliquées. Vous pouvez également vérifier les règles de n’importe quel fichier externe.
Image 5: Isolation d’une règle CSS
- Vous pouvez modifier l’apparence d’un site Web en cliquant une fois sur la règle CSS. Vous serez alors positionné à l’endroit exact où cette règle est définie dans le document.
Astuce: Pour avoir un résumé d’une règle particulière sans avoir à ouvrir le document source, survolez la règle dans le navigateur de code.
Documents liés
Les documents liés sont une autre nouvelle fonctionnalité de Dreamweaver CS4. Ils listent tous les documents enfants de premier niveau liés à la page courante. Les documents liés affichent également les fichiers CSS, même s’ils sont imbriqués dans un autre document. Pour voir tous les documents liés d’un fichier particulier :
- Regardez juste sous l’onglet de ce fichier. Vous verrez une barre affichant tous les documents liés.
Image 6: Visualisation des documents liés
Remarque: S’il y a trop de documents à afficher dans la barre du document, un menu apparaît à l’extrémité de celle-ci.
- Cliquez sur Fractionner pour afficher simultanément le mode Création et Code. Si vous faite une modification dans le code, la prévisualisation se met automatiquement à jour.
Remarque: Sans enregistrer la règle CSS, vous pouvez voir que les modifications du site Web prennent effet avec l’affichage direct. Cette fonctionnalité vous permet de prévisualiser les modifications sans avoir les valider.
- Vous pouvez accéder au navigateur de code en mode Code en cliquant sur le bouton Afficher le navigateur de code dans la partie gauche de la fenêtre de Dreamweaver.
Image 7: Le bouton Afficher le Navigateur de code
- Vous pouvez également accéder au navigateur de code en choisissant Affichage > Code depuis la barre des menus.
Image 8: Sélection du Navigateur de code depuis le menu Affichage
- Vous pouvez également accéder au navigateur de code en utilisant le sélecteur de balises dans le bas de la fenêtre Dreamweaver. Sélectionnez l’outil Sélection et cliquez pour positionner votre curseur sur n’importe quelle ligne de code. Faites clic droit sur n’importe quelle balise de la chaîne de caractères qui se trouve directement sur la page. Choisissez navigateur de code depuis le menu contextuel.
Image 9: Accéder au Navigateur de code depuis le sélecteur de balises
- Réactivez le mode Création en cliquant sur l’icône Création en haut de la fenêtre Dreamweaver.
Pour aller plus loin…
- Dreamweaver CS4 Assistance et Support
- Apprenez Dreamweaver CS4
- Introduction à Dreamweaver CS4, par Jean-Luc Delon
- Création d’un ensemble de données Spry, 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:
