Subtitles of the Movie

Continuing now with this Project Step 8 File, let's scroll over here and delete my Text Placeholder. We're going to insert a form here so we're going to choose Insert Form from the Insert Panel. That'll give us our red outline. Remember that all the form elements must be within these dotted, red lines here. Now let's insert a Table. So here you can practice various table formatting that I've covered in the course. I'm going to create a very simple form element and a very simple table to format this form element but feel free to be much more ambitious with your form and your table to practice the techniques that I've covered so far. Let's do a four-row, two-column form. I'm going to do this at 100 percent so it fills up this DIV Tag all the way to the edge. If you want a little bit of padding, then choose less than a hundred percent. Ninety percent will give me five percent padding on each side. Click OK and there is my table element. You can go ahead and practice coloring the table cells, formatting it in a way that it's going to make this as easy to fill out as possible. First thing we're going to do is add our labels. Let's do a label for the Form Element. Let's merge those two cells there, those two columns and let's call this State like so and we'll just label our states here and we'll do a Radio Button. You get the idea. You can add more rows if you need to and here in the second column we're going to insert our Form Elements. Let's insert Radio Buttons. Now, on these Radio Buttons, just make sure that the label here of the Radio Buttons, in this case Radio, is the same for each one so that they will act in unison. As I covered previously, Radio Buttons, you can only choose one. You can only live in one state I suppose so let's insert these Radio Buttons. So once I get those Radio Buttons inserted, notice that I have to change the label here so they're all the same. This one says Radio 3 as the ID. Let's change that just to Radio. So let's double check. All of them are labeled the same so they'll act as a unit. Let's now go into Live View and test out our formatting and the functionality of our form element. Again, only one Radio Button should be enabled at a time so go ahead and add some borders, colors, boxes and other formatting elements to make that form as accessible and as easy to fill out as possible. Again, this is a very simple form element in this demonstration but feel free to be much more ambitious. We have a look at Project Step 9. Notice that I've also added a Submit Button, formatted this a little bit tighter. The model here for our mockup included a fairly basic form element with some buttons here. I've included these buttons as well in the Image Subfolder. Here in Fireworks, if you open up the Read More Button, you can see that there's the red button and there's the label. So you can also change the label in this PING File. You'll need a graphics editor that separates out these layers to change those labels but that will give you the ability to add the red buttons as well as the blue header sections, such as the Read More. So I've gone ahead and inserted the Read More Button at the bottom of this content right here. Let's add a paragraph and Insert Image and scroll down. I'm in the Images Subfolder of the Project folder and there is the Read More Button. Click OK and now we're starting to finish up the formatting of our page so once you're satisfied with all your titles, your Read More Buttons, your other graphics and your form element, save this as Project Step 9, close the file and then move on to the next movie.