2010 Information Technoloy Services

Concordia College, Moorhead, MN

January, 2010

SharePoint Designer

2 | P a g e

SharePoint Designer Training Goal: The purpose of this training document is to provide end users with information to create or edit a website and web pages using SharePoint Designer, and to upload that web site to Concordia’s wwwWin server. End users should note that SharePoint Designer is intended to be used for SharePoint Products and Technologies but can be used for most web page/site creation projects. SharePoint products are not available for use on the Mac.

About Microsoft SharePoint Products and Technologies SharePoint Designer is an application used to create and customize Microsoft SharePoint Web sites. SharePoint Designer is part of a collection of products known as Microsoft SharePoint Products and Technologies. Within this collection are: SharePoint Server, Windows SharePoint Services, and SharePoint Designer. When the SharePoint products were introduced, Microsoft also released Expression Web. Both products are based on Front Page and Visual Studio and are designed for information workers and professional Web designers.1 SharePoint Designer is distributed as a free application and SharePoint sites can only be edited using SharePoint Designer. SharePoint Server 2007 is a tool that facilitates collaboration among users. In a traditional corporate environment, users have access to secured personal and departmental network drives. Work stored on a traditional network drive is typically organized as a series of folders and files. SharePoint Server takes network file organization a step further by providing a tabbed interface that looks and operates like a common website and includes collaborative versions of calendaring, address books, survey tools, and syndicated services (you can subscribe to and be notified when someone updates information), file version tracking, and more. Web pages within SharePoint Server 2007 can be updated using SharePoint Designer. SharePoint Services is a component of Windows Server 2003 and is a platform from which applications (special programs) are created. It should be noted that SharePoint Server 2007 is an application built from Windows Server 2003 but is not a component of Windows Server 2003 – it is purchased separately. This means all the features for creating applications in SharePoint Services are available in SharePoint Server 2007. SharePoint Server 2007 can combine information from a number of locations thereby enabling various levels of functionality for an organization.

Getting Started with SharePoint Designer

1. Choose Start 2. Programs 3. Microsoft Office 4. Microsoft Office SharePoint Designer

NOTE: If you had opened a SharePoint Designer URL previously, you may be prompted to log in (see right). Your username must be preceded with cord\. Type the password you would normally use to log into the network. The site which was opened

3 | P a g e

previously will appear after you log in. It is recommended that you only have one SharePoint Designer site open at one time to avoid confusion in working with multiple sites or inadvertently updating the wrong site. You can verify which site you are currently working in by viewing the information in the Title Bar. You can close a website by choosing:

1. File 2. Close Site

The SharePoint Designer Workspace

Document window

This will display the contents of your website when a site is opened. Multiple pages in your site will appear as tabs across the top of the document window.

Menu bar SharePoint Designer has 12 menu choices which are similar to other Microsoft Office products. TIP: Note the underlined characters in the menu bar are available to help you learn keyboard commands for common tasks such as copy and paste. To activate the menu choice using a keyboard command, press Alt plus the corresponding underlined character. In the pull-down menu simply type the underlined character of the command you wish to perform.

Common toolbar The common toolbar appears by default and provides a visual representation of the commands available to you in the menus. Depending on the work you are doing, different tools may become available. You can customize toolbars by choosing the View menu, Toolbars, and Customize commands.

Menu bar

Common toolbar

Status bar

Document window

Task panes Task panes

Common Toolbar

Title bar

4 | P a g e

Task panes Task panes are windows which help you to perform certain tasks. The six task panes which you see in the diagram above will open by default. There are a total of 24 task panes which can be opened at any time by choosing the Task Panes menu on the Menu bar. (Individual task panes may be divided by tabs.) You can reset the task panes to their default setting. For more information on the default task panes which appear on your start up screen, see below. Task panes can be positioned to float or merge with other task panes. If the window size is reduced, task panes can float outside the program window.

Status bar This area displays a variety of information such as code errors, estimated time to download a page from a Web server, the size of the page, and cascading style sheet versions.

Working with Task Panes

Task Pane Description

Folder List This is where you will find the contents of your SharePoint site. The files are organized similarly to the way you would organize files on your computer. You can copy, paste, delete, and rename files in the same way you would on your computer.

Tag Properties The Tag Properties task pane is used to control HTML tag properties which are grouped into three categories: attributes, events, and misc (miscellaneous). If you’re not familiar with HTML code, visit this website for free tutorials: http://www.w3schools.com/

Toolbox This lists HTML tags, form controls, ASP.NET controls, and SharePoint controls that you put on web pages by dragging and dropping.

Apply Styles This task pane is used to create and apply cascading style sheets. For example, rather than create each web page from scratch, you create a page whereby the format, functionality and style are recreated and used for other web pages in your site.

Opening Your SharePoint Designer Site For this training session a site will be created for you by your professor or instructor. Follow these steps to open your site: 1. Choose File 2. Open site 3. In the Site Name field type

the URL of your site. The pattern or syntax to follow is shown at right.

4. If this is your first time logging into a SharePoint Designer site, you will be prompted for your username and password. Remember to precede your username with: cord\

Select above or use this pattern to type your site name: http://wwwwin.cord.edu/training

5 | P a g e

Creating Web Pages To create web pages from scratch follow these steps:

1. Click the New… tool from the Common Toolbar 2. Select Pages… 3. Choose General, then HTML 4. Click OK

