中文版DreamweaverCS6網(wǎng)頁設(shè)計教程課件

1、2,第12章 實 驗,12.1 實驗一：Dreamweaver CS6 簡介 1. 目的和要求 (1)掌握Dreamweaver CS6常用面板的使用方法。 (2)掌握Dreamweaver CS6的文件操作。 2. 上機準(zhǔn)備 (1)了解Dreamweaver CS6的新增功能。 (2)了解Dreamweaver CS6的安裝、刪除和啟動。 (3)了解Dreamweaver CS6的工作界面。 (4)了解Dreamweaver CS6的一般操作。 3. 上機操作實例 創(chuàng)建一個網(wǎng)頁并在網(wǎng)頁中插入文檔。,3,12.1 實驗一：Dreamweaver CS6 簡介,4. 操作步驟 (1)選擇“文件”

2、|“新建”菜單命令，打開“新建文檔”對話框，如圖12-1所示。 (2)選擇“空白頁”選項卡中的HTML選項，在“布局”列表框中選擇“”選項，并單擊“創(chuàng)建”按鈕，結(jié)果如圖12-2所示。 (3)切換文檔的視圖并向文檔中添加內(nèi)容。,4,12.2 實驗二：站點的設(shè)計,1. 目的和要求 (1)掌握建立站點的方法。 (2)掌握編輯站點的方法。 2. 上機準(zhǔn)備 (1)了解規(guī)劃站點。 (2)了解建立站點。 (3)了解定義本地與遠程站點。 (4)了解設(shè)置測試服務(wù)器。 (5)了解編輯站點。,5,12.2 實驗二：站點的設(shè)計,3. 上機操作 4. 操作步驟 1)創(chuàng)建本地文件夾 2)定義本地站點 3)管理站點文件 4

3、)打包上傳到局域網(wǎng) 5)遠程與本地站點的同步,6,12.3 實驗三：超鏈接的使用,1. 目的和要求 (1)掌握超鏈接的使用方法。 (2)掌握修改超鏈接樣式的方法。 2. 上機準(zhǔn)備 (1)了解創(chuàng)建超鏈接的方法。 (2)了解管理超鏈接的方法。 (3)了解測試超鏈接的方法。 (4)了解修改鏈接樣式的方法。,7,12.3 實驗三：超鏈接的使用,3. 上機操作 建立如圖12-18所示的站點地圖。 4. 操作步驟 (1)建立站點test，并建立相關(guān)文件及文件夾。 (2)設(shè)置main.html為首頁。 (3)添加相關(guān)超鏈接。,8,12.4 實驗四：圖像與多媒體,1. 目的和要求 (1)掌握如何插入圖像及其屬

4、性設(shè)置。 (2)掌握如何插入Flash對象及其屬性設(shè)置。 2. 上機準(zhǔn)備 (1)了解插入圖像的方法。 (2)了解設(shè)置圖像屬性的方法。 (3)了解插入Flash對象的方法。 (4)了解插入Shockwave與Java Applet對象的方法。 3. 上機操作 4. 操作步驟 1) 插入 Flash 元素 2) 使用 Flash 元素檢查器編輯 Flash 元素的屬性 3) 設(shè)置和圖像有關(guān)的各選項。 4)保存并預(yù)覽,9,12.5 實驗五：CSS樣式,1. 目的和要求 (1)掌握如何使用CSS樣式。 (2)掌握如何設(shè)置CSS樣式的參數(shù)。 2. 上機準(zhǔn)備 (1)了解CSS概述。 (2)了解如何定義和使

5、用CSS樣式。 (3)了解如何設(shè)置CSS樣式參數(shù)。 3. 上機操作 1) 光暈字 2) 陰影字 3) 遮罩字 4) 動感字,10,12.6 實驗六：表格和框架,1. 目的和要求 (1)掌握表格的使用方法及屬性設(shè)置。 (2)掌握布局視圖的使用。 (3)掌握框架的使用。 (4)掌握層的使用方法。 2. 上機準(zhǔn)備 (1)了解表格的使用。 (2)了解布局視圖的使用。 (3)了解框架的使用。 (4)了解層的屬性設(shè)置。,11,12.6 實驗六：表格和框架,3. 上機操作 制作一個個人網(wǎng)站，效果如圖12-35所示。,12,12.6 實驗六：表格和框架,4. 操作步驟 1) 定義本地站點 2) 采用框架設(shè)計整

6、體頁面 3) left.htm頁面的設(shè)計 4) woaiwojia.htm頁面的設(shè)計 5) qingchunjiyu.htm頁面的設(shè)計 6) sheyingxinshang.htm頁面的設(shè)計 7) youqinglianjie.htm頁面的設(shè)計,13,12.7 實驗七：行為的使用,1. 目的和要求 (1)掌握如何使用行為面板。 (2)掌握使用內(nèi)置行為的方法。 2. 上機準(zhǔn)備 (1)了解使用行文面板的方法。 (2)了解使用內(nèi)置行為的方法。 (3)了解下載和安裝擴展行為的方法。,14,12.7 實驗七：行為的使用,3. 上機操作 4. 操作步驟 1) 改變文本的顏色 2)改變文字的背景 3) 改變

7、文字的大小,15,12.8 實驗八：模板和庫,1 目的和要求 (1)掌握如何編輯模板和應(yīng)用模板。 (2)掌握庫的應(yīng)用。 2. 上機準(zhǔn)備 (1)了解創(chuàng)建模板的方法。 (2)了解編輯模板的方法。 (3)了解應(yīng)用模板的方法。 (4)了解應(yīng)用庫的方法。,16,12.8 實驗八：模板和庫,3. 上機操作 網(wǎng)頁制作不僅是一種藝術(shù)上的創(chuàng)造，還是一種工業(yè)化的生產(chǎn)。用戶制作網(wǎng)頁，不僅要頁面精美，還要提高制作效率。因此，利用 Dreamweaver CS6中的高效建站工具模板，可以使頁面的風(fēng)格保持一致，這樣網(wǎng)頁看起來很和諧并且統(tǒng)一。本實例利用模板制作了冬、夏不同的頁面。最后效果如圖12-80和圖12-81所示。,

8、17,12.8 實驗八：模板和庫,4. 操作步驟 1) 制作空模板 2) 用模板制作冬、夏網(wǎng)頁 3) 為冬、夏網(wǎng)頁快速換殼,18,12.9 實驗九：表單的使用,1. 目的和要求 (1)掌握創(chuàng)建表單的方法。 (2)掌握表單對象的使用方法。 2. 上機準(zhǔn)備 (1)了解創(chuàng)建表單的方法 (2)了解創(chuàng)建表單對象的方法 3. 上機操作 4. 操作步驟,19,12.10 實驗十：數(shù)據(jù)庫,1. 目的和要求 (1)掌握如何安裝Web服務(wù)器。 (2)掌握如何創(chuàng)建數(shù)據(jù)庫與數(shù)據(jù)源。 (3)掌握如何創(chuàng)建動態(tài)網(wǎng)頁。 2. 上機準(zhǔn)備 (1)了解安裝Web服務(wù)器的方法。 (2)了解創(chuàng)建數(shù)據(jù)庫與數(shù)據(jù)源的方法。 (3)了解創(chuàng)建動態(tài)網(wǎng)頁的方法。,20,12.10 實驗十：數(shù)據(jù)庫,3. 上機操作 4. 操作步驟 1) 設(shè)計數(shù)據(jù)庫 2) 設(shè)計留言板各頁 (1) 顯示留言頁面(index.asp)。 (2) 提交留言頁面(post.asp