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
• Frames
• 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 hearers 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..."
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 information to this border like contact your information.

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) you need to inform it of your logical structure.  The Navigation View 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 it's 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 cyan 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).

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.

Exercise: Click back to the page view and open one of the pages you added 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 to 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
4. Add text and space to format and explain your form as you insert form elements.
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 form.
     • Saving to additional/multiple files
     • Subject and Reply-to lines for email output.
     • Send browsers to a "confirmation" page that allows you to give specific, post-form information to browsers who use your form.
     • 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 favorite 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.

1. Click on the "Format" pull-down menu and select "Theme..."
2. Form the theme popup window, click on the name of a theme (or three).
3. Experiment with the four check boxes at the bottom left of the popup window 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 "Modify" button at the bottom of the Themes pop-up window.

Note: In the top left corner of the popup window, that themes may be applied to all pages or merely to the current page being edited.

Note: Banner and Button text is generated by a theme from the titles of the pages in question.

• 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 the button links too.
• By default, banner text is taken from the title of the page the banner appears on.

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

• Frames are not universally supported by web browsers; so consider your audience before using them.
• Frames offer different navigation options for those who browse your site, as opposed to standard hyperlinks that open a new page where the old one was.
• Often times people create the frame set as the index.html file and link to all their content from there.  Let's look at what this does for us:
  • We get one URL for the whole site.
  • So, what's happening within each frame (hyperlink "targets" and frame "names")?

Exercise: Follow along as I highlight the steps below; experiment.

1. Go to the File menu and select "New" and then "Page or Web..."
   Front Page has a lot of preformatted pages available to you.
2. Click the "Page Templates..." option from the "New Page or Web" navigation bar
   
3. Click the "Frames Pages" tab at the top of the "Page Templates" popup window.
4. Single click a few of the possibilities to see examples displayed in the bottom right corner of the popup window.
5. Click "Okay" when you have selected the frame set you like.

• Frame sets consist of all the pages you see plus one; this last page tells the framed pages where/how to display.  So, if you chose a frame set with top and bottom frames, the pages involved are:
  • the content page for the top frame,
  • the content page for the bottom frame
  • and the page that describes what the top and bottom frames are like. 
    Make sense?
• In the frame set we just created, above, you may now set the initial page to load in each frame (or you may create a New Page for that frame) by clicking on the appropriate button within that frame.  Please do this now.
• Once you have created your frame set and designated content pages, you may just open the frame set in Front Page and you will be able to save changes for each frame (all at once)... though saving takes longer when you are technically editing three or four pages.
• You may also resize the frame borders to make a frame smaller of larger... just click, hold and drag them to where you want them.

1. Right click in any of your frames and select "Frame Properties"
2. We will go over the "Frame Properties" popup window in class:
   
   • Consider options like:
     • whether or not the borders should show scrollbars
     • or be resizable by the people browsing your site
     • how thick they should be or whether they should even be seen by web browsers.

Consider this example; note:

• invisible frame borders
• scrolling
• do all links load content into a frame?

http://www.csusm.edu/anniversary/

• 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.
• 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 "Hover Button..."
  3. Type in the button text, select font and link location.
  4. Color, effect, 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_f02/fp3.html
maintained by Garrett Collins (garrett@csusm.edu)
for Academic Computing Services, Web Application Support team

Last updated Tuesday, September 07, 2004 10:00:20 AM