Table of Contents

• Introduction and Objective
• The Bradley Web Servers
• Using HTML
• Using Word 97 HTML Editor
• Viewing your Web Pages During Development
• Setting your Page Properties
• Using Hyperlinks
• Using Color and Textures
• Using Horizontal Rules
• Using Sound
• Inserting Scrolling Text Message
• Using Bullets and Numbered Lists
• Using Tables
• Finishing Up

Introduction and Objective

So, you've decided that your should have a web presence-but now what? This tutorial will have your document up and running in no time. Our objective is to create your document, translate it into HTML-the "language" of the Web-and publish it on a web server. You may elect to enhance your web pages now with the additional features, or begin with a simple design and add features as times goes by.

Back to Table of Contents
 
 

The Bradley Web Servers

Your home page must be housed on a web server-not simply a server that provides access to shared resources such as WordPerfect Office®, Word®, or Excel®. Your college or department may maintain a web server and provide space on it to the faculty. However, if one is not provided for you, your home pages will be located on one of Bradley's central web servers.

The machine names are listed below:
 

"www.bradley.edu"	departmental pages
"cyberprof.bradley.edu"	course web pages
"hilltop.bradley.edu"	faculty and staff personal pages
"bobcat.bradley.edu"	student personal pages

 

Faculty and staff have accounts on "hilltop" and students have an account on "bobcat". To publish a new official Bradley web page on "lydia" you must submit it to the Public Information office. To publish web pages to "cyberprof" you must request a course page be created from the Instructional Technology Assistance Center (677-2332).

Web pages housed on the Hilltop server have an address of http://hilltop.bradley.edu/~youruserid (where youruserid is replaced with your login ID). Departmental web pages are stored on Lydia and have an address of http://www.bradley.edu/collegeabbreviation/departmentabbreviation. Student home pages housed on the bobcat system servers have an address of http://bobcat.bradley.edu/~youruserid.

If you already have a login on Hilltop, but need access for updating departmental web pages, contact the Network Administrators (677-3295 or 677-2958).

Bradley has established certain guidelines for creating official and personal web pages. This page includes links to a template for departmental pages and a site for downloading the official Bradley wordmark, a counter, as well as important considerations when designing a web site.

 Back to Table of Contents
 
 

Using HTML

If you are a "do-it-yourselfer" and wish to create your web pages "from scratch" then you'll need to learn HTML (HyperText Mark-up Language). Feel free to consult one of the many resources available on the Web, including NCSA's Beginner's Guide to HTML , WebCom Guide or make an appointment with an ITAC consultant.

Even when you create web pages using an HTML editor, you will most likely find it necessary to "tweak" the HTML tags to "clean-up" areas where the editor became "confused."

Back to Table of Contents
 

Using Word 97 HTML Editor

To simplify web development, there are many HTML Editors for purchase or download. No matter which word processor you choose to use, you can create your syllabus, then come to ITAC and convert it into HTML with Word 97. All you need to do is open your word processed document in Word, then select the menu option FILE : Save As HTML. Do not use punctuation or spaces in your file names. Only "_" (underscore) is acceptable.

NOTE: If your Word 97 does not show this option in the File menu, you did not install the Internet options during installation; use your installation CD and select the missing options to have these installed.

The Bradley web servers expect that your beginning web page will be called "index.html" so be sure to save your home page that way.

If your default word processing template includes a large font, tabs or other special options, you may be warned that you may loose that special formatting-that's OK-proceed with your save. You will see that your document is saved, then converted into HTML!

You will likely notice a difference in the appearance of your document after it is converted into HTML (notably, excess spacing most of which you can delete as you would any text or spacing in a word processed document). After the conversion, you may continue using any of the Word menu options and tools to enhance your text, including changing the font face, the font size, bolding, italicizing, alignment, etc:

Special tools for home page development included on the toolbar assist you in inserting hypertext links, previewing your web page, creating forms, inserting tables, inserting horizontal rules and establishing background and font colors. If you forget which tool to use, while using Word, simply point to the tool you want information about and hold the mouse in position; a description of the tool will pop up. If some of the web tools are not viewable, they may not have been loaded on install. If this is the case you will need to reinstall Word and choose to install the web authoring tools.

Back to Table of Contents
 
 

Viewing your Web Pages During Development

At any time in your development cycle in Word, to test your web page, save the file, then click (Web Page Preview). This will start your default web browser (if it is not already open) and show you the home page.

You must save the file in Word before the browser will show your changes. If you have already previewed the file in your browser, you will also need to click the browser's Reload (Netscape) or Refresh (Internet Explorer) button to retrieve and view fresh changes made to your file.

Quite often the editor in Word does not display a true replica of your home page. For example, you may see a "stray" cell border in a table, or the spacing between paragraphs may appear too far apart. It is important that you frequently save, then view the re-loaded home page in your web browser and not rely entirely on the representation in Word's editor. Remember, your readers will view your page with a web browser-that is what you should rely upon to make decisions about layout.

Back to Table of Contents
 

Setting your Page Properties

