How to Create A Header Graphic using WORD

In this section we will:
Launch or boot the software application MS Word.
Create a header, title, or banner using Word Art.
Copy and paste the Word Art graphic into the table in FrontPage labeled "Header".
Save the Word Art graphic in FrontPage using the Embedded File option.

Using Word Art to Create a Nifty Header Title

Minimize FrontPage and open Microsoft Word. Click on the Drawing Icon .  A Drawing Menu Bar will appear along the bottom of the window.  Click on the 

Insert Word Art icon and choose a style of text. Type the header title for your webpage where it says YourTextHere  and

click OK.  Your word art will appear on the page as a graphic.

The white handles allow one to resize the text.  Moving the yellow diamond skews the text.  Also try other menu bar items until you get the effect you want.  The 
Shadow and 3-D effects are fun, especially if you choose the 3-D Settings option which gives you another set of icons that do interesting things.  I would also recommend that you  play with the effects available with the Format WordArt and WordArt Shape icons .  When you are satisfied with your creation, while the handles are still visible (indicating the graphic is "active") click copy.  The headers now on the clipboard ready to place in FrontPage.  Thus,  minimize Word, maximize FrontPage, place the cursor in the "Header" table and click paste. You now have a graphic inserted in your FrontPage webpage, but you do now know the name of that graphic, nor do you know, at present where it is stored.      Relax. Click the save icon.

Saving HTML Files
Today, when you save your html webpage for the first time you will need to Browse to go to ~username as your save destination rather than My Webs.  

Saving Graphic FiIes
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 "Save Embedded Files" window to direct the graphic files "save destination" to the images folder and rename them if necessary.

Saving your file with embedded graphics

The Save Embedded Files dialog box prompts you about the new graphic.  It is wise to Rename the graphic to something that makes sense to you.   Do this by single clicking on one of the filenames.  The filename  becomes highlighted, ready to rename. Be sure to keep the correct extension (.gif) as part of the name.

Is it going to the correct directory?  No, we need to Change Folder to C:\~robinson\images.  Click .  The dialog box at right will appear. Single click on the + next to (C:) to display all folders on the hard drive.  Next click on  the + beside ~username. Lastly double click on the images folder to open it so it becomes the save destination for your graphic files. The Set Action -> Save is fine as it is. It may say "Overwrite" if the graphic files already exist in the images directory.  Click OK to complete the save process.

Hands on session - Create a Word Art Header  - 10 min.
1-Create a Word Art header in Word and Paste it into the topmost table in FrontPage.
2-Save to your  D:\~username\images directory using the Save Embedded Files feature.

Understanding and creating links

In this section we will:
Discuss the structure of an URL or web address.
Create a hyperlink represented by its URL.
Create a hyperlink represented by text (i.e. a hyperlink).
Create a hyperlink represented by a graphic file (i.e. a button).

What is a WWW address? 
In the same way that every residence has a mailing address with the name, street and city information, each page on the WWW has an "address" associated with it (a.k.a. URL for Uniform Resource Locater which is displayed in the Location box in Netscape).  Each WWW address is composed of server, organization and filename information.  All you need to create a link is the full WWW address. The naming scheme for URLs typically consist of three pieces:
    http://www.uwp.edu/filename.htm
                        1     2       3

1. the name of the web server :    uwp

2. the type of institution you represent:

 .com    for commercial or business names. 
 .org      a name for a "non-profit" organizations.
 .edu     for educational sites. 

3. the html file you want to view:  filename.htm or filename.html

What is a link and how does it work?
A hyperlink or link is a command embedded in the text  by a hypertext.  It is typically represented by blue underlined text and once visited it becomes purple. When you click on the hypertext, an HTML command tells the computer to go to the address associated with it. Thus, to create a link to another site one need only know its full address (URL).  

How to create a hyperlinks in FrontPage
There there three ways to create hyperlinks: as URLs, as text, and as graphics.

