模板组件培训美编课件.ppt

1、青浦区政府翔宇青浦区政府翔宇CMS4.0模板制作培训模板制作培训方正电子数字媒体服务部方正电子数字媒体服务部2008-10-27 主要内容主要内容 模板简介模板简介 组件简介组件简介 登录方式登录方式 常用组件常用组件 模板管理模板管理模板简介模板简介 制作工具：制作工具：模板编辑使用模板编辑使用DreamweaverDreamweaver 2004 MX2004 MX或或DW 8DW 8来实现。来实现。首先安装首先安装DW 2004 MXDW 2004 MX或或DW 8DW 8网页制作工具，网页制作工具，再安装模板编辑客户端即可。再安装模板编辑客户端即可。编码：使用编码：使用UTF-8 UT

2、F-8 以上两个是同以上两个是同2.22.2系统使用的最大区别系统使用的最大区别组件简介组件简介 组件分为组件分为普通组件普通组件和和高级组件高级组件。A.普通组件：通过设置一些简单的参数就可以实现一些简单显示普通组件：通过设置一些简单的参数就可以实现一些简单显示效果。常用的有：效果。常用的有：1.当前位置当前位置 ClassPath 2.单个栏目单个栏目 SingleNode3.当前栏目信息当前栏目信息 CurrentNodeInfo4.标题列表标题列表 TitleList5.插入文件内容插入文件内容 InsertHtml6.上下篇组件上下篇组件 注意：没有文章内容组件注意：没有文章内容组件

3、 组件简介组件简介B.高级组件：相比普通组件，高级组件使用更为灵活，可以实现高级组件：相比普通组件，高级组件使用更为灵活，可以实现一些非常复杂的显示效果。常用的有：一些非常复杂的显示效果。常用的有：1.高级文章内容高级文章内容 Advcontent 2.高级标题列表高级标题列表 Advtitlelist 3.高级相关稿件高级相关稿件 AdvRelatedContentLinks 4.高级栏目列表高级栏目列表 AdvClassList 5.高级分页列表高级分页列表 AdvPageList 6.高级附件列表高级附件列表 AdvAttachmentList注意：没有图片列表组件，用高级标题列表或者分

4、页列表来实注意：没有图片列表组件，用高级标题列表或者分页列表来实现。现。上面几个常用的组件基本上能完成大部分模板设计的任务，上面几个常用的组件基本上能完成大部分模板设计的任务，满足模板设计人员的需求。满足模板设计人员的需求。登录方式登录方式 DWDW登录方式登录方式 http:/202.109.115.185:7001http:/202.109.115.185:7001 IEIE登录登录 http:/202.109.115.185:7001http:/202.109.115.185:7001DW登录方式登录方式1.打开DW2.点击登录默认选择“内容管理”输入登录地址http:/202.109.

