Wie zu Link Cascading Style Sheets (CSS) mit Dreamweaver

Dreamweaver-Benutzer können einfach einen Link-Tag zu einem externen Cascading Style Sheet (CSS) einfügen, ohne Speicher alle erforderlichen Code oder die richtige Syntax zu begehen. Wenn darüber hinaus Links zu einer externen CSS-Datei in Dreamweaver erstellen, können Sie auch die Möglichkeit dazu verwenden, um eine CSS-Medientyp auszuwählen, falls gewünscht.

In den folgenden Schritten erfahren Sie, wie eine externe CSS-Datei mit dem zu verbinden alle Medientyp zu einer offenen HTML-Datei in Dreamweaver.

Um alle Schritte abgeschlossen haben, müssen Sie mit Beispiel HTML und CSS-Dateien in Dreamweaver zusammen, die Sie schnell auf eigene Faust zu schaffen.

Legen Sie beide Kopien der gespeicherten Dateien in einen Ordner auf Ihrem Computer und dann fahren Sie mit den folgenden Schritten:

  1. Starten Sie Dreamweaver und Einrichten eines verwalteten Website von Standort New Site wählen.

    Die Site-Setup-Dialogfeld angezeigt wird, die Kategorie der Website zeigt, welche Felder für die Site-Namen und lokale Standortordner angezeigt wird.

  2. In der Site-Name-Feld, geben Sie den Namen Ihrer Website.

    Geben Sie einen Namen, der den Namen des Kunden übereinstimmt oder zeigt Zweck Ihrer Website ist am besten, wie die Firma ABC oder My Blog.

  3. Im lokalen Standort Ordner-Feld, stellen Sie sicher, dass der Pfad zu dem Ordner auf Ihrem Computer zeigt, die Sie für diese Website verwenden möchten.

    Zum Beispiel, wenn Sie einen Ordner auf Ihrem Computer zu lokalen Websites gewidmet haben und Sie einen Ordner im Inneren, die zu erstellen, um die Dateien für eine neue ABC Firmen-Website zu beherbergen, die lokale Site Ordnerpfad könnte wie folgt sein:

    Benutzer IhrBenutzername Dokumente local-sites ABC Web
  4. Klicken Sie auf Speichern, um das Dialogfeld zu schließen.

    Ihre neue verwaltete Website wird geöffnet und zeigt alle vorhandenen Dateien und Ordner (falls vorhanden) in der Wurzel Ordner im Bedienfeld Dateien.

  5. Vom Bedienfeld Dateien, öffnen Sie die HTML-Datei, die Sie die CSS-Link zu hinzufügen.

    Die Datei, die Sie in der es eine Art haben und werden markiert mit Absatz, h1, und Listen-Tags verwendet werden soll.

  6. Um den Link hinzufügen möchten, klicken Sie auf das Stylesheet anhängen Symbol (die wie ein kleines Stück Kette aussieht) am unteren Rand des Bedienfelds CSS-Stile.

    Klicken auf das Symbol öffnet das externe Dialogfeld Stylesheet anhängen. Wenn Sie nicht über das Bedienfeld CSS-Stile im Arbeitsbereich von Dreamweaver zu sehen, wählen Sie Window-CSS-Stile zu öffnen.

    bild0.jpg
  7. In der Datei / URL-Textfeld den Namen der CSS-Datei zu verknüpfen Sie möchten, oder klicken Sie auf die Schaltfläche Durchsuchen die gewünschte CSS-Datei zu suchen und auszuwählen.

    Wenn Sie die Beispieldateien verwenden, die Sie gerade aus dem Internet heruntergeladen haben, klicken Sie auf die Schaltfläche Durchsuchen, um den Standort zu wechseln, in dem Sie die Beispieldateien gespeichert und wählen Sie die Datei cssdemo.css.

  8. Im As Bereich des Dialogfeld klicken Sie auf den Link oder einer Import Optionsfeld für das Hinzufügen der CSS-Datei auf Ihrer HTML-Seite die gewünschte Methode auszuwählen.

    Die Link-Option fügt die CSS als externe Datei durch die Verwendung von tag:

    Der Import-Option gibt die externe CSS in einem Stil Link im Kopf der Seite durch die Verwendung von @Import at-Regel. Beachten Sie, dass diese Methode nicht für CSS3 Media Queries empfohlen:

  9. In den Medien Menübereich Dropdown-Art das Wort alle, oder den Pfeil nach unten-Menü und wählen Sie im alle Medientyp.

    mehrere Medientypen Um festzulegen, und nicht nur ein, geben Sie die Namen jedes der gewünschten Medientypen, die durch Kommas getrennt und keine Leerzeichen, wie in Bildschirm, Druck, tty.

  10. Falls gewünscht, klicken Sie auf die Schaltfläche Vorschau des Dialogfelds, um zu sehen, wie die neu verknüpften CSS-Datei Stile Ihre HTML-Beispieldatei.

  11. Klicken Sie auf OK, um die Befestigung der externen CSS-Datei abzuschließen.

    Dreamweaver Bedienfeld CSS-Stile zeigt nun die neu angeschlossenen CSS-Datei und listet alle Stile im Inneren, und die Probe HTML-Datei mit den Stilregeln auf dem verknüpften CSS gestylt.

Menü