Collected some questions about Web Design

Source: Internet
Author: User
Q: How can I make the Layer Float on flash?

A: Set the SWF file to transparent background on the webpage. The specific method is as follows:
In DW, In the properties Panel of the SWF file, click parameters, add the wmode parameter, and select transparent;
You can also directly modify the webpage code and add it to the code that marks the SWF file property:
<Param name = "wmode" value = "Transparent">
Note that this effect is only supported by IE.

Q: How can I keep an image or table centered horizontally and vertically on the page?

A: First insert a table with one row and one column, set its width to 100%, its height to 100%, and its border to 0.

Set the cell attributes and set the horizontal and vertical alignment of the content to center.

At last, insert an image or table in the cell to keep the content displayed in the center of the page both horizontally and vertically.

Q: What should I do if the text in the table does not wrap automatically?

A: There are two possible cases:

First, you use CSS to set the font of the text in the table to an English font. In this way, the text in the Table in DW does not automatically wrap, but this is only the Display Effect in DW, in ie, the line feed is normal. If you want to enable automatic text wrapping in the DW editing status, set the text font in the table to a Chinese font (for example, "").

Second, you enter English or numbers without spaces in the Table. ie recognizes them as a complete word, so they do not wrap automatically. In this case, you can use CSS to forcibly scatter text, for example:
<TD style = "word-break: Break-all"> ...... </TD>

Q: the background music cannot be played continuously due to page switching. How can I make it play continuously?

A: use frame separation to set the display height (or width) of a frame to 0 and set the background music, the page switching in another frame does not affect the playing of the whole background music.

Example:
<HTML>
<Head>
<Title> framework page </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
</Head>

<Frameset rows = "0, *" frameborder = "no" border = "0" framespacing = "0">
<Frame name = "topframe" scrolling = "no" noresize src = "bgsound.htm">
<Frame name = "mainframe" src = "main.htm">
</Frameset>
<Noframes>
<Body bgcolor = "# ffffff" text = "#000000">
Sorry, your browser does not support frame display.
</Body>
</Noframes>
</Html>
Q: How to Create a translucent layer?

