第5章網(wǎng)頁(yè)文本和圖像

1、網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版） http:/第5章 網(wǎng)頁(yè)文本和圖像 網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）本章學(xué)習(xí)內(nèi)容o 5.1 案例1 設(shè)計(jì)唐詩(shī)賞析網(wǎng)頁(yè)o 5.2 案例2 設(shè)計(jì)制作特效文字展示頁(yè)面o 5.3 學(xué)習(xí)任務(wù)：網(wǎng)頁(yè)圖像o 5.4 案例3 圖文混排設(shè)計(jì)電影介紹網(wǎng)站頁(yè)面o 5.5 實(shí)訓(xùn)網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）5.1 案例1 設(shè)計(jì)唐詩(shī)賞析網(wǎng)頁(yè)o 學(xué)習(xí)目標(biāo)：學(xué)習(xí)目標(biāo)：掌握在Dreamweaver CS5中為網(wǎng)頁(yè)文檔添加文本元素的方法，并能熟練使用CSS設(shè)置文本的樣式。o 知識(shí)要點(diǎn)：知識(shí)要點(diǎn)：在網(wǎng)頁(yè)中添加文本的3種方法；設(shè)置列表，添加特殊符號(hào)、水平線、日期等，用CSS對(duì)網(wǎng)頁(yè)文本樣式進(jìn)行設(shè)置

2、。案例效果如圖5-1所示。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）圖5-1 唐詩(shī)賞析頁(yè)面效果5.1 案例1 設(shè)計(jì)唐詩(shī)賞析網(wǎng)頁(yè)網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）5.1.1 輸入文本輸入文本 在Dreamweaver中默認(rèn)只能輸入一個(gè)空格，要輸入多個(gè)連續(xù)的空格可以通過(guò)以下方法實(shí)現(xiàn)：l選擇“插入HTML特殊字符不換行空格”菜單命令；l單擊“插入”面板“文本”類別中的【字符：不換行空格】圖標(biāo)按鈕 ；l按下組合鍵。5.1 案例1 設(shè)計(jì)唐詩(shī)賞析網(wǎng)頁(yè)網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版） 提示：選擇“編輯首選參數(shù)”菜單命令，或按組合鍵打開“首選參數(shù)”對(duì)話框，在“常規(guī)”分類選項(xiàng)中選定“編輯選項(xiàng)”中的“允許多個(gè)連續(xù)的空格”，在

3、文檔的“設(shè)計(jì)”視圖下可直接按下空格鍵輸入多個(gè)空格。 提示：若要只換行而不新建段落，可以在Dreamweaver CS5中選擇“插入HTML特殊字符換行符”菜單命令進(jìn)行換行，或者在“插入”面板“文本”類別中，單擊最后一個(gè)圖標(biāo)按鈕【字符：換行符】 實(shí)現(xiàn)換行；也可以按下組合鍵插入換行符。 5.1 案例1 設(shè)計(jì)唐詩(shī)賞析網(wǎng)頁(yè)網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）5.1.2 復(fù)制文本復(fù)制文本 選擇“編輯選擇性粘貼”菜單命令，或者按下組合鍵均可打開“選擇性粘貼”對(duì)話框。5.1 案例1 設(shè)計(jì)唐詩(shī)賞析網(wǎng)頁(yè)網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）5.1.3 導(dǎo)入文本導(dǎo)入文本 Dreamweaver CS5可以將XML文檔、表格

4、式數(shù)據(jù)、Word及Excel等文檔中的內(nèi)容直接導(dǎo)入到頁(yè)面中。5.1.4 設(shè)置項(xiàng)目符號(hào)或編號(hào)設(shè)置項(xiàng)目符號(hào)或編號(hào) 列表通常分為項(xiàng)目列表和編號(hào)列表兩大類。 1創(chuàng)建列表創(chuàng)建列表 在現(xiàn)有文本的基礎(chǔ)上創(chuàng)建列表時(shí)，每一段文本將作為列表中的一項(xiàng)，并非網(wǎng)頁(yè)中顯示的一行。5.1 案例1 設(shè)計(jì)唐詩(shī)賞析網(wǎng)頁(yè)網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）2創(chuàng)建嵌套列表創(chuàng)建嵌套列表 如果對(duì)最外層的列表項(xiàng)目執(zhí)行“凸出”命令，將取消該列表項(xiàng)目的符號(hào)或編號(hào)，使其不再作為列表中的項(xiàng)目。3修改列表項(xiàng)目符號(hào)或編號(hào)修改列表項(xiàng)目符號(hào)或編號(hào) 選擇“格式列表屬性”菜單命令；或單擊【列表項(xiàng)目】按鈕，打開“列表屬性”對(duì)話框。5.1 案例1 設(shè)計(jì)唐詩(shī)賞析網(wǎng)頁(yè)網(wǎng)

