For professional web page makers who want to create complex web pages in a visual environment, Dreamweaver has gradually emerged in the web page editing tool market and has become the best choice for professionals to write web pages. 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).
7. Change keyboard shortcuts Dreamweaver allows users to customize the interface. This design is very flexible. For example, users can change the menu by writing programs or adding objects. You don't have to be an expert to change keyboard shortcuts, because Dreamweaver has a graphical interface called Keyboard Shortcut Editor. Just select Edit · Keyboard Shortcuts, and the dialog box will load and list a list of shortcut keys that can be changed, allowing you to quickly Change the key to the setting value you are used to. To change a shortcut key, just use the drop-down menus of the Current Set and Command list, find the command you want to change among the existing commands, and then select the current shortcut key. It will appear in the quick key list. in the list of keys. In addition, if you want to add a quick key setting, you can select the Plus button, type the new quick representative key you want to use on the keyboard, and select Change. At the same time, you can also select a shortcut key and select the remove key (Minus) to remove a shortcut key.
8. Reset the column width of the Site window. Just select View·File View Columns from the Site window to customize the size and presentation of the column width when viewing the Site view. Select a column of names and use the up and down arrows to resize, or uncheck Show field to hide the column. In addition, you can also add columns by selecting the Plus button and create your own column names. Additionally, you can associate a column with a Design Note by selecting an existing note from the drop-down menu.
9. Read the original web page file. When you open O'Reilly Code Reference (Window · Reference) to check properties or browser compatibility, the default window will display the reference settings in small fonts. But if you press the right button in the upper right corner of the window (just below the close button), a row of drop-down menus will appear where you can select the font size of the original document (small, to medium, and large). . Choosing large fonts is less harsh on the eyes because you don't have to hold a magnifying glass to look at the screen when viewing the original HTML file!
10. Add a new Flash button. Above, I have taught you how to use 20 preset button types to create Flash buttons in Dreamweaver. This method does not require installing any additional files or programs. There is another method below, which is to install Fireworks buttons. This extended function has the same effect as Tip 5. Go to Exchange for Dreamweaver (Dreamweaver extension exchange center), enter the keyword search "InstaGraphics Extensions for Dreamweaver", and then download this 577K file. Switch to Dreamweaver, select Commands·Manage Extensions, and then select File·Install Extension to start the installation. Once Dreamweaver is reactivated, there are six novel and interesting button types, including Surfboard and Bulletbar. At this time, just use the Insert · Interactive Images · Fireworks Button command to create a cool button. You can also use commands ·Convert Bullets To Images and Commands ·Convert Text To Images. Both of the above methods can automatically execute Fireworks.
11. Add the "Set as Favorites" function to the web page and search in Exchange, you can find the extension function of Add To Favorites. This small file only occupies 3K, and the download time will not take too long. Then follow the same steps to load it from the Extension Manager (Commands · Manage Extensions, File · Install Extension). Then reactivate Dreamweaver. This newly loaded extension file will add a new feature to Dreamweaver. If you add this "add to favorites" function to your webpage, then when an Internet user visits your website, he can easily add your website to his browser's favorites with just one click ( or personal bookmarks). In addition, you can also customize the name of the favorite shortcut and the small icon that will appear in front of the favorite shortcut name (generally, the small icon in front of the favorite shortcut in IE is the default value of IE. If you have your own The designed small icon is much cooler. Note that this function only supports browsers with IE 4.0 and higher. Just select the Behavior panel in the Windows menu and select this option in the IE function drop-down menu.
12. If you want to create acool
chart, do you still have to spend time typing out the source code of the web page? There is already a ready-made one to download from Exchange! The Form Builder extension has a ready-made form that allows you to instantly copy a form containing fields such as country, gender, marital status, age group, and other categories. Download this small (only 11K) file from Exchange, and then use the Extension Manager. Install it (Commands·Manage Extensions, File·Install Extension). Then just reactivate Dreamweaver and select Insert·FormBuilder, and you will find the extension file in (Insert·FormBuilder). After selecting, a dialog box will appear. , all applicable format menus will be displayed.