Hur man skapar anpassade mediefrågor i Dreamweaver - dummies

När du skapar sidor med hjälp av funktioner för vätskegränssnitt skapar Dreamweaver automatiskt motsvarande mediefrågor för dig, men du kan skapa egna anpassade mediafrågor och använda dem för att rikta in dina egna CSS-regler.

Mediafrågor har använts på webben i mer än ett decennium för andra användningsområden, till exempel att skapa en alternativ siddesign optimerad för utskrift. En mediefråga består av en mediatyp, till exempel skärm eller utskrift (de två vanligaste) och ett valfritt uttryck som kontrollerar specifika funktioner, till exempel höjd eller bredd. De vanligaste medietyperna är

allt: Lämplig för alla enheter
Skriv ut: Utformad för förhandsgranskning och för visning när en sida skrivs ut
: För innehåll som visas på en skärm

Den handhållna medietypen används nästan aldrig längre och användes bäst för mobiltelefoner och andra enheter med små skärmar, begränsad bandbredd och monokroma skärmar som endast stöder bitmappad grafik. IOS-enheter och de flesta smartphones kategoriseras som skärmmediatyper.

Så här applicerar du stilar på Dreamweaver-siddesignerna

Du kan använda stilark som externa filer genom att länka dem eller importera dem, eller du kan inkludera dem som interna stilar i huvudområdet på din sidans HTML-kod. Du kan även rikta in enheter med inline-stilar - ett praktiskt alternativ om du bara vill tillämpa en specifik regel på vissa enheter.

Du kan använda en kombination av dessa alternativ och du kan importera eller länka flera externa stilark till samma webbsida. När du har definierat medietypen med de mediefunktioner du vill rikta in, anger du hur stilen ska tillämpas på sidan.

Så här använder du mediefrågor i externa stilark i Dreamweaver

Du kan använda mediafrågor med externa stilark på två sätt. Det första alternativet är att länka till ett externt stilark med flera uppsättningar av stilar separerade av mediafrågor. Således länkar Dreamweaver stilerna när du skapar ett flytnätlayout.

Det andra alternativet är att länka två eller flera separata externa stilark till varje HTML-sida och inkludera mediasökningar i varje stilark. Hur som helst lagras koden för CSS och HTML i separata filer och taggen kopplar dem.

Om du sparar alla mediefrågor och relaterade stilar i en fil eller i separata CSS-filer kan du länka ytterligare stilark till en annan HTML-sida. Till exempel kan du inkludera en separat uppsättning stilar i ett separat stilark som är utformat för att formatera sidan när den skickas till en skrivare.

Så här skapar du mediefrågor i Dreamweaver

Du kan skapa så många mediefrågor som du vill i Dreamweaver och du kan inkludera dem i en CSS-fil eller många. Gör så här för att skapa en ny mediefråga i Dreamweaver:

Öppna CSS Designer-panelen genom att välja Fönster → CSS-format.
Markera ett existerande typsnitt i panelen Källor eller skapa ett nytt genom att klicka på plustecknet (+) i panelen Källor.
Klicka på plustecknet (+) i panelen @Media på CSS Designer-panelen.

Dialogrutan Definiera mediesökningar öppnas.
Välj Media från den första rullgardinsmenyn och Skärm från den andra listrutan.
Flytta markören till höger om varje rullgardinsmeny för att få plustecknet att visas och klicka sedan på plustecknet för att lägga till ett nytt fält.

Ett nytt fält visas i dialogrutan Mediaqueries, så att du kan ange orienteringen. Det här fältet är valfritt men används vanligtvis om du vill skapa olika mönster för landskaps- och porträttvisningar på en surfplatta eller en smartphone. Om du inte vill skapa ytterligare layouter baserat på orientering kan du ta bort det här fältet genom att klicka på minustecknet.

Obs! Plust- och minustecknen syns bara när du rullar markören över höger om dialogrutan.
Flytta markören till höger om rullgardinslistorna, klicka på plustecknet en gång till för att lägga till ett fält och ange ett minimumsbreddstillstånd.

Fältet Minbredd visas i dialogrutan Mediaqueries, så att du kan ange den minsta bredden du vill använda för att rikta sökningen. Minimibredden är viktig eftersom mediafrågan riktar sig till stilar som är baserade på det minsta till maximala breddintervall du anger, som omfattas av nästa steg.
Flytta markören till höger om rullgardinslistorna, klicka på plustecknet en tredje gång för att lägga till ett fält och ange maximal breddstillstånd.

Fältet Max bredd visas i dialogrutan så att du kan ange den maximala bredden du vill använda för att rikta sökningen.
Klicka på OK.

Dialogrutan Media Queries stängs och mediafrågan genereras och läggs till i stilarket du valt i panelen Källor på CSS Designer-panelen.
Upprepa steg 3-8 för att lägga till ytterligare mediefrågor till valfritt stilark. Om du vill lägga till mediefrågor i ett annat stilark, upprepa steg 2-8.

Även om du kan spara mediafrågor i så många olika formatark som du vill, sparas dem alla i ett externt stilark, eftersom varje stilark måste hämtas från servern separat och kräver mer bandbredd. Att ladda ner ett långt stilark med flera mediasökningar är lite effektivare än att ladda ner flera stilark.