Web site Design in MS FrontPage
Step 4. Using Styles
It is possible to generate entire web layouts using style sheet files, using no tables what so ever. The advantage in this approach is that generated pages are more search engine friendly and also compatible with a greater range of browsers. As this is a more advanced approach, this tutorial has focussed on a table based approach, which is an easier way to learn.
It is still possible to use a style sheet with a table based web design. Using a style sheet is a great idea as it allows you to format fonts and layout without using font tags and other formatting. There is subsequently much less code on the page and the pages will load much more quickly. It is also much easier and quicker to apply formatting, and the formatting will be uniform throughout your website. A change to the style sheet file will update all pages linked to it.
RIGHT CLICK HERE
and select SAVE TARGET AS
to download a sample style sheet
To link to the style sheet:
1. Open your Dynamic Web Template file.
Go to the ‘format menu’ and choose ‘style sheet links’
2. Click the add button and navigate to the folder you saved your
style sheet to.
(placing it into a separate folder named ‘styles’ is a good idea)
3. Click OK. The template is now linked to the style sheet.
4. Open the file in MS FrontPage. While the coding for style sheets
is quite easy to learn, you can visually edit the .css file in FrontPage
using the style tool bar.
5. To edit a style, select it from the list. Edit the font, paragraph, border, numbering and position attributes as shown in the image above. You can also create new styles by clicking the new button. Styles preceded by a dot (e.g.: .menu) are classes. They may be applied to other styles. (e.g. H1.menu).
Styles: a few other points:
Any html tag can have a style defined in the style sheet
You can create any number of classes which can then be applied to any style
You can add additional attributes to a style using IDs.
(ID styles are written on the style sheet like this: #menu)
in html code, you might write something like this:
<div class="super" id="menu">
text goes here…
</div>
Cascading Style Sheets are call ‘cascading’ because one type of styling will override another.
1. font tags will override all styles
(e.g.: <font face="Verdana"> )
2. Styles applied to a particular section will override styles from
any externally linked CSS files.
(e.g.: <p style="margin-left: 12px">
text goes here…
</p> )
3. Styles in the head of an HTML document will override any externally linked CSS files.
4. This feature is useful as you may want to format your website with an externally linked .CSS file but want to apply a different style to several pages, or apply a different style to a section of a page.
You can link a web page to several different style sheets.
This can be useful when you have so many styles on a style sheet it
becomes difficult to locate particular styles. You might want to divide
the styles between different sheets.
(e.g. text, layout and navigation could all have separate style sheets).
You can include comments in your style sheet like this:
<!-- menu section --> This has no effect on the style. It just makes it
easier to identify particular styles on the sheet.
