Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Do I need to use CSS for this project?

Status
Not open for further replies.

okpeery

Instructor
Dec 29, 2005
102
US
I am new to web design. I took a class in Dreamweaver 1.5 years ago. We also did hand coding but we did not touch on CSS other than explaining what it is and how it works. I don't know how to use CSS. Now I've been fooling around with Dreamweaver for a while and I am ready for a project.

I need to make a website that has about 30 pages to it. It is for my store. There will be one design for the pages but the content on each page will differ slightly, to show various things we sell. Maybe we will have 2 different designs but most likely just one page layout.

I know how to design using tables but I read so much about getting away from tables. Should I just go ahead and design in tables and html because I know how to do it and then add CSS elements later? Is this possible? What I understand about CSS is that it can be an external document that is somehow linked to a website. Can I add it to my web site later? I'm not sure I will be changing attributes much if at all. I think when I want to change I will want to redo the site. Is this just beginner naivite?

My big problem is that I have been procrastinating on doing this because of CSS. I'm afraid if I have to learn CSS before doing my project then I will never get to it.What do you think?
 
Should I just go ahead and design in tables and html because I know how to do it and then add CSS elements later? Is this possible?
It's not really possible, or practical. Design in CSS from the get-go.


CSS allows you to seperate content (the actual information) from presentation. Whilst this does mean you have to learn something new, for a 30 page site it'll be worth it - especially when it comes to maintenance.

For example, changing the colour of the menu text would - in traditional design - have required changing the <font> tags for every menu element on every page. With CSS you can simply change one line.

CSS is simple in it's use. All presentational code goes into one seperate file, which is linked to by every page on your site:
Code:
<head>
  <link rel="stylesheet" type="text/css" href="/css/styles.css" />
</head>
Changing something - for example, the colour of the menu text - in that one css file will change it across the entire site.

It'll make your site more future-proof and cross-browser compatible (how would your site look in Firefox? Or in IE7 when it's released?)

You'll also want to learn about using (X)HTML code that validates to a standard doctype. It's an aspect that's been unrecognised by most traditional designers, but is increasingly important for modern browsers.


The CSS Zen Garden is a good place to see the true power of CSS.

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com
 
Is the code you put in the box the code that needs to go at the top of a page when using CSS?

Then the html and table formatting follows?
 
The site in my sig is built using valid XHTML and CSS. Take a look at the code to see how it's built.

The idea is that you use semantic markup for the content, and CSS for it's presentation.

An example of semantic markup would be: instead of using [tt]<font size="x-large">foo</font>[/tt] for a heading, instead you should use a heading tag [tt]<h1>[/tt] through to [tt]<h6>[/tt].

Tables should be used to represent tabular data - not for layout.

Menus should (usually) be marked up as lists.


The important bit in the sample code I gave is the <link> tag: it should be placed between the <head> and </head> tags of every page on the site. Your semantic markup should go between the <body> </body> tags.

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com
 
okpeery,

It might be worth seeing if you local library has any modern books on CSS - such as the 2nd edition O'Reilly CSS book by Eric Meyer:


If not, maybe they will order a copy in for you. You probably don't want to buy it unless you're serious about getting into web development... but if you are, it's a a really easy-to-understand book that contains all the concepts you are ever likely to need regarding CSS. It's also a great reference.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
I think potential CSS usage falls into two parts:

1) Fine-tuning presentation

This is stuff like setting font sizes, colours, alignment, etc. The kind of stuff we used to do with <font> elements back in the day. You should not consider using anything but CSS for this kind of thing.


2) Page Layout

This can be more tricky - using floats and positioning to place your content on the page. It's definitely the way to go, but if you're confident with tables you might want to start off that way. I think a single, simple layout table can be acceptable (though far from ideal).

Whatever you do, your design will change as you become more skilled. I recommend you use server side includes to keep standard on-every-page content seperate from the individual page's content (alternatively, I believe, Dreamweaver has "templates" that serve the same purpose. though it means regenerating your whole site when the template changes). This way you can tinker with the page structure and layout without manually editing each page.

Long-term you might want to think about using a database to store your product details and generate their pages, but that's a whole new kettle of fish...

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
I echo Chris' suggestion to use css for stuff like fonts and table(s) for layout. While you will always read in these forums that using tables for layout is a bad no no, in the real world most sites do it. You may have heard of a modestly successful site called amazon.com that uses tables for layout and css for fonts, etc.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top