網(wǎng)頁制作教案電子版

教學內(nèi)容第一章《網(wǎng)頁與網(wǎng)站基礎知識》校歷第一周課時4課型理論+實踐教學目的網(wǎng)站的籌劃與創(chuàng)立原則教學措施任務驅(qū)動法作業(yè)布置分析總結本章重要通過三個活動的開展，讓學生理解DreamweaverCS3網(wǎng)頁瀏覽的基本原理和網(wǎng)頁制作技術的發(fā)展，懂得目前網(wǎng)頁制作常用的幾種工具。理解HTML語法的基本構成及幾種常用標簽。通過詳細的網(wǎng)頁實例制作，掌握起始頁的設置以及基本的界面操作。教學過程新課引入：越來越多的人開始熟悉網(wǎng)絡，熟悉網(wǎng)頁。人們已經(jīng)漸漸意識到網(wǎng)絡正在變化平常生活。人們需要為個人、企業(yè)制作一種精彩的網(wǎng)站，這就帶來一種新的問題：怎樣設計制作一種實用而美觀的網(wǎng)站？實用與美觀似乎總是相悖的。新課內(nèi)容：一、網(wǎng)頁與網(wǎng)站的概念網(wǎng)頁：我們在瀏覽器中看到的頁面，它是一種單個的文獻。網(wǎng)頁里可以有文字、表格、圖像、聲音、視頻等等。網(wǎng)站中的第一種頁面成為首頁或主頁。網(wǎng)站：寄存在網(wǎng)絡服務器上的完整信息的集合體，它包括一種或多種網(wǎng)頁。這些網(wǎng)頁按照一定的組織構造，以鏈接等方式連接在一起，形成一種整體，描述一組完整的信息。二、網(wǎng)頁的設計網(wǎng)頁的主題指網(wǎng)頁所要體現(xiàn)的最重要的思想內(nèi)涵，可以說師網(wǎng)頁的靈魂。確定主題時應遵照的原則自己擅長或喜歡的內(nèi)容主題小而精不要太濫或目的太高教學過程

2、網(wǎng)頁的文字最適合于網(wǎng)頁正文顯示的字體大小為12磅左右，假如在一種頁面中需要安排的內(nèi)容較多可采用9磅的字號。標題和需要強調(diào)的內(nèi)容可以用較大的字號。行距的變化也會對文本的可讀性產(chǎn)生很大影響。一般狀況下，靠近字體尺寸的行距設置比較適合正文。行距的常規(guī)比例為10:12，即用字10點，則行距12點。在網(wǎng)頁設計中，設計者可認為文字、文字鏈接、已訪問鏈接和目前活動鏈接選用多種顏色。使用不一樣顏色的文字可以使想要強調(diào)的部分愈加引人注目，但應當注意的是，對于文字的顏色，只可少許運用，在一種頁面上運用過多的顏色，會影響瀏覽者閱讀頁面內(nèi)容，除非你有特殊的設計目的。3、網(wǎng)頁的色彩●色彩助鮮明性

●色彩的獨特性

●色彩的合適性

●色彩的聯(lián)想性

●頁面中各處用色的選擇4、網(wǎng)頁版式和布局1．版面設計的環(huán)節(jié)

（1）畫出頁面的構造草圖：只需畫出頁面的大體構造。注：辨別率為640*480時，頁面顯示尺寸為620*311；辨別率為800*600時，頁面顯示尺寸為780*428；辨別率為1024*768時，頁面顯示尺寸為1007*600；

（2）布局細化和調(diào)整：將需要放置的功能模塊安排在頁面上，注意突出重點和平衡協(xié)調(diào)

教學過程（3）定格：確定出完美的布局方案，定格為最終的版式

2．常見網(wǎng)頁布局

（1）T型構造（2）同字構造教學過程（3）川字構造（4）三字構造教學過程（3）川字構造（4）三字構造教學過程（5）單一構造教學內(nèi)容第一章《網(wǎng)頁與網(wǎng)站基礎知識》校歷第一周課時2課型理論+實踐教學目的網(wǎng)站的籌劃與創(chuàng)立原則教學措施任務驅(qū)動法作業(yè)布置分析總結本章重要通過三個活動的開展，讓學生理解DreamweaverCS3網(wǎng)頁瀏覽的基本原理和網(wǎng)頁制作技術的發(fā)展，懂得目前網(wǎng)頁制作常用的幾種工具。理解HTML語法的基本構成及幾種常用標簽。通過詳細的網(wǎng)頁實例制作，掌握起始頁的設置以及基本的界面操作。教學過程三、網(wǎng)站的籌劃與創(chuàng)立原則

1、定位網(wǎng)站主題和名稱

設計一種站點，首先碰到的問題就是定位網(wǎng)站主題。所謂主題也就是你的網(wǎng)站的題材。

對于題材的選擇，應注意：

（1）主題要小而精。定位要小，（2）題材最佳是你自己擅長或者愛慕的內(nèi)容。

（3）題材不要太濫或者目的太高?！疤珵E”是指到處可見，網(wǎng)站名稱及域名的選擇也是非常重要的。和現(xiàn)實生活中同樣，網(wǎng)站名稱與否正氣，響亮，易記，對網(wǎng)站的形象和宣傳推廣也有很大影響。一般的提議是：

（1）名稱要正。也就是要合法，和理，和情。不能用反動的，色情的，迷信的，危害社會安全的名詞語句。

（2）名稱要易記。根據(jù)中文網(wǎng)站瀏覽者的特點，除非特定需要，網(wǎng)站名稱最佳用中文名稱，不要使用英文或者中英文混合型名稱。此外，網(wǎng)站名稱的字數(shù)應當控制在六個字（最佳四個字）（3）名稱要有特色。名稱平實就可以接受，假如能體現(xiàn)一定的內(nèi)涵，給瀏覽者更多的視覺沖擊和空間想象力，則為上品。

域名的選擇也是如此，選一種簡樸易記，例如可以模仿著名網(wǎng)站擴大自己的影響，有一定含義的域名也是網(wǎng)站成功的一部分。2、網(wǎng)站的風格

網(wǎng)站的整體風格及其創(chuàng)意設計是站長們最但愿掌握，也是最難以學習的。難就難在沒有一種固定的程式可以參照和模仿。給你一種主題，任何兩人都不也許設計出完全同樣的網(wǎng)站。

有風格的網(wǎng)站與一般網(wǎng)站的區(qū)別在于：一般網(wǎng)站你看到的只是堆砌在一起的信息，你只能用理性的感受來描述，例如信息量大小，瀏覽速度快慢。但你瀏覽過有風格的教學過程

網(wǎng)站后你能有更深一層的感性認識，例如站點有品位，和藹可親，是老師，是朋友。怎樣樹立網(wǎng)站風格呢？我們可以分這樣幾種環(huán)節(jié)：

第一，確信風格是建立在有價值內(nèi)容之上的。

第二，你需要徹底弄清晰自己但愿站點給人的印象是什么。

第三，在明確自己的網(wǎng)站印象后，開始努力建立和加強這種印象。

對于確定風格，這里提供某些參照：

1.將你的標志logo,盡量的出目前每個頁面上?；蛘唔撁?，或者頁腳，或則背景。

2.突出你的原則色彩。文字的鏈接色彩，圖片的主色彩，背景色，邊框等色彩盡量使用與原則色彩一致的色彩。

3.突出你的原則字體。在關鍵的標題，菜單，圖片里使用統(tǒng)一的原則字體。

4.想一條朗朗上口宣傳口號。把它做在你的banner里，或者放在醒目的位置，告訴大家你的網(wǎng)站的特色

5.使用統(tǒng)一的語氣和人稱。雖然是多種人合作維護，也要讓讀者覺得是同一種人寫的。

6.使用統(tǒng)一的圖片處理效果。例如，陰影效果的方向，厚度，模糊度都必須同樣。

7.發(fā)明一種你的站點特有的符號或圖標。例如在一句鏈接前的一種點，可以使用,.?！睢?/p>

□△→（區(qū)位碼里自己參看）等等。雖然很簡樸的一種變化，卻給人與眾不一樣的感覺。

8.用自己設計的花邊，線條，點

9.展示你網(wǎng)站的榮譽和成功作品。

10.告訴網(wǎng)友有關你的真實的故事和想法。

