share point class hand out

7/31/2019 Share Point Class Hand Out

1/22

Creating Personal Web Sites

Using

SharePoint Designer 2007

Faculty Workshop

May 12th

& 13th

, 2009


2/22

SharePoint Designer 2007May 2009

Faculty Workshop 1

Overview

Create

Home Page: INDEX.htm

Other Pages

Links from Home Page to Other Pages

Pictures

Prepare by Resizing/Cropping with Microsoft Office Picture Manager

Authoring and Publishing Location 2 Separate Places

Authoring: \Private

Publishing: ftp://users.etown.edu/x/xxxx

Browser Navigates to HTTP://users.etown.edu/x/xxxx

Setup a Site

File Locations

Authoring-Working Location

This is where you create and edit the web site

The location will be in your Private folder, but it could be on your own computer or a

memory stick.

Publishing Location

The college has space assigned to you on the FTP server

Amount of Space: 35 Meg

Start SharePoint Designer

Start, Programs, Microsoft Office 2007, Microsoft Office SharePoint Designer 2007

(whew, Microsoft really wants us to know its a Microsoft product)

The program is available in college computer labs as a part of Office 2007 Professional

If you are using Office 2003, you should start Front Page. Front Page 2003 is similar to

SharePoint Designer 2007

Click Yes to make SharePoint the default web design program


3/22


Faculty Workshop 2

Start a New Web Site

Menu: File, New, Web Site

Web Site tab

Web Site tab

Select General, Empty Web Site

Browse

Locate and

Open Your

Private folder

Click Create New Folder Button

Type: PersonalWebSite (or the name you will use)

Click OK

Click Open


4/22


Faculty Workshop 3

Make sure General, Empty Web

Site is still selected

Click OK

The program indicates it is working

Web Site Created

No web pages have yet been created


5/22


Faculty Workshop 4

Open a Web Site

SharePoint remembers the last web site worked on and opens that automatically when

SharePoint starts. If you are using a computer that wasn't the one where you created the web

site in SharePoint Designer, you will have to open the site yourself.

Menu: File, Open Site

Navigate to the authoring/working location of the

site

Note the globe on the folder icon which indicates this is a web folder

Click the folder

Click Open

Web site is opened


6/22


Faculty Workshop 5

Create a New Web PageHome Page

Pages are files inside the site.

No spaces are allowed in web page file

names.

Menu: File, New, Page

Select General

HTML

OK

Blank page is created

Select a Layout Table to Organize the Page

Display the Table Pane

Menu: Table, Layout Tables

Layout Tables pane displayed


7/22


Faculty Workshop 6

Select a Layout Table

Under Table layout

Select a layout by clicking on your choice

Type a page title

Click in the top most cell, type the pages name

Save the Home Page

* Indicates page is not savedClick Save button, or File, Save

Filename: type INDEX

.htm is appended automatically

(this file will become the Home page)

Page

displays

layout


8/22


Faculty Workshop 7

View List of Files in Site

Click Web Site tab

Folder List displays newly

saved web page

Continue Working on INDEX

Click index.htm tab

(INDEX is the Home page)

Change the Font and Font Size

Select the text

From the Font and Size drop downs, choose the font and size

you prefer

Changed text

Change Text Alignment

Select the text

Click one of the alignment buttons

Contact Information

Click in bottom cell of table

Menu: Insert, HyperlinkE-mail Address

Text to display:

Type: Contact

E-mail address:

Type: your own

Type: a subject line

OK

Keyboard Shortcut:

Control + ] 1 point larger

