Softpanorama
(slightly skeptical) Open Source Software Educational Society

May the source be with you, but remember the KISS principle ;-)

Google   

Frontpage and Styles

News

See also

 Recommended Links

Books

 Recommended Links

Search & Replace

Style sheets can be applied to a web page in three ways:

Styles are often used in FrontPage and Word to format text and paragraphs. It's not easy to use them to format words and parts of sentences. 

Edit an External Style Sheet

  1. Open the .css file in FrontPage.
  2. Select Format|Style from the menu bar.
  3. Highlight the style from the list that needs to be changed and click the Modify button.
     
  4. Make the necessary changes by selecting options from the Format button menu.
  5. Click OK when finished and save the style sheet.
Microsoft provides programming examples for illustration only, without warranty either expressed or implied, including, but not limited to, the implied warranties of merchantability and/or fitness for a particular purpose. This article assumes that you are familiar with the programming language being demonstrated and the tools used to create and debug procedures. Microsoft support professionals can help explain the functionality of a particular procedure, but they will not modify these examples to provide added functionality or construct procedures to meet your specific needs. If you have limited programming experience, you may want to contact a Microsoft Certified Partner or the Microsoft fee-based consulting line at (800) 936-5200. For more information about Microsoft Certified Partners, please visit the following Microsoft Web site:
http://www.microsoft.com/partner/referral/

For more information about the support options that are available and about how to contact Microsoft, visit the following Microsoft Web site:

http://support.microsoft.com/default.aspx?scid=fh;EN-US;CNTACTMS

External Style Sheets

To create an external style sheet, follow these steps:

1. In FrontPage, create a FrontPage web named "Style" (without the quotation marks).
2. On the View menu, click Page.
3. On the File menu, point to New, and then click Page.
4. Click the Style Sheets tab, click the Normal Style Sheet, and then click OK.

FrontPage will create a new style sheet page with a .css file name extension and open it for editing in the Page View.

NOTE: If you select a style sheet other than the Normal Style Sheet, FrontPage opens a pre-made or custom style sheet (example: the Downtown style sheet).
5. Type the following: 
body
{
background-color: white
}
h1
{
font-size: 12pt;
font-family: "Arial";
color: black
}

p
{
font-size: 10pt;
font-family: "Times New Roman";
color: black
}

a
{
text-decoration: none;
font-weight: bold;
color: black
}
6. On the File menu, click Save. Select the location you want to save. In the File Name box, type: External.css, and then click OK.
7. Create a new page in FrontPage.
8. On the Format menu, click Style Sheet Links.
9. In the Link Style Sheet dialog box, click Add.
10. Click to select the External.css file from the list, and then click OK.
11. Click OK again.
12. Save the page.

HOW TO Create Cascading Style Sheets in FrontPage 2000

This article describes how to create external and embedded cascading style sheets (CSS).

Microsoft provides programming examples for illustration only, without warranty either expressed or implied, including, but not limited to, the implied warranties of merchantability and/or fitness for a particular purpose. This article assumes that you are familiar with the programming language being demonstrated and the tools used to create and debug procedures. Microsoft support professionals can help explain the functionality of a particular procedure, but they will not modify these examples to provide added functionality or construct procedures to meet your specific needs. If you have limited programming experience, you may want to contact a Microsoft Certified Partner or the Microsoft fee-based consulting line at (800) 936-5200. For more information about Microsoft Certified Partners, please visit the following Microsoft Web site:

http://www.microsoft.com/partner/referral/

For more information about the support options that are available and about how to contact Microsoft, visit the following Microsoft Web site:

http://support.microsoft.com/default.aspx?scid=fh;EN-US;CNTACTMS

NOTES

• To use the full functionality of cascading style sheets, you need a browser that can support them, such as Microsoft Internet Explorer version 4.0 or later.
• Some browsers only support certain aspects of cascading style sheets.
• Your results may differ, depending on the browser you are using.
• Do not use themes for this demonstration, or the examples will not work properly.


back to the top
 

External Style Sheets

To create an external style sheet, follow these steps:

1. In FrontPage, create a FrontPage web named "Style" (without the quotation marks).
2. On the View menu, click Page.
3. On the File menu, point to New, and then click Page.
4. Click the Style Sheets tab, click the Normal Style Sheet, and then click OK.

FrontPage will create a new style sheet page with a .css file name extension and open it for editing in the Page View.

NOTE: If you select a style sheet other than the Normal Style Sheet, FrontPage opens a pre-made or custom style sheet (example: the Downtown style sheet).
5. Type the following: 
body
{
background-color: white
}
h1
{
font-size: 12pt;
font-family: "Arial";
color: black
}

p
{
font-size: 10pt;
font-family: "Times New Roman";
color: black
}

