Certaines compétences auxquelles vous devez prêter attention et maîtriser lors du codage CSS dans l'échange DW_Experience

En raison de la « visualisation » et de la facilité d'utilisation, de nombreux amis écrivent du CSS dans DW. Aujourd'hui, nous présentons quelques « meilleures habitudes » pour écrire du CSS dans DW, dans l'espoir d'aider tout le monde.
CSS change le processus de conception de sites Web. Pour répondre au nombre croissant de concepteurs enclins au CSS, Macromedia DW MX introduit un certain nombre de fonctionnalités nouvelles et améliorées liées au CSS. Grâce à ces nouvelles fonctionnalités, vous pouvez planifier les futures mises à jour et développer des sites plus conformes aux normes du W3C. Cet article présente quelques suggestions pour l'utilisation de CSS dans DW MX et met en évidence une fonctionnalité CSS spécifique.
De manière générale, une feuille de style est un ensemble de règles de formatage qui contrôlent l'apparence du contenu Web. CSS peut être utilisé dans vos pages de trois manières différentes :

Copiez le code Le code est le suivant :

Style de code (Inline) : un style unique écrit dans le code.
Embedded : Une feuille de style qui peut contrôler tous les éléments d'une page
Externe : Une feuille de style qui peut contrôler les éléments de plusieurs pages
En fait, de nombreux sites sont basés sur Ces trois méthodes doivent être utilisées dans combinaison.

