Feeds:
文章
迴響

Archive for the ‘HTML’ Category

XSL 相關網址

廣告

Read Full Post »

今天遇到一個很奇怪的問題,程式碼如下:
<html>
<body>
<input type = ‘button’ value = ‘go’ onclick = "enterCourse(1, ‘1’);">
<a href="javascript:;" onclick="enterCourse(1,’1′);">click</a>
<form id = ‘frmQuery’ action = "index.php" method = "post">
 <input type="hidden" name="_class_name" id = ‘_class_name’ value="">
</form>
<script type = "text/javascript">
<!– //
 function enterCourse(n,m){
  alert("Entercourse(n,m)");
  var frmQuery = document.getElementById(‘frmQuery’);
  var fldcname = document.getElementById(‘_class_name’);  
  fldcname.value = m;  
  alert(frmQuery);
  frmQuery.submit();
  alert(‘here’);
 }
//–>
</script>
</body>
</html>
當我點選按鈕可以正常的運作,但是我點選超連結雖然他也會呼叫 enterCourse,但是表單的資料卻不會送出,真是奇怪,後來同事告訴我再 enterCouese 後面加上 return false; 就可以了,修改後如下
<html>
<body>
<input type = ‘button’ value = ‘go’ onclick = "enterCourse(1, ‘1’);">
<a href="javascript:;" onclick="enterCourse(1,’1′); return false;">click</a>
<form id = ‘frmQuery’ action = "index.php" method = "post">
 <input type="hidden" name="_class_name" id = ‘_class_name’ value="">
</form>
<script type = "text/javascript">
<!– //
 function enterCourse(n,m){
  alert("Entercourse(n,m)");
  var frmQuery = document.getElementById(‘frmQuery’);
  var fldcname = document.getElementById(‘_class_name’);  
  fldcname.value = m;  
  alert(frmQuery);
  frmQuery.submit();
  alert(‘here’);
 }
//–>
</script>
</body>
</html>
真是奇怪這樣就可以運作了,如果改成 return true; 也無法運作,目前我還不知道真正的原因,我個人猜測是
<A> 處理程序 → onclick 處理程序 → enterCourse
所以,可能" <A> 處理程序"有重導超連結(href屬性),是否重導的依據就是接收到 true 或 false….

Read Full Post »

相關參考連結

 www.w3.org 領導Web標準的正式制定規格的網站。在此處您可以找到許多Web標準的完整規格書,例如:HTML,CSS,HTTP,XML,DOM,等等。

 microsoft.com/sitebuilder 此站包含文件,參考資料,和可下載的建立網站工具。 此站的內容計劃要轉移到msdn.microsoft.com,Microsoft Developer Network網站。

 msdn.microsoft.com/scripting Microsoft的scripting參考資訊與教學文件網站。

 developer.netscape.com/library/documentation/communicator/jsref/index.htm Netscape的JavaScript參考網站。這個站包括許多不錯的實例。

 www.gamelan.com 此站針對Java,JavaScript,ActiveX,和其他Internet技術提供資訊。

 www.wdvl.com The Web Developer’s Virtual Library。此站包含對於網站設計者有用的資訊,例如HTML,graphics,Java等等相關資訊的討論與介紹。

 www.jars.com 此站包括了許多Web-based程式的source code列表。且包括許多how-to資訊。包含從電子商務( electronic commerce) 到HTML和 JavaScript的各種資訊。

 www.webreview.com 此站包含了各種建立網站的資訊,從圖形設計到以技術觀點來維護一個大型網站。

 www.zdnet.com/devhead From Ziff Davis,一個電腦雜誌與書籍的出版公司的網站,此站包含許多參考資訊且也包含了一些業界名人所撰寫how-to資訊的文章。

 msdn.microsoft.com Microsoft Developer Network。包含對於開發者最重要的參考資訊。

 microsoft.com/data 提供最好的資料存取技術之網站,例如ADO。

 

Read Full Post »

DHTML 一些常見錯誤

1. 不如預期的布林敘述運算結果
將比較運算子 ( ==,兩個等號)寫成指定運算子 ( =,單一等號)
錯誤:
if (a=5){alert("!")}
 
正確:
if (a==5){alert("!")}

2. 指定的CSS樣式無效
HTML 標籤中指定的樣式,屬性名稱應該為小寫字母,有的屬性名稱由兩個字所組成,之間用連字號連接。冒號將屬性名稱與所設定的值分隔,就像下面font-style這個例子所示:
Example:
<SPAN ID="span1" STYLE="font-style: italic">
 
 Script 中指定CSS樣式不使用連字號,而在相對的CSS屬性之連字號後面的字母,在物件屬性中為大寫 (因此,font-style屬性相對於fontStyle屬性)。在script程式碼中,您必須使用相等符號來分隔物件屬性與其設定值,若設定值並非數字或變數名稱,則您必須自行將設定值加上雙引號
