Skip Navigation
*To search for student contact information, login to FlashLine and choose "My Campus" tab.

Search by campus:

CREATE A WEB SITE USING MICROSOFT WORD 

Sorry that the following instructions are so long, but if you want to successfully create a website with pictures and backgrounds that appear and links that work, you must follow each of the following instructions VERY CAREFULLY.   With that preliminary word of caution, you can get started.  If you don’t understand how to do any part of this tutorial, it’s best to STOP and GET HELP before continuing since it can take a lot longer to fix problems than to do it right the first time.

Before You Start, Do This!

  • Create a folder on your USB JumpDrive, if you have one. 
    If you don’t have a USB JumpDrive, you can use a floppy disk, but if you run out of space on the floppy disk, you can not continue to create more pages on another floppy disk. . .  If you do, the links won’t work!   You can only build your website in ONE LOCATION on ONE MEDIA.
  • Name the folder, “mywebsite”. 
    You can use any name for this folder that you want to use though for this tutorial we will call it, mywebsite.  This folder will hold all of your webpages when you save them.
  • Save any documents that aren’t web pages inside the mywebsite folder.
    These are documents that you want to create links to from your web pages.  ie:   If you want to create a link from your homepage to open (or download) your resume as a word document (not as a webpage), then the word document must be placed inside the mywebsite folder for the link to work properly.  You should also place any media files, like windows media videos or sound/music files like mp3s inside this folder.
  • Scan Pictures for use on your web pages:
  • Scan images using 95 to 100 dpi resolution setting, depending on the scanner your using.  If  you use the SMS lab scanners, they default to 97dpi.
  • Save your scanned images using JPG format | High Quality
    • Do not save the scanned images INSIDE the “mywebsite” folder.  Instead, you should save the scanned images  outside the mywebsite folder since you won’t need them after you insert them into your webpage and save the page.
    • If you already scanned your images (or are using digital pictures taken with a digital still camera) and they are too big, after resizing and/or cropping them in word, you can Compress them to Web/Screen resolution using the Format Picture tools in MS Word AFTER you insert them into the web pages you will be creating.  You will be given instruction on how to do this later.

SPECIAL NOTE AND EXPLANATION ABOUT SAVING YOUR “ORIGINAL” PICTURES: 
You don’t have to (in fact, you shouldn’t) save the original pictures that you plan on inserting into your web pages inside the mywebsite folder.   

WHY? 
Because copies of these original pictures will be created for use on your website.  If you have the originals inside your mywebsite folder, you are going to have two copies of the same picture in the folder, using up unnecessary space. 

Instead, save the pictures in a different folder created OUTSIDE the mywebsite folder (you can create a folder called “pictures” and save them all into the “pictures” folder if you want).

After you insert a picture into a your webpage then save the webpage, copies of all the pictures on that page will automatically be created, and saved inside a folder that will also automatically be created inside the mywebsite folder. 

For example, if you inserted a picture from the “pictures” folder into your home page and saved your homepage with the filename, index.htm inside the mywebsite folder, then a folder named, index_files will automatically be created inside the mywebsite folder.  This folder will hold copies of the picture you placed on the homepage.  The web page no longer needs or uses the “original” picture.  Instead, it uses the copy of the picture created inside the index_files folder in the mywebsite folder. 

If all this confuses you, don’t worry…. It all happens automatically.   That’s the nice thing about creating web pages with Word.

OK....Let's Get Started!

Open MS Word

Select VIEW > WEB LAYOUT from the menu at the top of Word.

Let's start by making the page "pretty"... unless you want just a white background. To do this:

  • Choose FORMAT > THEME from the menu at the top of Word.
  • Choose a Theme from the selections listed then click OK.
  • The "theme" you chose will now appear as the background on your "web page".

Now, create a title for the page

  • Type in "Your Name's HomePage" at the top of the page.
  • Center this text

Next, create some links to the other pages you will be creating on your Web Site

