Skip to main content
September 16, 2009
Question

Get up to speed with CSS layouts

  • September 16, 2009
  • 5 replies
  • 28834 views

The documentation team at Adobe gets a lot (and I mean A LOT) of queries about CSS layouts -- what are they, how do they work, where do I go to start? So I've put together a list of some of the best resources out there in the hopes of spreading the educational word. For those of you who blog, write, or tweet about this issue, please publicize these resources as much as possible so that more people can find them. Also feel free to add to this list if you think there are any resources that I've missed.

From table-based to tableless web design (ADOBE)

Popular two-part tutorial series on building a CSS layout from scratch, and converting table-based layouts to pure CSS.

CSS page layout basics (ADOBE)

Explanation of a basic CSS layout that breaks down the structure and rules that create the layout.

Creating a CSS layout from scratch (SUBCIDE) An older but still quite useful step-by-step tutorial on creating a CSS layout.

Building your first CSS site (ADOBE) Steps beginners through the process of defining structural elements and then styling them.

Tableless layouts with Dreamweaver CS4 (ADOBE) Shows you how to create a simple two-column CSS layout.

Creating a simple three-column design (ADOBE) Shows you how to build a three-column design, including using the "faux column" technique

Dreamweaver CSS starter layouts (ADOBE) An article written for Dreamweaver CS3, but still useful as the starter layouts did not change in CS4.

Create a page with a CSS layout (ADOBE) The Dreamweaver CS4 Help doc equivalent to the above starter layouts article.

CSS layout (HTML SOURCE) A popular article describing many of the most common terms and principles used for CSS layouts.

In Search of the Holy Grail (A LIST APART) Elegant article on creating the "holy grail" of CSS layouts: the three-column, fixed-width sidebars, liquid center.

    This topic has been closed for replies.

    5 replies

    Participant
    May 21, 2010

    How do I know if the Dream Weaver Version I have is up to date?.

    I have DW 8 I got it wayback and just started using it in the last year.

    I lost the box and key and have no idea how to check it and update it.

    BTW I have searched but could not find the help I need.

    Prepare for lots of stupid questions.

    Thanks In Advance

    Nancy OShea
    Community Expert
    Community Expert
    May 21, 2010

    This isn't a CSS question, but I'll try to answer you.

    DW8 is several years old now.  There have been 3 new product releases since DW8 came out (CS3, CS4 and the current version which is CS5).

    Adobe does not issue updates on old software.

    The last update issued was DW 8.02.

    If you don't have the last update, you can get it here.

    http://www.adobe.com/support/dreamweaver/downloads_updaters.html

    HOW TO FIND MY VERSION & SERIAL #?

    ----------------------------------------------------

    In DW, click on Help > About.

    When the box begins to scroll, click inside it.

    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb
    http://alt-web.blogspot.com

    Nancy O'Shea— Product User & Community Expert
    Participant
    May 22, 2010

    Thank you VERY much Nancy

    I need to learn coding but after 7 years after a major injury I cant

    seam to learn alone online. If I where to go to my local

    community college what would I start with for classes. I have gone

    their before but because I am old I never get very far. If I know what

    class to look for then I could bypass the admins at the school

    Do I look for web design classes.

    A note I am in to the Internet after a serious accident.

    Any ideas how I can move forward without any money?

    I do really appreciate you taking the time to contact me!!

    Billy Grant   - TY

    April 9, 2010

    How can i find the Chinese version of this? For me, it's very difficult to read English!

    Participant
    September 10, 2011

    Hi There!

    You may have already found a version in Chinese but if not, you can copy sections and past into this translator to generate the text in Chinese:

    http://www.freetranslation.com/.

    Good luck Songfachen.   Chris  

    federicom985
    Participant
    May 15, 2012

    I would like some kind of collaboration bewtween dreamweaver and Wordpress.. http://www.eufemoweb.com

    Participant
    March 10, 2010

    CS4 for CSS support new CSS3 ? and CS4 layout call dot'n my toolbar

    [link removed by moderator]

    Participant
    November 22, 2009

    Atthe risk of sounding too green, you should define CSS, which is an acronym, the first time you use it.  I have little web design experience and have no idea what it means.  You should always define an acronym in parantheses the first time it is used.

    Now, what the hell does CSS mean?

    Nancy OShea
    Community Expert
    Community Expert
    November 22, 2009

    CSS = Cascading Style Sheets.  It's used to style your  HTML content.

    HTML = hypertext mark-up language.

    For more on these and other web terms, start here:

    HTML & CSS Tutorials - http://w3schools.com/

    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    www.alt-web.com/
    www.twitter.com/altweb
    www.alt-web.blogspot.com

    Nancy O'Shea— Product User & Community Expert
    Nadia-P
    Inspiring
    September 16, 2009

    This should be linked to in the DW FAQ   :-)

    Edit:  Link now added to the Dreamweaver FAQ index