用CSS減少美化網站的圖片數量

Posted in 完美WEB進化論 BY 娜娜子

font+font-
@ : 常常我們寫一個頁面或者theme時，除去主要背景外，東一個按鈕西一個圖片的零零總總的加下來十幾張圖片總是跑不掉。這樣子不但會造成之後修改頁面時圖片要找很久很混亂，還有就是網頁讀取時拖速的問題。so，接下來要寫得主要就是將那些網頁裡用到的圖片全部集中在一起的方法。



1. 首先想好頁面的排列架構，然後在FW裡大概的擺一下位置。


001
@ : 如上圖，展示站台和KANAFU.COM分別是兩個鏈結，我希望它在點擊時會有顏色的變換，而LINK1、2、3則是一個小型導航選單，最下方則是一個單純的圖片展示(當然你也可以將它變換成鏈結)。


2. 接下來打開FW來把剛才的圖片拖進來，做好選單的顏色調整後存成一張圖片(FW先別關，之後會用到)


002
@ : 這一步的關鍵點在於圖層在圖片裡的排列，空白的部分(也就是不會被始用到的區塊)越少，做出來的圖片也越小，載入網站的速度相對就越快。然後上面因為是示範所以我就隨便排一下。


3. 再來就是用網頁編輯器新增一個html和一個css(如果是DW、frontpage這種可視化的請先切換到code編輯模式)，我這裡用的是EmEditor，你也可以選擇你習慣的UltraEdit、PSPad、EditPad...叭啦叭啦什麼鬼的都無所謂，高興就好，如果都沒有的話就直接開記事本也OK。


HTML的部分↓ 
1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
	<link rel="stylesheet" type="text/css" href="./style.css"> 
	<title>用CSS減少美化網站的圖片數量</title>
</head>
 
<body>
	<div id="container">
	</div>
</body>
</html>
CSS的部分↓ 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

@charset "utf-8";
* {
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}
/** body **/ 
body{
	width:100%;
	height:100%;
	font : 8pt Tahoma,verdana,Arial;
	word-spacing: 1.8pt;
	line-height: 1.5;
	color :  #999;
	background:#eee;   
}
/** link **/
a{
	color:#777;
	text-decoration:none;
}
a:hover{
	text-decoration:none;
	color:#fff;
}
a:active{
	text-decoration:none;
	color:#bbb;
}
#container {
	position: relative;
  	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -200px;
	width: 400px;
	height: 400px;
	background:#ccc;   
}
@ : 寫好會變成這樣↓003
@ : 上面的code是我替頁面寫的一些基本的樣式，這部份請自由發揮 ─ ─ ─
@ : #container這個DIV就是等等用來裝主要內容的容器，為了方便預覽CSS先加上背景屬性。


4. 把鏈結、選單都加到#container裡，然後再新增一個ID為pic的div等等來擺圖片用。


10
11
12
13
14
15
16
17
18
19

<div id="container">
	<a href="#" title="展示站台" id="link_a">展示站台</a>
	<a href="#" title="KanaFu.com" id="link_b">KanaFu.com</a>
	<div id="menu">
		<a href="#" title="Link1" id="link_1">選單一</a>
		<a href="#" title="Link2" id="link_2">選單二</a>
		<a href="#" title="Link3" id="link_3">選單三</a>
	</div>
	<div id="pic"></div>
</div>
@ : 寫好會變成這樣↓004


5. 回到FW裡已經存好的圖片，開始準備寫第一個"展示站台"的鏈結。


005
@ : 如上圖，點一下需要的圖層，左下方的屬性就會顯示出它的大小和位置。


6. 切換到CSS部分，開始製作第一個"展示站台"的鏈結。


45
46
47
48
49
50
51
52

#link_a{
	width:218px;
	height:57px;
	background:url(./index.png) -3px -236px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
}
@ : 稍微說一下上面的code : width和height分別是剛才在FW裡查到的長寬，而background最後的-3px以及-236px就是查到的位置(x,y)，前三行加起來就是在宣告 : 我們只需要index.png這張圖片從座標3,236開始，大小是218x57的區塊，至於display:block;屬性則是用來讓本身不帶區塊等級的鏈結得以設置長寬，而最後兩行則是把鏈結文字隱藏起來。
@ : 寫好以後就是這樣。↓
006


