Shulou(Shulou.com)06/02 Report--

This article mainly introduces the use of dreamweaver tips, the article is very detailed, has a certain reference value, interested friends must read it!

48 Super practical skills in DW

1. Easily design web pages with automatic elastic adjustment with Dreamweaver 4. 0

The first thing you need to make sure is that the content of your page is in a tabular format, then open the page you want to edit and press "Ctrl+F6" or menu "View → TableView → Layout? View" to change to layout view. At this time, you can see the column width of the cell, and there is a small drop-down arrow next to the column width number. Click the small arrow above the column you want to set elastic display, and then select "set column to flexible display" (Make Column Autostretch). A wavy line appears above the column box instead of the number that just indicated the width of the column. When you're done, your page becomes a flexible page. In addition, you need to be careful not to have oversized pictures on the page.

* * *

* * *

two。 Using Dreamweaver 4.0to make Flash button with flashing effect

Select the menu Insert → Interactive?Images → Flash?Button to see which embedded buttons are available. In the pop-up dialog box, you can select the button style you want in the "Style" list, and you can see how it works in the Sample window. After selecting, enter the text on the button in the "Button?Text" window, select the font in the "Font" window, enter the size of 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 background color of the button in the "BgColor" window, and enter the saved file name in the "Save?As" window. After you have done this, press the "OK" button and you have finished a Flash button. This button will also be automatically inserted into your web page, and then select the button you just made in the Dreamweaver editing window, and the properties window will show the properties of this button. Click the "Play" button above, and you can preview the flashing effect of this button directly in the editing window. It should be noted that this feature of Dreamweaver?4.0 does not support Chinese fonts.

* * *

* * *

3. Customize keyboard shortcuts in Dreamweaver 4. 0

Select the menu "Edit → Keyboard?Shortcuts", and the dialog box will show a list of shortcuts that are currently enabled and can be changed, where you can change the shortcuts to your own habits. If you want to change the shortcut key, first select the command you want to change, then select the current shortcut key, the shortcut key will appear in the "Shortcuts" list, and then enter the shortcut key you want to use in the "Press Key" window, and then click the "Change" button to change. You can also use the "+" and "-" buttons to add or delete current shortcuts.

* * *

* * *

4. Integrate Dreamweaver?4.0 and Fireworks

If you have Dreamweaver/Fireworks installed on your computer at the same time, then you can use the integrated Fireworks function provided by Dreamweaver?4.0. With this feature, you can modify your GIF images to be more moving and easily animate. Select the GIF image you want to modify in the Dreamweaver editing window, then click the "Edit" button in the picture properties window, and the system will automatically start the Fireworks software to edit the image. If you look closely, you will find that words and patterns like Editing?From?Dreamweaver have appeared in Fireworks's image editing window, which means that the picture is edited for the Dreamweaver page. Now let's select the picture to edit in Fireworks and select the menu "Modify → Animate → Animate?Selection". Set the animation properties in the pop-up window: the number of frames of the selected animation, the direction in which the animation moves, transparency, and so on. Then export the modified file. In this way, the modified file will be automatically updated in the Dreamweaver editing window to make the picture on your page move.

* * *

* * *

5. Skillful use of website Reporter

A website reporter is provided in Dreamweaver?4.0, which can help you quickly find and fix errors in many files on your site. Click the menu "Site → Reports" to launch the reporter, select the items 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 special problems on the site (usually some text is missing or the document is not named).

* * *

* * *

6. Quickly resume multiple operations

When making a page, we may need to constantly modify the page, and sometimes we have to restore the past operation. We can use the "Undo" command in the "Edit" menu, but this command can only be restored once at a time. If we need to restore the operation many times, we have to keep "Undo", which is too annoying. A History window is provided in Dreamweaver?4.0, which allows us to easily resume multiple operations. Choose "History" from the "Windows" menu to open this history window. Keep every operation in this window, use the sliding pointer on the left side of the window, you can constantly recover, and you can undo every operation, including those that have been saved. And this historical record can be saved and shared.

* * *

* * *

7. Hide floating panel

Open Dreamweaver, the first impression is a bunch of floating panels, often dazzling you, although it can be dragged away, but after all occupies a very limited screen, if you turn it off, you have to open it later when you use it. In fact, you just press the F4 button, all the floating panels are gone, and then press F4 and they all reappear on the screen.

