Microsoft Office Live Small Business: Creating and Customizing Your Webpage

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 | June 2010 | Enterprise Articles Microsoft

In this article series, the objective is to create a skeleton for your website by building four skeletal web pages that will serve as your website's foundation.

In this article by Rahul Pitre, author of Microsoft Office Live Small Business Beginner's Guide we will learn :

  • A Home page that acts as the gateway to your site
  • An About Us page that tells a visitor about you and your business

Come to think of it, the starter website that Office Live Small Business built for you already has the first three pages in this list. And for good reason, even the professional designers at Microsoft, who built the starter website, think that pages along these lines are pretty much essential for most small-business websites.

So, here's the plan:

  • You'll begin by customizing the layout of the homepage. Once you're happy with the layout, you'll save it as a template that you can use to build new web pages. You'll then use this template to re-create the About Us and Contact Us pages. Why? Because you want all the pages on your website to look similar. The only way to do that reliably is to use the same template for all of them.
  • Web pages need content. As I don't know much about your business, I can't provide you with readymade content for your web pages. But I'll give you tips on where to find good copy and pictures. I'll also give a few pointers on how to write good copy, if necessary. Using your new credentials as a copy writer, you'll write a copy for the two web pages that you've already built.
  • You'll then add a new page, the Privacy Policy page, to your website. It goes without saying that you'll write a copy for that as well.
  • Finally, you'll learn how to delete a web page by getting rid of the Site Map page.

By the time you're done with this article, you'll have a fully functional four-page mini-website—content and all. You'll build on this foundation by improving the content of these pages and adding supplementary pages that describe your products, services, or whatever it is that you sell or hype.

Editing the home page

The Page Editor is the tool for editing web pages in Office Live Small Business.let's recap its features by opening the Home page.

Time for action – opening the Home page in Page Editor

  1. Sign in to your Office Live Small Business account, if you haven't done so already, and go to Page Manager.
  2. Click the Edit link under the Options column for the Home page. The page opens in Office Live Small Business Page Editor, as shown in the next screenshot:

    Microsoft Office Live Small Business: Creating and Customizing Your Webpage

From now on, I won't repeat these instructions; when I want you to open a page for editing, I'll simply say, Open such-and-such page in the Page Editor.

What just happened?

You opened the Home page in the Page Editor.

Just like the Site Designer, the Page Editor too, has a Microsoft Office 2007-style ribbon at the top. The first two groups on the ribbon, Font and Paragraph, display familiar text editing commands. You can use these commands to format the text on the page just as you would on a word processor. If you want to underline a chunk of text, for example, select the text with your mouse and click the U button in the Font group on the ribbon, as shown:

To undo something you've just changed, press CTRL+Z.

If you want to right-justify a paragraph of text, place the cursor anywhere in the paragraph and click the Align Right button in the Paragraph group, as shown:

See? Just like a word processor, as I said.

The next group on the ribbon; Insert, displays commands that allow you to insert objects such as images, tables, and hyperlinks on the web page. Place the cursor anywhere in a zone—one of the regions on the page that's enclosed by red dotted lines, and click the Horizontal line button in the Insert group. it is a zone is an editable area on the page. All content on a page must reside within a zone. The Horizontal line button is shown in the next screenshot:

A horizontal line appears just below the cursor.

CTRL+Z works not only with text, but also with any other object that you insert on a page.

The last group on the ribbon, Advanced, displays commands for manipulating some of the page's properties. Click on the Page Properties button, for example, and the Page properties dialog pops up.

It's quite convenient to be able to access the Page properties dialog from the Page Editor, as you just did, and also from the Page Manager. You'll see that Office Live Small Business duplicates many such links to make your life easier.

Some buttons, such as the Layout button in the Advanced group, have a little downward-pointing arrow at the bottom. Clicking them will open a drop-down selection menu. Go ahead, try it!

Some other buttons, such as the Navigation button in the Advanced group, pop up dialog boxes where you can set properties.

The rest, such as the Horizontal line button, work on the web page's text as you just saw.

Don't worry if you don't understand what every command does at this stage; you'll go over them as you work along.

Have a go hero – experiment with Page Editor commands

Have a go at Page Editor's commands. It wouldn't harm to click a few of them and get an idea of Page Editor's features and capabilities. Add a table. Change the color of the text. Make the font bigger. Do whatever you please. And don't hesitate to experiment for fear of destroying the page. You can undo any change by pressing CTRL+Z.

