Sharepointdesigner2007f Training Manual

Foundation Training Manual
SharePoint Designer 2007

Table of Contents
Section 1: Getting Started .............................................................................................................. 1

Lesson 1.1: Starting Out ........................................................................................................................ 2
What is SharePoint Designer? ............................................................................................................................. 2
What’s New in SharePoint Designer 2007? .........................................................................................................3
Opening SharePoint Designer ............................................................................................................................. 5
Interface Overview ...............................................................................................................................................8
Closing SharePoint Designer ............................................................................................................................. 11
Lesson 1.2: Interacting With SharePoint Designer ........................................................................... 12
Using SharePoint Designer’s Menus ................................................................................................................. 12
Using the Common Toolbar ............................................................................................................................... 15
Moving Toolbars ................................................................................................................................................ 18
Hiding and Showing Toolbars ........................................................................................................................... 20
Using the Status Bar .......................................................................................................................................... 21
Lesson 1.3: Working With Files .......................................................................................................... 27
Understanding Web Pages and Web Sites ......................................................................................................... 27
Opening Pages ................................................................................................................................................... 29
Saving Pages ...................................................................................................................................................... 31
Switching Between Open Pages ......................................................................................................................... 33
Closing Pages .................................................................................................................................................... 34
Lesson 1.4: Getting Help in SharePoint Designer.............................................................................. 37
Using the Help Menu ......................................................................................................................................... 37
Using the Help Screen........................................................................................................................................ 42
Using the Ask a Question Box ............................................................................................................................ 48
Getting Help in a Dialogue Box ......................................................................................................................... 49
Lesson 1.5: Web Design 101................................................................................................................. 50
Understanding the Structure of a Web Site ........................................................................................................ 50
Laying Out Your Web Site .................................................................................................................................. 54
Creating User-Friendly Links ............................................................................................................................ 57
An Introduction to SharePoint Services ............................................................................................................. 61
Section 1: Review Questions ................................................................................................................ 63
Section 2: Creating a Basic Page ................................................................................................ 65

Lesson 2.1: Creating a Basic Page ....................................................................................................... 66
Choosing a Page Type ....................................................................................................................................... 66
Laying Out a Web Page ..................................................................................................................................... 68
Design View vs. Code View ................................................................................................................................ 73
Using the Toolbox .............................................................................................................................................. 76
Lesson 2.2: Adding Text ....................................................................................................................... 80
Typing Text......................................................................................................................................................... 80
Inserting Hyperlinks ........................................................................................................................................... 82
Using Basic Styles and Effects ........................................................................................................................... 87
Using Find ......................................................................................................................................................... 89
Using Replace .................................................................................................................................................... 93
Lesson 2.3: Adding Elements ............................................................................................................... 95
Inserting Symbols ............................................................................................................................................... 95
Adding Photos .................................................................................................................................................... 97
Inserting Files .................................................................................................................................................. 100
Adding Buttons ................................................................................................................................................. 103
Lesson 2.4: Adding Advanced Elements ........................................................................................... 106
Adding Forms................................................................................................................................................... 106
Adding Text Inputs and Areas .......................................................................................................................... 109
Adding Input Buttons ....................................................................................................................................... 113
Using Labels and Radio Buttons ...................................................................................................................... 115
Adding Advanced Buttons ................................................................................................................................ 118
Adding Drop-Down or Group Boxes ............................................................................................................... 120
Section 2: Review Questions .............................................................................................................. 127
Section 3: Creating Sites and Advanced Pages ........................................................................ 129

Lesson 3.1: Creating and Opening a Site.......................................................................................... 130
The File Structure of a Web Site ...................................................................................................................... 130
Opening an Existing Site .................................................................................................................................. 131
Creating a Blank Site ....................................................................................................................................... 133
Creating a Site from a Template ...................................................................................................................... 136
Importing a Web Site........................................................................................................................................ 139
Lesson 3.2: Navigating Through Your Site ...................................................................................... 144
Using the Folder List ....................................................................................................................................... 144
Switching Views in the Main Pane ................................................................................................................... 148
Viewing Site Reports ........................................................................................................................................ 153
Modifying Site Settings..................................................................................................................................... 156
Lesson 3.3: Modifying Site Pages ...................................................................................................... 158
Inserting a Page ............................................................................................................................................... 158
Deleting a Page................................................................................................................................................ 160
Moving a Page ................................................................................................................................................. 161
Copying a Page ................................................................................................................................................ 164
Creating a New Page from an Existing Page................................................................................................... 168
Lesson 3.4: Modifying Page Properties ............................................................................................ 170
Changing the Hyperlink Color ......................................................................................................................... 170
Setting the Background .................................................................................................................................... 173
Setting Margin Size .......................................................................................................................................... 177
Setting the Language ........................................................................................................................................ 180
Assigning a Category ....................................................................................................................................... 181
Lesson 3.5: Adding Folders to your Site ........................................................................................... 184
Creating Folders .............................................................................................................................................. 184
Moving Pages into Folders .............................................................................................................................. 187
Renaming Folders ............................................................................................................................................ 188
Deleting Folders .............................................................................................................................................. 189
Copying Folders............................................................................................................................................... 190
Section 4: Doing More with Text .............................................................................................. 194

Lesson 4.1: Editing Text ..................................................................................................................... 195
Selecting Text ................................................................................................................................................... 195
Cutting, Copying, and Pasting Text ................................................................................................................. 198
Using the Format Painter ................................................................................................................................ 202
Using Undo and Redo ...................................................................................................................................... 203
Using the Office Clipboard .............................................................................................................................. 204
Lesson 4.2: Editing Text with the Formatting Toolbar ................................................................... 209
Changing the Font Type ................................................................................................................................... 209
Changing the Font Size .................................................................................................................................... 211
Changing the Font Color ................................................................................................................................. 212
Adding Highlighting ......................................................................................................................................... 214
Lesson 4.3: Advanced Text Formatting ............................................................................................ 216
Using the Font Dialogue .................................................................................................................................. 216
Modifying Character Spacing .......................................................................................................................... 218
Adding Bullets and Numbers ............................................................................................................................ 220
Adding Borders and Shading ........................................................................................................................... 223
Using the Paragraph Dialogue ........................................................................................................................ 228
Lesson 4.4: Editing and Reference Tools .......................................................................................... 230
Using Spell Check ............................................................................................................................................ 230
Using the Clip Art Task Pane........................................................................................................................... 232
Using the Thesaurus......................................................................................................................................... 238
Lesson 4.5: Using Layers.................................................................................................................... 241
What are Layers? ............................................................................................................................................. 241
Adding Layers .................................................................................................................................................. 242
Using Layers .................................................................................................................................................... 247
Removing Layers .............................................................................................................................................. 252
Section 5: Printing and Viewing Your Site ............................................................................... 255

Lesson 5.1: Managing Windows ........................................................................................................ 256
Using Minimize, Maximize, and Restore .......................................................................................................... 256
Arranging Windows ......................................................................................................................................... 258
Previewing Your Site in a Browser .................................................................................................................. 261
Changing the Browser List............................................................................................................................... 265
Lesson 5.2: Using Page Views ............................................................................................................ 267
Using Design View ........................................................................................................................................... 267
Using Code View .............................................................................................................................................. 269
Using Split View ............................................................................................................................................... 270
Changing the Page Size ................................................................................................................................... 272
Lesson 5.3: Setting your Site up for Printing ................................................................................... 276
Using Page Setup ............................................................................................................................................. 276
Opening Print Preview..................................................................................................................................... 280
The Print Preview Toolbar............................................................................................................................... 282
Using Zoom in Print Preview ........................................................................................................................... 284
Navigating Print Preview ................................................................................................................................. 285
Lesson 5.4: Printing a Site ................................................................................................................. 286
Print Commands .............................................................................................................................................. 286
Using the Print Dialogue ................................................................................................................................. 288
Setting the Page Range .................................................................................................................................... 291
Setting the Number of Copies ........................................................................................................................... 291
Index ........................................................................................................................................... 295

Section 1: Getting Started
In this section you will learn how to:
 Open SharePoint Designer

 Use the SharePoint Designer interface
 Close SharePoint Designer
 Use menus
 Use the Common toolbar
 Move toolbars
 Hide and show toolbars
 Use the Status Bar
 Save pages
 Open pages
 Switch between pages
 Close pages
 Close SharePoint Designer
 Use the Help Menu
 Use the Help Screen
 Use the Ask a Question Box
 Get help in a dialogue box
 Understand the structure of a Web site
 Lay out a Web site
 Create user-friendly links
 Understand some basic SharePoint Services concepts
Microsoft Office SharePoint Designer 2007 Foundation 2
Lesson 1.1: Starting Out
Web browsing and networking are two of the most common uses for computers today.
Countless people surf the Web for information and entertainment, while still others make
remote connections to their workplace and use the Internet to share and collaborate on a wide
variety of tasks and projects.
In light of this, it is important to be able to create Web sites and Web pages that are compatible
with most browsers, to develop well organized document libraries, and to create clean,
functional sharing portals.
One tool that can definitely help you with these tasks is Microsoft’s SharePoint Designer 2007.
Instructor Note: While no special knowledge of Microsoft SharePoint Designer is

required for this course, we do presume that the user has basic Windows knowledge,
including how to use the Start menu, how to use the mouse, and how to use the
keyboard.
What is SharePoint Designer?
SharePoint Designer is the latest version of Microsoft’s Web design program, Front Page. The
name was changed to SharePoint Designer in the 2007 release mainly because of the new
emphasis on building and customizing SharePoint sites for Microsoft’s SharePoint servers.
This does not mean that SharePoint Designer can’t be used to create standard Web pages or
Web sites. As a matter of fact, SharePoint Designer has a lot of features that are great for
general Web design. With SharePoint Designer, you can perform a wide range of tasks, from
quickly creating simple Web pages, to designing and customizing professional looking Internet
or intranet portals.
Perhaps most importantly, SharePoint Designer helps you focus on the design and appearance
of your Web sites, without spending all your time dealing with the intricacies of the underlying
code and language specifications.
The following image shows the basic SharePoint Designer screen.
In this lesson, we will start with a gentle introduction to SharePoint Designer, its user interface,
and the basic tasks of opening and closing the program.
What’s New in SharePoint Designer 2007?
SharePoint Designer is a Web design tool with a wide range of capabilities. As mentioned
previously, more emphasis has been placed on working with SharePoint server portals than in
previous versions (such as FrontPage). The table below describes a few of the newer SharePoint
Designer features.
Don’t worry too much if you are unfamiliar with some of the terms mentioned here. Things will
clear up over time as you progress and learn more about SharePoint Designer.
 SharePoint Designer provides a new level of support for designing, creating, and
modifying SharePoint server sites; this includes editing support for technologies such
as CSS (Cascading Style Sheets) and ASP.NET 2.0 (Active Server Pages).
 SharePoint Designer makes implementing global SharePoint Layout changes easier by

allowing you to modify master pages and Cascading Style Sheets. You can also undo
changes by using the Revert to Site Templates command.
 SharePoint Designer has a large array of tools for working with ASP.NET controls, Web
Part connections, and XSLT (Extensible Style Sheet Language Transforms) Data Views.
 The bottom line is that SharePoint Designer can allow Web developers to build
interactive Web pages, with less emphasis on writing code.
 SharePoint Designer 2007 has support for a number of the latest standards in Web
design technology. This means that the Web sites you develop should be compatible
across a wide range of the current generation of Web browsers.
 SharePoint Designer 2007 provides an improved level of support for creating and
modifying ASP.NET pages. This increased level of ASP.NET functionality will make
working with ASP .NET controls and properties easier.
 New site reporting features allow you to find broken links, under utilized pages, and
other problematic areas in your Web sites.
 Contributor settings allow you to specify how SharePoint Designer is used to edit or
modify SharePoint Web sites. Site administrators can control access to different
actions, specifying what can or cannot be changed on a Web site.
 Workflow Design features incorporated into SharePoint Designer allow you to

associate changes in SharePoint lists and libraries with actions in a Workflow.
Once again, don’t be overly concerned if you’re not quite sure about the meaning of some of
these newer features. Suffice it to say that SharePoint Designer is a professional Web design
application, with special emphasis on, and features for, the development and management of
Web sites on Microsoft SharePoint servers.
Opening SharePoint Designer
Of course, the first step in using any program is learning how to get it started. To open
SharePoint Designer, look for the SharePoint Designer icon on your computer screen.
Remember, if you don’t know exactly what program a particular icon stands, for look at the
label that appears beneath the icon. If you cannot see all of the text, single click the icon to
display the full description. Once you have identified the SharePoint Designer icon, you can
double click it to open the SharePoint Designer application.
If you cannot find a desktop icon for SharePoint Designer, you can start it with the Windows
Start Menu. To do this, choose the Start button, followed by the Programs option, followed by
the Microsoft Office sub menu. Under the Microsoft Office Start menu you should see an
option for Microsoft Office SharePoint Designer. Just click this option to start the program.
When the SharePoint Designer screen opens, it should look something like the following.
When you first open the program, you may see a prompt box that states “Microsoft Office
SharePoint Designer is not currently your default Web Page (HTML) editor.”
If you do see this box, and you want to make SharePoint Designer your default Web page
editor, just click the yes button. If you want to open the program without making it the default
Web page editor, click the No button.
Interface Overview
To continue with the introduction, let’s take a quick look at the SharePoint Designer user
interface.
As you probably already know, a user interface is the collection of windows, menus, buttons,
views, and other controls that allow users to access the functionality of a program. For an
overview of the SharePoint Designer interface, have a look at the following image.
The table below contains a brief description of the components identified with red numbers in
the preceding image.
Menu Bar (1) You can click on any word in

the menu bar to see a list of
menu options. If you click
on a menu option, the
corresponding action will be
performed.
Toolbar (2) Toolbars contain buttons

(icons) that are basically
small pictures of the actions
or commands they
represent. When you click a
button, the corresponding
action will happen.
Help Box (3) If you type a term or phrase

in this box and press the
enter key, SharePoint
Designer will search its
available resources (Online
and Offline) for information
on what you typed.
Window controls (4) These controls let you

minimize, maximize, and
close the application’s
window.
Task Panes (5 and 8) Task Panes can contain

information, controls, tools,
search results, and more.
They are a very important
and versatile part of the
SharePoint Designer
interface. There is even a
Task Panes menu available
on the menu bar for
configuring your task panes.
Main viewing / The editor/viewing window

Editing area (6) is where you do most of the
design and layout work for
your Web sites and Web
pages. You can also work
with the source code for
Web components in this
area.
Editor View buttons (7) These buttons allow you to

switch between the
different views of your work
that the editor provides.
You can use the Design view
to see what your creations
look like, the Code view to
see the underlying code, or
the Split view to see both
the design and Code views
at the same time.
Status Bar (9) The status bar provides

information on the current
status of the application
and the document you are
working on. This
information includes the
page size, the document
type, the style sheet
schema, the download size
of the document, and more.
Title Bar (10) This bar displays the name

of the application you are
using (Microsoft SharePoint
Designer) and the name of
the current document you
are working on. You can
move the program window
around your screen when
you drag the title bar with
your mouse.
Closing SharePoint Designer
After you finish working on your Web pages, you will want to close the SharePoint Designer
application.
The quickest way to do this is to click the close button ( ) in the upper right corner of the
program screen.
If you are working on a file, and you have not saved it recently, closing the application with this
button will display the following alert.
This box is simply asking you if you want to save the work you have done on your file before
you close the application. If you do want to save any changes you have made, click the Yes
button, and your file will be saved and the application will close. If you click the No button, the
application will close without saving and any changes that you made to the file since the last
time it was saved will be lost.
You can also close the application by clicking the Exit option under the File menu.
When you close the application this way, the same save alert as before will be displayed.
Once again, clicking Yes will save the changes that you have made to the file as the application
closes, while clicking No will close the application without saving any changes.
Lesson 1.2: Interacting With SharePoint Designer
Now that you have an overview of the basic interface components, it is time to start learning
how to use them. In this lesson we will cover the basics of using menus and using the toolbar.
We will learn how to move, hide, and display toolbars, and finally, we will discuss how to
interpret and make use of the Status bar.
Using SharePoint Designer’s Menus
The first part of the interface that we’ll deal with is the menu bar. Menus are important
because they provide a way of accessing pretty much every other tool or function in the
application.
If there is a feature that you can’t access directly from a menu, there is probably a menu option
that will display a task pane or toolbar that will in turn allow you to access the feature you are
looking for.
For a better idea on how to work with menus, have a look at the following table. For now, don’t
worry so much about the results of the actions shown in the table, but more about how to
perform the actions themselves.
Menu items If you click on a menu heading at

the top of your SharePoint Designer
screen (like, File, Edit, Window, or
Help), the menu will expand to
show a list of commands. You can
then click on any menu item to
perform the corresponding action.
In the sample to the left, we’ve

clicked on the Insert menu. Now,
we can click any of the items below
it to perform that action.
Expanding menu items

Some menu items have a right-
facing arrow ( ) beside them.
This means that once you click on
(or put your mouse over) that item,
an additional menu will show up
(called a sub-menu).
In the sample on the right, you can

see that we chose ASP.NET
controls, and now we can choose a
particular control.
Checked items Some items in a menu may have a

check next to, or a box around,
them. This means that the item is
turned on or enabled. If it has a
check, normally you can turn the
command off by clicking it, which
will uncheck it.
Other items can’t be unchecked.

You must pick another item to
switch.
Drop-down menus You can use this kind of menu to

pick from a number of choices,
while retaining the option to type
your choice directly.
If you click the small black triangle

at the right of the menu field, you
will display a list of options from
which you can click to choose.
In some cases (like the font menu),

if you type the first letter or letters
of your choice into the field, the
most likely option from the list (in
terms of what you type) will appear
in the field.
If you display the list of choices,

your position in the list will
correspond to the letters that you
have entered into the field. (In the
image on the left, the letter s was
entered into the field, and the list
was displayed by clicking).
The following image shows the menu bar for SharePoint Designer.
The table below gives a brief description of what kinds of options are available under these
menus.
File menu Contains options for opening and closing Web pages and Web sites, as
well as options for saving files, importing sites, previewing your work,
and more.
Edit Menu Contains options for cutting, copying, pasting, find and replace, and
other editing tools.
View menu Contains options for changing the view of your SharePoint Designer
screen. This menu lets you add rulers, grids, formatting marks, toolbars,
and more to your SharePoint Designer screen.
Insert menu You can use this menu to insert pictures, ASP.NET controls, hyperlinks,
buttons, and other elements into your documents.
Format menu This menu contains formatting options for text, tags, CSS styles, Web
pages, and more.
Tools menu This menu contains an array of tool options including Spelling,
Thesaurus, Reports, Macros, and configurable options.
Table Menu This menu allows you to add tables to your pages.
Site menu Contains options for working with Web sites
Data View menu Contains options for Filtering, Sorting and Grouping, conditional
formatting, and more.
Task Panes menu This is where you can specify what Task Panes are currently displayed.
Window menu This menu has options for opening, viewing, and closing SharePoint
Designer windows.
Help menu This menu offers several help options including SharePoint Designer
help, Office online help, Developer resources, and more.
Often, there will be a menu available when you right click on something (a control or some part
of the document you are working on) in your file. These are sometimes referred to as context
menus because the options in the menu that appears will normally have something to do with
the object that you right click on. This menu is displayed when you right click on the editing
area in SharePoint Designer.
Using the Common Toolbar
SharePoint Designer’s main toolbar has a number of useful commands that can be accessed
quickly. To access a command on the toolbar, just click the appropriate button.
If you don’t know what a particular button does, let your mouse pointer hover over it, and a
small Screen Tip will appear telling you a little bit about the button in question.
This screen tip describes the button shown in the red rectangle.
Here is the main SharePoint Designer toolbar, called the Common toolbar.
The following table gives you an overview of these toolbar buttons, just so you’ll have an idea
of what we’re talking about when we refer to them later on.
Creates a new document (Web page or Web site) in a new window.
Opens a dialogue to choose a file (or Web site) to open.
Saves your current file. If you haven’t already specified a name and
location for your work, (have not saved it yet), you will be prompted
for this information.
Allows you to view your work (Web pages) in a browser.
The styles drop menu allows you to select style tags for your
document.
The Font drop menu allows you to choose a text font.
The Font size drop menu allows you to choose a font size.
The Undo (counter clockwise arrow) and Redo (clockwise arrow)

buttons allow you to undo previous actions, or redo actions that
were undone. SharePoint Designer supports multilevel undo and
redo.
The Bold, Italic, and Underline buttons will apply bold, italic, or
underlined font style to the selected text.
The alignment buttons will apply left justification, center alignment,

or right justification to selected text.
The list and bullet buttons will apply a list format or bullet format to
your selected document elements.
The indent buttons can decrease (left button) or increase (right

button) the indent for selected elements in your pages.
The Table Borders button allows you to specify various types of

borders around the tables in your pages.
The highlight button will allow you to highlight a selection with a

color you choose.
The font color button will allow you to change the font color for
selected text.
The Insert Table button lets you insert a table into your Web page.
The <DIV> tag button allows you to define a division or section of a

