Creating Personal Web Sites Using SharePoint Designer 2007

Creating Personal Web Sites Using SharePoint Designer 2007

Faculty Workshop May 12th & 13th, 2009

SharePoint Designer 2007 May 2009

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

Faculty Workshop

1

SharePoint Designer 2007 May 2009

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

Faculty Workshop

2

SharePoint Designer 2007 May 2009

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

Faculty Workshop

3

SharePoint Designer 2007 May 2009

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

Faculty Workshop

4

SharePoint Designer 2007 May 2009

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

Faculty Workshop

5

SharePoint Designer 2007 May 2009

Select a Layout Table Under Table layout Select a layout by clicking on your choice

Page displays layout

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)

Faculty Workshop

6

SharePoint Designer 2007 May 2009

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 Keyboard Shortcut: Control + ] 1 point larger Control + [ 1 point smaller 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 Faculty Workshop

7

SharePoint Designer 2007 May 2009

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

Faculty Workshop

8

SharePoint Designer 2007 May 2009

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

Faculty Workshop

9

SharePoint Designer 2007 May 2009

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

Faculty Workshop

10

SharePoint Designer 2007 May 2009

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

Faculty Workshop

11

SharePoint Designer 2007 May 2009

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

Faculty Workshop

12

SharePoint Designer 2007 May 2009

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

Faculty Workshop

13

SharePoint Designer 2007 May 2009

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

Faculty Workshop

14

SharePoint Designer 2007 May 2009

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..

Faculty Workshop

15

SharePoint Designer 2007 May 2009

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

Faculty Workshop

16

SharePoint Designer 2007 May 2009

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