home | et11 - Computer Skills for Digital Media -2011 edition
prev | next

David Javelosa

Copyright © 2011, David Javelosa unless otherwise stated


week 14 - Dreamweaver, interface design, embedded media, Flash




Cascading Style Sheets (CSS) are part of DHTML (Dynamic HTML) introduced in the 4.0 browsers. They enable the web designer to create text styles with characteristics such as font, size, and color. For example, the following text is enclosed in a new style class called "coolstyle" which has the following characteristics defined: font, size, bold, text color, background color, and underline.

Some text inside a css style called coolstyle

Another example is on this page, which shows how the <A> tag for links has been redefined to have no underline.


what are
cascading style steets?

Cascading Style Sheets are definitions that can revise the style of an existing tag, or define a new style that can be applied to other tags, with complete control over text format. A style sheet can be inside a web page, or it can be an external file which all the pages in a web site link to. This linking is very powerful, because it enables the web designer to revise the external style sheet and see the changes automatically reflected across the entire site.

  • Styles Sheets can redefine existing tags. For example, the <p> tag could be made to use the Verdana font with a specific pixel height (this is the case for the paragraphs on this page).
  • Style Sheets can define new styles which can be applied to any text selection. This is the case with the <span class="coolstyle"> tag above, where the font, text color, background color, and underline are defined with a single style.
  • The attributes of Style Sheets goes beyond the normal styling of HTML to include line height, leading, indent, background color or image for the styled selection, text weight, borders, and page breaks for printing (but not all of these features are supported in current browsers).
  • Many of the styles defined in the CSS1 specification are not displayed properly inside Dreamweaver, and must be viewed in Netscape or Explorer.
  • And of course, several of the style attributes display differently in Netscape and Explorer, or do not display at all in any browser.


creating styles in
  2. To redefine an existing tag, select REDEFINE HTML TAG, and select the tag from the pull down menu
  3. To create a new tag, select MAKE CUSTOM STYLE, and give the new tag a name using the following rules:
    1. it should begin with a period
    2. the case of the characters is ignored
    3. it can contain only the characters A-Z, a-z, 0-9, and the dash "-"
    4. the underscore "_" and space " " characters are not allowed
    5. style names not following these rules will be ignored in some browsers
  4. Select THIS DOCUMENT ONLY to create the style in the current document.
  5. Select OK, and a dialog box will open with a series of formatting settings for TYPE, BACKGROUND, BOX, BORDER, etc. More information about each of these Style Definitions is available in the Dreamweaver Help.
  6. Select OK from the Styles dialog box
  7. Select DONE to complete the editing process


applying CSS  
  1. If you've modified a standard HTML tag with a new style, the style will automatically apply, and there is nothing to do beyond setting that tag in the normal way.
  2. If you've created a new style, then:
  3. Open the CSS STYLES window
  4. Select the text you want to apply the style to and:
    1. Click on the desired style in the CSS STYLES window
    2. OR, you can do this by selecting TEXT>CSS STYLES>style
    3. OR, you can do this by using a right-clicking (pc) or control-click (mac) and selecting CSS STYLES>style

Note: CSS styles may not apply as expected to text inside of tables. You should preview in both Netscape and Explorer to verify that the text is formatting correctly. If not, you may have to apply the style to the table or the text within the table.

Note also that you can convert (in most cases) a web page with style sheets to traditional, HTML 3.0 compatible format by selecting FILE>CONVERT>3.0 BROWSER COMPATIBLE, and selecting CSS STYLES TO HTML MARKUP. Dreamweaver will create a new page that is as close as possible as the original, but that uses only HTML markup. Note that some CSS formatting (such as leading) cannot be converted to standard HTML.


Introduction to FLASH

Flash is a vector graphics editor and an animation and authoring tool for creating animation and interactivity. Flash is designed for the web, but can also be used to create stand-alone animations and interactive applications.

Flash has two main authoring features, the Stage and the Timeline, which enable the user to assemble graphics and make them animate over time.

  • The Stage: The area on the screen where you create, edit, and position graphics. Graphics objects are drawn, imported, edited and positioned on the stage for each keyframe in the movie. The user can set the pixel dimensions of the stage to determine the default display size of the Flash movie. The stage is composed of a number of layers (similar to those in Photoshop), which allow the user to determine how objects display in relation to each other.
  • The Timeline: This section of the program enables the user to navigate to specific time points in the Flash movie. When a point in time (a frame) is selected, the stage displays all the objects currently active and visible for that frame. The user can set the frame rate (i.e. how many frames display per second), extend the timeline by inserting frames, and create keyframes where (graphic, audio, or interactive) events occur.

Brief Tour of Flash

Main Windows to review

  • Main Window: Contains the Stage and Timeline.
  • Window>Tools: Contains the controls for drawing and editing graphics on the stage.
  • Window>Toolbars>Controller: Used for controlling the play of the movie (e.g. play, stop, rewind, etc.).
  • Window>Library: Shows the graphics and other elements used in the current movie.
  • Window>Common Libraries>Buttons, Graphics, Sounds, etc. These are standard graphics and sounds that come with Flash.

Flash movie settings. Double click on the frame rate display just below the timeline to set the following items.

  • Frame rate: Defines how many frames display per second. E.g. 12fps means the movie runs at 12 frames per second.
  • Dimensions: Defines the pixel size of the Flash movie.
  • Background color: Sets the color of the stage behind any graphics.

