How To Make a World Wide Web Page Using Microsoft SharePoint Designer
Faculty/Staff Version

This document is designed to allow the user to create a simple, yet impressive Web page using Microsoft SharePoint Designer.  We will place the URLs (Uniform Resource Locators) of all links to other sites on this page so that you can print this document as a reference.

To begin, a little knowledge of HTML (Hyper Text Markup Language) is helpful, but not absolutely necessary.  To get a primer on HTML please explore the
Beginner's Guide to HTML at http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html.

To make sure you do not lose your changes, you should save your document frequently. Where you save your document depends on how your ISP (Internet Service Provider) has set up its web server.  Since this document is intended primarily for faculty and staff at Olivet Nazarene University we will describe the method by which you will place pages on the Web server, http://web.olivet.edu.

Step 1
Begin thinking about how your files will be structured. 

A.  For an individual Website for you personally:

All your webpage documents need to be in a special web folder called Webpage located on your H:\ drive. 

To Create a New Folder:

1. Double-Click My Computer
2. Next to Save-in, click on the arrow pointing down and click on  the H: drive
3. Click File
4. Click New
5. Click Folder
6. Hit backspace on your keyboard to erase "New Folder"
7. Type webpage as the folder name (all lower case)
8. Press 'Enter' on your keyboard

(IMPORTANT!!!  There should be no spaces anywhere in the title of your new folder.  Adding spaces in folder or file names will cause problems for you later.  This is a very important point to remember!)

B.  For a Department Website:

All department web documents need to be stored on the department's J:\ drive.  If you have been assigned to work on your department's website, you need to have special network permissions to access the J: drive.  If you are unable to access this drive, contact the IT Help Desk at 5302 to request these permissions.

C.  For any websites

• The first page you want people to see when they go to your web site should be named index.html.  This is a special name recognized by web software to automatically open.

• When you are ready to create other pages to link to from this main page, it is a good idea to create new folders to put the new files in.  For example, if you want to add a link from your main page to your Personal Information, you could create a new folder called 'Personal', and place your resume and other documents relating to your personal information in that folder.  The more topics you desire, the more folders you should create.  This will keep things clean in your web folder.  It is also a good practice to create an 'Image" folder to save all the pictures that will be used for your main web page.

• Make sure that you do this from the very beginning.  Any links you create from your index.html page to another page will have to be changed if you create or rename folders later.

Step 2

To create your page, open Microsoft SharePoint Designer

1. Click Start
2. Click Programs
3. Click Microsoft Office
4. Click SharePoint Designer 2007

To start a new page:

1. Click File
2. Click New
3. Click Page
4. Click HTML
5. Click OK

At this point Microsoft SharePoint Designer opens with a new blank Web page for you to personalize.  Begin by entering a title to the page.  The title is what will appear at the top of the browser window when the page is opened by the user.

1. Right-click anywhere on the page
2. Click Page Properties
3. On the General tab, type a title for the page
4. Click OK

    Save your document in this manner:

1. Click File
2. Click Save As
3. Next to Save-in, click on the arrow pointing down and click on  the appropriate drive
4. Double-click on your web folder
5. In the file name box type the name you wish to give the file
   • If this is your main home page, i.e. the one you want people to see when they follow the links to your name then you must name the file index.htm
   • If this is not your main page, you can give it any name that ends with .htm as long as the name is eight characters or less and does not contain non-letters or non-number characters. 
   • IMPORTANT!!!  There should be no spaces anywhere in the title of your new file.  Adding spaces in file or folder names will cause problems for you later.  This is a very important point to remember!
6. Click OK

Now you are ready to begin setting up your page.  There are two main parts to page setup and the order in which they come is not important.  The parts of page setup are:

1. Page Design and Layout
2. Entering Text and Links

Page Design and Layout have to do with the colors and styles of the background, text, links, and graphics on your page.  The first decision you should make in Page Design and Layout is 'How do I want my page background and text to look?'  

Page Background and Text Design

