Dreamweaver 設計好入門 Dreamweaverレッスンブック

關口和真

是使用Dreamweaver、Photoshop設計網站的專家，
也使用PHP建置CMS、電子商務網站、建置系統與維護、管理伺服器。
目前為大學講師兼日本工學院八王子專門學校約聘講師。
從2012年開始，擔任株式會社comcent的技術顧問，
2015年開始擔任該公司的CTO。

本書架構
閱讀方式
線上下載範例檔

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。擷取的圖片、
複製的文字與CSS都可用來製作新的網頁，也能當成新網站或網站翻新之際的素材使用。

　　12-01 【Extract為設計師與程式設計師之間的橋梁】使用具有構圖功能的PSD檔案
　　12-02 【熟悉「Extract」面板的操作】將構圖的PSD檔案上傳至Extract
　　12-03 【擷取與置換圖片/複製與貼上文字或CSS】從PSD檔案擷取元素

Lesson 13 建置響應式網站
這一課要著手建置響應式網站。最近除了於電腦瀏覽網站，更常見的是利用智慧型手機瀏覽網站，能讓網站同時支援智慧型手機、平板電腦或電腦這些裝置的製作手法就是響應式網站設計。Dreamweaver可使用Bootstrap這種CSS架構， 本書也將學習以Bootstrap進行響應式網站設計的方法。讓我們先了解響應式網站設計的機制，再利用Bootstrap一步步學習響應式網站設計的祕訣。

　　13-01 【在Dreamweaver使用Bootstrap】響應式網站設計與CSS架構
　　13-02 【液態版型與媒體查詢】支援多裝置的方法
　　13-03 【容器/列/欄位/欄位位移】利用Bootstrap建置網站之際的設計與構造
　　13-04 【使用預設樣式的類別】利用Bootstrap組件製作HTML
　　13-05 【美化版面與設定各種畫面寬度的顯示方式】利用Bootstrap與自訂的CSS編排版面

Lesson 14 公開網站
要公開網站，就必須將本地電腦的網站檔案上傳至遠端伺服器（網頁伺服器）。但在公開網站之前，要先將網站上傳至測試伺服器，確認是否能正常顯示與執行。這課要解說的是將網站上傳至遠端伺服器以及使用測試伺服器的方法。此外，也要介紹多人共管網站的方法。

　　14-01 【讓Dreamweaver與伺服器連線】遠端伺服器的設定
　　14-02 【熟悉遠端伺服器的使用方法】上傳網站
　　14-03 【網站公開前，先確認操作是否正常】測試伺服器的應用
　　14-04 【利用共同作業的方式正確更新網站】多人共管網站

索引