四川理工学院成都新华学院十周年校庆网站设计.docx

《四川理工学院成都新华学院十周年校庆网站设计.docx》由会员分享，可在线阅读，更多相关《四川理工学院成都新华学院十周年校庆网站设计.docx（27页珍藏版）》请在三一办公上搜索。

1、题目四川理工学院成都新华学院十周年校庆设 计 任务1、设计一个校庆网站，包括首页、用户登录、校庆新闻报道、图片展、十大成 就评选、嘉宾在线与网友互动以及留言板。2、能够在线进行用户的注册。3、以上几个栏目有不同分类的子栏目。4、图片展具有图片幻灯片片功能，并允许普通用户上传，允许注册用户评论。5、能对十大成就进行投票评选。6、能够实现嘉宾在线与网友互动7、用户能够就行在线留言，并且管理员能对留言就行敏感词汇的过滤。时 间 进 度2011年11月20日教师和同学双向选定毕业设计题目，教师进行选题指导， 学生独立进行课题论证，完成毕业论文(设计)任务书2011年12月20日完成毕业论文(设计)初步

2、构想框架2012年3月10日自己独立完善课题的基本内容及电子文档的编写，完成毕 业论文(设计)初稿2012年4月15日自己独立完善课题的基本内容及电子文档的编写，完成毕 业论文(设计)终稿主 和要 原参 始考 资文 料献(1) 主编 白萍清华大学出版实用软件工程与实训(2) 主编 张晓明中国铁道出版计算机网络编程技术(3) 主编杨选辉清华大学出版网页设计与制作教程(4) 主编贺平清华大学出版FLASH动画设计与制作(5) 主编刘枝盛高等教育出版WEB编程实用技术教程(6) 主编徐磊清华大学出版网页制作与网站建设技术大全(7) 主编王萍萍清华大学出版ASP+Dreamweaver动态网站开 发指

3、导教师：余祥洪摘要四川理工学院成都新华学院坐落于成都市郸县犀浦镇，毗邻国家级高新 技术产业工发区一成都市高新西区。随着时间的推移，四川理工学院成都 新华学院不知不觉已在成都立足了十年之久，为回顾学校历史，展示办学 成就，展望美好未来，激励师生、校友爱校兴校的精神，增强社会各界关 心、支持我校办学的热情，凝聚个方力量，推动学校全面、快速、可持续 发展，特筹备十周年校庆。本文就校庆网站的规划与建设，以软件工程的方法对全过程进行了 分析与研究。本文的主要工作集中在：1、对网站设计的思想进行概述，并对网站开发过程中使用的开发工 具和技术作了简单的介绍。2、对网站设计进行总体分析与设计。3、使用Drea

4、mweaver+IIS+SQL技术对校庆网站进行详细设计，并实现网 站的各个功能。4、校庆网站设计完成后进行发布与后期维护。关键词:校庆、网站、Dreamweaver、IIS、Access、维护【Abstract 】:Sichuan university of xinhua college islocated in chengdu XiPuZhen chengdu PI county recently, adjacent to national high and new technology industry industrial development zone-chengdu city w

5、est high. With the passage of time, the sichuan university of chengdu xinhua college before you know it has set up a file in the chengdu based on the 10 years, to review the school history, running the show achievement, look to the bright future, motivate the teachers and students, alumni and the sp

6、irit of the love school, enhance the social from all walks of life who care about andsupport the enthusiasm of our school, gathered a party push school comprehensive, rapid and sustainable development, especially for the tenth anniversary celebration.【Keywords】： Anniversary, a web site, Dreamweaver,

7、 IIS, Access, maintenance第1章概论11.1、设计思想11.2、网站功能要求21.3开发工具的选用及介绍21.3.1、什么是 Dreamweaver21.3.2、Macromedia Dreamweaver MX 2004 介绍： 21.4关系型数据库的选择31.4.1 Access 31.4.2 SQL Server错误！未定义书签。第2章网站总体分析与设计32.1网站系统分析32.2网站的创建42.2.1创建站点42.2.2创建网页文件42.3数据库的链接42.4数据库设计6第3章详细设计83.1校庆首页83.1.1 功能93.1.2组成构造93.2系统数据库113

8、.2.1数据库的分析113.2.2数据表的结构12第四章 网站的具体实现144.1网站的开发基本步骤144.2具体实现14第五章总结16致谢21参考文献22在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的 重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。Internet 上发布信息主要是通过网站来实现的，获取信息也是要在Internet海洋”中按 照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet 应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部 分，从而倍受人们的重视。为了更好的办学，庆祝学校建校十周年

