Using FrontPage to Modify SharePoint 2003 Pages


FrontPage 2003 is a website creation and management tool that works well with SharePoint 2003 websites and enables a web designer or site administrator to quickly add functionality to sites and customize web pages with some basic training. FrontPage 2003 offers tools to design the layout of the page and site along with tools to generate better code with built-in scripting tools, including XML data-driven websites.

This section presents an example of how FrontPage 2003 can be used to modify SharePoint 2003 pages to better meet the needs of users and administrators, and assumes that the reader has experience and training with FrontPage 2003 or previous versions. Before FrontPage is used on production sites, a warning is in order. FrontPage can permanently change the functionality of the page and may have unintended results. Users with little or no FrontPage experience should use FrontPage only on test sites that don't have production roles and that can be deleted.

TIP

An excellent document to read if you are planning on using FrontPage 2003 for customization work is "What you don't know about Front Page 2003 can hurt you" by Barry Kouda, available from www.msd2d.com, or from www.barracuda.net.


It is recommended that when a production site is opened for editing, a copy of the site be saved to a backup location, such as a testing virtual server, to ensure that the production site is not damaged. FrontPage also has the capability to export a package of the entire contents of the site in a single file, which is a useful process when creating and publishing top-level websites or subsites.

Using FrontPage 2003 to Add Visual Impact to a Website

In this example, the Documents site used in the last several sections is customized in FrontPage 2003. The average user probably won't be performing customizations to this level, but the processes and tools covered can certainly be used to customize and add value to the portal site, areas, top-level websites, or subsites as well.

If FrontPage 2003 is installed on the desktop, the File menu provides the Edit with Microsoft Office FrontPage option when viewing a SharePoint 2003 site. When this option is selected, FrontPage 2003 opens, and the site and all its contents are opened as well and are ready for editing after all the components are loaded. Note that if the user trying to perform this function does not have Administrative or Web Designer site permissions, he receives an error when FrontPage 2003 tries to open the site.

Figure 20.11 shows the view from FrontPage 2003 when the site is opened. The left-hand side of the screen displays the folder list for the website that contains the web page that was opened. In Figure 20.11, the My Pages folder was expanded by clicking the plus sign next to it, to display a Forms folder and Documents.aspx, which is the title of the new page that was created previously and had several Web Parts added to it, and is currently open for editing to the right. Note at the bottom of the screen are additional buttonsSplit, Code, and Previewwhich can be selected to change the current view. If Split or Code is selected, the actual code is displayed and can be edited by more advanced users.

Figure 20.11. Web page opened in FrontPage 2003.


To edit a component of the page, click on the item, and a number of options become available when the component is right-clicked. The following steps show how to edit the My Lists cell from FrontPage 2003:

1.

Right-click My Lists in the design view from FrontPage 2003 and select the Cell Properties option. The results of this action are shown in Figure 20.12. As shown in this figure, a number of customizations can be performed on this cell, including changing horizontal and vertical alignment, adjusting rows and columns spanned, specifying a fixed width, assigning borders and border colors, changing background color, or choosing a background picture.

Figure 20.12. Cell Properties in FrontPage 2003.


2.

To select a background picture, as shown in Figure 20.13, the Use Background Picture box is checked, and the Browse button is clicked. In this case, the image is selected from My Pictures from the personal site of the user and is the same sunset picture that this user chose to display in the documents site in the Image Viewer Web Part covered in a previous example in this chapter.

Figure 20.13. Use of background picture in FrontPage 2003.


3.

Other options are available in the Cell Properties window, by clicking the Properties button and then clicking Picture File Type. Figure 20.14 shows the Picture File Type window and the different file types the current JPEG file can be converted to. In Figure 20.14, the Use Image As Is box is deselected, and three progressive passes will be used to provide a more immediate display of a low-quality image that becomes more detailed with the additional passes. This can be an important feature if web pages use larger graphics files. A low-resolution image that is displayed immediately and then becomes more detailed is less likely to annoy impatient users, as opposed to a long pause where it appears that nothing is happening while a several-hundred-kilobyte file loads. Click OK to close the Picture File Type window, and click OK again to close the Cell Properties window.

