1、个人收集整理 勿做商业用途毕业综合训练技术报告(论文)题 目 动态网页设计 学生姓名 周辉 专业班级 信息0304 _学 号 0382028 指导老师 包 子 建 上海工商外国语学院二六年五月三十日目 录1 网站的总体设计与分析21。1 设计思想21.2 开发工具的选用及分析21。3 网站分析22 详细设计分析32.1 主页设计32.2 数据库设计42.3 数据库详细息53 毕业设计体会74 参考文献8动态网页设计上海工商外国语学院 信息0304 周辉0382028摘 要:伴随着网络的出现,网页逐渐融入人们的生活。快速及时的新闻浏览,五彩缤纷的网上信息,网络与人们的生活息息相关,于是世界上又出
2、现了第三媒体Internet。制作网页是企业和个人的宣传自己的重要手段,同时也是学习者获取学习信息的重要手段,尤其是在教育领域,在素质教育与终身教育成为必然的今天,人们对信息的需求有了更新,更高的要求,而网页由于本身所具有的信息量大,传递快速,没有时空限制等特点恰好满足这种要求。所以网页也逐渐成为一种新兴的教育资源。网页实际是一个文件,他存放在世界某个角落的的某一台计算机中而这台计算机必须是与互联网相连的。网页经由网址(URL)来识别与存取,当我们在浏览器输入网址后,经过一段复杂而又快速的程序,网页文件会被传送到你的计算机,然后再通过浏览器解释网页的内容,再展示到你的眼前。关键词:ASP,数据
3、库,网页Abstract: Follows the network appearance, the homepage is integrating peoples life gradually。 The fast prompt news browsing, on the multicolored net the information, the network and peoples life is closely linked, therefore in the world appeared third media - - Internet。 The manufacture homepage
4、 is the enterprise and individual propagandizes own important method, simultaneously also is the learner gains the study information important method, in particular in education domain, in education for allaround development and lifelong education into inevitable today, the people had the renewal to
5、 the information demand, higher request, but homepage because itself has the information content is big, the transmission is fast, does not have characteristics and so on space and time limit to satisfy this kind of request exactly. Therefore the homepage also gradually becomes one kind of emerging
6、education resources。 The homepage is actually a document, he deposits in world some quoin but in some computer this computer must be and the Internet connected。 The homepage distinguishes and the deposit and withdrawal by way of website (URL), after we inputs the website in the browser, passes throu
7、gh a section complex and the fast procedure, the homepage document can transmit to yours computer, then through the browser explanation homepage content, again demonstrates you again at present.本文为互联网收集,请勿用作商业用途本文为互联网收集,请勿用作商业用途Key word: ASP, database, homepage1 网站的总体设计与分析1.1 设计思想通过网站,全面宣传和展示出一个具有简洁
8、而有特色的足球网站。1.2 开发工具的选用及分析我选择了ASP结合DreamweaverMX构架此次的网站设计。1.3 网站分析在动手制作网页前,一定要考虑好以下三方面: 1.确定栏目和版块; 2.确定网站的目录结构和链接结构 3.确定网站的整体风格创意设计。图片配文字的形式进行网页分析,网页的背景及风格设计以朴素和素雅为主,可以用简单线条、清淡的色彩和白色的背景来体现。根据前面的设计思想进行分析,按照系统开发的基本观点对网站进行分解,从内容上可对网站作如下划分:英超联赛 意甲联赛 西甲联赛 球星图库 和冠军杯赛,各联赛以介绍联赛球队为主,星图库中添加各国球星及简介,另外介绍大家比较喜爱的冠军
9、杯的详细资料。2 详细设计分析2.1 主页设计网站主页采用静态的主画面来完成,另外利用ASP与数据库结合的技术建立留言簿系统。主页结构图(如下)主页主要利用表格的布局来完成排版,使页面清晰整齐,。为实现最大灵活性,您可以仅在准备添加内容时绘制每一个单元格。能够将表格布局中的更多空白空间保留更长一段时间,这样可以更方便地移动单元格或调整单元格的大小。2.2 数据库设计1st 装系统 IIS (版本至少是4.0以上),安装需要操作系统盘2nd 配置ODBC,用的又是access数据库,【开始】【控制面板】【管理工具】【数据源ODBC】,点【系统DNS】【添加】 选择下图蓝色的,点完成然后会弹出下面
10、这个界面,点【选择】你虚拟目录里的数据库, 做到这里ODBC就配好.3rd 打开DreamweaverMX,点【窗口】【数据库】,在界面右边会出现你点数据库面板里的“+”号 点绑定数据库 还是什么的 选择要绑定的数据库,(ODBC的作用就是在DW里能看到access类型的数据库,这样你就能选择access数据库了)。4th 创建记录集,在服务器行为里点“+号,里面可以创建2。3 数据库详细信息2.3.1 留言簿(1)在站点下建一个留言簿的页面,在表单中插入4列2行的表格,前3行分别键入“姓名” “最喜欢的球队” “最喜欢的球星,在各行后面单击插入工具兰中表单类别中的文本字段按纽,插入文本域,并
11、进行设置。(2) 检查表单网页单击文档窗口左下角的form标签,选择整个表单,单击行为面版中的+号按牛,在弹出的菜单中选择检查表单命令,在谈出的检查表单对话框中的命令栏位类表中选择第一个选项,选中必须的复选框,在命令栏位列表中选择第3个选项,选中必须的复选框,日单击确定按钮.(3)建立数据库创建一个默认名为DB1的空数据库,在弹出的DB1:数据库对话框中选择对象选项组中的表选项,然后在列表框中双击使用设计器创建表选项.在弹出的表1表对话框中的字段名称分别键入“姓名” “最喜欢的球队” “最喜欢的球星”,在必填写字段文本框中键入“是”,最后保存。(4)连接数据库在DREAMWEAVER中显示数据
12、库面板,单击+,在弹出的菜单中选择数据源名称DSN命令,弹出数据源名称DSN对话框,在连接名称文本框中键入BLL,单击数据源管理器对话框中切换带系统DSN选项卡,单击添加按钮,在弹出的创建新数据源对话框的列表中选择Microsoft AccessDriver(.mdb)选项,单击完成,在弹出的ODBC Microsoft Access安装 对话框中的数据源名文本框中键入“BLL”,单击数据库选项组中的选择按钮,在弹出的选择数据库对话框中选对路径,单击确定按钮返回ODBC数据源管理器对话框,再单击确定按钮,返回数据源名称(DSN)对话框。在数据源名称(DSN)下拉列表框中选择BLL选项,单击确定
13、完成数据库连接。(5)添加记录集打开“留言簿。asp”,选择“绑定”命令,完成添加.(6)插入记录单击服务器行为面板,单击加号,选择插入记录命令,在弹出的插入记录对话框中连接下拉列表中选择BLL选项,在插入到表格下拉列表中选择“表1”选项,在插入后,转到文本框中键入“liuyan。asp”,在获取直自下拉菜单中选择form1选项,单击确定。(7)制作留言簿的浏览页打开liuyan。asp页面,显示帮定面板,为其添加一个记录集,从绑定面板中将“姓名”,“最喜欢的球队”,“最喜欢的球星”字段分别拖至相对应的表单单元格子中,选择添加的字段所在行,切换到服务器面版。单击加号按钮,选择可重复区域命令,在
14、弹出的重复区域对话框中选中显示选项组中的所有记录单项按钮,单击确定。此时可以进行测试。3.2。2 投票系统(1)数据库的设计和建立数据库文件tvote.mdb只有一个表tvote,该表只有一条记录,而记录对应着个字段,每一个字段保持一种选项的投票数目。(2)投票系统主页面制作实际上,投票者只需要作出选择就可以了,不需要添加任何行为.对投票页紧需设置表单及窗体对象的属性即可。(3)form设置将光标移到表单区域内,单击窗口下面的form标签来选中form.对form属性进行如下设置。单击表格右列第一行的单选按钮属性设置form中的单选按钮的属性.在其属性面板中,在单选按钮文本框中输入rbResu
15、lt,这样就设置了该单选按钮的的属性为rbResult,在选定值文本框中输入fGood,这样就设置了该单选按钮的Value属性值。输入的value属性值与数据库中的表tvote的一个字段名相同,而表tvote的字段保存的是选择很好项的投票者总数,在按下投票按钮提交后,将作为单选按钮的值传出,与数据库中的字段名联系起来!在初始状态选项中,选中已勾选单选按钮,即默认情况下被选中!同样,对下面个单选按钮也按以上步骤设置!表格中下面的个单选按钮的属性也设为rbResult,这样设置可使个单选按钮的属性相同,这样投票者就只能选择其中的一项.在初始状态选项中选中未选中单选按钮,在选定值文本框中分别输入fM
16、id、fBad,与表tvote中的另外二个字段相同,这样,vote.asp就作好了。(4)投票结果页面的制作首先制作页面。然后定义记录集。打开数据绑定面板,单击+按钮,选择记录集(查询)菜单项,如果出现简单记录集对话框,则应单击高级.。按钮转到高级记录集对话框。在名称文本框中输入rsVote,在连接下拉列表中选择connvote,在SQL列表框中书写“SELECT fGood, fMid, fBad, (fGood+fMid+fBad) as VTotal, (fGood/VTotal) as GoodPercent, (fMid/VTotal) as MidpPercent, (fBad/V
17、Total) as BadPercent FROM tVote”。数据绑定,将光标放在“有人参加了投票”之间,在绑定面板中选中字段,然后单击“插入”这样就把投票人的总数动态的加入到。页面中!用同样的方法将其他字段绑定到相应位置。记录集中的Goodpercent/Midpercent/Badpercent这个动态数据分别是投票很好一般很差的人数占投票总人数的比例.而这三项动态数据的值是小数,在浏览时,将以小数形式显示因此,要把他转换成百分数,并保留位小数。选中表格第一行中的rsVote.GoodPercent,然后在绑定面板中单击GoodPercent右边的下拉三角(即记录集“格式框中的下拉三角
18、,)在弹出的菜单中选择百分比2个小数位。表格的动态属性,制作图示可采用表格嵌套和表格的动态属性来完成。如果在表格中每一行的第列的部分嵌套一个只有一行一列的小表格,将这个小表格的背景色设置为红色,将小表格的宽度度量单位设置为百分比(相对于容纳他的单元格宽度也会根据投票者的数量的变化而变化,这样就达到了制作图示的目的。灰色的部分可以看做是投票的总人数,红色的部分可以看做是各选项的人数.把表格的背景设置为红色 。选中小表格,选择窗口标签检查器,打开标签面板,选择属性.找到常规width属性,选中他,这时在他旁边会出现一个闪电按钮。单击闪电按钮,会弹出一个动态数据窗口。在域列表框的记录集中选择Good
19、percent,然后在格式下拉列表中选择百分比个小数位项.单击确定。重复上面的步骤,分别在第二、三行插入一个小表格。只是在设置动态属性时,须在动态数据窗口的列表框的记录集中选择midpercent。 badpercent项,.的页面也到此就制作好了。(5)更新页add.asp新建一个动态页asp VBscript文件,在这里可以作一个转到result.asp的链接。绑定命令(预存过程),由于投票系统主要记录各个选项的投票人数,所以这一步并不是对数据库进行读操作或者向数据库插入一条记录,而是修改数据库的表vote中某一字段的值.确切的说,是对表vote某一字段的数据进行累加,所以必须选择命令(预
20、存过程)菜单项用简单的SQL语言进行定制。单击绑定面板的“+”选择“命令(预存过程),在vote。asp页中设值但选按钮的属性时,已将个单选按钮Value属性的值分别设置为表vote中的个字段名,所以Request.form(”rbResult”)值一定是表vote的一个字段名。所以这条SQL语句的意思就是使某一字段加,即在相应的字段中记下了一个投票者。3 毕业设计体会短短的8周即将过去了,经过努力,毕业设计也已经接近尾声了。尽管设计简单而且还很粗糙,但通过这次的设计,我进一步掌握了如何用DreamweaverMX制作网页的方法.这当中也遇到了很多的困难,但通过自身的钻研和同学的帮助,最终完成了此次设计。从确定系统需求、收集资料、数据库的应用以至到最后网页的完成,都给了我很大的收获,也是宝贵的实践经验。从中也发现了仍然还有很多地方不足,需要去学习,希望以后能做出更完善的设计。4 参考文献1 作者:启明工作室 编著 出版日期:2006.42 作者:张霜霖 等编 9