WEB 215 Chapter E Lecture Notes -
Objective #1: Create and use slices.
- Use the Slice tool or the Polygon Slice tool to create slices. Click and drag to create rectangles over the area of a document that you want to turn into a slice.
- You can also select
an object and use the Edit/Insert/Slice menu command to turn an object into a slice.
- Slices are light green when viewed in a Fireworks document though you can change the color of an individual slice in the Property Inspector.
- Each slice is represented in its own sub-layer in the Web Layer of the Layers panel. You can't delete the Web Layer but it is empty if your Fireworks document doesn't contain things such as slices.
- Slices are exported as separate images. You can change the default naming conventions of Dreamweaver in the Document Specific tab of the HTML Setup dialog box under the File menu command.
- Using slices can make it easier to update a graphic. By placing text or
icons in separate slices, the individual piece of text or the icon can more
easily be updated without disturbing the rest of the graphic.
- Slices are formed by the horizontal and vertical placement of slice guides. Slices cannot overlap. Remember that slice guides can easily be moved resulting in different sized slices.
- HTML code is exported along with slices. This HTML code is basically an HTML table that holds the sliced parts of the graphic together. The exported code may also contain links (HTML <A HREF> tags) and other behaviors (i.e. JavaScript). This HTML code can easily be imported into a Dreamweaver web page or edited in a text editor such as NotePad.
- When you use File/Export... to export a Fireworks document, you can choose "Slice Along Guides" as the Slices option. This allows you to slice a document along ruler guides that you added by dragging ruler guides from the horizontal and vertical rulers.
- The names of individual slices become the names of the exported slices.
Slice names can't have spaces or uppercase letters.
Objective #2: Create and use hotspots.
- A hotspot is an area of a graphic to which you've assigned a URL address or another action (e.g. mailto). Unlike using slices, creating a hotspot does not cause the graphic to be broken up as separate parts and reassembled using an HTML table.
- Hotspots are light blue when viewed in a Fireworks document though you can change the color of an individual hotspot in the Property Inspector.
- A hotspot can call a behavior (i.e. Javascript)
- Hotspots can be made using the Rectangle Hotspot tool, the Circle Hotspot tool, or the Polygon Hotspot tool. By the way, slices can only be rectangular.
- You can create an image map using several hotspots.
- Hotspots should be used rather than slices when you don't need the area of the graphic to change when the user interacts with it (e.g. different "over graphic" during a mouse rollover.)
- HTML code is exported along with hotspots. This HTML code can be imported into a Dreamweaver web page or edited in a text editor such as NotePad. Basically, the exported HTML code is an image map (i.e. HTML <MAP> tag). The exported code may also contain links (<A HREF> tags) and other behaviors (i.e. JavaScript).
- Like slices, hotspots are saved to the Web Layer.
Objective #3: Create and use links.
- Select a slice or a hotspot and type a URL address in the Link area of the Property
Inspector in order to make part of a graphic link to a web page.
- You can use _blank, _parent, _self, and _top in the Target box.
Objective #4: Create and use rollovers.
- A rollover contains a behavior that allows a graphic to swap with another
graphic when the mouse is rolled over the graphic. Rollovers are also known as mouseovers.
- A disjoint rollover is one in which a graphic somwhere else on the page
swaps with another when the mouse is rolled over a third part of the page.
- A rollover can be applied to a slice, a button, or a hotspot.
- Use the Frames panel to inspect your various rollover and button state images.
- Many behaviors can be added to slices and hotspots. You can add behaviors from the Behaviors panel or by dragging and dropping a behavior onto a slice. You can even write customized JavaScript code and add it to a slice or hotspot.
- When you've added a behavior to a slice or hotspot, a behavior handle appears in the center of the object.
- A blue behavior line connects a slice with an affected slice.
Objective #5: Create and use buttons.
- Convert objects to symbols in order to better reuse them.
- There are 3 types of symbols: graphic, animation,
and button.
- Symbols are stored in the library. A use of a symbol on
the canvas of your document is called an instance. A black arrow appears in
the lower-left corner of an object to show that it is an instance.
- Making a change to the original symbol will cause all of its instances to
be changed throughout a Fireworks document.
- Using symbols not only makes it more efficient to edit a Fireworks document
but it also makes your file sizes smaller.
- Button symbols contain up to 4 frames: up, over,
down, and over while down.
- Use the Library panel to organize your symbols.
- The symbols in a document's Library stays with the document. However, symbols
can be imported from one Fireworks file to another.