網(wǎng)頁(yè)制作與設(shè)計(jì)教案-計(jì)算機(jī)教學(xué)

1、網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 1 -網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案文檔下載資料下載文檔下載資料下載第一講第一講 網(wǎng)頁(yè)設(shè)計(jì)概述網(wǎng)頁(yè)設(shè)計(jì)概述3 31.1 WWW 和 URL.31.2 IE5 的使用.31.3 網(wǎng)頁(yè)中所使用的技術(shù) .41.4 制作網(wǎng)頁(yè)的基本方法 .4第二講第二講 HTMLHTML 的基本標(biāo)志與格式標(biāo)志的基本標(biāo)志與格式標(biāo)志4 42.1 HTML 文檔的基本結(jié)構(gòu).5第三講第三講 HTMLHTML 的文本、圖片與超級(jí)鏈接標(biāo)志的文本、圖片與超級(jí)鏈接標(biāo)志5 52.2 插入文字 .62.3 插入圖片 .82.4 建立超級(jí)鏈接 .8第四講第四講 HTMLHTML 表格、表單與框架

2、標(biāo)志表格、表單與框架標(biāo)志9 9網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 2 -2.5 插入表格 .92.6 表單的應(yīng)用 .102.7 框架窗口 .10第五講第五講 HTMLHTML 標(biāo)志綜合運(yùn)用案例標(biāo)志綜合運(yùn)用案例1111第六講第六講 DREAMWEAVERDREAMWEAVER 中簡(jiǎn)單中簡(jiǎn)單 WEBWEB 站點(diǎn)建立與管理站點(diǎn)建立與管理12123.1 DREAMWEAVER概述.12第七講第七講 DREAMWEAVERDREAMWEAVER 中靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)中靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)13133.2 在頁(yè)面中加入文字和圖像 .143.3 超級(jí)鏈接的運(yùn)用 .143.4. 表格的應(yīng)用 .143.5. 在網(wǎng)頁(yè)中創(chuàng)建表

3、單 .15第八講第八講 DREAMWEAVERDREAMWEAVER 中動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)中動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)1515第九講第九講 DREAMWEAVERDREAMWEAVER 綜合性網(wǎng)頁(yè)設(shè)計(jì)案例綜合性網(wǎng)頁(yè)設(shè)計(jì)案例1616第十講第十講 網(wǎng)站的設(shè)計(jì)、制作、發(fā)布和宣傳網(wǎng)站的設(shè)計(jì)、制作、發(fā)布和宣傳1919網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 3 -第一講第一講 網(wǎng)頁(yè)設(shè)計(jì)概述網(wǎng)頁(yè)設(shè)計(jì)概述【教學(xué)內(nèi)容】講解網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)術(shù)語(yǔ)及網(wǎng)站制作的基本流程。【教學(xué)目的】使學(xué)生對(duì)網(wǎng)站及網(wǎng)頁(yè)有一定的認(rèn)識(shí)，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的興趣?！窘虒W(xué)重點(diǎn)】網(wǎng)頁(yè)設(shè)計(jì)中的若干術(shù)語(yǔ)?！窘虒W(xué)難點(diǎn)】理解網(wǎng)頁(yè)設(shè)計(jì)中的若干術(shù)語(yǔ)?！窘虒W(xué)方式】講授式、討論式、

4、案例分析式?！窘虒W(xué)參考】1、 網(wǎng)頁(yè)設(shè)計(jì)與制作楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。2、 Internet 網(wǎng)頁(yè)工場(chǎng)Wittime 工作室 重慶出版社。3、 WEB 網(wǎng)站設(shè)計(jì)Joel Sklar 著 高等教育出版社。4、 HTML 網(wǎng)頁(yè)制作教程材義語(yǔ)編著 鐵道出版社。【新課內(nèi)容】網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 4 -1.1 WWW 和和 URL1.1.1 Web 的起源Web 是 World Wide Web 的簡(jiǎn)稱(chēng)，一般也稱(chēng)之為 WWW 或 3W1.1.2 Web 的特點(diǎn)和結(jié)構(gòu)Web 最大的特點(diǎn)是使用了超文本（Hypertext）WWW 采用 C/S（客戶(hù)機(jī)/服務(wù)器）工作模式在瀏

