Dreamweaver Web making Super Tips 36

dreamweaver| Skills | Web page

　　1. With Dreamweaver 4.0 easy design will automatically adjust the Web page

The first thing you need to ensure is that your page content is formatted with a table, and then open the page you want to edit, press "Ctrl+f6" or "menu" View→tableview→layout? View transition to Layout view. You can see the width of the cell, and a small drop-down arrow next to the column width number, click the small arrow above the column that you want to flex, and then select "Set the Columns to Flex" (Make Column Autostretch). A wavy line appears above the column box, rather than a number that just represents the column width. When you're done, your page becomes a resilient page. In addition, you need to note that the page does not have large size pictures.

　　2. Use Dreamweaver 4.0 to make Flash button with flashing effect

Select Menu Insert→interactive? Images→flash? button to see which inline buttons are available. In the pop-up dialog box, you can choose the button style you want in the style list, and you can see how the style works in the Preview (Sample) window. After choosing good, in "button?" Text window to enter the text above the button, select the font in the Font window, type the text in the Size window, enter the target of the link in the Link window, select the way the link opens in the target window, select the button background color in "bgcolor", and in the " Save? As window to enter the saved file name. Once you've done this, press the "OK" button and you're done with a flash button. This button will also automatically insert your Web page, and then in the Dreamweaver edit window to select the button you just made, the property window will display the properties of the button, click the "Play" button, you can directly in the editing window preview the flashing effect of this button. Note that this feature of dreamweaver?4.0 does not support Chinese fonts.

　　3. Customizing keyboard shortcuts in Dreamweaver 4.0

Select Menu "Edit→keyboard?" Shortcuts ", the list of shortcuts that are currently enabled and can be changed is listed in the dialog box, where you can change the shortcut keys to your own custom. To change the shortcut, first select the command you want to change, select the current shortcut, and the shortcut will appear in the Shortcuts list, then enter the shortcut you want to use in the Press key window and click the Change button to complete. You can also use the "+", "-" button to add or remove the current shortcut keys.

　　4. Let DreamweaverMX4.0 and fireworks integrate

If you have Dreamweaver/fireworks installed on your computer, you can use the integrated Fireworks features provided by dreamweaver?4.0. With this feature you can modify your GIF image to make it more appealing and easy to animate. In the Dreamweaver edit window select the gif you want to modify, and then click the Edit button in the Picture Properties window, and the system will automatically start the fireworks software to edit this picture. Look carefully, you will find fireworks in the Picture editing window has appeared editing-from-dreamweaver such text and pattern, that is, this picture is for the Dreamweaver page for image editing. Now we choose the picture to edit in Fireworks, select the menu "Modify→animate→animate?" Selection ". Set the properties of the animation in the pop-up window: the number of frames selected, the direction in which the animation moves, transparency, and so on. Then, you can export the modified file. In this way, the Dreamweaver edit window will automatically update the file you just modified to make your page picture move.

　　5. Use the website to report the device skillfully

The dreamweaver?4.0 provides a web site-reporting device that can help you quickly find and fix bugs in numerous files on your site. Click the menu "Site→reports" to start the report, select the item you want to check, and then click the "Run" button to find out the general problems on your site. You can also write your own report to find out some of the special problems on the site (usually the text is missing or the document is not named).

　　6. Rapid Recovery Multiple operations

When making a page, we may need to constantly modify the page, sometimes to restore the past operation, we can use the "Edit" menu of "Undo" command, but this command can only be restored at a time, if we need to restore multiple operations, it will continue to "undo", it is too annoying. The dreamweaver?4.0 provides a History window that allows us to easily recover multiple operations. Choose "History" on the Windows menu to open this History window. In this window you keep every operation, using the slide pointer on the left side of the window, you can keep resuming, and you can undo every operation, including the one that has been filed. You can also save this history record and share it.

　　7. Hide Floating Panel

Open Dreamweaver, give people the first impression is a pile of floating panels, often make you dazzling, although it can be dragged open, but after all occupy a very limited screen, if it closed, and then to use it to open. In fact, you just click the F4 key, all the floating panels are missing, and then press F4 they all reappear on the screen.

　　8. Quick Preview Page

Beginner Dreamweaver, often can not find the preview menu, have to start another IE browser to preview the actual effect of the page. In fact, Dreamweaver's preview menu is placed under the File menu, to preview the page being edited, press F12 key on it, convenient! You can also set up a preview in a different browser, select the Edit Browser list in the preview in Browser under the File menu to select a different browser to preview. To test the adaptability of your Web pages to different browsers.

　　9. Display line numbers and wrapping in the HTML check window

Although Dreamweaver's behaviors is a huge set of JavaScript applet, many JavaScript programs that implement special web effects do not have to do programming, but sometimes it is necessary to write a small program, the display of the line number is particularly important, Especially in the process of error, often there is a hint in the "XX line there are errors", if a line to go number line number is not only too tired and easy to make mistakes, in FrontPage is always a number of wrong lines and worry. Handy in Dreamweaver, as long as you select the line Numbers check box in the HTML Source Viewer window, the line number is automatically displayed in the Source Code Viewer window for each HTML statement, at a glance. Also sometimes a line of code is longer, as long as the Warp check box is selected in the HTML Source Inspector window, the automatic line wrapping feature of the window is activated, and the long code automatically wraps back from the edge of the window.

　　10. How to get the color of the hexadecimal code

When you design a Web page, you sometimes use the 16 color code, used to be a headache for this, in Dreamweaver as long as the property panel in the "BG" side of the small box on the lower right corner of the small triangle, in the pop-up color board, the mouse pointed to where, immediately can display the corresponding color of the 16 code, really convenient.

11. Making background music

It's very easy to insert background music into Dreamweaver, and here are two ways to choose from.

(1) Insert an empty layer where the page is inconspicuous, and put a Activx object in the layer, double-click the object, select a MIDI music file in the Open dialog box, and then set its visibility to "Hidden" in the Layer object Properties panel, save the changes and press F12 to preview the page. Listen to the sound of music.

(2) Another method is to use the Dreamweaver "behaviors" behavior editor, click the "+" button, select the "Play Sound" option, in the pop-up dialog box to select a music file. Try it yourself!

　　12. Let the background picture not scroll

Unlike FrontPage, the background image that is inserted in Dreamweaver scrolls with the text. Sometimes we need to make a fixed background map, how to do? First define a background image, press "F10" to open the HTML source file, find the statement that defines the background picture, such as Background=″images/background. Jpg″, empty a lattice behind it and add a sentence of Bgproperties=″fixed″. Preview, is not a little sense of accomplishment.

　13. Define text that is unchanged in size

Why other people on the page of the text so beautiful, no matter how you press the size of the browser font button, their font size will not be changed. In fact, they use the Web page "CSS" style sheet technology, in the Dreamweaver to achieve this function is very simple. Start the stylesheet editor by pressing "F7" or by selecting the Style Sheet option on the Window menu. Right-click in the window to select New, enter the name of the style sheet you want to define in the pop-up dialog box, press OK, and then select the first item "type" in the list. and give specific text attributes to define parameters (generally speaking, the size of the text in the screen of 800x600 select 10.5 more appropriate), press "OK", the definition of the style sheet appears. Select the text in the page Editing window, and click the new style sheet name to see the changes that have occurred in the selected text. Preview, try the defined text font size will not change with the browser's choice of font size.

　14. Insert Flash Animation

Macromedia Company's Flash animation because of its interactivity, transmission speed and other characteristics, has gradually become a Web page production of a new weapon, if your Web page can be inserted into a flash animation, then it will make your work a lot of color. It's easy to insert a Flash SWF format animation in Dreamweaver, click the Flash logo on the object toolbar, or flash under Media, to open the dialog box for the SWF animation file, and select the file to set the playback parameters in its properties panel. That's it.

　15. Let the table to the page to leave White

When entering text on a new Dreamweaver page, the default format is indomitable and very unattractive. To avoid this shortcoming is actually very simple, as long as we use the table tools on the line. Insert a center-aligned table on a new page, and in order to make the table easy to control, it's best to set the odd sequence and not the value too large. The text that is entered in the cell is limited to a region that can adjust its width freely.

　　16. Change the status bar prompt text

Typically, when a browser loads a page, it displays the address name of the page in its status bar, very inflexible. Have you ever thought about adding a little personality to the browser's status bar? If so, please follow the steps below to customize your favorite text! First open the "Behaviors" Behavior editing window, click the "+" button, select the "Text of Status Bar" option under Set text set, and then enter your own text in the box, such as "Welcome to my home page", and click OK.

　17. Consolidated Text Code Editor

The biggest inconvenience of visualizing web page editing software is the difficulty of editing the source code, let alone JavaScript, but Dreamweaver will make it very easy for you to handle the code. The main new features of this built-in text editor are: Automatic indentation (you can select multiple rows at a time),? You can also detect symbols, if you write the code forgot a "", it will give a hint. The Drop-down menu in the toolbar lists all the custom JavaScript functions in the current page, allowing you to jump freely in the original code of the Web page, which allows professionals to easily handle JavaScript functions, typing JavaScript code into the text editor, The system will be displayed in a different color.

