网页之前端与后台的对话.doc

网页之前端与后台的“对话” 目 录 网页之前端与后台的“对话” 1 一、主题 2 二、对象 2 三、内容 2 引子 2 工作流程 3 关于web标准 4 工作中存在的问题 7 如何更好的配合工作？ 9 一、主题 网页之前端与后台的“对话”——关于网页中前台制作和后台开发者关于工作中遇到一些问题的整理总结，并知识分享。。。 二、对象 前端——主要指前端制作人员，不含UI设计师 后台——程序开发者 三、内容 引子 作为前端制作，其实在一个项目中是处于中间环节的。看似简单，但却与网页设计和开发都有密切的联系。 这几个月，主要参与了几个项目，像车商通改版、诚新二手车网站、奥迪官网建设以及UCAR网站与其他合作网站页面的制作。在这些个项目完成工作中，和设计师接触的少些，因为现在基本是设计稿经客户确认后才开始进行制作，所以返工也就少了很多；主要是后期和程序员之间的工作配合。 下面就将这段时间工作中易浮现问题和整理的一些知识与大家分享，希望可以抛砖引玉，大家畅所欲言，共同提高！工作流程 关于web标准 我们的产品最终是要面向客户的，而客户最关心的莫过于内容。承载这内容的网页，是由结构、表现和交互形式几部分构成。所以，我们先从web标准开始谈起吧。 什么是web标准？ WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为 （Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如DOM）、ECMAScript等网页设计师》。 结构化标记语言：XML和XHTML。 XML是The Extensible Markup Language(可扩展标识语言)的简写XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写CSS是Cascading Style Sheets层叠样式表的缩写什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。DOM是Document Object Model文档对象模型的缩写JAVAScript。像现在流行的js框架更是以后交互设计的发展趋势，例如JQuery、Ajax等。工作中存在的问题 标签如何选择？ 语义化：xtml标签充分语义化，尽可能的使用符合语义的标签。比如段落要用p/p;列表ulli/li/ul或者olli/li/ol;数据表table/table等。这样的好处不言而喻，结构清晰、seo优化、页面体积小、xhtml代码基本都是用户要看的数据。 谈到标签，其实指的是页面机构化和语义化。 结构化：尽量少的嵌套，页面对搜索引擎友好；特殊情况或者在其他平台下无css裸奔时，结构清晰、层次分明。 浮现问题：在某些编程语言下，一些控件会自动生成无用的代码。比如 的一些控件，如果前端确定的结构是“div数据/div”，后端这么操作 “divasp:label //div”那么就错了，因为最终输出的是“divspan数据 /span/div”，这样会造成代码冗余；还有一种情况更糟，假如结构是“div数据1span数据2/span/div”， 最终输出的是“divspan数据1 /spanspan数据2 /span/div”。但如果我给数据2的span指定了css样式，那么数据1的span也同样会生效... 解决方案：这个比较郁闷，因为这不是我们可以控制的，至少在该软件没有升级解决类似问题，只能尽量避免使用，如果必须使用到了，那结构的的中样式需单独定义，而不能继承定义。 不合理的嵌套 这里主要指的是页面的机构。 浮现问题：经常会看到这样的结构： p div数据…/div /p 其实这是错误的嵌套，P段落标签里不可以在嵌套块级元素。 解决方案：正确理解个标签的嵌套原则，如果无法确认的情查阅相关资料，这也是一个学习的过程。 样式的引用 一般来说有三种引用方式：页面内嵌、外部调用和直接在标签中用style指定。 虽然说这三种方法都可以，但最好的方法还是外部调用，优点：可以多处调用、便于修改维护等；页面内嵌现在在很多的门户网站首页会看到，像yahoo、sina、qq、bitauto和我们ucar等网站。究其原因无非是页面刷新样式加载更快，且避免外部调用css样式有误时出现裸奔的情况。但建议除首页外，其他页面尽量少用，因为其缺点也是显而易