Starting the site

1. Important: View a couple of the student samples for Mixed media Sites before continuing. This will provide a much better understanding of what is required for this project.
    
2. Create a new site in Dreamweaver named Mixed Media. 
    
3. Create the following folders in the site:
   • images
   • audio
   • cartoons
   • videos 
      
4. Create the following files in the site:
   • index.html
   • cartoon1.html, cartoon2.html, cartoon3.html
   • video1.html, video2.html, video3.html
   • audio1.html, audio2.html, audio3.html, audio4.html, audio5.html, audio6.html, audio7.html, audio8.html, audio9.html
   • main.css
   • quickmenu.js (File, New, select JavaScript for the Page Type, press Create. Save as quickmenu.js)
   • menu.html
      
5. Navigate to the J: drive, open the Lawless folder, Hand-Out folder. In the Hand-Out folder, open the Web Design folder. 
    
6. From the flash cartoons folder copy three cartoons. Navigate to the Mixed Media folder on your I: drive and paste the copied files into the cartoons folder of your site. Repeat this process with three videos and nine (in groups of three, for example three animal, three construction and three sports) audio files.

Creating a menu for the site
Using QuickMenu (for help use the QuickMenu guides found in the Class Lessons section of this web site) create a menu that includes the following:

1. Main menu items will include:
   • Home
   • Cartoons
   • Videos
   • Audio
   • Contacts 
      
2. The Home menu will have no subs. It will be linked to index.html. 
    
3. The Cartoons menu will have three sub items. Each item will be named according to the cartoon page it is linked to. For example, if the cartoon is about waffles then the sub item would be Waffles.
    
4. The Videos menu will have three sub items. Each sub item will be named according to the video page it is linked to. For example if the video is about water skiing then the sub item would be named Water Skiing.
    
5. The Audio menu will have three sub items. Each item will be named according to a sound category. Each sub item will have a sub menu that has links to three sounds in that category. (Example: the item Bird Calls would have a sub menu with three items; Cardinal, Robin and Sparrow.)
    
6. The Contacts page will have a fictitious phone number and email address for customers to contact you. 
    

1. Movie Files
   • To add a movie file you can simply drag the movie file from its folder and drop it in the place in the code where you want the movie to appear. You will need to change the width and height settings to match the size of the movie. The movies that were included for use in this assignment use a width value of 320 and a height value of 256. For example, the code for a video named FunnySquirrel.mov,  located in a folder named videos, would appear like:
     
     <embed src="videos/FunnySquirrel.mov" width="320" height="256" />
     
      
2. Audio Files
   • To add an audio file add the following code to your web page: (don't forget to change the your_file_name in lines 3 and 6 of the code to the actual name of your audio file)
     
     <object>
<param name="autostart" value="true">
<param name="src" value="Audio/your_file_name.WAV">
<param name="autoplay" value="true">
<param name="controller" value="true">
<embed src="Audio/your_file_name.WAV" controller="true" autoplay="true" autostart="True" type="audio/wav" height="16" width="240"/>
</object>
     
      
3. Flash Files
   • After placing a Flash file on a page the computer will open an Object Tag Accessibility Attributes window. Press the Cancel button.
      
   • The code that is added to the page has some portions that need to be deleted. You need to keep all of the code, shown in green from <object...> through </object>. The rest of the code, shown in red must be deleted.
     
     <script type="text/javascript">
AC_FL_RunConten( 'codebase', ... etc ... ); //end AC code
</script><noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-  ...etc... height="400">
  <param name="movie" value="cartoons/anenome.swf" />   <param name="quality" value="high" />
  <embed src="cartoons/anenome.swf" quality="high" ...etc... />  </object>
</noscript>
      
   • When a Flash file is on a page with a drop-down menu like the one you created using QuickMenu you will notice that the menus appear behind the Flash cartoon. To correct this problem you will need to add some code to the code written when you dropped the Flash file on your page. Add the following code: 
     
     <param name="wmode" value="opaque">
     just after the line that says
     
     <param name="quality" value="high">.
     
     Also, in the long line of code that starts with
     
     <embed src="cartoons/
     you will need to add
     wmode="opaque" after the height="some number" code. 
      
   • Flash files displayed using Internet Explorer have a small quirk where they will say that you need to click the Flash file to activate it. To remove this annoying problem follow these steps:
     • Add a javascript page (File > New > JavaScript > Create) to your web site. Save the file with the name ieupdate.
     • Copy the following code and paste it into the ieupdate file.
       
       theObjects = document.getElementsByTagName("object");
for (var i = 0; i < theObjects.length; i++) {
theObjects[i].outerHTML = theObjects[i].outerHTML; }
     • In the head section (anywhere between <head> and </head>) of any page with a Flash file paste the following code:   <script type="text/javascript" src="ieupdate.js"></script>
       
       
       
       
4. Place a note on the teacher's desk indicating that the site is ready to be graded.