document.
The Insert Hyperlink button is used to insert links into your pages.
In Microsoft programs, you will often find functional redundancy in menu options and toolbar
buttons. That is, there is often a tool bar button that will perform the same action as a menu
option. SharePoint Designer is no exception to this rule, and there can sometimes be several
ways (menu options, task panes, or toolbars, for example) to perform the same task. This can
be a useful feature in and of itself, as it lets the user choose the methods they are most
comfortable with to get their work done.
Moving Toolbars
If you look closely at the far left end of the SharePoint Designer toolbar or menu bar you will
see a vertical series of dots.
If you place your mouse pointer on a set of these dots, left click, and drag, you will be able to
move the corresponding toolbar around the SharePoint Designer screen.
Here you can see the Common toolbar being dragged across the screen.
Once you move a toolbar, you can choose to dock it at the top, bottom, or either side of the
program screen. To do this, just drag the tool bar until your mouse pointer comes in contact
with the place where you want to attach the toolbar.
The following image shows the Common toolbar docked at the right side of the SharePoint
Designer screen.
If you wish, you can just drop a tool bar in the center of the screen.
If you dock a toolbar and the vertical series of dots is not visible, you can drag the toolbar
around the screen by the title bar (thick band of blue along the top of the toolbar). By moving
toolbars in this way, you can customize your screen in a way that works best for you.
Hiding and Showing Toolbars
If you click the View menu, and then choose the Toolbars option, you will see a sub menu of
available toolbar options.
If a toolbar name has a check by it, the toolbar will be displayed on your screen. If a particular
toolbar does not have a checkmark, it will not be visible on your screen.
If you remove the checkmark from beside a toolbar name, the toolbar will be hidden (removed
from the screen). Consequently, if you place a checkmark next to a toolbar name, the toolbar
will appear on your screen.
As you can see in the following image, there are a quite a few toolbars available to be added (or
removed) from your screen.
If you add a toolbar to your screen, you can easily move it and dock it with your mouse (as
discussed previously). You can also remove an undocked toolbar from your screen by clicking
the small x that appears in the upper right corner.
Using the Status Bar
The following image shows the SharePoint Designer status bar, which is located at the bottom
of your screen.
This bar provides statistics on the currently open SharePoint Designer window and the current
document you are working on.
First, let’s look at the Visual Aids field in the status bar ( ). This field indicates
whether or not the visual aids feature is turned on. Visual aids are clues about the elements in
your document that can indicate the type and style of a selected element. These visual aids will
appear in the editor window with the selected element.
For an example, have a look at the following image.
Here you can see a visual aid letting you know that the particular heading (the selected element
in the editor) is a paragraph (uses a paragraph tag) and that this paragraph is displayed using
style1.
You can toggle the visual aids on or off by double clicking the visual aids field in the status bar. If
the visual aids are specified as OFF in the status bar, they will not be visible in the editor.
The next field ( ) is the style application field. It will let you know if the
Style Application feature is set to auto or manual. If this setting is on automatic, styles will be
assigned to your page contents automatically (as shown in the visual aid example above). If it is
set to manual, you will have to enter style information for your Web pages yourself.
If you double click on this status bar field, the Style application toolbar will appear.
You can use the drop menu shown in the red rectangle to switch this setting to manual or
automatic.
If you right click on the Style application field in the status bar, a menu with more style options
will appear.
What is the difference between the Auto and Manual settings? For now, let’s just summarize by
saying that when the Style Application is set to manual, any format changes that you apply to
text in your Web page will be applied to the entire paragraph. That is, even if you select only a
single word in the paragraph and change the format, the format for the entire paragraph
containing the word will be changed.
If the Style Application is set to auto, format changes will be applied only to the selected text,
not to the rest of the paragraph that contains the text. Furthermore, when it is set to auto, you
will not see the blue paragraph highlighting (overlay) that appears when it is set to manual.
Next, we will look at the status bar’s information fields.
The first field tells us the down loadable file size of our current document in bytes. The second
field (showing the word Standard in the image above) tells us that the page we are working on
will be rendered in compliance with the standards associated with the Doctype (such as HTML
or XHTML).
If you double click on this field, you will see a dialogue box that will let you change the Doctype
declaration.
The third field shows the page size (width x height in pixels) of the page you are working on. If
you resize the page by dragging on the borders of the editing area, you will see the values in
this field change as well.
If you single click on this size field, you will see the following menu of size options appear.
Finally, the last two fields in the status bar tell you the Doctype declaration that is being used
for your page (in this case, XHTML 1.0) and the cascading style sheet (CSS) that is in use.
If you double click on either of these fields, you will display the Page Editor Options dialogue
that was mentioned above.
In this dialogue, you can specify a document type, a Doctype declaration, and a Cascading Style
Sheet schema using the drop menus provided.
Lesson 1.3: Working With Files
SharePoint Designer is used for authoring, managing, and maintaining Web pages and Web
sites, with special emphasis and features for Web sites hosted on SharePoint servers. In order
to understand how to use SharePoint Designer properly, we must first learn a little about Web
sites and the Web pages that comprise them.
In this lesson we’ll discuss Web sites and Web pages. We’ll also learn how to open pages, save
pages, switch between pages, and close pages.
Understanding Web Pages and Web Sites
A Web site, simply defined, is a collection of files (typically linked Web pages) that are generally
accessible from a single location that is defined by a URL.
A typical Web site is accessed over the Internet through the HTTP protocol, and is viewed on
the destination computer with a program called a Web browser. Often Web sites will have a
“Home Page” that will contain hyperlinks to the other pages that make up the site.
A Web page is a kind of document written in a mark up language (like HTML) that specifies the
content and layout that appears when the page is opened in a Web browser. A collection of
linked Web pages that share a domain or sub domain (have a common URL pattern) can be
called a Web site.
In a larger sense, the collection of files that comprise a Web site can also include elements such
as image files (to display graphics or photos on a Web page), Cascading Style Sheets (to apply
an overarching format or style to the Web site), and additional components that may add
interactivity to the Web site.
The files that comprise a Web site are often located together in a folder or group of folders
located on a Web server. The computer that contacts the server and requests the Web site is
typically referred to as a client (though in certain circumstances the client server relationship
can be somewhat more complex).
The World Wide Web is simply a vast network of Web sites and pages (often linked) that is
made accessible by the underlying infrastructure of the Internet.
It should be mentioned though, that a Web site can be stored locally on your computer and
accessed through a Web browser on the same computer. This is frequently done when a Web
site is first being developed.
The following image shows a portion of the SharePoint Designer screen after the program was
used to open a Web site.
Take note of the different file types that comprise this Web site. You can see HTML file
extensions, CSS (cascading style sheet) file extensions, and gif (image file) file extensions.
Altogether, there are 14 different files in this Web site. If you think that’s a lot, keep in mind
that some Web sites have many more files than this!
Opening Pages
To open a Web page in SharePoint Designer, click the File menu, followed by the Open option.
This action will display the Open File dialogue box. Alternatively, you can click the Open button
on the Common toolbar ( ). This will also open up the Open File dialogue box.
When the dialogue opens, you can use the navigation controls to browse through your folders
to a particular page that is stored locally on your computer. When you find the file you want to
open, select it (highlight it in blue), and click the Open button in the lower right.
In this image, we are about to open the Web page called low.HTML.
You can also use this dialogue to open a Web page over the Internet. To do this, first enter the
URL (Uniform Resource Locator) for the Web page into the File Name field.
Next, click the open button in the lower right to open the page in SharePoint Designer.
When the page opens, you can press the Ctrl key and click at the same time on the hyperlinks in
the page to follow them (and in so doing, open other Web pages).
If you have a Web site open in SharePoint Designer, you will see all of the files and pages
available in the Web site in your main viewing area.
If you double click on any individual Web page in this list of files, the page will open up in the
main viewing/editing area of the SharePoint Designer screen.
Saving Pages
To save a page, click the File menu, followed by the Save As option.
This will display the Save As dialogue.
Use the navigation controls to browse to a folder on your computer in the Save in field. Enter a
name for the file in the File name field, and specify a file type in the Save as type field.
When you are ready, click the Save button to save the page. (The page that you are saving will
be the currently active page.)
If you click the Save button on the Common toolbar ( ) without having previously saved your
page, the Save As dialogue will appear. You can then save your page as described above.
If you have already saved your page, clicking the Save button will automatically save any
changes that you have made to the page after you opened it.
When you open a page in SharePoint Designer, a tab for the page will appear above the main
viewing area. If you right click on this tab, a context menu with a Save option will appear.
Clicking this Save button will save any changes you have made since you opened the file, or
open the Save As dialogue for a page that has not been previously saved.
Switching Between Open Pages
If you open multiple pages in SharePoint Designer, you will see a row of tabs across the top of
the viewing/editing window.
On each tab, you will see the name of the corresponding Web page. You can switch between
these Web pages by simply single clicking on a tab to select it. The Web page under that tab will
then be displayed in the viewing/editing window.
The tab for the currently active (displayed) Web page will be colored white.
You can also switch between pages by using the Window menu.
This menu shows all currently open pages. If you click on an item in this menu, the
corresponding page will be displayed.
Closing Pages
To close an open page, you can right click on the tab for that page and choose the close option
from the menu that appears.
You can also close the page by clicking the close button (x) that is displayed in the upper right
corner of the main viewing area.
Finally, you can choose the File menu and click Close to close the currently selected page.
If you make changes to your page, and then use any of the methods discussed here to close it,
you will see the following alert.
This alert box is simply asking if you want to save the changes you made to the page before you
close it. If you click Yes, the changes will be saved and the page will be closed. If you click No,
the page will be closed without saving changes. If you click Cancel, the page will not be closed,
and you will be able to continue working on it.
Of course, if you close the SharePoint Designer program, any open pages will also be closed. If
you have made changes to any of these pages, you will see an alert box like the one shown
above. Once again, clicking Yes will save your changes and close the application. Clicking No will
close the application without saving.
Lesson 1.4: Getting Help in SharePoint Designer
When you’re first starting to use a new application you are bound to run into a few problems.
With this in mind, it is probably a good idea to learn about SharePoint Designer’s help features
before we proceed much further.
In this lesson we’ll learn to use the Help menu, the help screen, and the type a question for help
box.
Using the Help Menu
At the far right of the menu bar, you will see a “Help” menu heading. If you display this menu,
you will see the following items.
If you choose the first option (with a question mark in a blue circle next to it) you will display
the SharePoint Designer help screen. (We will discuss the Help Screen in more detail in a later
lesson.)
The next option, Microsoft Office Online, will load and display the Office Online Web site in
your Web browser.
This Web site contains a number of links to various sources of information, downloads, and
updates for the Microsoft Office line of applications. Of course, an Internet connection is
required to take advantage of this option.
If you click on the Microsoft Office SharePoint Designer Developer Resources option, the
developer center Web site will open in your browser.
This Web site contains links to several sources of information about developing and designing
Web applications with FrontPage. (FrontPage is the name for previous versions of SharePoint
Designer.)
The Contact Us menu option will display a Web page with contact links and information that
provide support for Microsoft Office products. (An Internet connection is required for both this
help option and the preceding one.)
In the next section of the help menu, you will see an option to check for updates and an option
for Office Diagnostics.
If you click Check for Updates, a Web page will open that will allow you to update the Microsoft
products on your computer.
To view this page, you will need an Internet connection and Internet Explorer 5 or later as your
default browser.
The Office Diagnostics option will invoke the Office Diagnostics dialogue.
If the SharePoint Designer application (or other Microsoft Office applications) is behaving
erratically, you can run the Office diagnostics tool to help identify and repair performance
issues. (An Internet connection may be required for this diagnostics program to connect to
Microsoft Servers).
The final few options on the Help menu allow you to activate your SharePoint Designer
application (if you haven’t already), view your privacy options and the Microsoft privacy
statement, and see information about SharePoint Designer and your computer system.
Using the Help Screen
As mentioned in the preceding discussion, the first option on the Help menu will display the
SharePoint Designer help screen. The contents that appear in your help screen will depend on
whether or not you have an Internet connection.
If you do have an active Internet connection, your help screen should look something like the
following.
When you first open your help screen it may not be fully expanded. To maximize the help
screen just click the maximize button in the upper right.
From this help screen you can access both online and offline help. Online help requires an
Internet connection, while offline help only requires the help files that are stored on your
computer when you install SharePoint Designer.
When you display the Online Help Screen by clicking the first option in the Help menu, or by
pressing the F1 key with your computer connected to the Internet, you will see a screen
displaying a number of hyperlinks (like the one shown above). If you click on any of these
hyperlinks, you will be presented with additional hyperlinks that are more specific to the
subject you are finding help on. As an example; if you click on the link called “Creating Sites:”
Another selection of hyperlinks more specific to this subject will be displayed.
If you continue to follow the links, you will get even more specific subject headings until you
reach the information and instructions that are closest to what you are looking for.
You can click the back and forward buttons ( ) to move between pages that you have
visited in the help screen. (These buttons behave very much like the back and forward buttons
in a Web browser.) You will also notice a refresh button near the top of the Help screen, and a
Home button. Clicking on the Home button will take you to the original online help screen that
you started with.
There is also a table of contents button ( ) if you prefer to work through a table of contents.
You can print the information in the help screen by clicking the printer icon ( ), and you can
make sure that the help screen stays visible while you are working with SharePoint Designer by
clicking the keep on top button ( ).
You can refine your search for help topics by specifying a particular section of help topics to be
searched (in the image below, Developer Reference), and then entering a particular term to
search for (in this case, “using form controls”).
If you want to close the help screen, simply click the close button ( ), in the upper right corner
of the help screen.
It may sometimes be the case that you need help with SharePoint Designer, but an Internet
connection is not available. In this instance, there is still an offline help option that you can take
advantage of. When you display the help screen without an active Internet connection, it will
look like the following:
If you click on the “Show me offline help from my computer” link (indicated in the image on the
previous page by a red rectangle), you will see the following screen.
Each one of the subject links on this page will lead to information that is stored locally on your
computer. To follow the links you just have to click on them. Each link will take you to more
specific subject links that you can follow until you find the information that is closest to what
you are looking for.
The search option and the table of contents are still available to you just as they were in online
help, but in offline help there will be significantly less information or instructions at your
disposal. For this reason, it is a good idea to use online help if you are able to.
Using the Ask a Question Box
In the upper right of your SharePoint Designer screen, you will see a field containing the words
“Type a question for help.”
If you type a term, phrase, or question in this field and press the Enter key, a help screen will
appear with a list of topics that are related to the question, term, or phrase that you typed. As
an example, we’ll type HTML into the field and press the Enter key.
Here are some of the results:

(The results in this help screen were obtained with an active connection to the Internet).
You can enter multiple terms into the Type a Question field to generate more results. For
example, entering XML HTML into the field will generate results related to HTML and to XML. If
you want very specific results, you can put the term in quotation marks when you enter it in the
field. For example, entering the term “Using CSS” will generate only exact matches to the
phrase Using CSS.
Getting Help in a Dialogue Box
Most SharePoint Designer dialogue boxes will have a help button in the upper right corner.
The button consists of a white question mark on a blue field. If you click this button, the
standard SharePoint Designer Help Screen will open. (Please see the concept titled “Using the
SharePoint Designer Help Screen” for more information.)
Lesson 1.5: Web Design 101
Up to this point, we have learned a little bit about Web pages and Web sites, but we have not
really discussed Web design at any length. Since the subject of this manual is SharePoint
Designer, which is a Web design tool, the following lesson will deal with some basic Web design
concepts. In this lesson, we will consider the structure of Web sites, as well as some of the
central design issues that separate good Web sites from bad.
Understanding the Structure of a Web Site
Anyone who has ever browsed the word wide Web is familiar with the concept of Web sites. If
you explore a large number of Web sites, you will find that the vast majority of them have
similarities in their basic structure.
Web sites are, for the most part, a collection of separate Web pages. Each individual Web page
may have its own subject or theme, but when they are linked together as a group, they
comprise a Web site.
Each Web page in your site will have its on URL. For example; a Web site with a URL like
http://server.somewhere.someone.net/~bob/Home, could have pages with the following
URL’s:
http://server.somewhere.someone.net/~bob/Page1.html
Typically, a Web site will have one page that is designated as the Home Page. This home page
often serves as an introduction and launching point for the rest of the Web site. The home page
will often contain a greeting and an introduction or welcoming message to the site.
The remaining Web pages that belong to the site are generally (but not always) accessible via
links on the home page. This makes the home page a kind of central navigation point for the
entire site.
The image shown above is the home page of a Web site that is loaded in an Internet Explorer
Web browser. The red rectangle at the upper left of the browser highlights the title of the page
(Home). The long red rectangle highlights the links to the other pages in the site. Any page in
the Web site can contain hyperlinks. A hyperlink can link to another page in the same site, to
another page in a different Web site, to a particular file or object, or to a particular part of same
page that contains the link itself.
To help make the concept of linked Web pages more concrete, have a look at the following
diagram.
In this Web site structure, pages are linked in such a way that they can only be accessed in a
specific sequence. The Home page links to Page 1, Page 1 links to Page 2, and so on. This
structure is very basic, but it may be useful if you want to reveal your Web site content in a
predetermined step by step way. (Remember, once a page has been visited, you can step back
to it using the browser’s Back button.)
The diagram shown here portrays a Web site structure where the home page contains links to
every other page in the site. Each page in the site (pages 1, 2, and 3) contains a link back to the
home page. This structure allows for more navigational freedom than the structure in the first
diagram. In this structure, the visitor can easily jump to any page in the site, and then quickly go
back to the home page. (The home page serves as a navigation hub for the Web site.) Unless
you want to control the user’s access to your Web site content, the structure of the second
diagram (above) is better than the structure of the first.
Finally, this next Web site structure offers the most navigational freedom.
Here, every page in the site contains a link to every other page. This is best achieved with a
panel or series of links to every page in the site. This panel can appear in the home page, and
on every other page in the site. This free roaming structure allows the user to wander through
your site, accessing whatever page they want at any time.
In addition to hyperlinks, you can also include graphical images in your Web pages. These
images can be banners, buttons, backgrounds, animations, or photos. When you include
graphical elements in your Web page, you must have the image files accessible along with the
HTML file for the Web page. There will be HTML tags in the Web page code that specify where
and how to include the image files into the finally rendered page.
With this in mind, be aware of the downloadable size of your pages. Remember, a Web page is
typically downloaded over the Internet before it is rendered in your browser. Web pages with a
lot of large file content can take longer to load into a browser.
In addition you can also apply style sheets to your Web site. A style sheet (with a file extension
of .css) can specify how to present color, fonts, font size, spacing, and other layout aspects in
your Web pages. The style sheet information is specified in a separate CSS file. You can then
include HTML tags in your Web pages that specify the style sheet that you want to use.
The advantage to using style sheets is that you can separate the content of your Web pages
from their presentation (style). This means that you can apply a single style to all of the pages
or groups of pages in a Web site, and keep this style information in one css file. This allows you
to change or update the appearance of all of the pages in your Web site by making a few
changes in only one (css) file. Of course, these style sheets must be kept in a location that is
accessible to the Web pages.
You have probably seen Web sites with pages that offer interactive features. This kind of
interactivity requires that special code instructions (typically referred to as scripts) are used.
There are essentially two kinds of scripts that a Web designer can use: server side and client
side.
With a server side script, the code instructions that govern the interactions with the user are
located and run on the server. The server, in this sense, can be taken to mean the machine that
hosts (makes available) the Web site. For example, SharePoint Designer has a lot of features for
working with ASP (Active Server Pages). ASP technology was developed by Microsoft, and uses
server side scripting.
With a client side script, interactions with the user are governed by code that is included in the
Web page and downloaded to the user’s computer. These instructions are interpreted by the
browser and run on the user’s (client) computer. Some common client side scripting languages
are JavaScript and Microsoft’s VBScript.
This image shows a simple client side password box. The processing of the password will be
done on the client computer.
For the most part, basic Web pages are developed using a mark up language like HTML, and
communicated over the Internet with a protocol referred to as HTTP. You will often see the
letters http at the beginning of the address of a Web site (http://something.somewhere.org, for
example).
This means that the protocol specified in this URL (the Web address) is HTTP. HTTP stands for
Hyper Text Transfer Protocol, which is a widely used protocol that is designed for sending and
retrieving information (like HTML based Web pages) over the Internet.
When your browser receives information from the Internet (like the HTML for a Web page) it
will render the layout and content specifications contained in the HTML code, into a page that
will appear on your computer screen.
Tools like SharePoint Designer can help you design Web pages that conform to standard
language specifications and formats, meaning that your Web sites will be compatible with a
wide range of different Web browsers.
Laying Out Your Web Site
As you have learned, Web sites are built from a collection of files that include HTML Web pages
(possibly some style sheet files) and the associated image files (or other content) that goes with
the Web pages. To design a good Web site, you must consider how the pages and additional
content will be organized and presented.
Questions you might ask yourself when designing a Web site are:
 What is the purpose of the site? Is this a personal Web site, or a work related
(SharePoint) site?
 What are the themes, topics, or subjects that I want to present? How many Web pages
will I need?
 What are the limitations of the server that will host my site? If I want to build a
SharePoint site that uses ASP.NET, I will need a SharePoint server. If I want to use server
side scripts in Perl or PHP, does my server support them?
 Will my Web site deal with information that requires secure transmission? If this is so,
does my server support HTTPS, or other security protocols?
Once you have a clear idea about the content of your Web site, and what kind of pages you
need to design, you can start to think about how your Web site will be presented. Remember, a
good Web site has useful, informative, and appropriate content, as well as a functional and eye
pleasing presentation.
Here are a few points that may help you with your Web site layout.
 Text fonts that you often see in print may not be well suited for use in a Web site. It is
easier to read text printed on paper, than it is to read text on a computer screen. Sans
serif fonts are more easily read on computer screens than other font types. Use sans
serif fonts to make the content of your Web pages more readable.
 Think carefully about the colors you want to use on a Web page, especially when you
are presenting text. A font color of dark blue for example, can be very difficult to read
on a black background. Try to use light font colors against dark backgrounds, or dark
font colors against light backgrounds. If your content is hard to read, visitors to your
Web site may not bother.
 The image above is taken from a simple HTML Web page. Which sentence can you read
