相关文章
北京网站建设取之网民，还之网民；关于运营社区的一点思考
北京网站制作电子商务迎投资高潮 B2B、B2C界限逐渐模糊
北京网页设计老程序员十年生涯黯然总结(二)
企通互联解除baidu&google封杀的方法
企通互联爱情公寓：建立男女平衡的和谐交友社区
北京网站设计卖男内裤的清华女生
网站制作做了1年多的在线电影站 交流下经验
网页设计3gp.cn站长飞天：我是怎么做到日7WIP的！
网站建设菜鸟建站五步走 怎样开始个人站长之旅？
北京网页设计写给刚做网站不久的草根站长们
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站建设 >> 北京网站设计北京网站制作图片频道的模板制作
北京网站设计北京网站制作图片频道的模板制作
作者： 北京网站建设 日期：2008-03-27 06:04:51 来源： http://www.qitongnet.com
菠萝教你做模板之五－图片频道的模板制作网站设计
网站建设
前面我们已经讲过了文章、下载频道的模板制作，今天讲完图片频道之后，剩下的就是专题的制作，虽然每个频道都有专题，但是制作方法都是一样的，我们讲集中讲解。好，闲话不说，开始讲课。北京网站制作
网站设计
打开picture/index.html文件，我们就会发现都是我们前面讲过很熟悉的标签，图片频道与别的频道最大的不同，就是在显示的时候默认显示的都是缩略图，也就是我们看到的这一串标签网站设计 北京网站建设
北京网站制作
{$picpicture(0,$channelid,$cat[catid],1,0,0,10,30,0,0,0,3,1,0,130,100,5)}网站设计 北京网站制作
北京网站设计
因此我们主要来讲这个标签的制作，别的顶级栏目。终极栏目的制作和文章频道都是相同的网站设计
北京网页设计
在picture文件夹下面以tag开头的文件有4个 北京网站设计网页设计
tag_picpicture.html 图片缩略图调用标签北京网站建设
tag_picturelist.html 图片标题列表调用标签网站设计
tag_slidepicpicture.html 图片幻灯片调用标签北京网站建设
tag_slidepicpicture-js.html 图片js效果标签模板 北京网页设计北京网站建设
企通互联
打开tag_picpicture.html，我们会看到网站制作
{loop $pictures $i $picture} 北京网页设计
网页设计
$i是用来判断几列的北京网站制作
利用这个i来和系统设置的$cols 做比较网站制作
利用他们的余数来判断是否分行企通互联
北京网站建设
<img src='{$picture[thumb]}' alt='{$picture[alt]}' width='{$imgwidth}' height='{$imgheight}'> 这里面就是你在发布图片时候选的 缩略图的大小网站设计
<a href='{$picture[url]}' target='_blank' title='{$picture[alt]}'[/color]>{$picture[title]}</a>北京网页设计
网页设计
这几个分别是图片的地址 图片的提示 图片的标题网页设计
网站建设
{if $descriptionlen}北京网站设计
<tr>企通互联
<td>{$picture[content]} <a href='{$picture[url]}' target='_blank'>详细>></a></td>北京网站设计
</tr>北京网站建设
{/if}网站设计
网页设计
这一句是，如果允许显示说明，则显示具体的说明信息北京网站建设
网站设计
网站建设
网站建设在tag_picturelist.html中，显示的东西则比缩略图模板要多企通互联
{$picture[img]} 标题图片企通互联
{$picture[catname]} 所属栏目网站制作
<a href="{$picture[url]}" title="{$picture[alt]}" target="{$picture[target]}" class="tag_title_link{$picture[fonttype]}">{$picture[title]}</a> 图片标题及路径网站建设
{if $showhits}({$picture[hits]}){/if} 如果允许显示点击数，则显示点击数网站建设
{if $showauthor}[ 网站设计作者:{$picture[author]}]{/if} 显示作者网站设计
{if $datetype}[<span class="tag_date">{$picture[adddate]}</span>]{/if} 显示添加时间网页设计
{if $descriptionlen}{$picture[content]}{/if} 显示说明网站制作
北京网页设计
企通互联
图片内容页content.html的制作北京网站设计
打开这个网页北京网站制作
<script language=javascript type=text/javascript>北京网站建设
function fontZoom(size)北京网站制作
{北京网站设计
document.getElementById('{$addtime}l').style.fontSize=size+'px'网站建设
}网站设计
var pictureurl=new Array();北京网站建设
var picturename=new Array();网页设计
{loop $pictureurls $id $pic}北京网站建设
pictureurl[{$id}] = "{$pic[url]}";网站设计
picturename[{$id}] = "{$pic[name]}";网页设计
{/loop}北京网站制作
</script>企通互联
网站设计
这个js函数是字体缩放函数北京网站设计
网站建设
<!--图片浏览JS开始-->北京网站建设
<script language=JavaScript>北京网页设计
<!-- Begin北京网页设计
var rotate_delay =4000; // delay in milliseconds (1000 = 1 secs)北京网站制作
current = 0;企通互联
function next() {北京网站建设
if(document.slideform.slide[current+1])北京网站建设
{网页设计
if(document.all){网页设计
document.images.show.style.filter="blendTrans(duration=2)"网站制作
document.images.show.style.filter="blendTrans(duration=crossFadeDuration)"网站制作
document.images.show.filters.blendTrans.Apply() 北京网页设计
}北京网站设计
document.images.show.src = pictureurl[current+1];网站制作
setidval('picname',picturename[current+1]);网页设计
if(document.all){网站设计
document.images.show.filters.blendTrans.play() 网站制作
}北京网页设计
document.slideform.slide.selectedIndex = ++current;北京网页设计
}网站制作
else企通互联
first();北京网站设计
}企通互联
企通互联
function previous()北京网站制作
{ 北京网站建设
if(current-1 >= 0)企通互联
{网站建设
if(document.all){北京网站设计
document.images.show.style.filter="blendTrans(duration=2)"网站设计
document.images.show.style.filter="blendTrans(duration=crossFadeDuration)"企通互联
document.images.show.filters.blendTrans.Apply() 网站建设
}网页设计
document.images.show.src = pictureurl[current-1];网页设计
setidval('picname',picturename[current-1]);北京网页设计
if(document.all){网站设计
document.images.show.filters.blendTrans.play() 北京网站制作
} 网站建设
document.slideform.slide.selectedIndex = --current;网站制作
}网站制作
else北京网站制作
last();北京网站制作
网页设计北京网站制作
}网站制作
北京网站建设
function first()北京网页设计
{网站设计
current = 0;网站设计
if(document.all){北京网页设计
document.images.show.style.filter="blendTrans(duration=2)"网站建设
document.images.show.style.filter="blendTrans(duration=crossFadeDuration)"网站建设
document.images.show.filters.blendTrans.Apply() 网站设计
}北京网页设计
document.images.show.src = pictureurl[0];网站制作
setidval('picname',picturename[0]);网站建设
if(document.all){网站设计
document.images.show.filters.blendTrans.play() 北京网页设计
} 网页设计
document.slideform.slide.selectedIndex = 0;网页设计
}北京网站建设
北京网页设计
function last() {网页设计
current = document.slideform.slide.length-1;北京网站建设
if(document.all){北京网站建设
document.images.show.style.filter="blendTrans(duration=2)"北京网页设计
document.images.show.style.filter="blendTrans(duration=crossFadeDuration)"网站制作
document.images.show.filters.blendTrans.Apply() 网站建设
}北京网站建设
document.images.show.src = pictureurl[current];网页设计
setidval('picname',picturename[current]);北京网页设计
if(document.all){北京网站设计
document.images.show.filters.blendTrans.play() 北京网站制作
} 网站设计
document.slideform.slide.selectedIndex = current;网站建设
}网站建设
网页设计
function ap(text) {网页设计
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";网页设计
rotate();网站建设
}北京网页设计
网站设计
function change() {网站建设
current = document.slideform.slide.selectedIndex;北京网页设计
if(document.all){北京网站建设
document.images.show.style.filter="blendTrans(duration=2)"企通互联
document.images.show.style.filter="blendTrans(duration=crossFadeDuration)"网站制作
document.images.show.filters.blendTrans.Apply() 网页设计
}北京网站制作
document.images.show.src = pictureurl[current];网站制作
setidval('picname',picturename[current]);北京网页设计
if(document.all){网站设计
document.images.show.filters.blendTrans.play() 北京网站建设
} 网站建设
}北京网站制作
企通互联
function rotate() {网站建设
if (document.slideform.slidebutton.value == "Stop") {网页设计
current = (current == document.slideform.slide.length-1) ? 0 : current+1;网站设计
if(document.all){企通互联
document.images.show.style.filter="blendTrans(duration=2)"北京网站制作
document.images.show.style.filter="blendTrans(duration=crossFadeDuration)"网站建设
document.images.show.filters.blendTrans.Apply() 北京网站制作
}网页设计
document.images.show.src = pictureurl[current];网站制作
setidval('picname',picturename[current]);网页设计
if(document.all){北京网站建设
document.images.show.filters.blendTrans.play() 网站制作
} 北京网站建设
document.slideform.slide.selectedIndex = current;北京网站制作
window.setTimeout("rotate()", rotate_delay);企通互联
}网站建设
}企通互联
function openpic()网站建设
{北京网站制作
window.open(pictureurl[current]);北京网站建设
}网站建设
// End -->北京网页设计
</script>北京网站建设
网站建设
这个函数是控制js变换的函数企通互联
网站设计
北京网页设计
网站设计 企通互联
从<form name=slideform >这个地方开始，就是图片的显示区网页设计
<span id="picname" style="font-weight:bold;font-size:14px;">{$pictureurls[0][name]}</span> 企通互联
图片名称北京网站设计
<img src="{$pictureurls[0][url]}" align="center" name="show" id="picture{$id}" alt="{$pictureurls[0][name]}" border="0" style="cursor:hand;" on click="openpic()" on load="javascript :setpicWH(picture{$id},720,1000)">企通互联
图片的具体内容网站建设
<!--图片名列表-->北京网页设计
<select on change="change();" name="slide">北京网页设计
{loop $pictureurls $id $pic}北京网站建设
<option value="{$id}">{$pic[name]}</option>企通互联
{/loop}网页设计
</select>北京网站制作
网站设计
!--控制按钮-->北京网页设计
<input title=Beginning on click=first(); type=button value=" |<< " class="btn">北京网站制作
<input title=Previous on click=previous(); type=button value=" << " class="btn">北京网站建设
<input title=AutoPlay on click=ap(this.value); type=button value=Start name=slidebutton class="btn">北京网站制作
<input title=Next on click=next(); type=button value=" >> " class="btn">北京网页设计
<input name="button" type=button title=End on Click=last(); value=" >>| " class="btn">企通互联
北京网站建设
后面的东西就和文章页面是一样的，都是发布评论的内容北京网页设计
网站制作
网站建设
前面我们已经讲过了文章、下载频道的模板制作，今天讲完图片频道之后，剩下的就是专题的制作，虽然每个频道都有专题，但是制作方法都是一样的，我们讲集中讲解。好，闲话不说，开始讲课。北京网站制作
网站设计
打开picture/index.html文件，我们就会发现都是我们前面讲过很熟悉的标签，图片频道与别的频道最大的不同，就是在显示的时候默认显示的都是缩略图，也就是我们看到的这一串标签网站设计 北京网站建设
北京网站制作
{$picpicture(0,$channelid,$cat[catid],1,0,0,10,30,0,0,0,3,1,0,130,100,5)}网站设计 北京网站制作
北京网站设计
因此我们主要来讲这个标签的制作，别的顶级栏目。终极栏目的制作和文章频道都是相同的网站设计
北京网页设计
在picture文件夹下面以tag开头的文件有4个 北京网站设计网页设计
tag_picpicture.html 图片缩略图调用标签北京网站建设
tag_picturelist.html 图片标题列表调用标签网站设计
tag_slidepicpicture.html 图片幻灯片调用标签北京网站建设
tag_slidepicpicture-js.html 图片js效果标签模板 北京网页设计北京网站建设
企通互联
打开tag_picpicture.html，我们会看到网站制作
{loop $pictures $i $picture} 北京网页设计
网页设计
$i是用来判断几列的北京网站制作
利用这个i来和系统设置的$cols 做比较网站制作
利用他们的余数来判断是否分行企通互联
北京网站建设
<img src='{$picture[thumb]}' alt='{$picture[alt]}' width='{$imgwidth}' height='{$imgheight}'> 这里面就是你在发布图片时候选的 缩略图的大小网站设计
<a href='{$picture[url]}' target='_blank' title='{$picture[alt]}'[/color]>{$picture[title]}</a>北京网页设计
网页设计
这几个分别是图片的地址 图片的提示 图片的标题网页设计
网站建设
{if $descriptionlen}北京网站设计
<tr>企通互联
<td>{$picture[content]} <a href='{$picture[url]}' target='_blank'>详细>></a></td>北京网站设计
</tr>北京网站建设
{/if}网站设计
网页设计
这一句是，如果允许显示说明，则显示具体的说明信息北京网站建设
网站设计
网站建设
网站建设在tag_picturelist.html中，显示的东西则比缩略图模板要多企通互联
{$picture[img]} 标题图片企通互联
{$picture[catname]} 所属栏目网站制作
<a href="{$picture[url]}" title="{$picture[alt]}" target="{$picture[target]}" class="tag_title_link{$picture[fonttype]}">{$picture[title]}</a> 图片标题及路径网站建设
{if $showhits}({$picture[hits]}){/if} 如果允许显示点击数，则显示点击数网站建设
{if $showauthor}[ 网站设计作者:{$picture[author]}]{/if} 显示作者网站设计
{if $datetype}[<span class="tag_date">{$picture[adddate]}</span>]{/if} 显示添加时间网页设计
{if $descriptionlen}{$picture[content]}{/if} 显示说明网站制作
北京网页设计
企通互联
图片内容页content.html的制作北京网站设计
打开这个网页北京网站制作
<script language=javascript type=text/javascript>北京网站建设
function fontZoom(size)北京网站制作
{北京网站设计
document.getElementById('{$addtime}l').style.fontSize=size+'px'网站建设
}网站设计
var pictureurl=new Array();北京网站建设
var picturename=new Array();网页设计
{loop $pictureurls $id $pic}北京网站建设
pictureurl[{$id}] = "{$pic[url]}";网站设计
picturename[{$id}] = "{$pic[name]}";网页设计
{/loop}北京网站制作
</script>企通互联
网站设计
这个js函数是字体缩放函数北京网站设计
网站建设
<!--图片浏览JS开始-->北京网站建设
<script language=JavaScript>北京网页设计
<!-- Begin北京网页设计
var rotate_delay =4000; // delay in milliseconds (1000 = 1 secs)北京网站制作
current = 0;企通互联
function next() {北京网站建设
if(document.slideform.slide[current+1])北京网站建设
{网页设计
if(document.all){网页设计
document.images.show.style.filter="blendTrans(duration=2)"网站制作
document.images.show.style.filter="blendTrans(duration=crossFadeDuration)"网站制作
document.images.show.filters.blendTrans.Apply() 北京网页设计
}北京网站设计
document.images.show.src = pictureurl[current+1];网站制作
setidval('picname',picturename[current+1]);网页设计
if(document.all){网站设计
document.images.show.filters.blendTrans.play() 网站制作
}北京网页设计
document.slideform.slide.selectedIndex = ++current;北京网页设计
}网站制作
else企通互联
first();北京网站设计
}企通互联
企通互联
function previous()北京网站制作
{ 北京网站建设
if(current-1 >= 0)企通互联
{网站建设
if(document.all){北京网站设计
document.images.show.style.filter="blendTrans(duration=2)"网站设计
document.images.show.style.filter="blendTrans(duration=crossFadeDuration)"企通互联
document.images.show.filters.blendTrans.Apply() 网站建设
}网页设计
document.images.show.src = pictureurl[current-1];网页设计
setidval('picname',picturename[current-1]);北京网页设计
if(document.all){网站设计
document.images.show.filters.blendTrans.play() 北京网站制作
} 网站建设
document.slideform.slide.selectedIndex = --current;网站制作
}网站制作
else北京网站制作
last();北京网站制作
网页设计北京网站制作
}网站制作
北京网站建设
function first()北京网页设计
{网站设计
current = 0;网站设计
if(document.all){北京网页设计
document.images.show.style.filter="blendTrans(duration=2)"网站建设
document.images.show.style.filter="blendTrans(duration=crossFadeDuration)"网站建设
document.images.show.filters.blendTrans.Apply() 网站设计
}北京网页设计
document.images.show.src = pictureurl[0];网站制作
setidval('picname',picturename[0]);网站建设
if(document.all){网站设计
document.images.show.filters.blendTrans.play() 北京网页设计
} 网页设计
document.slideform.slide.selectedIndex = 0;网页设计
}北京网站建设
北京网页设计
function last() {网页设计
current = document.slideform.slide.length-1;北京网站建设
if(document.all){北京网站建设
document.images.show.style.filter="blendTrans(duration=2)"北京网页设计
document.images.show.style.filter="blendTrans(duration=crossFadeDuration)"网站制作
document.images.show.filters.blendTrans.Apply() 网站建设
}北京网站建设
document.images.show.src = pictureurl[current];网页设计
setidval('picname',picturename[current]);北京网页设计
if(document.all){北京网站设计
document.images.show.filters.blendTrans.play() 北京网站制作
} 网站设计
document.slideform.slide.selectedIndex = current;网站建设
}网站建设
网页设计
function ap(text) {网页设计
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";网页设计
rotate();网站建设
}北京网页设计
网站设计
function change() {网站建设
current = document.slideform.slide.selectedIndex;北京网页设计
if(document.all){北京网站建设
document.images.show.style.filter="blendTrans(duration=2)"企通互联
document.images.show.style.filter="blendTrans(duration=crossFadeDuration)"网站制作
document.images.show.filters.blendTrans.Apply() 网页设计
}北京网站制作
document.images.show.src = pictureurl[current];网站制作
setidval('picname',picturename[current]);北京网页设计
if(document.all){网站设计
document.images.show.filters.blendTrans.play() 北京网站建设
} 网站建设
}北京网站制作
企通互联
function rotate() {网站建设
if (document.slideform.slidebutton.value == "Stop") {网页设计
current = (current == document.slideform.slide.length-1) ? 0 : current+1;网站设计
if(document.all){企通互联
document.images.show.style.filter="blendTrans(duration=2)"北京网站制作
document.images.show.style.filter="blendTrans(duration=crossFadeDuration)"网站建设
document.images.show.filters.blendTrans.Apply() 北京网站制作
}网页设计
document.images.show.src = pictureurl[current];网站制作
setidval('picname',picturename[current]);网页设计
if(document.all){北京网站建设
document.images.show.filters.blendTrans.play() 网站制作
} 北京网站建设
document.slideform.slide.selectedIndex = current;北京网站制作
window.setTimeout("rotate()", rotate_delay);企通互联
}网站建设
}企通互联
function openpic()网站建设
{北京网站制作
window.open(pictureurl[current]);北京网站建设
}网站建设
// End -->北京网页设计
</script>北京网站建设
网站建设
这个函数是控制js变换的函数企通互联
网站设计
CODE:
<!--主标题--><div id="title" align="center">{$title}</div>网站制作
<!--文件属性--><div class="par" align="center">发布日期：{$adddate} 作者：<a href="{PHPCMS_PATH}member/member.php?username={$username}" class="member_url">{$author}</a> 来源：<a href="{$copyfromurl}" target="_blank">{$copyfromname}</a> 浏览次数：<span id="hits">0</span> <a href="{PHPCMS_PATH}comment/index.php?item=pictureid&itemid={$pictureid}&itemurl={$itemurl}" class="commenturl">网友评论<span id="commentnumber1">0</span>条</a> 文字大小：【<a href="javascript :fontZoom(16)">大</a>】【<a href="javascript :fontZoom(14)">中</a>】【<a href="javascript :fontZoom(12)">小</a>】 评分等级：{$stars}</div>网站建设
<hr align="center" width="740" size="1" noshade style="color:#cccccc;" />北京网站设计
北京网站制作
北京网页设计
<div class="content_text" id="{$addtime}1"><a href="{$itemurl}">来源：{$_PHPCMS['sitename']}({$PHP_SITEURL})<br/>作者：{$username}<br/>原文：{$title}({$itemurl})</a></div>北京网站建设
<div class="content_text" id="{$addtime}l">{$content}</div>北京网站设计
{if $specialid}<div class="content_text" id="{$addtime}l">相关专题：<a href="{$special[specialurl]}" class="specialurl">{$special[specialname]}</a></div>{/if}
这一串和我们以前讲文章页面是一样的，是一些相关的信息网站建设<!--文件属性--><div class="par" align="center">发布日期：{$adddate} 作者：<a href="{PHPCMS_PATH}member/member.php?username={$username}" class="member_url">{$author}</a> 来源：<a href="{$copyfromurl}" target="_blank">{$copyfromname}</a> 浏览次数：<span id="hits">0</span> <a href="{PHPCMS_PATH}comment/index.php?item=pictureid&itemid={$pictureid}&itemurl={$itemurl}" class="commenturl">网友评论<span id="commentnumber1">0</span>条</a> 文字大小：【<a href="javascript :fontZoom(16)">大</a>】【<a href="javascript :fontZoom(14)">中</a>】【<a href="javascript :fontZoom(12)">小</a>】 评分等级：{$stars}</div>网站建设
<hr align="center" width="740" size="1" noshade style="color:#cccccc;" />北京网站设计
北京网站制作
北京网页设计
<div class="content_text" id="{$addtime}1"><a href="{$itemurl}">来源：{$_PHPCMS['sitename']}({$PHP_SITEURL})<br/>作者：{$username}<br/>原文：{$title}({$itemurl})</a></div>北京网站建设
<div class="content_text" id="{$addtime}l">{$content}</div>北京网站设计
{if $specialid}<div class="content_text" id="{$addtime}l">相关专题：<a href="{$special[specialurl]}" class="specialurl">{$special[specialname]}</a></div>{/if}
北京网页设计
网站设计 企通互联
从<form name=slideform >这个地方开始，就是图片的显示区网页设计
<span id="picname" style="font-weight:bold;font-size:14px;">{$pictureurls[0][name]}</span> 企通互联
图片名称北京网站设计
<img src="{$pictureurls[0][url]}" align="center" name="show" id="picture{$id}" alt="{$pictureurls[0][name]}" border="0" style="cursor:hand;" on click="openpic()" on load="javascript :setpicWH(picture{$id},720,1000)">企通互联
图片的具体内容网站建设
<!--图片名列表-->北京网页设计
<select on change="change();" name="slide">北京网页设计
{loop $pictureurls $id $pic}北京网站建设
<option value="{$id}">{$pic[name]}</option>企通互联
{/loop}网页设计
</select>北京网站制作
网站设计
!--控制按钮-->北京网页设计
<input title=Beginning on click=first(); type=button value=" |<< " class="btn">北京网站制作
<input title=Previous on click=previous(); type=button value=" << " class="btn">北京网站建设
<input title=AutoPlay on click=ap(this.value); type=button value=Start name=slidebutton class="btn">北京网站制作
<input title=Next on click=next(); type=button value=" >> " class="btn">北京网页设计
<input name="button" type=button title=End on Click=last(); value=" >>| " class="btn">企通互联
北京网站建设
后面的东西就和文章页面是一样的，都是发布评论的内容北京网页设计
上一篇：网站设计下载频道的模板制作
下一篇：网站建设制作准备及网站首页的制作