2創(chuàng)建網(wǎng)站之模板頁制作

1、VSB9 培訓(xùn)手冊-創(chuàng)建網(wǎng)站之模板頁制作西安博達(dá)軟件有限公司XIAN WEBBER SOFTWARE CO., LTD.第 1 頁 共 10 頁網(wǎng)站創(chuàng)建第一步：模板頁制作模板頁面制作包含兩個(gè)步驟：模板頁導(dǎo)入；組件拖拽；模板頁制作階段目標(biāo)，需要首先制作出來，一個(gè)網(wǎng)站基礎(chǔ)的三個(gè)頁面，即首頁，欄目頁，內(nèi)容頁。具體操作步驟：如何導(dǎo)入頁面？進(jìn)入網(wǎng)站管理，網(wǎng)站建設(shè)模塊，在文件模板選項(xiàng)卡下進(jìn)行模板頁的制作，我們點(diǎn)擊網(wǎng)站根節(jié)點(diǎn)，開始導(dǎo)入模板頁面,如下圖所示：西安博達(dá)軟件有限公司XIAN WEBBER SOFTWARE CO., LTD.第 2 頁 共 10 頁點(diǎn)擊“”按鈕進(jìn)行模板頁面上傳，如下圖所示：點(diǎn)擊“”

2、按鈕即可成功上傳頁面，模板頁面上的圖片，樣式等均會自動(dòng)上傳到 vsb系統(tǒng)中，無需再手動(dòng)添加，如下圖所示：通過同樣的方式，我們可將欄目頁與內(nèi)容頁面分別上傳。西安博達(dá)軟件有限公司XIAN WEBBER SOFTWARE CO., LTD.第 3 頁 共 10 頁欄目頁：內(nèi)容頁：如果需要其他頁面，同樣的方法上傳即可。西安博達(dá)軟件有限公司XIAN WEBBER SOFTWARE CO., LTD.第 4 頁 共 10 頁此時(shí)，我們就上傳好了一個(gè)網(wǎng)站基礎(chǔ)的三個(gè)頁面，在文章模板位置我們就可以看到如下所示頁面：注意：1.模板名稱，標(biāo)題，源文件為必選項(xiàng)；2.模板上傳中只有網(wǎng)站首頁模板頁面模板名稱必須為 ind

3、ex.jsp，其他頁面可根據(jù)比如標(biāo)題首拼的方式填寫，標(biāo)題的填寫規(guī)則是按照頁面功能或者特點(diǎn)進(jìn)行填寫，方便建立欄目過程中進(jìn)行選擇；3.模板類型推薦選擇，選擇模板類型之后，會在組件庫中有所選模板類型相關(guān)的推薦組件，此功能適用于不經(jīng)常使用 vsb 建站的人員使用。方便從龐大組件庫中拖拽需要組件到模板頁面上。也可以從“”選擇模板類型后的組件裝配圖位置，看到屬于當(dāng)前選擇模板類型下的模板組件拖拽樣例。如何拖拽組件？拖拽組件之前，需要先選擇“顯示表格 div 線”目的是輔助拖拽者將組件拖拽到對應(yīng)位置，如下圖所示：拖拽組件到頁面對應(yīng)模塊之前，如果頁面的對應(yīng)模塊有美工方便我們拖拽組件所預(yù)留的文字圖片信息，需要將其

4、刪除掉，然后再進(jìn)行組件拖拽，比如變換圖片位置，我們就需要將原有圖片刪除，如下圖所示：西安博達(dá)軟件有限公司XIAN WEBBER SOFTWARE CO., LTD.第 5 頁 共 10 頁然后我們從頁面左下角的組件庫中拖拽對應(yīng)組件到頁面中即可，拖拽組件的時(shí)候，鼠標(biāo)放到組件上面，變成十字花可拖拽狀態(tài)的時(shí)候，按住鼠標(biāo)左鍵不放，直接拖放到頁面的對應(yīng)位置即可，如下圖所示：此時(shí)，在彈出的網(wǎng)頁對話框中，我們可以對組件進(jìn)行重命名，重命名完畢后，點(diǎn)擊確定按鈕，會出現(xiàn)如下圖所示的組件狀態(tài)，如下圖所示：根據(jù)提示，點(diǎn)擊“”按鈕保存整個(gè)模板頁面即可。西安博達(dá)軟件有限公司XIAN WEBBER SOFTWARE CO.

5、, LTD.第 6 頁 共 10 頁通過同樣的方式，我們將首頁模板頁面上需要用組件替換掉的地方全部用組件替換掉，如下圖所示：拖拽完組件的首頁應(yīng)該如下圖所示：西安博達(dá)軟件有限公司XIAN WEBBER SOFTWARE CO., LTD.第 7 頁 共 10 頁同樣的方法，我們需要將欄目頁，內(nèi)容頁需要用組件替換的地方都用組件替換掉。欄目頁制作方法：西安博達(dá)軟件有限公司XIAN WEBBER SOFTWARE CO., LTD.第 8 頁 共 10 頁拖好組件后，應(yīng)該是如下所示界面：內(nèi)容頁制作方法：內(nèi)容頁同樣的方式，拖拽完成后，如下圖所示：此時(shí)，三個(gè)基礎(chǔ)的頁面就做好了，我們可以進(jìn)行網(wǎng)站創(chuàng)建第二步了。西安博達(dá)軟件有限公司XIAN WEBBER SOFTWARE CO., LTD.第 9 頁 共 10 頁專業(yè)的網(wǎng)站群產(chǎn)品和解決方案提供商附加：1.引用組件與復(fù)制組件區(qū)別：2.組件右上角“靜”，“動(dòng)”，“欄”，“DIV”是什么意思？3.組件上面這些按鈕是什么意思：地址：中國西安市高新區(qū)科技四路 209 號東辦公樓 4 層電話：+86-29-82681