可视化制作流程

1、可视化模板制作教程制作流程1、制作模板主题2、创建新的主题文件夹3、将相关资源文件拷贝到主题文件夹下4、重建主题索引5、创建模板6、选择主题样式7、布局8、添加部件9、修改并保存部件使用新部件微调样式发布模板具体步骤1、制作模板主题过程略，要求这个过程得到的产物有：整个系统的全局样式表，网站所有的资源文件，模板缩略图。如下图所示：阕片文件夹Efacejpg一国览图片J一群就样式去件2、创建新的主题文件夹在/Widgets/Themes/目录下创建新的主题文件夹theme2,如下图所示:Widgets.ScriptsjThemes，.themel新包的主撵成文件夹WidgetcoIlection

2、3、将相关资源文件夹拷贝到theme2文件夹下，并确保网站的样式表名称为Style.css,如果样式表名称不为这个名称，需要将其修改为这个名称；同时，该样式表的文件头必须包含如下的注释说明：/*name:theme2*img:/widgets/Themes/theme2/face.jpg*/*label:风格样式*L.jthemedicon-gjficonLgifican3.gifiton4,gificon5.gifi匚口nGgificonJ.gtfoJInd&K.hitnnl=AJSyte.css4、重建主题索引登陆系统后台，点击“模板”菜单，选择“编辑模板”栏目：如下图所示:域栏目usmj

3、sufe.选择模板.C5曳扁辑所插件在右侧的按钮中，点击“重建主题索引”按钮，系统会自动将新的样式主题添加到系统主题样式中，如下图所示：重建主5、在模板编辑中新建模板。创建步骤为：登陆后台-模板-编辑模板-新建可视化模板-填写相关参数-进入模板编辑界面。6、设置当前主题为“风格样式二（theme2）O发布J08短页面背景J自定义样虱J保存主题歌消I7、进行控件布局单击We7部件工具箱上的布局按钮，进入页面布局编辑状态，我们把布局设置如下结构：头部新闻列表1|新闻列表2尾部在可视化模板的布局界面中将这个布局拖拽出来8、拖拽具有我们需要功能的部件到模板中按照布局规划将网页头部，网页尾部，新闻列表拖

4、放到指定位置分期IKMffi笈，,电Westhere而即即门Um*uhs.加枪wmq型零J击母空二脸f=eare丁*nF=b=rhreh，shB:b:assbrhsrsrph=h=ThQbh=FhqJEU*川ittrI:IJEW索MtSWEHlBI；例#弛*JW山餐间二,财加1闻：时用时.：*第/熊蜀rRWL：.MG步国；!*病才前9，*wm:，乘避1却-副卡闻;*HE金画：峭丽r.：fif相i电司，到胃浙*g笛闻力*SMSWiih：号融,eracm.泰M书邺仁自宦宜祥式9、修改部件并另存为新部件这儿以修改头部为例，点击网站头的编辑，打开部件编辑器Westfriafne 西音的测试新闻:刑讯新

5、闻则试新同二则忒新间则试祈同三驯过音闻:则讯新闻E贿陶闻*鼬时新闻通/ /搜索地址/ Ptaraoflttr Tit一控/导航地址Typ*=*rStzrinff public s:rinf Sarcr.Page*alt= %=SiteaDe * Erc = %=Logo?athdiv cla- eb_t zo.?div cla&= yeb .tit ，a tlass=re id- 1 ojinAnchor href= javaQ cla5S=*T35* hrcf=*javascript:vcid(O)* s1国国5二wap* hrefjavascript;void(0), 部件徜云-MoziI

6、#Fi-efcjQhttpj/1ocalhoi26(X)/Ade；n/VisualTomplata/MdgotEditor/WidControlLanguage=AitsEntWirtup=-true*CodeInkertW=7-QiS.Veb.lidg&七3.Meader_ozcSuexyQuic.kscriptlype-lett，=rcinaL=server.CcntrolDescriplion.”帝二口目口带携索带庚桂导航(头)*)trinjWe+aData保存另存为在编辑器内按照静态网页的头部布局修改我们的模板。这儿要特别注意的是不要删除部件顶部这段内容以及scripttype=tex

7、t/C#runat=server标签之间的内容。修改过后的内容如下:10、sumnnaryuript Type=te)ct/C# runat=sei vei 口口打01比乳前加口自定义的网站头”)1 string Meta Data;，、一自定义部件名称Pa ram或匕加=*搜索导肮蝴RT/ *i -丁二&而g)SearciPage = Search Ba rp;一img src=% = LogoPath a!t= /dlvhl A欢迎来型k%=gt?N曰小启%A/hl孑盲正义头部内吉. - -j保存另存为将部件另存为轴部件在这儿需要完成三项工作。第一是定义新部件的名称；第二是修改部件内容；第

8、三 是将部件别存为新部件。使用我们新创建的部件。要想使用新部件有两种方法，第一是刷新模板后选择我们新定义的部件外观；第二新是将这个部件删除后再拖拽这个部件到模板中，并选择这我们新定义的部件外观11、属性分的删除编辑复;Z网站浮动菜单显示两级网站质部茉单显示两缀芾“产帚搜索芾快拽导肮（头）富1|自室定的网站头副栏导航控件热门标签尾部右楮何楼切换后显示为我们新修改的部件。嶷性抬眼，除里看更制属性WestEngine西印印/I欢迎来到。了对于剩下的部件我们按照网站头的方式继续进行修改。微调样式对于一些我们原先没有在Style.css定义的样式，我们可以在编辑模板的时候补充一些自定义样式。EtM片 4

9、L04-21JL04-ilR4F lO4-31J 104-21103LO-i-Il 0r21J L01-21保存 与隼文件：/Widgets/Skinadmin/VisiiftFrempIate/VKuafDesignJ择式幅辑翥-Vlosills-Firx国屐曲可墨委素手上始|http;/Iqthqft;2500/Admin/VuaITempli/c这儿是用户自定义的样式表tareaNewwidtn:3G0px;Irmargin-top:LOpx;.areaNewh3Mheight:30px;Iine-height30p)c;b机kgound:uXimdgubmfont-size:12px;1.2color:/fff;,position:relative;.areaN&wh3span(bdckground:urldmges/side17display:inline-block;padding-lGftSSpx;)/(.areaN&wh3pm：./*background:url(images/sipadding-right:35px;_