Home
Up

How To Customize Cascading Style Sheets in FrontPage 2000.

by

L M Jackson

Introduction: 

 

This article assumes the reader has a functional knowledge of coding HTML with or without using FrontPage 2000.  i.e. The reader should know what a Paragraph tag is (e.g. <P> ...</P>). The reader should have a basic understanding of navigating the menus of Microsoft FrontPage 2000 (e.g. The "sidebar", "drop-down", "buttons" etc.). It is not necessary to know freehand 'style sheet' editing to use this information. The reader should understand basic Style Sheet structure and declaration (e.g. HTML tags are known as "Selectors" and "{...Element-Name: Property Stuff;}" is the structure of a CSS Element and their Properties).

FrontPage 2000 by Microsoft Corporation is still widely used today. As such, many are still learning to use the Tricks and Wizardry this software has to offer. At Microsoft Help and Support one may still find helpful FrontPage 2000 sections labeled, "Highlights & Top Issues", along with "Step-by-Step Instructions & How To Articles" (i.e. <http://support.microsoft.com/ph/1901>). These helpful sections are excellent support information for novice (who have some HTML skills), intermediate and up-through advance Web developers.

With current Web page Development Trends strongly supporting concepts like, "Separation of Presentation and Content" (A.K.A. "Separation of Style and Content") and "Semantic Markup", there is a real demand that a HTML Developer use CSS (i.e. Cascading Style Sheets) with their HTML coding.

If you do not already know this, "Separation of Presentation and Content" is a Web Design concept that recommends you code your pages’ Content with the "Semantic Markup" (i.e. Using HTML, XHTML, signs, symbols, etc. that relate to page interpreting.). Additionally, you create the Style/Presentation using an external CSS or XSL file. (You can also, code your CSS as Embedded/Inline of the HTML file but that defeats the separation concept.) There are many advantages for CSS coding (and some disadvantages currently.) but, that is a topic beyond the scope of this article.

 

So, with a background and foundation now explained, let's see how it is done in Microsoft FrontPage 2000.

---

Comcast High Speed Internet - $75.00 Cash Back & Free Modem  

Create a custom Cascading Style Sheet in Microsoft FrontPage 2000.

First, open one of FrontPage's built-in style sheets of choice. To do this follow these steps:

1. Go to "File" => "New" => "Page" => and choose the tab, "Style Sheets".
2. Choose one of the existing styles here, or choose the "Normal Style Sheet" (which is an empty style sheet of default name, "new_page_1.css").
3. Click the [OK] button.
4. Once you save this file, FrontPage shows a floating button on your screen, labeled, "A Style".

Note: As an alternative, you may by-pass the above Three steps and merely create a file /New Page in FrontPage and save it with the name "new_page_1.css” or any other name as long as it ends with the suffix ".css."

 

Second, you will want to edit the, "new_page_1.css" file now in created in FrontPage.

1. Click the "A Style" button. If the "A Style" button is not already showing, go to "File" => "A Style" and click on it. This opens the editing "Style" screen.
2. If adding a new "Style" Selector (i.e. h1, P, etc), click on the [New] button. If adding a new custom style, (i.e. #highlight {...}), then within the "List" box, choose "User-defined Styles", and then click the [New] button.
3. If modifying an existing "Style" Selector, highlight your choice on the left and click the [Modify] button. If modifying a new custom style, (i.e. #highlight {...}), then within the "List" box, choose "User-defined Styles", highlight your choice, and then click the [Modify] button.
4. Modify or add within the "Name (selector)" if necessary
5. Click the [Format] button to modify the CSS Font, Paragraph, Border, Numbering, and Position elements.
6. Click the [OK] button to save or the [Cancel] button to not save the editing.
7. Repeat steps numbers Two through Six for additional editing or click [OK] to save changes to CSS.
8. Click "Save or "Save As" and choose a name and location for the CSS file if you wish

Third, using a newly created, or modified, and saved FrontPage 2000 CSS file.

1. On your FrontPage sidebar "View" or your overhead drop-down menu "View," click on "Folders".
2. Select the filenames (using your [Shift] or [Control] keys) of the files to be using the CSS that was created/modified and saved.
3. On your overhead, dropdown menu, choose "Format" => "Style Sheet Links" which opens to the "Link Style Sheet" page.
4. Choose "Selected pages(s)" or "All pages" radio button.
5. Click the [Add] button. This opens the "Select Hyperlink" page.
6. Next to the "Look in" window, use the navigation buttons (Up 1 Level or Drop-down) to the right to locate your desired/created CSS.
7. Highlight your CSS. It will appear in the "URL" window near the bottom. Click the [OK] button and your CSS is saved under the URL box of the "Link Style Sheet" page.
8. Click [OK] to close the "Link Style Sheet" page.
9. Your CSS has been applied to all the previously selected (steps 2 through 4) pages.

---

Safe editing of "Shared Border" CSS.

 

Shared Borders are created with a FrontPage wizard that creates columns and borders around the main content of a web page.  These "Shared Borders may be applied to one, or more pages of a FrontPage web in a single choice selection.

1. In FrontPage go to "Tools => "Web Settings" => "Advance" tab and select "Show documents in hidden directories". (If this is not already done.)
2. Click the [OK] button.
3. On the sidebar or drop-down menu, click [Folders] => go to "_borders" => then choose the border file (e.g. left.htm) you wish to work with and make a copy.
4. Load the original border file into your FrontPage editing window like any other HTM file.
5. You may now edit Content or Markup as needed. You may safely do so above or below the existing navigation paragraphs in this file but, it is unwise to edit within the <P></P> of the navigation toolbar! Microsoft has inherent scripting that most developers are not skilled to modify. To ignore this warning may result in unpredictable errors (e.g. MS IE may abruptly abend or lock on pages that have been changed within these flagged paragraphs.
   
   As a partial workaround, you may ’cascade’ your desired effects by moving the "<LINK rel=...> css tag AFTER FrontPage’s <!--MSTHEM--><LINK REL..." and <META NAME="Microsoft Border"...> . This will allow for much of your CSS to be effective under the rules of Cascading over default themes of FrontPage.
   
   Additionally, you may edit the Theme itself using FrontPage’s Theme wizard (WYSIWYG). Thus, explicitly creating the colors you desire.
6. Depending on your task, you may use either or both, the WYSIWYG or HTML editing in FrontPage to customize the Shared Borders under the new block tags (e.g. <P>, DIV>, etc.). With your Markup (if needed at all) done, you are now ready for the section, "Safe custom editing of FrontPage CSS Themes within a Shared Border".

Safe custom editing of FrontPage CSS Themes within a Shared Border.

1. Apply a chosen FrontPage built-in theme to a single page first. This is a measure of safety.
2. Save this new themed page!
3. If you need to make Content or Markup changes in the Shared Border file, then follow the directions (and advice) laid out in section entitled, "Safe editing of "Shared Border" CSS".
4. At this point, FrontPage has created the CSS files for the Theme that you applied in Step 1 under the folder, "_themes\ThemesName.css".  There will probably be more than one (1) CSS file here. This is common with FrontPage built-in Themes.
5. Load the CSS file that you wish to modify into your FrontPage editor window like it was an HTM file. (You may need to view several of the CSS files to determine which file needs modifying.)
6. You may now edit any or all of the CSS Selectors and Declarations (Elements & Properties) as you wish using the methods described under the earlier section entitled, "Second, you will want to edit the, "new_page_1.css" file now in created in FrontPage".
7. If you need to locate another part of the built-in Frontpage CSS, you may repeat steps #3 through #6 in this section.

At first sight, it may appear that CSS customizing in Frontpage 2000 is complex. It really is not. It appears to be so because explaining coding or programming in literary text flow is difficult to visualize. Once you print these steps and step through Frontpage CSS using them, you will discover that it really is simple and quick. Admittedly, using a built-in Frontpage theme, along with FrontPage’s Shared Borders and customizing all three … the theme, the borders, and the CSS … appears challenging. However, after one or two step-throughs, this effort becomes easy as well.