区域锐商企业cms设计教程

锐商企业CMS设计教程锐商软件

2013年5月28日

第一版

用PHOTOSHOP设计草图

我们首先用PHOTOSHOP设计一个网站的美工布局草图后面的设计将参照该草图进行。需要指出作为一款基于选项的CMS锐商企业CMS COMSHARP C MS并不能像传统的基于HTML模板的CMS那样实现完全自由的布局但其灵活强大的选项控制 已经能够实现您所能想到的绝大多数布局风格。

我们需要设计两幅草图一幅用于首页一幅用于内部栏目 比如产品页。

首页草图/ 内部产品页草图如下

用九宫格切图

锐商企业CMSCOMSHARP CMS 的页面布局原理是将页面分成几个区域 Logo区整页Header位置 主导航区 Banner区侧边栏导航区 内容区联系区整页Footer位置等每个区域有不同的风格选项不同位置选项可以自由配色设置尺寸背景纹理结合页面整体背景您可以搭配出不同的布局与美工框架。 锐商企业CMSCOMSHARP CMS的布局分两种模式

画布模式

将页面看作一个摆放在页面背景上的画布该画布分Logo区主导航区主菜单  Banner区面包屑导航区侧边栏导航区二级三级菜单  内容区页面工具条区联系区。该画布可以设置宽度位置偏移对齐方式边界宽度颜色及阴影。

详细内容请参阅《锐商企业CMS简明教程》的“整体布局/画布模式”一节。

网格模式

将整个页面用网格划分成多个网格区域 Logo区及其两边的延伸区主导航区主菜单及其两边延伸区 Banner区及其两边延伸区面包屑导航区及其两边延伸区 内容区及其两边延伸区页面工具条区及其两边延伸区联系区及其两边延伸区。每个区域及其两边延伸区都可以单独配色或设置背景纹理通过这些背景纹理图片您可以拼接出各种页面布局。比如通过在各个区域的两边延伸区设置阴影图片可以搭配出带边界阴影的页面风格。

详细内容请参阅《锐商企业CMS简明教程》的“整体布局/网格模式”一节。

本教程默认使用网格模式

使用网格模式将整个网站页面以九宫格的方式进行切割划分为以下区域及其左右延伸区域通过在不同区域及其左右延伸区域设置背景颜色背景纹理或背景图片可以实现页面的美工视觉布局

公司标志与系统菜单区域/以及其左右延伸区域 A1 A0 A2主导航区域/以及其左右延伸区域 B1 B0 B2Banner区域/以及其左右延伸区域 C1 C0 C2内容区域/以及其左右延伸区域 D1 D0 D2联系区域/以及其左右延伸区域 E1 E0 E2以首页草图为例 以下是以九宫格方式进行布局切图后的结果

根据切图 网站页面工作区的宽度为941px在“管理/系统选项/布局/页面布局选项”那里填写6将布局模式设定为网格布局然后在“管理/系统选项/布局/工作区宽度”那里填写941将工作区的宽度设定为941px。

所谓工作区就是A0,B0,C0,D0,E0区域 网站不同区域的内容将摆放在这些区域其左右两侧延伸区可用来放置背景图或背景纹理 以实现视觉布局。

公司标志与系统菜单区域

A1 |A0|A2

1 Logo与系统菜单区按目前设计 Logo是放在主导航条上的系统菜单区的内容只有“中文| ENGLISH” 语种切换菜单 以及 “LOGIN”登录按钮 Logo与系统菜单区将使用“管理/系统选项/公司标志区/ 自定义Lo go区内容”实现。

2 该区域背景为纯色#47a cf4可以在“管理/系统选项/公司标志区/公司标志和系统菜单区域背景颜色”这里设置也可以使用背景图片的形式设置我们选择后者。3 前面经过测量公司标志与系统菜单区域高度20px宽度使用整体工作区宽度941px。我们从设计稿中该区域取一块背景图做背景纹理因为该区域包括其左右延伸区域使用纯色背景我们取一个Pattern即可。注意背景纹理Pattern的尺寸理论上可以任意 因为设置背景纹理的时候可以选择在x/y方向上重复对于纯色背景 图片文件尺寸与图片物理尺寸之间关系不大我们取100x100。

4 公司标志与系统菜单区域设置了背景纹理图片后的效果