SPHOL213: Intro to Web Content Management in SharePoint 2013 … · 2014-11-20 · Hands-on Lab Intro to Web Content Management in SharePoint 2013 Microsoft Confidential Page 4 Exercise

2013

SPHOL213: Intro to Web

Content Management in

SharePoint 2013

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 Lab Objectives ........................................................................................................................................................ 2 Technologies .......................................................................................................................................................... 2 Audience ................................................................................................................................................................ 2 Scenario ................................................................................................................................................................. 2 Getting Started ....................................................................................................................................................... 2

Connect to the Lab Environment ....................................................................................................................... 2 Open the Lab Environment ................................................................................................................................ 3

Exercise 1: Create a new layout page and web part page .................................................................................... 4 Task 1 – Create a page layout ........................................................................................................................... 4 Task 2 – Add a Page Image snippet to the new page layout ............................................................................ 6 Adding a Rendition to the Page Image .............................................................................................................. 7 Task 3 – Create a simple page using custom page layout .............................................................................. 11

Exercise 2 – Add Rich Formatted Content to a Page .......................................................................................... 13 Scenario ........................................................................................................................................................... 13 Task 1 – Add Formatted Word content to the page ......................................................................................... 13

Exercise 3 – Insert an Image and Embed a Video ............................................................................................... 15 Scenario ........................................................................................................................................................... 15 Task 1 – Insert an image and pick a rendition ................................................................................................. 16 Task 2 – Embed a video .................................................................................................................................. 19

Exercise 4 – Translate the Page to German ........................................................................................................ 22 Scenario ........................................................................................................................................................... 22 Task 1 – Create the Variation .......................................................................................................................... 22 Task 2 – Translate the Page ............................................................................................................................ 24

Summary .............................................................................................................................................................. 25

Hands-on Lab Intro to Web Content Management in SharePoint 2013


Introduction to Web Content Management in SharePoint 2013

Estimated time to complete this lab: 30 minutes

Lab Objectives

In this lab you will learn about some of the core new concepts for Web Content Management in

SharePoint 2013. You will create a new page layout using the Design Manager and Snippet Gallery.

You will then create a Web Part page using this layout. You will add rich content to the Web Part page, including photos, videos, and pre-formatted text from Microsoft Word. You will then use Translations and Variations feature to machine-translate the page content to another language.

After completing this lab, you will be better able to:

Use the Snippet Gallery, create a new layout page.

Add page content zone, web part zones, and publish the page.

Create a new Web Part page that inherits from the layout page.

Add rich formatted content by copy/paste from Word.

Add an image to the page and explore various rendition options.

Embed a video to the page.

Inspect the Variations hierarchy used by the site.

Publish the Web Part page, and see the page contents automatically in a variation of the site.

Technologies

SharePoint 2013 Web Content Management

SharePoint 2013 Snippet Gallery

Audience

SharePoint Site Administrators and SharePoint IT Professionals

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. 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 adding a simple text label for site title on each page.

Getting Started

Connect to the Lab Environment

If necessary, log on to the SharePoint (SP) virtual machine (VM) as Garth Fort, with the credentials CONTOSO\GarthF, pass@word1.



Close any windows open on the virtual machine.

Open the Lab Environment

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

Username: CONTOSO\GarthF

Password: pass@word1

http://www.contoso.com/sites/SPHOL-WCM/en-US/



Exercise 1: Create a new layout page and web part page

Estimated time to complete this exercise: 10 minutes Page layouts define the look and feel of a set of pages by styling page fields and web part zones within the common elements of a master page. The Design Manager allows you to easily create, upload, and manage page layouts, device channels, and designs. The Snippet Gallery helps you to easily customize page layouts by adding Page Field elements, such

as a Page image, Summary Links, a Byline. Since an originally uploaded image may not be the size or cropping wanted for a page, you can use image rendition to set the image to one of several pre-defined dimensions. In this exercise, you will use the SharePoint 2013 Design Manager to create a new page layout based on SharePoint’s default Article Page. You will then use the Snippet Gallery to add an image field and customize the image field using an image rendition.

Task 1 – Create a page layout

In this task, you will use Design Manager to create a new page layout based on SharePoint’s default

Oslo Master Page and the default Article Page content type.

1. On the SPHOL-WCM home page, from the Settings menu (gear icon in upper right), click Design Manager.



2. To create a new page layout or edit an existing page layout, in the left navigation of the Design Manager page, click 6. Edit Page Layouts.

3. On the Edit Page layouts page, click Create a page layout.

4. Complete the Create a Page Layout dialog as follows:

a. In Name text box, type SimplePageLayout.

b. From the Master Page drop down, click Oslo.

c. From the Content Type drop down, click Article Page.

d. Click OK.



The Create a Page Layout dialog will close and you will see the newly created SimplePageLayout in the list with a Conversion successful Status.

