網(wǎng)頁設計與制作教材(PPT 40頁)

1、任務一任務一 制作庫制作庫 任務二任務二 制作模板制作模板 實實 訓訓 制作制作“一翔學校一翔學?！本W(wǎng)頁模板網(wǎng)頁模板 任務三任務三 制作網(wǎng)頁制作網(wǎng)頁 在在Dreamweaver 8中，可以使用庫和中，可以使用庫和模板來統(tǒng)一網(wǎng)站風格，提高工作效率。本模板來統(tǒng)一網(wǎng)站風格，提高工作效率。本項目以制作職業(yè)學校主頁為例，介紹使用項目以制作職業(yè)學校主頁為例，介紹使用庫和模板制作網(wǎng)頁的基本方法。在項目中，庫和模板制作網(wǎng)頁的基本方法。在項目中，首先制作庫項目頁眉和頁腳，然后制作模首先制作庫項目頁眉和頁腳，然后制作模板，最后根據(jù)模板制作主頁。板，最后根據(jù)模板制作主頁。 （一）創(chuàng)建庫項目（一）創(chuàng)建庫項目 （二）編

2、排庫項目（二）編排庫項目 需要掌握的內容主要有：需要掌握的內容主要有： 1、庫概念的理解、庫概念的理解 2、【資源】面板、【資源】面板 3、創(chuàng)建庫項目、創(chuàng)建庫項目 4、刪除庫項目、刪除庫項目 如果在一個站點的眾多網(wǎng)頁中，有些內容是完全相如果在一個站點的眾多網(wǎng)頁中，有些內容是完全相同的，就沒有必要在每一頁重復制作這些內容。在同的，就沒有必要在每一頁重復制作這些內容。在Dreamweaver中，可以將眾多網(wǎng)頁相同的某一部分內容中，可以將眾多網(wǎng)頁相同的某一部分內容做成庫項目，然后將庫項目插入到網(wǎng)頁中。當需要修改做成庫項目，然后將庫項目插入到網(wǎng)頁中。當需要修改時，只需修改庫項目，使用庫項目的網(wǎng)頁就會自

3、動進行時，只需修改庫項目，使用庫項目的網(wǎng)頁就會自動進行更新，這樣即省時又省力。更新，這樣即省時又省力。 在在Dreamweaver中，創(chuàng)建的庫項目的文件擴展名為中，創(chuàng)建的庫項目的文件擴展名為“.lbi”，保存在，保存在“Library”文件夾內，文件夾內，“Library”文件夾是自動生成的，不能對其名稱進行修改。文件夾是自動生成的，不能對其名稱進行修改。 在主菜單中選擇【窗口】【資源】命令，打開【資在主菜單中選擇【窗口】【資源】命令，打開【資源】面板。源】面板。 【資源】面板將網(wǎng)頁的元素分為【資源】面板將網(wǎng)頁的元素分為9類，面板的左邊垂直類，面板的左邊垂直并排著（圖像）、（顏色）、（并排著（

4、圖像）、（顏色）、（URLs）、（）、（Flash）、）、（Shockwave）、（影片）、（腳本）、（模板）和（庫）、（影片）、（腳本）、（模板）和（庫）9個按鈕，每一個按鈕代表一大類網(wǎng)頁元素。面板的右邊個按鈕，每一個按鈕代表一大類網(wǎng)頁元素。面板的右邊是列表區(qū)，分為上欄和下欄，上欄是元素的預覽圖，下欄是列表區(qū)，分為上欄和下欄，上欄是元素的預覽圖，下欄是明細列表。是明細列表。 在【庫】和【模板】分類的明細列表欄的下面依次排在【庫】和【模板】分類的明細列表欄的下面依次排列著（插入）或（應用）、（刷新站點列表）、（新建）、列著（插入）或（應用）、（刷新站點列表）、（新建）、（編輯）和（刪除）（編輯

5、）和（刪除）5個按鈕。個按鈕。 （1）創(chuàng)建空白庫項目。）創(chuàng)建空白庫項目。 在主菜單中選擇【窗口】【資源】命令，在主菜單中選擇【窗口】【資源】命令，打開【資源】面板。在【資源】面板中單擊打開【資源】面板。在【資源】面板中單擊 （庫）按鈕切換至【庫】分類，單擊面板右下角（庫）按鈕切換至【庫】分類，單擊面板右下角的的 （新建）按鈕新建一個庫，然后在列表框（新建）按鈕新建一個庫，然后在列表框中輸入庫的名稱并加以確認中輸入庫的名稱并加以確認 。 也可以在主菜單中選擇【文件】【新建】也可以在主菜單中選擇【文件】【新建】命令打開【新建文件】對話框，然后選擇【常規(guī)】命令打開【新建文件】對話框，然后選擇【常規(guī)】

