模板組件培訓(xùn)美編課件

青浦區(qū)政府翔宇CMS4.0

模板制作培訓(xùn)方正電子數(shù)字媒體服務(wù)部2008-10-27青浦區(qū)政府翔宇CMS4.0

模板制作培訓(xùn)方正電子數(shù)字媒體服務(wù)主要內(nèi)容模板簡(jiǎn)介組件簡(jiǎn)介登錄方式常用組件模板管理主要內(nèi)容模板簡(jiǎn)介模板簡(jiǎn)介制作工具：模板編輯使用Dreamweaver2004MX或DW8來實(shí)現(xiàn)。首先安裝DW2004MX或DW8網(wǎng)頁制作工具，再安裝模板編輯客戶端即可。編碼：使用UTF-8

以上兩個(gè)是同2.2系統(tǒng)使用的最大區(qū)別模板簡(jiǎn)介制作工具：模板編輯使用Dreamweaver20組件簡(jiǎn)介組件分為普通組件和高級(jí)組件。

A.普通組件：通過設(shè)置一些簡(jiǎn)單的參數(shù)就可以實(shí)現(xiàn)一些簡(jiǎn)單顯示效果。常用的有：

1.當(dāng)前位置ClassPath

2.單個(gè)欄目SingleNode 3.當(dāng)前欄目信息CurrentNodeInfo

4.標(biāo)題列表TitleList 5.插入文件內(nèi)容InsertHtml 6.上下篇組件

