2015-10-19

HTML程式碼:正常顯示<、>、&、" 及 空格

應該很多人有此困擾,不論在寫部落格或是編寫程式碼時,
遇到左右括弧、雙引號及空格等等,都無法正常顯示,

馬上為您解答如下:

2015-10-15

響應式網站設計怎麼做?用Media Queries或Javascript幫你解決!

近年越來越重視「響應式網站設計」,先定義一下何謂響應式網站設計:響應式網頁設計(英語:Responsive Web Design,通常縮寫為RWD),又稱為自適應網頁設計、回應式網頁設計。是一種網頁技術,該設計可使網站在多種瀏覽裝置(電腦、行動裝置iPhone、iPad等等)呈現最適合閱讀及使用的內容。

而在設計網站時該怎麼實現呢?實務上有兩種方法可以做到:
1. 使用 CSS Media Queries,依照「不同螢幕寬度」設定不同的 CSS,呈現的內容也就會不一樣。
2. 在 Html 裡加入 javascript,判斷「只要是行動裝置」就直接跳轉到「手機版網站」。

圖片連續跑馬燈製作使用 javascript 之解法

不久前在使用 html5 與 css 製作圖片跑馬燈時遇到一個問題:
「網頁載入時是空白的,接著才跑出第一張,跑到最後一張時接著又要空白一次」

有沒有辦法製作出「圖片連續跑馬燈」的效果,答案是:「有的!」
用 javascript 即可實現此效果:

2015-10-13

滑鼠滑過物件發出短而急促的聲音

不論你用 html5 在開發遊戲、活動網頁或是具多媒體功能的影音網站,很可能會面臨一個問題:「滑鼠移到一個物件上時,該如何發出像是鏘鏘鏘那樣短而急促的聲音?」

我之前嘗試過用 audio 的 tag 但是成效不彰,網路速度一慢會很延遲,約莫0.5秒才會跑出聲音來,達不到我們要的「立即發出聲音」的效果。

用中文搜尋類似問題但似乎找不到相關文章,到 Stackoverflow 上找到一篇很棒的解答,他的解法如下:

var snd = new Audio("file.wav");
snd.play();

以 javascript 呼叫這個 audio API 來用,要滑過時播放聲音(onMouseover),或是點一下播放聲音(onClick),都可以自由應用。

參考網址如下: http://stackoverflow.com/questions/1933969/sound-effects-in-javascript-html5

希望能把更多遇到的網頁技術問題打成文章,讓更多朋友更容易找到相關知識,一起加油學知識!