　　18. Enter multiple spaces in the Dreamweaver

We usually enter the space is half-width characters, in the Dreamweaver can only enter one, to enter more than one space to enter a full space. The method of entering Full-width spaces is to open the Chinese input method and press Shift+space to switch to the Full-width state. The space you entered is a full-width space.

　　19. One of the bugs to resolve Dreamweaver

The Events for Drop-down menu item cannot be opened in the Behavior panel (Behavior Inspector) in Dreamweaver 3.0. As a result, a lot of special effects are in the form of useless, can not be produced. In fact, this should be counted Dreamweaver 3.0 and Chinese Windows98 incompatible with a place, in English Windows98 there is no this problem. In fact, the menu can still be opened, but it is not the correct display. After the Drop-down menu is selected, we can use the up and down keys to select the browser we want to use.

　　20. Make Web page with Dreamweaver 3.0 template, set behavior (Behavior)

The use of templates (Template) to make Miao-resistant pages can not add behavior. This is because the new behavior involves inserting JavaScript into the head section of the HTML file, and after using template, the head of the HTML file is "blocked". If you want to apply behavior to a Web page generated by a template, you need to define good behavior in the template beforehand and define it as an editable region of the template. You can then change the behavior in the Web page. However, this is limited to the specific contents of the triggering events (events) and actions (actions) of the change behavior, not the type of action.

21. Apply Behavior to Text (Behavior), make dynamic text effects

Ordinary text in Dreamweaver is in characters and cannot be an object, that is, some very useful JavaScript events cannot be assigned to text. Because text does not have a specific "tag" like a picture or other control, the text misses a lot of effects. In order to add special effects to text, only the text as a hyperlink to deal with. So that the text becomes the object, you can exert the behavior. But this brings some unwanted hyperlink properties, such as underscores, and color changes such as hover, visited, and so on. To simply add special effects to text, you can make the text you want to create a hyperlink, and then add the behavior on top of it, and finally we turn the hyperlink into ordinary text. The specific steps are as follows:

Select the text you want to edit, and fill in a few characters in the Link Target box. Select this link, click the window (Windows) → behavior (behaviors), pop-up behavior panel. Press "+" to add the behavior you want, such as play sound. Open the Dreamweaver Hypertext Editor, find this link, and replace it with the. Finally delete "href= ...". Save this page. Press F12 to preview. The results are not bad!

　22. Position the individual elements in the page precisely

There are two ways to pinpoint the location of each element in a Web page: Use a table or layer. Using tables is a common practice now, by creating a table in a Web page that says the table should have a border width of 0. Then put the elements in each table cell according to your requirements. Carefully adjusts the size of the table cell and the position of the table border, where the elements in the table cell move. This allows you to pinpoint the location of each element of the page in a more precise way. The advantage of using tables is universal, and almost every version of the browser can be used to support tables. Its disadvantage is that the use of more cumbersome, need careful adjustment, and positioning is not very accurate. Layers can be placed at will in a Web page, so we can use layers for precise positioning. The way to do this is to insert a layer in the Web page and place the element you want to position in the layer, and then we can put the layer where we want it. In addition, you can also use the ruler and grid for accurate positioning. Because the layers are only supported in the latest browsers, we can turn the layers into tables in order to be compatible with the old browsers. The method is to select "Modify (Modify) → layout mode (Layout mode) → Convert the layer into a table (convert layers to table)". Note that the layers cannot overlap, and we can avoid overlapping layers by selecting view → prevent layer interleaving (prevent layer overlaps) before inserting the layer. In general, the converted page may have some changes, and we need to manually adjust. Finally, it's important to note that when you make a transition between tables and layers, it's best not to use layers and tables on one page at a time, which might make your page a mess.

　　23. Change the viewer's mouse shape

This is done by editing the style sheet. Choose text → custom style (CSS style) → edit style sheet (edit style Sheet), pop the Edit style sheet window, and select New. Then select "Create a custom style (make custom styles)", name the stylesheet, and click OK. Edit the style sheet, select the extension (extension), and in the right cursor item (Cursor), select the pointer effect you want to appear.

　24. Remove the underline below the hyperlink text

This effect is achieved by editing the style sheet. The method is: "Click text → custom style (CSS style) → edit style sheet (edit style Sheet)", the Edit Style sheet window appears, and select New. Then select the redefine HTML tag (Redefine HTML tag) and select a in the tag menu below. Edit the style sheet, select the type, and decoration (none) on the right side of the decoration (no).

25. Create an image to follow the page

