第3章網頁的基礎操作2/6/20231《網頁設計技術》內容3.1設置網頁屬性3.2添加網頁內容為網頁加入添加文本給網頁加入圖像插入多媒體對象超鏈接的使用2/6/20232《網頁設計技術》設置網頁屬性制作網頁時，先需設置網頁的頁面屬性，如網頁標題、背景圖像、超鏈接的顏色、文檔編碼方式等屬性。“修改”｜“頁面屬性”命令，將打開“頁面屬性”對話框，各選項的含義：外觀：用來設置頁面的默認字體、背景顏色、背景圖像、頁面邊距等鏈接：設置鏈接字符的字體、顏色等標題：設置當前網頁文本的格式標題和編碼：“標題”設置網頁文檔的標題；“編碼”設置文檔字體采用的編碼方式。計算機中顯示的每種文字都需要對應的編碼支持，才能正常顯示，否則出現亂碼，在中文模式下默認編碼為簡體中文GB2312。跟蹤圖像：在設計頁面時插入用作參考的圖像文件，瀏覽網頁時該圖片是看不到的。3.1設置網頁屬性2/6/20233《網頁設計技術》3.2添加網頁內容插入文本普通文本特殊文本在字符之間添加空格水平線日期格式化文本項目列表

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

菜單命令。特殊文本。

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

[插入][HTML][特殊字符][不換行空格]

按【Ctrl+Shift+空格鍵】鍵輸入。設置添加不換行空格的參數。通過[編輯][首選參數]菜單命令去設置。水平線：在“插入”欄的“HTML”選項中單擊“水平線”按鈕。插入關鍵字：關鍵字為網絡中的搜索引擎準備的，關鍵字要求簡短、盡可能概括網頁的主題，以便瀏覽者在輸入很少關鍵字的情況下，就能很大程序地搜索到網頁。通過“插入”“HTML”“文件頭標簽”“關鍵字”即可，各關鍵字用逗號分隔。日期：在“插入”欄的“常用”選項中，單擊“插入日期”按鈕。3.2添加網頁內容2/6/20236《網頁設計技術》2.普通文本的格式化一般有屬性面板和菜單命令兩種方法使用菜單命令時，只需要選擇“文本”菜單下的相應命令即可。最常用的屬性面板,

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

格式：設置選定文本的段落格式。如段落、標題1、標題2等；樣式：對選定內容應用文本樣式CSS樣式

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

嵌套列表：包含其它列表的列表。屬性面板中的“縮進”按鈕，或選擇[文本][縮進]菜單命令來實現。列表屬性設置

默認的前導符為一個點或阿拉伯數字，如要改成其他前導字符，通過“列表屬性”對話框。3.2添加網頁內容2/6/20239《網頁設計技術》3.2.2為網頁加入圖像1.圖像的格式

由于受網絡速度等方面的影響，一般用于網頁的圖像：GIF、JPEG或PNG，適合網頁快速下載瀏覽。GIF壓縮格式：無損壓縮格式，只能支持256種顏色，適合對顏色數目要求不高的卡通畫及程序界面等。GIF格式還可設置為透明及制作成動畫文件。JPEG即JPG：為有損壓縮格式，支持24位真彩色，最初為照片而設計。很高壓縮比，刪除人眼不易察覺的部分圖像，適合表現顏色豐富、色彩過渡平滑的圖像，不支持透明和動畫。PNG：無損壓縮格式，支持24位真彩色，FIREWORKS的文件格式。有較大的靈活性并且文件大小較小。3.2添加網頁內容2/6/202310《網頁設計技術》2.圖像的插入

