More Advanced Web Publishing with Front Page 2003

You may print this page if you feel the need.  But we will be updating it as needed; so the online copy will always be most up-to-date.

The topics we will cover in this lecture require a web server that has Front Page extensions installed.

Forms

[ back to top ]

So far you have learned to place information on the web so people can browse it.

Web forms allow us to take information from browsers and "do things" with it via a script.  This allows an additional level of dynamism in our web sites and the browsers' experiences.

Before you begin, consider the data you want the browser to submit.  Web forms have several possible form fields: Text box, Text Area (scrolling text box), Option Button (once called: radio button), Check box, Drop-Down Box (also called menu)... and a few more we won't cover today.

To insert a form within a web page:

  1. Open a web page.
  2. Place your cursor where you want the form.
  3. Use the menu Insert > Form > Text Box
    to insert a text box within a web form.
    Note: the dotted line delimits the form boundary.  Your cursor *must* be within this limen when inserting additional form fields.
    Note: I almost always remove the "Reset" button
    Note: Use your keyboard arrow keys to get your cursor into those hard-to-reach areas.
  4. Add text and space to format and explain your form as you insert new fields.
  5. Double click each form field to name it something meaningful to you (and to set any special attributes of this particular field such as validation and initial value). 
    Note: Data will be stored in named pairs: that is, each form field has a "name" that is paired with any submitted data and passed to the file/email recipient.
    Remember: No spaces or special characters are allowed in field names.
  6. When you have your form completed, right click anywhere inside the dotted line that delimits the form and select "Form Properties..." to tell Front Page what to "do" with information that browsers submit
  7. Consider the Form Properties popup window:
    Form Properties Screen Shot
    • You may send input to a file, an email address (or both).
    • Clicking the Options button at the bottom of this popup window allows you additional possibilities like:
      • How to format the information going to the email and/or data file.
      • Saving to an optional, second data file.
      • Subject and Reply-to lines for email output (under the E-mail Results tab).
      • Send browsers to a "confirmation" page that allows you to give specific, post-form information to browsers. This confirmation page cannot be a second form; but it can link to a second form.
      • Saved fields tab (you may not want to save the "B1" field since this is the default name of the Submit button).
        Note: you may gather additional information here (like date/time, remote computer address, browser type, etc.).

Exercise: Add a simple form to one of your pages; use at least of each of the form fields we talked about (consider my example, below, if you are having trouble thinking of uses for each field type).

Note: You may check out my pizza form that uses tables for layout.

Shared Borders

[ back to top ]
  • Shared borders may be applied to an individual page or to your entire Front Page web.
  • They operate in much the same way that footnotes and headers work in Word documents.
  • How they work:
    • They place the contents of a "shared" page at the top, right, left, and/or bottom of each web page you tell to use shared borders in your web.  This allows you to change the shared page once, and all your footers will "share" this new information.
  1. Open a page in your web that you would like to use Shared Borders.
  2. Use the menu: Format > "Shared Borders..."
    • Is the Shared Borders option grayed out?  Now is your chance to use the Front Page help search.
  3. You may click "Top", "Left", "Right", and/or "Bottom" on the Shared Borders popup window to start working with shared borders.  Click OK when you have selected the boarders you want to share.
    Note: The "Apply To:" radio button that dictates whether you share borders on only the current page or all pages.
  4. The purple text that appears in each shared border (delineated by the dotted line(s) that now appear on your web page) may be selected and replaced with the text that will appear on all of your pages that share that border.
  5. Single click the purple "Comment" text in a border and start typing (or paste) to start working in that border.  You may add anything you add to a normal web page to a shared border (images, tables, text, etc.)

Exercise: Select a shared border for the Bottom of all your web pages and add your contact information to this border.

Navigational Component

[ back to top ]

The Front Page "View" for "Navigation" is simply a way of imposing a logical structure (within Front Page) for your files as they are saved on the server.  

This logical structure reflects what you have already been doing when you link your top level page to other pages.  For Front Page to be able to provide navigation links (in shared borders, or otherwise) you need to inform the program of your logical structure.  Under the View menu, selecting "Navigation" allows you to dictate this hierarchy/structure.

