Thủ thuật Sharepoint 2010 part 94 ppt

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.. When a page layout is c

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 Masmas-ter 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

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

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 Laylay-out and select Demo Page Laylay-out

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

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

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

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

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.”