Share Point Designer 2010 Level 1

te
op
r
i
al
y
Pl
ea
se
Do
No
tC
Ma
ce
re
n
fe
Re
Microsoft Windows SharePoint

Designer 2010 - Level 1
te
op
r
i
al
y
Microsoft Windows
SharePoint Designer 2010
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce
Ma
Level 1
te
op
r
i
al
y
Microsoft Windows SharePoint

Designer 2010 - Level 1
Part Number: 3587IGEE
Course Edition: 1.0
ACKNOWLEDGMENTS
Project Team
Content Developer: Sivanarul S and Yogesh Manikere Content Manager: Srisai V. K. Graphic Designer: Rajaram S
Project Manager: Balakumar R Media Instructional Designer: Content Editor: Gopalakrishnan V Materials Editor:
Jazeem U. C. Business Matter Expert: Technical Reviewer: Project Technical Support: Mike Toscano
Ma
NOTICES
TRADEMARK NOTICES: Element K and the Element K logo are trademarks of Element K Corporation and its afliates.
tC
DISCLAIMER: While Element K Corporation takes care to ensure the accuracy and quality of these materials, we cannot guarantee their accuracy, and all materials are provided without any warranty
whatsoever, including, but not limited to, the implied warranties of merchantability or tness for a particular purpose. The name used in the data les for this course is that of a ctitious company. Any
resemblance to current or future companies is purely coincidental. We do not believe we have used anyones name in creating this course, but if we have, please notify us and we will change the name in
the next revision of the course. Element K is an independent provider of integrated training solutions for individuals, businesses, educational institutions, and government agencies. Use of screenshots,
photographs of another entitys products, or another entitys product name or service in this book is for editorial purposes only. No such use should be construed to imply sponsorship or endorsement of
the book by, nor any afliation of such entity with Element K. This courseware may contain links to sites on the Internet that are owned and operated by third parties (the External Sites). Element K is
not responsible for the availability of, or the content located on or through, any External Site. Please contact Element K if you have any concerns regarding such links or External Sites.
ce
Microsoft Windows SharePoint Designer 2010 is a registered trademark of Microsoft, Inc. in the U.S. and other countries; the Microsoft products and services discussed or described may be
trademarks of Microsoft. All other product names and services used throughout this course may be common law or registered trademarks of their respective proprietors.
No
Copyright 2010 2010 Element K Corporation. All rights reserved. Screenshots used for illustrative purposes are the property of the software proprietor. This publication, or any part thereof, may not
be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, storage in an information retrieval system, or otherwise, without express written
permission of Element K, 500 Canal View Boulevard, Rochester, NY 14623, (585) 240-7500, (800) 478-7788. Element K Coursewares World Wide Web site is located at
www.elementkcourseware.com.
ii
Do
se
Pl
ea
Re
fe
re
n
This book conveys no rights in the software or other products about which it was written; all use or licensing of such software or other products is the responsibility of the user according to terms and
conditions of the owner. Do not make illegal copies of books or software. If you believe that this book, related materials, or any other Element K materials are being reproduced or transmitted without
permission, please call (800) 478-7788.
Microsoft Windows SharePoint Designer 2010 - Level 1
CONTENTS
te
op
r
i
al
y
MICROSOFT WINDOWS SHAREPOINT

DESIGNER 2010- LEVEL 1
LESSON 1 - GETTING STARTED WITH THE SHAREPOINT DESIGNER
ENVIRONMENT
SharePoint Designer 2010 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
The File Tab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
The Site Tab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
The Sites Category . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
The Pages Category . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
The SharePoint Designer Interface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
The Navigation Pane . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
tC
ce
Ma
A. Identify SharePoint Designer Interface Components . . . . . . . . . . . . . . . . .
No
The Site Summary Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
B. Get Help in SharePoint Designer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

The SharePoint Designer Help Feature. . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Do
re
n
Help Navigation Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

C. Customize the SharePoint Designer Interface . . . . . . . . . . . . . . . . . . . . . . . 14
LESSON 2 - CREATING A SUBSITE
se
SharePoint Designer Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
fe
A. Create a Blank Subsite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Pl
ea
Site Collections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
The Add Item Category. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Re
The Subsites Tab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Contents
iii
CONTENTS
B. Create a Page Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
The Home Tab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
te
op
r
i
al
y
Types of Page Views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

The Insert Tab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
The Layout Tab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

The View Tab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
The Master Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

The Layers Pane . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Page Size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Ma
C. Add Content to a Master Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

Content Regions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
The Manage Content Regions Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . 39

The Save Embedded Files Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
tC
Context Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
The Select a Master Page Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
No
ce
The Preview in Browser Option . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
LESSON 3 - ADDING CONTENT TO THE SITE
re
n
A. Add and Format Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Do
The Paste Text Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

The Import Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
The Spelling Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
se
The Font Group . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
fe
The Paragraph Group . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Pl
ea
The Quick Tag Editor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
B. Work with Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Re
The Insert Table Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

Table Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
C. Work with Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
iv
Pictures Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
The Tag Properties Task Pane . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
The src Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
LESSON 4 - FORMATTING A SITE WITH CASCADING STYLE SHEETS
CONTENTS
A. Create an External Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
te
op
r
i
al
y
Cascading Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Types of Cascading Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Cascading Style Sheet Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

The Style Tab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
The New Style Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
The Attach Style Sheet Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
The Apply Styles Task Pane . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Ma
B. Create Internal Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

C. Modify External Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
LESSON 5 - LINKING WEB PAGES
tC
The Manage Styles Task Pane . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
ce
A. Add Hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
No
Hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
The Insert Hyperlink Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Hyperlink States . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
re
n
The Page Properties Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
Do
B. Create a Hotspot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

Hotspots . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
C. Create Bookmark Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
se
Bookmark Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Contents
Pl
ea
Re
fe
The Bookmark Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
CONTENTS
D. Open a Linked Page in a New Browser Window . . . . . . . . . . . . . . . . . . . . . . 124
Behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
te
op
r
i
al
y
The Behaviors Task Pane . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

Types of Behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Types of Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
The Open Browser Window Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

The CSS Properties Task Pane . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
LESSON 6 - ADDING SHAREPOINT COMPONENTS TO THE SITE
Ma
A. Add Lists and Libraries to the Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

SharePoint Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Types of SharePoint Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
SharePoint Document Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
tC
Types of Document Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
B. Add Web Parts to a Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
ce
Web Parts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
No
Web Part Zones. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

The Web Part Properties Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Do
re
n
The Displayed Fields Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
LESSON 7 - AUTOMATING BUSINESS PROCESSES WITH WORKFLOWS

A. Create a Workow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
se
SharePoint Workows. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
fe
WorkFlow Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Pl
ea
Workow Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

The Workow Tab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Re
The Custom Task Wizard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

The Select Users Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
The Dene E-mail Message Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
B. Modify a Workow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
LESSON LABS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
vi
GLOSSARY
CONTENTS
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Contents
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce
Ma
te
op
r
i
al
y
INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
vii
viii
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce
Ma
te
op
r
i
al
y
NOTES
te
op
r
i
al
y
INTRODUCTION
ABOUT THIS COURSE
Ma
If you are taking this course, then either in your professional experience or in your prior study,
you have probably created intranet sites using Microsoft Windows SharePoint Foundation.
You may now want to go a step further, and build sites that emphasize your companys unique
requirements, as well as sites that align themselves with the companys unique brand identity.
In this course, you will use Microsoft Windows SharePoint Designer 2010 to create and
modify a SharePoint site on the SharePoint Foundation platform.
Target Student
tC
No
se
Course Description
Do
re
n
ce
If you have used Microsoft Windows SharePoint Foundation to build Windows SharePoint
sites for your intranet, you may have wondered about the lack of features to customize those
sites. You might prefer a different color scheme or a different layout with a different set of
functionalities. Or, you may need to tailor your site to meet specic brand requirements. But
such extensive customization tasks might prove to be cumbersome with SharePoint Foundation
alone. SharePoint Designer is the answer to these requirements. With an easy to use
WYSIWYG environment, SharePoint Designer helps you to leverage the SharePoint technologies and enables you to create and customize Microsoft SharePoint sites and build
sophisticated application interfaces and workows on the SharePoint platform, without the
need to for low-level application coding.
Pl
ea
fe
This course is intended for web designers and developers, application developers, SharePoint
site owners, and other knowledge workers with SharePoint end-user experience, who want to
use SharePoint Designer to create and customize SharePoint sites, enhance the look and feel of
a SharePoint site, and create dynamic pages using Web Parts and workows.
Re
Course Prerequisites
To benet from this course, you should have basic end-user skills with SharePoint and be
familiar with the general structure and hierarchy of SharePoint sites. You can obtain this level
of knowledge and skill by taking the following New Horizons course:
Microsoft Windows SharePoint Foundation 2010 - Level 1

Recommended, though not required, are the following courses:
Microsoft Windows SharePoint Foundation 2010 - Level 2
Introduction
ix
INTRODUCTION
Web Design with XHTML, HTML, and CSS - Level 1
te
op
r
i
al
y
How to Use This Book

As a Learning Guide
This book is divided into lessons and topics, covering a subject or a set of related subjects. In
most cases, lessons are arranged in order of increasing prociency.
The results-oriented topics include relevant and supporting information you need to master the
content. Each topic has various types of activities designed to enable you to practice the guidelines and procedures as well as to solidify your understanding of the informational material
presented in the course.
As a Review Tool
Ma
At the back of the book, you will nd a glossary of the denitions of the terms and concepts
used throughout the course. You will also nd an index to assist in locating information within
the instructional components of the book.
tC
No
ce
Any method of instruction is only as effective as the time and effort you, the student, are willing to invest in it. In addition, some of the information that you learn in class may not be
important to you immediately, but it may become important later. For this reason, we encourage you to spend some time reviewing the content of the course after your time in the
classroom.
As a Reference
Do
re
n
The organization and layout of this book make it an easy-to-use resource for future reference.
Taking advantage of the glossary, index, and table of contents, you can use this book as a rst
source of denitions, background information, and summaries.
se
Course Objectives
fe
In this course, you will use Microsoft Windows SharePoint Designer 2010 to create and
modify a SharePoint site.
create a new subsite.
add content to a web page.
use Cascading Style Sheets to format a SharePoint site.
link web pages.
add SharePoint components to the site.
automate business processes with workows.
Re
x
Pl
ea
You will:
identify the basic features of the SharePoint Designer environment.
INTRODUCTION
Course Requirements
te
op
r
i
al
y
Hardware
You will need two servers for the classroom, plus one client computer for each student in the
class, plus one client computer for the instructor. For each of these machines, the following
hardware requirements are the minimum suggested for this course:
64-bit, four-core processor, 2.5 GHz minimum per core is required for installing Windows
Server 2008 where Microsoft SharePoint Foundation 2010 will be installed. Other systems
can use a 32bit processor but a 64bit processor will enhance performance.
Pentium IV 1 GHz CPU or higher for client systems.
Minimum of 1 GB of RAM for each client computer.
4 GB RAM for the Windows 2008 Server installation.
1 GB RAM for the Windows Server 2003 installation.
40 GB of free hard disk space for installation of Windows Server 2003.
80 GB of free hard disk space for installation of Windows Server 2008.
40 GB or larger hard-disk drive for each student and instructor computer.
CD-ROM or DVD drive.
VGA or higher video.
Keyboard and mouse.
A display system to project the instructors computer screen.
You need to have an Internet connection because some of the software components are
installed from the Internet.
Internet access for all computers.
Domain Controller/Mail Server
tC
No
Please note that an actual

production environment would
require at least twice as much
available RAM and additional
free disk space for day-to-day
operations.
Although this course was
developed with Windows XP
Professional, client computers
with Windows Vista installed
will work similarly.
Do
re
n
ce
Ma
Software
You can use the instructions

provided in the class setup
section in the course setup
document (enus_084699_
course_setup.htm) to set up
the live environment for
students to practice in class.
Since the class setup
requirements for this course
are very steep, we have also
provided simulations for all
the guided activities in the
course. If you choose to, you
can run the simulations
provided in the Data\
Interactives folder on the CDROM that shipped with this
course to practice the
activities.
Windows Server 2003 Service Pack 2
fe
se
The following software is required for the server that will be used as the classroom domain
controller and mail server.
Microsoft Windows Server 2003, Standard or Enterprise Edition
Pl
ea
SharePoint Foundations Server
Re
The following software is required for the computer that will be used as the SharePoint Foundations server.
Windows Server 2008 with Service Pack 2
Microsoft Windows SharePoint Foundation 2010
Microsoft .NET Framework 3.5 with Service Pack 1
Microsoft SQL Server 2008
Introduction
xi
INTRODUCTION
Student and Instructor Client Computers
The following software is required for the client computers:
Microsoft Windows XP Professional with Service Pack 2

Microsoft .NET Framework 3.5, with Service Pack 1
Microsoft Internet Explorer 8.0
Microsoft Windows SharePoint Designer 2010
Microsoft Office 2010 Professional or Professional Plus
Class Setup
Ma
Since the class setup requirements for this course are complex, simulations are provided for all
the activities in the course. If you choose to, you can run the simulations provided to perform
the activities in class or to review after class. A detailed description of the required setup is
also provided for your reference, and for your use if you prefer to create a live environment
for the class. The classroom environment consists of two Windows Servers: a domain
controller/mail server and a SharePoint server, and one workstation for the instructor and one
for each person in the class.
Complete the following steps to create the domain controller and mail server.
1. Install Microsoft Windows Server 2003, Standard or Enterprise Edition, with the following parameters:
Administrator Password
Workgroup Name
No
DC
!Pass1234
WORKGROUP
Install Windows Server 2003 Service Pack 2. When prompted, restart the computer and
log on as Administrator.
3.
Congure the network settings.

a.
Choose StartControl PanelNetwork ConnectionsLocal Area Connection.
b.
Click Properties, select Internet Protocol (TCP/IP), and click Properties.
c.
Congure the network settings as follows:
d.
Pl
ea
Re
4.
se
2.
IP Address: 192.168.1.200
Subnet Mask: 255.255.255.0
Default Gateway: 192.168.1.200
Preferred DNS Server: 192.168.1.200
Click OK twice, and then click Close.
Install additional Windows components.

a.
xii
Value
Do
re
n
Computer Name
fe
This setup uses Windows

Server 2003 as the operating
system for the Domain
Controller/Mail Server because
with Windows Server 2003
you can use the built-in POP3
service for your mailboxes.
You can also set up the
Domain Controller/Mail Server
on a Windows Server 2008
machine, but in that case you
will also need to install and
congure Exchange Server as
well.
tC
Create the Domain Controller/Mail Server
Parameter
If you choose to, you can
evaluate your understanding of
a particular lesson by taking
the assessment provided in
the CD-ROM. To launch the
assessment, on the screen,
click the Assessment button
and choose the respective
lesson.
te
op
r
i
al
y
ce
You can use the detailed

instructions provided in the
class setup section in the
course setup document (enus_
084699_course_setup.htm) to
set up the live environment for
students to practice the
activities in class. Since the
class setup requirements for
this course are very steep, we
have also provided
simulations for all the guided
activities in the course on the
CD-ROM that shipped with
this course. You can run the
simulations on any Windows
computer to review the activity
after class or as an alternative
to performing the activity as a
group in class. The activity
simulation can be launched
directly from the CD-ROM by
clicking the Interactives button
and navigating to the
appropriate one, or from the
default installed datale
location by opening the C:\
084699Data\Simulations folder
and double-clicking the
appropriate executable (EXE)
le located in the appropriate
activity folder.
Choose StartControl PanelAdd Or Remove Programs.

INTRODUCTION
c.
Verify that Application Server is checked, and check Email Services.
d.
Check Networking Services, and click Details.
e.
Check Domain Name System (DNS) and Windows Internet Name Service
(WINS), and click OK.
f.
Click Next.
g.
If prompted, provide the system les.
h.
When the installation is complete, click Finish, and then close the Add Or Remove
Programs control panel.
Although this course was

developed with Windows XP
Professional, client computers
with Windows Vista Business
and Windows 7 installed will
work similarly.
te
op
r
i
al
y
Click Add/Remove Windows Components.
Promote the server to a domain controller.

Choose StartRun.
b.
Type dcpromo and press Enter.
c.
In the Active Directory Installation wizard, click Next twice.
d.
Verify that Domain Controller For A New Domain is selected and click Next.
e.
Verify that Domain In A New Forest is selected and click Next.
f.
For Domain Name, type ourglobalcompany.com and click Next.
g.
For Domain Default NetBIOS Name, type GLOBAL and click Next.
h.
To accept the default database locations and Shared System Volume, click Next
twice.
i.
Verify that Install And Congure The DNS Server On This Computer And Set
This Computer To Use This DNS Server As Its Preferred DNS Server is selected,
and click Next.
j.
Verify that Permissions Compatible Only With Windows 2000 Or Windows

Server 2003 Operating Systems is selected, and click Next.
k.
For the Restore Mode Password, enter and conrm !Pass1234 and click Next.
l.
Review the settings, and click Next.
tC
No
ce
Ma
a.
re
n
5.
b.
n.
When the computer restarts, log on as Administrator.
Congure DNS.
b.
Expand DCForward Lookup Zonesourglobalcompany.com.
c.
Choose ActionNew Mail Exchanger.
d.
For Fully Qualied Domain Name Of The Mail Server, type

dc.ourglobalcompany.com and click OK.
e.
Choose ActionNew Alias.
f.
For Alias, type mail.
g.
For Fully Qualied Domain Name Of The Target Host, type

dc.ourglobalcompany.com and click OK.
h.
Close the DNS Management Console.
7.
Pl
ea
se
Choose StartAdministrative ToolsDNS.
fe
a.
Re
6.
Do
m. Click Finish and then click Restart Now.
Congure mail services.

a.
Choose StartAdministrative ToolsPOP3 Service.
b.
Right-click DC and choose Properties.
Introduction
xiii
INTRODUCTION
d.
Uncheck Always Create An Associated User For New Mailboxes and click OK.
e.
Select DC and click New Domain.
f.
For Domain Name, type ourglobalcompany.com and click OK.
g.
Expand DC, and click ourglobalcompany.com.
h.
Click Add Mailbox, type administrator and click OK.
i.
If necessary, in the POP3 Service information box, check Do Not Show This Message Again, and click OK.
j.
Close the POP3 Service Management Console.
Create Active Directory user accounts. You can use several different tools to accomplish
this including the Active Directory Users And Computers Administrative Tool and the
net user command in a command prompt.
Password
central
!Pass1234
user01 through user12 (or as

many as required)
!Pass1234
Susan Young
!Pass1234
Bob Wheeler
!Pass1234
!Pass1234
Create mailboxes for all users.
central@ourglobalcompany.com
user01@ourglobalcompany.com
through
user12@ourglobalcompany.com
(or as many as required)
syoung@ourglobalcompany.com
bwheeler@ourglobalcompany.com
mmiller@ourglobalcompany.com
No
ce
Maria Miller
Email Address
tC
Ma
Users Display Name
a.
Open the POP3 Service control panel.
b.
Expand DC and select ourglobalcompany.com.
c.
Click Add Mailbox.
d.
For Mailbox Name, type central
e.
If necessary, in the POP3 Service information box, check Do Not Show This Message Again, and click OK.
f.
Click OK.
g.
Repeat steps c to f for all other user names that you added in the previous step
using the Display Name as the Mailbox Name.
h.
se
Pl
ea
fe
re
n
9.
te
op
r
i
al
y
Verify that Authentication Method is set to Active Directory Integrated.
Do
8.
c.
Close the POP3 Service control panel.
Re
Install Windows Server 2008

Follow these steps to install Windows Server 2008 on the computer that will be used as the
SharePoint Foundations server.
1. Install Microsoft Windows Server 2008, Standard or Enterprise Edition.
2.
xiv
Install Windows Server 2008 Service Pack 2. When prompted, restart the computer and
log on as GLOBAL\Administrator.
INTRODUCTION
Choose StartControl PanelNetwork and Sharing Center.
4.
In the Tasks section, click the Manage network connection link.
5.
Right-click Local Area Connection and choose Properties.
6.
Select Internet Protocol Version 4 (TCP/IPv4).
7.
Click Properties.
8.
Select the Use the following IP address radio button.
9.
Enter the following in the respective text boxes.

IP Address: 192.168.1.201
Subnet Mask: 255.255.255.0
10. Click OK.

11. Click Close.
Ma
12. Close the window.
te
op
r
i
al
y
3.
13. Right-click My Computer and choose Properties.
14. In the Computer name, domain and workgroup settings section, click the change settings link.
15. In the System Properties dialog box, click Change.
ce
17. Click More.
tC
16. In the Computer Name / Domain Changes dialog box, in the Computer Name text
box, type OGC
No
18. In the Primary DNS suffix of this computer text box, type ourglobalcompany.com and
click OK.
20. Click OK.
re
n
19. In the Computer Name / Domain Changes dialog box, in the Member of section, select
the Domain radio button and, in the text box, type ourglobalcompany.com
22. Click OK.
Do
21. In the Windows Security dialog box, type the username as GLOBAL\Administrator and
the password as !Pass1234
23. In the Computer Name / Domain Changes message box, click OK.
25. Close all the windows.
se
24. In the Computer Name / Domain Changes message box, click OK.
Pl
ea
fe
26. In the Microsoft Windows message box, click Restart Now.
Install SQL Server 2008 on Windows Server 2008
Re
Follow these steps to install install SQL Server 2008 on Windows Server 2008.
1. Insert the SQL Server installation CD.
2.
In the SQL Server Installation Center wizard, click the Installation link.
3.
Click the New SQL Server stand-alone installation or add features to an existing
installation link.
4.
In the Setup Support Rules page, click OK.
Introduction
xv
INTRODUCTION
In the Product key page, select the Enter the product key radio button and enter the
product key.
6.
Click Next.
7.
In the Setup Support les page, click Install.
8.
In the Setup Support Rules page, click Next.
9.
In the Feature Selection page, in the Features Section, select the following options.
te
op
r
i
al
y
5.
Database Engine Services
SQL Server Replication
Full Text Search
Analysis Services
Business Intelligence Development Studio
Clients Tools Connectivity
Integration Services
Client Tools Backward Compatibility
Client Tools SDK
Management Tools Basic Management Tools Complete
SQL Client Connectivity SDK
Microsoft Sync Framework
Ma
tC
10. In the Instance Conguration page, verify whether the Default instance radio button is
selected and click Next.
ce
11. In the Instance Conguration page, verify whether the Default instance radio button is
selected and click Next.
No
12. In the Disk Space Requirements page, click Next.
13. In the Server Conguration page, in the Service Accounts tab, in the SQL Server
Agent row, in the Account Name column, from the drop-down list, select <<Browse>>.
re
n
14. In the Select User, Computer or Group dialog box, click Advanced.
Do
15. In the Windows Security message box, type the username as GLOBAL\Administrator and
password as !Pass1234and click OK.
16. In the Select User, Computer or Group dialog box, click Find Now.
18. Click OK.
se
17. From the search results, select Administrator and click OK.
fe
19. In the Server Conguration page, in the Password column, type the domain administrator password.
Pl
ea
20. In the SQL Server Database Engine row, in the Account Name column, select Global\
Administrator and type the domain administrator password.
Re
21. In the SQL Server Analysis Service row, in the Account Name column, select Global\
Administrator and type the domain administrator password.
22. In the SQL Server Integration Services 10.0 row, in the Account Name column, select
Global\Administrator and type the domain administrator password.
23. Click Next.
24. In the Database Engine Conguration page, in the Authentication Mode section, select
the Mixed Mode radio button.
25. Enter and conrm the domain password.
xvi
INTRODUCTION
26. Click Add.
te
op
r
i
al
y
28. In the Windows Security message box, type the domain administrator username and
password and click OK.
31. Click OK.
32. Click Next.
33. In the Analysis Service Conguration page, click Add.
35. In the Windows Security message box, type the domain administrator username and
password and click OK.
39. Click Next.
40. In the Error and Usage Reporting page, click Next.

41. In the Installation Rules page, click Next.
42. In the Ready to Install page, click Install.
43. In the Installation Progress page, click Next.
ce
44. In the Complete page, click Close.
No
45. Close the SQL Server Installation Center window.
tC
38. Click OK.
Ma
re
n
Install Microsoft Windows SharePoint

Foundation 2010 on Windows Server 2008
Do
Follow these steps to install Microsoft Windows SharePoint Foundation 2010 on Windows
Server 2008.
1. Download the Microsoft SharePoint Foundation 2010 setup le to Microsoft Windows
SharePoint Foundation.
3.
On the Microsoft SharePoint Foundation 2010 Start page, under Install, click the
Install Software Prerequisites hyperlink.
4.
On the Welcome to the Microsoft SharePoint Foundation 2010 Products Preparation

Tool page, click Next.
5.
The Microsoft SharePoint Products Preparation Tool installs the following prerequisites:
Pl
ea
Re
se
Run the SharePoint Foundation 2010 setup le.
fe
2.
Web Server (IIS) role
Application Server role
Microsoft .NET Framework version 3.5 SP1
Microsoft Sync Framework Runtime v1.0 (x64)
Microsoft Filter Pack 2.0
Microsoft Chart Controls for the Microsoft .NET Framework 3.5
Introduction
xvii
INTRODUCTION
SQL 2008 R2 Reporting Services
SharePoint 2010 Add-in
Windows PowerShell 2.0
SQL Server 2008 Native Client
Microsoft SQL Server 2008 Analysis Services ADOMD.NET
ADO.NET Data Services Update for .NET Framework 3.5 SP1
A hotx for the .NET Framework 3.5 SP1 that provides a method to support token
authentication without transport security or message encryption in WCF.
Windows Identity Foundation (WIF)
te
op
r
i
al
y
On the License terms for software products page, check the I accept the terms of the
License Agreement(s) check box and click Continue.
7.
On the Installation Complete page, click Finish.
8.
Run the SharePoint Foundation 2010 setup le.
9.
On the Microsoft SharePoint Foundation 2010 page, under Install, click the Install
SharePoint Foundation hyperlink.
Ma
6.
10. On the Read the Microsoft Software License terms page, check the I agree the terms
of the agreement check box and click Continue.
11. In the choose the installation you want page, click Standalone.
tC
12. In the Run conguration Wizard page, verify that the Run the SharePoint Products
Conguration Wizard Now check box is checked and click Close.
13. In the SharePoint Products Conguration Wizard, click Next.
No
15. Click Finish.
ce
14. In the SharePoint Products Conguration Wizard message box, click Yes.
16. Exit Microsoft SharePoint Foundation 2010.
Do
re
n
Congure EMail Settings in Microsoft Windows

SharePoint Foundation 2010
2.
On the left navigation section of the page, in the Central Administration section, click
the System Settings link.
3.
Under the E-Mail and Text Messages (SMS) section, click the Congure outgoing
e-mail settings link.
se
Choose StartAll ProgramsMicrosoft SharePoint 2010 ProductsSharePoint 2010

Central Administration.
fe
1.
5.
In the From address text box, type central@ourglobalcompany.com
6.
In the Reply-to address text box, type central@ourglobalcompany.com and click OK.
7.
Under the E-Mail and Text Messages (SMS) section, click the Congure incoming
e-mail settings link.
8.
Under the Enable sites on this server to receive e-mail? section, select the Yes radio
button.
9.
In the E-mail server display address text box, type ourglobalcompany.com
Pl
ea
In the Outbound SMTP Server text box, type dc.ourglobalcompany.com
Re
4.
10. In the E-mail drop folder text box, type c:\inetpub\mailroot\drop and click OK.
xviii
INTRODUCTION
11. Click GLOBAL\AdministratorSign Out, and then click Yes.
To create a web application and site collection for the instructor:
te
op
r
i
al
y
Create a Web Application and Site Collection for

the Instructor
Choose StartAll ProgramsMicrosoft SharePoint 2010 ProductsSharePoint 2010

Central Administration.
2.
In the Application Management section, click Manage Web Applications.
3.
To create a new web application, in the Web Applications tab, in the Contribute group,
click New.
4.
In the Create New Web Application page, in the IIS Web Site section, in the Name text
box, select the existing text and type OGC
5.
In the Application Pool section, in the Select a security account for this application
pool section, select the Predened radio button.
6.
Click OK.
7.
In the Application Created message box, click the Create Site Collection link.
8.
In the Title text box, type Our Global Company
9.
In the Primary Site Collection Administrator section, next to the User name text box,
click Browse.
tC
Ma
1.
ce
10. In the Select People dialog box, in the Find text box, type Administrator and click
Search.
11. Select Global\administrator and click OK.
No
12. In the Secondary Site Collection Administrator section, next to the User name text
box, click Browse.
13. In the Select People dialog box, in the Find text box, type central and click Search.
15. In the Create Site Collection page, click OK.
Do
re
n
14. Select Global\central and click OK.
16. In the Top Level Site Successfully Created message box, click OK.
se
fe
In the Top Level Site Successfully Created message box, observe that the URL to the top level site
appears. Make a note of the URL to the top level site that appears in the message box. This URL will be
needed in the course activities to access the site.
Pl
ea
Create a Web Application and Site Collection for

Each Student
Re
To create a web application and site collection for each student:

1. In the SharePoint 2010 Central Administration page, in the Application Management
section, click Manage Web Applications.
2.
To create a new web application, in the Web Applications tab, in the Contribute group,
click New.
3.
In the Create New Web Application page, in the IIS Web Site section, in the Name text
box, select the existing text and type OGC1
Introduction
xix
INTRODUCTION
The web application name should be unique for each student. While creating individual web applications for
the students, the web application name should start from ogc1 to ogc12 (or as required).
In the Application Pool section, in the Select a security account for this application
pool section, select the Predened radio button.
5.
Click OK.
6.
In the Application Created message box, click the Create Site Collection link.
7.
In the Title text box, type Our Global Company
8.
In the Primary Site Collection Administrator section, next to the User name text box,
click Browse.
9.
In the Select People dialog box, in the Find text box, type Administrator and click
Search.
te
op
r
i
al
y
4.
10. Select Global\administrator and click OK.
Ma
11. In the Secondary Site Collection Administrator section, next to the User name text
box, click Browse.
12. In the Select People dialog box, in the Find text box, type user01 and click Search.
13. Select Global\user01 and click OK.
14. In the Create Site Collection page, click OK.
tC
15. In the Top Level Site Successfully Created message box, click OK.
ce
In the Top Level Site Successfully Created message box, observe that the URL to the top level site
appears. Make a note of the URL to the top level site that appears in the message box. This URL will be
needed in the course activities to access the site. These URLs should be provided to each student.
No
16. Follow steps 116 to create as many individual web applications and site collections as
there are students in class.
Do
re
n
Congure User Permissions for the Top Level Site of

