WDH2O

分享一些網站前端開發與使用者經驗的教學角落

淺談 HTML5

HTML 自 1999 年發佈 4.0 版以來,以為就可以滿足未來的各種網頁內容的需求,隨著網路應用程式的發展,有越來越多的網站應用程式需求已超出 HTML 格式所能支援的範疇,甚至使用者需為特定功能額外安裝擴充元件,例如需用 Flash 格式播放的影音內容。

Dreamweaver – Spry 選單列

Dreamweaver 中的 Spry 是以 HTML、Javascript、CSS 三種語法撰寫而成的互動式元素,讓某些不會撰寫程式語法的人也能夠輕易地做出效果性十足的互動式網頁。在 Spry 中的選單列、摺疊式面版、標籤面板、可收合面板、工具提示等,都只需簡單幾個步驟,即可由 Dreamweaver 透過內建的 Spry 組件來完成且修改容易。

修正 iPhone 手機旋轉後畫面會放大的問題

續前篇「使用 Veiwport 對於行動裝置的影響」所衍生出來的問題。完成了設定 width=device-width 使各廠牌手機的可視寬度與整個頁面寬度相同固然可喜可賀,看起來很正常,沒有什麼異狀呀!也達到我們想要讓使用者看到的結果。

Dreamweaver 行為 – 設定容器文字

誠如前篇所描述的一樣,若是不會撰寫 Javascript 不就挫咧蛋!剛好遇到某些時候業務急著要、上司急著要、老闆急著要、客戶急著要、媽媽急著要(媽媽來亂的),怎麼辦?雙手一攤,到時再說吧!在工作職場上可不容許這樣的情況發生,若是做不出來總要有些補救方法吧!

Dreamweaver 行為 – 顯示隱藏元素

延續前篇「Dreamweaver 行為 – 調換影像」的呈現效果,這次我們使用的方法是使用「顯示隱藏元素」,此方式可在 AP Div 中加入所需之文字或其他 HTML 元素,若是使用 Dreamweaver 行為中的調換影像則無法做到!請各位詳細看 Away 的解說~

Dreamweaver 行為 – 調換影像

在使用網頁的經驗中,大家是否有遇過影像太小看不到細節的狀況?若是我們可以使用滑鼠滑入或點擊該影像,能在另一個區域中檢視到放大的影像,那應該是比較妥當的呈現方式!一般的購物網站都有製作此機制,否則,使用者在購物中都只能看到小圖而看不到細節的顯示時,難免會對該商品的認知、品質產生懷疑、不安全感而不敢購買,自然而然地便損失了商機!

Dreamweaver 行為 – 互動式更改文字大小

大部分的入口型網站都有製作一些使用機制,讓使用者依個人需求去選擇要顯示的文字大小,這些基本上都是使用 Javascript 或 jQuery 所撰寫而成的,若不會撰寫 Javascript 語法的人當然無法完成這種互動式更改文字。

使用 Viewport 對於行動裝置的影響

隨著近年來行動裝置的普及化,使用行動裝置上網的人口數日益增加,再加上各家廠商所推出的商品尺寸不依,而導致使用 Mobile Browser 閱覽網頁時亦產生了許多問題。