《網(wǎng)頁制作與設(shè)計》立體化電子課件 第4章-Dreamwear網(wǎng)頁設(shè)計

第4章Dreamweaver操作基礎(chǔ)行為的應(yīng)用網(wǎng)頁布局技術(shù)網(wǎng)頁文檔基本操作表單操作CSS樣式表的應(yīng)用總結(jié)與習題Dreamweaver網(wǎng)頁設(shè)計Dreamweaver是Macromedia公司出品的一款集網(wǎng)頁制作和網(wǎng)站管理于一體的“所見即所得”的網(wǎng)頁制作軟件。無論用戶愿意享受手工編寫HTML代碼時的駕馭感還是偏愛在可視化編輯環(huán)境中工作，Dreamweaver都提供了有用的工具，使用戶擁有更加完美的Web創(chuàng)作體驗Dreamweaver操作基礎(chǔ)

4.1作為網(wǎng)頁制作軟件，Dreamweaver提供了功能強大的可視化設(shè)計工具和精簡而高效的代碼編輯環(huán)境，使開發(fā)人員能夠快捷地創(chuàng)建規(guī)范的Web應(yīng)用程序，構(gòu)建功能強大的網(wǎng)絡(luò)服務(wù)體系Dreamweaver的主要特點及功能如下頁所示Dreamweaver操作基礎(chǔ)

4.1特點1是集網(wǎng)頁制作和網(wǎng)站管理于一體的“所見即所得”的網(wǎng)頁制作軟件使用內(nèi)置的圖形編輯程序節(jié)省開發(fā)時間將設(shè)計和代碼編輯器合二為一；設(shè)計者可書寫HTML代碼或以可視化的形式設(shè)計Web頁提供操作方便、功能強大的用戶界面特點4特點2特點3Dreamweaver操作基礎(chǔ)

4.1特點5提供完美的CSS支持，可利用豐富的CSS樣式表構(gòu)建復雜、規(guī)范的站點提供完整的集成開發(fā)環(huán)境，可以開發(fā)多種站點，還可定制和擴展開發(fā)環(huán)境可與一些常見格式的外部文檔或代碼實現(xiàn)無縫結(jié)合提供了較多的行為，用戶不用書寫代碼即可設(shè)計出功能豐富的網(wǎng)頁特點8特點6特點7Dreamweaver操作基礎(chǔ)

4.1特點9通過布局視圖技術(shù)將表格和層兩種排版工具結(jié)合起來，從而提供精確而靈活的頁面排版功能強大的網(wǎng)站管理功能提供了跨瀏覽器兼容性檢查功能，以檢驗頁面中是否包含目標瀏覽器不支持的標記或CSS結(jié)構(gòu)易學、易用，只要掌握了其基本操作方法，即使初學者也能制作出具有專業(yè)水平的網(wǎng)頁特點12特點10特點11Dreamweaver操作基礎(chǔ)

4.1初次啟動Dreamweaver后，會彈出【工作區(qū)設(shè)置】對話框，對話框中提供了“設(shè)計器”和“編碼器”兩種布局風格，使用者可以根據(jù)自己的操作習慣，從中選擇一種工作區(qū)布局當選擇一種工作區(qū)布局后，如果想切換成另一種工作區(qū)布局，可以選擇【窗口|工作區(qū)布局】，然后在彈出的子菜單中選擇工作區(qū)布局Dreamweaver操作基礎(chǔ)

4.1Dreamweaver在啟動時，默認顯示【起始頁】對話框，用戶可以在這個對話框中創(chuàng)建文檔或打開最近使用過的文檔，還可以通過產(chǎn)品介紹或教程了解關(guān)于Dreamweaver的更多信息。如果選中“不再顯示此對話框”選項，則以后啟動Dreamweaver時將不再自動顯示起始頁Dreamweaver操作基礎(chǔ)

4.1當新建或打開一個Web頁后，Dreamweaver顯示出工作區(qū)窗口，窗口由主菜單、工具欄、文檔窗口、面板組、屬性面板等組成Dreamweaver的工作區(qū)窗口如下圖所示Dreamweaver操作基礎(chǔ)

4.1Dreamweaver的工作界面Dreamweaver操作基礎(chǔ)

4.1主菜單主菜單提供Dreamweaver的所有操作，各菜單項的功能介紹如下Dreamweaver操作基礎(chǔ)

4.1【文件】用于管理文件。包括創(chuàng)建和保存文件、導入與導出、預(yù)覽等【編輯】用于編輯操作。包括撤銷與恢復、復制與粘貼、查找與替換、參數(shù)設(shè)置與快捷鍵設(shè)置等【插入】用于插入頁面元素。如圖像、層、表格、表單、框架、特殊字符等Dreamweaver操作基礎(chǔ)

4.1【查看】用于查看對象。如代碼的查看，網(wǎng)格線、面板、工具欄的顯示/隱藏等【修改】用于對頁面元素的修改。如鏈接、表格、層位置、時間軸等【文本】用于對文本的操作。如文本格式設(shè)置、HTML/CSS樣式、段落格式化等Dreamweaver操作基礎(chǔ)

4.1【命令】匯集了所有的附加命令項。如錄制命令等【站點】用于創(chuàng)建和管理站點【窗口】用于打開/關(guān)閉面板和窗口【幫助】包含Dreamweaver的聯(lián)機幫助、技術(shù)支持等Dreamweaver操作基礎(chǔ)

4.1插入工具欄插入工具欄包含用于將各種類型的對象插入到文檔中的按鈕，每個對象都對應(yīng)一段HTML代碼由于可以插入的對象很多，所以插入工具欄采取分類顯示的方法，單擊插入工具欄的“類別名”顯示區(qū)域，顯示類別列表，從中選擇一個類別后，該類別所包含的工具按鈕出現(xiàn)在工具欄中各類別所包括的按鈕列舉如下Dreamweaver操作基礎(chǔ)

4.1【常用】包括鏈接類、圖像和表格類、模板和標簽類等常用的對象【布局】包括表格、div標簽、層和框架等對象，還可以在此選擇視圖模式【表單】包括用于創(chuàng)建表單容器和插入表單元素的工具按鈕Dreamweaver操作基礎(chǔ)

4.1

【文本】包括定義文本格式和列表格式的各種設(shè)置按鈕【HTML】包括用于插入水平線、文件頭內(nèi)容、表格、框架和腳本的HTML按鈕【應(yīng)用程序】包含插入記錄集、重復區(qū)域等動態(tài)元素的按鈕Dreamweaver操作基礎(chǔ)

4.1文檔窗口文檔窗口顯示當前編輯的Web頁文檔Dreamweaver提供了文檔窗口的三種視圖三種視圖的內(nèi)容列舉如下Dreamweaver操作基礎(chǔ)

4.1代碼視圖設(shè)計視圖提供編輯HTML、JavaScript、服務(wù)器語言等代碼的手工編碼環(huán)境提供頁面布局和編輯的可視化設(shè)計環(huán)境；在該視圖中，用戶可以通過拖動等操作完成網(wǎng)頁元素的添加和編輯在一個窗口中同時顯示同一文檔的“代碼”視圖和“設(shè)計”視圖。這種方式綜合了“代碼”視圖和“設(shè)計”視圖的長處拆分視圖Dreamweaver操作基礎(chǔ)

4.1在制作網(wǎng)頁過程中，一般應(yīng)該在設(shè)計視圖中可視化地進行頁面的布局設(shè)計和頁面元素的添加在代碼視圖中修改Web頁文檔對應(yīng)的HTML代碼，或編寫其它腳本代碼Dreamweaver操作基礎(chǔ)

4.1文檔窗口還包括文檔工具欄、文檔編輯區(qū)、狀態(tài)欄等組成部分在代碼視圖中，還會顯示編碼工具欄Dreamweaver操作基礎(chǔ)

4.1文檔工具欄文檔工具欄通常顯示在文檔窗口的上面，包含各種按鈕【代碼】、【拆分】、【設(shè)計】三個按鈕，用來控制文檔窗口的視圖方式Dreamweaver操作基礎(chǔ)

