网页设计前端页面制作的规范要求和注意事项
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一次以上的整体测试。 设计师需要注意的几点:
1.
尽量考虑为元素命名其本身的作用或尽量考虑为元素命名其本身的作用或尽量考虑为元素命名其本身的作用或尽量考虑为
元素命名其本身的作用或”用意用意用意用意”,,,,达到语义化达到语义化达到语义化达到语义化。不要使用表面形式
的命名。如: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属性,以备图片阻止时,文字的替换
分享到:
相关推荐
,网页要求的总数量太多?是否找不到合适的模板?等等一系列问题。本资源就可以为你解决你所面临的这些问题,原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,这是一个不错的网页制作资源合集,画面精美,非常...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js,有的视频+音乐+...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
完整的简单网页设计制作和完整的实验报告:可以自己稍微改一下,就可以提交了。完整前端网页代码+完整实验报告 包括:网页部分、psd制作、flash制作(fla文件和swf文件),css文件,hmtl文件,js文件........ 特别...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
大学生静态网页设计期末作业源码前端静态网页大作业源码,使用的是原生的 html,css,js 代码,期末作业必过,高分必备。 大学生静态网页设计期末作业源码前端静态网页大作业源码,使用的是原生的 html,css,js ...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
Bootstrap可制作美观的前端页面,拥有丰富的组件及外部插件,更适用于前端的开发
大学生Web前端静态网页设计期末大作业(高分必看)大学生Web前端静态网页设计期末大作业(高分必看)大学生Web前端静态网页设计期末大作业(高分必看)大学生Web前端静态网页设计期末大作业。大学生Web前端静态网页...
大工20春《Web前端网页制作》大作业答案
Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web...
web前端页面规范.pdf