The first method: do a Web page to solve the problem (a bit longer)
It's frustrating if browsers change their browser settings, or because browsers are incompatible, making their own crafted pages "unrecognizable". Below we use the common tools of web-lovers Dreamweaver (hereinafter referred to as DW) For example, list several Web page making beginners more common page layout problem and solution, hope to help beginners.
One, eliminate any zoom browser window on the impact of the Web page
A hard work out of the Web page, in Full-screen state browsing all normal.
But after changing the size of the browsing window, the page becomes "unsightly", which is a noteworthy issue.
The root of the problem is also from the layout of the Web page, in the DW, the content of the Web page is usually achieved through the table, solve the problem of the table is more than half the success.
You should note that there are two different types of the high-width setting selection for the Table Properties panel in DW: percent and pixel values. The use of percentages will produce the problem mentioned earlier. The percentages mentioned here refer to the height or width of the table as a percentage of the area high or wide in the upper mark. If the width of a table cell is 600, there is another table embedded inside it, the table width is 50% of the table cell, the table width is 300, and so on, If a table is not embedded in another table cell, its percentage is relative to the width of the window at that time. In IE browser, if you change the size of the home page, the contents of the table will also be mangled and distorted, because the percentage of the table will change to the corresponding percentage width as the window size.
Naturally, the solution to this problem is to set the table width to a fixed width (that is, pixel values). In addition, if the outer table is set to a fixed width, the inner table can also use the percent setting appropriately. Clear this principle, if there are similar problems, we also know how to solve.
Second, to center the page
Speaking of window size will follow the path to the resolution of the problem, in 800x600 resolution of the page produced in the 1024x768 resolution of the machine open, the entire page will run to the left; 1024x768 resolution of the Web page in 800x600 resolution of the machine sometimes will become "unsightly." Do one of the two resolutions? It takes time and looks effortless. What do we do?
Now most netizens are still using 800*600 resolution, so we can generally take this resolution as the main, want to make the page in 1024*768, as long as the original code <body> after a tight add a sentence <center>,</body > before adding a sentence of </center> OK. But there are a few questions. This is to note that the first is the percentage of the problem, table, cell width unit is best to use pixel units, rather than percentages. such as width=770. If your table width is set to a percentage, then when you use pixels larger than 800x600, the page will widen so that the page may become distorted. Add leftmargin=0 to the <body> <body leftmargin=0> in this case, the width of the table that 800x600 supports is 780 pixels, and the scroll bar does not appear. One thing to note is that you can't use the layers in the DW to locate them.
<body topmargin=0 leftmargin=0>Third, define a fixed size of text
As we all know, in IE browser function settings, there is a freedom to set the window content font size function, so because of different visitors to the settings of different habits, the page presented in front of them sometimes will not be the same. For example, you may have designed the use of font number 2nd, the result of the user's additional settings for the browser, the larger, then your Web page may become "unsightly." Although it is not your fault, but the client is God.
If you use CSS style sheet technology from a Web page, this is not the case. Use the shortcut key "Shift+f11" to open the stylesheet CSS style editor, right-click in the window to perform the new CSS style ... command to create a new style sheet, and then select the Type option in the list given. Define the Text property parameters (the size of the general text selection 12px more appropriate). When you finish selecting the text in the page Editing window, click the new style sheet name to see that the selected text has changed. When previewing, try to define whether the text font size will change with the browser's choice of font size.
Four, let the Web page adapt to different browsers
The pattern of browsers is now a two-point world, one point is ie, another is Netscape, in the domestic IE has an absolute share, in this case we designed the Web page as long as compatible with it on the line, but Netscape in foreign countries still have a lot of people use, after all, it is a browser veteran.
Although there is no way to make all browsers compatible with the site, but as long as the attention of the following points, made out of the Web page in each browser can achieve a better display effect:
Do not mix layers and table layouts, if it is a parent-child relationship, such as a layer table, not within the scope of this principle.
Inline CSS is often problematic in Netscape Navigator, using a chain or inline type.
Sometimes you need to insert tables or transparent pictures in the empty layer to ensure the effect in Netscape Navigator.
For layers with only a few pixel widths or heights, use a picture instead.
Avoid using typesetting attributes that are not recommended by the organization and use CSS instead.
The second approach: make two pages for different resolutions
One is 800x600, one is 1024x768, in the page of 800x600 add code can be implemented to jump:
--------------------------------------------------
Solution resolution problem does not have this function in Dreamweaver, we can only join a section of JavaScript code manually. First, add the following code to the < head> and
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
