Creating a Simple Web Page Using WORD

1
Creating a Simple Web PageUsing WORD
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 codingNo Training No support
Tool-basedVery Limited TrainingNo Support
Easy to use Training available Support available
3
Design your Page

• 8.5x11 paper
• Draw/outline what you want
• This will save you COUNTLESS trial and error
  hours

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
• www.colby.edu/username/filename

5
Creating the Source Document
6
Preparing the Document

• Open Word
• File gt New gt 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

7
Creating the Framework (1)

• Create a table that provides the editable spaces
  you have designed
• We want a webpage like this

8
Creating the Framework (2)

• So we will create a table like this
• Table gt Insert gt Table
• 3 rows
• 2 columns
• Merge columns in row 1 and 3

9
Inserting the Picture

• Position cursor in correct cell
• Insert gt Picture gt From File
• Browse to file
• Click Insert

10
Typing the Title
DRAGONS

• Position cursor in correct cell
• Type Dragons
• Adjust font, size

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).
12
Make the Table Invisible (1)

• To remove borders around table
• Select the entire table
• Right click on selection
• Click on TableProperties

13
Make the Table Invisible (1)

• Click on Bordersand Shading
• Click on None

14
Inserting Hyperlinks

• Select text to make a link
• Select type of link
• Insert gt Hyperlink gt enter URL in Address

selected text displays here
15
Previewing the Web Page

• File gt Web Page Preview
• Edit Word Document as required

16
Saving Your Web Page

• File gt Save As gt Web Page (htm, html)
• Do NOT use Filtered
• This removes WORD functionality for future
  editing
• DO use
• Single File Web Pagesaves all graphics and text
  in a single fileor
• Web Pageweb page and graphics saved separately

17
Moving Files to your Web Space
18
Accessing Your Web Space

• Programs gt your ftp program
• FUGU, Fetch, SSH, etc Detailed Instructions
• http//www.colby.edu/administration_cs/its/support
  /telnet.cfm
• Layout
• Your machine on left
• Remote space on right
• Link to remote site
• colby0
• Your username
• Your password

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 file into that folder
• Drag the folder Web Page Files into that folder

20
Accessing the Web Page

• www.colby.edu/youraccountname/filename.mht
  (single file web page)OR
• www.colby.edu/youraccountname/filename.htm
  (web page)
• Example http//www.colby.edu/mregnell/DRAGONS.mh
  t

21
Questions? Comments?Contact Mel
RegnellMel.Regnell_at_colby.eduext. 4217