DreamweaverCS6簡介

1、 本章簡介本章簡介： 網(wǎng)頁是網(wǎng)站最基本的組成部分，網(wǎng)站之間網(wǎng)頁是網(wǎng)站最基本的組成部分，網(wǎng)站之間并不是雜亂無章的，它們通過各種鏈接相互關(guān)并不是雜亂無章的，它們通過各種鏈接相互關(guān)聯(lián)，從而描述相關(guān)的主題或?qū)崿F(xiàn)相同的目的。聯(lián)，從而描述相關(guān)的主題或?qū)崿F(xiàn)相同的目的。本章講述網(wǎng)站的建設(shè)基礎(chǔ)，包括本章講述網(wǎng)站的建設(shè)基礎(chǔ)，包括IPIP地址與域名、地址與域名、動態(tài)數(shù)據(jù)庫開發(fā)以及動態(tài)數(shù)據(jù)庫開發(fā)以及Dreamweaver CS6Dreamweaver CS6的工作的工作界面，最后重點講述了管理站點的方式。界面，最后重點講述了管理站點的方式。第第1 1章初識章初識Dreamweaver CS6Dreamweaver C

2、S6課堂學(xué)習(xí)目標(biāo)課堂學(xué)習(xí)目標(biāo)Dreamweaver CS6Dreamweaver CS6的工作界面的工作界面創(chuàng)建網(wǎng)站框架創(chuàng)建網(wǎng)站框架管理站點文件和文件夾管理站點文件和文件夾管理站點管理站點網(wǎng)頁文件頭設(shè)置網(wǎng)頁文件頭設(shè)置多屏幕多屏幕1.11.1Dreamweaver CSDreamweaver CS6 6的工作界面的工作界面友善的開始頁面友善的開始頁面不同風(fēng)格的界面不同風(fēng)格的界面伸縮自如的功能面板伸縮自如的功能面板多文檔的編輯界面多文檔的編輯界面新穎的新穎的“插入插入”面板面板更完整的更完整的CSS功能功能多屏幕多屏幕1.1.11.1.1友善的開始頁面友善的開始頁面啟動啟動Dreamweaver

3、CS6Dreamweaver CS6后首先看到的后首先看到的畫面是開始頁面，供用戶選擇新建文件畫面是開始頁面，供用戶選擇新建文件的類型，或打開已有的文檔等。的類型，或打開已有的文檔等。對于老用戶可能不太習(xí)慣開始頁面，對于老用戶可能不太習(xí)慣開始頁面，可選擇可選擇“編輯編輯 首選參數(shù)首選參數(shù)”命令，彈出命令，彈出“首選參數(shù)首選參數(shù)”對話框，取消選擇對話框，取消選擇“顯示顯示歡迎屏幕歡迎屏幕”復(fù)選框，單擊復(fù)選框，單擊“確定確定”按鈕按鈕完成設(shè)置。當(dāng)用戶再次啟動完成設(shè)置。當(dāng)用戶再次啟動Dreamweaver Dreamweaver CS6CS6后，將不再顯示開始頁面。后，將不再顯示開始頁面。1.1.2

4、1.1.2不同風(fēng)格的界面不同風(fēng)格的界面Dreamweaver CS6Dreamweaver CS6的操作界面新穎淡雅，布的操作界面新穎淡雅，布局緊湊，為用戶提供了一個輕松、愉悅的開發(fā)局緊湊，為用戶提供了一個輕松、愉悅的開發(fā)環(huán)境。環(huán)境。若用戶想修改操作界面的風(fēng)格，切換到自若用戶想修改操作界面的風(fēng)格，切換到自己熟悉的開發(fā)環(huán)境，可選擇己熟悉的開發(fā)環(huán)境，可選擇 “ “窗口窗口 工作區(qū)工作區(qū)布局布局”命令，彈出其子菜單，在子菜單中選擇命令，彈出其子菜單，在子菜單中選擇“編碼器編碼器”或或“設(shè)計器設(shè)計器”命令。選擇其中一種命令。選擇其中一種界面風(fēng)格，頁面會發(fā)生相應(yīng)的改變。界面風(fēng)格，頁面會發(fā)生相應(yīng)的改變。1