This effect is achieved through JavaScript. In general, the completion of such an effect requires a certain degree of programming capabilities, but now we can through the Dreamweaver Plug-ins easily implemented. Plug-in installation method: After decompression, copy to the folder under the Dreamweaver configuration\objects within a new folder inside. After restarting the Dreamweaver, we can find the newly installed plugin in the object panel. Click on the plugin icon, in the pop-up dialog box to fill in the image of the address and the location of the image display can be.

26. Create a dynamic menu of changes after the mouse is moved up

The so-called dynamic menu is actually two pictures, one is not put the mouse on the above shown, and the other is the mouse moved up to show. We can use the swap image in the behavior provided by Dreamweaver to achieve this effect. Insert a picture first, click it with your mouse, and enter the page you want to connect to in the connection bar of the property surface. Then open the behavior panel to add, click the "+" number, select Swap image. Then there is a window, you choose the mouse to move up after the picture displayed, select the second picture, click "OK". Well, the effect is complete, how simple.

　　27. Create an effect similar to the Pull-down menu with Dreamweaver

Creating an effect similar to a Drop-down menu requires a layer of hidden and display features. The way to do this is to insert a single, multiple-column table on the page as your menu bar. The number of columns in the table is determined by the number of menu options. Insert a layer, enter the contents of the first Drop-down menu in the layer, and move the layer below the first column in the table. Similarly, the other menu items are also done as above, insert the appropriate layer. Change the display properties (VIS) of all layers to hidden (Hidden).

Select the first cell in the table, click the window (Windows) → behavior (behaviors), and eject the behavior panel. Press "+" to add the behavior show-hide layers, and change the first layer (Layer1) property to display (show), and the other layer's properties to hidden (hide). Then edit the behavior in the behavior panel to change its triggering event (events) to onmouseover. This way, when the mouse moves over the first table cell, the first Drop-down menu is displayed. Then add a behavior show-hide layers and change the properties of all layers to hidden. Then edit the behavior in the behavior panel to change its triggering event (events) to onmouseout. This allows the first Drop-down menu to be hidden when the mouse is moved away from the first table cell. Repeat for the other menu items. But note that when setting "menu two", the second layer is displayed, the other layers are hidden; When "menu three" is set, the third layer is displayed, the other layers are hidden; OK, do it, press F12 to see it.

　　28. Easy to make download files

With Dreamweaver is actually very simple, to let the browser to download the file name, and then drag the mouse to select the text, in the text of the property panel "Link" in the property input box to write the file name on the line. Note: If the downloaded file is not in the same directory as the Web page, the file name must contain a relative path or the file will not be found when downloading.

　29. Use Dreamweaver bookmark to make jump link

Using Dreamweaver's bookmarks we can implement this feature. To move the cursor to where you want to jump, select Insert → bookmark (name Anchor) in the menu and enter a name for the bookmark. Next, in the link to the link you want to call the target box to fill in the "#书签名称", such a page of the jump link is done. Here, if we fill in the name of the page before the bookmark name, we jump to the bookmark on the other page. For example, we fill in "Index.htm#top" at Link, and when the viewer clicks the link, it jumps to the top bookmark in the index page.

　　30. Remove the space between the picture and the form contact place

To make the picture and form contact place without leaving a gap, setting the outer border (border) to 0 on the Table property panel will not work, and you need to set the two properties of the cell to 0 (that is, cellspacing= "0" and cellpadding= "0") on the table's property panel.

　　31. Use Tracingimage to help locate the elements in a Web page

Tracingimage is a very effective feature of Dreamweaver, which allows users to use the original pattern design as a supporting background in the Web page. This way, users can easily position text, images, tables, layers, and other page elements in the page. The specific use of tracingimage is this: first use a variety of graphics software to make an imaginary page layout pattern, and then save this image as a network image format (including GIF, JPG, JPEG and PNG). Open the page you edited with Dreamweaver, right-click in the blank area of the page, select Page Properties ..., and then in the tracing image entry in the pop-up dialog box, enter the location of the page layout pattern you just created. Then in the image Transparen set the tracingimage transparency, OK. This allows you to easily position the various page elements in the current Web page. Web pages using tracingimage do not display background patterns when editing with Dreamweaver, but when browsing using browsers, the opposite is true, and Tracingimage is gone, and what you see is edited pages (which, of course, can display background patterns).

　　32. About "Convert table widths to Pixels" and "convert table widths to Percent"

