Dreamweaver給文本和圖像添加超鏈接

實驗7給文本和圖像添加超鏈接實驗要求通過實驗，理解鏈接的概念。熟悉掌握如何給文本和圖像添加超鏈接，如何添加郵件鏈接和創(chuàng)建錨記鏈接。說明：站點是由繁復的鏈接組成的。因為媒體的其他元素都可以按另一種形式進行復制，但是如果沒有了鏈接，也就不會有萬維網(wǎng)。通常，網(wǎng)頁設計者需要為短語、單詞或者一個圖片設置鏈接，鏈接到想要到達的地址。一旦用戶創(chuàng)建了鏈接，就可以在瀏覽器中預覽它，實現(xiàn)在網(wǎng)絡上的跳轉。對應知識點：●給文本和圖像添加超級鏈接●添加郵件鏈接●創(chuàng)建錨記鏈接實驗素材圖像和文字制作完成的網(wǎng)頁。實驗步驟啟動DreamweaverMX2004程序，選擇菜單“文件”“打開”命令，彈出“打開”對話框。在對話框中，選擇本書配套光盤exp7/sucai07文件夾中的網(wǎng)頁文件page07.htm。如圖7-1所示。單擊“按鈕”，打開網(wǎng)頁文件編輯窗口。如圖7-2所示。圖７－１“打開”對話框圖７－２page07.htm網(wǎng)頁編輯窗口說明：此網(wǎng)頁主要使用圖像和文件制作完成。其中大量使用了表格布局，讀者可以打開網(wǎng)頁進行分析，回顧關于圖像、文本等實驗的學習。首先需要創(chuàng)建本地站點。選擇菜單“站點”“管理站點”命令，打開“管理站點”對話框。選擇“新建”“站點”命令，打開“站點定義”對話框。在對話框“站點名稱”編輯框中輸入“廣西行”，單擊“本地根文件夾”和“默認文件夾”后面的文件夾，選擇網(wǎng)頁和圖像的位置，確定后如圖7-3所示。單擊“確定”按鈕，返回“管理站點”對話框。新建站點名稱“廣西行”顯示在站點列表中。如圖7-4所示。圖7-3“站點定義”對話框圖7-4“管理站點”對話框圖7-5文件面板單擊“完成”按鈕，本地站點創(chuàng)建完成。DreamweaverMX2004將自動打開“文件”面板，定位到當前站點下。如圖7-5所示。在打開的“page07.htm”文件上制作文字鏈接。拖動鼠標，選中“我們的宗旨”圖像下的第1個小標題“關于廣西的介紹”。單擊屬性面板“鏈接”編輯框右側的“指向文件”按鈕，拖動鼠標時從“指向文件”圖標上會延伸出一條直線，當定位到需要鏈接的文件（2.htm）后，釋放鼠標按鈕。文件名和路徑信息就會自動顯示在“鏈接”文本框內(nèi)。如圖7-6所示。圖7-6使用“指向文件”按鈕制作文本連接說明：通過“指向文件”圖標，用戶就不用為了查找一個文件而瀏覽一個又一個的文件夾，因為現(xiàn)在它們都必須清楚地顯示在文件面板上。當然，用戶可以指向另一個打開的Dreamweaver窗口中的一個文件，或者同一個窗口中另一個框架中的文件。如果用戶需要的鏈接是一個命名錨，它位于頁面的底部。則Dreamweaver會自動滾動來尋找它。用戶甚至可以指向另一個頁面的命名錨。當然，用戶也可以單擊“瀏覽文件”按鈕，打開“選擇文件”對話框。在其中選擇需要鏈接的文件“2.htm”。如圖7-7所示。單擊“確定”按鈕，文件路徑和名稱顯示在“鏈接”文件框內(nèi)。說明：文本鏈接通常是藍色并加有下滑線。用戶可以改變文檔鏈接的顏色和下滑線狀態(tài)，在前面實驗關于“頁面屬性”中已有介紹。單擊屬性面板上的“頁面屬性”按鈕，在“鏈接”框內(nèi)可以設置鏈接的顏色和下劃線等狀態(tài)。如7-8所示。雙擊“推出單位”下的第1個名稱，選中文字。在屬性面板“鏈接”編輯框內(nèi)輸入此單位的網(wǎng)址（這里假設為）。在目標下下拉列表中選擇"-black"選項。如圖7-9所示。圖7-8在“頁面屬性”連接框內(nèi)設置連接狀態(tài)圖7-9制作網(wǎng)站鏈接圖7-10制作電子郵件連接說明需要注意在制作網(wǎng)站鏈接時，需要在網(wǎng)址前面加上”http://”。在”目標”下拉列表中有4個選項分別為：-blank在新的未命名的窗口中顯示被連接的文檔；-parent：在父框架集中顯示被連接的文檔；-self這是系統(tǒng)默認的設置，是在與該連接相同的框架和窗口中顯示被連接的文檔；-top在整個瀏覽器窗口中顯示被連接的文檔，同時刪除原瀏覽窗口中的內(nèi)容。12。在網(wǎng)頁的右下方的”聯(lián)系方式”欄目中，創(chuàng)建 E-mail(電子郵件)連接。拖動鼠標選中E-mail地址，在屬性面板“連接”編輯框中輸入“mailto:guangxixing@”。如圖7-10所示。說明電子郵件鏈接用來方便瀏覽者與網(wǎng)站設計者之間的溝通。當瀏覽者點擊電子郵件鏈接時，系統(tǒng)自動打開瀏覽器默認的電子郵件處理程序。還有一種創(chuàng)建電子郵件鏈接的方式，在常用面板上，單擊“電子郵件鏈接”按鈕，打開“電子郵件鏈接”對話框。在其中輸入“文本”（顯示在網(wǎng)頁中的文字）和“E-mail”（電子郵件地址），確定后即可完成電子郵件鏈接。如圖7-11所示。13.圖像的鏈接方法與文本類似，例如，用戶可選中“我們的宗旨”圖像，在屬性面板“鏈接”編輯框內(nèi)輸入“3.htm”，即可完成圖像鏈接。說明在設置圖像鏈接時需要注意，屬性面板中的“邊框”項通常設置為0，這是因為如果邊框?qū)傩源嬖诘脑?，鏈接圖像通常會顯示一個藍色邊框，有可能影響圖像效果。14.在“我們的宗旨”第1條標題處右擊，顯示快捷菜單，選擇“打開鏈接頁面”命令，即可跳轉到鏈接的網(wǎng)頁“2.htm”。說明應用錨點鏈接可以將文檔中的文本或圖像鏈接到同一文檔的其它位置，也可以鏈接到不同文檔中指定的位置，使瀏覽者能夠迅速瀏覽指定的位置。在創(chuàng)建錨點鏈接前，要先設置錨點。15.打開2.htm之后，將光標定位在“景點推薦”內(nèi)容部分的標題前，單常用面板的“命名錨記”按鈕，在“命名錨記”對話框的“錨記名稱”編輯框中輸入“錨記1”，如圖7-12所示。16.單擊“確定”按鈕，在標題前顯示一個錨記圖標，如圖7-13所示。17.制作第1行“景點推薦”標題錨記鏈接。選中“景點推薦”標題名稱，在屬性面板“鏈接”編輯框內(nèi)輸入“#錨記1”說明選中錨記圖標，在其屬性面板呵以修改錨記名稱。圖7-12“命名錨記”對話框圖７－１３標題前顯示錨記圖標圖7-14制作錨記鏈接說明如果是同一文檔的鏈接，格式是：#錨記名。如果是同一文件夾中不同文檔的鏈接，格式是：filename.html#錨記名。18.根據(jù)以上步驟制作其他三個欄目的錨記鏈接。完成后選擇菜單“文件”——>“保存全部”命令，保存打開的兩個網(wǎng)頁。瀏覽網(wǎng)頁效果如圖7-15所示。圖7-15（續(xù)）實驗作業(yè)■模仿1.準備三張制作好的網(wǎng)頁，放置在同一文件夾。（可在本書配套光盤素材內(nèi)找到）2.創(chuàng)建站點“廣西行”。3.創(chuàng)建文本鏈接。4.創(chuàng)建圖像鏈接。5.創(chuàng)建網(wǎng)站鏈接。6.創(chuàng)建電子郵件鏈接。7