most easily?
 Try to keep the color scheme and font types you choose consistent across all pages in
your Web site. This will add to the overall presentation and cohesiveness of your Web
site. (style sheets are great for this sort of thing.)
 Use the following common sense rules when laying out the textual content of your
pages.
 Give your headings a larger font size than your regular (body) text.
 If you underline a particular word or phrase in your text, or give it a bold font,
people may think that the text is a hyperlink. You don’t want to cause this kind of
confusion.
 Don’t put too many words on a line of text. Long, unending stretches of text in a
small font are harder to read than shorter lines in a larger font.
 Text composed of lengthy paragraphs can be more cumbersome to the reader than
text broken into smaller chunks.
 Consider the size of your text font. An 8 point font may look great on your 20 inch
monitor, but it will barely be visible on a 17 inch screen. For long passages of text,
try to use a font that is 10 point or higher.
 Navigation is important! Try to make your Web site easy to navigate. Ideally, you
should place links to all pages in your site on your home page, and place links to your
home page on all pages in your site.
The links at the top of this home page will appear on every page of the site.
 You may even consider placing links (perhaps a panel of navigation buttons) to all
pages in your site, on every page in your site. Remember, you don’t want your visitors
getting lost; and you also want to the information they are looking for to be found.
 If you have a Web page with a lot of text (requires a lot of scrolling to see it all),
consider breaking the text into sections with headings, and then putting a table of links
to the text headings at the top of the page. This will allow a visitor to jump directly to a
particular section of text, rather than search through the entire page.
 If you include a picture in your Web pages, with text that describes it, it is easy to make
the picture itself a clickable link to the descriptive text.
 Remember, you want to make your Web site content easy to read, easy to find, and
visually interesting.
The layout tips provided here are not rules to be followed without question, but merely
guidelines to help keep you on track. There are plenty of great Web sites that bend or break the
rules set out above.
The thing to remember is, that a well designed Web site will almost always have a nice blend of
slick visual presentation, functional design, and clearly presented, easy to access content.
Surf the Web and find a few Web sites that you really like. Think of what they have in common,
and think of what differentiates them from other Web sites that are just okay.
Creating User-Friendly Links
To a great extent, the popularity of the Internet stems from the ability to easily access
information, and there is probably nothing that makes information easier to access than
hyperlinks.
Anyone who has ever browsed online has encountered hyperlinks. Almost any object on a Web
page can be turned into a hyperlink. Pictures, text, buttons and more, can all be linked to other
Web pages, Web sites, or other locations in the same page. As a matter of fact, the World Wide
Web is a huge network of Web sites and pages, largely interconnected by hyperlinks.
Hyperlinks are pretty easy to insert into a Web page, as you will find out in the next section. The
difficult task with hyperlinks is creating a good, user friendly link, rather than an ambiguous and
obscure one.
The most common manifestation of a hyperlink comes in the form of a highlighted (often
underlined) word or phrase. This word or phrase can appear by itself, or be part of a larger
sentence or block of text.
In SharePoint Designer, you can easily specify what your hyperlinks will look like before and
after they are visited.
The important thing is to make sure the formatting of your hyperlinks is consistent across all of
your Web pages, and that your hyperlinks are easily distinguished from regular text.
Beyond the basic formatting, it is also important to make your links as informative as possible.
Your links should give visitors to your site enough information to decide if the link is worth
following or not. The more information you can provide about what the link delivers, without
having to click it, the better.
Take the following poorly designed hyperlink as an example.
This link is simply described as a source of more information. Neither the link itself, nor the text
description, qualifies the type of information that will be retrieved. The visitor has no idea
about the quantity, context, or format of the linked information.
This next hyperlink is far better than the one shown above.
This hyperlink lets the user know that the information relates to the project plan, that the
information itself is a feasibility study on low cost housing, and that the information is
presented as a 10 page PDF file. Now the user has all the information he or she needs to decide
if the link is something they should follow or not.
The link shown above can be improved still further. Have a look at the following example.
Now the user knows the context of the information, and they have a good indication of the
content. In addition, the user knows that the information is presented as a 10 page PDF file, and
they will require a specific application to access the information properly. Moreover, the
application required is itself specifically identified, so the user knows what they need in case
they don’t already have it.
Believe it or not, this link could be further improved, by making the text, “Requires Acrobat
Reader 3.0 or higher” a hyperlink to a download location where the application in question can
be obtained. This would provide the user with everything they need to decide if the link is
worth following, and everything they need to access the information.
Of course, not all links in your site will require this much thought, but at the very least, you
should always consider the links in your Web site from the perspective of the visitor.
Sometimes, a full description of the linked information is just too long to include in the
hyperlink itself. After all, we want the user to be able to read and understand the link quickly,
and then decide if they need more information or not.
In situations like this, you can always use a screen tip to add clarification to the link. Screen tips
(also known as link titles) are displayed when the user hovers over a link for a moment. They
are quite easy to add in SharePoint Designer.
The following image shows a hyperlink with a screen tip as displayed in a Web browser.
If you plan to use an image as a link, try not to be ambiguous. It can be very hard to gather
specifics about the linked information from a picture alone. If possible, include text along with
the image or perhaps even in the image itself. This text should give some indication of what the
resulting information is about.
Alternatively, you can also add a screen tip to an image link, indicating the type of content that
the link points to. Just like a regular text link, when the user hovers over the image with their
mouse pointer, the screen tip will appear.
Above all else, make sure that the target of your link provides what the link itself (and its
supporting text) implies. If your link indicates that it will display information on a certain
subject, but actually points to a totally different topic, visitors to your site will not be
impressed.
An Introduction to SharePoint Services
SharePoint Designer has plenty of features that can be used for everyday Web sites, but it
should be noted that SharePoint Designer was built with special emphasis on designing and
modifying SharePoint services sites. In the following paragraphs, we will discuss what a
SharePoint site is, and learn the basics of how Web sites are organized in SharePoint Services.
To begin, Microsoft’s SharePoint Services is a program that is installed on a Microsoft Server.

SharePoint provides basic Web access and intranet features, allowing for the creation of
numerous Web sites, document libraries, and workspaces to facilitate collaboration on any
number of projects. SharePoint sites depend heavily on ASP.NET (another Microsoft
technology), which is a key building block for SharePoint functionality.
When you create a Web site on SharePoint services, and it is not below another site, you are
creating a top level site. A top level site can have sites below it (called sub-sites), and these sub-
sites can in turn have sub–sites of there own.
A typical SharePoint Services user will not have the necessary permissions on the server to
create top level sites. What you can create in SharePoint services depends on the privileges you
have been granted by the server administrators. A typical user may be granted access to create
or modify sub-sites, document workspaces, or meeting workspaces. (A work space is just a
special type of sub-site.)
A top level site, and the sub-sites and workspaces beneath it can be called a collection. In
practice, SharePoint services will offer a number of these site collections to its users.
A sub-site (created beneath a top level site or another higher sub-site) is usually meant to
provide services for users with a shared interest in some project or endeavor. The users may be
collaborating on a given task, or sharing documents and information.
An example of a SharePoint site collection might be as follows:
First, a top level site may be designated for a set of users in a company. Let’s say this top level
site is dedicated to the new marketing plan for the company. Sub-sites can then be created
underneath the top level site, corresponding to each aspect of the overall marketing strategy.
These sub-sites might be dedicated to print media marketing, television/radio ads, and market
research.
Each of these sub-sites would be geared for, and visited by individual sets of people within the
marketing team. Researchers would use the market research Web site, graphic artists would
visit the print media site, while other advertisement developers would visit the television/radio
site. Each Web site can be used as a collaboration point for those users that are working on the
corresponding marketing tasks.
Where does SharePoint Designer fit in all of this? The simple answer is that SharePoint Designer
is the best application for designing, creating, and customizing these SharePoint Web sites.
Administrators can control how the users of SharePoint will be able to access the sites in a site
collection. The following table provides an over view of the kind of groups that SharePoint users
can be divided into.
Read Only Users in this group can access information, but they cannot remove or
modify it. They cannot change a page or Web site layout, and they cannot
add content.
Contributors These users can add content to document libraries or workspaces. They
cannot modify the Web page or Web site layout.
These users will typically create content with programs like Excel or Word
and then add their content to the SharePoint site for sharing and
collaboration.
Designers These users (Web designers) can create elements and modify or customize
Web pages or Web sites in a SharePoint services site collection. These are
the kind of users that would use a program like SharePoint Designer.
Administrators This group is given full access to the SharePoint Web site. These users may
use a program like SharePoint Designer to create and customize
SharePoint Web sites.
Custom Groups Administrators can create groups with custom permissions for a
SharePoint site. A custom group’s permissions can range from very little
access, to widespread access, depending on how the administrator sets it
up. It is quite possible that a user in a custom group would take advantage
of a program like SharePoint Designer.
As expected, the most powerful group of users is the administrators. An administrator of a top
level site can configure the set up of the top level site and all sub-sites underneath it. If a user is
designated as the administrator of a sub-site, however, he or she can only control the settings
of that sub-site.
Section 1: Review Questions
1. SharePoint Designer is best described as…

A. A word processor
B. A Web design tool
C. A Web design tool with special features for SharePoint sites
D. An HTML coding environment
2. A series of dots (…) after a menu option indicates a….

A. Dialogue box, task pane, or window
B. Sub menu
C. Keyboard shortcut
D. Nothing
3. You can move a toolbar around the screen by dragging with….

A. The thick band (title bar) at the top of the toolbar
B. The vertical series of dots at the side of a toolbar
C. Both of the above
D. None of the above
4. A Web site can contain ….

A. Web page files
B. Cascading style sheet files
C. Image files
D. Any of the above
5. Which of the following cannot be seen on the SharePoint Designer status bar?
A. Page size
B. Download size
C. Cascading Style Sheet schema
D. Number of hyper links in the page
6. These buttons are used in the Help screen to…

A. Move back and forth between visited help pages
B. Go to the table of contents
C. Move through the spelling mistakes in your page
7. Earlier versions of SharePoint Designer were called…

A. Web Page Designer
B. Web Site designer
C. Front Page
D. Web Tools
8. Web site structure can be viewed in terms of….

A. Folder hierarchy
B. Navigation design
C. Hyperlink structure
D. All of the above.
9. In general, which of the following combination should you try to use in your Web
pages?
A. Light font against dark background
B. Dark font against light background
C. Light font against light background
D. A or B
10. In general, which font would be best for text on a computer screen?
A. This one
B. This one
C. This one
D. This one
Section 2: Creating a Basic Page
 Choose a page type

 Layout a page
 Use Design view and Code view
 Use the toolbox
 Enter text
 Add hyperlinks
 Use basic effects
 Use the Find feature
 Use the Replace feature
 Insert symbols
 Add photos
 Insert files
 Add buttons
 Add forms
 Add labels
 Add text areas
 Add input buttons
 Add advanced buttons
 Add drop-down and group boxes
Lesson 2.1: Creating a Basic Page
As you have learned, Web sites, no matter how large or complex, are built from individual Web
pages. Because a Web page is the fundamental building block of a Web site, we will now learn
how to create a basic Web page in SharePoint Designer.
Choosing a Page Type
When you open the SharePoint Designer screen, you will see a small down pointing triangle
next to the new document button (indicated in the following image by the red rectangle).
When you click the down pointing triangle, you will see the following menu appear.
If you choose the first option (called Page) in this menu, you will see the following dialogue box.
Under the Page tab (which should be displayed by default), you will see a panel of Page
category headings on the left. On the right of this panel, there is another panel that will show
the specific page types corresponding to the selected category from the first panel.
In the example above, the General category has been selected under the page tab. The specific
types of general pages available (HTML, ASPX, CSS, and so on) can be seen in the second panel
from the left. If there is a preview associated with the specific page type, it will appear in the
area on the right that is labeled Preview.
To choose a page type, click on one of the specific types belonging to the category you selected,
so that it is highlighted in blue, and then click the OK button.
In the image above, clicking the Ok button would create a basic HTML page.
Note that by default, a basic, empty HTML page will be waiting for you when you first open up
SharePoint Designer.
Laying Out a Web Page
How you lay out a Web page depends on the type and quantity of content that you want to
present, and how you want to present it. Frames, Cascading Style Sheets, client side scripts, and
HTML forms are only some of the Web design elements that can affect the layout and overall
presentation of your pages.
To begin, let’s start with a few basic considerations for your Web pages.
First, put your most important information near the top of your page. You don’t want to force
users to scroll through multiple screens to get what they are looking for. If a single Web page
has a lot of content, consider putting links to the important items near the top of the page. This
is just another way of making your page content more accessible (less scrolling).
Try to develop your Web page for compatibility with a wide range of browsers. Some browsers
may not render your pages correctly if you build them with certain features (such as frames).
However, the latest versions of most browsers give a fairly consistent rendering of most Web
pages.
When laying out Web pages, think of the screen resolution used by your visitors. Resolution is a
measurement in pixels (small color dots or picture elements) of your viewing screen. Web
pages can look quite different when viewed with different screen resolutions.
Here is an image of Web browser displaying a page on a 1024 x 768 resolution screen.
Here is an image of the same Web browser displaying the same page at a screen resolution of
800 x 600. You should notice that now, a scroll bar is required to see the entire page. Also, the
horizontal dimensions of the page layout are slightly different.
Recent surveys suggest that currently the most frequently used resolution is 1024 x 768. The
second most frequently used screen resolution is 800 x 600.
With these tips in mind, let’s start using SharePoint Designer to create a simple Web page. First,
start up SharePoint Designer to open a basic HTML page. You should see a tab at the top of the
main viewing area with the title “Untitled_1.htm” (HTM is another just another file extension
for HTML pages).
The default view for your new Web page is the Design view. The SharePoint Designer’s Design
view provides a WYSIWYG (pronounced wizzy-wig) view of your Web page. What is WYSIWIG?
WYSIWYG stands for “what you see is what you get.” This means that the content that appears
on your screen while you are editing the Web page will very closely resemble the actual
resulting Web page.
Even better, the Design view provides easy to use formatting and correction tools that are
probably very similar to the ones you use in your favorite word processor. This makes designing
a simple Web page very easy. You can basically just enter text, insert images (and hyperlinks),
and format the page much like you would a typical word processing document.
As you can see in the image above, the Design view will even catch your spelling mistakes! (The
image above shows a simple Web page that was quickly created in Design view.)
For comparison, take a look at the following image. It shows the same Web page after it was
saved (with the spelling mistake), and loaded into an Internet Explorer browser.
Try to experiment by creating some simple Web pages in Design view. Remember though, to
keep the general Web site layout tips (discussed in Lesson 1.5) in mind when you are designing
your Web pages.
Design View vs. Code View
You have just seen an example of the convenience of SharePoint Designer’s Design view when
editing a Web page. As convenient as this feature is, there still may be times (especially if you
are an advanced Web designer) that you will want the power and flexibility of directly editing
the Web page’s source code.
Fortunately, the source code for your Web page can easily be accessed by clicking the Code tab
at the bottom of the main viewing area.
Here is the Web page once again in Design view.

