網(wǎng)頁(yè)設(shè)計(jì)與制作

1、文檔編碼 : CT3P8M6P4Q7 HK3J8D3W7T7 ZW10H6P3F8C10電子教案課程：第 1 章網(wǎng)頁(yè)制作基礎(chǔ)學(xué)時(shí)數(shù)2 課時(shí)內(nèi)容網(wǎng)頁(yè)制作基礎(chǔ)授課時(shí)間教學(xué)目標(biāo)明白 HTML 的組成和語(yǔ)法明白網(wǎng)頁(yè)制作的常用軟件把握網(wǎng)頁(yè)制作軟件的啟動(dòng)和退出方法教學(xué)重點(diǎn)網(wǎng)頁(yè)制作的一些基本學(xué)問(wèn)然后進(jìn)行系統(tǒng)地介紹網(wǎng)頁(yè)教學(xué)難點(diǎn)HTML的組成和語(yǔ)法教學(xué)設(shè)計(jì)1、 教學(xué)思路： 第一, 讓同學(xué)們說(shuō)說(shuō)他們對(duì)網(wǎng)頁(yè)的一個(gè)熟識(shí)；是什么, 由哪些部分組成, 仍有網(wǎng)頁(yè)制作時(shí)所需把握的一些基礎(chǔ)學(xué)問(wèn)和制作網(wǎng)頁(yè)時(shí) 常用到的一些軟件；最終學(xué)習(xí)網(wǎng)頁(yè)制作軟件的啟動(dòng)和退出方法；2、 教學(xué)方法： 先登錄一些常用的網(wǎng)站,讓同學(xué)們看一些網(wǎng)頁(yè),然后讓

2、同學(xué)們說(shuō)下他們度網(wǎng)頁(yè)的熟識(shí),最終才開(kāi)頭講解本周內(nèi)容；3、 教學(xué)手段：利用多媒體并結(jié)合網(wǎng)絡(luò)進(jìn)行教學(xué)；4、 教學(xué)資料及要求： 課前要求同學(xué)先大致瀏覽本書內(nèi)容,基本的明白；教學(xué)內(nèi)容爭(zhēng)辯問(wèn)題： 1、什么是網(wǎng)頁(yè)？ 2、網(wǎng)頁(yè)的基本組成部分是哪些？ 3、網(wǎng)頁(yè)有什么作用？第 1 章 網(wǎng)頁(yè)制作基礎(chǔ) # 1.1 網(wǎng)頁(yè)制作基礎(chǔ)學(xué)問(wèn)1.1.1 網(wǎng)頁(yè)簡(jiǎn)介1.1.2 什么是 HTML 1.1.3 HTML 的組成結(jié)構(gòu)及語(yǔ)法1.1.4 應(yīng)用舉例 使用記事本編寫網(wǎng)頁(yè)1.2 網(wǎng)頁(yè)制作的常用軟件1.2.1 圖形圖像處理軟件1.2.2 動(dòng)畫制作軟件1.2.3 網(wǎng)頁(yè)布局軟件1.2.4 軟件協(xié)作及制作流程1.2.5 應(yīng)用舉例 實(shí)戰(zhàn)網(wǎng)頁(yè)

3、制作流程1.3 網(wǎng)頁(yè)制作軟件的啟動(dòng)與退出1.3.1 網(wǎng)頁(yè)制作軟件的啟動(dòng)1.3.2 文件的打開(kāi)1.3.3 網(wǎng)頁(yè)制作軟件的退出1.3.4 應(yīng)用舉例 啟動(dòng)并退出Photoshop CS3 對(duì)本書所要講解的內(nèi)容有個(gè)1.4 上機(jī)及項(xiàng)目實(shí)訓(xùn)1.4.1 Flash CS3 的啟動(dòng)與退出1.4.2 制作“ 藍(lán)蓮花” 網(wǎng)頁(yè)1.5 練習(xí)與提高本課小結(jié) 1、 明白網(wǎng)頁(yè)的組成；2、 把握 HTML的組成結(jié)構(gòu)及語(yǔ)法；3、 熟識(shí)制作網(wǎng)頁(yè)常常用到的一些軟件4、 把握網(wǎng)頁(yè)的基本操作思 考 題 及（1）HTML 文檔結(jié)構(gòu)由哪幾部分組成？作業(yè)（2）制作網(wǎng)頁(yè)常常用軟件有哪些？（3）如何啟動(dòng)和退出 Dreamweaver CS3？（

