《Dreamweaver8和Flash8案例教程》第7章 站點與鏈接.ppt

1、第7章 站點與鏈接,7.1 【案例21】修改“跟我學電腦”站點,7.1.1 學習目標 修改“跟我學電腦”站點的屬性后，“站點”窗口的顯示效果如圖7-1-1所示。在該站點中定義了主頁后，可以在“站點”窗口的左欄中顯示出“跟我學電腦”網(wǎng)站的結(jié)構圖，右欄中顯示網(wǎng)頁中的文件。 7.1.2 操作過程,圖7-1-1 修改屬性后“站點”窗口的顯示效果,7.1.3 相關知識,1建立新站點 （1）在Dreamweaver的主窗口中單擊“站點”“管理站點”菜單命令，彈出“管理站點”對話框，如圖7-1-3所示。,（2）單擊“管理站點”對話框中的“新建”按鈕，彈出“新建”快捷菜單。在快捷菜單中，單擊“FTP”菜單命令

2、，彈出“站點定義為”（高級）對話框（打開“高級”選項卡），如圖7-1-4所示。,（3）在“站點名稱”文本框內(nèi)輸入站點的名稱。在“本地根文件夾”文本框內(nèi)輸入站點在本主機硬盤上的存儲位置，即路徑和文件夾名稱。,（4）在“HTTP地址”文本框內(nèi)輸入上傳站點地址的URL，也可不輸入內(nèi)容。 （5）選中“啟用緩存”復選框后，可加速鏈接的更新速度。,（6）單擊“確定”按鈕后，返回“管理站點”對話框。在對話框的左邊的列表框中，將列出剛創(chuàng)建的站點名稱。單擊“完成”按鈕，即可返回Dreamweaver主窗口。 （7）單擊“文件”面板內(nèi)第一個下拉列表框中的其他站點名稱，可以顯示其他站點的結(jié)構和文件。,單擊“窗口”“

3、文件”菜單命令，即可彈出“文件”面板，如圖7-1-2所示。單擊“文件”面板的標準工具欄內(nèi)的“擴展/折疊”按鈕 ，即可彈出“站點”窗口，如圖7-1-1所示。這時該窗口中會出現(xiàn)新建站點的結(jié)構與文檔、文件夾的名字。再單擊“站點”窗口標準工具欄內(nèi)的“展開/折疊”按鈕 ，又可回到“文件”面板?！拔募泵姘搴汀罢军c”窗口的特點如下。,2“文件”面板和“站點”窗口,（1）在“文件”面板和“站點”窗口內(nèi)可以執(zhí)行標準的文件操作。將鼠標指針移到“文件”面板內(nèi)或“站點”窗口的本地文件顯示欄內(nèi)，單擊鼠標右鍵，可以彈出它的快捷菜單，利用該菜單可以創(chuàng)建文件夾、創(chuàng)建文件、移動文件、刪除文件、打開文件和文件重命名等。,（2）

4、“站點”窗口內(nèi)有兩欄，左邊是“地圖”視圖欄，右邊是“本地文件”欄。用鼠標拖曳兩欄之間的分割條，可以調(diào)整兩欄的大小比例，甚至取消其中一個欄。,（3）單擊“站點”窗口內(nèi)的“站點地圖”按鈕 右下角的黑色箭頭，可彈出一個菜單。單擊該菜單中的“僅地圖”菜單命令，可使右邊的“本地文件”欄消失。單擊該菜單中的“地圖和文件”菜單命令，可使右邊的“本地文件”欄顯示，即切換到“地圖和文件”狀態(tài)。,（4）單擊“站點”窗口內(nèi)的“站點文件”按鈕 ，可使“站點”窗口只顯示“本地文件”欄，但左邊的欄不消失，只是沒有“地圖”視圖。,7.2.1 學習目標 本實例的目的是將“跟我學電腦”網(wǎng)站中的index.htm網(wǎng)頁作為主頁，然

