Syllabus Aesthetics HTML Fireworks Flash Dreamweaver

 

 

 

Home

Syllabus
Syllabus
Class Calendar
Contact information

Projects
1- Web Analysis Paper
2 - Personal HTML Web Site
3 - Fan Site
4 - Company Logo
5 - Web Art
6 - Dreamweaver Web Site
7 - Final Exam

 

 


Assignment 3: Plant World Web Site

This Project Web Site assignment requires you to build a Web site for the Plant World Co.. The finished web site will include a home page and a second, detail page. Click on the images below to view full-sized images.

 

FIGURE 2-1: The finished home page

Plant World Home page

Click on image to view a full sized image

FIGURE 2-2: The finished Desert Plants page

Desert Plants web page


Click on image to view a full sized image

 

Upon completion of this assignment, you should be able to:


dot Creating a Home Page

The following Step-by-Step shows techniques for entering html tags to a text document and publishing it as a web page.

  • Step-by-Step 3.1: Creating a Home Page
    1. Create a folder named plantworld in your personal file.
    2. Right-click and save all of the following to your plantworld folder:
    3. Open Notepad and enter html tags to create a home page for Plant World. Click here if you need to review these tags.
    4. Type <title>Plant World Home Page</title> in the head section of the document.
    5. Save as default.txt. Save as default.htm

      Note: A home page must be named either defaul.htm or index.htm.

    6. Place the insertion point in front of the closing </body> tag and press ENTER.
    7. Move the insertion to the blank line created in the previous step.
    8. Type <img src="plantworldlg.jpg /> and then press the ENTER key.

      Note: This is the HTML tag for inserting an image with the file name plantworld. jpg. As long as this image file is located in the same location as the web page, the image will appear.

    9. With the insertion point on the blank line after the image tag, type
      <h1><font color="#000066">Welcome to Plant World!</font></h1>
      and then press the ENTER key.

      Note: This is the HTML tag for adding a navy blue font color to the Home Page heading.

    10. With the insertion point on the blank line after the heading, type
      <p>For the finest in indoor and outdoor plants, come to Plant World! Plant World is the premier nursery for all of your planting needs. Our professional landscape design artists can visit your home and make recommendations for plants to use in your home or your yard.</p>
      as the first paragraph in the HTML file.
    11. Press the ENTER key twice.
    12. With the insertion point on the next blank line, create an unordered list with square bullets of the following text. (Click here to review the tags foe unordered lists.) Use heading size 2 for the two headings.

      Our company

        • Founded in 1999 by Jared Adam Smith
        • Headquartered in Fairfield, Connecticut
        • 38 store locations throughout New England

      Our services

        • Landscape design
        • Planting and maintenance
        • Online information for all types of plants

    13. Press the ENTER key twice.
    14. Click immediately to the right of the y in the <body> tag on line 5 and then press the SPACEBAR.
    15. Type background=“greyback.jpg” as the attribute for the body tag.
    16. Click immediately to the right of the closing </ul> tag you added in step 12, and then press the ENTER twice.
    17. With the insertion point on a blank line, type
      <p>To learn more about the Plant World products and services, please browse the Plant World Web site, where you can find information on all types of plants, both for indoor and outdoor use. You also can learn about this month's featured desert plants, which have a natural beauty that can enhance any landscape!</p>
      and then press the ENTER key.
    18. Locate the words "desert plants" that you just typed in step 18. These are the two words that will be created as a link. Click immediately to the left of the d in desert.
    19. Type <a href="desertplants.htm"> to start the link
    20. Click immediately to the right of the s in desert plants. Type </a> to end the link and then press the ENTER key.
    21. With the insertion point after the closing text of the last paragraph any landscape!</p>, type
      <p>Have a question or comment? Call us at (206) 555-PLANT or e-mail us at plantworld@isp.com. </p>
      as a new paragraph of text
    22. Click immediately before the p in plantworld in the email address. Type
      <a href="mailto: plantworld@isp.com"> to end the e-mail link
    23. Click immediately after the m in com in the e-mail address text. Type </a> to close the e-mail link.
    24. Save as default.txt. Save as default.htm. Preview in web broswer. Make sure that all images appear and test the two links you created.

 

 

dot Editing the Second Web Page

