早期網路上常見的輪播式廣告大多是由 Flash 所完成,但近年來行動裝置的盛行再加上 IOS 不支援 Flash 以及 SEO 極差的情況下,網頁設計師紛紛向 Javascript 、 jQuery 來朝聖。用 Javascript 、 jQuery 來動畫製作效果不僅能排除前面所敘述的問題,更能相容於各家的瀏覽器。以未來整體趨勢來說,撰寫 Javascript 、 jQuery 將是一般網頁設計師所必備的基本技術。
對於現今業界上所看到的情況更是如此,一群 Designer 紛紛向此領域來靠攏;在求職時,公司對於 Designer 的求才條件更是將此技術列為評量之一。因此,未來將要進入此領域的各位,你們是不是要先準備好呢?俗話說~機會是留給準備好的人,不要淪落為「書到用時方恨少」的窘境。
DFUNS 的工作筆記
分享一些網站前端開發與使用者經驗的教學角落
Dreamweaver 行為 - 調換影像
在使用網頁的經驗中,大家是否有遇過影像太小看不到細節的狀況?若是我們可以使用滑鼠滑入或點擊該影像,能在另一個區域中檢視到放大的影像,那應該是比較妥當的呈現方式!
一般的購物網站都有製作此機制,否則,使用者在購物中都只能看到小圖而看不到細節的顯示時,難免會對該商品的認知、品質產生懷疑、不安全感而不敢購買,自然而然地便損失了商機!
若我們製作此效果該用什麼樣方式來做呢?答案是 Javascript 、 jQuery ,誠如前篇所描述的一樣,若是不會撰寫 Javascript 不就挫咧蛋!現在各位只要會使用 Dreamweaver 行為便可輕易地完成此效果,在 Dreamweaver 中提供了許多的行為功能讓各位去點選使用,點選後即會幫我們產生 Javascript 程式碼,所以各位也不必擔心不會撰寫 Javascript 語法的問題。
一般的購物網站都有製作此機制,否則,使用者在購物中都只能看到小圖而看不到細節的顯示時,難免會對該商品的認知、品質產生懷疑、不安全感而不敢購買,自然而然地便損失了商機!
若我們製作此效果該用什麼樣方式來做呢?答案是 Javascript 、 jQuery ,誠如前篇所描述的一樣,若是不會撰寫 Javascript 不就挫咧蛋!現在各位只要會使用 Dreamweaver 行為便可輕易地完成此效果,在 Dreamweaver 中提供了許多的行為功能讓各位去點選使用,點選後即會幫我們產生 Javascript 程式碼,所以各位也不必擔心不會撰寫 Javascript 語法的問題。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCQwxGQGM1QAJLf6YkWLoUBgLjqFwz-jrFE-3V6OYkCMOcoq4iFI7GfKddTVEJbgXPvbSU2-pW1g9JrSSej9MD9g3QyKESH5Qqh2m7wcmqcySy-CiJVrXsoLKOEOnn6rM7jmVxgEslHjg/s1600/01.jpg)
Dreamweaver 行為 - 設定容器文字
若各位要在網頁上與使用者做個小小的提示互動~沒有第二句話,就直接撰寫 Javascript 吧!
誠如前篇所描述的一樣,若是不會撰寫 Javascript 不就挫咧蛋!剛好遇到某些時候業務急著要、上司急著要、老闆急著要、客戶急著要、媽媽急著要(媽媽來亂的),怎麼辦?雙手一攤,到時再說吧!在工作職場上可不容許這樣的情況發生,若是做不出來總要有些補救方法吧!
現在各位只要會使用 Dreamweaver 行為便可輕易地完成此效果,在 Dreamweaver 中提供了許多的行為功能讓各位去點選使用,點選後即會幫我們產生 Javascript 程式碼,所以各位也不必擔心不會撰寫 Javascript 語法的問題。
誠如前篇所描述的一樣,若是不會撰寫 Javascript 不就挫咧蛋!剛好遇到某些時候業務急著要、上司急著要、老闆急著要、客戶急著要、媽媽急著要(媽媽來亂的),怎麼辦?雙手一攤,到時再說吧!在工作職場上可不容許這樣的情況發生,若是做不出來總要有些補救方法吧!
現在各位只要會使用 Dreamweaver 行為便可輕易地完成此效果,在 Dreamweaver 中提供了許多的行為功能讓各位去點選使用,點選後即會幫我們產生 Javascript 程式碼,所以各位也不必擔心不會撰寫 Javascript 語法的問題。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSKLg8_hqRE37rl05cfUbB_0YUhwyVcxexTHnJ94sccoBzUsroPJlMsjfn6sJlutKQUWTYe4akLo5W6RSXfTTXMP0PXAZ-gFvNMT-50t8MZFDdZbkxISVeAIX8oUjR3r_tP8ooho9Q2-Y/s1600/01.jpg)
Dreamweaver 行為 - 互動式更改文字大小
2013-08-09
作者:
Away
沒有留言
:
標籤:
行為,
更改屬性,
教學記事,
Behavior,
Change Property,
Dw - Dreamweaver,
Javascript
![](http://img2.blogblog.com/img/icon18_edit_allbkg.gif)
各位有在上網時發現到某些網站內的文字內容過小而導致不易閱讀的情況嗎?遇到此情形,一般人通常都會使用 Browser 來縮放文字或畫面。但是,連結至其他網頁後,如果該網站在還沒放大時的文字顯示是合宜一般人的閱讀時,往往會因為之前的放大設定而套用到目前網頁中,此時就要再做縮小顯示。這樣一來一往的放大又縮小的確挺費時地。
因此,大部分的入口型網站都有製作一些使用機制,讓使用者依個人需求去選擇要顯示的文字大小,這些基本上都是使用 Javascript 或 jQuery 所撰寫而成的,若不會撰寫前面敘述兩種語法的人當然無法完成這種互動式更改文字。
現在各位只要會使用 Dreamweaver 行為便可輕易地完成此效果,在 Dreamweaver 中提供了許多的行為功能讓各位去點選使用,點選後即會幫我們產生 Javascript 程式碼,所以各位也不必擔心不會撰寫 Javascript 語法的問題。
各位可點選下方的 Demo 連結以檢視成品展示。
因此,大部分的入口型網站都有製作一些使用機制,讓使用者依個人需求去選擇要顯示的文字大小,這些基本上都是使用 Javascript 或 jQuery 所撰寫而成的,若不會撰寫前面敘述兩種語法的人當然無法完成這種互動式更改文字。
現在各位只要會使用 Dreamweaver 行為便可輕易地完成此效果,在 Dreamweaver 中提供了許多的行為功能讓各位去點選使用,點選後即會幫我們產生 Javascript 程式碼,所以各位也不必擔心不會撰寫 Javascript 語法的問題。
各位可點選下方的 Demo 連結以檢視成品展示。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQcLJX-UAnhXFgAxsz6OlSJjawqJNQq9oG_uCs-3bZM9A3qYiz6r8i_pCaz3RazRmfen6A0CHV7JHr74H51AjHbwlg_okxUoRKU5r_FTZQhjwAE-f-SkWh8w0M4FMo0MKlcLDOrKXZDQ4/s1600/01.jpg)
CSS3 Transform 變形效果 - 3D 篇
再來篇差不多的文章,同樣是換湯不換藥~當然還是要為各位解說一下 CSS3 Transform 的 3D 基本觀念。首先,我要先釐清一下軸線的方向:
哇~真是太神奇了!在高興的同時別忘了~並不是所有的瀏覽器都有支援!請各位還是以先進的瀏覽器以進行檢視吧!
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN6azBhtWNG91uRASHPmVwTuD80gooUl2x0VF_JzcKZHx4-3wF7EjYDlCYBEznEk3JPtCURZSGWA9u-8xkJ5CivevOgsu1UnGxygpwuXLrXTc-a0X1kQwIax__ddyq6X8-vwOeJkMWKJY/s1600/01.jpg)
Google Chrome | Safari | Firefox | IE | Opera |
---|---|---|---|---|
12.0 | 4.0 | 10.0 | 10.0 | 12.0 |
CSS3 Transform 變形效果 - 2D 篇
嗯~就叫它「變形效果」吧!
在 CSS3 中再加入了 Transform 效果囉!此屬性可產生一些簡單的 2D 變形如縮放、旋轉、傾斜。此外,更可產生 3D 的變形,這...真的是太強悍啦!
在高興的同時別忘了~並不是所有的瀏覽器都有支援!請各位還是以先進的瀏覽器以進行檢視吧!
在 CSS3 中再加入了 Transform 效果囉!此屬性可產生一些簡單的 2D 變形如縮放、旋轉、傾斜。此外,更可產生 3D 的變形,這...真的是太強悍啦!
在高興的同時別忘了~並不是所有的瀏覽器都有支援!請各位還是以先進的瀏覽器以進行檢視吧!
Google Chrome | Safari | Firefox | IE | Opera |
---|---|---|---|---|
1.0 | 3.2 | 3.5 | 9.0 | 10.5 |
CSS3 Transition 轉場動畫應用實例 - 滑動廣告篇
再來一篇換湯不換藥的範例,我們稱它為滑動廣告!其觀念是與前篇一模一樣,僅僅是 HTML 結構不一樣而已!請各位仔細聽我說來...
若還不熟悉請見以下兩篇文章~
若還不熟悉請見以下兩篇文章~
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivdlR8pgBjnAiq800mjN2V6O4eH9t9gHedaIiLfQlVhXeKx_LuFoLb2IHOHCeqQY4pDv1SPSTYSSP_u5aeE6yWlYvoiCqjlH0XEQKbpeTnL84fEBZBT5yhPiIyus-UuzYxnCz7TuTkUCw/s1600/01.jpg)
CSS3 Transition 轉場動畫應用實例 - 滑動選單篇
不知各位有沒有仔細研讀 淺談 CSS3 Transition 轉場動畫效果 的文章內容呢?如果沒有仔細研讀的話,請趕快回去複習一番!否則,會不知道接下來我要做什麼喔!?
接下來,要教各位利用 CSS3 Transition 來製作出網路上常見的滑動選單效果。各位可以點選下方的 Demo 連結來檢視一下效果的呈現!( 請各位還是要注意一下前篇提供給各位的各家瀏覽器支援度 )
接下來,要教各位利用 CSS3 Transition 來製作出網路上常見的滑動選單效果。各位可以點選下方的 Demo 連結來檢視一下效果的呈現!( 請各位還是要注意一下前篇提供給各位的各家瀏覽器支援度 )
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJQEuFDOivxNy7pZUmyhxJ4zXtDbJmBv9jujeitq3jPdErA_D_VYSVhrAxTOthwzvBViNuAhbhOJmlPljFPKLNFtDfX638x17w8qSrEk-wc7X9VtusziapJ87LomlJBn3xSsUwdtvg8uU/s1600/05.jpg)
淺談 CSS3 Transition 轉場動畫效果
哇... CSS3 出現轉場效果了耶!也就是俗稱的動畫效果~讓您的滑入( :hover )不再是死板板的變化了!不過,還是請各位不要使用腦殘的 IE 來觀看喔!否則的話,是看不到 CSS3 Transition 的轉場動畫效果喔!以下幫各位整理一下瀏覽器的支援性~
公司網站的七大錯誤
在這個網路時代,擁有一個網站能為公司錦上添花,提升公司的能見度與資訊傳遞的範圍,然而錯誤的網頁設計卻可能造成反效果。公司雜誌(Inc.)訪問了六位頂尖設計師和創意總監,將這些專家深痛惡絕的設計元素整理成七大項。且讓我們聽聽這七大罪惡是什麼。
訂閱:
文章
(
Atom
)