Vidéo: Les outils en ligne pour gérer les styles CSS 2024
La barre d'outils du document dans Adobe Creative Suite 5 (Adobe CS5) Dreamweaver contient des outils pour afficher votre document dans différents modes, tels que le code et la conception. comme le titre du document et la compatibilité du navigateur.
-
Affichage du code: Afficher le code et uniquement le code utilisant cette vue. Dreamweaver vous aide à déchiffrer le code par codes de couleur, attributs, CSS et autres éléments.
-
Vue partagée: La sélection de cette option divise la fenêtre de document entre les vues Code et Design. Cette vue peut être extrêmement utile car vous voyez simultanément la conception et le code.
Contrôlez l'affichage de la page dans la barre d'outils du document. -
Vue de conception: Cette option affiche votre page en mode Création dans la fenêtre de document.
-
Live Code: Lorsque l'affichage en direct est activé, vous pouvez voir le code source de votre document comme un utilisateur le verrait dans un navigateur mais vous ne pouvez pas modifier le code de la page dans cette vue.
-
Vérifier la compatibilité du navigateur: Ce menu affiche les options qui vous permettent de vérifier l'intégrité des pages, telles que l'accessibilité, ou si vos règles CSS sont compatibles avec différents navigateurs.
-
Affichage en direct: Affichage en temps réel affiche votre page comme si elle était dans un navigateur, sans bordures, guides et autres aides visuelles. Dans Live View, vous ne pouvez pas modifier le contenu prévisualisé, mais vous pouvez passer en mode Code, Fractionner ou Conception et modifier le contenu de votre page.
-
Inspecter: Le nouveau bouton Inspecter fonctionne avec Live View pour révéler les règles CSS qui mettent en forme les éléments de votre page. Lorsque vous sélectionnez un élément sur la page avec l'option Inspecter activée, le panneau Styles CSS affiche les propriétés qui mettent en forme cet élément et vous permet de désactiver ou de modifier des propriétés spécifiques et d'afficher les résultats.
-
Aperçu / débogage dans le navigateur: Cliquez sur ce bouton pour prévisualiser ou déboguer votre document dans l'un de vos navigateurs Web installés, BrowserLab d'Adobe ou Device Central.
-
Aides visuelles: Cliquez sur ce bouton pour sélectionner différentes aides visuelles (telles que des bordures et des guides) pour vous aider à voir les différents éléments et faciliter la conception de vos pages.
-
Actualiser la vue de conception: Cliquez sur ce bouton pour actualiser la vue de conception du document après avoir apporté des modifications en mode Code. Les modifications que vous effectuez en mode Code n'apparaissent pas automatiquement en mode Création jusqu'à ce que vous effectuiez certaines actions, telles que l'enregistrement du fichier ou cliquez sur ce bouton.
-
Titre du document: Entrez le nom de votre document dans ce champ.
-
Gestion des fichiers: Cliquez sur ce bouton pour afficher le menu local Gestion des fichiers.Utilisez ce menu pour vérifier votre document avant ou arrière lorsqu'il est activé pour votre site.
-
Page précédente / Page suivante / Actualiser / Barre d'adresse: Dans Live View, ces outils fonctionnent comme dans un navigateur Web et vous permettent de naviguer entre les pages, de rafraîchir la page et de voir l'adresse du page actuelle. La barre d'adresse fonctionne également lorsque l'affichage en direct n'est pas activé, indiquant le chemin d'accès au document sur lequel vous travaillez actuellement.
-
Documents connexes: Les documents utilisés par et attachés à votre page, tels que les fichiers CSS et JavaScript externes, sont listés ci-dessous (Mac) ou au-dessus (Windows) les boutons de sélection de vue (Code / Split / Design). Vous pouvez cliquer sur n'importe quel document répertorié pour modifier le fichier joint en mode Scinder sans avoir à changer de document.
-
XML, JavaScript, CSS et d'autres types de fichiers basés sur le code ne peuvent être visualisés et édités qu'en mode Code; les boutons Design et Split apparaissent grisés.
-
L'actualisation met également à jour les fonctionnalités de code dépendantes du modèle DOM (Document Object Model), telles que la possibilité de sélectionner les balises d'ouverture ou de fermeture d'un bloc de code.
-
-
Options d'affichage en direct: Cliquez sur et sélectionnez les options dans ce menu pour contrôler l'apparence de votre document et travailler lorsque l'affichage en direct est activé.