Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)+授課教案

第一篇：Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)+授課教案

Dreamweaver教案一(一課時(shí))

教學(xué)目的：初步了解Dreamweaver的操作

教學(xué)重點(diǎn)：Dreamweaver的界面

教學(xué)難點(diǎn)：各個(gè)面板的調(diào)用

一、引入

為什么要用Dreamweaver而不用Frontpage？

Dreamweaver是Macromedia公司的出品，它以程序小、運(yùn)行速度快、所制作網(wǎng)頁(yè)代碼少這些優(yōu)點(diǎn)，贏得了網(wǎng)頁(yè)制作人員的喜愛(ài)。

例一：m1.htm和f1.htm的大小比較

例二：frontpage安裝程序和dreamweaver安裝程序的大小比較

例三：frontpage運(yùn)行和dreamweaver啟動(dòng)比較

二、Dreamweaver的安裝

三、Dreamweaver的界面

1．文檔窗口：主菜單、工具欄、底部啟動(dòng)條、文檔編輯區(qū)

2．對(duì)象面板：標(biāo)準(zhǔn)、表格、表單、框架、特殊、文件頭、隱藏、字符

3．啟動(dòng)面板：站點(diǎn)管理、代碼檢查、HTML樣式、CSS樣式、行為、歷史記錄、資源管理

4．屬性面板：隨目前對(duì)象不同而內(nèi)容不同

四、作業(yè)

1．寫(xiě)出Dreamweaver對(duì)象界面中所有對(duì)象的名稱

2．新建一個(gè)空白網(wǎng)頁(yè)，寫(xiě)出空白網(wǎng)頁(yè)的HTML代碼

Dreamweaver教案二(一課時(shí))

教學(xué)目的：回憶原來(lái)學(xué)過(guò)的網(wǎng)頁(yè)的文字知識(shí)，熟悉 Dreamweaver的操作，熟悉屬性面板的 1

使用，掌握頁(yè)面屬性、文本屬性的設(shè)置

教學(xué)難點(diǎn)：向?qū)D片、預(yù)格式化、圖片的路徑

教學(xué)重點(diǎn)：常用屬性

一、復(fù)習(xí)引入

1．輸入文本

2．回車鍵的作用

3．如何輸入換行符：Shift+ENTER，或者是對(duì)象面板à符號(hào)

4．換行符對(duì)應(yīng)的HTML標(biāo)記

二、設(shè)置頁(yè)面屬性

1．打開(kāi)頁(yè)面屬性對(duì)話框：右擊頁(yè)面，選擇頁(yè)面屬性（page properties）

2．設(shè)置標(biāo)題顯示（Title）：

3．設(shè)置頁(yè)面背景（Background image）：選擇背景圖像，注意路徑

4．設(shè)置背景顏色Background：

5．設(shè)置本頁(yè)面中文字的顏色Text：在沒(méi)有設(shè)置其它的字體顏色前，這個(gè)文字顏色發(fā)生作用，一旦對(duì)具體的文字設(shè)置顏色，這個(gè)設(shè)置就不起作用了

6．設(shè)置鏈接的各種顏色（Visited Links、Active Links、Links）

7．設(shè)置頁(yè)面邊界（Left Top）：使內(nèi)容與邊框沒(méi)有空隙

8．設(shè)置文檔字符集（Document Encoding）：gb2312

9．設(shè)置向?qū)D片（Tracing Image）：用于設(shè)計(jì)時(shí)，下面的滑動(dòng)條用于設(shè)置這個(gè)圖片的透明度（Transparent）

三、設(shè)置文本屬性

1．格式（Format）：

（1）樣式：段落（Paragraph），標(biāo)題（Heading1）、??預(yù)先格式化的（preformatted）

*預(yù)先格式化的：可以輸入空格，可以按文本原來(lái)的樣子排列，缺點(diǎn)是不能實(shí)現(xiàn)自動(dòng)換行

（2）字體：Default Font

（3）大?。篠ize

（4）顏色：

（5）其它：加粗、傾斜

（6）對(duì)齊：

2．鏈接（Link）：鏈接到文件，鏈接到地址，*相關(guān)（Relate to）：文檔（Document），站根目錄（SiteRoot）

3．目標(biāo)（Target）：打開(kāi)鏈接的目標(biāo)_blank、_self、_parent、_top

4．項(xiàng)目符號(hào)、編號(hào)和縮進(jìn)

四、作業(yè)

根據(jù)示例網(wǎng)頁(yè)，制作一個(gè)網(wǎng)頁(yè)

Dreamweaver 教案三(兩課時(shí))

教學(xué)目的：掌握網(wǎng)頁(yè)中圖片的相關(guān)操作

教學(xué)重點(diǎn)：dreamweaver中設(shè)置圖片的屬性

教學(xué)難點(diǎn)：圖像處理軟件的使用

