Subtitles of the Movie

OK, let's see about getting the alpha transparent PNG to function inside the earlier versions of Internet Explorer. What I'd like you to do is inside your Lesson 10 Folder, open up a file called TransparentPNG.rtf. Go ahead and double click on him and this guy contains some code. Now, don't be spooked here. This is really easy to work with. What I'd like you to do is select all that code and copy it and then what I'm going to do is I'm going to flip over to Dreamweaver, which I already have running in the background here. If you have Dreamweaver, go ahead and fire it up there, create a brand-new, blank page. Now, the next thing that I'm going to do is I'm going to head into the Code View of the page and what I'm going to do is I'm going to look for the opening body tag, there he is and I'll just hit Enter. Maybe, oh, maybe two or three times, something like this. OK. Great. And then go ahead and paste in that code. Alright, now before we go any further, what I'd like you to do is I want you to save your file. So go ahead and hit Control S or Command S if you like into your Project Files Folder and save this guy into your Lesson 10 Folder and you can call him whatever you want. Maybe I'll call this guy Alpha. How's that? OK. Great. Click on Save. Now, the next thing that I'm going to do is remember back in Photoshop I made note of the width and the height of the file. Well, you'll notice inside the code it's looking for a width value, right? And right now it's set to a hundred. Well, our width was 500, wasn't it? So all I'd like you to do is change the 100 to a 500 and there we have the height as well. Now, my height was 177 pixels. Yours could have been a different value. I'm not really sure but go ahead and put in your dimensions there. We have to make one more change at least in this first round of changes and that is in the piece of code here; C equals and then in a single quote it says Image.PNG? Well, I want to change that to read my file name. Do you remember what you called the file? I called mine Alpha Text so I'm going to go ahead and type that in here. Now, you've got to be careful. You have to add on the .PNG on the end and capitalization counts, as well. So make sure you get it right there. Now, all I'm going to do is I'm going to repeat everything that I just did here with you one more time. Another SRC equals and there's another Image.png so I'm going to go and type in AlphaText.png. Perfect. And then I'll repeat the width and height settings. So we're only changing three properties here. Pretty simple stuff. So myself, it was 500 and the 177. I'm going to head back to Design View inside Dreamweaver. There's my transparent text. Now, the big question though is how do I know that it's transparent because the web page is on a white background and how do I know that the graphic isn't on a white background also? So what I'll do here is I'll head to the Modify Menu, down to Page Properties and go ahead and throw on a background color; any background color you want. It doesn't really matter. Bang, there we go. That's what we wanted. This is alpha transparency; so in other words, you can see we have that soft-edged drop-shadow and that blue background is showing through the drop shadow there. If we didn't put in this code by the way, it would still work in browsers like Firefox and Safari and Opera but in older versions of Explorer, I think what you get is actually like a gray background or something like this. Now, unfortunately, I can't actually test this here with you. I'm going to save my file though, nevertheless and if you're on the Windows side, go ahead and open up this file inside Internet Explorer and you will see exactly what I mean.