Anwendungsziel: Text-Spezialeffekte erstellen
Anwendungssoftware: Dreamweaver MX
Bedienungsschwierigkeit: ★★☆☆☆
Unser häufig verwendetes Webseiten-Erstellungstool Dreamweaver MX kann nicht nur Webseiten erstellen, sondern auch die CSS-Filter verwenden, um einfache Spezialeffekte auf Text oder Text auszuführen Bilder. Schauen wir uns einige Beispiele an, um zu sehen, wie man in Dreamweaver Text mit Spezialeffekten erstellt.
Halo Word
startet zunächst Dreamweaver, fügt eine 1×1-Tabelle in ein neues Dokument ein, setzt den Rahmen auf 0 und gibt dann den Text ein, der geändert werden muss.
Klicken Sie im schwebenden Bedienfeld rechts auf „Design→CSS-Stil“, um dieses schwebende Bedienfeld zu öffnen.
Die vier Schaltflächen in der unteren rechten Ecke des Bedienfelds sind: CSS-Stile hinzufügen, erstellen, bearbeiten und löschen.
Hinweis: In Dreamweaver können CSS-Filter nur für Objekte mit Bereichsbeschränkungen wie Tabellen, Zellen, Bilder usw. verwendet werden, können jedoch nicht direkt für Text verwendet werden. Daher müssen wir den hinzuzufügenden Text mit „Special“ versehen Fügen Sie vorab Effekte in die Tabelle ein und wenden Sie dann CSS-Stile auf die Tabelle an, um Spezialeffekte auf den Text zu erzeugen.
Abbildung 1 Erstellen Sie einen neuen CSS-Stil.
Klicken Sie auf die Schaltfläche „Neuer CSS-Stil“. Das in Abbildung 1 gezeigte Dialogfeld wird angezeigt.
Wählen Sie „Benutzerdefinierten Stil erstellen“ für das Element „Typ“, wählen Sie „Nur für dieses Dokument“ für „Definiert in“ und klicken Sie auf „OK“, um das Dialogfeld „CSS-Stildefinition“ zu öffnen (Abbildung 2). Definieren Sie die Schriftart, die Schriftgröße, die Farbe und andere Inhalte. In diesem Beispiel wählen wir die Schriftart als offizielle Schriftart, die Größe als 50 Pixel und die Farbe als Weiß.
Abbildung 2 Um CSS-Stile
zur Erzeugung von Texteffekten zu definieren, sind die Einstellungen im Erweiterungsfenster (Abbildung 3) im Filter unter „Visuelle Effekte“ aufgeführt Der Text hat einen leuchtenden Kanteneffekt. Das Syntaxformat des Glow-Filters lautet: Glow(Color=?, Strength=?), das zwei Parameter hat: Color bestimmt die Farbe des Halos. Sie können Hexadezimalcodes wie ffffff oder Wörter wie Red und Yellow verwenden. Stellt dar: „Stärke“ stellt die Lichtintensität im Bereich von 0 bis 255 dar. In diesem Beispiel stellen wir die Farbe auf Rot, die Lichtstärke auf 8 und dann auf OK.
Abbildung 3 Nachdem wir den Glow-Filter eingestellt haben
, wenden wir diesen CSS-Stil auf die Tabelle an. Bewegen Sie den Cursor auf die Zelle, klicken Sie auf die Beschriftung in der unteren linken Ecke des
Dokumentfensters
, um die Zelle auszuwählen, und klicken Sie dann auf den neu erstellten Stil im Bedienfeld „CSS-Stil“. Zu diesem Zeitpunkt ändert sich die Beschriftung, um den CSS-Stil anzuzeigen auf die Zelle aufgetragen wurde.Wir können die Änderung im Dokumentfenster nicht sehen. Drücken Sie die Taste F12, um eine Vorschau im IE anzuzeigen, und der Effekt wird angezeigt (Abbildung 4).
Abbildung 4 Wie wäre es mit dem Effekt von Halo-Wörtern
? Er ist dem Filtereffekt in Photoshop nicht unterlegen. Wenn Sie einige dieser Spezialeffektwörter auf einer Webseite einfügen, wird die Webseite viel schöner. Außerdem können wir den Bildschirm mit der PrintScreen-Taste erfassen und ihn dann im Zeichenprogramm einfügen und speichern, um daraus ein separates Bild zu machen.
Es gibt zwei CSS-Filter fürSchattenwörter
, die Schatteneffekte auf Text erzeugen können, nämlich Drowshadow und Shadow. Die von ihnen erzeugten Effekte unterscheiden sich geringfügig.
Die Schritte zum Erstellen von Schattenwörtern sind grundsätzlich dieselben wie zum Erstellen von Halo-Wörtern. Sie müssen lediglich einen Filter im CSS-Stil erneut auswählen.
Die Syntax des Drowshadow-Filters lautet wie folgt: DropShadow(Color=?, OffX=?, OffY=?, Positive=?).
Unter diesen stellt Color die Farbe des Schattens dar, ausgedrückt als Hexadezimalzahl; OffX und OffY stellen den Betrag der Schattenabweichung von der Textposition in Pixeln dar. Positiv ist ein logischer Wert, 1 stellt die Erzeugung von Schatten für alle undurchsichtigen Zahlen dar elements, 0 Stellt die Erzeugung sichtbarer Schatten für alle transparenten Elemente dar.
Abbildung 5 Schattenworteffekt
Wenn der Filter beispielsweise auf „DropShadow“ (Farbe=6699cc, OffX=2, OffY=2, Positiv=1) eingestellt ist, ist der Effekt wie in Abbildung 5 dargestellt.
DerMaskenwort-
CSS-Filter stellt uns auch eine Maskenfunktion zur Verfügung, mit der der Textteil zu einer Maske verarbeitet werden kann. Wenn ein geeignetes Bild im Hintergrund verwendet wird, kann ein schöner Hohltexteffekt erzeugt werden.
Fügen Sie eine 1×1-Tabelle in das Dokumentfenster ein, klicken Sie auf die Beschriftung in der unteren linken Ecke des Dokumentfensters, um die gesamte Tabelle auszuwählen, wählen Sie ein geeignetes Bild im Hintergrundbild des Eigenschafteninspektors aus (wie in Abbildung 6 dargestellt) und Geben Sie dann den erforderlichen Text ein.
Abbildung 6
Als Nächstes fügen wir der Zelle einen Maskenfilter hinzu. Die Schritte ähneln den beiden vorherigen Beispielen. Wählen Sie im Filter „Maske“ (Farbe=?). Dieser Parameter bestimmt die Farbe der Maske.
Hinweis: Die Farbauswahl des Textes in diesem Beispiel ist nicht wichtig, da der Text im Endeffekt ausgehöhlt wird und die Farbe nicht angezeigt wird.
Abbildung 7 Nachdem der Maskenworteffekt
festgelegt wurde, wenden Sie diesen CSS-Stil auf die Zelle an und drücken Sie dann die Taste F12, um den Effekt zu sehen (Abbildung 7).
Hinweis: Das Hintergrundbild wird der gesamten Tabelle hinzugefügt und entspricht der Beschriftung, während der CSS-Stil der Zelle hinzugefügt wird und die Beschriftung darstellt.
Umdynamische
Zeichen zu erstellen, müssen wir den Blur-Filter verwenden, der zum Erzeugen eines Unschärfeeffekts verwendet wird. Sein Syntaxformat ist Blur(Add=?, Direction=?, Strength=?). Der Add-Parameter ist im Allgemeinen ein boolescher Wert, wenn der Filter für Bilder verwendet wird, und wenn er für Text verwendet wird, stellt er die Unschärferichtung dar und die Einheit ist ein Winkel Der Wert der Unschärfebewegung und die Einheit sind Pixel. Wenn wir beispielsweise Blur(Add=1, Direction=90, Strength=150) definieren, können Sie den Effekt wie in Abbildung 8 in der Vorschau sehen.
Abbildung 8 Dynamischer Worteffekt
Tatsächlich können viele Filter in CSS auch zum Ändern von Bildern verwendet werden, beispielsweise der Unschärfefilter, der einen Unschärfeeffekt auf Bildern erzeugen kann. Wenn wir diese Filter geschickt einsetzen können, können wir auch ohne professionelle Bildbearbeitungssoftware teilweise recht gute Bildeffekte erzielen.