SPHOL326: Designing a SharePoint 2013 Site. Hands-On Lab. Lab Manual

Transcription

1 2013 SPHOL326: Designing a SharePoint 2013 Site Hands-On Lab Lab Manual

2 This document is provided as-is. Information and views expressed in this document, including URL and other Internet Web site references, may change without notice. You bear the risk of using it. This document does not provide you with any legal rights to any intellectual property in any Microsoft product. You may copy and use this document for your internal, reference purposes Microsoft. All rights reserved.

3 Contents DESIGNING A SHAREPOINT 2013 SITE... 2 Lab Objectives... 2 Technologies... 2 Audience... 2 Scenario... 2 Getting Started... 4 Connect to the Lab Environment... 4 Open the Lab Environment... 4 Exercise 1 Import a Custom Site Design... 5 Scenario... 5 Task 1 Convert an HTML file to a SharePoint master page... 5 Exercise 2 Customize a Site Design... 9 Scenario... 9 Task 1 Create and apply a custom HTML snippet... 9 Task 2 Apply a custom site design Exercise 3 Implement a Mobile Channel Scenario Task 1 Create a mobile channel Task 2 Apply design and show a mobile channel Summary Microsoft Confidential Page 1

4 Designing a SharePoint 2013 site Estimated time to complete this lab: 30 minutes Lab Objectives This lab is a detailed tour of the SharePoint 2013 Design Manager. You will start with converting a custom site design to a master page. You will then customize the site design by creating and applying an HTML code snippet. Finally, you will create a mobile channel and then apply a custom template to the mobile channel. After completing this lab, you will be better able to: Convert a custom site design to a master page Convert and apply an imported site design Customize a site design using Snippet Gallery Apply a customized site design Implement and design a mobile channel Technologies Audience Scenario SharePoint 2013 Design Manager SharePoint 2013 Snippet Gallery Device Channels SharePoint Site Administrators and SharePoint IT Professionals In SharePoint 2010, web site designers typically start from a site design from a sketch, and then often create the HTML and CSS content in an external design application such as Dream Weaver. However, to use the designs in SharePoint, the designers have to use SharePoint Designer to create master pages, integrate with the ribbon, create navigation providers, custom channels, etc. This lab will teach you to use the SharePoint 2013 Design Manager to convert and apply a precreated HTML site design. You will also use the Snippet Gallery to customize the design, and then apply custom branding to enhance the site s functionality. You will start off with an existing SharePoint 2013 publishing site with some sample content and default styling. Microsoft Confidential Page 2

5 The home page of the site at the beginning of the lab looks like this: Microsoft Confidential Page 3

6 Later in the lab, the branded home page will look like this: Getting Started Connect to the Lab Environment Log on to the SharePoint (SP) virtual machine (VM) as Garth Fort, with the credentials CONTOSO\GarthF, Open the Lab Environment To begin the lab, open Internet Explorer, navigate to the demo home page at and log into SharePoint as Garth Fort with the following credentials: Username: CONTOSO\GarthF Password: Microsoft Confidential Page 4

7 Exercise 1 Import a Custom Site Design Estimated time to complete this exercise: 6 minutes Scenario The Design Manager in SharePoint 2013 allows web site designers and developers to use whatever tools they want to create HTML and CSS designs, and then upload the files to SharePoint, which will automatically convert the HTML and implement ribbons, placeholders, and custom minimal masters. In this exercise, you will use the SharePoint 2013 Design Manager to convert an HTML file to a Master Page. NOTE: The HTML design files are already uploaded to SharePoint. Uploading HTML files is as easy as mapping a network drive to the SharePoint site collection and using Windows Explorer to copy and paste the files into the master page library. Task 1 Convert an HTML file to a SharePoint master page In this task, you will use Design Manager to convert an HTML design template to a master page. 1. Navigate to the intranet Knowledge Center site collection: Microsoft Confidential Page 5

8 You will now open a copy of the home page in another tab. You will leave this original tab untouched to later compare it against the newly designed page. 2. To open another copy of the home page, right click the SharePoint icon, and then click Open link in new tab. 3. Click Settings (gear icon in upper right), and then click Site settings. 4. Under Web Designer Galleries, click Master pages and page layouts. 5. In the Master Page Gallery, click the Contoso folder.. 6. Note the folder contents. These files, created in an external HTML design application, were uploaded previously for use in this lab. The file, ContosoElectronics.html, will be converted to a SharePoint master page in later steps. 7. In the Master Page Gallery ribbon bar, click the Library tab and then click Open with Explorer. Note: If the SharePoint window is not maximized, you may only see the icon and not see the Open with Explorer label. 8. If prompted for credentials, use the following information: Microsoft Confidential Page 6

