一个简洁的宽度是960的jimdo模板

自从电脑显示器淘汰15英寸以后,960就成了非常经典的网站版面宽度,虽然19英寸还有其它宽屏显示器在不断增加,960模板还是一个经典,而且还会存在相当长的一段时间。

我用这个模板做出的网站是:http://zgcm.jimdo.com,做淘宝的网站。


这个模板版面宽度是960px,很适合做淘客网站,当然也可以用于个人网站或公司网站。
     其实,做一个JIMDO模板,比做任何别的网站模板都来的简单,而且要简单的多。因为它是构筑在JIMDO平台上,只写简单的一点HTML和CSS代码就行了。当然,我这里是说一些简单的模板,如果要是做的很漂亮,就当别论了。

     这个模板比较简洁,甚至有些简单,不过作为入门模板,做淘客网站,还是很实用的,感兴趣的朋友,可以在此基础上进行修改。

     先跟初学自定义模板的朋友介绍一下操作过程:登录你的网站,点右上角控制面板里的“版面”,然后再点击“自己的版面设计”,OK,将本文介绍的“HTML”和“CSS”代码复制到“HTML”和“CSS”下面(要将原来的系统代码删除掉),然后点击保存。

HTML部分:

<div id="container">

 <table border="0" cellspacing="0" cellpadding="0" width="955">
        <tbody>
            <tr>
                <td width="955" height="30" bgcolor="#F0F0F0" align="center">
                    <span style="color: #ff0000;">本站以 <a href="http://www.taobao.com" target="_blank">淘宝网</a> 作后台,是一个引导您在淘宝网休闲、娱乐、购物的导航网站。</span>                            <a href="#" onclick=
                    "window.external.AddFavorite('http://lyg.jimdo.com', '连云港淘宝购物导航网'); return false;">收藏本站</a> | <a href="#" onclick=
                    "this.style.behavior='url(#default#homepage)';this.setHomePage('http://lyg.jimdo.com/'); return false;">设为首页</a>

                   </td>
            </tr>

            <tr>
                <td height="1" bgcolor="#AAAAAA">
                </td>
            </tr>

            <tr>
                <td align="center" width="955">
                    <div id="header">
                        <img src="header.gif" alt="" />
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

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

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

    <table width="960" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
        <tr>
            <td width="180" height="355" align="right">
                <div id="sidebar">
                    <var>sidebar</var>
                </div>
            </td>
            <td width="750" height="355" valign="top">
                <!-- 右 -->

                <table style="background-color:#88cf88;border-color:#ffdddd; border-width:1px;" border="0" width="100%">
                    <tbody>
                        <tr>
                            <td>
                                <table border="0" cellspacing="0" cellpadding="0" width="100%">
                                    <tbody>
                                        <tr>
                                            <td style="background-image: url(http://lyg.jimdo.com/s/cc_images/thumb_1306182104.jpg?t=1248012251); width:370px; height:175px;">
                                            </td>
                                            <td style="background-image: url(
http://lyg.jimdo.com/s/cc_images/thumb_1306182204.jpg?t=1248012251); width:370px; height:175px;">
                                            </td>
                                        </tr>

                                        <tr>
                                            <td style="background-image: url(
http://lyg.jimdo.com/s/cc_images/thumb_1306182304.jpg?t=1248012251); width: 370px;height:175px;">
                                            </td>
                                            <td style="background-image: url(
http://lyg.jimdo.com/s/cc_images/thumb_1306182404.jpg?t=1248012251); width: 370px;height:175px;">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>

    <table width="960" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td width="200" align="center" bgcolor="#FFFFFF">
                在这里加入你的网站统计代码
            </td>
        </tr>
    </table>

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

 

说明:

       以上代码基本上是 http://lyg.jimdo.com 的原代码。
一、红色部分的代码设定的是网站最顶端的一行,文字部分可以根据你的需要更改,“收藏本站”和“设为主页”,你只要把()里的内容改为你的就可以了。

二、绿色部分是定义头部图片的,你要做一个955px的图片,高度自定,然后命名为header.gif,当然,也可以根据你图片的名字,更改代码,然后从“文件”里上传。

三、蓝色部分是设定广告盒右边四个图片的,你可以根据你的需要,改为别的图片,也可以更改为具有图片、文字链接的代码,完全由你自己决定了。

四、灰色部份是设置网站统计代码的。

 

CSS部分:
   

                            body
{
       text-align:left;
       background: #fff;
}

#container
{
       margin:0px auto;
       width:960px;
       background:#fff;
}

#header
{
       margin:0px auto;
}

#content
{
       width:960px;
       float:left;
       margin: 0px auto;
       background:#fff;
}

#navigation
{
       margin:0px auto;
       width:960px;
       float:left;
       background: url(http://jdm.jimdo.com/s/cc_images/cache_1349038004.png) #900;
      
}
#sidebar
{
       width:180px;
       float:left;
       margin:0px;
}

#footer .gutter
{
       background:#fff;
       padding:20px;
       margin: 0px auto;
}

/*  Navigation
----------------------------------------------- */

ul#mainNav1
{
        margin: 0px auto;
}

ul#mainNav1 li
{
        float:left; 
        margin:0px auto; 
        list-style:none;
}

ul#mainNav1 li a
{
        font:bold 13px/180% 宋体;
        text-decoration: none;
        display:block;
        border-right:2px solid #fff;
        color:#fff;
}

ul#mainNav1 li a { padding:5px 20px 5px 20px; }

ul#mainNav1 a:hover{color:#0f0;}

ul#mainNav1 a.current { font-weight:bold; color:#0f0;}

 

说明:

      这部分代码,除了去掉了背景设置,完全是 http://lyg.jimdo.com 的原代码。你可以发现,它的居中效果特别好。我那个网站,底部图片尺寸没有设计好,有点不正,我也懒得去修改它了。
     感兴趣的朋友,可以拿去试试,以前曾用过我代码的朋友,特别是对居中不满意的朋友,不妨试试这个。
     提点忠告:你更改代码前,最好把你原来的代码复制到记事本里保存起来,如果对这个不满意,你再复制回来。
     另外,以前问过顶部加东西和底部加东西的朋友,这里都给出了代码,算是对以前问过这个事情的朋友的一次总回复吧。有什么疑问的,欢迎留言,我会尽可能回复的。

 

补充-关于头部图片

      不少朋友在反映用这个模板后头部的图片不显示,可能是初用Jimdo,或者对网页制作不是很熟悉,这里补充说明一下,算是总回复吧。

     因为这是模板代码,我不可能提供大家都需要的头部图片,所以,头部图片是每个人根据自己的需要,自己制作自己上传的。

     在HTML中,关于头部图片的代码是:

     <div id="header">
          <img src="header.gif" alt="" />
      </div>

     就是说,每个人要根据自己的需要,制作或找一个955px宽度的图片(高度自定),它的格式是gif,文件名为header,然后在“自己的版面设计”下的“文件”下面上传你的图片。如果你的图片格式不是gif,比如比较常见的是jpg,那么,你可以把上面代码中的图片名称改为header.jpg也行。一句话,你上传的图片名称和代码里一致就行。

 

文章转自网上邻居

Write a comment

Comments: 3
  • #1

    深圳24小时 (Tuesday, 29 December 2009 12:05)

    为什么还用这么多table

  • #2

    诸葛草帽 (Tuesday, 29 December 2009 12:08)

    回复深圳24小时:感觉这样会“模块化”,界面会比较好管理。

  • #3

    斯通国王 (Monday, 06 June 2011 20:23)

    很好,在这里学到很多。