網頁上處理圖片方法

❶ 響應式網頁中圖片的處理方式

1、首先圖片分為背景圖片和通過img標簽引入的圖片，前者可以通過media
query自動的切換不同解析度的版本，但是在不支持background
image
size的瀏覽器中背景圖片無法無級的調整大小（也就是在media
query切換css的點上可以換一張不同解析度的圖，但是沒法兒獲得兩張解析度中間大小的版本），而且在很多情況下（比如cms中）並不適合用背景圖片。
2、是img標簽引入的圖片，可以使用延遲載入的方式來載入，在實際載入圖片之前先用js檢查窗口寬度，然後載入不同解析度的圖片，比如寬度<=480,就載入80px寬度的圖片，480
<
寬度
<=
768，載入120px的圖片，
寬度>
768則載入160px的圖片，如果寬度是600px怎麼辦呢，通過百分比來縮放120px的圖片達到合適的結果。這樣做的好處是對於移動設備來說，下載的圖片會小一些，減少網頁載入的時間。但是問題是豎屏向橫屏切換或者擴大瀏覽器窗口寬度時圖片會由於放大而產生一定的模糊感。
3、響應式設計中對於圖片的考慮應該從布局設計就開始，盡量使圖片在各個窗口寬度下的尺寸不要相差過大，通過排布更多的內容而不是擴大圖片的尺寸來填充由於瀏覽器窗口擴大帶來的空間。這樣可以有效的減少圖片放大模糊的問題。
4、圖片設置
max-width
至於是不是要設置多張不同尺寸的圖片
應該是看你的需求到底是針對哪些人群
如果設置多張建議兩張就夠了
設置一張稍微大點的
等比縮放也是不錯的選擇個人習慣是設置寬度跟max-width

❷ 我在網頁中插入了背景圖片，怎樣調整背景圖片的大小

可以使用css的background-size屬性來調整背景圖片的大小，比如：background-size: 240px 180px背景圖片的寬為240像素，高為180像素background-size: 50% 30%背景圖片的寬設為容器寬度的50%，高設為容器高度的30%background-size: cover把背景圖片擴展至足夠大，以使背景圖片完全覆蓋容器區域（背景圖片的某些部分也許無法顯示在容器區域中）background-size: contain把背景圖片擴展至最大尺寸，以使其寬度和高度完全適應容器區域（容器的部分邊角位置可能會留空）需要注意的是，background-size是css3的屬性，瀏覽器必須支持css3才能看到預期的效果。好在現在的主流瀏覽器都是支持css3的（如果你堅持用IE6那當我沒說）

❸ 網頁設計中的圖片處理問題

網站設計八步驟

由於目前所見即所得類型的工具越來越多，使用也越來越方便，所以製作網頁已經變成了一件輕松的工作，不像以前要手工編寫一行行的源代碼那樣。一般初學者經過短暫的學習就可以學會製作網頁，於是他們認為網頁製作非常簡單，就匆匆忙忙製作自己的網站，可是做出來之後與別人一比，才發現自己的網站非常粗糙，這是為什麼呢？常言道：「性急吃不了熱豆腐」。建立一個網站就像蓋一幢大樓一樣，它是一個系統工程，有自己特定的工作流程，你只有遵循這個步驟，按部就班地一步步來，才能設計出一個滿意的網站。

一、確定網站主題

網站主題就是你建立的網站所要包含的主要內容，一個網站必須要有一個明確的主題。特別是對於個人網站，你不可能像綜合網站那樣做得內容大而全，包羅萬象。你沒有這個能力，也沒這個精力，所以必須要找准一個自己最感興趣內容，做深、做透，辦出自己的特色，這樣才能給用戶留下深刻的印象。網站的主題無定則，只要是你感興趣的，任何內容都可以，但主題要鮮明，在你的主題范圍內內容做到大而全、精而深。

二、搜集材料

明確了網站的主題以後，你就要圍繞主題開始搜集材料了。常言道：「巧婦難為無米之炊」。要想讓自己的網站有血有肉，能夠吸引住用戶，你就要盡量搜集材料，搜集得材料越多，以後製作網站就越容易。材料既可以從圖書、報紙、光碟、多媒體上得來，也可以從互聯網上搜集，然後把搜集的材料去粗取精，去偽存真，作為自己製作網頁的素材。

三、規劃網站

