First steps to a more attractive Web site

Having an attractive Web site plays an important role in getting repeat visits. Microsoft Office Live Small Business has several built-in features — including themes, styles, colors, and fonts — that make it easy for you to improve the appearance of your site. And you don't need a degree in graphic design to do it.

 Note   If you partially redirected a domain name to your Office Live Small Business account: Before you can make changes to your Web site after partial redirection, you must change the primary domain to your free Office Live Small Business domain that ends in .officelive.com. For more information, see Make changes to your Web site after partial redirection.

---

• Choose a site theme

• Apply a style

• Use balanced colors

• Choose the right font

• Add special background effects

---

Choose a site theme

A good place to start when you are planning the overall look and feel of your site is to select a theme. The theme you choose controls the image that appears in the header at the top of each page. You can select from a variety of built-in themes for many industries, including automotive, finance, manufacturing, and real estate.

To select a theme, follow these steps:

1. Sign in to Office Live Small Business. On the Home page, at the top, click Web Site.
2. On the actions bar, click Design Site, and then, in the drop-down list, click Design site.
3. Click Theme. A list of theme categories appears.



4. In the drop-down list, click the theme category that you want. For each category, a list of images appears.
5. Click the image that you want to use in your header. It is automatically selected and placed in the header on all of the Web pages on your site.

 Top of Page

Apply a style

After you have chosen a theme that suits the purpose of your Web site, you can select a style. The style controls the placement of all elements in your Web site header. The header elements that are affected by your style choice include the logo, theme image, and the site title and slogan.

When you select the style, the header is reconfigured according to the definition of that style. For example, one style may show your logo as left-justified and another may show your logo as right-justified.

To select a style, do the following:

1. On the Office Live Small Business Home page, at the top, click Web Site.
2. On the actions bar, click Design Site, and then, in the drop-down list, click Design site.
3. Click Style. A list of styles appears.

   

4. In the drop-down list, click the style you want to use. You can select different styles until you find the one that works for your site.

 Top of Page

Use balanced colors

Color arguably has the most immediate visual impact on your Web site. The color you select should correspond with the theme you chose and should also work well with your logo, if you have one on your site. If the color is out of balance with the other elements, a site can sometimes look unprofessional.

Fortunately, it's easy to choose or change colors on your site. You can select colors and see what they look like with your theme and logo before you save your choices.

There are several color choices for you to make. For example, one color is used for the background of the site while another color is used for the menus. To simplify the decision-making, Office Live Small Business groups all colors used on a Web site into color themes and gives them names that in some way describe the overall feel of the theme. The Ocean color theme uses mostly blue colors, for example, while the Mustard color theme uses mostly orange and brown shades. You can select one of these predesigned color themes, or you can create your own custom color scheme.

Select a predesigned color scheme

To select a color theme for your site, do the following:

1. On the Office Live Small Business Home page, at the top, click Web Site.
2. On the actions bar, click Design Site, and then, in the drop-down list, click Design site.
3. Click Color.

   

4. In the drop-down list, click the color theme that you want. You can select different color themes until you find the one that works for your site.

Create a custom color scheme

If you don't want to use one of the predesigned color schemes, you can create your own in Site Designer.

1. On the Office Live Small Business Home page, at the top, click Web Site. Page Manager appears.
2. In Page Manager, on the actions bar, click Design Site.
3. In the drop-down list, click Design site. Site Designer appears.
4. In Site Designer, click Color, and then click Create custom color scheme.
5. In the Create custom color scheme dialog box, under Theme colors, a list of color groups appears. Click the color group name to expand the list of colors. The color groups are areas of your Web site where you can apply color — for example, Header or Body.
6. Click an item in the list to select it, and under Select a color, select a color that you want for that item.
7. To specify a custom color, click More colors.
8. Under Select a color, set the slider on the right to the hue that you want. On the left, click and hold the color selector circle, and drag it to the shade and saturation that you want. The hex number for the color you are currently selecting appears in the Hex box. You can also specify a precise color by typing the hex number into the Hex box.

    Note   Note the Hex number of the color you select if you want to use it elsewhere on your site.

9. Click Apply.
10. Repeat these steps for each color group that you want to apply a custom color to, and then click OK.

After you create your custom color scheme, it appears in the Color drop-down menu in Site Designer. You can switch between this custom color scheme and any of the predesigned schemes; however, you can have only one custom color scheme. If you create another custom color scheme, it overwrites the previous one.

 Top of Page

Choose the right font

Another important visual element for your Web site is the font you choose for the content. You can select a font to use on all of the pages on your site, or you can pick a different font for different pieces of text. Applying a font to the whole Web site enables you to quickly and easily give the entire site a common look and feel, which typically is more attractive to site visitors.

The fonts that you select should be applicable to the message you want to portray. For example, if you have a Web site that displays legal content, you would probably not want to use a font with a lot of embellishments, such as Trebuchet MS. Instead, you would use a font that is easy to read, such as Arial or Times New Roman.

 Note   Not all fonts render correctly on all Web browsers (for example, Windows Internet Explorer and Mozilla Firefox). The available fonts have been tested on a range of browsers to ensure that the text renders correctly, regardless of the browser that your site visitors use.

To select a font for your site, do the following:

1. On the Office Live Small Business Home page, at the top, click Web Site.
2. On the actions bar, click Design Site, and then, in the drop-down list, click Design site.
3. Click Font, and then, in the drop-down list, click the font that you want.

   

There are several ways that you can add impact to the look and feel of your Web site. By making a few simple changes to the theme, the colors, and the font, you can give your site a professional and personalized look that will appeal to your visitors.

 Top of Page

Add special background effects

You can enhance the appearance of your Web site by adding a background image to a Web page or by adding a color gradient to the background of your entire Web site.

Add a background image to a Web page

A background image appears in the content area of the page.

1. On the Office Live Small Business Home page, at the top, click Web site.
2. In Page Manager, locate the page you want to add a background image to, and click Edit.
3. On the Page Editor tab, In the Advanced group, click Page background.
4. Select the Use background image check box.
5. Next to the Image file box, click Select.
6. In the Select an image box, under Choose images from, do one of the following:
   • To use an image that is located on your computer, select My computer. Click Browse for an image, locate the image that you want to use, and then click Open. If you want to optimize the image for the Web, select the Optimize my image check box. Then click Insert image.

      Note   If you select this option, the image is converted to JPG (if it is not already in this format), and the JPG conversion quality level is set to 100%. The image is resized to a maximum of 640 pixels, maintaining its aspect ratio. These improvements help the image load faster in Web browsers.

   • To select an image that you uploaded to the Image Gallery, select My uploaded images. Select the image, and then click Insert Image.

    Note   For more information about the Image Gallery, see Add or remove an image.

7. In the Page background dialog box, in the Position list, select the place on the background you want to position the image. If you want to tile the image on the page, in the Tiling list, select how you want it to be tiled. Click OK.

Add a gradient color background to your Web site

You can add a gradient to the background of your entire site. The background color will be the same on each page.

1. On the Office Live Small Business Home page, at the top, click Web site.
2. In Page Manager, click Design Site, and then select Design site.
3. On the Site Designer tab, in the Advanced group, click Options.
4. In the Site Options dialog box, under Display options, selectGradient in the drop-down list.

    Note   You can also select Flat color for a solid color or Blank for no color in your site background.

5. Click OK.

 Note   To change the color of your background, see Customize your Web site color scheme.

 Top of Page