圖片與文本基礎 註釋添加可以用/**/ 5.1圖片 1.gif圖片：最大顏色數256，保存時採用無損壓縮 2.JPEG圖片:可以包含1670萬種顏色，保存時採用有損壓縮，壓縮率小的質量更高。為了避免圖片因壓縮率過高而導致的像素化，一般使用PS或Adobe Fireworks優化。GIMP（http: ...
圖片與文本基礎
-----註釋添加可以用/**/
5.1圖片
1.gif圖片：最大顏色數256，保存時採用無損壓縮
2.JPEG圖片:可以包含1670萬種顏色，保存時採用有損壓縮，壓縮率小的質量更高。為了避免圖片因壓縮率過高而導致的像素化，一般使用PS或Adobe Fireworks優化。GIMP（http://www.gimp.org）是一款流行的，支持多平臺的開源圖像編輯器。Pixlr也提供了圖片編輯器
另一個優化的辦法就是使用圖片的縮小版本，成為縮略圖，一般將縮略圖配置成圖片鏈接，點擊可顯示更大尺寸的圖片
3.PNG圖片：“可移植網路圖形”，結合了上面兩者的優勢，且支持無損壓縮。
4.WebP圖片格式
5.2 IMG元素
Img元素在網頁上配置圖片。Img元素是void元素，不成對使用（不需要成對使用起始和結束標記）。
例子：配置名為logo.gif的圖片
<img src =”logo.gif” height=”200” width=”500” alt=”My Company Name”>
Str屬性指定圖片的文件名。Alt屬性為圖片提供文字代替
5.3圖片鏈接
將圖片作為超鏈接
<a href=”index.html”><img src =”logo.gif” height=”200” width=”500” alt=”My Company Name”></a>
縮略圖鏈接是將小圖配置成鏈接，點擊它就可以顯示由href屬性指定的大圖
<a href=”sunset.jpg”><img src =”logo.gif” height=”200” width=”500” alt=”My Company Name”></a>
5.4配置背景圖片：
1.background-image屬性
例子：body{background-image: url(texture1.png)}
註：url表示引用，如果要引用其他文件夾中的該圖片，即url(某文件夾名/texture1.png)
2.background-attachment屬性
使用background-attachment屬性配置背景圖片是在網頁中滾動的還是將其固定。對應的值分別是scroll（預設）,fixed
5.5定位背景圖片：
瀏覽器的預設行為是重覆（平鋪）背景圖片，使之充滿容器元素的整個背景
1.background-repeat屬性.
屬性值包括repeat(預設),repeat-y(垂直重覆),repeat-x(水平重覆),no-repeat(不重覆)
2.定位背景圖片:
可用background-position屬性指定背景圖片的位置（預設左上角）.
有效屬性包括:百分比值，像素值，或者left , top, center, bottom(底部)和right
例子 兩種配置方法
- h2{background-image : url(trilliumbg.gif);
background-position : right;
background-repeat : no-repeat; }
2. body { background-color:#f4ffe4;
color:#333333;
background-image: url(trilliumgradient.png);
background: url(trilliumfoot.gif) no-repeat right bottom,
url(trilliumgradient.png);
}
5.7用CSS配置字體
Font-family屬性,用來配置字體
P { font-family :Verdana, Arial ,sans-serif}
5.8 CSS文本屬性
關於網頁文本CSS提供了大量的選項,常用的有:
Font-size, font-weight, font-style(傾斜顯示), line-height, text-align(左右對齊), text-decoration , text-indent, text-transform, letter-spacing(間距)
5.10用CSS配置列表符號
5.11收藏圖標
地址欄或網頁標簽上的小圖標就是收藏圖標，大小為16x16或者32x32像素
<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>
導入.css時rel=”stylesheet” 且要丟在<head>裡面
如何創建自己的收藏圖標？使用圖像處理軟體或者以下某個聯機工具
- http://favicon.cc
- http://www.favicongenerator.com
- http://www.freefavicon.com
- http://www.xiconeditor.com
5.12圖像映射
為圖片配置多個可點擊或可選擇區域，它們鏈接到其他網頁或網站。
<map id="fishing" name="fishing">
<area href="http://nature.org" shape="rect" coords="0,51,416,170" alt="The Nature Conservancy" title="The Nature Conservancy">
<area href="http://www.fishingdoorcounty.com" shape="rect" coords="24,188,339,283" alt="Door County Fishing Charter" title="Door County Fishing Charter">
</map>
<img src="fishingboat.jpg" usemap="#fishing" alt="Door County" height="350" width="416">