一個網站設計得成功與否，很大程度上決定於設計者的規劃水平，規劃網站就像設計師設計大樓一樣，圖紙設計好了，才能建成一座漂亮的樓房。網站規劃包含的內容很多，如網站的結構、欄目的設置、網站的風格、顏色搭配、版面布局、文字圖片的運用等，你只有在製作網頁之前把這些方面都考慮到了，才能在製作時駕輕就熟，胸有成竹。也只有如此製作出來的網頁才能有個性、有特色，具有吸引力。如何規劃網站的每一項具體內容，我們在下面會有詳細介紹。 四、選擇合適的製作工具

盡管選擇什麼樣的工具並不會影響你設計網頁的好壞，但是一款功能強大、使用簡單的軟體往往可以起到事半功倍的效果。網頁製作涉及的工具比較多，首先就是網頁製作工具了，目前大多數網民選用的都是所見即所得的編輯工具，這其中的優秀者當然是Dreamweaver和Frontpage了，如果是初學者，Frontpage2000是首選。除此之外，還有圖片編輯工具，如Photoshop、Photoimpact等；動畫製作工具，如Flash、Cool 3d、Gif Animator等；還有網頁特效工具，如有聲有色等，網上有許多這方面的軟體，你可以根據需要靈活運用。

五、製作網頁

材料有了，工具也選好了，下面就需要按照規劃一步步地把自己的想法變成現實了，這是一個復雜而細致的過程，一定要按照先大後小、先簡單後復雜來進行製作。所謂先大後小，就是說在製作網頁時，先把大的結構設計好，然後再逐步完善小的結構設計。所謂先簡單後復雜，就是先設計出簡單的內容，然後再設計復雜的內容，以便出現問題時好修改。在製作網頁時要多靈活運用模板，這樣可以大大提高製作效率。

六、上傳測試

網頁製作完畢，最後要發布到Web伺服器上，才能夠讓全世界的朋友觀看，現在上傳的工具有很多，有些網頁製作工具本身就帶有FTP功能，利用這些FTP工具，你可以很方便地把網站發布到自己申請的主頁存放伺服器上。網站上傳以後，你要在瀏覽器中打開自己的網站，逐頁逐個鏈接的進行測試，發現問題，及時修改，然後再上傳測試。全部測試完畢就可以把你的網址告訴給朋友，讓他們來瀏覽。

七、推廣宣傳

網頁做好之後，還要不斷地進行宣傳，這樣才能讓更多的朋友認識它，提高網站的訪問率和知名度。推廣的方法有很多，例如到搜索引擎上注冊、與別的網站交換鏈接、加入廣告鏈等。

八、維護更新

網站要注意經常維護更新內容，保持內容的新鮮，不要一做好就放在那兒不變了，只有不斷地給它補充新的內容，才能夠吸引住瀏覽者
★要想學做網頁，首先得了解製作網頁的工具。

製作網頁主要有以下一些工具

Frontpage：office自帶的一個工具，操作簡單，實用，學起來比較輕松，功能不咋地，我不太喜歡。

Dreamweaver：這是網頁三劍客之一，專門製作網頁的工具，可以自動將網頁生成代碼，是普通網頁製作者的首選工具，界面簡單，實用功能比較強大。建議初學者選用。

另外一個工具就是代碼編輯工具，例如寫字本、EditPlus等，這些工具主要編輯asp等動態網頁。

此外還有一些網路編程工具，javascript、java編輯器等。

網頁製作也是一個比較吃香的行業，要真正做一個好的網站，還必須有良好的設計功底。所以還得學很多邊緣性的軟體，例如photoshop、flash等。

大型的網站往往還需要資料庫的支持，所以還得懂資料庫。sql、甲骨文等。

總之，掌握好網頁製作，能獨立完成一個網站的製作工作，那就不要考慮吃飯問題。隨便混就好了！

祝你成功。
★你可以結合 Dreamwaver 和 Photoshop 來製作網頁。
聖托電器網的網站做的挺不錯哦，你可以參考一下

❹ 適合製作網頁的圖片處理方法

用photoshop，然後在裡面選擇文件 - 存儲為web所用格式 ，如果圖片的顏色不多，就選擇存儲為gif格式的，如果顏色比較復雜，就選擇存儲為jpg格式的，這樣保存出來的圖片是很小的，圖片質量也幾乎沒有什麼損失。

❺ 怎麼剪切在電腦網頁上的某個圖片

剪切在電腦網頁上的某個圖片方法：

1、使用QQ功能。

①、登錄qq。

②、按下CTRL+ALT+A，就實現截屏了。

2、下載軟體截屏。

①、瀏覽器搜索截圖軟體。