the Instructor
Click Site Actions and choose Site Permissions.
fe
2.
In the Name column, click the OGC Owners link.
4.
Click New and choose Add Users.
5.
In the Grant Permissions dialog box, in the Users/Groups section, click the Browse
button.
Pl
ea
3.
Re
xx
se
In order to perform the activities in Lesson 7, site access permissions need to be provided to
the following users: Susan Young, Maria Miller and Bob Wheeler. To provide them with
access to the top level site of the instructor, the following steps need to be performed.
1. Launch Internet Explorer and open the top level site created for the instructor using the
URL you noted when the site was created.
6.
In the Select People and Groups - Webpage Dialog dialog box, in the Find text box,
type Susan and click the Search icon.
7.
Select Susan Young and click Add ->.
8.
Similarly, add the users, Bob Wheeler and Maria Miller.
9.
Click OK.
INTRODUCTION
10. In the Grant Permissions dialog box, in the Personal Message text box, type Welcome
to SharePoint. As a team site member, you can view, add, update, and delete items
throughout the team site and click OK.
te
op
r
i
al
y
11. At the top-right corner of the window, click the Global\administrator drop-down list and
choose Sign Out.
Set Up the Instructor and Student Computers

Follow these steps to set up and congure the instructor and student computers:
Install Windows XP Professional with the following settings.
Computer Name:
Students: computer01 through computer12 (or more as required).
Instructor: central
Administrator Password: !Pass1234
Domain: ourglobalcompany.com
IP Address:
Ma
Students: 192.168.1.1 through 192.168.1.12 (or as required)
Instructor: 192.168.1.101
Subnet Mask: 255.255.255.0
Install Windows XP Service Pack 2.
3.
Assign the user as Administrator to the local machine.

b.
Expand Local Users And Groups.
c.
Click Groups.
d.
Double-click Administrators.
e.
Click Add.
f.
Click Advanced.
g.
Click Find Now.
h.
Select the user name for the computer.
i.
Click OK three times.
j.
Close the Computer Management console.
se
fe
Do
Open the Computer Management console.
re
n
a.
No
ce
2.
tC
1.
5.
Install and activate Microsoft Windows SharePoint Designer 2010.
6.
Install Microsoft .NET Framework 3.5 SP1 (Service Pack 1).
Pl
ea
Install and activate Microsoft Office 2010 Professional or Professional Plus.
Re
4.
7.
On the course CD-ROM, run the 084699dd.exe self-extracting le located within. This
will install a folder named 084699Data on your C drive. This folder contains all the setup
and data les that you will use to complete this course.
8.
Congure Microsoft Office Outlook 2010 for the instructor and student systems.
a.
Log on to the GLOBAL domain at each student system as user## (password:

!Pass1234) (at the instructor computer, log on as central).
Introduction
xxi
INTRODUCTION
Open Microsoft Office Outlook 2010.
c.
In the Outlook 2010 Startup wizard, click Next.
d.
Click Next.
e.
Verify that the correct email address is displayed and click Next.
f.
If necessary, check Manually Congure Server Settings, provide the outgoing and
incoming mail server names (dc.ourglobalcompany.com), and click Next.
g.
Click Next and then click Finish.
h.
Restart Microsoft Office Outlook 2010.
i.
When prompted to synchronize RSS feeds, click Yes.
j.
When prompted about Desktop Search, check Do not show this message again, and
click No.
k.
Choose ActionsJunk E-mailJunk E-mail Options.
l.
In the Junk E-mail Options dialog box, select the Safe Senders tab.
te
op
r
i
al
y
b.
n.
In the Junk E-mail Options dialog box, click OK.
o.
Log off.
Central
Bob Wheeler
Maria Miller
Susan Young
No
tC
Similarly, congure Microsoft Office Outlook 2010 in the instructors computer for the
following user logins:
ce
9.
Ma
m. Click Add and in the Add address or domain dialog box, type
central@ourglobalcompany.com and click OK.
List of Additional Files
xxii
Do
se
Pl
ea
Re
fe
re
n
Printed with each activity is a list of les students open to complete that activity. Many activities also require additional les that students do not open, but are needed to support the le(s)
students are working with. These supporting les are included with the student data les on the
course CD-ROM or data disk. Do not delete these les.
LESSON 1
te
op
r
i
al
y
LESSON 1
Lesson Time
45 minutes
Ma
Getting Started with the

SharePoint Designer
Environment
You will:
Identify components of the SharePoint Designer interface.

Get help using the SharePoint Designer help feature.
Customize the SharePoint Designer interface.
No
Do
se
Pl
ea
Re
fe
re
n
ce
tC
In this lesson, you will identify the basic features of the SharePoint Designer environment.
Lesson 1: Getting Started with the SharePoint Designer Environment
LESSON 1
Introduction
te
op
r
i
al
y
The information and skills in this course will enable you to build and customize sites and
subsites in SharePoint Designer. In order to perform those tasks efficiently, it will help you to
have some familiarity with basic features and components of SharePoint Designer. In this lesson, you will identify the basic features of the SharePoint Designer environment.
While working in a new application or piece of software, you could potentially spend a signicant amount of time searching for specic tools and options that you require to perform a task.
You can minimize the time so spent by familiarizing yourself with the user interface of the
software, by using the help system to orient yourself to features you will use, and by customizing the environment to suit your particular work style.
TOPIC A
Ma
Identify SharePoint Designer

Interface Components
tC
To get started with site customization or creation, you need to rst familiarize yourself with
the application you are going to work with. In this topic, you will explore the Microsoft Windows SharePoint Designer interface.
No
re
n
ce
When starting work with a new application, it is essential that you are familiar with its features and functions; else you may never be able to realize the full potential of the application.
It is imperative that you familiarize yourself with the interface elements so that you can access
and work with the tools and options you desire. Microsoft Windows SharePoint Designer has a
unique interface that you must be familiar with in order to customize or build SharePoint sites
with ease.
Do
se
Pl
ea
fe
SharePoint Designer 2010 enables users to create rich web applications without the need to
script code. It provides enhanced customization capabilities that make it very easy for the user
to customize the SharePoint Designer environment to suit specic needs. It contains a redesigned Ribbon interface that helps the user access the various options and tools in the
software. It also consists of two tabs: the File tab and the Site tab. Depending on the object
being selected, contextual tabs are enabled, a special feature of SharePoint Designer that
greatly improves the usability of the application.
The File Tab
The File tab contains various categories for performing basic operations in SharePoint
Designer such as creating a new site, a new page, and controls.
Re
The File Tab
Ma
te
op
r
i
al
y
LESSON 1
Figure 1-1: Different categories on the File tab.
Save
Allows you to save the web pages and websites

you create.
Save As
Allows you to save an existing web page or site

with a different name.
Allows you to save all the web pages that are currently open in the application.
Close Site
Allows you to close the site that is open.
Help
Do
se
Contains options that allow you to perform these

operations:
Create web pages.
Pl
ea
fe
Contains options that allow you to open a page

and also import les.
Re
Add Item
Contains options that allow you to perform these

operations:
Open an existing site.
Create a blank site.
Add a subsite to the main site.
Create a team site.
Create a blog.
re
n
Sites
Pages
No
Save All
tC
Description
ce
Category
Create lists.
Create workows.
Allows you to nd the information regarding the
working of the software.
LESSON 1
Description
Options
Allows you to personalize the working environment of SharePoint Designer. It enables you to
specify language preferences, customize the Ribbon and the Quick Access toolbar, specify security
settings and manage Microsoft Office add-ins.
te
op
r
i
al
y
Category
Exit
Allows you to close the application.
The Site Tab
The various options in the Site tab are arranged in groups on the Ribbon.
Ma
The Site Tab
Figure 1-2: The various groups in the Site tab.
Description
Contains options that enable you to add users or

groups.
Contains options that enable you to:
Preview the site in the browser.
Access the recycle bin.
Specify the general options for the site such as
the language to be used.
Save the site as a template.
Access the administrative web page to perform
administrative tasks for the site.
se
Pl
ea
fe
re
n
Manage
No
Actions
Contains options to rename or delete a site.
Do
Edit
Contains options that allow you to create new

subsites, web part pages, workows, and document
libraries.
ce
New
tC
Group
The Sites Category
The Sites category on the File tab consists of four groups, each of which contains various
options for performing specic functions.
Re
The Sites Category
Ma
Figure 1-3: Groups in the Sites category.
te
op
r
i
al
y
LESSON 1
Open SharePoint Site
Contains the following options.

Open Site: Used to open an existing site of
your choice.
Customize My Site: Used to open the site
which the user has designated as the My Site.
Contains the following options:
New Blank Web Site: Used to create a new
website.
No
New SharePoint Site
tC
Description
ce
Group
Blog: Used to create a blog.

Team Site: Used to create a team site.
More Templates: Used to create websites from
other templates which the user might possess.
Pl
ea
Re
Do

Blank Site: Used to create a new site which is
not based on any master page or template but
just a blank site.
fe
Site Templates
Lists the sites you have opened recently and

allows you to open them instantly.
se
Recent Sites
re
n
Add Subsite to My Site: Used to create a

subsite to your existing site.
The Pages Category
The Pages category consists of two groups, each of which contains various options for performing specic functions.
The Pages Category
Ma
Figure 1-4: Groups in the Pages category.
Group
Description
tC
Lists the recently used pages which are created

using SharePoint Designer and stored on the
server. Used to open a page quickly without having to browse through.
ce
Pages
Consists of two options:
No
Open: Used to open a web page by browsing

and searching for the page in the stored location.
Import Files: Used to import les into
SharePoint Designer.
Do
re
n
Open
te
op
r
i
al
y
LESSON 1
The SharePoint Designer Interface
Pl
ea
Re
6
se
The SharePoint Designer interface consists of three major areas: the Ribbon, the Navigation
pane, and the Summary page. The Navigation pane is an easy to use interface for accessing
various components of a site. It lists all components of the site based on the component type.
The Ribbon changes according to the component selected either in the Summary page or
selected through the Navigation pane. The Summary page provides all information about a
particular component type such as a site page. Another important component of the user interface is the Navigation Bar that allows you to navigate back and forth to your page and also
displays your current position in the site hierarchy.
fe
The SharePoint Designer

Interface
tC
Ma
Figure 1-5: Areas of the SharePoint Designer interface.
The Navigation Pane
te
op
r
i
al
y
LESSON 1
se
Do
No
The Navigation Pane
Pl
ea
Re
fe
re
n
ce
The Navigation pane lists all objects of the site and allows you to create or access all components you need to add to the site. Site objects listed include Lists and Libraries, Workows,
Site Pages, Site Assets, Master Pages, and Subsites. Clicking the site object in the Navigation pane opens the Gallery Page on the right side and provides a list of objects of that
particular component type. It also enables the contextual tab of that particular object. For
example, clicking Subsites enables the Subsites tab, allowing you to edit or create subsites.
Figure 1-6: Site objects listed in the Navigation pane.
LESSON 1
The Site Summary Page
The Site Summary Page consists of various sections each of which lists the various components and characteristics of the website. The Site Information section contains various
information such as the title, description, web address and version of the site. The
Customization section consists of options to edit the site and change the theme of the site.
The Permissions section provides a list of users and permissions awarded to them. The Setting section allows you to specify general settings of the site such as whether to display quick
launch or to enable tree view. The Subsites section lists the subsite of the site.
tC
No
ce
Ma
te
op
r
i
al
y
The Site Summary Page
Figure 1-7: Sections in the Site Summary page.
Do
re
n
How to Open an Existing Site in SharePoint

Designer
Procedure Reference: Open a SharePoint Site
To open a SharePoint site:
2.
Choose Sites and click Open Site.
3.
Open the site.
In the Open Site dialog box, navigate to the desired website and click Open.
Pl
ea
Re
8
se
To launch the application, choose StartAll ProgramsSharePointMicrosoft

SharePoint Designer 2010.
fe
1.
Or, in the Site name text box, type the URL of the site you want to open,
and click Open.
LESSON 1
ACTIVITY 1-1
te
op
r
i
al
y
Exploring the SharePoint Designer Interface
There is a simulated version of this activity available on the CD-ROM that shipped with this course. You can run
this simulation on any Windows computer to review the activity after class or as an alternative to performing the
activity as a group in class. The activity simulation can be launched directly from the CD-ROM by clicking the
Interactives button and navigating to the appropriate one, or from the default installed datale location by opening the C:\084699Data\Simulations\11 folder and double-clicking the executable (EXE) le.
Setup:
Your instructor will provide you with the specic port number for your individual SharePoint
subsites URL.
Ma
Scenario:
You are planning to customize an existing site and also create a subsite for your company.
Your organization has recently provided all web designers with the SharePoint Designer application. However, before you start creating the web page, you wish to get familiar with the user
interface.
How You Do It
1.
a. Choose StartAll Programs

SharePointMicrosoft SharePoint
Designer 2010.
No
ce
Open the SharePoint site.
tC
What You Do
Provide the students with the

port numbers that were noted
when the SharePoint sites
were congured during
classroom setup.
b. In the User Name dialog box, click OK.
Do
re
n
c. In the Welcome to Microsoft Office 2010

dialog box, select the Dont make
changes option and click OK.
d. On the File tab, in the Sites option, click
Open Site.
se
Enter the port number provided by your

instructor.
Pl
ea
Re
fe
e. In the Open Site dialog box, type http://

ogc:[Port Number] and click Open.
LESSON 1
2.
a. Observe that the Ribbon appears at the

top, the Navigation pane on the left and
the Site Summary Page on the right.
Identify different components of the

SharePoint Designer interface.
te
op
r
i
al
y
b. On the Site tab, in the Navigation pane,

click Site Pages.
c. Observe that the Gallery Page on the
right pane lists all the pages in the site.
d. In the Navigation pane, click Master

Pages.
3.
Ma
e. Observe that the Gallery Page on the

right pane lists all the master pages in the
site.
a. On the Site tab, in the Navigation pane,
click All Files.
Preview a page in the browser.
10
tC
No
c. Observe that after the default.aspx page

has opened in the advanced mode of editing, the Ribbon has been enabled.
d. To preview the page in the browser, on
the Ribbon, on the Home tab, in the Preview group, click Preview in Browser.
Do
e. Observe how the default.aspx page is rendered in the browser.

f.
se
Pl
ea
Re
fe
re
n
ce
b. In the All Files gallery page, right-click

default.aspx and choose Edit File in
Advanced Mode.
Close the browser window.
g. On the default.aspx tab, right-click and

choose Close.
h. On the All Files tab, right-click and
choose Close.
LESSON 1
TOPIC B
te
op
r
i
al
y
Get Help in SharePoint Designer
At this point, you should be comfortable with the general layout of the SharePoint Designer
interface. Before you start working on a site, you would probably like to have some in-depth
knowledge of specic tasks. In this topic, you will use SharePoint Designers help feature to
nd out more about a certain task.
You have just got started with SharePoint Designer. You nd that you are not able to proceed
further with a certain task, and you need some help in understanding the functionality. There is
no one in the office available to help you. What will you do? These are the moments when
you will nd SharePoint Designers help feature useful.
Ma
The SharePoint Designer Help Feature
se
Do
No
tC
The SharePoint Designer Help

Feature
Pl
ea
fe
re
n
ce
The SharePoint Designer Help feature acts as a central location where you can learn how to
work with the software and obtain product support information. The SharePoint Designer
Help home page contains a list of topics on SharePoint Designer. You can either browse
through the various topics listed, or search for a specic topic using the Search text box. You
can further rene your search by specifying the type of help content that you requirecontent
either on Office.com or on your computer. You can also use specic tools found on the
SharePoint Designer Help navigation bar to browse through the Help window.
Figure 1-8: The SharePoint Designer Help window.
Re
The Help Menu

The Help menu provides you with options to activate the product, and to see license
information for the product. It also has links to the Microsoft website where you can
nd information related to the latest software updates, the Microsoft privacy statement,
and product support.
Help Navigation Buttons

To browse through SharePoint Designer Help, you can use the buttons on the navigation bar.
11
LESSON 1
Description
Back or Forward
Helps you navigate between the help pages you visited.
Stop
Stops the current page from loading or reloading.
Refresh
Reloads information on the currently displayed page.
Home
Returns you to the home page of SharePoint

Designer Help.
Print
Prints the current help page.
Change Font Size
Changes the font size of the contents of pages.
Show Table of Contents
Displays the contents of help les in a pane on the

left side of the page.
Keep On Top
Keeps the SharePoint Designer Help window on top

of the SharePoint Designer window.
Ma
te
op
r
i
al
y
Button
How to Get Help on SharePoint Designer

Procedure Reference: Get Help on SharePoint Designer
Click the File tab, choose Help and click Microsoft Office Help.
2.
From the Search drop-down list, select the desired resource from which to search.
3.
In the text box, click and type the search keyword.
4.
On the search results page that is displayed, click the desired link.
5.
If necessary, click the Change Font Size button to change the font size of the
contents of the page.
No
re
n
ce
1.
7.
If necessary, click the Home icon to go back to the home page of SharePoint
Designer Help.
Pl
ea
se
Do
If necessary, use the Forward and Back buttons to navigate between pages.
fe
6.
Re
12
tC
To get the required help from SharePoint Designer Help:
LESSON 1
Getting Help on SharePoint Designer
te
op
r
i
al
y
ACTIVITY 1-2
Scenario:
As you continue with your exploration of SharePoint Designer, you want to know how to go
about adding a web page to a site. You are not sure of how to do this task.
1.
How You Do It
Access SharePoint Designer Help.
Ma
What You Do
a. Click the File tab, choose Help and click

Microsoft Office Help.
tC
b. Maximize the SharePoint Designer Help

window.
ce
c. From the Search drop-down list, select All

SharePoint Designer.
a. In the text box, click and type Adding

pages to a SharePoint site
Do
Search for help on how to add pages

to a SharePoint site.
re
n
2.
No
d. Observe the topics listed in the Help

screen.
b. Click Search to start searching.
se
d. Close the SharePoint Designer Help window.
Pl
ea
Re
fe
c. On the search results page that is displayed, click the Create SharePoint site
pages link to view the document.
13
LESSON 1
TOPIC C
te
op
r
i
al
y
Customize the SharePoint Designer

Interface
So far in this lesson, you have identied two important features of the overall SharePoint
Designer environment: its default interface and Help system. Although you certainly should be
able to navigate using the default layout of SharePoint Designer, the default interface of a software package might not always be very comfortable to work with. In this topic, you will
customize the SharePoint Designer interface to suit your own preferences and work style.
Ma
The default interface settings of an application may not always suit your specic requirements.
The tools and panes that you need may not be present in the interface, or there may be tools
that you do not need. Customizing interface elements ensures that you can easily access the
tools that you use frequently and also that your application environment is devoid of other
unwanted tools and commands.
SharePoint Designer Options
No
Do
se
re
n
tC
The SharePoint Designer Options dialog box is used to specify the general options of the
SharePoint Designer software.
ce
SharePoint Designer Options
14
Pl
ea
Re
fe
Figure 1-9: The SharePoint Designer Options dialog box.
LESSON 1
Allows You To
General
Specify general options for working with the application. It contains options to:
Specify le extensions associated with the
application.
Specify network connection settings.
Specify the color scheme.
Manage the screen tip which shows up over
screen elements.
Language
Choose the language in which you want to edit

documents.
Customize Ribbon
Customize the Ribbon according to your needs.

You can add or remove tabs from the Ribbon. Also
you can add or remove commands from the Ribbon.
Quick Access Tool Bar
Include or remove commands from the Quick

Access toolbar.
Add-Ins
Manage Microsoft add-ins.
Trust Center
Specify the privacy and security settings of the

application.
tC
Ma
te
op
r
i
al
y
Tab
No
ce
How to Customize the SharePoint Designer

Interface
Procedure Reference: Add Commands to the Quick Access Toolbar
re
n
To add commands to the Quick Access toolbar:
2.
In the SharePoint Designer Options dialog box, from the Choose commands
from drop-down list, select the tab which contains the command you want to add.
3.
In the list box, select the command.
4.
To add the command to the Quick Access toolbar, click Add.
se
Click OK.
Pl
ea
5.
Do
To open the SharePoint Designer Options dialog box, from the Customize
Quick Access Toolbar drop-down list, select More Commands.
fe
1.
Procedure Reference: Remove Commands from the Quick Access Toolbar
Re
To remove commands from the Quick Access toolbar:

1.
2.
In the SharePoint Designer Options dialog box, in the Customize Quick Access
Toolbar list box, select the option you want to remove.
3.
To remove the command from the Quick Access toolbar, click Remove.
4.
Click OK.
15
LESSON 1
Procedure Reference: Add Commands to the Ribbon
To add commands to the Ribbon:
2.
In the SharePoint Designer Options dialog box, select Customize Ribbon.
3.
From the Choose commands from drop-down list, select the option which contains the command you want to add to the Ribbon.
4.
From the Customize the Ribbon drop-down list, select the option to which you
want to create a new group.
5.
Below the Customize the Ribbon drop-down list, in the list box, select the tab to
which you want to create a new group and click New Group.
6.
Right-click New Group (Custom) and choose Rename.
7.
In the Rename dialog box, in the Display name text box, type the desired name
of the group.
8.
Below the Choose commands from drop-down list, in the list box, select the
command you want to the add to the custom group and click Add.
9.
Add all the commands which you would like to be displayed in the group.
tC
Ma
10. Click OK.
te
op
r
i
al
y
1.
Procedure Reference: Specify User Interface Options
ce
To specify user interface options:
2.
In the SharePoint Designer Options dialog box, in the General tab, in the User
Interface options section, from the Color scheme drop-down list, select the
desired color scheme.
Dont show feature descriptions in ScreenTips
Dont show ScreenTips
Click OK.
Pl
ea
Re
16
Do
fe
4.
From the ScreenTip style drop-down list, select the desired option.
Show feature descriptions in ScreenTips
se
3.
No
From the Customize Quick Access Toolbar drop-down list, select More Commands.
re
n
1.
LESSON 1
ACTIVITY 1-3
te
op
r
i
al
y
Add Commands to the Quick Access Toolbar
What You Do
1.
Ma
Scenario:
While exploring the SharePoint Designer interface, you nd certain commands that you might
use frequently. For ease of access, you decide to group them together on the Quick Access
toolbar.
How You Do It
Add the New ASPX Page command to

the Quick Access toolbar.
a. From the Customize Quick Access

Toolbar drop-down list, select More Commands.
tC
No
ce
b. In the SharePoint Designer Options dialog

box, below the Choose commands from
drop-down list, in the list box, select New
ASPX Page.
c. To add the command to the Quick Access
toolbar, click Add.
a. From the Choose commands from dropdown list, select File Tab.
Do
Add the Open and CSS Properties

commands to the Quick Access
toolbar.
re
n
2.
b. In the list box, select Open.
se
d. From the Choose commands from dropdown list, select Style Tab.
Pl
ea
Re
fe
c. To add the command to the Quick Access

toolbar, click Add.
e. In the list box, select CSS Properties.

f.
To add the command to the Quick Access

toolbar, click Add.
g. Click OK.
17
LESSON 1
Lesson 1 Follow-up
te
op
r
i
al
y
h. Observe that the commands are added to

the Quick Access toolbar.
1.
Ma
In this lesson, you familiarized yourself with the basic elements of the Microsoft Windows
SharePoint Designer environment. You also used the SharePoint Designer help feature to get
information on topics that you werent familiar with. Familiarity with the SharePoint Designer
interface makes it easier for you to work with and get started with developing or customizing a
website.
What items are you likely to search for in Help when you start using SharePoint
Designer?
Answers will vary but may include options for creating a SharePoint site and types of site
templates available.
What do you think are the advantages of customizing the SharePoint Designer environment?
tC
2.
18
No
Do
se
Pl
ea
Re
fe
re
n
ce
Answers will vary but may include to avoid clutter and improve the ease of use.
LESSON 2
Lesson Time
1 hour(s), 15 minutes
Create a page layout.
Add content to a master page.
Lesson 2: Creating a Subsite
No
Do
se
Pl
ea
Re
fe
re
n
ce
tC
You will:
Create a blank subsite.
Ma
Creating a Subsite
In this lesson, you will create a new subsite.
te
op
r
i
al
y
LESSON 2
19
LESSON 2
Introduction
You have explored the SharePoint Designer environment and you are now ready to create and
structure a subsite. In this lesson, you will create a subsite and design a layout for it.
te
op
r
i
al
y
It might be confusing for users to work on a SharePoint site if all the departments in the company were to use the same site for collaboration and interaction. Having a site for each
department in an organization enables collaboration and makes interaction with your colleagues
more efficient and streamlined.
TOPIC A
Create a Blank Subsite
Ma
In this lesson, you will create your own SharePoint site. The rst step is to create a blank
subsite object that you can later customize and populate with content. In this topic, you will
create a subsite.
No
Site Collections
tC
ce
The need for subsites is mostly felt in real world situations, where there would be a top-level
site and numerous subsites. For example, a company might have a top-level site that caters to
the needs of the entire organization and numerous subsites that cater to the different departments in the company. Creating subsites might be vital to meet the needs of the organization
because creating just one site might clutter the site and make for its poor usability.
Do
re
n
A site collection is a collection of websites on a web server. Each site collection consists of a
top-level site and one or more subsites. The top-level site is the main site where administrator
settings for a site collection are changed. The subsite is a website that is stored inside a toplevel site. Both the top-level site and subsites can contain subsites, lists, documents,
discussions, and surveys.
se
Administrator Settings for a Subsite

By default, all subsites in a site collection will have the same administrator settings as
the top-level site. However, you can change the administrator settings for each of the
subsites, independent of the permissions of the top-level site.
20
Pl
ea
Re
fe
Types of Web Pages

There are different types of web pages that help you to display information on the
website. Web pages differ from each other based on their scripting languages. Some of
the commonly used types of web pages are ASP, HTML, and CSS.
Type of Web Page
Description
ASP
Active Server Pages (ASP) is based on a set

of HTML code designed to support
interactivity on a web page.
LESSON 2
Description
CSS
CSS pages are pages based on Cascading

Style Sheets that are used to create structurally
advanced, uid design websites. These pages
provide an immense amount of exibility in
design.
HTML
HTML pages are based on the HyperText

Markup Language (HTML).
te
op
r
i
al
y
Type of Web Page
The Add Item Category
The Add Item Category
tC
No
se
Pl
ea
Re
fe
Figure 2-1: Groups in the Add Item category.
Do
re
n
ce
Ma
The Add Item category consists of three groups each of which contains various options for
performing specic functionality.
21
LESSON 2
Description
Pages
Consists of the following options:

Web Part Page: Used to create a web part
page. A web part page is similar to a web page
but it also contains web part zones into which
you can insert components such as lists which
use information from external resources.
New Page from Master: Used to create a web
page from a master page.
More Pages: Used to create pages of various
formats such as HTML, ASP.net, XML,
Javascript, and CSS pages. It also contains
options to create master pages and even text
les.
te
op
r
i
al
y
Group
Lists
Ma
Calendar: Used to create a calendar list. It is

typically used when a user wants a calendar
view of meetings.
22
tC
No
Do
Pl
ea
Re
fe
Workows
se
re
n
ce
Contacts: Used to create a contact list. It is

typically used when the user wants to manage
his interaction with contacts such as customers.
Custom List: Used to create a custom list
which allows the user to specify the names of
columns.
Tasks: Used to create a list of tasks. It is typically used to manage the tasks of a group of
people involved in a particular project.
Document Library: Used to create a document
library which is a set of documents which you
would like to share with others in your team.
Wiki Page: Used to create a wiki for your
project.
More Lists: Contains options to create additional lists.

List Workow: Used to create a workow that
is associated with a list.
Reusable Workow: Used to create a workow

that can be attached to any list.
Site Workow: Used to create a workow that
is associated with the current site.
Import Visio Workow: Used to import a
workow which is designed in Microsoft Visio
2010.
LESSON 2
The Subsites Tab
Figure 2-2: Groups in the Subsites tab.
The Subsites Tab
te
op
r
i
al
y
The Subsites tab is automatically enabled when you click Subsites in the Navigation pane. It
consists of three groups each containing different options.
Description
New
Contains the Subsite option which allows you to

create a new subsite.
Edit
Contains the following options.

Open Site: Allows you to open a subsite.
Delete Site: Allows you to delete a subsite.
Ma
Group
Rename: Allows you to rename a subsite.
No
Do
re
n
tC

Preview in Browser: Allows you to preview
the subsite in the browser.
Administrator Web Page: Allows you to
access the administrative web page from which
you can perform administrative tasks such as
setting permissions, changing the themes of the
site, and a host of other tasks.
Save as Template: Allows you to save a subsite
as a template.
ce
Manage
Procedure Reference: Create a Subsite

To create a subsite:
3.
On the Ribbon, in the New group, click Subsite.

In the New dialog box, select the text subsite and type the desired name.
In the SharePoint Templates list box, select the desired type of site template.
Re
4.
Pl
ea
2.
Select the Site tab.
fe
1.
se
How to Create a Blank Subsite
5.
Click OK.
6.
In the Site Summary page, in the Site Information section, next to the Title
label, click the <site template name> link and type the desired name.
7.
Next to the Description label, click the <click to enter text> link, type the
description of the site and press Enter.
23
LESSON 2
8.
On the Quick Access toolbar, click Save.
te
op
r
i
al
y
ACTIVITY 2-1
Create a Subsite
Create a subsite.
a. On the Site tab, on the Ribbon, in the

New group, click Subsite.
No
Pl
ea
Re
24
c. If necessary, in the SharePoint Templates

list box, select Team Site.
d. Click OK.
a. Maximize the window.
se
Add general information to the

subsite.
fe
2.
b. In the New dialog box, verify that the text

