Web Design & Architecture -- LIS 9723 logo


CS6 Layouts

During the tutorial and exercises we'll be using the layouts I've supplied.

For your final project, if you decide to use any of the layouts available from Dreamweaver (File..>New..>Blank Page), remember they have built them all with classes, not IDs, so all the design view tools will not work for you. You can easily change the DIV classes (.name) to IDs (#name), but remember to do it in both the HTML and in the style sheet!

Drop Down Menu Samples

CSS Drop Down Samples:

Sample 1

Sample 2

Other tutorials:

There are dozens of good tutorials on how to create a menu like this. I thought these looked promising.

Simple:

A really simple and easy-to-handle CSS approach.

This one also has minimalistic code needs.

More complex:

I thought the use of CSS3 was elegant in this one.

This one uses CSS3 transitions too, and looks cool.

 

 

CSS Layout Samples

I've provided you these layouts for your own use -- in the tutorials, exercises, and even your final projects -- in the hopes of making things run a bit smoother. They are all in the current standard (HTML5).

How to download them:

Really easy!

  1. Click on the layout you want (2 or 3 column) and then right-click.
  2. Either "Save as" (chrome) or "Save Page As" (Firefox).
  3. In the pulldown underneath the file name, change to "Web page, html only".
  4. I'd save the file with a name that is going to be helpful to remember for your work (eg: exercise2.html or usingcss.html)

If you're using a page with an external style sheet, remember that you'll need to save that as well.

  1. Click on the link that says "Click here for the CSS file".
  2. When you're on that page, right-click and "save as" or "save page as". (The right file type should come up automatically, unless you're using Microsoft IE, then lord help you.)

 

Embedded Style Sheets

HTML5

XHTML

External Style Sheets

HTML5

XHTML

 

Back to Top
Last updated:

Course Outline | Assignments | Exercises | Schedule | Resources & Links | Lab Tutorials

About the Site | Site Map | About Mark | ©2010-2011 Mark A. Rayner