Now, if we click the Code tab in the lower left corner, we will be able to view and directly edit
the source code for the Web page.
What you see here is the HTML code that specifies the content and layout of the page. You can
jump right in and edit this code directly if you wish; however, this is not recommended unless
you know a little bit about HTML.
If you look at the code closely, you will see that different parts of the HTML are color coded
differently. The HTML tags are purple, while the format and style specifications are red.
Arguments to the formatting specifications are shown in blue, and the actual text that will be
seen on the Web page appears in black. You will also notice that each line in the HTML code is
numbered on the left.
Don’t worry if you can’t understand anything you see in the Code view. We will learn more
about HTML code later.
SharePoint Designer makes it quite straight forward to switch between the Code and Design
views. It is just a matter of clicking the appropriate tab at the bottom left of the viewing area.
You will even find a split option in between the Design tab and the Code tab. Think of the Split
option as a compromise between the two other views. If you click the Split tab, you will display
a view that allows you to use the convenience of the WYSIWYG Design view, and retain the
flexibility and power of the Code view.
The great thing about the Split view is that you can see the changes that you make in the design
part of the screen instantly implemented in the HTML code. Alternatively, when you edit the
HTML code in the Code view part of the screen, you can see the results of your edits instantly
applied in the design part of the screen when you place your cursor there.
Using the Toolbox
The Toolbox is a SharePoint Designer task pane that puts a wealth of Web design elements and
tools at your fingertips. To display the toolbox, you must click on the Task Panes heading in the
menu bar, and then click the Toolbox option so there is a check mark next to it.
This will display the toolbox task pane on the right of your screen.
On closer inspection, you will find that the toolbox task pane has expandable subject
categories. To expand a category, click on the corresponding button ( ) in the toolbox.
Here is the toolbox task pane with the HTML category expanded.
You can now see options for adding HTML tags, and Form controls. To add one of these
elements to your page, just position your cursor at the appropriate point in your page, right
click on the appropriate tool in the toolbox, and choose the Insert option.
To collapse (minimize) a category of tools, click the collapse button ( ).
The toolbox provides tools for HTML, ASP.NET controls, and SharePoint controls. If you’re not
clear about exactly what these tools are for don’t worry. For now we are going to focus on the
most basic Web page elements.
If you want to remove the Toolbox task pane from you screen, click the small (x) in the upper
right corner of the toolbox pane, or uncheck the Toolbox option under the Task Panes menu.
The option to display the toolbox will always still be available.
Lesson 2.2: Adding Text
Almost any Web page you come across will contain some text. Furthermore, some Web pages
will contain only text. In a Web page, text can appear as a hyperlink, as a description of another
element (perhaps a photo), or as the main content of the page. In this lesson, we’ll cover the
basics of adding text to a Web page.
Typing Text
From our discussion of the WYSIWYG editor from the previous lesson, you will remember that
the Design view allows you to enter text directly into your Webpage in a friendly (word
processor like) format. To enter text this way, just click the design tab at the bottom of the
main viewing area.
Now, you can simply type your text in the editor window, and what you see will be very close to
the actual appearance of the Web page.
You will see the symbol <p> appear at the top of the design editor window when you type text.
This <p> is the designation for a paragraph tag in HTML. Basically, SharePoint Designer is letting
you know that the text you are typing is being encoded in a paragraph tag.
If you look at the Code view, you can see the actual HTML code used to lay out the text that you
type in Design view.
Because the text is coded into paragraph tags in the HTML, pressing Enter in the Design view
will not take you to a line directly underneath the previous one. Instead you will skip a line,
because everything you type (whether it is several sentences, or a single word), is treated like a
paragraph.
If you type several sentences without pressing the Enter key, your lines of text will not be
separated by a space (see the first paragraph in the image above). This is because the sentences
are all in the same paragraph.
If you type continuously without pressing Enter, your words will wrap to the next line (without
skipping a space) when they reach the right edge of the editor window. Remember, pressing
Enter skips a space and starts a new paragraph.
You may notice that when you are typing a paragraph in the design editor, the paragraph will
be surrounded by a subtle blue border, with a faint blue background.
This faint blue highlighting (called an overlay) appears only if the Style application setting is set
to manual. If it is set to Automatic, you will not see the paragraph highlighting.
This highlighted area shows the active (currently being edited) text (paragraph) in the
document. If you click one of the font settings buttons on the toolbar, the effect will applied
only to the text in this highlighted area.
Inserting Hyperlinks
In SharePoint Designer, it is easy to add a hyperlink to a Web page. The simplest method is to
place your cursor at the appropriate position (in Design view) and click the Insert Hyperlink
button on the far right of the Common toolbar.
When you click this button, you will see the following Insert Hyperlink dialogue.
At the left side of this dialogue, you will see a panel of buttons for selecting what your hyperlink
will link to. You can choose to link to an existing file or Web page, to a place in the current
document or Web page, to an email address, or to a new document that you create.
After you select what type of target your hyperlink will link to, you can use the navigation
controls to browse to a specific folder and select the exact target of the link. (Most often, Web
sites are built and tested locally on your computer before they are uploaded to a Web server.)
If you know the specific Web address (URL) of a Webpage or site that you want to link to, you
can enter it directly into the Address box at the (shown at the bottom of the red rectangle in
the image above).
If you would like to browse the Web to find a Web page or site to link to, you can click the
browse button ( ), shown in the upper right corner of the red rectangle on the previous page.
You can also enter the text that will be displayed on the Web page as the actual, clickable link
by typing a word or phrase that you want to use in the Text to display field.
If you want to add a screen tip, click the ScreenTip button in the upper right of the dialogue.
When you click this button, you will see a Set Hyperlink ScreenTip box appear. Just type your
screen tip into the field provided and click the OK button.
When visitors to your Web page let their mouse pointer hover over the link, the screen tip will
appear to give them additional information.
Once you have specified a target for your link (what you will be linking to), and you have
entered your text to display, you can click the OK button in the dialogue to create the link.
The following image shows a basic hyperlink in Design view.
You can edit this link at any time by right clicking on it and selecting Hyperlink Properties.
This action will display the Edit Hyperlink dialogue, which has all of the same features as the
Insert Hyperlink dialogue, plus a Remove Link button.
You can also display the Insert Hyperlink dialogue by clicking the Hyperlink option on the Insert
menu.
Using Basic Styles and Effects
You can apply basic styles to your text quite easily using the Design editor. For example, if you
wanted to apply a bold face to some text, just select it with your mouse in the editor and click
the bold button on the Common toolbar.
This is essentially the same procedure that you would use if you were editing the document in a
word processor. Of course, you can use this same procedure to apply italics, underlining, text
alignment, lists, bullets, or any other formatting tool available on the Common toolbar.
Here is the same text as shown in the previous image after applying the bold, italic, and center
alignment effects.
When you apply these effects to your text, SharePoint Designer will automatically create the
corresponding HTML code (visible in Code view).
You can also easily change the font type of your text, the size, and the font color in Design view.
To do this, use your mouse to select the text that you want to modify, and then use the drop
menus on the Common toolbar to apply the color, size, and style that you want for your text.
The following image shows the same text after changing the font color, font type, and font size.
You should notice that all of the settings that you apply to the selected text are indicated on the
Common toolbar. The bold, italic, and center alignment buttons are highlighted in orange. You
can also see Arial in the font type field and x-large in the font size field. The color of the font is
blue as indicated by the blue bar under the letter A on the font color button.
If you continue to type, the text that appears will have all of the indicated settings applied to it.
Just like a word processor, you can set up your text formats/effects by selecting the appropriate
buttons on the Common toolbar. Once you have done this, any text that you type will have the
selected effects applied it. To deselect an effect, just click the appropriate button so it is not
highlighted in orange. Of course, you can select new options from the drop menus to change
the font type, size, or color.
If you make a mistake when modifying your text, don’t forget about the Undo button ( ). You
can use this feature to easily remove unwanted text effects that you have applied. As usual,
SharePoint Designer will incorporate all of your Design view modifications into the HTML code.
Remember though, the way formatting changes work can vary depending on the Style
Application setting (manual or auto). You can see your current Style Application setting in the
status bar.
Using Find
Sometimes, if you are creating a Web page that contains a lot of text, you may find yourself
scanning the document for a specific word or phrase that you want to change or modify. Rather
than scroll through multiple screens of text, you can always use the Find feature. To use this
feature, click the Edit heading on the menu bar, and then click the Find option.
When you perform this action, you will see the Find and Replace dialogue.
In the Find and Replace dialogue, you will notice that the Find tab is displayed. All that you have
to do is enter a term or phrase to look for in the “Find what” field, and then click the Find Next
button. SharePoint Designer will then search through the text on your page until it finds the
first occurrence of the search term or phrase you specified. The term will be highlighted, and
the section of text that contains the term will be visible in your viewing area.
If you click the Find Next button again, you will be taken to the next location in the text where
the search term occurs.
In the following sample image, we are looking for the term X86.
As you can see by examining the dialogue box, there are a number of options available for
refining your search. You can choose to search all open pages, or just the current page. You can
search upwards through the document from your current position in the text (Up radio button)
or downwards from your current position (Down radio button).
You can also use the check boxes on the right of the dialogue to make the search case sensitive
(match case) or to recognize regular expressions (search terms that use wild cards and other
characters to perform complex pattern matching and search operations).
If you click the Find All button, SharePoint Designer will find every occurrence of the term in the
text, and list them all at the bottom of the editor.
If you click on one of the instances of your search term in the bottom Find pane you will be
taken to its location in the document in the upper pane. You will also notice that each instance
of the term in the Find pane is displayed with a line number indicating what line of HTML code
that the term appears on in Code view.
Using Replace
The replace feature is accessed in the same way as the find feature. Just click the Edit menu,
and then click the Replace option. Alternatively, if you already have the Find and Replace
dialogue open, just click the Replace tab.
The replace options are pretty much the same as the find options discussed above. The main
difference is that you will enter a term to be searched for, and a term that you will replace the
search term when an occurrence is found.
In the image above, the term OS will be found in the text, and replaced with the term Operating
System. If you click the Find Next button, the first occurrence of the search term from your
current location in the text will be found. You can then judge by the context of the term
whether you want to replace it or not. If you do, simply click the Replace button. If you do not,
you can continue the search by clicking Find Next. You can also choose the Replace All button,
which will replace every occurrence of the search term that is found. (You should be careful
when using the Replace All feature. Make sure that you really want to replace every occurrence
of the term before you click the Replace All button.)
If you are editing your document’s HTML code, you can use even use Find and Replace to scour
your document’s code for specific HTML tags. The same basic options as before can be applied
here; however, you can also use a drop menu to select the specific HTML tag you want to find.
In the example below, we are searching for the title tag.
When we click the Find Next button, we will be taken to the first occurrence of the specified tag
in the HTML code.
Notice that the view area will automatically switch from the Design Editor mode to the Code
editor.
Lesson 2.3: Adding Elements
Now that we know how to add text and hyperlinks to our basic Web pages, it is time to learn
about adding other types of content. In this lesson you will learn how to insert symbols, photos,
and files into your Web pages. In addition, you will also learn how to add clickable button links
to your Web page.
Inserting Symbols
Sometimes occasions arise where you must add a character to your Web page that cannot be
found on a standard keyboard. You may be explaining a mathematical equation, or perhaps you
want to display a word or phrase in the alphabet of another language.
To insert a symbol in your Web page, click the Insert menu, and then click the Symbol option.
When you perform this action, you will see the Symbol dialogue.
You can use the Subset drop menu at the right of the Symbol dialogue to specify a category of
symbols to choose from. When you specify a category, the symbols belonging to it will be
displayed in the large viewing area of the dialogue. You can also use the scroll bar at the right
side of the main viewing area to scroll through the different symbols.
When you have found the symbol you are looking for, select it by clicking on it in the dialogue,
and then click the Insert button. The symbol will be placed at your current location in the
document (assuming that you are using the design editor).
You can also select an item from the recently used symbols panel that runs along the bottom of
the dialogue. Just click and highlight the symbol of your choice, and then click the insert button
to place it in your document. When you have inserted your symbol, click the Close button.
Here, we have used the integral symbol to write the general notation for the indefinite integral.
We can now modify this symbol by selecting the text and using the standard formatting tools
on the Common toolbar.
Here is the same notation with a different font color, different font type, and different font size.
Adding Photos
SharePoint Designer makes it easy to add photos to your Web site. You can add individual
photos or photo galleries. You can add photos from image files stored on your computer, or
from a digital camera or scanner.
To add a photo, first click the Insert heading on the menu bar, and then choose the Picture
option. This will display a sub menu of choices for inserting images, flash animations, or videos
(The Photo Gallery option is accessible when you are working with a Web site. It may not be
accessible when working with a single Web page).
As you can see, there are several options available from the Picture sub menu. The first option
(From File) will open a dialogue that you can use to browse to any given folder on your
computer.
By default, the file types that appear in the dialogue will be image files (see the Files of Type
field in the image shown above). The next step is to select an image, and then click the Insert
button.
The image will appear in your Web page at the current position of your cursor (in the design
editor).
To remove an image from the Web page, just select it (in the design editor) and hit the
Backspace or Delete key on your keyboard.
Inserting Files
To insert a file into your Web page, click the Insert menu, and then click the File option.
When you do this, a Select File dialogue will appear on your screen.
The next step is to browse to the folder that contains the file you want to insert, select the file,
and click the Open button in the lower right of the dialogue.
In this example, we are inserting a Word document. When you click the Open button,
SharePoint Designer will convert the file into HTML and insert it into your Web page.
Here you can see the contents of the file displayed as a Web page in the design editor.
Here is the HTML for the inserted Word document as seen in the Code editor.
If you try to insert a file into your Web page, you may receive the following message.
This message simply tells you that SharePoint Designer is not able to insert the chosen file
unless some additional conversion software is installed. If you click the Yes button, you will
receive directions on how to install the necessary converter. At this point, you may be asked to
insert the disk that has your Microsoft Office installation files on it. Insert the disk and click OK
on the prompt to complete the installation of the conversion software. The Insert File feature
should have no problem inserting content from files created by text editors, Word and
WordPerfect documents, and other HTML documents.
Adding Buttons
To give your Web page a slick appearance, you can add interactive buttons, and link them to
other files or pages like a regular hyperlink. First, click the Insert menu and choose the
Interactive Button option.
This action will display the Interactive Buttons dialogue.

When you see the dialogue, you can choose any button from the large scrolling list in the area
labeled Buttons. When you click on an item in the button list, you will see a preview of the
button in the area labeled Preview. In the field labeled Text, you can specify the caption that
appears on the button. If you click the Browse button in the lower right, the Edit Hyperlink
dialogue (see Lesson 2.2) will open, allowing you to choose a target to link to your button.
In the image on the previous page, we have chosen a button and we have added the text “My
new button” to it.
If you click the Font tab, you will see tools for selecting the font effects for the button. You can
change the font style, the size, the text alignment, and more.
The image above shows the font tab options. Note that you can change the font color for the
button text’s original state, for when a mouse pointer is hovering on it, and for when the
button is clicked.
If you click the Image tab, you will be presented with options for modifying the underlying
button image. You can specify the height and width of the button by changing the values in the
Height and width fields. If there is a check in the Maintain Proportions checkbox, increasing or
decreasing one dimension of the button will also change the other dimension proportionately.
If you clear this checkbox, you can then change the length or the width independently.
You can also choose whether the image will be a GIF format or a JPEG format by selecting one
of the radio buttons near the bottom of the dialogue.
As before there is also a preview area where you can see the results of your modifications.
When you have your button set up just the way you like, click the OK button in the lower left of
the dialogue to insert your button into your Web page.
The button will be located at your current position in the design editor. To remove an
interactive button from your Web page, just select it in Design view), and press the Backspace
button or the Delete key on your keyboard.
Lesson 2.4: Adding Advanced Elements
There can be a lot more to Web sites than just text and images. You can also include other
elements in your Web pages that are designed for interaction with the user. These elements
can allow users to upload files, submit information, indicate choices, and more.
In most cases, these advanced options will require some kind of processing for the information
that is submitted. This will usually entail sending the information to a particular file that will act
on it in some way.
Since we are only dealing with foundation concepts here, we will leave the actual processing of
the submitted data for another time. For now, we will only worry about how to insert and
modify these advanced elements.
Adding Forms
The first advanced element we’ll deal with is a form. But first, let’s find out where these
advanced elements are located in SharePoint Designer.
To make these elements available, you should display the toolbox task pane by choosing the
Task Panes menu from the menu bar, and then clicking the Toolbox option to put a check by it
(see Lesson 2.1). This will display the SharePoint Designer toolbox in a task pane at the right of
your screen.
Under the HTML heading in the toolbox, click on the Expand (+) button beside the words Form
Controls. This will display the advanced HTML elements, some of which we will discuss in this
lesson.
The third option down from the top is labeled Form, and has a small dotted box beside it. To
insert a form in your Web page, right click on this option and click the Insert option.
That’s all there is to it! You have just inserted a form into your Web page.
Although you cannot see anything new in the design editor after you add your form, you should
notice a <form> tag along the top of the editing area under the tab for your Web page.
To see what has been inserted, click the Code tab at the bottom of the editing area to switch to
Code view. The following image shows the HTML code that is created when you insert a form.
Basically, a form is used to contain form controls. The HTML code for elements like text boxes
and input buttons will be placed between the form tags (between the opening tag <form
method=”post” action=””> and the closing tag </form>).
When you submit the information associated with the text boxes and buttons contained in the
form, it will be sent to a file specified in quotes after the word action in the opening form tag.
<form method=”post” action=”destination file”>
Typically this destination file will process the submitted information in some way. The word
post (method =”post”) describes the way that the information is submitted. In an HTML form,
information can be submitted with a get method or a post method. The differences between
these methods are not important for our purposes here. Suffice to say that the “get” method
will attach the submitted information to a URL (visible in the address bar of your browser).
However, you will not see the information in your address bar if the post method is used. In
addition, the get method can only transfer a limited number of character (browsers only allow
so many characters in a URL) while the post method can transfer a larger number of characters
(more data). If you think the form will produce a lot of data, use the post method.
You may also notice something called a FrontPage form in the toolbox.
This is a special type of form that relies on FrontPage Server extensions on the server side to
process data submitted from the form, so we’ll skip it for now.
Adding Text Inputs and Areas
An HTML form will typically be used for gathering information from a visitor to your Web site. A
text area is a form element that can capture text that a user enters.
SharePoint Designer provides two form elements for capturing text. One is called a text area
and is used for capturing large strings of text (more than a single line). The other is called a text
input, and is used for capturing single lines of text. Both of these elements are indicated in the
image of the toolbox shown below.
To add either of these text controls, right click on the item you want in the toolbox, and select
the insert option.
This image shows an empty Web page after inserting a text area (top) and a text input
(bottom). Typically the smaller text input control is used for capturing single words or short
strings of text.
The larger Text Area control can be used to capture many lines (paragraphs) of text. If you
select one of these text controls by clicking on it in Design view, you can change its dimensions
by dragging the small “move” handles that will appear around it.
Visitors to your Web site can enter text into these fields, which can then be submitted to
another file for processing (see the discussion of forms above).
To contain two or more form controls in the same form, make sure they are both in the same
faint blue highlighted area when you insert them. (Remember, the faint blue overlay appears
when the application style setting is manual.)
As an example, look at the following Web page in Design view.
You should notice that both controls (text field and text area) are contained in the same light
blue selection area. If we look at the HTML code (by switching to Code view), we can see that
both text controls belong to the same form.
Now, look at the following image of the Web page in Design view.
Here, another small text field has been added, but it is in its own faint blue selection area. (You
can leave a selection area by clicking on an empty part of the screen with your mouse. Your
cursor will move to the spot you click on.)
If we look at the Code view for this Web page, we can see two sets of Form tags.
This is important because you may want the user to submit data to different destination files. If
all of the data is going to the same destination file for processing, put your controls in the same
form. If the data from different form controls is going to separate destination files, use different
forms for the different controls.
Adding Input Buttons
When you create a form containing text areas or other controls, you must provide a way for the
user to submit the data that they enter. The way to do this in HTML is with input buttons.
There are two types of input buttons available in the toolbox: a Reset button and a Submit
button.
The Reset button will return all of the controls in its form (text fields, checkboxes, and radio
buttons) to their initial state. The Submit button will submit the data from all of the controls in
its form to the destination file.
To insert one of these buttons, right click on it and choose the Insert option. Remember, the
button must be included in the same form as the controls to have any affect on the controls.
In the image above, a Submit button and a Reset button have been added to a form that
contains an input text field. In practice, clicking the Submit button would send the information
from the text field to the destination file. Clicking the Reset button would clear the text field.
Here is the HTML code for this simple Web page (showing all three controls in the same form).
Using Labels and Radio Buttons
Labels can be used to bind specified text with a form control. This means that not only does the
label tell you what the control is for, but when you click the Label text, the control will be
toggled on. This is most useful for radio button and checkbox controls.
To insert a radio button, right click on the radio button item in the tool box, and choose the
insert option.
As an example, look at the following Web page (in Design view) with two radio buttons.
These radio buttons don’t give the user very much information. However, if we place our cursor
next to the radio button and insert a Label we can improve the situation.
When you insert a label, place your cursor next to the control that the label will describe. After
you insert it, go ahead and type the text for the label.
Here we have entered 1 to 50 as a label next to the first radio button. This tells us what the
button is for. If the user wants to indicate a number between 1 and 50, they can click the radio
button.
This image shows the insertion of an additional radio button and label. Now the user has two
choices: they can indicate a number from 1 to 50, or a number from 51 to 100. When the data
from this form is submitted (probably with a Submit button), the user’s answers will be sent to
some destination file for processing.
Note that SharePoint Designer does not bind the label to the control for you. It also does not
make radio buttons mutually exclusive (typically radio buttons are used for mutually exclusive
choices) either.
Here is the HTML code for the radio controls and labels shown above.
To make the radio buttons mutually exclusive, the radio buttons must have the same name
attribute. If we edit the code by changing the name attribute of the second radio button to
Radio1, it will have the same name as the first radio button, making the buttons mutually
exclusive, forcing the user to choose only one or the other, not both.
To bind a label to the radio button, we can introduce an id attribute to the radio tag, and
introduce a “for=” attribute to the label tag. Look carefully at the following HTML to see how it
differs from the HTML shown above.
You should notice that each radio button tag now has an id attribute, and the id attribute for a
given radio button is specified as the “for= “attribute of its corresponding Label. Now, if the
user clicks on the radio button, or on the radio button’s label, the radio button will be selected.
Since the radio buttons are now mutually exclusive (same name attribute), selecting one radio
button will deselect the other.
Here is how the radio buttons would look in a browser.

Adding Advanced Buttons
Advanced buttons can be quite useful in your Web pages. You can specify an advanced button
to be a reset or submit button, just like the input buttons discussed previously. What
differentiates an advanced button from a regular input button is the ability to add you own text
or an image to the button.
To insert an advanced button, follow the same procedure as before. Right click on the advanced
button item in the toolbox and choose Insert.
In the code editor you can see the HTML for the advanced button, while you can see the button
itself in the design editor.
The text that appears in black in the button tag (>button<) will be the text that appears on the
button itself in the design editor. To change this text, just edit it in the code editor. (To do this,
place your cursor on the black text in the button tag and remove or type whatever text you
want).
The following image shows the same button after changing the text in the button tag of the
HTML code.
If you right click on the button in the design editor, you will see a menu pop up with an
Advanced Button Properties option. Select this option to display the following dialogue.
Here you can select the button type (Normal, Submit, or Reset) and click OK to implement your
selection. As with the other controls, to remove an advanced button, first select it with your
mouse so it looks like the following sample.
(You can also click on the small tab that appears above the control to select it for removal).
Now just hit your backspace button or delete key to remove the control.
Adding Drop-Down or Group Boxes
To add a drop down menu to your Web page, right click on the Drop Down Box item from the
Toolbox, and select the Insert option.
This will place a drop down box in your Web page. In the following image (Split view), you will
see the drop down box itself in the design editor, and the corresponding HTML code in the code
editor.
If you wish, you can select the drop box in the design editor, and resize it with your mouse, just
like a button or a text field. To place options in the drop box, you must enter them between
option tags (<option></option>).
For example, to add the names Bob, Jane, Bill, and Lisa to the Drop box shown above, we need
to edit the HTML code in the following way.
<select name="Select1" style="width: 123px">

<option> Bob</option> <option> Jane</option> <option> Bill</option>
<option> Lisa</option>
</select>
The image below shows the edited HTML in the Code editor and the drop box in the Design
editor.
The following image shows what the drop box looks like in a Web browser.
A Group Box is a control that is used to group and identify other controls in an HTML form.
To insert a group box, follow the usual method of selecting the item in the toolbox, right
clicking, and selecting the Insert option.
When your group box appears in the design editor, select it and drag it with your mouse to
create the size you need.
Once you have created enough room in the group box, put your cursor inside the group box,
and begin inserting the controls that you need.
The following image shows a Group Box containing controls and the corresponding HTML in
Split view.
Group boxes are defined with a <fieldset> tag. In between the <fieldset> tags is where you will
find the HTML for the controls contained in the Group box.
To change the heading of the group box enter new text between the <legend> </legend> tags.
The image below shows the results of this change to the HTML.
You should notice when you look at the HTML code, that the fieldset tags appear inside the
form tags, and the different controls appear inside the fieldset tags.
You can delete a group box and the controls within it by selecting it (click on the small tab that
appears on the top) and then pressing your Backspace or Delete key.
1. You can create a new empty Web page by clicking which button?
A.
B.
C.
2. What does WYSIWYG stands for?

A. Nothing
B. What you see is what you get
C. An HTML language tag
3. The Design view provides what type of editor?

A. Simple text
B. WYSIWYG
C. HTML
D. Image Processing
4. Which one of the following statements is false?

A. You can build a Web page in the design editor
B. You can build a Web page in the code editor
C. You can edit the HTML for your Web page in the design editor
D. You can change fonts in the code editor
5. A hyperlink can link to…

A. An external Web page
B. A file
C. Another page in the Web site
D. Any of the above
6. Forms and Form controls are often used to…

A. Get data from the Web page’s visitors
B. Make the Web page load faster
C. Decrease the size of the Web page
7. When you submit data from an HTML form, which method can be used? (Select all
that apply.)
A. Post
B. Get
C. Give
D. Take
8. Which one of the following is not a form control?

A. Radio button
B. Submit button
C. Task bar
D. Drop down box
9. In SharePoint Designer, from controls are found in the …

A. Toolbox task pane
B. Layers task pane
C. Standard toolbar
D. Folder list
10. What is the difference between HTTP and HTML?

A. There is no difference
B. HTML is a Web communication protocol and Http is a language specification
C. HTTP is a Web communication protocol and HTML is a language specification
D. B or C
Section 3: Creating Sites and Advanced Pages

 Understand the file structure of a site
 Open an existing site
 Create an empty site
 Create a site from a template
 Import a Web site
 Use the folder list
 Switch views in the main pane
 View site reports
 Modify site settings
 Insert a page
 Delete a page
 Move a page
 Copy a page
 Create a new page from an existing one
 Chang hyperlink color
 Set the background
 Set margin sizes
 Set the language
 Assign a category
