Sådan oprettes brugerdefinerede medieforespørgsler i Dreamweaver - dummies

Når du opretter sider, der anvender væskeformatlayoutfunktioner, opretter Dreamweaver automatisk de tilsvarende medieforespørgsler for dig, men du kan oprette dine egne brugerdefinerede medieforespørgsler og bruge dem til at målrette mod dine egne CSS-regler.

Medieforespørgsler har været brugt på internettet i mere end et årti til andre anvendelser, såsom oprettelse af et alternativt sidedesign optimeret til udskrivning. En medieforespørgsel består af en medietype, f.eks. Skærm eller udskrivning (de to mest almindelige) og et valgfrit udtryk, der kontrollerer bestemte funktioner, f.eks. Højde eller bredde. De mest anvendte medietyper er

• alt: Passer til alle enheder

• print: Designet til forhåndsvisning og til visning, når en side udskrives

• skærm: Til indhold vist på en skærm

Den håndholdte medietype bruges næsten aldrig mere og blev bedst brugt til mobiltelefoner og andre enheder med små skærme, begrænset båndbredde og monokrome skærme, der kun understøtter bitmappet grafik. iOS-enheder og de fleste smartphones er kategoriseret som skærmmedietyper.

Sådan bruger du stilarter til dine Dreamweaver-sidedesigner

Du kan anvende stilark som eksterne filer ved at forbinde dem eller importere dem, eller du kan inkludere dem som interne stilarter i hovedområdet af din sideens HTML-kode. Du kan endda målrette enheder ved hjælp af inline-stilarter - en praktisk mulighed, hvis du kun vil anvende en bestemt regel på visse enheder.

Du kan bruge en kombination af disse muligheder, og du kan importere eller linke flere eksterne stilark til samme webside. Når du har defineret medietypen med de mediefunktioner, du vil målrette, skal du angive, hvordan stilarterne skal anvendes på siden.

Sådan bruger du medieforespørgsler i eksterne stilark i Dreamweaver

Du kan bruge medieforespørgsler med eksterne stilark på to måder. Den første mulighed er at linke til et eksternt stilark med flere sæt stilarter adskilt af medieforespørgsler. Det er sådan, Dreamweaver forbinder stilarterne, når du opretter et væskeformet layout.

Den anden mulighed er at forbinde to eller flere separate eksterne stilark til hver HTML-side og inkludere medieforespørgsler i hvert stilark. I begge tilfælde gemmes koden for CSS og HTML i separate filer, og taggen forbinder dem.

Uanset om du gemmer alle medieforespørgsler og relaterede stilarter i en fil eller i separate CSS-filer, kan du også linke yderligere stilark til enhver HTML-side. Du kan f.eks. Inkludere et separat sæt stilarter i et separat stilark, der er designet til at formatere siden, når den sendes til en printer.

Sådan oprettes medieforespørgsler i Dreamweaver

Du kan oprette så mange medieforespørgsler som i Dreamweaver, og du kan inkludere dem i en CSS-fil eller mange. Følg disse trin for at oprette en ny medieforespørgsel i Dreamweaver:

1. Åbn CSS Designer-panelet ved at vælge Vindue → CSS-stilarter.

2. Vælg et eksisterende stilark i panelet Kilder eller opret et nyt ved at klikke på plustegnet (+) i panelet Kilder.

   

3. Klik på plustegnet (+) i panelet @Media i CSS Designer panelet.

   Dialogboksen Definer mediesøgninger åbnes.

4. Vælg Medier fra den første rulleliste og Skærm fra den anden rulleliste.

   

5. Flyt markøren til højre for hver rulleliste for at få plustegnet til at blive vist, og klik derefter på plustegnet for at tilføje et nyt felt.

   Der vises et nyt felt i dialogboksen Medieforespørgsler, så du kan angive retningen. Dette felt er valgfrit, men bruges almindeligt, hvis du vil oprette forskellige designs til landskabs- og portrætvisninger på en tablet eller en smartphone. Hvis du ikke vil oprette yderligere layout baseret på orientering, kan du fjerne dette felt ved at klikke på minustegnet.

   Bemærk: Plus- og minustegnene bliver kun synlige, når du ruller markøren over højre side af dialogboksen.

6. Flyt markøren til højre for rullelisterne, klik på plustegnet igen for at tilføje et felt og indtast en minimumsbredde.

   Min-breddefeltet vises i dialogboksen Mediesøgninger, så du kan angive den minimale bredde, du vil bruge til at målrette forespørgslen. Mindste bredde er vigtig, fordi medieforespørgslen retter sig mod stilarterne baseret på det minimale til maksimale breddeinterval, du angiver, dækket i næste trin.

7. Flyt markøren til højre for rullelisterne, klik på plustegnet et tredje gang for at tilføje et felt og indtast den maksimale breddebetingelse.

   Feltet Maksimal bredde vises i dialogboksen, så du kan angive den maksimale bredde, du vil bruge til at målrette forespørgslen.

8. Klik på OK.

   Dialogboksen Medieforespørgsler lukkes, og medieforespørgslen genereres og tilføjes til det stilark, du valgte i panelet Kilder i CSS Designer-panelet.

9. Gentag trin 3-8 for at tilføje yderligere medieforespørgsler til et valgt stilark. Gentag trin 2-8 for at tilføje medieforespørgsler til et andet stilark.

Selvom du kan gemme medieforespørgsler i så mange forskellige stilark, som du vil, er det mere effektivt at gemme dem alle i et eksternt stilark, fordi hvert stilark skal downloades fra serveren separat, hvilket kræver mere båndbredde. At downloade et langt stilark med flere medieforespørgsler er lidt mere effektivt end at downloade flere stilark.