網(wǎng)絡編輯（第三版）第14章網(wǎng)頁制作軟件-Dreamweaver

1、第一章第二章第四章第四章第五章第六章第七章第八章第九章第十章第十一章第十二章第十四章 第十四章 網(wǎng)頁制作軟件Dreamweaver 第十四章 網(wǎng)頁制作軟件Dreamweaver 14.1 Dreamweaver 基本知識14.2 頁面內(nèi)容和超鏈接14.3 框架、層與CSS樣式的使用14.4 利用模板創(chuàng)建網(wǎng)頁14.5 分析評價 _學習目標第十四章 網(wǎng)頁制作軟件 -Dreamweaver 知識目標：了解通過Dreamweaver進行網(wǎng)站開發(fā)的基本知識和流程。 技能目標：能夠較熟練地運用Dreamweaver制作網(wǎng)頁，熟悉框架、層、CSS樣式的使用。 能力目標：能獨立或者團隊合作制作個人站點。 14

2、.1 Dreamweaver 基本知識第十四章 網(wǎng)頁制作軟件 -Dreamweaver 14.1.1Dreamweaver是Adobe公司出品的一款“所見即所得”的網(wǎng)頁編輯工具。采用的是浮動面板的設計風格。Dreamweaver對于DHTML（動態(tài)網(wǎng)頁）的支持特別好，可以輕而易舉地做出很多炫目的互動頁面特效，插件式的程序設計使得其功能可以無限地擴展。14.1.2Dreamweaver 工作窗口Dreamweaver的工作窗口主要包括功能菜單、插入欄、文檔工具欄、文檔窗口、狀態(tài)欄、屬性面板、功能面板等第十四章 網(wǎng)頁制作軟件 -Dreamweaver 第十四章 網(wǎng)頁制作軟件 -Dreamweave

3、r 1） 功能菜單功能菜單擁有“文件”、“編輯”、“查看”、“插入”、“修改”、“格式”、“命令”、“站點”、“窗口”、“幫助”等10個菜單分類，單擊這些菜單可以打開其子菜單。Dreamweaver 的菜單功能極其豐富，幾乎涵蓋了所有的功能操作。第十四章 網(wǎng)頁制作軟件 -Dreamweaver 2） 插入欄插入欄包含用于將各種類型的“對象”（如圖像、表格和層）插入到文檔中的按鈕，每個對象都是一段 HTML 代碼，允許您在插入它時設置不同的屬性，例如，您可以通過單擊“插入”欄中的“表格”按鈕插入一個表格，如果您愿意，可以不使用“插入”欄而使用“插入”菜單插入對象。第十四章 網(wǎng)頁制作軟件 -Dre

4、amweaver 3） 文檔工具欄文檔工具欄中包含一些按鈕，使用這些按鈕可以在“代碼”視圖、“設計”視圖以及“拆分”視圖間快速切換。文檔工具欄還包含一些與查看文檔、在本地和遠程站點間傳輸文檔有關的常用命令和選項。A. 顯示代碼視圖 B. 顯示代碼和設計視圖 C.顯示設計視圖D. 實時視圖 E. 多屏幕 F. 在瀏覽器中預覽/調(diào)試 G. 文件管理H. W3C 驗證 I. 檢查瀏覽器兼容性 J. 可視化助理 K. 刷新設計視圖L. 文檔標題第十四章 網(wǎng)頁制作軟件 -Dreamweaver 4）文檔窗口顯示您當前創(chuàng)建和編輯的文檔。Dreamweaver文檔窗口提供了幾種視圖模式，可以任意選擇一視圖。

5、（1）設計視圖 設計視圖是一個用于可視化頁面布局、可視化編輯和快速進行應用程序開發(fā)的設計環(huán)境。在該視圖中，Dreamweaver顯示文檔的完全可編輯的可視化表示形式，類似于在瀏覽器中查看頁面時看到的內(nèi)容。（2）代碼視圖 代碼視圖是一個用于編寫和編輯 HTML、JavaScript、服務器語言代碼以及任何其他類型代碼的手工編碼環(huán)境。（3）拆分視圖 拆分視圖使用戶可以在一個窗口中同時看到同一文檔的“代碼”視圖和“設計”視圖。第十四章 網(wǎng)頁制作軟件 -Dreamweaver 5）狀態(tài)欄狀態(tài)欄提供與正在創(chuàng)建的文檔有關的其他信息。A：標簽選擇器 B：選取工具 C：手形工具D：縮放工具E：設置縮放比率F：

