dreamweaver8網(wǎng)頁(yè)設(shè)計(jì)教案

1、初識(shí) Dreamweaver 8課題： Dreamweaver8簡(jiǎn)介及創(chuàng)建文檔一、教學(xué)基本內(nèi)容1、什么是網(wǎng)頁(yè)和網(wǎng)站2、網(wǎng)頁(yè)的分類3、網(wǎng)頁(yè)中的常用術(shù)語(yǔ)4、網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)知識(shí)5、認(rèn)識(shí) Dreamweaver 86、Dreamweaver 8 的基本操作7、Dreamweaver 8 工作界面介紹二、課型：新授課三、課時(shí)： 1 個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：什么是網(wǎng)頁(yè)和網(wǎng)站難點(diǎn)： 1、網(wǎng)頁(yè)的分類2、網(wǎng)頁(yè)設(shè)計(jì)的一般步驟3、Dreamweaver 8 的基本操作五、教學(xué)目的1 、對(duì) Dreamweaver 這個(gè)制作網(wǎng)頁(yè)的工具及網(wǎng)頁(yè)有一定的認(rèn)識(shí)，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的興趣2、一定要學(xué)會(huì)建立一個(gè)空白網(wǎng)頁(yè)3、

2、會(huì)對(duì)頁(yè)面有一個(gè)簡(jiǎn)單的設(shè)置六、教學(xué)過(guò)程1、什么是網(wǎng)頁(yè)和網(wǎng)站（1）網(wǎng)頁(yè)網(wǎng)頁(yè)是由 HTML（超級(jí)文本標(biāo)識(shí)語(yǔ)言）或者其他語(yǔ)言編寫的，通過(guò)IE 瀏覽器編譯后供用戶獲取信息的頁(yè)面，它又稱為Web 頁(yè)，其中可包含文字、圖像、表格、動(dòng)畫和超級(jí)鏈接等各種網(wǎng)頁(yè)元素。（2）網(wǎng)站網(wǎng)站就是一個(gè)或多個(gè)網(wǎng)頁(yè)的集合。從廣義上講，網(wǎng)站就是當(dāng)網(wǎng)頁(yè)發(fā)布到Internet上以后，能通過(guò)瀏覽器在Internet上訪問(wèn)的頁(yè)面。門戶網(wǎng)站職能網(wǎng)站專業(yè)網(wǎng)站個(gè)人網(wǎng)站2、網(wǎng)頁(yè)的分類（ 1）按所處位置分類按網(wǎng)頁(yè)在網(wǎng)站中所處的位置可將網(wǎng)頁(yè)分為主頁(yè)和子頁(yè)兩類。(2) 按表現(xiàn)形式分類按網(wǎng)頁(yè)的表現(xiàn)形式可將網(wǎng)頁(yè)分為靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)。3、網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)知識(shí)（

3、1）設(shè)計(jì)網(wǎng)頁(yè)的原則A、整體規(guī)劃B、鮮明的主題C、善用圖像D、醒目的導(dǎo)航E、及時(shí)更新F、易記的網(wǎng)站名稱G、通用網(wǎng)頁(yè)H、動(dòng)畫適量（2）網(wǎng)頁(yè)設(shè)計(jì)的一般步驟A、規(guī)劃網(wǎng)站B、收集整理資源C、配置站點(diǎn)D、創(chuàng)建頁(yè)面E、測(cè)試站點(diǎn)F、發(fā)布站點(diǎn)G、維護(hù)、更新站點(diǎn)（3）網(wǎng)頁(yè)制作的常用工具A、網(wǎng)頁(yè)設(shè)計(jì)軟件Dreamweaver是目前使用最多的網(wǎng)頁(yè)設(shè)計(jì)軟件。B、圖像處理軟件制作網(wǎng)頁(yè)圖像的軟件種類繁多， 大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)人員選擇的是Fireworks 或 Photoshop。C、動(dòng)畫制作軟件網(wǎng)頁(yè)動(dòng)畫制作中最常用的軟件非Flash 莫屬。4、 Dreamweaver 8 的基本操作A、啟動(dòng) Dreamweaver 8B、新建