教學內(nèi)容第二章《站點的建立與管理》校歷第二周課時6課型理論+實踐教學目的1、站點創(chuàng)立2、頁面設置教學措施任務驅(qū)動法作業(yè)布置制作個人空間網(wǎng)站分析總結通過為“我的個人網(wǎng)站”搜集有關資料，掌握站點素材及其制作工具的有關知識；為“我的個人網(wǎng)站”規(guī)劃站點目錄，并比較大型站點的站點構造與小型站點的站點構造區(qū)別，從而理解站點的設計流程；學會使用“高級”標簽為“我的個人網(wǎng)站”建立站點，并設置有關參數(shù)；通過網(wǎng)站地圖，實現(xiàn)對“我的個人網(wǎng)站”中的網(wǎng)站文獻管理，檢查鏈接等。教學過程

一、站點概念多種網(wǎng)頁文檔通過多種鏈接并聯(lián)起來就構成了站點。二、規(guī)劃站點構造1、一種文獻夾用于寄存網(wǎng)站的所有文獻，再在文獻內(nèi)建立幾種文獻夾，將文獻分類，如圖片文獻放在image文獻夾內(nèi)，HTML文獻放在HTML文獻夾內(nèi)，當然，假如站點比較大，文獻比較多，可以先按欄目分類，在欄目里再分類。如：html:放網(wǎng)頁，img:放圖像，sound:放聲音文獻，back:放備份文獻，other:放其他2、用英文或者拼音給文獻命名（推薦英文），不要使用中文的名字（由于有的機器對中文支持不太好，有也許出現(xiàn)鏈接的錯誤，你自己認為對的的東西在他人看來有也許是錯的）。三、創(chuàng)立站點1、選擇“窗口”/“文獻”命令打開“文獻”面板2、展開文獻一項，選中站點，然后再選編輯站點3、點擊“新建”

教學過程

站點名稱（N）處填上你要建立的站點的名稱，這個名字只起著識別的作用，與網(wǎng)站公布后真實的名字無關；當?shù)馗墨I夾（F）處選擇設置網(wǎng)站在當?shù)赜脖P的位置，點擊背面的文獻夾圖標可以選擇硬盤的任意目錄作為寄存網(wǎng)站文獻的目錄；緩存可以使文獻的移動、更名、查找等站點管理的操作速度大大提高，因此提議大家在這里打上鉤；其他的可以默認，當然你可以試試選擇不一樣的，默認圖像文獻夾為站點默認寄存圖片的文獻夾（后來在做網(wǎng)頁的過程中，使用非站點內(nèi)的圖片時，它會提醒與否把該文獻復制到這個文獻夾內(nèi)）；HTTP地址（H）為你站點的網(wǎng)址。作業(yè)：建立一種名字為“我的個人網(wǎng)站”的站點，站點內(nèi)有image、picture、html三個文獻夾和index.html文獻，遠程FTP服務器為，顧客名為:tastelife，密碼為：

教學內(nèi)容第三章《新建文檔與對象》校歷第三周課時4課型理論+實踐教學目的通過本章的學習，顧客可以掌握DreamweaverMX中文版的基本操作及某些使用技巧。如文本的編輯、修改、文本列表的創(chuàng)立及網(wǎng)頁性性的基本設置等。教學措施任務驅(qū)動法作業(yè)布置制作“中國民俗文化”網(wǎng)站分析總結通過本章練習，讓我們學會網(wǎng)頁制作中有關文檔的某些基本操作，其中包括；通過三種措施創(chuàng)立網(wǎng)頁、打開既有網(wǎng)頁文檔及保留網(wǎng)頁；文本和特殊字符的輸入及編輯措施以，學會創(chuàng)立列表；掌握在網(wǎng)頁中插入日期、水平線等常見網(wǎng)頁元素的措施以，并分析其共同之處；掌握設置網(wǎng)頁屬性的措施，并理解站點設計的某些基本理念。教學過程一、編輯文本1、輸入文本

（1）換行

運用Enter鍵換行：在輸入文字后按Enter鍵，文字成段，且上下段各空一行。

運用Shift+Enter鍵換行：假如想要將文字手動換行，中間又不能出現(xiàn)空白行，可以按shift+Enter鍵。（2）加入特殊字符有時為了內(nèi)容的需要，要在網(wǎng)頁中插入某些鍵盤上沒有的特殊字符，例如注冊商標?、版權符?等。

（3）加入批注文字

在網(wǎng)頁中加入合適的批注文字，可以使后來修改、管理網(wǎng)頁時愈加以便。由于批注只有在編輯網(wǎng)頁時或查看原代碼時才能看到，因此不必緊張批注文字破壞版面。2、查找和替代文本二、設置文本屬性1、文本屬性欄

文本屬性欄也就是Dreamweaver默認的屬性欄，如下圖所示，其默認狀態(tài)是打開。假如不小心將屬性欄關閉，則可以通過如下2種途徑打開文本屬性欄：

（1）按快捷鍵Ctrl+F3

（2）選擇窗口/屬性命令2、設置文本格式

教學過程

文本格式一般包括文字的字體、字號、顏色及文本的對齊方式等。3、設置文本樣式

（1）、粗體、斜體，以及其也樣式

（2）、對齊方式

（3）、段落擴展/縮進三、文本列表1、創(chuàng)立

創(chuàng)立文本列表最簡樸的措施是通過文本屬性欄上的列表按鈕將光標停在文本前，單擊屬性欄中的無序列表按鈕與有序列表，即可對文本進行無序或有序排列。2、修改屬性

在網(wǎng)頁中加入文本列表后，還可以根據(jù)個人的習慣變化列表的屬性，如將無序列表的實心小圓圈改成實心矩形，將有序列表的阿拉伯數(shù)字變化為英文字母等。列表屬性的修改是通過列表屬性對話框來完畢的。

在列表類型下拉列表框中，可以設置列表的類型。列表類型包括無序列表、有序列表、目錄列表和菜單列表。

3、創(chuàng)立嵌套文本列表假如想把不一樣級別的文本內(nèi)容用列表的形式體現(xiàn)出來，則需要用到文本列表的嵌套。創(chuàng)立文本列表的嵌套，需用到文本屬性欄上的段落擴展/縮進按鈕。作業(yè)：1、文本錄入與編輯

2、文本及其格式化

教學內(nèi)容第四章《表格處理與網(wǎng)頁布局》校歷第三周課時2課型理論+實踐教學目的讓學生純熟掌握對表格的使用插入表格表格的基本操作設置表格屬性表格的高級操作層與表格的互相轉換教學措施任務驅(qū)動法作業(yè)布置制作課程表等多種表格分析總結通過本章練習，讓學生學會怎樣運用表格來布局頁面，以及表可知及其單元格的編輯與屬性設置。教學過程

一、在網(wǎng)頁中插入表1、定位插入點，使用鼠標單擊。

2、調(diào)出“插入表”對話框，

⑴措施一：單擊“對象”面板（一般）中的“插入表格”對象按鈕；

⑵措施二：單擊“插入”｜“表格”菜單；

3、確定行與列數(shù)在“行”與“列”的輸入框內(nèi)輸入所需的數(shù)值。

4、確定邊距與間距在“單元格邊距”與“單元格間距”的輸入框內(nèi)輸入所需的數(shù)值。

邊距：指單元格內(nèi)的數(shù)據(jù)（內(nèi)容）與邊框線的距離，默認為1個像素。

間距：指相鄰單元格之間的距離（包括上、下、左、右），默認為2個像素。

5、確定表格寬度在“寬度”輸入框內(nèi)輸入所需的數(shù)值，在其右邊選擇單位。

6、確定邊框的厚度在“邊框”輸入框內(nèi)輸入所需的數(shù)值。默認為1，若為0，則沒有邊框線（在布局時應用相稱廣）二、在表格中添加內(nèi)容1、插入文本

⑴直接輸入文本定位單元格，直接輸入文本，若文本超過寬度，則自動擴展。首先是按橫向自動分攤寬度，若不夠，則轉到下行。

⑵粘貼其他文本先將其他文本存入到剪貼板中，再將剪貼板中的內(nèi)容粘貼至目前光標處。教學過程2、在單元格中插入圖片與在文檔中插入圖片同樣操作。

⑴選定位，鼠標單擊；

⑵然后單擊“對象”面板中的“插入圖像”鈕或選擇“插入”｜“圖像”菜單，彈出查找圖像文獻對話框；

⑶選擇所需的圖像文獻，單擊“選擇”即可。三、輸入外部數(shù)據(jù)Dreamweaver可接受其他程序創(chuàng)立的表格數(shù)據(jù)，但這些表格數(shù)據(jù)要使用定界符。定界符即單元格間的分隔符，一般有制表位、冒號、分號等。還可以是Excel文獻。

導入Excel文獻操作措施為：

⑴啟動Dreamweaver，建立一種文檔

⑵選擇“文獻”｜“導入”｜“Excel文檔”菜單，彈出對話框。

⑶選擇Excel文獻，確定即可。

導入表格數(shù)據(jù)文獻操作措施為：

⑴啟動Dreamweaver，建立一種文檔

⑸選擇“文獻”｜“導入”｜“導入表格數(shù)據(jù)”菜單，彈出對話框。

⑹選擇“數(shù)據(jù)文獻”單擊“瀏覽”鈕，查找到所需文獻，選擇“定界符”后，單擊“確定”鈕。

⑺還可進行其他設置：“表格寬度”、“邊距”、“間距”、“格式化首行”、“邊框”等。四、選擇單元格元素1、選擇單元格用鼠標在所要選定的單元格內(nèi)單擊。

2、選擇一行將指針指向待選行的最左邊，當出現(xiàn)黑色的向右箭頭時

教學過程單擊。

3、選擇一列將指針指向待選列的最上面，當出現(xiàn)黑色的向下箭頭時，單擊。

4、選擇整個表

先在表中單擊，再選擇狀態(tài)左邊的粗黑標識“table”

教學內(nèi)容第四章《表格處理與網(wǎng)頁布局》校歷第五周課時6課型理論+實踐教學目的1、認識布局模式2、用布局視圖布局頁面3、掌握進入和退出頁面模式的措施4、創(chuàng)立布局表格和布局單元格5、掌握布局表格和單元格屬性教學措施任務驅(qū)動法作業(yè)布置制作“世錦賽”網(wǎng)站分析總結通過本章練習，讓學生學會怎樣運用表格來布局頁面，以及表可知及其單元格的編輯與屬性設置。教學過程創(chuàng)立頁布局的一種常用的措施是使用HTML表格對元素進行定位。不過，使用表格進行布局不太以便，由于最初創(chuàng)立表格是為了顯示表格數(shù)據(jù)，而不是用于對Web頁進行布局。為了簡化使用表格進行頁面布局的過程，Dreamweaver提供了“布局”模式。在“布局”模式中，您可以使用表格作為基礎構造來設計頁，同步防止使用老式的措施創(chuàng)立基于表格的設計時常常出現(xiàn)的某些問題。一、繪制布局單元格和表格繪制布局表格，請執(zhí)行如下操作：

1、保證您處在“布局”模式中。

2、在“插入”欄的“布局”類別中，單擊“繪制布局表格”按鈕。

3、鼠標指針變?yōu)榧犹?+)。

4、將鼠標指針放置在頁上，然后拖動指針以創(chuàng)立布局表格。

繪制布局表格，請執(zhí)行如下操作：

1、保證您處在“布局”模式中。

2、在“插入”欄的“布局”類別中，單擊“繪制布局單元格”按鈕。

3、鼠標指針變?yōu)榧犹?+)。

4、將鼠標指針放置在頁上，然后拖動指針以創(chuàng)立布局單元格。二、繪制嵌套布局表格將一種布局表格繪制在另一種布局表格中，創(chuàng)立嵌套表格。對外部表格所進行的更改不會影響嵌套表格中的單元格；例如，當更改外部表格中行或列的大小時，內(nèi)部表格中單元格的大小不發(fā)生變化。還可以插入多級嵌套表格。嵌套布局表格的大小不能超過包括它的表格。教學過程三、將內(nèi)容添加到布局單元格1、將插入點放置在您要添加內(nèi)容的布局單元格中。

2、執(zhí)行下列操作之一：在單元格中鍵入文本，當進行鍵入時，單元格將按需要自動擴展。也可粘貼從其他文檔復制的文本。在“插入”欄的“常用”類別中，單擊“圖像”按鈕上的箭頭，然后選擇“圖像”。教學過程一、實訓重點：1、掌握布局網(wǎng)頁在創(chuàng)立、選擇、設置、存儲與應用方面的特點；

2、掌握布局網(wǎng)頁的制作措施；

難點分析：1、布局中的表格嵌套實訓目的與規(guī)定：目的：能過上機實訓讓學生學會使用布局，讓學生加深理解布局；規(guī)定：做出布局網(wǎng)頁四、實習內(nèi)容：

基本知識：1、布局的基本操作練習

五、實訓中也許產(chǎn)生的問題預測及處理：本次實訓最輕易出現(xiàn)的問題如下：問題：創(chuàng)立布局單元格時處理：；教學內(nèi)容第五章《圖像插入與編輯》校歷第六周課時6課型理論+實踐教學目的通過本章的學習，顧客可以掌握DreamweaverMX中網(wǎng)頁所支持的圖像格式、插入圖像、修改圖像屬性、運用外部圖像處理軟件編輯圖像，以及創(chuàng)立圖像映射等內(nèi)容。教學措施任務驅(qū)動法作業(yè)布置制作“七彩云南”網(wǎng)站分析總結通過簡介網(wǎng)頁中圖像的分類及其特點，引入圖像的基本概念，添加圖像的基本措施及其屬性的設置。此外還簡介了創(chuàng)立圖像的變換效果以及使用其他工具編輯圖像的措施。教學過程網(wǎng)頁圖像簡述計算機領域中，圖形基本上分為位圖圖像和矢量圖形兩大類，而網(wǎng)頁圖像也就是這兩類圖形中的一部份。明確兩者之間的差異，對創(chuàng)立和編輯網(wǎng)頁圖像很有協(xié)助。二、插入圖像1、插入一般圖像

在網(wǎng)頁中插入一般圖像的措施很簡樸，首先將光標置于要插入圖像的位置，單擊插入欄中插入圖像圖標，或選擇插入、圖像命令，或是按下Ctrl+Alt+I組合鍵，無論選擇上面的哪種措施都將彈出選擇圖像來源對話框。在此對話框中選擇要插入網(wǎng)頁的圖像名，單擊確定按鈕，此時圖像插入到網(wǎng)頁中。2、插入網(wǎng)頁背景圖像假如想使網(wǎng)頁得到美化，可以在網(wǎng)頁中加入背景圖像。加入背景圖像的措施與設置網(wǎng)頁背景圖像的措施同樣三、設置圖像屬性

當在網(wǎng)頁中選中一幅插入的圖像時，在屬性面板將反應圖像的屬性，如下圖所示。在圖像屬性面板上，可以定義圖像的多種屬性1、定義圖像大小2、圖像的排列方式3、設置圖像間距4、設置圖像邊框5、用文字替代圖像6、圖像編輯器教學過程四、創(chuàng)立圖像映射1、映射圖映射圖指的是將一種圖像劃分為若干區(qū)域，并將每個區(qū)域鏈接到不一樣的網(wǎng)頁、URL或其他的資源中，這樣的一種圖像叫做映射圖。2、圖像映射面板

有關圖像映射的操作大多數(shù)都是在圖像映射面板中進行的。假如要打開圖像映射面板，在圖像屬性面板上單擊圖像映射工具上的3個按鈕、和之一，并在圖像上畫出對應的形狀，將彈出圖像映射面板3、定義熱點

當在網(wǎng)頁中插入了圖像之后，可以運用熱點工具為該圖像定義熱點，熱點的基本形狀有矩形、圓形和多邊形3種。運用不一樣的工具，可以定義不一樣的熱點形狀。4、編輯熱點定義熱點后，就可以編輯熱點。在DreamweaverMX中，熱點的編輯包括變化單個熱點的形狀、大小，以及多種熱點的對齊方式、熱點間高與寬的設置等操作。5、為熱點建立鏈接教學過程設定一種熱點的輪廓后，就可以著手建立該熱點的鏈接關系了。熱點可以鏈接到不一樣的對象上，如一種已經(jīng)設計好的網(wǎng)頁、一種圖像或一種動畫等。作業(yè)：1、圖像的插入

2、圖像映射圖

3、WEB相冊一、試驗目的：

1、通過本例規(guī)定掌握常見的圖像格式及圖像的插入措施。

2、可以修改圖像屬性，運用外部圖像處理軟件編輯圖像。

3、創(chuàng)立圖像映射，建立WEB相冊。二、試驗器材：多媒體計算機。

三、課時分派：2課時。

