Least Tern > Teacher
Resources > Web Design Resources
Notes
About Converting Word Documents
to
Web Pages
When converting a Word document into a web page, it is
important to know about and watch out for some formatting peculiarities of
the transfer process. In general, the more work you do in Word before saving
as an .html file, the better off you will be. And use tables instead
of tabbing within Word itself. This document, for example, was created
first in Word. Even after hard coding, you will notice some font formatting
that is off.
1.
Before you create the document,
Open the Tools - AutoCorrect - AutoFormat menu and make the following changes:
The Tools - AutoCorrect - AutoFormat as You Type should look like this:
2. If
you are working with quoted text imported from an e-text or other
source, use Edit-Replace to replace smart (curled) quotes, including apostrophes,
to straight quotes (" ').
3. Word
will convert and maintain:
- Styles - but only client supported fonts will appear as defined in a
style
- Bullets - if created correctly in Word from defaults
- Ordered/numbered lists - if created correctly in Word from defaults
- Bookmarks - these become anchor links in an .html document
- Hyperlinks to bookmarks, other web pages and to documents uploaded to
the web server
- Borders, shading, backgrounds
4.
You can not depend
upon spacing created with tab or spacebar.
If you need to create a two-column layout within the document, consider
placing it within a table with no border line. Use Word's Borders and Shading
Formatting Palette to achieve this:
5.
Images
can be inserted as text elements or as graphics. Images on this page were
inserted as text, centered horizontally and given a border via the Formatting
Palette. To insert images as
graphics (the above image is inserted this way), do this,
a.
Insert the image using Insert - Picture - From File (prefer this to copy-paste or drag-and-drop) with the
cursor at the approximate image position (for graphic images) or exact position
(for in-line with text images)
b.
Click once on image to select it - you will see sold black handles
c.
In Formatting Palette, click on Format Picture (or select from menu)
d.
Select: Layout tab - Square - click Advanced - click off Move Object with Text
e.
You may now use the Formatting Palette Advanced options to place the object
relative to margins or text items.
6.
You will not "get what you see." Use File - Web Page Preview to see how your page
will appear when published. It
is not a bad idea to get close to your goal then Save as Web Page - you can
continue to edit text and format in this view.
7.
Save the page as a .doc file. Then Use Save as Web Page... to convert the Word document
to HTML
a.
Click on Save Entire File into HTML
b.
Click Web Options:
- Give the page a window Title (to appear at the top of the browser window)
- Target browser window should be 800 x 600
- 13 or fewer characters,
- no dashes, slashes, apostrophes or spaces,
- lowercase preferred
- end in .html or .htm
8. Setting
web page margins is accomplished without .html in the Formatting
Palette - Indentation menu. You
can set the Left and Right margins for the page here. There are 72 pixels to an inch.
9.
Set paragraph indents
in the Formatting Palette - Indentation menu or use the Tab (it will set the
Indentation menu correctly).
10.
Pages created this
way will be larger .html files than pages created in code or in
a web editor. It is not recommended that you try to edit content or code in
an editor such as Dreamweaver or FrontPage. Word applies proprietary CSS that
is easily botched.
11. It is possible
hard code Printing
Page Breaks into the <body> of the page.
-
Select View - HTML
Source
-
Navigate to the
end of the text division that you wish to include on a page. Be sure you
insert the cursor after </font></ul> and other closing tags
-
Insert exactly the
following code into the page at this point:<div style="page-break-before:always;"> </div>
This will have the affect of forcing a print page break
-
You can also add
the break style code (style....;) to a <div> <h1> or other
tag
12. Uploading
the page:
a.
Word will create your .html page AND a folder containing images and formatting
code.
b.
This folder will be called "filename_file"
c.
You must upload the .html and the folder
to your web server for your page to work on the web
d.
The relationship between the .html and the folder must be maintained!!
e.
First Class users will need to:
- Create a new folder in the HomePage folder and rename it exactly "filename_files"
- Copy the files from the Word folder into the First Class folder
- Copy the .html document into the HomePage folder