第9次講稿電子商務(wù)網(wǎng)站建設(shè)與維護(hù)課程講稿

1、授課題目第四章 電子商務(wù)網(wǎng)站的實(shí)現(xiàn)工具Dreamweaver8備注授課方式講授課時(shí)2授課時(shí)間教學(xué)班級(jí)授課地點(diǎn)教學(xué)目標(biāo)1創(chuàng)建模板2重命名模板3刪除模板文件4建立可編輯區(qū)域5其他模板區(qū)域教學(xué)重點(diǎn)DreamWeaver網(wǎng)站建設(shè)第四步-主頁(yè)制作教學(xué)難點(diǎn)DreamWeaver 8網(wǎng)站建設(shè)第五步-模板設(shè)計(jì)教學(xué)內(nèi)容、過(guò)程、方法一、組織教學(xué)查考勤、巡視桌面、準(zhǔn)備上課二、導(dǎo)入新課電子商務(wù)專業(yè)的學(xué)生都知道，全面掌握網(wǎng)站建設(shè)的基本理論，熟悉使用DreamWeaver 8、Photoshop等工具，才可以把自己的創(chuàng)業(yè)理念變成實(shí)實(shí)在在的電子商務(wù)網(wǎng)站。可是網(wǎng)站如何才能獲得收益呢？看一看天府早報(bào)的這篇報(bào)導(dǎo)，相信你會(huì)有所收獲

2、對(duì)同學(xué)們講述案例：這是典型的電子商務(wù)網(wǎng)站運(yùn)營(yíng)失敗的案例，掌握電子商務(wù)網(wǎng)站的運(yùn)營(yíng)，是網(wǎng)站建設(shè)十分重要的一環(huán)。三、新課教學(xué)第五節(jié)DreamWeaver 8網(wǎng)站建設(shè)第四步-主頁(yè)制作案例一、站點(diǎn)設(shè)置、目錄建立、頁(yè)面設(shè)置、樣式設(shè)置四項(xiàng)工作完成之后，我們接著就要進(jìn)行主頁(yè)制作。步驟01：頭部表格制作（1） 繪制1行1列表格；步驟02：導(dǎo)航表格制作（1）繪制1行1列表格；（2）設(shè)置表格參數(shù)：寬823像素，高30像素；其它參數(shù)設(shè)置同步驟01。步驟03：功能欄目制作在導(dǎo)航下部是一個(gè)具有時(shí)間顯示、搜索等功能的欄目，其制作方法是是：（1）繪制1行3列表格；（2）設(shè)置表格參數(shù)：寬823像素，高35像素；步驟04：體部表

3、格制作（1）繪制1行2列表格；（2）其中第一列寬度為153像素步驟05：尾部表格制作(1)繪制1行1列表格；（2）參數(shù)設(shè)置為：寬823像素，高60像素，其它參數(shù)同上。說(shuō)明：上述四步驟，集中建立了表格的結(jié)構(gòu)，每一步制定時(shí)都不要忘記進(jìn)行居中處理。步驟06：對(duì)頭部表格添加內(nèi)容點(diǎn)擊菜單【插入】【圖像】根據(jù)提示找到圖像文件，直接插入到表格中，最終效果如圖4-43所示。步驟07：為導(dǎo)航欄添加內(nèi)容（1） 設(shè)置導(dǎo)航背景顏色為#008FD5；（2） 錄入菜單漢字，中間用“|”分隔；（3）設(shè)置樣式表，【文本】【CSS樣式】【新建】，將樣式表文件命名為menu1，設(shè)（4）將導(dǎo)航欄樣式設(shè)置為menu1 步驟08：為功

4、能欄目添加內(nèi)容（1）在第1列中錄入漢字：“本站時(shí)間：”左其后點(diǎn)擊【插入】【日期】，選擇合適的日期格式，并選擇適當(dāng)?shù)臅r(shí)間格式，單擊“確定”按鈕，插入日期時(shí)間；（2）在第2列中錄入（3）將第3列背景色設(shè)置為#8ECFFF；（4）在第3列中插入表單，在表單中依次插入文本框、按鈕、列表框，并對(duì)其進(jìn)行相應(yīng)設(shè)置；最終效果如圖4-47所示。步驟09：制作左側(cè)嵌套表格（1）左則是由四個(gè)表格上下排列組成，每個(gè)表格均為2行1列，因此先建一個(gè)2行1列表格，其寬度為100%像素，高度可先設(shè)置為200像素，其中第一行30像素。具體高度可根據(jù)圖片進(jìn)行調(diào)整；（2）設(shè)置表格背景顏色為#DDF5FF；（3）在第一列中插入“招生