9 User name: contoso\garthf Password: 9. Minimize the Windows Explorer window. You will come here later to make changes to the files. 10. Click Settings (gear icon), and then click Design Manager. 11. In the left navigation of the Design Manager, click 4. Edit Master Pages. 12. In the Edit Master Pages, click Convert an HTML File to a SharePoint master page. 13. In the Select An Asset window, click the folder Contoso. Microsoft Confidential Page 7

10 14. Click ContosoElectronics.html file and then at the bottom of the window, click Insert. 15. Wait for a few seconds. When the page refreshes, you will see a new listing for ContosoElectronics, with a status of Conversion successful. Note: The second item on the list, ContosoElectronics-Finished, was imported and converted previously and is ready for use later as a custom master page already. Similarly, mchannel was also imported and converted previously, and is ready for use later as a master page for mobile channels. 16. Click on the status label Conversion successful next to ContosoElectronics. Microsoft Confidential Page 8

11 This shows a preview of the newly converted master page against the site s default page. 17. Click on the search box control on the top-right corner. Note that the search box is not functional, and is simply an image placeholder for now. In the next exercise, we will replace the search box placeholder with an actual, functioning, search box control. In this exercise, you used Design Manager to convert an existing design HTML file to a Master Page. This master page is now ready to be enhanced with SharePoint specific code snippets and published. Exercise 2 Customize a Site Design Estimated time to complete this exercise: 10 minutes Scenario SharePoint master pages and layout pages are ASPX files; however these files cannot be edited or modified in any way for design purposes. Every master page or layout page has a corresponding HTML file, which can be modified. The HTML file is named exactly the same as the ASPX file, except for the file extension. Designers can use the Snippet Gallery to easily generate SharePoint code snippets to insert into pages to integrate navigation, catalog, search web parts, channel panels, and special channel settings. You can use the Snippet Gallery to create code for many dynamic and static elements such as web parts, administration panels and custom ASP.NET markup. In this task, we ll focus on replacing the search placeholder image with an actual SharePoint search box control on the master page. Task 1 Create and apply a custom HTML snippet In this task, you will work on the master page you converted in Exercise 1. You will use SharePoint s new Snippet Gallery to generate code for a missing element in the site design. In the master page Microsoft Confidential Page 9

12 preview page, we noted that the original design was using an image placeholder for search box. We ll use the Snippet Gallery to generate code for an actual search box and replace the image with the code. 1. Ensure that your browser window has the ContosoElectronics master page preview open. 2. To open the Snippet Gallery, click Snippets in the black strip in the upper right corner of the Change Preview Page. 3. On the Snippet Gallery page, on the Design tab, in the Navigation group, click Search Box. 4. Read the text in About this Component section on the right side of the page. The various grey colored buttons below this text are expandable forms which allow you to modify the markup of the search box web part snippet. For example, we want to set a web part width of 300 pixels to the search box. This can be achieved by specifying a size attribute using this form. 5. Click Size to expand the form. 6. In the Width text box, type 300px. Microsoft Confidential Page 10

13 7. Click Update. The new code snippet is added the HTML Snippet box. 8. Under HTML Snippet, click Copy to Clipboard. 9. Click Allow Access to clipboard, if prompted by the browser security. 10. Switch to the Windows Explorer window that you opened earlier, which contains the ContosoElectronics.html file and other related assets. 11. Right-click the file ContosoElectronics.html, point at Open with, and then click Notepad. 12. In Notepad, press CTRL+F to open the Find dialog. 13. In the Find what text box, type SearchBoxWrapper, and then click Find Next. NOTE: Do not copy the SearchBoxWrapper text to paste into the Find what text box. This will overwrite the code snippet you copied to the clipboard. 14. Click Cancel to close the Find dialog box. Microsoft Confidential Page 11

14 15. Highlight the line of HTML code immediately below <div id= SearchBoxWrapper>. 16. Press CTRL+V to paste the code snippet that was copied to clipboard earlier and overwrite the existing code for <img> tag. Ensure that your newly inserted code snippet is wrapped by a <div> tag. 17. Press CTRL+S to save the file. 18. From File menu, click Exit to close Notepad. 19. Minimize Windows Explorer to return to the browser. 20. Click the Preview: ContosoElectronics.html browser tab. 21. Press the browser Refresh to refresh the page. 22. Click on the search box control on the top-right corner. Note that this is a functioning SharePoint search box control, not just an image placeholder anymore. You can continue building out various components of the master page by leveraging code generated by the Snippet Generator tool and copying it to the HTML design file. This is an iterative process, and the master page preview mode helps you assess your progress as you build it out. Microsoft Confidential Page 12

