博達(dá)站群培訓(xùn)講義-創(chuàng)建網(wǎng)站

1、 培訓(xùn)講義西安博達(dá)軟件有限公司XIAN WEBBER SOFTWARE CO., LTD.地址：中國西安高新開發(fā)區(qū)(東區(qū))火炬路3號樓10層C區(qū) 郵編：710043電話：+86-29-82681001傳真：+86-29-82682009網(wǎng)址：第 PAGE 32 頁 共 NUMPAGES 32 頁 培訓(xùn)講義培訓(xùn)講義創(chuàng)建網(wǎng)站文件編號：BDQP文件版號：1.0 文件頁數(shù)：共頁 生效日期：2010-8-17擬 制：冀曉璐 日 期：2010-8-10 審 核： 日 期： 批 準(zhǔn)： 日 期：西安博達(dá)軟件有限公司目 錄 TOC o 1-4 h z u HYPERLINK l _Toc269908891 1.

2、產(chǎn)品概要 PAGEREF _Toc269908891 h 3 HYPERLINK l _Toc269908892 1.1 培訓(xùn)目的 PAGEREF _Toc269908892 h 3 HYPERLINK l _Toc269908893 1.2 適用范圍 PAGEREF _Toc269908893 h 3 HYPERLINK l _Toc269908894 2.功能模塊講解 PAGEREF _Toc269908894 h 3 HYPERLINK l _Toc269908895 2.1 內(nèi)容管理 PAGEREF _Toc269908895 h 3 HYPERLINK l _Toc269908896

3、 2.2網(wǎng)站管理 PAGEREF _Toc269908896 h 4 HYPERLINK l _Toc269908897 3.實例講解 PAGEREF _Toc269908897 h 5 HYPERLINK l _Toc269908898 3.1文件|模板 PAGEREF _Toc269908898 h 5 HYPERLINK l _Toc269908899 3.1.1 上傳插件 PAGEREF _Toc269908899 h 6 HYPERLINK l _Toc269908900 3.1.2 新建模板 PAGEREF _Toc269908900 h 7 HYPERLINK l _Toc269

4、908901 3.1.3 頁面編輯模式 PAGEREF _Toc269908901 h 9 HYPERLINK l _Toc269908902 3.1.4 頁面的組件化實施 PAGEREF _Toc269908902 h 9 HYPERLINK l _Toc269908903 3.1.5 系統(tǒng)組件庫 PAGEREF _Toc269908903 h 9 HYPERLINK l _Toc269908904 3.1.6 新聞列表的添加 PAGEREF _Toc269908904 h 10 HYPERLINK l _Toc269908905 3.1.7 變換圖片的添加 PAGEREF _Toc2699

5、08905 h 13 HYPERLINK l _Toc269908906 3.1.8 圖片列表的添加 PAGEREF _Toc269908906 h 14 HYPERLINK l _Toc269908907 3.1.9 鏈接列表的添加 PAGEREF _Toc269908907 h 16 HYPERLINK l _Toc269908908 3.1.10 網(wǎng)站導(dǎo)航的添加 PAGEREF _Toc269908908 h 18 HYPERLINK l _Toc269908909 3.1.11 版權(quán)組件的添加 PAGEREF _Toc269908909 h 19 HYPERLINK l _Toc269

6、908910 3.1.12 二級頁面的組件化實施 PAGEREF _Toc269908910 h 20 HYPERLINK l _Toc269908911 3.1.13 內(nèi)容頁模板 PAGEREF _Toc269908911 h 21 HYPERLINK l _Toc269908912 3.2 欄目創(chuàng)建 PAGEREF _Toc269908912 h 22 HYPERLINK l _Toc269908913 3.2.1 新增欄目 PAGEREF _Toc269908913 h 22 HYPERLINK l _Toc269908914 3.2.2 欄目工具條 PAGEREF _Toc269908

