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

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

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

藝文

職場產業

創作

觀點

健康與情感

文化生活

SETP1.
開起Dreamweaver，執行【網站>新增網站】定義使用PHP 的網站，除設定『本機網站資料夾』外，於『伺服器』設定中，設定『伺服器連線方式：本機/ 網路』、『伺服器資料夾』，按下『進階』設定『伺服器式：PHP MySQL』。

STEP2.
連結資料庫，新增空白練習頁面並儲存檔案，

在Dreamweaver中連結MySQL資料庫

有時我們會在CSS裡看到「>」、「+」、「~」這些符號的使用，它們到底有甚麼功用呢？ 
A.大於符號(>)
大於(>)就是選取底下直接的子元素。
以大於符號(.box > p)和空格(.box p)來做比較，先看以下例子：

使用空格的情況
.box p{ font-size:20px; color

CSS的大於(>)、加號(+)、取代符號(~)

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

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

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

A.安裝Dreamweaver CC的資料庫擴充元件
Dreamweaver CC的資料庫相關功能介面，均需使用者自行安裝擴充元件來加入，請利用【PVII Extension Manager CC】安裝，請至網站下載:
http://www.projectseven.com/products/ex-

Dreamweaver CC的資料庫相關功能

CSS提供許多選擇器類型，當使用不同的選擇器時，套用樣式的優先權也會不同。
A.元素內的(行內)樣式>頁面內的(崁入)樣式>外部載入(串連)
元素內的(行內)樣式
例子：

頁面內的樣式(崁入樣式)
例子：

外部載入(串連)
例子：

B.後設定>前設定
最後設定的樣式將蓋過之前設定的樣式
例子：

CSS選擇器的優先權順序

網頁的文字單位大致上分成: pt、px、%、em、rem
pt、px為最常見的，屬於絕對單位；%、em、rem則為相對單位。
%單位的算法：
預設網頁上的文字大小為16px=12pt，
假如設定font-size: 75%，意思就是將預設文字大小改成：16 X 0.75=12px
假如設定font-

網頁文字單位－pt、px、%、em、rem

單行寫法時，設定值可以是四個依序間隔、三個依序間隔、二個依序間隔與單個值，請注意所代表的個別方向值。
1. Margin(或padding) : 上 右 下 左；(四個值不同)
2. Margin(或padding) : 上 左右 下；(左右值相同、上下值不同)
3. Margin(或padding

Margin、Padding單行寫法

對於網站內頁，尤其是左右分欄的內頁版面，同樣也是設計好版面之後，經由Photoshop切割後儲存成HTML頁面，再到Dreamweaver中處理設定，以完美呈現頁面內容，包括滑鼠變換影像按鈕，以及內頁的龐大頁面內容資料加入版型版面後，需保持版面的完整。

STEP1.
在Photoshop中開啟範例

內頁版面切割與編排

iFrame 內頁框版面是可於頁面上任何可安排內容的區域，如任意表格、儲存格之內均可安排尺寸固定的局部捲動瀏覽內容，讓使用者可單獨瀏覽頁面局部內容，版面安排上也更為靈活， 尤其是安排特殊瀏覽互動效果時亦為不可或缺的重要技巧。
STEP1.
在 Photoshop 中開啟「dw02.psd」為預先已在

iFrame 內頁框版面切割與應用

首先請加入串聯該CSS檔:

接著套用類別型態的CSS即可:


若需要修改請至該CSS檔修改CSS屬性即可:

【檢視範例】【下載範例】
相關課程 : 精修DIV+CSS網頁排版設計輕鬆做

僞元素-多種 CSS 對話框樣式

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

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

提供快速建立可自動撥放與 前後切換顯示大圖的瀏覽方式，且大圖周 圍將以半透明圓角矩形的效果呈現。

STEP1.
開啟範例練習檔dw12.html與dw12-prettyphoto.html，在dw12.html點取原內容區影像（尺寸為600x410）並直接刪除。

至dw12-prettyphot

jQuery Prettyphoto 影像互動瀏覽

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

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

至dw11-images

Slideshow互動式影像切換播放

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

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

至dw10-imageSlide

Spry Image Slideshow影像投影片播放

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

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

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

jQuery cycle 影像自動播放效果

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

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

jqzoom 局部放大檢視影像

可應用在 AP 元素(DIV)內的影像水平滑動切換，搭配巢狀 AP 元素(DIV)與內嵌式頁框，媲美 Animate 互動瀏覽影像效果。

A.加入 AP DIV 於頁面上
在 Dreamweaver 中，要加入 AP  DIV 除了設定 CSS 外，更簡單的方式是使用繪製 AP  DIV 工具， 

水平滑動切換顯示內容

網頁除了自動捲動的文字方式外，還可以製作出更捲動控制的內容，當滑鼠在捲動按鈕上時，內容就會互動捲動，這就是互動局部捲動內容區的製作。互動捲動區內容是固定座標位置，當無法固定位置時（如頁面置中），就需要藉由內嵌式頁框的方式與版面整合。

STEP1.
開啟範例練習檔，已經處理完成版面內容的水平置中，內

互動局部捲動內容區

影像瀏覽除了播放與控制播放外，最完美的還需要可以點圖直接開啟顯示大圖，接下來要介紹的就是可以直接於同頁面上顯示大圖的圖片瀏覽擴充元件，由小圖切換瀏覽圖片，按下小圖，相對應大圖會在旁顯示。

STEP1.
開啟「dw05.html」檔，由切割存出的HTML 檔，左側空白處為要插入小圖與切 換右側大圖的

影像瀏覽切換顯示

影像播放的效果，除了自動播放影像，本擴充元件是一個可以設定停止播放與繼續播放影像的效果，還可以是直接選擇要顯示的圖片，只要設定行為在按鈕上來控制影像播放即可，且每張播放的圖片皆可設定獨立連結位置，唯需要注意正確搭配DIV標籤。
STEP1.
開啟「dw04.html」檔，由切割存出的HTML 檔，影

Dreamweaver CC網頁設計應用

所有文章