網頁一般是圖文混排結構，除了添加文本內容，還需要插入有說服力的資料圖片。直接插入圖像：可使用[插入][圖像]菜單命令或“插入欄”的“常用”選項卡中的“圖像”按鈕。用占位符插入圖像：在制作網頁時，經常會出現所需的圖像還沒有制作完成的情況，此時先插入一個圖像占位符。圖像占位符是一個占有一定空間的符號，能替換為其他真實的圖像，它不會在瀏覽器中顯示。[插入][圖像對象][圖像占位符]注意：與添加文本不同，插入的圖像不能從別的文檔中復制，插入到網頁中的圖像只能以文件的形式獨立存在于站點文件夾中。如果圖像文件不在站點目錄中，DW會保存到站點目錄中。3.2添加網頁內容2/6/202311《網頁設計技術》圖像的屬性說明源文件：圖像文件所在的目錄及名稱，可通過“指向文件”或“瀏覽”按鈕設置。替代：為圖片添加描述信息。在瀏覽器中，當鼠標指向圖像時會顯示這個描述信息。鏈接：為圖像指定一個鏈接。編輯：啟動“外部編輯器”，同時打開所選圖像進行編輯。垂直/水平邊距：圖像相對于編輯窗口或文本等的間隔。低解析度源：設置低分辯率的圖像。在主圖像被下載之前，先載入低分辯率圖像，以便瀏覽者及早地了解圖像的信息。啟動Firework優化當前圖像對當前圖像進行裁剪操作，去掉不需要的部分調整圖像的對比度和亮度2/6/202312《網頁設計技術》圖像的屬性說明地圖：通過在一幅圖像上選擇局部范圍（熱點）來實現超鏈接，被選擇并被標注的地方就叫圖像地圖。選取圖片，屬性面板中將出現4個熱點工具。4個熱點工具的作用如下： ：指針熱點工具，用于移動、放大或縮小熱區。 ：矩形熱點工具，用于繪制矩形熱區。 ：橢圓形熱點工具，用于繪制圓形熱區。 ：多邊形熱點工具，用于繪制多邊形熱區。返回2/6/202313《網頁設計技術》“圖像占位符”的具體設置“名稱”（可選）：圖像占位符標簽顯示的文本。“寬度”和“高度”：設置圖像大小，這是必需的。“顏色”（可選）“替換文本”（可選）：設置描述該圖像的文本。在瀏覽器中預覽圖片，當鼠標移到用占位符添加的圖像上時替代文本就會出現。雙擊占位符打開“選擇圖像源文件”對話框，指定好要插入的圖像文件即可返回2/6/202314《網頁設計技術》3.創建鼠標經過圖像（翻轉圖像）鼠標經過圖像是一種在瀏覽器中查看并使用鼠標指針移過它時發生變化的圖像。必須用兩個圖像來創建鼠標經過圖像：主圖像（首次加載頁面時顯示的圖像）和次圖像（鼠標指針移過主圖像時顯示的圖像）。鼠標經過圖像中的這兩個圖像應大小相等；如果這兩個圖像大小不同，DW將調整第二個圖像的大小與第一個圖像的尺寸相匹配。“插入”“圖像對象”“鼠標經過圖像”。鼠標經過圖像與FLASH按鈕、FLASH文本一般都用于制作超鏈接。3.2添加網頁內容2/6/202315《網頁設計技術》3.2.3插入多媒體對象

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

標題：媒體對象的標題。

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

Tab鍵索引：輸入一個數字以指定該對象的Tab鍵順序。注意：IE為了保護電腦的安全性，阻止了ActiveX。如何去掉這種阻止，微軟提供了一種非常簡便的方法，在網頁的頭部添加如下代碼：<!--savedfromurl=(0013)about:internet-->3.2添加網頁內容2/6/202317《網頁設計技術》插入Flash按鈕

DW提供了許多Flash動畫按鈕，也可以插入自已制作的Flash按鈕，方法與插入Flash影片類似。樣式：選擇按鈕的樣式按鈕文本：按鈕上顯示的文本鏈接：按鈕鏈接的地址另存為：設置按鈕的保存名稱注意：此功能不支持中文名稱。按鈕保存的文檔文件和站點文件夾的名稱都不能為中文，否則不能正常使用按鈕。3.2添加網頁內容2/6/202318《網頁設計技術》插入Flash文本

Flash文本對象允許DW創建一個僅包含文本的Flash影片文件。插入Flash文本時，保存Flash的路徑對話框中的“另存為”不能出現中文，路徑不能太長，并且要與當前的文檔在一個文件夾里面。Flash文本具有與鼠標經過圖象類似的效果，主要用于設置超級鏈接。插入FlashVideo（FLV格式）

在網頁中瀏覽Flash視頻時不僅顯示該視頻信息，還將顯示播放該視頻的控件。3.2添加網頁內容2/6/202319《網頁設計技術》2.ActiveX控件事實上，瀏覽器僅僅能顯示幾種文件格式，ActiveX控件或插件擴展了瀏覽器的能力。ActiveX控件是可充當瀏覽器插件的可重復調用的組件，可在Windows操作系統上的IE瀏覽器中運行。插入ActiveX控件后，在DW的文檔窗口會顯示一個占位符。在瀏覽器中，將出現了媒體播放器的界面，即可像平常使用播放器一樣來對它進行控制，改變聲音等。3.2添加網頁內容2/6/202320《網頁設計技術》ActiveX控件相關屬性如下嵌入：為ActiveX控件在<object>標簽內添加一個<embed>標簽。如果ActiveX控件具有Netscape插件等效項，<embed>標簽將激活該插件。源文件：如果“嵌入”項選中，則確定Netscape插件所使用的數據文件。基址：指定包含該ActiveX控件的URL。如果在瀏覽者系統中沒有該ActiveX控件，IE會從該位置下載該ActiveX控件。如果你沒有指定一個參數，而你的瀏覽者又沒有安裝相應的ActiveX控件，瀏覽者無法顯示該ActiveX對象。替代圖像：如果游覽器不支持<object>標簽，則指定顯示一幅圖像，該選項只在“嵌入”沒有選中下才可使用。數據：指定ActiveX控件下載的數據文件。許多ActiveX控件，不使用該參數，如shockwave、realplay3.2添加網頁內容2/6/202321《網頁設計技術》3.利用插件添加視頻文件

