第1章  認識網頁及網頁制作工具 1



1.1  網頁制作基礎知識 1



1.1.1  認識網頁 1



1.1.2  認識網站 1



1.1.3  網頁的類型 5



1.1.4  網頁設計前的考慮 5



1.1.5  基本版式設計風格 6



1.1.6  網頁頁面的基素 7



1.2  網站的一般開發流程 8



1.2.1  收集素材 8



1.2.2  規劃站點 8



1.2.3  制作網頁 8



1.2.4  測試站點 8



1.2.5  發布站點 9



1.2.6  更新和維護站點 9



1.3  網頁制作中的技巧 9



1.3.1  網素的標準及使用技巧 9



1.3.2  頁面風格技巧 11



1.3.3  網頁構圖技巧 12



1.3.4  色彩使用技巧 13



1.4  網頁制作中的專業術語
14



1.5  認識Dreamweaver
CS6 15



1.5.1  Dreamweaver CS6簡介 15



1.5.2  啟動和退出Dreamweaver
CS6 15



1.5.3  認識Dreamweaver
CS6的工作界面 15



1.6  站點的創建與管理 16



1.6.1  創建本地站點 16



1.6.2  新建網頁文件與文件夾
17



1.6.3  打開網頁文件 17



1.6.4  保存網頁文件 17



1.6.5  網頁版面布局 18



1.7  項目實訓 18







第2章  網頁設計語言HTML 19



2.1  HTML簡介 19



2.2  HTML語言基礎 19



2.2.1  HTML標記符基礎
19



2.2.2  HTML標記符屬性
20



2.2.3  HTML的基本結構
20



2.3  頭部標記之間的主要標記
22



2.4  主體標記之間的常用標記
23



2.4.1  文字與段落標記 23



2.4.2  列表標記 26



2.4.3  圖像標記 28



2.4.4  超鏈接標記 28



2.4.5  表格標記 29



2.4.6  多媒體標記 30



2.5  項目實訓 31



2.5.1  項目實訓一：“第1個HTML”網頁 31



2.5.2  項目實訓二：“中國詩詞佳句-作者”網頁 32



2.5.3  項目實訓三：“圖像邊框”網頁 34



2.5.4  項目實訓四：“鏈接技術演示”網頁 34



2.5.5  項目實訓五：“消息公告”網頁 35



2.5.6  項目實訓六：“圖像切換”網頁 36







第3章  圖像效果應用 38



3.1  圖像效果實例——添加圖像
38



3.1.1  插入圖像 38



3.1.2  導入圖像 38



3.2  圖像效果實例——插入圖像占位符 41



3.3  圖像效果實例——替換圖像占位符 42



3.4  圖像效果實例——鼠標替換圖像 44



3.5  圖像效果實例——創建導航條 48



3.5.1  設置導航條項目 49



3.5.2  添加導航條項目 50







第4章  表格的應用 53



4.1  創建表格 53



4.1.1  設置頁面屬性 53



4.1.2  設置表格屬性 55



4.1.3  插入圖像 58



4.1.4  插入表格並設置背景圖像 59



4.1.5  網頁中的數據表格
61



4.2  項目實訓 63



4.2.1  項目實訓一：立體效果表格 63



4.2.2  項目實訓二：“圓角表格美化”網頁 64







第5章  超級鏈接的應用 66



5.1  網頁鏈接路徑 66



5.1.1  路徑（Absolute
Path） 66



5.1.2  相對路徑（Relative
Path） 66



5.1.3  站點根目錄相對路徑
67



5.2  鏈接的設置 67



5.2.1  文本鏈接 67



5.2.2  用CSS定義鏈接文本狀態 69



5.2.3  錨點鏈接 70



5.2.4  電子郵件鏈接 71



5.2.5  下載鏈接與空鏈接
72



5.2.6  一般圖像鏈接 74



5.2.7  圖像熱點鏈接 75



5.2.8  鼠標經過圖像 75



5.2.9  導航條 77



5.2.10  更改鏈接名稱 78



5.3  項目實訓 78



5.3.1  實訓項目一：制作“古今傳奇”網頁 78



5.3.2  實訓項目二：制作“日常生活”網頁 79



5.3.3  實訓項目三：制作圖像超鏈接 80







第6章  CSS樣式應用 81



6.1  創建層疊樣式表 81



6.1.1  認識“CSS樣式”面板 81



6.1.2  創建層疊樣式表 81



6.2  定義層疊樣式表屬性 83



6.2.1  設置類型屬性 83