9、，提高学校知 名度，特构四川理工学院成都新华学院学校网站。建立学院网站有以下作用：(1) 学院网站是学院的“商标”。在这个高度信息化的社会里，建立 学院自己的网站是最直接的宣传手段。网站的超时空特性，不仅能让本地 区的人们了解学院，更可让世界了解学院。(2) 学院有巨大的教育资源，网站是实现教育资源分配的桥梁，它使 每一位教师和学生都能均等的得到培训和受教育的机会，能极大的提高教 学效率。(3) 学院网站能提供教学互动的全新方式，学院网站使得教师与教 师、教师与学生、学生与学生之间的交流有了全新的方式，它不再受到传 统课堂的制约。它可以使不同的学院同处一室，共同讨论，共同提高。地 理上的界限在

10、这里模糊和消失了，学院网站是真正没有围墙的学院。(4) 学院网站能够提供个性化的学习平台，不同的学生理解世界的方 式各不相同，认知世界有诸多方式。网络提供的丰富资源可以使学生寻觅 不同的教育方式，各取所需。学院网站允许不同的学生沿着自己的途径， 按自己的速度接受教育与学习，学生将有机会享受最佳的教育机会，充分 发掘自己的内在潜力，培植独特的个性和人格。(5) 学院网站是最佳的教学研究室，学院网站与教育类专门网站的有 效链接，给学院教学研究带来了一片新天地，各种优秀教案、专家论坛、 网络观摩课、各科素材、多媒体课件制作等内容为教师教研提供了极佳的 平台。有效地降低教研成本、提高效率。第1章概论在

11、已跨入21世纪的今天，计算机网络的应用越来越普及，人类使用和学习信息的方式 以及信息的包装方式正在进行着不可阻挡的革命，这次革命将比印刷术的出现所产生的影响 以及对社会发展的推动远为复杂而巨大。目前，我国上网的人口已达一亿，成为世界上网民 最多的国家，许多人在需要查询信息，首先想到的就是上网。网站的迷人之处在于综合使用 文本、图形、图像、声音、动画以及视频的信息和内容，具有丰富的多媒体表现与互动特点， 无可置疑，网站已成为最吸引人的，也最有效的信息传递手段和方式。因此，网站建设在 Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中得最重要的组 成部分，从而倍受人们的重视

12、，在未来的发展中占据着不可磨灭的地位，是人们生活中不可 缺少的部分。1.1、设计思想通过学校校庆网站，全面宣传，展示校园风采、优点与特色，以及独特的一面。发布学 校的重大新闻，增强同学之间的相互联系，提高办事效率。网站结构示意图:主页1.2、网站功能要求设计一套基于数据库的信息即使发布系统，可用于各类信息的实时发布，前台 用户可通过页面浏览查询，用户可以自己上传图片，但是通过管理员审核，后台可 以动态管理图片、文字等多类信息、用户管理等，可以通过后台管理实现网站实时 的更新，让外界更多的了解四川理工学院成都新华学院十周年校庆网站。1.3开发工具的选用及介绍1.3.1、什么是 Dreamweav

13、erDreamweaver是美国MACROMEDIA公司开发的集Web页制作和管理网站于一身的所 见即所得Web页编辑器，它是第一套针对专业Web页设计师的视觉化Web页开发工具，利 用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的Web页。说到MACROMEDIA公司大家不会感到陌生，著名的多媒体开发工具AUTHORWARE 和DIRECTOR均出自该公司的旗下，以及目前在互联网(Internet)上越来越流行的网络多媒 体开发工具FLASH也是出自该公司的旗下。而Dreamweaver则是MACROMEDIA公司继 FlASH以后向互联网(Internet)推出的又一梦幻工

14、具。Dreamweaver、FLASH以及在 Dreamweaver推出的针对专业 Web页图像设计的FIREWORKS，三者被MACROMEDIA公 司称为“网络三剑客”，足见市场的反响和MACROMEDIA公司对它们的自信。1.3.2、Macromedia Dreamweaver MX 2004 介绍：一个可视化的网页设计和网站管理工具，支持最新的Web技术，包含HTML检查、 HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、 全局查找替换、全FTP功能、处理Flash和Shockwave等富媒体格式和动态HTML、基于 团队的Web创作

