網頁設計中圖片格式進行優(yōu)化和壓縮

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4、圖片大小的調整

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

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

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

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

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

(5)按F12鍵運行網頁,網頁圖片的效果如圖11-9所示。可以發(fā)現(xiàn)圖片很大,需要對圖片的大小進行設置。

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

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

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

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

5、圖片的亮度與對比度的設置

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

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

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

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

(4)按F12鍵運行網頁,網頁中圖片的原始效果。

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

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

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

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

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

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

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

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

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

5、圖片的銳化設置

圖片的銳化就是使圖片不同顏色的邊界清晰,使圖片更具有層次感。 Dreamweaver的圖片銳化工具可以方便地對網頁的圖片進行銳化設置

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

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

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

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

(5)按F12鍵運行網頁,網頁圖片的原始效果。

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

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

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

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

6、圖片的裁剪

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

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

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

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

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

(5)按F12鍵運行網頁,裁剪之前的圖片。

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

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

網站題目：網頁設計中圖片格式進行優(yōu)化和壓縮
URL標題：http://www.bm7419.com/news/222637.html

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

廣告

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