Welcome to WebmasterWorld Guest from 23.20.137.66

Forum Moderators: not2easy

Message Too Old, No Replies

Trim your code -- table-o-holic 12 steps

linking js and css file

     
10:41 pm on Oct 16, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi....my name is Todd....
and I was a table-o-holic

I am getting better though, and slowly
migrating my sites to CSS.

I get frustrated, and often tempted
to use nested table 'work-a-rounds',
but I am trying to stop that now.

My new endeavour is trying to trim and clean up my code,
by linking style sheets and javascript files.

I am not having much luck yet, and wondering if someone can point me in the right direction.

When I am doing mouseover images (specifically in DW), I get all kinds of javascript that I would LOVE to link off-page. Not quite sure if this is possible but I would be ecstatic if it was. I am FAR from a java programmer, so in many cases this code baffles me, and I try not to touch it, or quickly press CNTRL+Z if I accidently do.

Please help me continue my resistance of tables.

11:57 pm on Oct 16, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Resistance is futile...

Kidding;) It's not as tough as it seems. Here is how I link to external .js and .css files:

<link rel="stylesheet" href="../newstyle4.css" type="text/css" />

<script type="text/javascript" src="../rollover.js">
</script>

1:26 am on Oct 17, 2002 (gmt 0)

WebmasterWorld Administrator martinibuster is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



Seems like it's time I got off my butt and started doing external js, too.
1:31 am on Oct 17, 2002 (gmt 0)

WebmasterWorld Administrator mack is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



I have to admit I use tables extensivly in my page layout. I think it's perhaps time I moved along.

[edited by: mack at 3:41 am (utc) on Oct. 17, 2002]

1:44 am on Oct 17, 2002 (gmt 0)

10+ Year Member



You can turn DW's JavaScript into an external file easily. Build your nav bar, for instance, first before DW soups it with any other script. Copy between the beginning and end script tags, paste it into notepad, name it whatever.js, and use Birdman's example to call it externally.
1:58 pm on Oct 17, 2002 (gmt 0)

10+ Year Member



and I was a table-o-holic

I would like to kick to habit myself, but it's hard to do as long as people are using NS4. (it's always somebody else's faults with us table-o-holics :) )
2:02 pm on Oct 17, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Tables are so easy to put together though, takes a few minutes to bang out a complete table.

I always find it more time consuming with CSS, but I am starting to move towards CSS layouts with minimal tables!

Craig

3:16 pm on Oct 17, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Tables are so easy to put together though, takes a few minutes to bang out a complete table.

I'm to the point I where I can bang out a page with divs pretty fast, but it always looks terrible in nn4 :(

I guess I'll have to learn that @import hack for the %3 of nn4 users sometime.

3:22 pm on Oct 17, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'm to the point I where I can bang out a page with divs pretty fast

Thats what I am aiming for my good man

3:27 pm on Oct 17, 2002 (gmt 0)

10+ Year Member



Is there a big difference in using layers rather than tables?

Im just getting into external .js and css, but still use tables, mainly because i know it works in most browsers, whereas layers im not sure.

Should i change, and will i see a big difference in SEO and download speed if i do?

Also, not knowing much about layers, what can layers do that tables cant, or vice versa.

thanks

3:35 pm on Oct 17, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Should i change, and will i see a big difference in SEO and download speed if i do?

It can definetly help in SEO by allowing the meat of the content to appear at, or near, the top of the html page. With tables, you have to stick to a certain order, which usually puts the good stuff much lower on the page.

It should also reduce download time, depending on the amount of tables you use.

5:40 pm on Oct 17, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



>Should i change, and will i see a big difference in SEO and download speed if i do?

This is what I'm really hoping for.....

I seemed to have noticed that very 'simple' pages have been ranking high in G lately....

If not, then purely for the joy of something new, and having 'cleaner' code...

Woohoo! <does cabbage page dance>

I just finished uploading an update to my 150+ page site.....I was able to convert the table-based mess into a nice 3 layer style sheet.