4、空白 HTML網(wǎng)頁(yè)C、保存網(wǎng)頁(yè)文檔D、預(yù)覽網(wǎng)頁(yè)效果E、退出 Dreamweaver 8第一章 Dreamweaver8 概述課題： Dreamweaver8簡(jiǎn)介及創(chuàng)建文檔一、教學(xué)基本內(nèi)容1、Dreamweaver8 的工作界面2、建立 html 文檔二、課型：新授課三、課時(shí)： 1 個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：熟悉 Dreamweaver8工作界面中各個(gè)工具的作用難點(diǎn)： 1、各個(gè)面板的調(diào)用2、建立一個(gè) HTML的網(wǎng)頁(yè)3、插處圖像五、教學(xué)目的1 、對(duì) Dreamweaver 這個(gè)制作網(wǎng)頁(yè)的工具及網(wǎng)頁(yè)有一定的認(rèn)識(shí)，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的興趣2、一定要學(xué)會(huì)建立一個(gè)空白網(wǎng)頁(yè)3、會(huì)對(duì)頁(yè)面有一個(gè)簡(jiǎn)單的設(shè)置

5、六、教學(xué)過(guò)程1、引入（ 1）為什么要用 Dreamweaver 而不用 Frontpage?Dreamweaver 是 Macromedia 公司的出品，它以程序小、運(yùn)行速度快、所制作網(wǎng)頁(yè)代碼少這些優(yōu)點(diǎn)，贏得了網(wǎng)頁(yè)制作人員的喜愛(ài)。（ 2）相關(guān)工具的介紹因?yàn)檫@是第一節(jié)網(wǎng)頁(yè)制作課，所以首先要簡(jiǎn)單介紹下制作網(wǎng)頁(yè)的一些相關(guān)工具，比如與Dreamweaver合稱為網(wǎng)頁(yè)三劍客的Flash 和 Fireworks 。2、講授新課（ 1） Dreamweaver 的界面a 文檔窗口：主菜單、工具欄、底部啟動(dòng)條、文檔編輯區(qū)b 對(duì)象面板：標(biāo)準(zhǔn)、表格、表單、框架、特殊、文件廷冖隱藏、字符c啟動(dòng)面板： 站點(diǎn)管理、 代

6、碼檢查、 HTML樣式、 CSS樣式、行為、歷史記錄、 資源管理d屬性面板：隨目前對(duì)象不同而內(nèi)容不同(2) 創(chuàng)建 HTML網(wǎng)頁(yè)(3) 在網(wǎng)頁(yè)中插入圖像輸入文字以后，插入圖像，并對(duì)圖像設(shè)置對(duì)齊的方式，使之與文字呈混排的狀態(tài)。3、鞏固練習(xí)練習(xí)使用界面中的各個(gè)工具七、作業(yè)處理根據(jù)本節(jié)所學(xué)的內(nèi)容，課堂上練習(xí)創(chuàng)建一個(gè)空白網(wǎng)頁(yè)，并且輸入一段文字，在文本的左邊插入一張圖片八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT 課件進(jìn)行演示。第二章創(chuàng)建與規(guī)劃站點(diǎn)課題：規(guī)劃站點(diǎn)及創(chuàng)建靜態(tài)站點(diǎn)一、教學(xué)基本內(nèi)容1、站點(diǎn)規(guī)劃概念2、站點(diǎn)規(guī)劃的方法3、站點(diǎn)的組成4、定義站點(diǎn)二、課型：新授課

