網(wǎng)頁(yè)設(shè)計(jì)中圖片格式進(jìn)行優(yōu)化和壓縮

在用瀏覽器打開(kāi)網(wǎng)頁(yè)時(shí),瀏覽器會(huì)從服務(wù)器上下載這個(gè)網(wǎng)頁(yè)和網(wǎng)頁(yè)上的多媒體內(nèi)容。如果網(wǎng)頁(yè)上的圖片文件很大,這時(shí)因?yàn)榫W(wǎng)絡(luò)速度的原因,網(wǎng)頁(yè)的打開(kāi)速度就會(huì)很慢,因此需要用軟件把網(wǎng)頁(yè)上的圖片進(jìn)行優(yōu)化。網(wǎng)頁(yè)上的圖片,一般要求有很好的視覺(jué)效果,但是對(duì)于一般的圖片,在顏色單一的情況下,可以對(duì)圖片的格式進(jìn)行優(yōu)化和壓縮。網(wǎng)頁(yè)上的圖片一般是GIF格式或JPG格式。在網(wǎng)頁(yè)設(shè)計(jì)時(shí),需要根據(jù)圖片的類型和實(shí)際需要合理地選擇這兩種圖片格式。

GIF是網(wǎng)絡(luò)上使用最早、應(yīng)用最為廣泛的圖像格式。GIF的主要原理是減少圖像中每點(diǎn)顏色的存儲(chǔ)位數(shù)來(lái)實(shí)現(xiàn)對(duì)圖像文件的壓縮,也可以理解為,GIF減少了圖片色板中顏色的數(shù)量,從而在存儲(chǔ)時(shí)減小了文件的大小。GIF減少了圖像的顏色,在圖像顯示時(shí)可能不能完全還原以前的色彩,但是由于其極大地壓縮了圖片,有利于網(wǎng)絡(luò)傳輸,所以在網(wǎng)絡(luò)上有著廣泛的應(yīng)用。

GI支持透明背景和動(dòng)畫(huà)效果,這就可以更加豐富網(wǎng)頁(yè)的媒體效果JPG是一種在網(wǎng)絡(luò)上被廣泛支持的圖片格式。JPG可以支持24位真彩色,可以很好地還原圖片的色彩。圖像處理軟件可以把JG圖片進(jìn)行不同程度的壓縮和存儲(chǔ)。

1、Fireworks與 Dreamweaver的關(guān)聯(lián)操作

Fireworks和 Dreamweaver都是專業(yè)的網(wǎng)頁(yè)設(shè)計(jì)軟件。在網(wǎng)頁(yè)設(shè)計(jì)時(shí),兩種軟件常常是關(guān)聯(lián)操作的互相配合完成不同的功能。

Fireworks是圖片設(shè)計(jì)軟件,集成了很多切片鏈接、熱點(diǎn)鏈接等功能,可以方便地在圖片中插入鏈接并方便地導(dǎo)出為網(wǎng)頁(yè)。

Dreamweaver是網(wǎng)頁(yè)設(shè)計(jì)軟件,也集成了許多圖片處理的工具和操作,可以方便地對(duì)網(wǎng)頁(yè)中的圖片進(jìn)行優(yōu)化和處理。

在網(wǎng)頁(yè)設(shè)計(jì)時(shí),需要靈活地使用 Fireworks和 Dreamweaver的強(qiáng)大功能。在圖片設(shè)計(jì)時(shí)充分優(yōu)化和排版網(wǎng)頁(yè),在網(wǎng)頁(yè)設(shè)計(jì)時(shí)對(duì)圖片進(jìn)行有效的處理與設(shè)置。

2、優(yōu)化頁(yè)面圖像

在用 Dreamweaver進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí),可以利用 Dreamweaver的圖像處理功能,靈活地對(duì)圖像進(jìn)行處理與優(yōu)化。 Dreamweaver可以實(shí)現(xiàn)圖片的裁剪、優(yōu)化、圖片效果設(shè)置等功能

關(guān)聯(lián)至圖像軟件