5、頁(yè)設(shè)計(jì)與制作案例教程（第2版）“列表屬性”對(duì)話框中各選項(xiàng)含義如下：l 列表類型：該下拉列表中包含“項(xiàng)目列表”、“編號(hào)列表”、“目錄列表”、“菜單列表”項(xiàng)，供用戶選擇；l 樣式：可選擇的列表符號(hào)（項(xiàng)目符號(hào)或正方形）或編號(hào)（數(shù)字、小寫羅馬字母、大寫羅馬字母、小寫字母、大寫字母）的樣式，項(xiàng)目列表默認(rèn)為項(xiàng)目符號(hào)，編號(hào)列表默認(rèn)為數(shù)字（1,2,3）；5.1 案例1 設(shè)計(jì)唐詩(shī)賞析網(wǎng)頁(yè)網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）l 開始計(jì)數(shù)：只用于編號(hào)列表，在其文本框中可輸入一個(gè)數(shù)字，作為編號(hào)列表中第一個(gè)項(xiàng)目的值，其后的項(xiàng)目在該值基礎(chǔ)上遞增。 l 新建樣式：設(shè)置選定的列表項(xiàng)目的符號(hào)或編號(hào)樣式。l 重設(shè)計(jì)數(shù)：只用于編號(hào)列表

6、，表示選定的列表項(xiàng)目從該數(shù)值開始重新計(jì)數(shù)。5.1 案例1 設(shè)計(jì)唐詩(shī)賞析網(wǎng)頁(yè)網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）5.1.5 插入特殊字符、水平線和日期插入特殊字符、水平線和日期 Dreamweaver CS5可以將XML文檔、表格式數(shù)據(jù)、Word及Excel等文檔中的內(nèi)容直接導(dǎo)入到頁(yè)面中。1插入特殊字符插入特殊字符5.1 案例1 設(shè)計(jì)唐詩(shī)賞析網(wǎng)頁(yè) 選擇“插入HTML特殊字符”菜單命令，或者單擊“插入”面板“文本”類別卡中最后一個(gè)按鈕右側(cè)的小三角 ，彈出面板按鈕，從中選擇所需的字符。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）2插入水平線插入水平線 在文檔窗口中，將光標(biāo)定位在要插入水平線的位置，選擇“插入HTML

7、水平線”菜單命令，或單擊“插入”面板“常用”類別中的【水平線】按鈕。 5.1 案例1 設(shè)計(jì)唐詩(shī)賞析網(wǎng)頁(yè)網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）5.1 案例1 設(shè)計(jì)唐詩(shī)賞析網(wǎng)頁(yè)水平線“屬性”面板中各項(xiàng)含義如下。l 寬、高：設(shè)置水平線的寬度、高度，以像素為單位，或以占頁(yè)面大小百分比表示。默認(rèn)寬度占頁(yè)面的100%。l 對(duì)齊：設(shè)置水平線的對(duì)齊方式，默認(rèn)為居中對(duì)齊。l 陰影：設(shè)置繪制水平線時(shí)是否帶陰影。取消此選項(xiàng)時(shí)，將使用純色繪制水平線。l 類：設(shè)置可以應(yīng)用的CSS樣式。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）3插入日期插入日期 選擇“插入日期”菜單命令；或者在“插入”面板“常用”類別卡中選擇日期按鈕 ，彈出“插入日期

8、”對(duì)話框，單擊【確定】按鈕即在頁(yè)面中插入日期。5.1 案例1 設(shè)計(jì)唐詩(shī)賞析網(wǎng)頁(yè)網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）5.1.6 設(shè)置文本屬性設(shè)置文本屬性 選定要設(shè)置的文本，其文本“屬性”面板分為“HTML”和“CSS”兩個(gè)類別，可以分別對(duì)文本應(yīng)用HTML 格式或CSS樣式。應(yīng)用 HTML 格式時(shí)，Dreamweaver會(huì)將標(biāo)簽或?qū)傩蕴砑拥巾?yè)面正文的 HTML 代碼中；應(yīng)用CSS樣式時(shí)，Dreamweaver會(huì)將屬性寫入文檔頭或單獨(dú)的樣式表中。1使用使用CSS設(shè)置文本屬性設(shè)置文本屬性5.1 案例1 設(shè)計(jì)唐詩(shī)賞析網(wǎng)頁(yè)網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）5.1 案例1 設(shè)計(jì)唐詩(shī)賞析網(wǎng)頁(yè)默認(rèn)的文本CSS“屬性”

9、面板，各項(xiàng)參數(shù)含義如下。l 目標(biāo)規(guī)則：顯示在“屬性”面板中正在編輯、使用的規(guī)則。可以在下拉列表中選擇、，或選擇現(xiàn)有類名稱以應(yīng)用于所選文本，或選擇來(lái)刪除已應(yīng)用的CSS規(guī)則。 l 編輯規(guī)則：?jiǎn)螕簟熬庉嬕?guī)則”按鈕，打開“新建CSS規(guī)則”對(duì)話框，從中定義一個(gè)新的CSS規(guī)則。l CSS面板：?jiǎn)螕簟綜SS面板】按鈕，打開“CSS樣式”面板，并在“當(dāng)前”視圖中顯示目標(biāo)規(guī)則的屬性。l 字體：設(shè)置目標(biāo)規(guī)則的字體，對(duì)應(yīng)font-family屬性。l 大?。涸O(shè)置目標(biāo)規(guī)則的字體大小，對(duì)應(yīng)font-size屬性網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）5.1 案例1 設(shè)計(jì)唐詩(shī)賞析網(wǎng)頁(yè)l 顏色按鈕：用于設(shè)置文字的顏色，對(duì)應(yīng)colo

10、r屬性，也可以在后面的文本框中輸入十六進(jìn)制數(shù)RGB值。l 粗體按鈕：向目標(biāo)規(guī)則添加粗體屬性，即font-weight為bold。l 斜體按鈕：向目標(biāo)規(guī)則添加斜體屬性，即font-style為italic。l 對(duì)齊按鈕組：通過(guò)單擊對(duì)齊按鈕，分別向目標(biāo)規(guī)則添加對(duì)齊屬性，對(duì)應(yīng)text-align屬性為left（左對(duì)齊）、center（居中對(duì)齊）、right（右對(duì)齊）、justify（兩端對(duì)齊）。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）2使用使用HTML設(shè)置文本屬性設(shè)置文本屬性5.1 案例1 設(shè)計(jì)唐詩(shī)賞析網(wǎng)頁(yè) 文本“屬性”面板中“HTML”類別，各項(xiàng)含義如下。l 格式：設(shè)置選定文本的段落樣式。其中，“段落”應(yīng)

11、用標(biāo)簽的默認(rèn)格式，“標(biāo)題n”應(yīng)用標(biāo)簽?zāi)J(rèn)格式（n表示從1至6），“預(yù)格式化”應(yīng)用標(biāo)簽?zāi)J(rèn)格式。 l ID：為所選內(nèi)容分配一個(gè)ID。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）5.1 案例1 設(shè)計(jì)唐詩(shī)賞析網(wǎng)頁(yè)l 類：顯示當(dāng)前應(yīng)用于所選文本的類樣式。在下拉菜單中可以選擇要應(yīng)用的樣式：“無(wú)”則刪除當(dāng)前所選樣式，“重命名”則重命名該樣式，“附加樣式表”則打開一個(gè)可以向頁(yè)面附加外部樣式表的對(duì)話框。l 粗體：通過(guò)粗體按鈕將或應(yīng)用于所選文本。l 斜體：通過(guò)斜體按鈕 將或應(yīng)用于所選文本。l 項(xiàng)目列表和編號(hào)列表：通過(guò)按鈕 、 分別為選定文本設(shè)置為項(xiàng)目列表或編號(hào)列表。l 內(nèi)縮區(qū)塊和刪除內(nèi)縮區(qū)塊：通過(guò)按鈕 、 分別應(yīng)用或刪除標(biāo)

12、簽，縮進(jìn)所選文本或刪除所選文本的縮進(jìn)。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）3使用使用CSS設(shè)置段落設(shè)置段落 通過(guò)CSS規(guī)則可以設(shè)置段落的行高、縮進(jìn)等?！?jx”CSS規(guī)則對(duì)應(yīng)代碼如下：.jx font-size: 14px;line-height: 200%;text-indent: 30px; 5.1 案例1 設(shè)計(jì)唐詩(shī)賞析網(wǎng)頁(yè)網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）5.2 案例2 設(shè)計(jì)制作特效文字展示頁(yè)面o 學(xué)習(xí)目標(biāo)：學(xué)習(xí)目標(biāo)：認(rèn)識(shí)CSS濾鏡，掌握用CSS濾鏡設(shè)計(jì)特殊效果文字的方法。o 知識(shí)要點(diǎn)：知識(shí)要點(diǎn)：常用基本CSS濾鏡的屬性，應(yīng)用CSS濾鏡的方法。案例效果如下圖所示。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版

13、）5.2.1 CSS濾鏡概述濾鏡概述 CSS濾鏡，又稱CSS過(guò)濾器，是微軟公司為增強(qiáng)瀏覽器功能而特意開發(fā)的、并整合在IE瀏覽器中的一類功能的集合，只有在IE內(nèi)核的瀏覽器中才支持，且瀏覽器版本需在IE4.0以上。 CSS濾鏡的應(yīng)用總體上和其他的CSS語(yǔ)句相同，語(yǔ)法為：filter:filtername(parameters);，即filter:濾鏡名稱(參數(shù));。 CSS濾鏡分為基本濾鏡和高級(jí)濾鏡兩種。直接作用于對(duì)象上，并且立即生效的濾鏡稱為基本濾鏡。需要配合JavaScript等腳本語(yǔ)言，能產(chǎn)生更多變幻效果的稱為高級(jí)濾鏡。5.2 案例2 設(shè)計(jì)制作特效文字展示頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）

14、5.2 案例2 設(shè)計(jì)制作特效文字展示頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）5.2.2 用用CSS濾鏡設(shè)計(jì)模糊字濾鏡設(shè)計(jì)模糊字 filter:Blur(Add=?,Direction=?,Strength=?); 各參數(shù)的含義如下。l Add：指定是否將對(duì)象改變成模糊效果，有兩個(gè)參數(shù)值，True（或非0值）和False（或0）。l Direction：設(shè)置模糊的方向。模糊效果是按照順時(shí)針?lè)较蜻M(jìn)行的。其中0代表垂直向上，每45一個(gè)單位，默認(rèn)值是向左的270。l Strength：設(shè)置有多少像素的寬度將受到模糊影響，默認(rèn)值是5像素。5.2 案例2 設(shè)計(jì)制作特效文字展示頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版

15、）5.2.3 用用CSS濾鏡設(shè)計(jì)陰影字濾鏡設(shè)計(jì)陰影字 filter: DropShadow(Color=?,OffX=?,OffY=?,Positive=?); 各參數(shù)的含義如下。l Color：代表投射陰影的顏色。l OffX和OffY：分別表示水平方向和垂直方向陰影的偏移量，取值為整數(shù)值。若設(shè)置為正整數(shù)，代表水平向右的方向和垂直向下的方向；設(shè)置為負(fù)整數(shù)則相反。l Positive：布爾值，True（或非0）為任何非透明像素建立投影，F(xiàn)alse（或0）為透明的像素部分建立投影。5.2 案例2 設(shè)計(jì)制作特效文字展示頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）5.2.4 用用CSS濾鏡設(shè)計(jì)發(fā)光字濾鏡設(shè)計(jì)

