The Weather at Fidalgo Island, Washington

Right-Click:  Many tools in Office Live™ have a mouse right-click option.  This provides access to additional features and editing capabilities.  For example, right-click on an HTML module, then on 'Properties' to access the code editing dialog box.  Right-click on a table, then on 'Properties' to open the table editing dialog.  Check the OL Road Map for a complete listing of right-click menus.

Highlighting:  Just as you would in a word processor, drag your mouse across text to highlight it.  To get a little more control, place the cursor at the beginning of the text.  Then hold the [Shift] key down and type the [Right Arrow] key until the text is highlighted.  You can also highlight from right to left with the [Left Arrow] key.

Handles:  Tables, HTML modules and Images are examples of tools that have handles.  To make them appear, click on the object.  In the case of tables, move the mouse pointer over the border until the crossed arrows appear, then click.  The handles will look like little boxes.  When the handles appear, you have "selected" the item which has the same effect as highlighting it.  With the exception of images, use the handles to change the size and shape of the object.  If you try this with an image, you will ruin it.  Always set the size of an image with a photo editor before uploading.

Copying and Pasting:  This is a basic computer skill which you can use to build your site.  Blocks of text, modules and complete tables can be copied.  Highlight or select the item and either use the Copy icon or type ^C, where ^ denotes the [Ctrl] key on your computer.  The selected item is now on the clipboard.  Move the cursor to the desired location.  To paste, use the Paste icon or type ^V on your keyboard.  Remember, ^ denotes the [Ctrl] key.  Another method from the browser window menu bar is Edit » Copy, then Edit » Paste.  Cutting (^X) is a variation of copying, but in this case the source is both copied and deleted.

TIP:  To successfully copy from one page to another, you must use the "Web pages" drop down list or the site navigation links to move to the target page.  If you close the source page and use the Page Manager list to open the target, the copy will be corrupted.

Using the Tools:  Don't fight the tools.  This will only lead to frustration.  For example, specific fonts are provided in Office Live™ and it is best to stick with them.  These are proven to render properly across browsers.  I saw one site using a very beautiful script to highlight text.  When I viewed the same site on another computer, the script rendered as Times New Roman and looked odd.  Try to find satisfactory ways to use the tools as they come.

Tip:  When building a new page, did you know you can hide it from your navigation?   Click on the Page Properties icon, then uncheck the "Show in navigation" check box.

Tables will become one of your most useful tools.  Use them to arrange items on your pages, to control the width of pages and to create your own navigation system.  Modules, other tables, images and text can be placed inside of table cells.  By adding cells or merging cells you can create complex layouts.  As you surf the net, you will begin to notice that every site is using them.  Get to know the parts of a table you can control.  Right-click on the table to access these properties:

Cell Padding:  The space between the content of a cell and the border.  If it is set to zero, the content will abut the border.

Cell Spacing:  The space between cells.  Normally, it is set to zero, but you can change it for some interesting effects.

Border Width:  This sets with thickness of the outer border.  It does not affect the interior borders.

Table Width and Height:  You can get absolute control of the size of tables, within the limits of the cell contents, by setting the Width and Height properties.  There are two ways to do this.  The first is to set the handles, then use them to stretch or squeeze the outer border.  The second is to open the Table Properties dialog and enter the parameters into the Width: and Height: text boxes.  For this page, the first table was sized using the handles.  Then I opened the Properties dialog and read the width to be 600px (600 pixels).  For the rest, I opened the Properties and entered "600px" into the width text box.  This makes all of these tables the same width.

Tip:  When a new table is created, it comes with some text or spaces in every cell.  It also has some default justification.  When you make a new table, be sure all the text and spaces are removed before adding content to the cells.  Then set the justification icons on the content.  If this is not done, you will end up with some mysterious and obstinate alignment problems.

Nested Tables:  You can put tables inside of table cells for creating complex layouts: 

Tip:  Use the Paint Bucket icon to color individual cells of tables.

Examples:  The settings for the tables on my Prescriptions page are Padding=2, Spacing=4 and Border width=1px.  On my Friends page, Padding=1, Spacing=6 and Border width=4px.  Finally, everything on my Home Page is arranged using tables.

Tip:  To make the borders invisible, make them the same color as the background.  While editing, however, you will find it difficult to work with tables having invisible borders.  The "Congratulations" text at the top of this page is in a one-celled table with a white border.  This allows it to line up with the text below it.

Now that you have mastered these basic concepts, check out Sue Rivers' tip site in the Masters Forum for some more advanced tricks with tables.  For some excellent examples of using tables, visit The Nuns' Garden and Cambalala.  In the latter, the African background pattern on the home page was created using a table with the background image option.

Images, documents and text are the basic elements of a web site.  Text is easy.  Just type it where you want it, or use Word to create it and copy and paste it to the desired position.  If you use Word, don't do any text formatting in Word.  Just copy plain text and format it in Office Live.  Formatted Word text pasted into Office Live can produce unpredictable results.

Documents and images need to be uploaded to specific folders associated with your site.  Images can be placed anywhere on you site's pages.  Remember to use tables to control their positions.  Documents can be linked to as web pages or embedded within a page (see HTML Modules, below).  For an example, see the Climatological Summary documents linked on my Journal page.

