All Articles Dreamweaver
Apprendre CSS dans Dreamweaver Tutoriel Partie 1: Redéfinir les éléments HTML
Geoff Blake on Tue, February 8th 0 comments
Learning how to work with CSS is absolutely critical to building contemporary websites. It's one of those things that we, as designers, have to hunker down and learn at some point. And even after you

Apprendre à travailler avec CSS est absolument essentiel à la création de sites contemporains. C'est une de ces choses que nous, en tant que concepteurs, ont de courber l'échine et d'apprendre à un certain point. Et même après que vous maîtrisez les fondamentaux, il ya encore place pour grandir et se développer. Vous pouvez en apprendre davantage sur de nouvelles propriétés ou comment obtenir des résultats spécifiques, et vous pouvez découvrir des techniques pour garder vos CSS comme "lean n signifie que possible.

In this tutorial post, we'll be taking a look at the fundamentals of working with CSS in Dreamweaver. You'll learn about two primary rule types, how to create them, and how to begin applying them throughout your site.

Comprendre comment les styles de travail

Tout d'abord, je dois vous demander, savez-vous sur les styles dans certains de vos autres applications? InDesign styles, Illustrator a styles ... diable, même Microsoft Word a styles. Un style est simplement une collection d'options de formatage. Par exemple, nous pourrions avoir un style appelé «accent», et dans l'accent que nous avons mis une police, une taille et une couleur. À ce stade, nous pouvons commencer à appliquer l'accent tout au long de notre document, et bien sûr, où jamais nous l'utilisons, nous aurons la même police, la taille et la couleur utilisée. Si nous revenir en arrière et faire un changement dans le style italique dans l'original, alors le formatage va mettre à jour instantanément où jamais il a été utilisé dans notre document.

C'est ainsi que, traditionnellement styles de travail. Toutefois, CSS prend cette idée encore plus loin. Plutôt que de travailler avec des styles au sein d'une seule page, avec CSS, vous pouvez appliquer votre ensemble de règles pour un groupe de pages - ou à toutes les pages de votre site. Modifier un de vos règles, et que ce changement se répercutera sur votre site en entier aussi rapidement que vous pouvez choisir "Fichier

Maintenant c'est de la puissance!

Quelques autres points rapides avant de passer. Premièrement, le terme «style» et le terme «règle» sont utilisés indifféremment dans Dreamweaver et en CSS. Parfois, Dreamweaver utilise le terme «style», et d'autres fois elle va utiliser la «règle». Beaucoup de nouveaux utilisateurs se confondre par la présente et à assumer Dreamweaver parle de deux choses différentes. Il n'est pas! Styles et les règles sont la même chose.

Deuxièmement, une liste de règles est appelé une feuille de style. Les feuilles de style peuvent être situés dans une page HTML spécifique (c'est ce qu'on appelle une feuille de style interne) ou sauvegardée dans un fichier séparé en dehors de vos pages (appelé une feuille de style externe). Il ya beaucoup de choses cool que vous pouvez faire avec des feuilles de style, et nous en parler plus en détail dans Dreamweaver CS5 101: Core Dreamweaver CS5 .

Maintenant que nous comprenons comment les styles de travail et avoir une idée de ce que des feuilles de style sont tout au sujet, nous devrions discuter des deux principaux types de styles CSS nous pouvons travailler avec: redéfini les éléments HTML, et les règles de classe. Chacun est très puissant, et a des utilisations spécifiques. Jetons un regard.

A Look At redéfini les éléments HTML

Adresse Faisons redéfini les éléments HTML d'abord. Ceci est mon type préféré de style parce que ce qu'ils font est de prendre, HTML ennuyeux et faites-le glisser depuis l'âge de pierre dans le 21e siècle avec juste quelques lignes de code. Et heureusement pour nous, Dreamweaver va faire tout le levage de charges lourdes, donc si nous ne voulons pas, nous n'avons pas de voir n'importe quel code.

