第3章添加網(wǎng)頁(yè)內(nèi)容和多媒體元素

1、21世紀(jì)普通高校計(jì)算機(jī)公共課程規(guī)劃教材Dreamweaver CS6 網(wǎng)頁(yè)設(shè)計(jì)與制作祁瑞華 主編 李富宇 副主編第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素清華大學(xué)出版社清華大學(xué)出版社第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.13.1網(wǎng)頁(yè)的創(chuàng)建及相關(guān)操作網(wǎng)頁(yè)的創(chuàng)建及相關(guān)操作 我們可以使用Dreamweaver CS6創(chuàng)建一個(gè)新網(wǎng)頁(yè)，并保存網(wǎng)頁(yè)，在需要的時(shí)候打開(kāi)網(wǎng)頁(yè)。 3.1.1創(chuàng)建新網(wǎng)頁(yè) 1.快速創(chuàng)建網(wǎng)頁(yè)2. 創(chuàng)建空白網(wǎng)頁(yè)文檔3.1.2保存網(wǎng)頁(yè)3.1.3打開(kāi)網(wǎng)頁(yè) 3.23.2網(wǎng)頁(yè)中的文本編輯網(wǎng)頁(yè)中的文本編輯3.2.1 文本、特殊字符及日期的編輯 1.在頁(yè)面中插入文本內(nèi)容直接輸入法 復(fù)制粘貼法 導(dǎo)入已有的Word

2、文檔 1 1第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.23.2網(wǎng)頁(yè)中的文本編輯網(wǎng)頁(yè)中的文本編輯3.2.1 文本、特殊字符及日期的編輯 2. 在頁(yè)面中添加字符空格 在“插入”菜單中，選擇“HTML”“特殊字符”“不換行空格”命令。 在“插入”工具欄上最左面的菜單中選擇“文本”命令，打開(kāi)的下拉菜單，選 插入空格。用戶也可以設(shè)置Dreamweaver CS6的一般屬性，讓Dreamweaver CS6允許自動(dòng)插入非斷行空格。首先選擇“編輯”菜單，然后選擇“首選參數(shù)”選項(xiàng)，打開(kāi)“首選參數(shù)”對(duì)話框，在“常規(guī)”類別中選擇“允許多個(gè)連續(xù)的空格”復(fù)選框就可以通過(guò)敲擊空格鍵插入空格。3在頁(yè)面中插入沒(méi)有間距的斷行4插入

3、日期5插入特殊字符2 2第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.23.2網(wǎng)頁(yè)中的文本編輯網(wǎng)頁(yè)中的文本編輯3.2.2格式化文本1.設(shè)置文字屬性設(shè)置文字字體更改字體大小 改變文字的顏色 更改文字樣式 2.格式化段落與標(biāo)題3. 段落中的文字對(duì)齊和列表段落中文本的對(duì)齊段落中縮進(jìn)或凸出文本 創(chuàng)建列表 3.2.3 水平線的插入與設(shè)置水平線是組織信息的有效工具，在頁(yè)面中用戶可以使用一條或多條水平線以可視方式分隔文本和對(duì)象，使文檔結(jié)構(gòu)清晰。3 3第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.23.2網(wǎng)頁(yè)中的文本編輯網(wǎng)頁(yè)中的文本編輯3.2.3 水平線的插入與設(shè)置水平線是組織信息的有效工具，在頁(yè)面中用戶可以使用一條或多條水平線

4、以可視方式分隔文本和對(duì)象，使文檔結(jié)構(gòu)清晰。其操作步驟如下：在“文檔”窗口中，將插入點(diǎn)放在要插入水平線的位置。選擇“插入” “HTML” “水平線”，如圖3-1示?；蛟凇安迦搿惫ぞ邫诘某Ｓ眠x項(xiàng)卡中，單擊“水平線”按鈕，如圖3-2所示。圖3.1圖3.2 4 4第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.33.3設(shè)置頁(yè)面屬性設(shè)置頁(yè)面屬性頁(yè)面屬性包括頁(yè)面標(biāo)題、背景圖像、背景顏色、文本及鏈接顏色、頁(yè)邊空白等內(nèi)容，正確設(shè)置頁(yè)面屬性是成功編寫(xiě)網(wǎng)頁(yè)的必要前提。3.3.1 設(shè)置改變頁(yè)面標(biāo)題頁(yè)面標(biāo)題可以使瀏覽者清楚自己正在瀏覽的頁(yè)面的內(nèi)容，同時(shí)頁(yè)面標(biāo)題還會(huì)保存在瀏覽者的歷史紀(jì)錄及書(shū)簽列表中。如果一個(gè)頁(yè)面沒(méi)有標(biāo)題,那么在瀏

5、覽器頁(yè)面中就會(huì)顯示成“無(wú)標(biāo)題文檔”。網(wǎng)頁(yè)標(biāo)題可以是中文、英文或符號(hào)，編輯它可以直接在設(shè)計(jì)窗口上方的“標(biāo)題”欄內(nèi)進(jìn)行，如圖3-3所示。圖3.3編輯網(wǎng)頁(yè)標(biāo)題3.3.2 定義頁(yè)面背景顏色和背景圖像如果在一個(gè)頁(yè)面中同時(shí)使用背景圖像和背景顏色，那么在瀏覽器加載頁(yè)面時(shí)將首先顯示頁(yè)面的背景顏色，等到背景圖像下載完畢后，背景圖像將覆蓋背景顏色。5 5第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.33.3設(shè)置頁(yè)面屬性設(shè)置頁(yè)面屬性3.3.2 定義頁(yè)面背景顏色和背景圖像設(shè)置背景顏色和背景圖像的方法如下。 選擇“修改” “頁(yè)面屬性”命令，或在頁(yè)面空白處單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“頁(yè)面屬性”命令，打開(kāi)“頁(yè)面屬性”對(duì)話框

