This tutorial covers the process of building a CSS-based layout from scratch using Dreamweaver.

Share & Enjoy


Similar Articles

 

  1. [...] Geoff Blake – CSS Layouts in Dreamweaver [...]

  2. Ian McQuade (Reply) on Thursday December 18, 2008

    Very nice…

  3. new2css (Reply) on Thursday December 18, 2008

    great tutorial and a big help! one final question, how do you center it so the layout falls in the center of the webpage and not to the side in firefox and internet explorer?

  4. Roxana (Reply) on Thursday December 18, 2008

    Please, a 3 column layout.
    Merry Christmas – Happy Hannukah!
    Rox

  5. Roxana (Reply) on Thursday December 18, 2008

    Sorry. I forgot to thank you. I love your tutorials!!! I have read CSS books and still couldn’t get the positioning right, but with your tutorial I finally understood it.

    However, I still have troubles positioning the nested divs, so could you please finish your tutorial?

    You missed the positioning of the nav, etc., the nested divs inside the header.

    Again, thank you sooo much for your tutorials!

  6. chris (Reply) on Thursday December 18, 2008

    Big mistake showing an absolute positioned layout to beginners. AP layouts are fine if you know your content is never going to grow past the 440 fixed height of the content div, but if it does then you have to reposition everything below it. You make it sound so easy to layout a basic site, but with AP you know this can get messy very fast. You should have explained this at the beginning of your tutorial in my opinion.

  7. josh (Reply) on Thursday December 18, 2008

    do you have to use CS4 to do this

  8. Darryl (Reply) on Thursday December 18, 2008

    new2css,
    body{margin:0;padding:0;}

    You can do it in cs3 just slight differences, josh.

    Again, this is just one method to start getting peoples heads around how you can create a layout, its not meant for every situation, but again thats not the scope of the tutorial. Thanks for sharing.

  9. Dzash (Reply) on Thursday December 18, 2008

    I agree with Chris…AP is a bad place to start. The output is bound to generate frustration and there’s no quick fix once the layout is filled with content. Or is there???

    To Josh – I followed along perfectly with CS3

  10. Rich (Reply) on Thursday December 18, 2008

    Are there more tutorials by Mr. Blake available?

  11. James (Reply) on Thursday December 18, 2008

    When using ap divs on any computer screen no matter the size they are the same number of pixles from the left side causing some issues can you help me to understand better the point of using css im kinda a newbie at this i usually use flash to make my websites

  12. willis (Reply) on Thursday December 18, 2008

    Wow what a help this was, thank you.

  13. ghoyho (Reply) on Thursday December 18, 2008

    very, very good…(muy bueno, me sirvio mucho para iniciarme en dreamweaver)

  14. Michael (Reply) on Thursday December 18, 2008

    Ian: centering the divs is actually quite easy, just skip the absolutely positioned stuff. and add the following CSS to each div:
    clear: both; /* Keeps the elements vertical */
    margin: 5px auto; /* The 5px is top and bottom, the auto centers horizontal */

  15. Charles Lindauer (Reply) on Thursday December 18, 2008

    I can’t see any video on this page… I have the latest QuickTime and Flash Player… Is it just me?

  16. d (Reply) on Thursday December 18, 2008

    were is it

  17. Joe.B (Reply) on Thursday December 18, 2008

    Nice and simple.
    1260 is your page width.
    990 is your Header Footer Etc.
    1260 – 990 = 135
    change to L (0px)on the Header Footer Etc to 135px
    Great tutorial.

    JB

  18. Rebecca (Reply) on Thursday December 18, 2008

    Thank you for this tutorial! I’m learning Dreamweaver on my own and this was an excellent explanation on how to create a layout.

  19. bruce (Reply) on Thursday December 18, 2008

    you are good! Thank you.

  20. Victoria (Reply) on Thursday December 18, 2008

    Simple and to the point. This tutorial helped me get over my dreamweaver block a bit by just doing it. Thanks bunches!

  21. Brett (Reply) on Thursday December 18, 2008

    Just got dreamweaver with the cs4 design suite, i had always been a skeptic of wysiwyg’s, but decided since i bought it i better learn to use it. First tutorial, and excellent. Very descriptive and easy to follow even without watching the screen.

  22. Jennifer (Reply) on Thursday December 18, 2008

    This was a wonderful tutorial. Just tremendous. Could you please complete it with all the added fill-ins.

    Thanks so much for what you have shown so far.

  23. Mónica (Reply) on Thursday December 18, 2008

    Thanks!!!

    Very usefull!!!

  24. satu (Reply) on Thursday December 18, 2008

    Very useful for biginners!

  25. smic03 (Reply) on Thursday December 18, 2008

    I was able to follow with CS3 very easily as well! This is a great tutorial for helping the brain move in the CSS direction! Thank you thank you!

  26. angel (Reply) on Thursday December 18, 2008

    Thanks great tutorial!!!!!!!!!!
    Thanks GREAT

  27. user10 (Reply) on Thursday December 18, 2008

    This is an excellent tutorial for those unfamiliar with css. Great job!

  28. Emily (Reply) on Thursday December 18, 2008

    Tried this with CS4 but there is no “Advanced Selector Type” so I used “ID (Applies to only one HTML element).”

    My content (an swf) centers horizontally, but NOT VERTICALLY, does anyone else have this problem and is there a solution?

    Thanks,
    Emily

  29. rashmi (Reply) on Thursday December 18, 2008

    Thanks great tutorial!!!!!!!!!!

  30. Oliver (Reply) on Thursday December 18, 2008

    thanks! very clear and helpful.

  31. Leslie Schlak (Reply) on Thursday December 18, 2008

    Thanks!! I knew most of it, but it’s all what i’ve taught myself, this and another of your videos helped out A LOT!! now I can get building!!

  32. Julie (Reply) on Thursday December 18, 2008

    Is there any way of centering the whole page? I have done my divs separately as you did.
    Thanks

  33. Gabe (Reply) on Thursday December 18, 2008

    So VERY VERY EASY!!!
    Thanks

  34. Mhar (Reply) on Thursday December 18, 2008

    wow! fantastic!
    hats off …………………… Geoff!

    Thanks

  35. Igor (Reply) on Thursday December 18, 2008

    Hello;this is wrong information!!
    When this site is seen on a different size screen,the layout will move to the right.
    You may never use position:absolute.
    Very bad!!

  36. Rob (Reply) on Thursday December 18, 2008

    I have to agree with Chris and the others….I don’t mean to come across negative, but using the “Draw AP Div” tool is a really disruptive way of creating CSS layouts. Absolute positioning is something you want to use sparingly, not for every DIV. When you do apply AP to every DIV, you run into problems.

    I appreciate the time this author took to create this layout, but I think there are better ways of handling this.

    I prefer working solely in CODE view and forget doing CSS in Design view. You learn more in Code view!

    Thanks,
    Rob

  37. linda (Reply) on Thursday December 18, 2008

    testing comments again

  38. Cristian Dorobantescu (Reply) on Thursday December 18, 2008

    Interesting tutorial!

  39. Extend Studio (Reply) on Thursday December 18, 2008

    You can have a look as well at Flexi CSS Layouts – a Dreamweaver Extension that help you create Css layouts in Dreamweaver without coding.



Planet Photoshop Photoshop World KelbyOne Lightroom Killer Tips Scott Kelby