5、覽器和服務(wù)器之間應(yīng)用 HTTP（Hyper Text Transfer Protocol，超文本傳輸協(xié)議）作為網(wǎng)絡(luò)應(yīng)用層通信協(xié)議1.1.3 URLURL 的完整格式協(xié)議:/主機(jī)名或 IP 地址：端口號(hào)/路徑名/文件名1.2 IE5 的使用Web 瀏覽器是瀏覽 Internet 資源的客戶(hù)端軟件在 Windows 環(huán)境下使用的瀏覽器主要有 Internet Explorer、Netscape Navigator、Mosaic 等1.2.1 IE5 的界面1.2.2 IE5 的使用1.3 網(wǎng)頁(yè)中所使用的技術(shù)1.3.1 HTML 語(yǔ)言和 XML 語(yǔ)言網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 5 -1、

6、HTML 語(yǔ)言HTML 只使用 SGML 中很小一部分標(biāo)記HTML 語(yǔ)言（Hyper Text Markup Language 超文本標(biāo)記語(yǔ)言）HTML 是純文本的語(yǔ)言，其源代碼可以用各種文本編輯工具進(jìn)行編輯，常用的網(wǎng)頁(yè)制作軟件如 FrontPage、Dreamweaver 等實(shí)際上是自動(dòng)生成 HTML 源代碼的工具2、XML 語(yǔ)言XML（eXtensible Markup Language）1.3.2 動(dòng)態(tài)網(wǎng)頁(yè)1.3.3 多媒體技術(shù)的應(yīng)用1.3.4 Web 服務(wù)器端程序1.4 制作網(wǎng)頁(yè)的基本方法1.4.1 制作網(wǎng)頁(yè)的基本步驟1、確定網(wǎng)頁(yè)的內(nèi)容2、設(shè)計(jì)網(wǎng)頁(yè)的組織結(jié)構(gòu)3、資料的收集與整理4、選擇

7、網(wǎng)頁(yè)的設(shè)計(jì)方法1.4.2 制作網(wǎng)頁(yè)時(shí)要注意的問(wèn)題1、網(wǎng)頁(yè)的標(biāo)題要簡(jiǎn)潔，明確。2、在文本中要使用水平線(xiàn)，以分割不同部分。3、對(duì)重點(diǎn)段落要強(qiáng)調(diào)顯示。網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 6 -4、網(wǎng)頁(yè)中插入的圖片要盡量的小。5、圖形要附加文字說(shuō)明，以便關(guān)閉圖像時(shí)查看。6、網(wǎng)頁(yè)中引用的資料及商標(biāo)（或圖標(biāo)） ，不能侵犯版權(quán)?！菊n后小結(jié)】通過(guò)學(xué)習(xí)，認(rèn)識(shí)網(wǎng)絡(luò)、網(wǎng)站、網(wǎng)頁(yè)及相關(guān)信息，理解網(wǎng)頁(yè)制作的流程及了解相應(yīng)開(kāi)發(fā)工具，為設(shè)計(jì)網(wǎng)頁(yè)做準(zhǔn)備。第二講第二講 HTML 的基本標(biāo)志與格式標(biāo)志的基本標(biāo)志與格式標(biāo)志【教學(xué)內(nèi)容】講解 HTML 基本標(biāo)志對(duì)和格式標(biāo)志?！窘虒W(xué)目的】使學(xué)生標(biāo)志對(duì)與格式標(biāo)志對(duì)的使用。【教學(xué)重點(diǎn)】

