Dreamweaver to make the Web page classic problem Big finishing

Source: Internet
Author: User
Tags format define definition empty flip picture implement insert dreamweaver
dreamweaver| Page | questions


1> in DW, how do I enter a space?



The question of entering a space in DW seems to have become a cliché, and we may have seen N times in many books or articles about the use of DW.



The restrictions on space input in DW are for the "half-width" text state. Therefore, by adjusting the input method to the Full-width mode can be avoided, the method is: Open the Chinese Input method (take artificial intelligence ABC as an example), press Shift+space switch to the full corner state, now should be no problem.



In addition, you can use a number of "flexible" methods to enter the purpose of the space, such as the commonly used:



Add the HTML code "" that represents the space directly in the source code, after you enter a length of text object, and then adjust the text to the same color as the current background, but note that the latter may appear somewhat problematic in some browsers.



2> How do I add a custom small icon before the browser address bar?



Do you remember sometimes when browsing the home page of NetEase's website, a small icon of "easy" is displayed before the address WWW.163.COM. By default, this icon is a specified image of an IE browser.



In fact, this is not a sophisticated technology, but in the site directory to add a specific file.



At this point, we need to make an icon file in advance, size is 16*16 pixel. The file name extension is ico and then uploaded to the appropriate directory. Add the following code between the HTML source file "


<link rel= "Shortcut ICON" href= "http://the address of the picture (note corresponding to just the directory)" >



Where the "shortcut icon" is the name of the icon. Of course, if users use IE5 or the above version of browsing, it is simpler, simply upload the image to the root of the site, you can automatically identify!



3> Why, I originally designed a good web page, in the browser window to minimize the ugly embarrassment?



This should be a very worthy of attention, that is to say, in Full-screen state browsing the content of the web, a little problem is not. When we use the window's minimize command or manually resize the window, the problem slowly arises. The content of the page will be the current window as the display range, in descending order. For example, the difference is exactly the same as having a "wrap in line" and "no wrap" in Notepad.



To solve this problem, we must start from the layout of the Web page, generally speaking, the content of the Web page is mostly through the table to achieve. Therefore, the problem of the "fault" is also on the table.



As you may have noticed, there are two different types, percentages, and pixels available on the table's high width setting. The use of percentages will result in the problem mentioned earlier, and it will all be corrected to the actual size of the pixels unit.



4> How to change the display of the page, the tip of the top of the message?



When browsing the page, the tip of the top is often the key to the content of the Web page, helping visitors to understand the content of the page in advance. Before DW4, the operation is not provided directly on the function, and we often do so by applying the "title" attribute in the source code. Entering the DW4 is much simpler.



Type the text information you want directly in the title input box at the top of the edit window.



How about 5> to add a color-specific border to a picture?



For a picture without a border, inserting it directly into the Web page is quite bad for the display effect. Remember in Microsoft's FP to add a satisfactory frame to the picture is still quite troublesome.



But it's much easier in the DW because there's a "Border" attribute that lets you set the width of the border directly.



The width is set, you must ask, the color? The Panel does not offer a choice of colors! Oh, in fact, there is a skill problem, with the mouse to select the object of the picture, attention is not clicked to select, but drag selection. It's as if you were setting the text color.



6> How do I add tips for pictures and linked text?



When we browse the Web, when the mouse hovers over a picture object or link, at the bottom right of the mouse sometimes a message box appears. Make a note of the target. On some occasions, its role is very important.



Next look at the picture prompts the information to add, select the Picture object, in the property panel you will find an "Alt" input box. By default, the input box is blank. Here's what you need to enter the prompt.



The creation of link hints is not so simple. Because this functionality is not provided directly in the DW, we need to implement it by adding HTML code.



Add the title attribute in <a href= "" >. title= hint content can be.



7> How to download your own zip or other types of files for others?



In the view of many primary Web page authors, it seems like a "mystery" to download through a mouse click, but far from it. A format file (htm,html,asp,php) that is not recognized by browsers in a DW. Perl,shtml, etc. as a link target, the default action is download.



All you need to do is to write down the name of the file you want to download, and then make a link to the target file. Note that the catalogue must not be mistaken.



How can 8> ensure that text in a Web page does not follow the browser font size setting?



As we all know, in IE browser function settings, there is a freedom to set the window content font size function, so due to the habit of different visitors, the page presented in front of them sometimes will be different.