16、發(fā)光字 filter: Glow(Color=?,Strength=?); 各參數(shù)的含義如下。l Color：指定發(fā)光的顏色。l Strength：指定發(fā)光的強(qiáng)度，參數(shù)值從1到255。5.2.5 用用CSS濾鏡設(shè)計(jì)遮罩字濾鏡設(shè)計(jì)遮罩字 filter: Mask(Color=?); 各參數(shù)的含義如下。l Color：指定作為掩膜的顏色。5.2 案例2 設(shè)計(jì)制作特效文字展示頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）5.2.6 用用CSS濾鏡設(shè)計(jì)波浪字濾鏡設(shè)計(jì)波浪字 filter: Wave(Add=?,Freq=?,LightStrength=?,Phase=?,Strength=?);各參數(shù)的含義如下

17、。l Add：設(shè)置是否把對(duì)象打亂，True（或非0）代表把對(duì)象打亂，F(xiàn)alse（或0）代表不打亂。l Freq：設(shè)置生成波紋的頻率，即在對(duì)象上產(chǎn)生的波紋數(shù)目。l LightStrength：設(shè)置生成的波紋增強(qiáng)光的效果，參數(shù)值可以從0到100。5.2 案例2 設(shè)計(jì)制作特效文字展示頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）l Phase：設(shè)置正弦波開始的偏移量，取值范圍范圍為0100。l Strength：設(shè)置正弦波的振幅，參數(shù)值為整數(shù)。5.2.7 用用CSS濾鏡設(shè)計(jì)射線字濾鏡設(shè)計(jì)射線字 filter: Xray;5.2 案例2 設(shè)計(jì)制作特效文字展示頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）5.3 學(xué)習(xí)任務(wù)：

18、網(wǎng)頁(yè)圖像 本節(jié)學(xué)習(xí)任務(wù)本節(jié)學(xué)習(xí)任務(wù) 了解網(wǎng)頁(yè)中常用的圖像格式及特點(diǎn)，掌握在網(wǎng)頁(yè)中添加圖像及圖像對(duì)象的方法，掌握設(shè)置圖像屬性，以及用CSS設(shè)置圖像樣式的方法。5.3.1 網(wǎng)頁(yè)中常用的圖像格式網(wǎng)頁(yè)中常用的圖像格式 雖然存在很多種圖像文件格式，但網(wǎng)頁(yè)中使用的通常只有3種，即GIF、JPEG和PNG。l GIF（圖形交換格式）：GIF文件最多使用256種顏色，適合顯示色調(diào)不連續(xù)或具有大面積單一顏色的圖像，GIF文件的擴(kuò)展名為.gif。 網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）5.3 學(xué)習(xí)任務(wù)：網(wǎng)頁(yè)圖像lJPEG（聯(lián)合圖像專家組）：JPEG文件格式是用于攝影或連續(xù)色調(diào)圖像的較好格式，這是因?yàn)镴PEG文件可以包含

19、數(shù)百萬(wàn)種顏色。隨著JPEG文件品質(zhì)的提高，文件的大小和下載時(shí)間也會(huì)隨之增加。通常可以通過(guò)壓縮JPEG文件在圖像品質(zhì)和文件大小之間達(dá)到良好的平衡。JPEG文件的擴(kuò)展名為.jpg或.jpeg。lPNG（可移植網(wǎng)絡(luò)圖形）：PNG文件格式是一種替代GIF格式的無(wú)專利限制的格式，它包括對(duì)索引色、灰度、真彩色圖像以及Alpha通道透明度的支持。PNG文件可保留所有原始層、矢量、顏色和效果信息（如陰影），所有元素都是可以完全編輯的。PNG文件的擴(kuò)展名為.png。 網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）5.3 學(xué)習(xí)任務(wù)：網(wǎng)頁(yè)圖像5.3.2 插入圖像插入圖像 插入圖像方法。l選擇“插入圖像”菜單命令。l單擊“插入”面

