Exercise Web 2-3: Convert to HTML
|What you will do:
convert a Word doc to HTML
correct nesting errors (Word97)
deal with code that FPX does not recognize
Word and FrontPage or FPX
Word 2000 handles Save as HTML somewhat differently
from Word 97.
- Open in Word:
the file Ergonomics.doc from your resources
files on your hard disk:
Or download it from
the web site
Or from your floppy disk
This article was written to be printed in a newsletter in two columns. A
similar file is used in Working
with Words: Brochure: Ex. 3-1.
Word or IE?
Be sure you are in Word. If you clicked on one of the links above
to open the original Word doc, the document may have opened in an
Internet Explorer window with Word toolbars. Instead, you need to open
Word first and then open the doc file from Word. You cannot view the
HTML source otherwise.
Clue: the IE toolbar includes
the Tools button when a Word doc shows in the window.
Use the name ergonomics.htm to save the
file to the web/Exercises folder of your Class
disk as HTML.
- View HTML in Word:
Find the code for the image. What you see depends on which version of
Word you used.
Saves the image with a number, like Image1133.gif,
to the same folder as the web page. The IMG tag is more or less
Saves the image with a number like image002.gif
in a subfolder named Ergonomics_files
of the folder in which the web page is saved. There is a lot of weird
code for the image! The path to the gif is buried way at the end of a
lot of messy looking Office code.
document opened in IE, the Word command View HTML Source will not
be available and neither will the IE command View | Source. What an odd
omission! Be sure you have the document open in Word.
- Word 97:
Correct nesting of tags and Save the corrected
- Close the document and Word.
- Open the web page Ergonomics.htm in
FrontPage or FPX.
- Format all:
Select the whole page (Hint: CTRL + a) and remove all formatting
(Hint: Format | Remove formatting).
Change the font face to Verdana.
The text is now a better size and is easier to read.
Apply heading styles:
Line 1 = Heading 1
Line 2 = Heading 2
Line 3 = Heading 3
Lines "Posture" and "Design characteristics" = Heading 3.
Make lines 2 and 3 italic.
FPX: Check the dimensions of
the image using the Image Properties dialog. (Hint: Uncheck "Specify
Wow! The real dimensions were not used. The image display had been
resized by Word. To reduce the actual file size and get a good look for
this gif image you need to resize it in a graphics program. Such a
version is available to you in your resource files.
FrontPage: Right click
on the image. The expected choices are not there. No Picture
Properties! The anchor is a little green dot. What has happened?
FrontPage is using the Office version of this image and not the
gif you started with.
- Replace image:
Change the image to ching.gif , which is a
file in your Exercises folder.
This new image is 50% of the size of the original and also has a
transparent background. Much better!
FrontPage: You must
delete the image and insert the new one.
- Format image:
Alignment = right
Horizontal spacing = 5
Vertical spacing = 5
ALT text = whatever you think is appropriate.
- Position image:
Drag the image anchor up to the left of the first paragraph.
Delete the blank line left behind.
Custom Color: (red=241, green=224, blue=187).
If your monitor shows only 256 colors, you will see gray instead of
- Inspect and fix:
If necessary, remove extra spaces, blank lines,
How well will this document work in a browser? What needs to be
Resize the browser window to check wrapping. Fix any errors.
The bullets that Word 2000/02 has exported are tiny dots. Very hard to
see and set too far from the text. Apply bulleting yourself and
delete the extra spaces and the tiny dots.
Use the name ergonomics2.htm and save
the document to the web folder of your Class
- View in IE:
Open the page ergonomics2.htm in IE.
Did you make all of the changes correctly? If not go back to FrontPage/FPX
and make corrections.
ergonomics2.htm in Notepad. Add to each <p> and <li> tag the
If you open the page
in FPX again, FPX will delete this attribute since it does not
FrontPage: Justify all
- Refresh in IE:
Switch back to IE and refresh the page. Better?
Print Preview & print in IE: The article should fit on 1
Use the Header and Footer settings below but replace "your name" with
your own name.
Header: Exercise Web 2-3 your name &bPage &p of &P
If the background prints, you should change IE settings:
| | to uncheck Print
background colors and images.
Did a second page print? Either your margins are too wide in Page
Setup or you have extra blank lines at the end of your source code.