1. Creating a Simple Web Page Using WORD
February 2006
Colby College ITS

2. Before Starting… You must request personal web space
Choose a Web Authoring tool
Three options to create a page:
Learn HTML
Learn a web authoring tool
FrontPage
Dreamweaver
Use an Office Application and save the results as a web page
Raw coding No Training
No support
Tool-based Very Limited Training No Support
Easy to use
Training available
Support available
February 2006
Colby College ITS

3. Design your Page 8.5x11 paper Draw/outline what you want
This will save you COUNTLESS trial and error hours
February 2006
Colby College ITS

4. In This Tutorial We Will…
Create a WORD document that contains the elements, pictures, text and links you want on your page
Save the document as a Web Page
FTP web page files to a personal space
Access the web page at
February 2006
Colby College ITS

5. Creating the Source Document
February 2006
Colby College ITS

6. Preparing the Document
Open Word
File > New > Blank Document
You CAN create a document using a web page template
We are going to create a web page from an EXISTING document (easiest)
So we are creating a regular Word document first
February 2006
Colby College ITS

7. Creating the Framework (1)
Create a table that provides the editable spaces you have designed
We want a web page like this:
TITLE
PIC
Text
February 2006
Colby College ITS

8. Creating the Framework (2)
So we will create a table like this:
Table > Insert > Table
3 rows
2 columns
Merge columns in row 1 and 3
February 2006
Colby College ITS

9. Inserting the Picture Position cursor in correct cell
Insert > Picture > From File
Browse to file
Click Insert
February 2006
Colby College ITS

10. Typing the Title DRAGONS Position cursor in correct cell
Type “Dragons”
Adjust font, size
February 2006
Colby College ITS

11. Typing Text DRAGONS Position cursor in correct cell
Type text until space equal to picture is filled
Position cursor in next row
Type in remaining text
Dragons are commonly portrayed as serpentine or reptilian, hatching from eggs and possessing long, typically scaly, bodies; they are sometimes portrayed as having large eyes, a feature that is the origin for the word for dragon in many cultures, and are often (but not always) portrayed with wings and a fiery breath.
Although dragons (or dragon-like creatures) occur commonly in legends around the world, different cultures have perceived them differently. Chinese dragons (Simplified Chinese: 龙, Traditional Chinese: 龍; pinyin: lóng), and Eastern dragons generally, are usually seen as benevolent, whereas European dragons are usually malevolent (there are of course exceptions to these rules).
February 2006
Colby College ITS

12. Make the Table “Invisible” (1)
To remove borders around table:
Select the entire table
Right click on selection
Click on “Table Properties”
February 2006
Colby College ITS

13. Make the Table “Invisible” (1)
Click on “Borders and Shading…”
Click on None
February 2006
Colby College ITS

14. Inserting Hyperlinks Select text to make a link Select type of link
Insert > Hyperlink > enter URL in Address
[selected text displays here]
February 2006
Colby College ITS

15. Previewing the Web Page
File > Web Page Preview
Edit Word Document as required
February 2006
Colby College ITS

16. Saving Your Web Page File > Save As > Web Page (htm, html)
Do NOT use Filtered
This removes WORD functionality for future editing
DO use
Single File Web Page [saves all graphics and text in a single file] or
Web Page [web page and graphics saved separately]
February 2006
Colby College ITS

17. Moving Files to your Web Space
February 2006
Colby College ITS

18. Accessing Your Web Space
Programs > [your ftp program]
FUGU, Fetch, SSH, etc – Detailed Instructions:
Layout
Your machine on left
Remote space on right
Link to remote site
colby0
Your username
Your password
February 2006
Colby College ITS

19. Saving the Web Page Double click on public_html folder
If you saved a “Single File Web Page”
Drag the file into that folder
If you saved as a “Web Page”
Drag the folder ‘Web Page Files’ into that folder
February 2006
Colby College ITS

20. Accessing the Web Page
(single file web page) OR
(web page)
Example
February 2006
Colby College ITS

21. Questions. Comments. Contact: Mel Regnell Mel. Regnell@colby. edu ext
February 2006
Colby College ITS