* * *

* * *

8. Quick preview of the web page

Beginners to Dreamweaver, often can not find the preview menu, have to launch another IE browser to preview the actual effect of the web page. In fact, the preview menu of Dreamweaver is put under the File menu. To preview the web page you are editing, just press F12, which is very convenient. It can also be set to preview in different browsers. Select Edit Browser List in Preview in Browser under the File menu and you can select different browsers for preview. To test the adaptability of your web page to different browsers.

* * *

* * *

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

Although Dreamweaver's Behaviors is a javascript Mini Program giant, many javascript programs to achieve special web page effects do not need to be hands-on programming, but sometimes need to write a little bit of Mini Program, show the program line number is particularly necessary, especially when the program error occurs, there is often a prompt in the "XX line error", if a line to count line numbers is not only too tired but also easy to count wrong, in FrontPage always worry about the wrong line number. It is convenient in Dreamweaver, as long as you select the "Line Numbers" check box in the HTML source code viewer window, the line number is automatically displayed for each HTML statement in the source code viewer window, which is clear at a glance. Similarly, sometimes a line of code is too long, as long as the "Warp" check box is selected in the HTML source code viewer window, the automatic line wrapping feature of the window will be activated, and the long code will automatically wrap back from the edge of the window.

* * *

* * *

10. How to get the hexadecimal code of color

In the design of web pages, sometimes to use the hexadecimal color code, used to often have a headache, in Dreamweaver as long as the properties panel on the "bg" side of the small box in the lower right corner of the small triangle, in the pop-up color board, where the mouse points to, can immediately show the corresponding color hexadecimal code, really convenient.

* * *

* * *

11. Make background music

It is very easy to insert background music into Dreamweaver. Here are two ways to choose from.

(1) insert an empty layer in the inconspicuous part of the page, and put an 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. After saving changes, press F12 to preview the page to listen to whether there is music.

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

* * *

* * *

twelve。 Keep the background image from scrolling

Unlike FrontPage, the background image inserted in Dreamweaver scrolls with the text. Sometimes we need to make a fixed background picture, what should we do? First define a background image, press "F10" to open the HTML source file, find the statement that defines the background image, such as background= "images/background.JPG", and add a bgproperties= "fixed" to the space behind it. Preview it and see if it has a little sense of achievement.

* * *

* * *

13. Define text of the same size

Why the text on other people's web pages is so beautiful, no matter how you press the size of the browser font button, their font size will not change. In fact, they use the "CSS" stylesheet technology in the web page, which is very easy to implement in Dreamweaver. First, press "F7" or select the "style sheet" option from the "window" menu to open the style sheet editor, right-click in the window, 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 to the specific text attributes to define parameters (generally speaking, the size of the text in 800 × 600 screen to choose 10.5 is more appropriate), press "OK", the defined style sheet appears. Select the text in the page editing window and click the new stylesheet name to see the change in the selected text. Preview to see if the defined text font size will change depending on the font size selected by the browser.

* * *

* * *

14. Insert Flash animation

Macromedia's Flash animation has gradually become a new weapon for web page production because of its interactive and fast transmission. If you can insert a piece of Flash animation into your web page, it will certainly add a lot of color to your work. In Dreamweaver to insert Flash produced by SWF format animation is very easy, click the Flash logo on the object toolbar or click the "Media" under the "Flash", you can open the selection of SWF animation file dialog box, select the file can be set in its properties panel to play the parameters, that is, it is done.

* * *

* * *

15. Let the form leave blank for the web page.

When typing text on Dreamweaver's new web page, the default format is upright and unattractive. To avoid this defect is actually very simple, as long as we use good form tools on it. The specific approach is: insert a center-aligned table on the new page, in order to make the table easy to control, it is best to set odd columns, and the value is not too large. In this way, the text entered in the cell is limited to an area where you can adjust the width at will, and you don't have to worry about the text.

* * *

* * *

16. Change the status bar prompt text

In general, when a browser loads a page, the address name of the page is displayed on its status bar, which is very rigid. Have you ever thought of 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", etc., click "OK".

* * *

* * *

17. Integrated text code editor

The biggest inconvenience of visual web editing software is that it is difficult to edit the source code, let alone javascript, but Dreamweaver? Will make it extremely easy for you to deal with the code. The main new function of this built-in text code editor is: automatic indentation (you can select multiple lines at a time for indentation). You can also detect symbols, and if you forget a "" when writing code, it will give a hint. The drop-down menu in the tool sheet lists all custom javascript in the current web page