subsite is selected and type
HumanResources
Do
re
n
ce
1.
How You Do It
tC
What You Do
Ma
Scenario:
You are currently involved in a project that involves creating a subsite for the Human
Resources department of Our Global Company. This subsite should contain pages which display the company news, employee information, company policies, and contact information.
b. On the Team Site site summary page, in

the Site Information section, next to the
Title label, click the Team Site link and
type Human Resources
c. Next to the Description label, click the

<click to enter text> link, type This site
contains the information related to
human resources of OGC and press
Enter.
d. On the Quick Access toolbar, click Save.
LESSON 2
TOPIC B
te
op
r
i
al
y
Create a Page Layout
Now that you have initialized your blank subsite, the next step in developing your site is to
design the layout of the page. In this topic, you will design the page layout.
Its easy to end up with a cluttered and difficult-to-navigate web page when you add elements
to it on an ad hoc basis. Layers are the easiest and most common way of positioning elements
on a web page. By spending a little up-front time planning a page layout, youll have more
professional-looking web pages.
The Home Tab
The Home Tab
Group
Description
Clipboard
Re
Editing
Do
Provides commands that enable you to format a

paragraph with bullets, numbering, indentation,
line spacing, alignment, and justication.
se
Provides commands to preview the page in a

browser. The Preview in Browser drop-down list
allows you to choose the browser in which you
wish to preview the website. It also allows you to
specify the size of the browser window.
Pl
ea
Preview
Provides commands that help apply font types,

size, color, clear formatting, bold, and other formatting options.
re
n
Paragraph
Provides commands for cutting and pasting components.
fe
Font
No
ce
Figure 2-3: Groups in the Home tab.
tC
Ma
When you open a site page or any other le on the site in the edit mode, the Home, Insert,
Layout, Style, and View tabs are enabled. The Home tab contains functional groups that each
contain the most commonly used commands that enable you to format text on websites.
Provides commands that enable you to nd and

replace text in a page and to select specic objects
in a page.
25
LESSON 2
Description
Proong
Provides commands to check, modify, and enhance

textual content in a page with features such as
Spelling and the Thesaurus. It also provides commands to check the compatibility of code with
standards such as XHTML and HTML and also
with browsers. It also contains commands to check
the accessibility of the site.
te
op
r
i
al
y
Group
Types of Page Views
SharePoint Designer enables you to work either in the design view or code view of a page, or
both.
View
Design
Re
Split
tC
No
Pl
ea
fe
Code
se
Figure 2-4: Types of page views.
Do
re
n
ce
Ma
Types of Page Views
Enables You To
Directly manipulate the HTML or XHTML tags of
a web page.
Work on a web page and see an immediate preview of changes that happen in the design.
Work in either code view or design view and
observe the changes in the other view.
The Insert Tab
The Insert Tab
26
The Insert tab enables quick access to different object types, such as tables or pictures, to then
be added to a site.
Figure 2-5: Groups in the Insert tab.
te
op
r
i
al
y
LESSON 2
Description
Tables
Allows you to add a table to a page.
Pictures
Contains commands to add a picture or clip art

image to the site.
Links
Contains commands to create a hyperlink to a web

page, a picture, or an email address. It also contains commands to create bookmarks. After
creating bookmarks, you can add hyperlinks that
lead to the bookmarks.
Data Views & Forms
Contains commands that allow you to add views

which access data from a data source and edit the
views. It also allows you to create forms using
elds from data sources. This will in turn allow
users to submit data.
Controls
Contains commands which allow you to add

HTML tags and form controls, ASP.NET controls,
SharePoint controls, and data sources to your
pages.
Web Parts
tC
No
ce
Ma
Group
Contains commands which allow you to add web

parts and web part zones to pages.
se
Layers
Do
Allows you to add symbols and special characters

to pages.
re
n
Symbols
Pl
ea
Re
fe
Denition:
Layers are containers in a web page and they can be stacked one on top of the other.
You can add images and text to layers. Layers can be placed above or below one
another. Also while designing, you can hide one of the layers and still view the other
layers. Individual layers can be edited, relocated, or deleted without affecting the other
layers.
27
LESSON 2
Ma
te
op
r
i
al
y
Example:
The Layout Tab
The Layout tab enables you to design the layout of a web page. It contains various groups
each of which contains various options to design the layout of a web page.
No
Do
re
n
ce
The Layout Tab
tC
Figure 2-6: Text and images placed in layers.
Figure 2-7: Groups in the Layout tab.
Size
Offset
Re
Arrange
28
Pl
ea
fe
Layers
Contains Commands That Enable You To
se
Group
Create layers. When you click on the Manage

Layers command, the Layers pane is displayed
which provides options to change the ID of the
layer or to set the Z-index.
Resize the height and width of selected components.
Change the position of the selected layer.
Arrange objects in the page. It also contains commands which enable you to send an object either
backward or forward and also wrap text around it.
LESSON 2
The View Tab
te
op
r
i
al
y
The Z-Index of Layers

The Z-index allows you to stack layers one on top of the other. You can also change
the order in which the layers are stacked. Layers with higher values are placed on top
of those with lower values.
The View tab contains various groups which enable you not only to view pages in different
modes but also access various options while designing websites.
Ma
Figure 2-8: Groups in the View tab.
The View Tab
Page Views
Provides options for designers to work in the

design view or the code view of a page, or both.
Workspace
Provides options to display or hide task panes and

also other visual elements such as the border, tags,
margins, padding and so on.
Ruler and Grid
Provides options to display the ruler and grid. Also

provides options which enable you to align objects
to the grid.
No
Do
re
n
The Master Page
tC
Description
ce
Group
se
The Master Page
Pl
ea
Re
fe
Denition:
The master page is an ASP.NET page that enables you to automatically display the
standard elements of a website on all pages. In addition to the standard layout components, such as banners and navigation links, the master page contains at least one
content region tag where editable content on each page can be added.
29
LESSON 2
te
op
r
i
al
y
Example:
Ma
Figure 2-9: Layout components in a master page.
No
The Layers pane is used for creating and managing layers. You can access it by choosing the
Manage Layers command in the Layers group. It consists of various options for creating and
managing layers.
re
n
The Layers Pane
ce
The Layers Pane
tC
Standard Layout Components

Standard layout components are elements that you want displayed on all the pages of a
website. Usually, elements, such as navigation links, the banner image, the logo, and
the footer text, are standard elements present across all the pages of a website. These
standard layout components can be added to the master page, which can be easily
attached to any ASPX page using SharePoint Designer.
Do
se
Pl
ea
Re
fe
The layers pane contains most of the options present in the layers group. Additionally it contains the Draw Layer
option, which enables you to manually draw a layer. Also by right-clicking a layer in the Layers pane, you can
access the context menu which enables you to set the position of the layer.
Figure 2-10: Options in the Layers pane.
30
LESSON 2
Allows You To
Insert Layer
Create a layer.
Draw Layer
Draw a layer on the page at the desired position

and size.
Layer Visibility
Make a layer visible or invisible to suit the needs

of the developer.
Layer Z-Index
Specify the Z-index of the selected layer.
Layer ID
Specify the ID of the layer.
te
op
r
i
al
y
Option
Page Size
Page Size
How to Create a Page Layout
Select the File tab.
2.
Click More Pages.
3.
Click ASPX.
4.
Click Create.
In the New ASPX page dialog box, in the Enter a name for this new ASPX
page text box, enter a name for the web page and click OK.
Pl
ea
5.
fe
1.
se
To add an ASPX page to a website:
Do
re
n
Procedure Reference: Add an ASPX Page to a Website
tC
Figure 2-11: The Modify Page Sizes dialog box.
No
ce
Ma
You can set the size of a web page by using the Modify Page Sizes dialog box. Clicking the
page size in the status bar of the application and choosing Modify Page Sizes enables this dialog box. There are certain predened sizes from which you can choose the desired size. It also
lets you set page size to suit specic needs.
Procedure Reference: Create a Master Page
Re
To create a master page:

1.
Select the File tab.
2.
Select the Add Item category and click More Pages.
3.
Select Master Page and click Create.
4.
In the New master page dialog box, in the Enter a name for this new master
page text box, type the desired name.
31
LESSON 2
5.
Click OK.
Procedure Reference: Create a Page Layout
te
op
r
i
al
y
To create a page layout:

In the Layers pane, click Draw Layer.
2.
Draw a layer at the desired location of the page.
3.
In the Layers pane, right-click layer <number> and choose Positioning.
4.
To specify the width of the layer, in the Position dialog box, in the Location and
size section, in the Width text box, triple-click and type the desired value in pixels.
5.
To specify the height of the layer, in the Height text box, triple-click, type the
desired value in pixels and click OK.
6.
To specify spacing to the left, right, and above and below the layer, in the Left,
Right, Top, and Bottom text boxes, click, type the desired value in pixels and
click OK.
Ma
1.
The spacing above or below the layer species the amount of spacing from the top border or
bottom border of the page. Similarly the spacing to the left or right of the layer species the
spacing between the left border or right border of the page and the layer.
Click the Save button to save the layout.
No
ce
ACTIVITY 2-2
tC
7.
Creating a Master Page Layout
Do
re
n
32
se
Pl
ea
Re
fe
Scenario:
To start off with this project, your graphic designer has given you an image of the website layout. You want to replicate this layout by using layers. As you progress with the development
of the website, you want to make the layout available for all the pages on the site.
1.
Create a new master page.
tC
How You Do It
No
What You Do
ce
Ma
te
op
r
i
al
y
LESSON 2
a. Select the File tab.
Do
re
n
b. In the Add Item category, in the Pages

section, click More Pages.
c. Select Master Page and click Create.
se
e. To select the form element, press Esc and

then press Delete.
Pl
ea
Re
fe
d. In the New master page dialog box, in the

Enter a name for this new master page
text box, type Layout and click OK.
33
LESSON 2
2.
a. Select the Layout tab and click Manage

layers.
Create the top layer.
te
op
r
i
al
y
b. In the Layers pane, click Draw Layer.

c. Draw a layer from the top-left corner of
the page and drag to the right corner of
the page.
d. In the Layers pane, right-click on layer 1

and choose Positioning.
Ma
e. To specify the width of the layer, in the

Position dialog box, in the Location and
size section, in the Width text box, tripleclick and type 991
f.
To specify the height of the layer, in the

Height text box, triple-click and type 117
34
tC
No
h. To specify spacing above the layer, in the

Top text box, triple-click, type 11 and
click OK.
Click outside the layer to deselect it.
se
Do
i.
Pl
ea
Re
fe
re
n
ce
g. To specify spacing to the left of the layer,

in the Left text box, triple-click and type
12
LESSON 2
3.
a. In the Layers pane, click Draw Layer.
Create Layer 2.
te
op
r
i
al
y
b. Below layer 1, starting from the top-left

corner of the page, draw another layer.
c. In the Layers pane, right-click layer 2 and
choose Positioning.
d. In the Position dialog box, in the Location
and size section, in the Width text box,
triple-click and type 181
e. In the Height text box, triple-click and
type 420
In the Left text box, triple-click and type

12
Ma
f.
g. In the Top text box, triple-click, type 132

and click OK.
a. In the Layers pane, click Draw Layer.
Create Layer 3.
ce
4.
tC
h. Click outside the layer to deselect the

selector.
No
b. To the right of layer 2, draw another layer

till the right edge of the page.
Do
re
n

choose Positioning.
se
f.

197
Pl
ea
Re
fe

type 420

and click OK.
selection.
35
LESSON 2
5.
a. Scroll to the right and, in the Layers

pane, click Draw Layer.
Create Layer 4.
te
op
r
i
al
y
b. Scroll to the right and to the right of layer

3, draw another layer.

choose Positioning.

type 420

810
Ma
f.

and click OK.
36
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce

selection.
LESSON 2
6.
a. Scroll to the left and in the Layers pane,

click Draw Layer.
Create the bottom layer.
te
op
r
i
al
y
b. Scroll down, and below layer 2, draw

another layer and drag to the right edge
of the page.

choose Positioning.
f.
Ma

type 20

12

and click OK.
tC
Create five small similar sized layers

on top of layer 2.
a. Draw a small layer on layer 2 such that

the left border of the new layer overlaps
the left border of layer 2.
No
7.
ce
h. Scroll up and click outside the layer to

deselect the selection.
Do
re
n
b. In the Layers pane, right-click layer 6 and

choose Positioning.
se
c. In the Position dialog box, in the Location

e. In the Left text box, triple-click and type

12
Pl
ea
Re
fe
d. In the Height text box, triple-click and

type 35
37
LESSON 2
In the Top text box, triple-click, type 152
and click OK.
Ma
te
op
r
i
al
y
f.
38
tC
No
h. Move each layer down so that they are

evenly arranged one below the other.
i.
Click outside to deselect the layer.
j.
Click the Save button.
Do
se
Pl
ea
Re
fe
You will be learning about the

content regions in the next
topic.
re
n
ce
g. Press Ctrl+C to copy the layer and press

Ctrl+V four times to create four similar
sized layers.
k. In the Microsoft SharePoint Designer

message box, which displays the message
The Master page does not have any content regions defined. Do you want to save
anyway?, click Yes.
l.
In the Microsoft SharePoint Designer

message box, which displays the message
Do you want to add a SharePoint Robots
Meta Tag to the current page?, click No.
LESSON 2
TOPIC C
te
op
r
i
al
y
Add Content to a Master Page
So far, you have created a subsite and also designed the layout of a master page. The next step
would be to add content to the master page so that you apply the same layout to all web pages
in your subsite. In this topic, you will add content to a master page.
Trying to create the same type of layout for all your web pages manually can be time consuming. It would be easier if you can create the layout once and apply the same to all web pages.
With SharePoint Designer, you can create a master page, add content to it, and then create
similar looking site pages using the master page.
Content Regions
No
Do
se
re
n
ce
Example:
Content Regions
tC
Ma
Denition:
A content region is a region that is dened on a master page. It facilitates the addition
of content, which keeps changing with each page. Using content regions while designing websites ensures that the standard elements of a page remain unaltered while at the
same time retaining the designers freedom to work with page-specic content.
Pl
ea
fe
Figure 2-12: A content region defined in a master page.
The Manage Content Regions Dialog Box
Re
The options in the Manage Content Regions dialog box enable you to manage content
regions in an ASPX page.
The Manage Content Regions

Dialog Box
39
te
op
r
i
al
y
LESSON 2
Figure 2-13: Options in the Manage Content Regions dialog box.
Option
Used To
Rename an existing name or to add a new region

name.
Ma
The Region Name text box

The Other regions on this page section
tC
Add a new content region to the page or rename

an existing region. The Add button will be active
when the Content Region dialog box is opened,
but when a region is added, it changes to the
Rename button. To add another content region,
you need to close the dialog box and open it again.
ce
Addand Rename buttons
List all content regions on a master page. It also

allows you to add or remove the content regions
dened on the page.
Edit the region type of the selected content region.
The Remove button
Remove an existing region from an ASPX page.
Do
Navigate among the different content regions in a

page.
re
n
The Go To button
No
The Edit Region Type button
The Save Embedded Files Dialog Box
Pl
ea
Re
40
se
The Save Embedded Files dialog box enables you to save les that are embedded on a web
page. The Embedded les to save section displays the names of les and of the folder you
want to save the les in and the action that needs to be performed for each le. The Picture
preview section allows you to preview a selected image. Using the buttons in this dialog box,
you can rename a le, change the target folder, set an action either to save a le in the website
folder or use the current le, and change the image le type.
fe
The Save Embedded Files

Dialog Box
Figure 2-14: Options in the Save Embedded Files dialog box.
Ma
Context Menus
te
op
r
i
al
y
LESSON 2
No
Do
se
Pl
ea
fe
re
n
ce
Example:
Context Menus
tC
Denition:
A context menu is a menu that appears when you right-click specic elements in the
application window. The options in context menus differ based on the context in which
they are accessed. They act as shortcut options to perform certain tasks because these
options can also be accessed from the Ribbon.
Figure 2-15: The context menu being displayed upon right-clicking a site page.
Re
The Select a Master Page Dialog Box

The Select a Master Page dialog box contains options that enable you to specify the master
page that you want attached to a web page.
The Select a Master Page

Dialog Box
41
te
op
r
i
al
y
LESSON 2
Figure 2-16: Options in the Select a Master Page dialog box.
Option
Enables You To
Default Master Page

(~Masterurl.default.master)
Link the web page to the default master page.
Specic Master Page
Link the web page to the customized master page.
Ma
Custom Master Page

(~Masterurl.custom.master)
Browse to a specic location and select the master

page to which you want to link the web page.
tC
The Preview in Browser Option
No
ce
The Preview in Browser option allows you to preview a web page in a browser. You can
select the browser type, the browser version, and the size of the browser window in which you
want to preview the web page. You can add to or modify the browser list using the Edit
Browser List dialog box.
Do
re
n
The Edit Browser List Dialog Box

The Edit Browser List dialog box enables you to add to and modify the browser list.
It contains the Browsers section, which lists the names of browsers installed on your
system. In the list box, you can choose the browsers that you want to preview in. You
can also add, modify, and remove browsers from the list. The Additional window
sizes section enables you to choose the size of the browser window. The Automatically save page before previewing check box enables you to automatically save the
page once you click the Preview in Browser button.
se
How to Add Content to a Master Page
Pl
ea
fe
Procedure Reference: Add Text to Layers

To add text to layers:
Click inside the layer.
2.
Type the desired text.
Re
1.
Procedure Reference: Format Layers