在操作 Dreamweaver中的圖片時(shí),有時(shí)需要對(duì)網(wǎng)頁(yè)中的圖片進(jìn)行編輯,Dreamweaver在圖片屬性中提供了關(guān)聯(lián)到外部圖像軟件的功能。 Dreamweaver可以設(shè)置一個(gè)圖像編輯軟件,在設(shè)計(jì)視圖中,選擇一張圖片以后,可以單擊“屬性”面板中的“圖像編輯”工具,啟動(dòng)圖像編輯軟件對(duì)圖像進(jìn)行編輯

(1)在 Dreamweaver中選擇“編輯選參數(shù)”命令,彈出“選參數(shù)”對(duì)話框,在“分類列表中選擇“文件類型/編輯器”選項(xiàng)。

(2)單擊 Fireworks文本框后面的“瀏覽”按鈕,在“選擇外部編輯器”對(duì)話框中選擇 Fireworks

CS6所在的路徑。 Fireworks CS6一般安裝在C: Program files\Adobe\ Adobe Fireworks CS6目錄下面,單擊“確定”按鈕,完成設(shè)

(3)也可對(duì)不同格式的文件設(shè)置不同的外部編輯器。單擊“擴(kuò)展名”列表中的一種擴(kuò)展名,然后在“編輯器”列表中添加一個(gè)外部編輯器。

(4)單擊“確定”按鈕,完成編輯器的設(shè)置。

3、圖片的優(yōu)化處理

在 Dreamweaver中設(shè)置了 Fireworks的路徑以后,即可在 Dreamweaver中對(duì)圖片進(jìn)行優(yōu)化和處理。這些操作可以使用 Fireworks cs6完成,但是在 Dreamweaver CS6中的操作會(huì)更方便，具體操作步驟如下：

(1)在計(jì)算機(jī)中的“E:”盤(pán)下新建一個(gè)文件夾eg11

(2)打開(kāi)本書(shū)光盤(pán),將“源文件\1圖片”中的3個(gè)圖片文件復(fù)制到步驟(1)新建的文件夾中

(3)打開(kāi) Dreamweaver src="/upload/pic19/p>

(5)選擇“插入圖像”命令,在打開(kāi)的“選擇圖像源文件”對(duì)話框中,選擇插入從光盤(pán)中復(fù)制的圖片alt.jpg

(6)選擇“文件保存”命令,保存文件。按F12鍵運(yùn)行預(yù)覽網(wǎng)頁(yè),網(wǎng)頁(yè)中圖片的效果如

(7)對(duì)圖片的優(yōu)化和設(shè)置可能會(huì)更改該圖片文件,為了便于對(duì)比操作,需要復(fù)制所插入的圖片文件。打開(kāi)文件夾“E:eg1l”,將文件a1jpg復(fù)制為al_1jpg、al2jpg、a_3jpg、al4jpg、al5jpg。

(8)網(wǎng)頁(yè)中常用的圖片格式是JPG格式或GIF格式。在“格式”下拉列表框中選擇JPEG選項(xiàng),然后在“品質(zhì)”文本框中輸入“29”,“品質(zhì)”文本框是對(duì)圖片質(zhì)量的設(shè)置。

4、圖片大小的調(diào)整

在網(wǎng)頁(yè)中插入過(guò)大的圖片時(shí),可以設(shè)置圖片的寬度和高度使圖片正常顯示。這樣雖然可以使圖片正常顯示,但是過(guò)大的圖片文件會(huì)影響網(wǎng)頁(yè)打開(kāi)的速度,需要重新設(shè)置圖片的大小。 Photoshop Cs6和Fireworks CS6可以用設(shè)置圖像大小的方法調(diào)整圖片的占用空間。 Dreamweaver CS6提供了圖像大小的設(shè)置工具,對(duì)圖片的大小設(shè)置非常方便,操作步驟如下

(1)打開(kāi) Dreamweaver CS6,選擇“文件”|“新建”命令,新建一個(gè)HTML網(wǎng)頁(yè)文件。

(2)選擇“文件保存”命令,將文件保存至“E:leg11”文件下,文件名為eg2html

