AS P.net动态网站开发案例教程课件作者陈学平第6章节博客设计.pptVIP

第6章 博 客 设 计 6.1 页面组成 本博客首页index.asp是日记本首页，它显示日记的主题、天气、日期、日记本用户的资料等。要进入日记本需要先登录（即从login.asp页面登录），在登录之前需要先注册成为网站的用户（即通过register.asp注册）。在本blog中还包括如何编写日记edit.asp、浏览日记diary_view.asp、查询结果页面result.asp，除此之外，还包括用户如何修改日记和修改资料的页面（即modify.asp和detail.asp）。 6.2 数据库的创建 按照前面的方法新建立一个数据库diary.mdb，并在数据库中建立3个表，即reg、mydiary、comment。 数据表reg用于保存注册用户的资料。设计方法不再多述，完成后的数据表设计视图如图6-1所示。 数据表mydiary用于保存用户编写的日记内容，其数据表的设计视图如图6-2所示。其中，id为关键字段，代表每条日记的唯一标记。 6.3 制作页面文件 6.3.1 连接数据库文件 连接数据文件的方法和第5.1.1介绍的方法基本相同。首先，在硬盘D盘上建立一个文件夹blog，即D:\blog。 连接数据库的步骤如下。 1）需要配置IIS的主目录为D:\blog。 2）ODBC要配置好数据源的连接，配置方法可见第5章的留言本。 3）启动Dreamweaver CS3，并新建立一个站点，要注意设置好“本地信息”和“测试服务器”的文件夹位置，都要设置为D:\blog，如图6-4和图6-5所示，其他与第5章留言本的设计基本相同。 6.3.2 用户注册页面的设计 本日记本blog需要登录用户才能使用，因此需要先注册成为用户。注册页面的设计效果如图6-9所示。 1．静态页面的设计 先选择“插入记录”→“表单”→“表单”命令，在页面中插入一个红色虚线的表单，然后按照图6-9所示设计好各个表格和背景色，并插入各个表单对象。 2．动态部分的设计 （1）表单对象的设计 （2）“插入记录”服务器行为的应用 1）选择“服务器行为”→“插入记录”命令。 2）在弹出的对话框中设置好各个参数：在“提交值，自：”下拉列表框中选择“form1”；在“连接：”下拉列表框中选择blog；在“插入到表格：”下拉列表框中选择“user”；在“列：”文本框中各个表单对象与数据库字段绑定；在“如果成功，则转到：”文本框中选择或输入登录页面login.aspx。如图6-11所示。 3）单击“确定”按钮完成设置。 4）按〈F12〉键浏览注册页面，观察是否能够注册并提交到登录页面（注意此时可用一个空白的登录页面），如图6-12所示。 6.3.3 用户登录页面的设计 本日记本blog在注册成为网站用户后，就可以正常登录了。登录页面的设计效果如图6-13所示。 要完成登录页面的设计需要注意以下几点。 1．静态页面的设计 按照图6-13所示设计好各个表格和背景色，并插入登录表单和表单中的各个表单对象。 2．动态部分的设计 （1）表单对象的设计 （2）“用户登录”服务器行为的设计 6.3.4 日记本主页面的设计 网络日记本首页的内容较多，有日记本的标题显示，有编写日记的链接，有日记的搜索，有用户资料显示，还有对用户登录表单行为的检验，设计较为复杂。 可以按照如图6-18所示的效果设计出网页的静态界面。 要完成主页面的设计需要注意以下几点。 1．静态页面的设计 按照图6-18所示设计好各个表格和背景色，并插入图像占位符和搜索表单中的各个表单对象。 2．动态部分的设计 （1）表单对象的设计 （2）“用户登录”表单行为检验的设计 （3）用户资料显示区域的设计 （4）编写日记的链接设计 （5）网络日记本及头像图像占位部分的设计 （6）用户日记本显示的设计 6.3.5 编写网络日记 编写网络日记的设计较为简单，用到的只是“插入记录”的服务器行为，只是读者要注意数据集的设置，需要将用户的user_id字段传递到日记本的表中。 我们可以按照如图6-43所示的效果设计出网页的静态页面。要完成该页面的设计需要注意以下几点。 1．静态页面的设计 按照图6-42设计好各个表格和背景色，并插入图像和表单中的各个表单对象。 2．动态部分的设计 （1）表单对象的设计 （2）数据集的设置 （3）插入记录 6.3.6 网络日记显示 网络日记显示由diary_view.aspx页面实现。设计方法较为简单，主要是建立一个数据集，然后将数据集字段插入到页面表格中即可。 6.3.7 日记评论 日记评论的设计较日记本显示要复杂一些，主要有以下设计要点。 （1）数据集的设计 （2）隐藏区域的设计 （3）插入记录的设计 （4）评论显示区域的设计 6.3.8 修改日记的设计 修改日