软件项目培训及课程设计指导——如何合理设计软件应用系统的Web表示层
1、用户界面是软件应用系统的门面，在设计、开发和实现过程中必须高度重视。
软件应用系统表示层的各组件是软件应用系统的前端接口组件。 他们直接与使用软件应用系统的最终操作人员进行各种人机交互。 如果一个软件应用系统在用户界面上缺乏引人注目的特点——例如操作界面不友好、操作不周到、应用不方便等，那么即使该软件应用系统的性能非常优秀或不方便，用户体验也会很差。软件应用系统整体的系统架构设计也比较合理，系统中涉及的业务功能逻辑的实现也满足了客户的应用需求，但仍然很难赢得用户的青睐。 下图是某Web应用系统的数据查询显示结果页面的部分截图。
2、熟悉并应用Web表示层功能实现相关的核心技术
(1)XHTML+CSS+JS技术
XHTML本身并不是一种新的标记语言，它实际上是HTML的更“标准化”版本。 XHTML标记语言可以这样理解：“XHTML=HTML+XML”，即符合“XML语法”要求的HTML页面。
W3C组织发布XHTML技术规范的主要目的是希望Web应用系统的开发者能够设计和实现更加“严谨”和“标准化”的HTML页面，即要求Web页面设计者遵循XML（eXtensible Markup语言，网页设计基于扩展标记语言的“语法规范”，避免Web浏览器在显示页面信息时造成“歧义”错误，保证在不同Web浏览器中显示一致的效果。
(2)CSS是Cascading Style Sheet的缩写
CSS被翻译为“层叠样式表”。 它是一种用于增强和控制网页样式的标记语言，并允许样式信息和网页内容分离。 Web应用系统的开发者可以利用CSS规则定义来统一规范网页的“整体格式”，而不必为网页上的每个HTML标签单元单独设置属性和定义性能。
CSS可以改善传统HTML标签显示样式设置的缺点，因为传统HTML标签的“显示样式”设置是直接在HTML标签中通过标签内的属性设置来实现的。 应用CSS来定义网页的“表达式”，不仅可以弥补HTML标签属性定义的不足，而且可以达到分离“内容”（数据）和“表达式”（显示样式）的目的互相改进网页并改进网页。 页面可维护性。
(3)JS是JavaScript脚本语言的缩写
Web应用系统的开发人员使用JavaScript脚本语言编程来实现Web应用系统中的各种行为——行为是网页中各种内容的交互和操作。 “XHTML+CSS+JS”技术的应用可以将网页中的“内容”、“表达”和“行为”相互分离，从而更容易维护网页中的“内容”和“表达”。网页。 扩展的可扩展性和可维护性，“行为”功能得以实现。
(4)J2EE Web核心技术——JSP和Servlet组件技术
J2EE Web组件中的JSP（Java Server Pages，Java服务器端页面开发技术）组件技术由Sun公司（现Oracle公司）倡导，多家公司参与，最终由Sun公司发布了用于动态Java技术平台的标准网站开发技术（目前为JSP2.4版本）。
JSP 是建立在Java Servlet 技术之上的。 因此，JSP实际上是一种Web服务器端的动态网站实现技术。 JSP页面由标准的HTML标签、CSS样式表文件、JavaScript脚本、JSP服务器标签以及嵌入其中的Java程序脚本代码组成，并使用*.jsp作为JSP页面文件的扩展名。 下图是*.jsp网页的代码示例的部分截图。
J2EE Web组件中的Servlet组件技术是由Java Servlet应用程序编程接口和相关的类和方法组成的Java程序。 它运行在服务器端Servlet容器（如Tomcat服务器环境）中，遵循Sun发布的Servlet组件技术。 规格。 Servlet组件技术详细规定和定义了容器的基本功能以及Servlet的程序结构和编程实现接口。 下图是Servlet程序代码示例的部分截图。
(5)Web2.0中的RIA和AJAX技术
富互联网应用RIA技术利用了B/S（Browser/Server，浏览器/Web服务器）结构和C/S（Client/Server，客户端/服务器）模型的优点。 这是一个非常好的系统结构模型。 ，因为它结合了胖客户端应用程序的优点和瘦客户端应用程序的部署和可管理性优点。 当然，富互联网应用中的“丰富”概念主要包括两个方面：数据模型的丰富和用户界面的丰富。
富互联网应用的主要特点是：丰富的表达能力和强大的客户端处理能力，不仅可以最大限度地利用本地系统资源，而且可以在不刷新的情况下更新Web客户端屏幕内容。 蓝梦客户关系信息管理系统（CRM系统）应用JavaScript+AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML）技术来实现RIA的效果——JavaScript用于客户端界面的显示和数据处理，而AJAX技术 用于客户端和服务器之间的信息传输。
因为JavaScript在客户端的表现力是毋庸置疑的，使用JavaScript脚本语言程序几乎可以实现Windows应用程序界面效果。 AJAX技术已被用来实现“无刷新”网页。 它配合JavaScript脚本完成Web服务器和Web客户端数据的传输。
3. Web应用系统用户界面设计的基本原则——使其尽可能操作简单、用户友好
软件应用系统的设计者和开发者必须重视系统表现层内相关组件的设计和编程实现，它不仅包括程序组件的结构和组件类之间的关系，而且还努力提高系统的用户体验。软件应用系统。 它还包括Web应用系统的用户体验设计。 设计和实现功能时除了遵循以下基本原则：以用户为中心、视觉美观、主题明确、内容和形式统一等之外，还需要遵循以下原则。
（一）坚持简单、清晰、简单、新鲜的原则
俗话说“Simplicity is beauty（简单就是美）”，这短短的一句话道出了美的本质。 软件应用系统的设计者（尤其是前端美工等界面设计者）寻找和发现美，却常常忘记美其实很简单——这体现在软件应用系统的用户界面的设计上，用户的操作所需的、交互的信息应以最直接、生动、易懂的方式呈现给用户。
下图为示例项目银行账户信息管理系统中开户操作的功能页面内容设计效果的部分截图。
(2)遵守操作灵活、易用的设计原则
第一个原则是符合用户应用习惯，方便用户使用； 另外，为了便于用户尽快熟悉软件应用系统，应简化软件应用系统中核心功能的操作流程，并提供操作向导形式的操作界面。越多越好 ; 同时，它会协助提供实时帮助提示信息（以文字、图片、声音等形式），进一步提示完成某项功能操作时的各种要求。
在示例项目银行账户信息管理系统中，大量使用Ajax（异步JavaScript和XML）技术来提供实时、有针对性的帮助提示信息（以文本、图片、声音等形式），如图所示下图为用户登录功能页面中用户名动态提示的图形效果。
由于软件应用系统的使用者（通常也称为用户）不一定都是计算机技术人员或相关专业人员，因此无需提供相关的帮助提示信息。 软件应用系统在运行过程中，本身应根据功能操作的实现过程，分时、分步地提供在线帮助功能，甚至为用户提供使用指南。 这无疑会给用户带来极大的方便和简单。 性别。
4、每个网页文件的容量应尽可能小，以实现快速浏览和显示。
在设计软件应用系统的Web页面时，系统前端设计人员和开发人员首先应该尽可能地减少每个Web页面的文件长度，以减少Web页面的负载——这需要设计人员和开发人员尽可能地进行优化尽可能的网页中的HTML（HyperText Markup Language，超文本标记语言）标签代码，其中包括发布网页时去除HTML文档中的注释信息和多余的换行符标签，标识和描述信息的标签。
其次，在保证图像精度的应用需求下，应尽可能减少网页中每个图像文件的大小和数量web软件建网站，以加快网页的加载速度。
另外，为了使网页更加美观，很多网页设计者通常会在网页中嵌入Flash动画或Gif动态图片文件来辅助提供动态信息。 然而，如果Flash动画在网页中被滥用，后果将十分严重。 影响网页的响应速度。
5、保证网页的浏览效果兼容各种主流浏览器软件
基于B/S（Browser/Server，浏览器/服务器模式）架构的软件应用系统的网页需要适应和满足来自世界各地或某一地区访问者的浏览要求，而这些访问者可能会使用不同的浏览器。制造商提供的浏览器软件。 目前，不同厂商的浏览器系统对W3C组织发布的HTML标准的支持不同。 从而导致软件应用系统中的同一个网页在不同的浏览器系统环境下最终会呈现出不同的浏览和显示效果。 影响。
因此，系统前端设计者和开发者也需要针对不同的网页浏览器进行兼容性测试并提供相应的解决方案——例如Internet Explorer、Firefox、Chrome、Opera等浏览器。
为此，在设计网页时应采用“CSS+DIV”技术。 因为采用“CSS+DIV”技术实现的网页不仅符合W3C组织颁布的HTML标准web软件建网站，而且非常美观。 下图为示例项目银行账户信息管理系统在微软IE浏览器中的浏览效果的部分截图。