论文部分内容阅读
【摘要】本文从网页信息传播角度提出网页对客户端分辨率的适应问题,将解决方法归纳为表格嵌套、让网页居中、固定文字大小和调用适合不同分辨率的网页。
【关键词】自适应客户端分辨率
【中图分类号】TP393.092【文献标识码】A【文章编号】1006-9682(2010)04-0080-02
网页是现代信息传播的媒介,网页在客户端的显示效果直接关系到信息传播的有效性。那么如何让自己的网页自动适应浏览者的显示分辨率,让浏览者能够看到一个排版美观正确的网页呢?下面笔者分别介绍几种常用的方法:
一、表格嵌套设置
一番辛苦做出来的网页,在全屏状态下浏览一切正常。但当分辨率调整时,窗口尺寸发生变化,导致表格被压缩或拉伸,显示位置发生变化,从而影响了网页的整体显示效果。
问题的根源在于网页的布局,在DreamWeaver中,表格是目前网页制作大量使用的手段之一,也是影响网页信息传达的主要因素,解决了表格的问题也就成功了大半。
在DreamWeaver中,表格属性面板的高宽单位设定提供了两种不同类型:百分比和像素值。百分比的使用将会产生前面说到的问题。这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比,如在一个表格单元的宽度是600,在它里面嵌入了另外一个表格,表格宽度占表格单元的50%,则这个表格的宽度为300,依此类推,如果一个表格不是嵌于另一个表格单元中,则其百分比是相对于当时窗口的宽度的。IE浏览器中,随便改动主页窗口的大小时,表格的内容也随之错位、变形,就是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。
解决问题的办法是采用简单的表格嵌套,即内层表格以较小的固定尺寸(像素值)居中显示,确保传递效果的实现,外层表格则作为背景按百分比居中显示。既保证了所传递信息的有效性,同时又能自动保证网页有一个良好的外观。
二、让网页居中
如果在800×600分辨率下制作的网页在1024×768分辨率的机器上打开,整个网页就会显示在左边;而1024×768分辨率的网页在800×600分辨率的机器上打开,有时会变得“不堪入目”。若将两种分辨率各做一个,既费时又费力,那么如何解决呢?
以现在大多数网民使用的800×600的分辨率为例,若想让网页在1024×768分辨率时居中,可使用以下方法:
1.在网页原代码的后紧加一句,前加一句 或在DreamWeaver设计窗口选中最外层的表格,在其属性面板中设置它的对齐方式为“居中”。
注意:表格、单元格的宽度单位要使用像素单位,而不要用百分比。如果表格宽度设的是百分比,那么使用大于800×600的像素时,网页就会拉宽,这样网页可能会变形。
2.在中加入leftmargin=0,即这种情况下,800×600支持的表格宽度为780像素时不会出现滚动条。
注意:不能用DreamWeaver中的层来定位。
三、使用CSS样式固定文字的大小
CSS(Cascading Style Sheet)即层叠样式表,它是一系列格式规则,主要用来控制网页内容的外观。使用CSS样式可以非常灵活并精确地控制网页外观,如CSS可以精确确定网页布局、字体和表格样式等。CSS的这些特点使其在网页制作中被广泛的应用。在网页中加入样式表的方法有内部嵌入方式和外部链接方式。其中外部链接方式就是让网页调用独立的CSS文件用以控制网页显示的外观,这种方式为实现网页对分辨率的自动适应提供了可能性。
众所周知,在IE浏览器的功能设置中,有一个可以自由设置窗口内容字体大小的功能,这样由于不同访问者的设置习惯不同,呈现在他们面前的网页有时也会不相同。比如你可能本来设计时用的是2号字体,结果由于用户对浏览器的额外设定,变的更大了,这时你的网页也可能变得“不堪入目”。
如果使用了网页中的CSS样式表技术,就不会出现上述情况了。使用快捷键“Shift+F11”打开样式表“CSS style”编辑器,在窗口中单击鼠标右键执行“New CSS style…”命令新建一个样式表,然后在给出的列表中选择“类型”选项,定义文字属性参数(一般文字的大小选择12px较为适宜)。完成后选择网页编辑窗中的文本,单击新的样式表名称,可以看到选中的文本发生了变化。预览时试试定义的文本字体尺寸是否还会随浏览器的选择字体大小而改变。
四、调用适合不同分辨率的页面
用脚本判断分辨率,并跳转到不同分辨率的网页。
做两个适合不同分辨率的页面,一个是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>
该方案适用于资讯量较小的网站,不然后维护需要两套系统,比较繁琐。
五、结束语
上述方法在实现上各有千秋。前三种方法比较适合流行的显示器设置,但操作相对简单且不需要对分辨率进行检测,因而网页载入延时较小;后者适用范围较广,但需要准备多个可供调用的网页文件,因而网页制作工作量加大,同时该操作需要侦测终端显示器的分辨率,网页显示上存在一定的延时,但却可准确表达网页信息。四种方法虽有不同,但却有着共同的特点,即都能够自动适应浏览者的显示器分辨率设置,从而都可保证网页信息的有效传播,具有广泛的应用性。
参考文献
1 胡耀芳、赵祖荫.网页设计与制作实验教程.北京:清华大学出版社,2008
2 于巧娥、何金奎.网页设计与制作教程与实训.北京:北京大学出版社,2006
【关键词】自适应客户端分辨率
【中图分类号】TP393.092【文献标识码】A【文章编号】1006-9682(2010)04-0080-02
网页是现代信息传播的媒介,网页在客户端的显示效果直接关系到信息传播的有效性。那么如何让自己的网页自动适应浏览者的显示分辨率,让浏览者能够看到一个排版美观正确的网页呢?下面笔者分别介绍几种常用的方法:
一、表格嵌套设置
一番辛苦做出来的网页,在全屏状态下浏览一切正常。但当分辨率调整时,窗口尺寸发生变化,导致表格被压缩或拉伸,显示位置发生变化,从而影响了网页的整体显示效果。
问题的根源在于网页的布局,在DreamWeaver中,表格是目前网页制作大量使用的手段之一,也是影响网页信息传达的主要因素,解决了表格的问题也就成功了大半。
在DreamWeaver中,表格属性面板的高宽单位设定提供了两种不同类型:百分比和像素值。百分比的使用将会产生前面说到的问题。这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比,如在一个表格单元的宽度是600,在它里面嵌入了另外一个表格,表格宽度占表格单元的50%,则这个表格的宽度为300,依此类推,如果一个表格不是嵌于另一个表格单元中,则其百分比是相对于当时窗口的宽度的。IE浏览器中,随便改动主页窗口的大小时,表格的内容也随之错位、变形,就是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。
解决问题的办法是采用简单的表格嵌套,即内层表格以较小的固定尺寸(像素值)居中显示,确保传递效果的实现,外层表格则作为背景按百分比居中显示。既保证了所传递信息的有效性,同时又能自动保证网页有一个良好的外观。
二、让网页居中
如果在800×600分辨率下制作的网页在1024×768分辨率的机器上打开,整个网页就会显示在左边;而1024×768分辨率的网页在800×600分辨率的机器上打开,有时会变得“不堪入目”。若将两种分辨率各做一个,既费时又费力,那么如何解决呢?
以现在大多数网民使用的800×600的分辨率为例,若想让网页在1024×768分辨率时居中,可使用以下方法:
1.在网页原代码的后紧加一句
注意:表格、单元格的宽度单位要使用像素单位,而不要用百分比。如果表格宽度设的是百分比,那么使用大于800×600的像素时,网页就会拉宽,这样网页可能会变形。
2.在中加入leftmargin=0,即这种情况下,800×600支持的表格宽度为780像素时不会出现滚动条。
注意:不能用DreamWeaver中的层来定位。
三、使用CSS样式固定文字的大小
CSS(Cascading Style Sheet)即层叠样式表,它是一系列格式规则,主要用来控制网页内容的外观。使用CSS样式可以非常灵活并精确地控制网页外观,如CSS可以精确确定网页布局、字体和表格样式等。CSS的这些特点使其在网页制作中被广泛的应用。在网页中加入样式表的方法有内部嵌入方式和外部链接方式。其中外部链接方式就是让网页调用独立的CSS文件用以控制网页显示的外观,这种方式为实现网页对分辨率的自动适应提供了可能性。
众所周知,在IE浏览器的功能设置中,有一个可以自由设置窗口内容字体大小的功能,这样由于不同访问者的设置习惯不同,呈现在他们面前的网页有时也会不相同。比如你可能本来设计时用的是2号字体,结果由于用户对浏览器的额外设定,变的更大了,这时你的网页也可能变得“不堪入目”。
如果使用了网页中的CSS样式表技术,就不会出现上述情况了。使用快捷键“Shift+F11”打开样式表“CSS style”编辑器,在窗口中单击鼠标右键执行“New CSS style…”命令新建一个样式表,然后在给出的列表中选择“类型”选项,定义文字属性参数(一般文字的大小选择12px较为适宜)。完成后选择网页编辑窗中的文本,单击新的样式表名称,可以看到选中的文本发生了变化。预览时试试定义的文本字体尺寸是否还会随浏览器的选择字体大小而改变。
四、调用适合不同分辨率的页面
用脚本判断分辨率,并跳转到不同分辨率的网页。
做两个适合不同分辨率的页面,一个是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>
该方案适用于资讯量较小的网站,不然后维护需要两套系统,比较繁琐。
五、结束语
上述方法在实现上各有千秋。前三种方法比较适合流行的显示器设置,但操作相对简单且不需要对分辨率进行检测,因而网页载入延时较小;后者适用范围较广,但需要准备多个可供调用的网页文件,因而网页制作工作量加大,同时该操作需要侦测终端显示器的分辨率,网页显示上存在一定的延时,但却可准确表达网页信息。四种方法虽有不同,但却有着共同的特点,即都能够自动适应浏览者的显示器分辨率设置,从而都可保证网页信息的有效传播,具有广泛的应用性。
参考文献
1 胡耀芳、赵祖荫.网页设计与制作实验教程.北京:清华大学出版社,2008
2 于巧娥、何金奎.网页设计与制作教程与实训.北京:北京大学出版社,2006