How many changes can you undo? I haven't really counted, so I can't give you an exact figure such as 23 or 127. But just as on a word processor, you can undo a series of changes with successive CTRL+Zs. I've noticed, however, that on some pages, CTRL+Z works only once for no apparent reason. In any case, you can effectively cancel all unsaved changes to a web page by not saving the page.How? Read on.

Just as in Site Designer, you can preview your website after modifying a page in Page Editor. Click the View button at the top of the ribbon. A dialog pops up enquiring whether you wish to save the changes. If you do, you'd click OK. But because you were just playing around with the page, you can click Cancel this time. As you'd expect, you'd click the Save button, right next to the View button, if you wanted to save your changes.

Close the preview window if it's still open, and return to Page Editor.

Choosing a page layout

Presently, the Home page is laid out with three content zones: Zone 1 at the top, spanning the entire width of the page, and Zone 2 and Zone 3 below it, side-by-side. This is not the only layout available; Page Editor has several more. Some have three zones, others have two, and the rest only have a single zone. You can change the layout of a page at any time; even after you've built the page. Let's change the layout of the Home page.

Time for action – changing the Layout

  1. Open the Home page in Page Editor.
  2. Click the Layout button in the Advanced group of the ribbon. A menu drops down to reveal the available layouts as shown:

    Notice that each option has a little thumbnail schematic of the layout that it represents. The option that corresponds to the present layout of your Home page, Three, span top, is highlighted.

  3. Choose the Three, side by side option. The drop-down goes away and your Home page rearranges itself to conform to the new layout as shown:

  4. Notice that although the Page Editor has rearranged the zones, it has preserved the content inside each.
  5. But what if the layout I choose has fewer than three or more than three zones? Aha! That gets the Page Editor into a fix. While transferring the content of three zones to three new zones is quite straightforward, there's no logical way of transferring the content of three zones to two or four zones. So the Page Editor takes its best guess in rearranging the content. If you don't like it, you can always cut some content from one zone and paste it into another.

  6. Save the page and preview the website.
  7. Close the preview window and return to the Page Editor.

What just happened?

You learnt how to change the layout of a page in Page Editor. So what's the big deal? Well, it's a good idea to use the same layout on most of the pages on your website, if not all. A common layout makes life easier for you as well as the people who visit your site—you can build your site faster, and visitors can find things on your pages in predictable places. Therefore, choosing a single good layout for your website often plays a prominent role in its success.

But then, you might ask, how come the good folks at Microsoft applied a different layout to every page on the starter site? The answer is that a single layout makes sense for small websites, such as yours, but sites with thousands of pages are often arranged into several logical sections and it's not unreasonable for pages in different sections to have different layouts. The starter site simply shows you an assortment of layouts, to give you an idea of how they look.

You'll use the Three, side by side layout you just chose. But you won't be adding content to each of the zones; you'll use the middle zone for content and the zones on either side for padding.

Customizing the page layout

That's better. Your page now has precisely the number of zones that you wanted it to have. But what if you don't like how wide a specific zone is? Fear not! You can change the width of any zone on your page quite easily.

Time for action – customizing a layout

  1. Select the content in Zone 1 and delete it.
  2. Unless you've played with the page layout and somehow managed to change the original order of the zones, the zones should be numbered 1, 2, and 3 from left to right. That's what I assume in the instructions.If your arrangement is different, read the instructions accordingly.

  3. Select the content in Zone 3 and delete it.
  4. Just above the top corners of each zone, you'll see a pair of drag handles as shown:

    Microsoft Office Live Small Business: Creating and Customizing Your Webpage

    You can use them to adjust the width of the zone, just as you can use the drag handles on a word processor to adjust the width of the editable area of a document.

  5. Click on the right drag handle of Zone 1 and drag it towards the left. That should make Zone 1 narrower.
  6. Click the left drag handle of Zone 3 and drag it towards the right. That should make Zone 3 narrower.
  7. Then use the drag handles of Zone 2, the middle zone, to stretch it on both sides. The end result should look something like this:

    Microsoft Office Live Small Business: Creating and Customizing Your Webpage

  8. Select the content in Zone 2 and delete it.
  9. At this stage, the cursor should be positioned in Zone 2. If it isn't, click in Zone 2 to place the cursor in it.
  10. Type Page Header.
  11. Notice that the text appears in the font that you set to be the site font . The font also appears as selected in the font selector on the ribbon. Anything you type in any of the zones will inherit this font by default, unless you change it explicitly. In the following images , you'll see the text in Georgia because that's the font I set for my site. You'll see it in the font that you selected.

  12. Select the text and increase its font size to 5 (18 pt) using the font size selector on the ribbon.
  13. Place the cursor just after the text that you just typed and click on the Horizontal line button on the ribbon. A horizontal line appears below the header text. Your page should now look something like this:

  14. Save your work and preview the site.
  15. Close the preview window and return to the Page Editor.

