Hur man placerar element i Dreamweaver för att skapa tre layouter i ett flytande rutnät

Det som gör flytande rutnätslayouter så kraftfulla är att du kan ändra positionen och storleken på element i Dreamweaver så att de arrangeras olika för var och en av de tre layouterna, vilket skapar design som är optimerad för mobila, surfplattor och stationära skärmar. För att ändra ett elements bredd eller position använder du Dreamweavers visuella verktyg.

Hur man redigerar mobillayouten i Dreamweaver

Dreamweaver ställer in stilarna på ett sådant sätt att de går igenom var och en av de tre layouterna. Det betyder att du bör få mobildesignen som du vill ha den först. Gå sedan vidare till surfplattans layout och ändra bara de element som du vill ska se annorlunda ut på surfplattan. Slutligen, se skrivbordslayouten. Återigen, ändra bara de element som du vill ska visas annorlunda.

För att redigera mobillayouten, följ dessa instruktioner.

Välj alternativet Mobilstorlek längst ned på arbetsytan.

Arbetsytan ändras för att visa sidan i mobilförhandsgranskningen, formaterad med motsvarande uppsättning stilar.

Obs: De tre små ikonerna längst ner till höger på arbetsytan ger åtkomst till förhandsvisningar av mobil, surfplatta och skrivbord. När du byter från den ena till den andra ändrar du inte bara storleken på visningsområdet utan också motsvarande uppsättning stilar som tillämpas på din sida.

Lägg till text och bilder till elementen i din flytande rutnätslayout precis som du skulle lägga till innehåll på alla andra sidor i Dreamweaver.

Du kan kopiera och klistra in text samt använda HTML-taggar och CSS-formatering.

Välj ett element i designområdet.

Motsvarande CSS-stil visas i panelen Väljare, där du kan redigera den.

Skapa, redigera och tillämpa stilar på text och bilder som du skulle göra i vilken annan siddesign som helst i Dreamweaver.

Stilar som du vill tillämpa på alla tre layouterna bör skapas när den mobila layouten är vald eftersom dessa stilar kommer att tillämpas på alla tre designerna om de inte åsidosätts av en annan stil som skapats i surfplattan eller skrivbordslayouterna.

Hur man redigerar surfplattans layout i Dreamweaver

När du har fått den mobila layouten som du vill ha den, gå vidare till layouten för surfplattans storlek och redigera de stilar som gäller för den layouten.

Följ dessa instruktioner för att redigera surfplattans layout.

Välj alternativet Tablettstorlek längst ned till höger på arbetsytan.

Arbetsytan ändras för att visa sidan i surfplattans förhandsvisning, formaterad med motsvarande uppsättning stilar.

Välj ett element som du vill ändra till en kolumn och använd handtagen på höger sida för att dra kolumnen till önskad bredd.

Dreamweaver tillhandahåller en samling visuella redigeringsverktyg som gör det enklare att justera storleken och placeringen av flytande rutnätselement.

Om du drar handtaget på ett flytande rutnätselement från vänster till höger, lägger du till marginalutrymme som tvingar elementet att stanna till höger om layouten. Om du drar ett handtag från höger till vänster ändrar du storleken på elementet.

Välj ett element med ändrad storlek som du vill flytta om och klicka sedan på pilen Flytta upp en rad.

Elementet flyttas upp och riktar sig intill elementet ovanför det.

För att flytta ett element nedåt, klicka på pilen Startar ny rad.

Obs! Klicka på var och en av de fyra ikonerna för att dölja ett element, flytta det uppåt eller nedåt, duplicera eller ta bort det.

Hur man redigerar skrivbordslayouten i Dreamweaver

När du har fått mobil- och surfplattans layouter som du vill ha dem, gå vidare till skrivbordsstorlekslayouten och redigera stilarna som gäller för den största av de tre layouterna.

Följ dessa instruktioner för att redigera skrivbordslayouten.

Välj alternativet Skrivbordsstorlek längst ned till höger på arbetsytan.

Arbetsytan ändras för att visa sidan i skrivbordsförhandsgranskningen, formaterad med motsvarande uppsättning stilar.

Välj en Bytspil i mitten av två element för att byta positioner för de två elementen.

Elementen Artikel1 och Artikel2 kan bytas ut genom att helt enkelt klicka på Bytspilen mellan dem.

Formatera texten, bilderna och andra element enligt önskemål för skrivbordsdesignen.

Alla andra visuella formateringsalternativ som täcks av surfplattans layout är tillgängliga.

Välj Arkiv → Spara alla för att spara alla filer i den flytande rutnätslayouten.

När du redigerar en flytande rutnätslayout, gör du ändringar i HTML-filen såväl som i en extern stilmall. Genom att använda alternativet Spara alla säkerställer du att du har sparat alla nödvändiga filer innan du förhandsgranskar dem eller publicerar din webbplats på en webbserver.

Hur man växlar mellan layouter i Dreamweaver

Det är god praxis att designa flytande rutnätslayouter i denna ordning: först mobilversionen, sedan surfplattaversionen och slutligen stationärversionen. Du kan dock växla mellan dessa tre layouter när du förfinar dina mönster.

Tänk på följande allmänna regler och bästa praxis:

• Flytande rutnätslayouter skapas med hjälp av mediefrågor som fungerar som avdelare mellan var och en av uppsättningarna av stilar som formaterar layouterna för mobil, surfplatta och skrivbord.

• När du redigerar stilar måste du se till att du redigerar de stilar som motsvarar den layout du vill arbeta med.

• Om du visar motsvarande stilar som skapas automatiskt i kodvy, kommer du att se att bredder och andra storlekar anges med fjärde decimalkomma, till exempel bredd: 48,2758 %. Om du ändrar dessa nummer i kodvyn kommer Dreamweaver inte längre att justera dem automatiskt åt dig.

• När du skapar stilar som du vill tillämpa på alla tre layouterna, välj först Alla media från panelen @Media i panelen CSS Designer,