網(wǎng)頁的基本操作

第3講網(wǎng)頁的基本操作本章學習目標了解網(wǎng)頁中圖像的分類及其特點；理解鏈接的概念,其中包括URL、絕對路徑和相對路徑的概念。通過實例分析，掌握設置網(wǎng)頁屬性的方法。掌握文本和特殊字符的輸入方法，學會創(chuàng)建列表；掌握在網(wǎng)頁中插入日期、水平線等常見網(wǎng)頁元素的方法。熟練掌握在網(wǎng)頁中添加圖像及相關屬性的設置方法、學會創(chuàng)建圖像熱點區(qū)域；熟練掌握在網(wǎng)頁中設置超級鏈接的方法。掌握在網(wǎng)頁中插入Flash元素的基本方法及相關屬性的設置。本章設計任務構建一個以介紹廈門為主題的簡單個人網(wǎng)站

2023/2/4《網(wǎng)頁設計技術》4內容4.1設置網(wǎng)頁屬性4.2添加網(wǎng)頁內容為網(wǎng)頁加入文本為網(wǎng)頁加入圖像創(chuàng)建超鏈接插入多媒體對象2023/2/4《網(wǎng)頁設計技術》5設置網(wǎng)頁屬性制作網(wǎng)頁時，先需設置網(wǎng)頁的頁面屬性，如網(wǎng)頁標題、背景圖像、超鏈接的顏色、文檔編碼方式等屬性?！靶薷摹保绊撁鎸傩浴泵?，將打開“頁面屬性”對話框，各選項的含義：外觀：用來設置頁面的默認字體、背景顏色、背景圖像、頁面邊距等鏈接：設置鏈接字符的字體、顏色等標題：設置當前網(wǎng)頁文本的格式標題和編碼：“標題”設置網(wǎng)頁文檔的標題；“編碼”設置文檔字體采用的編碼方式。計算機中顯示的每種文字都需要對應的編碼支持，才能正常顯示，否則出現(xiàn)亂碼，在中文模式下默認編碼為簡體中文GB2312。跟蹤圖像：在設計頁面時插入用作參考的圖像文件，瀏覽網(wǎng)頁時該圖片是看不到的。3.1設置網(wǎng)頁屬性實例演示---構建廈門新貌個人網(wǎng)站創(chuàng)建站點站點根文件夾：xiamen2023/2/4《網(wǎng)頁設計技術》6主頁index.html存放在站點根文件夾xiamen下files主要存放主頁外其他的網(wǎng)頁文件：gaikuang.html(廈門概況）gly.html（鼓浪嶼）images主要存放站點中的圖片文件，站點默認圖像文件夾others存放其他的一些文件，如flash、聲音等文件準備網(wǎng)頁素材2023/2/4《網(wǎng)頁設計技術》7設置頁面屬性gaikuang.html(廈門概況）修改/頁面屬性–分類列表--外觀—背景圖像：materials中bj2.jpg../images/bg2.jpg分類列表—標題/編碼—標題：廈門概況2023/2/4《網(wǎng)頁設計技術》8新建gaikuang.html，保存在站點files下2023/2/4《網(wǎng)頁設計技術》94.2添加網(wǎng)頁內容插入文本普通文本特殊文本在字符之間添加空格水平線日期格式化文本項目列表

1為網(wǎng)頁加入文本2023/2/4《網(wǎng)頁設計技術》101.普通文本的錄入直接輸入文本復制文本。在其他文本編輯器中復制文本（如Word），在DW中執(zhí)行粘貼命令即可。但DW不保留原有的文本格式。如果想保留文本的格式，可以選擇[編輯][選擇性粘貼]菜單命令插入Word或Excel等其它文檔的內容。選擇[文件][導入]

菜單命令。特殊文本。

“插入”欄中的“文本”，則彈出文本工具欄，單擊字符按鈕，單擊相應的特殊字符。如果沒有使用西歐字符，則會彈出一個警告框，提示可能有些瀏覽器不能正常顯示這些字符。4.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》11在字符之間添加多個空格在浮動選項卡“插入”欄的“文本”選項卡中，單擊“字符”按鈕，選擇“插入不換行空格”[插入][HTML][特殊字符][不換行空格]

按【Ctrl+Shift+空格鍵】鍵輸入。4.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》12在字符之間添加多個空格[插入][HTML][特殊字符][不換行空格]

4.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》13水平線：在“插入”欄的“HTML”

“水平線”插入關鍵字：關鍵字為網(wǎng)絡中的搜索引擎準備的，關鍵字要求簡短、盡可能概括網(wǎng)頁的主題，以便瀏覽者在輸入很少關鍵字的情況下，就能很大程度地搜索到網(wǎng)頁。通過“插入”“HTML”

“文件頭標簽”“關鍵字”即可，各關鍵字用逗號分隔。日期：在“插入”欄的“常用”選項中

“插入日期”4.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》142.普通文本的格式化一般有屬性面板和菜單命令兩種方法使用菜單命令時，只需要選擇“文本”菜單下的相應命令即可。最常用的屬性面板,

文本屬性面板中各選項含義及設置方法如下。

格式：設置選定文本的段落格式。如段落、標題1、標題2等樣式：對選定內容應用文本樣式CSS樣式粗體、斜體、大小、顏色、對齊方式鏈接：除了上述的字符格式化外，還可以對所選的文本建立超級鏈接目標：在此設置打開超級鏈接的窗口字體4.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》15字體屬性說明：默認情況下，DW提供了三種中文字體，如果要使用其它中文字體，可用“編輯字體列表”命令，將系統(tǒng)的字體添加到DW字體列表中。字體列表中每一選項中包括多種字體，各種字體之間用“，”分隔。其含義是瀏覽者的瀏覽器中如果沒有這種字體，則用“，”后面的字體進行顯示，以此類推。4.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》163.項目列表和編號列表項目列表：對于一些具有相同或相似屬性的文本，將內容條列成項目，以便組成一個整體項目分類。編號列表：對于具有序列屬性（即順序性）、屬性相同的內容，則可設置編號列表。單擊屬性面板中的“編號列表”按鈕選擇[文本][列表][編號列表]菜單命令。嵌套列表：包含其它列表的列表。屬性面板中的“縮進”按鈕，或選擇[文本][縮進]菜單命令來實現(xiàn)。定義列表：不使用項目符號點或數(shù)字這樣的前導字符，并且通常用于詞匯表或說明中.列表屬性設置

默認的前導符為一個點或阿拉伯數(shù)字，如要改成其他前導字符，通過“列表屬性”對話框。4.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》173.項目列表和編號列表(1)項目列表：對于一些具有相同或相似屬性的文本，將內容條列成項目，以便組成一個整體項目分類。4.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》183.項目列表和編號列表(2)編號列表：

對于具有序列屬性（即順序性）、屬性相同的內容，則可設置編號列表。單擊屬性面板中的“編號列表”按鈕選擇[文本][列表][編號列表]菜單命令4.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》193.項目列表和編號列表(3)嵌套列表：

包含其它列表的列表。屬性面板中的“縮進”按鈕，或選擇[文本][縮進]菜單命令來實現(xiàn)。4.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》203.項目列表和編號列表(4)定義列表：它的每一項前既沒有項目符號，也沒有編號，并且通常用于詞匯表或說明中。它是通過縮進的形式使內容層次清晰。4.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》213.項目列表和編號列表(5)列表屬性設置

默認的前導符為一個點或阿拉伯數(shù)字，如要改成其他前導字符，通過“列表屬性”對話框。4.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》22４.實例：為網(wǎng)頁gaikuang.html輸入并編輯文字輸入文字：廈門概況經(jīng)濟狀況旅游資源地理位置將素材文件夾materials下的dlwz.txt文件中的文本內容復制到網(wǎng)頁中，每個段落前在中文輸入法全角狀態(tài)下按2次空格鍵。行政區(qū)域----xzqh.txt；經(jīng)濟狀況---jjzk.txt人口氣候

宗教語言旅游資源主要旅游景點rk.txtqh.txtzj.txtyy.txtlyzy.txtzyjd.txt回車后，輸入

Copyright?版權所有（說明：兩行之間按shift+enter,換行不分段）地址：福建廈門

①設置頁面字體、大小和文本顏色為網(wǎng)頁gaikuang.html設置文字格式單擊標簽選擇器—body，選中整個頁面；單擊屬性面板的文本縮進選中第一段落“廈門概況”：設置隸書，46像素，顏色為black，居中對齊為“地理位置”創(chuàng)建項目列表：地理位置屬性面板—項目列表按鈕，列表項目按鈕：樣式為正方形將行政區(qū)域、經(jīng)濟狀況、人口、氣候、宗教、語言、旅游資源、主要旅游景點設置為項目列表。將最后兩行的版權和地址信息，在屬性面板中設置為宋體。2023/2/4《網(wǎng)頁設計技術》23在網(wǎng)頁gaikuang.html中添加水平線和日期2023/2/4《網(wǎng)頁設計技術》24將光標定位在第二行“旅游資源”后面插入工具欄---HTML---水平線將光標定位于倒數(shù)第二行的行首，即“Copyright”的前面插入菜單---HTML---水平線光標定位于“版權所有”的后面，插入－－常用－－日期3.2.2為網(wǎng)頁加入圖像高質量的圖片一般用TIFF格式保存，但其圖片體積過大，不太適合網(wǎng)絡傳輸。不同的圖片格式會表現(xiàn)出不同的顏色分辨率和顏色標準，當然也會影響其體積的大小。一般在網(wǎng)頁設計中選擇的圖片不要超過8KB，如必須選用較大圖片時，可先將其分成若干小圖片，顯示時再通過表格將這些小圖片拼合起來。如果在同一文件中多次使用相同的圖片時，最好使用相對路徑查找該圖片。4.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》263.2.2為網(wǎng)頁加入圖像1.圖像的格式

由于受網(wǎng)絡速度等方面的影響，一般用于網(wǎng)頁的圖像：GIF、JPEG或PNG，適合網(wǎng)頁快速下載瀏覽。GIF(圖形交換格式)：無損壓縮格式，只能支持256種顏色，適合對顏色數(shù)目要求不高的卡通畫及程序界面等。GIF格式還可設置為透明及制作成動畫文件。GIF圖像常用于網(wǎng)頁中的小圖標、符號、動畫標題等。JPEG即JPG（聯(lián)合圖像專家組標準）：為有損壓縮格式，支持24位真彩色，最初為照片而設計。很高壓縮比，刪除人眼不易察覺的部分圖像，適合表現(xiàn)顏色豐富、色彩過渡平滑的圖像，不支持透明和動畫。PNG（可移植網(wǎng)絡圖形）：無損壓縮格式，支持24位真彩色，F(xiàn)IREWORKS的文件格式。有較大的靈活性并且文件較小。4.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》272.圖像的插入

網(wǎng)頁一般是圖文混排結構，除了添加文本內容，還需要插入有說服力的資料圖片。直接插入圖像：

可使用[插入][圖像]菜單命令或“插入欄”的“常用”選項卡中的“圖像”按鈕。用占位符插入圖像：

在制作網(wǎng)頁時，經(jīng)常會出現(xiàn)所需的圖像還沒有制作完成的情況，此時先插入一個圖像占位符。圖像占位符是一個占有一定空間的符號，能替換為其他真實的圖像，它不會在瀏覽器中顯示。[插入][圖像對象][圖像占位符]注意：與添加文本不同，插入的圖像不能從別的文檔中復制，插入到網(wǎng)頁中的圖像只能以文件的形式獨立存在于站點文件夾中。如果圖像文件不在站點目錄中，DW會保存到站點目錄中。4.2添加網(wǎng)頁內容圖像的屬性說明源文件：圖像文件所在的目錄及名稱，可通過“指向文件”或“瀏覽”按鈕設置。替代：為圖片添加描述信息。在瀏覽器中，當鼠標指向圖像時會顯示這個描述信息。鏈接：為圖像指定一個鏈接。編輯：啟動“外部編輯器”，同時打開所選圖像進行編輯。垂直/水平邊距：圖像相對于編輯窗口或文本等的間隔。低解析度源：設置低分辯率的圖像。在主圖像被下載之前，先載入低分辯率圖像，以便瀏覽者及早地了解圖像的信息。啟動Firework優(yōu)化當前圖像對當前圖像進行裁剪操作，去掉不需要的部分調整圖像的對比度和亮度2023/2/4《網(wǎng)頁設計技術》29（1）使用菜單插入圖像文件xiamen.gif光標定位在“地理位置”下面一段的段首插入菜單－－圖像，materials/xiamen.gif圖像屬性設置。替代：俯瞰廈門；邊框：1；對齊下拉框選左對齊，水平和垂直邊距為5實例：在網(wǎng)頁gaikuang.html中插入圖像2023/2/4《網(wǎng)頁設計技術》30align的取值取值說明left在水平方向上向上左對齊center在水平方向上向上居中對齊right在水平方向上向上右對齊top圖片頂部與同行其他元素頂部對齊middle圖片中部與同行其他元素中部對齊bottom圖片底部與同行其他元素底部對齊absbottom圖片的底部與同行最低元素的底部對齊，常用于Netscape瀏覽器absmiddle圖片的中部與同行最大元素的中部對齊，常用于Netscape瀏覽器baseline圖片的底部與文本基準線對齊，常用于Netscape瀏覽器texttop圖片的頂部與同行最高元素的頂部對齊，常用于Netscape瀏覽器align屬性用來指定圖像與周圍元素的對齊方式2023/2/4《網(wǎng)頁設計技術》31（2）使用“插入”工具欄插入圖像文件ditu.gif光標定位在“行政區(qū)域”的后面插入“插入”工具欄-常用-圖像按鈕—圖像，materials/ditu.gif圖像屬性設置。替代：廈門地圖；邊框：1；對齊下拉框選右對齊，水平和垂直邊距為5實例：在網(wǎng)頁gaikuang.html中插入圖像2023/2/4《網(wǎng)頁設計技術》32（3）使用快捷鍵插入圖像文件npt.gif光標定位在“宗教”的后面Ctrl+Alt+I，materials/npt.gif圖像屬性設置。替代：廈門南普陀寺；邊框：1；對齊下拉框選右對齊，水平和垂直邊距為5實例：在網(wǎng)頁gaikuang.html中插入圖像2023/2/4《網(wǎng)頁設計技術》33（4）插入圖像文件gulangyu.gif光標定位在“旅游資源”下面一段的段首Ctrl+Alt+I，materials/gulangyu.gif圖像屬性設置。替代：廈門鼓浪嶼；邊框：1；對齊下拉框選左對齊，水平和垂直邊距為5實例：在網(wǎng)頁gaikuang.html中插入圖像返回“圖像占位符”的具體設置“名稱”（可選）：圖像占位符標簽顯示的文本?！皩挾取焙汀案叨取保涸O置圖像大小，這是必需的?！邦伾保蛇x）“替換文本”（可選）：設置描述該圖像的文本。在瀏覽器中預覽圖片，當鼠標移到用占位符添加的圖像上時替代文本就會出現(xiàn)。雙擊占位符打開“選擇圖像源文件”對話框，指定好要插入的圖像文件即可返回2023/2/4《網(wǎng)頁設計技術》353.創(chuàng)建鼠標經(jīng)過圖像（翻轉圖像）鼠標經(jīng)過圖像是一種在瀏覽器中查看并使用鼠標指針移過它時發(fā)生變化的圖像。必須用兩個圖像來創(chuàng)建鼠標經(jīng)過圖像：主圖像（首次加載頁面時顯示的圖像）和次圖像（鼠標指針移過主圖像時顯示的圖像）。鼠標經(jīng)過圖像中的這兩個圖像應大小相等；如果這兩個圖像大小不同，DW將調整第二個圖像的大小與第一個圖像的尺寸相匹配。“插入”“圖像對像”“鼠標經(jīng)過圖像”鼠標經(jīng)過圖像與FLASH按鈕、FLASH文本一般都用于制作超鏈接。3.2添加網(wǎng)頁內容實例：制作“鼓浪嶼”網(wǎng)頁gly.html（1）設置頁面屬性文檔工具欄的“標題”輸入框：美麗的鼓浪嶼頁面屬性-外觀-背景圖像：materials中的bj1.jpg（2）輸入文字和水平線光標定位在第一行，輸入：美麗的鼓浪嶼文字格式設置：字體為華文彩云，大小為50像素，對齊方式為居中對齊，其他均使用默認設置。光標定位在第一行文字的末尾，插入-HTML-水平線（3）插入圖像占位符光標定位在水平線的下一行常用插入欄-圖像-圖像占位符：名稱為gly，寬度為600，高度為450，替換文本為鼓浪嶼。2023/2/4《網(wǎng)頁設計技術》36新建gly.html，保存在站點files下實例：制作“鼓浪嶼”網(wǎng)頁gly.htm（4）插入鼠標經(jīng)過圖像在圖像占位符的后面輸入8個空格常用插入欄-圖像-鼠標經(jīng)過圖像：名稱為back，原始圖像為materials中的back.gif，鼠標經(jīng)過圖像為materials中的back1.gif，替換文本為返回上一頁，按下時，前往的URL內容暫時為空。選擇返回圖像，屬性面板—垂直邊距為150。2023/2/4《網(wǎng)頁設計技術》374.插入FireworksHTML文件Fireworks是網(wǎng)頁素材制作軟件?？梢杂脕韯?chuàng)建和編輯網(wǎng)頁圖形、對其進行動畫處理、添加高級交互功能以及優(yōu)化圖像。DW允許將Fireworks生成的HTML代碼隨關聯(lián)的圖像、切片和JavaScript一起插入到文檔中。實例：為“廈門新貌”站點創(chuàng)建主頁index.html主頁通過插入FireworksHTML文件來布局頁面，該FireworksHTML文件是由Fireworks制作的圖像切片導出的。2023/2/4《網(wǎng)頁設計技術》383.2添加網(wǎng)頁內容4.插入FireworksHTML文件實例：為“廈門新貌”站點創(chuàng)建主頁index.html新建index.html，保存在站點根文件夾下。單擊“常用”插入欄-圖像-FireworksHTML文件matericals/FireworksHTML/xiamen.htm圖像文件保存在站點others文件夾選中FireworksHTML文件，屬性面板：居中對齊2023/2/4《網(wǎng)頁設計技術》393.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》4012341、2、3、4是人為加上去的，為方便后面操作。主頁效果圖實例：為“廈門新貌”站點創(chuàng)建主頁index.html設置頁面屬性修改/頁面屬性單擊“分類--外觀：背景顏色框”此時，鼠標指針變成“吸管”形狀，用吸管選取頁面中的背景顏色插入圖像在標號為2的區(qū)域插入materials中的haicang.gif

替代：廈門海滄大橋在標號為3的區(qū)域插入materials中的lundu.gif替代：廈門輪渡2023/2/4《網(wǎng)頁設計技術》412023/2/4《網(wǎng)頁設計技術》423.2.3創(chuàng)建超鏈接1.超鏈接概述

對于超鏈接來說，文件路徑是一個重要的概念。網(wǎng)頁中的文件路徑分為三種。絕對路徑

提供所鏈接文檔的完整URL，包括協(xié)議，服務器地址，路徑。例如：/china/contents.html通常用于站內到站外的鏈接。如果是同一站點的文檔，使用絕對路徑會有弊端，因為在移動文件的時候，文件內所有的絕對路徑都被打斷，造成鏈接錯誤。4.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》43文檔相對路徑

相對于當前文檔而言，此路徑省略了與當前文檔URL的相同部分，只提供了與其不同的部分。對于大多數(shù)的站內鏈接，一般使用文檔相對路徑。如當前文件與要鏈接的目標文檔位于同一文件夾內，只需輸入文件名即可。例如：contents.html站點根目錄相對路徑

從站點的根文件夾到文檔的路徑，與當前文檔無關。根目錄相對路徑由“/”開頭，它代表站點根文件夾。4.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》44例如，假設一個站點的結構如圖4.2添加網(wǎng)頁內容resourcesproducts2023/2/4《網(wǎng)頁設計技術》45創(chuàng)建從contents.html到其它文件的鏈接，如下：若要從contents.html鏈接到hours.html。

文檔相對路徑：hours.html若要鏈接到tips.html，在當前文件夾下一級文件夾中。

文檔相對路徑：resources/tips.html若要鏈接到index.html，站點根目錄中。

站點根目錄相對路徑：/index.html若要鏈接到catalog.html，在站點根目錄下的products子文件夾中。

站點根目錄相對路徑：/products/catalog.html3.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》46鏈接的類型（根據(jù)鏈接的對象不同分類）文件鏈接：鏈接到其它文檔或文件錨點鏈接：跳轉到文檔內的特定位置，可以是同一文檔中的錨記，也可以是其他文檔中的錨記圖像地圖鏈接：指被分成多個區(qū)域（“熱點”）的圖像，而每個區(qū)域可設置鏈接電子郵件鏈接：此類鏈接打開客戶端郵件應用程序，并且新建一個已填好收件人地址的空白電子郵件腳本鏈接：執(zhí)行腳本代碼或調用JavaScript函數(shù)。它非常有用，能夠在不離開當前Web頁面情況下，當訪問者單擊特定項時，執(zhí)行計算、驗證表單和完成其它處理任務等空鏈接：是一個無指向的鏈接，用于向頁面上的對象或文本附加行為。.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》47鏈接文件的打開方式_blank——在新建窗口中加載鏈接文檔。_self——將鏈接文檔加載到與鏈接相同的框架或窗口中，該目標是默認值。_parent——將鏈接的文件載入含有該鏈接框架的父框架集或上一級的瀏覽器窗口中。_top——將在最頂端的瀏覽器窗口中加載鏈接文件。如果當前網(wǎng)頁是框架網(wǎng)頁，則刪除所有框架。parent和top用于框架網(wǎng)頁。

4.2添加網(wǎng)頁內容實例：創(chuàng)建頁面鏈接2023/2/4《網(wǎng)頁設計技術》48為“廈門新貌”網(wǎng)站中的網(wǎng)頁gaikuang.html創(chuàng)建指向網(wǎng)頁index.html和gly.html的超級鏈接，為gly.html創(chuàng)建指向網(wǎng)頁gaikuang.html的超級鏈接。通過“頁面屬性”設置超級鏈接的樣式打開gaikuang.html，修改/頁面屬性，分類/鏈接,設置顏色為gaikuang.html創(chuàng)建超級鏈接光標定位頁面底部的水平線前，按回車鍵，插入一空行單擊常用插入欄中的超級鏈接按鈕。將“返回首頁”鏈接文本右對齊。2023/2/4《網(wǎng)頁設計技術》49實例：創(chuàng)建頁面鏈接為gaikuang.html創(chuàng)建超級鏈接展開文件面板的files文件夾。選擇gaikuang.html頁面最后一段中的“鼓浪嶼”文本，拖動屬性檢查器中“鏈接”文本框右側的“指向文件”圖標，指向“文件”面板中的files下的gly.html。2023/2/4《網(wǎng)頁設計技術》50實例：創(chuàng)建頁面鏈接為gly.html創(chuàng)建超級鏈接打開gly.html，選擇“返回”圖像單擊屬性面板中的鏈接輸入框右邊的“瀏覽文件”，選擇files文件夾下的gaikuang.html2023/2/4《網(wǎng)頁設計技術》51實例：創(chuàng)建頁面鏈接2023/2/4《網(wǎng)頁設計技術》52下載文件的鏈接

當鏈接到不同類型的文件時，訪問鏈接的處理方法不一樣。對于網(wǎng)頁文件，則在瀏覽器中打開。對于其它類型文件，如：zip、rar壓縮文件，則會提示用戶下載。只要鏈接文件屬于瀏覽器無法識別的類型，會使用IE瀏覽器直接進行下載，并保存到本地計算機中。4.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》532.錨點鏈接允許用戶在文檔的任何位置設置標記（這些標記通常放在文件特定主題的前面或頂部），然后為對象創(chuàng)建這些標記的鏈接。錨點鏈接可以跳轉至當前文檔或其它文檔內的指定位置。建立錨點鏈接分為創(chuàng)建命名錨記和創(chuàng)建到該命名錨記的鏈接兩個步驟。創(chuàng)建錨點：利用[常用]選項中[命名錨記]按鈕。

創(chuàng)建錨點的鏈接：選擇要創(chuàng)建錨點鏈接的對象，在屬性面板的“鏈接”文本框中，輸入錨記名稱，中間不能有空格。4.2添加網(wǎng)頁內容打開gaikuang.html，定位到項目列表“經(jīng)濟狀況”前，在“插入”欄的“常用”類別中，單擊“命名錨記”按鈕。在“錨記名稱”文本框中，鍵入錨記的名稱“jingji”。錨記標記在插入點處出現(xiàn)。注意：如果看不到錨記標記，可選擇“查看”>“可視化助理”>“不可見元素”。2023/2/4《網(wǎng)頁設計技術》54實例：為網(wǎng)頁gaikuang.html創(chuàng)建錨記鏈接錨記標記選擇網(wǎng)頁第二行的“經(jīng)濟狀況”文本。2023/2/4《網(wǎng)頁設計技術》55實例：為網(wǎng)頁gaikuang.html創(chuàng)建錨記鏈接在屬性面板的“鏈接”文本框中，鍵入#jingji。④為網(wǎng)頁第二行“經(jīng)濟狀況”后的“旅游資源”創(chuàng)建指向網(wǎng)頁中項目列表項“旅游資源”的錨記鏈接。在網(wǎng)頁第一行“廈門概況”前插入一個錨記top在項目列表“經(jīng)濟狀況”后面輸入幾個空格后，輸入“返回頂部”。選擇此處的“返回頂部”，在屬性面板的“鏈接”文本框中，鍵入#top在項目列表“旅游資源”后面輸入幾個空格后，輸入“返回頂部”。選擇此處的“返回頂部”，在屬性面板的“鏈接”文本框中，鍵入#top2023/2/4《網(wǎng)頁設計技術》56實例：為網(wǎng)頁gaikuang.html創(chuàng)建錨記鏈接2023/2/4《網(wǎng)頁設計技術》573.電子郵件鏈接

網(wǎng)頁中設置電子郵件鏈接非常普遍。當單擊電子郵件鏈接文本時，該鏈接打開安裝在系統(tǒng)中的電子郵件應用程序，并且創(chuàng)建了一個已指定好收件人地址的空白郵件。電子郵件鏈接創(chuàng)建方法如下：選擇[插入][電子郵件鏈接]菜單命令；在屬性面板的“鏈接”文本框中，輸入“mailto:”，在后輸入電子郵件地址。

如：mailto:lzj@

4.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》58實例：為網(wǎng)頁gaikuang.html創(chuàng)建電子郵件鏈接打開gaikuang.html選擇網(wǎng)頁最后的E-mail地址“xiamen@163.net”在屬性面板的鏈接輸入框中輸入：mailto:xiamen@163.net2023/2/4《網(wǎng)頁設計技術》594.圖像地圖鏈接

圖像作為一個整體，只能創(chuàng)建一個鏈接。如果要在一張圖像中建立多個鏈接，則用圖像地圖實現(xiàn)。

圖像地圖指被分成多個區(qū)域（或稱“熱點”）的圖像，可為每個熱點指定一個鏈接?！皩傩悦姘濉敝械?個“熱點工具”如下：

：指針熱點工具，用于移動、放大或縮小熱區(qū)

：矩形熱點工具，用于繪制矩形熱區(qū)

：橢圓形熱點工具，用于繪制圓形熱區(qū)

：多邊形熱點工具，用于繪制多邊形熱區(qū)

選取圖像→在“屬性面板”中單擊“熱點工具”并創(chuàng)建熱區(qū)→在“熱區(qū)”屬性面板中的“鏈接”文本框中創(chuàng)建鏈接。4.2添加網(wǎng)頁內容打開gly.html，選擇圖像占位符gly。屬性面板中的源文件，選擇為matericals中的gly.gif，原來的圖像占位符替換為gly.gif選中該圖像，單擊屬性面板中多邊形熱點工具，沿著圖片中的“日光巖”邊緣繪制出一個熱點區(qū)域。2023/2/4《網(wǎng)頁設計技術》60實例：為網(wǎng)頁gly.html創(chuàng)建圖像熱區(qū)鏈接繪制廈門博物館的熱點區(qū)域。2023/2/4《網(wǎng)頁設計技術》61實例：為網(wǎng)頁gly.html創(chuàng)建圖像熱區(qū)鏈接2023/2/4《網(wǎng)頁設計技術》623.2.4插入多媒體對象

當前網(wǎng)頁中多媒體包括：動畫、音頻、視頻等元素。DW可有效地將多媒體元素和其它元素有機地整合在一起，以豐富網(wǎng)頁的內容。Flash文件的格式：源文件(.fla)、影片文件(.swf)、模板文件(.swt)、視頻文件(.flv)等音頻文件格式：midi或mid、wav、aif、mp3、ra、ram、rpm及RealAudio等。播放wav、aif和midi文件不需要插件。視頻文件格式：AVI、WMV、RM等，視頻格式不同，對應的播放器是有區(qū)別的。雖然它們播放器不同，但它們一般都是使用ActiveX控件或插件來播放。4.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》631.插入Flash內容(1)插入Flash動畫（影片文件.swf）“常用”“媒體”按鈕，選擇“Flash”選項；

或執(zhí)行[插入][媒體][Flash]菜單命令對話框屬性說明：

標題：媒體對象的標題。輸入鍵：輸入A作為快捷鍵，則使用“Ctrl+A”鍵在瀏覽器中選擇該對象。

Tab鍵索引：輸入一個數(shù)字以指定該對象的Tab鍵順序。3.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》64插入FlashVideo（FLV格式）在網(wǎng)頁中瀏覽Flash視頻時不僅顯示該視頻信息，還將顯示播放該視頻的控件。4.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》652.ActiveX控件事實上，瀏覽器僅僅能顯示幾種文件格式，ActiveX控件或插件擴展了瀏覽器的能力。ActiveX控件是可充當瀏覽器插件的可重復調用的組件，可在Windows操作系統(tǒng)上的IE瀏覽器中運行。插入ActiveX控件后，在DW的文檔窗口會顯示一個占位符。在瀏覽器中，將出現(xiàn)媒體播放器的界面，即可像平常使用播放器一樣來對它進行控制，改變聲音等。4.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》66ActiveX控件相關屬性:嵌入：為ActiveX控件在<object>標簽內添加一個<embed>標簽。如果ActiveX控件具有Netscape插件等效項，<embed>標簽將激活該插件。源文件：如果“嵌入”項選中，則確定Netscape插件所使用的數(shù)據(jù)文件。基址：指定包含該ActiveX控件的URL。如果在瀏覽者系統(tǒng)中沒有該ActiveX控件，IE會從該位置下載該ActiveX控件。如果你沒有指定一個參數(shù)，而你的瀏覽者又沒有安裝相應的ActiveX控件，瀏覽者無法顯示該ActiveX對象。替換圖像：如果瀏覽器不支持<object>標簽，則指定顯示一幅圖像，該選項只在“嵌入”沒有選中下才可使用。數(shù)據(jù)：指定ActiveX控件下載的數(shù)據(jù)文件。許多ActiveX控件，不使用該參數(shù)，如shockwave、realplay4.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》673.利用插件添加視頻文件

插件是一種程序。瀏覽器一般能夠直接調用插件程序，插件安裝后就成為瀏覽器的一部分。通過插件可將視頻直接插入頁面中，但只有用戶在瀏覽網(wǎng)頁時具有所選視頻文件的適當插件后，視頻才可以播放。典型的插件如RealPlayer和QuickTime。通過[插入][媒體][插件]菜單命令，選定視頻文件，即將插件插入到網(wǎng)頁中。在“插件URL”的文本框中可以輸入下載插件的完整URL。如果在瀏覽頁面時沒有該插件，則IE將從這里提供的URL上下載。插入插件之后，在瀏覽器中，將出現(xiàn)了媒體播放器的界面，即可象平常使用播放器一樣來對它進行控制，改變聲音等。4.2添加網(wǎng)頁內容2023/2/4《網(wǎng)頁設計技術》68Shockwave是Macromedia公司制定的一種網(wǎng)上媒體交互壓縮格式的標準，其生成的壓縮格式可以被快速下載，并且被目前的主流瀏覽器所支持，其擴展名：.dcr、dir、dxr。觀看Shockwave影片時，瀏覽器需安裝Shockwave播放器。JavaApplet是美國SUN公司開發(fā)的Java語言中的一個小應用程序，具有跨平臺特點。JavaApplet可直接嵌入到HTML語言中