6、 單擊背景顏色右側(cè)的 按鈕，在彈出的調(diào)色板中選擇一種合適的顏色，然后單擊確定按鈕，頁(yè)面的背景就變成剛剛設(shè)定的顏色了，如下圖所示。6 6第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.33.3設(shè)置頁(yè)面屬性設(shè)置頁(yè)面屬性3.3.3設(shè)置頁(yè)面的其他屬性3.4 3.4 編輯頁(yè)面的頭部?jī)?nèi)容編輯頁(yè)面的頭部?jī)?nèi)容網(wǎng)頁(yè)文件由兩部分組成，一是頭部?jī)?nèi)容，標(biāo)記為,一是正文內(nèi)容，標(biāo)記為。正文內(nèi)容是文檔的主要部分，可視的文字、圖像都包含在這一部分。頭部?jī)?nèi)容是不可見(jiàn)的，當(dāng)然網(wǎng)頁(yè)標(biāo)題除外，但網(wǎng)頁(yè)標(biāo)題不是顯示在文檔中，而是顯示在瀏覽器標(biāo)題欄上。文件頭標(biāo)簽主要包括META、關(guān)鍵字、說(shuō)明、刷新、基礎(chǔ)和鏈接，如圖3.4所示。圖3-4文件頭菜單7 7

7、第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.4 3.4 編輯頁(yè)面的頭部?jī)?nèi)容編輯頁(yè)面的頭部?jī)?nèi)容3.4.1 3.4.1 插入插入標(biāo)記標(biāo)記頁(yè)面中的標(biāo)記，它用于記錄當(dāng)前頁(yè)面的一些信息。使用“插入”“HTML”“文件頭標(biāo)簽”“META”命令后插入標(biāo)記標(biāo)記。3.4.2 3.4.2 插入關(guān)鍵字信息插入關(guān)鍵字信息在搜索引擎中，檢索信息都是通過(guò)輸入關(guān)鍵字來(lái)實(shí)現(xiàn)的，它是整個(gè)網(wǎng)絡(luò)登錄的過(guò)程中最基本也是最重要的一步。選擇菜單中的“插入”HTML“文件頭標(biāo)簽”“關(guān)鍵字”命令插入關(guān)鍵字關(guān)鍵字。.3插入說(shuō)明信息插入說(shuō)明信息3.4.4 3.4.4 自動(dòng)刷新功能自動(dòng)刷新功能使用自動(dòng)刷新是指定瀏覽器應(yīng)該自動(dòng)在加載頁(yè)面一定

8、時(shí)間后或打開(kāi)另一頁(yè)面時(shí)對(duì)頁(yè)面內(nèi)容進(jìn)行刷新。自動(dòng)刷新通常用在當(dāng)瀏覽者從一個(gè)URL地址重新定位到另一地址時(shí)，進(jìn)行刷新。選擇菜單中的“插入”HTML“文件頭標(biāo)簽”“刷新”命令插入自動(dòng)刷新功能。8 8第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.53.5網(wǎng)頁(yè)中的多媒體元素網(wǎng)頁(yè)中的多媒體元素在網(wǎng)頁(yè)中添加多媒體元素可以增加網(wǎng)頁(yè)的觀賞性。Dreamweaver CS6具有強(qiáng)大的多媒體支持功能，可以在網(wǎng)頁(yè)中快速地插入各種類型的媒體元素或媒體文件，如圖像、動(dòng)畫(huà)、視頻、音頻和控件等，并通過(guò)“屬性”檢查器對(duì)這些多媒體元素或媒體文件的顯示過(guò)程進(jìn)行控制。.1頁(yè)面中的圖像頁(yè)面中的圖像1. 1.常用的文件格式常用的文

9、件格式(1)GIF 圖像(2)JPEG/JPG圖像(3)PNG圖像2.2.在頁(yè)面中插入圖像在頁(yè)面中插入圖像3.3.在頁(yè)面文檔中使用圖像占位符在頁(yè)面文檔中使用圖像占位符當(dāng)用戶在制作網(wǎng)頁(yè)時(shí)，在頁(yè)面中某個(gè)位置需要插入一幅圖片，但一時(shí)找不到自己喜歡的、合適的圖片，這就需要用到DreamweaverCS6的圖像占位符功能。插入圖像占位符后，用戶隨時(shí)都可以將其替換為真正的圖像。9 9第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.53.5網(wǎng)頁(yè)中的多媒體元素網(wǎng)頁(yè)中的多媒體元素.1頁(yè)面中的圖像頁(yè)面中的圖像4.4.編輯圖像編輯圖像Dreamweaver CS6在提供基本圖像編輯功能的同時(shí)，在其自身的使用界面

