Modifying Project s HTML Templates

 < Day Day Up > 

Modifying Project's HTML Templates

This section explores some of the ways you can change the HTML templates that come with Microsoft Project 2003. You can actually modify the HTML code that is contained within a template to change several characteristics of the template's appearance, including the following:

  • The background color of the HTML document

  • A background graphic for the template

  • Graphic images, such as a company logo, on a Web page

  • The text that appears in the title bar of a browser when displaying the Web page

  • Hyperlinks to other pages on the Internet or your corporate intranet

  • The capability to send an email directly from the Web page

Each of the following examples walks through the process of modifying the Centered Mist Dark.html template that comes with Project 2003. The Centered Mist Dark.html template is a text document that can be edited in any text editor (such as Notepad), a Web design program (such as Microsoft FrontPage), or a word processor (such as Microsoft Word).

As you proceed through each of the following examples, you will continue to add modifications to the Centered Mist Dark.html template to create a highly customized, professional-looking Web page.

Changing the Background Color of a Web Page

In this section, you will change the background color of the Centered Mist Dark.html template to light blue. Follow these steps:

  1. From your text editor, open the Centered Mist Dark.html file, which is typically located in the Program Files\Microsoft Office\Templates\1033\Microsoft Project directory (see partial code in Listing 1).

    Listing 1. HTML Code from the Centered Mist Dark.html File
     <!--    MICROSOFT PROJECT HTML EXPORT TEMPLATE     TEMPLATE NAME      : Centered Mist Dark.html     TEMPLATE STYLE     : Centered     COLOR SCHEME       : Mist Dark     IMAGE PLACEHOLDER  : Yes     TABLE PLACEHOLDERS : Task/Resource/Assignment --> <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252"> <TITLE>Microsoft Project Exported Information</TITLE> </HEAD> <!-- ******* BACKGROUND, LINK, AND FONT COLORS ******* --> <BODY BGCOLOR="#336666" TEXT="=black" LINK="#ADA990" VLINK="#D6E0E0" ALINK="#ADA990" TOPMARGIN="30" LEFTMARGIN="5"> <DIV ALIGN="CENTER"> <!-- ******* PROJECT TITLE ******* --> <FONT COLOR="#ADA990" SIZE="7" FACE="Arial Narrow"> <B> <!--MSProjectTemplate_ProjectTitle--> </B> </FONT> <BR><BR> <HR NOSHADE WIDTH="75%" COLOR="#ADA990"> 
  2. From your text editor, save this file with the name Export Project with Custom Options.html or any other name you want.

  3. In the HTML template, look for the section that begins with the heading <!-- ******* BACKGROUND, LINK, AND FONT COLORS ******* --> . Immediately following this heading, you will see a line that begins with the text <BODY BGCOLOR="#336666" . Change the BGCOLOR setting from "#336666" to "#CCFFFF" .

    NOTE

    The BGCOLOR= parameter tells a Web browser the background color to use when displaying the HTML document. If you leave out the BGCOLOR= parameter, a browser will typically display the Web document with a gray background. The #CCFFFF used in step 3 is the hexadecimal representation of the light blue color for the background of the Web page.

    TIP

    A great way to figure out the hexadecimal value for a background color is to create a new document using Microsoft Word (version 97 or later), and save it as a Web page. Then, select Format, Background, and Word displays a dialog box that allows you to graphically select a background color for the document. After you have selected the background color, select View, HTML Source. Microsoft Word displays the source for the HTML document. Here is an example of the source from a Microsoft Word XP HTML document:

     <body bgcolor=fuchsia lang=EN-US style='tab-interval:.5in'> 

    From the line <body bgcolor="#99ccff" lang=EN-US style='tab-interval:.5in'> , copy the hexadecimal value or the name of the BGCOLOR setting and set BGCOLOR in the Microsoft Project template equal to the same value.

  4. After you select a background color for the HTML document, save and close the file in your text editor.

  5. Open the project you want to save as an HTML file in Microsoft Project and select File, Save As Web Page.

  6. From the Save As dialog box, navigate to the directory where you want to save the document.

  7. Type the name of the HTML document in the File Name field.

  8. Click the Save button, and the Export Wizard opens.

  9. From the wizard, select the Task Schedule Map used in the section "Saving a Project as an HTML Document."

  10. From the Export Wizard Map Options dialog box, select the Base Export on HTML Template check box and click the Browse button to select the template you created in step 2.

  11. Click the Next button to advance through the wizard. Click Finish on the last step of the wizard to save the project data to an HTML document.

  12. Start up your Web browser and open the HTML document you created in this example. The Web page now displays with the custom background color you selected.

