Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In an earlier lesson, we looked at HTML component symbols, but I wanted to touch base on them again, because they have some other facets that are worth noting. HTML component symbols are actually converted to true HTML elements if you export your page as CSS and Images. They include elements such as headings and form elements. Let's have a look at how to bring some of these component symbols into a design and look at what happens once we export the page out as CSS and Images. We're going to focus specifically on form elements with this example we see onscreen. I'm going to hop over to my Common Library.
We're going to create like a little feedback form. I'm going to go down to HTML components. So I'm just going to collapse down my Pages and expand up my Common Library a bit, so I can see things little bit better. So what I need for this is a couple of text fields. So let's grab a text field. Just a reminder, again, about the way these component symbols work, once you drag them on to the canvas, they become part of your Document Library. So you don't need to drag the same symbol back onto the canvas from the Common Library.
I also need, let's grab a button. Let's grab a text area for comments. Here we go! Okay. So I'm just going to format things here a little bit, lay things out a bit for myself. I think I'll add a second text field, just hold down my Alt key or the Option key on the Mac and just click and drag, and I get a secondary text field. So there we go, something along that line, I think, maybe, just realign that form element there. Good! Okay, everything lines up rather nicely.
I've just got some basic text in here, just a little bit of warm and fuzzy text for our pop-up form. All I have to do at this point is go to File > Export and choose CSS and Images from my options for exporting. We'll be talking more about the CSS and Images Export in another lesson, but I wanted to show you this particular feature right now. So we'll choose Save. We'll overwrite the old one. If I go over to my folders and open my little pop-up form inside of Internet Explorer, you can see, we've got our form showing up.
Now we don't get the rounded corners, because Fireworks did a pretty good job of exporting this out as a CSS-based little layout. So rounded corners aren't supported in the Fireworks export. So what we've got is a nice, little solid border in the same color. But what's really interesting about this is not so much the border, but what's happening down here. As I move my cursor around these different elements, you'll see these are actually converted to actual text fields. I can do whatever I want. I can type in information.
If I wired it up with the proper form script, I could actually turn this into a form that processed the data that was there. So these component symbols can do quite a bit more than just act as mockup features. One thing I will point out: You notice we exported this CSS and Images. That's the only way to get these form elements to work in this manner. If you tried exporting out as HTML images, all the different form elements will just be exported out as solid graphics.
Get unlimited access to all courses for just $25/month.Become a member