Introduction

What is the World Wide Web?
The World Wide Web (often referred to as the Web, or WWW)  is a subset of the Internet.  It is a hypertext-based information system on the Internet. The Web provides access to text, images, full-motion video, sound and other media all connected via hyperlinks.   When you roll over a hyperlink with the mouse the cursor symbol will change to to indicate its presence. 

How does a web page differ from a regular word processing document?
Documents that are published on the World Wide Web are encoded in HyperText Markup Language or HTML which supports hyperlinks.  Thus, the internet can easily be a non-linear domain in contrast to standard text.

What is HTML?  
HTML is a programming language developed in Switzerland to be a world standard for communication on the World Wide Web, the Graphical User Interface (GUI)  portion of the Internet.  It has different characteristics than the code that operates word processing software so different strategies are required to create html documents. 

What is FrontPage?
FrontPage is a software program developed specifically for the creation of web pages and web sites.  It is an html editor in the same way that Word or WordPerfect is a text editor.  Yet while your work in FrontPage appears to be text editing, the software is generating your work in html code.

Basic Similarities and Differences between MS Word and FP 2000

Why use Front Page if MS Word can convert to HTML?
It would helpful if you could use the HTML translator in Word to create html files from all your pertinent existing files (e.g. a syllabus, lecture notes).  It will depend upon your goal for the document in your webpage and its formatting.  

Here are some examples of MS Word documents translated into HTML.  I chose documents with text/bullets, text/excel spreadsheet and  text/images.
Example 1    is a translated MS Word document: staff meeting w/bulleted list.
Example 2    is a  translated MS Word doc: contains an embedded Excel file.
Example 3    is a translated MS Word doc with embedded images .

Differences

WORD	FrontPage
document is standard/legal length	document can have infinite length - a scroll
document width = 81/2 inches	document can have infinite width
format using margins, tabs	margins do not exist, format using tables
tracks graphic links for you	you track the graphic links for uploading  or use a FP Web to track the links
enter: single space	enter: double space,  shift-enter:  single space
prints on a page	printing can be inconsistent, use Print Preview, print one page at a time
edit using Show All  or Reveal Codes	edit using the HTML and Preview file tabs

Similarities
The Menu Bars are similar which will help you to feel at home using FP.  All functions that have the same icon work the same way in either application. 

WORD
FrontPage

A Bit of History of Internet Development

July 1961:  Before Internet; "Leonard Kleinrock at MIT published the first paper on packet switching theory." 

August 1968:   "Refinement of the overall structure and specifications for the ARPANET is completed."

September 1969:  "Due to Kleinrock's early development of packet switching theory results in  his Network Measurement Center at UCLA being selected to be the first node on the ARPANET."

Kleinrock was successful and the original ARPANET grew into the Internet. It was based on the idea that there would be multiple independent networks of  open architecture by design.

