如何自定义Jimdo模板(十二) - 利用Page-ID对基本布局进行版块调整

      在 “利用 Content-ID 设计出不同的编辑区布局” 一文中,尝试着对 Jimdo 的布局进行了改进,效果还是不错的,适用于主页及一些导航页面。但是,它仅限于 Content 区域。本文再介绍一种利用 Page-ID 的修改方法,它可以对版块进行位置的调整,是对上面那个方法的补充。

      对HTML知识有点基础的朋友都知道,一个网页的基本组成如下:

<html > (表示这个文件是HTML格式的文件,即网页文件)
<head> (表示一个网页的头部)
<title>标题</title> (显示在浏览器标题中的文字)
<meta http-equiv="Content-Type" content="text/html; charset=gb2312> (网页采用的编码)
</head> 
<body> (网页上的主体内容)
</body>
</html>

      其中,<body></body>之间的内容,就是我们通过浏览器在页面上直接看到的内容,它包括 Jimdo 网站模板中 “Content”、“Navigation”、“Sidebar” 和 “Footer”四个部分,以及在 Jimdo 模板设计中不是必须的 “header”。我们看下 Jimdo 网站的源码,以本人的首页为例,简化如下:

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="robots" content="INDEX, FOLLOW"/>
<title>网上邻居 - Jimdo爱好者</title>
<link rel="shortcut icon" href="http://u.jimdo.com/www3/o/sbdb78c758da45054/img/favicon.png?t=1285968579"/>
<link rel="alternate" type="application/rss+xml" title="博客" href="http://jdm.jimdo.com/rss/blog"/>
<meta name="keywords" content="网上邻居, JIMDO技巧与代码, 自定义模板, QQ, 电脑, 网络, 空间"/>
<meta name="description" content="网上邻居的个人兴趣博客,主要致力于jimdo技术的学习与探讨,包括Jimdo自定义模板、技巧、代码,以及电脑,网络,QQ技巧等。"/>
<meta name="language" content="zh"/>
  <link href="http://u.jimdo.com/www3/o/sbdb78c758da45054/userlayout/css/main.css?t=1287505013" rel="stylesheet" type="text/css"/>
</head>
<body class="body cc-pagemode-default cc-indexpage cc-content-parent" id="page-270431404">
<div id="container" class="cc-content-parent">
<div id="header">
网上邻居 <span style="color: #888; font-size:15px; line-height: 100%; font-family: Verdana;"><strong>— Jimdo 爱好者</strong></span>
</div>
<div id="navigation">
<div>
<div id="content" class="cc-content-parent">
<div id="left" class="cc-content-parent">
<div id="footer">
</div>
</body>
</html>

      呵呵,不要晕,我们只关注<body class="body cc-pagemode-default cc-indexpage cc-content-parent" id="page-270431404">这一行,特别是红色这部分。查看不同的页面,page-id 每个页面都是唯一的,每个页面的数字都不一样。由此想来,我们能不能在CSS里对它进行设置,从而使各个页面的布局不一样呢?

      做个简单的试验,以我这个二分栏的布局为例,我们将左侧改为右浮动,右栏改为左浮动,也就是:

#page-318464404 #left{float:right;}  

#page-318464404 #right{float:left;} 

      保存CSS以后,会有什么变化呢?大家可以看下 自定义模板 这个页面......正如我们设想的那样,两栏换了位置。

      上面的例子只是这种方法的一个简单应用。再举一个实例,将侧栏去除,整个版面改为通栏,见访客留言页面。

      以上只是简单地做了一些试验,有几点说明一下:

      一、利用区性page-id 对某些页面进行重新布局, 是以基本的布局为基础的,所以要保证正常的CSS布局设置,是因为我们要修改的只是部分页面。

      二、一个版块在页面上的位置,不完全取决于CSS,还与<div></div>在HTML 中的位置有关。也可以这么简单的理解,即左右位置主要取决于CSS,上下位置取决于<div>,当然也不是绝对的,因为还存在着CSS中定位的问题。

      三、这个方法结合 Content-ID,使 Jimdo 网站布局变得生动起来,是勿容置疑的。但是如何把它做的更好,本人只是提出一点思路,供感兴趣的朋友进一步研究。

Write a comment

Comments: 14
  • #1

    网型网秀 (Wednesday, 20 October 2010 07:10)

    Javascript是可以创建元素的,即使html中没有写。

  • #2

    138photo (Wednesday, 20 October 2010 11:56)

    又有改进了,改天再个时间学习一下,看看能不能从新布局。

  • #3

    Suitear (Wednesday, 20 October 2010 13:53)

    上次提示你page id 结果只写了个漂浮,page-id 可以把整个页面a h 或 p 的颜色,大小,样式,全都换掉。也就是说可以更换新的css,不过你得手写!这只是从小的方面而言,如果你使用 body.类名字#名字形式 #下级ID {
    Css定义
    }
    那将会连原定义样式改变,也就是新的css对应!

  • #4

    Suitear (Wednesday, 20 October 2010 13:57)

    弱弱的问一句,现在还有多少活跃的Jimdo用户。

  • #5

    淘宝600家园 (Wednesday, 20 October 2010 20:11)

    呵呵,过来支持一下~~~~

  • #6

    网上邻居 (Wednesday, 20 October 2010 22:54)

    Suitear:你好!
    谢谢指点!呵呵,你说的那些好象是基础知识,相信业余时间学习过CSS知识的人都应该知道,问题是怎么把它运用到Jimdo上来。
    关于用多少活跃的Jimdo用户,这是应该是Jimdo官方关心的事。反正我是拿Jimdo这个平台来学习的,有朋友来关心当然最好,没有的话,自娱自乐也不错。对你的关心,表示衷心的感谢!

  • #7

    网上邻居 (Wednesday, 20 October 2010 22:59)

    淘宝600家园:你好!
    谢谢支持!
    本文只是把简单地把左右版块做了试验,其实也试了下用page-id对整个页面重新定义,不是想像的那么简单,Jimdo这个系统有它的特殊性,有空再进一步试试。

  • #8

    Suitear (Thursday, 21 October 2010 13:37)

    问题是怎么把它运用到Jimdo上来?你等着,我运用给你看看!

  • #9

    飞帆 (Thursday, 21 October 2010 15:40)

    都是高手啊!我现在也正烦恼着一件事啊!

  • #10

    独星 (Friday, 22 October 2010 21:52)

    现在本人在学习PHP代码~~~研究WP

  • #11

    网上邻居 (Saturday, 23 October 2010 07:19)

    独星:
    支持你!把研究成果做成教程,然后去跟你学习!

  • #12

    考啦考啦 (Friday, 06 July 2012 07:48)

    看了贵站的有关自定义模板的一些文章,的确不错,也尝试改改,可让人烦恼的是,系统模板无法进行HTML和CSS的修改,一改就不是原来选定的系统模板了。还非得用它提供下载的自定义模板才能修改。可是作为非专业用户,哪有那么多时间和精力花在这上面啊。如果有高手可以提供它的系统模板的HTML和CSS文件出来,那对于我这样的只想稍做修改的用户来说是很需要的。

  • #13

    Louis Vuitton iPhone 6S Plus Case (Tuesday, 29 September 2015 13:36)

    Blackberry hasn’t released any important phone in 2015, but in November, the Canadian company will launch the Blackberry Venice. This device was confirmed a few days ago, but leaked images of it have surfaced weeks ago.

  • #14

    Louis Vuitton iPhone 6S Plus Case (Monday, 11 April 2016 16:41)

    Vance and other law enforcement officials, though, have called for a federal law governing when a company can be forced to help authorities unlock a phone.