FAQs about creating a webpage using Dreamweaver

In DW, how do I enter a space?
The question of entering spaces seems to have become a commonplace in DW. We may have seen it n times in many books or articles about DW usage.

The restrictions on Space input in DW are for the "halfwidth" text State. Therefore, you can avoid it by adjusting the Input Method to the fullwidth mode. The method is as follows: open the Chinese Input Method (take ai abc as an example) and press SHIFT + space to switch to the full-angle status. Now it should be okay.

In addition, you can also use a number of "workarounds" to enter spaces. For example, the commonly used methods are:

Add the HTML code "& nbsp" that represents spaces in the source code. Enter a Text object of a certain length, and adjust the text color to be the same as the current background color, however, note that the latter may be displayed in Some browsers.

PS: I always use & nbsp; for input (remember that it is in the code, not on the page ).


2> How do I add a custom small icon in front of the browser address bar?

Do you remember that sometimes a small icon with the word "easy" is displayed before www.163.com when you browse the homepage of Netease website. By default, this icon is a specified image in IE browser.

In fact, this is not an advanced technology, but a specific file is added to the website directory.

In this case, we need to create an icon file with a size of 16*16 pixels in advance. The file extension is ICO and then uploaded to the corresponding directory. Add the following code between the HTML source file "

<LINK rel = "shortcut icon" href = "http: // image address (corresponding to the directory just now)">

The "shortcut cut icon" is the name of the icon. Of course, if you use ie5 or a later version for browsing, it will be simpler. You only need to upload the image to the root directory of the website to automatically identify it!

3> Why is my originally well-designed webpage ugly when the browser window is minimized?

This should be worth your attention. That is to say, there is no problem at all when you browse the webpage content in full screen. When we use the minimum window command or manually adjust the window size, the problem gradually emerges. The webpage content uses the current window as the display range and drops in turn. For example, the difference is exactly the same as that between "automatic line feed" and "no line feed" in notepad.

To solve this problem, we must start with the layout of the web page. In general, the content of the Web page is mostly positioned through tables. Therefore, the "fault" of the problem lies in the table.

You may have noticed that two different types, percentages, and pixels are provided in the table's width and height settings. The usage of percentage will generate the problem mentioned above, and correct all of it to the actual size of the pixels unit.

PS: this problem is the biggest headache for me when I was a beginner. But now I usually use percentages, but the resolution will be taken into account when designing percentages. When minimized, the content will be squeezed into one segment, but will be compressed according to that proportion. So the problem is generally not big.

4> How do I change the top prompt information when a webpage is displayed?

When you browse a webpage, the top prompt information often represents the key of the webpage content, which helps visitors understand the webpage content in advance. Before dw4, we did not directly provide this operation in terms of functionality. We often did this by applying the "title" attribute in the source code. Entering dw4 is much easier.

Enter the required text in the "title" text box at the top of the editing window.


5> How can I add a border with the specified color for the image?

For images without borders, inserting them directly into the webpage is quite poor in the display effect. I remember it was quite troublesome to add satisfactory borders to images in Microsoft's FP.

However, it is much easier in DW because there is a "border" attribute that allows you to directly set the Border width.

If the width is set, you will certainly ask, what about the color? No color options are provided on the panel! In fact, there is a technical problem here. Use the mouse to select an image object. Note that you do not click to select, but drag to select. Set the text color.

6> How do I add text prompts for images and links?

When we browse a webpage, when the mouse stays on an image object or link, a prompt box appears at the bottom right of the mouse. Comment on the target. In some cases, its role is very important.

Next, let's take a look at how to add the image prompt information and select the image object. In the attribute panel, you will find an "Alt" input box. By default, the input box is blank. Enter the required prompt content here.

Then the production of The Link prompt is not that simple. Because DW does not directly provide this function, we need to add HTML code.

Add the "title" attribute in <a href = "">. Title = prompt content.

7> How can I download my ZIP or other types of files for others?

In the view of many novice web page makers, it seems that it is a "mysterious" to download by clicking the mouse. In fact, this is far from the case. in DW, any format file (HTM, HTML, ASP, PHP. perl, shtml, etc.) as the link target, the default operation is to download.

In this case, you only need to write the file name to be downloaded by the viewer and create a link to the target file. Make sure that the directory is correct.

