网页界面设计与前端架构

演讲人：瑞达丁文隆时间：网站的整体设计明确问题网站制作流程网站设计者的定位明确问题为什么需要建立个网站？它需要和谁进行交互？它的访问者的兴趣所在？它的访问者将获得什么样的信息？它怎样才能最有效的实现交互？它是否需要建立大型交互式项目？它必须在何时建立？（网站开通时间）在预算内按时完成项目目标？你有那些资源可以帮助访问者？预算网站访问者花费多久才能获得必要的资源？如果在访问者离开一个站点数分钟后对他采访，你希望他会记住那些细节？访问这个网站的经历会对访问者的想法和行动产生什么样的影响？如何吸引那些在线或者离线的访问者迅速活动起来？网站是否合法？网站的制作流程策划网站网站布局规划色彩搭配收集资料链接设计界面设计域名和空间部署网站广告宣传维护与更新网站设计者的定位网页设计不仅涉及平面构成、色彩构成、CI等方面的知识，还涉及Java、JavaScript、ＨＴＭＬ、ＣＳＳ、数据库等知识。设计者的任务1.确定CI.通过视觉来统一企业形象。包括：网站标志、标准色彩、标准字体、宣传标语等。2.创建交互界面。3.功能实现。4.网页之间的有效链接。5.视觉美感。网页布局平面设计元素在网页布局中的应用点。线。面。空间平面设计原理在网页布局中的应用均衡性--设计要素的协调与一致对比性--设计要素的差异与分离色彩对比面积对比肌理对比点线面空间网页配色基本色彩原理颜色由色相、明度、饱和度3个要素组成。色相：不同的波长的颜色构成了不同的色相。明度：颜色的明暗程度。取决于颜色吸收光的程度，进光量越大，物体对光的反射率越高，明度则越高。反之则低。明度最高是白色，最低是黑色。饱和度：颜色的纯度，或是与中性灰的差别。凡具有色相的所有色彩都有一定的饱和度，无色彩没有色相，饱和度为0。RGB模式：根据显示器颜色混合原理。RGB就是红绿蓝相加混合产生的色彩。网页色彩谱网页安全色色彩的文化色彩的认知是很主观的，每个人对于色彩都有不同的定义域解释，但多数人对于色彩的认知将形成一种趋势，而所谓的多数人，便涉及到了主要浏览群体的文化认知。这中间就包含了政治、宗教、社会结构、历史等诸多因素。色彩的象征色彩的象征也可以说是色彩的联想，一般来说这种象征可以分为自然上的象征、文化上的象征及品牌的象征。色彩的心理感觉不同的色彩会给人不同的色彩感觉。而这种感觉也会因为地域、时间、环境等因素而改变。网页配色的特点色彩的鲜明性色彩的独特性色彩的功能性和习惯性色彩的有限性色彩的周期性前端代码设计基础知识：什么是W3CW3C（WorldWideWebConsortium，）创建于1994年，研究Web规范和指导方针，致力于推动Web发展，保证各种Web技术能很好地协同工作。大约500名会员组织加入这个团体，它的主任TimBerners-Lee（）在1989年发明了Web。W3C推行的主要规范有HTML，CSS，XML，XHTML和DOM（DocumentObjectModel）。多年以来，W3C把那些没有被部分会员公司（如Netscape和Microsoft）严格执行的规范定义为“推荐”（Recommendations）。自1998年开始，“Web标准组织”（）将W3C的“推荐”重新定义为“Web标准”，这是一种商业手法，目的是让制造商重视并重新定位规范，在新的浏览器和网络设备中完全地支持那些规范。其他的标准组织包括EuropeanComputerManufacturersAssociation（ECMA）将ECMAScript定义为“标准JavaScript”。WEB标准WebStandards)的历史在上个世纪90年代后期，当互联网和web逐渐成为主流时，Web浏览器(包括当时的Netscape4及以下版本，IE4及以下版本。行话叫Version4浏览器)的开发商还没有完全的支持CSS（层叠式样式表，对于Web开发人员来说，他们可以用CSS来控制Html文档的表现）。考虑到CSS1是在1996年制定的，而CSS2是在1998年才制定的，所以这种对CSS支持的不足也是可以理解的。由于浏览器对CSS的支持不够，再加上一些平面设计师的要求（这些要求与他们经常与印刷品打交道有关）导致他们为了控制网页的视觉表现而滥用HTML。一个典型的例子就是，当设计师可以用border=0来隐藏表格的边框时，用隐藏表格来控制布局的方法同样被使用。另一个例子是对“transparent”（透明）的使用，同样是不可见，他们却使用空白的GIF图片来控制布局。WEB标准WebStandards)的历史由于HTML从来就没被用来控制一个文档的表现，导致大量混乱代码、非法代码、浏览器的专用代码和属性就被随意的使用了。“校验”这个词也很少被人问津。对于这些代码来说，标签大杂烩（tagsoup）是一个很形象的名字。什么是WEB标准Web标准，近年来在国外已经得到了很大的重视。尤其是美国颁布了501号法案以后，皆要求站点必须为残障人士提供与普通人士相当的可访问性支持。要知道，传统的布局方法是很难达到这样的要求的。美国的多数技术性站点都开始向Web标准转型。许多大型站点也已经使用新方法重构。例如就在最近(2005年1月)，微软公司的msn站点使用XHTMLStrict+CSS完全重写。网站标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3CDOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（EuropeanComputerManufacturersAssociation）的ECMAScript标准。我们来简单了解一下这些标准：在WEB标准中构成网页的三个主要部分：结构、表现、行为结构标准语言XML是TheExtensibleMarkupLanguage(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考（）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。结构标准语言XHTML是TheExtensibleHyperTextMarkupLanguage可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。结构标准语言HTML5是用于取代1999年所制定的HTML4.01和XHTML1.0标准的HTML标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些HTML5技术。HTML5有两大特点：首先，强化了Web网页的表现性能。其次，追加了本地数据库等Web应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-basedrichinternetapplication，RIA)，如AdobeFlash、MicrosoftSilverlight，与OracleJavaFX的需求，并且提供更多能有效增强网络应用的标准集。表现标准语言级联样式表（CascadingStyleSheet）简称“CSS”，通常又称为“风格样式表（StyleSheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。行为标准DOM是DocumentObjectModel文档对象模型的缩写。根据W3CDOM规范（），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。ECMAScript是ECMA(EuropeanComputerManufacturersAssociation)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript262（）。按照WEB标准建设网站的目的向后兼容什么是向后兼容？我们认为是：采用正确的方法设计和建设，发布的任何文档可以正确显示在多种浏览器、平台、设备上，并且能继续在未来发明的新浏览器和设备中工作。开放的标准使之成为可能。关注浏览器符合WEB标准的网站可以：—在图形桌面浏览器上达到更精确的控制、定位和排版，允许用户使用适合他们的表达方式进行编辑。—可以开发工作在多浏览器和平台的复杂交互行为。—遵守可访问性原则和指南，而不需要牺牲美观、性能或者精巧性。—以前重新设计网站需要几天或者几星期，现在只需要几小时，从而减少成本和避免工作烦恼。—支持多种浏览器，从而不需要争论和考虑多版本的成本，很少或根本就不需要代码分支。—支持非传统的设备，从无线设备到孩子们想像到的、可以上网的智能手机，以及盲人阅读器、屏幕阅读器等残疾人士使用的设备，都不需要再争论开发特殊版本的费用。—为任何网页提交适合打印的版本，不需要建立通常的“专门打印页”或者依赖昂贵的私人出版系统来建立类似的版本。—通过把样式从结构、行为中分离，以及严格的文档结构，易于在高级发布流程中重新设计Web文档。—从老的Web语言HTML转换到更强大的以XML为基础的置标语言。—可以在当前符合标准的浏览器和平台上确保正确地工作，也可以在老浏览器中工作。—保证这样设计的站点将能继续工作在将来的浏览器和设备上，包括那些还没有发明和仍在想像中的设备，这是向后兼容的许诺。结构化HTML首先要学习什么是“结构(structural)”，一些作家也称之为“语义(semantic)。这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块：–标志和站点名称–主页面内容–站点导航(主菜单)–子菜单–搜索框–功能区(例如购物车、收银台)–页脚(版权和有关法律声明)我们通常采用DIV元素TIPS:可以把DIV理解为盒子或者容器来将这些结构定义出来：(“”“”)divid=head/divdivid=content/divdivid=globalnav/divdivid=subnav/divdivid=search/divdivid=s