Oprettelse af et 3 Kolonner Fast CSS Layout
I denne tutorial vil vi bruge Flexi CSS layouts Dreamweaver udvidelse at skabe en enkel 3 kolonner CSS layout med en fast bredde. Layoutet vil have et sidehoved og sidefod og indholdet del vil blive delt i 3 kolonner. Brug af Flexi CSS layout udvidelse, vil layoutet ser det samme i alle større browsere
Krav til denne tutorial:.
Flexi CSS layout er en nem at bruge Dreamweaver udvidelse, som hjælper dig med at oprette table-mindre HTML-layouts uden kodning, på mindre end 5 minutter. Du kan blot oprette sidestrukturen direkte fra grænsefladen og udvidelsen vil automatisk oprette divs og CSS til dit layout. Eller vælge fra en bred vifte af indlejrede skabeloner til dit layout, derefter tilpasse layoutet med dine egne CSS regler.
Før du åbner Flexi CSS layout, skal du downloade og installere denne Dreamweaver forlængelse.
For at downloade udvidelsen, gå til theproduct pageand downloade en gratis prøveversion, eller hvis du har købt produktet, kan du finde download Linkin din konto på Extend Studio stedet.
Når du har downloadet Flexi CSS layout kit, skal du installere Dreamweaver forlængelse. Åbn arkiv og dobbeltklikke på .mxp filen og Adobe Extension Manager skal åbne og installere det automatisk. Eller du kan udpakke arkivet, skal du åbne Adobe Extension Manager og vælg installere. Så søg den mappe, hvor du har pakket den .mxp filen og klik på Åbn.
Når du gjorde disse trin, åbne Dreamweaver, gå til Indsæt panel (tryk på CTRL + F2), find fanen Flexi CSS layouts og pressInsert Fuld Sidelayout . Se billedet nedenfor:
Indsæt Fuld side layout
Efter Flexi Layouts interfacet åbner op, vil du se et popup-vindue, hvor du skal indstille layoutet vigtigste egenskaber. Indstil bredden til 960px, layout align center og ingen baggrundsfarve. Som en bedste praksis, indstille CSS regler, der skal skrives til en ekstern CSS-fil.
Op