Creating Web Pages with Word

Content Start

Trying to get your course content into Bb Learn? If so, skip this tutorial and use the Paste from Word mashup tool instead.

Word .doc

Web .html page

Created for print (fixed page size)

Created for web browsers (adjustable page size)

All content in a single document

Often made up of multiple files

Images are embedded files

Images are linked external files

Formatting is embedded

Formatting can be embedded or linked to an external stylesheet

Underlining shows emphasis

Underlining shows hyperlink

Serif font best for reading print

Sans-Serif font best for reading online

Can use tabs for basic formatting

No HTML code for tabs
Layout options plentiful Layout options limited

Since there are differences between Word Docs and web pages, we want to avoid using elements of word docs that do not translate to web pages.

Keeping track of files

  • Start by setting aside a specific folder for saving your web pages.  This will make keeping track of web resources easier.
  • The .htm file contains the text, the formatting, and links to the images.
  • All graphics (images, custom bullets, and background textures) are separate files, usually saved in an images folder, and must be .gif, .jpg, or .png filetypes.
  • Files must be in same relative location to each other when moved online. Don't change filenames or the links will break!
  • Save with filename using a-z and 0-9, no spaces (use underscore), avoid caps. Keep filenames simple and descriptive.
  • Save in area you set aside for web pages.
  • A file named index.htm will load automatically when you browse to the folder that contains it.
  • Keep the original word.doc in case you need to make revisions later.

Setting a style for web pages

Standard Formatting

Standard formatting is common between Word Docs and HTML pages.  Using standard formatting in Word translates your content to standards based HTML code.

Fonts

    • Use a common sans (without) serif font
    • Use of multiple fonts is discouraged
    • Convert custom text (formulae, arabic or hebrew characters, for example) into a graphic so it will display properly.

Headings

    • Don’t set font size and weight to make headings
    • Under Style, use Heading 1, Heading 2, Heading 3, etc.

Lists

    • Don’t type a number or dash for a list
    • Under Bullets and Numbering, use Bullets for unordered lists
    • Under Bullets and Numbering, use Numbering for ordered lists

Paragraphs

    • Set style as Normal
    • You can use the menu bar or style menu.

Menu bar

Changing Formatting

Don’t set font, size, and color individually

  • Use either dropdown menu to select style or open the styles panel in the menu:  Select Format/Styles and Formatting.

Style Menu

 

  • Under Styles, select Modify Style
  • The Normal style is the foundation of all the other styles.  When you change something like the font, all the other standard style fonts will change as well.

Adding Links

Types of Links

External

    • to an outside website
    • Paste the full URL (http://www.address.com)
    • Select New window - target frame

Internal within a single document (these are called anchors)

    • Links to a place within the current document

email

    • mailto:email.address@domain.com

In your file structure

    • Links to another web page or document within your files
    • Attention to file location is important; changes to file names or locations will break the links

Select Insert/Hyperlink

Adding an automatic Table of Contents

  • From the menu, select Insert/Reference/Index and Tables
  • Uncheck the Show page numbers option

Table of Contents

Adding Images

  • From the menu, Insert/From File
  • Resize, crop, and adjust
  • Format picture/Web/Alternative Text
  • Image will be compressed when saving as webpage

What cannot be done well in Word

Tables

Without a paid plug-in, Word cannot create accessible (ADA compliant) web tables.  If you cannot find another way to present data outside a table, you have a few alternatives:

  • Download and install the Accessible Wizard for Office plug-in: http://www.virtual508.com/
  • Use the Accessible Table Builder in the Tools and Wizards section: http://accessify.com/ (Copy and Paste the generated HTML code to a new page)
  • Dreamweaver 8 - professional level web development tool includes ability to create accessible tables

Complex Page Layout

  • Complex page layout, such as wrapping text around images, just isn't possible with Word.
  • Put large graphics on their own line.
  • Put small graphics inline with text.

 Important! Save as Web Page...

  • Don’t use the more easily found default option “Save as Web Page”
  • From the Menu, File/Save As/Web Page, Filtered
  • Provide a title to describe the page
  • Save with filename using a-z and 0-9, no spaces.  Keep name simple and descriptive.
  • Save in area you set aside for web pages.
  • When you are done, you will have a file and an images folder called, for example, word4web.htm and word4web_files.
  • Don't rename these files or you will break the connection between the .htm file and the images.
  • When you upload these files to a server, you will need to preserve the same relative file structure.

Putting it online

Upload to JAN or another web server

  • Use an FTP tool like Fetch (Mac) or CoreFTP (Windows) which you can download from ITS's Software Downloads page.
  • Connect to server "jan.ucc.nau.edu" with your username and password. Use secure FTP. The directory or path is "public_html"
  • Drag and drop your files into the public_html folder.
  • To view your page, open a browser and visit: http://jan.ucc.nau.edu/username/filename.htm