CSS Grundlagen Adobe Dreamweaver

html und CSS-Tutorial in Grundlagen Adobe Dreamweaver

Dieses Tutorial ist konzipiert, um die Konzepte der Verwendung von CSS in Adobe Dreamweaver und html für Web-Designer, die nicht mit CSS im Web-Design. CSS steht für Cascading Style Sheet ist ein System für die Aufnahme von StyLing zu Ihrem Web-Seiten und Web-Content-Seite.

Nach dem Lesen dieses CSS Tutorials sollten Sie ein Gefühl für den Einsatz in CSS Dreamweaver. In diesem Tutorial werden wir ein leeres Dokument, Schaffen, CSS-StyLing, Legen Sie aa div auf der Seite, Legen Sie ein Bild, Und erstellen Sie dann eine schnelle Navigation und CSS-Eigenschaften zuweisen, um die Elemente auf der Seite. Das Programm in diesem Tutorial und Screenshots Adobe Dreamweaver CS3.

Abraham chaffin creativecow.net, Cambria, KaLifornien, USA © 2007 creativecow.net. Alle Rechte vorbehalten.

html Dokumente:
Erstellen Sie ein neues leeres Dokument und speichern Sie es dann zu Beginn Ihrer Arbeit. Ich neige immer Speichern von Dokumenten, bevor ich tun, damit ich schnell speichern können von Zeit zu Zeit mit der Verknüpfung (cntrl + s). Wenn Sie ein leeres Dokument in Dreamweaver Ihre Web-Seite bereits über Inhalte in ihr, Sie können nicht sehen, im Design-Modus. , um die Inhalte, die Sie verwenden können, die Verknüpfung (cntrl + ~), um zwischen den Design-Modus und Code-Modus oder gehen Sie auf das Menü Ansicht Code oder Menü "Ansicht" Design.

Was sollten Sie sollte in etwa so aussehen:

Dies ist der Beginn Rahmen Ihrer html Dokument, sondern besteht aus vielen Tags. Beginn eines jeden tag sieht wie Dies und das Ende eines jeden tag sieht wie / dies. Das gesamte Dokument besteht aus der html -Tag sieht es aus wie oben html xmlns = " http://www.W3.org / 1999/xhtml " , weil sie eine xmlns modifier es in. Ende-Tag ist am unteren Ende des Dokuments / html. Zwischen den Anfang und das Ende html -Tag gibt es zwei primäre Tags head und Körper Tags. head der Tag ist nicht mehr gesehen, sondern Liefert viele wichtige Teile und Modifizierer für das, was der Tag Körper Elemente wie. Den Inhalt in den Tag Körper ist der Inhalt, die tatsächLich sichtbar über Ihren Browser.

CSS-Elemente:
Legen Sie, bevor wir alle Elemente lassen Sie uns eine CSS -. Drücken (Shift + F11) wird die CSS-Stile Rahmen oder die Änderung Menü CSS-Stile. In der unteren rechten Ecke gibt es ein kleines Symbol, das aussieht wie . Dies führt zu der â € œnew css ruleâ € Dialog. Um let's einen CSS-Regel für die Körper Tag und die Hintergrundfarbe weiß ein Off statt eines stark weiß. Wählen Sie die Option "Tag" für die "Selektor-Typ" Radio. Von der "tag" Dropdown-Menü wählen Sie den "Körper"-Selektor. Wählen Sie "dieses Dokument nur" für die "definieren, in der" Radio-und kLicken Sie auf "ok".

Sobald Sie auf "ok" Dreamweaver fügt Code in Ihre html Datei Vorbereitung zur Änderung der Körper tag mit CSS.

Dies wird auch um das "CSS-Regel-Definition für den Körper" Dialog-Fenster können Sie Ihre Auswahl aus den "Hintergrund" aus der Kategorie Spalte und wählen Sie eine sehr hellgelb mit dem Hintergrund, Color Picker oder Geben Sie in # ffffcc, und drücken Sie "ok".

Drücken von "ok" ausgeführt Dreamweaver zur Änderung der CSS-Stelle Selektor , indem Sie einen Hintergrund-Farbe Eigentum Und eine Wert Von # ffffcc.

Es gibt noch viele andere Eigenschaften können Sie auf der Stelle oder Selector können Sie es mit der CSS-Stile Rahmen:

Div-Tags:
Zurück zu der Entwurfsansicht (cntrl + ~) und lassen Sie uns eine div-Tag, indem Sie auf das Menü Einfügen Layout-Objekte div-Tag, Daraufhin wird der â € œinsert div tagA € Dialog. (div-Tags werden die am häufigsten verwendeten Tags zu verschiedenen Elemente in einer Web-Seite mit CSS, wie z. B. Bilder, Text, Oder Videos.)

Das erste Feld in der "div-Tag einfügen" Dialog ist das Insert: Feld. Dies ist der Bereich, der bestimmt, wo die div-Tag wird in der html Seite. Standardmäßig setzt sie auf "auf Einfügemarke" was bedeutet, dass die div-Tag eingefügt werden, wo Sie den Cursor wurde zuletzt in der Web-Seite. Sie können auch die Option "nach Beginn der Tag" oder "vor dem Ende der Tag", um Ihre div-Tag an einem anderen Ort.

Weiter finden Sie die "Klasse:"Feld, ist ein Gebiet, das direkt auf Ihrem CSS-Regeln. Einer CSS-Klasse hat einen Selektor mit einer Zeit, in der es vor wie ".Klasse". Klassen werden benutzt, um eine Eigenschaft oder Eigenschaften für mehrere Objekte in einem Web-Seite. Wir haben keine Klassen definiert noch in diesem Dokument, so gibt es nichts, was wir können noch. Die "ID:"Ist auch leer, weil es keine IDs in unserer css. IDs werden benutzt, um eine Eigenschaft oder Eigenschaften zu einem einzigen Artikel in einer Web-Seite und in der CSS-Code wurde ein Pfund unterzeichnen, bevor er wie "# id". Da wir keine der beiden kLicken Sie auf "neue CSS-Style" und wir werden eine neue Regel.

Dieser Zeit wählen Sie "Klasse" als Selektor-Typ, Geben Sie "CoolKlasse", wie die, Wählen Sie "Dieses Dokument" und kLicken Sie auf "ok". Lassen Sie uns die Hintergrundfarbe dieser Klasse mit einem kühlen Blau durch die Auswahl von "Hintergrund" unter die Kategorien und die Option "Hintergrundfarbe", um so etwas wie # 00ccff. Jetzt die Grenze Farbe auf eine dünne schwarze Linie, indem Sie auf "Grenze", wie die Kategorie und wählen Sie dann fest, wie der Stil aus dem Drop-Down-und 1 Pixel Breite und schwarz (# 000000), wie die Farbe. Oder Sie können mehr Kreativität, wenn Sie. Lassen Sie uns jetzt einen kleinen Polster in unserem Artikel, indem Sie auf "Feld" in der Kategorie Spalte und geben Sie "5" für die "Top: Auffüllen dieser wird die Polsterung der nicht nur für die Spitze, sondern auch für alle Seiten, wenn Sie die "für alle"-Box kontrolLiert. KLicken Sie auf "ok" und Dreamweaver wird eine neue Klasse der Regel in Ihrem CSS-Stil-Tag mit drei Eigenschaften.

Ihre "div-Tag einfügen" Dialog-Box jetzt auch über seiner Klasse besiedelten Gebiet mit "cooltag" - kLicken Sie auf "ok" und Dreamweaver schreibt Code in Ihre Web-Seite mit Platzhalter-Text in der neuen div Tag.

Dieses div wird unsere Klasse, die wir für die div-Tag und alle Elemente in den Tag.

Bilder:
Lassen Sie uns jetzt ein Bild und weisen unsere Klasse zu.
Setzen Sie den Cursor außerhalb der div, indem Sie auf eine beLiebige Stelle außerhalb der es in der Web-Seite. Aus dem Menü "Einfügen" Zum Bild (cntrl + Alt + I). Wählen Sie ein Bild können Sie auf Ihrem Computer und kLicken Sie auf "ok". Können Sie den nächsten Dialog, indem Sie "ok"; Dreamweaver wird das Bild in Ihre Web-Seite. Der rechten Maustaste auf das Bild und wählen Sie aus dem Menü CSS-Stile CoolKlasse. Dieser wird bei der Definition der Klasse vor, die zu dem Bild, was die Hintergrundfarbe, Padding, Und wir, die Grenze ".CoolKlasse". Adobe Dreamweaver sollte einfügen Code wie diese:

