导航:首页 > 网站知识 > 上线了网站要怎么设置宽度

上线了网站要怎么设置宽度

发布时间:2023-02-06 13:15:42

❶ 网页设计的宽度一般为多少应该怎么把握

网络统计流量研究院对于2017年上半年的分辨率使用情况统计得出。

排名第一的是360×640,这是竖屏,一般在医院、学校中才能见到,暂且不谈。

排名第二的是1920×1080,占比13.07%。

1366×768排第三,占比6.32%。这说明现在主流的电脑分辨率是1920×1080。

排名第七的分辨率,1024×768,是最小的电脑尺寸了,仅占3.13%,很少有人使用。在做pc端的网页设计时,不用考虑这个尺寸,而应在做pad端和手机端的适配时,将其纳入考虑。

而更高级的响应式网站应该是在严格的栅格规范下,适应于不同宽度,确保各宽度下的展示效果。但这样的成本也会相应增加,在开发网站时,需综合考虑实际需求和开发成本。time(《时代周刊》官网)是个很好的响应式网页案例。

(1)上线了网站要怎么设置宽度扩展阅读

网页设计中的注意事项:

1、网页设计的尺寸标准:

面向1024-768显示器分辨率开发的网页尺寸,宽910px;

面向800-600显示器分辨率开发的网页尺寸,宽778px;

2、网页设计中的画布设定:

尤其注意分辨率为72 像素/英寸。

3、设计中的网页字体问题

中文字体:尤其注意“设置消除锯齿的方法”选项要选择“无”。

宋体是最常用的网页字体,12px 是中文操作系统可以表现的最小的字体,内容。

文字大小一-般用两种,12px 或14px(现在的新的vista据说能表现10px的中文字,但现在使用并不多)。

英文字体:其中英文字体最小表现为10px 字verdana字体是大多数网页使用的英文字体,比起arial字体更美观和均衡。

效果图:

网页效果图中的网页字体,虽然在最后制作网页的过程中不需要裁剪。但做为设计中不可分割的重要元素,一定要认真使用,因为你不单要设计文字与整体网页的关系,还要设计字体的样式表颜色。

❷ 如何让网页自适应所有屏幕宽度

在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。
第一种方法:做一个网页解决问题(长了点)
如果只是因为浏览者改变了浏览器的设置,或者因为浏览器不兼容,使自己精心制作的网页变得"面目全非",那多令人沮丧!下面我们以网页爱好者的常用工具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>

判断读者浏览器类型和屏幕分辨率,自动调用不同CSS

我们在设计网页的时候一个比较头痛的问题是究竟我们的浏览者的分辨率是多少?如果使我们的浏览者能够更好的去浏览到我的网页,这个是我们设计前必须思考的问题。所以Leying在设计网页的时候第一个想的是兼容现在大多数浏览者的屏幕分辨率,这里头有几种最常用的方法:

1、硬行把网页先用表格框起来,框的分辨率应该是在760-780象素,其余的空间可以给一个背景图或者空白.
2、用自动缩放的方法也可以实现,这种方法比较古老,而且很简单,这个不多说了;

3、用自动判断的方法。

今天,就第三种方法来说说,如何来判断出浏览者的屏幕分辨率,根据不同的分辨率给予读者不同的浏览内容:

❸ 网站设计时网页最佳宽度值应该设计多少适合

高品质网站特别是品牌营销型网站对网页宽度的把握非常重要。网页要设计的容易阅读,目前主流的浏览器是1024*768像素,所以网页的宽度应该设置在900-1005之内为佳。

如果网页太窄了,页面显得局促,在视觉上显得比较小气,不能体现出企业的自身形象和实力,对企业来说损失就比较大了,这种企业网站建设是失败的设计,太宽了,底下会出现滚动条,不利于用户阅读,用户看着不顺眼不舒服就会关闭页面并跟出网站。
有的网站采用自适应的模式,即网页宽度是用百分比定义,而不是用像素规定,有的网站采用更高分辨率的屏幕时,专业网站设计显示的页面会自动变宽,如自动适应为100%的宽度。
网站设计需要符合用户的浏览体验,优质的网站设计能够第一时间展示公司的品牌形象和实力,并最终为业务实现交易打下基础和支持。

阅读全文

与上线了网站要怎么设置宽度相关的资料

热点内容
网络共享中心没有网卡 浏览:301
电脑无法检测到网络代理 浏览:1200
笔记本电脑一天会用多少流量 浏览:317
苹果电脑整机转移新机 浏览:1211
突然无法连接工作网络 浏览:786
联通网络怎么设置才好 浏览:995
小区网络电脑怎么连接路由器 浏览:748
p1108打印机网络共享 浏览:1014
怎么调节台式电脑护眼 浏览:455
深圳天虹苹果电脑 浏览:695
网络总是异常断开 浏览:410
中级配置台式电脑 浏览:739
中国网络安全的战士 浏览:414
同志网站在哪里 浏览:1179
版观看完整完结免费手机在线 浏览:1258
怎样切换默认数据网络设置 浏览:908
肯德基无线网无法访问网络 浏览:1056
光纤猫怎么连接不上网络 浏览:1196
神武3手游网络连接 浏览:768
局网打印机网络共享 浏览:805