4、4）如何打開(kāi) Flash 文件？（5）如何退出 Photoshop？電子教案課程：第 2 章 Dreamweaver CS5 基本操作學(xué)時(shí)數(shù)2 課時(shí)內(nèi)容Dreamweaver CS5 基本操作授課時(shí)間教學(xué)目標(biāo)熟識(shí) Dreamweaver CS5 的工作界面把握網(wǎng)頁(yè)文檔的基本操作方法 把握頁(yè)面屬性的設(shè)置 把握設(shè)置并治理站點(diǎn)的方法教學(xué)重點(diǎn)熟識(shí) Dreamweaver CS5 的工作界面Dreamweaver CS5 的工作界面； 然后進(jìn)行系統(tǒng)地介教學(xué)難點(diǎn)設(shè)置頁(yè)面屬性和站點(diǎn)治理教學(xué)設(shè)計(jì)1、 教學(xué)思路： 第一, 讓同學(xué)們熟識(shí)紹網(wǎng)頁(yè)文檔制作的基本操作方法及頁(yè)面的設(shè)置；法；2、 教學(xué)方法： 讓同學(xué)們先回憶

5、一下上節(jié)課所講內(nèi)容,最終學(xué)習(xí)對(duì)站點(diǎn)的治理以及設(shè)置方然后讓同學(xué)們回答網(wǎng)頁(yè)是由哪幾部分組成的,明白同學(xué)們對(duì)上一章學(xué)問(wèn)的把握程度；3、 教學(xué)手段：結(jié)合上章內(nèi)容在機(jī)房?jī)?nèi)進(jìn)行上機(jī)講解；4、 教學(xué)資料及要求：課前要求同學(xué)預(yù)習(xí)本章內(nèi)容；教學(xué)內(nèi)容學(xué)問(wèn)回憶：上一課時(shí)講的 網(wǎng)頁(yè)由哪幾部分組成？爭(zhēng)辯問(wèn)題： 1、Dreamweaver CS5 的工作界面由哪幾部分組成？ 2、各部分的作用是什么？?jī)?nèi)容：1. 明白網(wǎng)頁(yè)元素2Dreamweaver CS5工作界面3網(wǎng)頁(yè)文檔的基本操作4 站點(diǎn)治理本課小結(jié) 1、 明白 Dreamweaver CS5 工作界面的組成部分及各部分的作用；2、 把握網(wǎng)頁(yè)文檔的基本操作；3、 把握頁(yè)

6、面屬性的設(shè)置；4、 對(duì) Dreamweaver CS5 站點(diǎn)的治理；思 考 題 及（1）預(yù)覽網(wǎng)頁(yè)成效一般會(huì)留意哪些方面？作業(yè)（2）如何創(chuàng)建和規(guī)劃站點(diǎn)？（3）如何創(chuàng)建站點(diǎn)文件和文件夾？（4）設(shè)置頁(yè)面屬性,一般包括那幾個(gè)方面？電子教案課程：第 3 章創(chuàng)建網(wǎng)頁(yè)基本對(duì)象學(xué)時(shí)數(shù)4 課時(shí)內(nèi)容創(chuàng)建網(wǎng)頁(yè)基本對(duì)象授課時(shí)間教學(xué)目標(biāo)把握文本的插入以及調(diào)整學(xué)會(huì)圖像的插入和編輯操作 把握創(chuàng)建超級(jí)鏈接的方法教學(xué)重點(diǎn)創(chuàng)建對(duì)象及超級(jí)鏈接的方法Word、Excel 中插入與編輯對(duì)象的方法；然后教學(xué)難點(diǎn)編輯網(wǎng)頁(yè)中創(chuàng)建的對(duì)象教學(xué)設(shè)計(jì)1、 教學(xué)思路：第一,讓同學(xué)們先說(shuō)說(shuō)在進(jìn)行系統(tǒng)地介紹在網(wǎng)頁(yè)中創(chuàng)建和編輯對(duì)象的方法；的方法；最終學(xué)習(xí)在

