Dreamweaver little-known secrets

Dreamweaver

　　I. Background analysis

For professional web-page makers who want to make complex Web pages in a visual environment, Dreamweaver has gradually emerged as a web-editing tool, making it the best choice for professionals to write Web pages. According to the Macromedia Company's investigation, Dreamweaver currently has accumulated more than 700,000 users, the share of the web editing tools in the crown, such as "Adobe golive" and "NetObjects Fusion" and other competitors are left behind. It is therefore generally estimated that the use of Dreamweaver will continue to increase.

In this overwhelming penetration, it is conceivable that Dreamweaver built-in functions can be said to be more and more rich, complete. In our presentation, there are new features that provide web makers with faster design, easier coding, and more integrated functionality. Without further ado, here's how to make good use of some of the features in Dreamweaver. The following technology has a total of 12, can be divided into four themes. respectively: The design page page (dreamweaver in the flexible page design function), with Macromedia other products with the use of Dreamweaver (making animation and pictures do not ask), Customize the use of the interface (enjoy personalized experience) and the last to join the Dreamweaver expansion program (in the Web page to load the extended advanced features).

　　Second, the design of the Web page tips

Whether you're writing a Web page verbatim and verbatim using HTML's original syntax, or using a standardized window for visual design, the following tips can come in handy.

　　Tip 1: Make the page page size more flexible
　　
Some Web developers say the technique described below is "liquid," where the technique is called a "stretch-stretching technique." This is a technique that adjusts the page size when the visitor's browser window is resized, so if the window is too large, there is no margin; the window is too small to run out of the moving bar. In fact, most simple Web pages will be the size of the browser window to adjust the size of the page, but if it is a Web page with many different frames and tables, the page size is difficult to automatically adjust. Web page designers typically design page pages using a mix of fixed-width frames, and GIF images as intervals, so that the page size is fixed and not run, whether it's Internet Explorer or Netscape Navigator. With Dreamweaver 4.0, it is easy to design a Web page that will automatically adjust flexibly. How do you do it?

★ Practice: Open the Web page with the buttons on the tool panel (Object palette) and convert to Layout view. You can see the bar of the text box, the box above each column has a small drop-down arrow, click the small arrow above the bar where you want to set the flex display, and then select "Set the bar to flex display" (Make Column Autostretch). (Set the width of the AutoFit column to one column) a wavy line appears above the box, not the number that originally represents the bar. Dreamweaver will automatically create a fixed layout of the space picture, this blank image is the top of the bar of the two long blank table, so that the layout will automatically be filled to complete the elastic layout settings. (The first time you add a blank picture will jump out of a dialog box to ask you if you want to use the built-in picture, for the effect, we recommend that you let Dreamweaver automatically produce a, or you do not use a blank picture to fill the layout.) ）

　　Tip 2: Create a personal palette

Dreamweaver new Assets Panel (property Control Panel) is a new tool that can manage files in a file format, such as pictures, styles, and so on when editing a Web site.

★ Specific approach: When you define a new site (click Site New site), all types of objects will automatically be added to the "Asset panel" in the appropriate table box. The newly added "Assets Panel" property Control Panel also has a color box that stores all the colors used in your site, including the color of the text, the color of the background, and the color of the hyperlinks. This is a user-tailored web site navigation color plate. Just start the "Assets panel" (First choose "Window" and then Point "Assets"), then point to the left of the small color scroll, you can see a variety of color options on your site. Of course you can pull these colors into certain selected text. Even when you choose a color, the screen will appear on the color of the 16 value of the color light concentration, and three primary color control code (RGB). If you want to shrink the palette toolbar a little, you can even add some colors to the palette's "My Favorites". You can do this by simply clicking on the selected color and clicking on a button called "Add To My Favorites" (bottom right button) in the window.

　　Tip 3: Make a pop-up menu navigation system

There are a lot of JavaScript syntax and techniques to be used to make pop-up menu navigation (pop-up menu navigation system), but if you have Dreamweaver, Fireworks Studio, Can be easily quickly and easily.

★ Practice: First in the "Fireworks" Start, select a picture, and then in the "Set pop-up menu" dialog box click "Insert pop-up Menu", you can enter the name of the item (items) and point "Plus" (add) button, To add the item. You can continue to set the details in the pop-up message box, such as the text and hyperlinks you want to use for the item, and, of course, add a submenu and rearrange the settings for the next level. When you are finished, click Next to continue setting various parameter values, such as colors, fonts, and so on. When the menu is complete, you can preview both the HTML syntax and the image. And then "Finish" (finished). When the mouse moved to the original picture, the menu system will appear in the Content list. Then, when you export the made file, Fireworks automatically produces all the HTML, JavaScript, and image files that Dreamweaver needs to use.

　　Tip 4: Get the picture moving.

If you have Dreamweaver and Fireworks Studio installed at the same time, the perfect combination of these two software will make you full of praise. Even if you are not a professional picture designer, in the design of the Web page also more or less want to modify some GIF pictures vivid. Dreamweaver allows you to make animations without begging for help.

