title
Fireworks CS4 CS5 Active Web Site layouts Tutorial - Custom Menus 1 Slice Hotspot

description
In this Fireworks CS4 tutorial we show you how to create working web site layouts.

detail
{'title': 'Fireworks CS4 CS5 Active Web Site layouts Tutorial - Custom Menus 1 Slice Hotspot', 'heatmap': [{'end': 289.47, 'start': 252.47, 'weight': 0.851}], 'summary': 'Learn to create web menu bars in fireworks cs4 with rollover effects and active buttons, design custom menus and graphics for the web, and bring graphics to life for interactive web elements with rollover functionality and drop down menus.', 'chapters': [{'end': 185.315, 'segs': [{'end': 48.426, 'src': 'embed', 'start': 0.745, 'weight': 0, 'content': [{'end': 6.788, 'text': "this is the finished product of what we're creating in this fireworks cs4 tutorial.", 'start': 0.745, 'duration': 6.043}, {'end': 8.189, 'text': "it's a nice menu bar,", 'start': 6.788, 'duration': 1.401}, {'end': 18.615, 'text': 'completely designed in fireworks and programmed in fireworks to make all the buttons have rollover effects and active without even using dreamweaver.', 'start': 8.189, 'duration': 10.426}, {'end': 21.196, 'text': 'without opening dreamweaver at all.', 'start': 18.615, 'duration': 2.581}, {'end': 22.917, 'text': "we'd set it all up in fireworks.", 'start': 21.196, 'duration': 1.721}, {'end': 35.781, 'text': 'Hello everybody, Adam at FlashBuilding, here with another Fireworks CS4 tutorial, and this lesson comes courtesy of Chris Truman.', 'start': 26.698, 'duration': 9.083}, {'end': 48.426, 'text': "he's one of our new forum members from Canada and he states that I'm new at this and I have my site all mocked up in fireworks and I'm using one of the pre-made menu bars in the common library.", 'start': 35.781, 'duration': 12.645}], 'summary': 'A fireworks cs4 tutorial created a menu bar with rollover effects, no dreamweaver needed.', 'duration': 47.681, 'max_score': 0.745, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JRnMq2cawp4/pics/JRnMq2cawp4745.jpg'}, {'end': 98.908, 'src': 'embed', 'start': 69.777, 'weight': 5, 'content': [{'end': 76.7, 'text': "get it down on video for you guys, so everybody can benefit from it, and so first thing we'll do is open fireworks.", 'start': 69.777, 'duration': 6.923}, {'end': 85.854, 'text': "so we're in fireworks CS4 And he said he was using menu bar number 4 from the common library.", 'start': 76.7, 'duration': 9.154}, {'end': 91.46, 'text': "So let's go ahead and create a new document, 1000 by 200, that's good.", 'start': 86.615, 'duration': 4.845}, {'end': 98.908, 'text': "And let's see, let's get this into place here.", 'start': 95.404, 'duration': 3.504}], 'summary': 'Tutorial on using fireworks cs4 to create a new document 1000 by 200.', 'duration': 29.131, 'max_score': 69.777, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JRnMq2cawp4/pics/JRnMq2cawp469777.jpg'}, {'end': 187.915, 'src': 'embed', 'start': 162.779, 'weight': 3, 'content': [{'end': 168.005, 'text': "any style, and i'm gonna go ahead and fit canvas.", 'start': 162.779, 'duration': 5.226}, {'end': 174.013, 'text': "and so i just wanted to mention that just so you don't, You guys, don't assume that you have to use these common library menus.", 'start': 168.005, 'duration': 6.008}, {'end': 177.773, 'text': 'You can design your own custom menus with your own custom looks.', 'start': 174.133, 'duration': 3.64}, {'end': 182.834, 'text': "But using these in the common library, they're really nice looking for the web.", 'start': 178.173, 'duration': 4.661}, {'end': 185.315, 'text': 'But you can use custom ones.', 'start': 183.935, 'duration': 1.38}, {'end': 187.915, 'text': "So let's go ahead and fit Canvas first thing.", 'start': 185.535, 'duration': 2.38}], 'summary': 'You can create custom menus for web design using common library menus or custom ones.', 'duration': 25.136, 'max_score': 162.779, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JRnMq2cawp4/pics/JRnMq2cawp4162779.jpg'}], 'start': 0.745, 'title': 'Creating web menu bars', 'summary': 'Demonstrates creating a menu bar in fireworks cs4 with rollover effects and active buttons, eliminating the need for dreamweaver and utilizing pre-made menu bars from the common library. it also discusses creating functional rollovers in dreamweaver cs4 using menu bar 4 from the common library, emphasizing the ability to design custom menus and graphics for the web.', 'chapters': [{'end': 48.426, 'start': 0.745, 'title': 'Fireworks cs4 menu bar tutorial', 'summary': 'Demonstrates creating a menu bar in fireworks cs4 with rollover effects and active buttons, eliminating the need for dreamweaver and utilizing pre-made menu bars from the common library.', 'duration': 47.681, 'highlights': ['The tutorial showcases the creation of a menu bar in Fireworks CS4 with rollover effects and active buttons, entirely designed and programmed in Fireworks, eliminating the need for Dreamweaver.', 'The menu bar is set up in Fireworks, demonstrating the ability to make all the buttons have rollover effects and be active without using Dreamweaver at all, providing a seamless design and programming process.', "The lesson features a forum member's experience of using a pre-made menu bar from the common library in Fireworks to mock up their site, indicating the practical application of the tutorial."]}, {'end': 185.315, 'start': 48.426, 'title': 'Creating functional rollovers in dreamweaver cs4', 'summary': 'Discusses creating functional rollovers in dreamweaver cs4 using menu bar 4 from the common library, emphasizing the ability to design custom menus and graphics for the web.', 'duration': 136.889, 'highlights': ['The chapter emphasizes the ability to design custom menus and graphics for the web, not being limited to the common library menus. The speaker encourages the audience to design their own custom menus with custom looks, not being limited to the common library menus.', 'The tutorial involves using menu bar 4 from the common library to create functional rollovers in Dreamweaver CS4. The tutorial involves using menu bar 4 from the common library to create functional rollovers in Dreamweaver CS4, aiming to benefit the audience with a video tutorial for a better understanding.', 'The speaker mentions the process of opening Fireworks CS4 and creating a new document, 1000 by 200, to work on. The speaker discusses the process of opening Fireworks CS4 and creating a new document, 1000 by 200, to work on, providing a specific starting point for the audience.']}], 'duration': 184.57, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JRnMq2cawp4/pics/JRnMq2cawp4745.jpg', 'highlights': ['The tutorial showcases the creation of a menu bar in Fireworks CS4 with rollover effects and active buttons, entirely designed and programmed in Fireworks, eliminating the need for Dreamweaver.', 'The menu bar is set up in Fireworks, demonstrating the ability to make all the buttons have rollover effects and be active without using Dreamweaver at all, providing a seamless design and programming process.', "The lesson features a forum member's experience of using a pre-made menu bar from the common library in Fireworks to mock up their site, indicating the practical application of the tutorial.", 'The chapter emphasizes the ability to design custom menus and graphics for the web, not being limited to the common library menus. The speaker encourages the audience to design their own custom menus with custom looks, not being limited to the common library menus.', 'The tutorial involves using menu bar 4 from the common library to create functional rollovers in Dreamweaver CS4. The tutorial involves using menu bar 4 from the common library to create functional rollovers in Dreamweaver CS4, aiming to benefit the audience with a video tutorial for a better understanding.', 'The speaker mentions the process of opening Fireworks CS4 and creating a new document, 1000 by 200, to work on, providing a specific starting point for the audience.']}, {'end': 535.854, 'segs': [{'end': 213.778, 'src': 'embed', 'start': 185.535, 'weight': 0, 'content': [{'end': 187.915, 'text': "So let's go ahead and fit Canvas first thing.", 'start': 185.535, 'duration': 2.38}, {'end': 192.656, 'text': "And now I'm going to show you how to make rollover functionality.", 'start': 189.076, 'duration': 3.58}, {'end': 198.574, 'text': "Because if we press F12 right now and render this in the browser, It doesn't do anything.", 'start': 193.136, 'duration': 5.438}, {'end': 199.494, 'text': "It's just graphics.", 'start': 198.614, 'duration': 0.88}, {'end': 201.955, 'text': 'But he wants to know how to bring it to life.', 'start': 200.355, 'duration': 1.6}, {'end': 204.736, 'text': "So that's what we're going to show him how to do within Fireworks.", 'start': 202.155, 'duration': 2.581}, {'end': 207.956, 'text': 'Just export it all, ready to go in Dreamweaver.', 'start': 205.136, 'duration': 2.82}, {'end': 213.778, 'text': "Okay, so let's go ahead and save this.", 'start': 208.857, 'duration': 4.921}], 'summary': 'Demonstrating canvas fitting and rollover functionality for graphics in fireworks and dreamweaver.', 'duration': 28.243, 'max_score': 185.535, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JRnMq2cawp4/pics/JRnMq2cawp4185535.jpg'}, {'end': 289.47, 'src': 'heatmap', 'start': 252.47, 'weight': 0.851, 'content': [{'end': 258.007, 'text': 'and The first thing we want to do is set up a couple of states.', 'start': 252.47, 'duration': 5.537}, {'end': 262.348, 'text': "And since this is just graphics, let's go ahead and double click inside of this.", 'start': 259.148, 'duration': 3.2}, {'end': 264.069, 'text': 'Grab that little rectangle out.', 'start': 262.788, 'duration': 1.281}, {'end': 266.209, 'text': 'Press Control X on that.', 'start': 264.449, 'duration': 1.76}, {'end': 269.37, 'text': 'Double click back.', 'start': 268.609, 'duration': 0.761}, {'end': 272.11, 'text': "And then there's the symbol again.", 'start': 270.27, 'duration': 1.84}, {'end': 275.811, 'text': "And right on top of the symbol, we're going to put that rectangle back.", 'start': 272.21, 'duration': 3.601}, {'end': 281.212, 'text': "So it's not nested inside of that menu bar symbol anymore.", 'start': 276.371, 'duration': 4.841}, {'end': 282.272, 'text': "It's on its own.", 'start': 281.692, 'duration': 0.58}, {'end': 289.47, 'text': 'Press Control-C, Control-V.', 'start': 285.307, 'duration': 4.163}], 'summary': 'Setting up states and manipulating graphics by copying and pasting.', 'duration': 37, 'max_score': 252.47, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JRnMq2cawp4/pics/JRnMq2cawp4252470.jpg'}, {'end': 353.235, 'src': 'embed', 'start': 317.535, 'weight': 1, 'content': [{'end': 322.936, 'text': "So that's what they would see ordinarily when they come, when they open the web application or the website.", 'start': 317.535, 'duration': 5.401}, {'end': 326.437, 'text': "Now we want to make it to where there's an overstate.", 'start': 323.996, 'duration': 2.441}, {'end': 330.858, 'text': "And these would change the way they look when the person's mouse goes over it.", 'start': 326.897, 'duration': 3.961}, {'end': 333.739, 'text': 'And you have to add the behaviors to it.', 'start': 331.718, 'duration': 2.021}, {'end': 336.32, 'text': "And it just doesn't happen automatically.", 'start': 334.679, 'duration': 1.641}, {'end': 339.601, 'text': 'So you have to add behaviors, add the links you want, and things like that.', 'start': 336.4, 'duration': 3.201}, {'end': 340.921, 'text': "So that's what we'll do.", 'start': 340.241, 'duration': 0.68}, {'end': 353.235, 'text': "So first I'll show you how to make just these buttons regular have rollover effects and link to some page or some site whatever you want to do.", 'start': 342.95, 'duration': 10.285}], 'summary': 'Demonstrating how to add rollover effects and links to buttons in a web application or website.', 'duration': 35.7, 'max_score': 317.535, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JRnMq2cawp4/pics/JRnMq2cawp4317535.jpg'}, {'end': 412.613, 'src': 'embed', 'start': 357.658, 'weight': 3, 'content': [{'end': 368.023, 'text': "once that's all set and we've achieved our goal and we have exported files for Dreamweaver and ready to use on a website.", 'start': 357.658, 'duration': 10.365}, {'end': 370.421, 'text': 'with navigation and all.', 'start': 368.8, 'duration': 1.621}, {'end': 386.455, 'text': "then i'm gonna show you how to expand the size of the stage a little and make it to where one of these buttons has a drop down menu nice rollover drop down menu and i'll show you how to set that up and uh.", 'start': 370.421, 'duration': 16.034}, {'end': 396.023, 'text': "i'll discuss it when we get there but first let's achieve our primary goal so what we want to do is go into states and states is like uh..", 'start': 386.455, 'duration': 9.568}, {'end': 406.988, 'text': "frames. if you're used to working in fireworks, cs3 or other previous versions, then you would see this or recognize this as being frames.", 'start': 397.6, 'duration': 9.388}, {'end': 410.131, 'text': 'but now they renamed it to states.', 'start': 406.988, 'duration': 3.143}, {'end': 411.712, 'text': 'i guess it makes more sense to them.', 'start': 410.131, 'duration': 1.581}, {'end': 412.613, 'text': "i don't know why they did.", 'start': 411.712, 'duration': 0.901}], 'summary': 'Achieve goal, export files for dreamweaver, create navigation, expand stage, set up dropdown menu, work with states instead of frames.', 'duration': 54.955, 'max_score': 357.658, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JRnMq2cawp4/pics/JRnMq2cawp4357658.jpg'}, {'end': 462.083, 'src': 'embed', 'start': 435.202, 'weight': 2, 'content': [{'end': 439.363, 'text': 'You can just put a bunch of states in there, and they act like frames, and they run.', 'start': 435.202, 'duration': 4.161}, {'end': 442.385, 'text': 'Press play and you see all your frames out.', 'start': 440.403, 'duration': 1.982}, {'end': 445.708, 'text': 'Okay, and then you export it as an animated GIF.', 'start': 442.986, 'duration': 2.722}, {'end': 446.709, 'text': 'But you guys know how to do that.', 'start': 445.768, 'duration': 0.941}, {'end': 449.231, 'text': "So anyhow, let's make one more new state.", 'start': 446.829, 'duration': 2.402}, {'end': 455.157, 'text': 'And on state 1, so now we have state 1 and state 2.', 'start': 452.674, 'duration': 2.483}, {'end': 458.44, 'text': "And state 1 you'll see is the only one with items on it.", 'start': 455.157, 'duration': 3.283}, {'end': 460.281, 'text': "So let's copy those items.", 'start': 458.64, 'duration': 1.641}, {'end': 462.083, 'text': 'Press control C.', 'start': 460.421, 'duration': 1.662}], 'summary': 'Create animated gif from states, copy items using ctrl+c.', 'duration': 26.881, 'max_score': 435.202, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JRnMq2cawp4/pics/JRnMq2cawp4435202.jpg'}], 'start': 185.535, 'title': 'Creating interactive web graphics', 'summary': 'Covers creating rollover functionality in canvas using fireworks, preparing for dreamweaver, creating rollover effects and drop down menus, and demonstrating the process of creating states for web-friendly animations, emphasizing the importance of bringing graphics to life and achieving the goal of interactive web graphics.', 'chapters': [{'end': 316.714, 'start': 185.535, 'title': 'Creating rollover functionality in canvas', 'summary': 'Demonstrates the process of creating rollover functionality in a graphic using fireworks, preparing it for dreamweaver and setting up states, emphasizing the importance of bringing graphics to life.', 'duration': 131.179, 'highlights': ['The process of creating rollover functionality in a graphic using Fireworks and preparing it for Dreamweaver is demonstrated.', 'The importance of bringing graphics to life by setting up states is emphasized.', 'Instructions for saving the graphic as a png file and organizing it in the root directory of the website are provided.', 'The step-by-step process of setting up states and arranging elements for the normal state is explained.']}, {'end': 386.455, 'start': 317.535, 'title': 'Creating rollover effects and drop down menus', 'summary': 'Covers creating rollover effects and drop down menus for web application buttons, including adding behaviors, links, and achieving the goal of exporting files for dreamweaver, with a focus on expanding the size of the stage and setting up a rollover drop down menu.', 'duration': 68.92, 'highlights': ['Creating rollover effects for web application buttons by changing their appearance when the mouse hovers over them, and adding behaviors and links.', 'Demonstrating the process of exporting files for Dreamweaver and achieving the goal of creating a website with navigation and rollover effects.', 'Expanding the size of the stage and setting up a rollover drop down menu for one of the buttons on the website.']}, {'end': 535.854, 'start': 386.455, 'title': 'Creating states for web animations', 'summary': 'Demonstrates creating states for web-friendly animations, akin to frames, and modifying elements to produce an animated gif, emphasizing the process of adding, duplicating, and altering states for visual impact.', 'duration': 149.399, 'highlights': ['Creating states, similar to frames, allows for the production of web-friendly animations and animated GIFs.', 'Demonstrating the process of adding and duplicating states to modify elements and create visual impact.', 'The renaming of frames to states is to align with web-friendly jargon and cater to the increasing usage of the tool for web-related purposes.']}], 'duration': 350.319, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JRnMq2cawp4/pics/JRnMq2cawp4185535.jpg', 'highlights': ['Demonstrating the process of creating rollover functionality in a graphic using Fireworks and preparing it for Dreamweaver.', 'Creating rollover effects for web application buttons by changing their appearance when the mouse hovers over them, and adding behaviors and links.', 'Creating states, similar to frames, allows for the production of web-friendly animations and animated GIFs.', 'The importance of bringing graphics to life by setting up states is emphasized.', 'Demonstrating the process of exporting files for Dreamweaver and achieving the goal of creating a website with navigation and rollover effects.']}, {'end': 1012.731, 'segs': [{'end': 632.347, 'src': 'embed', 'start': 537.995, 'weight': 1, 'content': [{'end': 542.638, 'text': 'Okay, so now we have state one is the normal state.', 'start': 537.995, 'duration': 4.643}, {'end': 545.54, 'text': 'State two is going to be the rollover state.', 'start': 542.919, 'duration': 2.621}, {'end': 547.081, 'text': "It's very simple.", 'start': 546.441, 'duration': 0.64}, {'end': 550.764, 'text': 'And you can even name those if you want, I do believe.', 'start': 548.642, 'duration': 2.122}, {'end': 555.266, 'text': 'Yep You can rename those to normal and rollover.', 'start': 550.984, 'duration': 4.282}, {'end': 569.173, 'text': 'close that and now we want to go into the layers and lock all the graphics on that layer, one on the web layer.', 'start': 556.497, 'duration': 12.676}, {'end': 572.534, 'text': "now we're going to add a slice.", 'start': 569.173, 'duration': 3.361}, {'end': 579.538, 'text': 'you can use the slice tool or the rectangle hotspot tool, and i do believe both will give you the same functionality.', 'start': 572.534, 'duration': 7.004}, {'end': 582.479, 'text': 'if you use the polygon slice, you can make any custom shapes.', 'start': 579.538, 'duration': 2.941}, {'end': 583.78, 'text': "it's pretty cool.", 'start': 582.479, 'duration': 1.301}, {'end': 590.403, 'text': "but for this we're just going to use slice, the regular slice, rectangle slice, and draw it out.", 'start': 583.78, 'duration': 6.623}, {'end': 592.384, 'text': "we'll drag it out over that first button.", 'start': 590.403, 'duration': 1.981}, {'end': 600.808, 'text': "put it where we want it to, where the mouse will be active when it's over that.", 'start': 593.604, 'duration': 7.204}, {'end': 603.069, 'text': 'move it into place.', 'start': 600.808, 'duration': 2.261}, {'end': 604.87, 'text': "now, let's click.", 'start': 603.069, 'duration': 1.801}, {'end': 611.053, 'text': "well, let's go ahead and close this.", 'start': 604.87, 'duration': 6.183}, {'end': 614.794, 'text': 'now, these slices, where all the magic happens.', 'start': 611.053, 'duration': 3.741}, {'end': 615.915, 'text': 'the rest is just graphics.', 'start': 614.794, 'duration': 1.121}, {'end': 622.145, 'text': 'but the states are very important as well.', 'start': 618.444, 'duration': 3.701}, {'end': 625.125, 'text': "so let's this first slice.", 'start': 622.145, 'duration': 2.98}, {'end': 629.226, 'text': "let's go ahead and click it in the center on that dot.", 'start': 625.125, 'duration': 4.101}, {'end': 632.347, 'text': "let's add simple rollover behavior.", 'start': 629.226, 'duration': 3.121}], 'summary': 'Creating rollover state for web button using slices and behavior', 'duration': 94.352, 'max_score': 537.995, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JRnMq2cawp4/pics/JRnMq2cawp4537995.jpg'}, {'end': 702.154, 'src': 'embed', 'start': 668.813, 'weight': 2, 'content': [{'end': 671.534, 'text': 'If you want to stay in the same window, you use self.', 'start': 668.813, 'duration': 2.721}, {'end': 677.05, 'text': "And let's put alt flash building whatever.", 'start': 673.763, 'duration': 3.287}, {'end': 681.099, 'text': "Okay, so now that's the alt.", 'start': 679.455, 'duration': 1.644}, {'end': 682.582, 'text': 'The link is in.', 'start': 681.84, 'duration': 0.742}, {'end': 683.424, 'text': "Now let's press F12.", 'start': 682.762, 'duration': 0.662}, {'end': 694.091, 'text': 'So we see when I go over it, it has the alt tag comes up, use the flash building.', 'start': 687.188, 'duration': 6.903}, {'end': 698.692, 'text': 'And then if I click it, opens a new window straight to flash building.', 'start': 694.951, 'duration': 3.741}, {'end': 702.154, 'text': "So that's it my brother, you got your functionality right there.", 'start': 699.353, 'duration': 2.801}], 'summary': "Demonstration of using 'alt' and 'flash building' for window functionality.", 'duration': 33.341, 'max_score': 668.813, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JRnMq2cawp4/pics/JRnMq2cawp4668813.jpg'}, {'end': 986.315, 'src': 'embed', 'start': 937.722, 'weight': 0, 'content': [{'end': 942.925, 'text': "desktop Chris Truman site and there's that HTML file.", 'start': 937.722, 'duration': 5.203}, {'end': 945.366, 'text': "let's open it up and inspect it.", 'start': 942.925, 'duration': 2.441}, {'end': 948.468, 'text': 'there you go, buddy.', 'start': 945.366, 'duration': 3.102}, {'end': 949.749, 'text': 'now you know how to publish out.', 'start': 948.468, 'duration': 1.281}, {'end': 953.591, 'text': 'in Dreamweaver, you just press F12.', 'start': 949.749, 'duration': 3.842}, {'end': 964.47, 'text': "you see there's your site ready to go and you can piece the elements together, or you can make one huge page in uh.", 'start': 953.591, 'duration': 10.879}, {'end': 968.211, 'text': "and fireworks there, and i think i'm gonna leave it at this.", 'start': 964.47, 'duration': 3.741}, {'end': 976.593, 'text': "and if you guys enjoyed this tutorial and you'd like to see more on setting up fireworks web layouts to be active and ready to go,", 'start': 968.211, 'duration': 8.382}, {'end': 982.934, 'text': 'when you export out of fireworks, you can manipulate them further in dreamweaver, then just uh.', 'start': 976.593, 'duration': 6.341}, {'end': 984.755, 'text': 'rate this video high.', 'start': 982.934, 'duration': 1.821}, {'end': 986.315, 'text': 'comment on it.', 'start': 985.615, 'duration': 0.7}], 'summary': 'Tutorial on publishing sites in dreamweaver and fireworks.', 'duration': 48.593, 'max_score': 937.722, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JRnMq2cawp4/pics/JRnMq2cawp4937722.jpg'}], 'start': 537.995, 'title': 'Creating interactive web elements', 'summary': 'Covers creating a rollover state for web buttons, interactive slices in flash, and web layout export in dreamweaver. it includes naming states, adding slice tools, creating interactive slices, and exporting web layouts, with specific instructions and a call to action for viewers to request more tutorials.', 'chapters': [{'end': 592.384, 'start': 537.995, 'title': 'Creating rollover state for web button', 'summary': 'Explains how to create a rollover state for a web button, including naming states, locking graphics, and adding a slice tool for functionality. it also mentions the option of using the polygon slice for custom shapes.', 'duration': 54.389, 'highlights': ['You can name the states normal and rollover, then lock all the graphics on the layer.', 'Explains the use of slice tool or rectangle hotspot tool for adding functionality.', 'Mentions the option of using the polygon slice for creating custom shapes.']}, {'end': 849.338, 'start': 593.604, 'title': 'Interactive slice functionality in flash', 'summary': 'Demonstrates how to create interactive slices in flash, including adding simple rollover behavior and linking to external websites, with specific instructions on copying, pasting, and modifying the functionality for multiple slices.', 'duration': 255.734, 'highlights': ['The chapter demonstrates adding simple rollover behavior to create interactive slices in Flash.', 'Instructions are provided for linking to external websites and specifying whether to open the link in a new window or stay in the same window.', 'Detailed instructions are given for copying, pasting, and modifying the functionality for multiple slices in Flash.']}, {'end': 1012.731, 'start': 849.338, 'title': 'Web layout export and inspection', 'summary': 'Demonstrates the process of exporting and inspecting a web layout in dreamweaver, including exporting html and images, opening the html file in dreamweaver, and manipulating the layout using fireworks, with a call to action for viewers to request more tutorials.', 'duration': 163.393, 'highlights': ['The tutorial shows how to export a web layout in Dreamweaver, including exporting HTML and images, and inspecting the HTML file, preparing the site for publishing (e.g., pressing F12 to preview the site).', 'The speaker emphasizes the use of Fireworks to manipulate the web layout, suggesting the possibility of creating drop-down menus with CSS, and encourages viewers to request more tutorials by commenting and rating the video high.', 'The speaker concludes by inviting viewers to express their interest in similar tutorials by commenting and rating the video high, indicating a willingness to demonstrate how to create drop-down menus with CSS.']}], 'duration': 474.736, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JRnMq2cawp4/pics/JRnMq2cawp4537995.jpg', 'highlights': ['The tutorial shows how to export a web layout in Dreamweaver, including exporting HTML and images, and inspecting the HTML file, preparing the site for publishing (e.g., pressing F12 to preview the site).', 'The chapter demonstrates adding simple rollover behavior to create interactive slices in Flash.', 'Instructions are provided for linking to external websites and specifying whether to open the link in a new window or stay in the same window.', 'You can name the states normal and rollover, then lock all the graphics on the layer.', 'Explains the use of slice tool or rectangle hotspot tool for adding functionality.', 'Mentions the option of using the polygon slice for creating custom shapes.', 'The speaker emphasizes the use of Fireworks to manipulate the web layout, suggesting the possibility of creating drop-down menus with CSS, and encourages viewers to request more tutorials by commenting and rating the video high.']}], 'highlights': ['The tutorial showcases the creation of a menu bar in Fireworks CS4 with rollover effects and active buttons, entirely designed and programmed in Fireworks, eliminating the need for Dreamweaver.', 'The menu bar is set up in Fireworks, demonstrating the ability to make all the buttons have rollover effects and be active without using Dreamweaver at all, providing a seamless design and programming process.', "The lesson features a forum member's experience of using a pre-made menu bar from the common library in Fireworks to mock up their site, indicating the practical application of the tutorial.", 'The chapter emphasizes the ability to design custom menus and graphics for the web, not being limited to the common library menus. The speaker encourages the audience to design their own custom menus with custom looks, not being limited to the common library menus.', 'The tutorial involves using menu bar 4 from the common library to create functional rollovers in Dreamweaver CS4. The tutorial involves using menu bar 4 from the common library to create functional rollovers in Dreamweaver CS4, aiming to benefit the audience with a video tutorial for a better understanding.', 'The speaker mentions the process of opening Fireworks CS4 and creating a new document, 1000 by 200, to work on, providing a specific starting point for the audience.', 'Demonstrating the process of creating rollover functionality in a graphic using Fireworks and preparing it for Dreamweaver.', 'Creating rollover effects for web application buttons by changing their appearance when the mouse hovers over them, and adding behaviors and links.', 'Creating states, similar to frames, allows for the production of web-friendly animations and animated GIFs.', 'The importance of bringing graphics to life by setting up states is emphasized.', 'Demonstrating the process of exporting files for Dreamweaver and achieving the goal of creating a website with navigation and rollover effects.', 'The tutorial shows how to export a web layout in Dreamweaver, including exporting HTML and images, and inspecting the HTML file, preparing the site for publishing (e.g., pressing F12 to preview the site).', 'The chapter demonstrates adding simple rollover behavior to create interactive slices in Flash.', 'Instructions are provided for linking to external websites and specifying whether to open the link in a new window or stay in the same window.', 'You can name the states normal and rollover, then lock all the graphics on the layer.', 'Explains the use of slice tool or rectangle hotspot tool for adding functionality.', 'Mentions the option of using the polygon slice for creating custom shapes.', 'The speaker emphasizes the use of Fireworks to manipulate the web layout, suggesting the possibility of creating drop-down menus with CSS, and encourages viewers to request more tutorials by commenting and rating the video high.']}