Transcript Chapter 4
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 • 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 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 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 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 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 Advanced Productivity Tools in Dreamweaver • Forms: – Create forms with form objects – Dreamweaver provides tools for form verification and validation 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 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 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