10、下就可調(diào)用Adob Photoshop來(lái)修改圖像。Dreamweaver CS6具有以下基本的圖像編輯功能：（1）調(diào)整圖像大?。?）裁剪圖像（3）調(diào)整圖像的亮度和對(duì)比度（4）銳化圖像（5）使用外部編輯器編輯圖像.2創(chuàng)建鼠標(biāo)經(jīng)過(guò)圖像創(chuàng)建鼠標(biāo)經(jīng)過(guò)圖像鼠標(biāo)經(jīng)過(guò)圖像 是一種在瀏覽器中查看并使用鼠標(biāo)指針移過(guò)它時(shí)發(fā)生變化的圖像。鼠標(biāo)經(jīng)過(guò)圖像中的這兩個(gè)圖像應(yīng)大小相等；如果這兩個(gè)圖像大小不同，Dreamweaver CS6將自動(dòng)調(diào)整第二個(gè)圖像的大小以匹配第一個(gè)圖像的屬性。1010第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.53.5網(wǎng)頁(yè)中的多媒體元素網(wǎng)頁(yè)中的多媒體元素.3網(wǎng)頁(yè)中的網(wǎng)頁(yè)中的

11、FlashFlash對(duì)象對(duì)象Flash技術(shù)是實(shí)現(xiàn)和傳遞基于矢量的圖形和動(dòng)畫(huà)的首要解決方案。Flash動(dòng)畫(huà)是矢量動(dòng)畫(huà)，具有文件小巧、速度快、特效好、支持流媒體和交互功能強(qiáng)等特點(diǎn)，是網(wǎng)頁(yè)中最流行的動(dòng)畫(huà)格式，在網(wǎng)頁(yè)的頁(yè)面中得到大量的應(yīng)用?？梢圆迦氲腇lash對(duì)象如下：在頁(yè)面中插入Flash動(dòng)畫(huà) 插入Flash視頻.4網(wǎng)頁(yè)中的音頻和視頻網(wǎng)頁(yè)中的音頻和視頻 我們可以利用Dreamweaver CS6提供的插件插入各種格式的音頻和視頻文件，使網(wǎng)頁(yè)表現(xiàn)的內(nèi)容更加豐富多彩。1. 1.為頁(yè)面設(shè)置音頻為頁(yè)面設(shè)置音頻（1）在網(wǎng)頁(yè)中插入音頻文件（2）為插入的音頻文件設(shè)置屬性（3）音頻參數(shù)簡(jiǎn)介1111第

12、3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.53.5網(wǎng)頁(yè)中的多媒體元素網(wǎng)頁(yè)中的多媒體元素.4網(wǎng)頁(yè)中的音頻和視頻網(wǎng)頁(yè)中的音頻和視頻2.2.頁(yè)面中插入視頻文件頁(yè)面中插入視頻文件在頁(yè)面中插入的視頻文件可以是asf、wmv、mpeg或mpg、avi、rm、mov等格式，但能不能播放取決于是否有相適應(yīng)的插件。3.63.6頁(yè)面中的超鏈接頁(yè)面中的超鏈接對(duì)于一個(gè)完整的網(wǎng)站來(lái)說(shuō)，各個(gè)頁(yè)面之間是通過(guò)超鏈接互相聯(lián)系的，如果沒(méi)有鏈接，網(wǎng)頁(yè)就成了孤立文件。 Dreamweaver CS6 提供多種創(chuàng)建超文本鏈接的方法，可創(chuàng)建到文檔、圖像、多媒體文件或可下載軟件的鏈接。.1鏈接與路徑鏈接與路徑一個(gè)站

13、點(diǎn)中通常有以下三種類型的文件路徑： 絕對(duì)路徑 相對(duì)于文檔的路徑 相對(duì)于根目錄的路徑1212第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.63.6頁(yè)面中的超鏈接頁(yè)面中的超鏈接.2建立文本或圖像鏈接建立文本或圖像鏈接所謂的文本、圖像鏈接指的是鏈接的源端點(diǎn)為文本或圖像。1. 1.文本超鏈接文本超鏈接若要使所鏈接的文檔出現(xiàn)在當(dāng)前窗口或框架以外的其它位置，可從屬性面板的“目標(biāo)”彈出菜單進(jìn)行設(shè)置，其中選項(xiàng)如下： _blank 將鏈接的文檔載入一個(gè)新的、未命名的瀏覽器窗口。 _parent 將鏈接的文檔載入該鏈接所在框架的父框架或父窗口。如果包含鏈接的框架不是嵌套框架，則所鏈接的文檔載入整個(gè)瀏覽器窗口

14、。 _self 將鏈接的文檔載入鏈接所在的同一框架或窗口。此目標(biāo)是默認(rèn)的，所以通常不需要指定它。 _top 將鏈接的文檔載入整個(gè)瀏覽器窗口，從而刪除所有框架。 “風(fēng)景”文本隨即被加上下劃線并變?yōu)樗{(lán)色，表明它現(xiàn)在是一個(gè)鏈接。2.2.圖片超鏈接圖片超鏈接1313第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.63.6頁(yè)面中的超鏈接頁(yè)面中的超鏈接.2建立文本或圖像鏈接建立文本或圖像鏈接2.2.圖片超鏈接圖片超鏈接3.3.使用使用“指向文件指向文件”圖標(biāo)創(chuàng)建超級(jí)鏈接圖標(biāo)創(chuàng)建超級(jí)鏈接3.6.3 3.6.3 電子郵件超鏈接電子郵件超鏈接電子郵件鏈接可以打開(kāi)與當(dāng)前瀏覽器相關(guān)聯(lián)的電子郵件程序，在電子郵件消

15、息窗口中，“收件人”文本框自動(dòng)更新為顯示電子郵件鏈接中指定的地址。選擇菜單“插入”“電子郵件鏈接”命令或在“插入”欄的“常用”類別中，單擊“電子郵件鏈接”按鈕插入電子郵件超鏈接。3.6.4 3.6.4 空鏈接和腳本連接空鏈接和腳本連接空鏈接是未指派的鏈接，訪問(wèn)者單擊網(wǎng)頁(yè)中的空鏈接將不會(huì)打開(kāi)任何文件，但空鏈接可以用于向頁(yè)面上的對(duì)象或文本附加行為。創(chuàng)建空鏈接后，可向空鏈接附加行為，以便當(dāng)鼠標(biāo)指針滑過(guò)該鏈接時(shí)，交換圖像或顯示層。若要?jiǎng)?chuàng)建空鏈接，在“文檔”窗口的“設(shè)計(jì)”視圖中選擇文本、圖像或?qū)ο?。在屬性面板的“鏈接”文本框中，輸?javascript:javascript:；或# #創(chuàng)建空鏈接。14

16、14第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.63.6頁(yè)面中的超鏈接頁(yè)面中的超鏈接.5圖像熱點(diǎn)鏈接圖像熱點(diǎn)鏈接圖像的熱點(diǎn)鏈接是將圖像劃分為若干區(qū)域，每個(gè)區(qū)域被稱為一個(gè)熱點(diǎn)區(qū)，每個(gè)熱區(qū)可以分別設(shè)置不同的超級(jí)鏈接。在Dreamweaver CS6中，熱區(qū)可以是不同的形狀，如圓形、矩形、不規(guī)則圖形等。3.6.6 3.6.6 創(chuàng)建錨記鏈接創(chuàng)建錨記鏈接在瀏覽網(wǎng)頁(yè)時(shí)，當(dāng)網(wǎng)頁(yè)的內(nèi)容過(guò)長(zhǎng)時(shí)，需要拖動(dòng)上下滾動(dòng)條來(lái)查看，這樣比較麻煩，其實(shí)，使用Dreamweaver 8中命名錨記功能可以很好地解決這個(gè)問(wèn)題。命名錨記可以使用戶在文檔中設(shè)置標(biāo)記，這些標(biāo)記通常放在文檔的特定主題處或頂部。然后可以創(chuàng)建到這些命名

17、錨記的鏈接，這些鏈接可快速將訪問(wèn)者帶到指定位置。創(chuàng)建到命名錨記的鏈接的過(guò)程分為兩步：創(chuàng)建命名錨記創(chuàng)建到該命名錨記的鏈接。1515第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.63.6頁(yè)面中的超鏈接頁(yè)面中的超鏈接.7創(chuàng)建跳轉(zhuǎn)菜單創(chuàng)建跳轉(zhuǎn)菜單跳轉(zhuǎn)菜單是文檔中的一種下拉菜單，用于顯示給瀏覽者，并列出鏈接到文檔或文件的選項(xiàng)。用戶可以創(chuàng)建包含鏈接站點(diǎn)其它文件的跳轉(zhuǎn)菜單。選擇“插入”“表單”“跳轉(zhuǎn)菜單”或在“插入”工具欄的“表單”類別中單擊“跳轉(zhuǎn)菜單”按鈕 。出現(xiàn)“插入跳轉(zhuǎn)菜單”對(duì)話框，如下圖所示。1616第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.63.6頁(yè)面中的超鏈接頁(yè)面中的超鏈接.8鏈

18、接的管理鏈接的管理在維護(hù)網(wǎng)站或感覺(jué)網(wǎng)站鏈接不完善時(shí)，需要對(duì)鏈接進(jìn)行修改、更新。對(duì)鏈接的查看、修改和更新就是鏈接管理。1. 1.開(kāi)啟鏈接管理功能開(kāi)啟鏈接管理功能 若要在 Dreamweaver CS6 中啟用鏈接管理，選擇“編輯”“首選參數(shù)”，彈出首選參數(shù)對(duì)話框如下圖所示。2.2.檢查站點(diǎn)中的鏈接錯(cuò)誤檢查站點(diǎn)中的鏈接錯(cuò)誤1717第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.7 3.7 課堂實(shí)例課堂實(shí)例1 1：個(gè)人站點(diǎn)中新網(wǎng)頁(yè)的創(chuàng)建，文本的編輯及相關(guān)元素的插：個(gè)人站點(diǎn)中新網(wǎng)頁(yè)的創(chuàng)建，文本的編輯及相關(guān)元素的插入入【實(shí)例目標(biāo)】通過(guò)本例的學(xué)習(xí)，使讀者能夠掌握頁(yè)面文檔中文字的輸入、文字顏色、字體大小、頁(yè)面屬性的設(shè)置

