Using SharePoint Designer – page 1 © The University of Iowa College of Education – 2007

Using SharePoint Designer

Contents

Open Web Site --------------------------- p.1

Before doing anything else… --------- p.2

Hyperlinks ------------------------------- p.2 Link to a page in your site--------------p.2 Link to a page outside your site--------p.3 Make a "hotspot" link on an image ----p.3 Make a "section anchor" link -----------p.4 Link to a section anchor ----------------p.4 Make an email link----------------------p.4 Remove a link---------------------------p.5

Tables ------------------------------------- p.5 Make a table ----------------------------p.5 Change a table's format----------------p.6

New Pages-------------------------------- p.6 Make a new page -----------------------p.6 Set the page title -----------------------p.6 Insert a picture -------------------------p.6

Clean Up Problems ---------------------- p.8 Improper page layout ------------------p.8 Pages or images don't appear in all

browsers ----------------------------p.8 If images still don't appear…-----------p.9

Open Web Site

The web site you upload is a copy of the web folder on your USB drive. Keep that in mind when you put files into this local folder. Only files that will appear on the web belong in this folder. If you keep this folder organized then you will avoid confusion later.

1. Under the File menu, select "Open Site."

2. Browse to the eportfolio web folder on your removable disk that holds the materials for your web site. Note: DO NOT click Open until you have selected the web folder. Double-click the drive and any folders that need to be opened before the web folder.

3. With the web folder selected, click Open.

4. The "Folder List" window will display the folders and files of your site. (If you cannot see the "Folder List " window, choose View menu> Folder List.)

5. Designer will add some files and folders, such as _private and _vti_cnf, to your web folder.

IMPORTANT: Always change file names and locations in the Designer window. Designer will keep everything straight so links and image sources won't break.

Using SharePoint Designer – page 2 © The University of Iowa College of Education – 2007

Before doing anything else, make sure web pages will open in Designer rather than Word

1. Open Designer.

2. Under the Tools menu, choose Application Options.

3. Click the second tab, Configure Editors.

4. UN-check the box next to "Open web pages in the application that created them."

Hyperlinks

Hyperlinks move a user to another page within a web site or on another site, or to a section of a page. An image can be used to make a link as easily as text. The procedure is the same, just select the image instead of text.

Link to a page within your site