8、格式標(biāo)志的使用?！窘虒W(xué)難點(diǎn)】列表標(biāo)志的使用?！窘虒W(xué)方式】討論式、案例分析式、練習(xí)式?！窘虒W(xué)參考】1、 網(wǎng)頁(yè)設(shè)計(jì)與制作楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 7 -2、 WEB 網(wǎng)站設(shè)計(jì)Joel Sklar 著 高等教育出版社。3、 HTML 網(wǎng)頁(yè)制作教程材義語(yǔ)編著 鐵道出版社。【新課內(nèi)容】2.1 HTML 文檔的基本結(jié)構(gòu)文檔的基本結(jié)構(gòu)2.1.1 HTML 語(yǔ)法1、雙標(biāo)記 語(yǔ)法： 內(nèi)容2、單標(biāo)記語(yǔ)法：最常用的單標(biāo)記是3、標(biāo)記屬性語(yǔ)法例子4、注釋語(yǔ)句格式例子 網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 8 -2.1.2 HTML 文檔的基本結(jié)構(gòu)【課后小結(jié)】通

9、過(guò)本次課的學(xué)習(xí),要求能熟練掌握網(wǎng)頁(yè)面的基本標(biāo)志與格式標(biāo)志,并能靈活運(yùn)用列表,有序列表,無(wú)序列表標(biāo)志及屬性。第三講第三講 HTML 的文本、圖片與超級(jí)鏈接標(biāo)志的文本、圖片與超級(jí)鏈接標(biāo)志【教學(xué)內(nèi)容】講解 HTML 標(biāo)準(zhǔn)中的文本、圖片與超級(jí)鏈接標(biāo)志【教學(xué)目的】* 使學(xué)生了解標(biāo)題元素,掌握字體,上下標(biāo),及特殊字符的標(biāo)志。* 使學(xué)生掌握?qǐng)D片標(biāo)志,聲音標(biāo)志及相應(yīng)的屬性,學(xué)會(huì)利用標(biāo)志在網(wǎng)頁(yè)中插入聲音與圖片。* 使學(xué)生掌握超級(jí)鏈接標(biāo)志的使用?！窘虒W(xué)重點(diǎn)】* 字體、圖片和超級(jí)鏈接標(biāo)志的使用。* 網(wǎng)頁(yè)中特殊符號(hào)的輸入 。【教學(xué)難點(diǎn)】* 理解特殊符號(hào)對(duì)應(yīng)的標(biāo)志。網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 9 -* 理解

10、 img 標(biāo)志中屬性的意義。* 理解書(shū)簽超級(jí)鏈接的意義 ?！窘虒W(xué)方式】討論式、案例分析式、練習(xí)式?！窘虒W(xué)參考】1、 網(wǎng)頁(yè)設(shè)計(jì)與制作楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。2、 WEB 網(wǎng)站設(shè)計(jì)Joel Sklar 著 高等教育出版社。3、 HTML 網(wǎng)頁(yè)制作教程材義語(yǔ)編著 鐵道出版社。【新課內(nèi)容】2.2 插入文字2.2.1 劃分段落格式段落內(nèi)容2.2.2 插入標(biāo)題文字格式標(biāo)題內(nèi)容2.2.3 字號(hào)屬性設(shè)置基準(zhǔn)字號(hào)：網(wǎng)頁(yè)內(nèi)的其他文字，采用下面的格式來(lái)定義網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 10 -.Size 的有效范圍是 1（最大）到 7（最小） 。如果在 Size 的值前面帶上“+”號(hào)或

11、“-”號(hào)，則表示相對(duì)于基礎(chǔ)字體增大或減小若干字號(hào)。2.2.4 顏色屬性?xún)煞N方式字符串2.2.5 字體屬性2.2.6 文本修飾.，文字以粗體顯示。.，文字顯示為斜體。.，顯示下劃線(xiàn)。.，中心線(xiàn)貫穿文字。.，強(qiáng)調(diào)文字，通常用斜體。 .，特別強(qiáng)調(diào)的文字，通常用黑體。 .，以等寬體顯示西文字符。.，使文字大小相對(duì)于前面的文字增大一級(jí)。.，使文字大小相對(duì)于前面的文字減小一級(jí)。網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 11 -.，使文字成為前一個(gè)字符的上標(biāo)。.，使文字成為前一個(gè)字符的下標(biāo)。.，使文字顯示為閃爍效果。2.2.6 文本修飾2.2.7 預(yù)格式化文本使用預(yù)格式化標(biāo)記不再忽略在此之間的空格、制表符與回