5、后將各個實例頁面與該網(wǎng)頁使用鏈接的形式串聯(lián)起來，最終形成一個完整的網(wǎng)站。建立“跟我學電腦”網(wǎng)頁與各個子頁面間的鏈接后，該網(wǎng)頁的顯示效果如圖7-2-1所示。,7.2 【案例22】建立“跟我學電腦”網(wǎng)頁與各子頁面間的鏈接,圖7-2-1 建立各個子頁面鏈接后的“跟我學電腦”網(wǎng)頁,在該頁面中，列出了前面各章中制作的各個網(wǎng)頁實例的名稱，單擊其中任意一個名稱，即可鏈接到相應的頁面。,鏈接的定義是：單擊HTML文件（叫做源文件）中的一些文字（叫做熱字）或圖像，即可用瀏覽器顯示相應的HTML或圖像文件（叫做目標文件）等內(nèi)容。也可以說，在這些源文件的文字或圖像與相應的目標文件的HTML和圖像文件建立了鏈接。 7

6、.2.2 操作過程,1文字或圖像與外部HTML和圖像文件的鏈接 （1）利用“屬性”欄內(nèi)“鏈接”文本框和文件夾按鈕 建立鏈接,7.2.3 相關知識,用鼠標拖曳選中源文件中要鏈接的文字或選中要鏈接的圖像。 單擊“屬性”面板中的“鏈接”欄中的文件夾按鈕 ，彈出“選擇文件”對話框，利用該對話框選擇要鏈接的HTML文件或圖像文件（即目標文件）。也可以直接在文本框內(nèi)輸入要鏈接的HTML文件或圖像文件的路徑與文件名。使用路徑時，一定要注意相對路徑與絕對路徑的使用方法，通常最好使用相對路徑。,（2）利用“屬性”欄內(nèi)“鏈接”欄的指向圖標 建立鏈接 在網(wǎng)頁編輯窗口內(nèi)，同時打開要建立鏈接的源文件和要鏈接的目標文件（

7、HTML文件），如圖7-2-2所示。,圖7-2-2 利用“屬性”欄內(nèi)“鏈接”欄的指向圖標,建立鏈接,選中建立鏈接的源文件中的文字或圖像（如選中圖7-2-2中左邊網(wǎng)頁中的文字）。 用鼠標拖曳文字或圖像“屬性”欄內(nèi)“鏈接”欄的指向圖標 到圖7-2-2中右邊網(wǎng)頁編輯窗口內(nèi)，這時會產(chǎn)生一個從指向圖標 指向目標文件的箭頭，如圖7-2-2所示。然后松開鼠標左鍵，即可完成鏈接。,（3）利用“文件”面板的鏈接方法 彈出“文件”面板，使要鏈接的目標文件名字出現(xiàn)在“文件”面板內(nèi)。同時在網(wǎng)頁編輯窗口內(nèi)打開建立鏈接的源文件。 選中網(wǎng)頁編輯窗口內(nèi)建立鏈接的源文件中的文字或圖像（如選中圖7-2-3中左邊網(wǎng)頁編輯窗口內(nèi)的圖

8、像）。,圖7-2-3 利用“文件”面板的鏈接方法,用鼠標拖曳文字或圖像“屬性”欄內(nèi)“鏈接”欄的指向圖標 移到圖7-2-3中“文件”面板內(nèi)要鏈接的目標文件（01.htm），這時會產(chǎn)生一個從指向圖標 指向目標文件的箭頭。當目標文件名字周圍出現(xiàn)矩形框時，松開鼠標左鍵，即可完成鏈接。,（4）利用“站點”窗口的鏈接方法一 打開“站點”窗口，使要鏈接的目標文件名字出現(xiàn)在“站點”窗口右邊的“站點文件”欄內(nèi)，使源文件出現(xiàn)在“站點”窗口左邊的“地圖”視圖欄內(nèi)。,選中“站點”窗口左邊“地圖”視圖欄內(nèi)建立鏈接的源文件圖標，此時源文件圖標右上方會出現(xiàn)一個指向圖標 ，如圖7-2-4所示。,圖7-2-4 利用“站點”窗口

9、的鏈接方法,如果沒有出現(xiàn)指向圖標 ，可在源文件圖標上單擊鼠標右鍵，彈出其快捷菜單，再單擊菜單中的“顯示/隱藏鏈接”菜單選項，即可使指向圖標 顯示出來。,用鼠標拖曳“站點”窗口左邊“地圖” 視圖欄內(nèi)的指向圖標 到圖7-2-4中“站點”窗口右邊框架內(nèi)要鏈接的目標文件。這時，會產(chǎn)生一個從指向圖標 指向目標文件的箭頭。當目標文件名字周圍出現(xiàn)矩形框時，松開鼠標左鍵，即可完成鏈接。,（5）利用“站點”窗口的鏈接方法二 用鼠標右鍵單擊源文件圖標，彈出它的快捷菜單，單擊該菜單中的“鏈接到已有文件”菜單命令，彈出“選擇HTML文件”對話框，利用它可以選擇要鏈接的目標文件。,如果單擊源文件圖標快捷菜單中的“鏈接到