15 For the sake of time, we have already placed another master page file in the master page gallery that has a completed design. In the next task you ll publish the completed master page file and apply it on the site. Task 2 Apply a custom site design In Task 1, you converted a custom HTML file so it is connected to SharePoint. In this task, you will use Design Manager to publish and apply the design. 1. Navigate to the SPHOL-Design home page: URL: 2. From Settings (gear icon), click Design Manager. 3. In the left navigation of Design Manager, click 7. Publish and Apply Design. 4. On the Publish and Apply Design page, click Assign master pages to your site based on device channel. 5. In the Site Master Page Settings, click Specify a master page to be used by this site and all sites that inherit from it. 6. Next to Default device channel, click Contoso/ContosoElectronics-Finished from the drop down. 7. Click OK. 8. In a new tab, navigate to the Knowledge Center home page 9. Compare the new page with the original you saved earlier, and notice the new design. NOTE: If one of the Content Search web parts displays a Sorry something went wrong error message, press CTRL+F5 to refresh the page. Microsoft Confidential Page 13

16 New Page Original Page In this exercise, you were introduced to the Snippet Gallery. You used the Snippet Gallery to create a custom HTML markup for a site title. You then manually exported the HTML code snippet into the HTML file, and were able to immediately review the page changes. Exercise 3 Implement a Mobile Channel Estimated time to complete this exercise: 8 minutes Scenario Channels are pathways that direct traffic from different devices to specific versions of your website. Whenever a web browser requests to display a SharePoint 2013 page, SharePoint first detects the Microsoft Confidential Page 14

17 browser s identification, also known as user agent string. This user agent string value is used by SharePoint to determine the proper channel. SharePoint site designers can define one or more channels for a site collection, each channel targeting specific user agents. Each channel can also be assigned a distinct master page to customize the end user experience depending on the browser or device used. In this exercise, you will use the Design Manager to create a new Device Channel to target mobile devices. A mobile-friendly master page has already been created and published in the site. You will also learn how to assign a custom master page to a device channel. Task 1 Create a mobile channel In this task, you will learn to use Design Manager to create and configure a Mobile Channel. 1. If not already on the SPHOL-Design home page, navigate to 2. Click Settings (gear icon), and then click Design Manager. 3. In the left navigation of the Design Manager, click 2. Manage Device Channels. 4. On the Manage Device Channels page, click Create a channel. 5. Enter the following settings in the Device Channels - New Item window: Name Mobile Alias MobileChannel Device Inclusion Rules Windows phone os iphone X64 NOTE: Adding X64 to the Device Inclusion Rules will allow you to view the channel design in Internet Explorer 64-bit. Note: The browser user agent string value (partial or entire value) goes in the Device Inclusion Rules field. 6. Check the Active check box, and then click Save. Microsoft Confidential Page 15

18 7. To sort the channels: a. On the Design Manager: Manage Device Channels page, click Edit or reorder existing channels. b. On the Items tab, in the Manage group, click Reorder Channels. Microsoft Confidential Page 16

19 c. In the Device Channel Reordering window, if Mobile is not at the top, select Mobile and click Move Up. d. Click OK to accept changes and close window. Task 2 Apply design and show a mobile channel In this task, you will use Device Manager to apply a new skin to your mobile channel and view it in the Internet Explorer 64-bit. 1. Navigate to the SPHOL-Design home page (open a new tab if necessary) 2. From the Settings menu, click Design Manager. 3. In the left navigation of Design Manager, select 7. Publish and Apply Design. 4. On the Publish and Apply Design page, click Assign master pages to your site based on device channel. 5. In the Site Master Page Settings, click Specify a master page to be used by this site and all sites that inherit from it radio button. 6. Next to your newly created Mobile device channel, from the drop-down, click the ContosoMobile/mchannel. 7. Click OK. 8. On the Windows Start menu, click All Programs. Microsoft Confidential Page 17

20 9. In the list of programs, click Internet Explorer (64-bit). 10. Navigate to the Knowledge Center site URL: Enter the following if prompted for credentials: User name: contoso\garthf Password: Microsoft Confidential Page 18

21 12. Note the site is displayed in Internet Explorer (64-bit) using the mobile master page. 13. Click + beside Products to expand the category. 14. Click Audio to display audio related assets. 15. Click + beside Research to expand the category. 16. Click Business technology to view related assets. 17. For comparison purposes, use Internet Explorer browser to navigate to the same page, Note the distinctly different user experience of the same page on these two browsers. Microsoft Confidential Page 19

22 In this exercise, you used Design Manager to create a new device channel to target mobile devices. You then assigned a custom master page to the mobile device channel and viewed the results in Internet Explorer (64-bit). Summary In this lab, you learned to use the new Design Manager to design and create new web sites more quickly and easily than ever before. Specifically, you learned how to: Import a custom site design into SharePoint Convert a custom site design to a master page Convert and apply an imported site design Customize a site design using Snippet Gallery Apply a customized site design Implement a mobile channel View a mobile channel in Internet Explorer (64-bit) Microsoft Confidential Page 20