SharePoint Workshop Tutorials Contact Information: James J. Jansen SIEO Web Manager sieowww@uwsp.edu 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. Policies 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. 1 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. 2 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 OR 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. 3 Images 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. 4 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. 1. 2. 3. 4. 5. 6. 7. 8. 9. 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. 5 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. 6