6.2.2  設置背景屬性 83



6.2.3  設置區塊屬性 84



6.2.4  設置方框屬性 84



6.2.5  設置邊框屬性 84



6.2.6  設置列表屬性 85



6.2.7  設置定位屬性 85



6.2.8  設置擴展屬性 85



6.2.9  設置過渡屬性 86



6.3  使用CSS過濾器 87



6.3.1  Alpha濾鏡 87



6.3.2  Blur濾鏡 87



6.3.3  FlipH濾鏡 88



6.3.4  Glow濾鏡 88



6.3.5  Gray濾鏡 88



6.3.6  Invert濾鏡
88



6.3.7  Shadow濾鏡
89



6.3.8  Wave濾鏡 89



6.3.9  Xray濾鏡 89



6.4  應用並管理層疊樣式 89



6.4.1  應用層疊樣式 89



6.4.2  編輯層疊樣式 90



6.4.3  刪除層疊樣式 90



6.5  CSS樣式制作步驟解析
90



6.5.1  創建CSS樣式 90



6.5.2  應用CSS樣式 92







第7章  Div CSS靈活布局網頁 94



7.1  關於Div CSS布局 94



7.1.1  了解基於CSS的頁面布局 94



7.1.2 素 94



7.1.3 素 94



7.2  在網頁中插入Div 94



7.2.1  插入Div 94



7.2.2  Div的嵌套 95



7.3  關於Div CSS盒模型 95



7.3.1  Margin（邊界）
95



7.3.2  Border（邊框）
96



7.3.3  Padding（填充） 96



7.3.4  Content（內容） 96



7.4  Div CSS布局定位
96



7.4.1  relative（相對定位） 96



7.4.2  absolute（定位） 97



7.4.3  fixed（懸浮定位） 97



7.4.4  float（浮動定位） 97



7.5  常用的Div CSS布局方式 97



7.5.1  Div高度自適應
97



7.5.2  網頁內容居中布局
97



7.5.3 素浮動布局
98



7.5.4  流體網格布局 98







第8章  模板和庫的應用 99



8.1  在庫面板中注冊項目 99



8.2  應用庫中的注冊項 101



8.2.1  利用庫中注冊的項目制作網頁文檔 101



8.2.2  修改庫中注冊的項目
102



8.2.3  直接在網頁文檔中修改
103



8.3  創建模板 104



8.3.1  將現有的網頁另存為模板 104



8.3.2  創建空白模板 104



8.4  使用模板輕松制作大量文檔
105



8.4.1  在模板文檔中定義可編輯區域 105



8.4.2  使用模板文檔制作其他網頁文檔 107



8.4.3  修改模板文檔 108







第9章  框架的應用 111



9.1  創建框架 111



9.1.1  創建預定義框架集
111



9.1.2  創建嵌套框架集
112



9.2  保存框架和框架文件
113



9.2.1  保存框架文件 113



9.2.2  保存框架集文件
113



9.2.3  保存所有的框架集文件
114



9.3  選擇框架和框架集 114



9.3.1  認識“框架”面板
114



9.3.2  在“框架”面板中選擇框架或框架集 115



9.4  設置框架和框架集屬性
115



9.4.1  設置框架屬性 116



9.4.2  設置框架集屬性
116



9.5  框架的基本操作 117



9.6  為框架頁設置鏈接 119



9.7  框架的嵌套 119



9.8  項目實訓 120



9.8.1  項目實訓一：為框架設置不同背景 120



9.8.2  項目實訓二：使用框架制作網頁 121







第10章  表單的應用 125



10.1  表單概述 125



10.2  表單的創建及設置
125



10.2.1  創建表單 125



10.2.2  設置表單屬性
125



10.3  創建表單對像 126



10.3.1  創建文本域 126



10.3.2  創建單選按鈕
127



10.3.3  制作單選按鈕組
128



10.3.4  創建復選框 130



10.3.5  創建下拉菜單
130



10.3.6  創建表單按鈕
131



10.3.7  創建圖像域 131



10.4  項目實訓 132



10.4.1  項目實訓一：制作會員注冊 表單 132



10.4.2  項目實訓二：制作大型購物 中心訂單頁面 138







第11章  多媒體的應用 152



11.1  插入Flash動畫 152



11.1.1  認識Flash動畫 152



11.1.2  制作“古色古香”的網頁 153



11.2  為網頁添加音頻 154



11.2.1  插入聲音 154



11.2.2  制作音樂播放網頁
155



11.3  插入FLV視頻 156