7. 接下來就是寫當滑鼠晃過鏈結時(a:hover)的樣式。


007 
53
54
55

#link_a:hover{
	background:url(./index.png) -309px -233px;
}
@ : 回到FW裡again，這次點要用來做hover的圖層，一樣會顯示出長寬和位置。
@ : 在CSS裡宣告a:hover時展示的圖片位置。
008
@ : 如上圖，這樣第一個鏈結就完成了，然後用同樣的思路寫第二個鏈結。 
56
57
58
59
60
61
62
63
64
65
66
67
68
69

#link_b{
	width:85px;
	height:17px;
	background:url(./index.png) -221px -271px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:93px;
	left:251px;
}
#link_b:hover{
	background:url(./index.png) -527px -268px;
}


8. 接下來是選單的部分，在第四步裡我們已經在html裡寫進了一個內含三個鏈結的DIV。


009
@ : 先用前面的方法將DIV的背景抓出來，以及分別將三個選單的鏈結換作圖片。 
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

#menu{
	width:121px;
	height:25px;
	background:url(./index.png) -11px -157px;
}
#link_1{
	width:27px;
	height:12px;
	background:url(./index.png) -21px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
}
#link_1:hover{
	background:url(./index.png) -21px -197px;
}
#link_2{
	width:27px;
	height:12px;
	background:url(./index.png) -54px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
}
#link_2:hover{
	background:url(./index.png) -54px -197px;
}
#link_3{
	width:27px;
	height:12px;
	background:url(./index.png) -87px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
}
#link_3:hover{
	background:url(./index.png) -87px -197px;
}
@ : 寫好以後就是這樣。↓
010


9. 再來就是幫三個排排排站的鏈結乖乖躺下來。


011
@ : 首先在FW裡將圖片裡的選單區塊複製出來成一個新檔案，然後一樣在屬性裡查找link1、2、3的座標位置。這裡要新開檔案的原因是因為我們要找的是link1、2、3以選單區塊的左上角為基準點的座標。
@ : 然後在CSS增加position屬性做定位。 
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

#menu{
	width:121px;
	height:25px;
	background:url(./index.png) -11px -157px;
	position:absolute;
	left:248px;
	top:59px;
}
#link_1{
	width:27px;
	height:12px;
	background:url(./index.png) -21px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:8px;
	left:12px;
}
#link_1:hover{
	background:url(./index.png) -21px -197px;
}
#link_2{
	width:27px;
	height:12px;
	background:url(./index.png) -54px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:8px;
	left:45px;
}
#link_2:hover{
	background:url(./index.png) -54px -197px;
}
#link_3{
	width:27px;
	height:12px;
	background:url(./index.png) -87px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:8px;
	left:78px;
}
#link_3:hover{
	background:url(./index.png) -87px -197px;
}
@ : 寫好以後就是這樣。↓012
@ : 然後順便用老方法把圖片的部分一起寫進去。 
158
159
160
161
162

#pic{
	width:340px;
	height:167px;
	background:url(./index.png) -157px -44px;
}
013
@ : 變成這樣↑


10. 用position屬性將元素的位置調整成想要的樣子。


163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248

#link_a{
	width:218px;
	height:57px;
	background:url(./index.png) -3px -236px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:57px;
	left:29px;
}
#link_a:hover{
	background:url(./index.png) -309px -233px;
}
#link_b{
	width:85px;
	height:17px;
	background:url(./index.png) -221px -271px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:93px;
	left:251px;
}
#link_b:hover{
	background:url(./index.png) -527px -268px;
}
#menu{
	width:121px;
	height:25px;
	background:url(./index.png) -11px -157px;
	position:absolute;
	left:248px;
	top:59px;
}
#link_1{
	width:27px;
	height:12px;
	background:url(./index.png) -21px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:8px;
	left:12px;
}
#link_1:hover{
	background:url(./index.png) -21px -197px;
}
#link_2{
	width:27px;
	height:12px;
	background:url(./index.png) -54px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:8px;
	left:45px;
}
#link_2:hover{
	background:url(./index.png) -54px -197px;
}
#link_3{
	width:27px;
	height:12px;
	background:url(./index.png) -87px -163px;
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
	top:8px;
	left:78px;
}
#link_3:hover{
	background:url(./index.png) -87px -197px;
}
#pic{
	width:340px;
	height:167px;
	background:url(./index.png) -157px -44px;
	position:absolute;
	top:125px;
	left:32px;
}
@ : 分別在#link_a、#link_b、#menu、#pic裡加上position:absolute;，然後用top跟left將它們調整到合適的位置。然後步驟三裡我們已經在#container的DIV裡加上了position: relative;，所以現在的基準點(0,0)就是從#container的左上角計算起。