12、車(chē)符等元素2.2.8 轉(zhuǎn)義字符與特殊字符一般轉(zhuǎn)義符都是以“&”開(kāi)始，以“；”結(jié)束，一個(gè)轉(zhuǎn)義符之間不能有空格2.2.9 文本強(qiáng)制換行和不換行文本強(qiáng)制換行 不換行2.2.10 插入水平線(xiàn)使用標(biāo)記屬性：Width，Size，Align，Noshade，color2.2.11 使用列表1、無(wú)序列表 列表?xiàng)l目 1列表?xiàng)l目 2網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 12 -.2、有序列表 列表?xiàng)l目 1列表?xiàng)l目 2.3、定義列表列表?xiàng)l目 1條目 1 的說(shuō)明列表?xiàng)l目 2條目 2 的說(shuō)明2.3 插入圖片2.3.1 在網(wǎng)頁(yè)中插入圖片基本格式2.3.2 圖片的屬性網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 13

13、 -2.4 建立超級(jí)鏈接2.4.1 指向一個(gè)目標(biāo)1、建立超級(jí)鏈接字符串2、為圖片建立超級(jí)鏈接 3、鏈接到郵件和多媒體文件鏈接到郵件請(qǐng)與我聯(lián)系2.4.2 使用錨點(diǎn) 使用錨點(diǎn)可以使用戶(hù)在一個(gè)較長(zhǎng)的文檔中跳轉(zhuǎn)，方便地找到要閱讀的內(nèi)容。 建立錨點(diǎn)：錨點(diǎn)文字 使超級(jí)鏈接指向已定義的錨點(diǎn)。網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 14 -文字文字2.4.3 新窗口和基準(zhǔn)鏈接1、打開(kāi)新窗口開(kāi)一個(gè)新窗口2、基準(zhǔn)鏈接在 與 之間設(shè)定 2.4.4 圖像地圖圖像地圖的格式為：.2.4.4 圖像地圖【課后小結(jié)】本節(jié)介紹了在網(wǎng)頁(yè)中加入文本、圖片和超級(jí)鏈接的標(biāo)志與相應(yīng)屬性，熟練運(yùn)用這些標(biāo)志是制作多媒體網(wǎng)頁(yè)的基礎(chǔ)。超級(jí)鏈接標(biāo)

14、志網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 15 -中，書(shū)簽鏈接是一類(lèi)特殊的鏈接方式，理解和使用書(shū)簽鏈接學(xué)習(xí)HTML 中超級(jí)鏈接標(biāo)志的難點(diǎn)。第四講第四講 HTML 表格、表單與框架標(biāo)志表格、表單與框架標(biāo)志【教學(xué)內(nèi)容】講解 HTML 中制作表格、表單與框架的標(biāo)志?！窘虒W(xué)目的】使學(xué)生掌握簡(jiǎn)單表格、表單與框架的制作。【教學(xué)重點(diǎn)】* 表格中單元格的合并以及表格嵌套和疊加操作。* 框架的嵌套使用。* 表單元素標(biāo)志與屬性。【教學(xué)難點(diǎn)】* 理解表格屬性 rowspan 與 colspan 的含義以及表格嵌套實(shí)現(xiàn)的基本思想。* 理解框架屬性 name、target 的意義。* 理解表單中相應(yīng)元素對(duì)應(yīng)標(biāo)志及屬性的

