15.5. 圖片優化

15.5. 圖片優化
上一頁	第 15 章 Div+CSS頁面設計	下一頁

15.5.1. onMouseOver/onMouseOut

我們在網站衝浪常常看會看到很多圖片按鈕，當滑鼠入上去或滑鼠移開圖片會隨之改變，這個的按鈕至少需要三張小圖片才能實現這樣的功能。

我先說說這樣做的缺點

三張圖片，你的瀏覽器會啟動三個綫程連結你的圖片伺服器，不划算。
一旦其中一幅圖片下載過程中中斷，用戶當把滑鼠放到按鈕上時，可能會出現一個紅叉叉。
圖片太多不好維護，易產生垃圾，占用磁碟空間，linux ext3一個空檔案占用2048

最優方法是使用一張圖片，將三幅圖片平行或垂直排開，放到一幅圖片中，然後使用CSS控制顯示你需要的部分。

15.5.2. 使用一幅圖片處理BLOCK四角

corner.gif

stylesheet

			
<style type="text/css">
<!--

.clear { clear: both; height: 0; font-size: 0; line-height: 0; zoom: 1 }

.containerPlain {
	background-color: #fff;
	border-right: 1px solid #cacaca;
	border-left: 1px solid #cacaca;
	padding: 0 3px;
}

.left_top_corner {
	display: block;
	width: 4px;
	height: 4px;
	background-position: top left;
	float: left;
	font-size: 0;
}

.right_top_corner {
	display: block;
	width: 4px;
	height: 4px;
	background-position: top right;
	float: right;
	font-size: 0;
}

.left_bottom_corner {
	display: block;
	width: 4px;
	height: 4px;
	background-position: bottom left;
	float: left;
	font-size: 0;
}


.right_bottom_corner {
	display: block;
	width: 4px;
	height: 4px;
	background-position: bottom right;
	float: right;
	font-size: 0;
}
.left_bottom_corner, .right_bottom_corner ,
.left_top_corner, .right_top_corner{
	background-image: url(corners/corner.gif);
}

.middle_top_line {
	display: block;
	float: left;
	height: 3px;
	line-height: 0;
	border-top: 1px solid #cacaca;
}

.middle_bottom_line {
	display: block;
	float: left;
	height: 3px;
	border-bottom: 1px solid #cacaca;
	font-size: 0;
}

.middle_top_line, .middle_bottom_line {
		width: 167px;
}

-->
</style>

HTML

			
<div style="width:175px;">
	<span class="left_top_corner"></span> <span class="middle_top_line"></span> <span class="right_top_corner"></span>
	<div class="containerPlain">
    	You Content
	</div>
	<span class="left_bottom_corner"></span> <span class="middle_bottom_line"></span> <span class="right_bottom_corner"></span>
</div>

下面是一個更複雜的例子

stylesheet

			
<style type="text/css">
<!--

.clear { clear: both; height: 0; font-size: 0; line-height: 0; zoom: 1 }

.containerPlain {
	background-color: #fff;
	border-right: 1px solid #cacaca;
	border-left: 1px solid #cacaca;
	padding: 0 3px;
	clear: both;
}

.left_top_corner {
	display: block;
	width: 4px;
	height: 4px;
	background-position: top left;
	float: left;
	font-size: 0;
}

.right_top_corner {
	display: block;
	width: 4px;
	height: 4px;
	background-position: top right;
	float: right;
	font-size: 0;
}

.left_bottom_corner {
	display: block;
	width: 4px;
	height: 4px;
	background-position: bottom left;
	float: left;
	font-size: 0;
}


.right_bottom_corner {
	display: block;
	width: 4px;
	height: 4px;
	background-position: bottom right;
	float: right;
	font-size: 0;
}
.left_bottom_corner, .right_bottom_corner ,
.left_top_corner, .right_top_corner{
	background-image: url(corners/corner.gif);
}

.middle_top_line {
	display: block;
	float: left;
	height: 3px;
	line-height: 0;
	border-top: 1px solid #cacaca;
}

.middle_bottom_line {
	display: block;
	float: left;
	height: 3px;
	border-bottom: 1px solid #cacaca;
	font-size: 0;
}

.middle_top_line, .middle_bottom_line {
		width: 167px;
}


.block_title {
	line-height: 26px;
	height: 26px;
	background-image: url(corners/block_title_left.png);
	background-repeat: no-repeat;
	padding-left: 10px;
	font-size: 13px;
	font-weight: bold;
	background-color: #dddbdc;
}

.block_title_right {
	display: block;
	background-image: url(corners/block_title_right.png);
	background-repeat: no-repeat;
	background-postition: right;
	float: right;
	width: 4px;
	height: 26px;
}
-->
</style>

HTML

			
<div style="width:175px;">
  <span class="left_top_corner"></span> <span class="middle_top_line"></span> <span class="right_top_corner"></span>
  <div class="containerPlain">
    <div class="block_title">
		<span class="block_title_right"></span> Title
    </div>
    <div style="padding: 10px 7px 7px 7px">
		Content
	</div>
  </div>
  <span class="left_bottom_corner"></span> <span class="middle_bottom_line"></span> <span class="right_bottom_corner"></span>