@ : 調完之後把body裡的背景色一起改下↓
014
噢噢...看起來和一開始在FW裡排得似乎還挺像的耶(廢話!阿不然排它是要幹嘛的...)
測試OK後就回到CSS將落落長的code稍微整理一下吧，能併的就併一併，讓載入的CSS稍微小一點也整齊一點。
@ : 精簡過後的CSS(好啦其實也沒有短到哪裡去...)↓ 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

@charset "utf-8";
* {
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}
/** body **/ 
body{
	width:100%;
	height:100%;
	font : 8pt Tahoma,verdana,Arial;
	word-spacing: 1.8pt;
	line-height: 1.5;
	color :  #999;
	background:#eee;   
}
/** link **/
a{
	color:#777;
	text-decoration:none;
}
a:hover{
	text-decoration:none;
	color:#fff;
}
a:active{
	text-decoration:none;
	color:#bbb;
}
#container {
	position: relative;
  	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -200px;
	width: 400px;
	height: 400px;
}
#link_a,#link_b,#menu,#link_1,#link_2,#link_3,#pic{
	background:url(./index.png);
	display:block;
	text-indent:-9999px;
	overflow: hidden;
	position:absolute;
}
#link_a{
	background-position:-3px -236px;
	width:218px;
	height:57px;
	top:57px;
	left:29px;
}
#link_a:hover{
	background-position:-309px -233px;
}
#link_b{
	background-position:-221px -271px;
	width:85px;
	height:17px;
	top:93px;
	left:251px;
}
#link_b:hover{
	background-position:-527px -268px;
}
#menu{
	background-position:-11px -157px;
	width:121px;
	height:25px;
	left:248px;
	top:59px;
}
#link_1{
	background-position:-21px -163px;
	width:27px;
	height:12px;
	top:8px;
	left:12px;
}
#link_1:hover{
	background-position:-21px -197px;
}
#link_2{
	background-position:-54px -163px;
	width:27px;
	height:12px;
	top:8px;
	left:45px;
}
#link_2:hover{
	background-position:-54px -197px;
}
#link_3{
	background-position:-87px -163px;
	width:27px;
	height:12px;
	top:8px;
	left:78px;
}
#link_3:hover{
	background-position:-87px -197px;
}
#pic{
	background-position:-157px -44px;
	width:340px;
	height:167px;
	top:125px;
	left:32px;
}



最後的最後不免俗的...還是用了雙D兄弟(DEMO&DOWNLOAD)來做個ENDING囉!


展示/下載(DEMO&DOWNLOAD) :

最終展示頁面 20100806.zip

Valid HTML 4.0 Transitional Valid CSS!

註：
1. DOWNLOAD裡的CSS使用的是未精簡過後的初始版，一開始看這個應該會比較容易上手這樣。
2. 本次的示範非常榮幸的邀請到傳說中那個有點飄撇有點帥的shogenism大叔來當媽斗，所以請和我一起用最兇猛的鬼吼鬼叫來表達對S大叔的敬愛~~~~~~


以上~

木曜

Aug 05,2010
14 Comments
標籤:
http://kanafu.com/archives/466/trackback

X14

新浪博客
新浪博客 >Reply Quote 八月 6, 2010 at 05:52:30

不错哦，俺只有个新浪博客，没有自己的独立博客，羡慕

#1
不死娜
不死娜 Reply Quote 八月 8, 2010 at 02:54:23