5、公告”圖片；（4）復(fù)制整個(gè)表格，粘貼三次，并修改每一個(gè)表格頭部圖片；（5）向相應(yīng)表格中輸入文字。步驟10：制作右側(cè)嵌套表格，將右側(cè)結(jié)構(gòu)制作完畢右側(cè)表格制作方法與左側(cè)原理相同，操作大同小異。請(qǐng)大家按以下順序進(jìn)行制作。（1）在尾部直接錄入漢字，設(shè)置樣式表文件即可。二、主頁(yè)制作技巧三則1我在網(wǎng)頁(yè)中復(fù)制的文字，粘貼到DreamWeaver 8中時(shí)，他總是帶有原來(lái)網(wǎng)頁(yè)的格式，請(qǐng)問(wèn)如何只復(fù)制其中的文本文字呢？答：在DreamWeaver 8中復(fù)制和粘貼文本有兩種，一是標(biāo)準(zhǔn)的方式，也就是您使用的那種方式；另一種就是僅復(fù)制粘貼文本，他忽視了HTML格式，只復(fù)制文本，方法是在復(fù)制和粘貼時(shí)多按一個(gè)“Shift”鍵

6、。2有的網(wǎng)頁(yè)圖片鏈接很特別，鼠標(biāo)放上去時(shí)他就會(huì)發(fā)生變化，變成另外的圖片，請(qǐng)問(wèn)如何制作？答：這個(gè)就是替換圖片鏈接，沒(méi)有單擊時(shí)是一張圖片，當(dāng)把鼠標(biāo)移動(dòng)到圖片上的時(shí)候變成了另一張圖片，利用DreamWeaver 8能方便地制作這種替換鏈接。預(yù)備兩張大小相同的圖片，先在網(wǎng)頁(yè)上放一張圖片，然后在“圖片屬性”對(duì)話框中的Link中配置圖片指向的鏈接，按“F8”鍵開(kāi)啟“Behaviors”對(duì)話框，單擊“+”號(hào)，選擇“Swap Image”開(kāi)啟“Swap Image”配置視窗，點(diǎn)選“Browse”配置需要替換的圖片，單擊“OK”。3我在網(wǎng)上下載了許多DreamWeaver 8插件，如何使用他們呢？答：Dream

7、Weaver 8具備插件管理器Extension Manager，他能夠?qū)崿F(xiàn)插件的全自動(dòng)管理，您能夠到下載得到。安裝后，就能夠從DreamWeaver 8中啟動(dòng)管理器。具體方法是選擇“Command/Manage Extensions”命令啟動(dòng)管理器。三、Hao123首頁(yè)的制作剖析網(wǎng)址之家（）是一個(gè)非常簡(jiǎn)潔的主頁(yè)，我們以表格排版的方式，用DreamWeaver 8做為實(shí)現(xiàn)工具，具體剖析其排版方法，以期拋磚引玉，引發(fā)大家的智慧思考，促成學(xué)生網(wǎng)站制作技術(shù)的成熟。1整體結(jié)構(gòu) 網(wǎng)址之家用DreamWeaver 8做為實(shí)現(xiàn)工具，可以用九個(gè)表格來(lái)實(shí)現(xiàn)。當(dāng)然，不同人制作可能采用的表格數(shù)量不相同。各表格功能如

8、下： （1）第一個(gè)表格，放網(wǎng)頁(yè)第一行內(nèi)容，即郵箱登錄部分所在的行；（2）第二個(gè)表格，放置第二行，即Logo所在行；（3）第三個(gè)表格，放置第三四行，即百度工具行；（4）第四個(gè)表格，放置第五行，即導(dǎo)航所在行；（5）第五個(gè)表格，放置體部?jī)?nèi)容，這個(gè)表格劃分兩列，每一列通過(guò)嵌套又增加了許多行，用以放置更多的網(wǎng)址鏈接；（6）第六個(gè)表格，放置實(shí)用查詢、常用軟件、游戲?qū)ｎ}、好站輪播等內(nèi)容；（7）第七個(gè)表格，放置百度查詢；（8）第八個(gè)表格，放置網(wǎng)站的“本站幫助”等網(wǎng)站的尾部?jī)?nèi)容。2表格的制作該網(wǎng)站，用表格實(shí)現(xiàn)極為簡(jiǎn)單，在實(shí)際制作時(shí)，注意體部表格嵌套的實(shí)現(xiàn)，同時(shí)注意綠色邊框的實(shí)現(xiàn)技巧。3預(yù)覽時(shí)不能出現(xiàn)表格的邊框。