15、。在编辑上你可以选择可视化方式或者你喜欢的源码编辑方式。Dreamweaver MX 2004的十大新特性：1. 动态跨浏览器验证：自动检测标签和CSS规则来适应所有主流浏览器！2. 更强大的CSS支持！3. 内建的图形编辑引擎：修剪，改变大小，尺寸，旋转角度，调节明暗度都不需要离开 Dreamweaver环境，因为它本身集成了 FW的基本图形编辑技术.(这一点有模仿FrontPage的 嫌疑,但这个功能确实很实用)！4. 安全FTP:完全加密传输保证文件和帐号信息的安全！5. 增强对当今技术的支持:支持当今主流的开放环境:ColdFusion,J2EE,PHP,.NET，和其他主 流的服务器

16、技术.Dreamweaver现在加入了 XML命名空间支持,ASP.NET表单控件对象，新的参 考书内容和新的PHP服务器端行为！6. 无缝整合外部文件和代码:直接将Word和Excel文档复制和粘贴到Dreamweaver中，会保 留字体，颜色,CSS样式表信息.使用，使用系统支持的编码保存任何字体，包括双字节字符 集.7. 紧密整合MM的其他工具:加强了和MM其他几款产品的协同工作能力.例如:你可以通过DW 直接设置Flash组件的参数.8. 基本支持改良:插入条，表格工具都有改进！9. 增强代码编写工具：编辑代码更省时，例如右键编写代码工具，增强的查找和替换，高效的 属性面板.10. 改

17、进的设计开放环境:一个改良的用户界面,更高的实用性，非常亲切和有逻辑，让你快速 找到你想要的东西,一个新的开始屏幕让你快速访问最近的文件和教程资源1.4关系型数据库的选择1.4.1 AccessMicrosoft Access是一种桌面数据库，存储方式简单，易于维护管理，只适合数据量 少的应用，在处理少量数据和单机访问的数据库时是很好的，效率也很高；界面友好、易 操作，集成环境、处理多种数据信息，支持广泛，易于扩展，弹性较大。但是它的同 时访问客户端不能多于4个。Microsoft Access数据库有一定的极限，如果数据达到100M左 右，很容易造成服务器IIS假死，或者消耗掉服务器的内存导

18、致服务器崩溃。第2章网站总体分析与设计2.1网站系统分析根据前面的设计思想进行分析，按照系统开发的基本观点进行对网站进行分解，从内容 上可对网站作如下划分：校庆首页学校介绍校庆新闻报道学校图片展学校十大成就评选嘉宾在线与网友互动留言板2.2网站的创建2.2.1创建站点创建站点的具体步骤如下：首先在本地硬盘上建立一个文件夹，用来存放将要制作的站点。 运行Dreamweaver MX 2004，选择“站点” I “管理站点”菜单命令，弹出“管理站 点”对话框，在对话框中单击“新建” I “站点”选项 在弹出的对话框中输入新建站点的名字“四川理工学院成都新华学院十周年校庆”, 再单击“下一步”按钮。

19、 在弹出的对话框中选择“是，我想使用服务器技术。”单击“下一步”按钮。在弹出的对话框中选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推 荐）”单选按钮，然后在下面的文本框中选择“C:Documents and SettingsAdministrator桌面 四川理工成都新华学院十周年校庆”文件夹下，单击“下一步”按钮。 在弹出的对话框中选择“无”选项，单击“下一步”按钮。 在弹出的对话框中认真阅读设置好的信息，确认无误后单击“完成”按钮。出现“管理站点”对话框，其中显示了新建的站点，单击“完成”按钮。2.2.2创建网页文件选择“文件” i “新建，菜单命令，弹出“新建文档，对话框，从

20、各种预先设计好的页 面类别中选择“基本页” I “HTML”，然后单击“创建”按钮即可。2.3数据库的链接1：链接用户数据源，如下图:2：选择数据库的路径，如下图:3：选择数据库的驱动程序，如下图:4：链接建立并测试，如下图:2.4数据库设计采用的数据库是Microsoft Access，拟建立db2.mdb库文件，如: 用户登录信息表，注册表，投票表计数等二十张表。如下图：6tbtbTtb8tb9二十周年图片展数据表tb_Img 留言报数据表tb_Gbook 十大成就评选数据表tb_Vote 校庆新闻数据表tb_NeWS便用设计器创建表 便用向导创建表 通过输入数据创建表 csltbltbl

