Using SharePoint Designer

Contents
Open Web Site --------------------------- p.1 Tables ------------------------------------- p.5
Make a table ---------------------------- p.5
Before doing anything else… --------- p.2
Change a table's format---------------- p.6
Hyperlinks ------------------------------- p.2
New Pages-------------------------------- p.6
Link to a page in your site--------------p.2
Make a new page ----------------------- p.6
Link to a page outside your site--------p.3
Set the page title ----------------------- p.6
Make a "hotspot" link on an image ----p.3
Insert a picture ------------------------- p.6
Make a "section anchor" link -----------p.4
Link to a section anchor ----------------p.4 Clean Up Problems ---------------------- p.8
Make an email link ----------------------p.4 Improper page layout ------------------ p.8
Remove a link ---------------------------p.5 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 1 © 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 2 © 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 3 © 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 4 © 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 5 © 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 6 © 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 7 © 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 8 © 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.

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