tag:blogger.com,1999:blog-59465307047421309702024-03-06T16:20:07.273+08:00Jax 的工作紀錄除了在整理學習上的經驗,同時也能幫助其他需要的人Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.comBlogger35125tag:blogger.com,1999:blog-5946530704742130970.post-36308207112030969582023-03-10T14:33:00.000+08:002023-03-10T14:33:39.760+08:00TypeScript 強轉型的地雷<p>用 Visual Studio 撰寫 TypeScript 一整個就很開心開心,只要好好的進行型態宣告,就可享受到跟強型別一樣的 IntelliSense 提示,實在太開心了,然後就大意了,忘記了其實骨子裡還是 JavaScript 這件事。</p>
<p>在取回後端的 json 資料的時候,貪圖方便就直接進行強轉型,哈哈!這裡存在不確定性,我就踩到地雷了!當然如果後端是可靠的,直接強轉型是不會有問題的。</p>
<p>我想都已經進行型別宣告了,難到不能自動轉型嗎?哈哈!在網路上找了很久都沒找到,找到的方式都需要二次宣定去做轉型。</p>
<p>簡單的展示一下這個問題,建立一個 any 的物件 a,然後強轉型成 DataModel 的物件 b,這時候 a 跟 b 其實還是同一個 Instance</p>
<pre class="js" name="code">
interface DataModel {
id: number;
status: string;
}
let a: any = { id: '1', status: 3 };
let b: DataModel = a as DataModel;
</pre>
<p>在存取 property 時都還是 a 的資料型態,這樣在調用該型態的方法時就會出錯。</p>
<p>為了型態的正確必須進行轉換:</p>
<pre class="js" name="code">
let b: DataModel = <DataModel>{
id: Number(a.id),
status: String(a.status),
};
</pre>
Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-85304044466838396972014-01-21T00:23:00.001+08:002014-01-21T00:23:41.999+08:00[Less] 簡單做到背景漸層對選顏色不擅長,又想在網頁做出 CSS 漸層效果,Less 提供了兩個方便的函數 lighten(加亮顏色)、darken(加深顏色),透過這兩個函數就可以輕鬆產生漸層所需要的色差,然後調整百比值就可以控制漸層的色階。<br />
<br />
<pre class="css" name="code">.toolbar {
@color: #914;
@lighten: lighten(@color, 3%);
@darken: darken(@color, 3%);
background-color: @color;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@lighten), to(@darken));
background-image: -webkit-linear-gradient(top, @lighten, @darken);
background-image: -moz-linear-gradient(top, @lighten, @darken);
background-image: -ms-linear-gradient(top, @lighten, @darken);
background-image: -o-linear-gradient(top, @lighten, @darken);
background-image: linear-gradient(to bottom, @lighten, @darken);
}
</pre><br />
上面除了用 linear-gradient 來產生漸層,額外還加上了 background-color 這個保險,讓不支援 CSS3 的 browser 也能有基本的底色。<br />
<br />
<br />
這樣寫還是有點麻煩,如果包成 mixin 會更方便,如下:<br />
<pre class="css" name="code">.bg-vertical-gradient(@color, @amount:3%) {
@lighten: lighten(@color, @amount);
@darken: darken(@color, @amount);
background-color: @color;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@lighten), to(@darken));
background-image: -webkit-linear-gradient(top, @lighten, @darken);
background-image: -moz-linear-gradient(top, @lighten, @darken);
background-image: -ms-linear-gradient(top, @lighten, @darken);
background-image: -o-linear-gradient(top, @lighten, @darken);
background-image: linear-gradient(to bottom, @lighten, @darken);
}
.toolbar {
.bg-vertical-gradient(#914);
}
.banner {
.bg-vertical-gradient(#702, 5%);
}
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-14830006189261074162010-07-09T22:37:00.002+08:002010-07-09T23:03:45.871+08:00為什麼台灣的網站都這麼的生硬這個問題一直讓我覺得台灣大多數的網站很落後<br />就像一個沒有互動感的海報一樣<br /><br />再來大多的特效都是用 flash 做的<br />明明很簡單就可以用 CSS 做出來的效果卻沒人用<br />還有一堆離不開 table 排版的 design<br />一堆四五年前的技術一直用到現在<br />然後一直看到國外很多很好的網站 design<br />不禁感嘆!這就是台灣的網站產業!<br />就這樣不解的問題一直找不到說服自己的理由<br /><br /><br />直到 Rogan 的一段話點醒了我<br /><blockquote>這些華麗的網站大多都是個人網站<br />大多公司的形象網站不太可能這樣做</blockquote><br />就這樣我終於瞭解我一直找不到的答案了<br />個人網站可以不記時間不記成本<br />直到完成 designer 心中想要表達的 feelJax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com1tag:blogger.com,1999:blog-5946530704742130970.post-34281086924185544802009-12-22T14:40:00.001+08:002009-12-22T14:44:00.712+08:00CSS 部屬經驗-圖文列表樣式<span style="font-weight: bold;">樣式</span><br /><a href="http://picasaweb.google.com/lh/photo/3ga2aq1k_XSqxJCI-LynHg?authkey=Gv1sRgCOe857mZ2Yy0yQE&feat=embedwebsite"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhikgjhJf03YrF8fTOR1jZNu85PWwTIJFAWNIN9-quUIFNhfYjZiD6BksJCKkVAAoLX8Td78Mr13Abg3qp6YVfSFKuFCO1OOSUa8riKW8MiiB6I3OrWY9ecUA4QyYDohwL5TCofYmi6-r2W/s512/img_2_h_list.png" /></a><br /><br /><br /><span style="font-weight: bold;">HTML 結構</span><br /><pre class="xml" name="code"><br /><ul class="Img2HList ClearIt"><br /> <li class="List Odd"><br /> <div class="Container"><br /> <strong class="Title"><br /> <a><span class="Image"><img src="圖片網址" /></span>標題文字</a><br /> </strong><br /> <br /> <!--其他相關資訊--><br /> <p class="Info">描述文字</p><br /> <div class="Meta">文字</div><br /> <blockquote>文字</blockquote><br /> </div><br /> </li><br /> <li class="List"><br /> <div class="Container"><br /> <strong class="Title"><br /> <a><span class="Image"><img src="圖片網址" /></span>標題文字</a><br /> </strong><br /> <br /> <!--其他相關資訊--><br /> <p class="Info">描述文字</p><br /> <div class="Meta">文字</div><br /> <blockquote>文字</blockquote><br /> </div><br /> </li><br /></ul><br /></pre><br /><br /><br /><span style="font-weight: bold;">CSS 設定</span><br /><pre class="css" name="code"><br />ul.Img2HList {<br /> margin: 1em 0;<br /> overflow: hidden;<br />}<br />ul.Img2HList li.List {<br /> position:relative;<br /> display: block;<br /> float: left;<br /> width: 49%;<br /> margin: 0 0 30px 0;<br /> font-size: 11px;<br />}<br />ul.Img2HList .Container {<br /> padding: 0 0 0 79px;<br />}<br />ul.Img2HList li.Odd {<br /> clear: left;<br />}<br />ul.Img2HList li.Odd .Container{<br /> margin-right: 30px;<br />}<br />ul.Img2HList strong.Title {<br /> display: block;<br /> font-size:1.1em;<br /> border-bottom: 1px solid #ccc;<br />}<br />ul.Img2HList strong.Title span.Image {<br /> float: left;<br /> margin: 0 0 0 -79px;<br /> cursor: pointer;<br />}<br /></pre><br /><br /><br />參考頁面:<br /><a href="http://www.last.fm/?setlang=en">Last.fm</a><br /><a href="http://www.wacanai.com/">Wacanai.com</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com1tag:blogger.com,1999:blog-5946530704742130970.post-69546174472796183242009-12-22T09:12:00.003+08:002013-06-11T22:11:28.518+08:00HTML 與 CSS 觀念上的區別<strong><a target="_blank" href="http://zh.wikipedia.org/zh-tw/HTML">HTML</a></strong>:在定義網頁的 <em>結構</em> 跟 <em>語意</em><br />
<ul><li><code>h1</code>:第一標題<br />
</li>
<li><code>h2</code>:第二標題<br />
</li>
<li><code>p</code>:段落<br />
</li>
<li><code>li</code>:清單條目<br />
</li>
<li><code>em</code>:強調<br />
</li>
<li><code>strong</code>:更強調<br />
</li>
<li><code>blockquote</code>:引言<br />
</li>
</ul><br />
<strong><a target="_blank" href="http://zh.wikipedia.org/zh-tw/CSS">CSS</a></strong>:在定義網頁的呈現 <em>樣式</em><br />
<ul><li><code>color</code>:文字顏色<br />
</li>
<li><code>text</code>:文字<br />
</li>
<li><code>font</code>:字體<br />
</li>
<li><code>margin</code>:邊界距離<br />
</li>
<li><code>padding</code>:內緣距離<br />
</li>
<li><code>background</code>:背景底色<br />
</li>
</ul>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-68651187010374868592009-11-24T22:03:00.003+08:002009-11-25T17:42:51.821+08:00今天終於見識到了今天去一家公司面試<br />見到一個令我驚訝的事<br /><br />那就是用 JavaScript 寫 application<br />整個架構都是 Object-Oriented<br />光這點還不足已驚訝<br />架構上幾乎是跟 Java 的 Swing 差不多<br />所有的 HTML 都是 Object 再控制<br />整體的顯示效果跟 flash 差不多<br />真是給他妙的說<br /><br />不過聽 engineer 說有一個嚴重問題 <br />就是 memory 會用掉 500 Mbyte <br />engineer 是想利用回收 Object 的方式來減少 memory 的用量<br />但至於要如何減少 memory 的用量<br />還真是個大問題<br /><br />雖然方法很多<br />但要不影響當前的架構去處理<br />能用的方法就很有限了Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com2tag:blogger.com,1999:blog-5946530704742130970.post-26495876763860440122009-07-24T05:05:00.007+08:002010-05-27T00:22:57.991+08:00CSS 部屬經驗-表格樣式<span style="font-size:85%;">為了 IE6 的相容這裡我不會用太新穎的選擇器,希望有一天 IE6 的使用群可以消失,這樣在排版時可以不去顧慮 IE6 的問題。</span><br /><br /><span style="font-weight: bold;">主旨:</span><br /><ol style="font-weight: bold;"><li><a href="#2649587676386044012_how">如何規劃一個表格樣式</a></li><li><a href="#2649587676386044012_html">HTML 結構</a></li><li><a href="#2649587676386044012_css">CSS 設定</a></li></ol><br /><span style="font-weight: bold;" id="2649587676386044012_how">如何規劃一個表格樣式</span><br />網路上其實已經有很多表格樣式可以參考了,但除了表格樣式外,欄位的屬性很重要。<br /><br /><p style="color: rgb(255, 0, 0);">利用 class 去作欄位定義,讓每一欄都有不一樣的<span style="font-weight:bold;">成員名稱</span>,就算有些欄位根本不需要定義樣式,但建議最好還是保留名稱的設定,也許有一天會去用到,這樣之後要作欄位調整時才不用大興土木,去為每個樣版裡改表格樣式。<br /><br />在 HTML 的規劃上最好用一個 <div></div> 包起來,再處理邊界上的設定時才不會因為瀏覽器的差異造成問題。<br /></p><br /><br />這裡我用到 hover 的方式去處理滑鼠滑過的效果,對於 IE6 的處理方式請看<a href="/2008/09/javascript-ie6-css-20-hover.html">利用 JavaScript 讓 IE6 支援 CSS 2.0 hover 的方法</a>。<br /><br />對於表格在之前有遇過一個奇怪的狀況,就是在設有 white-space:nowrap; 的欄位上寬度只能用 % 去定義,在 <a href="/2008/10/ie6-white-space.html">(IE6) white-space 在表格中怪問題</a> 有說明。<br /><br /><a href="http://picasaweb.google.com/lh/photo/KpfFn5PPYid5afop73z2_g?feat=embedwebsite"><img src="http://lh6.ggpht.com/_b8lN_UbLoEc/SmjKUN91kJI/AAAAAAAAGDs/xGKytsVKzvU/s512/table.jpg" /></a><br /><br /><br /><span style="font-weight: bold;" id="2649587676386044012_html">HTML 結構</span><br /><pre class="xml" name="code"><br /><div class="TableList"><br /> <table cellspacing="0" cellpadding="0"><br /> <tr><br /> <th class="Image">Picture</th><br /> <th class="Title">Title</th><br /> <th class="Date">Date</th><br /> </tr><br /><br /> <tr class="Odd"><br /> <td class="Image"><!--圖片--></td><br /> <td class="Title"><!--文字--></td><br /> <td class="Date"><!--日期--></td><br /> </tr><br /> <tr class="Even"><br /> <td class="Image"><!--圖片--></td><br /> <td class="Title"><!--文字--></td><br /> <td class="Date"><!--日期--></td><br /> </tr><br /> <tr class="Odd"><br /> <td class="Image"><!--圖片--></td><br /> <td class="Title"><!--文字--></td><br /> <td class="Date"><!--日期--></td><br /> </tr><br /> <tr class="Even"><br /> <td class="Image"><!--圖片--></td><br /> <td class="Title"><!--文字--></td><br /> <td class="Date"><!--日期--></td><br /> </tr><br /> </table><br /></div><br /></pre><br /><br /><br /><span style="font-weight: bold;" id="2649587676386044012_css">CSS 設定</span><br /><pre class="css" name="code"><br />/*=( 表格列表樣式 )=*/<br />.TableList {<br /> text-align:center;<br /> padding:1em;<br />}<br />.TableList table{<br /> border-collapse:collapse;<br /> font-size:0.9em;<br /> width:100%;<br /> text-align:center;<br />}<br /><br /><br />/*欄位間距*/<br />.TableList th, <br />.TableList td{<br /> padding:.5em;<br />}<br /><br /><br />/*標題列*/<br />.TableList th{<br /> border:1px solid #fff;<br /> white-space:nowrap;<br /> background:#328aa4 url(tr_bg1.gif) repeat-x;<br /> color:#fff;<br />}<br />.TableList th a{color:#fff;}<br /><br /><br />/*單列底線樣式*/<br />.TableList tr{<br /> border-bottom:1px solid #fff;<br /> _behavior: url(ie_hover.htc);/*IE6 hover*/<br />}<br />/*奇數列底色樣式*/<br />.TableList tr.Odd {background:#FFF;}<br />/*偶數列底色樣式*/<br />.TableList tr.Even {background:#eee;}<br /><br /><br />/*hover 樣式*/<br />.TableList tr.hover td,<br />.TableList tr:hover td{<br /> background:#e5f1f4;<br />}<br /><br /><br />/*=( 欄位設定 )=*/<br />/*圖片*/<br />.TableList th.Image,<br />.TableList td.Image{<br /> width:50px;<br />}<br />.TableList td.Image img{<br /> width:30px;<br /> height:30px;<br />}<br /><br />/*標題*/<br />.TableList td.Title{<br /> text-align:left;<br /> font-size:14px;<br />}<br /><br />/*日期*/<br />.TableList td.Date{<br /> width:3%;<br /> white-space:nowrap;<br />}<br /></pre><br /><br /><br />參考頁面:<br /><a href="http://www.last.fm/?setlang=en">Last.fm</a><br /><a href="http://www.wacanai.com/">Wacanai.com</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-84123273737443201872009-07-24T04:00:00.010+08:002009-07-24T05:02:58.967+08:00CSS 部屬經驗-表單樣式<span style="font-size:85%;">為了 IE6 的相容這裡我不會用太新穎的選擇器,希望有一天 IE6 的使用群可以消失,這樣在排版時可以不去顧慮 IE6 的問題。</span><br /><br /><span style="font-weight: bold;">主旨:</span><br /><ol style="color: rgb(255, 0, 0); font-weight: bold;"><li>為什麼要用<table>作表單排版</li><li>HTML 結構</li><li>CSS 設定</li></ol><br /><br /><span style="font-weight: bold;">為什麼要用<table>作表單排版</span><br />下面是利用 <table> 的排版方式,雖在排版上我非常不喜歡用 <table>,但在使用很多種排版方式及撰寫 JavaScript 的使用者介面輔助後,將 <table> 用在表單上可以有比較好的樣式結構,而且在 JavaScript 的輔助開發上對版面的操作也比較不會造成跑版問題。<br /><br />如果有過在表單上做過很複雜的 JavaScript 介面輔助後,你一定會瞭解我在說什麼。<br /><br /><a href="http://picasaweb.google.com/lh/photo/b6lrA1DRgQ54ymNu9-Rovw?feat=embedwebsite"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih96yL2Y7yx1cnbP5QvVVIwps6oBhPlLC_WvRkDV8y36Ujpm2F_ZQ88OvxKiIXjKvfJ9VBFS-ZCWUssAWdav1-H3D65G_mUQw200ZwsDwWEb3FUtIfuXaWi9564o-__MgCM_SaVBK5eayt/s512/form.jpg" /></a><br /><a href="http://www.wacanai.com/preg.php?type=sign">實際頁面 Wacanai.com</a><br /><br /><br /><span style="font-weight: bold;">HTML 結構</span><br /><pre class="xml" name="code"><br /><table class="FormList" border="0" cellspacing="0" cellpadding="0"><br /> <tr class="NotNull"><br /> <th><label for="name">欄位名稱</label></th><br /> <td><br /> <input class="Full" type="text" value="" id="name" name="name"/><br /> <small class="Explain">欄位說明</small><br /> <div class="Error">錯誤訊息</div><br /> </td><br /> </tr><br /><br /> <tr class="NotNull"><br /> <th><label for="email">欄位名稱</label></th><br /> <td><br /> <input class="Full" type="text" value="" id="name" name="name"/><br /> <span class="Error">錯誤訊息</span><br /> <small class="Explain">欄位說明</small><br /> </td><br /> </tr><br /></table><br /></pre><br /><span style="color: rgb(255, 0, 0);">在結構我設置了 JavaScript 會用到的訊息樣式,在下面的 CSS 設定中會先將這些訊息隱藏,之後在用 JavaScript 去處理顯示的動作,這樣的好處是 JavaScript 可以用很簡單的方法做到很複雜的介面輔助。</span> <br /><br /><br /><span style="font-weight: bold;">CSS 設定</span><br /><pre class="css" name="code"><br />/*讓表格寬度撐開*/<br />table.FormList{<br /> width:100%;<br />}<br /><br />/*基本的間距設定*/<br />table.FormList th,<br />table.FormList td{<br /> padding:6px 10px 6px 4px;<br />}<br />table.FormList th{<br /> width:25%;<br /> text-align: right;<br /> vertical-align:top;<br /> font-weight:normal;<br /> white-space:nowrap;<br />}<br /><br />/* 必填項樣式 */<br />table.FormList tr.NotNull th label{<br /> padding-left:20px;<br />}<br /><br />/* 欄位寬度設定 */<br />table.FormList .Full{<br /> width:95%;<br />}<br />table.FormList .Verify{<br /> width:40px;<br />}<br /><br />/*標示說明文的樣式*/<br />table.FormList small.Explain {<br /> display: block;<br /> font-size: 0.8em;<br /> margin: 0 0 5px 0;<br /> padding: 1px 3px;<br />}<br /><br /> <br />/*錯誤訊息的樣式*/<br />table.FormList div.Error ,<br />table.FormList span.Error {<br /> color: #f00;<br /> display: none;<br /> font-size: 1.2em;<br /> font-weight: bold;<br />}<br />/*警示訊息的樣式*/<br />table.FormList div.Warning ,<br />table.FormList span.Warning {<br /> color: #00f;<br /> display: none;<br /> font-size: 1.2em;<br /> font-weight: bold;<br />}<br /><br />/*套用在整列的錯誤樣式*/<br />table.FormList tr.Error label{<br /> color: #F00;<br />}<br />table.FormList tr.Error textarea,<br />table.FormList tr.Error select,<br />table.FormList tr.Error input{<br /> border: 1px solid #F00;<br />} <br /></pre><br /><br /><br />參考頁面:<br /><a href="http://www.last.fm/?setlang=en">Last.fm</a><br /><a href="http://www.wacanai.com/">Wacanai.com</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-74742700487484597602009-07-24T02:43:00.004+08:002010-05-27T00:23:32.527+08:00CSS 部屬經驗-按鈕樣式<span style="font-size:85%;">為了 IE6 的相容這裡我不會用太新穎的選擇器,希望有一天 IE6 的使用群可以消失,這樣在排版時可以不去顧慮 IE6 的問題。</span><br /><br /><span style="font-weight: bold;">主旨:</span><br /><ol style="color: rgb(255, 0, 0); font-weight: bold;"><li>用 <a></a> 元素來作按鈕<br /></li><li>利用原有樣式建立延伸樣式</li><li>套用在 <input> 的樣式<br /></li></ol><br /><span style="font-weight: bold;">用 <a></a> 元素來作按鈕</span><br />連結元素的優點救是 IE6 有支援 hover 偽類,所以使用連結元素用在按鈕上可以用簡單的 CSS 做出點選效果。<br /><br />當然在 CSS2 上面還有很多樣式上的選擇器,對於美工或使用者介面都有很方便的 CSS 設定,不用為了一點小東西去寫 JavaScript,總結就是 IE6 趕快消失吧!<br /><br /><br /><span style="font-weight: bold;">利用原有樣式建立延伸樣式</span><br /><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYSqpjHEK0515dZaGt0JtC8BHKVUrEWAgy-OVAkneA-MXxCG6lk04QfPfHQvt33eUS99cqiU04V-ZYr7bkw7TWzSl2eWxiQr0lhx4TTWo-BcJ1QztMvlBOqnQj93Hl-mIN-VeVm6fqi92V/s800/button.png" /><br /><br />在上面的三個按鈕樣式中可以發現只有底圖上的差異,所以在樣式上的規劃可以利用延伸複寫的方式去建立樣式。<br /><br />首先我先看看這三個按鈕的 HTML 結構:<br /><pre class="xml" name="code"><br /><a class="Button"><br /> <span>按鈕文字</span><br /></a><br /><br /><a class="Button AddButton"><br /> <span>按鈕文字</span><br /></a><br /><br /><a class="Button TagButton"><br /> <span>按鈕文字</span><br /></a><br /></pre><br />可以發現在 class 上的套用上是有層級的,藉由樣式複寫的方式去延伸原有的樣式。<br /><br /><br />現在我們來看看 CSS 的設定:<br /><pre class="css" name="code"><br />/* 按鈕樣式 */<br />a.Button {<br /> /*針對 Mozilla 系列瀏覽器的 inline-block*/<br /> display: -moz-inline-box;<br /> <br /> display: inline-block;<br /> color: #fff;<br /> text-decoration: none;<br /> text-align: right;<br /> vertical-align: middle;<br /> cursor: pointer;<br /> text-shadow: #163551 0 -1px 1px;<br /><br /> height: 23px;<br /> background: #163551 url(button_right.png) no-repeat right top;<br /> font-size: 11px;<br /> padding: 0 3px 0 0;<br />}<br />a.Button strong,<br />a.Button span{<br /> /*針對 Mozilla 系列瀏覽器的 inline-block*/<br /> display: -moz-inline-box;<br /> <br /> display: inline-block;<br /> vertical-align: top;<br /><br /> height: 19px;<br /> padding: 2px 5px 2px 8px;<br /> background: #16517d url(button_left.png) no-repeat left top;<br /> line-height: 19px;<br />}<br /><br /><br />/* 按鈕的 hover 效果設定,變換底圖定位及文字顏色 */<br />a.Button:hover,<br />a.Button:hover {<br /> background-position: right bottom;<br /> color: #fff;<br /> text-decoration: none;<br />}<br />a.Button:hover span,<br />a.Button:hover strong {<br /> background-position: left bottom;<br /> color: #fff;<br /> text-decoration: none;<br />}<br /><br /><br />/* 延伸的按鈕樣式 (AddButton)*/<br />a.AddButton span,<br />a.AddButton strong {<br /> padding-left:25px;<br /> color:#003366;<br /> background: #2a2a2a url(button_add_left.png) no-repeat left top;<br />}<br /></pre><br />基礎樣式所用到的圖片:<br /><br />botton_left.png<br /><img src="http://lh3.ggpht.com/_b8lN_UbLoEc/Smix-jyw1II/AAAAAAAAGCo/7xc8NfmNA_Q/s800/botton_left.png" /><br /><br />button_right.png<br /><img src="http://lh5.ggpht.com/_b8lN_UbLoEc/Smix-m0O_0I/AAAAAAAAGC0/PG2cue1LK94/s800/button_right.png" /><br /><br />接著是延伸樣式所用到的圖片:<br /><br />button_add_left.png<br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6bU_f6c_3uqkAhl58Nrc-9W-_qCUZ-gNwjsZ9KzBaOmTUELgMPN4TTB-Hr7d0wR9kwsw-J1ehUzQAc8GktmE7QoAUXp6wxBYB3HsMBVZT0lvQtTyBm2xDllydtItbVDKJZM3EsGrioCYj/s800/button_add_left.png" /><br /><br />如果還要延伸其他樣式只要改改顏色或圖示就可以了。<br /><span style="color: rgb(255, 0, 0);">上面的 CSS 有用到在</span> <a href="/2009/07/css.html">CSS 部屬經驗-樣式命名</a> 提到的<span style="font-weight: bold;color: rgb(255, 0, 0);">限制樣式對象</span><span style="color: rgb(255, 0, 0);">的使用方式,這樣的選擇器設定只能讓樣式套用在連結元素上,這樣的好處是讓樣式與元素有一個關連性。</span><br /><br /><span style="font-weight: bold;">套用在 <input/> 的樣式</span><br />已經為連結元素建立美美的按鈕了,總不能讓 <input/> 這樣醜醜的見人吧!<br />CSS 樣式:<br /><pre class="css" name="code"><br />input.Button {<br /> background: #9b9b9b url(button_bg.png) left top repeat-x;<br /> border: 1px solid #ccc;<br /> border-color: #999 #858585 #666 #858585;<br /> color: #fff;<br /> cursor: pointer;<br /> cursor:hand;<br /> font-size: 11px;<br /> font-weight: bold;<br /> line-height: 16px;<br /> padding: 0 4px;<br /> text-decoration: none;<br /> text-shadow: #9b9b9b 0 -1px 1px;<br /> vertical-align: middle;<br /> vertical-align: baseline;<br /> <br /> /*各瀏覽器的圓角設定,這裡捨棄對 IE6 的支援*/ <br /> border-radius: 2px;<br /> -moz-border-radius: 2px;<br /> -webkit-border-radius: 2px;<br /> -khtml-border-radius: 2px;<br />}<br /></pre><br />所用到的圖片:<br /><br />button_bg.png<br /><img src="http://lh5.ggpht.com/_b8lN_UbLoEc/Smix-iwmfAI/AAAAAAAAGCw/hdRC6azA0kk/s800/button_bg.png" /><br /><br /><span style="color: rgb(255, 0, 0);">這裡我也使用相同的 class 名稱,但在</span><span style="font-weight: bold;color: rgb(255, 0, 0);">限制樣式對象</span><span style="color: rgb(255, 0, 0);">的作用下這兩個樣式是不會互相衝突的。</span><br /><br />參考頁面:<br /><a href="http://www.last.fm/?setlang=en">Last.fm</a><br /><a href="http://www.wacanai.com/">Wacanai.com</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-17854215115074277672009-07-23T23:46:00.006+08:002010-05-27T00:24:00.959+08:00CSS 部屬經驗-容器樣式<span style="font-size:85%;">為了 IE6 的相容這裡我不會用太新穎的選擇器,希望有一天 IE6 的使用群可以消失,這樣在排版時可以不去顧慮 IE6 的問題。</span><br /><br /><span style="font-weight: bold;">主旨:</span><br /><ol style="color: rgb(255, 0, 0); font-weight: bold;"><li>容器樣式的概念</li><li>容器樣式定義</li><li>建構一個容器<br /></li></ol><br /><br /><span style="font-weight: bold;">容器樣式的概念</span><br /><br /><a href="http://picasaweb.google.com/lh/photo/FTOhX1eQ-yqj7gsJ45BAbw?feat=embedwebsite"><img src="http://lh5.ggpht.com/_b8lN_UbLoEc/SmdIKBiJF3I/AAAAAAAAGA0/vnIILo_MyxM/s512/area_1.jpg" /></a><br />我們會發現在上面這三個樣式裡外匡是一樣的,除了顏色上的差異,而這些外匡的 HTML 結構也是一樣的,我稱這樣的外匡為容器,主要只提供樣式的框架,不處理資料的呈現。<br /><br />將容器與樣式分離的好處是版面的呈現變靈活了,讓排版就像堆積木一樣,而樣式的重複利用性也會變高,樣式定義的複雜度也會降低。<br /><br /><a href="http://picasaweb.google.com/lh/photo/8MMi2goLENT0ak_tqgK3wA?feat=embedwebsite"><img src="http://lh6.ggpht.com/_b8lN_UbLoEc/SmdIKcB1SAI/AAAAAAAAGA4/5lllJY7EMrk/s512/area_2.jpg" /></a><br />上面這張圖就是容器的架構概念,在容器裡放入資料呈現的樣式,再將容器加入頁面排版裡。<br /><br /><br /><span style="font-weight: bold;">容器樣式定義</span><br />如果已經瞭解什麼是容器了,接著要開始為容器的定義作一些規範:<br /><ol style="color: rgb(51, 51, 255);"><li>不處理資料的呈現,例如資料的列表。</li><li>容器裡不可以在包含容器,過份的疊加套用會讓整體的架構變的很亂,所以讓容器間的關係保持平等是比較好的。</li><li>不要設定太多會繼承的樣式屬性,這樣會讓包在裡面的樣式要額外設定一些複寫的樣式屬性,例如字體顏色、對齊方式等。</li><li>不要為容器設定高度與寬度的屬性,高度應該要隨著內容而變動,寬度則應該適應版面的大小,這樣才不容易出現跑版的異常問題。<br /></li></ol><br /><br /><span style="font-weight: bold;">建構一個容器</span><br />針對上面的樣式來建構容器的 HTML,當然不一定照著一樣的方式建立,依照容器樣式的需求去建立就行了。<br /><br /><span style="color: rgb(255, 0, 0);">這裡會發現我之前在 </span><a href="/2009/07/css.html">CSS 部屬經驗-樣式命名</a><span style="color: rgb(255, 0, 0);"> 中提到的</span><span style="font-weight: bold; color: rgb(255, 0, 0);">樣式成員名稱</span><span style="color: rgb(255, 0, 0);">,這裡我還為每個樣式成員都加上了 "Area" 這個名稱前綴,以避免選擇意外套用到不該套用的元素上。</span><br /><pre class="xml" name="code"><br /><div class="AreaBox_1"><br /> <h3 class="AreaTitle">標題文字</h3><br /> <div class="AreaContent"><br /> <!-- <br /> 其他樣式元素... <br /> --><br /> </div><br /> <div class="AreaBottom"><br /> <div></div><br /> </div><br /></div><br /></pre><br /><br /><span style="color: rgb(255, 0, 0);">這裡可以看出 CSS 的選擇器的層級最多只有三層,如果樣式的層級太深以後要接手的人會很難進入狀況,層級太淺樣式又會很沒結構感,造成樣式很零散,兩層到三層之間的選擇器設定是比較好維護的。</span><br /><br />關於容器的樣式設定我並沒有設定的很完整,請自由發揮吧!<br /><pre class="css" name="code"><br />.AreaBox_1 {<br /> /*右上角的底圖*/<br /> background:transparent url(../images/xxxx.gif) no-repeat right top;<br /> /*上下的間距*/<br /> margin:5px auto;<br />}<br />.AreaBox_1 .AreaTitle{<br /> /*左上角的底圖*/<br /> background:transparent url(../images/xxxx.gif) no-repeat left top;<br /> /*標題設定*/<br /> color:#585E1A;<br /> font-size:16px;<br /> padding:10px 0 14px 35px;<br />}<br />.AreaBox_1 .AreaContent{<br /> /*中間的底圖*/<br /> background:transparent url(../images/xxxx.gif) repeat-y left center;<br /> padding:0 12px;<br />}<br />.AreaBox_1 .AreaBottom{<br /> /*右下角的底圖*/<br /> background:transparent url(../images/xxxx.gif) repeat-y right top;<br />}<br />.AreaBox_1 .AreaBottom div{<br /> /*左下角的底圖*/<br /> background:transparent url(../images/xxxx.gif) repeat-y left top;<br /> height:10px;<br />}<br /></pre><br /><br /><br />參考頁面:<br /><a href="http://www.last.fm/?setlang=en">Last.fm</a><br /><a href="http://www.wacanai.com/">Wacanai.com</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-22974934011372004732009-07-22T20:42:00.012+08:002010-05-27T00:24:26.015+08:00CSS 部屬經驗-頁面排版<span style="font-size:85%;">為了 IE6 的相容這裡我不會用太新穎的選擇器,希望有一天 IE6 的使用群可以消失,這樣在排版時可以不去顧慮 IE6 的問題。</span><br /><br /><span style="font-weight: bold;">主旨:</span><br /><ol style="color: rgb(255, 0, 0); font-weight: bold;"><li>分析版面架構</li><li>定義所需要的排版區域</li><li>為需要設置寬度的區域增加外匡<br /></li><li>建立 HTML 架構</li><li>CSS 排版設定<br /></li></ol><br /><br /><span style="font-weight: bold;">如何分析版面架構</span><br />一般網頁架構都差不多,大部分都是由幾個主要的區域建構而成,只是在部屬上有些差異而已。<br /><br />在下面幾個網頁排版中我們可以發現,除了兩欄或三籃的差異外,基本上整體的頁面部屬是一樣的。<br /><a href="http://picasaweb.google.com/lh/photo/Xc7kWLbLM8wezXa-_bbSyA?feat=embedwebsite"><img src="http://lh4.ggpht.com/_b8lN_UbLoEc/Smb15JX5T3I/AAAAAAAAF_U/oKydzTjbrsM/s512/layout_sample_3.jpg" /></a><br /><a href="http://www.naturalcorner.com.sg/">天然の屋</a><br /><br /><a href="http://picasaweb.google.com/lh/photo/_kNkXzsHmouuXmf1X8RflQ?feat=embedwebsite"><img src="http://lh6.ggpht.com/_b8lN_UbLoEc/Smb15TAS3WI/AAAAAAAAF_Y/xy1GcsVQmt4/s512/layout_sample_2.jpg" /></a><br /><a href="http://www.tnbeauty.com.tw/">TERRANOVA 朵拉大地</a><br /><br /><a href="http://picasaweb.google.com/lh/photo/zhgslcWKhA1QqiGooHXoVw?feat=embedwebsite"><img src="http://lh5.ggpht.com/_b8lN_UbLoEc/Smb15kvg3AI/AAAAAAAAF_c/f48K0-CvsaI/s512/layout_sample_1.jpg" /></a><br /><a href="http://www.kissbaby.com.tw/">Jamboree購物網</a><br /><br /><br /><span style="font-weight: bold;">定義所需要的排版區域</span><br />根據上面第一個版型,可以分析出以下的版面架構,要部屬這樣的架構其實不難,依照一個很直覺的方式去部屬就可以了。<br /><a href="http://picasaweb.google.com/weskerjax/CSS?feat=embedwebsite#5361242783746355682"><img src="http://lh6.ggpht.com/_b8lN_UbLoEc/Smb16B_T8eI/AAAAAAAAF_k/bRvHXEKW-3c/s512/layout_setup_1.jpg" /></a><br /><br /><br /><span style="font-weight: bold;">為需要設置寬度的區域增加外匡<br /></span>在之前的文章 <a href="/2009/04/widthcss.html">寬度(width)不要與其他屬性同時設定[CSS]</a> 有提到寬度定義的手則,所以接著要為具有寬度定義的區域增加外匡,然後在外匡上設定寬度的大小。<br /><br /><span style="font-weight: bold; color: rgb(255, 0, 0);">不管是排版或是樣式定義,除非必要的樣式,其餘請不要設置高度與寬度的樣式屬性,頁面是會隨著內容而變動的,愈是增加不必要的限制,頁面愈容易跑版。</span><br /><br /><a href="http://picasaweb.google.com/lh/photo/D9X9fkJhSZ2Degy5lpRn0g?feat=embedwebsite"><img src="http://lh6.ggpht.com/_b8lN_UbLoEc/Smb16DMLfmI/AAAAAAAAF_g/9gzcT0NE0As/s512/layout_setup_2.jpg" /></a><br /><br /><br /><span style="font-weight: bold;">建立 HTML 架構</span><br />依照上面的架構圖我們可以建立以下的 HTML 架構。<br />這裡也是一個很簡單架設觀念,只要把每個方匡都想成是 <div></div>,然後在從外到內一層一層去部屬就可以了。<br /><br /><span style="color: rgb(255, 0, 0); font-weight: bold;">對於 ContentWrapper 的結構位置建議放置在分欄區域(MainWrapper)的起始位置,這樣可以讓內容資訊有較好的 SEO。</span><br /><pre class="xml" name="code"><br /><div id="ContainerWrapper" class="ClearIt"><br /> <div id="Container"><br /><br /> <div id="Header" class="ClearIt"><br /> Header<br /> </div><br /><br /> <div id="Banner"><br /> Banner<br /> </div><br /><br /> <div id="MainWrapper" class="ClearIt"><br /> <div id="ContentWrapper"><br /> <div id="Content"><br /> Content<br /> </div><br /> </div><br /><br /> <div id="SidebarWrapper"><br /> <div id="Sidebar"><br /> Sidebar<br /> </div><br /> </div><br /> </div><br /><br /> </div><br /></div><br /><br /><div id="FooterWrapper"><br /> <div id="Footer"><br /> Footer<br /> </div><br /></div><br /></pre><br /><br /><br /><span style="font-weight: bold;">CSS 排版設定</span><br />要設定 CSS 也是一個簡單的事情,先將所有的 id 取出至 CSS 檔建出以下的文件。<br /><pre class="css" name="code"><br />/* 整體頁面區域 */ <br />#ContainerWrapper{}<br />#Container{}<br /><br />/* 頁首區域 */<br />#Header{}<br /><br />/* 橫幅區域 */<br />#Banner{}<br /><br />/* 主要內容區域 */<br />#MainWrapper{}<br /><br />/* 主欄區域 */<br />#ContentWrapper{}<br />#Content{}<br /><br />/* 側欄 區域 */<br />#SidebarWrapper{}<br />#Sidebar{}<br /><br />/* 頁尾 區域 */<br />#FooterWrapper{}<br />#Footer{}<br /></pre><br /><br />接著為版型作位置及寬度上的配置,在設定時會很難察覺區域的情況,建議為每個區域都先設置不同的底色加以區別。<br /><pre class="css" name="code"><br />/*先定義代替 <div style="display:block;"></div> 的樣式設定*/<br />.ClearIt:after {<br /> content: ".";<br /> display: block;<br /> height: 0;<br /> clear: both;<br /> visibility: hidden;<br />}<br />/*針對 IE6 的方式*/<br />.ClearIt {<br /> _zoom: 1;<br />}<br /><br /><br />/* 整體頁面區域 */<br />#ContainerWrapper{<br /> /* 設定寬度並整體置中 */<br /> width:982px;<br /> margin:0 auto;<br />}<br />#Container{}<br /><br /><br />/* 頁首區域 */<br />#Header{}<br /> <br /> <br />/* 橫幅區域 */<br />#Banner{}<br /> <br /> <br />/* 主要內容區域 */<br />#MainWrapper{}<br /><br /><br />/* 主欄區域 */<br />#ContentWrapper{<br /> /* 設定主欄的位置 */<br /> float:right;<br /><br /> /* 設定內容溢出的處理方式,這裡建議設置隱藏,避免非預期的跑版出現。 */<br /> overflow:hidden;<br /><br /> /* 設定主欄的寬度 */<br /> width:736px;<br />}<br />#Content{<br /> /* 這裡建議設定最小高度,當內容高度不足時,不置於讓版面變得很奇怪。 */<br /> min-height:500px;<br /><br /> /*IE6 最小高的設定*/<br /> _height:500px;<br /> _overflow:visible;<br />}<br /><br /> <br />/* 側欄 區域 */<br />#SidebarWrapper{<br /> /* 設定側欄的位置 */<br /> float:left;<br /><br /> /* 設定內容溢出的處理方式,這裡建議設置隱藏,避免非預期的跑版出現。 */<br /> overflow:hidden;<br /><br /> /* 設定側欄的寬度 */<br /> width:202px;<br />}<br />#Sidebar{}<br /><br /><br />/* 頁尾 區域 */<br />#FooterWrapper{<br /> /* 設定寬度並整體置中 */<br /> width:982px;<br /> margin:0 auto;<br />}<br />#Footer{}<br /></pre><br /><br />剩下的就是去調整其他區域的底圖、padding 及 margin,那些網頁美工的設定。<br /><br /><br />參考頁面:<br /><a href="http://www.last.fm/?setlang=en">Last.fm</a><br /><a href="http://www.wacanai.com/">Wacanai.com</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-10704610697558767352009-07-20T20:41:00.010+08:002009-07-24T01:13:44.414+08:00CSS 部屬經驗-樣式命名<span style="font-size:85%;">為了 IE6 的相容這裡我不會用太新穎的選擇器,希望有一天 IE6 的使用群可以消失,這樣在排版時可以不去顧慮 IE6 的問題。</span><br /><br /><span style="font-weight: bold;">主旨:</span><br /><ol style="color: rgb(255, 0, 0); font-weight: bold;"><li>定義樣式的命名方式,區分 CSS 與 JavaScript 的使用</li><li>id , class , tag 等選擇器得使用時機<br /></li></ol><br /><span style="font-weight: bold;">為什麼要定義定義樣式的命名方式?</span><br />CSS 在選擇器的宣告上十分自由,但為了讓其他人也能順利的閱讀自己寫的樣式,定義一個有規則的命名方式,可以減少不必要的誤會跟問題。<br /><br />這裡我自己作了命名的定義:<br /><ul style="color: rgb(51, 51, 255);"><li>CSS 命名規則:<br /><ol><li>單字開頭大寫,不使用底線(_)間隔,除最後的數字代號前(.Style_1)</li><li>除特定版型架構命名,不得以 id 方式宣告樣式,唯一樣式才可以使用 id 命名(#SidebarWrapperLeft)</li><li>所有可沿用的樣式都才採用 class 方式宣告<br /></li></ol><br /></li><li>JS 命名規則:<br /><ol><li>所有單字小寫,使用底線(_)間隔(action_bt)</li><li>與 JS 元素獲取相關命名均不可帶有樣式屬性<br /></li></ol></li></ul>雖然有 CSS , JS 及 HTML 樣版可以將程式與美工的部分分離,但在 HTML 架構的規劃上仍需要協同開發,為區分樣式與 JS 的程式操作最好是將命名規則分開。<br /><br /><br /><span style="font-weight: bold;">如何去決定選擇器的使用?</span><br /><ul><li><span style="color: rgb(51, 51, 255); font-weight: bold;">id 選擇器:</span><br />在 id 的使用上我分成[頁面排版]及[例外樣式]<br /><ol><li><span style="font-weight: bold;">頁面排版</span>:排版是不會重複的樣式定義,而且必須擁有不容易被複寫的特性,使用 id 選擇器去定義樣式是在好不過的。<br /><br />常用的命名詞彙:<br /><table style="text-align: left;" border="1"><tbody><tr><th>Outer</th><td>外匡</td></tr><tr><th>Container</th><td>容器</td></tr><tr><th>Status</th><td>狀態</td></tr><tr><th>Header</th><td>頁首</td></tr><tr><th>Banner</th><td>頁面橫幅</td></tr><tr><th>Nav/Navigation</th><td>領航</td></tr><tr><th>Navbar</th><td>領航列</td></tr><tr><th>Content/Container</th><td>內容</td></tr><tr><th>Main</th><td>頁面主體</td></tr><tr><th>Sidebar</th><td>側欄</td></tr><tr><th>Footer</th><td>頁尾</td></tr><tr><th>Wrapper</th><td>具有寬度定義的區塊</td></tr></tbody></table><br /><br /></li><li><span style="font-weight: bold;">例外樣式</span>:在頁面中具有特別需要美工修飾的樣式時,利用 id 選擇器去強制複寫原有樣式。<br />這是為了特殊樣式而保留的彈性,但不建議經常性的使用,這樣就違反 CSS 樣式統一的特性,未來維護時只會帶來更多的不便。<br /><br /></li></ol><br /></li><li><span style="font-weight: bold; color: rgb(51, 51, 255);">class 選擇器 :</span><br />在 class 的使用上我分成[樣式定義]及[元素類型]<br /><ol><li><span style="font-weight: bold;">樣式定義</span>:樣式規劃上最主要的用途定義,去規劃所有可重複利用的樣式,例如:按鈕、列表、表單等區塊性的樣式。<br /><br />常用的命名詞彙:<br /><table style="text-align: left;" border="1"><tbody><tr><th>Summary</th><td>摘要</td></tr><tr><th>Widget</th><td>工具集</td></tr><tr><th>Toolbar</th><td>工具列</td></tr><tr><th>Navbar</th><td>領航列</td></tr><tr><th>Menu</th><td>項目單</td></tr><tr><th>TextLink</th><td>文字連結列</td></tr><tr><th>PageLink</th><td>頁面連結列</td></tr><tr><th>Tab</th><td>頁籤</td></tr><tr><th>Search</th><td>搜尋</td></tr><tr><th>Form</th><td>表單</td></tr><tr><th>List</th><td>列表</td></tr><tr><th>TextList</th><td>文字列表</td></tr><tr><th>ImageList</th><td>圖片列表</td></tr><tr><th>Button</th><td>按鈕</td></tr><tr><th>AreaBox</th><td>區塊匡</td></tr><tr><th>InfoBox</th><td>資訊匡</td></tr><tr><th>PageInfo</th><td>頁面資訊</td></tr><tr><th>DropMenu</th><td>下拉選單</td></tr><tr><th>heading/Title</th><td>標題</td></tr><tr><th>SecDivide</th><td>區段標題</td></tr></tbody></table><br /><br /></li><li><span style="font-weight: bold;">樣式成員名稱</span>:在樣式編排時為了補 tag 不足(樣式成員),利用 class 去定義內層的原件樣式。<br />命名時可依據區塊在樣式裡的角色去取名。<br /><br />常用的命名詞彙:<br /><table style="text-align: left;" border="1"><tbody><tr><th>Title</th><td>標題</td></tr><tr><th>Date</th><td>日期</td></tr><tr><th>Buttons</th><td>按鈕群</td></tr><tr><th>Bottom</th><td>底部</td></tr><tr><th>Logo</th><td>網站標誌</td></tr><tr><th>Image</th><td>圖片</td></tr><tr><th>Action</th><td>動作</td></tr><tr><th>status</th><td>狀態</td></tr><tr><th>Content</th><td>內容</td></tr><tr><th>Even</th><td>偶數</td></tr><tr><th>Odd</th><td>奇數</td></tr><tr><th>First</th><td>最前的</td></tr><tr><th>List</th><td>最後的</td></tr></tbody></table><br /></li></ol><br /></li><li><span style="font-weight: bold; color: rgb(51, 51, 255);">tag (HTML 標籤)選擇器:</span><br />在 tag 的使用上我分成[限制樣式對象]及[樣式成員]<br /><ol><li><span style="font-weight: bold;">限制樣式對象</span>:在樣式選擇器前加入可使用此樣式的tag(HTML 標籤),去區別可使用此樣式的元素。<br /><br /></li><li><span style="font-weight: bold;">樣式成員</span>:在樣式定義結構中所使用到的 tag,別太依賴 tag 去定義樣式,在 HTML 中的 tag 是有限的,適時的用 class 去區別樣式成員。<br />判斷方式,當子節點超過 2 層或同類 tag 超過一個以上時,最好使用<span style="font-weight: bold;">樣式成員名稱</span>的 class 命名去增加樣式成員</li></ol></li></ul><br /><br />在這些定義中可能還是很模糊,在之後的文章中會介紹如何去規劃樣式,在那些範例中會使用到上面的規則,應該會比較容易瞭解。<br /><br />參考頁面:<br /><a href="http://www.last.fm/?setlang=en">Last.fm</a><br /><a href="http://www.wacanai.com/">Wacanai.com</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-8279857905236027052009-03-29T08:09:00.012+08:002012-03-16T22:58:01.076+08:00iGoogle 小工具製作心得iGoogle 小工具主要是以 XML 為主體,再加上 HTML、CSS 及 JavaScript 所組成的,基本上只要會後面三種語言,要開發 iGoogle 小工具是非常快樂的一件事。<br /><br />在這裡我只做一些的教學及心得分享,詳細的規範及 API 說明,請察看官方網站 <a href="http://www.google.com.tw/intl/zh-TW/apis/gadgets/docs-home.html">Google 小工具 API 開發人員指南</a>,開發指南裡面寫的很清楚,還有很多的範例可以參考。<br /><br />心得建議:<br /><ul><li>再<span style="color: rgb(255, 0, 0); font-weight: bold;">開發時</span>建議 XML 的<span style="color: rgb(255, 0, 0); font-weight: bold;">檔名不要太正式</span>,iGoogle 的平台會 cache XML,造成檢視上會出現不一致情況,等到要發佈時再取一個正式的檔名,避免不必要的問題發生。</li><li>如果要使用 session 和 cookie 做登入驗證的話,最好使用 <span style="color: rgb(255, 0, 0); font-weight: bold;"><iframe></span> 去處理,會比較容易達成且安全問題也比較少。</li><li>在 ModulePrefs 中的 category 屬性也記得加上去,在官方的開發人員指南中並沒有說明,共有:<br /><ul><li>politics</li></ul><ul><li>tools</li></ul><ul><li>funandgames</li></ul><ul><li>lifestyle</li></ul><ul><li>finance</li></ul><ul><li>communication<br /></li></ul><ul><li>等...。</li></ul></li><br /><li>多利用[<a href="http://www.google.com.tw/intl/zh-TW/apis/gadgets/gs.html#Scratchpad">便條簿</a>]做測試可以減少不少時間。<br /></li><li>在<span style="color: rgb(255, 0, 0); font-weight: bold;">測試時</span>最好在 iGoogle 上另開一個[<span style="color: rgb(255, 0, 0); font-weight: bold;">分頁</span>],免得自己原本常用的小工具被打亂。<br /></li><li>在測試的[分頁]中最好加上[<a href="http://fusion.google.com/add?moduleurl=developer.xml">開發人員小工具</a>]這個小工具去管理 cache 問題。<br /></li></ul><br />小工具範例:<br /><pre class="xml" name="code"><br /><?xml version="1.0" encoding="UTF-8" ?><br /><Module><br /> <ModulePrefs<br /> title="單位換算"<br /> description="更方便的介面處理單位制度上的換算"<br /> directory_title="單位換算"<br /> author="Jax"<br /> author_email="weskerjax+feed@gmail.com"<br /> thumbnail=<br /> "http://weskerjax.googlepages.com/unit_converter_thumbnail.png"<br /> screenshot=<br /> "http://weskerjax.googlepages.com/unit_converter_screenshot.png"<br /> title_url="http://jax-work-archive.blogspot.com/"<br /> category="tools"<br /> height="300"><br /> <Locale lang="zh-tw" country="TW"/><br /> <Require feature="tabs"/><br /> <Require feature="dynamic-height"/><br /> </ModulePrefs><br /> <UserPref<br /> name="type"<br /> display_name="預設開啟的頁籤"<br /> default_value="長度"<br /> datatype="enum"><br /> <EnumValue value="長度"/><br /> <EnumValue value="重量"/><br /> <EnumValue value="面積"/><br /> <EnumValue value="體積"/><br /> </UserPref><br /> <Content type="html"><br /> <![CDATA[<br /><style type="text/css"><br />.JContent table{<br /> margin-top:5px;<br /> width:100%;<br />}<br />.JContent th{<br /> background-color:#99CCFF;<br /> padding-top:5px;<br />}<br />.JContent label{<br /> text-align:center;<br /> padding:3px;<br /> display:block;<br /> font-size:12px;<br />}<br />.JContent label input{<br /> display:block;<br /> text-align:left;<br /> line-height:1.1em;<br /> font-size:11px;<br /> width:95%;<br />}<br /></style><br /><script type="text/javascript"><br />var prefs = new _IG_Prefs(__MODULE_ID__);<br />function set_event__MODULE_ID__(tabId){<br /> var inputs=_gel(tabId).getElementsByTagName('input');<br /> for (var i=0, j=inputs.length; i<j; i++){<br /> el=inputs[i];<br /> /*設定 onkeyup 時處理單位換算*/<br /> el.onkeyup=function(){<br /> this.value=this.value.match(/[0-9]+[\.]?[0-9]*/);<br /> var rate=this.getAttribute('rate');<br /> var value=parseFloat(this.value)/parseFloat(rate);<br /><br /> var table=this;<br /> while(table.tagName!="TABLE"){table=table.parentNode;}<br /><br /> var inputs=table.getElementsByTagName('input');<br /> for (var i=0, j=inputs.length; i<j; i++){<br /> chg=inputs[i];<br /> r=chg.getAttribute('rate');<br /> if(r==rate){continue;}<br /><br /> if(this.value){chg.value=value*parseFloat(r);}<br /> else{chg.value='';}<br /> };<br /> };<br /> /*設定 onfocus 選取所有文字*/<br /> el.onfocus=function(){this.select()};<br /> };<br /> /*讓小工具能夠自行調整大小*/<br /> _IG_AdjustIFrameHeight();<br />}<br />function init() {<br /> /*建立頁籤並選定預選頁籤*/<br /> var tabs = new _IG_Tabs(__MODULE_ID__,prefs.getString("type"));<br /> tabs.addTab("長度","J_length",set_event__MODULE_ID__);<br /> tabs.addTab("重量","J_weight",set_event__MODULE_ID__);<br /> tabs.addTab("面積","J_area",set_event__MODULE_ID__);<br /> tabs.addTab("體積","J_volume",set_event__MODULE_ID__);<br />}<br />_IG_RegisterOnloadHandler(init);/*載入時呼叫的事件處理常式*/<br /></script><br /><div class="JContent" id="J_length"><br /> <table border="1" cellspacing="0" cellpadding="0"><br /> <tr><br /> <td><label>公尺<input rate="1" type="text" /></label></td><br /> <td><label>公里<input rate="0.001" type="text" /></label></td><br /> <td><label>海里<input rate="0.00053996" type="text" /></label></td><br /> <tr><br /> <td><label>英吋<input rate="39.370" type="text" /></label></td><br /> <td><label>英呎<input rate="3.2808" type="text" /></label></td><br /> <td><label>英碼<input rate="1.0936" type="text" /></label></td><br /> </tr><br /> <td><label>台尺<input rate="3.3003" type="text" /></label></td><br /> <td><label>市里<input rate="2e-3" type="text" /></label></td><br /> <td><label>市引<input rate="0.03" type="text" /></label></td><br /> </tr><br /> </table><br /></div><br /><div class="JContent" id="J_weight"><br /> <table border="1" cellspacing="0" cellpadding="0"><br /> <tr><br /> <td><label>公斤<input rate="1" type="text" /></label></td><br /> <td><label>公克<input rate="1e+3" type="text" /></label></td><br /> <td><label>公噸<input rate="1e-3" type="text" /></label></td><br /> </tr><br /> <tr><br /> <td><label>英磅<input rate="2.2046" type="text" /></label></td><br /> <td><label>盎司<input rate="35.273" type="text" /></label></td><br /> <td><label>英噸<input rate="9.8421e-4" type="text" /></label></td><br /> </tr><br /> <tr><br /> <td><label>美噸<input rate="0.0011023" type="text" /></label></td><br /> <td><label>格令<input rate="15432" type="text" /></label></td><br /> <td><label>克拉<input rate="5000" type="text" /></label></td><br /> </tr><br /> <tr><br /> <td><label>台斤<input rate="1.6667" type="text" /></label></td><br /> <td><label>台兩<input rate="26.667" type="text" /></label></td><br /> <td><label>市擔<input rate="0.02" type="text" /></label></td><br /> </tr><br /> </table><br /></div><br /><div class="JContent" id="J_area"><br /> <table border="1" cellspacing="0" cellpadding="0"><br /> <tr><br /> <td><label>公畝<input rate="100.00" type="text" /></label></td><br /> <td><label>公頃<input rate="1" type="text" /></label></td><br /> <td><label>平方公里<input rate="0.01" type="text" /></label></td><br /> </tr><br /> <tr><br /> <td><label>平方英寸<input rate="155e+5" type="text" /></label></td><br /> <td><label>平方英尺<input rate="107640" type="text" /></label></td><br /> <td><label>平方碼<input rate="11960" type="text" /></label></td><br /> </tr><br /> <tr><br /> <td><label>英畝<input rate="2.4711" type="text" /></label></td><br /> <td><label>平方英里<input rate="0.003861" type="text" /></label></td><br /> <td> </td><br /> </tr><br /> </table><br /></div><br /><div class="JContent" id="J_volume"><br /> <table border="1" cellspacing="0" cellpadding="0"><br /> <tr><br /> <td><label>立方公尺<input rate="1" type="text" /></label></td><br /> <td><label>公升<input rate="1e+3" type="text" /></label></td><br /> <td><label>毫升<input rate="1e+6" type="text" /></label></td><br /> </tr><br /> <tr><br /> <td><label>英國加侖<input rate="219.97" type="text" /></label></td><br /> <td><label>液體加侖<input rate="264.17" type="text" /></label></td><br /> <td><label>固體加侖<input rate="227.02" type="text" /></label></td><br /> </tr><br /> </table><br /></div><br /> ]]><br /> </Content><br /></Module><br /></pre><br /><br />範例預覽:<br /><script src="http://www.gmodules.com/ig/ifr?url=http://weskerjax.googlepages.com/unit_converter.xml&up_type=%E9%87%8D%E9%87%8F&synd=open&w=420&h=410&title=%E5%96%AE%E4%BD%8D%E6%8F%9B%E7%AE%97&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script><br />範例原始檔:<a target="_blank" href="http://weskerjax.googlepages.com/unit_converter.xml">unit_converter.xml</a><br /><br /><br />第一個開發的小工具:<br /><script src="http://www.gmodules.com/ig/ifr?url=http://www.wacanai.com/google_tool/wacanai_mini_0902.xml&up_list_row=5&synd=open&w=420&h=300&title=Wacanai+Mini+v0.5+for+iGoogle&lang=zh-TW&country=TW&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-61200311236238900562008-12-05T00:52:00.004+08:002013-06-11T21:22:08.191+08:00Wacanai 改版了花了一個多月的時間<br />
終於將新的版面上線了<br />
除了版面上的改變外<br />
這次也降低 JavaScript 的使用量<br />
根據之前的經驗<br />
太多的 JavaScript 只會讓瀏覽器當掉<br />
在 CSS 樣式上的規劃也改善不少<br />
當然也為了介面與功能配置上做了一些修改<br />
雖然整體來說還不是很完整<br />
但希望新的版面能讓使用者感覺更親切<br />
<br />
我們的網站:<a target="_blank" href="http://www.wacanai.com/">www.wacanai.com</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-18224413152082268552008-09-09T08:12:00.007+08:002014-11-30T17:28:57.956+08:00CSS 三欄排版<ol><li>float 排版<br />
<img alt="CSS 三欄排版" src="http://3.bp.blogspot.com/-C770WGilHoo/SK0Asws3sTI/AAAAAAAANHg/fKqlOByUABk/Diagram8a.png" /><br />
這是在 Table 排版之後最常見的排版方式,利用 float 與 clear 的屬性設定去達成的分欄排版。<br />
<br />
最近發現除了利用 clear 屬性的空 Tag 以外還有其他的方式可以達到這個效果,在最外層的 div 上加入以下屬性也可以達到相同的效果:<br />
<pre class="css" name="code">* html #demo_1{
height: 1%;
}
#demo_1:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#demo_1 {
zoom: 1;
}
</pre><br />
<br />
</li>
<li>table 排版<br />
<img alt="CSS 三欄排版" src="http://2.bp.blogspot.com/-yju8Fw0zlM4/SK0AtG7NDZI/AAAAAAAANHg/WVqbZkyrFm0/Diagram8b.png" /><br />
這是最早期排版方式,雖然有種種的缺點,但還是有很多網站使用,除了利用原有的 Table Tag,也可以使用其他 Tag 設定 display 屬性去達到 Table 排版的效果,雖然在寬度的定義上的彈性,但還是<span style="color: red; font-weight: bold;">建議保持只有一個欄位的彈性寬度</span>,過多的彈性寬度只會造成意想不到的後果。<br />
<br />
<br />
</li>
<li>margin and float 排版<br />
<img alt="CSS 三欄排版" src="http://3.bp.blogspot.com/--pErvdfn1fg/SK0AtEOlTWI/AAAAAAAANHg/hytdKuVs7hU/Diagram8c.png" /><br />
這是利用中欄的 margin 屬性空出側欄位空間,再利用 float 及負邊界方式去達成的三欄排版,因為 float 屬性不會對整體高度做出貢獻,如果需要側欄的高度影響,必須上擁有 clear 屬性的 Tag 或利用第一個範例的方法,由於中欄沒有 float 屬性所以不能在內容使用 clear 屬性。<br />
<br />
<br />
</li>
<li>margin and position排版<br />
<img alt="CSS 三欄排版" src="http://4.bp.blogspot.com/-UAj1f4TXz-8/SK0AtbofR5I/AAAAAAAANHg/uTnVRxmG500/Diagram8d.png" /><br />
這是利用中欄的 margin 屬性空出側欄位空間,再利用 position 的定位方式去達成的三欄排版,因為 position 屬性不像 float 屬性,可以利用 clear 屬性做出高度的貢獻,所以<span style="color: red; font-weight: bold;">側欄的高度不可以大於主欄</span>,要不然會造成顯示重疊。<br />
<br />
<br />
</li>
<li>padding and float排版<br />
<img alt="CSS 三欄排版" src="http://1.bp.blogspot.com/-gFnIzXUQjb0/SMSSpzSOP7I/AAAAAAAANHg/KUcXfihVqFA/Diagram8-2.png" /><br />
這是結合 (float 排版) 及 (margin and float 排版) 的排版方式,主要是解決 (margin and float 排版) 的主欄中不可以使用 clear 屬性的問題,CSS 的差別只在於利用外匡的 padding 屬性去做預留空間的設定。</li>
</ol><br />
<br />
優劣差異:<br />
<table border="1" class="table_list"><tbody>
<tr class="header"><th></th><th>float</th><th>table</th><th>margin<br />
float</th><th>margin<br />
position</th><th>padding<br />
float</th></tr>
<tr><td>靈活性</td><td style="color: #3333ff; text-align: center;">高</td><td style="color: #ff3333; text-align: center;">低</td><td style="color: #3333ff; text-align: center;">高</td><td style="color: #3333ff; text-align: center;">高</td><td style="color: #3333ff; text-align: center;">高</td></tr>
<tr><td>親和力</td><td style="color: #3333ff; text-align: center;">高</td><td style="color: #ff3333; text-align: center;">低</td><td style="color: #3333ff; text-align: center;">高</td><td style="color: #3333ff; text-align: center;">高</td><td style="color: #3333ff; text-align: center;">高</td></tr>
<tr><td>HTML 結構</td><td style="color: #3333ff; text-align: center;">簡單</td><td style="color: #ff3333; text-align: center;">複雜</td><td style="color: #3333ff; text-align: center;">簡單</td><td style="color: #3333ff; text-align: center;">簡單</td><td style="color: #3333ff; text-align: center;">簡單</td></tr>
<tr><td>寬度彈性</td><td style="color: #ff3333; text-align: center;">no</td><td style="color: #3333ff; text-align: center;">yes</td><td style="color: #3333ff; text-align: center;">yes</td><td style="color: #3333ff; text-align: center;">yes</td><td style="color: #3333ff; text-align: center;">yes</td></tr>
<tr><td>允許彈性的欄位數</td><td style="color: #ff3333; text-align: center;">0</td><td style="color: #3333ff; text-align: center;">all</td><td style="color: #3333ff; text-align: center;">1</td><td style="color: #3333ff; text-align: center;">1</td><td style="color: #3333ff; text-align: center;">1</td></tr>
<tr><td>overflow 容錯</td><td style="color: #ff3333; text-align: center;">低</td><td style="color: #3333ff; text-align: center;">高</td><td style="color: #ff3333; text-align: center;">低</td><td style="color: #3333ff; text-align: center;">高</td><td style="color: #ff3333; text-align: center;">低</td></tr>
<tr><td>瀏覽器的解析差異</td><td style="color: #3333ff; text-align: center;">小</td><td style="color: #ff3333; text-align: center;"></td><td style="color: #3333ff; text-align: center;">小</td><td style="color: #3333ff; text-align: center;">小</td><td style="color: #3333ff; text-align: center;">小</td></tr>
<tr><td>欄位的高度影響</td><td style="color: #3333ff; text-align: center;">all</td><td style="color: #3333ff; text-align: center;">all</td><td style="color: #3333ff; text-align: center;">all</td><td style="color: #ff3333; text-align: center;">1</td><td style="color: #3333ff; text-align: center;">all</td> </tr>
</tbody></table><br />
<br />
<a href="http://dl.dropbox.com/u/16784943/code-demo/typeset.html" target="_blank">展示頁面(Demo Page)</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com2tag:blogger.com,1999:blog-5946530704742130970.post-21780290395226376702008-08-20T17:27:00.005+08:002010-05-27T00:30:12.144+08:00Ajax 模組架構的應用<img src="http://3.bp.blogspot.com/_b8lN_UbLoEc/SKlSOivx3AI/AAAAAAAABqQ/_cfqHsKFwNI/s320/Diagram7.png" alt="Ajax 模組架構的應用" id="BLOGGER_PHOTO_ID_5235806451593763842" border="0" /><br />一樣的就之前所提到的問題(<a href="/2008/08/ajax.html">Ajax 開發所產生的問題</a>),這是另一種以模組架構為基礎的方法,模組開發的好處我就不多作說明了,主要的行為模式是:<br /><ol><li>在請求 Page 時就先將 Module Include,讓頁面再第一次讀取時就可以完整呈現。</li><li>在頁面需要執行局部置換時,再利用 Ajax 向 Module 請求局部內容。<br /></li></ol><br />這樣做既不會失去模組開發的優點,也不會有 Ajax 造成的過長等待,讓 Ajax 主要應用在局部置換及 UI 處理。Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-90848553822228922272008-08-19T16:17:00.007+08:002010-05-27T00:30:33.996+08:00利用屏壁來延長頁面的呈現時間就之前提到的問題(<a href="/2008/08/ajax.html">Ajax 開發所產生的問題</a>),這很可能連帶出現以下問題:<br /><ol><li>瀏覽者再頁面尚未完整呈現時誤觸連結,造成錯誤操作。</li><li>功能的初始未完成,瀏覽者再使用上出現無法動作的錯愕情形。</li></ol><br /><br />這些問題可以用一個有效的方法去延長瀏覽者的等待時間,在一開始的頁面裡預設疊上一個遮蓋整個頁面的等待圖示,在 JavaScript 處理完後再移出屏壁,一個很好的範例就是 <a href="http://mail.google.com/mail?hl=zh-TW">Gmail</a>,再一個主要的頁面呈現前,置入一個等待圖示去避免一些可能的不當操作。<br /><br />順帶一提,<a href="http://mail.google.com/mail?hl=zh-TW">Gmail</a> 利用 ifreme 去做出局部置換的效果,這樣做的好處是,瀏覽器會自動去紀錄上下頁,在 Ajax 的應用上瀏覽紀錄這件事是必須額外處理的。Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-2914625823973717612008-08-18T17:27:00.007+08:002010-05-27T00:31:09.831+08:00利用 Ajax 減少 Server 運算量在 Ajax 還沒有出現時 JavaScript 本身就可以執行許多計算方面的程式了,像之前的文章『<a href="/2008/05/javascript-html-diff.html">HTML 比較(diff)</a>』、『<a href="/2007/06/sudoku.html">數獨(sudoku)解題</a>』、『<a href="/2007/10/blog-post_13.html">線性代數-計算機</a>』等都是利用 JavaScript 去達成的計算程式,象 Yahoo 也有在 Login 時利用 JavaScript 做 md5 的計算,其實瀏覽器還是可以做一些有規模的運算。<br /><br /><img src="http://4.bp.blogspot.com/_b8lN_UbLoEc/SKkpXV3zndI/AAAAAAAABqI/rAxR_goeX9U/%E5%9C%96%E8%A1%A86.png" alt="利用 Ajax 減少 Server 運算量" id="BLOGGER_PHOTO_ID_5235761522779856338" border="0" /><br /><br />主要是將運算資料取回,計算結果明細後,再跟 Server 取得剩餘的詳細資料,這個架構可以讓 Server 原本的運算量轉由瀏覽器執行,是一個以空間換時間的作法,當然有一好沒兩好,沒錯這樣的方法明顯會發生之前所說的問題(<a href="/2008/08/ajax.html">Ajax 開發所產生的問題</a>),是否要用這個方法就看各位的考量了。<br /><br />其中特別要注意的一些事項:<br /><ol><li style="color: rgb(255, 0, 0);">再資訊必須是即時性,且運算量大於一定時間以上時,考慮這種架構才會有意義,要不然只會浪費頻寬。</li><li style="color: rgb(255, 0, 0);">資料安全性問題,必須定義哪些瀏覽者可以取得計算資料,要不然會造成嚴重的漏洞。</li><li style="color: rgb(255, 0, 0);">資料量的大小,太大的資料可能會造成瀏覽器整個當掉,再規劃時要特別注意最大上限,至於詳細的範圍要依瀏覽者的設備而定。</li></ol>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-71418055776103248362008-08-14T16:17:00.006+08:002013-06-11T21:08:41.669+08:00Ajax 開發所產生的問題在 <a target="_blank" href="http://www.wacanai.com/">wacanai</a> 的開發中發現了一個問題,就是在頁面載入後又開始執行多個 Ajax 請求,這會發生什麼現象呢?頁面一開始會空空的,然後資訊開始慢慢的呈現出來,這樣的現象會造成兩種問題:<br />
<ol><li style="color: rgb(255, 0, 0);">Server 在同一時間會有來自單一位址的大量請求</li>
<li style="color: rgb(255, 0, 0);">使用者的等待時間變長</li>
</ol><br />
第一個問題會使 Server 連接端口的負荷增加,雖然在流量上並沒有很大的區別,但卻會考驗 Server 的硬體資源。<br />
<br />
第二個問題是使用者必須等待所有 Ajax 回應後才能看到完整的頁面資訊,而且會因為使用者的頻寬成倍數關係。<br />
<br />
<img src="http://4.bp.blogspot.com/_b8lN_UbLoEc/SKP8PCficjI/AAAAAAAABpY/BBqNJjT_mV8/%E5%9C%96%E8%A1%A81.png" alt="Ajax 開發所產生的問題" id="BLOGGER_PHOTO_ID_5234304527232037426" border="0" /><br />
<br />
我們會發生這樣的問題,來自於過度使用以 Ajax 為基礎的模組架構,將一些沒必要利用 Ajax 處理的應用,也使用 Ajax 來呈現,Ajax 原先是用來優化呈現上的<span style="color: rgb(255, 0, 0);">局部置換</span>,及增加與使用者互動的<span style="color: rgb(255, 0, 0);">應用介面</span>,主要是用來避免重新載入已有的資訊,並讓頁面可以有更好的介面輔助,但在習慣 Ajax 的架構時,不知不覺就習慣利用這個架構去作模組的規劃。<br />
<br />
所以再利用 Ajax 作開發時,必須考慮到 Ajax 主要的應用目的,不然在過度不當採用這個應用時,會造成更多的問題存在。Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-12411567038089787082007-11-19T22:20:00.004+08:002009-04-10T20:14:24.846+08:00初次使用 mootools.js最近為了網頁的動態效果,從 prototype.js 改使用 mootools.js 做開發依據,雖然 mootools.js 很好用,也比 prototype.js 更簡化了許多,但也應為更簡化讓我有點不太能上手。<br /><br />為了避免相容性的問題,使用其中很多的函數作媒介,雖然是個很好用的 Framework ,但效率確不如 prototype.js 快,當然不可能要馬兒跑得快,又要馬兒不吃草,mootools.js 在背後為了處理相容性的問題用掉不少時間,也簡化開發時架構的複雜度。<br /><br />由於對 mootools.js 還不是熟,可能需要花點時間去瞭解,但還是一句老話:<br /><span style="color: rgb(0, 0, 153);"><br />要知道積木有那些,才能蓋出偉大的城堡 </span>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-59164585283466910292007-10-17T20:05:00.002+08:002009-04-10T19:57:00.268+08:00三層 INNER JOIN 五層 SELECT今天工作時在寫 MySQL 的查詢指令,為了算出一個複雜的結果,必須用到四個資料表,三個 INNER JOIN 及五個 SELECT,一共用了四個子查詢,再推關聯性時我已經昏了 @ @,想說用 IN() 去簡化查詢指令,可是會造成 MySQL 整個當掉,結果只好用原本的去做了。<br /><br />第一次下那麼長的指令,而且第一個子查詢如果沒有將範圍縮小的話,後面所要的計算時間就會需要很久,原本想用預存程序的,但查詢條件卻設在最基本的子查詢裡面,頭很大!目前還找不到更快且簡潔的方法。Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-45246110043104492162007-10-05T00:27:00.003+08:002009-04-10T19:49:28.314+08:00Form 標籤在 IE6 中會有奇怪的段落現象最近在練習使用 Div 標籤排版,也順便修改自己常用的網頁,那個頁面是以前用表格排版的,隔了很久的時間我已經快看不懂裡面寫什麼了!果然用表格排版是個錯誤,在練習的過程中真的省去許多不必要的大小和標籤,原始碼的可閱讀性也增加了,我也在裡面加上了一些註解,要養成寫註解的良好習慣。<br /><br />正題:Form 中如果有隱藏欄位時,在 IE6 中總會多出空的一行,使的 Div 超出預設的大小,嘗試了很多方法之後,終於找到一個有效的辦法,就是在 Div 中設定 <span style="color: rgb(255, 0, 0);" title="發生溢位時不顯示">overflow:hidden;</span> 這個樣式,可能是我對 CSS 還不是很瞭解才會花那麼多時間,但原先的排版在 Firefox 裡卻是和我想像中的設定一樣,不知道是不是 IE6 本身的問題。Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-29637280580177049602007-10-02T11:39:00.003+08:002014-12-02T13:46:56.039+08:00可惡的 Microsoft IE這是之前 Blog 在 IE6 中顯示的樣式狀況,很奇怪的多了一條線,在 HTML 中明明就沒有套用樣式,可是那個 div 卻自己套用了上一個父標籤的樣式。<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQUw7Tl-KMxj6-H4WlFA9-zz_oMJiaZnAlSJ6TZgIRJPoInJnm8zGl1qhjRRFnmur53kFdunUmjjYg2H1k1hThmcw_38n3m4lDn2E32y4JatlTvIam97w3R2l-n9FqM2VbgnucOaAuao3U/s320/photo+for+IE.jpg" /><br />
<br />
在 Firefox 中沒有這個問題,能夠正常顯示我所設定的樣式。<br />
<img src="http://2.bp.blogspot.com/-ABoMXFEve7k/RwMQaIJhUbI/AAAAAAAANHg/d1nK4H1i6ic/s320/photo%2Bfor%2Bfox.jpg" /><br />
<br />
為了能讓更多的瀏覽者能夠正確的顯示我的網頁,於是我只好另外設計對應 IE6 的樣式,選擇了替代方案。<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFy_VdatGXQ0BKVkMGHVcUwANF4l7nUV7mxeyjUlTaKuMxMiC9cZNzlebTbEejxIq_W60Dn8Ef5hmWFF3elhckNjGfpXp2-mmQoTvBF8684KGQKB4vmtGIxc572QKgBxRUMxAiJiVhUZOm/s320/MWSnap070.jpg" /><br />
<br />
可是呢?我找別人幫我測試我的網頁,在 IE7 中一樣出現了之前的問題,為了解決這個問題,在網路上找尋相對應的方法,但在<a href="http://www.stillfar.com/blog/post/70.html">胡思乱想</a>的 Blog 中看到了這段話:<br />
<br />
<blockquote>『<span style="font-style: italic;">話說回來,IE7 的出現,又給網頁設計師們出了個難題,拋開 IE345,以往僅僅要顧及 IE6 和 Firefox 的差異就夠令人鬱悶的了,這又出現了 IE7。一直呼喊著標準啊標準啊,強悍的微軟告訴我們,他們家的 IE 就是標準,什麼 W3C,滾一邊去。</span>』</blockquote><br />
<br />
這讓我失去了為 IE7 修改錯誤的動力,就暫時先考量 IE6 和 Firefox 這兩大族群,對於其他不遵守標準的 IE 就暫時不理他吧!Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-20073991527614963882007-09-30T14:22:00.003+08:002009-04-10T19:47:49.489+08:00令人又愛又恨的『 推薦2.0 』在 AdSense 中的推薦功能有一個討厭的問題,就是顯示的廣告時常會消失,在網路上看了許多文章後,還是沒有具體的解決方法,除了用舊版本的廣告程式碼沒有其他的辦法了,我加了四個推薦連結,只有一個偶爾會顯示,我也嘗試過其他語言的廣告,但是一樣沒有任何廣告顯示。<br /><br />而且也沒有替代的廣告或圖片可以用,就整個空在那,使整個版面看起來怪怪的,在 Firefox 上到還好,只是少了個圖片而已,背景上並沒有什麼變化,但在 IE 上卻出顯了一個白底的方匡,整個版面的感覺就差很多。<br /><br />但是 AdSense 的『推薦2.0』給瀏覽者的親和力很高,而且廣告的圖片給人有專業的感覺,蠻適合拿來裝飾 Blog,可是這個裝飾品常常會消失,這真是一件麻煩的事。Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-48450682562752756012007-09-29T21:34:00.002+08:002009-04-10T19:47:59.327+08:00重新啟動 Linux今天把塵封已久的 Linux 系統啟動了,這台機器是使用 Intel Pentium 200MHz 的 CPU,主機板是 ASUS 的,這是我表哥給我的,不灌圖形介面的話其實他跑得還蠻順的,之前有灌過圖形介面,我光是開啟視窗就等很久,整台電腦只有慢而已。<br /><br />他已經有一年半沒開機了,剛開機時一切正常所有的服務都很 OK,這真是令我驚訝的事,原本對他已經沒什麼好期望的,看來早期 ASUS 的電腦還蠻耐用的,然後重新設定防火牆,由於第一次沒做好重開時設定就跑掉了,這次又再找更多的資料來看,所以防火牆的部分也 OK 了。<br /><br />開始上載之前寫的網頁,發生了 MySQL 無發連接的問題,在主機上連結沒什麼問題,SQL 指令也都正常,就是網頁連結無法執行,不知道是不是版本的問題,而且 PHP 載入的模組卻只有一個,之前在 Windows 也發生過版本的問題,那時候 Dreamweaver 8 就有顯示錯誤,但這次顯示正常連線,可是就是沒辦法連線,phpmyadmin 也無法正常連線,可以讀取資料庫的內容,但是其他的設定指令都不能運作,上網找了些方法都試過了,但還是不行,正在考慮要不要重灌。Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0