6、窗口大小 G：下載文件大小/下載時間 H：編碼格式第十四章 網(wǎng)頁制作軟件 -Dreamweaver 6）屬性面板用于查看和更改所選對象或文本的各種屬性，每種對象都具有不同的屬性。在工作窗口右側，主要分布著“CSS樣式”面板、“應用程序”面板“文件”面板等功能面板。第十四章 網(wǎng)頁制作軟件 -Dreamweaver 14.1.3參數(shù)設置在Dreamweaver中通過設置相關參數(shù)，可以改變操作環(huán)境，從而使其更加符合設計者的設計需要。 如在“編輯”菜單中選擇首選參數(shù)，在這里，你可以把自己的Dreamweaver設置為自己喜歡的樣式，一般使用默認就可以了第十四章 網(wǎng)頁制作軟件 -Dreamweaver

7、14.2.1頁面內(nèi)容創(chuàng)建1）文本對象首先來介紹創(chuàng)建一個新的空白網(wǎng)頁。 在文檔窗口中選擇“文件新建”也可以創(chuàng)建新網(wǎng)頁。在Dreamweaver中新建文檔的具體操作步驟如下。依次選擇“文件新建”菜單命令，打開“新建文檔”對話框.在“空白頁”選項卡內(nèi)的“頁面類型”列表框中選擇所要創(chuàng)建的文檔類型，然后在“布局”列表框中選擇想要創(chuàng)建的樣式，然后單擊“創(chuàng)建”按鈕即可。_14.2 頁面和超鏈接創(chuàng)建第十四章 網(wǎng)頁制作軟件 -Dreamweaver 設置頁面屬性是在正式開始制作網(wǎng)頁前一個必不可少的工序，可使用“頁面屬性”對話框指定網(wǎng)頁面的若干基本頁面布局選項，包括字體、背景顏色和背景圖像。執(zhí)行“修改-頁面屬性

8、”命令，在彈出窗口進行頁面屬性設置。第十四章 網(wǎng)頁制作軟件 -Dreamweaver （1）插入圖像在將圖像插入 Dreamweaver 文檔時，Dreamweaver 自動在 HTML 源代碼中生成對該圖像文件的引用。為了確保此引用的正確性，該圖像文件必須位于當前站點中，如果圖像文件不在當前站點中， Dreamweaver 會詢問是否要將此文件復制到當前站點中。用戶還可以插入動態(tài)圖像。 （2）插入圖像占位符圖像占位符是在準備好將最終圖形添加到 Web 頁之前使用的圖形，我們可以使用以下操作來插入圖像占位符：“文檔”窗口中，將插入點放置在要插入占位符圖形的位置。插入欄中，單擊“圖像占位符”圖標

9、，或者選擇“插入圖像占位符”，“圖像占位符”對話框隨即顯示。在該對話框中，為圖像占位符選擇選項，您可以設置占位符的大小和顏色，并為占位符提供文本標簽。 2）圖像對象第十四章 網(wǎng)頁制作軟件 -Dreamweaver （3）調(diào)整圖像大小 以可視方式調(diào)整圖像的大小按以下步驟操作： 在“文檔”窗口中選擇該圖像（如一個圖像或 SWF 文件），在圖像的底部、右側及右下角出現(xiàn)調(diào)整大小手柄，如果未出現(xiàn)調(diào)整大小控制點，則單擊圖像以外的部分然后重新選擇它，或在標簽選擇器中單擊相應的標簽以選擇該圖像。 執(zhí)行下列操作可以調(diào)整圖像的大?。喝粢{(diào)整圖像的寬度，可拖動右側的選擇控制點。若要調(diào)整圖像的高度，可拖動底部的選擇控

10、制點。若要同時調(diào)整圖像的寬度和高度，可拖動頂角的選擇控制點。若要在調(diào)整圖像尺寸時保持圖像的比例（其寬高比），則在按住 Shift 鍵的同時拖動頂角的選擇控制點。第十四章 網(wǎng)頁制作軟件 -Dreamweaver 將插入點放在“文檔”窗口中希望插入該對象的位置。執(zhí)行下列操作之一插入對象：在“插入”欄的“常用”類別中，單擊“媒體”按鈕，并選擇要插入的對象類型的按鈕，或者從“插入媒體”子菜單中選擇適當?shù)膶ο?，如圖所示。 3）其他多媒體對象可以將以下媒體文件合并到 Dreamweaver 頁中：Flash 和 Shockwave 影片、QuickTime、AVI、Java Applet、ActiveX控

11、件以及各種格式的音頻文件。第十四章 網(wǎng)頁制作軟件 -Dreamweaver 在一個文檔中可以創(chuàng)建以下幾種類型的鏈接：鏈接到其他文檔或文件（如圖形、影片、PDF 或聲音文件）的鏈接。命名錨記鏈接，此類鏈接跳轉至文檔內(nèi)的特定位置。電子郵件鏈接，此類鏈接新建一個收件人地址已經(jīng)填好的空白電子郵件?？真溄雍湍_本鏈接，此類鏈接使用戶能夠在對象上附加行為，或者創(chuàng)建執(zhí)行 JavaScript 代碼的鏈接。使用屬性檢查器和“指向文件” 圖標可創(chuàng)建從圖像、對象或文本到其他文檔或文件的鏈接。 14.2.2創(chuàng)建超鏈接超鏈接創(chuàng)建面板第十四章 網(wǎng)頁制作軟件 -Dreamweaver 在 Dreamweaver 中，“站點