Images:  Images used on your site must reside in the 'Image Gallery.'  You can expect a slight loss of quality and very large images will be compressed.  To put a logo or custom image into your header, upload it to your Image Gallery.  The first time you upload, there will be a small piece of software to install on your computer.  If the uploader or the Gallery fails to function, follow the remedies on my Prescriptions  page.  You can upload more than one image at a time.  To access your gallery, click on the link in the left navigation of your "Web Site" page.

Documents:  Documents used on your site must reside in the 'Document Gallery.'  You are not limited to text documents, as images can also be stored here.  This is one way to preserve a better quality image and to use very large images.  Word .doc and Excel .xls formats work easily.  You can also use the "Save as... Web Page" option in Word or Excel to create .htm format documents.  These load faster and cleaner, but you can not run calculations on a spreadsheet in this format.  The Adobe™ .pdf format also works here.  When uploading, use the "Browse" button to find documents on your computer, then click on 'Add' to place it in the uploader.  To access your gallery, click on the link in the left navigation of your "Web Site" page.

Links are an integral part of web design.  They take you everywhere on the net and provide the power of the net to connect to information.  A link is simply a web page address associated with a word, a phrase or an image.

Text Links:  Highlight a word, phrase or even a single character with your mouse.  Then click on the Hyperlink icon.  Choose the appropriate button:

• Web Site - A link to a page on another web site; then enter the URL in the
     Link text box; strip off the leading "HTTP://" or it won't work
• A page on my web site - a shortcut for creating internal navigation to your
     other pages; you will get to choose from a list of your pages
• E-mail - an E-mail address link; enter an email address in the text box
• Document - a shortcut for creating a link to an item in your Document Gallery;
     you will get to choose from a list of your documents
• Other - Try this:  At the bottom of your page type "Back to top."  Highlight it
     and click on the Hyperlink icon.  Click on the "Other" button.  In the text box
     type "#top" (without the quotes), save and see what the effect is.

Check the box for "Open in new window" to execute the link in a new browser window.
This is usually best when linking to another site or opening an explanatory or optional
page on your site.  Don't use too many new windows at a time and always keep your link scheme simple to prevent visitors from getting lost.

Tip:  Avoid using "Click here" as your link phrase.  Instead of Click here for a map of Washington rainfall," consider "A  rainfall map of Washington reveals wide variations across the state."

Tip:  The visitor's browser controls the color of links.  If the standard blue/purple/red for link/visited link/active link are not to your liking, you can color them using the "A" icon color palette.

Image Links:  These work exactly like text links.  Select the image (click on it to make the handles appear), then use the hyperlink icon as with text links.  This method is satisfactory for many purposes, but it has limitations.  For a more professional image link, we will employ a method using the HTML module described in the next two sections. 

Footer Links:  You can add links to your footer on the Site Designer page.  These can be your pages or an external site, but as offered, footer links always open in the same window.  Click on the Footer icon to open the dialog.  In the upper section, click on the "Add Link" button.  The Link Name appears in the footer and the Link Address is the destination.  You can arrange the links with the Move Up and Move Down buttons.

Navigation Links:  When you create a new page, you also create a navigation title.  This will appear in your site's navigation system.  Try to keep them short.  Long, wordy navigation titles can wreak havoc with your layout.  While it is possible to do, I don't recommend linking to another web site from your navigation system.  If it makes sense to do it, here are the steps briefly:

1.  Create a new page, general template, using the destination as the navigation
       title.
2.  Insert an HTML module on the page, but nothing else.
3.  Insert the code to "redirect to another site" into the module; check the
       Masters Forum sites listed in the next section for the code.  The URL of the
       site will be contained in the code.
4.  Note that you will never be able to open this page on your site; it will always
       take you to the redirected page or site.

You can control the navigation page order and hierarchy in the Page Editor tab.  Click on the Navigation icon to open the dialog and follow the instructions.  Parent pages are first-level pages and always appear in the main navigation.  Child pages are second-level pages and only appear in the navigation when viewing their parent page.

You can control the navigation scheme in the Site Designer tab.  Click on the Navigation icon and choose Left, Top & Left or Top.  This site uses the Left scheme.  Experiment with the three options to determine your preference.

Tip:  You are not required to use the built-in navigation system.  You can create your own with tables, bulleted lists and images.

One of the tools under the Module icon is the HTML module.  To insert one, click on the Module icon, then click on HTML.  This provides a place to add some special effects or features to your site using HTML code.  You don't need to be an expert programmer to use it.  I, certainly, am not.  For example, you can use features offered by other web services:

Just copy and paste the code they provide into an HTML module.  Be careful, however, some code is toxic to OLSB.  Always try it first on a test page off navigation and only when it works, place it at its real location.  Also, be aware that third party features are usually links to other sites, so check them out carefully.  Here are some other uses for the HTML module:

• Image Links without borders - a way to eliminate the colored border, to
     open the link in a new window and add "alt text" to an image (see below).
• Iframes - Insert another web page or document on a page
• Redirect a page to another page or web site
• Scrolling marquees
  

To find the code for these features check the Masters Forum in the Office Live Community.  OfficeLivePages, altArtifact, StudioAllen, Axcede and Godzdude are excellent sources for copying and pasting the HTML code you will need for your site.