En raison de la « visualisation » et de la facilité d'utilisation, de nombreux amis écrivent du CSS dans DreamWeaver. Aujourd'hui, nous présentons quelques « meilleures habitudes » pour écrire du CSS dans Dreamweaver, dans l'espoir d'être utiles à tout le monde.
CSS change le cours de la 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. Vous pouvez utiliser CSS dans vos pages de trois manières différentes :
Inline : styles uniques écrits 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 utilisent une combinaison de ces trois méthodes selon les besoins.
Une chose importante à considérer lorsque vous travaillez avec CSS est le fait que différents navigateurs et différentes versions du même navigateur analysent 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 les suivants :
1. Augmenter la durée de vie du site. Les feuilles de style non standard peuvent sembler pratiques sur le moment, 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. Certains gouvernements locaux ont légiféré selon lequel 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 S'il est utilisé correctement, CSS peut permettre aux ajustements que vous effectuez sur une page d'être rapidement appliqués à toutes les pages.
Le premier choix que vous devez faire est de savoir quelle feuille de style utiliser. Voici une liste des différentes feuilles de style en matière de meilleures pratiques :
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é : c'est également loin d'être idéal car cela n'affecte 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 : Nouveau fichier de feuille de style ) et uniquement pour le 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-il être connecté au CSS externe ou importé ?
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.
La connexion 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 :
L'option de connexion est prise en charge par tous les navigateurs prenant en charge CSS. 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", les balises utilisées sont :
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 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 l'inclusion de 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 ajoutez le CSS à votre document en utilisant la méthode décrite ci-dessus.
Feuilles de style au moment du design (Feuilles de style au moment du design)
Cette fonctionnalité de DW MX vous permet d'appliquer des feuilles de style aux pages tout en travaillant en mode Conception, vous offrant ainsi une compréhension plus intuitive de l'apparence de votre 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 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 d'afficher 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 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.