In This Site

Home
Free News Updates
Using Microsoft FrontPage
Cascading Style Sheets
Database Fundamentals
FrontPage & Access
FrontPage Navigation
Website Security
Solving Problems
Learning SQL
Code Samples
Promote Your Site

In This Section

The number one source for making your website sell!

 

 

TopStyle Pro
The Power of Cascading Style Sheets
without the Learning Curve

TopStyle Logo

Screen shot #1

If you are new to cascading style sheets (css), the learning curve can make the benefits seem distant and few. If you use FrontPage AND you want to create style sheets with a minimum of fuss, then look no further than TopStyle Pro. This program provides all the tools you need to create cascading style sheets that will make your website look as good as the pros.

There is simply NO better system for creating your first cascading style sheet than TopStyle Pro - and best of all, TopStyle Pro integrates seamlessly with Microsoft FrontPage.

Double-click on a css file in FrontPage, and TopStyle Pro opens so you can easily edit the file. When you're finished, simply save and close the file, and your website is updated immediately. It's that easy.

Right from the start it opens with an easy to use interface that will walk you through all the basic steps. Its tutorial explains the fundamentals of css and helps you to create your first page. It will even check the code for you to make sure there are no errors. It will help you create style sheets that will be compliant with the CSS Level 1 or Level 2 specifications AND that will display correctly using all the current browsers.

If you've never before created a style sheet then you can start with their step-by-step Style Sheet Wizard. It will take you through the process of selecting background and text colors, setting the properties for your hyperlinks and then producing the basic style sheet.

From the file menu select Style Sheet Wizard. You will see the following graphic:

The next screen lets you select the color for your text and for the background. In this case, I've selected a light blue background with black text.

In step 3, you select the font family that you want to use for your text. You can select multiple font families if you wish. It will try the first on the list and if it is not available, it will try the second and so on.

While most Windows based machines will have the Arial font installed, some non-Windows platforms may not. For this reason, it is always advisable to select a generic font family like Mssans (a generic sans-serif font like Arial). This is done in step 4.

In step 5, you select the characteristics of your body style font such as the size, weight and alignment.

In step 6, you select the properties of your hyperlinks. These include the color of the link text, whether you want it underlined or not and the behavior of the link when your mouse is hovering over the link.

Step 7 lets you see all the choices as they will appear on your website. In the graphic, you'll see the light blue background with black text that we selected in step 2. You'll also see the deep blue color to the hyperlink which will change to maroon when you hover your mouse over the link.

All that remains is to save the file and you're finished. TopStyle will load the file and you'll see all of the choices you made reflected in the page. Your program window will look like the following:

You can see under the BODY tag the black text color, blue background and Arial font style with sans-serif as the generic font. Hyperlink styles are defined as A and you can see the blue color selected (the color represented by the number 191970). For the hover behavior, you can see the color maroon selected.

That's all there is to it. You can add new styles whenever you wish. If you want to change the appearance of your heading styles, TopStyle's great tutorial will show you how. If you want to add additional style classes like highlight, menu styles, or emphasis styles, it is as easy as clicking on the New CSS Selector button on CSS Selections Window in the main TopStyle screen (see the image on the left). This will open another wizard called the Top Style Selector Wizard. This wizard will walk you through the process of adding additional styles to your style sheet.

It doesn't get much easier than this. TopStyle writes the code, it helps you make the right decisions and then it checks your page to make sure that it complies with all the standards.

All you need to do now is to import it into your web site and connect your pages to the style sheet. In FrontPage 2002, it's a simple matter of selecting Format-Style Sheet Links. You're done. all the pages you connect to your style sheet will reflect the choices you've made here. Updating your entire site is a simple matter of opening your style sheet and changing those aspects that you wish to change.

Click here to learn more

or

Click here to Order TopStyle Pro Now and start mastering the power of cascading style sheets Right Away


These tutorials are part of an upcoming training course called "FrontPage Magic - How To Create A Database Driven Website For Non-Programmers". Stay tuned for more details on this exciting new product.

Send your tips to .
All materials Copyright © Ward Cameron All Rights Reserved