15、含義?！窘虒W(xué)方式】案例分析式、項(xiàng)目教學(xué)【教學(xué)參考】1、 網(wǎng)頁(yè)設(shè)計(jì)與制作楊尚森 曲宏山 賈文峰等著 電子工業(yè)出網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 16 -版社。2、 WEB 網(wǎng)站設(shè)計(jì)Joel Sklar 著 高等教育出版社。3、 HTML 網(wǎng)頁(yè)制作教程材義語(yǔ)編著 鐵道出版社?！拘抡n內(nèi)容】2.5 插入表格2.5.1 在網(wǎng)頁(yè)中插入表格表格的基本構(gòu)成元素：表頭，單元格，列，行第一行第一列第一行第二列第二行第一列第二行第二列2.5.2 嵌套的表格2.5.3 表格的屬性設(shè)置2.5.4 單元格屬性設(shè)置網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 17 -2.6 表單的應(yīng)用表單在 Web 網(wǎng)頁(yè)中用來(lái)給訪(fǎng)問(wèn)者填寫(xiě)

16、信息，從而能獲得用戶(hù)信息，使網(wǎng)頁(yè)具有交互的功能。2.6.1 創(chuàng)建表單2.6.2 用定義用戶(hù)交互（1）單行文本輸入?yún)^(qū)（2）密碼輸入?yún)^(qū)（3）單選框（4）復(fù)選框（5）隱藏區(qū)域（6）按鈕2.6.3 定義下拉式菜單你選修的課程： 計(jì)算機(jī) 英語(yǔ) 邏輯學(xué) 心理學(xué)2.6.4 定義多行文字輸入?yún)^(qū)域網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 18 -請(qǐng)輸入你的詳細(xì)介紹：文字2.7 框架窗口框架把窗口劃分成幾個(gè)子窗口，各個(gè)子窗口可以調(diào)入各自的HTML 文檔，最后形成充滿(mǎn)整個(gè)窗口的網(wǎng)頁(yè)。2.7.1 框架的定義2.7.2 框架屬性設(shè)置 2.7.3 子窗口屬性設(shè)置 2.7.4 常見(jiàn)的框架窗口劃分方法網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作

17、與設(shè)計(jì)教案- 19 -（1）標(biāo)題和正文，分為上下兩部分（2）層次結(jié)構(gòu)，分為上中下三部分 （3）目錄和標(biāo)題，分為左上、左下、右三部分（4）標(biāo)題、目錄和正文，分為上、左下、右下三部分（5）嵌套目錄，分為左、右上、右下三部分2.7.5 不支持框架的網(wǎng)頁(yè) 很抱歉，饋下使用的瀏覽器不支援框架功能，請(qǐng)轉(zhuǎn)用新的瀏覽器。 2.7.6 內(nèi)部框架【課后小結(jié)】表格在網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)用廣泛，熟練掌握表格的基本標(biāo)志及配合使用的屬性的意義，是靈活運(yùn)用表格的基礎(chǔ)。表格的嵌套是表格制作中的一個(gè)難點(diǎn)，關(guān)鍵是要抽象出嵌套表格對(duì)應(yīng)的簡(jiǎn)單表格模型，再將模型中單元格的位置使用內(nèi)嵌表格代替。網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 20 -框

18、架結(jié)構(gòu)是布局網(wǎng)頁(yè)的一種常用方式，要掌握框架及其嵌套的實(shí)現(xiàn)，以及在框架中設(shè)置超級(jí)鏈接時(shí)目標(biāo)框架位置的設(shè)置。表單是網(wǎng)頁(yè)實(shí)現(xiàn)交互處理的工具,熟練掌握表單中元素的標(biāo)志和屬性，是設(shè)計(jì)表單網(wǎng)頁(yè)關(guān)鍵。第五講第五講 HTML 標(biāo)志綜合運(yùn)用案例標(biāo)志綜合運(yùn)用案例【教學(xué)內(nèi)容】綜合運(yùn)用所學(xué)過(guò)的 HTML 標(biāo)志書(shū)寫(xiě)網(wǎng)頁(yè)。【教學(xué)目的】使學(xué)生能夠書(shū)寫(xiě)簡(jiǎn)單的 HTML 網(wǎng)頁(yè)?！窘虒W(xué)重點(diǎn)】使用所學(xué)的 HTML 標(biāo)志書(shū)寫(xiě)網(wǎng)頁(yè)?！窘虒W(xué)難點(diǎn)】HTML 的綜合運(yùn)用?！窘虒W(xué)方式】案例分析式、討論式、練習(xí)式?！窘虒W(xué)參考】1、 網(wǎng)頁(yè)設(shè)計(jì)與制作楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。2、 WEB 網(wǎng)站設(shè)計(jì)Joel Sklar 著 高等教育