Let's assume you want to have a Home Page, a Resume Page, a Pictures Page and a Links Page.

  1. On the line below your page title, type in the text: HOME RESUME PICTURES LINKS
  2. Leave some space (about 5 or 6 extra spaces) between each of the above words.
  3. Now select (highlight) the word, HOME, and choose INSERT > HYPERLINK from the top menu.
  4. In the "Address:" type in: index.htm then click OK.

    IMPORTANT: Use only lower-case letters for this filename.
  5. Select the word, RESUME. Choose INSERT > HYPERLINK from the top menu.
  6. In the "Address:" type in: resume.htm then click OK.
  7. Select the word, PICTURES. Choose INSERT > HYPERLINK from the top menu.
  8. In the "Address:" type in: pictures.htm then click OK.
  9. Select the word, LINKS. Choose INSERT > HYPERLINK from the top menu.
  10. In the "Address:" type in: links.htm then click OK.

    That's it. You've just created a basic home page with links to the other pages you will be creating. Now, it's time to save your home page.

Save your Home Page as a Web Page

  1. Choose FILE > SAVE AS WEBPAGE from the top menu.
  2. Select the "SAVE AS TYPE" as "WEB PAGE FILTERED (*.htm, *.html)
              NOTE:  The above is VERY IMPORTANT! 
  3. For the File Name, type in: index.htm
    VERY IMPORTANT!!! : USE ALL LOWERCASE LETTERS FOR THE FILENAME, index WHEN YOU SAVE YOUR PAGE AS A WEB PAGE. DO NOT USE UPPERCASE FOR ANY OF THE LETTERS
  4. Make sure that you are saving the page INSIDE THE MYWEBSITE FOLDER you created previously.  Also:Do not create a new mywebsite folder inside the mywebsite folder you already created!!!  If you aren't, navigate to the folder so the page will be saved inside the folder.
  5. Click SAVE and YES when you get the "warning" dialogue about not including Word Specific Tags.

    Note:
    Along with the index.htm file, a folder called, index_files will be created automatically if you added a Theme to this page or included any pictures on the page. The index_files folder is VERY IMPORTANT since it will hold properly linked copies of your Theme's background image and properly linked copies of all of the pictures you inserted into the page.  This will also happen for all the web pages you save if they have images in them, even background images.

Now lets change this page's title and resave it as a Resume Page, a Pictures Page and a Links Page

Essentially, what you are doing is using the Home Page with navigation links you just created and saved as a "template" for the other pages on your site. This way you won't have to recreate all of the links for each page you create. Also, the background will be the same on all the pages of your site for consistency.

  1. Type over your old title at the top of the page something like: "Your name's Resume Page"
  2. Choose FILE > SAVE AS WEBPAGE from the top menu.
  3. Select the "SAVE AS TYPE" as "WEB PAGE FILTERED (*.htm, *.html)
  4. For the File Name, type in: resume.htm
    Remember - That was the filename of the Hyperlink we made for the Resume Page in the previous steps.   Also remember that you named the hyperlink to this page using all lower-case letters so you have to do the same when you save this page.... and all of the other pages.
  5. Click SAVE and YES when you get the "warning" dialogue.

Do this again to create a Pictures Page:

  1. Type over your old title at the top of the page to read: "Your name's Picture Page"
  2. Choose FILE > SAVE AS WEBPAGE from the top menu.
  3. Select the "SAVE AS TYPE" as "WEB PAGE FILTERED (*.htm, *.html)
  4. For the File Name, type in: pictures.htm
  5. Click SAVE and YES when you get the "warning" dialogue.

Repeat these steps again to change the title of the Pictures page to your "Links" page and save it as: links.htm

Completing the Pages:

To work on the web pages you created, you will have to reopen them in MS Word. 

The last page you saved will still be open.  If you followed the directions above, that would be your links page.  To reopen the other pages so you can continue editing them, you can first open MS Word then open the pages one at a time OR you can open your mywebsite folder, right click on the page’s filename, then choose OPEN WITH and choose Microsoft Office Word. 

NOTE:  If you just double-click on the filename, the web page will open in an Internet Explorer window (because it has the .htm extension signifying that it is a web page) and can’t be edited. 

Add more text:

Adding text is easy…. Just type in the text you want on your page just like you do in Word.  You can align the text to the left, middle or right on the page.  Change the size, color, font, etc. as desired but stick to fonts that would be installed on any computer. 

HOWEVER: If you use a font that’s not on the person’s computer who’s viewing your website, your font will be replaced with Times Roman or Arial.  In fact, Times Roman and Arial are generally considered to be the ONLY fonts that are 100% safe to use for web pages.

One last item about web page text….. and this is a very important … you can not use tabs, spaces or indents to position text into columns for a web page.  It just won't look right when you view it as a web page even though it looks ok while you're editing it in Word.  This generally happens to those who try to create a “traditional” looking “resume” page.  If you want to control placement of text into columns so that it doesn’t “wrap” unexpectedly as the browser window size changes, you have to create and use tables with rows and columns of cells to “hold” your “blocks” of text.  The instructions on how to create tables are below.

Add links to external websites on the www

Text Links:

1.        Type-in a name for the website you want to link to, like KentStateUniversity.

2.        Highlight the name.

3.        Choose Insert | Hyperlink
(or highlight and right click on the highlighted text then choose “hyperlink”)

4.        In the Insert Hyperlink window, Type-in the full address for the website you want to link to:  ie:  http://www.kent.edu 

Note:  “Existing File or Web Page” is selected on the left column of the Insert Hyperlink window.

5.        Click OK

Picture Links:

1.        Select the picture you want to link to a website.
(For example, the Kent State Logo to the KentState website)

2.        Choose Insert | Hyperlink
(or right click on the picture then choose “hyperlink”)

3.        In the Insert Hyperlink window, Type-in the full address for the website you want to link to:  ie:  http://www.kent.edu

4.        Click OK

Create an E-Mail Link to yourself:

1.        Type-in text or insert an image to use as your link.

2.        Highlight the text or select the image.

3.        Choose Insert | Hyperlink
(or highlight and right click on the highlighted text (or image) then choose “hyperlink”)

4.       In the Insert Hyperlink window, under the Link to: column select E-Mail Address

5.        Type-in your email address  (ie: jdoe@kent.edu)

NOTE: “mail to:” will automatically be appended to your email address

6.        Click OK

Creating links to documents

1.        Type-in a name for the document you want to link to, like “Open or Download my Resume as a word document”.

2.        Highlight the name.

3.        Choose Insert | Hyperlink
(or right click on the highlighted text then choose “hyperlink”)

4.        In the Insert Hyperlink window, choose the file for the document you want to link to:  ie:  resume.doc Note:  Existing File or Web Page is selected on the left column of the Insert Hyperlink window.

VERY IMPORTANT!!!  If you create a link to a word, excel or pdf document that's part of your website, IT MUST BE INSIDE THE MYWEBSITE FOLDER before making the link.  You CAN NOT LINK TO DOCUMENTS ANYWHERE ELSE ON YOUR COMPUTER.  This is one of the most common mistakes made by students.  ie: Linking to a word document that was saved inside the My Documents folder.  This link will not work after you upload your website to the server since there isn't a My Documents folder on the server!

5.        Click OK

Inserting Pictures
You can “insert” pictures onto a page using one of two methods.

1.        Drag and Drop.  

·         If the pictures are saved on your removeable media, or anywhere else on the computer, simply open the folder where you saved your original images then drag and drop the image’s file onto the webpage.  If the image needs to be resized to fit the page, drag a “corner” handle on the picture to maintain the pictures aspect ratio.  You can also use the tools on the Picture Toolbar to crop, change the brightness/contrast, etc. as needed. 

·         You can also drag and drop a picture directly from an open webpage in Internet Explorer onto the web page you are creating in word.  Just position the 2 windows so you can see both of them at the same time on your desktop.  Resize, crop, etc as needed.

·         After resizing, cropping, you should then compress the picture (described below).

2.       Insert | Picture | From File

·         Position the cursor at the location on the webpage where you want to insert your picture.

·         Choose Insert | Picture | From File

·         Navigate to the folder where you saved the picture

·         Select the picture file

·         Click the Insert button

·         The Picture will appear at the cursor location you selected

