Archive

‘WebDesign’ 分類過的Archive

於網頁顯示特殊符號(Registered,copyright,trademark)

2010年3月24日 尚無評論

很少會用到一些特殊符號,剛好有需要去查了一下,所以整理出來,好讓下次又要用到時,可以快點查到,此外,也順便查了一下意思,有興趣的人請再延伸閱讀

©  © Copyright

® ®  Registered
®符號是Registered(即“註冊“)的簡稱,其代表已獲得註冊之意,其通常被標示於品牌的右上或右下方,藉此告知相關消費者與競爭同業,該
品牌已是註冊商標,如果他人使用相同或近似商標於相同或類似商品/服務上,商標專用權人將可對其提起商標侵權訴訟。

™ or  ™ TM (Trademark)
而TM則是Trademark(即“商標”)的簡稱,代表商標的意思,其通常亦被標示於品牌的右上或右下方,藉此告知相關消費者與競爭同業,該品牌
已被做為商標使用,而非一般商品名稱或描述性用語。雖然無論商標是否註冊皆可標示TM,但一般來說該符號大多標示在尚未獲得註冊之商標上。

參考資料:
商標標示®和TM有何不同?
HTML Special Characters

Categories: WebDesign Tags: , ,

showModalDialog 在同視窗轉到下一頁

2009年12月25日 尚無評論

平常很少用window.showModalDialog 來開啟視窗,
原因是他參數的傳遞及運用上,其實都蠻不順手的
不過因為window.open目前在使用上,九成九都會被瀏覽器擋住
所以還是只能轉用window.showModalDialog

先前如果使用window.showModalDialog 如果要到下一頁,而就要在<head> 標籤之中加上

<BASE target=”_self”>

不然就會另跳視窗開啟這連結;不過發現在使用javascript 的location.href 轉到下一頁時,
還是會另跳視窗,去查詢了一下是否有解法,才知在五六年前早就有解法
真是孤陋寡聞呀!!

只要有和小弟一樣的需求,可以改成用以下方式就可以在showModalDialog連到下一頁

  <script>  
  window.name=”__self”;  
  window.open(“yoururl”,”__self”)  
  </script>

而且很有趣的,這樣並不會被瀏覽器擋住,看來這問題是迎刃而解了

Categories: WebDesign Tags: ,

CSS 置中text-align: center 在Firefox無法作用

2009年12月10日 2 則評論

最近常在用CSS設定頁面
忽然發現一個很簡單的置中,在IE是正常的但竟然Firefox不支援

text-align: center;

不過想這種問題應該很多人都有解決方法了,去查了一下
找到自己覺得最好的解答,如下:

#center {
text-align: -moz-center;
!text-align: center;
}

這樣不管是IE或是Firefox都可以支援了!!
不知是哪一個瀏覽器沒照規格來~~@@

又在chrome試了一下~~不OK吶,目前找不到解法!!所以先hold住 有找到再補上囉!!

參考資訊:
text-align: center; not working in Firefox

Categories: WebDesign Tags: , ,

網頁表格隔行變色大整理

2009年8月12日 2 則評論

什麼是表格隔行變色呢?  看下圖就知道我要說的是什麼了!!

用戶插入圖片

整理目前在網路上針對網頁表格隔行變色的處理方式,用背景圖及一行一行設定的方法就不列入啦,其它大致如下:

CSS Expression

文字:color:expression(this.sourceIndex%2 ? '#ff0000':'#000000');
背景:background-color:expression(this.sourceIndex%2 ? '#ff0000':'#000000');

這是先前有在使用的方法,當初看上他是因為簡短的code就能達到該效果,不過後來才知CSS Expression並不是W3C標準的語法,只能在IE7以下使用,IE8 (微軟想開了,還是回歸標準了)及 FireFox都不支援,所以大家看看就好,還是不要用這個來處理!! 不是標準就是不會長長久久的。

CSS 定義

<style type=”text/css”><!–
#raw0 {background:#cccccc;}
#raw1 {background:#ecf6fc; }
–></style>
<!– 以下為html code–>
<table>
   <tr class=”raw0″>…
   <tr class=”raw1″>…
</table>

這雖然和一行一行寫顏色差不多,但至少他用了CSS 所以方便以後更換Style,所以還是介紹一下

CSS + Javascript

