Hvordan du lager tilpassede medieforespørsler i Dreamweaver - dummies

Når du oppretter sider ved hjelp av flytgitterlayoutfunksjoner, oppretter Dreamweaver automatisk de tilsvarende medieforespørsler for deg, men du kan lage dine egne tilpassede media spørringer og bruke dem til å målrette dine egne CSS regler.

Medieforespørsler har vært brukt på nettet i mer enn et tiår for andre bruksområder, for eksempel å skape et alternativt sidedesign optimert for utskrift. En medieforespørsel består av en mediatype, for eksempel skjerm eller utskrift (de to vanligste), og et valgfritt uttrykk som kontrollerer bestemte funksjoner, for eksempel høyde eller bredde. De mest brukte medietyper er

• alt: Passer for alle enheter

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

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

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

Slik bruker du stiler til Dreamweaver-sidedesignene dine

Du kan bruke stilark som eksterne filer ved å koble dem eller importere dem, eller du kan inkludere dem som interne stiler i hovedområdet av din HTML-koden til siden. Du kan til og med målrette enheter ved hjelp av inline-stiler - et praktisk alternativ hvis du bare vil bruke en bestemt regel til bestemte enheter.

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

Slik bruker du mediesøk i eksterne stilark i Dreamweaver

Du kan bruke medieforespørsler med eksterne stilark på to måter. Det første alternativet er å koble til et eksternt stilark med flere sett med stiler skilt av medieforespørsler. Det er slik Dreamweaver knytter stilene når du lager et væskenettoppsett.

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

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

Slik lager du medieforespørsler i Dreamweaver

Du kan lage så mange medieforespørsler som du vil i Dreamweaver, og du kan inkludere dem i en CSS-fil eller mange. For å opprette en ny mediesøk i Dreamweaver, følg disse trinnene:

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

2. Velg et eksisterende stilark i panelet Kilder, eller opprett en ny ved å klikke på plustegnet (+) i panelet Kilder.

   

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

   Dialogboksen Define Media Queries åpnes.

4. Velg Media fra den første rullegardinlisten og Skjermbilde fra den andre rullegardinlisten.

   

5. Flytt markøren til høyre for hver rullegardinliste for å få plustegnet å vises, og klikk deretter plustegnet for å legge til et nytt felt.

   Et nytt felt vises i dialogboksen Mediesøk, slik at du kan angi retningen. Dette feltet er valgfritt, men brukes ofte hvis du vil lage forskjellige design for liggende og stående visninger på en nettbrett eller en smarttelefon. Hvis du ikke vil opprette flere oppsett basert på orientering, kan du fjerne dette feltet ved å klikke på minustegnet.

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

6. Flytt markøren til høyre for rullegardinlister, klikk på plustegnet en gang til for å legge til et felt og angi en minimumsbredde.

   Minibreddsfeltet vises i dialogboksen Mediaforespørsler, slik at du kan angi minimumbredden du vil bruke til å målrette spørringen. Minimumbredden er viktig fordi medieforespørselen retter seg mot stilene basert på minimum til maksimal breddeintervall du angir, dekket i neste trinn.

7. Flytt markøren til høyre for rullegardinlistene, klikk på plustegnet en tredje gang for å legge til et felt og angi maksimal breddebetingelse.

   Feltbreddefeltet vises i dialogboksen, slik at du kan spesifisere maksimal bredde du vil bruke til å målrette spørringen.

8. Klikk på OK.

   Dialogboksen Medieforespørsler lukkes og medieforespørselen genereres og legges til stilarket du valgte i panelet Kilder i CSS Designer-panelet.

9. For å legge til flere medieforespørsler til et valgt stilark, gjenta trinn 3-8. For å legge til medieforespørsler til et annet stilark, gjenta trinn 2-8.

Selv om du kan lagre medieforespørsler i så mange forskjellige stilark som 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. Nedlasting av ett langt stilark med flere medieforespørsler er litt mer effektivt enn å laste ned flere stilark.