All Articles Dreamweaver
Learning CSS in Dreamweaver Tutorial Teil 1: Redefined HTML-Elemente
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

Lernen, wie man mit CSS arbeiten ist absolut entscheidend für den Aufbau moderner Websites. Es ist eines dieser Dinge, dass wir als Designer, müssen Hocke gehen und lernen, an einem gewissen Punkt. Und selbst, nachdem Sie die Grundlagen Meister, es gibt immer noch Raum für Wachstum und zu erweitern. Sie können sich über neue Eigenschaften oder, wie man bestimmte Ergebnisse zu erzielen lernen, und Sie können Techniken für die Aufbewahrung Ihrer CSS so schlank "zu entdecken n bedeuten, wie möglich.

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.

Grundlegendes zur Funktionsweise der Styles Arbeit

First off, ich muss Sie bitten, Sie über Stile in einigen Ihrer anderen Anwendungen wissen? InDesign hat Stile, hat Illustrator Stile ... heck sogar Microsoft Word hat Stil. Ein Stil ist einfach eine Sammlung von Formatierungsoptionen. Zum Beispiel könnten wir einen Stil namens "Emphasis", und innerhalb Schwerpunkt haben wir eine Schriftart, eine Größe und eine Farbe gesetzt. An diesem Punkt können wir beginnen, die Anwendung Schwerpunkt in unserer gesamten Dokument, und natürlich, wo immer wir sie verwenden wir die gleiche Schriftart, Größe und Farbe, die zu gewöhnen. Wenn wir zurück und machen eine Änderung der ursprünglichen Schwerpunkt Stil, dann die Formatierung wird sofort aktualisiert, wo immer es ist in unserem Dokument verwendet wurde.

Dies ist, wie Stile traditionell arbeiten. Allerdings dauert CSS diese Idee sogar noch weiter. Anstatt die Arbeit mit Stilen innerhalb von nur einer Seite mit CSS können Sie beantragen Ihren Satz von Regeln, um eine Gruppe von Seiten - oder auf alle Seiten auf Ihrer Website. Bearbeiten einer Ihrer Regeln, und diese Änderung wird Welligkeit über die gesamte Website so schnell wie Sie können wählen Sie "Datei

Nun, das ist Power!

Ein paar andere schnelle Punkte, bevor wir weitermachen. Zunächst werden der Begriff "Stil" und der Begriff "Regel" synonym in Dreamweaver und in CSS verwendet. Manchmal Dreamweaver wird der Begriff "Stil", und andere Zeiten, es zu benutzen werde "herrschen." Viele neue Nutzer erhalten durch diese und übernehmen Dreamweaver redet über zwei verschiedene Dinge durcheinander. Es ist nicht! Styles und Regeln sind das Gleiche.

Zweitens ist eine Liste von Regeln als Stylesheet bezeichnet. Style Sheets können entweder innerhalb eines bestimmten HTML-Seite (das nennt man ein internes Stylesheet) befindet oder gespeichert werden als separate Datei außerhalb Ihres Seiten (ein so genanntes externes Stylesheet). Es gibt viele coole Dinge, die Sie mit Stylesheets tun können, und wir sprechen über sie in viel mehr Details in Dreamweaver CS5 101: Core-Dreamweaver CS5 .

Jetzt, da wir verstehen, wie Stile und Arbeit haben einen Sinn dafür, was Stylesheets sind alle über, sollten wir besprechen die beiden Haupttypen von CSS-Stile mit denen wir arbeiten können: HTML-Elemente neu definiert, und Klassenregeln. Jeder ist sehr mächtig und hat einen spezifischen Zweck. Werfen wir einen Blick.

A Look At Redefined HTML-Elemente

Lassen Sie die Adresse neu definiert HTML-Elemente zuerst. Dies ist meine Lieblings-Art-Stil, denn was sie tun, ist zu einfach, langweilig HTML und ziehen Sie ihn aus der Steinzeit bis ins 21. Jahrhundert mit nur wenigen Zeilen Code. Und zum Glück für uns, Dreamweaver gehst zu tun all die schwere Arbeit, so dass, wenn wir nicht wollen, haben wir nicht, irgendeinen Code zu sehen.

