教學步驟

開啟「Adobe Dreamweaver CS4」

新增「Dreamweaver網站」

切換至「進階」

「網站名稱」自行命名

「本地根資料夾」選擇「C:\Documents and Settings\Administrator\桌面\0323\」

「預設影像資料夾」選擇「C:\Documents and Settings\Administrator\桌面\0323\img\」

其它略過

確定

----------------------------------------------------------------------------------------------------------

展示「01.頁面設計(完成).html」

開啟「01.頁面設計(練習).html」教學

．設定網頁「背景顏色」

．設定網頁「標題」

----------------------------------------------------------------------------------------------------------

展示「02.文字設計(完成).html」

開啟「02.文字設計(練習).html」教學

．設定標題為粗體

．換行插入「日期」，設定「文字縮排」

．設定內文文字顏色(CSS)

．內文第一行插入空白(功能表列「編輯」→「偏好設定」→允許多個連續空白)

．「其他新聞」後幾行設定「項目清單」或「編號清單」

．最後一行置中插入「特殊字元」©

----------------------------------------------------------------------------------------------------------

展示「03.影像設計(完成).html」

開啟「03.影像設計(練習).html」教學

．設定網頁「背景影像」

．練習背景固定(CSS編輯body規則→背景→Background-attachment選fixed)

．練習另一種「背景影像」(選「03.back2.jpg」→重覆設「repeat」)

．插入靜態影像

．插入動態影像(插入→影像物件→滑鼠變換影像)

----------------------------------------------------------------------------------------------------------

展示「04.表格設計(完成).html」

開啟「04.表格設計(練習).html」教學

．插入表格

．設定儲存格背景

．設定表格「邊框」樣式(建立CSS規則)

．練習插入、刪除、合併表格列或欄

．練習匯入表格(Book1.xls)

．設定儲存格背景

．設定表格「邊框」樣式(套用剛建立的CSS規則)

．練習(可省略)表格排序(選取整個表格→功能表列「命令」→「表格排序」)

----------------------------------------------------------------------------------------------------------

展示「05.超連結設計(完成).html」

開啟「05.超連結設計(練習).html」教學

．設定外部超連結

．設定內部超連結(News.html)

．練習設定「命名錨點」

※在屬性面板中的連結以「指向檔案」方式連結