Lab 12:  Web Page Enhancement, Recipe Editing

Overview

This lab will focus on extending our web site by adding an additional page. We will work with ordered and unordered lists using recipes. We will select a recipe from the  http://www.recipe.com/ edit the recipe, and add it to our home page.

 

Pre-requisite:  Successful completion of Lab 10, Public Home Page

 

Required Materials: 

 

References: 

 

Procedure

  1. Visit the web and search for a recipe of interest to you. If you have a favorite recipe of your own feel free to use it for this assignment. A suitable recipe for this project should have a list of all required ingredients and list of all required cooking steps in sequential order. The recipe also should not be too long. 

  2. Minimize the browser window for now, we will need it later for reference.

  3. Open your web on tigerweb. Open Start/Programs/MS Expression Web. In the main menu (on the top of the page) select Site/Open Site. In the field Location at the top of the dialog box type in the location of your web space on tigerweb: sftp://tigerweb.towson.edu. After a little while you should see a logon box asking you to enter your username and password. Type in your TU username and password.

    MS Expression Web now displays the contents of your web folder on the tigerweb server. MS Expression Web opens a blank page and allows you to compose a web page. 

  4. We will now create an additional page for our web site and later link this page to our home page. Create a new page by selecting File / New / Page. Under the General category select HTML.

  5. First, lets give the page a colored background. Choose Format / Background. Click on the drop-down box next to Background in the Colors section. Select the last option, More Colors. You now see a color wheel. Choose any color of your choice for your recipe's background. Make sure to choose a color that does not take the reader's attention away from the text.

  6. We also want to modify the text which is displayed in the title bar of the browser. Select File / Properties to access the page properties and add a title in the Title: text box, for example "Joe Student's Recipe Page".

  7. We are now ready to start typing our recipe. Don't worry too much about formatting at this point, we will format the recipe when we are finished typing it.

    NOTE:  Don’t copy and paste the recipe from a web page directly into the MS-Expression Web page as you’ll also be copying some invisible html code into Expression Web that will mess you up when you go to edit your recipe page.

     

    You should type your recipe info directly onto your MS-Expression Web page, or type that recipe without any fancy formatting features into a fresh Word document, and then copy and paste from your document onto the Expression Web page.

  8. Type an appropriate title. Press the enter key 2 times. Type your ingredients list.  As previously mentioned, do not copy and paste from the web, this often includes invisible formatting that will prevent us from using standard formatting commands. Make sure to type each ingredient on a separate line (press the enter key at end of each line). When you are finished typing all ingredients, press the enter key 4 times.

  9. Now type the list of cooking steps. At the end of each cooking step, make sure to press the enter key to start each step on a new line. When finished typing all the cooking steps, press the enter key 2 times.

  10. Type the URL from your original recipe to give proper credit to the author of your recipe.

  11. Enter your own name, and date at the bottom of the recipe.

  12. We will now format our recipe using the bulleted list and numbered list feature of HTML. Highlight the title and select any large font of your choice using Format / Font. If you wish, you can also choose a different text color or special effect for your title.

  13. Next, select all ingredients with your mouse so that they appear highlighted. Choose Format / Bullets and Numbering from the menu.  Click on the Plain Bullets tab and select a bullet style of your choice. Click OK. This will format our ingredients list as a bulleted list.

  14. Our next step is to format the cooking steps as a numbered list. Select all cooking steps with your mouse so that they appear highlighted. Choose Format / Bullets and Numbering from the menu. Click on the Numbers tab and select a numbered list style of your choice. Click OK. This will format our cooking steps as a numbered list.

  15. To save the document, choose File / Save As under the File menu. Name the file Lab12recipe.html and make sure that the file type shows Web Pages.

  16. Continue to work on your recipe. Format the text attractively and experiment with MS Expression Web's  format features (e.g. bold, italics, underline, highlighter). 

  17. Save your recipe as Lab12recipe.html.

  18. Check the HTML code that MS Expression Web created. Click on the SPLIT tab at the bottom of your editing screen. Click on the Design tab to return to editing mode.

  19. Link this recipe page to your home page you created in the last assignment. Add a link to the recipe on your home page next to the link for your flash animation/picture. To link your new page to your Home Page, you will have to access your Home Page and add a link that will take the user to your new page.

  20. Access your Home Page by double-clicking on your Home Page filename index.html. Type a description for your new web page, for example: "Cheesecake Recipe". Highlight the description. Click on the link tool (the globe with the chain) to create a hyperlink. When prompted for the URL, delete the "http://"- part and write the filename of your page in the URL text box (for example: recipe.html). The URL should contain only the filename, not the http://..... reference).

     

        My Flash Greeting Card  |  Cheesecake Recipe |

     

  21. Enhance your page using clipart or other images. Search the web for a suitable animation or image. Right-click on the animation or image you wish to insert. Select Copy. Switch to MS Expression Web (click the MS Expression Web application button on the task bar). In your folder list to the left of the screen, scroll up to the very first line. It should have the picture of a folder and say something like https://tigerweb.towson.edu/jstude1. Right-click on this line. Select Paste. If you can't see your file listed in the Folder list, press the F5 button to refresh the display. Click to select a location on the page where you would like to insert your animation or image. Use Insert / Picture / From File, select your animation or image and insert it. 

  22. Check your page on the World Wide Web. To look at your web page, open Internet Explorer and type: https://tigerweb.towson.edu/jstude1 (replace jstude1 with your TU user name) in the address box of the browser. 

  23. File Permissions. To ensure all pages and files have the proper permissions and will show correctly, please use the following procedure: 

     

    Please note that sometimes permissions need to be refreshed. You can reset these permissions at any time without harming the content that is already published. Simply go to the address https://tigerweb.towson.edu/ , log in with your TU username password, and click the button Reset Permissions, and make sure to refresh your page in the browser.

 

Grading Criteria

Recipe Page must contain

 

Submitting your URL for grading:

 

Send an e-mail to webster@towson.edu  with the Subject Heading “COSC 109.102: Submitting Lab Assignment #12

 The body of your e-mail should simply contain the URL for your original home page: (example: https://tigerweb.towson.edu/jstude1) 

 When I open your webpage with the URL you provide, I should be able to see the original “My Flash Greeting Card” link, and the new “Cheesecake Recipe” link.

 

example: My Flash Greeting Card | Cheesecake Recipe |