②、下載一個安裝使用就可以截圖。

3、使用電腦自帶的截圖鍵截圖。

①、按下鍵盤上的此鍵。

②、打開畫圖工具或者qq聊天框。

③、右鍵單擊復制，或者Ctrl+v粘貼。就可以看見截圖的圖片了。

❻ 網頁設計中圖像切圖技巧

網頁設計中圖像切圖技巧

在網頁的製作過程中，不時需要將圖像進行切圖處理。下面是我為大家整理的網頁設計中圖像切圖技巧，歡迎參考~

網頁製作技術伴隨著網路的快速發展而快速興起，目前，國內外計算機行業對於網頁製作的研究較多，但是由於受到初學者個人風格和操作技巧的影響，在網頁製作中普遍存在不同程度的問題。而對圖像進行切圖處理也是一個存在網頁製作中的問題。基於此，本文就網頁設計中圖像切圖技巧進行了探討，並提出了一些有關的技巧，相信對圖像切圖的工作能有一定的幫助作用。

1 切圖技術

切圖就是指在網頁製作過程中，用圖形圖像處理軟體提供的切片工具，將美工設計的網頁效果圖這種大幅圖像，分割成為一系列小的圖像，這些小圖像稱為原大幅圖像的切片。一張圖可以有多種切圖方案，但不是所有的切圖方案都適合後期的網頁製作的。因此需要在眾多切圖方案中，找出一種適合後期網頁編程的最佳切圖方案。本文中所說的切圖技術，就是指的實現最佳切圖方案的切圖技術。由於它遵循一些切圖原則和技巧，所以它能夠實現最佳切圖方案。

由於切圖時，圖像的最小單位是像素，矩形對邊上的像素個數應該是相同，或者遇到圓角應該是銳化的。但是在人工操作時，可能會發生像素個數的變化，或者圓角產生頓挫角。因此，在切圖時，將原圖採用300%以上的放大倍數切圖。切完整個大圖後，把一系列的切片全部選中，接著利用軟體中的圖像優化工具，即菜單欄中「窗口」下拉菜單「優化」命令對所有的小切片進行優化來解決以上問題。然後利用文件菜單下的「導出」命令生成HTML網頁和圖像，最後在網頁製作軟體DREAMWEAVER中建立站點，將上面導出的網頁和小圖像都放在網站里。導出的網頁文件是不能用的。因為一個網站的頁面大小要求統一。因此，接下來的工作是在網頁製作軟體中製作表格。用分塊的思想來看整個網頁的布局，一個塊就是一個表格。把網頁看成是多個獨立的表格組成的。將導出的圖片插入到單元格中。日常工作中常用的圖形圖像處理軟體有Photoshop、Flash、Firework等，這些軟體中都有切片工具，但是在網頁製作時，圖形圖像處理軟體首選使用Firework。因為DREAMWEAVER中只要對圖像雙擊，系統會自動調用Firework軟體。

2 切圖原則

一張圖可以有多種相關的切圖方案，但不是所有的切圖方案都是合適網頁編程的。所以在切圖技術中，應該保證實現的是最佳切圖方案，因此切圖技術中還涉及了切圖的原則和切圖的技巧。

2.1 塊與切片的概念

在本文中所說的一個塊與切片概念是不同的。塊和切片都是網頁中的一部分，但是塊指的范圍比切片大。塊中可以包含一個或多個切片。塊是指在網頁上內容相關的'區域范圍。切片是從圖中相關范圍中分割出來的一小圖形。如果轉換成網頁後，塊對應了網頁中的表格，而切片對應的是表格中的單元格。

2.2 分塊的原則一：以相關內容為一塊

根據原圖中相關內容，確定整體的切分策略，即切分要有分塊的思想，把整個網頁看成是多個塊構成的，每個塊就是一個table，塊中每一個細節內容就是table中單元格中內容。即將整個網頁看成是由多個table組成的，然後在具體到每個table，去考慮裡面應該如何切。必須強調的是，應該把整個網頁看成是多個獨立的塊構成，切片是塊中的內容。依據這種思想去切圖，然後在網頁製作軟體中，插入多個表格。塊對應成了網頁中的表格，切片對應成表格中的單元格內容。在切圖時，同一塊中的內容是完整的，也就是說，要保證完整的一部分在一個塊內，例如某區域的標題文字，網頁的LOGO，網頁的廣告，網頁的導航區等可以分別是一個獨立的塊，這樣做的目的是方便日後網頁編程和修改。