4.1標題文本框標題文本框：用于顯示和修改當前文檔的標題，瀏覽網(wǎng)頁時，網(wǎng)頁的標題將顯示在瀏覽器的標題欄中Dreamweaver操作基礎(chǔ)

4.1按鈕單擊按鈕會彈出菜單，從菜單中選擇“檢查瀏覽器支持”等命令，可以檢測所編輯文檔的跨瀏覽器兼容性Dreamweaver操作基礎(chǔ)

4.1文檔編輯區(qū)文檔編輯區(qū)即用戶用來編輯和修改文檔的區(qū)域在代碼視圖中，可以輸入Web頁對應(yīng)的HTML代碼或腳本代碼在設(shè)計視圖中，可以通過拖動等操作，實現(xiàn)網(wǎng)頁元素的可視化添加和修改Dreamweaver操作基礎(chǔ)

4.1狀態(tài)欄狀態(tài)欄在“文檔”窗口底部，提供當前文檔的有關(guān)信息Dreamweaver操作基礎(chǔ)

4.1屬性面板屬性面板又稱屬性檢查器，一般出現(xiàn)在文檔窗口的下方。屬性面板用于顯示所選中網(wǎng)頁元素的屬性，用戶可以利用它查看和編輯屬性值。選擇不同的網(wǎng)頁元素，屬性面板所顯示的內(nèi)容也有所不同Dreamweaver操作基礎(chǔ)

4.1面板組在Dreamweaver窗口的右側(cè)是面板組，通常包含“CSS”、“應(yīng)用程序”、“標簽檢查器”、“文件”等面板。在主菜單的【窗口】子菜單中包含了所有的面板名，通過勾選或取消勾選某個面板名，可以顯示或移去該面板Dreamweaver操作基礎(chǔ)

4.1除了前面已經(jīng)介紹的插入工具欄和文檔工具欄外，Dreamweaver還提供了樣式呈現(xiàn)、標準和編碼工具欄選擇【查看】|【工具欄】，在【工具欄】子菜單中勾選或取消某個工具欄，可以在視圖中顯示或隱藏相應(yīng)的工具欄。Dreamweaver操作基礎(chǔ)

4.1站點站點實質(zhì)上就是一個文件夾設(shè)計良好的網(wǎng)站通常是在站點文件夾下建立不同的子文件夾，將網(wǎng)頁文檔及其它資源分門別類地保存在相應(yīng)的文件夾中以方便管理和維護Dreamweaver操作基礎(chǔ)

4.1當使用Dreamweaver制作一個網(wǎng)站時，首先應(yīng)該建立站點，以方便對整個網(wǎng)站的結(jié)構(gòu)進行規(guī)劃，并利用Dreamweaver的站點管理功能對整個網(wǎng)站資源進行管理Dreamweaver還有許多功能必須在建立站點后才能實現(xiàn)Dreamweaver操作基礎(chǔ)

4.1站點類型遠端站點通常將存儲在Web服務(wù)器上的站點稱為遠端站點；建立網(wǎng)站的最終目的是要發(fā)布到互聯(lián)網(wǎng)上，因此需要在Web服務(wù)器上建立遠端站點本地站點在創(chuàng)建站點時，通常先在本地計算機上建立一個站點，完成網(wǎng)站開發(fā)工作，調(diào)試成功后，再上傳到Web服務(wù)器上；在本地計算機上建立的站點就是本地站點Dreamweaver操作基礎(chǔ)

4.1創(chuàng)建本地站點創(chuàng)建本地站點，包括為站點命名，指定站點存儲位置(文件夾)，確定是否使用服務(wù)器技術(shù)和是否使用遠程服務(wù)器等工作創(chuàng)建立本地站點的步驟如下所示Dreamweaver操作基礎(chǔ)

4.1Step1Step2選擇菜單【站點|新建站點】，彈出對話框。對話框包括“基本”和“高級”兩個選項卡；前者為建立站點的向?qū)?，后者則用來設(shè)置站點的各個屬性選擇“基本”選項卡，進行站點命名操作：在“站點名稱”文本框中為站點命名進行站點URL設(shè)置操作：在“HTTP地址”文本框中設(shè)定完成的站點上傳到Web服務(wù)器后將使用的URL，若不知道新建站點的URL，可以暫時不填Step3Dreamweaver操作基礎(chǔ)

4.1Step4Step5單擊【下一步】按鈕，在彈出的對話框中選擇站點類型：創(chuàng)建動態(tài)網(wǎng)站，應(yīng)選擇“是，…”；創(chuàng)建靜態(tài)網(wǎng)站，應(yīng)選擇“否，…”；通常選擇“否，…”創(chuàng)建靜態(tài)網(wǎng)站；然后在彈出的服務(wù)器技術(shù)列表中選擇要使用的服務(wù)器技術(shù)類型單擊【下一步】按鈕，在彈出的對話框中設(shè)置本地站點文件夾Step6Dreamweaver操作基礎(chǔ)

4.1Step7Step8對于對話框上方的一組單選按鈕，使用系統(tǒng)默認選擇即可；單擊【下一步】按鈕，在彈出的對話框中選擇連接遠程服務(wù)器的方式單擊【下一步】按鈕，在彈出的對話框中單擊【完成】按鈕，完成站點的創(chuàng)建。站點創(chuàng)建成功后，可以看到文件面板中出現(xiàn)新建站點Step9Dreamweaver操作基礎(chǔ)

4.1在“連接方式”列表框中選擇本地站點與遠程服務(wù)器的連接方式時，選擇“無”，暫時不與遠程服務(wù)器建立連接管理站點創(chuàng)建站點后，在設(shè)計過程，可以對站點進行管理操作管理站點的步驟如下所示Dreamweaver操作基礎(chǔ)

4.1Step1Step2選擇菜單【站點|管理站點】，彈出【管理站點】對話框，對話框中列出了本地計算機中建立的所有可用站點名稱，并提供了管理站點的操作按鈕單擊【新建】按鈕，可以進入新建站點流程；從站點列表中選擇一個站點后，單擊【編輯】按鈕，可以按定義站點的流程顯示站點各項設(shè)置，供用戶修改在【管理站點】對話框中，還可以完成站點的復制、刪除、導出、導入等操作Step3Dreamweaver操作基礎(chǔ)

4.1建立站點以后，可以通過文件面板對站點中的資源進行管理文件面板中包含“文件”、“資源”、“代碼片斷”三個選項卡Dreamweaver操作基礎(chǔ)

4.1文件選項卡文件選項卡主要用來對站點的文件進行管理，可以完成對文件和文件夾的新建、打開、復制、粘貼、重命名等操作Dreamweaver操作基礎(chǔ)

4.1代碼片段選項卡Dreamweaver預(yù)定義了一些能實現(xiàn)特定功能的代碼片段，在制作網(wǎng)頁時，可以利用文件面板的代碼片斷選項卡，直接將代碼片斷插入到網(wǎng)頁中在Dreamweave中可以創(chuàng)建并插入HTML、JavaScript、CFML、ASP、JSP等代碼片斷Dreamweaver操作基礎(chǔ)