Avec redéfini les éléments HTML, nous allons prendre plaine, ennuyeux éléments HTML et de les placer sous le contrôle de la CSS. Par exemple, nous pouvions contrôler tableaux, images, titres, paragraphes, et pratiquement tout autre chose qui pourrait apparaître sur votre page. Ce qui est important à retenir est que lorsque nous redéfinir un élément HTML, nous contrôlons toutes les occurrences de cet élément. Par exemple, si vous créez une règle CSS qui redéfinit

, then all
elements on your page are now under the control of your CSS rule. If your redefined
rule resides in an external style sheet, then all tables across your entire site are now all controlled by a single CSS rule.

Aussi impressionnant que ce soit, il ne peut pas être ce que vous voulez. Que faire si vous ne voulait contrôler une table et laisser les autres comme ils étaient? C'est là que les règles de classe entrent en jeu. Nous allons entrer dans ceux de juste un peu. Pour l'instant, nous allons essayer de créer un rapidement redéfini balise HTML.

Voici comment créer une redéfinition de balise HTML:

Etape 1

Au bas de panneau Styles CSS, cliquez sur l'icône Nouvelle règle CSS.

Etape 2

Dans la boîte de dialogue Nouvelle règle CSS qui s'affiche, choisissez Tag (redéfinit un élément HTML) dans la liste déroulante Type de sélecteur dans le menu déroulant.

Étape 3

Dans le champ Nom du sélecteur, tapez le nom de l'élément HTML que vous souhaitez contrôler.

Lorsque vous tapez dans le nom de l'élément, veillez à laisser de côté les équerres. En d'autres termes, si vous souhaitiez contrôler "

," you'd simply type in "table."

Plutôt que de taper le nom de l'élément, vous pouvez utiliser le menu fly-out sur le côté droit du champ Nom du sélecteur.

Etape 4

Dans le menu déroulant de la règle Définition au bas de la boîte de dialogue, choisissez si vous souhaitez enregistrer votre nouvelle règle dans une feuille de style interne (Seulement ce document) ou une feuille de style externe (Nouveau fichier feuille de style). Ou, si vous avez déjà une feuille de style externe relié à votre page, vous pouvez choisir de l'enregistrer en sélectionnant son nom.

Cliquez sur OK.

Etape 5

In the CSS Rule Definition dialog box that appears, begin applying the CSS formatting that you'd like to use for your new rule.


For example, if you're redefining a table, you may want to apply a background color, a font, margin settings, and so on. As you're working, click Apply in the CSS Rule Definition dialog box to preview your page. Any elements on your page that you've redefined using CSS will update.

Etape 6

Lorsque vous avez terminé, cliquez sur OK.

Lorsque vous avez terminé de créer votre redéfini élément HTML, toutes les occurrences de l'élément HTML sur votre page maintenant effectuer le formatage que vous définissez dans la boîte de dialogue Définition des règles CSS. Il n'est pas nécessaire d'appliquer votre mise en forme à rien, parce que vous êtes redéfinir quelque chose qui est déjà utilisé. Non seulement cela, mais si vous revenez en arrière et insérer cet élément HTML sur votre page à un certain point bas de la route, il sera également sous le contrôle de vos CSS. C'est un moyen très puissant et très efficace de travailler.

Bien que ce soit juste une brève introduction à travailler avec les éléments HTML redéfinies, nous espérons que vous pouvez voir pourquoi ils sont une partie si importante de la boîte à outils un concepteur Web. Ils sont assez faciles à travailler, aussi. Juste un peu bidouiller avec eux dans Dreamweaver pendant 10-20 minutes et je suis sûr que vous serez à la vitesse avec eux.

Maintenant, j'ai hâte de poursuivre notre regard au CSS dans Dreamweaver et cette discussion sur les deux types de règles primaires, donc me rejoindre dans la partie 2, où nous allons jeter un oeil à travailler avec les règles de classe. Vous y voir!

Ne peut pas attendre pour la partie 2? Vous n'avez pas à! Vérifiez ce tutoriel Dreamweaver dans l'intervalle, avec des tutoriels plus avancés pour bientôt!

Comments (0)

You must be logged in to comment.

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: