Jimdo自定义模板 - 自适应浏览器窗口二分栏布局在Jimdo网站上的应用

      浏览了不少Jimdo网站,也看了不系统模板,几乎都是850-990px固定宽度的版面。除去各种浏览器兼容性问题,这种固定宽度布局的好处是,设计者看到什么样子,访客看到的也是什么样子。由于页面在任意浏览器下的显示宽度都一样,对于图像、表单、视频等宽度固定的内容,潜在的冲突也不多。

      不过,凡事有利必有弊。目前电脑显示器的尺寸已经从win98时代的15英寸(分辨率800X600)、winXP时代的17英寸(分辨率1024X768),发展到了win7时代的19、20、22等大屏幕超大屏幕,还有各种宽屏什么的(部分电脑显示器尺寸和分辩率关系一览表见文后附录)。这样一来,以固定宽度设置页面的话,就带来了一个问题:如果照顾小屏幕用户,对于高分辨率屏幕用户,会出现巨大的页面空白;如果照顾大屏幕用户,则小屏幕用户的浏览器下方又会出现水平滚动条,影响用户体验。
      对于固定宽度的页面设计,这个矛盾可以说是不可调和的。作为一种折衷方案,目前的固定宽度网页,普遍以17英寸显示器为底线,即页面宽度不大于1024px,一般以960px、980px多见,个人网站或博客也有用940px、900px等。

      固定宽度二分栏布局示意图如下。

固定宽度二分栏布局示意图
固定宽度二分栏布局示意图

      网上邻居在网上也看到不少网站的布局,它的页面宽度是根据显示屏大小的不同而自动调整的,即所谓的自适应。对于单栏结构的网页,处理起来比较容易,只要将 width 由固定数值改为百分比即可,对于多栏结构,处理起来就会麻烦一些。经过学习和试验,本文介绍一种比较简单的二分栏布局方法,即左部主栏宽度自适应,右部侧栏宽度固定。

自适应浏览器窗口二分栏布局演示代码:

[提示:您可先修改部分代码,然后再看看结果]

      如果您没有几种大小不同的显示器测试,比较简单的方法是更改显示器的分辩率,当然,由于只是布局,没有内容,可能也看不出什么来。最简单的方法是更改浏览器的窗口大小,可以看到,在浏览器窗口不小于右边侧栏宽度的情况下,是不会出现水平滚动条的。

      下面是几个用Jimdo做试验的截图,分辨率分别为800x600、1024x768和1280x1024,从左侧的内容上,可以看到宽度是自适应的(可以点击图片放大查看)。

      这个用于Jimdo网站的自适应二分栏布局的实验模板代码如下,看起来还是比较简单的,甚至比普通的固定宽度模板代码都要简单。整个页面没有设置宽度,右栏是固定的250px,头部、左侧、页脚都是自适应的,页面左右留了10px的空白。它的设计思想是将右侧栏放在左栏的侧边框上,这同时也实现了二栏等高。

      这只是网上邻居的实验模板,只能算个基本设置,没用图片。由于用的都是基本的CSS代码,经IE6、IE8、Firefox、Opera、Google Chrome等主流浏览器测试,兼容性方面不存在问题。感兴趣的朋友可以拿去试试。

HTML:

<div id="container">
    <div id="header">
        网上邻居
    </div>

    <div id="navigation">
        <var>navigation[1|2|3]</var>
    </div>

    <div id="right">
        <div id="userbox">
            <var>sidebar</var>
        </div>
    </div>

    <div id="content">
        <var>content</var>
    </div>

    <div id="footer">
        <div class="gutter">
            <var>footer</var>
        </div>
    </div>
</div>

CSS:

/* Layout */