To choose the colors of your text and links (while still on the Formatting tab)

1. Right-click anywhere on the page
2. Click Page Properties
3. Click the Formatting tab
4. Click on the down arrow next to the text or link color you would like to change
5. Select one of the listed colors (for more color options choose More Colors)
6. Click OK

Note: The Hyperlink color is the color a link will be until you click on it. The Visited Hyperlink color is the color the link will be after you click on it, and the Active Hyperlink color is the color the link will be while you click on it.)

To set up a background with a solid color:  

1. Right-click anywhere on the page
2. Click Page Properties
3. Click the Formatting tab
4. Click on the drop-down arrow after Background
5. Select one of the listed colors (for more color options choose More Colors)
6. Click OK

To set up a background with a graphic:  

To set up the background with a graphic design instead of a solid color you must first save the design to the same directory as your Web page.   Many  background graphics are taken from sites on the World Wide Web which allow people to use them free of charge. Listed below are some sites with these free designs:

Yahoo's Clip Art
http://www.yahoo.com/Computers_and_Internet/Graphics/Clip_Art/

Barry's Clip Art
http://www.barrysclipart.com

Bells 'n' Whistles
http://www.bellsnwhistles.com

Keep in mind, if you use a background from a site you may need to credit the creator.  The page from which you get the background will instruct you if this is necessary.