Un fait important à prendre en compte lors de l'utilisation de CSS est que différents navigateurs et différentes versions du même navigateur analysent le CSS de différentes manières. Outre les différences entre les navigateurs Web, vous devez également comprendre qu'il existe de nombreux autres navigateurs, tels que les navigateurs pour entendants, les navigateurs pour téléviseurs et les appareils portables tels que le Palm Pilot et le TTY (téléimprimeur, machine à écrire à distance).
Quelles sont les meilleures pratiques ?
La plupart des technologies ont leurs propres normes convenues. CSS ne fait pas exception. Bien que tous les CSS qui existent sur le Web ne soient pas standardisés, il est utile d'utiliser les CSS conformément aux normes existantes. En général, les développeurs doivent autant que possible séparer le contenu des rapports. Les avantages de ceci sont :
1. Augmenter la durée de vie du site
Les feuilles de style non standard peuvent être pratiques à l'époque, mais après la sortie de la nouvelle version du navigateur, des problèmes de compatibilité sont susceptibles de survenir. À ce moment-là, modifier le site page par page sera une tâche très chronophage et cela rendra également l’utilisation du CSS inutile.
2. Rendez votre site accessible à tous les utilisateurs et navigateurs
Certaines gouvernements locaux ont légiféré selon que les sites Web doivent être accessibles aux personnes handicapées. Les appareils de navigation conçus pour la sensibilisation au handicap, tels que les navigateurs pour malentendants, sont soumis à des exigences normatives CSS extrêmement strictes.
3. Facilitez les mises à jour et la maintenance du site
Lorsqu'il est utilisé correctement, CSS peut permettre aux ajustements que vous effectuez sur une page d'être rapidement appliqués à toutes les pages.
Votre premier choix est la feuille de style à utiliser. En ce qui concerne les meilleures pratiques, voici une liste des différentes feuilles de style :
CSS en ligne : en termes simples, vous devriez essayer d'éviter de l'utiliser. Entre autres inconvénients, l'utilisation du CSS en ligne signifie que vous ne profitez pas du véritable avantage du CSS, à savoir que vous ne séparez pas le contenu du formatage. DW MX utilise Inline CSS principalement pour positionner les éléments de page (ces éléments sont appelés « calques » dans l'interface utilisateur de DW MX) ou pour utiliser un certain effet DHTML, qui nécessite l'utilisation de javascript de style Inline pour modifier les propriétés d'un objet.
CSS intégré : ce n'est pas non plus idéal car cela ne peut affecter que la page actuelle. Lors du processus de mise à jour, si une page est perdue, le style du site sera incohérent ; de plus, lorsque les utilisateurs parcourent votre site, les informations de la feuille de style doivent être téléchargées pour chaque page.
CSS externe : c'est votre premier choix. Le CSS externe permet à toutes les pages qui y sont connectées de conserver une apparence et un style cohérents ; de le décrire, de le modifier une fois et de mettre facilement à jour toutes les pages associées ; de réduire la taille de votre page et de naviguer plus rapidement. D'autres bonnes pratiques sont abordées ci-dessous lors de l'analyse de fonctionnalités CSS spécifiques.
Créer une feuille de style CSS dans DW MX
Lors de la création d'une feuille de style CSS dans DW MX (Texte 》Style CSS 》Nouvelle feuille de style), dans la boîte de dialogue contextuelle, vous avez deux options : Nouvelle feuille de style Document (nouveau fichier de feuille de style) et uniquement pour la page actuelle (ce document uniquement). Sélectionnez « Nouveau fichier de feuille de style » et vous commencez le processus de création de CSS externe. Cette option vous oblige à nommer la feuille de style et à sélectionner un emplacement de sauvegarde avant le processus de création proprement dit ; l'autre option, Ce document uniquement, écrira le code correspondant directement sur la page.
Vous pouvez également sélectionner une feuille de style existante pour modifier ou ajouter de nouvelles définitions dans la boîte de dialogue "Nouveau style".
Doit-elle être connectée au CSS externe ou importée ?
Après avoir créé une feuille de style externe, vous devez la joindre à chaque page (ou modèle). Pour ce faire, cliquez sur le bouton « Attacher une feuille de style » dans le panneau CSS. La boîte de dialogue Lier une feuille de style externe apparaîtra, dans laquelle vous pourrez accéder à votre feuille de style cible. Après avoir trouvé le nom, vous pouvez choisir de lier ou d'importer. cette feuille de style externe.
Le lien est la méthode la plus couramment utilisée. Sélectionnez « lien » pour connecter la feuille de style à la page. Il ajoutera le balisage suivant à votre page :
Tous les navigateurs prenant en charge CSS prennent en charge l'option de connexion. Si vous souhaitez que certains navigateurs plus anciens (tels que Netscape 4.x) « voient » cette feuille de style, vous devez utiliser la méthode suivante.
Si vous sélectionnez l'option "Importer", la balise utilisée est :
NetSscape4 ignorera complètement le CSS importé et interprétera la page en fonction du CSS connecté. De cette façon, nous pouvons utiliser les nouvelles fonctionnalités de CSS sans nous soucier des problèmes de compatibilité des navigateurs.
Inspecteur de propriétés CSS
Vous pouvez facilement passer en mode CSS dans l'inspecteur de propriétés de DW MX. Par défaut, l'inspecteur des propriétés affiche les balises de police en mode HTML brut. Cliquez sur le petit « A » à côté du menu déroulant Polices et vous verrez les feuilles de style CSS actuellement disponibles au lieu d'une liste de balises de police.
En même temps, vous pouvez également facilement revenir en mode HTML.
Feuilles de style CSS prêtes à l'emploi
L'une des fonctionnalités CSS intéressantes de DW MX est qu'il inclut des feuilles de style CSS prêtes à l'emploi. Les nouveaux utilisateurs de CSS peuvent d’abord l’essayer. Sélectionnez Fichier > Nouveau, sélectionnez les feuilles de style CSS dans la boîte de dialogue contextuelle du nouveau document et une liste de tous les CSS disponibles apparaîtra dans la zone de droite.Pour mettre en pratique ce que nous appelons les meilleures pratiques, choisissez-en une marquée « Accessible ».
Enregistrez le document dans le dossier du site, puis utilisez la méthode ci-dessus pour joindre du CSS à votre document.
Feuilles de style Design Time
Cette fonctionnalité de DW MX vous permet d'appliquer des feuilles de style aux pages tout en travaillant en mode conception, vous donnant une compréhension plus intuitive de l'apparence du site. Les feuilles de style au moment de la conception n’apparaîtront pas sur le site. Cette fonctionnalité est très utile du point de vue de nos meilleures pratiques. Si vous utilisez à la fois les méthodes d'importation et de liaison (comme décrit ci-dessus), joindre des feuilles de style au moment de la conception vous permet de développer le site en utilisant l'une ou l'autre. Vous pouvez facilement passer à une autre feuille de style lorsque vous souhaitez voir à quoi ressemblera la page sous une autre feuille de style.
Les feuilles de style au moment de la conception sont également utiles pour les développeurs qui souhaitent appliquer CSS côté serveur (comme ASP, PHP ou ColdFusion) ou y accéder côté client via JavaScript. Les feuilles de style côté serveur constituent également un autre moyen de gérer la mauvaise prise en charge CSS dans les navigateurs clients. Mais dans les versions précédentes de DW, cette méthode ne permettait pas de visualiser l'effet réel du CSS pendant la phase de conception. Les feuilles de style au moment de la conception vous permettent de visualiser les effets des feuilles de style en temps réel, afin que vous puissiez travailler visuellement dans DW MX. Un autre avantage est que lorsque vous téléchargez des fichiers de site, vous n'avez plus besoin de parcourir l'intégralité du site à la recherche de feuilles de style redondantes.
Validation
Que vous créiez votre propre feuille de style ou que vous en modifiiez une existante, la validation garantit que vous n'utilisez pas à mauvais escient des balises non standard ou un code incorrect. DW MX lui-même n'inclut pas de validateur CSS, vous pouvez utiliser le service de validation fourni par le site du W3C. Dans DW MX, vous pouvez valider les balises HTML ou DHTML ( Fichier > Vérifier la page > Valider le balisage (pour HTML) ou Fichier > Vérifier la page > Valider en XML pour XHTML.). DW MX fournit de nombreux outils auxiliaires lors du développement de sites basés sur CSS. Avec l'aide de MW MX, associée à une bonne compréhension du CSS, vous pouvez développer un site qui résistera à l'épreuve du temps.