For example, you may have used the design of the font 2nd, the result of the user to the browser's additional settings, the larger, then show the effect on the problem.



The solution is to make the content of the Web page qualitatively mandatory on a suitable size. He is not allowed to change. You can implement this requirement by using a CSS style sheet to enforce the font control.



9> Open the destination link as a new window?



Open with a new window, as the name implies, that is, without overwriting the current window under the premise of another open a browser window. You can <a href= "" > Join "Target=_blank" directly in the connection code.



If your HTML is poor, this setting is also available on the DW Properties panel, and when you type the WWW URL in the link input box, the target dropdown box is also activated.



Choose the most "blank" on it.



10> How to load a Web page, like many commercial websites, pop up an ad window



This is often seen in a number of large business websites. The behavior behavior can be easily implemented in DW.



Since it is loaded, we can treat the entire page content as an event object. Click on the "<body>" tab in the bottom left corner of the DW edit window, and you will notice that all the pages are selected.



Click the "Behavior" button in the Quick Launch pad to go to the Behavior panel and select the "Open Browse window" Item, where you can customize the window style, such as size, retention of tool buttons, and so on. Another thing is to remember that the corresponding event is "Onload".



11> I have no "timelines" in my Quick Launch board, what should I do?



DW has added several new items to the Quick Launch Board since it was upgraded to version 4, such as assets and so on. At this time the original timelins (timeline) button was squeezed down.



Of course, if you are anxious to use it now, you can still find it through the menu "Windows"-"timelines". But after all, it's better to put it in the boot board, then we can add it by setting it in!



"Edit"-"preference" enters the window, selects "Panels" (panel) in the list of items on the left, clicks the "+" button above, selects "timelines" from the Drop-down list. The timeline has been automatically added to the current show in Launcher list content, OK. Changed "Launcher" panel



At the same time you can also according to their own needs free choice of button options in the Panel to improve efficiency.



12> make a Web page so that it can automatically refresh every 5 minutes, how to achieve?



When browsing on the Internet, we often encounter some Web pages. When there is no response for a period of time, it is refreshed automatically. In addition to the purpose of alerting visitors, when the new refresh address is not the current URL, the function of automatic jump is realized.



Whether it's a recurring refresh or an automatic jump. In web design, is a very practical operation. Here's how they are made.



Select the "Head" section of the DW "Object" panel, and note that by default, the common "content" is displayed.



Click the Refresh button above to type the time in seconds for the refresh delay in the Delay input box, and Action to refresh the specified target URL. Since it is now refreshing the current page, the direct menu option "Refresh this Document" is available.



13> How do I define keywords for a Web page (keyname)?



When users use the search engine to search the appropriate content of the page, the keyword plays a role that can not be ignored. Most search servers automatically detect the presence of new pages in the network every once in a while, and record them by keyword to facilitate user inquiries.



Of course you want your page to appear in the search engine's query return list, and the keyword definition is particularly important.



Also in the "Head" Panel section, click the "Keywords" button, input needs to be defined by keyword, note that each keyword with ";", the number is not limited.



14> How do I hide some unnecessary labels in the editing window?



When a user inserts too many invisible elements into a Web page, a row of labels appears at the top of the editing window to make it easy for users to find them at any time. Although the label itself does not affect the display in the browser, but many later, often so that the content of the Web page has to be misplaced, and thus to a certain extent, to hinder the visual adjustment of the Web page, so how can these dongdong remove it?



Go to the "preperence" panel, select "Invisibel Elements" in the list, and tick the "check mark" of items you don't want to show, such as scripts



15> does not support the display content of the frames browser?



We know that there are a lot of browser types, so the first thing we think about when designing a Web page is "is this something that can be displayed in different browsers?" ”。 The framework is an example!



But avoid this, it's easy, you just need to add the following content to the source code.



< body><noframes>---This page contains a frame structure, if you do not display the normal, please download a new browser version or replace the mainstream browser---</noframes></body>



16> How to avoid people putting your pages in the frame?



Some malicious people often steal the fruits of other people's work, such as putting other people's carefully crafted pages into their own frames.



So how to avoid the content of their own web page is "stolen"?



You only need to add the following code to the


<script language= "JavaScript" ><!--
if (self!=top) {top.location=self.location;}
--></script>



How does 17> add the annotation content?



annotation content, as the name implies, appears only as a description, so it does not appear in the Web page when browsing. Its role is to identify some important or complex code to make the necessary marking, to be more convenient and quick to find.