Lesson 3.1: Creating and Opening a Site
In the previous lessons, we looked at some basic ideas related to designing and creating
individual Web pages. It is now time to think about designing and creating an entire Web site.
As you know, a Web site is a collection of Web pages and other content. To begin, we will
discuss how to organize your content to make the job of creating the site a little easier. We will
then how to open an existing site, and then move on to creating a blank site. The final topics in
this lesson will deal with creating a site from a template and importing an external Web site.
The File Structure of a Web Site
So far, we have mostly been dealing with individual Web pages. When it comes to creating a
Web site, we have to think on a larger scale than individual files.
A Web site will usually contain multiple Web pages and some other content. For a small site,
you can store the Web pages and other content in a single folder. For a large site, you will
probably want to keep your Web pages and other content neatly organized into separate sub
folders. This way, you will know where to find a specific type of Web page or Web content if
you have to modify (or add) additional pages of the same type at a later date. Remember, some
Web sites may contain many (perhaps hundreds) of Web pages.
A Web designer will often create a Web site on his or her own computer. After the Web site is
created and tested, it will usually be uploaded to a server for further testing and then full
implementation. To make the job of publishing your Web site (uploading it to the server) easier,
you should keep the same folder structure on your local computer that you will use on the Web
server.
As an example, let’s say that you create a folder to house the contents of your Web site, and
inside this folder, you create sub folders for each subject that your Web pages will deal with.
Your main folder might be called MySite, and it could contain subfolders that organize the
content of your site. These sub folders might be called Images (for photos and other graphical
elements), FormPages (for Web pages containing forms), and Info (for Web pages that contain
the information you want to present).
When you create links between the pages in these folders, the links will depend on the folder
names you use. If you create links between your pages on your local computer, and then you
change the folder names when you publish your Web site to the server, the links will be broken
and will not work.
If you maintain the same basic folder structure on the server, it will require less work to get
your site up and running when you publish it. In addition, a sound folder structure will keep
your Web pages organized in a way that is easier to maintain and manage.
Opening an Existing Site
To open an existing site in SharePoint Designer, click the File menu, and then click the Open Site
option.
Performing this action will display the Open Site dialogue.
Now, use the navigation controls in the dialogue to browse to the folder on your local system
that contains the site. When you find the site that you want to open, click the Open button in
the lower right.
Note that a Web site folder created in SharePoint Designer has a picture of a globe on the
folder icon.
The Web site you selected will now open in SharePoint Designer, and you will be presented
with a list of the contents of your Web site.
In the image above, you can see the list of subfolders that belong to this Web site. Now you can
proceed to examine or modify the files that are contained in your Web site’s folders
Alternatively, if you click the down pointing arrow beside the open button, and then click the
Open Site option, the same Open Site dialogue will open as shown previously.
Creating a Blank Site
To create a blank site, click the file menu, the New option, and then Web Site.
You can also click the small down pointing arrow next to the new button, and select the Web
site option.
Both of these actions will display the following dialogue:
Select the Empty Web site option under the Web site tab in the General category. Next, specify
the location that you want to keep your Web site folders in, by using the Browse button (or
accept the default location). Finally (when you are ready) click the OK button.
You will now see SharePoint Designer’s blank Web site screen.
To add folders to the Web site, right click on the large blank area and select the New option,
followed by the folder option.
This will cause a new folder to appear at the top of the viewing pane. When the folder appears,
enter a name for it in the field provided and press the Enter key.
You can now repeat this process to add as many folders to the Web site as you like. You can
also create folders for your site in the folder list task pane; see Lesson 3.2.
Creating a Site from a Template
To create a site from a template, follow the same steps for opening a new Web site as before,
except for the part where you choose the Empty Web site option in the New dialogue. This
time, click the Templates category on the left, and a list of templates will appear for you to
choose from.
The next step is to select a template from the list (you can see a preview of the selected
template in the Preview area provided) and browse to the location on your local system where
you want to save your Web site.
Once you have done this, click the OK button to continue. You will then see the Web site folder
list appear, with all of the folders that are supplied by the template.
Inside each folder, you will find templates for the various Web pages will that you can use to
create the site.
Here is a Web page template supplied in a folder belonging to a Web site template. In this
example, the Web page is shown in Split view. Typically, these Web page templates will contain
editable areas (such as the contact area in the example above) that allow you to customize the
content of your site.
Importing a Web Site
Another option for opening a Web site with SharePoint Designer is to import one from an
external source. To do this, you should click the File menu, and then follow the Import option.
Then, under the Import sub menu, choose the Import Site Wizard.
This action will display the Import Web Site Wizard.
In the center area of the dialogue, you will see a selection of options for transferring the files
that comprise the imported Web site. Here is a brief description of each of these options.
FrontPage Server Extensions/ This option can be used when importing your Web site from a
SharePoint Services server featuring SharePoint Services and/or FrontPage Server
Extensions.
WebDAV WebDAV stands for Web based distributed authoring services.

These services are designed to allow users to manage,
maintain, and modify files stored on remote Web servers.
Most operating systems support these protocols.
FTP FTP stands for File Transfer Protocol. This is a widely used
standard protocol for exchanging files between computers
over a network (such as the Internet).
File System This option allows you to import files from a folder on your
local machine or from a shared folder on your network.
HTTP The hypertext transfer protocol is a very widely used standard

for transporting various kinds of information over the Web.

This option can be used to quickly and easily import a Web site
over the Internet.
Once you choose your import option, you must specify the path or Web address of the Web site
you want to import in the location field provided. (If you are importing a Web site from a
remote Web server via the Internet, you will of course need an Internet connection.)
Once you enter the address for the Web site and click the next button, you will see the
following stage of the wizard.
Here, you can specify the folder location where you want to keep the imported files. If you
currently have a Web site open in SharePoint Designer, you will be able to place a check in the
Add to Current Web site box if you want the imported site to become part of the currently open
site.
When you click the Next button in this stage of the wizard, you will be shown a dialogue that
allows you to specify how much of the Web site you want to import.
Here you can choose how many links (linked pages) to import with the home page, specify a
maximum size limit for your imported information (in kilobytes), or specify that only HTML and
image files are to be imported.
When you choose a depth level for the links to the home page (the first check box), you are
essentially setting a limit on how far the links will be followed when importing pages. A depth
level of 2, for example, will import the home page, along with the pages that are linked to the
Home page, plus the pages that are in turn linked to these sub pages.
Choosing a limit in kilobytes will make the import wizard stop importing Web site files when the
size limit is reached.
Finally, after you have specified all of your settings, click the Finish button on the final stage of
the wizard.
After you click the Finish button, you should see the files or folders for the imported site (now
stored on your local system) appear in SharePoint Designer under the Web site tab.
Lesson 3.2: Navigating Through Your Site
Now that you know how to open a local site, create a site from a template, and even import a
site from the Web, it is time to learn how to maneuver through the content of your site from
within SharePoint Designer.
Using the Folder List
As mentioned in Lesson 3.1, a Web site (especially a large one) will often have numerous
folders that are used to organize Web pages and other content. In SharePoint Designer the
folders for the currently open Web site will appear in a folder list. In the default workspace
layout, the folder list appears in a pane on the left of the screen.
If you change the default workspace layout and lose site of the folder list, you can get it back by
clicking the Task Panes menu, and choosing the Reset Workspace Layout option at the bottom
of the list of options.
Remember when you display the Task Panes menu, if there is a check by the Folder List option,
the folder list will appear on your screen.
Next to each item in the folder list, you will find an Expand (+) button. If you click on this
button, the corresponding folder will be expanded to show its contents.
When you expand a folder to see its content, you can always collapse it by clicking the (-)
button that appears next to an expanded folder.
Along the top of the folder list at the right, you will see a row of buttons.
From left to right, these buttons will ( ) insert a new folder, ( ) insert a new page, ( )
expand the folder list pane, and ( ) close the folder list.
To navigate to a particular item in the folder list, just double click on it. When you do this, the
item (a Web page in this example) will open in the main viewing area, and a tab for the item will
appear above the main viewing area.
If you click the Web Site tab above the main viewing area, a folder list will appear in the main
viewing area.
Along the top of the viewing area you will see headings for the name, size, file type, and
modification information for the files listed in the area below. (Folders will only have
information displayed in their name fields, but individual files should display entries in all
fields.)
If you click on any of these fields along the top of the folder list in the main viewing area, the
items in the list will be sorted according to the particular field you click on. For example, clicking
on the File Size field will sort the list items in order from largest file size to smallest. By default,
the contents of the folder list are sorted alphabetically by name when they appear in the main
viewing area.
This folder list serves as the root, or central hub, for your Web site files. To see the individual
files in a given folder from the list, just double click on the folder in the list that you want to
examine.
In the upper right of the main viewing area (under the Web site tab), you will see three buttons.
These buttons (from left to right) allow you insert a new Web page, create a new folder, or step
up one level in your Web site folder structure.
If you have numerous files open, you can always click the Web Site tab to access a view of your
overall Web site, and in turn, the original folder list with the three buttons mentioned just
above.
Here is the main viewing area before clicking the Web Site tab.
Here is the main viewing area after clicking the Web Site tab, showing the folder list for the site.
Switching Views in the Main Pane
SharePoint Designer offers a few different ways to view the contents of your Web site. These
different views are accessible from a row of options along the bottom of the main viewing area.
To see this row of options at the bottom of the viewing area, click the Web Site tab mentioned
above.
If you click the Folders option, you will be shown the original folder list, or a list of the files or
folders that are contained in the currently active (open) folder.
If you click the Copy Web Site option, you will be presented with a view and options for copying
your Web site files to a remote location (or to another location on your local system).
Basically, you can select the file or folder you want to copy, and then click one of the blue
directional arrows in the center to copy the selected item to its destination.
If you click on the Reports option, you will see a Site Summary report with clickable links.
These reports can reveal important information about the inner workings of your Web site.
(The next concept will deal with viewing reports in more detail.)
The Navigation option displays a pane that you can use to view or modify the navigational
structure of your Web site. Along the top of the navigation view, you will see a panel of controls
that can be used to add pages or links to the Web site, and also to change how you view the
navigational diagrams for your Web site.
Finally, if you click the Hyperlinks view, you will see a diagram showing you the hyperlink
structure for your Web site.
The blue arrows in this view represent hyperlinks. The page in the center will contain all
hyperlinks pointing away from it, and will be the target of all hyperlinks pointing toward it.
The diagram that you see is a graphical overview of which pages in your site link to which. If you
double click on a specific page in the diagram, the page itself will open so it can be edited.
If you right click on a particular page, and choose the Move to Center option, the page you
selected will appear at the center of the diagram. Also, if you click the Expand (+) button beside
a Web page, you will see the links and link targets that are accessible from that page.
Viewing Site Reports
As mentioned above, there is a Reports option available at the bottom of the main viewing
pane under the Web site tab. When you click this option, you will see a summary report
(containing links) for your Web site.
This summary report organizes your Web site content (files, images, and links) into several
categories with corresponding statistics. For example, we can see from the third entry in the list
above that there are 5 unlinked files (files that cannot be reached from starting at the home
page). We can also see that these files have a combined size of 6 kb.
If you click on the underlined link for this entry in the list, you will be shown a list of the files.
If you double click on any of the files in this list, the file will open up in the main viewing area
for editing. To return to the list of files, just click the Web site tab at the upper left.
Beneath the Web site tab, you will see the title for the currently open report.
Beside this report title, you will see a drop down menu arrow. If you click this arrow, you will
see a menu of category headings, each one of which contains a sub menu of specific report
options.
The report that is currently open will have a checkmark next to it in the menu. You can click the
Site Summary option in this menu to return to the original summary report with clickable links.
You can also choose which report to view by clicking the Site menu from the main menu bar;
and then choosing the Reports option.
This will display the same list of reporting menu options as before. When you click on a report
option, the corresponding report will open in the main viewing area.
When you open a report, you will see a row of fields across the top of the viewing area. These
fields help to categorize the report information.
Each field in this row will have a black (down pointing) arrow associated with it. This arrow
allows you to choose from a selection of possible filters that you can apply to the report data.
You can select a condition from the filter drop list to filter the data on the selected field by the
selected condition (for example, all files with a modified date of 11/1/2006).
You can easily combine these filters by selectively filtering on one field after another to find
exactly the file (Web site content) that you want to work on. (For instance, you might set up
your filters to show all files with a size of 4 kb that are modified on 11/1/2006, and are of type
htm.)
Modifying Site Settings
In SharePoint Designer, you can configure a number of settings that will apply to your Web site
in a global sense. Some of these settings deal with concepts that we haven’t covered yet, so we
won’t go into the particulars of these features in detail. For now, we will just look at how to
access these options.
First, make sure that you click the Web Site tab, and then choose the Folders view from the row
of options at the bottom.
From this point, right click on a blank area containing your list of folders and choose the Site
Settings option from the pop up menu.
You can also display this dialogue by right clicking on blank space in the folder list task pane,
and then clicking the Site Settings option from the pop up menu.
Either action will display the Site Settings dialogue as shown in the image to follow.
In this dialogue, you can change the name of the Web site and specify what type of scripting
language will be used in your Web pages (in case you want to add client side scripts). You can
also customize the labels on link bars, configure contributor settings (for users who are allowed
to contribute or modify Web site content), manage database connections for the site, and
more. Note that the site settings dialogue has a number of tabs, each with a different array of
options.
Once you have configured the settings as you require, click the OK button in the dialogue to
implement your changes.
Lesson 3.3: Modifying Site Pages
You should now be comfortable with the basics of opening an existing Web site, creating an
empty Web site, and using SharePoint Designer to navigate through and access your Web site
files. Having accomplished these goals, it is now time to learn how to manage your Web site
content on the level of individual Web pages. In this lesson you will learn how to Insert and
delete Web pages, move and copy Web pages, and create a new Web page from an existing
one.
Inserting a Page
To insert a page into your Web site from the main viewing area, click the Web Site tab and
navigate to the main folder list or to the subfolder that will contain the page. In the upper left
of your main viewing pane you will see three buttons.
If you click the first button (the new page button), you will see a new page appear in the list of
items that are in the current folder list.
You can give the new page a name by entering it directly into the field provided as shown
below:
Once you are ready, you can double click on the new page item in your list to open up the page
for editing.
You can also right click on an empty area of your folder list, and select New, followed by HTML
from the pop up menu.
This action will inset a new page in the current folder list in an exactly similar manner to the
first method shown above.
To create a new page in the Folder List pane, first click and select the folder in the list that will
contain the page.
Next, click the New Page button from the row of buttons at the top of the folder list pane. A
new page will now appear in the selected folder.
If the main Web site folder is selected before adding the page, the new Web page will appear as
a page in the main folder list, and will not be contained within one of the internal Web site
folders.
Deleting a Page
It is very easy to delete a page in SharePoint Designer. Just single click on the page in question
from the folder list or main viewing area (under the Web site tab) so that it is highlighted in
blue. Next, press the delete key on your keyboard.
You will then see the following alert.
If you are sure you want to delete the selected page, click the Yes button.
You can also right click on a page that you want to delete, and then click the Delete option from
the pop up menu.
You will then see the same alert as before. Just click the Yes button to continue and delete the
page.
Moving a Page
To move a Web page within your Web site using the main viewing area, first change the view to
show the list of items that includes the Web page in question. If you want to move the Web
page to a folder that appears in the same list, simply drag it with your mouse to the folder that
will be its new location.
If you want to move a Web page from one folder to another, open the folder that contains the
Web page, right click on the page, and select the Cut option from the pop up menu.
Next, navigate to the folder that will be the new location for the page, right click on a blank
area, and select Paste from the pop up menu. (The page will have been automatically removed
from its original folder.)
The Web page will now appear in its new location.
It is actually quite a bit simpler to move a Webpage from one folder to another using the Folder
list pane. In this case, just expand the folder containing the page you want to move, and then
drag the page up to the destination folder. In the example that follows, the Information_links
page is being dragged up to the Contact folder. The page will be removed from its original
folder and deposited into the destination folder.
Copying a Page
To copy a page in SharePoint Designer using the main viewing area, navigate to the folder that
contains the page, right click on it (the page), and choose Copy from the pop up menu.
When you perform these steps, the selected Web page will be copied to the Office clipboard.
You can now navigate to any other folder in your Web site, right click, and choose the paste
option to place your Web page in its new location.
Because the Web page was copied, it will not be removed from its original location. (This means
that there will now be two identical Web pages in different locations in the site.)
You can also copy Web pages to another location on your computer or to a remote system by
using the Copy Web Site view (also see lesson 3.2).
When the Copy Web Site view appears, select the location that you want to copy to by clicking
the Remote Web Site Properties button at the top of the pane.
This will display a dialogue with navigation controls, allowing you to select the remote location
of your choice.
Once you select a location and click OK, the folders and files associated with the remote
location will appear in the right of the Copy Web Site pane.
Now you can easily select a Web page from one side, and click the directional arrow to copy it
to the Web site on the other side. You can also easily copy pages from folder to folder using the
Folder list task pane. To do this, first expand the folder in the folder list that contains the page
you want to copy. Next, press your Ctrl button and drag the page you want to copy until it sits
on the destination folder. When you release your mouse button, the page will be copied to the
destination folder. Because it was copied, the page will also still appear in its original location.
In the image above, the contact Webpage is being copied to the Information_links folder
Creating a New Page from an Existing Page
SharePoint Designer also allows you to create a new page based on an existing one. To do this,
first right click on the existing Web page that you want to use. In the pop up menu, select the
New From Existing Page option.
(You can also perform this same action from within the Folder List pane.)
When you click this option, a new Web page based on the existing one will open up for editing.
Right click on the page’s tab and choose the Save option to save the new page to the Web site
location of your choice.
When you choose the Save option, a save as dialogue will appear. (The folders and files of the
currently open Web site will be available in the Save as dialogue by default. Alternatively, you
can use the navigation controls in the Save As dialogue to browse to a new location if you wish.)
Lesson 3.4: Modifying Page Properties
Now that you know how to open Web sites and create and copy Web pages, it is time to learn
how to modify Web page settings. In this lesson you will learn how to set the background,
change the hyperlink color, specify margin sizes, and more.
Changing the Hyperlink Color
The main tool for modifying Web page properties is the Page Properties dialogue box. To
display this dialogue, make sure your editor is in Design View, right click on a blank area of your
Web page, and click the Page Properties option in the pop up menu. (Alternatively, you can
click the File menu from the main menu bar, and then click the Properties option.)
Performing either of these actions will open the Page Properties dialogue shown below. To
change the hyperlink color, you should click the Formatting tab in the dialogue.
On the right side of the dialogue (under the Formatting tab), you will see a column of drop
menus for setting the colors of your hyperlinks. You can specify a particular color for an inactive
hyperlink, for a visited hyperlink (one that has been clicked), for an active hyperlink (one that
you are clicking), and for a hovered hyperlink. These controls will allow you to specify exactly
how the color of your hyperlinks will change in response to user interactions.
In the following image, the color settings for the hyperlinks are being changed. According to the
settings chosen, a hyperlink will first appear yellow, until it is clicked, at which time it will be
grey. After the hyperlink has been clicked it will have a pink color.
When you are finished specifying your hyperlink colors, click the OK button in the dialogue.
You can also change the hyperlink colors by inserting a line like the following into the HTML
code.
<body link="yellow" vlink="pink" alink="gray">
This line should be inserted after the opening <body> tag in you HTML. You can do this by
switching to Code view and typing this line directly.
Just like the previous example, adding this line will change the inactive link color to yellow, the
visited link color to pink, and the active link color to gray.
Remember, people who are visiting your site will be quite used to the standard (default)
hyperlink colors. For this reason, give any changes to the hyperlink colors in your site careful
consideration.
Setting the Background
To set the background for your Web page, you should once open your page for editing, and
display the Page Properties dialogue (File - Properties). In the Page Properties dialogue, select
the Formatting tab.
You will notice that there is a checkbox labeled Background Picture. If you put a check in this
box, you will be able to use the Browse button to navigate through your computer folders to
find the image you want to use. Once you have selected the image, clicking the OK button will
apply this image as a back ground to your Web page.
Here is an image of a Web page in Design view. For this example, a picture file was selected as
the background for the page.
You can also specify a particular color for your background if you wish. To do this, once again
display the Formatting tab of the Page Properties dialogue.
Use the drop down Background color menu (shown in the image above) to select a color for the
background of the page. (Do not check the background picture checkbox.) After you make your
choice, click the OK button to implement it.
This image shows a Web page with a solid green background.
You could also insert the following line directly into the HTML (after the opening <body> tag)
for the same results.
<body bgcolor="green">
Because green is specified as the color value (in quotes), the background color for the page will
be green like the image above.
Here is the HTML in Code view.