5、115.185:7001(测试环境）输入用户名，口令然后登录提示登录成功DW登录方式登录方式1.1.网站模板新建网站模板新建2.2.网站模板下载网站模板下载3.3.网站模板上载网站模板上载4.4.网站模板合成网站模板合成DW登录方式登录方式 网站模板新建网站模板新建模板属性需要根据这个模板用于栏目页面还是文章页面来设定是“栏目模板”还是“文章模板”，单击“新建”按钮完成模板信息的添加或者编辑。DW登录方式登录方式网站模板下载网站模板下载可以输入模板名称或者模板可以输入模板名称或者模板id号号可以修改模板文件本地存放路径可以修改模板文件本地存放路径主要用于上传从服务器下载的模板新建模板后的上传优

6、点：两种方式的模板上传后，不用再优点：两种方式的模板上传后，不用再单独合成模板单独合成模板DW登录方式登录方式网站模板合成网站模板合成IE:登录 http:/192.168.1.108:7001http:/192.168.1.108:7001翔宇内容管理系统通用类组件翔宇内容管理系统通用类组件简单组件简单组件 当前位置（当前位置（ClassPath）：当前页的导航信息当前页的导航信息。如：。如：新浪首页新浪首页 财经纵横财经纵横 消费消费 正文。正文。样式表框：在样式表框中的各个输入框样式表框：在样式表框中的各个输入框中输入相应的样式名称，修饰相应内容中输入相应的样式名称，修饰相应内容的显示效

7、果。的显示效果。分割标记：输入不同栏目之间的分割符分割标记：输入不同栏目之间的分割符号，如上例中的号，如上例中的“”。目标框架：目标框架：空行：表示由系统默认空行：表示由系统默认_blank_blank：表示打开新浏览窗口表示打开新浏览窗口_parent_parent：表示打开父浏览窗口表示打开父浏览窗口_self_self：表示打开自身浏览窗口表示打开自身浏览窗口_top_top：表示打开最上层窗口表示打开最上层窗口 简单组件简单组件需要和翔宇栏目管理需要和翔宇栏目管理扩展信息扩展信息配合使用配合使用简单组件简单组件 单个栏目信息（单个栏目信息（SingleNodeSingleNode）：显

8、示某个指定的栏目显示某个指定的栏目信息，当没有指定栏目信息，当没有指定栏目IDID时，就相当与是当前栏目信时，就相当与是当前栏目信息组件。息组件。栏目栏目IDID：指定要显示的栏目的指定要显示的栏目的IDID号。号。显示内容：显示内容：显示带链接的栏目名字：显示栏目名显示带链接的栏目名字：显示栏目名字，点击栏目名字到达该栏目网页。字，点击栏目名字到达该栏目网页。显示带链接的说明图片：显示栏目显示带链接的说明图片：显示栏目LOGOLOGO图，点击该图显示该栏目网页图，点击该图显示该栏目网页显示带链接的图标：显示栏目图标，显示带链接的图标：显示栏目图标，通过点击该图显示该栏目下的内容。通过点击该图

9、显示该栏目下的内容。简单组件简单组件 当前栏目信息（当前栏目信息（CurrentNodeInfoCurrentNodeInfo）：该组件用于显示该组件用于显示当前页面相对应的栏目的信息当前页面相对应的栏目的信息。简单组件简单组件 上下篇稿件上下篇稿件：在文章页面中显示上，下篇稿件在文章页面中显示上，下篇稿件高级组件高级组件 高级标题列表高级标题列表：显示满足条件的稿件，实现多样化的：显示满足条件的稿件，实现多样化的标题列表效果标题列表效果 。高级组件高级组件 稿件属性：指定显示什么属性的稿件标题。系统对于稿件属性：指定显示什么属性的稿件标题。系统对于一个栏目（栏目）下的稿件分成三类：头条、图片

10、、一个栏目（栏目）下的稿件分成三类：头条、图片、一般；使用这个组件可以显示一类或全部的新闻。文一般；使用这个组件可以显示一类或全部的新闻。文章属性在源稿中心签发时指定，或者在发布中心中设章属性在源稿中心签发时指定，或者在发布中心中设置稿件属性。置稿件属性。指定栏目指定栏目ID：指定显示哪个栏目中的稿件。当输入指定显示哪个栏目中的稿件。当输入ID号时，该模板就显示该号时，该模板就显示该ID号对应栏目中的稿件；如果号对应栏目中的稿件；如果没有输入没有输入ID号，显示当前栏目的稿件。号，显示当前栏目的稿件。总条数：指定该模板中显示的稿件数。总条数：指定该模板中显示的稿件数。是否显示伪码：选中后，会显

11、示预览效果（没有实际是否显示伪码：选中后，会显示预览效果（没有实际稿件）。稿件）。高级组件高级组件 天数间隔：设定显示几天内的稿件。输入非零数字时，天数间隔：设定显示几天内的稿件。输入非零数字时，下面的推算方式变为可选。当总条数，天数间隔为下面的推算方式变为可选。当总条数，天数间隔为0时，时，表示它们对栏目下的稿件数的限制不起作用。表示它们对栏目下的稿件数的限制不起作用。推算方式：推算方式：高级组件高级组件当前时间：是指系统现在的真实时间。当前时间：是指系统现在的真实时间。最新时间：指定栏目下所有稿件中最新稿件的发布时间。最新时间：指定栏目下所有稿件中最新稿件的发布时间。精确到秒：指精确到秒：

12、指“天数天数”这个时间跨度是按秒来计算的。这个时间跨度是按秒来计算的。精确到天：指精确到天：指“天数天数”这个时间跨度是按天来计算的。这个时间跨度是按天来计算的。高级组件高级组件 置标：又叫占位标记，是有层次关系，置标：又叫占位标记，是有层次关系，通常有实体置标，属性置标，循环置标。通常有实体置标，属性置标，循环置标。实体置标：如稿件实体置标：如稿件，由两部分组成：开由两部分组成：开始标记，结束标记。始标记，结束标记。属性置标：如标题属性置标：如标题TitlePhTitlePh，由由三部分组成三部分组成：开：开始标记始标记、占位符，结束标占位符，结束标记。记。循环置标：只有一个循环置标：只有一

13、个Repeat Begin=0 End=0 ，有，有两部分组成：两部分组成：开开始始标记，结束标记。标记，结束标记。高级组件高级组件 置标编辑：位于页面左边的最大的输入框，可以置标编辑：位于页面左边的最大的输入框，可以写任意的写任意的HTMLHTML代码，这些代码和系统专用的置标代码，这些代码和系统专用的置标代码一起来控制页面的显示效果。在编写完成这代码一起来控制页面的显示效果。在编写完成这些混合代码以后，您可以点击些混合代码以后，您可以点击“语法检查语法检查”按钮，按钮，它可以帮助您查到并且定位出发生的错误。双击它可以帮助您查到并且定位出发生的错误。双击右边的专用置标名字，这个置标就会被增加

14、到编右边的专用置标名字，这个置标就会被增加到编辑框中光标所在的位置，如果在编辑框中选中一辑框中光标所在的位置，如果在编辑框中选中一段文字后再双击我们的置标，那么系统会用置标段文字后再双击我们的置标，那么系统会用置标把选中的文字包括起来。把选中的文字包括起来。高级组件高级组件 置标编辑：如标题置标编辑：如标题TitlePhTitlePh，开开始标始标记记、占位符，结束标记作为占位符，结束标记作为一个整体来处理，您不能一个整体来处理，您不能改动字符，大小写不区分，可以改。位置不能调整，改动字符，大小写不区分，可以改。位置不能调整，在开始标记和在开始标记和占位符之间，占位符和占位符之间，占位符和结束

15、标记之间、结束标记之间、您可以填写任意的您可以填写任意的HTMLHTML置标、文字，系统原样输出。置标、文字，系统原样输出。系统处理后，开始标记和结束标记不会出现在结果页系统处理后，开始标记和结束标记不会出现在结果页面上，占位符会被实际的内容替换。如：面上，占位符会被实际的内容替换。如：【TitlePhTitlePh】，实际标题就显示为：实际标题就显示为：【穷人银穷人银行何以执行富人政策行何以执行富人政策】高级组件高级组件 置标编辑：置标编辑：一个一个最通用的置标，起循环作用，可以嵌套，是一个使用最通用的置标，起循环作用，可以嵌套，是一个使用相对自由的置标。要特别注意的是它的循环次数，它相对自

16、由的置标。要特别注意的是它的循环次数，它不是指定循环多少次就多少次，它还会受到数据库中不是指定循环多少次就多少次，它还会受到数据库中实际符合条件（满足稿件属性、天数、指定栏目实际符合条件（满足稿件属性、天数、指定栏目IDID等等条件）的记录数的限制。满足稿件属性、天数、指定条件）的记录数的限制。满足稿件属性、天数、指定栏目栏目IDID等条件，像等条件，像RepeatRepeat这样带属性这样带属性()的置标的置标,在双击时会弹出对话框让您设置，设在双击时会弹出对话框让您设置，设置确定后还需要修改，只能按照相应的格式修改。置确定后还需要修改，只能按照相应的格式修改。高级组件高级组件 置标编辑：文

17、章链接置标编辑：文章链接，给，给相相应的稿件属性加上链接。如给标题加链接：应的稿件属性加上链接。如给标题加链接：TitlePhTitlePh/Title。在在a 中中可以给链接加属性，可以给链接加属性，如：如：target=_blank其它链接如：来源链接，当前栏目链接等使用方其它链接如：来源链接，当前栏目链接等使用方法一致。法一致。高级组件高级组件 置标编辑：标题图片置标编辑：标题图片 border=0，显显示稿件的标题图片。标题图片在编辑器中设定。示稿件的标题图片。标题图片在编辑器中设定。border=0中中可以加可以加相关属性。如：相关属性。如：”。高级组件高级组件 置标编辑：发布时间置

18、标编辑：发布时间点击发布时间后，弹出属性窗口，点击发布时间后，弹出属性窗口，可以选择属性。可以选择属性。=0 YearPh-MonthPh-YearPh-MonthPh-DayPhDayPh HourPh:MinutePh:SecondPhHourPh:MinutePh:SecondPh WeekPhWeekPh/占位符的顺序可以更改，占位符占位符的顺序可以更改，占位符之间可以添加字符。之间可以添加字符。如：如：MonthPhMonthPh月月DayPhDayPh日日YearPhYearPh年年/高级组件高级组件 置标编辑：循环置标编辑：循环 可以省略，一般为了达到每条指定的效果可以省略，一般

19、为了达到每条指定的效果 。TitlePhTitlePh AuthorPhAuthorPh 注意：注意：repeatrepeat和和articlearticle之间不能有其它代码之间不能有其它代码高级组件高级组件 高级文章内容（高级文章内容（AdvContentAdvContent）：本组件通过组合稿件子项来控制文章内容页的本组件通过组合稿件子项来控制文章内容页的显示。内容的子项与标题的子项是一样的，都显示。内容的子项与标题的子项是一样的，都是一篇稿件所具有的属性。因此，写法与是一篇稿件所具有的属性。因此，写法与AdvTitleListAdvTitleList的写法是一样的。区别只是本组的写法是

20、一样的。区别只是本组件中不处理件中不处理标记，只是显示当前稿件标记，只是显示当前稿件的各个子项。的各个子项。高级组件 高级文章内容组件支持稿件的分页显示。分页高级文章内容组件支持稿件的分页显示。分页操作必须在编辑器中设置，这里只是设置分页操作必须在编辑器中设置，这里只是设置分页的显示样式。的显示样式。前缀，后缀：设置页码前后显示的字符。如：前缀，后缀：设置页码前后显示的字符。如：第第2 2页：页：“第第”就是前缀，就是前缀，“页页”就是后缀。就是后缀。首页，尾页，上页，下页：设置首页，尾页，上页，下页：设置这四个翻页链这四个翻页链接的字符。接的字符。页码样式页码样式 翻页样式：控制页码或翻页控

21、制的翻页样式：控制页码或翻页控制的字符的样式表名称。字符的样式表名称。高级组件高级组件 高级相关稿件列表高级相关稿件列表：用在稿件模板中，用于显用在稿件模板中，用于显示与本模板显示稿件的相关稿件。其使用方法示与本模板显示稿件的相关稿件。其使用方法与高级标题列表（与高级标题列表（AdvTitleListAdvTitleList）组件一样。组件一样。它不需要设定显示哪些相关稿件。具体显示那它不需要设定显示哪些相关稿件。具体显示那些相关稿件，由编辑器写稿时指定。些相关稿件，由编辑器写稿时指定。高级组件高级组件 高级栏目列表高级栏目列表：用来显示一个栏目列表，可以：用来显示一个栏目列表，可以扩展到显示

22、标题列表、文章内容。扩展到显示标题列表、文章内容。高级组件高级组件 这个栏目有两种方式来确定，一种就是通过这个栏目有两种方式来确定，一种就是通过“栏目栏目ID”ID”项的值来直接指定，就是指定的值项的值来直接指定，就是指定的值所对应的栏目；另外一种就是在没有指定所对应的栏目；另外一种就是在没有指定“栏栏目目ID”ID”项的值的情况下，通过包含这个组件的项的值的情况下，通过包含这个组件的模版用在哪个栏目来确定，这个栏目就和使用模版用在哪个栏目来确定，这个栏目就和使用“栏目栏目ID”ID”指定的栏目结果是一样的；使用后指定的栏目结果是一样的；使用后一种方式的好处就是一个模版可以用在不同的一种方式的

23、好处就是一个模版可以用在不同的栏目上显示不同的栏目内容。栏目上显示不同的栏目内容。高级组件高级组件其中各项的含义是其中各项的含义是 ：a.a.总是显示改栏目，即一个栏目无论在何种情总是显示改栏目，即一个栏目无论在何种情况下都会被显示出来。这一项为默认选项。况下都会被显示出来。这一项为默认选项。b.b.栏目属性栏目属性“是否显示文章列表是否显示文章列表”选中才显示，选中才显示，在栏目管理的扩展属性中，选中显示在导航栏在栏目管理的扩展属性中，选中显示在导航栏高级组件高级组件c.c.栏目当天有文章才显示栏目当天有文章才显示d.d.以上两点满足才显示以上两点满足才显示高级组件高级组件 高级分页标题列表

24、高级分页标题列表：本组件以分页方式显示稿本组件以分页方式显示稿件的标题列表件的标题列表。高级组件高级组件 1 1、图片、头条、普通，用来控制显示什么属、图片、头条、普通，用来控制显示什么属性的稿件性的稿件 2 2、指定栏目、指定栏目IDID，用来设定显示哪个栏目的稿，用来设定显示哪个栏目的稿件，与栏目类型结合，可以显示多种栏目类型件，与栏目类型结合，可以显示多种栏目类型的稿件，包括本栏目新闻、父栏目新闻、根栏的稿件，包括本栏目新闻、父栏目新闻、根栏目新闻。目新闻。3 3、页条数，表示一页显示多少条、页条数，表示一页显示多少条 4 4、总页数，指这个栏目下有多少文章要分页、总页数，指这个栏目下有

25、多少文章要分页显示。显示。高级组件高级组件 5 5、翻页外观，设定翻页按钮的样式、翻页外观，设定翻页按钮的样式 6 6、显示首尾页，在翻页按钮中显示首尾页按、显示首尾页，在翻页按钮中显示首尾页按钮钮 7 7、稿件的各个属性必须使用、稿件的各个属性必须使用ArticleArticle括起来括起来 8 8、RepeatRepeat与与ArticleArticle之间不能有其他的代码，之间不能有其他的代码，有也将不起作用有也将不起作用 高级组件高级组件http:/202.109.115.185:7001/servlet/PagePreviewServlet?siteid=1&nodeid=8932&

26、type=0 TitlePh 注意注意 1.1.另外一点需要注意的是，插入另外一点需要注意的是，插入jsjs代码时，要代码时，要指定其编码为指定其编码为charsetcharset=gb2312=gb2312 script=images/2005cons/left.js2.2.目前不支持双击打开组件编辑窗口目前不支持双击打开组件编辑窗口 3.3.如果要查看组件效果，组件编辑框中的如果要查看组件效果，组件编辑框中的“是是否显示伪码否显示伪码”选项必需钩上选项必需钩上 模板管理模板管理模板编号或id号模板管理要点模板管理要点 1.1.模板属性只有两种栏目模板和文章模板模板属性只有两种栏目模板和文章

27、模板 2.2.模板存放规则，由系统分配模板编号，上传模板存放规则，由系统分配模板编号，上传到服务器后文件名称自动变成为到服务器后文件名称自动变成为“模板模板idid号号.htmhtm”,”,外联文件存放到外联文件存放到“模板模板idid号号.files”.files”3.inserthtml3.inserthtml组件需要上传的头尾文件等，组件需要上传的头尾文件等，dwdw组件不能上传，会有单独的组件不能上传，会有单独的ftpftp进行上传。进行上传。栏目管理新建栏目步骤新建栏目步骤 1.1.栏目类型基本选用电子新闻。栏目类型基本选用电子新闻。2.2.选择对应的模板选择对应的模板 3.3.套用发布规则，发布规则现在按电子新闻和套用发布规则，发布规则现在按电子新闻和专题来区分。专题来区分。专题规则专题规则 http:/ 电子新闻规则电子新闻规则 http:/ 4.4.预览检查，然后发布。预览检查，然后发布。小问题 1.翔宇翔宇4.0使用什么编码使用什么编码 2.新组件中，不支持那些组件，只需要列新组件中，不支持那些组件，只需要列出两个出两个.3.如何查看组件伪码如何查看组件伪码培训到此结束，谢谢！培训到此结束，谢谢！