10、新文件”菜單命令，會彈出“鏈接到新文件”對話框，如圖7-2-5所示。利用它輸入要鏈接的HTML文件名字、標題和鏈接文本，單擊“確定”按鈕，即可建立一個新的已鏈接的HTML文件。,圖7-2-5 “鏈接到新文件”對話框,上述方法產(chǎn)生的鏈接會在源文件內(nèi)自動產(chǎn)生一個熱字和標題字，熱字的內(nèi)容就是目標文件的名字或“鏈接到新文件”對話框中輸入的文字。可以編輯、修改熱字的內(nèi)容，但要先輸入新的內(nèi)容，然后再刪除原內(nèi)容。,當頁面的內(nèi)容很長時，在瀏覽器中查看某一部分的內(nèi)容會很麻煩，這時可以在要查看內(nèi)容的地方加一個定位標記，即錨點（也做叫錨記）。這樣，可以建立頁面內(nèi)文字或圖像與錨點的鏈接，單擊頁面內(nèi)文字或圖像后，瀏覽器

11、中會迅速顯示錨點處的內(nèi)容。也可以建立頁面內(nèi)文字或圖像與其他HTML文件中的錨點的鏈接。在頁面內(nèi)設置錨點的方法如下。,2文字或圖像與HTML文件錨點的鏈接,（1）單擊頁面內(nèi)要設置錨點的地方，將光標移至此處。再單擊“插入”（常用）面板內(nèi)的“命名錨記”按鈕 ，彈出“命名錨記”對話框，如圖7-2-6所示。,圖7-2-6 “命名錨記”對話框,（2）在“錨記名稱”文本框內(nèi)輸入錨點的標記名稱（例如MD1）。再單擊“確定”按鈕，退出該對話框。同時，在頁面光標處會產(chǎn)生一個錨點標記 。如果看不到該標記，可以單擊“查看”“可視化助理”“不可見元素”菜單選項。 在瀏覽器內(nèi)不會顯示錨點標記。,（3）選中頁面內(nèi)的文字或圖

12、像，再按照下述的方法之一建立它們與錨點的鏈接。 在“屬性”欄內(nèi)的“鏈接”文本框內(nèi)輸入“#”和錨點的名字。例如，輸入“#MD1” ，即可完成選中的文字或圖像與錨點的鏈接。,用鼠標拖曳“鏈接”欄的指向圖標 到目標錨點上，再松開鼠標左鍵，即可完成選中的文字或圖像與錨點的鏈接，如圖7-2-7所示。,圖7-2-7 拖曳指向圖標,建立與錨點的鏈接,如果選中的是文字，則按住Shift鍵，同時將鼠標指針移到選中的文字上，按下鼠標左鍵再拖曳，此時鼠標指針會變?yōu)轭愃朴谥赶驁D標 。接著拖曳指向圖標 與錨點圖標重合，如圖7-2-8所示，再松開鼠標左鍵，即可完成選中的文字與錨點的鏈接。,圖7-2-8 拖曳鼠標建立與錨點

13、的鏈接,7.3.1 學習目標 將“跟我學電腦”站點下所有網(wǎng)頁中的mailto:郵件鏈接全部替換成后，“跟我學電腦”網(wǎng)頁（部分）的顯示效果如圖7-3-1所示。,7.3 【案例23】檢查“跟我學電腦”網(wǎng)站中的鏈接,圖7-3-1 “跟我學電腦”網(wǎng)頁（部分）的顯示效果,當站點的許多文件與一個文件（如一個外部文件）的鏈接失效時，不必一個一個地進行修改，可以成批地進行鏈接的替換。這種鏈接替換不但對站點內(nèi)目標文件有效，而且對站點外部目標文件也有效。 7.3.2 操作過程,1鏈接的檢查與修復 （1）自動檢查鏈接 當用戶在“站點”窗口的“站點文件”欄內(nèi)將一個文件移到其他文件夾內(nèi)時，會自動彈出一個“更新文件”對話

