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

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

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

1、Fireworks與 Dreamweaver的關聯操作

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

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

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

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

2、優化頁面圖像

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

關聯至圖像軟件

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

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

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

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

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

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

3、圖片的優化處理

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

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

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

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

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

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

(7)對圖片的優化和設置可能會更改該圖片文件,為了便于對比操作,需要復制所插入的圖片文件。打開文件夾“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所示。可以發現圖片很大,需要對圖片的大小進行設置。

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

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

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

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

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

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

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

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

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

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

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

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

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

(8)按F12鍵運行網頁,網頁圖片的效果如圖11-14所示。可以發現網頁中圖片的亮度已經改變。

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

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

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

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

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

5、圖片的銳化設置

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

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

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

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

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

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

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

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

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

(9)按F12鍵運行網頁,網頁圖片的效果如圖11-19所示。可以發現網頁中圖片的亮度已經改變。

6、圖片的裁剪

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

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

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

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

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

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

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

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

當前文章：網頁設計中圖片格式進行優化和壓縮
網站鏈接：http://m.newbst.com/news37/222637.html

成都網站建設公司_創新互聯，為您提供App設計、品牌網站建設、面包屑導航、網站制作、域名注冊、外貿建站

廣告

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