Defining a Background Graphic for a Template

In this example, you will modify the template you created in the previous example by adding a background graphic. A background graphic can be used instead of a background color to give a Web page a rich, textured look. The Microsoft Office XP CD includes several GIF files that can be used as background graphics for a Web page. These graphic files are typically installed in the Program Files\Microsoft Office\Office10\Bitmaps\Styles directory.

To add a background graphic to a Project template, follow these steps:

  1. Copy the file you want to use for the background graphic into the same directory where you will save the HTML document. In this example, use the file Acsndstn.gif as the background graphic.

  2. From your HTML editor, open the customized Microsoft Project HTML template you created in the previous section (or open any other Project HTML template you want to modify).

  3. About six lines down from the top of the code, locate the text <BODY... (the exact text after the word BODY will vary, depending on any other changes you might have already made to the template; see the partial code in Listing 2).

    Listing 2. HTML Code from the Centered Mist Dark.html File
     <!-- ******* BACKGROUND, LINK, AND FONT COLORS ******* --> <BODY BGCOLOR="#336666" TEXT="=black" LINK="#ADA990" VLINK="#D6E0E0" ALINK="#ADA990" TOPMARGIN="30" LEFTMARGIN="5"> <DIV ALIGN="CENTER"> 
  4. Change the BODY BGCOLOR to BODY BACKGROUND=" xxxxxx.gif " , where xxxxxx.gif represents the name of the background graphic file you want to display on the Web page. In this example, set it to <BODY BACKGROUND=" Acsndstn.gif"...> .

  5. Save the template and close the file in your text editor.

  6. In Microsoft Project, open the project you want to save as an HTML file and select File, Save As Web Page.

  7. From the Save As dialog box, navigate to the directory where you want to save the document.

  8. Type the name of the HTML document in the File Name field.

  9. Click the Save button, and the Export Wizard opens.

  10. From the wizard, select the Task Schedule Map used in the section "Saving a Project as an HTML Document."

  11. From the Export Wizard Map Options dialog box, select the Base Export on HTML Template check box and click the Browse button to select the customized Project HTML template.

  12. Click the Next button to advance through the wizard. Click Finish on the last step of the wizard to save the project data to an HTML document.

  13. Start up your Web browser and open the HTML document you created in this example (see Figure 19). The Web page now displays with the custom background graphic you selected.

    Figure 19. This HTML document displays a custom background graphic.

    graphics/ar01fig19.jpg

Displaying a Graphic Image in a Project Template

Microsoft Project allows you to easily include a graphic image in your template without having to make any modifications to the HTML source code. For example, you might want to include a company logo or another graphic to enhance the appearance of a Web page.

To add a graphic to a Project HTML template, do the following:

  1. In Microsoft Project, open the project you want to save as an HTML file and select File, Save As Web Page.

  2. From the Save As dialog box, navigate to the directory where you want to save the document.

  3. Type the name of the HTML document in the File Name field.

  4. Click the Save button, and the Export Wizard opens.

  5. From the wizard, select the map you want to use for this export (or create a new map).

  6. From the Export Wizard Map Options dialog box, select the Base Export on HTML Template check box, and then click the Browse button to select the Project HTML template you want to use for this export.

  7. Select the Include Image File in HTML Page check box and click the Browse button to select the graphic you want to use in the template.

  8. Click the Next button to advance through the wizard. Click Finish on the last step of the wizard to save the project data to an HTML document.

  9. Start up your Web browser and open the HTML document you created in this example (see Figure 20). The Web page now displays with the graphic you selected.

    Figure 20. The HTML document now displays with a graphic image.

    graphics/ar01fig20.jpg

Changing the Title Bar Text

Another way you can customize a Microsoft Project Web page is to change the text that displays in the title bar of the Web browser when the page is opened. By default, Microsoft Project displays the text Microsoft Project Exported Information in the title bar of the browser.

To change the HTML template so that a browser displays your company name or the name of your project in the title bar text of your Web browser, do the following:

  1. From your HTML editor, open the Microsoft Project HTML template that you customized in the previous section (or any other Project HTML template you want to modify).

  2. About three lines down from the top of the code, locate the text <TITLE>Microsoft Project Exported Information</TITLE> . Replace the text Microsoft Project Exported Information with the text you want to display in the title bar of the Web browser. For example, you could change the title bar text to display ABC Corporation Relocation Project . Be careful not to change the <TITLE> and </TITLE> tags that surround the title bar text.

  3. Save the template and close the file in your text editor.

  4. In Microsoft Project, open the project you want to save as an HTML file. Select File, Save As Web Page.

  5. From the Save As dialog box, navigate to the directory where you want to save the document.

  6. Type the name of the HTML document in the File Name field.

  7. Click the Save button, and the Export Wizard opens.

  8. From the wizard, select the map you want to use for this export (or create a new map).

  9. From the Export Wizard Map Options dialog box, select the Base Export on HTML Template check box and click the Browse button to select the Project HTML template you want to use for this export.

  10. Click the Next button to advance through the wizard. Click Finish on the last step of the wizard to save the project data to an HTML document.

  11. Start up your Web browser and open the HTML document you created in this example. The Web page now displays the text ABC Corporation Relocation Project in the title bar of the window.

