21
February 2006 Colby College ITS Creating a Simple Web Page Using WORD
| Date post: | 22-Dec-2015 |
| Category: |
Documents |
| Upload: | solomon-griffith |
| View: | 214 times |
| Download: | 1 times |
February 2006 Colby College ITS
Creating a Simple Web PageUsing WORD
February 2006 Colby College ITS
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 TrainingNo support Tool-based
Very Limited TrainingNo Support
Easy to useTraining availableSupport available
February 2006 Colby College ITS
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
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
February 2006 Colby College ITS
Creating the Source Document
February 2006 Colby College ITS
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
Creating the Framework (1)
• Create a table that provides the editable spaces you have designed
• We want a webpage like this: TITLE
PICText
Text
February 2006 Colby College ITS
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
Inserting the Picture
• Position cursor in correct cell• Insert > Picture > From File• Browse to file• Click Insert
February 2006 Colby College ITS
Typing the Title
• Position cursor in correct cell• Type “Dragons”• Adjust font, size
DRAGONS
February 2006 Colby College ITS
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
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
Make the Table “Invisible” (1)
• Click on “Bordersand Shading…”
• Click on None
February 2006 Colby College ITS
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
Previewing the Web Page
• File > Web Page Preview• Edit Word Document as required
February 2006 Colby College ITS
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
Moving Files to your Web Space
February 2006 Colby College ITS
Accessing Your Web Space
• Programs > [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
February 2006 Colby College ITS
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
February 2006 Colby College ITS
Accessing the Web Page
• www.colby.edu/~[youraccountname]/filename.mht (single file web page)OR
• www.colby.edu/~[youraccountname]/filename.htm (web page)
• Examplehttp://www.colby.edu/~mregnell/
DRAGONS.mht
