Using Microsoft Office FrontPage 2003 to Customize SharePoint by tre72542


									Using Microsoft Office FrontPage 2003 to
Customize SharePoint

Using Microsoft Office FrontPage 2003 to Customize
Exerpts from Microsoft Technet: Published: June 9, 2004 x# EM E

Using Microsoft Office FrontPage 2003 to Customize SharePoint .................................... 1
    Becoming Familiar with FrontPage 2003 ................................................................... 3
    Instant Updates............................................................................................................ 4
    Changing Styles .......................................................................................................... 4
  Most Common Changes Made in FrontPage 2003 ......................................................... 5
    Web Page Changes...................................................................................................... 5
    Lists and Document Library Views ............... Error! Bookmark not defined.Error!
    Bookmark not defined.
  Advanced Customization ..........Error! Bookmark not defined.Error! Bookmark not
    Repeating the Same Content on Multiple Pages ...................... Error! Bookmark not
    defined.Error! Bookmark not defined.
    Advanced Find and Replace .Error! Bookmark not defined.Error! Bookmark not
    Themes ........................................................................................................................ 9
    Image Tracing ........ Error! Bookmark not defined.Error! Bookmark not defined.
    Adding Effects to Your Pages with Behaviors ........................ Error! Bookmark not
    defined.Error! Bookmark not defined.
    Layers (Absolute Positioning) .... Error! Bookmark not defined.Error! Bookmark
    not defined.
  Using Reports to Measure Site Use and Performance .................................................. 13
  Summary ....................................................................................................................... 14

Becoming Familiar with FrontPage 2003
The FrontPage 2003 user interface gives you easy access to the tools you need. The left part of the
screen allows you to view your website by folder list or by navigation pane (shown in Figure 32 -3).

Figure 32-3. Internet Explorer Edit With Microsoft Office FrontPage 2003 toolbar button

The Folder List displays all the folders and files in your site. You can move or rename files or folders,
and FrontPage 2003 will prompt you to automatically fix all the hyperlinks. When you view your site
in the navigation pane, you can see the navigational structure and link bars in your site.
The Folder List also holds some significant SharePoint Products and Technologies capabilities. Right -
click on any document library or on any list (found in the Lists directory). A dialog box tha t contains
five tabs—General, Settings, Fields, Security, and Supporting Files —is displayed. Using these tabs is
a very efficient way to make changes to these properties.

The middle of the screen shows the page that is currently being edited, with page ta bs (shown in
Figure 32-4) available to make it easy to switch to other opened pages in your site.

Figure 32-4. Page tabs
The Web Site tab at the top of the editing pane is used to g ive you options for managing your
website, such as viewing the remote website, reports, navigation, hyperlinks, and tasks.
The bottom of the screen allows you to switch be tween Design, Split, C o de, and Preview page
views. (See Figure 32-5.)

Figure 32-5. Design, Split, Code, and Preview page views
Design View.
    Design view is the WYSIWYG editing mode. This view is the one used most often by FrontPage
    2003 users, even those who are experts at coding HTML. The reason is simple: the buttons and
    menu options allow you to create Web pages faster. For example, creating a table in a text editor
    requires a lot of typing. C reating a table in the FrontPage 2003 Design view by clicking the Table
    button takes only a few seconds.
Split View.
    Split view allows you to see the HTML code in one part of the windo w and the WYSIWY G view in
    another part. When you make a change in the WYSIWYG window, the HTML code is automa tically
    updated, and vice versa. The Split view is a great tool for users who know HTML and want to
    have the best of both worlds—tha t is, fast coding in WYSIWYG mode with precision control of the
    HTML code at the same time.
Code View.
    C ode view allows you to see and edit the HTML code for a page. You can continue to use most
    menu options, but you mus t be familiar with HTML coding to be productive in this view.
Preview View.

    Preview view allows you to see what your Web page will look like in the browser before saving
    your page. This view is particularly handy when you have made a change that you are not sure
    you want to keep.
        New tools in FrontPage 2003 make creating code in C ode view faster than ever. The new C ode
    View menu in the Edit menu and shortcut keys in FrontPage 2003 ma ke creating and editing code
    fast and easy. You can use the Code View menu and the corresponding keyboard shortcuts to
    quickly increase or decrease indents, select a tag or block, find a matching tag or block, insert a
    tag or comment, and more. In addition, new Intellisense technology makes code completion
    automatic if desired, and C ode Snippets make it easy to reuse commonly used code among
    website editors.

Instant Updates
Many Web developers are accustomed to publishing files or sending them to a server via an FTP
program when they are finished making their updates. When FrontPage 2003 users open a website
created with SharePoint Products and Technologies, the changes they make are updated on the
server immediately after they save the page they are working on. Therefore, FrontPage 2003 users
simply need to save their pages when they are finished editing them. Saving pages is accomplished
by clicking the Save option in the File menu.

