real world branding with sharepoint server 2007 publishing ... · real world branding with...

©2009 Microsoft Corporation. All rights reserved.

Real World Branding with SharePoint Server 2007 Publishing Sites (Part 1 of 2)

Summary: Learn the essential concepts needed to create an engaging user interface design in

Microsoft Office SharePoint Server 2007 publishing sites. This article is part 1 of 2. (21 printed pages)

Andrew Connell, Critical Path Training, LLC [ http://www.criticalpathtraining.com/default.aspx ]

Randy Drisgill, SharePoint911 [ http://www.sharepoint911.com/default.aspx ]

July 2009

Applies to: Microsoft Office SharePoint Server 2007, Microsoft Office SharePoint Designer 2007

Contents

Introduction to Creating a Brand in SharePoint Server •

Gathering the Design Requirements •

Planning for SharePoint Branding •

Additional Resources •

Read part 2: Real World Branding with SharePoint Server 2007 Publishing Sites (Part 2 of 2)

[ http://msdn.microsoft.com/en-us/library/ee354190.aspx ]

Download the code sample that accompanies this article: MSDN Sample - Real World SharePoint

Branding [ http://code.msdn.microsoft.com/MsdnRealWorldSpBrand.aspx ]

Introduction to Creating a Brand in SharePoint Server

Microsoft Office SharePoint Server 2007 publishing sites make use of the Office SharePoint Server

Publishing Features to provide capabilities for creating engaging Web content management (WCM)

sites. Frequently used as Internet-facing Web sites, these sites require the use of custom-designed user

interfaces to establish an online corporate identity. This process, whether it is used on a traditional

HTML page or in Office SharePoint Server, is known as Web site branding. Publishing sites make use of

master pages, page layouts, Web Parts, and CSS to enable designers and developers to create branded

Web sites that can rival the designs of many popular Web sites today. This article focuses on the

mechanics of properly planning and creating a design for an external, Internet Web site by using a

publishing site. The article uses as a specific example a fictitious travel company, Adventure Works

Travel, which needs to create a heavily branded SharePoint site. Figure 1 shows this publishing site.

Figure 1. Branded Adventure Works Travel publishing site

of 21Real World Branding with SharePoint Server 2007 Publishing Sites (Part 1 of 2)

8/11/2009http://msdn.microsoft.com/en-us/library/ee354191(printer).aspx

Gathering the Design Requirements

When you want to create a great design for a SharePoint site, it is often a good idea to invest a

significant amount of time up front to ensure everything is planned as you need. By properly

understanding what the business objectives are before starting to code master pages and page layouts,

you can avoid difficult and time-consuming revisions to your design.

This process begins by performing a formal requirements-gathering session. Whether the site you are

designing is for 10 users or 100,000 users, you must meet certain requirements before the project is

considered a success. The level of detail to which this requirements gathering session should go or

"dive" can be tempered by the assumed complexity of the site. Large sites (either large in number of

pages or large in number of users) can require more time for gathering requirements than a simple

small site. Requirements gathering should always involve key business, marketing, and IT stakeholders

to ensure that their ideas are considered and to ensure complete approval on the project. Often this

process can be difficult for a branding project. Sometimes it is delegated to the marketing department,

or even outsourced to external consultants. Although involving key stakeholders is important, consider

that when more people are involved in the decision-making process, both the time needed for gathering

requirements and the overall complexity of the project can quickly increase. For this reason, you should

carefully determine which members of the team will have relevant input to the requirements-gathering

process.

The following sections discuss some of the more important concepts that you should understand before

starting any SharePoint branding project.



SharePoint Server Publishing Sites vs. Windows SharePoint Services 3.0 Sites

One of the first decisions to make is whether this Web site will be based on Windows SharePoint

Services 3.0 or whether it will be a SharePoint Server Web site with the Publishing Features enabled.

Although publishing sites are built on top of Windows SharePoint Services 3.0, there are many

advantages for building engaging Internet-facing Web sites with SharePoint Server. The following list

contains some of the benefits to creating a brand with publishing sites versus Windows SharePoint

Services 3.0 sites:

Publishing sites enable content authors to create Web pages with a more robust rich-text

editing experience.

•

Master pages that are targeted for publishing sites can take advantage of specific code

assemblies that use Publishing Features.

•

Navigation can be more easily controlled from the Web user interface and more options are

available to the designer.

•

Publishing sites enable you to change out a master page by using the Web user interface.•

Publishing sites enable developers and designers to create page templates by using page

layouts.

•

Master pages in publishing sites can take advantage of the

$SPUrl

token to target HTML assets via URLs that are relative to either the site collection root (

$SPUrl:~sitecollection/

) or site root (

$SPUrl:~site/

).

•

Publishing sites provide specific storage mechanisms for design assets that are not

automatically available to Windows SharePoint Services 3.0 sites.

•

Note:

For the purposes of this article, a publishing site refers to a SharePoint Server 2007

Web application with a site collection in the top-level folder (root) that has the

Publishing Features enabled. For simplicity, the built-in (out-of-the-box) Publishing

templates, Collaboration Portal, and Publishing Portal have the Publishing Features

already enabled. In this article, The Adventure Works Travel example uses the

Publishing Portal template.

For more information about setting up Web applications and site collections, see Prescriptive Guidance

for SharePoint Server 2007 Web Content Management Sites [ http://msdn.microsoft.com/en-

us/library/cc879144.aspx ] .

Targeted Browsers and Platforms

Another major decision you must make early in your planning is what browsers and operating system

platforms to target in the design. Although every design should strive to be as close to perfect as

possible in every browser and on every operating system, it is often impossible or impractical to even

test this capability to any measure of success. Typically, you should pick certain browsers and operating

systems to specifically test and code against in your branding effort. A good way to choose a level of

browser and operating system to support is to consult industry Web sites that study and provide Web

traffic analysis. Net Applications Market Share [ http://marketshare.hitslink.com/browser-market-

share.aspx?qprid=0 ] lists the top 10 Web browsers by total market share, as shown in Table 1.

Table 1. Browser versions and total market share

Browser Version Total Market Share



Internet Explorer 7.0 44.51%

Firefox 3.0 20.25%


Safari 3.2 4.29%


Safari 3.1 1.90%

Firefox 2.0 1.80%

Chrome 1.0 1.32%

Safari 4.0 0.80%

Netscape 6.0 0.75%

Microsoft designates browsers by the level of SharePoint support. Level 1 browsers support all levels of

SharePoint functionality, while Level 2 browsers support only limited reading and writing SharePoint

functions. For more information, see Plan Browser Support (Office SharePoint Server)

[ http://technet.microsoft.com/en-us/library/cc263526.aspx ] on Microsoft TechNet.

For the Adventure Works Travel example, the decision is made to focus on an end-user browsing

experience that is as close to pixel perfect as possible in Internet Explorer 7, Internet Explorer 8, and

Firefox 3, while also ensuring several other modern browsers (including Chrome and Safari) have a

similar user interface experience, within reasonable-effort limits.

Targeted Screen Size

Another area that is often hotly debated is what screen size to target for a new design. Monitors used

to support only a very small subset of resolutions, such as 640 x 480. As monitor prices have

descreased, it is not uncommon to see Web site visitors browsing in 1920 x 1200 and higher

resolutions. Most Web designers consider 1024 x 768 to be the most common screen resolution,

followed closely by 1280 x 800. When creating a design to display in a SharePoint site, you must

balance the desire to display much information at one time with a typical user's screen resolution. The

available space for displaying content becomes even smaller when you consider that browser toolbars

and scroll bars also take up a percentage of the screen area.

For the Adventure Works Travel example, the target minimum screen resolution is decided to be 1024 x

768. The design also needs to allow for some padding to accommodate scroll bars. Because of this, the

design should be no wider than 960 pixels.

Defining the Audience and Success Criteria

Before you can consider a branding initiative successful, it is a good idea to define some of the more

subjective goals for the design. What type of users will use the site? What is the typical user of the site

trying to do? How will a user want to navigate the site? Does the user want to do business with a

company that has a more traditional image or one that is more cutting edge? Unlike software

development, the design process is subjective for every different business situation. Business

stakeholders often dispute these decisions until they can determine a general brand identity. Because

these ideas can be difficult to gauge, it is also a good idea to identify what the success criteria will be

for a new brand. Success criteria could be as simple as attracting more visitors or as complex as

calculating an increase in sales across major demographics. The more quantifiable and measurable the

success criteria are, the easier it is to determine the success of the branding effort.

In the Adventure Works Travel example, the design should cater to a younger user-base that is looking

for an edgy look and feel. These users will be comfortable navigating the site by using top navigation

and left navigation, and by using Microsoft Live Search (which is now Bing by Microsoft). The users'

primary reason for visiting the Web site is to learn about adventure destinations and to book vacations.



The general brand is that of a travel company that caters to an audience that seeks a more

"adventurous" vacation than an average hotel on the beach.

Planning for SharePoint Branding

The process of actually coding branding in a SharePoint site involves several complex steps, such as

creating master pages, page layouts, and CSS. This complexity often necessitates an initial planning

phase to ensure that you avoid time-consuming rewrites. The planning process for building a

SharePoint brand can also include several steps, such as creating black-and-white wireframes, full-color

Web site design comps, and even functioning HTML and CSS versions of key pages. The following

sections discuss these activities as they relate to creating a branded SharePoint user interface.

Creating Simple Wireframes

A wireframe is typically a black-and-white block diagram that visually describes the overall structure of

a Web site, including the layout, navigation, functionality, and, in some cases, even the content.

Because of the subjective nature of Web design (or even design in general), it is good to discuss these

topics in wireframe form rather than get mired in colors and photo preferences. When completed

correctly, wireframes can provide a guide for developers and designers for the functionality and layout

to apply in later stages of the branding process.

Wireframes can be created by using many different methods, from simple pen and paper to dedicated

software tools such as Microsoft Office Visio 2007 or Adobe Illustrator CS4. Dedicated software tools

can be very helpful in creating wireframes because they can use prebuilt stencils that relate to specific

functions of software such as SharePoint Server. When creating SharePoint wireframes, a simple

search, such as the following, can return many hits for freely available Visio templates and stencils:

http://www.bing.com/search?q=sharepoint+visio+stencil

When creating wireframes, carefully decide what SharePoint functionality the brand will support. Not

everything that SharePoint Server shows by default is appropriate for every Internet-facing Web site.

Figure 2 shows a built-in SharePoint user interface with each of the major areas of functionality labeled,

from A through O. Table 2 describes these major areas.

Figure 2. Major functional areas of a SharePoint interface



Table 2. Major functional areas of a SharePoint interface

Label Functionality

A Global navigation A link to the home of the site collection.

B Title area image Typically shows the icon for the current site but can also show a user-defined logo.

C Site title Text that tells the user the title of the current site.

D Global navigation Also known as the top link bar, this is the main means of site navigation.

E Welcome menu Places a welcome message and is important for enabling users to

log off.

F My Site A link to the My Site functionality that enables end users to have personalized portals with their favorite content. My Site is typically appropriate only on intranet sites.

G My Links Similar to My Site, enables end users to collect links that are important to them. My Links is typically appropriate only on intranet sites.

H Help icon An icon that links to generic SharePoint help. Usually not appropriate on an Internet-facing site.

I Search area In publishing sites, you can use a couple types of search boxes; they can include the search scopes and the advanced search link.



J Site Actions menu Used by all administrators and content authors. It is the main menu for interacting with a SharePoint site.

K Left navigation Also known as Current Navigation or Quick Launch. Usually used for secondary navigation.

L Tree View navigation Provides a Windows Explorer–style representation of the site. Because of its appearance, the Tree View is often better suited for intranet sites.

M Recycle Bin A link to the Recycle Bin for the site. A collection of items that were deleted from the site. Usually not appropriate on an Internet facing site.

N Page breadcrumbs A breadcrumb showing the optimal path to the current page.

O Main content area The PlaceHolderMain content placeholder. Required for the actual content of the page.

When creating wireframes for a SharePoint site, you must consider several types of pages that could be

supported by SharePoint Server. Examples of the various types of pages that can exist in SharePoint

Server include a home page, landing pages, search results pages, and articles.

Figure 3 shows the Visio 2007 wireframe for the Adventure Works Travel Web site.

Figure 3. Visio 2007 wireframe for an Adventure Works Travel page

From this wireframe page, you can see that the Adventure Works Travel site will support some but not

all SharePoint functionality. For example, in this example, search will use Microsoft Live Search instead

of the built-in SharePoint searching mechanism. By making these decisions at the wireframe stage,

developers do not have to build unnecessary functionality.



Creating Realistic Design Comps

Creating wireframes can help with the planning of a new SharePoint site, however, for any serious

branding effort you should create a true design comp or prototype before any coding begins. Unlike

wireframes, most Web design comps are intended to mimic the branding (look and feel) of an actual

Web site as closely as possible without actually creating any code. Comps include realistic static

versions of photos, logos, colors, fonts, form elements, and anything else that might appear on the

page. For a SharePoint site, this means emulating many of the functional areas of the SharePoint user

interface.

Although you could create design comps with any graphics program (or even with pencil and paper),

applications such as Adobe Photoshop or Microsoft Expression Design can help to make the task easier.

Note:

For example purposes, this article frequently references features of Adobe Photoshop. However, similar features may be available in other design applications.

Following are some of the capabilities of a graphics program, such as Adobe Photoshop described here,

that you can use to create an easy to maintain and reusable design comp for SharePoint sites:

Layers and Layer Groups Can be used to separate design elements into specific units.

Instead of creating design elements in a "flat" file, layers act as if each new layer is

actually on top of the previous layer. Designers can hide and show, manipulate, move, and

even apply effects such as drop shadows and borders to individual layers without affecting

the other design elements. When using a tool such as Photoshop to create a design comp,

it is a good idea to make new layers for every element in the design. Figure 4 shows the

Layers panel in Photoshop.

•

Figure 4. Layers panel in Photoshop



Editable Text Can be created by using a wide variety of fonts, sizes, and styles. Without

this feature, text that is created in basic design programs is static and must be erased

before each change. In a modern design tool, text can be resized, made bold, given color,

have its font changed and much more without erasing the previous state. Figure 5 shows

text being edited in Photoshop.

•

Figure 5. Editable text in Photoshop

Web-Safe Images Images can be saved easily into various Web-safe file formats, such as

JPG, GIF, and PNG. Many design programs assist with the creation of these assets in a

small Web-friendly file size without compromising their quality. In Photoshop, you can save

graphics for the Web by using the Save for Web & Devices menu (see Figure 6). An

example of using the Save for Web & Devices menu can be seen later in this article.

•

Figure 6. Save for Web & Devices menu



Keeping a Design Comp Realistic

When creating design comps in a tool such as Photoshop, it is tempting to use its power to create

designs that are very polished. However, be careful not to create a design that is so polished that it

looks better than a browser can actually render for a SharePoint page. One such limitation concerns

text. In Photoshop, each piece of text can use different antialiasing techniques (antialiasing is a

mechanism that reduces distortion of images at lower resolutions). Specifically, small text looks much

smoother in Photoshop than browsers can replicate. To keep expectations manageable, it is a good idea

to switch small text to use no antialiasing. In Photoshop, you can do this in the Character window,

under Anti-Aliasing. Figure 7 shows the Character window with the Anti-Aliasing menu selected.

Figure 7. Character window in Photoshop



In addition to the text antialiasing, when creating design comps for SharePoint sites, consider the

actual SharePoint functionality itself. To accurately replicate SharePoint functionality in a design comp,

you can take screenshots of each of the pieces of SharePoint functionality and paste them into the

design.

Be careful to ensure that the limits of the SharePoint application are not stretched by the implications

of the design comp. For example, navigation tabs should have consistent color for each item at the top

level because the built-in SharePoint menus cannot have individual styles applied to each item.

As the Adventure Works Travel design comp is created, you would finalize various colors and styles.

Stock photos need to be acquired, fonts need to be selected, and logos need to be created. Each

element is created in its own layer and effects such as gradients and borders are created as layer

effects so that future changes are easier to make. You would take screen captures of SharePoint

elements such as the Site Actions menu and the Welcome menu, paste these into Photoshop, and

arrange them in an appealing way. Figure 8 shows the final design comp in Photoshop.

Figure 8. Design comp in Photoshop



As you create the design, you can decide how to replicate the various concepts in SharePoint Server.

Figure 9 shows the same design comp with labels applied to highlight each functional area; the function

areas are described in Table 3.

Figure 9. SharePoint functional areas in the design comp



Table 3. Major functional areas of the design comp

Label Functionality

A Site Actions

B Welcome menu

C Microsoft Live Search (instead of SharePoint search, as decided earlier)

D Link back to the home page

E Global navigation

F Left navigation

G Web Part

H Page breadcrumbs

I Page title



J Rich-text field control

K Web Part

Converting a Design Comp into Working HTML and CSS

The next step in planning for SharePoint branding is to take the design comp and convert it into a

functioning HTML page. You could skip this step for simple designs, but for complex designs, this step

enables the designer to work inside of a familiar environment. This HTML code can be used later to

create the actual master page in a tool such as Microsoft Office SharePoint Designer 2007. By first

creating a working HTML version, you can fine-tune the HTML for the master page without being

burdened by trying to work around the code that SharePoint Server adds to the display. After this step

is done, you should have a functional, complete HTML version of key pages in the site. All CSS for the

basic layout are complete and all images are sliced from the design comp and saved to individual files.

For the creation of HTML, there is a wide array of toolsets available to designers. Tools can range from

text editors, such as Notepad, in which to simply code the HTML by hand, to a professional Web page

development tool such as Adobe Dreamweaver or Microsoft Expression Web. Following are some of the

advantages that a professional Web page development application can offer to designers:

Support for HTML and CSS code completion•

WYSIWYG (what you see is what you get) design views•

Tools that help with the creation of cross-browser Web pages•

DOCTYPEs and SharePoint Server

When it comes to creating cross-browser compliant HTML, one key concept to understand is how a

DOCTYPE works. A DOCTYPE is a command that instructs a browser or validator to use a specific

language to interpret the HTML or XML code that it describes. Although you can create HTML and

master pages that do not have a DOCTYPE declared, without one, browsers can render HTML code in

unexpected ways. For example, without a valid DOCTYPE declared, Internet Explorer 7 renders an

HTML page in Quirks Mode (which is similar to how Internet Explorer 5.5 would render a page).

There are several DOCTYPEs in use today that can cause a browser to render content in a predictable

way. Following are the most popular DOCTYPEs:

HTML 4.01 Strict Allows all HTML elements but does not allow deprecated elements such

as the <font> tag.

•

HTML 4.01 Transitional Allows all HTML elements including deprecated elements.•

XHTML 1.0 Transitional Similar to HTML 4.01 Transitional, but all tags must be well-

formed XML. Deprecated elements are allowed but must also be well-formed XML.

•

Which DOCTYPE is right for SharePoint Server? There is no straightforward answer to this question.

Some built-in master pages have no DOCTYPE applied to them, while others have the HTML 4.01

Transitional DOCTYPE applied. Although either Transitional DOCTYPE could be used with SharePoint

Server, Strict DOCTYPEs can be problematic because the browser will ignore any deprecated HTML, and

there is a chance that deprecated HTML will be displayed by SharePoint Server. It is important to notice

that SharePoint sites will NOT validate through any W3C checker with either DOCTYPE assigned.

However, though the pages will not validate, the design experience will be more reliable if a valid

DOCTYPE is used. For the examples in this article, the HTML 4.01 Transitional DOCTYPE is used.

To use the HTML 4.01 Transitional DOCTYPE

In Dreamweaver, click File, and then click New.1.

Select Blank Page, select Page Type: HTML, select Layout <none>, and then click

DocType: HTML 4.01 Transitional.

2.

Click Create.3.

Dreamweaver opens a blank HTML page with the following code.



Html Copy Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=

utf-8">

<title>Untitled Document</title>

</head>

<body>

</body>

</html>

From here you can create the remaining HTML. Be careful to follow the W3C guidelines for creating

valid HTML 4.01 Transitional code. For more information about HTML 4.01 and the Transitional

DOCTYPE, see the W3C HTML 4.01 Transitional Specification [ http://www.w3.org/TR/REC-html40/ ] .

The remaining topics in this section focus on specific points related to creating HTML for a SharePoint

design. For more information about creating HTML code, see the MSDN HTML and DHTML Overviews

and Tutorials [ http://msdn.microsoft.com/en-us/library/ms537623(vs.85).aspx ] .

Tables vs. Table-less Design

Another design choice that is often debated is whether an HTML design should use tables for layout or

whether the design should use <DIV> tags with CSS. Historically, all HTML layouts were created with

tables to enable a rich user interface, but as browsers have evolved so has the support for CSS-based

layouts. Because HTML tables were originally intended to display tabular information and not to create

layouts, they have begun to fall out of favor with Web designers.

When creating a SharePoint design, consider that the default rendered SharePoint page contains many

tables that are used for layout. This is a result of the underlying ASP.NET controls that are used to

generate the SharePoint user interface. Despite this, it is a best practice to create HTML designs for

SharePoint Server with as few HTML tables as possible. Because of this, the Adventure Works Travel

HTML code uses <DIV> tags and CSS for its entire layout.

SharePoint HTML and Internet Explorer 8

With the release of Internet Explorer 8, there are some special things to consider when creating HTML

for SharePoint Server. Because Internet Explorer 8 displays Internet-facing Web sites in full

"Standards" mode when a DOCTYPE is declared, some of the legacy HTML that is behind the scenes in

SharePoint Server can have problems. To correct these, the Internet Explorer 8 team has created the

following two meta tags:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

The first tag forces a page to render in Internet Explorer 7 mode no matter what, and the second forces

a page to render as Internet Explorer 7 would have rendered it historically. The difference is the

EmulateIE7 meta tag forces the browser to look for a DOCTYPE before rendering in IE7 mode and if it

does not find one, it renders in Quirks Mode. This is the correct behavior for how Internet Explorer 7

used to render pages in SharePoint Server, so the second meta tag should be used whenever possible.

The Adventure Works Travel HTML includes the EmulateIE7 meta tag to ensure that Internet Explorer 8

displays the SharePoint code properly.

For more information about Internet Explorer "Standards Mode", see Introducing IE=EmulateIE7

[ http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx ] .

Slicing the Design Comp into Web Images

Although creating a design comp is useful for understanding how the Web page should look, you can

also use it to create all of the individual images that will be loaded by HTML. In Photoshop, one good

way to break up a single large image into individual Web images is to use the Slice tool. Figure 10

shows the Slice tool in the Tools window.



Figure 10. Slice tool in Photoshop

Following is a general procedure for using the Slice tool to create Web images from a design comp.

To create Web images from a design comp by using the Slice tool

In the Tools window, select the Slice tool.1.

Create rectangular selections around all of the areas that must be made into Web images. Be

sure to hide any Layers that you do not want in the final images (such as mocked-up text that

SharePoint will create). Figure 11 shows the slices in Photoshop.

2.

Figure 11. Slices in Photoshop

Click File, and then click Save for Web & Devices.3.

With the Slice Select Tool selected, click each slice and select an appropriate Web image format

from the Optimized File Format drop-down list. Typically JPGs should be used for photos with

many colors, and GIFs should be used for artwork and text or images that require transparent

backgrounds. PNGs offer a lot of flexibility, but support for them is limited in older browsers. For

slices that you do not want to turn into images, double-click the slice, and then select Slice

Type: No Image. Figure 12 shows the Save for Web & Devices window and the Slice Select

Tool.

4.

Figure 12. Save for Web & Devices menu and the Slice Select Tool



Copy Code

Click the Save button. Ensure Save as Type is set to Images Only and Slices is set to All

Slices.

5.

Click Save.6.

This creates a folder and saves each of the slices as individual images in the folder.

Creating the Adventure Works Travel HTML

Now that you have created all of the individual Web images, the next step is to code the HTML and CSS

for Adventure Works Travel. As described earlier, Dreamweaver was used to create an HTML 4.01

Transitional HTML file. Then, the rest of the HTML was created, resulting in the HTML code that you can

find in the associated files available for download with this article ( MSDN Sample - Real World

SharePoint Branding [ http://code.msdn.microsoft.com/MsdnRealWorldSpBrand.aspx ] ).

Notice that this HTML uses no tables for layout and instead makes frequent use of <DIV> tags for

segmenting the logical areas of the page. Also notice that this HTML was checked by using the W3C

Markup Validation Service [ http://validator.w3.org/default.aspx ] and is HTML 4.01 Transitional

compliant. For the most part, this HTML is straightforward, with the possible exception of the

ECMAScript (JavaScript) code at the top.

<script type="text/javascript">

function doSearch() {

top.location.href = 'http://search.live.com/results.aspx?q=' +

document.getElementById('livesearch').value + '+site%3A' +

'microsoft.com';



Copy Code

}

</script>

This code takes whatever text is entered into the "livesearch" Input box, sends it to Live Search, and

displays the results in a new browser window when the search button is clicked.

Creating the Adventure Works Travel CSS

Because CSS will be used for all layout design, the HTML code alone will not create an attractive Web

page. The CSS created to style all of the colors, fonts, images, and positions for the elements in the

HTML can be found in the associated files available for download with this article ( MSDN Sample - Real

World SharePoint Branding [ http://code.msdn.microsoft.com/MsdnRealWorldSpBrand.aspx ] ).

This CSS was linked from the Adventure Works Travel HTML file via the following code in the <head>

section.

<link rel="stylesheet" href="style.css" type="text/css">

For more information about creating CSS to style an HTML Web page, see MSDN CSS Reference

[ http://msdn.microsoft.com/en-us/library/ms531209(VS.85).aspx ] .

Testing in Multiple Browsers

Now that all of the HTML, images, and CSS are created, you can test the Web page to ensure that it

looks as similar as possible to the design comp. Figure 13 shows the finished Adventure Works Travel

Web page in Internet Explorer.

Figure 13. Completed Adventure Works Travel Web page in Internet Explorer



Before converting an HTML design into a functional SharePoint site, you should test the design in as

many browsers as possible. By installing Mozilla Firefox, Google Chrome, and Apple Safari for Windows,

it is possible to test a Web design for many different browsing scenarios. One particularly difficult

browser to test is Internet Explorer 6. Because Internet Explorer 6 cannot be installed on the same

computer as Internet Explorer 7 or 8, Microsoft is building a product known as Expression Web Super

Preview [ http://expression.microsoft.com/en-us/dd565874.aspx ] . This free application, which is

currently in beta, can display pages side-by-side using both the Internet Explorer 6 rendering engine

and either Internet Explorer 7 or 8 (depending on which is installed on the computer). Figure 14 shows

the Adventure Works Travel site rendered in both Internet Explorer 6 and Internet Explorer 7 in Super

Preview.

Figure 14. Adventure Works Travel site in Expression Super Preview



Next steps

This concludes part 1 of this two-part article series.

Next step: Read Real World Branding with SharePoint Server 2007 Publishing Sites (Part 2 of 2)


Additional Resources

MSDN Sample - Real World SharePoint Branding

[ http://code.msdn.microsoft.com/MsdnRealWorldSpBrand.aspx ]

•

Real World Branding with SharePoint Server 2007 Publishing Sites (Part 2 of 2)


•

Microsoft Office Online: SharePoint Designer 2007 Help and How-to: Modify the Default

Master Page [ http://office.microsoft.com/en-

us/sharepointdesigner/HA101009061033.aspx ]

•

Understanding and Creating Customized and Uncustomized Files in Windows SharePoint

Services 3.0 [ http://msdn.microsoft.com/en-us/library/cc406685.aspx ]

•

Approaches to Creating Master Pages and Page Layouts in SharePoint Server 2007

[ http://msdn.microsoft.com/en-us/library/dd164422.aspx ]

•

Implementing a Brand in a SharePoint Server 2007 Publishing Site


•

Understanding Field Controls and Web Parts in SharePoint Server 2007 Publishing Sites


•

Adding Code-Behind Files to Master Pages and Page Layouts in SharePoint Server 2007

[ http://msdn.microsoft.com/en-us/library/bb986729.aspx ]

•



Professional SharePoint 2007 Design [ http://www.amazon.com/gp/product/047028580X?

ie=UTF8&tag=msmsdn-

20&linkCode=as2&camp=1789&creative=9325&creativeASIN=047028580X ]

•

Professional SharePoint 2007 Web Content Management Development

[ http://www.amazon.com/gp/product/0470224754?ie=UTF8&tag=msmsdn-

20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0470224754 ]

•

Tags:

Community Content



real world branding with sharepoint server 2007 publishing ... · real world branding with...

Documents