web前端工作报告

1、web前端工作报告之前整理发表了xmlhttprequest的属性和方法简 介，它ajax要使用的核心的技术之一，现在就来实际运 用它。这个ajax标签导航，是我很久前就写的一个脚本， 很实用的，现在拿它来做实例讲解吧！当然个人能力有限, 有什么不对的地方还请多包含！效果大家看到了，核心功能有：1、将当前选中标签以特殊的样式显示2、将异步加载的页面信息显示到指定的dom节点中我们来看看处理脚本的代码吧:object !=/uequest!二u程序代码:/判断是否支持activexvaruseac tivex= (typ eofactivexndefinect);/判断是否支持domvaruse

2、do m=;/判断是否支持xmlhttp request对象varusexml httptype ofxmlhttprndefined");/xmlhttp request 对象版本vararr_xmlhttp_ve rs=，;/dom对象版本*函数名称：$ (i)*参数说明：i-目标节点名称*函数功能：获取指定的目标dom节点*返回值：返回要搜索的目标dom节点*使用方法：$ (/zfr msearch/z) functio n$ (i) if(i)returnfal se;if (ty peof i二二二s tringz/) /w3 cdomreturn (i);elsei f

3、(i) /m sie4d0mret urn (i);el seif (i) /nn4d0m note: thi swon' tfind nestedlaye rsreturni else re turnfalse;else ret urni;/->id="ne ws"-news就是我们的导航标签的id ；id二new scnt-news cnt就是我们要写入信息的目标dom节点;class二first-hr st当前（第一个）标签的样式;id二news-0-n ewso通过"-"分开，我们就分别可以得到news （导航标签id）, 0网站重

4、构-超链接-标签间的分割线我罗列的这些东西，相信大家开始看出了些头绪了， 呵呵，不过别急！在我们看处理的脚本之前，先让我们来 看看导航标签的样式，主要是看看我们对分割线的处理（一 点css处理的技巧）。本来想偷个懒，让大家看我上边说的那篇文章，想想也就是ctr 1+cctrl+v,都贴出来吧！呵呵！ ！ ！不过还没有完，最后要说的就是inn erhtml这个特性, 这里我们还要感谢微软啊，innerht ml就是它的专利，我 们就是用它来改变指定dom内的html字符串的，而不用刷 新页面。详细的信息大家还是google一下吧，我也要休息下啊！喝口茶先！八！以上讲了这么多，我们最后来看看，我们

5、这个ajax标 签导航都用到了那些技术吧：xhtmlcssjavascriptdomxmlhttp request 对象i nnerhtml还有xml,我们这个例子没有涉及到。东西虽小，包含的知识可是都用到了啊，我把我会的点东西都端出来了，呵呵！当然我很喜欢跟大家多交流，以后有时间，我们在来 谈谈css的hacks技巧，javascri ptdom编程等等的，今天 就收工了，谢谢捧场先！ ！co pyrightcop y;2007-200 8href二,allrightsr eserved po weredby: do main看出来什么没有？可能大家已经发现，整个页面里基本上都是用户要看的数

6、据，其中只包含了很少的布局(xhtml)标签。整个页面基本都是由最基础的hlh6、p、 ul> ol> 1 is form、div标签来实现的。说到这里就要讲到我在前面提到的“结构清晰、seo优 化、页面体积小、xhtml代码中基本上都是用户要看的数 据”，看看我的这个例子做到了没有？结构清晰一也就是我们常说的，xhtml标签要结构化。 什么叫结构化？由于个人认为这个知识点是十分重要的，所以请允许 我在这里多罗嗦几句，我们釆用web标准的方法制作页面 的优势就体现在页面结构清晰。我们以前用table布局的 时候，我们的表现和形式是混在一起的，有很多冗余的数 据混杂在一起，而大家再看

7、看我上面给大家展示的代码， 很明显，结构十分清晰。说了半天，还是没有说什么是结构化，什么才是结构 清晰啊？不要急。还记得我刚才提到的那几个标签吗？ 的基本类型：undefined:只有一个值undef ined,它是变量未被赋 值时的值，在js中全局对象有一个un defined属性表示 undefined ,事实上 undefi ned 并非 javas cript 的关键 字，可以给全局的unde fined属性赋值来改变它的值。 null :只有一个值null，但是javascr ipt为它提供了一个 关键字null来表示这个唯一的值。nul 1类型的语义是“一个空的对象引用”。numb

8、er:nan是其一个特殊的属性值，typeofnan / “number” );string :其正式解释是一个1 6位无符号整数类型的序 列，它实际上用来表示以utf-16编码的文本信息。bool ean:有两种取值t rue和false。0、nan>空字符串、null> unde fined转化为fa ise,其余的全部为true。obj ect:最为复杂的类型就是object,它是一系列属 性的无序集合，functio n是实现了私有属性call的 ob ject, javas cript的宿主也可以提供一些特别的对象。 typeof*'3，' 344+/ “

9、object，关于 null 和 u ndefined： n ull 是关键字；un defined 不是关键字，undefin ed是global对象的一个属性。运算时null与und efined都可以被类型转换为false , 但不等值于fals e：(!null , !undefine d) ;/true, true(nul l=false) ;/false(undefined=false);/false(un defined=n ull) ;/tru enullins tanceofobj ect/falsetypeofnull /object的类型转换手动的转换有：number (

10、x ) ;boolean(x) ;string(x);以 及 parse int, parsef loat, tostr ing, valueo f 等等。自动的转换：如果“ + ”操作符的一个操作数是字符串， 则会将另一个操作数转换为字符串，一元操作符“*”、“-” 将操作数转换为数字，一元操作符"！”将操作数转换为布 尔值并取反。'hello' +5 / 'hello5''hello' +null/ 'hellonull''5' *5/25'hel lo' *5/nanx+” /等价于

11、 $ tring (x)+x 或者 x-o/等价于 number (x )! !x/等价于 b oolean (x)属性四个参数：上右下左三个参数：上、左右、下两个参数：上下、左右一个参数：四周4. 关于float问题，浮动元素后跟非浮动元素的情况。 后边非浮动元素若为行内元素且因为定位产生重叠时，行 内元素边框、背景和内容都在该浮动元素“之上”显示， 若为块级元素且因为定位产生重叠时，该块级元素边框和 背景在该浮动元素“之下”显示，只有内容在浮动元素 “之上”显示。【有示例】。clear属性规定元素的哪一侧不允许其他浮动元素。 clea r属性定义了元素的哪边上不允许出现浮动元素。在css1

12、和css2中，这是通过自动为清除元素增加上外边 距实现的。在中，会在元素上外边距之上增加清除空间， 而外边距本身并不改变。不论哪一种改变，最终结果都一 样，如果声明为左边或右边清除，会使元素的上外边框边 界刚好在该边上浮动元素的下外边距边界之下。5. 绝对定位、相对定位与浮动定位绝对定位：absolute生成绝对定位的元素，相对于 static定位以外的第一个父元素进行定位。设置为绝对定 位的元素框从文档流完全删除，并相对于其包含块定位， 包含块可能是文档中的另一个元素或者是初始包含块。元 素原先在正常文档流中所占的空间会关闭，就好像该元素 原来不存在一样。元素定位后生成一个块级框，而不论原

13、来它在正常流中生成何种类型的框。相对定位：relativ e生成相对定位的元素，相对于其 正常位置进行定位。设置为相对定位的元素框会偏移某个 距离。元素仍然保持其未定位前的形状，它原本所占的空 间仍保留。浮动定位：浮动的框可以向左或向右移动，直到它的 外边缘碰到包含框或另一个浮动框的边框为止。由于浮动 框不在文档的普通流中，所以文档的普通流中的块框表现 得就像浮动框不存在一样。zk例代码就是最外层的d iv是relativ e,里面的就是abs olute。6. 关于dom元素利用d om, js可以相对简单地寻找、访问和操纵html 元素，从而动态地改变html页面的内容和外观。节点常用 的

14、属性有 paren tnode, chil dnodes, fir stch订d, la stchild,previoussi bling, next siblingo7 关于函数定义顺序：函数的定义与其他的语句的定义不再同一个时间轴上面，计算机在开始执行语句之前，会先查找所有的fimc ticm的定义，然后保存。所以在函数后面定义的调用语句可以调用到定义在前面的函数。局部变量与全局变量：局部变量只适合于函数的参数 和函数内部已var关键字定义的变量。如果没有定义同名 的局部变量，函数内部则可能访问全局变量。闭包：首先要知道在js中，函数在一旦定义的时候就 会产生自己的一个作用域，而此后这个函

15、数的执行也是要 依赖于这个作用域的。闭包的最常用的编程模式就是在一 个函数中嵌套另一个函数，然后将这个嵌套的函数作为返 回值返回，当然外部函数中的局部变量也就存在于这个返 回函数的作用域中的，这样就起到了对局部变量的一个访 问控制。但是缺点在于增大了内存的开支。而且其所派生 的子类将不能访问其私有属性，破坏了继承性。因此还是 需要三思而行。闭包可以用在许多地方。它的最大用处有 两个，一个是前面提到的保护函数内部的变量，另一个就 是让在内存中维持变量。我写的闭包主要用于实现一些插件，因为有一些变量 需要避免被全局变量污染。可选参数：js不会限制传入函数的参数数目。如果传 入的参数过多，多余的参数

16、会被忽略掉。如果过少，缺失 的参数会默认为u ndefinedoapply和cal 1的区别：相同点：两个方法产生的作用 是完全一样的。不同点：方法传递的参数不同，apply (obj , argl, arg2. ) call (obj, argl, a rg2)原型：所有对象都有一个原型，对象可以共享其原型 的属性，但是这种共享是单向的，即原型的属性影响对象, 改变对象确不会影响到原型。原型污染：使用for/i n遍历 对象的时候，会同时得到本来的属性和原型的属性，可以 使用hasownporp erty方法来判断。匿名函数：一般用来写已加载就需立即执行的函数。 同时为了避免受全局变量的影响

17、，在一个不是很熟悉的页 面增加javascr ipt时非常有效。和span有何区别？答：两者最明显的区别在于div是块兀素，而span是 行内元素（也译作内嵌元素）。所谓块元素，是以另起一行 开始渲染的元素，行内元素则不需另起一行，当然这一点也可以通过设置dis play来改变。9. css+div开发web页面的优势有哪些？答：1）2）3） css+div ,这个网页设计模式中，div承担了网页 的内容，css承担了网页的样式。这样就使网页的内容和样 式的分离开来。有利于页面的维护升级。有助于提高搜索 引擎亲和力有助于页面的重构（换皮肤如b log,直接套用 另外一套样式就可以实现，而不用改

18、动网页脚本。）与settim eout的区别？答：settimeout方法是定时 程序，也就是在什么时间以后干什么。干完了就拉倒。s etlnterval方法则是表示间隔一定时间反复执行某操作。及其优缺点：答：asynchrono usjavascri ptandxml”、banner图片、多媒体运用、文字等主要信息 展示；子网页包括用户注册、登录、子网页相关栏目。各 页面之间通过超链接切换。最后要求提交详细的课程设计报告及网页效果图和网 站运行文件，现场运行验收开发的系统。四、课题设计报告书要求：1、课题设计报告书第一页为封面，封面上写清楚标题、 班级、姓名、指导老师、完成日期。2、课题设计

