关闭顶部展开顶部

网页一屏有多大?_网页设计教程

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!

推荐:书签效果的优化
一叶千鸟的blog:http://www.rexsong.com/blog/传说IBM笔记本的小红帽TrackPoint有个小秘密:鼠标指针在移动过程中,当手指离开小红帽的瞬间,指针会向相反方

网站设计时,有一个最常用的指导性原则:页面长度原则上不超过3屏,宽度不超过1屏。这个原则明显是从用户的体验出发,非凡是宽度不超过一屏,其最基本的表现是浏览器不出现横向滚动条,这几乎是目前的设计准则。那么这里的一屏到底是多大呢?

普通用户通常浏览网页时,其浏览网页的有效面积会受到下面几个方面的影响:

  1. 显示器的分辨率
    这个由科技发展和用户购买力及喜好决定,其数据取决于统计。
  2. 操作系统
    毫无疑问目前是Windows的天下,其中WindowsXP占绝大多数。
  3. 网页浏览器
    IE依旧份额最高,但是Firefox、Opera和Safari等也有一定市场。
  4. 个人定制
    主要是用户定制操作系统的样式、操作系统任务栏是否隐藏和浏览器的样式,但是总体上这部分应该属于高级用户,绝大部分用户依旧会使用操作系统和浏览器的默认样式。

下面是关于浏览器和屏幕分辨率的统计数据


W3Counter于2006.11.12发布的全球统计数据


某知名站点2006年10月份的数据

由上面的数据可以得出

  1. 基本上用户分辨率都在800×600以上,绝大部分都在1024×768以上,从全球情况来看,800×600的分辨率会越来越少。
  2. 国内浏览器依旧是IE6的天下,这将会持续较长的时间。从全球市场来看,国内的Firefox2.0和IE7会逐步增长,非凡当IE7的中文版推出和Windows自动更新的推广开始以及随Vista上市,IE7增长会更快。

所以计算一屏大小应基于以下原则

  1. 一屏指绝大部分用户的浏览器显示网页的有效可视区域。
  2. 一屏的计算环境是Windows XP和浏览器均处于默认样式。
  3. 由于IE无论是否超过一屏都存在纵向滚动条的位置,Firefox和Opera是在页面超过一屏的时候出现纵向滚动条,且浏览绝大部分网页都有纵向滚动条的存在,所以一屏大小的计算都基于浏览器有纵向滚动条的状态下。
  4. 由于Firefox2.0在只浏览一个网页时不出现多窗口的控制栏,而其它的多窗口浏览器都出现多窗口控制栏且使用时都会同时浏览多个网页,所以一屏大小在Firefox中指多窗口的控制栏存在时。

下面是基于上面的原则得到常用浏览器和分辨率下的的数据结果:

有效可视区域(单位:px)
屏幕
800 600 1024 768 1280 1024
IE6.0 779( 21) 432( 168) 1003( 21) 600( 168) 1259( 21) 856( 168)
IE7.0 779( 21) 452( 148) 1003( 21) 620( 148) 1259( 21) 876( 148)
Firefox2.0 783( 17) 417( 183) 1007( 17) 585( 183) 1263( 17) 841( 183)
Opera9.0 781( 19) 461( 139) 1005( 19) 629( 139) 1261( 19) 885( 139)

关于上面数据的解释和一些其他事实

  1. 在800×600分辨率和Windows XP下定制Windows的经典样式IE6的有效可视区域是780×445,Windows98、Windows 2000和Windows2003均采用经典样式切IE5.0、IE5.5、IE6.0的布局上相似,所以相同分辨率下应该比Windows XP默认的样式要大。
  2. 知道浏览器型号和屏幕的分辨率能够很轻易的推算出可视区域面积,比如1024×768下IE7.0的可视面积是(1024-21)×(1024-148)

综合上面所有的数据,结论如下

  1. 最保守而最有兼容性的一屏大小是:779×432
  2. 最广泛的一屏大小是:1003×600
  3. 适合目前国内的情况,一屏大小是779×600

