CREATE A WEB PAGE WITH LINKS TO DOCUMENTS USING

CREATE A WEB PAGE WITH LINKS TO

DOCUMENTS USING MICROSOFT

WORD 2007

For Denise Harrison’s College Writing Course students

Table of Contents

Before you Start: Create documents, Create a Folder, Save documents in Folder ................. 1

Saving the Word Document as a Web Page ............................................................................ 2

Creating and Modifying Tables to hold the webpage content ........................................... 3 - 6

Adding Text and Pictures ................................................................................................. 6 - 7

Modifying the Table’s Cell Width and Hiding Borders ............................................................ 8

Adding a Background Color to the Page ................................................................................ 8

Creating Links to Documents ................................................................................................. 9

Uploading to the Server .................................................................................................. 10-11

Viewing your Web Page on the Internet using a Browser .................................................... 11

Page | 1

CREATE A WEB PAGE USING

MICROSOFT WORD 2007

For Denise Harrison’s College Writing Course

(Instructions for Word 2003 included)

Before You Start Creating your Webpage:

Create the 3 documents that you will be including as linked documents

from your webpage:

• Release Form

• Philosophy Statement

• Reflection

Create these using MS Word and save as Word 97-2003 documents (with a .doc

extension). Do NOT save them as Word 2007 documents (with a .docx

extension)… docx documents won’t open properly after uploading them to the

web server!

Better… after creating the documents in Word, save them as PDF files.

o If your computer has Adobe Acrobat installed, you can just choose Print

then choose Adobe Acrobat as the “printer”. If you don’t Acrobat

installed, you can download a free PDF maker from:

http://www.cutepdf.com/Products/CutePDF/writer.asp

You will also need to download and install the PS2PDF converter free from:

http://www.cutepdf.com/download/converter.exe

Follow the instructions on how to create the PDF document available on the

above website but essentially, you PRINT your document but instead of choosing

a printer you choose Acrobat PDF or CUTEPDF as the “printer”.

The PDF will be “printed” as a .pdf file to whatever location you choose…

choose your website folder and you’ve completed the first part… saving your

docuements into your website fo

lder!

Create a new folder on your jump drive and name it anything you want. For

this tutorial we are going to name the folder website.

