Man kann sagen, dass Textlinks die häufigsten Seitenelemente auf Webseiten sind. Dieses unveränderte Erscheinungsbild kann dazu führen, dass viele Freunde es ändern möchten, um es an die gesamte Seite anzupassen weit verbreitet sind, lässt sich dieser Wunsch nun ganz einfach verwirklichen. Heute zeige ich Ihnen, wie Sie mithilfe von Stylesheets farbenfrohe Textlink-Effekte erstellen. Ich werde es jedem in den Kapiteln „Grundlagen“, „Fortgeschritten“ und „Fortgeschritten“ vorstellen. Alle Linkstileffekte werden im Stileditor von Dreamweaver ausgeführt. Informationen zur Verwendung des Stileditors in Dreamweaver finden Sie in der vorherigen Einführung. Der Linkstil-Browsing-Effekt ist wie unten dargestellt. Informationen zum Durchsuchen bestimmter Seiten finden Sie hier
1. Vorbereitung
Wir erstellen zunächst einen grundlegenden Linkstil und fügen auf dieser Grundlage für andere Stile eine benutzerdefinierte Klasse hinzu.
1. Drücken Sie Umschalt+F11, um das Stilfenster zu öffnen, und klicken Sie auf die Schaltfläche „Neuer Stil“, wie in Abbildung 1 dargestellt.
2. Wählen Sie „CSS-Selektor verwenden“ in der Option „Typ“ aus, um einen Standard-Linkstil zu erstellen, wie in Abbildung 2 dargestellt.
3. Stellen Sie, wie in Abbildung 3 gezeigt, den Standard-Linkstil auf „Keine Unterstreichung“, die Schriftart auf „Song Dynasty 9pt“ und keine anderen Farben usw. ein. Wir werden ihn später für jede Klasse separat festlegen.
4. Definieren Sie die Stilklasse Class. Jeder unserer unten aufgeführten Stile definiert eine eigene Klasse und weist diese dem Linktext zu. Die Schritte sind wie folgt: Klicken Sie auf „Hinzufügen“, um das neue Definitionsstilfenster zu öffnen, und wählen Sie „Benutzerdefinierten Stil (Klasse) erstellen“, um Ihre eigene Stilklasse zu definieren. Wie in Abbildung 4 dargestellt;
5. Fügen Sie dem Linktext eine Stilklasse hinzu. Wählen Sie in Dreamweaver einen Linktext aus, wählen Sie die Beschriftung in der Schnellauswahlleiste für Beschriftungen unten im Fenster aus, klicken Sie mit der rechten Maustaste auf die Beschriftung und wählen Sie „Klasse festlegen“, um dem Linktext den benutzerdefinierten Stil zuzuweisen, wie in Abbildung 5 dargestellt.
6. Die Methode für andere Linktextstile ist dieselbe und ich werde sie später nicht noch einmal vorstellen. In diesem Tutorial können Freunde ihre eigenen Link-Stile zum Definieren des Hover-Status erstellen. Ich werde es nicht mehr vorstellen. Geben Sie einfach [.t1:hover] direkt ein, wenn Sie zur Definition aufgefordert werden.
2. Primärer Linkstil
Wir werden diesen Teil des Link-Effekts in der Kategorie „Typ“ des Stileditors vollständig vervollständigen. Ich werde nicht näher auf die Erstellung und Einrichtung eingehen, sondern nur das fertige Panel-Diagramm zeigen und eine kurze Einführung geben.
1. Gewöhnlicher Link. Wie in Abbildung 6 dargestellt;
Gewöhnliche Links werden im ersten Element „Typ“ in der Kategorie „Kategorie“ des Stileditors festgelegt. „Farbe“ definiert die Farbe der Link-Schriftart und „Dekoration“ definiert den Unterstreichungsstil des Links, der in die folgenden Kategorien unterteilt ist:
Unterstreichen: Unterstreichen Überstreichen: Überstreichen Durchgestrichen: Durchgestrichen Blinken: Blinkende Linie Keine: Keine Unterstreichung
Mehrere andere Link-Stile in diesem Abschnitt werden durch Ändern der Strichkombination erreicht.
2. Keine unterstrichenen Links, wie in Abbildung 7 dargestellt;
3. Doppelt unterstrichener Link, wie in Abbildung 8 dargestellt;
4. Durchgestrichene Links, wie in Abbildung 9 dargestellt;
3. Erweiterte Link-Stile
Als nächstes werde ich eine alternative Methode zur Definition von Linkstilen vorstellen. Diese Methode verwendet hauptsächlich das Border-Attribut im Stylesheet, um die Unterstreichung gewöhnlicher Links zu ersetzen. Werfen wir einen Blick auf das Panel unten, wie in Abbildung 10 dargestellt.
Die Option „Rahmen“ besteht aus drei Teilen: „Breite“ (Linienbreite), „Farbe“ (Linienfarbe) und „Stil“ (Linientyp), und jeder Teil kann unterschiedliche Parameter für unterschiedliche Ränder festlegen. Dies ist ein allgemeiner Verbindungslinieneffekt.
Wir müssen alle daran erinnern, dass es eine notwendige Bedingung für die Verwendung dieser Methode zum Definieren von Linkstilen gibt: Das Box-Attribut im Stil muss definiert sein, wie in Abbildung 11 dargestellt;
Dies liegt daran, dass Border ein Blockelement im Stil ist und wir zunächst ein Blockelement definieren müssen, bevor Border funktionieren kann. Wir müssen nur die Breite oder Höhe in der Box-Option willkürlich definieren. Sie können die spezifischen Werte ausprobieren, um den Effekt zu sehen. Ich habe die Höhe hier als 0 definiert. Mal sehen, welche Effekte erzielt werden können.
1. Alternative Link-Stile. Die Einstellungen sind in Abbildung 12 dargestellt;
2. Passen Sie die Unterstreichungsfarbe an. Dies ist ein Effekt, der mit gewöhnlichem Linktext nicht erreichbar ist, solange die Farbe des Rahmens und die Farbe des Textes definiert sind anders, wie in Abbildung 13 dargestellt;
3. Passen Sie den Unterstreichungsabstand an. Wir können den Abstand dieser Art von Linie in der Kategorie „Box“ festlegen, indem wir den Wert von „Padding“ ändern. In diesem Beispiel stellen wir „Padding – Unten“ auf 5 Pixel ein, wie in Abbildung 14 dargestellt.
4. Passen Sie die Anreißlänge und -ausrichtung an. Darüber hinaus können wir auch die Länge und Ausrichtung der Linien genau definieren. Öffnen Sie die Kategorie „Box“ und stellen Sie die Breite auf 200 ein, wie in Abbildung 15 gezeigt. Stellen Sie die Textausrichtung der Kategorie „Block“ auf „Mitte“ ein in Abbildung 16;
5. Passen Sie den doppelten Unterstreichungseffekt an. Ändern Sie den Stil in „Rand“, um das Erscheinungsbild der Unterstreichung zu ändern. Stellen Sie „Stil“ auf „Doppelt“ und „Unten“ auf „3 Pixel“ ein, um einen doppelten Unterstreichungseffekt zu erzielen. Wie in Abbildung 17 dargestellt;
4. Erweiterte Link-Stile
Durch die Kombination der oben vorgestellten Techniken können wir auch komplexere Textlink-Stile erstellen. Nachfolgend stellen wir drei Beispiele vor.
1. Blockverknüpfungen definieren. Fügen Sie dem Link zunächst eine Hintergrundfarbe hinzu, wie in Abbildung 18 dargestellt.
Fügen Sie dann dem Textlink vier Rahmen hinzu, um einen Textlink mit flachem Block zu erhalten, wie in Abbildung 19 dargestellt.
2. Definieren Sie schaltflächenartige Textlinks. Ändern Sie den Stil des Rahmens und definieren Sie „Border-Style“ als Ausgangspunkt, wie in Abbildung 20 dargestellt.
Definieren Sie die Option „Breite und Höhe im Feld“, um die Breite und Höhe der Schaltfläche als 2 Pixel zu definieren, um einen Abstand von 2 Pixeln zwischen dem Linktext und der Schaltfläche zu erstellen, wie in Abbildung 21 dargestellt.
3. Definieren Sie Textlinks für Spezialeffekte. Das CSS-Stylesheet enthält auch eine Reihe von Spezialeffektfiltern. Wir können die Filter mit den vorherigen Parametern kombinieren, um spezielle Link-Stile zu erstellen. In diesem Beispiel habe ich mithilfe des Weichzeichnungsfilters einen Textlink mit Randeffekt erstellt. Wie in Abbildung 22 dargestellt;
4. Definieren Sie den Effekt der statischen Hintergrundumschaltung. In diesem Beispiel soll der Effekt der Hintergrundumschaltung erzielt werden, indem unterschiedliche Hintergrundbilder für den Normalzustand und den Hover-Zustand des Linktexts festgelegt werden. Siehe Bild unten:
5. Der Effekt der dynamischen Hintergrundumschaltung. Dieser Effekt ist grundsätzlich derselbe wie im obigen Beispiel, außer dass im Hover-Zustand ein dynamischer GIF-Bildhintergrund definiert wird. Und dieses Bild erfordert ein wenig Geschick: Stellen Sie die Schleife auf einmal ein, fügen Sie am Ende einen Frame hinzu und setzen Sie die Frame-Zeit auf einen größeren Wert, z. B. 10000. Dadurch kann die Animation für eine Seite ausgeführt und dann gestoppt werden. Um die Geschwindigkeit der Effektausführung zu verbessern, müssen wir in Dreamweaver außerdem das Verhalten „/doc/webpage/images/images vorladen“ hinzufügen. Dazu müssen Sie das Verhaltensfenster öffnen und das Verhalten „/doc/webpage/images/images vorladen“ hinzufügen, wie in der Abbildung dargestellt:
Wir können alle vier Bilder, die für die letzten beiden Link-Stile erforderlich sind, vorab laden, wie unten gezeigt:
5. Zusammenfassung
Ich werde so viele Link-Stile vorstellen, und zusammen mit dem Festlegen des Hover-Status des Link-Textes können Sie sehr schöne Effekte erzielen. Weitere Informationen zum Durchsuchen spezifischer Seiten finden Sie hier . Ich hoffe, dass Freunde basierend auf dem oben Gesagten weitere Link-Texte erstellen können Ideen. Denken Sie daran, ein Stylesheet ist wie ein Eisberg voller Schätze bei der Webseitenerstellung. Heute haben wir nur einen kleinen Teil des Eisbergs entdeckt.