4.112345文字處理圖像處理使用超級鏈接使用多媒體對象網(wǎng)頁文檔處理網(wǎng)頁文檔基本操作4.2網(wǎng)頁文檔的操作主要包括網(wǎng)頁文檔的創(chuàng)建與編輯，網(wǎng)頁中文字、超級鏈接、圖像、多媒體等對象的處理網(wǎng)頁文檔基本操作4.2創(chuàng)建空白文檔在Dreamweaver中可以創(chuàng)建新的空白文檔、創(chuàng)建以模板為基礎(chǔ)的文檔以及打開并編輯已經(jīng)存在的文檔網(wǎng)頁文檔處理4.2.1創(chuàng)建空白文檔方法1從啟動界面中的“創(chuàng)建新項目”組合框中選擇合適的文件類型，即可直接進入文檔窗口進行編輯方法3按下Ctrl+N快捷鍵，系統(tǒng)彈出新建文檔對話框方法2選擇【文件/新建】菜單命令，系統(tǒng)彈出新建文檔對話框網(wǎng)頁文檔處理4.2.1打開現(xiàn)有文檔在Dreamweaver中可以打開現(xiàn)有的Web頁或基于文本的文檔對于不是Dreamweaver創(chuàng)建的文檔，也可以將其打開，然后在Dreamweaver的“設(shè)計”視圖或“代碼”視圖中編輯該文檔網(wǎng)頁文檔處理4.2.1打開現(xiàn)有文檔方法1在【文檔】窗口中打開選擇的文檔方法3在資源管理器中打開文檔方法2導入Word文檔網(wǎng)頁文檔處理4.2.1頁面屬性頁面屬性是指網(wǎng)頁的一般屬性信息，如：網(wǎng)頁標題、網(wǎng)頁背景顏色、背景圖像、超鏈接顏色、跟蹤圖像等網(wǎng)頁文檔處理4.2.1設(shè)置網(wǎng)頁屬性3設(shè)置網(wǎng)頁外觀屬性2.設(shè)置網(wǎng)頁編碼屬性1.設(shè)置網(wǎng)頁標題屬性4.設(shè)置網(wǎng)頁鏈接屬性5.設(shè)置網(wǎng)頁圖像屬性網(wǎng)頁文檔處理4.2.1文字處理主要包括：輸入文字、設(shè)置文字大小、設(shè)置字體、設(shè)置文本顏色、設(shè)置文本對齊方式等文字處理4.2.2輸入文字打開Dreamweaver8.0之后，然后在需要插入文本的位置單擊鼠標左鍵定位插入點，然后輸入文字若要開始新的一段，按<Enter>鍵即可，對應(yīng)的HTML標簽是<p>若要換行顯示一段內(nèi)容，可以按<Shift+Enter>組合鍵，對應(yīng)的HTML標簽是<br>如果輸入的文字超出一行的范圍，輸入的文本將自動換行文字處理4.2.2輸入連續(xù)空格在Dreamweaver中一般只能輸入一個空格，若要輸入連續(xù)的空格時，可以采用下列方法中的一種文字處理4.2.2輸入連續(xù)空格方法方法1執(zhí)行【編輯/首選參數(shù)】菜單命令，在打開的【首選參數(shù)】對話框中選定“分類”欄中的“常規(guī)”選項，并勾選右邊編輯選項中“允許多個連續(xù)的空格”復選框即可方法3切換到中文輸入法，設(shè)置為全角輸入狀態(tài)，然后在欲連續(xù)輸入空格的位置按空格鍵方法2將光標定位到需要輸入多個空格的位置，切換到代碼視圖，連續(xù)輸入多個“ ”，或者單擊插入工具欄文本分類中的“字符”對象，選擇“不換行空格”下拉菜單選項即可文字處理4.2.2編輯文字內(nèi)容2.設(shè)置文本顏色1.設(shè)置文字標題與段落4.設(shè)置方本對齊方式3.設(shè)置文字字體及大小文字處理4.2.2水平線水平線對于組織信息很有用在頁面上，使用一條或多條水平線能夠以可視方式分隔文本和對象水平線的操作包括如下文字處理4.2.2水平線操作插入水平線將光標移到要插入水平線的位置，執(zhí)行【HTML/插入/水平線】菜單命令，插入一條默認寬度和粗細的水平線設(shè)置水平線顏色選中水平線，單擊屬性面板中的快速標簽編輯器按鈕，打開編輯標簽窗口，鍵入設(shè)置水平線顏色的代碼修改水平線選定插入的水平線，打開屬性面板，設(shè)置水平線的高度、寬度、對齊方式以及是否有陰影等屬性文字處理4.2.2Dreamweaver提供了一個方便的日期對象，該對象使用戶可以以喜歡的格式插入當前日期，還可以選擇在每次保存文件時都自動更新該日期文字處理4.2.2日期對象的操作

2.插入更新日期1.插入日期3.修改已插入日期文字處理4.2.2圖像處理操作包括插入圖像、設(shè)置圖像屬性、插入圖像占位符、插入鼠標經(jīng)過圖像等內(nèi)容圖像處理4.2.3插入圖像方法方法1將光標置于要插入圖像的位置，單擊【插入】工具欄的【圖像】按鈕或選擇【插入/圖像】菜單命令，打開【選擇圖像源文件】對話框方法3當所選圖像文件不在當前站點，在打開的對話框中選擇將圖像文件復制到根文件夾；再打開【復制文件為】對話框，定位到站點的目標文件夾并單擊【保存】按鈕即可方法2在對話框中設(shè)置圖像文件名、文件類型和圖像源的URL；選取存放在站點中的圖像文件，然后單擊【確定】按鈕將圖片插入到指定區(qū)域圖像處理4.2.3在網(wǎng)頁中插入圖像后可以對圖像的各種相關(guān)屬性進行設(shè)置設(shè)置圖像屬性的內(nèi)容較多，常用的操作包括以下內(nèi)容圖像處理4.2.3設(shè)置圖像屬性1.圖像名稱2.圖像尺寸大小3.圖像的源文件4.圖像的超鏈接5.對齊與邊距6.其他屬性圖像處理4.2.3圖像占位符如果還沒有準備好添加到Web頁上的圖像，可以插入圖像占位符先預(yù)占一個圖像位置在Dreamweaver中插入圖像占位符的基本操作圖像處理4.2.3Step1Step2將光標置于要插入圖像占位符的位置，在【插入】工具欄中選擇【圖像占位符】按鈕或選擇【插入/圖像對象/圖像占位符】菜單命令在打開的【圖像占位符】對話框中對圖像的名稱、顏色、寬度、高度、替代文本等屬性進行設(shè)置單擊【確定】按鈕，網(wǎng)頁文檔中即會出現(xiàn)圖像占位符Step3圖像處理4.2.3鼠標經(jīng)過圖像當訪問者移動鼠標使鼠標指針經(jīng)過圖像時，圖像變?yōu)榱硪环鶊D像；而鼠標指針離開時，圖像又恢復為原始圖像這種效果通常用于導航條、圖像互動等圖像處理4.2.3鼠標經(jīng)過圖像由兩幅圖像組成：一是首次載入時顯示的圖像即原始圖像，二是鼠標經(jīng)過后翻轉(zhuǎn)的圖像即鼠標經(jīng)過圖像在創(chuàng)建鼠標經(jīng)過圖像時應(yīng)使用相同大小的兩幅圖像；如果這兩個圖像大小不同，Dreamweaver將自動調(diào)整第二個圖像的大小以匹配第一個圖像的大小圖像處理4.2.3超級鏈接超級鏈接簡稱鏈接，是指從一個網(wǎng)頁指向一個目標的連接關(guān)系，即在Web頁面中插入的指向其它文檔的引用超級鏈接的目標可以是另外的網(wǎng)頁，或者是一張圖片、一個文件、一個程序等超級鏈接可以將任何類型的資源轉(zhuǎn)換為超級鏈接，但最常用的類型是文本鏈接使用超級鏈接4.2.4超級鏈接的外觀多種多樣，可以是導航按鈕、文本、圖片，無論是哪一種格式，只要用鼠標單擊鏈接對象，即可跳轉(zhuǎn)到指定的目標網(wǎng)頁。當鼠標指向鏈接載體時，鏈接載體會發(fā)生一些變化，如鼠標指向文字載體，文字的字體、字號、顏色等會發(fā)生改變，有的帶有下畫線使用超級鏈接4.2.4根據(jù)超級鏈接指向目標文件的不同，超級鏈接可為如下圖所示的三種形式使用超級鏈接4.2.4超級鏈接的類別1