To format the layers in a master page:
42
1.
Click inside the layer and select the text.
2.
Select the Home tab.
LESSON 2
In the Font group, select the desired formatting options.
4.
In the Paragraph group, select the desired formatting options.
5.
From the Text Highlight Color drop-down list, select More Colors.
6.
In the More Colors dialog box, in the Value text box, type the desired hexadecimal value and click OK.
7.
From the Font Color drop-down list, select the desired color.
te
op
r
i
al
y
3.
Hexadecimal Values
Hexadecimal values, or hex values as they are commonly called, are the most commonly applied color method on the web. Hexadecimal values are equivalent to RGB
values, but use different syntax.
Ma
Hexadecimal values consist of a pound sign (#), followed by any combination of the
integers 0-9 and the letters A through F. There are three pairs of these value combinations: one for each red, green and blue value. They are expressed as #RRGGBB. The
value 00 gives no color value, while FF gives a full red, green, or blue value.
For example, the value #000000 gives no color value for red, green, or blue, and the
background will be rendered blackthe absence of any color.
If the red, green, and blue values are dened in full strength (#ffffff), the page background will be rendered white, which typically marks the presence of all colors.
Procedure Reference: Add Images to a Master Page
re
n
To add images to a master page:
tC
No
ce
The 216 safe colors in the hexadecimal palette are those colors that are represented by combinations
of the following six values: 00, 33, 66, 99, CC, and FF. Since there are six possible values for each of
the three red, green, and blue variables, 6 x 6 x 6 = 216 possible permutations exist. These colors display consistently across different browsers and operating systems. Hexadecimal values are not casesensitive.
2.
Select the Insert tab.
3.
On the Ribbon, in the Pictures group, click Picture.
4.
In the Picture dialog box, select the desired image and click Insert.
5.
In the Accessibility Properties dialog box, in the Alternate text text box, type
the alternate text for the image and click OK.
7.
9.
se
If necessary, in the Save Embedded Files dialog box, click Change Folder.
Re
8.
If necessary, click Browse, and then in the Select Long Description dialog box,
navigate to the required folder and open the le.
Pl
ea
6.
Do
Place the cursor inside the desired layer.
fe
1.
If necessary, in the Change Folder dialog box, select the images folder and click
OK.
10. In the Save Embedded Files dialog box, click OK.
43
LESSON 2
Procedure Reference: Create Content Regions on a Master Page
To create content regions on a master page:
Open a master page or an ASPX page.
2.
Place the insertion point on the web page as desired.
3.
On the Ribbon, in the Master Page group, click Content Regions.
4.
In the Manage Content Regions dialog box, in the Region name text box, type
the name of the content region.
5.
Click Add to create a content region and then click Close.
6.
Save the page.
te
op
r
i
al
y
1.
ACTIVITY 2-3
Ma
Adding Content to a Master Page
tC
a. Click inside layer 6 and type Home
b. Click inside layer 7 and type Employees
se
Pl
ea
fe
Re
44
How You Do It
Do
Add text to the layers.
re
n
1.
No
What You Do
ce
Scenario:
As you progress with the development of the website, you want to add the banner image and
another image to your layout. You will also create the content regions to the master page.
c. Click inside layer 8 and type News

Release
d. Click inside layer 9 and type Downloads
e. Click inside layer 10 and type Contact Us
LESSON 2
2.
Format the layers.
a. Click inside layer 6 at the beginning of the

Home text and select the text.
te
op
r
i
al
y
b. Select the Home tab and, in the Font

group, click the Bold button.
c. In the Paragraph group, click the Center

button.
d. Similarly format the text in layers 7, 8, 9,

and 10.
e. In the Layers pane, select layer2.
From the Text Highlight Color drop-down

list, select More Colors.
Ma
f.
g. In the More Colors dialog box, in the

Value text box, type #3399FF and click
OK.
From the Text Highlight Color drop-down

list, select More Colors.
ce
i.
In the More Colors dialog box, in the

Value text box, type #0066FF and click
OK.
No
j.
tC
h. Select layer6.
se
Apply similar formatting to layers 7, 8, 9,

and 10.
Pl
ea
Re
fe
l.
Do
re
n
k. From the Font Color drop-down list,

select White.
45
LESSON 2
3.
Add the standard images to the layout.
a. Scroll up and, to place the cursor inside

layer 1, click inside layer 1.
te
op
r
i
al
y
b. Select the Insert tab.

c. On the Ribbon, in the Pictures group,
click Picture.
d. Navigate to the C:\084699Data\Creating

a Subsite folder.
e. In the Picture dialog box, select
banner2.JPG and click Insert.
In the Accessibility Properties dialog box,

in the Alternate text text box, type Our
Global Company and click OK.
Ma
f.
g. Scroll to the right and click inside layer 4.
46
On the Ribbon, in the Pictures group,

click Picture.
j.
In the Picture dialog box, select contact

us.JPG and click Insert.
No
tC
i.
se
Do
k. In the Accessibility Properties dialog box,

in the Alternate text text box, type Contact Us and click OK.
Pl
ea
Re
fe
re
n
ce
h. Select the Insert tab.
LESSON 2
4.
Define a content region.
a. Scroll to the left and click inside layer 3.
te
op
r
i
al
y
b. Select the Style tab.

c. On the Ribbon, in the Master Page group,
click Manage Content Regions.
d. In the Manage Content Regions dialog
box, in the Region name text box, type
Content and click Add.
e. Click Close.
f.
Ma
g. In the Microsoft SharePoint Designer

message box, click No.
h. In the Save Embedded Files dialog box,

click Change Folder.
In the Save Embedded Files dialog box,

click OK.
No
ce
j.
In the Change Folder dialog box, select

the images folder and click OK.
tC
i.
Lesson 2 Follow-up
Do
re
n
k. Close the Layout.master page.
Which type of site template will you choose for creating your website? Why?
Pl
ea
fe
1.
se
In this lesson, you created a subsite by dening the layout and content regions. You also saved
the layout page as a master page. This will enable you to have a consistent layout throughout
the pages of your website.
Answers will vary but may include the blog template, since blogs have become a popular
informal mode of sharing information across organizations.
Which types of pages will you create for your organization? Why?
Re
2.
Answers will vary but may include HTML pages and JavaScript for a website that displays
product information. Websites that need to gather information from customers will need
to include forms as well.
47
48
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce
Ma
te
op
r
i
al
y
NOTES
te
op
r
i
al
y
LESSON 3
LESSON 3
Lesson Time
You will:
Add and format text.

Work with tables.
Work with images.
Lesson 3: Adding Content to the Site
No
Do
se
Pl
ea
Re
fe
re
n
ce
tC
In this lesson, you will add content to a web page.
Ma
Adding Content to the Site
49
LESSON 3
Introduction
te
op
r
i
al
y
You have created the layout for the site and are all set to create web pages. The rst thing you
would probably do after dening the layout is to get started with adding content to the web
pages. In this lesson, you will add content to web pages.
All websites exist to provide information in one form or another to a specic audience. It is
imperative that the content you add to a website be relevant and, more importantly, be presented in a manner that it sustains the interest of the visitors to your site. Using SharePoint
Designer, you can easily populate web pages with text, tables, and images, and also format the
pages, enhancing the presentation elements of your website content.
TOPIC A
Ma
Add and Format Text
The focus of this lesson is to add content to pages within your site. Text content is one of the
simplest, most common, and most basic types of content you will add to any page. In this
topic, you will add text to a web page and format it.
The Paste Text Dialog Box
tC
se
Pl
ea
fe
Do
SharePoint Designer provides you with options to format text that is copied from external
applications. The Paste Text dialog box provides various text formatting options that allow
you to address these drawbacks.
re
n
The Paste Text Dialog Box
No
ce
It is a tedious process if you have to type out the same text for a number of web pages. You
can save a lot of time and effort if you can import les into your website or copy text from the
source le to the web page directly. Also, textual content in its default format looks unappealing and may not be readable. SharePoint Designer allows you to add text from a wide range of
text editors and word processors and also format it in the desired manner.
Re
Figure 3-1: Options available in the Paste Text dialog box.
Option
Plain Text
One <pre> formatted

paragraph
50
Description
Pastes all text from source content and replaces any line breaks in source
content with spaces.
Pastes all text within a single preformatted text <pre> tag and retains the
line breaks as in source content.
LESSON 3
Description
Many <pre> formatted

paragraphs
Pastes each paragraph of source content into separate <pre> tags and
retains line breaks.
Normal paragraphs
with line breaks
Pastes all text and retains line breaks as in source content by inserting <br>
tags.
Normal paragraphs
without line breaks
Pastes content in a single paragraph by removing any line breaks in source

content. However, content following empty lines or rows in source content
is placed in separate paragraphs.
te
op
r
i
al
y
Option
The <pre> HTML Tag

The <pre> HTML tag is used to dene preformatted text in a web page. Text
enclosed in <pre> tags is used to preserve both spaces and line breaks while displaying text content on a web page.
ce
The Import Dialog Box
tC
Ma
Paste vs. Paste Text

Applications such as Microsoft Word use style sheets and markup languages to format
text. The Paste option copies text along with the markup and styles, increasing le
size. SharePoint Designer helps you overcome this challenge with the Paste Text
option that launches the Paste Text dialog box, which allows you to have more control
over how text should be copied and pasted. The Paste Text dialog box ensures that the
markup and styles accompanying text are not copied.
No
se
Do
The Import Dialog Box
Pl
ea
Re
fe
re
n
SharePoint Designer enables you to import les located on your computer to a SharePoint site.
You can import les using the Import Files command in the Manage group of the All Files
tab. The Import dialog box not only provides various options such as for adding les and
folders to a website folder, but also allows you to modify the URL of a le and remove existing les from the import list.
Figure 3-2: Options available in the Import dialog box.
51
LESSON 3
The Spelling Dialog Box
SharePoint Designer provides you with options to check for spelling errors in the content that
you create. The Spelling command in the Proong section of the Home tab provides various
spell check options that enable you to check for spelling errors, specify spell checking options,
and set the proong language.
te
op
r
i
al
y
The Spelling Dialog Box
Figure 3-3: Options available in the Spelling dialog box.
Ma
The Spelling dialog box provides you with several options while spell checking a web page.
Ignore
Ignore the current misspelled word.
Ignore All
Ignore all occurrences of the misspelled word.
Change
Replace a word with another from the selection list.
Change All
Replace all occurrences of a misspelled word with another from the selection list.
List a set of suggestions for the word you type in the Change To text box.
Display the Spelling Options dialog box to customize spelling options such
as agging repeated words, specifying a custom dictionary to use, specifying
when to ignore misspelled words, and hiding spelling errors.
re
n
Options
The Font Group
Pl
ea
Re
se
The Font group available on the Home tab provides you with various options to format text in
a SharePoint site. Options include specifying the font family, font size, font color, and basic
font formatting. It also enables you to apply HTML or CSS styles to site content as well as
access the Font dialog box for additional font formatting options such as effects and character
spacing.
fe
The Font Group
No
Suggest
Add the misspelled word to the list of words in the dictionary.
Do
Add
tC
Enables You To
ce
Option
Figure 3-4: Text formatting options available in the Font group.
52
LESSON 3
The Paragraph Group
The Paragraph Group
te
op
r
i
al
y
The Paragraph group available on the Home tab provides various paragraph formatting
options such as indentation, line spacing, and text alignment. It also provides options to insert
hyperlinks and apply borders to select cells or text in the site. The Paragraph group also
enables you to access the Paragraph dialog box that provides options to set alignment, indentation, and paragraph spacing.
Figure 3-5: The paragraph formatting options available in the Paragraph group.
Ma
The Quick Tag Editor
The Quick Tag Editor
tC
ce
The Quick Tag Editor enables you to edit the tag properties of the currently selected tag. You
can access the Quick Tag Editor from the Editing group of the Home tab. It provides you
with options to edit the current tag by altering its attributes, create nested tags by wrapping
tags inside an existing tag, or insert new HTML tags.
How to Add and Format Text

To add a title to a web page:
Do
re
n
Procedure Reference: Add a Title to a Web Page
No
Figure 3-6: Quick Tag Editor options available for the paragraph tag (<p>).
2.
Right-click the page and select Properties to display the Properties dialog box.
3.
In the [Page] Properties dialog box, on the General tab, in the Title text box,
type the desired title for the page.
4.
Click OK.
On the Manage toolbar, click the Preview in Browser button to view the title in
the title bar of the browser window.
Re
6.
Save the web page.
Pl
ea
5.
se
In the Site Pages section, select the desired web page.
fe
1.
Procedure Reference: Rename a Web Page

To rename a web page:
1.
Open the desired web page.
2.
Select the Rename option.
53
3.
In the Web Site pane, right-click the name of the desired web page and
select Rename.
Or, in the Folder List pane, right-click the name of the desired web page
and select Rename.
te
op
r
i
al
y
LESSON 3
Type the required name and press Enter.
Ensure that you type the name with its appropriate le extension.
4.
If necessary, in the Conrm Rename dialog box, check the Dont show me
again check box.
5.
Click Yes.
Procedure Reference: Attach a Master Page to a Web Page

To attach a master page to a web page:
On the Style tab, from the Master Page group, click Attach.
2.
From the drop-down list, select the master page you want to attach to the web
page.
Ma
1.
Procedure Reference: Import Web Pages into a Website

To import web pages into a website:
2.
Click Import Files.
3.
In the Import dialog box, click the desired button.
Click Add File to add a le to the site.

Click Add Folder to add a folder to the site.
Do
If necessary, from the File list, select a le or folder and click Remove to remove
a le from the list.
re
n
4.
No
tC
Choose FilePages.
ce
1.
If necessary, from the File list, select a le or folder and click Modify to change
the path of a le in the list.
6.
In the Import dialog box, click OK.
se
5.
fe
When a web page is imported, the images contained on the web page should also be imported. If
the images are not imported, empty image placeholders are displayed on the web page.
If necessary, move the added le to the desired folder using the Folder List task
pane.
Drag the le to the desired folder.
Pl
ea
Re
7.
Or, cut the le and paste it into the desired folder.
Procedure Reference: Import Content from an External File into a Web Page
To import content from an external le into a web page:
54
1.
Create a new ASPX page or open an existing page.
2.
Choose FilePages.
LESSON 3
Click Import Files.
4.
In the Import dialog box, click Add File.
5.
In the Add File to Import List dialog box, navigate to the desired folder, select
the le to import, and click Open.
te
op
r
i
al
y
3.
The commonly used le types are HTML Files (*.htm, *.html), Rich Text Format
(*.rtf), Text (*.txt), Word 2010 Document (*.docx), and Word 972003 Document
(*.doc).
6.
In the Import dialog box, click OK to import the content of the le into the web
page.
7.
8.
On the Home tab, click the Preview in Browser button to preview the web page
in a browser.
Ma
Procedure Reference: Format Text

To format text on a web page:
1.
2.
Format text.
a. Format text using options available in the Font group on the Home tab.
Format text by changing the style options: Style, Bold, Italic, Underline, and Outside Border.
Format text by using the color options: Highlight and Font Color.
No
Format text using options available in the Paragraph group on the Home
tab.
Format text by using the list options: Numbering and Bullets.
Format text by using the aligning options: Align Text Left, Center,
Align Text Right, Justify, Decrease Indent Position, and Increase
Indent Position.
se
Save and preview the page.
Do
3.
tC
ce
Format text using the font options: Font, Font Size, Increase Font
Size, and Decrease Font Size.
re
n
b.
Procedure Reference: Check for Spelling Errors on a Web Page
Use the options in the Spelling dialog box to do one of the following:
To ignore a misspelled word, click the Ignore button.
To ignore all instances of a misspelled word, click the Ignore All button.
To replace the misspelled word with the suggested word, select a word listed
in the Suggestions section and click Change.
To replace all instances of the misspelled word with the suggested word,
select a word listed in the Suggestions section and click Change All.
To add the selected word to the dictionary, click Add.
Re
2.
On the Home tab, in the Proong group, click Spelling.
Pl
ea
1.
fe
To check for spelling errors on a web page:
55
LESSON 3
3.
Once the spell check is complete, in the Microsoft SharePoint Designer message
box, click OK.
Procedure Reference: Transfer Content from a Source Document to a Web Page
te
op
r
i
al
y
To transfer content from a source document to a web page:

1.
In the source document, select and copy the content you want to transfer.
2.
Open the target web page in SharePoint Designer 2010.
3.
Select the content region on the web page.
4.
Click the right arrow beside the Content (Master) region, and then click Create
Custom Content.
5.
Double-click inside the blank area below Content (Custom).
6.
On the Home tab, click the Paste drop-down list and then click Paste Text.
7.
Paste the content using the options available in the Paste Text dialog box.
Select the One <pre> formatted paragraph option to paste all text within a
single preformatted text <pre> tag and retain the line breaks in source content.
Select the Many <pre> formatted paragraphs option to paste each paragraph of source content into separate <pre> tags and retain line breaks.
Select the Normal paragraphs with line breaks option to paste all text and
retain the line breaks as in source content by inserting <br> tags.
Select the Normal paragraphs without line breaks option to paste content
in a single paragraph by removing any line breaks in source content.
tC
Pl
ea
se
Do
In the Paste Text dialog box, click OK.
fe
Re
56
No
ce
Ma
Select the Plain Text option to paste all text from source content and replace
any line breaks in source content with spaces.
re
n
8.
LESSON 3
Adding Text to a Web Page
te
op
r
i
al
y
ACTIVITY 3-1
Ma
Scenario:
You have a document that contains the latest news releases about your organization. You want
to present this information within the web page layout that you have designed. You would like
to transfer the information from the document to the web page.
What You Do
How You Do It
1.
a. To add an ASPX page to the website,

select the File tab, click More Pages and
then click ASPX.
Create a new ASPX page.
tC
ce
b. To create the new ASPX page, click Create.
No
c. To add a name to the new ASPX page, in

the New ASPX page dialog box, in the
Enter a name for this new ASPX page
text box, type newsrelease and click OK.
Do
re
n
d. In the Microsoft SharePoint Designer

message box, click Yes.
e. To delete the existing tag, press Delete.
b. To display the options available for

attaching a master page, from the Master
Page group, click Attach.
Pl
ea
Re
a. Select the Style tab.
se
Attach the master page to a new

page.
fe
2.
c. To attach the Layout.master page to the

ASPX page, from the drop-down list,
select Layout.master.
57
LESSON 3
te
op
r
i
al
y
d. Observe that the layout specified in the

Layout.master file is applied to the current page.
3.
Open a Word document.
Ma
e. Minimize the SharePoint Designer 2010

application window.
a. To launch the Microsoft Word 2010 application, choose StartAll Programs

Microsoft OfficeMicrosoft Word 2010.
b. Select the File tab and click Open.
tC
No
a. To select the content in the Word file, on

the Home tab, in the Editing group, click
the Select drop-down list and then click
Select All.
b. To copy the text, in the Clipboard group,
click the Copy
button.
se
Pl
ea
fe
Re
58
d. To open the news release.doc file, select

news release.doc and click Open.
Do
Transfer the content of the Word

document to the web page.
re
n
4.
ce
c. Navigate to the C:\084699Data\Adding

Content folder.
c. Close the Microsoft Word 2010 application.

d. On the newsrelease.aspx page, click the
content region, then click the right arrow
beside the Content (Master) region,
and then click Create Custom Content.
LESSON 3
f.
te
op
r
i
al
y
e. Double-click inside the blank area below

Content (Custom).
Delete the text (Content).
g. To display the Paste Text dialog box, on

the Home tab, click the Paste drop-down
list and then click Paste Text.
i.
5.
Ma
h. In the Paste Text dialog box, in the As list

box, select Normal paragraphs without
line breaks.
Click OK to paste the text.
a. To save the page, on the Quick Access

toolbar, click the Save button.
tC
ce
b. To preview the web page, in the Preview

group, click the Preview in Browser button.
No
c. Observe that the newsrelease page opens

in a browser and close the browser window.
Do
se
Pl
ea
Re
fe
re
n
d. Close the newsrelease.aspx page.
59
LESSON 3
ACTIVITY 3-2
te
op
r
i
al
y
Importing Web Pages into a Website
Data Files:
employeecorner.aspx
clara.JPG
nance team1.JPG
Ma
Scenario:
Your team members are helping you to create some of the web pages needed for your subsite.
Once your team members complete developing individual ASPX pages, they send them to you
for integrating them onto the subsite.
b. In the Import dialog box, click Add File.
Do
c. In the Add File to Import List dialog box,

navigate to the C:\084699Data\Adding
Content folder.
d. To import, select the
employeecorner.aspx, clara.JPG, and
finance team1.JPG files.
se
Pl
ea
fe
Re
60
a. To display the Import dialog box, choose

FilePages and click Import Files.
No
ce
Import the web page and associated

assets into the website.
re
n
1.
How You Do It
tC
What You Do
e. To add the web page and images to the

import list, click Open.
f.
In the Import dialog box, click OK.
LESSON 3
2.
Move the images to the images

folder.
a. In the Navigation pane, click the All Files

folder.
te
op
r
i
al
y
b. In the Folder List task pane, select

clara.JPG and finance team1.JPG files.
c. Drag the selected images to the images
folder.
3.
Attach the master page to the

employee corner page.
a. To open the employeecorner.aspx file in

edit mode, in the Folder List task pane,
right-click employeecorner.aspx and
select Edit File in Advanced Mode.
Ma
c. To display the master pages available,

click Attach.
d. To attach a master page for the
employeecorner.aspx page, from the
drop-down list, select Layout.master.
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce
e. In the Match Content Regions dialog box,

click OK.
61
LESSON 3
4.
a. Click before the Welcome to text in the

first line.
Spell check the employee corner

page.
te
op
r
i
al
y
b. On the Home tab, in the Proofing group,

click Spelling.
Ma
c. Observe that the misspelled word

distiction is displayed in the Not in Dictionary text box and the correct word
distinction is displayed in the Change to
text box of the Spelling dialog box.
tC
a. To save the web page, on the Quick

Access toolbar, click the Save button.
Do
b. If necessary, in the Confirm Save message

box, click Yes.
c. To preview the web page, on the Home

tab, click the Preview in Browser button.
se
Pl
ea
fe
Re
62
e. In the Microsoft SharePoint Designer

message box, click OK.
No
Save and preview the employee corner page.
re
n
5.
ce
d. To change the misspelled word, in the

Spelling dialog box, click Change.
d. Close the browser window.

e. Close the employeecorner.aspx page.
LESSON 3
Formatting Text
te
op
r
i
al
y
ACTIVITY 3-3
Before You Begin:

Open the newsrelease.aspx page in edit mode and scroll to the top of the page.
Ma
Scenario:
You notice that the text that is presented on the News Release page looks visually unappealing
and monotonous. So, you decide to make the text look more visually appealing and readable.
You also want to highlight, underline, and change the color of important text and make critical
information stand out from the rest of the content.
How You Do It
1.
a. Click before the News Release text.
Change the style of the header text.
tC
What You Do
No
ce
b. On the Home tab, in the Font group, click

the Paragraph drop-down list.
c. To apply Heading 1 formatting to the text,
select Heading 1 <h1>.
Do
re
n
d. Observe that the text News Release has

been formatted as heading 1 text.
se
e. Change the style of the words News and

Events to Heading 3 <h3>.
Change the style of the subheadings below

the News and Events headings to
Heading 4 <h4>.
Pl
ea
Re
fe
f.
63
LESSON 3
Format the text using the Bold and
Underline options.
a. Scroll up and to the right, and below the

header News Release, click before the
text Our Global, hold down Shift, and
click after the text their management.
te
op
r
i
al
y
2.
b. To apply bold formatting to the selected

text, click the Bold button.
c. To underline the selected text, click the

Underline button.
3.
Change the color of the font.
a. Scroll down, and select the text August

12th.
Ma
b. On the Ribbon, in the Font section, click

the Font Color
drop-down list.
c. Select More Colors, triple-click in the

value text box, and type 6699FF
d. Click OK.
tC
b. Click the Preview in Browser button.
Do
c. Close the browser window.
se
d. Close the newsrelease.aspx page.
Pl
ea
fe
Re
64
a. Click the Save button.
No
re
n
4.
ce
e. Change the color of the text December

14th and July 30th to 6699FF.
LESSON 3
TOPIC B
te
op
r
i
al
y
Work with Tables
In the previous topic, you added text to web pages and formatted it. Some content may be
more effective when it is presented in tables, rather than as simple text. In this topic, you will
work with tables.
Many types of content, such as nancial information, comparative data, and lists, can be
clearly read and understood when they are presented in the form of a table. The same content
when presented as text might become very lengthy and vague. SharePoint Designer allows you
to add tables to web pages and present complex information in a simple manner.
The Insert Table Dialog Box
Ma
The Tables group on the Insert tab enables you to insert and manipulate tables in SharePoint
documents. You can set table properties either by specifying values or by selecting the various
options from the drop-down list in the Insert Table dialog box. Table properties include the
table size, layout, borders, and background.
The Insert Table Dialog Box
tC
No
Do
se
Pl
ea
fe
re
n
ce
The Insert Table dialog box is displayed whenever a table is created. But when you want to modify the table, the
Insert Table dialog box changes to the Table Properties dialog box. Both dialog boxes have the same set of
options.
Figure 3-7: Options available in the Insert Table dialog box.
Re
Table Tools
The Layout contextual tab appears when you insert a table in SharePoint Designer. The Layout tab provides various options that enable you to manage table properties. Options include
inserting or deleting cells, rows, or columns; merging or splitting cells; applying shades and
borders; specifying the cell size and layout; and manipulating table data.
Table Tools
65
Ma
te
op
r
i
al
y
LESSON 3
How to Work with Tables

Procedure Reference: Create a Table
To create a table:
tC
Figure 3-8: Options available on the Layout contextual tab.
2.
On the Insert tab, click Table.
3.
Specify the number of rows and columns using one of the options.
Select the number of rows and columns in the Insert Table drop-down list.
No
Do
Or, in the Insert Table dialog box, in the Size section, specify the number of
rows and columns and click OK.
re
n
ce
1.
Enter and format text in the various table cells as needed.
5.
Add images to the various table cells as needed.
6.
If necessary, format the table.
7.
se
4.
fe
Procedure Reference: Format a Table
1.
2.
Select the desired table.
Re
66
Pl
ea
To format a table using the Table Properties dialog box:
3.
On the Layout contextual tab, from the Properties drop-down list, select Table.
4.
In the Table Properties dialog box, specify the desired settings to customize table
settings.
Enter a value in the Cell padding spin box to apply a cell padding.
Select the Specify height check box and enter a value in the text box to
specify table height.
LESSON 3
Enter a value in the Cell spacing spin box to apply cell spacing.
Specify border settings using the options in the Borders section.

Enter a value in the Size spin box to specify the border size.
Select the border color from the Color drop-down list.
te
op
r
i
al
y
5.
Click Apply and then click OK.
6.
If necessary, on the Quick Access toolbar, click the Save button.
7.
If necessary, on the Quick Access toolbar, click the Preview in Browser button
to view the web page.
ACTIVITY 3-4
Ma
Working with Tables
contactus.aspx
downloads.aspx
termsandconditions.aspx
hremployees.aspx
steve.aspx
nanceteam.aspx
nance team2.jpg
steve2.jpg
susan1.jpg
maria1.jpg
carol1.jpg
linda1.jpg
se
Pl
ea
fe
No
Do
suggestedreading.aspx
re
n
ce
Data Files:
tC
Re
Before You Begin:

1. Open the suggested reading.doc le from the C:\084699Data\Adding Content folder.
2.
Import the suggestedreading.aspx, contactus.aspx, downloads.aspx,

termsandconditions.aspx, hremployees.aspx, steve.aspx, and nanceteam.aspx pages
and the nance team2.JPG, steve2.JPG, susan1.JPG, maria1.JPG, carol1.JPG, and
linda1.JPG images into the Human Resources subsite.
67
LESSON 3
Move the suggestedreading.aspx, contactus.aspx, downloads.aspx,
termsandconditions.aspx, hremployees.aspx, steve.aspx, employeecorner.aspx and
nanceteam.aspx pages to the SitePages folder.
4.
Move all the images to the images folder.
5.
Attach the Layout.master page to the suggestedreading.aspx, contactus.aspx,

downloads.aspx, termsandconditions.aspx, hremployees.aspx, steve.aspx, and
nanceteam.aspx pages.
6.
Close all the pages except for suggestedreading.aspx.
te
op
r
i
al
y
3.
Scenario:
For the Human Resources subsite, you plan to add a web page that lists some of the popular
books on human resource management. One of your colleagues suggests that it would look
better if the information were presented in tabular format.
1.
How You Do It
Create a table.
Ma
What You Do
a. On the suggestedreading.aspx page, in

the paragraph, click after the word reading. and press Enter.
tC
b. To insert a table, on the Insert tab, click

Table.
No
Pl
ea
Re
68
e. On the keyboard, press Tab, and in the

Columns spin box, type 3 and click OK.
a. Switch to the suggested reading.doc file.
se
Add content to the table cells.
fe
2.
d. In the Size section, in the Rows spin box,

type 6
Do
re
n
ce
c. From the table drop-down list, select

Insert Table.
b. From the suggested reading.doc file,

copy the text Book Name and minimize
the window.
c. Restore the suggestedreading.aspx page.

d. In the first row, in the first column, on
the Home tab, in the Clipboard section,
click Paste.
e. Copy and paste content for the rest of the
table from suggested reading.doc.
LESSON 3
3.
Apply borders to the table.
a. Select the table.
te
op
r
i
al
y
b. To display the layout tab, click Layout.

c. On the Layout contextual tab, in the
Table section, from the Properties dropdown list, select Table.
d. In the Table Properties dialog box, in the

Borders section, triple-click the Size spin
box and type 1
e. In the Borders section, from the Color
drop-down list, select More Colors.
To set the border color to blue, in the

More Colors dialog box, in the Value text
box, triple-click, type 000080 and click
OK.
Ma
f.
4.
Apply borders to the table cells.
a. Select the table.
tC
g. In the Table Properties dialog box, click

OK.
No
ce
b. In the Format group, from the Borders

drop-down list, select All Borders.
re
n
c. From the drop-down list, select Borders

and Shading.
Do
d. In the Borders and Shading dialog box, on

the Borders tab, under Setting, click Box.
se
e. In the Width text box, triple-click and

type 1
Click OK.
Pl
ea
Re
fe
f.
69
LESSON 3
Format the header row of the table.
a. In the left corner of the first row, when

the pointer changes to a right arrow near
the cell border, click the first row to
select it.
te
op
r
i
al
y
5.
b. On the Home tab, in the Font group, from

the Style drop-down list, select Heading 3
<h3>.
c. In the Paragraph group, select the Center
option.
6.
b. Click the Preview in Browser button.
Ma
c. Observe the formatted table and close the

browser window.
d. Close the suggestedreading.aspx page.
No
ACTIVITY 3-5
tC
ce
e. Close the suggested reading.doc document.
Do
re
n
Managing Content Using Tables
se
Pl
ea
fe
Before You Begin:

From the C:\084699Data\Adding Content folder, open and minimize the home.doc le.
Re
Scenario:
To enhance the look and feel of the home page of the Human Resources subsite, you plan to
populate it by adding some introductory text and the photo of the HR manager.
70
LESSON 3
What You Do
How You Do It
1.
a. To open the default.aspx file, in the All

Files tab, right-click default.aspx and
select Edit File in Advanced Mode.
te
op
r
i
al
y
Create a table.
b. In the PlaceHolderMain (Custom) content

region, select the line starting with This
site contains information and press
Delete.
c. On the Insert tab, in the Tables group,
click Table and choose Insert Table.
d. In the Size section, in the Rows spin box,

type 1
2.
Ma
e. In the Insert Table dialog box, click OK.

a. Switch to the home.doc file.
Transfer the content from the

home.doc file to the table cell.
tC
b. From the home.doc file, copy the entire

text and select the SharePoint Designer
application.
No
Add an image to the table cell.
a. In the editing window, scroll to the right

and click inside the second cell of the
table.
re
n
3.
ce
c. In the default.aspx page, on the Home

tab, click Paste.
Do
b. To insert the image, on the Insert tab, in

the Pictures group, click Picture.
se
Pl
ea
Re
fe
c. To navigate to the images folder, in the

Picture dialog box, in the Filename text
box, click, type http://ogc:[Port
Number]/HumanResources/images/
carol1.JPG and click Insert.
Replace the [Port Number] with the port number assigned to you.
d. In the Accessibility Properties dialog box,

in the Alternate text text box, type Carol
and click OK.
71
LESSON 3
4.
a. To save the web page, on the Quick

Access toolbar, click Save.
te
op
r
i
al
y
b. In the Site Definition Page Warning dialog box, click Yes.
c. To preview the web page, on the Home

tab, in the Preview group, click the Preview in Browser button.
Work with Images
tC
TOPIC C
Ma
e. Close the default.aspx page.
No
ce
You are now familiar with creating and formatting tables and you have also added an image to
the master page. There may be times when you want to change or edit an image. In this topic,
you will add and format images on web pages.
Pictures Tools
Pl
ea
se
The contextual Picture Tools section provides commands that enable you to modify and
enhance a picture. Selecting a picture automatically enables the Format contextual tab which
contains various groups each with a set of options for manipulating images.
fe
Pictures Tools
Do
re
n
Images form an integral part of any website. And, when building a website, there will be occasions where you will need to make some minor edits or modify some of these images. Instead
of editing the images using a separate image editing software, SharePoint Designer provides
you with image editing tools that enable you to edit these images.
Re
Figure 3-9: Picture manipulation options available on the Format contextual tab.
Group
Link
72
Description
Provides options to create a hyperlink to a web page or an image. Also, it

allows you to create a thumbnail image that links to a selected image.
LESSON 3
Description
Adjust
Provides options to adjust the brightness and contrast of the selected image.
It allows you to make a specic color in an image transparent. Further, you
can convert the image into a different le format.
Effect
Provides options which enable you to apply various effects such as a beveled border to an image or set the color scheme for the selected image.
Arrange
Provides options to adjust the position of images on the page, relative to the
position of other elements on the same page.
Hotspot
Provides options to draw hotspots for linking an image.
Size
Provides options to specify the size of the image.
Picture
Provides an option to access the Picture Properties dialog box, which contains various options to change the general properties of the image.
te
op
r
i
al
y
Group
Ma
The Tag Properties Task Pane
Do
No
tC
The Tag Properties Task Pane
se
fe
re
n
ce
The Tag Properties task pane is a contextual task pane that consists of various properties
grouped under categories that are unique to the selected element of a web page. These categories vary based on whether the selected tag is an HTML tag or an ASPX tag. Some of the
categories unique to ASP.NET controls include Behavior, Data, and Misc. The four buttons at
the top of the Tag Properties task pane allow you to change the way properties are listed.
Pl
ea
Figure 3-10: Options available in the Attributes section of the Tag Properties task
pane.
Re
Categories in the Tag Properties Task Pane for an ASPX Control

Depending on the ASPX control selected, the Tag Properties task pane displays several tag property categories. There are seven categories in all that are related to the
various ASPX controls.
73
LESSON 3
Enables You To
Accessibility
Set any keyboard shortcuts that can be used for the selected ASPX
control.
Appearance
Set appearance properties, such as the font style and color for the
selected ASPX control.
Behavior
Set properties that determine the state of the ASPX control. It also
allows you to set a tooltip for the control.
Data
Bind properties to expressions of the selected ASPX control.
Layout
Set the height and width of the selected ASPX control.
Misc
Set the property of an attribute that is not standards compliant.
Styles
Set styles that get applied when the mouse hovers over an ASPX control.
Ma
The src Attribute
te
op
r
i
al
y
Category
ce
How to Work with Images
tC
The src attribute allows you to change the source of an image. Using the src attribute, you can
swap images by specifying a new path or le name for the image. Specifying a new path
ensures that the other properties, such as the width and the height, of the image remain the
same.
No
Procedure Reference: Replace an Image Using the Tag Properties Task Pane
To replace an image using the Tag Properties task pane:
2.
On the View tab, choose Task PanesTag Properties.
3.
On the Tag Properties task pane, select the src attribute.
4.
In the src attribute, click the browse button.
5.
In the Select File dialog box, navigate to the desired image and click Open to
replace the image.
6.
se
fe
Do
On the web page, select the desired image.
re
n
1.
Pl
ea
Re
An Alternate Method of Replacing an Image

An alternate method to replace an existing image is to delete the existing image and
insert a new image. However, this method will not make the new image inherit the
properties of the old one. The image will contain all the properties of the original
image.
Procedure Reference: Edit an Image
To edit an image:
74
1.
On the web page, select the image to edit.
2.
Edit the image using the options available on the Format contextual tab.
LESSON 3
Adjust the brightness, contrast, transparency, and le type of the image using
the options available in the Adjust group.
Apply a bevel, greyscale, or washout effect to the image using the options in
the Effect group.
Align, rotate, or move the image backward or forward using the options in
the Arrange group.
Specify the size or crop the image to a desired size using the options available in the Size group.
te
op
r
i
al
y
Procedure Reference: Crop an Image

To crop an image:
On the Format contextual tab, in the Size group, click Crop.
2.
Select the part of the image to crop using the crop handles.
3.
Click Crop.
ACTIVITY 3-6
Working with an Image
Ma
1.
tC
3.
steve1.JPG
No
Do
re
n
Data Files:
ce
se
Before You Begin:

Open the employeecorner.aspx page in advanced edit mode.
Pl
ea
Re
fe
Scenario:
You realize that an incorrect image has been placed in the employeecorner.aspx page. You
would like to replace that image with the correct one and also edit the picture so that it
matches the requirements of the web page.
75
LESSON 3
What You Do
How You Do It
1.
a. On the employeecorner.aspx page, select

the image under the heading Employee
of the Month: Steve Miller.
te
op
r
i
al
y
Replace an image.
b. Right-click the image and select Properties.
c. To activate the Tag Properties task pane,

select the image.
d. In the Tag Properties task pane, select

the src attribute and click the Browse
button.
Ma
e. In the Select File dialog box, navigate to

the C:\084699Data\Adding Content
folder.
f.
Select steve1.JPG and click Open.
Crop the replaced image.
76
No
a. On the Format contextual tab, in the Size

group, click Crop.
se
Do
b. Place the mouse pointer at the bottomright corner of the cropping frame and
drag it downward toward the bottom-right
of the picture so that the black border is
excluded.
c. Place the mouse pointer at the top-left
corner of the cropping frame and drag it
upward toward the top-left corner of the
picture so that the black border is
excluded.
d. Click Crop.
Pl
ea
Re
fe
re
n
ce
2.
tC
g. Close the Tag Properties task pane.
LESSON 3
3.
a. On the Quick Access toolbar, click the

Save button.
te
op
r
i
al
y
b. In the Save Embedded Files dialog box,

c. In the Change Folder dialog box, click the

images folder and then click OK.
d. In the Save Embedded Files dialog box,
click OK.
e. On the Home tab, click the Preview in
Browser button.
tC
Lesson 3 Follow-up
Ma
f.
Which option will you use the most to format text that is copied from external applications?
No
1.
ce
In this lesson, you added content to your website. Using SharePoint Designer, you can easily
populate your web pages with text, tables, and images and enhance your website content.
Which feature in SharePoint Designer will you use the most when you create tables in
your web page?
Do
2.
re
n
Answers will vary but may include the normal paragraph with line breaks option of the
Paste Text dialog box as it enables you to maintain line breaks as in source content being
copied. You may then use the options available in the Font and Paragraph groups to format text to suit your needs.
se
Pl
ea
Re
fe
Answers will vary but may include the various options available in the Insert Table dialog
box, especially specifying the number of rows and columns depending on the data you
intend to use, and the table background depending on the theme and colors you use for
your corporate website.
77
78
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce
Ma
te
op
r
i
al
y
NOTES
te
op
r
i
al
y
LESSON 4
LESSON 4
Lesson Time
1 hour(s)
Ma
Formatting a Site with

Cascading Style Sheets
You will:
Create an external style sheet.

Create internal styles.
Modify an external style sheet.
No
Do
se
Pl
ea
Re
fe
re
n
ce
tC
In this lesson, you will use Cascading Style Sheets to format a SharePoint site.
Lesson 4: Formatting a Site with Cascading Style Sheets
79
LESSON 4
Introduction
te
op
r
i
al
y
You are now familiar with adding content to the website and formatting it. Another way of
formatting web pages is through Cascading Style Sheets (CSS). CSS offers great exibility and
ease in customizing web pages and in ensuring consistency in site design and the color
scheme. In this lesson, you will format subsites using CSS.
Applying styles and formatting options to individual pages can be time consuming and may
result in inconsistent output. Using CSS, you can save formatting options and apply them to
multiple pages or to the entire website. A CSS also enables you to rene or format web pages
by applying consistent formatting throughout the website, obviating the need for code-heavy
documents ensuring that your website looks professional.
TOPIC A
Ma
Create an External Style Sheet
In this lesson, you will use Cascading Style Sheets to format a SharePoint site. The rst step is
to create a style sheet and attach it to the master page so that the styles are applied throughout
the site pages. In this topic, you will create an external style sheet.
re
n
Cascading Style Sheets
tC
No
ce
When working on a website, you come across a situation wherein some formatting style needs
to change across all the web pages. This would mean manually duplicating the formatting style
across all the pages on the website. It would be better if just one page is updated and the
change is reected across all web pages. CSS can be used to repeat the same design elements
across a web page or a website. With external style sheets, you can modify and control all the
color and typographical styles for as many pages as necessary from a single style sheet.
se
Do
The Cascading Style Sheet (CSS) specication provides a style language that can control the
appearance of documents written in HTML, XML, or XHTML. It denes display features such
as font types, color, and size, as well as text formatting features such as indentations and tabular presentation. Using CSS, content on web pages can be easily formatted by specifying styles
in one place, then cascading them throughout a page or a site.
Pl
ea
fe
For more information on Cascading Style Sheets and CSS specications, see the CSS section of the World Wide
Web Consortium (W3C) website at www.w3.org/Style/CSS.
Types of Cascading Style Sheets
Re
Cascading Style Sheets are available in one of three typesexternal, internal or embedded,
and inline.
80
LESSON 4
Description
External
The External style sheet is a style sheet in which

styles are dened on a separate page. It has a .css
le extension. It can be applied to multiple pages.
Internal or embedded
The Internal style sheet controls the formatting for

the web page on which it is embedded.
Inline
The Inline style sheet affects only the HTML element (tag) that it is directly applied to.
te
op
r
i
al
y
Style Sheet Type
Sometimes, when more than one formatting option is applied to a block of text, SharePoint Designer applies the
formatting using inline styles.
Ma
Styles
A style is a set of formatting options as dened in a CSS. A style can reside in an external,
inline, or internal style sheet. Styles are available in one of three typesclass-based, elementbased, and ID-based.
Class-based
This style can be applied for one or more elements

on the page. Classes are represented with a . preceding the name.
For example, .Imageborder is a style that you
can create and apply to add a border to an image.
No
Do
Pl
ea
se
This style is applied to names to distinguish an

element from other similar elements. ID-based
styles are identied with a # sign in front of the
style name.
For example, h2#red can be used to identify a
single h2 tag among many h2 tags.
fe
ID-based
This style is applied for every instance of a particular element.

For example, an h2 style formats the content
within all the h2 tags on the web page.
re
n
Element-based
tC
Description
ce
Style Type
Cascading Style Sheet Rules
Re
A CSS rule denes the syntax of a style. A CSS rule can be divided into two parts: the selector and declaration. A selector selects the element to which you want to apply a style. A
declaration has two parts: the property and value. The property of a declaration species a particular characteristic or attribute of the element. The value is an exact specication of the
property. A CSS rule can contain any number of properties each of which should be assigned a
value.
Cascading Style Sheet Rules
81
te
op
r
i
al
y
LESSON 4
Figure 4-1: A CSS style rule.
The Style Tab
The Style tab contains different groups each of which consists of various options to create and
manage CSS styles.
Figure 4-2: Groups in the Style tab.
Group
Description
Provides options which allow you to attach a master page to a page or detach it from a page. It also
contains options to manage the content regions on
the master page and open master pages attached to
the current page.
82
No
Provides options that allow you to manage styles.

Provides options that allow you to set properties
for the page such as the background and margins.
It also contains options that allow you to manage
the CSS properties of the page.
Pl
ea
Re
fe
Properties
Do
Style Application
Provides options to create new styles and apply

them to components. It also contains options to
attach external style sheets to pages.
se
re
n
ce
Master Page
Create
tC
Ma
The Style Tab
LESSON 4
The New Style Dialog Box
The New Style Dialog Box
Ma
te
op
r
i
al
y
The New Style dialog box contains options that enable you to create a new CSS Style.
Figure 4-3: Options in the New Style dialog box.
Selector
Select an HTML element or create an inline style.

You can also name a class or an ID by typing
them out.
Specify the location of the style. It can be on the

current page, in a new style sheet, or in an existing
style sheet.
Category
No
Dene in
tC
Enables You To
ce
Option
Display and set the properties of a category.

Preview the style.
View the declaration part of the CSS rule.
Do
Description
re
n
Preview
Font
Re
Block
Background
Border
se
Category
Description
Pl
ea
fe
Style Categories
The New Style dialog box lists a set of style categories you can use to dene new
styles.
Box
Displays properties related to the font.

Displays properties related to block elements
such as para and headings.
Displays properties related to the background.
Displays properties related to the border such
as the border style and border width for elements such as tables and images.
Displays properties related to the box property
for elements such as para or table.
83
LESSON 4
Description
Position
Displays properties related to the position of

elements.
Layout
Displays properties related to the layout.
te
op
r
i
al
y
Category
List
Displays properties related to lists.
Table
Displays properties related to tables.
The Attach Style Sheet Dialog Box
The Attach Style Sheet dialog box is used to attach an external style sheet to all of the pages
in a site, to selected pages, or to the current page. You can specify the location of the style
sheet in the URL text box or search for a style sheet using the Browse button. The Attach
Style Sheet dialog box allows you to either link or import the style sheet.
tC
Ma
The Attach Style Sheet Dialog

Box
Figure 4-4: Options in the Attach Style Sheet dialog box.
No
Do
re
n
ce
Link vs. Import

A Link is an HTML tag that is used not only to link style sheets but also to link other
pages. Import is a CSS rule that is used to import only style sheets. Generally, when
you use the Import option, the inline style overwrites external and internal styles, and
the internal style overwrites the external style. When you use the Link option, the
external style overwrites the internal style.
The Apply Styles Task Pane
Pl
ea
Re
84
se
The Apply Styles task pane provides you with options to create a new style, attach an external
style sheet, and list all styles available in different categories. The Options drop-down list
allows you to change the category by which all available styles are displayed and also specify
which styles should be displayed in the task pane. A special option in the list is Preview
Background Color, which gives you a preview of how a background color will look once all
styles are applied on the page.
fe
The Apply Styles Task Pane
Figure 4-5: Options in the Apply Styles task pane.
te
op
r
i
al
y
LESSON 4
Ma
How to Create an External Style Sheet

Procedure Reference: Build an External Style Sheet
To build an external style sheet:
2.
On the Ribbon, in the Create group, click New Style.
3.
In the New Style dialog box, in the Dene in drop-down list, select New style
sheet.
4.
Set the properties in the New Style dialog box.
In the Selector drop-down list, type the desired name or select an element.
Choose the desired category and set the desired properties.
To set a background image to a page:

1. In the Category list box, select Background.
re
n
Next to the background-image text box, click Browse.
3.
Navigate to the location of the image.
4.
Select the image and click Open.
5.
Click OK.
Click OK to create the style.
7.
Select the Untitled_1.css tab.

Save the CSS le.
Pl
ea
8.
fe
6.
Do
2.
se
5.
No
tC
Select the Style tab.
ce
1.
Procedure Reference: Add Styles to an Existing Style Sheet
Re
To add styles to an existing style sheet:

1.
2.
On the Ribbon, in the Create group, click New Style.
3.
In the New Style dialog box, from the Dene in drop-down list, select Existing
style sheet.
4.
Click Browse and choose the style sheet to which you are going to add styles.
85
LESSON 4
5.
In the URL drop-down list, verify whether the style sheet you selected appears.
6.

In the Selector drop-down list, type the desired name or select an element.
Click OK to create the style.
te
op
r
i
al
y
7.
Procedure Reference: Attach an External Style Sheet to a Web Page

To attach an external style sheet to a web page:
1.
Open the desired web page or master page.
2.
3.
In the Create section, click Attach Style Sheet.
4.
Specify the location of the style sheet.
In the URL text box, type the path to the style sheet.
Or, click the Browse button and, in the Select Style Sheet dialog box, navigate to the desired style sheet.
5.
Click OK to attach the external style sheet.
6.
Save the master page.
ce
ACTIVITY 4-1
No
Creating an External Style Sheet
tC
Ma
background.JPG
Do
Data Files:
se
re
n
Pl
ea
fe
Before You Begin:

The employeecorner.aspx le is open.
Re
Scenario:
You observe that certain elements, such as headings and para text, get repeated on all pages of
the site. You realize that formatting all headings simultaneously will save you a lot of time.
You would like to create an external style sheet as well as create styles for the headings and
text on the web pages.
86
LESSON 4
What You Do
1.
How You Do It
Display the New Style dialog box.
te
op
r
i
al
y
b. On the Ribbon, in the Create group, click

New Style.
c. In the New Style dialog box, from the

Define in drop-down list, select New style
sheet.
2.
Create an element-based style for

the para element.
a. From the Selector drop-down list, scroll

down and select p.
Ma
b. In the Font category, from the fontfamily drop-down list, scroll down and
select Trebuchet MS.
c. From the font-size drop-down list, select

small.
tC
d. In the Category list box, select Box.
ce
e. In the padding section, uncheck the Same

for all check box.
In the padding section, in the left text
box, click and type 5
No
f.
Do
re
n
g. In the margin section, uncheck the Same

for all check box.
h. In the margin section, in the left text
box, click, type 5 and click OK.
se
To attach the style sheet for the new

style, in the Microsoft SharePoint
Designer message box, click Yes.
j.
Select the Untitled_1.css tab.
Pl
ea
Re
fe
i.
87
LESSON 4
3.
te
op
r
i
al
y
k. Observe that the new style is created in

the page.
a. Select the employeecorner.aspx tab.
Create an element-based style for

the heading 2 element.
Ma
c. On the Ribbon, in the Create group, click

New Style.
d. In the New Style dialog box, from the
Selector drop-down list, scroll down and
select h2.
88
tC
Verify that in the URL drop-down list, the

Untitled_1.css option is selected.
No
f.
Do
g. In the Font category, from the fontfamily drop-down list, scroll down and
h. In the font-size text box, click and type
26
se
Pl
ea
Re
fe
re
n
ce
e. Verify that in the Define in drop-down

list, the Existing style sheet option is
selected.
i.
From the font-weight drop-down list,

select bold.
j.
In the color text box, click and type

#ED8512
k. In the Category list box, select Box.

l.
In the padding section, uncheck the Same

for all check box.
m. In the padding section, in the left text

box, click, type 5 and click OK.
LESSON 4
4.
Apply a background image to the

master page.
a. On the Ribbon, in the Create group, click

New Style.
te
op
r
i
al
y
b. In the New Style dialog box, from the

Selector drop-down list, select body.
c. Verify that in the Define in drop-down

list, the Existing style sheet option is
selected.
d. Verify that in the URL drop-down list, the

Untitled_1.css option is selected.
e. In the Category list box, select Background.
Next to the background-image text box,

click Browse.
Ma
f.
g. Navigate to the 084699Data\Working

with Cascading Style Sheets folder.
Click OK.
No
Do
se
Pl
ea
Re
fe
re
n
ce
i.
tC
h. Select background.JPG and click Open.
89
LESSON 4
5.
a. Select the Untitled_1.css tab.
Save the style sheet.
te
op
r
i
al
y
b. Click the Save button.

c. If necessary, navigate to the http://
ogc:[Port Number]/HumanResources
folder.
d. In the Save As dialog box, from the Save

as type drop-down list, select CSS Files
(*.css).
e. In the File name text box, type style
f.
Click Save.
Ma
g. In the Save Embedded Files dialog box,

90
In the Save Embedded Files dialog box,

click OK.
j.
Close style.css.
No
tC
i.
k. In the employeecorner.aspx page, click

the Close button.
To close the employeecorner.aspx page
without saving the changes, click No.
se
Do
l.
Pl
ea
Re
fe
re
n
ce
h. In the Change Folder dialog box, select

images and click OK.
LESSON 4
ACTIVITY 4-2
te
op
r
i
al
y
Attaching an External Style Sheet to the Master Page
Data Files:
style.css
Ma
Before You Begin:

Overwrite the CSS le in the subsite by importing style.css from the C:\084699Data\Working
with Cascading Style Sheets folder into the All Files folder of the HumanResources subsite.
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce
Scenario:
You have created the external style sheet named style.css. Now, you want to attach the same to
the pages on your subsite. You decide to link the external style sheet to layout.master, so that
all web pages linked to the master page are formatted.
91
LESSON 4
What You Do
1.
How You Do It
Attach the style.css style sheet to

Layout.master.
a. In the Navigation pane, click Site Pages.
te
op
r
i
al
y
b. Open employeecorner.aspx in edit mode.
c. Observe the current formatting of the

heading and text and close
employeecorner.aspx.
d. In the Navigation pane, click Master

Pages and, on the Gallery page, rightclick Layout.master and choose Edit File
in Advanced Mode.
Ma
e. Select the Style tab.
f.
In the Create group, click Attach Style

Sheet.
tC
Select style.css and click Open.
j.
Click OK and then click the Save button.
No
Pl
ea
Re
92
i.
k. In the Microsoft SharePoint Designer

message box, click No.
se
View the changes applied to the

pages.
fe
2.
h. If necessary, navigate to the http://

ogc:[Port Number]/HumanResources
folder.
Do
re
n
ce
g. In the Attach Style Sheet dialog box, click

Browse.
b. Open employeecorner.aspx in edit mode.

c. Observe that the formatting of the heading and the para text has changed and
reflects the styles that you had specified
in style.css.
d. Close the Site Pages tab , then close the
Layout.master page and then close the
Maser Pages tab.
LESSON 4
Create Internal Styles
te
op
r
i
al
y
TOPIC B
In the last topic, you created an external style sheet and attached it to the web pages in your
site. But, there may be times when an individual page might warrant a different look from
other pages. In this topic, you will create an internal style sheet to differentiate an individual
page.
You may need to format a single web page for a number of reasons. The page may need some
unique formatting or you may prefer to test a formatting or a layout option on a page before
you implement it on all the other pages. By creating an internal style sheet, you can apply formatting for a web page and make it stand out from the rest of the pages.
Procedure Reference: Create an Internal Style Sheet

To create an internal style sheet:
1.
2.
Display the New Style dialog box.
On the Style toolbar, click the New Style button.

a. In the Selector drop-down list, type the desired name or select an element.
b.
No
3.
Or, in the Apply Styles task pane, click the New Style link.
ce
tC
Ma
How to Create Internal Styles
5.
If necessary, repeat steps 2, 3, and 4 to create other styles in the internal style
sheet.
Procedure Reference: Apply an Internal Style

To apply an internal style:
Do
Click OK to create a style.
re
n
4.
2.
In the Apply Styles task pane, click the desired style.
Pl
ea
Re
se
Select the element to which you want to apply the style.
fe
1.
93
LESSON 4
ACTIVITY 4-3
te
op
r
i
al
y
Creating an Internal Style Sheet
Before You Begin:

The employeecorner.aspx page is open.
94
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce
Ma
Scenario:
You want to add borders for images and format some text individually on web pages that have
already been formatted using the external style sheet. You are starting with the Employee Corner page.
LESSON 4
What You Do
How You Do It
1.
Create a class-based style for the

border of an image.
te
op
r
i
al
y
b. On the Ribbon, in the Create group, click

Apply Styles.
c. In the Apply Styles task pane, click the
New Style link.
d. In the New Style dialog box, in the Selector text box, after the period, type
imageborder
e. In the Category list box, select Border.
In the border-style section, from the top

drop-down list, select solid.
Ma
f.
g. In the border-width section, in the top

text box, click and type 2
Click OK to create the .imageborder

style.
j.
Observe that the .imageborder style is

listed in the Current Page section of the
Apply Styles task pane.
Do
Apply the .imageborder style.
No
i.
re
n
2.
tC
ce
h. In the border-color section, in the top

text box, click and type #6699FF
a. On the employeecorner.aspx page, select

the first image.
se
c. Similarly, apply the .imageborder style

to the second image on the page.
Pl
ea
Re
fe
b. In the Apply Styles task pane, click

.imageborder.
95
LESSON 4
3.
a. In the Apply Styles task pane, click the

New Style link.
Create a class-based style for highlighting text.
te
op
r
i
al
y
b. In the New Style dialog box, in the Selector text box, after the period, type
fontstyle
c. In the Font category, from the fontfamily drop-down list, scroll down and
d. In the font-size text box, click and type

14
Ma
e. From the font-weight drop-down list,

select bold.
f.
In the color text box, click and type

#6699FF
g. Click OK to create the .fontstyle style.
a. Place the insertion point before the word

Employee, and hold down Shift and click
after Miller to select it.
No
b. In the Apply Styles task pane, click

.fontstyle.
Do
c. Similarly, apply the .fontstyle style to

the text: Team award: The Finance
Team.
d. Save the employeecorner.aspx. page.
Pl
ea
se
re
n
fe
Re
96
tC
Apply the .fontstyle style.
ce
4.
LESSON 4
TOPIC C
te
op
r
i
al
y
Modify External Style Sheets
You are now familiar with the creation of internal and external style sheets. Based on some
specic requirements, you may have to make some changes to the styles in the style sheets. In
this topic, you will modify an external style sheet.
While creating a website, you may have to make a number of modications such as changing
the page order, or rearranging content on web pages. The same holds true for style sheets, too.
You may have an incorrect or incomplete style in the style sheet. Sometimes, styles used earlier might not be needed at a later stage. By modifying the style sheet, you can meet the new
requirements of the website.
Ma
The Manage Styles Task Pane
No
tC
The Manage Styles Task Pane
Do
re
n
ce
The Manage Styles task pane contains options that enable you to manage styles applied to a
web page. The Manage Styles task pane is primarily used to move and arrange styles used on
a web page. It not only provides most of the options available in the Apply Styles task pane
but also enables you to ungroup selectors if they are grouped and turn off the preview feature.
Figure 4-6: Options in the Manage Styles task pane.
se
How to Modify External Style Sheets

Procedure Reference: Modify an External Style Sheet
Open an external style sheet.
To add an internal style to the external style sheet, in the Manage Styles task
pane, drag a style from the Current Page category to the css category.
Re
2.
3.
Pl
ea
1.
fe
To modify an external style sheet:
Modify a style.
a. In the Manage Styles task pane, right-click the desired style and choose
Modify Style.
b.
In the Modify Style dialog box, modify the style.
The Modify Style dialog box has the same options as the Apply Styles dialog box.
97
LESSON 4
If necessary, delete a style.
In the Manage Styles dialog box, select a style and press Delete.
Or, in the Manage Styles task pane, right-click a style and choose Delete.
te
op
r
i
al
y
4.
ACTIVITY 4-4
Modifying an External Style Sheet
Ma
Before You Begin:

The employeecorner.aspx page is open.
98
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce
Scenario:
You are satised with the formatting that you applied to the employee corner page. You want
to follow the same formatting pattern for the rest of the pages on the site. You would like to
make the styles in the internal sheet accessible to the rest of the pages. You also want to make
some adjustments to the border style.
LESSON 4
1.
How You Do It
Move the internal styles to style.css.
a. On the Style tab, in the Create group,

click Manage Styles.
te
op
r
i
al
y
What You Do
b. In the Manage Styles task pane, rightclick the style.css section header and
choose Go To Code.
c. Observe the styles.
d. On the top of the editing window, select

the employeecorner.aspx page.
f.
Ma
e. In the Manage Styles task pane, in the

Current Page section, select
.imageborder, hold down Shift, and
click .fontstyle.
Drag the selected styles to the style.css

category below the existing styles.
tC
g. On top of the editing window, select the

style.css tab and scroll down.
No
Modify a style in the external style

sheet.
a. In the Manage Styles task pane, rightclick .imageborder and choose Modify
Style.
re
n
2.
ce
h. Observe that both internal styles have

been moved to the external style sheet.
Do
b. In the Modify Style dialog box, select the

Border category.
se
d. Save and close style.css.
Pl
ea
Re
fe
c. In the border-color section, in the top

text box, click, type #ED8512 and click
OK to change the border color.
99
LESSON 4
re
n
Lesson 4 Follow-up
Save and close employeecorner.aspx.
No
ce
f.
tC
Ma
te
op
r
i
al
y
e. Observe that the border of the images in

the employee corner page has changed.
1.
Do
In this lesson, you formatted a website using Cascading Style Sheets. CSS offers great exibility and ease in designing effective web pages and ensures that your website looks professional
because of consistent formatting.
When building a website, what do you think are the benefits of using CSS over using
HTML?
Which type of style sheet will you use for your projects?
fe
2.
se
Answers will vary but may include uniformity since the same styles can be easily applied
across pages of the website.
100
Pl
ea
Re
Answers will vary but may include external style sheets because the same style sheet can
be used for multiple pages or sites, minimizing the effort required to create the styles.
LESSON 5
te
op
r
i
al
y
LESSON 5
Lesson Time
You will:
Work with hyperlinks.

Create a hotspot.
Create bookmark links.
Open a linked page in a new browser window.
Lesson 5: Linking Web Pages
No
Do
se
Pl
ea
Re
fe
re
n
ce
tC
In this lesson, you will link web pages.
Ma
Linking Web Pages
101
LESSON 5
Introduction
te
op
r
i
al
y
So far in this course, you have created and formatted web pages. To build a functional website,
you need to link all web pages logically. In this lesson, you will link pages using various
hyperlinks and behaviors.
As you keep adding web pages to your website, it is essential that you link the pages logically
with each other. Otherwise, users will have to type the complete URL of every web page they
want to visit; they could enter an incorrect URL and end up viewing an unintended page.
SharePoint Designer provides you with several options to link web pages.
TOPIC A
Ma
Add Hyperlinks
In this lesson, you will use various techniques to link web pages. Probably the most basic and
most frequently used linking technique is to create a simple hyperlink. In this topic, you will
link the pages of your site by adding hyperlinks.
Do
se
Pl
ea
fe
Re
102
No
Denition:
A hyperlink is a text or an image link on a web page that connects to another resource,
such as another section of the same page or another web page. Hyperlinks can also be
created to downloadable les or to launch an email message. A typical hyperlink is
composed of text or an image that contains the link and the destination address or
URL of the target resource. By default, hyperlinks on a page are shown in blue, underlined text, and a hand cursor appears upon mouse over.
re
n
Hyperlinks
ce
Hyperlinks
tC
The advantage of a website is that you can skip from page to page by just clicking a link. By
adding hyperlinks to your web pages, youll enable users to easily navigate through your site
and quickly locate pertinent information.
LESSON 5
Ma
te
op
r
i
al
y
Example:
Figure 5-1: Text on a web page converted into a hyperlink.
tC
No
ce
Linking URLs
Inside a link is a URL that provides the location of the targeted resource. The syntax
for a URL is protocol://servername/foldername/filename. For a link to
a web page, the protocol is HyperText Transfer Protocol (HTTP). The rest of the URL
tells the browser where to nd the page to load. After the colon comes the name of the
server, host, or domain name that provides the le. Following the server name is the
pathusually a folder and a le name.
Do
re
n
Relative and Absolute Addresses

URL addresses can either be relative or absolute. Relative addresses are used for linking resources that reside within a local web folder structure. For this URL, the protocol
and the server name are omitted and only the path is used. Absolute references are
always used for resources outside your web folder structure. These URLs must be
complete, and contain the protocol, server location, and le path details.
The Insert Hyperlink Dialog Box
se
The Insert Hyperlink Dialog

Box
Pl
ea
Re
fe
You can access the Insert Hyperlink dialog box by clicking Hyperlink in the Links group on
the Insert tab. The various options in the Insert Hyperlink dialog box help you add
hyperlinks to web pages.
103
te
op
r
i
al
y
LESSON 5
Figure 5-2: Options available in the Insert Hyperlink dialog box.
Enables You To
The The Link to section
Link the hyperlink to an existing le or web page, a place in the same document, a new document, or to an email address.
The Text to display text

box
Enter the text for a hyperlink. This is the text that will appear on the web
page as a hyperlink.
The ScreenTip button
Enter a screen tip that will be displayed when you place the mouse pointer
over the hyperlink.
The Bookmark button
Create a hyperlink to a selected bookmark.
The Target Frame button
Select a target frame on a frames page.
The Parameters button
Set hyperlink parameters.
tC
Do
re
n
Hyperlink States
No
ce
Ma
Option
The status of a hyperlink is called the hyperlink state and it is dened by user activity. There
are four different hyperlink states.
Hyperlink
The default state of the hyperlink when it is not selected.
Hovered hyperlink
The dynamic state of the hyperlink when you hover the mouse pointer over
the link and see a pointed nger symbol being displayed.
Re
Visited hyperlink
Pl
ea
Active hyperlink
se
Description
fe
Hyperlink State
The dynamic state of the hyperlink when the mouse pointer is clicked on the
link.
The static state of the hyperlink after it has been clicked.
The Page Properties Dialog Box
The Page Properties Dialog

Box
104
The Page Properties dialog box enables you to set page properties for the web pages you create. You can access the Page Properties dialog box by clicking the Page command on the
Style tab.
te
op
r
i
al
y
LESSON 5
Ma
Figure 5-3: Options available on the General tab of the Page Properties dialog box.
The General tab
Set basic page properties such as the page title, description, and background
sound.
The Formatting tab
Set a background image or background color for the web page. It also has
options to set the font color and color for the various hyperlink states.
The Advanced tab
Set page margins.
The Custom tab
Set and modify the system and user variables for the web page.
The Language tab
Set the language and HTML encoding options for the web page.
To create a text/image hyperlink:
Do
re
n
Procedure Reference: Create a Text/Image Hyperlink
No
How to Add Hyperlinks
tC
Allows You To
ce
Tab
2.
On the Insert tab, click Hyperlink.
3.
In the Insert Hyperlink dialog box, specify the links destination.
To specify a destination within your website, click the Existing File or Web
Page option and select the destination le.
To specify a destination as a specic location in the document, click the

Place in This Document option and select the bookmark location in the
page.
Pl
ea
To specify a destination outside your website, enter the full URL.
Re
4.
se
Select the text or image for which you want to create a hyperlink.
fe
1.
To create a link to a new document that is not yet created, click the Create
New Document option and type the name of the new document.
If desired, add a screen tip.

a. Click the ScreenTip button.
b.
In the Set Hyperlink ScreenTip dialog box, in the ScreenTip text text box,
type the desired text.
105
LESSON 5
c.
Click OK.
In the Insert Hyperlink dialog box, click OK.
6.
If necessary, save and preview the page.
te
op
r
i
al
y
5.
Screen Tips
A screen tip, by providing information about a link, can help Internet Explorer users
navigate through your site. This information is displayed when users hover their mouse
pointer over the link. Note that not all browsers support screen tips. In SharePoint
Designer, you can test a screen tip in Preview mode.
Procedure Reference: Create a Downloadable Hyperlink
To create a downloadable hyperlink:
Import the les that need to be downloaded.
2.
Open the web page where you want to create hyperlinks for the downloadable
les.
3.
From the Folder List task pane, drag the le that needs to go as downloadable
onto the web page.
Ma
1.
If necessary, display a different text for the downloadable link.

a. Open the Edit Hyperlink dialog box.
5.
In the Edit Hyperlink dialog box, in the Text to display text box, type the
desired text you want displayed as a link.
No
b.
ce
4.
tC
Multiple les in the Folder List task pane can be selected and dragged onto the web page.
SharePoint Designer creates links for each of the les separately.
Do
re
n
Downloadable Files
Several le types can be set as downloadable les. Some of the le types include .doc,
.docx, .pdf, .txt, .zip, .rar, .iso, and .wmv.
Procedure Reference: Create an Email Hyperlink
Type the desired email address, including the @ sign, and press Enter. SharePoint
Designer automatically converts any text that contains the @ symbol to an email
hyperlink.
2.
Click email hyperlink.
3.
On the Insert tab, click Hyperlink to open the Edit Hyperlink dialog box.
4.
In the Subject text box, type the desired subject line.
5.
Click OK for the changes to take effect.
6.
Re
106
Pl
ea
fe
1.
se
To create an email hyperlink:
LESSON 5
Procedure Reference: Edit a Hyperlink
To edit a hyperlink:
Select the text or image that contains the link.
2.
Open the Edit Hyperlink dialog box.
3.
Edit the hyperlink.
In the Address text box, type a new address to change the links destination.
te
op
r
i
al
y
1.
Click the Remove Hyperlink button to remove the hyperlink.
4.
Click OK for the changes to take effect.
5.
Procedure Reference: Format Text Hyperlinks Using the Page Properties Dialog
Box
Ma
To format text hyperlinks using the Page Properties dialog box:
2.
On the Style tab, in the Properties group, click Page to open the Page Properties dialog box.
3.
In the Page Properties dialog box, click the Formatting tab.
4.
Specify the appropriate colors for the various states of the hyperlink using the
options available in the Formatting tab.
To specify the color for a default hyperlink, from the Hyperlink drop-down
list, in the Standard Colors section, select an appropriate color.
tC
Open the web page on which the text hyperlinks to be formatted are located.
ce
1.
To specify the color for the hyperlink when the mouse pointer is hovered
over it, from the Hovered hyperlink drop-down list, in the Standard Colors
section, select an appropriate color.
Do
No
To specify the color for the hyperlink after it is clicked, from the Visited
hyperlink drop-down list, in the Standard Colors section, select an appropriate color.
re
n
Once you set the colors for the hyperlink states, in the Page Properties dialog
box, click OK.
6.
se
5.
Pl
ea
Re
fe
When a web page is linked to a master page, the formatting options in the Page Properties dialog box are disabled. The desired formatting options will have to be set in the master page for
the changes to reect on the web pages linked to the master page, ensuring consistent formatting throughout the site.
107
LESSON 5
ACTIVITY 5-1
te
op
r
i
al
y
Creating a Hyperlink
maria.aspx
susan.aspx
linda.aspx
carol.aspx
maria2.jpg
susan2.jpg
linda2.jpg
carol2.jpg
tC
Ma
Data Files:
No
Move the maria2.JPG, susan2.JPG, linda2.JPG, and carol2.JPG images into the
images folder.
re
n
2.
ce
Before You Begin:

1. Import the pages maria.aspx, susan.aspx, linda.aspx, and carol.aspx and the images,
maria2.JPG, susan2.JPG, linda2.JPG, and carol2.JPG from the C:\084699Data\
Adding Basic Functionality folder into the HumanResources subsite.
Move the pages maria.aspx, susan.aspx, linda.aspx, and carol.aspx to the SitePages
folder.
4.
Close the Manage Styles task pane group.
5.
In the Navigation pane, click Site Pages.
se
Do
3.
fe
Conditions:
Microsoft Outlook is installed and congured as the default email client.
108
Pl
ea
Re
Scenario:
You have completed developing the pages for your subsite. You decide to create hyperlinks to
link relevant pages. You want to create hyperlinks for the following pages.
As the text in the terms and conditions page references the downloads page, you
will link it to the downloads.aspx page.
For the employees to easily contact the HR department through email and get
their queries claried, you will provide an email hyperlink on the contactus.aspx
page.
As the details of the award winners in the employees corner page are given in
separate pages, you will link the photographs to their respective details pages.
LESSON 5
How You Do It
1.
a. To open the termsandconditions.aspx

page in edit mode, right-click
termsandconditions.aspx and select Edit
File in Advanced Mode.
Create a text hyperlink.
te
op
r
i
al
y
What You Do
b. On the termsandconditions.aspx page,

select the text policies and guidelines.
c. To insert a hyperlink, on the Insert tab, in

the Links group, click Hyperlink.
d. Verify that in the Insert Hyperlink dialog
box, in the Link to section, the Existing
File or Web Page button is selected.
In the SitePages folder, select

downloads.aspx, and click OK.
tC
f.
Ma
e. In the Insert Hyperlink dialog box, in the

Current Folder list box, scroll down and
double-click SitePages.
Test the text hyperlink.
a. To preview the web page, on the Home

No
2.
ce
g. Save the termsandconditions.aspx page.
Do
re
n
b. On the Terms and Conditions page, click

the policies and guidelines hyperlink to
open the downloads page.
c. Observe that the Policies and Guidelines
page is displayed and close the browser
window.
se
Pl
ea
Re
fe
d. Close the termsandconditions.aspx page.
109
LESSON 5
3.
a. Open the contactus.aspx page in edit

mode.
Create an email hyperlink.
te
op
r
i
al
y
b. On the contactus.aspx page, in the second para, click after the text your
comments to:.
c. Press the Spacebar, type

queries@ourglobalcompany.com and
press Enter.
d. Select the text

queries@ourglobalcompany.com.
e. On the Insert tab, click Hyperlink.
In the Edit Hyperlink dialog box, in the

Link to section, verify that the E-mail
Address button is selected.
Ma
f.
g. In the Subject text box, click, type

Regarding: and click OK.
110
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce
h. Save the contactus.aspx page.
LESSON 5
4.
a. On the Home tab, click the Preview in

Browser button.
Test the email hyperlink.
te
op
r
i
al
y
b. On the Contact Us page, click the

queries@ourglobalcompany.com
hyperlink.
c. If necessary, in the Internet Explorer

Security message box, click Allow.
tC
No
ce
Ma
d. Observe that the default email client,

Microsoft Outlook, opens with the To field
populated with the text
queries@ourglobalcompany.com and the
Subject field populated with the text
Regarding:.
f.
Do
re
n
e. Close Microsoft Outlook and, in the

Microsoft Outlook message box, click No.
se
Pl
ea
Re
fe
g. Close the contactus.aspx page.
111
LESSON 5
5.
a. Open employeecorner.aspx in edit mode.
Create an image hyperlink.
te
op
r
i
al
y
b. On the employeecorner.aspx page, select

the first image, of Steve Miller.
c. Select the Insert tab and click Hyperlink.
d. In the Insert Hyperlink dialog box, in the

Link to section, select the Existing File or
Web Page button.
e. In the Current Folder list box, doubleclick Site Pages.
Scroll down, select the steve.aspx page

and click OK.
Ma
f.
g. Similarly, link the second image to the

financeteam.aspx page.
h. Save the employeecorner.aspx page.

Browser button.
No
b. On the Employee Corner page, click the

image of Steve Miller to open the
steve.aspx page.
c. Close the browser window.
Do
d. Close the employeecorner.aspx page.
Pl
ea
se
re
n
fe
Re
112
tC
Test the image hyperlink.
ce
6.
LESSON 5
Creating a Downloadable Hyperlink
te
op
r
i
al
y
ACTIVITY 5-2
Before You Begin:

From the C:\084699Data\Adding Basic Functionality folder, import the library cards
usage.doc, desktop usage.doc, leave policy.doc, travel policy.doc, and equal employment
opportunity.doc les into the HumanResources subsite.
Ma
Scenario:
You want to provide the documents on organizational policies and guidelines as links to users
so that they can download the les to their computers and read them whenever necessary.
How You Do It
1.
a. Open the downloads.aspx page in edit

mode.
ce
Add downloadable hyperlinks.
tC
What You Do
No
b. In the Navigation pane, hover over the

area to the right of All Files and click the
arrow.
re
n
c. Expand the All Files group.
Do
se
e. Similarly, from the All Files task pane,

add the desktop usage.doc, leave
policy.doc, travel policy.doc, and the
equal employment opportunity.doc files
after their respective sections on the
downloads.aspx page.
Pl
ea
Re
fe
d. In the All Files task pane, scroll down,

drag library cards usage.doc and place it
after the text, Refer the Library Cards
Usage Document.
f.
Save the downloads.aspx page.
113
LESSON 5
2.

Browser button.
Test the downloadable hyperlinks.
te
op
r
i
al
y
b. On the Policies and Guidelines page,

click the library cards usage.doc
hyperlink.
c. In the File Download dialog box, click

Open to open library cards usage.doc.
d. Close the Word document and then close

the browser window.
ACTIVITY 5-3
Formatting Text Hyperlinks
tC
Ma
e. Close the downloads.aspx page.
No
ce
In the Internet Options dialog box, on the General tab, click Delete Cookies, Delete
les, and Clear History.
se
2.
Do
re
n
Before You Begin:

Since you have tested the hyperlinks when you created them, they will be in the visited state.
In order to make them active again, you have to clear the cache.
1. Open Internet Explorer, and from the Tools drop-down list, select Internet Options.
fe
In case of IE 7.0, in the Browsing History section, click Delete and then click Delete les, Delete cookies,
and Delete history.
Close the dialog boxes and the browser window.
4.
In the Navigation pane, click Master Pages.
Pl
ea
3.
Re
Scenario:
You nd that the default format of the text hyperlinks does not suit your website. So, you
decide to set various hyperlink states and make hyperlinks more suitable to your website.
114
LESSON 5
1.
How You Do It
Display the Page Properties dialog

box.
a. Open the Layout.master master page in

edit mode.
te
op
r
i
al
y
What You Do
b. To display the Page Properties dialog

box, on the Style tab, in the Properties
group, click Page.
2.
Set the hyperlink color properties.
a. In the Page Properties dialog box, select

the Formatting tab.
b. From the Hyperlink drop-down list, in the

Standard Colors section, select Navy.
Ma
c. From the Visited hyperlink drop-down

list, in the Standard Colors section, select
Maroon.
e. Click OK.
Save and close the Layout.master master

page.
No
Do
se
Pl
ea
Re
fe
re
n
ce
f.
tC
d. From the Hovered hyperlink drop-down

list, in the Standard Colors section, select
Blue.
115
LESSON 5
3.
a. From the Site Pages folder, open the

termsandconditions.aspx page in edit
mode.
Test the new settings.
If the browser displays the link

in the visited state, clear the
temporary Internet les,
cookies, and history.
te
op
r
i
al
y
b. To preview the web page, click the Preview in Browser button.
c. Place the mouse pointer over the policies

and guidelines hyperlink and observe as
the color changes to blue.
d. Click the policies and guidelines
hyperlink.
Ma
e. In the Internet Explorer browser window,

click the Back button.
f.
Observe that the policies and guidelines

hyperlink is maroon in color to indicate
the visited state.
g. Close the browser window.
116
tC
Close the All Files tab.
No
i.
Close the Master Page and Site Pages

tabs.
se
Do
j.
Pl
ea
Re
fe
re
n
ce
h. Close the termsandconditions.aspx page.
LESSON 5
TOPIC B
te
op
r
i
al
y
Create a Hotspot
Your web pages now contain hyperlinks, some of which are from image les. Another commonly used type of image link is a hotspot. In this topic, you will add hotspot links to images
on your web pages.
Assume that you own a tourism website that provides a write-up for each of the various states
in the country. Currently, you have a web page that lists the names of states as text. Users can
click each of these links to view the description of a state. However, it might be more interesting if you can provide users with a map and ask them to click on a particular state to view its
description. Hotspots help you achieve this effect.
Ma
Hotspots
Do
No
tC
Hotspots
se
re
n
ce
A hotspot is a hyperlink that is dened for a specic part of an image. The options to create a
hotspot are available in the Hotspot section of the Format contextual tab. A hotspot can be
polygonal, rectangular, or circular. The Insert Hyperlink dialog box appears as you draw the
hotspot and enables you to set a target for the link. You can create more than one hotspot on a
particular image in the web page.
Pl
ea
fe
Figure 5-4: A hotspot created for an image on a web page.
How to Create a Hotspot
Re
Procedure Reference: Create a Hotspot

To add a hotspot to an image:
1.
On your web page, select the picture to which you want to add a hotspot.
2.
On the Format contextual tab, in the Hotspot group, click Hotspot.
3.
Select the type of hotspot you want to insert.
117
To insert a polygonal hotspot, from the Hotspot drop-down list, select

Polygonal Hotspot.
To insert a rectangular hotspot, from the Hotspot drop-down list, select

Rectangular Hotspot.
To insert a circular hotspot, from the Hotspot drop-down list, select Circular
Hotspot.
te
op
r
i
al
y
LESSON 5
4.
On the selected image, click and drag the mouse pointer to the required location
to dene the hotspot region.
5.
In the Insert Hyperlink dialog box, specify the location you want to link and
then click OK.
6.
If necessary, save and test the hotspot.
Ma
ACTIVITY 5-4
Adding a Hotspot to an Image
tC
ce
118
No
Do
se
Pl
ea
Re
fe
re
n
Scenario:
In order to serve users better, you have decided to add a link to the customer service web page
on your home page. Instead of providing a regular text link, you decide to make it more attractive by providing the link on part of an image on the home page.
LESSON 5
How You Do It
1.
a. In the Navigation pane, click Master

Pages.
Add a hotspot link.
te
op
r
i
al
y
What You Do
b. Open the Layout.master master page in

edit mode.
c. On the Layout.master page, scroll to the

right and then scroll down and select the
Contact Us image.
d. On the Format contextual tab, in the
Hotspot group, click Hotspot.
f.
Ma
e. From the Hotspot drop-down list, select

Rectangular Hotspot.
Observe that the mouse pointer changes

to a pencil cursor when hovered over the
selected image.
tC
g. Using the pencil cursor, draw a rectangle

around the text Contact Us.
Do
j.
Save and close the Layout.master page.
Test the hotspot link.
se
2.
In the Insert Hyperlink dialog box, in the

SitePages folder, scroll down, select the
contactus.aspx page and click OK.
re
n
i.
No
ce
h. If necessary, in the Insert Hyperlink dialog box, from the Current Folder list box,
double-click Site Pages.
c. In the Employee Corner page, click the

words Contact Us to open the
contactus.aspx page.
Pl
ea
Re
fe
b. Right-click employeecorner.aspx and

choose Preview in Browser.
d. Close the browser window and then close

the employeecorner.aspx page.
119
LESSON 5
TOPIC C
te
op
r
i
al
y
Create Bookmark Links
Youve added links that connect several pages in your website. However, there might be
instances where you may want to connect two different sections of the same web page. In this
topic, youll add bookmark links to a web page.
In a corporate intranet or personal website, there may be times when you may want to place a
large amount of content on a single web page. But without links to specic locations within
the web page, your users might not be able to easily locate the information they need. Adding
bookmark links to the web page will help your users navigate through a lengthy web page and
locate the information they are looking for.
Ma
Bookmark Links
A bookmark link connects to a specic target location within the same page. Bookmark links
have two parts. The rst part is a bookmark, which is a label given to a specic section or
location in a web page. The other part is a hyperlink, which connects to a bookmark targeting
a specic region on a page.
The Bookmark dialog box helps you add and remove bookmarks and navigate to an existing
bookmark on a given web page. You can create a bookmark by clicking Bookmark in the
Links group on the Insert tab, and specifying a name for the bookmark in the Bookmark dialog box. Once a bookmark is created, you can navigate to the bookmark by selecting the
bookmark in the Bookmark dialog box and clicking the Go To button. You can delete the current bookmark by clicking the Clear button.
No
Do
se
Pl
ea
fe
re
n
ce
The Bookmark Dialog Box
tC
The Bookmark Dialog Box
Figure 5-5: Options available in the Bookmark dialog box.
Re
How to Create Bookmark Links

Procedure Reference: Add a Bookmark Link
To add bookmark links to your web page:
1.
120
Add a bookmark or bookmarks to an existing web page.

a. Navigate to the location that needs to be bookmarked.
LESSON 5
On the Insert tab, click Bookmark.
c.
In the Bookmark dialog box, in the Bookmark name text box, specify a
bookmark name.
d.
Click OK.
te
op
r
i
al
y
b.
2.
Select the desired text that needs to be linked to the bookmark.
3.
Open the Insert Hyperlink dialog box.
4.
In the Existing File or Web Page section, click Bookmark.
5.
In the Select Place in Document dialog box, select a bookmark and click OK.
6.
ACTIVITY 5-5
Ma
Adding Bookmarks
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce
Scenario:
The news release web page runs into numerous sections making the page lengthy. To help
users navigate between the table of contents and the various sections on this web page, you
have decided to add appropriate bookmark links.
121
LESSON 5
What You Do
How You Do It
1.
a. Open the newsrelease.aspx page in edit

mode.
te
op
r
i
al
y
Add bookmarks to the

newsrelease.aspx page.
b. To select the paragraph that begins with

the text Our Global Company selected as
one of the top 10 consulting companies,
triple-click it.
c. Select the Insert tab and, in the Links
group, click Bookmark.
d. In the Bookmark dialog box, in the Bookmark name text box, type Top and click
OK.
Ma
e. Under the heading News, triple-click

the first subheading Our Global Company
Selected as One of the Top 10 Consulting Companies.
122
tC
To insert another bookmark, click Bookmark.
se
Do
No
g. In the Bookmark dialog box, in the Bookmark name text box, type One of the top
10 companies and click OK.
Pl
ea
Re
fe
re
n
ce
f.
LESSON 5
Add links to the bookmarked sections.
a. Scroll up and, below the News Release

heading, triple-click the text Our Global
Company selected as one of the top 10
consulting companies to select it.
te
op
r
i
al
y
2.
b. To insert a hyperlink, click Hyperlink.
c. If necessary, in the Insert Hyperlink dialog box, verify that the Existing File or
Web Page button is selected.
d. In the Insert Hyperlink dialog box, click
Bookmark.
f.
Ma
e. In the Select Place in Document dialog

box, click the One of the top 10 companies bookmark and then click OK.
In the Insert Hyperlink dialog box, click
OK.
tC
g. Scroll down and double-click the text

Top to select it.
ce
h. To insert a hyperlink, click Hyperlink.
j.
In the Select Place in Document dialog

box, select the Top bookmark and click
OK.
Do
No
In the Insert Hyperlink dialog box, click

Bookmark.
re
n
i.
k. In the Insert Hyperlink dialog box, click

OK.
se
Save the newsrelease.aspx page.
Pl
ea
Re
fe
l.
123
LESSON 5
3.
a. To preview the web page, on the Home

Test the bookmark link.
te
op
r
i
al
y
b. Click the Our Global Company selected

as one of the top 10 consulting companies hyperlink.
c. Observe that the Our Global Company

Selected as One of the Top 10 Consulting Companies section is displayed, and
click the Top hyperlink.
d. Observe that you are returned to the top

of the page, and close the browser window.
tC
TOPIC D
Ma
e. Close the newsrelease.aspx page.
No
ce
Open a Linked Page in a New

Browser Window
Do
re
n
So far in this lesson, youve added a number of different types of links to a web page, and all
of them open the linked content in the current window. There may be times when you may
want to link one page to another, and open the other page in a new browser window. In this
topic, you will open a linked page in a new browser window.
Pl
ea
Behaviors
se
fe
Sometimes, users might want to cross-check the contents of multiple pages at the same time.
In such a scenario, web pages opening in the same browser window may not be helpful. Navigating back and forth between pages can be tedious and the user might lose interest. The Open
Browser Window feature in SharePoint Designer enables you to use a link to open a web page
in a separate browser window.
Re
A behavior is a combination of an event and a resulting action, where an event is any user
interaction with a web page and the action is the function the page is coded to perform. It
helps you to add interactivity to websites. You can add any number of behaviors to an element
on a web page. When multiple behaviors with the same event are added to an element, the
behavior that was added rst will be performed foremost.
Example of a Behavior
A popup message that appears when you roll over a section of a web page is a behavior.
124
LESSON 5
The Behaviors Task Pane
Ma
Figure 5-6: Options available in the Behaviors task pane.

There are several options available in the Behaviors task pane.
The Insert drop-down list
Displays a list of behaviors that can be added to the selected element on the
web page.
The Delete button
Enables you to delete the selected behavior in the Behaviors task pane.
The Tag option
Displays the tag corresponding to the selected element. When no elements

are selected on a web page, the behaviors will be added to the default tag,
<body>.
The Move Up and Move

Down buttons
Enable you to move the selected behavior up or down.
The Events column
Lists the events that are associated with the behaviors that are added to the
selected element on a page. When you place the mouse pointer over a
behavior, it displays a drop-down list containing the events that can be
added to the behavior.
No
Do
re
n
tC
Description
ce
Option
Lists the behaviors actions that need to be performed, when triggered by

an event.
fe
Types of Behaviors
se
The Actions column
The Behaviors Task Pane
te
op
r
i
al
y
The Behaviors task pane enables you to add and edit behaviors on a web page or a selected
element on the page. You can access the Behavior task pane by using the Task Panes command in the Workspace section of the View tab. It displays all the behaviors that can be
applied to a selected element.
Enables You To
Re
Behavior
Go To URL
Pl
ea
SharePoint Designer enables you to add different types of common behaviors for a selected
element on the web page.
Display the Go To URL dialog box where you can specify the URL of the
page you want to open.
125
LESSON 5
Enables You To
Open Browser Window
Open a page in a new browser window. This option opens the Open
Browser Window dialog box, where you can specify the URL of the destination page and width and height of the new window, and set attributes such
as adding a navigation bar and a menu bar.
Play Sound
Display the Play Sound dialog box, where you can specify an audio le that
you want to insert onto the web page.
Set Text
Set text for a selected element, so that when a specic event is performed
on the element, the specied text will be displayed on the browsers status
bar.
Swap Image
Swap an image with another, when the specic event is performed on the
original image.
Check Browser
Display the Check Browser dialog box, where you can specify a browser
type and the page that needs to be displayed for users using the selected
browser. The dialog box also contains options for specifying a different page
to be displayed for users who use other browser types.
Jump Menu
Create a drop-down menu with multiple list items from which you can select
the desired option. You can also set a size for the menu. You can link each
list item to a web page, which will be opened when the respective item is
selected.
Ma
te
op
r
i
al
y
Behavior
Enables You To
Change Property
Restore
Restore the last set of changed element properties.
Check Plug-in
Display the Check Plug-in dialog box, where you can specify a
plug-in and a link to the page that needs to be opened if the user uses
the selected plug-in. You can also specify a different page to display
for users who use other plug-ins.
se
Do
Change the properties of a selected element so that the element

changes when an event is performed.
fe
Change Property
Add the Go button functionality for the jump menu.
Pl
ea
Jump Menu Go
Create a pop-up message that pops up when the specic action is triggered.
Preload Images
Load alternate rollover images once the page loads. This enables you
to swap rollover images faster.
Re
Popup Message
Swap Image Restore
126
tC
Display the Call Script dialog box, where you can call or specify a
piece of javascript code.
re
n
Call Script
No
Behavior
ce
Additional Types of Behaviors

Some of the additional behaviors that you can add to your web page using SharePoint
Designer are listed in the following table.
Return to the original image once the mouse pointer is moved out of
the image.
LESSON 5
Events
Types of Events
te
op
r
i
al
y
An event is the part of a behavior that triggers the browser to perform an action. When you
add behaviors to a web page using SharePoint Designer, the default event is created along with
the action. You can then change the default event by choosing a new event from the event
drop-down list. You can also specify different events for a single element.
Different types of events are available in SharePoint that help add a variety of interactivity to
websites.
An Action Is Triggered When
onclick
A user performs a click action.
ondbclick
A user performs a double-click action.
onkeypress
A user presses a key on the keyboard.
onload
The page is loaded.
onmouseover
A user points the mouse pointer over the element.
onmousedown
The mouse button is held down.
onmouseup
The mouse button is pressed and then released.
onkeydown
The user holds down a key.
onkeyup
A key is pressed and then released.
onmousemove
The mouse pointer is moved over an element.
onmouseout
The mouse pointer is moved away from an element.
onunload
The user exits a page.
tC
No
ce
Ma
Event
Do
re
n
The Open Browser Window Dialog Box
se
The Open Browser Window

Dialog Box
Pl
ea
Re
fe
The Open Browser Window dialog box enables you to specify the URL of a web page and
open the web page in a new browser window.
Figure 5-7: Options available in the Open Browser Window dialog box.
127
LESSON 5
Enables You To
Go to URL
Link to a page that you want opened in a new browser window.
Window name
Set the new page to open in a different frame on the same page.
Window width
Specify the width of the window.
Window height
Specify the height of the window.
Attributes
Set the attributes for the new browser window.

Navigation toolbar: Display the navigation toolbar in the browser window.
Location toolbar: Display the location toolbar in the browser window.
te
op
r
i
al
y
Option
Ma
Status bar: Display the status bar in the browser window.

Menu bar: Display the menu bar in the browser window.
Scrollbars as needed: Display scroll bars in the browser window if content cannot be displayed in the specied window size.
Resize handles: Display the resize handles to resize the browser window.
The CSS Properties Task Pane
No
Do
se
re
n
tC
The CSS Properties task pane is a context-sensitive task pane that enables you to modify the
CSS properties of the selected element. It contains two sections: Applied Rules and CSS
Properties. The Applied Rules section contains selectors that are applied to the selected item.
Placing the mouse pointer over a selector displays the CSS rules applied to the selector. The
CSS Properties section lists all the properties that are applied to the specic selector. The buttons at the top of the task pane enable you to change the way properties are listed.
ce
The CSS Properties Task Pane
Figure 5-8: Options available in the CSS Properties dialog box.
Pl
ea
fe
Using the CSS Properties Task Pane

You can use the CSS Properties task pane to modify CSS properties, such as the
mouse pointer appearance and shape, on elements, such as images, on a page.
Re
How to Open a Page in a New Browser Window

Procedure Reference: Open a Web Page in a New Browser Window
To open a web page in a new browser window:
1.
128
LESSON 5
On the View tab, in the Workspace group, click Task Panes and select Behaviors.
3.
If you want to add the behavior to a specic element on the web page, select the
element. Otherwise, the behavior will be added to the whole pagethe <body>
tag.
4.
In the Behaviors task pane, from the Insert drop-down list, select Open Browser
Window.
5.
In the Open Browser Window dialog box, click Browse.
6.
In the Edit Hyperlink dialog box, navigate to the required folder and open the
desired web page.
7.
If necessary, in the Window width and Window height text boxes, type the
desired width and height for the browser window.
8.
If necessary, in the Attributes section, set the desired attributes.
9.
Click OK.
10. If necessary, save and preview the page.
ACTIVITY 5-6
ce
Opening a Page in a New Browser Window
tC
Ma
te
op
r
i
al
y
2.
No
Do
se
Pl
ea
Re
fe
re
n
Scenario:
You are working on the intranet page for the HR department. The requirements from the HR
team are that the web page must contain a brief statement congratulating employees on their
contributions and recognizing their achievements. The page must also display images of
employees who have achieved a particular milestone. The web page must also incorporate
functionality that will help users read more information on each achiever in a separate web
page. You decide to use SharePoint Designer to design this intranet page.
129
LESSON 5
What You Do
Display the Behaviors pane.
a. Open the hremployees.aspx page in edit

mode.
te
op
r
i
al
y
1.
How You Do It
b. Click the first image on the web page, the

image of Maria Miller.
c. To display the Behaviors pane, on the
View tab, in the Workspace group, click
Task Panes.
d. In the Task Panes drop-down list, select

Behaviors.
a. In the Behaviors pane, click Insert and,
from the drop-down list, select Open
Browser Window.
Display information about Maria in a

new browser window.
Ma
2.
b. In the Open Browser Window dialog box,

click Browse.
tC
c. Navigate to the SitePages folder.
No
Pl
ea
Re
130
f.
In the Window width text box, type 325

and press Tab.
g. In the Window height text box, type 316

and click OK.
se
Set properties to display the cursor

as a pointer when hovered over the
image.
fe
3.
e. Press Tab and, in the Window name text

box, type Maria and press Tab.
Do
re
n
ce
d. Select the maria.aspx page and click OK.
a. On the View tab, click Task Panes and

select CSS Properties.
b. In the CSS Properties pane, in the CSS

Properties section, scroll down and, in
the Layout section, click next to cursor.
c. From the drop-down list, select pointer.
d. Close the CSS Properties and Behaviors
panes.
e. Save the web page.
LESSON 5
4.
a. On the Home tab, click Preview in

Browser.
Test the new behavior.
te
op
r
i
al
y
b. On the HR Employees page, click the

Maria Miller image.
c. Observe that the image file opens in a

new browser window and close the
browser windows containing the image
and the HR Employees page.
Lesson 5 Follow-up
Ma
d. Close the hremployees.aspx page.
In this lesson, you used hyperlinks and bookmarks to connect the pages of your website. Linking web pages enables site users to access linked web pages instantaneously. You also used
behaviors that make for interesting site navigation.
Brainstorm a list of scenarios where hotspots can come in handy on your websites.
Answers will vary but may include:
tC
1.
ce
* Scenarios wherein you want to display an image and create a hyperlink to a definite
part of the image.
Do
What are the different interactive and dynamic features that you have seen in web
pages and how do they add value to the website?
re
n
2.
No
* E-commerce sites where you want to display images of various products in a catalog to
enable users to choose a particular product. The individual product information can be
placed in separate pages that are linked to the corresponding images.
se
Pl
ea
Re
fe
Answers will vary but may include the various events that help you make websites interactive depending on user interaction. Using events, you can create different types of
interactivity by assigning unique actions to events such as mouse clicks or keyboard
inputs.
131
132
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce
Ma
te
op
r
i
al
y
NOTES
LESSON 6
te
op
r
i
al
y
LESSON 6
Lesson Time
30 minutes
In this lesson, you will add SharePoint components to the site.

You will:
Add a list and library.

Add Web Parts to a site.
No
Do
se
Pl
ea
Re
fe
re
n
ce
tC
Ma
Adding SharePoint
Components to the Site
Lesson 6: Adding SharePoint Components to the Site
133
LESSON 6
Introduction
te
op
r
i
al
y
So far you have enhanced your web pages using standard CSS- and HTML-based web functionality. SharePoint Designer provides unique SharePoint components that enhance the
functionality of your SharePoint sites, and facilitate collaboration and easy navigation among
site users. In this lesson, you will add SharePoint components to a website.
TOPIC A
Ma
Building an intranet site that provides a collaborative workspace and easy navigation has
always been a task fraught with challenges. You might need to expend a lot of time and effort
to build complex applications and integrate them onto your web pages if you use standard web
development tools and techniques. However, SharePoint Designer lets you take advantage of
the prebuilt components to add and customize functionality that supports the specic needs of
the organization.
Add Lists and Libraries to the Site
tC
The focus of this lesson is on taking full advantage of complex SharePoint-specic site components for the sites you build in SharePoint Designer. One category of commonly-used
advanced SharePoint functionality that you can add to your site is lists and libraries, which can
be used for sharing information and collaborating with other users. In this topic, you will add
lists and libraries to the site to centralize information for site users.
Pl
ea
Re
134
No
Denition:
A SharePoint list is a content structure in a SharePoint site that contains a group of
similar items, all of which can be shared among site users. SharePoint provides many
types of lists some of which are announcements, the calendar, links, and tasks.
fe
SharePoint Lists
Do
SharePoint Lists
se
re
n
ce
One of the most challenging aspects of working as a team is sharing of updated information.
Each time the information changes, you have to get out the eraser or whiteout to change the
hardcopy, or make changes and resend an email message. Instead of going through that tedious
process, you can add information to lists on your website where the information can be
updated and made available for use by everyone. Similarly, managing les is also a tedious
task. Files are often stored in numerous locations, including the network, individual hard
drives, and removable media such as thumb drives. With information in so many locations, it
is easy to overlook important documents or waste valuable time creating a document that
already exists. If you can both upload existing documents and create new documents in a
SharePoint library, you will have one location for every le the team will need.
Ma
te
op
r
i
al
y
LESSON 6
Figure 6-1: Tasks listed in the HRTasks list.
No
Types of SharePoint Lists
tC
ce
Example:
An example of a SharePoint list is a Calendar, which is used for keeping track of team
meetings, deadlines, holidays, or other important events.
se
Do
Types of SharePoint Lists
Pl
ea
Re
fe
re
n
SharePoint provides several types of lists that help manage information seamlessly.
Figure 6-2: Various types of SharePoint lists.
135
LESSON 6
Description
Announcements
Contains short information items such as recent

news or status updates.
te
op
r
i
al
y
List Type
Calendar
Keeps track of team meetings, deadlines, holidays,

or other important events.
Contacts
Contains and manages information about individuals and groups, such as clients or vendors.
Custom Lists
A customized list wherein you can specify the

number and types of columns that will appear in
the list item.
Custom List in Datasheet View
Acts as an online forum, which will help individuals communicate through message posts.
Ma
Discussion Board
A customized list wherein you can specify the

number and types of columns. This customized list
can be opened in a spreadsheet-like environment,
which aids in managing data.
Issue Tracking
Follows the progress of one or more issues.
Links
Displays the list of links from the Internet or your

company intranet.
Project Tasks
Tracks the tasks for a project.
Stores documents that can be shared among site

users.
No
Document Library
tC
Tracks the tasks that have been set for your team
or a project.
ce
Tasks
se
Pl
ea
Re
136
Do
Denition:
A SharePoint document library is a content structure in a SharePoint site that contains
les that can be shared among site users. A library may contain a single type of le
such as a picture library, or it may contain multiple types of les including documents,
spreadsheets, and presentations. SharePoint provides separate libraries for pictures,
forms, and wiki pages.
fe
SharePoint Document
Libraries
re
n
SharePoint Document Libraries
LESSON 6
Ma
te
op
r
i
al
y
Example:
Types of Document Libraries
tC
Figure 6-3: A list of documents in a documents library.
se
Do
No
Types of Document Libraries
Pl
ea
fe
re
n
ce
SharePoint provides several types of document libraries that serve as repositories of information.
Re
Figure 6-4: Various types of Document libraries.
Document Library Type

Asset Library
What It Contains
Rich media les such as image, audio, and video

les which can be shared and managed by site
users.
137
Document Library Type
What It Contains
Document Library
Documents that can be shared among site users.
Picture Library
Pictures that can be shared among site users.
Slide Library
te
op
r
i
al
y
LESSON 6
Slides created using PowerPoint or similar applications that can be shared and managed by site users.
Data Connection Library
Documents containing information about external

data connections.
Form Library
XML (eXtensible Markup Language)-based forms

such as invoices and expense reports used by programs such as Microsoft InfoPath.
Report Library
Documents which track metrics and other business

information.
Linked wiki pages. It supports text, pictures,
tables, and hyperlinks embedded in these pages.
Ma
Wiki Page Library
How to Add Lists and Libraries to a Site

To add a list to a site:
tC
Procedure Reference: Add a List to a Site
Select the File tab, click Add Item and then click the list you want to create.
2.
To create a new list, in the Specify the name for the new list text box, doubleclick the existing text, type the desired name and click Create.
3.
To preview in the browser, on the List Settings tab, in the Manage group, click
Preview in Browser.
No
ce
1.
re
n
Procedure Reference: Add a Document Library to a Site
2.
In the Specify the name for the new list text box, double-click the word Document Library and type the desired name.
3.
To create the new list, click Create.
4.
On the List Settings tab, in the Manage group, click Preview in Browser.
Pl
ea
se
Select the File tab, click Add Item and then click Document Library.
fe
1.
Re
138
Do
To add a document library to a site:
LESSON 6
ACTIVITY 6-1
te
op
r
i
al
y
Adding a List and Document Library to a Site
Before You Begin:

Ensure that the Human Resources subsite remains open in SharePoint Designer.
1.
How You Do It
Add the Tasks list to the Human

Resources subsite and preview the
list.
a. Select the File tab and, in the Add Item

category, click Tasks.
tC
What You Do
Ma
Scenario:
For the Human Resources subsite, you want to have a centralized information repository,
where you can assign tasks for your team members. You also want a document repository that
your team members can use to share les.
No
ce
b. To create a new task, in the Specify the

name for the new list text box, doubleclick the word Tasks, type HR Tasks and
click Create.
re
n
c. Observe that the tasks have been created.
Do
d. On the List Settings tab, in the Manage

group, click Preview in Browser.
e. Close the browser.
se
Close the HR Tasks page.
Pl
ea
Re
fe
f.
139
LESSON 6
2.
Add a Document Library to the

Human Resources subsite and preview the document library.
a. Select the File tab and, in the Add Item

category, click Document Library.
te
op
r
i
al
y
b. Verify that, in the Specify the name for

the new list text box, the name Document Library exists.
c. To create a new list, click Create.
d. On the List Settings tab, in the Manage

group, click Preview in Browser.
e. Close the browser.
tC
TOPIC B
Close the Document Library page.
Ma
f.
ce
Add Web Parts to a Site
No
re
n
To create a centralized information system, you added lists and document libraries to your
website. But these SharePoint components reside in their separate default web pages. To provide users with easy access, you may want to collate the lists and document libraries together
and place them on a single page. In this topic, you will add Web Parts to your subsite, which
will help you do just that.
140
Pl
ea
A Web Part is the basic design element of a SharePoint site that can contain an image, a list,
or a document library. Web Parts can be added to a web page by using the Web Part option in
the Web Parts group. When a list or document library is added to a site, it is displayed in the
Data View drop-down list which can then be added to the site as a web part.
Re
Web Parts
se
fe
Web Parts
Do
A typical SharePoint site user might start his day checking out the tasks and announcements
that are listed on the SharePoint site and then try to check out some documents to work on.
The user will have to access each of these SharePoint components from different pages.
SharePoint eliminates this disadvantage and offers you a solution that helps you collate all
these SharePoint components onto one page.
te
op
r
i
al
y
LESSON 6
Figure 6-5: The Web Part option.
Web Part Zones
Web Part Zones
re
n
Web pages that contain Web Parts are referred to as Web Part pages.
tC
Figure 6-6: The Web Part Zone option.
No
ce
Ma
A Web Part zone is a container of one or more Web Parts. Web Part zones enable users to
group and organize Web Parts. While Web Parts placed inside a Web Part zone can be customized using the browser, Web Parts that are not placed in a Web Part zone cannot. Instead, they
can be customized using SharePoint Designer. This feature is especially useful when you do
not want end users to modify a Web Part. Web Part zones can be inserted into a page by using
the Web Part Zone option in the Web Parts group.
Do
The Web Part Properties Dialog Box
se
The Web Part Properties

Dialog Box
Pl
ea
Re
fe
The Web Part properties dialog box helps customize a Web Part to suit user preferences. It
consists of different sections.
141
Ma
te
op
r
i
al
y
LESSON 6
Figure 6-7: The Web Part properties dialog box.
Pl
ea
fe
Re
Properties that enable you to specify whether the

Web Part should be kept open, closed, or hidden
on the web page.
se
Advanced
AJAX Options
tC
Properties such as Title, Height/Width, and

Chrome State that control the appearance of the
Web Part.
re
n
Layout
No
Appearance
Contains
Do
Section
ce
The title of the Web Part properties dialog box corresponds to the name of the Web part.
Properties that control the advanced characteristics

of a Web Part. It enables you to specify whether
the Web Part can be minimized, closed, or hidden
by the end user. It also enables you to specify if a
Web Part can be moved to a different Web Part
zone.
Options to enable asynchronous data transfer.
(AJAX, which stands for Asynchronous JavaScript
and XML, is a programming technique that
enables JavaScript to communicate with web servers.)
The Appearance Section of the Web Part Properties Dialog Box

The following table lists the properties of the Web Part that can be customized in the
Appearance section.
142
LESSON 6
Enables You To
Title
Specify the title of the Web Part.
Height/Width
Specify the height and width of the Web Part.
Chrome State
Specify whether the Web Part should be maximized or only the Web Part title should
appear, when the Web Part page is accessed
by a user. By default, it is set to Normal so
that the Web Part appears maximized on the
web page.
Chrome Type
Specify whether the title and the border of the

Web Part should be displayed along with the
Web Part.
te
op
r
i
al
y
Properties
Ma
The Layout Section of the Web Part Properties Dialog Box

Layout section.
Properties
Enables You To
Specify whether the Web Part is visible or

hidden when a user tries to access the Web
Part page.
No
ce
Hidden
Specify whether the Web Part should be kept

open or closed on the web page.
tC
Close the Web Part
Allow Minimize
Specify whether the Web Part can be minimized by the user.
Allow Hide
Re
Allow Zone Change

Allow Connections
Specify whether the user can close the Web

Part.
Pl
ea
fe
Allow Close
Do
Enables You To
se
Properties
re
n
The Advanced Section of the Web Part Properties Dialog Box

Advanced section.
Allow Editing in Personal View
Specify whether the user can hide the Web

Part.
Specify if a Web Part can be moved to a different Web Part zone.
Specify whether the Web Part can be connected with other Web Parts.
Specify whether the user is permitted to
modify the Web Part properties in his/her personal view.
143
LESSON 6
Enables You To
Title URL
Specify the URL of the le corresponding to

the Web Part that resides in the Folder List
task pane.
te
op
r
i
al
y
Properties
Description
Specify the screen tip that will appear when

you move the mouse pointer over the Web
Part title.
Help URL
Specify the location of a help le that contains

help information about the Web Part.
Help Mode
Specify how the help information about the

Web Part is displayed on the browser window.
Catalog Icon Image URL
Specify the location of an image le that can

be used as the Web Part icon.
Title Icon URL
Specify an error message that will be displayed if there is a problem while importing
the Web Part.
Ma
Import Error Message
Specify the location of an image le that can

be used in the Web Part title bar.
Do
se
fe
No
ce
The various options in the Displayed Fields dialog box are used to add elds to a Web Part or
remove elds from it, and also to change the order in which the elds are displayed on the
Web Part.
re
n
The Displayed Fields Dialog

Box
tC
The Displayed Fields Dialog Box
Re
Option
Available elds
Displayed elds
Pl
ea
Figure 6-8: The Displayed Fields dialog box.
Add/Remove buttons
144
Description
Displays the list of elds that can be added to the
Web Part.
Displays the list of elds already present on the
Web Part.
Enables you to add or remove elds from the Web
Part.
LESSON 6
Description
Move Up/ Move Down buttons
Enables you to change the order in which the

elds are displayed on the Web Part.
How to Work with Web Parts

Procedure Reference: Insert a Web Part in a Web Page
To insert a Web Part in a web page:
te
op
r
i
al
y
Option
Open a desired web page.
2.
Click on a desired location inside the content region.
3.
Select the Insert tab.
4.
If necessary, to insert a new Web Part zone, in the Web Parts group, click Web
Part Zone.
5.
On the Insert tab, in the Data Views & Forms group, click the Data View dropdown list and, in the desired group, select the desired web part.
6.
Click the Save button.
7.
On the Home tab, in the Preview group, click the Preview in Browser button to
preview the page.
No
To customize a Web Part:
ce
Procedure Reference: Customize a Web Part
tC
Ma
1.
2.
Right-click the Web Part, and choose Web Part Properties.
3.
In the Document Library dialog box, modify the Web Part.
In the Appearance section, choose the required settings to specify the title
and dimensions of the Web Part.
In the Advanced section, choose the required settings to set the advanced
properties of the Web Part.
Click OK.
se
In the List View Tools group, on the Options tab, in the Fields group, click Add/
Remove Columns.
Customize the elds in the Web Part.
a. If necessary, in the Displayed Fields dialog box, in the Available elds list,
select a desired eld and click Add to add a eld to the Web Part.
Re
6.
In the Layout section, specify whether the Web Part will be visible, hidden,
or closed when viewed in a browser.
Pl
ea
5.
fe
4.
Do
In the editing window, select the desired Web Part.
re
n
1.
b.
If necessary, in the Displayed Fields dialog box, in the Displayed elds list,
select a desired eld and click Remove to remove a eld from the Web Part.
c.
If necessary, click Move Up or Move Down to arrange the order in which

elds will be displayed on the Web Part.
145
LESSON 6
7.
In the Displayed Fields dialog box, click OK.
8.
te
op
r
i
al
y
ACTIVITY 6-2
Inserting a Web Part into a Web Page
Ma
Scenario:
You have added SharePoint lists and document libraries in the Human Resources subsite. But
they appear in separate web pages. For ease of access for users, you want to integrate them
onto the home page of the Human Resources subsite.
a. In the Navigation pane, click All Files.
Insert a Web Part Zone in the home

page of the Human Resources
subsite.
146
No
b. On the gallery page, right-click

default.aspx and choose Edit File in
Advanced Mode.
c. In the PlaceHolderMain (Custom) content
region, click at the end of the paragraph
that starts with the word Welcome and
press Enter.
Do
se
Pl
ea
Re
fe
re
n
ce
1.
How You Do It
tC
What You Do
d. Select the Insert tab.

e. To insert a new web part zone, in the
Web Parts group, click Web Part Zone.
LESSON 6
Add the HR Tasks and Document
Library Web Parts to the
default.aspx page.
a. On the Insert tab, in the Data Views &

Forms group, click the Data View dropdown list and, in the Lists group, select
HR Tasks.
tC
No
ce
Ma
te
op
r
i
al
y
2.
b. Inside the Web Part Zone, click below the

HR Tasks web part.
Do
re
n
c. Select the Insert tab.
se
d. In the Data Views & Forms group, click

the Data View drop-down list and, in the
Document Libraries group, select Document Library.
f.
If necessary, in the Site Definition Page

Warning message box, click Yes.
Pl
ea
Re
fe
e. Click the Save button.
147
LESSON 6
3.
a. Select the Home tab.
te
op
r
i
al
y
b. In the Preview group, click the Preview

in Browser button to preview the page.
c. Observe that HR Tasks and Document
Library are displayed on the home page.
ACTIVITY 6-3
Ma
Customizing a Web Part
tC
What You Do
148
No
a. Verify that in the editing window, the

Document Library Web Part is selected.
se
Pl
ea
Re
2.
How You Do It
Change the title of the Document

Library Web Part.
fe
1.
Do
re
n
ce
Scenario:
You had asked some of the members of the Human Resources team to test the usability of the
Document Library Web Part that has been added to their subsite. They suggest some changes
that will further enhance the functionality of the Web Part. They suggest that you change the
title of the Web Part to match that of the subsite and that the users should not be able to close
the Document Library Web Part. Also, they feel that some extra elds need to be added, and
some redundant elds deleted.
Restrict users from closing the Web

Part.
b. Right-click and choose Web Part Properties.

c. In the Document Library dialog box, in
the Appearance section, in the Title text
box, select the words Document Library,
and type HR Document Library
a. In the Document Library dialog box,
expand the Advanced section.
LESSON 6
tC
No
ce
Ma
te
op
r
i
al
y
b. Scroll down, and uncheck the Allow Close

check box.
Do
b. In the Displayed Fields dialog box, in the

Available fields list box, select the Check
In Comment field and click Add.
Pl
ea
Re
a. In the List View Tools group, on the

Options tab, in the Fields group, click
Add/Remove Columns.
se
Add the Check In Comment field and

remove the Modified field from the
HR Document Library Web Part.
fe
3.
re
n
c. In the Document Library dialog box, click

OK.
c. In the Displayed fields list box, select

Modified and click Remove.
d. Click OK.
149
LESSON 6
4.
Preview the Web Part page and verify

the changes.
te
op
r
i
al
y
b. If necessary, in the Site Definition Page

Warning message box, click Yes.
c. Select the Home tab.
d. In the Preview group, click the Preview

in Browser button to preview the page.
e. Observe that the Check In Comment field

has been added, and the Modified field
removed from the HR Document Library
Web Part.
In the browser window, in the HR Tasks
Web Part, in the right corner, click the
drop-down menu.
Ma
f.
150
tC
No
Do
h. In the browser window, in the HR Document Library Web Part, in the right
corner, click the drop-down menu.
i.
Observe that there is no option to close

the HR Document Library Web Part.
j.
se
Pl
ea
Re
fe
re
n
ce
g. Observe that there exists an option to

close the HR Tasks Web Part.
k. Close the default.aspx page.
LESSON 6
Lesson 6 Follow-up
1.
In your environment, why might you use a Tasks list?
te
op
r
i
al
y
In this lesson, you added lists and document libraries. When shared information is organized
into lists or libraries, everyone on the team can quickly locate and work with the information
they need.
Answers will vary but may include assigning daily tasks to team members.
2.
What types of lists will you add to your site? Why?
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce
Ma
Answers will vary but may include picture libraries since sharing images through a common repository will help maintain the uniformity of the images developed.
151
152
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce
Ma
te
op
r
i
al
y
NOTES
te
op
r
i
al
y
LESSON 7
LESSON 7
Lesson Time
Ma
Automating Business
Processes with Workows
You will:
Create a workow.
Modify a workow.
No
Do
se
Pl
ea
Re
fe
re
n
ce
tC
In this lesson, you will automate business processes with workows.
Lesson 7: Automating Business Processes with Workows
153
LESSON 7
Introduction
te
op
r
i
al
y
You have added lists and libraries to your site. SharePoint Designer makes it possible to integrate all such SharePoint components seamlessly with your business processes and automate
them. In this lesson, you will automate business processes with workows.
TOPIC A
Ma
Imagine a workow, where a developer wants to send out a document for review. This task
would involve uploading the document onto the SharePoints document library, then sending
an email to the reviewer informing her about the availability of the document. The reviewer
gets the email, downloads the document from the SharePoint site, reviews it, and uploads it
back to the site. Wouldnt it be easier if the developer just uploaded the document onto the
site, then left the email notications and other tasks to be performed by SharePoint?
SharePoint Designer allows you to automate business processes such as this process by creating customized workows without the need to write any code.
Create a Workow
tC
Earlier in the course, you added lists and libraries to the site. In a SharePoint site, lists and
libraries can be linked to a business process through a workow, and congured to perform
certain tasks automatically. In this topic, you will create a workow.
No
Do
re
n
ce
Any organization has its own set of business processes, which help dene the ow of tasks in
the organization. If the workow is not automated, it can be challenging to ensure that the
workow functions the way you want it to. Team members may need to track every stage of
the task and keep the concerned people informed of the status through emails and other
manual ways. With SharePoint Designer, you can help solve this problem by creating
workows that assign tasks to people, send email notications, or even collect information
from the required users, without the need for any manual intervention.
SharePoint Workows
se
fe
A SharePoint workow comprises a series of tasks performed in succession to produce a nal

outcome. It determines the ow of tasks among users and helps organize and execute various
activities that represent the work process. A workow also tracks the history of all the tasks
performed within it. Workows can be designed in such a way that they can either be started
by users or be started automatically upon the occurrence of an event.
154
Pl
ea
Re
Workow Locations
SharePoint workows are based on the lists and libraries in a site. All workows created with SharePoint Designer are stored in a folder called Workows, which resides
in the sites main folder and can be modied when necessary. Each workow consists
of its respective source le required for the workow.
LESSON 7
te
op
r
i
al
y
Workow Source Files

The source les of a workow are made up of the XOML (eXtensible Object Markup
Language) and ASPX pages. The default XOML pages include: the workow markup
page, workow rules page (.xoml.rules), and the workow conguration page
(xoml.wfcong.xml). The ASPX pages are created when custom tasks are created or
initiation parameters specied.
WorkFlow Types
WorkFlow Types
Re
tC
Do
se
Site
This type of workow is created in the top level

site at the site collection level and it can be associated with any list in the site collection.
This type of workow is associated with a site and
not with a particular list item. This is particularly
used when you need a workow for your site but
it need not be associated with a list item.
Pl
ea
Reusable
These workows are associated with a particular

list and therefore can easily access the various
elds of the list. This type of workow cannot be
used for other lists on the site since it is customized for a particular list.
fe
List
Description
re
n
Workow Type
No
Figure 7-1: Types of workflows.
ce
Ma
Microsoft SharePoint Designer allows you to create three types of workows.
Workow Components
Workow components represent events, actions, and conditions that together instruct the
workow to follow a specic sequence for successful completion of the workow.
155
LESSON 7
Description
Event
An event is a parameter that initiates a workow.

SharePoint Designer, by default, provides you
with three options to initiate a workow. You can
opt to start the workow manually from an item,
start the workow when a new item is created,
and start the workow whenever an item changes.
You can also specify custom initiation parameters,
if the workow is set to be started manually from
an item.
te
op
r
i
al
y
Workow Component
Action
An action is performed when triggered by an

event. A workow can contain more than one
action. Some of the default actions that SharePoint
Designer provides are:
Ma
Send an Email: Specify the name of the user

you want to send the email to. You can also
specify the subject and body content for the
email.
se
Do
No
Every action is associated with a condition. An

action will be performed only when the specied
conditions are met. Some of the default conditions
that SharePoint Designer provides are:
Compare [list/library name] eld: Used to
specify the eld and the value that need to be
compared. The workow is started when the
specied eld and the value match those of the
list/library item.
Title eld contains keywords: Used to specify
a keyword that needs to be compared with the
title eld. The workow is started when the
title of the list/library item matches the specied keyword.
Created by a specic person: Used to specify
the name of a user. The workow is started
when the list/library item is created by the
specied user.
Pl
ea
fe
re
n
ce
Condition
tC
Assign a To-do Item: Allows you to display

the Custom Task Wizard, which enables you
to create a new task. The action also contains
the option to display the Select Users dialog
box to assign the new task to a specic user.
Re
Workow Steps
A workow created using SharePoint Designer can contain several steps. A step is
nothing but a combination of actions and conditions. The rst step is initiated when the
event specied for the workow to start is performed. The subsequent steps are initiated upon completion of the previous step.
156
LESSON 7
The Workow Tab
The WorkFlow Tab
te
op
r
i
al
y
The Workow tab contains various groups each of which contains options that enable you to
create and manage workows.
Figure 7-2: Groups in the Workflow tab.
Contains Options To
Save
Save a workow and publish it to the server. Publishing will enable users to start a workow. It also
contains options to check the workow for errors.
Modify
Modify the workow. These options enable you to

move components of a workow up or down the
process. It also contains options to delete components or steps.
Insert
Insert workow components such as steps, conditions, actions and if-else branches. These
components constitute the workow.
Manage
Manage the settings of the workow such as

whether to start the workow automatically or
manually.
tC
Dene variables for workows.
re
n
The Custom Task Wizard
Do
Variables
No
ce
Ma
Group
se
The Custom Task Wizard
Pl
ea
Re
fe
The Custom Task Wizard allows you to create a new custom task. It contains options to add
a name and description for every task you create. You can also add custom form elds that
you want the user to ll in while performing the task.
Figure 7-3: Naming a custom task in the Custom Task Wizard.
157
LESSON 7
The Select Users Dialog Box
The Select Users dialog box allows you to select the users to whom you need to assign a task
or send an email.
te
op
r
i
al
y
The Select Users Dialog Box
Ma
Figure 7-4: Options in the Select Users dialog box.
Description
Type a Name or E-mail Address text box
Allows you to type the names of recipients.
Or select from existing Users and Groups list

box
Allows you to add users to the Selected Users list

box.
Allows you to remove users from the Selected
Users list box.
Allows you to move names up in the Selected
Users list box.
re
n
Move Down button
Allows you to move names down in the Selected

Users list box.
Do
Move Up button
No
Remove button
ce
Add button
Lists the names of users to select from.
tC
Option
The Dene E-mail Message Dialog Box
Pl
ea
Re
158
se
The Dene E-mail Message dialog box contains options you can use to add user names and a
message that needs to be displayed in the email.
fe
The Dene E-mail Message

Dialog Box
te
op
r
i
al
y
LESSON 7
Figure 7-5: Options in the Define E-mail Message dialog box.
Description
The To text box
Enables you to type the email addresses of users to

whom you want to send the email.
The CC text box
Enables you to type the email addresses of users to

whom you want to send a copy of the email.
The address book button
Displays the Select Users dialog box, where you

can specify the names of users to whom you want
to send the email or a copy of the email.
The Subject text box
Enables you to type the subject of the email.
Displays the Dene Workow Lookup dialog box

that allows you to select the data source and the
eld to perform the lookup on. The Clear Lookup
button allows you to clear the lookup that you
have created. The fx and Add Lookup to Body
buttons allow you to specify the lookup for the
subject and the body, respectively.
re
n
The fx and the Add Lookup to Body buttons
No
Enables you to type the body text of the email.
Do
The body text box
tC
ce
Ma
Option
To create a workow:
1.
Open the website in which you want to create a workow.

Ensure that the website contains the list or library on which the workow should
be based.
Re
2.
Pl
ea
fe
Procedure Reference: Create a Workow
se
How to Create a Workow
3.
In the New group, click List Workow and, from the drop-down list, select the
desired list.
4.
In the Create List Workow - Document Library dialog box, in the Name text
box, type the desired name.
5.
In the Description text box, type the description of the workow and click OK.
159
LESSON 7
te
op
r
i
al
y
On the Workow tab, in the Insert group, click Condition and, from the dropdown list, select the desired condition and specify the required values that will be
checked for the workow to be initiated.
Select the If any value equals value option and specify the values.
Click the eld link and, from the drop-down list, select the desired eld.
Click the equals link and, from the drop-down list, select the desired
parameter.
Click the value link and, in the text box, type the necessary keyword
that needs to be compared with the specied eld, or click fx and, in the
Dene Workow Lookup dialog box, from the Source drop-down list,
select the required option from where the workow should look up the
eld and, from the Field drop-down list, select the required eld that
has to be compared with the specied eld. Click OK.
Select the Title eld contains keywords option to specify a keyword that
needs to be compared with the title eld by clicking the keywords link and
typing the required keyword or by opening the Dene Workow Lookup
dialog box and specifying the required value.
Select the Created in a specic date span option to specify the dates during
which the elements in the list or library have been created by clicking the
date links and typing the desired dates or by opening the Dene Workow
Lookup dialog box and specifying the required values.
Select the Modied in a specic date span option to specify the dates during which the elements in the list or library have been modied by clicking
the date links or by opening the Dene Workow Lookup dialog box and
specifying the required values.
Select the Created by a specic person option to specify the name of the
person who has modied the item in the list or library by clicking the specic specic person link or by opening the Dene Workow Lookup dialog
box and specifying the required values.
Select the Modied by a specic person option to specify the name of the
person who has modied the item in the list or library by clicking the specic specic person link or by opening the Dene Workow Lookup dialog
box and specifying the required values.
Select the The le size in a specic range kilobytes option to specify the
le size range of the items added to the list or library by clicking the size
links or by opening the Dene Workow Lookup dialog box and specifying
the required values.
tC
Do
Pl
ea
Re
160
se
In the Insert group, click Action and, from the drop-down list, select the desired
action that needs to be performed once the specic condition is fullled.
Select Send an Email, click the this message link, and in the Dene E-mail
Message dialog box, specify the required values.
fe
7.
No
ce
Ma
re
n
6.
In the To and CC text boxes, specify the required email addresses.
In the Subject text box, type the desired subject or click fx and, in the
Dene Workow Lookup dialog box, specify the required values that
need to be displayed in the Subject text box.
In the body text box, type the required text or click Add Lookup to
Body and, in the Dene Workow Lookup dialog box, specify the
required values that you want to appear as body text.
Select the Assign a To-do Item option and perform the necessary actions.
a.
Click the a to-do item link and, in the Custom Task Wizard, click
Next to specify a task, and in the Name text box, type the desired name
for the task and then if necessary, in the Description text box, type a
description. Click Finish to create a task.
b.
Click the these users link and, in the Select Users dialog box, in the
Type a Name or E-mail Address text box, type the desired email
address and click Add or, in the Or select from existing Users and
Groups list box, select the desired user names and click Add. Click
OK.
te
op
r
i
al
y
LESSON 7
8.
If necessary, to add a step, in the Insert group, click Step and then add the
desired conditions and actions.
9.
To check for errors, in the Save group, click Check for Errors.
10. Click OK.
12. Test the workow initiation.
ACTIVITY 7-1
ce
Creating an Approval Workow
tC
lish.
Ma
11. To save the workow and publish it to the server, in the Save group, click Pub-
Samantha_Developer.doc
No
Do
Data Files:
re
n
se
Setup:
Microsoft Outlook has been installed and congured as the default email client.
2.
Pl
ea
Re
fe
Scenario:
Now that the website design and the structure are ready, the recruitment manager has come up
with some requests. She wants certain tasks in the resume management process to be automated.
1. When the HR executive posts the resume to the document library, a task needs to
be assigned for the respective functional manager to review the document.
The functional manager should review and approve the resume. Once he checks
the document back in to the library with the comment Approved and marks the
task complete, the recruitment manager should receive an email asking her to
schedule an interview.
Following are the roles involved and their email IDs.
161
Susan Young (Human Resource Executive): syoung@ourglobalcompany.com
Maria Miller (Recruitment Manager): mmiller@ourglobalcompany.com
Bob Wheeler (Functional Manager): bwheeler@ourglobalcompany.com
te
op
r
i
al
y
LESSON 7
What You Do
1.
How You Do It
a. In the Navigation pane, click Human

Resources.
Define a new workflow.
b. Verify that the Site tab is selected.
c. In the New group, click List Workflow

and, from the drop-down list, select
Document Library.
Ma
d. In the Create List Workflow - Document

Library dialog box, in the Name text box,
type Approval Workflow
162
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce
e. In the Description text box, type

Approval workflow for HR tasks and
click OK.
LESSON 7
2.
a. On the Workflow tab, in the Insert group,

click Condition and, from the drop-down
list, select If any value equals value.
Specify the first step for the

workflow.
te
op
r
i
al
y
b. On the Approval Workflow page, click the

first instance of the value link and click
the Define workflow lookup button.
c. In the Define Workflow Lookup dialog
box, from the Field from source dropdown list, scroll down, select Name and
click OK.
d. Click the equals link and, from the dropdown list, select contains.
Inside Step 1, click below the condition

and, in the Insert group, click Action and
in the drop-down list, scroll down and in
the Task Actions category, select Assign a
To-do Item.
tC
f.
Ma
e. Click the value link and type Developer
ce
g. In the newly created action, click the a

to-do item link.
j.
Do
In the Name text box, type Resume Verification and press Tab.
re
n
i.
No
h. In the Custom Task Wizard, click Next to

create a new task.
In the Description text box, type Please

verify the resume. and click Finish to
complete the task creation process.
se
l.
To assign the task to Bob Wheeler, the

functional manager, in the Select Users
dialog box, in the Or select from existing
Users and Groups list box, select Bob
Wheeler and click Add.
Pl
ea
Re
fe
k. Click the these users link.
163
LESSON 7
te
op
r
i
al
y
m. Click OK.
164
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce
Ma
n. If necessary, in the Microsoft SharePoint

Designer message box, click OK.
LESSON 7
3.
a. On the Approval Workflow page, click

below and outside the borders of Step 1.
Specify the second step for the

workflow.
te
op
r
i
al
y
b. In the Insert group, click Step.

c. On the Workflow tab, in the Insert group,
d. On the Approval Workflow page, click the

f.
Ma
e. In the Define Workflow Lookup dialog

box, from the Field from source dropdown list, select Check In Comment and
click OK.
Click the equals link and, from the dropdown list, select contains.
g. Click the value link and type Approved
tC
No
ce
h. Within Step 2, click below the condition

and, in the Insert group, click Action and,
from the drop-down list, in the Core
Actions category, select Send an Email.
j.
In the Define E-mail Message dialog box,

next to the To text box, click the address
book button.
Do
Click the these users link.
re
n
i.
se
l.
Next to the Subject text box, click fx.
Pl
ea
Re
fe
k. In the Select Users dialog box, in the Or

select from existing Users and Groups
list box, select Maria Miller, click Add and
then click OK.
m. In the Lookup for String dialog box, from

the Field from source drop-down list,
scroll down and select Name.
n. Click OK.
o. Click in the body text box, type Hi, and
press Enter.
p. Type The resume and press the
165
LESSON 7
Spacebar.
s.
Click OK.
t.
Press the Spacebar, type has been

approved. and then click OK.
Ma
In the Lookup for String dialog box, from

tC
No
b. Observe that the message box says that

the workflow contains no errors.
c. Click OK.
Do
d. To save the workflow and publish it to the

server, in the Save group, click Publish.
Pl
ea
se
re
n
fe
Re
166
r.
a. In the Save group, click Check for Errors.
Check the workflow for errors.
ce
4.
te
op
r
i
al
y
q. Below the body text box, click Add or

Change Lookup.
LESSON 7
The following milestones must be performed
by the instructor.
Test the first step of the approval
workflow.
a. Switch to the GLOBAL\syoung login

account.
te
op
r
i
al
y
5.
b. Launch Internet Explorer.
c. In the Internet Explorer window, in the

address bar, click, type http://ogc:[Port
Number]/HumanResources/default.aspx
and press Enter.
As the testing of the approval

