Dreamweaver CS3 初階 講義
2007/11/291. 建置網站（頁）的流程 (1) 網站企劃
(2) 尋覓網路空間放置網頁 (3) 網頁編寫與測試
(4) 網站上傳、各大搜尋引擎（入口網站）登錄 (5) 網站的更新與維護
2. 建置網站（頁）所需軟體 (1) 靜態與動態網頁 (2) 網頁設計平台
A. Dreamweaver B. FrontPage (3) 影像處理
A. Fireworks B. PhotoImpact C. PhotoShop (4) 動畫製作
A. Flash
B. PhotoImpact GIF Animator (5) 美工繪圖
A. CorelDRAW B. Illustrator C. FreeHand 3. 原廠網站
(1) http://www.adobe.com/hk_zh/（Adobe 已於 2005 年 4 月 9 日併購 Macromedia）
(2) http://www.adobe.com/tw/
4. 硬體需求
(1) 處理器（CPU）：Intel Pentium 4、Intel Centrino、Intel Xeon、Intel Core Duo (或相容) (2) 作業系統（O.S.）：Windows XP／Vista
(3) 記憶體（RAM）：512MB，1GB-2GB
(4) 硬碟空間（H.D.D.）：1GB，15%-25%可用空間
(5) 顯示卡（Display）：1024x768、16 位元顯示，$2500-$5000
5. MX、MX2004、8.0、CS3 版為繁體中文版，安裝可升級（http://www.adobe.com/tw/）
6. 工作環境
(1) 第一次啟動會要求選擇工作區配置方式：設計者／程式碼撰寫者
【註】視窗Æ工作區版面Æ程式碼撰寫者／設計者／雙螢幕筆記更新
(2) 預設顯示起始頁面，可選擇開啟最近使用的檔案／建立新檔案／從範本建立 (3) 視窗元件
A. 標題列
B. 功能表列
C. 〝插入_常用〞工具列 D. 〝文件〞工具列 E. 〝標準〞工具列 F. 文件視窗
G. 頁面切換標籤
H. 標籤選取器：MX 版在〝程式碼〞檢視模式下會隱藏
I. 〝屬性〞面板：獨立面板，依選取的物件不同顯示不同的設定內容 J. 面板群組：包含〝CSS、應用程式、標籤檢視窗、檔案〞面板
【註】顯示／隱藏視窗元件
1.檢視Æ工具列Æ勾選／消插入、文件、標準 2.視窗Æ勾選／消面板
7. 設定預設的編碼
編輯Æ偏好設定Æ分類：新文件Æ預設編碼▼：Unicode(UTF-8)／繁體中文(Big5)，8Æ確定 8. 設定顯示的字體
編輯Æ偏好設定Æ分類：字體Æ (1) 字體設定：繁體中文
(2) 調和間距字體：網頁頁面中的一般文字之字體
(3) 固定字體：〝程式碼〞檢視模式中的 pre、code、tt 標籤內的文字字體 (4) 程式碼檢視：〝程式碼〞檢視模式中的文字字體
【註】建議選擇系統預設字體，如細明體、新細明體、Time New Roman…等
9. 網站的觀念
(1) 網頁與首頁的差別
A. 網頁：Web Page，連結至網站後檢視的任一頁面 B. 首頁：Home Page，連結至網站後檢視的第一個頁面 (2) 網頁的集合就是網站（Web Site）
10. 網站的串連方式
網頁之間以〝超連結〞串連，依串連方式不同分為：
(1) 迴圈式串連
A. 網頁按先後次序一頁頁直接串連，最後會回到第一個頁面，沒有複雜的架構，較重視 先後順序
B. 傳統的教學網站、廠商線上說明書 (2) 層級式串連
像是組織圖的架構，連結方式活潑，架構明顯
【註】一般網站的架構方式多採層級式串連（為主），包含迴圈式串連（為輔）
11. 網站的新增 (1) 網站的定義
網站Æ新增網站Æ基本／進階Æ分類：本地資訊Æ網站名稱（埔里綠色單車之旅）Æ本地 根資料夾Æ ÆC:\Inetpub\wwwroot\Æ「建立新資料夾」Æ輸入資料夾名稱（bike），Enter 鍵Æ開啟Æ儲存Æ預設影像資料夾Æ ÆC:\Inetpub\wwwroot\本地根資料夾\Æ「建立新資 料夾」Æ輸入資料夾名稱（images），Enter 鍵Æ開啟Æ儲存Æ確定
(2) 使用檔案總管複製網站所需的素材至網站根目錄之下（其它的編輯動作須在 Dreamweaver
內完成，避免連結動作失效!!）
12. 網站檔案的管理 (1) 〝檔案〞面板
A. 網站名稱：可切換至其它網站 B. 檢視狀態
a. 本機檢視 b. 遠端檢視 c. 測試伺服器 d. 地圖檢視 C. FTP 管理按鈕
a. 「連線至遠端主機」
b. 「重新整理」
c. 「下載檔案」
d. 「上傳檔案」
e. 「取出檔案」
f. 「存回」
D. 展開/收合：面板的展開，分割為本機檔案和遠端網站檔案 (2) 在〝檔案〞面板中建立檔案
選取本地根資料夾Æ右 1Æ開新檔案Æ輸入檔案名稱（index.html），Enter 鍵Æ右 1Æ設成 首頁Æ重複〝右 1〝本地根資料夾〞Æ開新檔案Æ輸入檔案名稱，Enter 鍵〞直到完成所 有檔案的新增
【註】1.若想刪除檔案時，可直接按下 Del 鍵（會出現更新連結的對話方塊），避免透過
檔案總管做刪除，其它的檔案或資料夾編輯動作亦同，如〝搬移、複製、重新命 名〞，免得產生無效連結，造成網站運作上的負擔
2.檔案的命名，除 Unix 認定英文大小寫不同，其餘均視為相同；命名規則如下：
(1) 檔名一律使用英文小寫 (2) 不可以使用中文
(3) 檔名中間不能有空格
(4) 檔名中不可有標點符號（若需要，請用_或-）
3.副檔名的部份，IBM PC 為*.htm，Mac 為*.html (3) 在〝網站〞面板中建立資料夾
選取本地根資料夾Æ右 1Æ新增資料夾Æ輸入名稱，Enter 鍵 13. 製作網站地圖
(1) 設定首頁
A. 一個網站之中，所有瀏覽的起點網頁 B. 未指定網頁為首頁，無法繪製網站地圖
C. 首頁的命名，因網頁伺服器的架設平台不同而所有不同
伺 服 器 種 類 Unix，Linux Windows NT4.0/2000 允許的首頁名稱 <index.htm>，<index.html> <default.htm>，<default.html>
<index.htm>，<index.html>
D. 選取首頁（index.html）Æ右 1Æ設成首頁
(2) 建立網站地圖
A. 〝檔案〞面板Æ檔案Æ「展開/收合」Æ「網站地圖▼」Æ地圖和檔案
B. 拖曳網頁（ index.html）瞄準鏡，對準本機檔案中的網頁檔（ pulimap.html） 後 ， 放 開 即可產生連結Æ繼續拖曳瞄準鏡對準其它網頁檔，建立連結
C. 檔案Æ儲存網站地圖Æ儲存於▼Æ檔案名稱（webmap）Æ存檔類型▼：*.bmp／*.pngÆ 儲存Æ「展開/收合」
【註】儲存網站地圖之後，透過影像處理軟體開啟、列印
14. 網站的備份（D:\）
(1) 網站地圖（.bmp／.png 圖檔；檔案Æ儲存網站地圖） (2) 網站定義
網站Æ管理網站Æ轉存（*.ste）／匯入 (3) 網站根目錄
檔案總管ÆC:\Inetpub\wwwroot\Æ右 1〝網站資料夾（bike）〞Æ複製Æ選擇非 C 槽以外的 位置（\\pc1\張國平\學員存檔區\個人資料夾）or 外接式磁碟Æ右 1Æ貼上
15. 網頁編輯（index.html）
(1) 開啟網頁：左 2 本機檔案中的網頁檔（index.html）
A. 關於頁面中的連結文字：建立網站地圖時，自動加入超連結 B. 加入網頁文字
a. 直接輸入
b. 開啟文字檔（記事本）Æ選取ÆCtrl + C 鍵Æ回到 DreamweaverÆ Ctrl + V 鍵 (2) 設定頁面屬性
修改Æ頁面屬性Æ
A. 標題：顯示在瀏覽器視窗的標題列
B. 文件編碼方式：繁體中文（UTF-8，CS3／Big5，8）
C. 背景影像Æ瀏覽…
【註】影像較小時會自動拼接；重複T：不重複
D. 背景顏色
【註】背景影像和背景顏色不能同時存在，同時設定則以背景影像為主
E. 頁面字體
避免使用系統預設之外的中文字體，否則會造成字體遺失
F. 文字顏色：若同時已由文字的〝屬性〞面板設定，則以〝屬性〞面板設定為主
【註】設定文字顏色，需考慮背景顏色，避免造成瀏覽者的閱讀困難 G. 連結
a. 連結顏色 b. 變換影像連結 c. 查閱過連結 d. 作用中的連結
【註】以使用者的瀏覽器設定（I.E. Æ工具Æ網際網路選項Æ一般Æ色彩）為主，除
非設定、套用 CSS 樣式
CS3 版本開始，頁面屬性中設定，就會自動轉成 CSS 樣式（編輯Æ偏好設定 Æ分類：一般設定Æ;使用 CSS 取代 HTML 標籤），但能設定的功能有限 e. 底線樣式T：永不使用底線
H. 邊界設定 a. 左邊界 b. 上邊界 c. 右邊界 d. 下邊界
【註】邊界值淨空時，會依瀏覽器的預設值保持最小距離；設定 0 時，則完全沒有距
離地對齊在瀏覽器視窗邊緣 (3) 在瀏覽器中預覽
A. 以既有的瀏覽器做預覽
「在瀏覽器中預覽/除錯▼」Æ選擇瀏覽器（F12 鍵：主要瀏覽器／Ctrl + F12 鍵：次要 瀏覽器）
B. 安裝其它瀏覽器（KKMAN、Opera、Firefox、Netscape、Maxthon、MXIE）做預覽 a. 下載、安裝
b. 編輯 Æ偏好設定 Æ分類：在瀏覽器中預覽 Æ瀏 覽 器 ： ＋ Æ名 稱 （ KKMAN） Æ應 用 程式Æ瀏覽…Æ查詢▼（C:\Program Files\Kkman\）Æ點選執行檔（KKMAN）Æ開啟 Æ預設值：主要瀏覽器／;次要瀏覽器Æ確定2
c. 啟動 KKMANÆ檔案Æ開啟舊檔Æ找到網頁檔（index.html）
【註】以〝已存檔的部份〞做預覽
(4) 儲存檔案
A. 檔案Æ儲存／全部儲存（多頁面修改後儲存，頁框組一次儲存）
B. Ctrl + S 鍵
【註】未存檔前，標題列或頁面切換標籤的檔名右側會顯示〝＊〞
16. 網站的移除 (1) 移除網站定義 (2) 刪除網站資料夾 17. 網站的還原
(1) 複製、貼上網站資料夾 (2) 匯入網站定義
18. 網站的編輯：網站Æ管理網站Æ (1) 新增
(2) 編輯
(3) 複製 (4) 移除 (5) 轉存 (6) 匯入 19. 網頁文字編輯
(1) 開啟檔案（index.html）
(2) 文字的輸入方式 A. 輸入文字
a. Enter 鍵：分段（HTML 語法標記為<P>），自動在兩段之間空出一行來分隔
b. Shift + Enter 鍵：強迫分行（黃色隱藏元素 ；HTML 語法標記為<Br>），兩行之間 不會有間距
【註】如何在頁面上分辨強迫分行
編輯Æ偏好設定Æ隱藏元素Æ;斷行Æ確定 B. 在網頁貼上文字（保留格式；分段）
檔案總管Æ開啟文字檔Æ選取ÆCtrl + C 鍵Æ回到網頁編輯視窗ÆCtrl + V 鍵
【註】在純文字檔中以一個空行來分段，在 Dreamweaver 中貼上才會有分段的效果
(3) 設定文字格式 A. 〝屬性〞面板
a. 格式▼：設定文字段落的格式；HTML 標準語法中的定義樣式；自訂的格式優先 b. 樣式▼
c. 顯示 CSS：開啟 CSS 面板 d. 字體▼
e. 大小▼：絕對大小（8.0 開始）／相對大小（+：比預設字體大，-：比預設字體小）
【註】預設字體大小為 3；選擇〝無〞時即為預設字體大小
f. 文字顏色 g. 粗體、斜體
h. 對齊：靠左對齊、置中對齊、靠右對齊、齊行 i. 項目清單、編號清單
j. 文字凸排、文字縮排 k. 清單項目…
l. 頁面屬性…
B. 〝文字〞功能表
(4) 英文拼字檢查：文字Æ拼字檢查 20. 編輯網頁中可用的中英文字體
「字體▼」Æ編輯字體清單…Æ可用的字體Æ點選字體Æ Æ已選取的字體Æ確定
【註】字體設定須在網友的電腦亦安裝相同字體的情況下，才能正常顯示（特別是中文字體），
否則只能以作業系統的預設字型（中文字型為細明體、新細明體、標楷體）呈現；網 頁標題建議以影像軟體製作，再以影像檔的型態插入至網頁使用
21. 如何能輸入連續的半形的空白字元，產生縮排效果
編輯Æ偏好設定Æ分類：一般設定Æ;允許多個連續空白Æ確定（建議以全形空白代替）
【註】Dreamweaver 縮排設定，須以 CSS 樣式完成
【馬上練習一】
22. 水平線的插入與設定 (1) 插入水平線，區隔資料
插入ÆHTMLÆ水平線 (2) 設定水平線
點選水平線Æ〝屬性〞面板Æ A. 名稱
B. 寬：像素（預設值）、%
【註】像素：固定寬度，不隨瀏覽器視窗的寬度縮放
%：寬度隨瀏覽器視窗的寬度（100%）縮放 C. 高
D. 對齊 E. 立體效果 F. 類別
G. 快速標籤編輯器
【例】設定水平線的顏色
快速標籤編輯器Æ輸入〝hr color="#FF0000"〞or〝hr color="red"〞Æ於其它位置 左 1 即可ÆF12 鍵（瀏覽器預覽時才能顯示效果）
23. 影像（圖片）的使用
(1) 〝 插 入 _常 用 〞 面 板 Æ「 影 像 ▼ 」 Æ搜 尋 位 置 ▼ （ \bike\images\） Æ檔 案 名 稱 （ puli01.jpg
／puli02.jpg）Æ相對於：文件Æ確定Æ影像標籤輔助功能屬性（確定）
【例】取消影像標籤輔助功能屬性的出現
編輯Æ偏好設定Æ分類：輔助功能Æ插入物件時顯示屬性Æ影像Æ確定
(2) 設定影像：點選影像Æ〝屬性〞面板Æ
A. 影像名稱
B. 寬、高：僅是調整影像的寬高度，檔案大小不變（除非透過影像處理軟體調整）
C. 原始檔 D. 連結
E. 目標▼：_blank、_parent、_self、_top、_dynamic
F. 替代▼：提示訊息
G. 編輯：呼叫影像處理軟體編輯影像
【註】1.設定圖片（影像）的外部編輯器
編輯Æ偏好設定Æ分類：檔案型態／編輯器Æ副檔名（.jpg）Æ編輯器Æ Æ 選 取 要 執 行 的 編 輯 程 式 （ C:\Program Files\Adobe\Adobe Photoshop CS3\
Fireworks.exe 或 C:\Program Files\Adobe\Adobe Photoshop CS3\Photoshop.exe）
Æ開啟Æ設為主要的Æ確定
2.如何快速查出軟體執行檔：開始Æ程式集Æ右 1〝軟體〞Æ內容Æ捷徑Æ目標 H. 地圖名稱
I. 垂直距離、水平距離 J. 低解析來源
K. 邊框
L. 靠左對齊／置中對齊／靠右對齊 M. 對齊▼（影像與文字對齊方式）：
【註】網頁中可使用的影像類型 1.JPG：全彩影像圖片（照片）
2.GIF：256 色的動態圖片，可去背（圖片，動態展示）
3.PNG：全彩影像圖片，可去背（需使用 IE5.0 以上版本的瀏覽器才支援；部份網頁空 間提供者禁用，如〝HiNet〞）
24. 插入影片
〝插入_常用〞面板Æ「媒體▼」ÆFlash 視訊(flv)／Shockwave 25. 插入特殊符號
〝插入_文字〞面板Æ「字元▼」
26. 插入日期：插入Æ日期Æ
【註】1.只支援西元格式
2.;儲存時自動更新：可使用〝屬性〞面板做日期格式編輯〈「編輯日期格式」〉
27. 加入項目清單與編號清單 (1) 項目清單：無順序性的資料 (2) 編號清單：有順序性的資料
28. 變更項目清單與編號清單的類型
點在清單資料之中（不可做反白選取）Æ清單項目…Æ
【馬上練習二】
29. 表格的使用（viewpoint.html）
(1) 作用
A. 一般表格（單純區格資料）
B. 網頁版面規劃（邊框粗細 0）
(2) 新增
A. 〝插入_常用〞面版Æ「表格」
B. 插入Æ表格
【註】1.列：橫的 2.欄：直的
3.表格寬度：百分比／像素；表格寬度隨（不隨）瀏覽器視窗寬度更改而變更 4.邊框：邊框粗細 0時，表格作為網頁排版用
5.儲存格內距：儲存格資料與儲存格框線的距離（未設定時，依瀏覽器決定，1 像素）
6.儲存格間距：儲存格之間的距離（同上）
7.頁首
8.輔助功能：註解／對齊註解▼／摘要 (3) 標籤選取器
A. <body>：全選（所有網頁內容）
B. <table>：表格 C. <tr>：列 D. <td>：儲存格 (4) 設定
A. 表格屬性面板
a. 清除欄寬度、清除列高度：使欄寬、列高與資料同寬高 b. 將表格寬度轉換為像素：轉換欄寬成為為像素
c. 將表格寬度轉換為百分比：轉換欄寬為百分比
【註】▽╱△：面板下半部展開／收合 B. 儲存格屬性面板
a. 合併選取的儲存格 b. 將儲存格分隔為列或欄
c. 水平：儲存格內容的水平對齊方式（預設為靠左對齊）
d. 垂直：儲存格內容的垂直對齊方式（預設為中間）
e. 寬、高（像素 or 百分比相對於 表格寬度）
f. 不換行：讓儲存格內的中文資料保持在單一行中 g. 表頭：粗體、置中對齊
【註】▽╱△：面版下半部展開／收合
【補】如何做出實心邊框效果的表格且內外框粗細相同（MX、MX2004、8.0、CS3）
方法一：<table>Æ〝屬性〞面板Æ邊框：0Æ間距：1Æ背景顏色：#FF0000（邊 框顏色）Æ插入點移至第一列的第一格Æ<td>Æ滑鼠移至最後一列的最 後一格ÆShift+左 1Æ〝屬性〞面板Æ背景顏色：#FFFFFF（網頁背景色） 方法二：<table>Æ〝屬性〞面板Æ邊框：1Æ間距：0Æ背景顏色：#FF0000Æ邊
框顏色：#FF0000Æ插入點移至第一列的第一格Æ<td>Æ滑鼠移至最後 一列的最後一格ÆShift + 左 1Æ〝屬性〞面板Æ背景顏色：#FFFFFF (5) 增刪
A. 插入列、欄：修改Æ表格Æ插入列／插入欄／插入列或欄
【註】在表格最後一個儲存格按〝Tab 鍵〞，會自動新增一列到表格下方 B. 刪除列、欄：修改Æ表格Æ刪除列／刪除欄
【註】<table>Æ〝屬性〞面板Æ列、欄（增加在最下方or最右側）
(6) 調整欄寬、列高
A. 儲存格屬性面板，使用百分比或像素方式設定 B. 直接拖曳
(7) 清除儲存格文字：<td> ÆShift +左 1Æ編輯Æ清除 (8) 表格資料排序
左 1 欲排序的資料項其中一個Æ命令Æ表格排序Æ
A. 排序▼
a. 順序▼：依照英文字母／依照數字大小（1、10、2、20、3、20）
b. 遞增／遞減 B. 再排序▼
a. 順序▼：依照英文字母／依照數字大小（1、10、2、20、3、20）
b. 遞增／遞減 C. 選項
a. 排序包括第一列：第一列是欄位標題時，不勾選此選項 b. 排序頁首列
c. 排序頁尾列
d. 完成排序後將全部列的顏色保持相同：表格列格式化成為兩種交替的顏色時，不選 取此選項
(9) 巢狀表格：表格之內再建立表格 (10) 套用表格樣式（8.0）
選取表格Æ命令Æ表格格式Æ
A. 範本 B. 橫列顏色
a. 第一種 b. 第二種
c. 交錯▼：不要交錯／每一列／每兩列／每三列／每四列
C. 第一橫列 a. 對齊▼
b. 文字樣式▼
c. 背景顏色 d. 文字顏色 D. 最左直行
a. 對齊▼
b. 文字樣式▼
E. 表格 a. 邊框
b. 將所有屬性套用至 TD 標籤而不是 TR 標籤 (11) 以 AP Div 建立，轉表格
【馬上練習三、四】
30. 超連結：網頁之間的串連（viewpoint.html）
(1) 方式：透過的介面 A. 文字超連結
B. 影像超連結：靜態／動態
C. 按鈕超連結：靜態 Ö動態（event 觸發）；滑鼠變換影像、導覽列、Flash 按鈕、Flash 文字 D. 網頁地圖超連結：單一圖片多個超連結
(2) 對象：連結的目的地
A. 命名錨點的超連結：資料冗長的網頁；同一頁／跨頁 B. 網頁內部的超連結
C. 網頁外部的超連結：若造成對方伺服器異常時，會有被封鎖的危險，甚至被提報 D. 檔案下載的超連結：Shareware／Freeware（均不可有商業行為）
E. 電子郵件的超連結（留言版／討論區／WebMail 盛行，此連結就用得少）
31. 命名錨點的使用：避免頁面過於冗長，造成閱讀上的不便（viewpoint.html）
(1) 先建立終點（文件的特定主題 or 頂端）
檢視Æ視覺輔助Æ9隱藏元素Æ插入點移至〝牛耳藝術公園 logo 圖示〞後面Æ〝插入_常用〞
面板Æ「命名錨點」Æ輸入錨點名稱（01，限英數）Æ確定Æ重複步驟完成其它九個景點的錨 點加入
(2) 再建立起點
在頁首加入索引目錄（各景點名稱）ÆShift + Enter 鍵，將目錄文字做分行Æ〝屬性〞面板 Æ大小▼：12Æ水平▼：靠右對齊Æ垂直對齊▼：靠下對齊Æ選取文字〝牛耳藝術公園〞
Æ〝屬性〞面版Æ連結：#01Æ重複步驟完成其它九個景點的文字超連結設定
【註】文字超連結的建立可在選取文字後，以 Shift + 左鍵拖曳文字指向檔案的方式建立
【註】1.亦可設定連結到其他網頁中的錨點（pulimap.html#06）
2.須製作回到頁首索引目錄的已命名錨點超連結（top）
32. 設定影像圖片連結（製作回到頁首索引目錄的命名錨點超連結〝top〞，viewpoint.html）
插入點移至景點介紹文字尾端，Enter 鍵Æ〝插入_常 用 〞面板Æ「 影像▼」 Æ找 到 需 要 的 圖 檔
（\bike\images\viewpoint\top.jpg）Æ確定Æ確定Æ〝屬性〞面版Æ連結：#topÆEnter 鍵（因 top 錨點不存在時，Dreamweaver 自動回到頁首）Æ替代（提示文字〝回索引目錄〞）Æ複製影像到其 它九個景點的資料後方貼上
33. 網頁外部的超連結（viewpoint.html）
是以搜尋引擎查出網址後，複製回 Dreamweaver 貼上Æ目標▼：_blankÆ替代▼Æ輸入〝歡 迎進來參觀〞
【註】1.連結他人網站時，建議以開新瀏覽器的方式，可避免產生侵權行為 2.〝http://〞須輸入才能正常連結
3.目標：連結對象的網頁開啟方式
(1) _blank：開新視窗（避免產生侵權行為）
(2) _self：原視窗（預設值）
(3) _parent：顯示在目前框架
(4) _top：在完整的瀏覽器視窗中載入連結的文件，同時移除所有框架
(5) _dynamic：所有連結的網站由非主頁的新視窗開啟，但均在同一個新視窗中展現 4.替代：提示文字／無法顯示文字
34. 網頁內部的超連結：小圖連結大圖（viewpoint.html）
點選〝牛耳藝術公園〞的影像Æ〝屬性〞面板Æ連結Æ「瀏覽檔案」Æ找到圖檔〝big-picture.jpg〞
Æ確定Æ目標▼：_blankÆ替代▼Æ輸入〝觀賞全景〞
35. 電子郵件的超連結（viewpoint.html）
選取要設定電子郵件連結的文字（中台禪寺的〝ctworld@mail.ctcm.org.tw〞）Æ〝屬性〞面板Æ 連結Æ輸入〝mailto:ctworld@mail.ctcm.org.tw?subject=我有話要說〞
【註】網友必須有使用郵件軟體〈Outlook Express，設定電子郵件帳號〉，不支援 WebMail 36. 檔案下載的超連結（viewpoint.html）
在最後一個景點介紹文字下方輸入〝埔里 4W 動畫欣賞〞Æ〝屬性〞面板Æ連結Æ「瀏覽檔案」
Æ找到〝before.exe〞Æ確定
【註】連結時，若是瀏覽器無法開啟的檔案型態，即出現下載畫面（如〝*.exe〞、〝*.zip〞）；如果是 瀏覽器可以直接開啟的檔案類型，可提示網友〝按右鍵，另存目標〞
【馬上練習五】
37. 設定自動換頁（轉入真正的首頁）
開啟網頁（前導頁），輸入網頁內容〝5 秒之後自動轉入首頁〞Æ〝插入_常用〞面板Æ「檔頭標籤▼」
Æ「重新整理」Æ延遲（5 秒）Æ動作Æ前往 URL（直接輸入網址 or 瀏覽網頁）／重新整理這個文 件（reload）Æ確定
【註】修改、刪除換頁功能
「顯示程式碼檢視」Æ找到〝<meta http-equiv="Refresh" content="5;URL=index.html" />〞
Æ選取後，Delete 鍵Æ「重新整理」
38. 變更與移除連結
(1) 變更連結：右 1Æ更改連結
(2) 移除一般／錨點連結：右 1Æ移除標籤 39. 上傳網站（頁）
(1) 申請網頁空間（HiNet 或是其它 ISP 提供的空間）
A. 注意事項
(A) 國外與國內免費空間網站
國外網站大多提供 10MB 以上，甚至不限空間，且支援 CGI、ASP、PHP…，但因主機位 於國外，必須轉接的關係，速度不比國內網站快
【註】CGI 與 ASP 等程式通常用來製作計數器、留言板、討論區等互動式的表單處理
(B) 義務性廣告
申 請 免 費 網 頁 空 間 ， 不 可 避 免 都 會 有 廣 告 ， 但 使 用 者 的 O.S. 已 升 級 Windows XP Professional SP2 則可自動過濾（擋掉）廣告
(C) 檔案上傳的方式
每個系統允許的上傳方式不同，須依網頁空間提供者規定，一般而言，FTP 軟體上傳比 Web FTP 上傳方便，但須注意，FTP 上傳位址（upload.myweb.hinet.net）和 www 網站位 址（http://www.hinet.net）是不同的
B. 免費網站空間一覽表【馬上練習十】
網 站 名 稱 網 址 說 明
TACOCITY http://www.tacocity.com.tw 6MB、CGI Pc home http://page.pchome.com.tw/ 10MB 8d8d 網路好朋友 http://www.8d8d.com 15MB 蕃薯藤網托邦 http://topia.yam.com.tw/main.html 25MB
MyNet 我的個人網 http://www.mynet.com.tw 10MB（試用）
Tripod http://www.tripodasia.com.tw/ 12MB
50megs http://www.50megs.com/ 50MB（支援 FrontPage）
HyperMart.net http://www.hypermart.net 10 MB、CGI
Virtual Avenue http://www.virtualave.net 50MB 、 POP E-mail 、 MySQL、PHP
39M http://www.39m.net/ 39MB
免費支援 ASP 的空間 http://www1.websamba.com/registration/ 30MB（ASP、HTML）
建議使用 ISP（網路服務公司）提供的免費空間，但不支援放置 ASP 與 PHP 網頁 C. 申請帳號、開通網頁空間並記錄相關資料（以 HiNet 為例）
以 ADSL 的帳號和密碼，申請 MSA 信箱http://www.msa.hinet.net，再用前兩者的帳號和密碼，
申請網頁空間 http://www.hinet.net（共三組帳號密碼）、帳號：iamckp、密碼：******、空間 位址：http://iamckp.myweb.hinet.net、上傳主機：upload.myweb.hinet.net、可支援上傳方式：瀏 覽器上傳、Dreamweaver 上傳
(2) 上傳方式：
A. Dreamweaver 上傳（強烈建議!!）
B. FTP 軟體（CuteFTP）上傳 C. 瀏覽器上傳
D. 透過瀏覽器登入 FTP Server 上傳(複製、貼上；HiNet 已取消支援) (3) 檢查超連結是否失效
A. 網站Æ檢查整個網站的連結Æ「檢查連結▼」：無效的連結／外部連結／孤立檔案 B. 網站Æ更改整個網站的連結
(4) Dreamweaver 上傳 A. 定義遠端資訊
網站Æ管理網站Æ點選欲上傳的網站Æ編輯…Æ進階Æ分類：遠端資訊Æ存取▼：FTPÆFTP
主機（upload.myweb.hinet.net）Æ主機目錄（不需輸入，由伺服器自動提供即可）Æ登入（網 頁空間的帳號），可按「測試」檢查帳號是否有效Æ密碼Æ;儲存Æ□使用防火牆（若電腦有安 裝防火牆軟體 or 電腦位於區網之內，有防火牆時勾選）Æ確定Æ完成
B. 連線、上傳
〝檔案〞面板Æ檔案Æ「展開/收合」Æ「連結至遠端主機」Æ點選右側本機檔案中欲上傳的檔 案（第一次上傳，點選最上層的根目錄）Æ「上傳檔案」（出現〝是否要上傳整個網站〞對話 方塊時，點選「確定」）Æ包含附屬檔案？（是/否）Æ「與遠端主機離線」
【註】「連結至遠端主機」：自動撥接上網與遠端伺服器連接
【註】點選左側遠端網站中的檔案Æ「下載檔案」：下載遠端的檔案至本機 (5) FTP 上傳
A. 下載並安裝上傳軟體（CuteFTP／WS.FTP）
(A) 下載CuteFTP（www.pchome.com.tw）、安裝：若為英文版可下載中文化套件
(B) 以檔案總管找到 CuteFTP 的安裝位置，進入 CuteFTP 視窗 Æ 「快速連線」 Æ 主 機
（homeftp.kimo.com.tw）Æ使用者名稱Æ密碼Æ連接埠（20 or 21）Æ「連線」Æ在視窗左 側點選欲上傳的檔案Æ「上傳」
【註】點選右側遠端網站中的檔案Æ「下載」：下載遠端的檔案至本機 (6) 瀏覽器上傳
A. 連結網頁空間提供者的網站（PChome）
B. 以帳號、密碼登入
C. 一個個檔案瀏覽上傳：單次上傳 5 個檔案，大小須在 3MB 內
【註】資料夾須〝新增資料夾〞後，再一個個檔案瀏覽上傳，非常不方便!!
D. 登出
(7) 透過瀏覽器登入 FTP Server 上傳
A. 開啟IE，並連結至FTP Server（ftp.myweb.hinet.net）
PS.現今HiNet只提供下載服務，已不再提供上傳服務 B. 輸入使用者名稱（帳號）、密碼登入
C. 開啟檔案總管Æ進入網站的根目錄Æ選取欲上傳的檔案和資料夾Æ右 1Æ複製 D. 切換至瀏覽器視窗Æ右 1Æ貼上
E. 關閉瀏覽器視窗（採瀏覽器進程技術，會自動登出）
(8) 上網瞧瞧網站：以瀏覽器連結至網站
【註】可申請免費轉址http://www.24cc.com/
(9) 推廣網站
A. 印製名片發送
B. 寄發電子郵件通知親朋好友
坊間的 e-mail 行銷軟體，也是可考慮的方法，唯名單部份需注意其合法性 C. 製作 e-mail 簽名檔（轉寄）
D. 至搜尋引擎登錄網站【馬上練習十】
(A) PChome：24 小時生效
(B) Yahoo！奇摩：免費不保證（推薦網站），付費（$3000）7 天內 (C) Yam：30 天
(D) Google：不需登錄 (E) HiNet：60 天（不保證）
E. 公佈在自己的 Blog
F. 在他人 Blog 回應文章時，順便留下網址
40. 使用CSS樣式統一版面的格式（CS3 會自動將設定的屬性值轉成 CSS 樣式）
(1) Cascading Style Sheet，利用表列的語法將各種可設定的格式，化為語法的關鍵字（方便直接套用）
(2) 特色
A. 快速、統一網頁格式（一致性）
B. 快速套用在大量網頁（修改 CSS 樣式，已套用的網頁會自動同步更新）
C. 提供特殊的格式or效果套用（文字超連結色彩效果）
D. 跨平台（瀏覽器）使用 E. 縮短網頁下載時間 (3) 類型
A. 類別：製作自定樣式
B. 標籤：重新定義 HTML 標籤
C. 進階：使用 CSS 判斷規則，製作文字超連結與滑鼠的互動效果（只支援 IE5.0 以上的瀏覽器）
(4) 新增
視窗ÆCSS 樣式Æ全部∕正在Æ「新增 CSS 規則」Æ選取器類型：類別／標籤／進階Æ名稱
（.normal；英數）Æ定義在：新增樣式表檔（方便目前網站網頁 or 其他網站網頁使用）／只有 此文件（只有目前的網頁可以使用）Æ確定Æ儲存於▼（網站根目錄）Æ檔案名稱（bike01）
Æ存檔類型▼：樣式表檔（*.css）Æ儲存Æ設定樣式的屬性Æ確定
【註】1.樣式表檔名稱（*.css）、樣式名稱 2.文字ÆCSS 樣式Æ開新檔案
3.Shift + F11 鍵：展開／收合〝CSS 樣式〞面板 (5) 套用
開啟網頁Æ游標移到段落內 or 選取文字Æ〝CSS〞面板ÆCSS 樣式Æ全部Æ選取樣式Æ右 1Æ套用
【註】1.清除套用：〝屬性〞面板Æ樣式▼Æ無 2.〝屬性〞面板Æ樣式▼Æ選擇樣式做套用 (6) 修改
〝CSS〞面板ÆCSS 樣式Æ全部Æ選取樣式Æ「編輯樣式…」Æ修改樣式Æ確定（所有套用 該樣式的網頁均同步更新）
(7) 匯出（只有此文件 Ö 樣式表檔；適用於 8.0）
檔案Æ轉存ÆCSS 樣式Æ儲存於▼（網站根目錄）Æ檔案名稱（bike01）Æ存檔類型▼：樣 式表檔（*.css）Æ儲存
(8) 匯入（樣式表至目前網頁）
瀏覽…Æ搜尋位置▼Æ點選 CSS 樣式檔Æ確定Æ增加成：~連結（共用同一個樣式檔）／{匯 入（直接將樣式置入網頁中）Æ媒體▼Æ確定
(9) 刪除
〝CSS〞面板ÆCSS 樣式Æ全部Æ點選樣式Æ「刪除 CSS 規則」Æ是（無法還原）
(10) 使用 CSS 樣式建立文字超連結效果
視窗ÆCSS 樣式Æ全部Æ「新增 CSS 規則」Æ選取器類型：進階Æ圈選工具▼Æ定義在：~
新增樣式表檔（bike01.css）Æ確定Æ設定樣式的屬性Æ確定
【註】a:link 文字超連結前色彩 a:visited 文字超連結後色彩
a:hover 滑鼠滑過文字超連結時的色彩
a:active 滑鼠按下文字超連結、放開，前往連結位置時的色彩 (11) 使用 CSS 範本
檔案Æ開新檔案Æ來自樣本的頁面Æ樣本資料夾：CSS 樣式表Æ基本頁面Æ顏色:藍/白/
黃Æ建立
【馬上練習五】
41. 網頁地圖（pulimap.html）
(1) 單一影像多個超連結 (2) 建立
〝插入_常用〞面板Æ「影像▼」Æ找到檔案（\bike\images\pulimap\pulimap.jpg）Æ確定Æ確定 Æ「文件標題」：埔里觀光景點Æ點選圖片Æ〝屬性〞面板Æ地圖Æ「矩形連結區域工具」／
「橢圓連結區域工具」／「多邊形連結區域工具」Æ在想要建立連結的位置（鯉魚潭）上，拖
曳產生連結區Æ〝屬性〞面板Æ連結（#）Æ替代（鯉魚潭，提示文字，目前不須加入）
(3) 調整
〝屬性〞面板Æ地圖Æ「指標連結區域工具」Æ點選連結區Æ A. 拖曳淺藍色控制點：縮放連結區大小
B. Delete 鍵：刪除 C. Ctrl+CÆCtrl+V：複製
【馬上練習六】
在網頁地圖下方建立 1 列 2 欄的表格（內／間距：0、寬度：700 像素、邊框粗細：0）Æ第 1 欄插入 影像（\bike\images\pulimap\arror-f.gif）Æ調整第 1 欄的寬度，符合影像寬度Æ第 2 欄輸入〝將滑 鼠滑過該景點即可看到景點圖，選按該景點即進入說明頁，目前的景點為：〞
42. 圖層 AP Div 的使用（Pulimap.html）
(1) 將文字、圖片、表格…放入圖層之中，方便調整位置、配合時間軸做動畫 (2) 繪製
〝插入_版面〞面板Æ「繪製 AP Div」Æ拖曳建立圖層 (3) 設定
點選圖層 1Æ〝屬性〞面板ÆCSS-P 元素（名稱須為英數）、左／上（座標位置，510px/255px）、 寬／高（圖層大小）、Z 軸（圖層的堆疊順序，0：網頁內容，–1：網頁內容下方）、背景顏 色、背景影像
(4) 插入物件
插入點移至圖層內Æ〝插入_常用〞面板Æ「影像▼」Æ找到檔案（\bike\images\pulimap\N0001.jpg）
Æ確定Æ確定Æ調整圖層寬高符合影像尺寸Æ視窗Æ9AP 元素
【註】1.圖層的控制點有八個，影像的控制點只有三個
2.圖層寬高縮放不影響影像寬高；影像寬高放大時，會影響圖層寬高 3.直接調整影像寬高，檔案大小並不會因此改變
(5) 製作其它圖層：隱藏目前圖層，增加新圖層
【馬上練習六】製作其它 13 個圖層，各圖層置入相對應的影像 43. 加入〝顯示 / 隱藏元素〞行為指令（Pulimap.html）
視窗Æ9AP 元素Æ將所有圖層隱藏Æ視窗Æ9行為Æ點選連結區（鯉魚潭）Æ Æ顯示隱藏元素Æ 點選圖層（Layer1）Æ顯示Æ確定Æ事件▼：onMouseOverÆ Æ顯示隱藏元素Æ點選圖層（Layer1）
Æ隱藏Æ確定Æ事件▼：onMouseOutÆ依此方法，完成其它 14 個連結區的行為指令 44. 加入〝設定容器文字〞行為指令（Pulimap.html）
〝插入_版面〞面板Æ「繪製 AP Div」Æ於網頁地圖下方的說明文字後方拖曳建立圖層Æ拖曳該圖層 的黃色隱藏元素至說明文字後方Æ〝屬性〞面板Æ刪除〝左／上〞的值Æ點選連結區（鯉魚潭）Æ Æ 設 定 文 字Æ 設 定 容 器 文 字 Æ 容 器 ▼ ： Layer16Æ 新 的 HTML ： 鯉 魚 潭 Æ 確 定 Æ 事 件 ▼ ： onMouseOverÆ Æ設定文字Æ設定容器文字Æ容器▼：Layer16Æ新的 HTML（不輸入任何文字）
Æ確定Æ事件▼：onMouseOutÆ依此方法，完成其它 14 個連結區的效果
【註】1.檢視Æ視覺輔助Æ9隱藏元素
2.編輯Æ偏好設定Æ分類：隱藏元素Æ;命名錨點／;AP 元素錨點的選項Æ確定
CSS 樣式Æ目前Æ「編輯樣式…」Æ分類：
Æ修改Æ轉換ÆAP Div 到表格Æ
【補】
面板Æ點選圖層Æ〝CSS〞面板Æ
〝AP 元素〞面板Æ;防止重疊Æ繪製圖層Æ儲存檔案 設定圖層內的文字格式
〝AP 元素〞
類型Æ顏色
45. 圖層轉表格（規劃版面）
以透明的
【註】使用透明的 GIF： GIF 填滿表格的最後一列，確保表格在所有瀏覽器中以相同欄位寬
面：建議勾選，將表格（資料）做置中對齊，主流作法
至另一個圖層內 曳圖層至另一圖層
圖層中
【馬 ad.html
1.
(3)
oad\arror_f.gif〞，調整至最適欄寬Æ第二欄輸入說明文字〝請點選上列紅
頁面屬性Æ邊界值均設定 5Æ確定 3.
(4) 12、置中對齊、文字顏色#333399Æ表格第二列
圖層內的表格，修改標題和影像為〝千年茄苳樹〞）
地圖紅字景點時，自動滑入景點照片 (1) 視窗Æ9時間軸
度顯示 置中於頁
46. 製作巢狀圖層
(1) 「繪製圖層」Æ插入Æ版面物件ÆAP Div
(2) 「繪製圖層」做兩次Æ拖曳圖層標記（黃色隱藏元素）
(3) 〝CSS_AP 元素〞面板ÆCtrl 鍵拖 (4) 拖曳「繪製圖層」至現存
上練習七】bikero 用表格規劃版面
(1) 開啟 bikeroad.htmlÆ輸入文件標題〝埔里自行車專用道〞
(2) 〝插入_常用〞面板Æ「表格」Æ 列 3、欄 1、內距 0、間距 0、邊框粗細 0、寬度 700 像素 第一列插入影像〝\bike\images\bikeroad\pulimap01.jpg〞Æ第二列分割為兩欄Æ第一欄插入影 像〝\bike\images\biker
字景點〞，大小為 12 2. 設定網頁的邊界：修改Æ
製作圖層中的說明視窗
(1) 建立圖層，屬性設定：左 45、上 100
(2) 於圖層內建立表格，列 2、欄 1、內／間距 0、寬度 100%、邊框粗細 1
(3) 選取圖層內的表格，設定屬性：背景顏色#FFFFFF、邊框顏色#333399，第一列高度 23 表格第一列輸入〝愛蘭橋〞，設定屬性：大小
插入影像〝\bike\images\bikeroad\001.jpg〞
(5) 完成其它圖層（可以複製前一個 47. 時間軸與行為的配合（bikeroad.html）
例：設定瀏覽者點選
A. 時間軸彈出式選單 B. 播放選項
C. 每秒播放的影格數（Fps）
D. 自動播放 E. 重複
F. 快顯功能表
G. 行為控制板：存放〝行為〞指令 H. 關鍵影格
(2) 時間軸的使用
〝AP 元素〞面板Æ選取 apDiv1 圖層Æ拖曳圖層標記進入時間軸的影格 1Æ將影格 15（關鍵影格）
移至影格 30（延長動畫，放慢動畫播放速度）Æ點選影格 1Æ點選 apDiv1 圖層Æ〝屬性〞面板 Æ左：-250、上：100Æ ;自動播放、;重複ÆCtrl + S 鍵ÆF12 鍵，測試效果（測試無誤後，請 必須取消〝自動播放〞和〝重複〞）
(3) 新增時間軸 A. 新增／移除
修改Æ時間軸Æ增加時間軸／移除時間軸／重新命名時間軸／移除物件 B. 切換：
【馬上練習七】建立其它圖層的時間軸 (4) 設定網頁地圖的連結區
點選地圖Æ〝屬性〞面板Æ「矩形連結區域工具」Æ於『愛蘭橋』景點名稱上拖曳，建立連結區 Æ連結：#Æ依前述步驟，完成其它 9 個景點的製作
(5) 加入行為指令 A. 顯示全部的圖層
B. 修改顯示隱藏圖層的行為
〝標籤_行為〞面板Æ點選『愛蘭橋』連結區Æ Æ顯示隱藏元素Æ點選『愛蘭橋』的圖層 Layer1Æ顯示Æ選取其它圖層Æ隱藏Æ確定Æ事件▼：onClickÆ依前述步驟，完成其它 9 個 景點的製作
C. 加入播放時間軸的行為
點選『愛蘭橋』連結區Æ Æ時間軸Æ前往時間軸影格Æ時間軸▼：Timeline1Æ前往影格：
1Æ確定Æ事件▼：onClickÆ Æ時間軸Æ播放時間軸Æ播放時間軸▼：Timeline1Æ確定Æ事 件▼：onClick
D. F12 鍵，測試結果Æ測試無誤後，依前述步驟，完成其它 9 個景點的製作
【補】時間軸上的圖層顯示狀態須為default（visible）
48. 加入 Flash 動畫（*.swf）（bikeroad.html）
複製 bike.swf 到網站資料夾Æ點選表格的第三列Æ〝插入_常用〞面板Æ「媒體▼」ÆFlashÆ找到檔
49. 時間軸增加關鍵影格
右 1〝時間軸的影格 15〞Æ增加關鍵影格Æ拖曳關鍵影格內的圖層位置Æ;自動播放、;重複ÆCtrl + S 鍵ÆF12 鍵，測試效果
50. 自訂動畫路徑
製作圖層Æ插入影像Æ點選圖層Æ右 1〝時間軸的影格 1〞 Æ記錄 AP 元素路徑Æ拖曳圖層標記移動 建立路徑，放開（自動建立多個關鍵影格）Æ;自動播放、;重複ÆCtrl + S 鍵ÆF12 鍵，測試效果 51. 匯入 Word 表格資料
(1) 檔案Æ匯入ÆWord 文件
(2) 清除 Word 產生的不必要 HTML 語法 命令Æ清理 Word 的 HTML
52. 匯入記事本表格資料（分隔符號：Tab 鍵）
檔案Æ匯入Æ表格式資料
【補】Dreamweaver CS3 的編碼方式為 UTF-8，記事本文件的編碼類型也須為 UTF-8，以免產生亂碼。
53. 網頁加入背景音樂（MIDI）
(1) 〝插入_常用〞面板Æ「媒體▼」Æ外掛程式
(2) 〝屬性〞面板Æ「參數」Æ參數：loopÆ值：trueÆ確定
【補】寬、高設定 0，表示網頁上不顯示播放介面 54. 網頁排版之表格排版與 CSS 排版
(1) 表格排版的缺點
A. 把格式資料混入內容中。
B. 使得檔案大小無謂地變大，而瀏覽者連結每個頁面時都必須下載一次相同的格式資訊。
C. 頻寬(流量)並非免費。
D. 使得重新設計現有的網站和內容極為消耗勞力(且昂貴)。
E. 使得保持整個網站的視覺一致性極難，花費也極高。
F. 基於表格的頁面，降低了它對殘障人士，和用手機或 PDA 瀏覽者的親和力。
(2) CSS 排版的優點 A. 頁面載入更快。
B. 降低流量費用。
C. 修改設計時更有效率且代價更低。
D. 幫助整個網站保持視覺的一致性。
E. 網站可以更好更快地被搜尋引擎找到。
F. 讓網站對瀏覽者和瀏覽器更具親和力。
G. 越來越多人採用 Web 標準時，它還能提高職場競爭實力(降低失業的風險)。
