HTML Template 專案快速開始

2013/9/8更新
現在HTML模板不少,比較有名的有HTML5 ★ BOILERPLATE,更有模板生成器Initializr,而這篇文章要分享自己整理的HTML Template,將一些必備的東西整理好,方便新專案能夠快速的開始,就不用在要用到時東找西找了。
先來看看html:


<!-- [if IE 6]><html class="ie6 lte9 lte8 lte7" lang="zh-tw"><![endif]-->
<!-- [if IE 8]><html class="ie8 lte9 lte8" lang="zh-tw"><![endif]-->
<!-- [if IE 9]><html class="ie9 lte9" lang="zh-tw"><![endif]-->
<!-- [if IE 7]><html class="ie7 lte9 lte8 lte7" lang="zh-tw"><![endif]-->
<!-- [if !(IE 6) | !(IE 7) | !(IE 8) | !(IE 9)  ]><!--><!--<![endif]-->



<!-- [if lt IE 7 ]><meta content='0; url=ie6.html' http-equiv='refresh' /><![endif]-->
<!--
<meta http-equiv="Pragma" content="no_cache">
<meta name="format-detection" content="telephone=no"/>
-->




&nbsp;

<script src="js/ga_public.js"></script>
&nbsp;
<!-- [if lt IE 9]>
		    <script src="js/libs/html5shiv.js"></script>
<script src="js/libs/IE9.js" ></script>
		    <script src="js/libs/PIE.js" ></script>
<![endif]-->

<!--  content -->
<h1>This is Templete</h1>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 
 
 

乍看之下有點雜,仔細看其實都是一些非常基礎的html,讓我們從頭開始瞧瞧看他們的作用:

 
 ...
 

HTML5告知瀏覽器文檔所使用的HTML規範的方式,可能會有疑慮說舊IE會有問題嗎?觀察FaceBook跟google等等的網頁結構,也是如此宣告,有方式讓舊IE也可以正常運作,所以就可以大膽地給它用去,省去以前落落長的方式。

 <!-- [if IE 6]><html class="ie6 lte9 lte8 lte7" lang="zh-tw"><![endif]-->
 <!-- [if IE 8]><html class="ie8 lte9 lte8" lang="zh-tw"><![endif]-->
 <!-- [if IE 9]><html class="ie9 lte9" lang="zh-tw"><![endif]-->
 <!-- [if IE 7]><html class="ie7 lte9 lte8 lte7" lang="zh-tw"><![endif]-->
 <!-- [if !(IE 6) | !(IE 7) | !(IE 8) | !(IE 9)  ]><!--><!--<![endif]--> 

漸進增強版的HTML,會根據IE的版本去替html標籤增加不同的class名稱,讓css hack方式有些不同。通常我們習慣把hack都寫在一起,例如:

 .test{ width:100px; width:103px\9; *width:105px; _width:110px; } 

可以換成

 .test{ width:100px; } .ie8 .test{ width:103px; } .ie7 .test{ width:105px; } .ie6 .test{ width:110px; } 

瀏覽器的Hack寫法很多,漸進增強版的HTML主要是針對IE,雖然會增加css的量,但可以把hack集中或許是不錯的管理方式。




 <!--
            <meta http-equiv="Pragma" content="no_cache">
            <meta name="format-detection" content="telephone=no"/>
	-->
 <!-- [if lt IE 7 ]><meta content='0; url=ie6.html' http-equiv='refresh' /><![endif]-->






接下來就是在head裡面meta的部分,meta是用來提供有關頁面訊息的說明,經常容易忽略它的存在性及重要性,裡面有一些需要了解的重點。

第1行:HTML5的簡化方式。
第2行:告訴搜尋引擎你網站採用的語言,有助SEO。
第3行:確保IE的瀏覽器模式、文件模式都是使用最新版本,因為IE8以上有莫名其妙的相容性檢視功能,會讓使用者雖然裝了IE10卻會以IE7,8,9版的文件模式來瀏覽,跑出奇異的bug(想像一下這樣的狀況發生在客戶上會多恐怖XD)。chrome=1則是如果有安裝Google Chrome 內嵌框架的話,可以確保使用者以這樣的模式瀏覽。
經過一些專案執行,發現有些時候即使加入這句話,仍會發生IE瀏覽器相容性的問題出現,解決狀況各有不同,像是有人建議這句話盡量往上置放,之前不要出現其他js或css的使用,這也確實解決了一些專案的問題,而其實應該要養成meta區域應該儘早宣告出來的習慣。
另外,也有遇過漸進式的宣告會讓這句話失敗,找不出明確原因,只好捨棄漸進式的方法。
第5行:不允許cache可以幫助測試,上線前可以拿掉。
第6行:format-detection可以把頁面上的手機號碼顯示為撥號的超鏈接,iphone預設是telephone=yes,如果不希望有這個效果則telephone=no。

第8行:如果網站不去支援IE6,跳轉到指定頁面,告知使用者下載更新瀏覽器(必加!)
第9行:行動裝置設定,viewport 參考文章,如果寫在css檔案裡,則變成:

 @viewport{
 width:device-width;
 initial-scale:1.0;
 maximum-scale:1.0;
 user-scalable:no;
 }
 

第10~13行:頁面相關訊息,寫的完整也有助SEO,分享在facebook也會有清楚的圖文。
最後就是載入一些樣式表跟js檔案了:


&nbsp;
<script src="js/ga_public.js"></script>&nbsp;

<!-- [if lt IE 9]>
<script src="js/libs/html5shiv.js"></script>
    <script src="js/libs/IE9.js" ></script>
<script src="js/libs/PIE.js" ></script>
<![endif]-->

第1行:css重置歸零,這邊我採用normalize.css,也可以採用HTML5 Reset
第2~4行:依專案內容的css樣式檔,hack.css管理css hack,responsive.css 則是來處理行動裝置版的樣式。
第5行:Google Analytics的code,獨立在外面,方便修改。
第6~10:針對舊IE處理兼容性的處理,在前一篇文章處理CSS瀏覽器兼容性的js有介紹。

整個Temoplate主要的部份介紹完畢,可以依實際狀況去做增加或刪減,
像是ModernizrBootstrap等等,如果有需求在引用,有提供客制化的輸出版本的功能要記得使用,減輕K數以免造成網站效能跟流量的負擔。

Template整理到最後,發覺大部分都要處理IE而存在,真是萬惡的IE!

github

我是使用compass跟scss編寫css,所以github裡面有sass資料夾跟config.rb檔,這話題可以留到對scss更有心得的時候在分享,使用上沒用習慣用scss的話可以先刪除。

這篇介紹,希望對大家有幫助,有任何錯誤或更好的方法也歡迎留言。

5 thoughts on “HTML Template 專案快速開始

  1. 好酷啊整理出來還有github,分享給創意部

  2. 對了你跟小綠上次分享會有文件可以看嗎,參考一下你們分享什麼~

  3. 這用法在串facebook時與IE更新版本9.0.13時有不可解的問題發生,後來拿掉才正常,看來使用上要針對IE9測試多種版本比較保險~

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>