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

1、 课程设计报告课程设计报告题题 目目 博客系统博客系统 课课 程程 名名 称称 动态网页设计课程设计动态网页设计课程设计 院院 部部 名名 称称 计算机工程学院计算机工程学院 专专 业业 计算机科学与技术计算机科学与技术 班班 级级 1212 级计算机科学与技术（特）级计算机科学与技术（特）学学 生生 姓姓 名名 章文静章文静 学学 号号 12056010061205601006 课程设计地点课程设计地点 A105A105 课程设计学时课程设计学时 6060 指指 导导 教教 师师 张漪张漪 金陵科技学院教务处制成绩一、实验目的一、实验目的通过对“动态网站“结构设计、调试、连接、巩固、加深并扩大所学的理论 知识，培养基本理论分析，解决实际问题的能力，逐步掌握多媒体产品设计和 调试的基本步骤，同时培养严肃认真、细致踏实、刻苦钻研、有所创作、事实 求是的科学作风。二、实验要求二、实验要求通过本课程的学习，熟练掌握如何使用 Photoshop 制作主页页面、使用 Flash 制作动画、使用 Firework 进行图像处理、使用 Dreamweaver 整合站点，培养具 备较强的逻辑思维能力和

2、独立思考能力。三、实验设备三、实验设备586 以上计算机、装有 IE6、Dreamweaver CS 软件及 IIS 环境配置。四、实验原理、方法四、实验原理、方法上机操作。5 5、实验步骤实验步骤设计数据库设计数据库 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数字长整型

3、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

4、回复人姓名Reply_user自动编号20回复标题Reply_title文本50回复时间Reply_addtime日期/时间Now()回复内容Reply_content备注表 9-7 管理员账号信息表 admin意义字段名称数据类型字段大小默认值主题编号ID自动编号长整型管理员用户名Username文本20管理员密码Password文本202、首先运行 Microsoft Access2007 程序。打开程序界面，单击“空白数据库”按钮，在主 界面的右侧打开“空白数据库”面板，如图 9-6 所示。3、在“我的电脑”相关路径中先新建几个文件夹，如：images 文件夹、mdb 文件夹，如 图 9-7 所示。4、再单击“空白数据库”面板上的按钮，打开“文件新建数据库”对话框，在“保存位置” 下列表框中，选择站点 blog 文件夹中的 mdb 文件夹，在“文件名”文本框中输入文件名 blog，如图 9-8 所示。5、单击“确定”按钮，返回“空白数据库”面板，再单击“空白数据库”面板中的“创建” 按钮，即在 Microsoft Access 中创建了 blog.mdb 文件，同时 Micros

5、oft Access 自动默认生成 一个名为“表 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、博客分类表 b

6、log_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） ”按钮后，打开“创建新数据源”对话框，选择 Driver do Microsoft Access（*.mdb）选型，如图 9-1

7、9 所示。图 9-18“创建信数据源”对话框 3.单击“完成”按钮，打开“ODBC Microsoft Access 安装”对话框，在“数据源名（N） ” 文本框输入 connblog，单击“选择（S） ”按钮，打开“选择数据库”对话框，单击“驱动 器（V） ”下拉列表右边的按钮，从下拉列表中找到数据库所在的盘符，在“目录（D） ”中 找到保存数据库的文件夹，然后单击左上方“数据库名（A） ”选项组中的数据库文件 blog.mdb，则数据库名称自动添加到“数据库名（A） ”文本框中，如图 9-19 所示。、4.找到数据库后，单击“确定”按钮，返回到“ODBC 数据源管理器”中的“系统 DSN 选 项卡中” 。在这里可以看到“系统数据源”中已经添加了名称为 connblog、驱动程序为 Driver do Microsoft Access（*.mdb）的系统数据源，如图 9-20 所示。5.设置好后，单击“确定”按钮退出，完成“ODBC 数据库管理器”中“系统 DSN”选项 卡的设置。 6.启动 Dreamweaver CS6，执行菜单“文件”|“新建”命令，打开“新建文档”对话框，选择

8、“空白页”选项卡中“页面类型”下拉列表框下的 ASP VBScript 选项，在“布局”下 拉列表框中选择“无”选项，然后单击“创建”按钮，在网站根目录下新建一名为 index,asp 的网页并保存，如图 9-21 所示。图 9-21 建立首页并保存7.设置好“站点” 、 “测试服务器”后，在 Dreamweaver CS6 软件中执行菜单“窗口”|“数据库”命令，打开“数据库”面板，单击“数据库”面板中的按钮按钮，在弹出的菜单中的选择“数据源名称（DSN） ”命令。 8.打开“数据源名称（DSN） ”对话框，在“连接名称”文本框中输入 connblog，单击“数据源名称（DSN） ”下拉列表框右边的三角 按钮，从打开的下拉列表中选择 connblog，其他保持默认值，单击“测试”按钮，如果连接成功将提示“成功创建连接脚本” ，如图 9-23 所示。图 9-23“数据源名称（DSN） ” 9.单击“确定”按钮，完成数据库的连接。 博客主页面的设计博客主页面的设计 详细的设计步骤如下：1、启动 Dreamweaver CS6，在同一站点下选择刚创建的主页面 index.asp。输入网页标

9、题 “博客” 。接下来要设置网页的 CSS 格式，执行菜单“修改”|“页面属性”命令，打开 “页面属性”对话框，单击“分类”列表框下的“外观（CSS） ”选项，在“大小”文本框 中输入 12px，在“上边距”文本框中输入 0px， “背景颜色”设为#FEF4F3，其他设置如图 所示。2、单击“确定”按钮，进入“文档”窗口，执行菜单“插入”|“表格”命令，打开“表 格”对话框，在“行数”文本框中输入需要插入表格的行数 5，在“列”文本框中输入需 要插入表格的列数 2。在“表格宽度”文本框中输入 765 像素， “边框粗细” 、 “单元格边距” 和“单元格间距”都为 0，其他设置如图所示。3、单击“确定”按钮，在“文档”窗口中就插入了一个 5 行 2 列的表格。用鼠标选中第 1 行将其合并，同样地，把表格的第 5 行合并为 1 行。选中整个表格，在“属性”面板中设 置“对齐”为“居中对齐” ，效果如图所示。4、把光标放在第 1 行中，执行菜单“插入”|“图像”命令，打开“选择图像源文件”对 话框，在“查找范围”站点中，选择 images 文件夹中的 1.gif 嵌入到表格中，在第 5 行的 “属性”面板中设置高度为 40 像素，设置背景色为#F98496，并在这行中输入文字“Copyright 2013-2015 All Rights Reserved.” ， “字体颜色”为白色，并设置 “对齐”为“居中对齐” ，效果如图所示。5、在第 2 行

《动态网页课程设计报告(博客系统)》由会员第***分享，可在线阅读，更多相关《动态网页课程设计报告(博客系统)》请在金锄头文库上搜索。