Lesson 1: Planning the Mock Web Site

Overview:

Eventually your group will be developing a web site for a fictitious company. Care must be taken to make the look of the home page as authentic (real) as possible, but all other dependent pages in the site can be blanks or dummy pages. The company may sell papercIips, baskets or whatever you wish to sell (as long as it is legal in all 50 states). Or, your company may be service oriented and do repairs, cleaning, consulting, etc. In this lesson your group will work through some planning activities. The first stage involves getting to know the nature of your company, the product or service you market, and something about your client. The second activity is to sketch the look of your first page or home page. Finally, you use Dreamweaver to set up the file structure for your site.

Challenge:

To develop a working plan for a web site that will effectively market your company's service or product..

Learner Outcomes:

At the completion of this exercise, you will be able to:

1. use site functions to plan and or organize a web site.
2. accurately identify critical elements of the design
3. plan the design and development with appropriate level of detail and complexity
4. identify, prioritize and organize the tasks appropriately
5. develop a plan with the level of detail and sophistication appropriate to purpose and audience

Activities:

1. Assign roles to each member of the group:
   • coach: keeps the group on task and ensures that deadlines are met
   • reporter: collects completed work and ensures that the completed product is suitable for submission
   • file librarian: maintains the original files on the public drive and serves as a clearinghouse for any file revisions
2. Have your group come to consensus concerning the nature of your company. Print or get a copy from your instructor of the following worksheet: Market Analysis.
3. Sketch the Home page to your site,and include these items:
• navigation buttons (Use the Flash buttons available in Dreamweaver 4.0 and include a java rollover effect.)
• focal graphic that is befitting of your company's image (Incorporate Dreamweaver Layers on the graphic)
• a logo (Make the logo an image map so that portions of it link to pages on your site)
• contact information
• a mission statement (a brief statement that projects your company's unique image and will leave a favorable impression upon customers/clients)
4. Also, print, fill out, and hand in the storyboard worksheet (the same one you did in Unit 4).
5. Set up a folder on the public drive in which all group members have write permission.
6. You must now set up the file structure for your Mock Web Site from Dreamweaver's Site Window. You may want to refresh your memory of how to define a site in Dreamweaver by viewing the directions in the "Planing" section of the Dreamweaver Guided Tour for using Site functions. Along with the home page create all dependent pages. The dependent pages are all the pages that are linked directly from the home page. Content is not a concern for dependent pages. It is, however, worthwhile to learn how to create pages from within the Site Window because it is a very visual way to plan your web site's structure. Another reason for creating the dependent files is that once you get to lesson three you'll need to have multiple files in order to do site maintenance. What follows are directions for setting a web site's structure once you are in the Site Window:
• Right click in the Local Folder view. Click New File. Name the file index.html. Right click on index.html and click on the option to "Set as Home Page". Now the file index.html has been designated as the site's home page.
• Create your dependent files in the same fashion except don't set them as home pages. Call them whatever makes sense to you, but be sure to include the html extension on the file name.
• If it is not yet in view, make the Site Map visible by clicking on the icon in the top left corner of the Site Window.
• Select the file icon for the file named index.html>Click on the little compass icon that appears just to the right of the file icon and drag the arrow to touch a dependent file in the Local Folder view.
• Follow the same process to link all the dependent pages to the homepage.

Resources/Online Documents:

• Dreamweaver's Guided Tour

Wrap up:

Submit the completed Market Analysis and the sketch of the home page for review. Show your instructor the Dreamweaver Site Window with the visual display of your company's file structure.