7、三、課時(shí)： 2 個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)： 1、站點(diǎn)組成2、如何創(chuàng)建靜態(tài)站點(diǎn)難點(diǎn)： 1、站點(diǎn)的定義2 、編輯、刪除站點(diǎn)五、教學(xué)目的1 、掌握建立靜態(tài)站點(diǎn)的流程2 、掌握靜態(tài)站點(diǎn)的基本操作六、教學(xué)過(guò)程1 、復(fù)習(xí)引入由上節(jié)所學(xué)習(xí)的建立HTML網(wǎng)頁(yè)引出站點(diǎn)概念2、講授新課（1）站點(diǎn)規(guī)劃概念及方法概念：所謂本地站點(diǎn)，就是指定本地硬盤中存放遠(yuǎn)程站點(diǎn)所有文檔的文件夾方法：規(guī)劃網(wǎng)站一般需要從3 個(gè)方面去思考，即網(wǎng)站的主題、網(wǎng)站的內(nèi)容和網(wǎng)站的對(duì)象。（2）創(chuàng)建本地站點(diǎn)站點(diǎn)組成： Dreamweaver8 站點(diǎn)由 3 部分組成，具體內(nèi)容取決于環(huán)境和所開發(fā)的Web站點(diǎn)類型。包括本地文件夾、遠(yuǎn)程文件夾、動(dòng)態(tài)頁(yè)文件

8、夾定義站點(diǎn)：（01）選擇“站點(diǎn)” | “新建站點(diǎn)”選項(xiàng)， 或者選擇“站點(diǎn)”“管理站點(diǎn)”選項(xiàng)，在彈出的“站點(diǎn)管理”對(duì)話框中單擊“新建”按鈕，彈出對(duì)話框，在“基本”選項(xiàng)卡的站點(diǎn)名稱輸入框中輸入所要?jiǎng)?chuàng)建站點(diǎn)的名稱，如圖2-5 所示（02）輸入站點(diǎn)名稱后，單擊“下一步”按鈕，在彈出的是否使用服務(wù)器技術(shù)對(duì)話框中，根據(jù)自己所制作網(wǎng)頁(yè)的類型，確定是否使用服務(wù)器技術(shù)。在此制作靜態(tài)頁(yè)面，因此不使用服務(wù)器技術(shù)，如圖 2-6 所示。（03）單擊“下一步”按鈕，在彈出的設(shè)置站點(diǎn)文件夾對(duì)話框中，選擇或輸入一個(gè)本地文件夾作為“本地站點(diǎn)文件夾”，如圖 2-7 所示 。（04）選擇了本地站點(diǎn)文件夾后，單擊該對(duì)話框中的“下一步

9、”按鈕，進(jìn)入設(shè)置是否與遠(yuǎn)程服務(wù)器相連的對(duì)話框，在這里選擇“無(wú)”，設(shè)置為不與遠(yuǎn)程服務(wù)器相連，如圖 2-9 所示。（05）單擊“下一步”按鈕，便會(huì)顯示在站點(diǎn)定義向?qū)е兴x擇設(shè)置的詳細(xì)報(bào)告，如果感覺(jué)滿意，單擊“完成”按鈕， 完成本網(wǎng)站的創(chuàng)建， 如圖 2-10 所示；否則單擊“上一步”按鈕重新修改各項(xiàng)設(shè)置。（3）站點(diǎn)的基本操作其基本操作包括編輯、復(fù)制、刪除站點(diǎn)。3、鞏固練習(xí)練習(xí)站點(diǎn)的建立，及其基本操作。七、作業(yè)處理在課堂上要求每一個(gè)同學(xué)在F 盤下建立一個(gè)名為 “我的站點(diǎn)”的文件夾，在 dreamweaver中創(chuàng)建一個(gè)靜態(tài)站點(diǎn)，將站點(diǎn)信息存放到我的站點(diǎn)文件夾中。八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要