恩....現在很多BSP也是能綁域名的呀

苏州大学
苏州大学 >Reply Quote 八月 8, 2010 at 02:36:46

放个是不错，但是是不是就少了ALT属性呢

#2
不死娜
不死娜 Reply Quote 八月 8, 2010 at 02:52:06

@苏州大学 :
恩...alt屬性是為了seo著想?? 還是有其他特殊用途呢??

如果是seo的話 其實可以將圖片的說明文字放在a的title裡 再不然就是不要刪去和之間的鏈結文字

像ex page裡的原始碼裡其實鏈結文字和鏈結說明都還是保存著的 只是用css藏起來而已

BoKeam
BoKeam >Reply Quote 八月 20, 2010 at 14:42:18

这个太有用了，我就发现自己用的图片太多了，作个标签 :(17):

#3
不死娜
不死娜 Reply Quote 八月 21, 2010 at 04:05:27

偷偷小聲地說/////其實我自己站裡的圖片現在還是東一塊西一塊的!!!!!! haaaa~ :(13):

奈维摩尔
奈维摩尔 >Reply Quote 八月 20, 2010 at 23:20:49

这个写的很详细呢，解答了以前一直有的几个疑问，话说虽然一直在用这种方式，但自己没研究过具体意义是啥。。

#4
不死娜
不死娜 Reply Quote 八月 21, 2010 at 03:38:22

哈哈 詳細噢....有很大的可能性是...我講話太不乾不脆了會一直想要把東西全部講完這樣~

其實知道原理的好處就在於可以減低在code長了多了之後要修改時罵髒話跟爆走的機會唷

ZYW
ZYW >Reply Quote 九月 12, 2010 at 09:58:52

收藏了，博主強啊

#5
不死娜
不死娜 Reply Quote 九月 13, 2010 at 09:39:49

請隨意這樣~

渃
渃 >Reply Quote 九月 21, 2010 at 23:11:41

這大概是第一個可以讓我看懂的CSS教學吧...會定期來晃蕩的~ :(2):

P.S 我喜歡你的表達方式!

#6
不死娜
不死娜 Reply Quote 九月 22, 2010 at 02:01:12

渃 :

這大概是第一個可以讓我看懂的CSS教學吧...會定期來晃蕩的~ :(2):

P.S 我喜歡你的表達方式!

謝謝你喜歡它，硬闖連過來的? 歡迎!

但可能會比較讓你失望的是...這裡是很偶爾的才會有教學類文..... :(10):

渃
渃 Reply Quote 九月 22, 2010 at 11:08:52

不死娜 :
謝謝你喜歡它，硬闖連過來的? 歡迎!
但可能會比較讓你失望的是...這裡是很偶爾的才會有教學類文..... :(10):

我倒是忘記我怎連過來的，好像不是硬闖連過來的，反正就亂晃晃到的 :(5):

❤•终于°
❤•终于° >Reply Quote 九月 22, 2010 at 02:15:26

收藏了哦~~~有时间要详细看看~~

#7
FontColor│文字色彩 StorgFont│文字粗體 ItalicFont│文字斜體 LargeFont│大字 MediumFont│中字 SmallFont│小字 Strikethrough│文字刪除線 Underline│文字底線 AddLink│加入鏈結 AddImage│加入圖片 AddCode│加入代碼 Blockquote│加入引用
Smiley│加入繪文字
  • 正常 大愛 嘟嘴 開朗 紅臉 吐舌 酷氣 無語 羞羞 暗淡 期待 爽爽 哭哭 撇嘴 壞壞 尷尬 瀟灑 親親 壞壞 聰明 汗汗 打擊 爆走 青筋 暈頭 嘔嘔 訊息 淘氣 俏皮 死撐 棒棒 爛爛
WordPress滴打滴【被打版】 WordPress拍手拍手拍拍手！ 不如，就來寫個AJAX的聯繫表單吧
臍帶 假Rock真阿桑 Moon River 不如，就來寫個AJAX的聯繫表單吧 imagine - yoko&lennon Dear 陌生人 好 Pieces 我說 沒有這回事 菱兒生日玩耍記 無以名狀 在永恆的門口
衝啊寶貝↑