6、【基本頁】【庫項目】命令來創(chuàng)建空白庫項【基本頁】【庫項目】命令來創(chuàng)建空白庫項目目。（2）從已有的網(wǎng)頁創(chuàng)建庫項目從已有的網(wǎng)頁創(chuàng)建庫項目 首先打開一個已有的文檔，從中選擇要保存首先打開一個已有的文檔，從中選擇要保存為庫項目的對象，如表格、圖像等，然后在主菜為庫項目的對象，如表格、圖像等，然后在主菜單中選擇【修改】【庫】【增加對象到庫】單中選擇【修改】【庫】【增加對象到庫】命令或在【資源】面板【庫】分類模式下，單擊命令或在【資源】面板【庫】分類模式下，單擊右下角的右下角的 （新建）按鈕，則該對象即被添加（新建）按鈕，則該對象即被添加到庫項目列表中，庫項目名為系統(tǒng)默認的名稱，到庫項目列表中，庫項目名為

7、系統(tǒng)默認的名稱，修改名稱后按修改名稱后按Enter鍵確認即可。鍵確認即可。 如果要刪除庫項目，只要先選中該如果要刪除庫項目，只要先選中該項目，然后單擊【資源】面板右下角項目，然后單擊【資源】面板右下角的的 （刪除）按鈕或按（刪除）按鈕或按Delete鍵即可。鍵即可。 在【資源】面板中選中庫項目，再單擊【資源】面在【資源】面板中選中庫項目，再單擊【資源】面板右下角的板右下角的 （編輯）按鈕，或者雙擊庫項目名稱打開（編輯）按鈕，或者雙擊庫項目名稱打開庫項目進行添加內容。這和平常制作網(wǎng)頁是一樣的，不庫項目進行添加內容。這和平常制作網(wǎng)頁是一樣的，不再詳述。再詳述。 在庫項目中使用在庫項目中使用CSS樣

8、式時，盡量不要使用樣式時，盡量不要使用“標簽標簽”類型的類型的CSS樣式，因為樣式，因為HTML標簽類型的標簽類型的CSS樣式定義后，樣式定義后，所有引用該樣式表的文檔中只要有該所有引用該樣式表的文檔中只要有該HTML標簽，該樣標簽，該樣式就要自動起作用，容易引起混亂。式就要自動起作用，容易引起混亂。（一）創(chuàng)建模板（一）創(chuàng)建模板（二）插入庫項目（二）插入庫項目 （三）插入模板對象（三）插入模板對象 需要掌握的內容主要有：需要掌握的內容主要有： 1、模板概念的理解、模板概念的理解 2、創(chuàng)建模板文件、創(chuàng)建模板文件 3、刪除模板文件、刪除模板文件 通常在一個站點的眾多網(wǎng)頁中，有許多網(wǎng)頁的結通常在一個

9、站點的眾多網(wǎng)頁中，有許多網(wǎng)頁的結構是相同的，這時就沒有必要一頁一頁地重復制作這構是相同的，這時就沒有必要一頁一頁地重復制作這些網(wǎng)頁。在些網(wǎng)頁。在Dreamweaver中，可以將網(wǎng)頁結構相同的中，可以將網(wǎng)頁結構相同的網(wǎng)頁做成庫模板，然后通過模板創(chuàng)建網(wǎng)頁。當模板修網(wǎng)頁做成庫模板，然后通過模板創(chuàng)建網(wǎng)頁。當模板修改時，使用模板的網(wǎng)頁也會自動進行更新。如果說庫改時，使用模板的網(wǎng)頁也會自動進行更新。如果說庫項目解決的是網(wǎng)頁內容相同的問題，那么模板解決的項目解決的是網(wǎng)頁內容相同的問題，那么模板解決的恰恰是網(wǎng)頁結構相同的問題。恰恰是網(wǎng)頁結構相同的問題。 在在Dreamweaver中，創(chuàng)建的模板文件的文件擴展中

