04/20/23 1

07- Word Processing

Building a Website Using

Microsoft WordPlease visit http://www.drivehq.com

and sign-up the free account using verified e-mail

Zaipul AnwarIPROM, UNIKL

04/20/23 2

Contents• Conceptualizing your website• Creating HTML in MS Word• Using tables, formatting text and page• Using graphics• Putting things together: Linking documents• Uploading files to the server (DriveHQ.com)• Useful Links

Note: I assume you know how to use MS Word for word processing.

04/20/23 3

Conceptualizing• Target audience?

• Students; other parties who may be interested

• Information to share?• Personal info and resume; class schedule and

deadlines; notes and handouts

• Size of the website?• Navigating; Organizing and updating

• Frequency of updates?• Some info are static; others need to be updated often

• Layout?• Look at other sites as examples• Experience helps a lot

04/20/23 4

Working Example• I would create a website that has

• Pictures and columns with information • Links to other external websites

• You actually need to have some basic knowledge in using a photo editing software like Photoshop, GIMP or Paint.net

04/20/23 5

HTML in MS Word• Create a LOCAL FOLDER to store all the files for the

website• C:…\desktop\test-site

• Open MS Word (2000, 2003, or XP)• Type in the contents the usual way, in tables• Save file as type “Web Page” or “Web Page, Filtered”

(.htm or .html)• Normally the first page of your website should be named

index.htm to give the server a default page to display when your web address is called (for security and convenience), but in the case of DriveHQ.com you can name it with any name.

• Give useful names to the other files • Avoid long names and spaces in file names

• To preview in Firefox or Internet Explorer : • Double click on the file or type c:..\desktop\test-site\index.htm in

the address bar

Use tables to manage the layout

04/20/23 6

Note that in HTML there are no such things as tab spacing. Therefore, if you use a lot of tabs some of your

documents may not convert properly.

IMPORTANT

If you have problems with your document lining up like you want it, then USE TABLES!

Steps in managing the table

04/20/23 7

1. Click on the Insert Table in the toolbar (or choose Table, Insert, Table from the menu bar).

2. Select how big you want your table to be (number of rows x number of columns).

3. Then click on the grid to insert the table. Don’t worry if the table turns out to be too big or too small because you can change it later.

4. Start entering your content in the table.5. Use the tab key to move from left to right in

the table. Once you reach the end of the row hit tab again to move to the next row (or to start a new row if you are at the bottom of the table).

6. Table cells work similar to spreadsheet cells. You can select alignment settings, etc. for each individual cell, row or column.

7. Right-click on the table and then choose Properties from the pop-up menu to edit the properties of your table.

8. Word will automatically adjust column width based on what you type in a cell. However, you may still need to make some manual adjustments. Do so by placing your mouse pointer on the vertical line to the right of the column you want to adjust. When your mouse pointer turns into a two-way arrow. Hold down your left mouse button and drag the line to the right or left.

04/20/23 8

• More adjustments for the tables:• You may want to remove the borders• Move the picture into the left cell and the contact information

into the right cell• Adjust the cell sizes

• Consider: • May have its own formatting: background color, alignment,

borders, etc. • Can put a table within a table for more complicated layouts

Steps in managing the table (continue)

04/20/23 9

Preview of sample website layout using table (created in MS Word XP) – later remove the border line of the table by selecting

“no border” in MS Word

04/20/23 10

Formatting Text and Page• Paragraph formats

• Normal, Headings, Hyperlinks, Bulleted, etc.• Alignment: left (default), center, right, justify, indent

• Font properties• Type, size, color, bold, underline, italicize, blinking,

etc.

• Page properties• Background color, background image, themes (later)

04/20/23 11

Using Graphics• Position the cursor where the graphics will be

placed• To do:

• Insert Picture From File• Locate and select the picture• Resize the picture:

Right click Format Picture Size• Modify the other picture properties• Save the html file

• Hints: • Edit pictures using a photo editor for better results• MS Word saves a copy of the picture in a folder

called filename_files (e.g. index_files).

04/20/23 12

Inserting Images1.Choose Insert, Picture, From File from the menu bar.2.Locate the image that you want to insert into the document.3.Double-click on the image to edit some of its properties.4.To help you align your pictures properly, it is a good idea to insert a picture in a table cell that you’ve created ahead of time. (See earlier section on “Inserting Tables.”)

