DW_04在網(wǎng)頁中插入圖像

1、主講：主講：韓維良韓維良2022年年3月月網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院第一節(jié)第一節(jié) 認識網(wǎng)頁圖像認識網(wǎng)頁圖像圖像在網(wǎng)頁中具有提供信息、展示作品、裝飾網(wǎng)頁、表達個人情調(diào)和風(fēng)格的作用。用戶可以在網(wǎng)頁中使用GIF、JPEG(JPG）、PNG三種圖象格式，其中使用最廣泛的是GIF和JPEG兩種格式。GifGif文件文件：無損壓縮，可以使用透明背景,可以疊加多張Gif圖使用Gif動畫，但色彩數(shù)少，可用于Logo等于色彩不太豐富的圖片。JPEG(JPGJPEG(JPG）：有損壓縮，壓縮時忽略某些細節(jié)，色彩豐富，照片級的格式。3網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖

2、像2022年3月30日星期三教育學(xué)院PNGPNG：網(wǎng)絡(luò)專用圖像格式，兼有Gif、JPEG(JPG）格式的雙重優(yōu)點，屬于無損壓縮，但色彩豐富。4網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院第二節(jié)第二節(jié) 在網(wǎng)頁中插入圖像和圖像對象在網(wǎng)頁中插入圖像和圖像對象一、插入圖像一、插入圖像方法：單擊欲插入圖像處，在“插入”欄的“常用”類別中，單擊“圖像”圖標(biāo)或選擇“插入圖像”選擇一個圖形文件?；蛘邚恼军c文件夾中拖動一個圖像文件到網(wǎng)頁中欲插入處。特別說明特別說明：與添加文本不同，插入的圖像不能從別的文檔中復(fù)制；必須特別說明的是，插入到網(wǎng)頁中的圖像只能以文件的形式獨立存在于站點文件夾

3、中。5網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院6網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院插入一幅圖像后顯示下列對話框：替換文本替換文本：用于指定圖像顯示之前或圖像無法顯示時顯示的文本。當(dāng)瀏覽網(wǎng)頁時，鼠標(biāo)指向圖片上時將作為圖片提示信息顯示文本框中的文本。7關(guān)于圖像說明文件的鏈接，目前瀏覽器都還不支持該屬性。網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院盡量將網(wǎng)站中的所有圖像文件統(tǒng)一復(fù)制到站點的images文件夾中，如果圖像文件不在站點目錄中，DW會提示保存到站點目錄中。 注意圖像一般較大，不可過多地插入，一

4、般情況下，將網(wǎng)頁文件控制在40K左右，通過狀態(tài)欄知道。 通常做法通常做法：先在圖像處理軟件中降低分辨率，改變文件大小，尤其是對數(shù)碼相機拍攝的照片。8網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院二、插入鼠標(biāo)經(jīng)過圖像（翻轉(zhuǎn)圖像）二、插入鼠標(biāo)經(jīng)過圖像（翻轉(zhuǎn)圖像）鼠標(biāo)經(jīng)過圖像是一種在瀏覽器中查看并使用鼠標(biāo)指針移過它時發(fā)生變化的圖像，單擊則轉(zhuǎn)向指定的超級鏈接。用Java語言控制。 需要兩張圖片：一張是一般狀態(tài)下的圖片，另一張是鼠標(biāo)經(jīng)過時顯示的圖片。方法：將插入點置于要建立鼠標(biāo)經(jīng)過圖像的位置，單擊“插入”面板“常規(guī)”的“圖像”中的“鼠標(biāo)經(jīng)過圖像”按鈕?；蛘摺安迦雸D像對象鼠標(biāo)經(jīng)過

5、圖像”。實際上用于制作網(wǎng)頁中的超級鏈接。9網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院10實踐操作：用素材中的圖片在教師法的網(wǎng)頁中制作導(dǎo)航鏈接。鼠標(biāo)經(jīng)過時的提示文本鼠標(biāo)經(jīng)過時的提示文本網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院11例：用下列素材圖片制作導(dǎo)航欄網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院三、插入圖像占位符三、插入圖像占位符圖像占位符：顧名思義，僅表示顯示指定大小圖像的位置，并沒有指向一個具體的圖像。在代碼中，是沒有指定SRC源文件的圖像標(biāo)簽，顯示為灰色空白。實際作用在于先確定圖像的顯示位置大小，

6、以后再插入具體圖像。方法：將插入點置于要插入圖像占位符的位置，單擊“插入”面板“常規(guī)”的“圖像”中的“圖像占位符”按鈕?；蛘摺安迦雸D像對象鼠標(biāo)經(jīng)過圖像”。12網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院圖像占位符的屬性面板：13用指定的顏色顯示占位符SRC屬性是空的網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院四、插入四、插入FireworksHTMLFireworks是網(wǎng)頁三劍客（Dreamweaver 、Flash 、Fireworks）之一，用于設(shè)計制作圖像，也可以生成HTML文檔。本操作用于在網(wǎng)頁中插入一個由Fireworks制作的

7、HTML文檔。方法：將插入點置于要插入圖像占位符的位置，單擊“插入”面板“常規(guī)”的“圖像”中的“FireworksHTML”按鈕?；蛘摺安迦雸D像對象FireworksHTML”。14網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院15網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院第三節(jié)第三節(jié) 設(shè)置圖像屬性設(shè)置圖像屬性方法：單擊選中圖像，在屬性面板中，設(shè)置圖像的屬性。“源文件源文件”指定圖像文件的存放路徑。單擊文件夾圖標(biāo)以瀏覽到源文件，或者鍵入路徑?！按怪边吘啻怪边吘唷焙汀八竭吘嗨竭吘唷毖貓D像的邊緣添加邊距（以像素為單位），實為與其它內(nèi)容的間

8、距，即其它內(nèi)容靠近圖像的程度。 16替換文本替換文本圖像的內(nèi)部標(biāo)識圖像的內(nèi)部標(biāo)識網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院“垂直邊距”沿圖像的頂部和底部添加邊距?！八竭吘唷毖貓D像左側(cè)和右側(cè)添加邊距，如文字與圖片的距離。特別注意特別注意“對齊對齊”，左右可使圖片與文本的位置相對協(xié)調(diào)。，左右可使圖片與文本的位置相對協(xié)調(diào)?！斑吙蜻吙颉笔且韵袼貫閱挝坏膱D像邊框的寬度。默認為無邊框，相當(dāng)于加一個相框。 “編輯編輯”啟動在首選參數(shù)的“文件類型/編輯器”參數(shù)選擇中指定的圖像編輯器并打開選定的圖像?！疤娲敝杏糜谳斎雸D像的提示文字。 17網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2

9、022年3月30日星期三教育學(xué)院“寬”、“高”顯示圖像的大小尺寸。如果改變了圖像的原始大小尺寸，則在寬、高文本框右側(cè)會顯示出“重高圖像大小”按鈕，單擊則恢復(fù)到原始的大小。“原始”：指定載入正式圖像前顯示的低分辨率圖像。18網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院第四節(jié)第四節(jié) 編輯網(wǎng)頁圖像編輯網(wǎng)頁圖像一、調(diào)整圖像大小一、調(diào)整圖像大小放大、縮小圖像大小放大、縮小圖像大?。和蟿映叽缈攸c或直接在屬性面板中輸入寬度與高度的像素值；等比例放大、縮小圖像大小等比例放大、縮小圖像大?。喊醋hift同時拖動右下角控制點；一般不提倡修改圖片的大小，應(yīng)提前用圖像處理軟件修改到合適的

10、大小?；謴?fù)圖像大小恢復(fù)圖像大?。簞h除其屬性面板中的寬度、高度值，或者單擊“重高圖像大小”按鈕，即可恢復(fù)到原來的大小。 19網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院二、重新優(yōu)化圖像二、重新優(yōu)化圖像是指改變圖像大小后，按照改變以后的大小進行重新優(yōu)化，增加或者刪除像素，以使其變大或者變小。圖例尺寸變小后，會刪除像素，重新優(yōu)化會使數(shù)據(jù)丟失，品質(zhì)下降，文件變?。磮D像源會改變圖像源會改變）。方法：選中圖像，單擊“重新取樣”按鈕。20當(dāng)改變了選中的圖像后，才會有效網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院三、裁剪圖像的顯示區(qū)域三、裁剪圖像的顯示

11、區(qū)域方法：選中圖像，單擊“裁剪”按鈕，拖動裁剪控點，按回車結(jié)束。注意：裁剪會改變文件的大小,被裁剪區(qū)域?qū)h除。21網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院22裁剪我想要的網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院四、調(diào)整圖像的亮度和對比度四、調(diào)整圖像的亮度和對比度方法：選中圖像，單擊“亮度和對比度”按鈕。在亮度對比度對話框中設(shè)置亮度和對比度。23網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院五、銳化圖像五、銳化圖像方法：選中圖像，單擊“銳化”按鈕。在銳化對話框中設(shè)置。24網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖

12、像2022年3月30日星期三教育學(xué)院第五節(jié)第五節(jié) 使用外部圖像編輯器使用外部圖像編輯器一、設(shè)置外部圖像編輯器一、設(shè)置外部圖像編輯器設(shè)置不同類型圖像文件編輯器：選擇“編輯首選參數(shù)文件類型/編輯器”通過外部圖像編輯器對圖像文件進行修改。前提：安裝相應(yīng)的圖像編輯軟件（如PS、FW等）。25網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院26在左邊選擇文件類型，右邊單擊左上方的加號添加圖像編輯器網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院二、使用外部圖像編輯器二、使用外部圖像編輯器啟用圖像編輯器啟用圖像編輯器：選取圖像單擊屬性面板中的“編輯”按鈕即可

13、啟動相應(yīng)編輯器，并打開圖像文件，進行修改。 27網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院第六節(jié)第六節(jié) 圖文混排圖文混排一、圖文對齊一、圖文對齊1 1設(shè)置圖像與文字的關(guān)系設(shè)置圖像與文字的關(guān)系在屬性面板的對齊列表框中選擇合適的對齊方式。設(shè)置圖像相對于同一段落或行中其他元素的對齊方式，即圖像與文字在垂直方向上的對齊方式。（特別注意特別注意）。 28網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院例：例：在一個表格，添加適當(dāng)?shù)奈谋?，再輸入一幅圖像，設(shè)置對齊的各種方式。2 2、對齊圖像、對齊圖像可以使用對齊按鈕（左對齊、右對齊、居中對齊）設(shè)置圖像的水平對齊方式。方法：單擊圖像前或后，不要選中圖像，再在屬性面板中設(shè)置左中右對齊。 29網(wǎng)站建設(shè)網(wǎng)站建設(shè)第4章在網(wǎng)頁中插入圖像2022年3月30日星期三教育學(xué)院二、設(shè)置圖文間距二、設(shè)置圖文間距用于設(shè)置上下、左右與文本之間的間距。方法：選中圖像，在垂直邊距和