網頁

[CompanyName] Web Develop Guide

這是我寫的一份手冊,主要是讓大家有一個參考方向。原始檔是美美的HTML檔案,歡迎大家下載使用,如果各位有新增、修改為更好、更棒的內容,希望也能回饋給我。

使用方式,你可以用「取代」把[CompanyName]換成你的公司名稱,就馬上成為一份正式文件了。

[CompanyName] Web Develop Guide

此文件是一個網站發展指南,協助產生,實施和持續發展[CompanyName]網站。該文件概述了整體網站的文件結構、規範、設計和編碼準則,樣式和資源用於建設這個網站。
開發符合網頁標準(XHTML, CSS, ECMAScript)的[CompanyName]網站,在網頁標準之下將網頁分離為三個部份:「結構(Structure)、表現(Presentation)、行為(Behavior)」,網頁分離讓網站工作能有更大好處:
  • 減少頁面程式碼
  • 減低頁面複雜度
  • 更容易維護
  • 分工容易
  • 頻寬要求更低
  • 更容易被搜尋引擎接受及更高的排名
  • 改版方便
  • 提高網站易用性
為了確保設計的連續性,保持[CompanyName]網站的壽命,這是很重要,大家都參與開發,維護和更新[CompanyName]網站,了解並遵守這些準則。

1.0 編碼標準

[CompanyName]網站最低編碼標準。

1.1 驗證

[CompanyName]網站網站設計為達到XHTML
1.0 Transitional
CSS2.1規格,規格由WC3(World
Wide Web Consortium)製定。所有新的和現有的網頁必須針對這些目標,加以驗證。

1.2 DOCTYPE 聲明

每一個(X)HTML的網頁在網站上必須使用以下DOCTYPE聲明,以符合過渡(Transitional)的XHTML 1.0規範。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在(X)HTML的網頁,<html>元素需包含xmlns屬性與xml:lang屬性及lang屬性。xml:lang屬性及lang屬性設定此網頁語言碼(en,zh-tw,
zh-cn, ...)。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-tw"
            lang="zh-tw"> … </html>

1.3 無障礙性

[CompanyName]網站將無障礙性納入考量,以台灣行政院無障礙規範為參考,建構一個高度無障礙性網站為目標。國際規範可參考WCAG、美國規範可參考Section
508

  • 圖片必須有alt屬性,如果說明文字很長,請使用longdesc屬性指定別一說明網頁之URL。
  • 在<a>內使用tabindex屬性來設定移動順序
<img alt="cute cat" longdesc="catstory.html" src="cat.png" />

1.4 瀏覽器支持

[CompanyName]網站的瀏覽器支持主流版本瀏覽器,[CompanyName]網站用戶端最多為Internet
Explorer,建議用戶端最少使用IE 8,如不是使用IE 8,應在適當時機諮詢當前用戶升級,以取得內容與功能容相性上的平衡。
<!--[if lte IE 6]> <div style="background-color:#DDECFF;margin:5px 0 5px 0;padding:3px 10px 3px 10px;
border-color:#F6F6F6; border-style:solid;border-width:2px;">
<p><strong>您好</strong>,您目前使用的是舊版的<del>IE 6.0網路瀏覽器</del>,建議使用更快、更好用的瀏覽器!
如:<a target="_blank" href="http://www.google.com.tw/">Google Chrome</a>、
<a target="_blank" href="http://www.mozilla.com/zh-TW/">Firefox</a>、
<a target="_blank" href="http://www.opera.com/">Opera</a>、
<a target="_blank" href="http://www.apple.com/tw/safari/download/">Safari</a>、
<a target="_blank" href="http://www.microsoft.com/taiwan/windows/internet-explorer/">IE8</a>。</p>
</div> <![endif]--> 
<!--[if IE]> 這樣使用IE瀏覽器(全部版本)的人都看得到。 <![endif]--> 
<!--[if IE 6]> 這樣IE 6.0版本會看得到,只限IE 6.0版本。 <![endif]--> 
<!--[if lt IE 6]> lt:less than (版本編號小於) 這樣IE 6.0以下版本會看得到,不包含6.0。 <![endif]-->
<!--[if lte IE 6]> 這樣IE 6.0以下版本會看得到,包含6.0。 <![endif]--> 
<!--[if lte IE 8]> lte:less than or equal to (版本編號小於等於) 這樣IE 8.0以下版本會看得到,包含8.0。<![endif]-->
        
