Clean code with FP 2003 do's and don't

How to get proper HTML with FP

[MilleB]

This thread is meant to be about do's and don't with FP.
Like how to get proper tables and NOT inflating staff from FP:
For tables bill recommends to use the table property menu and not the wysiwig, otherwise you get additional images and tabs etc... inserted.
Other tricks you found or would like to know : post it here.
I will start with the following question?
How do you get rid of all the additional <font> <span> staff?

[jbgilbert]

Milleb,
Even an ole timer like me has to appreciate your post. Fact is, even those of us who learned to build HTML using notepad have less and less time these days and would "love" to have a FrontPage version that does just what you are asking!

For years now my method has been build it with FP and fix it with notepad -- bummer and real pain in the you know what!

I sincerely hope there are some contributors to this thread you have started and we indeed do find a way to produce clean code with a true (affordable) wysiwyg editor.

There is another thread here at WWW that just started that is about wysiwyg editors in general: see
[webmasterworld.com...]

[jimbeetle]

Great thread to start, MilleB. But before getting into specifics we should back up a bit as many of the little pesky problems can be taken care of by starting off on the right foot.

Much of the code bloat, malformed code and other things that folks talk about all the time is a result of not telling Frontpage what you want it to do. As in any web project, the very first thing you have to do is decide on a doctype, and what technologies and which FP features you're going to use.

Then -- and this is what most new FP users overlook -- you have to go into Page Options on the Tools menu. What is set here determines what code is generated and how it is generated. I usually start with the Authoring tab and choose which FP and browser options I need. Notice that all it takes to get rid of those FP generated meta tags that folks grumble about is simply unchecking a box.

FP has fairly robust support for CSS, just be sure to check the boxes for css 1 or 2. (And now those pesky font tags are gone!)

Code formatting is actually one of FP's strong points. There's a heck of a lot of tweaking you can do at the Code Formatting tab to get your code just the way you want it. Pay particular attention to the Tags section. Besides setting how the code is displayed you can set which start and end tags are generated. If FP is not generating ending P tags, just uncheck Omit End Tag. You can tweak to your heart's content.

It sometimes takes a bit of trial and error, but an hour or so spent here relieves you of many headaches in the future.

That's just a quick starting point. As this thread grows we should get some really good information. Thanks again for starting it.

<added>Hey jbgilbert, if your good at coding in Notepad you should really get a kick coding in FP. Set your Code Formatting, Color Coding and Intellisense options to what you need and you have a pretty powerful code editor. Try it, you might like it ;)</added>

[jbgilbert]

jimbeetle,

<added>Hey jbgilbert, if your good at coding in Notepad you should really get a kick coding in FP. Set your Code Formatting, Color Coding and Intellisense options to what you need and you have a pretty powerful code editor. Try it, you might like it ;)</added>

I'm still using FP2000 --- I hate upgrading stuff -- seems to get more complicated, more bloaty, more option rich with every release!

What FP version has these options?

Code Formatting, Color Coding and Intellisense options

[jimbeetle]

I skipped FP 2002, not sure what features it had. 2003 is a very good package and has the full load of coding features.

And you can also set a lot of formatting stuff in 2000 to generate some pretty good code. A nip here and tuck there works wonders.

[MilleB]

