Flytande stödrasterlayouter (CC)

Sök

Senast uppdaterad den 2 maj 2021

Layouten på en webbplats måste anpassa sig till dimensionerna för den enhet som den visas på. Flytande stödrasterlayouter är ett visuellt sätt att skapa olika layouter som passar för de olika enheter som 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 visavi responsiv layout

Dreamweaver 12.2 Creative Cloud innehåller många förbättringar av layout med flytande stödraster, t.ex. stöd för strukturella HTML 5-element och enkel redigering av kapslade element. Klicka här för en översikt över den fullständiga listan med förbättringar.

Obs!

Inspektionsläget för dokument med flytande stödrasterlayout är inte tillgängligt i Dreamweaver 13.1 och senare.

Använda flytande stödrasterlayouter

Se den här videosjälvstudiekursen om du vill lära dig att använda flytande stödrasterlayouter: Utforska flytande stödrasterlayouter.

Skapa en flytande stödrasterlayout

Välj Arkiv > Ny flytande stödrasterlayout.
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.

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.

Markera de element du vill infoga på panelen Infoga.
I den dialogruta som visas ska du välja 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, låsa eller ta bort Div-elementet. För Div-element som ligger i lager på varandra visas alternativet att växla Div-element.

Alternativ	Etikett	Beskrivning
A	Växla Div	Växlar det element som är markerat med elementet ovanför eller nedanför.
B	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. (visa:block) Visa klassväljare genom att ta bort den tillämpade klassen (hide_<MediaType>) i källkoden.
C	Flytta upp en rad	Flyttar upp elementet en rad.
D	Duplicera	Duplicerar det markerade elementet. CSS som länkar till elementet dupliceras också.
E	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.
F	Lås	Omvandlar elementet till ett element med en absolut position.
G	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 de flytande elementen på en sida med vänster och höger piltangent. 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).