★ Specific approach: Select the picture to be modified in the standard window, then click Edit in the property Inspector. If you install the Dreamweaver with "fireworks", "fireworks" is the Dreamweaver preset picture editor, then the picture will automatically load to "fireworks." (If you look closely, you'll notice that fireworks will appear with words and patterns like "Editing from Dreamweaver", indicating that you can edit the picture in Dreamweaver.) OK, now click on "Fireworks" to edit the picture, select "Modify Animate Animate Selection". Next completes the "Animate dialog box" The setting, selects the animation the frame number, the animation movement direction, the transparency and so on sets. You can also click the "Frames" tool to set the move speed and select the "Object" Panel to change the settings. To export a file, simply click the "Optimize" toolbar and select "Animated GIF" where the file type is. When you're done, Fireworks will automatically export the picture as an optimized setting, and automatically update the GIF image, and display the updated picture in the Dreamweaver. Click "File Preview in Browser" so that you can preview the cute picture you just made in the browser.

　　Tip 5: Let the button have a flashing effect

In Dreamweaver, there is no flashs, you can also make Flash button objects with flashing effect. Dreamweaver has several Flash button objects built into it and can produce several different forms of buttons.

★ Specific approach: Click "Insert Interactive Images Flash button" To see those built-in buttons. In the dialog box you can even use the mouse to point to the form of the button you want to use, and then see how it works in the browser. Use the mouse pointer to select the button you want to use, and then enter the parameters in order, such as the text on the button, font style, color, hyperlink, etc., or the name of the file itself. Press OK. Then there will be a SWF format file, and the file will be automatically imported into your Web page. By clicking on this file, you will see that the properties of the file are displayed in the property Inspector (attribute details). When you display the file properties, if you extend the file properties list, you will see play, and you can preview the flashing effect of the button without opening the browser after clicking.

　　Tip 6: Make mobile text

Adding mobile Text to a Web page is as easy as adding the flash button we just introduced. Similarly, without installing Flash, the new features provided with Dreamweaver can be easily done. Web pages with common HTML syntax, with no interactive media experience, can easily produce compact flash-style streaming text. This new feature adds a bit of interactivity to the Web page to visitors without adding compatibility headaches.

★ Practice: Click "Insert Interactive Images Flash text", and then set the parameter to one by one (for example, to change the effect of text, style, font color and font size, etc.).

　　Tip 7: Change keyboard shortcuts

Dreamweaver allows users to customize the use of the interface, this design is very flexible. For example, a user can change a menu by writing a program or by adding an object (object) by itself. Instead of being sophisticated, you can change the keyboard shortcuts because Dreamweaver has a graphical interface called "keyboard shortcut Editor."

★ Specific practices: As long as the click of "Edit Keyboard shortcuts", dialog box will be loaded and the column can change the list of shortcuts, so that you change the shortcut keys to their own habit of setting values. To change a shortcut, you can find the command that you want to change in an existing command by using the current set and command bar Drop-down menu, and then select the current shortcut key to appear in the list of shortcuts. In addition, if you want to add shortcut settings, you can click "Plus", typing the new shortcut on the keyboard you want to use, click "Change". You can also remove a shortcut by selecting a shortcut key and clicking Remove (minus).

　　Tip 8: Reset the Site window column

★ Practice: As long as you select "View File View Columns" from "Site Window", you can view the size and appearance of the Site view column from the word. Select a column name, use the up and down arrows to resize it, or uncheck the Display bar (show field) to hide the column. In addition, click the "Plus" button can also add a column, and create a column name. Alternatively, you can select an existing "note" from the Pull-down menu to associate the column with the design note.

　　Tip 9: View the original code of the Web page

★ Specific Practice: When you open the "Reilly Code Reference" (Window Reference) to check the properties or browser compatibility, the preset window will display the "reference set value" in a small font. But if you press the right button at the top right of the window (just below the close button), a row of Pull-down menus appears, where you can select the size of the original code font (small to medium font and large font). Choosing a large font comparison does not "abuse" your eyes, because you don't have to look at the screen with a magnifying glass when you look at the HTML original code.

　　tip 10: Add Flash button

In tip 5, we describe how to use the 20 preset button types to make Flash buttons in Dreamweaver. This is a way to not install any additional files or programs. Here's another way to install "Fireworks buttons," which has the same effect as tip 5.

★ Specific approach: to "exchange for Dreamweaver" (Dreamweaver expansion function Switching center), enter the "Instagraphics Extensions for Dreamweaver" keyword search, And then download this approximately 577K file. Convert to Dreamweaver, select "Commands Manage Extensions" and select "File Install Extension" to start the installation. Once the "Dreamweaver" is restarted, there are six novel and interesting button formats, including "Surfboard" and "Bulletbar", when you use the Insert Interactive Images Fireworks button command , you can create a cool button. You can also use "commands convert bullets to Images" and "commands convert Text to Images", both of which can automatically execute "Fireworks".

　　Tip 11: Add the "Set to My Favorites" feature on a Web page

★ Specific approach: Search in "Exchange", you can find the "Add to Favorites" expansion function. This small file accounts for 3K, download time will not wait too long, followed by the same steps, by "Extension Manager" Load (Commands Manage Extensions, File Install Extension). Then restart Dreamweaver, the new loaded extension file will add a feature to the Dreamweaver. If you add this "add my Collection" feature to your Web page, the user will be able to easily add your site to the "My Favorites" (or personal bookmark) that he uses in his browser when he sees your site. In addition, the most dazzling is also can customize the "my favorite" name, and the "my favorite" before the name will appear in the small diagram (general ie, "my favorite" in front of the small icon is the default of IE, if you have a small diagram of your own design, it is more dazzling). Note that this feature only supports browsers with IE 4.0 and later. You can easily start this cool feature by selecting the "Behavior" panel in the "Windows" menu, and then clicking the feature in the IE feature drop-down menu.

　　Tip 12: Cool Charts

If you want to make a form, do you want to take the time to write the original code verbatim? No need, already have ready-made!

★ Practice: To Exchange to download "form Builder extension", there are ready-made forms, you can immediately copy contains such as: Country, sex, marital status, age and other categories of tables. To Exchange to download this small (only 11K) file, and then install it by "Extension Manager" (Commands Manage Extensions, File Install Extension). Then, as soon as you restart Dreamweaver, click Insert Formbuilder, you will find expansion in (insert Formbuilder). After the click, a dialog box appears.