12、”是網(wǎng)站中使用的所有文件和資源的集合。站點可以組織和管理所有的 Web 文檔，將創(chuàng)建的站點上傳到 Web 服務器，跟蹤和維護鏈接以及管理和共享文件。定義一個站點可以充分利用 Dreamweaver 的功能以減少錯誤，如路徑出錯、鏈接出錯等。站點通常由兩部分文件夾組成，可在其中存儲和處理文件的計算機上的本地文件夾和可在其中將相同文件發(fā)布到web服務器上的遠程文件夾。_14.3站點第十四章 網(wǎng)頁制作軟件 -Dreamweaver 在 Dreamweaver中創(chuàng)建本地站點的具體操作步驟如下：菜單欄選擇“站點新建站點”；在彈出的“站點設置”對話框的“站點名稱”欄輸入站點名稱，然后選擇本地站點文件夾位置

13、，或創(chuàng)建本地站點文件夾，最后點擊保存。1）創(chuàng)建本地站點文件夾面板中的文件列表將作為文件管理器，以便復制、粘貼、刪除、移動和打開文件，就像在桌面上一樣簡單。第十四章 網(wǎng)頁制作軟件 -Dreamweaver 在Dreamweaver的主菜單中，選擇“站點-管理站點”，可以打開如圖所示的站點管理器對話框。在該對話框中，可以對已經(jīng)創(chuàng)建的站點進行管理。例如，切換、添加和刪除等。2）管理本地站點第十四章 網(wǎng)頁制作軟件 -Dreamweaver 14.4.1布局在 Dreamweaver 中可以使用表格進行布局，或使用 CSS 在文檔中添加內(nèi)容塊來進行布局，可以插入標簽并對其應用 CSS 定位樣式，或者使用

14、AP Div（層）來創(chuàng)建布局。_14.4 框架、AP Div（層）與CSS樣式的使用第十四章 網(wǎng)頁制作軟件 -Dreamweaver 表格是網(wǎng)頁的一個非常重要的元素，因為HTML本身并沒有提供更多的排版手段，所以我們往往需要借助表格實現(xiàn)網(wǎng)頁的精細排版。表格是用于在頁面上顯示表格式數(shù)據(jù)以及對文本和圖形進行布局的強有力的工具。表格由一行或多行組成，每行又由一個或多個單元格組成。雖然 HTML 代碼中通常不明確指定列，但 Dreamweaver 允許操作列、行和單元格。當選定的表格或表格中有插入點時，Dreamweaver 會顯示表格寬度和每個表格列的列寬。14.4.2表格的作用第十四章 網(wǎng)頁制作軟

15、件 -Dreamweaver AP Div和表格一樣可以作為網(wǎng)頁布局的容器，AP Div內(nèi)可以包含文本、圖形圖像、動畫、音頻、視頻、表格等一切可以放置到HTML中的元素，甚至可以在AP Div內(nèi)放置AP Div。14.4.3AP Div（層）的作用第十四章 網(wǎng)頁制作軟件 -Dreamweaver 1）插入表格點擊對象面板的 可到如圖所示的對話框。14.4.4表格與AP Div（層）的使用在這里可以設置表格的行數(shù)、列數(shù)，表格的寬度，單位可以是像素（pixels）或百分比（percent），按像素定義的表格大小是固定的，而按百分比定義的表格，會按照瀏覽器的大小而變化。第十四章 網(wǎng)頁制作軟件 -Dr

16、eamweaver 2）AP Div（層）的使用AP Div（層）是一種 HTML 頁面元素，可以將它定位在頁面上的任意位置， AP Div可以包含文本、圖像或其他任何可在 HTML 文檔正文中放入的內(nèi)容，Dreamweaver 使用戶可以方便地在頁面上創(chuàng)建AP Div并精確地將AP Div定位。當插入一個AP Div時，“設計”視圖中會顯示AP Div代碼標記，Dreamweaver 將默認顯示該AP Div的邊框，并在指針滑過該塊時高亮顯示該塊（只要該塊具有相關聯(lián)的 class、id 或 style），可以通過禁用不可見元素并隱藏層邊框來關閉AP Div代碼標記。第十四章 網(wǎng)頁制作軟件 -