19、，紅色水平線、特殊字符的插入?！净舅悸贰縿?chuàng)建好站點(diǎn)以后就要開(kāi)始制作網(wǎng)站中的網(wǎng)頁(yè)，網(wǎng)頁(yè)中文字的輸入、文字顏色、字體大小、頁(yè)面屬性的設(shè)置，紅色水平線、特殊字符的插入等基本操作，需依照以下步驟加以練習(xí)，方可熟練掌握?！静僮鞑襟E】（1） 在站點(diǎn)“我的站點(diǎn)”中，新建一個(gè)頁(yè)面，設(shè)置好標(biāo)題，將其保存在的”D：mysite文件夾里，名稱為“攝影技巧.html”，在其中輸入需要的文字，并設(shè)置好相應(yīng)的字體和顏色。1818第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.7 3.7 課堂實(shí)例課堂實(shí)例1 1：個(gè)人站點(diǎn)中新網(wǎng)頁(yè)的創(chuàng)建，文本的編輯及相關(guān)元素的插：個(gè)人站點(diǎn)中新網(wǎng)頁(yè)的創(chuàng)建，文本的編輯及相關(guān)元素的插入入【操作步驟】（2）

20、打開(kāi)“屬性面板”，單擊“頁(yè)面屬性”按鈕，彈出頁(yè)面屬性對(duì)話框，在對(duì)話框中如圖3-101所示。圖3-101 頁(yè)面屬性的設(shè)置在對(duì)話框中進(jìn)行頁(yè)面字體、大小、文本顏色、背景顏色、背景圖片、頁(yè)面上下左右邊距的設(shè)置。1919第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.73.7課堂實(shí)例課堂實(shí)例1 1：個(gè)人站點(diǎn)中新網(wǎng)頁(yè)的創(chuàng)建，文本的編輯及相關(guān)元素的插：個(gè)人站點(diǎn)中新網(wǎng)頁(yè)的創(chuàng)建，文本的編輯及相關(guān)元素的插入入【操作步驟】（3） 將光標(biāo)放在要插入水平線的位置，選擇“插入”“HTML”“水平線”，插入一條水平線。（4） 選中剛插入的水平線，并打開(kāi)其屬性面板，如圖3-102所示。在面板上單擊 按鈕，打開(kāi)快速標(biāo)簽編輯器，在快速標(biāo)簽編

21、輯器中直接輸入顏色的代碼和紅色色標(biāo)值，以設(shè)置水平線的顏色3-102所示。圖3-102 設(shè)置紅色水平線2020第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.73.7課堂實(shí)例課堂實(shí)例1 1：個(gè)人站點(diǎn)中新網(wǎng)頁(yè)的創(chuàng)建，文本的編輯及相關(guān)元素的插：個(gè)人站點(diǎn)中新網(wǎng)頁(yè)的創(chuàng)建，文本的編輯及相關(guān)元素的插入入【操作步驟】（5） 將光標(biāo)定位在需要插入特殊字符的位置，執(zhí)行“插入”“HTML”“特殊字符”命令，在子菜單中選擇合適的字符，或在“文本”面板中選擇“字符”下拉菜單中的字符命令，如圖3-103所示，在光標(biāo)處插入字符。如果沒(méi)有要選的字符，則可以選擇“其他字符命令”打開(kāi)“插入其他字符”對(duì)話框。圖3-103“文本”面板中的字符命

22、令2121第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.7 3.7 課堂實(shí)例課堂實(shí)例2 2：網(wǎng)頁(yè)標(biāo)題、頁(yè)面背景顏色和頁(yè)面背景圖像的設(shè)置【實(shí)例目標(biāo)】 通過(guò)本例的學(xué)習(xí)，使讀者能夠掌握網(wǎng)頁(yè)標(biāo)題和頁(yè)面背景的設(shè)置?！净舅悸贰縿?chuàng)建頁(yè)面標(biāo)題可以使瀏覽者清楚自己正在瀏覽的頁(yè)面的內(nèi)容，網(wǎng)頁(yè)標(biāo)題可以是中文、英文或符號(hào)，編輯它可以直接在設(shè)計(jì)窗口上方的“標(biāo)題”欄內(nèi)進(jìn)行也可以通過(guò)修改頁(yè)面屬性的方式來(lái)設(shè)置或編輯。使用背景顏色和背景圖像的好處是可以改變?cè)瓉?lái)枯燥、單一的頁(yè)面，有利于突出顯示網(wǎng)站的風(fēng)格和特點(diǎn)，為頁(yè)面設(shè)置背景顏色和圖像可以通過(guò)屬性面板和修改頁(yè)面屬性的方式來(lái)設(shè)置或編輯。【操作步驟】（1）打開(kāi)或者是創(chuàng)建一個(gè)頁(yè)面文件，直接在設(shè)

23、計(jì)窗口上方的“標(biāo)題”欄內(nèi)輸入“頁(yè)面標(biāo)題” 。2222第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.73.7課堂實(shí)例課堂實(shí)例2 2：網(wǎng)頁(yè)標(biāo)題、頁(yè)面背景顏色和頁(yè)面背景圖像的設(shè)置【操作步驟】（2）選擇“修改”“頁(yè)面屬性”命令，或在頁(yè)面空白處單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“頁(yè)面屬性”命令，打開(kāi)“頁(yè)面屬性”對(duì)話框（3）單擊背景右側(cè)的 按鈕，在彈出的調(diào)色板中選擇一種合適的顏色，然后單擊確定按鈕，頁(yè)面的背景就變成剛剛設(shè)定的顏色如下圖所示。（4）單擊“背景圖像”文本框右側(cè)的“瀏覽”按鈕，打開(kāi)“選擇圖像源文件”對(duì)話框，選擇要作為背景的圖像文件。（5）選擇好文件后單擊“確定”按鈕確定，頁(yè)面顯示背景圖像。2323第3章