To Compress images in MS Word:
Right click on an image then choose Format Picture from the drop-down window, Click on the Compress button in the window that opens, choose Web/Screen resolution and finally, choose Apply to All Pictures in Document.

Using TABLES:

Advanced Positioning of Pictures and Text on your Web Page

This “can” be difficult for some new web designers that aren't used to creating tables.  If it is, just place one picture per “line”, center it place text below or above each picture. 

Warning: If you don’t use tables, you can’t place more than one picture on a line since the pictures will “wrap” around each other depending on the resolution of the computer monitor and size of the browser window!  You also can't position text as a "block" next to a picture on the same line since the text will also wrap around the picture when viewed on a computer screen with a lower resolution than the one you used to create the page.

Aligning Pictures and/or Text on Web Pages:
Unlike a document you are creating for printing, you can only position text and pictures for web pages on the left, middle or right unless you use Tables with columns and rows of cells to hold the pictures and text.

Do not try to drag an image to another location on the page to position it as you would when just creating a word document for printing, format the picture for text wrapping or use indents or tabs to position text or images on the page. As mentioned above, it may look OK in Word, but when you view it as a webpage, your pictures and text won't necessarily be in the same place as when you "designed" the page. If you want more control over positioning pictures and text on a webpage, read on.....

To control the placement of images (and text) on a web page, other than the "default" left, centered or right justified, you MUST USE TABLES and CELLS.
For example if you have two images and want to place them vertically on top of each other and have text to the right of each image, you must create a table with 2 rows and 2 columns. Insert a picture into each of the two resulting cells on the left then type text into each of the two resulting cells to the right of each picture.

To create a table:

  1. Position the cursor on the page where you want to insert the table.
  2. On top toolbar select Table > Insert > Table
  3. Choose the number of columns and rows you want to create to hold your images and text.
  4. Choose “auto fit to contents” then click OK.
    Hint: Try the other settings to see what works best for you. You can always undo it and try something else.
  5. A table is created on your page
  6. This table will be "left justified".

    If you want your table "centered" on the page, now is the time to do that.
    To center the table on your page, click on the little box in the upper left hand corner of the table with the 4-way arrows in it. The entire table will be selected. Choose the Center Align Tool from the top toolbar.  The table will be centered on the page

  7. If you want, you can turn off the lines around the table and cells. These lines are called the table's "borders".

    To turn off a tables borders:

    A. Right click anywhere inside a "blank area" of the table (not on a picture or over text).

    B. Choose Table Properties.

    C. Click on the Borders and Shading button at the bottom of the Table Properties window that opens.

    D. Under Borders Setting choose NONE. Click OK then OK again to close this window.

    The borders are now off but there will be light gray lines around the table and cells so you can position pictures and text inside them. When you view the table in a web browser, you won't see the table borders.

RESAVE THE MODIFIED PAGES:

Make sure you resave all the pages you worked on as you finish them.  Remember to check that the page is being saved using  Web Page, Filtered (*.htm, *.html)

Note: If you inserted images on any of the pages or used a Theme template (Format > Theme), a folder with the same name as each of the filenames of your webpages will automatically be created. 

For example: If you named two of your pages, index.htm and pictures.htm, and have images on these pages, then folders called index_files and pictures_files will automatically be created inside your mywebsite folder. These folders will contain copies of the images used in each of these pages as well as any background images created when you applied a theme to a page.

These folders are VERY IMPORTANT! as you'll see later when uploading your pages to the server.

ALL DONE?
Let's Take a Look at Your Files:

Remember that you saved all of your pages on one disk or one "location" on your computer.  

·        For this tutorial, before you started creating your web pages, you should have created a folder on your USB JumpDrive and named it mywebsite. 

·        You should also have saved all of your “non-web page documents, (possibly a resume as a word “doc” or as a “pdf” file), into the mywebsite folder. 

·        Then, you created your web pages one at a time and saved them inside the mywebsite folder. 

·        In addition, if you inserted pictures onto your pages or applied a theme to your pages, additional folders were automatically created and saved inside the mywebsite folder.