5、.1.31.1.3伸縮自如的功能面板伸縮自如的功能面板在浮動面板的右上方單擊按鈕在浮動面板的右上方單擊按鈕 ，可以，可以隱藏或展開面板。如果用戶覺得工作區(qū)不隱藏或展開面板。如果用戶覺得工作區(qū)不夠大，可以將鼠標(biāo)指針放在文檔編輯窗口夠大，可以將鼠標(biāo)指針放在文檔編輯窗口右側(cè)與面板交界的框線處，當(dāng)鼠標(biāo)指針呈右側(cè)與面板交界的框線處，當(dāng)鼠標(biāo)指針呈雙向箭頭時拖曳鼠標(biāo)，調(diào)整工作區(qū)的大小雙向箭頭時拖曳鼠標(biāo)，調(diào)整工作區(qū)的大小。若用戶需要更大的工作區(qū)，可以將面板。若用戶需要更大的工作區(qū)，可以將面板隱藏。隱藏。1.1.41.1.4多文檔的編輯界面多文檔的編輯界面Dreamweaver Dreamweaver CS6C

6、S6提供了多文檔的編提供了多文檔的編輯界面，將多個文檔整合在一起，方便輯界面，將多個文檔整合在一起，方便用戶在各個文檔之間切換。用戶可以單用戶在各個文檔之間切換。用戶可以單擊文檔編輯窗口上方的選項卡，切換到擊文檔編輯窗口上方的選項卡，切換到相應(yīng)的文檔。通過多文檔的編輯界面，相應(yīng)的文檔。通過多文檔的編輯界面，用戶可以同時編輯多個文檔。用戶可以同時編輯多個文檔。1.1.51.1.5新穎的新穎的“插入插入”面板面板Dreamweaver Dreamweaver CS6CS6的的“插入插入”面面板在菜單欄的下方。板在菜單欄的下方。 “ “常用常用”、“布局布局”、“表單表單”、“數(shù)據(jù)數(shù)據(jù)”、“Spry

7、”Spry”、“jQuery Mobile”jQuery Mobile”、“InContext Editing”InContext Editing”、 “ “文文本本”、“收藏夾收藏夾” ” 9 9個選項卡，將個選項卡，將不同功能的按鈕分門別類地放在不不同功能的按鈕分門別類地放在不同的選項卡中。同的選項卡中。1.1.61.1.6更完整的更完整的CSSCSS功能功能傳統(tǒng)的傳統(tǒng)的HTMLHTML所提供的樣式及排版所提供的樣式及排版功能非常有限，因此，現(xiàn)在復(fù)雜的網(wǎng)功能非常有限，因此，現(xiàn)在復(fù)雜的網(wǎng)頁版面主要靠頁版面主要靠CSSCSS樣式來實現(xiàn)。而樣式來實現(xiàn)。而CSSCSS樣式表的功能較多，語法比較復(fù)雜

8、，樣式表的功能較多，語法比較復(fù)雜，需要一個很好的工具軟件有條不紊地需要一個很好的工具軟件有條不紊地整理復(fù)雜的整理復(fù)雜的CSSCSS源代碼，并適時地提源代碼，并適時地提供輔助說明。供輔助說明。Dreamweaver Dreamweaver CS6CS6就提就提供了這樣方便有效的供了這樣方便有效的CSSCSS功能。功能。1.21.2創(chuàng)建網(wǎng)站框架創(chuàng)建網(wǎng)站框架站點管理器站點管理器創(chuàng)建文件夾創(chuàng)建文件夾定義新站點定義新站點創(chuàng)建和保存網(wǎng)頁創(chuàng)建和保存網(wǎng)頁1.2.11.2.1站點管理器站點管理器站點管理器的主要功能包括新建站點、編輯站點、站點管理器的主要功能包括新建站點、編輯站點、復(fù)制站點、刪除站點以及導(dǎo)入或?qū)?/p>

9、出站點。若要管理站復(fù)制站點、刪除站點以及導(dǎo)入或?qū)С稣军c。若要管理站點，必須打開點，必須打開“管理站點管理站點”對話框。對話框。啟用啟用“管理站點管理站點”對話框有以下幾種方法。對話框有以下幾種方法。選擇選擇“站點站點 管理站點管理站點”命令。命令。選擇選擇“窗口窗口 文件文件”命令，啟用命令，啟用“文件文件”控制面板控制面板，選擇，選擇“文件文件”選項卡，單擊控制面板左側(cè)的下拉選項卡，單擊控制面板左側(cè)的下拉列表，選擇列表，選擇“管理站點管理站點”命令。命令。1.2.21.2.2創(chuàng)建文件夾創(chuàng)建文件夾建立站點前，要先在站點管理器中規(guī)劃站點文件夾。建立站點前，要先在站點管理器中規(guī)劃站點文件夾。新建文