Function, which allows you to jump freely in the original code of the web page, and the "source code navigation tool" allows professionals to easily deal with javascript

Function, enter the javascript code in the text code editor, and the system will display it in different colors.

* * *

* * *

18. Enter multiple spaces in Dreamweaver

The spaces we usually enter are half-width characters, and we can only enter one in Dreamweaver. If you want to enter multiple spaces, you only need to enter full-width spaces. Enter the full-width space by opening the Chinese input method and pressing Shift+Space to switch to the full-width state. At this point, the space you enter is the full-width space.

* * *

* * *

19. One of the BUG for solving Dreamweaver

The "Events for" drop-down menu item cannot be opened in the behavior panel (Behavior inspector) of Dreamweaver 3.0. As a result, many special effects are in vain and cannot be produced at all. In fact, this should be regarded as an incompatibility between Dreamweaver 3.0 and Chinese Windows98, but there is no such problem in English Windows98. In fact, the menu can be opened, but it can't be displayed correctly. After selecting the drop-down menu, we can use the up and down keys to select the browser we want to use.

* * *

* * *

20. Use Dreamweaver 3.0template to make web pages and set behavior (Behavior)

You cannot add a new behavior to a web page made using a template (Template). This is because the new behavior requires inserting javascript in the Head section of the HTML file, and after using Template, the Head part of the HTML file will be "blocked". If you want to apply a behavior to a web page generated using a template, you need to define the behavior in the template in advance, and then define it as an editable area of the template. You can then change this behavior on the web page. However, this is limited to changing the specific contents of the triggering event (events) and action (actions) of the behavior, not the type of action.

* * *

* * *

21. Apply behavior (Behavior) to text to create dynamic text effects

In Dreamweaver, ordinary text is in characters and cannot be used as an object, that is, some very useful javascript events cannot be assigned to text. Because text does not have specific "tags" like pictures and other controls, text misses many special effects. In order to add special effects to the text, only the text into a hyperlink to deal with. In this way, the text becomes an object and can exert behavior. But this brings some unwanted hyperlink attributes, such as underlining, and color changes such as hover, visited, and so on. To simply add special effects to the text, you can first make the text you want to set into a hyperlink, and then add behavior to it, and finally 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), and pop up the behaviors panel. Press "+" to add the behavior you want, such as play sound, etc. Open Dreamweaver's hypertext editor, find the link, and change it to. Finally, put "href=..." Delete. Save this page. Press F12 to preview. The effect is not bad!

* * *

* * *

twenty-two。 Pinpoint the location of each element in a web page

There are two ways to pinpoint the location of individual elements in a web page: using tables or layers. At present, the use of tables is a more common practice, the specific method is: first create a table in the web page, note that the border width of the table should be 0. Then put each element in each table cell according to your requirements. Carefully adjust the size of the table cell and the position of the table border, and the elements in the table cell will move with it. In this way, you can more accurately locate the location of each element in the page. The advantage of using tables is that they are universal, and almost every version of the browser can support tables. Its disadvantage is that it is difficult to use, needs to be carefully adjusted, and the positioning is not very accurate. Layers can be placed at will on a web page, so we can use layers for precise positioning. The way to use it is to insert a layer in the web page, and then put the elements you want to locate in the layer, and then we can put the layer anywhere you want. In addition, you can also use rulers and grids for accurate positioning. Because layers are only supported in the latest browsers, we can convert layers into tables in order to be compatible with older browsers. The method is to select "modify (Modify) → layout mode (Layout Mode) → to convert the layer into a table (convert layers to table)". Note that the layers cannot overlap at this time. We can select "view → to prevent layer interlacing (prevent layer overlaps)" before inserting layers to avoid layer overlap. Generally speaking, there may be some changes in the converted page, and we need to adjust it manually. Finally, it is important to note that when converting between tables and layers, it is best not to use layers and tables on the same page at the same time, as it may make your page a mess.

23. Change the shape of the viewer's mouse

This is done by editing the stylesheet. The specific method is: select "text (text) → custom style (CSS Style) → edit style sheet (Edit Style Sheet)", pop-up edit style sheet window, in which select "New (new)". Then select "create a custom style (Make custom style)", name the stylesheet, and click OK. Edit the stylesheet, select the extension (extension), and select the pointer effect to appear in the cursor item (Cursor) on the right.

