Recommend推薦序（ 依 姓 氏 筆 劃 排 序 ）

王台瑞中國文化大學／大眾傳播學系專任講師

網站設計軟體書必需要扮演學習關鍵的角色，以期達到整體設計之目的。在學習過

程中應用實際設計案例來解析軟體的使用，將對學習者產生良好的成效幫助。本書

用心著重於網站實務的設計工作流程，也是作者多年教學經驗的具體展現。能夠幫

助學習者理解如何有效率的利用軟體工具的屬性，完成具整體性和設計美感的跨平

台網站作品。

林岑三信家商／資料處理科主任

能站在學習者的位置解答學習者的問題，個人覺得這是身為傳道、授業、解惑者的

老師，應該有的體認。本書作者蔡秉儒老師不僅能站在學習者的位置知道學習者的

困惑，甚至還能預先設計學習者會遇到的問題進一步幫學習者預防會遭遇的困境與

疑惑。除此之外，蔡秉儒老師在電腦多媒體設計與應用上的專業更是備受肯定。永

遠超前的進修奠定他在專業領域的地位，今欣聞他出書，本人感到榮幸可以為他寫

序。相信透過本書的引領一定可以對網頁建置的初學者或已有基礎想統整完整概念

與知識者帶來莫大的幫助。

施育宗互動策略品牌形象設計／專案經理

「時間、資訊、觀念、美學」是多媒體從業人員必須掌握的重點，網頁及多媒體設

計領域知識，隨著科技資訊週期性的快速進步，設計從業人員與學校也必須不斷更

新教學內容。近年更因自慧型手機及平板電腦的崛起，多媒體設計人員更受到市場

的倚重。而「工欲善其事、必先利其器」，一本能協助設計人製作技術及觀念進化

的工具書，「Dreamweaver絕對出色網站規劃與動靜態網頁設計」跨 PC/智慧手機

/平板電腦的平台，提供最新網頁製作教學，去蕪存菁且淺顯易懂，是值得推薦給

設計人的好書。

黃珩承TCECA 中華民國電腦工程師認證協會／理事

身為講師挑選教材的最佳選擇挑選一本對學習有幫助的好書是件不簡單的事，在學

校閱讀老師的教材會覺得不夠深入（因為在校都是學習重點），閱讀專家撰寫的資

料又覺得太艱深無法吸收（因為有許多專家不從事教學不知如何循序漸進的撰寫資

料）。推薦本書是因為蔡老師本身具備了專業講師（大學、知名補教機構）的身份，

也是擁有相關實務經驗的專家，所以書中內容是讓初學與想精進技能的讀者都會有

所收獲的，“閱讀”與“練習完”本書範例相信您也可以建置一個功能完整的網站。

劉豐榮正修科技大學數位 *多媒體設計學位學程／主任

設計美學與資訊技術的整合，不藏私的網頁設計經驗分享，誠摯地向您推薦一本不

僅是 Dreamweaver網頁軟體操作教學的書，而是從基礎到專業，內容涵蓋網站規

劃、網站架構、網站標準化、網頁設計、網頁排版、SEO設定，以及跨平台網頁

設計全攻略的好書。本書著重於實務上的設計工作，從靜態佈局到動態規劃，能夠

幫助讀者瞭解如何從設計角度有效率的利用軟體工具，完成具有設計美感的出色網

頁。無論是初學者或已學過網頁設計軟體者，本書是作者十幾年來從事設計及教學

經驗的具體展現，花了兩年精雕細琢才完成的出版品，值得教學或自學的參考，相

信對學習數位媒體設計領域的人定會有所助益。

Contents目 錄

CHAPTER01 網站與網頁

CHAPTER02 Dreamweaver暖身操作

Contents目 錄

3.1 表格操作 .............................................................. 3-2

3.2 利用表格排版 ......................................................3-13

3.3 Adobe BrowserLab ...............................................3-46

3.4 範本的應用 .........................................................3-51

3.5 結語 .....................................................................3-69

CHAPTER03 認識表格式網頁排版

4.1 Div操作 ................................................................ 4-2

4.2 利用 Div+CSS排版 ...............................................4-25

4.3 CSS樣式連結套用 ...............................................4-69

4.4 內頁設置 .............................................................4-73

4.5 結語 .....................................................................4-95

CHAPTER04 認識 Div式網頁排版

5.1 討論與溝通 .......................................................... 5-2

5.2 建置前規劃 .........................................................5-16

5.3 構圖與切片 .........................................................5-17

5.4 結語 .....................................................................5-25

CHAPTER05 網站接案規劃

6.1 開始建置 .............................................................. 6-2

6.2 結語 .....................................................................6-51

CHAPTER06 接案網站建置

8.1 產品展示效果 ....................................................... 8-2

8.2 線上郵寄製作 ......................................................8-20

8.3 網站整理與上傳 ..................................................8-51

8.4 結語 .....................................................................8-61

CHAPTER08 網頁常用效果與網站上傳

7.1 MySQL操作 .......................................................... 7-2

7.2 擴充程式安裝 ....................................................... 7-9

7.3 各動態頁面排版 ..................................................7-14

7.4 設定動態頁面 ......................................................7-40

7.5 結語 .....................................................................7-61

CHAPTER07 動態網頁製作

9.1 流變格線網頁製作 ............................................... 9-2

9.2 首頁排版示範 ......................................................9-10

9.3 加入自訂版面 ......................................................9-64

9.4 Google Chrome測試 ...........................................9-68

9.5 結語 .....................................................................9-69

CHAPTER09 流變格線版面操作

CHAPTER10 行動裝置網頁版面（PDF電子書 ）

01 網站與網頁1.1 前言