四、實習地點：校內(nèi)多媒體機房。

五、實習內(nèi)容：

基本知識：1、理解網(wǎng)頁圖像的格式及常見的圖像編輯軟件的使用

2、網(wǎng)頁中圖像插入及編輯練習

3、映射圖的創(chuàng)立及編輯

4、WEB相冊的創(chuàng)立及編輯實例設計：1、圖像的插入

2、圖像映射圖

3、WEB相冊教學內(nèi)容第六章《創(chuàng)立超級鏈接》校歷第七周課時6課型理論+實踐教學目的1、純熟掌握設置文本超級連接的措施；2、純熟掌握設置圖片超級連接的措施；3、純熟掌握設置圖片熱點超級連接的措施；教學措施任務驅(qū)動法作業(yè)布置多種鏈接的應用分析總結本章簡介鏈接的基本概念，其中包括URL地址、絕對途徑和相對途徑的概念及其區(qū)別。詳細論述了風種常見的超級鏈接的形式，通過活動掌握多種超級鏈接的創(chuàng)立措施，并且設置超級鏈接的目的窗口及文本提醒。教學過程一、超級鏈接

1、概念：超級鏈接簡稱鏈接，是指從一種網(wǎng)頁指向一種目的對象的連接關系，它包括兩個部分，即鏈接源和鏈接目的。2、超級鏈接的作用可以把一種網(wǎng)站的網(wǎng)頁或多種網(wǎng)站連接起來，點擊鏈接時從一種網(wǎng)頁跳轉到另一種網(wǎng)頁，或者跳轉到頁面指定的位置。也正是超鏈接的存在是人們變化了以往的次序閱讀習慣，使整個Internet上的信息連為一種整體。分類、絕對途徑：是一種完整的URL，包括協(xié)議、域名、途徑，如HTTP:///xi_bu/xin_xi/index.htm，常用于鏈接外服務器上的文獻。相對鏈接：只有途徑，沒有協(xié)議、域名，它又分為站點根目錄相對途徑和文檔相對途徑。a點根目錄相對途徑指從站點的根文獻夾到文檔的途徑如/xi_bu/xin_xi/index.htmb文檔相對途徑指和目前文檔所在的文獻夾相對的途徑，它使用較多。如../image/bg.jpg。錨點：指在網(wǎng)頁中對某個位置的標識，如#top，jxgc.htm#top，用于轉移到指定網(wǎng)頁的指點位置。二、多種鏈接的功能和實現(xiàn)措施。

1導航鏈接：實現(xiàn)站點內(nèi)文檔的鏈接。

實現(xiàn)措施：a、向文獻圖標鏈接文檔：將“屬性”檢查器的“鏈接”域右邊的“指向教學過程文圖標拖動到站點窗口的文檔中。b、性檢查器：選中添加鏈接的網(wǎng)頁元素，點擊屬性面板中的“瀏覽圖標。2、目的選擇_blank在新的未命名的瀏覽器窗口中加載鏈接文檔。

_parent在父框架頁或包括該鏈接的框架窗口中加載鏈接文檔。假如包括鏈接的框架不是嵌套的，則鏈接文檔將加載到整個瀏覽器窗口中。

_self將鏈接文檔加載到與鏈接相似的框架或窗口中，該目的是默認值，因此一般您不需要指定它。

_top將在整個瀏覽器窗口中加載鏈接文獻，同步移除所有框架。

一種網(wǎng)站中，第一級鏈接或者導航鏈接選擇_self，第二級鏈接和友誼鏈接選擇_blank。3錨點鏈接：鏈接到文檔中的指定位置。鏈接到文檔中的指定位置：在需要插入錨的地方，點一下光標，然后單擊常用面板上的命名錨記工具。在文檔中選用要創(chuàng)立鏈接的網(wǎng)頁元素，點擊屬性面板中的“指向文獻”圖標，并將它拖動到您需要鏈接的錨記處，也可在鏈接文本框中輸入錨點名字，如#top，也可鏈接到其他網(wǎng)頁的錨點上，如jxgc.htm#top。4空鏈接：是一種無指向的鏈接，一般用于為頁面上的對象或文本附加行為5．創(chuàng)立javascript腳本鏈接：

創(chuàng)立環(huán)節(jié)：教學過程在文檔窗口中選用文本，圖象或?qū)ο?，在“屬性”檢查器的“鏈接”欄中鍵入javascript:，其后緊接javascript代碼或函數(shù)調(diào)用。例如在鏈接欄中鍵入javascript:alert('哈哈你上當了')創(chuàng)立一種鏈接，點擊鏈接后就會出現(xiàn)一種警告框。作業(yè)：1、基本操作

2、多彩文字鏈接教學內(nèi)容第八章《插入多媒體元素》校歷第八周課時2課型理論+實踐教學目的1、掌握在網(wǎng)頁中插入Flash元素的基本措施；2、掌握Flash有關屬性的設置；教學措施任務驅(qū)動法作業(yè)布置在對應頁面插入多種Flash元素分析總結本章重要通過三個活動的展開，簡介了在網(wǎng)頁中插入Flash元素的措施，其中包括常見的Flash形式：Flash動畫；Flash按鈕；Flash文本等。簡介了在網(wǎng)頁中添加視頻和音效的措施，以及其他多媒體元素的插入，其中包括ActiveX控件、Plugin插件、JavaApplet等。教學過程新課內(nèi)容：在Dreamweaver中可以將如下媒體文獻插入到網(wǎng)頁：Flash和Shockwave影片、QuickTime、AVI、Javaapplet、ActiveX控件以及多種格式的音頻文獻。一、添加Flash動畫SWF格式的Flash文獻，SWF文獻是Flash(.fla)文獻的壓縮版本，此文獻可以在瀏覽器中播放并且可以在Dreamweaver中進行預覽，但不能在Flash中編輯此文獻。在“文檔”窗口的“設計”視圖中，將插入點放置在要插入影片的地方，然后在“插入”欄的“常用”類別中，選擇“媒體”，然后單擊“插入Flash”圖標?；蜻x擇“插入”>“媒體”>“Flash”。二、創(chuàng)立和插入Flash按鈕在“設計”視圖或“代碼”視圖中工作時，可以在文檔中創(chuàng)立和插入Flash按鈕。在“文檔”窗口中，將插入點放置在您要插入Flash按鈕的位置。打開“插入Flash對象”對話框，在“插入”欄的“常用”類別中，選擇“媒體”，然后單擊“Flash按鈕”圖標。若要修改Flash按鈕對象，在“文檔”窗口中，單擊Flash按鈕對象以選擇它?？梢允褂脤傩詸z查器修改按鈕的HTML屬性，例如寬度、高度和背景顏色。若要對內(nèi)容進行更改，雙擊Flash按鈕對象。在屬性檢查器中單擊“編輯”。三、創(chuàng)立和插入Flash文本創(chuàng)立和插入Flash文本與Flash按鈕類似。四、插入Shockwave影片Shockwave作為Web上用于交互式多媒體的Macromedia原則，是一種經(jīng)壓縮的格式。教學過程五、添加視頻在Dreamweaver中可以通過不一樣方式和使用不一樣格式將視頻添加到Web頁面。視頻可被下載給顧客，或者可以對視頻進行流式處理以便在下載它的同步播放它。六、嵌入聲音文獻嵌入音頻將聲音直接并入頁面中，但只有在訪問站點的訪問者具有所選聲音文獻的合適插件后，聲音才可以播放。七、插入ActiveX控件可以在頁面中插入ActiveX控件。ActiveX控件（此前稱作OLE控件）是可以充當瀏覽器插件的可反復使用的組件，有些像微型的應用程序。八、插入Javaapplet可以使用Dreamweaver將Javaapplet插入HTML文檔中。Java是一種編程語言，通過它可以開發(fā)可嵌入Web頁中的小型應用程序。<appletcode="Lake.class"width="100"height="230"><paramname="image"value="1.jpg"></applet>注:插件必須與所在網(wǎng)頁在同一目錄九、插入圖像查看器作為圖片之間互相互換措施：插入”>“媒體”>“圖像查看器”，“窗口”>“標簽選擇器”教學過程bgColor:設置圖像檢看器的背景顏色。

captionColor:設置圖片的標題顏色。

captionFont:設置圖片標題的字體。

captionSkize:設置圖片標題的字體大小。

frameColor:設置邊框的顏色。

frameShow:設置與否顯示邊框。

frameThickness:設置邊框的寬度。

