The Web Warrior Guide to Web Design Technologies

Chapter 4

Dreamweaver: Part II

The Web Warrior Guide to Web Design Technologies

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

Web Site Layout with Layers and Frames

• A layer is an extension to HTML that is defined by <layer> 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 layer’s stacking order.

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

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

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

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

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

Layout with Frames

• A frameset document holds multiple frames• Each frame holds its own HTML document• Frameset documents have <frameset> tags

– The <frameset> tags define layout in terms of rows and columns

– Framesets can be nested inside each other

– Frameset documents do not have <body> tags

Creating Framesets

• Type Ctrl+N 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

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

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

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

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

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

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

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

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

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

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

Internal Style Sheets

• Define styles within the <head> 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

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

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

Record Path of Layer

• In Standard View, draw a layer• Insert an image into the layer• Open the Timelines panel (Alt+F9)• 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

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

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


• 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


• 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


• 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


• 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

Advanced Productivity Tools in Dreamweaver

• Forms:– Create forms with form objects

– Dreamweaver provides tools for form verification and validation


• Library Items:– Create and reuse HTML objects on multiple pages

– When Library Item changes, Dreamweaver propagates change on all pages that use it


• 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

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

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

The Web Warrior Guide to Web Design Technologies

Documents

Transcript of The Web Warrior Guide to Web Design Technologies