Mit HTML-Elemente neu definiert, wir nehmen einfach, langweilig HTML-Elemente und legte sie unter der Kontrolle von CSS. Zum Beispiel könnten wir die Kontrolle Tabellen, Bilder, Überschriften, Absätzen, und so ziemlich alles andere, was auf Ihrer Seite angezeigt werden kann. Was ist wichtig daran zu erinnern ist, dass wenn wir ein HTML-Element neu zu definieren, sind wir die Steuerung aller Vorkommen dieses Elements. Zum Beispiel, wenn Sie eine CSS-Regel, die neu definiert

, 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.

Wie genial, wie das ist, kann es nicht sein, was Sie wollen. Was ist, wenn man nur wollte einen Tisch-Steuerung und lassen Sie die anderen, wie sie waren? Das ist, wo Klassenregeln ins Spiel kommen. Wir werden in diesen in nur ein bisschen zu bekommen. Denn jetzt, lasst uns versuchen, eine schnelle neu-HTML-Tag.

Hier ist, wie Create A Redefined HTML Tag:

Schritt 1

Am unteren Rand des Bedienfelds CSS-Stile, klicken Sie auf Neue CSS-Regel-Symbol.

Schritt 2

In der Neue CSS-Regel Dialogfeld, das erscheint, wählen Sie Tag (Definiert ein HTML-Element) aus dem Selektor-Typ Dropdown-Menü.

Schritt 3

In der Selector Feld Name auf den Namen des HTML-Elements, das Sie steuern möchten.

Wenn Sie in das Element eingeben, achten Sie darauf, lassen Sie die spitzen Klammern. In anderen Worten, wenn Sie wollten die Kontrolle "

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

Anstatt der Eingabe in den Namen des Elements, können Sie es von der Fly-Out-Menü auf der rechten Seite der Selector Feld wählen.

Schritt 4

Von der Regel-Definition Pulldown-Menü am unteren Rand der Dialogbox wählen Sie, wenn Sie möchten, dass Ihre neue Regel in einem internen Stylesheet (Nur dieses Dokument) oder ein externes Stylesheet (New Style Sheet Datei) zu speichern. Oder, wenn Sie bereits über ein externes Stylesheet an Ihrer Seite, können Sie ihn dort speichern, indem Sie seinen Namen.

Klicken Sie auf OK.

Schritt 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.

Schritt 6

Wenn Sie fertig sind, klicken Sie auf OK.

Wenn Sie fertig sind Erstellung Ihrer HTML-Element neu definiert, alle Vorkommen des HTML-Elements auf der Seite tragen nun die Formatierung, die Sie in der CSS-Regel-Definition Dialogfeld festlegen. Es gibt keine Notwendigkeit, um die Formatierung nichts gelten, weil Sie neu zu definieren, was schon Wesens verwendet. Nicht nur, dass, sollte aber gehen Sie zurück und fügen Sie diesen HTML-Element auf Ihrer Seite zu einem bestimmten Zeitpunkt auf der Straße, wird es auch unter der Kontrolle von CSS werden. Es ist eine sehr leistungsfähige und sehr effizienter Weg zur Arbeit.

Obwohl dies nur eine kurze Einführung in die Arbeit mit HTML-Elemente neu definiert, hoffentlich können Sie sehen, warum sie ein so wichtiger Teil eines Web-Designers Toolbox sind. Sie sind ziemlich leicht zu verarbeiten, zu. Gleich um ein bisschen mit ihnen in Dreamweaver für 10-20 Minuten Geige und ich bin sicher, Sie werden sich mit ihnen zu beschleunigen.

Jetzt bin ich bestrebt, unseren Blick auf CSS weiterhin in Dreamweaver und diese Diskussion auf die beiden wichtigsten Regelwerke, so mit mir in Teil 2, wo wir einen Blick auf die Arbeit mit der Klasse Regeln nehmen werde. Wir sehen uns dort!

Kann nicht für Teil 2 warten? Sie müssen nicht! Check out this Dreamweaver Tutorial in der Zwischenzeit mit fortgeschrittenen Tutorials coming soon!

Comments (0)

You must be logged in to comment. Login Now

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: