Get up to speed with CSS layouts

[Guest]

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.

[Nadia-P]

This should be linked to in the DW FAQ   🙂

Edit:  Link now added to the Dreamweaver FAQ index

[Sooxzie]

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]

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

[spyteen]

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

[link removed by moderator]

[Guest]

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

[CHunter321]

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]

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

[Magpie0013]

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]

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

[Magpie0013]

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

[Nancy OShea]

If you want to make a career out of building web sites, you need to learn HTML and CSS code.

I think you could learn the basics on your own.  Start by working through the simple tutorials below.

Start learning HTML  - http://w3schools.com/html/default.asp

Start learning CSS -  http://w3schools.com/css/default.asp

Adobe DW isn't free but you you can download the 30-day trial.

http://www.adobe.com/products/dreamweaver/

Free Web Authoring Tools -

Obviously, you get what you pay for.  These are scalled down versions of the for purchase products.

Coffee Cup HTML Editor

http://www.coffeecup.com/free-editor/

NetObjects Fusion Essentials

http://netobjects.com/html/essentials.html

Top Style Lite CSS editor

http://topstyle.en.softonic.com/

Open Source (free) Web Site Systems -

WordPress - http://wordpress.org/

Drupal - http://drupal.org/

Joomla -  http://www.joomla.org/

Hope you get back on your feet real soon!

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