作者-關口和真 -FindBook 找書網

章節說明:本書架構
閱讀方式
線上下載範例檔

LESSON 00 網站製作基礎知識
使用Dreamweaver製作網頁之前，先一起了解網頁的基礎知識吧！要製作與公開網頁，就必須準備軟體與網頁伺服器。由於網頁是以HTML 這種標記語言撰寫，所以也會介紹HTML的基本語法。

　　00-01 【需要準備的硬體與軟體】製作網站所需的軟硬體
　　00-02 【將網頁上傳至網頁伺服器】從製作到公開網站的流程
　　00-03 【HTML 標籤的基礎知識】試著撰寫 HTML

Lesson 01 認識 Dreamweaver 介面
要操作Dreamweaver就必須先了解介面的組成，而且為了後續內容的解說，也要介紹一些重要的Dreamweaver的環境設定。Dreamweaver的各種操作通常都會用到面板，記住各面板的名稱與功能，有效率地製作網頁吧！

　　01-01 【快速啟動Dreamweaver】啟動Dreamweaver
　　01-02 【讓Dreamweaver變得更好用】Dreamweaver的環境設定
　　01-03 【熟悉方便的工具與面板】介面與面板的功能

Lesson 02 定義網站-Dreamweaver的檔案管理設定
定義網站是製作網站時應該先進行的重要設定。網站定義要設定的有本機網站資料夾以及儲存圖片檔的資料夾（預設影像資料夾），如此一來才能在Dreamweaver有效率地管理檔案。

　　02-01 【需先進行的網站定義】何為網站定義
　　02-02 【指定網站名稱與作業資料夾】實際定義網站

Lesson 03 檔案與資料夾的基礎知識
這課要介紹的是在Dreamweaver建立檔案、資料夾以及利用階層構造管理檔案的方法。網站的建置會使用大量的檔案，如果學會整理檔案的方法，就能更有效率地建置網站。

　　03-01 【從Dreamweaver管理檔案】檔案與資料夾的基本操作
　　03-02 【讓網站的構造變得更簡單明瞭】利用階層構造管理檔案

Lesson 04 HTML文字標記的基礎知識-利用Dreamweaver製作HTML檔案
HTML檔案雖然可利用文字編輯器製作，卻沒辦法像文字處理軟體般，邊觀察結果邊製作。若想邊觀察結果邊製作HTML檔案，可使用Dreamweaver這類網頁製作軟體。本課要學習的是利用Dreamweaver對文字設定HTML標記的方法。若使用Dreamweaver，可先插入HTML標籤，再根據該標籤的用途插入內容（文章)。比方說，標題可利用標題標籤插入，再輸入字串，內文可利用段落標籤插入再輸入內文。接著讓我們一邊操作Dreamweaver，一邊根據文字或文章的意義，了解HTML標籤的使用方法吧！

　　04-01 【利用Dreamweaver製作HTML檔案的基本知識】利用HTML標籤標記標題與內文
　　04-02 【變更標題層級/清單/強調文字】必學的標記技巧
　　04-03 【元素的順序調換、複製與刪除、插入】熟悉「DOM」面板的操作
　　04-04 【直接編輯 HTML程式碼】使用程式碼視圖
　　04-05 【從Dreamweaver啟動瀏覽器與裝置預覽】利用瀏覽器確認畫面

Lesson 05 連結其他網頁
本課要說明網頁重要元素之一的連結，連結可讓我們參考網站的其他網頁、特定位置以及外部網站。本課將解說連往文字、外部網站、圖片、電子郵件信箱的連結，也要介紹連往map標籤製作的影像的連結，同時要解說具有ID屬性的網頁內部連結。

　　05-01 【在文字設定連結】連往其他頁面
　　05-02 【利用 map 標籤替影像的局部區塊設定連結】替影像的局部區塊設定連結
　　05-03 【利用錨點跳至標題】同一頁面的連結

Lesson 06 插入圖片與影片
網頁可利用各種圖片提供使用者資訊與影像，而且從HTML5之後還能使用影片，所以也大幅提升了影片的可塑性。這一課要介紹網頁所能使用的圖片格式以及各種格式的用途，還要介紹在網頁插入圖片或影片的方法。

