電子商務網(wǎng)頁制作09課件

1、主編：謝嶸一個網(wǎng)站應具有統(tǒng)一的風格，若對網(wǎng)站下包括的所有網(wǎng)頁都重復添加相同的Logo、導航條、圖像等這樣效率太低，假若以前的網(wǎng)頁都統(tǒng)一為紅為風格的，現(xiàn)在要改為綠色風格，那我們是否需要一張張的去修改網(wǎng)頁呢？這樣工作量太大。Dreamweaver CS4中的模板功能為我們提供了一個方便，利用模板和庫來制作網(wǎng)頁，它將布局和內(nèi)容分開，在設計好布局后將其存儲為模板，在布局一樣的網(wǎng)頁中可直接用模板來創(chuàng)建網(wǎng)頁，使用模板和庫作后期的修改也是非常快捷方便的。 項目8 制作網(wǎng)頁動態(tài)效果 項目導學 體驗活動一：使用模板創(chuàng)建網(wǎng)頁活動任務：創(chuàng)建一個模板，用網(wǎng)站中的模板來制作網(wǎng)頁?；顒又笇В耗０宓膭?chuàng)建和保存與普通網(wǎng)頁有差

2、異，在制作過程中要注意。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動一：使用模板創(chuàng)建網(wǎng)頁活動步驟：建一個站點，在“新建”中點選“更多”按鈕。選擇“空模板”選項，模板類型選擇“HTML模板”，布局選擇“無”最后單擊“創(chuàng)建”按鈕。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動一：使用模板創(chuàng)建網(wǎng)頁活動步驟：這時會看到打開了一張空白頁面，這張頁面就是用于編輯網(wǎng)頁模板的。在模板中設計出網(wǎng)頁的整體布局，網(wǎng)頁的頭部和底部制作出來，將中間的具體內(nèi)容部分空中。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動一：使用模板創(chuàng)建網(wǎng)頁活動步驟：單擊“文件”菜單下的“保存”按鈕，在彈出的對話框中選擇“確定”按鈕。在“另存模板”對話框中點擊“保存”按鈕

3、。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動一：使用模板創(chuàng)建網(wǎng)頁活動步驟：文件窗口中會看到一個后綴為“.dwt”的網(wǎng)頁模板文件。打開其它網(wǎng)頁，如“untitled.html”。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動一：使用模板創(chuàng)建網(wǎng)頁活動步驟：點擊“資源”窗口中的按鈕 ，選擇剛創(chuàng)建的網(wǎng)頁模板，單擊“應用”按鈕。應用模板后便可以在該網(wǎng)頁中看到應用模板的效果，并將其保存。可以將需要應用模板的網(wǎng)頁都進行這樣的設置。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動二：對模板網(wǎng)頁進行修改活動任務：對模板網(wǎng)頁中的內(nèi)容進行修改，并應用到其它頁面中。活動指導：模板運用到普通網(wǎng)頁使我們感受到它的快捷方便，若想修改網(wǎng)頁中的某一部分是

4、不是要逐一修改每張網(wǎng)頁呢？當然不是，我們只需要對模板網(wǎng)頁進行修改就可以了。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動二：對模板網(wǎng)頁進行修改活動步驟：打開需要修改的模板，比如通過“頁面屬性”對網(wǎng)頁中的文本的顏色及字體進行修改，再換一張圖像。單擊“文件”菜單下的“保存”命令會彈出“更新模板文件”對話框，單擊“更新”按鈕。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動二：對模板網(wǎng)頁進行修改活動步驟：看到“更新頁面”顯示完成時，單擊“關(guān)閉”按鈕。這時所有運用了模板的網(wǎng)頁便會自動更新。 項目8 制作網(wǎng)頁動態(tài)效果 活動小結(jié)完成體驗活動二后，填寫下表 項目8 制作網(wǎng)頁動態(tài)效果 運用模板創(chuàng)建網(wǎng)頁的優(yōu)勢：模板網(wǎng)頁的修改：1 打

5、開模板網(wǎng)頁2 對其需要改進的部分作修改34體驗活動三：創(chuàng)建庫活動任務：選擇一個對象來創(chuàng)建庫?；顒又笇В寒斘覀兊木W(wǎng)站中的很多網(wǎng)頁要用到某一個文件時，可以將其創(chuàng)建為庫，方便隨時調(diào)用和批量編輯處理。庫中的所有資源都稱為庫項目。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動三：創(chuàng)建庫活動步驟：選中要創(chuàng)建庫的文件，比如這里選擇一個圖像。單擊“修改”菜單下的“庫/增加對象到庫”命令。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動三：創(chuàng)建庫活動步驟：“資源”窗口庫里面就可看到剛才選擇的圖像，庫的后綴是“.lbi”。網(wǎng)頁中顯示了插入的庫項目。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動四：修改庫活動任務：對庫項目進行修改，并應用到網(wǎng)頁中

6、?；顒又笇В喝粝胄薷乃芯W(wǎng)頁中的這個圖像只需要在庫中進行處理，那么所有使用了該庫項目的網(wǎng)頁都會自動更新。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動四：修改庫活動步驟：打開“資源”窗口點擊庫圖標選擇要編輯的文件，單擊右下角的“編輯”按鈕。比如將圖像進行裁剪。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動四：修改庫活動步驟：修改完畢后進行保存，完成后單擊“關(guān)閉”按鈕。打開網(wǎng)頁會看到所有運用了該庫項目的網(wǎng)頁都更新了。 項目8 制作網(wǎng)頁動態(tài)效果 活動小結(jié)完成體驗活動后，填寫下表 項目8 制作網(wǎng)頁動態(tài)效果 操作步驟創(chuàng)建一個庫項目：1 選中要作為創(chuàng)建庫的對象2 點選“修改”菜單下的“庫/增加對象到庫”命令34相關(guān)知識模板的運用：打開模板將光標定位在需要設定為可編輯區(qū)域的位置。點擊“插入”菜單下的“模板對象/可編輯區(qū)域”命令，單擊“確定”按鈕即可。 項目8 制作網(wǎng)頁動態(tài)效果 相關(guān)知識模板的運用：創(chuàng)建可編輯區(qū)域后便會顯