24、 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.73.7課堂實(shí)例課堂實(shí)例3 3：利用網(wǎng)頁(yè)頭部信息推廣網(wǎng)站：利用網(wǎng)頁(yè)頭部信息推廣網(wǎng)站【實(shí)例目標(biāo)】頭部?jī)?nèi)容包含一些重要的信息，如文檔類型、語(yǔ)言編碼、JavaScript和VBScript的函數(shù)以及變量、關(guān)鍵字信息、用于搜索引擎的內(nèi)容索引、樣式定義等，本實(shí)例通過(guò)設(shè)置網(wǎng)頁(yè)頭部信息推廣網(wǎng)站【基本思路】用戶并不一定要為每個(gè)網(wǎng)頁(yè)都設(shè)置所有的頭部?jī)?nèi)容，通常只為主頁(yè)設(shè)置關(guān)鍵字信息和內(nèi)容索引就可以了。在Dreamweaver cs6中可以顯示文件的頭部?jī)?nèi)容。具體做法是：在插入工具欄上，選擇HTML選項(xiàng)，在“文件頭”下拉菜單中，可以顯示同HTML頭部?jī)?nèi)容相關(guān)的對(duì)象，文件頭標(biāo)簽主要包括M

25、ETA、關(guān)鍵字、說(shuō)明、刷新、基礎(chǔ)和連接。【操作步驟】（1）打開(kāi)或者是創(chuàng)建一個(gè)頁(yè)面文件，直接在設(shè)計(jì)窗口上方的“標(biāo)題”欄內(nèi)輸入“頁(yè)面標(biāo)題”為“練習(xí)”。2424第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.73.7課堂實(shí)例課堂實(shí)例3 3：利用網(wǎng)頁(yè)頭部信息推廣網(wǎng)站：利用網(wǎng)頁(yè)頭部信息推廣網(wǎng)站【操作步驟】（2）選擇菜單中的“插入”HTML“文件頭標(biāo)簽”“關(guān)鍵字”命令。（3）選擇“關(guān)鍵字”命令后，彈出如下圖所示的“關(guān)鍵字”對(duì)話框，在該對(duì)話框中輸入網(wǎng)頁(yè)的關(guān)鍵字內(nèi)容為“練習(xí)”，在第一行輸入文字“課堂練習(xí)”，將文字的字體設(shè)置為華文行楷，大小為36像素，字體顏色為“#000099”，并居中顯示。2525第3章 添加網(wǎng)頁(yè)內(nèi)容和

26、多媒體元素3.73.7課堂實(shí)例課堂實(shí)例3 3：利用網(wǎng)頁(yè)頭部信息推廣網(wǎng)站：利用網(wǎng)頁(yè)頭部信息推廣網(wǎng)站【操作步驟】（4）選擇“插入”“日期”命令，或在“插入”工具欄的“常用”類別中，單擊“日期”按鈕，打開(kāi)如下圖所示的插入日期對(duì)話框，星期與時(shí)間格式為從上至下的第2行，日期格式為從上至下的第2行，選擇儲(chǔ)存時(shí)自動(dòng)更新日期，單擊“確定”按鈕。（5）選中剛才插入的日期，單擊文本縮進(jìn)按鈕 ，縮進(jìn)6次。2626第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.7 3.7 課堂實(shí)例課堂實(shí)例4 4：在頁(yè)面中添加多媒體元素：在頁(yè)面中添加多媒體元素【實(shí)例目標(biāo)】通過(guò)本例的學(xué)習(xí)，使學(xué)生掌握在Dreamweaver CS6中插入多媒體元素的

27、方法。【基本思路】可以通過(guò)插件插入音頻和視頻文件，也可以直接利用菜單命令插入Flash動(dòng)畫(huà)、視頻等【操作步驟】（1）在一個(gè)網(wǎng)站中新建一個(gè)頁(yè)面，第一行輸入“頁(yè)面中添加多媒體元素”字樣，格式設(shè)置為“標(biāo)題1”，居中對(duì)齊。（2）搜索一首歌曲，擴(kuò)展名為Mp3或WMA均可，并設(shè)置參數(shù)隱藏播放面板如下圖所示。2727第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.7 3.7 課堂實(shí)例課堂實(shí)例4 4：在頁(yè)面中添加多媒體元素：在頁(yè)面中添加多媒體元素【操作步驟】（3）到網(wǎng)上搜索一個(gè)Flash動(dòng)畫(huà)，擴(kuò)展名為SWF，將光標(biāo)移至第三行，執(zhí)行“插入”“媒體”“SWF”菜單命令，插入到網(wǎng)頁(yè)中，調(diào)整好播放窗口的大小。（4）下載一個(gè)擴(kuò)展名

