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- ...
随机推荐
- 【k8s】centos上安装kubernetes，报错Error：docker-ce-cli conflicts with 2:docker-1.13.1-94.gitb2f74b2.el7.centos.x86_64
使用命令: yum install kubernetes 报错: Error: docker-ce-cli conflicts with :docker--.git07f3374.el7.centos ...
- Ubuntu14.04LTS下使用eclipse搭建Cocos2d-x的Android环境
from://http://www.58player.com/blog-2534-94136.html 最近想玩玩游戏制作,于是选择了目前流行的游戏引擎Cocos2d-x,这个东西虽然有Android ...
- 白话Spring（基础篇）---AOP（execution表达式）
作为AOP的最后一节内容,我们来简单总结一下切面表达式上见的书写方法.下面的那内容有参考其他博文,在此先对开源博客的各位大神表示感谢! -------------------------------- ...
- poj 2240 Arbitrage 题解
Arbitrage Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 21300 Accepted: 9079 Descri ...
- C/C++log日志库比较
事实上,在C的世界里面没有特别好的日志函数库(就像Java里面的的log4j,或者C++的log4cxx).C程序员都喜欢用自己的轮子.printf就是个挺好的轮子,但没办法通过配置改变日志的格式或者 ...
- [转]教你修复win7中复制粘贴失效的问题
教你修复win7中复制粘贴失效的问题 发布时间:2018-01-17 使用win7系统的时候,我们经常需要对立面的内容进行复制粘贴来引用一些网站的内容,不过最近有网友在使用这个 ...
- Vue.js vs React vs Angular 深度对比[转]
这个页面无疑是最难编写的,但我们认为它也是非常重要的.或许你曾遇到了一些问题并且已经用其他的框架解决了.你来这里的目的是看看 Vue 是否有更好的解决方案.这也是我们在此想要回答的. 客观来说,作为核 ...
- 什么是L2 frame?
The data link layer or layer 2 is the second layer of the seven-layer OSI model of computer networki ...
- Shark简介、部署及编译小结
http://blog.csdn.net/pelick/article/details/11964291 Shark简介 Shark即Hive on Spark,本质上是通过Hive的HQL解析,把H ...
- Pearson（皮尔逊）相关系数
Pearson(皮尔逊)相关系数:也叫pearson积差相关系数.衡量两个连续变量之间的线性相关程度. 当两个变量都是正态连续变量,而且两者之间呈线性关系时,表现这两个变量之间相关程度用积差相关系数, ...