Webpage Creation in Dreamweaver - How I Deal With Font Conflicts

Dreamweaver would seem to have become the platform of choice for website designers. Simple enough for beginners to master to a workable level and sophisticated enough to keep the master designers coming back.

But it has some very, very annoying conflict issues that can test your hold on sanity.

I ran across this again today so I thought I'd write about it in case someone else finds it useful.

I am by no means a master web designer. I am in fact an Internet MLM Marketer. Websites are a tool to me, not a profession. I fumble my way around bringing websites to life and in the process I run into some very frustrating issues that just don't seem to want to get fixed. Things like: how do I get an mpeg video clip to run in a webpage; my text formats differently in Firefox versus Internet explorer; font changes refusing to take; tables getting screwed up etc. etc.

And there just doesn't seem to be anyone out there who can help me without paying an immense fee for their service. So I struggle along on my own until I finally crack the code thinking: "There must be a better way."

Ever been there?

Well I can't help you with really intricate stuff, but here are some of the things that I have found will save me, and hopefully you, a lot of headaches.

If you're a pro then this article isn't for you.

This is for the beginner like me who still from time to time struggles to get a website up and running smoothly. So if you're a beginner read on.

So there you are--you're sitting there with the blank Dreamweaver page in front of you.

What are you going to do first? Getting it to work right is all about doing it right the first time. Begin as you intend to continue.

Here's what I do ,and don't for a moment think this is gospel (maybe there's an easier way)--its just what I find keeps me out of trouble.

Where fonts for your text are concerned you are best to start by creating a CSS Style Sheet. CSS stands for Cascading Style Sheet and can help keep you out of trouble with fonts that can suddenly go crazy on you. Now this is not the only use of CSS--in fact its amazingly versatile in regard to graphics etc.-- but lets just stick to fonts.

Well get to how to set up a CSS sheet in a follow up article, but the main thing is to NEVER, and I mean never, designate a font that is not listed in your CSS sheet unless you know how to get out of the ensuing mixup. This will help keep you out of lots of trouble with fonts.

There is a great difference between what you see on your HTML editor (which is what Dreamweaver really is--although very sophisticated) and what you see on your web page when you test it as an HTML file on your screen.

And it can get worse when you actually publish it to the web. The layouts of webpages viewed in Internet Explorer always seem to be slightly (and sometimes a lot) different to webpages in Firefox.

Always attach your CSS sheet to the page you are working on and always define your text fonts in your style sheet. If you need a new font then define it in your CSS sheet first and then use it. Some of my style sheets are monsters.

One of the frustrating issues with Dreamweaver is that when you change a font by highlighting it and changing it in the properties window, Dreamweaver doesn't always erase the old font. This can cause conflicts that show up as very unpredictable font changes when you publish your webpage.

What do I do?

As soon as I notice that my fonts or layouts have gone crazy I position my cursor at the beginning of the inconsistency and search in the code at that point for doubled up font definitions.

If you have imported the document or copied and pasted it from somewhere else it will bring all of its old baggage with it, including all of the formatting and fonts from the original document or webpage.

What I do at this point is "cleanse" the document.

I go into code view, select all of the code, copy it to the clipboard and then paste it into a Notebook page. I then go to "edit" and select "find" from the dropdown menu (I can't seem to make "find" work properly in Dreamweaver).

I enter the word "style", position my cursor at the top of the document and click "find next". I then systematically erase every existing style definition in the document (hopefully its not too long).

Your document should now be pure and unsullied, contain no style definitions and be ready for you to attach your CSS Style Sheet.

You then copy and paste the cleansed text back into your code page, making sure to save the original code first in case there's a snafu in your changes.

If you find "font" conflicts arising again, you can simply repeat the process if you can't obviously find the villian at the first couple of tries.

You will know you have problems if you find "non-CSS" styles showing up in your font list in the properties inspector.

A valid CSS style definition will look like this in your font listings:

"Para12ptBlack" or something similar,

while a style that could cause problems looks like this: "style1" and needs to be removed if you want your page to be free of font conflicts.

So look for a line in your code that looks something like this at the point where the problem is showing up:

"style1- Sample Text to Demonstrate Font conflicts."

Dreamweaver defines the "style" in both the "head" and the "body" of your webpage code. Both need to be removed.

Here's an example:

NOTE: Due to constraints form Ezine Articles whereby using HTML tags in the body of my article causes publication issues this is not exactly syntactically correct code but gives you the idea.

----------------------------------------------------------

"head"

style1 (font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 14px;

font-weight: bold; )

"/head"

"body"

style1 class - Para12ptblueBOLD - Sample Text to Demonstrate Font conflicts.

"/body"

-----------------------------------------------------------

When you changed your font to "12 pt Blue Bold" using an attached "CSS Style sheet" you will notice there are now two styles defined for the same text.

When you re-defined your style from the CSS Style sheet Dreamweaver didn't delete the "style1" from the class definition. This is how the conflict happens - your computer gets confused.

It is these instances of "style 1" and similar, in both the "body" and the "head" that you will need to delete to keep your webpage clear of font conflicts --as long as this is the only issue..

Remember to leave your CSS font definitions intact. You don't want to remove these. These are the good guys.

The line should now look something like this:

class "Para12ptblueBOLD" Sample Text to Demonstrate Font conflicts.

This is a nice clean definition that won't cause problems.

Since you have attached a CSS Style Sheet there will be no Style definition in the "head".

If you've been house cleaning as you go along this will usually fix the issue.

I hope this has been helpful.

Keep a lookout for followup articles on "Setting up simple CSS style sheets" and "Using "Layers to format your page layout".