Open the mywebsite folder.  Inside you should see:  

WEB PAGES YOU SAVED:

index.htm, resume.htm, pictures.htm and links.htm (and any other pages you created and saved)

ASSOCIATED FOLDERS THAT WERE AUTOMATICALLY CREATED AND SAVED INSIDE YOUR MYWEBSITE FOLDER

index_files, resume_files, pictures_files and links_files

SPECIAL NOTE: There won't be an "associated folder" created for pages that don't have images on them and/or that didn't use an image as a background.

Uploading Your Web Pages to the Kent Personal Server using the Internet Explorer Browser...

  1. Before you upload your webpages, you have to close all of the MS Word windows with your pages.

  2. Now, open Internet Explorer. Note: You can not use Firefox to do this!
  3. Enter the following URL in Internet Explorer : ftp://mail.kent.edu and hit the key.
  4. A "Log on as" window will open.
  5. Type-in your flashline user name and password
    For example, if your email is jdoe@kent.edu and your password is "password4me", you would enter jdoe for the user name and password4me as the password).
  6. Click the Logon button.
  7. The IE browser will open a new page in the browser.
    You "should" see a folder named public_html in your browser window.

    You are now connected to the Kent Personal Server!
    If you don't see this folder you can create one yourself by right clicking inside the browser window, choose NEW then FOLDER. Name the new folder, public_html (all lowercase!!!).
  8. Assuming you do see a public_html folder, double-click on it to open it.

    IMPORTANT: YOU MUST OPEN THE public_html FOLDER SINCE YOUR WEB PAGES AND “ASSOCIATED FOLDERS” CONTAINING EACH OF YOUR PAGE'S IMAGES MUST BE PLACED INSIDE THE public_html FOLDER!
  9. If you haven't created a web page before, the public_html folder should be empty. Resize the browser window and move it over to the right so you have room to work with two open windows... see the next step.
  10. Open the mywebsite folder (on your floppy disk, on your USB drive or wherever you saved all of your web pages.
  11. Drag and drop all of your web pages AND the “associated” folders that hold your page’s pictures (ie: pictures.htm AND pictures_files folder)  from your computer onto the IE Browser window.

NOTE: Sometimes, if your pages are still open in Word (in editing mode), they won't transfer to the server. If this happens, just close the pages (MAKE SURE THEY'VE BEEN SAVED AS FILTERED WEB PAGES) then drag and drop them into the public_html folder in your browser window.

Checking to See if Everything Works:

  1. Open anther Internet Explorer browser window. 
  2. Enter the URL for your web site. 
    For example: www.personal.kent.edu/~yourloginname

Note:  As described above, if you named your homepage, index.htm, then you won’t need to enter the page file name in the URL.  The browser will automatically open the index.htm file. If you named your homepage something other than index.htm then you will have to type in the full name of the file with the extension.

For example: www.personal.kent.edu/~yourloginname/webpagename.htm Also: web filenames are case sensitive! So, if you used capital letters in your filename for a webpage, you must use them in the URL.

After entering your URL, hit the return key and WahLah! You should see your home page! Try the links and if you did everything described above, everything should work.

Trouble-shooting Problems with Your Web Page

·         I can’t see my web pages on the web…..

The #1 reason people can’t see their web pages on the web is because they didn’t place them INSIDE the public_htmlfolder on the server.  Check this.  If they are outside of the public_html folder on the server, you will need to open the public_html folder and transfer your files and folders again as described above.

·         I can see the pages but can’t see the images…

The #1 reason people can’t see their images is because they didn’t transfer the “associated” file folders containing the images to the server with the web page files.  

DO NOT TRANSFER YOUR ORIGINAL IMAGES TO THE SERVER SINCE THEY WON’T BE THE IMAGES ACTUALLY LINKED TO THE WEB PAGES YOU CREATED! 

Make sure that you’ve transferred the associated file folders for each page into the public_html folder on the server.

  •  The layout of my images isn't the same as they were when I created the webpage.

The reason this happens is you probably didn't use tables to hold your pictures and text. To control the location of images and text on a web page you MUST USE TABLES!

 

-->