14、框，如圖7-3-3所示。,7.3.3 相關知識,該對話框內(nèi)會顯示出與移動文件有鏈接的文件的路徑與文件名，并詢問是否更新對這個文件的鏈接。單擊“更新”按鈕，表示更新鏈接；單擊“不更新”按鈕，表示保持原來的鏈接。,（2）人工檢查鏈接 檢查鏈接的操作方法如下。 選中“站點”窗口的“站點文件”欄內(nèi)的文件夾或文件的圖標。 單擊“站點”窗口內(nèi)的“站點”“檢查站點范圍的鏈接”菜單命令，系統(tǒng)開始自動對選定的文件進行鏈接的檢查，檢查后會彈出 “鏈接檢查器”對話框，如圖7-3-4所示。,圖7-3-4 “鏈接檢查器”對話框,“鏈接檢查器”對話框中的“顯示”下拉列表框內(nèi)有3個選項，選擇不同選項時，其下面的顯示框內(nèi)顯示

15、的文件內(nèi)容會不一樣。3個選項的含義如下。,“斷掉的鏈接”：選擇該選項后，顯示框內(nèi)將顯示鏈接失效的文件名與目標文件。 “外部鏈接”：選擇該選項后，顯示框內(nèi)將顯示包含外部鏈接的文件名字與它的路徑，但不能對它們進行檢查。,“孤立的文件”：選擇該選項后，顯示框內(nèi)將顯示孤立的文件名字與它的路徑。所謂孤立的文件，就是沒有與其他文件鏈接的文件。 “鏈接檢查器”對話框的底部給出了相應的提示信息。,（3）修復鏈接 在檢查完鏈接后，可在“鏈接檢查器”對話框中進行修復鏈接的工作。其操作方法如下。 雙擊“文件”面板內(nèi)的源文件圖標，彈出網(wǎng)頁編輯器，并打開該文件，產(chǎn)生錯誤鏈接的位置會被選中，利用其“屬性”欄內(nèi)的“鏈接”欄

16、可重新建立鏈接。也以可通過查看它的HTML程序，來檢查錯誤。,單擊“斷掉的鏈接”欄內(nèi)的目標文件的名字，使它周圍出現(xiàn)虛線框和一個文件夾按鈕，如圖7-3-5所示。此時可以修改文件的名字與路徑，也可以單擊文件夾按鈕，尋找新的目標文件。,圖7-3-5 單擊“斷掉的鏈接”欄內(nèi)目標文件名后的效果,（4）批量替換鏈接 當站點的許多文件與一個文件（如一個外部文件）的鏈接失效時，不必一個一個地進行修改，可以使用“站點”面板中的批量替換鏈接功能。這種鏈接替換不但對站內(nèi)目標文件有效，而且對站點外部目標文件也有效。批量替換鏈接的操作方法如下。,單擊“站點”窗口中的“站點”“改變站點范圍的鏈接”菜單命令，彈出“更改整個

17、站點鏈接”對話框，如圖7-3-2所示。 在“將所有鏈接更改為”文本框內(nèi)輸入要修改的原鏈接目標文件名字，在“新鏈接”文本框內(nèi)輸入新的鏈接目標文件名字。,單擊“確定”按鈕，在打開的“更新文件”對話框中，列出了所有與“/Th1.htm”文件有鏈接的文件名字。單擊“更新”按鈕，表示更新鏈接；單擊“不更新”按鈕，表示保持原來的鏈接。,（1）設置預覽功能 在Dreamweaver 8中，可以設置20種瀏覽器的預覽功能，前提是計算機內(nèi)已安裝了這些瀏覽器。瀏覽器預覽功能的設置步驟如下。,2在瀏覽器中預覽網(wǎng)頁,在“首選參數(shù)”對話框的“分類”欄內(nèi)，選擇“在瀏覽器中預覽”選項后，該對話框（右邊部分）如圖7-3-6所