How do I create a hyperlink from a web address?
It is very easy. Type in the URL and press return. 
(e.g. http://www.stpt.com/)

What if I want a word to represent a link rather than the URL? 
 A bit more complicated. 
1- Type in the word that is to represent the link.  
2- With the mouse button depressed roll over the word to highlight it. 
3-  To turn the highlighted text into a hyperlink, click the Hyperlink icon on the Toolbar. A Create Hyperlink dialog box will appear.  You can either type the desired address in the URL window  or click the icon to the right to use a web browser (Netscape) to locate the page to which you wish to link. For the latter, after finding the web page, minimize the browser and click OK at the bottom of the Create Hyperlink dialog box.  The text that you highlighted has become a hyperlink.
(e.g. Starting Point Search Engine ) 

How can I have an image represent a link?
Image files of buttons are located at F:\USR\robinson\Buttons. 

1- Insert a button image file into your web page. 2- place the mouse over the image and right click. A dialog box appears with an option for Hyperlink - choose it. 3- Create a hyperlink as outlined above.

Hands on session - Insert Hyperlinks:               - 10 min.     
1- In the 4 cell table, make the phrase "To Tutorial" a  hyperlink to the homepage; 
        http://www.uwp.edu/~robinson/fps~home.htm 

2- In the middle table, make the phrase "UW-P Homepage" into a hyperlink to the 
    college's homepage.

3- Insert an image file and make it a hyperlink.  If you plan to keep this image be sure to copy it to your images directory.

More Table and Cell Formating Options

In this section we will:
Identify two methods for inserting tables.
Discuss how to alter table and cell properties.
Discuss strategies for inserting text and graphics and creating the appearance of 
    text wrap.
Insert text and graphics with the appearance of text wrap when published.

How Do I Change the Formatting Inside Tables and Cells?

Two methods of accessing table options are:
Method 1- Right click within table cells.
Method 2- Select a cell with the mouse then right click.

Method 1- Right click within table cells. A right click of the mouse anywhere inside a table will display the following table options.  Insert Row adds a row and Insert Column adds a column to an existing table.  Split Cells will bring up the following dialog box:
	This allows one to divide an existing cell into multiple rows, columns, or both.

Page Properties we have already discussed regarding backgrounds (you may right click anywhere on the page to access it).

The Table Properties dialog box has multiple features: Layout, Borders, and Background.

Layout: This section is almost identical to the Insert Table dialog box.

Borders:  This allows one to change the Color of the border. The Light and Dark border color options do not work when uploaded to the server regardless of the Color settings.

Background:  This allows one to change the background color or background graphic file within a table. Automatic preserves a transparent background despite the implied white.

Cell Properties To change the position of text or graphics within tables you alter it by choosing either the Horizontal or Vertical alignment settings and changing them as desired.   Checking the Header cell box makes the font and size that of a header.  Selecting No wrap will disable the text wrap feature, extending width of the table.

Method 2- Select a cell with the mouse then right click.
To select all table cells in a row move the mouse to the left edge of the row.  The cursor will change to an arrow.  

Left click once to highlight the table....
 
...then right click to get some familiar and unique options.  
The unique options are the following:

Choose Delete Cells to do just that.  Merge Cells will combine all highlighted cells into one cell. Distribute Columns Evenly makes them all the same width.

Similarly if you want to adjust a single column in a table, move the mouse to the top edge of the cell. The cursor will turn into an arrow.  Left click once to highlight the individual column then right click to reveal the same set of options as outlined above 

except Merge Cells and Distribute Columns Evenly.  In general, there is quite a bit of overlap in these menus but highlighting will provide the most options.

Text Wrap Around Graphics
To give the appearance of text wrap it is necessary to use to use multiple  one row tables. For example, a 2 cell sandwiched between two 1 cell tables works well as shown below with visible borders to emphasis table layout.

...in  the   left  cell  of    the  2 cell table.  The  text  continues ..    2 Cell Table                                                               along   the left   side....

Insert graphic file here

Inserting Text and Graphics into a Table
Click the mouse inside one of the cells in the middle table.  From the Main Menu choose Insert, Picture, From File or click the Insert Picture icon .  The Select File Dialog Box will appear.  Go to the F:\Usr\~username\images directory and insert an image into the table.  Click the mouse in the other cell and type in some text relevant to the image (if possible).

Hands on session - Inserting Graphics/Text into Tables - 
15 min.
1-Insert a minimum of one graphic from the F:\Usr\robinson\images directory and some text in the 2 cell 1 row table.   Create the look of text wrap by inserting text in the 1 cell tables above and below the text/graphics table.  

Publishing Your Work on the Internet

How do I Publishing a Web Page?
Web pages are transferred from the memory on your office computer to the a memory location on a web related machine using a software called FTP for File Transfer Protocol.  The process of sending a file from your office computer to the web computer is called uploading.   Uploading files is how you publish your web pages.  There are two methods; publishing using FTP on your computer or setting-up FrontPage to use FTP to publish for you. For the latter, you must set-up a FrontPage Web and define the ftp path.