17、Dreamweaver 在 “布局”類別中單擊 按鈕，或者在菜單中選擇“插入插入-布局對象-AP Div”就可以創(chuàng)建出一個AP Div，我們可以在AP Div上輸入絕大部分的網(wǎng)頁元素，例如圖片、文字、表格，層的好處是可以放置在頁面的任何位置。選擇一個AP Div后，對應的屬性面板如圖所示。在可以在這里設置AP Div的各種屬性，也可以直接在“設計”視圖中通過鼠標拖拉一個AP Div出來，然后調(diào)整其位置和大小尺寸。第十四章 網(wǎng)頁制作軟件 -Dreamweaver CSS是Cascading Style Sheets（層疊樣式表單）的簡稱，它允許作者在HTML文檔中加入樣式（如字體類型、顏色、大小

18、等），對于設計者來說它是一個非常靈活的工具，不必再把繁雜的樣式定義編寫在文檔結構中，可以將所有關于文檔的樣式指定內(nèi)容脫離出來，在行內(nèi)定義、在標題中定義，甚至作為外部樣式文件供HTML調(diào)用。 CSS是一系列樣式的集合，使用CSS可以有效地分離頁面的內(nèi)容與格式，從而減少網(wǎng)頁設計的工作量。CSS的語法結構由3部分組成，分別為選擇符（selector）、樣式屬性（properties）和屬性的取值value）。14.4.5CSS樣式的使用第十四章 網(wǎng)頁制作軟件 -Dreamweaver CSS基本語法如下：選擇符樣式屬性：屬性的取值。 例如：body color： black 表示使頁面中的文字為黑色

19、。 CSS最基本的特性：分組、繼承、層疊。 分組：通常我們需要同時改變幾種樣式的屬性，CSS允許通過分隔其內(nèi)容的方式來進行分組。例如：body，td，p color：#000000，text-align：left。 繼承：通過繼承，CSS設置可以被應用到多個標識中，絕大部分（但不是全部）的CSS可以通過封閉CSS選擇器中的HTML標識來被繼承，例如通過一個CSS設置來改變整個頁面的字體： body font-family： “Arial”； font-size： 14px； line-height： 18px； color： #000000。 層疊：Cascading描述了覆蓋通用樣式的局部樣

20、式的能力，在相同的方式中，一個普遍地應用到某一塊文本上的CSS規(guī)則可以被其他應用到相同文本中某個更為特殊的部分的規(guī)則所覆蓋。第十四章 網(wǎng)頁制作軟件 -Dreamweaver 14.5.1Dreamweaver 模板 模板創(chuàng)作者在模板中設計“固定的”頁面布局，然后創(chuàng)建可在基于該模板的文檔中進行編輯的區(qū)域；如果創(chuàng)作者沒有將某個區(qū)域定義為可編輯區(qū)域，那么模板用戶就無法編輯該區(qū)域中的內(nèi)容。模板創(chuàng)作者控制哪些頁面元素可以由模板用戶（如作家、圖形藝術家或其他 Web 開發(fā)人員）進行編輯，文檔中可以包含數(shù)種類型的模板區(qū)域。模板最強大的用途之一在于一次更新多個頁面，使基于模板創(chuàng)建的文檔與該模板保持連接狀態(tài)（除

21、非以后分離該文檔），可以修改模板并立即更新基于該模板的所有文檔中的設計。_14.5利用模板創(chuàng)建網(wǎng)頁第十四章 網(wǎng)頁制作軟件 -Dreamweaver 14.5.2模板區(qū)域的類型 可編輯區(qū)域是基于模板的文檔中的未鎖定區(qū)域；它是模板用戶可以編輯的部分，模板創(chuàng)作者可以將模板的任何區(qū)域指定為可編輯的。要讓模板生效，它應該至少包含一個可編輯區(qū)域；否則，將無法編輯基于該模板的頁面。 重復區(qū)域是文檔中設置為重復的布局部分，例如，可以設置重復一個表格行。通常重復部分是可編輯的，這樣模板用戶可以編輯重復元素中的內(nèi)容，同時使設計本身處于模板創(chuàng)作者的控制之下。在基于模板的文檔中，模板用戶可以根據(jù)需要使用重復區(qū)域控制選項添加或刪除重復區(qū)域的副本。 可選區(qū)域是在模板中指定為可選的部分，用于保存有可能在基于模板的文檔中出現(xiàn)的內(nèi)容（如可選文本或圖像）。在基于模板的頁面上，模板用戶通?？刂剖欠耧@示內(nèi)容。 可編輯標簽屬性使用戶可以在模板中解鎖標簽屬性，使該屬性可以在基于模板的頁面中編輯。第十四章 網(wǎng)頁制作軟件 -Dreamweaver 14.5.3應用模板 為了簡化制作過程，常常采用先制作出頁面，再應用模板的方法。 簡明步驟：打開一個有內(nèi)容的頁面打開資源面板點擊模板按鈕選擇一個模板點擊應用按鈕指定可編輯區(qū)域確定。第十