办公软件

需要做网站建设、免费办公自动化系统以及免费建站的朋友,请联系我们在线客服或者直接登陆我们主站——云林科技

导航

  • 首页
  • 搜索
  • 标签
« 网站赚钱其实不难-实例分析互联网创业盈利模式实用的网页快速开发 »

让我们设计的网页自适应客户端分辨率

</script>

1024*768或者800*600分辨率下可以自动调整成适用于该客户端分辨率的大小。

第一种方法:做一个网页解决问题(长了点)

或者因为浏览器不兼容,如果只是因为浏览者改变了浏览器的设置。使自己精心制作的网页变得"面目全非"那多令人沮丧!下面我以网页爱好者的常用工具Dreamweav以下简称DW为例,列出几个网页制作初学者较常见的网页布局问题以及解决方法,希望对初学者们有所协助。

一、消除任意缩放浏览器窗口对网页的影响

全屏状态下浏览一切正常。但在改变浏览窗口大小之后,一番辛苦做出来的网页。网页就变得"不堪入目"这是个很值得注意的问题。

DW中,问题的根源还得从网页的布局说起。网页内容的定位一般是通过表格来实现的解决表格的问题也就成功了大半。

如在一个表格单元的宽度是600里面嵌入了另外一个表格,大家应该注意到DW中表格属性面板的高宽设定选择上提供了两种不同类型:百分比和像素值。百分比的使用将会产生前面说到那个毛病。这里所说的百分比是指表格的高或宽设置为上层标志所占区域高或宽的百分比。表格宽度占表格单元的50%则这个表格的宽度为300依此类推,如果在一个表格不是嵌于另一个表格单元中,则其百分比是相对于当时窗口的宽度的IE浏览器中,随便改动主页窗口的大小时,表格的内容也随之错位、变形,就是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。

解决这个问题的方法就是将表格宽度设置成固定宽度(也就是像素值)另外如果外层表格已做好固定宽度设置,自然。内层表格也可以适当使用百分比设置。清楚这个原则以后,如果呈现类似的问题大家也知道怎么解决。

二、让网页居中

800600分辨率下制作的网页在1024768分辨率的机器上打开,说到窗口大小就会顺着路子想到分辨率的问题。整个网页就会跑到左边;1024768分辨率的网页在800600分辨率的机器上有时也会变得"不堪入目"两种分辨率各做一个吧?做起来费时,看起来也费劲。怎么办呢?

所以我一般可以以此分辨率为主,现在大多数网民都还在用800*600分辨率。要想让网页在1024*768时居中,只要在网页原代码的<body>后紧加一句<center></body>前加一句</center>就OK不过有几个问题这是要注意一下,第一个就是上面说到百分比的问题,表格、单元格的宽度单位最好要使用像素单位,而不要用百分比。例如width=770如果你表格宽度设的百分比,那么使用大于800600像素时,网页就会拉宽,这样网页可能会变形。<body>中加入leftmargin=0即<bodileftmargin=0>这种情况下,800600支持的表格宽度为780像素时不会出现滚动条。还有一点要注意的不能用DW中的层来定位。

<html>

 

<head></head>

<boditopmargin=0leftmargin=0>

<center>

<tablcellspaccellpadwidth=760><tr><td></td></tr></table>

</center>

</body>

</html>

三、定义固定大小的文字

有一个可以自由设置窗口内容字体大小的功能,这样由于不同访问者的设置习惯不同,出现在面前的网页有时也会不不相同。比方你可能原本设计时用的2号字体,结果由于用户对浏览器的额外设定,变的更大了这时你网页也可能变得"不堪入目"虽然不是错,但客户是上帝。大家都知道,IE浏览器的功能设置中。

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

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

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

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

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

使用链式或内嵌式。内联式的CSSNetscapNavig中经常会出现问题。

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

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

用 CSS代替。防止使用 W3C组织不推荐的排版属性。

一个是800600一个是1024768800600页面中加入一下代码就可以实现跳转了第二种方法:做两个适合不同分辨率的页面。

只能手动加入一段Javascript代码。首先在changie.html或changnc.html页面代码中的<head>和</head>中加入以下代码:解决分辨率问题在Dreamweav中没有此项功能。

<scriptlanguage=JavaScript>

 

<!

functionredirectPag{

此处假设indexex.html和1024ie.html同changie.html同一个目录下 varurl800x600=〃indexie.html〃;//定义两个页面。

varurl1024x768=〃1024ie.html〃;

ifscreen.width==800&& screen.height==600//此处添加screen.widthscreen.height值可以检测更多的分辨率

window.location.href=url800x600;

elsifscreen.width==1024&& screen.height==768

window.location.href=url1024x768;

elswindow.location.href=url800x600;

}

//>

</script>

然后再在<bodi>内加入onLoad=〃redirectPag〃

同样地,最后。<body>和</body>之间加入以下代码来显示网页的工作信息:

<scriptlanguage=JavaScript>

 

<!

varw=screen.width

varh=screen.height

document.writ〃系统已检测到您的分辨率为:〃);

document.writ〃<fontsize=3color=red>〃);

document.writw+〃×〃+h;

document.writ〃</font>〃);

请稍候…〃);document.writ〃正在进入页面转换.

//>

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Recent Comments

Recent Article

Powered By Z-Blog 1.8 Arwen Build 90619

Copyright 武汉网站建设,办公软件,免费建站. Some Rights Reserved.