NOTE: It may take a moment to create the page.

Task 2 – Add a Page Image snippet to the new page layout

In this task, you will preview the layout page just created, then use the Snippet Gallery to modify the

Page Image field on the layout page. You will specify a rendition to be used for the Page Image.

1. To open the SimplePageLayout for preview, click SimplePageLayout in the list.

Because you have no content in the page layout, you will only see the framework of the page.

2. To open the Snippet Gallery, click Snippets in upper right corner.



3. On the Design tab, in the Page Fields section, click Page Fields, and then click Page Image.

Adding a Rendition to the Page Image

The Snippet Gallery allows you to apply a pre-defined image rendition size. No rendition property is applied to the Page Image field by default.

4. Right-click edit renditions link under Page Field: Page Image and Open in new tab.

Switch to the newly opened tab, which shows a list of existing Image Renditions.



5. Click Add new item.

6. Fill the New Image Rendition as follows, and Save:

Name: Page Image

Width: 200

Height: 200

7. Back on the list of Image Renditions, you’ll see the newly added item has ID of 5.

We will apply this rendition to the Page Image field in the layout page.

You will now set the image rendition size using the RenditionID property in Snippet Gallery.

1. Switch back to the Snippet Gallery tab.

2. Under Customization – Page Field: Page Image ( RichImageField), click Rendition Properties

to expand.



3. Change RendtionID from -1 to 5.

NOTE: This is will add a Page Image placeholder to the page. Any Page Image added to a page

created using the SimplePageLayout content type will be added as a Page Image.

4. Click Update to apply changes to the HTML Snippet code.

5. To copy the HTML Snippet code, click Copy to clipboard below the snippet code.

6. If Internet Explorer displays a dialog box asking Do you want to allow this web page to access your Clipboard?, click Allow access.

You will now open the SimplePageLayout.html file in the SPHOL-WCM Master Page library and paste the copied code into the file.

1. From the Settings menu, click Site settings.

2. Under Web Designer Galleries, click Master pages and page layouts.



3. On the Library tab, in the Connect & Export group, click Open with Explorer.

NOTE: If Internet Explorer is not maximized, you will see just an icon.

4. If requested for login credentials, enter the following information:

User name: Contoso\garthf


5. In the Master Page catalog listing, right-click SimplePageLayout.HTML file.

NOTE: The Master Page library contains an HTML file version of the layout page and an ASP

.NET Server Page. You will change the HTML file version.

6. In the context menu, click Open with, and then click Notepad.

7. To find the code snippet to change:

a. In Notepad, press CTRL+F to open the Find dialog.

b. In the Find what text box, type Page Field: Page Image.

NOTE: Do NOT copy the text above to paste into the text box. This will overwrite the Snippet code copied to the clipboard.

c. Click Find Next.

d. Click Cancel to close Find dialog.

8. Highlight the entire DIV element:

From the <div> that corresponds with 

to the </div> that corresponds with  :



9. Press DELETE.

10. Press CTRL+V to paste the snippet code copied to the clipboard.

11. From the Notepad File menu, click Save.

12. From the Notepad File menu, click Exit.

Task 3 – Create a simple page using custom page layout

In this task you will create a simple page using the custom page layout that you created in Task 1 and customized in Task 2.

1. Navigate to the HOL demo site:

http://www.contoso.com/sites/SPHOL-WCM/en-us

2. In left navigation, click Site Contents.

3. On the Site Contents page, double-click Pages to open the library.

http://www.contoso.com/sites/SPHOL-WCM/en-us



4. In the Pages library, on the Files tab, click New Document drop-down, and then click Page.

5. In the Create Page window:

a. In the Title text box, type Simple Page.

NOTE: SharePoint will automatically set the URL Name to Simple-Page.

b. From the Page Layout list box, click (Article Page) SimplePageLayout.

c. Click Create.



A Simple-Page document is added to the Pages library.

6. In Pages library, click Simple-Page name to open the newly created Simple-Page.aspx page.

In this exercise, you used Design Manager to create a custom page layout. You then used Snippet Gallery to customize the page image rendition, and finally you created a new page using the SimplePage layout.

Exercise 2 – Add Rich Formatted Content to a Page

Estimated time to complete this exercise: 4 minutes

Scenario

SharePoint 2013 makes adding static content on a SharePoint page easy. You can easily copy formatted text from Word and paste it in a page in SharePoint. The content structure (Heading 1 and 2, the table and the bullets) is preserved, but Word’s formatting when copying and pasting text is not. In this Exercise, you will update the SImplePageLayout page you created in Exercise 1 by pasting formatted text copied from a Word document.

Task 1 – Add Formatted Word content to the page

1. Navigate to the Simple-Page.aspx created in Exercise1.

