Subtitles of the Movie

Let me now go over the Fireworks work space, Fireworks is one of my favorite teaching and web development tools because it's powerful but very narrowly focused on web graphics. It doesn't do a lot of the things that full featured graphics applications like Illustrator or Photoshop do but what it does, it does exceptionally well and what Fireworks does well is to help you create, edit, and optimize web graphics. Because of this narrow focus, I find Fireworks interface very easy to use and to teach to others. Usually in no time at all my web design students are creating attractive and quite sophisticated Fireworks graphics and a lot of this I think can be attributed to the well laid out interface and work environment. When you open a document in Fireworks for the first time, this work environment will be activated, this includes the document window which dominates the center of the workspace, the tools panel to the left, Property Inspector down below and then a series of windows and panels docked over here to the right, in CS4 you can now change the appearance of those panels, you can go with iconic mode to save space, each of the panels is iconized, rolling over an icon will display the name of the panel or it can go in expanded mode to show the entire contents of the panel, or you can compromise and do iconic mode with panel names, the Property Inspector down here notice will change depending on what is selected, for example if I choose a different tool here in the tool panel, the properties of that tool will be displayed in the properties inspector, likewise if I select an object on, here on the stage or in the document window, let's go over to original view and notice if I select an object, the Property Inspector changes, for example if I choose text, I get text properties, if I choose a bitmap, I get bitmap properties, by default the Property Inspector shows document properties such as canvas color, canvas size, image size, and so on. You can use the view modes down here at the base of the tools panel to manage the work space. Standard screen mode is default, this is the view that shows you all the menus and windows. However, you can also do full screen with menus mode, this is a maximized document window view set against a gray background with menus, toolbars, scrollbars, and panels still visible like so. Or you have full screen mode which is the last button, this is a maximized document window set against a black background with no menus, toolbars, or title bars visible. To move back I'm going to right click or Control click if you're on the Mac and choose Exit full screen mode. Next, we have the document preview buttons along the top of the work space, these are very important. The preview button will display the graphic as it would appear in a browser. This is important because Fireworks, you'll typically be working on graphics that will be displayed in a web browser so this provides a convenient way to check how your work will look in a browser. You'll notice that if I choose an image that has animated rollovers and other interactive elements by clicking on the preview view I can preview this interactivity, notice that my buttons are animating. The links won't work if you've linked this up to documents but this is pretty convenient, if you didn't have this preview panel you'd have to choose File, Preview in browser to really see the end results of your work, how they would appear in an actual browser. Other useful features include a display at the bottom of the window that shows the document's total file size, 10.66 K, the estimated download time and the file format, the estimated download time is the average amount of time it would take to download all the document slices and frames with a 56 K modem. Next, we have the two-up and four-up views, these display additional information, it varies on the file type selected. Here you're setting your optimize options, you can also set your optimize options in the Optimize panel right here, the first one. This allows you to optimize while viewing here in original mode, you've also got this slices or hot spots tool that will show you your various slices and hotspots so that you can then use the optimize panel to then optimize each of the slices there. Notice over here in the Tools panel that there are six sections, Select, where you have your selection tools, Bitmap, where your bitmap tools are organized, Vector, Web tools next and then your color tools followed by the View tools such as the hand tool and the magnifying glass or the zoom tool. Notice that some of the tools have a little triangle in the lower right hand corner, this indicates that there are additional tools hiding underneath the top tool, for example look at the Rectangle tool in the Vector section, clicking on that will reveal a whole host of additional tools underneath , Ellipse, Polygon, Arrow, Arrow line, Rectangle tools, Donut, L shaped, Rounded rectangles, Polygons, and so on. Notice that the property inspector can be collapsed by clicking on the gray bar at the top. Clicking on the panels over to the right, clicking on its gray bar moves it into iconic mode with panel names or expanded mode and vice versa. And you can also undock the Property Inspector and then to re-dock it you just place it very carefully at the base here of the work space. It's a little bit tricky getting it down there but with practice you'll do it, like so. And you can also undock the tools panel and re-docking it, basically you move it over there to the left until you get that blue line there and that will re-dock it over there to the left. Now a lot of your work in Fireworks will be done in its many windows or panels over here to the right so let me now move on to the next movie and review some of the more important panels here in this panel collection or cluster that will really dominate a lot of your work in Fireworks CS4.