最近文章
星期日 十一月 15, 2009
PNG去背與IE相容性問題
星期六 十一月 14, 2009
免費的3D迴轉Flash相簿（flShow）
星期五 十一月 13, 2009
網站圖示的製作方式
星期四 十一月 12, 2009
光箱特效（LightBox2）

最近迴響

PNG去背與IE相容性問題

在馬老師教Dreamweaver課程的時候，會稍微講解一下有關網頁可以置放的圖檔格式

總共有以下三種，當然也會簡單提這三種圖檔的格式特色：

JPEG：可容16,777,216（全彩）顏色的圖檔格式，可惜無法儲存去背格式的圖檔

GIF：最多只能存256色，可以儲存去背的格式

PNG：一樣為全彩的格式圖檔，也可以儲存去背格式的圖檔

所以綜合上述觀念，其實網頁中最優異的圖檔格式應該是PNG格式

但是現在在網頁上面使用PNG格式的圖檔就會有一些瀏覽器支援上的問題

詳細的情形請看下面的解釋吧～

在Dreamweaver中我們放入一個PNG去背圖（下圖左）與一個GIF去背圖（下圖右）

很明顯可以看出來GIF因為圖檔色彩數...等限制，其實去背的品質不太好

這樣的網頁若我們在瀏覽器預覽後，可以得到以下的結果：


IE7的瀏覽結果

IE6的預覽結果

我們會發現在IE6的瀏覽器中，似乎不能支援我們使用PNG格式的圖檔

但我們若是在同樣的網頁中，加入以下的語法後

在IE6的瀏覽器中，就可以正確無誤的看到去背後的PNG圖檔囉～

這樣一來我們就可以在網頁中放心使用去背品質較好的PNG囉～

改善IE6與PNG去背圖支援的語法：

<script language="javascript">
function correctPNG() {
 for(var i=0; i<document.images.length; i++) {
  var img = document.images[i]
  var imgName = img.src.toUpperCase()
  if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
   var imgID = (img.id) ? "id='" + img.id + "' " : ""
   var imgClass = (img.className) ? "class='" + img.className + "' " : ""
   var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
   var imgStyle = "display:inline-block;" + img.style.cssText
   if (img.align == "left") imgStyle = "float:left;" + imgStyle
   if (img.align == "right") imgStyle = "float:right;" + imgStyle
   if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
   var strNewHTML = "<span " + imgID + imgClass + imgTitle
   + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
   + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
   + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
   img.outerHTML = strNewHTML
   i = i-1
  }
 }
}
if (document.all) {
 window.attachEvent("onload", correctPNG);
}
</script>

Filed under 網頁設計 | 0 迴響 | Permalink funP udn Yahoo! Delicious Digg

免費的3D迴轉Flash相簿（flShow）

今天來介紹一個在網路上讓人免費下載和使用的3D迴轉Flash相簿，首先可以先來看看效果

在製作上是非常容易的，首先下載該網站製作好的檔案，在裡面有如下圖的幾個檔案

我們只要把想要放在相簿裡面的檔案，複製進入images的資料夾中

接下來打開default.xml，在該檔案中輸入如下圖的資訊

href：可以在雙引號中間輸入這張圖片的連結位置，網友點選該圖片後會啟動連結

target：超連結的目標視窗，若沒有切割頁框則可使用預設值即可

中間的部分請注意必須跟你圖檔的名稱相同即可（例：vplants10_001.jpg）

設定好XML檔後就可以預覽fullpage或intext頁面，如此就完成你的3D Flash相簿了～

其他詳細的說明，請至官方網站欣賞囉！

Filed under 網頁設計 | 0 迴響 | Permalink funP udn Yahoo! Delicious Digg

網站圖示的製作方式

剛剛好在留言板中有同學問到了「如何製作網站圖示」這樣的問題

今天就來教大家一下如何設計一個去背的網站圖示囉～首先來講一下什麼是網站圖示

