7/31/2019 Share Point Class Hand Out
1/22
Creating Personal Web Sites
Using
SharePoint Designer 2007
Faculty Workshop
May 12th
& 13th
, 2009
7/31/2019 Share Point Class Hand Out
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
7/31/2019 Share Point Class Hand Out
3/22
SharePoint Designer 2007May 2009
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
7/31/2019 Share Point Class Hand Out
4/22
SharePoint Designer 2007May 2009
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
7/31/2019 Share Point Class Hand Out
5/22
SharePoint Designer 2007May 2009
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
7/31/2019 Share Point Class Hand Out
6/22
SharePoint Designer 2007May 2009
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/31/2019 Share Point Class Hand Out
7/22
SharePoint Designer 2007May 2009
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
7/31/2019 Share Point Class Hand Out
8/22
SharePoint Designer 2007May 2009
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
7/31/2019 Share Point Class Hand Out
9/22
SharePoint Designer 2007May 2009
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
7/31/2019 Share Point Class Hand Out
10/22
SharePoint Designer 2007May 2009
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
7/31/2019 Share Point Class Hand Out
11/22
SharePoint Designer 2007May 2009
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
7/31/2019 Share Point Class Hand Out
12/22
SharePoint Designer 2007May 2009
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
7/31/2019 Share Point Class Hand Out
13/22
SharePoint Designer 2007May 2009
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
7/31/2019 Share Point Class Hand Out
14/22
SharePoint Designer 2007May 2009
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
7/31/2019 Share Point Class Hand Out
15/22
SharePoint Designer 2007May 2009
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
7/31/2019 Share Point Class Hand Out
16/22
SharePoint Designer 2007May 2009
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..
7/31/2019 Share Point Class Hand Out
17/22
SharePoint Designer 2007May 2009
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
7/31/2019 Share Point Class Hand Out
18/22
SharePoint Designer 2007May 2009
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
7/31/2019 Share Point Class Hand Out
19/22
SharePoint Designer 2007May 2009
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
7/31/2019 Share Point Class Hand Out
20/22
SharePoint Designer 2007May 2009
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/7/31/2019 Share Point Class Hand Out
21/22
SharePoint Designer 2007May 2009
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/7/31/2019 Share Point Class Hand Out
22/22
SharePoint Designer 2007May 2009
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