8> how can we ensure that the text on the webpage does not change with the font size of the browser?

As we all know, in the function settings of IE browser, there is a function that allows you to freely set the font size of the window content, so due to the habits of different visitors, the web pages displayed in front of them are sometimes different.

For example, you may have used the font no. 2 during the design. As a result, the extra settings of the browser become larger, and the display effect becomes worse.

The solution is to force the content of the webpage to a proper size. That is, he is not allowed to change. You can use CSS style sheets to forcibly control the font.

9> open the target link in a new window?

Open a new window, as the name implies, that is, open a browser window without overwriting the current window. You can add "target = _ blank" directly in the connection code ".

If your HTML is poor, this setting is also provided on the DW attribute panel. When you type the www url in the Link input box, the target drop-down box is also activated.

Select the top "blank.

PS: the JavaScript code for opening a new window is window. open ("Address of the page to be opened", "prompt information at the top of the page", "control of various pop-up windows, such as the size and position"), the specific Baidu, I also have space;

10> how to bring up an advertisement window like many commercial websites when loading a webpage

This is often seen on many large commercial websites. Behavior behavior can be easily implemented in DW.

Since it is loaded, we can regard the entire webpage content as an event object. In the DW editing window, click the "<body>" tab in the lower left corner. Then you can notice that all the webpage content has been selected.

Click the "behavior" button in the "Quick Start board" to enter the behavior panel and select the "open browse window" item. You can also customize the window style, such as the size, tool button retention and so on. Another point is that the corresponding event is "onLoad ".

11> my quick start board does not contain "timelines". What should I do?

After DW is upgraded to version 4, several new projects, such as assets, are added to the Quick Start board. At this time, the above timelins (timeline) button was squeezed down.

Of course, if you are eager to use it now, you can still find it through the menu "Windows"-"timelines. After all, it is better to put it in the boot board for convenience. In this case, we can add it through settings!

"Edit"-"preference" in the window, select "panels" (panel) in the project list on the left, and click the "+" icon above, select timelines from the drop-down list ". At this time, the timeline is automatically added to the current "show in launcher" list. OK. The changed "launcher" Panel

At the same time, you can freely select the button options in the panel as needed to improve work efficiency.

12> How can I create a webpage so that it can be automatically refreshed every 5 minutes?

When browsing the Internet, we often encounter some web pages. It will automatically refresh once when there is no response in a period of time. In addition to reminding visitors, when the new refresh address is not the current URL, it implements the automatic jump function.

Whether it is Refresh or automatic jump. In web design, all operations are quite practical. Next we will introduce their production methods.

Select the "head" section of the DW "object" Panel. Note that the "content" of common is displayed by default ".

Click the "refresh" button above. In the "delay" input box, enter the time (in seconds) for the refresh delay, and "action" indicates refreshing the specified target URL. Because the current page is refreshed, choose "refresh this document" directly.

13> how to define the key name of a webpage )?

Keywords play a role that cannot be ignored when you use a search engine to search webpages with appropriate content. Most search servers automatically detect whether new web pages are generated on the network at intervals and record them by keywords to facilitate user queries.

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

Similarly, in the "head" Panel, click the "keywords" button to enter the keywords that need to be defined one by one. Note that each keyword is separated by a comma (;), and there is no limit on the number of keywords.

PS: Add the following code to the Code: <meta name = "keywords" content = "keyword"/>

14> how to hide unnecessary tags in the editing window?

When a user inserts too many invisible elements into a webpage, a row of corresponding labels will be displayed at the top of the editing window, so that the user can find them at any time. Although these labels themselves do not affect the Display Effect in the browser, when there are more tags, the webpage content may have to be misplaced, which hinders the visual adjustment of the webpage to a certain extent, so how can we remove these things?

Go to the "preperence" Panel, select "invisibel elements" in the list, and deselect the "check mark" before the project you do not want to display, such as scripts.

15> Why does the Browser display content of the "Framework" not supported?

We know that there are many browser types, so the first thing we consider when designing a webpage is "Can this be displayed in different browsers ?". The Framework is an example!

To avoid this, you just need to add the following content to the source code.

<Body> <noframes> --- This page contains a frame structure. If you cannot display it properly, download a new browser version or change the mainstream browser --- </noframes> </body>

16> How do you avoid putting your webpage in the framework?