10、板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。課題：搭建動(dòng)態(tài)網(wǎng)站服務(wù)器及創(chuàng)建動(dòng)態(tài)站點(diǎn)一、教學(xué)基本內(nèi)容1、安裝 IIS2、動(dòng)態(tài)站點(diǎn)與靜態(tài)站點(diǎn)的區(qū)別3、搭建動(dòng)態(tài)站點(diǎn)二、課型：新授課三、課時(shí)： 2 個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：動(dòng)態(tài)站點(diǎn)與靜態(tài)站點(diǎn)的區(qū)別難點(diǎn)： 1、虛擬目錄的概念2、動(dòng)態(tài)站點(diǎn)的定義3、站點(diǎn)測(cè)試五、教學(xué)目的1、學(xué)會(huì)安裝 IIS ，知道 IIS 的作用2、學(xué)會(huì)創(chuàng)建虛擬目錄3、會(huì)創(chuàng)建動(dòng)態(tài)站點(diǎn)六、教學(xué)過(guò)程1、引入先提出靜態(tài)站點(diǎn)的作用及限制性，引入動(dòng)態(tài)站點(diǎn)的功能2、講授新課（ 1）安裝并啟動(dòng) IIS （現(xiàn)場(chǎng)操作）（ 2）定義一個(gè)動(dòng)態(tài)站點(diǎn)步驟： 設(shè)置虛擬目錄。（ 1）在本地磁盤“”下新建

11、一個(gè) site 文件夾作為本地站點(diǎn)的根文件夾。（ 2）設(shè)置 web 共享。找到“ C:site ”文件夾，選中并右擊該文件夾，從彈出的快捷菜單中選擇“共享和安全”選項(xiàng)。在打開的“ site 屬性”對(duì)話框中，選擇“ Web共享”選項(xiàng)卡，如圖 2-19 所示（ 3）設(shè)置“編輯別名”對(duì)話框。選中“共享文件夾”單選按鈕，在彈出的“編輯別名”對(duì)話框中將“別名”設(shè)置為 site ；在“訪問(wèn)權(quán)限”中選擇“讀取”；在“應(yīng)用程序權(quán)限”中選擇“腳本”，如圖 2-20 所示。最后單擊“確定”按鈕關(guān)閉對(duì)話框，便完成了定義動(dòng)態(tài)站點(diǎn)的準(zhǔn)備工作。進(jìn)入“高級(jí)”選項(xiàng)卡。（ 1）選擇“站點(diǎn)” | “新建站點(diǎn)”選項(xiàng)，選擇“站點(diǎn)定義

12、”對(duì)話框中的“高級(jí)”選項(xiàng)卡。（ 2）從“分類”列表框中選擇“本地信息”（默認(rèn)選項(xiàng)）選項(xiàng)，如圖2-21 所示。設(shè)置“本地信息”的各參數(shù)（見圖2-22設(shè)置“測(cè)試服務(wù)器”的各參數(shù)（見圖2-23 ）。顯示結(jié)果。（ 3）測(cè)試站點(diǎn)將 ch02 test.asp文件復(fù)制到C:site文件夾中，并使用Dreamweaver 8 打開test.asp。單擊瀏覽器中“預(yù)覽 / 調(diào)試”按鈕，或者按 F12 鍵在瀏覽器中運(yùn)行test.asp頁(yè)面。出現(xiàn)如圖 2-25 所示的成功頁(yè)面。若瀏覽器提示找不到服務(wù)器，則需重新搭建ASP服務(wù)器。3、鞏固練習(xí)練習(xí)站點(diǎn)的建立，及其基本操作。七、作業(yè)處理在課堂上要求每一個(gè)同學(xué)在F 盤下

