Hvordan du lager et en-kolonne fluidutslippsoppsett i Dreamweaver

Før du dykker inn i å lage et komplisert fluidnettdesign i Dreamweaver, bør du vurdere å prøve en enklere. Begynn med å opprette en enkel, en kolonne væskenett layout, følg disse enkle instruksjonene:

1. Velg Arkiv → Nytt.

   Vinduet Ny dokument åpnes. Merk: Pass på at du har fullført installasjonsprosessen for nettstedet før du begynner å jobbe med et nytt flytnettoppsett.

2. Velg Fluid Grid Layout fra venstre side av skjermen.

   Alternativer for det nye dokumentvinduet endres til alternativer for væskenettet.

   

3. Angi antall kolonner du vil ha i hver av de tre layoutene.

   For å legge til eller fjerne kolonner, velg tekstfeltet over hver kolonne og skriv inn antall kolonner du vil ha.

4. Angi prosentandelen av nettleservinduet du ønsker at hvert layout skal dekke.

   Velg tekstfeltet under hvert layout i tur og skriv inn et tall som representerer prosentandelen plass du vil at layoutet skal dekke når designet vises i et nettleservindu. For eksempel er skrivebordslayouten som standard satt til å ta opp 90 prosent av ledig plass, men du kan endre den til 95 prosent for å gi deg mer designplass og redusere margarommet.

5. Endre prosent av kolonnebredde for å endre mengden av margin mellom hver kolonne.

   Som standard angir Dreamweaver hver margin for å ta opp 25 prosent av ledig plass.

6. Bruk rullegardinlisten til å angi en doktype.

   Som standard opprettes flytnettgrensesnitt ved hjelp av HTML5-doktypen. Med mindre du trenger å endre doktypen for å være mer kompatibel med annen formatering brukt på nettstedet ditt, er HMTL5 det anbefalte alternativet for responsive webdesign.

7. Klikk på Opprett.

   Dialogboksen Lagre som åpnes klar til å lagre en CSS-fil.

8. Skriv inn et navn for CSS-filen din og klikk på Lagre.

   En ny HTML-fil åpnes i Dreamweaver-arbeidsområdet, men er ikke lagret ennå. CSS-filen du navngitte er lagret og navnet blir synlig i Filer-panelet.

   Merk: I motsetning til prosessen med å lage andre typer sider i Dreamweaver lagres CSS-filen først, og HTML-filen lagres i et senere trinn.

9. Velg Arkiv → Lagre

   Dialogboksen Lagre som åpnes.

10. Skriv inn et navn for HTML-filen din, og klikk OK.

    Dialogboksen Lagre som lukkes, og et varsel vises i Dreamweaver, og informerer deg om at flytgrensesnittoppsettet krever to tilleggsfiler: boilerplate. css og svare. min. js.

11. Klikk på OK for å kopiere kjeleplaten.css og svare. min. js-filer til webområdet ditt.

    Alle tre filene legges til i panelet Filer, og du går tilbake til den nylig oppkalte HTML-filen som er åpen i Dreamweaver-arbeidsområdet.

    

12. Gi siden en tittel ved å skrive inn tekst i feltet Tittel øverst på arbeidsområdet.

Og det fullfører prosessen med å lage et nytt sett med filer for ditt flytnettoppsett.