2.錨點超鏈接1.頁面超鏈接3.郵件超鏈接使用超級鏈接4.2.4根據(jù)超級鏈接單擊對象的不同，超級鏈接可以分為如下圖所示的三種形式使用超級鏈接4.2.4超級鏈接的類別22.圖像超鏈接1.文字超鏈接3.圖像映射使用超級鏈接4.2.4創(chuàng)建超鏈接必須先了解鏈接與被鏈接載體的路徑在一個網(wǎng)站中，路徑通常有3種表示方式，如下圖所示使用超級鏈接4.2.4路徑的類別2.根目錄相對路徑1.絕對路徑3.文檔目錄相對路徑使用超級鏈接4.2.4圖像映射圖像映射就是指在一幅圖像中定義若干個區(qū)域(即熱點)，每個區(qū)域中指定一個不同的超鏈接當單擊不同區(qū)域時，可以跳轉(zhuǎn)到相應(yīng)的目標頁面使用超級鏈接4.2.4創(chuàng)建超級鏈接在Dreamweaver中，可以創(chuàng)建多種類型的超級鏈接可創(chuàng)建到文檔、圖像、多媒體文件或軟件的超級鏈接可創(chuàng)建到文檔內(nèi)任意位置的文本或圖像超級鏈接使用超級鏈接4.2.4創(chuàng)建超級鏈接鏈接類型1創(chuàng)建到其它文檔或文件的超級鏈接鏈接類型3創(chuàng)建電子郵件鏈接鏈接類型2創(chuàng)建到文檔內(nèi)的特定位置的超級鏈接使用超級鏈接4.2.4修改超級鏈接可以使用站點的可視化表示形式來修改鏈接，或者通過一次更改將所有鏈接更新到一個特定的文件中使用超級鏈接4.2.4修改超級鏈接修改方式1自動更新超級鏈接修改方式3在整個站點范圍內(nèi)更改超級鏈接修改方式2在站點地圖中修改超級鏈接使用超級鏈接4.2.4Dreamweaver可以快速便捷地向Web站點添加多媒體對象，從而使制作出的網(wǎng)頁圖文并茂，聲色具備使用多媒體對象4.2.5Dreamweaver目前使用的音頻和視頻文件格式包括：音頻：主要為Wav、Midi、Mp3、Aif和Ra等音頻文件格式視頻：主要為RealMedia、WindowsMedia、QuickTime等視頻文件Flash、Shockwave等影片Javaapplet、ActiveX等控件格式使用多媒體對象4.2.5插入媒體對象Dreamweaver文檔中可插入FlashSWF文件或?qū)ο蟆uickTime或Shockwave影片、Javaapplet、ActiveX控件及其它音頻或視頻對象在頁面中插入媒體對象的操作過程如下所示使用多媒體對象4.2.5Step1Step2將插入點放在【文檔】窗口中希望插入該對象的位置在【插入】工具欄的【常用】類別中單擊【媒體】按鈕，再選擇要插入的媒體對象按鈕即可或從【插入/媒體】菜單中選擇適當?shù)拿襟w對象，在打開的【選擇文件】對話框中選擇要插入的媒體文件，單擊【確定】按鈕即可Step3使用多媒體對象4.2.5添加視頻可以通過不同方式和使用不同格式將視頻添加到Web頁面視頻可被用戶下載，也可對視頻進行流式處理，以便在下載它的同時進行播放使用多媒體對象4.2.5添加音頻可以向Web頁添加不同類型和文件格式的聲音添加聲音前，往往先考慮以下因素：添加聲音文件的大小、聲音品質(zhì)、聽眾類型、瀏覽器的差異等向頁面添加音頻文件的操作步驟如下所示使用多媒體對象4.2.5Step1Step2在【設(shè)計】視圖中，將插入點放置在要嵌入文件的地方單擊【插入】工具欄的【媒體】按鈕，然后選擇【插件】圖標或執(zhí)行【插入/媒體/插件】菜單命令在屬性檢查器中，單擊文件夾圖標瀏覽音頻文件，并可通過【文檔】窗口中調(diào)整插件占位符的大小來確定音頻控件在瀏覽器中的大小Step3使用多媒體對象4.2.52框架在網(wǎng)頁布局中的應(yīng)用

4模板在網(wǎng)頁生成中的應(yīng)用

3層在網(wǎng)頁布局中的應(yīng)用1表格在網(wǎng)頁布局中的應(yīng)用網(wǎng)頁布局技術(shù)4.3網(wǎng)頁布局網(wǎng)頁布局是指在頁面上劃分出不同的區(qū)域，按照網(wǎng)頁設(shè)計的原則，將不同的內(nèi)容放置到不同的位置上，并通過色彩調(diào)和出不同的網(wǎng)站基調(diào)，使網(wǎng)頁內(nèi)容形成一個有機的整體，充分表達網(wǎng)站主題的過程表格在網(wǎng)頁布局中的應(yīng)用4.3.1表格表格是用來格式化數(shù)據(jù)的工具，是網(wǎng)頁中常用的信息展示方式，也是頁面布局主要的設(shè)計工具表格創(chuàng)建后，可以對表格進行文字輸入、圖像插入、屬性修改、表格嵌套等操作表格在網(wǎng)頁布局中的應(yīng)用4.3.1表格可以控制文本和圖形在頁面上出現(xiàn)的位置在設(shè)計頁面時，往往要利用表格來定位頁面元素通過設(shè)置表格和單元格的屬性，可實現(xiàn)對頁面元素的準確定位合理地利用表格來布局頁面，有利于協(xié)調(diào)頁面結(jié)構(gòu)的平衡表格在網(wǎng)頁布局中的應(yīng)用4.3.1插入表格的方法：在插入面板中選擇“常用”標簽，點擊按鈕，彈出【插入表格】對話框，設(shè)置相應(yīng)的參數(shù)來插入表格也可以通過選擇【插入/表格】菜單命令打開【插入表格】對話框表格在網(wǎng)頁布局中的應(yīng)用4.3.1【插入表格】對話框表格在網(wǎng)頁布局中的應(yīng)用4.3.1表格元素處理2.拆分單元格1.合并單元格4.刪除行或列3.插入行或列表格在網(wǎng)頁布局中的應(yīng)用4.3.1選擇表格元素2.選擇單元格1.選擇表格對象3.選擇行或列表格在網(wǎng)頁布局中的應(yīng)用4.3.1單元格表格中行與列圍成的區(qū)域稱為單元格在單元格中可以插入文本、圖像等元素，也可以根據(jù)實際的需要對單元格進行合并和拆分對單元格進行拆分的具體的步驟如下所示表格在網(wǎng)頁布局中的應(yīng)用4.3.1Step1Step2將光標放在表格的特定行，單擊【屬性】面板中的【拆分單元格】按鈕，會彈出【拆分單元格】對話框在對話框中將【單元格拆分】后的【行】或【列】單選按鈕選中，在【行數(shù)】或【列數(shù)】文本框中輸入數(shù)值單擊【確定】按鈕，就可以把表格的特定行拆分成指定數(shù)目的單元格Step3表格在網(wǎng)頁布局中的應(yīng)用4.3.1對行或列進行添加與刪除的操作步驟如下所示表格在網(wǎng)頁布局中的應(yīng)用4.3.1Step1Step2選中表格的某一行，右擊彈出快捷菜單，選擇【表格/插入行】命令，此時就會在當前行上方插入一行選擇【行】選項，可設(shè)置插入的行在插入點的上或下；選擇【列】選項，可以設(shè)置插入的列在插入點的前或后Step3選中表格的某一行，右擊彈出快捷菜單，選擇【表格/插入行或列】命令，打開【插入行或列】對話框表格在網(wǎng)頁布局中的應(yīng)用4.3.1將光標置于要刪除行或列的任意一個單元格中，右鍵選擇【表格/刪除行】或【表格/刪除列】命令，或者按下Delete鍵，可將該行或列刪除表格在網(wǎng)頁布局中的應(yīng)用4.3.1單元格作為表格的重要的組成部分，其屬性的設(shè)置影響到表格的外觀將鼠標放到某個單元格內(nèi)，可以通過【屬性】面板對這個單元格進行設(shè)置表格在網(wǎng)頁布局中的應(yīng)用4.3.1單元格屬性設(shè)置1.水平對齊2.垂直對齊3.高度和寬度4.背景圖片5.背景顏色6.邊框顏色表格在網(wǎng)頁布局中的應(yīng)用4.3.1嵌套表格嵌套表格是在當前表格的某一單元格中插入的新表格表格不宜嵌套太多，最多三層；使用的嵌套越多，頁面的瀏覽速度越慢表格在網(wǎng)頁布局中的應(yīng)用4.3.1對嵌套表格可以像對其他表格一樣進行格式設(shè)置嵌套表格的寬度不能任意設(shè)置，應(yīng)由其所在單元格的寬度決定在表格單元格中嵌套表格的基本做法如下所示表格在網(wǎng)頁布局中的應(yīng)用4.3.1Step1Step2單擊現(xiàn)有表格中要插入嵌套表格的那個單元格選擇【插入/表格】菜單命在【插入表格】對話框中對嵌套表格進行設(shè)置Step3表格在網(wǎng)頁布局中的應(yīng)用4.3.1格式化表格格式化表格將對表格進行一定的美化格式化表格的操作步驟如下所示表格在網(wǎng)頁布局中的應(yīng)用4.3.1Step1Step2選中表格，選擇【命令/格式化表格】菜單命彈出【格式化表格】對話框；在對話框的左上角有各種樣式列表，根據(jù)需要進行樣式選擇單擊【確定】按鈕即可按所選的樣式格式化選定表格Step3表格在網(wǎng)頁布局中的應(yīng)用4.3.1表格數(shù)據(jù)導出可以將表格數(shù)據(jù)導出為文本文件表格數(shù)據(jù)導出的操作步驟如下所示表格在網(wǎng)頁布局中的應(yīng)用4.3.1Step1Step2將光標移至表格中的任意一個單元格，選擇【文件/導出/表格】菜單命令，彈出【導出表格】對話框選擇【定界符】下拉列表中的選項，設(shè)置表格導出后各單元格數(shù)據(jù)間的分隔符號，如Tab鍵等；選擇【換行符】下拉列表中的選項，設(shè)置導出表格適用的操作系統(tǒng)類型，通常選Windows單擊【導出】按鈕，彈出【表格導出為】對話框，在文件名后的文本框中輸入導出的文件名及擴展名，單擊【保存】按鈕，完成表格數(shù)據(jù)的導出Step3表格在網(wǎng)頁布局中的應(yīng)用4.3.1表格常用做頁面布局工具，絕大多數(shù)網(wǎng)頁都是用表格輔助布局的Dreamweaver中的表格分為表格與布局表格，表格用于精確控制各種屬性，布局表格用于頁面布局表格在網(wǎng)頁布局中的應(yīng)用4.3.1布局視圖模式Dreamweaver的文檔窗口視圖默認為標準視圖當使用布局表格進行頁面布局時，應(yīng)先將文檔窗口切換到布局視圖模式