9、第六節(jié) DreamWeaver 8網(wǎng)站建設(shè)第五步-模板設(shè)計(jì)在我們制作網(wǎng)站的過(guò)程中，為了統(tǒng)一風(fēng)格，很多頁(yè)面會(huì)用到相同的布局、圖片和文字元素。為了避免大量的重復(fù)勞動(dòng)，可以使用DreamWeaver 8提供的模板功能，將具有相同版面結(jié)構(gòu)的頁(yè)面制作為模板，將相同的元素（如導(dǎo)航欄）制作為庫(kù)項(xiàng)目，并存放在庫(kù)中供隨時(shí)調(diào)用。一、創(chuàng)建模板模板的創(chuàng)建有三種方式。1直接創(chuàng)建模板選擇【窗口】【資源】命令，打開(kāi)“資源”面板，切換到模板子面板，如圖4-50所示。單擊模板面板上的“擴(kuò)展”按鈕，在彈出菜單中選擇“新建模板”，此時(shí)，在瀏覽窗口出現(xiàn)一個(gè)未命名的模板文件，給模板命名。如圖4-51所示。然后單擊“編輯”按鈕，打開(kāi)模板

10、進(jìn)行編輯。編輯完成后，保存模板，完成模板建立。2將普通網(wǎng)頁(yè)另存為模板 打開(kāi)一個(gè)已經(jīng)制作完成的網(wǎng)頁(yè)，刪除網(wǎng)頁(yè)中不需要的部分，保留整個(gè)網(wǎng)站各頁(yè)面共同需要的區(qū)域。選擇“文件/另存為模板”命令將網(wǎng)頁(yè)另存為模板。在彈出的“另存模板”對(duì)話框中，“站點(diǎn)”下拉列表框用來(lái)設(shè)置模板保存的站點(diǎn)。“現(xiàn)存的模板”選框顯示了當(dāng)前站點(diǎn)的所有模板。單擊“另存模板”對(duì)話框中的“保存”按鈕，就把當(dāng)前網(wǎng)頁(yè)轉(zhuǎn)換為了模板，同時(shí)將模板另存到選擇的站點(diǎn)。單擊“保存”按鈕，保存模板。系統(tǒng)將自動(dòng)在根目錄下創(chuàng)建Template文件夾，并將創(chuàng)建的模板文件保存在該文件夾中。在保存模板時(shí)，如果模板中沒(méi)有定義任何可編輯區(qū)域，系統(tǒng)將顯示警告信息。我們可以

11、先單擊“確定”，以后再定義可編輯區(qū)域。3、從文件菜單新建模板選擇【文件】【新建】命令，打開(kāi)“新建文檔”對(duì)話框，然后再類別中選擇“模板頁(yè)”，并選取相關(guān)的模板類型，直接單擊“創(chuàng)建”按鈕即可。二、重命名模板若要在“資源”面板中重命名模板，請(qǐng)執(zhí)行以下操作：1在“資源”面板（【窗口】【資源】）中，選擇面板左側(cè)的“模板”類別2重命名單擊模板的名稱以選擇該模板。 3再次單擊模板的名稱以便使文本可選，然后輸入一個(gè)新名稱。 這種重命名方式與在 Windows 資源管理器中對(duì)文件進(jìn)行重命名的方式相同。4若要更新站點(diǎn)中所有基于此模板的文檔，請(qǐng)單擊“更新”。如果不想更新基于此模板的任何文檔，則單擊“不更新”。 三、刪