Poor people often steal the fruits of others' work. For example, they put the pages carefully crafted by others into their own frameworks as subpages.

So how can we avoid "theft" of our webpage content?

You only need to add the following code between

<Script language = "JavaScript"> <! --
If (self! = Top)
-->
</SCRIPT>

17> how to add comments?

The comment content, as its name implies, appears only as a description, so it does not appear on the webpage during browsing. It is used to mark important or complex code for quick and convenient discovery.

Go to the "invisibel" section of the "object" Panel (that is, invisible elements), and select the Insert "comment" button,

In "comment", type necessary information. In this case, if you return to the source code, you will see that these operations add only a piece of code in the following format:

<! -- This is the comment to be filled in -->

PS: The javascript annotation is: // The VB annotation method is :'

18> Why cannot I set the color of a horizontal line?

In DW, when the menu "insert"-"horizonal rule" is used to insert a horizontal line, you will find that the horizontal line color settings are not provided in the attribute panel, because the color attribute of the tag <HR> (HTML code of the horizontal line) is not supported in the earliest NC, DW does not set it.

If necessary, we can only change the source file directly.

<HR color = "color code">

19> How can I disable the function of the current window?

Here, we can first enter the text "Close the window", drag it with the mouse to select it, type "/" in the "Link" input box, and cut into the source code window, in the link code, type the event-onclick = "javascript: window. close (); Return false ;".

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

Of course, you can also replace the text "Close the window" with other objects, such as slice and buttons!

20> what about the window that is automatically closed at regular intervals?

The window closing function is mentioned above. How does one implement automatic closing now?

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

<Script language = "JavaScript"> <! --
SetTimeout ('window. Close (); ', 10000 );
--> </SCRIPT>

Set timeout is a function used to set the delay time. Here, 10000 indicates 10 seconds.

21> how to change the "shape" of the mouse in the browser "?

Generally, the mouse appears as an arrow in the browser. Can we change it to another style we like?

The CSS style sheet is used to change the Mouse shape in DW.

Choose "text"> "CSS style"> "Edit style sheet". The edit window of the style sheet is displayed, you can also click the CSS style button in the Quick Start board and click "new" to select the default "make M style ", at the same time, in the following define, make the style only apply to the current webpage document, "this document only ".

Select "extensing" from the list on the left of the "style definition" window, set it to "cursor" on the right, and select a proper shape from the drop-down menu, after confirmation, return and press F12 to observe the effect in the browser. If you are not satisfied, you can also modify the style.

22> How do I remove the underline in the link text?

After the link is created, the link text content is automatically added with an underline to indicate that the content contains a hyperlink. When there are too many links in a webpage, it seems a little messy. In fact, we can easily remove it.

Enter the "Edit style sheet" window and click "new" to create a new style. In the type field, select "redefine HTML Tag ", at the same time, select "A" representing the hyperlink in the specific tag, and click OK.

Edit the style. Select "type" in the left-side Navigation Pane and check the "NONE" check box in "decoration". The link text underscores in all webpages are cleared.

23> how can we make the mouse hover over the link text to produce discoloration, deformation, and other effects?

When visiting a website, the most common effect we encounter is "Mouse hover response". The so-called "Mouse hover response" is displayed on the link text, including changing the color, modifier effects (underline, dashes) and other options.

As this effect plays a very important role in the target content, both personal websites and some large commercial websites (such as Sina, Sohu, and Netease) have applications.

In the previous question, you already know how to remove the link underline. The following question is how to add a mouse to respond to an event.

Enter the "Edit style sheet" window and click "new" to create a new style. The difference is that the last option "use CSS selector" is selected for the current type ", select "A: hover" in the "selector" menu to enter the edit style window. Set the text color in the "type" item to "red ", of course, you can also add an underline when hovering over the mouse.

24> How to Make the background image of a webpage not scroll along with the content?

Background images are often added by many web designers. When the content of a Web page exceeds one screen, the background image of the scroll bar will scroll together with the content relatively static, can I lock the background and not scroll? Of course, you can go to the "Edit style sheet" window, click "new" to create a new style, select "redefine HTML Tag" in type, and select "body" in the tag menu ", select "background" in the list on the left ". Set "attachment" (Attachment) to "fixed ". Scroll indicates the Scroll display used by default.

25> you must know the background music. How can you add it?

In Microsoft's web page tool-FrontPage, if you have set the background music function, DW obviously does not do this. To use this function, you can only manually add it in the source code.

Before using it, remind everyone that you must pay attention to the size of webpage files when using background music.

The Code is as follows:

<Embed src = "music. Mid" autostart = "true" loop = "2" width = "80" Height = "30">

SRC specifies the location of the music file. autostart indicates the action after the music file is uploaded. True indicates that the video is automatically played, and false indicates that the video is not played (default value ).

27> How do I automatically add the modified date to the webpage?

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"

28> how to control the pop-up information?

Sometimes, when we click a link, some highlighted information is displayed, that is, the pop-up information. For example, if a link has not completed the creation of the target content page, you can apply the popup information to explain it.

Enter the link text in the appropriate position on the webpage, select, and create a link in the property panel. Click the "behavior" button on the Quick Start Panel while the status is still selected,

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

Set the mouse event (events) of the action to onclick ). In the browser, the preview effect is as follows.

29> how does one hide the URL Information of the status bar in a browser?

When you move the cursor over a link, the target address of the link is automatically displayed in the following status bar. Considering security issues, sometimes we need to reset it to "zero", that is, set it to blank.

Now, you only need to do some operations in the Link code,

<A href = http://hi.baidu.com/gxgao onmouseover = "window. Status = 'none'; return true"> butterfly garden </a>

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

By default, when a webpage is loaded, its address and other information are displayed in the status bar. Do you want to make it more attractive?

On the DW "behavior" behavior board, click "+" and select the "Text of Status Bar" option under "set text set, in the "set text of Status Bar" window, enter message information such as "welcome to this website-website management message.

31> how to create an email form processing method?

Form should be an essential element in web page interaction. form functions are due to information interaction. Therefore, form processing often involves the use of advanced network programming languages. You may say, wow! I cannot program it! It doesn't matter. In fact, some simple form content can be processed by email.

Let's take a look at the following code:

<Form name = "content" method = "Post" Action = "required handler"> </form>

The preceding figure shows the HTML source code of a typical form. The method determines the method, including post and get. Action, the processing program we mentioned above, can be implemented through ASP/PHP/CGI.

How can I use email? Action = mailto: XXX@163.com, so when the submit button is clicked, a prompt window pops up, And the click OK form content is sent to the specified mailbox.

32> how to create a standard email link?

The so-called "email link" means that when we click it, the browser will automatically call the default mail client, which is called by Cheng Xiaoyu, to steal the original mail client? /P>

Enter "problematic mail me", 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 = email from netizens & BC = Other email addresses & BCC = Other email addresses. Here, mailto is the mail link protocol, subject is the mail title, BC is the mail address that is copied at the same time, and BCC represents the dark delivery.

33> how to create an "Empty link "?

A blank Link means that there is no link to the linked object. In a blank link, the target URL is represented. That is to say, when creating a link, as long as the # mark is entered in the Link input box of the attribute board, it is an empty link.

The emergence of empty links involves many factors, such as some pages that are not completed on a regular basis, and in order to keep the page display consistent (the link style is different from the ordinary text style ), you can use it.

34> when you click an empty link, the page is often reset to the top. How can this problem be solved?

In the browser, when we click the blank link, it will automatically reset the current page to the first end, thus affecting users' normal reading content. Of course, we hope it will remain unchanged.

At this time, you can use the code "javascript: void (null)" to replace the original "#" mark. Let's look back and see that this problem has been solved.

35> How do I customize links that can jump freely on the page?

If you frequently subscribe to some free e-magazines online, you must be familiar with this "tag link". Using a list similar to a directory, you can easily jump to any part of the page, undoubtedly, it is designed specifically for "ultra-long content" Web pages.

First, determine the position to which the link points, that is, the position to stay after the screen jump. Go to the "Invisibles" section of the "object" Panel, select the target text, click the "insert named anchor" button, and type the label name in "anchor name", OK, in this case, a red dotted line is automatically displayed under the text to differentiate common text content. Note that they do not appear in the browser.

Then you can create a link. In the link input box of the attribute board, enter "# nchor name (the name just now )". Of course, if you want to point to a location on another page, you can also leave this little tail away.

36> What should I do if I have multiple links on one image at the same time?