Enter the "Invisibel" section of the Object panel (that is, the invisible Element) and select the Insert "Comment" button.



Type the necessary information in "Comment". If you return to the source code, you will see that these actions add only a piece of code in the following format:



<! --This is the annotation content that needs to be filled in-->



18> horizontal line, why can't I set the color?



In DW, when you insert a horizontal line through the menu "insert"-"horizonal rule", you will notice in the property panel that there is no setting for the horizontal line color, because the color property of the label


If it seems necessary, we can only go directly to the source file changes.



<HR color= "Corresponding color code" >



19> How do I set the ability to turn off the current window?



Here we can first enter the text used to mark the "Close window", drag the mouse to select it, in the "link" input box, type "/", at the same time into the Source code window, in the link code to type the event-onclick= "Javascript:window.close ();" return false; ".



The complete code is: <a href= "/" onclick= "javascript:window.close (); return false; > Close Window </a>



Of course, you can also change the text "Close the window" to other objects, such as pictures, buttons and so on!



What is the window that 20> automatically closes at timed intervals?



The above mentioned a function to close the window, so now the automatic shutdown how to achieve it?



Add the following code after the source <body> code:



< script language= "JavaScript" > <!--
SetTimeout (' Window.close (); ', 10000);
--> </script>



The set timeout is a function to set the delay time, where 10000 represents 10 seconds



21> How do I change the mouse's "shape" in the browser?



In general, the mouse in the browser with the "Arrow" style appears, then we can change it to their favorite other style types?



Changing the shape of the mouse is done through a "CSS style sheet" in the DW.



Menu "Text"-"CSS style sheet"-"Edit style sheet", pop-up style sheet editing window, or click the CSS Style button in the Quick Launch pad to find, click the "New" button, and select the default make Custom style, and in the following define, make the style apply only to the current Web page document, "This document only".



Select Extensing in the left list item in the Style Definition window, and the appropriate right setting
In the "Cursor" (mouse), Drop-down Select the appropriate shape can be determined to return, press F12 in the browser to observe the effect, not satisfied, you can also modify the style.



22> How do I get rid of the underline below the link text?



After we complete the link creation, the link text content is often automatically added below an underscore to indicate that the content contains hyperlinks. When a link in a Web page for a long time, it seems a bit messy feeling, in fact, we can easily remove it.



Also enter the "Edit style Sheet" window, click "New" to establish a novel style, where type (types), you need to select " HTML tag", while in the specific tag tag, select the "a" to represent the hyperlink, click OK.



Edit the style, select "Type" in the list on the left, and check the "None" checkbox in the "Decoration" (decorated), when all the link text underlines in all pages are erased.



23> How to let the mouse in the link text above "hover", resulting in discoloration, deformation and other effects?



Visit the site, we encountered the most common but one effect is "mouse hover response", the so-called "mouse hover response" in the link text, including changes in color, cosmetic effect (underline, underlined) and other options.



Because this effect is very good played to the target content of the emphasis on the role, so whether it is a personal site or some large commercial sites (such as Sina, Sohu, NetEase, etc.) have applications.



In the last question, you already know the way to get rid of the link underline, and don't repeat it here. The following question will be how to add a mouse to respond to an event.



Also go to the Edit Style Sheet window, click New to establish a novel style, and the difference is to select the last item in the type now-"Use CSS selector", "selector" menu, select "A:hover" OK, go to the Edit style window , set the text color to "red" in the "Type" item, and of course you can add the effect of underlining when you hover the mouse.



24> How do I make the background picture of a Web page scroll without following content?






25> background music You must know, how to add it?



In Microsoft's Web tool-frontpage, there is a setting for background music, so DW obviously didn't do this, so you can only add it manually in the source code if you want to use it.



Before using, to remind everyone that the use of background music must pay attention to the size of the Web page file, can not be forgotten.



The code is as follows:



< EMBED src= "Music.mid" autostart= "true" loop= "2" width= "" "height=" >



Where SRC specifies the location of the music file, autostart for the music file after the upload of the action, true to automatically start playing, False does not play (the default).



27> How do I automatically add a date after a page change?



You only need to add the following code between the source file <body></body>.



< Script language= "JavaScript" ><!--
document.write ("Last Updated:" +document.lastmodified);
--></script>



The display style in the browser is: "Last Updated:2001/8/19"



