栅格系统和模块化提高专题制作的效率

文章描述：专题自动化初探.

随着公司各业务的不断壮大，活动如潮，专题似海。刚发育的CUED如何才能健康成长？专题自动化这个概念就自然而然冒出脑门。

要实现这个复杂的系统也必须一步步来，初期我们希望通过栅格系统和模块化，提高效率，节约制作成本。

一、960栅格

1.什么是栅格系统？

栅格系统英文为“grid systems”，是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁。

2.为什么是960px？

比较直观的一种说法：苹果电脑1024 x 768 的分辨率下，Firefox窗体的大小约为 974×650。减掉左右两边7px的边框，网页的实际大小为上图中的红色部分，高宽为 960×650。

来看几个运用栅格化的实例：

旧版迅雷首页和频道页应用上栅格系统后，可以看出还是存在问题，未来还有改进的空间。

[1] [2]  下一页

时间： 2024-04-25 16:55:37

栅格系统和模块化提高专题制作的效率的相关文章

通过栅格系统和模块化 提高专题制作的效率

随着公司各业务的不断壮大,活动如潮,专题似海.刚发育的CUED如何才能健康成长?专题自动化这个概念就自然而然冒出脑门. 要实现这个复杂的系统也必须一步步来,初期我们希望通过栅格系统和模块化,提高效率,节约制作成本. 一.960栅格 1.什么是栅格系统? 栅格系统英文为"grid systems",是一种平面设计的方法与风格.运用固定的格子设计版面布局,其风格工整简洁. 2.为什么是960px? 比较直观的一种说法:苹果电脑1024 x 768 的分辨率下,Firefox窗体的大小约为

系统完整的营销专题制作实例经验

最近为SaaS产品做了一套营销专题,无论是从框架.内容.还是设计.品牌形象都算是一套较为系统和完整的专题.完成后总结了一些个人的观点,仅供参考: 1.这次给到设计师的规划需求,包括文档.线框图的都是相对完整.系统的,需求变更也相对较少,因此对于设计师的工作来说是顺水推舟. 2.设计师一旦接到这种变更不太频繁的项目,找准了定位.方向后,确定风格.颜色便是轻车熟路. 3.做系列专题,找准定位.确定风格非常重要,他直接影响到后面诸多设计的进行.这次的定位很明确--中小企业商务人士(除了有一款针对个人理

栅格系统延续美学

栅格系统应用于设计领域已经至少50年了.栅格化让眼睛浏览信息更加愉悦.从报纸.杂志,到手机界面,栅格系统全面渗透到各种信息传达的界面当中.我们从一个故事开始栅格系统探索之旅吧! 栅格系统的诞生 1692年,新登基的法国国王路易十四感到法国的印刷水平强差人意,因此命令成立一个管理印刷的皇家特别委员会.他们的首要任务是设计出科学的.合理的,重视功能性的新字体. 委员会由数学家尼古拉斯加宗(Nicolas Jaugeon)担任领导,他们以罗马体为基础,采用方格为设计依据,每个字体方格分为64个基本方各

Bootstrap每天必学之栅格系统（布局）_javascript技巧

 1.栅格系统(布局)Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系统叫做布局.它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中.下面就简单介绍一下Bootstrap栅格系统的工作原理: 网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),

UI界面设计之美:栅格系统

文章描述:栅格系统延续美学. 栅格系统应用于设计领域已经至少50年了.栅格化让眼睛浏览信息更加愉悦.从报纸.杂志,到手机界面,栅格系统全面渗透到各种信息传达的界面当中.我们从一个故事开始栅格系统探索之旅吧! 栅格系统的诞生 1692年,新登基的法国国王路易十四感到法国的印刷水平强差人意,因此命令成立一个管理印刷的皇家特别委员会.他们的首要任务是设计出科学的.合理的,重视功能性的新字体. 委员会由数学家尼古拉斯加宗(Nicolas Jaugeon)担任领导,他们以罗马体为基础,采用方格为设计依据,

20款素质过硬的响应式CSS栅格系统

  栅格系统 这种东西和许多同类工具/素材一样,"系统"二字让它看起来无比高大上,而实际上大多数的栅格系统 只是一系列纵横交错的细线构成.很简单?看起来确实如此.不过它之所以被冠以"系统"二字,主要还是因为这些线条所涉及的内容管理方式.梳理页面结构的功能.栅格系统 的运用会促使你的网页内容逐步走向规则化,实现一致性的设计.下面的20款CSS栅格 可以更好地运用到网页开发实践中去,赋予你的网站以调理性. 1. ChewingGrid ChewingGrid 是一款卡片

MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统

原文:MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统 文章来源: Slark.NET-博客园http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-grid.html  上一节:ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用 下一节:ASP.NET MVC5 + EF6 + Bootstrap3 (8) View中的HtmlHelper用法大全(上)  源码下载:点我

Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统_javascript技巧

栅格系统英文为"grid systems",也有人翻译为"网格系统",运用固定的格子设计版面布局,其风格工整简洁,在二战后大受欢迎,已成为今日出版物设计的主流风格之一. 1692年,新登基的法国国王路易十四感到法国的印刷水平差强人意,因此命令成立一个管理印刷的皇家特别委员会.他们的首要任务是设计出科学的.合理的, 重视功能性的新字体.委员会由数学家尼古拉斯加宗(Nicolas Jaugeon)担任领导,他们以罗马体为基础,采用方格为设计依据,每个字体方格分为64个基

Bootstrap布局之栅格系统详解_javascript技巧

前些天学习了bootstrap,把其中的栅格系统整理出来,如有错误,欢迎指正. 概要,栅格系统针对pc,pad,移动端开发出响应式web页面,根据不同屏幕分辨率有针对不同的解决方法. (0.1, 屏幕设备尺寸大于1200px 选择col-lg  (0.2. 屏幕设备尺寸在970px到1200px 选择col-md  (0.3. 屏幕设备尺寸在768px到970px 选择col-sm  (0.4. 屏幕设备尺寸小于768px 选择col-xs 1.栅格系统把页面分为12栏(最多12栏),如下: