Hur man skapar anpassade mediefrågor i Dreamweaver

När du skapar sidor med funktioner för flytande rutnätslayout skapar Dreamweaver automatiskt motsvarande mediefrågor åt dig, men du kan skapa dina egna anpassade mediefrågor och använda dem för att rikta in dig på dina egna CSS-regler.

Mediefrågor har använts på webben i mer än ett decennium för annan användning, som att skapa en alternativ siddesign optimerad för utskrift. En mediefråga består av en medietyp, till exempel skärm eller tryck (de två vanligaste), och ett valfritt uttryck som söker efter särskilda egenskaper, såsom höjd eller bredd. De vanligaste mediatyperna är

• alla: Lämplig för alla enheter

• print: Designad för förhandsgranskning och för visning när en sida skrivs ut

• skärm: För innehåll som visas på vilken skärm som helst

Den handhållna mediatypen används nästan aldrig längre och användes bäst endast 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 tillämpar du stilar på dina Dreamweavers siddesigner

Du kan använda formatmallar som externa filer genom att länka dem eller importera dem, eller så kan du inkludera dem som interna formatmallar i huvudområdet för din sidas HTML-kod. Du kan till och med rikta in dig på 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 stilmallar till samma webbsida. När du har definierat medietypen med de mediefunktioner du vill rikta in dig på anger du hur stilarna ska tillämpas på sidan.

Hur man använder mediafrågor i externa stilmallar i Dreamweaver

Du kan använda mediafrågor med externa stilmallar på två sätt. Det första alternativet är att länka till en extern stilmall med flera uppsättningar stilar åtskilda av mediefrågor. Det är så Dreamweaver länkar stilarna när du skapar en flytande rutnätslayout.

Det andra alternativet är att länka två eller flera separata externa formatmallar till varje HTML-sida och inkludera mediefrågorna i varje formatmall. Hur som helst, koden för CSS och HTML sparas i separata filer, och

taggen förbinder dem.

Oavsett om du sparar alla mediefrågor och relaterade stilar i en fil eller i separata CSS-filer, kan du länka ytterligare stilmallar till vilken HTML-sida som helst. Du kan till exempel inkludera en separat uppsättning stilar i en separat formatmall som är utformad för att formatera sidan när den skickas till en skrivare.

Hur man skapar mediefrågor i Dreamweaver

Du kan skapa hur många mediefrågor du vill i Dreamweaver och du kan inkludera dem i en eller flera CSS-filer. För att skapa en ny mediefråga i Dreamweaver, följ dessa steg:

Öppna CSS Designer-panelen genom att välja Fönster → CSS-stilar.

Välj en befintlig stilmall på panelen Källor eller skapa en ny genom att klicka på plustecknet (+) på panelen Källor.

Klicka på plustecknet (+) i @Media-panelen i CSS Designer-panelen.

Dialogrutan Definiera mediafrågor öppnas.

Välj Media från den första rullgardinsmenyn och Skärm från den andra rullgardinslistan.

Flytta markören till höger om var och en av rullgardinslistorna 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 Media Queries så att du kan ange orienteringen. Det här fältet är valfritt men används ofta om du vill skapa olika mönster för landskaps- och porträttvyer 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.

Notera: Plus- och minustecknen blir endast synliga när du rullar markören över dialogrutans högra sida.

Flytta markören till höger om rullgardinslistorna, klicka på plustecknet en andra gång för att lägga till ett fält och ange ett villkor för minsta bredd.

Fältet Min-bredd visas i dialogrutan Mediafrågor så att du kan ange den minsta bredd som du vill använda för att rikta in frågan. Den minsta bredden är viktig eftersom mediefrågan riktar sig mot stilarna baserat på det minsta till maximala breddintervallet som du anger, som tas upp i 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 villkoret för maximal bredd.

Fältet Max-Width visas i dialogrutan så att du kan ange den maximala bredd som du vill använda för att rikta in frågan.

Klicka på OK.

Dialogrutan Media Queries stängs och mediefrågan genereras och läggs till i stilmall du valde på panelen Källor i panelen CSS Designer.

Upprepa steg 3–8 för att lägga till ytterligare mediefrågor till valfri vald formatmall. Upprepa steg 2–8 om du vill lägga till mediefrågor i en annan stilmall.

Även om du kan spara mediefrågor i så många olika stilmallar som du vill, är det mer effektivt att spara dem alla i en extern stilmall eftersom varje stilmall måste laddas ner separat från servern, vilket kräver mer bandbredd. Att ladda ner en lång stilmall med flera mediefrågor är lite effektivare än att ladda ner flera stilmallar.