10、件夾的具體操作步驟如下。新建文件夾的具體操作步驟如下。（1 1）在站點管理器的右側(cè)窗口中單擊選擇站點。）在站點管理器的右側(cè)窗口中單擊選擇站點。（2 2）通過以下幾種方法新建文件夾。）通過以下幾種方法新建文件夾。 選擇選擇“文件文件 新建文件夾新建文件夾”命令。命令。用鼠標(biāo)右鍵單擊站點，在彈出的菜單中選擇用鼠標(biāo)右鍵單擊站點，在彈出的菜單中選擇“新建文件夾新建文件夾” ” 命令。命令。（3 3）輸入新文件夾的名稱。）輸入新文件夾的名稱。1.2.31.2.3定義新站點定義新站點建立好站點文件夾后用戶就可定義新站點了。在建立好站點文件夾后用戶就可定義新站點了。在DreamweaverDreamweav

11、er CS6CS6中，站點通常包含兩部分，即本地站點和遠程中，站點通常包含兩部分，即本地站點和遠程站點。本地站點是本地計算機上的一組文件，遠程站點是遠程站點。本地站點是本地計算機上的一組文件，遠程站點是遠程 Web Web 服務(wù)器上的一個位置。用戶將本地站點中的文件發(fā)布到網(wǎng)服務(wù)器上的一個位置。用戶將本地站點中的文件發(fā)布到網(wǎng)絡(luò)上的遠程站點，使公眾可以訪問它們。在絡(luò)上的遠程站點，使公眾可以訪問它們。在Dreamweaver Dreamweaver CS6CS6中中創(chuàng)建創(chuàng)建 Web Web 站點，通常先在本地磁盤上創(chuàng)建本地站點，然后創(chuàng)建站點，通常先在本地磁盤上創(chuàng)建本地站點，然后創(chuàng)建遠程站點，再將這些

12、網(wǎng)頁的副本上傳到一個遠程遠程站點，再將這些網(wǎng)頁的副本上傳到一個遠程 Web Web服務(wù)器上服務(wù)器上，使公眾可以訪問它們。，使公眾可以訪問它們。創(chuàng)建本地站點的步驟創(chuàng)建本地站點的步驟本地站點主要選項的作用本地站點主要選項的作用1.2.41.2.4創(chuàng)建和保存網(wǎng)頁創(chuàng)建和保存網(wǎng)頁選擇選擇“文件文件 新建新建”命令，啟用命令，啟用“新建文檔新建文檔”對話框，創(chuàng)建空白網(wǎng)頁。對話框，創(chuàng)建空白網(wǎng)頁。網(wǎng)頁設(shè)計完成后，選擇網(wǎng)頁設(shè)計完成后，選擇“文件文件 保保存存”命令，彈出命令，彈出“另存為另存為”對話框，設(shè)對話框，設(shè)置后單擊置后單擊“保存保存”按鈕，將該文檔保存按鈕，將該文檔保存在站點文件夾中。在站點文件夾中。1

13、.31.3管理站點管理站點打開站點打開站點編輯站點編輯站點復(fù)制站點復(fù)制站點刪除站點刪除站點導(dǎo)入和導(dǎo)出站點導(dǎo)入和導(dǎo)出站點1.3.11.3.1打開站點打開站點當(dāng)要修改某個網(wǎng)站的內(nèi)容時，首先要打當(dāng)要修改某個網(wǎng)站的內(nèi)容時，首先要打開站點。打開站點就是在各站點間進行切開站點。打開站點就是在各站點間進行切換。打開站點的具體操作步驟如下。換。打開站點的具體操作步驟如下。（1 1）啟動）啟動Dreamweaver Dreamweaver CS6CS6。（2 2）選擇）選擇“窗口窗口 文件文件”命令，啟用命令，啟用“文件文件”控制面板，在其中選擇要打開的控制面板，在其中選擇要打開的站點名，打開站點。站點名，打開

14、站點。1.3.21.3.2編輯站點編輯站點有時用戶需要修改站點的一些設(shè)置，此時需要編輯站點。有時用戶需要修改站點的一些設(shè)置，此時需要編輯站點。例如，修改站點的默認圖像文件夾的路徑，其具體的操作步驟例如，修改站點的默認圖像文件夾的路徑，其具體的操作步驟如下。如下。（1 1）選擇）選擇“站點站點 管理站點管理站點”命令，啟用命令，啟用“管理站點管理站點”對話框。對話框。（2 2）在對話框中，選擇要編輯的站點名，單擊）在對話框中，選擇要編輯的站點名，單擊“編輯編輯”按按鈕，彈出鈕，彈出“站點定義站點定義”對話框，選擇對話框，選擇“高級高級”選項卡，此時可選項卡，此時可根據(jù)需要進行修改，單擊根據(jù)需要進

