Solve the homepage to browse compatible with different browsing windows - Summary of relative positioning percentage value
Recently, as the development of computer hardware is mature, the screen size of the display is getting bigger and larger, the more it is easily accepted. Therefore, the design and production of the web page is also facing a variety of dimensional window browsing compatible issues. This article describes the attempt to solve this problem in a percentage of relative positioning. At the same time, a compatibility way to use Flash production text page, meet the continuously variable window: 1. Simple Table Type: Use percentage in the form To definition is the most common way. If it is a pure text in the form, then it is simple, as the screen is wide, the number of words in each line is increased, and it is automatically filled. If you encounter a graphic, you can use the left and right arrangement of the graph to form a winder, or it is still very satisfactory.
2. Overall layout does not change: the simple handling of the above generation generates a rearrangement of text, and if the overall layout is not changed, then it is to assist in the handover plug-in plug-in. Name of this plugin: CSS_ON_RESOLUTION.MXP can be easily inserted into DW4 or DW-MX. For example, in three CSS style sheets, each of them is 1.28 times a larger than one than one, such as 800, 1024, 1152, and three browsing methods. Of course, the text change here is to meet different windows in a "three-level jump", so it can only use the standard maximum window, and cannot only open only 800 windows in 1024.
3. Image size adaptation: If there is an image in the overall layout, it is also possible to consider its size percentage value definition. There are also three ways of this use:
a. Wide and high are set up 100%. This is conducive to filling, but will cause deformation of the image.
b. Only one width is 100%, the height is default, and the original image can be maintained, the proportion is unchanged.
c. But there is often a different tool bar in the browsing method used by each user, which affects the actual window height. Therefore, it can be set to only 100%, the width is default.
4. Case of layers: such as: Left: 25%; TOP: 25%; Width: 50%; Height: 50% can define a window 50% wide and high.
5. Nested layers: Define a layer, wide, high-dimensional change to a percentage definition (for example, it is defined as Left: 0px; top: 0px; width: 98%; Height: 98%;). In this layer, there is a hidden attribute in this layer, continue to insert a table, insert graphics, and even insert the flash graphic page with all the properties of the layer, the size can be a fixed value, or it can be used to use a percentage definition; otherwise, Netting the above three ways is used inside, the most useful use, this way is the most application.
6. Layout layout: If you want to use two layers, lower (or left, right) parallel layout without overlap, so you can:
The first layer TOP: 0px; height: 8%;
The second layer TOP: 8%; Height: 92%; so that two layers filled with the entire height window. The title of this page and the two layers below it are this way.
However, it should be noted here that the content inside is less than its height setting, otherwise the automatic supporting elongation height is generated, and the overlapping overlapping is produced. If there is an unstable high, the fifth item is adopted, the nesting method of the layer is relatively appropriate.
7. Several features:
a. The percentage value definition of the layer is not suitable for layers with moving features, especially left, top definitions. In this way, how to play, such as timeline applications? The three icons above this page use timeline, how to ensure they are also suggested for changes in the size window? Fourth items can be used, first do a homogeneous layer, and then in this middle-level nesting, there is a layer of motion characteristics. This does not have a full sense of the size window, but the at least remains in. b. If a layer needs to change with the table with the table, how is it possible to change its position? A layer can be nested in the table, remove its Left, TOP to define, this layer changes with the current position of the table. Further, in this layer, the layer of defined positions with respect to this layer is nestled in this layer also has the properties that follow the pull.
8. Use Flash to make a relative positioning page: "Three-level hops" that have been mentioned in front have enabled the window to change freely without standardization, here will solve this problem: Use Flash to do text-based pages. There is a USE Device Fonts parameter in the option of the Chinese word, select it to make the text content directly call the system's font, use text as a general HTML page, and will not increase the byte size of the picture. With this, it seems that the page is created directly in the FW, complete the design of the overall page. Then place it in an HTML page, and the high and width it is defined at the percentage value, which can also keep the overall effect of the layout in different browsing windows. Of course, the text can also follow the size of the window, with a point: The text here is not easy to copy, and it is a great advantage. Of course, it is also not very full, for the middle and English mixing, the vertical arrangement is a bit less uniform, and it can only be solved in all directions. Please see the sample: http://www.zqihua.com/mx1.htm