* * *

* * *

24. Remove the underline under the hyperlink text

This effect is achieved by editing stylesheets. The specific method is: "Click the text (text) → Custom style (CSS Style) → Edit style sheet (Edit Style Sheet)", the edit style sheet window appears, select "New (new)". Then select redefine HTML tags (Redefine HTML Tag) and select an in the tags (Tag) menu below. Edit the stylesheet, select the type (type), and select none (none) in the decoration (decoration) on the right.

* * *

* * *

25. Make an image that follows the page

This effect is achieved through javascript. Generally speaking, it takes some programming ability to accomplish such an effect, but now we can easily achieve it through Dreamweaver plug-ins. You can download this plugin from http://www.computerinfo.com.cn/classroom/chajian/chajian2.zip. How to install the plug-in: unzip it and copy it to a new folder in the folder Configuration\ Objects under Dreamweaver. After restarting Dreamweaver, we can find the newly installed plug-ins in the objects panel. Click the plug-in icon and fill in the pop-up dialog box with the location of the image and the location where the image is displayed.

* * *

* * *

twenty-six。 Make a dynamic menu that changes after the mouse is moved up.

The so-called dynamic menu is actually two pictures, one is displayed when the mouse is not on it, and the other is displayed when the mouse is moved up. We can use swap image in the behavior provided by Dreamweaver to achieve this effect. First insert a picture, click it with the mouse, and enter the web page you want to connect to in the connection bar of the property panel. Then open the behaviors panel, click the "+" sign and select swap image. Then a window appears, asking you to select the picture that will be displayed after you move the mouse up, select the second picture here, and click OK. All right, the effect is done. how easy it is.

* * *

* * *

twenty-seven。 Use Dreamweaver to create an effect similar to a drop-down menu

Making an effect similar to a drop-down menu requires the hiding and display properties of the layer. The specific way is to insert a single-row and multi-column table in 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 of the table. Similarly, do the same for other menu items and insert the appropriate layers. Change the display attribute (vis) of all layers to Hidden.

Select the first cell of the table, click the Windows → behavior (Behaviors), and pop up the behaviors panel. Press "+" to add the behavior Show-Hide layers, and change the first layer (Layer1) property to show (Show), and the other layers' properties to Hide (hide). Then edit the behavior in the behaviors panel and change its trigger event (events) to onMouseover. In this way, when the mouse moves over the first table cell, the first drop-down menu will be displayed. Then add a behavior Show-Hide layers and change the properties of all layers to hidden. Then edit the behavior in the behaviors panel and change its trigger event (events) to onMouseout. In this way, when the mouse is moved away from the first table cell, the first drop-down menu is hidden. Repeat for other menu items. However, it should be noted that when setting menu 2, the second layer is displayed and the other layers are hidden; when setting menu 3, the third layer is displayed and other layers are hidden, and so on. All right, it's done. Press F12 to have a look.

* * *

* * *

twenty-eight。 Easy to make download files

Using Dreamweaver is actually very simple, write down the name of the file you want the viewer to download, then drag the mouse to select the text, and write the file name in the property input box of "Link" on the properties panel of the text. Note: if the downloaded file is not in the same directory as the web page, the file name must contain a relative path, otherwise you will be prompted that the file cannot be found during the download.

* * *

* * *

twenty-nine。 Using Dreamweaver bookmarks to make jump links

We can do this with Dreamweaver bookmarks. The way to do this is to move the cursor to the place you want to jump to, select "Insert → bookmark (Name Anchor)" in the menu, and enter the name of the bookmark. Next, fill in the "# bookmark name" in the link target box where you want to call the link, so that the jump link in a page is done. Here, if we fill in the name of the page before the name of the bookmark, we will jump to the bookmark on other pages. For example, we fill in "index.htm#top" at Link, and when the viewer clicks this link, it will jump to the top bookmark on the index page.

* * *

* * *

thirty。 Remove the gap between the contact between the picture and the form

In order to leave no space where the picture and the table touch, it is not possible to set the border (border) to 0 only on the table properties panel, and you need to set the two properties of the cell to 0 (that is, cellspacing= "0" and cellpadding= "0") on the table properties panel.

* * *

* * *

