平常都是使用Visual Studio中的開發伺服器,但在設定使用Vista的IIS 7時,不管是設定「虛擬目錄」或是把網站原始目錄(wwwroot)設定到實際運作目錄,怎麼測都會出現錯誤訊息:「在應用程式層級之外使用註冊為 allowDefinition='MachineToApplication' 的區段發生錯誤。錯誤的原因可能是虛擬目錄尚未在 IIS 中設定為應用程式。」
只能說,又是一段天書級說明。還好,這個世界有G大。
參考說明:http://blog.xuite.net/sugopili/computerblog/19116944
錯誤原因是我自己造成的,因為平常我習慣將所有程式集中在一個目錄之下,如下架構:
WebDeveloper
-- WebSite1
-- WebSite2
-- WebSite3
-- ...
所以在每個WebSite之下都會有一個web.config,而我原先的想去是,在IIS設定虛擬目錄,然後指定到WebDeveloper目錄,然後想要執行或測試那個WebSite裡Code都進去Click即可,但這就是「問題點」,因為每個WebSite目錄之下都有完整的web.config,所以造成IIS/.Net Framework在初始化網站時產生錯誤,因為有太多個web.config。
WebDeveloper
-- WebSite1
web.config(完整版)
-- WebSite2
web.config(完整版)
-- WebSite3
web.config(完整版)
-- ...
回到最原始的理論:
Machine.config --> WebSite根目錄(web.config完整版) --> 子目錄(web.config部份版)
也就是說,一個WebSite之下只能有一個完整版web.config,像我們在安全或需要認證的目錄下設定的web.config部份設定,可覆寫根目錄web.config設定。但一個WebSite之下如果有多個web.config完整版的設定檔,就會產生錯誤訊息。
所以我這種設定法是不正確的,也就產生了天書級的錯誤訊息。所以還是努力一點,想要測那個WebSite程式,就切換過去哪個目錄最保險。
CSS Seletor與jQuery Seletor
在CSS部份,先設計好你所要的樣式,我們這裡舉下載檔案的例子,我們常在網頁上放PDF等類型的檔案讓訪客下載,我們jQuery寫幾行簡單的Code,就可以幫我們處理好全部這類下載的樣式而不用我們一行一行class屬性的設定。
HTML部份:
CSS部份:
jQuery部份:
或是我們要為網站上的Link設定一個統一的樣式,也可以採用以下寫法,將CSS包在jQuery中:
以上只是透過一個簡單的jQuery屬性過濾功能,來針對href來進行過濾及設定。但其實jQuery的選擇器(Selector)是採用CSS Selector,所以相同的東西我們在CSS裡也可以這樣設定:
CSS部份:
這裡我連jQuery程式都沒有寫就完成了我想要的效果。這裡其實我想表達的有兩件事:
HTML部份:
<a href="kkbruce.blogspot.com" title="KingKong Bruce">Bruce</a> | <a href="KingKong.pdf" title="KingKong PDF file">KingKong PDF</a>
CSS部份:
.pdf {
background-color: green;
border: 1px solid #ABABAB;
color: white;
}
jQuery部份:
$(function(){
$('a[href$=".pdf"]).addClass('pdf');
//a[]:屬性過濾
//$=:結尾是…
//addClass:加入Class
//整句話:將a屬性href結尾是.pdf加入Class屬性為pdf
});
或是我們要為網站上的Link設定一個統一的樣式,也可以採用以下寫法,將CSS包在jQuery中:
$(function(){
$('a[href$=".com"]').css({"background-color": "green",
"border":"1px solid #ABABAB",
"color":"white",
"font-family":'"Verdana", "Courier New"',
"font-size": ".93em"});
//css:加入css設定
//特性:值
//整句話:將a屬性href結尾是.com加入css設定(即style屬性)
});
以上只是透過一個簡單的jQuery屬性過濾功能,來針對href來進行過濾及設定。但其實jQuery的選擇器(Selector)是採用CSS Selector,所以相同的東西我們在CSS裡也可以這樣設定:
CSS部份:
a[href$=".pdf"] {
background-color: green;
border: 1px solid #ABABAB;
color: white;
}
這裡我連jQuery程式都沒有寫就完成了我想要的效果。這裡其實我想表達的有兩件事:
- CSS能做到的事,不要拿jQuery來開刀。
- jQuery就是拿來做有經濟效益的事,如動態效果、程式邏輯、AJAX…等。
XHTML 1.0檢查表
XHTML是XML,而HTML就只是HTML。
以下是從HTML轉換到XHTML的必做事項:
* 將DOCTYPE改為嚴格版XHTML。或者,如果還在用過渡期HTML,可以用過渡期XHTML。
* 把xmlns、lang和xml:lang屬性加到<html>起始標籤。
xmlns:用來辨別html所屬的XML語言,URL裡的內容並不重要,你也可以指定成你網域的URL。
lang、xml:lang:en指定使用的語言為英文,zh-tw指定語言為繁體中文,zh-cn指定語言為簡體中文。
* <html>標籤必須是DOCTYPE之後的第一個標籤,而</html>結束標籤必須是文件的最後一個標籤。
* 所有元素名稱都必須是小寫字體。
* 所有起始標籤都必須有結束標籤。如果是空元素,那麼這個標籤必須用空白加上/>做結束。
HTML 4.01:
XHTML 1.0
* 所有屬性值都要用雙引號框住,而且都一定要含有數值。
* 不可在HTML內容使用&。&是實體的起始字元,所以請用&,也請將其他特別的字元轉換為實體。
參考資料:Head First HTML with CSS & XHTML (中文:深入淺出HTML、CSS與XHTML)
以下是從HTML轉換到XHTML的必做事項:
* 將DOCTYPE改為嚴格版XHTML。或者,如果還在用過渡期HTML,可以用過渡期XHTML。
<!-- transitional:過渡期XHTML --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- strict:嚴格版XHTML --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
* 把xmlns、lang和xml:lang屬性加到<html>起始標籤。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-tw" lang="zh-tw">
xmlns:用來辨別html所屬的XML語言,URL裡的內容並不重要,你也可以指定成你網域的URL。
lang、xml:lang:en指定使用的語言為英文,zh-tw指定語言為繁體中文,zh-cn指定語言為簡體中文。
* <html>標籤必須是DOCTYPE之後的第一個標籤,而</html>結束標籤必須是文件的最後一個標籤。
* 所有元素名稱都必須是小寫字體。
* 所有起始標籤都必須有結束標籤。如果是空元素,那麼這個標籤必須用空白加上/>做結束。
HTML 4.01:
< br > <img src="..." alt="...">
XHTML 1.0
< br /> <img src="..." alt"..." />
* 所有屬性值都要用雙引號框住,而且都一定要含有數值。
* 不可在HTML內容使用&。&是實體的起始字元,所以請用&,也請將其他特別的字元轉換為實體。
參考資料:Head First HTML with CSS & XHTML (中文:深入淺出HTML、CSS與XHTML)
HTML 4.01 Strict導覽
主要規則
1. <html>元素:出門在外別忘了帶<html>喔!
每個頁面開端一定要用DOCTYPE,緊跟著DOCTYPE之後,<html>元素一定要是頁面首席元素或是根元素。因此,在DOCTYPE之後,要用<html>標籤放在頁面開端,且應用</html>標籤結束頁面,至於其他的東西都是巢居在這兩個標籤裡頭。
2. 記住要用你的<head>和<body>,才會有比較好的HTML喔!
只有<head>和<body>元素可以直接放在<html>元素裡,其他元素都應放在<head>或<body>元素裡。絕無例外。
3. 沒有<title>的<head>是什麼?
一定要給<head>元素一個<title>元素。這是法律,辦不到的話,那就會使用HTML不符合一致性。<head>元素是唯一該放<title>、<meta>、<style>元素的地方(也許還會含<script>標籤)。
4. 只能給你的<body>吃有益的區塊元素。
只能把<h1>、<h2>…<h6>、<p>、<blockquote>…等區塊元素直接放到你的<body>元素內。所有的行內元素與文字都要先放在別一個區塊元素內,之後才能放進<body>元素內。
5. 行內元素要遠離區塊元素。
唯一能放行內元素內的東西就是文字和其他行內元素。區塊元素無論如何都不可以放在行內元素裡。
Example:
HTML 4.01 Strict導覽續篇(一)
次要規則
1. <p>元素要遠離區塊元素。
段落是用在文字的,所以別讓區塊元素靠近段落。當然,所有你想要的行內元素,如:<em>、<a>、<strong>、<img>、<q>…等,都可以放在<p>元素裡面。
2. 清單(<ol>、<ul>)裡就只能放清單項目(<li>)。
只有<li>元素能放在<ul>和<ol>元素裡,你也不會想放非清單項目的東西放在未排序或排序的清單裡吧?
Example:
3. 清單項目<li>裡放什麼都行。
<li>元素裡非常自由,文字、行內元素或是區塊元素。
4. 誰知道?<blockquote>只喜歡區塊元素。
<blockquote>元素裡頭需要一個或更多的區塊元素。雖然常見到文字直接放在區塊元素裡,但這還沒列入HTML 4.01的法條裡。務必先把文字和行內元素被在區塊元素內之後,才能把這些內容放進<blockquote>裡。
Example:
5. 將某個行內元素巢居在另一個行內元素內時,請務必要小心謹慎。
雖然幾乎每個行內元素都能巢居在另一個行內元素裡,但是還是有幾個特例。絕對不要把<a>元素放在<a>元素內,因為這會讓訪客感到極度困擾。還有,<img>這類的空元素不能讓其他行內元素巢居於內。
HTML 4.01 Strict導覽續篇(二):
注意事項
1. 區塊(block)元素獨立自主;行內(inline)元素隨波逐流。
區塊元素是用在網頁的主要建築區塊,而行內元素則標示出內容的一小部份。行內元素要放在區塊元素裡。
2. 給連結(<a title="...")標題,提升連結識別度。
* 連結標籤要精簡,不要放整句話或一段長文字到連結上。
一般而言,放幾個字就好了,額外的資訊可以放在title屬性。
* 連結標籤要有意義。
不要使用類似「點擊此處」或「本頁」的描述。
* <a>標籤有兩個角色
一是從一個頁面跳到另一個頁面,二是擔任連結的降落點(landing point)或目的地(destination),要成為降落點可使用id屬性。
在URL最後使用"#"來進行降落的動作:
3. <img>標籤的alt屬性是有意義的圖像描述。記得,<img>是行內元素,所以參考第一點最後一段文字。
4. 清楚的<meta>標籤告訴瀏覽器網頁的額外資訊,加快瀏覽器的處理速度。
在<head>標籤素加入以下基本<meta>標籤:
除了良好的(X)HTML架構與實用的內容,<meta>標籤內容的設計,也是一個簡單的SEO(Search engine optimization,搜尋引擎最佳化),讓你的網站網頁可以得到比別人更搜尋引擎排名。
5. 怪異模式
許多瀏覽器有兩種顯示HTML的模式:「怪異模式」用在舊版HTML,標準模式用在HTML 4.01或XHTML1.0/1.1。如果不告訴瀏覽器你用的是哪種版本的HTML(未使用文件類型定義"DOCTYPE"),許多瀏覽器就會用怪異模式,這會導致不同的瀏覽器出現不一致的頁面顯示結果,例如IE6這個版本的瀏覽器。
參考1:Head First HTML with CSS & XHTML (中文:深入淺出HTML、CSS與XHTML)
參考2:http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/
參考3:http://www.addedbytes.com/cheat-sheets/html-character-entities-cheat-sheet/
1. <html>元素:出門在外別忘了帶<html>喔!
每個頁面開端一定要用DOCTYPE,緊跟著DOCTYPE之後,<html>元素一定要是頁面首席元素或是根元素。因此,在DOCTYPE之後,要用<html>標籤放在頁面開端,且應用</html>標籤結束頁面,至於其他的東西都是巢居在這兩個標籤裡頭。
2. 記住要用你的<head>和<body>,才會有比較好的HTML喔!
只有<head>和<body>元素可以直接放在<html>元素裡,其他元素都應放在<head>或<body>元素裡。絕無例外。
3. 沒有<title>的<head>是什麼?
一定要給<head>元素一個<title>元素。這是法律,辦不到的話,那就會使用HTML不符合一致性。<head>元素是唯一該放<title>、<meta>、<style>元素的地方(也許還會含<script>標籤)。
4. 只能給你的<body>吃有益的區塊元素。
只能把<h1>、<h2>…<h6>、<p>、<blockquote>…等區塊元素直接放到你的<body>元素內。所有的行內元素與文字都要先放在別一個區塊元素內,之後才能放進<body>元素內。
5. 行內元素要遠離區塊元素。
唯一能放行內元素內的東西就是文字和其他行內元素。區塊元素無論如何都不可以放在行內元素裡。
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- 如有使用到JavaScript語言請加上此<meta>標籤 --> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <!-- 如有使用到CSS請加上此<meta>標籤 --> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="auther" content="作者" /> <meta name="description" content="此網頁說明或描敘" /> <meta name="keywords" content="關鍵字, 關鍵字, 關鍵字" /> </head> <body> </body> </html>
HTML 4.01 Strict導覽續篇(一)
次要規則
1. <p>元素要遠離區塊元素。
段落是用在文字的,所以別讓區塊元素靠近段落。當然,所有你想要的行內元素,如:<em>、<a>、<strong>、<img>、<q>…等,都可以放在<p>元素裡面。
2. 清單(<ol>、<ul>)裡就只能放清單項目(<li>)。
只有<li>元素能放在<ul>和<ol>元素裡,你也不會想放非清單項目的東西放在未排序或排序的清單裡吧?
Example:
<ol> <li></li> <li></li> </ol>
3. 清單項目<li>裡放什麼都行。
<li>元素裡非常自由,文字、行內元素或是區塊元素。
4. 誰知道?<blockquote>只喜歡區塊元素。
<blockquote>元素裡頭需要一個或更多的區塊元素。雖然常見到文字直接放在區塊元素裡,但這還沒列入HTML 4.01的法條裡。務必先把文字和行內元素被在區塊元素內之後,才能把這些內容放進<blockquote>裡。
Example:
<blockquote> <p>...Context...</p> </blockquote>
5. 將某個行內元素巢居在另一個行內元素內時,請務必要小心謹慎。
雖然幾乎每個行內元素都能巢居在另一個行內元素裡,但是還是有幾個特例。絕對不要把<a>元素放在<a>元素內,因為這會讓訪客感到極度困擾。還有,<img>這類的空元素不能讓其他行內元素巢居於內。
HTML 4.01 Strict導覽續篇(二):
注意事項
1. 區塊(block)元素獨立自主;行內(inline)元素隨波逐流。
區塊元素是用在網頁的主要建築區塊,而行內元素則標示出內容的一小部份。行內元素要放在區塊元素裡。
2. 給連結(<a title="...")標題,提升連結識別度。
* 連結標籤要精簡,不要放整句話或一段長文字到連結上。
一般而言,放幾個字就好了,額外的資訊可以放在title屬性。
* 連結標籤要有意義。
不要使用類似「點擊此處」或「本頁」的描述。
* <a>標籤有兩個角色
一是從一個頁面跳到另一個頁面,二是擔任連結的降落點(landing point)或目的地(destination),要成為降落點可使用id屬性。
<a id="landing">段落二</a>
在URL最後使用"#"來進行降落的動作:
<a href="index.html#landing">段落二</a>
3. <img>標籤的alt屬性是有意義的圖像描述。記得,<img>是行內元素,所以參考第一點最後一段文字。
<p> <img src="..." alt="..." /> </p>
4. 清楚的<meta>標籤告訴瀏覽器網頁的額外資訊,加快瀏覽器的處理速度。
在<head>標籤素加入以下基本<meta>標籤:
<!-- charset設定HTML文件是以何種文字碼所寫成,如BIG5、GB2312、UTF-8…等,不分大小寫。 --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- 設定該HTML文件內之樣式表和預設的Script語言。一般使用環境中,即使不指定,也會自動將樣式表視為CSS,並將Script語言視為JavaScript,但指定預設語言才是正確的作法。 --> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="auther" content="作者" /> <!-- 你可能會在搜尋引擎上的結果頁面看到搜尋引擎對此網頁文件的描述,此描述大多來自description,你會想點擊有良好說明的搜尋連結或是沒有說明的搜尋連結。 --> <meta name="description" content="此網頁說明或描述" /> <!-- keywords以是半型逗點來分隔關鍵字,一般最多10組 --> <meta name="keywords" content="關鍵字, 關鍵字, 關鍵字" />
除了良好的(X)HTML架構與實用的內容,<meta>標籤內容的設計,也是一個簡單的SEO(Search engine optimization,搜尋引擎最佳化),讓你的網站網頁可以得到比別人更搜尋引擎排名。
5. 怪異模式
許多瀏覽器有兩種顯示HTML的模式:「怪異模式」用在舊版HTML,標準模式用在HTML 4.01或XHTML1.0/1.1。如果不告訴瀏覽器你用的是哪種版本的HTML(未使用文件類型定義"DOCTYPE"),許多瀏覽器就會用怪異模式,這會導致不同的瀏覽器出現不一致的頁面顯示結果,例如IE6這個版本的瀏覽器。
參考1:Head First HTML with CSS & XHTML (中文:深入淺出HTML、CSS與XHTML)
參考2:http://www.addedbytes.com/cheat-sheets/html-cheat-sheet/
參考3:http://www.addedbytes.com/cheat-sheets/html-character-entities-cheat-sheet/
Visual Studio 2008中的JavaScript IntelliSense
在我們使用VS2008(Visual Studio 2008)中,排除語言(C#, VB.NET)等不談,其中最重要的就是IntelliSense功能,而在VS2008裡你可以發現,不論是本身的語言支援外,連CSS與JavaScript都有支援。而IntelliSense包括了四項功能:
這四項功能,我認為每一樣都很重要,而且非常實用。
其中VS2008之中JavaScript支援是指原JavaScript內建物件成員的支援,如Array、String、Math、Date、Number等內建物件,這提供我們在撰寫JavaScript程式碼時極大的便利性,這一點是一般文字編輯器所做不到的。
But,如果是我們自行撰寫的JavaScript Function,是否也能像原JavaScript內建物件一樣支援IntelliSense,這就是今天的重點。
當你稍後引用時,就能發現VS2008會自動將你撰寫的Function showName()資訊加入IntelliSense之中,讓你享受IntelliSense所帶來的方便。不過在內嵌的JavaScript IntelliSense目前只能提供「參數個數」及「名稱資訊」。
我們先在外部*.js中新增Function,然後在Function內加入XML程式碼註解。
現在把這個外部*.js引用到使用的網頁中(*.html, *.aspx),然後在需要使用的地方打上Function Name,你應該就可以看到與內嵌不一樣的效果,是完整度更高的JavaScript IntelliSense。
showName.js裡有Function showName(),今天我有另一個getTime.js需要使用到showName.js,我想讓getTime.js支援showName.js的JavaScript IntelliSense,你只需要在getTime.js的第一行加入:
然後你就能發現在撰寫getTime.js時也能參考到showName.js裡的IntelliSense,而且這種參考是可以雙向的,在showName.js中如果需要使用到getTime.js的Function,你也能在showName.js的第一行使用這個XML程式碼註解的方法。
「編輯」→「IntelliSense」→「更新JScript IntelliSense」
這樣就可以命令VS2008立即更新JavaScript IntelliSense,讓我們馬上可以使用JavaScript IntelliSense所帶來的便利。
- 列出成員( List Members )
- 參數資訊( Parameter Information )
- 快速諮詢( Quick Information )
- 自動完成文字( Complete Word )
這四項功能,我認為每一樣都很重要,而且非常實用。
其中VS2008之中JavaScript支援是指原JavaScript內建物件成員的支援,如Array、String、Math、Date、Number等內建物件,這提供我們在撰寫JavaScript程式碼時極大的便利性,這一點是一般文字編輯器所做不到的。
But,如果是我們自行撰寫的JavaScript Function,是否也能像原JavaScript內建物件一樣支援IntelliSense,這就是今天的重點。
in-line撰寫JavaScript Function
in-line就是說在HTML中的<head>...</head>區段中加入<script type ="text/javascript">...</script>區段,然中在<script>區段中加入自行撰寫的JavaScript Function:function showName(firstName, lastName) {
alert("First Name :" + firstName + ", Last Name :" + lastName);
}
當你稍後引用時,就能發現VS2008會自動將你撰寫的Function showName()資訊加入IntelliSense之中,讓你享受IntelliSense所帶來的方便。不過在內嵌的JavaScript IntelliSense目前只能提供「參數個數」及「名稱資訊」。
在外部*.js中提供快速諮詢及參數資訊之說明文字提示
這部份我先說,我也不知道為什麼VS2008中在內嵌的JS裡無法使用以下提供的方法,以下提供的方法只能在外部獨立的JavaScript檔案使用。這個方法正式名稱為「XML Code Comment」(XML程式碼註解)。我們先在外部*.js中新增Function,然後在Function內加入XML程式碼註解。
- ///<summary></summary>,快速諮詢資訊
- ///<param name="參數名稱" /></param>
- ///<returns type="型別"></returns>,回傳值資訊
function showNameTime(firstName, lastName) {
///<summary>顯示使用者的姓名</summary>
///名字</param>
///姓名</param>
alert("First Name :" + firstName + ", Last Name :" + lastName );
}
function getTime() {
///<summary>目前時間</summary>
///<returns type="string">回傳hh:mm:ss格式</returns>
var date = new Date();
var dateTime = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
return dateTime;
}
現在把這個外部*.js引用到使用的網頁中(*.html, *.aspx),然後在需要使用的地方打上Function Name,你應該就可以看到與內嵌不一樣的效果,是完整度更高的JavaScript IntelliSense。
多個*.js檔案之間的JavaScript IntelliSense參考
既然這個 「XML程式碼註解」的方法,只能使用在「外部*.js」,那如果是在多個*.js的情況下,那是否可以「互相」參考後來產生對方*.js的JavaScript IntelliSense,答案是可以。showName.js裡有Function showName(),今天我有另一個getTime.js需要使用到showName.js,我想讓getTime.js支援showName.js的JavaScript IntelliSense,你只需要在getTime.js的第一行加入:
///<reference path="showName.js" />
然後你就能發現在撰寫getTime.js時也能參考到showName.js裡的IntelliSense,而且這種參考是可以雙向的,在showName.js中如果需要使用到getTime.js的Function,你也能在showName.js的第一行使用這個XML程式碼註解的方法。
強制更新JavaScript IntelliSense
也就是有時候如果你已經依照上述方法設定完成,但VS2008還來不及更新JavaScript IntelliSense,我們也可以手動更新這個JavaScript IntelliSense:「編輯」→「IntelliSense」→「更新JScript IntelliSense」
這樣就可以命令VS2008立即更新JavaScript IntelliSense,讓我們馬上可以使用JavaScript IntelliSense所帶來的便利。
訂閱:
文章 (Atom)