Embed Size (px)
Citation preview
Hands-On LabSharePoint 2010:Branding a SharePoint Site from an Existing DesignLab version: 1.0.0
Last updated: 5/23/2023
Virtual Machine Logon Details:
UserName: Administrator, Password: pass@word1
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.
© 2011 Microsoft. All rights reserved.
CONTENTS
OVERVIEW................................................................................................................................................. 3
EXERCISE 1: CREATING THE SITE AND SITE COLLECTION................................................................5Task 1 – Remove Web Site...................................................................................................................5
Task 3 - Creating sub-sites for navigation............................................................................................8
EXERCISE 2: CREATING A MASTER PAGE..........................................................................................14Task 1 - Creating the Master Page.....................................................................................................14
EXERCISE 3: CREATING A CUSTOM CONTENT TYPE AND PAGE LAYOUT....................................29Task 1 - Creating the Page Layout for the Blue Yonder Home Page...................................................29
LAB SUMMARY........................................................................................................................................ 38
Overview
This lab will walk you through layering an internet-based web design on top of a SharePoint 2010 Publishing Site.
3
Figure 1The Blue Yonder Airlines Web Site Design
Blue Yonder Airlines is a typical modern airline. It of course needs a strong web presence. At this point a Web-savvy designer has been hired that produced a design as a vector drawing. An HTML/CSS specialist has decomposed that design into HTML, images, and CSS.
Your job in this lab will be to take these component parts and use them to recreate the design in SharePoint 2010.
Estimated time to complete this lab: 60 minutes.
Materials
This Hands-On Lab contains resources in the following folder.
Lab Resources : c:\mslabs\SharePoint2010\WCM\05_Branding\Resources
4
Exercise 1: Creating the Site and Site Collection
In this exercise, you will be creating the SharePoint site that will have the Blue Yonder branding elements applied to it. This lab is designed for a new SharePoint site using a publishing portal template. If you have been following these labs you will need to remove the site installed at http:// demo2010a:8080/. Follow the instructions in Task 1 to learn how to remove it. Task 2 reminds you about the details needed to create a new site. When you are ready, Task 3 deals with creating sub sites.
If you do not wish to remove the site then some of the screenshots in this lab may not match your site.
Task 1 – Remove Web Site
1. Open the SharePoint 2010 Central Administration web site by going to Start | All Programs | Microsoft SharePoint 2010 Product | SharePoint 2010 Central Administration.
Note: Select Yes if a User Account Control (UAC) dialog appears asking if you would like to give this program permissions.
2. Once the SharePoint 2010 Central Administration page is open, click on the Manage web applications hyperlink under the Application Management section. See Figure 2.
5
Figure 2Manage web applications link
3. On the Web Applications Management page you should see a site named BlueYonderAirlines, select it and the click the Delete button in the ribbon. See Figure 3.
6
Figure 3Insert Caption
4. On the Delete Web Application dialog click the radio button next to Yes for both options, and click Delete. See Figure 4.
7
Figure 4Delete Web Application Dialog
Task 2 – Create Web SiteClick the New button in the ribbon to create a new publishing portal site, following the steps like you did in Lab 01 WCM Basics - Exercise 1, with the following information:
New IIS Site Name: BlueYonderAirlines Port: 8080 Site Collection Name: Blue Yonder Airlines Site Template: Publishing Portal Primary User: Administrator
Task 3 - Creating sub-sites for navigation
Notice the built-in navigation in the upper-left portion of the screen that SharePoint adds to any new Publishing Portal site. See Figure 5.
Figure 5SharePoint default navigation
8
Note: The SharePoint Global Navigation (which is shown in Figure 5) uses sub-sites as the main navigation (menu) source. To add additional menu items to this navigation you will have to create additional sub-sites.
1. Click on the Site Actions menu and select New Site. See Figure 6.
Figure 6New Site command
2. In the Create dialog, ensure that Publishing Site with Workflow is selected and enter Booking as both the name and URL name for the site. Click Create. See Figure 7.
9
Figure 7Creating a new sub-site manually
3. You should now see the created sub-site. See Figure 8.
Figure 8New sub-site
4. Now you will create the rest of the sub-sites for navigation automatically using PowerShell.
10
5. With Windows Explorer, navigate to the c:\mslabs\SharePoint2010\WCM\05_Branding\Resources\Scripts folder.
6. Right-click on the createsubsites.ps1 file and select Edit.
7. The script should open in the Windows PowerShell ISE as in Figure 9.
Figure 9PowerShell script for creating sub-sites
PowerShell
param( [string] $url, [Array] $sites )foreach($s in $sites){New-SPWeb –URL ($url + $s) –Template BLANKINTERNET#1 -Name $s }
8. This script takes two parameters; $url is the URL of the site you want to add sub-sites to.$sites is an array of sub-site names to create.
9. To run this script, you will need to import the SharePoint PowerShell modules. The easiest way to do this is to right click the PowerShell icon in the task bar and click Import system modules from the menu. See Figure 10.
11
Figure 10Running PowerShell importing system modules
10. In the PowerShell window, change into the C:\mslabs\SharePoint2010\WCM\05_Branding\Resources\Scripts folder.
11. Run the createsubsites.ps1 script in PowerShell, passing in http://demo2010a:8080/ as the URL parameter, and Promotions,About as the sub-site parameter. See Figure 11.
Figure 11Running the PowerShell script to create sub-sites
PowerShell
.\createsubsites.ps1 http://demo2010a:8080/ Promotions,About
12. Go back to Internet Explorer and refresh the page. You should see new navigation options. See Figure 12.
12
Figure 12New sub-site navigation
13
Exercise 2: Creating a Master Page
Task 1 - Creating the Master Page
1. Using Windows Explorer navigate to c:\mslabs\SharePoint2010\WCM\05_Branding\Resources.
2. Double-click on the StarterPublishing file to open it in Visual Studio.
3. Select-all the text (Edit | Select All or CTRL+A) and then copy it (Edit | Copy or CTRL+C).
4. Close the instance of Visual Studio.
5. Open SharePoint Designer (SPD). Start | All Programs | SharePoint | Microsoft SharePoint Designer 2010.
6. Click the Open Site button.
7. Type http://demo2010a:8080 as the Site name and click Open twice. See Figure 13.
Note: SPD enables you to open the root site or any of the sub-sites; this is why it asks you to open the site twice.
14
Figure 13Opening the site with SPD
8. Click on Master Pages in the left-hand navigation in SPD and then click on the Blank Master Page button in the ribbon. See Figure 14.
15
Figure 14Creating a new Blank Master Page using SPD
9. Rename the new master page blueyonder.master. See Figure 1.
16
Figure 15Renaming the Master Page
10. Right-click on blueyonder.master in SPD and select Edit File in Advanced Mode from the content menu. See Figure 16.
Figure 16Advanced Mode command
11. Click on the Code tab at the bottom of the editor window. Select all the text (Edit | Select All or CTRL+A) and paste over the new text (Edit | Paste or CTRL+V). Click the Save button. See Figure 17.
17
Figure 17Saving new starter master page.
12. Go to line 383 of the master page (CTRL+G will bring up the Goto line dialog) and in the SiteLogoImage control change the string of the LogoImageUrl attribute from sitename to blueyonder. See Figure 18.
18
Figure 18Changing the logo URL
Note: It is generally accepted practice to put all your design assets in the Style Library document library, and it is good practice to create a new folder just for your site.
13. Click the Save button again.
14. Right-click the blueyonder.master page in the bottom left of the Navigation window and select Set as Custom Master Page. See Figure 19.
19
Figure 19Setting as the Custom Master Page
Note: The Default Master Page applies to system pages as well as Pages that will be displayed to the user as part of the site. For branding purposes, you generally only want to change the Custom Master Page.
15. Go back to Internet Explorer and Refresh (F5) the site: http://demo2010a:8080/. You should see something similar to Figure 20.
20
Figure 20Site with new master page
16. Notice the logo image is not displaying. You will need to add assets to the Style Library.
17. Click the Site Actions menu and select View All Site Content. See Figure 21.
21
Figure 21View All Site Content menu option
18. Click on Style Library in the resulting list. See Figure 22.
22
Figure 22Style Library
19. Click on the Documents tab at the top of the page and click New Folder in the ribbon. Type BlueYonder as the name of the new folder and click Save. See Figure 23.
23
Figure 23Creating a new folder.
Click on the newly created BlueYonder folder in the list. See Figure 24.
24
Figure 24Click on the BlueYonder folder.
20. Click on the Add document hyperlink and then click on the Upload Multiple Files hyperlink in the Upload Document dialog. See Figure 30.
Figure 25Click to upload multiple documents
21. In the Upload Multiple Files dialog, click on the Browse for files instead hyperlink and browse to C:\mslabs\SharePoint2010\WCM\05_Branding\Resources\StyleLibrary.
25
22. Select all (CTRL+A) the files in the folder and click Open. See Figure 26.
Figure 26Browsing for all files
23. Click OK and, when the files are uploaded, press Done.
24. Return to the root page of the site by clicking the folder icon next to Site Actions and clicking Blue Yonder Airlines. See Figure 27.
Figure 27
26
Using breadcrumbs
25. You should see the logo displayed as in Figure 28.
Figure 28Logo displayed
26. In Windows Explorer, navigate to C:\mslabs\SharePoint2010\WCM\05_Branding\Resources and open the BlueYonderComplete master page file.
27. Select all the text (Edit | Select All or CTRL+A) and then copy it (Edit | Copy or CTRL+C). Close Visual Studio.
28. Go back to SPD, open blueyonder.master if it isn’t already. Click on the Code tab at the bottom of the editor window. Select all the text (Edit | Select All or CTRL+A) and paste over the new text (Edit | Paste or CTRL+V). Click the Save button.
Note: You are replacing the “starter” master page with one that has been modified to include the BlueYonder design elements (CSS and Images) instead of the standard SharePoint elements.
29. Go back to Internet Explorer and refresh (F5). You should see something similar to Figure 29.
27
Figure 29SharePoint publishing page with BlueYonder design
28
Exercise 3: Creating a Custom Content Type and Page Layout
Task 1 - Creating the Page Layout for the Blue Yonder Home Page
1. To complete the home page design you will need to create a custom content type and a page layout for that content type to match the original design.
2. Go to the Site Settings page in Internet Explorer - http://demo2010a:8080/_layouts/settings.aspx
3. Click on the Site content types link under the Galleries heading. See Figure 30.
Figure 30Site content types link
4. Click on the Create link at the top of the Site Content Types page. See Figure 31.
29
Figure 31Create hyperlink
5. Enter BlueYonderHome for the name of the new Content Type. Select Publishing Content Types as the parent content type group, and Page as the parent content type. Select New group and name it Blue Yonder Custom Content Types. See Figure 32.
30
Figure 32Setting up the new content type
6. Click OK to create the new content type.
7. Go back to Microsoft SharePoint Designer 2010 (SPD) and click on Page Layouts in the left-hand navigation pane.
8. Click the New Page Layout button in the ribbon. See Figure 33.
Figure 33New Page Layout button in the ribbon
9. Type Index for the URL Name, and Blue Yonder Home for the Title. The BlueYonder Custom Content Types should already be selected as the group, and BlueYonderHome as the Content Type Name. If they aren’t, go ahead and select them. See Figure 34.
31
Figure 34Setting the Page Layout properties
10. Click OK to create the new Page Layout.
11. Click on the Design tab at the bottom of the Page Layout editor to bring up the page design view.
12. Click on the headerContent placeholder in design view, then click on the smart tag (found on the right side of the control in design view, indicated by >) and click Create Custom Content. See Figure 35.
32
Figure 35Creating custom content
13. Click on the Code tab at the bottom of the editor window.
14. In Windows Explorer, navigate to C:\mslabs\SharePoint2010\WCM\05_Branding\Resources and open HtmlForPageLayout by right-clicking and selecting Open with | Microsoft Visual Studio 2010.
15. Select all the HTML (Edit | Select All or CTRL+A) and then copy (Edit | Copy or CTRL+C).
16. Switch back to SPD and paste (CTRL+V) the text into the code editor inside of the Content tag with the ContentPlaceHolderID of PlaceHolderMain.
17. Cut the entire div tag above the <!-- For Content Area --> comment line and paste it into the Content tag with the ContentPlaceHolderID of headerContent. See Figure 36.
33
Figure 36Finished Page Layout
18. Save the file.
19. Go back to the Site Settings page: http://demo2010a:8080/_layouts/settings.aspx
20. Click on the Site Actions menu and select More Options. See Figure 37.
34
Figure 37More Options
21. In the Create dialog click on Page in the left-hand menu to filter to just page templates.
22. Select Publishing Page from the template list and then press Create. See Figure 38.
Figure 38Creating a publishing page
23. On the Create Page page, type Index as the Title, and select (BlueYonderHome) Blue Yonder Home from the Page Layout section. Then click Create. See Figure 39.
35
Figure 39Creating a new publishing page from a page layout
You should see the finished page in the browser. See Figure 40.
36
Figure 40Final SharePoint Blue Yonder Design
37
Lab Summary
In this lab, you performed the following exercises:
Created a Web Application
Created a Site collection
Created a new master page for your site collection
Created a new content type based on the publishing page content type
Created a new page layout based on the new content type
Created a page based on your new page layout
38