<!--[if gt IE 5]> gt:greater than (版本編號大於) 這樣IE 5.0以上版本會看得到,不包含5.0<![endif]-->
        
<!--[if gte IE 5]> gte:greater than or equal to (版本編號大於等於) 這樣IE 5.0以上版本會看得到,包含5.0<![endif]-->
        

1.5 字符集

所有網頁應使用Unicode的UTF-8字符集。
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
所有特殊字符應標明了使用正確"命名實體",為了使頁面顯示正確跨瀏覽器和驗證。特別是,使用下面的特殊字符:
命名實體

Name

Symbol

Code

And符號(Ampersand)

&

&amp;

左雙引號(Left)


&ldquo;

右雙引號(Right)


&rdquo;

小於

<

&lt;

大於

>

&gt;

破折號(en-dash)

-

&endash;

破折號(em-dash)


&emdash;

省略(Ellipsis)


&helip;

版權

©

&copy;

註冊

®

&reg;

商標


&trade;

向左


&larr;

向上


&uarr;

向右


&rarr;

向下


&darr;

左右雙向


&harr;
在文字處理時,採取特別小心來處理輸入的內容。

1.6 標題,關鍵字和描述

鼓勵簡便的導航系統和良好的搜索引擎排名,所有的網頁應該包含一個標題,描述和關鍵字。這些內容元素應可建立在內容編輯時,而不是留給開發人員。
網頁標題應簡單,描述性和獨特,避免誇張。為保持一致性,所有標題應該在格式:
<title>[CompanyName]–[Section]:[Page]</title>
網頁描述應該在1~3短句說明,說明內容和目的地頁面。
<meta name="Description" content="Page summary goes here." />
網頁關鍵字用於添加額外的同義詞和意義。關鍵詞不應當被用來補充無關的詞句。最多一個網頁的關鍵字不超過10個。
<meta name="keywords" content="word 1, word 2, word n" />
每一頁應包含基礎完整的5項<meta>宣告:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="description" content="Page summary goes here." />
<meta name="keywords" content="word 1, word 2, word n" />
如特別的網頁(如會員區、機密資料等),避免讓搜尋引擎進入,除伺服器程式端應防範外,應加入以下<meta>宣告:
<meta name="robots" content="noindex,nofollow" />
/* noindex:略過這個頁面 */
/* nofollow:略過這個頁面超連結的同一網站其他頁面 */

1.7 圖片替代文字

每一個圖片元素在網站上都需要替代文字。圖片alt屬性文字說明必須提供足夠的內容或功能說明。替代文字的內容必須可建立在內容編輯時。它不能留給網站發展人員自行決定。

<img src="/img/xxxx.gif" alt="Add image description text here." />
如果純粹裝飾性的圖片,alt屬性可以留空白。alt屬性依然必須存在。
<img src="/img/pretty.gif" alt="" />

1.8 超連結

文字超連結應該是唯一和描述目的地的超連結。超連結“點擊這裡”或“更多”應避免使用,應該明確敘述超連結本身。
<a href="news.aspx">More News Stories</a>
超連結打開一個新的視窗應該是可以避免的。但是,如果有一個很好的理由,讓這樣做的可用性(例如:提供上下文幫助),超連結文字必須通知用戶。
<a href="help.aspx">Help (open new window)</a>
超連結下載的文件 - 如PDF - 應包含的文件大小,格式和事實,即他們是下載而不是超連結到另一個網頁。
<a href="Manual.pdf">Download the Manual in PDF format(25KB)</a>
增加title屬性,您可以提供額外一個工具提示(tool-tip)。
<a href="news.aspx" title="News Archive">More News Stories</a>

1.9 有意義的HTML