10、，創(chuàng)建的模板文件的文件擴展名為名為“.dwt”，保存在，保存在“Templates”文件夾內，文件夾內，“Templates”文件夾是自動生成的，不能對其名稱進文件夾是自動生成的，不能對其名稱進行修改。行修改。 創(chuàng)建模板也有兩種方法，即直接創(chuàng)建空白模板和將創(chuàng)建模板也有兩種方法，即直接創(chuàng)建空白模板和將現(xiàn)有網(wǎng)頁保存為模板?，F(xiàn)有網(wǎng)頁保存為模板。 （1）直接創(chuàng)建空白模板）直接創(chuàng)建空白模板 在【資源】面板中切換到【模板】分類，然后單擊在【資源】面板中切換到【模板】分類，然后單擊【資源】面板右下角的【資源】面板右下角的 （新建）按鈕來創(chuàng)建空白模板。（新建）按鈕來創(chuàng)建空白模板。 也可以在主菜單中選擇【文件】

11、【新建】命令打也可以在主菜單中選擇【文件】【新建】命令打開【新建文件】對話框，然后選擇【常規(guī)】【模板頁】開【新建文件】對話框，然后選擇【常規(guī)】【模板頁】【HTML模板】命令來創(chuàng)建空白模板。模板】命令來創(chuàng)建空白模板。 創(chuàng)建空白模板后，還需要打開模板文件，在其中添創(chuàng)建空白模板后，還需要打開模板文件，在其中添加網(wǎng)頁元素和模板對象。加網(wǎng)頁元素和模板對象。 （2）將現(xiàn)有網(wǎng)頁保存為模板）將現(xiàn)有網(wǎng)頁保存為模板 首先打開一個已有內容的網(wǎng)頁文檔，根據(jù)實際需要在首先打開一個已有內容的網(wǎng)頁文檔，根據(jù)實際需要在網(wǎng)頁中選擇網(wǎng)頁元素，并將其轉換為模板對象，然后在網(wǎng)頁中選擇網(wǎng)頁元素，并將其轉換為模板對象，然后在主菜單中選擇

12、【文件】【另存為模板】命令將網(wǎng)頁保主菜單中選擇【文件】【另存為模板】命令將網(wǎng)頁保存為模板。存為模板。 如果要刪除模板，只要先選中該模如果要刪除模板，只要先選中該模板，然后單擊【資源】面板右下角的板，然后單擊【資源】面板右下角的 按鈕或按按鈕或按Delete鍵即可。鍵即可。 需要掌握的內容主要有：需要掌握的內容主要有： 1、插入庫項目、插入庫項目 2、修改庫項目、修改庫項目 3、分離庫項目、分離庫項目 在【資源】面板中切換至庫分類，選中庫文件，單在【資源】面板中切換至庫分類，選中庫文件，單擊面板底部的【插入】按鈕或者單擊鼠標右鍵，在彈出擊面板底部的【插入】按鈕或者單擊鼠標右鍵，在彈出的快捷菜單中

13、選擇【插入】命令，將庫項目插入到文檔的快捷菜單中選擇【插入】命令，將庫項目插入到文檔中。中。 庫項目是可以在多個頁面中重復使用的頁面元素。在使用庫項庫項目是可以在多個頁面中重復使用的頁面元素。在使用庫項目時，目時，Dreamweaver不是向網(wǎng)頁中插入庫項目，而是向庫項目中插不是向網(wǎng)頁中插入庫項目，而是向庫項目中插入一個鏈接，【屬性】面板的入一個鏈接，【屬性】面板的“Src /Library/top.lbi”可以清楚地說可以清楚地說明這一點。明這一點。 在網(wǎng)頁中引用的庫項目無法直接進行修改，如果要修改庫項目，在網(wǎng)頁中引用的庫項目無法直接進行修改，如果要修改庫項目，需要直接打開庫項目進行修改。打