28、為FLV視頻文件，將光標(biāo)移至第四行，執(zhí)行“插入”“媒體”“FLV”命令，插入到網(wǎng)頁(yè)中，調(diào)整好播放窗口的大小。（5）準(zhǔn)備一個(gè)MPG格式的視頻文件，將光標(biāo)移至第四行，執(zhí)行“插入”“媒體”“shockwave”命令，插入到網(wǎng)頁(yè)中，調(diào)整好播放窗口的大小。（6） 在瀏覽器中瀏覽該頁(yè)面，觀察整體效果。2828第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.7 3.7 課堂實(shí)例課堂實(shí)例5 5：制作圖片熱點(diǎn)鏈接：制作圖片熱點(diǎn)鏈接【實(shí)例目標(biāo)】通過(guò)本例的學(xué)習(xí)，使讀者能夠掌握Dreamweaver CS6中圖片熱點(diǎn)鏈接的制作方法?！净舅悸贰吭诰W(wǎng)站中建立一個(gè)新網(wǎng)頁(yè)，將圖片插入到網(wǎng)頁(yè)里，使圖像的不同區(qū)域鏈接到不同的網(wǎng)頁(yè)【操作步驟

29、】（1）啟動(dòng)Dreamweaver CS6，建立一個(gè)名為“中國(guó)地圖”的網(wǎng)站，網(wǎng)站的首頁(yè)標(biāo)題為“各地政府網(wǎng)站鏈接”，保存為index.html。（2）在主頁(yè)中插入一幅中國(guó)地圖。（3）選擇剛插入的圖像，單擊屬性面板上相應(yīng)的創(chuàng)建熱區(qū)工具多邊形按鈕 ，選中圖片中的“黑龍江”和“遼寧”地圖區(qū)域，分別鏈接到黑龍江省政府網(wǎng)http:/ ，如圖3-4、3-5所示。2929第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.7 3.7 課堂實(shí)例課堂實(shí)例5 5：制作圖片熱點(diǎn)鏈接：制作圖片熱點(diǎn)鏈接【操作步驟】3030圖3.4熱區(qū)鏈接到網(wǎng)頁(yè)1圖3.5熱區(qū)鏈接到網(wǎng)頁(yè)2第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素3.8 3.8 本章小結(jié)本章小結(jié)本章

30、通過(guò)圖文并茂的講解，全面介紹了Dreamweaver CS6中網(wǎng)頁(yè)的創(chuàng)建與保存，網(wǎng)頁(yè)中文本的編輯，頁(yè)面屬性的設(shè)置，頁(yè)面頭部?jī)?nèi)容的設(shè)置,圖像的插入和編輯，音頻、視頻文件的插入和編輯，鏈接的設(shè)置和管理等內(nèi)容；通過(guò)五個(gè)課堂實(shí)例的操作，完成了簡(jiǎn)單的個(gè)人網(wǎng)站的制作，使學(xué)到的知識(shí)得以融會(huì)貫通。3131第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素思考與練習(xí)思考與練習(xí)3 31. 1.思考題：思考題：(1)在Dreamweaver cs6中字號(hào)有確定的單位嗎？(2)在Dreamweaver cs6中，網(wǎng)頁(yè)“關(guān)鍵字”設(shè)置的主要作用是什么？(3)如何設(shè)置圖像的對(duì)齊？(4)頁(yè)面中插入的圖像可以保存在本地磁盤(pán)中任意位置嗎？(5)什

31、么使圖像占位符，它有何作用？(6)在Dreamweaver cs6中如何插入Flash媒體文件？(7)頁(yè)面中一般可以使用哪幾種鏈接形式？(8)鏈接到命名錨記點(diǎn)時(shí)，錨記點(diǎn)必須一定要位于當(dāng)前文檔中嗎？(9)跳轉(zhuǎn)菜單元素可以是圖像嗎？3232第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素思考與思考與練習(xí)練習(xí)3 32. 2. 選擇題選擇題：（1）Dreamweaver CS6中有兩種類型的列表，分別是（ ）。A. 項(xiàng)目列表和編號(hào)列表 B. 項(xiàng)目列表和編碼列表C. 文本列表和編號(hào)列表 D. 文本列表和編碼列表（2）預(yù)覽網(wǎng)頁(yè)的快捷鍵為（ ）。A. “Ctrl+F12” B. “Shift+F12”C. “F12” D.

32、 “Ctrl+Shift+F12”（3）（ ）是非常有效的文本分隔工具，它可以讓站點(diǎn)訪問(wèn)者在文本和其他網(wǎng)頁(yè)元素之間形成視覺(jué)距離，這對(duì)于合理安排網(wǎng)頁(yè)元素非常有好處。A. 表格 B. 分隔符 C. 水平線 D. 文本3333第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素思考與練習(xí)思考與練習(xí)3 32. 2. 選擇題：選擇題：（4）在頁(yè)面文檔中加入水平線，在默認(rèn)情況下的寬度是（ ）。A. 480像素 B. 640像素C. 80% D.100%（5）要通過(guò)快捷鍵為文本添加不換行空格，可以按（ ）組合鍵。A. Ctrl+Enter B. Ctrl+SpaceC. Ctrl+Shift+Space D. Ctrl+Shi

