12 Dreamweaver little-known secrets

Source: Internet
Author: User
Tags continue new features dreamweaver
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.

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. are: 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 for), custom use the interface (enjoy the personalized use of experience) and the final addition to the Dreamweaver expansion program (load the extended advanced feature in the Web page).

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 be useful.

   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 that if the window is too large, there is no space; the window is too small to run out of the pull bar moving up and down. 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 used a lot of different frames and tables, page size is very difficult to automatically adjust the page. 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?

   ★What you do: Open the page with the buttons on the tool panel (Object palette) and convert to Layout view. At this point, 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 for managing files in a file format, such as pictures, styles, and so on when editing a Web site.

   ★The practice: When you define a new site (click Site New site), all types of objects are automatically added to the appropriate table box in the Asset panel. 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 website navigation color plate. Just start the "Assets panel" (First choose "Window" and then Point "Assets"), then click on the left little 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 bit, 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).

   Tip 3: Make a pop-up menu navigation system

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

   ★What to do: Start with 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 item and click "Plus" (add) button, To add the item. You can continue to set the details in the pop-up message box, such as setting the text and hyperlinks for the item, and of course adding submenus and rearranging the next level of settings. 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, Java script, 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 can make you animate without begging for help.

   ★What to do: Select the picture you want to modify in the standard window, and 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 in the "Fireworks" click 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 speed of movement, 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, making several different forms of buttons.

   ★Practice: Click the Insert Interactive Images Flash button to see the built-in buttons. In the dialog box can even use the mouse to point to the type of button you want to use, and then see how the effect 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 the file properties are displayed, if you extend the file properties list, you will see "play", and then click to preview the flashing effect of the button without opening the browser.

   Tip 6: Make mobile text

Adding mobile Text to a Web page is just as easy as adding the flash button we just introduced. Similarly, without installing Flash, the new features provided by Dreamweaver can be easily done. Web makers, which use HTML syntax to write Web pages and have no interactive media experience, can easily create compact flash-style streaming text. This new feature adds some browsing and visitor interactivity to the web without adding compatibility headaches.

★To do this: click Insert Interactive Images Flash text, and then set the parameter to one by one (for example, the text, glyph, font color, font size, and so on) that you want to change the effect. -->
   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 an image interface called "keyboard shortcut Editor."

   ★Specific approach: just click "Edit keyboard Shortcuts", the dialog box will be loaded and the column can change the list of shortcuts, so that you change the shortcut keys to their own custom use of the set value. To change the shortcut, simply use the current settings and command bar Drop-down menu, locate the command you want to change in the existing command, and then select the current shortcut, which will be listed in the current shortcut key. In addition, if you want to add shortcut settings, you can click "Plus", typing in the keyboard you want to use the new shortcut for the key, click "Change" can be selected. At the same time you can select a shortcut key, click the "Remove" (minus), you can remove a shortcut key.

   Tip 8: Reset the Site window column

   ★To do this: You can view the size and appearance of the Site view column by selecting "View File View Columns" from the "Site window". 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. In addition, you can also select the existing "note" in the Pull-down menu to associate the column with the "Design note".

   Tip 9: View the original code of the Web page

   ★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. However, 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'll explain how to use the 20 preset button types to make Flash buttons in Dreamweaver. This is a way of not having to install all the files or programs separately. Here's another way to install "Fireworks buttons," which has the same effect as tip 5.

   ★What to do: to "exchange for Dreamweaver" (Dreamweaver extended function Switching Center), enter the keyword search for "instagraphics Extensions for Dreamweaver", 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

★What you can do: Search in "Exchange" and you'll find the "Add to Favorites" extension. 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 able to customize the "my favorite" name, and "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. Just select the "Behavior" Panel in the "Windows System" menu, and then go to the IE function drop-down menu to select this feature, you can easily start this cool feature.

   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, there's already a ready-made one!

   ★What you can do: to Exchange to download "form Builder extension", there are ready-made forms that allow you to immediately copy forms that include: country, sex, marital status, age level, and other catalogues. 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, there will be a dialog box appears, will show all the Format menu can be applied, it is very convenient. --> -->

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.