网页布局问题以及解决方法（初学者必看）(2)_建站学-个人建站指南,网页制作,网站设计,网站制作教程

三.网页布局的技术
　　1.层叠样式表的应用
　　在新的HTML4.0标准中，CSS(层叠样式表)被提出来，它能完全精确的定位文本和图片。CSS对于初学者来说显得有点复杂，但它的确是一个好的布局方法。你曾经无法实现的想法利用CSS都能实现。目前在许多站点上，层叠样式表的运用是一个站点优秀的体现。你可以在网上找到许多关于CSS的介绍和使用方法。当然，日趋炙热的WEB标准（XHTML+CSS）开是强烈推崇内容和表现相分离，并为下一代数据交换XML做为过渡（即XHTML）。
　　2.表格布局
　　表格布局好像已经成为一个标准，随便浏览一个站点，它们一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响。对于表格布局，你可以随便找一个站点的首页，然后保存为HTML文件，利用网页编辑工具打开它(要所见即所得的软件)，你会看到这个页面是如何利用表格的。
　　3.框架布局
　　不知道什么原故，框架结构的页面开始被许多人不喜欢，可能是因为它的兼容性。但从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。
　　我今天来介绍的布局指南并不是全部的网页布局技术，从某种意义上来说，我想引导你在制作网页的时侯，怎样把图片和文本放置的恰到好处，而且如何拥有一个跳越的设计思维。

如果使用了网页中的CSS样式表技术，就不会出现上述情况了。使用快捷键"Shift F11"打开样式表"CSS style"编辑器，在窗口中单击鼠标右键执行"New CSS style..."命令新建一个样式表，然后在给出的列表中选择"类型"选项，定义文字属性参数（一般文字的大小选择12px较为适宜）。完成后选择网页编辑窗中的文本，单击新的样式表名称，可以看到选中的文本发生了变化。预览时试试定义的文本字体尺寸还会不会随浏览器的选择字体大小而改变。

　　四、让网页适应不同的浏览器

　　浏览器的格局现在是两分天下，一分是IE，另一分是NetScape，在国内Ie有绝对的占有率，在这种情况下我们设计的网页只要兼容它就行了，但NetScape在国外还是有很多人使用，毕竟它是浏览器的元老。

　　虽然没有办法做出让所有浏览器都兼容的网站，但只要注意以下几点，做出来的网页在各个浏览器都中能达到比较好的显示效果：

　　不要混合使用层和表格排版，如果是父子关系，如层中表格，不在此原则范围内。

　　内联式的 CSS 在 Netscape Navigator 中经常会出现问题，使用链式或内嵌式。

　　有时需要在空层插入表格或者透明图片，以保证在 Netscape Navigator 里的效果。

　　对于只有几个像素宽度或高度的层，改用图片来实现。

　　避免使用 W3C 组织不推荐的排版属性，用 CSS 代替。

　　第二种方法：做两个适合不同分辨率的页面

　　一个是800×600，一个是1024×768，在800×600的页面中加入一下代码就可以实现跳转了：

　　--------------------------------------------------
?
?? 解决分辨率问题在Dreamweaver中没有此项功能，我们只能手动加入一段Javascript代码。首先在change－ie.html或change－nc.html页面代码中的< head>和< /head>中加入以下代码：

?? < script language=JavaScript>
?? < !－－
?? function redirectPage(){
?? var url800x600=〃index－ie.html〃; //定义两个页面，此处假设index－ex.html和1024－ie.html同change－ie.html在同一个目录下
?? var url1024x768=〃1024－ie.html〃;
?? if ((screen.width==800) ＆＆ (screen.height==600))　//在此处添加screen.width、screen.height的值可以检测更多的分辨率
?? window.location.href= url800x600;
?? else if ((screen.width==1024) ＆＆ (screen.height==768))
?? window.location.href=url1024x768;
?? else window.location.href=url800x600;
?? }
?? // －－>
?? < /script>
?? 然后再在< body…>内加入onLoad=〃redirectPage()〃
?? 最后，同样地，在< body>和< /body>之间加入以下代码来显示网页的工作信息：
?? < script language=JavaScript>
?? < !－－
?? var w=screen.width
?? var h=screen.height
?? document.write(〃系统已检测到您的分辨率为:〃);
?? document.write(〃< font size=3 color=red>〃);
?? document.write(w＋〃×〃＋h);
?? document.write(〃< /font>〃);
?? document.write(〃正在进入页面转换,请稍候…〃);
?? // －－>
?? < /script>

该文章来自《中国德育资源网》详情见 http://www.516xz.cn/Article/wlkt/wzsj/jswz/200711/4998.html

(责任编辑：admin)

搜索

热门标签:

网页布局问题以及解决方法（初学者必看）(2)