A few definitions:

• Server: a computer that is tasked with serving multiple users and with performing multiple, (almost) simultaneous tasks. [draw]
• The Internet: The series of interconnected computers that allows information transfer based on standardized protocols. [draw]
• The World Wide Web: The profusion of HTML pages that are stored and are accessible via the network of the Internet. [draw]
• HTML: Hyper Text Markup Language... and hypertext is just dynamic text that allows linking (or pointing) to another piece of text... like end or foot notes do.
• URL: Universal Resource Locator... the unique address of a web page (general to specific, right to left):
  http://www.csusm.edu/garrett/electures/tulip01/index.html
  Like: country, state, county, city, street, and number.
• Script: a non-compiled series of commands and logical conditionals that waits on the server to "do something" like: process and/or save and/or pass on information passed from a web page.
• "Web Page" vs. "Web Site": a page is a single HTML file that may have any number of "imbedded" images, sounds, movies, etc.  A site is a group of contextually related web pages.
• Browser: 1) a web browser; software that translates and displays hypertext documents. 2) a person who uses a web browser to "surf" the web.
• The Americans with Disabilities Act (ADA) of 1990: The ADA recognizes and protects the civil rights of people with disabilities and is modeled after earlier landmark laws prohibiting discrimination on the basis of race and gender. The ADA covers a wide range of disability, from physical conditions affecting mobility, stamina, sight, hearing, and speech to conditions such as emotional illness and learning disorders.  For the full text: http://www.access-board.gov/about/ADA.htm

Requesting web space at CSUSM (project/purpose oriented):

• For a class (non-WebCT): Please use our form to request space for your classes on our campus servers.  The naming convention is: program+number+instructor initials (e.g.: psci358kb).
• For a faculty site/page: When you email webmaster@csusm.edu to request space for your faculty home page on our server "www.csusm.edu" we use Front Page to manage the campus site to make room for you; we create a Front Page Web, usually based on your user ID (e.g.: kbolton).

The remainder of this training presupposes that you will be using a Windows OS (not a Macintosh); this is because Front Page 2002 is only available for Windows.  I don't know why I feel compelled to apologise at this point (for something that is solely the fault of Bill Gates); but, I'm sorry.

Logging onto your web space:

1. Open Front Page 2002 from your "Start" menu (bottom left corner of your desktop).
2. You'll see the default screen.
   
3. Select "Open Web..." from the File pull down menu and fill out (or select the web you'd like to work on and click "Open")
   
4. Enter your "Name:" and "Password:" for this web (usually this is your email login name and password) and be sure the "Save this password" check box is not checked, then click "Okay".
   
5. Now you will see your Front Page web files and folders.
   

• Explain Front Page "Views" and the three frame structure; note standard Microsoft toolbars.
• Go over some cool stuff like:
  • The "tabs" for multiple pages, in page view.
  • The "Type a question for help" in the upper right corner.
• And some changes like:
  • Tools > Server (instead of Tools > Security) to edit the web's permissions and to change your Front Page password (Don't forget you might have to use the two inverted chevrons to get all the options from a pull-down menu.)

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

Saving and naming files:

1. Use the save icon on the toolbar or the "Save" option from the File pull-down menu
2. 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.
3. 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).
   • What if you save a change to your page and it doesn't appear when you look using your web browser?

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

Importing text:

1. In any document, web page, or application that allows you to: Select, Copy, place cursor, and Paste.
   • Be aware of spacing inconstancies.
   • Format as you like, using the toolbar and "Format" pull-down menu.
2. Use "Open..." under the File pull down menu to open a text, Word, Power Point, Excel file stored on a local disk (be sure you are looking for "Files of type" "All Files" or you'll only see "Web Pages" by default).

• When using copy & paste (especially from any Microsoft application) I am plagued with formatting/translation issues (my pasted text looks/behaves strange/ly).  So, I recommend authoring your web documents in Front Page and  formatting after you have the content; or, if you want to keep the formatting of an existing Word document, save it as RTF and then copy and paste your text into Front Page.

Exercise: Type some text on your "index" page; now go to a web page and copy & paste some text (try and get a hyperlink) into your index page.  Note formatting of pasted text.

Importing images:

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 "Okay"

• Note the default "Look in:" location and remember where you left your file(s).
• Also note that ADA compliance requires we add alternative text descriptors to "show" images to web users employing screen readers because they have trouble seeing the image itself.

To add this alternative textual information:

1. Right click the image you just inserted into the 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).

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).  Then save to image to your local disk using the "Save As..." popup window that opens.

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

1. Open your Front Page web (or make it the active window on your desktop).
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.
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 where you want this image to be imported to.

Exercise: Go to an existing web page and save an image to your desktop (or use one of your own).  Import the image into your Front Page web and then insert it an one of your pages.  Be sure to add ALT text.

Creating hyperlinks:

1. Select the object (image or text) in your HTML page 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, an internal HTML page, or even a document from Word, Power Point, Excel, etc.).
   
   • "Look in:" Current Folder vs. Browsed Pages vs. Recent Files
   • You might want to "Link to:" an "Email Address"
   • Or you could type in the full URL for the linked to page in the "Address:" box.
2. Click "Okay"

• Note the default "Look in:" location and remember where you left your file(s).

Color:

• Page Text & Background:
  1. To modify the default colors of your web page: go to the File menu and select "Properties..." or right click anywhere in your page and select "Page Properties..."
  2. Click the "Background" tab at the top of the "Page Properties" popup window that appears.
  3. This is where you may set a background image and customize your page colors.
  • Note: Background and text colors should have high contrast (see royal blue and black for a bad example, black and light yellow for a good example).
  • Note: you may use an existing page as a template (this saves a lot of time if you set your index as the template... then if you change the color on that one page all your pages follow suit).
  • Note: some options, like hyperlink rollover effects only work in certain web browsers.  Always test your pages in a variety of browsers (and versions) and operating systems to see how they look.
