文档介绍：该【前端页面设计】是由【夜紫儿】上传分享，文档一共【9】页，该文档可以免费在线阅读，需要了解更多关于【前端页面设计】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。前端页面设计
前端页面设计
网站设计模式:MVC(modeviewcontroller)MVC模式的目的就是实现Web系统的职能分工Model层实现系统中的业务规律View层用于与用户的交互
Controller层是Model与View之间沟通的桥梁,它可以分派用户的恳求并选择恰当的视图以用于显示,同时它也可以解释用户的输入并将它们映射为模型层可执行的操作。
前端实现网站的view层:
涉及技术:html,css,ps,js等。
工作内容:把设计好的网页UI图片切成html页面
技术要点:+css
DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,div+css是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格(table)定位方式,真正地到达了w3c内容与表现相分别。,不再公布新版本,缘由就在于HTML语言正变得越来越简单化、专用化。XHTML语言是一种可以将HTML语言标准化,用XHTML语言重写后的HTML页面可以应用很多XML应用技术。使得网页更加简单扩展,适合自动数据交换,并且更加规整。在XHTML网站设计标准中,不再使用表格定位技术,而是采纳DIV+CSS的方式实现各种定位。
教程网址:了解如何用div+:PS
利用PS可以把一整张网页图片切成我们想要的素材(如:背景图片等)和了解网页尺寸(如:页面宽度)。+JS:
CSS+JS可以实现页面的各种排版样式,使页面更加美观。资料:可以上网找一些css和js手册。
教程:学****js和css
平常练****可以阅读网站网页源码或网上找一些网页图片模板来尝试进展设计。
扩展阅读:前端交互页面设计要求
工程名称任我游门户工程型号
任我游门户前端交互页面设计要求
文档编号:文档版本:
拟制部门_____软件技术部______
拟制_____李祖玉_201*_年_2_月1_日
审核_________________年____月日
标准化审查_年月日
批准年月日
上海易罗信息科技有限公司
任我游门户前端交互页面设计要求
文件更改记录
*-2-12/任我游门户前端交互页面设计要求
3/任我游门户前端交互页面设计要求
4/任我游门户前端交互页面设计要求
名目
.
标准说明.............................................................6编码方式.............................................................6解释.................................................................6页面构造布局..........................................................
使用HTML5标准...................................................7采纳DIV布局.....................................................7
样式设计要求..........................................................
避开使用CSSexpressions.........................................7合并样式中图片...................................................7尽量引用外部的CSS...............................................7CSS引用放在顶部.................................................7
...........................................................
统一使用Jquery框架..............................................8JS尽量放在页面底部..............................................8
.
MyGou静态文件名目构造...............................................8版本掌握.............................................................9前端页面进度安排.....................................................9
5/9
任我游门户前端交互页面设计要求

为标准治理前端页面设计,提高页面加载速度,改善用户体验,便于工程的维护、更新和升级,特制定此标准。

统一使用UTF-8编码

HTML、CSS、JS文件都要写上解释。
HTML解释:构造体比拟大时,分别在开头标签和完毕标签写上解释(如:…);每个单独完整的构造体可以在开头和完毕标签写上功能名称(如:…)。
CSS解释:在css的文件的头部写上创立日期、修改内容等解释信息;每段HTML构造样式写上区块名称(如:/******toolbarstart******/…/******toolbarend******/)。
JS解释:在js的头部写上创立日期、修改内容等解释信息;在每个function写上解释说明;功能简单的functon在内部解释说明。

合理的构造布局可以提高页面的加载速度,使扫瞄器兼容性更强,可读性更好,有利于html元素构造的重用和封装。
6/任我游门户前端交互页面设计要求

HTML5标准是目前web的进展方向,虽然HTML5中的元素目前并不为全部扫瞄器所支持,但HTML5文档构造定义各扫瞄器都可以在标准模式下解析页面,而不需要指定某个类型的DTD。

页面统一使用DIV布局构造,慎重使用表格(尽量不用),最少化iframe数量。

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

为了削减页面http的恳求数量,加快web页面恳求速度,特殊是样式中使用的图片比拟多,给页面加载带来了负担。把样式中使用的图片归类并合并在一起,使用时用位置点来掌握显示区域。

外部引用css文件有可能被扫瞄器缓存起来,不用每次都去效劳器恳求。内部引用css文件,有可能包含在动态的html文档构造中,每次都要从效劳恳求下载,影响了web加载速度。

css放在页面要顶部,可以加快页面渲染速度,改善用户体验。
7/任我游门户前端交互页面设计要求

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

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

MyGou静态文件名目构造
为了标准和治理静态文件,页面中全部的静态文件以模块的方式存放在不同的文件夹中,便于日后的治理和维护。
文件名目构造如下:
名目构造static/mygou/(js|css|image|html|falsh)/commonstatic/mygou/(js|css|image|html|falsh)/account公共文件夹帐号模块(用户注册、用户登录、遗忘密码等)8/9
说明任我游门户前端交互页面设计要求
static/mygou/(js|css|image|html|falsh)/user用户模块(添加好友,删除好友,治理好友列表,治理好友分组,添加分组,删除分组,移动分组等)static/mygou/(js|css|image|html|falsh)/equip设备模块(添加设备,删除设备,设备升级提示等)static/mygou/(js|css|image|html|falsh)/notice消息模块(治理消息列表,回复消息,删除消息等)static/mygou/(js|css|image|html|falsh)/waypoint航点模块(添加航点,删除航点,治理航点列表,航点分组,航点分组治理,治理航点分组列表等)

每次提交的版本,必需带有版本号,对每次提交的内容有较好的版本掌握。

日期201*-02-06201*-02-08201*-02-27进度完成首页和一张内页设计稿网站整体风格确认说明供评审使用通过评审确认网站设计风格整个网站重构页面完成,可交开发使用重构页面从登录注册页面开头,再到各模块,详细安排与开发沟通。201*-03-06与开发一起调试、BUG修复完成修复各扫瞄兼容性问题,js脚本报错,局部样式调整等
9/9
友情提示:本文中关于《前端页面设计》给出的范例仅供您参考拓展思维使用,前端页面设计:该篇文章建议您自主创作。