14、開庫項目的方式通常有兩種：一需要直接打開庫項目進行修改。打開庫項目的方式通常有兩種：一種是在【資源】面板中打開庫項目，另一種是在引用庫項目的網(wǎng)頁種是在【資源】面板中打開庫項目，另一種是在引用庫項目的網(wǎng)頁中選中庫項目，然后在【屬性】面板中單擊中選中庫項目，然后在【屬性】面板中單擊 按鈕，打開庫項目。按鈕，打開庫項目。在庫項目被打開修改且保存后，通常引用該庫項目的網(wǎng)頁會自動進在庫項目被打開修改且保存后，通常引用該庫項目的網(wǎng)頁會自動進行更新。如果沒有進行自動更新，可以在菜單欄中選擇【修改】行更新。如果沒有進行自動更新，可以在菜單欄中選擇【修改】【庫】【更新當前頁面】或【更新頁面】命令進行更新?！編臁?/p>

15、【更新當前頁面】或【更新頁面】命令進行更新。 在【屬性】面板中單擊在【屬性】面板中單擊 按鈕，可將庫按鈕，可將庫項目的內容與庫文件分離，分離后庫項目的內容將自動項目的內容與庫文件分離，分離后庫項目的內容將自動變成網(wǎng)頁中的內容，網(wǎng)頁與庫項目不再有關聯(lián)。變成網(wǎng)頁中的內容，網(wǎng)頁與庫項目不再有關聯(lián)。 需要掌握的內容主要有：需要掌握的內容主要有： 1、重復區(qū)域、重復區(qū)域 2、可編輯區(qū)域、可編輯區(qū)域 3、 重復表格重復表格 4、修改模板對象的名稱、修改模板對象的名稱 重復區(qū)域是指可以復制任意次數(shù)的指重復區(qū)域是指可以復制任意次數(shù)的指定區(qū)域。重復區(qū)域不是可編輯區(qū)域，若要定區(qū)域。重復區(qū)域不是可編輯區(qū)域，若要使重

16、復區(qū)域中的內容可編輯，必須在重復使重復區(qū)域中的內容可編輯，必須在重復區(qū)域內插入可編輯區(qū)域或重復表格。在一區(qū)域內插入可編輯區(qū)域或重復表格。在一個重復區(qū)域內可以繼續(xù)插入另一個重復區(qū)個重復區(qū)域內可以繼續(xù)插入另一個重復區(qū)域。整個被定義為重復區(qū)域的部分都可以域。整個被定義為重復區(qū)域的部分都可以被重復使用。被重復使用。 在主菜單中選擇【插入】【模板對象】【重復在主菜單中選擇【插入】【模板對象】【重復區(qū)域】命令，也可以在【插入】【常用】【模板】區(qū)域】命令，也可以在【插入】【常用】【模板】面板中單擊面板中單擊 （重復區(qū)域）按鈕，打開【新建重復區(qū)（重復區(qū)域）按鈕，打開【新建重復區(qū)域】對話框，將當前選定的區(qū)域設置

17、為重復區(qū)域。域】對話框，將當前選定的區(qū)域設置為重復區(qū)域。 可編輯區(qū)域是指可以對其進行添加、修改和可編輯區(qū)域是指可以對其進行添加、修改和刪除網(wǎng)頁元素等操作的區(qū)域。當創(chuàng)建了一個可編刪除網(wǎng)頁元素等操作的區(qū)域。當創(chuàng)建了一個可編輯區(qū)域后，在該區(qū)域內不能再繼續(xù)創(chuàng)建可編輯區(qū)輯區(qū)域后，在該區(qū)域內不能再繼續(xù)創(chuàng)建可編輯區(qū)域。域。 在主菜單中選擇【插入】【模板對象】在主菜單中選擇【插入】【模板對象】【可編輯區(qū)域】命令，也可在【插入】【常用】【可編輯區(qū)域】命令，也可在【插入】【常用】【模板】面板中單擊【模板】面板中單擊 （可編輯區(qū)域）按鈕，（可編輯區(qū)域）按鈕，打開【新建可編輯區(qū)域】對話框，插入或者將當打開【新建可編輯

18、區(qū)域】對話框，插入或者將當前選定區(qū)域設為可編輯區(qū)域。前選定區(qū)域設為可編輯區(qū)域。 重復表格是指包含重復行的表格格式重復表格是指包含重復行的表格格式的可編輯區(qū)域，可以定義表格的屬性并設的可編輯區(qū)域，可以定義表格的屬性并設置哪些單元格可編輯。置哪些單元格可編輯。 重復表格可以被包含在重復區(qū)域內，重復表格可以被包含在重復區(qū)域內，但不能被包含在可編輯區(qū)域內。另外，不但不能被包含在可編輯區(qū)域內。另外，不能將選定的區(qū)域變成重復表格，只能插入能將選定的區(qū)域變成重復表格，只能插入重復表格。重復表格。 在主菜單中選擇【插入】【模板對象】【重復在主菜單中選擇【插入】【模板對象】【重復表格】命令，也可以在【插入】【常