(3)選擇“插入圖像”命令,在彈出的“選擇圖像源文件”對(duì)話框中,選擇插入從光盤(pán)中復(fù)制的圖片a2jpg。單擊“確定”按鈕,完成圖片插入。

(4)單擊“確定”按鈕完成設(shè)置。選擇“文件”|“保存”命令保存文件。

(5)按F12鍵運(yùn)行網(wǎng)頁(yè),網(wǎng)頁(yè)圖片的效果如圖11-9所示?？梢园l(fā)現(xiàn)圖片很大,需要對(duì)圖片的大小進(jìn)行設(shè)置。

(6)在 Dreamweaver Cs6的設(shè)計(jì)視圖中選擇插入的圖片,單擊“屬性”面板上的“優(yōu)化”按鈕對(duì)圖片進(jìn)行優(yōu)化。

(7)在圖片的優(yōu)化對(duì)話框中選擇“文件”選項(xiàng)卡,在“寬”文本框中輸入“400”,將圖片寬度和高度設(shè)置成圖片壓縮以后的大小。在“文件”選項(xiàng)卡中,已經(jīng)默認(rèn)選中“約束比例”復(fù)選框,圖片的高度會(huì)自動(dòng)設(shè)置并保持與原圖相同的比例。

(8)單擊“確定”按鈕,完成圖片大小的設(shè)置。選擇“文件”|“保存”命令,保存文件

(9)按F12鍵運(yùn)行網(wǎng)頁(yè),網(wǎng)頁(yè)圖片的效果如圖11-11所示。發(fā)現(xiàn)圖片已經(jīng)變小,可以在瀏覽器的窗口中完全顯示。

5、圖片的亮度與對(duì)比度的設(shè)置

Dreamweaver可以方便地對(duì)圖片的亮度與對(duì)比度進(jìn)行設(shè)置。這些設(shè)置與 Fireworks CS6中的圖片設(shè)置和 Photoshop cs6中圖片設(shè)置的效果是相同的打開(kāi) Dreamweaver CS6,選擇“文件新建”命令,新建一個(gè)HTML網(wǎng)頁(yè)文件。

(1)選擇“文件保存”命令,將文件保存至“E:eg11”文件下,文件名為eg3html

(2)選擇“插入”“圖像”命令,在彈出的“選擇圖像源文件”對(duì)話框中選擇插入圖片al_3:jpg，單擊“確定”按鈕,完成圖片插入。

(3)選擇“文件保存”命令,保存文件。

(4)按F12鍵運(yùn)行網(wǎng)頁(yè),網(wǎng)頁(yè)中圖片的原始效果。

(5)在 Dreamweaver CS6的設(shè)計(jì)視圖中選擇插入的圖片,單擊“屬性”面板上的“亮度和對(duì)比度”按鈕,,對(duì)圖片進(jìn)行亮度與對(duì)比度的設(shè)置

(6)為圖片的“亮度/對(duì)比度”對(duì)話框,拖動(dòng)“亮度”的滑塊,“亮度”文本框中會(huì)顯示相應(yīng)的數(shù)值。

(7)單擊“確定”按鈕,完成圖片亮度的設(shè)置。選擇“文件保存”命令,保存文件。

(8)按F12鍵運(yùn)行網(wǎng)頁(yè),網(wǎng)頁(yè)圖片的效果如圖11-14所示?？梢园l(fā)現(xiàn)網(wǎng)頁(yè)中圖片的亮度已經(jīng)改變。

(9)在 Dreamweaver CS6設(shè)計(jì)視圖的圖片后單擊,再選擇“插入圖像”命令,在彈出的“選擇圖像源文件”對(duì)話框中選擇插入圖片a14jpg。單擊“確定”按鈕,完成圖片的插入

(10)在 Dreamweaver cs6的設(shè)計(jì)視圖中選擇插入的圖片,單擊“屬性”面板上的“亮度和對(duì)比度”按鈕,對(duì)圖片進(jìn)行亮度與對(duì)比度的設(shè)置

(11)圖片的“亮度對(duì)比度”對(duì)話框,拖動(dòng)“對(duì)比度”的滑塊,“對(duì)比度”文本框中會(huì)顯示相應(yīng)的數(shù)值。

