深喉咙模版制作初级教程[此教程为[php3.0教程，不通用最新版本]
广大的深喉咙用户，大家好！应一些用户深喉咙模版制作的实际需求，今天我就“显摆”一下，来个深喉咙模版制作“大揭秘”，哈哈！篇幅原因，这里我默认的是省略了建站需求的分析和需求的规划，直接从客户确认过的需求单到手后，构思好，开始模版制作.
第一步：作图工具出首页图，我用的是Fireworks(当然你可以用Photoshop)。一般企业公司网站的设计，我会定位为简洁明了的风格，抛弃过多花哨修饰。下面是主导航+三列左导航布局的首页效果图： [attach]183[/attach]
这里不得不啰嗦一点，大家仔细看这个首页图左侧，我放了一个邮箱登陆框，然后下面试两个大大的图片连接。我这样的版面安排从SEO方面来说是失败的。搜索引擎是从上到下的读取，一上来搜索引擎读取不到“任何有意义的信息”，这可是不对搜索引擎的“胃口”的噢，过多的SEO技巧的讨论这里不做细讲。
言归正传，这个模版我用的是混合布局，当然你可以完全用table来布局，也可以完全抛弃table，采用div+css来架构网站。
第二步：这些话题我们这里也不谈，单刀直入的讲解深喉咙模版的特有标签的应用。这个模版需要我们来添加的深喉咙标签有三处，它们分别是主导航，中间新闻列表和右侧文章列表。
1. 主导航。先看代码：
<tr>
<td valign="top"><div class="nav"><a href="./">首页</a> <!--{foreach from=$menu_arr item="entry"}--><a href="/?p=<!--{$entry->id|escape}-->"<!--{if $smarty.get.p eq $entry->id or $page->parentId eq $entry->id}--> class="selected"<!--{assign var='channelname' value=$entry->title}-->
<!--{assign var='channelid' value=$entry->id}--><!--{/if}-->><!--{$entry->title|escape}--></a>
<!--{foreachelse}-->未添加栏目<!--{/foreach}--></div></td>
</tr>
乍一看上去可能会让你首先“头大”一下，其实这是相当简单的，先不要怕。可以看到<div class="nav"></div>内令人头大的代码就是今天要讲的主角。这个<a href="./">首页</a>是固定的，后面是我们主栏目的一个循环，<!--{foreach from=$menu_arr item="entry"}--> <!--{/foreach}-->这句代码首先告诉了深喉咙系统是要读取主栏目数据了，记住Deepthroat v3.0集成环境版本集成环境版本的模版标签一大特征：<!--{标签内容}-->，也就是说html注释符包含着花括号，花括号中包含着标签内容这三部分组成了深喉咙模版标签。写到这里我才发现我拿这个模版的主导航作为面对深喉咙初级用户的讲解例子，可能有点贪多了。不要紧，就上面的主导航代码做个精减：<a href="./">首页</a> <!--{foreach from=$menu_arr item="entry"}--><a href="/?p=<!--{$entry->id|escape}-->"><!--{$entry->title|escape}--></a> <!--{foreachelse}-->
未添加栏目<!--{/foreach}-->
恩，这样看起来代码少多了，呵呵。这个时候再看
<a href="/?p=<!--{$entry->id|escape}-->"><!--{$entry->title|escape}--></a>
这句代码在客户端浏览器上就是
<a href="栏目连接地址">你在后台所添加的栏目名</a>
再在这句代码后面加上
<!--{foreachelse}-->未添加栏目
这句来的作用是当我们没有添加任何栏目的情况下会在主导航的位置显示出未添加栏目的字样，到此一个简单实用的主导航就搞定了。
我们经常在网上浏览别人的网站的时候会发现一个很好的细节，当我们点击某个主栏目进入此栏目的时候，这个主栏目就会在表现形式上区别于其他栏目。我这个模版的主导航是当前主栏目是以绿色光区别的。
那这个良好的小功能怎么在深喉咙模版里实现呢？仔细看主导航的代码原来只需一个判断：
在<a href="/?p=<!--{$entry->id|escape}-->">
的href="/?p=<!--{$entry->id|escape}-->"后面，>的前面加上
<!--{if $smarty.get.p eq $entry->id or $page->parentId eq $entry->id}--> class="selected"<!--{assign var='channelname' value=$entry->title}--><!--{assign var='channelid' value=$entry->id}--><!--{/if}-->
懂一点css的你会一下子在这句里发现你所熟悉的class="selected"这个类选择器，对就是这个被定义为selected的类别选择器控制了当前栏目的表现形式。
至于怎样表现就看你的css怎样来控制了！
那么我们怎样用上面的代码代替我们做好的html页面内静态的主导航代码呢？你会说这么多陌生的家伙我怎么会能记住呢，而且我也不愿意去花时间花精力去记住它！对，我相信你所说的话代表了一大批人的想法。老实说这些深喉咙标签具体的书写我也不能一一写出来，但我们要做的仅仅是复制并学会套用这些标签，并不要求你像书写html标记一样熟练无误的敲出来。这些“变幻莫测”的深喉咙标签我们的程序员会非常体贴的一一提供给我们这些前台的技术人员的。我举个实例来说吧，这是一个传统的不会另多数的前台技术人员所尴尬的例子。
Html代码如下(H-1)：
<table id="nav">
<tr>
<td><a href="./">首页</a></td>
<td><a href="#">公司简介</a></td>
<td><a href="#">产品展示</a></td>
<td><a href="#">…………</a></td>
<td><a href="#">联系我们</a></td>
</tr>
</table>
下面我先列出添加深喉咙标签后的代码（H-2）：
<table id="nav">
<tr>
<td><a href="./">首页</a></td>
<!--{foreach from=$menu_arritem="entry"}-->
<td><a href="/?p=<!--{$entry->id|escape}-->"><!--{$entry->title|escape}--></a></td> <!--{foreachelse}-->未添加栏目<!--{/foreach}-->
</tr>
</table>
好了，就是这么简单！对照一下H-1与H-2的代码，我们看到原来不是那么可怕的。
2．中间新闻列表。先看示例代码（H-3）：
<table width="296" border="0" align="center" cellpadding="0" cellspacing="0">
<!--{get_news id="8" n="5" assign='mynews'}-->
<!--{foreach from=$mynews item="entry"}-->
<tr>
<td width="24" class="tdIcon">
<img src="/skins/model_02/images/icon01.jpg" width="16" height="15" /></td>
<td width="272">
<a href="/?id=<!--{$entry->id|escape}-->"><!--{$entry->title|escape}--></a></td>
</tr>
<tr>
<td colspan="2" class="dashed"></td>
</tr>
<!--{foreachelse}-->无新闻！<!--{/foreach}-->
<tr>
<td colspan="2" class="more"><a href="#">>>更多</a></td>
</tr>
</table>
这是一段完整的新闻列表块，去掉“更多”这一句代码会更简单明了，但我还是保留下来给大家看，是要提醒一下，在首页的新闻列表块里一定要加上可以连接到新闻列表完整板块的“更多”连接。
<!--{get_news id="8" n="5" assign='mynews'}-->
中的id="8"表示我们在后台添加的新闻频道的id为8，n="5"表示读取最新5条。在哪里获得这个栏目id呢？如图： [attach]184[/attach]
当我们在后台点击哪个栏目，地址栏里就会显示出哪个栏目的id，如上图，产品栏目的id为68。这个模版我是新闻栏目下分了站内公告和其他新闻两个二级栏目，首页上分别体现了这两个二级栏目，我们就要获得这些二级栏目的id，进入后台，构建网站架构频道与栏目新闻中心，查看二级栏目id，如图： [attach]185[/attach]
新闻列表Html代码如下（H-4）：
<table width="296" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="24" class="tdIcon">
<img src="skins/model_02/images/images/icon01.jpg" width="16" height="15" /></td>
<td width="272"><a href="#">郑州百灵鸟音响设备有限公司网站建设中...</a></td>
</tr>
<tr>
<td colspan="2" class="dashed"></td>
</tr>
<tr>
<td width="24" class="tdIcon"><img src="skins/model_02/images/images/icon01.jpg" width="16" height="15" /></td>
<td width="272"><a href="#">郑州百灵鸟音响设备有限公司网站建设中...</a></td>
</tr>
<tr>
<td colspan="2" class="dashed"></td>
</tr>
<tr>
…省略代码部分…
</tr>
<tr>
<td colspan="2" class="more"><a href="#">>>更多</a></td>
</tr>
</table>
这样的代码大家应该很熟悉了，但还是要结合图来跟大家说一下： [attach]186[/attach]
上图的新闻列表是代码H-4在Dreamweaver里设计面板下的效果。
大家可以看到我用的是table来作为新闻列表的结构，新闻标题和它前面的一个小图标在一个<tr></tr>里，新闻标题下面是虚线分界线是一个<tr></tr>。（具体代码看H-4）也就是说这个新闻列表是两个<tr>为单位来循环的，因此明白了这一点，H-3 的代码就不难理解了,看下面的缩略代码。
<table width="296" border="0" align="center" cellpadding="0" cellspacing="0">
<!--{get_news id="8" n="5" assign='mynews'}-->
<!--{foreach from=$mynews item="entry"}-->
<tr>…省略代码内容…</tr>
<tr>
<td colspan="2" class="dashed"></td>
</tr>
<!--{foreachelse}-->无新闻！<!--{/foreach}-->
</table>
至此新闻列表搞定了！
3．右侧文章列表
其实就是新闻列表，完全参照新闻列表就行，只有一点需要改动：
<!--{get_news id="8" n="5" assign='mynews'}-->
这句代码中id的相应号码就可以了。
Ok，这个首页模版我们到现在已经完全做成了深喉咙的模版了。
第三步：common页制作
先看内容页的页面图： [attach]182[/attach]
如上图所示的1、2、3三个部分为动态的，是我们要加深喉咙标签的地方。
1．侧栏导航
也就是二级栏目，先看加过标签的代码(H-5)：
<div class="submenu">
<h2>♦栏目导航♦</h2>
<!--{foreach from=$submenu item="entry"}--><!--{if $smarty.get.p==$entry->id}-->
<a class="selected"><!--{$entry->title|escape}--></a>
<!--{else}--><a href="./?p=<!--{$entry->id|escape}-->"><!--{$entry->title|escape}--></a>
<!--{/if}--><!--{/foreach}-->
</div>
再看浏览器下面的源代码（H-6）：
<div class="submenu">
<h2>♦栏目导航♦</h2>
<a href="./?p=76">UWM的影响</a>
<a href="./?p=75">工作机会</a>
</div>
看到了吧，对，就是a标记，一点没错。
现在来分析一下代码H-5：
<!--{foreach from=$submenu item="entry"}-->
这句是告诉深喉咙系统在这里开始读取二级菜单了。
<!--{if $smarty.get.p==$entry->id}--><a class="selected"><!--{$entry->title|escape}--></a>
这句是一个if语句，判断如果这个栏目是当前的二级栏目，那么就显示为class="selected"定义的样子。至于class="selected"上面已经讲过了，不再多说。
如果不要这样一个亲和的小功能，这个侧栏导航的代码是这样的，更精短：
<div class="submenu">
<h2>♦栏目导航♦</h2>
<!--{foreach from=$submenu item="entry"}-->
<a href="./?p=<!--{$entry->id|escape}-->"><!--{$entry->title|escape}--></a>
<!--{/foreach}-->
</div>
就是这个样子，去掉了if 和else。好了，剩下的就是由深喉咙把它读取出来，浏览器再根据和它所关联的css来表现出来就是我们最终想要的一个漂亮实用的侧栏导航了。
2．当前栏目标题
这个相当简单，看加过标签的代码（H-7）：
<div class="commonTilte"><span><!--{$page->title}--></span></div>
这句在<span></span>中间的<!--{$page->title}-->就是我们唯一要加的标签，它能够读取我们当前页的栏目名称并显示在这个位置，就两个字，这个你应该能很好的记住的，我相信！
3．内容
这个也是足够的简单，甚至是简单的让人舒服，看加过标签的代码（H-8）：
<div class="content"><!--{$content}--></div>
看就一个字！这个你再记不住，就拍自己的脑袋好了，哈哈（开玩笑，不提倡自虐）。
看到这个标签我就不得不赞叹一下深喉咙系统的主架构师Maxazure了。你可别小看这简简单单的一个content，这可是好让Maxazure费了一番脑筋的。我把这一标签称作是深喉咙网站生成系统的“一个伟大创举”！为什么这么说？听我下面给你说……
我们只有在common.html内需要放置主体内容的地方，放上<!--{$content}-->标签，像一般企业站所需的功能模块：产品展示，留言本，新闻列表，图文，文章内容等等，都可以如愿的显示出来了。当然最后还要提醒你一点，要实现上面所说的，你还得做最后的一步那就是确保在common.html同级的目录下有这些相应得part文件，比如产品，就得有part_product_index.html和part_product_page.html这个两个html文件，至于怎样表现，最方便的就是你在这些html文件里直接内嵌入css定义样式就行了。怎样内嵌？这个问题你还要问，真拿你没办法了。好吧，你既然问了，那就告诉你了，看清楚了，下次不要再问这样的问题，呵呵。样式单形式如下：
<style type="text/css">
<!--
.picture {
font-size: 12px;
margin: 0px;
padding: 0px;
}
…这中间省略你可能定义的样式…
.picture img {
background-color: #FFFFFF;
padding: 1px;
border: 1px solid #CCCCCC;
}
-->
</style>
把这段css代码直接加入part_product_index.html文件里，放在所有代码的上面，这叫内嵌样式。
至此我们的一个网站的模版算是整体做好了，剩下的就是编辑内容了！
哈哈，简单吧！对于我们前台的技术人员来说制作深喉咙模版，大脑只需要多消耗一丁点儿的葡萄糖就可以了。相信你会很快喜欢上这个极容易上手的家伙！这也是我们深喉咙开发组所希望看到的。您的成功就是我们的收获，依然感谢大家对深喉咙的支持，谢谢！
深喉咙开发组成员 赵永明
2006-12-15 19:18
（未完待续，敬请关注后续教程！）
[attach]187[/attach] [s:1] 终于出来了，我先占个位，慢慢看。。汲取一点经验,不过貌似有点简单的说~~~呵呵~~~
不过学会举一反三才行 学习中。。。。 看了一遍.啥都么看懂 .在看2次 学习 好复杂，不如直接改现成模板的css 有点麻烦，呵呵 [s:6] 这还麻烦啊？！ 使劲看`~~~~~~~~~~~~~~~~~~~~ 是php版的吧 Deepthroat 3.0集成环境版的，是php。 [s:2] [s:2] 谢谢。。。用这个就好做了。。 此教程是否适合开源版本的 这是Deepthroat 3.0集成环境版的模版教程 顶! 看似简单，其实并不简单，模板里加了那些个东西后很多都还是需要再去手工修改，如果能够在后台直接修改，那就更好了。 可惜我现在连标签列表都找不到。
提供的模板里基本都需要自己去修改，可又没有详细的说明，连我这个用过smarty的家伙都给搞晕了，为什么很多的地方都似是而非呢？ [s:2] 手工修改给了大家更多的灵活性，大家可以随意的设计不同风格的表现形式。其实不需要对smarty了解多少，关键是要先搞清一个循环的概念，可以先照着这个就教程亲手做一两个，应该就有感觉了，呵呵 看的确实有点头大了，有没有通俗一点的 有教程就好，吾会努力的 太复杂了有的地方看不懂 斑竹好啊，我在用贵公司的系统时候，留言模块无法实现留言，是什么原因啊？ 看看 [s:6] 怎么没有ASP版 的呢 [s:4] 学习了。努力学习中。。。