21、Otb2tb3tb4tb5新闻评论数据表比项姑即注册用户数据表tb_User第3章详细设计3.1校庆首页网站主页采用静、动相结合的方式，即静态的主画面和动态的图片相结合， 体现学校的勃勃生气，动静相结合的主页方式介绍学校风采、优点特色、信息发 布，校务活动，展现出了校庆网站的总体结构和思想。利用ASP与数据库结合的 技术建立数据库查询管理系统，采用交互式的动态的web画面来实现，使得网站 主页主题鲜明、内容丰富，大家能更快的了解到校庆活动的动态信息，方便大家 产于其中，突出活动主题。设计效果图如下:3.1.1功能用户注册，用户登录，对校园成就进行投票，校园图片展，校园新闻， 留言板，在线搜索。

22、3.1.2组成构造共分成8大部分：1：用户可以自己注册，登录并获得不同的浏览权限。如下图：2. 对学校的各类成就进行投票，评选出优秀的。如下图:十大成就标题：人文学院喜欢(2)O不喜欢(0) 理 标题：保卫科喜欢(2) O不喜欢(0)理标题：教务处喜欢(0) O不喜欢(o)M标题：新闻五原则喜欢(o) o不喜欢(1)M标题，机械掌院喜欢(0) O不喜欢(1)窿标题：经济与管理学院喜欢Co) o不喜欢(o)标题：自动化电子学院喜欢(o) O不喜欢Co)标题：英语简历10元素喜欢(O) O不喜欢标题：教师招聘喜欢Q)。不喜欢Co)标题：学院电子报喜欢(1) O不喜欢(3)|Wj3. 浏览图片展可以

23、清晰的看出每个角落的精彩画面。如下图:4. 滚动播放出各个方面的即时新闻，如下图:滚动新闻研究生新闻五原则毕业设计(论文)专项检查学生志愿者服务队总队举行宣，建军书记看望黄岭校区辅导员.内江师范马元方书记一行莅校建筑工程成功举办学生欢送会5. 可以在线搜寻你想了解的新闻，成就等，如下图：6. 在线留言，如下图:7.版权所有，如下图:I四川理工成都新华学院版权所有 四川省成都市郛县犀浦镇浦兴街44号 邮编:6117318.友情链接，如下图： ；请与我联系地址：四川省成都市都县犀浦镇浦兴街44号电话：028-12345678028-876543213.2系统数据库3.2.1数据库的分析Web应用跟

24、着我的管理用户状态行为主要有两种措施：一是使用Session 或Cookies保存用户活跃期间的信息，但是这些信息在会话结束将不再存在。对 于那些需要永久保存的信息，如：用户的注册资料等信息由于数据量较大必须通 过数据库进行存储。并提供良好的方式进行查询，插入，修改和删除。3.2.2系统构思校园的前台包括首页、学校概况、新闻、图片展、十大成就评选、留言板、在线搜索、网站版权等模块。如下图:3.2.2数据表的结构校园网站数据表如下:FassWordUtypg Qiiesti on AriEwer SexEmail本本本本本本本 文文文文文文文用户名 密码 用户类型 找回密码问题 找回密码答案 性

25、别 E_mailtblO :表字段名称数据类型 1vl自动编号 文本v2文本al数字a2数字B十罔年图片屣数据表H_Ig :表字段名称数据类型133文本图片展皿Title文本图片展标题Im 田 irl文本图片路径ImgniEer文本上传图片用户:Allow文本是否通过审秋清言板数据表tb_Gbook :表字段名称 I 数据类型UEerlLdiTieTitleContentReplyDateTimeM M -M i.hi M 文交文文交文留言校ID 留言用户名 留言标题留言内容留言回复留言时间字段名称数据类型1圃文本成就评选IDTitle文本1 口大成就标题CurLtent文本1口大成就内容Vu

26、 t erLijiri文本投票数B十大成就评选数据表tb_ote :表TitleCuntentDataTirriHDJImgurliL-.M -!:iT-.i iT-.i W 文交文文交文新闻ID新闻标题新闻内容新闻日期浏览技数新闻图片B新闻评论熟据表tb_RevieT :表字段名称 I数据类型FTitle评论ID评论标题ContentITidDateTime UshITlih文本文本文本所发表文章ID 发表评论时间 发表评论用户名第四章网站的具体实现4.1网站的开发基本步骤创建页面和使用ASP.NET应用程序大致可分为4个步骤：（1）收集材料；（2）建立网站；（3）设置属性；（4）布局、加载

27、代码和素材；（5）保存并运行；4.2具体实现本校庆网站采用DIV+CSS布局，布局新颖，打破了以往的传统静态网页结 构，以红色为主色调，象征着青春活力，充满着勃勃生机，充分的渲染了校庆活 动的主题。首页名为：index，首页界面如下图：漆动新用商.逐空.：wm按与话狡住麻JTiij山欧.种就职沏ffl蝴巴I周年校 庆图片展W混Flfl白吒即7#摹场& -ft EB.：i： MH-晾福 g： I-Ki * MaiWNSflLiZiUWSr /I - ,1.4uiaAiZLE匕讨止井顽I7HF巾片点却格LE完2i g (.：.E.审膺豆皿，都E硬土 顾F驾| # (?O TTS (0 ：四C-穴崔

28、克C. ：iW林迪占穴七咕子0不三江(fl：1J? MM M) TTS (们W停杵核，其厦裨币时Ej TW：i . u:西w砂5、下宥找：r神1桥罚.他八电唔 4弥山函口 卜S忒MfHST=h握，学宜:电了新，FS心：；1理JK耳攻口 1O下喜忒；3：1打凯在济部疏Ehf - m.n咕虹碗至二m. i：iH第五章总结此次毕业设计，从选题到实现，一开始是茫然，然后慢慢进入状态，从最 初到整个网站的设计，到代码的编辑，然后到思路逐步清晰，整个过程难以表达。 在此过程中我用到了软件工具主要有photoshop、flash、dreamweaver、access等， 运用ASP.NET语言，开发了该校庆

29、网站。在系统的开发过程中，多门以前抽象 的课程都得到了实际应用，再次感觉到这几门理论课程在实践中的重要性。在这 次设计中，我更加的熟悉了实用DIV+CSS布局，DIV+CSS布局使得页面载入更 快，在修改设计时更有效率，帮助整个站点保持良好的视觉效果。在与指导老师的紧张交流讨论中让我对这次的任务充满了信心，为了使我 的论文做到完整精确，我在学校图书馆以及网上收集了大量的资料，这样也更有 利于毕业论文的撰写，然后就将收集的资料进行仔细分类，及时拿给老师进行沟 通。虽然有时候感觉很累，但是觉得过得很充实。在本次设计过程中，我深刻感受到动手能力以及团队合作的重要性，在学习中我们不 应该仅仅满足于书本

30、知识，更应该着重于实践，就像我们这次写论文一样，在论文实践中我 们学会了理论与实践结合才能够完美，在此过程中不可避免会遇到许多不如意，我也认识到 自己的不足，以前在课堂上总觉得这些知识没用，而如今这些东西都用上了，编程都是建立 在这些理论知识上的，这次的任务让我把多方面的知识都结合了起来，如编程、排版，美工， 设计等，终于让我做出更完美的设计。对于我的不足之处，我也加以改进，通过收集大量的 资料，并与各指导老师及同学们的交流，在他们的帮助下，让我顺利的完成了本次任务，写 完论文后，心里充满了激动与自豪，其实我们做任何事情都是这个样子，需要我们脚踏实地 的去做，认真严谨，要有一个好的态度才能做成

31、一件事。就像我们开始着手毕业论文一样， 一开始每个人都觉得那是一项很重的任务，都有点畏惧，但经过长时间的努力和积累，经过 不断的查资料和总结，我们都很好的完成了毕业论文，结果的收获与喜悦相信我们都能感觉 到。部分代码投票系统的部分代码：div align=center”div align=left”在线 搜索 类型 按标题 按时间 关键字   十 大 成就 标题：人文学院     div align=center”喜欢()不喜欢()  标题：经济与管理学院  喜欢() 不喜欢()   

32、注册页面的部分代码：* 必填div align=right性别：男男女取回密码问题：致谢本文是在尊敬的余祥宏老师的精心指导下完成的，从论文的构思，方案设计到论文撰写 和修改无不渗透着他们大量的心血。余老师的悉心指导，让我有信心去解决所遇到的一个个 问题。在近几个月的毕业设计中，他们在学术上给了我很多帮助和教育。我在这里向这位导 师致以衷心的感谢！还要感谢我的同学，感谢他们在给予的帮助，同时也感谢四川理工成都 新华学院全体老师对我的教育和培养。白萍 张晓明 杨选辉 贺平 刘枝盛 徐磊 王萍萍参考文献(7) 实用软件工程与实训清华大学出版主编(8) 计算机网络编程技术中国铁道出版主编(9) 网页设计与制作教程清华大学出版主编(10) FLASH动画设计与制作清华大学出版主编(11) WEB编程实用技术教程高等教育出版主编(12) 网页制作与网站建设技术大全清华大学出版 主编(7)ASP+Dreamweaver动态网站开发清华大学出版 主编