做了那么久的动态网页,特别是类似于文章或者是新闻系统,都是按照很传统的方法来做的。但是看到越来越多的网站都使用生成静态网页的方法,于是我也打算使用这个方法实践一下。希望对一些有这方面的需要的朋友提供点帮助。
本人使用IIS6.0+asp.net 2.0制作,并测试成功。
实现效果图:
生成文章以后的页面:
我在输入框里输入了生成ID号从1到10的文章,通过查询数据库得出结果并批量生成静态页面,然后返回根据刚才生成的页面的内容生成了主页index.html。
点击第三个文章,然后进入到查看文章详细内容的页面:
这是我用的是我们公司的网页做模板生成的式样(本文示例并不是这样的,要更好看的样式,请自行设计模板。)
以下是我的实践过程:
首先制作要生成HTML页面的模板:
<!-- temp.htm -->
<html>
<head>
<title> $htmlformat[0]</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!-- 式样表自己制作 -->
</head>
<body>
<table>
<tr><!--文章导航 -->
<td algin=right> $htmlformat[4]</td>
</tr>
<tr><!--文章的标题 -->
<td algin=center> $htmlformat[0]</td>
</tr>
<tr><!--发表时间 -->
<td algin=right> $htmlformat[1]</td>
</tr>
<tr><!--文章概述 -->
<td algin=right> $htmlformat[2]</td>
</tr>
<tr><!--文章内容 -->
<td algin=right> $htmlformat[3]</td>
</tr>
</table>
</body>
</html>
<!--index_tmp.htm -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Index</title>
</head>
<body>
$htmlformat[0]
</body>
</html>
模板完成后,接下来就是根据文章的ID从数据库中读出相关的内容了。
我的数据库设计如下:
Article表
Articles_id 文章id
Article 文章内容
Title 标题
Articledatetime 添加时间
Articlesgroup_parent_id 父栏目编号
Articledescription 文章概述
Articlesgroup表
Articlesgroup_id 栏目ID
Groupname 栏目名称
Articlesgroup_parent_id 父栏目ID
Groupdescription 概述
<!—CreateHTML.aspx -->
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CreateHTML.aspx.cs" Inherits="CreateHTML" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>生成静态网页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
要生成的文章ID号:<br />
从<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
到<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /></div>
</form>
</body>
</html>