The following Step-by-Step shows techniques for creating links and editing text in a web page.

  • Step-by-Step 3.2: Links and More
    1. Open the desertplants.txt document you downloaded in Step 2 above.
    2. Click immediately to the left of the B in "Botanical Name" on line 28. Type <b> as the start tag
    3. Click immediately to the right of the colon (:) in Botanical name: on line 28 and then type </b> as the end tag
    4. Repeat the first two steps to bold the other three occurrences of the phrase, Botanical name:, on lines 41, 53, and 65
    5. Click immediately to the right of the </b> on line 28. Type <em> as the start tag
    6. Click immediately to the right of the at the end of Agavaceae on line 28. Type </em> as the end tag
    7. Repeat the first two steps to italicize the other botanical names on lines 41, 53, and 65
    8. Click immediately to the left of the word, DESERT, on line 7. Type
      <font color="#000099"> as the start tag
    9. Click immediately to the right of the word, PLANTS, on line 7. Type </font> as the end tag
    10. Highlight the words <!--Insert Agave image here --> on line 23
    11. Type <img src="agave.jpg“ align="right" alt="Agave" width="212“ height="203" /> and do not press the ENTER key
    12. Highlight the words <!--Insert Desert Spoon image here --> on line 40
      Type <img src="desertspoon.jpg" align="left" alt="Desert Spoon“ width="245" height="198" /> to insert a left-aligned image with wrapped text
    13. Highlight the words <!--Insert Golden Barrel image here --> on line 52
    14. Type <img src="goldenbarrel.jpg" align="right" alt= "Golden Barrel“ width="292" height="197" /> to insert a right-aligned image with wrapped text
    15. Highlight the words <!– Insert Prickly Pear image here --> on line 64
    16. Type <img src= "pricklypear.jpg“ align="left“ alt= "Prickly Pear" width="250“ height="255" /> to insert a left-aligned image with wrapped text
    17. Highlight the words <!--Insert right break clear here --> on line 37 and then type <br clear="right" /> as the tag
    18. Highlight the words <!--Insert right break clear here --> on line 61 and then type <br clear="right" /> as the tag
    19. Highlight the words<!--Insert left break clear here --> on line 49 and then type
      <br clear="left" /> as the tag
    20. Highlight the words <!--Insert left break clear here --> on line 73 and then type <br clear="left" /> as the tag
    21. Click immediately to the left of Arizona on line 76 and type
      <a href="http://www.desertmuseum.org">       to add the text link
    22. Click immediately to the right of Museum on line 77 and type </a> to end the tag
    23. Click immediately to the left of the <font> tag on line 26
    24. Type <a name="agaveamericana"></a> to create a link target named agaveamericana
    25. Click immediately to the left of the <font> tag on line 39
    26. Type <a name="desertspoon"></a> to create a link target named desertspoon
    27. Click immediately to the left of the <font> tag on line 51
    28. Type <a name="goldenbarrel"></a> to create a link target named goldenbarrel
    29. Click immediately to the left of the <font> tag on line 63
    30. Type <a name="pricklypear"></a> to create a link target named pricklypear
    31. Highlight the words <!--Start unordered list here --> on line 24
    32. Type <ul type="square"> and then press the ENTER key
    33. Type <li><a href="#agaveamericana"> Agave Americana </a></li> and then press the ENTER key
    34. Type <li><a href="#desertspoon"> Desert Spoon</a></li> and then press the ENTER key
    35. Type <li><a href= "#goldenbarrel">Golden Barrel</a></li> and then press the ENTER key
    36. Type <li><a href="#pricklypear"> Prickly Pear</a></li> and then press the ENTER key
    37. Type </ul> and then press the ENTER key
    38. Click to the left of the < symbol on line 6 and then press the ENTER key
    39. Position the insertion point on line 6 and type <a name="top"></a> as the tag
    40. Position the insertion point on the blank line 44 and then type
      <p><a href="#top"><font size=-1>To top</font> </a></p> as the tag
    41. Press the ENTER key
    42. Highlight the HTML code, <p><a href="#top"><font size= -1> To top </font> </a></p>, on line 44
    43. Click Edit on the menu bar and then click Copy
    44. Position the insertion point on line 57
    45. Click Edit on the menu bar and then click Paste
    46. Press the ENTER key
    47. Repeat the second step on the previous slide to paste the HTML code on lines 70 and 84
    48. Click immediately to the left of <img on line 7
    49. Type <a href="plantworld.htm"> as the tag and then press the ENTER key
    50. Click immediately to the right of alt=“ “/> on line 8
    51. Type </a> as the tag
    52. Click immediately to the left of alt=“ “/> on line 8
    53. Type border=“0” and then press the SPACEBAR

 

Top of Page

 

Home . Syllabus . Web Aesthetics . HTML . Fireworks . Flash . Planning . Graphic Design . Dreamweaver