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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(2)打開本書光盤,將“源文件\1圖片”中的3個圖片文件復(fù)制到步驟(1)新建的文件夾中

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6、圖片的裁剪

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

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

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

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

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

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

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

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

網(wǎng)站題目：網(wǎng)頁設(shè)計中圖片格式進(jìn)行優(yōu)化和壓縮
URL標(biāo)題：http://www.rwnh.cn/news/222637.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、標(biāo)簽優(yōu)化、企業(yè)網(wǎng)站制作、建站公司、電子商務(wù)、響應(yīng)式網(wǎng)站

廣告

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