1、厦门大学软件学院 第 - 1 - 页 共 15 页 本科毕业论文 (科研训练，毕业设计 ) 题 目： B/S 架构的应用网站管理系统 -网站风格设计 姓 名： 学 院：软件学院 系： 专 业：软件工程 年 级： 学 号： 指导教师（校内）： 职称： 年 月 日 厦门大学软件学院 第 - 2 - 页 共 15 页 B/S 架构应用网站管理系统 摘要 在对若干网站管理系统的调查研究的基础上，得出网站管理系统风格设计的几个原则，包括统一、标志、关联引导、重复、构图、多样化原则，并以我们的 B/S 架构应用网站管理系统风格设计的实践验证了这 些原则。 本文分五章介绍 B/S 架构应用网站管理系统风格界
2、面的设计和实现过程。 本文分三章介绍 B/S 架构应用网站管理系统 的风格设计和实现细节。第一章：“ 开发平台、技术介绍 、工具”，详细介绍该系统的开发平台和所使用的技术与工具。第二章：“ 网站风格实现过程 ”，分类说明 网站风格的设计思想 ，并介绍个性化网站风格的实现原理。第三章：“ 系统风格界面的设计及实现 ”，介绍个性化界面的开发流程、设计细节和实现结果。 关键字 网站 风格 设计 厦门大学软件学院 第 - 3 - 页 共 15 页 B/S Structure management system for website Abstract In managing to some websi
3、tes the investigative foundation in inquisition of the system, get a few principles that a website management system style design, include to unify, scribe, connection leading, repetition, composition, diversification principle, and with our B/ S structure application website management the fulfillm
4、ent that system style design verified these principleses. This text divides five introduction B/ S structure application the design of the website management system style interface with realize process. This text divides three introduction B/ S structure application the website manages the style des
5、ign of the system with realizes details.Chapter 1:“ development terrace, technique introduction, tool“, detailed introduce the terrace of development of that system with a technique for using and tool.Chapter 2:“ the website style realizes process“, the design of the classification elucidation websi
6、te style thoughts, combining to introduce the character turn the website style realizes principle.Chapter 3:“ the design of the system style interface and realize“, introduce the process of development that character turn interface and design the details with realizes result. Keywords Website, Style
7、, Design 厦门大学软件学院 第 - 4 - 页 共 15 页 目 录 摘要 . - 2 - 关键字 网站 风格 设计 . - 2 - B/S Structure management system for website . - 3 - Abstract. - 3 - Keywords . - 3 - 目 录 . - 4 - 引言 . - 5 - 第一章 开发平台、技术、工具介绍 . - 6 - 1.1 ASP.NET . - 6 - 1.2 Visual Studio.NET 2003. - 7 - 1.3 Dreamweaver . - 7 - 1.4 Photoshop . -
8、8 - 第二章 网站风格实现过程 . - 9 - 2 1 网站风格设计 . - 9 - 2.2 自定义风格的实现过程 . - 9 - 2.3 增加多种风格 . - 10 - 第三章 系统风格界面的设计及实现 . - 11 - 3.1 形成网站风格所依赖的设计原则 . - 11 - 3.2 在网站风格设计中的原则运 用 . - 12 - 结论 . - 14 - 致谢语 . - 14 - 厦门大学软件学院 第 - 5 - 页 共 15 页 引言 应用网站管理系统， B/S Structure management system for website 。 我们的系统是采 用 B/S 模式构建的，目
9、的是给用户提供尽可能多的功能模块，使得用户可以根据自己的实际需要从中进行选择，从而方便的建立起自己的网站。同时，具有管理权限的用户还可以设定低权限用户，从而屏蔽管理员功能，使网站可供大众使用。 我们的系统主要面向中、小型企事业单位和个人，这类用户群体的特点是本身没有足够的预算购买软件公司为其定制的产品，且他们的所需应用相对简单化、模式化，在这方面无需投入太大预算。而我们的系统将将为他们提供一个简单、人性化的平台，通过我们的平台， 用户可以定制出适合他们的系统，且所需成本较为低廉。 之所 以选择 .net 平台进行开发，主要是因为这个平台在开发中、小型应用方面具有成本优势，容易上手，其提供的控件
10、类型较丰富，且支持 web service 技术。 厦门大学软件学院 第 - 6 - 页 共 15 页 第 一 章 开发平台、技术、工具介绍 1.1 ASP.NET ASP.net 是一种建立在通用语言上的程序构架，能被用于一台 Web 服务器来建立强大的Web 应用程序。 ASP.net 提供许多比现在的 Web 开发模式强大的的优势。 1.执行效率的大幅提高 ASP.net 是把基于通用语言的程序在服务器上运行。不像以前的 ASP 即时解释程序， 而是将程序在服务器端首次运行时进行编译，这样的执行效果，当然比一条一条的解释强很多。 2. 世界级的工具支持 ASP.net 构架是可以用 Mi
11、crosoft（ R）公司最新的产品 Visual S 开发环境进行开发， WYSIWYG（ What You See Is What You Get 所见即为所得）的编辑。这些仅是 ASP.net强大化软件支持的一小部分。 3. 强大性和适应性 因为 ASP.net 是基于通用语言的编译运行的程序，所以它的强大性和适应性，可以使它运行在 Web 应用软 件开发者的几乎全部的平台上。通用语言的基本库，消息机制，数据接口的处理都能无缝的整合到 ASP.net 的 Web 应用中。 ASP.net 同时也是 language-independent语言独立化的，所以，你可以选择一种最适合你的语言来
12、编写你的程序，或者把你的程序用很多种语言来写，现在已经支持的有 C#（ C+和 Java 的结合体）， VB， Jscript。将来，这样的多种程序语言协同工作的能力保护您现在的基于 COM+开发的程序，能够完整的移植向ASP.net。 4. 简单性和易学性 ASP.net 是运行一些很平常的任务如表单的提交客户端的身份验证、分布系统和网站配置变得非常简单。例如 ASP.net 页面构架允许你建立你自己的用户分界面，使其不同于常见的 VB-Like 界面。另外，通用语言简化开发使把代码结合成软件简单的就像装配电脑。 5. 高效可管理性 ASP.net 使用一种字符基础的，分级的配置系统，使你服
13、务器环境和应用程序的设置更加简单。因为配置信息都保存在简单文本中，新的设置有可能都不需要启动本地的管理员工具就可以实现。这种被称为 “Zero Local Administration“的哲学观念使 A 的基于应用的开发更加具体，和快捷。一个 ASP.net 的应用程序在一台服务器系统的安装只需要简单的拷贝一些必须得文件，不需要系统的重新启动，一切就是这么简单。 6. 多处理器环境的可靠性 ASP.net 已经被刻意设计成为一种可以用于多处理器的开发工具，它在多处理器的环境下用特殊的无缝连接技术，将很大的提高运行速度。即使你现在的 ASP.net 应用软件是为一个处理器开发的，将来多处理器运行
14、时不需要任何改变都能提高他们的效能，但现在的 ASP确做不到这一点 。 7. 自定义性，和可扩展性 ASP.net设计时考虑了让网站开发人员可以在自己的代码中自己定义 “plug-in“的模块。这与原来的包含关系不同， ASP.net 可以加入自己定义的如何组件。 8. 安全性 基于 Windows 认证技术和每应用程序配置，你可以确性你的原程序时绝对安全的。 厦门大学软件学院 第 - 7 - 页 共 15 页 1.2 Visual Studio.NET 2003 Visual Studio .NET 2003，是 Microsoft 的第二代开发工具，用于构建和部署功能强 大而安全的连接 M
15、icrosoft .NET 的软件。 它 增强并进一步完善了其前代产品的功能，并与前代产品高度兼容。 Visual Studio .NET 2003 包括来自 Modeler 的全套功能，可帮助构建最复杂的企业级应用程序和在最小的设备上部署应用程序。通过全世界各种规模的公司的使用， Visual Studio .NET 和 Microsoft Windows Windows NET Framework 提供了一个强大而完善的端到端工具，用以设计、开发、调试和部署用于 Microsoft Windows 和 Web 的安全的应用程序 这些应用程序强健而且易于使用。 Visual Studio .
16、NET 2003 包含 Windows .NET Framework 的一个增强版本。 Windows .NET Framework 1.1 版在前一版本的基础上增添了新的能力、功能增强和文档改进。开发人员能够使用同样的编程模型、开发工具及编程技能，来构建应用范围广泛 -从小设备到最大的数据中心 -的应用程序。 开发人员可以使用 Visual Studio .NET 来： 构建功能强大而且响应能力极好的基于 Windows 的应用程序。 构建功能强大而且响应能力极好的 Pocket PC 应用程序。 构建完善而安全的 Web 应用程序。 构建对设备有智能感知能力的完善而安全的移动 Web 应用
17、程序。 在以上任何一种应用程序中使用 XML Web services。 避免 “DLL 灾难 ”。 消除代价高昂的应用程序部署和维护问题。 Visual Studio .NET 是唯一的从头至尾都是基于通过 XML Web service 进行集成这一思想而构建的环境。通过允许应用程序通过 Internet 共享数据， XML Web services 使开发人员能够利用新的和现有的代码构建应用程序，而不用考虑平台、编程语言或对象模型。 1.3 Dreamweaver Dreamweaver 是美国 MACROMEDIA 公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套
18、针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。其特点有以下几方面： 1. 制作效率高 Dreamweaver 可以用最快速的方式将 Fireworks， FreeHand，或 Photoshop 等档案移至网页上。使用检色吸管工具选择萤幕上的颜色可设定最接近的网页安全色。对於选单，快捷键与格式控制，都只要一个简单步骤便可完成。 Dremweaver 能与您喜爱的设计工具，如 Playback Flash， Shockwave 和外挂模组等搭配，不需离开Dremweaver 便可完成，整体运用流程自然顺畅。除此之外，只要单
19、击便可使厦门大学软件学院 第 - 8 - 页 共 15 页 Dreamweaver 自动开启 Firework 或 Photoshop 来进行编辑与设定图档的最佳化。 2.网站管理方便 使用网站地图可以快速制作 网站雏形，设计，更新和重组网页。改变网页位置或档案名称， Dreamweaver 会自动更新所有连结。使用支援文字， HTML 码， HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。 3.控制能力强 Dreamweaver 是唯一提供 Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含 HomeSite 和 BBEdit 等主流文字编
20、辑器。帧 (frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式 化表格群组， Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。 4.所供即所得 Dreamweaver 成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给 Third-party 厂商，包含 ASP， Apache， BroadVision， Cold Fusion， iCAT， Tango与自行发展的应用软体。当您正使用 Dreamweaver 在设计动态网页时，所供即所得的功能，让您不需要透过浏
21、览器就能预览网页。 梦幻样版和 XMLDreamweaver将内 容与设计分开，应用於快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地汇入或输出 XML 内容。 5.全方位的呈现 利用 Dreamweaver 设计的网页，可以全方位的呈现在任何平台的热门 浏览器上。对于 cascading style sheets 的动态 HTML 支援和鼠标换图效果，声音和动画的DHTML 效果资料库可在 Netscape 和 Microsoft 浏览器上执行。使用不同浏览器检示功能， Dr
22、eamweaver 可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从 Dreamweaver 的网站在下载它的描述档，便可得知详尽的成效报告。 1.4 Photoshop Photoshop 是美国 Adobe 公司开发的图形图像处理软件。它的出现，不仅使人们告别了对图片进行修正的传统手工方式，而 且还可以通过自己的创意，制作出现实世界里无法拍摄到的图像。无论是对于设计师还是摄像师来说， Photoshop 提供的几乎是无限的创作空间，为图像处理开辟了一个极富弹性且易于控制的世界。而对于普通用户来说， Photoshop 同样提供了一个前所从未有的自我表现舞台。用户可以尽情
23、发挥想像力、充分显示自己的艺术才能，创造出令人赞叹的图像作品。目前已经有越来越多的艺术家、广告设计者、专业设计师视它为自己的得力助手，用它创造出许多出神入化的作品。 厦门大学软件学院 第 - 9 - 页 共 15 页 第 二 章 网站风格实现过程 2 1 网站风格设计 表 1 功能性需 求分类描述表 功能类别 功能名称、标识符 描述 网站风格 风格展示 可选风格的缩略图显示 风格选择 用户可选定所需风格 2 1 1 风格展示 表 2 风格选择需求描述表 名称、标识符 StyteShow 功能描述 浏览所提供的几种网站风格 优先级 输入 用户点击“风格浏览” 操作序列 输出 网站风格以缩略图形式
24、显示出来 补充说明 2 1 2 风格选择 表 3 用户资格认证 需求描述表 名称、标识符 SetStyte 功能描述 用户设定其自定义网站所需风格 优先级 输入 用户勾选 风格缩略图下的单选框，并按确定键 操作序列 输出 成功则显示风格设定成功信息，失败会抛出原因信息 补充说明 2.2 自定义风格的实现过程 在数据库中的 TB_user 表中有一列名 style， 我把已定义好的风格用整型数表示。目前系统提供两种风格 分别用 1 和 2 表示，默认值为 1。 以下为风格 1 的 css 代码 厦门大学软件学院 第 - 10 - 页 共 15 页 Response.Write(“ BODY“);
25、 Response.Write(“ SCROLLBAR-FACE-COLOR: #799ae1; BACKGROUND: #799ae1; MARGIN: 0px; FONT: 12px 宋体 ;“); Response.Write(“SCROLLBAR-HIGHLIGHT-COLOR: #799ae1; SCROLLBAR-SHADOW-COLOR: #799ae1; “); Response.Write(“SCROLLBAR-3DLIGHT-COLOR: #799ae1; SCROLLBAR-ARROW-COLOR: #ffffff;“); Response.Write(“SCROLLBA
26、R-TRACK-COLOR: #aabfec; SCROLLBAR-DARKSHADOW-COLOR: #799ae1 “); Response.Write(“TABLE BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px “); Response.Write(“TD FONT: 12px 宋体 IMG BORDER-RIGHT: 0px; BORDER-TOP: 0px; VERTICAL-ALIGN: bottom; “); Response.Write(“BORDER-LEFT: 0px; BO
27、RDER-BOTTOM: 0px A FONT: 12px 宋体 ; COLOR: #215dc6; TEXT-DECORATION: none “); Response.Write(“A:hover COLOR: #428eff .sec_menu BORDER-RIGHT: white 1px solid; PADDING-RIGHT: 2px;“); Response.Write(“PADDING-LEFT: 2px; BACKGROUND: #d6dff7; PADDING-BOTTOM: 5px; BORDER-LEFT: white 1px solid;“); Response.W
28、rite(“PADDING-TOP: 5px; BORDER-BOTTOM: white 1px solid .menu_title .menu_title SPAN “); Response.Write(“ FONT-WEIGHT: bold; LEFT: 8px; COLOR: #215dc6; POSITION: relative; TOP: 2px “); Response.Write(“.menu_title2 .menu_title2 SPAN FONT-WEIGHT: bold; LEFT: 8px; COLOR: #428eff;“); Response.Write(“ POS
29、ITION: relative; TOP: 2px “); 在允许使用用户自定义的风格页面中，我加入了 writeCSS（ int s）方法 ,并调用 web 服务中的 的 getStytle()方法，把 (string)Session“LoginUser“参数传递给它 ,这样可以返回当前用户的 style 值 ,然后把这个值传递给 writeCSS 方法， ,在 writeCSS 方法体内有一 switch 结构，根据 s 值会选择不同的 CSS 代码，并通过 Response.Write 方法写到网页上去。改变当前页的风格。 2.3 增加多种风格 我们的系统在构建之初就充分考虑了扩展性的问题，并在代码层良好的实现了代码结构的优化，以及提供了功能扩展的方便性。 假设 现在需要添加第三种风格，则将其编号设为 3 ， 在前述的 switch结构中添加第三个 CASE 3：并将第三种风格的 CSS代码用 Response.Write方法写入。 然后再修改 setStyle.aspx 网页，添加第三种风格的缩略图。 只需上述步骤，即可完成添加风格的要求。