Choose the Menu Bar and tools from the Common Toolbar to layout your default page. Remember to save your work periodically. Repeat steps 1 through 3 above to create additional web pages and add hyperlinks or other controls. Before inserting any images in your web page read “Organizing and Saving Embedded Images” below.

Saving a Web Page You may wish to follow a naming convention for naming the pages in your website. The first web page you create should always be saved as “default.htm”. Follow these steps:

1. File 2. Save 3. Verify that “default” is indicated as the file name and save to the location indicated or to a

folder designated by your instructor. The extension “htm” will be automatically assigned to the file name since you specified this file would be an html file. The tab at the top of the Document Window now reflects the new file name.

Previewing the Pages

Once you have created several web pages and have inserted images and hyperlinks, you’ll want to check the operability of your website. Choose:

1. File 2. Preview in Browser 3. Select the version of Internet Explorer to use for viewing the website.

Use this option to test hyperlinks and ensure they are performing as expected. Note that SharePoint is a Microsoft product therefore you must use Internet Explorer and not Firefox to preview your web pages.

Saving Your Website Selecting the top level domain and choosing the commands File and Save automatically saves your work on your website. This is the recommended method to use for student work. Another option is to save your work locally, on your computer’s hard drive or a network drive. Saving your work locally creates a backup of your website. If you make changes on your local copy you must update your work with the website. Saving your work directly on the website is preferable however working on a local copy of your website is an option you can use when you do not have a connection to the Internet.

6 | P a g e

Saving a Copy of Your Site on a Local or Network Drive

To save a SharePoint website to your computer’s hard drive follow these steps:

1. Be sure you have selected the top level domain for your site and not an individual web page or other component such as an image. An example of a top level domain for a student would be: http://wwwwin.cord.edu/training

2. Choose File, Save As. The Save As dialog box (pictured below) appears.

3. Select My Documents (or your network drive)pictured on the left 4. Locate and open the folder My Web Sites in the middle (not pictured). When you have selected

this folder the Save In location (top) will show that the file will be saved in My Documents\My Web Sites

5. Optional: specify a file name. File names are recommended if you manage multiple websites. 6. Choose Save 7. If you have images embedded in your website you will be prompted to designate a location to

save those embedded images. For more information on managing and organizing images, read the sections below entitled, “Advice: Managing and Organizing Images Using Picture Manager” and “Advice: Organizing and Saving Embedded Images.”

Warning: When you save a website to the server and then save a website locally, there will be two sessions of SharePoint Designer open at the same time. Observe the Title Bar of the SharePoint Designer screen to view which site you are currently working with.

7 | P a g e

How to Synchronize a Locally Saved Website

If you made changes to a locally saved website and wish to update the SharePoint Designer website you created on the server follow these steps:

1. Choose File 2. Publish… 3. Select Local to Remote (bottom right) 4. Publish Website

Notice above a conflict is detected for the Default.htm page. This means there were differences detected between the pages with the same names in the two websites. After clicking Publish Web Site this dialog box may appear:

8 | P a g e

In the example above and left, Default.htm was changed on the local copy and the user wants to overwrite the Default.htm file on the website. Select the file that was changed (left) and click the “Overwrite Remote Files” button to update the website. To verify the changes were made, close the local copy of your website. Then choose File, Open Site and select the URL of your website.

Advice: Managing and Organizing Images Using Picture Manager

Before you create your first web page you may want to organize and compress any images you wish to use on your site. Compressing images will provide for a faster redraw rate, which is the time it takes for images to become visible on your screen while a web site is loading. If you resize images after inserting them on your web page, the image takes more memory and will slow the redraw speed.

Open the My Pictures folder on your computer and create a new folder (File, New, Folder) to store the images you will use for your website. You can use Microsoft’s Picture Manager Program to compress and resize your images. This program is part of the Microsoft Office Professional Suite. To locate Picture Manager choose:

1. Start 2. Programs 3. Microsoft Office 4. Microsoft Office Tools 5. Microsoft Office Picture Manager

While in Picture Manager, choose the expansion symbol to the left of My Pictures in the left navigation bar to locate the image folder you just made. Open the folder to display your images. To make changes to an image, select the image and choose Edit Pictures from the toolbar at the top. A task pane appears on the right providing several choices for editing or compressing your image. To compress the image for your web page click Compress Pictures and choose Web pages. Click OK.

9 | P a g e

Advice: Organizing and Saving Embedded Images

When you insert an image in a web page it becomes and embedded image and must be saved with the web page. As you add more and more images to your web site you’ll want to keep those images organized in a folder. You can do this by creating a new folder named “Images” in the Folder List Task Pane on the left if a folder isn’t already there. To store your embedded images in this folder follow these steps:

1. When you save a web page that has images inserted you will be prompted to “Save the

Embedded Files”. 2. Verify that the embedded image will be stored in the new “Images” folder by clicking the

“Change Folder” button and selecting the “Images” folder in the list. 3. Choose OK, and OK again and your embedded image file will be stored in the “Images” folder.

Additional Notes For security reasons Concordia has disabled ASPX technologies. Some features may not be available.

For more information and additional training: 1. Coventry, P. (2008). Microsoft Office SharePoint Designer 2007. Redmond, Washington:

Microsoft Press. 2. SharePoint Designer Training Resources for beginners, intermediate and advanced users:

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