19、用】【模板】表格】命令，也可以在【插入】【常用】【模板】面板中單擊面板中單擊 （重復表格）按鈕，打開【插入重復表（重復表格）按鈕，打開【插入重復表格】對話框，在當前區(qū)域插入重復表格。格】對話框，在當前區(qū)域插入重復表格。 修改模板對象的名稱可通過【屬性】修改模板對象的名稱可通過【屬性】面板進行。這時首先需要選擇模板對象，面板進行。這時首先需要選擇模板對象，方法是單擊模板對象的名稱或者將鼠標光方法是單擊模板對象的名稱或者將鼠標光標定位在模板對象處，然后在工作區(qū)下面標定位在模板對象處，然后在工作區(qū)下面選擇相應的標簽，在選擇模板對象時會顯選擇相應的標簽，在選擇模板對象時會顯示其【屬性】面板，在【屬性】

20、面板中修示其【屬性】面板，在【屬性】面板中修改模板對象名稱即可。改模板對象名稱即可。 需要掌握的內容主要有：需要掌握的內容主要有： 1、從模板新建網(wǎng)頁、從模板新建網(wǎng)頁 2、在已存在頁面應用模板、在已存在頁面應用模板 3、更新由模板生成的頁面、更新由模板生成的頁面 4、分離模板、分離模板 在主菜單中選擇【文件】【新建】在主菜單中選擇【文件】【新建】命令打開【新建文檔】對話框，切換至命令打開【新建文檔】對話框，切換至【模板】選項卡，選擇已創(chuàng)建的模板?！灸０濉窟x項卡，選擇已創(chuàng)建的模板。 也可以在【資源】面板中切換到模板也可以在【資源】面板中切換到模板分類，在模板列表用鼠標右鍵單擊需要的分類，在模板列

21、表用鼠標右鍵單擊需要的模板，在彈出的快捷菜單中選擇【從模板模板，在彈出的快捷菜單中選擇【從模板新建】命令，基于模板的新文檔即會在文新建】命令，基于模板的新文檔即會在文檔窗口中打開。檔窗口中打開。 首先打開要應用模板的網(wǎng)頁文檔，然后在主首先打開要應用模板的網(wǎng)頁文檔，然后在主菜單中選擇【修改】【模板】菜單中選擇【修改】【模板】/【套用模板到【套用模板到頁】命令，或在【資源】面板的模板列表框中選頁】命令，或在【資源】面板的模板列表框中選中要應用的模板，再單擊面板底部的【應用】按中要應用的模板，再單擊面板底部的【應用】按鈕即可應用模板。如果已打開的文檔是一個空白鈕即可應用模板。如果已打開的文檔是一個空

22、白文檔，文檔將直接應用模板，如果打開的文檔是文檔，文檔將直接應用模板，如果打開的文檔是一個有內容的文檔，這時通常會打開一個【不一一個有內容的文檔，這時通常會打開一個【不一致的區(qū)域名稱】對話框，該對話框會提示讀者將致的區(qū)域名稱】對話框，該對話框會提示讀者將文檔中的已有內容放在模板的什么區(qū)域。文檔中的已有內容放在模板的什么區(qū)域。 通過模板生成的網(wǎng)頁，在模板更新時通過模板生成的網(wǎng)頁，在模板更新時可以對站點中所有應用同一模板的網(wǎng)頁進可以對站點中所有應用同一模板的網(wǎng)頁進行批量更新，這就要求在【從模板新建】行批量更新，這就要求在【從模板新建】對話框中勾選【當模板改變時更新頁面】對話框中勾選【當模板改變時更新頁面】復選框。如果頁面沒有更新，可以在菜單復選框。如果頁面沒有更新，可以在菜單欄中選擇【修改】【模板】【更新當欄中選擇【修改】【模板】【更新當前頁】或【更新頁面】命令對由模板生成前頁】或【更新頁面】命令對由模板生成的網(wǎng)頁進行更新。的網(wǎng)頁進行更新。 通過【從模板中分離】命令將使用模