| When you place SWF files online, you typically embed them in an HTML page. You do not have to learn HTML to do so because Flash generates the code for you. However, in this exercise, you will slightly customize the HTML document that Flash creates so you can add a background tile and center the SWF file on the page. When Flash produces an HTML file, the SWF file is already embedded. You will create an HTML page in this exercise, embedding the Tech Bookstore SWF file within it. SWF files are embedded into an HTML page using the <object> and <embed> tags. 1. | Open bookstore.html in an HTML editor or the text editor of your choice.
It doesn't matter if you are using a fully featured editor such as Macromedia Dreamweaver 8 or a simple text editor such as Notepad or TextEdit for this exercise. The changes you will make are very minimal to the file that already exists, so you don't need anything fancy to make your modifications.
| 2. | Change the text in-between the title tags in order to name the site.
This name appears within the title bar of the web browser. You can rename this title to whatever you want the site to be called in the title bar. We have chosen Tech Bookstore, so this line is written as:
<title>Tech Bookstore</title>
| 3. | Delete bgcolor="#ffffff" from the body tag. Change this attribute to background="tile.gif".
Underneath the title and head tags is the body tag. The bgcolor attribute sets the background color of the HTML page. However, instead of a background color, you might want to set a background image. On the CD-ROM is a file called tile.gif, and you can find it in the lesson11/assets folder. Copy this file into the TechBookstore folder and then change the <body> tag to the following:
<body background="tile.gif">
Adding a background image means that the image will tile over the entire background of the website, which will appear "behind" the SWF file. This particular GIF file is small and unobtrusive, creating a subtle pattern in the background.
 Tip As a best practice, backgrounds should be set using CSS and not HTML attributes. For this application, changing the HTML attribute is acceptable, but if you aren't using CSS these days, you're so 10-years-ago. Very nearly literally. Learn it, love it, live it. | 4. | Add a DIV tag to contain the Tech Bookstore and center it horizontally on the page.
Under the <body> tag, you sometimes see a lot of commented-out text. When the HTML document contains text like this, it is quite similar to the commented-out code you might have in a Flash file in that it can provide directions to coders and explain what the code does. The text that is commented-out in these generated HTML files contains the text that is found inside the SWF file, which helps index the content better for search engines.
Add the following lines below the <body background="tile.gif"> tag:
<div align="center>
After these lines come the <object> and <embed> tags, plus all the code that embeds the SWF file so all browsers can see it. After all that code and just above the </body> tag, add the following, which will close the DIV tag and contain the Flash file:
</div>
 When you are completely finished, the entire HTML file for the bookstore_content.html page should look similar to the following figure.
 Tip After you have finished editing the HTML file, make sure that you go back to the Publish Settings dialog box for the loader.fla file and deselect the HTML option under the Formats tab. This way you won't overwrite the changes to any of the HTML documents if you republish the FLA file. | 5. | Save the changes that you have made to the HTML file and then open the HTML page to view it in the default browser.
Save the HTML file and then you can close the file. Find the file in the TechBookstore folder and double-click the bookstore.html file that was published to open the bookstore using the default web browser. If your computer defaults to a text editor instead, choose to open it in a browser instead. Click through the file and explore the different areas.
In the following exercise, you will upload all the files to a server or you will organize the ones you need neatly into a single folder.
|
|
