In Part 1 of this series, we rebuilt the foundation of our website. In Part 2, we’ll start replacing FrontPage web components with standards-compliant alternatives.
You’ve probably already noticed that the Microsoft® FrontPage® web components aren’t included with Microsoft® Expression Web®. Though they provided an easy way to add relatively complex behaviors to web pages, they required installation of the FrontPage Server Extensions on your hosting provider’s web server, they slowed down page load times, and they were not standards-compliant.
It’s safe to use Expression Web to edit existing web pages that contain FrontPage web components. In most cases, you can even edit the properties for the FrontPage component just by double-clicking it in Design view. Of course, you won’t be able to add new instances of web components, but the existing ones will continue to function as before.
In the long run, though, we want to get rid of those legacy components and replace them with standards-compliant alternatives. The good news is that the alternatives are often easier to implement and customize than the FrontPage components they replace.
In this article, we’ll take a look at replacements for a few of the most popular web components. In Part 3 of this article series, we’ll find alternatives for the rest.
The TOC component
The FrontPage TOC component created either a category-based table of contents or a complete listing of all the pages in your web site, particularly well-suited for sitemaps.
There are several free, easy-to-use alternatives. For example, XML-Sitemaps and Simple Map will automatically generate an XML or HTML sitemap that you can add to your website.
In some cases, it may be simpler to create and maintain the TOC yourself. If you prefer to see your TOC presented graphically, WriteMaps and StyleMap are two of the many free site map tools that can help you manage your TOC structure.
The Link Bars component
The FrontPage Link Bars component created a bar of hyperlinks that pointed to pages within the active site or to external links. This component worked in conjunction with the FrontPage Navigation view; if you edited your site structure in Navigation view, the link bars would be updated to reflect the new structure.
Though you can edit the properties of an existing FrontPage Link Bar in Expression Web, there is no provision in Expression Web to modify your site’s navigation structure. If you add, move, or delete pages in Expression Web, the link bar will not update to reflect those changes.
If your web hosting provider supports server-side includes, rather than maintaining the same navigation links in every web page, you can create your navigation link list as a separate page and use a server-side include to embed the navigation include page.
I’ll talk more about includes in the next article.
Replacing a FrontPage Link Bar with a list of links
If you use the FrontPage Link Bar web component to build your site’s navigation, here’s a quick and versatile alternative navigation system, based on standards-compliant HTML and CSS.
We’ll create a list of links in Expression Web, and then we’ll apply styles using cascading style sheets (CSS) to display it as a vertically-formatted navigation block and as a horizontally-formatted navigation bar.
First we create an HTML unordered list of our main navigation links:
<ul id="nav"> <li><a href="default.html">Home</a></li> <li><a href="articles.html">Articles</a></li> <li><a href="books.html">Books</a></li> <li><a href="photos.html">Photos</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="about.html">About</a></li> </ul>
At first glance, an unordered list may seem like an arbitrary choice for a navigation structure. In fact, because an unordered list indicates a non-sequential series of related concepts, a bulleted list is the most semantically correct way to build website navigation. We’ll format the list using CSS.
ul#nav {
list-style: none;
}
ul#nav li a:hover {
background-color: #10A005;
color: #FFFF00;
}
ul#nav li a {
font: normal 9pt Tahoma, Verdana, sans-serif;
width: 60px;
padding: 3px 8px;
background-color: #106015;
color: #FFFFFF;
text-decoration: none;
border: 1px #08400B solid;
display: block;
}
Using these style definitions, the navigation component looks like this:
If you prefer a horizontal format, you can change the display property value from block to inline and add a float:left property as shown in the following code example:
ul#nav {
list-style: none;
}
ul#nav li a:hover {
background-color: #10A005;
color: #FFFF00;
}
ul#nav li a {
font: normal 9pt Tahoma, Verdana, sans-serif;
width: 60px;
padding: 3px 8px;
background-color: #106015;
color: #FFFFFF;
text-decoration: none;
border: 1px #08400B solid;
display: inline;
float: left;
}
That tiny code edit changes the navigation display to this:
The Photo Gallery component
The FrontPage Photo Gallery component provided an easy way to insert a photo gallery with clickable thumbnails into a page. It was difficult to customize, however.
There are dozens of web photo gallery tools—many of them free. Web Album Generator is a surprisingly robust tool for this sort of task, and it’s free. Or, if you already have Microsoft Expression Media, an HTML gallery builder is included that quickly generates a photo gallery, complete with thumbnails, and produces standards-compliant HTML.
Conclusion
Replacing FrontPage web components with standards-compliant alternatives is another important step towards making your website more responsive, as well as easier to maintain and extend.
We’ve only just started! In part 3, we’ll take a look at the Dynamic Effects, Web Search, and Included Content web components and how we can replace those with standards-compliant alternatives.
[...] Previous article “Hey there” from the xIQ team! Next article »Introduction to [...]