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

2. February 2006Colby College ITS Before Starting… You must request personal web spacerequest 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

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

4. February 2006Colby 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

5. February 2006Colby College ITS Creating the Source Document

6. February 2006Colby 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

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

8. February 2006Colby 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

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

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

11. February 2006Colby 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). Chinese dragonsSimplified ChineseTraditional Chinesepinyin European dragons

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

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

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

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

16. February 2006Colby 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]

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

18. February 2006Colby 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.cfmhttp://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. February 2006Colby 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

20. February 2006Colby College ITS Accessing the Web Page www.colby.edu/~[youraccountname]/filename.mht (single file web page) ORwww.colby.edu/~[youraccountname]/filename.mht www.colby.edu/~[youraccountname]/filename.htm (web page)www.colby.edu/~[youraccountname]/filename.htm Example http://www.colby.edu/~mregnell/DRAGONS.mht http://www.colby.edu/~mregnell/DRAGONS.mht

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