Dreamweaver MX 2004网页设计.pptVIP

田美雲 2006/07/26 part 0: 下載練習檔案 請先下載練習的檔案： .tw/~demo/demo.zip part 1: 認識DW工作環境 工作區介紹 功能表 插入列 切換網頁編輯模式 編輯區 狀態列 屬性面板 其他功能面板 part 1: 認識工作環境 面版操作 偏好設定 一般設定 狀態列：可以模擬下載速度 exercise1: 認識工作環境 啟動Dreamweaver MX 2004 探索一下DW的工作區及各項面板 part 2: 建立網站 在硬碟新增一專案資料夾 素材 文件資訊 網頁 在DW定義網站 設定網站資料夾 修改網站設定 part 2: 建立網站 網頁的新增： 以網站架構圖為藍圖 網頁 資料夾：較複雜層次較多的大型網站，可以以資料夾分類 part 2: 建立網站 網頁的儲存與編輯 首頁的命名 index.htm, default.htm, index.asp, index.php… (可在網頁伺服器設定) 其他檔案的命名 請用英文及數字，不要用中文 檔名以英文字母開始 不要用空白，以_或大小寫組合代替，如：my_file.htm、myFile.htm 不要使有特殊符號 避免過長，建議不要超過20個字元 part 2: 建立網站 設定頁面屬性 標題 背景及邊界 編碼方式 繁體中文 big5 萬國通用碼 unicode meta http-equiv=Content-Type content=text/html; charset=big5 part 2: 建立網站 設定標頭：插入列HTML 關鍵字、說明：讓搜尋引擎容易找到 重新整理 修改 預覽網頁 exercise 2: 建立網站 請定義一個新網站 MyWeb 請新增網頁：index.htm, about.htm, hobbies.htm, family.htm, photo.htm 編輯 index.htm 設定頁面屬性 設定標頭 預覽 part 3: 網頁文字 文字輸入 直接輸入 貼上已存在的內容 文字編輯 段落、斷行 特殊字元 分隔線 空白 part 3: 網頁文字 文字屬性設定 段落樣式 字型 大小 色彩 字體 對齊 超連結 項目 文字縮排 exercise 3: 網頁文字 新增一個空白網頁 打開ex3.txt 複製內容至此空白網頁 更改文字屬性，區別大小標題，項目 在倒數第2行前插入分隔線 儲存為ex3.htm part 4: 網頁圖片 網頁圖片格式 gif ：最多使用 256 個色彩來顯示影像資料，較適用於文字形式的影像、線稿與美工圖案。比較特別的是可將背景設為透明，還可以製成動畫 jpg：壓縮比率高達1:10，同時又保存影像的整體相片品質，但當壓縮率愈高，影像的品質會愈低，較適用於自然風景及人物照片 png ：融合了 jpg 和 gif 的優點，支援用於遮罩的 alpha 色頻、並可儲存 48 位元的彩色影像，缺點為檔案較jpg大，且不像gif可支援動畫 part 4: 網頁圖片 插入圖片 插入列 從檔案面板拖拉至適當位置 加入影像預留位置 part 4: 網頁圖片 修改圖片屬性 大小 來源 超連結 文繞圖 替代文字 間距 外框 編輯圖片 exercise 4: 網頁圖片 開啟ex4-1.htm 插入標題圖片judges.gif 插入評審的圖片：judges-CK.gif, judges-EZ.gif, judges-GC.gif, judges-RL.gif 開啟ex4-2.htm 在最前端插入圖片txt.gif 修改屬性：圖靠右、上下間距6 part 4: 網頁圖片 製作影像地圖 建立連結區域 修改與刪除 part 5: 超連結 文字超連結 a href=“people.htm”人物/a 預設值 用頁面屬性更改顏色 利用CSS變換超連結文字狀態 part 5: 超連結 圖片超連結 只要把邊框設為0，就不有藍框了!! 變換影像的特效(Rollover) 行為面板 javascript exercise 5-1: 超連結 開啟ex5-1.htm 製作文字連結至display檔案夾的以下網頁: people.htm, realisitically.htm, animal.htm… 利用CSS更改連結顏色樣式 開啟ex5-2.htm， 製作Rollover的特效 製作圖形連結至display檔案夾的以下網頁: people.htm, realisitically.htm, animal.htm… part 5: 超連結 使用錨點 用於頁面過長，避免不斷捲動頁面 設定錨點 a name=“judge01”人物/a 設定連結 a href=“#judge01”人物/a