1.2 網站規劃概念

1.3 準備與設定

1.4 結語

C H A P T E R

01 • chapter

1-3

網站與網頁

簡單來說，一個網站包含著首頁與各種內容網頁，讓瀏覽者在網站中尋找所要觀看的網

頁。每個網頁中又包含著多采多姿的多媒體內容，諸如：圖像、動畫、文字、影片、聲音

或是隱含的動態程式。因此，建立網站才可以建立網頁，產生網頁才可以將多媒體的內容

置放進去。

1.2 網站規劃概念

了解網站如何組成之後，不論是承接設計案件或是設計公司分配的工作，都需要以專案規

劃的方式與流程，讓網站設計順利完成。當然，結案後也容易整理歸檔與交付客戶。

1.2.1 確認網站主題• 依照主題，思考需要哪些相關內容。

1.2.6 網頁樣板繪製• Photoshop• Illustrator• CorelDraw

1.2.5 呈現規劃• 網頁顯示• 視覺感受

1.2.4 網站架構規劃• 架構圖建立• 網頁型態規劃• 靜態網頁• 動態網頁

1.2.7 網頁編輯• 網站內檔案管理• 整合多媒體• 網頁排版

1.2.8 申請網站空間• 上傳測試

1.2.9 結案• 交付原始檔• 維護與更新

1.2.2 申請網址 1.2.3 取得相關資料• 文字、圖片、動畫、影片 ...等媒體物件。

1.2.1 確認網站主題確認網站的主題，在於網站內容要設置哪些訊息與資訊？給哪些瀏覽者觀看？如何吸引更

多瀏覽者參與？這些問題的答案，都是指向一個吸引瀏覽者應用且成功的網站。

很多時候，剛開始設計一個網站幾乎沒有任何頭緒。其實最好的解決之道，就是參考相同

類型的網站。例如：公司形象類、產品展示類、教育（資料提供）類、購物網、特別活動

企劃類以及視覺效果網站⋯等。

Dreamw

eaver絕對出色網站規劃與動靜態網頁設計

1-6

網頁型態規劃

選擇網頁內容是以何種型態製作，關乎著整個網站的功能與運作，也影響將來租用虛擬主

機（網站伺服器）的選擇。

（1）決定呈現方式

（2）有哪些可以選擇 ?

常見搭配資料庫

常見搭配伺服器軟體

常見搭配主機作業系統

網頁呈現方式

網頁呈現方式 網頁呈現方式

PHP ASP.NET、JSP

MySQL

Apache

Linux

Access、MS-SQL

IIS

Windows

ASP平面呈現 動畫呈現 平面與動畫呈現

A. 靜態網頁

網頁檔案是由單純的 HTML語言所構成。假設所設計的網站首頁中有五個按鈕。五個按鈕

分別連接到五個內頁檔案。點按按鈕後切換到一個內頁檔案。簡單來說，就是按一個按鈕

呼叫一個網頁檔案顯示在網頁瀏覽器中。

Dreamw

eaver絕對出色網站規劃與動靜態網頁設計

4-2

4.1 Div操作每個人都有整理過家中房間的經驗，這樣的經驗可以拿來當作如何運用 Div排版網頁內容

的範例。把瀏覽器中可顯示的畫面當作是房間的大小，當整理房間的時候，會將房間內的

物品分類，並且使用各種箱子將分類的物品裝箱後，推放在指定的位置，完成整個房間的

整理。

換個更生活化的方式來說，網頁的眾多內容如同一顆顆的水煎包，包裝的方式當然由購買

者指定。例如十顆水煎包需要每兩顆包在一個透明小塑膠袋中。當然包裝好後的 5個透明

小塑膠袋不可能就這樣帶走，老闆一定會再給一個大袋子將五包透明小塑膠袋裝起來，方

便購買者提走。網頁內容也就像打包帶走一樣，需要透過包裝將內容一一安排在瀏覽器顯

示畫面中。

不管是整理用的箱子（box），或是塑膠袋，拿來比喻 Div排版是最貼切的了。通常這種排

版網頁內容的方式，稱之為盒模型結構（box model）。

比喻

margin與 padding的官方正式翻譯為邊界與欄位間距。若是在觀念上還是無法理解，

則可以想成 margin為物件與物件之間的間距，而 padding為物件內的內距。

Dreamw

eaver絕對出色網站規劃與動靜態網頁設計

8-2

8.1 產品展示效果

網站中最常見的一部分，就屬產品展示。很多人會以為產品照的排列，利用表格來排列是

在適當不過了。但是有沒有想過，假如原本產品照的排列以三列三欄呈現，最後卻想要

以兩列四欄呈現呢 ?答案勢必一定要重新規劃表格。這樣的話，有沒有其他方便更改的方

式，有的，就是利用 Div+CSS+清單設定，就非常方便了。

產品照排列

假設客戶給予六張尚未處理過尺寸大小的產品照，需要排列為兩列三欄。

30px

25px

25px

30px 30px

ul (歸零後)

li

Div (342x240)

01 新增一個練習檔，並開啟。新增 CSS規則，內容選取器類型自動顯示類別，選

取器名稱輸入 imgshrink。規則定義顯示在（僅此文件）。按下確定。

1

3

2

08 • chapter

8-3

網頁常用效果與網站上傳

02 點按分類欄中的方框。Width（寬度）輸入 84px、Height（高度）輸入 95px。按下確

定，新增一項類別規則。

03 點按畫面一下，再點按屬性面板中的項目清單圖示，產生項目。插入menuimgsover_

19.jpg影像。影像還在選取狀態，在屬性面板中的類別選取剛剛建立的規則 imgshrink。