1、ages 放图片的
2、index.html 主页
3、style 修改样式
4、layout 网页布局框架——主页
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
height:500px
background: linear-gradient(#A6CADE,#F8C6F8) no-repeat
}
ul,li,div {
padding:0margin:0
}
.container{
width: 500px
margin:0 auto
}
#tab-con div{
display: none
width:500px
height:282px
}
#tab-con div img{
width: 100%
height:100%
}
#tab-con div.active{
display: block
}
#tab-list ul li{
float:left
list-style: none
}
#tab-list ul li a{
display: block
width:70px
text-align: center
text-decoration: none
color:#000
background: #D6D6D1
}
#tab-list ul li.active a{
color:#fff
background:#f96302
}
</style>
</head>
<body>
<div class="container">
<div id="tab-con">
<div class="active"><img src="img/test1.jpg"></div>
<div><img src="img/test2.jpg"></div>
<div><img src="img/test3.jpg"></div>
<div>图片4</div>
<div>图片5</div>
<div>图片6</div>
<div>图片7</div>
</div>
<div id="tab-list">
<ul>
<li><a href="javascript:">首页</a></li>
<li><a href="javascript:">美食</a></li>
<li><a href="javascript:">交通</a></li>
<li><a href="javascript:">图片4</a></li>
<li><a href="javascript:">图片5</a></li>
<li><a href="javascript:">图片6</a></li>
<li><a href="javascript:">图片7</a></li>
</ul>
</div>
</div>
<script>
var tablist = document.getElementById('tab-list').getElementsByTagName('li')
var tabcon = document.getElementById('tab-con').getElementsByTagName('div')
for(var i = 0 i<tablist.length i++){
tablist[i].onclick = function(){
starttab(this)
}
}
function starttab(obj){
for(var i = 0 i<tablist.length i++){
if(tablist[i] == obj){
tablist[i].className = "active"
tabcon[i].className = "active"
}else{
tablist[i].className = ""
tabcon[i].className = ""
}
}
}
</script>
</body>
</html>
1、ASP文件中的代码pencat=rs.Fields.Item("m_content").Value
pencat=replace(pencat,"t_title",n_title)
pencat=replace(pencat,"t_author",n_author)
pencat=replace(pencat,"t_content",n_content)
Set fso = Server.CreateObject("Scripting.FileSystemObject")
Set fout = fso.CreateTextFile(server.mappath(fpath&"\" &fname))
fout.WriteLine pencat
fout.close
2、如下给出要生成的网页模板：
<html>
<head>
<meta http-equiv=""Content-Language"" content=""zh-cn"">
<meta http-equiv=""Content-Type"" content=""text/htmlcharset=gb2312"">
<meta name=""GENERATOR"" content=""Microsoft FrontPage 4.0"">
<meta name=""ProgId"" content=""FrontPage.Editor.Document"">
<title></title>
</head>
<body topmargin=""0"" leftmargin=""0"">
<table border=""0"" width=""760"" height=""100%"" background=""background.jpg"" >
<tr>
<td width=""752"" height=""10"" colspan=""3"">
<p align=""center"">t_title
</td>
</tr>
<tr>
<td width=""752"" height=""18"" colspan=""3"">
<div align=""center"">
</div>
<div align=""center"">
<font size=""2"">
作者：</font><font color=""#990000"">t_author</font>
<font size=""2"">
加入时间：</font><font color=""#990000"">t_date</font>
</div>
</td>
</tr>
<tr>
<td width=""15%"" height=""100%"" valign=""top"">
</td>
<td width=""70%"" height=""100%"" valign=""top"">
t_content
</td>
<td width=""15%"" height=""100%"" valign=""top"">
</td>
</tr>
</table>
</body>
</html>
3、解释
（1）pencat=rs.Fields.Item("m_content").Value
pencat为一个字符串变量。
rs.Fields.Item("m_content").Value就是如上2、网页模板的全部HTML字符
（2）pencat=replace(pencat,"t_title",n_title)
pencat=replace(pencat,"t_author",n_author)
pencat=replace(pencat,"t_content",n_content)
以上三句就是将字符串中的字串替换成为你所需要的内容，即ASP中动态获得的内容。
（3）Set fso = Server.CreateObject("Scripting.FileSystemObject")
Set fout = fso.CreateTextFile(server.mappath(fpath&"\" &fname))
fout.WriteLine pencat
fout.close
以上为将刚刚组合所得的网页代码写入文件的过程。第一句定义fso文件，第二句创建输出流文件，其中fpath为你想要存储的文件的路径，fname为文件名；后两句是将字符串写入文件和关闭输出流文件。
