前端页面设计

时间：2019-05-29 15:23:35 网站：公文素材库

前端页面设计

网站设计模式：MVC（modeviewcontroller）MVC模式的目的就是实现Web系统的职能分工Model层实现系统中的业务逻辑View层用于与用户的交互

Controller层是Model与View之间沟通的桥梁，它可以分派用户的请求并选择恰当的视图以用于显示，同时它也可以解释用户的输入并将它们映射为模型层可执行的操作。

前端实现网站的view层：

涉及技术：html,css,ps,js等。

工作内容：把设计好的网页UI图片切成html页面

技术要点：1.div+css

DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，真正地达到了w3c内容与表现相分离。HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。XHTML语言是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。

教程网址：了解如何用div+css设计一个网页1.切图：PS

利用PS可以把一整张网页图片切成我们想要的素材（如：背景图片等）和了解网页尺寸（如：页面宽度）。2.CSS+JS:

CSS+JS可以实现页面的各种排版样式，使页面更加美观。资料：可以上网找一些css和js手册。

教程：学习js和css

平时练习：可以阅读网站网页源码或网上找一些网页图片模板来尝试进行设计。

扩展阅读：前端交互页面设计要求

项目名称任我游门户项目型号

任我游门户前端交互页面设计要求

文档编号：文档版本：1.0

拟制部门_____软件技术部______

拟制_____李祖玉_201*_年_2_月1_日

审核_________________年____月日

标准化审查_年月日

批准年月日

上海易罗信息科技有限公司

任我游门户前端交互页面设计要求

文件更改记录

版本号1.0创建更改内容方式创建更改人李祖玉更改日期201*-2-12/任我游门户前端交互页面设计要求

3/任我游门户前端交互页面设计要求

4/任我游门户前端交互页面设计要求

1.2.3.4.

规范说明.............................................................6编码方式.............................................................6注释.................................................................6页面结构布局.........................................................64.1.4.2.5.

使用HTML5标准...................................................7采用DIV布局.....................................................7

样式设计要求.........................................................75.1.5.2.5.3.5.4.

避免使用CSSexpressions.........................................7合并样式中图片...................................................7尽量引用外部的CSS...............................................7CSS引用放在顶部.................................................7

6.JS设计要求..........................................................86.1.6.2.

统一使用Jquery框架..............................................8JS尽量放在页面底部..............................................8

7.8.9.

MyGou静态文件目录结构...............................................8版本控制.............................................................9前端页面进度安排.....................................................9

5/9

任我游门户前端交互页面设计要求

1.规范说明

为规范管理前端页面设计，提高页面加载速度，改善用户体验，便于项目的维护、更新和升级，特制定此标准。

2.编码方式

统一使用UTF-8编码

3.注释

HTML、CSS、JS文件都要写上注释。

HTML注释：结构体比较大时，分别在开始标签和结束标签写上注释(如：…)；每个单独完整的结构体可以在开始和结束标签写上功能名称(如：…)。

CSS注释：在css的文件的头部写上创建日期、修改内容等注释信息；每段HTML结构样式写上区块名称（如：/******toolbarstart******/…/******toolbarend******/）。

JS注释：在js的头部写上创建日期、修改内容等注释信息；在每个function写上注释说明；功能复杂的functon在内部注释说明。

4.页面结构布局

合理的结构布局可以提高页面的加载速度，使浏览器兼容性更强，可读性更好，有利于html元素结构的重用和封装。

6/任我游门户前端交互页面设计要求

4.1.使用HTML5标准

HTML5标准是目前web的发展方向，虽然HTML5中的元素目前并不为所有浏览器所支持，但HTML5文档结构定义各浏览器都可以在标准模式下解析页面，而不需要指定某个类型的DTD。

4.2.采用DIV布局

页面统一使用DIV布局结构，谨慎使用表格（尽量不用），最少化iframe数量。

5.样式设计要求

5.1.避免使用CSSexpressions

表达式计算开销很大，影响web加载性能；暴露了一个脚本执行环境，CSS表达式就构成了一个可能的脚本注入攻击方向；IE8的标准模式不再支持CSS表达式。

5.2.合并样式中图片

为了减少页面http的请求数量，加快web页面请求速度，特别是样式中使用的图片比较多，给页面加载带来了负担。把样式中使用的图片归类并合并在一起，使用时用位置点来控制显示区域。

5.3.尽量引用外部的CSS

外部引用css文件有可能被浏览器缓存起来，不用每次都去服务器请求。内部引用css文件，有可能包含在动态的html文档结构中，每次都要从服务请求下载，影响了web加载速度。

5.4.CSS引用放在顶部

css放在页面要顶部，可以加快页面渲染速度，改善用户体验。

7/任我游门户前端交互页面设计要求

6.JS设计要求

6.1.统一使用Jquery框架

Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k)，它兼容CSS3，还兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+）。jQuery使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

6.2.JS尽量放在页面底部

JS会阻塞页面加载，由于html文档是从上而下来渲染页面，JS放在底部，不会影响页面渲染，改善用户体验。

7.MyGou静态文件目录结构

MyGou静态文件目录结构

为了规范和管理静态文件，页面中所有的静态文件以模块的方式存放在不同的文件夹中，便于日后的管理和维护。

文件目录结构如下：

说明任我游门户前端交互页面设计要求

8.版本控制

每次提交的版本，必须带有版本号，对每次提交的内容有较好的版本控制。

9.前端页面进度安排

日期201*-02-06201*-02-08201*-02-27进度完成首页和一张内页设计稿网站整体风格确认说明供评审使用通过评审确认网站设计风格整个网站重构页面完成，可交开发使用重构页面从登录注册页面开始，再到各模块，具体安排与开发沟通。201*-03-06与开发一起调试、BUG修复完成修复各浏览兼容性问题，js脚本报错，局部样式调整等

9/9

友情提示：本文中关于《前端页面设计》给出的范例仅供您参考拓展思维使用，前端页面设计：该篇文章建议您自主创作。

　　来源：网络整理免责声明：本文仅限学习分享，如产生版权问题，请联系我们及时删除。

《前端页面设计》
由互联网用户整理提供,转载分享请保留原作者信息,谢谢!
http://m.bsmz.net/gongwen/713204.html