workow involves different
logins and can be completed
only once for this document
upload, this part of the activity
is performed as an instructor
demo.
d. In the HR Documents Library Web Part,

click Add document.
f.
Ma
e. In the Document Library : Upload Document dialog box, click Browse.
In the Choose file dialog box, navigate to

the 084699Data\Automating Business
Processes with Workflows folder.
tC
ce
g. Select Samantha_Developer and click

Open.
se
Pl
ea
fe
Re
Do
On the HR Document Library Web Part, in

the Name column, place the mouse
pointer over the Samantha_Developer
document link and, from the drop-down
list, choose Workflows.
re
n
i.
No
h. In the Document Library : Upload Document dialog box, click OK.
j.
On the Document Library: Workflows :

Samantha_Developer page, click the
Approval Workflow link.
167
LESSON 7
k. To manually start the workflow, on the
Approval Workflow page, click Start.
In the HR Tasks Web Part, observe that a
new task has been created and assigned
to Bob Wheeler.
te
op
r
i
al
y
l.
m. Close Internet Explorer.
n. Switch to the GLOBAL\bwheeler login

account.
o. Choose StartE-mail to launch Microsoft

Office Outlook.
Ma
p. If necessary, on the Home tab, in the

Send/Recieve group, click Send/Receive
All Folders.
q. In the Inbox, select the new email.
168
se
Do
No
tC
In the Reading Pane, observe that the