12、除模板文件1在“資源”面板（【窗口】【資源】）中，選擇面板左側(cè)的“模板”類別。2重命名單擊模板的名稱以選擇該模板。3單擊面板底部的“刪除”按鈕，然后確認(rèn)要?jiǎng)h除該模板。 一旦刪除模板文件，則無(wú)法對(duì)其進(jìn)行檢索。該模板文件將被從站點(diǎn)中刪除?；谝褎h除模板的文檔不會(huì)與此模板分離；它們保留該模板文件在被刪除前所具有的結(jié)構(gòu)和可編輯區(qū)域。四、建立可編輯區(qū)域模板創(chuàng)建好后，要在模板中建立可編輯區(qū)，只有在可編輯區(qū)里，我們才可以編輯網(wǎng)頁(yè)內(nèi)容。可以將網(wǎng)頁(yè)上任意選中的區(qū)域設(shè)置為可編輯區(qū)域，但是最好是基于HTML代碼的，這樣在制作的時(shí)候更加清楚。在文檔窗口中，選中需要設(shè)置為可編輯區(qū)域的部分，單擊常用快捷欄的“模板”按鈕，

13、在彈出菜單中選擇“可編輯區(qū)域”項(xiàng)。如圖4-54所示。在彈出的“新建可編輯區(qū)域”對(duì)話框中給該區(qū)域命名，然后單擊“確定”按鈕。新添加的可編輯區(qū)域有藍(lán)色標(biāo)簽，標(biāo)簽上是可編輯區(qū)域的名稱。如果希望刪除可編輯區(qū)域，可以將光標(biāo)置于要?jiǎng)h除的可編輯區(qū)域內(nèi)，選擇“修改/模板/刪除模板標(biāo)記”命令，光標(biāo)所在區(qū)域的可編輯區(qū)即被刪除。這樣模板文件就創(chuàng)建好了。五、其他模板區(qū)域模板中除了可以插入最常用的“可編輯區(qū)域”外，還可以插入一些其他類型的區(qū)域，分別為“可選區(qū)域”、“重復(fù)區(qū)域”、“可編輯可選區(qū)域”和“重復(fù)表格”。1、可選區(qū)域可選區(qū)域是模板中的區(qū)域，用戶可將其設(shè)置為在基于模板的文件中顯示或隱藏。當(dāng)要為在文件中顯示的內(nèi)容設(shè)置

14、條件時(shí)，即可使用可選區(qū)域。2、重復(fù)區(qū)域重復(fù)區(qū)域時(shí)可以根據(jù)需要在基于模板的頁(yè)面中負(fù)值任意次數(shù)的模板部分。重復(fù)區(qū)域通常用于表格，也可以為其他頁(yè)面元素定義重復(fù)區(qū)域。3、可編輯可選區(qū)域是可選區(qū)域的一種，可以設(shè)置顯示或隱藏所選區(qū)域，并且可以編輯該區(qū)域中的內(nèi)容。1制作返回前頁(yè)按鈕在拆分視圖狀態(tài)下，在按鈕代碼中添加onClick=javascript:window.history.go(-1)2制作關(guān)閉窗口按鈕在拆分視圖狀態(tài)下，在按鈕代碼中添加onClick=javascript:window.close()3制作帶背景顏色的按鈕用CSS樣式4制作打印該頁(yè)按鈕在拆分視圖狀態(tài)下，在按鈕代碼中添加onClick

15、=javascript:window.print()表單主要用來(lái)得到用戶的反饋信息，如進(jìn)行會(huì)員注冊(cè)、網(wǎng)上調(diào)查、信息反饋等，然后將這些信息提交給服務(wù)器進(jìn)行處理。本次制作實(shí)務(wù)主要引領(lǐng)大家用DreamWeaver 8制作表單。1創(chuàng)建電子郵件表單（1）選擇“插入-表單-表單”，在屬性面板中，將表單名稱設(shè)置為form1，在“動(dòng)作”文本框中輸入，選擇post方法（2）在表單中插入7行2列的表格，將背景顏色設(shè)置為#f5f5f5，將第一行-第六行單元格背景顏色設(shè)置為#ffffff，在第1列單元格中輸入相應(yīng)的文字，將光標(biāo)置于第1行第2列單元格中，選擇“插入-表單-文本域”屬性改為單行文本，最多20個(gè)字符（3） 在地區(qū)后插入“列表/菜單”點(diǎn)擊加號(hào)添加新項(xiàng)目“北京、上海、廣東”2如何更改文件域的樣式選中文件域，在拆分視圖狀態(tài)下，修改文件域代碼如下，<input type=”file” style=”border:1px solid blue;background:green;” name=”file”>注：border:表示邊框的粗細(xì)；Solid:表示邊框顏色，這里設(shè)置為藍(lán)色（blue）；Background:表示背景顏色，這里設(shè)置為綠色(green)3如何避免表單撐開(kāi)表格將<form>標(biāo)簽放在<tr>和<t