13、建立一個(gè)名為”我的動(dòng)態(tài)站點(diǎn)”的文件夾，將其設(shè)置為虛擬目錄，在dreamweaver 中創(chuàng)建一個(gè)動(dòng)態(tài)站點(diǎn)，將站點(diǎn)信息存放到我的動(dòng)態(tài)站點(diǎn)文件夾中。八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。第三章文本及其格式化課題：輸入文本及其格式化一、教學(xué)基本內(nèi)容1、輸入普通文本2、插入符號(hào)、日期3、使用項(xiàng)目列表二、課型：新授課三、課時(shí)： 2 個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)： 1、插入符號(hào)、空格和日期2 、使用項(xiàng)目列表難點(diǎn)： 1、項(xiàng)目列表五、教學(xué)目的1、掌握文本輸入方法2、掌握日期的插入3、掌握項(xiàng)目列表的使用六、教學(xué)過(guò)程1、引入首先例用一個(gè)已完成的網(wǎng)頁(yè)，讓學(xué)生

14、來(lái)看別人的設(shè)置，由此引入文本的格式化。2、講授新課（ 1）文本的輸入兩種方法： a: 直接在文檔窗口中輸入文本。即先選擇要插入文本的位置，然后直接輸入文本。b: 在其他編輯器中復(fù)制已經(jīng)生成的文本，然后切換到Dreamweaver 8 文檔窗口中，將選取插入點(diǎn)，然后選擇“編輯”| “粘貼”選項(xiàng)。（ 2）創(chuàng)建項(xiàng)目列表類型：無(wú)序列表、有序列表、定義列表、目錄列表和菜單列表。（ 3）插入日期3、鞏固練習(xí)練習(xí)各種項(xiàng)目列表的使用七、作業(yè)處理要求每一個(gè)同學(xué)建立一個(gè)名為“我的網(wǎng)頁(yè)”的空白文檔，在網(wǎng)頁(yè)中輸入文字，然后在右下角插入日期，在內(nèi)容當(dāng)中便用有序列表。八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書的內(nèi)容及

15、使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。課題： CSS樣式一、教學(xué)基本內(nèi)容1 、演示并講解 CSS 的應(yīng)用2 、 CSS 的基本概念3 、 CSS 的特點(diǎn)4 、 CSS 樣式定義5 、 CSS 常用屬性與值二、課型：新授課三、課時(shí)： 2 個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)： 1、掌握 CSS 樣式定義2、掌握 CSS 常用屬性與值難點(diǎn)： 1、掌握 CSS 樣式定義2、CSS 常用屬性與值3、能獨(dú)立完成 CSS 樣式的應(yīng)用五、教學(xué)目的1 、掌握 CSS 的基本概念2 、掌握 CSS 樣式定義3 、掌握 CSS 常用屬性與值六、教學(xué)過(guò)程向?qū)W生演示多個(gè)項(xiàng)目：成品站點(diǎn)，分階段演示和分析此網(wǎng)頁(yè)的設(shè)計(jì)流程和

16、過(guò)程，在每個(gè)階段演示完畢后，讓學(xué)生對(duì)此階段進(jìn)行鞏固。講解完畢后學(xué)生完成課后作業(yè)，教師實(shí)施指導(dǎo)。第一步：演示并講解用 CSS 樣式制作的網(wǎng)頁(yè)。第二步：分步演示并講解 CSS 樣式的基本概念。第三步：講解并分析 CSS 常用屬性與值。第四步：結(jié)合 CSS 樣式的使用制作網(wǎng)頁(yè)第四步：課程小結(jié)。七、作業(yè)處理課堂上進(jìn)行計(jì)論：第一步：演示并講解用 CSS 樣式制作的網(wǎng)頁(yè)。第二步：分步演示并講解 CSS 樣式的基本概念。第三步：講解并分析 CSS 的知識(shí)點(diǎn)。第四步：結(jié)合 CSS 樣式的使用制作網(wǎng)頁(yè)第四步：課程小結(jié)。八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演