Convert table widths to Pixels and convert table widths to Percent are important features of the Dreamweaver two set table widths. When you open a page with a table, 〈table〉 the label in the center of the status bar, and you can see the two buttons in the Table Properties tool panel that appears later. As the name suggests, "Convert table widths to Pixels" means that the width of all cells in the table is expressed in pixels, whereas convert table widths to Percent is the width of all cells in the table as a percentage. Think about their role, if the width of a table is all in pixels, but when the Browse window is magnified, the table does not enlarge the width of the cell. Using the Convert table widths to Percent allows you to create a 100%-wide table at the 640x480 resolution to maintain a width of 100% at a higher resolution. Therefore, the flexible usage of these two features can make the Web page layout more than twice.

　33. Call style without causing the Web page's original code to be cluttered

There are many ways to call style, you can right-click to select Custon style to invoke the style specification, or right-click on the list of elements in the status bar to invoke style. Although different methods achieve the same effect, the resulting HTML code is completely different. For example, using the Custon style to invoke the style specification, in the Web page code to generate a 〈span〉 tag, so that more than one label will make the file is very bloated and affect the browser parsing speed, so I recommend that the status bar to use the list of elements to invoke style. There is also a trick, if you want to use a style to define all the text in a table cell, just call the style in the 〈td〉 tab, without having to define the 〈p〉 label. Note that this method does not apply to 〈table〉 tags, because the text format defined in the 〈table〉 tag is ignored by Netscape.

　　34. Use custom window function to test the effect of Web page at different resolution

No one wants to see their hard-earned Web page at different resolution, so the test page in different resolution of the browsing effect is a very important step in the production of Web pages. We can in the Dreamweaver interface in the middle of the status bar, select the required resolution to adjust the window size, so as to achieve at different resolutions to test the effect of the Web page.

　　35. Do not use the third party FTP software when uploading the website

Dreamweaver integrated into the FTP function, and for the site to upload the optimization. We can make a simple comparison, when you use the General FTP software upload site, is not the local computer on the site directory in the server to create a new directory, and then file upload. This is true, but because the site directory in the local machine is not every file is called by the Web page (such as in the building of the backup files left behind), so the heavy workload of filtering files only users know. But the use of Dreamweaver upload Web page can be much more convenient, because the FTP function behind the scenes for users to do a lot of necessary work, so users will be the site map of the relevant HTML file upload, Dreamweaver automatically uploads all other local files associated with this HTML file (such as images, zip files, flash files, and even various real files). The specific way to use the FTP feature in Dreamweaver is to edit the site you have defined and select Web Server Info in the site Definition for ... panel. If the Web page is uploaded via FTP, set "Server Access" as FTP, add the FTP server address to FTP host, add a remote login directory to the host directory, add the username to login, and fill in the password. After the above settings, you can press the Connect button in the site panel, when Dreamweaver successfully connected to the server, the Connect button will automatically become disconnect, and a small green light on the side. The next thing to do is to upload the HTML file on the right click, select "Put" can be. When this HTML file is uploaded successfully, the put depanding file is displayed in the status bar, stating that Dreamweaver is uploading other local files that are invoked by this HTML file. Not only that, Dreamweaver can also directly download the file on the server to modify, the method, as long as the test put next to the Get button to understand.

　36. Realize the effect of underlining when pointing to links with the mouse

Some of the pages of the link, the original did not underline, you put the mouse point to the link, it will appear underlined, the mouse moved down the line and then there is no. This effect can be implemented with cascading style sheets (CSS), in Dreamweaver editing cascading style sheets without writing code, the following methods:

(1) Click on the cascading Style sheet button in the Quick Launch bar (which is to put the mouse to display "Show CSS Styles" button), in the pop-up CSS styles panel double-click (none);

(2) At this point, you can see the pop-up edit Style Sheet panel, press the New button on the panel;

(3) then click on the new Style panel pop-up redefine HTML tag (redefine the HTML tag) and then select "A" (hyperlink tag) in the tag to press the OK button, (4) You can see the pop-up style dehinition for a dialog box , in this dialog box, you can set many properties of a hyperlink, you can set it according to your will, but we are here to remove the annoying underline, so we select "None" in the decoration attribute, so we remove the underline, and then we choose the color: #339966. Press the OK button to return to the edit Style Sheet panel;

(5) Press the New button on the edit Style Sheet panel;

(6) Click the Use CSS Selector on the new Style panel that pops up, and then select "A:hover" in the Selector selection box on the panel (define the properties of the link when the mouse is over the hyperlink), press OK button;

(7) In the pop-up style dehinition for a:hover dialog box, we select "Underline" in the decoration attribute so that the underscore is added; then we choose the color: #FF3300. Press the OK button to return to the edit Style Sheet panel;

(8) Press the Don button on the edit Style Sheet panel so that all settings end.