PixelMill's Learning Center for Microsoft (R) FrontPage (R)
take our guided template test drive for FrontPage 2002 & FrontPage 2003
knowledgebase | sample sites | reference
Guided Test Drive - Dynamic - DWT Web Package

Classic Test Drive

Dynamic Test Drive Tutorial
- DWT Package
- DWT Web Package
  · The Basics
  · Navigation
  · Images and Graphics
  · Publishing
  · Finished

The Dynamic Test Drive Tutorial

FrontPage 2003 - The Basics

At this point, you should have:

  • A trial or registered version of FrontPage 2003
  • A sample template downloaded from our web site

1. Install the template.

  1. Unzip the .zip that you downloaded to a folder on your computer.
  2. Inside the folder is an .exe file. This is the template installer.
  3. Double-click the template installer.
  4. Follow the prompts to install.

2. Create a new web site using the template.

  1. Open FrontPage 2003.
  2. Go to File > New.
  3. In the right column, click "More Web Site Templates..."
  4. Click the "My Templates" tab.
  5. Select the web template that you downloaded.
  6. In the right column, where it says "Specify the location of the New Web site," make a note of the location and change it if necessary. (learn more about this...)
  7. Click OK. FrontPage will begin creating your web site.
  8. If publishing to a new folder that you have specified, there may be a prompt asking if you want to create a web at that location. Click OK.
  9. When FrontPage is done, you should be able to view the new files and folders in your Folder List.

3. Open a page and edit.

  1. Double-click on a page in the Folder List to open it for editing. The page will open in your main window area. You will be able to see the table lines that define the structure of the layout, which may offset the layout and images a little bit so that they look slightly skewed. This is normal - don't worry!
  2. Adding your own content to the page is as easy as highlighting the text you want to replace and typing over it. You may edit any include pages that are inside the Editable Regions. You'll notice that you won't be able to edit anything that is outside of the Editable Regions - don't worry, you'll learn that soon!

    Figure 1


    Figure 2

     
  3. You will notice that the file name in the tab now has an asterisk (*) by it - this means that you have made changes but have not yet saved.


     
  4. Go to File > Save (Ctrl-S) to save your document.

Notes and hints...

  • To get "headings," use the style drop-down menu. This is the first dropdown menu in your toolbar.
  • Use "bold" and "italics," but stay away from underlining text. This makes the text look like it's a link, which is confusing to users.
  • To get sub-bullets, click the "indent" toolbar button twice.

4. Preview your page in a browser to view your changes.

  1. Go to File > Preview in Browser.
  2. Choose the browser you wish to use to preview your page. You may click the "Add" button to add more browsers (Netscape, Opera, various versions, etc.)

     
  3. A browser will open with your web page in it. This is what your page will look like on a live server! The only exception is with forms, hit counters, and other special components that need a web server to function. You can click on the buttons to browse your web site and to see what the other pages look like. At this point, you might want to read the content in the other pages of the site because they have a lot of helpful information.
  4. You may have noticed that in FrontPage, there is a "Preview" button at the bottom of the screen. This is a "quick" preview; however, you must realize that some things may look funny in FrontPage's preview, and that rollover buttons will not work. If you want to see what your web will look like on a live server, you should always go to File / Preview in Browser.
  5. It is probably a good idea to keep the browser window open while you are working on your web. When you make changes, save in FrontPage, then go to the browser window and hit the Refresh button to reload the page with your changes.

5. Edit the DWTs to add your own copyright info and logo or name

If you want to edit the logo image, copyright statement, or some other aspect of the underlying Dynamic Web Template, you will have to actually open the .dwt file. Please note that changing the underlying .dwt will change ALL OTHER pages that are based on that .dwt file, so you should only make changes like adding your logo image or changing the copyright statement.

  1. In the upper right corner of the page, FrontPage displays which DWT is being used and where it is located.


     
  2. Browse to this file and open it in FrontPage. You'll notice that the layout is there, but the Editable Regions only show comments.


     
  3. Make changes to the logo/name area, copyright statement, and any other areas that you want to modify with your own information.
     
  4. Save your file. A dialog box may appear asking if you want to update the attached pages. Click Yes.


     
  5. After updating attached pages, another dialog box will show that the pages have been updated. Click the Close button.


     
  6. If you have pages open that have this DWT attached, you may also need to save them for the changes to apply. You may edit the other DWTs as necessary.

6. Make a hyperlink

If you are typing a url such as "www.yoursite.com" and "http://www.yoursite.com," or an email address like "youremail@youremail.com," FrontPage will usually automatically create a hyperlink out of it. However, you can also create hyperlinks out of words, phrases or images.

  1. Select/highlight the word, phrase, or graphic that you wish to hyperlink. Then go to Insert/Hyperlink or click the "Insert Hyperlink" button on the toolbar.
  2. The "Insert Hyperlink" dialog box will appear.
    • Click the buttons on the left to link to a web page, a bookmark, a new page, or an email address.
    • Or, browse your current web or the internet to find the page you want to link to, or simply type in the url or path name.
    • Click "Target Frame" to specify if you want your link to open up in the same window, a new window, or a specific frame (if your web uses frames).
  3. After specifying your link parameters, click "OK." You may always right-click on your link and select "Hyperlink Properties" to change them.

Next: Navigation