Setting Margin Size
SharePoint Designer makes it easy to set up margins for your Web pages. Just as with a regular
document, margins in a Web page will control the extent to which text can cover the viewing
area, leaving neat borders of blank space at the sides and top and bottom.
As an example, look at the Web page shown in the image below.
To apply margins to this page, right click on a blank area of the page and choose Page
Properties from the pop up menu.
You could also click the File menu, and choose the Properties option. Either of these methods
will display the Page Properties dialogue. When you see this dialogue, click the Advanced tab to
display the margin controls.
In the Advanced tab, you will see a field for each margin. You can enter values directly into
these fields, or you can use the small arrow buttons next to each field to change the margin
values incrementally. When you have finished specifying your margins, click the OK button.
By default, the margins will be set to no value (zero). When you enter a value, the unit that
SharePoint uses is a pixel. This means that a value of 50 for the top margin translates into a
blank space with a width of 50 pixels across the top of the Web page. Often with word
processors, margins are measured in inches, so a value of 1 or 1.5 translates into a 1 or 1.5 inch
margin. With SharePoint Designer, a value of 1 or 1.5 would barely change the page’s
appearance, because it means that the margin would only be 1.5 pixels wide.
In the dialogue box shown above, all margins where given a value of 50 pixels.
The resulting page looks like this:
The next image shows the same page, except that all of the margins are now set to 100 pixels.
You can always undo page formatting changes with the Undo button on the Common toolbar.
Setting the Language
You can also use the Page Properties dialogue box to set the language characteristics for your
Web page. To do this, first display the dialogue (File - Properties, or right click and choose Page
Properties), and then select the Language tab. Under this tab, you will see drop menus for the
page language and for the character encoding scheme.
The first field, under the Page Language heading, allows you to specify the meta-tag for the
language content type. In the dialogue above, the language is specified as English (U.S.).
Here is the resulting HTML meta-tag as seen in Code view.
This information is important because it allows search engines and other Web applications to
categorize your Web page as belonging to a specific language group. This is what (in a broader
sense) allows Web surfers to search for only English content pages, or Japanese content pages,
or whatever language they prefer.
The HTML character encoding (Unicode (UTF-8)) in the dialogue box shown above specifies the
type of character set that can be used.
You may be familiar with the ASCII character set, which basically covers the characters that are
found on a typical north American keyboard (letters, numbers, punctuation symbols, and so
on). Although this is adequate for many purposes, it is not sufficient for the world wide reach of
HTML Web pages.
For this reason, other character sets can be used with HTML, such as Unicode, which includes
just about every character from every major language. The HTML encoding field is where you
can specify the character set you want to use for your pages.
Once you specify the page language and the HTML character set for the Web page, just click the
OK button in bottom of the dialogue to implement your settings.
(Note: SharePoint Designer’s default language settings should be sufficient for most English
language Web pages.)
Assigning a Category
Many Web sites include a site map (table of contents) to help visitors find what they are looking
for. Sometimes these maps are organized around the navigational structure of the site, but they
can also be organized around the categories that your Web site’s pages belong to.
To assign a category to a Web page, first display the Page Properties dialogue by choosing the
File menu followed by the Properties option, or by right clicking on your Web page and
choosing the Page Properties option from the pop up menu.
When the dialogue box appears, select the Workgroup tab to display the options shown in the
image below.
Near the center of the dialogue, you will see a scrolling list of checkboxes. Next to each
checkbox you will see a category name. To assign a category to your Web page, just place a
check mark next to the category you want and then click the OK button. If you want, you can
assign multiple categories to a Web page by checking multiple boxes. If you click the Categories
button in the dialogue, you will see a Master Category List.
This list shows all of the categories that you can assign to a page. If you want, you can even add
a category by entering it in the New Category field, and then clicking the Add button.
Any new categories you add will appear in the list of checkboxes so you can assign them to Web
pages.
When you assign categories to your Web pages, you can then build a site map showing what
kind of information your site contains, based on the categories you use.
Lesson 3.5: Adding Folders to your Site
As a final lesson in this section, we will learn how to work with the folders in your Web site. This
includes adding folders, renaming folders, copying folders, and deleting folders.
Creating Folders
Before you create a new folder for your site, you must first decide where you want to place the
new folder. Will it be a main folder in your Web site, or a sub folder belonging to a particular
section of your site?
Once you decide where you want to place the new folder, use the controls under the Web site
tab to navigate to the appropriate folder list.
The image above shows the main folder list for a Web site in SharePoint Designer. To create a
new folder here, just right click on a blank area at the bottom of the folder list, click the New
option in the pop up menu, and then click the Folder option from the sub menu.
When you follow these options, a new folder will appear in the list.
You can then enter a name for the new folder in the field provided (shown in a red rectangle in
this example).
If you double click on the new folder, or any other folder in the list, your view will change to
show the contents of the folder you click on. You can then repeat this process to create a new
folder as a sub folder. Remember, you can navigate up through the levels of your folder
structure by clicking the up one level button.
You can also create a new folder by clicking the File menu, followed by the New option, and
then the Folder option.
The result of this action will be a new folder just like before.
Moving Pages into Folders
To move a page into a folder that appears in the same list as the page, just drag the page icon
with your mouse towards the icon for the folder that you want to locate it in. When the folder
becomes highlighted in blue, release your mouse button to deposit the page in the folder.
In this image, the page called newPage is being moved to the folder named contact.
To move a page from one folder to another, first navigate to the contents of the folder that
contains the page you want to move. Next, right click on the page and select Cut from the pop
up menu. Once you have done this, navigate to the destination folder, and click Paste to
deposit the page there. (For more information on moving pages, see the discussion in Lesson
3.3.)
Renaming Folders
To rename a folder in your Web site, just right click on the folder in question and then click the
Rename option from the pop up menu.
Once you perform this action, a name field with a flashing cursor will be provided next to the
selected folder.
Just type the new name for the folder in the field and press the Enter button on the keyboard.
Remember, if you have links in your Web pages that reference the renamed folder’s content,
make sure that the links still work before you publish your Web site.
Deleting Folders
To delete a folder from your Web site, just right click on it and click the Delete option in the pop
up menu.
You can also select the folder with your mouse and then press the Delete key on your keyboard.
When you delete a folder, you will see the following alert.
Just click the Yes button in the alert box to commit to deleting the folder. Remember, when you
delete a folder, its content will be deleted as well. Any hyperlinks in your Web pages that point
to this content will now be broken.
Copying Folders
To copy a folder, just right click on it and then click the Copy option from the pop up menu. The
folder and its contents will be copied to the clipboard.
Once you copy the folder, you can navigate to the location of your choice, right click, and
choose the Paste option to paste the copied folder and its contents into its new home. To copy
folders between sites, click the Copy Web Site option from the row of options at the bottom of
the Web site viewing pane.
This will display the Copy Web Site view.
In this view, select a destination Web site using the controls in the Remote Web site part of the
screen, and then copy folders by selecting them and clicking the appropriate directional arrows.
(For more information on the Copy Web Site feature, please refer to Copying a Page in Lesson
3.3.)
1. To create a new empty Web site, you should…

A. Click the File menu, click the New option, and then click the Web site option.
B. Click the File menu and then click the Open Site option
C. Either A or B
2. Folders are used in Web sites to…

A. Help organize content
B. Help maintain links when the Web site is published
C. A or B
3. The Split View shows…

A. The Design view and the Code view at the same time
B. Two SharePoint Designer windows showing the same Web site
C. The HTML and the CSS files at the same time
4. To modify the background color for a page, you can use…

A. The Page Properties dialogue
B. The Toolbox
C. The Common toolbar
D. The Folder List
5. To display the Page Properties dialogue, you can… (Select all that apply)
A. Right click on a blank area of the Web page and select Page Properties from the pop
up menu
B. Click the Window menu and choose the Page Properties option
C. Click the File Menu and choose the Page Properties option
D. Click the Page Properties button on the Properties toolbar.
6. Why should you be careful when formatting hyperlink color and effects?
A. You may break the link.
B. Formatting the color of a link can change the target URL.
C. It is not something you have to worry about.
D. Most users are used to a standard link format. Changing this standard may confuse
navigation for Web site visitors.
7. Which of the following is not a tab in the Page Properties dialogue?

A. General
B. Language
C. Custom
D. Options
8. The Folder List task pane shows…

A. The recently saved Web sites
B. The folders and files that are in the currently open Web site
C. Only the Web pages in the currently open folder
D. Any of the above
9. You can use the folder list to…

A. Delete files
B. Delete folders
C. Create new Web pages
D. Any of the above
10. To view site reports, you should…

A. Click the Site menu and then click the Reports option
B. Click the Reports option where it appears under the main viewing area
C. A or B
Section 4: Doing More with Text

 Select text
 Cut text, copy, and paste text
 Use undo and redo
 Use the Office clipboard
 Change the font type
 Change the font color
 Change the font size
 Use the Font dialogue
 Modify character spacing
 Add bullets and numbering
 Add borders and shading
 Use the Paragraph dialogue
 Use spell check
 Use the Clip Art task pane
 Use the Thesaurus
 Add layers
 Use layers
 Remove layers
Lesson 4.1: Editing Text
An important part of any Web page is the written content. After all, this is how most of the
information on a typical Web page is conveyed. Sometimes it is easy to forget that the way your
text is presented and formatted can have a significant impact on how visitors react to your
page. That is to say, the content of what you write is certainly important, but the presentation
of your text is also important and should not be neglected.
In Lesson 2.2, we learned about using SharePoint Designer to add text to your Web pages. We
also discussed some of the basic formatting effects that can be applied to your text. Now it is
time to continue our discussion of SharePoint Designer’s text related features and tools.
Selecting Text
When you add text to a Web page, you will typically use an HTML paragraph tag <p>. If you use
SharePoint Designer’s Design view to create your Web page, you do not have to manually enter
these paragraph tags because they are created automatically when you enter text.
If you switch to Code view, you will see the paragraph tags for the text you have entered.
If you use the manual Application Style (see our discussion of the status bar in Lesson 1.2), you
will see your paragraphs surrounded by a light blue border, and highlighted within this border
by a faint blue tint.
When you press the Enter key on your keyboard, a space will be skipped, and a new paragraph
(faint highlighted area) will begin. Each one of these faintly bordered and highlighted areas
represents an HTML paragraph.
If you click on a particular passage of text in Design view, the borders and highlighting for the
paragraph will appear, and in a sense, the paragraph will be selected.
When a paragraph is highlighted with its blue border and faint blue tint, it is active, and any
formatting or color changes you make will be applied to the entire paragraph.
In this image, the center paragraph was selected by clicking it, and the color of the text was
changed to red. The change was applied to all text in the paragraph (the area surrounded by
the light blue border).
Now we know how to select an entire paragraph, but what if you want to select only a few
words within a paragraph, or two or more paragraphs?
In SharePoint Designer, you can select pretty much whatever text you want by placing your
cursor/mouse pointer at the beginning of the passage you want to select, clicking and holding
your left mouse button, and dragging with your mouse until you reach the end of what you are
selecting. As you drag, the text you go over will be shaded with a dark blue.
The shaded text in the image above has been selected. The un-shaded text has not. When you
reach the end of what you want to select, release your mouse button, and the blue shading will
remain indicating your selection.
This way of selecting text is common to most text editors or word processors that you will
encounter, and moreover, it can be used to select individual words, characters, sentences, or
multiple paragraphs. The drawback to selecting text this way is that you must drag your mouse
over the text to select it. This can sometimes be awkward, especially for large passages of text.
An alternative method is to place your cursor at the beginning of the text that you want to
select, press and hold the Shift button on your keyboard, and then click to place the cursor at
the end of the text you want to select. When you do this, all of the text between the two points
you chose will be selected.
The selection shown here was made by using the click–Shift–click method.
You can use this method to select individual characters, words, or multiple paragraphs, just like
the first method.
There are still a few more selection techniques to cover before we are finished.
 First, if you double click on a single word, that word will be selected.
 If you single click anywhere in your page after making a selection, the selection will be
deselected.
 If you click anywhere in your page and press the Ctrl + a keyboard shortcut, the entire
page including images, text, and other media will be selected.
These selection techniques work in Code view as well, so they can be used to edit and
manipulate the underlying HTML for your pages.
Cutting, Copying, and Pasting Text
Now that you now how to select text, it is time to learn how to manipulate your selections.
To cut text, make the selection that you want, right click on the selection, and click the Cut
option from the pop up menu.
When you click the Cut option, the selected text will be removed from the screen. Fortunately,
the cutting action can be undone with the Undo button if you accidentally remove the wrong
text or change your mind. When you cut text, the selection that you remove is placed on the
Office clipboard, and can be pasted elsewhere.
To copy text, make a selection, right click on it, and click Copy from the pop up menu.
This time, the text will not be removed from your screen, but it will still be saved in the Office
clipboard. You can paste this text elsewhere in your Web page, or even in another open
application like a word processing document. Essentially cut and copy are the same, except for
the fact that cut removes the selected text from the screen, whereas copy leaves it in place.
To paste test that has been cut or copied, simply place your cursor at the appropriate location,
right click, and choose the Paste option from the pop up menu.
The text that you just cut or copied will be placed directly into the page starting at the location
of your cursor.
The cut, copy, and paste features work the same way in the code editor as well; but the pop up
menu looks slightly different.
In either view, you can also make a selection, and then click the Edit menu to access the cut,
copy, and paste options.
These commands will work in the same way as the commands available on the pop up
(contextual) menus. As is typical in Microsoft applications, SharePoint Designer provides
multiple ways to perform a given command or task.
Because these basic editing commands are used so much, we will go over the keyboard
shortcuts for them in the table below.
Cut Select your text, and press Ctrl + X to cut the selection.
Copy Select your text, and press Ctrl + c to copy the selection.
Paste Place your cursor, and press Ctrl + V to paste the selection that was most recently
copied or cut. You can also press the Shift + Insert keys to paste a selection.
Using the Format Painter
The format painter is a very useful tool that can apply a format used in one place in your page
or document to a selection in another place in your page or document.
To use the painter, first select some text that has a format that you want to copy.
In this example, the text “This is a Heading” has been selected. Next, click the Format Painter
button on the Standard toolbar.
If the Standard toolbar is not visible on your screen, right click on any empty toolbar or menu
bar space, and put a check by the Standard option in the menu that appears.
This will cause the Standard toolbar to appear on your screen.
After you select the text with the formatting you want and click the Format Painter button, all
that you have to do is select the text that you want to apply the formatting to. When you select
the destination text, the formatting will be automatically applied to it.
For the format painter to work, your style application setting must be auto.
Using Undo and Redo
Everyone makes mistakes at one time or another. If you make a mistake when you are editing
or formatting text In SharePoint Designer, you can always use the undo command to
conveniently undo your mistake.
When you perform an action such as setting a font, or changing the color of the text in a
paragraph, it is recorded in a list of recent actions that you have performed. The undo feature
allows you to step back through this list, removing the effects of each action as you go.
To use the Undo feature, just click the undo button on the Common toolbar. It is located just to
the right of the three drop menu fields.
When you click this button (with a counter clockwise arrow) the last action that you applied to
your Web page will be undone. If you repeatedly click the button, the actions that you
performed will be undone in sequence from most recent to earliest. Since there are 30 levels of
undo in SharePoint Designer, you can recover from (remove) the effects of up to 30 actions.
If you click the small down pointing arrow next to the Undo button, you will see a scrolling list
of the recent actions that you have performed.
If you click on an item in the list, you will undo that item, and all items the precede it (that are
higher in the list). In the image above, clicking on the selected item (the first item) will undo the
most recent action.
In this image, four items have been selected in the list by pointing to the fourth item. If we click
this item, the four most recent actions will be undone.
When you undo an action or multiple actions, you can always go back (undo your undo action)
by clicking the Redo button. The redo button displays a clockwise pointing arrow, and it is
located just to the right of the undo button.
When you click the redo button you will redo the last action that was undone. For example, if
you apply a bold font to a paragraph and then click Undo, the bold will be removed. If you then
click the Redo button, the bold will be reapplied.
Like the Undo button, the redo button allows you to select multiple actions to be redone.
This multiple redo list can be accessed by clicking the down pointing arrow next to the redo
button.
Using the Office Clipboard
When you copy or cut text or other items in your Web pages, they are stored on the Office
clipboard. You can think of the clipboard as a place in your computer’s memory where things
can be temporarily stored for later retrieval.
In typical use, the item that is cut or copied will be stored on the clipboard until it is pasted
somewhere else, or until another item is cut or copied. In the default setting, when a new
selection is cut or copied, it will replace the old item on the clipboard. However, this behavior
can be changed.
As an example, you can see a selection of text being cut in the following image.
Now, if we display the Office clipboard, we should see the item that was cut from the page. (To
display the clipboard, click the Edit menu and select Office Clipboard from the list of options.)
The Clipboard will appear as a task pane on the right side of the SharePoint Designer screen.
As you can see in the title bar of the clipboard, it is capable of holding up to 24 items. However,
to store more than one item at a time on the clipboard you must make it visible, and then
collect the items by cutting and copying.
This image shows a clipboard that was displayed by clicking the Clipboard option on the Edit
menu. After it appeared on screen, items were selected and copied, populating the clipboard
with multiple selections.
You can paste any one of these clipboard items into your document by simply clicking on the
item. If you right click an item, a menu will appear with options to paste the item or delete it.
Besides pasting or deleting an individual item, you can use the Clear all or Paste all buttons in
the upper right to clear the entire clipboard or paste every item at once.
If you click the Options button on the bottom of the clipboard, you will be presented with a
menu of options for setting up the behavior of the clipboard.
If you choose the Collect Without Showing Office Clipboard option, you can collect multiple
items on the clipboard without having to first display the clipboard.
Lesson 4.2: Editing Text with the Formatting Toolbar
SharePoint Designer provides a toolbar with a number of text formatting controls on it. This
toolbar is accessible by right clicking on an empty part of the menu bar (or a toolbar that is
visible on your screen) and selecting the Formatting option from the pop up menu.
This action will make the Formatting toolbar appear on your screen.
As you can see from the image above, the Formatting toolbar (the bottom toolbar) has many of
the same controls that are found on the Common toolbar. These controls are provided on two
toolbars to provide maximum flexibility to the user for configuring his or her SharePoint
Designer interface. The formatting controls will produce the same results whether you access
them on the Formatting toolbar or the Common toolbar.
Changing the Font Type
To change the font type for a selection of text, first make sure that the style application setting
is set to auto.
Next, select the text that you want to change, and then click the small arrow by the Font drop
menu on the Formatting toolbar to display a scrolling list of choices. (The items in the list are
presented in the font that is specified by the font’s name.)
Just click on a font in the menu to apply that font to the selected text. (Note: If the style
application setting was manual, the font would be applied to the entire paragraph.)
Changing the Font Size
You can change the font size for selected text in the same way we changed the font type. First,
select the text, and then click the arrow by the font size drop menu to display the options.
Once you are ready, just click on the font size of your choice to apply it to the selected text. You
can also enter the Font size directly into the Font drop menu field and press Enter to apply it.
In this image, a value of 24 was entered into the font size field.
Changing the Font Color
To change the font color, first select the text that you want to change, and then click the small
arrow next to the Font color button.
Once you do this, a menu of color options will appear below the Font color button.
To apply a color to your text selection, click on one of the small sample color squares shown
under the Standard Colors heading. If you cannot find the color you’re looking for, you can
always click the More Colors option. This will display a More Colors dialogue from which you
can choose different shades and custom colors.
When you choose a color from the More Colors dialogue, click the OK button to apply it to your
selection. To apply the default color to a selection, click the Automatic option when you first
display the font color menu.
Adding Highlighting
To add highlighting to your Web page, first select the text that you want to highlight, and then
click the arrow next to the highlight text button ( ). You will then see a small menu of
highlight color options to choose from. If you click the Automatic option, the default highlight
color will be applied. As before, there is also a More Colors option available if you want to
choose from a wider range of color possibilities.
When you click on one of the standard color squares in the menu, your selected text will be
highlighted in that color.
Here you can see a small selection of text after it has been highlighted in yellow.
If you click directly on the Highlight button in the toolbar, the current highlight color (the color
of the thick underline near the bottom of the button) will be applied to whatever text has been
selected. This is also true for the Font color button as well.
Lesson 4.3: Advanced Text Formatting
Now that you know the basics of formatting selections of text, it is time to move on to more
advanced text formatting concepts. In this lesson, you will learn how to use the Font dialogue,
modify character spacing, add bullets and Numbers, apply borders and shading, and more.
Using the Font Dialogue
The Font dialogue offers finer control over your font changes than do the buttons on the
Formatting toolbar. To use the Font dialogue, first select some text, and then right click on the
selection and choose Font from the pop up menu.
This action will display the Font dialogue; the Font tab should be selected by default:
Here, you can select the font type, the font size, the font color, the font style, and font effects.
Moreover, you can see the results of your settings in a preview area before you apply them to
your selection.
You can select font type, font size, font style, and font color by choosing them from the menus
provided. You can select multiple font effects by placing checkmarks in the Effects check boxes.
Once you have configured your options, and you are happy with the preview, click the OK
button to apply the changes to your text selection.
The following image shows a small section of text that has had underline, over line, and
emphasis effects applied by selecting the appropriate checkboxes in the Font dialogue.
Modifying Character Spacing
When you display the Font dialogue, you will notice two tabs: Font (which was just discussed)
and a Character Spacing tab. If you click the Character Spacing tab you will see the following
options.
You can use the spacing drop menu to choose whether your spacing will be normal, expanded,
or condensed. (Spacing refers to the relative distance between characters in a word.) When you
expand or condense your spacing, you can specify how much by using the “By:” field that is to
the right of the Spacing drop menu.
The image just above shows the settings for a character spacing that is condensed by a value of
3 (font point size).
In addition to expanding or condensing your text (horizontally), you can also modify its vertical
line spacing with the Position drop menu.
With the options in this menu, you can specify how far above or below the baseline your
selected line of text will appear.
To apply your new spacing settings, click the OK button in the bottom of the dialogue.
Remember, you can always check what your text will look like in the preview aria of the
dialogue.
You can use the font dialogue to apply font effects and character spacing effects all at once. To
do this, just switch tabs as required, choose your settings, and click the OK button when you are
ready.
The following image shows a small section of text that has been condensed horizontally and
moved up to super position vertically.
Adding Bullets and Numbers
Please have a look at the following simple Web page in the design editor.
With SharePoint Designer, it is easy to format the four example points shown in the Web page
as bullets or a numbered list.
To do this, you can select the text that you want modify, and then click the numbering or the
bullets button on the Formatting toolbar.
If you select your text and click the numbering button, the results will look something like the
following:
If you select the text and then click the bullets button, the results will be something like this:
If you switch to Code view, you can see the HTML for the ordered list you created.
In HTML, <ol> </ol> form a pair of tags that define Ordered Lists.
If you click the Numbering button, and then type text at the cursor (using the design editor),
each line that you type (a line is ended by pressing the Enter key) will be entered with a number
in front of it creating a numbered list. Similarly, if you first click the bullets button and then
enter text, the lines you enter will be in the form of a bulleted list.
You can get even better control of your bullets and numbering settings by using the Bullets and
Numbering dialogue. To see this dialogue, click the Format menu and click the Bullets and
Numbering option.
In the Bullets and Numbering dialogue, you can specify the type of bullet symbols used, or the
type of numerals used for numbering. If you are using numbering, you can specify the starting
number that will indicate the first item in your list.
Adding Borders and Shading
Often there are times when a few borders and a little shading can greatly enhance the
appearance of your Web page. At the least, borders and shading can be used to bring attention
to important text or lists in your Web pages.
The best way to apply borders and shading is to use the Borders and Shading dialogue. To learn
how to do this, first have a look at the following image of a Web page in the design editor.
We can apply borders to the selected text by clicking the Format menu and then choosing the
Borders and Shading option.
When the Borders and Shading dialogue appears, choose a border setting from the options on
the left, choose a border style from the option list in the middle, and then remove or add sides
to and from your border in the preview area on the right.
In the image above, the selected setting is Box, the Style is solid, and no sides have been
removed. (To remove sides from the border, click the button in the preview area that
corresponds to the side you want to remove.) You should notice that you can also specify the
thickness of the border with the Width drop menu in the center area, and you can specify the
color of the border with the color drop menu also located in the center.
In the area labeled Padding, you can specify the spacing between the respective sides of the
border and the text as values in pixels.
Once you have made your settings, click the OK button to apply them to the selected text.
The following image shows a text selection after applying a basic Box border with solid lines 2
pixels wide and colored green.
Shading, in the context of borders and shading, refers to the background color against which
the foreground text is contrasted. In this sense, shading is a lot like highlighting.
To apply shading to a selection, first select the text that you want to shade, display the Borders
and Shading dialogue (Format - Borders and Shading), and then click the Shading tab.
Under the Shading tab, use the background color and foreground color drop menus to select a
color for the background shading and a color for the text (foreground color).
The preview area should give you an idea of how your color combination will look. Once you
are ready, click the OK button to apply your modifications to the selected text.
The following image shows a Web page with a background shading of green and a foreground
color of yellow applied to the text.
Using the Paragraph Dialogue
To display the Paragraph dialogue, click the Format menu and then click Paragraph.
When you follow these menu options, a Paragraph dialogue will appear on your screen.
This dialogue allows you to adjust the alignment of the paragraph (center, right, left, and so on),
and also the indentation and spacing of the paragraph. There are also controls for setting the
spacing between the formatted paragraph and the text above and below it. You can get a rough
idea of what your formatted paragraph will look like in the preview area of the dialogue.
In the image on the previous page, the selected paragraph will be center aligned, and indented
60 pixels on the left and right sides. The first line will be indented 11 pixels, and the spacing
before and after the paragraph will be 20 pixels.
When everything is ready, just click the OK button to apply the settings to the selected
paragraph.
The following image shows what a paragraph looks like after these settings have been applied
to it.
Lesson 4.4: Editing and Reference Tools
SharePoint Designer provides a nice array of editing and reference tools that can be quite
convent when building your Web pages. These tools include a spell checker, a Clip Art task
pane, and a thesaurus. The following lesson will serve as an introduction to these time and
effort saving tools.
Using Spell Check
SharePoint Designer will actually check your spelling as you type. If you are entering text into a
Web page in the design editor, SharePoint Designer checks the words that you type against a
reference dictionary. If you type something that does not mach any spellings in the reference
dictionary, the word that you typed will be underscored with a red wavy line.
If you right click on the word with the wavy red line, you will see a list of possible corrections
appear.
From this list, you can choose one of the suggested correct spellings for the word in question,
you can choose to ignore the mistake, or you can choose to add the word to the reference
dictionary.
If you click Add to add the word to the dictionary, it will now be accepted as a legitimate
spelling, and the wavy line will disappear. If you click on one of the correct spelling suggestions,
the incorrect word will be replaced with the correct spelling you choose from the list.
In addition to this “check as you type” spell check feature, you can also run a spell check on all
of your text after you finish typing. To do this, click the Format menu, followed by the Spelling
option, and then again by the Spelling sub option.
You can also press the F7 function key on your keyboard, or click the spelling button ( ) on the
Standard toolbar for the same result.
When you choose any of these options, SharePoint Designer will search your text for spelling
mistakes and alert you when it finds one with the following dialogue.
Using the dialogue, you can choose to ignore the error, replace it with a suggested spelling, or
add it to the reference dictionary.
To ignore the error, click the Ignore button. To replace the error with the suggested spelling in
the Change To field click the Change button. To change every instance of the error with the
suggested spelling click the Change All button, and to ignore every occurrence of the mistake,
click the Ignore All button.
If you have multiple mistakes in your text, they will be addressed in sequence. That means
when you resolve one mistake in the dialogue, options for fixing the next mistake will appear in
the dialogue.
Using the Clip Art Task Pane
The Clip Art task pane can help you find all sorts of clip art, images, and other media files that
are stored on your local computer or located in online sources.
To display the Clip Art task pane, click the Task Panes menu on the main menu bar, and then
click the Clip Art option.
The Clip Art task pane will appear on the left of your screen.
In the Search For field, you can type a word or phrase that relates to the type of media clip or
image you are looking for. When you click the Go button, the search will begin.
In the Search In field, you can use the drop menu to specify what resources will be examined
for the clip art or media file you are looking for. Just expand or collapse the locations as
necessary, and place checkmarks next to the locations you want to search through.
Finally, in the Results Should Be field, you can further refine your search by selecting the
specific media types that you want to find.
Then, to initiate the search, click the Go button.