所有網頁應使用有意義的編碼,而不是表象的XHTML。有意義的內容包括但不限於以下內容:
  • h1, h2 ~ h6
  • ul, ol, dl
  • strong, em
  • blockquote, cite
  • abbr, acronym, code
  • fieldset, legend, label
  • caption, thead, tbody, tfoot
已過時的元素和屬性應該是可以避免的。

1.10 縮寫

出現在每一頁上時,縮寫應標明和界定他們。abbr為可代表各種縮寫字,acronym為第一個字母縮寫字或當成一個單字來發音的縮寫字(例如:NATO、SOHO、LAN、WAN、VPN等)。
<abbr title="UK">United Kingdom</abr> <acronym title="NATO">North Atlantic Treaty Organisation</ acronym > 

1.11 表格

表格為了資料保留,不應該被用於頁面佈局。資料表格應標明了使用適當的有意義的元素,例如:<th>, <td>,<thead>,<tbody>和<tfoot>和適當的有意義的屬性,例如,摘要,編號和標題。
表格設計應符合HTML 4.01規範裡table規範。
<table border="1" summary="This table gives some statistics about fruit flies: average height and weight, and
 percentage with red eyes (for both males and females).">
 <caption>A test table with merged cells</caption>
 <tr><th rowspan="2"></th><th colspan="2">Average</th><th rowspan="2">Red<br />eyes</th></tr>
 <tr><th>height</th><th>weight</th></tr>
 <tr><th>Males</th><td>1.9</td><td>0.003</td><td>40%</td></tr>
 <tr><th>Females</th><td>1.7</td><td>0.002</td><td>43%</td></tr>
</table> 

1.12 id或name的命名

設定id屬性或name屬性時,請注意,第一個字元必須是大小寫英文,然後再接英數字。
<!-- Bad id -->
<div id="1Nav"> ... </div>
<h1 id="0.0">Web Develop</h1>
<!-- Good id -->
<div id="MainNav"> ... </div>
<h1 id="chapter0.0">Web Develop</h1>

1.13 HTML 4.01 Strict 導覽

HTML 4.01規範中重點部份簡易導覽。

1.13.1 HTML 4.01主要規則

  1. <html>必為根元素

    每個頁面開端一定要用DOCTYPE,緊跟著 DOCTYPE之後,<html>元素一定要是頁面根元素。因此,在DOCTYPE之後,要用<html>標籤放在頁面開端,且應用</html>標籤結束頁面,至於其他的元素都是巢居在這兩個標籤裡頭。
  2. 只有<head>和<body>元素可以直接放在<html>元素裡,其他元素都應放在<head>或<body>元素裡。絕無例外。
  3. 一定要給<head>元素一個<title>元素

    <head>元素是唯一該放<title>、<meta>、<style>元素的地方(也許還會含<script>、<link>標籤)。
  4. <body>只放的區塊元素

    只能把<h1>、<h2>…<h6>、<p>、<blockquote>…等區塊元素直接放到你的<body>元素內。所有的行內元素與文字都要先放在別一個區塊元素內,之後才能放進<body>元素內。
  5. 行內元素要遠離區塊元素

    唯一能放行內元素內的東西就是文字和其他行內元素。區塊元素無論如何都不可以放在行內元素裡。

1.13.2 HTML 4.01次要規則(一)

  1. <p>元素要遠離區塊元素

    段落是用在文字的,所以別讓區塊元素靠近段落。當然,所有你想要的行內元素,如:<em>、<a>、<strong>、<img>、<q>…等,都可以放在<p>元素裡面。
  2. 清單(<ol>、<ul>)裡就只能放清單項目(<li>)
  3. 清單項目<li>裡放什麼都行。
  4. <blockquote>只喜歡區塊元素

    務必先把文字和行內元素放在區塊元素內之後,才能把這些內容放進<blockquote>裡。
  5. 將某個行內元素巢居在另一個行內元素內時,請務必要小心謹慎。