Control + [ 1 point smaller


9/22


Faculty Workshop 8

Web Page Update Date and Time

In bottom cell under Contact

(or whatever location you want the date to appear)

Menu: Insert, Web Component

Included ContentDate and Time

Finish

Select Date this page was last edited

Select a date and time format

OK

Change paragraph alignment, font and size as you wish

Copyright Indicator

If you indicate that the images arecopyrighted, then people are not

supposed to download or copy them

without your permission

Copyright Symbol

Menu: Insert, Symbol

Choose

Click Insert

Click Close


10/22


Faculty Workshop 9

Change Background Color

Menu: Format, Background

Colors

Background: click list arrow

Choose More Colors

Choose a color

OK

Copy a Color

Any color that appears on the monitor may be copied

Click Select

Use it to click on a color you like from another web

page, photo, etc.

Fill Page with Texture

Check Background pictureClick Browse:

Navigate to C:\Program Files\Microsoft Office\Clipart\Publisher\

Backgrounds

Black Background Requires Light Colored Text

Make the other color combinations pleasing

OK


11/22


Faculty Workshop 10

Create Web Page from Existing PageSave As

INDEX is open

Menu: File, Save As

Type the name of the next web page

Ex.: Resume

Change the title of the page

Click Change title

Enter the name you

want displayed in thebrowsers title bar

OK

Click Save

Continue with Save As

until all the pages are created


12/22


Faculty Workshop 11

Select a Different Web Page

If the page is open

Click the appropriate tab

Otherwise, click Web Site tab

Open from list

Links to Pages in Your Site

Start with INDEX

Select the text on the page which will become the link

RIGHT mouse click selected text

Click Hyperlink

Select

Existing File or

Web Page

Click the one of the files you

created

OK

Link is indicated

Click Open


13/22


Faculty Workshop 12

Hyperlinks to Other Web Sites

Visit the Site and Copy the URL

Click in the address bar

Select the entire address

Press: Control + C

On Your Web Page, Type the Text for the Hyperlink

Type the text identifying the link

Select the text

Create the Hyperlink

Menu: Insert, Hyperlink

Click in the Address: box

Press: Control + C

Click OK

The text appears as a link

Test the Hyperlink

Save the file

Press: F12

Click the link

Remove a Link

RIGHT mouse click the link

Select Hyperlink Properties

Choose Remove Link


14/22


Faculty Workshop 13

Link to a Document

Copy the Document/PDF File to the Web Folder

Refresh the list of files in the folder

Menu: View, Refresh

Note: Save Word documents as PDF files. PDF files may be opened and viewed by anyone, but

unlike Word files, cant be easily changed.

On Your Web Page, Type the Text for the Hyperlink

Type the text identifying the link

Select the text

Menu: Insert, Hyperlink

Click Browse button

Navigate to the location of the

document

OK

OK


15/22


Faculty Workshop 14

Resize a Picture BEFORE it is InsertedUse Picture Manager

Start Picture Manager

Note: Create a folder for the pictures you will use and copy the pictures there.

Start, All Programs, Microsoft Office, Microsoft Office Tools, Microsoft Office Picture Manager

Picture Manager:

Open and Select a File in Picture ManagerMenu: File, Add Picture Shortcut

Navigate to the folder that contains your pictures

When the folder is open, click Add

The contents of the folder appear


16/22


Faculty Workshop 15

Click on the file you want to resize

Example uses Ferns in Woods

Edit the Picture

Click Edit Pictures

Click Resize

Select Predefined width x height

Maximum picture width

should be 600 pixels

Save the Picture with a New Name

Dont use the same file name as the original

Note the asterisk next to the picturethis means it hasnt been saved

Menu: File, Save As..


17/22


Faculty Workshop 16

Type a new name and click Save

Example: Small FernsInWoods

Close Picture Manager

Dont save files when prompted

Click Dont Save

(You saved the file with a different name in the steps above)

Insert a Picture

Click where the picture is to appear

Menu: Insert, Picture, From File

Select the file

Click Insert

Type Accessibility Properties if desired

Click OK

Save web page file


18/22


Faculty Workshop 17

Indicate to which subfolder in the site the image is saved to

(or it can be the same folder in which your pages are saved)

OK

Thumbnail a Picture

A thumbnail is a small version of an image which enlarges when clicked

Insert the image and select it

Press: CTRL + T

Save the web page

Check the folder, it should be Images/ in your web site, assumingthat is where you are placing all pictures there

OK

Bevel the Thumbnail

RIGHT click the thumbnail

Select Show Pictures Toolbar

On the picture toolbar, click the Bevel button

Thumbnail is beveled

Code That Forces Thumbnail to Open in New Window

Select Split View

In the Design pane, click the thumbnail

In the Code pane, find


19/22


Faculty Workshop 18

Save Web PageSaves Picture to Local Web Site

Horizontal Line

Click where you want the line

Menu: Insert, HTML, Horizontal

Line

Insert a Table

Usually this is done in a blank web page. If you used a table

layout for your page, you will be inserting a table inside one

of the table layout cells.

The upper left corner of the table appears at the cursor

position

Menu: Table, Insert Table

Change the number of rows and columns

Edit other defaults as necessary

OK

Resize column widths by dragging right border of column

Resize row height by dragging bottom border of row


20/22


Faculty Workshop 19

Publish Site

Save all web pages

Menu: File, Publish Site

Type username: (your network username)

Type password: (your college id number without any

beginning zeros)

OK

Web Server Type: FTP

Fill in the dialog box to match the example

Remote Web site location:

ftp://users.etown.edu

FTP directory:

x/xxxx/

or

x/xxx/PersonalWebsite

(folder on the FTP server)

Click OK to allow site folder to be built
ftp://users.etown.edu/ftp://users.etown.edu/ftp://users.etown.edu/


21/22


Faculty Workshop 20

Select Local to remote

Click Publish Web site

Web site is published

Browse to Web Site

In Internet Explorer

URL: http://users.etown.edu/x/xxxxx/

Or

http://users.etown.edu/x/xxxx/PersonalWebSite

Where x/ is the first initial of your last name

xxxxx is your username

/PersonalWebSite is the subfolder (use only if you created a subfolder on page 19)

Help

Keyboard Shortcuts for Microsoft Office SharePoint Designer 2007

http://office.microsoft.com/en-us/sharepointdesigner/HA101743231033.aspx

Click in Type a question for help

(upper right corner of window)
http://users.etown.edu/x/xxxxx/http://users.etown.edu/x/xxxxx/http://users.etown.edu/x/xxxxx/http://users.etown.edu/x/xxxxx/http://users.etown.edu/x/xxxxx/http://users.etown.edu/x/xxxxx/http://office.microsoft.com/en-us/sharepointdesigner/HA101743231033.aspxhttp://office.microsoft.com/en-us/sharepointdesigner/HA101743231033.aspxhttp://office.microsoft.com/en-us/sharepointdesigner/HA101743231033.aspxhttp://users.etown.edu/x/xxxxx/


22/22


Index

Authoring Working Location .................... 1

Authoring and Publishing ............................ 1

Background Color ........................................ 9

Black Background Requires Light Colored

Text.......................................................... 9

Browse to Web Site................................... 20

Change Alignment ....................................... 7

Change the Font and Font Size ................... 7

Contact Information .................................... 7

Copy a Color ................................................ 9

Copy the Document/PDF File to the Web

Folder .................................................... 13Copy the URL ............................................. 12

Copyright Indicator ..................................... 8

Copyright Symbol ........................................ 8

Create a New Web Page ............................. 5

Display the Table Pane ................................ 5

Document/PDF File ................................... 13

File Locations............................................... 1

Fill Page with Texture .................................. 9

FTP directory ............................................. 19

Help ........................................................... 20

Home Page

File name ................................................. 6

Save the Page .......................................... 6

Horizontal Line .......................................... 18

Insert a Table............................................. 18

Layout Table ................................................ 6

Layout Table to Organize the Page ............. 5

Link

Copy the URL ......................................... 12

Create the Hyperlink ............................. 12

Hyperlinks to Other Web Sites .............. 12Link to a Document ............................... 13

Remove Hyperlink ................................. 12

Test Hyperlink ....................................... 12

Type the Text for the Hyperlink ............ 12

Navigation Bar Links .................................. 11

New Web Site .............................................. 2

Open a Web Site ......................................... 4

Overview ..................................................... 1

Page title type on web page .................... 6

Pictures ..................................................... 16

Bevel the Thumbnail ............................. 17

Edit the Picture ..................................... 15

Insert a Picture ...................................... 16

Open and Select a File in Picture Manager........................................................... 14

Resize a Picture BEFORE it is Inserted

Use Picture Manager ........................ 14

Save Picture to Local Web Site ............. 18

Save the Picture .................................... 15

Thumbnail a Picture .............................. 17

Thumbnail Open in New Window ......... 17

Publish Web Site ................................. 19, 20

Publishing Location ..................................... 1

Remote Web site location ........................ 19

Save the Page .............................................. 6

Select a Different Web Page ..................... 11

Setup a Site ................................................. 1

Start Picture Manager ............................... 14

Start SharePoint Designer ........................... 1

Table .......................................................... 18

Thumbnail ................................................. 17

Bevel ...................................................... 17

Update Date and Time ................................ 8

URL ............................................................ 20

View List of Files in Site ............................... 7Web Page from Existing Page ................... 10

Web Server Type: FTP ............................... 19

share point class hand out

Documents