網(wǎng)頁設(shè)計(jì)與制作第二章

2

DreamweaverCS6基礎(chǔ)2.1

DreamweaverCS6的主要功能2.2DreamweaverCS6的安裝、卸載與啟動(dòng)2.3DreamweaverCS6的工作界面2.4創(chuàng)建和管理站點(diǎn)2.5站點(diǎn)管理綜合實(shí)例2.1DreamweaverCS6的主要功能（1）實(shí)時(shí)視圖（2）針對(duì)Ajax和JavaScript框架的代碼提示（3）相關(guān)文件和代碼導(dǎo)航器（4）InContextEditing（5）CSS最佳做法（6）HTML數(shù)據(jù)集（7）AdobePhotoshop智能對(duì)象（8）Subversion集成（9）新的用戶界面2.2DreamweaverCS6的安裝、卸載與啟動(dòng)若要使用DreamweaverCS6制作網(wǎng)頁，首先要將DreamweaverCS6安裝到計(jì)算機(jī)中，然后才能使用該軟件制作網(wǎng)頁。本節(jié)主要介紹DreamweaverCS6的安裝、卸載與啟動(dòng)。2.2.1安裝DreamweaverCS6①打開DreamweaverCS6軟件的安裝目錄。②在安裝目錄下雙擊【Setup】文件圖標(biāo)，執(zhí)行安裝程序。③安裝程序初始化完成后，進(jìn)入歡迎界面。④接受協(xié)議。⑤更改程序的默認(rèn)安裝位置。⑥進(jìn)入安裝進(jìn)度界面。⑦安裝完成后，建議選擇【以后注冊(cè)】按鈕。2.2.2卸載DreamweaverCS6卸載操作步驟如下：①通過操作系統(tǒng)的【控制面板】，啟動(dòng)【添加和卸載程序】，在該界面中找到DreamweaverCS6的程序信息，選擇并單擊【卸載】按鈕。②點(diǎn)擊【卸載】按鈕，進(jìn)入卸載過程界面。③卸載完成后，在下一個(gè)界面中單擊【完成】按鈕，即完成了DreamweaverCS6的卸載操作。如果用戶電腦上安裝有其他專用卸載工具軟件，也可以通過這些工具軟件進(jìn)行卸載，操作方法與上述步驟基本相同。2.2.3DreamweaverCS6的啟動(dòng)DreamweaverCS6的常用啟動(dòng)方法如下：（1）標(biāo)準(zhǔn)啟動(dòng)方式通過執(zhí)行【開始】|【所有程序】|【AdobeDreamweaverCS6】命令來啟動(dòng)。（2）桌面快捷方式啟動(dòng)（3）直接載入要編輯的文檔2.3DreamweaverCS6的工作界面2.3.1工作區(qū)布局（1）工作區(qū)布局分類DreamweaverCS6提供了多種工作區(qū)布局風(fēng)格，最常用的是【設(shè)計(jì)器】和【編碼器】?jī)煞N布局風(fēng)格。（2）歡迎屏幕用戶可在歡迎屏幕對(duì)話框中創(chuàng)建新文檔，或者打開最近使用過的文檔；（3）設(shè)計(jì)器工作區(qū)布局當(dāng)新建或打開一個(gè)網(wǎng)頁后，DreamweaverCS6會(huì)顯示如下圖的窗口。①應(yīng)用程序欄（A）——通常稱為菜單欄。②文檔工具欄（B）——提供各種文檔窗口視圖。③文檔窗口（C）——顯示當(dāng)前創(chuàng)建和編輯的文檔。④工作區(qū)布局切換（D）——用于切換工作區(qū)布局。⑤面板（E）——幫助用戶監(jiān)控和修改工作。⑥屬性檢查器（F）——用于查看和更改所選對(duì)象或文本的各種屬性。⑦標(biāo)簽選擇器（G）——位于狀態(tài)欄中，顯示當(dāng)前選定內(nèi)容的標(biāo)簽層次結(jié)構(gòu)。⑧文件面板（H）——用于管理文件和文件夾。此外，還有一些需要進(jìn)行相應(yīng)設(shè)置后才會(huì)出現(xiàn)的工具欄或面板，具體如下：標(biāo)準(zhǔn)工具欄、編碼工具欄、樣式呈現(xiàn)工具欄2.3.2常用工具介紹（1）主菜單【文件】：提供文件管理功能。【編輯】：用于文件編輯操作?！静榭础浚河糜诓榭磳?duì)象?！静迦搿浚河糜诓迦敫鞣N頁面元素?！拘薷摹浚河糜谛薷捻撁嬖亍！靖袷健浚河糜谶M(jìn)行文本格式和段落格式的設(shè)置?！久睢浚簠R總了所有的附加命令項(xiàng)，如錄制命令、擴(kuò)展管理等?！菊军c(diǎn)】：用于站點(diǎn)的創(chuàng)建和管理?！敬翱凇浚河糜诖蜷_或關(guān)閉面板?！編椭浚禾峁〥reamweaver的聯(lián)機(jī)幫助、技術(shù)支持等。（2）插入面板通過【插入】面板，能夠方便地將各種類型的元素插入頁面中。【插入】面板所包含的選項(xiàng)如下：【常用】：包括鏈接類、圖像、表格、模板和標(biāo)簽類以及一些特殊的頁面元素如水平線、日期、腳本等?！静季帧浚喊ū砀?、Div標(biāo)簽、框架以及Spry對(duì)象等，還可以在【標(biāo)準(zhǔn)】/【擴(kuò)展】視圖模式之間進(jìn)行切換?！颈韱巍浚禾峁┯糜趧?chuàng)建表單容器和插入表單對(duì)象的工具按鈕?！緮?shù)據(jù)】：提供插入Spry數(shù)據(jù)對(duì)象和其他動(dòng)態(tài)元素的按鈕，例如記錄集、重復(fù)區(qū)域、插入記錄表單?！維pry】：提供一些用于構(gòu)建Spry頁面的按鈕，包括Spry數(shù)據(jù)對(duì)象和構(gòu)件?！綢nContextEditing】：包含供生成InContext編輯頁面的按鈕，包括用于可編輯區(qū)域、重復(fù)區(qū)域和管理CSS類的按鈕?！疚谋尽浚禾峁┻M(jìn)行文本格式和列表格式設(shè)置的各種按鈕，以及插入特殊字符的按鈕?！臼詹貖A】：用于將【插入】面板中最常用的按鈕分組并組織到某一公共位置。（3）文檔窗口文檔窗口顯示當(dāng)前正在編輯的網(wǎng)頁文檔。DreamweaverCS6提供了三種文檔窗口視圖?！驹O(shè)計(jì)】視圖：提供可視化的頁面布局和編輯界面。在此界面中，用戶可通過拖動(dòng)等操作完成網(wǎng)頁元素的編輯和添加?！敬a】視圖：提供編輯HTML、JavaScript、服務(wù)器語言等代碼的手工編碼界面。【拆分】視圖：可在同一個(gè)窗口中同時(shí)顯示同一文檔的【設(shè)計(jì)】視圖和【代碼】視圖。此方式綜合了【設(shè)計(jì)】視圖和【代碼】視圖的長(zhǎng)處。文檔工具欄：通常位于文檔窗口的上方。視圖方式切換按鈕：用于控制文檔窗口的視圖方式。文檔標(biāo)題：用于顯示和修改當(dāng)前文檔的標(biāo)題。文件管理：用于文件的上傳、存回等文件管理操作。在瀏覽器中預(yù)覽/調(diào)試：用于在瀏覽器中預(yù)覽當(dāng)前文檔。刷新設(shè)計(jì)視圖：在【代碼】視圖下進(jìn)行更改后，單擊該按鈕。視圖選項(xiàng)：用于在文檔窗口添加或取消標(biāo)尺、網(wǎng)格線、輔助線、文件頭內(nèi)容等。驗(yàn)證標(biāo)記：用于檢查文檔中標(biāo)記使用的正確性。檢查瀏覽器兼容性：用于檢查所編輯文檔的跨瀏覽器的兼容性?？梢暬恚河糜陲@示或隱藏各種可視化助理。②文檔編輯區(qū)：用戶用來編輯、修改文檔的區(qū)域。在【設(shè)計(jì)】視圖中，可實(shí)現(xiàn)網(wǎng)頁元素的可視化添加和修改；在【代碼】視圖中，可輸入HTML代碼或腳本代碼。③狀態(tài)欄：位于文檔窗口的底部，提供當(dāng)前文檔的相關(guān)信息，如圖所示。（4）屬性面板【屬性】面板又稱屬性檢查器，一般顯示在文檔窗口的下方。用于顯示選中的網(wǎng)頁元素的屬性，用戶可利用它查看和修改屬性值。選擇不同的頁面元素，【屬性】面板顯示的內(nèi)容也有所不同。單擊該面板右下角的“△”或“△”按鈕，可縮小或展開【屬性】面板；單擊該面板上部框線，可最大化或最小化【屬性】面板。（5）面板組在DreamweaverCS6窗口的右側(cè)是集成化的面板組，通常包括【CSS樣式】、【AP元素】、【文件】、【資源】、【標(biāo)簽檢查器】等。主菜單的【窗口】菜單中列出了所有的面板名，通過勾選或取消勾選某面板名，可在面板組中顯示或移除該面板。單擊面板標(biāo)題，可以展開或折疊該面板；單擊面板組窗口右側(cè)的按鈕，可以最小化或恢復(fù)整個(gè)面板組。（6）其他工具欄DreamweaverCS6提供了樣式呈現(xiàn)、文檔和標(biāo)準(zhǔn)工具欄。啟動(dòng)方法：執(zhí)行【查看】|【工具欄】命令，在【工具欄】子菜單中選取或取消某個(gè)工具欄選項(xiàng)，視圖中會(huì)對(duì)應(yīng)顯示或隱藏該工具欄。2.4創(chuàng)建和管理站點(diǎn)