19、出版社。3、 HTML 網(wǎng)頁(yè)制作教程材義語(yǔ)編著 鐵道出版社。網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 21 -【新課內(nèi)容】1、用記事本書(shū)寫(xiě) HTML 網(wǎng)頁(yè)。2、利用案例進(jìn)行 HTML 網(wǎng)頁(yè)的綜合講解。3、要求學(xué)生按規(guī)定書(shū)寫(xiě)一個(gè)完整的 HTNL 網(wǎng)頁(yè)。【課后小結(jié)】HTML 是目前制作網(wǎng)頁(yè)時(shí)必須掌握的一種語(yǔ)言，學(xué)好 HTML 語(yǔ)言是為以后對(duì)網(wǎng)頁(yè)設(shè)計(jì)這門(mén)課程更深入的學(xué)習(xí)打下扎實(shí)的基礎(chǔ)。第六講第六講 Dreamweaver 中簡(jiǎn)單中簡(jiǎn)單 WEB 站點(diǎn)建立與管理站點(diǎn)建立與管理【教學(xué)內(nèi)容】講解 Dreamweaver 的工作界面和基本操作?！窘虒W(xué)目的】使學(xué)生掌握網(wǎng)頁(yè)制作工具 Dreamweaver 的基本操

20、作方式?！窘虒W(xué)重點(diǎn)】網(wǎng)頁(yè)制作工具 Dreamweaver 的界面和基本基本操作?！窘虒W(xué)難點(diǎn)】掌握一個(gè)新的開(kāi)發(fā)工具?！窘虒W(xué)方式】講授式、項(xiàng)目模塊式、演示教學(xué)?！窘虒W(xué)參考】網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 22 -1、 網(wǎng)頁(yè)設(shè)計(jì)與制作楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。2、 WEB 網(wǎng)站設(shè)計(jì)Joel Sklar 著 高等教育出版社。3、 Dreamweaver 網(wǎng)頁(yè)設(shè)計(jì)案例教程白煜編著 清華大學(xué)出版社。4、 Dreamweaver MX 2004 完美網(wǎng)頁(yè)設(shè)計(jì)與制作姜楠編著 中國(guó)青年出版社?！拘抡n內(nèi)容】3.1 Dreamweaver 概述3.1.1 Dreamweaver 的工作界面

21、3.1.2 Dreamweaver4 的基本操作1、直接建立新網(wǎng)頁(yè)“文件”“新建”(Ctrl+N)2、打開(kāi)已有的網(wǎng)頁(yè)“文件”“打開(kāi)”3、保存編輯過(guò)的網(wǎng)頁(yè)“文件”“保存”，直接保存 “文件”“另存為”,換名保存4、預(yù)覽正在編輯的網(wǎng)頁(yè)“文件”“在預(yù)覽器中預(yù)覽”5、設(shè)置網(wǎng)頁(yè)屬性網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 23 -“修改”“頁(yè)面設(shè)置”（1）標(biāo)題（2）背景圖像（3）背景色（4）文字顏色（5）超級(jí)鏈接顏色（6）左邊界上邊界（7）文件編碼方式（8）網(wǎng)頁(yè)藍(lán)圖6、導(dǎo)入 Word 文件“文件”“導(dǎo)入” “導(dǎo)入 Word HTML”3.1.3 用 Dreamweaver 創(chuàng)建和管理站點(diǎn)1、創(chuàng)建本地站點(diǎn)“

