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- ...
随机推荐
- ios开发经常使用RGB色值
iOS中RGB经常使用的色值,同一时候可将对颜色的设置定义成宏,方便开发应用,如: // RGB颜色转换(16进制->10进制) #define UIColorFromRGB(rgbValue) ...
- 分布式系统唯一ID生成方案汇总 转
系统唯一ID是我们在设计一个系统的时候常常会遇见的问题,也常常为这个问题而纠结.生成ID的方法有很多,适应不同的场景.需求以及性能要求.所以有些比较复杂的系统会有多个ID生成的策略.下面就介绍一些常见 ...
- JS判断图片加载完成方法
javascipt原生方法 选取指定ID的图片,通过onload指定回调方法,在图片加载完成后弹出“图片加载已完成”字样提示. <img id="pic1" src=&quo ...
- [PHP] 6种负载均衡算法
CP from : https://www.cnblogs.com/SmartLee/p/5161415.html http://www.dataguru.cn/thread-559329-1-1. ...
- Java中线程池，你真的会用吗？
在<深入源码分析Java线程池的实现原理>这篇文章中,我们介绍过了Java中线程池的常见用法以及基本原理. 在文中有这样一段描述: 可以通过Executors静态工厂构建线程池,但一般不建 ...
- endnote插入参考文献后的对齐方式和缩进空格
原文链接 https://jingyan.baidu.com/article/63acb44a3f0f6161fcc17ed0.html 1 2 3 4 5 6 7 分步阅读 1.endnote 导入 ...
- （八十七）AutoLayout的简单介绍与实例
AutoLayout是继AutoResizing之后的一种自己主动布局方法.攻克了AutoResizing无法处理控件间相互关系的问题. AutoLayout在storyboard中通过底部工具条设置 ...
- HTTP协议学习【转】
面试过程中又一个常见的问题,http协议,因为做服务器开发如果用http协议的话,现在各种开源软件都封装好了,python中只需要简单的继承定义好的类,重写get或者post等方法,几行代码就可以搭建 ...
- 7.5 zookeeper客户端curator的基本使用 + zkui
使用zookeeper原生API实现一些复杂的东西比较麻烦.所以,出现了两款比较好的开源客户端,对zookeeper的原生API进行了包装:zkClient和curator.后者是Netflix出版的 ...
- oracle的行级触发器使用
行级触发器: 当触发器被触发时,要使用被插入.更新或删除的记录中的列值,有时要使用操作前.后列的值. :NEW 修饰符访问操作完成后列的值 :OLD 修饰符访问操作完成前列的值 例1: 建立一个触发器 ...