3.1 index.html的代码

作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

这是index.html的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

$(function(){

$("#KinSlideshow").KinSlideshow({

moveStyle:"down",

intervalTime:8,

mouseEvent:"mouseover",

titleBar_height:40,

titleFont:{TitleFont_size:14,TitleFont_color:"#fdac11"}

});

})

</script>

<!--

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

</head>

<p>super network tunnel</p>

<p>突破所有网络限制</p>

</div>

</div>

<ul>

</ul>

</div>

</div>

</div>

<p class="banben">适用平台：所有windows</p>

</div>

</div>

<h2 class="blue">突破所有网络限制</h2>

<p>只要能开网页就能上QQ,玩游戏</p>

<p> 穿透各种防火墙 </p>

<p>突破一切网络限制</p>

<p> 让您尽情网上冲浪</p>

</div>

<h2 class="green">数据加密确保安全</h2>

<p>可选使用AES+RAS数据加密</p>

<p>确保所有通信数据安全</p>

<p>但速度会较慢</p>

</div>

<h2 class="org"> 一键登陆使用方便</h2>

<p>使用方法:安装完成后</p>

<p> 输入用户名密码后即可登陆</p>

<p>登陆成功后,直接启动QQ或其它网游</p>

<p> 即可突破网络限制 </p>

</div>

<ul>

<li>

<p>提供最新的手机服务</p>

</li>

<li>

<p>三大业务集团</p>

</li>

<li>

<p>提供最新的手机服务</p>

</li>

<li>

<p>提供最新的手机服务</p>

</li>

<li>

<p>提供最新的手机服务</p>

</li>

</ul>

</div>

<ul>

<li><a href="#">SNT V2.7.3 20121106 正式版发布</a></li>

</ul>

</div>

<ul>

<li><a href="#">SNT V2.7.3 20121106 正式版发布</a></li>

</ul>

</div>

友情链接：

</div>

</div>

</div>

</body>

</html>

Drupal版本:

drupal7

3.2 login.html源代码

作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

比较长。我们来看login.html的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

<p>super network tunnel</p>

<p>突破所有网络限制</p>

</div>

</div>

<ul>

</ul>

</div>

</div>

<tr>

</tr>

<tr>

</label></td>

</tr>

<tr>

</label></td>

</tr>

<tr>

<td><input name="" type="checkbox" value="" /><span class="zidong">两周内自动登录</span></td>

</tr>

<tr>

</tr>

</table>

</div>

<p class="banben">适用平台：所有windows</p>

</div>

</div>

<ul>

<li><a href="#">SNT V2.7.3 20121106 正式版发布</a></li>

</ul>

</div>

<ul>

<li><a href="#">SNT V2.7.3 20121106 正式版发布</a></li>

</ul>

</div>

友情链接：

</div>

</div>

</div>

</body>

</html>

其它页面我就不粘贴代码了，它们的结构和login.html一致。我们接下来需要对这些页面的HTML代码进行分析，就是打开所有的页面。我这里使用的是nodepad++。你也可以使用类似的工具。

Drupal版本:

drupal7

3.3 HTML布局结构分析

这是login.html的结构：

这是index.html的结构：

我们看到，在首页的中间部分，采用的是banner、jishu两个div的上下结构，而不是像其它页面的ziye-left、ziye-right的左右结构。希望读者读到这里的时候，认真的分析一下首页中间部分和其它页面的中间部分的不同之处。

我们这里是按照美工给什么，我们就输出什么的。但是我们会发现，美工在切图的时候，有的地方处理的有点小问题，它给我们程序员带来了更多的挑战。我们在这里只需要知道，首页并不是我们所想的左右结构，而是首先上下结构，然后左右结构。

我们这里先不去深究这一点，来分析一下top、nav、footer的结构。它们里面的内容在所有页面都是相同的，在实际项目当中，通常也都是这样的。

我们先来分析top的结构：

它里面包括top-left、top-right两个div；展开top-left，里面还是有结构的：

在这里面，我们看到，这个Logo，是一段文字，而不是一个图片，所以我们这里面，不需要使用Drupal页面模板里面的logo变量，我们只需要把它处理成为一个区块就可以了。我们这里面，在划分区域的时候，有三种方案：

1) 分一个区域：top。

2) 分两个区域：top-left、top-right。

3) 分三个区域：logo、logoright、top-right。

每个人的喜好不同，习惯也不一样。这三种方案，都是可行的，在这里面，我喜欢第三种方案。我喜欢多分几个区域，反正是固定不变的，区域分的越细，区块里面的HTML markup就越少。

我们来看nav的结构：

我们看到里面分为nav-left、nav-middle、nav-right，实际上这里的nav-left和nav-right里面是没有内容的，即便是把它们去掉，也不影响。所以我们这里只设置一个区域nav。

我们来看ziye的结构：

我们前期可以先把ziye-left处理成为content区域，也就是主内容区域。我在相当长的时间内，一直以为Drupal7里面，content区域是必须要有的，这在Drupal6下面是正确的，但是在Drupal7下，content区域已经不是必须的，我也是在前两天研究Drupal7主题的时候，才发现的。

我们看到ziye-right下面，分为banner-right、jishu-right2；而jishu-right2里面又包含两个news，其实我觉得，这里面的两个news，应该和banner-right并列才对，不知道美工在这里是怎么想的，我们总不能把banner-right、jishu-right2分成两个独立的区域吧。这里的HTML结构有点不合理的。

我们这里，把中间的部分，分成两个区域，content和ziye-right。后面我们会继续细化、调整的。

现在来看footer，它的HTML结构：

这里面，footer里面包含link、ft、snt；其中link里面包含link-left、link-right；ft里面为空；snt里面又分为snt-left、snt-right。区域的划分，也有多种方案：

1) 分一个区域：footer。

2) 分两个区域：link、snt。

3) 分三个区域：link、snt-left、snt-right。

4) 分四个区域：link-left、link-right、snt-left、snt-right。

这里面，我们采用第3种方案，也就是分三个区域的方案。这样我们普通页面的区域划分，就基本确定了下来，对于首页，我们暂时不去考虑它，因为我们后面会单独的为它制作页面模板。

实际上，对于这种静态HTML结构的分析，是必不可少的，尽管这里占了不小的篇幅。就是在转Drupal主题的前期，我们要充分的了解美工提供的静态HTML。我们现在继续。

Drupal版本:

drupal7

3 静态页面源码分析

Drupal版本:

3.1 index.html的代码

作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

Drupal版本:

3.2 login.html源代码

作者：老葛，北京亚艾元软件有限责任公司，http://www.yaiyuan.com

Drupal版本:

3.3 HTML布局结构分析

Drupal版本: