The Web Warrior Guide to Web Design Technologies

1
The Web Warrior Guide to Web Design Technologies
Chapter 4 Dreamweaver Part II
2
Objectives

• Use Dreamweaver tools and functions to lay out a
  Web site with tables, frames, and layers  
• Use multimedia content to make Web sites more
  exciting and attractive
• Set up stylesheets to increase productivity and
  give your Web sites a coherent look
• Create simple DHTML animation using layers,
  behaviors, and the timeline

3
Web Site Layout with Layers and Frames

• A layer is an extension to HTML that is defined
  by ltlayergt tags. A layer object
• Is a visual rectilinear area on an HTML page.
• Can hold elements such as graphics, text, and
  colors.
• Layers have x- and y- and z- coordinates
• x- and y- coordinates define layer positioning
  either from the upper left corner of the HTML
  page or relative to another layer.
• z- coordinate defines layers stacking order.

4
Web Site Layout with Layers and Frames

• A frame is a small window inside a Web page that
  contains its own HTML document
• A frameset is an HTML document that holds
  multiple frames
• One frame often contains information that changes
  frequently
• Another frame often contains content that does
  not change, such as a menu

5
Environments for Layout

• Layout view
• Lets you draw a layout cell on a page
• Automatically inserts a layout table to hold
  layout cell
• Standard view
• Lets you insert a table into a Web page for
  layout
• Lets you draw layers to design layout and then
  convert layers to a table

6
(No Transcript)
7
(No Transcript)
8
Converting Layers to Tables

• Dreamweaver lets you design page layout using
  layers
• Advantage lets you create layout cells of
  varying sizes that you can drag and drop to
  reposition on a page
• When you have finished page design, you can
  convert the layers to a table

9
Convert Layers to Tables

• Select Standard View on the Layout tab on the
  Insert bar
• Click the Draw layer icon on the Common tab of
  the Insert bar
• Draw layers and insert content (image or text)
• Do not overlap the layers
• When you are finished, click the Convert command
  on the Modify dropdown menu and Click Convert
  Layers to Table on the popup menu

10
Layout Tables in Layout View

• Layout tables contain layout cells
• You draw the layout cell
• Dreamweaver generates a layout table to hold the
  layout cell
• You can only insert content such as text or
  images inside a layout cell

11
(No Transcript)
12
Layout with Frames

• A frameset document holds multiple frames
• Each frame holds its own HTML document
• Frameset documents have ltframesetgt tags
• The ltframesetgt tags define layout in terms of
  rows and columns
• Framesets can be nested inside each other
• Frameset documents do not have ltbodygt tags

13
Creating Framesets

• Type CtrlN key sequence to open the New Document
  dialog box
• Choose Framesets in the Category list box
• Select one of the Framesets in the preview
• Click Create to create the frameset
• You can insert existing pages into the frames or
  create them within the frameset

14
Saving Framesets and Frames

• Open the Frames panel in the Advanced Layout
  panel group to help you see which frame is
  selected
• Click Save All on the File dropdown menu
• The Save As dialog box first prompts you to save
  the frameset document
• It then prompts you to save the main frame
• If you get confused, look in the Frames panel to
  see which frame is selected for saving

15
Opening Documents in a Frame

• Create a menu in one of the smaller frames to
  open documents in the main frame
• Highlight the menu item
• Create a hyperlink for the menu item in the
  Property inspector
• Select mainFrame in the Target dropdown list to
  open the hyperlinked document in the main frame
  of your frameset

16
Dreamweaver Support for Multimedia

• Dreamweaver makes it easy to insert existing
  multimedia content such as graphics into an HTML
  document
• Dreamweaver generates Flash buttons and Flash
  text with embedded hyperlinks that can be
  inserted into HTML documents

17
Inserting Multimedia Objects

• Common tab of Insert bar has icons to
• Insert images
• Create and insert Rollover images
• Create and insert Navigation bars
• Insert Flash SWF movies
• Create and insert Horizontal rules

18
Inserting Multimedia Objects

• Media tab of Insert bar has icons to
• Create and insert Flash text with rollover
  effects and embedded hyperlinks
• Create and insert preset Flash buttons with
  rollover effects, animation, and embedded
  hyperlinks
• Insert existing files such as sound files,
  movies, and other types of Shockwave files

19
Flash Text

• Click the Flash Text icon on the Media tab of the
  Insert bar
• In the Insert Flash Text dialog box
• Type in the Flash Text
• Define the font type and size, color, and color
  rollover color
• Type in the hyperlink and choose a target
• Click Apply to see the Flash text on the page
• Click OK to close the dialog box

20
Flash Button

• Click the Flash Button icon on the Media tab of
  the Insert bar
• In the Flash Button dialog box
• Choose a preset button style
• Type in the text to appear on the button, and
  configure its font type and size
• Type in the hyperlink and choose a target
• Click Apply to see the Flash button on the page
• Click OK to close the dialog box

21
Warning about Flash buttons and text