04/20/23 13

1. Locate a non-copyrighted image on a website.2. Right-click on the image.3. Choose Save Image As or Save Picture As (depending on which web browser

you are using).4. Locate where you want to save the image to (preferably wherever you are saving

the web pages you working on).5. You will not need to enter a file name unless you want to name the file something

different than it is already named.6. Do not change the file type or this could cause the image to not display properly

on your website.7. Click Save.

Notes about Images:1. The two common image types that are used for web pages are JPG or GIF. Any

other format used may not show properly on other users’ web browsers.2. You may scan an image in, import images from a digital camera, or download

images from the web to use in your web page.3. You can use Microsoft’s clipart option. When you use clipart it will be saved in a

sub-folder when you convert your document to HTML. 4. Make sure this sub-folder is uploaded with the rest of your website. This will be

explained further when we get to the FTP portion of this handout.5. If you’re having trouble finding an image, try one of these Web sites:

Microsoft’s Design Gallery: http://dgl.microsoft.com/default.asp6. Google’s Image Search: http://www.google.com and choose the Images tab.

Saving images from the Internet

04/20/23 14

Preview of sample website layout after inserting the image files

Inserting Hyperlinks

04/20/23 15

1. Select the text you want to make a link by holding down your left mouse button and dragging across the desired text.

2. Choose Insert and then Hyperlink from the menu bar (or CTRL + K).3. The first field (Text to Display) should have the text that you selected

already inserted.4. In the address field type the name of the file to which you want to link.5. Click on the OK button.6. Your selected text should now be blue and underlined, indicating that it

is now a hyperlink.

04/20/23 16

Insert hyperlink to the website

Put hyperlink here to http://www.apple.com/macosx/features/300.html.Go to Insert tab, click to “Hyperlink” and key in the link

04/20/23 17

Notes About Links• If you are linking to another file in the same directory as the page that

contains the link, simply make the link filename.htm.

• If you are linking to another website, then the link format needs to be ex.: http://www.whatever.com.

• If you are linking to a file that is contained in a sub-folder of your web directory then the link format needs to be subfolder/filename.htm.

• For creating an e-mail address link the format needs to be, ex.: mailto:username@institute.edu.my. The mailto: tells the web browser to launch the user’s e-mail client and insert your e-mail address in the TO: field. If you try this feature in the computer labs, it is normal to get an error message since there are no e-mail clients currently set up in the labs.

• All files are stored in the same folder as my index.htm.

Hints: • To have a page open in a new IE window, do

Hyperlink Target Frame New Window• Do not leave “dead” links, i.e., do not put links to files/pages that do not (yet)

exist

04/20/23 18

Uploading files to webserver (ex.: DriveHQ.com)

• Log-on to DriveHQ.com• Make sure you have the folder wwwhome• Copy all files and folders in c:\desktop\test-site to

wwwhome . You may use Windows Explorer or other free version of FTP software ex.: Smartftp.com or DriveHQ’s own FTP Software: DriveHQ FileManager

• In the web browser’s address bar type http://www.drivehq.com/web/yourname/index.htm• index.htm should show up

• Hint: • Organize your website files by using subfolders for different

sections (e.g. for each subject you learn, for pictures, etc.)• For updates, upload only the updated and all related files

04/20/23 19

Screenshot of uploading files to the webserserver at DriveHQ.com using

Windows Explorer

1. At Windows Explorer type: ftp://ftp.drivehq.com. 2. Go to File, Login as.. Key in your Username & Password

04/20/23 20

Screenshot of uploading files to wwwhome at DriveHQ.com using DriveHQ Filemanager

Drag to wwwhome

Preview webpage in your browser(ex: http://www.drivehq.com/web/zaipul/index.htm)

04/20/23 21

04/20/23 22

Some Useful Links• MS Office

• http://office.microsoft.com/en-us/assistance/default.aspx

• Basic MS Word Tutorial• http://www.baycongroup.com/wlesson0.htm

• Creating Web Pages Using MS Word• http://www.domainstobuy.com/support/

msword_website.php• http://www.archiva.net/mstutorial3web.htm

04/20/23 23

Thank you.

Creating a website is a life-skill.

Enjoy doing it!