《CMS培訓(xùn)教程》PPT課件.ppt

CMS培訓(xùn)教程,陳亮,目 的,本教程的目的是為了讓首次接觸到cms系統(tǒng)的新手能迅速了解cms的功能，并能初步學(xué)會如何建立一個站點。 演示整個建站流程 提示注意事項，以及一些技巧的使用。 在本教程的講解過程中，很多地方無法用語言組織，因此配合了一定的操作演示。,新建一個站點Site,進入位置：點擊頁面上方的“系統(tǒng)管理”菜單，進入系統(tǒng)管理頁面。再點擊開左側(cè)樹形菜單里的“站點管理”，點擊“新建站點”項。,填入新站點的各項信息,站點名稱：新站點的名稱。盡量使用比較明顯的名稱進行命名，以方便日后在cms系統(tǒng)中的管理，比如“培訓(xùn)演示站點”。 站點網(wǎng)址：訪問該站點的鏈接。當站點被發(fā)布完成后，就可以在IE瀏覽器中輸入這個地址進行訪問，比如http:/localhost:8080/penjing。 本地存放路徑：站點發(fā)布時的所有文件將被存儲到這個路徑下，比如“D:/raykey/cms/webapps/penjing”。這個名稱的最后文件夾最好是唯一的，并且與站點的名稱相同，以方便文件的管理。 圖片路徑：站點發(fā)布時圖片存儲的路徑。請注意這個路徑是上面“本地存放路徑”的相對路徑。比如指定為“images”，則實際上圖片存儲的路徑是“D:/raykey/cms/webapps/penjing/images”。 附件路徑：站點發(fā)布時，其他附件的存儲路徑，與上面的“圖片路徑”類似，也是一個相對路徑，比如指定為“document”，則實際上的路徑是“D:/raykey/cms/webapps/penjing/document”。 風格選擇：站點使用的整體風格，比如顏色，css等。因為現(xiàn)在是一個新建的站點，還沒有任何的風格可以選擇。需要在建立風格之后再選擇。 欄目索引文件名：在站點發(fā)布的時候，新站點的目錄索引所用的文件名，推薦直接使用默認值。 欄目索引擴展名：在站點發(fā)布的時候，新站點的目錄索引所用的后綴名，推薦直接使用默認值。 欄目文章擴展名：在站點發(fā)布的時候，每篇文章都會被發(fā)布為靜態(tài)的html頁面，這個時候使用的文件擴展名。推薦使用默認值。 定時發(fā)布：如果想該站點被自動的定時發(fā)布，就可以將“是否定時發(fā)布”選項的鉤打上，然后填入你需要的定時發(fā)布的時間。 FTP設(shè)置：如果不是發(fā)布到本地的硬盤上，而是發(fā)布到其他遠程的機器上，就需要用到該設(shè)置。首先在“自動FTP”前的單選框前打鉤；然后填入“FTP服務(wù)器”的地址，比如78；選擇對方服務(wù)器的類型；指定ftp的路徑，比如是在“/public/upload”目錄下；最后填入ftp的用戶名和密碼。這樣cms就可以訪問ftp并上傳文件了。注意：在對應(yīng)的ftp服務(wù)器上一定要有該路徑和可寫權(quán)限，否則無法發(fā)布。 可以訪問該站點的角色列表：指定哪些角色可以訪問該站點，只需要把指定的角色添加到右側(cè)的列表框就可以了。 保存：當確認一些設(shè)置無誤的時候，就可以點擊“保存”按鈕確認新建這個站點了。,示例,新建一個風格,進入位置：點擊頁面上方的“內(nèi)容管理”菜單，進入內(nèi)容管理頁面，再點擊左側(cè)欄目樹的下拉菜單，選擇“培訓(xùn)演示站點”。點開“站點管理”下的“風格管理”頁面，然后點擊右側(cè)的“新建”按鈕。如圖2所示：,填入新風格的各項信息,名稱：新風格的名稱。請盡量使用唯一的比較容易區(qū)分的名字，方便日后cms系統(tǒng)的管理，比如“培訓(xùn)演示站點首選風格”。 描述：為風格指定簡短的描述，可以馬上知道該風格的主要信息。比如“站點的首選風格，簡單樣式”。 風格存儲路徑：這里的路徑是一個相對于cms系統(tǒng)所在位置的路徑，存儲的是該風格的一些圖片、css文件和js文件等。比如這里指定風格存儲路徑為“style”，而cms系統(tǒng)所在的位置是“d:tomcatwebappscms”，則風格的文件就存儲在“d:tomcatwebappscmsstyle”下。 css路徑：css文件的存儲路徑。和上面一樣，也是一個相對路徑，不過是相當于風格所在的存儲路徑。比如可以指定為“css”，則實際的路徑是“d:tomcatwebappscmsstylecss”。 js路徑：js文件的存儲路徑。和css路徑一樣，可以指定為“js”。 image路徑：圖片文件和flash文件的存儲路徑。和css路徑一樣，可以指定為“images”。,示例,上傳風格的文件,每個風格肯定有自己的圖片、css、js等等。下面以上傳css文件為例： 點擊“css文件管理”按鈕進入文件上傳頁面。 瀏覽想上傳的文件，點擊“上傳”按鈕。如果上傳了不需要的文件，可以點擊附件后的“刪除”按鈕進行刪除。 上傳完畢后，點擊“返回”按鈕退出。 如圖所示,為站點指定風格,進入“風格管理”按鈕下方的“站點設(shè)置”頁面，為站點選定一個風格，然后點擊保存。如圖所示：,新建一個模板,進入位置：點擊“風格管理”按鈕下的“模板管理”，進入模板管理頁面。點擊右側(cè)的“新建”按鈕，進入新建模板頁面。,模板基本信息填寫,名稱：為模板指定一個名稱。最好使用唯一的有代表性的名稱，方便日后cms系統(tǒng)的管理。比如“首頁模板”。 文件名：為模板文件指定名稱。最好使用唯一的有代表性的名稱，方便日后cms系統(tǒng)的管理。比如“home.vm”。 選擇模板類型：為模板選擇一種類型。如果你想為文章建立一個模板，希望其他的文章都使用這樣一個模板，就可以選擇“文章”類型。如果你想建立一個文章列表的模板，就可以選擇“索引”類型。如果你想這個模板只是被包含在其他的頁面或者模板中，可以選擇“包含”類型。,模板頭填寫,模板頭的主要內(nèi)容一般是包含其他部分的模板，或者include進一些標簽，或者寫入固定的內(nèi)容。 然而經(jīng)常我們是把這些內(nèi)容寫到另外一個模板里面，而在模板頭里面把它們包含進來。如右上圖所示為模板內(nèi)容，其類型是“包含”的。 在首頁模板中，我們就可以把homeheader包含進來 #parse(“homeheader.vm“) 如右下圖所示。,模板正文填寫,文本編輯器的使用：可以直接在內(nèi)容編輯框里直接手動編寫模板的內(nèi)容。手動編寫一般都是給比較熟悉html代碼的用戶使用，或者進行局部性的微調(diào)。不推薦直接使用。 高級編輯器的使用：高級編輯器的作用主要是以類似于“所見即所得”的方式，形象直觀的為客戶展現(xiàn)出頁面編輯后的效果，并以“向?qū)А钡男问?，讓客戶方便的進行標記等的添加。,模板靜態(tài)內(nèi)容的填寫,一個模板實際上是一個整體樣式的設(shè)計。因此我們往往需要與美工的配合，設(shè)計模板的結(jié)構(gòu)，各個模塊的位置，大小，顏色等。 這部分的工作往往是靜態(tài)頁面的編輯。,示例,下面我們簡單的建立一個模板，進行一下簡單的頁面設(shè)計。如圖，它只有一幅圖片和一個表格。,模板動態(tài)內(nèi)容的添加,主要是使用“模板標記向?qū)А碧砑?點擊“高級編輯器”上面的“新建”添加模板標記向?qū)О粹o，可以選擇需要加入什么樣的標記。,文章列表標記的添加,選擇“文章列表”，然后點擊下一步。 在這里可以選擇要添加哪個欄目的文章列表到目前的位置。我們選擇已有的欄目“培訓(xùn)站點頭條新聞”后保存。如下圖所示：,文章列表標記的添加,同上面的方法一樣，添加一個“圖片新聞”的標記。如下圖所示：,新建欄目,進入位置：點擊“站點管理”里的“欄目管理”。在這里可以看到站點所有的欄目。由于本站點是新建的，所以只有一個“首頁”欄目。點擊“首頁”后的“新建子欄目”按鈕，可以進入新建欄目頁面。,填入欄目的基本信息,類型：這里有4種欄目類型可以選擇。 第一種是普通頻道，這種頻道下可以有其他的子欄目，可以有文章等。 第二種是引用頻道，這種頻道下其實沒有真正的內(nèi)容，只是引用其他頻道的內(nèi)容而已，比如一些新聞頻道，實際上只是引用了其他欄目的最新文章。 第三種是滾動公告頻道，這種頻道可以形成滾動效果。 第四種是彈出公告頻道，這種頻道可以讓用戶在登錄網(wǎng)站的時候，彈出一個頁面顯示重要信息。 標題：在瀏覽欄目時可以看到的名稱。為了方便管理，請盡量使用唯一的名稱。 名稱：在進行模板設(shè)計的時候可以用到的名稱。請注意這個名稱在所有的欄目中必須是唯一的，甚至在其他的站點中。 相對路徑：相當于該站點所在位置的一個路徑。比如指定為“news”，該站點的存儲位置是“d:tomcatwebappspenjing”，則實際存儲位置是“d:tomcatwebappscmsnews”。 索引模板：如果該欄目是一個普通欄目，它就可以有一些文章。因此要為這些文章建立一個索引列表，方便觀看。索引模板就是完成這一任務(wù)的。比如我們在這里選擇“首頁模板”。 歷史檔案模板：考慮到對以前內(nèi)容的review，因此對舊的內(nèi)容建立了一個歷史記錄，這個時候就需要用到歷史檔案模板。 文章模板：對其下的文章顯示形式用到的模板。 是否生成索引頁：在生成靜態(tài)頁面的時候，是否生成文章列表。 索引文件名：生成的欄目html頁面索引文件用到的名字。推薦使用默認值。 索引擴展名：生成的欄目html頁面索引文件的擴展名。推薦使用默認值。 文章擴展名：生成的文章的html頁面索引文件的擴展名。推薦使用默認值。,欄目內(nèi)容示例,如下，是我們新建的一個欄目的內(nèi)容。,站點的發(fā)布,發(fā)布站點：進入“站點設(shè)置”頁面，點擊“完全發(fā)布”按鈕，等待站點的發(fā)布完成。,站點的加載,進入tomcat所在的安裝目錄，打開tomcat下的confserver.xml文件。在文件的host里加入 其中的docBase是站點文件所在的根目錄。,站點的訪問,打開IE瀏覽器，輸入http:/localhost:8080/penjing/后回車。這樣就可以看到站點發(fā)布后的效果了。如圖所示：,欄目導(dǎo)航條的添加,使用“模板標記向?qū)А敝械奶砑印皺谀柯窂健?，在指定的位置添加?子頻道列表的添加,使用“模板標記向?qū)А敝械奶砑印白宇l道列表”，選擇要顯示哪個欄目的子欄目，在指定的位置添加。 注意只能顯示“普通頻道”的列表。 效果如右：,文章模板的編寫,使用“模板標記向?qū)А敝械奶砑印爱斍拔恼聦傩浴?，選擇要加入文章的內(nèi)容、標題、關(guān)鍵字、作者等。,示例,如圖，我們使用向?qū)?，簡單的加入了文章的標題，關(guān)鍵字，內(nèi)容3項內(nèi)容。,為欄目指定文章模板,進入“欄目管理”，點擊欄目名，指定欄目的文章模板。 然后發(fā)布站點，就可以看到效果了。,添加相關(guān)文章標記,使用“高級編輯器”編輯剛建立的“通用文章模板”。 使用“模板標記向?qū)А碧砑印跋嚓P(guān)新聞”，選擇