注意：沒有文章內(nèi)容組件組件簡(jiǎn)介組件分為普通組件和高級(jí)組件。組件簡(jiǎn)介B.高級(jí)組件：相比普通組件，高級(jí)組件使用更為靈活，可以實(shí)現(xiàn)一些非常復(fù)雜的顯示效果。常用的有：1.高級(jí)文章內(nèi)容Advcontent2.高級(jí)標(biāo)題列表Advtitlelist3.高級(jí)相關(guān)稿件AdvRelatedContentLinks4.高級(jí)欄目列表AdvClassList5.高級(jí)分頁列表AdvPageList6.高級(jí)附件列表AdvAttachmentList注意：沒有圖片列表組件，用高級(jí)標(biāo)題列表或者分頁列表來實(shí)現(xiàn)。上面幾個(gè)常用的組件基本上能完成大部分模板設(shè)計(jì)的任務(wù)，滿足模板設(shè)計(jì)人員的需求。組件簡(jiǎn)介B.高級(jí)組件：相比普通組件，高級(jí)組件使用更為靈活，可登錄方式DW登錄方式85:7001IE登錄85:7001登錄方式DW登錄方式DW登錄方式1.打開DW2.點(diǎn)擊登錄DW登錄方式1.打開DW默認(rèn)選擇“內(nèi)容管理”輸入登錄地址85:7001(測(cè)試環(huán)境）輸入用戶名，口令然后登錄默認(rèn)選擇“內(nèi)容管理”輸入登錄地址輸入用戶名，口令然后登錄提示登錄成功提示登錄成功DW登錄方式1.網(wǎng)站模板新建2.網(wǎng)站模板下載3.網(wǎng)站模板上載4.網(wǎng)站模板合成DW登錄方式1.網(wǎng)站模板新建DW登錄方式

網(wǎng)站模板新建模板屬性需要根據(jù)這個(gè)模板用于欄目頁面還是文章頁面來設(shè)定是“欄目模板”還是“文章模板”，單擊“新建”按鈕完成模板信息的添加或者編輯。DW登錄方式網(wǎng)站模板新建DW登錄方式網(wǎng)站模板下載可以輸入模板名稱或者模板id號(hào)可以修改模板文件本地存放路徑DW登錄方式網(wǎng)站模板下載可以輸入模板名稱或者模板id號(hào)可以修主要用于上傳從服務(wù)器下載的模板新建模板后的上傳優(yōu)點(diǎn)：兩種方式的模板上傳后，不用再單獨(dú)合成模板主要用于上傳從服務(wù)器下載的模板新建模板后的上傳優(yōu)點(diǎn)：兩種方式DW登錄方式網(wǎng)站模板合成DW登錄方式網(wǎng)站模板合成IE:登錄08:7001IE:登錄翔宇內(nèi)容管理系統(tǒng)通用類組件翔宇內(nèi)容管理系統(tǒng)通用類組件簡(jiǎn)單組件當(dāng)前位置（ClassPath）：當(dāng)前頁的導(dǎo)航信息。如：新浪首頁>財(cái)經(jīng)縱橫>消費(fèi)>正文。

樣式表框：在樣式表框中的各個(gè)輸入框中輸入相應(yīng)的樣式名稱，修飾相應(yīng)內(nèi)容的顯示效果。

分割標(biāo)記：輸入不同欄目之間的分割符號(hào)，如上例中的“>”。

目標(biāo)框架：

空行：表示由系統(tǒng)默認(rèn)

_blank：表示打開新瀏覽窗口

_parent：表示打開父瀏覽窗口

_self：表示打開自身瀏覽窗口

_top：表示打開最上層窗口簡(jiǎn)單組件當(dāng)前位置（ClassPath）：當(dāng)前頁的導(dǎo)航信息簡(jiǎn)單組件需要和翔宇欄目管理－>擴(kuò)展信息配合使用簡(jiǎn)單組件需要和翔宇欄目管理－>擴(kuò)展信息簡(jiǎn)單組件單個(gè)欄目信息（SingleNode）：顯示某個(gè)指定的欄目信息，當(dāng)沒有指定欄目ID時(shí)，就相當(dāng)與是當(dāng)前欄目信息組件。欄目ID：指定要顯示的欄目的ID號(hào)。顯示內(nèi)容：顯示帶鏈接的欄目名字：顯示欄目名字，點(diǎn)擊欄目名字到達(dá)該欄目網(wǎng)頁。顯示帶鏈接的說明圖片：顯示欄目LOGO圖，點(diǎn)擊該圖顯示該欄目網(wǎng)頁顯示帶鏈接的圖標(biāo)：顯示欄目圖標(biāo)，通過點(diǎn)擊該圖顯示該欄目下的內(nèi)容。簡(jiǎn)單組件單個(gè)欄目信息（SingleNode）：顯示某個(gè)指定的簡(jiǎn)單組件當(dāng)前欄目信息（CurrentNodeInfo）：該組件用于顯示當(dāng)前頁面相對(duì)應(yīng)的欄目的信息。簡(jiǎn)單組件當(dāng)前欄目信息（CurrentNodeInfo）：該組簡(jiǎn)單組件上下篇稿件：在文章頁面中顯示上，下篇稿件簡(jiǎn)單組件上下篇稿件：在文章頁面中顯示上，下篇稿件高級(jí)組件高級(jí)標(biāo)題列表：顯示滿足條件的稿件，實(shí)現(xiàn)多樣化的標(biāo)題列表效果。高級(jí)組件高級(jí)標(biāo)題列表：顯示滿足條件的稿件，實(shí)現(xiàn)多樣化的標(biāo)題列高級(jí)組件稿件屬性：指定顯示什么屬性的稿件標(biāo)題。系統(tǒng)對(duì)于一個(gè)欄目（欄目）下的稿件分成三類：頭條、圖片、一般；使用這個(gè)組件可以顯示一類或全部的新聞。文章屬性在源稿中心簽發(fā)時(shí)指定，或者在發(fā)布中心中設(shè)置稿件屬性。指定欄目ID：指定顯示哪個(gè)欄目中的稿件。當(dāng)輸入ID號(hào)時(shí)，該模板就顯示該ID號(hào)對(duì)應(yīng)欄目中的稿件；如果沒有輸入ID號(hào)，顯示當(dāng)前欄目的稿件。總條數(shù)：指定該模板中顯示的稿件數(shù)。是否顯示偽碼：選中后，會(huì)顯示預(yù)覽效果（沒有實(shí)際稿件）。高級(jí)組件稿件屬性：指定顯示什么屬性的稿件標(biāo)題。系統(tǒng)對(duì)于一個(gè)欄高級(jí)組件天數(shù)間隔：設(shè)定顯示幾天內(nèi)的稿件。輸入非零數(shù)字時(shí)，下面的推算方式變?yōu)榭蛇x。當(dāng)總條數(shù)，天數(shù)間隔為0時(shí)，表示它們對(duì)欄目下的稿件數(shù)的限制不起作用。推算方式：