The information supplied within the standard HTML <TITLE> tag appears at the top of your browser window in the colored strip. Many of the search engines still use the information supplied within this tag as the basis for conducting searches on the web. Therefore, it is very important that you give your home page a "good" title.

The title should be a concise definition of your page. For example, you should not title your page "My Home Page" or "Steve's Biology Page." Rather, a good descriptive title might be along the lines of "BU Intro to Systems Analysis"-this title identifies the location (BU), the type of course (introduction), and content of the course (systems analysis).

If you do not insert the title in your page, Word will simply pick up the top line of your file and use that instead. Insert the title information by choosing from the menu FILE : Properties and completing the Title information:

Back to Table of Contents
 
 

Using Hyperlinks

Hyperlinks are those areas that you design to be "clicked" in order to take your reader to a different location. There are three types of hyperlinks:

• To a file on a different web site than the referring file
• To a different file within the same web directory/directories as the referring file
• To a different location within the referring file

1. Type the text that you want your reader to see.
2. Highlight the text.
3. Click (Insert Hyperlink).
4. In the "Insert Hyperlink" dialog box:

• If you are linking to a file on a different web site, in the top box supply the URL (i.e. http://hilltop.bradley.edu/~brk/MSWord/Creating_Web_Pages.html)
• If you are linking to a different file within your own web directory/directories, in the top box supply the file name (i.e., calendar.html)
• NOTE: If you have "sub-divided" your web directory and are referring to a file located in a subdirectory, you must indicate the path to the file. For example, assume that you are in your web directory and have created a subdirectory named "Images." To indicate the file "logo.gif" contained in the Images directory, your link address must be written as: ./Images/logo.gif (Don't miss the period before the initial slash! And the capital letter. Remember: UNIX is case-sensitive.)
• If you are linking to a location within the referring document, in the second box, supply a name for the destination within that file. Make note of the named location because you will need it to create the Bookmark.

1. Highlight the hyperlink. Be careful to point just beyond the endpoint of the hyperlink, then press and drag over it; otherwise, you'll "click" it and Word will try go to that location.
2. Click (Insert Hyperlink).
3. Click the "Remove Link" option at the bottom of the dialog box.

1. Highlight the hyperlink. Be careful to point just beyond the endpoint of the hyperlink, then press and drag over it; otherwise, you'll "click" it and Word will try to go to that location.
2. Click (Insert Hyperlink).
3. Edit the link information.

Using Bookmarks

After you have created an internal hyperlink pointing to a named location within the file, you must identify where that destination is-Word calls these destinations "bookmarks."

To insert a Bookmark:

1. Highlight a word or phrase near the beginning of the destination location.
2. Choose from the menu INSERT : Bookmark
3. Name the Bookmark the same as you named it in the "name location" box.

Using Images
Inserting images into your web document is as simple as clicking (Insert Picture) then selecting the desired image. Word 97 contains many basic images (backgrounds, lines, bullets, and photographs) that you are encouraged to use in your HTML documents. Other options for images include scanning, creating/modifying in PhotoShop®, or obtaining from the Web. ITPS Photography also has several images of Bradley available for use on web pages. For assistance with any of these options, contact ITAC and indicate that you need an appointment with a consultant.

To save an image you find on the Web (assuming that you clearly have permission from the creator to use it and are not committing copyright infringement), point to the image and right-click (Windows users) or hold the mouse button down (Mac users), then choose Save Image As...

After an image is inserted into your web document, it can be resized or relocated by clicking on the image, then dragging the handles (the little solid squares around the border of the image) to resize it, or by dragging the image to relocate. You will be able to keep the image proportionately correct during resizing if you will always use one of the corner handles to drag. Two-headed arrows will resize an image; four-headed arrow will allow you to move the image.

Other options for using images in your pages involve choosing from the INSERT : Picture menu:

• ClipArt gives access to the Microsoft Gallery that comes with the Office 97 Suite
• From File gives access to images that you may have stored on disk (A:), a CD-ROM (usually D: or sometimes E:), or your hard drive (C:)
• Browse Web Art Page starts your web browser (if it is not already open) and connects to Microsoft's Web Art Resources page
• From Scanner imports an image from any scanner that may be attached to your workstation
• Chart starts Microsoft Graph allowing you to create a simple datasheet and graph

Back to Table of Contents
 
 

Using Color and Textures

To set the background color of your home page, click (Paintbucket). This will give you a palette of colors from which to choose, an option to see a more extensive palette or an option to choose a textured background:

To set a specific word or phrase in color, highlight the text to be colored, then click . The currently selected color is displayed as a band under the A. To choose a different color, click the down arrow to display a palette from which to choose:

To set the text, link and followed (visited) link colors, choose from the menu FORMAT : Text Colors... Make the appropriate selections from the dialog box:

Back to Table of Contents
 
 

Using Horizontal Rules

To insert a standard horizontal rule in your document, position your cursor in the location of your document where you want the rule inserted, then click (Horizontal Rule).

To insert a graphical horizontal rule into your document, from the menu choose INSERT : Horizontal Line... Choose the line you prefer:

                                                                    Sample Horizontal Rules

Back to Table of Contents
 

Using Sound

From the menu choose INSERT : Background Sounds : Properties. Make the appropriate selections from the resulting dialog box:

Word 97 has several audio clips in its Clipart Gallery that you may use, or you may create your own audio clips, locate clips from the Internet where copyright permission has been given by the creator, or obtain copyright permission to use other works. While it may be tempting to have your audio clip loop infinitely, keep in mind that the continuous sound quickly becomes irritating to your listener. (During development, your clip will immediately begin playing; to stop the clip, from the menu choose INSERT : Background Sound : Stop.)

Back to Table of Contents
 
 

Inserting Scrolling Text Message

Word 97 has a feature to allow you to insert a scrolling text message into your web document. This feature only works when the document is viewed in Internet Explorer. In Netscape, it will simply show the message as a single printed line of text.

Back to Table of Contents
 
 

Using Bullets and Numbered Lists

Bulleted and numbered lists are an effective way to organize your material for optimum reader "scan-ability." To insert bullets or numbers as you type, place the cursor in the paragraph in which you want the list to start (it doesn't have to be at the beginning of the sentence; simply in the paragraph); click (Bullets) or (Numbering). When you press <ENTER> to begin the next paragraph, the next bullet or number automatically appears.

When you begin the first paragraph that you don't want to have a bullet or number, click or to turn off the feature.

You can affect indentation of lists by clicking the (Decrease Indent or Increase Indent, respectively).

To use graphical bullets or to change the number style (i.e. roman, upper case alphabetic, lower case alphabetic, etc.), choose from the menu FORMAT : Bullets and Numbering...

NOTE: The option chosen from the menu will remain the default type when using and until a new choice is made.

CAUTION: Although it is possible to create nested lists, e.g., outlines, using Word, the editor tends to "get confused." Until you feel comfortable working directly with HTML tags, you should avoid nested lists.

Back to Table of Contents
 
 

Using Tables

Tables are useful to organize information. They are especially beneficial in creating the appearance of multi-columned text. Remember, there is no way to "tab" in HTML-the alternative is to create a borderless table. Simple tables are easy to create in Word; however, creating a complex table, or editing a table may require direct HTML tag manipulation.

To insert a table, click (Insert Table). The following type box will be displayed; simply press and drag to create the number of rows and columns you want in your table:

NOTE: It is best if you can decide ahead of time the number of columns-it will save you a step during development; additional rows at the bottom of the table are easily created during development.

When you release the mouse button, a table of the proportions selected will display in your document.

NOTE: The gridlines you see in Word are for you to use during development; they will NOT display on the Web:

To enter data into your table, click your mouse cursor in the cell and begin typing.
To move from cell to cell, press <TAB>.
To add an additional table row, position your cursor in the lower, right corner cell and press <TAB>.
To manually draw a table, click (Pencil Tool), drag diagonally to draw the rows and cells you desire.
To erase cell lines, click the (Eraser Tool) and press over the cell line you wish to erase.
To insert a row into your table, position your cursor BELOW where you want the row added, then from the menu choose TABLE : Insert Rows.
To delete individual cells, complete rows or complete columns, position your cursor in the appropriate location (in the cell, in the row, or in the column), then from the menu choose TABLE : Delete Cells. Make the appropriate choice from the Delete Cells box.
To control table properties such as text wrapping around the table, table background color, and table column spacing:

      #  Place your cursor within the table.
      #  From the menu, choose TABLE : Table Properties
      #  Make the appropriate selections from the "Table Properties" dialog box:

To control cell properties such as text alignment within the cell and cell background color:

1. Place your cursor within the cell.
2. From the menu, choose TABLE : Cell Properties
3. Make the appropriate selections from the "Cell Properties" dialog box:

To add table borders, including border width:

1. Place your cursor within the table.
2. From the menu, choose TABLE : Borders
3. Make the appropriate selections from the "Cell Properties" dialog box:

Quite often the editor in Word does not display a true replica of your home page. For example, you may see a "stray" cell border in a table, or the spacing between paragraphs may appear too far apart. It is important that you frequently save, then view the re-loaded home page in your web browser and not rely entirely on the representation in Word's editor. Remember, your readers will view your page with a web browser-that is what you should rely upon to make decisions about layout.

Back to Table of Contents
 
 

Finishing Up

After you have created your web page in Word-saving often, of course!-then viewing your creation in your web browser, you are ready to publish your page on the Web:

File Transfer Protocol (ftp) is a network protocol that allows you to connect to your web server and transfer a copy of your files. There are many different ftp applications available; on this campus WS_FTP® is the predominant choice for Windows readers and Fetch® for Mac readers. You can read more information about ftp from the Technology Helpdesk Documentation or you may call 677-2964 for further assistance.

Now you are ready to distribute the URL of your home page: "http://hilltop.bradley.edu/~youruserid" or "http://bobcat.bradley.edu/~youruserid"

Back to Table of Contents