a
{
text-decoration: none;
font-weight: bold;
color: black
}
6. On the File menu, click Save. Select the location you want to save. In the File Name box, type: External.css, and then click OK.
7. Create a new page in FrontPage.
8. On the Format menu, click Style Sheet Links.
9. In the Link Style Sheet dialog box, click Add.
10. Click to select the External.css file from the list, and then click OK.
11. Click OK again.
12. Save the page.

 

FP98 How to Create Cascading Style Sheets in FrontPage 98 This article describes how to create an external, embedded, and inline Cascading Style Sheet (CSS).

Microsoft provides programming examples for illustration only, without warranty either expressed or implied, including, but not limited to, the implied warranties of merchantability and/or fitness for a particular purpose. This article assumes that you are familiar with the programming language being demonstrated and the tools used to create and debug procedures. Microsoft support professionals can help explain the functionality of a particular procedure, but they will not modify these examples to provide added functionality or construct procedures to meet your specific needs. If you have limited programming experience, you may want to contact a Microsoft Certified Partner or the Microsoft fee-based consulting line at (800) 936-5200. For more information about Microsoft Certified Partners, please visit the following Microsoft Web site:
http://www.microsoft.com/partner/referral/

For more information about the support options that are available and about how to contact Microsoft, visit the following Microsoft Web site:

http://support.microsoft.com/default.aspx?scid=fh;EN-US;CNTACTMS

NOTES:

• To use the full functionality of Cascading Style Sheets, you need a browser that support them, such as Microsoft Internet Explorer 4.0. Some browsers support only certain aspects of Cascading Style Sheets. Your results may differ, depending on the browser you are using.
• Do not use themes for this demonstration or the examples will not work properly.

External Style Sheets

To create an external style sheet, follow these steps.

1. In FrontPage Explorer, create a FrontPage web named Style .
2. On the Windows Start menu, point to Programs, point to Accessories, and then click Notepad. Type the following code: 
      <STYLE TYPE="text/css">
      <!--
      BODY {background-color: white}

      H1 {font-size: 12pt;
          font-family: "Arial";
          color: black}

      P  {font-size: 10pt;
          font-family: "Times New Roman";
          color: black}

      a {text-decoration: none;
         font-weight: bold;
         color: black}
      -->
      </STYLE>
3. On the File menu, click Save. In the File Name box, type External.css and click OK.
4. Switch to FrontPage Explorer and then import the External.css file into the Web by following these steps:

 
a. On the File menu, click Import.
b. Click Add File.
c. Select the External.css file and click Open.
d. Click OK.
5. Create a new page in FrontPage Editor.
6. Click the HTML tab located at the bottom of the FrontPage Editor window.
7. Type the following HTML code between the <HEAD> and </HEAD> tags: 
      <WWLINK REL="stylesheet" HREF="external.css" TYPE="text/css">
8. On the File menu, click Save. In the File Name box, type Style1.htm and click Save.

NOTE: The Style1.htm file and the External.css files should be saved in the same folder.

Embedded Style Sheets

To create an embedded style sheet, follow these steps:

NOTE: Do not use themes for this demonstration or the examples will not work properly.

1. In the FrontPage Editor, create a new page. To do this, click New on the File menu.
2. On the Format menu, click Stylesheet.
3. In the editor window in the Format Stylesheet dialog box, type the following code.

NOTE: Be sure to type your code between the <!-- and --> tags. 
      BODY {background-color: white}

      H1 {font-size: 12pt;
          font-family: "Arial";
          color: black}

      P  {font-size: 10pt;
          font-family: "Times New Roman";
          color: black}

      a {text-decoration: none;
         font-weight: bold;
         color: black}
4. Click OK.

Inline Styles

To create an inline style, follow these steps:

1. In the FrontPage Editor, create a new page. To do this, click New on the File menu.
2. Place the insertion point in the top left corner of the page. Type some text on the page. Select the text you just typed and then click Hyperlink on the Insert menu.
3. Select the page you want to use as the target of your hyperlink.
4. Click Style.
5. In the Style dialog box, do the following:

 
a. Click the Colors tab.
b. In the Foreground Color List For, select Black.
c. Click the Text tab.
d. In the Weight list, click Bold.
e. In the Decoration list, click None.
f. Click OK.
6. Click OK.

For more information about Cascading Style Sheets, please see the following article in the Microsoft Knowledge Base:

179628 FP98: What are Cascading Style Sheets?

 

Working With Styles and Style Sheets

 

