网页界面设计与前端架构课件

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