表格在網(wǎng)頁布局中的應(yīng)用4.3.1標準視圖切換到布局視圖的方法方法1在插入工具欄中選擇“布局”選項；單擊布局欄中的【布局】按鈕，彈出操作提示信息框，單擊【確定】按鈕，進入布局視圖模式方法2選擇【查看/表格模式/布局表格】菜單命令切換到布局視圖模式表格在網(wǎng)頁布局中的應(yīng)用4.3.1繪制布局表格在布局視圖模式下，單擊【繪制布局表格】按鈕，此時鼠標指針變?yōu)槭中螤钤诰庉媴^(qū)域拖拽鼠標指針，即可繪制出一個布局表格同時布局表格左上角自動出現(xiàn)綠色的布局表格標簽，布局表格邊線周圍出現(xiàn)控制手柄表格在網(wǎng)頁布局中的應(yīng)用4.3.1繪制布局單元格在布局視圖模式下，單擊【繪制布局單元格】按鈕，在布局表格中拖拽鼠標指針即可繪制出一個布局單元格如果要連續(xù)繪制多個布局單元格，需按下Ctrl鍵不放，然后在布局表格中多次拖動鼠標進行繪制。只能在布局表格中繪制布局單元格，布局單元格不能重疊表格在網(wǎng)頁布局中的應(yīng)用4.3.1繪制布局表格界面表格在網(wǎng)頁布局中的應(yīng)用4.3.1操作布局表格與布局單元格為布局單元格添加內(nèi)容將光標定位到要添加內(nèi)容的布局單元格中，直接輸入文本內(nèi)容，或者使用對象面板插入圖片、動畫等對象

對布局表格或布局單元格調(diào)整大小選中布局表格或布局單元格，拖拽控制手柄改變其大??；或選取要調(diào)整的對象，在屬性面板中輸入寬度值和高度值，精確調(diào)整所選對象的大小移動布局表格或布局單元格單擊布局表格頂部的布局表格標簽或單元格的邊線，將其選中；使用鍵盤上的方向鍵，或者拖動鼠標指針，即可將所選移動到指定位置