7、網(wǎng)頁(yè)中創(chuàng)建超級(jí)鏈接2、教學(xué)方法：可以選擇一種同學(xué)們熟識(shí)的,并且插入對(duì)象與編輯對(duì)象的方法要與在網(wǎng) 頁(yè)中插入和編輯對(duì)象的方法基本相同的軟件,進(jìn)行比較講解,這樣既可以讓同學(xué)們快速地把握其操作方法,又可以鞏固以前的學(xué)問(wèn)；3、教學(xué)手段：利用多媒體并結(jié)合書本上的內(nèi)容進(jìn)行教學(xué)；4、教學(xué)資料及要求：課前要求同學(xué)明白在Word辦公軟件中創(chuàng)建超級(jí)鏈接的方法；教學(xué)內(nèi)容學(xué)問(wèn)回憶：上一課時(shí)講的Dreamweaver CS5的工作界面由哪幾部分組成？爭(zhēng)辯問(wèn)題： 1、如何在網(wǎng)頁(yè)中插入對(duì)象？ 2、插入這些對(duì)象有何作用？ 3、怎樣對(duì)插入的對(duì)象進(jìn)行編輯？?jī)?nèi)容：3.1 文本的操作3.2 插入和編輯圖像3.3 創(chuàng)建超級(jí)鏈接本課小結(jié)

8、1、 把握在網(wǎng)頁(yè)中插入對(duì)象的方法；2、 把握在網(wǎng)頁(yè)中編輯對(duì)象的方法；3、 明白在網(wǎng)頁(yè)中創(chuàng)建超級(jí)鏈接的方法；思 考 題 及（1）如何在頁(yè)面中插入圖像？作業(yè)（2）如何在頁(yè)面中創(chuàng)建一個(gè)錨記鏈接？（3）如何為自己的郵箱創(chuàng)建電子郵件鏈接？電子教案課程：第 4 章布局頁(yè)面學(xué)時(shí)數(shù)2 課時(shí)內(nèi)容布局頁(yè)面授課時(shí)間教學(xué)目標(biāo)把握插入和編輯的表格方法熟識(shí)布局視圖模式 把握布局單元格和布局表格的創(chuàng)建和編輯 把握框架的使用方法教學(xué)重點(diǎn)創(chuàng)建以及編輯表格和框架的方法然后進(jìn)行教學(xué)難點(diǎn)設(shè)置表格及框架的屬性教學(xué)設(shè)計(jì)1、 教學(xué)思路： 第一, 讓同學(xué)們先說(shuō)說(shuō)對(duì)插入的表格可以進(jìn)行哪些編輯操作；系統(tǒng)地介紹在網(wǎng)頁(yè)中插入表格和創(chuàng)建框架的方法；架

9、進(jìn)行編輯操作；最終學(xué)習(xí)對(duì)插入表格和創(chuàng)建的框2、教學(xué)方法： 講課前可以先講一個(gè)與網(wǎng)頁(yè)有關(guān)的小故事或做一個(gè)小玩耍,活躍下氣氛,帶動(dòng)同學(xué)們的積極性；3、教學(xué)手段：利用多媒體,對(duì)表格和框架的編輯方法進(jìn)行詳細(xì)講解；4、教學(xué)資料及要求：課前要求同學(xué)明白布局頁(yè)面常用到的對(duì)象有哪些；教學(xué)內(nèi)容學(xué)問(wèn)回憶：上一課時(shí)講的 在網(wǎng)頁(yè)中插入對(duì)象與編輯對(duì)象的方法？爭(zhēng)辯問(wèn)題： 1、為什么要使用表格和框架布局頁(yè)面呢？ 2、這樣做對(duì)網(wǎng)頁(yè)的整體成效起什么作用？ 3、又如何在網(wǎng)頁(yè)中插入表格和創(chuàng)建對(duì)象？第 4 章 布局頁(yè)面4.1 使用表格布局頁(yè)面4.1.1 插入表格4.1.2 選擇表格元素4.1.3 輸入頁(yè)面元素4.1.4 設(shè)置表格屬性4.1.5 添加 /刪除行或列4.1.6 單元格的合并及拆分4.1.7 應(yīng)用舉例 創(chuàng)建細(xì)線表格4.2 使用框架布局網(wǎng)頁(yè)4.2.1 創(chuàng)建框架網(wǎng)頁(yè)4.2.2 拆分框架4.2.3 儲(chǔ)存框架和框架集4.2.4 刪除框架4.2.5 設(shè)置框架集及框架的屬性4.