• Links:
  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 "background" 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
  • Or you may use the "Format", "Font" pull-down menu... notice the other cool styles available with this option.
• Look at the "More Colors..." option:
  • Select and Custom buttons
  • Hexadecimal and RGB values

Chuck created a resource that allows you to see a range of colors (a mixture of the Macintosh and Windows color palets) and their hexadecimal and RGB values:
http://www.csusm.edu/garrett/resources/goodclut.gif

Exercise: Change the background and text color of one of your pages and then select some text and change its color.

Tables:

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

• 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. 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 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.
• 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.
    
  • Also note that many of the same attributes may be assigned to specific cells, rather than the whole table.
• Cell Properties
  • I'll go over the popup window, but experiment on your own.
    

Directory structure:

• Files: they can be named anything (within the guidelines we covered in Saving and naming files).
• Folder /directory/sub-directory

Second Session

Design Issues:

• All things not being equal, web pages look different in different browsers.  This is an issue for several reasons:
  1. The web content/viewing is controlled by the end user, in many cases: Font size, color, image display, execution of applets, etc.
  2. Different browsers implement the HTML "standard" differently.  Not all styles are allowed by all web browsers.
• This is a good thing... this dynamism allows browsers to browse the web as they desire/need (i.e.: vision, workspace management, security, etc).
• So, don't get too attached to your formatting.
• For times when you, as the author, need to retain more control you may use Cascading Style Sheets (CSS).
  Here's a good introduction to CSS by the folks at WebMonkey:
  http://hotwired.lycos.com/webmonkey/98/15/index0a.html

Topics covered below this point in the lecture, will not work well with pages being developed for WebCT courses.

A few words about WebCT:

WebCT users who use Front Page (or any HTML editor) to create content pages should be aware of a few important issues these editors introduce:

• Layout/Navigation (has to/can be organized in Front Page, follows a proscribed path in WebCT)
• webbots, Shared Boarders, themes (don't work without a Front Page server... WebCT does not have the Front Page extensions installed on it)
• index.html (a needed "starting place" in Front Page... it doesn't exist in WebCT)
• JavaScript/Java (hover buttons) often cause conflicts in WebCT
• Automatic directory structure linking (Outline structure of WebCT vs. more "webby" possibilities in Front Page)
• _vti_* (system directories in Front Page, not needed in WebCT)
• Protection: .nsconfig vs. WebCT user profiles/accounts
• Frames (WebCT users frames too... so you may have frames within frames)
• Authoring locally vs. on the Front Page server (need to "Upload" files to WebCT server).

On with the Front Page instruction...

Forms:

So far we've been placing 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.

To insert a form within a web page:

1. Consider the data you want the browser to submit.
   • Web forms have several possible form fields:
     • Text box
     • Scrolling text box
     • Radio button
     • Check box
     • Menu
     • (there are a few more, as you'll see)
2. Most forms begin with the browser inputting their name so we'll begin here.
3. Be sure you have a web page open.
4. Place your cursor where you want the form to be.
5. Go to the "Insert" menu and select "Form" and "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.
6. Add text and space to format and explain your form as you insert form elements.
7. Double click each form field to name it something meaningful to you (and to set any special attributes of this particular field).  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.
8. When you have your form completed, right click on it and select "Form Properties..." to tell Front Page what to "do" with information that browsers will submit
9. Consider the Form Properties popup window:
   
   • You may send input to a file, an email address (or both).  Advanced options also allow you to send input to a database or script.
   • 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 (note the "B1" field).
       Note: you may gather additional information here (like date/time, remote computer address, browser type, etc.)

Themes:

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

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

Frames:

• 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.
• Let's consider this example before we begin:
  http://courses.csusm.edu/hist331mj/
• 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:
  • One URL?
  • 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)... 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. Consider the "Frame Properties" popup window:
   
   • 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/

Shared Borders:

• Like Themes, Shared borders may be applied to an individual page or to your entire Front Page web.
• Shared Borders operate in much the same way that Frames do, and for the same reasons.   On servers that run Front Page extensions (like www and courses), Shared Borders may be used to obviate many of the drawbacks of using Frames (like browser incompatibility). 
• How they work:
  • Just like Frames except the server is the only one who knows about all the linkages and it created the final page "on the fly" when it is requested by a browser. [draw a picture]

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

1. From the Format pull-down menu, select "Shared Borders..."
2. Click "Top", "Left", "Right", or "Bottom" on the Shared Borders popup window to start working with shared borders.
3. "Add this page to the navigation display to..."

Double click on a shared border to edit:

• Picture or text
• The displayed text for a banner
• Navigation structure properties (whether to display all "child" pages, "sibling" pages, etc.)
  See "Navigation View", below, for more on navigation structures.
  

Navigation View:

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.   File structure is where files are in relation to sub-directories; the logical structure reflects what you have already been doing when you link your top level page to other pages. [draw a picture of a hierarchic, logical structure]

For Front Page to be able to provide navigation links (via shared borders) you need to build this kind of hierarchy so it knows what goes where regarding the logical structuring of your information.  The Navigation View allows you to dictate this hierarchy/structure.

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 note their relationship to existing files within the navigation structure. 

If you have an index page, it will already be in the navigation structure and will have a "home" icon on its rectangular icon.

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

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)
• and the ability to "Delete"... this gives the choice of removing pages from the logical/navigation structure of your site or removing the actual HTML file.
• Pages may be part of a navigation structure and not appear in navigation bars.

"Components":

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

Last modified August 07, 2002 by Garrett Collins (garrett@csusm.edu).