What just happened?

You learnt how to customize the layout that you've chosen for your web pages. From now on, you'll use this customized layout for all of your web pages.

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:

Creating a template for future use

But how do you copy the layout to other pages? Simple. You create a template from this web page that you can use as the starting point for new web pages.

Time for action – creating and saving a page template

  1. Go to Page Manager.
  2. Click the Save as template link under the Options column for the Home page. The Save as template dialog pops up, as shown:

  3. Change the Template title to Base Template.
  4. Change the File name to base.
  5. Type this Description: This is the site's base template. It has three columns side-by-side.
  6. Click OK. The dialog goes away and you return to Page Manager.
  7. Click the Template Gallery link in Page Manager's left navigation pane to go to the Template Gallery.
  8. The template that you just created appears in the list of templates in the gallery as shown in the following screenshot:

What just happened?

You created a template from your customized page layout. Office Live Small Business stored this template in a special area called the Template Gallery. You'll use this template as a starting point for all of the pages on your site. In fact, you'll build your first few pages using this template later in this article.

Have a go hero – view template properties

Just as the Page Manager helps you to manage web pages on your site, the Template Gallery helps you to manage your page templates.

Notice the familiar Options column with action links. Go ahead and view the properties of your only template. If you're up to it, you can delete the template and create it again.

What happens if I delete a template AFTER I use it to create a web page? Don't worry, nothing bad happens. When you create a web page from a template, as you'll do very soon, Office Live Small Business copies the design elements from the template to the new page. So, even if you delete the template after creating a web page from it, that web page will remain hale and hearty.

At this stage, most people want to view their spanking new template. Unfortunately, there's no way to do so. You can only create templates and delete them. You can't edit them. The only way to "edit" a template is to create a page using that template, make the necessary edits, and save it as a new template.

If you end up doing something like this, and want to save the edited template with the same name as the original, just select the Overwrite existing template checkbox in the Save as template dialog.

Creating content for the home page

The home page is important to you because you perceive it as a way to introduce your business to a visitor. But to be brutally honest, a visitor isn't interested in reading a long mission statement or how your grandfather founded the business during the Great Depression. He wants to find something quickly.

What are the dimensions of that bookcase that you sell? How long does it take to get the delivery? How does the 'thingamajig' that you make compare to the equivalent 'whatchamacallit' your competitor makes? How can he get in touch with you? Do you have a toll-free number? That's the kind of information that a visitor seeks when he arrives at your homepage.

Content is still king!

Okay, repeat after me: the purpose of a website is to provide the information that a visitor seeks quickly, efficiently, and intuitively.

Although good looks don't hurt, how a site looks doesn't really matter. What matters is the content that it provides and how easily a visitor can find it. No matter what anyone tells you, content is still king.

And yet, many site owners frustrate visitors by providing gobbledygook such as this, instead:

Our mission is to quickly engineer technologically superior products utilizing our unique high-quality intellectual capital while promoting personal employee growth and continuing to continually facilitate progressive allocation of capital to cutting-edge research which enables us to cut the time-to-market (TTM) of our groundbreaking new products by approximately half that of the industry average.

If they can't think of such profound nonsense, they resort to adorning their homepages with pictures of pretty women seated before a computer and talking on the phone, or of guys in pin-striped suits carrying briefcases against a backdrop of tall glass buildings. Such pictures only make sense on your homepage if you sell computers, phones, suits, briefcases, or, even tall glass buildings.

The moral of the story is that, contrary to your first instincts, a web page shouldn't be a place for stuffing pompous text or meaningless eye-candy. It should be a place that helps a visitor find what he's looking for, quickly and intuitively.

