Easiest way to convert from tables to CSS

Hey there everyone. I am new to this forum and web design. My cousin has a site with quite a few pages. its www.usvendingking.com. I am going to be redesigning the page completely to make it look better than it is now and then later on optimize it for search engines.

I need to know some tips and maybe a good guide for converting a table based site to a CSS layout site. I have dreamweaver 8 and am learning how to use it. I know the very basics of HTML and CSS. basically I know what everything does in a general sense, just can't build a full website yet. He has quite a few pages on his site, so its going to take a while. I just need some shortcuts to make it a bit faster. Thanks.

Just start pouring over CSS and XHTML. There aren't that many CSS properties and even fewer HTML tags. If you study them a little bit and look at a few layout tutorials, you'll be able to start coding yourself. You need to hand code CSS, there is no program that will do it for you the right way, although they are improving. If you're on a Mac, CSSEdit is a nice program for writing CSS.

Ah yes, I understand I cant just use an automated program to use CSS. I just need to figure out how to transfer the existing codes written with table layouts to CSS. In other words erasing all table code and placing in the css code. Should I place the content in a word document file along with the images that go with the content then create a css layout then re-insert content and images? Seeing if there are any shortcuts in that area. Thanks.

The thing with CSS is it allows you to structure the XHTML semantically. Take my site for example... With CSS enabled, it looks like this: http://ryanfait.com/ but it looks like this with it disabled: http://ryanfait.com/?disable=CSS

The whole point of CSS is to structure the content in such a way where it makes sense, then use styles to make it look pretty. There's no transference between tables and semantic XHTML, you've just got to start from scratch.

Using DW is fine (it saves time in the long run with all the nifty shortcuts) as long as you stick to the code view

As for converting that site to CSS layout ... start from scratch! Literally ... do a File > New

If you need help getting started with layouts, head on over to my stickied thread - Resources for learning how to use CSS for layout - there's a "how" section. Check the links and read

I'm doing that right now with a site I built years ago. I am converting the entire site to css/xhtml. I am going page by page. DW8 allows you to use split view. Copy and paste the item you want into the new design. Then edit the code deleting all the tags, fonts, garbage that you'll have there. Then take that element and apply the New css to it.
There isn't a shortcut, it's just something you have to toil through. Line by line, page by page. Quite boring actually! But you'll be amazed at how much less code there is. I'm not extremely experienced but after a coupld of months or so of being in the trenches with this, I am definetly moving along well. Some of it is trial and error.

Sounds like you are over complicating the process. Just start over. Probably be faster.

__________________

in dreamweaver you can convert tables in to layes. Same thing i guess but its cheating. I never do it. Just learn css and xhtml, start over and you'll be alot better off.

Alright, thanks everyone.

Ok now I need to come up with a css layout that will work well for designer view in dream weaver. By that I mean a css layout where I can drag and drop text and images anywhere I want. I'm trying to do it with this basic css layout but there are some css properties maybe that are not letting me move objects where I want them. This is possible right?

This is what I figured out. I can select all on the home page, copy, and then paste it into microsoft word and it looks just like it does on the website. I am trying to figure out if I can copy and paste the content from microsoft word to dream weaver in designer view and then move it around the way I want it. This feels like the easiest way for me to get rolling. If I'm not being clear enough just let me know.

edit: The reason I need the css layout to be so flexible in dream weaver is so my cousin can add content when he needs to. Unfortunately he does not have time to learn css and HTML like me and he needs to be able to add images and content by him self and not just rely on me. I hope this makes sense. Thanks.

I think I figured it out. In dreamweaver you can draw layers in designer mode which actually creates absolute div layers in the code. I can then alter the properties of tags etc to make it all fit right in different browsers.

I read about 5 articles on CSS/HTML so I am learning it a bit. So I'm pretty sure if I draw the layers out and apply the knowlede I gain from learning CSS/HTML I'll be able to pull this off.

Another option would be to build it correctly then give him a copy of Contribute which will allow him to simply point, click, edit any portion of the pages.

Just from what I know the method you are taking is just asking for problems.

__________________

with a continuation off moojoo...
you can hand code your css to an external stylesheet and use strict xhtml/css (thats doing it the right way) and not using DW's WYSIWYG because it tends to only work in F'ed up versions of IE (6and below) and you tent to keep css syntax in your head for future refrences. But you know thats my opinion. You do what you like. if you have problems just pm or im me. Ill help you how ever i can. ;D

I've never had good luck with drawing layers in DW. If you have better luck than I ever did, that's great. They never seemed to stay where I wanted them. They were wiggly and moved...
But I get what you are saying about renaming the layer with a div name.

Just learn css. Makes your life alot easier

Thanks for the advice moojoo.

I did figure that out my self too. Dream weaver wouldn't even scroll to see all the layers.


So yeah, I guess I will have to study more on CSS and XHTML. I know very basics right now and maybe use contribute to let cousin add content/images. I'll just have to see how much contribute cost first. Thanks for the advice everyone. You've been a big help.

contribute is like $150. so shabaam now you know how much it costs.

This is what i do, Copy past your html/xhtml into a css document (make sure to comment it out). Then bit by bit rewrite the site in css while deleting out the html/xhtml were appropriate. When your done copy (and remove) your html/xhtml from your css document and overwrite the original html/xhtml document with it... or whatever you want to do with it. :P