15、行修改，單擊“確定確定”按鈕完成設(shè)置，回到按鈕完成設(shè)置，回到“管理管理站點站點”對話框。對話框。（3 3）如果不需要修改其他站點，可單擊）如果不需要修改其他站點，可單擊“完成完成”按鈕關(guān)閉按鈕關(guān)閉“管理站點管理站點”對話框。對話框。1.3.31.3.3復(fù)制站點復(fù)制站點復(fù)制站點可省去重復(fù)建立多個結(jié)構(gòu)相同站點的操作步復(fù)制站點可省去重復(fù)建立多個結(jié)構(gòu)相同站點的操作步驟，可以提高用戶的工作效率。在驟，可以提高用戶的工作效率。在“管理站點管理站點”對話框中對話框中可以復(fù)制站點，其具體操作步驟如下?？梢詮?fù)制站點，其具體操作步驟如下。（1 1）在）在“管理站點管理站點”對話框左側(cè)的站點列表中選擇要對話框左側(cè)的

16、站點列表中選擇要復(fù)制的站點，單擊復(fù)制的站點，單擊“復(fù)制復(fù)制”按鈕進行復(fù)制。按鈕進行復(fù)制。（2 2）用鼠標(biāo)左鍵雙擊新復(fù)制出的站點，在彈出的）用鼠標(biāo)左鍵雙擊新復(fù)制出的站點，在彈出的“站站點定義為點定義為”對話框中更改新站點的名稱。對話框中更改新站點的名稱。1.3.41.3.4刪除站點刪除站點 刪除站點只是刪除刪除站點只是刪除Dreamweaver Dreamweaver CS6CS6同本地站點間的關(guān)系，同本地站點間的關(guān)系，而本地站點包含的文件和文件夾仍然保存在磁盤原來的位置上而本地站點包含的文件和文件夾仍然保存在磁盤原來的位置上。換句話說，刪除站點后，雖然站點文件夾保存在計算機中，。換句話說，刪除

17、站點后，雖然站點文件夾保存在計算機中，但在但在Dreamweaver Dreamweaver CS6CS6中已經(jīng)不存在此站點。例如，在按下列步中已經(jīng)不存在此站點。例如，在按下列步驟刪除站點后，在驟刪除站點后，在“管理站點管理站點”對話框中，不存在該站點的名對話框中，不存在該站點的名稱。稱。在在“管理站點管理站點”對話框中刪除站點的具體操作步驟如下。對話框中刪除站點的具體操作步驟如下。（1 1）在）在“管理站點管理站點”對話框左側(cè)站點列表中選擇要刪除站點。對話框左側(cè)站點列表中選擇要刪除站點。 （2 2）單擊）單擊“刪除刪除”按鈕即可刪除選擇的站點。按鈕即可刪除選擇的站點。1.3.51.3.5導(dǎo)入

18、和導(dǎo)出站點導(dǎo)入和導(dǎo)出站點 如果在計算機之間移動站點，或者與如果在計算機之間移動站點，或者與其他用戶共同設(shè)計站點，可通過其他用戶共同設(shè)計站點，可通過 Dreamweaver Dreamweaver CS6CS6的導(dǎo)入和導(dǎo)出站點功能的導(dǎo)入和導(dǎo)出站點功能實現(xiàn)。導(dǎo)出站點功能是將站點導(dǎo)出為實現(xiàn)。導(dǎo)出站點功能是將站點導(dǎo)出為“.ste”“.ste”格式文件，然后在其他計算機上格式文件，然后在其他計算機上將其導(dǎo)入到將其導(dǎo)入到Dreamweaver Dreamweaver CS6CS6中。中。導(dǎo)出站點導(dǎo)出站點導(dǎo)入站點導(dǎo)入站點1.41.4網(wǎng)頁文件頭設(shè)置網(wǎng)頁文件頭設(shè)置插入搜索關(guān)鍵字插入搜索關(guān)鍵字插入作者和版權(quán)信息插