表格在網(wǎng)頁布局中的應(yīng)用4.3.1框架框架可以將瀏覽器窗口劃分為若干個獨立的區(qū)域，每個區(qū)域分別顯示不同的網(wǎng)頁文檔?？蚣苤饕蚣芗投鄠€框架，框架集的功能是定義一組框架的布局和屬性框架在網(wǎng)頁布局中的應(yīng)用4.3.2框架的組成元素框架集框架集是在一個文檔內(nèi)定義一組框架結(jié)構(gòu)的HTML網(wǎng)頁?？蚣芗x了一頁顯示的框架數(shù)、框架的大小、載入框架的網(wǎng)頁源和其他可定義的屬性等框架頁單個框架頁是指在框架定義的某一區(qū)域中顯示的網(wǎng)頁文件框架在網(wǎng)頁布局中的應(yīng)用4.3.2預(yù)定義框架集Dreamweaver可以自行設(shè)計框架集，也可以從預(yù)定義的庫中選擇已有的框架集后者稱為Dreamweaver系統(tǒng)的預(yù)定義框架集預(yù)定義框架集如下圖所示表格在網(wǎng)頁布局中的應(yīng)用4.3.1使用【框架】按鈕插入預(yù)定義框架集框架在網(wǎng)頁布局中的應(yīng)用4.3.2選擇預(yù)定義的框架集將自動設(shè)置創(chuàng)建布局所需的所有框架集和框架，它是迅速創(chuàng)建基于框架布局的最簡單的方法Dreamweaver中創(chuàng)建預(yù)定義框架集常用的方法如下所示框架在網(wǎng)頁布局中的應(yīng)用4.3.2方法1在“插入”欄的“布局”選項卡中，單擊【框架】按鈕，從預(yù)定義的框架集類型列表中選擇所需的選項單擊【文件/新建】命令，彈出【新建文檔】對話框；從類別列表中選擇“框架集”，從框架集列表中選擇所需的框架集類型，并單擊【創(chuàng)建】按鈕選擇【插入/HTML/框架】菜單命令，從彈出的預(yù)定義框架集類型列表中選擇所需的選項方法2方法3框架在網(wǎng)頁布局中的應(yīng)用4.3.2保存框架網(wǎng)頁當編輯完框架和框架文件后，必須對框架及框架文件進行保存在Dreamweaver中保存框架及框架文件，如果僅像保存普通文件一樣保存框架，只會保存鼠標所定位的框架內(nèi)容，其余的框架內(nèi)容將丟失，因此需要選擇適當?shù)谋４娣椒蚣茉诰W(wǎng)頁布局中的應(yīng)用4.3.2Dreamweaver中對框架及框架文件進行保存的步驟如下所示框架在網(wǎng)頁布局中的應(yīng)用4.3.2Step1Step2選擇菜單命令【文件/保存全部】，整個框架邊框?qū)⒊霈F(xiàn)陰影框，同時彈出【另存為】對話框，要求輸入框架集的文件名單擊【保存】按鈕，出現(xiàn)第二個【另存為】對話框，將有一個框架內(nèi)側(cè)出現(xiàn)陰影，要求輸入該框架的文件名單擊【保存】按鈕，依次對其他框架輸入文件名，直到所有的框架全部命名并保存完畢Step3框架在網(wǎng)頁布局中的應(yīng)用4.3.2設(shè)置框架屬性使用框架屬性面板可以設(shè)置框架的屬性在文檔窗口中按住Alt鍵，然后用鼠標單擊一個框架，即可選中該框架選中【窗口/屬性】菜單命令，打開框架屬性面板，如下圖所示表格在網(wǎng)頁布局中的應(yīng)用4.3.1【框架屬性】面板框架在網(wǎng)頁布局中的應(yīng)用4.3.2框架屬性面板中各個屬性選項如下所示框架在網(wǎng)頁布局中的應(yīng)用4.3.2屬性面板屬性1.框架名稱2.源文件3.不能調(diào)整大小4.邊框5.邊框顏色6.邊界寬度與高度框架在網(wǎng)頁布局中的應(yīng)用4.3.2設(shè)置框架集屬性要顯示框架集的屬性面板，首先單擊框架的邊框，選中框架集，此時屬性面板中將顯示框架集的各種屬性框架集屬性面板中主要的屬性選項如下所示框架在網(wǎng)頁布局中的應(yīng)用4.3.2屬性集面板屬性1.邊框選項2.邊框?qū)挾冗x項3.邊框顏色選項4.行選項5.列選項6.單位選項框架在網(wǎng)頁布局中的應(yīng)用4.3.2框架元素的選擇選擇框架集將鼠標指針移動到整個邊框位置的同時，按住Alt鍵，當鼠標指針變成水平或者垂直雙向箭頭時，單擊邊框即可選中整個框架集選擇單個框架選擇【窗口/框架】菜單命令，打開【框架】面板，在框架面板中單擊需要選擇的框架，該框架的邊界被虛線包圍即表明被選中框架在網(wǎng)頁布局中的應(yīng)用4.3.2超鏈接目標框架超鏈接目標框架是指當單擊超鏈接時，超鏈接引用的目標網(wǎng)頁在哪個框架中顯示設(shè)置超鏈接目標框架的步驟如下框架在網(wǎng)頁布局中的應(yīng)用4.3.2Step1Step2按下Alt鍵，單擊某框架內(nèi)部，選中該框架；在屬性面板的“框架名稱”文本框中輸入該框架的名稱，可以使用默認名稱選擇文本或其他對象，在屬性面板的“鏈接”文本框中輸入鏈接的URL，或通過該框右側(cè)的文件夾按鈕，選擇要鏈接的URL單擊屬性面板的“目標”列表框，從列表中選擇目標框架對象Step3框架在網(wǎng)頁布局中的應(yīng)用4.3.2屬性面板的“目標”列表框中各個目標框架對象的功能含義如下圖所示框架在網(wǎng)頁布局中的應(yīng)用4.3.2_blank_parent_self_top在新的瀏覽器窗口中打開鏈接的文檔，同時保持當前窗口不變在顯示鏈接框架的父框架集中打開鏈接的文檔，同時替換整個框架集在當前框架中打開鏈接，同時替換該框架的內(nèi)容在當前瀏覽器的窗口中打開該鏈接的文檔，同時替換掉整個框架集框架在網(wǎng)頁布局中的應(yīng)用4.3.2mainFrameleftFrame在框架集的主框架中打開鏈接的文檔，同時替換掉主框架中原來所顯示的文檔在框架集的左框架中打開鏈接的文檔，同時替換掉左框架中原來顯示的內(nèi)容在框架集的上框架中打開鏈接的文檔，同時替換掉上框架中原來顯示的文檔topFrame框架在網(wǎng)頁布局中的應(yīng)用4.3.2層層是一種HI‘ML頁面元素，也是一種定位頁面元素的手段層中可以包含文本、圖像、動畫、視頻等任何能放置到HTML文檔中的元素使用層，網(wǎng)頁上的各種元素可以定位在網(wǎng)頁的任意位置，并能以任意方式重疊層在網(wǎng)頁布局中的應(yīng)用4.3.3Dreamweaver可以方便地在頁面上創(chuàng)建層并精確地定位層，還可以創(chuàng)建嵌套的層。一個網(wǎng)頁中可以含有多個層，層的可見性可以任意控制，各個層之間可以重疊，可以定義層之間的層次關(guān)系層在網(wǎng)頁布局中的應(yīng)用4.3.3插入層在文檔窗口的“設(shè)計視圖”中可以直接繪制一個或多個層插入層的方法有2種，一種是通過菜單創(chuàng)建，一種是通過插入面板創(chuàng)建層在網(wǎng)頁布局中的應(yīng)用4.3.3插入層的方法使用菜單命令將插入點放置到需插入層的編輯窗口中，選擇【插入/布局對象/層】菜單命令，將自動在光標處插入一個層使用插入面板在“插入欄”的“布局”選項卡中單擊【繪制層】按鈕，拖動鼠標即可繪制一個層；按下Ctrl鍵并拖動鼠標可繪制多個層

層在網(wǎng)頁布局中的應(yīng)用4.3.3嵌套層在圖層中可以放置網(wǎng)頁中的任何元素，因此在層中也可以包含其他層；這種相互包含的層間的關(guān)系稱為嵌套層嵌套的層成為父層，被嵌套的層成為子層在“層”浮動面板中可以清晰查看層與層之間的嵌套關(guān)系層在網(wǎng)頁布局中的應(yīng)用4.3.3層的基本操作選擇層在文檔窗口中單擊層邊線即可選擇層。按下Shift鍵并單擊其他層，可選取多個層移動層選擇層后，移光標到層的邊框上，光標將變成十字箭頭形狀；按下鼠標左鍵拖拽層，即可將其移到任意位置縮放層可以縮放層的大小方法：選中層后拖拽層四周的控制手柄，即可改變層的大小層在網(wǎng)頁布局中的應(yīng)用4.3.3層的基本操作設(shè)置層屬性單擊選中目標層，屬性面板中能夠設(shè)置層的各類參數(shù)

刪除層在“層”面板或編輯窗口中選擇要刪除的層，按Delete鍵或選擇【編輯/清除】菜單命令，即可刪除該層設(shè)置層選擇【編輯/首選參數(shù)】菜單命令，打開首選參數(shù)對話框，選中“層”選項，指定新建層的默認設(shè)置

層在網(wǎng)頁布局中的應(yīng)用4.3.3層的屬性面板

層在網(wǎng)頁布局中的應(yīng)用4.3.3層屬性面板各屬性1.層編號列表框2.寬和高數(shù)值3.Z軸數(shù)值4.可見性列表框5.背景圖像6.背景顏色層在網(wǎng)頁布局中的應(yīng)用4.3.3【轉(zhuǎn)換層為表格】對話框?qū)釉诰W(wǎng)頁布局中的應(yīng)用4.3.3層轉(zhuǎn)換為表格使用【轉(zhuǎn)換層為表格】對話框能夠設(shè)置轉(zhuǎn)換參數(shù)層轉(zhuǎn)換為表格的方法如下所示層在網(wǎng)頁布局中的應(yīng)用4.3.3Step1Step2在頁面中選中要轉(zhuǎn)化為表格的所有的層選擇【修改/轉(zhuǎn)換/層到表格】菜單命令，打開【轉(zhuǎn)換層為表格】對話框在【轉(zhuǎn)換層為表格】對話框中設(shè)置各類設(shè)置轉(zhuǎn)換參數(shù)，單擊【確定】按鈕即可開始轉(zhuǎn)換Step3層在網(wǎng)頁布局中的應(yīng)用4.3.3層層是一種HTML頁面元素，也是一種定位頁面元素的手段層中可以包含文本、圖像、動畫、視頻等任何能放置到HTML文檔中的元素使用層，網(wǎng)頁上的各種元素可以定位在網(wǎng)頁的任意位置，并能以任意方式重疊模板在網(wǎng)頁布局中的應(yīng)用4.3.4模板模板是一種特殊類型的文檔，主要用于創(chuàng)建多個具有一致風格的網(wǎng)頁，是簡化網(wǎng)站開發(fā)和維護工作的重要工具從模板創(chuàng)建的網(wǎng)頁文檔與該模板始終保持著鏈接關(guān)系，當修改模板時，所有基于該模板的文檔也會被同步更新模板在網(wǎng)頁布局中的應(yīng)用4.3.4創(chuàng)建模板模板必須保存在站點中，創(chuàng)建模板前先要建立站點創(chuàng)建模板時系統(tǒng)會在站點內(nèi)自動生成一個模板文件夾Template，所有的模板文件都保存在該文件夾下，并以.dwt為文件擴展名模板在網(wǎng)頁布局中的應(yīng)用4.3.4創(chuàng)建模版的方法方法1

