第一篇：網(wǎng)頁設(shè)計教案
課程：
課時：
教學(xué)對象：教師：
公 開 課 教 案
課題：
時間：
地點：多媒體教室五
教學(xué)目標(biāo)：
? 嚴(yán)格把握信息產(chǎn)業(yè)部關(guān)于“網(wǎng)頁設(shè)計師”職業(yè)技能鑒定大綱，使學(xué)生能夠最大程度滿足企業(yè)對網(wǎng)頁設(shè)計人員的需求，掌握網(wǎng)頁設(shè)計軟件的高級應(yīng)用。
? 掌握CSS的基本語法與功能。
? 熟悉“CSS樣式”面板與“相關(guān)CSS” 面板的使用。? 學(xué)會創(chuàng)建、插入樣式表。? 學(xué)會套用CSS樣式。教學(xué)對象分析：
由于講授對象為高職院校大專生，所講內(nèi)容以實際操作為主，注重訓(xùn)練學(xué)生動手能力，所以本課程以案例教學(xué)的方式講解。教學(xué)重點：
CSS樣式的創(chuàng)建、編輯、導(dǎo)出及應(yīng)用 教學(xué)難點：
應(yīng)用類樣式，設(shè)置CSS樣式屬性 教學(xué)方法和教具準(zhǔn)備：
在帶有大屏幕投影儀和計算機相連接的多媒體教室，采用教師講解與學(xué)生實踐相結(jié)合的授課方式。教學(xué)過程：
一、導(dǎo)入課題
復(fù)習(xí)上一章表單知識，簡要回顧前面幾章的學(xué)習(xí)：設(shè)置文本和網(wǎng)頁屬性、使用圖像、插入表格等，但是僅僅利用以上所學(xué)知識做出來的網(wǎng)頁比較枯燥，頁面并不完美。在網(wǎng)絡(luò)上形形色色的網(wǎng)站中，怎么才能讓自己的頁面獨樹一幟？
1、CSS樣式功能：能夠使你的頁面保持統(tǒng)一的風(fēng)格，它可以調(diào)整文字間距、行間距、刪除鏈接下劃線、固定背景圖像、制作特殊的邊框、改變鼠標(biāo)指針形狀等，并能夠簡化網(wǎng)站的制作過程。
2、拿css樣式做出來的頁面效果和沒有使用css樣式的頁面做比較，演示css樣式的特效
二、新課講解
1、CSS概述
⑴ 什么是CSS？
CSS（Cascading Style sheets，層疊樣式表）是一種制作網(wǎng)頁的新技術(shù)，現(xiàn)在已經(jīng)為大多數(shù)的瀏覽器所支持，成為網(wǎng)頁設(shè)計必不可少的工具之一。CSS定義了控制元素外觀的樣式屬性。
⑵ CSS由來
CSS樣式由全球廣域網(wǎng)協(xié)會制定，分別是CSS1、CSS2
2、實例講解
實例
1、利用css樣式“類型”選項改變文本屬性
分析：Dreamweaver的文本控制功能不足，無論是字體大小，排列方式，還是行間距，等等，它所提供的選擇并不多，為了讓我們的網(wǎng)頁更加美觀，更加規(guī)范，有必要使用CSS。
步驟：
1.單擊“CSS面板”右下角“新建CSS樣式”按鈕，彈出“新建CSS樣式”對話框。設(shè)置完畢后點擊“確定”按鈕。2.在對話框 “類型”選項中，“字體”下拉列表框中選擇“華文新魏”，“大小”選擇“18”，“顏色”中選擇“#003300”，加粗，單擊“確定”按鈕。3.在文檔窗口中選擇文字，從“樣式”下拉列表框中選擇該樣式即可。
小結(jié)：本例中用到css樣式列表中的“類型”屬性。它可以幫助我們輕松地實現(xiàn)對文本格式的各種設(shè)置。
擴展：
1.引入外部樣式表
2.利用“區(qū)塊”選項組設(shè)置字母間距、縮進等屬性
實例
2、作出單張圖像的背景
分析：默認(rèn)狀態(tài)下在“頁面屬性”中選擇圖像，則在網(wǎng)頁文檔的整體背景上重復(fù)出現(xiàn)，在css中可以使背景圖像在指定位置上只顯示一次。
步驟： 1.單擊按鈕，選擇“新建”
2.在“背景圖像”中選擇合適的背景圖像，在“重復(fù)”列表中選擇“不重復(fù)”，在“水平位置”中選擇“右對齊”，在“垂直位置”中選擇“居中”，在“附件”中選擇“固定”，單擊“確定”按鈕。
3.選中
標(biāo)簽，在屬性欄的“樣式”中選擇該樣式。小結(jié)：本例中用到css樣式列表中的“背景”屬性。它可以幫助我們隨意設(shè)置背景圖像。
實例
3、利用css樣式給表格設(shè)置特殊邊框，用圖像作列表、改變鼠標(biāo)指針。
分析：利用css樣式為表格設(shè)置不同顏色、樣式的邊框，用漂亮的圖標(biāo)作列表也可將鼠標(biāo)指針改成動畫。
步驟：如實例2，但使用不同的新建及應(yīng)用方式。
擴展：為標(biāo)簽加雙線邊框、利用“定位”列表項將表格像“層”一樣任意移動。
實例
4、特效文字
說明：在photoshop等圖像制作軟件中經(jīng)常會聽到濾鏡的概念，濾鏡能作出很多神奇的特效，然而在dreamweaver mx2004中我們可以利用樣式表設(shè)定各種濾鏡效果。
實例
5、圖像特效
說明：利用“濾鏡”項為圖像設(shè)置不同樣式。
思考題：改變網(wǎng)頁超級鏈接樣式
作業(yè)：
p204頁，課后習(xí)題
上機練習(xí)：
1.對已經(jīng)編輯的文檔使用新的文本樣式（包括超級鏈接時樣式改變）2.將單張圖像作背景并且不滾動、水平:右對齊，垂直:底部 3.改變鼠標(biāo)指針樣式 4.光暈字
5.對圖像使用濾鏡功能
三、教學(xué)后記
第二篇：dreamweaver8網(wǎng)頁設(shè)計教案
初識Dreamweaver 8 課題：Dreamweaver8簡介及創(chuàng)建文檔
一、教學(xué)基本內(nèi)容
1、什么是網(wǎng)頁和網(wǎng)站
2、網(wǎng)頁的分類
3、網(wǎng)頁中的常用術(shù)語
4、網(wǎng)頁設(shè)計的相關(guān)知識
5、認(rèn)識Dreamweaver 8
6、Dreamweaver 8的基本操作
7、Dreamweaver 8工作界面介紹
二、課型：新授課
三、課時：1個課時
四、教學(xué)重點與難點 重點：什么是網(wǎng)頁和網(wǎng)站 難點：
1、網(wǎng)頁的分類
2、網(wǎng)頁設(shè)計的一般步驟
3、Dreamweaver 8的基本操作
五、教學(xué)目的、對Dreamweaver這個制作網(wǎng)頁的工具及網(wǎng)頁有一定的認(rèn)識，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁設(shè)計的興趣
2、一定要學(xué)會建立一個空白網(wǎng)頁
3、會對頁面有一個簡單的設(shè)置
六、教學(xué)過程
1、什么是網(wǎng)頁和網(wǎng)站
（1）網(wǎng)頁
網(wǎng)頁是由HTML（超級文本標(biāo)識語言）或者其他語言編寫的，通過IE瀏覽器編譯后供用戶獲取信息的頁面，它又稱為Web頁，其中可包含文字、圖像、表格、動畫和超級鏈接等各種網(wǎng)頁元素。
（2）網(wǎng)站
網(wǎng)站就是一個或多個網(wǎng)頁的集合。從廣義上講，網(wǎng)站就是當(dāng)網(wǎng)頁發(fā)布到Internet上以后，能通過瀏覽器在Internet上訪問的頁面。
? 門戶網(wǎng)站 ? 職能網(wǎng)站 ? 專業(yè)網(wǎng)站 ? 個人網(wǎng)站
2、網(wǎng)頁的分類
（1）按所處位置分類
按網(wǎng)頁在網(wǎng)站中所處的位置可將網(wǎng)頁分為主頁和子頁兩類。
(2)按表現(xiàn)形式分類
按網(wǎng)頁的表現(xiàn)形式可將網(wǎng)頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。
3、網(wǎng)頁設(shè)計的相關(guān)知識（1）設(shè)計網(wǎng)頁的原則
A、整體規(guī)劃 B、鮮明的主題 C、善用圖像 D、醒目的導(dǎo)航 E、及時更新 F、易記的網(wǎng)站名稱 G、通用網(wǎng)頁 H、動畫適量
（2）網(wǎng)頁設(shè)計的一般步驟
A、規(guī)劃網(wǎng)站 B、收集整理資源 C、配置站點 D、創(chuàng)建頁面 E、測試站點 F、發(fā)布站點
G、維護、更新站點（3）網(wǎng)頁制作的常用工具 A、網(wǎng)頁設(shè)計軟件
Dreamweaver是目前使用最多的網(wǎng)頁設(shè)計軟件。B、圖像處理軟件
制作網(wǎng)頁圖像的軟件種類繁多，大多數(shù)網(wǎng)頁設(shè)計人員選擇的是Fireworks或Photoshop。
C、動畫制作軟件
網(wǎng)頁動畫制作中最常用的軟件非Flash莫屬。
4、Dreamweaver 8的基本操作 A、啟動Dreamweaver 8 B、新建空白HTML網(wǎng)頁
C、保存網(wǎng)頁文檔
D、預(yù)覽網(wǎng)頁效果
E、退出Dreamweaver 8
第一章 Dreamweaver8概述
課題：Dreamweaver8簡介及創(chuàng)建文檔
一、教學(xué)基本內(nèi)容
1、Dreamweaver8 的工作界面
2、建立html文檔
二、課型：新授課
三、課時：1個課時
四、教學(xué)重點與難點
重點：熟悉Dreamweaver8工作界面中各個工具的作用 難點：
1、各個面板的調(diào)用
2、建立一個HTML的網(wǎng)頁
3、插處圖像
五、教學(xué)目的、對Dreamweaver這個制作網(wǎng)頁的工具及網(wǎng)頁有一定的認(rèn)識，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁設(shè)計的興趣
2、一定要學(xué)會建立一個空白網(wǎng)頁
3、會對頁面有一個簡單的設(shè)置
六、教學(xué)過程
1、引入
（1）為什么要用Dreamweaver而不用Frontpage? Dreamweaver是Macromedia公司的出品，它以程序小、運行速度快、所制作網(wǎng)頁代碼少這些優(yōu)點，贏得了網(wǎng)頁制作人員的喜愛。（2）相關(guān)工具的介紹
因為這是第一節(jié)網(wǎng)頁制作課，所以首先要簡單介紹下制作網(wǎng)頁的一些相關(guān)工具，比如與Dreamweaver合稱為網(wǎng)頁三劍客的Flash和Fireworks。
2、講授新課
（1）Dreamweaver的界面
a．文檔窗口：主菜單、工具欄、底部啟動條、文檔編輯區(qū)
b．對象面板：標(biāo)準(zhǔn)、表格、表單、框架、特殊、文件廷冖隱藏、字符
c．啟動面板：站點管理、代碼檢查、HTML樣式、CSS樣式、行為、歷史記錄、資源管理
d．屬性面板：隨目前對象不同而內(nèi)容不同
(2)創(chuàng)建HTML網(wǎng)頁(3)在網(wǎng)頁中插入圖像
輸入文字以后，插入圖像，并對圖像設(shè)置對齊的方式，使之與文字呈混排的狀態(tài)。
3、鞏固練習(xí)
練習(xí)使用界面中的各個工具
七、作業(yè)處理
根據(jù)本節(jié)所學(xué)的內(nèi)容，課堂上練習(xí)創(chuàng)建一個空白網(wǎng)頁，并且輸入一段文字，在文本的左邊插入一張圖片
八、教具
所用的教室為多媒體實驗室，因此所要板書的內(nèi)容及使用的工具均在計算機上用PPT課件進行演示。
第二章
創(chuàng)建與規(guī)劃站點
課題：規(guī)劃站點及創(chuàng)建靜態(tài)站點
一、教學(xué)基本內(nèi)容
1、站點規(guī)劃概念
2、站點規(guī)劃的方法
3、站點的組成
4、定義站點
二、課型：新授課
三、課時：2個課時
四、教學(xué)重點與難點 重點：
1、站點組成
2、如何創(chuàng)建靜態(tài)站點 難點：
1、站點的定義
2、編輯、刪除站點
五、教學(xué)目的
1、掌握建立靜態(tài)站點的流程
2、掌握靜態(tài)站點的基本操作
六、教學(xué)過程
1、復(fù)習(xí)引入
由上節(jié)所學(xué)習(xí)的建立HTML網(wǎng)頁引出站點概念
2、講授新課
（1）站點規(guī)劃概念及方法
概念：所謂本地站點，就是指定本地硬盤中存放遠(yuǎn)程站點所有文檔的文件夾 方法：規(guī)劃網(wǎng)站一般需要從3個方面去思考，即網(wǎng)站的主題、網(wǎng)站的內(nèi)容和網(wǎng)站的對象。
（2）創(chuàng)建本地站點
站點組成：Dreamweaver 8站點由3部分組成，具體內(nèi)容取決于環(huán)境和所開發(fā)的Web站點類型。包括本地文件夾、遠(yuǎn)程文件夾、動態(tài)頁文件夾
定義站點：（01）選擇“站點”|“新建站點”選項，或者選擇“站點”｜“管理站點”選項，在彈出的“站點管理”對話框中單擊“新建”按鈕，彈出對話框，在“基本”選項卡的站點名稱輸入框中輸入所要創(chuàng)建站點的名稱，如圖2-5所示
（02）輸入站點名稱后，單擊“下一步”按鈕，在彈出的是否使用服務(wù)器技術(shù)對話框中，根據(jù)自己所制作網(wǎng)頁的類型，確定是否使用服務(wù)器技術(shù)。在此制作靜態(tài)頁面，因此不使用服務(wù)器技術(shù)，如圖2-6所示。
（03）單擊“下一步”按鈕，在彈出的設(shè)置站點文件夾對話框中，選擇或輸入一個本地文件夾作為“本地站點文件夾”，如圖2-7所示。
（04）選擇了本地站點文件夾后，單擊該對話框中的“下一步”按鈕，進入設(shè)置是否與遠(yuǎn)程服務(wù)器相連的對話框，在這里選擇“無”，設(shè)置為不與遠(yuǎn)程服務(wù)器相連，如圖2-9所示。
（05）單擊“下一步”按鈕，便會顯示在站點定義向?qū)е兴x擇設(shè)置的詳細(xì)報告，如果感覺滿意，單擊“完成”按鈕，完成本網(wǎng)站的創(chuàng)建，如圖2-10所示；否則單擊“上一步”按鈕重新修改各項設(shè)置。
（3）站點的基本操作
其基本操作包括編輯、復(fù)制、刪除站點。
3、鞏固練習(xí)
練習(xí)站點的建立，及其基本操作。
七、作業(yè)處理
在課堂上要求每一個同學(xué)在F盤下建立一個名為“我的站點”的文件夾，在dreamweaver中創(chuàng)建一個靜態(tài)站點，將站點信息存放到我的站點文件夾中。
八、教具
所用的教室為多媒體實驗室，因此所要板書的內(nèi)容及使用的工具均在計算機上用PPT課件進行演示。
課題：搭建動態(tài)網(wǎng)站服務(wù)器及創(chuàng)建動態(tài)站點
一、教學(xué)基本內(nèi)容
1、安裝IIS
2、動態(tài)站點與靜態(tài)站點的區(qū)別
3、搭建動態(tài)站點
二、課型：新授課
三、課時：2個課時
四、教學(xué)重點與難點
重點：動態(tài)站點與靜態(tài)站點的區(qū)別 難點：
1、虛擬目錄的概念
2、動態(tài)站點的定義
3、站點測試
五、教學(xué)目的
1、學(xué)會安裝IIS，知道IIS的作用
2、學(xué)會創(chuàng)建虛擬目錄
3、會創(chuàng)建動態(tài)站點
六、教學(xué)過程
1、引入
先提出靜態(tài)站點的作用及限制性，引入動態(tài)站點的功能
2、講授新課
（1）安裝并啟動IIS（現(xiàn)場操作）（2）定義一個動態(tài)站點 步驟：<01>設(shè)置虛擬目錄。
（1）在本地磁盤“C:”下新建一個site文件夾作為本地站點的根文件夾。（2）設(shè)置web共享。找到“C:site”文件夾，選中并右擊該文件夾，從彈出的快捷菜單中選擇“共享和安全”選項。在打開的“site屬性”對話框中，選擇“Web共享”選項卡，如圖2-19所示
（3）設(shè)置“編輯別名”對話框。選中“共享文件夾”單選按鈕，在彈出的“編輯別名”對話框中將“別名”設(shè)置為site；在“訪問權(quán)限”中選擇“讀取”；在“應(yīng)用程序權(quán)限”中選擇“腳本”，如圖2-20所示。最后單擊“確定”按鈕關(guān)閉對話框，便完成了定義動態(tài)站點的準(zhǔn)備工作。
<02>進入“高級”選項卡。
（1）選擇“站點”|“新建站點”選項，選擇“站點定義”對話框中的“高級”選項卡。（2）從“分類”列表框中選擇“本地信息”（默認(rèn)選項）選項，如圖2-21所示。
<03>設(shè)置“本地信息”的各參數(shù)（見圖2-22
<04>設(shè)置“測試服務(wù)器”的各參數(shù)（見圖2-23）。
<05>顯示結(jié)果。（3）測試站點
<01>將ch02 test.asp文件復(fù)制到C:site文件夾中，并使用Dreamweaver 8 打開test.asp。
<02>單擊瀏覽器中“預(yù)覽/調(diào)試” 按鈕，或者按F12鍵在瀏覽器中運行test.asp頁面。出現(xiàn)如圖2-25所示的成功頁面。若瀏覽器提示找不到服務(wù)器，則需重新搭建ASP服務(wù)器。
3、鞏固練習(xí)
練習(xí)站點的建立，及其基本操作。
七、作業(yè)處理
在課堂上要求每一個同學(xué)在F盤下建立一個名為”我的動態(tài)站點”的文件夾，將其設(shè)置為虛擬目錄，在dreamweaver中創(chuàng)建一個動態(tài)站點，將站點信息存放到我的動態(tài)站點文件夾中。
八、教具
所用的教室為多媒體實驗室，因此所要板書的內(nèi)容及使用的工具均在計算機上用PPT課件進行演示。
第三章 文本及其格式化
課題：輸入文本及其格式化
一、教學(xué)基本內(nèi)容
1、輸入普通文本
2、插入符號、日期
3、使用項目列表
二、課型：新授課
三、課時：2個課時
四、教學(xué)重點與難點
重點：
1、插入符號、空格和日期
2、使用項目列表 難點：
1、項目列表
五、教學(xué)目的
1、掌握文本輸入方法
2、掌握日期的插入
3、掌握項目列表的使用
六、教學(xué)過程
1、引入
首先例用一個已完成的網(wǎng)頁，讓學(xué)生來看別人的設(shè)置，由此引入文本的格式化。
2、講授新課（1）文本的輸入
兩種方法：a:直接在文檔窗口中輸入文本。即先選擇要插入文本的位置，然后直接輸入文本。
b:在其他編輯器中復(fù)制已經(jīng)生成的文本，然后切換到Dreamweaver 8文檔窗口中，將選取插入點，然后選擇“編輯”|“粘貼”選項。
（2）創(chuàng)建項目列表
類型：無序列表、有序列表、定義列表、目錄列表和菜單列表。
（3）插入日期
3、鞏固練習(xí)
練習(xí)各種項目列表的使用
七、作業(yè)處理
要求每一個同學(xué)建立一個名為“我的網(wǎng)頁”的空白文檔，在網(wǎng)頁中輸入文字，然后在右下角插入日期，在內(nèi)容當(dāng)中便用有序列表。
八、教具
所用的教室為多媒體實驗室，因此所要板書的內(nèi)容及使用的工具均在計算機上用PPT課件進行演示。
課題：CSS樣式
一、教學(xué)基本內(nèi)容、演示并講解 CSS 的應(yīng)用 2、CSS 的基本概念 3、CSS 的特點 4、CSS 樣式定義 5、CSS 常用屬性與值
二、課型：新授課
三、課時：2個課時
四、教學(xué)重點與難點
重點：
1、掌握 CSS 樣式定義
2、掌握 CSS 常用屬性與值
難點：
1、掌握 CSS 樣式定義
2、CSS 常用屬性與值
3、能獨立完成 CSS 樣式的應(yīng)用
五、教學(xué)目的、掌握 CSS 的基本概念 2、掌握 CSS 樣式定義 3、掌握 CSS 常用屬性與值
六、教學(xué)過程
向?qū)W生演示多個項目：成品站點，分階段演示和分析此網(wǎng)頁的設(shè)計流程和過程，在每個階段演示完畢后，讓學(xué)生對此階段進行鞏固。講解完畢后學(xué)生完成課后作業(yè)，教師實施指導(dǎo)。
第一步：演示并講解用 CSS 樣式制作的網(wǎng)頁。第二步：分步演示并講解 CSS 樣式的基本概念。第三步：講解并分析 CSS 常用屬性與值。第四步：結(jié)合 CSS 樣式的使用制作網(wǎng)頁 第四步：課程小結(jié)。
七、作業(yè)處理
課堂上進行計論：
第一步：演示并講解用 CSS 樣式制作的網(wǎng)頁。
第二步：分步演示并講解 CSS 樣式的基本概念。
第三步：講解并分析 CSS 的知識點。
第四步：結(jié)合 CSS 樣式的使用制作網(wǎng)頁
第四步：課程小結(jié)。
八、教具
所用的教室為多媒體實驗室，因此所要板書的內(nèi)容及使用的工具均在計算機上用PPT課件進行演示。
第四章 表格
課題：表格創(chuàng)建及設(shè)置
一、教學(xué)基本內(nèi)容 1、創(chuàng)建表格 2、添加表格對象 3、自動套用表格格式
二、課型：新授課
三、課時：2個課時
四、教學(xué)重點與難點 重點：
1、創(chuàng)建表格
2、自動套用表格格式 難點：套用表格格式
五、教學(xué)目的、掌握創(chuàng)建表格的基本方法 2、會使用自動套用表格格式
六、教學(xué)過程
1、引入
網(wǎng)頁需要進行排版，由報紙的排版引入網(wǎng)頁的排版，由此提出表格的作用
2、講授新課（1）創(chuàng)建表格
步驟：<01>將光標(biāo)停放在頁面需要創(chuàng)建表格的位置。
<02>如果未打開“插入”工具欄，可以在文檔窗口單擊按鈕。如果在文檔窗口中找不到該按鈕，可使用Ctrl+F2快捷鍵切換“插入”工具欄的顯示或隱藏狀態(tài)，<03>在“常用”標(biāo)簽中，單擊“表格”按鈕
<04>彈出“表格”對話框
輸入要插入表格的行數(shù)，在此輸入2。列數(shù)
輸入要插入表格的列數(shù)，在此輸入3 <05>單擊“確定”按鈕
(2)套用表格格式
3、鞏固練習(xí)
創(chuàng)建一個表格，練習(xí)格式的套用。
七、作業(yè)處理
在課堂上創(chuàng)建一個五行四列的表格，要求邊框為0，寬150，高254的表格。
八、教具
所用的教室為多媒體實驗室，因此所要板書的內(nèi)容及使用的工具均在計算機上用PPT課件進行演示。
課題：表格的應(yīng)用
一、教學(xué)基本內(nèi)容
1、設(shè)置單元格
2、表格的基本操作
二、課型：新授課
三、課時：2個課時
四、教學(xué)重點與難點 重點：表格的編輯 難點：排序表格
五、教學(xué)目的、掌握表格的基本操作 2、能夠熟練設(shè)置單元格格式
六、教學(xué)過程
1、引入
（1）文字的定位：空格、回車
（2）圖片的定位：垂直邊距、水平邊距
2、表格
插入表格：插入（Insert）表格（table），或者在對象面板
行數(shù)（row）
列數(shù)（column）
邊距（cell padding）：單元格中的內(nèi)容與單元格邊框之間的距離
間距（cell spacing）：單元格之間的距離
寬度（width）：可以是像素（pixel）或百分比為單位（percent）
邊框（boder）：
屬性面板：只有在選定整個表格時才出現(xiàn)表格屬性
在表格中也可以通過右擊，調(diào)出的快捷菜單中選擇表格來對表格進行設(shè)置清除行高和列寬按鈕
改變列寬單位按鈕
背景顏色：
邊框顏色：設(shè)置整個表格的格線顏色
背景圖像：
3、表格所對應(yīng)的HTML代碼
表格：[table][/table]
行：[tr][/tr]
列：[td][/td]
4、表格的編輯
（1）表格的嵌套
（2）在網(wǎng)頁中，要進行復(fù)雜的定位，一般需要用到嵌套表格。不過，一般不超過三層。
（2）復(fù)制剪切粘貼
（3）插入行、列，刪除行列（4）合并單元格，拆分單元格
（5）改變行、列、表格的大小：拖放，屬性面板精確定義（6）表格模板：命令（command）格式化表格（format table）
七、作業(yè)處理
根據(jù)課本上的實訓(xùn)作出一個精美課程表網(wǎng)頁
八、教具
所用的教室為多媒體實驗室，因此所要板書的內(nèi)容及使用的工具均在計算機上用PPT課件進行演示。
第五章 圖像
課題：圖像插入及屬性設(shè)置
一、教學(xué)基本內(nèi)容
1、圖像的類型
2、插入鼠標(biāo)經(jīng)過圖像
二、課型：新授課
三、課時：2個課時
四、教學(xué)重點與難點 重點：插入圖像 難點：圖像屬性
五、教學(xué)目的、掌握圖像的插入方法 2、掌握圖像屬性設(shè)置
六、教學(xué)過程
1、引入
網(wǎng)頁的頁面背景顏色和文本顏色在HTML代碼中是如何表示的？ RGB方式表示顏色：紅綠蘭，0表示最弱，255表示最強 一共可以表示：256╳256╳256=16777216種顏色 由于瀏覽器的關(guān)系，只有216種顏色能在瀏覽器中正常顯示，多于這個范圍的顏色，有的瀏覽器顯示時就可能發(fā)生偏差，不能正常顯示。這個范圍我們稱之為網(wǎng)頁安全顏色范疇
網(wǎng)頁中運用顏色原則 ：切忌采用過；背景顏色不要太深；要保持整個網(wǎng)頁的色調(diào)統(tǒng)一； 要圍繞網(wǎng)頁主題選擇顏色
2、講授新課
（1）網(wǎng)頁中的圖像格式 *BMP：位圖格式
GIF：Graphics Interchange Format可交換的圖像格式 特點：只支持256種顏色支持透明效果、可以交錯下載、可以實現(xiàn)動畫效果、文件所占用空間小、不能支持漸變色彩、更改圖片大小要從原文件改起
JPEG：Joint Photographic Experts Group聯(lián)合攝影專家組文件格式 特點：支持222
位圖像、有損壓縮。（2）插入圖像
3、鞏固練習(xí)
練習(xí)設(shè)置圖像的屬性。
七、作業(yè)處理
在表格中插入一張背景圖像。
八、教具
所用的教室為多媒體實驗室，因此所要板書的內(nèi)容及使用的工具均在計算機上用PPT課件進行演示。
課題：制作地圖網(wǎng)頁及電子相冊
一、教學(xué)基本內(nèi)容
1、制作地圖網(wǎng)頁
2、電子相冊
二、課型：實驗課
三、課時：2個課時
四、教學(xué)重點與難點 重點：制作地圖網(wǎng)頁 難點：熱點選擇
五、教學(xué)目的 1、掌握圖像使用 2、掌握圖像的其它操作
六、教學(xué)過程
此節(jié)是實驗課，實驗步驟為：
（01）啟動Dreamweaver 8，打開ch05SAMPLE01MAP.ASP文件。（02）選中該文檔中“絲綢之路示意圖”圖像。
（03）在菜單欄中依次選擇“窗口”|“屬性”選項或按下Ctrl+F3組合鍵，打開“屬性”面板，如果沒有顯示圖像地圖制作工具，單擊“屬性”面板右下角的擴展箭頭，（04）在“屬性”面板中的“地圖”文本框中輸入圖像地圖名稱。
（05）創(chuàng)建圖像地圖（熱區(qū)），可根據(jù)地圖中不同的形狀選擇不同的熱區(qū)工具，在所選定圖像上拖動鼠標(biāo)指針，便可完成圖像地圖的創(chuàng)建。（06）圖像地圖創(chuàng)建完成后，選中所創(chuàng)建的熱區(qū)，打開“屬性”面板。
在熱點“屬性”面板的“鏈接”文本框中輸入鏈接文件的名稱，或者單擊文件夾圖標(biāo)并通過瀏覽選擇在用戶單擊該熱點時要打開的文件。在“目標(biāo)”下拉列表中，選擇用于打開該文件的窗口。
（07）在“地中海”創(chuàng)建一個矩形熱區(qū)，在“替換”框中輸入“關(guān)于地中海的論述”替代文本，并設(shè)置好鏈接（鏈接到DZH.ASP）。
（08）按照相同的方法分別為不同的路線或地名創(chuàng)建熱區(qū)，并輸入不同的鏈接和
替代文字，保存并預(yù)覽。當(dāng)鼠標(biāo)指針移到圖像地圖中時將顯示“替換”框中的內(nèi)容，如果設(shè)置有鏈接，單擊便可進入所鏈接的文檔。（9）完成創(chuàng)建。
第六章 框架
課題：框架集的創(chuàng)建及其基本操作
一、教學(xué)基本內(nèi)容、演示并講解用框架制作的網(wǎng)頁、框架的基本結(jié)構(gòu)、框架的各種屬性、框架結(jié)構(gòu)之間的鏈接
二、課型：新授課
三、課時：2個課時
四、教學(xué)重點與難點 重點：
1、框架的各種屬性
2、框架結(jié)構(gòu)之間的鏈接
難點：
1、框架的各種屬性
2、框架結(jié)構(gòu)之間的鏈接
五、教學(xué)目的、掌握框架的基本結(jié)構(gòu)、掌握框架的各種屬性、掌握框架結(jié)構(gòu)之間的鏈接
六、教學(xué)過程
1、復(fù)習(xí)引入
回憶：Frontpage中的框架應(yīng)用
2、框架的應(yīng)用
重復(fù)出現(xiàn)在不同網(wǎng)頁文檔中的元素：網(wǎng)頁標(biāo)題、導(dǎo)航欄等等
3、建立框架
（1）將對象面板切換到框架頁（Frame）（2）插入不同的框架，一個區(qū)域?qū)?yīng)于一個頁面
（3）在框架中打開原有網(wǎng)頁：文件（File）à在框架中打開（Open in Frame）
4、保存框架
（1）選擇文件（File）/保存所有框架（Save Frameset），先保存框架文件，接著會出現(xiàn)提示，逐個保存框架中的網(wǎng)頁（2）
保存時注意名稱
5、框架編輯
框架面板：窗口（Windows）à其它（Other）à框架（Frame）調(diào)出框架面板
選定框架組：單擊整個框架組的邊框；或在框架面板中單擊整個框架的邊框
框架屬性：名稱、源文件，滾動否，是否可以調(diào)整大小，是否有邊框，邊框顏色，邊界寬度，邊界高度等
拆分框架：按Alt鍵，拖動邊框；修改（Modify）à框架頁（Frameset）à拆分左/右/上/下（split frame top/bottom/left/right）
*注意區(qū)別：插入一個新的框架與拆分框架的區(qū)別
6、框架所對應(yīng)的HTML代碼
框架組： 通過設(shè)置rows或cols來設(shè)定是橫的還是豎的，是頂部還是底部
框架組屬性：frameborder框架是否有邊框，border邊框的寬度多少，framespacing框架間距
框架項： 框架屬性：src指向的頁面，name框架名，scrolling是否有滾動條，noresize不能由用戶改變大小
七、作業(yè)處理
1、建立框架頁面如圖，菜單鏈接到不同的圖片，單擊菜單中的一項，圖片在右邊的框架中打開
2、建立左右型的框架，并在其中的左框架中插入上下型的框架
3、建立左右型框架，并將左邊的框架拆分為上下型
八、教具
所用的教室為多媒體實驗室，因此所要板書的內(nèi)容及使用的工具均在計算機上用PPT課件進行演示。
課題：創(chuàng)建電子圖書
一、教學(xué)基本內(nèi)容
利用框架制作電子圖書網(wǎng)頁
二、課型：實驗課
三、課時：2個課時
四、教學(xué)重點與難點 重點：框架結(jié)構(gòu)之間的鏈接
難點： 框架集
五、教學(xué)目的 1、掌握框架的運用、掌握框架結(jié)構(gòu)之間的鏈接
六、教學(xué)過程
步驟：（01）打開或新建一個空白的文檔，在該文檔中創(chuàng)建一個 框架集。（02）命名框架。將左列框架命名為index、右列上部框架命名為_top、右列下部框架命名為main。
（03）保存框架。將框架集保存為06A.asp文檔，index框架保存為06B.asp文檔，_top框架保存為06C.asp文檔，main框架保存為06D.asp，文檔均保存在ch06文件夾下。
（04）設(shè)置框架的行或列。將index框架的列設(shè)置為150像素，_top框架的行設(shè)置為90像素。
（05）設(shè)置頁面的配色方案。單擊“屬性”面板中的“頁面屬性”按鈕，將index框架的06B.asp文檔的文本顏色設(shè)置為#669966，背景顏色設(shè)置為#FFCC99。（06）將鏈接顏色按圖6-14右側(cè)圖進行設(shè)置，然后單擊“確定”按鈕。
（07）定義樣式。選擇“文本”|“CSS樣式”|“新建”選項，將index框架的06B.asp文檔的tr標(biāo)簽定義為宋體9points。
（08）填充頁面。在index框架06B.asp文檔中輸入如圖6-15所示的文本并插入一個9行1列的表格。
其中“休閑娛樂”文本為隸書5號字體，顏色為#66CC00；表格邊框的顏色為白色；
單元格的高度為30像素，單元格的對齊方式為水平居中、垂直居中。（09）在“頁面屬性”對話框中將_top框架的標(biāo)題設(shè)置為“標(biāo)題欄”，將所有邊界都設(shè)置為0（10）將光標(biāo)停留在_top框架中，輸入文本并插入images文件夾下的圖像，其中文本為4號宋體，顏色為#66CC00。
（11）設(shè)置鏈接。選中左邊框架（index）中目錄下的“考試作弊”文本，在“屬性”面板中的“鏈接”框中設(shè)置與之對應(yīng)的笑話內(nèi)容（WJ/wj6-1.asp）的鏈接。這時“目標(biāo)”框變?yōu)榧せ顮顟B(tài)，從“目標(biāo)”下拉列表框中選擇鏈接的目標(biāo)為main。（12）使用相同的方法設(shè)置其他“笑話”目錄所鏈接的內(nèi)容和鏈接目標(biāo)，其他的鏈接目標(biāo)均為main框架。笑話目錄各項和WJ文件夾中wj6-1.asp～wj6-8.asp是一一對應(yīng)的關(guān)系。
（13）指定框架源文件。選中main框架，在“屬性”面板中的“源文件”文本框中設(shè)置框架的源文件。單擊旁邊的文件夾，選擇WJ文件夾中wj6-1.asp文件（14）在文檔窗口的菜單欄中選擇“文件”|“保存全部”選項，將所有的框架進行保存。
（15）按F12鍵便可預(yù)覽該實例
第七章 頁面布局視圖的使用
課題：布局表格和布局單元格的基本知識及操作
一、教學(xué)基本內(nèi)容
1、布局表格和布局單元格的基本知識
2、布局表格和布局單元格的創(chuàng)建
二、課型：新授課
三、課時：2個課時
四、教學(xué)重點與難點
重點：創(chuàng)建布局表格和布局單元格 難點：布局表格的使用
五、教學(xué)目的、掌握布局的基本知識、熟練運用布局表格和布局單元格
六、教學(xué)過程
1、引入
在第四章學(xué)習(xí)過了表格的布局，用表格與布局表格相比，看其特點，從而使學(xué)生更加了解什么是布局表格和布局單元格。
2、講授新課
（1）布局表格的基本知識
（2）布局表格和布局單元格的基本操作 選擇布局表格：
須要執(zhí)行下列操作之一：
a:雙擊所繪制的布局表格中的標(biāo)志。b:單擊文檔窗口左下角的