Materials



Hands-On LabSharePoint 2010:Branding a SharePoint Site from an Existing DesignLab version: 1.0.0Last updated: DATE \@ "M/d/yyyy" 7/18/2011Virtual Machine Logon Details:UserName: Administrator, Password: pass@word1This 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 TOC \o "1-2" \h \z \t "pp Procedure Start,3,pp Topic,1" Overview PAGEREF _Toc298742225 \h 3Exercise 1: Creating the Site and Site Collection PAGEREF _Toc298742226 \h 5Task 1 – Remove Web Site PAGEREF _Toc298742227 \h 5Task 3 - Creating sub-sites for navigation PAGEREF _Toc298742228 \h 8Exercise 2: Creating a Master Page PAGEREF _Toc298742229 \h 14Task 1 - Creating the Master Page PAGEREF _Toc298742230 \h 14Exercise 3: Creating a Custom Content Type and Page Layout PAGEREF _Toc298742231 \h 29Task 1 - Creating the Page Layout for the Blue Yonder Home Page PAGEREF _Toc298742232 \h 29Lab Summary PAGEREF _Toc298742233 \h 38OverviewThis lab will walk you through layering an internet-based web design on top of a SharePoint 2010 Publishing Site.Figure SEQ Figure \* ARABIC 1The Blue Yonder Airlines Web Site DesignBlue 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.MaterialsThis Hands-On Lab contains resources in the following folder. Lab Resources : c:\mslabs\SharePoint2010\WCM\05_Branding\Resources Exercise 1: Creating the Site and Site CollectionIn 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 SiteOpen 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.Once the SharePoint 2010 Central Administration page is open, click on the Manage web applications hyperlink under the Application Management section. See REF _Ref280852493 \h Figure 2.Figure SEQ Figure \* ARABIC 2Manage web applications linkOn the Web Applications Management page you should see a site named BlueYonderAirlines, select it and the click the Delete button in the ribbon. See REF _Ref284409662 \h Figure 3.Figure SEQ Figure \* ARABIC 3Insert CaptionOn the Delete Web Application dialog click the radio button next to Yes for both options, and click Delete. See REF _Ref284413630 \h Figure 4.Figure SEQ Figure \* ARABIC 4Delete Web Application DialogTask 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: BlueYonderAirlinesPort: 8080Site Collection Name: Blue Yonder AirlinesSite Template: Publishing PortalPrimary User:AdministratorTask 3 - Creating sub-sites for navigationNotice the built-in navigation in the upper-left portion of the screen that SharePoint adds to any new Publishing Portal site. See REF _Ref281893389 \h Figure 5.Figure SEQ Figure \* ARABIC 5SharePoint default navigationNote: The SharePoint Global Navigation (which is shown in REF _Ref281893389 \h 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.Click on the Site Actions menu and select New Site. See REF _Ref281894691 \h Figure 6.Figure SEQ Figure \* ARABIC 6New Site commandIn 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 REF _Ref281894992 \h Figure 7.Figure SEQ Figure \* ARABIC 7Creating a new sub-site manuallyYou should now see the created sub-site. See REF _Ref281895148 \h Figure 8.Figure SEQ Figure \* ARABIC 8New sub-siteNow you will create the rest of the sub-sites for navigation automatically using PowerShell.With Windows Explorer, navigate to the c:\mslabs\SharePoint2010\WCM\05_Branding\Resources\Scripts folder.Right-click on the createsubsites.ps1 file and select Edit.The script should open in the Windows PowerShell ISE as in REF _Ref281899829 \h Figure 9.Figure SEQ Figure \* ARABIC 9PowerShell script for creating sub-sitesPowerShellparam( [string] $url, [Array] $sites )foreach($s in $sites){New-SPWeb –URL ($url + $s) –Template BLANKINTERNET#1 -Name $s }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.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 REF _Ref282069872 \h Figure 10.Figure SEQ Figure \* ARABIC 10Running PowerShell importing system modulesIn the PowerShell window, change into the C:\mslabs\SharePoint2010\WCM\05_Branding\Resources\Scripts folder. Run the createsubsites.ps1 script in PowerShell, passing in as the URL parameter, and Promotions,About as the sub-site parameter. See REF _Ref282071212 \h Figure 11.Figure SEQ Figure \* ARABIC 11Running the PowerShell script to create sub-sitesPowerShell.\createsubsites.ps1 Promotions,AboutGo back to Internet Explorer and refresh the page. You should see new navigation options. See REF _Ref282071364 \h Figure 12.Figure SEQ Figure \* ARABIC 12New sub-site navigationExercise 2: Creating a Master PageTask 1 - Creating the Master PageUsing Windows Explorer navigate to c:\mslabs\SharePoint2010\WCM\05_Branding\Resources.Double-click on the StarterPublishing file to open it in Visual Studio.Select-all the text (Edit | Select All or CTRL+A) and then copy it (Edit | Copy or CTRL+C).Close the instance of Visual Studio.Open SharePoint Designer (SPD). Start | All Programs | SharePoint | Microsoft SharePoint Designer 2010.Click the Open Site button. Type as the Site name and click Open twice. See REF _Ref282072056 \h 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. Figure SEQ Figure \* ARABIC 13Opening the site with SPDClick on Master Pages in the left-hand navigation in SPD and then click on the Blank Master Page button in the ribbon. See REF _Ref282072172 \h Figure 14.Figure SEQ Figure \* ARABIC 14Creating a new Blank Master Page using SPDRename the new master page blueyonder.master. See REF _Ref282072251 \h Figure 1.Figure SEQ Figure \* ARABIC 15Renaming the Master PageRight-click on blueyonder.master in SPD and select Edit File in Advanced Mode from the content menu. See REF _Ref282072342 \h Figure 16.Figure SEQ Figure \* ARABIC 16Advanced Mode commandClick 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 REF _Ref282072522 \h Figure 17.Figure SEQ Figure \* ARABIC 17Saving new starter master page.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 REF _Ref282073706 \h Figure 18.Figure SEQ Figure \* ARABIC 18Changing the logo URLNote: 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.Click the Save button again.Right-click the blueyonder.master page in the bottom left of the Navigation window and select Set as Custom Master Page. See REF _Ref282072627 \h Figure 19.Figure SEQ Figure \* ARABIC 19Setting as the Custom Master PageNote: 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.Go back to Internet Explorer and Refresh (F5) the site: . You should see something similar to REF _Ref282073183 \h Figure 20.Figure SEQ Figure \* ARABIC 20Site with new master pageNotice the logo image is not displaying. You will need to add assets to the Style Library.Click the Site Actions menu and select View All Site Content. See REF _Ref282073824 \h Figure 21.Figure SEQ Figure \* ARABIC 21View All Site Content menu optionClick on Style Library in the resulting list. See REF _Ref282073889 \h Figure 22.Figure SEQ Figure \* ARABIC 22Style LibraryClick 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 REF _Ref282073977 \h Figure 23.Figure SEQ Figure \* ARABIC 23Creating a new folder.Click on the newly created BlueYonder folder in the list. See REF _Ref282096793 \h Figure 24.Figure SEQ Figure \* ARABIC 24Click on the BlueYonder folder.Click on the Add document hyperlink and then click on the Upload Multiple Files hyperlink in the Upload Document dialog. See Figure 30.Figure SEQ Figure \* ARABIC 25Click to upload multiple documentsIn the Upload Multiple Files dialog, click on the Browse for files instead hyperlink and browse to C:\mslabs\SharePoint2010\WCM\05_Branding\Resources\StyleLibrary.Select all (CTRL+A) the files in the folder and click Open. See REF _Ref282074298 \h Figure 26.Figure SEQ Figure \* ARABIC 26Browsing for all filesClick OK and, when the files are uploaded, press Done.Return to the root page of the site by clicking the folder icon next to Site Actions and clicking Blue Yonder Airlines. See REF _Ref282074430 \h Figure 27.Figure SEQ Figure \* ARABIC 27Using breadcrumbsYou should see the logo displayed as in REF _Ref282074482 \h Figure 28.Figure SEQ Figure \* ARABIC 28Logo displayedIn Windows Explorer, navigate to C:\mslabs\SharePoint2010\WCM\05_Branding\Resources and open the BlueYonderComplete master page file.Select all the text (Edit | Select All or CTRL+A) and then copy it (Edit | Copy or CTRL+C). Close Visual Studio.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.Go back to Internet Explorer and refresh (F5). You should see something similar to REF _Ref282096820 \h Figure 29.Figure SEQ Figure \* ARABIC 29SharePoint publishing page with BlueYonder designExercise 3: Creating a Custom Content Type and Page LayoutTask 1 - Creating the Page Layout for the Blue Yonder Home PageTo 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.Go to the Site Settings page in Internet Explorer - on the Site content types link under the Galleries heading. See REF _Ref282082890 \h Figure 30.Figure SEQ Figure \* ARABIC 30Site content types linkClick on the Create link at the top of the Site Content Types page. See REF _Ref282084142 \h Figure 31.Figure SEQ Figure \* ARABIC 31Create hyperlinkEnter 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 REF _Ref282084134 \h Figure 32.Figure SEQ Figure \* ARABIC 32Setting up the new content typeClick OK to create the new content type.Go back to Microsoft SharePoint Designer 2010 (SPD) and click on Page Layouts in the left-hand navigation pane.Click the New Page Layout button in the ribbon. See REF _Ref282083861 \h Figure 33.Figure SEQ Figure \* ARABIC 33New Page Layout button in the ribbonType 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 REF _Ref282083414 \h Figure 34.Figure SEQ Figure \* ARABIC 34Setting the Page Layout propertiesClick OK to create the new Page Layout.Click on the Design tab at the bottom of the Page Layout editor to bring up the page design view.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 REF _Ref282084096 \h Figure 35.Figure SEQ Figure \* ARABIC 35Creating custom contentClick on the Code tab at the bottom of the editor window.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.Select all the HTML (Edit | Select All or CTRL+A) and then copy (Edit | Copy or CTRL+C).Switch back to SPD and paste (CTRL+V) the text into the code editor inside of the Content tag with the ContentPlaceHolderID of PlaceHolderMain.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 REF _Ref282084485 \h Figure 36.Figure SEQ Figure \* ARABIC 36Finished Page LayoutSave the file.Go back to the Site Settings page: on the Site Actions menu and select More Options. See REF _Ref282084571 \h Figure 37.Figure SEQ Figure \* ARABIC 37More OptionsIn the Create dialog click on Page in the left-hand menu to filter to just page templates.Select Publishing Page from the template list and then press Create. See REF _Ref282084659 \h Figure 38.Figure SEQ Figure \* ARABIC 38Creating a publishing pageOn the Create Page page, type Index as the Title, and select (BlueYonderHome) Blue Yonder Home from the Page Layout section. Then click Create. See REF _Ref282084739 \h Figure 39.Figure SEQ Figure \* ARABIC 39Creating a new publishing page from a page layoutYou should see the finished page in the browser. See REF _Ref282084783 \h Figure 40.Figure SEQ Figure \* ARABIC 40Final SharePoint Blue Yonder DesignLab SummaryIn this lab, you performed the following exercises:Created a Web ApplicationCreated a Site collectionCreated a new master page for your site collectionCreated a new content type based on the publishing page content typeCreated a new page layout based on the new content typeCreated a page based on your new page layout ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download