<style type=”text/css”><!–
#senfe {
   width: 300px;
   border-top: #000 1px solid;
   border-left: #000 1px solid;
}
#senfe td {
   border-right: #000 1px solid;
   border-bottom: #000 1px solid;
}
–></style>
<script language=”javascript”><!–
function senfe(o,a,b,c,d){
   var t=document.getElementById(o).getElementsByTagName(“tr”);
   for(var i=0;i<t.length;i++){
       t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
       t[i].onclick=function(){
           if(this.x!=”1″){
               this.x=”1″;//本來打算直接用背景色判斷,FF獲取到的背景是RGB值,不好判斷
               this.style.backgroundColor=d;
           }else{
               this.x=”0″;
               this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
           }
       }
       t[i].onmouseover=function(){
           if(this.x!=”1″)this.style.backgroundColor=c;
       }
       t[i].onmouseout=function(){
           if(this.x!=”1″)this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
       }
   }
}
//senfe(“表格名稱”,”奇數行背景”,”偶數行背景”,”鼠標經過背景”,”點擊後背景”);
senfe(“senfe”,”#fff”,”#ccc”,”#cfc”,”#f00″);

–></script>

這個方式不錯,只要載入javascript並執行一行即可達到,不過每頁都要載入是真的有點麻煩,但也只能這樣才能簡化針對Style寫的code

CSS + JQuery

<style type=”text/css”> /*注意選擇器的層疊關係*/
.stripe_tb th{background:#B5CBE6; color:#039; line-height:20px; height:30px}
.stripe_tb td{padding:6px 11px; border-bottom:1px solid #95bce2; vertical-align:top; text-align:center}
.stripe_tb td *{padding:6px 11px}
.stripe_tb tr.oddalt td{background:#cccccc} /*這行將給所有偶數行加上背景色*/
.stripe_tb tr.alt td{background:#ecf6fc} /*這行將給所有偶數行加上背景色*/
.stripe_tb tr.over td{background:#FEF3D1} /*這個將是鼠標高亮行的背景色*/
</style>

<
script type=text/javascript>
$(document).ready(function(){
$(.stripe_tb tr).mouseover(function(){ //如果鼠標移到class為stripe_tb的表格的tr上時,執行函數
$(this).addClass(over);}).mouseout(function(){ //給這行添加class值為over,並且當鼠標一出該行時執行函數
$(this).removeClass(over);}) //移除該行的class
$(.stripe_tb tr:odd).addClass(oddalt); //給class為stripe_tb的表格的奇數行添加class值為oddalt
$(.stripe_tb tr:even).addClass(alt); //給class為stripe_tb的表格的偶數行添加class值為alt
});
</script>

即然javascript可以做到,那JQuery有何做不到的,程式碼更減少了,所以如果本身系統已經使用JQuery了,可以考慮用這個方法

參考資料:
http://chinaz.com/Design/Pages/0Q23513H008.html
http://www.wowbox.com.tw/blog/article.asp?id=3077
http://www.cnblogs.com/css/archive/2008/07/23/1249622.html

好用的Flash Mp3 Player(可用javascript控制喔)

2009年1月7日 尚無評論

最近剛好要找一個Flash Mp3  Player,剛好看到niftyplayer,還不錯用
特別來介紹一下。

他的官方網站如下
http://www.varal.org/media/niftyplayer/

用戶插入圖片

目前最新版本到1.7,看來蠻陽春的,沒關係,因為我是想要隱藏播放器的
會選這套的重點是,就是看上他可以用javascript控制

因為只想做個Music On/Of的開關就好,簡單一點,不用播放器那麼佔空間
他官網介紹的很詳細,蠻容易使用的,所以不多說什麼啦,接下來只介紹在網頁上如何加上Music On /Off

先將flash及javascript放在你的網站,然後在你的網頁加上以下html語法:

Music
<span id=”m1″ style=”display:none”><a href=”javascript:music_play();” class=”style7″>On</a></span>
<span id=”m2″ style=”display:”><a href=”javascript:music_pause();” class=”style7″>Off</a><span>


然後在<head></head>之間加上javascript語法:

<script type=”text/javascript” language=”javascript” src=”niftyplayer.js”></script>
<script>
function music_pause() {
niftyplayer('niftyPlayer1').pause();
m1.style.display=””;
m2.style.display=”none”;
}

function music_play() {
niftyplayer('niftyPlayer1').play();
m1.style.display=”none”;
m2.style.display=””;
}
</script>


當然還有一個我就不說啦就是要把flash語法崁上去並設name為niftyPlayer1 (sample的語法貼上即可),如要隱藏就在height 及width 都設定為0就可以啦

這樣,你的網頁就有音樂播放功能啦

Categories: WebDesign Tags:
分頁: 上一頁 1 2 3 4 下一頁