Hur man skapar en layout med en kolumn i Dreamweaver - dummies

Innan du dyker in för att skapa en komplicerad fluidnätdesign i Dreamweaver, överväg att försöka göra en enklare. Börja med att skapa en enkel vätskegridlayout med en kolonn, följ dessa enkla instruktioner:

1. Välj Arkiv → Nytt.

   Fönstret Ny dokument öppnas. Obs! Se till att du har slutfört installationsprocessen innan du börjar arbeta med en ny fluidnätlayout.

2. Välj Fluid Grid Layout från vänster på skärmen.

   Alternativet för nya dokumentfönster ändras till alternativen för fluidnätet.

   

3. Ange antalet kolumner du vill ha i var och en av de tre layouterna.

   För att lägga till eller ta bort kolumner markerar du textfältet över varje kolumn och anger det antal kolumner du vill ha.

4. Ange procenten av webbläsarfönstret som du vill att varje layout ska täcka.

   Markera textfältet under varje layout i sin tur och ange ett tal som representerar den procentandel av det utrymme du vill att layouten ska täcka när designen ses i ett webbläsarfönster. Till exempel är skrivbordslayouten som standard inställd för att ta upp 90 procent av tillgängligt utrymme, men du kan ändra den till 95 procent för att ge dig mer designutrymme och minska marginalutrymmet.

5. Ändra procent av kolumnbredden för att ändra mängden marginalutrymme mellan varje kolumn.

   Som standard anger Dreamweaver varje marginal för att ta upp 25 procent av tillgängligt utrymme.

6. Använd listrutan för att ange en doktyp.

   Som standard skapas vätskegridlayouter med hjälp av HTML5-doktypen. Om du inte behöver ändra doktypen för att vara mer kompatibel med annan formatering som används på din webbplats, är HMTL5 det rekommenderade alternativet för mottagliga webbdesigner.

7. Klicka på Skapa.

   Dialogrutan Spara som öppnas redo för att spara en CSS-fil.

8. Ange ett namn för din CSS-fil och klicka på Spara.

   En ny HTML-fil öppnas i Dreamweaver-arbetsytan, men är ännu inte sparad. Den CSS-fil du namngav sparas och namnet blir synligt i panelen Filer.

   Obs! Till skillnad från processen att skapa andra typer av sidor i Dreamweaver sparas CSS-filen först och HTML-filen sparas i ett senare steg.

9. Välj Arkiv → Spara

   Dialogrutan Spara som öppnas.

10. Ange ett namn för din HTML-fil och klicka på OK.

    Dialogrutan Spara som stängs och ett meddelande visas i Dreamweaver, där du informerar om att din flytnätlayout kräver ytterligare två filer: pannplatta. css och svara. min. js.

11. Klicka på OK för att kopiera pannplattan.css och svara. min. js-filer till din webbplatsmapp.

    Alla tre filerna läggs till i panelen Filer och du återgår till din nyligen namngivna HTML-fil öppen i Dreamweaver-arbetsytan.

    

12. Ge sidan en titel genom att skriva in text i fältet Titel längst upp i arbetsytan.

Och det kompletterar processen med att skapa en ny uppsättning filer för din flytnätlayout.