Cannot use FrontPage link bars in Expression Web

Article ID: KB101725

Introduction

FrontPage Link Bars have been well-used in the past for their easy-to-modify nature; unfortunately, they do not validate, and they are no longer a feature in Expression Web. Expression Web does not provide any way to actually edit the link bar properties; also, Expression Web does not have a "Navigation View", so you cannot even change the order or text on a FrontPage link bar.

Update 3/2/2007: It's possible to get Navigation View temporarily back into Expression Web. See our related support article on getting Navigation View into Expression Web.

Instead of using FrontPage Link Bars, use an include page that holds text links. This article explains how to do that.

How to use an include page for basic text links

This tutorial works best with text link bars. If your FrontPage link bars uses a theme to achieve a button or graphic effect, you will find it difficult to duplicate that effect without some advanced graphics and CSS know-how. You may need to replace your graphic link bar with a text link bar, or contact the template developer for further assistance.

A basic text link navigation bar is simply normal hyperlinks, separated by vertical lines:

Link 1 | Link 2 | Link 3

1. In Expression, select the FrontPage link bar on the page. If the link bar is within an include page already, you are halfway there! Open the related include page and perform steps 2 and 3 below within the include page, then skip to step 5.
2. You will want to replace the link bar with your own text and hyperlinks. Delete the link bar component (or leave it up for reference and delete it at the end of this step). Start typing your navigation link text. Select the text and go to Insert > Hyperlink to change the text into a link. Link the text to the appropriate page. Separate your text with the vertical line character. You'll send up with a text navigation bar similar to the example shown above.
3. Now, select all of the links you just created -- that is, highlight your new manually-created "navigation bar." Type Ctrl-X to cut the links.
4. Type Ctrl-N to create a new blank page. Type Ctrl-V on the page to paste your links onto the page.
5. Save this new page. You may name the filename something like "include_menu.htm" or some other name that will allow you to easily recognize it. (If your link bar was already within an include page, you simply have to save the include page and you're done!)
6. Now, insert the include page onto your actual .htm or .html pages. Go back to the original page that you had open -- it currently doesn't have any links on it because we deleted the link bar and then cut the links that were created. Put your cursor in the empty spot where the navigation links should be, and then switch to Code view.
7. Paste this code into the HTML code. You will want to replace the filename with the filename of your newly created include page:
   <!--webbot bot="Include" U-Include="filenamehere.htm" TAG="BODY" -->
8. Save the page. The include page should be included onto the page, with your new text navigation bar in place!
9. On all your other pages, simply delete the FrontPage link bar component, then paste the HTML code into Code View and save.

Editing the link bar

To add or remove links from the link bar in the future, simply open the include page and edit the page with your new links. Once you save your include page, all the other include pages will be updated.

Variations

If you understand how styles work, you can format the links in your hard-coded link bar -- font formatting, using borders and background colors for "buttons," or using advanced CSS to create buttons using image backgrounds. This tutorial is not meant to be a complete overview of CSS, but below are some code examples that may be helpful.

Formatting text links

The code below formats the links to not have underlines and to be bold, while not making the vertical lines bold as well.

HTML code in include page:
<p class="menu">
<a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a>
</p>

Stylesheet code:

.menu a { font-weight: bold; text-decoration: none; }

Formatting bulleted list of links to display as colored button boxes

This code creates colored button boxes for each link and looks like the diagram below:

HTML code in include page:
<ul class="menu">
   <li><a href="#">Link 1</a></li>
   <li><a href="#">Link 2</a></li>
   <li><a href="#">Link 3</a></li>
</ul>

Stylesheet code:
.menu {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.menu li { margin-bottom: 3px; } /* this puts some space in between the buttons */

.menu a:link, .menu a:visited {
    display: block; /* this code allows a width or height to be set */
    width: 150px;
    color: #3366ff; /* this defines the color of the link text */
    border: solid 1px #666666; /* this defines the color and width of the border */
    background: #eeeeee; /* this defines the background color */
    text-align: center; /* this defines the text alignment */
    padding: 3px; /* this puts some space between the text and border */
    text-decoration: none; /* this removes the underline */
    font: 9pt Verdana, Arial, Helvetica, sans-serif; /* this defines the font */
}

.menu a:active, .menu a:hover {
background: #99ccff;
}

Using border colors to give the illusion of a 3D "button"

A variation of the button box above, this sample code varies the colors of the borders and background color to make the button look like it is being pushed.

HTML code - same as button box code above

Stylesheet code:
.menu {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.menu li { margin-bottom: 3px; }

.menu a:link, .menu a:visited {
    display: block;
    width: 150px;
    color: #000000;
    border-left: solid 3px #cccccc; /* the borders can be defined separately */
    border-top: solid 3px #eeeeee;
    border-right: solid 3px #888888;
    border-bottom: solid 3px #666666;
    background: #aaaaaa;
    text-align: center;
    padding: 2px 3px 4px 3px;
    text-decoration: none;
    font: 9pt Verdana, Arial, Helvetica, sans-serif;
}

.menu a:active, .menu a:hover {
    border-left: solid 3px #888888;
    border-top: solid 3px #666666;
    border-right: solid 3px #cccccc;
    border-bottom: solid 3px #eeeeee;
    background: #999999;
    padding: 3px; /* this slightly changes the spacing of the text to help with the push effect */
}

---

Was this helpful?

Please rate this article:

Not helpful			Very helpful
1	2	3	4	5	6	7

Email address: (not required)

(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)

Comments: (How can we improve this article?)


Clicking "Submit" will not clear this page.

---

link to this page: http://www.pixelmill.com/support/al0/kb101725.htm
permalink to this article: http://www.pixelmill.com/support/kb101725.htm

Back to top