Customizing Headers and Footers with MS Office Live Small Business

Exclusive offer: get 0% off this eBook here
Microsoft Office Live Small Business: Beginner’s Guide

Microsoft Office Live Small Business: Beginner’s Guide — Save 0%

Build and Customize your Microsoft Office Small Business Live Web Site with this book and eBook

$0.00    $0.00
by Rahul Pitre | November 2009 | .NET Beginner's Guides Microsoft Content Management e-Commerce

In this article by Rahul Pitre you'll start using the design tools to personalize your site's headers and footers. You'll customize its name and slogan, and in the bargain put your distinctive stamp on your website.

In this article, you will:

  • Decide what your website's title should be, and set it in your template
  • Decide what your website's slogan should be, and set it in your template
  • Decide what information should go into your website's footer, and set it

Although a website is just a collection of web pages, the collection is not random. A central theme ties the web pages together with common elements such as branding, logo, layout, and formatting. On really large websites, the interweaving of these elements can be quite complex. Each of Google's websites, for example, has its distinct identity and yet you can identify it as a "Google website". It takes a small army of designers and illustrators to achieve such a "Similar But Distinct" identity.

But it's fairly easy to establish a unifying theme for the web pages of a small website, such as yours. And you can do it all by yourself; a common header and footer is all that's usually necessary. Naturally, it would make immense sense if you could design a template for headers and footers once and use it on all of your web pages.

A template isn't all that revolutionary a concept. You've probably built a template in your word processor for your letterhead or for a boilerplate, for example. Many widely-used applications save you the trouble of repetitive formatting by allowing you to make templates. Therefore, it shouldn't come as a great surprise to you that you can build page templates in Office Live Small Business as well.

A web page template in Office Live Small Business has two components: information and design. The information component consists of the text and images that are specific to your website, such as your company name, logo, slogan, copyright notice, and so on. The design component deals with choosing the right font, colors, background pictures, and other such visual elements. Once you configure the necessary settings, you'll have a shell, so to say, which will appear around the content on your web pages.

Choosing a title for your website

A website's title is usually the name of the business it represents. My little company is called Acxede, for example. Therefore, it's logical that my site's title mimics my company's name. Now, there's only so much real estate available on a web page for the title. Because Acxede happens to be a short name, it can fit into most page layouts. But if your business is incorporated as Anthony Donaldson's Vacuum Cleaner Sales, Service, and Rentals Incorporated, this scheme of things breaks down. What do you do then? A good rule of thumb is to echo whatever name is on your business card. Unless your business card is the size of a postcard, you'd have shortened the name to something like Anthony Donaldson Inc. Use that as your site's title.

People often want to set their domain name as their site's title. Because my company is called Acxede, it would, of course, be terrific to have acxede.com as my domain name. And I do. Unfortunately, not everyone is that lucky. More likely than not, the domain name you want is already taken. Let's say that you're Sam and you own a deli called, naturally, Sam's Deli. Everyone just calls it "Sam's". It wouldn't be unreasonable for you to want the domain name sams.com. The trouble is that Sam's Publishing has already snapped it up. Okay, so how about samsdeli.com? Nope. Another Sam owns it. So you're forced to settle for a domain name that doesn't echo the name of your business; something like samsfreshfood.com, perhaps. Nevertheless, your website's title should still say "Sam's Deli" because that's the name of your business, no matter what domain name you ultimately settle on.

Now that you know more about setting a website's title than you ever wanted to, let's get around to doing the honors.