To create a new style:

  1. In the CSS Styles panel (Window > CSS Styles), click the New CSS Style button (+) on the bottom of the panel.

    The New CSS Style dialog box appears.

     

    Figure 15. The New CSS Style dialog box

  2. Select a selector type.

    Dreamweaver supports class selectors and tag selectors. A class selector defines a new named style, such as myBodyText. Once defined, you can apply the myBodyText style to any text selection.

    A tag selector applies to all HTML tags of a particular type. For example, if you select the table row tag, tr, and set the font to Helvetica; this then applies the Helvetica font automatically to all table rows.

  3. Select the location where you want to define the new style, as follows:
  4. Click OK.

    The New CSS Style dialog box closes and the Style Definition dialog box opens.

    The CSS Style definition dialog box

    Figure 16. The CSS Style definition dialog box

  5. Use the Style Definition dialog box options to define the new CSS style.
  6. When you’re done, click OK.

To use a predefined style sheet:

  1. Choose File > New to open the New Document dialog box.
  2. In the Category list, select CSS Style Sheets.
  3. In the CSS Style Sheets list, select the style sheet you want. Dreamweaver displays a preview of the styles as well as a brief description of the style sheet.

    The Styles preview dialog box

    Figure 17. The Styles preview dialog box

  4. To create the style sheet, click Create or double-click the item in the list. The style sheet appears in code format in the Document window.
  5. Choose File > Save to save the document.

    Before you can apply the styles defined in an external style sheet, you must attach the style sheet to your pages.

To attach a style sheet to your pages:

  1. Open a page and then open the CSS Styles panel (Window > CSS Styles).
  2. Click the Attach Style Sheet button at the bottom of the CSS Styles panel.

    The Attach Style Sheet button

    Figure 18. The Attach Style Sheet button

  3. Browse to the style sheet and select it.

The individual styles appear in the CSS Styles panel. They also appear in the Style pop-up menu in the Property inspector.

The Property inspector style pop-up menu

Figure 19. The Property inspector style pop-up menu

To apply styles:

Click or select a page element and do one of the following:

To modify styles:

  1. In the CSS Styles panel (Window > CSS Styles), select the style you want to modify.
  2. Click the Edit Style button at the bottom of the CSS Styles panel.

    The Edit Style button

    Figure 20. The Edit Style button

  3. Modify the style attributes in the Style Definition dialog box.

    The CSS Style Definition dialog box

    Figure 21. The CSS Style Definition dialog box

  4. Click OK.

For more information, see the following topics in Using Dreamweaver Help:

Notes:
  • This is a Spartan WHYFF (We Help You For Free) site written by people for whom English is not a native language. Some amount of grammar and spelling errors should be expected.
  • The site contain some broken links as it develops like a living tree... Please try to use Google, Open directory, etc. to find a replacement link (see HOWTO search the WEB for details). We would appreciate if you can mail us a correct link.
Google Search
Open directory
Research Index

News

ABC ~ All 'Bout Computers, Vol. 37 FrontPage and CSS, Part 1

By deleting all your font tags etc., etc., etc. from your HTML and using an external style sheet not only will your pages reduce in size, but the sheet only needs to be downloaded once, which makes for a MUCH faster loading site, and, as we all know, visitors won’t stay around for long.

If you have a page you wish to convert there is a FrontPage Addin called FrontPagePowerEdit that will remove unwanted code from all your pages at once.
http://frontpagepoweredit.com/

Remember also that if your user’s browser does not support CSS, they will still be able to retain functionality; your content will still be available as plain text.

Increased accessibility allows you to cater to everyone (something the search engines like) and is likely to increase your SEO standing. You can check my comments on this with free classes at: http://groups.yahoo.com/group/SEO_Techniques/  The group also contains regular extra classes for HTML and CSS. I highly recommend you join.

Recommended Links

In case of broken links please try to use Google search. If you find the page please notify us about new location
Google     

Microsoft/Using Cascading Style Sheets on Your Web Site

Inline Styles

ABC ~ All 'Bout Computers, Vol. 37 FrontPage and CSS, Part 1

 

FrontPage PowerEdit - Zap the FrontPage Bloated HTML Code $47 plug in for convertion the page. Quality in unclear.

Enjoy these other great FrontPage Web sites:

Copyright © 1996-2008 by Dr. Nikolai Bezroukov. www.softpanorama.org was created as a service to the UN Sustainable Development Networking Programme (SDNP) in the author free time. Submit comments This document is an industrial compilation designed and created exclusively for educational use and is placed under the copyright of the Open Content License(OPL). Original materials copyright belong to respective owners. Quotes are made for educational purposes only in compliance with the fair use doctrine.

Standard disclaimer: The statements, views and opinions presented on this web page are those of the author and are not endorsed by, nor do they necessarily reflect, the opinions of the author present and former employers, SDNP or any other organization the author may be associated with. We do not warrant the correctness of the information provided or its fitness for any purpose.

Last modified: November 08, 2008