Hvordan plassere elementer i Dreamweaver for å lage tre layouter i ett flytende rutenett

Det som gjør flytende rutenettoppsett så kraftige, er at du kan endre plasseringen og størrelsen på elementene i Dreamweaver slik at de er arrangert forskjellig for hver av de tre oppsettene, og skaper design som er optimalisert for mobil-, nettbrett- og skrivebordsskjermer. For å endre et elements bredde eller plassering, bruker du Dreamweavers visuelle verktøy.

Slik redigerer du mobiloppsettet i Dreamweaver

Dreamweaver setter opp stilene på en slik måte at de går gjennom hver av de tre layoutene. Det betyr at du bør få mobildesignet slik du vil ha det først. Gå deretter videre til nettbrettoppsettet og endre bare elementene du ønsker skal vises annerledes på nettbrettet. Til slutt, se skrivebordsoppsettet. Igjen, endre bare elementene du vil skal vises annerledes.

Følg disse instruksjonene for å redigere mobiloppsettet.

Velg alternativet Mobilstørrelse nederst på arbeidsområdet.

Arbeidsområdet endres for å vise siden i mobilforhåndsvisningen, formatert med det tilsvarende settet med stiler.

Merk: De tre små ikonene nederst til høyre på arbeidsområdet gir tilgang til forhåndsvisninger for mobil, nettbrett og skrivebord. Når du bytter fra den ene til den andre, endrer du ikke bare størrelsen på visningsområdet, men også det tilsvarende settet med stiler som brukes på siden din.

Legg til tekst og bilder til elementene i ditt flytende rutenettoppsett akkurat som du ville lagt til innhold på en hvilken som helst annen side i Dreamweaver.

Du kan kopiere og lime inn tekst samt bruke HTML-koder og CSS-formatering.

Velg et element i designområdet.

Den tilsvarende CSS-stilen vises i Selectors-panelet, hvor du kan redigere den.

Opprett, rediger og bruk stiler på tekst og bilder som du ville gjort i et annet sidedesign i Dreamweaver.

Stiler du vil bruke på alle tre oppsettene, bør opprettes når mobiloppsettet er valgt, fordi disse stilene vil gjelde for alle tre designene med mindre de overstyres av en annen stil opprettet i nettbrett- eller skrivebordsoppsettet.

Slik redigerer du nettbrettoppsettet i Dreamweaver

Etter at du har fått mobiloppsettet slik du vil ha det, går du videre til oppsettet for nettbrettstørrelsen og redigerer stilene som gjelder for oppsettet.

Følg disse instruksjonene for å redigere nettbrettets layout.

Velg alternativet Nettbrettstørrelse, nederst til høyre i arbeidsområdet.

Arbeidsområdet endres for å vise siden i forhåndsvisningen av nettbrettet, formatert med det tilsvarende settet med stiler.

Velg et element som du vil endre til en kolonne og bruk håndtakene på høyre side for å dra kolonnen til ønsket bredde.

Dreamweaver tilbyr en samling visuelle redigeringsverktøy som gjør det enklere å justere størrelsen og plasseringen av flytende rutenettelementer.

Hvis du drar håndtaket på et flytende rutenettelement fra venstre til høyre, legger du til margrom som tvinger elementet til å holde seg til høyre for oppsettet. Hvis du drar et håndtak fra høyre til venstre, endrer du størrelsen på elementet.

Velg et element med endret størrelse som du vil flytte på, og klikk deretter på Flytt opp en rad-pilen.

Elementet beveger seg opp og justerer seg ved siden av elementet over det.

For å flytte et element ned, klikk på Starter ny rad-pilen.

Merk: Klikk på hvert av de fire ikonene for å skjule et element, flytte det opp eller ned, duplisere eller slette det.

Hvordan redigere skrivebordsoppsettet i Dreamweaver

Etter at du har fått mobil- og nettbrettoppsettene slik du vil ha dem, går du videre til oppsettet for skrivebordsstørrelse og redigerer stilene som gjelder for den største av de tre oppsettene.

Følg disse instruksjonene for å redigere skrivebordsoppsettet.

Velg alternativet Skrivebordsstørrelse nederst til høyre på arbeidsområdet.

Arbeidsområdet endres for å vise siden i skrivebordsforhåndsvisningen, formatert med det tilsvarende settet med stiler.

Velg en Bytt-pil i midten av to elementer for å bytte plassering av de to elementene.

Artikkel1- og Artikkel2-elementene kan byttes ved å klikke på Bytt-pilen mellom dem.

Formater teksten, bildene og andre elementer som ønsket for skrivebordsdesignet.

Alle andre visuelle formateringsalternativer dekket i nettbrettoppsettet er tilgjengelige.

Velg Fil → Lagre alle for å lagre alle filene i det flytende rutenettoppsettet.

Når du redigerer et flytende rutenettoppsett, gjør du endringer i HTML-filen så vel som i et eksternt stilark. Ved å bruke alternativet Lagre alt sikrer du at du har lagret alle nødvendige filer før du forhåndsviser dem eller publiserer nettstedet ditt til en webserver.

Slik bytter du mellom oppsett i Dreamweaver

Det er god praksis å designe flytende rutenettoppsett i denne rekkefølgen: først mobilversjonen, deretter nettbrettversjonen og til slutt desktopversjonen. Du kan imidlertid bytte mellom disse tre oppsettene mens du avgrenser designene dine.

Husk følgende generelle regler og beste fremgangsmåter:

• Flytende rutenettoppsett lages ved hjelp av mediespørringer som fungerer som skillelinjer mellom hvert av stilsettene som formaterer mobil-, nettbrett- og skrivebordsoppsett.

• Når du redigerer stiler, må du passe på at du redigerer stilene som samsvarer med oppsettet du vil jobbe med.

• Hvis du viser de tilsvarende stilene som opprettes automatisk i kodevisning, vil du se at bredder og andre størrelser er spesifisert med fjerde desimal, for eksempel bredde: 48,2758 %. Hvis du endrer disse tallene i kodevisning, vil Dreamweaver ikke lenger automatisk justere dem for deg.

• Når du oppretter stiler som du vil bruke på alle tre oppsettene, velger du først Any Media fra @Media-panelet i CSS Designer-panelet,