imageCaption:設置圖片的標題。imageURLs:指定圖片的地址。

showControls:設置與否顯示控制臺。

slideAutoPlay:設置與否自動播放。

slideDelay:設置圖片播放的延遲時間。

slideLoop:設置圖片與否循環(huán)播放。

title:設置圖像檢看器的標題。

titleColor:設置圖像查看器的標題顏色。

titleFont:設置圖像查看器的標題的字體。

titleSize:設置圖像查看器的標題的字體大小。

transitionsType：設置圖片切換的模式。教學內(nèi)容第七章《建立框架網(wǎng)頁》校歷第八周課時4課型理論+實踐教學目的1、理解框架網(wǎng)頁的基本原理；2、掌握新建框架網(wǎng)頁的兩種措施；教學措施任務驅(qū)動法作業(yè)布置建立框架網(wǎng)頁分析總結本章重要通過四個活動的展開，讓我們理解框架的基本概念，掌握框架網(wǎng)頁的創(chuàng)立、調(diào)整、刪除等基本集操作，能辨別框架和框架集中的文獻，并能區(qū)別保留?？梢赃\用“屬性”面板設置框架屬性及有關的鏈接屬性。掌握創(chuàng)立無框架內(nèi)容及內(nèi)嵌式框架的基本措施。教學過程一、框架與框架集的概念框架：是瀏覽器窗口中的一種區(qū)域，它可以顯示與瀏覽器窗口的其他部分中所顯示內(nèi)容無關的HTML文檔?？蚣芗菏荋TML文獻，它定義一組框架的布局和屬性，包括框架的數(shù)目、框架的大小和位置以及在每個框架中初始顯示的頁面的URL?？蚣芗墨I自身不包括要在瀏覽器中顯示的HTML內(nèi)容，但noframes部分除外；框架集文獻只是向瀏覽器提供應怎樣顯示一組框架以及在這些框架中應顯示哪些文檔的有關信息。二、框架的用途最常見用途就是導航。一組框架一般包括一種具有導航條的框架和另一種要顯示重要內(nèi)容頁面的框架。三、框架和框架集工作流程要在瀏覽器中查看一組框架，請輸入框架集文獻的URL；瀏覽器隨即打開要顯示在這些框架中的對應文檔。一般將一種站點的框架集文獻命名為index.htm，以便當訪問者未指定文獻名時默認顯示該名稱。樣例闡明四、創(chuàng)立框架和框架集1、使用預定義的框架集通過預定義的框架集，您可以很輕易地選擇您要創(chuàng)立的框架集類型。創(chuàng)立預定義的框架集有兩種措施：插入欄（2）“新建文檔”對話框創(chuàng)立新的空框架集。2、設計框架集可以通過向窗口添加“拆分器”，在Dreamweaver中設計您自己的框架集。教學過程創(chuàng)立框架集操作：選擇“修改”>“框架集”，然后從子菜單項選擇擇拆分項框架拆分操作：要拆分插入點所在的框架，從“修改”>“框架集”子菜單項選擇擇拆分項。請在按住Alt鍵的同步拖動框架邊框。刪除框架操作：將邊框框架拖離頁面或拖到父框架的邊框上。調(diào)整框架大小操作：五、嵌套框架集在另一種框架集之內(nèi)的框架集稱作嵌套的框架集。六、框架和框架集的編輯1、選擇框架和框架集要更改框架或框架集的屬性，首先要選擇您要更改的框架或框架集。您既可以在“文檔”窗口中選擇框架或框架集，也可以通過“框架”面板進行選擇。2、在框架中打開文檔將插入點放置在框架中，選擇“文獻”>“在框架中打開”，選擇要在該框架中打開的文檔，該文檔隨即顯示在框架中。3、框架和框架集文獻瀏覽器中預覽框架集前，必須保留框架集文獻以及要在框架中顯示的所有文檔?？梢詥为毐Ａ裘總€框架集文獻和帶框架的文檔，也可以同步保留框架集文獻和框架中出現(xiàn)的所有文檔。4、控制具有鏈接的框架內(nèi)容九、Iframe的使用iframe也稱作嵌入式框架，嵌入式框架和框架網(wǎng)頁類似，它可以把一種網(wǎng)頁的框架和內(nèi)容嵌入在既有的網(wǎng)頁中。在DreamweaverMX開始，可以可視化操作iframe，不再需要第三方插件。1、插入iframe點擊“插入面板”的“標簽選擇器”教學過程在“標簽選擇器”對話框中，選擇iframe標簽，點擊“插入”按鈕。在“標簽編輯器-Iframe”對話框中，根據(jù)面板提醒操作。最基本的兩項是“源”和“名稱”。2、設置鏈接在某個iframe中打開選中鏈接，在屬性面板中的“目的”項，手工輸入目的iframe的“名稱”。3、iframe透明為了使iframe內(nèi)容和網(wǎng)頁背景相似，需要使iframe透明。在“標簽編輯器-Iframe”對話框中，選擇“瀏覽器特定的”項目卡，選中“容許透明”。教學內(nèi)容第八章《插入多媒體元素》校歷第九周課時4課型理論+實踐教學目的1、掌握在網(wǎng)頁中插入Flash元素的基本措施；2、掌握Flash有關屬性的設置；教學措施案例教學法作業(yè)布置在對應頁面插入多種多媒體元素分析總結本章重要通過三個活動的展開，簡介了在網(wǎng)頁中插入Flash元素的措施，其中包括常見的Flash形式：Flash動畫；Flash按鈕；Flash文本等。簡介了在網(wǎng)頁中添加視頻和音效的措施，以及其他多媒體元素的插入，其中包括ActiveX控件、Plugin插件、JavaApplet等。教學過程一、試驗目的掌握怎樣在Dreamweaver中插入Flash動畫、Flash按鈕、Flash文本、視頻、聲音以及插件。二、實習內(nèi)容：

基本知識：1、Flash動畫與Flash元素的插入練習

2、視頻與聲音的插入練習

3、外部插件的使用三、實例設計：插入Flash2、插入電影3、插入Flash圖像查看器與背景音樂四、環(huán)節(jié)【環(huán)節(jié)一】建立站點【環(huán)節(jié)二】插入對應的多媒體【環(huán)節(jié)三】修改對應的多媒體教學內(nèi)容第九章《建立表單》校歷第九周課時2課型理論+實踐教學目的1、理解表單交互的基本原理2、掌握建立表單布局及插入不一樣表單對解的基本措施；3、掌握設置有關屬性教學措施案例教學法作業(yè)布置創(chuàng)立注冊頁分析總結本章重要通過三個活動的展開，讓我們理解表單的創(chuàng)立措施其中包括表單布局的建立、表單元素的添加、表單元素的屬性以及表單元素樣式的設定。同步還簡介了驗證表單輸入成果、通過電子郵件接受表單成果及跳轉菜單的創(chuàng)立措施。此外簡介了新版本中增長的四種spry構件的添加及屬性設置措施。教學過程案例引入：1、留言簿

2、在線申請

3、搜索表單新課內(nèi)容：一、表單的概念及作用

表單（Form）是一種構造化的文獻，用于搜集和公布信息。它是網(wǎng)站管理員與訪問者進行交流的一種媒介，通過訪問者填寫表單中的選擇題、填空題和問答題，網(wǎng)站管理員可以搜集到來自世界各地的資料和意見。目前表單重要用來進行意見調(diào)查、在線查詢、網(wǎng)上購物、在線申請等。在表單中常常出現(xiàn)的字段有：單行文本框、多行滾動文本框、單項選擇框、復選框、下拉列表框和按鈕。二、HTML表單設計基礎表單在HTML頁面中起著重要作用，它是與顧客交互信息的重要手段。一種表單至少應當包括闡明性文字、顧客填寫的表格、提交和重填按鈕等內(nèi)容。顧客填寫了所需的資料之后，按下“提交資料”按鈕，這樣所填資料就會通專門的CGI接口傳到Web服務器上。網(wǎng)頁的設計者隨即就能在Web服務器上看到顧客填寫的資料，從而完畢了從顧客到作者之間的反饋和交流。對于免費個人網(wǎng)站，往往服務器不提供CGI功能，也可以電子郵件來接受顧客的反饋信息。表單中重要包括下列元素：

button——一般按鈕

radio——單項選擇按鈕

checkbox——復選框

select——下拉式菜單

text——單行文本框

textarea——多行文本框

submit——提交按鈕