(12)單擊“確定”按鈕,完成圖片亮度的設(shè)置。選擇“文件”丨“保存”命令,保存文件。

(13)按F12鍵運(yùn)行網(wǎng)頁(yè),網(wǎng)頁(yè)圖片的效果如圖11-16所示?？梢园l(fā)現(xiàn)網(wǎng)頁(yè)中圖片的對(duì)比度已經(jīng)改變。

5、圖片的銳化設(shè)置

圖片的銳化就是使圖片不同顏色的邊界清晰,使圖片更具有層次感。 Dreamweaver的圖片銳化工具可以方便地對(duì)網(wǎng)頁(yè)的圖片進(jìn)行銳化設(shè)置

(1)打開(kāi) Dreamweaver CS6,選擇“文件”|“新建”命令,新建一個(gè)HTML網(wǎng)頁(yè)文件。

(2)選擇“文件保存”命令,將文件保存至“E:egl1”文件下,文件名為eg4htm。

(3)選擇“插入”“圖像”命令,在彈出的“選擇圖像源文件”對(duì)話框中選擇插入圖片a1_5jpg然后單擊“確定”按鈕,完成圖片插入

(4)選擇“文件保存”命令,保存文件。

(5)按F12鍵運(yùn)行網(wǎng)頁(yè),網(wǎng)頁(yè)圖片的原始效果。

(6)在 Dreamweaver Cs6的設(shè)計(jì)視圖中選擇插入的圖片,單擊“屬性”面板上的“銳化”按鈕△,對(duì)圖片進(jìn)行銳化設(shè)置

(7)如圖11-18所示為圖片的“銳化”對(duì)話框,拖動(dòng)“銳化”的滑塊,“銳化”文本框中會(huì)顯示相應(yīng)的數(shù)值。

(8)單擊“確定”按鈕,完成圖片亮度的設(shè)置。選擇“文件”丨“保存”命令,保存文件。

(9)按F12鍵運(yùn)行網(wǎng)頁(yè),網(wǎng)頁(yè)圖片的效果如圖11-19所示?？梢园l(fā)現(xiàn)網(wǎng)頁(yè)中圖片的亮度已經(jīng)改變。

6、圖片的裁剪

用Dreamweaver進(jìn)行網(wǎng)頁(yè)排版時(shí),如果需要對(duì)圖片進(jìn)行裁剪,可以不用外部工具進(jìn)行圖片裁剪。選擇Dreamweaver CS6的圖片裁剪工具,可以對(duì)圖片進(jìn)行方便的裁剪。

(1)打開(kāi) Dreamweaver CS6,選擇“文件新建”命令,新建一個(gè)HTML網(wǎng)頁(yè)文件。

(2)選擇“文件保存”命令,將文件保存至“E:leg11”文件下,文件名為eg5html。

(3)選擇“插入圖像”命令,在彈出的“選擇圖像源文件”對(duì)話框中選擇插入圖片al6jp單擊“確定”按鈕,完成圖片的插入。

(4)選擇“文件保存”命令,保存文件

(5)按F12鍵運(yùn)行網(wǎng)頁(yè),裁剪之前的圖片。

(6)在 Dreamweaver CS6的設(shè)計(jì)視圖中選擇插入的圖片,單擊“屬性”面板上的“裁剪”按鈕型對(duì)圖片進(jìn)行裁剪。此時(shí),設(shè)計(jì)視圖中的圖片會(huì)個(gè)邊框和拖動(dòng)點(diǎn),如圖所示。調(diào)整這個(gè)邊框的大小可以設(shè)置裁剪的區(qū)域,雙擊圖片,完成圖片的裁剪。

(7)圖片裁剪以后,設(shè)計(jì)視圖如圖。

當(dāng)前文章：網(wǎng)頁(yè)設(shè)計(jì)中圖片格式進(jìn)行優(yōu)化和壓縮
網(wǎng)站鏈接：http://www.muchs.cn/news37/222637.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、品牌網(wǎng)站建設(shè)、面包屑導(dǎo)航、網(wǎng)站制作、域名注冊(cè)、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)