网页界面设计与前端架构.ppt

1、网页界面和前端代码设计，主讲人：丁时间：2020/7/11，1，网站的整体设计，定义网站设计师的位置，2020/7/11，2，定义问题，为什么需要建网站？它需要与谁互动？游客的兴趣是什么？它的访问者会得到什么样的信息？它如何最有效地实现交互？它需要建立一个大型的互动项目吗？它必须在什么时候建立？(网站开通时间)在预算内按时完成项目目标？你有什么资源来帮助游客？预算网站访问者获得必要的资源需要多长时间？如果你在访问者离开网站几分钟后采访他，你希望他会记得这些细节吗？访问这个网站的经历会对访问者的思想和行为产生什么影响？如何吸引线上或线下访客快速移动？这个网站合法吗？2020/7/11，3，网站制

2、作流程，网站布局规划，色彩匹配，数据收集，链接设计，界面设计，域名和空间部署，网站广告，维护和更新，2020/7/11，4，网站设计师的定位，网页设计不仅涉及平面构成，色彩构成，CI等知识，还涉及Java，JavaScript，数据库等知识设计师的任务1。确定配置项。通过愿景统一企业形象。包括：网站标识、标准颜色、标准字体、宣传口号等。2.创建一个交互式界面。3.功能实现。4.网页之间的有效链接。5.视觉美。2020/7/11，5，2020/7/11，6，2020/7/11，7，2020/7/11，8，2020/7/11，9，2020/7/11，10，2020/7/11，11，2020/7/1

3、1，12，2020/7/11，13，2020/7/11，14，排队。面条。网页布局中空间图形设计原则的平衡应用-设计元素的协调和一致对比-设计元素的差异和分离颜色的对比，区域和纹理的对比，2020/7/11，18，2020/7/11，19，2020/7/11，20，2020/。23，2020/7/11，24，Mian，2020/7/11，25，2020/7/11，26，2020/7/11，27，Space，2020/7/11，227。色调：不同波长的颜色构成不同的色调。亮度：颜色的亮度或暗度。根据颜色对光的吸收程度，进入的光量越大，物体的反射率和亮度越高。否则，它是低的。最高亮度是白色，最低亮

4、度是黑色。饱和度：颜色的纯度，或与中性灰色的差异。所有色调的颜色都有一定的饱和度。没有颜色没有色调，饱和度是0。RGB模式：根据显示器的混色原理。RGB是通过添加和混合红色、绿色和蓝色产生的颜色。2020/7/11，31，网页颜色光谱，网页安全颜色，2020/7/11，32，颜色文化，颜色认知是非常主观的，每个人对颜色有不同的定义，但是大多数人对颜色的认知会形成一种趋势，而所谓的大多数人涉及到主要浏览群体的文化认知。有很多因素，包括政治、宗教、社会结构、历史等等。2020/7/11，33，颜色的象征，颜色的象征也可以说是颜色的联想。一般来说，这个符号可以分为自然符号、文化符号和品牌符号。202

5、0/7/11，34，心理感受色彩，不同的色彩会给人不同的色彩感受。这种感觉也会因为地域、时间和环境等因素而改变。2020/7/11，35，2020/7/11，36，网页颜色匹配的特点，颜色的独特性，颜色的功能性和习惯性颜色的有限性，颜色的周期性，2020/7/11，37，2020/7/11，38，38，2020/7/11，42，2020/7/11，43，前端代码设计，基本知识：什么是W3C W3C大约有500个成员组织加入了这个组织，其负责人蒂姆伯纳斯李(/People/Berners-Lee/)于1989年发明了网络。W3C推广的主要规范是超文本标记语言、CS

6、S、可扩展标记语言、超文本标记语言和文档对象模型。多年来，W3C将一些成员公司(如网景和微软)没有严格执行的规范定义为“推荐”。自1998年以来，“网络标准组织”()将W3C的“推荐”重新定义为“网络标准”，这是一种商业方法，旨在使制造商关注和重新定位规范，并在新的浏览器和网络设备中充分支持这些规范。其他标准组织，包括欧洲计算机制造商协会(ECMA)，将ECMAScript定义为“标准JavaScript”。2020/7/11，2020/44，网络标准)。在20世纪90年代末，当互联网和网络逐渐成为主流时，网络浏览器(包括网景4及以下，当时的IE 4及以

7、下)出现了。版本4浏览器的开发人员还没有完全支持CSS(级联样式表，对于网络开发人员来说，他们可以使用CSS来控制Html文档的呈现)。考虑到综援1是在1996年制订的，而综援2是在1998年制订的，所以对综援缺乏支持是可以理解的。由于浏览器不够支持CSS，以及一些图形设计者的要求(这与他们经常处理印刷品有关)，他们滥用超文本标记语言来控制网页的视觉表达。一个典型的例子是，当设计者可以隐藏边框=0的表格的边框时，也可以使用通过隐藏表格来控制布局的方法。另一个例子是使用“透明”，这也是不可见的，但他们使用空白的GIF图片来控制布局。2020/7/11，2020/45，网络标准)，因为超文本标记语

8、言从来没有被用来控制文档的呈现，大量令人困惑的代码、非法代码、浏览器特定的代码和属性被随意使用。“验证”一词很少使用。对于这些代码，标签汤是一个非常生动的名字。2020/7/11，46，什么是网络标准，近年来网络标准在国外受到了极大的关注。特别是在美国颁布501法案之后，要求该网站必须为残疾人提供与普通人同等的无障碍支持。我们应该知道，传统的布局方法很难满足这样的要求。美国的大多数技术网站开始向网络标准转变。许多大型遗址也用新方法进行了重建。例如，就在最近(2005年1月)，微软的msn网站被完全重写为使用XHTML的严格CSS。网站标准不是单一的标准，而是一系列标准的集合。网页主要由三个部分

