自动化工程师工作职责:,解决主页在不同浏览窗口下浏览兼容——百分数值相对定位的总结

解决主页在不同浏览窗口下浏览兼容——百分数值相对定位的总结
文章来源： 　　　　 2005-12-27 11:36:12
解决主页在不同浏览窗口下浏览兼容——百分数值相对定位的总结
近来随着计算机硬件的发展趋于成熟，显示器的屏幕尺寸越来越大，价格也越被容易接受了。因此，网页的设计制作也面临着一个多种尺寸窗口浏览兼容的问题被提了出来。本文介绍以百分数值相对定位的方式来解决这一问题的尝试，同时提出一种使用 Flash制作文字页面，满足无级变化窗口的兼容方式： 1.简单的表格排版：在表格当中使用百分宽度来定义，是一种最常见的方式。表格里面如果是纯文字，那就再简单不过了，随着屏幕展宽，每行的文字数目增加，也就自动填满了。如果遇到插有图形，可以利用图形的左、右排列形成绕排，也还是很圆满的。
2.整体布局不变化：上面的简单处理会产生文字的重新排列，如果要求整体布局都不变的情况，那就要借助一个变换文字样式的插件来协助处理。这个插件的名称：css_on_resolution.mxp 可以很方便地插入到 DW4或者 DW-MX中使用。比如选择三个 CSS样式表，它们当中每一个样式字体一个比一个大 1.28 倍，就可以满足比如 800、1024、1152以上三种浏览方式下匹配使用。当然，这里的文字变化是以“三级跳”的方式来满足不同窗口浏览的，因此只能使用标准的最大化窗口，不能在1024下仅仅开 800的窗口浏览。
3.图像的尺寸适应：在整体布局里面如果有图像，那么也得考虑它的尺寸百分数值定义。这种使用也有三种方式：
a.宽和高都按100%设置。这虽然有利于填满，但是会引起图像的变形。
b.仅仅设置一个宽度100%，高度缺省，能够保持原来图像的高、宽比例不变。
c.但常出现每个用户所用的浏览方式中设置不同的工具条，影响了实际窗口高度。因此又可以只设置高100%，宽度缺省。
4.层的居中：比如：left:25%; top:25%; width:50%; height:50% 可以定义一个窗口 50%宽和高的一个层居中。
5.层的嵌套：定义一个层，它的宽、高尺寸改成百分数定义（比如定义成为 left:0px; top:0px; width:98%;height:98%;） 。在这个层里面就有了居中属性，里面继续插入表格，插入图形，甚至插入 Flash图形页具备了层的所有属性，所用的尺寸可以是固定值，也可以都一律使用百分数定义；也就是说，把上面的三种方式嵌套在里面使用，用途最广泛，这种方式应用最多。
6.层的布局：如果想用两个层上、下（或左、右）并行布局而不重叠，可以这样：
第一个层 top:0px; height:8%;
第二个层 top:8%; height:92%;这样两个层就填满了整个高度的窗口。本页面的标题和它下面的图形两  个层排版就是这种方式。
不过这里要注意的是层里面的内容要小于它的高度设置，否则会产生自动撑开拉长高度，而产生相互重叠覆盖。如果有不定高度撑满情况，采用第五项，层的嵌套方式较为适宜。
7.几个特色应用：
a.层的百分数值定义不适应于有移动特色的层，特别是 left， top 定义。这样，如何发挥比如时间线的应用呢？本页面上方的那三个图标的动作采用了时间线，怎么保证它们也适合大小窗口的变化呢？可以采用第四项，先做一个居中的层，然后在这个居中层里面嵌套时间线构成的、具有运动特色的层。这样虽然不能完全意义上的大小窗口兼容，但起码保持了居中。
b.如果需要一个层需要随着表格可以高度自动填充拉长而变化其位置，又如何？可在表格中嵌套一个层，将其 left， top 去掉定义，这个层就跟随着表格的当前位置拉动而变化了。进一步，在这个层里面再嵌套其它的相对于这个层的有定义位置的层，也都具备了跟随拉动的属性了。
8.使用 Flash制作相对定位页面：前面已经提到文字变化的“三级跳”使得窗口不能随意在不标准情况下变化，这里将解决这一问题：使用 Flash做以文字为主的页面。在 Flash当中文字的选项之中有一个 Use Device Fonts 参数，选中了它可以使得文字内容直接调用系统的字库，与一般 HTML 页面中使用文字相像，不会过于增加画面的字节尺寸。利用这一点，好象在 FW 中直接制作页面一样，完成整体页面的设计。然后放在一个 HTML 页当中，同时以百分数值定义它的高与宽，这样做也可以保持布局的整体效果在不同浏览窗口下不变化。当然，文字也可以随着窗口的大小而跟随伸缩，附带说一点：这里的文字还不大容易被拷贝，也算是一大优点。当然也非十全十美，对于中英文混排的时候，竖向排列有点不太整齐，暂时只能用全角英文解决。请看样例：http://www.zqihua.com/mx1.htm