當我們進入某些網站，會在IE的網址、網站名稱、我的最愛看到如下圖所示的圖示

至於這個圖形是如何設計的呢？其實我們可以先利用美工軟體做出自己想要的樣式

然後依照該美工軟體儲存去背檔案的方式，儲存該圖示為PNG圖檔
（每個美工軟體的方法都有所差異唷～圖檔格式說明可參考這篇文章）

圖檔大小建議作成正方形的圖檔（例如：100x100或50x50即可..）

接下來我們到ConvertIco.com這個網站將我們的圖檔轉換成去背的ICO圖檔

在Upload a PNG or ICO file的地方按瀏覽上傳自己製作的圖檔，按下轉換鈕

轉換完成後你會看到如下圖的畫面，在Click here to Download處按下右鍵／選擇另存目標

接下來在你想要出現圖示的網頁中插入以下語法：

<link rel="shortcut icon" type="image/x-icon" href="fav_icon.ico" />

註：fav_icon.ico為剛轉好的圖檔名稱

接下來把圖示檔與網頁檔儲存在相同的路徑中，上傳到你的網頁空間即可

註：本機預覽是看不到的唷～

以下就是上傳測試後的結果，我們成功囉！

Filed under 網頁設計 | 0 迴響 | Permalink funP udn Yahoo! Delicious Digg

光箱特效（LightBox2）

今天馬老師來介紹一個網頁上面的光箱特效（LightBox2）

在網頁上我們常常會製作一個小圖，點選之後可以連結到大圖，以往多半都用另開視窗的方式

但是這樣的做法比較不好看，這次的光箱特效就是來製做這樣連結的效果

如果還是搞不太清楚的話，剛好我這邊有一個範例網頁可讓大家先睹為快

進入頁面後可以點選下面有三個菜色的圖片，你就會發現這麼做實在比開啟視窗來的好看多了！

接下來就來講解一下製作方法，首先必須要下載幾個必備的資料檔（共有三個資料夾）

然後將他們複製到製作網頁的資料夾中，如下圖：

將下來製作兩張圖片（一張為小縮圖、一張則是此大張的圖片，可參考下圖）

接下來利用Dreamweaver將縮圖置放於頁面後，直接製作超連結到大圖即可

接下來將以下的語法新增餘網頁<head>....</head>內：

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

另外在超連結標籤內增加：「rel="lightbox[roadtrip]"」的語法即可

詳細可參照上圖，或是下載本範例的完整檔，也可以到官方網站參考更多的資料

Filed under 網頁設計 | 0 迴響 | Permalink funP udn Yahoo! Delicious Digg

電子郵件連結與Unicode的矛盾

在網頁中製作電子郵件連結的時候，可以在連結後面加上一些參數，例如說：subject、cc、body..

製作連結可以如右：mailto:ma@teacher.d2g.com?subject=網站來信

但是上過課的同學都知道，如果有製做這樣連結的頁面，必須要更改成Big5編碼才可以

只要是正確的Big5編碼網頁，電子郵件彈出後應該如下圖這樣：

一旦我們將網頁編碼方式更改成Unicode之後，所有內含中文的超連結都會有狀況

點選剛才的電子郵件連結後就會出現如下的E-Mail：

雖然目前網頁都建議使用Unicode來製作，但是我們做這樣的網頁時，就必需把編碼換成Big5才行

※註：使用Unicode製作網頁的好處可以參考維基百科的說明

那到底要如何在Unicode的網頁裡面又可以製作中文的電子郵件連結呢？請看如下的轉換方式：

首先，可以到馬老師製作轉換編碼的網頁，然後在上方的空格輸入你想要出現的中文字後按下轉換

按下轉換後可以看到下方會出現一些感覺像亂碼的文字，那個東西是一種叫做URL編碼的文字

接下來把該編碼文字複製下來，貼在網頁程式碼的部分，去取代原本的中文字

也可以順便注意一下網頁上方的編碼，範例中我的網頁雖然是utf-8（Unicode）