Save all your documents (.doc or .pdf (no docx files allowed) into the website

folder

that you just created. You must do this before you start constructing your web

page and creating links from the web page to these documents.

Page | 2

Open Microsoft Word and Immediately Save it

as a Web Page

• After opening Microsoft Word 2007, before you do anything else, do the

following:

• Click on the VIEW TAB on the Main Toolbar (at the top) and choose WEB

LAYOUT from the Document Views Section on the Toolbar.

• Now save the word document as a web page.

o Click on the OFFICE BUTTON (top left corner of Word Toolbar)

then choose SAVE AS > OTHER FORMATS

o In the SAVE AS WINDOW:

 Make sure the Save as Type is Web Page Filtered (*.htm; *.html).

 Change the Filename to index.htm

 Make sure before you save, that you’re saving it into the folder,

website.

[In Word 2003: Choose View > Web Layout then just choose Save as Webpage and

make the changes in the SAVE AS WINDOW as described above]

If you stop and want to reopen and edit the index.htm page you just

created, you have to open it in MS Word. Double clicking the file will

open it in a web browser because it’s now a web page. Either open

word then open the file in word or right click on the file and choose:

Open With > Word

Page | 3

Adding Content to the Web Page:

YOU MUST CREATE A “TABLE” TO CONTROL HOW TEXT AND

PICTURES WILL BE ORGANIZED ON YOUR WEB PAGE.

It’s not necessary, but it is very helpful to make a quick drawing on a sheet of paper that

shows how everything (Page Title, Blocks of Text, Pictures and Links to documents) are

going to be placed on your web page.

After creating the drawing you can then draw a large rectangle around all the objects on

your page to represent a Table, then draw lines that divide the table into “cells” (Rows

and Columns) which will be needed to position the different elements of your page to

prevent wrapping.

Above is an example of a web page laid out on paper. You can use this or create your

own layout:

Page | 4

Now you can start creating your webpage

Make sure you’re still using the WEB LAYOUT view you set at the beginning of this tutorial.

1. Create a TABLE to HOLD EVERYTHING

• Click on the Insert tab on the Main Toolbar

• Choose Table

• To create the table and cells (rows and columns) as seen in the “drawing” above:

o Drag the mouse cursor over the Table Layout boxes to create a table with 2

Columns and 6 Rows.

o A 2 column, 6 Row table will be created on your page that looks like this….

 You should create the number of rows and columns that you need

for your layout.

[ In Word 2003: Choose Table > Insert > Table then enter the # of Rows and Columns.]

The table will be placed on the left side of the page (Aligned to the Left). You can leave it

Aligned to the Left or you could CENTER THE TABLE ON THE PAGE (Recommended).

2. Centering the Table on the Page

• Right click anywhere on the Table

• Choose Table Properties from the drop down box that opens

• Under “Alignment”, click on the CENTER icon.

• The table will move to the center of the page.

Now you need to Merge Columns on some of the Rows to match the layout design

you drew when planning your web page

3. Modify the Table’s Rows/Columns to match the drawing

• To merge columns on the top row (for the Page Title)

• Click and drag a selection over the left and right columns on the top row

• The “selected cells” on the tope row will be shaded.

Page | 5

• Now Right Click on the shaded cells and choose MERGE CELLS from the

drop down box.

• The Top Row now has only one column (or one cell) as shown below

Repeat this procedure for all the rows that you need to merge the cells on that row

into one cell.

To match our example page layout drawing, the cells on rows 2, 5 and 6 were

merged… one row at a time as shown below:

Congratulations! You now have a Table with Rows and Columns that match the

layout you planned. You use these cells to control how Pictures and “blocks” of

text are arranged on the page.

But before you start inserting pictures or typing text into the cells, there’s

one last thing you should do….

4. “Lock” the Table Width so the Table doesn’t change widths

when viewed as a webpage on different computers

• Right click anywhere over the table and choose Table Properties

• In the Table Properties Window

o Click on the Preferred Width check box

o Enter “8” into the type-in field.

o Leave the “Measure” set to “inches” (Don’t choose Percent!)

• The table will resize to 8 inches wide… this is the typical width that will look

good in most browsers. It may look too narrow on your computer if it’s set to a

really high resolution but don’t worry about that.

Page | 6

5. SAVE!!

• Because you already saved the “Word” Document as a “Web Page”, you only

need to choose “SAVE” to save the webpage with the changes you made.

• As a reminder, the webpage you saved should have the filename: index.htm

Adding Text

• This is simple: Just click inside the cell where you want to type-in text and type it

in. The text will automatically “wrap” within the cell

• Use the toolbar to left, center or right justify the text within a cell, change the font

style, size, color, etc.

Adding Pictures

• Click inside a cell

• Choose Insert > Picture from the top tool bar

o The picture will be inserted into the cell where the cursor was positioned.

More than likely, the pictures you insert will be larger than the cell

width. If so, the entire table width is also changed beyond the 8”

“Preferred Width” that you set up earlier. This needs to be fixed by

Resizing the Picture…

College Writing I Demo

Gary Mote

Release Form Philosophy Statement Reflection

Problem Description:

Asldf asdf haksf asdf asdlkfjhas dfalskjdh

faslfh asdfkj asdgf asdf askf asdgf asdfjk

asdflkj asdfkj asdjfg asdgf asdgf asdjfg

Page | 7

RESIZING THE PICTURE TO FIT THE CELL

• Select the Picture by clicking on it once

• Click and drag one of the corner “handles” (little blue ball) toward the

opposite corner to reduce the size of the picture.

o Do this until the table and cell no longer get smaller as you resize

the picture.

• Click and drag one of the corner handles out from the picture to make it

larger.

WATCH OUT!! If the table starts to get bigger as you make the picture

larger, you may have to change the width of the cell holding the picture

so the table width stays at 8”. If so, see next step….

Change the width of columns for a “better fit”

of text and pictures

• Position the cursor over the “edge” or “border” between to cells.

• The cursor will change to this: ||

• Now click and drag the border between columns to the left or right, up or down if

between rows, until it “fits” the picture or text.

College Writing I Demo

Gary Mote

Release Form Philosophy Statement Reflection

Problem Description:

Asldf asdf haksf asdf asdlkfjhas dfalskjdh faslfh asdfkj asdgf

asdf askf asdgf asdfjk asdflkj asdfkj asdjfg asdgf asdgf asdjfg

alsdjf as falskjf asd faskf .

Aldjf aldkfj alfj asdfasdflkj sadfasf

Asldkfjaslkfj asdlfj asl;kfj as

Page | 8

If you want to change the width of one cell

independently of the cell widths on other rows

• As you change the width of the border on the third row, notice that the width of

the border between columns on the 4

row change as well (and vice-versa).

• To change the width of a cell (and column borders) on the 4

row without

changing the width on the 3

row do the following:

o Select both cells on the 4

row by clicking and dragging a selection over

both cells on that row

o Right click on the two selected cells

o Choose Merge Cells

o Right click on the 4

row (now with only one column) and choose Split

Cells

o A new border will be created between the two cells on the 4

row which

can be adjusted independently of the 3

row.

To “hide” the borders of a table

• Open Table Properties as previously described

• Click on the Borders and Shading button

• Choose “None” under the Borders Tab

• The borders will “disappear”

Suggestion: In Word 2007, to “show” the borders so you can select them and change

their position, select Table Tools > Layout > View Gridlines. They will appear as

dotted lines but will be invisible when viewed as a web page. In Word 2003, the

borders remain “visible” as light gray lines but will disappear when viewed as a web

page.

Adding a “Background Color” to your Web

Page (if desired).

• Choose Page Layout > Page Color from the top tool bar. Select a color.

• Watch….If the color is too dark, black text will be hard to read. Change the text

color if necessary

Note: You should not add a picture as a background. It generally “tile” and look bad.

Page | 9

Creating Links to your Documents (or Media)

• Type-in text that you will use as a hyperlink to the document or media

o Select the text, like the words: Reflection

o Right click on the selected text and choose Hyperlink

o In the Hyperlink Window, just click on the document that you want to

link the selected text to.

 Note: You should already be inside the website folder where your

web page is saved when the Hyperlink Window opens and the

Existing File or Web Page button on the left should be selected.

o The filename of the linked document or media clip will appear in the

Address: window at the bottom

o Click OK

• Changing Hyperlink and Followed Hyperlink Text Colors

Sometimes when you turn text into a hyperlink, the text is hard to see because the

color is changed. You can fix this….

o On the Page Layout tab, in the Themes group, click Theme Colors

o Click Create New Theme Colors

o Under Theme colors, select the colors that you want to use for Hyperlinks

and Followed Hyperlinks

o In the Name box, type a name for the new color theme.

o Click Save.

[In 2003: If you want to change the appearance of all text hyperlinks in a document,

do the following:]

• Open the document that contains the hyperlinks you want to change.

• On the Formatting toolbar, click Styles and Formatting .

• Do one of the following:

o To change the appearance of hyperlinks, in the Pick formatting to

apply box, right-click the Hyperlink style, and then click Modify.

o To change the appearance of followed hyperlinks, in the Pick

formatting to apply box, right-click the FollowedHyperlink style,

and then click Modify.

o Note If the Hyperlink or FollowedHyperlink styles do not appear in

the Pick formatting to apply box, in the Show box, click All Styles.

• Select the formatting options that you want, or click Format, and then click

Font to see more options.

• To use the modified Hyperlink or Followed Hyperlink style in new documents based

on the same template, select the Add to template check box in the Modify Style

dialog box.

• You can also use themes (theme: A set of unified design elements that provides a look

for your document by using color, fonts, and graphics.) to change the appearance of

hyperlinks and other elements in your document or Web page.

Page | 10

Uploading Your Web Site to the Kent Personal

Server

• Open MY COMPUTER

• In the Address Bar for My Computer type-in:

ftp://mail.kent.edu/public_html

• Enter your Flashline User Name (don’t include the @kent.edu)

• Enter your Password

o You should now be connected to the server and looking INSIDE the

public_html folder on the server. This is where you have to upload your

website folder, website.

• Copy and Paste or Drag and Drop your website folder, website, from you

local computer (probably saved on your Jump Drive) to the open My Computer

Window.

o Note: You should close all open word documents (web pages) on the

local computer before uploading them to the server. If you don’t, you

might get an error message when you try to upload.

• That’s it 

Your website is now on the server and can be viewed by anyone in the world…. If

they know the correct “URL” address to find it. See the next section for viewing

your finished page on the web.

Page | 11

The example below shows how you open the My Computer window and login to the

Kent Personal Server then open another window that has your website folder, resize

them on the monitor so you can see both windows side by side then drag and drop the

website folder from the Local Computer to the Kent Personal Server.

Notice that the Address bar on the Kent Personal Server shows that you are INSIDE

the public_html folder on the “server” … the Circled Area …

Your Local Computer Kent Personal Server

(your jump drive) (ftp://mail.kent.edu/public_html)

Viewing your Website on the Internet using a

Browser

• Open Internet Explorer (or any Browser)

• In the Address type-in:

http://www.personal.kent.edu/~yourusername/website

• Your web page should open in the browser.

o Note: If you didn’t name your folder, website, then you would replace the

word “website” at the end of the above URL address with whatever word

you used for your folder.

o If you didn’t name your webpage, index.htm, then it will not open either.

If you named your page anything other than index.htm (all lower-case

letters), you will have to add that filename to the end of the URL, after

folder name/