7、914 h 26 HYPERLINK l _Toc269908915 3.2.3 修改欄目名稱 PAGEREF _Toc269908915 h 29 HYPERLINK l _Toc269908916 3.2.4 欄目排序、刪除 PAGEREF _Toc269908916 h 29 HYPERLINK l _Toc269908917 3.3 內(nèi)容庫 PAGEREF _Toc269908917 h 291.產(chǎn)品概要 博達(dá)軟件公司的“VSB9網(wǎng)站管理平臺”是一套建站平臺，通過該平臺就可以很輕松地把制作的靜態(tài)頁面創(chuàng)建成一個動態(tài)可維護(hù)的獨(dú)立網(wǎng)站發(fā)布，并提供強(qiáng)大的后臺管理功能，給管理員的維護(hù)工作節(jié)省了大

8、量時間。1.1 培訓(xùn)目的為了使用戶能很快了解我們產(chǎn)品，并且利用該產(chǎn)品能很輕松方便的進(jìn)行網(wǎng)站維護(hù)工作，并能獨(dú)立創(chuàng)建網(wǎng)站、對已有網(wǎng)站進(jìn)行簡單改版工作，通過培訓(xùn)能快速掌握創(chuàng)建網(wǎng)站的整體思路。1.2 適用范圍適合學(xué)習(xí)網(wǎng)站創(chuàng)建的項目培訓(xùn)以及公司內(nèi)部新員工培訓(xùn)。2.功能模塊講解VSB9網(wǎng)站管理平臺建站系統(tǒng)包含：【內(nèi)容管理】、【網(wǎng)站管理】兩大主要功能。2.1 內(nèi)容管理VSB9網(wǎng)站管理平臺提供強(qiáng)大的內(nèi)容管理，可以實現(xiàn)信息數(shù)據(jù)的批量導(dǎo)入功能，可以對各類文檔進(jìn)行入庫導(dǎo)入。這里我們不作為重點進(jìn)行講解。2.2網(wǎng)站管理VSB9網(wǎng)站管理平臺中網(wǎng)站管理主要包含：【網(wǎng)站建設(shè)】、【備份恢復(fù)】、【用戶和權(quán)限】、【網(wǎng)站統(tǒng)計】、【網(wǎng)

9、站安全】、【文章采集】及【其他設(shè)置】七個主要功能模塊。VSB9網(wǎng)站管理平臺是一套利用靜態(tài)頁面創(chuàng)建動態(tài)網(wǎng)站的過程，那么首先需要我們實施人員先準(zhǔn)備好靜態(tài)頁面（即設(shè)計好.htm（.html）格式靜態(tài)頁面）?！揪W(wǎng)站建設(shè)】模塊是整個建站過程中的核心、重點模塊，該模塊提供整個網(wǎng)站創(chuàng)建過程中的頁面導(dǎo)入、圖片樣式導(dǎo)入、網(wǎng)站模板建立、網(wǎng)站欄目生成以及頁面靜態(tài)部分變動態(tài)維護(hù)的實施等功能。下面的章節(jié)中我們重點對【網(wǎng)站建設(shè)】進(jìn)行實例講解。網(wǎng)站在網(wǎng)站建設(shè)模塊建立好之后，整個網(wǎng)站的框架就被搭建起來了，就到了我們“管理內(nèi)容”部分。3.實例講解（序：講解實例建站之前，講述以下創(chuàng)建網(wǎng)站中各個功能模塊的作用）點擊【創(chuàng)建網(wǎng)站】，我

10、們可以看到如圖所示：213第1部分：VSB9網(wǎng)站管理平臺所包含的功能模塊；第2部分：該平臺中【網(wǎng)站建設(shè)】所包含的功能模塊；從圖中我們可以看出，創(chuàng)建網(wǎng)站包含文件|模板、欄目、內(nèi)容庫三個模塊。文件|模板：管理整個網(wǎng)站的文件和模板頁。模板頁是我們建站的基礎(chǔ)，網(wǎng)站前臺 所顯示的欄目就是以其所調(diào)用的模板頁的樣式來顯示的。 欄目：網(wǎng)站的層級，也是網(wǎng)站前臺顯示的結(jié)構(gòu)。 內(nèi)容庫：網(wǎng)站維護(hù)資料存放的地方。 下面我們來具體看一下這三個模塊：3.1文件|模板點擊2中的文件|模板，然后再點擊3中的點擊這里開始管理文件|模板，打開如圖界面：新建模板：可以新建一個空的模板頁。上傳文件：用來把本地機(jī)上的文件、圖片等上傳到系