22、站點(diǎn)”“新建站點(diǎn)”2、管理站點(diǎn)“站點(diǎn)”“定義站點(diǎn)”3、上傳和下載文件【課后小結(jié)】Dreamweaver 是一款由 Macromedia 公司開(kāi)發(fā)的專(zhuān)業(yè) HTML 編輯網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 24 -器，用于對(duì) WEB 站點(diǎn)、WEB 頁(yè)面和 WEB 應(yīng)用程序進(jìn)行設(shè)計(jì)、編碼和開(kāi)發(fā)。無(wú)論是剛接觸網(wǎng)頁(yè)設(shè)計(jì)的初學(xué)者還是專(zhuān)業(yè)的 WEB開(kāi)發(fā)人員，Dreamweaver 都在前衛(wèi)的設(shè)計(jì)理念和強(qiáng)大的軟件功能方面給予了充分可靠的支持。因此學(xué)好 Dreamweaver 對(duì)以后的網(wǎng)頁(yè)設(shè)計(jì)有很大的幫助。第七講第七講 Dreamweaver 中靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)中靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)【教學(xué)內(nèi)容】講解利用 Dreamwe

23、aver 進(jìn)行靜態(tài)頁(yè)面的制作?！窘虒W(xué)目的】使學(xué)生掌握利用 Dreamweaver 對(duì)頁(yè)面進(jìn)行文本、圖象、超級(jí)鏈接、表格以及框架等的編輯。【教學(xué)重點(diǎn)】通過(guò)對(duì)工具軟件 Dreamweaver 的操作，制作出完整的靜態(tài)頁(yè)面。【教學(xué)難點(diǎn)】了解靜態(tài)網(wǎng)頁(yè)的含義【教學(xué)方式】講授式、項(xiàng)目模塊式、演示教學(xué)。【教學(xué)參考】1、 網(wǎng)頁(yè)設(shè)計(jì)與制作楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 25 -2、 WEB 網(wǎng)站設(shè)計(jì)Joel Sklar 著 高等教育出版社。3、 Dreamweaver 網(wǎng)頁(yè)設(shè)計(jì)案例教程白煜編著 清華大學(xué)出版社。4、 Dreamweaver MX 2004 完美

24、網(wǎng)頁(yè)設(shè)計(jì)與制作姜楠編著 中國(guó)青年出版社?！拘抡n內(nèi)容】3.2 在頁(yè)面中加入文字和圖像在頁(yè)面中加入文字和圖像3.2.1 文字的添加和處理（1）文字屬性面板的使用3.2.2 插入和優(yōu)化圖像（1）準(zhǔn)備圖像把網(wǎng)頁(yè)中所用到的圖像文件預(yù)先拷貝到站點(diǎn)文件夾中（2）插入圖像（3）設(shè)置圖像屬性（4）創(chuàng)建圖像地圖3.3 超級(jí)鏈接的運(yùn)用超級(jí)鏈接的運(yùn)用3.3.1 插入超級(jí)鏈接（1）直接在屬性面板的鏈接項(xiàng)填入鏈接的地址。（2）在屬性面板單擊瀏覽文件按鈕打開(kāi)瀏覽窗口來(lái)選擇鏈接的網(wǎng)頁(yè)。網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 26 -（3）利用指向文件圖標(biāo)創(chuàng)建鏈接。3.3.2 超級(jí)鏈接的運(yùn)用（1）鏈接其他網(wǎng)站在鏈接欄填寫(xiě) UR

25、L選擇目標(biāo)網(wǎng)頁(yè)顯示的窗口。 _blank、parent、_self、_top（2）鏈接其他文件輸入網(wǎng)頁(yè)文件名外使用屬性面板上的指向文件圖標(biāo)，創(chuàng)建內(nèi)部鏈接（3）鏈接 E-mail直接在鏈接欄填寫(xiě) E-mail 地址。利用對(duì)象面板插入 E-mail（4）錨點(diǎn)鏈接建立錨點(diǎn):“隱藏” “插入命令錨點(diǎn)” 填入錨點(diǎn)的名稱(chēng)建立錨點(diǎn)鏈接:在鏈接欄中輸入符號(hào)“#”和錨點(diǎn)名稱(chēng)。3.4. 表格的應(yīng)用表格的應(yīng)用3.4.1 表格的創(chuàng)建A.創(chuàng)建表格（1）使用菜單“插入”“表格” 。（2）單擊對(duì)象面板上的子菜單中插入表格按鈕。（3）按 CTRL+ALT+T 組合鍵。B.選擇表格元素網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 2

