动态网页设计报告书

1《动态网页设计》课程设计报告书班级09级信息(1)班学号09051240107姓名关晓龙2012年5月2目录一、系统概述................................................................................................................3二、数据库设计............................................................................................................4三、网站设计过程及制作步骤...................................................................................43.1数据源配置......................................................................................................43.2IIS配置..........................................................................................................83.3创建站点........................................................................................................103.4页面制作.......................................................................................................113.4.1主页面.................................................................................................113.4.2注册页面.............................................................................................11四、网站使用说明......................................................................................................12五、心得与体会.........................................................................................................133一、系统概述本网站是关于系统留言方面，用户可以注册新用户登录到网站，并且可以留言等交互功能。主要实现留言交互功能，主要功能模块有：编号一级栏目二级栏目栏目内容及功能说明1首页陈列基本信息2登录登录成功登录成功3登录失败返回首页返回首页4登录失败重新登录重新登录5留言留言留言内容6注册注册成功提示登录成功7返回首页注册失败返回首页8立即登录注册成功立即登录网站布局及导航草图（导航草图的制作有利于理清思路，避免在制作网站的过程中乱了方寸）图导航图在导航草图中，网站首页下面有6个二级网页。各网页内容和作用如下：主页：导航作用，能连接到其他子页面模块三注册模块四留言模块五搜索模块二登录模块一首页网站首页4登陆页面：输入用户名和密码就能成功登录注册页面：输入个人信息以注册，注册成功就可以登录否则返回首页留言页面：提供留言功能二、数据库设计根据概述给出数据库设计的内容，字段等，所采用的软件和设计方法等。给出数据库名，画表格，如：序号字段名类型长度描述1UsernameChar16用户名2PasswardChar8密码3Passward1Integer确认密码4emailChar16电子邮箱5tellInteger8手机号码6QQInteger12QQ号码7SexInteger3性别三、网站设计过程及制作步骤3.1数据源配置（1）打开【控制面板】窗口，选择【管理工具】中的【数据源（ODBC）】，打开ODBC数据源管理器，选择【系统DNS】选项卡，单击【添加】按钮。5（2）在打开的【创建新数据源】对话框的【选择您想要为其安装数据的驱动程序】列表框中，选择“SQLServer”，然后单击【完成】按钮。（3）在【创建到SQLServer的新数据源】对话框中，将数据源的名字设置为VoteData，该名字就是用来连接数据库的数据源名字，但不一定是数据库的名称；同时选择SQLServer数据库服务器，这里选择本机(local)。然后单击【下一步】按钮。6（4）在选择登陆方式的界面中，使用默认的方式。单击【下一步】按钮。（5）在选择数据的界面中，指定数据源所对应的数据库VoteData，单击【下一步】。7（6）单击【下一步】。（7）在完成并进行数据源的测试成功后，在【ODBC数据源管理器】对话框的【系统DNS】选项卡中就可以看到新添加的数据源VoteData。83.2IIS配置9103.3创建站点步骤1进入Dreamweaver8工作界面后，选择“站点”/“新建站点”命令弹出“未命名站点1的站点定义为”对话框。步骤2在该对话框中的“基本”选项卡中的“您打算为您的站点起什么名字？”文本框中输入ggg步骤2单击“下一步”按钮，在弹出的对话框中选中“是，我想使用服务器技术”，在“哪种种服务器技术？”下拉列表中选择“ASPVBScript”。步骤3单击“下一步”按钮，在弹出的对话框中选择在开发过程中如何使用文件，这里选中“在本地进行编辑和测试”，在“你将把文件存储在计算机上的什么位置？”文本框中输入F:\index\步骤4在弹出的对话框的“您应该使用什么URL来浏览站点的根目录？”中输入输完后，单击“测试URL”按钮。如果这时它提醒你URL前缀测试成功，点击“确定”按钮，你就可以进入下一步了，否则的话，你再按照前面的步骤检查站点出现的问题。步骤5单击“下一步”按钮，在对话框中选择“否”。步骤6单击“下一步”按钮，点击“完成”按钮即可完成本地站点的创建，这时，创建的站点就显示在“文件”面板中了如图所示113.4页面制作3.4.1主页面先插入一个3行1列表格，在第1行插入图片。第2背景颜色设置，3行合并单元格设置随机广告。第4行2列嵌入表格插入布局图片。步骤1插入模板，在模板的第1列第1行插入一个主要图片步骤2在第2行插入导航条步骤3在第3行第2列插队入一个表单，在表单中插入一个5行2列的表格步骤3做完了相应的操做之后就保存，保存完之后再另存为一个一模一样的网页，改一下名字，点击确定步骤4创建一个数据库文件，其中输入用户名、密码、电话、E-mail、QQ性别，在姓名的字段中添加一个主键，单击保存。步骤4在留言板中添加数据源，在添加插入记录的服务器行为步骤5在另外一个留言板中，添加记录集和绑定服务器行为。步骤6在插入菜单-应用程序对象形字-记录集分页，插入一个记录集分页3.4.2注册页面12步骤1插入模板，在模板的合并第1列并输入文字“登录”步骤2在第2行插入用户名第二列插入文本域步骤3在第3行第1列输入文字“密码”，第2列插入文本域步骤3做完了相应的操做之后就保存，保存完之后再另存为一个一模一样的网页，改一下名字，点击确定步骤4创建一个数据库文件，其中输入用户名、密码、电话、E-mail、QQ性别，在姓名的字段中添加一个主键，单击保存。步骤4在留言板中添加数据源，在添加插入记录的服务器行为步骤5在另外一个留言板中，添加记录集和绑定服务器行为。步骤6在插入菜单-应用程序对象形字-记录集分页，插入一个记录集分页四、网站使用说明整个网站分为五个页面，分别为：主页面、登录页面、注册页面、留言页面、搜索、帮助。各个页面间都是相互连接的，方便读者更快捷地找到想了解的信息。网站的目录结构如下：Flyfish------网站根目录Css------存放外置CSS文件Flash------存放Flash动画Images------存放图片文件Bt------存放所有标题或栏目标题的图片文件Content------存放所有与网页内容相关的图片文件Design------存放所有与网页界面设计相关图片文件Menux------存放所有与导航下拉菜单相关图片Navigation------存放导航栏目图片文件Sight------存放景点图片Linkpages------存放图像或文本超链接的文件Music------存放背景音乐Nagvipages------存放导航下拉菜单连接的网页Js------存放外置JS图片13网站页面链接总图五、心得与体会网站设计完成后，我收获了很多，感触也很深通过这次个人网页的制作，我对计算机有了更深层次得到了解，也有了更浓厚的兴趣。尤其是对网页制作的过程与一些技巧手法更有了另外一番了解，对网页制作的基础知识也有了一定的掌握。通过把自己的网页上传到互联网上，对文件的保存、上传、下载以及修改等知识有了更牢靠的掌握。通过自己的努力完成了自己上传到网上的第一个作品，那种成就感是无法用语言形容的。所以我觉得这次制作网页我已经达到了自己的目的，而不是单单为了完成作业而已。主页Index搜索页面注册页面留言页面登录页面注册成功请登录注册成功返回首页注册失败重新注册登录成功登录失败重新登录返回主页14教师评价表评定项目比重A(90以上)B(75-89)C(60-74)D(60以下)界面美观，布局合理10内容完整10技术水平60设计丰富10文字流畅5报告规范5综合评价成绩：______评价教师签名：2012年6月日15注意事项：1.按照特定的主题制作一个完整的网站。2.网站中要包括表格/框架/层布局、图像、文本、超级链接、导航、CSS样式。网站页面总数不少于6个。3.尽可能多地使用学过的技术手段。4.不允许抄袭其他同学的内容，如果两人有雷同，两个人都按照不及格处理。5.不允许从网上下载别人的网站当作考试内容上交。6.在上交文件中主页一律以index.asp命名。7.报告完全按模板执行，封面不动，要目录，一级标题是四号黑体行间距是1.5倍，段前0.5行，段后0行；二级标题是小四号黑体，行间距是1.5倍，段前、段后0行；三级标题是小四号宋体，行间距是1.5倍，段前、段后0行；正文为小四号宋体，行间距是1.5倍，段前、段后0行；表格、图中文字为5号宋体。8.把所有文件和文件夹放在一个总的目录下,目录以：学号+姓名的形式命名。将index.asp放在该文件夹下。最后将该目录压缩成一个*.rar文件。例如：03061张三.rar。