COMSHARP CMS 美工设计教程 - 锐商企业CMS.DOC

锐商企业CMS设计教程 锐商软件 2013年5月28日 第一版 用 PHOTOSHOP 设计草图 我们首先用 PHOTOSHOP 设计一个网站的美工布局草图，后面的设计将参照该草图进行。需要指出，作为一款基于选项的CMS，锐商企业CMS（COMSHARP CMS）并不能像传统的基于 HTML模板的CMS那样，实现完全自由的布局，但其灵活强大的选项控制，已经能够实现您所能想到的绝大多数布局风格。 我们需要设计两幅草图，一幅用于首页，一幅用于内部栏目（比如产品页）。 首页草图 / 内部产品页草图如下 用九宫格切图 锐商企业CMS（COMSHARP CMS） 的页面布局原理是将页面分成几个区域，Logo 区（整页 Header 位置），主导航区，Banner 区，侧边栏导航区，内容区，版权联系区（整页 Footer 位置）等，每个区域有不同的风格选项，不同位置选项，可以自由配色，设置尺寸，背景纹理，结合页面整体背景，您可以搭配出不同的布局与美工框架。 COMSHARP CMS） 的布局分两种模式： 画布模式 将页面看作一个摆放在页面背景上的画布，该画布分 Logo 区，主导航区（主菜单），Banner 区，面包屑导航区，侧边栏导航区（二级三级菜单），内容区，页面工具条区，版权联系区。该画布可以设置宽度，位置偏移，对齐方式，边界宽度，颜色及阴影。 选用画布模式，可到 “管理 / 系统选项 / 布局 / 页面布局选项”，选择 1，2，3，4，5。在 “管理 / 系统选项” 下，可以进入各个区域的参数设置页面，用来设置风格，颜色，尺寸，位置，字体等。在 “管理 / 背景纹理 - 画布模式”，您可以设置各个区域的背景图片及风格参数。网格模式 将整个页面用网格划分成多个网格区域，Logo 区及其两边的延伸区，主导航区（主菜单）及其两边延伸区，Banner 区及其两边延伸区，面包屑导航区及其两边延伸区，内容区及其两边延伸区，页面工具条区及其两边延伸区，版权联系区及其两边延伸区。每个区域及其两边延伸区 都可以单独配色或设置背景纹理，通过这些背景纹理图片，您可以拼接出各种页面布局。?比如，通过在各个区域的两边延伸区设置阴影图片，可以搭配出带边界阴 影的页面风格。 详细内容请参阅《锐商企业CMS简明教程》的“整体布局/网格模式”一节。 本教程默认使用网格模式 使用网格模式，将整个网站页面以九宫格的方式进行切割，划分为以下区域及其左右延伸区域，通过在不同区域（及其左右延伸区域）设置背景颜色，背景纹理，或背景图片，可以实现页面的美工视觉布局： 公司标志与系统菜单区域A1 A0 A2 主导航区域B1 B0 B2 Banner 区域 / 以及其左右延伸区域 C1 C0 C2 内容区域 / 以及其左右延伸区域 D1 D0 D2 版权联系区域 / 以及其左右延伸区域 E1 E0 E2 以首页草图为例，以下是以九宫格方式进行布局切图后的结果  根据切图，网站页面工作区的宽度为 941px，在“管理 / 系统选项 / 布局 / 页面布局选项”那里填写6，将布局模式设定为网格布局，然后，在“管理 / 系统选项 / 布局 / 工作区宽度” 那里填写941，将工作区的宽度设定为941px。 所谓工作区，就是 A0, B0, C0, D0, E0 区域，网站不同区域的内容将摆放在这些区域，其左右两侧延伸区可用来放置背景图或背景纹理，以实现视觉布局。 公司标志与系统菜单区域 A1 | A0 | A2 Logo 与系统菜单区，按目前设计，Logo 是放在主导航条上的，系统菜单区的内容只有“中文 | ENGLISH” 语种切换菜单，以及 “LOGIN”登录按钮，Logo 与系统菜单区将使用“管理 / 系统选项 / 公司标志区 / 自定义 Logo 区内容”实现。 该区域背景为纯色 #47acf4，可以在“管理 / 系统选项 / 公司标志区 / 公司标志和系统菜单区域背景颜色”这里设置，也可以使用背景图片的形式设置，我们选择后者。 前面经过测量，公司标志与系统菜单区域高度20px，宽度使用整体工作区宽度941px。我们从设计稿中该区域取一块背景图做背景纹理，因为该区域包括其左右延伸区域使用纯色背景，我们取一个 Pattern 即可。注意，背景纹理 Pattern 的尺寸理论上可以任意，因为设置背景纹理的时候，可以选择在 x/y 方向上重复，对于纯色背景，图片文件尺寸与图片物理尺寸之间关系不大，我们取 100x100。 公司标志与系统菜单区域设置了背景纹理图片后的效果： 可以看到，目前该区域显示的内容并不是我们设计草图中的样子，因为，默认情况下，该区域的内容是系统自动生成的，其中左侧的 Logo 是您在“管理 / 页面元素 / 站点 Logo”那里上