IMS Web Tips ******** ISSUE 6 August 10 1999 *********
"Free Tips and Tricks for getting the most out of your Web Site.
This e-mail is being sent to you because you subscribed to

Subscription Information is available at the end if this news letter.
Please forward this news letter on to your colleagues and friends.
In this issue:

1. Cascading Style Sheets
Promoting Your Site: Links
IMS tip: Page Layout Techniques
Reader Questions.
In next weeks issue.

Cascading Style Sheets. (CSS)

Last week we introduced Dynamic HTML and Cascading Style
Sheets (CSS) as one of its three major components. We have
mentioned CSS in several past issues. Unfortunately its name tends
to send many people running for cover. It's a term that could only
have been coined by a techie with a penchant for the dramatic. If I
were responsible for the name I would have called it PHH for
'Position your HTML Heverywhere'. This name not only helps
describe what it does but the spelling also identifies it as a techie

Cascading Style Sheets are a W3C (see below) specified method for
adding desktop publishing capabilities to HTML. CSS enables you
to define a Style such as position, size, Font etc. and assign it to a
picture, block of text or combination of Objects on your web sites.
There are two primary ways to define a style. The first is through
the Style container which is used to define a globally accessible
style. The second is inline were the style may be applied to a single

The style container is used to define multiple styles that will be
applied globally to the document. An example of a style container is:

<STYLE TYPE="text/css">
H1 {color: blue; 12pt}
P {color: black; 10pt}
UL {background -image: url(mypic.gif)}


In this example, whenever a H1, P or the UL tag is used, the specified
color, font sizes and for the UL tag, a background image, will be
applied. The style container can either be placed between the
</HEAD> and <BODY> tags or it can be placed into a separate file
and accessed by multiple documents on your web site through the
LINK tag as in: <LINK rel=STYLESHEET HREF="mysheet.css"

The second method defines Styles inline with individual tags. Inline
tags are only applied to the current tag but will take precedence over
global container styles. An example of an inline style is:

<p style="color:red;Font-Size:24pt;background-color:green">This is
a style example</p>

What styles are available?

Many of the styles such as FONT expand upon the basic HTML
elements. Some Styles such as BACKGROUND add new features.
Some of the major categories are (capitalized only for clarity)
TEXT, VERTICAL, WHITE, WIDTH and WORD. Many categories
also include multiple properties providing a wealth of new design
capabilities to HTML authors.

So just why do Style Sheets Cascade? It refers to the potential
conflict that arises when an element has the same attribute assigned
to it multiple times. This can occur when a style is defined in a
external file, again in a container and again in multiple in-line
attributes. The Cascade determines which style will be used. This is
usually (simplistic) the style closest to the element it is applied to.

With the availability of new HTML authoring tools such as IMS, it
is not necessary to become proficient in the use of CSS. Having a
basic understanding of the underlying technology however, is an
invaluable advantage.

If you would like to find out more about Style Sheets, an excellent
place to start is the W3C Style page at http://www.w3.org/Style/
If you are not aware of it, the W3C or World Wide Web Consortium
is a group of Internet professionals responsible for defining the www
standards such as HTML. The W3C web site is at
http://www.w3.org/ and contains all kinds of useful Internet
Promoting your site: Links

Did you know that many of the major search engines rank your site
according to how many links there are to it? How many links are
there to yours? You can find out on many search engines by
searching for your site with a special code. Try these searches
replacing yoururl.com with of course, your URL.




How important are links? It depends on your business but generally
for most web sites, links are more important than search engine
ranking. For one thing, as previously mentioned some search
engines use links as a criteria in your ranking. More importantly
however, appropriate links are the best way to generate high quality
pre-qualified visitors.

For example, if someone is looking for an antique vase and does not
find it on an antiques page, they are more likely to try a link that
says: "Looking for an Antiques Vase? Try these quality sites." than
they are to retry a search engine. In fact, most users will follow links
from site to site based on a recommendation in order to find what
they are looking for. They will revisit the search engines only after
their leads dry up.

Getting people to link to your site is consequently a high priority
requirement for anyone that is seriously interested in promoting
their business.