插件是一種程序。瀏覽器一般能夠直接調用插件程序，插件安裝后就成為瀏覽器的一部分。通過插件可將視頻直接插入頁面中，但只有用戶在瀏覽網頁時具有所選視頻文件的適當插件后，視頻才可以播放。典型的插件如RealPlayer和QuickTime。通過[插入][媒體][插件]菜單命令，選定視頻文件，即將插件插入到網頁中。在“插件URL”的文本框中可以輸入下載插件的完整URL。如果在瀏覽頁面時沒有該插件，則IE將從這里提供的URL上下載。插入插件之后，在瀏覽器中，將出現了媒體播放器的界面，即可象平常使用播放器一樣來對它進行控制，改變聲音等。3.2添加網頁內容2/6/202322《網頁設計技術》Shockwave是Macromedia公司制定的一種網上媒體交互壓縮格式的標準，其生成的壓縮格式可以被快速下載，并且被目前的主流瀏覽器所支持，其擴展名：.dcr、dir、dxr。觀看Shockwave影片時，瀏覽器需安裝Shockwave播放器。JavaApplet是美國SUN公司開發的Java語言中的一個小應用程序，具有跨平臺特點。JavaApplet可直接嵌入到HTML語言中，由支持Java的瀏覽器（IE或Netscape）解釋執行，能夠產生特殊效果的程序。3.2添加網頁內容2/6/202323《網頁設計技術》4.為網頁添加聲音以插件的形式向網頁添加聲音同插入其他插件的方法一樣，同樣以占位符的形式出現在網頁中。通過插件可將聲音直接插入頁面中，但只有用戶在瀏覽網頁時具有所選聲音文件的適當插件后，聲音才可播放。在“插件URL”的文本框中可以輸入下載插件的完整URL。如果在瀏覽頁面時沒有該插件，則IE將從這里提供的URL上下載。在屬性面板中，將高度和寬度都設置為0，瀏覽器中將不會顯示播放器。3.2添加網頁內容2/6/202324《網頁設計技術》在參數對話框編輯參數，實現循環和自動播放，由此實現背景音樂的設置。單擊“參數”按鈕，打開對話框，如下圖所示。其實質，在<body>和</body>之間的加入如下代碼

<embedsrc="media/Universe.mp3"hidden="true"autostart="true"loop="true"></embed>。

其中src指定音頻文件的路徑和文件名，hidden=true表示不顯示播放器，loop=true表示循環播放，autostart=true表示自動播放。3.2添加網頁內容2/6/202325《網頁設計技術》以背景音樂形式添加到網頁中在DW中，沒有背景音樂的具體設置。添加背景音樂有兩種方法，一種是通過手寫代碼或插件實現。將<bgsound>標記加入到<head>和</head>之間。<bgsound>標記是用來插入背景音樂的標記，但只適用于IE。打開網頁文件，將網頁切換到代碼視圖，在<head>和</head>之間加入如下代碼：<bgsoundsrc="xxx.mp3"autostart="true"loop="-1">3.2添加網頁內容2/6/202326《網頁設計技術》以鏈接的形式添加到網頁中鏈接音頻文件是將聲音添加到頁面的一種簡單而有效的方法。這種方法可在單擊鏈接時自動調用外部播放器來播放音樂文件。具體方法：在文檔窗口的設計視圖中，選擇要指向聲音文件的文本或圖像。在屬性面板的“鏈接”欄后，單擊瀏覽按鈕，鏈接到指定的聲音文件。3.2添加網頁內容2/6/202327《網頁設計技術》3.2.4超鏈接1.超鏈接概述對于超鏈接來說，路徑是一個重要的概念。常用的路徑有三種：絕對路徑：提供所鏈接文檔的完整URL，包括協議，服務器地址，路徑。

例如：/china/contents.html

