Looking for Dreamweaver little-known secrets

Source: Internet
Author: User
Tags continue insert interface modify new features 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 "adobegolive" 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. Typically, web designers 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, either with InternetExplorer or Netscape Navigator. Dreamweaver4.0 can be easily designed to automatically adjust the Web page. How do you do it?

What you do: Open the page with the buttons on the tool panel (ObjectPalette) and convert to Format view (Layoutview). 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 that you want to set the flex display, and then select "Set the bar to flex display" (Makecolumn 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 "Assetspanel" (Property Control Panel) is a new tool that allows you to 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 newsite), all types of objects are automatically added to the appropriate table box in the Asset panel. The newly added "Assetspanel" 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 "Assetspanel" (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, 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 the pop-up menu navigation system (pop-up menu Navigationsystem), but if you have Dreamweaver, Fireworks Studio, Can be easily quickly and easily.

First in the "Fireworks" Start, select a picture, and then in the "setpop-up Menu" dialog box click "Insert pop-upmenu", 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 Fireworksstudio installed at the same time, the perfect mix 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.

What to do: Select the picture you want to modify in the standard window, and then click Edit in the Propertyinspector. 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 carefully, you'll notice that fireworks will appear with words and patterns like "Editingfrom 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 DialogBox" 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 inbrowser" 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.

Practice: Click "Insertinteractive Images Flashbutton" 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 good file, you will see the properties of the file displayed in the "Propertyinspector" (attribute detail). 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 "insertinteractive Images Flash text", and then set the parameter to one by one (for example, to change the effect of the 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 "Keyboardshortcut Editor".

Practice: As long as click "Edit keyboardshortcuts", dialog box will load and column can change the list of shortcuts, so that you change the shortcut keys to their own habits used in the set value. To change the shortcut, just use the current settings (currentset) and command bar Drop-down menu, locate the command you want to change in the existing command, and then select the current shortcut to appear in the list of shortcut keys. 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 from "Sitewindow" select "View File view Columns", you can view the Web site (siteview) column size and how it appears. Select the name of a column, use the up and down arrows to resize it, or uncheck the Display bar (Showfield) 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 "Designnote".

Tip 9: View the original code of the Web page

The practice: When you open "Reilly codereference" (windowreference) to check the properties or browser compatibility, the preset window will display the "Reference setting 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 "fireworksbuttons", which has the same effect as tip 5.

What to do: to "Exchange Fordreamweaver" (Dreamweaver extended function Switching Center), enter the keyword search for "instagraphics Extensions fordreamweaver", And then download this approximately 577K file. Switch to Dreamweaver, select "Commands manageextensions" 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 "Insertinteractive Images Fireworks button" command , you can create a cool button. You can also use "commands Convertbullets 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 "addto Favorites" extension. This small file accounts for 3K, download time will not wait too long, followed by the same steps, by "Extension Manager" load (commandsmanage 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!

The practice: to Exchange to download "Formbuilderextension", there are ready-made forms, you can immediately copy include: Country, sex, marital status, age level and other categories of tables. Download this small (11K) file to Exchange and install it by "Extensionmanager" (Commands Manage Extensions, File Install Extension). Then just reboot the Dreamweaver and click Insert formbuilder to find the extension in (Insertformbuilder). 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.