可快速加入包含多樣自動影像播放效果，準備好與要加入內容區相同尺寸的多張影像即可。

STEP1.
開啟範例練習檔dw09.html與dw09-jQueryCycle.html， 在dw09.html內刪除原內容區影像。

再至dw09-jQueryCycle.html內直接複選並貼入所需 CSS 與

藝文

創作

觀點

藉由Animate CC製作網頁上的動畫，並發佈成HTML5+CANVAS+JAVASCRIPT格式，已是最有效率設計製作專業網頁動畫效果的方式，筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧，歡迎一起讓網頁上的內容動起來!

哩老師的沙龍

jQuery cycle 影像自動播放效果

A.自訂編號清單
STEP1.
首先設定li基本屬性內容，再利用counter-increment: title1; //新增一自訂增加編號計數依據。

再藉由::before加入content:搭配【list-style-type】的值配合字串設計出中文項目符號。 如// content:"第"c

職場產業

僞元素content 插入其他ICON與文字符號

甚麼是 CSS 的偽元素 ?看到「偽」這個字就可以猜想的出來，偽元素就表示這個元素是假的、不存在的、不真實的。他不像,,…這些元素，只要打在 HTML 文件裡，就可以在瀏覽器看到他們，但是偽元素不同，就算你在HTML文件輸入或是… 瀏覽器也不會理你的，而是要在CSS內加入設定的。
因此簡單來說，當跟

文化生活

甚麼是偽元素 (pseudo-element)

當跟 CSS 選取器匹配的元素底下的內容要做些特殊處理時，就可以利用偽元素來幫我們做到一些效果，如邊框與背景圖。其中【::before】 在元素之前插入某些內容與【::after】在元素之後插入某些內容，在進階 CSS 效果中算是很特別的，而且製作 RWD 頁面上效果時也常可以用到。
首先新增類別【

僞元素彩色多層邊框

內頁框來表現網站內頁，最適合的就屬單欄式的頁面設計，可在不捲動到頁面內容的狀態下， 只在內容區局部捲動捲軸瀏覽內容，讓網站內頁有不一樣的表現方式。
A.建構初始頁面
STEP1.
開啟「dw03.psd」為預先設計與切割完成的畫面，其中切片編號11 的範例要加入內嵌頁框內容，該區域內容可以捲動瀏覽。

單欄式內頁框版面與頁面連結

首先由標籤加入類別ribbon，為設定中間長方形尺寸與背景色，寬度為%單位，加上最小寬度250px，避免文字換行導致尺寸變動。

加入由類別ribbon所延伸的before與after，設定出左右二側的魚尾三角形，可調整尺寸、位置與顏色。

最後加上暗色陰影三角形，讓彩帶左右二側有陰影的表現，內部的

僞元素CSS彩帶

此擴充元件提供圖片另外一種瀏覽的方式，即是以滑鼠移動檢視局部放大的瀏覽效果，只要準備小圖與放大圖，即可快速加入此效果於頁面上。

STEP1.
開啟範例練習檔dw08.html，再新增一空白檔案為 dw08-iframe.html，為要插入『jqzoom』元件。直接由dw08-jqzoom.html

jqzoom 局部放大檢視影像

提供快速建立可自動撥放控制的大圖瀏覽方式，像投影片撥放的方式可以暫停與前後往返播放控制。

STEP1.
開啟範例練習檔dw10.html與dw10-imageSlideShow.html。在dw10.html點取原內容區影像(尺寸為 635x410)並直接刪除。

至dw10-imageSlide

Spry Image Slideshow影像投影片播放

提供快速建立可自動撥放與互 動控制的大圖瀏覽方式，除了播放控制外，下 方將包含小圖的快速瀏覽切換。

STEP1.
開啟範例練習檔dw11.html與dw11-imageslideshow.html，點取dw11.html原內容區影像（尺 寸為690x500）並直接刪除。

至dw11-images

Slideshow互動式影像切換播放

這樣的小Icon，其是就是所謂的「favicon」，副檔名為「.ico」，如果你有自己架站，想替自己的網站換個屬於自己風格的網站ICON，請先準備好一張64*64的透明背景PNG-24格式小圖。

STEP1.
至https://www.aconvert.com/tw/icon/png-to-ico

為你的網站加上網址列小圖示ICON

Dreamweaver CC除了提供方便的程式碼編輯畫面外，原本就是一個協助網頁初學者開始認識HTML碼的好工具，包括CSS設定與Bootstrap組件，更是響應式網頁初學者的好幫手，加上與PHP資料庫的輕易結合，絕對是學習完整網頁結構的最佳利器!

Dreamweaver CC網頁設計應用

目前尚無內容