• Dreamweaver saves a Flash swf file in the same
  directory as the page on which you create the
  Flash button or text
• Since the URL for the hyperlink is embedded in
  the swf file, avoid problems by
• Typing in the full URL (absolute address) as the
  hyperlink, beginning with http//
• Saving it in the same directory as the HTML page

22
Style Sheets Increase Productivity and Give Web
Sites Consistent Look

• Dreamweaver MX supports two types of styles
• HTML styles
• Redefine the style of HTML tags within a document
• Can be viewed in older browsers
• CSS styles
• Also known as Cascading Style Sheets
• Cascading because multiple style sheets can be
  applied to one document

23
Three types of CSS style sheets

• HTML tag styles redefine formatting for a
  particular tag
• Custom (class) CSS styles or class styles
• Set style attributes to any range or block of
  text
• Can be applied to any text in a document,
  regardless of tags that control it
• CSS selector styles redefine the formatting for a
  particular combination of tags

24
Internal Style Sheets

• Define styles within the ltheadgt tags of an HTML
  document that apply to the entire document
• Can be exported as external style sheets if you
  want to reuse same styles on other HTML documents

25
(No Transcript)
26
External Style Sheets

• Exist as separate files that contain style rules
• Have the file extension .css
• Advantages
• Styles only need to be downloaded one time to
  client computer for multiple pages
• If you change style sheet in Dreamweaver, it will
  update pages that use the style sheet

27
(No Transcript)
28
(No Transcript)
29
Simple Animation with DHTML

• Dynamic HyperText Markup Language
• Applied to layers, which can contain content such
  as images and text
• Uses the Timelines panel to create animation that
  occurs over a period of time

30
Record Path of Layer

• In Standard View, draw a layer
• Insert an image into the layer
• Open the Timelines panel (AltF9)
• Select the layer and drag it into frame 1 of
  Animation Channel 1
• Right-click Frame 1 and choose Record Path of
  Layer in the pop-up menu

31
Record Path of Layer

• Drag the layer by the layer handle in its upper
  left hand corner around the page
• Dreamweaver records the animation in the timeline
  and generates JavaScript in the HTML document
• Click the Autoplay Checkbox in the Timeline Panel
  to automatically start the animation
• Click the Loop Checkbox if you want the animation
  to play as long as the window is open

32
(No Transcript)
33
(No Transcript)
34
Moving Layers by Using the Timeline

• Animate layers using DHTML by dragging two layers
  into animation channels in the Timeline
• Adjust the position of the layers on the page and
  the length of their timelines

35
Moving Layers by Using the Timeline

• Create two layers on an HTML page
• Insert an image into each layer
• Open the Timeline Panel
• Select the first layer (not the image)
• Drag it by its layer handle into Keyframe 1 of
  Animation Channel 1 in the timeline

36
Moving Layers by Using the Timeline

• Timeline1 has as a light blue line from Keyframe
  1 to Keyframe 15
• The animation plays at 15 frames per second
• This animation is now 1 second long
• To extend the length of the animation
• Grab the right end of Timeline1 to Frame 30 of
  the animation
• The playhead (red vertical line) is positioned at
  Keyframe 30

37
Moving Layers by Using the Timeline

• Open the Property inspector for the layer
• Click on Keyframe 1 of Timeline1
• In the Property inspector for the frame, type in
  a new number that the L (left) text box and the T
  (top) text box to change the x- and y-
  coordinates of the layer
• Drag the playhead along the timeline to see the
  animated layer move

38
(No Transcript)
39
Moving Layers by Using the Timeline

• Repeat the same steps for the second layer that
  holds an image
• Insert the animation into Timeline2
• You can start the animation and end the animation
  at a different keyframe
• Click the Autoplay Checkbox to automatically
  start the animation when the page loads
• Click the Loop checkbox if you want the animation
  to continue to play

40
(No Transcript)
41
Advanced Productivity Tools in Dreamweaver  

• Forms
• Create forms with form objects
• Dreamweaver provides tools for form verification
  and validation

42
Advanced Productivity Tools in Dreamweaver  

• Library Items
• Create and reuse HTML objects on multiple pages
• When Library Item changes, Dreamweaver propagates
  change on all pages that use it

43
Advanced Productivity Tools in Dreamweaver  

• Templates
• Dreamweaver saves templates and lets you create
  pages based on templates
• When a template is changed, Dreamweaver will
  update all the pages that use the template
• Allows you to give a common look and feel to a
  Web site

44
Summary

• Design Web page layout in Standard View or Layout
  view
• Design Web page layout using Framesets containing
  multiple frame documents
• Insert multimedia content using Common and Media
  tabs on Insert bar
• Use Styles sheets to create coherent, consistent
  appearance on a Web site

45
Summary

• Use DHTML animation on HTML pages
• Dreamweaver generates JavaScript code to control
  the animation of layers which can contain content
  such as text and images
• Dreamweaver productivity tools support Web site
  design and development
• Forms and form objects
• Library items that can be reused on multiple
  pages
• Templates that can be used to format multiple
  pages