Figure 20.14. Picture File Type options in FrontPage 2003.


If the image is changed, the user is prompted to either rename the embedded file, change the folder it is saved in, or overwrite it. Because an actual image stored in My Images library was used, the new image is saved to the Images folder in the Personal Site directory. So if the image stored in the library is deleted, the reference background image is still available.

4.

To save these changes from FrontPage 2003 to the SharePoint Portal Server 2003 personal site, choose File, Save, or press Ctrl + S. For this example, the Image Web Part that was previously at the top of the personal site was deleted from within FrontPage 2003 by clicking on it and pressing the Delete key, (or it could be deleted by right-clicking and selecting Cut from the menu). Figure 20.15 shows the results of this change (compare this to Figure 20.11 to see the difference), which give the site a much more sophisticated appearance. The Image Web Part that previously displayed the Sunset image no longer needs to be used, which frees up more room on this page.

Figure 20.15. Customized page on personal site.


FrontPage 2003 is closely tied to SharePoint 2003, and Web Parts can be inserted using FrontPage as well as in SharePoint 2003.

Figure 20.16 shows the additional task panes available in FrontPage 2003 and can be used by the web designer to customize the web page. The available task panes include Getting Started, Help, Search Results, Clip Art, Clipboard, New, Layout Tables and Cells, Cell Formatting, Theme, Layers, Behaviors, Data Source Catalog, Find a Data Source, Data View Details, and Web Parts.

Figure 20.16. Web Parts task pane in FrontPage 2003.


As highlighted in Figure 20.16, behaviors can be added to a page. For example, a behavior can be added to text so that it changes in appearance when the cursor moves over it, and reverts to its previous state when the cursor moves away. Figure 20.17 provides a view of the different behaviors available to insert in this Web Page, which include Call Script, Change Property, Go To URL, Jump Menu, Play Sound, Popup Message, Swap Image, and others.

Figure 20.17. Behavior options in FrontPage 2003.


The website administrator or designer can use these items to spice up a site by providing a level of interactivity with the user by playing sounds when certain actions occur, providing enhanced visual effects, presenting pop-up messages that provide helpful information to the user, or creating embedded menus that can contain URLs to other sites using the jump menu.

Adding Clip Art to a SharePoint 2003 Site

Many users respond favorably to the addition of attractive, relevant images, and a quick way to add these to SharePoint sites is to use clip art available from Microsoft Office 2003 applications. A similar process can be used when adding any image to a web page from FrontPage 2003.

To access clip art and easily include it in the page, follow these steps:

1.

Click on the Web Site tab in the folders view in FrontPage 2003 to display the folders contained in the website.

2.

Double-click on the Images folder to display the contents of the Images folder.

3.

