Creating Web Pages with Word
Trying to get your course content into Bb Learn? If so, skip this tutorial and use the Paste from Word mashup tool instead.
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 is common between Word Docs and HTML pages. Using standard formatting in Word translates your content to standards based HTML code.
- 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.
- Don’t set font size and weight to make headings
- Under Style, use Heading 1, Heading 2, Heading 3, etc.
- 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
- Set style as Normal
- You can use the menu bar or style menu.
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.
- 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.
Types of Links
- 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
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
Adding an automatic Table of Contents
- From the menu, select Insert/Reference/Index and Tables
- Uncheck the Show page numbers option
- 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
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