20、板“常用”類別中的【圖像】按鈕 ，或?qū)⒃摪粹o拖到文檔窗口中。l使用組合鍵。l在“文件”或“資源”面板中選擇所需圖像，直接拖動(dòng)圖像到文檔窗口中。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）5.3.3 設(shè)置圖像屬性設(shè)置圖像屬性 插入圖像后，選中圖像，對(duì)應(yīng)“屬性”面板：lID：輸入圖像名稱，以便在使用Dreamweaver行為或腳本語(yǔ)言時(shí)可以引用該圖像。l寬、高：指定圖像被載入瀏覽器時(shí)所顯示的寬度、高度，單位是像素。5.3 學(xué)習(xí)任務(wù)：網(wǎng)頁(yè)圖像網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）l源文件：指定插入圖像文件的路徑。l替換：指定圖像無(wú)法正常顯示時(shí)代替圖像顯示的替換文本。l類：顯示當(dāng)前應(yīng)用于圖像的類樣式。l垂直邊距：指定沿

21、圖像的頂部和底部添加的邊距，以像素為單位。l水平邊距：指定沿圖像的左側(cè)和右側(cè)添加的邊距，以像素為單位。l邊框：指定圖像邊框的寬度，以像素為單位。默認(rèn)為無(wú)邊框。5.3 學(xué)習(xí)任務(wù)：網(wǎng)頁(yè)圖像網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）l從文件更新按鈕：在Photoshop中對(duì)原始圖像進(jìn)行更改操作后，可以通過(guò)從文件更新按鈕在Dreamweaver中對(duì)智能對(duì)象進(jìn)行更新。l裁剪按鈕：可以對(duì)圖像進(jìn)行裁切，刪除不需要的區(qū)域。l重新取樣按鈕：可以對(duì)已調(diào)整大小的圖像進(jìn)行重新取樣，提高圖片在新尺寸下的品質(zhì)。l亮度和對(duì)比度按鈕：可以調(diào)整圖像的亮度和對(duì)比度。l銳化按鈕：可以調(diào)整圖像的銳度。5.3 學(xué)習(xí)任務(wù)：網(wǎng)頁(yè)圖像網(wǎng)頁(yè)設(shè)計(jì)與制作案

22、例教程（第2版）5.3.4 用用CSS設(shè)置圖像樣式設(shè)置圖像樣式1用用CSS調(diào)整圖像顯示尺寸調(diào)整圖像顯示尺寸 用CSS調(diào)整圖像的顯示尺寸也需要設(shè)置圖像對(duì)象的width和height屬性。在CSS規(guī)則中，不僅可以使用“px”為單位，還可以使用“%”、“cm”、“in”等單位。2用用CSS調(diào)整圖像圖像邊距調(diào)整圖像圖像邊距 在標(biāo)簽的CSS規(guī)則定義對(duì)話框的“方框”類別中，在margin屬性集合中，分別設(shè)置“top”、“right”、“bottom”和“l(fā)eft”的值與單位。5.3 學(xué)習(xí)任務(wù)：網(wǎng)頁(yè)圖像網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）3用用CSS設(shè)置圖像邊框設(shè)置圖像邊框 在CSS規(guī)則定義對(duì)話框的“邊框”類別

23、中，在style屬性集合中，為四邊設(shè)置樣式；在width屬性集合中，設(shè)置四邊的粗細(xì)。4用用CSS設(shè)置網(wǎng)頁(yè)背景設(shè)置網(wǎng)頁(yè)背景 在CSS規(guī)則定義對(duì)話框的“背景”類別中，在background-color屬性中設(shè)置背景顏色；在background-image屬性中輸入背景圖像的路徑或選擇背景圖像；通過(guò)background-repeat屬性設(shè)置背景圖像的重復(fù)方式；通過(guò)background-attachment屬性設(shè)置背景圖像的附著性；通過(guò)background-position屬性設(shè)置背景圖像的位置。5.3 學(xué)習(xí)任務(wù)：網(wǎng)頁(yè)圖像網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）5.3.5 插入圖像占位符和鼠標(biāo)經(jīng)過(guò)圖像插入圖像