Changing Styles
The easiest way to create a new style sheet is to start with one of the existing s tyle sheets and then
make edits to it. You can open a copy of the server -based style sheets in FrontPage 2003 by clicking
Open on the File menu, typing the UR L for the style sheet in the File Name box, and then clicking

Most Common Changes Made in FrontPage 2003
This section includes instruc tions on how to make the most commonly needed changes in Microsoft
Office FrontPage 2003.

Web Page Changes
FrontPage 2003 aids us in cus tomizing our Web pages. The next several sections des cribe only
some of these changes.

Adding Text
Adding text to pages in a SharePoint site is as simple as clicking on a region of the page outside of
any Web Part Zone and then typing and formatting the text as desired.
     Some pages are formatted by using tables, and you might have to insert a new table row or
column to create an area that is editable. You can insert a table row or column by clicking on the
Table menu.

Adding Images
Adding images to your site is also straightforward.
To open a SharePoint site in FrontPage 2003
1.   First you should make sure that the images are in your website. You can add images to your
     website by clicking the Import option on the File menu.
2.   Once the files are in your website, make sure that the page you want the image on is open in
     Design View, and then you can simply move the image from the Folder List onto your page
     by performing a click-and-drag operation.
Deleting images is as easy as clicking on the image you want to delete and then pressing the Delete
     If you plan to insert another image after you delete a logo, press the Enter key after you press
the Delete key. That will insert a space you can move your new image into by performing a click -
and-drag operation.

Changing Images
After you add a new image to your site, you might want to make some changes to the image, such
as cropping or resizing (and then resampling to reduce the size of the file) or rotating images. The
Pictures toolbar is the key to making these changes.
C lick on an image to open the Pictures toolbar. (See Figure 32-6.) If you do not see it, click
Toolbars on the View menu and then click Pictures.

Figure 32-6. Pictures toolbar
The Pictures toolbar includes the functions listed in Table 32-3.
Table 32-3. Pictures Toolbar Functions

Image                   Description

                        C lick to insert a picture from a file.

                        C lick to add text. You can insert text on top of a picture except when adding
                        text to a .gif file. The text can be added, but it doesn’t disp lay in Internet

                        C lick to automatically create a thumbnail image to place on the page. When
                        the user clicks the image, she is sent to the large version of the image.

                        C lick to position the image in a specific spot on the page.

                        Bring the image forward.

                        Send the image backward.

                        Flip the image.

                        C hange the contrast on the image.

                        C hange the brightness of the image.

                        C rop the image.

                        Make a color in the image transparent. Use this when you want the
                        background color or image to show through.

                        C lick to change the color of the image.

                        C lick to add a bevel border around the image.

                        C lick to select an image or a portion of an image.

                        C lick to add hotspots to image. The image and the hotspots make up an
                        image map. When a visitor clicks on that region of the image, he is sent to a
                        different page or place on the page.

                        C lick to make hotspots visible on the image.

                        C lick to restore an image to where it was before you started changing it.

You can use these functions to crop, rotate, or colorize images, or even turn them into image maps.

Adding Pages
You will create a new Web page for any number of reasons, such as for consolidating multiple Web
Parts for easy viewing or hosting common Web Part content in a different format.
To add a new page to an existing SharePoint site
1.   With a SharePoint site open in FrontPage 2003, click the Page option (shown in Figure 32-7) of
     the Create a new normal page button on the Standard FrontPage 2003 toolbar.

     Figure 32-7. Page option
        Alternatively, you can click the New option from the File menu and then click the More Page
     Templates link.
     The Page Templates dialog box (shown in Figure 32-8) is displayed.

     Figure 32-8. Page Templates dialog box

2.   C hoose a template from one of the four tabs, and click the OK b utton.
        As you click on each template, notice the Description on the center right of the dialog box
     below Options and above Preview. It can be ver y helpful in choosing the correct template.
     Below that there is a preview of how the page will look.
     If a Web Part Page template was chosen, a new page is created using the chosen template, and
     a new tab labeled new_page_1.aspx is added to the top of the e diting pane. The file extension
     will vary if another type of template is chosen.

Inserting Interactive Buttons
You might want to insert a button into a page independent of the overall navigational structure of
your site. You can create Interactive Buttons from within FrontPage 2003 without leaving FrontPage
2003 to use a graphics program to create separate graphics files for each button you want to use.
Even more importantly, FrontPage 2003 automatically creates separate buttons for normal,
hovered, and pressed states and automatically includes the Microsoft JScript code necessary to give
the buttons their interactivity. Nice.
To insert an Interactive Button into a page
1.   Open or create the page you want to insert an Interactive Button into using FrontPag e 2003.
2.   C lick the location you want the Interactive Button to go, and then click the In teractive Button
     option on the Insert menu to open the Interactive Buttons dialog box. (See Figure 32-23.)

     Figure 32-23. Interactive Button dialog box
