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:

   

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.

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.

5. Save the page and preview the website.
6. 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.

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.

2. Select the content in Zone 3 and delete it.

3. Just above the top corners of each zone, you’ll see a pair of drag handles as shown:

   

   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.

4. Click on the right drag handle of Zone 1 and drag it towards the left. That should make Zone 1 narrower.
5. Click the left drag handle of Zone 3 and drag it towards the right. That should make Zone 3 narrower.

6. 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:

   

7. Select the content in Zone 2 and delete it.
8. 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.
9. Type Page Header.

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.

10. Select the text and increase its font size to 5 (18 pt) using the font size selector on the ribbon.

11. 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:

    

12. Save your work and preview the site.
13. 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.