From the task pane on the right-hand side of the screen (press Ctrl + F1 if it isn't there), select Clip Art from the drop-down menu to display the Clip Art task pane, as displayed in Figure 20.18.

Figure 20.18. Copying clip art to the Images directory.


Select a suitable clip art imagein this example, an image of a briefcaseand drag and drop it into the Images folder, as shown in Figure 20.18.

4.

Change the name of the image (in this case, fmc3zfmp[1].gif) to something more descriptive, by right-clicking the file, choosing Rename, and entering a more descriptive name (in this case, briefcase.gif).

5.

Now the URL of the image needs to be copied so that it can be used in the Title Bar Web Part. Highlight the file name, right-click on it, and choose Properties.

6.

Highlight the URL of the image in the Location box (triple-click on it), and copy the URL to the image (Ctrl+C). In this example, the URL is http://w2k3spssql/personal/consultant/images/briefcase.gif.

7.

Return to the Documents.aspx tab and double-click on the Title Bar Web Part (which in this example contains the word "Documents," the title of the page). Enter the URL location of the new clip art image (Ctrl+V because the URL was copied in step 6). Then click OK.

8.

Click on the Preview button at the bottom of the screen to see how the web page will look. Figure 20.19 shows the results of the example, which include the briefcase clip art.

Figure 20.19. Preview in FrontPage of the Web page with clip art inserted.


9.

Save the results if they are acceptable to the SharePoint server by hitting Ctrl + S.

This personal site now has a more customized look and feel. Although this may sound like marketing speak, SharePoint 2003 administrators will quickly come to learn how important this additional level of customization is in terms of how it affects the comfort level and speed of adoption of the users.

Although it may not be cost and time effective to work with each user on creating the perfect environment (the computer equivalent of Feng Shui), some extra attention should be given to the customization of at least the portal and top-level sites, to include items such as the company logo, company color schemes, and graphics designed for different divisions or projects. Allowing departmental managers to provide customized images, or make minor adjustments also enhances their involvement in the customization process.

Inserting Web Components in FrontPage 2003

A number of handy tools are available by using the Insert Web Component feature. These items quickly add features and functionality that many users will be used to, have seen used on other sites on the Internet, and can leverage the information contained in the sites.

The Insert Web Component feature is available from the Tools menu in FrontPage 2003 and is one of the standard icons included in the Standard toolbar. Figure 20.20 shows the Insert Web Component window and the options available for this web page (the Documents page that has been used in previous examples).

Figure 20.20. Insert Web Component.


Other web components include:

  • Dynamic Effects Marquee banner to add scrolling text, interactive button, which can include a URL and take the user to that URL when it is pressed.

  • Spreadsheets and charts These allow the inclusion of an actual Office spreadsheet on the page, or an Office chart, which can be linked to existing data or data source, or an Office pivot table.

  • Hit counters Common on the Internet, these track the number of hits the site receives, and several different styles are provided. The starting number can be set to any number.

  • Photo galleries These components quickly allow a web designer to add a group of images to the site.

  • Included content These include Substitution (show author, description, last changed, or URL information automatically), page (include content from an HTML page on the same site), or page banner (which can be text or a picture).

  • Link bars These enable bars of hyperlinks to be added to pages that link to pages outside or inside the site.

  • Top 10 lists Of visited pages, referring domains, referring URLs, search strings, visiting users, operating systems, browser.

  • MSN mapping components Insert a map or link to a map.

  • MSN components Search the Web with MSN, get stock quotes.

  • MSNBC components Business headlines, news headlines, sports headlines, technology headlines, weather forecasts.

  • Advanced controls HTML, Java applet, plug-in, confirmation field, ActiveX control, Movie in Flash format.

The following steps add a scrolling marquee to the Documents page:

1.

Choose Insert, Web Component from the menu in FrontPage 2003.

2.

From the Insert Web Component window, select Dynamic Effects in the Component Type section and then Marquee from the Choose an Effect section. Click Finish.

3.

In the Marquee Properties window, enter the text desired (for example "An Apple a Day Keeps the Doctor Away").

4.

Select which direction the words will move (left or right), the speed and behavior desired, whether it will repeat a fixed number of times or display continuously, and whether there will be a background color. The width and height can also be set. Figure 20.21 shows the window where the options are entered, along with the Modify Style window that opens when the Style button is clicked. In this example, the font is set to white and the background to blue.

Figure 20.21. Marquee Properties in FrontPage 2003.


The scrolling marquee is shown in Figure 20.22, where the marquee appears above the document libraries.

Figure 20.22. Personal site with marquee added.


TIP

If you are going to customize your SharePoint sites, and you decide to change the default components (menus, navigation bar, etc.) you might "break" the pages. It is a good practice to make a copy of your default.aspx file so that you can "roll back" any changes that you have made.





Microsoft SharePoint 2003 Unleashed
Microsoft SharePoint 2003 Unleashed (2nd Edition) (Unleashed)
ISBN: 0672328038
EAN: 2147483647
Year: 2005
Pages: 288

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net