Time for action – setting the site title

  1. Pull down the Design Site menu from the Page Manager toolbar and select Design site. A new window opens, displaying the Microsoft Office Live Small Business Web Design Tool web page with Site Designer as the active tab.
  2. Click on the Header button on the ribbon. The Customize Header dialog opens.
  3. Replace the text Welcome to my site in the gray box in the Site Title section with your site's title. I'm going to set it as The Office Live Guide for the site that I'm building—this article's companion site.
  4. Pull down the select options for the font face just above the title. You'll see a choice of seven fonts: Arial, Courier New, Georgia, Tahoma, Times New Roman, Trebuchet MS, and Verdana.

    Why only seven? After all, Microsoft Word seems to have a hundred. The reason is that in the Web's architecture, the task of displaying a given font is delegated to your browser. Not every browser can display every font. If a browser can't display a font that you've specified, it displays one that it thinks is right. Such a substitution might distort your web page. But these seven fonts are, more or less, the least common denominator; most browsers support them. Therefore, the chances of your web pages being distorted are quite slim if you choose one of these seven.

    So which of these seven should you choose? Follow this two step process:

    • If one of the fonts in the list looks like the font on your letterhead or the sign above your office, choose that one.
    • Not even close? Choose either Georgia or Verdana.

    Most fonts, such as Arial or Times New Roman, came to computer displays from the world of print. They were designed to look good on paper. Making a font look good on paper is relatively easy because text is printed on paper in very high resolution. On a monitor, however, pixels of resolution are at a premium. Besides, the resolution can vary from monitor to monitor. Therefore, text will look better onscreen if you use fonts that are designed specifically for monitors rather than using fonts that are grandfathered from the print world. Georgia and Verdana are designed specifically for monitors and so they're the ideal candidates for the text on your web pages.

    Set the font you've chosen. I've set it to Georgia.

  5. Next, pull down the adjacent select options for the font size. You'll see a choice of seven font sizes. They're conveniently numbered from 1 to 7. Size 1 is the smallest and size 7 is the largest. For some inexplicable reason, people often choose a size that's either too big or too small. I recommend size 5 for the title. That's just about right for most websites built with Office Live Small Business.
  6. One thing you've got to remember, though, is that: Thou shalt use Georgia or Verdana in size 5 for your site's title is not the eleventh commandment. I've suggested these settings because, in my experience, they are just about right for most websites built with Office Live Small Business. They make the header appear proportionate to the text on the web pages. But, they may not be right for your site if its title or slogan is either too long or too short. Come back and experiment with the font face or size of the header elements if your pages look out-of-whack after you finish building your website.

    Set the font size you've chosen. I've set it to 5.

  7. Although you can choose a color for the title. The choice of color depends on other layout options as well.

    Although you can make the title bold, italicize it, or underline it, you'd do well by avoiding the temptation. Depending on a combination of factors such as the font face, font size, and resolution of a visitor's monitor, these special effects can make the text quite difficult to read. The last thing you want to do is to inadvertently make the title of your site unreadable.

  8. Your Customize Header dialog should now look something like this:

    Microsoft Office Live Small Business: Beginner’s Guide

  9. Keep the window open; you might as well set a slogan for your website while you're there.

What just happened?

You just took the first baby steps towards building your website! Agreed, all you did was set the site title—not exactly the kind of stuff that you'd write home about, but it's a fine start nevertheless.

Your site's title and slogan, which you'll set in the following section, play an important role in helping people find your site from search engines.

Choosing a slogan for your website

An Office Live Small Business website's slogan is really just its tagline; so I'll use the terms interchangeably. Successful businesses use catchy taglines to reinforce their brands. What comes to mind when you hear "Just do it!"? Nike. How about "Don't Leave Home Without It"? American Express. And "Eat Fresh"? Subway, of course.

See? People subconsciously associate taglines with brands or products. Come to think of it, the whole point of building your website is to reinforce your brand. Naturally, a good tagline will go a long way towards achieving your goal.

While a tagline sounds like a no-brainer, not every business has one. If you don't, you're not alone. After all, you can't spend a few million dollars to come up with one the way Nike, American Express, and Subway probably did. But if you happen to have one, it's a good idea to immortalize it on your website. And if you don't, now's the time to scratch the creative side of your brain and think of one.

But don't despair if you can't. You may be able to substitute a description of your business for the tagline with good effect. If you've shortened Anthony Donaldson's Vacuum Cleaner Sales, Service, and Rentals Incorporated, to Anthony Donaldson Inc., your tagline can be Vacuum Cleaner Sales, Service, and Rentals, or something to that effect. It may not be as potent as Nike's tagline, but at least it tells people what Anthony Donaldson does for a living.