3.   C lick the button style you want to use in the Buttons scroll box.
4.   Type the text you would like to appear on your button in the Text box.
5.   Type the URL for the page you want the button to link to in the Link box.
6.   C lick the Font tab if you want to change the font used on the button, and click the Image tab if
     you want to change the button size or give it a transparent backg round around the edges.
7.   C lick the OK button when you are finished, and then you will see the button on your page.
     When you save your page, you will be prompted to save three images for every button. One
     represents the normal state, one represents the hovered state, and one represents the pressed
     state. When you view your page in the browser, the button will be included. When you hover
     the cursor over the button, the button c hanges; and when you press the button, it changes until
     the next page is loaded.

Themes are great ways to change fonts, formatting, and graphical elements on one page or
throughout an entire website.

Cascading Style Sheets (CSS)
FrontPage 2003 Themes use industry-s tandard C ascading Style Sheets (CSS) to define formatting
rules. However, the FrontPage 2003 user interface shields you from the technical intricacies so that
you can create a custom Theme without ever opening a CSS file. In fact, although the themes use
C SS, the C SS files cannot be successfully edited directly; they must be altered by using the
C ustomize Theme user interface.

                                      Find a Theme to Copy
                                      If you want to create a custom Theme with your own colors,
                                      fonts, formatting, buttons, and more, you might want to
                                      customize an existing Theme rather than create a new one.
                                      There are hundreds of formatting options, and it is often
                                      easier to find an existing Theme that resembles the look you
                                      want and then cus tomize it rather than start from a blank
                                      Theme and then make each formatting choice yourself.
                                      For example, Themes allow you to specify formatting choices
                                      for such detailed items as the colors behind calendar entries
                                      or the font color used on the date-picker pop-up window. If
                                      you start with a Theme tha t already uses colors similar to the
                                      ones you want to use, you will not have to change the
                                      formatting for such detailed items because they will already
                                      be acceptable. Instead, you can concentrate on changing the
                                      formatting for the items that are important to you, such as
                                      body text formatting, hyperlink formatting, and more.
                                      To customize an existing Theme, you should first look through
                                      the existing Themes in FrontPage 2003 to see what existing
                                      Themes contain fonts and formatting that are the most similar
                                      to those you want to use. Scroll through the lis t of available
                                      Themes that are installed on your computer using the Theme
                                      task pane. C lick on the Theme option from the Format menu
                                      to open the Theme task pane. (See Figure 32-27.)

                                      Figure 32-27. Theme task pane

Saving Your Custom Theme
To find a Theme that most closely matches the look of your finished site (discussed in previous
section), and then save a copy of it as your own C ustom Theme, follow these steps:
1.   Using FrontPage 2003, click Theme on the Format menu to open the Theme task pane. (See
     Figure 32-27 s hown earlier.)
2.   Hover the cursor over the Theme you want to start with, click the down arrow on the right,
     which results in a pop-up menu being presented, and then click the Customize option to open
     the Customize Theme dialog box. (See Figure 32-28.)

     Figure 32-28. Customize Theme dialog box
     See full-sized image
3.   C lick the Save As button to open the Save Theme dialog box. (See Figure 32-29.)

     Figure 32-29. Save Theme dialog box
4.   Type a new name for your Theme in the Enter new theme title box, click OK, and then click
     OK again. T his process has saved your new Theme, but it has not applied it to your site yet.
        You can create a custom Theme from scratch if you do not want to s tart with one of the
     existing Themes and then customize it from there. Instead of choosing an existing them and
     then clicking C ustomize, simply click the C reate New Theme option at the bottom of the Theme
     task pane. C lick the Save As button, name your Theme, and then click the OK button two times.
     You new custom Theme is then sav ed.

Applying Your Custom Theme to Your Site
To apply your custom Theme to your site, find the Theme you just created in the Themes task pane,
select a theme scroll box, hover the cursor over it, click the down arrow on the right (whic h results
in a popup menu), and click Apply As Default Theme. If changes are made to your Theme from this
point forward, FrontPage will promp t you to apply the new changes to your website. Responding
affirmatively to the prompt will propagate your changes to all your pages. Ne w pages will
automatically use the custom theme.

Changing Colors, Graphics, and Fonts
Once your C ustom Theme is applied to your site, change colors, graphics, and fonts in your site by
using the C ustomize Theme dialog box (shown earlier in Figure 32-29) by following these steps:
    C lick the Colors button, and then click the Custom tab to change the colors of headings, the
    page background, hyperlinks, and more.
    C hanging graphics such as buttons, bullets, page banners, and background images is done by
    clicking the Graphics button. You can also change the font style on buttons here as well.
    C hanging body text formats and heading formats is done by clicking the Text button. Additional
    styles can be added by clicking More Text Styles and then clicking New.
    When you are finished changing colors, graphics, and fonts, you click OK twice, and when
    prompted whether or not to save your changes, click Yes.

