SharePoint Workshop Tutorials

SharePoint Workshop Tutorials
Contact Information:
James J. Jansen
SIEO Web Manager
The first step to edit anything on SharePoint is to sign in. In the top right corner of the webpage, select
Sign In. If you are using Internet Explorer on a campus computer, you will be automatically signed in.
Otherwise, you will be prompted to sign in with your UWSP logon.
After you sign in, in the top left corner, you will see Site Actions. If you do not see this, you do not have
the correct permission. The President or Treasurer of your organization must update the Student
Organization Database giving you the “Edit Website” permission.
*In these tutorials, the orange paths listed under the section titles provide initial steps you must follow.
Non-compliance with these guidelines will result in termination of the account and in the case of
suspected violations of the University web guidelines, such abuses will be reported to the Director of the
University Centers for appropriate action.
Web space may not be used for commercial promotions, external endeavors, or political lobbying.
Web space may not act as a storage area for personal or files unrelated to the mission statement.
Web space may only be given to recognized student organizations.
If a student organization is no longer recognized, the web space will be deactivated.
Web pages must meet all other conditions of acceptable use for computing facilities included in the
UWSP Web Standards and Guidelines.
Web pages are expected to respect copyright laws and intellectual property policies.
Each organization is eligible for one account. It is the responsibility of the owner organization to ensure
that only authorized individuals may edit the site. Access is controlled through the Student Organization
Database in the “Edit Website” column.
Add a Web Part
Site Actions > Edit Page > Add a Web Part
1. Filter through Categories and Web Parts to
find what you are looking for. A description
will be provided for each one.
2. Click Add.
3. Save the page when you are finished.
Editing a Web Part
Site Actions > Edit Page > Hover over arrow > Edit Web Part
1. Hover your cursor over the title of the Web Part. Click the arrow.
2. Click Edit Web Part.
3. A menu will appear on the right (see image on right)
In this menu you can make many changes to a Web Part.
Title and Border
1. Click to open the Appearance tab.
2. You may change the Title text.
3. Do not adjust the Height and Width, as this usually creates
annoying scrollbars within the Web Part.
4. To remove the title and border, you can change the Chrome Type
to None. You may also select the other types.
Change Position of Web Part
1. In the Web Part menu, open the Layout tab.
2. To move the part to a different section on the page, you can
change the Zone accordingly.
3. To move a part up or down within the same zone, increase or decrease the Zone Index number.
For example, if you add a part to the Top zone, but want it to be below an existing part, change
the index from 0 to 2. The parts zone index start at 0 and increase as you scroll down the page.
Create a New Page
Site Actions > View All Site Content > Create > Page filter > Publishing Page > Create
Enter the page title in the following format: UWSP | Your Site Name - Page Name
Name your page file using hyphens for spaces between multiple words: page-name.aspx
Select a Page Layout: Left, Right, or Stacked column
Editing Site Navigation
Site Actions > View All Site Content > Lists > Site Navigation
Add a New Item
 In the List Tools ribbon select the Items tab, click New Item
 Select the green plus sign
Enter your information as you want it to appear. Use the
picture to the left to decide what link type you want.
Click Change Item Order in Items tab to change the order
of the navigation items.
Existing Pages
Site Actions > View All Site Content > Document Libraries > Pages
To open a page in your browser, click on the name.
Change a Name or Delete a Page
Hover over a page in the list and click on the arrow. A dropdown
menu will appear, and from there you can Edit Properties or Delete.
You can also use your Site Navigation while on a page to find other
pages, and from there go to Site Actions > Edit Page.
Upload Images
Site Actions > View All Site Content > Document Libraries > Images
1. Find the green plus sign and click Add new item.
2. A window will pop up – click Browse to locate the image on your computer. Click OK.
3. You have the option of adding properties to the image, but it is not necessary. Click Save.
Insert Images
Site Actions > Edit Page > Click inside a Web Part
1. In the orange Editing Tools ribbon,
click the Insert tab.
2. Click on the Picture arrow. If you
already uploaded an image, select
From SharePoint. Otherwise you
can choose From Computer to
upload and insert an image at the
same time.
Adjust Image Appearance
Site Actions > Edit Page > Click on an image
1. In the pink Picture Tools ribbon, click the Design tab.
2. Here you have options to:
 Add borders (Image Styles)
 Change position
 Adjust dimensions
 Add space around
Note: Sometimes there are issues when dragging the image corners to adjust the size. Instead use the
Horizontal Size and Vertical Size in the Design tab and enter pixel values.
Resizing Images before Upload
Large image files are not needed on your website, so make sure to adjust them before uploading to
SharePoint. Many campus computers have Photoshop installed, where you can resize many images at
once. If you do not have access to Photoshop, there are many free photo-editing websites online.
Open Adobe Photoshop.
Click File > Scripts > Image Processor.
The Image Processor dialog box will popup.
Select the folder the images are in. Only have
images you wish to resize in this folder.
Choose to save the resized pictures in the same
location, or select a different folder.
Under File Type, leave Save as JPEG checked.
Check Resize to Fit.
Enter a new Width (W) and Height (H).
Click Run. Now all new resized images are
stored in the selected folder.
Select a New Width and Height
 If the images in the folder you want to resize are all different sizes, it’s okay! Photoshop will resize
the images the best it can to values you entered without distorting them.
 Try to maintain the aspect ratio of your photos (keep the width larger than the height if the image
is landscape, vice versa for portrait).
 A good max width for images is about 700px.
Adding a Picture Slideshow
Create a Picture Library
Site Actions > View All Site Content > Create > Library filter > Picture Library > Name > Create
1. Make sure all the images you want in the slideshow are relatively the same width and height for
a smoother transition between different images.
2. Click Upload to add your images to the library (only one a time in SharePoint).
Add the Slideshow to a Page
Site Actions > Edit Page > Add a Web Part
1. In order for the slideshow to work correctly, first add the Picture Library SharePoint Slideshow
Fixer (within Media and Content). This Web Part is hidden and will not show up when people
view the page.
2. Add the Picture Library Slideshow Web Part. Refer to “Editing a Web Part” in this tutorial to
change the title and border appearance.
3. Open the Web Part edit menu.
4. Under Picture Library select the name of the Picture Library you
created and which has the images you want in the slideshow.
5. You can also adjust:
a. Duration to Show Picture – Amount of time each image
displays before changing
b. Library View – Which pictures display in the slideshow
c. Picture Display Mode – Order pictures display
d. Display with – Title and description options
6. Save your page and see if you like the slideshow’s appearance,
otherwise make adjustments.