1. Background analysis
For professional web page producers who want to create complex web pages in a visual environment, Dreamweaver has gradually emerged as a web page editing tool and has become the best choice for professionals to write web pages. According to a survey by Macromedia, Dreamweaver currently has more than 700,000 users, ranking first among web editing tools in terms of share, leaving competitors such as "Adobe GoLive" and "NetObjects Fusion" far behind. Therefore, it is generally expected that the number of users of Dreamweaver will continue to increase.
Under this overwhelming popularity rate, it is conceivable that the built-in functions of Dreamweaver are becoming more and more abundant, rich and complete. In our introduction this time, there are some new features that provide web page makers with faster design, easier coding, and more integrated functions. Without further ado, here we introduce how to make good use of some functions in Dreamweaver. There are twelve secret techniques below, which can be divided into four themes. They are: designing web pages (Dreamweaver has flexible page design functions), using Dreamweaver with other Macromedia products (making animations and pictures without asking for help), customizing the user interface (enjoying a personalized user experience), and finally joining Dreamweaver Extensions (load extended advanced features into web pages).
2. Tips for designing web pages.
Whether you want to use the original HTML syntax to write web pages word for word, or use standardized windows for visual design of web pages, the following tips can come in handy.
Tip 1: Make the web page size more flexible.
Some web developers call the technique introduced below "liquid", but here they call it the "elastic extension technique". This is a technique that adjusts 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; if the window is too small, the up and down moving bars will not appear on the edges. 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-width frames and GIF images as intervals to design web pages. In this way, whether using Internet Explorer or Netscape Navigator, the page size will be fixed and will not run away. With Dreamweaver 4.0, you can easily design web pages that will automatically adjust flexibly. How to do it?
★Specific method: Use the button on the tool palette (Object palette) to open the web page 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. Click the small arrow above the column you want to set the flexible display, and then select "Set Column as Make Column Autostretch. (Set the automatic adjustment 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. This blank image is represented by two long blank tables above the column. In this way, the layout will be automatically filled, and the flexible layout setting will be completed. (When you add a blank picture for the first time, a dialog box will pop up asking you if you want to use a built-in picture. For the best effect, we recommend that you let Dreamweaver automatically generate one, otherwise you do not need to use a blank picture to fill the layout.)
Tip 2: Create Personal Palette
Dreamweaver's new "Assets panel" (property control panel) is a new tool that can manage files according to file formats, such as pictures, styles, etc., when editing a website.
★Specific method: When you define a new site (click Site New Site), all types of objects will automatically be added to the appropriate table boxes in the "Asset panel". This newly added "Assets panel" property control panel also has a color box, which stores all the colors used in your website, including text color, background color, and hyperlink color. This is a website navigation color palette tailored for users. Just launch the "Assets panel" (select "Window" first and then click "Assets"), then click on the small color scroll 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 certain color, the hexadecimal value of the color density and the three primary color contrast codes (RGB) will appear on the screen. If you want to make the palette toolbar smaller, you can even add only certain colors to the "favorites" of the palette. Just highlight the selected color and click the "Add to Favorites" button in the window (the bottom right button), and you're done.
Tip 3: Making a Pop-up Menu Navigation System
Originally, making a Pop-up Menu Navigation System required a lot of JavaScript syntax and techniques, but if you have Dreamweaver and Fireworks Studio, you can easily Do it easily and quickly.
★Specific method: First start in "Fireworks", select a picture, and then click "Insert Pop-Up Menu" in the "Set Pop-Up Menu" dialog box. You can enter the name of the items (items) and Click the "Plus" button to add the item. You can continue to make detailed settings in the information box that pops up, such as setting the text and hyperlinks to be used for the project. Of course, you can also add submenus and rearrange the settings for the next level. When finished, click "Next" to continue setting various parameter values, such as color, font, etc. After the menu is completed, you can preview both HTML syntax and images. Click "Finish" again. At this time, when the mouse moves to the original picture, a list of the contents of the menu system will appear. Then when you export the created file, "Fireworks" will automatically produce all the HTML, javascript, and image files that Dreamweaver needs to use.
Tip 4: Make the pictures move.
If you have Dreamweaver and Fireworks Studio installed at the same time, you will be amazed by the perfect combination of these two softwares. Even if you are not a professional picture designer, you may want to modify some GIF pictures to make them more vivid when designing web pages. Dreamweaver lets you create animations without asking for help.
★Specific method: Select the picture to be modified in the standard window, and then click "Edit" in the "Property Inspector". If you installed Dreamweaver with "Fireworks" included, "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 in Dreamweaver.) Okay, now click on the picture you want to edit in "Fireworks" , select "Modify Animate Animate Selection". Next, complete the settings in the "Animate dialog box", select the number of frames of the animation, the direction of animation movement, transparency and other settings. You can also click the "Frames" tool to set the movement speed, and select the "Object" panel to change the settings. When you want to export a file, just click on the "Optimize" toolbar and select "Animated GIF" in the file type. After completion, "Fireworks" will automatically export the image with optimized settings, automatically update the GIF image, and display the updated image in Dreamweaver. Click "File Preview in Browser" so that you can preview the lovely picture you just created in the browser.
Tip 5: Make the button have a flashing effect.
In Dreamweaver, you can create a Flash button object with a flashing effect without having Flashs. Dreamweaver has several built-in Flash button objects, which can create several different forms of buttons.
★Specific method: Click "Insert Interactive Images Flash Button" to see the built-in buttons. 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 pointer to select the button form to be used, and then enter parameters in sequence, such as the text, font, color, hyperlink, etc. on the button, or a custom file name. Press OK. Next, a file in "SWF" format will be generated, and the file will be automatically imported into your web page. Click on the completed file and you will see the file's properties displayed in the "Property Inspector". When displaying file attributes, if you expand the file attribute list, "Play" will appear. After clicking, you can preview the flashing effect of the button without opening the browser.
Tip 6: Create flowing text
Adding flowing text to a web page is as easy as adding the Flash button we just introduced. Similarly, without installing Flash, you can easily do it with the new features provided by Dreamweaver. Web page creators who commonly use HTML syntax to write web pages and have no experience in interactive media can easily create compact flowing text in the form of Flash. This new feature can add some browsing interactivity to web pages without adding compatibility hassles. ★Specific method: Click "Insert Interactive Images Flash Text", and then fill in the parameter settings one by one (such as the text, font style, font color and font size that you want to change the effect, etc.).
Tip 7: Change keyboard shortcuts
Dreamweaver allows users to customize the interface, and this design is very flexible. For example, users can change the menu by writing programs or adding objects themselves. You don't have to be an expert to change keyboard shortcuts because Dreamweaver has a graphical interface called "Keyboard Shortcut Editor".
★Specific method: Just click "Edit Keyboard Shortcuts", and the dialog box will load and list the shortcut keys that can be changed, allowing you to change the shortcut keys to the settings you are accustomed to. To change a shortcut key, just use the drop-down menu of the Current Set and Command bar, find the command you want to change among the existing commands, and then select the current shortcut key, it will appear in the shortcut key list. in the list. In addition, if you want to add shortcut key settings, you can click "Plus", type the new shortcut representative key you want to use on the keyboard, and click "Change". At the same time, you can also select a shortcut key and click "Minus" to remove a shortcut key.
Tip 8: Reset the Site window column
★ Specific method: Just click "View File View Columns" from the "Site window" to view the size and appearance of the Site view column. Select a field name and use the up and down arrows to resize it, or uncheck Show field to hide the field. In addition, you can also add columns and create your own column names by clicking the "Plus" button. Alternatively, you can associate a column with a "Design Note" by selecting an existing "note" in the drop-down menu.
Tip 9: View the original code of the web page
★ Specific method: When you open "Reilly Code Reference" (Window Reference) to check properties or browser compatibility, the default window will display "Reference Settings" in small fonts value". 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 original code font size (small to medium and large). Choosing large fonts is less "abusive" to the eyes because you don't have to hold a magnifying glass to look at the screen when reading the original HTML code.
Tip 10: Add a Flash Button
In Tip 5, we introduced how to use 20 preset button types to create Flash buttons in Dreamweaver. This is a method that does not require installing any additional files or programs. There is another method below, which is to install "Fireworks buttons". This extension has the same effect as Tip 5.
★Specific method: Go to "Exchange for Dreamweaver" (Dreamweaver extension exchange center), enter the keyword search of "InstaGraphics Extensions for Dreamweaver", and then download this approximately 577K file. Switch to Dreamweaver, select "Commands Manage Extensions", and then select "File Install Extension" to start the installation. Once you restart "Dreamweaver", there will be six new and interesting button formats, 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".
Tip 11: Add the "Set as Favorites" function to the web page ★ Specific method: Search in "Exchange" and you can find the extended 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 restart Dreamweaver. This newly loaded expansion file will add a new feature to Dreamweaver. If you add this "Add to my collection" function to your web page, then when the user sees your website, he can easily add your website to his browser's "My Collection" with just one click. favorites" (or personal bookmarks). In addition, the most cool thing is that you can also customize the name of "My Favorites" and the small icon that will appear in front of the name of "My Favorites" (usually the small icon in front of "My Favorites" in IE is The default value of IE, if you have a small icon designed by yourself, it will be more dazzling). Note that this feature only supports browsers using IE 4.0 and higher. Just select the "Behavior" panel in the "Windows" menu, then go to the IE function drop-down menu and click on this function to easily activate this cool feature.
Tip 12: Super cool charts.
If you want to make a form, do you still have to spend time writing the original code of the web page verbatim? No need, there is already a ready-made one!
★Specific method: Go to Exchange and download the "Form Builder extension", There are ready-made tables that allow you to instantly copy tables that include: country, gender, marital status, age group, and other categories. Go to Exchange to download this small (only 11K) file, and then install it through the "Extension Manager" (Commands Manage Extensions, File Install Extension). Then just restart Dreamweaver, click "Insert FormBuilder", and you will find the extended function in (Insert FormBuilder). After clicking, a dialog box will appear, which will display all the applicable format menus, which is really convenient.