高級(jí)組件天數(shù)間隔：設(shè)定顯示幾天內(nèi)的稿件。輸入非零數(shù)字時(shí)，下面高級(jí)組件當(dāng)前時(shí)間：是指系統(tǒng)現(xiàn)在的真實(shí)時(shí)間。最新時(shí)間：指定欄目下所有稿件中最新稿件的發(fā)布時(shí)間。精確到秒：指“天數(shù)”這個(gè)時(shí)間跨度是按秒來計(jì)算的。精確到天：指“天數(shù)”這個(gè)時(shí)間跨度是按天來計(jì)算的。高級(jí)組件當(dāng)前時(shí)間：是指系統(tǒng)現(xiàn)在的真實(shí)時(shí)間。高級(jí)組件置標(biāo)：又叫占位標(biāo)記，是有層次關(guān)系，

通常有實(shí)體置標(biāo)，屬性置標(biāo)，循環(huán)置標(biāo)。實(shí)體置標(biāo)：如稿件<Article></Article>，由兩部分組成：開始標(biāo)記，結(jié)束標(biāo)記。屬性置標(biāo)：如標(biāo)題<Title>TitlePh</Title>，由三部分組成：開始標(biāo)記、占位符，結(jié)束標(biāo)記。循環(huán)置標(biāo)：只有一個(gè)<RepeatBegin=0End=0></Repeat>，有兩部分組成：開始標(biāo)記，結(jié)束標(biāo)記。高級(jí)組件置標(biāo)：又叫占位標(biāo)記，是有層次關(guān)系，

通常有實(shí)體置標(biāo)，高級(jí)組件置標(biāo)編輯：位于頁面左邊的最大的輸入框，可以寫任意的HTML代碼，這些代碼和系統(tǒng)專用的置標(biāo)代碼一起來控制頁面的顯示效果。在編寫完成這些混合代碼以后，您可以點(diǎn)擊“語法檢查”按鈕，它可以幫助您查到并且定位出發(fā)生的錯(cuò)誤。雙擊右邊的專用置標(biāo)名字，這個(gè)置標(biāo)就會(huì)被增加到編輯框中光標(biāo)所在的位置，如果在編輯框中選中一段文字后再雙擊我們的置標(biāo)，那么系統(tǒng)會(huì)用置標(biāo)把選中的文字包括起來。高級(jí)組件置標(biāo)編輯：位于頁面左邊的最大的輸入框，可以寫任意的H高級(jí)組件置標(biāo)編輯：如標(biāo)題<Title>TitlePh</Title>，開始標(biāo)記、占位符，結(jié)束標(biāo)記作為一個(gè)整體來處理，您不能改動(dòng)字符，大小寫不區(qū)分，可以改。位置不能調(diào)整，在開始標(biāo)記和占位符之間，占位符和結(jié)束標(biāo)記之間、您可以填寫任意的HTML置標(biāo)、文字，系統(tǒng)原樣輸出。系統(tǒng)處理后，開始標(biāo)記和結(jié)束標(biāo)記不會(huì)出現(xiàn)在結(jié)果頁面上，占位符會(huì)被實(shí)際的內(nèi)容替換。如：<Title>【TitlePh】</Title>，實(shí)際標(biāo)題就顯示為：【窮人銀行何以執(zhí)行富人政策】高級(jí)組件置標(biāo)編輯：如標(biāo)題<Title>TitlePh</Ti高級(jí)組件置標(biāo)編輯：<RepeatBegin=0End=0></Repeat>：一個(gè)最通用的置標(biāo)，起循環(huán)作用，可以嵌套，是一個(gè)使用相對(duì)自由的置標(biāo)。要特別注意的是它的循環(huán)次數(shù)，它不是指定循環(huán)多少次就多少次，它還會(huì)受到數(shù)據(jù)庫中實(shí)際符合條件（滿足稿件屬性、天數(shù)、指定欄目ID等條件）的記錄數(shù)的限制。滿足稿件屬性、天數(shù)、指定欄目ID等條件，像Repeat這樣帶屬性(<Begin=0End=0>)的置標(biāo),在雙擊時(shí)會(huì)彈出對(duì)話框讓您設(shè)置，設(shè)置確定后還需要修改，只能按照相應(yīng)的格式修改。高級(jí)組件置標(biāo)編輯：<RepeatBegin=0End=0高級(jí)組件置標(biāo)編輯：文章鏈接<Url><ahref=ArticleUrlPh></Url></a>，給相應(yīng)的稿件屬性加上鏈接。如給標(biāo)題加鏈接：<Url><ahref=ArticleUrlPh></Url><Title>TitlePh</Title></a>。

