• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Get up to speed with CSS layouts

Guest
Sep 15, 2009 Sep 15, 2009

Copy link to clipboard

Copied

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.

Views

28.3K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guru ,
Sep 16, 2009 Sep 16, 2009

Copy link to clipboard

Copied

This should be linked to in the DW FAQ   🙂

Edit:  Link now added to the Dreamweaver FAQ index

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 22, 2009 Nov 22, 2009

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 22, 2009 Nov 22, 2009

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 10, 2010 Mar 10, 2010

Copy link to clipboard

Copied

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

[link removed by moderator]

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Apr 08, 2010 Apr 08, 2010

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 09, 2011 Sep 09, 2011

Copy link to clipboard

Copied

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  

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 15, 2012 May 15, 2012

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 21, 2010 May 21, 2010

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 21, 2010 May 21, 2010

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 22, 2010 May 22, 2010

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 22, 2010 May 22, 2010

Copy link to clipboard

Copied

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

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines