功能界面设计,涉及到的技术有前端的CSS+DIV布局,以前布局使用表格,框架,现在布局基本上
使用区块的浮动布局。
功能界面实际的一般思路是:
>1. 首先是要有项目的需求分析,完成需求说明的文档,这个部分右需求分析是完成。
>2. 功能界面的设计,这部分由美工和网站策划师完成。
>3. 前端工程师完成功能界面的实现,必须分毫不差的实现美工的效果。
>4. 布局完成,渲染完成之后,即可以为表单添加特效,校验及其他的特效等,也就是
前端工程师的脚本编程。
>5. 有些异步请求的校验,以及需要用异步请求完成的功能可以是由服务端工程师完成。
注:对于CSS+DIV的布局:
有一般的规律可循:
*1. 搭建结构,用HTML标签元素搭建文档的结构
*2. 添加图片,文件等内容
*3. 给标签元素命名,有利于层叠样式表给特定标签元素的渲染
>类别命名一般用于层叠样式表选择使用
>标号命名一般用户Js编程加特效
注:这里说的是一般,也可以混用,
命名习惯:
#1. 类别命名可以使用标签类型+功能名字的方法
#2. 编号命名根据需要或者是需求命名
注:这里还是得听项目经理的
*4. 给标签的样式表塞值:
塞值步骤可以是(个人经验):
#前提: 可以有公共通用的层叠样式表的塞值文件:
*commons.css可以设置属性,如所有标签
或者是文件中用到的标签内外边距为0,图
片的边框大小为0px,锚标记得字体大小。
颜色,访问样式的设置,如:
text-decoration,a:visited,a:hover,
a:link,a:active
剩下通用字体的设置等等。
#1. width(宽度) height(高度)
#2. line-hight(行高) text-align/vertical-algin
(文本的对齐方式)
是水平对齐还是垂直对齐。
#3. 字体的设置:font-size(字体大小) font-weight
(字体粗细)
color(字体颜色)
注:层叠样式表也支持继承,说白了就是就近原则
覆写的原则。
#4. 背景图片,背景色:background,background-color
#5. 内边距 边框 外边距:
padding border margin
#6. 最后就是布局:是区块元素或者内嵌区块元素就要
布局,float(浮动布局),relative, absolute
overflow等
#7. 特殊的层叠样式表的塞值:
*1. left=-1px;左位移
*2. bottom=-1px;相邻元素向上位移
*3. z-index=0;层叠权限级别
Js编程经验总结:
脚本编程用到的最多的就是Java脚本库:JQuery,封装了Java脚本编程中对元素的选择方法,Java脚
本编程的操作对象是DOM(Document Object Model)元素:文档对象模型,是基于事件响应的编程,其中用到了许多的回
调函数即函数指针的调用,通过传递函数对象(很多的匿名函数),局部依赖方法,完成相应的功能。说简单点,其实脚本编程其实就是
选择标签元素后,对表签元素的属性的设置值,移除值,以及对其层叠样式表属性的设值或移除值,对其文本内容的
getter,setter以及对标签元素的getter delete等等,从而对DOM元素添加特效。
异步请求:JQuery的异步请求方式,有6种常用的方法,
注:Js的对象表示方式可以使重量级的xml文件,或者是轻量级的json数据表示方式(字符串键,对象值)
*1. $.ajax({
//请求的地址
url:"",
//异步请求要提交的参数
data:{},
//是否异步请求
async:true/false,
//是否缓存
cache:true/false,
//异步的请求方式
type:"POST",
//传输的数据类型
dataType:"json",
//异步请求成功之后要调用的函数,result是异步请求的服务端方法成功之后的返回值
success:function(result){
...
}
});
//url:为你要请求访问服务器地址,data为你要提交的参数,
//function 为异步请求成功之后要执行的函数
*2. $.post(url,data,function);
*3. $.get(url,data,function);
*4. $.load(url,data,function);//不管请求成功或者失败,都会执行回调函数。
*5. $.getJSON(url,data,function);
*6. $.getScript(url,fuction)
EL表达式:
*EL表达式中判断对象值是否为空的方式: ${empty 值}
*EL表达式中判断对象值是否相等的方式:
>1. eq 一般选用这个,比较字符串不需要用双引号。
>2. == 这个也可以用
伪协议:href="javascript:",超链接后为执行javascript类型的方法。
<c:out value="" />是jstl标签库中提供的数据输出功能,${}是J2EE中提供的数据输出功能,两者完成的效果一样。
el表达式一般不直接用==判断是否相等,> < >= <= !=之类的表示大于,小于,大于等于,小于等于, 不等于,而是
使用字母的表达式,eq,ne,gt,lt,,ge,le,字符串比较,不需要使用“”。