擴展Dreamweaver:自訂第三方標籤的解析
因為最近一直在做Dreamweaver 插件的開發,中文的資料非常少,自己英文又差,查看英文資料的時候不由頭昏腦脹。迫不得已把其中一些重要的內容翻譯成中文之後,看的時候才覺得爽快不少。本節選自Dreamweaver 8 附帶的《Extending Dreamweaver 8》,翻譯的時候參考了一下俠客島翻譯的《Dreamweaver 4 中文幫助》。不過老實不客氣地說,我有點懷疑那個幫助的某些部分是用金山快譯之類的軟體翻譯的,反正讀起來比英文還難懂。
伺服器端技術,如ASP、Macromedia ColdFusion,JSP,以及PHP 在HTML 檔案裡面使用特殊的非HTML 語法,伺服器在這些程式碼的基礎上建立和提供HTML 格式的內容。當Dreamweaver 偵測到非HTML 標籤,Dreamweaver 會呼叫第三方標籤的定義檔來比較它們,這些檔案指定Dreamweaver 如何讀取和顯示這些標籤。
舉個例子,在標準的HTML 語言之外,ASP 檔案還包含了供伺服器解析的ASP 程式碼。 ASP 程式碼看起來和HTML 標籤類似,它由一對標籤,開始的<% 和關閉的%>,來標記。在Dreamweaver 的Configuration/ThirdPartyTags 資料夾裡有一個名為Tags.xml 的文件,這個文件就是用來描述包括ASP 在內的各種第三方標籤規範的,並定義了Dreamweaver 如何來顯示這些程式碼。使用這種方法,ASP 程式碼在Tags.xml 中已經被規範了,所以Dreamweaver 不會再試著在<%...%>之間解析任何程式碼。不過在設計視圖裡面,它會顯示一個圖示以表示這是ASP 程式碼。你可以定義自己的標籤,並且能為每套標籤建立一個新的標籤庫文件,來指定Dreamweaver 如何讀取和顯示你的標籤。
注意:這部分說明如何定義Dreamweaver 顯示一個自訂標籤的方法,但是沒有描述如何編輯自訂標籤的內容或是屬性。如何建立屬性檢查器來檢查和修改自訂標籤的屬性,請查看屬性檢查器以取得相關資訊。
每個標籤庫檔案都會定義一個或多個自訂標籤的名稱、類型、內容模式、顯示規格和圖示。你可以建立任意數量的標籤庫文件,但是它們必須位於Configuration/ThirdPartyTags 資料夾以便被Dreamweaver 讀取和處理。標籤庫檔案使用.xml 檔案副檔名。
提示:如果你同時進行著好幾個不同網站的工作(假定當你是個自由職業者的時候),你可以把所有的標籤規範定義在一個文件裡面,並存放在一個特殊的站點上,將來由其他當人維護這個網站的時候,你就可以完整地把包含自訂圖示和屬性檢查器在內的標籤庫交給他。
你需要使用一個名為tagspec 的XML 標籤來定義一個標籤規格。舉例來說,下面的程式碼表示一個名為happy 的標籤規範。
<tagspec tag_name="happy" tag_type="nonempty" render_contents="false" content_model="marker_model" icon="happy.gif" icon_width="18" icon_height="18"></tagspec>
你可以使用tagspec 來定義兩種標籤:
·HTML 格式的普通標籤
happy 標籤範例是一個HTML 格式的普通標籤。它開始於<happy> 標籤,在開始標籤與結束標籤之間包含數據,最後結束於</happy> 標籤。
·字串界定的標籤字串界定的標籤以一個字串開始,用另一個字串結束,它們和HTML 空標籤(諸如img 之類)有類似之處,因為它們既不包含內容也沒有關閉標籤。如果happy 也是一個字串界定的標籤,那麼它的定義規範裡面必須包含start_string 與end_string 兩個屬性。 ASP 標籤都是字串界定的標籤,它們從<% 開始,到%> 結束,也沒有關閉標籤。
下面的資訊羅列了tagspec 標籤的各個屬性和有效值。帶有星號(“*”)的屬性表示不適用於字串界定的標籤,可選屬性則使用了大括號({})來標識;不難推斷,其他沒有使用大括號標識的都屬於必要的屬性。
<tagspec>
說明
關於第三方標籤的預設資訊
屬性
tag_name,{tag_type},{render_contents},{content_model},{start_string},{end_string},{detect_in_attribute},{parse_attributes},icon,icon_width,icon_height,{ equivalent_tag},{is_visual},{server_model}
tag_name 表示自訂的名稱。對於字串界定的標籤,tag_name 僅用來偵測一個特定的屬性檢查器是否適用於這個標籤。如果屬性檢查器的第一行在符合規範的位置(其實就是在第一行的聲明裡面)包含了這個標籤名並標上星號(“*”),那麼這個檢查器將被允許檢查該類型的標籤。舉個例子,ASP 程式碼的標籤名稱就是ASP,允許檢查ASP 程式碼的檢查器必須在第一行包含*ASP*。關於屬性檢查器API 的信息,請參考屬性檢查器。
tag_type 確定這個標籤是空的(像前面提到的img 那樣),還是允許在開始與關閉標籤之間放置內容(像code 標籤那樣)。這個屬性對於普通(非字串界定的)標籤是必要的,但是對字串界定的標籤不生效,因為他們總是空的。有效值包括"empty" 和"nonempty"。
render_contents 確定在設計視圖中,該標籤顯示內容,還是代之以特定的圖示。此屬性僅對非空標籤是必要的,對於空標籤則不生效(空標籤本身沒有內容可供顯示)。這個屬性只應用於插入到屬性外部的標籤,如果一個標籤插入其他標籤的屬性值內,它的內容將不會顯示(這一段有點難理解,我想到的是RealMedia、Flash 之類的Object,裡面的那些param 標籤?有效值為"true" 或是"false"。
content_model 描述這個標籤可以包含哪一種內容,而這個標籤可以插入到HTML 檔案的什麼地方。有效值包括"block_model","head_model","marker_model",以及"script_model":
·block_model 表示該標籤可以包含div、p之類的塊狀對象,並且該標籤只可以出現在body 區域,或者是插入到其他的body-content 標籤內,例如div、layer 以及td 等。
·head_model 表示該標籤只能包含文字而且只能出現在HEAD 範圍內。
·marker_model 表示標籤能包含任何有效的HTML 程式碼,並且可以放在HTML 檔案內的任何位置。 Dreamweaver 內建的HTML 檢驗程式將忽略定義為marker_model 的標籤。不過,檢驗程序不會忽略這些標籤所包含的內容;所以,儘管標籤本身可以隨處放置,但它的內容卻可能導致HTML 的某些地方產生錯誤。例如,純文字不能出現(除去合法的head 元素)在文件的head 區域,所以你不能把一個包含純文字的marker_model 標籤放在head 區域(如果你要這麼做,那你必須把這個標籤的內容模式由marker_model 替換為head_model)。使用marker_model 的標籤將會在一行內顯示(位於p 或div 這樣的塊狀元素內——舉個例子,在一個段落裡面),如果想讓這個標籤內顯示它自己的段落,前後都留出空行,那麼建議不要使用這個模式。
·script_model 讓這個標籤可以放置在文件內HTML 標籤之間的任何位置。當Dreamweaver 偵測到使用該模式的標籤,將忽略該標籤的所有內容。使用這種標記(例如某些ColdFusion 標籤)後Dreamweaver 將不會解析。
start_string 指定一個分隔符號作為字串界定的標籤的起始點。字串界定的標籤可以被放置在任何可以插入註解的地方。對於start_string 和end_string 之間的程式碼,Dreamweaver 既不會去解析,也不會去編碼或是作連結。當end_string 已經被定義的時候,這個屬性是必要的。
end_string 指定一個分隔符號作為字串界定的標籤的結束點。同樣,當start_string 已經被定義的時候,這個屬性是必要的。
detect_in_attribute 指定是否要忽略start_string 和end_string 之間的所有程式碼(或是在開始和結束標籤之間,如果這兩個字串沒有被定義),不管這些程式碼之間插入屬性還是值。它的預設值是"false",不過一般情況下字串界定的標籤應該會把這個值設為"true"。例如,ASP 標籤規範指定detect_in_attribute="true",這樣就算ASP 標籤內部有包含屬性值的引號,也會被Dreamweaver 忽略。
parse_attributes 表示是否要解析該標籤的屬性。如果設定為"true"(預設值),Dreamweaver 將解析這些屬性;如果設定為"false",Dreamweaver 將把引號外部的「>」出現之前的所有程式碼程式碼全部忽略。例如, 諸如cfif 諸如的標籤應該將這個屬性設為"false"(因為在<cfif a is 1> 這樣的標籤裡面,Dreamweaver 無法將其作為一對屬性名稱/值的組合來解析)。
icon 指定符合該標籤的圖示的路徑和檔案名稱。此屬性對於空標籤是必要的,另外對那些內容不能顯示在文件視窗的設計視圖中的非空標籤也同樣是必要的。
icon_width 指定圖示的像素寬度。
icon_height 指定圖示的像素高度。
equivalent_tag 為ColdFusion 裡某些和表單關聯的標籤指定簡單的HTML 等價物。其他標籤不能使用該屬性。
is_visual 指定該標籤是否在頁面上可見。例如,ColdFusion 標籤cfgraph 沒有指定is_visual 的值(因此使用預設值"true"),ColdFusion 標籤cfset 指定了is_visual 的值為"false"。在預設對話框的「不可見元素」一欄內,你可以控制伺服器標籤的可見性;可視化伺服器標籤與不可視覺化伺服器標籤的可見性可以分開設定。
server_model,如果設定了該屬性,表示tagspec 標籤僅可套用於屬於指定伺服器模式的頁面。如果沒有設置,則tagspec 可以應用於所有頁面。例如,ASP 和JSP 的定界符是一樣的,但是適用JSP 的tagspec 標籤指定了伺服器模式為"JSP",所以當Dreamweaver 在JSP 頁面偵測到特定的定界符,它會顯示一個JSP 的圖示;當在非JSP 頁面上偵測到相同的程式碼,它會顯示ASP 圖示。
內容
無(空標籤)。
容器
無。
範例
<tagspec tag_name="happy" tag_type="nonempty" render_contents="false" content_model="marker_model" icon="happy.gif" icon_width="18" icon_height="18"></tagspec>
自訂標籤在設計視圖如何顯示
自訂標籤在文件視窗的設計視圖中顯示的方式,決定於tagspec 標籤的tag_type 屬性和render_contents 屬性的值(請參考自訂第三方標籤的解析)。如果tag_type 的值為"empty",就顯示icon 屬性定義的指定圖示。如果tag_type 的值為"nonempty",但是render_contents 的值為"false",也會像空標籤一樣顯示圖示。下面的範例示範了我們剛剛定義的happy 標籤的一個實例如何插入到HTML 程式碼中:
<p>This is a paragraph that includes an instance of the <code>happy</code>tag (<happy>Joe</ happy>).</p>
因為在標籤規範裡, render_contents 已經被設定為"false",所以happy 標籤(單字joe)將不被顯示,開始和關閉標籤包括它們之間的內容將被替換成一個簡單的圖標。
對於一個render_contents 值為"true" 的非空標籤,設計視圖不會將其顯示為圖標,而是顯示開始標籤與關閉標籤之間的內容(例如標籤之間的文本,就像這樣: <mytag>這裡是開始與關閉標籤之間的內容</mytag>)。如果在選單選項中,檢視> 視覺化助理> 不可見元素已經被選中,那麼這些內容將會使用「程式碼顏色」參數指定的第三方標籤顏色來高亮顯示(「程式碼顏色」僅套用於標籤庫文件定義的標籤)
如何變更第三方標籤的高亮顏色:
1、選擇選單選項中的編輯> 首選參數,然後選擇「代碼顏色」欄。
2、點選第三方標籤顏色框以顯示顏色選擇器。
3、選擇一種顏色,然後點選「確定」並關閉預設對話框。關於如何選擇顏色,也請參考使用Dreamweaver。
避免改寫第三方標籤
Dreamweaver 會在HTML 程式碼中校正某些特定的錯誤,詳細資訊請參考使用Dreamweaver。預設情況下,Dreamweaver 禁止在特定檔案副檔名的檔案中變更HTML 程式碼,這些檔案名稱包括.asp(ASP)、.cfm(ColdFusion)、.jsp(JSP),以及.php(PHP)。這樣的預設設定是為了確保Dreamweaver 不會意外地修改任何包含在非HTML 標籤裡面的程式碼。你可以更改Dreamweaver 的預設改寫行為,以便在開啟這類檔案的時候改寫HTML 程式碼,並且你也可以在Dreamweaver 禁止改寫的檔案類型清單裡面加入其他的檔案類型。
當你把某些特殊字元輸入到屬性檢查器的時候,Dreamweaver 會把它們編碼成數值。一般來說,讓Dreamweaver 執行這種編碼是最好的,因為這些特殊字元在跨越不同的平台和瀏覽器的時候,將可能會更好地顯示。不過,因為這種編碼會影響第三方標籤,所以當你在編輯包含第三方標籤的檔案時,你可能要更改Dreamweaver 的編碼行為。
允許Dreamweaver 在更多類型的檔案中改寫HTML:
1、選擇選單選項中的編輯> 首選參數,然後選擇「程式碼改寫」欄
2、選擇下面的任何一項:
·修正非法嵌套標籤或未結束標籤·刪除多餘的結束標籤
3、執行下面的一項:
·從「從不改寫程式碼:在有擴充的檔案中」的檔案副檔名清單裡面刪除一個或多個。
·取消「從不改寫程式碼:在具有擴充功能的檔案中」選項。請注意:這會導致Dreamweaver 可以在任何類型的檔案中改寫HTML 程式碼。
新增Dreamweaver 禁止改寫的檔案類型:
1、選擇選單選項中的編輯> 首選參數,然後選擇「代碼改寫」欄
2、選擇下面的任何一項:
·修正非法嵌套標籤或未結束標籤·刪除多餘的結束標籤
3.確認「從不改寫程式碼:在有擴充功能的檔案中」項目已被選中,把新的檔案副檔名加入文字方塊的清單中。
如果新的檔案類型不會顯示在「檔案> 開啟」對話方塊的彈出式選單內,你可能需要把它增加到Configuration/Extensions.txt 資料夾裡面。詳細信息,請參考改變預設的文件類型。
關閉Dreamweaver 的編碼選項:
1、選擇選單選項中的編輯> 首選參數,然後選擇「代碼改寫」欄
2、取消兩個「特殊字元編碼」選項中的任何一個。
關於「代碼改寫」參數選擇的其他信息,請參考使用Dreamweaver。