在<ahref=ArticleUrlPh>中可以給鏈接加屬性，如：<Url><ahref=ArticleUrlPhclass="12b"target="_blank">

其它鏈接如：來源鏈接，當(dāng)前欄目鏈接等使用方法一致。高級(jí)組件置標(biāo)編輯：文章鏈接<Url><ahref=Artic高級(jí)組件置標(biāo)編輯：標(biāo)題圖片<Picture><imgsrc=PictureUrlPhborder=0></Picture>，顯示稿件的標(biāo)題圖片。標(biāo)題圖片在編輯器中設(shè)定。<imgsrc=PictureUrlPhborder=0>中可以加相關(guān)屬性。如：<Picture><imgsrc=PictureUrlPhborder=0width=“180”height=“130”vspace=“3”class=“xian”></Picture>。高級(jí)組件置標(biāo)編輯：標(biāo)題圖片<Picture><imgsrc高級(jí)組件置標(biāo)編輯：發(fā)布時(shí)間

點(diǎn)擊發(fā)布時(shí)間后，彈出屬性窗口，可以選擇屬性。<PubTimeLanguage=1BriefMonth=0BriefWeek=0>YearPh-MonthPh-DayPhHourPh:MinutePh:SecondPhWeekPh</PubTime>

占位符的順序可以更改，占位符之間可以添加字符。

如：<PubTime>MonthPh月DayPh日YearPh年</PubTime>高級(jí)組件置標(biāo)編輯：發(fā)布時(shí)間

點(diǎn)擊發(fā)布時(shí)間后，彈出屬性窗口，可高級(jí)組件置標(biāo)編輯：循環(huán)<RepeatBegin=0End=0><Article>\\可以省略，一般為了達(dá)到每條指定的效果。<Title>TitlePh</Title><Author>AuthorPh</Author></Article></Repeat>注意：repeat和article之間不能有其它代碼高級(jí)組件置標(biāo)編輯：循環(huán)注意：repeat和article之間高級(jí)組件

高級(jí)文章內(nèi)容（AdvContent）：

本組件通過組合稿件子項(xiàng)來控制文章內(nèi)容頁的顯示。內(nèi)容的子項(xiàng)與標(biāo)題的子項(xiàng)是一樣的，都是一篇稿件所具有的屬性。因此，寫法與AdvTitleList的寫法是一樣的。區(qū)別只是本組件中不處理<repeat>標(biāo)記，只是顯示當(dāng)前稿件的各個(gè)子項(xiàng)。高級(jí)組件高級(jí)文章內(nèi)容（AdvContent）：

本組件通過高級(jí)組件高級(jí)文章內(nèi)容組件支持稿件的分頁顯示。分頁操作必須在編輯器中設(shè)置，這里只是設(shè)置分頁的顯示樣式。

前綴，后綴：設(shè)置頁碼前后顯示的字符。如：第2頁：“第”就是前綴，“頁”就是后綴。

首頁，尾頁，上頁，下頁：設(shè)置這四個(gè)翻頁鏈接的字符。