11、統(tǒng)中。新建目錄：新建一個網(wǎng)站目錄，相當(dāng)于新建一個文件夾，這樣我們就可以把相關(guān)的東西放在一起，方便查找。上傳插件：我們用它來把本地機(jī)上的靜態(tài)頁面、圖片、視頻、樣式表等傳到系統(tǒng)中去，用它上傳頁面的好處是我們只需要選中要上傳的頁面，而不需要管頁面中的圖片和樣式等，系統(tǒng)會自動把頁面中的圖片和樣式放在相應(yīng)的路徑下。上傳插件點擊上圖中的批量上傳文件按鈕，打開頁面：點擊下載安裝，將上傳插件VSBIEHelperSetup.exe下載到本地計算機(jī)，進(jìn)行安裝，安裝完成之后，重啟ie瀏覽器，我們就可以用它來進(jìn)行批量上傳文件及上傳頁面了。下面我們來看看如何使用該插件在新建模板時進(jìn)行頁面的上傳。新建模板利用VSB9創(chuàng)

12、建網(wǎng)站的第一步是導(dǎo)入已有的靜態(tài)頁面，新建模板：在網(wǎng)站建設(shè)文件|模板處，要建立網(wǎng)站需要的模板，有兩種方式：一、直接新建空白的模板；二、新建導(dǎo)入本地靜態(tài)頁面的模板。新建模板時，從兩方面創(chuàng)建所需的模板。熟悉系統(tǒng)，可直接創(chuàng)建相應(yīng)的模板，創(chuàng)建完成后，再用組件庫中相對應(yīng)的組件實現(xiàn)相應(yīng)的功能；不熟悉系統(tǒng)，創(chuàng)建時選擇相應(yīng)的模板類型，則在組件庫分類下會出現(xiàn)適合本模板類型所需的關(guān)聯(lián)組件和通用組件。在此以新建模板，選擇模板類型為例進(jìn)行講解。點擊圖中的“”，根據(jù)系統(tǒng)提示“沒有首頁模板無法正常預(yù)覽網(wǎng)站，請建立index.jsp模板作為首頁模板”，新建一個網(wǎng)站首頁，如圖所示：圖在打開的對話框中，輸入模板名稱和標(biāo)題，點擊【

13、選擇html源文件】上傳靜態(tài)頁面，靜態(tài)頁面上傳成功后選擇模板類型。【例】在此輸入的信息為： 模板名稱：index.jsp 標(biāo) 題：首頁 源 文 件：index.htm 模板類型：首頁注意：在源文件處，選擇本地的Html源文件，則在模板創(chuàng)建成功后，此靜態(tài)頁面上所有的圖片、樣式等都會自動傳到系統(tǒng)中，并歸屬到默認(rèn)的圖片、樣式分類目錄中。點擊“”，模板創(chuàng)建成功后，則頁面自動跳轉(zhuǎn)到模板的編輯模式。頁面編輯模式頁面的編輯模式有三種：預(yù)覽、設(shè)計和代碼。預(yù)覽就是頁面在前臺顯示的樣子，設(shè)計是我們對頁面進(jìn)行組件化實施、編輯、修改的地方，而代碼狀態(tài)顯示的是這個頁面的html代碼。頁面的組件化實施設(shè)計模式點擊前面的方

