Home         Blog         Resources         About         Contact 

Add a Little Pizazz to Your Site (but not too much) 

Special Effects and Options Checklist:

• Create and add a favicon
• Advanced design features:  Templates
• Advanced design features:  Cascading style sheets
• Using modules on your site

Create and Add a Favicon
  

It's the little image that appears on the left end of your browser's address line.  It also appears on the browser's tabs and in Favorites lists.  This feature is useful to create a brand image for your website.  This method uses the keyword metatag tool.  Note:  Favicons will not be visible in Internet Explorer 6.

Step 1:  The first task is to create the image.  Select one without too much detail that will look good when reduced to 16 x 16 pixels.  I made one for a friend that was the just first letter in the business name in the site's font and color.  If you search the web you will find dozens of sites that will convert an image to the .ico format which is required.  I used HTML-kit.com.  You can also find galleries of stock images.  Important:  Be sure the image is named favicon.ico.

Step 2:  Upload the image favicon.ico to the Document Gallery (not the Image Gallery).

Step 3:  You must do this on every page of your site.  Open the page for editing with the Page Editor tab out front.  Click on Page Properties, then open the Search Engine Optimization tab.  Into the Keyword Metatag pane, copy and paste the following text string, positioning it as the last item in the list:

%22%20%2F%3E %3Clink rel=%22shortcut icon%22 href=%22%2Fdocuments%2Ffavicon.ico

Then, » Apply » OK » Save » View.  If you don't see the favicon, be sure your browser has been optimized for OL.  Follow the steps on the First Things First page.  Then open a fresh browser to view your site.  Favicons are not visible in every browser and version, and it may not appear at first when viewed from within the site editor.  They are visible in Internet Explorer 7+ and Firefox 3+.

 Advanced Design Features:  Make Your Own Templates

First, activate advanced design features as described on the Road Map page.  From the Page Manager, » Site Actions » Activate Advanced Design Features.  You will now see the Save as Template links in the Page Manager.  You can save any page on your site as a template.  Then use it to create new, identical pages.  Your custom templates will appear in the Templates dialog box when making a new page.

For this site, I created a New Page, General template and named it Template1.  In the Site Designer tab, I chose 980px in Options.  In the » Page Editor tab » Page Properties, I removed the checks in the boxes for Show Navigation and Show Header.  I left the Footer intact.  For Layout, I chose Two, side by side. 

Now, in the left Zone 1, I inserted the Image, typed the tag line and added a table to contain the secondary page links.  I made the table borders white to hide them.  In the right Zone 2, I typed the primary page links across the top.  Finally, I added the favicon metatag as described above, and saved the page. In the Page Manager, I clicked on Save as template.  Template1 now appears on my Template list which always appears when creating a new page.  I used it to create every other page on the site.  This saved a lot of time, since I didn't have to reinvent the structure of every page from scratch.

Advanced Design Features:  Cascading Style Sheets

Cascading style sheets (CSS) are powerful tools for designing the overall look of your site.  When you select a color scheme, for example, your site's CSS is implemented with the chosen colors by Office Live.  Thus, every page will have the identical color scheme.  You can override the built-in CSS with your own.  You will want to begin with some studying, and here are some good references:

• OL Design Tips:  an excellent introduction and tutorial
• w3schools.com:  a list of all the CSS properties and a complete CSS course
• CodeRight Design:  Find here a printable Office Live CSS and Branding Guide

Using Modules on Your Site

A Seattle, WA Updated Saturday, July 31, 2010 7:53 PM Clear 66°F High: 70°F Low: 55°F Wind: 6 mph Humidity: 63% MSN Weather Data provided by iMap

Modules are pre-packaged features you can insert into your website pages.  These include a Contact Us form, Stock List and Weather feature.  The HTML module allows adding widgets or other coded objects.  Be judicious with HTML modules.  They can slow page loads to a crawl, freeze browsers, and interfere with search engines when not done well.

Module Background Image:  It is possible to do a little customizing with certain modules.  Some have transparent backgrounds allowing an image to show through them and you can control font style, weight and color with a Pilot Letter.  The Contact Us form on this site takes advantage of these characteristics.  All modules have right-click menus allowing for additional control of contents, position and properties.  The example here illustrates placing a module over an image and controlling the font in the module:

Step 1:  Select an image which will complement your site and not confuse the content of the module.  Use a photo editor to set the size of the image.  Write down the height and width of the image in pixels.

Step 2:  Insert a table where you want the module, one row, one column, generic style.  Remove the space from the single table cell.

Step 3:  Right-click on the single cell, then click on Properties... to open the Table Properties dialog.  Check the box for Use background picture, then click on Select...  At this point you can upload the image from your computer or select it from your Image Gallery.  At the top of the dialog enter Width +2px and Height + 2px in the designated text boxes.  Click on Apply.  Now you should have a full-sized image surrounded by a thin border.  If you don't want the border, make it the same color as the background in the Table Properties dialog.

Step 4:  Place your cursor inside the table cell, over the image.  Type a Pilot Letter (here an A), highlight the letter and set the font attributes you want for the module, font, style, color etc.  I chose a dark blue color to stand out over the image.  You can actually change the Pilot Letter attributes and the module will follow suit.  Just don't hit the default font color or you'll be stuck there.  When you find the settings you like, delete the Pilot Letter.  Objects placed into table cells will position themselves vertically in the center of the cell.  To move them up or down, add carriage returns below or above them.

More Background Image Examples » 

Add to Favorites Button:

This is an easy effect to do using an HTML module.  Place the cursor where you want the button.  Click on Modules » HTML.  Cut and paste the following code into the module:

<FORM>
<INPUT TYPE="button" VALUE="Add to Favorites" onClick='window.external.AddFavorite(location.href,
"Office Live Skills Tips and Advice");'>
</FORM>

Change the text in red to fit your own site.  This text will appear in the favorites list and will link to the page with the button.  Try this first on your test page to get the feel of the module.  The result looks like this:
 

Email Link to a Friend Button:

Here's another handy button.  Again, paste the code into an HTML module.  The button will open the visitor's default email client.  You might need to stretch the module open with your mouse, and you will need to view the page to see the button.  Give it a test drive:

<div align="left">

<script language="JavaScript">
function EmailLink(){
window.location = "mailto:"+"?subject=I thought this link might interest you." + "&body="+top.document.title+":    "+window.location;
}
document.write('<input class="select" type="button" value="E-mail this link to a friend" onClick="EmailLink()"></form>')

</script>

</div>