一、復(fù)習(xí)引入 1．網(wǎng)頁(yè)的頁(yè)面背景顏色和文本顏色在HTML代碼中是如何表示的？ RGB方式表示顏色：紅綠蘭，0表示最弱，255表示最強(qiáng) 一共可以表示：256╳256╳256=16777216種顏色由于瀏覽器的關(guān)系，只有216種顏色能在瀏覽器中正常顯示，多于這個(gè)范圍的顏色，有的瀏覽器顯示時(shí)就可能發(fā)生偏差，不能正常顯示。這個(gè)范圍我們稱之為網(wǎng)頁(yè)安全顏色范疇 2．網(wǎng)頁(yè)中運(yùn)用顏色原則

l 切忌采用過(guò)多的顏色；

l 背景顏色不要太深；

l 要保持整個(gè)網(wǎng)頁(yè)的色調(diào)統(tǒng)一；

l 要圍繞網(wǎng)頁(yè)主題選擇顏色

二、網(wǎng)頁(yè)中的圖像格式 *BMP：位圖格式 1． GIF：Graphics Interchange Format可交換的圖像格式特點(diǎn)： l 只支持256種顏色 l 支持透明效果 l 可以交錯(cuò)下載 l 可以實(shí)現(xiàn)動(dòng)畫(huà)效果 l 文件所占用空間小 l 不能支持漸變色彩 l 更改圖片大小要從原文件改起 2． JPEG：Joint Photographic Experts Group聯(lián)合攝影專家組文件格式特點(diǎn)： l 支持24位圖像 l 有損壓縮 3． GIF與JPEG比較

三、插入圖像 1．插入圖像：InsertàImage；對(duì)象面板 2．圖像屬性： l 寬（W）高（H）：默認(rèn)為圖片的大小，可以設(shè)置其它尺寸，但圖片會(huì)變形 l 源文件（Src）： l 對(duì)齊（align）： l 鏈接（Link）：鏈接到的圖片 l 替代（Alt）：圖像注釋，當(dāng)瀏覽器不能正常顯示圖片時(shí)所出現(xiàn)的文字提示 l 地圖（Map）：制作映射圖 l 垂直邊距（V space）：與上邊界的距離 l 水平邊距（H space）與左邊界的距離 l 目標(biāo)（Target）：當(dāng)鏈接項(xiàng)有設(shè)置時(shí)發(fā)生作用 l 低品質(zhì)源（Low Src）：低分辨率副本文件 l 邊框（Border）： l 編輯（Edit）：?jiǎn)?dòng)圖像處理軟件來(lái)對(duì)圖像進(jìn)行編輯 l 重設(shè)大?。≧eset size）：當(dāng)用其它工具修改了圖片大小時(shí)，如果不重設(shè)圖片的大小，則會(huì)變形或者在不小心改變了圖片的大小時(shí)使用此項(xiàng)

四、使用圖像處理軟件

1、轉(zhuǎn)換圖像格式：打開(kāi)，另存為

2、更改圖像尺寸：

3、更改圖像品質(zhì)：另存為

五、作業(yè) l 下列文件均放于同一文件夾下： 1．在網(wǎng)上尋找透明背景的GIF圖片5張，JPEG圖片5張，其中，GIF要有動(dòng)畫(huà)的至少一張，JPEG要有一張風(fēng)景的。2．將找到的圖片放置在背景為藍(lán)色的頁(yè)面上 3．改變第一張GIF圖片的大小 4．設(shè)置第二張GIF圖片的替代文字為“試一試” 5．設(shè) 置第三張GIF圖片的鏈接為第三張JPEG圖片 6．設(shè)置第四張GIF圖片的垂直邊距為5，水平邊距為9 7．對(duì)第一張JPEG圖片設(shè)置映射4個(gè)，分別鏈接到第二、三、四、五張JPEG圖片 8．運(yùn)用圖像處理軟件，制作風(fēng)景JPEG圖片的低品質(zhì)圖片，并對(duì)網(wǎng)頁(yè)中該風(fēng)景圖片設(shè)置低品質(zhì)源 l 不看電腦，寫(xiě)出下列RGB值對(duì)應(yīng)什么顏色 #FF000 #00FF00 #0000FF #FFFF00 #FF00FF #00FFFF

Dreamweaver教案四(三課時(shí))

教學(xué)目的：掌握dreamweaver中表格的應(yīng)用教學(xué)難點(diǎn)：表格對(duì)應(yīng)的HTML代碼

教學(xué)重點(diǎn)：表格的編輯

一、復(fù)習(xí)引入

1．文字的定位：空格、回車

2．圖片的定位：垂直邊距、水平邊距

二、表格

1．插入表格：插入（Insert）à表格（table），或者在對(duì)象面板

2．行數(shù)（row）

3．列數(shù)（column）

4．邊距（cell padding）：?jiǎn)卧裰械膬?nèi)容與單元格邊框之間的距離