email specifies that the resume verification task has been assigned to you.
Pl
ea
Re
fe
re
n
ce
r.
LESSON 7
6.
Test the second step of the approval

workflow.
a. In the Reading Pane, click the Samantha_

Developer.doc link and, in the File
Download dialog box, click Open.
te
op
r
i
al
y
b. Select the File tab.
c. In the Info category, from the Manage

Versions drop-down list, select Check
Out.
d. View the document.
e. Select the File tab.
In the Info category, click Check In.
f.
Ma
g. In the Check In dialog box, in the Version

Comments text box, type Approved.
Please schedule an interview. and click
OK.
Minimize the Outlook application.
ce
i.
Launch Internet Explorer.
No
j.
tC
h. Close Samantha_Developer.doc.
se
In the HR Tasks Web Part, in the Title

column, place the mouse pointer over the
new Resume Verification task link and,
from the drop-down list, select Edit Item.
Pl
ea
Re
fe
l.
Do
re
n
k. In the Internet Explorer window, in the

and press Enter.
169
LESSON 7
m. In the HR Tasks: Resume Verification
window, click Complete Task.
te
op
r
i
al
y
n. Close Internet Explorer.

o. Switch to the GLOBAL\mmiller login
account.
p. Choose StartE-mail to launch Microsoft

