Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Créer un site web avec Dreamweaver CC

Ajouter une feuille de style CSS de réinitialisation

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Créez un fichier CSS de réinitialisation à l'aide de Sass, le langage de génération dynamique de feuilles de style. Sass fait désormais partie intégrante de l'interface de Dreamweaver.
04:44

Transcription

Alors, nous aurions pu opter pour une approche purement sass au niveau du développement du CSS, je préfère que pour mettre en place ce site on utilise plutôt le CSS Designer. C'est une alternative comme une autre mais pour quand même garder un petit clin d'œil à sass, je vous propose de créer à la main un fichier config.rb, vous pourrez le récupérer dans les docs ici, il est présent dans le fichier Documents. Et ce document config.rb ici on va simplement lui écrire ces quelques lignes-là c'est-à-dire le « require compass/import-once/activate ». On va récupérer cette phrase-là qui est propre pour Dreamweaver. Ici on va créer un http_path pour dire c'est à la racine de ce document, css_dir c'est css, sass_dir on ne l'a pas donc on va créer un dossier qui va s'appeler « sass » ici que l'on n'avait pas et ce dossier sass, on va de suite le voiler parce qu'il n'a rien à faire sur le côté serveur ici. On va créer un dossier « images » mais il existe déjà et un dossier en disant que la sortie sera expanded c'est-à-dire la fabrication de notre code css sera étendue. Donc ici on va pouvoir faire Enregistrer, et surtout on va faire un Enregistrer sous pour pouvoir le placer maintenant au niveau de notre site à la racine du site directement. Mettre à jour les liens ? Oui bien sûr, pourquoi pas. Et on peut fermer ces documents. Ce qui veut dire que si j'actualise ici maintenant à la racine de mon site j'ai ce document config.rb. Il était déjà présent dans les docs ici c'est simplement pour que vous puissiez l'avoir. On aurait pu le déplacer ça aurait été exactement pareil. Ce fichier config.rb, on va le voiler tout de suite aussi parce qu'il n'y a rien à faire côté serveur. Maintenant on va aller dans le site, double clic sur le petit mot Festival ici et puis on va venir dans le pré-processeur dire qu'on veut utiliser la compilation. Mais ça tombe bien parce que par défaut Dreamweaver l'active également. Tout le reste on ne le touche pas pour l'instant source et sortie on ne le touche pas pour l'instant, on va dire qu'on utilise Compass également et par contre on va venir dire ici qu'on a un fichier config qui existe pour nous. Et donc ici on va pouvoir venir le chercher. C'est ce dossier ici, on va dire Ouvrir voilà. On l'ouvre à ce niveau-là. Maintenant pour revenir sur les sources et on va dire que definir le dossier de sortie il se trouve ici dans CSS. Et puis pour le dossier source c'est bien dans sass ici. Parfait il est bien placé. Il est toujours important de bien vérifier que les fichiers source et entrée soient bien respectés. Et là on va faire Enregistrer tout simplement. Ce qui veut dire que si je crée maintenant un document ici « scss » et que je dis dans ce document css, par exemple « body » et je vais faire ici « color:red », j'enregistre ce document et je vais venir l'enregistrer ici dans sass et je vais lui dire comme titre, je vais l'appeler par exemple « reset » et je vais dire Enregistrer. Regardez, dès que je fais reset ici si j'acctualise mon document ici il est apparu un reset.css. Et là qu'est-ce qu'il y a ? Il y a body color:red. C'est génial moi ça me convient ce genre d'éléments-là. Et ici maintenant si au lieu de l'appeler reset alors je vais supprimer ce document. Oui. Au lieu de l'appeler reset, si je l'appelle par exemple « 01-base.scss » automatiquement il va se créer « 01-base.scss ». Mais au lieu de placer ce document-là je vais faire un import. Alors là c'est du code, je vais dire « compas/reset; ». Donc ici il ne faut pas faire de faute d'orthographe, pas faute de syntaxe simplement « @import compas/reset; » Je ferme ce document. Si je regarde ici du côté maintenant de base.css qui s'est créé j'ai un document de réinitialisation. Tout simplement je viens d'utiliser sass pour créer mon fichier de réinitialisation qui va mettre tous les navigateurs à la même enseigne, il n'y aura aucune différence de prise en compte de marge, de taille de texte qui sont par défaut pris par chaque navigateur de manière différente. Là, je sais que je les ai homogénéisé par cet élément-là. Qu'est-ce que j'ai besoin de faire maintenant ? Eh bien j'ai besoin d'aller dans mon document html et faire tout simplement un link et là je vais lui dire, pour le link je veux parcourir et je veux venir dans les css, prendre ce document « 01-base ». Et maintenant je viens d'avoir une feuille de style de réinitialisation qui s'est placée dans mon document base.html. Je n'ai plus qu'à enregistrer ça, à fermer et l'étape est terminée.

Créer un site web avec Dreamweaver CC

Réalisez votre premier site web avec Dreamweaver. Abordez les principales étapes de conception, telles que la création d’une page web, l’ajout de contenu multimédia, etc.

3h04 (37 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :25 janv. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !