MicrosoftTM Word

as a Web Page Creation Tool

Module W34c

Audience and Objectives | About this document

Contents

  • Lists 
  • Wherever you see this separator line in the document, clicking on it will return you to the Contents.

    Overview: MS Word as a Web Page Creation Tool 


    MS Word is primarily a word processor, and though it does a fairly good job as a Web page editor, that's not where it's true strength lies. One of the greatest strengths of Word in doing any kind of word processing, including the Web, is the active spelling checker, which puts a red squigly underline under spelling errors as you type. There's also a grammar and style checker, if feel the need for one.

    This document discusses MS Word to Office 97, but Word looks for updates on the Microsoft Web site. You may see this dialog: 

    MS Word has its own format for files. When it works with HTML files, it converts them into that format for editing; then when you save the file, it converts back to HTML. However: there are many formats Word can create that it can't save in HTML, so you have to be aware of the limitations of HTML as you work in Word. You may also find that Word changes what you do in subtle ways.

    Getting Started 


    Word offers some handy ways to start Web pages...

    Creating a Web page in Word


    When you open the File...New menu, you get a window offering lots of help. One of the tabs in this window is Web Pages, and it lets you either create a blank page or use the Wizard to lead you through, some appearance choices step by step. 

    "More Cool Stuff" allows you to link to the Microsoft Web site to update software and get other free goodies.

    Wizards


    The Web page creation wizard offers several layouts (including two- and three-columns) and several forms. In addition, it offers a number of coordinated styles. Though limited, it provides a good start.

    Saving


    When you save a document that starts out as HTML, Word remembers to use HTML as the format. However, if you're using a document that started out in some other way, you need to find the File...SaveAsHTML menu option.

    Headings, Styles and Fonts

     

    Word's Font Policies


    Word is very free about putting font names in the HTML code it writes. There is no simple option for "Variable" font, which leaves the actual font choice up to the browsers. In Word, you must choose a specific font. However, if you use Time New Roman, which is the default font with most browsers, Word will leave the font unspecified.

    Is it really better to leave the font unspecified? There's room for debate on this topic! My opinion: Leave the font unspecified (in Word, use Times New Roman) because:

    1. Unless you actually send a font along with your Web page, many viewers won't see it anyway, and...
    2. The font tags put in by Word can add significantly to an HTML file's size: one file I created in Word using Optima (my default font in Word) was slimmed down by approximately 25% when I removed the font tags from the HTML code.
    It's up to you, but you should be aware of the issues!

    Available Styles


    When creating an HTML document, Word's Style list may include both HTML and non-HTML styles. In particular, the styles Heading 1, Heading 2, etc. look like they might create <H1>, <H2> etc. tags. They don't! Instead, they specify a particular combination of sizes and non-standard fonts. You can get HTML <H1> tags, but they're further down the list of styles - you may have to scroll down to even see them. 

    Why not use Word's styles in an HTML document? Well, you can! But...

    • Because the use non-standard fonts, many of your users won't see them the way you do.
    • If you have many headlines, the font tags can be quite bulky: they can add 25% or more to the size of your file, if fonts are used throughout rather than standard HTML formatting tags.

    Size Options


    Word gives us rather simple size options in HTML mode: there is an Increase Size button and a Decrease Size button. Here are some sample sizes:

    Normal

    One size larger

    Two sizes larger

    Three sizes larger

    Four sizes larger (max)

    Back to Normal

    One click smaller

    Two clicks smaller (minimum)

    These translate to standard HTML sizes, and so can be used without hesitation. 

    Colors and Special Effects


    Word does not try to do special text effects in HTML. Effects such as Shadowed text which are available in Word documents are not available in HTML. 

    However, you can easily color your text and your page background. The Formatting Toolbar has a font color button  and a background button.  When you use this, be sure to check the More Colors and the Special Effects options. They offer a very nice variety of colors and textured backgrounds!

    If you want to format only a single cell in a table, don't use the background button: it colors the entire document's background! Instead, use the menu: Table...Cell Properties...Background.

    Links and Images

    Creating and Editing Links



    Insert a link using the Web toolbar button  , or menu selection Insert...Hypelink. The keyboard shortcut is <Ctrl>K. the dialog box that comes up lets you type or paste in a URL, or you can browse for one. There is a similar feature for internal anchors.

    You can insert anchors, or "bookmarks" as Word calls them, using the page by using the Insert...Bookmark menu selection.
     

    Inserting Images



    Images can be placed by using the Web toolbar button  , or use the Insert...Picture menu. 
    • The toolbar button  gives you a selection of clip art files from the Microsoft Office directory on your computer, plus the ability to navigate to any other disk or idrectory on the computer. There is a Search the Web button there as well; if you're on line, this brings up your default browser and a search engine.
    • The Insert menu gives you several other choices, including Clip Art, From File (same as the toolbar button), From Scanner, and a Chart option. If you're on line, Browse Web Art Page brings up your browser and points it to Microsoft's Clip Art Web page, which is updated monthly and allows both search and topical browsing.

    Working with Image Placement



    After you insert an image, you can play with its position and size. The easiest way to change an image's position is to select it and drag it with the mouse. Picture Format dialog
    Through the Format...Picture menu item, Word allows three position options, with control of distance between the picture and the text: text wrapping with the picture on the left, text wrapping with the picture on the right, and no text wrapping around the picture.

    You can also control the size of the picture by selecting it and dragging the "handles" at the edges to change the size. Hint: use the handles at the corners to change picture size with a minimum of distortion.

    Lists


    Word provides good support for lists. However, support for multi-level indented lists is not good when you're typing an HTML document...

    Simple Lists


    • Word easily supports single-level HTML lists, like the one you're looking at now. This is an "unordered" (bulleted) list.
    • Numbered lists are also supported...

    Numbering Styles



    Word offers several styles of "ordered" (numbered) lists: you can select:
    1. Numbers
      1. arabic (normal) numerals 
      2. roman numerals
        1. capital
        2. lower case
    2. Letters
      1. capital
      2. lower case

    Multi-level Indented Lists


    Tables

     

    Creating and Editing Tables


    Spanning Rows and Columns


    Tables as a Layout Tool


    Editing the HTML Directly

     

    Document Information and Meta Tags


    General HTML Editing



     About this document...

    Audience:

    For people who are familiar with MicrosoftTM Word and would like to use it as a Web page creation or editing tool.

     Objectives:

    When you successfully complete this lesson, you will be able to... 
    1. Create and save a document as a Web page using MS Word
    2. Use appropriate headings, styles, and fonts
    3. Access HTML document information and meta tags
    4. Create links
    5. Create ordered and unordered lists
    6. Create tables: normal and with cells spanning rows and columns
    7. Insert images and provide some control over their placement
    Note: Converting existing MS Word documents to HTML is treated in a separate module, W36c "How to Convert Microsoft Word Documents into Web Pages".

    Module :

    This document is part of a modular instruction series in Computer Information Systems. For more information, see the overview or the list of modules in this series, W: World Wide Web. This document has been used in the following classes: 

    Author:

    Laurence J. Krieg

    Institution:

    Department of Computer Information Systems, Washtenaw Community College
    History:
    Original: 29 Nov 1998
    Last modification: Monday, 31-Aug-2009 11:48:06 EDT
    Copyright:
    Copyright © 1999, Laurence J. Krieg.
    Instructors: You may point to this file in your Web-based materials.
    Students: you may make a copy for your personal use.
    All other uses: contact the author, Laurence J. Krieg for permission. Email krieg@ieee.org