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

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

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

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

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

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

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

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

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