網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)從入門到精通

《網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)從入門到精通》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、Note第5章在網(wǎng)頁(yè)中插入圖像第章在網(wǎng)頁(yè)中插入圖像（視頻講解：49分鐘）在網(wǎng)頁(yè)中，圖像的作用越來(lái)越重要。在一個(gè)頁(yè)面中加入適當(dāng)?shù)膱D像，可以使頁(yè)面顯得更生動(dòng)活潑、美觀大方，尤其是在一些展示、宣傳、藝術(shù)頁(yè)面中，圖像是必不可少的。此外，圖形給人的視覺(jué)印象總要比文字強(qiáng)烈得多，善用圖像可為網(wǎng)頁(yè)增色不少。如何合理有效地插入圖像就是本章要討論的問(wèn)題。同時(shí)，本章還將介紹使用CSS設(shè)置圖像樣式的方法，包括邊框、對(duì)齊方式和圖文混排等，并通過(guò)具體的實(shí)例闡述文字和圖片的綜合應(yīng)用。【學(xué)習(xí)重點(diǎn)】:網(wǎng)頁(yè)圖像概述:搜集網(wǎng)頁(yè)圖像素材:在網(wǎng)頁(yè)中

2、插入圖像:CSS設(shè)置圖片樣式的方法:CSS控制圖片的對(duì)齊方式:靈活使用CSS文字和圖片屬性進(jìn)行圖文混排·199·Note第5章在網(wǎng)頁(yè)中插入圖像5.1網(wǎng)頁(yè)圖像概述在設(shè)計(jì)和制作網(wǎng)頁(yè)之前，首先要制作網(wǎng)頁(yè)圖像，這是不可缺少的前期工作。制作一個(gè)網(wǎng)頁(yè)大部分時(shí)間都花在版面安排和圖像設(shè)計(jì)上。如果一個(gè)網(wǎng)頁(yè)版面安排合理、整潔、圖形設(shè)計(jì)精美，一定能讓人喜愛(ài)。制作網(wǎng)頁(yè)使用的圖像不僅要簡(jiǎn)單，還需要與整個(gè)頁(yè)面設(shè)計(jì)風(fēng)格、結(jié)構(gòu)特點(diǎn)、圖像要表達(dá)的內(nèi)容相協(xié)調(diào)，否則很難與頁(yè)面匹配。5.1.1網(wǎng)頁(yè)圖像格式網(wǎng)頁(yè)中對(duì)所使用的圖像格式是有限制的，不是任

3、何一種圖像格式的文件都能應(yīng)用到網(wǎng)頁(yè)中，所以在制作之前就要考慮到這一點(diǎn)，以免制作出來(lái)的圖像無(wú)法在網(wǎng)頁(yè)中使用。目前，網(wǎng)絡(luò)支持的圖形格式主要有JPEG/JPG、GIF和PNG3種。由于這3種格式各有利弊，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，要根據(jù)實(shí)際情況來(lái)選擇使用何種圖像格式。tJPEG/JPG：這是一種失真壓縮的圖像文件格式，其壓縮效果非常明顯，并支持真彩色24位和漸進(jìn)格式。雖然此格式支持真彩色24位，但壓縮后的文件相對(duì)網(wǎng)絡(luò)圖像而言仍然顯得很大，僅適用于對(duì)于質(zhì)量要求高的圖像，如顏色豐富的風(fēng)景畫和照相作品等，可以考慮使用這一格式。JP

4、EG格式在壓縮保存的過(guò)程中會(huì)以失真最小的方式丟掉一些人眼不易察覺(jué)的數(shù)據(jù)，因而以此格式保存后的圖像沒(méi)有原圖像的質(zhì)量好。tGIF：這是網(wǎng)頁(yè)中使用最多的圖像格式，它最大的優(yōu)點(diǎn)就是所生成的文件比較小，非常適合網(wǎng)絡(luò)傳輸，并且支持透明背景和動(dòng)畫功能。因此，此格式在網(wǎng)頁(yè)中應(yīng)用非常廣泛。GIF格式的圖像與JPEG格式不同，它為非失真壓縮，存儲(chǔ)格式為1位~8位。只支持256色，而不支持真彩色24位，這是GIF格式的主要缺點(diǎn)。tPNG：此格式是Fireworks的默認(rèn)格式，它是一種非失真壓縮格式，具有JPEG和GIF格式的全部

