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:
Sample Text to Demonstrate Font
Dreamweaver defines the "style" in both the "head" and the
"body" of your webpage code. Both need to be removed.
Here's an example:
----------------------------------------------------------
"head"
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
"/head"
"body"
Sample Text to Demonstrate Font
conflicts
"/body"
-----------------------------------------------------------
Now if you change your font to "12 pt Blue Bold" using an
attached "CSS Style sheet"
Your code will look like this:
-----------------------------------------------------------
Sample Text to Demonstrate
Font conflicts
-----------------------------------------------------------
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 like this:
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".
----------------------------------------------------------
Jim Keayes is an expert Internet Marketer. Over more than 20
years he has taught many people the strategies to accumulate
and leverage wealth. You can subscribe to his “Free
Newsletter” by visiting his website at:
http://www.homebasedbusinessontheweb.com/cap
or by emailing jim@hbbontheweb.com
------------------------------------------------------------