11.3.1  認識FLV視頻 156



11.3.2  在網頁中插入FLV視頻 157



11.4  插入Applet
159



11.5  插入ActiveX控件 160



11.6  插入插件 161



11.6.1  插入插件圖標
161



11.6.2  使用插件嵌入音樂播放器 162







第12章  行為的應用 163



12.1  行為簡介 163



12.2  行為面板 163



12.3  使用行為 164



12.4  在網頁文檔中組合“西瓜人” 165



12.4.1  繪制層並插入圖像
165



12.4.2  在瀏覽器中組合“西瓜人” 166



12.5  制作拼圖遊戲頁面
167



12.5.1  繪制層插入圖片
167



12.5.2  設置層的拖動範圍
168



12.6  符合使用者電腦環境的行為 169



12.6.1  顯示適合的網頁文檔
169



12.6.2  加載大容量圖像
171



12.7  制作自動跳絲頁面
172



12.8  檢查表單 173



12.9  調整Flash動畫的行為 174



12.9.1  插入Flash動畫 174



12.9.2  控制動畫 175



12.9.3  添加單擊按鈕的效果音 176



12.10  快捷而高效地鏈接相關行為 177



12.10.1  把鼠標移至瞬間跳轉 177



12.10.2  跳轉到菜單相關頁面 179



12.10.3  添加GO按鈕 182



12.11  制作對鼠標動作做出反應的導航條 182



12.11.1  制作導航條的基本信息 182



12.11.2  添加可以知道當前所選菜單的行為 185



12.12  在網頁中顯示事件窗口
187



12.12.1  在網頁中顯示指定大小的彈出窗口 187



12.12.2  添加導航條和菜單欄 188



12.13  顯示隱藏層 189



12.13.1  繪制層並且插入圖片 189



12.13.2  隱藏顯示層
190



12.13.3  設置層的可見性
191



12.14  顯示大圖像的縮略圖效果 192



12.14.1  繪制層並插入圖像
192



12.14.2  單擊小圖像時顯示大圖像 193



12.14.3  更換圖層內圖像的行為 195



12.14.4  把圖像替換為其他圖像的行為 196



12.15  把替換的圖像恢復為原圖像 199



12.15.1  替換圖像 199



12.15.2  恢復交換圖像
201



12.16  利用JavaScript實現關閉網頁 201







參考文獻 203

Dreamweaver CS6 是一款專業的網頁編輯軟件，是業界領先的網頁開發工具，它具有強大的功能和簡便的操作平臺，是一款所見即所得方式的網頁制作軟件。該軟件集網頁制作、網站管理和程序開發於一身，可以幫助用戶在同一個軟件中完成所有網站建設的相關工作。



本書主要結合一些小實例介紹Adobe Dreamweaver CS6的基礎知識和功能，然後通過典型網頁的設計與制作過程，深入地講解相關知識點，並在其中穿插了許多實用技巧，使講解更加真實、有效，便於學生更好地掌握網頁設計與制作的方法。



全書共12章，主要內容包括：認識網頁及網頁制作工具、網頁設計語言HTML、圖像效果應用、表格的應用、超級鏈接的應用、CSS樣式應用、Div CSS靈活布局網頁、模板和庫的應用、框架的應用、表單的應用、多媒體的應用、行為的應用。課堂教學以完成網頁設計與制作任務為主線，實行“任務驅動、案例教學、理論實訓一體化”的教學方法，融“教、學、做”於一體，理論指導實踐，通過實訓練習，從實踐中學會網頁設計與制作的方法與技巧，體現了“做中學、做中會”的教學理念。



本書編寫的目的是讓使用者盡可能全面掌握Adobe Dreamweaver CS6軟件的應用，內容的安排由易到難、由淺入深，操作步驟清晰、簡明，講解通俗易懂，適用於不同層次的網頁制作人員學習。



本書內容編排考慮了企業崗位的實際情況和學生考證及就業需求，可以作為高職高專院校計算機相關專業的教材，也可作為網頁設計與制作的培訓教材，還可作為網頁制作愛好者的自學用書。



全書由天津輕工職業技術學院孟帙穎、王寶龍和山東理工職業學院劉靜擔任主編，天津輕工職業技術學院翟永君擔任副主編，參加編寫的人員還有天津市印刷裝潢技術學校李玢和天津輕工職業技術學院李娜、張菁楠、於玲、郭瑞華、陳端、高瑩、侯雪。



鋻於編者水平有限，書中難免有不當之處，誠請讀者批評指正。







編  者