㈠ WEB格式的圖片如何保存
選擇另存為。
截圖保存。
互聯網幾乎是當今最大的藝術、圖形和相片分享平台之一，因此掌握一些保存為網頁格式的基礎知識就非常重要了。實際上，保存為網頁格式是一項平衡藝術——你必須在圖片品質和介質的文件尺寸之間做好平衡，以便滿足你的個人需求。
在速度相對重要的地方（如迅速地載入網站），你可能需要犧牲一些圖片品質。而在品質重要的地方，則需要犧牲一點速度。這堂課程的目的就是向你介紹一些方法，在這兩個因素之間尋求平衡，與此同時保留非常好的圖像品質。
無損 vs 損耗數據
雖然存在有非常多的圖片格式（僅舉幾例，如jpeg，gif和png），但是依據壓縮方法不同，所有的圖片都能進一步歸類為兩大類別：無損和有損。無損數據壓縮保證了圖像在沒有任何品質和信息丟失的情況下重現，而有損數據壓縮的結果就是可能造成品質和信息的丟失。在平面設計領域最主流的無損媒介格式包括GIF，PNG，以及TIFF，而JPEG是最主流的有損壓縮的圖形格式。
如何用PHOTOSHOP保存網頁格式
PS擁有非常好的方法來為網頁優化圖片。在ps中，選擇文件>存儲為web格式或者使用快捷鍵ctrl+alt+shift+s。一個新的對話框將會彈出，這里有所有為網頁保存和優化圖片的設置。
我會通過以下一些生活中的案例來演示如何使用對話框中的設置。
為網頁存儲圖像
由於圖片巨大的文件體積，它們更多是以有損壓縮格式來保存的。甚至在拍照時，相對於數倍大小的RAW格式，相機也傾向於用有損格式（如JPEG）來保存圖片。
JPEG是日常中首選的圖片格式，它是以它的創造者「聯合圖像專家小組」來命名的。Jpeg之所以能夠成為標准，是因為它在壓縮圖像數據的同時可以保留高品質，並且在相關信息上能夠接近無損圖像的效果。
當你在保存圖片的時候，有幾種網頁格式預設可供選擇。對於一張圖片，你應該考慮是使用JPEG 低、JPEG 中，還是JPEG高。觀察下面的對比圖，（可以）發現案例中的圖片經過壓縮後並沒有多大的品質損耗。相比起超過250KB的源文件，我們選擇中等質量或者高等質量的壓縮預設就能夠得到一個大小不超過30KB，並有合適品質的圖片。
GIF圖像
有些時候，你會被要求用無損格式來保存，以便最好地優化你正在創作的任何作品。這在網頁設計中時常遇到，在布局上使用比普通圖片更少的顏色。
GIF，全稱為「圖像互換格式」，是一種只用到256個顏色調色板的圖片格式，這讓它成為不需要使用太廣泛色域的網頁圖片的理想選擇。GIF也能將單個像素設置成透明，不過這並不在這個教程的討論范圍之內。下面展示了一張(使用著256個顏色的)GIF圖像和JPEG圖像的對比照，它們擁有同樣的大小.正如你所見到的，無損GIF圖片能更好的接近源文件。
因為GIF圖像受到256色的限制，它本應該極少被用到圖片中，但是他們恰好適合那些使用純色或是有限色彩的圖像。對於圖片來說，通常來說不是使用JPEG有損壓縮，就是GIF無損格式。
高品質圖像和無損PNG
PNG，全稱為「可移植網路圖形」，是一種類似於GIF的無損格式，只是它支持更為豐富的色彩（有時候也讓它的體積變大），而且可以支持帶透明圖層的Alpha通道，而非單一透明像素。
PNG圖像正在日漸取代GIF，主要是因為在支持更豐富的色彩方面，png通常比gif的壓縮效果要更好。雖然它還不想GIF有廣泛的支持，但是無疑它正朝著那個方向前進。
當圖片必須保留完整品質在網路上進行傳輸的時候，PNG是最佳的選擇。比起用JPEG傳輸圖片，（PNG）會令你得出更大的圖片大小，但是有時候這是一個非常有必要的犧牲。當一個圖片包含銳利的線條、以及必須保留清晰的文字時，PNG通常是一個更好的選擇，當然了，最終還是要由設計師來決定使用哪一種格式。
㈡ 怎樣製作自己的網頁 web開發教程 企業建網站
我這邊主要介紹一下企業找外包團隊製作網站的一些流程，一般都是這樣：
第一個步驟，就是網站製作公司的人員，來公司了解一下客戶的主要目標和想法。一般的用戶可以在這一步的時候，認真的跟網站製作公司的人員進行溝通。只有這樣才可以做好網站。
第二個步驟就是進行初步的網站構架。這個主要是為實現網站的基本功能而坐的。有的網站看著很花哨，其實構架很簡單，但是有的功能比較復雜。根據網站製作的技術人員的說法，網站框架的搭建比較考驗技術，但是網站的整體就比較考驗網站美工設計的能力。
第三個步驟就是網站的功能開發。如提交一個信息是否方便，是否能夠有效傳達企業的信息等。包括頁面的特效，菜單展現形式，這些盡管策劃人員前期已經規劃，但是還是需要在網站功能開發中參與，以保證網站功能與開發需求的一致性，工作量少，但是卻不可忽略。
第四個步驟上傳網站並測試。網頁製作完畢，最後要發布到Web伺服器上，才能夠讓全世界的朋友觀看，現在上傳的工具有很多，如LeadFTP，CuteFTP是常用的網頁上傳工具。
網站開發製作的過程耗時還是蠻久，如果用網站模板製作，就會方便快捷很多。
㈢ WEB圖像格式主要有哪些各有什麼特點
1、PNG（Portable Network Graphic）
PNG 格式是WEB圖像中最通用的格式。它是一種無損壓縮格式，但是如果沒有插件支持，有的瀏覽器可能不支持這種格式。PNG格式最多可以支持32位顏色，但是不支持動畫圖。
2、GIF（Graphics Interchange Format）
GIF 是 Web 上最常用的圖像格式，它可以用來存儲各種圖像文件。特別適用於存儲線條、圖標和電腦生成的圖像、卡通和其它有大色塊的圖像。GIF文件非常小，它形成的是一種壓縮的8點陣圖像文件，所以最多隻支持256種不同的顏色。Gif支持動態圖、透明圖和交織圖。
3、BMP（Windows Bitmap）
BMP 格式使用的是索引色彩，它的圖像具有極其豐富的色彩，可以使用16M色彩渲染圖像。此格式一般用在多媒體演示和視頻輸出等情況下。
4、TIFF（Tag Inage File Format）
TIFF 格式是對色彩通道圖像來說最有用的格式，支持 24 個通道，能存儲多於 4 個通道。TIFF 格式的結果要比其它格式更大、更復雜，它非常適合於印刷和輸出。
5、JPEG（Joint Photographic Experts Group）
JPEG 是 Web 上僅次於 GIF 的常用圖像格式。JPEG 是一種壓縮得非常緊湊的格式，專門用於不含大色塊的圖像。JPEG的圖像有一定的失真度，但是在正常的損失下肉眼分辨不出 JPEG 和 GIF 圖像的差別，而 JPEG 文件只有 GIF 文件的 1/4 大小。JPEG 對圖標之類的含大色塊的圖像不很有效，不支持透明圖和動態圖。
6、TGA（Targa）
TGA 格式與 TIFF 格式相同，都可以用來處理高質量的色彩通道圖形。
另外，PDD、PSD 格式也是存儲包括通道的 RGB 圖像的最常見的文件格式。
㈣ web圖象是什麼
放在WEB中的圖象呀!
常見的Web
圖像格式
有三種：
JPG格式
、GIF格式、
PNG格式
。JPG與GIF格式大家已司空見慣，而PNG格式（Portable
Network
Graphics的縮寫）則是一種新興的Web圖像格式。
㈤ web前端學習HTML的圖像標記有哪些
圖像的標記屬性主要有：
<img>稱為圖像標記，用來在網頁中顯示圖像。使用方法：<img src=''路徑/文件名.圖片格式"width="屬性值"height="屬性值"border="屬性值"alt="屬性值">
<img>標記主要有以下屬性：
1：src屬性指定我們要載入的圖片的路徑，圖片的名稱以及圖片的格式
2：width屬性指定圖片的寬度
3：height屬性指定圖片的高度
4：border屬性指定圖片的邊框寬度
5：alt屬性有兩個作用：
① 如果圖像載入失敗，會用文字來代替圖像顯示。
② 搜索引擎可以通過這個屬性的文字來抓取圖片。
注意：<img>是單標記，不需要使用</img>來閉合
㈥ 前端web的點9圖效果實現
這里只是一個怕自己忘記寫的一個筆記，不是很全很詳細，建議還是看 官方教程
圖片原始像素是348 x 220
我的需求是拉伸image可以自適應內容長度，但是拉伸不能導致兩邊的半圓被拉成橢圓
border-image可以使用圖片作為border(標准說法：border-image CSS屬性允許在元素的邊框上繪制圖像), 給出圖片後可以通過相應的參數來調整圖片的拉伸，這樣就可以像點9圖那樣保留部分內容不變的情況下，拉伸可拉伸部分來自適應。
我主要解釋一下 border-image: url("") 0 170 0 170 fill / 1px 170px stretch ,
這里0 170 0 170就是劃分了原始圖片內容,稱之為border-image-slice
後面的 1px 170px 指的是border-image-width ，字面意思是邊框圖片寬度，作用是將 DOM 節點分割成九宮格，這里指的就是作為實際容器的那個節點的顯示範圍了，我也設置為170， stretch作為border-image-repeat說明圖片在超過原始長度後使用拉伸的方式
這里有更易讀，更詳細的文章 border-image的正解用法
點九圖編輯器
https://developer.mozilla.org/zh-CN/docs/web/css/css_backgrounds_and_borders/border-image_generator (這個載入不出預覽圖)
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator （這個可以載入出預覽圖）
㈦ web如何設置頁面一打開就下來一個圖片
、內容圖片
內容圖片是頁面中真正的內容，沒有內容圖片，就無法完整的理解頁面內容。如淘寶網上的商品展示圖片，這些圖片是網頁的一部分，它們能幫助你決定這個頁面的內容是否是你需要的。
web前端怎麼設置頁面圖片背景（web頁面添加背景圖）
內容圖片
2、布局圖片
布局圖片出現在頁面背景中，要想理解頁面的內容，它們不是必須的。如蘋果官網的這個圖片，沒有這個圖片也能理解頁面上文字描述的內容是什麼意思。
web前端怎麼設置頁面圖片背景（web頁面添加背景圖）
布局圖片
3、交互圖片
圖中用紅色框起來的圖片會給你瀏覽頁面的時候帶來一些幫助，如搜索圖片，一看到就知道這里可以搜索想要的東西，購物車圖片可以看到選購的產品，箭頭圖片點擊可以看到更詳細的產品等。
web前端怎麼設置頁面圖片背景（web頁面添加背景圖）
交互圖片
二、創建內容圖片
在HTML中我們用 img 標簽創建圖片，英文是image的縮寫。
<img src="" alt="">
web前端怎麼設置頁面圖片背景（web頁面添加背景圖）
內容圖片
img是空標簽，沒有結束標簽
src屬性的值是一個圖片的URL地址，地址可以是相對路徑，也可以是絕對路徑
alt屬性：填寫對這張圖片的簡單描述，增加圖片的可訪問性
圖片應該被存放在單獨的文件夾中，如：images文件夾
三、創建布局圖片
布局圖片是在CSS中被創建出來的，使用CSS中的background屬性，如：
1）background-color 定義背景顏色，設置背景圖片時，要始終設置背景顏色，確保背景圖片沒有成功時會顯示一個背景顏色
2）background-image 可以指向一個相對路徑或者絕對路徑來添加圖片。
3）background-repeat可以設置背景是否平鋪在容器中，包含四個關鍵字：
background-repeat：repeat 可以設置背景圖片橫向和縱向都平鋪。
background-repeat：no-repeat 設置圖片不平鋪，圖片默認顯示在容器的左上角
background-repeat：repeat-x 設置圖片只能在橫向平鋪
background-repeat：repeat-y 設置圖片只能在縱向平鋪
4）background-position 屬性可以控制背景圖片顯示在什麼位置，包含兩個關鍵字，如：
background-position：top left 設置圖片顯示在容器的左上角，第一個關鍵字可以是top、center、bottom，第二個關鍵字可以是left、center、right
CSS中和背景相關的屬性可以簡寫在一行中，如：
background: #FF1298 url(images/logo.png) center right no-repeat;
首先是圖片的顏色color，image，position，repeat，CSS屬性能用簡寫就盡量用簡寫，簡寫比分開寫性能更高。
web前端怎麼設置頁面圖片背景（web頁面添加背景圖）
布局圖片
四、創建用戶交互圖片
Web上最常用的三種圖像格式
1）Jpeg 可以展示一張照片或者復雜圖像
可以表示多達1600萬種顏色，即所有的十六進制顏色
不支持圖像透明
不支持動畫
擴展名為.jpg或.jpeg
2）png最適合展示網頁插畫、logo和網頁小圖標
可以表示上百萬種不同顏色的圖像
包括png-8、png-24和png-32，取決於想表示多少種顏色
可以設置顏色透明
不支持動畫
擴展名為.png
3）gif適合展示網頁插畫、logo和網頁小圖標
可以表示最多256種不同顏色
可以設置顏色透明
支持動畫
擴展名是.gif
建議：
復雜顏色的圖像和照片則要使用jpeg格式
動態圖像要使用gif格式
png格式的透明圖片要比gif格式的更平滑
這三種圖像相對於其他格式的圖像文件比較小，適合web頁面高效展示
一般情況下用戶交互圖片都是一些小圖標，所以使用png或gif作為用戶交互圖片；使用CSS的background屬性以背景圖片的形式為網頁添加用戶交互圖片；推薦把用戶交互圖片放在同一個文件中，可以提高網路和伺服器性能，