URL: http://www.contoso.com/sites/SPHOL-WCM/en-us/Pages/Simple-Page.aspx

2. From the Settings menu, click Edit Page.

3. Open Windows Explorer and navigate to C:\HOLContent\SPHOL-WCMIntro folder.

4. Double-click HomePage_UpdatedText.docx file to open in Word.

5. Press CTRL+A to select all contents, and then press CTRL+C to copy the text.

6. Minimize Word and minimize Windows Explorer.

7. If the cursor is not already in the Page Content area, in the Page Content area, click the Click here to add new content link.



13. Press CTRL+V to paste the copied text.

14. If Internet Explorer displays a dialog box asking Do you want to allow this web page to access your Clipboard?, click Allow access.

The text is pasted in and Word styles are aligned with SharePoint default styles.

15. Click the (Ctrl) context menu that pops up at the bottom of the pasted text.

16. Click Paste Clean, which is the default paste option.

NOTE: You can click through the other two Paste options to see what they do. Make sure you click Paste Clean (C) before moving to the next step.



17. On the Format Text tab, in the Markup group, click Edit Source.

18. Note the clean HTML markup, and the inheritance of SharePoint’s formatting.

19. Click Cancel in lower right corner to close the HTML Source window.

In this exercise, you copied formatted text from Word and pasted it into a web part page in SharePoint 2013. You then viewed the clean HTML markup used in the page.

Exercise 3 – Insert an Image and Embed a Video


Scenario

Image renditions let you display different sized versions of an image on different pages. When you

create an image rendition, you specify the width and height for all images that use that image rendition. For example, if the site has a news article page layout that contains an image field, you can create an image rendition named Article_image to display the full-sized image in the article page. A second image rendition named Thumbnail_small can be used to display a smaller version of the image associated with a particular article when the image is displayed in a Web Part that lists all recent news articles on the site home page. SharePoint 2013 has made it easier to embed videos into pages, by taking advantage of the code that

video providers offer up to embed their videos on your pages. In this Exercise, you will add an image to a custom page and set renditions. You will then use Embed Code to embed a video on the page.



Task 1 – Insert an image and pick a rendition

In this task you will insert an image on the page and set an image rendition.

1. If not already open, open the custom Simple Page created in Exercise 1:

http://www.contoso.com/sites/SPHOL-WCM/en-us/Pages/Simple-Page.aspx

2. If asked for credentials, enter the information:

Username: contoso\GarthF


3. If the Simple Page is not already in edit mode, from the Settings menu, click Edit Page.

4. In the Page Image field on the page, click the Click here to insert a picture from SharePoint link.




5. In the Edit Image Properties window, click Browse beside the Selected Image.

6. In the Select an Asset window, click Site Collection Images.

7. Click Home.jpg, and then click Insert.



8. Notice that because we forced the image rendition in the SimplePageLayout master page, the Image Rendition field is unavailable for changing at this time.

20. Click OK to add the image to the page.



Your page will now look like this:

Task 2 – Embed a video

In this task, you will use the Embed Code feature to embed video on the custom page.

1. In a new tab, navigate to the following video on TechNet:

http://www.microsoft.com/resources/technet/en-us/office/media/video/video.html?cid=stc&from=mscomstc&VideoID=7923b059-abb9-430d-85d9-3abd86a7b40c



2. To view the embed code, on the video page, click Share.

3. On the video’s Share window, highlight the code in the Embed text box, and then press CTRL+C to copy the code to the clipboard.

4. Navigate to the Simple Page:




5. Click at end of page after the The Contoso Product Stack table.

6. To embed the video code:

a. On the Insert tab, in the Embed section, click Embed Code.

b. Click in the text box and press CTRL+V to paste the embed code in the text box.

c. Note the video preview in the window.

d. Click Insert to add the video to the page.

NOTE: You can use the following code if not navigating to that site, to save the time.

<iframe width="432" height="243" frameborder="0" marginwidth="0" marginheight='0' scrolling="no" src="http://hub.video.msn.com/embed/7923b059-abb9-430d-85d9-3abd86a7b40c/?vars=bWt0PWVuLXVzJmJyYW5kPXY1JTVlODAweDQ1MCZsaW5rb3