在文檔窗口中，使用【插入/模板對象/創(chuàng)建模板】菜單命令，在【另存為模板】對話框中輸入新建模板的名稱，單擊【保存】按鈕即可創(chuàng)建一個空白模板文件方法3

由現(xiàn)有文檔保存為擴展名為.dwt的模板

方法2在“插入欄”的“常用”選項卡中單擊【模板】按鈕，從命令選項列表中選擇“創(chuàng)建模板”選項，即可創(chuàng)建一個空白模板文件模板在網(wǎng)頁布局中的應(yīng)用4.3.4方法3是應(yīng)用已有的頁面另存為模板，這是最常用的創(chuàng)建模板的方法，具體的步驟如下所示模板在網(wǎng)頁布局中的應(yīng)用4.3.4Step1Step2打開一個已完成的網(wǎng)頁；刪除頁面中與其他頁面有變化的區(qū)域，留下相同的區(qū)域選擇【文件】另存為模板】菜單命令，彈出【另存為模板】對話框；選擇模板保存的站點與要生成的模板文件名單擊【保存】按鈕，在站點文件下會自動產(chǎn)生一個新的文件夾，模板保存到該文件夾下Step3模板在網(wǎng)頁布局中的應(yīng)用4.3.4可編輯區(qū)域定義打開創(chuàng)建的模板文件，選中作為可編輯區(qū)域的內(nèi)容范圍，用以下兩種方法能夠設(shè)置可編輯區(qū)域

模板在網(wǎng)頁布局中的應(yīng)用4.3.4設(shè)置可編輯區(qū)域的方法方法1在插入工具欄中單擊【模板】按鈕，選擇“可編輯區(qū)域”選項，打開【新建可編輯區(qū)域】對話框；輸入可編輯區(qū)域的名稱，單擊【確定】按鈕即可