18、示。,圖7-3-6 “在瀏覽器中預覽”欄（右邊部分）,在“瀏覽器”欄的顯示框內(nèi)，列出了當前可以使用的瀏覽器。單擊 按鈕，可以刪除選中的瀏覽器。單擊 按鈕，可以增加瀏覽器。,單擊 按鈕，可彈出“添加瀏覽器”對話框，如圖7-3-7所示。在“名稱”文本框內(nèi)輸入要增加的瀏覽器的名稱，在“應用程序”文本框內(nèi)輸入要增加的瀏覽器的程序路徑。再設置成默認的瀏覽器，單擊“確定”按鈕，完成設置。,圖7-3-7 “添加瀏覽器”對話框,完成設置后，在“參數(shù)選擇”對話框中單擊“確定”按鈕退出。在“文檔”面板中單擊“在瀏覽器中預覽/調(diào)試”按鈕 ，可以看到快捷菜單中增加了新的瀏覽器名稱。,選中圖7-3-6中所示的“使用臨時

19、文件預覽”復選框后，可為預覽和服務器調(diào)試創(chuàng)建臨時備份。如果要直接更新文檔，可撤銷對此復選框的選擇。,當在本地瀏覽器中預覽文檔時，不能顯示用根目錄相對路徑所鏈接的內(nèi)容（除非選中了使“用臨時文件預覽”復選框），這是由于瀏覽器不能識別站點根目錄，而服務器能夠識別。,若要預覽用根目錄相對路徑所鏈接的內(nèi)容，可將此文件放在遠程服務器上，然后單擊“文件”“在瀏覽器中預覽”菜單命令來查看它。,（2）預覽網(wǎng)頁 在網(wǎng)頁編輯窗口狀態(tài)下，按F12鍵可以啟動第一瀏覽器顯示網(wǎng)頁，按Ctrl+F12鍵可以啟動第二瀏覽器顯示網(wǎng)頁。,7.4 【案例24】上傳“跟我學電腦”網(wǎng)站,7.4.1 學習目標 在Dreamweaver中將

20、網(wǎng)頁發(fā)布到網(wǎng)上以后，在“站點”窗口中將顯示出服務器端站點文件和本地站點文件，如圖7-4-1所示。其中，“站點”窗口左邊顯示的是服務器端站點文件，右邊顯示的是本地站點文件。,圖7-4-1 上傳網(wǎng)站后的“站點”窗口,Dreamweaver的“站點”窗口集成了非常強大的FTP功能，可以不必使用其他FTP工具，就能實現(xiàn)登錄服務器及文件的上傳和下載等操作。在完成本地站點參數(shù)設置以后，就可以開始上傳文件。 7.4.2 操作過程,1申請主頁空間 （1）登錄互聯(lián)網(wǎng)，打開瀏覽器。在“地址”欄中輸入“”，鏈接到“虎翼網(wǎng)”。單擊“虎翼網(wǎng)”（主頁）導航欄中的“虎翼社區(qū)”熱字，鏈接到“虎翼社區(qū)”欄目，如圖7-4-3所示

21、。,7.4.3 相關知識,圖7-4-3 “虎翼社區(qū)”欄目頁面的顯示效果,（2）單擊“虎翼社區(qū)”導航欄中的“主頁申請”熱字，進入“主頁申請”頁面。在該頁面中，選擇“免費個人型”虛擬主機。然后單擊“登記注冊”按鈕，進入“免費空間注冊”（服務條款）頁面。,（3）仔細閱讀網(wǎng)頁中列出的服務條款，確定服務商和用戶應該注意的事項和應盡的義務等。確認無誤后單擊“同意”按鈕，進入“注冊信息”頁面，如圖7-4-4所示。,圖7-4-4 “注冊信息”網(wǎng)頁（部分）的顯示效果,（4）在該頁面內(nèi)依次輸入注冊信息后，單擊“下一步”按鈕，進入進一步設置的頁面。在該頁面中，可以設置出生日期、個人愛好等信息。設置完成后，單擊“下一步”按鈕，進入“安裝DIY吧”頁面。在該頁面中單擊“下一步”按鈕，即可自動安裝該軟件，并且完成申請主頁空間的操作。,（5）重新回到“虎翼社區(qū)”欄目頁面，在“免費用戶登錄”欄中輸入用戶名和密碼，單擊“登錄”按鈕，即可查看主頁空間的相關信息，如圖7-4-5所示。,圖7-4-5 “個人信息”頁面的顯示效果,（1）打開“站點定義為”（高級）對話框，在“分類”欄中選擇“遠程