Macht der CSS:
Was macht CSS mächtig ist die Fähigkeit, gehen Sie zurück und machen Sie Ihre Änderungen an Stil und einmal haben sie auf alle Elemente, die Sie mit dem Stil. In der CSS-Stile Rahmen, sollten Sie "alle Regeln" und Ihren Stil ".CoolKlasse". KLicken Sie auf die .CoolKlasse Selector und dann auf den Wert für die Hintergrund-Farbe (# 00ccff). Mit der Farbauswahl wählen Sie eine andere Farbe, Wie (# 66ffff). Sie sind nun erfolgreich mit CSS in Dreamweaver. Der einzige Code, wurde in der CSS, und es war für beide die div und die img.

Schaffung einer schnellen nav-Menü
Nun mit dem Inhalt in der div Tag werden wir brechen sie auseinander und machen es zu einer Navigationsleiste.

Die jedes Wort in einer eigenen Zeile, indem Sie geben mit Ihrem Cursor dazwischen jedes Wort. Alle Wörter markieren und rechte Maustaste und wählen Sie Liste ungeordnete Liste. Sie haben jetzt eine Liste mit Aufzählungszeichen, aber wir müssen auf einige StyLing zu, daher müssen wir eine Regel erstellen.

KLicken Sie auf die Schaltfläche Hinzufügen css CSS-Stile aus dem Rahmen. Es gibt viele MögLichkeiten, um den Stil, die in die Liste, Wir könnten eine neue Klasse ruft es so etwas wie ".ListKlasse "und es auf jeden Tag Li die Li Klasse="ListKlasse" , aber für dieses Beispiel werden wir, erstellen Sie eine Regel für alle Li -Tags. Wählen Sie "Erweitert" Radio und "Li" in der Feld-Selektor. "Li" steht für die Liste. Wählen Sie "Dieses Dokument" und kLicken Sie auf "ok".

Lassen Sie uns die Kugel zu entfernen, Die Schriftfarbe weiß und die Schrift fett Gewicht. Mit der gewählten Kategorie wählen fett aus dem "Gewicht" und wählen Sie Drop-down-weiß (# ffffff) für die Farbe. Aus der Liste keine Kategorie wählen, aus dem "Typ" Dropdown-und kLicken Sie auf "ok". Adobe Dreamweaver erstellt in der CSS-Code, die dieLi-Tag.

Es zu einem richtigen nav-Menü den Artikel zu ändern, wie Sie die Maus über sie. Um dies zu tun brauchen wir, um ein Verhalten. Gehen Sie zum Menü "Fenster" Verhalten (Umsch + F4). Alle Events anzeigen, indem Sie auf "alle Events anzeigen"-Button . Stellen Sie sicher, dass Sie den Cursor in einem der Listeneinträge, so ist das Verhalten auf die Liste und nicht etwas anderes. Onmouseover in der Feld-Typ Dies.Classname = 'CoolKlasse ". "das" bezieht sich auf den Tag "Li" Klassename erzählt die Browser, den Sie ändern wollen den Klassennamen zu CoolKlasse. In der onmouseout Feldtyp Dies.Classname ='' (das ist zwei "Marken nicht eine Offerte). Dies macht den Browser zurück Klassennamen des Li-Tag zurück, um nichts, wenn die Maus bewegt sich aus dem Element. Sie haben nun ein Verhalten zu einem Element in der Liste.

, um das Verhalten auf alle Elemente, die Sie entweder wiederholen Sie die vorherigen Schritte, mit dem Cursor in jeder Liste Element oder kopieren und fügen Sie den Code im Code-Ansicht. Das endgültige Ergebnis in Aussicht Code sollte dann so aussehen:

, bevor wir Ende dieses Tutorials sollten wir setzen Sie den Cursor in eine Hand, wie es geht über die Liste wie die normalen Navigation würde.
In der CSS-Stilen wählen Sie Rahmen Li. Am unteren Ende der "Eigenschaften für" Li "gibt es eine" Eigenschaft hinzufügen "kLicken Sie auf das Link und wählen" Cursor "aus der Dropdown -. Geben Sie "Zeiger", wie der Wert, wenn es nicht in die Presets.

Abschluss
F12 drücken und kontrolLieren, was Sie getan haben. Es wird sich auch nicht schön, aber es sollte Ihnen ein Gefühl, wie CSS in Dreamweaver arbeitet mit html und was sie in Ihrem Browser.

Spielen und denken Sie daran, Spaß haben!