Example:
span1.style.fontStyle="italic"
 
若將名稱轉換搞錯或使用了錯的分隔符號,您會發現樣式並沒有正確地被設定。若使用等號代替冒號來當作分隔符號的話,也會產生另外一個錯誤。


3. 瀏覽器無法識別某個元件
瀏覽器有時候會出現一個錯誤訊息,告訴您在程式中的一個元件並不是物件。這項錯誤通常都是由於擁有好幾個物件取同一個名稱,或根本就沒有所指定名稱之物件
 

<HTML>
<HEAD>
<TITLE>Listing A-1</TITLE>
</HEAD>
<BODY>
<SPAN ID="span1">This is a span.</SPAN>
<SPAN ID="span1">This is another span.</SPAN>
<SCRIPT LANGUAGE="JavaScript">
span1.style.fontStyle="italic"
</SCRIPT>
</BODY>
</HTML>
 HTML 規格書定義 id 屬性是獨一無二的識別碼,所以,如果有兩個標籤命名相同的識別碼,則無法正確解析設計者的意圖。

 4. 函數定義缺少大括號({})
<HTML>
<HEAD>
<TITLE>Listing A-2</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!–
function test()
alert("This is an alert!"

//–>
</SCRIPT>
</HEAD>
</HTML>
 

上述程式包含3個錯誤。當程式執行時,IE會顯示一個錯誤訊息 "讀取列: 7字元:1錯誤: 需要 ‘{’ ",而Netscape Navigator 4的Communicator Console會顯示錯誤 "錯誤列7: 在函數主體之前缺少 { "。因為第6行程式定義一個函式,它應該在一組括弧之後接上一個大括弧。在第7行瀏覽器所處理為顯示一個警示窗,在此處它也應該要有一個結束的大括弧,所以在此處也會顯示一個錯誤。

 

若您在修改這第一個錯誤後再次執行程式 (在那組括弧後面放置大括弧),Internet Explorer顯示錯誤訊息 "列:9字元:1錯誤:需要 ‘)’ 程式碼:0",且Navigator顯示 "列9:在引數列後少了 )" 錯誤,因為alert方法缺少結束的括弧。若您修改了此項錯誤再執行一次,會產生最後一個錯誤,就是由於缺少函數結尾之大括弧的緣故。


5. "xxx 為 null 或不是一個物件"錯誤訊息

這個錯誤通常都是發生在物件完成下載或定義之前,就有script程式參考到此物件。您有很多方式可以來解決這個問題。您可以將script程式碼放在您想要參考到的物件之前,或您就直接將所有的script程式放置在HTML的head區塊中,但是只有當所有物件都下載後才呼叫物件。目前處理此問題比較常用的作法是在 window.onload 事件中進行相關物件的初始化或參照。

Example:

window.onload = function(){

  // 相關物件初始化

}

 


6. 網頁檔案太大

6.1. 降低一個網頁圖像的數目

6.2. 使用其他元件代替(CSS, )

6.3. 不同用途使用不同的壓縮影像:

在Web上最常用的圖檔格式就是GIF和JPEG (附檔名分別是 .gif和 .jpg或 .jpeg )。這兩種圖檔格式使用不同的壓縮方法且因此適合用於Web環境。若您的圖像是大面積的單色系圖形,則GIF通常檔案會最小。若您的圖像包含變化較多的顏色,例如真實的照片,JPEG通常會產生最小的檔案大小且最好的品質。

6.4. 使用Structured Graphics控制項 (在 Chapter 16 中討論過),當只使用Internet Explorer時,可幫您降低圖像等待時間。Structured graphics在代替簡單的點距陣圖形例如圓形,方形,或橢圓等特別有用。


7. 即使開發者覺得不需要,網頁永遠都要有捲動軸

 

一個標準的Internet Explorer視窗都有捲動軸,不過您並不永遠需要它 (舉例來說,當網頁中沒有文字時)。一般來說,在Netscape Navigator中,這並不是問題。您可以透過設定BODY中的SCROLL屬性為no,就可以移除捲動軸。然而,使用這種方法時要小心,因為它會完全移除捲動軸,這表示使用者可能無法存取一些網頁,若它們的視窗在較低的解析度,或如果它們使用和您不同的字體。

這裡有些方法可使捲動軸當需要時才自動出現。若您在網頁使用窗格,您可以設定FRAME元件的SCROLLING屬性為auto,則只有當網頁超過窗格邊界外時捲動軸會自動出現。在單一網頁,您可以將整個網頁放到一個大的DIV元件中,然後設定長度與寬度為視窗百分之100 ,然後將overflow CSS屬性設定為auto。若您使用這個方法,您將會想要設定BODY的TOPMARGIN和LEFTMARGIN屬性為0且它的SCROLL屬性為no,如此來確保DIV元件會延伸到視窗的邊界。

Read Full Post »

變更清單項目的背景顏色

最近需要將每個清單項目指定不同的背景顏色,原本以為做不到,想不到用CSS可以控制每一個獨立的項目,所以只要用 style 去設定 css 樣式即可達成。

 

<select size = ’20’>
 <option style = ‘background : #ff0000;’>1</option>
 <option style = ‘background : #0000ff;’>2</option>
 <option style = ‘background : #00ff00;’>3</option>
</select>

Read Full Post »

Meta 標籤小常識

Meta 標籤小常識
=================
META 是個常被人遺忘的標籤。

由於<meta>這個標籤表面上看起來對一個網頁而言似乎絕非必要,很多人也不清楚它的用途,
所以常常被人忽略。

首先我們要知道META標籤的位置該擺在哪?
META標籤是擺在<head>與</head>之間

Meta的「系統變數」,就是 http-equiv ,所以這個保留字不可以更改.

讓我們看幾個實用的範例:
1.<meta http-equiv="Content-Type" content="text/html; charset=big5">
 這段標籤是告訴瀏覽器網頁內容所使用的編碼方式是採用繁體中文,Big-5 字集,
 當使用者瀏覽到這一頁的時候,瀏覽器會自動切換為Big5字集的顯示方式。

2.自動換頁
 <meta http-equiv="refresh" content="15; http://www.you.com/refresh.htm">
 這個例子,是在15秒之後,自動轉換到 http://www.you.com/refresh.htm 這一頁上,
 15是目前這一頁停留秒數,在分號之後,接上你欲前往的URL位置。

 比方你想讓使用者進入你首頁30秒之後,自動前往abc.htm這一頁,那你就在你的首頁中加上:
 <meta http-equiv="refresh" content="30; abc.htm">
 
3.強迫 Reload 網頁
 <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT">
 這個例子,是強迫瀏覽器重新整理(reload)該頁,讓訪客每次進來都必重讀,
 而不是從瀏覽器中的 cache 中抓取,對於留言版、討論區這一類的頁面,是很貼心的設計,
 使用者不必按下重新整理就可以看到剛剛的留言。

 為什麼會強迫reload?道理很簡單,我們可以很明顯的發現到,該頁的到期日是1980年,
 所以無論如何,時間絕對過期,所以瀏覽器一定會自動重讀該頁.
 
 轉址服務,代表5秒後自動轉址到CF去
 <META HTTP-EQUIV="refresh" ONTENT="5;URL=http://www.cityfamily.com.tw/">

 

4.指定「關鍵字」,讓搜尋引擎知道你的關鍵字,更容易找到你的網站。
 <meta http-equiv="keywords" content="關鍵字一, 關鍵字二, 關鍵字三,….">
 關鍵字是訪客透過搜尋引擎尋找你的網站時所用的字眼。

 關鍵字與關鍵字間用逗點「,」隔開。你可以列到100個關鍵字,但是,記住不要重複三次以上,
 因為搜尋引擎有可能會把它們當作是垃圾而把你除名。

5.讓搜尋引擎讀取你的網站介紹
 <meta http-equiv="description" content="網站內容簡介(約一百字左右)">
 讓搜尋引擎直接讀取有關你網站的簡單介紹,對於可以直接搜尋網頁內容的引擎,
 如果你的網站沒有 META description 這一段,搜尋引擎就會抓網頁前面的一些文字來當作網站
 的描述。

6.refresh
 <META HTTP-EQUIV="refresh" CONTENT="1; URL=framepagename.html">
 代表等待一秒後,重新更新
 
 <META HTTP-EQUIV="refresh" CONTENT="15">
 為每15秒重新下載(refresh)網頁一次。
 
 <META HTTP-EQUIV="refresh" CONTENT="300">
 網頁每五分鐘自動更新一次,就設定CONTENT="300"。

7.手動更新
 <A HREF="javascript:history.go(0)">重新下載</A>

 

參考網址:
http://www.geocities.com/alfredcave/Meta.html
http://www.socialwork.com.hk/htmltip/skill/02/02.htm

Read Full Post »