2.3 分塊的原則二：盡量分成大行，平行的切

當一個網頁的內容比較多時，在顯示網頁時是有時間差的，這時要求內容的顯示是從上而下從左到右逐行顯示網頁的內容，決不允許一個網頁上的內容雜亂的跳出來。因此，在分塊時也應該貫穿逐行分塊的原則。切圖的時候要盡量平行的切，也就是說，分成大行，然後再逐行的切。如果一個網頁的顯示頁面是由多個表格構成的，這樣做的目的是當客戶端瀏覽一個網頁時，由於它是由多個表格構成的，因此，客戶端與網頁伺服器會生成多個request請求，多個表格同時下載信息，因此網頁下載的速度就會相對快。避免出現把網頁整個頁面看成一個塊，然後塊里又分塊，出現塊中嵌套塊。因為這種結構在由切片轉換成網頁後就出現了表格的嵌套，表格的嵌套影響了客戶端網頁瀏覽的速度。

2.4 切片的原則：以屬性相同為依據

一般切圖原則是：屬性相同的區域適合分為一個切片。屬性相同主要是指顏色和形狀都沒有變化，或者在X或在Y方向上沒有變化。屬性漸變的區域適合分為一個切片，漸變有兩種表現形式顏色漸變，形狀漸變。

3 切圖的技巧

切圖也有技巧。構成一張圖片的信息量是非常大的，因此在伺服器中存儲一張圖片時占的容量也是很大的，同時從伺服器里下載圖片到客戶端也需要時間也就相當長。因此，在利用切片轉換成網頁時，可以利用一些技巧，即減少切片個數和減小切片的大小，可以解決以上存在的問題。

3.1 減少切片的個數

網頁上的文字與圖片信息都是存儲在網頁伺服器上的，一個切片就是一張小的圖片。根據顯示的點陣原理可以知道，對於同一張大圖像來說，切片數減少，存儲在網頁伺服器上這張圖的信息量也就減少了，也就是說在網頁伺服器上占的空間減少。所以當切片的背景是單一顏色，切片的文字沒有效果，這時就可以採取這種特殊的處理方式對此切片進行處理。即可以將單一顏色和文字沒有效果的切片丟掉，在DREAMWEAVER中打開站點，插入表格，在對應的單元格中，利用DREAMWEAVER軟體提供的設置單元格的背景色，直接從鍵盤上輸入文字內容。這種做法實現了切片的效果，同時可以使網頁服務上存儲的切片數減少了。以「京東商城特賣新」網頁頁面為例，在實驗中保證網頁頁面效果相同的情況下，採用減少切片個數和未採用減少切片個數方法，可以得到下面表中的數據。從下面表中的數據可以看出兩種處理辦法造成的結果是：未採用減少切片個數方法時，圖片總容量為102MB，而採用減少切片個數方法後，圖片總容量為40.3MB，明顯前後圖片的總容量變化很大，值得提倡這種做法。

3.2 減小切片大小

大面積的顏色相同的，或者形狀相同圖塊，可以只從原圖中切出一個像素的切片，然後DREAMWEAVER裡面，用切片平鋪形成所需要的圖。

;

❼ 網頁圖片處理用什麼軟體

網頁圖片處理用Photoshop。

還可以用光影魔術手，美圖秀秀等圖形編輯軟體。

Photoshop主要處理以像素所構成的數字圖像。使用其眾多的編修與繪圖工具，可以有效地進行圖片編輯工作。ps有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。

❽ 如何更改網頁中的圖片

關於網頁中圖片的處理問題你可以試一試實用photosphop這個軟體其中強大的圖片處理功能會讓你的圖片有很大的改變，軟體中尤其是對圖片尺寸的修改很方便，還有就是可以實用網頁三劍客的Dreamweaver、Fireworks、Flash一起處理你的圖片也會很方便的，4款軟體的學習和實用都很簡單，建議你使用一下，不知道能不能給你帶來幫助。

❾ 網頁上的圖片在後台是怎麼處理的，或者說是怎麼利用資料庫進行訪問的

常見的方法是將圖片以文件形式保存於伺服器,在資料庫中保存該文件的相對路徑或絕對路徑,在調用圖片時將該路徑輸出,瀏覽器會按此路徑向WEB伺服器發送請求,下載圖片.

❿ 電腦在網頁上怎麼截圖

電腦在網頁上截圖的方法及步驟：

工具/原料：電腦，瀏覽器

1、首先打開電腦，然後打開瀏覽器，再找到要截圖的頁面。