SPHOL326: Designing a SharePoint 2013 Site Hands-On Lab

2013

SPHOL326: Designing a

SharePoint 2013 Site

Hands-On Lab

Lab Manual

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.

© 2012 Microsoft. All rights reserved.

Microsoft Confidential Page 1

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 ............................................................................................................... 13

Exercise 3 – Implement a Mobile Channel ........................................................................................................... 14 Scenario ........................................................................................................................................................... 14 Task 1 – Create a mobile channel ................................................................................................................... 15 Task 2 – Apply design and show a mobile channel ......................................................................................... 17

Summary .............................................................................................................................................................. 20

Hands-on Lab Designing a SharePoint 2013 Site


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

SharePoint 2013 Design Manager

SharePoint 2013 Snippet Gallery

Device Channels

Audience

SharePoint Site Administrators and SharePoint IT Professionals

Scenario

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 pre-created 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.



The home page of the site at the beginning of the lab looks like this:



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, pass@word1.

Open the Lab Environment

To begin the lab, open Internet Explorer, navigate to the demo home page at http://www.contoso.com/sites/SPHOL-Design, and log into SharePoint as Garth Fort with the following credentials:

Username: CONTOSO\GarthF

Password: pass@word1

http://www.contoso.com/sites/SPHOL-Design



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:


http://www.contoso.com/sites/SPHOL-Design/



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:



User name: contoso\Garthf


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.



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.



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


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



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.



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.



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.



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: http://www.contoso.com/sites/SPHOL-Design

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 http://www.contoso.com/sites/SPHOL-Design

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.


http://www.contoso.com/sites/HOL013



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


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



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 http://www.contoso.com/sites/SPHOL-Design/.

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.

http://www.contoso.com/sites/SPHOL-Design/



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.



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.



9. In the list of programs, click Internet Explorer (64-bit).

10. Navigate to the Knowledge Center site URL: http://www.contoso.com/sites/SPHOL-Design.

11. Enter the following if prompted for credentials:

User name: contoso\garthf





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, http://www.contoso.com/sites/SPHOL-Design.

Note the distinctly different user experience of the same page on these two browsers.




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)

SPHOL326: Designing a SharePoint 2013 Site Hands-On Lab

Documents

Transcript of SPHOL326: Designing a SharePoint 2013 Site Hands-On Lab