stingray 页面布局与设计
前言
前面我们已经了解了系统中的HTML组件,现在我们就可以开始用这些组件来设计页面了,他们就像是一块块小积木,我们要盖起高楼大厦。
两种页面容器组件
我们将关联性较强的多个HTML组件放到一个容器组件中便于统一处理,这就行成了一个区块。多个区块顺序放到一个页面中,变组成了一个页面。基本上就是这个样子:
区块的设计重在熟练掌握这两个容器组件:
- Dynamic Container - 相对定位,高度自适应
- Static Container - 绝对定位,需要指定高度
使用WebEditor制作页面
通过DevToolBar创建新页面或者编辑已有的页面。DevToolBar不显示的问题 - 使用Developer模式运行。使用Applist页面讲解基本使用。
使用Sublime Text开发页面
同样这里使用Applist页面进行讲解基本使用,我们有个基本的对比。开发过程演示讲解。
两种方式的对比
- 直观性,所见即所得
- 操作难易程度
- 调试,问题排查
- 代码格式化
- 开发速度
未来页面设计系统构想
使用Angularjs重新构建前端部分,没错,就是重构我们的系统。
- VRM - 只负责ajax请求的处理,只返回json数据
- html - 视图部分将独立出来
- javascript - JS也将独立出来
- BootStrap - 引入css框架,简化布局
- 通用模块组件化
后端开发培训
下一节我们将介绍后端开发:stingray后端开发
stingray 页面布局与设计的更多相关文章
- APP界面设计之页面布局的22条基本原则
移动 APP 页面布局(Layout)是我们设计 app 界面的时候,最主要的设计任务.一个 app 的好与不好,很大部分取决于移动 APP 页面布局的合理性. 下图为 APP 最原始的布局模型. 页 ...
- APP界面设计与页面布局的23条基本原则
一个App的好与不好,很大部分取决于移动App页面布局的合理性,优秀的布局顾名思义就是对页面的文字.图形或表格等进行排版.设计. 优秀的布局,需要对页面信息进行完整的考虑,既要考虑用户需求.用户行为, ...
- TMS WEB CORE直接从HTML&CSS设计的页面布局
TMS WEB CORE直接从HTML&CSS设计的页面布局 TMS WEB CORE支持DELPHI IDE中拖放控件,生成HTML UI.这种方式适合DELPHI和C++ BUILDER的 ...
- UI设计,使用 线框图(页面示意图或页面布局图)
在进行页面框架设计的时候,尝试画个 线框图(页面示意图或页面布局图)吧.
- Xamarin+Prism开发详解五:页面布局基础知识
说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...
- CSS3与页面布局学习总结(四)——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- 如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]
如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[Abo ...
- CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS3与页面布局学习总结(四)——页面布局大全BFC、定位、浮动、7种垂直居中方法
目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...
随机推荐
- FAQ:什么情况下使用 struct ?
问: 什么情况下使用 struct ? 答: 使用 struct 有几个前提(必须全部满足): 容忍 struct 本身的限制,如:不能继承. 值语义. 足够小(<=16字节). 如果 stru ...
- java容器HashMap原理
1.为什么需要HashMap 前面我们说了ArrayList和LinkedList,它们对容器内的对象都能实现增.删.改.查.遍历等操作, 并且对应不同的情况,我们可以选择不同的List,用以提高效率 ...
- Fix "Drives are running out of free space" Error in SharePoint Health Analyzer
前言 最近帮助用户做健康检查,用户发现事件查看器(EventView)里面有很多错误,有一个就是"Drives are running out of free space",而且每 ...
- 较老版本 AFNetworking 使用心得
较老版本的 AFNetworking 下载链接 http://pan.baidu.com/s/14Cxga 将压缩包中的文件夹拖入xcode工程项目中并引入如下的框架 简单的 JOSN 解析例子 ...
- MYSQL 1093 之You can't specify target table for update in FROM clause解决办法
You can't specify target table for update in FROM clause含义:不能在同一表中查询的数据作为同一表的更新数据. 出现以上错误,是因为想将表自身的字 ...
- Android使用代码模拟HOME键的功能
Intent intent= new Intent(Intent.ACTION_MAIN); intent.addCategory(Intent.CATEGORY_HOME); intent.addF ...
- CentOS 7 Tomcat服务的安装与配置
3422人阅读 http://blog.51cto.com/13525470/2073657 一.Linux下的Java运行环境 Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由S ...
- 学了编译原理能否用 Java 写一个编译器或解释器?
16 个回答 默认排序 RednaxelaFX JavaScript.编译原理.编程 等 7 个话题的优秀回答者 282 人赞同了该回答 能.我一开始学编译原理的时候就是用Java写了好多小编译器和 ...
- 基于图的图像分割(Graph-Based Image Segmentation)
一.介绍 基于图的图像分割(Graph-Based Image Segmentation),论文<Efficient Graph-Based Image Segmentation>,P. ...
- CentOS 7 在vmware中的网络设置
一环境说明 二centos在vmware中的安装 三NAT网络设置 四设置固定IP 1修改网卡配置说明 2修改etcresolvconf 实现域名解析 五设置防火墙iptables 1 centos安 ...