建立超連結HyperLink

「超連結」是網路上一個相當重要的功能，它可以將網頁上的文字或圖像連結至另一個網頁或檔案或網站。而超連結又簡稱為「連結」；瀏覽器通常將能夠連結的部份，設以不同的顏色或是有底線顯示。

超連結的設定方式

A. 外部連結 (外部網站或網頁連結/採用完整路徑又稱絶對路徑)
   寫法  http://www.pchome.com.tw

B. 電子郵件連結 (開啟電腦預設電子郵件軟體,例如outlook或outlook express)
   寫法　mailto :1688@pchome.com.tw

C. 內部連結 (內部網頁或檔案之連結 / 採相對路徑)
   寫法　abc.htm

D. 錨點連結 (網頁中點對點連結)
   寫法　#a
  
E. 跨頁錨點連結 (不同網頁中點對點連結)
   寫法  a.htm#a

網站定義

網站定義，就是建立本地端網站；
即告知Dreamweaver 建立的網頁或是相關圖片所需存放的資料夾路徑!

利用Dreamweaver 建立網頁前，首先要在電腦的硬碟上定義一個「本地網站」(也就是一個資料夾)；可按下鍵盤上的F8 鍵，來開啟「檔案功能面板」。

A. 網站定義(利用網站面板的管理網站來新增網站並設定相關資訊)

B. 新增首頁檔案 - 首頁設為index.htm。

C. 新增分類資料夾  - 可新增資訊夾來分類圖片或Flash的動畫檔案。例如images 資料夾

第一次使用Dreamweaver 軟體前的二個設定

A. 功能列>編輯>偏好設定中的使用CSS取代HTML 標籤選項勾選取消掉。

Dreamweaver預設會將設定之樣式以CSS方式呈現在單獨的HTML檔案中；此設定為避免過多的CSS語法充斥在html中；

通常我們會將CSS語法單獨放在CSS樣式表中,讓結構與表現分離,以符合xhtml的Web標準規範。


B. 功能列>編輯>偏好設定中允許多個連續空白選項打勾。

此動作為編輯網頁文字時能使用順利使用多個連續空白之功能。

認識Dreamweaver 工作介面

A. 標題列 - 顯示開啟文件之文件標題及檔案路徑位置。

B. 功能列 - Dreamweaver 相關功能啟動所在位置。

C. 插入面板 - Dreamweaver 將功能列插入功能中最常使用的功能拿出來變成工具按鈕，讓你可以很方便及快速地將各種元素插入網頁中使用；而插入面板亦分為不同的活頁標籤，相關活頁標籤都有同類型的工具按鈕可供使用，欲使用時只需切換至相關活頁標籤即可。

D. 文件面板 – 文件面板最常使用的是視覺化設計編輯畫面及程式碼檢視畫面的切換。

E. 屬性面板 – 編輯網頁時，當選取任何物件(包含文字、圖片..等)，屬性面板會將所選取物件之可修改的相關屬性，呈現於屬性面板以方便設計者做修改及設定。即當你選

取表格或圖片時，屬性面板會變成表格或圖片的相關設定。

F. 其他功能面板 – CSS面板、行為面板、檔案面板..等皆放在軟體介面的右手邊。

網頁設計的前置準備工作

1.網站主題訂定。
．誰是這個網站的潛在到訪者?(企業,私人…等)
．你希望告知到訪者什麼訊息及你想透過你的網站讓自己及到訪者有什麼樣的收獲?


2.確定網站風格(可購買國外授權之網頁版型修改) 。但前提是要會相關軟體才會修改喔!
．國外版型參考網站：http://www.templatemonster.com 
．專業網頁配色參考：http://kuler.adobe.com  


3.網頁編輯工具選用。(Dreamweaver、Frontpage)


4.影像或動畫編輯工具選用。(Fireworks、Photoshop、Photoimpact、Flash)


5.申請專屬網域名稱Domain Name 。國際或區域(每年付費) 
．台灣總管.tw網域名稱為TWNIC財團法人台灣網路資訊中心http://www.twnic.net.tw


6.申請網頁空間。(每年付費) 
智邦、戰國策…等


7.宣傳網站(各大入口網站登錄)。


8.維護更新。

Internet 最重要的三個角色

A.  Client端(用戶端) – 網路使用者。

B.  Design端(網站建置端) – 用戶端頁面與後端平台設計。

C.  Server端(伺服器) – 網頁空間(可租賃或是自行架設主機)。

什麼是前端網頁設計?

所謂的前端的網頁設計，包含運用相關軟體設計出LOGO、網頁版型、網頁動畫．．等等；以下介紹前端網頁設計的所需要使用的軟體：

A.  網頁編輯軟體 (Frontpage、Dreamweaver)
      將網頁圖像、動畫..等進行網頁編排。

B.  影像處理軟體 (Photoshop、Fireworks、Photoimpact)
      在軟體中設計出網站版型，並最佳化影像輸出成網頁圖像。

C.  繪圖軟體 (Illustrator、Coreldraw)
      在軟體中設計出網站所需要LOGO或是特殊向量形狀。

D.  動畫軟體 (Flash)

     製作動畫並在網頁中發佈。

Adobe Dreamweaver 網頁編輯軟體

Dreamweaver為Adobe公司所出品的網頁編輯軟體，其操作環境採用視覺化界面處理畫面，並可自動產生HTML原始碼，此軟體同時可以即時交互編輯修改，編輯文字、插入分隔線、表格製作、超連結、圖形編輯、圖層應用等功能，輕鬆便可產生一般與動態，甚至包含程式組等多樣式網頁型態。Dreamweaver為目前最受觀迎及被大多數專業網頁設計師所採用的網頁編輯軟體。

聖傑老師將這個軟體定位在編輯而不是設計軟體，主要是因為Dreamweaver就是一個好用的鍋子，可以將好吃的料理烹煮出來，但這些備料（例如網頁圖像、動畫、網頁文字內容）就得靠別的專業軟體來產出（例如Photoshop、Illustrator、Fireworks、Flash．．．等軟體），互相搭配才能真正設計出一個外觀精美、內容吸引人的網站。

甚至若想要製作互動式的網站（例如會員機制、討論區），還得搭配伺服器程式（PHP、ASP...等）及資料庫（SQL、MySQL、Access...等）。