reset——重填按鈕

教學過程用HTML設計表單常用的標識是：<form>、<input>、<Option>、<Select>、<textarea>和<isindex>等標識。1、<form>表單標識該標識的重要作用是設定表單的起止位置，并指定處理表單數(shù)據(jù)程序的url地址。2、<input>表單輸入標識此標識在表單中使用頻繁，大部分表單內(nèi)容需要用到此標識。3、<select>下拉菜單標識4、<textarea>多行文本輸入標識5、<option>選項標識三、表單網(wǎng)頁的制作措施一般制作表單網(wǎng)頁的措施有兩種，第一種是手工添加，第二種是運用表單向?qū)?，這里我們著重簡介第一種措施。新建網(wǎng)頁在網(wǎng)頁上輸入“留言簿”三個字后，單擊菜單：插入――表單，會自動彈出一種下拉菜單，列出所有可供選擇的字段課堂作業(yè)：1、通過“留言簿”的制作，掌握表單的制作措施，并自己動手做一遍。2、自己設計一種精美的表單。課后體會：仔細體會多種表單元素的使用措施及綜合運用。通過本章學習，可以愈加理解動態(tài)網(wǎng)頁的概念，理解表單是設計者與瀏覽者之間的橋梁，從而使網(wǎng)站更具有吸引力。教學內(nèi)容第十章《使用模板和庫》校歷第十周課時4課型理論+實踐教學目的1、理解表單交互的基本原理2、掌握建立表單布局及插入不一樣表單對解的基本措施；3、掌握設置有關屬性教學措施任務驅(qū)動法作業(yè)布置驗證表單分析總結一種成功的網(wǎng)站在網(wǎng)頁設計上必須體現(xiàn)其風格，以至于訪問者可以在茫茫網(wǎng)海中對其留下或深或淺的印象，要做到這一點，不是只靠一兩個設計非常優(yōu)秀的頁面就可以體現(xiàn)的，而是需要網(wǎng)站中所有的頁面都要來完畢的，也就是所有的頁面都必須體現(xiàn)同一風格。但當我們需要更改網(wǎng)站頁面中共有的內(nèi)容時，如鏈接、頁面布局等，就需要我們一頁頁的修改，這樣做費時費力。教學過程范例引入：1、模板實例。

2、庫實例。新課內(nèi)容：一、使用庫項目:庫是一種用來存儲想要在整個網(wǎng)站上常常反復使用或更新的頁面元素（如圖像、文本和其他對象）的措施。這些元素稱為庫項目。通過修改庫元素，可以實現(xiàn)整個網(wǎng)站各頁面上與庫元素有關內(nèi)容的一次性更新。庫元素寄存在庫文獻中，庫文獻存在站點根目錄的Library文獻夾內(nèi)。1、創(chuàng)立庫項目：1）選擇文檔的一部分，例如選擇一種圖片（也可選擇多項內(nèi)容）。

2）打開資源面板，點擊“庫”按鈕，打開庫類別。

3）點擊“新建庫項目”按鈕。

4）給庫項目命名。一種庫就創(chuàng)立好了。教學過程2、插入庫項目1）將插入點放在“文檔”窗口中。

2）選擇一種庫項目，單擊“插入”按鈕。

3）插入庫后的頁面如下圖。3、修改庫1）選中頁面中的庫項目。

2）在屬性面板中點擊“打開”按鈕。

3）修改庫項目，修改完畢之后保留。

4）在“更新庫項目”對話框中點擊“更新”按鈕。

5）選擇更新的范圍，更新完畢之后關閉。4、與庫分離1）選中頁面中的庫項目。

2）在屬性面板中點擊“從源文獻中分離”按鈕，則應用的庫項目變?yōu)榭梢愿牡?，并斷開與庫項目的鏈接。5、更新整個站點或所有使用特定庫項目的文檔：選擇“修改”→“庫”→“更新頁面”。6、更改目前文檔以使用所有庫項目的目前版本：選擇“修改”→“庫”→“更新目前頁”。教學內(nèi)容第十一章《CSS樣式表》校歷第十周課時2課型理論+實踐教學目的使用CSS（層疊式樣式表）可認為部分文獻甚至整個網(wǎng)站定義樣式。教學措施任務驅(qū)動法作業(yè)布置1、進行CSS基本樣式設置，單擊顯示

2、在網(wǎng)頁中制作兩種風格以上的按鈕，單擊顯示分析總結將樣式表與網(wǎng)頁有關聯(lián)，關聯(lián)的網(wǎng)頁將自動套用樣式表中的格式，使所有網(wǎng)頁中都可以應用相似的樣式，這樣既保證了站點風格的一致性，又提高了工作效率。教學過程一、CSS概念：CSS是CascadingStyleSheets（層疊樣式表單）的簡稱。它容許設計者在HTML文檔中加入樣式（如字體類型、顏色、大小等等）。二、CSS的創(chuàng)立與使用：

創(chuàng)立CSS樣式：1、顯示CSS樣式浮動面板：單擊［窗口］－－［CSS樣式］

2、單擊浮動面板右下角的加號

3、輸入樣式表名稱

4、選擇樣式類型：（有三種）一般我們選擇創(chuàng)立自定義樣式創(chuàng)立自定義樣式：建一種可以作為class屬性應用于文本區(qū)域或文本塊的樣式。

重定義HTML標簽：對指定的HTML標簽的默認格式進行重新定義。小心使用重定義標簽，這樣做你會變化許多頁面的布局。

使用CSS選擇器：對特定的標簽組合，或者包具有指定1d屬性的所有標簽進行格式定義。(在背面的內(nèi)容中我們再會作詳細舉例和分析)5、選擇應用區(qū)：（有二種）

僅對該文檔：則只能將此樣式應用于本文獻。

新建樣式表文獻：可將此樣式保留成一種文獻，可供其他文獻調(diào)用。

范例完畢與演示：1、首先定義一種嵌入式（僅對本文檔）的樣式——body中的文字定義為9pt。按下Shift+F11打開CSS面板(CSS面板面于DREAMWEAVERMX的右邊，和行為，HTML樣式均在設計窗口)——新建一種樣式表——選中重新定義HTML標簽(R)和僅對該文檔兩項——出現(xiàn)“CSS樣式定義”對話框——選擇分類為“類型”——設定文字為“宋體”、大小為9pt——確定教學過程闡明：上面的定義選擇了<body>標簽，也就是說<body>標簽內(nèi)的文字都將會是宋體，大小為9磅（pt），而<body>是網(wǎng)頁的主體，也就是說網(wǎng)頁內(nèi)的所有文字都如上定義。范例：CSS基本樣式設置。2、定義一外部連接式CSS樣式——去掉鏈接文字的下劃線，為鏈接文字設置不一樣狀態(tài)下的鏈接顏色。諸多網(wǎng)站做出來的鏈接都是無下劃線的（或者鼠標移到后下劃線不見了），而自己做出來的網(wǎng)頁總是有下劃線的。尚有默認鏈接文字的顏色是固定的，未鏈接時為藍色，鏈接后為紫紅色，千篇一律，在網(wǎng)頁中很是單調(diào)，其實這些都可以根據(jù)網(wǎng)站的風格、設計者的喜好進行不一樣的設置。再次“新建CSS樣式”——這次選中使用CSS選擇器和新建樣式表文獻兩項，標簽選擇選a:link——“保留樣式表文獻”為a.css（樣式表文獻的擴展名為.CSS）——在“CSS樣式定義”對話框中，字本裝飾那里選無，表達無下劃線，文字顏色為ff0000——確定即設定好了未鏈接文字無下劃線，且文字顏色為紅色。闡明：<a>是指有鏈接的文字

a:link：表達已經(jīng)鏈接；

a:hover：表達鼠標移上鏈接時；

a:active：表達鏈接激活時；

a:visited：表達己點擊過的鏈接。然后反復幾次上面環(huán)節(jié)，按你的喜歡分別定義好上面幾種標簽即可。作業(yè)：1、進行CSS基本樣式設置，單擊顯示

2、在網(wǎng)頁中制作兩種風格以上的按鈕，單擊顯示教學內(nèi)容第十二章《APDiv

應用》校歷第十一周課時4課型理論+實踐教學目的1、掌握在網(wǎng)頁中創(chuàng)立、修改層和嵌套層的措施

2、掌握層的屬性和編輯層屬性的措施

3、掌握移動、刪除層的措施

