CBA WIG

(Cell Biology and Anatomy Web Interest Group)

Introduction to Creating Web Pages with MS Word 2000

 

Step 1. Create or open a Word document that appears the way you want your web page to appear.

 

Step 2. Save the file as a web page using File->Save as Web Page. The name will end in .htm by default. Notice that the filename at the top of the window has changed to the name of the web page (not .doc).

 

Step 3. Open the file in your web browser. In Netscape File->Open Page (select Open in Navigator)->Choose File (choose the file)->Open->Open. In Internet Explorer File->Open->Browse (choose the file)->Open->Okay. Notice that the hanging indent works.

 

Step 4. Return to Word 2000 and make changes. Save the file. File->Save will save the web page.

 

Step 5. Return to your web browser and reload the page to see the changes. In Netscape View->Reload or use the Reload button on the tool bar. In Internet Explorer View->Refresh or use the Refresh button on the toolbar.

 

Step 6. Return to Word 2000. Add an image. Insert->Picture->From File (choose the picture, jpg, gif, or png)->Open. Select the picture (left click on it), right click to bring up the context menu, Format Picture->Layout (choose layout options)->Advanced (choose text wrapping options). Add a caption if you want one. Go check the result in your web browser.

 

Step 7. Add a table. Table->Insert->Table

Placeholder text of a random nature.

 

 

 

There she breaches!

Type text in one cell. Insert an image in another cell. Check it out in your browser.

Then come back and try different table formatting and contents. For example, remove the borders, select the table, right click to bring up the context menu, Table Properties->Borders and Shading (choose the features you want). Check the table layout in your web browser and note the margins. Tables are an important layout feature for HTML and they are not always wysiwyg from Word. For example Word is not giving this table any indentation when viewed with Netscape. One approach would be to add a 0.5 inch column to the left end of the table and leave it blank. However the original is close to wysiwyg with Internet Explorer. OOPS, here is web browser difference and somehow I’m not too surprised that the HTML generated by MS Word is more wysiwyg in MS IE than in Netscape. That is one of the reasons I chose to try an Adobe web page make (GoLive) rather than a MS one (FrontPage). (Try centering the table as a work around.)

 

Step 8. Make a link (hyperlink). Select the object that you wish to become a hyperlink. It could be an image or some text on this page. Click here to visit our home page. Right click on the selection to bring up the hyperlink properties context menu, Hyperlink->Browse for File (or Browse for Web Page or Recent Files on the left). The Browse for Web Page doesn’t automatically insert the web page I go to into the link, probably because my default browser is Netscape. While in the Hyperlink properties you may add a tool tip that appears when the user lets the cursor (mouse) hover over the link. One of the convenient/annoying things about Word is that if you left click on the link in Word, Word will open the link in what it thinks is the appropriate application. I try to avoid this and right click only on links (to edit them). Check the action in your web browser.

 

Step 9. View (and edit) the HTML source in Word. View->HTML Source. HTML tags are in angle brackets <>. In the first tag, ignore everything between <html and >, this tag starts all HTML pages and indicates the page description language used (which is HTML). The end of the HTML page occurs at the </html> at the end. The next tag pair <head>…</head> encloses header information. The <link rel=File-List href=”./WIG1_files/filelist.xml”> indicates where Word will put any auxiliary files it creates in the process of converting the document to HTML. In this case the image files I have imported have been copied to the ./WIG1_files/ directory, where they have been given new names and then listed in the file filelist.xml. If you copy WIG1.htm somewhere else (e.g. to your web site) you need to copy the WIG1_files directory with all its contents to the same directory on your web site. It is convenient that Word gets all your files together and annoying that it changes their names. The title tag pair, <title>…</title>, encloses the text which will appear in the bar at the top of the web browser window. Word likes to use the first line in the document. You can change it! Skip down to the <body> tag. This is where the displayed page begins. It ends at </body>. <p> means start a new paragraph. </p> means end a paragraph (not required if starting a new paragraph). <table>…</table> encloses a table. <tr>…</tr> encloses a table row. <td>…</td> encloses a table cell (table data). Skip down to Step 8. <a>…</a> encloses an anchor. This anchor contains some text which is part of the displayed document (“Click here to go to our home page”) and a hypertext link to our homepage, href=”http://www-cellbio.med.unc.edu/” that is activated by clicking. An anchor may also have a name which can be used to jump to that anchor. <a href=#dest>origin</a> when clicked will take you to <a href=”” name=dest>some text</a>.

 

Step 10. View the HTML source in your web browser. In Netscape View->Page Source. In Internet Explorer View->Source. In IE you may choose to open the page in Word for editing but we already have it open in Word. If the page you view in IE was not created in Word, IE will not offer to open it in Word. However you can save the page (look for the directory with the auxiliary files) and open the saved file in Word. In Netscape, File->Open Page (select Open in Composer)->Choose File etc. opens the web page in Netscape Composer which allows you to edit the page (or create a new page). Netscape composer doesn’t seem to understand all the HTML generated by Word.

 

Conclusion: MS Word 2000 makes web pages that are nearly wysiwyg and that require no special skill beyond how to use Word. Note that not all features of Word are implemented in HTML. E.g. text cannot flow on both sides of an image. Note that not all fonts are on every computer so test the appearance of fonts and generally stick to common fonts.

 

Resources on the web with information on creating web pages include: