BS架构的应用网站管理系统 ---网站风格设计-毕业论文

厦门大学软件学院 本科毕业论文(科研训练，毕业设计)题 目：B/S架构的应用网站管理系统-网站风格设计姓 名：学 院：软件学院系：专 业：软件工程年 级：学 号：指导教师（校内）： 职称： 年 月 日B/S架构应用网站管理系统摘要 在对若干网站管理系统的调查研究的基础上，得出网站管理系统风格设计的几个原则，包括统一、标志、关联引导、重复、构图、多样化原则，并以我们的B/S架构应用网站管理系统风格设计的实践验证了这些原则。本文分五章介绍B/S架构应用网站管理系统风格界面的设计和实现过程。本文分三章介绍B/S架构应用网站管理系统的风格设计和实现细节。第一章：“开发平台、技术介绍、工具”，详细介绍该系统的开发平台和所使用的技术与工具。第二章：“网站风格实现过程”，分类说明网站风格的设计思想，并介绍个性化网站风格的实现原理。第三章：“系统风格界面的设计及实现”，介绍个性化界面的开发流程、设计细节和实现结果。关键字 网站 风格 设计 B/S Structure management system for websiteAbstract In managing to some websites 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 fulfillment 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 design 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 website 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.KeywordsWebsite, Style, Design 目 录摘要- 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 -第二章 网站风格实现过程- 9 -21网站风格设计- 9 -2.2 自定义风格的实现过程- 9 -2.3 增加多种风格- 10 -第三章 系统风格界面的设计及实现- 11 -3.1 形成网站风格所依赖的设计原则- 11 -3.2在网站风格设计中的原则运用- 12 -结论- 14 -致谢语- 14 -引言应用网站管理系统，B/S Structure management system for website 。我们的系统是采用B/S模式构建的，目的是给用户提供尽可能多的功能模块，使得用户可以根据自己的实际需要从中进行选择，从而方便的建立起自己的网站。同时，具有管理权限的用户还可以设定低权限用户，从而屏蔽管理员功能，使网站可供大众使用。我们的系统主要面向中、小型企事业单位和个人，这类用户群体的特点是本身没有足够的预算购买软件公司为其定制的产品，且他们的所需应用相对简单化、模式化，在这方面无需投入太大预算。而我们的系统将将为他们提供一个简单、人性化的平台，通过我们的平台，用户可以定制出适合他们的系统，且所需成本较为低廉。之所以选择.net平台进行开发，主要是因为这个平台在开发中、小型应用方面具有成本优势，容易上手，其提供的控件类型较丰富，且支持web service 技术。第一章 开发平台、技术、工具介绍1.1 ASP.NETASP.net 是一种建立在通用语言上的程序构架，能被用于一台Web服务器来建立强大的Web应用程序。ASP.net提供许多比现在的Web开发模式强大的的优势。1.执行效率的大幅提高ASP.net是把基于通用语言的程序在服务器上运行。不像以前的ASP即时解释程序，而是将程序在服务器端首次运行时进行编译，这样的执行效果，当然比一条一条的解释强很多。2. 世界级的工具支持ASP.net构架是可以用Microsoft（R）公司最新的产品 Visual S开发环境进行开发，WYSIWYG（What You See Is What You Get所见即为所得）的编辑。这些仅是ASP.net强大化软件支持的一小部分。 3. 强大性和适应性因为ASP.net是基于通用语言的编译运行的程序，所以它的强大性和适应性，可以使它运行在Web应用软件开发者的几乎全部的平台上。通用语言的基本库，消息机制，数据接口的处理都能无缝的整合到ASP.net的Web应用中。ASP.net同时也是language-independent语言独立化的，所以，你可以选择一种最适合你的语言来编写你的程序，或者把你的程序用很多种语言来写，现在已经支持的有C#（C+和Java的结合体），VB，Jscript。将来，这样的多种程序语言协同工作的能力保护您现在的基于COM+开发的程序，能够完整的移植向ASP.net。 4. 简单性和易学性 ASP.net是运行一些很平常的任务如表单的提交客户端的身份验证、分布系统和网站配置变得非常简单。例如ASP.net页面构架允许你建立你自己的用户分界面，使其不同于常见的VB-Like界面。另外，通用语言简化开发使把代码结合成软件简单的就像装配电脑。 5. 高效可管理性 ASP.net使用一种字符基础的，分级的配置系统，使你服务器环境和应用程序的设置更加简单。因为配置信息都保存在简单文本中，新的设置有可能都不需要启动本地的管理员工具就可以实现。这种被称为Zero Local Administration的哲学观念使A的基于应用的开发更加具体，和快捷。一个ASP.net的应用程序在一台服务器系统的安装只需要简单的拷贝一些必须得文件，不需要系统的重新启动，一切就是这么简单。 6. 多处理器环境的可靠性 ASP.net已经被刻意设计成为一种可以用于多处理器的开发工具，它在多处理器的环境下用特殊的无缝连接技术，将很大的提高运行速度。即使你现在的ASP.net应用软件是为一个处理器开发的，将来多处理器运行时不需要任何改变都能提高他们的效能，但现在的ASP确做不到这一点。 7. 自定义性，和可扩展性 ASP.net设计时考虑了让网站开发人员可以在自己的代码中自己定义plug-in的模块。这与原来的包含关系不同，ASP.net可以加入自己定义的如何组件。 8. 安全性 基于Windows认证技术和每应用程序配置，你可以确性你的原程序时绝对安全的。 1.2 Visual Studio.NET 2003Visual Studio .NET 2003，是 Microsoft 的第二代开发工具，用于构建和部署功能强大而安全的连接 Microsoft .NET 的软件。它增强并进一步完善了其前代产品的功能，并与前代产品高度兼容。Visual Studio .NET 2003 包括来自 Modeler 的全套功能，可帮助构建最复杂的企业级应用程序和在最小的设备上部署应用程序。通过全世界各种规模的公司的使用，Visual Studio .NET 和 Microsoft Windows Windows NET Framework 提供了一个强大而完善的端到端工具，用以设计、开发、调试和部署用于 Microsoft Windows 和 Web 的安全的应用程序这些应用程序强健而且易于使用。Visual Studio .NET 2003 包含 Windows .NET Framework 的一个增强版本。Windows .NET Framework 1.1 版在前一版本的基础上增添了新的能力、功能增强和文档改进。开发人员能够使用同样的编程模型、开发工具及编程技能，来构建应用范围广泛-从小设备到最大的数据中心-的应用程序。开发人员可以使用 Visual Studio .NET 来： 构建功能强大而且响应能力极好的基于 Windows 的应用程序。 构建功能强大而且响应能力极好的 Pocket PC 应用程序。 构建完善而安全的 Web 应用程序。 构建对设备有智能感知能力的完善而安全的移动 Web 应用程序。 在以上任何一种应用程序中使用 XML Web services。 避免“DLL 灾难”。 消除代价高昂的应用程序部署和维护问题。Visual Studio .NET 是唯一的从头至尾都是基于通过 XML Web service 进行集成这一思想而构建的环境。通过允许应用程序通过 Internet 共享数据，XML Web services 使开发人员能够利用新的和现有的代码构建应用程序，而不用考虑平台、编程语言或对象模型。 1.3 Dreamweaver Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。其特点有以下几方面：1. 制作效率高Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择萤幕上的颜色可设定最接近的网页安全色。对於选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dremweaver能与您喜爱的设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dremweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。2.网站管理方便使用网站地图可以快速制作网站雏形，设计，更新和重组网页。改变网页位置或档案名称，Dreamweaver会自动更新所有连结。使用支援文字，HTML码，HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。3.控制能力强Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。4.所供即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所供即所得的功能，让您不需要透过浏览器就能预览网页。 梦幻样版和XMLDreamweaver将内容与设计分开，应用於快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地汇入或输出XML内容。5.全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于cascading style sheets的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从Dreamweaver的网站在下载它的描述档，便可得知详尽的成效报告。1.4 PhotoshopPhotoshop是美国Adobe公司开发的图形图像处理软件。它的出现，不仅使人们告别了对图片进行修正的传统手工方式，而且还可以通过自己的创意，制作出现实世界里无法拍摄到的图像。无论是对于设计师还是摄像师来说，Photoshop提供的几乎是无限的创作空间，为图像处理开辟了一个极富弹性且易于控制的世界。而对于普通用户来说，Photoshop同样提供了一个前所从未有的自我表现舞台。用户可以尽情发挥想像力、充分显示自己的艺术才能，创造出令人赞叹的图像作品。目前已经有越来越多的艺术家、广告设计者、专业设计师视它为自己的得力助手，用它创造出许多出神入化的作品。第二章 网站风格实现过程 21网站风格设计表1 功能性需求分类描述表功能类别功能名称、标识符描述网站风格风格展示可选风格的缩略图显示风格选择用户可选定所需风格211风格展示表2 风格选择需求描述表名称、标识符StyteShow功能描述浏览所提供的几种网站风格优先级输入用户点击“风格浏览”操作序列输出网站风格以缩略图形式显示出来补充说明212风格选择表3 用户资格认证需求描述表名称、标识符SetStyte功能描述用户设定其自定义网站所需风格优先级输入用户勾选风格缩略图下的单选框，并按确定键操作序列输出成功则显示风格设定成功信息，失败会抛出原因信息补充说明2.2 自定义风格的实现过程在数据库中的TB_user 表中有一列名style，我把已定义好的风格用整型数表示。目前系统提供两种风格分别用1和2表示，默认值为1。以下为风格1的css代码Response.Write( BODY); 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(SCROLLBAR-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; BORDER-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.Write(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( POSITION: relative; TOP: 2px ); 在允许使用用户自定义的风格页面中，我加入了writeCSS（int s）方法,并调用web 服务中的 的 getStytle()方法，把(string)SessionLoginUser参数传递给它,这样可以返回当前用户的style值,然后把这个值传递给writeCSS方法，,在writeCSS方法体内有一switch结构，根据s值会选择不同的CSS代码，并通过Response.Write方法写到网页上去。改变当前页的风格。2.3 增加多种风格我们的系统在构建之初就充分考虑了扩展性的问题，并在代码层良好的实现了代码结构的优化，以及提供了功能扩展的方便性。假设现在需要添加第三种风格，则将其编号设为3 ，在前述的switch结构中添加第三个CASE 3：并将第三种风格的CSS代码用Response.Write方法写入。然后再修改setStyle.aspx网页，添加第三种风格的缩略图。只需上述步骤，即可完成添加风格的要求。第三章 系统风格界面的设计及实现一个网站作为一个作品，同样具有自己的风格。而网站风格又对这个网站乃至网站业主的整体形象、传播效果等都产生重要影响。例如，网易（/）给人的城市邻里感觉，平易近人；而迪斯尼（/park/homepage/today/flash/index.html/）明显是一个游乐园，生动活泼，有趣可爱，还有冒险刺激；IBM（/us/）则传递了专业和行业权威的信息；首都之窗（/chinese_new/index.asp）表现的是政府的、城市服务的印象。这些都是网站给浏览的人们留下的不同感受，实际上也就是这些网站风格所产生的效果。3.1 形成网站风格所依赖的设计原则风格是抽象的，是网站的整体形象给浏览者的综合感受。构成网站整体形象的要素很多，包括网站的CI（标题，标志，色彩，字体，标语）、版面布局、页面构成、链接方式、浏览方式、交互性、文字、语气、内容价值、存在意义、网站荣誉等等诸多因素。3.1.1统一原则统一性是构建网站风格的首要原则。对于一大堆东西来说，要想给别人它们是同一个事物的印象，每个东西都必须具有一些相同的部分，以把每个东西串起来。为达到这个目的，就需要使每个网页都具有统一的设计。否则网站风格无从谈起。其次，网站风格指的是整个网站的风格，并非某页风格。只能通过每个页面共同反映、传递同样的东西，才能建构出整体风格。统一原则在网站风格设计网站中占重要地位，要保证网站风格设计的成功，就需要保证网站结构的众多元素的一致，如网站的版面布局的一致、标志性元素的一致、导航的一致等等。3.1.2 标志原则标志性是显示网站风格的重心。一个网站有什么风格，需要通过这个网站的标志性的东西来实现。到国外著名的网站浏览，你会发现这些网站对标志性设计的关注。例如，网站或业主的名称、logo、图案等等，甚至是版面中的某个区域的特定设计。例如IBM（/us/）的专业和行业权威的风格就是通过它的logo，它的深蓝色调，它的布局、文字的条理规范等方面的标志性来实现的。3.1.3 关联引导原则谈到网站关联引导，许多人可能都认为主要是网站的网站结构、特别是如栏目的设置、导航条、“Site Map”之类的事情。但实际上它也是一个风格问题，涉及这个网站是否人性化，具有亲和力，是否具备条理性等等。可以通过非常规的方法，如颜色系列、图案图片等，把网站导航做的很亲切、很个性化、很有美感，从而传递出独特的风格。3.1.4 重复原则对于浏览者来说，仅通过一个、两个页面的浏览，不能得到网站风格的印象。只有反复接收同样的信息，才能形成网站风格的概念。所以，需要保证网站风格的信息重复出现，不断加深浏览者对网站风格的认知。3.1.5 构图原则构图，是指从平面设计的角度来看网站的信息发布，把文字、图形图像、音频视频等，都作为构图元素，而不仅仅是文字、图形图像、音频视频等。通过把这些构图元素整合，从而描绘出一幅网页“画”来。3.1.6 多样化的原则多样化是指网站风格存在多种设定，但是每一种风格都满足以上的原则：统一原则；标志原则；关联引导原则；重复原则；构图原则。多样化的网站可以让用户有更多的选择，更能满足不同用户的需求。3.2在网站风格设计中的原则运用按照“统一”、“标志”、“关联引导”、“重复” 、“构图”和“多样化”几个基本原则，对网站的版式、标题、标志、色彩、字体、主体图形、链接方式、浏览方式等进行设计：3.2. 1 标志logo：logo分左右下三部分，左边是我们小组的标志，标志的旁边是我们小组的名称，右边是我们设计的系统的名称，如图1所示：图1 网站LOGO3.2. 2 统一版式网站所有页（主页除外）的统一版式设计为：左边为个性化主页面功能面板，上方为网站LOGO，内容区有相应的各个模块的操作，如图2所示：图2 网站次页面风格3.2.3 构图参考国内外数