14、框，我們就可以看到頁面上的表格了。直觀顯示這個模板頁面的排版、組件的布局、然后將靜態(tài)頁面上需要維護(hù)的、要進(jìn)行資料添加的部分刪掉，用我們的組件來代替，可以對組件的樣式配置和部分組件的資料維護(hù)。頁面組件系統(tǒng)組件庫 如圖，系統(tǒng)按照組件的屬性和功能用途的不同，將其分成了不同的類別。我們可以將這些展開，找到自己需要的組件拖拽到頁面中。 新聞列表的添加如圖，頁面上中間的部分是一條一條的新聞，它肯定是需要后期進(jìn)行資料維護(hù)的部分，那我們選中這個單元格中的內(nèi)容，刪除內(nèi)容，然后到組件庫中找和它樣子比較接近的組件（不過，樣式不是完全一樣也沒關(guān)系，因為我們可以在樣式配置里面具體調(diào)整將其配成我們想要的樣子。）我們要加的

15、是一條條的新聞，所以可以找新聞列表，如圖，在推薦組件中，打開新聞列表，找一個和我們靜態(tài)頁面顯示的樣子比較接近的，鼠標(biāo)放在組件上就可以看到它的預(yù)覽的樣子了。然后將其拖到頁面上相應(yīng)的位置。如圖，在組件庫中鼠標(biāo)左鍵單擊要拖拽的組件，按著不放到要放的位置，松開。保存頁面。那么這里我們先講講單個組件上面五個功能按鈕分別的作用，首先我們看第一個: :可以修改頁面組件名稱、配置頁面組件樣式、頁面組件代碼編輯及移出此頁面組件；：資料添加、編輯按鈕；：配置頁面組件樣式按鈕；：移動組件位置按鈕；：移出頁面組件按鈕。點擊，對標(biāo)題列表進(jìn)行樣式配置，如圖，我們可以設(shè)置新聞的顯示條數(shù)，字體樣式和大小，也可以對其進(jìn)行前導(dǎo)圖

16、或者前導(dǎo)符的配置等（實際培訓(xùn)時設(shè)置下可以看下效果），設(shè)置完成之后一定要記得點擊按鈕，這樣我們的設(shè)置才可以生效。變換圖片的添加 如圖，頁面左邊下面的部分，是由一張張的變換的圖片組成的，所以我們在推薦組件中的里面選擇變化圖片組件，找一個樣式比較接近的，拖到頁面中相應(yīng)的位置，拖拽方法和新聞列表是一樣的。如圖保存頁面，如圖點擊，打開樣式配置窗口，可以把它配成想要的樣子，點按鈕保存設(shè)置，如圖。圖片列表的添加 如圖，頁面左邊下面的部分，是由一張張的圖片組成的，因為剛才是一張張的圖片，所以我們在欄目組件里面選擇圖片列表，找一個樣式比較接近的，拖到頁面中相應(yīng)的位置，拖拽方法和新聞列表是一樣的。如圖保存頁面，如

17、圖點擊，打開樣式配置窗口，可以把它配成想要的樣子，點按鈕保存設(shè)置，如圖。鏈接列表的添加如圖，頁面上認(rèn)證標(biāo)準(zhǔn)介紹下面的部分應(yīng)該是一個個的鏈接，所以我們刪除掉頁面上的靜態(tài)的部分，用我們的組件來代替。然后在我們的組件庫里面找和它樣式比較接近的，因為是鏈接，所以我們在欄目組件里面找鏈接列表，然后將其拖到頁面中相應(yīng)的位置。如圖保存頁面，點擊，打開樣式配置窗口，可以把它配成想要的樣子，點按鈕保存設(shè)置，如圖。網(wǎng)站導(dǎo)航的添加和前面的組件的添加方法是一樣的，我們可以將靜態(tài)頁面上的部分刪掉，然后將網(wǎng)站導(dǎo)航組件拖到頁面上的相應(yīng)的位置.然后，保存頁面。備注：網(wǎng)站導(dǎo)航組件分為圖片導(dǎo)航和文字導(dǎo)航兩種，圖片導(dǎo)航就是說網(wǎng)站上