I am very happy because I also discovered (for the first time) how to externally link the .js and .css files so my content is close to the top. It works....it really works!

Next step.....any suggested appreciated.....
getting rid of all my outdated <font> and other formatting tags in the 'content' section of my pages.....

8:12 am on Oct 18, 2002 (gmt 0)

10+ Year Member



Layers only work in certain browsers, so how do you get around using a tabled site for Netscape 3 etc, what code is required to replace the layer.html to a table.html, so all browsers can see my pages.
8:47 am on Oct 18, 2002 (gmt 0)

10+ Year Member



Next step.....any suggested appreciated.....
getting rid of all my outdated <font> and other formatting tags in the 'content' section of my pages....

Get rid of the font tags, and set them up in your font styles in the external CSS file... and use the class in your html attributes instead...

e.g (home.css as the external file)

-- contents of the file (home.css) --

.normaltext
{
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 10px
}
-- End of file --

<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="normaltext">Hello World
</td>
</tr>
</table>
</body>
</html>

ppg

11:41 am on Oct 18, 2002 (gmt 0)

10+ Year Member



<link rel="stylesheet" href="../newstyle4.css" type="text/css" />

I've been linking to external stylesheets like this too, but I've found that validating to HTML 4.01 transitional gives me the following error at the w3c validation service:

Error: end tag for element "HEAD" which is not open; try removing the end tag or check for improper nesting of elements

If I remove the closing forward slash at the end of the link tag it validates fine, same situation but with a different error with strict.

12:20 pm on Oct 18, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You only need to add the /> when you validate for xhtml. Html doesn't require it. [w3schools.com...]

ppg

2:20 pm on Oct 18, 2002 (gmt 0)

10+ Year Member



Ah, thanks. I thought there must be a reason for it.
3:41 pm on Oct 18, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



>Get rid of the font tags, and set them up in your font styles in the external CSS file... and use the class in your html attributes instead...

Can you think of a feasible way to do a find and replace SITEWIDE?

It's lookin' pretty grim to me, but thought somebody else might have an idea. I know I will certainly be trying to stay away from <font> tags in the future.....it's amazing how much bloat they add to each page.

9:03 pm on Oct 19, 2002 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



A manual sitewide deletion of all font tags is not TOO very grueling, because you probably don't have that many different varieties of <font attribute="foo">.

What I've done:

1. Globally replace all </font> tags with nothing.
2. Do a global search on <font.
3. Copy the COMPLETE font open tag from < to >
4. Paste that tag into the search "find" function
5. Do a global "null" replace for that specific flavor of font tag.
6. Search again on <font, and delete the next flavor you find.
7. Keep repeating until you can't find anymore instances of <font.

4:52 pm on Oct 20, 2002 (gmt 0)

10+ Year Member



I have just spent some weeks going through my site (300 pages of hand-coded HTML) to remove tables where possible.

One of the places where I could not do without tables was in captions below images. I tried starting another thread [webmasterworld.com] about this problem, but the consensus seems to be that there's no better alternative.

7:39 pm on Oct 20, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I've always asked the designers I work with to use tables instead of layers, believing them to be easier for spiders to index.

I haven't done much research into this lately and am wondering, from a spidering & ranking point of view, whether things have changed?

I've always found the highest ranked pages to have very simple, table based html code. Am I out of the loop?

10:16 pm on Oct 20, 2002 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



It's still true that simple table-based layouts can do very well, especially when the fonts are handled with an external stylesheet to trim the code.

However, div based layouts offer many advantages - not the least being absolute positioning that allows you to push your essential content closer to the top of the HTML document.

4:54 am on Oct 21, 2002 (gmt 0)

WebmasterWorld Administrator brotherhood_of_lan is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



For those digging their heels deep and replacing all their <font> tags by hand, you might want to check out an edit/replace function with regular expressions. They are the biz :) I mention them because I didn't fancy doing all that hand work either....so I learned a little about regex and let the computer do it for me (using notetab and/or DW)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month