5、優(yōu)點(diǎn)，如支持透明背景、動(dòng)畫和真彩色24位。除了上面介紹的3種圖像格式之外，還有許多種圖像格式，如BMP、TIF、PSD、EPS等格式，但這些格式都無(wú)法直接使用到網(wǎng)頁(yè)中。因此，在設(shè)計(jì)網(wǎng)頁(yè)過(guò)程中，必須將這些圖像格式的文件先轉(zhuǎn)換成GIF、JPEG或PNG格式的文件。轉(zhuǎn)換方法很多，只要用Photoshop等圖像處理軟件打開(kāi)要轉(zhuǎn)換的圖像文件，另存為在網(wǎng)頁(yè)中使用的JPEG、GIF或PNG格式文件即可。5.1.2圖像下載速度從圖像顯示效果而言，當(dāng)然是圖像顏色越豐富越好，這樣可以很清晰地欣賞圖像。但對(duì)瀏覽者而言，就需要等待

6、更多的時(shí)間才能瀏覽到此圖像。因?yàn)轭伾截S富，圖像文件就越大，其在網(wǎng)絡(luò)上的傳輸也就越慢。因此，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，萬(wàn)不得已不要放入過(guò)大的圖像文件，也不要用過(guò)多的多媒體文件造成瀏覽者觀看頁(yè)面時(shí)的麻煩。其實(shí)，制作網(wǎng)絡(luò)圖像與制作普通圖像沒(méi)什么兩樣，不同點(diǎn)在于網(wǎng)絡(luò)圖像要在網(wǎng)絡(luò)上傳輸，因此除了要考慮圖像品質(zhì)之外，更多的則要考慮圖像文件的大小，以便圖像能夠更快地在網(wǎng)絡(luò)上傳輸?？刂茍D像文件大小，以便于在網(wǎng)絡(luò)上傳輸時(shí)，應(yīng)注意以下幾項(xiàng)。t圖像格式：不同的圖像格式，其壓縮率不同，所存儲(chǔ)的文件大小也不同。t圖像尺寸：圖像尺寸越大，圖像文

7、件就越大。反之，圖像尺寸越小，文件就越小?！?99·Note第5章在網(wǎng)頁(yè)中插入圖像t顏色數(shù)目：在一個(gè)圖像中，顏色越豐富，所記錄的數(shù)據(jù)就越多，因而保存后的文件也就越大。t分辨率：分辨率是指在單位長(zhǎng)度內(nèi)所含有的點(diǎn)（或像素）的多少。因此，分辨率越大，所記錄的數(shù)據(jù)也就越多，文件也就越大。根據(jù)以上幾點(diǎn)，用戶就可以在制作圖像時(shí)，合理有效地控制圖像文件的大小了。但要注意，不要一味地追求文件大小，而忽略了圖像質(zhì)量。若如此，即使圖像文件再小也失去了意義。有時(shí)，不得不在網(wǎng)頁(yè)中放入一些大圖，但應(yīng)為瀏覽者多考慮，盡量讓這個(gè)圖像文件

8、最小。例如，可以使用Photoshop中的圖像分割功能，將圖像分割成多個(gè)小區(qū)域。這樣，在網(wǎng)絡(luò)上下載時(shí)就不會(huì)因圖像太大而造成漫長(zhǎng)的等待了。5.1.3網(wǎng)頁(yè)圖像制作技巧無(wú)論用戶是初學(xué)者還是圖像制作高手，在制作網(wǎng)頁(yè)圖像時(shí)，都應(yīng)掌握下面幾個(gè)要點(diǎn)。1．網(wǎng)絡(luò)圖像制作要小而精，忌大而濫網(wǎng)絡(luò)圖像不是在個(gè)人電腦上，在網(wǎng)絡(luò)上瀏覽網(wǎng)頁(yè)，速度非常重要，所以首先要考慮圖像文件的大小，盡量不使用500KB以上的圖像。此外，網(wǎng)頁(yè)中的圖像不在于多