So erstellen Sie ein Schlagschatten in Dreamweaver

Erstellen Sie ein Dropdown Schatten in Dreamweaver. 

CREATE SHADOW

Ein Tropfen Schatten macht ein 2-D-Objekt erscheinen 3-D, indem Schattierung dahinter. Die Schattierung simuliert eine Lichtquelle, so dass das Objekt erscheinen zu stehen von der Seite in 3-D-Raum. Bevor HTML5, die neuesten Web-Markup-Sprache-Version und CSS3, die neueste Version Cascading Stylesheet, mussten sich Entwickler erstellen einfachen Schlagschatten in Grafikprogrammen wie Photoshop, und importieren Sie sie in Dreamweaver. CSS ist eine Seite Element Formatierungssprache häufig in Web-Design verwendet. Die neuen Standards HTML5 und CSS3 können Sie erstellen Schlagschatten mit Code, das spart Zeit und hilft, Ihre Web-Seiten 'insgesamt kleinere Dateigrößen.

Was Sie benötigen

Adobe Dreamweaver CS4 oder neuer

Erstellen Sie ein neues Dokument HTML5 in Dreamweaver. Klicken Sie auf das Menü "Datei" und wählen Sie "Neu." Dies zeigt das Dialogfeld Neues Dokument. Wählen Sie "HTML" von der Seite Liste Typ, und wählen Sie "None" aus dem Layout-Liste. Klicken Sie auf "DocType" drop-down Menü und wählen Sie "HTML 5", und klicken Sie dann auf "Erstellen".

Klicken Sie auf das Menü "Fenster" und wählen Sie "CSS Style", um den CSS Style anzuzeigen.

Klicken Sie auf die "Add New Rule"-Button in der rechten unteren Ecke des CSS Style-Panel. Dies öffnet das Neue CSS-Regel Dialogfeld.

Type ". H1" in der "Selektor-Name"-Feld und klicken Sie dann auf "OK". Sie können den Namen der Wähler, was Sie wollen. Mit diesem Selektor, alle Texte, die Sie-Tag mit h1 wird nach dieser CSS-Regel formatieren.Dies öffnet die CSS-Regel-Definition für. H1 Dialogfeld.

Wählen Sie "Type" in der Liste Kategorie, um Optionen für die Formatierung von Text anzuzeigen. Verwenden Sie diese Optionen, um die Eigenschaften, wie Schriftart, Schriftgröße Gewicht, Schriftgröße und Schriftfarbe für dieses CSS-Regel eingestellt.

Klicken Sie auf "OK". Dreamweaver erstellt eine neue CSS-Regel mit dem Namen ". H1" und zeigt ihn und seine Eigenschaften im Bedienfeld CSS-Stile.

Klicken Sie auf "Eigenschaft hinzufügen" in den CSS Style-Panel, und geben Sie dann "text-shadow" im Feld Eigenschaft hinzufügen. Diese Eigenschaft wird ein Text Schlagschatten. Um einen Schatten auf dem CSS-Box oder Container zu erstellen, verwenden Sie "box-shadow".

Klicken Sie auf das Feld rechts neben der neuen CSS-Regel. Dies zeigt ein Dialogfeld zur Einstellung der Eigenschaften Ihrer Schlagschatten, wie X - Offset, Y - Offset, Blur Radius und Farbe. Diese Optionen steuern die Dunkelheit und Schärfe der Schlagschatten. Ein typischer Text Schlagschatten könnten Sie die folgenden Einstellungen:

X - Offset = "2" Pixel

Y - Offset = "2" Pixel

Blur Radius = "5" Pixel

Farbe = grau, oder "# 333"

Sie können unabhängig Einstellungen, die Sie auf Ihre Schatten anpassen möchten. Diese Einstellungen erzeugen einen schönen, dezenten Schlagschatten, die gut mit Text aussieht.

Klicken Sie in der Web-Seite, wo Sie wollen, um Text mit einem Schlagschatten einzufügen, und klicken Sie dann auf den "Zielregel" drop-down Menü im Eigenschaften-Bedienfeld und wählen Sie ". H1."

Geben Sie den Text. Dreamweaver kann nicht die Schatten in der Entwurfsansicht. Klicken Sie auf den "Live View"-Taste unterhalb der Menüleiste, um die Schatten zu sehen.

Tipps und Warnungen

Schlagschatten können kleinen Text, wie Fließtext, schwer zu lesen. Sie sollten sie für die Anzeige Text zu verwenden, wie z. B. Überschriften und dekorativen Text.

Nicht alle Web-Browser unterstützen alle HTML5 und CSS3 Eigenschaften, insbesondere einige mobile Web-Browsern. Sie können sicherstellen, eine breitere Palette von Browsern können Ihre Schatten durch Browser-Erweiterungen zu sehen. Zum Beispiel, um einen Schatten für WebKit-Browsern, die viele mobile Browser Unterstützung zu schaffen, würden Sie Ihren Schatten Eigenschaft wie folgt schreiben:

-Webkit-text-shadow: 2px 2px 5px # 333;

Die meisten gängigen Browsern unterstützt Erweiterungen. Hier ist eine Liste der populärsten Browser und ihre Erweiterungen:

Microsoft Internet Explorer = ms-

Mozilla-Browser =-moz

Opera und Opera Mobile =-o

WebKit-Browsern =-webkit

Beachten Sie, dass Google Chrome und Firefox Mozilla Browser und Apple Safari sind, ist ein WebKit Browser.