BCIS Business Computer Application

1 Creating web pages in Word (Web Assignment 1) In this assignment you will practice designing a set of four linked pages using Microsoft Word and some multimedia files. The end product may look as follows:

A. Setup tasks 1. You need to be able to see file extensions in your file manager (File Explorer, Finder, etc.) • On a PC, go to the control panel – Folder Options. In the View tab: un- check “Hide extensions for known file types”. • On a Mac, open a new Finder, in menu bar go to Finder>Preferences> Advanced tab, select “Show all filename extensions”. 2. Create a new folder wherever you intend to save your web page files to and name it [Lastname_First_Web Assignment1].

3. Find three to five image files and a short video file and copy them to this new folder. (You can use personal or generic public domain media for this assignment.) NOTE: You CANNOT create the web pages or links to any files “outside” of this folder, and then move everything into the folder later… IT WILL NOT WORK!

Create your page template 4. Start Microsoft Word.

5. Create a new blank document.

6. On the File tab, click Save as and navigate to the folder you created for this project. 7. In the File name box, type the file name: index.docx , and then click Save. This will be your home page. Create a navigation table 8. Change the document view to Web Layout.

9. Create a table in your document with one column and three rows and fill in the text like the sample below. HOME PAGE TITLE HOME PAGE 1 PAGE 2 PAGE 3 2 10. Center the table on the page, lock the table width to 9 inches 11. Change the background color. (Be sure to use a simple , light color that will not prevent viewing other items in the table) 12. Save your progress.

Create hyperlinks to future pages in your folder 13. Select the word HOME in the second row of the table and open the Insert Hyperlink dialog box. 14. Navigate to the folder you created for this project.

15. In the Address bar type index.htm (note the suffix!) then click OK. You MUST type in the entire filename with the .htm extension! This will create a hyperlink to your web homepage since the filename for your “homepage” will be, index.htm .

16. Repeat the previous steps for each page title in the second row of the table and use the corresponding name WITHOUT SPACES in the address bar. (Example: PAGE 1 will be hyperlinked to address page1.htm ) 17. Save your progress. 18. Use your knowledge of adding rows and splitting cells to modify the table to something similar to the image below.

NOTE: The key is to ALWAYS “Insert Rows” to create new Rows and to “Split” cells to make new Columns. Never Insert Columns. 19. Remove the table borders and show the gridlines. 20. Save your progress. (This is now your template for the rest of the pages) B. Create the base pages. Create your home page 1. Change “HOME PAGE TITLE” to “ your name’s Homepage ” 2. Do a “Save As ” and navigate to the folder you created for this project.

3. In the “Save as type” box, choose Web Page, Filtered (*.htm; *.html).

4. Click “ Change Title ” in the “Save As” dialog box and type your name followed by the word ‘homepage’. (See image below) 5. Click Save and then close the file. (If you receive a warning pop -up, read the warning and then click yes) NOTE: Because you already saved the Word document as index.docx, the web page filename will automatically change to “index.htm”.

3 Create the other pages 6. Open the index.docx file you created. 7. Save the file as a filtered web page with the name page1.htm 8. Repeat the process to create page2 and page3.

9. Close each web page. C. Create/edit content As we begin adding and editing content, get in the habit of saving your files often. (CTRL +S is your friend!) Adding multimedia You will need to decide what content you want to store locally in your folder and place each item there. For example, if you have a family photo called family.jpg stored somewhere on your computer, you will need to save a copy of it into your web folder you created for this project. Do this for any documents, images, videos, and audio files that you wish to use in your web pages before continuing.

1. Open the index.htm file in Word, delete the word “VIDEO” (to include the quotes) and leave your insertion point in that cell. 2. Insert an image file from the project folder. (You may need to resize the image so that it will fit properly in the table cell.) 3. Right click the image you inserted and open the Insert Hyperlink dialog box.

4. Navigate to your project folder if not already there. 5. Select the video file you saved earlier and then click OK. 6. Select the word “PHOTO” in your table and hyperlink another image from your folder. 7. Continue to add other links, multimedia, and text in various cells of your table using the multimedia items that you have stored in the project folder. 8. Save your progress.

9. Close all files. Adding other links 10. Open page1.htm in Word, select the one of the words “TEXT” in an available cell in your table and change the word to “GOOGLE”. 11. Select the new word “GOOGLE” and open the Insert Hyperlink dialog box.

12. Go to your web browser and navigate to Google.com. 13. Select the URL for the Google home page and copy it to the clipboard.

14. Come back to your Insert Hyperlink dialog box and paste the URL you copied into the Address box then click OK. 15. Repeat this process and add between two and five other external links to the current page or in page2.docx. 16. Save your progress and then close the file. 4 Adding an email link 17. Open page3.htm in Word, select the word “TEXT” in the third row, first column and change it to the words “Email me!” 18. Select the new words “Email me!” and open the Insert Hyperlink dialog box.

19. Click the “E -mail Address” button on the left of the dialog box. 20. Type your email address in the “E -mail address:” box, and then 21. Type “Web Contact” in the “Subject” box. (This creates a reference point for your incoming emails) 22. Click OK when finished. 23. Save your progress and then close the file. D. Check your work View your web page in a browser 1. Either open a browser and navigate to your index.htm file (use either “Alt” to display the “File” tab or type file:////c: in the Address bar, press enter and then navigate from there), 2. Or, navigate to the location where your index.htm file is saved and double -click it. This should launch it in your default browser.

3. You should now be able to click on the various hyperlinks and your home page should function like a normal website. Check all of your links to make sure they take you to where they should. If they do not, then go back to Word and fix them. Note: You cannot change the page through the browser, but must open the file with Word! View your source code 4. With your web browser still open and viewing your home page, right click anywhere in the center frame of the screen. 5. In the pop up menu, select “View Source” or “View Page Source”. The HTML code that was built to make your web page will display.

6. Read through some of the code and see if you can tell where certain items are that you placed in your web page in Word.  What is the code that is used to link to page2.htm?  What is t he code that links one of your images?

E. Submit your work. Zip the entire folder (use .zip and not .rar) and upload it .