17、示。第四章表格課題：表格創(chuàng)建及設(shè)置一、教學(xué)基本內(nèi)容1 、創(chuàng)建表格2 、 添加表格對(duì)象3 、自動(dòng)套用表格格式二、課型：新授課三、課時(shí)： 2 個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)： 1、創(chuàng)建表格2、自動(dòng)套用表格格式難點(diǎn)：套用表格格式五、教學(xué)目的1 、掌握創(chuàng)建表格的基本方法2 、會(huì)使用自動(dòng)套用表格格式六、教學(xué)過(guò)程1、引入網(wǎng)頁(yè)需要進(jìn)行排版，由報(bào)紙的排版引入網(wǎng)頁(yè)的排版，由此提出表格的作用2、講授新課（ 1）創(chuàng)建表格步驟： 將光標(biāo)停放在頁(yè)面需要?jiǎng)?chuàng)建表格的位置。如果未打開“插入”工具欄，可以在文檔窗口單擊按鈕。如果在文檔窗口中找不到該按鈕，可使用Ctrl+F2 快捷鍵切換“插入”工具欄的顯示或隱藏狀態(tài)，在“常用”標(biāo)

18、簽中，單擊“表格”按鈕彈出“表格”對(duì)話框輸入要插入表格的行數(shù)，在此輸入2。列數(shù)輸入要插入表格的列數(shù)，在此輸入3單擊“確定”按鈕(2) 套用表格格式3、鞏固練習(xí)創(chuàng)建一個(gè)表格，練習(xí)格式的套用。七、作業(yè)處理在課堂上創(chuàng)建一個(gè)五行四列的表格，要求邊框?yàn)?，寬 150，高 254 的表格。八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。課題：表格的應(yīng)用一、教學(xué)基本內(nèi)容1、設(shè)置單元格2、表格的基本操作二、課型：新授課三、課時(shí)： 2 個(gè)課時(shí)四、教學(xué)重點(diǎn)與難點(diǎn)重點(diǎn)：表格的編輯難點(diǎn)：排序表格五、教學(xué)目的1 、掌握表格的基本操作2 、能夠熟練設(shè)置單元格格式六、教學(xué)過(guò)

19、程1、引入（1）文字的定位：空格、回車（2）圖片的定位：垂直邊距、水平邊距2、表格插入表格：插入（ Insert ）表格（ table ），或者在對(duì)象面板行數(shù)（ row）列數(shù)（ column）邊距（ cell padding）：?jiǎn)卧裰械膬?nèi)容與單元格邊框之間的距離間距（ cell spacing）：?jiǎn)卧裰g的距離寬度（ width ）：可以是像素（ pixel ）或百分比為單位（ percent ）邊框（ boder ）：屬性面板：只有在選定整個(gè)表格時(shí)才出現(xiàn)表格屬性在表格中也可以通過(guò)右擊，調(diào)出的快捷菜單中選擇表格來(lái)對(duì)表格進(jìn)行設(shè)置清除行高和列寬按鈕改變列寬單位按鈕背景顏色：邊框顏色：設(shè)置整個(gè)表

20、格的格線顏色背景圖像：3、表格所對(duì)應(yīng)的 HTML代碼表格： table/table行： tr/tr列： td/td4 、表格的編輯（1） 表格的嵌套（2） 在網(wǎng)頁(yè)中，要進(jìn)行復(fù)雜的定位，一般需要用到嵌套表格。不過(guò)，一般不超過(guò)三層。（2）復(fù)制剪切粘貼（3） 插入行、列，刪除行列（4） 合并單元格，拆分單元格（5） 改變行、列、表格的大小：拖放，屬性面板精確定義（6） 表格模板：命令（ command）格式化表格（ format table）七、作業(yè)處理根據(jù)課本上的實(shí)訓(xùn)作出一個(gè)精美課程表網(wǎng)頁(yè)八、教具所用的教室為多媒體實(shí)驗(yàn)室，因此所要板書的內(nèi)容及使用的工具均在計(jì)算機(jī)上用PPT課件進(jìn)行演示。第五章圖像課題：圖像插入及屬性設(shè)置一、教學(xué)基本內(nèi)容1、圖像的類型2、插入鼠標(biāo)經(jīng)過(guò)圖像二、課型