Användarhandbok Avbryt

Responsiv design med flytande stödrasterlayouter

Sök

Senast uppdaterad den 18 feb. 2022

Vill du skapa responsiva webbplatser för flera skärmar? Lär dig hur du använder flytande stödraster i Dreamweaver för att utforma webbplatser för mobila enheter och datorer.

Layouten på en webbplats måste anpassa sig till dimensionerna för den enhet som den visas på (responsiv design). En flytande stödrasterlayout ger en visuell möjlighet att skapa olika layouter som passar de olika enheter webbplatsen visas på.

Din webbplats kommer kanske att visas på stationära datorer, surfplattor och mobiltelefoner. Du kan använda flytande stödrasterlayouter och ange olika layouter för varje typ av enhet. Beroende på om webbplatsen sedan visas på en stationär dator, en surfplatta eller en mobiltelefon, används den layout som motsvarar den enheten för att visa webbplatsen.

Mer information: Adaptiv layout och responsiv layout

Inspektionsläget är inte tillgängligt för dokument med flytande stödrasterlayout.

Skapa en flytande stödrasterlayout

Du kan redigera befintliga layouter med flytande stödraster i Dreamweaver 2017, men du kan inte skapa flytande stödrasterlayouter.

Använd i stället bootstrap för att skapa responsiva layouter i Dreamweaver 2017. Mer information om Bootstrap finns i Arbeta med Bootstrap-filer.

Välj Fil > Flytande stödraster (äldre).
Standardvärdet för antalet kolumner i stödrastret visas mitt i mediatypen. Om du vill anpassa antalet kolumner för en viss enhet redigerar du det värdet.
Om du vill ställa in bredden på sidan i relation till skärmstorleken ställer du in värdet i procent.
Ett alternativ är att ändra bredden på fästmarginalerna. Fästmarginalen är avståndet mellan två kolumner.
Ange CSS-alternativen för sidan.

När du klickar på Skapa ombeds du ange en CSS-fil. Du kan göra något av följande:
- Skapa en ny CSS-fil.
- Öppna en befintlig CSS-fil.
- Ange CSS-filen som öppnas som en CSS-fil för flytande stödraster.
Som standard visas det flytande stödrastret för mobiltelefoner. Även Infoga-panelen för flytande stödraster visas. Använd alternativen på Infoga-panelen och skapa din layout.

Om du vill börja designa layouten för en annan enhet klickar du på motsvarande ikon i alternativen nedanför designvyn.
Spara filen. När du skapar HTML-filen ombeds du spara de beroende filerna, till exempel boilerplate.css och reslpond.min.js, på en plats på datorn. Ange en plats och klicka på Kopiera.

Filen boilerplate.css är baserad på HTML5-textinnehållet. Den är en uppsättning CSS-format som ser till att din webbsida återges på ett konsekvent sätt på olika enheter. respond.min.js är ett JavaScript-bibliotek som ger stöd för mediafrågor i äldre versioner av webbläsare.

Redigera dokument med flytande stödraster

Du kan redigera dokument med flytande stödraster direkt i Live-vyn om du vill:

Associera HTML-klasser och id:n med element. Mer information finns i Elementvisning.
Redigera bildattribut och text. Mer information finns i Snabbegenskapskontroll och Redigera text direkt i Live-vyn.
Infoga nya element. Mer information finns i Infoga flytande stödrasterelement.

Du kan också visualisera HTML DOM-strukturen för dokument med flytande stödraster med elementsnabbvyn.

Infoga flytande stödrasterelement

På panelen Infoga (Fönster > Infoga) visas de element som kan användas i en flytande stödrasterlayout. När du infogar elementen kan du välja att infoga dem som flytande element.

Klicka på de element du vill infoga på panelen Infoga.
Klicka på Före, Efter eller Kapsla i dialogrutan som visas för att placera elementet i förhållande till referenselementet som är markerat i dokumentet.
Välj en klass eller ange ett värde för id:t. I menyn Klass visas klasserna ur den CSS-fil som du angav när du skapade sidan.
Markera kryssrutan Infoga som flytande element.

När du väljer ett infogat element visas alternativen för att dölja, duplicera eller ta bort Div-elementet. För Div-element som ligger i lager på varandra visas alternativet att växla Div-element.

Alternativ	Beskrivning
Växla Div	Växlar det element som är markerat med elementet ovanför eller nedanför.
Dölj	Döljer elementet. Visa ett element genom att göra något av följande: Visa id-väljare genom att ändra visningsegenskapen i CSS-filen till block. (display:block) Visa klassväljare genom att ta bort den tillämpade klassen (hide_<MediaType>) i källkoden.
Flytta upp en rad	Flyttar upp elementet en rad.
Duplicera	Duplicerar det markerade elementet. CSS som länkar till elementet dupliceras också.
Ta bort	Tar bort såväl HTML som CSS för id-väljare. Om du bara vill ta bort HTML trycker du på Ta bort. För klassväljare tas endast HTML bort.
Justera	För klassväljare fungerar alternativet Justera som nollmarginalknapp. För id-väljare justeras elementet till stödrastret med justeringsknappen.

Obs!

Det går att stega sig igenom elementen på en sida med upp- och nedpiltangenterna. Markera elementets kant och tryck sedan på piltangenten.

Kapsling av element

Om du vill kapsla flytande element inuti andra flytande element ska du se till att fokus är på det överordnade elementet. Infoga sedan det underordnade element som du vill ha.

Det finns också stöd för kapslad duplicering. Kapslad duplicering duplicerar HTML-koden (för det markerade elementet) och genererar den relevanta flytande CSS-koden. Absoluta element i det markerade elementet positioneras på rätt sätt. Kapslade element kan också dupliceras med knappen Duplicera.

När du tar bort ett överordnat element tas också den CSS som motsvarar elementet, dess underordnade element och tillhörande HTML bort. Kapslade element kan också tas bort med knappen Ta bort (Kortkommando: Ctrl+Delete).