方法2選擇【插入/模板對象/可編輯區(qū)域】菜單命令，打開【新建可編輯區(qū)域】對話框；用同樣的方法可在文檔的不同位置創(chuàng)建多個可編輯區(qū)域模板在網(wǎng)頁布局中的應(yīng)用4.3.4可編輯區(qū)域刪除如果想不再使用或更改某個可編輯區(qū)域，可刪除該可編輯區(qū)域刪除的方法為：選取模板中需要取消的可編輯區(qū)域標記，然后選擇【修改/模板/刪除模板標記】菜單命令，即可刪除選中的可編輯區(qū)域模板在網(wǎng)頁布局中的應(yīng)用4.3.4應(yīng)用模板應(yīng)用模板創(chuàng)建的網(wǎng)頁文檔與模板之間自動建立起鏈接關(guān)系當修改模板后，系統(tǒng)自動更新與模板關(guān)聯(lián)的文檔模板在網(wǎng)頁布局中的應(yīng)用4.3.4Step1Step2在頁面中選中要轉(zhuǎn)化為表格的所有的層打開資源面板，單擊【模板】按鈕，打開模板列表；右擊要應(yīng)用的模板，選擇【從模板新建】快捷菜單命令，即可新建基于選定模板的網(wǎng)頁文檔，并自動在文檔窗口中打開該文檔打開要應(yīng)用模板的文檔；選擇【窗口/資源】菜單命令，打開“資源”面板；單擊面板左側(cè)的【模板】按鈕，打開模板列表；在列表中選中要應(yīng)用的模板，單擊【應(yīng)用】按鈕即可Step3模板在網(wǎng)頁布局中的應(yīng)用4.3.4模板分離如果不想在當前文檔中附有模板格式，或不希望文檔與模板保持關(guān)聯(lián)，可以選擇【修改/模板/從模板中分離】菜單命令，將文檔與模板分離開來分離后的文檔成為普通網(wǎng)頁文檔，它的任意區(qū)域都可進行編輯模板在網(wǎng)頁布局中的應(yīng)用4.3.4行為是Dreamweaver中一個非常有特色的功能，它的使用可以使用戶不需要手工編寫代碼，就可以設(shè)計出具有相當?shù)慕换スδ芎蛣討B(tài)效果的頁面行為的應(yīng)用4.4行為行為是指在網(wǎng)頁中運行的一系列動作，行為將JavaScript代碼放在文檔中以允許訪問者與Web頁進行交互，通過用戶的操作引起某個任務(wù)的執(zhí)行。行為的實質(zhì)是內(nèi)置在Dreamweaver中的JavaScript函數(shù)庫行為能實現(xiàn)用戶與網(wǎng)頁間的交互，通過某個動作來觸發(fā)某項事件行為的應(yīng)用4.4事件事件是由瀏覽器為每個頁面元素定義的，通常瀏覽器都會提供一組事件事件總是與動作相關(guān)聯(lián)。當訪問者與網(wǎng)頁進行交互時，瀏覽器生成事件并非所有的事件都是交互的行為的應(yīng)用4.4行為基本操作1.添加行為2.修改行為3.刪除行為4.選擇事件5.調(diào)整順序6.獲取更多的行為行為的應(yīng)用4.4常見行為常見行為可以通過在行為面板中單擊加號按鈕打開；主要行為包括打開瀏覽器窗口、交換圖像、拖動層、顯示彈出式菜單、彈出信息、檢查表單、控制Flash、播放聲音、轉(zhuǎn)到URL等行為的應(yīng)用4.4標準行為事件不同的瀏覽器支持的事件類型是不同的，瀏覽器版本越高支持的事件類型越多，所以設(shè)計帶有行為的網(wǎng)頁之前，要充分考慮到瀏覽者的瀏覽器版本和類型不同的瀏覽器都支持的通用事件稱為標準行為事件行為的應(yīng)用4.4根據(jù)用途，Dreamweaver包括以下常用的事件種類窗口事件鼠標事件鍵盤事件表單事件其他事件行為的應(yīng)用4.4窗口事件窗口事件與窗口的行為相關(guān)常見的窗口事件列舉如下所示行為的應(yīng)用4.4事件1事件2OnAbort在瀏覽器中停止了加載網(wǎng)頁文檔的操作時發(fā)生的事件OnMove移動窗口或者幀時發(fā)生的事件Onload選定的對象出現(xiàn)在瀏覽器上時發(fā)生的事件事件3行為的應(yīng)用4.4OnResize訪問者改變窗口大小時發(fā)生的事件事件4事件5OnUnload訪問者退出網(wǎng)頁文檔時發(fā)生的事件行為的應(yīng)用4.4鍵盤事件鍵盤事件與鼠標的各種行為相關(guān)常見的鍵盤事件列舉如下所示行為的應(yīng)用4.4事件1事件2onKeyDown：按下鍵盤上某個鍵，觸發(fā)該事件onKeyPress：按下鍵盤上某個鍵后又釋放掉該鍵，觸發(fā)該事件onKeyUp：釋放被按下的鍵時，觸發(fā)該事件事件3行為的應(yīng)用4.4鼠標事件鼠標事件與鼠標的各種行為相關(guān)常見的鼠標事件列舉如下所示行為的應(yīng)用4.4事件1onClick：鼠標單擊頁面元素時觸發(fā)onDblClick：鼠標雙擊頁面元素時觸發(fā)onMouseDown：按下鼠標左鍵觸發(fā)該事件onMouseMove：鼠標指針在特定頁面元素上移動時，觸發(fā)該事件事件4事件2事件3行為的應(yīng)用4.4事件5事件6onMouseOut：鼠標指針移出了特定頁面元素的范圍時，觸發(fā)該事件onMouseOver：鼠標指針第一次移到特定頁面元素范圍內(nèi)時，觸發(fā)該事件onMouseUp：把按下的鼠標左鍵釋放時觸發(fā)該事件事件7行為的應(yīng)用4.4表單事件表單事件與表單的各種行為相關(guān)常見的表單事件列舉如下所示行為的應(yīng)用4.4事件1事件2OnAfterUpdate更新表單文檔的內(nèi)容時發(fā)生的事件OnBeforeUpdate改變表單文檔的項目時發(fā)生的事件OnChange訪問者修改表單文件的初始值時發(fā)生的事件事件3行為的應(yīng)用4.4事件4事件5OnReset將表單文件重設(shè)置為初始值時發(fā)生的事件OnSubnit訪問者傳送表單文檔時發(fā)生的事件OnSelect訪問者選定文件字段中的內(nèi)容時發(fā)生的事件事件6行為的應(yīng)用4.4其他事件其他事件是指除以上分類事件之外的那些事件常見的其他事件列舉如下所示行為的應(yīng)用4.4事件1OnError在加載文檔的過程中，發(fā)生錯誤時發(fā)生的事件OnFilterChange運用于選定元素的字段發(fā)生變化時發(fā)生的事件OnfinishMarquee用功能來顯示的內(nèi)容結(jié)束時發(fā)生的事件OnStartMarquee開始應(yīng)用功能時發(fā)生的事件事件4事件2事件3行為的應(yīng)用4.4事件5onAfterPrint：打印結(jié)束時觸發(fā)該事件onBeforePrint：打印開始前觸發(fā)該事件onFocus：當指定元素通過用戶的交互行為獲得焦點時，觸發(fā)該事件onBlur：當指定元素停止從用戶的交互行為上獲得焦點時，觸發(fā)該事件事件8事件6事件7行為的應(yīng)用4.4表單表單是一個容器，可以存放各種表單元素，如按鈕、文本域等。表單是網(wǎng)站管理者和瀏覽者之間交流的平臺。通過表單，可以把用戶輸入的信息提交給服務(wù)器表單的定義是和動態(tài)網(wǎng)頁相關(guān)的，用表單實現(xiàn)的動態(tài)網(wǎng)頁必須具備以下兩個條件：具有表單對象的頁面和表單后的腳本程序表單操作4.5表單頁面在瀏覽網(wǎng)頁時常常會看到用來收集信息的頁面，頁面中包含一些按鈕、文本框和列表等，這就是表單頁面表單操作4.5表單對象表單中的元素很多，統(tǒng)稱為表單對象。這些對象分別用于實現(xiàn)不同的功能插入表單對象的操作步驟如下所示表單操作4.5Step1Step2把鼠標定位在文檔區(qū)中要插入表單對象的位置選擇【插入/表單】菜單命令，打開表單對象子菜單，選擇要插入的表單對象；或者把“插入”面板切換到“表單”項并選擇需要的表單對象在彈出的對話框中進行相應(yīng)的設(shè)置，完成表單對象的插入Step3表單操作4.5定義表單使用【表單】面板中的相應(yīng)按鈕能夠定義表單或使用【插入】菜單下的【表單】子菜單中的命令也能夠定義表單其中所定義表單的功能如下所示表單操作4.5表單添加所有其他表單對象的基本容器添加用來輸入文本的單行文本框添加用來輸入文本的多行文本框添加一個用來存儲用戶數(shù)據(jù)的域，該區(qū)域用戶不可見隱藏域文本字段文本區(qū)域表單操作4.5復選框添加用于多項選擇的復選框添加用于在網(wǎng)頁中多個項之間進行單項選擇的單選按鈕一次添加多個單選按鈕添加以列表或菜單形式出現(xiàn)的選項列表/菜單單選按鈕單選按鈕組表單操作4.5跳轉(zhuǎn)菜單添加一個用于跳轉(zhuǎn)到其他文件的菜單列表添加空白文本域和瀏覽按鈕，作用是使用戶瀏覽本地磁盤上的文件，并上傳到服務(wù)器添加一個用于替換提交按鈕的圖像添加文本按鈕，點擊觸發(fā)服務(wù)器端腳本處理程序按鈕文件域圖像域表單操作4.5模板表單是存放其他表單對象的容器，用來限制其他表單對象的插入范圍表單是存放其他表單對象的容器，其它表單對象一般應(yīng)該插入到表單中制作表單網(wǎng)頁的大致步驟如下所示表單操作4.5Step1Step2在頁面中插入表單在表單中插入其他表單對象使用表格等排版工具對所有對象進行調(diào)整Step3表單操作4.5表單的插入和表單的屬性設(shè)置是表單定義的兩個重要步驟插入表單的步驟如下所示表單操作4.5把鼠標定位在文檔區(qū)中需要插入表單的位置使用【插入/表單/表單】菜單命令或點擊【表單】按鈕，插入后的表單在文檔中以虛線顯示表單操作4.5文檔插入表單后，切換到代碼視圖，可看到表單的源代碼如下：<formid="form1"name="form1"method="post"action=""></form>表單操作4.5標簽<form>和</form>之間為存放表單內(nèi)容的位置只能在<form>和</form>標簽之間插入所有表單對象表單操作4.5插入表單后，需要進行表單屬性的設(shè)置設(shè)置表單屬性時，需要選中表單或把插入點放到表單內(nèi)部，打開屬性面板，對屬性面板的各個選項進行設(shè)定屬性面板的主要選項列舉如下表單操作4.5表單名稱動作為表單命名以識別表單在文本框中輸入或者瀏覽處理該表單的動態(tài)頁或腳本程序，用于處理表單提交的數(shù)據(jù)設(shè)置處理該表單的動態(tài)頁或腳本程序的打開方式目標表單操作4.5設(shè)置表單數(shù)據(jù)傳輸?shù)椒?wù)器的方法，可用默認、POST及GET3個選項方法MIME類型通常和POST方法配合使用，用于指定對提交給服務(wù)器進行處理的數(shù)據(jù)使用MIME編輯類型表單操作4.5表單CSS(CascadingStyleSheets)，譯為層疊樣式表，是一系列格式設(shè)置規(guī)則，用來控制Web頁面內(nèi)容的顯示方式，是控制一個文檔中某一文本區(qū)域外觀的一組格式屬性使用CSS設(shè)置頁面格式時，可將內(nèi)容與表現(xiàn)形式分開CSS樣式表的應(yīng)用4.6CSS可以一次性對若干個文檔所有的樣式進行控制，同HTML樣式相比，使用CSS樣式表的好處在于它可以同時連接多個文檔，并且當CSS樣式有所更新或被修改以后，所有應(yīng)用了該樣式表的文檔都會被自動更新CSS樣式表的應(yīng)用4.6使用CSS樣式不僅可以輕松地網(wǎng)頁中的對象產(chǎn)生動態(tài)效果，同時還簡化了HTML中各種繁瑣的標簽，使得各個標簽的屬性更具有一般性和通用性CSS樣式甚至超越了Web頁面本身的顯示功能，將樣式擴展到多媒體上

CSS樣式的主要功能與特點如下所示CSS樣式表的應(yīng)用4.6功能特點1可以方便地為網(wǎng)頁中的任何元素設(shè)置不同的背景顏色和背景圖像可以精確地控制網(wǎng)頁中各元素的位置可以為網(wǎng)頁中各元素設(shè)置過濾器，從而產(chǎn)生如陰影、模糊、透明等效果可以與腳本語言結(jié)合，從而產(chǎn)生各種動態(tài)效果功能特點2功能特點3功能特點4CSS樣式表的應(yīng)用4.6由于CSS格式是HTML代碼，所以網(wǎng)頁打開的速度非?？炜梢愿`活地控制網(wǎng)頁中文字的字體、顏色、大小、間距、風格和位置可以靈活地設(shè)置一段文字的行高、縮進，并可以為其加入三維效果的邊框功能特點1功能特點5功能特點7功能特點6CSS樣式表的應(yīng)用4.6樣式表的腳本語法結(jié)構(gòu)是：

HTML標記{標記屬性：屬性值；標志屬性：屬性值；標志屬性：屬性值；……}CSS樣式表的應(yīng)用4.6CSS的類型重定義標簽的CSS自定義CSSCSS選擇器樣式CSS樣式表的應(yīng)用4.6自定義CSS自定義樣式最大的特點就是具有可選擇性，可以由用戶自由決定將該樣式應(yīng)用于哪些元素選擇樣式應(yīng)用范圍實質(zhì)是在要使用樣式的一對標簽之間添加一個class=”classname”語句CSS樣式表的應(yīng)用4.6重定義標簽的CSS重定義標