dfuns.idv.tw

dfuns.blogspot.com

DFUNS 的工作筆記: CSS3 Transition 轉場動畫應用實例 - 滑動選單篇

http://dfuns.blogspot.com/2013/08/css3-transition_5.html

CSS3 Transition 轉場動畫應用實例 - 滑動選單篇. 不知各位有沒有仔細研讀 淺談 CSS3 Transition 轉場動畫效果. 的文章內容呢？如果沒有仔細研讀的話，請趕快回去複習一番！否則，會不知道接下來我要做什麼喔！？ 接下來，要教各位利用 CSS3 Transition 來製作出網路上常見的滑動選單效果。各位可以點選下方的 Demo 連結來檢視一下效果的呈現！( 請各位還是要注意一下前篇提供給各位的各家瀏覽器支援度 ). 各位只要釐清兩種不同狀態即可，分別為一般狀態，如下圖左；當滑鼠滑入到連結區的狀態，如下圖右。 就是在滑入的狀態時， a 區塊的 margin-top 的屬性值設定為 -41 px。 接下來，我們就來看一下 CSS3 coding ( 如果以下的解說您看不懂，建議您要再多研習一下 CSS ，因為此範例只為 CSS3 Transition 來進行解說，我們不會再講解基礎的 CSS 觀念)。 載入畫面時的一般狀態，其 CSS 設定如下:. 再來加上擬類別的( :hover )狀態，並設定其屬性值即可完成。 可降低對伺服器的 Request 。

dfuns.blogspot.com

DFUNS 的工作筆記: Dreamweaver 行為 - 設定容器文字

http://dfuns.blogspot.com/2013/08/dreamweaver_12.html

Dreamweaver 行為 - 設定容器文字. 若各位要在網頁上與使用者做個小小的提示互動～沒有第二句話，就直接撰寫 Javascript 吧！ 誠如前篇所描述的一樣，若是不會撰寫 Javascript 不就挫咧蛋！剛好遇到某些時候業務急著要、上司急著要、老闆急著要、客戶急著要、媽媽急著要（媽媽來亂的），怎麼辦？雙手一攤，到時再說吧！在工作職場上可不容許這樣的情況發生，若是做不出來總要有些補救方法吧！ 現在各位只要會使用 Dreamweaver 行為便可輕易地完成此效果，在 Dreamweaver 中提供了許多的行為功能讓各位去點選使用，點選後即會幫我們產生 Javascript 程式碼，所以各位也不必擔心不會撰寫 Javascript 語法的問題。 各位可點選下方的 Demo 連結以檢視成品展示。（將游標移至下方的五張縮圖中）. 接下來，我們就開始使用 Dreamweaver 行為來製作我們所需要的提示文字。 在我們的教學過程中常常會碰到 " 觸發對象 " 設定錯誤這類的問題，所以，請在使用行為時遵循下面幾個步驟，否則在控制對象時會設定錯誤喔！ 容器：div inner。

dfuns.blogspot.com

DFUNS 的工作筆記: Calendar

http://dfuns.blogspot.com/p/blog-page.html

訂閱： 文章 ( Atom ). Away 範本圖片創作者： Airyelf.

dfuns.blogspot.com

DFUNS 的工作筆記: Dreamweaver 行為 - 調換影像

http://dfuns.blogspot.com/2013/08/dreamweaver_13.html

Dreamweaver 行為 - 調換影像. 在使用網頁的經驗中，大家是否有遇過影像太小看不到細節的狀況？若是我們可以使用滑鼠滑入或點擊該影像，能在另一個區域中檢視到放大的影像，那應該是比較妥當的呈現方式！ 一般的購物網站都有製作此機制，否則，使用者在購物中都只能看到小圖而看不到細節的顯示時，難免會對該商品的認知、品質產生懷疑、不安全感而不敢購買，自然而然地便損失了商機！ 若我們製作此效果該用什麼樣方式來做呢？答案是 Javascript 、 jQuery ，誠如前篇所描述的一樣，若是不會撰寫 Javascript 不就挫咧蛋！現在各位只要會使用 Dreamweaver 行為便可輕易地完成此效果，在 Dreamweaver 中提供了許多的行為功能讓各位去點選使用，點選後即會幫我們產生 Javascript 程式碼，所以各位也不必擔心不會撰寫 Javascript 語法的問題。 各位可點選下方的 Demo 連結以檢視成品展示。 接下來，我們就開始使用 Dreamweaver 行為來製作我們所需要的調換影像。 請為元素加上 id 以便 Javascript 可以尋找到其 id 並予以控制。

wdh2o.com

WDH2O – Dreamweaver 行為 – 設定容器文字

http://www.wdh2o.com/dreamweaver-行為-設定容器文字.html

Dreamweaver 行為 – 設定容器文字. 若各位要在網頁上與使用者做個小小的提示互動 沒有第二句話，就直接撰寫 Javascript 吧. 誠如前篇所描述的一樣，若是不會撰寫 Javascript 不就挫咧蛋 剛好遇到某些時候業務急著要、上司急著要、老闆急著要、客戶急著要、媽媽急著要 媽媽來亂的 ，怎麼辦 雙手一攤，到時再說吧 在工作職場上可不容許這樣的情況發生，若是做不出來總要有些補救方法吧. 現在各位只要會使用 Dreamweaver 行為便可輕易地完成此效果，在 Dreamweaver 中提供了許多的行為功能讓各位去點選使用，點選後即會幫我們產生 Javascript 程式碼，所以各位也不必擔心不會撰寫 Javascript 語法的問題。 在我們的教學過程中常常會碰到 " 觸發對象 " 設定錯誤這類的問題，所以，請在使用行為時遵循下面幾個步驟，否則在控制對象時會設定錯誤喔. 請為元素加上 id 以便 Javascript 可以尋找到其 id 並予以控制。 請為元素加上 id 以便 Javascript 可以尋找到其 id 並予以控制. 請各位依上圖的標示為 Div 標籤加上 id。

