第八课 index.htm模板制作(Left部分)

第八课 index.htm模板制作(Left部分)

时间:2011-06-18 23:57来源:未知 作者:admin点击: 169 次

今天我们来学习一下如何制作网站首页的模板index.htm。因为首页的制作比其他页面的制作过程和代码都要长和多，所以这一节课就先讲一下首页的左边Left的的制作过程和方法。先来分析一下截图，如下图1

图1

一般建设企业网站的时候都是以这种结构为基础的，就是用一个大的DIV（<div id="main">这里放Left的DIV和Right的DIV</div>或者<div id="body">这里放Left的DIV和Right的DIV</div>）来包住两个中等的DIV（<div id="left"></div>和<div id="right"></div>），再来就是在Left和Right的两个的DIV中放进各种内容，这样，一个首页的中间部分就算做好了。

好了，分析完了，现在就来写代码吧！

是用id="left"好还是class="left"好？

现在流行网站制作的Html语言就是xhtml，在用DIV来排版的时候经常用到class 和 id 来选择调用CSS样式属性。对学习CSS的新手来说class和id可能比较模糊，同时不知道什么时候该用class，什么时候又用id，以及它们用法与限制是怎么样的。接下来我们就来详细了解class与id基本属性及用法。

Class 在程序中称“类”，同时在CSS中也书面语也叫“类”。在CSS样式中以小写的“点”及“.”来命名如： .left{属性：属性值;} ,而在html页面里则以class="left" 来选择调用,命名好的CSS又叫css选择器。如： .left{属性：属性值;} 选择器在html调用为“<div class="left">我是class例子</div> ”如果不知道怎么引用CSS，那就可以了解下css引用。

而且class(类)在同一个html网页页面可以无数次的调用相同的class类，在这里例子里则可以在对应的网页里可以无数次调用选择 “left”。这也说明class一般是用来调用css中的预配制属性的，比如说有一个预配制属性为如这里的 “.left_1{属性：属性值;} ”，这样就可以像调用函数一样不用再一个网页页面里重复的配置一个“类”属性，而只需要写上一个class类选择，就可以在同一个页面里任何位置调用选择具有相同的class类。

id是表示着标签的身份，在JS脚本中会用到id，当JS要修改一个标签的属性时，JS会将id名作为该标签的唯一标识进行操作。也就是说id只是页面元素的标识，供其他元素脚本等引用。假如你的页面里出现了两个id那JS效果特性较出现逻辑错误不知道依据哪个 id来改变其标签属性。 在CSS里的id不一定为JS而设置的，但是同样id在页面里也只能出现一次，并且是唯一性。虽然可能我们在一个页面里同时调用相同的id多次但是仍然没有出现页面混乱错误，但是为了W3C及各个标准我们也要遵循id在一个页面里唯一性。以免出现浏览器兼容问题。

页面中的id的用法怎么的？

通常我们在CSS样式定义的时候 以“#”来开头命名id名称如：#left{属性:属性值;} 这个也有点像class的定义，只是class是以小写句号“.”开头命名，而id是以“#”好开头定义。那id是怎么个用法呢？ CSS里的id用法与class用法一样，只是把class换成id。如：在CSS文件中定义 #left{float:left;width: 225px;} ,在页面上调用<div id="left">这里放内容</div>

好了，说到这大家也应该对CSS中的id 和class 的有了一定的了解了，如果大家还是不太清楚的话，可以上网找一下更多的资料，相信用心去学的话一定能学得好的，下面接着来。先看一段代码：

<div class="left">
{dede:include filename='product.htm'/}
{dede:include filename='contact.htm'/}
</div>

什么意思呢？{dede:include filename='某个模板名字'/}这是织梦专有的“文件加载标签”，也就是用这个标签的话，生成的页面就会自动加载模板文件夹里面的某个模板了，其实上面的代码也可以写成：

<div class="left-1">
<h3>产品列表</h3>
<div id="left-b">
{dede:channelartlist row=4 typeid='5,6,7,8'}
<ul>
<a href="{dede:field name='typeurl'/}" title="{dede:field name='typename'/}" style="padding-left:0px;"><h4>{dede:field name='typename'/}</h4></a>
{dede:arclist titlelen='42' row='10' orderway='asc'}
<li><strong><a href="[field:arcurl /]" title="[field:title /]">[field:title /]</a></strong></li>
{/dede:arclist}
</ul>
{/dede:channelartlist}
</div>
<div class="left-b"></div>
</div>