This is what we usually call "image hot". Of course, there is another name in DW called "image hot zone ".

Select an image. In the lower left corner of the property panel, there is a "map" toolbar, with three buttons on the right to define different areas. Take the rectangle tool as an example, when you move your mouse over the image, it will be displayed in a "+" shape, which means you can drag left and right. After that, you can create links for multiple hotspot areas in sequence. Note that each region cannot overlap.

37> how do I create flip images that respond to mouse events?

In many web pages, we often see some topic titles. When the mouse slides out, they can become different. In fact, many of them are achieved through two different images, that is, the so-called "flip image" effect.

Of course, you must first prepare two images of the same size in advance to ensure that there is no visual discomfort during flip, click "rolover image" on the "object" Panel to bring up the "flip image Settings" window. Click "Browse" and follow the specified parameter to specify the addresses of riginal image and rolover image respectively, be sure to select the "preload rolover image" check box below. Otherwise, a certain download delay may occur when the mouse slides over, affecting the effect.

38> how do I make pictures of "flying in the sky?

On the homepage of many large commercial websites, you will often see a lot of AD images floating around the world. After clicking it, you can link to the specified address. In DW, this is achieved through timelines.

First, insert the target image in the webpage, select it, and click "timelins" in the Quick Start board to enter the "timeline" window. Right-click the position of the 1 frame timeline, select "add object". A blue line (1-15 frame by default) will appear on the timeline, and the camera will be parked at 15 frames. At the same time, the picture on the page will be moved to the final position of the motion.

Now a simple motion animation has been completed. You can adjust the twists and turns of the path by adding a keyframe in the middle. Click the right arrow above to preview the effect.

39> how do I create a "static floating" image on the page?

The so-called "static suspension" means that images always try to stay in a certain position on the webpage. Therefore, there is a visual sense of "going" along with the page, just like floating.

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

First, you must download the stav plug-in and put the two files in it (including the image file cross browser static division.gif and the webpage file cross browser static division.htm) to the DW installation directory configuration/objects/Common.

Restart DW. In the object panel, you will see that there are more Si items at the bottom, and select it to set the distance between the floating layer and the Left in the pop-up window, insert the specified content (the image here) to the layer.

40> How can text and image content coexist?

We all know that in DW, image objects usually occupy only one row, so the text content can only be in the position of a parallel line. How can we make the text appear around the image?

Select an image. in the upper-right corner of the property panel, you can see an "align" attribute menu and select "Left". Then, you will find that the text is evenly arranged on the right of the image.

41> how to connect multiple windows?

Panel Design has always been a major feature of DW. In dw4, many panels are used. How can we use it more efficiently? Window connection is a technical function that facilitates customization. Simply put, two or more panels can be placed in one window as needed. Click and drag the tab bar of a panel to the two panels. When you see a black border, release the mouse and the two panels are merged into one.

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

In DW, although the horizontal line is in the form of "line", it is not satisfactory when creating a thin line, mainly because it is too rough and has no need for detail!

Then, we can adopt a flexible method to implement table applications.

Insert a table with one row and one column in the webpage, set "cellpadding" and "cellspacing" of the table to "0", and set "bgcolor" of the cell to red, of course, you can also use other colors, "height" sets the height to 1.

The most critical step is to view the source code and remove "" from <TD> </TD>.

43> how do I create a square with a border of 1?

Obviously, we still need to set the table.

Maybe you will say, it's not easy! Create a table with one row and one column, and set its "border" value to 1. In fact, the table created in this way is not a square with a border of 1, but a large number of "rough!

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

44> How do I set different browsers to return different pages?

Different browsers support different technologies and effects. Therefore, the webpage we designed does not display normally or best in all browsers. In this case, it is necessary to judge the jump of the browser.

When you open a browser of different types or versions, you can return different pages to ensure normal browsing. Click "behavior" in the Quick Start panel, click "+", and select "Check browse" from the drop-down list ".

45> How are the objects that can be dragged on a webpage created?

When you visit a website, you will often see a lot of elements that can be dragged with the mouse, most of which are images. For example, an advertisement image blocks the content you want to browse, you can use the mouse to select and throw it to one side!

This effect is achieved through the "drag layer" action of the layer. Click "+" on the behavior panel and select "drag layer ", of course, you must make sure that the target layer is selected. After simple settings, you will be OK.