Intro To Web Content Management in SharePoint 2013

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.

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
Microsoft Confidential Page 1

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

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.

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

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:

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

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

ZlcnJpZGUyPWh0dHAlM2ElMmYlMmZ3d3cubWljcm9zb2Z0LmNvbSUyZnJlc291cmNlc
yUyZnRlY2huZXQlMmZlbi11cyUyZm9mZmljZSUyZm1lZGlhJTJmdmlkZW8lMmZ2aWRl
by5odG1sJTNmdmlkZW9pZCUzZCU3YjAlN2QmbGlua2JhY2s9aHR0cCUzYSUyZiUyZn
d3dy5taWNyb3NvZnQuY29tJTJmcmVzb3VyY2VzJTJmdGVjaG5ldCUyZmVuLXVzJTJm
b2ZmaWNlJTJmbWVkaWElMmZ2aWRlbyUyZnZpZGVvLmh0bWwmY29uZmlnQ3NpZD
1NU05WaWRlbyZjb25maWdOYW1lPXN5bmRpY2F0aW9ucGxheWVyJnN5bmRpY2F0
aW9uPXRhZyZwbGF5ZXIuZnI9c2hhcmVlbWJlZC1zeW5kaWNhdGlvbg%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.

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.

Intro To Web Content Management in SharePoint 2013

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Intro To Web Content Management in SharePoint 2013

Transféré par

Droits d'auteur :

Formats disponibles

2013

SPHOL213: Intro to Web

© 2012 Microsoft. All rights reserved.

Microsoft Confidential Page 1

Introduction to Web Content Management in SharePoint 2013

Microsoft Confidential Page 2

Close any windows open on the virtual machine.

Open the Lab Environment

Microsoft Confidential Page 3

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

Task 1 – Create a page layout

Microsoft Confidential Page 4

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

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

Microsoft Confidential Page 5

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

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

Microsoft Confidential Page 6

Adding a Rendition to the Page Image

Microsoft Confidential Page 7

5. Click Add new item.

Microsoft Confidential Page 8

3. Change RendtionID from -1 to 5.

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

Microsoft Confidential Page 9

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

Microsoft Confidential Page 10

Task 3 – Create a simple page using custom page layout

1. Navigate to the HOL demo site:

Microsoft Confidential Page 11

5. In the Create Page window:

Microsoft Confidential Page 12

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

Exercise 2 – Add Rich Formatted Content to a Page

Task 1 – Add Formatted Word content to the page

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

Microsoft Confidential Page 13

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

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

Microsoft Confidential Page 14

Exercise 3 – Insert an Image and Embed a Video

Microsoft Confidential Page 15

Task 1 – Insert an image and pick a rendition

Microsoft Confidential Page 16

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

Microsoft Confidential Page 17

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

Microsoft Confidential Page 18

Your page will now look like this:

Task 2 – Embed a video

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

Microsoft Confidential Page 19

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

4. Navigate to the Simple Page:

Microsoft Confidential Page 20

6. To embed the video code:

<iframe width="432" height="243" frameborder="0" marginwidth="0" marginheight='0'

Microsoft Confidential Page 21

Exercise 4 – Translate the Page to German

Task 1 – Create the Variation

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

Microsoft Confidential Page 22

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