Creating Personal Web Sites
Using SharePoint Designer 2007
Faculty Workshop May 12th & 13th, 2009
SharePoint Designer 2007 May 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 it’s 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
SharePoint Designer 2007 May 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
SharePoint Designer 2007 May 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
SharePoint Designer 2007 May 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
SharePoint Designer 2007 May 2009
Faculty Workshop 5
Create a New Web Page – Home 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
SharePoint Designer 2007 May 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 page’s name
Save the Home Page
* Indicates page is not saved
Click Save button, or File, Save… Filename: type INDEX .htm is appended automatically (this file will become the Home page)
Page displays layout
SharePoint Designer 2007 May 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, Hyperlink…E-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
SharePoint Designer 2007 May 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 Content Date 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 are copyrighted, then people are not supposed to download or copy them without your permission
Copyright Symbol Menu: Insert, Symbol Choose © Click Insert Click Close
SharePoint Designer 2007 May 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 picture Click Browse: Navigate to C:\Program Files\Microsoft Office\Clipart\Publisher\ Backgrounds
Black Background Requires Light Colored Text Make the other color combinations pleasing OK
SharePoint Designer 2007 May 2009
Faculty Workshop 10
Create Web Page from Existing Page – Save 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 the browser’s title bar OK Click Save Continue with Save As… until all the pages are created
SharePoint Designer 2007 May 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
SharePoint Designer 2007 May 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
SharePoint Designer 2007 May 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, can’t 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
SharePoint Designer 2007 May 2009
Faculty Workshop 14
Resize a Picture BEFORE it is Inserted – Use 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 Manager Menu: 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
SharePoint Designer 2007 May 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 Don’t use the same file name as the original Note the asterisk next to the picture – this means it hasn’t been saved Menu: File, Save As..
SharePoint Designer 2007 May 2009
Faculty Workshop 16
Type a new name and click Save Example: Small FernsInWoods Close Picture Manager Don’t save files when prompted Click Don’t 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
SharePoint Designer 2007 May 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, assuming that 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 <a href=”Images/picture filename” Click after the <a Press: Spacebar Type: target=”_blank” Press: Spacebar
SharePoint Designer 2007 May 2009
Faculty Workshop 18
Save Web Page – Saves 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
SharePoint Designer 2007 May 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
SharePoint Designer 2007 May 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)
SharePoint Designer 2007 May 2009
Faculty Workshop 21
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 .................................................... 13 Copy 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 .............. 12 Link 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 ............................... 7 Web Page from Existing Page ................... 10 Web Server Type: FTP ............................... 19
Top Related