</div>

15.5.3. 圖片用背景圖代替 img 標記

			
圖片用背景圖代替<img src="">

15.5.4. 合併圖片

下面是摘取LinkedIn網頁,作為例子.

合併多張小圖片為一張圖片,然後通過偏移量取其中一部分顯示,這樣做的目的是,加快瀏覽器下載速度,降低與伺服器建立連接的開銷.

			
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>LinkedIn Blog</title>
	<style type="text/css">
/*
Theme Name:  LinkedIn Blog
Theme URI:   http://blog.linkedin.com/
Description: LinkedIn's main blog theme
Author:      Prajakta Godbole
Author URI:  http://linkedin.com/
Version:     2.0
*/

/*
Reset styles
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.9.0
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}

/* Colors and fonts */
html { background-color: #F5F5F5; }
body { font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif; padding-top: 20px;}
a { color: #006fb3; text-decoration: none; }
a:hover { color: #006fb3; text-decoration: underline;}

/* Sidebar */
#sidebar { width: 312px; float: left; margin-left: 20px;}
#sidebar .widgets { border: 1px solid #ddd; background-color: #FFF; margin-bottom: 50px;
	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#sidebar .widgets h2 { color: #4d4e54; font-size: 14px; clear: both; margin-bottom: 13px;}
#sidebar .widgets ul li { font-size: 11.5px; }
#sidebar .widgets ul li a { color: #4d4e54; }
#sidebar .widgets .widget-bg { position: absolute; top: -13px; right: 15px; width: 35px; height: 40px; }

/* Follow us list */
#sidebar .follow-us-widget { overflow: hidden; padding-bottom: 35px; border-bottom: 1px solid #ccc; }
#sidebar .follow-us-widget .widget-wrapper { padding: 15px;}
#sidebar ul#follow-list li { float: left; position: relative; margin-right: 17px; zoom: 1; display: inline;}
#sidebar ul#follow-list li:last-child { margin-right: 0;}
#sidebar ul#follow-list li .follow-div { margin:0; padding:0; width: 33px; height: 38px; }
#sidebar ul#follow-list li a { display: block; width: 33px; height: 38px; text-indent: -9999px; background: url('http://blog.linkedin.com/wp-content/themes/linkedin/images/sprite3.png');}
#sidebar ul#follow-list li a#follow-lnkd { background-position: 0 0; }
#sidebar ul#follow-list li a#follow-twtr { background-position: -33px 0; }
#sidebar ul#follow-list li a#follow-fb { background-position: -66px 0; width: 32px; }
#sidebar ul#follow-list li a#follow-flickr { background-position: -130px 0; width: 32px;}
#sidebar ul#follow-list li a#follow-youtube { background-position: -98px 0; width: 32px;}
#sidebar ul#follow-list li a#follow-rss { background-position: -162px 0; width: 32px; }
#sidebar .widgets ul#follow-list li.last { margin-right: 0;}

/* Flickr */
#sidebar .flickr-widget { position: relative; border-bottom: 1px solid #ccc; }
#sidebar .flickr-widget .widget-wrapper { padding: 15px;}
#sidebar .flickr-widget h2 { margin-bottom: 20px; }
#sidebar .flickr-widget .widget-bg { background: url('images/sprite3.png') -267px 0 no-repeat;}
#sidebar #flickr-img-grp { margin-bottom: 10px; overflow:hidden; }
#sidebar #flickr-img-grp .flickr-img { float: left; margin: 0 15px 15px 0; }
	</style>
</head>
<body>
	<div id="sidebar">

		<div class="widgets">
			<div class="follow-us-widget">
				<div class="widget-wrapper">
					<h2>Follow Us Links</h2>

					<ul id="follow-list">
						<li><a id="follow-lnkd"
							href="https://www.linkedin.com/company/linkedin" target="_blank">LinkedIn</a>
						</li>
						<li><a id="follow-twtr" href="http://twitter.com/LinkedIn"
							target="_blank">Twitter</a></li>
						<li><a id="follow-fb"
							href="https://www.facebook.com/LinkedIn" target="_blank">Facebook</a>
						</li>
						<li><a id="follow-youtube"
							href="http://www.youtube.com/user/LinkedIn" target="_blank">YouTube</a>
						</li>
						<li><a id="follow-flickr"
							href="http://www.flickr.com/groups/linkedin/pool/"
							target="_blank">Flickr</a></li>
						<li class="last"><a id="follow-rss"
							href="http://feeds.feedburner.com/LinkedInBlog" target="_blank">RSS</a>
						</li>
					</ul>

				</div>
			</div>

		</div>
	</div>

</body>
</html>

上一頁	上一級	下一頁
15.4. 表格	起始頁	15.6. HTML嵌入圖片