1. First copy the file to somewhere in the web folder (preferably an Image folder that has been created to hold all graphics and images)  If you image is currently on the web, use the following steps to save your image.
   1. Click on the image with your right mouse button
   2. Click (with your left mouse button for the rest of this process) Save Image As or Save Picture As
   3. Next to Save-in click on the arrow pointing down and click on  j:
   4. Double-click your department's folder
   5. Click OK (remember the filename that is in the box, you'll need it later)
2. Close the browser and return to your SharePoint file

To make the image you saved become your page background:

1. Right-click anywhere on the page
2. Click Page Properties
3. Click the Formatting tab
4. Click in front of Background picture
5. If you want the graphic to be washed out to make it easier to read your text, click in front of Make it a Watermark
6. Click on Browse and click on your image file (the one that is located within your web filder)
7. Click OK

Inserting Graphics into your page

To insert graphics into your page, you must first save the graphics to a folder in same area as your web page. The method for getting graphics from Internet sites is identical to the method for acquiring background images. Keep in mind you may have to credit the original creator of the graphics you use.  The page from which you get the graphics will instruct you if this is necessary

To save the graphic to your Web page directory:

1. Click on the image with your right mouse button
2. Click (with your left mouse button for the rest of this process) Save Image As or Save Picture As
3. Next to Save-in click on the arrow pointing down and click on  j:
4. Change the file name (if desired)
5. Double-click your image folder
6. Click OK (remember the file name that is in the box, you'll need it to setup your image)

Return to your web page (click on the Share Point button in the task bar or holding down the Alt key and pressing the Tab key until you see the Share Point icon --then releasing both keys.

To place the graphic in your page:

1. Click in your page [use the Enter key and/or the Alignment button (right side of the bottom toolbar) to position your cursor]
2. Click Insert
3. Click Picture
4. Click From File
5. Next to Look-in click on the arrow pointing down and click on  j:
6. Locate and Double-click your image folder
7. Double-click on the filename of the image

To change the text wrapping options of your graphic

1. Right-click anywhere on the graphic to display the short cut menu
2. Click Picture Properties
3. Click the Appearance tab
4. Select one of the wrapping styles
5. Click OK

Congratulations, you now have colors, backgrounds and images on your page!!! (Now you need some information)

Entering Text and Links

Entering text is as simple as clicking the mouse and typing your text.  You may want text of different sizes, colors, or text which is linked to other sites.

1. Use the Enter key and/or the Alignment buttons (on the formatting toolbar displayed to the right) to position the cursor for the text location
2. Type the text
3. To change size, color, alignment, etc...
   1. Hold down your left mouse button and drag the mouse over the desired text to select the text you wish to modify
   2. Click the text size button (on the  toolbar, where you see a number) to resize text and/or
   3. Click Text color (on the toolbar with a large A underlined in the current color) and choose another color and/or
   4. Click Bold, Italic and or Underline (on the formatting toolbar as B I or U).

   To make a hypertext link (be sure you know the URL address of the page you wish to have the link access)

   1. Click (Insert Hyperlink)
   2. Click Existing File or Web Page on the left
   3. Fill in the URL address in the Address box (including the http:// )
   4. Click OK

   To create an e-mail link

   1. Type your e-mail address in your document where you want it to appear
   2. Hit the space bar or Enter and it will do it for you automatically

   To create an e-mail link with text other than your e-mail address (Ex.: To contact me, click here.)

   1. Type the text you would like to make an e-mail link
   2. Drag across it with your mouse to select it
   3. Click (Insert Hyperlink)
   4. Click Email Address on the left-hand side
   5. Type the e-mail address in the box provided
   6. If desired, type a subject for the email
   7. Click OK

   To create a link to another file

   1. Type the text you want to link from
   2. Drag across it with your mouse to select it
   3. Click (Insert Hyperlink)
   4. Click Existing File or Web Page on the left
   5. Find the file you want to link to (must be on your J: drive) and double-click on it

   To insert a horizontal line

   1. Click Insert
   2. Click HTML
   3. Click Horizontal Line

   To create a bulleted list:

   • Click (Bullet List)
   • Type the text for the first bullet
   • Press Enter for each additional bullet
   • After the last bullet, press Enter twice to return to normal text

   To create a numbered list:

   1. Click Numbered List
   2. Type the text for the first bullet
   3. Press Enter for each additional bullet
   4. After the last number, press Enter twice to return to normal text

   To create a link to another point in the same page(a bookmark):

   1. Place your cursor where you want the link to end up
   2. Click Insert
   3. Click Bookmark
   4. Type a name for this bookmark (no spaces!)
   5. Click OK
   6. Place your cursor where you want to link from (For example, if you want a link from the bottom of the page back to the top, your bookmark would go at the top of the page, and your link would be at the bottom.)
   7. Type the text you want to use for the link (Back to the top)
   8. Highlight text and click (Insert Hyperlink)
   9. Click Place in this document on the left
   10. Click the name of the Bookmark you created
   11. Click OK

Back to the top

Working with Tables:

Inserting a Table:

1. Click Table
2. Click Insert Table
3. Choose how many rows and columns you want by clicking the up and down arrows under Size
4. Change the alignment (left, center, right) by clicking the down arrow and selecting your choice
5. If you want a thicker border, change the border size from 1 to something higher; if you want a table with no visible border, change the border size to 0
6. Cell padding and Cellspacing controls the amount of space within the border itself. The default ("0") is usually appropriate.
7. The default width of the table is 100%, meaning that whatever size the browser window is, the table will always stretch to fill it. If, however, you would rather keep the table the same width no matter who is looking at it, click the radio button next to in pixels and adjust the number to reflect the appropriate size.
8. If these settings should be the default for every table, check the box next to Set as default for new tables
9. When you are done, click OK

Adjusting width and height of tables and table cells, rows, and columns:

There are two ways to adjust the width and height of table cells, rows, and columns. The first way is to position your mouse over the line in between the row, column, or the outside line of the table until you see your mouse arrow become a double arrow. Then hold down the left mouse button and drag the line to adjust the row, column or table dimensions.

For more accurate adjustments of width:

1. Right-click in the cell or column you want to adjust and choose Table Properties (to adjust the entire table) or Cell Properties (to adjust the specific cell/column)
2. Adjust the width by changing the number under Specify width: and either choose the radio button for In pixels or In percent.
3. Once you have made these changes, click OK

For more accurate adjustments of height:

1. Right-click in the cell or row you want to adjust and choose Table Properties (to adjust the entire table) or Cell Properties (to adjust the specific cell/row)
2. Adjust the height by checking the box next to Specify height: and then changing the number to the appropriate height.
3. Choose the radio button for In pixels or In percent and click OK

To make changes to a specific cell:

1. Right-click inside the cell
2. Click Cell Properties
3. To change the horizontal alignment of the cell, change that setting from Default to Left, Center, Right or Justify
4. To change the vertical alignment of the cell, change that setting from Default to Top, Middle, Baseline, or Bottom
5. Adjust the width by changing the number under Specify width: and either choose the radio button for In pixels or In percent.
6. To adjust the height:
   • Check the box next to Specify height: and change the number to the appropriate height.
   • Choose the radio button for In pixels or In percent
7. To adjust how many rows or columns the cell should span, change the numbers by clicking the up or down arrows
8. If you want the cell to be the Header Cell, check that box
9. If you do not want the text or contents of that cell, to wrap, check the No wrap box
10. To change the border color, click the down arrow next to the color bar and choose a new color for the cell
11. To change the background color, click the down arrow next to the color bar and choose a new color for the cell
12. To use a background image in the cell:
    • Check the Use background picture box
    • Click Browse and find the image you want to use as the background for the cell
    • Click on the name of the file
    • Click Open
13. Click OK when you are done adjusting the settings for this cell

To make changes to the entire table:

1. Right-click inside the table
2. Click Table Properties
3. To change the alignment of the table, change that setting from Default to Left, Center, Right or Justify
4. If you want the text to wrap around the table on the right or left, change Float: from Default to either Left or Right
5. Adjust the width by changing the number under Specify width: and either choose the radio button for In pixels or In percent.
6. To adjust the height:
   • Check the box next to Specify height: and change the number to the appropriate height.
   • Choose the radio button for In pixels or In percent
7. Cell padding and Cellspacing controls the amount of space within the border itself. The default ("0") is usually appropriate. To change this, however, click the up or down arrows.
8. To change the border size, click the up or down arrows
9. To change the border color, click the down arrow next to the color bar and choose a new color for the cell
10. To change the background color, click the down arrow next to the color bar and choose a new color for the cell
11. To use a background image in the table:
    • Check the Use background picture box
    • Click Browse and find the image you want to use as the background for the table
    • Click on the name of the file
    • Click Open
12. Click OK when you are done adjusting the settings for the table

To split a cell into more than one cell:

1. Right-click inside the cell
2. Click Modify
3. Click Split Cells
4. Choose whether to split the cell into columns or rows by choosing Split into columns or Split into rows
5. Choose how many columns or rows to split the cell into by clicking the up or down arrows
6. Click OK

To combine a group of cells into one:

1. Click in one of the cells and drag your mouse to highlight all of the cells you would like to combine
2. Right-click within one of the highlighted cells
3. Click Modify
4. Click Merge Cells

Inserting Rows:

You can insert a row one of two ways:

1. Right-click inside a row
2. Point to Insert
3. Click Row Above or Row Below to add a row above

or 

1. Place your cursor in the last cell of a row and press the Tab key on your keyboard to insert a row below

Inserting Columns:

You can insert a column one of two ways:

1. Right-click inside a row
2. Point to Insert
3. Click Row Above or Row Below to add a row above

or 

1. Place your cursor in the last column and follow these instructions to add a column to the right:

• Right-click in a cell in the last column
• Point to Insert
• Click Rows or Columns
• Click the Columns radio button
• Choose how many columns you would like to add
• Choose Right of selection
• Click OK

Deleting Rows or Columns:

1. Click and drag to highlight the row or columns you would like to delete
2. Right-click in the highlighted portion
3. Point to Delete
4. Click on what you would like to delete

Viewing the finished Web Page

1. Open an Internet browser such as Internet Explorer
2. Enter the URL web.olivet.edu/~   (the Olivet web address) with your Olivet login name at the end
    For example:  http://web.olivet.edu/~Baxmark
3. Press Enter to display your web page

Back to the top