Assignment #6

RCC Fall 2009 CIS/CAT-76B Dreamweaver
Dreamweaver CS4

50 Points
Due Thur Oct 27 at start of class

Before you attempt this assignment, you are required to have read and understood the information contained within the Assignment #0 document, which is available on the class web site. To avoid unnecessary point loss, make sure that you turn in all of the required printouts and staple them together in the order indicated within this document.

Part 1: "Lesson 7: Fine Tuning Your Workflow"

Follow the steps below to learn about "Fine Tuning Your Workflow" (from lesson 7 of our textbook) and to produce the correct printout. Be careful to read all of the steps below before you begin your work.

1. Read pages 187 - 203 and perform all lesson steps on those pages, with the following additional notes.
2. Your goal is to produce a printscreen (screen shot) of your work from within Dreamweaver with your screen looking as close as possible to the screen shot shown below. If you follow along with the steps in this lesson, you'll be pretty close to what you see here. To make sure you've got everything arranged as needed, examine the screen shot below carefully and compare it to your own screen, and pay close attention to the checklist of items appearing below the screen shot in the following steps below.
   
   
   
3. Here are some points to keep in mind to help you make sure you've got your printout with all the important things. Points will be given for each item indicated below. It is recommended that you use these as a checklist before you create your printout.
• Your full name should be entered as the Title of both documents. As such your full name should display in the screen shot as the title of the active "About.html" page, in place of the "Untitled Document" which displays in the screen shot above.
• Pay close attention to the arrangement and status of the panels along the right-hand side. Yours should look as close to the same as the one shown above, including the floating "AP ELEMENTS" panel, the Favorites panel with its 2 exact items, the CSS panel (set to "current" instead of "All"), and the Files panel showing the site is defined and displaying the sites files (at least about.html and index.html should be displaying there.) Make sure your floating "AP ELEMENTS" panel is not obscuring any of the other items mentioned in this list as something that will be graded. This set up of panels should mostly have been saved earlier as part of "CSS Layout" workspace, which should be your active named workspace when you create this printscreen.
• Index.html has its guides showing and About.html has its grid showing.
• Index.html has its lake image showing and About.html has its tree and forest images showing. These 3 images were inserted within their appropriately drawn AP Divs. The lake image and tree image should be the selected items in their pages, as reflected in the tag selector area of both pages.
• As demonstrated in the book and shown here, the Index.html and About.html windows are tiled vertically.
• Of your two pages, the active page should be About.html with the tree image currently selected so that its properties are showing in the property inspector, and the pages 5 AP Divs are showing in the floating AP Elements panel.
• Both Index.html and About.html windows are zoomed to 90% or somewhere between 90 and 99% depending on what looks best on your monitor's resolution. Zoom both windows to the same zoom percentage, whatever percentage you decide upon.
4. Printout #1: With your Index.html and About.html pages and surrounding workspace looking as much as possible like the screen shot shown above, create a printscreen printout.
5. After obtaining the printout, close the files, and conclude your work on lesson 7.

Part 2: "Lesson 8: Adding Flash, VIdeo, and Sound Content"

1. Read pages 205 - 217 and perform all lesson steps on those pages, with the following additional notes.
2. Note that there are no printouts to create for this part of the assignment, but your success in creating the same pages as is done in the book's lesson will help you to create the proper results for part 3 of the assignment. So when you finish this lesson and you have successfully created the pages involved, you are then ready to continue on the part 3 the assignment, given below.

Part 3: "Multimedia For the Coffee house"

1. To begin your work, you'll need to download the zip file below and then unzip it to reveal the various files that make up the starting point for your "entertainment" page. Then you'll be ready to continue by following the rest of the steps below. The zip file is about 7MB, so allow time to download as needed.
   
   Click the link to download the zip file: a6p3.zip
   
2. After downloading the zip file and unzipping, you should find several multimedia files as well as a starter Web page "entertainment.htm". Begin by launching Dreamweaver and defining your site to point to the "a6p3" root folder that contains these files.
3. After defining your site in Dreamweaver, open the "entertaiment.htm" page in design view. Locate the "Techno Babble" heading and replace "Joe Student" with your own full name.
4. Next take a good look through the list of files displaying in your Files panel and identify the various sound and video files based on your experience from part 2 of this assignment. You should see two sound files, one an mp3 file and another a .wav file. And you should see two video files, one a .flv (Flash) video file and the other a .mov (Quicktime) video file. You'll be asked to insert these multimedia files into your entertainment page in the steps that follow.
5. As you can see, this entertainment page is intended to promote local artists that will be performing at this coffee house. Your job is to insert the various multimedia files mentioned in the previous step into the indicated locations within the page. Apply what you learned from part 2 of this assignment (lesson 8 of your textbook) to help you do this properly. The two video files go in the right-hand sidebar area and the two sound files go in the main content area at the bottom of the "Techno Babble" section. After inserting the videos and sound, adjust the sizes of your objects to match the sizes of the video and music controllers so that you achieve a good fit (no extra space around it and nothing cut off, and all associated controls, such as play button, are fully visible.)
   
   To see the intended result, check out the sample screen shot below. In your case your name should appear in the "Techno Babble" heading.
   
   
   
   The screen shot above was taken on a fairly wide monitor (resolution 1280 x 1024) so your page may layout a bit differently -- and may not be able to display all 4 multimedia items completely. But even at 1024 x 768 about half of the Harp Wars video is still visible so make sure you at least get that much showing in your printout. Try different browsers and you may get different results too, so go with whatever works best. You may even need to download a plug-in before things work right in your browser.
   
6. Apply what you learned from part 2 of this assignment (lesson 8) to adjust your settings as needed so that no video or sound is heard when the entertainment page is first displayed in the browser. That way the user is in control of what is seen and heard.
7. Printout #2: With your entertainment.htm page displaying in a browser and looking as much as possible like the screen shot shown above, create a printscreen printout. Your name should appear in the Techno Babble heading.
8. Printout #3: With entertainment page in Dreamweaver, obtain a code printout of the HTML code for the page. After it prints, circle your name in the Techno Babble heading, then also circle each of the 4 areas of the code that contain the multimedia (2 sound and 2 video). This is code that Dreamweaver inserted for you when you inserted the sound and video.
9. That concludes your work for this assignment.

What To Turn In

Modify your cover sheet document from assignment 5 (or create a new one) as follows. Use either Dreamweaver or a word processor to create a document that contains the following information: Your full name, the class "CIS/CAT 76B Dreamweaver", your instructor "Scott McLeod", and the assignment number "Assignment #6", each on its own line in a large font, centered across the page (make it look decent). Then turn in the following items, stapled together in this order:

1. The cover sheet (as indicated above)
2. Printout #1, a printscreen of your "index.html" and "about.html" pages in Dreamweaver as shown in the sample printscreen from part 1 of the assignment. Your name should be visible in the title area in place of "Untitled Document".
3. Printout #2, a printscreen of your "entertainment.htm" page displaying in the browser, with all 4 multimedia items visible and your name in the "Techno Babble" heading.
4. Printout #3, a code printout of this same "entertainment.htm" page with appropriate areas circled or highlighted.

Back-Up Your Work

Don't forget that it is important to back-up all of your work from this assignment. Some of these files may end up being needed on a later assignment, so copy them all onto a second disk, just in case. The easiest thing to do is just copy the local root folders for the two sites you worked on in this assignment.