15866537353
表格是網頁最重要的排版方式。
1.如果某個網頁采用了大段的長篇文本,除了可以將一頁文本分成多面,還可以考慮將文本置入不同表格中,這樣不僅管理方便,也使得該頁加載時每個 表格內容依次加載,這樣訪問者就可以一邊看已下載內容一邊等待剩余部分加載,而不是等待很久之后才一齊加載出來。
例如:新浪新聞
2.表格之內套嵌太多表格也不利于頁面加載,因瀏覽器是先加載完大表格之后再加載內嵌的小表格,因此內嵌表格會最終降低整頁加載速度。
3.盡量采用XHTML標準,使用DIV代替表格。
具體方法是采用CSS里面的 FLOAT 屬性,position 屬性等定位
使用FLOAT 屬性的例子。復雜三欄式版面
使用position 屬性等定位。復雜版面設計.htm
網頁減肥
代碼設置不妥不僅延長網頁加載時間,也嚴重影響蜘蛛程序對網頁內容的抓取。通過對網頁代碼進行清減去掉臃腫雜亂的代碼,減小網頁文件大小,能夠加快網頁加載速度,讓蜘蛛快速索引到重要內容。整個網頁最好不要超過30K,文字內容最好5K-10K之間,Google 只對內容的前5000個字進行索引。
網頁減肥重點涉及以下幾個要點:
1.CSS 樣式
網頁制作應通過 CSS(層疊樣式表單)來統一定制字體風格。 例如:
<b style="color:red;font-size:16px;">濰坊網站建設</b>
<div id="divmain" style="font-size:12px;">DIV</b>
<div style="color:red;"> 紅色 <b style="color:green;">綠色</b> </div>
----------------------
<style type="text/css">
b { color:red;font-size:16px; } /*通用對象*/
#divmain {font-size:12px;} /* ID 對象 */
.red {color:red;}/* 定制類別 */
.red b {color:green;}/* 定制類別下的 通用對象*/
</style>
<b>濰坊網站建設</b>
<div id="divmain">DIV</b>
<div class="red"> 紅色 <b>綠色</b> </div>
CSS 減肥示例文件 把文字的字體、字號、顏色、背景色等統一起來,不用對每段文字單獨進行格式定義,從而減少大量重復性標簽。注意把所有css文件單獨存放在命名為 css 的外部文件中。
語法: <link rel="stylesheet" type="text/css" href="/common/client.css">
作用的優先級:自身的style屬性 > 頁面的內部style對象 > 頁面外部css文件。
2.JavaScript :
1. 簡化js中的函數名稱和變量。
例如:Google,里面的函數名稱只有 1 個或者 2 個字符。
2. 將網頁的公共部分轉換為腳本并存于 js 文件里。這樣可以減少文件大小,加快下載速度,同時也方便管理。不過不能將導航等等優化的關鍵代碼轉換成 js,否則搜索引擎搜索不到。
轉換方式:
原來:<h1>天天收藏夾</h1>
腳本:document.write(“<h1>天天收藏夾</h1>”);
例如:華軍軟件園源代碼,將標題、導航等等都放著js文件里,將導航放在js里面就不太好
了。
3. 使用 base 標簽:
Base 標簽是一個全集控制的標簽。
比如:
<A HREF="http://wfwangluo.com/?list-2.html " target=”_blank”>關于我們</A>
<A HREF="http://wfwangluo.com/?list-3.html " target=”_blank”>建站套餐</A>
其中 http://wfwangluo.com/ 和 target=”_blank”: 多次重復,增加無用的代碼。
修改為:
<head>
<base href=”http://wfwangluo.com/” target=”_blank”>
</head>
<body>
<a href=”/?list-2.html”>關于我們</a>
<a href=”/?list-3.html”>建站套餐</a>
</body>
4. 慎用網頁減肥工具
通常的網頁減肥工具,對html減肥具有一定的破壞性,常常為了減肥將標簽的 后半個標簽刪除,
造成網頁的不完整。
處理前:<table><tr><td>第一行</td></tr><tr><td>第二行</td></tr></table>
處理后:<table><tr><td>第一行<tr><td>第二行</table>
處理后 </td></tr> 被去掉了,使頁面不完整。
5. 刪除空格和回車
如果要更加苛刻的減肥,那最后一步就是刪除空格了,還可以使文件大小下降很多。
不過刪除空格后的頁面由于沒有階梯排列,將很難讀懂。
例子:百度首頁的代碼就非常緊湊。