Microsoft SharePoint Designer Quick Guide

Rhonda Bauerlein

Rocky Rose

619-660-4013

619-660-4466

[email protected]

[email protected]

Cuyamaca College Teaching & Learning Center

Updated 7/16/2012

Prior to Web Development 1. Obtain a network login and password. 2. Obtain a web container/site from Rocky or Rhonda.

Open Microsoft SharePoint Designer 1. 2. 3. 4.

Select the Start button All Programs Microsoft Office Microsoft Office SharePoint Designer 2007

PLEASE NOTE: This is NOT the same as Microsoft Office SharePoint Workspace 2010 & therefore, Workspace should NOT be used!

Open Your Web site 1. In SharePoint Designer, select File > Open Site to display the Open Site dialog box. 2. Enter your URL in the Site Name field, located at the bottom of the dialog box. This is going to be http://www.cuyamaca.edu/departmentabbreviation for a department website, and http://www.cuyamaca.edu/firstname.lastname for a faculty site. Then click Open.

Page 2 of 12

3. When prompted, enter your network User name and password as you would to access your campus computer or your campus e-mail account with an important difference. Please notice in the “User name” box that the User name is preceded by GCCCDEDU (not case sensitive) then a \ (back-slash) followed by your user name (firstname.lastname).

Default View Once the site is open, you will be in the default view of SharePoint Designer.

Page 3 of 12

Open a File 1. Double-click on the file name you would like to work on, remembering that default.asp is your home page. Additional templates may be located in a folder called templates03. 2. At the bottom of the screen there are three buttons that allow you to change the view.

a. Design view is like working in Word (What You See is What You Get a.k.a. WYSIWYG). b. Code view shows only the HTML code. You can edit the code directly here. c. Split view lets you see both the design view and the Code view at the same time. You can use this view to edit the HTML code while being able to see where you are on the page.

Templates There are three main templates you can use to develop your website. These templates are in the folder called templates03. 1. template_menu.asp has a navigation bar on the left side. This navigation bar area is used when navigation throughout the site will be repeated on most of the pages and/or when lots of bookmarks will be used. This is the most commonly used template on department websites. There is a file called menu.htm that is associated with this template. Menu.htm must be in your root directory (copy menu.htm from the templates03 folder to the root). Modify menu.htm when you want to make changes to your left side navigation bar.

Page 4 of 12

2. template_no_menu.asp doesn’t have the left side Navigation Bar. It can be used for just about anything.

3. facultyTemplate_3.asp is used to create a faculty website. There is a placeholder for your picture, and pre-formatted text areas for information that most faculty will want on their website.

Page 5 of 12

Formatting Your Text

1. First select the text by highlighting, and then click your choice of buttons in the Formatting Toolbar. Hover your cursor over a button to display an explanation of what that button will do. Toolbar buttons let you change font face, font size, and text color. You can also make the text bold, italics, or underlined. Most people think underlined text is a link, so use underlines as little as possible. Note: Common “web-safe” fonts are: Arial, Verdana, Garamond, Times New Roman. Common font sizes are: 8pt, 10pt, 12pt and 14pt. 2. Use Shift + ENTER to go to the next line, single spaced or press the ENTER key for double spacing. 3. Now would be a good time to save and preview. The Preview button is to the right of the save button on the toolbar. Click that button and click Yes when asked if you would like to save. Once the browser has opened, remember to click the Refresh button to view the latest saved version. Save Often!! You are working LIVE! You don’t want a momentary “hiccup” to cause the loss of all unsaved work.

Add Hyperlinks to Your Page 1. To link to a file or another web page, highlight the text you want to have the link associated with. Then right-click on the highlighted text and select Hyperlink from the menu, or select Insert > Hyperlink from the menu to open the dialog box. To link to an external web page, navigate to that page in IE and copy & paste the URL into the Address box. To link to a file, click on the file you want to link to. If you want to link to an e-mail address, click on the Email Address button to display the dialog box. 2. To open a link in a new window, click on Target Frame… in the Insert Hyperlink dialog box and select New Window. Then click OK. Note: You will want to use this especially when linking your PDF files.

Page 6 of 12