I just found that if you use a FP theme, you may as well forget about your own CSS includes. FP will keep your include, but will always have its theme <meta tag> after yours and just before <body>. Even if you manually patch the code ... :(.
So bye bye the themes?

[MilleB]

FP has fairly robust support for CSS, just be sure to check the boxes for css 1 or 2. (And now those pesky font tags are gone!)

Are you sure? I have those boxes checked without knowing, and guess what? I have all these <font> tags; something else is missing.

[jimbeetle]

You know, now I'm not sure. Just went into an old test site, set everything to default and I can't get an FP generated font tag no matter what I do.

There must be another little switch somewhere or another that I can't find right now. I'll keep looking.

[europeforvisitors]

Jim, I've got both of those CSS boxes checked, too, and I still get the regular font tags.

[bill]

Outstanding thread topic idea MilleB!

Just to paraphrase my table advice; MilleB was having issues with the code bloat from manipulating tables in the WYSIWYG editor. I was just explaining that adjusting tables via the Properties form would give more precise control of the code. If you use the WYSIWYG editor FP will do it's best to render your creation, but the code won't be too pretty. It's a trade-off of sorts. I personally prefer to do all of my table styling via CSS.

[jimbeetle]

EfV: Yeah, I'm still searching around and I still can't get any stray font tag to show up, even on sites that have been FP-generated since FP '97.

If I have time tomorrow I'll start a completeley new site with all default settings in place and try to find what's what.

[MilleB]

For years now my method has been build it with FP and fix it with notepad -- bummer and real pain in the you know what!

from jbgilbert

I think you can do better than cleaning with NotePad, yesterday i spend some time cleaning up those messy tags with NVU (a Mozilla enhanced tool). I recommend the TAG pane, where you can see the precise and exact tag tree structure in a graphical view and with a lots of click you get if fixed.... click right at the bottom on the tag you want to remove etc... I just wish I could right-click on the tag image itself.

Now I also tried to do the same with FP, guess what? Hardly possible, you can easily clean the <font> tags and <msNormal> stuff. Did not manage to clean the table borders stuff that FP adds. :(

Definitely bill advice on tables is correct use of css works much better.
Side question can you easily edit/create your own CSS with FP? I gone into doing mine outside.

[MilleB]

a repost of pageonresults in another thread

FrontPage users will want to check out this topic we had a while back...
Things to be aware of when using FrontPage
Remind us why you didn't use it, or workarounds for its pitfalls.

things to be aware of when using front page [webmasterworld.com]

Indeed a great deal of good indications in this page! :)

[bill]

I think you can do better than cleaning with NotePad, yesterday i spend some time cleaning up those messy tags with NVU (a Mozilla enhanced tool). I recommend the TAG pane, where you can see the precise and exact tag tree structure in a graphical view and with a lots of click you get if fixed....

Reveal Tags
Actually you have a similar view in FrontPage2003.:

View ¦ Reveal Tags

or

Ctrl + /

Remove Formatting
From the WYSIWYG view you can select an area of the page and use the following command:

Format ¦ Remove Formatting

or

Ctrl + Shift + Z

This will remove a lot of the <font> and other formatting that may pop up. It's not as good with the tables though. With table formatting sometimes I find it quicker to make a new table and drop in the old data.

[jimbeetle]

I spent some time yesterday playing around with FP, trying to get it to plop in some stray font tags, without any luck. I realized in a Duh! moment that I was really off track because Frontpage doesn't generate font tags unless you tell it to.

So, even if the CSS boxes in the authoring tabs are checked, well, you then have to use CSS for the formatting. For example, EfV, I'm sure you started your site before you ever heard the term CSS, so you're spec'ing each paragraph on the fly:

<font face="Verdana" size="1" color="#C00000">text</font>

If you were using a CSS stylesheet you could define a class:

.copy {
font-family:verdana,arial,sans-serif;
color:#C00000;
font-size:1em;
}

Then spec the paragraph:

<p class="copy">Text here</p>

FP makes this easy to do by choosing the class to apply from the "Style" box on the menu bar.

Basically you won't be able to get rid of the font tags unless you make the switch to CSS for formatting. For a well-established site such as yours that's going to take a heck of a lot of thought before making the leap.

[jbgilbert]

Jimbeetle... you left out something....

Basically you won't be able to get rid of the font tags unless you make the switch to CSS for formatting. For a well-established site such as yours that's going to take a heck of a lot of thought before making the leap.

Basically you won't be able to get rid of the font tags unless you make the switch to CSS for formatting. For a well-established site such as yours that's going to take a heck of a lot of thought before making the leap. AND A LOT OF WORK IF YOU DECIDE TO CHANGE IT

[europeforvisitors]

AND A LOT OF WORK IF YOU DECIDE TO CHANGE IT

So I've discovered while playing around with CSS.

The big question is which gets the clutter cleared out first: My Web site or my office. :-)

[MilleB]

Reveal Tags
Actually you have a similar view in FrontPage2003.:
View ¦ Reveal Tags
or
Ctrl + /

Cool. Very handy indeed. Thx bill.

This will remove a lot of the <font> and other formatting that may pop up. It's not as good with the tables though.

It's not just the <font> tags you want to get rid of, it is also the 50+ style declarations you get in the <header>.
I have cleared it a couple of time by hand in the source code, but sometimes I messed it up. Is there an automatic way to do it?

I agree with Bill around table cleaning, I copy paste old content in new table now. But OK I always use the same template for this site I'm working on currently.

[MilleB]

Another trick of Microsoft to be aware.
If you copy/paste from a word document, beware the <font> & <span> will come with it.
Make sure you paste ¦ without formatting, or you will be cleaning-up the mess.

[bill]

To avoid the formatting that comes from content copied from Office applications use this:

[b]Edit ¦ Paste Special... ¦ Normal paragraphs[/b]

That will give you just the text and none of the formatting.

[netchicken1]

When changing webpages from tables to css I often use the "Remove table" command. It strips all the code out and makes it easy to rebuild it.

I use FP really only as a container to hold my pages and add text whilst I create them in Topstyle lite.

The html tidy command is handy as well,

[MilleB]

Now a slightly different side to the thread.
I'm using FP local, but the server does not have FP extensions. And my admin don't want to have them BTW.... is there anything special I need to pay attention to?

Another question what are those _derived directories that FP creates for?