網頁

▼

[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 Guide由Bruce製作，以創用CC Attribution-NonCommercial-ShareAlike
    授權條款    釋出。
回最上面


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

沒有留言:

張貼留言

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