网页设计前端页面制作的规范和注意事项
一个排版规整的网页,是吸引客户的第一前提要素,下面是小编为大家整理关于网页设计前端页面制作的规范和注意事项,欢迎大家阅读!
1.尽量把页面的背景图及小图标整合到一张图片,用CSS定位方法。这样以减少http请求,从而降底网站的下 载 速 度。
2.尊从内容与页面样式的脱离,如需要,同样也要做到布局与COLOR的脱离。什么样的图片属于内容:从数据库里取出来的图片。凡是不属于内容的图片请都用背景。
1)页面代码,做到精简,逻辑性清楚;公用部位可以引入进来,比如头部,脚部。
2)CSS逻辑清析,精简。可在不改变功能的前提内,做到能更换页面布局及换色。
CSS样式每个页面引入不超过两个文件,一个是COMMON:它包含整个站点都需用到的`公用部分,如整体布局,头部,脚部,框,按扭等。另一个是当前页的CSS。CSS文件引入在2个之内,减少http请求避免CSS的表达式。
3. 将脚本放在底部。
这样页面就可以逐步呈现,而且页面中的可视组件可以尽早下裁。
配合程序开发人员我们需要注意的(xhtml):
1.了解用户可编辑上传修改的“图片”,“文字”区域的需求。根据需求来定位控制,以保证页面的稳定显示。如图片,需了解:
1)宽度是否是固定大小,
2)宽度最大限度,
3)大小不一样时的居中显示
如文字,需了解:
1) 文字的最大长度。及加“…”省略号区域,
2) 在测试中经常也会碰到英文无空格情况,得用overflow: hidden的方法隐藏溢出部分。
2.每个页面加上正确显示的TITLE。
3.在页面中尽量完成每步交互效果,包括既时响应的。
4.提交程序员的DEMO必须是连贯的,交互效里齐全,而且经过自已在IE6.0,IE7.0,FIREFOX一次以上的整体测试。
设计师需要注意的几点:
尽量考虑为元素命名其本身的作用或”用意”,达到语义化。不要使用表面形式的命名。如:red/left/big等。
2.组合命名规则:
[元素类型]-[元素作用/内容] 如:搜索按钮: btn-search
登录表单:form-login
新闻列表:list-news
3.涉及到交互行为的元素命名:
凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式,命名可参考以下规则:
鼠标悬停::hover 点击:click 已浏览:visited
如:搜索按钮: btn-search、btn-search-hover、btn-search-visited
4.用户体验方面需要注意的:
1). 每个连接,按钮要做上鼠标hover时的一个变化效果。如果hover时是换一张背景图片,请把这两张图片整合在一张图片中,以防止在hover时,页面还在download变化的那张图片,这样会出现那个按钮无图的间隔;
2). INPUT有个label,可以让用户在点击字时,光标自动跳入相应input中;
3). 图片应该有alt属性,以备图片阻止时,文字的替换。
-
jQuery中的read和JavaScript中的onload函数的区别在哪
在JavaScript中,onload函数是最经常使用的,几乎涉及到JavaScript的童鞋都少不了要接触它。这个函数的作用就是等待网页完全装载完了以后再去执行代码块内的语句,因为按照文档流的执行顺序,通常用于头部加载JavaScript的`时候需要用到。复制代码代码如下:ad=functio...
-
javascript中setInterval的用法总结
javascript中的setInterval的函数主要是在制作动画或其他间隔性渲染(操作)效果时,对操作方法按照一定时间间隔进行调用的函数。setInterval的表达式格式主要有:setInterval(fnname,time,par1,par2,);setInterval(obj,fnname,time,par1,par2,);第一种是最常见的表达...
-
网站设计首页要注意的事项
网站设计首页的时候要注意些什么?哪些是必须要注意的?下面就来和小编一起看看网站设计首页要注意的事项吧。1.用户友好性:提高首页的用户友好性,能够大大增加留住用户的可能性,更进一步的`话则是能提高用户的黏着度,取得良好的用户转化效益。而用户的友好性主要体...
-
HTML5教程:画布Canvas基础知识讲解
Canvas是HTML5最让人期待的特性之一,目前已获得大部分Web浏览器支持Canvas可以帮助创建游戏、增强图形用户界面。下面YJBYS小编为大家带来画布Canvas基础知识,希望对大家学习有所帮助!HTML5规范引进了很多新特性,其中最令人期待的之一就是Canvas元素。HTML5Canvas...