When you finally find the image or clip you want for your Web page, you can right click on it
where it appears in the task pane. This will reveal a menu of options for using the selected item.
To insert an item into your Web page, click the Insert option from the pop up menu.
When it is time to save your Web page, you will see An Embedded Files dialogue like the
following.
Before you click the OK button, make sure that the embedded files (clip art) are saved to the
same folder as the Web page itself. You can do this by clicking the Change Folder button, which
will allow you to browse to the folder of your choice.
Using the Thesaurus
Another useful feature provided by SharePoint Designer is the thesaurus. The thesaurus option
can be used when you have a Webpage containing some text. To use it, just select the word you
would like to look up, and then click the Tools menu followed by the Thesaurus option.
You will then be presented with a dialogue showing the synonyms that the thesaurus has
found.
You can click on your choice of the synonyms in the right of the dialogue to select one. Then
you can click the Replace button to replace the word you looked up with the selected synonym.
If a word that you are looking up has more than one meaning (for example, a heading can be a
title or a direction), you will see a list of other meanings in the pane under the Meanings
heading on the left. If you select another meaning, synonyms for this other meaning will appear
on the right for you to choose from.
Here, the direction meaning of the word “Heading” is being referenced.
If you click the Look Up button, the currently selected synonym will be entered as the word to
look up, and a list of synonyms for it will be displayed.
Look carefully at the following Thesaurus dialogue that shows the results of clicking the Look Up
button in the dialogue on the previous page.
As you can see, you now have a list of synonyms for the word “direction.” As before, just click
Replace to replace the original word in the Web page (Heading) with the selected synonym; and
remember, you can use the undo button to undo replacements you make with the thesaurus.
Lesson 4.5: Using Layers
It is now time to consider a more advanced way of laying out Web page content: layers.
Because layers were not available as a layout tool in earlier days of Web development, they
may not be compatible with older Web browsers. Fortunately, this should not pose a problem
now, as the current generation of Web browsers should have no trouble dealing with Web
pages that use layers.
What are Layers?
Layers provide a way of laying out Web page content (like text or images) with very precise
positioning. In a sense, layers divide your Web page into movable regions that can be arranged
side by side, from top to bottom, or even directly on top of one another.
This allows you to present your content in interesting ways, and organize your layout with
greater accuracy.
The image below shows a simple use of layers.
Notice how one heading is placed directly above the other. This is possible because each
heading is on its own layer. You can even place one layer over another, as shown in the
following image.
In your HTML code, layers are defined by a special <div> tag, as shown in the following HTML
code snippet.
If you look carefully, you can see the position coordinates for each layer specified within the
<div> tags.
Clearly, layer elements can be arranged with single pixel precision! Even better, SharePoint
Designer lets you create and arrange your layers easily in the design editor, so you do not have
to deal with the intricacies of the <div> tag’s arguments.
Adding Layers
The first step in adding a layer to your Web page is to display the Layers task pane. You can do
this in one of two ways. First, you can click the Task Panes menu, and then click the Layers
option.
Alternatively, you can click the Format menu and then click the Layers option.
Either one of these actions will display the Layers task pane on the right of your screen.
Now that the Layers task pane is visible, you have two options for adding a layer to your Web
page. If you click the Insert Layer button, a new (pre-sized) layer will be inserted into the page.
The following image shows the newly inserted layer in the design editor page.
At the top of the layer, you will see a tab with the layer’s name on it. You can click and drag the
layer around the page using this tab. You can also click inside the layer to place your cursor
there. When your cursor is inside the layer, you can enter text that will be contained within the
layer.
You can also insert a layer by clicking the Draw Layer button.
When you click this button, your mouse pointer will turn into something that looks a bit like a
pencil. Just drag your mouse pointer over the Design editor’s page to draw out your layer in the
dimensions that you want.
When you release your mouse button and stop dragging, the layer will be positioned on your
screen. As before, you can move the layer around your page by dragging the tab in the upper
left of the layer.
When you add layers to your page, a layer item will appear in the layers task pane for each
layer that you add.
If you click on a layer item in the Layers task pane, the corresponding layer in the Web page will
be selected.
Using Layers
To add text to a layer, click inside of it. Once your cursor appears inside, just start typing the
text that you want to display. When the text hits the edge of the layer boundary it will
automatically wrap to the next line.
You can select the text in a layer, and apply formatting with the formatting buttons on the
toolbar, or with the Font dialogue.
In addition to the contents of a layer, there are other parameters that you can modify as well.
To see the options for modifying a layer, right click on the corresponding item in the Layers task
pane, and look at the pop up menu that appears.
If you click on the Borders and Shading option, you will see the Borders and Shading dialogue.
(This dialogue should be familiar to you from Lesson 4.3.)
You can use this dialogue to add borders and shading effects to the selected layer.
This image shows the same layer as before, with borders and shading applied.
If you click on the Positioning option in the pop up menu, you will see the Position dialogue.
You can change how the layer is positioned relative to the other text on the Web page by
choosing from the Wrapping Style buttons (how Web page text wraps around the layer) or from
the Positioning Style buttons.
(Absolute positioning means that pixel coordinates will always be measured from the top left
corner of the page. Relative positioning means that pixel coordinates will be measured relative
to the position of the layer’s tag in the page. The diagrams on the buttons themselves will give
you a rough idea of how the layer will appear in the body of text.)
At the bottom of the dialogue, you will see Location and size fields that you can use to set the
precise width and height of the layer in pixels, as well as the distance from the top, bottom, left,
and right sides of the page.
You will also see a field labeled Z order. The Z index is a number that specifies what order
multiple layers appear in when they are stacked on top of each other.
Think of the Z number as being a measure of the depth of a given layer in a stack of layers. If
Layer 1 has a z index of 3, Layer 2 has a z index of 1, and Layer three has a z index of 2, then
Layer 2 will be on the bottom (lowest z index), Layer 3 will be on top of Layer 2, and Layer 1 will
be on the top of both other layers (highest z index).
You can change the z-index of a layer using the Position dialogue, or by using the Modify Z-
Index option that appears on the right click -menu for items in the Layers task pane.
Finally, you can set the visibility for a layer (whether it is hidden or displayed on the screen) by
clicking on the eye icon that appears beside a layer item in the layers task pane. If the eye is
closed, the layer will not be visible.
In the image above, layer5 with a Z index of 2 (in the middle of the stack) will not be visible.
As mentioned previously, it is quite simple to enter text into a layer. You can actually enter
pretty much anything into a layer that you can enter into a regular Web page, including images,
hyperlinks, form controls, and more.
Removing Layers
It is fairly simple to remove a layer from your Web page in SharePoint Designer. First, you must
click on the layer to highlight it and display the tab on the top.
Next, click the tab to fully select the layer.
You can also click the layer item in the Layers task pane to select the layer. Once the layer has
been selected, just hit the Delete key or Backspace key on your keyboard to delete it.
1. With SharePoint Designer, clicking the Ctrl plus a keyboard shortcut will…
A. Select the entire page
B. Select the first paragraph
C. Select the last paragraph
D. Copy all text to the clip board
2. To select individual words sentences or characters for formatting, the style application
setting should be….
A. Manual
B. Auto
C. Optional
D. Inactive
3. Which one of the following statements is true?

A. The design editor has many of the formatting conveniences of a word processor
B. You cannot cut or copy in the Design editor
C. You cannot use the Office Clipboard in the Design editor
D. You cannot copy and paste in the Code editor
4. To modify the spacing between characters, you can use…

A. Font dialogue
B. Paragraph dialogue
C. Bullets and Numbering dialogue
D. Application Options dialogue
5. You can apply a preset heading style using…

A. The Font dialogue
B. The Style drop menu
C. The Heading button
6. The thesaurus feature will provide a list of…

A. Suggested synonyms for the selected word
B. Suggested spellings for the selected word
C. Suggested antonyms for the selected word
D. All of the above
7. The Z index of a layer controls…

A. The transparency of the layer
B. The size of the layer
C. The depth of the layer in a stack of layers
D. The vertical position of the layer
8. If we have a stack of two layers with layer1 z=2 and layer2 z=3, which layer will appear
on top?
A. Layer1
B. Layer2
C. Both
D. It depends
9. You can use the Clip Art task pane to find….

A. Clip Art
B. Photo images
C. Media clips
D. All of the above
10. Which of the following statements is not false?

A. SharePoint Designer supports multiple levels of undo
B. You can only use the Redo button to redo one action
C. You can only use the Undo button after you use the redo button
D. You cannot undo formatting changes
Section 5: Printing and Viewing Your Site

 Use minimize, maximize, and restore
 Switch between open pages
 Arrange windows
 Preview your site in a browser
 Chang the browser list
 Use Code view
 Use Design view
 Use Split view
 Chang the page size
 Use Page Setup
 Open Print Preview
 Use the Print Preview toolbar
 Use Zoom
 Use the Print dialogue
 Set a page range to be printed
 Specify the number of copies to be printed
Lesson 5.1: Managing Windows
At this point in the manual, you should be able to create a basic Web site, with multiple Web
pages, hyperlinks, textual content, and perhaps even form controls, layers, and images.
There are, however, a few more foundation concepts to cover before we are done. The first
among these concepts is managing windows.
Using Minimize, Maximize, and Restore
You are no doubt, already familiar with the typical window control buttons on most windows
applications (typically located in the upper right).
With these buttons, you can minimize ( ) the main application window, close the main
application window ( ) or restore down (shrink) the application window ( ).
If you restore down (shrink) the application window, the middle button in the window controls
will change to a maximize button.
Clicking the maximize button will restore your application window to a full screen view.
If you minimize your application window, you can restore it again by clicking the button for the
application that appears on your desktop task bar.
If you right click on this task bar button, a menu will appear with options for restoring,
maximizing, or closing the application.
If you click the Close option on this menu, the SharePoint Designer application will close, just as
if you clicked the close ( ) button.
You will find that there is some version of one or more of these window control buttons on
every task pane and window in SharePoint Designer.
In this image, you can see the close and maximize buttons for a typical task pane.
In this image you can see the close button in the upper right of a typical dialogue box.
Arranging Windows
In SharePoint Designer, you can drag task panes around the screen and reposition them by
clicking and dragging them by the thick bar at the top.
By dragging these task panes, you can arrange the SharePoint Designer screen in pretty much
any way you want.
When you rearrange your task panes and toolbars and then exit SharePoint Designer, the
screen layout will be saved. When you reopen SharePoint Designer, you will see the screen
layout that was last used before you exited.
To reset the SharePoint Designer screen to the original layout, click the Task Panes menu, and
click the Reset Workspace Layout option.
When you are working with SharePoint Designer, you can open a different Web page in another
window by selecting it in the folder list, clicking the Window menu on the menu bar, and then
clicking the Open in New Window option.
In the image above, the selected Web page in the folder list on the left will open in its own
window.
When you have more than one window open, you can click the Restore Down button in one of
the windows so that you can see other windows underneath.
The following image shows two SharePoint Designer windows. One window displays a Web
page, while the other displays the folder list for the Web site.
Once you have your windows displayed, you can resize them by dragging the window borders
with your mouse. You can also arrange the windows on your screen by clicking and dragging on
the window title bars.
The following image shows three windows displaying different views of a Web site. The
windows have been resized and arranged using the techniques just described.
Previewing Your Site in a Browser
SharePoint Designer has a great feature that lets you see what your Web site will look like when
rendered in a Web browser. It also lets you to use the browser to follow the hyperlinks that
connect your Web pages. In this way, you can test out your layout and navigation structure as if
visiting the site on the Internet.
Since browsers are the tool that visitors will use to explore your site, you should always preview
and test your Web site in a Web browser before you publish it to the Web.
To preview your site in a browser, first select the page that you want to start on in the
SharePoint Designer folder list. Depending on the situation, it might be a good idea to start with
the Home page.
Once you have selected your starting page, click the File menu, and then follow the Preview in
Browser option. You will then see a sub menu of browsers with window sizes in pixels to choose
from. You should click on the browser/resolution combination that will be most frequently used
by your visitors (if you have this knowledge). When you make your choice, the Web page will
open up in the browser that you selected.
In the image above, we are selecting the Internet Explorer 6.0 browser, a browser that is used
frequently on Windows based computers. You should notice that you can choose to view the
Web site in the default browser (whatever that may be) or even in multiple browsers.
Once you click the option of your choice, the Web page that you selected will appear in the
browser.
Now that your page is open in a browser, you can proceed to follow the links and explore the
other pages in your site just as if you were visiting the site via the Internet.
You can also access the Preview in Browser list by clicking the small arrow next to the Preview
in Browser button on the Common toolbar ( ). If you click directly on the button the page
will open in the browser that is first on the list in the File – Preview in Browser menu.
Changing the Browser List
If you do choose to preview your Web site in multiple browsers, SharePoint Designer allows you
to select which browsers will open when you use the multiple browser option.
To change the browser list, click the File menu and follow the Preview in Browser option. At the
bottom of the list of options, you will see an item called Edit Browser List.
Once you click the Edit Browser List option, you will see the following dialogue.
In this dialogue, you can specify what browsers to use by marking the checkboxes in the list
area. When you use the “Preview in multiple browsers” option, only the checked browsers will
be launched. (Remember to click the OK button in the dialogue to implement your changes.)
If you click the Add button, you can add additional browsers to the list by filling out the fields in
the Add Browser dialogue.
In the Name field, enter the name of the additional browser. In the Command field, enter the
path to the executable file for the browser. If you don’t know the path, use the Browse button
to navigate to the executable file and the path will be entered automatically. Remember to click
the OK button to apply your settings.
When you add a browser in this way, it will appear among the menu items under the Preview in
Browser Option.
Lesson 5.2: Using Page Views
Since this section is all about previewing and printing your Web site, we will now cover some
basic ideas on using page views and changing page sizes. If some of this material seems familiar
to you, it is because we touched on certain elements briefly in Lessons 1.2 and 2.1.
Using Design View
SharePoint Designer’s Design view (Design editor) is a great feature. It allows you to layout and
build your Web page, while actually seeing the results as they should appear in a Web browser.
You can add form controls, layers, text, images, and more in Design view. What you see on your
screen will very closely resemble what a visitor to the Web site will see in a Web browser.
Although the form controls and hyperlinks in your Web page may not operate as they would in
an actual browser, their appearance should be quite accurate. Moreover, the design editor
provides an array of formatting controls and editing features that are quite similar to a typical
word processor.
To see your page in Design view, just click the Design button at the bottom of the main viewing
area. (Make sure that the tab for the Web page you want to view is selected at the top of the
viewing area.)
You can see the Design button in the red rectangle at the lower left of the image above.
Once you are in Design view, you are free to edit and format your page contents as you wish.
Remember, in Design view, what you see is pretty much what you get.
Using Code View
You can switch to the Code view (code editor) by clicking the Code button at the bottom of the
main viewing pane. (Remember that the tab for the Web page in question should be selected.)
You can see the code button in the red rectangle at the bottom of the image above.
In the Code view/editor you can view or edit your HTML code directly. This is important,
because sometimes you may not be able to get the precise results you are after in the Design
editor. If you know HTML, you can switch to Code view and edit the HTML tags for your Web
page content directly.
With more advanced Web page elements (like form controls), the need to edit the actual HTML
may become more evident. You may also want to use the Code editor to add client side scripts
(perhaps written in a language like JavaScript) to your pages.
If all of this seems a little daunting, don’t worry. You can always use the design editor to
achieve a wide variety of Web design goals, and as you become more familiar with HTML and
Web design concepts, the code editor will seem less intimidating.
Using Split View
SharePoint Designer allows you to see the Design view and the Code view for your Web page at
the same time. The feature that allows you to do this is called Split View. Using Split View, you
can modify your Web page in the design editor, and see the change in the HTML code in the
Code view in real time.
To switch to Split view, click the Split button at the bottom of the main viewing area (between
the Code and Design buttons).
When the Split view appears, you will see the HTML code for our Web page in the upper pane,
and the actual layout of the Web page in the lower pane. Each pane will have its own scroll
bars, allowing you to view any part of the HTML code and any part of the actual page at the
same time.
If you click with your mouse in the Code pane, the Design view will show the part of the Web
page that is associated with the code that you clicked on. Going the other way, if you click on a
Web page element in the design pane, the code pane will display the HTML code associated
with the element or location in the page that you clicked on.
If you enter text, or change the formatting of the page in the design pane, you can see the
change reflected in the HTML in the code pane.
The Split view is more than just convenient, as it can help you learn more about how HTML
works.
Here is a simple Web page shown in Split view. Remember, these different view options are
also available from the View menu.
Changing the Page Size
All Web pages are designed within specific height and width limits. This can be important
because a typical browser will open to maximize the size of a user’s screen. If the user’s screen
resolution is set low (like 600 by 800) and the Web page size is larger (like 1024 by 768) the
Web page may not display correctly in the user’s browser. You should always decide on a page
size first before you design your Web page. Try to choose a size that is best suited to your
content, and to your visitor’s screens. An alternative is to try to design a Web site that will look
OK in many different screen sizes.
To change the size of your Web page, just click on the page size entry on the status bar (at the
very bottom of your screen).
When you click this part of the status bar, a pop up menu will appear showing different page
sizes in pixels.
To change the page size to one of these preset settings, just click on the item in the list that you
want, and the design editor will change to accommodate the size you choose. Remember,
depending what page size you use, certain page elements may appear differently.
Here is a simple Web page at a large page size (1024 x 768).