<div class="left-1">
<h3>联系我们</h3>
<div id="left-b">
<ul style="line-height:25px;">
公司名称:{dede:global.cfg_webname/}<br />
公司地址:东莞市寮步镇塘唇工业区<br />
公司电话:[phone] 6201<br />
招商热线:18666423951 冯经理<br />
网址:<a href="{dede:global.cfg_basehost/}" title="{dede:global.cfg_webname/}" style=" padding-left:0px;text-decoration:underline">{dede:global.cfg_basehost/}</a><br />
E-mail:<a href="mailto:{dede:global.cfg_adminemail/}" title="给我发邮箱" rel="nofollow" style=" padding-left:0px;text-decoration:underline">{dede:global.cfg_adminemail/}</a>
</ul>
</div>
<div class="left-b"></div>
</div>
如下图2：

图2

那为什么要这样做呢？这就涉及到了“全站调用”的问题，因为如果某个模块，在整个网站中都要重复调用的话（像“联系我们”这种的模块），如果突然要修改某个地方，那么就要修改多个模板文件了，这样做起来是麻烦的。但是，如果把这些模块都整合在一个文件模板里面，然后再用{dede:include filename='' /}这个标签来全站调用，要做修改的话也需要修改一个文件就行啦！

注意，filename='product.htm' 这个product.htm这个文件一定是要放在跟其他模板文件相同的目录下，如下图3：

图3

然后我们来一个一个地分析这两个模板product.htm 和contact.htm。

{dede:channelartlist row=4 typeid='5,6,7,8'}
<ul>
<a href="{dede:field name='typeurl'/}" title="{dede:field name='typename'/}" style="padding-left:0px;"><h4>{dede:field name='typename'/}</h4></a>
{dede:arclist titlelen='42' row='10' orderway='asc'}
<li><strong><a href="[field:arcurl /]" title="[field:title /]">[field:title /]</a></strong></li>
{/dede:arclist}
</ul>
{/dede:channelartlist}

typeid='5,6,7,8' 如下图4。一个数字相对应一个栏目的ID地址。我们来看一下这个标签运行之后的效果怎样，如下图5和图6。这个标签的用法就是，先读出5,6,7,8 这四个栏目的栏目名称，然后再循环出每个栏目下的所有的文档。从图7中的代码截图就可以清楚地看到。

图4

图5

图6

图7

关于这个标签的更多用法可以参考文章《织梦DEDE制作二级导航条的方法与代码》http://www.baitong.cc/dedecms/133.html

内容能调用出来了，那么剩下的就是排版的问题。很多的新手对DIV+CSS排版都感到很陌生，不知道从何入手。其实要学好DIC+CSS排版，除了要多看一些好的网站的排版方法之外，最重要的还是自己手动写代码。

CSS代码如下：
.left{ width:225px; float:left; display:inline}
.left-b{ width:225px; background:url(../images/bottom.jpg) no-repeat; height:28px;}
.left-1{ min-height:100px; height:auto; width:225px;}
.left-1 h3{ background:url(../images/title.png) no-repeat; height:46px; color:#FFF; font-size:18px;line-height:45px; padding-left:47px;}
.left-1 h3 a{ color:#FFF}
#left-b{ width:225px; background:url(../images/t-bg.jpg) repeat-y;}
#left-b h4{ font-size:18px; color:#303030; padding-left:15px;}
#left-b strong{ font-weight:normal}
#left-b ul{ padding:10px}
#left-b li{ background:url(../images/dot2.jpg) no-repeat 0 7px; height:30px; line-height:25px;}
#left-b a{ padding-left:30px; color:#303030}
#left-b a:hover{ color:#d1c968}

大家在用DIV排版过程要注意一点，就是如果这个DIV用了Float属性的话，就一定要给它一个固定的宽度，不然就会给“挤”变形了，再有一个就是，如果这个DIV（或者其他的元素如:li）用了背景图片的话，就一定要加上宽和高这两个属性，不然在IE6中是无法把背景图片的效果显示出来的。

对于新手来说，想要更加方面地学习CSS的话，最好是用Firefox（火狐浏览器）来做网站，因为里面有个Firebug是一个很不错的插件，它会帮助你方面地查看每个元素所使用的CSS。如下图8，然后在下面就可以看到这个元素的所有的属性了，如下图9。Firebug的安装方法：点击浏览器的“工具”——“添加附件”，在弹出的对话框中的搜索框中输入“Firebug”进行搜索。如下图10，在搜索出来的结果中点击该插件右下角的“添加致Firefox”按键即可。

图8

图9