Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about how to achieve the effect of web page slides in Dreamweaver. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Step 1: the production and preparation of graphic elements.

Make the picture used in the slide and put it in the layer of Dreamweaver. We are going to transform 7 pictures alternately in each slide, so we need to make 7 pictures with different content. Note that the image should be optimized and compressed in Photoshop and adjusted to the same size. Create a layer and insert the initial picture, which is the first picture of the slide by default. Name the layer Layer_main and set the Index value for that layer to 1.

Step 2: make the appearance of the player and four control buttons.

Use Photoshop to create a metal look of the player. The specific effect depends on what you like. Maybe you can get some inspiration from Winamp's skin. After making the best optimization, output a transparent GIF image. In order for the button to change after the mouse is moved up, you have to make 2 pictures for each button (a total of 6), and the two buttons only need to have a difference in color. First build three layers, adjust the position, and insert two tumbling pictures (Rollover Image) (Insert-Rollover Image) of each of the three play keys. By adjusting the value of the Index-Z of the layer, make sure that the layer of the player is above the Layer_main layer and below the button layer. The typesetting layers are shown in figure 1.

Step 3: create a slide show time chain.

Press Ctrl+ F9 to open the time chain floating tool panel. Select the initial picture in the slide layer (Layer_main) (make sure the image is selected, not the layer), drag the mouse to the time chain floating tool panel, and release the mouse at the beginning of the time chain. Set the frame rate to Fps to 5 and check the Loop box. Select one of the frames in the time chain, right-click, select "Add Keyframe" (add keyframes), and select another slide picture to replace the initial picture in the Layer_main. Repeat this operation to add all the remaining 5 images to different keyframes of the time chain. Finally, the distance between the key frames is adjusted appropriately. And the time chain is named TimeLine_main. The established time chain is shown in figure 2.

Step 4: add behaviors (Behavior) to buttons and others.

Click on the picture where the PLAY button is located, in the behavior float tool panel, select Timeline-Play Timeline (playback time chain) from the + (add) action drop-down list, and select the time chain Timeline_main in the pop-up dialog box. Click OK. By default, an onClick event is set for the toggle action. Click to select the picture where PAUSE is located. In the behavior float tool panel, select Timeline---Stop Timeline (stop playback time chain) from the + (add) action drop-down list, and select the time chain Timeline_main in the pop-up dialog box. Click OK. By default, an onClick event is set for the toggle action.

Click to select the picture where REPLAY is located. In the behavior float tool panel, select Timeline---Go to Timeline Frame from the drop-down list of the + (add) action, select the time chain Timeline_main in the pop-up dialog box, and enter 1 in the Frame text box. Click OK. By default, an onClick event is set for the toggle action. Add the next action. Select Timeline---Play Timeline (playback time chain) from the + (add) action drop-down list, and select the time chain Timeline_main in the pop-up dialog box. Click OK. By default, an onClick event is set for the toggle action. The image-added behavior of REPLAY is shown in figure 3.

After reading the above, do you have any further understanding of how to achieve web slideshow in Dreamweaver? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.