24、占位符和鼠標(biāo)經(jīng)過(guò)圖像1插入圖像占位符插入圖像占位符 選擇“插入圖像對(duì)象圖像占位符”菜單命令，或單擊“插入”面板“常用”類別中的【圖像占位符】圖標(biāo)按鈕 ，打開“圖像占位符”對(duì)話框。5.3 學(xué)習(xí)任務(wù)：網(wǎng)頁(yè)圖像網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版） 使用圖像占位符的目的只是占位，最后應(yīng)該用合適的圖像替換圖像占位符。l雙擊圖像占位符，打開“選擇圖像源文件”對(duì)話框，在資源列表中選定圖像文件，單擊【確定】按鈕完成替換。l選定圖像占位符后，在“屬性”面板的“源文件”文本框中直接輸入圖像文件的路徑。l選定圖像占位符后，單擊“屬性”面板“源文件”選項(xiàng)后的【瀏覽文件】圖標(biāo)按鈕 ，打開“選擇圖像源文件”對(duì)話框，然后選擇圖

25、像文件。l選定圖像占位符后，將“屬性”面板“源文件”選項(xiàng)后的【指向文件】圖標(biāo)按鈕 拖動(dòng)到“文件”面板的圖像文件上。5.3 學(xué)習(xí)任務(wù)：網(wǎng)頁(yè)圖像網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）5.3.5 插入圖像占位符和鼠標(biāo)經(jīng)過(guò)圖像插入圖像占位符和鼠標(biāo)經(jīng)過(guò)圖像2插入鼠標(biāo)經(jīng)過(guò)圖像插入鼠標(biāo)經(jīng)過(guò)圖像 選擇“插入圖像對(duì)象鼠標(biāo)經(jīng)過(guò)圖像”菜單命令，或單擊“插入”面板“常用”類別中的【鼠標(biāo)經(jīng)過(guò)圖像】圖標(biāo)按鈕 ，打開“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話框。5.3 學(xué)習(xí)任務(wù)：網(wǎng)頁(yè)圖像網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版） “插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話框中各選項(xiàng)的含義如下。l圖像名稱：鼠標(biāo)經(jīng)過(guò)圖像的名稱。l原始圖像：即頁(yè)面加載時(shí)顯示的主圖像。l鼠標(biāo)經(jīng)過(guò)圖

26、像：即鼠標(biāo)經(jīng)過(guò)主圖像時(shí)顯示的次圖像。l預(yù)載鼠標(biāo)經(jīng)過(guò)圖像：選中該選項(xiàng)時(shí)，次圖像將被預(yù)先加載到瀏覽器的緩存中，以便在顯示次圖像時(shí)不會(huì)發(fā)生延遲。l替換文本：用于在無(wú)法正常顯示圖像時(shí)顯示替換文本。l按下時(shí)，前往的URL：鼠標(biāo)經(jīng)過(guò)圖像時(shí)設(shè)置的超鏈接目標(biāo)地址。5.3 學(xué)習(xí)任務(wù)：網(wǎng)頁(yè)圖像網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）5.4 案例3 圖文混排設(shè)計(jì)電影介紹網(wǎng)站頁(yè)面o 學(xué)習(xí)目標(biāo)：學(xué)習(xí)目標(biāo)：掌握制作圖文混排網(wǎng)頁(yè)的方法和技能。o 知識(shí)要點(diǎn)：知識(shí)要點(diǎn)：圖像對(duì)齊方式的種類和設(shè)置方法。案例效果如如圖5-37所示。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）5.4 案例3 圖文混排設(shè)計(jì)電影介紹網(wǎng)站頁(yè)面圖5-37 影片介紹網(wǎng)站頁(yè)面效果網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版） “對(duì)齊”下拉列表中可使用的選項(xiàng)如下。l 默認(rèn)值：指定基線對(duì)齊。l 基線：將文本（或同一段落中的其他元素）的基線與圖像的底部對(duì)齊。l 頂端：將圖像的頂端與當(dāng)前行中最高項(xiàng)（圖像或文本）的頂端對(duì)齊。l 居中：將圖像的中線與當(dāng)前行的基線對(duì)齊。l 底部：類似基線，將圖像的底部與當(dāng)前行對(duì)齊。5.4 案例3 圖文混排設(shè)計(jì)電影介紹網(wǎng)站頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)與