1.13.3 HTML 4.01次要規則(二)

  1. 區塊(block)元素獨立自主;行內(inline)元素隨波逐流。

    區塊元素是用在網頁的主要建築區塊,而行內元素則標示出內容的一小部份。行內元素要放在區塊元素裡。
  2. 給<a>(<a title="...")標題,提升識別度。






    • <a>標籤要精簡,不要放整句話或一段長文字到超連結上。一般而言,放幾個字就好了,額外的資訊可以放在title屬性。
    • <a>標籤要有意義,不要使用類似「點擊此處」或「本頁」的描述。
    • <a>標籤有兩個角色,一是從一個頁面跳到另一個頁面,二是擔任<a>的降落點(landing point)或目的地(destination),要成為降落點可使用id屬性。
  3. <img>標籤的alt屬性是有意義的圖像描述。記得,<img>是行內元素
  4. 清楚的<meta>標籤告訴瀏覽器網頁的額外資訊,加快瀏覽器的處理速度。

    除了良好的(X)HTML架構與實用的內容,<meta>標籤內容的設計,也是一個簡單的SEO(Search engine optimization,搜尋引擎最佳化)
  5. 怪異模式

    許多瀏覽器有兩種顯示HTML的模式:「怪異模式」用在舊版HTML,標準模式用在HTML 4.01或XHTML1.0。如果不告訴瀏覽器你用的是哪種版本的HTML(未使用文件類型定義"DOCTYPE"),許多瀏覽器就會用怪異模式,這會導致不同的瀏覽器出現不一致的頁面顯示結果,例如IE6這個版本的瀏覽器。
HTML 4.01區塊元素:address、blockquote、div、dl、fieldset、form、h1~h6、hr、noframes、ol、ul、p、pre、table。

1.14 XHTML 1.0 導覽

XHTML是XML,而HTML就只是HTML。
從HTML轉換到XHTML的必做事項:
  1. 將HTML的DOCTYPE改為XHTML的DOCTYPE。
  2. 把xmlns、lang和xml:lang屬性加到<html>起始標籤。
  3. <html>標籤必須是DOCTYPE之後的第一個標籤,而</html>結束標籤必須是文件的最後一個標籤。
  4. 所有元素名稱都必須是小寫字體。
  5. 所有起始標籤都必須有結束標籤。如果是空元素,那麼這個標籤必須用空白加上/>做結束。
  6. 所有屬性值都要用雙引號框住,而且都一定要含有值。
  7. 不可在HTML內容使用&。&是實體的起始字元,所以請用&amp;,也請將其他特別的字元轉換為實體。
回最上面

2.0 樣式

[CompanyName]網站在網頁呈現或排版上,採用CSS
2.1
標準,此文件包含樣式表的細節及如何使用在此個網站,它們是如何運用和如何呈現。
採用CSS希望達成:
  • 使網頁上的圖片數目越少越好。在(X)HTML裡只保留真正重要且有價值的圖片。
  • 為排版而存在的表格都應該去除。只有展現資料用的表格才能留下。
  • 使網頁標籤有穩固的結構。

2.1 CSS語法

2.1.1 CSS區分大小寫

可參考3.3 變數命名,建議使用駱峰(Camel)法來命名。網頁介面設計人員應採用一致的命名方法。

2.1.2 id與class的命名

id和class命名時,讓名稱淺顯易懂,而不是以它要呈現的樣子來命名。例如:你依照段落檢視元件出現的位置為命 id="rightHandNav",但後來卻改變心意,要放到左側,此時你的CSS和(X)HTML不會立即更新。最好的方法,將元件命名為更有意更的名稱。例如:subNav、secondaryNav,此種命名法可以表示出元件的本質為何,而不是告訴你它的位在哪裡而已。
bad name:
  • red
  • leftColumn
  • topNav
  • firstPara
good name:
  • error (錯誤訊息)
  • secondaryContent
  • mainNav (主導覽)
  • intro (簡介)

2.1.3 div與span

為了將非必要標籤的使用量減到最低,除非沒有其他選擇,否則還是盡可能避免使用div元素。
<div id="mainNav">
  <ul>
    <li>Home</li>
    <li>Products</li>
    <li>Contact</li>
  </ul>
</div>
<ul id="mainNav">
  <li>Home</li>
  <li>Products</li>
  <li>Contact</li>
