2-7版可视化模板制作流程.docVIP

可视化模板制作教程 制作流程 制作模板主题 创建新的主题文件夹 将相关资源文件拷贝到主题文件夹下 重建主题索引 创建模板 选择主题样式 布局 添加部件 修改并保存部件 使用新部件 微调样式 发布模板 具体步骤 制作模板主题 过程略，要求这个过程得到的产物有：整个系统的全局样式表，网站所有的资源文件，模板缩略图。如下图所示： 创建新的主题文件夹 在/Widgets/Themes/目录下创建新的主题文件夹theme2,如下图所示： 将相关资源文件夹拷贝到theme2文件夹下，并确保网站的样式表名称为Style.css，如果样式表名称不为这个名称，需要将其修改为这个名称；同时，该样式表的文件头必须包含如下的注释说明： /************************************************************* * name:theme2 * img:/widgets/Themes/theme2/face.jpg * label:风格样式二 *************************************************************/ 重建主题索引。 登陆系统后台，点击“模板”菜单，选择“编辑模板”栏目：如下图所示： 在右侧的按钮中，点击“重建主题索引”按钮，系统会自动将新的样式主题添加到系统主题样式中，如下图所示： 在模板编辑中新建模板。 创建步骤为：登陆后台-》模板-》编辑模板-》新建可视化模板-》填写相关参数-》进入模板编辑界面。 设置当前主题为“风格样式二”(theme2) 进行控件布局 单击We7部件工具箱上的布局按钮，进入页面布局编辑状态，我们把布局设置如下结构： 头部 新闻列表1 新闻列表2 尾部 在可视化模板的布局界面中将这个布局拖拽出来。 拖拽具有我们需要功能的部件到模板中 按照布局规划将网页头部，网页尾部，新闻列表拖放到指定位置。 修改部件并另存为新部件 这儿以修改头部为例，点击网站头的编辑，打开部件编辑器。 在编辑器内按照静态网页的头部布局修改我们的模板。 这儿要特别注意的是不要删除部件顶部 %@ Control Language=C# AutoEventWireup=true CodeFile=Header.cs Inherits=We7.CMS.Web.Widgets.Header % 这段内容 以及 script type=text/C# runat=server/script标签之间的内容。 修改过后的内容如下： 在这儿需要完成三项工作。第一是定义新部件的名称；第二是修改部件内容；第三是将部件别存为新部件。 使用我们新创建的部件。 要想使用新部件有两种方法，第一是刷新模板后选择我们新定义的部件外观；第二新是将这个部件删除后再拖拽这个部件到模板中，并选择这我们新定义的部件外观。 切换后显示为我们新修改的部件。 对于剩下的部件我们按照网站头的方式继续进行修改。 微调样式 对于一些我们原先没有在Style.css定义的样式，我们可以在编辑模板的时候补充一些自定义样式。 12、保存并发布模板。 好了，我们的模板修改完毕了，现在就可以发布我们的模板了。 修改后的头部部件 点击发布，我们的模板就可以应用了