How does 28> control popup popup information?



Sometimes, when we click on the link, there will be some note-highlighting, which is the pop-up message. For example, when a link has not yet completed the production of the target content page, you can use the popup information to explain.



Enter the link text in the appropriate place in the Web page, select it, and make a link in the Properties panel. If you are still selected, click the Behavior button in the Quick Launch pad.



Click on the "+" number on the left, select "Popun message" from the list, and enter the information to be prompted in the following window.



Set the mouse event (events) for this action as a click (onclick). Preview the effect in the browser as follows



29> How do you hide the URL address information for the status bar in your browser?



Browsing the web, when the mouse hovers over the link, in the following status bar will automatically display the link target address, in view of security issues, sometimes we need to reset it to "0", that is set to blank.



Now you just have to do something in the link code to get it done,



<a href=http://www.webjx.com > Web Teaching Network </a>



30> How do I change the prompt text in the status bar?



By default, when a Web page is loaded, information such as the address of the page is displayed in the status bar. Want to make it more attractive?



In the DW Behavior behavior panel, click the + to select the Text of status bar option under Set text set, and in the Set Text of Bar window, enter a similar "Welcome to this site--Network management message" and other message information.



31> How do I create a form handle for an e-mail message?



Forms should be an essential element of web interaction, and the form's functionality is due to the interaction of information, so the form's processing often involves the use of high-level programming languages, you might say, wow! I can't program! It doesn't matter, in fact, for some simple form content processing by e-mail can also be implemented.



First look at the following code:


<form name= "Content" method= "post" action= "handlers to be used" ></form>





Above is a typical form of HTML source code, where method determines how to use, including post and get two kinds. Action is the handler we said above, which can be implemented by asp/php/cgi.



So how do you do that with e-mail? Action=mailto:xxx@163.com, so that when you click the Submit button, a prompt will pop up, and the "OK" form will be sent to the specified mailbox.



32> How do I make a canonical email link?



The so-called "e-mail Link" is when we click on it, the browser will automatically invoke the default use of the mail client path 蚍 ⑺ steal loving to start ?/p>



Enter the "Problematic mail ME" word, drag and drop the mouse, switch to the Properties panel, and type the following command in the link input box:



Mailto:xxx@163.com? subject= &bc= Other e-mail address &bcc= other e-mail address. Where mailto for the Mail Link protocol, Subject for the message of the title, BC is the same carbon copy of the e-mail address, BCC represents the dark sent.



33> How to make an "empty link"?



An empty link is a link with no linked object, and in an empty link, the target URL is represented by "#". In other words, when making a link, just enter the # tag in the link input box of the property board, it is an empty link.



The presence of an empty link involves a number of factors, such as a page that has not been completed on a regular basis, and in order to maintain consistency on the page display (link styles are different from regular text styles), you can use it.



34> Click on the empty link, the page is often reset to the top end of the page, how to deal with?



In the browser, when we click on the empty link, it will automatically reset the current page to the first end, thus affecting the user's normal reading content, we certainly hope that it can not move.



At this point, you can use the code "javascript:void (NULL)" Instead of the original "#" tag, look back, the problem has been resolved.



35> How to customize a link that is free to jump within a page?



If you often subscribe to a number of free electronic magazines online, it is certain that the "tag link" is not unfamiliar, through a similar list of directories, can easily jump to any part of the page, no doubt its use is specifically for the "Super Long content" web design.



First determine where the link points to, that is, the location after the screen jumps. Go to the Invisibles section of the object panel, select the target text, click the Insert Named Anchor button, and type the name of the label in anchor name, OK, at which point the red dotted line appears automatically below the text to distinguish the normal text content , note that they do not appear in the browser.



Then you can make the link, in the Property Board link Input Box entry "#nchor name (just the name)". Of course, if you want to point to a location on another page, it's OK, just put the little tail in there.



36> at the same time in a picture, make a lot of links, how to do?



This problem is what we usually say "picture hotspot" (Image hot), of course, in the DW there is another name called "Image Hot zone."



Select the picture, which is located below the left of the property panel, there is a "Map" toolbar, the right side of which is three to delimit different areas of the button, in which the rectangle tool as an example, checked, the mouse resting on the picture will be a "+" shape to show that the representative can drag around, After completion, you can complete a number of hotspot areas of the link production. Note that the regions cannot overlap.



37> How to make a rollover picture that responds to mouse events?



In many web pages, we often see some column headings that can become different when the mouse is slippery. In fact, many of them through two different pictures to achieve, that is, the so-called "flip picture" effect.



Of course, first of all, you have to prepare two pictures of the same size in advance to ensure that there is no visual discomfort when flipping, click Rollover image on the Object panel to eject the Flip Picture Settings window, click Browse to press ト do logging riginal Image "and" rollover image "address, note that you must select the following" Preload rollover image "check box, otherwise the mouse in the blink of an instant, will have a certain download delay and affect the effect.



38> how to make "flying in the sky" picture?



In many large commercial web site home, you often see a lot of floating around the advertising picture, click can be linked to the specified address, in the DW this is achieved through timelines.



First insert the target picture in the Web page, select it at the same time, click the "Timelins" button in the Quick Launch pad to enter the Timeline window, right-click on the timeline 1frame, select "Add Object", and a blue color bar appears on the timeline (default 1-15frame), Stop the lens at 15frame and move the picture within the page to the end of the motion.



Now that a simple motion animation has been completed, you can adjust the path's twists and turns by adding keyframe in the middle. Click the right arrow button above to preview the effect.



39> How to make a "static suspension" picture on the page?



The so-called "static suspension" is the image is always trying to stay in a certain position in the Web page, so the visual kind of follow the page "Go" feeling, like suspended.



The implementation of this effect is done through JavaScript, generally requires a certain degree of programming capabilities. Fortunately, DW provides a fixed plug-in to make this effect, so it is much simpler.



First you must first download the Stav plugin, which will contain the two files (including picture files cross Browser static division.gif and Web page files cross Browser static division.htm) are copied to the DW installation directory Configuration\objects\common.



Restart the DW, in the object panel, you will see that the bottom has more than the SI item, select it in the pop-up window set the floating layer to the top and left, and then insert the specified content in the layer (here for the picture) can be.



40> how to make text and picture content coexist?



We all know that in the DW, picture objects are often exclusive line, then the text content can only be parallel to the position of the line, how can you let text around the picture display?



Select the picture, in the upper right of the property panel you can see a "Align" menu of attributes, select "Left", then you will find that the text has been evenly arranged on the right side of the picture.



41> to implement multiple windows connections?



Panel design has been a major feature of DW, to the DW4 version, the use of the Panel has been quite a lot, then how can we use it more efficiently? "Window Connection" is a convenient way to customize the technical features, in short, you can put two or more panels in a window as needed. Click the mouse to drag a panel tab to 21 panels, when you see a black border, release the mouse, then two panels have been one.



42> How to make a thin line with a width of 1?



In the DW, although the horizontal line is in the form of "line", but in the production of thin lines, it is not satisfactory performance, mainly too thick, no need for the delicate feeling!



Then we can take a flexible approach to the application of the table to achieve.



Insert a 1 row 1 column table in a Web page, set the table's "cellpadding" "cellspacing" to "0", and set the cell's "bgcolor" to red, and you can use a different color instead, "height" setting a height of 1.



There is also the most critical step, look at the source code, the < td></td> in the "" to remove it.



43> How do I make a square with a border of 1?



Obviously, we still have to do it through the table settings.



Perhaps you would say, it's not easy! Create a 1-row 1-column table and then set its "Border" value to 1. In fact, a table made in this way is not just a square with a border of 1, but a lot of "thick"!



Also insert a 1 row 1 column table, set the table "border", "cellpadding" to "0", "cellspacing" set to "1". Set the table "bgcolor" to red (that is, the color of the border), and set the cell "bgcolor" is white (that is, the same background color), OK.



44> How do I set up a different page according to a different browser?



Unlike browsers, it supports different technologies and effects. As a result, the Web page we designed does not display properly or best in all browsers. It is necessary to judge a browser's jump.



When users open with different types or versions of browsers, they can return to different pages to ensure the user's normal browsing. Click the "Behavior" button in the Quick Launch pad, point "+", and select "Check Browse" in the Drop-down list.



How do you create an object that you can drag in a 45> Web page?



Visit the site, often see a lot of the elements can be dragged by the mouse, including the majority of pictures, such as a picture of the ads blocking the content you want to browse, you can use the mouse to choose to throw it aside!



Make this effect through the layer of the "Drag Layer" behavior, click the behavior panel "+", select "Drag Layer", of course, before you need to ensure that the target layer is selected, simple settings after the OK.




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.