Here is the same content on a page set to a smaller size.
Notice how the text is compressed horizontally (fewer words on a line) but is lengthened
vertically (more lines of text). This does not present too much of a problem because text can be
manipulated easily to fit different window sizes; however, fixed size images or other graphical
elements can be cut off or be misaligned if the page size is not se properly.
If you click the Modify Page Sizes option at the bottom of the page size menu, you will see the
following dialogue.
Here you can add a new page size to the menu items with the Add button or modify one of the
existing presets (with the Modify button). You can also use the Remove option to remove sizes
from the list. When you have finished making your changes, click the OK button in the bottom
of the dialogue.
Lesson 5.3: Setting your Site up for Printing
Web designers will sometimes print out hard copies of the Web pages in a Web site. These can
be used in reports to managers or clients, or just to get a different perspective on the Web site
layout. If there comes a time when you want to print out a hard copy of your Web site, you can
always use SharePoint Designer’s printing tools to help setup and print your Web pages.
Using Page Setup
To begin, you can use the Page Setup dialogue to specify a header, footer, and margins for the
Web pages in your site.
To display the Page Setup dialogue, click the File menu followed by the Print option. In the Print
sub menu, click on the Page Setup option to display the dialogue.
This will open the Page Setup dialogue.
In the Header field, you can see the characters &T. This signifies that the title of the given page
will be printed as a header. In the footer field, you will see Page &P. This means that the page
number will be printed at the bottom of the page. You can specify whatever you want as a
footer or header by entering text directly into the fields provided.
In the Margins section of the dialogue, you can specify the left, top, right, and bottom margins
for the printed pages in inches.
If you click the Options button near the bottom of the dialogue, you will see a Print Setup
dialogue appear on your screen.
In the Print Setup dialogue, you can select what printer to use and indicate what size paper will
be used by choosing from the drop menus provided. You can also select a radio button to
specify a portrait or landscape orientation.
When you are ready, click the OK button to apply your settings and return to the Page Setup
dialogue.
Look at the following image of the Page setup dialogue.
Text was added to the header and footer, and the left and right margins were increased to two
inches.
The image below shows what the printed page should look like after these settings are applied.
Opening Print Preview
To get an idea of what your printed pages will look like before they are printed, you can always
use the Print Preview feature. To open print preview, select the page that you want to view so
that it is displayed in the main viewing area. Next, click the File menu, followed by the Print
option, and then click Print Preview.
This action will open up a Print Preview for the page that is currently open in the main viewing
area.
In Print Preview you will see the Web page formatted in a way that resembles how it will look
when printed on paper.
If you switch to the Code view for a Web page, and then use the Print Preview option, you will
see a Print preview page containing the HTML for the Web page in question. You can then go
ahead and print out the HTML code for the page.
The Print Preview Toolbar
When you open a page in Print Preview, your SharePoint Designer screen should look
something like this (the page being viewed will be different of course).
Across the top of the Print Preview area, you will see a toolbar like the following.
If you click the Print button, you will open up the Print dialogue, which will allow you to make
the final adjustments before printing. (Please see lesson 5.4 for more on this.)
If you click the Next Page button, you will see a preview for the next printed page of content.
(You can also use the scroll bar to scroll down to the next page of content.)
Remember, some Web pages can be very long, and in a browser, you may have to scroll
through several screens to see the entire page. When you print a Web page like this, there will
be too much content to fit on one printed page. Clicking the Next Page button will give you a
preview of what the next printed page of content will look like. If you preview more than one
printed page using the Next Page button, clicking the Prev Page button will return the view to
the preceding page of content.
If the Web page has too much content to fit on one printed page, another option is to click the
Two Page button. When you click this button, two smaller preview pages will appear, showing
two pages of content rather than one.
Finally, you can use the Zoom buttons to get a closer view of your Web page. If you want to
close Print Preview, just click the Close button on the right of the toolbar.
Using Zoom in Print Preview
There are two buttons on the Print Preview toolbar to control the zoom setting of the preview
pages.
If you click the Zoom in button, Print Preview will provide a closer look at what is going to be
printed.
You can now use the scroll bars to scrutinize the layout of the printed page. To return to a
zoomed out version that shows a printed page without scrolling, click the Zoom Out button.
Note that if you zoom in on a preview page, and then click the Next Page button, the next
preview page will be zoomed in as well.
You may notice that when you are using Print Preview, your mouse pointer looks like a
magnifying glass. When your pointer appears this way, you can click on the page to zoom in.
Navigating Print Preview
As mentioned above, you can use the Next Page and Prev Page buttons on the Print Preview
toolbar to view all of the Printed pages that are required to make up the currently viewed Web
page. But what about other Web pages in your site?
You may remember that when you open several pages in SharePoint Designer (by double
clicking them in the folder list) tabs for the open pages will appear along the top of the main
viewing area.
The Page tab that is colored white indicates the page that is currently being viewed. If you apply
the Print Preview option, this page will appear as a Print Preview page in the main viewing area.
To see other pages in the Print Preview format, select the tab for the page you want to view
(making it the active page) and then apply the print preview option (File - Print - Print Preview).
If you apply the Print Preview option to two or more of your open pages, you will be able to
switch back and forth between the print previews for the respective pages by clicking the
corresponding page tabs at the top of the viewing area.
To preview all of your site’s pages, first open them one by one and apply the Print Preview
option to them. Once you have done this, you can switch between print previews by clicking
the Page tabs at the top of the viewing area.
You can see a Print Preview of the Design view for a Web page as well as the Code view. You
cannot display a Print Preview page for the Split view of a Web page.
Lesson 5.4: Printing a Site
Now that you have learned about the Page Setup dialogue and the Print Preview option, it is
time to learn about the actual printing of your Web pages. In this lesson we will discuss print
commands, the Print dialogue options, how to set the page range, and how to specify the
number of copies to be printed.
Print Commands
To print a Web page in SharePoint Designer, you will usually work through the Print dialogue.
One way to display the Print Dialogue is to use the Ctrl + P keyboard shortcut. When you press
these keys together, the Print dialogue will appear on your screen.
You can also display the Print dialogue by clicking the File menu, followed by the Print option,
and then the Print sub option.
Finally, you can also display the Print dialogue by clicking the Print button in the Print Preview
toolbar.
You should also know that there is a Print command that allows you to print the currently
selected page without going through the Print dialogue. If you display the Standard toolbar, you
will see that it has a Quick Print button on it.
If you click this button, the currently selected page will be printed directly, without first going
through the Print dialogue.
Using the Print Dialogue
Once you display the Print dialogue, you will be presented with a selection of important options
for printing your pages.
In the Printer area of the dialogue (shown in the red rectangle) you can select the printer that
you want to use from the available printers in the list. You can also specify a Print Range (using
the controls in shown in the green rectangle) and you can specify how many copies to print
(using the controls in the blue rectangle). (Both the print range and the number of copies
options will be dealt with shortly.)
Of course, when you are finally ready to print, click the OK button in the lower right of the
dialogue to send the data to the printer. If you click the Cancel button, your print settings will
be abandoned and the Print dialogue will close.
If you click the Properties button, you will see a Document Properties dialogue for the selected
printer.
Here you can specify the layout of the printed pages in terms of Orientation (Portrait or
Landscape), and the page order that the printed pages will be output in (front to back, or back
to front).
If you click the Advanced button, you will see another dialogue with more settings for the
printer you are using.
If you are happy with the settings, there is no need to change anything, so just click OK in the
dialogue boxes to clear them until you once again see the Print dialogue.
Setting the Page Range
If what you are printing will generate several printed pages, you can use the Page Range
controls to specify what pages will actually be sent to the printer.
If you select the All radio button, all of the pages generated for printing will be sent to the
printer. If you click the Pages radio button, you can then specify what pages will be printed by
entering values into the fields provided. In the following example, only pages numbered 3
through 6 would be printed if the OK button is clicked.
Setting the Number of Copies
You can use the set of controls under the Copies heading to specify how many copies of the
printed pages will be produced. You can enter a number directly into the field provided, or use
the arrow buttons next to the field to change the number of copies incrementally.
If you put a checkmark in the Collate check box, all of the copies will be collated (assembled in
numerical sequence) as they are printed. If you do not choose Collate and you are printing two
or more copies, you will get two or more page ones together, two or more page twos together,
and so on until all of the pages for all of the copies are printed.
In the image above, two collated copies of the printed pages will be produced when the OK
button is clicked. (If you look at the Print Range controls, you can see that each copy will
contain 3 pages.)
1. Before you publish a Web site, you should….

A. Check for spelling errors
B. Check for broken links
C. Preview the site in a browser
D. All of the above
2. To preview your site in a browser, you should…

A. Use this button
B. Use the Data View menu
C. Use the Folder list
D. Any of the above
3. Page size is important because…

A. Page size dictates what content you can display
B. Page size dictates what browser’s can be used with a Web page
C. Different sized pages can have a different appearance at different screen resolutions
4. The current page size is displayed in the…

A. Menu bar
B. Folder list
C. Status bar
D. Data view menu
5. When you minimize a SharePoint Designer window, you will see a button for the
window on the….
A. Status bar
B. Windows task bar
C. Title bar
D. Menu bar
6. The Page Setup dialogue can be used to… (Select all that apply)
A. Set up margins
B. Set up headers and footers
C. Set up the number of copies to print
D. Set up the range of pages to print
7. Which of the following views cannot be printed?

A. Code view
B. Design view
C. Split view
D. All views can be printed
8. You are printing 2 copies of a document that is 3 pages long (page 1 through 3). If you
collate the copies, they will be printed in which order?
A. Page 1, Page 1, Page 2 Page 2, Page 3 Page 3
B. Page 1, Page 1, Page 1, Page 2,Page 2, Page 2, Page 3, Page 3, Page 3
C. Page 1, Page 2, Page 3, Page 1, Page 2, Page 3
D. Page 1, Page 3, Page 2, Page 2, Page 1, Page 3
9. To print your page without using the Print dialogue….

A. Use the Quick Print button
B. Use the Ctrl + P shortcut
C. Use the Print menu
10. The Quick Print button is located on the….

A. Menu bar
B. Standard toolbar
C. Status bar
D. Folder list
Index
ASP.NET ..........................................................................................................3, 4, 13, 14, 55, 61, 79
Borders and Shading Dialogue ............................................................................ 223, 224, 225, 249
Bullets and Numbers................................................................................................... 220, 222, 253
Cascading Style Sheets ......................................................... 3, 4, 14, 25, 27, 28, 49, 53, 67, 68, 192
Categories ................................................................................................................................... 181
Code View . 10, 65, 75, 76, 81, 87, 92, 108, 111, 112, 118, 119, 121, 127, 172, 176, 180, 192, 195,
198, 200, 221, 255, 269, 270, 281, 285, 294
Copy Web Site ............................................................................................. 149, 165, 167, 190, 191
Design Tips
Building links ....................................................................................................................... 51, 57
Colors and fonts ........................................................................................................................ 55
Content ..................................................................................................................................... 55
Frequently used resolution ....................................................................................................... 70
Layout.................................................................................................................................. 54, 68
Scripts ........................................................................................................................................ 53
Structuring site ............................................................................................................ 27, 50, 130
Design View. 10, 65, 71, 72, 73, 74, 76, 80, 81, 82, 85, 88, 105, 110, 111, 112, 115, 122, 127, 174,
192, 195, 196, 245, 253, 255, 267, 268, 270, 285, 294
Edit Browser List ......................................................................................................................... 265
Editing Commands
Character spacing.................................................................................................................... 218
Copying ................................................................................................................................... 199
Cutting ..................................................................................................................................... 198
Font dialogue .................................................................................. 194, 216, 217, 218, 248, 253
Font Type, Color, and Size................................................................................. 88, 209, 211, 212
Format Painter ................................................................................................................ 202, 203
Highlighting ............................................................................................................................. 214
Office Clipboard .............................................................................. 164, 194, 198, 199, 204, 205
Pasting ..................................................................................................................................... 199
Redo .................................................................................................................. 16, 203, 204, 254
Selecting .................................................................................................................................. 196
Text Effects................................................................................................................................ 87
Undo............................................................................................ 16, 88, 179, 198, 203, 204, 254
Find................................................................................................................................................ 89
Find and Replace dialogue .................................................................................................. 90, 93
Replace ...................................................................................................................................... 93
Folder List ....129, 136, 137, 144, 145, 146, 147, 149, 156, 158, 159, 160, 167, 184, 193, 259, 260,
262, 285
Folders
Copying ................................................................................................................................... 190
Creating ........................................................................................................................... 146, 184

Deleting ................................................................................................................................... 189
Renaming ................................................................................................................................ 188
Forms
Advanced buttons ................................................................................................................... 120
Controls ................................................................................................................................... 107
Drop down boxes .................................................................................................................... 120
Editing code for ....................................................................................................................... 119
Group box ............................................................................................................................... 123
Labels ...................................................................................................................................... 116
Radio buttons .......................................................................................................................... 115
Submit and Reset .................................................................................................................... 114
Text area ................................................................................................................................. 110
Text input ................................................................................................................................ 110
FrontPage .................................................................................................................. 3, 39, 109, 140
FrontPage Server Extensions ...................................................................................................... 140
FTP ............................................................................................................................................... 140
Help
Ask a question ....................................................................................................................... 9, 48
Dialogue .................................................................................................................................... 49
Menu ............................................................................................................................. 15, 37, 41
Microsoft Office Online............................................................................................................. 38
Office Diagnostics ............................................................................................................... 39, 40
Offline........................................................................................................................................ 46
Online ........................................................................................................................................ 42
Screen............................................................................................................................ 42, 43, 44
Table of Contents ...................................................................................................................... 45
Updates ..................................................................................................................................... 40
Hyperlink
Changing color ........................................................................................................................ 171
Insert Hyperlink dialogue .................................................................................................... 83, 86
Inserting .................................................................................................................................... 82
Report ..................................................................................................................................... 152
ScreenTip................................................................................................................................... 84
Inserting Files .............................................................................................................................. 100
Inserting Images
Clip Art .................................................................................................... 194, 230, 232, 233, 254
From file .................................................................................................................................... 97
Interactive Buttons ..................................................................................................................... 103
Layers .......................................................................... 128, 241, 242, 243, 244, 247, 248, 251, 252
Adding ..................................................................................................................................... 242
Coding ..................................................................................................................................... 242
Removing ................................................................................................................................ 252
Using ....................................................................................................................................... 247
Visibility ................................................................................................................................... 251

What are?................................................................................................................................ 241
Z index ..................................................................................................................... 250, 251, 254
Margins ....................................................................................... 177, 178, 179, 276, 277, 278, 293
Navigation View .......................................................................................................................... 151
Page Setup Dialogue ................................................................................... 276, 277, 278, 286, 293
Paragraph Dialogue..................................................................................................... 194, 228, 253
Preview in Browser ............................................................................................. 262, 264, 265, 266
Print Preview
Navigating ............................................................................................................................... 285
Opening ................................................................................................................................... 280
Toolbar .................................................................................................................................... 282
Zooming .................................................................................................................................. 284
Printing
Collate command .................................................................................................................... 291
Commands .............................................................................................................................. 286
Copies ...................................................................................................................................... 291
Dialogue .................................................................................................................................. 288
Range ...................................................................................................................................... 291
Reports ........................................................................................................................................ 153
Hyperlink ................................................................................................................................. 152
Site Summary .................................................................................................................. 150, 154
Reset Workspace Layout..................................................................................................... 144, 259
Setting Language ......................................................................................................................... 180
SharePoint Designer 2007
And SharePoint Services ............................................................................................... 1, 61, 140
Closing ....................................................................................................................................... 11
Interface ...................................................................................................................................... 8
New features ............................................................................................................................... 3
Opening ....................................................................................................................................... 5
What is? ...................................................................................................................................... 2
Site Settings......................................................................................................................... 156, 157
Spell Check .......................................................................................................................... 194, 230
Split View ................................................................ 10, 76, 121, 124, 138, 255, 270, 271, 285, 294
Status Bar .............................................................................10, 12, 21, 22, 23, 25, 63, 88, 195, 272
Style Application ..................................................................22, 23, 82, 88, 195, 203, 209, 210, 253
Symbols ................................................................................................................................... 95, 96
Task Panes menu ........................................................................................ 9, 15, 79, 144, 242, 259
Thesaurus .............................................................................................................. 14, 194, 238, 240
Toolbars
Common ......................................... 1, 16, 18, 19, 29, 32, 82, 87, 88, 97, 179, 192, 203, 209, 264
Formatting .............................................................................................................. 209, 216, 221
Hiding ........................................................................................................................................ 20
Moving ...................................................................................................................................... 18
Showing ..................................................................................................................................... 20
Standard .................................................................................................. 128, 202, 231, 288, 294
Toolbox ..........................................65, 76, 77, 78, 79, 106, 109, 110, 113, 118, 120, 123, 128, 192
Uniform Resource Locator ............................................................................................................ 30
Using Menus ............................................................................................................................. 9, 12
Web Page
Closing ....................................................................................................................................... 34
Copying ................................................................................................................................... 164
Deleting ................................................................................................................................... 160
Duplicating .............................................................................................................................. 168
Inserting .......................................................................................................................... 146, 158
Moving ............................................................................................................................ 161, 187
Navigating in SharePoint Designer ........................................................................................... 33
Opening ............................................................................................................................... 29, 31
Page type................................................................................................................................... 67
Properties........................................................ 170, 171, 173, 175, 177, 178, 180, 181, 192, 193
Setting background ................................................................................................................. 174
Size (Resolution)...................................................................................................................... 272
Web Sites
Creating blank ......................................................................................................................... 133
Creating from template .......................................................................................................... 136
Importing ................................................................................................................................ 139
Opening ................................................................................................................................... 131
WebDAV ...................................................................................................................................... 140
Window Menu ........................................................................................................ 15, 34, 192, 259
Windows
Arranging................................................................................................................................. 258
Controls ............................................................................................................................... 9, 256
Workflow Design ............................................................................................................................. 4
WYSIWYG .................................................................................................................. 71, 76, 80, 127
XSLT ................................................................................................................................................. 4

Sharepointdesigner2007f Training Manual

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Sharepointdesigner2007f Training Manual

Загружено:

Авторское право:

Доступные форматы

Foundation Training Manual

SharePoint Designer 2007

Section 1: Getting Started .............................................................................................................. 1

Section 2: Creating a Basic Page ................................................................................................ 65

Section 3: Creating Sites and Advanced Pages ........................................................................ 129

Section 4: Doing More with Text .............................................................................................. 194

Section 5: Printing and Viewing Your Site ............................................................................... 255

Index ........................................................................................................................................... 295

In this section you will learn how to:

 Open SharePoint Designer

Lesson 1.1: Starting Out

Instructor Note: While no special knowledge of Microsoft SharePoint Designer is

What is SharePoint Designer?

The following image shows the basic SharePoint Designer screen.

What’s New in SharePoint Designer 2007?

 SharePoint Designer makes implementing global SharePoint Layout changes easier by

 Workflow Design features incorporated into SharePoint Designer allow you to

Opening SharePoint Designer

Menu Bar (1) You can click on any word in

Toolbar (2) Toolbars contain buttons

Help Box (3) If you type a term or phrase

Window controls (4) These controls let you

Task Panes (5 and 8) Task Panes can contain

Main viewing / The editor/viewing window

Editor View buttons (7) These buttons allow you to

Status Bar (9) The status bar provides

Title Bar (10) This bar displays the name

Closing SharePoint Designer

Lesson 1.2: Interacting With SharePoint Designer

Using SharePoint Designer’s Menus

Menu items If you click on a menu heading at

In the sample to the left, we’ve

Expanding menu items

In the sample on the right, you can

Checked items Some items in a menu may have a

Other items can’t be unchecked.

Drop-down menus You can use this kind of menu to

If you click the small black triangle

In some cases (like the font menu),

If you display the list of choices,

Site menu Contains options for working with Web sites

Using the Common Toolbar

Creates a new document (Web page or Web site) in a new window.

Opens a dialogue to choose a file (or Web site) to open.

Allows you to view your work (Web pages) in a browser.

The Font drop menu allows you to choose a text font.

The Undo (counter clockwise arrow) and Redo (clockwise arrow)

The alignment buttons will apply left justification, center alignment,

The indent buttons can decrease (left button) or increase (right

The Table Borders button allows you to specify various types of

The highlight button will allow you to highlight a selection with a

The <DIV> tag button allows you to define a division or section of a

Hiding and Showing Toolbars

Using the Status Bar

For an example, have a look at the following image.

Next, we will look at the status bar’s information fields.

Lesson 1.3: Working With Files

Understanding Web Pages and Web Sites

This will display the Save As dialogue.

Switching Between Open Pages

Lesson 1.4: Getting Help in SharePoint Designer

Using the Help Menu

Using the Help Screen

Another selection of hyperlinks more specific to this subject will be displayed.