NOTE

You can easily change the project title in Microsoft Project by selecting File, Properties, and typing the new project title in the Title field on the Summary tab. If you do not select the project title yourself, Microsoft Project automatically uses the name of the file as the project title.


Adding Hyperlinks to a Project HTML Template

Another useful customization you can make to a Project HTML template is to include hyperlinks to other Web pages. For example, you can include a link that takes visitors to your company's home page on the Internet or Microsoft's Internet Explorer home page. You can also use a link to allow a visitor to download a demo file that describes your company's products or services. Another type of hyperlink you can add provides visitors to your site the ability to send an email to the Webmaster of your Web site or to the president of the company. This type of hyperlink is referred to as a mail link .

To add hyperlinks to a Microsoft Project HTML template, do the following:

  1. From your HTML editor, open a customized Microsoft Project HTML template (or any other Project HTML template you want to modify).

  2. Toward the bottom of the HTML code, locate the section that begins with the comment <!-- ******* MICROSOFT LINKS ******* --> , which is shown in Listing 3.

    Listing 3. HTML Code from the Customized Project HTML Template That Includes a Hyperlink
     <!-- ******* MICROSOFT LINKS ******* --> <P ALIGN="CENTER"> <BR> <FONT FACE="Arial" SIZE="1"> <A HREF="http://www.microsoft.com/isapi/redir.dll?prd=msft&plcid=0x0409&ar=home"> Microsoft Home Page </A> <BR> <A HREF="http://www.microsoft.com/isapi/redir.dll? prd=msproject&sbp=&plcid=0x0409&pver=8.0&ar=home"> Microsoft Project Home Page </A> </FONT> </P> 

    NOTE

    The templates that come with Microsoft Project 2003 include hyperlinks to the Microsoft Project home page and the Microsoft Corporation home page. Here is the syntax of a hyperlink:

     <A HREF="  xxxxxxxx  ">  yyyyyyyy  </A> 

    xxxxxxxx represents the address of the site you want to navigate to, and yyyyyyyy represents the displayed text that the visitor will click to navigate to the site.

  3. Add to the Project HTML template an additional hyperlink that navigates to ABC Corporation's home page on the Internet. Directly below the link to the Microsoft Project home page and above the </FONT> tag toward the bottom of the Project HTML template, add the following:

     <A HREF="http://www.abc-corporation.com"><B>ABC Corporation Home Page</B></A> 

The HTML code should now appear as shown in Listing 4.

Listing 4. HTML Code with a Hyperlink to ABC Corporation's Home Page
 <A HREF="http://www.microsoft.com/isapi/redir.dll? prd=msproject&sbp=&plcid=0x0409&pver=8.0&ar=home"> Microsoft Project Home Page </A> <BR> <A HREF="http://www.Projectassistants.com/isapi/redir.dll? prd=msproject&sbp=&plcid=0x0409&pver=8.0&ar=home"> Project Assistants Home Page </A> 

It is very common to give visitors the ability to send an email message to someone in the organization, such as the Webmaster of the Web site or a technical support engineer. When a visitor to the home page clicks this hyperlink, it automatically starts up the visitor's email application and creates a new email message addressed to this individual.

An email hyperlink (also referred to as a mail link ) uses the syntax <A HREF="mailto: xxxxxxxx "> yyyyyyyy </A> , where xxxxxxxx represents the email address you want to send mail to, and yyyyyyyy represents the displayed text that the visitor will click to start his or her email application with the new email message.