</ul>

2.1.4 註解

/* 註解內容 */
在CSS內加上結構化註解,在最上方加上塊狀註解,描述樣式表「用途為何、產生日期、版本號碼、作者、連絡方式…」。
/*-------------------
CompanyName Master Style Sheet
Version: 1.0
Author: Bruce.Chen
Email: bruce@CompanyName.com.tw
Website: CompanyName.tw
History:
2010/5/28 CompanyName.css為載入(@import)其他*.css檔案之主檔案。
---------------------*/
遇到問題時,使用註解,把問題及解決方式記錄下來。此方法適用於任何語言之程式碼註解。
  • HACK:特別的處理
  • UNDONE:未完成的
  • UnresolvedMergeConflict:未解決的合併衝突
  • TODO:待辦事項
  • BUG:臭蟲
  • KLUDGE:拼湊 (不好的修正或解決方案)
  • TRICKY:難處理
// TODO : fix some function
' HACK : Update this procedure.
/* BUG : IE 6 bug. */

2.2 CSS顏色指定

CSS顏色指定共有五種方法
  1. 16進位值(1):#RRGGBB型式。
  2. 16進位值(1):#RGB型式。
  3. 10進位值:rgb(n,n,n),n為0~255數值。
  4. rgb百份比:rgb(%,%,%),%為0%~100%數值。
  5. 顏色名稱指定:使用HTML 4.01及瀏覽器定義好的名稱指定。例如:名稱"red"相等於#FF0000→#F00→rgb(255,0,0)→rgb(100%,0,0),又稱網頁安全顏色
網頁介面設計人員應採用一致的顏色設定方法。

2.3 合法性

[CompanyName]網站CSS檔案(CSS碼)必須通過CSS Validator驗證。

2.4 CSS管理

撰寫CSS時,明確度是相當有用的工具,因為為它能讓你為一般元素設定普通樣式,稍後再以較明確的元素來覆蓋它。讓「普通樣式表」很普通,讓「明確樣式表」盡可能明確。
普通:form {width: 30em}
明確:form#search{width: 15em;}

2.4.1 body元素的id

在網站每一頁body元素加上id,在我們想要覆蓋設定時,更容易閱讀。一般而言都是以id="www-sitename-com"來設定。
body#www-CompanyName-tw{
  font-size:200%;
  background-color: black;
  color: white;
}

2.4.2 文件加入外部樣式

使用link元素
<link href="URL" rel=stylesheet" type="text/css" />
使用import載入
<style type="text/css">
<!--
 @import url("URL");
-->
</style>
由樣式表載入樣式表,例如在CompanyName.css中載入其他樣式表
@import url("basic.css");
@import url("layout.css");
@import url("color.css");
@import url("table.css")
載入時,要位於所有樣式表設定最前面,如有相同的規則,後面載入的規則會覆蓋前面的規則。

2.4.3 CSS檔案分離

將CSS程式碼分割越細,越模組化,它就越容易閱讀及維護。也是將網頁標準中網頁分離應用到CSS管理,然後使用文件加入外部樣式第三種方法,來組織相關CSS檔案必須的網頁中。
  • 普通規則:「字型」、「標題」、「連結」…等做起頭。
  • 再依頁面內「主要段落」中出現順序來安排規則:「站名部份」、「主要內容」、「次要內容」、「主要Nav」、「次要Nav」、「註腳」…。
  • 最後處理「一般元素」,即偶爾出現在網站內的部份:例「框線樣式」、「表格樣式」、「圖像式按鈕」…。

2.5 樣式碼

以下記錄完整CSS碼。

2.5.1 格式

format.css
[add your styles here]

2.5.2 顏色

color.css
[add your styles here]

2.5.3 內嵌圖片

images.css
[add your styles here]

2.5.4 標題樣式

title.css
[add your styles here]

2.5.5 超連結樣式

hyperlink.css
[add your styles here]

2.5.6 “.error” Class

class.css
.error {…}
.feedback {…}
.news-story {…}
.box {…}
回最上面

3.0 ECMAScript