但是預覽後點選出來的電子郵件主旨中，也會是正確的中文唷～大家可以自己試試看囉～

Filed under 網頁設計 | 0 迴響 | Permalink funP udn Yahoo! Delicious Digg

jQuery-wSlide

馬老師先跟大家說明一下，因為在課堂中教到LightBox的技巧

所以就順便提了jQuery這樣的名詞，沒想到引起一些同學的迴響

所以特別開是製作一些有關jQuery的教學文章，至於什麼是jQuery呢？

我想這個說來話長，不如看看維基百科和這邊吧～

如果還是不懂的話再請提問囉～以下就來看看我今天要介紹的一個jQuery元件wSlide

首先大家可以到官方網站或是我做好的範例頁面，看一下製作好的效果，至於怎麼製作呢？

首先請下載兩個js檔：jquery-latest.pack.js、jquery.wslide.js

再將這兩個檔案和你的網頁存放在同一資料夾中

接下來在你的網頁中<head>...</head>區塊插入以下的語法：

<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.wslide.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
        $("#ma_liste").wslide({
                width: 400,
                height: 333,
                horiz: true
        });
});
</script>

如下圖所示：

接下來在內容區塊<body>...</body>插入以下的語法：

<ul id="ma_liste">
        <li>Lorem ipsum ad delenit omittam his, habeo justo ad sea! Eu mel volumus noluisse disputando! Cu prompta moderatius sit? Et iuvaret suavitate vix, ne eum audiam luptatum, nam in epicuri adipisci scripserit.</li>
        <li>His ad copiosae erroribus, has eu mucius cotidieque concludaturque. No appareat iracundia complectitur eum, pri an euismod corrumpit, zzril animal mnesarchum id sed. Ex duis erat persius est, ne vis assum timeam tamquam, rebum quaeque civibus in qui. Populo animal dissentiunt in eos. Ludus molestie ut vix, eum eros lobortis id.</li>
        <li>Quodsi dissentiunt cu eos, duo cu clita veritus, mei quot velit scriptorem ea? At kasd dolorum facilisi per, te discere inermis patrioque duo. Integre nominati sapientem has et? Ad erat essent ius, pro quando menandri definitiones te?</li>
        <li>Indoctum moderatius cum te? In dictas hendrerit eam. Vel meliore fuisset perpetua et? Nibh debitis erroribus mea te, sed cu virtute volutpat periculis. Omnium integre philosophia ut quo, et detracto honestatis sed.</li>
        <li>In eum natum facete, in eum vero vidit consectetuer. Alii oportere signiferumque id nam, mandamus recteque pro at? Eu perpetua sadipscing pro, pro omittam invenire ex. Sit no nemore omnium accommodare, sit in idque inani! Ut quo ubique dictas nostrud. Eum at quis pericula repudiandae, usu ne ornatus explicari vulputate.</li>
        <li>Simul tantas nostrum at has, his id postulant cotidieque, in eum omnium mediocrem moderatius! Pro oratio scriptorem ei, causae accusata est te. Ex quod nonummy has, usu et omnium probatus deterruisset! Ea impetus percipit takimata has. No qui probo dolore convenire. Et conceptam intellegat sententiae sit, has ex tota nobis.</li>
        <li>Nostrum volutpat cu ius. Sed affert aliquyam ea? An quo verear accumsan voluptaria. Id graeci audire sit.</li>
        <li>Pri petentium definitiones ad? Utinam delenit eos ex? Vim ea discere officiis conclusionemque, ad his lorem ponderum praesent? Ut vim consul timeam iracundia, mel civibus posidonium et, nam ea audire evertitur. An docendi pertinacia eum, utroque officiis his ne?</li>
</ul>

如下圖所示：

最後就可以預覽你的網頁效果了，畫面中的各項元素可以透過CSS來制訂樣式

如果想要有更多的特效變化，可以參考官方網站的說明唷～

Filed under 網頁設計 | 0 迴響 | Permalink funP udn Yahoo! Delicious Digg