动态网页课程设计报告博客系统.docx
- 文档编号:13327550
- 上传时间:2023-06-13
- 格式:DOCX
- 页数:77
- 大小:3.12MB
动态网页课程设计报告博客系统.docx
《动态网页课程设计报告博客系统.docx》由会员分享,可在线阅读,更多相关《动态网页课程设计报告博客系统.docx(77页珍藏版)》请在冰点文库上搜索。
动态网页课程设计报告博客系统
成绩
课程设计报告
题目博客系统
课程名称动态网页设计课程设计
院部名称计算机工程学院
专业计算机科学与技术
班级12级计算机科学与技术(特)
学生姓名章文静
学号1205601006
课程设计地点A105
课程设计学时60
指导教师张漪
金陵科技学院教务处制
一、实验目的
通过对"动态网站"结构设计、调试、连接、巩固、加深并扩大所学的理论知识,培养基本理论分析,解决实际问题的能力,逐步掌握多媒体产品设计和调试的基本步骤,同时培养严肃认真、细致踏实、刻苦钻研、有所创作、事实求是的科学作风。
二、实验要求
通过本课程的学习,熟练掌握如何使用Photoshop制作主页页面、使用Flash
制作动画、使用Firework进行图像处理、使用Dreamweaver整合站点,培养具备较强的逻辑思维能力和独立思考能力。
三、实验设备
586以上计算机、装有IE6、DreamweaverCS软件及IIS环境配置。
四、实验原理、方法
上机操作。
5、实验步骤
设计数据库
1、用户信息数据表user、博客分类表blog_type、日志信息表blog_log、日志分类表log_type、日志回复表log_reply和管理员账号信息表admin的字段结构如表9-2~表9-7所示。
表9-2用户信息数据表users
意义
字段名称
数据类型
字段大小
默认值
用户ID
User_ID
自动编号
长整型
博客分类名
typename
文本
20
用户登录名
User_username
文本
20
用户登录密码
User_password
文本
20
用户博客名
User_blog_name
文本
20
注册时间
User_addtime
日期/时间
New()
用户E-mail
User_email
文本
20
共有日志数
User_post_num
数字
共有回复数
User_reply_num
数字
长整型
0
是否是推荐博客,0不推荐,1推荐
User_blog_good
数字
长整型
0
User_level
数字
长整型
0
表9-3博客分类表blog_type
意义
字段名称
数据类型
字段大小
默认值
博客分类Id
Type_id
自动编号
长整型
博客分类名
Typename
文本
20
表9-4日志信息blog_log
意义
字段名称
数据类型
字段大小
默认值
日志Id
Log_id
自动编号
长整型
用户名
User_username
文本
20
日志分类ID
Log_class_ID
自动编号
20
日志标题
Log_title
文本
50
日志添加时间
Log_addtime
时期/时间
New()
日志回复数
Log_reply_num
数字
长整型
0
发布时间
pubDate
时期/时间
New()
日志内容
Log_content
备注
表9-5日志分类表log_type
意义
字段名称
数据类型
字段大小
默认值
主题编号
Log_class_ID
自动编号
长整型
用户名
User_username
文本
20
日志分类名称
Log_class_name
文本
20
分类日志数
Log_class_num
数字
长整型
表9-6日志分类表log_reply
意义
字段名称
数据类型
字段大小
默认值
回复ID
Reply_ID
自动编号
长整型
日志ID
Log_ID
文本
20
回复人姓名
Reply_user
自动编号
20
回复标题
Reply_title
文本
50
回复时间
Reply_addtime
日期/时间
Now()
回复内容
Reply_content
备注
表9-7管理员账号信息表admin
意义
字段名称
数据类型
字段大小
默认值
主题编号
ID
自动编号
长整型
管理员用户名
Username
文本
20
管理员密码
Password
文本
20
2、首先运行MicrosoftAccess2007程序。
打开程序界面,单击“空白数据库”按钮,在主界面的右侧打开“空白数据库”面板,如图9-6所示。
3、在“我的电脑”相关路径中先新建几个文件夹,如:
images文件夹、mdb文件夹,如图9-7所示。
4、再单击“空白数据库”面板上的按钮,打开“文件新建数据库”对话框,在“保存位置”下列表框中,选择站点blog文件夹中的mdb文件夹,在“文件名”文本框中输入文件名blog,如图9-8所示。
5、单击“确定”按钮,返回“空白数据库”面板,再单击“空白数据库”面板中的“创建”按钮,即在MicrosoftAccess中创建了blog.mdb文件,同时MicrosoftAccess自动默认生成一个名为“表1:
表”的数据表,右击“表1:
表”,从弹出的快捷菜单中选择“设计视图”,如图9-9所示。
6、打开“另存为”对话框,在“表名称”文本框中输入数据表名称users,如图9-10所示。
7、单击“确定”按钮,即在“所有表”列表框中建立了users数据表,按照表9-2所示,输入字段名称并设置其属性,完成后如图9-11所示。
8、双击
按钮,打开users的数据表,为了方便以后使用,可以在数据中预先输入一些数据,如图9-12所示。
9、利用同样的方法,建立如图9-13~图9-16所示的数据表。
图9-13日志信息表blog_log
图9-14博客分类表blog_type
图9-15日志回复表log_reply
图9-16日志分类表log_type
10、编辑完成后,单击“保存”按钮,完成数据库的创建,关闭ACCess2007软件。
设计数据库
博客系统的数据库大小需要根据系统的内容大小而定。
这里建立一个blog数据库,并在里面分别建立用户信息数据表users、博客分类表blog_type、日志信息表blog_log、日志分类表log_type、日志回复表log_reply以及管理帐号信息表admin作为数据查询、新增、修改与删除的后端支持,创建的用户信息表users如图9-5所示。
图9-5创建的users用户信息数据表
具体的制作步骤如下:
1、用户信息数据表users、博客分类表blog_type、日志信息表blog_log、日志分类表log_type、日志回复log_reply和管理帐号信息表admin的字段结构邵静9-2表~表9-7所示。
连接数据库
数据库编辑完成后,必须在DreamweaverCS6中建立数据源连接对象。
具体的连接步骤如下:
1.依次选择“控制面板”|管理工具”|“数据源(ODBC)”|“系统DSN”命令,打开“ODBC数据源管理器”对话框中的“系统DSN”选项卡,如图9-17所示。
2.在图9-1中单击“添加(D)”按钮后,打开“创建新数据源”对话框,选择DriverdoMicrosoftAccess(*.mdb)选型,如图9-19所示。
图9-18“创建信数据源”对话框
3.单击“完成”按钮,打开“ODBCMicrosoftAccess安装”对话框,在“数据源名(N)”文本框输入connblog,单击“选择(S)”按钮,打开“选择数据库”对话框,单击“驱动器(V)”下拉列表右边的按钮,从下拉列表中找到数据库所在的盘符,在“目录(D)”中找到保存数据库的文件夹,然后单击左上方“数据库名(A)”选项组中的数据库文件blog.mdb,则数据库名称自动添加到“数据库名(A)”文本框中,如图9-19所示。
、
4.找到数据库后,单击“确定”按钮,返回到“ODBC数据源管理器”中的“系统DSN选项卡中”。
在这里可以看到“系统数据源”中已经添加了名称为connblog、驱动程序为DriverdoMicrosoftAccess(*.mdb)的系统数据源,如图9-20所示。
5.设置好后,单击“确定”按钮退出,完成“ODBC数据库管理器”中“系统DSN”选项卡的设置。
6.启动DreamweaverCS6,执行菜单“文件”|“新建”命令,打开“新建文档”对话框,选择“空白页”选项卡中“页面类型”下拉列表框下的ASPVBScript选项,在“布局”下拉列表框中选择“无”选项,然后单击“创建”按钮,在网站根目录下新建一名为index,asp的网页并保存,如图9-21所示。
图9-21建立首页并保存
7.设置好“站点”、“测试服务器”后,在DreamweaverCS6软件中执行菜单“窗口”|“数据库”命令,打开“数据库”面板,单击“数据库”面板中的按钮
按钮,在弹出的菜单中的选择“数据源名称(DSN)”命令。
8.打开“数据源名称(DSN)”对话框,在“连接名称”文本框中输入connblog,单击“数据源名称(DSN)”下拉列表框右边的三角
按钮,从打开的下拉列表中选择connblog,其他保持默认值,单击“测试”按钮,如果连接成功将提示“成功创建连接脚本”,如图9-23所示。
图9-23“数据源名称(DSN)”
9.单击“确定”按钮,完成数据库的连接。
博客主页面的设计
详细的设计步骤如下:
1、启动DreamweaverCS6,在同一站点下选择刚创建的主页面index.asp。
输入网页标题“博客”。
接下来要设置网页的CSS格式,执行菜单“修改”|“页面属性”命令,打开“页面属性”对话框,单击“分类”列表框下的“外观(CSS)”选项,在“大小”文本框中输入12px,在“上边距”文本框中输入0px,“背景颜色”设为#FEF4F3,其他设置如图所示。
2、单击“确定”按钮,进入“文档”窗口,执行菜单“插入”|“表格”命令,打开“表格”对话框,在“行数”文本框中输入需要插入表格的行数5,在“列”文本框中输入需要插入表格的列数2。
在“表格宽度”文本框中输入765像素,“边框粗细”、“单元格边距”和“单元格间距”都为0,其他设置如图所示。
3、单击“确定”按钮,在“文档”窗口中就插入了一个5行2列的表格。
用鼠标选中第1行将其合并,同样地,把表格的第5行合并为1行。
选中整个表格,在“属性”面板中设置“对齐”为“居中对齐”,效果如图所示。
4、把光标放在第1行中,执行菜单“插入”|“图像”命令,打开“选择图像源文件”对话框,在“查找范围”站点中,选择images文件夹中的1.gif嵌入到表格中,在第5行的“属性”面板中设置高度为40像素,设置背景色为#F98496,并在这行中输入文字“Copyright2013-2015AllRightsReserved.”,“字体颜色”为白色,并设置“对齐”为“居中对齐”,效果如图所示。
5、在第2行第1个单元格中根据前面的内容设计一个会员登录系统,再在其他单元格中插入相应的图片和文字,得到首页的页面结构如图所示。
6、首页的页面结构搭建好以后,开始对每一个栏目进行设计,首先对“最新注册”栏目进行设计,“最新注册”栏目根据users表中的user_ID降序来显示users数据表中的最新记录,单击“应用程序”面板中的“绑定”标签上的
按钮,在弹出的菜单中,选择“记录集(查询)”命令,在打开的“记录集”对话框中,输入如表所示的数据,如图所示。
属性
设置值
名称
Rs1
连接
connblog
表格
users
列
全部
筛选
无
排序
以user_ID降序
7、单击“确定”按钮,完成记录集Rs1的绑定,绑定记录集后,将记录集的字段插入至index.asp网页的适当位置,如图所示。
8、“最新注册”栏目需要显示最新注册的5个用户的注册名,所以必须应用“服务器行为”中的“重复区域”命令,单击要重复显示的一行,如图所示。
9、选择要重复显示的一行后,单击“应用程序”面板中的“服务器行为”标签上的
按钮,在弹出的菜单中选择“重复区域”命令,打开“重复区域”对话框,在打开的“重复区域”对话框中,设置显示的记录数为5条记录,如图所示。
10、单击“确定”按钮,返回到编辑页面,会发现先前所选取要重复的区域左上角出现了一个“重复”的灰色标签,这表示已经完成设置。
11、显示出最新注册的用户后,访问者可以单击用户名进入注册用户个人博客页面。
实现的方法是:
首先选取编辑页面中的Rs1.user_username字段,如图所示。
12、选取编辑页面中的Rs1.user_username字段后,单击“应用程序”面板中的“服务器行为”标签上的
按钮,在弹出的菜单中选择“转到详细页面”命令,打开“转到详细页面”对话框,设置“详细信息页”为user.asp,设置“传递URL参数”为user_username,如图所示。
13、单击“确定”按钮,完成对“最新注册”栏目的制作。
下面将对“统计”栏目进行设计,需要进行统计的栏目包括博客数、日记数、回复数,可以在记录集查询高级模式中的SQL语句中使用COUNT(*)函数进行统计。
14、单击“应用程序”面板中的“绑定”标签上的
按钮,在弹出的菜单中选择“记录集(查询)”命令,在打开的“记录集”对话框中输入如表所示的数据,如图所示。
属性
设置值
名称
Rs2
连接
connblog
SQL
SELECTcount(*)asnum
FROMusers//计算所有用户博客数
15、单击“应用程序”面板中的“绑定”标签上的
按钮,在弹出的菜单中选择“记录集(查询)”命令,打开“记录集”对话框,分别在打开的“记录集”对话框中输入如表和表所示的数据,如图所示。
属性
设置值
名称
Rs3
连接
connblog
SQL
SELECTcount(*)asnum
FROMblog_log//计算所有日志数
属性
设置值
名称
Rs4
连接
connblog
SQL
SELECTcount(*)asnum
FROMlog_reply//计算所有回复数
16、单击“确定”按钮,完成记录集Rs2、Rs3、Rs4的绑定,绑定记录集后,将记录集的字段插入至index.asp网页的适当位置,如图所示。
17、插入字段后完成对“统计”栏目的制作,现在来设置“推荐博客”栏目,推荐博客的条件应为users数据表中的user_blog_good等于1时成立(1为推荐,0为不推荐),单击“应用程序”面板中的“绑定”标签上的
按钮,在弹出的菜单中选择“记录集(查询)”命令,打开“记录集”对话框,在打开的“记录集”对话框中输入如表所示的数据,如图所示。
18、单击“确定”按钮,完成对Rs6记录集的绑定,把Rs6记录集中的user_blog_name和user_username两个字段插入到页面的适当位置,如图所示。
19、因为推荐的博客不是一个,而目前的设定只会显示数据库的一条记录,因此,需要应用“服务器行为”中的“重复区域”命令,单击要重复显示的那一行,如图所示。
20、单击“应用程序”面板中的“服务器行为”标签上的
按钮,在弹出的菜单中选择“重复区域”命令,在打开的“重复区域”对话框中,设置显示的记录数为5,如图所示。
图选择一次可以显示的记录条数
21、单击“确定”按钮返回到编辑页面,会发现先前所选取要重复的区域左上角出现了一个“重复”的灰色标签,这表示已经完成设置。
22、显示出推荐的用户博客后,访问者可以单击博客名进入用户个人的博客页面,选取编辑页面中的Rs6.user_blog_name字段,如图所示。
图选择字段
23、选取编辑页面中的Rs6.user_blog_name字段后单击“应用程序”面板中的“服务器行为”标签上的
按钮,在弹出的菜单中选择“转到详细页面”命令,在打开的“转到详细页面”对话框中,设置“详细信息页”为user.asp,设置“传递URL参数”为user_username,如图所示。
图“转到详细页面”对话框
24、单击“确定”按钮,完成对“推荐博客”栏目的制作,在“博客分类”栏目中主要是绑定blog_type数据表,单击“应用程序”面板中的“绑定”标签上的
按钮,在弹出的菜单中选择“记录集(查询)”命令,在打开的“记录集”对话框中输入如表所示的数据,如图所示。
表“记录集”的表格设定
属性
设置值
名称
Rs7
连接
connblog
表格
blog_type
列
全部
筛选
无
排序
无
图绑定“记录集”Rs7
25、单击“确定”按钮完成对Rs7记录集的绑定,将Rs7记录集中的typename字段插入到页面中的适当位置,如图所示。
图插入字段typename
26、在显示博客分类的记录数时,要求显示出所有的博客分类数,需要应用“服务器行为”中的“重复区域”命令,单击要重复显示的一行,如图所示。
图选择要重复的一行
27、单击“应用程序”面板中的“服务器行为”标签上的
按钮,在弹出的菜单中选择“重复区域”选项,在打开的“重复区域”对话框中,设置显示的记录数,例如所有记录,如图所示。
图选择一次可以显示的记录条数
28、单击“确定”按钮,回到编辑页面,会发现先前所选取要重复的区域左上角出现了一个“重复”的灰色标签,这表示已经完成设置。
29、显示所有博客分类后,单击博客中的分类进入博客分类的子内容页面,所以要选取编辑页面中的Rs7.typename字段,如图所示。
图选择字段
30、单击“应用程序”面板中的“服务器行为”标签上的
按钮,在弹出的菜单中,选择“转到详细页面”命令,在打开的“转到详细页面”对话框中,设置“详细信息页”为blog_type.asp,设置“传递URL参数”为typename,如图所示。
图设置“转到详细页面”对话框
31、单击“确定”按钮完成“博客分类”栏目的制作,下面将制作“最新日志”栏目,最新日志将用到的是博客信息表blog_log,单击“应用程序”面板中的“绑定”标签上的
按钮,在弹出的菜单中,选择“记录集(查询)”命令,在打开的“记录集”对话框中输入如表所示的数据,如图所示。
表“记录集”的表格设定
属性
设置值
名称
Rs5
连接
connblog
表格
blog_log
列
全部
筛选
无
排序
以log_ID降序
图绑定记录集Rs5
32、单击“确定”按钮完成对Rs5记录集的绑定,然后将Rs5记录集中的字段插入到页面中的适当位置,如图所示。
图插入字段
33、在显示最新日志的记录数时要求显示部分日志,而目前的设定则只会显示一条记录,需要应用“服务器行为”中的“重复区域”命令,单击要重复显示的那一行,如图所示。
图选择要重复的一行
34、单击“应用程序”面板中的“服务器行为”标签上的
按钮,在弹出的菜单中,选择“重复区域”命令,在打开的“重复区域”对话框中,设置显示的记录数未10,如图所示。
图选择一次可以显示的记录条数
35、单击“确定”按钮,回到编辑页面,会发现先前所选取要重复的区域左上角出现了一个“重复”的灰色标签,这表示已经完成设置。
36、当单击访问最新日志的标题时,希望进入日志详细内容页面查看内容,选取编辑页面中的Rs5.log_title字段,如图所示。
图选择字段
37、单击“应用程序”面板中的“服务器行为”标签上的
按钮,在弹出的菜单中,选择“转到详细页面”命令,在打开的“转到详细页面”对话框中,设置“详细信息页”为log_content.asp,设置“传递URL参数”为log_ID,如图所示。
图“转到详细页面”对话框
38、单击“确定”按钮,完成对博客主页面index.asp页面的设计与制作,打开IE浏览器,在IE地址栏中输入http:
//127.0.0.1/index.asp浏览效果。
博客分类页面的设计
详细的制作步骤如下:
1、打开博客分类页面blog_type.asp,单击“应用程序”面板中的“绑定”标签上的按钮,在弹出的菜单中,选择“记录集(查询)”命令,在打开的“记录集”对话框中输入如表9-15所示的数据,如图9-58所示。
表9-15“记录集”的表格设定
属性
设置值
名称
Rs
连接
Connblog
表格
Users
列
全部
筛选
Typename=URL參数typename
排序
以user_ID降序
2、单击“确定”按钮,完成对Rs记录集的绑定,将Rs记录集中的字段插入到页面中的适当位置,如图9-59所示。
3、需要应用“重复区域”命令来显示部分或全部的博客分类子分类中的用户信息,单击要重复显示的那一行表格,如图9-60所示。
4、单击“应用程序”面板中的“服务器行为”标签上的按钮,在弹出的菜单中,选择“重复区域”命令,在打开的“重复区域”对话框中,设置显示的记录数为15,如图9-61所示。
5、单击“确定”按钮回到编辑页面,会发现先前所选取要重复的区域左上角出现了一个“重复”的灰色标签,这表示已经完成设置。
6、当显示的记录大于15条时,就必须加入“记录集分页”中的“记录集导航条”功能,将光标移至要加入“记录集导航条”的位置,执行“插入”|“数据对象”|“记录集分页”|“记录集导航条”命令,选取要导航的记录集以及导航条的显示方式,然后单击“确定”按钮回到编辑页面,如图9-62所示。
7、选取编辑页面中的Rs.user_blog_name字段,如图9-63所示。
8、单击“应用程序”面板中的“服务器行为”标签上的按钮,在弹出的菜单中,选择“转到详细页面”命令,在打开的“转到详细页面”对话框中设置“详细信息页”为user.asp,设置“传递URL參数”为user_username,如图9-64所示。
9、选择Rs.user_email字段,在“属性”面板上单击“链接”文本框后面的“浏览文件”按钮,打开“选择文件”对话框,在该对话框中选中“数据源”单选按钮,然后在“域”列表框中,单击选择“记录集(Rs)”中的user_email字段你,并且在URLl链接前面加上“mailto:
”,如图9-65所示。
10、单击“确定”按钮,完成博客分类页面blog_content.asp的页面设计效果如图9-66所示。
日志内容页面的设计
详细操作步骤如下:
1、打开日志内容页面log_content.asp,单击“应用程序”面板中的“绑定”标签上的按钮,在弹出的菜单中,选择“记录集(查询)”命令,在打开的“记录集”对话框中输入如表9-16所示的数据,如图9-67所示。
表9-16“记录集”的表格设定
属性
设置值
名称
Rs1
连接
Connb
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 动态 网页 课程设计 报告 博客 系统