Thủ thuật Sharepoint 2010 part 94 ppt

710  CHAPTER 23 BraNdiNg sharePoiNt 2010 Because visual upgrade is meant to be a temporary solution when upgrading an old SharePoint server, it is not intended for SharePoint 2007 master pages to be used long term in this way. To fully update an existing SharePoint 2007 master page to work with SharePoint 2010, several steps need to occur. These steps include adding the SharePoint Ribbon control and removing redundant and old 2007 controls. For more information on this process, check out the MSDN article “Upgrading an Existing Master Page to the SharePoint Foundation Master Page” ( http://msdn.microsoft.com/ en-us/library/ee539981(office.14).aspx ). Page Layouts SharePoint Server installations that have the Publishing Feature enabled include another type of brand- ing that is not available with SharePoint Foundation or Team Sites: page layouts. Page layouts are essen- tially templates for arranging and creating page content. They enable content authors to create pages that are based on defined templates. For instance, the same page content could be set up like a news article or as a landing page just by switching the underlying page layout. Beyond just defining the layout for the page content, page layouts also define areas of the page that can be edited, known as field controls, as well as Web Part zones. Web Part zones are special areas of the page that can contain one or more Web Parts. Unlike SharePoint 2007, SharePoint 2010 allows content authors to add and edit Web Parts in more areas than just Web Part zones; they can also be added to HTML content fields in both publishing pages and wiki pages. You can see a list of all the page layouts available in SharePoint from the same gallery as the mas- ter pages. Select Site Actions Site Settings. Under Galleries, click Master pages and page layouts. Several out-of-the-box page layouts are available when creating new pages in SharePoint Server 2010, including Article layouts and Welcome layouts, among others. Page Layouts, Content Types, and Site Columns . . . Oh, My! One particularly tricky concept to understand with page layouts is that they are always based on exactly one content type. Content types are themselves made up of site columns, which can be thought of as containers for data. When a page layout is created, the available editable field controls that can be added to the page layout are defined by which site columns are available in the underlying content type. To put it another way, editable field controls have their data stored in the site columns that define them. For example, the Article Left page layout that is available out of the box in SharePoint Server is based on the Article Page content type. This content type has a Publishing HTML site column named Page Content. The Article Page content type has an editable field control for Page Content; and any page created from Article Page, when edited, can have Page Content information entered and saved. When creating custom page layouts, you can use either existing content types, which are named Article Page and Welcome Page, or you can create your own custom content types. Using a Page Layout to Create a Page You can see page layouts in action by creating a new page in a SharePoint Server publishing site: 1. Click Site Actions New Page. 2. Enter a page name and click Create. Branding Basics for SharePoint 2010  711 3. Click the Page tab in the Ribbon and then click Page Layout (see Figure 23-35). FIGURE 2335 4. Choose one of the available page layouts, as shown in Figure 23-36. As soon as the page layout is selected, the page changes immediately to reflect the new layout. Creating a Custom Page Layout While using the existing page layouts is certainly nice, some- times you may need to create your own custom page layout. The following steps describe how to create your own custom page layout with SharePoint Designer 2010: 1. Open your SharePoint Server site in SharePoint Designer. 2. From the Site Objects menu on the left side, click Page Layouts. 3. From the Ribbon, click New Page Layout. 4. From the New dialog, leave Content Type Group set to Page Layout Content Types. For Content Type Name, select Article Page, and then enter a URL Name of DemoLayout.aspx and a Title of “Demo Page Layout,” and click OK. SharePoint Designer will create a basic page layout and open it. 5. Select the Toolbox pane on the right (if it’s not showing, you can click View from the Ribbon and then click Task Panes Toolbox), and scroll down to the bottom and expand SharePoint Controls. 6. Expand Page Fields and Content Fields. Content Fields shows all of the site columns that were added to the actual content type from which the page layout was created, and Page Fields shows all of the site columns that were inherited from the parent content type. 7. From the Toolbox Pane, under SharePoint Controls Content Fields, drag Page Content into the PlaceHolderMain. If you are in Code view, you should see something like the following: <asp:ContentContentPlaceholderID=”PlaceHolderMain” runat=”server”> <PublishingWebControls:RichHtmlFieldFieldName=”f55c4d88-1f2e-4ad9-aaa8- 819af4ee7ee8” runat=”server” id=”RichHtmlField1”> </PublishingWebControls:RichHtmlField> </asp:Content> FIGURE 2336 712  CHAPTER 23 BraNdiNg sharePoiNt 2010 This adds the Page Content field control to the page layout, enabling users to add content to the page layout. 8. Save the page layout by clicking Control+S. 9. Now the page layout needs to be checked in and approved. To do this, click the Page Layouts item in the Site Objects menu, find DemoLayout.aspx, and click on its icon. 10. From the Ribbon, click Check In, select Publish a major version, and click OK. 11. When SharePoint asks whether you want to view or modify the approval status, click Yes. This opens a view of the Master Page Gallery sorted by Approval Status. 12. Click the arrow to the right of DemoLayout and select Approve/Reject. Then, from the Approve/Reject dialog, click Approved and OK. 13. Now the page layout is available for use. Click Site Actions New Page. Give the page a name and click Create. 14. SharePoint creates a new page based on the default page layout. You can switch the page lay- out to the new one. From the Ribbon click Page Page Layout and select Demo Page Layout. 15. Because this example created a very simple page layout, only the title and the page content are editable. Edit the content and click Save & Close. If you make further changes to the page layout, all pages based on the page layout will be automati- cally updated. Creating Custom Site Columns and Content Types for Page Layouts The previous example demonstrated how to create a page layout based on an existing content type. In this example, you will create a custom site column and add it to a custom content type and then use that content type to create a page layout: 1. Open your SharePoint Server site in SharePoint Designer. 2. From the Site Objects menu on the left side, click Site Columns. 3. From the Ribbon, click New Column Multi Lines of Text. 4. Name the Site Column “Secondary Content” and select Custom Columns from Existing group. Click OK. 5. Click Column Settings from the Ribbon, and check the box next to Enhanced Rich Text. Click OK. 6. Click the disk icon on the top left of SharePoint Designer to save the site column. 7. From the Site Objects menu on the left side, click Content Types. 8. From the Ribbon, click Content Type New. 9. For the Name, enter “Demo Content Type,” set Select parent content type to Publishing Content Types. Set Select parent content type to Page (all page layouts need to inherit the Page content type), and set Existing group to Page Layout Content Types, and click OK. 10. From the Ribbon, click Edit Columns Add Existing Site Column. Branding Basics for SharePoint 2010  713 11. Scroll down to Custom Columns and select Secondary Content and click OK. 12. Click the disk icon on the top left of SharePoint Designer to save the content type. Now that the content type is saved, you can follow the preceding steps to create a page layout based on it. Just be sure to select the Demo content type when creating the new page layout. Controlling the Available Page Layouts As a site administrator, sometimes you may wish to control or change the available page layouts that content authors can use when creating pages. This can be easily managed by clicking Site Actions Site Settings Look and Feel Page layouts and site templates. From this menu you can allow users to select any page layout or you can create a list of page layouts from which users must select. This menu also enables you to select the default page layout that will be used when pages are first created. Figure 23-37 shows the Page layouts and site templates menu. FIGURE 2337 Cascading Style Sheets Cascading style sheets (CSS) are a type of markup language that is focused on defining the look and feel of data, most often HTML content. CSS is a very important concept for creating a branded SharePoint site. Many of the aspects of the way SharePoint displays information are ultimately con- trolled by the CSS that is loaded. Master pages almost always have CSS that is loaded, Web Parts often have CSS that styles them, and even themes inject colors and fonts into CSS. Before undertaking 714  CHAPTER 23 BraNdiNg sharePoiNt 2010 any decent amount of SharePoint branding, one should be well versed in how CSS works in traditional web design. For more information about CSS, check out Professional CSS: Cascading Style Sheets for Web Design, 2nd Edition, by Christopher Schmitt et al. (Wrox, 2008). CSS in SharePoint 2010 is loaded differently from how it was loaded in SharePoint 2007. SharePoint 2007 loaded almost all of its CSS via the core.css file. SharePoint 2010 contains a similar file named corev4.css that loads a large amount of CSS, but several other CSS files are loaded onto the page dynamically based on what controls are being used at any given time. Applying CSS to SharePoint When custom CSS is being used to create a branded SharePoint site, you have several options for applying the CSS. The most popular way to load custom CSS is to reference it from a custom master page. The command for adding CSS to a master page is as follows: <SharePoint:CssRegistration name=”/Style Library/sitename/style.css” After=”corev4.css” runat=”server”/> One reason why this method is popular is because for heavily branded sites, custom CSS is often tied directly to custom HTML in a custom master page. By applying CSS inside the master page, the CSS and the master page are always linked together. SharePoint Server publishing sites have one other easy method for adding CSS to a SharePoint site, known as Alternate CSS. This method enables the CSS styles to be easily selected and applied to a site and all of its subsites without having to change the master page at all. In SharePoint Server publishing sites, you can find this setting at Site Actions Site Settings Look and Feel Master page. Scroll to the bottom to find Alternate CSS URL. Figure 23-38 shows the System master page setting. Where to Find Branding Features One thing that SharePoint administrators often want to understand better is where everything lives in SharePoint. For branding, this typically refers to master pages, themes, page layouts, and CSS. Here is a breakdown of the places where branding frequently is found in SharePoint: Master pages Master pages reside in the Master Page Gallery of a site collection’s content database. From  SharePoint Designer, this can be found at _catalogs/masterpage. The master pages in the Master Page Gallery are often provisioned there automatically when  the site collection was created. These provisioned files are based on master pages that have been loaded in the SharePoint root folder, either out of the box or via SharePoint solution packages. Themes Custom themes are uploaded to the site collection’s content database and live in the Themes  Gallery. From SharePoint Designer, this can be found at _catalogs/theme. Branding Basics for SharePoint 2010  715 FIGURE 2338 Page Layouts These reside in the Master Page Gallery of a site collection’s content database. From  SharePoint Designer, this can be found at _catalogs/masterpage. The page layouts in the Master Page Gallery are often provisioned there automatically when  the site collection was created. These provisioned files are based on page layouts that have been loaded in the SharePoint root folder, either out of the box or via SharePoint solution packages. CSS CSS can live in many locations in SharePoint. Here are some of the more common: Most custom CSS lives in the site collection’s content database under the Style Library folder.  Much of the out-of-the-box CSS is loaded from the SharePoint root folder from subdirecto-  ries under 14\TEMPLATE\LAYOUTS. 716  CHAPTER 23 BraNdiNg sharePoiNt 2010 Customization and Solution Packages One common pitfall when dealing with SharePoint branding is the topic of customization. In SharePoint 2003, customization was known as unghosting and uncustomized pages were referred to as ghosted, but those terms have been deprecated since SharePoint 2007. Because branding in SharePoint frequently involves changing out-of-the-box files, customization can happen easily (and sometimes happens unexpectedly when someone who is inexperienced is working with SharePoint Designer). The following sections describe how these files work in SharePoint. Uncustomized Files When a SharePoint site is created, its files are actually instances of files from the SharePoint server’s file system that are provisioned into the content database. When a browser visits one of these pages, SharePoint looks in the content database and sees that the page is based on a file that resides in the file system, retrieving it from the file system and presenting it to the user. These types of files are known as uncustomized files, and they represent many out-of-the-box files such as master pages, page layouts, and content pages. Different SharePoint sites on the same farm can point to the same files on the file system as long as all of them are uncustomized. Customized Files Any time one of these uncustomized files is changed via the SharePoint web user interface or through SharePoint Designer, the changed version is stored in the content database and the file becomes customized. When a browser visits a customized page, SharePoint looks in the content database, sees that the file is customized, and simply displays the contents of the file as it was stored in the content database. On the face of things, this doesn’t seem too bad, but from an administrative per- spective there can be maintenance issues with customized files. For example, if a master page is installed via a SharePoint solution package (WSP) and activated on a site collection as a feature, and then later that master page is customized in the site collection with SharePoint Designer, subsequent changes to the original solution file will not affect that customized master page. This can get even more confusing when several site collections are all based off of the same solution package and then one of the sites is customized. The sites’ branding can become out of sync; and depending on how long the customizations go undetected, synchronizing them could be challenging. Using SharePoint Solution Packages to Apply Branding If customization can cause problems, how is SharePoint Designer effectively used to create branding without customizing everything? The answer to this is simple: SharePoint Designer can be used to create branding on a development server or a local virtual machine that is set up to closely mimic the production environment. When the branding files are completed, they can be packaged for proper deployment to the production server. This involves loading all of the master pages, page layouts, custom CSS, and images, and any other branding assets, into a Visual Studio project and creating a SharePoint solution package (WSP). Branding that is installed on a SharePoint server via a WSP will create files that are uncustomized. You can learn more about creating solution packages in Chapter 13, “Adding Functionality with Features and Solution Packages.” . Web Part zones. Web Part zones are special areas of the page that can contain one or more Web Parts. Unlike SharePoint 2007, SharePoint 2010 allows content authors to add and edit Web Parts. (Wrox, 2008). CSS in SharePoint 2010 is loaded differently from how it was loaded in SharePoint 2007. SharePoint 2007 loaded almost all of its CSS via the core.css file. SharePoint 2010 contains a. 710  CHAPTER 23 BraNdiNg sharePoiNt 2010 Because visual upgrade is meant to be a temporary solution when upgrading an old SharePoint server, it is not intended for SharePoint 2007 master pages