5．間距（cell spacing）：?jiǎn)卧裰g的距離

6．寬度（width）：可以是像素（pixel）或百分比為單位（percent）

7．邊框（boder）：

8．屬性面板：只有在選定整個(gè)表格時(shí)才出現(xiàn)表格屬性

9．在表格中也可以通過(guò)右擊，調(diào)出的快捷菜單中選擇表格來(lái)對(duì)表格進(jìn)行設(shè)置

10．清除行高和列寬按鈕

11．改變列寬單位按鈕

12．背景顏色：

13．邊框顏色：設(shè)置整個(gè)表格的格線顏色

14．背景圖像：

三、表格所對(duì)應(yīng)的HTML代碼

1．表格：

2．行：

3．列：

四、選定

1．單擊表格左上角或邊框線

2．在表格內(nèi)單擊表格任一處，右擊，選擇表格（table）à選定表格（select table）

3．選擇所有單元格

4．在文檔窗口的左下角選擇標(biāo)記

5．選定行

6．選定單元格

五、表格的編輯

1．表格的嵌套

在網(wǎng)頁(yè)中，要進(jìn)行復(fù)雜的定位，一般需要用到嵌套表格。不過(guò)，一般不超過(guò)三層。

2．復(fù)制剪切粘貼

3．插入行、列，刪除行列

4．合并單元格，拆分單元格

5．改變行、列、表格的大?。和戏?，屬性面板精確定義

6．表格模板：命令（command）à格式化表格（format table）

六、導(dǎo)入表格數(shù)據(jù)

1．文件導(dǎo)入導(dǎo)入表格數(shù)據(jù)

2．數(shù)據(jù)文件

3．定界符

4．表格寬度

5．單元格邊距和間距

6．格式化首行

7．邊框

七、學(xué)習(xí)網(wǎng)頁(yè)制作的方法

1．學(xué)習(xí)網(wǎng)頁(yè)制作，要先模仿

2．在瀏覽到合適的網(wǎng)頁(yè)時(shí)，用“另存為”保存，再用dreamweaver來(lái)打開(kāi)

八、作業(yè)

1．將數(shù)據(jù)文件1.txt轉(zhuǎn)為表格

2．模仿此頁(yè)制作頁(yè)面

Dreamweaver教案五(兩課時(shí))

教學(xué)目的：掌握框架

教學(xué)難點(diǎn)：框架的編輯

教學(xué)重點(diǎn)：框架的HTML代碼

一、復(fù)習(xí)引入

回憶：Frontpage中的框架應(yīng)用

二、框架的應(yīng)用

1．重復(fù)出現(xiàn)在不同網(wǎng)頁(yè)文檔中的元素：網(wǎng)頁(yè)標(biāo)題、導(dǎo)航欄等等

三、建立框架

1．將對(duì)象面板切換到框架頁(yè)（Frame）

2．插入不同的框架，一個(gè)區(qū)域?qū)?yīng)于一個(gè)頁(yè)面

3．在框架中打開(kāi)原有網(wǎng)頁(yè)：文件（File）à在框架中打開(kāi)（Open in Frame）

四、保存框架

1．選擇文件（File）/保存所有框架（Save Frameset），先保存框架文件，接著會(huì)出現(xiàn)提示，逐個(gè)保存框架中的網(wǎng)頁(yè)

2．保存時(shí)注意名稱

五、框架編輯

1．框架面板：窗口（Windows）à其它（Other）à框架（Frame）調(diào)出框架面板

2．選定框架組：?jiǎn)?擊整個(gè)框架組的邊框；或在框架面板中單擊整個(gè)框架的邊框

3．框架屬性：名稱、源文件，滾動(dòng)否，是否可以調(diào)整大小，是否有邊框，邊框顏色，邊界寬度，邊界高度等

4．拆分框架：按 Alt鍵，拖動(dòng)邊框；修改（Modify）à框架頁(yè)（Frameset）à拆分左/右/上/下（split frame top/bottom/left/right）

*注意區(qū)別：插入一個(gè)新的框架與拆分框架的區(qū)別

5．鏈接打開(kāi)的目標(biāo)

六、框架所對(duì)應(yīng)的HTML代碼

1．框架組：

2．通過(guò)設(shè)置：rows 或cols來(lái)設(shè)定是橫的還是豎的，是頂部還是底部

3．框架組屬性： frameborder框架是否有邊框，border邊框的寬度多少，framespacing框架間距

4．框架項(xiàng)：

5．框架屬性：src 指向的頁(yè)面，name框架名，scrolling是否有滾動(dòng)條，noresize不能由用戶改變大小

6．無(wú)框架提示

欧美色欧美亚洲高清在线观看,国产特黄特色a级在线视频,国产一区视频一区欧美,亚洲成a 人在线观看中文

Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)+授課教案

第一篇：Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)+授課教案