thirty-one。 Use TracingImage to help locate the elements in a web page

TracingImage is a very effective function of Dreamweaver, which allows users to use the original pattern design as an auxiliary background in the web page. In this way, users can easily locate the position of text, images, tables, layers and other web page elements in the page. The specific use of TracingImage is as follows: first, use a variety of drawing software to make an imaginary web page layout map, and then save the picture to a network image format (including gif, jpg, jpeg and png). Use Dreamweaver to open the page you edited, right-click in the blank area of the page, select "Page Properties...", and then enter the location of the page layout diagram you just created in the Tracing Image item in the pop-up dialog box. Then set the transparency of TracingImage in Image Transparen, OK. In this way, you can easily locate each page element in the current page. Pages that use TracingImage will no longer show a background pattern when edited with Dreamweaver, but when browsing with a browser, TracingImage is gone, and all you can see is an edited page (which, of course, can show a background pattern).

* * *

* * *

thirty-two。 About "Convert Table widths to Pixels" and "Convert Table widths to Percent"

"Convert Table widths to Pixels" and "Convert Table widths to Percent" are two important functions of Dreamweaver to set the width of the table. When you open a web page with a table, you can see the two buttons in the < table > tag in the status bar and then in the table properties tool panel that appears. As the name implies, "Convert Table widths to Pixels" represents the width of all cells in the table in pixels, while "Convert Table widths to Percent" represents the width of all cells in the table as a percentage. If you think about their role, if you express the width of a table in pixels, but when the browsing window is zoomed in, the table will not enlarge the width of the cell. The use of "Convert Table widths to Percent" allows you to create a 100% wide table at a resolution of 640 × 480 and keep it 100% wide at a higher resolution. Therefore, the active use of these two functions can make web page typesetting get twice the result with half the effort.

* * *

* * *

thirty-three。 Call Style without messing up the original code of the web page

There are many ways to call Style. You can right-click and select Custon Style to call the Style specification, or you can right-click on the list of elements in the status bar to call Style. Although different methods seem to achieve the same effect, the actual HTML code generated is completely different. For example, using Custon Style to call the Style specification generates a < span > tag in the web page code, so too many tags will make the file very bloated and affect the browser's parsing speed, so I recommend using the list of elements in the status bar to call Style as much as possible. Another tip is that if you want to use a Style to define all the text in a table cell, just call Style in the < td > tag instead of defining the < p > tag one by one. Note that this method does not apply to the < table > tag, because text formatting defined with Style in the < table > tag is ignored by Netscape.

* * *

* * *

thirty-four。 Use the custom window function to test the effect of web pages at different resolutions

No one wants to see their hard-working web pages beyond recognition at different resolutions, so testing the browsing effect of web pages at different resolutions is a very important step in web page production. We can choose the desired resolution to adjust the window size in the middle of the status bar in the Dreamweaver interface, so as to test the effect of the web page at different resolutions.

* * *

* * *

thirty-five。 There is no need to use third-party FTP software when uploading a website

FTP is integrated into Dreamweaver and optimized for website upload. We can make a simple comparison: when you use general FTP software to upload a website, do you create a new directory in the server according to the website directory on your local machine, and then upload files one by one? This is true, but since not every file in the site directory on the local machine is called by a web page (such as a backup file left when a web page is under construction), only the user knows the heavy workload of filtering files. But using Dreamweaver to upload web pages can be much more convenient, because the FTP function has done a lot of necessary work for users behind the scenes, so as long as users upload the relevant HTML files in the site map, Dreamweaver will automatically upload all other local files related to this HTML file (such as images, ZIP files, FLASH files and even various REAL files). The specific way to use the FTP function included in Dreamweaver is to edit the defined SITE, in "Site Definition for..." Select "Web Server Info" in the panel. If the page is uploaded via FTP, set "Server Access" to FTP, add the address of the FTP server in FTP Host, add the remote login directory in Host Directory, add the user name in Login, and fill in the Password. After the above settings, you can press the Connect button in the Site panel. When the Dreamweaver is successfully connected to the server, the Connect button automatically changes to Disconnect and lights up a small green light on the side. The next thing to do is right-click on the HTML file to upload and select "Put". When the HTML file is uploaded successfully, Put Depanding File will be displayed in the status bar, indicating that Dreamweaver is uploading other local files called by the HTML file. Not only that, Dreamweaver can also directly download files on the server to modify, the method, as long as you try the Get button next to Put to understand.