Advanced Theme Customization
There are over 300 styles you can change in each Theme. This collection of styles can change even
the smallest elements in a website created with SharePoint. The vast majority of custom Themes
that are created do not make changes to more than a fraction of the styles available. If the element
you want to change is not exposed in the color, graphics, or fonts areas, you will need to find out
what C SS style needs to be changed to affect that element.
    For more information on how to determine which C SS needs to change, you can read an article
in the FrontPage 2003 Developer’s Toolkit titled “C ustomizing Themes for Sites Created with
Windows SharePoint Services.” It includes details about how to hover you r cursor over a screenshot
of a default page of a site created with SharePoint and see a ToolTip that shows the corresponding
style to change. The FrontPage 2003 Developer’s Toolkit is available at

                                                                                                      11 .htm.
Once you know what style you want to change, you can change it by clicking the Text button on the
C ustomize Theme dialog box (shown previously in Figure 32-29), and subsequently clicking the
More Text Styles button, which opens the Style dialog box. (See Figure 32-30.)

Figure 32-30. Style dialog box
The Styles scroll box displays all the styles currently in use in the Theme. C lick the style you want
to change, and then click the Modify button to open the Modify Style dialog box. (See Figure 32 -31.)

Figure 32-31. Modify Style dialog box
C lick the Format button, and then click the option that represents the change you w ant to make—
Font, Paragraph, Border, Numbering, or Positioning. Each of these options give you full control over
the formatting possibilities. For example, you could choose to change font color, increase the
amount of space before or after the text, add a border only to the top of the text, or position the
text to wrap to the right. The op tions are virtually unlimited.
When you are finished making your updates, click the OK button until you are asked whether you
want to save the Theme, and then click Yes. You might need to repeat these steps for each style
you want to change until your custom Theme is just the way you want it.

Using Reports to Measure Site Use and Performance
FrontPage 2003 includes powerful tools to help track site use and performance, an d identify
potential problems so that you can take action to fix them. These tools are available to use on sites
created with Windows SharePoint Services and SharePoint Portal Server 2003, and usage analysis
reports are available as long as the server administrator has turned reporting on. Site usage
analysis reports are run on a regular basis, with the frequency and time determined by the server
To access reports from within FrontPage 2003, open your website, and select Reports from the View
menu. You can choose from a variety of reports, including Site Summary, Files, Shared C ontent,
Problems, Workflow, and Usage. (See Figure 32-67.)

Figure 32-67. Reports in FrontPage 2003
The Site Summary report presents key information about your site, including the number of hits and
downloads, number of files and pictures in your site, the number of files tha t aren’t lin ked to and
therefore might not be necessary, slow pages, older files, links to reports displaying lists of all of the
pages, and more. You can use this report to find many common problems with your site and then
fix them.
You can also use the usage analysis reports to find out which pages in your site are being accessed
most frequently and which pages might not be necessary or might need to be updated on your site
because they are not accessed frequently.

The usage summary report also gives you a snapshot o f your site’s usage at a glance, including
number of visits, page hits, bytes downloaded, top referrers, top referring domains, and more.

Microsoft Office FrontPage 2003 and SharePoint Products and Technologies really deliver a powerful
set of tools. After we covered some basic SharePoint Products and Technologies fundamentals such
as Web Parts, Lists, Libraries, Areas, Personal Sites, and Views, we touched on browser -based
customization of SharePoint Products and Technologies and took a high -level tour of FrontPage
2003 itself.
We learned that there are some caveats to editing SharePoint Portal Server 2003 sites in FrontPage
2003. But Microsoft has provided a high level of granularity in our ability to disable some functions.
Then we turned to the most common changes people make using FrontPage 2003 when editing a
SharePoint site. We covered adding text, images, and pages and changing almost everything about
how a list can be displayed. In the section about Advanced C ustomization, we discussed using
Dynamic Web Templates, Themes, and other new features in FrontPage 2003.
We boned up on using the Data Source C atalog and the huge variety of data sources available
through FrontPage 2003. Then we turned our attention to getting the most out of Data View W eb
Parts. These display workhorses capitalize on the power of XSLT and the Data Retrieval Service in
Windows SharePoint Services. We covered displaying, filtering, sorting, grouping, and more. This
was followed by a brief example of an XML hierarchy.
We demonstrated how SharePoint lists can be converted to Data Views for additional capabilities for
formatting the output. And finally we discussed the various prepackaged reporting functionalities
available from within FrontPage 2003.
The next two chapters go a layer deeper and discuss the object models underlying SharePoint
Products and Technologies in detail.


To top