CUSTOMIZING
MICROSOFT SHAREPOINT DESIGNER 2007
FOR SIMPLIFIED OPERATION
Dr. Richard L.
Bowman, Director
Academic Computing, Bridgewater College, Bridgewater, VA,
USA 22812
I. Introduction
Open Microsoft SharePoint Designer 2007 by going to its
default location on the Start menu (Start/Programs/Microsoft
Office/SharePoint Designer 2007) or
wherever it is located on your computer. You will see a display that
looks similar to the image below.
Note: This tutorial assumes the user wants to
configure SharePoint Designer for use as a simple WYSIWYG
("what you see is what you get") web authoring tool. If the need is to
construct and maintain a complex web site for a large organization then
this tutorial is not the correct choice.
Suggestion
Begin a new web authoring project by making sure that you have a
folder into which you plan to place all of the material related to your
web page. For example, it should contain all photos and graphics that
will be used on the web page, all information to be included on the web
page, and all resources that will be linked to the web page. This folder
will eventually also hold your main web page and any related (linked)
web pages.
II. Get the "Look and Feel" You Want.
1. Make more room for the web page as it is composed.
Close all of the extraneous panes on either side of the center
editing area. To do this locate the X at the top-right of each pane and
click it. That is, close the Folder List, Tag Properties, Toolbox, and
Apply Styles panes.
2. Deselect Other Unnecessary Components
Under the View menu, make certain only those items you wish to see
are selected. I make sure that only the Page option is selected; this
gives the cleanest editing area.
3. Change the toolbars that are visible.
Go to the View menu again and click on Toolbars. In the resulting
list, make sure that only Standard and Formatting are
checked. (The default toolbar is usually the Common toolbar, but unless you
have a very larger monitor, many of the buttons on this toolbar will not
be visible. It is much better to use the two toolbars indicated and
place them one under the other.)
When you select these two toolbars, they may float down in the
editing area of SharePoint Designer. If this is the case, move
your mouse until the cursor is in the top border of the toolbar, then
click it and drag the toolbar until it snaps in place at the top of the
display as you usual expect to see it.
4. Modify the visual aids that will display.
Once again go to the View menu and click on Visual Aids. Click on
Show, if it is not already selected. Then deselect all of the options
except for Visible Borders. This later item is necessary so that any
table you use will be visible as you edit your web pages.
5. Adjust the formatting marks that will show up.
For one last time go to the View menu. This time click on Formatting Marks.
Make certain that Spaces and Tag Marks are deselected. But definitely
leave Paragraph Marks and Line Breaks selected. It is very important to
be able to distinguish between a normal Enter at the end of a paragraph
(leaving a blank line between paragraphs on a web page) and a
Shift-Enter that places the next line immediately after the one just
finished (for example, as when one wants to write a person's address in
normal form).
Final View
III. Check Some Application Options.
Under the Tools menu, select Application Options and make certain
that the General Tab display appears as that shown below. That is, you
most likely want SharePoint Designer to be your default web page editor.
If you want more room for viewing your page while editing it, you could
even get rid of the check by "Show status bar."
IV. Set the Choice of Standards to Which the Coding Should Adhere.
- The Page Editor Options--General Tab
The decision about what variety of HTML and other code that will be
used by SharePoint Designer will affect how well the web pages
generated will be displayed in a variety of browsers. So begin by
clicking on the Tools/Page Editor Options. Under the General tab, the
dialogue window should look like that below. In particular, make certain
to have selected to use <strong> and <em> respectively for HTML tags to
make text bold and italics. Also, make sure that the "Show Paste Options
buttons" is checked. This will give you various options when pasting
text into your web page.
- The Page Editor Options--Authoring Tab
Exploration by various web developers has indicated that if one uses
strict HTML 4.01 and CSS 2.0 standards then all of the usual browsers
will display pages developed using SharePoint Designer
accurately. To set these criteria, go to the Authoring tab in the above
window and select HTML where possible and HTML 4.01 Strict and CSS 20.0
as appropriate. The window will look as the shown below.
- The Page Editor Options--CSS Tab
Under the CSS tab of the above dialogue box, ascertain that "Auto
Style Application" is set.
Finally, click "OK." If the blank page that appears open to be edited
does not say "Untitled_1.htm," then close and restart SharePoint
Designer.
V. Now Begin Authoring with the FrontPage Tutorial.
With these changes made, SharePoint Designer 2007 will
behave pretty nearly identically to FrontPge 2003. A tutorial
for using FrontPge is available at:
Also, access any of the resources below for
additional guidance in authoring web pages.
Appendix: Resources
In addition to this tutorial, the reader may find some of the
following resources helpful.
1. Online Help from Academic Computing at Bridgewater College
2. Other Tutorials
- "Customizing SharePoint Designer" - a tutorial from
Microsoft on how to adjust SharePoint Designer to do what you want
it to do.
[
http://office.microsoft.com/en-us/sharepointdesigner/CH100667801033.aspx
]
- "Web Authoring FAQ" - a large amount of information hosted by
WDG (Web Design Group).
[ http://htmlhelp.com/faq/html/all.html
]
- Search the web for other tutorials on topics such as "web
authoring tutorial" or any of the products mentioned here. In
addition, many of the tutorials for MS Expression Web and
Adobe Dreamweaver will have useful info.
|
