Forhåndsvisning HTML-dokumenter på en mobiltelefon, tablet eller bærbar datamaskin i Dreamweaver - dummies

En av de berømte nye funksjonene i Dreamweaver (først introdusert i CS5. 5) er Multiscreen Preview, som fungerer sammen med den interaktive Media Query verktøy i Dreamweaver. Disse verktøyene for Media Query oppretter forskjellige stilark som gjelder avhengig av mediet der en besøkende bruker for å vise nettstedet.

Design av sider som fungerer bra i media, fra store projeksjoner til små skjermer, er en av de store utfordringene i verden av moderne webdesign. Med flere forhåndsvisninger kan du se hvordan et åpent HTML-dokument ser ut i forskjellige medier, for eksempel på en mobiltelefon, en nettbrett, en stasjonær eller en bærbar datamaskin.

Når et HTML-dokument er åpent, kan du se en åpen side i Multiscreen Preview ved å følge disse trinnene:

1Klikk på forhåndsvisningsknappen Multiskjerm i dokumentverktøylinjen, eller velg Vindu → Multiskjerm forhåndsvisning fra dokumentvindu.

Hvis dokumentverktøylinjen ikke er aktiv, velger du Vis → Verktøylinjer → Dokument.

Vinduet for forhåndsvisning av multiskjerm åpnes, med tre visninger.

2For å justere visningsportstørrelsene, klikker du knappen Vis ut størrelser i vinduet Forhåndsvisning av flere skjermer.

Dialogboksen Visportstørrelser åpnes. Du kan redigere verdiene (i piksler) for bredden og høyden der hver av de tre forhåndsvisningsvinduene vises. Figuren viser at telefonvisningen er justert til 480 piksler for å matche størrelsen på populære smarttelefoner.

3Klikk OK i dialogboksen Visportstørrelser.

Du går tilbake til forhåndsvisning av multiskjerm.

4Exit Multiscreen Preview ved å fjerne dette valget i Dreamweaver-dokumentvinduet.

Ikke prøv å redigere innhold i forhåndsvisning av flere forhåndsvisninger. Denne modusen, som Dreamweaver Live View, tillater ikke redigering.