Time for action – setting the site slogan

  1. Replace the text Add your site slogan here! in the gray box in the Site Slogan section with your site slogan. I'm going to set it to Build your own website in a day!
  2. Pull down the select options for the font face just above the title and set it to the font you've chosen. I'm setting it to Georgia again.
  3. Next, pull down the adjacent select options for the font size and set it to 4.

    Why 4? I didn't pull the number 4 out of a hat. I chose it because size 4 is a size smaller than size 5, the size of my site's title. If your Site Title is set to a size other than five, choose one size smaller than the size of your site's title.

  4. As with the Site Title, don't select a color for your Site Slogan. And stay away from the B, I, and U buttons as well. Your Customize Header dialog should now look something like this:

    Microsoft Office Live Small Business: Beginner’s Guide

  5. Click the OK button at the bottom of the Customize Header dialog. It closes and you arrive back at the Site Designer.
  6. Click the View button in Site Designer.

    Microsoft Office Live Small Business: Beginner’s Guide

    You'll be using the View button, and the Save button next to it, quite often. When I want you to click the Save button, I'll simply tell you to save your work. If I want you to click the View button, I'll tell you to preview your website. Whenever I refer to these buttons, directly or indirectly, you now know where to find them.

  7. A pop-up message asks you whether you want to save your changes. Click OK.
  8. A preview of your site comes up in a new browser window. Notice that the site now displays the new title and slogan, as shown in the following screenshot:
  9. Microsoft Office Live Small Business: Beginner’s Guide

  10. After you've admired your handiwork long enough, close the preview window and return to Site Designer.

What just happened?

You added a slogan to go along with your site's title. Why so much fuss about simply setting the title and slogan? In a word: findability.

Findability? I didn't make that word up, by the way. Honest! Well-known web usability expert Jakob Nielsen did. A site is findable if it's easy to find; that is, it appears near the top of search engine results when a person searches for relevant terms. You can find great advice about building usable websites on Mr. Nielsen's website at http://www.useit.com

Search engines attach considerable importance to the title of a web page. It tells them what the page is all about. But that's not the only thing they look at. They also try to determine whether the text on the web page has anything to do with its title. Because the slogan appears on every page with the title, a strong correlation between the two and their correlation with the text on your web pages will determine your web page's ranking in search results. To put it mildly, if your site's title and slogan stink, so will its ranking in the search results!

Therefore, don't take these settings lightly. If you don't put enough thought behind them, you risk relegating your web pages to obscurity.

Have a go hero – experiment with the site title and site slogan

Although I handed down the edicts on setting the font face and the font size for the Site Title and the Site Slogan, by no means are my recommendations cast in stone. Although following my recommendations will save you a good deal of time and heartache, you'll do a disservice to yourself if you don't experiment on your own. Depending on how long your Site Title or Site Slogan is, you might find a better combination of these settings if you try out a few variations. Here are a few suggestions:

  • If you've set your font to Georgia, you might want to try Verdana.
  • How about Georgia for the Site Title and Verdana for the Site Slogan? Or vice-versa?
  • Although I've recommended that you set the font size for your Site Slogan a size smaller than the font size for your Site Title, you might want to try a font size two sizes smaller than the size for your Site Title, especially if you've set different fonts for the title and the slogan.
  • Verdana is a wide font. If your site title or slogan has several wide letters like W and M, Verdana may not be the right choice. You might want to try a similar but narrower font, such as Arial.

Try out a few variations and settle on one that you like the best. You might want to get an opinion from a friend or a co-worker. And remember, you can come back and play with these settings any time.

Pop quiz 1

  1. Which of the following attributes make your website more "findable"?
    1. Your site's header
    2. Your site's title
    3. Your site's font setting
    4. Your site's slogan

The answer to this quiz is given at the end of this article.

Microsoft Office Live Small Business: Beginner’s Guide Build and Customize your Microsoft Office Small Business Live Web Site with this book and eBook
Published: November 2009
eBook Price: $0.00
Book Price: $39.99
See more
Select your format and quantity:

Setting the footer

Okay, so you now have your website's header under control. Let's jump to the other end of the page and deal with the footer. The usual suspects you'll find in the footers are:

  • Navigation links that mimic at least some of a website's main navigation
  • Contact information or a link to a page that displays contact information
  • Copyright notice
  • Links to privacy policy, disclaimers, and other fine print

Why are these elements commonly found in the footer? Because people expect to find them in the footer. A basic principle in designing websites is to place information where people can find it easily. It's not against the law to put the copyright notice in the header. But if you do, people are not likely to find it.

It's a good idea to stick to conventional wisdom and include the following elements in your website's footer:

  • A link to the Contact Us page because most people expect to find contact information in the footer
  • A copyright notice to placate your lawyers
  • A link to the privacy policy of your website because people often don't part with their e-mail addresses and are reluctant to contact you if your website doesn't have a privacy policy

