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.

• Saving & Naming Pages
• Creating links
• Images
• Backgrounds
• Tables
• Forms

Hint: When designing web pages, keep Front Page open as well as a web browser (so you can see the pages you're saving on the server, to be sure that everything looks/works as you want it).

RECOMMENDED READING:

• INSTRUCTIONS ON HOW TO MAKE A 10 PAGE WEBSITE IN 50 MINUTES

1. First, open a new page:
   1. Use the new page icon on the toolbar, type [Ctrl + n], or the pull-down menu: File > New... > and select "Blank Page" from the right-hand-toolbar that appears.
2. Use the save icon on the toolbar or the pull-down menu: File > Save
3. Name your files something descriptive but short (names affect URL lengths and users' typing time); never use spaces or non-alphanumeric characters in file names.
   • syll.html, syllabus.html, syllabusfall00.html, syllabus_fall00.html, syllabus_fall_00.html, etc.
   • htm vs. html suffix
   • The "index.html" file is your first or "top" page in the hierarchic structure of your web site.
   • File name vs. Page Title vs. Title within the page
   • Special characters: alpha-numeric characters are always fine; other than that, only dash and underscore are recommended.
4. Use the "Change title..." button to give your pages informative titles that are used by search engines and browser history lists.
5. Be sure you know where you saved your page (and, using your web browser, double check that everything looks/work right).  Be aware of the default "Save in:" location and remember where you left your file(s).

Note: There is a "Save All" option (in he File menu) that will save all your open, modified files at one time.

Exercise: Save an index and two additional pages on the web server.

Troubleshooting: What if you save a change to your page and it doesn't appear when you look using your web browser?

1. Select the object (image or text) that you want to become the hyperlink and then use the toolbar shortcut to open the "Insert Hyperlink" popup window to select the file you want to link to (remember you can link to an external web page, an image, a sound, a movie, or even a document from Word, Power Point, Excel, etc.).
   
   • "Look in:" Current Folder vs. Browsed Pages vs. Recent Files
     • Be sure you note the default "Look in:" location and remember where you left your file(s).
   • Or you could type in a full URL in the "Address:" box or use the "Browsed Pages" button to see a list of recently browsed pages (to link to pages).
2. Click "OK"

Note: Your file/folder structure can be different from the logical structure you give to your pages. [draw example on board]

Exercise: Create a link to the campus home page.  On your index page, create links to each of the other pages you created.  Create a links from your other pages, back to your index page.

There are two kinds of links that don't link to a whole new page: Bookmarks and Email links.  

A bookmark link (also called target links) is a link to a specific place in a page (often the same page that the link is on), like the links at the top of this page that jump users down to a specific topic lower on this page.  Creating bookmark links:

1. Create the bookmark.
   1. Select the text (or insert your cursor) where you want the link to jump to.
   2. Insert > Bookmark... (ctrl+g)
   3. Make sure the "Bookmark name" is as you want it and click "OK"
      Note: If you selected text to be the bookmark, it has broken underlining now.
2. Create the link to the bookmark.
   1. Select the text that will be the link (to the bookmark you just made).
   2. Insert > Hyperlink... (ctrl+k)
   3. Single click to select the page where the bookmark is (or type the full URL in the Address: field), and click the "Bookmark..." button (on the right side of the Insert Hyperlink pop-up window).
      Note: If the bookmark is on the same page as your link, you can just click the "Bookmark..." button.
   4. Select the bookmark from the list on the "Select Place in Document" pop-up window.
   5. Click OK; click OK again.

Note: The decision to make one long page with a table of contents and bookmarks or many smaller pages that are linked from a table of contents page depends on your intentions for the site and the needs of your users.

"Email Address" links, not to a page or file, but open an email window (using the end-user's default mail application) to the email address you specify.  Creating email links:

1. Select the text that will be the link.
2. Insert > Hyperlink... (ctrl+k)
3. Under the "Link to:" section in the Insert Hyperlink pop-up window, select E-mail Address.
4. Type the address you want to be emailed if this link is used in the "E-mail address:" field.
   Note: You can also type a default subject for the email in the "Subject:" field.

Exercise: Open a new page and make a table of contents and bookmarks and add an email link (and set a default subject) at the bottom for contact information. 

Note: There are reasons to type the full email address on the page, like printability.

Where do images come from?  You can either create images using an image editing application or you might get completed files from a graphic designer (or the web).

To capture images from existing web pages:

1. Open a web browser and find the image you want
2. Right click the image and select "Save Picture As..." (if you're using Internet Explorer) or "Save Image As..." (if you're using Netscape/Firefox, etc.). 
3. Save the image to your local disk (I like to save to the desktop) using the popup window that opens.

Exercise: Save an image from the web to your desktop.

To import saved images from a local disk to your Front Page web:

1. Open your Front Page web (or make it the active window on your screen).
2. Hold down the "Windows" key (between the Ctrl and Alt keys) and type an "e" to launch Windows Explorer.  Use this popup window to find the image you have on your local disk (on your desktop).
3. Click-hold and drag the image icon to your front page web/folder (that is still visible behind the windows explorer window); unclick when your cursor shows a "+" in the web location you want this image to be imported to.

Optionally you can use the menu: File > Import... and "Add File..." and/or "Add Folder..." till you have selected all the images/folders you want to import into your web, then click the OK button.

Exercise: Drag and Drop or Import the image (you just saved to your desktop) into your web.

Note: This process of importing images (either using the File menu or by Dragging and Dropping) can be used to import any file (.pdf, .rtf, .xls, .doc, .mov, anything you want to link to (even if it is not able to be displayed by a web browser)).

Inserting images into your web pages:

1. Place your cursor in your HTML page where you want the image and use the tool bar shortcut then  use the "Picture" popup window to select the image you want
   
2. Click "Insert"
   • Note the default "Look in:" location and remember where you left your file(s).
   • Also note that ADA compliance requires we add ALT (alternative) text descriptors to "show" images to web users employing screen readers because they have trouble seeing the image itself.

Thumbnailing Images (linking smaller, faster loading images, to larger versions of themselves):

1. Once you have inserted an image into your HTML page, right click it.
2. Choose "Auto Thumbnail;" Your image will automatically be sized and linked to the larger version of itself.
   Note: When saving your page, you will be prompted to Save Embedded Files; this is the thumbnail Front Page just made for you.  Note the name of the thumbnail (will be something like: OriginalFileName_small), the folder it will be saved in and the action Front Page will take.
3. Click OK when you are ready.

To add alternative (ALT) textual information:

1. Right click the image you just inserted into your web page and select "Picture Properties..." from the pop-up menu.
2. Click the "General" tab at the top of the pop-up window.
3. In the box labeled "Text:" type a short, description of the image (this is what users employing screen readers will hear instead of seeing the image).  Be sure the check-box next to the word "Text" is checked.

Note: How download time is affected by the addition of images.  Front Page tells you, in the bottom right corner of the window, how long the page you are editing will take to download.  You can click the time to change the network size.

Exercise: Insert an image (that you just imported into your web) into one of your web pages.  Be sure to add ALT text.

• Page Text & Background:
  1. To modify the default  and/or colors of your web page: go to the menu: File > "Properties..."
     or right click anywhere in your page and select "Page Properties..."
  2. Click the "Formatting" tab, at the top of the "Page Properties" popup window that appears, to set a background image and/or customize your page colors.
• Hyperlink colors:
  1. Link color, like text color, should strongly contrast with the background, and be easily differentiated from the normal text color, for browsing ease.
  2. Link color may be changed from the same "Formatting" tab at the top of the "Page Properties" popup window, as above.
• Specific text may be assigned a color too. 
  • Just like in Microsoft Word, you may select the text you'd like to color and use the font-color shortcut on your toolbar to select the color
    • Click on the "More Colors..." option:
      • We will discuss both Select and Custom buttons in-class
      • We will talk about Hexadecimal and RGB values in-class
  • Or you may use the "Format", "Font" pull-down menu... notice the other cool styles available with this option.

Exercise: Change the background and text color of one of your pages and then select some text and change its color.  Change the background of a different page to be an image.

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

• Create your table
  1. Insert the cursor where you want the table.
  2. Use the "Insert table" icon from the toolbar to select the number of columns and rows you want for your table.
• Merging and Splitting Cells: sometimes you want a cell to span a portion of your table.
  1. Click-hold and drag to select the cell(s) you would like to manipulate (only one cell if you are splitting, multiple cells if you are merging).
  2. Right click on the selected area and, using the "Table" pull-down menu, select either "Merge Cells" or "Split Cells..." as you desire.
• Selecting, adding, and removing columns and/or rows
  • Rows and/or columns are inserted where your cursor is currently blinking in the table.
  • You may right click where you'd like to insert rows/columns (that have the same characteristics as the "parent" row/column) and use the pop-up menu...
  • Or, to add a new row, when you are in the last cell of the last row of your table, simply strike the "Tab" key and Front Page will insert a row (below) just like the row your cursor is in.
  • To remove only the contents of selected rows/columns: use the Delete key.
  • To remove the selected rows/columns as well as their contents: use the Backspace key.
• Inserting tables within tables
  • Tables may be inserted in the cell where your cursor is currently blinking (just like inserting any other table).
  • This allows you even more possibilities for formatting your content; experiment with this.
• Table Properties
  • I'll go over the popup window, but experiment on your own.
    
  • Note: Many of the same attributes may be assigned to specific cells, in addition to the whole table.
• Cell Properties
  • I'll go over the popup window, but experiment on your own.
     

Design Note: Consider the difference between a table used for layout purposes and one used to triangulate data (like a phone book, or multiplication table); look at the benefits of defining "Header cells" for screen readers.

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.

Please fill out the evaluation for this course.