Office Outlook.
q. If necessary, on the Home tab, in the
All Folders.
In the Inbox, select the new email.
Ma
r.
In the Reading Pane, observe that the

email specifies that the resume has been
approved.
t.
Close Microsoft Office Outlook.
tC
s.
TOPIC B
No
v. Open SharePoint Designer.
Do
re
n
ce
u. Switch to your user login.
se
Modify a Workow
Pl
ea
fe
You have now created a workow using SharePoint Designer. You can modify the workow to
further include additional steps and decision points without the need to recreate the workow.
In this topic, you will modify a workow.
Re
When building an application, there will be times when you may need to revisit the design and
rework the application to accommodate the changes. Implementing these changes can be time
consuming and may take a lot of effort to x. But not with SharePoint Designer. SharePoint
Designer enables you to make modications to your existing workows easily without the
need to build the workow again from scratch.
170
LESSON 7
How to Modify a Workow
To modify a workow:
te
op
r
i
al
y
Procedure Reference: Modify a Workow
1.
Open the site containing the workow you want to modify.
2.
Open the workow in edit mode.
3.
If necessary, make the desired changes to the workow.
Add a new step and specify the required actions and conditions.
Add a new condition or modify an existing condition in a workow step.
Add a new action or modify an existing action in a workow step.
Add a new else-if clause to a workow step.
Ma
If necessary, in the Workow Summary page, in the Start Options section,

