导航:首页 > 万维百科 > 网站设计分辨率不同

网站设计分辨率不同

发布时间:2021-01-16 14:32:29

1、不同分辨率下,网页制作中常见的页面尺寸是多少?

对于一个设计人来员来说,没自有什么固定的东西。就是一种习惯,好的习惯

现在的显示器分辨率都在1024*768以上了。800*600基本全部被淘汰掉了。

1024*768下。全屏下采用1003px宽就好了。

面对现在的显示分辨率大部分是960px宽的

当然还有很多是采用800px宽的

一个网页的宽度。根据实际要做的页面而定。

不要局限在一个标准内。

2、网页设计时遇到的分辨率问题,如何解决

这位网友你好,你可以将图片宽度设置为100%,或者将图片设置为背景。这两种方法都可以达到你的要求。

3、网页设计中,如何让网页能在不同的分辨率下都全屏显示?

定义一个整体的DIV把宽度设置哦100%就可以了,如果里面有几列的话,首先确定哪几个地方固定大小,哪先地方能缩放!根据情况定吧!

4、网站设计中如何设置网页尺寸使在不同分辨率下都能正常显示

目前没有见过十分有效的办法,常见的是采用最小的分辨率的情况先全屏显示,大分辨的话居中显示。也有些采用“魔术”显示,或者是用js识别,js更改属性显示但是这种方法非常的麻烦。

5、刚学网页设计,如何解决分辨率不同,显示不同的问题

做一个表格760PX的居中显示就可以了

6、网页因分辨率不同而变形

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

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

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

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

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

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

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

二、让网页居中

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

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

<html>
<head></head>
<body topmargin=0 leftmargin=0>
<center>
<table cellspacing cellpadding width=760><tr><td></td></tr></table>
</center>
</body>
</html>

三、定义固定大小的文字

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

如果使用了网页中的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>

7、不同网站网页显示图片分辨率有不同吗?

网页会对你上传的图片进行压缩,主要目的是为了节省网页容量。例如传一张千万像素的.BMP,大小为10M,如果一个页面有10张这样的“伟大作品”,那么欢呼吧!即使是1M一秒的网速也得等两分钟。
而压缩过的JPG图片充其量也是几百K一张(就很清楚了)。如果你遇到打开图片是一丝一丝的加载,那就是原图片,是非常清晰的。不过通常是单独展示一张图片的网页才这么干。不同的网站服务器也不同,一些大网站财力雄厚,可以租用更大的服务器来保障速度。小网站只能悲剧了。
另外外国的网络比较好,不像天朝的那么浮夸。20M宽带速度才100k……如果等待了3、5秒没加载好,用户就失去耐心了。所以网站必须要保障页面容量适中。唉,这个是很深奥的商业原理,不说了。反正统一标准是没有的,压缩多少取决于网站的策略和网页类型。

8、关于网页制作大小与分辨率的关系

很简单,大框架用百分比写比如头上的横幅与页尾的说明宽度写成100%,这样你分辨率越高写的东西就越大分辨率越小写的东西就越小达到自适应的效果,后续不会的可以追问我

9、为什么电脑桌面分辨率和网页分辨率不一样

1、首先,桌面是操作系统给我们提供的人机交互的界面,这个界面需要内显示屏来承载,所以设置桌容面分辨率就是设置显示器的分辨率。

2、而网页是网页浏览器的一个人机交互界面,而网页浏览器又是运行于操作系统的一个程序,在网页浏览器又有菜单栏、导航栏、状态栏、滚动条等内容显示,所以,网页浏览器的分辨率宽度不会比桌面分辨率大,只能比桌面分辨率宽度小,如果网页分辨率比桌面分辨率相等或大,都会产生水平滚动条,只有水平滚动页面才能浏览完全,网页分辨率的高度大多比显示器分辨率高,这样网页才能承载更多的内容,我们在浏览网页时才能只拖动垂直滚动条,或用鼠标滚轮快速的浏览网页的内容。

下图里的红色区域的宽度就是网页的宽度分辨率:

3、总之,网页的宽度分辨率一般比桌面分辨率的宽度小,而且一般网页分辨率的设置会考虑到绝大多数用户终端的显示器都能得到完整的宽度显示,所以一般会采用较低分辨率的显示器为标准进行网页设计的,高度分辨率根据网页的性质可以比桌面的分辨率大,也可以比桌面分辨率小。

与网站设计分辨率不同相关的知识