Insert an Image 1. Click on the image file in the SharePoint Designer Folder List, then drag and drop it onto your web page where you want it. 2. Type a brief description of the image in the Alternate text field. This is required for accessibility.

Use Tables for Page Layouts When you want text blocks or graphics to show up in a particular place, insert a table and place all the text or graphics within cells of the table. This will also enable your pages to “size” or “float” to whichever size monitor screen your viewer is using. 1. Make sure your insertion point is where you want the table to be and go to Table > Insert Table

Page 7 of 12

2. From the Insert Table dialog box, enter the table size you want, as measured by the number of rows and columns. Specify width in percentages (80% works well), never pixels, and then click the OK button.

3. Enter text into the table either by typing or copying & pasting from a Word Document into the cells you wish to use.

Page 8 of 12

Edit Table Properties To edit the table’s properties, right-click on the table and select Table Properties from the pop-up menu. From the Table Properties dialog box, you can change the cell padding and spacing, border sizes and add a background color. Use the Apply button to preview any action before making it permanent.

Other options for tables can be found using the Table menu item, where you can spilt a cell, merge two or more cells into one, delete cells, or add more cells. Remember, as with tables, cells will grow dynamically as data is placed in them.

Page 9 of 12

Edit Cell Properties You can also change the properties of an individual cell by right-clicking in the cell and selecting Cell Properties from the pop-up menu. From the Cell Properties dialog box, you can add a border and change its color, and add background or fill color to that cell.

Creating and Using Bookmarks Bookmarks assist in navigating around a web page by allowing the user to click a link to go to a particular place in the page, eliminating the need for scrolling to find what s/he is looking for. 1. Place your curser at the place in the document where you want to assign a bookmark. This is usually a topic heading or the beginning of a new subject matter or page. From the menu bar, go to Insert > Bookmark to open the Bookmark dialog box.

Page 10 of 12

2. Give your new bookmark a name. The name in our example will be “ExampleOne”. Note: Don’t put spaces or funny characters in bookmark names. Then click the OK button. You now have a bookmark that you can link to from within this page, or from other web pages.

3. Next you will select the text that will contain the link to the bookmark, then right-click. From the pop-up menu, select Hyperlink. 4. Once the Hyperlinks Properties box opens, click on the Bookmark button located at the upper right.

5.

The Select Place in Document dialog box will appear. Highlight the bookmark you want to the link to point to and click the OK button.

Page 11 of 12

Preview Your Work 1. Click on the Preview button in the toolbar or use the F12 key to see how your pages will look to your students. Remember to always click the Refresh button in your browser to see the most recently saved version of your page. 2. Save Often!!! You are working LIVE on our Web Server and you want to be protected against any momentary “hiccups” which could cause the loss all your work if you have not saved. 3. When you are all done, don’t just click on the X in the upper right-hand corner of SharePoint. This could prevent you from being able to open your web site again on the grounds that it was not closed properly. Instead, go to File > Close Site and then close SharePoint Designer with the X.

How to get Microsoft SharePoint Designer for FREE You can download a FREE copy of SharePoint Designer 2007 for your home computer from the following web site: http://tinyurl.com/cz22uy Then scroll down to the blue Download button and click on

the button across from “SharePointDesigner.exe”. Then follow the “To install the download” instructions a bit further down that page.

How to Buy Microsoft SharePoint Designer You can purchase MS SharePoint Designer for your home computer for under $30. On the District website (www.gcccd.edu) choose Staff Info from the navigation bar.

Then choose Software for Home from the left side navigation bar.

Getting your name linked to your web site in the Directory Once your site is ready for student access, please e-mail either Marilyn Semaan or Vicky Trask to have your name in the District’s Online Faculty/Staff Directory connected (linked) to your web site.

How to make PDF files out of Word Documents This PDF file will show you how to save Word documents in PDF format, right from within MS Word. http://www.cuyamaca.edu/tlc/pdf/pdf-add-in.pdf With MS Word 2010: FILE Save & SendCreate PDF/XPS DocumentsClick on the Create PDF/XPS Document icon (button) on the right.

FREE picture editor similar to Photoshop but a lot easier This free picture editor has some of the same functionality as Photoshop but is a lot easier to use: http://www.picmonkey.com

Page 12 of 12