通常用于站內到站外的鏈接。如果是同一站點的文檔，使用絕對路徑會有弊端，因為在移動文件的時候，文件內所有的絕對路徑都被打斷，造成鏈接錯誤。3.2添加網頁內容2/6/202328《網頁設計技術》文檔相對路徑：相對于當前文檔而言，此路徑省略了與當前文檔URL的相同部分，只提供了與其不同的部分。對于大多數的站內鏈接，一般使用文檔相對路徑。如當前文件與要鏈接的目標文檔位于同一文件夾內，只需輸入文件名即可。

例如：contents.html站點根目錄相對路徑：從站點的根文件夾到文檔的路徑，與當前文檔無關。根目錄相對路徑由“/”開頭，它代表站點根文件夾。3.2添加網頁內容2/6/202329《網頁設計技術》例如，假設一個站點的結構如圖3.2添加網頁內容resourcesproducts2/6/202330《網頁設計技術》創建從contents.html到其它文件的鏈接，如下：若要從contents.html

鏈接到hours.html。

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

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

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

站點根目錄相對路徑：/products/catalog.html。3.2添加網頁內容2/6/202331《網頁設計技術》鏈接的類型

根據鏈接的對象不同，分為文件鏈接、錨點鏈接、郵件鏈接、熱區鏈接、腳本和空鏈接

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

3.2添加網頁內容2/6/202333《網頁設計技術》2.錨點鏈接允許用戶在文檔的任何位置設置標記（這些標記通常放在文件特定主題的前面或頂部），然后為對象創建這些標記的鏈接。錨點鏈接可以跳轉至當前文檔或其它文檔內的指定位置。建立錨點鏈接分為創建命名錨記和創建到該命名錨記的鏈接兩個步驟。

創建錨點：利用[常用]選項中[命名錨記]按鈕。

創建錨點的鏈接：選擇要創建錨點鏈接的對象，在屬性面板的“鏈接”文本框中，輸入一個數字符號“#”和錨記名稱，中間不能有空格。3.2添加網頁內容2/6/202334《網頁設計技術》3.圖像地圖鏈接圖像作為一個整體，只能創建一個鏈接。如果要在一張圖像中建立多個鏈接，則用圖像地圖實現。圖像地圖指被分成多個區域（或稱“熱點”）的圖像，可為每個熱點指定一個鏈接。“屬性面板”中的4個“熱點工具”如下：

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

：矩形熱點工具，用于繪制矩形熱區

：橢圓形熱點工具，用于繪制圓形熱區

：多邊形熱點工具，用于繪制多邊形熱區選取圖像→在“屬性面板”中單擊“熱點工具”并創建熱區→在“熱區”屬性面板中的“鏈接”文本框中創建鏈接。3.2添加網頁內容2/6/202335《網頁設計技術》2/6/202336《網頁設計技術》2/6/202337《網頁設計技術》選擇一個熱區后，自動打開“熱區”屬性面板，如圖所示。在屬性面板中進行對應的設置。在“鏈接”文本框中輸入要鏈接的文件名稱或相應的錨點名稱。在“目標”下拉列表框中選擇打開鏈接頁的方式。如圖所示，在新窗口中打開。在“替代”文本框中輸入鼠標移動到鏈接熱點上時顯示的內容。2/6/202338《網頁設計技術》4.電子郵件鏈接

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

如：mailto:lzj@

3.2添加網頁內容2/6/202339《網頁設計技術》5.腳本鏈接

執行腳本代碼或調用JavaScript函數。它非常有用，能夠在不離開當前Web頁面的情況下為訪問者提供有關某項的附加信息。腳本鏈接還可用于在訪問者單擊特定項時，執行計算、驗證表單和完成其它處理任務。

在設計視圖中創建腳本鏈接在“文檔”窗口的“設計”視圖中選擇文本或圖像對象。在屬性檢查器的“鏈接”框中，鍵入javascript:后跟腳本代碼（在冒號與代碼或調用之間不能鍵入空格）。

如：javascript:window.close()

3.2添加網頁內容2/6/202340《網頁設計技術》6.空鏈接

是未指派目標的鏈接，空鏈接用于向頁面上的對象或文本附加行為。Dreamweaver行為面板中列出了許多行為，這些行為相當于JAVASCRIPT的程序或函數，對文本設置行為先要設置空鏈接，行為才有效。

在設計視圖中創建空鏈接在“文檔”窗口的“設計”視圖中選擇文本、圖像或對象。在屬性檢查器中的“鏈接”框中鍵入javascript:;（javascript

一詞后依次接一個冒號和一個分號，或直接輸入“#”字符）。3.2添加網頁內容2/6/20234