　　06-01 【圖檔格式的基礎知識】可於網頁使用的圖片
　　06-02 【在網頁插入圖片的方法】插入影像
　　06-03 【在網頁插入影片的方法】插入影片
　　06-04 【CC Libraries與Adobe Stock】從其他Adobe商品插入圖片

Lesson 07 利用CSS設計文字的基礎知識
網頁的版面與設計都是透過CSS對HTML元素定義樣式而來，熟悉CSS的設定，就能隨心所欲地製作網頁。雖然CSS比HTML更難懂些，但還是建議大家花點時間，學得完整一點。第一步讓我們學習如何利用CSS設計文字或文章的方法。

　　07-01 【指定選取器再定義樣式】利用CSS完成網頁的設計
　　07-02 【利用選取器定義樣式的技巧】利用CSS設計文字
　　07-03 【靈活運用繼承的機制】繼承與多個類別
　　07-04 【利用程式碼視圖編輯程式碼與插入註解】編輯CSS
　　07-05 【CSS的替代撰寫方法】CSS預處理器的應用

Lesson 08 網頁製作【HTML篇】
接著讓我們透過正式的網站製作了解HTML與CSS的網頁該如何製作。LESSON 08會先建立HTML，LESSON 09則會利用CSS設計頁面。這兩課為本書的核心，請大家務必徹底了解。第一步要先了解代表網頁各區塊的標籤、標記章節的標籤、區塊層級元素與inline元素的差異，還有方塊模型的留白如何設定。另外要一步步製作HTML。請一邊操作，一邊學會標籤的使用方法以及利用Dreamweaver製作HTML的技巧。

　　08-01 【了解組成網頁的區塊】網頁的版面編排與區塊
　　08-02 【利用章節元素製作大綱】利用Section明確標記 HTML 的構造
　　08-03 【區塊層級元素與inline元素】以盒子模型編排版面
　　08-04 【利用HTML撰寫網頁的構造】製作網頁的HTML

Lesson 09 網頁製作【CSS篇】-利用CSS編排網頁
我們在LESSON 08製作了網頁的HTML，而LESSON 09則要利用CSS對所有HTML元素定義樣式，此時會先定義整張網頁共用的樣式，之後再分別對每個元素定義樣式。請透過本課徹底學會CSS屬性的設定方法與利用Dreamweaver定義樣式的操作。

　　09-01 【先決定網頁的框架】定義整張網頁共用的樣式
　　09-02 【指定選取器的各種細節與各種屬性的使用方法】利用CSS實現需要的設計

Lesson 10 一定要學會的超好用技巧-網路字體／片段／轉場／編輯與修正CSS
Dreamweaver搭載了許多方便好用的功能。本課要解說的是能在使用者的瀏覽器顯示指定字型的網路字體、能儲存與循環利用CSS程式碼的片段、利用片段製作的簡易版動
畫（轉場）以及編輯與修正CSS的程式碼導覽器與檢視模式。

　　10-01 【在使用者的瀏覽器顯示指定字型】網路字體的應用
　　10-02 【利用片段功能循環使用定義的樣式】儲存與插入片段
　　10-03 【使用片段裡的轉場】利用CSS轉場製作陽春版的動畫
　　10-04 【程式碼導覽器與檢查模式】編輯與修正CSS

Lesson 11 使用範本
多張頁面的網站的全域選單（導覽列）或頁尾通常會位於相同的位置，而且內容大多相同，不過之後若變更了網站內容，就得花不少時間調整每張頁面的編排。Dreamweaver的範本功能可在需要修改這些共同部分的時候，只要修改範本的內容，就能將範本的內容套用到所有頁面的共同部分。

　　11-01 【統一製作/更新多張頁面的共同部分】Dreamweaver的範本功能
　　11-02 【利用完成編排的頁面製作範本】製作範本
　　11-03 【在可編輯區域放入內容（元素）】利用範本建立頁面
　　11-04 【讓範本的修正套用在所有頁面】修正範本
　　11-05 【在範本來源頁面套用範本】套用與切割範本

Lesson 12 使用Extract功能-使用作為構圖的PSD檔案
製作網站時，也常使用Photoshop製作網站的構圖，再根據構圖撰寫網頁的程式碼（撰寫HTML的內容以及利用CSS編排版面）。若使用Dreamweaver的Extract功能，就能將構圖（PSD檔案）上傳至Extract，程式設計師也能在沒有Photoshop 的情況下擷取圖片與複製文字、CSS。擷取的圖片、