Web Publishing (with Front Page) III

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.

• Shared Borders
• Navigational Component
• Forms
• Themes
• Front Page Components

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

• 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.

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 (via shared borders, for instance) you need to inform it 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 affect it further.

• Especially note the ability to Rename; this affects the text that appears on navigation buttons in shared borders 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 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
   

To edit an existing navigation structure simply double click on it and modify it using the Navigation Bar Properties pop-up window when it appears.  Navigation structures may be formatted just as you would 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.

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 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:
   
   • 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.
     • Saved fields (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; gather a browser's: Name, if they want bread-sticks (yes or no), let them tell us their preferred pizza toppings (they may choose more than one from the list), allow them to choose whether they are Faculty/Staff/Student from a drop-down menu, and let them make general comments.

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

1. Click on the "Format" menu and select "Theme..."
2. Form the theme popup window, click on the name of a theme (or three).
3. Experiment with the three check boxes at the bottom right of the theme window-insert and see how combinations affect the selected theme.
   • Active Graphics will create "rollover" effects for your theme's buttons.
4. Also look at/experiment with the "Create new theme..." link at the bottom right of the theme window-insert.

Note: When you mouse over a theme in the theme window-insert, 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.

• 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.

[ Web Publishing I Notes ] [ Web Publishing II Notes ] [ Web Publishing III Notes ]
[ Using the Campus Template and/or META tags ]

This page http://www.csusm.edu/garrett/electures/fp_classes_f05/fp3.html
maintained by Garrett Collins (garrett@csusm.edu)
for Academic Technology Services, Web Application Support team

Last updated Friday, July 07, 2006 08:58:59 AM