So, your footer will look something like this:

Microsoft Office Live Small Business: Beginner’s Guide

And what about site navigation links? We won't consider them. Here's why:

  • As you'll see shortly, you can't build elaborate footers with Office Live Small Business, like the ones you see on blogs these days. Site navigation links tend to clutter the available real estate.
  • Their purpose in footers is to save people the trouble of having to scroll long web pages vertically simply to find a navigation link. Since you're building a small website with compact informational pages and not an online magazine with long articles, you don't really need them.
  • Some websites use images or scripting languages to build site navigation. People who turn off images or scripting support in their browsers can't see such navigation links. Ten years ago, during the Web's Stone Age, some designers started placing text navigation links in the footers to accommodate those people. Like most modern site-building tools, Office Live Small Business generates text-only site navigation. So, you don't have to repeat the links in the footer.

But that said, you may feel that the navigation links do belong in your website's footer. In the coming sections of this article, I'll show you how to add the Contact Us and Privacy Policy links to the footer. Once you know the process, you'll be able to add any other links you wish.

Time for action – customizing the footer

  1. Pull down the Design Site menu from the Page Manager toolbar and select Design site. The Microsoft Office Live Small Business Web Design Tool web page opens with Site Designer as the active tab.
  2. Click on the Footer button on the ribbon. The Customize your footer window opens:

    Microsoft Office Live Small Business: Beginner’s Guide

    Your window may not look this squeaky clean; you might already have a few links in the List of Links and some text in the Footer Text box. If so, get rid of them. To remove a link, select a link in the List of Links and then click the Remove button. To banish the footer text, simply erase it as you would in a word processor.

  3. Let's start by adding the Contact Us link. Click the Add Link button. The Link Properties dialog opens:

    Microsoft Office Live Small Business: Beginner’s Guide

  4. Type Contact Us in the Link Name text box. That's what the link will say on your web pages.
  5. Type /contactus.aspx in the Link Address textbox. That's the address of the Contact Us page. Note that the link begins with a forward slash (/). It tells Office Live Small Business that the web page is on your website and not on some random website on the Web. If you forget the forward slash, the link won't work.

    Wait a minute! Where did the address come from? Every web page has Properties. You can view them by clicking the Properties link against the page in Page Manager. I just looked it up before I wrote the instructions for the previous step. Another way to find the address is to preview the web page. The text in the preview window's address bar, after the last forward slash (/), is the address. It's contactus.aspx in this case.

    Microsoft Office Live Small Business: Beginner’s Guide

  6. Click OK. The Link Properties dialog closes and you return to the Customize your footer dialog. You should now see the Contact Us entry in the List of Links.
  7. That's all there is to adding a link in the footer. Let's now add the Privacy Policy link. Can you handle it yourself? Sure, you can! Until it's time to enter the Link Address, that is. That's when you realize that you don't have a Privacy Policy page. So what gives? Don't worry. Simply enter /privacypolicy.aspx and create the link.

    Now where did THIS address come from? I simply made it up. As you know, every web page has an address. The address is just a unique name you give to a web page so that your web server can send it down the wire when a viewer requests it. I just chose the first logical name that came to my mind. I could have called it privacy.aspx, ljashdflkjhasdf.aspx, or anything else I fancy as long as my website doesn't have another page with the same name.

    The page doesn't have to exist when you create the link. But whenever you create the page, you'll have to call it privacypolicy.aspx, otherwise, the link won't work.

  8. Go down to the Footer Text box and type your copyright notice. I'll type © 2009, Acxede Corporation for my website. You can enter whatever makes your lawyer happy.

    Where's the © key? Nowhere. But you can type symbols such as ©, ® , and ™ with the help of the ALT key on your keyboard. To type the © symbol, hold down the ALT key and then type 0169 on the numeric key pad. Release the ALT key only after you've typed all four digits of 0169. As soon as you do, the © symbol appears. Note that this trick works only if use the numeric key pad; it won't work with the horizontal row of numeric keys above the first row of letters on your keyboard. The combination for the ® symbol is 0174 while the ™ requires 0153. Notebook computers don't have numeric keypads. If that's your predicament, the solution is to type the symbol in a word processor document or the Windows Character Map utility, cut it, and paste it in the Footer Text box. Visit this article's companion site at http://officeliveguide.com/HowtoTypeCommonSymbols.aspx if you need help on using either alternative.

  9. Just as you did with the Site Title and Site Slogan, choose a font face and font size. And remember to stay away from the B, I, and U buttons.
  10. At the very bottom of the Customize your footer dialog, there are three alignment options: Left , Center, and Right. Select Center.
  11. Your Customize your footer dialog should now look like this:

    Microsoft Office Live Small Business: Beginner’s Guide

  12. Save your work and preview the website.
  13. Click the Contact Us link in the footer. The Contact Us page should come up in your browser.

    If you get a Page Not Found error, it could be because of two reasons:

    • You probably forgot to enter the forward slash in the link address. Go back to the Customize your footer dialog, select the Contact Us link under list of links, and click the Update button. The Link Properties dialog opens. Add the forward slash at the beginning of the link address, save your work, and preview the site again.
    • Your web server is configured a bit differently. If that's the case, you'll see http:///contactus.aspx in your browser's address bar instead of http://yourdomainname/contactus.aspx. To fix the problem, go back to the Link Properties dialog and specify the complete web address of the page in the link address. My link address will look like http://officeliveguide.com/contactus.aspx, for example.
  14. Note that the Contact Us page has the same header and footer as the Home page. Click the Privacy Policy link in the footer. Your browser should complain that it can't find the page. That's expected because you haven't created the page yet.
  15. Close the preview window and return to Site Designer.