Who should you try to get to link to you? In simple terms, anyone
and everyone. In more practical terms however, it depends on the
effort and what you have to give up in return. Exchanging a banner
add on your site for a link from a high quality busy site may be
extremely valuable for attracting new visitors. The banner may
however, redirect your hard sought visitor to the banner site and
away from yours. Banners also tend to clutter a web page, increase
the load time and distract your visitors. You can only put up a
limited number and then what do you exchange?

Look for web sites that cater to the same visitors as you do. If you
sell camping gear why not exchange links with campgrounds. What
about competitors? Sometimes competing stores attract more
combined customer when located near each other than when they
are not. This is a judgment call on your part.

Promoting you site through links is an extremely valuable and
interesting topic. I will expand upon it in several future issues.

IMS tip: Page layout techniques.

IMS Web Engine and IMS Web Spinner are described as Drag and
Drop editors. Drag and Drop allows you to select any Object and
move and scale it with your mouse to any location and size in the
work window. Both programs also provide fine positioning and
alignment control down to the pixel level. This is accomplished
through Toolbars, Dialogs and keyboard operations.

Did you know that a selected Object such as a picture or text can be
nudged into place by using the arrow keys on your keyboard. Each
tap of an arrow key will move the Object 1 or 2 pixels in the desired
direction. When scaling an Object with the mouse, hold the Shift
Key to maintain its aspect ratio.

Objects can also be Aligned along any edge or center by selecting
them all into a temporary group. Use the mouse with the left key
pressed to create a bounding box around the desired Objects. When
done, the buttons on the Align Toolbar will be highlighted so that
you can Align them all along the top, bottom, left, right or center
lines. Once aligned, move the Group Object to its approximate
desired position and then use the key arrows for precise positioning.
Selecting outside of the Group Object will remove the temporary
group and leave each member as an independent Object.

The Object Editor also includes Position and Scale dialogs. An
Object's position and size can be entered numerically so that they
will be consistent from Object to Object. If you loose an Object by
moving it off the top or left screens, by scaling it too small or hiding
it behind another Object, you can use the Reset Transforms button in
the Object Editor Options dialog to return it to its default state.

Objects can be moved in Front or Behind each other with the To
Front, To Back, Forward and Back commands in the Arrange menu
or Toolbar. To select an Object that is behind another Object hold
the Shift Key while selecting.

Once you have an Object precisely where you want it, use the Lock
Key to prevent it from being accidentally moved or scaled.

Reader Questions:

Last week MRD manju_rd@krec.ernet.in asked:
How can I upload my Home page through email?

"Pamela Heywood" pammy@arrakis.es offers this answer.

The one I know about to which you can upload via email is Internet
Trash -yep really! http://internettrash.com They call themselves a "free
spirited open homepage environment".

Maybe I missed this...

When using the shading feature......How do you get it to work for Netscape
as it does for IE. Is this possible?
Netscape seems to show the shaded areas only where there is text. Space
surround the test is not shaded. Ie will show a shaded area completely

"J. Michael Mc Kay" webhealer@ontariowellness.net

You are correct. Netscape does not fill the entire bounding box of a
Text Object. It is not fair to say that this is a fault but simply a
difference between the two Browsers. I am not too fond of this style
but I do like their outline style that leaves a few pixel open at the
edge of their bounding box.

If your design requires that you have a solid background, you can
try putting a rectangle Object of the desired color behind the text.
You can group the text and rectangle objects to help simplify your
layout. If your layout does not demand that the entire background be
solid, you may wish to leave it the way it is as a distinguishing
difference between the Browsers.

In any case, not withstanding the efforts of the W3C, there are
numerous differences in the way the major Browsers will display a
page. This is such a significant topic that I will address it in more
detail next week.

Next week.

1. Browser Differences
2. Promoting your site: Attractive Content
3. IMS tip: Layout Guides and Grids
4. Reader Questions.
Send your Questions to mailto:tips@VirtualMechanics.com with Question
as your Subject. If we don't know the answer, another reader may.

© Copyright 1999 Virtual Mechanics
To SUBSCRIBE send an email to:
tips@VirtualMechanics.com with
JOIN as the only Subject word.

To UNSUBSCRIBE send an email to:
from the e-mail account under which you subscribed with
UNSUBSCRIBE as the Subject.

Subscription information and past issues are available at:
Web Tips
Please forward this news letter on to your colleagues and friends.

Web Tips Archive
This page is suitable for printing.

Virtual Mechanics