* * *

* * *

thirty-six。 Achieve the effect of underlining when pointing to a link with the mouse

Some web links, there is no underline, you point the mouse to the link, there will be underlining, the mouse removed the underline and there is no more. This effect can actually be achieved with cascading stylesheets (CSS). You don't need to write code to edit cascading stylesheets in Dreamweaver, as follows:

(1) Click the cascading stylesheet button in the quick launch bar (the button where the mouse is placed to display "show css styles"), and double-click (none) on the pop-up CSS Styles panel.

(2) at this point, you can see the Edit Style Sheet panel that pops up, and press the New button on the panel

(3) click Redefine HTML Tag (redefine HTML tag) on the pop-up New Style panel, then select the "a" (hyperlink tag) tag in Tag and press the OK button. (4) then you can see the pop-up Style dehinition for a dialog box, in which you can set many properties of the hyperlink, you can set according to your wishes, but here we mainly want to remove the annoying underline, so we choose "none" in the decoration property, so the underline is removed; then we choose the color: # 339966. Press the OK button to return to the Edit Style Sheet panel

(5) press the New button again on the Edit Style Sheet panel

(6) Click Use CSS Selector on the pop-up New Style panel, 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), and press the OK button

(7) in the pop-up Style dehinition for a:hover dialog box, we select "underline" in the decoration property, which adds the underline again; 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 again, and at the end of all settings, you will see the following code between and in the Dreamweaver source code viewer:

thirty-seven。 Implement the defined hyperlink text color

The colors of text hyperlinks (including unaccessed links, mouse links, visited links, etc.) can be defined by cascading style sheets (CSS). Here's how to set the color of text links as you like.

(1) the default color of hyperlinks is: unvisited hyperlinks are blue, and visited hyperlinks are purple.

(2) for the color defined by CSS to work, don't fill anything in the color attribute of the hyperlink's text.

(3) if you have defined the color of the text and found that the hyperlink color defined in CSS does not work, you can cancel the color definition of the text, or cancel the hyperlink and redefine it again, and the color defined by CSS will work.

(4) the relationship between the color of the text in various states on the hyperlink: once the color of the visited link is defined (A: visited), the color of the link will not change after the link has been visited, that is, defining the color of the mouse on the hyperlink (a: hover) will not work. If you do not define the color of the visited link (A: visited), when the mouse displays the color defined in a: hover on the hyperlink, it displays the color defined in a when the mouse moves away.

As can be seen from the above, the color of a text link can only be changed between two colors, not between multiple colors, as mentioned in some articles, but because those two colors can be used arbitrarily, so it should be said that the range of color choice is relatively large.

* * *

* * *

thirty-eight。 Put the graphics in the middle in Dreamweaver

Click to select the graphic, and there is a drop-down box next to the Align (alignment attributes) in the upper-right corner of the properties panel of the graphic. If you select it in the drop-down box, the text will be arranged around the picture. If the individual picture is in the middle, click on the center attribute on the image panel.

* * *

* * *

thirty-nine。 How to use the Behaviors function without linking to anywhere

Select the element you want to use as a hyperlink (a picture or a paragraph of text), and do not fill in any link address in the address bar (Link) on the properties panel, just a "#" mark (excluding quotation marks). This allows you to use the Behaviors function without linking to anywhere.

* * *

* * *

forty。 To make several different links on a (larger) picture

In Dreamweaver, this is called setting the "image hot area". Select the image first, and then there is a "Map" toolbar on the image properties panel, below which there are three light blue tool icons, namely, "rectangle", "circle" or "polygon". You can choose one (click with the mouse) as needed, then move the mouse over the image and press the left mouse button. Drag the mouse to draw a light blue area (don't worry that this light blue area will destroy your image, it won't be displayed in the browser), and you can just add the web address you want to link to in the properties panel. Draw a few areas with as many links as you need, as you like.

* * *

* * *

forty-one。 Make a directory tree