18、的導(dǎo)航是用圖片做的，文字導(dǎo)航就是說網(wǎng)站上的導(dǎo)航是文字。點擊按鈕，可以設(shè)置網(wǎng)站導(dǎo)航的獲取方式，或指定欄目，也就是說點，可以設(shè)置導(dǎo)航條從哪里開始顯示。如圖：點擊按鈕，可以配置網(wǎng)站導(dǎo)航的顯示樣式，如圖：版權(quán)組件的添加 如圖，版權(quán)組件的添加方法和前面的也是一樣的，把靜態(tài)頁面的部分刪掉，然后在基本組件，基礎(chǔ)信息中拖版權(quán)組件到頁面上相應(yīng)的位置，點擊保存頁面就可以了。頁面上的需要組件實施的部分大概也就是這幾種，我們都可以按照上述的方法，將整個頁面實施。然后我們看二級頁面。二級頁面的組件化實施 其他頁面的實施和上述的方法是一樣的，（具體實施二級頁面），我們可以根據(jù)需要實施。 如果我們要拖拽到頁面的組件，其他頁

19、面上已經(jīng)有了，那我可以直接從其他頁面將組件直接拖到本頁面。如圖，直接從首頁拖個版權(quán)組件到二級頁模板，彈出一個對話框。引用這個組件：如果選引用組件的話，就是說我們的這個組件和首頁上的組件實際上是一個組件，任一個改動另外一個也跟著改。復(fù)制這個組件：如果選復(fù)制這個組件，就是說我們的這個組件只是首頁上組件的一個副本，復(fù)制時它們的樣式是完全一樣的。但是改一個另外一個不會跟著改。然后根據(jù)頁面布局，拖拽翻頁標(biāo)題列表組件至欄目頁。如圖內(nèi)容頁模板系統(tǒng)把添加了新聞內(nèi)容組件的頁面就默認(rèn)為新聞樣式頁。打開內(nèi)容頁模板，把中間顯示內(nèi)容的靜態(tài)部分刪掉，然后在欄目組件里面拖一個新聞內(nèi)容新聞內(nèi)容組件，如圖： 保存頁面，系統(tǒng)就會

20、自動把這個加了新聞內(nèi)容組件的頁面認(rèn)為是新聞內(nèi)容頁了。網(wǎng)站的模板頁已經(jīng)建立起來了，下面我們來看一下怎樣根據(jù)這些模板來生成網(wǎng)站前臺顯示的一個個欄目，從而生成我們的整個網(wǎng)站。3.2 欄目創(chuàng)建如圖，點擊欄目，進(jìn)入欄目管理，再點擊頁面右下角的點擊這里開始管理欄目，進(jìn)入網(wǎng)站的欄目編輯模塊。3.2.1 新增欄目如圖，點擊系統(tǒng)列出欄目類型我們系統(tǒng)中基本的欄目類型分三種：首頁：首頁欄目，它是我們網(wǎng)站前臺的首頁，而且網(wǎng)站必須有且只有一個首頁欄目?；荆鹤罨镜臋谀款愋停彩俏覀冇玫淖疃嗟囊环N建設(shè)網(wǎng)站的欄目類型。鏈接：鏈接欄目，可以鏈接到網(wǎng)站的任一位置。新建首頁欄目：點擊，打開如圖頁面，配置好應(yīng)用模板，點擊配置好模板上組件的內(nèi)容來源，點擊完成按鈕。新建基本欄目： 點擊，打開如圖頁面，鍵入欄目名稱和代碼，配置好模板頁，點擊配置好模板上組件的內(nèi)容來源，點擊完成按鈕。新建鏈接欄目： 點擊，打開如圖頁面，鍵入欄目的顯示名稱和欄目代碼，配置好欄目的鏈接位置，點擊保存。備注：如果要新增的欄目和已有的欄目相似，只是顯示的具體內(nèi)容不同。那么我們可以找到已有的欄目復(fù)制，然后找到要新增的欄目的具體位置粘貼。點擊后面的改名按鈕，將其改為要新增的欄目的名稱。然后在內(nèi)