分享:做网站的一些定律
1.250定律拉德认为:每一位顾客身后,大体有250名亲朋好友。假如您赢得了一位顾客的好感,就意味着赢得了250个人的好感;反之,假如你得罪了一名顾客,也就意

来源:随网之舞//所属分类:网页设计教程/更新时间:2007-04-06
loading.. 评论加载中....
相关网页设计教程
闂備焦鐪归崺鍕垂闁秵鍋ら柡鍥舵緛缂嶆牠鏌涢埄鍐姇闁抽攱甯楅妵鍕即濡も偓娴滄儳顪冮妶蹇曠Ф闁瑰嚖鎷�
婵犵數鍋涢顓熸叏椤撱垹纾婚柟鐐灱濡插牓鏌¢崒婵囩《濠⒀勭⊕娣囧﹪鎳犻澶嗗亾濠靛鐓熼柕蹇婃櫅閻忔煡鏌熼崙銈嗗
婵犵數濮烽。浠嬪焵椤掆偓閸熷潡鍩€椤掑嫷妫戠紒杈╁仜椤撳吋寰勭€n亝顓鹃柣搴f嚀鐎氼厽绔熼崱娆愬床濞戞柧绶氶弻锝夊閳轰胶浼堥梺鐟板殩閹凤拷
婵犵數濮烽。浠嬪焵椤掆偓閸熷潡鍩€椤掑嫷妫戠紒杈╁仜椤撳吋寰勬繝鍕靛悑闂備浇顕栭崹搴ㄥ礋椤撗勑氶梻浣筋嚙闁帮絽岣胯铻炴繛鎴欏灪閸嬪鏌ㄩ悤鍌涘
闂傚倷鑳舵灙缂佺粯鍔欓獮濠冩償閵娿儳鍔﹀銈嗗笒閸婂摜鏁崼鏇炵閻庢稒岣块惌鎺斺偓瑙勬礃缁诲牓寮幘缁樻櫢闁跨噦鎷�
闂傚倷鑳舵灙缂佺粯鍔欓獮濠冩償閵娿儳鍔﹀銈嗗坊閸嬫捇鏌涘顒夊剳缂侇喖锕弫鍌炲礈瑜忛悡鎾绘煟鎼搭垳宀涢柡鍛箞閹苯鈻庨幋鐘碉紳婵炴挻鑹鹃敃銉р偓姘炬嫹
闂傚倷娴囬妴鈧柛瀣尰閵囧嫰寮介妸褉妲堥梺浼欏瘜閸o綁寮诲☉妯锋斀闁归偊浜為懗铏圭磽娴i潧濡芥俊鐐舵椤曪綁濡搁埡濠冩櫖濠电偛妫欓崹鐢电箔閿熺姵鈷戦柛婵嗗閳ь剙顭烽獮濠囧箻閼告娼熼梺璺ㄥ櫐閹凤拷
闂傚倷绀侀幖顐﹀疮閻楀牊鍙忓瀣捣缁€濠傤熆閼搁潧濮堥柣鎿勭秮閹娼幏宀婂妳濠电偛鐪伴崐鏇㈡箒闂佹寧绻傚Λ娆戠矆閳ь剟姊洪崨濞氭垿鎮ч悩鑼殾闁规壆澧楅弲鎼佹煥閻曞倹瀚�
濠电姷顣藉Σ鍛村垂椤忓牆绀堟繝闈涙-閻斿棙淇婇姘倯閻庢氨绮妵鍕箻鐎靛摜鐣洪柣搴㈢啲閹凤拷
婵犵數濮烽。浠嬪焵椤掆偓閸熷潡鍩€椤掑嫷妫戠紒杈╁仜椤撳ジ宕堕妸銉紩婵$偑鍊栭幐鑽ゆ崲閸愵亖鍋撳铏彧濞e洤锕、娑樜旈埀顒佹櫠閸欏绡€妞ゎ偒鍠楃€氾拷
濠电姷顣藉Σ鍛村垂椤忓牆绀堟繝闈涙-閻斿棙鎱ㄥ璇蹭壕閻庤娲﹂崜鐔笺€佸▎鎾崇闁绘挸绨堕崑鎾绘偨閸涘﹦鍘搁梺鍓插亝缁诲嫬鐡┑鐘愁問閸n垶骞忛敓锟�
濠电姷顣藉Σ鍛村垂椤忓牆绀堟繝闈涙-閻斿棙鎱ㄥ璇蹭壕闂佸搫鑻幊姗€宕洪埀顒併亜閹哄棗浜鹃梺瀹狀嚙闁帮綁鐛幋锕€绠涢梻鍫熺⊕椤斿棝姊绘担鍛婃儓閻庢碍鎮傞獮蹇涙晸閿燂拷
濠电姷顣藉Σ鍛村垂椤忓牆绀堟繝闈涙-閻斿棙鎱ㄥ璇蹭壕閻庤娲╃紞渚€鐛€n亖鏀介柛顐亗缁憋拷
婵犵數濮烽。浠嬪焵椤掆偓閸熷潡鍩€椤掑嫷妫戠紒杈╁仜椤撳吋寰勬繝鍕幀闂備胶鎳撻悺銊ф崲閸曨垼鏁傞悗娑櫭肩换鍡樸亜閺嶎煈娈斿褍寮剁换婵嬶綖椤旇棄顏�
闂備浇顕ф鎼佸储濠婂牆绀堟繝闈涱儐閸嬪鏌熼幆鐗堫棄闁活厽顨呴埞鎴︽偐閹绘帗娈梺濂告涧缂嶅﹪寮婚妶澶嬪殟闁靛鍎遍~宥夋⒑缂佹ḿ澹勭紓宥勭閻e嘲鈻庨幘瀛樻闂佽法鍣﹂幏锟�
UB闂傚倷绀佸﹢杈╁垝椤栫偛绀夋俊銈呮噽瀹撲線鏌涢妷銏℃珕閻庢碍宀搁幃妤€鈽夊▍铏灴閿濈偤鏁撻敓锟�
闂傚倷娴囨竟鍫熴仈缁嬫娼栧┑鐘崇閻掗箖鎮楅悽鐢点€婇柛瀣崌閻涱噣宕归鍙ョ棯婵犵數濮崑鎾绘煥閻曞倹瀚�
闂備浇顕ф鍝ョ不瀹ュ鍨傞柛婵嗗閼板潡鏌涢姀銏犳
闂傚倷绀侀幉鈥愁潖缂佹ɑ鍙忓瀣捣缁€濠傤熆鐠鸿櫣鐏遍柛妤佺缁绘盯宕卞Δ鈧銏ゆ煕閻愬樊妲圭紒缁樼〒缁辨瑩鎮╅崫鍕腐闂備胶枪妤犲繘骞忛敓锟�
缂傚倸鍊搁崐鐑芥倿閿曞倹鍋¢柨鏇炲€搁崹鍌涚節婵犲倸顏い鈺呮敱閵囧嫰骞掑鍥舵М缂備焦褰冨﹢閬嶅焵椤掑倸浠柛濠冪箘缁辨挸顫濇0婵囨櫓闂佽法鍣﹂幏锟�
©2017 www.mb5u.com濠电姷顣藉Σ鍛村垂椤忓牆绀堟繝闈涙-閻斿棙鎱ㄥ璇蹭壕閻庢鍣崳锝夊箖閳哄懎绠甸柟鐑樻尭閻︼拷
闂傚倷娴囬妴鈧柛瀣崌閺岀喖顢涘⿰鍐炬毉濡炪們鍎婚幏锟�&闂傚倷绀侀幉锛勬暜閹烘嚦娑㈠籍閸噥妫呴梺璺ㄥ櫐閹凤拷