1 / 45

The Web Warrior Guide to Web Design Technologies

The Web Warrior Guide to Web Design Technologies. Chapter 4 Dreamweaver: Part II. 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

nash
Download Presentation

The Web Warrior Guide to Web Design Technologies

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 layeris 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.

  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. 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

  7. 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

  8. 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

  9. 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

  10. 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

  11. 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

  12. 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

  13. 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

  14. 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

  15. 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

  16. 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

  17. 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

  18. 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

  19. 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

  20. 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

  21. 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

  22. 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

  23. 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

  24. 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

  25. 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

  26. 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

  27. 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

  28. 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

  29. 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

  30. 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

  31. Advanced Productivity Tools in Dreamweaver • Forms: • Create forms with form objects • Dreamweaver provides tools for form verification and validation

  32. 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

  33. 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

  34. 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

  35. 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

More Related