1. Open the page where you would like to put a link. (If it's a brand new page, save it before making links.)

2. Select the text or image you want the user to click.

3. Right-click the selected text and choose Hyperlink from the popup menu.

4. Click the "Existing File or Web Page" button in the top left of the Insert Hyperlink window.

5. Browse to and select the page you wish to link.

6. Click OK.

7. Save the page.

8. Test the link by previewing it in your web browser.

Using SharePoint Designer – page 3 © The University of Iowa College of Education – 2007

Link to a page outside your site

1. Use a web browser to go to the desired page

2. Select and copy the page address (URL).

3. Return to Designer. Open the page where you wish to place the link.

4. Add text for the link and highlight the text.

5. Right-click the selected text and choose Hyperlink from the popup menu. .

6. Click in the "Address" field in the Insert Hyperlink window.

7. Press the Control and V keys to paste the URL that you've copied.

8. Click OK

9. Save your page.

10. Test the link, by previewing it in your web browser.

Make "hotspot" link on an image

A hotspot is an area of an image that works as a link.

1. Make sure the Pictures toolbar is visible. If not, under the View menu choose Toolbars> Pictures.

2. Select the image.

3. Select one of the tools from the Pictures toolbar.

4. Click and drag around the area of the image that will be the hotspot.

5. Enter link information in the normal way.

6. Test the link, by previewing it in your web browser.

Using SharePoint Designer – page 4 © The University of Iowa College of Education – 2007

Make a "section anchor" link

Section anchors are link targets within pages. Using an anchor, you can link to a specific section of a page.

1. Place the cursor where you want the anchor.

2. Insert menu > Bookmark

3. Name the bookmark and click OK.

Link to a section anchor

1. Select the link text and choose Hyperlink in the normal way.

2. In the Hyperlink window select the named anchor from "Place in this Document."

3. Click OK.

Make an e-mail link

Email links launch an email client on the user’s computer and begin a message to the given address.

1. Select the item that will become the link as described above.

2. Right-click the selected text and choose Hyperlink from the popup menu.

3. Click the "E-mail address" button on the bottom left of the Insert Hyperlink window.

4. In the "E-mail address" field of the Insert Hyperlink window, type the desired email address. NOTE: Do not use any spaces in the email address.

5. Click OK.

6. Test the link by clicking on it in your web browser. NOTE: Email is disabled on ITC computers.

Using SharePoint Designer – page 5 © The University of Iowa College of Education – 2007

Remove a link

1. Right-click the hyperlink.

2. Select Hyperlink Properties.

3. In the dialog box choose Remove Hyperlink.

Tables

Make a Table

1. Table menu> Insert Table. The Insert Table opens.

2. Set the number of rows and columns in the table. In the example, 3 rows and 3 columns are specified.

3. Set the Alignment. Setting alignment to left or right will allow other text on the page to wrap around the table. Text will not wrap around a centered table.

• Leave Float set to Default because the feature does not work correctly in many browsers.

4. Set Cell Padding to specify the number of pixels between the cell content (e.g. text, images, etc.) and the border. If you want no padding, enter 0.

5. Set Cell Spacing to specify the number of pixels between cells. If you want no spacing, enter 0

6. Set the table width by entering either a number of pixels or a percentage of the screen width in the Specify Width field, and clicking the Pixels or Percent button.

7. Set the Border to specify the thickness of the lines around each cell. If you don't want a border, set the width to 0.

8. Click OK.

Using SharePoint Designer – page 6 © The University of Iowa College of Education – 2007

Change a table's format

1. With the cursor is inside the table, choose Table menu> Table Properties.

2. Alignment: Use the Alignment popup menu to set Left, Right or Center.

3. Color: Select Table, Cell, Column or Row and use Background to change table, cell, row, or column color.

New Pages

Sometimes it's a good idea to add captions or explanatory paragraphs to scanned images and photos. To do that, make a new page, insert the images, and add the text.

Make a new page

1. Choose File menu> New> Page or Web

2. Choose New> Blank Page in the New Page or Web panel.

3. Save the page. Use a short but meaningful name. Remember to avoid illegal characters. Use only letters, numbers, and – or _.

Set the page title

The page title is the text that appears at the top of the browser window and in the browser's Go and History menus, as well as being used by internet search engines.

1. Select File menu> Properties. The Page Properties window will appear.

2. Click the General tab if it is not already chosen.

3. Enter a title into the Title field.

4. Click OK to set the title.

5. Save the page.

Insert a picture

Before inserting pictures, make sure they have been optimized for the web. In most cases 600 pixels should be the maximum width and 450 pixels the maximum height. The resolution should be 72 and the file size should be no more than 100KB. For more information, see the links under "Still Photography and

Using SharePoint Designer – page 7 © The University of Iowa College of Education – 2007

Scanning" on the ePortfolio Resources Tech Guides page (http://www.education.uiowa.edu/resources/tech_guides/)

1. Place the cursor in your document where you would like to insert an image.

2. Click the Insert Picture icon or Choose Insert menu> Picture> From File…

3. Find and select an image in the resulting window.

4. Click the "Insert" button.

5. Double-click the image to select Picture Properties. In the Picture Properties General and Appearance tabs, set the attributes of the image.

• Alternate text: enter text that will be displayed when the image is chosen or read by a screen reader.

• Setting Wrapping Style to Left or Right will wrap text around the picture.

• Border thickness will add a border around the picture. If you don't want a border, enter 0.

• Horizontal and Vertical spacing will add space between the picture and text. If you don't want a spacing, enter 0.

• Important note about resizing: It is best not to use the Picture Properties window to resize images. Resizing the image here does not change the image file size, just how the browser displays it. If you are making a big image file into a small display image you should use an image editor such as Photoshop or Fireworks to make a separate small image. Because this Picture Properties window to make an image display smaller on the screen does not change the image's file size, which can result in wasted web site space and slower download times for users.

Using SharePoint Designer – page 8 © The University of Iowa College of Education – 2007

Clean Up Problems

Sometimes Office documents do not convert well into web pages. Tables or text box layouts may not appear correctly. Images may not appear at all in some browsers.

Improper page layout

Complex page layouts in Word or Excel documents can be preserved by saving the original document as a PDF file, which appears the same as a printed version.

1. In Word, click the Office button.

2. Click Save As.

3. In the Format popup menu, choose PDF.

4. Save the file in the proper location.

Pages or images don’t appear in all browsers

Sometimes Word adds "active" content that causes trouble with some browsers. Optimizing the problem html code or replacing images will correct the problem. Be sure the page opens in Designer rather than Word.

1. Open the page in Designer.

2. Under the Tools menu choose Optimize HTML

3. Check all the boxes in the next window EXCEPT the two dealing with white space.

4. Click OK.

5. Check the page in the problem browser. Use another computer to be certain the page is fixed. If it is fixed, you're done.

Using SharePoint Designer – page 9 © The University of Iowa College of Education – 2007

If images still refuse to appear try replacing them.

1. Open the course folder on the Desktop. Find the page that has the problem image.

2. Find the images for the page. The folder has the same name as the page file followed by "_files" (e.g. the images for pagename.htm are in a folder named pagename_files).

3. Find the problem image. If thumbnail images are not visible, set the View to Icons.

4. The image files are named image001.jpg, image002.jpg, and so on. There will probably be two versions of each image.

5. Check the size of each of the two image files. You want to use the smaller one, probably the one with an even-number in its name.

6. Open the page in Designer.

7. Click once on the bad image and delete it.

8. With the cursor in the same spot, insert the companion image.