body {float:none; text-align:center; margin:0px; padding:0px; background:#fff;}

#container {text-align:left; padding:0px; word-wrap:break-word;word-break:break-all;} #header{height:70px; background:#555;color:#fff; padding-left:10px;padding-top:45px;font:bold 40px/130% 楷体 _GB2312,黑体;}

#navigation {height:35px; background:#000;padding-left:10px;}

#content{text-align:left; padding:10px; background:#fff; border-right:250px solid #efefef;} #right{float:right; padding:15px 10px; background:#efefef;width:230px;margin-left:-230px;}

#userbox #jimdobox {float:left; width:228px; height:145px; padding:0px; margin:0px;}

#footer {clear:both; background:#555;color:#fff;}

#footer .gutter {height:30px;padding:15px 10px 5px 10px;}

#footer a{font:12px/150% verdana, 宋体; color:#ddd;}


/* Navigation */

ul.mainNav1{margin:0; padding:0; float:left;}

ul.mainNav1 li{float:left;display: block; margin:0; padding: 0;}

ul.mainNav1 li a{font:normal 13px/160% Verdana, 宋体; text-decoration:none; display:block; color:#fff;}

ul.mainNav1 li a {padding:8px;}

ul.mainNav1 a:hover{background:#fff;color:#000;}

ul.mainNav1 a.current {background:#fff;color:#000;}

附录:部分电脑显示器尺寸和分辨率的关系一览表

显示分辨率 百万像素 长宽比 屏幕尺寸(英寸) 像素间距(mm) 每英寸像素
960×640 0.61 3:2 3.5 0.077 326.0
1024×600 0.61 128:75 10.1 0.216 117.5
1024×768 0.78 4:3 9.7 0.192 132.0
15 0.297 85.5
17 0.337 75.3
1280×720 0.92 16:9 13.3 0.230 110.42
1280×768 0.98 5:3 15.4 0.262 96.9
1280×800 1.01 16:10 12.1 0.204 124.7
13.3 0.224 113.5
14.1 0.237 107.1
15.4 0.259 98.0
17 0.286 88.8
1280×1024 1.31 5:4 17 0.264 96.2
18.1 0.280 90.7
19 0.294 86.3
1366×768 1.05 16:9 11.6 0.188 135.1
14.0 0.227 111.9
15.6 0.253 100.5
18.5 0.300 84.7
19 0.308 82.5
1440×900 1.29 16:10 13.3 0.198 127.68
14.1 0.211 120.4
15.4 0.230 110.4
17 0.254 100.0
19 0.285 89.1
1400×1050 1.51 4:3 15 0.214 118.6
20.1 0.292 87.0
1600×900 1.44 16:9 13.1 0.181 140.1
14.0 0.194 131.1
15.4 0.213 119.2
17.3 0.239 106.1
20 0.277 91.8
1600×1000 1.60 16:10 22 0.296 85.8
1680×1050 1.76 16:10 15.4 0.197 128.9
17 0.218 116.5
19 0.244 104.0
20.1 0.258 98.4
21 0.269 94.4
22 0.282 90.0
1600×1200 1.92 4:3 15 0.191 132.9
20.1 0.255 99.6
21.3 0.270 94.0
1920×1080 2.1 16:9 13.1 0.151 168.2
15.6 0.180 141.2
16.4 0.189 134.3
21.5 0.248 102.5
23 0.265 95.8
23.6 0.272 93.3
24 0.277 91.8
24.6 0.284 89.6
27 0.311 81.6
1920×1200 2.30 16:10 15.4 0.173 146.8
17 0.191 132.9
22 0.247 102.9
23 0.258 98.4
24 0.270 94.0
25.5 0.287 88.5
27 0.303 83.8
2048×1152 2.36 16:9 23 0.249 102.2
2560×1440 3.68 16:9 27 0.233 108.79
2560×1600 4.09 16:10 30 0.250 101.6
3840×2400 9.21 16:10 22.2 0.125 203.2

Write a comment

Comments: 21
  • #1

    网型网秀 (Monday, 08 August 2011 00:49)

    简单的代码没什么问题,可图片和flash不会自动适应,会变形的。

  • #2

    网上邻居 (Monday, 08 August 2011 01:08)

    呵呵,说到点子上了,图片、视频以及其他拥有固定宽度的内容需要一些特殊的设置,变形应该不会,会产生一些空白。这就是凡事有利也有弊。

  • #3

    淘宝600家园 (Monday, 08 August 2011 10:04)

    呵呵,如果用19寸或22寸的显示屏,显示出的效果感觉是刻意拉长一样,还是觉得两边留空较好,另一个好处可以在两侧放一些滚动的对联广告。且阅读时没那么累,不过各人习惯不同~~~~~

    看来邻居也是费了不少时日在测试哦,辛苦了~~~~~

  • #4

    网上邻居 (Monday, 08 August 2011 14:09)

    淘宝600家园:
    你说的也极是。对大屏幕用户而言,如果内容不够,拉宽后从高度上看,可能下面又会出现很多空白。不过,这种自适应弹性布局,也是顺应各种屏幕混存的一种趋势,毕竟两侧空空的留白给用户的印象是严重的屏幕浪费。当然,完全的自适应弹性布局,目前还不是很成熟,比较可行的方法是自适应+固定宽度,比如,我目前的布局,头部和导航的背景以及页脚那条横线都是自适应的,而内容是固定宽度的。中部找时间看看,怎么在大屏幕上让它显示一些背景图片。

  • #5

    梁山分坨 (Monday, 08 August 2011 15:11)

    其实JIMDO出的一些摸版就是自适应的,当浏览器放大缩小就会出现一些问题

  • #6

    什么丰胸产品好 (Monday, 08 August 2011 18:47)

    先收藏了慢慢看

  • #7

    jxjzx (Wednesday, 10 August 2011 21:02)

    牛B啊,技术越来越好了,记得当初你刚来JIMDO时,好像也不是厉害,可如今已是“西方不败”了,赞叹啊,看来任何东西都要认真,才有回报啊

  • #8

    txgcx (Friday, 19 August 2011 10:27)

    网上邻居,你好。我非常欣赏你的钻研精神,请问我想设计类似你的博客的网络,大概思路是什么?比如右分栏是不是原来的sidebar,然后你将jimdo的广告合用绝对定位的方法挪走?

  • #9

    六角数码 (Saturday, 20 August 2011 17:16)

    这种自适应的页面看起来可能还没有固定宽度的好看呢?可能看习惯两边留空的页面了。假如整个页面都填满内容反而不习惯。

  • #10

    网上邻居 (Saturday, 20 August 2011 23:47)

    txgcx:你好!
    据我对Jimdo的理解,它有两个编辑区:“content”和“sidebar”,其中“content”是主编辑区,它决定不同的页面,不同的内容;“sidebar”是副编辑区,它位于广告盒下方,是所有页面共用的。如你所说,我现在是将“sidebar”的的Jimdo广告盒及其编辑区进行了分离,广告盒的绝对定位是一种方法,广告盒的自定义也是一种方法。
    目前Jimdo好像不像当初要求那么严格,只要不屏蔽广告盒,自定义它似乎也是可以的...这只是个人观点,免费版还是注意一点为好,万一被官方屏蔽了网站,就得不偿失了。

  • #11

    网上邻居 (Saturday, 20 August 2011 23:59)

    六角数码:
    自适应布局应该是一种趋势。有一点要说明一下,这种布局并不一定要充满屏幕,也可以留白的,而且不管屏幕大小,两边可以留出一样的空白。本文只是个初步探索,供感兴趣的朋友参考。

  • #12

    路过的 (Wednesday, 24 August 2011 19:41)

    你好请问你能不能做到一个页面是二分栏布局,另外一个页面是一分栏布局啊 怎么弄

  • #13

    网上邻居 (Thursday, 25 August 2011 06:00)

    路过的:
    可以,我这个站就有很多单栏的页面,比如:
    http://jdm.jimdo.com/2011/07/03/jimdo/
    http://jdm.jimdo.com/2010/12/21/journey-to-the-west-03/
    具体方法是,对某些页面进行单独的CSS定义,将左栏扩大到整个页面宽度,再将侧栏屏蔽掉(display: none)。

  • #14

    w1taobao (Thursday, 01 September 2011 20:57)

    你好,我是新手,请问你能不能做到某一个页面是二分栏布局,其他页面是单栏布局啊 具体怎么弄呢,拜托啦!

  • #15

    网上邻居 (Thursday, 01 September 2011 21:26)

    w1taobao:你好!
    你问的问题在Jimdo上做起来不难,这是Jimdo自定义模板方面的问题,实现的方法差不多有两种,主要是CSS和HTML配合的问题,这里说不清楚,如果需要,可以找时间演示一下。

  • #16

    w1taobao (Thursday, 01 September 2011 22:30)

    不会啊

  • #17

    35817613 (Saturday, 03 September 2011 15:24)

    你好,请问哪个地方的参数可以修改版面的宽度

  • #18

    网上邻居 (Monday, 05 September 2011 00:07)

    35817613:你好!
    决定整个版面宽度的属性名字是CSS里的#container,当然这也是可以任意定义的。在Jimdo系统模板里,基本上都是这样的。

  • #19

    xjtlu (Friday, 02 December 2011 21:37)

    你好,我用了你的模板,但出现了第一个元素和第二个元素之间留有大片空白,问一下怎么解决?

  • #20

    网上邻居 (Saturday, 03 December 2011)

    xjtlu:你好!
    我这里提供的自适应布局代码,只是个实验,还不是很成熟,如二楼的回复,主要适用于一些文字内容,或者是内容的固定宽度要设置在一定的范围之内 - 相对于常见的最小显示器尺寸,你可以换不见的显示器或调一下分辨率再看看你的网站。

  • #21

    Bling iPhone 6 Cases (Wednesday, 06 April 2016 17:03)

    The cameras in the Galaxy S6 phones put Samsung head-to-head with Apple in terms of image quality, so in a number of ways the S7 phones feel like a step ahead.