33、ft+Enter（6）要為文本建立錨記鏈接，可以通過(guò)單擊“插入”工具欄的“常用”選項(xiàng)中的“命名錨記”按鈕來(lái)實(shí)現(xiàn)，也可以通過(guò)（ ）“命名錨記”命令來(lái)實(shí)現(xiàn)。A. “插入” B. “查看”C. “編輯” D. “文件”3434第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素思考與練習(xí)思考與練習(xí)3 32. 2. 選擇題：選擇題：（7）關(guān)于超鏈接的說(shuō)法正確的一項(xiàng)是（ ）A一個(gè)超鏈接是由被指向的目標(biāo)和指向目標(biāo)的鏈指針組成B超鏈接只能是文本內(nèi)容C超鏈接的目標(biāo)可以是不同網(wǎng)址，同一文件的不同部分，多媒體信息，但不能是應(yīng)用程序D當(dāng)單擊超鏈接時(shí)，瀏覽器將下載web地址（8）下面哪一種格式是視頻文件格式（ ）。AWMV BWAVCW

34、MA DWWW3535第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素思考與練習(xí)思考與練習(xí)3 32. 2. 選擇題：選擇題：（9）以下哪一種方式不能實(shí)現(xiàn)在頁(yè)面中插入MP3音頻文件操作（ ）。A. 鏈接音頻文件 B. 利用插件添加音頻B. 利用ActiveX添加音頻 C. 利用Shockwave添加音頻（10）在網(wǎng)頁(yè)中最常使用的圖像格式是：（ ） A.BMP和TIF B.JPG和BMPC.GIF和TIF D.JPG和GIF（11）（ ）是一種在瀏覽器中查看并使用鼠標(biāo)指針經(jīng)過(guò)它時(shí)發(fā)生變化的圖像。這種圖像是由首次載入頁(yè)面時(shí)顯示的圖像和鼠標(biāo)滑過(guò)時(shí)顯示的圖像組成。A. 鼠標(biāo)經(jīng)過(guò)圖像 B. 位圖 C. 縮略圖 D. 矢量

35、圖3636第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素思考與練習(xí)思考與練習(xí)3 32. 2. 選擇題：選擇題：（12）（ ）并不是在瀏覽器中顯示的最終圖像，它只是一種臨時(shí)的、替補(bǔ)的圖形A. 圖像占位符 B. 鼠標(biāo)經(jīng)過(guò)圖像C. 背景圖像 D. 原始圖像（13）GIF文件是在網(wǎng)絡(luò)下最常見(jiàn)的圖像格式，以下選項(xiàng)不屬于它的特點(diǎn)是（ ）A使用無(wú)損壓縮方案，圖像在壓縮后不會(huì)有細(xì)節(jié)的損失B是交織文件格式，在瀏覽器完成下載圖像之前，瀏覽者即可看到該圖像C不支持透明背景，不可以創(chuàng)建帶有透明區(qū)域的圖像D圖像格式的通用性好，幾乎所有瀏覽器都支持此圖像格式，并且有許多免費(fèi)軟件支持GIF圖像文件的編輯3737第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒

36、體元素思考與練習(xí)思考與練習(xí)3 32. 2. 選擇題：選擇題：（14）若要將鏈接文件加載到未命名的新瀏覽器窗口中，應(yīng)選擇（ ）A_blankB_parentC_selfD_top（15）在創(chuàng)建熱點(diǎn)鏈接的時(shí)候，用于創(chuàng)建矩形熱點(diǎn)的工具是（ ）A B C D （16）若要對(duì)文本進(jìn)行編號(hào)列表，則可以選擇的快捷工具按鈕是（ ）A B C D 3838第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素思考與練習(xí)思考與練習(xí)3 32. 2. 選擇題：選擇題：（17）在默認(rèn)情況下，下面關(guān)于給文字插入超鏈接說(shuō)法正確的是（ ）A插入超鏈接后會(huì)發(fā)現(xiàn)文字已經(jīng)變成藍(lán)色，并且下面出現(xiàn)下劃線B只能對(duì)文字進(jìn)行超鏈接C插入超鏈接后悔發(fā)現(xiàn)文字已經(jīng)變成

37、藍(lán)色，但是不會(huì)出現(xiàn)下劃線D以上說(shuō)法都錯(cuò)誤（18）以下能夠創(chuàng)建空鏈接的是（ ）A在“鏈接”文本框中直接輸入“#”B在“鏈接”文本框中直接輸入“!”C在“鏈接”文本框中直接輸入“$”D在“鏈接”文本框中直接輸入“”3939第3章 添加網(wǎng)頁(yè)內(nèi)容和多媒體元素思考與練習(xí)思考與練習(xí)3 33. 3. 判斷題：判斷題：（1）在Dreamweaver cs6頁(yè)面文檔中可以直接導(dǎo)入擴(kuò)展名為T(mén)XT的文檔。（ ）（2）在Dreamweaver cs6中，通過(guò)“對(duì)象面板”，可以對(duì)一個(gè)網(wǎng)頁(yè)的名稱、網(wǎng)頁(yè)背景、網(wǎng)頁(yè)鏈接文字屬性、網(wǎng)頁(yè)邊界等進(jìn)行設(shè)置。（ ）（3）用于鼠標(biāo)經(jīng)過(guò)圖像的兩幅圖像的大小必須相同，否則容易造成圖像失真。（ ）（4）PNG文件是網(wǎng)上最常用的圖片格式之一。（ ）（5）在Dreamweaver cs6中，可以直接調(diào)用PS編輯網(wǎng)頁(yè)中的圖像。（