FrontPage 2000 User Guide PDF 6 of 20 AddingApplying

Document Sample
FrontPage 2000 User Guide PDF 6 of 20 AddingApplying Powered By Docstoc
					                                                                                   FrontPage 2000 User Guide
                                                                                                  PDF 6 of 20
                                                                              Adding/Applying a new CSS style



Quick Note: Throughout these guides there are multiple references to menu paths you should take in order to accomplish a
particular task. In the interests of clarity, whenever a menu path is outlined, in addition to writing a long description i.e. “Go
to the ‘file’ menu and then choose the ‘new page’ option and then choose the ‘open’ option”, these guides will also use a
summary bold form like this: File > New Page > Open.

Adding/Applying a new CSS style

If you want to apply a style to your text or an image then there are two ways of doing it in FrontPage 2000. The WRONG way
and the RIGHT way. FrontPage 2000 does not promote either way of doing it.

The WRONG way is to manually specify all the characteristics of your font or image. Choose a font, choose a size, choose a
colour, choose an alignment, choose anything you like and apply it bit by bit directly to your text using options from the
formatting toolbar at the top of the page. This is very easy to do but is bad practice and creates pages that fail accessibility
testing and are difficult to change on mass at a later date.

The RIGHT way is create a CSS (see FrontPage 2000 guide #5) and specify styles in that document which you reference
from your Web page. This approach allows you to create what are called style ‘classes’ that incorporate numerous features
(fonts, colours, sizes, padding, alignment, etc) and access them with a single simple bit of html.

For example you might create a style called ‘.titletext’ for the text in your titles. This style might be Arial font, 100% size,
150% line height, Blue, left-aligned, and on a yellow background. To apply this style all you would have do is put
class=”titletext” into your html inside the tag for the text in question. E.g. <H1 class=”titletext”>This is my Title</H1>. All
the elements of your style will be applied automatically at once when you reference it in this way. It’s the CSS itself that
holds all the information that is accessed, in this case under the style name .titletext (classes begin with a ‘.’).

To apply a new CSS style you first have to create one in your CSS page. To do this double click on your CSS file to open it in
the main editing window.

Then you need to click the style button (see figure 1). Or go to the Format Menu and choose the Style option.

Format > Style




Figure 1

When you do this you get the CSS dialog (see figure 2a and 2b) that allows you to either redefine the styles of existing
common html tags or create your own new styles.




Figure 2a and 2b

Depending on what option you choose from the List menu you will get a slightly different interface. ‘New’ starts the process of
making a new user-defined style. ‘Modify’ allows you modify an existing one or modify a previously done user-defined one.

Clicking on ‘New’ gets you the following dialog (see figure 3):




                                                                                      Ben Coulthard – Computer Centre - Page 1
                                                                                 FrontPage 2000 User Guide
                                                                                                PDF 6 of 20
                                                                            Adding/Applying a new CSS style




Figure 3

You have a section to type the name of your new style (start it with a full stop) and a ‘Format’ button that gives you options
to define the characteristics of your style, including Font, Paragraph, Border, Numbering and Position.

Once you’ve defined your style click Ok and then Ok again and you’ll be back in the main editing window. You should
hopefully see that any style elements you’ve defined have now appeared as a new style in your CSS (see figure 4).




Figure 4

The BIG problem with FrontPage 2000 is that it seems to have been designed to help you make very basic CSS and nothing
more, unless your turn CSS 2.0 compatibility on (this is fundamentally wrong). CSS 2.0 is not fully in use yet (not supported
by enough browsers) and tends to include the more complicated elements of CSS for the advanced user, such as positioning.
However, FrontPage 2000 has (for unknown reasons) lumped in a number of the really useful CSS 1.0 features under CSS
2.0 and as such you can’t access them unless your turn CSS 2.0 on which also makes available a number of more advanced,
less supported bits of CSS.

Basically this means that a person coming in at beginners level, wanting to do CSS, is actually being restricted by the
FrontPage 2000 software, rather than their ability to cope with the CSS. And if they want access to anything other than the
most basic CSS features they have to turn CSS 2.0 on and expose themselves to more advanced CSS features.

Some of the really useful CSS 1.0 features that have been wrongly bundled in with CSS 2.0 are:

Background colour
Background image

                                                                                    Ben Coulthard – Computer Centre - Page 2
                                                                                  FrontPage 2000 User Guide
                                                                                                 PDF 6 of 20
                                                                             Adding/Applying a new CSS style



Box padding and Margins
Border style, width and colour
Different bullets for lists
… and there are more.

Some features of CSS that are just missing complete, regardless of what level of CSS is turned on are:

Font strings (font groups rather than single fonts)
% font sizes for scalable fonts

Applying a style is relatively simple once you’ve made one in your CSS document. All you need to do is select the section of
text or other page element that you want to apply your style to and then choose your style from the drop down style menu
(see figure 5). Your new style will hopefully be in this list if you’ve defined it properly.




Figure 5

As soon as you choose a style from this list it will be applied to your selected text/page element (see figure 6).




Figure 6

TIP: You can check your html code to see if the style has been applied. Viewing/editing html code is covered by FrontPage
2000 guide #7. You should see a ‘class=’ element added within the tag of the section of code in question.

<p class="myexamplestyle">this is a bit of styled text</td>




                                                                                     Ben Coulthard – Computer Centre - Page 3