What just happened?

You set up the contents of your website's footer. I'll admit that it's not exactly pretty; there's ample scope to improve its look and feel.

Have a go hero – experiment with the footers

As was the case with the Site Title and the Site Slogan, try your hand at various options for customizing the footer until you're happy with the way the footer looks. Make sure that the links and the copyright notice don't look too big or too small. You might want to try adjusting the font size or changing the font face.

If your browser is Internet Explorer, try viewing your site in another browser such as Firefox or Opera. Font faces and font sizes that look absolutely fabulous in your favorite browser often look ugly in others. Therefore, it's a good idea to check your work in other browsers or even on other operating systems before you proceed.

Try changing the order of the links in the footer. I won't tell you explicitly how to go about it but here's a hint: open the Customize your footer dialog and look at the buttons on it.

Summary

In this article, you started building a template for the pages on your website. You decided upon a title for your site and, hopefully, a slogan as well. Then, you added a copyright message and a couple of links to the footer.

To recap:

  • Your website's title should ideally reflect your business name or brand name.
  • It's a good idea to come up with a slogan for your website. If you can't, then try substituting it with a short description of your business.
  • A good title and a good slogan make your site 'findable'. Contact information and copyright notice are good candidates for the footer, so is a link to your privacy policy.
  • You should test your site in multiple browsers and on multiple computers. You'll be amazed to see that what looks good on one, looks absolutely horrible in another. While that's hardly your fault, you're still responsible for choosing the right combination of font faces and font sizes that always look good.

Answer to Pop quiz

  1. Which of the following attributes make your website more "findable"?
  • 2—your site's title and 4—your site's slogan. These elements help searchengines index your site correctly. Therefore, it's more likely to show up in relevant search results.

 

If you have read this article you may be interested to view :

Microsoft Office Live Small Business: Beginner’s Guide Build and Customize your Microsoft Office Small Business Live Web Site with this book and eBook
Published: November 2009
eBook Price: $0.00
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Books From Packt

Drupal 6 JavaScript and jQuery
Drupal 6 JavaScript and jQuery

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart

Programming Microsoft Dynamics NAV 2009
Programming Microsoft Dynamics NAV 2009>

Magento 1.3 Theme Design
Magento 1.3 Theme Design

Implementing Microsoft Dynamics NAV 2009
Implementing Microsoft Dynamics NAV 2009

WordPress Plugin Development: Beginner's Guide
WordPress Plugin Development: Beginner's Guide

3D Game Development with Microsoft Silverlight 3: Beginner's Guide
3D Game Development with Microsoft Silverlight 3: Beginner's Guide

Zabbix 1.6 Network Monitoring [RAW]
Zabbix 1.6 Network Monitoring [RAW]

No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
d
S
g
T
c
1
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software