9、组成：结构、呈现和行为。相应的标准也分为三个方面：结构化标准语言主要包括XHTML和XML，表达性标准语言主要包括CSS，行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分是由W3C起草和发布的，还有一些是由其他标准组织开发的，比如ECMA(欧洲计算机制造商协会)的ECMAScript标准。让我们简单地看一下这些标准：2020/7/11，47，它们构成了网页的三个主要部分：结构、表达和行为；2020/7/11，48，结构标准语言，而XML是可扩展标记语言的缩写。目前，建议遵循W3C于2000年10月6日发布的XML1.0，参见(www . w3 . org/T

10、R/2000/REC-XML-20001006)。像超文本标记语言一样，可扩展标记语言来自超文本标记语言，但可扩展标记语言是一种可以定义其他语言的语言。XML最初是为了弥补超文本标记语言的不足，满足网络信息发布的需求而设计的，具有很强的扩展性，后来逐渐被用于网络数据的转换和描述。在这里，我不会过多地谈论XML的好处和技术规范。网上有很多资料和书籍可供参考。2020/7/11，49，结构标准语言，XHTML是可扩展超文本标记语言可扩展标记语言的缩写。目前，建议遵循W3C于2000年1月26日推荐的XML1.0(参见http :/www . w3 . org/tr/xHTMl 1)。虽然XML具有

11、强大的数据转换能力，可以完全取代超文本标记语言，但面对成千上万的现有网站，直接采用XML还为时过早。因此，在HTML4.0的基础上，我们用XML规则对其进行了扩展，得到了XHTML。简而言之，建立XHTML的目的是实现从超文本标记语言到可扩展标记语言的转换。2020/7/11，2020/50，结构标准语言，HTML5是HTML的标准版本，用来取代1999年制定的HTML 4.01和XHTML 1.0标准，目前仍处于开发阶段，但大多数浏览器已经支持一些HTML5技术。HTML 5有两个特点：首先，它提高了网页的性能。其次，增加了本地数据库等网络应用的功能。从广义上讲，HTML5实际上指的是一组技

12、术组合，包括HTML、CSS和JavaScript。它希望减少浏览器对基于插件的丰富互联网应用程序(RIA)的需求，如Adobe闪存、微软Silverlight和甲骨文JavaFX，并提供更多能有效增强网络应用程序的标准集。2020/7/11，51，代表标准语言，层叠样式表简称为“样式表”，用于设计网页的样式。例如，如果您希望链接的单词在未被单击时是蓝色的，当鼠标向上移动时，该单词会变成红色并带有下划线，这是一种样式。通过设置样式表，您可以统一控制HTML中每个标志的显示属性。级联样式表可以让人们更有效地控制网页的外观。通过使用级联样式表，您可以扩展精确指定网页元素的位置和外观以及创建特殊效果

13、的能力。2020/7/11，52，行为标准，DOM是文档对象模型的缩写。根据W3C DOM规范(/DOM/)，DOM是一个具有浏览器、平台和语言的接口，它使您能够访问页面的其他标准组件。简单来说，DOM解决了Netscaped中的Javascript和微软中的Jscript之间的冲突，并为网站设计者和开发人员提供了一种访问网站中的数据、脚本和表示层对象的标准方法。ECMAScript是由ECMA(欧洲计算机制造商协会)开发的标准脚本语言。目前，建议遵循ECMAScript 262 (http:/www.ecma.ch/ecma1/STAND/ECMA-262。H

14、TM)。2020/7/11，53，根据网络标准建立网站的目的，向后兼容性什么是向后兼容性？我们相信，通过采用正确的设计和构造方法，任何已发布的文档都可以在各种浏览器、平台和设备上正确显示，并且可以在未来发明的新浏览器和设备中继续工作。开放的标准使它成为可能。2020/7/11，54，聚焦浏览器，2020/7/11，55。符合网络标准的网站可以在图形桌面浏览器上实现更精确的控制、定位和排版，允许用户用适合他们的表达方式进行编辑。它可以在多种浏览器和平台上开发复杂的交互行为。遵守无障碍原则和指南，不牺牲美观、性能或复杂性。过去重新设计网站需要几天或几周的时间，但现在只需要几个小时，从而降低了成本，

15、避免了工作麻烦。支持多种浏览器，因此没有必要争论和考虑多种版本的成本，也很少或没有必要进行代码分支。支持非传统设备，从无线设备到儿童可以想象并接入互联网的智能手机，以及盲人阅读器和屏幕阅读器等残疾人使用的设备，因此没有必要争论开发特殊版本的成本。要提交适合任何网页打印的版本，不需要构建通常的“特殊打印页面”，也不需要依赖昂贵的私人出版系统来构建类似的版本。通过将风格与结构和行为以及严格的文档结构分开，可以在高级发布过程中轻松地重新设计网络文档。从旧的网络语言超文本标记语言到更强大的基于可扩展标记语言。您可以在当前符合标准的浏览器和平台上正常工作，也可以在旧浏览器中工作。这是一个向后兼容的承诺，以确保以这种方式设计的网站将继续在未来的浏览器和设备上工作，包括那些还没有被发明出来并且还在想象中的设备。2020/7/11，56，“结构化的超文本标记语言”，首先，我们应该学习什么是“结构化的”，一些作者也称之为“语义”。这个术语意味着您需要分析您的内容块和每个内容服务的目的，然后根据这些内容目的构建相应的超文本标记语言结构。如果你坐下来仔细分析和规划你的页面结构，你可能会得到这样几个部分：标志和网站名称，主页，内容，网站导航(主菜单)，子菜单，搜索框，功能区(如购物车，收银台)，页脚(版权和