19、报告书第二页为本任务书。3、课题设计 报告书第三页为教师评语。4、课题设计报告书第四页为目 录。5、课题设计报告书第五页开始为具体内容：开发背景？网站栏目划分2）网页素材及网站架网站分 析设计部分?栏目内容介绍构制作1）客户需求分析?网站拓 扑图3）首页制作页面设计2）网站风格定位4）网站效果 图4）子页面制作3 ）网站建设方案网站制作部分?网页风 格创意设计1）效果图制作6、课题设计报告书最后一页是本次课程设计的小结和 参考文献。7、字数要求不少于3 000字。8、打印纸张使用b5纸，页边距设为上、下、左2厘 米，右厘米，五、如有雷同，将作不及格处理。六、完成时间:教育类网站设计报告书一一宁

20、海职业技术学院网- 教师评语 教师:5.-4-4-网 站 风 格 定位客户需求分-5 -彩: .63特效-6 -二 网站设计前期 准 备-6-网站 风 格 定位-6-1. 页面风格创意 设计-7-2网 站 栏目划分.-7-3.特效-7-三、网 站 拓 扑图-7- 四、网站效果 图-8-教育类网站设计报告书一一宁海职业技术学院网- 五、中 期 网 站 制作-11-网 站首 页 制作.-11-1、 首 页 logo效果：-11-2、 站内公告效 果：-11-3、站内新闻效果 图：-11-4、 登陆效果图：-12- 网 站 搭 建 过程 画网结.-14-三、制作网站的logo 动t6一六、得小站建设

21、心 .24-七、参考文献-2 6-一刖a客户需求分析客户需求，是指学校创建门户网站的目的和对网站提 出的特定要求。了解客户需求，是建好学校门户网站的前提。宁海职 业技术学教育类网站设计报告书一一宁海职业技术学院网-校对其拟建的门户网站提出的主要要求有以下几点。 宣传学校办学理念，展示办学设施、教师队伍、专业设置、 就业情况，提高学校的社会知名度；适时发布学校管理、教学、招生等相关信息，为求学 者提供相关咨询服务；获取社会各界对学校教育教学情况的评价和意见、建 议；建立与兄弟院校进行交流学习的平台；向社会各界推荐毕业生，为毕业生提供就业信息。 网站风格定位校园网站就是学校的网上形象，每一所学校都

22、有自己 的特色，每一个院系或班级都会有自己的强项。对于本项 目介绍的校园网站以抚州职业技术学校为例，从以下三个 方面来学习该网站的风格定位。1.色彩：本项目中采用一种色彩，先选定主色调为橙色，这是 令人激奋的色彩，具有明亮、健康、热烈、温暖、欢乐、 辉煌、庄严，以及尊贵的色感，然后通过调整透明度或者 饱和度，就是色彩进行变淡、加深或渐变的处理，产生新 的橙色的近似色彩，使网页看起来色彩统一，富有层次感。 在页面中借助浅灰色的背景图像，采用了留白艺术给人教育类网站设计报告书一一宁海职业技术学院网- 浅析web前端开发行业的发展web前端开发的过去、现在和未来自从第一个网站在上个世纪90年代初诞生

23、以来，早期 的网页完全由文本构成，除了一些小图片和毫无布局可言 的标题与段落。然而，时代在进步，接下来出现了表格布 局，然后是flash,最后是基于css的网页设计。无可否认, 前端页面重构技术也经历着这样的一个过程：ta ble布局 页面->di v+css-html 5+css3,面对众多的浏览器与平台, w eb前端不再是以前那样简单的重复性工作。下面让我们 对web前端开发行业的发展有一个简短的认识。回首web前端开发的过去，1991年8月，timberners -lee发布了第一个简单的，基于文本，包含几个链接的网 站，这也预味着我们前端开发工程师的职位已产生。这20 多年前端重构行业的发展，对于我们岗位的称呼也在发生 着改变：页面仔、切图仔、美工、页面制作，到现在的“前端制作”；j s类开发的称呼：僵尸仔，到现在的“前 端开发”。因为html和css入门起点低,小公司里的“美工” 至今还