wdh2o.com

WDH2O – Illustrator – 摺紙效果

http://www.wdh2o.com/illustrator-摺紙效果.html

Illustrator – 摺紙效果. 在 Illustrator 中一定要會用鋼筆工具、路徑管理員…才能畫出好看的作品嗎 答案是否的，只要我們充分使用色彩的明暗與物件的排列、堆疊一樣可以畫出令人驚豔的作品出來。 我們幫各位想個最笨的方法 那就是 拿張紙來剪一剪、摺一摺，看著摺好的紙張來當做參考這樣總可以了吧 不管您用什麼方法 只要能參考就好了。 請隨意開啟一個 RGB 色彩模式文件，並利用 多邊形工具 以完成下圖造型。 若遇到物件上、下順序的衝突，請進行 物件 排列順序 來控制物件的深度，亦可使用 右鍵 排列順序。 使用 Illustrator 中的 HSB 顏色模式調整色彩的明暗以達成立體的效果呈現。 一般使用者對於 RGB 模式進行調色或許會有陌生的感覺，故在此我們建議可將調色模式改為 HSB 較易於初學者的學習。 擔任 Front End Web Designer，執掌公司對外的產品，如專案的規劃、風格、UX.等。 Ingress 勳章篇 – Guardian. Ingress Weapon – Xmp Burster. Dreamweaver – Spry 選單列.

wdh2o.com

WDH2O – 使用 Veiwport 對於行動裝置的影響

http://www.wdh2o.com/使用-veiwport-對於行動裝置的影響.html

隨著近年來行動裝置的普及化，使用行動裝置上網的人口數日益增加，再加上各家廠商所推出的商品尺寸不依，而導致使用 Mobile Browser 閱覽網頁時亦產生了許多問題。 由於行動裝置上所支援像素較小的關係，因此 W3C 制定了縮放 Viewport 的技術。 簡單地說，原本以螢幕閱覽為主的網頁都是寬度 900px 或 900px 以上所設計，若要在行動裝置 320px * 480px 的瀏覽器上顯示網頁的全景就會覺得畫面太小而將畫面放大 如下圖左 若我們將 Viewport 技術加入後，就可以讓 Mobile Browser 自動判別該裝置所支援的最適宜瀏覽寬度 如下圖右。 Width=device-width 是為了讓整個頁面寬度與手機可視寬度相同，如此就可以簡單相容於不同機型螢幕大小，如果這邊 width 沒有設定的話，就會依照 CSS 給予的 width 當作預設值，這樣寫 CSS 時就能放心的把版面寬度設為100%。 Initial-scale=1.0 設定畫面的初始縮放比例為 100%。 Width=device-width, initial-scale=1.0".

wdh2o.com

WDH2O – Illustrator CS6 新功能介紹

http://www.wdh2o.com/illustrator-cs6-新功能介紹.html

Adobe Illustrator CS6 已經問世一段時間了，由於之前過於忙碌而沒時間研究，再加上 Adobe 所舉辦的新功能發表會沒參加，而導致 Illustrator CS6 新功能尚未研究。 雖然說只要搜尋一下就可以找到一脫拉庫的資訊，但 Away 還是覺得自己測一下比較保險 再加上職場的需求，更需要去親身體驗一下 Illustrator CS6 新功能。 當然 在研究之前總要有些依據吧 於是 Away 就到 Adobe 官方網站去找出它所羅列出來的 Illustrator CS6 新功能清單來當作準備方向。 不知道這些清單是否就是 Illustrator CS6 全部的新功能大綱 目前只能憑這些資訊來研究了 至於發現還有其他新功能的話，那就留到之後再來補充吧 (如果還有時間的話). 以下為 Illustrator CS6 新功能大綱. 僅限 Adobe Creative Cloud 使用. 另外，在測試 Illustrator CS6 新功能的過程中，如果有些太芭辣的功能，Away 不免也會詌譙一下 請各位多多包含 廢話不多說 請各閱讀以下 Illustrator CS6 新功能的介紹.

dfuns.blogspot.com

DFUNS 的工作筆記: Dreamweaver 行為 - 互動式更改文字大小

http://dfuns.blogspot.com/2013/08/dreamweaver.html

Dreamweaver 行為 - 互動式更改文字大小. 各位有在上網時發現到某些網站內的文字內容過小而導致不易閱讀的情況嗎？遇到此情形，一般人通常都會使用 Browser 來縮放文字或畫面。但是，連結至其他網頁後，如果該網站在還沒放大時的文字顯示是合宜一般人的閱讀時，往往會因為之前的放大設定而套用到目前網頁中，此時就要再做縮小顯示。這樣一來一往的放大又縮小的確挺費時地。 因此，大部分的入口型網站都有製作一些使用機制，讓使用者依個人需求去選擇要顯示的文字大小，這些基本上都是使用 Javascript 或 jQuery 所撰寫而成的，若不會撰寫前面敘述兩種語法的人當然無法完成這種互動式更改文字。 現在各位只要會使用 Dreamweaver 行為便可輕易地完成此效果，在 Dreamweaver 中提供了許多的行為功能讓各位去點選使用，點選後即會幫我們產生 Javascript 程式碼，所以各位也不必擔心不會撰寫 Javascript 語法的問題。 各位可點選下方的 Demo 連結以檢視成品展示。 以下提供幾個相關的網站，都有使用到相關的技術，各位可以去看看喔！ 請選取 li#small 標籤。