Macromedia Flash – Inserting Flash on a Dreamweaver Site

You might have a web page already created for a banner. We have created a page for you, which is ready to have a banner of this size placed on it. Make sure that you download the gnome3_fl8.zip file at the beginning of this article. Open the ZIP file and find the website folder. Inside that folder are the documents you need to edit. You will modify the gnome.html page in the following exercise.

Note: You can find a finished version of the website in the finish folder.

1. Open the page called gnome.html in Dreamweaver MX 2004 or Dreamweaver 8. You can find this document in the website folder of this article’s source files. Look inside the start folder.
2. Save a copy of this file in the same folder as the SWF file you published in the previous exercise (banner3.swf).
3. Save a copy of rightnav.css in the same folder as the SWF file you published in the previous exercise. Look inside the start folder. This document adds styles (such as text color and margins) to the gnome.html file.
4. Make sure you’re in Split view (View > Code and Design). When in Split view, you can see and edit the code you’re working on and also select the SWF file easily in Design view.

5. In gnome.html, select the large 160 x 600 image placeholder on the right side of the web page (see Figure 1). This is where you want to add the Flash banner to the web page.

   

   Figure 1. Select the large image placeholder on the right side of the web page in Dreamweaver.

6. Press the Backspace or Delete key to delete the image. Leave the text input cursor at that position in the HTML document.
7. Select Insert > Media > Flash. This opens the Select File dialog box, where you can select the SWF file of the banner you created.
8. Select the banner3.swf SWF file, which should be in the same folder as your web page (see Step 2).
9. Click OK. The SWF file is inserted into the web page. (See the gnome.html document in the finish folder to reference the code that’s added to the document.)
10. (Optional) Select the SWF file and click Play in the Property inspector to view the banner’s animation.
11. Select File > Preview in Browser > iexplore (Windows) or Internet Explorer (Macintosh), or select your preferred browser, to preview your site (which now contains the SWF banner) in a browser window.