Wie Erstellen von benutzerdefinierten Media Queries in Dreamweaver
Wenn Sie Seiten mit Fluid Grid Layout-Funktionen erstellen, erstellt Dreamweaver automatisch die entsprechenden Medien-Anfragen für Sie, aber Sie können Ihre eigenen Medienanfragen erstellen und verwenden Sie Ihre eigenen CSS-Regeln zu zielen.
Menu
Medien-Anfragen haben auf dem Netz im Einsatz für mehr als ein Jahrzehnt für andere Zwecke, wie zum Beispiel eine alternative Seite Design für den Druck optimiert zu schaffen. Eine Medien Abfrage besteht aus einem Medientyp aus, wie zum Beispiel Bildschirm oder drucken (Die zwei am häufigsten) und eine optionale Ausdruck, die für bestimmte Funktionen, wie beispielsweise die Höhe oder Breite prüft. Die am häufigsten verwendeten Medientypen sind
alle: Geeignet für alle Geräte
drucken: Für Druckvorschau und zur Anzeige Entwickelt, wenn eine Seite gedruckt wird,
Bildschirm: Für Inhalte auf jedem Bildschirm angezeigt
Das Hand Medientyp wird verwendet, so gut wie nie mehr und wurde am besten verwendet, nur für Mobiltelefone und andere Geräte mit kleinen Bildschirmen, begrenzte Bandbreite und Monochrom-Displays, die nur Bitmap-Grafiken unterstützen. iOS-Geräte und die meisten Smartphones sind kategorisiert als Bildschirm Medientypen.
Wie man Stile auf Ihre Dreamweaver-Seite Designs anwenden
Sie können durch die Verknüpfung von ihnen Stylesheets als externe Dateien anwenden oder dem Importieren, oder Sie können sie als interne Stile im Kopfbereich der Seite HTML-Code enthalten. Sie können sogar Zielgeräte Inline-Styles mit - eine praktische Option, wenn Sie nur für bestimmte Geräte eine bestimmte Regel anwenden möchten.
Sie können eine Kombination dieser Optionen verwenden, und Sie können importieren, oder zu verknüpfen, mehrere externe Stylesheets auf der Web-Seite. Nachdem Sie den Medientyp mit den Media-Funktionen definiert haben Sie ausrichten möchten, geben Sie, wie sollten die Stile auf die Seite angewendet werden.
Wie man Medienanfragen in externen Stylesheets in Dreamweaver
Sie können Medien-Anfragen mit externen Stylesheets auf zwei Arten verwenden. Die erste Option ist zu einem externen Stylesheet mit mehreren Sätzen von Arten von Medienanfragen getrennt zu verknüpfen. Das ist, wie Dreamweaver die Stile verbindet, wenn Sie ein Fluid Grid Layouts erstellen.
Die zweite Möglichkeit ist, zwei oder mehrere separate externe Stylesheets zu jeder HTML-Seite verlinkt werden und umfassen die Medienanfragen in jedem Stylesheet. So oder so, der Code für die CSS und HTML werden in separaten Dateien gespeichert und das Tag verbindet sie.
Egal, ob Sie alle Medien-Anfragen und verwandte Stile in einer Datei oder in separaten CSS-Dateien speichern, können Sie auch zusätzliche Stylesheets zu jedem beliebigen HTML-Seite verlinkt. Zum Beispiel können Sie einen eigenen Satz von Arten in einem separaten Stylesheet enthalten, die die Seite zu formatieren ausgelegt ist, wenn es an einen Drucker gesendet wird.
Wie man Medienanfragen in Dreamweaver erstellen
Sie können beliebig viele Medienanfragen erstellen, wie Sie in Dreamweaver gefällt und Sie können sie in einer CSS-Datei oder viele umfassen. Um eine neue Medien-Abfrage in Dreamweaver erstellen, gehen Sie folgendermaßen vor:
Öffnen Sie die CSS-Designer-Panel, indem Sie Window-CSS-Stile.
Wählen Sie ein vorhandenes Stylesheet in der Quellen-Panel, oder ein neues erstellen, indem Sie auf das Pluszeichen klicken (+) in der Quellen-Panel.
Klicken Sie auf das Pluszeichen (+) in der @media Panel in der CSS-Designer-Panel.
Das Define Media Queries Dialogfeld öffnet sich.
Wählen Sie Medien aus der ersten Dropdown-Liste und Bildschirm aus der zweiten Dropdown-Liste.
Bewegen Sie den Cursor nach rechts von jedem der Dropdown-Listen erscheinen auf das Pluszeichen zu machen, und klicken Sie dann auf das Pluszeichen ein neues Feld hinzuzufügen.
Ein neues Feld erscheint im Media Queries Dialogfeld, so dass Sie die Ausrichtung festlegen. Dieses Feld ist optional, aber wird häufig verwendet, wenn Sie verschiedene Designs für Quer- und Hochformat auf einem Tablet oder ein Smartphone erstellen möchten. Wenn Sie auf Orientierung keine zusätzliche Layouts erstellen möchten, können Sie dieses Feld entfernen, indem Sie auf das Minuszeichen klicken.
Hinweis: Die Plus- und Minuszeichen werden nur sichtbar, wenn Sie mit dem Mauszeiger über die rechte Seite des Dialogfelds rollen.
Bewegen Sie den Cursor nach rechts von der Dropdown-Liste, klicken Sie auf das Plus ein zweites Mal unterschreiben ein Feld hinzufügen, und geben Sie eine Mindestbreite Zustand.
Die Min-Breite Feld erscheint im Media Queries Dialogfeld, so dass Sie die minimale Breite angeben können, die Sie verwenden möchten die Abfrage zum Ziel. Die minimale Breite ist wichtig, weil die Medienabfrage die Stile basierend auf dem Minimum zum Maximum Breitenbereich zielt auf Sie, bedeckt im nächsten Schritt angeben.
Bewegen Sie den Cursor nach rechts von der Dropdown-Liste, klicken Sie auf das Plus noch ein drittes Mal unterzeichnen ein Feld hinzufügen, und geben Sie die maximale Breite Zustand.
Das Max-Width-Feld erscheint im Dialogfenster, so dass Sie die maximale Breite angeben können, die Sie verwenden möchten die Abfrage zum Ziel.
Klicken Sie auf OK.
Das Medien-Abfragen Dialogfeld wird geschlossen und die Medien-Abfrage generiert wird und zu dem Stylesheet Sie in der Quellen-Panel in der CSS-Designer Feld ausgewählt.
Um weitere Medien-Anfragen an jedes gewählte Stylesheet hinzuzufügen, wiederholen Sie die Schritte 3-8. Um Medien-Anfragen zu einem anderen Stylesheet hinzuzufügen, wiederholen Sie die Schritte 2-8.
Obwohl Sie Medienanfragen in so viele verschiedene Arten Blätter speichern können, wie Sie wollen, so dass sie alle in einem externen Stylesheet zu speichern ist effizienter, weil jedes Stylesheet vom Server separat heruntergeladen werden muss, mehr Bandbreite erfordern. eine lange Stylesheet Herunterladen mit mehreren Medien-Anfragen ist ein wenig effizienter als mehrere Stylesheets Download zur Verfügung.