Hvordan lage tilpassede mediespørringer i Dreamweaver

Når du oppretter sider ved hjelp av funksjoner for flytende rutenettoppsett, oppretter Dreamweaver automatisk de tilsvarende mediespørringene for deg, men du kan lage dine egne tilpassede mediespørringer og bruke dem til å målrette mot dine egne CSS-regler.

Medieforespørsler har vært i bruk på nettet i mer enn et tiår for annen bruk, for eksempel å lage et alternativt sidedesign optimalisert for utskrift. En mediespørring består av en medietype, for eksempel skjerm eller utskrift (de to vanligste), og et valgfritt uttrykk som sjekker etter spesielle funksjoner, for eksempel høyde eller bredde. De mest brukte medietypene er

• alle: Passer for alle enheter

• print: Designet for forhåndsvisning og for visning når en side skrives ut

• skjerm: For innhold som vises på en hvilken som helst skjerm

Den håndholdte medietypen brukes nesten aldri lenger og ble best brukt bare for mobiltelefoner og andre enheter med små skjermer, begrenset båndbredde og monokrome skjermer som kun støtter punktgrafikk. iOS-enheter og de fleste smarttelefoner er kategorisert som skjermmedietyper.

Slik bruker du stiler på Dreamweaver-sidedesignene dine

Du kan bruke stilark som eksterne filer ved å koble dem til eller importere dem, eller du kan inkludere dem som interne stiler i hoderegionen til sidens HTML-kode. Du kan til og med målrette mot enheter ved hjelp av innebygde stiler - et nyttig alternativ hvis du vil bruke en spesifikk regel bare på bestemte enheter.

Du kan bruke en kombinasjon av disse alternativene, og du kan importere, eller koble, flere eksterne stilark til samme nettside. Etter at du har definert medietypen med mediefunksjonene du vil målrette mot, spesifiserer du hvordan stilene skal brukes på siden.

Hvordan bruke mediespørringer i eksterne stilark i Dreamweaver

Du kan bruke mediespørringer med eksterne stilark på to måter. Det første alternativet er å koble til ett eksternt stilark med flere sett med stiler atskilt med mediespørringer. Det er slik Dreamweaver kobler sammen stilene når du lager et flytende rutenettoppsett.

Det andre alternativet er å koble to eller flere separate eksterne stilark til hver HTML-side og inkludere mediespørringene i hvert stilark. Uansett, koden for CSS og HTML lagres i separate filer, og

tag kobler dem sammen.

Enten du lagrer alle mediespørringer og relaterte stiler i én fil eller i separate CSS-filer, kan du koble flere stilark til en hvilken som helst HTML-side også. Du kan for eksempel inkludere et eget sett med stiler i et eget stilark som er utformet for å formatere siden når den sendes til en skriver.

Hvordan lage mediespørringer i Dreamweaver

Du kan lage så mange mediespørringer du vil i Dreamweaver, og du kan inkludere dem i én eller flere CSS-filer. Følg disse trinnene for å opprette en ny mediespørring i Dreamweaver:

Åpne CSS Designer-panelet ved å velge Vindu → CSS-stiler.

Velg et eksisterende stilark i Kilder-panelet, eller lag et nytt ved å klikke på plusstegnet (+) i Kilder-panelet.

Klikk på plusstegnet (+) i @Media-panelet i CSS Designer-panelet.

Dialogboksen Definer mediespørringer åpnes.

Velg Media fra den første rullegardinlisten og Skjerm fra den andre rullegardinlisten.

Flytt markøren til høyre for hver av rullegardinlistene for å få plusstegnet til å vises, og klikk deretter på plusstegnet for å legge til et nytt felt.

Et nytt felt vises i dialogboksen Media Queries slik at du kan spesifisere retningen. Dette feltet er valgfritt, men brukes ofte hvis du vil lage forskjellige design for landskaps- og portrettvisninger på et nettbrett eller en smarttelefon. Hvis du ikke vil lage flere oppsett basert på orientering, kan du fjerne dette feltet ved å klikke på minustegnet.

Merk: Pluss- og minustegnene blir kun synlige når du ruller markøren over høyre side av dialogboksen.

Flytt markøren til høyre for rullegardinlistene, klikk på plusstegnet en gang til for å legge til et felt, og angi en minimumsbreddebetingelse.

Min-bredde-feltet vises i dialogboksen Media Queries slik at du kan spesifisere minimumsbredden du vil bruke for å målrette søket. Minimumsbredden er viktig fordi mediespørringen retter seg mot stilene basert på minimum til maksimum breddeområde du angir, dekket i neste trinn.

Flytt markøren til høyre for rullegardinlistene, klikk på plusstegnet en tredje gang for å legge til et felt, og angi betingelsen for maksimal bredde.

Max-Width-feltet vises i dialogboksen slik at du kan spesifisere den maksimale bredden du vil bruke for å målrette søket.

Klikk OK.

Dialogboksen Mediespørringer lukkes og mediespørringen genereres og legges til stilarket du valgte i Kilder-panelet i CSS Designer-panelet.

For å legge til flere mediespørringer til et valgt stilark, gjenta trinn 3–8. For å legge til mediespørringer i et annet stilark, gjenta trinn 2–8.

Selv om du kan lagre mediespørringer i så mange forskjellige stilark du vil, er det mer effektivt å lagre dem alle i ett eksternt stilark fordi hvert stilark må lastes ned fra serveren separat, og krever mer båndbredde. Å laste ned ett langt stilark med flere mediespørringer er litt mer effektivt enn å laste ned flere stilark.