19、入作者和版權(quán)信息設(shè)置刷新時間設(shè)置刷新時間設(shè)置描述信息設(shè)置描述信息設(shè)置頁面中所有鏈接的基準(zhǔn)鏈接設(shè)置頁面中所有鏈接的基準(zhǔn)鏈接設(shè)置當(dāng)前文件與其他文件的關(guān)聯(lián)性設(shè)置當(dāng)前文件與其他文件的關(guān)聯(lián)性1.4.11.4.1插入搜索關(guān)鍵字插入搜索關(guān)鍵字 在萬維網(wǎng)上通過搜索引擎查找資料時，搜索引擎自動在萬維網(wǎng)上通過搜索引擎查找資料時，搜索引擎自動讀取網(wǎng)頁中讀取網(wǎng)頁中標(biāo)簽的內(nèi)容，所以網(wǎng)頁中的搜索關(guān)鍵字標(biāo)簽的內(nèi)容，所以網(wǎng)頁中的搜索關(guān)鍵字非常重要，它可以間接地宣傳網(wǎng)站，提高訪問量。但搜索非常重要，它可以間接地宣傳網(wǎng)站，提高訪問量。但搜索關(guān)鍵字并不是字?jǐn)?shù)越多越好，因為有些搜索引擎限制索引關(guān)鍵字并不是字?jǐn)?shù)越多越好，因為有些搜索引

20、擎限制索引的關(guān)鍵字或字符的數(shù)目，當(dāng)超過了限制的數(shù)目時，它將忽的關(guān)鍵字或字符的數(shù)目，當(dāng)超過了限制的數(shù)目時，它將忽略所有的關(guān)鍵字，所以最好只使用幾個精選的關(guān)鍵字。一略所有的關(guān)鍵字，所以最好只使用幾個精選的關(guān)鍵字。一般情況下，關(guān)鍵字是對網(wǎng)頁的主題、內(nèi)容、風(fēng)格或作者等般情況下，關(guān)鍵字是對網(wǎng)頁的主題、內(nèi)容、風(fēng)格或作者等內(nèi)容的概括。內(nèi)容的概括。1.4.21.4.2插入作者和版權(quán)信息插入作者和版權(quán)信息要設(shè)置網(wǎng)頁的作者和版權(quán)信息，要設(shè)置網(wǎng)頁的作者和版權(quán)信息，可選擇可選擇“插入插入 HTML HTML 文件頭標(biāo)文件頭標(biāo)簽簽 Meta” Meta”命令，啟用命令，啟用“META”“META”對對話框。話框。1.4

21、.31.4.3設(shè)置刷新時間設(shè)置刷新時間 要指定載入頁面刷新或者轉(zhuǎn)到其他頁面的時間，可設(shè)要指定載入頁面刷新或者轉(zhuǎn)到其他頁面的時間，可設(shè)置文件頭部的刷新時間項，具體操作步驟如下。置文件頭部的刷新時間項，具體操作步驟如下。（1 1）選中文檔窗口中的）選中文檔窗口中的“代碼代碼”視圖，將鼠標(biāo)指針視圖，將鼠標(biāo)指針放在放在標(biāo)簽中，選擇標(biāo)簽中，選擇“插入插入 HTML HTML 文件頭標(biāo)簽文件頭標(biāo)簽 刷新刷新”命令，啟用命令，啟用“刷新刷新”對話框。對話框。（2 2）在）在“刷新刷新”對話框中設(shè)置刷新時間。對話框中設(shè)置刷新時間。1.4.41.4.4設(shè)置描述信息設(shè)置描述信息 搜索引擎也可通過讀取搜索引擎也可通

22、過讀取 標(biāo)簽的說明內(nèi)容來查找標(biāo)簽的說明內(nèi)容來查找信息，但說明信息主要是設(shè)計者對網(wǎng)頁內(nèi)容的詳細說明，信息，但說明信息主要是設(shè)計者對網(wǎng)頁內(nèi)容的詳細說明，而關(guān)鍵字可以讓搜索引擎盡快搜索到網(wǎng)頁。設(shè)置網(wǎng)頁說明而關(guān)鍵字可以讓搜索引擎盡快搜索到網(wǎng)頁。設(shè)置網(wǎng)頁說明信息的具體操作步驟如下。信息的具體操作步驟如下。（1 1）選中文檔窗口中的）選中文檔窗口中的“代碼代碼”視圖，將鼠標(biāo)指針放視圖，將鼠標(biāo)指針放在在標(biāo)簽中，選擇標(biāo)簽中，選擇“插入插入 HTML HTML 文件頭標(biāo)簽文件頭標(biāo)簽 說說明明”命令，啟用命令，啟用“說明說明”對話框。對話框。（2 2）在）在“說明說明”對話框中設(shè)置說明信息。對話框中設(shè)置說明信息。1.4.51.4.5設(shè)置頁面中所有鏈接的基準(zhǔn)鏈接設(shè)置頁面中所有鏈接的基準(zhǔn)鏈接 基準(zhǔn)鏈接類似于相對路徑，若要設(shè)置網(wǎng)頁文檔中所有基準(zhǔn)鏈接類似于相對路徑，若要設(shè)置網(wǎng)頁文檔中所有鏈接都以某個鏈接為基準(zhǔn)，可添加一個