动态网页课程设计报告(博客系统)

课程设计报告题目博客系统课程名称动态网页设计课程设计院部名称计算机工程学院专业计算机科学与技术班级12级计算机科学与技术（特）学生姓名章文静学号1205601006课程设计地点A105课程设计学时60指导教师张漪金陵科技学院教务处制成绩一、实验目的通过对动态网站结构设计、调试、连接、巩固、加深并扩大所学的理论知识，培养基本理论分析，解决实际问题的能力，逐步掌握多媒体产品设计和调试的基本步骤，同时培养严肃认真、细致踏实、刻苦钻研、有所创作、事实求是的科学作风。二、实验要求通过本课程的学习，熟练掌握如何使用Photoshop制作主页页面、使用Flash制作动画、使用Firework进行图像处理、使用Dreamweaver整合站点，培养具备较强的逻辑思维能力和独立思考能力。三、实验设备586以上计算机、装有IE6、DreamweaverCS软件及IIS环境配置。四、实验原理、方法上机操作。五、实验步骤设计数据库1、用户信息数据表user、博客分类表blog_type、日志信息表blog_log、日志分类表log_type、日志回复表log_reply和管理员账号信息表admin的字段结构如表9-2~表9-7所示。表9-2用户信息数据表users意义字段名称数据类型字段大小默认值用户IDUser_ID自动编号长整型博客分类名typename文本20用户登录名User_username文本20用户登录密码User_password文本20用户博客名User_blog_name文本20注册时间User_addtime日期/时间New()用户E-mailUser_email文本20共有日志数User_post_num数字共有回复数User_reply_num数字长整型0是否是推荐博客，0不推荐，1推荐User_blog_good数字长整型0User_level数字长整型0表9-3博客分类表blog_type意义字段名称数据类型字段大小默认值博客分类IdType_id自动编号长整型博客分类名Typename文本20表9-4日志信息blog_log意义字段名称数据类型字段大小默认值日志IdLog_id自动编号长整型用户名User_username文本20日志分类IDLog_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意义字段名称数据类型字段大小默认值回复IDReply_ID自动编号长整型日志IDLog_ID文本20回复人姓名Reply_user自动编号20回复标题Reply_title文本50回复时间Reply_addtime日期/时间Now()回复内容Reply_content备注表9-7管理员账号信息表admin意义字段名称数据类型字段大小默认值主题编号ID自动编号长整型管理员用户名Username文本20管理员密码Password文本202、首先运行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_type10、编辑完成后，单击“保存”按钮，完成数据库的创建，关闭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-2015fanyunblog.comAllRightsReserved.”，“字体颜色”为白色，并设置“对齐”为“居中对齐”，效果如图所示。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语句中使