[CompanyName]網站採用Ecma國際所制訂的ECMAScript標準,它是一種更為通用的JavaScript。

3.1 ECMAScript語法

  1. 區分大小寫
  2. 每一句程式結尾都加上分號
  3. 括孤{ }區別程式碼區塊
  4. 變數透過var關鍵字宣告

3.2 變數

  1. 變數透過var關鍵字宣告
  2. 變數使用前都應宣告,並初始化
  3. 同一變數應該只儲存一種資料型別
  4. 變數透過var關鍵字宣告

3.3 變數命名

ECMAScript在變數命名規定:
  1. 字首必是英文字母、底線(_)或$符號
  2. 其他可以是英文字母、底線(_)、數字、$符號
  3. 變數不能是關鍵字或保留字
變數命名與使用時機:
  1. 駱峰(Camel)






    • 首字母小寫,其他單字字首大寫
    • 用於變數和函式
  2. Pascal






    • 首字母大寫
    • 用於物件
  3. 匈牙利






    • 改良Pascal,在變數前加上(一個或一組)小寫字母來說明變數的型別
    • 範例:






      1. 陣列, a或arr
      2. 布林, b或bln
      3. 浮點數, f
      4. 函數, fn
      5. 整數, i或int
      6. 物件, o或obj
      7. 正規式, re或reg
      8. 字串, s或str
開發人員應使用一致的名命規則。

3.4 初始化

變數宣告時還不知變數值,可先使用「什麼都沒有」來當值,減低存取未初始化變數的風險。
  • 空字串使用"",例如:var name="";
  • 數值使用0,例如:var price=0;
  • 布林使用false,例:var turnChoice=false;

3.5 Unobtrusive JavaScript

在ECMAScript指令碼撰寫上,應使用Unobtrusive JavaScript為原則,Unobtrusive JavaScript中文翻譯為無侵入式JavaScript,即本指南一開始所提之網頁分離原則。
傳統JavaScript
<input type="text" name="date" onchange="validateDate(this)"
            /> //function function validateDate(){ //Do something ... } 
無侵入式JavaScript
<input type="text" name="date" /> window.onload=function(){
            var inputs = document.getElementByTagName('input'); for (var i=0, l=inputs.length;
            i < l;i++){ input.onchange = function(){ validateDate(this); } } } 
更棒的選擇--jQuery
<input type="text" name="date" /> //jQuery Code
            &(function(){ $('input[name=date]').bind('change',function(){ validateDate(this);
            }); }); 
無侵入式方法可適用CSS。透過jQuery的幫忙,讓我們可使用簡易的指令碼來進行CSS操作。
回最上面

4.0 資源

包含有用的資源,該網站的超連結和描述,如何在XHTML和CSS文件中使用。
  1. HTML 4.01

    所有網頁的基礎標準。

  2. XHTML 1.0


    延伸自HTML 4.01,通過XHTML必先通過HTML驗證。[CompanyName]網站以W3C XHTML 1.0規範為基礎,[CompanyName]網站產出(X)HTML碼最低要求必須通過XHTML Validator中Transitional驗證,網站開發人員應盡最大努力讓[CompanyName]網站成為一個高度符合網路標準的網站。[註]ASP.NET產生原生(X)HTML碼應會通過Transitional驗證,如因ASP.NET本身影響(如:控制項等),而無法通過不在此限。

  3. CSS 2.1


    [CompanyName]網站使用者介面(UI)設計採用串接樣式(CSS),[CompanyName]網站CSS檔案(CSS碼)必須通過CSS Validator驗證,以期待網站介面在(跨)瀏灠器上能有最好的效果。
  4. nat.gov.tw

    [CompanyName]網站係參考台灣行政院所推行無障礙網頁開發規範,將無障礙的理念放入[CompanyName]網站,提升整體品質。
  5. 網頁安全顏色:網頁安全顏色參考資料。
  6. 授權:創用 CC 授權條款

    Web Develop GuideBruce製作,以創用CC Attribution-NonCommercial-ShareAlike
    授權條款
    釋出。
回最上面


Web Develop Guide 原始檔(注意,此檔使用CC授權條款釋出)

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。