4、可以將層與行為進行簡樸結合教學措施任務驅(qū)動法作業(yè)布置制作菜單欄分析總結層是網(wǎng)站設計者應用最為廣泛的工具之一。通過層，網(wǎng)站設計者可以隨意在層中放入文字、圖片、插件或其他層，也可以移動層；這正是使用Dreamweaver的層的魅力所在。通過本章的學習，應掌握層的基本操作措施如層的創(chuàng)立措施、層的多種編輯、層的有關屬性設置及層與表格間的轉換方式等。教學過程一、創(chuàng)立層1、使用插入菜單創(chuàng)立層：插入菜單——層選項

2、嵌套層：就是在一種層內(nèi)創(chuàng)立新的層1）嵌套層的操作：

a、將插入點光標放入父層內(nèi)，然后使用插入菜單——層選項；

b、按住Ctrl鍵，并在層面板內(nèi)，將子層的名稱拖到父層的名稱上。

2）查看所有的層：“窗口”菜單-其他-層（快捷鍵F2）二、修改層1、選擇層1）激活層：用鼠標單擊層所屬的區(qū)域

2）選擇某一種層：

用鼠標單擊文檔的層標識，使層的邊框上出現(xiàn)黑色的小方塊；

-用鼠標單擊層的選擇手柄；

-用鼠標單擊層的邊框；

-用鼠標單擊層面板內(nèi)層的名稱。

-按住Shift鍵的同步，依次用鼠標單擊層所在的區(qū)域。

4）取消選擇：在文檔窗口內(nèi)單擊鼠標

5）刪除層：選定層后，按Delete鍵2、變化層的大小：鼠標拖曳或?qū)傩悦姘褰虒W過程3、變化層的位置：鼠標拖曳4、對齊層：選定多種層、“修改”菜單-對齊

要點：對齊層時，系統(tǒng)自動將最終選定的層作為對齊原則教學內(nèi)容第十二章《APDiv

應用》校歷第十一周課時2課型理論+實踐教學目的1、掌握在網(wǎng)頁中創(chuàng)立、修改層和嵌套層的措施

2、掌握層的屬性和編輯層屬性的措施

3、掌握移動、刪除層的措施

4、可以將層與行為進行簡樸結合教學措施任務驅(qū)動法作業(yè)布置制作固定層分析總結層是網(wǎng)站設計者應用最為廣泛的工具之一。通過層，網(wǎng)站設計者可以隨意在層中放入文字、圖片、插件或其他層，也可以移動層；這正是使用Dreamweaver的層的魅力所在。通過本章的學習，應掌握層的基本操作措施如層的創(chuàng)立措施、層的多種編輯、層的有關屬性設置及層與表格間的轉換方式等。教學過程三、圖層的命名命名圖層可以執(zhí)行如下操作之一：（1）選擇圖層，在其屬性面板的“層編號”文本框中輸入圖層名稱。（2）選擇“窗口”|“其他”|“層”命令，打開圖層面板。雙擊要命名圖層的“名稱”欄，使之處在可編輯狀態(tài)，輸入圖層名稱。四、變化圖層的疊放次序1．運用圖層面板來調(diào)整圖層的疊放次序打開圖層面板。把光標放置到要變化位置的層的名稱上，拖動到合適位置釋放鼠標。2．運用層屬性面板來調(diào)整圖層的疊放次序在層屬性面板中直接修改層的“Z軸”值，可以變化層的疊放次序?？梢栽谖谋究蛑休斎霐?shù)值，當輸入的數(shù)值比目前值大時，表達圖層的疊放次序提高；當輸入的數(shù)值比目前值小時，表達圖層的疊放次序減少。五、設置圖層參數(shù)和圖層屬性1、設置圖層參數(shù)

1）使用圖層參數(shù)可認為新創(chuàng)立的層定義默認設置

2）操作：“編輯”菜單-參數(shù)選擇2、設置圖層屬性：屬性面板教學過程層與表格1、將層轉換為表格：“修改”菜單-轉換-層到表格2、將表格轉換為層：“修改”菜單-轉換-表格到層注意：1．隱藏的圖層不能轉換為表格。2．重疊的層不容許轉換為表格，由于表格的單元格是不能重疊的。3．在模板文檔或已應用模板的文檔中，不能將層轉換為表格或?qū)⒈砀褶D換為層。即應當在非模板文檔中創(chuàng)立布局，然后再將該文檔另存為模板之前進行轉換。教學內(nèi)容第十二章《APDiv

應用》校歷第十二周課時6課型理論+實踐教學目的1、掌握在網(wǎng)頁中創(chuàng)立、修改層和嵌套層的措施

2、掌握層的屬性和編輯層屬性的措施

3、掌握移動、刪除層的措施

4、可以將層與行為進行簡樸結合教學措施案例教學法作業(yè)布置會跑動的面板動態(tài)菜單的制作4、時間軸的制作（1）設計一種復雜的timeline（2）加入控制按鈕和動作（3）動畫過程中設置圖層可見性分析總結層是網(wǎng)站設計者應用最為廣泛的工具之一。通過層，網(wǎng)站設計者可以隨意在層中放入文字、圖片、插件或其他層，也可以移動層；這正是使用Dreamweaver的層的魅力所在。通過本章的學習，應掌握層的基本操作措施如層的創(chuàng)立措施、層的多種編輯、層的有關屬性設置及層與表格間的轉換方式等。教學過程一、實訓目的與規(guī)定：目的：通過上機實訓讓學生學會使用層定位網(wǎng)頁中元素和實現(xiàn)某些簡樸特效。規(guī)定：運用層面使網(wǎng)頁中的文檔內(nèi)容出現(xiàn)重疊效果，實現(xiàn)層面內(nèi)容的動態(tài)交替顯示。二、實訓內(nèi)容：運用層制作下拉菜單式的網(wǎng)頁菜單注：(1)、父層應加空鏈接，光標應定位在<ahref>之間，再添加行為(2)、屬性欄左右應設為空運用層做出交替顯示的特效。運用層做出拼圖注：(1)通過單擊“文檔”窗口底部標簽選擇器中的<body>選擇body標簽。（2）打開“行為”面板，從“動作”中選擇“拖動層”。在“左”和“上”文本框中為拖放目的輸入值（以像素為單位）。拖放目的是一種點，您想要訪問者將層拖動到該點上。當層的左坐標和上坐標與在“左”和“上”文本框中輸入的值匹配時便認為層已經(jīng)抵達拖放目的。這些值是與瀏覽器窗口的左上角相對的。在“靠齊距離”文本框中輸入一種值（像素）確定訪問者必須放目的多近，才能將層靠齊到目的。較大的值可以使訪問者較輕易找到拖放目的。注意行為面板中的動作為onload。保留頁面，f12預覽。三、層的制作與設計會跑動的面板動態(tài)菜單的制作教學過程4、時間軸的制作（1）設計一種復雜的timeline（2）加入控制按鈕和動作（3）動畫過程中設置圖層可見性5、實訓成果：

制作出課堂上演示的例子；6、實訓中也許產(chǎn)生的問題預測及處理：本次實訓波及的內(nèi)容比較多，也許出現(xiàn)的問題的面也也許要廣泛得多。最也許會出現(xiàn)如下問題：問題：學生在插入圖像后來會想直接通過拖動鼠標移動圖像的位置；這是不可實現(xiàn)的；處理：再次給出現(xiàn)此錯誤的學生強調(diào)圖像也是網(wǎng)頁的一種一般元素，而網(wǎng)頁中的一般元素不能在網(wǎng)頁中隨便移動的。想進行頁頁排版安排網(wǎng)頁元素的位置，只有通過排版工具，如表格和層進行定位。問題：學生也許會想使用圖片和時間軸結合做圖片移動的動畫。這了是不可實現(xiàn)的；處理：給出現(xiàn)此錯誤的學生強調(diào)能和時間軸結合做位置移動動畫的只有層。圖像和時間軸給合只能做互換圖片的動畫，而不能做位置移動的動畫。假如想做圖像移動的動畫。必須先要把圖像放到層里面，然后通過層和時間軸結合做出圖像位置移動的動畫。此類問題即可處理；教學內(nèi)容第十三章《行為》校歷第十三周課時4課型理論+實踐教學目的1、理解行為、事件與動作的概念

2、學會運用行為面板設置控制對象的行為

3、會運用系統(tǒng)提供的重要行為，設置網(wǎng)頁對象的行為從而實現(xiàn)交互式網(wǎng)頁的設計

