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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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