How I Converted My Table Website to All CSS (continued)
One of the neat things about CSS is the fact that I can name the containers anything I want!
I decided to make all my pages a two column format, but left the main page a three column layout.
I also decided to stop using the Martha's Web images (they did look sorta juvenile) so I removed the code for the header and then I started the 'conversion'. If I decide to use a header again, it will be fairly easy to implement.
I opened FrontPage, opened my copied site and then I opened the first page listed in Folder view. I saved that page as 'newfilename' and then opened the original page again and used code view. I left all of the part that contained the doc type, meta tags then copied and pasted my template over the old LINK REL=style sheet TYPE="text/css" HREF="stylesheet.css", then deleted everything below the last line of my 'template'.
Now the fun began, I put all of the information from the old file, now named 'newfilename', into the 'containers' in the template I had pasted into the original file. Confused? I got that way a lot during this procedure! Some things just wouldn't 'fit' the same way in containers that it fitted into tables! So I did a lot of work-a-rounds making the pages look the way I wanted. I also made several new pages so the way they looked would be more balanced. Once I had all of the content transferred to the containers, I deleted 'newfilename'. Then I used the online Validator to make sure I had no errors in the HTML.
In order to prevent FrontPage from coping old code, I copied and pasted
the content into notepad and then copied and pasted into FrontPage.
(FrontPage 2003 puts p codes everywhere!) I did a lot of editing pages in notepad.
I removed most of the thumbnails and instead used 'Screenshot' links.
Those thumbnails looked too tacky the way I had them before and now the
pages look much more ordered. Because I had several pages consisting of
mostly links in tables, I made a template just for links. I made a
'template' in notepad again, consisting of nothing but li tags
about 50 times. I opened another instance of notepad and copied all of
the code for a 'links' page and pasted it into notepad. Then I did a series
of find and replace in notepad to get rid of all the table formatting, codes, etc. Then I copied the actual code for the links, like this:
Linda's MSO Group and pasted each code for a link into the center of a
list tag set in the 'links' template. Once I had all of the links completed it was a
simple matter of copy/paste into the web page. (I may be lazy, but I am not
too dumb to figure out a shortcut!) While this seems rather convoluted, it
sure beat typing in all of those links again! I also checked the links to
make sure they still worked, most did but a few are gone now.
I really struggled with my photo gallery, but ended up using a formula written by Eric Myers. I really like the way that turned out, much better than the old table-based layout.
The site is not loaded with images now and pages all load much faster. Since my site is written mainly for 'newbies' who generally are on dial-up, this is a plus! I also no longer worry about all those MySpace users hot-linking to images on my site, 'cause the images are gone! (I still have my 1 x 1 pixel image they are still hotlinking to, the big dummies!)
So, now my site is CSS with no tables. It isn't fancy, but it validates! Now I am working to change it all to XHTML, always something! Someday I'll try to make it pretty, with CSS it should be easy!