The first six strokes of Dreamweaver skills

Source: Internet
Author: User
Tags add object continue insert new features version window dreamweaver
dreamweaver| skills in the present situation, the Dreamweaver function can be said to be more and more, more and more rich, complete. Here I would like to introduce you to the 4.0 version of some of the application tips.

1. Make page page more flexible

Some Web developers say the following techniques are liquid, and I call this technique a stretchy (elastic extension technique) here. This is a trick, you can change the size of the visitor's browser window to adjust the page size, so if the window is too large there will be no space, the window too small edge will not run up and down 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 the page used a lot of different boxes and tables, page size is difficult to automatically adjust the page. Typically, web designers design page pages with a mix of fixed bar widths and GIF files, so that the page size will be fixed and not run, whether it's Internet Explorer or use. With Dreamweaver 4.0, it is easy to design a Web page that will automatically adjust flexibly. How do you do it?

Open the page with a button on the tool surface (Object palette) and convert to format view (Layout view). You can see the column width of the text box, and a small drop-down arrow in the middle of each column, select the small arrow above the column that you want to flex the display on, and then select "Set the Columns to Flex" (Make Column Autostretch). (set to automatically adjust the column width to one column) a wavy line appears above the column box, rather than a number that originally represented a column width. Dreamweaver will automatically create a fixed layout of the space map file, the blank image file is the top of the column of two long blank form, so that the layout will automatically be filled, will complete the flexible layout settings. (The first time you add a blank map file will jump out of a dialog box to ask you if you want to use the built-in map, for the effect, I suggest you let Dreamweaver automatically produce a, or you do not use a blank map file to fill the layout.) )

2. Create personalized Palette

Dreamweaver 4.0 New Assets Panel (property Control Panel) is a new tool that can be used to manage files based on file patterns, such as pictures, templates, etc. when you are editing a Web site, when you define a new platform (select Site New Site, all types of components are automatically added to the appropriate table box in the Asset panel. This addition to the new Assets Panel Property Control Palette 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 links. This is a user-tailored web site-oriented color plate. Just Activate Assets panel (select window First Choose Assets), and then choose the left little color scroll bar, 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 image will appear on the color of the hexadecimal value of the color shading, and three-color corresponding code (RGB). If you want to shrink the palette toolbar a little, you can even add some colors to the palette's favorites. All you have to do is reverse the selected color, select a window called Add to My Favorites button (bottom right button).

3. Make pop-up menu navigation system

The original pop-up menu navigation system (pop-up menu navigation systems) is designed to use some JavaScript grammar techniques, but if you have Dreamweaver/fireworks Studio, you can quickly do it easily. First start in Fireworks, select a picture, and then select Insert in the dialog box of Set pop-up menu Pop-up Menu, you can enter the item name and select the Plus button to add the item. You can continue to make a fine setting in the pop-up message box, such as setting the text and links you want to use for the item, and, of course, adding a submenu and rearranging the settings for the next level. When you are done, select Next and continue to set preference values such as colors, fonts, and so on. When the menu is complete, you can preview the HTML syntax and preview the image. Then choose Finish (Finish). When the mouse moved to the original pattern, the menu system will appear in the list of contents. When the file is then remitted, Fireworks automatically produces all the HTML, JavaScript, and video files that Dreamweaver needs to use.

4. Let the map Move!

If you have Dreamweaver/fireworks Studio installed at the same time, the perfect mix of these two products will make you full of praise. Even if you are not a professional graphic designer, in the design of the Web page also more or less want to modify some GIF image files vivid. Dreamweaver can make you make animation do not beg for help! Select the picture you want to modify in the standard window, and then select the Edit button in the property Inspector. If you install a Dreamweaver with fireworks, fireworks is the Dreamweaver preset picture editor, and the picture is automatically loaded into fireworks. (If you look carefully, you will find that Fireworks will appear in the text and patterns Editing from Dreamweaver, indicating that you can be edited by the Dreamweaver.) OK, now in Fireworks select the picture you want to edit, select Modify Animate Animate Selection. Next completes the Animate dialog box The setting, chooses the animation the frame number, the animation movement direction, the transparency and so on sets. You can also choose the Frames toolbar to set the moving speed and select the Object version to change the setting. To export the file, simply select the Optimize toolbar and select animated GIF where the file type is. When you're done, Fireworks will automatically remit the picture to an optimized setting, automatically updating the GIF file, and will show the updated image in the Dreamweaver. Select File Preview in Browser, so you can preview the cute file you just made in the browser!

5. Let the button have a flashing effect

In Dreamweaver, there is no flash program, you can also make Flash button objects with flashing effects. The 4.0 version has several Flash button objects, which can be used to make several different forms of buttons. Select Insert Interactive Images The Flash button will see what built-in buttons are available. 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 cursor to select the form of the button to use, and then enter the parameters, such as the button on the text, font style, color, link, etc., or custom file name. Press OK. Then a SWF file will be generated and the file will be automatically placed in your Web page. Click on this good file, you will see the property Inspector (attribute details) will show the properties of the file. When the file attributes show up, if extended file attributes list, will appear play (playback) button, after the selection can not open the browser to pre-view button flashing effect.

6. Making Mobile Text

Adding mobile Text to a Web page is as easy as adding the Flash button I just introduced. In the same way, without installing Flash, the new features provided with Dreamweaver 4.0 can be easily done. Web page makers with HTML syntax and no interactive media experience can easily create compact Flash-style streaming text. According to Macromedia, 97% of Web users can watch Web pages with Flash effects, so this new feature can add a bit of interactivity to the Web page without adding compatibility headaches. Select Insert Interactive Images Flash text, and then fill in the preferences one by one (for example, text, font style, typeface color, font size, and so on) that you want to change the effect.

Turn from: Dynamic Network production guide www.knowsky.com

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.