PDF《aesthNETics》

aesthNETics 在过去的数十年里,技术的发展日新月异.

现在的最新技术可能在

6 个月后就完全过 时了.您刚刚开始了解一种新技术,它就被更新了,而且您必须完全重新学习.对于.NET 开发人员来说,情况更是如此.当.NET 刚刚引入时,它对以前的 Microsoft 编程语言做了 巨大的改进.只要看看这个事实就能说明一些问题:VB 和C语言程序员能理解彼此的代 码了.但是多到令人难以置信的新控件和其他小玩意能使很多人望而生畏.在大家都还没 有习惯.NET 1.0 之前,1.1 就发布了.当人们最终开始习惯 1.1 时,2.0 又发布了.当2.0 发布不久,新的 3.0 又发布了.有些程序员喜欢.NET 这样不断地改进功能.他们努力学习 所有的新功能和增强特性,以便他们的项目能跟得上技术的发展.他们还会研究这些新功 能将对他们的现有应用程序产生什么样的影响.另一方面,多数人关心这种架构的 内幕 部分.他们想知道新的.NET 2.0 GridView 是否真的比.NET 1.1 DataGrid 好得多(确实好得 多).他们能立即发现在代码中实现 Try…Catch…Finally 语句的好处. 但是这些程序员似乎经常会忘记,或者至少将其放在相对不太重要的位置的是――使 这些新的强大的.NET 页面看起来漂亮.他们忘记了 aesthNETics. 1.1 aesthNETics 的定义 简单地说,aesthNETics 能使.NET 页面看起来漂亮.这样解释可能有点太简单了. 使.NET 页面看起来漂亮 到底意味着什么?它仅意味着 美学上令人愉悦 吗?较短的 答案是:不是. 较长的答案是,要看您是否喜欢 Web 站点.对此大多数人会有一致的看法.虽然可能 难以提出当您访问 Web 站点时希望或预期的功能的权威列表, 但是大多数人应该都会期望 下面这些特点: 能够轻松地找到要找的内容. 访问的每个页面有一致的外观. 页面以直观且有逻辑性的方式布局. 如果使用了图形,图形不要过于突出或令人讨厌,同时也不要为了使用图形而使 用图形. 使用的颜色不伤眼睛,否则您马上就会想离开这个页面. 不用一边加载页面一边想 哇,这里要发生的事太多了. 第章1ASP.NET Web 界面设计三剑客:CSS、Themes 和Master Pages

2 页面加载的时间也不要太长,即使在较慢的连接上也是如此. 不会立即想 啊,以前我见过这种模板,它太普通了. 除了上述这些外,开发人员可能还会考虑如何为他们的客户提供最佳体验.例如,要 考虑到浏览器的兼容性.至少必须决定要支持哪些浏览器,此后为站点写的代码都要符合 这个标准.不过,在考虑浏览器的兼容性时应当记住,有很多上网的人或访问您的站点内 容的人使用的是基于文本的浏览器.您为这些人写好代码了吗? aesthNETics 结合了所有这些思想.这意味着您没有忘记站点的外观,意味着您不仅操 心站点的业务逻辑与数据,而且对于使界面看起来用户友好和给人带来愉悦的感觉给予了 同等的重视.这还意味着您记得使访问站点的客户能看到的内容与他们看不到的内容同样 出色. 优秀的 aesthNETics 程序员需要掌握的技能包括: 对Web 设计和布局基础知识的良好理解. 色彩图形的鉴赏能力(有时少实际上就是多). 层叠样式表的运用能力. 全面了解使所创建的页面具有一致性的 ASP.NET 工具. 站点导航 对站点进行直观的和一致的访问的组件. Master Page 用于结构化布局. 主题 用于使.NET 组件保持一致. 以本书作为指南,您将学会鉴赏自己开发的 Web 站点的设计元素.您将了解关于图形 的足够多的入门知识, 并在此基础上学会更多内容. 而且, 与.NET 程序员关系最密切的是, 您将学会可以帮助您在开发的站点中使用 aesthNETics 的.NET 2.0 新增功能. 不过, 请不要误解本书的范围. 本书不仅概述 Web 应用程序开发人员可用的特定.NET 工具, 还介绍了在.NET 程序之外也可以使用的有声Web 设计原理与工具. 包括对Worldwide Web Consortium(W3C)建立与维护的层叠样式表及其标准的讨论.本书还将概述色彩、图 像及其他通用的 Web 相关设计事项. 不过, 随着对本书学习的深入, 您将看到如何在 Visual Studio

2005 中综合运用这些基本原理,以及由.NET 2.0 Framework 提供的组件.严格来讲, 本书讨论的很多概念并不只是.NET 所特有的.不过,aesthNETics 的思想是主要在.NET 应 用程序中集中应用这些概念. 1.2 aesthNETics 之所以重要的原因 您可能会把 aesthNETics 看作典型 n 层应用程序的表示层.很多表示层是关于编程 的,.NET 当然也是这样,它不但给出了关于如何让 Web 站点更强大的大量细节,而且充 斥着最新最出色的技术.aesthNETics 不仅引入了 AJAX 以及 XML 串行化等主题,而且还 介绍了在您开发的 Web 应用程序中实现业务逻辑的现实世界示例.不过,大多数表示方案 最缺少的似乎是对表示层的应有关注.这种状态的风险在哪里呢?很简单,永远会存在看 上去真的很无趣但又真正强大的 Web 站点. 第1章aesthNETics

3 表示层重要吗?当然重要.它与经典的三层应用程序中的业务逻辑和数据访问层一样 重要吗?这个,要看您问谁了.一方面,您可能会遇到一名经验丰富的程序员,他阅读了 当前大部分期刊,参加过旨在跟上最新技术趋势的技术会议.他可能会说, 不,它并没有 那么重要. 但是如果问的是客户呢?当然,他们可能会对使用 SQL Server