ZlcnJpZGUyPWh0dHAlM2ElMmYlMmZ3d3cubWljcm9zb2Z0LmNvbSUyZnJlc291cmNlcyUyZnRlY2huZXQlMmZlbi11cyUyZm9mZmljZSUyZm1lZGlhJTJmdmlkZW8lMmZ2aWRlby5odG1sJTNmdmlkZW9pZCUzZCU3YjAlN2QmbGlua2JhY2s9aHR0cCUzYSUyZiUyZnd3dy5taWNyb3NvZnQuY29tJTJmcmVzb3VyY2VzJTJmdGVjaG5ldCUyZmVuLXVzJTJmb2ZmaWNlJTJmbWVkaWElMmZ2aWRlbyUyZnZpZGVvLmh0bWwmY29uZmlnQ3NpZD1NU05WaWRlbyZjb25maWdOYW1lPXN5bmRpY2F0aW9ucGxheWVyJnN5bmRpY2F0aW9uPXRhZyZwbGF5ZXIuZnI9c2hhcmVlbWJlZC1zeW5kaWNhdGlvbg%3d%3d"> <A href="http://www.microsoft.com/resources/technet/en-us/office/media/video/video.html?videoid=7923b059-abb9-430d-85d9-3abd86a7b40c&src=v5:embed:syndication:&from=shareembed-syndication" target="_new" title="SharePoint 2013 Web Content Management walkthrough">Video: SharePoint 2013 Web Content Management walkthrough</A> </iframe>

7. To save the page, on the Page tab, in the Edit group, click Save.

8. Navigate to the bottom of the page and click play to view the video.

In this exercise, you added an image to a custom page that had a rendition preset using code snippets in Exercise 1. You then copied embedded code in a Microsoft Technet video and used the SharePoint 2013 Embed Code feature to add the code to the web page.

Exercise 4 – Translate the Page to German


Scenario

The variations feature in Microsoft SharePoint makes content available to specific audiences on different sites by copying content from a source variation site to each target variation site. If necessary, the content can then be customized in the target variation site. The Machine Translation Service in SharePoint Server 2013 lets users automatically translate documents. You can create a Machine Translation service application and configure the Machine Translation Service by using Central Administration, or Windows PowerShell. While Variations were available in SharePoint 2010, in SharePoint 2013 coupled with Machine Translation, it is easier than ever to create multi-language sites and pages. In this exercise you will create a variation of your Simple Page in the German site, you will then translate the variation to German.

Task 1 – Create the Variation

In this task, you will learn to create a new target for your custom page. You will then update the variation to place your custom Simple Page in the German site.

1. If not already open, navigate to your custom Simple-Page.aspx.

URL: http://www.contoso.com/sites/SPHOL-WCM/en-us/pages/simple-page.aspx



2. If asked for credentials, enter the following information:

Username: contoso\GarthF


3. From Settings menu, click Edit page.

NOTE: In order to create a variation, you must check out the page first.

4. On Page tab, in Edit group, click Check Out.

5. On Page tab, in Edit group, click Save.

6. On the Publish tab, click Create new target.

7. In Create Variation, click the check box beside de-de, and then click Continue.

A page will display indicating your variation is on the way.

8. Click OK to close the page.

9. On the Simple Page, in the yellow ribbon, click Check it in.

10. In the Check In dialog, click Continue.

Once the page is checked in, you can navigate to the German site and view the variation.

11. Navigate to the German site:

http://www.contoso.com/sites/SPHOL-WCM/de-de

12. In left navigation, click Websiteinhalte.

13. In Site Contents (Websiteinhalte), double-click Seiten (Pages) to open the library.

http://www.contoso.com/sites/SPHOL-WCM/de-de



14. Note the Simple-Page.

Task 2 – Translate the Page

In this task, you will use machine translation to translate the variation copied to the German subsite into German language.

1. In the Seiten library on the German subsite, select the Simple-Page variation.

NOTE: Do NOT open the page, but select it instead.

2. On the Varianten tab, in the Übersetzung group, click Maschinelle Übersetzung, and then click Nur ausgewähite Elemente.

,

3. When the Maschinelle Übersetzungsanforderung Senden dialog displays, click OK.

Translation: This can take several minutes. You can check your order by clicking Translation status on the Variations tab. Übersetzungsstatus on the German site.

4. In the Varianten tab, in the Übersetzung group, click Übersetzungsstatus to view the status

of the translation.



5. When translation is complete, check in the translated page to view the results.

In this exercise, you created a variation of your custom page in the Pages library of the German language website. You then used machine language to translate the page to German.

Summary

In this lab, you learned to use the new Design Manager to create a new page layout. You then used

Snippet Gallery to customize the new layout page, then created a web part page, embedded a video,

and added rich formatted content. You then added an image and worked with renditions. Finally, you

inspected variations and translated the page to German

Specifically, you learned how to:

Use the Snippet Gallery, create a new layout page.

Add page content zone, web part zones, and publish the page.

Create a new Web Part page that inherits from the layout page.

Add rich formatted content by copy/paste from Word.

Add an image to the page and explore various rendition options.

Embed a video to the page.

Inspect the Variations hierarchy used by the site.

Publish the Web Part page, and see the page contents automatically translated in a variation of the site.

Documents

SPHOL213: Intro to Web Content Management in SharePoint 2013 … · 2014-11-20 · Hands-on Lab Intro to Web Content Management in SharePoint 2013 Microsoft Confidential Page 4 Exercise