Home Blog Resources About Contact
Basic Skills for Creating and Editing Web Pages
Basic Skills Checklist:
Getting Started
Basic editing terminology
Right-click menus
Working with tables
Images, documents and text
Hyperlinks (why it's called "the web")
Getting Started
Office Live Small Business is designed for the average small business, organization member or home hobby user. Expertise in website building is not required. Nevertheless, some study, work, trial and error, curiosity, a willingness to explore, perseverance and lots of patience will be required to use the product successfully. Above all, be sure you are having fun building and working with your site.
Basic Editing Terminology
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 source item and either use the Copy icon in the OL menu ribbon 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 target 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 may be corrupted.
Finding: To find a word or phrase on your page, use the Windows Find function. It works both in Edit and View modes. ^F (Ctrl + F) opens the Find dialog.
Right Click Menus 
Many tools in Office Live™ have a mouse right-click menu. Click on the icon above to print the right-click menus. They provide 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.
Normally objects will arrange themselves on a page one above another. Use Float Left and Float Right in the right-click menus for arranging objects side-by-side. To wrap text on the left of an image, select the image, right click on it and use the Float Right option.
Working with Tables
Tables will become one of your most useful tools. Use them to organize lists, 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. Tables are great for presenting columnar lists of information. By adding cells or merging cells you can also 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 and Background Colors: Pick a color from the palette or enter the 6-digit hex code in the text box (e.g. #d2d0aa). The background color can be set for the entire table or single cells.
Border Width: Enter the width in pixels (e.g. 3px) for the outer border.
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.
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.
Tip: To make the borders invisible, make them the same color as the background.
Images, Documents and Text
Images, documents and text are the basic elements of a website. Text is easy, just type it where you want it. Documents and images need to be uploaded to specific folders associated with your site, called galleries. Images used on your site must reside in the Image Gallery, documents in the Document Gallery. As we will see, images can also reside in the Document Gallery. To insert an image on your site, position the cursor where you want it and click on the Image tool. For a document, follow the instructions for a hyperlink below. Remember, you can wrap text around an image by applying the Float Left or Float Right properties to the image with the right-click menu. Image formats allowed are .jpg, .bmp, .gif and .png. Document formats include .xls(x), .doc(x), .txt, .htm and .pdf. If possible, consider using the .htm or .pdf formats for Word and Excel documents. Create them using the Save as... » Web page or » PDF options. These will open faster and more cleanly on your website.
Hyperlinks (Why It's Called "The Web")
Hyperlinks or 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. Click on the word, phrase or image and the web page opens. The hyperlink tool will open other websites, a page on your own site, a document in your Document Gallery or an email client. To create a link, highlight a word, phrase or image and click on the Hyperlink tool. To make the Back to top links below, type the text plus a couple of spaces, or insert an image. Highlight the text or image and open the Hyperlink tool. Use the Web Page option and enter a pound sign (#) in the URL text box.
Putting It All Together: Build a Photo Gallery »
Back to top