2005 的新交叉 表功能所带来的访问等待时间减少 235ms 感到高兴.或者,他们可能为通过正则表达式验 证Social Security 字段的有效性然后在数据库中加密这一事实叫绝.但是,如果您告诉他 们所有这些功能,而他们看到的却是只包含几个文本框的空白页面,他们会说什么呢?这 通常被称为 光环效应 ,即借用最初的理解来判断一个条目的其他属性.对于 Web 设计 而言,这意味着潜在客户通常会根据他们在浏览器中初次加载时所看到的内容来评判整个 Web 站点.如果在开始讨论幕后价值之前失去了客户,则需要费很大的力气才能把他们重 新请回来. 为了说明这一点,假设有一个想要数据显示板应用程序的客户.他们有一些数据放在 电子表中,且希望先把数据转换为某种企业解决方案,然后实现一个每天都自动将数据送 到新的数据库的功能模块, 最后在公司内网上用一个可浏览的 Web 应用程序显示对数据的 分析.这是一个令人瞩目的项目,对负责交付这个新系统的小组意味着赞美与认可.结果, 两个小组为设计新系统项目和将它呈现给领导班子而展开竞争.第一组花了大量时间进行 数据转换,并创建了一个需要参数的自动更新系统.他们决定放弃花大量时间在项目界面 上,而只用一些 Microsoft Office 图形组件来显示数据.他们呈现给管理层的示例如图 1-1 所示. 图1-1 第二组也完成了初始数据转换,但是为了演示他们的提案,他们花时间拿出了一个既 漂亮又直观的布局,希望项目管理层会喜欢.他们决定用 Adobe Photoshop 来表现自定义 图形,并决定用 System.Drawing 命名空间创建自定义图形组件.他们密切关注站点的色彩 方案,并努力使一切融合在一起.这使得他们没有时间来处理自动数据加载.他们呈现的 示例如图 1-2 所示. ASP.NET Web 界面设计三剑客:CSS、Themes 和Master Pages

4 图1-2 您认为在实际情况下,这两个项目中的哪一个会赢得管理层的首肯? 不要误会.表示层不是 Web 项目中唯一重要的组件.在上面的示例中,如果指定第二 组来完成这个项目,项目开始以后不久,就会发现他们只能使站点看上去漂亮,而对于收 集和分析数据却没有真正的价值,管理层对此是不会高兴的.仅使站点看上去漂亮无疑是 不够的.不过本例主要是为了说明界面设计的重要性,提醒大家不要忽视它. 1.3 提高员工的期望 在如今快速发展的技术市场上,程序员被越来越频繁地要求成为编程方面的 多才多 艺者 .这只是意味着客户和管理层希望程序员能处理 Web 项目的各个方面,从需求收集 到应用程序开发,再到用户测试和文档化的协调.是的,甚至还有图形处理和设计.有多 少工作是您希望公司不要都让您来做的呢?程序员已经发现完全不可能说 我不管数据库, 那是 DBA 的事. 随着时间的推移, 您又会发现很难开口说 我不做图, 那是设计师的事. 即使这种情况还不是真的,也肯定有其他理由让您成为关于.NET 应用程序的更好的 Web 设计师. 理由之一是, 它可以使您从同行和同事中脱颖而出. 假设您在一个做大量.NET Web 应用程序的编程工作室工作,其中大部分程序员精通.NET.您的能力差不多处于中间 水平.您不是小组中最优秀的,当然也不是最差的.如何使自己与众不同呢?您当然可以 多花时间成为小组中的最佳.NET 开发人员.但是除此之外还能做什么呢? Phillip Van Hooser(Willie'

s Way:

6 Secrets for Wooing,Wowing,and Winning Customers and Their Loyalty 一书的作者,领导能力和客户服务方面的专家)提出了一个可以让您鹤立鸡群 的简单而直接的方式.您不必比别人出色太多,只要稍微多做一点即可.他解释道,哪怕 只比别人多做了一点点,人们都会注意到您而且会记住您. 第1章aesthNETics

5 那么,如何才能做得比小组中的同行好一点点呢?如果您精通 Web 设计与布局,如果 您会用 Adobe Photoshop 等图形处理软件创建自定义图形,您就可以脱颖而出了.如果您 创建了美学上给人深刻印象的应用程序,而其他人创建的应用程序乏味且缺乏灵气,那么 人们自然会记住您. 1.4 为Web 站点创建一致外观:aesthNETics 要点 本书将尝试概述部分基本工具,主要是在 Visual Studio

2005 中可用的基本工具,.NET 开发人员可用这些工具来使站点的外观与它们幕后的编码同样精彩.如果说存在严格意义 上的 Web 开发规则,那就是:使站点外观一致.打开一个站点,一个页面是这种样式,而 另一个页面又是完全不同的样式,将令人非常讨厌.这并不是说不同页面的布局不能有变 化,而是说 让用户感觉每个页面是统一的 应成为开发人员的目标.的确,有时候必须 拉长标题来适应大型的数据表.或者根据用户在站点中的位置,您会在页面的某些部分放 置一些边栏链接,以及链接其他页面的链接,以便适应一个有很多内容页面的大站点.但是,当用户导航时链接的位置向左或向右移动 5~10 个像素,或者一个页面用蓝底模式, 而另一个使用褐色阴影,将会使站点看起来比较邋遢. 当然,创建外观一致的站点的第一步是实实在在地确定您想要的外观.事实上,如果 外观(可以轻松地应用到所有页面的外观)只是一个空白........