Web Pages Made Easy With MS Word
Office X, 4/03

About Web Sites

A web site contains many files: pages, graphics, sounds, and other multimedia.  Every page must be saved with a name and the extension .html or .htm so that computers will recognize it as a web page.  Your web site will be kept in a folder labeled web backup on the faculty web server.  In it will be your homepage, which will be called index.html.  You may save other pages as well to this folder, and Word will automatically create separate folders for each page you save.  These folders will not contain the page itself, but other files that go with it such as images and sounds.

After you have created your web folder, (see Getting Started with a Web Page) you are ready to begin.

Creating and Saving a Simple Web Page

  • open a Microsoft Word document
  • type in any text you wish
  • insert any images or clip art you like (see below)
  • go to File/Save for the Web and save in your web backup folder
  • call your page index.html
    • although Word puts in .htm, for the index, or home page, you need to change it to .html, this allows your browser to recognize it as a your home page

To understand the web creation process, it is a good idea to look in your backup web folder to see what Word has done. You will see your index.html file and an index_files folder if you have added any graphics. Index.html is your home page. The index_files folder will contain any other files (such as images) that your web page will need. When you move your web pages over to the web server, you will need to move this folder as well. Notice also that your page now has an Explorer icon. Double clicking on the page will open it in Explorer.

Previewing Your Page

  • locate your backup web folder
  • double click on your index.html file
  • your page will open in a browser

Editing Your Page

If you haven't closed your page, just edit as usual. If you have closed your page, launch Word and do the following

    • go to File/Open
    • in the Show drop down dialogue box, choose All Readable Documents
    • navigate to your document and open it
    • edit as usual

Periodically go to File/Save to update your files.

Hint: Dragging your HTML page onto your Microsoft Word Application icon forces it to open in Word instead of in Explorer. When editing documents, this can be a big time saver. Having an alias of Word on the Dock (X) or the Desktop can really speed up the editing process.

Adding a Background Color

  • go to Format/Background
  • pick a color for your page, or:
  • click Fill Effects to select a texture or gradient
  • go to File/Save

Adding ClipArt

  • go to Insert/Picture/ClipArt

.

  • select your picture from the clip art gallery
  • click Insert
  • for more images, click the online button at the bottom left of the clip gallery window or use the sites listed below

Copyright free images can be found at http://www.pics4learning.com/ http://www.kidsclick.org/psearch.html, http://sunsite.berkeley.edu/ImageFinder/, http://www.ncrtec.org/picture.htm, http://www.suelebeau.com/graphics.htm, and http://school.discovery.com/clipart/. To easily create and download custom banners and buttons, try using http://www.cooltext.com/ or http://www.3dtextmaker.com/.

Using a Graphic from the Internet

  • OS 9, click and hold the mouse button down on the graphic
  • OS X, hold down the control key while holding the mouse button down on the graphic
    • select Copy Image
    • click on your web page
    • select Edit/Paste
    • align your graphic

Hint: Your graphic is treated as text, and can be move and aligned in the same way. For instance, to move it down to the next line, click to its left and hit return. To center a graphic, move it to a blank line, select it and use your align center button.

Using Themes

Themes apply specific formats to elements of your page. For instance, a theme may change all links to green and create a blue background. By going to Format/Theme, a theme can be selected. Themes also change horizontal lines and bullets. To add a horizontal line to your page go to Insert/Picture/Horizontal Line. To add bullets to your existing text, select the text and click the bullet button on the toolbar or formatting palette. To add a bulleted list from scratch, click the bullet button and begin typing your list items, hitting the return key after each item is typed. End the list by clicking the bullet button again.

Create a Second Page for Your Site

Remember that all web page names will be part of your URL (http address). Keep them short and simple, without spaces, special characters or slashes. If you wish to distinguish between words, use capital letters or underscores (MyWebPage.htm or my_web_page.htm). All pages should be saved in your web backup folder.

If you have a web page open, Word allows you to quickly create a new one by either clicking the New Web Page button on the left of the toolbar or going to File/New Web Page. Go to File/Save to save your document to the same folder as your index. Remember to name your document appropriately.

If you don't have a web page open, go to File/New Blank Document. Go to File/Save As Web Page to save your document. Give it an appropriate name, leaving the .htm extension, and save it to your web backup folder.

Link to Another Page in Your Site

  • click on or open the page you wish to link from
  • select the text or picture you wish to be the link
  • go to Insert/ Hyperlink
  • click the document tab

Either:

  • click the select button and navigate to the page you wish to link to, OR
  • use Recent Documents (system 9) or Select (system X) to link to your page, OR
  • type the exact name of the page you are linking to in the link to field
  • save for the web and replace.

    Linking to another Web Site

  • highlight the text or graphic you wish to turn into a link
  • go to Insert/Hyperlink
  • click on the Web Page tab
  • copy and paste the entire URL into the Link to field (use apple-c to copy, apple-V to paste), OR
  • type in the exact URL (including http://) in the Link to field
  • click OK
  • save for the web and replace your document

    Creating an E-mail Link
    If you would like parents or students to be able to e-mail you directly from your page, you can create an e-mail link.

  • highlight the text or graphic you are using as the link
  • go to Insert/Hyperlink
  • click on the E-mail tab and type in your email address in the To field
  • click OK
  • save for the web and replace

Creating Links to Text and Graphics on the Same Page (anchors)

  • highlight the text or graphic to which you want to link
  • go to Insert/Bookmark
  • type a name (no spaces) for your bookmark
  • click Add
  • hightlight the text from which you want to link
  • go to Insert/Hyperlink
  • click the document tab
  • next to the Anchor box, click locate, and locate your anchor

    Now you are ready to post your web page to the faculty server.

    First, you must access the server via system 9 or system X.

    To transfer new html pages and images, just drag the files and folders you created into your faculty web folder. Each time you edit your page in your backup folder, the new pages must be dragged to your web folder.

    View Your Site on The Internet

  • go to:
    www.millburn.org/faculty/yourwebfoldername

    **It is a good idea to edit your work in your faculty data folder, and then drag revised files to the web server. Replace any old files when necessary. This way you will always have a backup. Every time you upload your web pages, visit your site and click refresh or reload to see the changes. You should always look in both browsers because there will be differences.