Microsoft Word 2000

<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 9">
<meta name=Originator content="Microsoft Word 9">
<link rel=File-List href="./print_sample1_files/filelist.xml">
<link rel=Edit-Time-Data href="./print_sample1_files/editdata.mso">

<title>Designing For Print and Online Publishing</title>

<style>

</style>
</head>

<table border=0 cellspacing=0 cellpadding=0 style='border-collapse:collapse;
mso-padding-alt:0in 5.4pt 0in 5.4pt'>
<tr style='height:40.5pt'>
<td width=590 valign=top style='width:6.15in;padding:0in 5.4pt 0in 5.4pt;
height:40.5pt'>
<h1>Designing For Print and Online Publishing<a name=Top></a></h1>
<![if !supportEmptyParas]> <![endif]><o:p></o:p>
</td>
</tr>
<tr style='height:5.0pt'>
<td width=590 valign=top style='width:6.15in;padding:0in 5.4pt 0in 5.4pt;
height:5.0pt'>
<h2>Developing Pre-Internet and Print/Internet Documents</h2>
By Linda Moore
<![if !supportEmptyParas]> <![endif]><o:p></o:p>
</td>
</tr>
</table>

<![if !supportEmptyParas]> <![endif]><o:p></o:p>

<table border=0 cellspacing=0 cellpadding=0 style='border-collapse:collapse;
mso-padding-alt:0in 5.4pt 0in 5.4pt'>
<tr>
<td width=181 valign=top style='width:135.9pt;padding:0in 5.4pt 0in 5.4pt'>
<![if !supportEmptyParas]> <![endif]><o:p></o:p>
</td>
<td width=409 valign=top style='width:306.9pt;padding:0in 5.4pt 0in 5.4pt'>
The nature of document is in the mind of the beholder.
Once, document meant paper. Then, it became an electronic file printed on
paper. Now it's an electronic file published electronically. Here’s how to design documents that will
work in any publishing medium.
</td>
</tr>
<tr>
<td width=181 valign=top style='width:135.9pt;padding:0in 5.4pt 0in 5.4pt'>
<a href="..\writer.htm">Return to Newsletter</a>
</td>
<td width=409 valign=top style='width:306.9pt;padding:0in 5.4pt 0in 5.4pt'>
<![if !vml]><img border=0 width=426 height=23
src="./print_sample1_files/image002.gif" v:shapes="_x0000_i1025"><![endif]>
</td>
</tr>
<tr>
<td width=181 valign=top style='width:135.9pt;padding:0in 5.4pt 0in 5.4pt'>
<![if !supportEmptyParas]> <![endif]><o:p></o:p>
</td>
<td width=409 valign=top style='width:306.9pt;padding:0in 5.4pt 0in 5.4pt'>
<h3>In the Beginning, There Was Simplicity</h3>
We were forced into it when “word processing” replaced
typesetting, and writers gave up many of the amenities that made the
published word, art. The computer--the tool that made it all possible--was
the lowest common denominator. The first word-processed documents were
visually very plain. And, it took several years before “desktop publishing”
once again made it possible to create attractive printed work.
We were forced into simplicity again when the first online
documents were limited by the capabilities of HTML. Like their word-processed
predecessors, online documents were visually very plain. And, a “print”
document that was saved as a Web page lost most or all of its formatting.
</td>
</tr>
<tr>
<td width=181 valign=top style='width:135.9pt;padding:0in 5.4pt 0in 5.4pt'>
<![if !supportEmptyParas]> <![endif]><o:p></o:p>
</td>
<td width=409 valign=top style='width:306.9pt;padding:0in 5.4pt 0in 5.4pt'>
<![if !supportEmptyParas]> <![endif]><o:p></o:p>
</td>
</tr>
<tr>
<td width=181 valign=top style='width:135.9pt;padding:0in 5.4pt 0in 5.4pt'>
<![if !supportEmptyParas]> <![endif]><o:p></o:p>
</td>
<td width=409 valign=top style='width:306.9pt;padding:0in 5.4pt 0in 5.4pt'>
<h3>Now, You Can Have It All (Almost)</h3>
Today, many “print-based” word processors provide the
option of saving a document as a Web page. Most features of the document
survive the conversion. And, by aligning text using tables and text boxes, a
print document and a Web page can appear to be virtually identical.
What Survives Web Page
Conversion<o:p></o:p>
 Here are the
features that survived when I saved a Word 2000 “print” document as a Web
page. The document was never intended for Web publication. It was a software
reference manual:
<![if !supportLists]>·        
<![endif]>Generated Table of Contents 
<![if !supportLists]>·        
<![endif]>Font styles (may depend on availability of fonts on
the user's computer) 
<![if !supportLists]>·        
<![endif]>Text colors 
<![if !supportLists]>·        
<![endif]>Text aligned to center 
<![if !supportLists]>·        
<![endif]>Bold and italic effects 
<![if !supportLists]>·        
<![endif]>Heading Levels 
<![if !supportLists]>·        
<![endif]>Bulleted lists (were converted from custom bullets to
default HTML bullet styles) 
<![if !supportLists]>·        
<![endif]>Numbered lists 
<![if !supportLists]>·        
<![endif]>Tables (both bordered and borderless) 
<![if !supportLists]>·        
<![endif]>Text boxes 
<![if !supportLists]>·        
<![endif]>Graphics (were converted to numbered gif's and
jpeg's)
</td>
</tr>
<tr>
<td width=181 style='width:135.9pt;padding:0in 5.4pt 0in 5.4pt'>
More information
about:
<a
href="http://www.web-source.net/symbols.htm">Symbol Codes</a>
<a
href="http://qsilver.queensu.ca/~3jku/wingding.htm">Wingdings</a>
<![if !supportEmptyParas]> <![endif]><o:p></o:p>
</td>
<td width=409 valign=top style='width:306.9pt;padding:0in 5.4pt 0in 5.4pt'>
<h3>What Doesn't Survive and Design Alternatives</h3>
Here are the features that didn't survive the conversion
and ways to preserve them in the original document design:
<![if !supportLists]>·        
<![endif]>Page breaks (Depending on the length of your
document, you may want to divide it into separate files.) 
<![if !supportLists]>·        
<![endif]>Indented margins, indented headings, tab-indented
text (Use borderless tables to position text; for later browser versions you
can use text boxes.)
<![if !supportLists]>·        
<![endif]>Headers and footers (Use frames, but use them
carefully. 
<![if !supportLists]>·        
<![endif]>Symbols (Insert the proper HTML symbol code after you
convert your document. You must treat Wingdings like a font--if your reader
has Wingdings, the symbol will display)
</td>
</tr>
<tr>
<td width=181 style='width:135.9pt;padding:0in 5.4pt 0in 5.4pt'>
<![if !supportEmptyParas]> <![endif]><o:p></o:p>
</td>
<td width=409 valign=top style='width:306.9pt;padding:0in 5.4pt 0in 5.4pt'>
<![if !supportEmptyParas]> <![endif]><o:p></o:p>
</td>
</tr>
<tr>
<td width=181 style='width:135.9pt;padding:0in 5.4pt 0in 5.4pt'>
If you run this test in a
different word processor or Web authoring package, please send me your file. I'll
report your results here.<o:p></o:p>
</td>
<td width=409 valign=top style='width:306.9pt;padding:0in 5.4pt 0in 5.4pt'>
<h3>Design for Simplicity Beneath the Surface</h3>
Today, on the surface, a Web page can look just like a
print document. But beneath the surface, at the HTML level, it can be simple
or complex.
To maximize online performance, you must design for
simplicity beneath the surface so that your document will load quickly, be
easy to maintain and be easy to enhance with JavaScript or animation.
You May Need to Sacrifice Convenience to Create a
“Simple” File
While it's convenient to save your word processed document
as a Web page, you may be saving extra code that makes your file
unnecessarily complex.
Here is a comparison of the HTML code generated for this
article by Microsoft Word (a word processor) and Macromedia Dreamweaver (a
Web authoring package). The files used for this test were created
independently in the package tested. 
Microsoft Word 2000
(xxx lines of code; takes xx seconds to load at 56 kbps)
<a href="..\print_sample2.htm">Macromedia Dreamweaver 3.0</a>
(xxx lines of code; takes xx seconds to load at 56 kbps)
Instead of a word processor, use a Web authoring package or
create your document directly in HTML when:
<![if !supportLists]>·        
<![endif]>you need a small file
<![if !supportLists]>·        
<![endif]>you want the fastest possible load time
<![if !supportLists]>·        
<![endif]>you will add JavaScript or other programming to the
online version.
</td>
</tr>
<tr>
<td width=181 style='width:135.9pt;padding:0in 5.4pt 0in 5.4pt'>
<![if !supportEmptyParas]> <![endif]><o:p></o:p>
</td>
<td width=409 valign=top style='width:306.9pt;padding:0in 5.4pt 0in 5.4pt'>
<![if !supportEmptyParas]> <![endif]><o:p></o:p>
</td>
</tr>
<tr>
<td width=181 style='width:135.9pt;padding:0in 5.4pt 0in 5.4pt'>
More information
about:
<a
href="..\heading.htm">Headings</a>
<![if !supportEmptyParas]> <![endif]><o:p></o:p>
</td>
<td width=409 valign=top style='width:306.9pt;padding:0in 5.4pt 0in 5.4pt'>
<h3>Use Good Design Principles</h3>
No matter where you publish or how you create your
document, use good design principles. These will help the print reader as
well as the online surfer:
<![if !supportLists]>·        
<![endif]>Use headings often. Try to picture the document
online. Never have a screen full of text without a heading to break it up. 
<![if !supportLists]>·        
<![endif]>Use subheadings even more often. Once the main
heading scrolls off the screen, there is no frame of reference for the
reader. 
<![if !supportLists]>·        
<![endif]>Make your headings and subheadings specific (even
though this may seem redundant in print). When writing a subheading, don't
assume that your reader can see the heading it is beneath. 
<![if !supportLists]>·        
<![endif]>Keep your paragraphs short. Never show your online
reader a screen that does not include a heading or paragraph break. 
<![if !supportLists]>·        
<![endif]>Use graphics sparingly, especially large ones.
Graphics take longer than text to display. Use gif's instead of jpeg's
whenever possible.
</td>
</tr>
<tr>
<td width=181 style='width:135.9pt;padding:0in 5.4pt 0in 5.4pt'>
<![if !supportEmptyParas]> <![endif]><o:p></o:p>
</td>
<td width=409 valign=top style='width:306.9pt;padding:0in 5.4pt 0in 5.4pt'>
<![if !supportEmptyParas]> <![endif]><o:p></o:p>
</td>
</tr>
<tr>
<td width=181 style='width:135.9pt;padding:0in 5.4pt 0in 5.4pt'>
More information
about:
<a
href="..\multiple.htm">Multiple Files</a>
<a
href="..\keyword.htm">HTML Tags</a>
<a
href="..\navigation.htm">Navigation</a>
<![if !supportEmptyParas]> <![endif]><o:p></o:p>
<![if !supportEmptyParas]> <![endif]><o:p></o:p>
</td>
<td width=409 valign=top style='width:306.9pt;padding:0in 5.4pt 0in 5.4pt'>
<h3>Add Features for Online Ease-of-Use</h3>
If you will publish online, add features for online
ease-of-use. If you develop your document in a word processor, you may need
to add some of these features after it is saved as a Web document: 
<![if !supportLists]>·        
<![endif]>Bookmark your headings. (In a Web authoring package, a
bookmark is called a Named Anchor.) A bookmark identifies a heading as a
destination for links. 
<![if !supportLists]>·        
<![endif]>Make separate files for chapters and sections if you
want readers to be able to print them separately. 
<![if !supportLists]>·        
<![endif]>In each file, fill in the HTML heading (if you don't
do this, your document will be listed as untitled by search engines). Also
add meta “description” and “keyword” tags if desired. 
<![if !supportLists]>·        
<![endif]>Create your title page and main menu. Try to make
them fit within the first image that displays on your reader's screen,
without scrolling. 
<![if !supportLists]>·        
<![endif]>Link your main menu to its destination files and
bookmarks. 
<![if !supportLists]>·        
<![endif]>Create section menus if needed and link them to their
destination files and bookmarks. 
<![if !supportLists]>·        
<![endif]>Create any internal links. An internal link links a
word or phrase to a destination. 
<![if !supportLists]>·        
<![endif]>Create backward links from link destinations. Always
give your reader a way to return to the file or point of origin after taking
a link. 
<![if !supportLists]>·        
<![endif]>Add alternative text for graphics. Then, if your
reader chooses not to display graphics when reading your document, their
titles or descriptions will still be visible. 
<![if !supportLists]>·        
<![endif]>TEST YOUR DOCUMENT! Proofread it online. Take EVERY
forward and backward link. Note the time it takes graphics to display. Read
it as your reader would. 
</td>
</tr>
<tr>
<td width=181 valign=top style='width:135.9pt;padding:0in 5.4pt 0in 5.4pt'>
<![if !supportEmptyParas]> <![endif]><o:p></o:p>
</td>
<td width=409 valign=top style='width:306.9pt;padding:0in 5.4pt 0in 5.4pt'>
<![if !supportEmptyParas]> <![endif]><o:p></o:p>
</td>
</tr>
<tr>
<td width=181 valign=top style='width:135.9pt;padding:0in 5.4pt 0in 5.4pt'>
<h3 align=right style='text-align:right'>Quick Reference Guide</h3>
Click and print for a handy reference
</td>
<td width=409 valign=top style='width:306.9pt;padding:0in 5.4pt 0in 5.4pt'>
Today, functional design, visual appeal and code
simplicity are all within your reach. Make them a part of your document
planning and your design will work well in any format.
</td>
</tr>
</table>

© 1997-2002 Linda
Moore: Instructional Designer, Writer, Editor

P. O. Box 5158 Dearborn, MI 48128<o:p></o:p>

Phone: (313) 277-8542 Fax: (313) 277-8541 <a
href="Email:%20lmoore@gr-lakes.com">Email: lmoore@gr-lakes.com</a>

</div>

</body>

</html>

Return to Article