What is Open Architecture by Design?
In developing an open architecture network, each individual institution's Internet site could be independently designed to meet the common goal of connectivity via the Internet.  Thus, each site was developed in accordance with what worked best for their specific users and existing computer network.  
(Source (with amendments): Internet Society at  http://www.isoc.org/internet-history/brief.html#Origins)

The Result:  Qualified people, working independently at colleges and government agencies  across the country, designed Internet software and several different types of interfaces came into use.

The Problem: 
The internet became a composite of multiple, independently developed sites. While connectivity between each site was assured, knowing what to do once you got there was not.  When venturing outside you own institution's part of the Internet it was impossible to know the conventions of the computer language at another site.   Keystrokes that did one thing at one site either worked the same, did something completely different or nothing at all at another site.  Although many sites shared the same code, it tended to be an application of Murphy's Law as to whether the information you sought was on a familiar or foreign interface.

A Solution: 
1990: The World Wide Web concept is born:  Tim Berners-Lee at CERN in Geneva implements a common system (HTML code) to provide efficient information access to the members of the international high-energy physics community. 

Department of Defense disbanded the ARPANET and it was replaced by the NSFNET backbone.

1992: Internet Society, a group to control the INTERNET, is chartered. 
The World-Wide Web is released by CERN.  

1994: Netscape, a WWW browser is founded by Jim Clark (previous chairman of Silicon Graphics) and Marc Andreessen (co-creator of the Mosaic Internet browser).

1994: Pizza Hut offers pizza ordering on its Web page.

1995: The National Science Foundation announced that as of April 30, 1995 it would no longer allow direct access to the NSF backbone.

1996: Most Internet traffic is carried by backbones of independent ISPs, including MCI, AT&T, Sprint, UUnet, BBN planet, ANS, and more.

Todays Workshop Outcomes

Demonstrate an ability to create a file structure for UW-P web publishing.
Create a Homepage/save the file in the proper directory.
Create a webpage background /save a background graphic in the proper directory.
Create tables for the purpose of containing a header, links, text and graphics.

File Conventions 

General Information 
Your friendly pc will keep track of where it stores all your files and access them for you at the touch of a mouse button.  However, when you publish work to the Internet you will be putting files on another machine, the UW-P web server.  Thus, it is advisable to create a file structure on your office machine that will model or mirror that of the web server.  

                      Statement:  The words  directory  and  folder  will be 
                                        synonymous throughout this document.

About Files
The generic form for a naming files is the following:
filename.ext  

filename:  I suggest you limit it to 8 characters all lower case to improve the odds it 
               will run on all machines worldwide no matter how antiquated the hardware 
               or software.
   
.ext or extension:  The extension is a "code" that lets the computer know what type of 
                            software either created the file or can open and read the file. 

For example, typical word processing files have the following extensions:
.wpd  denotes a WordPerfect file
.doc   denotes an MSWord file

.htm or .html is the extension for Hyper Text Markup Language, or html, the common 
                    language of the WWW. 

Likewise there are a number of extensions that  designate to the computer that the file is an image or graphic file. 
.gif      Graphics Interchange Format
.jpg     Joint  Photographic Experts Group
.png    Portable Network Graphics 
.tif       Tagged Image File Format
.bmp   Bitmap 

Important: Although the first three file types on the list can be displayed on the Internet, only gif or jpg files will be displayed by all possible web browsers.

The computer also uses file extensions to choose icon images.

Using the View-Details Option to Determine File Size

In the C:\ window,  choosing the Details setting on the View pull down menu shows file name, file size, and file type.  Knowing the file size can help you determine the download time.  Try to keep you graphic file size below 10 KB, especially if there are multiple images in your html file. Saving an image using jpeg file compression can help.

The file structure shown  at right is how the web server is structured and at left is how we will organize our files to mirror it.  We will create a  folder on D: and call it "~username".  Important: You must use your e-mail username. A second folder will be created inside ~username.  Call it "images".   You will save all you web pages in the former and all graphic files inserted into those pages in the latter.

Save HTML Files to ~username
Today, when you save your html webpage in FrontPage for the first time you will need to change the save location. To do this you must make ~(your e-mail)username your save destination rather than the default, My Webs.  

HTML filenames are case sensitive and blank spaces are not allowed. Although the length of the name is inconsequential for most web servers, limiting the name to 8-13 characters is advised.

Save Graphic FiIes to images 
All the graphics inserted into your web page belong in the images folder. You have two options:
1- Save the graphic file to the images folder first, then insert it into your webpage.
2- Insert the graphic file into your webpage, then use the FP "embedded graphic files" prompt during a Save to direct graphic files "save destination" to the images folder. (more details to come)

Graphic filenames are case sensitive, blank spaces are not allowed, and names should be limited to 8 characters.

How to Create the Web Folder Structure on Your Disk

1- Double click on My Computer. 2- Double Click on . 3- From the Menu choose File, New,  Folder. 4- Name the folder "~username". 5- Double click on the ~username folder. 6- From the Menu choose File, New,  Folder. 7- Name the folder "images". Alternative Method for Creating Folders

Insert your Zip disk into the drive.

Hands-on Session - Create Two Folders - 5 Minutes
1- Create the ~username folder.
2- Create the images folder within it.  

New HTML Document Set-up 

In this section we will:
Launch or boot the software application FrontPage.
Choose a "Homepage name" for the blank document.
Save it to the correct directory or folder.
Choose a Bookmark name for your homepage.

Launch FP:  Open the FrontPage software by clicking on the shortcut icon .  (If a dialog box appears asking about ". . as a default browser" click No.)   Homepage Name:  FrontPage wakes up displaying a blank page which is already named "new_page_1.htm".    This will become your Homepage.  Select Save As from the File Menu or click Save and name it "index".  Remember, html filenames are case sensitive and should be limited to 13 characters.  Blank spaces are not allowed.

First Save:  You may recall that the first time you save you will have to change the save destination.  To do this click the down arrow to the right of "My Webs" and single click on Removable Disk (D:).   A dialog box showing the contents of the Zip will appear.  Double click on   ~username file to select it. Next, click the Save button .

in the lower right corner.

Bookmark Names:  Although we have created and saved your class home page in the proper folder,  if your students bookmark your site the Bookmark will read "New Page 1" not "Communications 101 Homepage".   Bookmark names are not case sensitive, allow spaces and length limitations are inconsequential.    To change the default Bookmark name:  - Right click anywhere in the blank white area     of the page.   - From the options provided     choose . - The dialog box shown at right appears and     Title:  New Page 1 is highlighted.  Type in the     name you want for your Bookmark title.   - Click OK in the bottom right corner.

Hands-on Session - Create, Name, and Save Your First  HTML File - 5 Minutes
1- Open FrontPage.
2- Change the page's Bookmark name.
3- Save the blank page in the proper folder with a homepage filename.

More about FrontPage, Word and HTML 

FrontPage Layout: 
The FrontPage window has three tabs at the bottom.  
The Normal tab is the default for editing.  It shows outlines of tables and other handy editing cues.  
The HTML tab shows what your "word processing" in the Normal mode looks like when translated to HTML.  This is a place for troubleshooting when (not if..??) you learn basic HTML. 
The Preview tab allows you to see what your work will look like once it is published to a web server. 
In the bottom right section of the window is an Estimated Time to Download feature .  It indicates how long it will take your page to fully load 
(i.e. become fully displayed) on a users computer.  A right click on it will allow you to change the user's access capability.  I suggest using the 28.8 setting to model minimum student machine capabilities. 
 

Webpage Design Factors

Difference in Audience

With standard word processed documents we have a standardized form for a known audience.

Example 1: Lease Template

Example 2: Standard Business Form Letter

Company Name Here

May 8, 2000

Dear Sir or Madam:

Type your letter here. For more details on modifying this letter template, double-click . To return to this letter, use the Window menu.

Sincerely,

However, When we design documents to be published on the Internet we may not know who is accessing our site, where they came from, or where they entered our series of web page documents.  We need to consider this in the design of our web pages.  This is less of an issue when designing for students for whom we can predict their pathways a bit more accurately.


Understand the medium
Readers experience Web pages in two ways: as a direct medium where pages are read online (e.g. online exam), and as a delivery medium to access information that is later downloaded into text files or printed onto paper (e.g. assignments). Your expectations about how readers will typically use your site should govern your design decisions. Documents to be read online must be concise, with the amount of graphics carefully "tuned" to the bandwidth available to the mainstream of your audience (remember the Estimated Time to Download feature).

Establish a Visual Hierarchy 
The primary task of graphic design is to create a strong, consistent visual hierarchy, where important elements are emphasized, and content is organized logically and predictably.  Graphic design is visual information management using the tools of layout, typography, and illustration to lead the reader's eye through the page. 

Readers see pages first as large masses of shape and color (far left), with foreground elements contrasted against the background field.  Only secondarily to they begin to pick out specific information, first from graphics if they are present (center), and only afterward do they start parsing the "harder" medium of text and begin to read individual words and phrases (far right).

Thus the overall graphic balance and organization of the page is crucial to drawing the reader into your content. A dull page of solid text will repel the eye as a mass of undifferentiated gray, but a page dominated by poorly designed or overly bold graphics or type will also repel sophisticated users looking for substantive content. What you want is an appropriate balance that attracts the eye with visual contrast.

Proportion and "appropriateness" are the keys to successful design decisions, but those things can only be determined within the context of your overall purpose in developing a Web site, by the nature of your content, and most importantly, by the expectations of your audience.

Direct the Reader's Eye 
In the West readers of English read from left to right, and from the top of the page to the bottom. This fundamental visual axis dominates most design decisions, and is the basis for most conventional graphic design of print publications. In page layout the top of the page is always the most dominant location, but on Web pages the upper page is especially important, because the top four inches of the page is all that is visible on the typical 14 to 16 inch office computer monitor (approx. 400 pixels).

A Summary of Design Tips 
Establish a visual hierarchy to attract and direct the viewers attention.
Proportion and "appropriateness" within the context of your overall purpose and the expectations of your audience are the keys to successful design decisions. 
Type must always contrast sharply with any background color. 
Subtle pastel shades of colors typically found in nature make the best choices for background or minor elements.
Avoid bold, highly saturated primary colors except in regions of maximum emphasis, and even there use them cautiously. 
If you have a dramatic or complex graphic scheme in mind, hire a professional graphic designer to execute it. If you are not a designer and must do things yourself, keep everything conservative, conventional, and simple.
(Source: http://info.med.yale.edu/caim/manual/pages/graphic_design100.html)

Sample Webpages
Good Example 1 (nice mix w/good navigational aides),  
Good Example 2 (consistency w frames. ..),  
Good Example3 (consistency to the extreme..??),                   
OK Example 1 (consistent background most times), 
OK Example 2 ( font size, long blocks of text),  
Questionable Example

Backgrounds

In this section we will:
Investigate different background and text colors.
Insert a background graphic file into your web page.
Copy and Paste it to the correct directory or folder.
Re-insert it into your web page from the correct folder.

One way to create a visual hierarchy is through the use of a background color or a background graphic file that can become a signifier of your site.

What is a background color?  
The default page background color is white and the text is black.  You can choose any colors you like for your background and text.  

How to Choose a Background/Text Colors For Your Web Page

1- Right click anywhere on the blank white area of the page  2- Choose 3- Choose the Background Tab at the top of the dialog box .

4- In the Colors section:  Select the down arrow icon ()   next to  Background:       Automatic  for background page color options.  Select the down arrow adjacent to  Text: Automatic     to choose a different text color.

What is a background graphic file?  
It is a small image file that is repeated over and over again, thus, the metaphor of wall paper was coined.  By being a small file it takes a small amount of time to load, even if one is using a modem. 

The puzzle piece background on this page was composed from the image file the size of and contained in the box at right. Note the puzzle pieces in the box do not line up with those used as the background.

 There are three kinds of background images; squares, vertical rectangles and horizontal rectangles.  Examples follow:

Here is a square background file

T h i s i s a v e r t i c a l b a c k g r o u n d   f i l e

and here is a horizontal background file.

If you apply these style background files to a page they look like this:
Square                                                             
Vertical Rectangle                                     
Horizontal Rectangle                   

As the examples demonstrate, your choice of backgrounds will affect the color and size of the fonts you may choose. These can give a look and character to your page that supports your webpage objectives. 

                Statement:  The background file convention used in this exercise is: 
                If the filename begins with an "hb" it is a horizontal background,  if it 
                starts with a "vb" it is a vertical background file, and any other first letter 
                denotes a square.

How to Insert a Background File Into a Web Page
1- Right click anywhere on the blank page 
2- Choose
3- Choose the Background Tab at the top of the dialog box.
4- Click Browse.  The Select File dialog box will appear
5- Browse to F:/USR/robinson/Background/filename.gif  
6- Double click on the filename you choose for you background
7- Click OK at the bottom of the Page Properties dialog box.  Your background will appear on your  screen.  You may choose another by repeating the process.  Try selecting different colors for the text and check the contrast.

Hands-on Session - Selecting a Background -  10 min.     

1- Use Microsoft Photo Editor to preview background files in the 
    F:/USR/robinson/Background/ directory
2- Write down or remember the filename of the backgrounds of interest.
3- Insert those files into FrontPage and experiment with font colors. 

Copy/Paste your background file to the proper directory and re-insert.
Now you have found a background you like, you will need to get a copy of that file and store it in a place where FrontPage can always find it.  
At present, your webpage will always look for you background at

F:/USR/robinson/Background/filename.gif.  However, you want all you html files in your ~username folder and all you graphic files in you images folder.   Thus you must copy the background graphic you selected to D:\~username\images.  Then you must re-insert it from the images directory. To do this: 


1- Double click on "My Computer".   
2- Double click on 
3- Double click on 
4- Double click on 
5- Double click on 
6- Find the file you want and single click on it to highlight it.
                                                                 
   You want to copy, not cut, this file and paste it in your images folder. 
Continuing:
7- From the Edit menu choose
 
We now need to open your ~username/images folder so we can paste the copy of 
the file into it.  
Continuing:
8- To bring it to the front, single click on My Computer on the Taskbar.  
9- Double click on
10- Double click on
11- Double click on
12- From the Edit menu click on   The background file will appear in your images folder.  Close all windows opened in this process.

...re-insert
Now it is in the proper directory, we must re-insert it so it always looks for the background file in the images folder rather than on RJELAB (F:). To do this:

1- Right click anywhere on the blank page 
2- Choose
3- Choose the Background Tab at the top of the dialog box.
4- Click Browse.  The Select File dialog box will appear
5- Go to D:\~username\images 
6- Double click on the filename you choose for you background
7- Click OK at the bottom of the Page Properties dialog box.  The same background appears on your  screen but now the computer looks on your zip disk for the file.

Hands-on Session - Copy, Re-Inset, and Save -   10 min.     

1- Browse to find a background you like on the F: drive (RJELAB)
2- Write down or remember the filename of the background graphic you choose.
3-  Copy the background file from the
       F:\USR\Robinson\Background\filename.gif     
       to the 
       D:\~username\images   
       directory
4- Insert your background again but this time Browse to D:\~username\images
5- Save your webpage to D:\~username  

In the future, you may want to go to the Internet to search for additional free public domain background (and button) image files.

Page Formatting: Tables

In this section we will:
Consider tables from a page formatting perspective.
Identify two methods for inserting tables.
Insert tables for a header and navigational links.
Insert tables for text wrap around graphics.

The table is the most common form of HTML page formatting.  Tables can assist your creation of visual hierarchy through the placement of headers, graphics and text within them.  Remember, there are  no margins in HTML but text wrap occurs within tables.  This assures that the user will not have to scroll horizontally to see the information on your page (example).  We will also use tables to organize our navigational links and to create the appearance of text wrapping around inserted graphics.  

Headers:   Tables provide a page structure for the Page Header.  Its placement can become a signature of your site.  Because the web is such a free flowing environment you want to create a consistent look to your pages that tells the user that they are at your site regardless of their entry point.  A consistent style and layout of the background, headers, fonts, and  buttons will relate this to the viewer. 

Navigation:  When moving through the internet navigation is facilitated by providing the user with textual or image hyperlinks (i.e. Next, Back, , etc.). Consistency of hyperlink placement provides the user with reliable navigational cues.  Inserting you navigation links in a multi-celled table helps to organize the information for the user.  It also provides an easy way for you to copy and paste navigation buttons from one page to another as a unit.

Content:  We use tables to create artificial left/right margins that are sized so that all the text will fit on a typical 15" monitor (640 pixels).  But what if you want to add a spreadsheet or graphic to emphasize a point?  How can you get the text to wrap around the inserted graphic? You create a table with two or more columns, put the graphic in one and the text in the other right beside it. Without  a table the text will line up with the top
  and bottom edges 
of the graphic but not the sides.

How to Create Tables: Two Methods 

There are two ways to insert a table; either by using the Table Pull-down Menu or the Table Icon

Inserting A Table Using The Table Pull Down Menu From the Main Menu, choose Table,  Insert, Table.. .

The Insert Table dialog box will  enable you to choose the number of rows and columns and to specify the width.  The default width is 100 % of the browser window.   Selecting the  In pixels button and typing 620 in the space provided will fix the table width. The Border size option places a visible border around the table of varying width.  If you do not want your tables to be visible, set Border size to 0.

1- Single click on the Insert Table icon     A matrix appears.    2- While keeping the mouse button depressed, roll the mouse over the matrix to highlight the number of cells and rows desired.  Upon release of the mouse button the table appears in your document.  This table will have the parameters last defined by the Insert Table dialog box.

Important Table Tips: 
Once you have created a table the tab key moves you from one cell to the next and will add cells to a table

You must press the down arrow key on your keyboard after inserting each table.  Otherwise you will create a table inside a table, inside a table, etc.  Sometimes you may want to created nested tables

Hands on session - Create three tables for:  - 20 min.      
1- A Header: Create a 1 row, 1 column table. Temporarily add the text "Header" 
     

Header

    (press   and Enter)

2- Navigation Buttons: Create a 1 row, 4 column table. Put in one of the following 
    words in each cell: UW-P Homepage, Syllabus, Coursework, To Tutorial. Press 
    the tab key to advance from on cell to the next when typing.

Uwp-Homepage

Syllabus

Coursework

To Tutorial

   (press   and Enter)
 
3-  To create the appearance of text wrap  around a graphic create three tables: a 
     1-row 1-cell (press ), a 1 row 2 cell below it (press ), and a 1 row 1 cell below 
     that. Leave them blank for now. Enter the following text for now.

Text goes here

Graphic goes here

Text goes here

Text goes here