4、可以下載、安裝并使用第三方行為教學措施案例教學法作業(yè)布置1、使用“變化屬性”行為設計變色按鈕效果，單擊顯示效果圖。

2、使用“拖動層”行為設計拼圖，單擊顯示效果圖。

3、使用第三方行為設計滑動菜單，單擊顯示效果圖分析總結網(wǎng)頁中諸多動態(tài)效果可以通過行為來實現(xiàn)。Dreamweaver附帶了諸多內(nèi)置的行為，雖然是那些不懂Java的入門也能輕松地制作動態(tài)網(wǎng)頁。行為是一種對象上加為某一事件而觸發(fā)某一動作的綜合描述。它是被用來動態(tài)響應顧客操作、變化目前頁面交效果或是執(zhí)行特定任務的一種措施教學過程新課內(nèi)容：一、 認識行為和事件：1、行為：指在網(wǎng)頁中進行的一系列動作，通過這些動作可實現(xiàn)顧客同網(wǎng)頁的交互，也可以通過動作使某個任務被執(zhí)行。行為由事件和動作兩個基本元素構成。一般，動作是一段JavaScript代碼，Dreamweaver內(nèi)置了多種行為.2、事件：事件則由瀏覽器所定義，它可附加到多種頁面元素上，也可被附加HTML標識中。同一種事件可以引起幾種不一樣的動作（注意執(zhí)行次序）。

選擇的對象不一樣，可執(zhí)行的事件也不一樣。

常見事件：OnchangeOnClickOnDblClickOnloadOnMouseDownOnMouseUp二、基本行為操作：1、認識行為面板：事件列表行為列表瀏覽器及版本不一樣，事件列表的內(nèi)容也有所不一樣。添加與編輯行為：選定網(wǎng)頁元素、“窗口”菜單－行為面板（Shift+F3）添加行為效果：為對象、文本、時間線附加行為。選擇對象-打開行為面板-單擊加號按鈕-選擇合適的行為2）編輯行為效果：編輯動作、引起動作的事件、更改參數(shù)。3）為同一種事件添加多種動作：教學過程三、使用DreamWeaver的內(nèi)置行為：1、調(diào)用JavaScript：某些事件發(fā)生時，容許顧客調(diào)用對應的JavaScript代碼。2、變化屬性：動態(tài)變化對象的屬性值。如層的屬性值，圖像大小或懸停按鈕效果。范例演示：變化屬性3、檢測瀏覽器：可獲取顧客瀏覽網(wǎng)頁所使用的瀏覽器類型而后根據(jù)不一樣的瀏覽器顯示不一樣的網(wǎng)頁。

一般常將這種行為附加到文檔上—<body>標識上，打開文檔自動跳轉。

另一種使用措施是將此行為附加到一種空鏈接上。4、檢測插件：檢測瀏覽者與否安裝了瀏覽網(wǎng)頁所需的插件。從而決定鏈接指向的網(wǎng)頁。

如：FlashShockwave等。5、控制Shockwave或Flash：可在文檔中添加按鈕類的對象，實現(xiàn)對動畫的控制。

如：設置動畫的播放、停止、返回或轉到對應幀。6、拖動圖層：實現(xiàn)頁面上的層的移動，如拼圖等動態(tài)效果。

拖動圖層的動作必須在拖動圖層之前被調(diào)用—OnLoad（body對象）教學過程7、跳轉地址：可在目前窗口或指定框架中打開一種新的網(wǎng)頁。

單擊一次可變化兩個或兩個以上框架內(nèi)容，也可附著于時間線上便于在一段時間后執(zhí)行。

要點：注意框架的命名8、打開瀏覽器窗口：在一種新的瀏覽器窗口中載入一種鏈接目的文獻。9、彈出消息：彈出一種消息框，框內(nèi)的內(nèi)容可為文本或夾雜JavaScript腳本。范例演示：彈出瀏覽器窗口與彈出消息10、播放聲音：網(wǎng)頁中播放聲音文獻。11、預加載圖像：12、使用跳轉菜單：13、使用關聯(lián)跳轉菜單：編輯開始按鈕（GO）14、設置導航條圖像：范例演示：導航條與跳轉菜單教學過程15、設置文本：框架文本、層文本、狀態(tài)欄文本、文本域文本。不變化原網(wǎng)頁中的內(nèi)容16、互換圖像、恢復互換圖像——翻轉圖像范例演示：互換圖像與設置文本17、時間線動作：轉屆時間線幀、播放、停止時間線。18、驗證表單：提交表單時，本動作可用于檢查數(shù)據(jù)的有效性。范例演示：檢查表單19、顯示——隱藏層：可在頁面上顯示層、隱藏層或恢復默認的層可見性狀態(tài)。范例演示：見層范例四、下載并安裝第三方行為：在Dreamweaver站點或其他的第三方開發(fā)站點上找到更多的行為動作。1、下載行為文獻－解壓－移到文獻夾（Dreamweaver\Configuration\Behaviors\Actions）

重啟Dreamweaver即可。教學過程范例演示：第三方行為——滑動菜單與層居中2、直接下載插件文獻安裝。課堂作業(yè)：1、使用“變化屬性”行為設計變色按鈕效果，單擊顯示效果圖。

2、使用“拖動層”行為設計拼圖，單擊顯示效果圖。

3、使用第三方行為設計滑動菜單，單擊顯示效果圖課后體會：本課實例較多，制作簡樸，界面美觀，輕易引起學生的愛好。但由于內(nèi)置行為較多，輕易導致重點不突出，因此在講課時可以有祥有略，很好地完畢教學任務。同步重點突出了行為在詳細網(wǎng)頁中的應用，做到發(fā)部分與全面的統(tǒng)一結合。教學內(nèi)容第十四章《編輯源代碼》校歷第十三周課時2課型理論+實踐教學目的掌握設置迅速編輯源代碼的措施，其中包括插入HTML、編輯標簽和圍繞標簽教學措施案例教學法作業(yè)布置運用迅速編輯源代碼的措施，完畢首頁制作分析總結Dreamweaver提供的編輯環(huán)境是“所見即所得”的可視化編輯環(huán)境，顧客在制作網(wǎng)頁時不需要編寫代碼。不過，假如顧客需要創(chuàng)立某些特殊的網(wǎng)頁效果，插入腳本以及碰到了纛在可視化環(huán)境中無法處理的問題，則需要手動編寫HTML代碼。教學過程一、迅速標簽編輯器概述①“插入HTML”：插入新的HTML代碼。②“編輯標簽”：編輯已經(jīng)有標簽。③“圍繞標簽”：用一種新標簽包圍目前選定元素。二、插入HTML三、編輯標簽四、圍繞標簽五、導入Word文檔執(zhí)行“文獻”|“導入”|“Word文檔”命令，在彈出的“打開”對話框中選用.doc的文檔即可。六、導入Excel文檔執(zhí)行“文獻”|“導入”|“Excel文檔”命令，在彈出的“打開”對話框中選用.doc的文檔即可。教學過程七、設置源代碼參數(shù)（1）概述:Dreamweaver提供的編輯環(huán)境是“所見即所得”的可視化編輯環(huán)境，顧客在制作網(wǎng)頁時不需要編寫代碼。不過，假如顧客需要創(chuàng)立某些特殊的網(wǎng)頁效果，插入腳本以及碰到了某些在可視化環(huán)境中無法處理的問題，則需要手動編寫HTML代碼。在編寫代碼之前設置源代碼的有關參數(shù)，可認為詳細編寫工作提供便利。執(zhí)行“編輯”|“首選參數(shù)”命令，在彈出的“首選參數(shù)”對話框中即可設置源代碼的有關參數(shù)（2）代碼改寫:在彈出的“首選參數(shù)”對話框的分類選項中選用“代碼改寫”，即可設置有關的屬性?！按a改寫”：控制修改的內(nèi)容。假如有需要修改的內(nèi)容，則Dreamweaver將在打開HTML文檔時修改其HTML源代碼。（3）代碼格式選項設置:在彈出的“首選參數(shù)”對話框的分類選項中選用“代碼格式”，即可設置有關的屬性，“代碼格式”：控制常見HTML格式選項。在該選項的面板中可以設置代碼縮進、換行、大小寫等顯示的格式。（4）代碼提醒選項設置:在彈出的“首選參數(shù)”對話框的分類選項中選用“代碼提醒”，即可設置有關的屬性?！按a提醒”：設置