Judging from the current situation, the built-in functions of Dreamweaver can be said to be more and more abundant, rich and complete. Here I would like to introduce to you some application tips in version 4.0.
1. Make web pages more flexible.
Some web developers call the technique introduced below liquid, but I call this technique here stretchy (flexible extension technique). This is a technique that can adjust the size of the web page when the size of the visitor's browser window changes. Therefore, if the window is too large, there will be no blank space, and if the window is too small, the up and down moving bar will not appear on the edge. In fact, most simple web pages will automatically adjust the page size according to the size of the browser window. However, if many different frames and tables are used in the web page, it will be difficult for the web page size to be automatically and flexibly adjusted. Usually web designers will use a mixture of fixed column width frames and GIF images as intervals to design web pages. In this way, whether using Internet Explorer or Mac, the page size will be fixed and will not run away. With Dreamweaver 4.0, you can easily design web pages that automatically adjust flexibly. How to do it?
Open the web page using the buttons on the Object palette and switch to Layout view. At this time, you can see the column width of the text box. There is a small drop-down arrow in the middle of the box above each column. Select the small arrow above the column that you want to set the flexible display, and then select "Make Column Flexible" Display" (Make Column Autostretch). (Set automatic adjustment of column width to be limited to one column) At this time, a wavy line will appear above the column box instead of the original number indicating the column width. Dreamweaver will automatically create a fixed-layout blank image file. This blank image file is represented by two long blank tables above the columns. In this way, the layout will be automatically filled, and the flexible layout setting will be completed. (When you add a blank image file for the first time, a dialog box will pop up asking you if you want to use the built-in image file. For the best effect, I recommend that you let Dreamweaver automatically generate one, otherwise you do not need to use a blank image file to fill the layout.)
2. Create a personalized color palette.
The new Assets panel of Dreamweaver 4.0 is a new tool that can manage files according to file types, such as pictures, templates, etc., when editing a website. When you define a new website (Select Site · New Site), all types of components will automatically be added to the appropriate boxes in the Asset panel. This new Assets panel also has a color box in the property control panel, which stores all the colors used in your website, including text colors, background colors, and link colors. This is a website-oriented color palette tailored for users. Just activate the Assets panel (select Window first, then Assets), then select the little color scroll bar on the left, and you will see a variety of color options for your website. Of course you can pull these colors to certain selected text. Even when you select a color, the hexadecimal value of the color and the three-color corresponding code (RGB) will appear on the screen. If you want to make your palette toolbar smaller, you can even add only certain colors to your palette's Favorites. Just highlight the selected color, select a button called "Add to My Favorites" in the window (the bottom right button), and you're done.
3. Making a Pop
-up Menu Navigation System Originally, making a Pop-up Menu Navigation System required some JavaScript syntax skills, but if you have Dreamweaver/Fireworks Studio installed, it is easy. It can be done quickly. First start in Fireworks, select an image, and then select Insert·Pop-Up Menu in the Set Pop-Up Menu dialog box. You can enter the name of the items and select the Plus button to add the project. You can continue to make detailed settings in the pop-up message box, such as setting the text and links to be used for the item. Of course, you can also add submenus and rearrange the settings for the next level. When finished, select Next to continue setting preferences such as colors, fonts, and more. After the menu is completed, you can preview the HTML syntax and preview the image. Then select Finish. At this time, when the mouse moves to the original pattern, a list of the contents of the menu system will appear. Then when you export the created file, Fireworks will automatically generate all the HTML, JavaScript, and image files that Dreamweaver needs.
4. Make the image file move!
If you have Dreamweaver/Fireworks Studio installed at the same time, you will be amazed at the perfect combination of these two products. Even if you are not a professional graphic designer, you still want to modify some GIF image files to make them more vivid when designing web pages. Dreamweaver allows you to create animations without asking anyone! Select the image you want to modify in the standard window, and then select the Edit button in the Property Inspector. If Fireworks is included with your installation of Dreamweaver, Fireworks is Dreamweaver's default image editor, and the images will be automatically loaded into Fireworks. (If you look carefully, you will find that text and graphics such as Editing From Dreamweaver will appear on the Fireworks screen, indicating that you can edit pictures from Dreamweaver.) Okay, now select the picture to be edited in Fireworks and select Modify·Animate ·Animate Selection. Next, complete the settings in the Animate dialog box, select the number of frames for the animation, the direction of animation movement, transparency, etc. You can also select the Frames toolbar to set the movement speed, and select the Object panel to change the settings. To export the file, just select the Optimize toolbar and select Animated GIF as the file type. After completion, Fireworks will automatically export the image with optimized settings, automatically update the GIF image file, and display the updated image file in Dreamweaver. Select File·Preview in Browser, so that you can preview the lovely image you just created in the browser!
5. Make the button have a flashing effect.
In Dreamweaver, you can create a Flash button object with a flashing effect without having a Flash program. Version 4.0 has several built-in Flash button objects, which can create several different forms of buttons. Select Insert·Interactive Images·Flash Button to see which built-in buttons are available. You can even use the mouse to point to the button form you want to use in the dialog box, and then see how it works in the browser. Use the mouse cursor to select the button form you want to use, and then enter parameters in sequence, such as the text, font, color, link, etc. on the button, or a customized file name. Press OK. Next, a SWF file will be generated and automatically placed on your web page. Click on the completed file and you will see the properties of the file displayed in the Property Inspector. When displaying file attributes, if you expand the file attribute list, a Play button will appear. After selecting it, you can preview the flashing effect of the button without opening the browser.
6. Create flowing text.
Adding flowing text to a web page is as easy as adding the Flash button I just introduced. Similarly, you don't need to install Flash, you can easily do it with the new features provided by Dreamweaver 4.0. Web page creators who commonly use HTML syntax to write web pages and have no interactive media experience can easily create compact flowing text in the form of Flash. According to Macromedia, 97% of Internet users can view web pages with Flash effects, so this new feature can add some interactivity to browsing and readers to web pages without adding compatibility troubles. Select Insert · Interactive Images · Flash Text, and then fill in the preference settings one by one (such as the text, font style, font color, font size, etc. you want to change the effect).