26、7 -（1）選取整個(gè)表格（2）選擇行和列（3）選擇單元格3.4.2 表格屬性的設(shè)置1、表格整體屬性設(shè)置2、行列和單元格屬性設(shè)置3.5. 在網(wǎng)頁(yè)中創(chuàng)建表單在網(wǎng)頁(yè)中創(chuàng)建表單A 創(chuàng)建表單“插入”“表單”使用菜單“窗口”調(diào)出“對(duì)象”面板， “表單” “插入”B 添加表單元素（1）添加文本域“插入”“表單對(duì)象”“文本域”設(shè)置 TextField，字符寬度，最多字符，類(lèi)型（2）添加選擇域 在表單中插入單選按鈕。 “插入”“表單對(duì)象”“單選按鈕” 在表單中插入復(fù)選按鍵。 “插入”“表單對(duì)象”“復(fù)選鈕”（3）添加列表和下拉式菜單（4）添加按鈕網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 28 -（5）添加文件域【課

27、后小結(jié)】了解靜態(tài)網(wǎng)頁(yè)的含義，利用 Dreamweaver MX 2004 的強(qiáng)大功能制作出各色各樣的頁(yè)面，為以后的學(xué)習(xí)打下堅(jiān)實(shí)的基礎(chǔ)。第八講第八講 Dreamweaver 中動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)中動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)【教學(xué)內(nèi)容】講解利用 Dreamweaver 進(jìn)行動(dòng)態(tài)頁(yè)面的制作?！窘虒W(xué)目的】使學(xué)生掌握利用 Dreamweaver 作出簡(jiǎn)單的動(dòng)態(tài)頁(yè)面。【教學(xué)重點(diǎn)】理解動(dòng)態(tài)頁(yè)面的含義以及數(shù)據(jù)庫(kù)的使用?！窘虒W(xué)難點(diǎn)】了解動(dòng)態(tài)網(wǎng)頁(yè)的含義?！窘虒W(xué)方式】講授式、項(xiàng)目模塊式、演示教學(xué)?！窘虒W(xué)參考】1、 網(wǎng)頁(yè)設(shè)計(jì)與制作楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。2、 WEB 網(wǎng)站設(shè)計(jì)Joel Sklar 著 高等教育出版社。3、 Dreamweaver 網(wǎng)頁(yè)設(shè)計(jì)案例教程白煜編著 清華大學(xué)出版網(wǎng)頁(yè)制作與設(shè)計(jì)教案網(wǎng)頁(yè)制作與設(shè)計(jì)教案- 29 -社。4、 Dreamweaver MX 2004 完美網(wǎng)頁(yè)設(shè)計(jì)與制作姜楠編著 中國(guó)青年出版社?！拘抡n內(nèi)容】1、初識(shí)數(shù)據(jù)庫(kù)與 ASP2、建立數(shù)據(jù)庫(kù)3、在 Dreamweaver MX 2004 中連接數(shù)據(jù)庫(kù)4、綁定數(shù)據(jù)庫(kù)5、顯示記錄6、添加記錄7、修改記錄8、刪除記錄【課后小結(jié)】了解動(dòng)態(tài)網(wǎng)頁(yè)的含義，本節(jié)詳細(xì)的介紹了如何在 Dreamweaver MX 2004 中實(shí)現(xiàn)與數(shù)據(jù)庫(kù)的連接。動(dòng)態(tài)網(wǎng)頁(yè)是當(dāng)今的主流，學(xué)好動(dòng)態(tài)網(wǎng)頁(yè)的制作是必須的。第九講第九講 Dreamw