前言

前面我们已经了解了系统中的HTML组件，现在我们就可以开始用这些组件来设计页面了，他们就像是一块块小积木，我们要盖起高楼大厦。

两种页面容器组件

我们将关联性较强的多个HTML组件放到一个容器组件中便于统一处理，这就行成了一个区块。多个区块顺序放到一个页面中，变组成了一个页面。基本上就是这个样子：

区块的设计重在熟练掌握这两个容器组件：

  1. Dynamic Container - 相对定位，高度自适应
  2. Static Container - 绝对定位，需要指定高度

使用WebEditor制作页面

通过DevToolBar创建新页面或者编辑已有的页面。DevToolBar不显示的问题 - 使用Developer模式运行。使用Applist页面讲解基本使用。

使用Sublime Text开发页面

同样这里使用Applist页面进行讲解基本使用，我们有个基本的对比。开发过程演示讲解。

两种方式的对比

  1. 直观性，所见即所得
  2. 操作难易程度
  3. 调试，问题排查
  4. 代码格式化
  5. 开发速度

未来页面设计系统构想

使用Angularjs重新构建前端部分，没错，就是重构我们的系统。

  1. VRM - 只负责ajax请求的处理，只返回json数据
  2. html - 视图部分将独立出来
  3. javascript - JS也将独立出来
  4. BootStrap - 引入css框架，简化布局
  5. 通用模块组件化

后端开发培训

下一节我们将介绍后端开发：stingray后端开发

posted @ 2017-02-14 21:45 by Mark

stingray 页面布局与设计的更多相关文章

  1. APP界面设计之页面布局的22条基本原则

    移动 APP 页面布局(Layout)是我们设计 app 界面的时候,最主要的设计任务.一个 app 的好与不好,很大部分取决于移动 APP 页面布局的合理性. 下图为 APP 最原始的布局模型. 页 ...

  2. APP界面设计与页面布局的23条基本原则

    一个App的好与不好,很大部分取决于移动App页面布局的合理性,优秀的布局顾名思义就是对页面的文字.图形或表格等进行排版.设计. 优秀的布局,需要对页面信息进行完整的考虑,既要考虑用户需求.用户行为, ...

  3. TMS WEB CORE直接从HTML&CSS设计的页面布局

    TMS WEB CORE直接从HTML&CSS设计的页面布局 TMS WEB CORE支持DELPHI IDE中拖放控件,生成HTML UI.这种方式适合DELPHI和C++ BUILDER的 ...

  4. UI设计，使用 线框图（页面示意图或页面布局图）

    在进行页面框架设计的时候,尝试画个 线框图(页面示意图或页面布局图)吧.

  5. Xamarin+Prism开发详解五：页面布局基础知识

    说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...

  6. CSS3与页面布局学习总结（四）——页面布局大全

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  7. 如何在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 ...

  8. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  9. 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- ...

随机推荐

  1. 使用VMWare虚拟机创建CentOS版本号的Linux学习环境(每一步都有截图与说明)

    学习Android开发.假设不学习Linux的基本使用,总感觉心里过意不去,由于毕竟Android还是搭载在Linux的基础之上的. 因此.学习一种Linux系统的基本操作.对我们以后的学习还是非常有 ...

  2. 技术人生：special considerations that are very important

    For the most part, a lot of what we know about software development can be applied to different envi ...

  3. libcurl断点下载遇到的问题

    最近游戏把资源(图片.配置.lua)的加载.更新全部改了 ,加载其实还好,就是不走之前的zip解压方式.   以前的大体流程: 下载 –> 启动 –> 解压 –> 更新 –> ...

  4. 《“胡”说IC——菜鸟工程师完美进阶》

    <“胡”说IC——菜鸟工程师完美进阶> 基本信息 作者: 胡运旺 出版社:电子工业出版社 ISBN:9787121229107 上架时间:2014-5-15 出版日期:2014 年5月 开 ...

  5. 通过pycharm使用git

    前言 使用git+pycharm有一段时间了,算是稍有点心得,这边整理一下,可能有的方法不是最优,欢迎交流,可能还是习惯敲命令去使用git,不过其实pycharm已经帮忙做了很多了,我们可以不用记住那 ...

  6. 启明星请假系统appform：流程在线帮助

    启明星默认员工角色都是空的,对于空的角色,系统使用staff角色. 也就是,默认员工都是staff. 因此,你只要定义主管和经理角色即可. 例如:  staff-manage-hr operator

  7. 从零开始学C++之模板（三）：缺省模板参数（借助标准模板容器实现Stack模板）、成员模板、关键字typename

    一.缺省模板参数 回顾前面的文章,都是自己管理stack的内存,无论是链栈还是数组栈,能否借助标准模板容器管理呢?答案是肯定的,只需要多传一个模板参数即可,而且模板参数还可以是缺省的,如下: temp ...

  8. 阿里jstorm和storm区别

    转自:https://www.cnblogs.com/cn-leodream/p/6497277.html 看介绍文档貌似挺好:https://github.com/alibaba/jstorm   ...

  9. 7.7 服务远程暴露 - 订阅与通知（TODO）

    为了安全:服务启动的ip全部使用10.10.10.10 远程服务的暴露总体步骤: 将ref封装为invoker 将invoker转换为exporter 启动netty 注册服务到zookeeper 订 ...

  10. 如何查看Isilon节点的硬件信息？

    Isilon节点虽然是一个Linux,但是很多linux下常用的命令都没有,比如说看内存的.笔者经过试验,列出了一些可用的命令. 查看硬件状态 isi_hw_status 查看内存 sysctl hw ...