《網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式）》 教案 項(xiàng)目1網(wǎng)頁(yè)設(shè)計(jì)與制作

《網(wǎng)頁(yè)設(shè)計(jì)與制作》教學(xué)設(shè)計(jì)課程名稱：網(wǎng)頁(yè)設(shè)計(jì)與制作授課年級(jí)：20年級(jí)授課學(xué)期：20學(xué)年第一學(xué)期教師姓名：老師

20年月日課題名稱項(xiàng)目一網(wǎng)頁(yè)基礎(chǔ)計(jì)劃課時(shí)課時(shí)內(nèi)容分析網(wǎng)頁(yè)設(shè)計(jì)中每個(gè)細(xì)節(jié)都是重要的，如同一個(gè)顏色的色值要相同、元素要進(jìn)行規(guī)則處理、圓角按鈕的大小要一樣等。細(xì)節(jié)上處理得恰當(dāng)，當(dāng)設(shè)計(jì)的產(chǎn)品受到質(zhì)疑時(shí)，可以詳盡地說(shuō)明細(xì)節(jié)設(shè)計(jì)的原因，使人信服。完美的網(wǎng)頁(yè)設(shè)計(jì)需要巨大努力和付出，培養(yǎng)細(xì)心耐心的品質(zhì)至關(guān)重要。教學(xué)目標(biāo)了解網(wǎng)頁(yè)基礎(chǔ)知識(shí)。熟悉網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言。掌握網(wǎng)頁(yè)制作工具的使用方法。重點(diǎn)及措施教學(xué)重點(diǎn)：能夠安裝網(wǎng)頁(yè)制作工具；能夠使用網(wǎng)頁(yè)制作工具設(shè)計(jì)簡(jiǎn)單頁(yè)面措施：通過(guò)上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。難點(diǎn)及措施教學(xué)難點(diǎn)：網(wǎng)頁(yè)基礎(chǔ)知識(shí)，網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言措施：通過(guò)上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。教學(xué)方式教學(xué)采用教師課堂講授為主，使用教學(xué)PPT講解。教學(xué)過(guò)程任務(wù)1.1信息與信息技術(shù)1.1.1認(rèn)識(shí)網(wǎng)頁(yè)與網(wǎng)站內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：什么是網(wǎng)頁(yè)和網(wǎng)站？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋：答案：網(wǎng)頁(yè)是Internet中基本的信息單位，是由超文本標(biāo)記語(yǔ)言（HyperTextMarkupLanguage，HTML）或者其他語(yǔ)言編寫的。網(wǎng)站是一個(gè)或多個(gè)網(wǎng)頁(yè)的集合。網(wǎng)站是指通過(guò)瀏覽器在Internet上訪問(wèn)的頁(yè)面。網(wǎng)站可以用于發(fā)布自己想要公開(kāi)的信息，也可以用于提供相關(guān)的網(wǎng)絡(luò)服務(wù)，同樣可以獲取自己需要的信息或者享受網(wǎng)絡(luò)服務(wù)。網(wǎng)站設(shè)計(jì)者先將整個(gè)網(wǎng)站結(jié)構(gòu)規(guī)劃好，然后分別制作各個(gè)網(wǎng)頁(yè)，大多數(shù)網(wǎng)站都會(huì)為瀏覽者提供一個(gè)主頁(yè)，最后將其他網(wǎng)頁(yè)與主頁(yè)鏈接起來(lái)。知識(shí)點(diǎn)講解講解網(wǎng)頁(yè)的概念：教師展示PPT，對(duì)網(wǎng)頁(yè)的概念進(jìn)行具體講解。網(wǎng)頁(yè)是Internet中基本的信息單位，是由超文本標(biāo)記語(yǔ)言（HyperTextMarkupLanguage，HTML）或者其他語(yǔ)言編寫的。中國(guó)知網(wǎng)：/學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。講解網(wǎng)站概念：教師展示PPT，講解網(wǎng)站概念。網(wǎng)站是一個(gè)或多個(gè)網(wǎng)頁(yè)的集合。網(wǎng)站是指通過(guò)瀏覽器在Internet上訪問(wèn)的頁(yè)面。網(wǎng)站可以用于發(fā)布自己想要公開(kāi)的信息，也可以用于提供相關(guān)的網(wǎng)絡(luò)服務(wù)，同樣可以獲取自己需要的信息或者享受網(wǎng)絡(luò)服務(wù)。網(wǎng)站設(shè)計(jì)者先將整個(gè)網(wǎng)站結(jié)構(gòu)規(guī)劃好，然后分別制作各個(gè)網(wǎng)頁(yè)，大多數(shù)網(wǎng)站都會(huì)為瀏覽者提供一個(gè)主頁(yè)，最后將其他網(wǎng)頁(yè)與主頁(yè)鏈接起來(lái)。中國(guó)大學(xué)MOOC：/生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。講解網(wǎng)頁(yè)的特點(diǎn)教師展示PPT，講解網(wǎng)頁(yè)的特點(diǎn)。學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。講解網(wǎng)站分類：教師展示PPT，講解網(wǎng)站分類。網(wǎng)站有很多不同的分類方法，例如，按照其使用的技術(shù)可分為靜態(tài)網(wǎng)站和動(dòng)態(tài)網(wǎng)站；按照網(wǎng)站的性質(zhì)可以分為企業(yè)網(wǎng)站、政府網(wǎng)站、教育網(wǎng)站和個(gè)人網(wǎng)站；按照網(wǎng)站的作用可以分為搜索引擎網(wǎng)站、社區(qū)論壇網(wǎng)站、在線翻譯網(wǎng)站、軟件下載網(wǎng)站和音樂(lè)欣賞網(wǎng)站等。直觀的網(wǎng)站分類方法是按網(wǎng)站的主題進(jìn)行分類。主題是網(wǎng)站的題材，它決定網(wǎng)站的內(nèi)容，體現(xiàn)網(wǎng)站代表的形象。一般常見(jiàn)的題材有公司企業(yè)、休閑娛樂(lè)、教育培訓(xùn)、電腦網(wǎng)絡(luò)、文化藝術(shù)、交通旅游等，而每一個(gè)題材又可以繼續(xù)劃分。學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。講解網(wǎng)站的特征教師展示PPT，講解網(wǎng)站的特征。學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。1.1.2網(wǎng)頁(yè)的組成元素內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：網(wǎng)頁(yè)有哪些組成要素？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋：答案：網(wǎng)頁(yè)包含了許多元素，如文本、圖像、動(dòng)畫、音頻、視頻等，使得內(nèi)容豐富，引人入勝。知識(shí)點(diǎn)講解講解文本、圖像、動(dòng)畫、音頻、視頻、（1）教師展示PPT，講解網(wǎng)頁(yè)的特點(diǎn)。新華網(wǎng)：/index.htm1.文本文本是指網(wǎng)頁(yè)中敘述性的文字，是理想的網(wǎng)頁(yè)信息載體與交流工具，網(wǎng)頁(yè)中主要信息一般都以文本為主，與圖像相比，文本雖然不如圖像那樣容易被瀏覽者注意，但卻能簡(jiǎn)明扼要地表達(dá)出主題。2.圖像圖像是指網(wǎng)頁(yè)中插入的具有說(shuō)明性的圖片。圖像擁有豐富的色彩和表現(xiàn)形式，能夠表達(dá)更加豐富的內(nèi)容和含義，并且具有文本無(wú)法達(dá)到的視覺(jué)效果。添加適量的圖像可以使制作的網(wǎng)頁(yè)圖文并茂，展現(xiàn)出更好的活力和表現(xiàn)力。在網(wǎng)頁(yè)中可以使用GIF、JPEG、BMP、TIFF和PNG等格式的圖像文件，其中使用廣泛的是GIF和JPEG兩種格式。3.動(dòng)畫動(dòng)畫在網(wǎng)頁(yè)中的作用是有效地吸引瀏覽者更多的注意，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)可以在頁(yè)面中加入動(dòng)畫使頁(yè)面更加生動(dòng)。在網(wǎng)頁(yè)中使用的動(dòng)畫主要有GIF和Flash兩種方式。GIF動(dòng)畫主要用在對(duì)動(dòng)畫效果要求不高的網(wǎng)頁(yè)中，如在網(wǎng)頁(yè)中制作友情鏈接的網(wǎng)站Logo時(shí)，通常都使用GIF動(dòng)畫，且播放不需要插件。Flash動(dòng)畫適用于品質(zhì)優(yōu)良，大型的、復(fù)雜的網(wǎng)頁(yè)，在瀏覽器中播放Flash動(dòng)畫需要安裝Flash播放插件。4.音頻音頻是多媒體網(wǎng)頁(yè)重要的組成部分。在為網(wǎng)頁(yè)添加聲音效果時(shí)應(yīng)充分考慮其格式、文件大小、品質(zhì)和用途等因素。另外，不同的瀏覽器對(duì)聲音文件的處理方法有所不同，它們彼此之間有可能不兼容。網(wǎng)絡(luò)的音頻文件格式很多，常用的有MP3、MIDI、WAV等。5.視頻視頻能夠豐富網(wǎng)頁(yè)內(nèi)容，越來(lái)越多的視頻文件被應(yīng)用到網(wǎng)頁(yè)中，使得網(wǎng)頁(yè)效果更加精彩且富有動(dòng)感。常見(jiàn)的視頻文件格式有MP4和FLV。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。1.1.3靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：什么是靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋：答案：靜態(tài)網(wǎng)頁(yè)使用HTML語(yǔ)言，每個(gè)網(wǎng)頁(yè)都有一個(gè)固定的URL（UniformResourceLocators，統(tǒng)一資源定位符），以.htm、.html、.shtml等常見(jiàn)形式為后綴。靜態(tài)網(wǎng)頁(yè)中包含文本、圖像、動(dòng)畫、音頻、視頻等網(wǎng)頁(yè)元素。靜態(tài)網(wǎng)頁(yè)的交互性較差，在功能方面有較大的限制。動(dòng)態(tài)網(wǎng)頁(yè)是指與靜態(tài)網(wǎng)頁(yè)相對(duì)的一種網(wǎng)頁(yè)技術(shù)，以.aspx、.asp、.jsp、.php、.pert、.cgi等形式為后綴。動(dòng)態(tài)網(wǎng)頁(yè)的顯示內(nèi)容可以隨著時(shí)間、環(huán)境或者數(shù)據(jù)庫(kù)操作的結(jié)果而發(fā)生改變，也可以與后臺(tái)數(shù)據(jù)庫(kù)交互，實(shí)現(xiàn)用戶注冊(cè)、登錄、聊天、留言等功能。知識(shí)點(diǎn)講解講解靜態(tài)網(wǎng)頁(yè)（1）教師展示PPT，對(duì)靜態(tài)網(wǎng)頁(yè)進(jìn)行具體講解。靜態(tài)網(wǎng)頁(yè)使用HTML語(yǔ)言，每個(gè)網(wǎng)頁(yè)都有一個(gè)固定的URL（UniformResourceLocators，統(tǒng)一資源定位符），以.htm、.html、.shtml等常見(jiàn)形式為后綴。靜態(tài)網(wǎng)頁(yè)中包含文本、圖像、動(dòng)畫、音頻、視頻等網(wǎng)頁(yè)元素。靜態(tài)網(wǎng)頁(yè)的交互性較差，在功能方面有較大的限制。靜態(tài)網(wǎng)頁(yè)可以出現(xiàn)各種動(dòng)態(tài)的效果，如GIF格式的動(dòng)畫、Flash、滾動(dòng)字幕等，這些“動(dòng)態(tài)效果”只是視覺(jué)上的。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。講解靜態(tài)網(wǎng)頁(yè)（1）教師展示PPT，對(duì)靜態(tài)網(wǎng)頁(yè)進(jìn)行具體講解。動(dòng)態(tài)網(wǎng)頁(yè)是指與靜態(tài)網(wǎng)頁(yè)相對(duì)的一種網(wǎng)頁(yè)技術(shù)，以.aspx、.asp、.jsp、.php、.pert、.cgi等形式為后綴。動(dòng)態(tài)網(wǎng)頁(yè)的顯示內(nèi)容可以隨著時(shí)間、環(huán)境或者數(shù)據(jù)庫(kù)操作的結(jié)果而發(fā)生改變，也可以與后臺(tái)數(shù)據(jù)庫(kù)交互，實(shí)現(xiàn)用戶注冊(cè)、登錄、聊天、留言等功能。動(dòng)態(tài)網(wǎng)頁(yè)具有以下特征交互性自動(dòng)更新針對(duì)性（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。任務(wù)1.2網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：什么是HTML？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋：答案：HTML稱為超文本標(biāo)記語(yǔ)言。超文本指頁(yè)面內(nèi)可以包含圖片、鏈接、音樂(lè)、視頻等非文字的元素。標(biāo)記語(yǔ)言主要由標(biāo)簽屬性、標(biāo)簽以及元素構(gòu)成，網(wǎng)頁(yè)中包含的對(duì)象是由相應(yīng)HTML標(biāo)簽指示出來(lái)的。HTML不像其他語(yǔ)言一樣被編譯為指令，它只提供一些語(yǔ)法標(biāo)簽，后由瀏覽器編譯生成相應(yīng)的頁(yè)面。知識(shí)點(diǎn)講解講解HTML（1）教師展示PPT，對(duì)HTML具體講解。HTML稱為超文本標(biāo)記語(yǔ)言。超文本指頁(yè)面內(nèi)可以包含圖片、鏈接、音樂(lè)、視頻等非文字的元素。標(biāo)記語(yǔ)言主要由標(biāo)簽屬性、標(biāo)簽以及元素構(gòu)成，網(wǎng)頁(yè)中包含的對(duì)象是由相應(yīng)HTML標(biāo)簽指示出來(lái)的。HTML不像其他語(yǔ)言一樣被編譯為指令，它只提供一些語(yǔ)法標(biāo)簽，后由瀏覽器編譯生成相應(yīng)的頁(yè)面。HTML編輯環(huán)境HTML代碼既可以在記事本中編寫，也可以在其他任何文本編輯器中編寫，但在保存時(shí)要保存為.html或.htm格式。HTML寫成的網(wǎng)頁(yè)文件只有通過(guò)瀏覽器才能進(jìn)行解析。文檔結(jié)構(gòu)HTML文檔是由一系列的元素和標(biāo)簽組成的。元素名不區(qū)分大小寫。HTML用標(biāo)簽來(lái)規(guī)定元素的屬性和它在文件中的位置，標(biāo)簽用“<標(biāo)簽名字屬性>”來(lái)表示，標(biāo)簽以“<>”開(kāi)始，以“</>”結(jié)束。HTML文檔分為<head>（文檔頭）和<body>（文檔體）兩部分，在文檔頭中對(duì)文檔進(jìn)行了一些必要的定義，文檔體中是要顯示的各種文檔信息。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。講解實(shí)例1HTML文檔代碼<html></html>在文檔的外層，文檔中的所有文本和標(biāo)簽都包含其中，它表示該文檔是以HTML編寫的。<head></head>是HTML文檔的頭部標(biāo)簽，在瀏覽器窗口中，頭部信息是不被顯示在正文中的。在此標(biāo)簽中可以插入其他標(biāo)簽，用以說(shuō)明文件的標(biāo)題和整個(gè)文件的一些公共屬性。<title>和</title>是嵌套在<head>標(biāo)簽中的，標(biāo)簽之間的文本是文檔標(biāo)題，這些文本作為瀏覽器窗口的標(biāo)題欄內(nèi)容被顯示。<body></body>標(biāo)簽之間的文本是正文，正文中的內(nèi)容作為網(wǎng)頁(yè)內(nèi)容顯示在瀏覽器中。以上標(biāo)簽在文檔中都是唯一的，<head>標(biāo)簽和<body>標(biāo)簽是嵌套在<html>標(biāo)簽中的。任務(wù)1.3網(wǎng)頁(yè)制作工具1.3.1網(wǎng)頁(yè)設(shè)計(jì)工具內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：網(wǎng)頁(yè)設(shè)計(jì)工具有哪些？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋：答案：1.Dreamweaver。2.SublimeText3.EditPlus知識(shí)點(diǎn)講解講解網(wǎng)頁(yè)設(shè)計(jì)工具（1）教師展示PPT，對(duì)網(wǎng)頁(yè)設(shè)計(jì)工具進(jìn)行具體講解。1.DreamweaverAdobeDreamweaver（DW，夢(mèng)想編織者）是用于網(wǎng)頁(yè)設(shè)計(jì)與制作的開(kāi)發(fā)工具，它可以制作出跨平臺(tái)和瀏覽器的網(wǎng)頁(yè)。Dreamweaver是“所見(jiàn)即所得”的網(wǎng)頁(yè)編輯器，如果改變網(wǎng)頁(yè)位置或檔案名稱，Dreamweaver會(huì)自動(dòng)更新所有鏈接。在Dreamweaver中使用HTML代碼、HTML屬性標(biāo)簽和一般語(yǔ)法的搜尋及置換功能，可以提升網(wǎng)頁(yè)設(shè)計(jì)的效率。2.SublimeTextSublimeText是功能強(qiáng)大的代碼編輯器，能夠進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)。它的主要功能有拼寫檢查、書簽、完整的PythonAPI、Goto功能、即時(shí)項(xiàng)目切換、多選擇、多窗口等，具有體積小、運(yùn)行速度快、文本功能強(qiáng)大、支持編譯功能且可在控制臺(tái)看到輸出等優(yōu)勢(shì)。3.EditPlusEditPlus是功能強(qiáng)大、界面美觀的文本編輯器，它的主要功能有Hex查看器、HTML工具欄、用戶工具、行號(hào)、標(biāo)尺、URL高亮顯示、自動(dòng)完成、剪貼畫、列選擇、搜索和替換、拼寫檢查器、自定義鍵盤快捷方式等。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。1.3.2網(wǎng)頁(yè)美化工具內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：網(wǎng)頁(yè)美化工具有哪些？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋：答案：Photoshop，Mockplus，AdobeIllustrator知識(shí)點(diǎn)講解講解網(wǎng)頁(yè)美化工具（1）教師展示PPT，對(duì)網(wǎng)頁(yè)美化工具進(jìn)行具體講解。1.PhotoshopPhotoshop是一款優(yōu)秀而強(qiáng)大的圖形圖像處理軟件，可以對(duì)圖像進(jìn)行各種變換，如放大、縮小、旋轉(zhuǎn)、傾斜、鏡像、透視等，可以進(jìn)行復(fù)制、去除斑點(diǎn)、修補(bǔ)、修飾圖像的殘損等操作。此外，它具有的強(qiáng)大功能已經(jīng)完全涵蓋了網(wǎng)頁(yè)設(shè)計(jì)的需要。2.MockplusMockplus支持平臺(tái)有Windows和Mac平臺(tái)，它是一款高效簡(jiǎn)單的界面設(shè)計(jì)工具，是比較流行的一款國(guó)產(chǎn)界面原型設(shè)計(jì)工具。軟件提供了封裝好的3000多個(gè)圖標(biāo)以及200多個(gè)組件，學(xué)習(xí)成本低，無(wú)需代碼參與。它的主要特色是豐富的圖標(biāo)及組件、拖曳實(shí)現(xiàn)交互界面等。3.AdobeIllustratorAdobeIllustrator是應(yīng)用于出版、多媒體和在線圖像的工業(yè)標(biāo)準(zhǔn)矢量插畫的軟件。它是一款非常好的圖片處理工具，廣泛應(yīng)用于印刷出版、海報(bào)書籍排版、專業(yè)插畫、多媒體圖像處理和互聯(lián)網(wǎng)頁(yè)面的制作等，并可以提供較高的精度和控制。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。1.3.3Dreamweaver工作環(huán)境內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：Dreamweaver的特點(diǎn)？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋：答案：Dreamweaver在操作方法、界面風(fēng)格等方面突出人性化設(shè)計(jì)，能夠進(jìn)行多任務(wù)工作，使用者可以根據(jù)個(gè)人喜好和工作方式，重新排列面板和面板組，自定義工作區(qū)。。知識(shí)點(diǎn)講解講解Dreamweaver工作環(huán)境（1）教師展示PPT，對(duì)Dreamweaver工作環(huán)境具體講解。1.工作界面1）菜單欄Dreamweaver有10個(gè)菜單，包括“文件”“編輯”“查看”“插入”“修改”“格式”“命令”“站點(diǎn)”“窗口”“幫助”，單擊這些菜單可以打開(kāi)其子菜單。其他菜單打開(kāi)后也有類似效果。Dreamweaver的菜單功能極其豐富，能夠完成各種功能操作。2）插入欄插入欄位于菜單欄下方，包含用于創(chuàng)建和插入對(duì)象（如表格、圖像）的按鈕。當(dāng)鼠標(biāo)指針移動(dòng)到一個(gè)按鈕時(shí)，會(huì)出現(xiàn)一個(gè)工具提示，其中含有該按鈕的名稱。當(dāng)需要插入某一元素時(shí)，可根據(jù)選項(xiàng)卡的名稱來(lái)選擇。3）文檔工具欄文檔工具欄在插入欄下方，其中包含一些按鈕，可以實(shí)現(xiàn)在代碼視圖、設(shè)計(jì)視圖及拆分視圖間的切換。文檔工具欄還包含一些與查看文檔、在本地和遠(yuǎn)程站點(diǎn)間傳輸文檔有關(guān)的常用命令和選項(xiàng)。4）文檔窗口文檔窗口會(huì)顯示當(dāng)前打開(kāi)或編輯的文檔，可以選擇“代碼”“拆分”或“設(shè)計(jì)”視圖。窗口頂部選項(xiàng)卡顯示的是當(dāng)前編輯的文檔的文件名。當(dāng)有多個(gè)文檔被打開(kāi)時(shí)，可以通過(guò)選項(xiàng)卡在文檔間進(jìn)行切換。5）狀態(tài)欄狀態(tài)欄顯示當(dāng)前文檔的有關(guān)信息，如頁(yè)面大小、下載頁(yè)面的大小和速度等。6）屬性面板屬性面板位于文檔編輯區(qū)下方，顯示文檔窗口中被選中對(duì)象的屬性，可以通過(guò)修改面板中的數(shù)據(jù)，改變被選中對(duì)象的屬性。7）功能面板功能面板包括當(dāng)前打開(kāi)的各種功能面板，可以折疊或移動(dòng)。Dreamweaver的工作界面主要由“菜單欄”“插入欄”“文檔工具欄”“文檔窗口”“狀態(tài)欄”“屬性面板”和“功能面板”組成，2.調(diào)整界面在網(wǎng)頁(yè)制作過(guò)程中，往往需要變換工作界面的布局，使用者可以通過(guò)移動(dòng)面板或面板組來(lái)創(chuàng)建新的工作界面。單擊標(biāo)題欄上的“設(shè)計(jì)器”按鈕，可以選擇任意一種預(yù)設(shè)的工作界面。1）顯示/隱藏面板使用F4鍵，可以顯示或隱藏包括屬性面板在內(nèi)的所有面板。利用“窗口”菜單可以打開(kāi)所有面板。2）移動(dòng)面板拖動(dòng)面板標(biāo)簽或是拖動(dòng)面板組的標(biāo)題欄，可以移動(dòng)面板或面板組。移動(dòng)時(shí)，看到藍(lán)色顯示的區(qū)域，表示可以在該區(qū)域內(nèi)移動(dòng)和放置。如果拖動(dòng)到的區(qū)域不是放置區(qū)域，則被移動(dòng)的面板或面板組將在窗口中浮動(dòng)。3）關(guān)閉面板單擊面板或面板組的按鈕，在打開(kāi)的菜單中選擇“關(guān)閉”或“關(guān)閉標(biāo)簽組”命令。3.選擇視圖模式Dreamweaver的視圖模式默認(rèn)為“設(shè)計(jì)”視圖，可以通過(guò)視圖按鈕進(jìn)行切換。（1）代碼視圖代碼視圖是用于編輯HTML、JavaScript等代碼的手工編碼環(huán)境。對(duì)于代碼使用熟練的操作者，可以直接在此視圖中輸入代碼，實(shí)現(xiàn)網(wǎng)頁(yè)的編輯制作。（2）拆分視圖拆分視圖文檔窗口分為左右部分，分別顯示“設(shè)計(jì)”和“代碼”兩個(gè)視圖，可對(duì)比查看。（3）設(shè)計(jì)視圖設(shè)計(jì)視圖用于可視化頁(yè)面布局、內(nèi)容編輯和應(yīng)用程序開(kāi)發(fā)的編輯環(huán)境。視圖中顯示的文檔形式與瀏覽器中查看的頁(yè)面內(nèi)容基本一致，可以在編輯時(shí)顯示動(dòng)態(tài)內(nèi)容。（2）學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。1.3.4Dreamweaver基本操作內(nèi)容學(xué)習(xí)知識(shí)點(diǎn)講解講解實(shí)例2新建和保存空白頁(yè)步驟1：打開(kāi)軟件步驟2：新建文檔步驟3：保存網(wǎng)頁(yè)講解實(shí)例3設(shè)置默認(rèn)瀏覽器及瀏覽網(wǎng)頁(yè)步驟1：設(shè)置默認(rèn)瀏覽器步驟2：打開(kāi)網(wǎng)頁(yè)步驟3保存并預(yù)覽網(wǎng)頁(yè)項(xiàng)目小結(jié)本項(xiàng)目主要介紹了網(wǎng)頁(yè)的基礎(chǔ)知識(shí),具體內(nèi)容如下。網(wǎng)頁(yè)基礎(chǔ)知識(shí):介紹了網(wǎng)頁(yè)與網(wǎng)站的概念、網(wǎng)頁(yè)的組成元素、靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)。網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言:介紹了HTML基礎(chǔ)知識(shí),并通過(guò)實(shí)例講解HTML的文檔結(jié)構(gòu)。網(wǎng)頁(yè)制作工具