2.4.1站點(diǎn)概述（1）站點(diǎn)文件夾和文件①站點(diǎn)文件夾。站點(diǎn)實(shí)質(zhì)上就是一個(gè)文件夾。一個(gè)成功的網(wǎng)站，應(yīng)該能夠很清楚地將網(wǎng)站的主題和特色傳達(dá)給每一位訪問者。②站點(diǎn)文件。在站點(diǎn)中，文件是指直接訪問站點(diǎn)時(shí)可以瀏覽的網(wǎng)頁；資料則是指制作網(wǎng)頁時(shí)所使用的各種資源，當(dāng)然，這些資源大多也是以文件的形式保存的。由于站點(diǎn)中的文件眾多，合理地使用文件名也就變得非常重要。在DreamweaverCS6中，應(yīng)避免使用中文文件名，因?yàn)楹芏郬eb服務(wù)器安裝的是英文操作系統(tǒng)，不能對(duì)中文文件名提供支持，從而導(dǎo)致瀏覽錯(cuò)誤或訪問失敗。（2）站點(diǎn)類型站點(diǎn)包括遠(yuǎn)端站點(diǎn)和本地站點(diǎn)兩類。①遠(yuǎn)端站點(diǎn)。建立網(wǎng)站的最終目的是要將網(wǎng)站發(fā)布到互聯(lián)網(wǎng)上，因此需要在Web服務(wù)器上建立相應(yīng)的站點(diǎn)。通常，將存儲(chǔ)在Web服務(wù)器上的站點(diǎn)稱為遠(yuǎn)端站點(diǎn)。②本地站點(diǎn)。DreamweaverCS6可以對(duì)遠(yuǎn)端站點(diǎn)中的文檔進(jìn)行編輯、管理和維護(hù)，但受到網(wǎng)絡(luò)速度穩(wěn)定性的制約，這種方式不是很方便。通常的做法：先在本地計(jì)算機(jī)上建立一個(gè)站點(diǎn)，完成網(wǎng)站的設(shè)計(jì)與開發(fā)工作，調(diào)試成功后，再上傳到Web服務(wù)器上。這種在本地計(jì)算機(jī)上建立的站點(diǎn)，稱為本地站點(diǎn)。為便于管理和維護(hù)站點(diǎn)，本地站點(diǎn)和遠(yuǎn)端站點(diǎn)一般采用同名的文件夾，兩者之間的聯(lián)系如圖所示。本地站點(diǎn)和遠(yuǎn)端站點(diǎn)關(guān)系示意圖2.4.2站點(diǎn)的建立和管理（1）創(chuàng)建本地站點(diǎn)建立本地站點(diǎn)，應(yīng)對(duì)以下參數(shù)進(jìn)行設(shè)置：站點(diǎn)命名、站點(diǎn)存儲(chǔ)位置，確定是否使用服務(wù)器技術(shù)和是否使用遠(yuǎn)程服務(wù)器等。執(zhí)行【站點(diǎn)】|【新建站點(diǎn)】命令，彈出【站點(diǎn)設(shè)置對(duì)象】對(duì)話框。在“站點(diǎn)”類別中，為Dreamweaver站點(diǎn)選擇本地站點(diǎn)文件夾、設(shè)置站點(diǎn)名稱，如MYWEB。其中，站點(diǎn)名稱將顯示在“文件”面板中的站點(diǎn)下拉列表中，但不會(huì)在瀏覽器中顯示。本地站點(diǎn)文件夾的選擇，可以直接在文本框中輸入文件夾路徑和文件夾名，單擊【保存】按鈕，即可完成本地站點(diǎn)的創(chuàng)建站點(diǎn)設(shè)置對(duì)象在“站點(diǎn)設(shè)置對(duì)象”對(duì)話框中，還有服務(wù)器、版本控制、高級(jí)設(shè)置幾個(gè)類別，它們的主要功能分別如下?服務(wù)器：允許指定遠(yuǎn)程服務(wù)器和測(cè)試服務(wù)器。這個(gè)配置是可選配置，如果不需要本地測(cè)試或編輯直接上傳到web服務(wù)器，可以忽略這一項(xiàng)配置。?版本控制：是可選設(shè)置，可以設(shè)置使用Subversion獲取和存回文件。?高級(jí)設(shè)置：是可選設(shè)置，其中包含多個(gè)類別，默認(rèn)打開“本地信息”類別，如圖2-19所示?！澳J(rèn)圖像文件夾“用于設(shè)置默認(rèn)的存儲(chǔ)站點(diǎn)圖像文件的文件夾;“站點(diǎn)范用媒體查詢文件”用于設(shè)置站點(diǎn)的外部CSS樣式表文件：“鏈接相對(duì)于”表示指向其他資源或頁面的鏈接時(shí)，創(chuàng)建的鏈接類型默認(rèn)為“文檔”或者“站點(diǎn)根目錄"；“WebURI”表示Dreamweaver將使用WebURI創(chuàng)建站點(diǎn)根目錄相對(duì)鏈接，并在使用鏈接檢查器時(shí)驗(yàn)證這些鏈接：勾選“區(qū)分大小寫的鏈接檢查”表示在Dreamweaver檢查鏈接時(shí)，將檢查鏈接的大小寫與文件名的大小寫是否相匹配，此選項(xiàng)用于文件名區(qū)分大小寫的UNIX系統(tǒng)；勾選“啟用緩存”將創(chuàng)建本地緩存以提高鏈接和站點(diǎn)管理任務(wù)的速度。站點(diǎn)高級(jí)設(shè)置（2）站點(diǎn)管理站點(diǎn)創(chuàng)建后，用戶可在網(wǎng)站設(shè)計(jì)過程中對(duì)站點(diǎn)進(jìn)行管理操作。執(zhí)行【站點(diǎn)】|【管理站點(diǎn)】命令，彈出【管理站點(diǎn)】對(duì)話框，如圖所示。：進(jìn)入新建站點(diǎn)的流程。：打開選中的站點(diǎn)流程，對(duì)其各項(xiàng)設(shè)置進(jìn)行修改。：建立一個(gè)站點(diǎn)副本。：刪除選中的站點(diǎn)。：將站點(diǎn)導(dǎo)出，以站點(diǎn)文件（擴(kuò)展名為.ste）的形式保存到其他位置。如若在某臺(tái)計(jì)算機(jī)上建立了站點(diǎn)，要想在其他計(jì)算機(jī)上也能編輯該站點(diǎn)，則須將該站點(diǎn)以站點(diǎn)文件的形式導(dǎo)出，連同站點(diǎn)文件夾一起存儲(chǔ)，在目標(biāo)計(jì)算機(jī)上再導(dǎo)入該站點(diǎn)文件。：用于導(dǎo)入站點(diǎn)文件。2.4.3站點(diǎn)文件管理建立站點(diǎn)后，通過【文件】面板中的【文件】選項(xiàng)卡可對(duì)該站點(diǎn)中的文件進(jìn)行管理，包括完成文件或文件夾的新建、打開、復(fù)制、重命名、刪除等操作。在“站點(diǎn)和本地資源”列表框中選擇站點(diǎn)后，其下方的列表框中將顯示所選站點(diǎn)的文件資源，如圖所示。2.4.4站點(diǎn)上傳在設(shè)置了本地站點(diǎn)和遠(yuǎn)端站點(diǎn)的信息后，就可以進(jìn)行站點(diǎn)文件的上傳與下載了。（1）上傳站點(diǎn)文件①在DreamweaverCS6中設(shè)置本地站點(diǎn)和遠(yuǎn)程服務(wù)器的信息。本地站點(diǎn)的信息一般在創(chuàng)建站點(diǎn)時(shí)已經(jīng)設(shè)置好，但此過程中一般沒有設(shè)置遠(yuǎn)程信息。遠(yuǎn)程服務(wù)器的信息可執(zhí)行【站點(diǎn)】|【管理站點(diǎn)】命令，打開【站點(diǎn)設(shè)置對(duì)象】對(duì)話框，選擇【服務(wù)器】選項(xiàng)卡左下角+號(hào)添加新服務(wù)器進(jìn)行設(shè)置，如圖所示。服務(wù)器信息設(shè)置【訪問】列表框中有“無”“FTP”“本地/網(wǎng)絡(luò)”等多個(gè)選項(xiàng)。建議設(shè)置為【本地/網(wǎng)絡(luò)】項(xiàng)。采用此項(xiàng)設(shè)置的另一個(gè)好處是無需聯(lián)網(wǎng)，就可模擬文件的上傳和下載。圖中勾選了【啟用存回和取出】復(fù)選框，所以【取出名稱】是必須填寫的，否則將不能正常工作。②在【文件】面板中打開要進(jìn)行文件上傳操作的站點(diǎn)，并單擊上傳文件按鈕“”，在彈出的對(duì)話框中單擊【確定】按鈕，將進(jìn)行文件上傳，如圖所示。（