In front of the total directory, there is a "+", press this "+", you can display its subdirectories, "+" becomes "-", press "-", you can hide its subdirectories, just like in Explorer, this requires two pages, one page to write the general directory, one page to write the subdirectory. Set the "+" sign on the page of the general directory to the hyperlink, and add the address of the subdirectory page in the "Link" column. Set the "-" sign on the page of the subdirectory to the hyperlink, and add the address of the general directory page in the "Link" column. The specific effect can take a look at the Dreamweaver help document, in this help document is also click on the master directory, pop-up subdirectory, press the subdirectory on the total directory to return to the total directory, but there is no "+", "-" expression. If you look at the source code of the document again, it will be clear at a glance.

* * *

* * *

forty-two。 Easily set line spacing in Dreamweaver

Use cascading style sheets (CSS). You don't need to write code to edit cascading style sheets in Dreamweaver. You can do this as follows:

(1) Click the cascading stylesheet button in the quick launch bar (the button where the mouse is placed to display "show css styles"), and double-click (none) on the pop-up CSS Styles panel.

(2) at this point, you can see the Edit Style Sheet panel that pops up, and press the New button on the panel

(3) click Redefine HTML Tag on the pop-up New Style panel (redefine the HTML tag), select the "body" tag in the Tag and press the OK button.

(4) at this time, you can see the pop-up Style dehinition for body dialog box, in which you can set many properties of the "body" tag, which you can set as you wish, but here we mainly want to set line spacing, so we fill in the number of pixels of line spacing in the line attribute input box. Now the popular number of nine characters, line spacing is usually 12, press the OK button to return to the Edit Style Sheet panel, and the line spacing of "body" has been set.

(5) since the line spacing defined in "body" does not work on the table, we press the New button on the Edit Style Sheet panel again.

(6) click Redefine HTML Tag (redefine HTML tag) on the pop-up New Style panel, select the "td" tag in Tag, and then press the OK button.

(7) set the line spacing of td in the pop-up dialog box of Style dehinition for td, and press the OK button to return to the Edit Style Sheet panel.

(8) press the Don button on the Edit Style Sheet panel again, and at the end of all settings, you will see the following code between and in the Dreamweaver source code viewer:

With this code, the line spacing of all your text on the page has been determined. If you are not satisfied, you can modify the setting.

forty-three。 How to design so that the viewer can not set the font size of the web page when browsing?

Use CSS cascading style sheets to enforce font control (pixels).

* * *

* * *

forty-four。 Realize the effect of refreshing the web page every five minutes.

Select the "head" function group panel on the Dreamweaver function panel, click the "Refresh" function icon on this panel, in the pop-up "Insert refresh" dialog box, enter the interval time to refresh in "Delay", in seconds, for example: refresh every five minutes, then enter 300. Then select "Refresh This Document" on the dialog box (refresh the current window), press OK, and you are done. When you visit the page again, it will be automatically refreshed every five minutes.

* * *

* * *

forty-five。 Solve the problem of using IE to preview normal linked web pages and upload them to the website but can't see them.

Unify all the file names of the web page in lowercase (or uppercase) and upload them. Because many servers use the UNIX operating system, it is very case-sensitive, that is, uppercase and lowercase file names it thinks are two files, you must pay attention to uppercase and lowercase when uploading. Also note: hyperlinks should use relative paths, not absolute paths, and do not use Chinese file names.

* * *

* * *

forty-six。 Make a hyperlink to open a new window to open the web page (that is, the original web page is not overwritten)

In Dreamweaver, set "target" to "_ blank" on the link's property panel.

* * *

* * *

forty-seven。 Hide unnecessary tags

When a user inserts an invisible element into a web page, Dreamweaver automatically adds a corresponding element tag to the page so that the user can select the invisible element. But this is not all a good thing, for example, if you insert a table in the first row of a page with many layers, you will find that because the first row has arranged too many layer element tags, the table will automatically fall back to the second row of the page. Although it does not affect the effect when browsing, it does hinder your work. So when you think an element tag is in your way, just block it. To do this, press Ctrl+U to open the Preferences panel, select Invisibel Elements in the Category, and all the element tags will appear on the right side of the panel. Just uncheck the tag of the element you hate, and it will never happen again.

* * *

* * *

forty-eight。 Solve the problem where the table is close to the top left

There are several solutions to this problem.

(1) Press Ctrl+J, pop up Page Properties, and set Left, Top, Margin Width, and Margin Height to 0.

(2) add the following code to yours: topmargin= "0" leftmargin= "0". This method applies only to IE.

(3) add the following code: this method applies to Netscape

The above is all the contents of this article entitled "Tips for using dreamweaver". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.