So, what should you include on your homepage? Here's an example: the site I'm building with you is about this a book. This is what I'll have on the home page:

  • Welcome small-business owners!

    This website is the companion site to my book, Microsoft Office Live Small Business: Build and Customize your Business Website, published by Packt Publishing. The book will help you to build a website for your small business with Microsoft Office Live Small Business.

    No, it won't morph you into a web-designer overnight, but it will show you how to squeeze the most out of Office Live Small Business to build an attractive, intuitive, and easy-to-use website without spending a penny.

  • Don't own it yet?

    • Find out what Office Live Small Business is
    • Learn more about the book
    • View the table of contents
    • Read a sample chapter
    • Buy it from your favorite bookseller
  • Already a proud owner?

    • View the errata
    • Submit an errata
    • Contact me

Each bulletpoint will ultimately become a hyperlink and lead to an information page on the topic it represents. And we'll add some eye-candy too. But for now, let's concentrate on the text.

My copy above consists of a brief statement of what the site is about, followed by information, which the two primary groups of visitors; prospective buyers and owners, are likely to want to know.

Have a go hero – write copy for your home page

Okay, it's time to try your hand at writing copy.

  • Write a short paragraph about your business. Remember, no long history or bombastic mission statements; just a simple statement of what you do.
  • Group the potential visitors to your site into two or three major groups, just as I did for my site. Then, list out bullet points that describe the information that they're likely to look for.

Do you have marketing materials for your business?

Do you use brochures, advertisement copy, one-page write-ups, or other similar marketing aids to promote your business offline? If so, you can use them as the starting point for your copy.

The copy doesn't have to be perfect; you'll have plenty of opportunities later to improve it. Like Rome, websites aren't built in a day either.

Use Notepad or a plain text editor for writing your copy. After you write the copy, you'll cut and paste it onto your Home page in the Page Editor. Recall that Page Editor acts as a word processor of sorts. Its styles may not necessarily be compatible with the styles of another word processor, such as Microsoft Word. Therefore, if you cut text from Microsoft Word and paste it on to Page Editor, its styles will overwrite the styles that you've set in Page Editor.

So, you should write your copy in a plain text editor, such as Notepad, which doesn't apply styles to text.

Building the Home page

Now that you have some copy for your Home page, let's go ahead and build it.

Time for action – add copy to the Home page

  1. Open the document that contains the text that you've just written. Select the entire copy and copy it to the clipboard.
  2. Open your Home page in the Page Editor.
  3. Select the text Page Header along with the horizontal line below it and delete it; you don't really need a page header on the Home page.
  4. Position the cursor in Zone 2 and paste the text from your clipboard.
  5. Format the text using Page Editor's editing features. When you have finished, your page should look something like this:

  6. Save your work and preview the site.

What just happened?

You took the first stab at your Home page. Nothing exotic yet, but hopefully, you now have some meaningful content in place on the Home page.

Summary

In this article we have learned:

  • A Home page that acts as the gateway to your site
  • An About Us page that tells a visitor about you and your business
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 :


Rahul Pitre

Rahul Pitre has been writing software of one sort or another for twenty-five years, the last dozen or so of which he has spent developing mostly web sites and web applications. He runs Acxede, a software consulting and training firm in New York, where he oversees web application and content development for a variety of clients. He holds masters degrees in Business Administration and Computer Information Systems.

Books From Packt


Microsoft Dynamics NAV 2009 Application Design
Microsoft Dynamics NAV 2009 Application Design

Alfresco Enterprise Content Management Implementation
Alfresco Enterprise Content Management Implementation

Microsoft Silverlight 4 Business Application Development: Beginner’s Guide
Microsoft Silverlight 4 Business Application Development: Beginner’s Guide

IBM WebSphere eXtreme Scale 6
IBM WebSphere eXtreme Scale 6

Amazon SimpleDB Developer Guide
Amazon SimpleDB Developer Guide

Oracle JRockit: The Definitive Guide
Oracle JRockit: The Definitive Guide

Microsoft Dynamics AX 2009 Programming: Getting Started
Microsoft Dynamics AX 2009 Programming: Getting Started

Refactoring with Microsoft Visual Studio 2010
Refactoring with Microsoft Visual Studio 2010


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