To create a mail link that creates an email to the Webmaster of ABC Corporation when the visitor clicks it, follow these steps:

  1. Directly below the link to the ABC Corporation home page and above the </TABLE> tag, toward the bottom of the Project HTML template, add the following:

     <TD ALIGN=CENTER> <A HREF="mailto:webmaster@abc-corporation.com"><B>Click here to send email to the ABC Corporation Webmaster</B></A></TD> 

    The HTML code should now look as shown in Listing 5.

    Listing 5. HTML Code with an Email Hyperlink
     <BR> <A HREF="http://www.Projectassistants.com/isapi/redir.dll? prd=msproject&sbp=&plcid=0x0409&pver=8.0&ar=home"> Project Assistants Home Page </A> <BR> <A HREF="mailto:webmaster@abc-corporation.com"><B>Click here to send email to the ABC Corporation Webmaster</B></A> 
  2. Save the template and close the file in your text editor.

  3. In Microsoft Project, open the project you want to save as an HTML file and select File, Save As Web Page.

  4. From the Save As dialog box, navigate to the directory in which you want to save the document.

  5. Type the name of the HTML document in the File Name field.

  6. Click the Save button, and the Export Wizard opens.

  7. From the wizard, select the map you want to use for this export (or create a new map).

  8. From the Export Wizard Map Options dialog box, select the Base Export on HTML Template check box and click the Browse button to select the Project HTML template you want to use for this export.

  9. Click the Next button to advance through the wizard. Click Finish on the last step of the wizard to save the project data to an HTML document.

  10. Start up your Web browser and open the HTML document you created in this example (see Figure 21). Scroll down to the bottom of the Web page, and you see the two new hyperlinks you added to the Project HTML template.

    Figure 21. This HTML document has hyperlinks to a corporate home page and a mail link to the Webmaster of ABC Corporation.

    graphics/ar01fig21.jpg

graphics/note_icon.jpg

If you receive the message "Microsoft Project could not open this file or could not parse a file of this type" when trying to reference a bookmark within a Word document while creating a hyperlink to a task, then see "Using the Bookmark Feature When Creating a Hyperlink" in the "Troubleshooting" section at the end of this chapter.


Displaying a Gantt Chart Image in a Project Web Page

In addition to publishing project data to an HTML file, you might also want to include a picture of the project's Gantt Chart with your Web page. This section walks through all the steps that allow you to accomplish this.

To add a picture of a project's Gantt Chart to an HTML file, do the following:

  1. In Microsoft Project, open the project you want to save as an HTML file.

  2. Click the Select All button to highlight every task in the project, or you can apply the same filter that your export Map uses and then click the Select All button. You may want to use the Zoom command on the View menu to adjust the Gantt timescale to fit the screen. Then, click the Copy Picture button in the Standard toolbar. The Copy Picture dialog box appears (see Figure 22).

    Figure 22. The Copy Picture dialog box allows you to create a graphic of a project's Gantt Chart to display on a Web page.

    graphics/ar01fig22.jpg

  3. In the Copy Picture dialog box, set the Render Image option to To GIF Image File. By default, Microsoft Project sets the path for the image to be the same location as where you saved the project file. The filename for the image is set to the name of the project, with the extension .gif . You can change the name and location for the file, but the default path and filename should be fine as is.

  4. Because you selected all rows in step 2, if you want to create a picture of the Gantt Chart that displays every task in the project, select the Copy Selected Rows option. If you want to display only the tasks that are visible on the screen, select the Rows on Screen option.

  5. To include the timescale that is currently displayed on your screen, from the Timescale option, select As Shown on Screen. If you want to display the timescale for a particular date range, set the From and the To dates to the desired dates.

  6. Click OK, and Microsoft Project creates a GIF image file of the Gantt Chart.

  7. Select File, Save As Web Page. The Save As dialog box appears.

  8. From the Save As dialog box, navigate to the directory in which you want to save the HTML document. Type the name of the HTML document in the File Name field, and click the Save button. The Export Wizard opens.

  9. From the wizard, select the map you want to use for this export, or create a new map.

  10. From the Export Wizard Map Options dialog box, select the Base Export on HTML Template check box and click the Browse button to select the Project HTML template you want to use for this export.

  11. Select the Include Image File in HTML Page check box and click the Browse button to select the graphic of the Gantt Chart.

  12. Click the Next button to advance through the wizard. Click Finish on the last step of the wizard to save the project data to an HTML document.

  13. Start up your Web browser and open the HTML document you created in this example (see Figure 23). The Web page now displays with the Gantt Chart graphic you selected.

    Figure 23. The HTML document displays with a graphic image of the Gantt Chart.

    graphics/ar01fig23.jpg

graphics/note_icon.jpg

If you're using the Copy Picture feature of Microsoft Project to capture an image of a Gantt Chart, and you are not seeing all the tasks in the image, then see "Problems with the Copy Picture Feature" in the "Troubleshooting" section at the end of the chapter .


 < Day Day Up > 


Special Edition Using Microsoft Office Project 2003
Special Edition Using Microsoft Office Project 2003
ISBN: 0789730723
EAN: 2147483647
Year: 2004
Pages: 283
Authors: Tim Pyron

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