dreamweaver8中文版網(wǎng)頁制作第6講圖像處理

1、第六講 圖像處理 1、圖像的插入 2、設(shè)置圖像格式 3、插入圖像對(duì)象.,1、圖像的插入,1．常用的圖像格式2．圖像插入3．圖像的上傳保存,1.1. 常用的圖像格式,在網(wǎng)頁中經(jīng)常使用的圖像是JPG和GIF圖，還有少量的PNG圖。JPG格式：全稱是JPEG，即聯(lián)合圖像專家組格式，是用于攝影或連續(xù)色調(diào)圖像的高級(jí)格式，這是因?yàn)镴PG圖可以包含幾百萬種顏色。隨著JPG文件品質(zhì)的

2、提高，文件的大小也將隨之增加。通常通過壓縮JPG文件在圖像的品質(zhì)和文件大小之間達(dá)到良好的平衡。GIG格式：即圖形交換模式。此類格式形成一種壓縮的8位圖像文件。正因?yàn)樗墙?jīng)過壓縮的，而且又是8位的，所以這種格式的文件大多用于網(wǎng)絡(luò)傳輸上，速度要比傳輸其它格式的圖像文件快得多，它的缺點(diǎn)就是不能用于存儲(chǔ)真彩的圖像文件。PNG格式：PNG(Portable Network Graphic Format，便攜式網(wǎng)絡(luò)圖象格式)是W3C 組織在20

3、世紀(jì)90年代中期開始開發(fā)的一種無損位圖文件存儲(chǔ)格式，是一種輕便、無法律障礙、壓縮性能好且規(guī)范好的一個(gè)標(biāo)準(zhǔn)，其目的是企圖替代GIF和TIFF，同時(shí)增加一些它們文件格式所不具備的特性。,1.2．插入圖像,執(zhí)行【插入】/【圖像】命令，打開【選擇圖像源文件】對(duì)話框，在【查找范圍】下拉列表中找到圖片所在目錄，單擊選中，然后單擊“確定”按鈕即可，如下圖所示。,,1.3．圖像的上傳保存,在創(chuàng)建站點(diǎn)的時(shí)候，一般都會(huì)在根目錄下創(chuàng)建一個(gè)images 文件夾

4、，用于專門的存放圖片文件。若插入的圖片與網(wǎng)頁文件不在相同的根目錄下，系統(tǒng)會(huì)提示用戶復(fù)制圖片到根目錄下。,,2、 設(shè)置圖像格式,1. 圖像格式2. 具體設(shè)置方法3．圖像編輯區(qū)4. 編輯圖像,2.1．圖像格式,圖像的格式主要有下面幾個(gè)方面：圖像大小更改：更改圖像大小有兩種方法，方法一：在【屬性】面板中設(shè)置【高】文本框和【寬】文本框；方法二：直接拖拉圖像邊框的控點(diǎn)。更給圖像的大小后，可以直接按按鈕，將圖片恢復(fù)到初始大小。

5、對(duì)齊方式：圖像的對(duì)齊方式有3種：左對(duì)齊、居中對(duì)齊、右對(duì)齊。默認(rèn)的對(duì)棄方式是：左對(duì)齊。圖文混排：在圖文混排的頁面中，可以通過設(shè)置【垂直邊距】文本框和【水平邊距】文本框來設(shè)置圖片和四周文本之間的間距的。在【對(duì)齊】列表中列舉了多種圖文混排的對(duì)齊方式。,2.2．具體設(shè)置方法,改變大小：設(shè)置對(duì)齊：設(shè)置邊距：,,,,2.3．圖像編輯區(qū),除了對(duì)圖像的格式進(jìn)行設(shè)置外，在【屬性】面板中還可以對(duì)圖像進(jìn)行編輯美化操作，如對(duì)圖像進(jìn)行編輯、裁減、亮

6、度和對(duì)比度以及銳化等菜做，如圖所示的圖片編輯區(qū) 。,2.4．圖像編輯,對(duì)圖像編輯主要有下面幾個(gè)方面：亮度、對(duì)比度、銳化等，下圖列舉了亮度和對(duì)比度的設(shè)置、銳化的設(shè)置。,,,3、 插入圖型對(duì)象,1. 圖型對(duì)象2. 圖像占位符3．鼠標(biāo)經(jīng)過圖像4. 導(dǎo)航條,3.1．圖像對(duì)象,在Dreamweaver 8中，系統(tǒng)為用戶提供了一些特殊的功能：圖像對(duì)象，如鼠標(biāo)經(jīng)過圖像、導(dǎo)航條、占位符等，如下圖所示。,3.2． 圖像占位符,在設(shè)計(jì)網(wǎng)頁，

7、如果頁面的框架已經(jīng)設(shè)計(jì)好了，但需要的圖像素材還沒有準(zhǔn)備齊全，此時(shí)可以插入一個(gè)指定大小的占位符，等將來圖片準(zhǔn)備好之后，再替換成圖片 。,,3.3． 鼠標(biāo)經(jīng)過圖像,在瀏覽器中當(dāng)鼠標(biāo)經(jīng)過圖像時(shí)，該圖像發(fā)生變化，這就是鼠標(biāo)經(jīng)過圖像。它實(shí)際上是由兩個(gè)圖像組成，當(dāng)鼠標(biāo)不在圖像上時(shí)，顯示原來圖像，當(dāng)鼠標(biāo)經(jīng)過時(shí)則顯示另外一個(gè)圖像 。,3.4． 導(dǎo)航條,由圖像或圖像組組成，這些圖像的顯示內(nèi)容隨用戶操作而變化。導(dǎo)航條通常為在站點(diǎn)上的頁面和文件之間移動(dòng)提供一