A: First define a CSS style:
<Style type = "text/CSS">
<! --
. Halfalpha {background-color: #000000; filter: alpha (opacity = 50 )}
-->
</Style>

Then the application is in the layer label:
<Div class = "halfalpha">

Q: What should I do if the layer is misplaced under different resolutions?

A: solution 2:
1. The page is displayed on the left;
2. Use the relative positioning of the layer. You can refer to this article for relative positioning:
[Url] http://www.windstudio.net/tech/show.asp? Id = 37 [/url]

Q: How can I "set as Homepage" and "add to Favorites" be implemented "?

A: Set it to the Home Page:
<A href = "#" onclick = "this. style. behavior = 'url (# default # homepage) '; this. setHomePage ('HTTP: // www.windstudio.net '); "> set as homepage </a>

Add to favorites:
<A href = "javascript: window. external. addFavorite ('HTTP: // www.windstudio.net ', 'windy days bring you a fresh design Wind') "> Add to favorites </a>

Q: How do I create a thin-line table?

A: thin border of tables

Method 1: Set cellspacing to 1 and cellpadding and border to 0, respectively filling the background color of the table and the background color of cells. Example:
<Table width = "550" border = "0" cellspacing = "1" cellpadding = "0" bgcolor = "#666666">
<Tr bgcolor = "# ffffff">
<TD> </TD>
</Tr>
<Tr bgcolor = "# ffffff">
<TD> </TD>
</Tr>
</Table>

Method 2: Set cellspacing, cellpadding, and border to 1 and set the border color of the table and the border color of the internal cell respectively, make sure that the border color of the internal cell is the same as the webpage background color or table background color, so that the internal border looks like a combination of the background color. Example:
<Table width = "550" border = "1" cellspacing = "1" cellpadding = "1" bordercolor = "#666666">
<Tr bordercolor = "# ffffff">
<TD> </TD>
</Tr>
<Tr bordercolor = "# ffffff">
<TD> </TD>
</Tr>
</Table>

Method 3: Use CSS to define the Border width of a table as 1 pixel. First set the CSS class Table1 {border-top: 0px; border-Right: 0px; border-bottom: 0px; border-left: 0px }, then add class = "Table1" in the <Table> label ".

Method 4: create a large image, such as a table, as the background of the table, especially when you want to trim the edge of the table.

Q: How to install and use the. mxp format DW plug-in?

A: The plug-in manager is required. dw4 has integrated the plug-in manager without additional installation. Dw3 needs to be installed separately. You can download it from the cool soft download section on this site.

After installing the plug-in Manager, double-click the. mxp file and select Yes. The plug-in will be automatically installed in DW, so that you can find the plug-in the DW menu.

Note that different types of plug-ins will be found in different DW menus or panels. The plug-in manager will tell you the type, function, and usage of the plug-in (object, command, behavior, or other.

Q: How to open a full screen ie window?

A: implemented using JavaScript:

Definition process:
<Script language = "JavaScript">
<! --
Function machakfull (ie, other ){
X = screen. availwidth;
Y = screen. availheight;
Target = parsefloat (navigator. appversion. substring (navigator. appversion. indexof ('.')-1, navigator. appversion. Length ));
If (navigator. appversion. indexof ("Mac ")! =-1) & (navigator. useragent. indexof ("MSIE ")! =-1) & (parseint (navigator. appversion) = 4 ))
Window. Open (other, "sub", 'rollbars = yes ');
If (target> = 4 ){
If (navigator. appname = "Netscape "){
VaR machakfull = Window. open (other, "machakfull", 'rollbars = yes', 'width = '+ x +', Height = '+ Y +', Top = 0, left = 0 ');
Machakfull. moveTo (0, 0 );
Machakfull. resizeTo (x, y );}
If (navigator. appname = "Microsoft Internet Explorer ")
Window. Open (ie, "machakfull", "fullscreen = yes ");
}
Else window. Open (other, "sub", 'rollbars = yes ');
}
// -->
</SCRIPT>

Call the function:
<A href = "javascript:;" onclick = "machakfull('index.htm','') "> click here to open a full screen window </a>

Q: How to create an infinite pop-up window for IE?

A: This kind of window is called chromeless window, which can be achieved with a DW plug-in.
Plug-in name: chromeless window perfect correction
: [Url] http://www.windstudio.net/dw/files/c..s_win_wind.mxp#/url]

Q: How to remove the browser's "scroll bar "?

A: <body scroll = NO>

Remove the horizontal scroll bar:
<Body style = "overflow-X: hidden">
Remove the vertical scroll bar:
<Body style = "overflow-Y: hidden">

Q: How can I display the drop-down list link in a new window?

A: <select name = "designlink" onchange = "window. Open (this. Options (this. selectedindex). Value);">
<Option selected> Design site link </option>
<Option value = "http://www.windstudio.net"> WAF tiger website </option>
<Option value = "http://www.blueidea.com"> tiger wilting Forum </option>
<Option value = "http://www.colorbird.com"> technical article </option>
</SELECT>

Q: How to achieve two different link effects?

A: set different classes in CSS, for example:
A. W1: link {text-Decoration: none; color: #000066}
A. W1: visited {text-Decoration: none; color: #333333}
A. W1: hover {color: # 0000ff; text-Decoration: underline}
A. W2: link {text-Decoration: none; color: #000066; font-weight: bold}
A. W2: visited {text-Decoration: none; color :#000066; font-weight: bold}
A. W2: hover {color: # ff0000; font-weight: bold}

Different links call different CSS classes, for example:
<A href = "#" class = "W1"> 123 </a>
<A href = "#" class = "W2"> 456 </a>

You can also directly operate in DW, for example:
1. Open the CSS style panel and select use CSS selector.
2. Select a: Link to define the style. then select a: hover to define the style.
3. Create a link style A. W1 in the same way (the name can be any): link and A. W1: hover
4. The style created in step 2 is automatically written to the document by default. When the second style is required, select the link text, right-click the shortcut menu and select the new style (the style created in step 3 is W1.

Q: How can I use CSS to change the mouse pointer style?

A: <span style = "cursor: X"> </span>

Here, you can select cursor (text) as the object and change it to another one, such as link.
X can be equal to = hand, crosshair (Cross), text (Text cursor), wait (as the name suggests), default (default effect), help (question mark) e-size (right arrow), Ne-resize (right arrow), NW-resize (left arrow), w-resize (left arrow) sw-resize, S-resize, Se-resize, auto)

Q: How can I solve the problem that dw4 cannot use the five-stroke input method?

A: select Edit → preferences from the menu, select general from the category list, and deselect the check box enable double-byte inline input. After you cancel the check box enable double-byte inline input, all Chinese input methods (including the five-stroke input method v4.5) will return to normal!

Q: How to center the page generated at 800*600 resolution under 1024*768?

A: place the page content in a large table with a width of 778 and set the large table to center horizontally. Set the width to 778 so that the horizontal scroll bar does not appear in the window at 800*600. You can also adjust it as needed.

To accelerate the display of key content, you can also split the content and place it in several vertically connected large tables ~~

In addition to using tables, you can enclose the parts to be centered with <Div align = center> and </div> labels.

Q: How can I achieve link jump between different pages without changing the display address in the IE Address Bar?

A: Use sharded frames to define the display height (or width) of a frame as 0. In this way, the other part jumps to the frame through the link, to jump out of this frame splitting, set the target = "_ top" of the link ~~

Example:
<HTML>
<Head>
<Title> framework page </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
</Head>

<Frameset rows = "0, *" frameborder = "no" border = "0" framespacing = "0">
<Frame name = "topframe" scrolling = "no" noresize src = "blank.htm">
<Frame name = "mainframe" src = "main.htm">
</Frameset>
<Noframes>
<Body bgcolor = "# ffffff" text = "#000000">
Sorry, your browser does not support frame display.
</Body>
</Noframes>
</Html>

Q: What are the absolute and relative addresses? Absolute and relative positioning?

A: absolute address: An address such as [url] http://www.windstudio.net/index.htm#/url] or file: // D:/homepage/index.htm is the absolute location of the file on the network or local;

Relative address: the address of the linked file relative to the current page. For example, you only need to use "file name" for the file address at the same level as the current page; use "directory name/file name" to link the files under the subdirectories of the current page; Use ".. /file name "; link to the same level but use" .. /directory name/file name "; you can use". /file name.

In fact, it is absolutely and relatively easy to understand. It is definitely a fixed object with a reference.

Why do we advocate relative addresses? To put it bluntly, if you have an index.htm file that references some images in the images directory, and if you use a relative address, you only need to upload all the original items to the new space during migration, because the relative positional relationship between Files remains unchanged, these addresses are still valid. However, if an absolute address is used when an image is inserted, the address of the space changes and the path of the referenced image changes accordingly. Of course, absolute addresses are sometimes used, such as links to others' homepages.

The same is true for relative positioning. If the layer is located relative to a cell, where the cell moves, the layer will be located. Combined with this Article "relative to absolute positioning of the layer", it can solve the problem that the layer is difficult to adapt to multiple resolutions:
[Url] http://www.windstudio.net/tech/show.asp? Id = 37 [/url]

From a dialectical point of view, absolute positioning is actually relative. The difference between it and what we call relative positioning is that the absolute positioning of layers is relative to the left border and upper border of the browser, the relative positioning of a layer is relative to its carrier (table or another layer ~~

Q: How do I cancel the underline Of a link?

A: Use CSS to implement:
<Style type = "text/CSS">
<! --
A: link {text-Decoration: None}
A: visited {text-Decoration: None}
A: hover {text-Decoration: None}
-->
</Style>
A: link indicates the general link style, A: visited indicates the accessed link style, and a: hover indicates the link style when the mouse passes. Text-Decoration: None indicates no underline, text-Decoration: underline indicates underlined.

If the three link states have the same style, you can also simplify it:
<Style type = "text/CSS">
<! --
A {text-Decoration: None}
-->
</Style>

Q: Why is setting the cell height to 1 in DW ineffective?

A: When DW generates a table, it will automatically fill in a code in each cell, that is, the Space Code. If this code exists, if you set the cell width or height to 1, the cell will have no effect. during actual preview, the Cell will occupy a width of about 10 PX.

If you remove the code and set the cell width or height to 1, you can see the expected results in IE. However, in NS (Netscape), this cell is not displayed, as if a table is missing. Put a transparent GIF image in the cell, and set its width and height to 1, so that it can be compatible with IE and NS at the same time.

Q: Why does a background image set for a cell in DW sometimes not be seen in IE?

A: If the background image is set in <tr>, the image cannot be displayed during actual preview. I think this should be a DW bug, you just need to manually transfer the background image settings code in <tr> to <TD>.

Q: How can I change the background color of a table when the mouse passes?

A: <Table width = "100" border = "0" cellspacing = "1" cellpadding = "0" bgcolor = "#000000">
<Tr>
<TD onmouseover = "style. backgroundcolor = '# cccccc' "onmouseout =" style. backgroundcolor = '# ffff' "align =" center "bgcolor =" # ffffff "> background color change </TD>
</Tr>
</Table>

Convert a webpage to a traditional version

I want to make the web pages have both simplified and traditional versions. Now I have completed the simplified version. How can I convert them into traditional versions?

A: The conversion function is available in Dreamweaver. Select "Modify → page properties" to open the page owner.
In the document encoding window, select "Traditional big5 code. However, this method is too troublesome and does not support batch conversion. We recommend that you use the convertz software. It is a small tool used to convert GBK/big5 internal code. It supports batch conversion of large numbers of files and conversion of the text content in the clipboard.

How to Create Table dotted lines

Some Web tables are not solid lines, but dotted lines. The tables only seem to have solid lines. How can I create dotted lines?

A: You can set a 1 × 2 graph in the background of the table, which is half-black and half-white. Another way is to use CSS to create a style, select "redefine HTML Tag", select "table" from the drop-down menu, and select "border" from "category" in the pop-up dialog box ", set Top, left, right, and bottom to 1px and the color of the border you want. Select "Dashed" in the "style" drop-down box and click "OK ". In this way, all tables become dotted lines.

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.