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

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

2、對同學們講述案例：這是典型的電子商務網(wǎng)站運營失敗的案例，掌握電子商務網(wǎng)站的運營，是網(wǎng)站建設(shè)十分重要的一環(huán)。三、新課教學第五節(jié)DreamWeaver 8網(wǎng)站建設(shè)第四步-主頁制作案例一、站點設(shè)置、目錄建立、頁面設(shè)置、樣式設(shè)置四項工作完成之后，我們接著就要進行主頁制作。步驟01：頭部表格制作（1） 繪制1行1列表格；步驟02：導航表格制作（1）繪制1行1列表格；（2）設(shè)置表格參數(shù)：寬823像素，高30像素；其它參數(shù)設(shè)置同步驟01。步驟03：功能欄目制作在導航下部是一個具有時間顯示、搜索等功能的欄目，其制作方法是是：（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ù)同上。說明：上述四步驟，集中建立了表格的結(jié)構(gòu)，每一步制定時都不要忘記進行居中處理。步驟06：對頭部表格添加內(nèi)容點擊菜單【插入】【圖像】根據(jù)提示找到圖像文件，直接插入到表格中，最終效果如圖4-43所示。步驟07：為導航欄添加內(nèi)容（1） 設(shè)置導航背景顏色為#008FD5；（2） 錄入菜單漢字，中間用“|”分隔；（3）設(shè)置樣式表，【文本】【CSS樣式】【新建】，將樣式表文件命名為menu1，設(shè)（4）將導航欄樣式設(shè)置為menu1 步驟08：為功

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

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

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

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

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

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

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

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

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

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

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

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