頁碼樣式翻頁樣式：控制頁碼或翻頁控制的字符的樣式表名稱。高級(jí)組件高級(jí)文章內(nèi)容組件支持稿件的分頁顯示。分頁操作必須在編高級(jí)組件高級(jí)相關(guān)稿件列表：用在稿件模板中，用于顯示與本模板顯示稿件的相關(guān)稿件。其使用方法與高級(jí)標(biāo)題列表（AdvTitleList）組件一樣。它不需要設(shè)定顯示哪些相關(guān)稿件。具體顯示那些相關(guān)稿件，由編輯器寫稿時(shí)指定。高級(jí)組件高級(jí)相關(guān)稿件列表：用在稿件模板中，用于顯示與本模板顯高級(jí)組件高級(jí)欄目列表：用來顯示一個(gè)欄目列表，可以擴(kuò)展到顯示標(biāo)題列表、文章內(nèi)容。高級(jí)組件高級(jí)欄目列表：用來顯示一個(gè)欄目列表，可以擴(kuò)展到顯示標(biāo)高級(jí)組件這個(gè)欄目有兩種方式來確定，一種就是通過“欄目ID”項(xiàng)的值來直接指定，就是指定的值所對(duì)應(yīng)的欄目；另外一種就是在沒有指定“欄目ID”項(xiàng)的值的情況下，通過包含這個(gè)組件的模版用在哪個(gè)欄目來確定，這個(gè)欄目就和使用“欄目ID”指定的欄目結(jié)果是一樣的；使用后一種方式的好處就是一個(gè)模版可以用在不同的欄目上顯示不同的欄目?jī)?nèi)容。高級(jí)組件這個(gè)欄目有兩種方式來確定，一種就是通過“欄目ID”項(xiàng)高級(jí)組件其中各項(xiàng)的含義是：a.總是顯示改欄目，即一個(gè)欄目無論在何種情況下都會(huì)被顯示出來。這一項(xiàng)為默認(rèn)選項(xiàng)。b.欄目屬性“是否顯示文章列表”選中才顯示，在欄目管理的擴(kuò)展屬性中，選中顯示在導(dǎo)航欄高級(jí)組件其中各項(xiàng)的含義是：高級(jí)組件c.欄目當(dāng)天有文章才顯示d.以上兩點(diǎn)滿足才顯示高級(jí)組件c.欄目當(dāng)天有文章才顯示高級(jí)組件高級(jí)分頁標(biāo)題列表：本組件以分頁方式顯示稿件的標(biāo)題列表

。高級(jí)組件高級(jí)分頁標(biāo)題列表：本組件以分頁方式顯示稿件的標(biāo)題列表高級(jí)組件1、圖片、頭條、普通，用來控制顯示什么屬性的稿件2、指定欄目ID，用來設(shè)定顯示哪個(gè)欄目的稿件，與欄目類型結(jié)合，可以顯示多種欄目類型的稿件，包括本欄目新聞、父欄目新聞、根欄目新聞。3、頁條數(shù)，表示一頁顯示多少條4、總頁數(shù)，指這個(gè)欄目下有多少文章要分頁顯示。高級(jí)組件1、圖片、頭條、普通，用來控制顯示什么屬性的稿件高級(jí)組件5、翻頁外觀，設(shè)定翻頁按鈕的樣式6、顯示首尾頁，在翻頁按鈕中顯示首尾頁按鈕7、稿件的各個(gè)屬性必須使用Article括起來8、Repeat與Article之間不能有其他的代碼，有也將不起作用

高級(jí)組件5、翻頁外觀，設(shè)定翻頁按鈕的樣式高級(jí)組件85:7001/servlet/PagePreviewServlet?siteid=1&nodeid=8932&type=0<tablewidth=95%border=0cellpadding=15cellspacing=1><RepeatBegin=0End=5><tr><RepeatBegin=0End=3><Article><tdalign=centerwidth=33%valign=top><Url><ahref=ArticleUrlPhtarget=_blank></Url><Picture><imgsrc=PictureUrlPhborder=0width=150height=114vspace=3></Picture></a><br><Url><ahref=ArticleUrlPhstyle=text-decoration:nonetarget=_blank></Url><Title>TitlePh</Title></a></td></Article></Repeat></tr></Repe