Timeline. The timeline is a simplified display of the frames that compose the movie. Each division represents one frame of the movie, and the numbers across the top show the frame number for each position.

  • Layers: The timeline is divided into separate sections, where independent animations take place. These layers run in parallel, with the graphics on them layered from top to bottom, where the topmost layer is in the foreground, and the bottom most layer is in the background. New layers can be added by clicking on the add "+" layer icon on the left, below the layer names. The new layer is put "in front" of the layer that was clicked on.
  • Keyframes: Click a point on the timeline in a layer. Use F6 or INSERT>KEYFRAME to insert a Keyframe at this location. If there are no frames at this location, the layer's time will be extended to this point. If there is a frame at this location, the frame is converted to a keyframe. Keyframes are points in the timeline where you can make changes to an element in the movie.
  • Frames: Click a point on the timeline in a layer. Use F5 or INSERT>FRAME to insert a Frame at this location. If you have a frame (not a keyframe) selected, and draw or edit a graphic, you are actually changing the previous keyframe, not the current frame. If there are no frames at this location, the layer's time will be extended to this point. If there are frames at this location, a new frame will be inserted at this point, pushing all frames to the right ahead by one frame.
  • Onion Skin: It is possible to view the graphics on multiple frames in the timeline. Click on one of the two onion skin buttons under the timeline, at the left. Two brackets at the top of the timeline determine the number of frames displayed.
  • Edit multiple frames. There are often times when you want to move elements on many frames at a time. Rather than selecting each frame and moving the element on that frame, set the the Edit Multiple Frames button below the timeline, just to the right of the Onion Skin buttons.


Layers. Each layer contains a separately animating set of elements, such as a background and a foreground.

  • Current layer: Select a layer for editing by clicking on the layer name. The layer name will become bold, and any subsequent editing will occur on that layer.
  • Layer name: Double click on the layer name to change the name.
  • Lock others: To ensure you don't select elements on other layers, click the dot in a layer under the lock icon. You can lock all the layers by clicking on the lock icon itself.
  • Show/Hide layers: You can show or hide a layer by clicking on the dot in layer under the eye icon.

Importing elements. To import a bitmap or vector graphic, select the layer and frame you want the element to appear on, and select FILE>IMPORT. Any element you import will also be placed in the movie library.

  • PNG files: Use the PNG file format for importing bitmap graphics with an alpha channel.
  • Multiple files: If you have a series of files that are frames of an animation, name them with a number at the end. For example, anim01.png, anim02.png...anim13.png. Flash will import them all, and automatically place them in subsequent frames.

Symbols. Each movie has a library of elements that can be reused throughout the movie. These symbols are displayed in the LIBRARY window. It's recommended that symbols be used for any graphics you plan to move or place in multiple sections of the animation.

  • Create a symbol: In the pull down menu in the upper right hand corner of the Library window, select Create Symbol. A dialog will be presented when enables the user to set the type of symbol and the name of the symbol. When finished editing the symbol, select EDIT>EDIT MOVIE to return to editing the full movie.
  • Convert at grapic into a symbol: select the graphic(s), and select INSERT>CONVERT TO SYMBOL.
  • Edit a symbol. You can edit a symbol at any time, and the changes will automatically be reflected wherever the symbol is used in the movie. In the library window, double click on the symbol to edit it.
  • Graphic: This is the simplest type of symbol, and can be a single frame or multiple frames with as many layers as you want. Use the stage to create the graphic. Alternatively, any graphic that 's imported automatically becomes a Graphic symbol.
  • Movie: A Movie symbol can have multiple layers and frames. These animated symbols are complete Flash movies that become self-contained objects in the full movie. When placed in a frame in the full movie, they run whether the full movie is playing stopped (including any interactivity you've defined in the symbol). Create and edit a Movie symbol as you would a regular Flash movie.
  • Button: A button symbol has 3 frames for the Up, Over, and Down positions of the button. In addition, it has a Hit frame to define the "hotspot" of the button (i.e. the area that is clickable). Put a graphic in the Up, Over and Down positions, and Flash will automatically display the right frame when the button is used in the full movie. If you want any of the button states to animate, place a Movie symbol in the Up, Over, or Down frame. Draw a simple filled rectangle in the Hit frame to set the hotspot.
  • Place a symbol: To place a symbol in the full movie, select the desired layer and frame (making sure you are editing the movie and not the symbol). With the Library window open, select the name of the symbol you want, and drag its image from the Library window onto the movie stage.

Tweening. The tweening capability of Flash is a powerful feature that automatically creates all the frames between two keyframes you create. Position a symbol with a start and end position (including any transformations you want to make), and Flash will create all the frames in between to create smooth motion. Alternatively, Flash can Tween from one shape to another, creating a "morph".

  • Make a Tween: On a selected layer, create the beginning keyframe and place a symbol on that keyframe, in the position for the beginning of the animation. Now create the ending keyframe, and position the existing symbol in its end position. Select the beginning keyframe, and select MODIFY>FRAME or double click on the frame. Select the Tweening tab, and set tweening to Motion. Flash will create the in between frames in a straight line between the beginning and ending keyframes. To create a complex path, you can tween from position to position, placing keyframes at each point with tweening set for each keyframe. To create a morph, or shape tween, select Shape when you set the tweening type.

Playing the movie. You can play the movie directly from the Stage, although not all of the motion, animation, and interactivity will show up. The best way to see how your movie animates is to Test the Movie in true Flash format.

  • Play: You can preview the motion in your movie by clicking on the Play button of the controller window, or selection CONTROL>PLAY.
  • Test movie: To see how the movie will really play, select CONTROL>TEST MOVIE. This creates a fully compiled movie that will play exactly as it will in a web site or as an external application.
  • Export movie: To create a final movie that can be distributed on a web site, or played on a computer, select FILE>EXPORT MOVIE. Select the Shockwave Flash setting. If you want to export a different format, such as an animated GIF, select that file type.

Reading Assignment:

  • Dreamweaver & Flash - Online help files & video tutorials

Copyright © 2008-2011 - David Javelosa