uncheck/check the required options.
Check the Allow this workow to be manually started from an item

check box to initiate the workow manually.
Check the Automatically start this workow when a new item is created
check box to initiate the workow when a new item is created in the list or
library on which the workow is based.
Check the Automatically start this workow whenever an item is changed

check box to initiate the workow when an item in the selected list or library
changes.
6.
Test the workow.
re
n
ACTIVITY 7-2
Modifying a Workow
No
In the Save group, click Check for Errors.
Do
5.
tC
ce
4.
Data Files:
Shannon_Developer.doc
Re
se
Pl
ea
fe
Scenario:
Your HR team has started working in the approval workow and they want some more
enhancements to be made to the approval workow.
1. The workow needs to be started once a document is uploaded to the document
library.
171
LESSON 7
2.
When the functional manager checks the document in to the library with the comment Rejected and marks the task complete, the human resource executive
should receive an email.
Bob Wheeler (Functional Manager): bwheeler@ourglobalcompany.com
172
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce
Ma
te
op
r
i
al
y
Following are the roles involved and their email IDs.
Susan Young (Human Resource Executive): syoung@ourglobalcompany.com
LESSON 7
What You Do
How You Do It
1.
a. In the Navigation pane, click Workflows.
Create an else-if branch for step two.
te
op
r
i
al
y
b. In the Gallery page, click the Approval

Workflow link.
c. In the Approval Workflow summary page,

in the Customization section, click the
Edit workflow link.
d. In the Approval Workflow page, click
below the Email Maria Miller action.
f.
Ma
e. To insert an else block, in the Workflow

tab, in the Insert group, click Else-If
Branch.
On the Workflow tab, in the Insert group,

tC
ce
g. On the Approval Workflow page, click the

No
h. In the Define Workflow Lookup dialog

box, from the Field from source dropdown list, select Check In Comment and
click OK.
j.
Click the value link and type Rejected
Do
Click the equals link and, from the dropdown list, select contains.
re
n
i.
se
Pl
ea
Re
fe
k. Click below the condition and, in the

Insert group, click Action and, from the
drop-down list, in the Core Actions category, select Send an Email.
l.
Click the these users link.
m. In the Define E-mail Message dialog box,

next to the To text box, click the address
book button.
n. In the Select Users dialog box, in the Or

select from existing Users and Groups
list box, select Susan Young, click Add
and then click OK.
173
LESSON 7
o. Next to the Subject text box, click fx.
te
op
r
i
al
y
p. In the Lookup for String dialog box, from

q. Click OK.
Click in the body text box and type This

resume has been rejected.
No
Pl
ea
Re
174
a. In the Save group, click Check for Errors.
se
Check the workflow for errors.
fe
2.
Click OK.
Do
re
n
ce
s.
tC
Ma
r.
b. Observe that the message box says that

the workflow contains no errors.
c. Click OK.
LESSON 7
3.
Set the approval workflow to start

automatically.
a. In the Navigation Bar, click Approval

Workflow.
te
op
r
i
al
y
b. In the Approval Workflow summary page,

in the Start Options section, uncheck the
Allow this workflow to be manually
started check box.
c. Check the Start workflow automatically
when an item is created check box.
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce
Ma
d. To save the workflow and publish it to the

server, in the Save group, click Publish.
175
LESSON 7
The following milestones must be performed
by the instructor.
a. Switch to the GLOBAL\syoung login
account.
Test the first step of the approval

workflow.
te
op
r
i
al
y
4.
Because the approval workow

involves so many separate
logins and can be completed
only once for this document, it
needs to be performed by the
instructor as a demo.
b. Launch IE.
c. In the Internet Explorer window, in the

and press Enter.
d. In the HR Document Library Web Part,
click Add document.
Ma
e. In the Document Library - Upload Document window, click Browse.

f.
In the Choose file dialog box, navigate to

the 084699Data\Automating Business
Processes with Workflows folder.
176
tC
No
h. Click OK to upload the document.

Switch to the GLOBAL\bwheeler login
account.
j.
Launch Internet Explorer.
Do
i.
k. In the Internet Explorer window, in the

and press Enter.
se
Pl
ea
Re
fe
re
n
ce
g. Select Shannon_Developer.doc and click

Open.
l.
On the default.aspx page, in the HR

Tasks Web Part, observe that a new task
has been created without the workflow
being manually initiated.
m. Launch Microsoft Office Outlook.

n. In the Inbox, select the new email.
o. Observe that the new email specifies that
the resume verification task has been
assigned to you.
LESSON 7
5.
Test the second step of the approval

workflow.
a. In the Reading Pane, click the Shannon_

Developer.doc link and, in the File
Download dialog box, click Open.
te
op
r
i
al
y
b. Select the File tab.
c. On the Info tab, from the Manage Versions drop-down list, select Check Out.
d. View the document.
e. Select the File tab.
On the Info tab, click Check In.
f.
Ma
g. In the Check In dialog box, in the Version

Comments text box, type Rejected. and
click OK.
h. Close Shannon_Developer.doc.
In Internet Explorer, in the HR Tasks Web

Part, in the Title column, place the
mouse pointer over the second Resume
Verification task and, from the drop-down
list, select Edit Item.
No
Do
se
Pl
ea
Re
fe
re
n
ce
j.
Switch to the Internet Explorer window.
tC
i.
k. In the HR Tasks - Resume Verification

window, click Complete Task.
l.
Close Internet Explorer and then close

Outlook.
m. Switch to the GLOBAL\syoung login

account.
n. Launch Microsoft Office Outlook.
177
LESSON 7
o. If necessary, on the Home tab, in the
All Folders.
te
op
r
i
al
y
p. In the Inbox, select the new email.
q. In the Reading Pane, observe that the

new email specifies that the resume has
been rejected.
r.
Ma
Lesson 7 Follow-up
Close Microsoft Office Outlook.
In this lesson, you created and modied a workow. SharePoint Designer enables you to integrate business rules and workow logic into your SharePoint sites without the need to write
any code and ensures that your business processes are automated, increasing your workforce
efficiency.
Which type of workflow will you use in your workplace? Why?
tC
1.
Give an example of a scenario in your workplace where you think employing a

workflow will make things much simpler.
No
2.
ce
Answers will vary but may include the site workflow because the business process in the
company is not dependent on particular lists but is generic.
178
Do
se
Pl
ea
Re
fe
re
n
Answers will vary but may include the review process in the organization. Once the document is developed, the lead should get an email automatically that the task has been
assigned to him. The lead can then review the document and upon completion the developers should be sent emails automatically.
Follow-up
FOLLOW-UP
1.
te
op
r
i
al
y
In this course, you used Microsoft Windows SharePoint Designer 2010 to create and
modify a SharePoint site. SharePoint Designer enables you to create and customize Microsoft
SharePoint sites and build sophisticated application interfaces and workows on the SharePoint
platform.
Why do you think you will you use SharePoint Designer to build websites in your organization and not any other application?
Answers will vary but may include that other website designing applications do not have
the ability to create workflows and libraries.
2.
Which feature of SharePoint has impressed you the most? How will you leverage it?
Answers will vary but may include document libraries because it will make sharing documents much easier.
Ma
Whats Next?
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce
Microsoft Windows SharePoint Designer 2010 Level 1 is the rst course in a two-part
series. The next course is Microsoft Windows SharePoint Designer 2010 Level 2.
179
180
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce
Ma
te
op
r
i
al
y
NOTES
te
op
r
i
al
y
LESSON
LABS
LESSON LABS
Activity Time:
15 minutes
No
ce
Getting Familiar with SharePoint Designer
tC
LESSON 1 LAB 1
Ma
Due to classroom setup constraints, some labs cannot be keyed in sequence immediately following their associated lesson. Your instructor will tell you whether your labs can be practiced
immediately following the lesson or whether they require separate setup from the main lesson
content. Lesson-level lab setup information is listed in the front of this manual in the course
setup section.
Do
1.
re
n
Scenario:
You are planning to design a website for your company. But before you begin with the designing process, you want to familiarize yourself with the SharePoint Designer interface and also
customize the SharePoint Designer environment to suit your requirements.
Click on various tabs on the SharePoint Designer ribbon.
b) File tab
c) Site tab
Re
d) Home tab
Lesson Labs
Pl
ea
fe
a) Insert tab
se
Which tab contains options to rename or delete a site?
181
LESSON
LABS
2.
Review the options available on each tab.

Which option on the File tab allows you to import files into the site?
b) Sites
c) Add Item
d) Options
te
op
r
i
al
y
a) Pages
Access SharePoint Designer Help and find information on how to customize the
Ribbon.
4.
Based on the information obtained, customize the Ribbon according to your needs.
5.
Add commands that you might use frequently to the Quick Access toolbar.
LESSON 2 LAB 1
Data Files:
contactus nance.jpg
banner1.JPG
re
n
No
20 minutes
Do
Activity Time:
ce
Creating the Layout of a Subsite
tC
Ma
3.
Create a new one page subsite named Finance.
fe
1.
Create a new master page and name it layout.master.
3.
Create a layer at the top of the page using these specifications.

Width: 991 pixels
Height: 117 pixels
Left: 12 pixels
Top: 11 pixels
Pl
ea
2.
Re
182
se
Scenario:
You are assigned to create a subsite for the Finance team in your organization. You have been
given the layout specications as well as the initial set of images for creating the site.
Create a second layer below layer 1 with these specifications.
5.
Height: 420 pixels

Left: 12 pixels
Top: 132 pixels
Create a third layer below layer 1 and to the right of layer 2 with these specifications.
6.
Width: 181 pixels
te
op
r
i
al
y
Width: 608 pixels

Height: 420 pixels
Left: 197 pixels
Top: 132 pixels
Create a fourth layer below layer 1 and to the right of layer 3 with these specifications.
Width: 190 pixels
Ma
4.
LESSON
LABS
Height: 420 pixels

Left: 810 pixels
Top: 132 pixels
8.
Add blue as the background color to layer 2.
9.
From the C:\084699Data\Creating a Subsite\Lab folder, add the contactus

finance.JPG image to layer 4 and set Contact Us as alternate text.
No
re
n
10. Make layer 3 the content region and name it Content.
tC
From the C:\084699Data\Creating a Subsite\Lab folder, add the banner1.JPG

image to layer 1 and set Our Global Company as alternate text.
ce
7.
Lesson Labs
Do
se
Pl
ea
Re
fe
11. Save the master page and then save the images in the images folder.
183
LESSON
LABS
LESSON 3 LAB 1
te
op
r
i
al
y
Adding Content to Web Pages

Activity Time:
15 minutes
nancialreports.aspx
guidelines.aspx
contactusnance.aspx
sean.JPG
importantdates.aspx
homepage.doc
Ma
Data Files:
Open the default.aspx page of the Finance subsite and attach it to the
default.master page.
2.
On the default.aspx page, in the PlaceHolderPageDescription (Master) region,

insert a table with one row and two columns.
No
re
n
ce
1.
4.
Change the color of the text to blue.
5.
From the C:\084699Data\Adding Content\Lab folder, insert the sean.JPG image

in the second column of the default.aspx page.
Pl
ea
se
Do
From the C:\084699Data\Adding Content\Lab folder, open the homepage.doc

file. Copy all the text from the file and paste it on the first row of the
default.aspx page using the Normal Paragraphs without line breaks option.
fe
3.
Remove the black border from the sean.JPG image.
7.
From the C:\084699Data\Adding Content\Lab folder, import the

financialreports.aspx, guidelines.aspx, importantdates.aspx, and
contactusfinance.aspx pages into the Finance subsite.
Re
6.
8.
184
tC
Scenario:
The layout of the site is ready. You want to create web pages with the same layout and add
relevant content to the pages.
Attach the financialreports.aspx, guidelines.aspx, and contactusfinance.aspx

pages to the Layout.master page.
LESSON
LABS
LESSON 4 LAB 1
te
op
r
i
al
y
Formatting Web Pages Using CSS

Activity Time:
20 minutes
Data Files:
background.jpg
In the Finance site, create a style for the header (h2) text and para (p) text in a
new style sheet.
Do
re
n
Style properties for para text:

font-family: Arial
font-size: 12px
No
ce
Style properties for header text:

font-family: Arial
font-size: 16
font-weight: bold
color: #DB673E
tC
1.
Ma
Scenario:
You have nished adding the required pages to the Finance team subsite of the Our Global
Company site. You realize that you have yet to format the text and other elements on the web
pages. Instead of applying formatting to individual pages, you decide to use CSS and apply
formatting to all the pages at once.
3.
Save the external style sheet as styles.css in the CSS folder.
4.
Attach style.css to layout.master.
5.
Save layout.master.
6.
Open financetargets.aspx.
Pl
ea
Re
Lesson Labs
se
From the C:\084699Data\Working with Cascading Style Sheets\Lab folder, set

the background.JPG image as the page background in the style sheet.
fe
2.
185
Create class-based styles for blue and gray backgrounds.

Style properties for the .bluebg style:
font-family: Arial
font-size: small
background-color: #3333FF
Style properties for the .blackbg style:
font-family: Arial
font-size: small
background-color: Black
te
op
r
i
al
y
7.
In the financetargets.aspx page, apply the .bluebg style to the first row and
.blackbg to the rest of the rows of the table.
9.
Move the .bluebg and .blackbg styles to style.css.
ce
LESSON 5 LAB 1
Linking Pages on a Website

Activity Time:
re
n
20 minutes
tC
10. Save all pages.
Ma
8.
No
LESSON
LABS
186
Pl
ea
On the Layout.master page, on the right side image, create a rectangular hotspot
around the text Contact Us. Link it to contactusfinance.aspx, and save the
page.
Re
2.
se
On the contactusfinance.aspx page, add an email hyperlink

finance@ourglobalcompany.com after the last sentence and save the page.
fe
1.
Do
Scenario:
The Finance subsite now contains a number of standalone web pages. You want to interlink the
web pages, so that the user can navigate the site easily. You would also like to provide a functionality that allows users to contact the nance team.
3.
On the guidelines.aspx page, select the Late Stay Reimbursement section heading and add a bookmark with the same name.
4.
Select the second line on the page and convert it into a hyperlink targeting the
Late Stay Reimbursement bookmark.
Similarly, add a bookmark and a hyperlink for the Local Conveyance section. Save
the page and test the bookmark.
6.
Save and preview the pages.
LESSON 6 LAB 1
Working with SharePoint Components
Activity Time:
Ma
10 minutes
te
op
r
i
al
y
5.
LESSON
LABS
tC
Scenario:
In order to share information among the team members of the Finance department, you want
to have a Tasks list and a Document Library on the home page of the subsite. You also want
to add the check in comment eld to the Document Library Web Part.
Add a Tasks list and a Document Library to the Finance subsite. Name them
Finance Tasks and Invoice Library, respectively.
2.
Insert a Web Part zone in the default.aspx page of the Finance subsite.
3.
Add the Finance Tasks list and the Invoice Library document library to the
default.aspx page of the Finance subsite.
4.
Add the Check In Comment field to the Finance Document Library Web Part.
5.
Preview the default.aspx page.
Lesson Labs
No
Do
se
Pl
ea
Re
fe
re
n
ce
1.
187
LESSON
LABS
LESSON 7 LAB 1
te
op
r
i
al
y
Creating a Workow
Activity Time:
30 minutes
Data Files:
Invoice.doc
Ma
Scenario:
The development of the Finance subsite is complete. You now want to automate the process of
the invoice approval process. The process is as follows.
1. When the employee posts the invoice to the document library, a task needs to be
assigned for his functional manager to inspect the invoice.
3.
Once the invoice is checked back into the library with the comment Approved,
the nance executive should receive an email asking him to process the invoice.
4.
If the invoice is checked into the library with the comment Rejected, the
employee should receive an email asking him to make the necessary changes.
No
2.
Specify that the workflow should start automatically whenever a new item is created.
3.
Add a workflow step, then add a condition and then set it to perform an action if
the name of the document contains the word Invoice.
4.
Set the workflow to assign a task called Invoice Verification to the manager
once the document has been uploaded.
se
fe
Do
In the Finance site, create a workflow named Invoice Approval and associate it
with the Document Library.
re
n
1.
Create a new step and set the workflow to send an email to the finance assistant
if the checkin comment specifies that the document has been approved.
6.
Create an else-if branch to send an email back to the employee if the document
has been rejected by the manager.
7.
Check the workflow for errors and finish the workflow.
Pl
ea
5.
Re
188
tC
The functional manager, on viewing the task, checks out the invoice, inspects it
and places his comments while checking it back into the library. He also completes the task assigned to him.
ce
2.
8.
LESSON
LABS
Test the workflow.
Lesson Labs
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce
Ma
te
op
r
i
al
y
During testing, from the C:\084699Data\Automating Business Processes with Workows\Lab folder, import
the Invoice.doc le into the document library.
189
190
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce
Ma
te
op
r
i
al
y
NOTES
te
op
r
i
al
y
GLOSSARY
GLOSSARY
behavior
A combination of an event and a resulting
action. It helps you to add interactivity to the
websites you create.
event
A parameter that triggers an action.
external style sheet

A style sheet in which styles are dened on a
separate page.
ce
bookmark link
A hyperlink that connects to a specic target
location either within the same page or on a
different page.
declaration
A part of style rule that contains the list of
properties and values.
fe
content region
A region dened in a master page that facilitates the addition of content that changes with
each page.
hyperlink
A text or image link on a web page that connects to another section of the same page or
another web page.
Import dialog box
A dialog box that allows you to add les and
even entire folders to the website folder.
Pl
ea
Re
context menu
A menu that appears when you right-click
elements such as toolbars and task panes.
Do
hyperlink state
The status of a hyperlink as dened by user
activity.
se
condition
A condition, when true is returned, triggers an
action.
No
hotspot
A hyperlink that is dened for a part of an
image.
re
n
bookmark
A label given to a specic section of a web
page.
tC
Apply Styles task pane

A task pane that provides you with options to
create a new style, attach an external style
sheet, and list all the styles available in different categories.
CSS
(Cascading Style Sheet) A style language that
can control the appearance of documents written in HTML, XML or XHTML languages.
Ma
action
Performed when triggered by an event.
CSS Properties task pane

A context-sensitive task pane that enables you
to add and modify the CSS properties of the
selected element.
inline style sheet

A style sheet that affects the HTML element
(tag) that it is directly applied to.
internal style sheet
A style sheet, also called an embedded style
sheet, controls the formatting for the web
page on which it is embedded.
CSS rule
A rule that denes the syntax of a style.
Glossary
191
GLOSSARY
workow
Comprises a series of tasks performed in succession to produce a nal outcome.
Manage Styles task pane

A powerful CSS tool used to manage styles.
master page
An ASP.NET page that enables you to automatically display the standard elements of a
website on all pages.
selector
A keyword that selects the element you want
to style.
SharePoint document library

A content structure in a SharePoint site that
contains les.
site collection
A collection of websites on a web server.
Do
re
n
style
A set of formatting options, which are dened
in a CSS.
No
ce
SharePoint list
A content structure in a SharePoint site that
contains a group of similar items.
tC
Ma
SharePoint Designer Help

A feature in SharePoint Designer that acts as
a central location where you can learn how to
work with the software, solve problems, and
obtain product support information.
te
op
r
i
al
y
layers
Containers in a web page that can be stacked
one on top of the other.
subsite
A website that is stored inside a top-level site.
se
fe
Tag Properties task pane

A context-sensitive task pane that displays all
the properties of a selected tag.
Pl
ea
Re
top-level site
The main site where the administrator settings
for a site collection are changed.
Web Part zone
A container that contains one or more Web
Parts.
Web Part
The basic design element of a SharePoint site
that contains information.
192
INDEX
A
attaching to web pages, 86

building, 85
modifying, 97
Add Item category

groups in, 21
Apply Styles task pane, 84
Attach Style Sheet dialog box, 84
F
G
behaviors, 124
example of, 124
types of, 125
Behaviors task pane
options in, 125
Bookmark dialog box, 120
bookmark links, 120
bookmarks, 120
groups
Font, 52
Paragraph, 53
re
n
content regions, 39
creating on master pages, 44
context menus, 41
CSS, 80
types of, 80
CSS Properties task pane, 128
CSS rules, 81
Edit Browser List dialog box, 42

events, 127
types of, 127
external style sheets
Index
se
image hyperlinks
creating, 105
images
editing, 74
replacing using the Tag Properties task pane,
74
Import dialog box, 51
Insert Hyperlink dialog box
options in, 103
Insert tab
groups in, 26
Insert Table dialog box, 65
internal style sheets
creating, 93
Pl
ea
Re
fe
Dene E-mail Message dialog box, 158

options in, 159
Displayed Fields dialog box, 144
options in, 144
downloadable les, 106
downloadable hyperlinks
creating, 106
Do
No
ce
hexadecimal values, 43
Home tab
groups in, 25
hotspots, 117
creating, 117
hyperlink states, 104
hyperlinks, 102
editing, 107
tC
Ma
File tab, 2
te
op
r
i
al
y
INDEX
L
layers, 27
193
INDEX
Q
adding text to, 42

formatting, 42
Z-index of, 29
Layers pane
options in, 30
Layout tab
groups in, 28
Link tag
vs. CSS Import rule, 84
te
op
r
i
al
y
Quick Access toolbar

adding commands to, 15
removing commands from, 15
Quick Tag Editor, 53
Ribbon
adding commands to, 16
No
ce
Navigation pane, 7
New Style dialog box
options in, 83
194
Do
Pl
ea
Re
fe
page layout
creating, 32
Page Properties dialog box
tabs in, 104
page size
setting, 31
page views
types of, 26
Pages category, 5
Paste
vs. Paste Text, 51
Paste Text dialog box
options in, 50
Picture Tools section
groups in, 72
se
re
n
Open Browser Window dialog box

options in, 127
options
Preview in Browser, 42
Save Embedded Files dialog box, 40

screen tips, 106
Select a Master Page dialog box
options in, 41
Select Users dialog box, 158
options in, 158
and the Ribbon, 2
creating rich applications, 2
SharePoint Designer Help, 11
getting help from, 12
navigating, 11
SharePoint Designer interface
elements on, 6
SharePoint Designer Options dialog box
tabs in, 14
SharePoint document libraries, 136
adding to a website, 138
types of, 137
SharePoint lists, 134
types of, 135
SharePoint sites
adding an ASPX page to, 31
opening, 8
site collections, 20
Site Summary Page
sections in, 8
Site tab, 4
Sites category, 4
Spelling dialog box
options in, 52
src attribute, 74
standard layout components, 30
Style tab
groups in, 82
styles, 81
categories of, 83
subsites, 20
tC
Manage Content Regions

options in, 39
Manage Styles task pane, 97
master pages, 29
adding images to, 43
creating, 31
menus
Help, 11
Modify Page Sizes dialog box, 31
Ma
INDEX
administrative settings for, 20
creating, 23
Subsites tab
groups in, 23
te
op
r
i
al
y
sections in, 142

Web Part zones, 141
Web Parts, 140
customizing, 145
inserting in web pages, 145
websites
addling lists to, 138
importing web pages into, 54
wizards
Custom Task, 157
workow locations, 154
workow source les, 155
WorkFlow tab
groups in, 157
workows, 154
components of, 155
creating, 159
steps in, 156
types of, 155
Index
Pl
ea
Re
fe
web pages
adding a title to, 53
attaching master pages to, 54
creating bookmark links to, 120
dening text using the <pre> HTML tag, 51
formatting text on, 55
importing external content into, 54
opening in a new browser, 128
renaming, 53
spell-checking, 55
transferring source content to, 56
types of, 20
Web Part Properties dialog box, 141
properties available in the Advanced section,
143
properties available in the Appearance section,
142
properties available in the Layout section, 143
se
re
n
View tab
groups in, 29
No
Do
URL addresses
relative/absolute, 103
URLS
linking, 103
user interface options
specifying, 16
ce
tC
Ma
tables
formatting, 66
using in web pages, 65
tabs
File, 2
Layout, 65
Site, 2
Tag Properties task pane
categories for an ASPX Control in, 73
text hyperlinks
formatting, 107
top-level sites, 20
195
196
tC
No
Do
se
Pl
ea
Re
fe
re
n
ce
Ma
te
op
r
i
al
y
NOTES
se
Pl
ea
Do
te
op
r
i
al
y
Ma
tC
ce
No
re
n
fe
Re

Share Point Designer 2010 Level 1

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Share Point Designer 2010 Level 1

Diunggah oleh

Hak Cipta:

Format Tersedia

te

Microsoft Windows SharePoint

Microsoft Windows SharePoint

Microsoft Windows SharePoint Designer 2010 - Level 1

MICROSOFT WINDOWS SHAREPOINT

SharePoint Designer 2010 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

The File Tab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

The Site Tab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

The Sites Category . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

The Pages Category . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

The SharePoint Designer Interface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

The Navigation Pane . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

A. Identify SharePoint Designer Interface Components . . . . . . . . . . . . . . . . .

The Site Summary Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

B. Get Help in SharePoint Designer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Help Navigation Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

LESSON 2 - CREATING A SUBSITE

SharePoint Designer Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

A. Create a Blank Subsite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

The Subsites Tab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Types of Page Views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

The Layout Tab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

The Master Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

C. Add Content to a Master Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

The Manage Content Regions Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . 39

The Select a Master Page Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

The Preview in Browser Option . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

LESSON 3 - ADDING CONTENT TO THE SITE

A. Add and Format Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

The Paste Text Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

The Font Group . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

The Paragraph Group . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

The Quick Tag Editor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

B. Work with Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

The Insert Table Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

C. Work with Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

LESSON 4 - FORMATTING A SITE WITH CASCADING STYLE SHEETS

A. Create an External Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

Cascading Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

Types of Cascading Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

Cascading Style Sheet Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

The New Style Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

The Attach Style Sheet Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

The Apply Styles Task Pane . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

B. Create Internal Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

LESSON 5 - LINKING WEB PAGES

The Manage Styles Task Pane . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

A. Add Hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

The Page Properties Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

B. Create a Hotspot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

Bookmark Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

The Bookmark Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

The Behaviors Task Pane . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

The Open Browser Window Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

LESSON 6 - ADDING SHAREPOINT COMPONENTS TO THE SITE

A. Add Lists and Libraries to the Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

Types of Document Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

B. Add Web Parts to a Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

Web Parts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

Web Part Zones. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

The Displayed Fields Dialog Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144

LESSON 7 - AUTOMATING BUSINESS PROCESSES WITH WORKFLOWS

SharePoint Workows. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

WorkFlow Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155