To add pages to the Navigation View

  1. Your index page will already appear in the Navigation View (it has a little house icon on its square)
  2. To add additional files, click and hold on files from the "Folder List" frame in Front Page, drag and drop them into the light blue frame (on the right) in Front Page; and note their relationship to existing files within the navigation structure. 
  • Pages above the current page in question (in the hierarchy) are "parent" pages.
  • Pages on the same level are "siblings"
  • Pages below a page are "child" pages.

Exercise: Add a few of your pages to the Navigation View.  Note the text that appears in the box for each page; note the way the relational lines order each page in terms of its relation to the overall structure.

You may right click on a page in the navigation structure to effect it further.

  • Especially note the ability to Rename; this affects the text that appears on navigation buttons as well as changing the "Title" information of the page.
  • Note the ability to Delete; this gives the choice of removing pages from the logical/navigation structure of your site or of removing the page from the web entirely.
  • Pages may be part of a navigation structure and not appear in navigation bars (if you add links to them but do not add them to the Navigation View).
  • You can add pages to the Navigation View and then right click and deselect "Included in Link Bars" to not display that page in navigation bars.

When you use the Navigation View in conjunction with Shared Borders you add additional functionality to the way your pages are displayed.  To insert a navigation scheme, that will appear in all your Shared Borders, based on the Navigation structure:

  1. Add a shared border for the left side of your page(s)
  2. Single click in the left border
  3. Use the menu: Insert > Navigation... with the Component Type: "Link Bars" and your chosen bar type is "Bar based on navigation structure"
  4. Then click the Finish button and use the Navigation Bar Properties pop-up window to set the parameters you want
    Link Bar Properties Screen Shot

To edit an existing navigation structure, simply double click on it and modify it using the Navigation Bar Properties pop-up window (pictured above) when it appears.  Navigation structures may be formatted just as you would any other text.

Exercise: Open one of the pages you added/dragged to the Navigation View.  Add a Navigation Link Bar to one of its Shared Borders.

Themes

[ back to top ]
  1. Click on the "Format" menu and select "Theme..."
  2. Form the task pane (that appeared on the right of your Front Page window), click on a theme (or three).
  3. Experiment with the three check boxes at the bottom of the theme task pane and see how combinations affect the selected theme, in your page.
    • Active Graphics will create "rollover" effects for your theme's buttons.
  4. You might also look at/experiment with the "Create new theme..." link at the bottom right of the theme task pane.

Note: To turn themes off, simply select the "No theme" box at the top of the scrolling frame in the theme task pane.

Note: When you mouse over a theme in the theme task pane, a blue bar and downward facing arrow will appear (to the right of that theme).  Click on this to choose which pages to apply this theme to (as default (to all pages in your web) or to selected pages (the one you are currently editing)).

Note: Banner and Button text is generated by a theme from the titles of the pages in question.  You have to use Front Page Navigation to insert a page banner.

  • Remember when we covered the page title?  Recall how important page titles were?
  • By default, button text is taken from the title of the page that the button links to.
  • By default, banner text is taken from the title of the page that the banner appears on (as it is set in the Navigation view).

Exercise: Choose a theme for your web, apply it to all pages.  Note how this changes navigation bar buttons.

Front Page "Web Components"

[ back to top ]
  • Hit Counter
    1. Place your cursor where you want the "hit" counter for this page (this will display the number of times your page has been requested from the server).
    2. Go to the Insert pull-down menu and select "Web Component..." and select "Hit Counter" from the possibilities.
    3. Select style and presets and click Finish.
  • Hover Button
    1. Place your cursor where you want the hover button.
    2. Go to the Insert pull-down menu and select "Web Component..." and "Dynamic Effects" and "Interactive Button"
    3. Choose a button style, type in the button text, select font and link location.
    4. Color, effect (preview the effect on mouse-over in the Image tab), etc.
  • Banner
    1. Place your cursor where you want the banner (maybe in a top Shared Border)
    2. Use menu: Insert > Page Banner
    3. Experiment with Picture vs. Text (what does the banner look like with a Theme and without one?)

Please fill out the evaluation for this course.

[ Designing for the Web ] [ Front Page 2003 ] [ Dreamweaver 8 ]
[ More Advanced Front Page 2003 ] [ Introduction to Photoshop CS3 ]

This page http://www.csusm.edu/garrett/electures/AdvancedWebPublishingWithFrontPageF07/index.html
maintained by Garrett Collins (garrett@csusm.edu)
for IITS, User Support Services

Last updated Wednesday, February 13, 2008 09:26:05 AM