本書基于以計算思維的培養為導向的教學改革，按照由淺入深的過程，逐步講解網頁設計與制作相關的基礎知識，包括HTML基礎，CSS基礎，顏色、圖像和多媒體的使用，表格的使用，超鏈接，Div+CSS布局，模板和庫，表單，行為，JavaScript，jQuery框架，網站的發布與維護，并通過綜合實例完整地講述了一個實際網站的制作過程，最后介紹了用于快速建立網站的CMS內容管理系統。附錄中提供了HTML常用標簽和CSS常用屬性，并介紹Dreamweaver CS6等工具軟件的基本使用方法。本書提供案例相關文件、部分習題答案及電子課件，可登錄華信教育資源網（www.hxedu.com.cn）注冊后下載。
本書適合作為高等院校網頁設計與制作課程的教學用書，也可以作為網頁設計工作人員的參考用書。
第1章 網頁設計與制作基礎001
1.1 網站與網頁001
1.1.1 網站001
1.1.2 網頁003
1.1.3 網頁的基本構成元素004
1.2 網頁相關的概念005
1.2.1 Internet、IP和域名005
1.2.2 WWW和FTP006
1.2.3 HTTP和HTML006
1.2.4 瀏覽器和Web服務器006
1.2.5 靜態網頁和動態網頁009
1.3 網站制作基本流程012
1.4 網頁設計制作工具017
1.4.1 原型設計工具017
1.4.2 圖形圖像制作工具018 第1章 網頁設計與制作基礎001
1.1 網站與網頁001
1.1.1 網站001
1.1.2 網頁003
1.1.3 網頁的基本構成元素004
1.2 網頁相關的概念005
1.2.1 Internet、IP和域名005
1.2.2 WWW和FTP006
1.2.3 HTTP和HTML006
1.2.4 瀏覽器和Web服務器006
1.2.5 靜態網頁和動態網頁009
1.3 網站制作基本流程012
1.4 網頁設計制作工具017
1.4.1 原型設計工具017
1.4.2 圖形圖像制作工具018
1.4.3 網頁編輯工具020
本章小結021
課后習題021
第2章 HTML基礎023
2.1 標記語言的作用023
2.2 HTML基礎024
2.2.1 HTML和XHTML024
2.2.2 HTML5025
2.2.3 HTML的基本語法025
2.2.4 XHTML的語法026
2.3 HTML的結構027
2.3.1 基本結構027
2.3.2 文檔類型定義028
2.3.3 頭部內容029
2.3.4 主體內容029
2.4 標題與段落030
2.4.1 標題030
2.4.2 段落030
2.5 文字格式031
2.6 建立和使用列表032
2.6.1 無序列表032
2.6.2 有序列表033
2.6.3 定義列表033
2.7 特殊字符和注釋034
2.8 HTML5中的新增結構元素034
2.9 使用Dreamweaver編寫網頁035
2.9.1 新建網頁036
2.9.2 設置網頁標題037
2.9.3 設置文章中的標題038
2.9.4 設置無序列表和有序列表039
2.9.5 設置文字格式040
2.9.6 特殊字符的輸入040
本章小結041
課后習題041
第3章 CSS基礎043
3.1 CSS基本概念043
3.1.1 CSS的概述043
3.1.2 CSS的基本語法043
3.2 CSS選擇器045
3.2.1 基本選擇器045
3.2.2 其他選擇器048
3.3 在HTML中應用CSS052
3.3.1 行內樣式052
3.3.2 內部樣式052
3.3.3 外部樣式052
3.4 使用CSS控制文字樣式053
3.4.1 文字字體054
3.4.2 Web字體055
3.4.3 文字大小056
3.4.4 文字粗細056
3.4.5 斜體056
3.4.6 文字修飾057
3.4.7 字間距057
3.4.8 英文字母的大小寫058
3.4.9 陰影效果058
3.5 使用CSS控制段落樣式059
3.5.1 首行縮進059
3.5.2 段落水平對齊059
3.5.3 行高059
3.5.4 分欄060
3.6 繼承性和層疊性061
3.6.1 CSS的繼承性061
3.6.2 CSS的層疊性062
3.7 使用Dreamweaver編輯CSS063
3.7.1 CSS樣式面板063
3.7.2 創建與應用CSS規則064
3.7.3 編輯和移動CSS規則069
3.7.4 附加樣式表071
本章小結072
課后習題072
第4章 網頁中的顏色、圖像和多媒體074
4.1 顏色的基礎知識074
4.1.1 三原色074
4.1.2 色相、明度、飽和度075
4.1.3 冷暖色076
4.2 網頁中的顏色076
4.2.1 網頁中顏色的表示077
4.2.2 網頁安全色078
4.2.3 網頁配色基礎079
4.2.4 Dreamweaver中顏色的操作081
4.3 網頁中的圖像082
4.3.1 圖像在網頁中的應用082
4.3.2 網頁中的圖像類型083
4.3.3 網頁中的圖像標簽085
4.4 使用Dreamweaver操作圖像086
4.4.1 網頁圖像的添加086
4.4.2 網頁圖像屬性的設置087
4.4.3 網頁圖像占位符090
4.4.4 網頁中的背景圖像設置090
4.5 在網頁中添加多媒體對象095
4.5.1 在網頁中插入聲音對象095
4.5.2 在網頁中插入視頻對象098
4.5.3 在網頁中插入Flash對象100
4.5.4 在網頁中插入其他媒體對象101
本章小結102
課后習題102
第5章 網頁中表格的使用104
5.1 表格概述104
5.1.1 表格的基本功能104
5.1.2 表格的基本標簽104
5.1.3 表格的基本屬性105
5.2 Dreamweaver中有關表格的操作111
5.2.1 表格的創建111
5.2.2 在表格中添加內容113
5.2.3 選擇表格元素114
5.2.4 復制、粘貼表格116
5.2.5 調整表格117
5.2.6 插入和刪除表格行或列117
5.2.7 刪除表格和清除表格內容118
5.2.8 合并和拆分單元格119
5.2.9 表格屬性的設置119
5.2.10 導入和導出表格的數據121
5.2.11 排序表格123
5.3 使用表格布局網頁124
5.3.1 表格布局技術的產生124
5.3.2 用表格布局網頁的基本原理126
5.3.3 表格布局的優缺點127
5.3.4 使用表格布局網頁的基本步驟127
5.3.5 表格布局應用實例129
本章小結134
課后習題134
第6章 超鏈接136
6.1 超鏈接概述136
6.1.1 超鏈接的概念136
6.1.2 超鏈接的種類136
6.1.3 鏈接路徑138
6.2 超鏈接的標簽及常用屬性139
6.3 超鏈接的CSS樣式140
6.3.1 超鏈接屬性控制140
6.3.2 超鏈接特效143
6.4 Dreamweaver中有關超鏈接的操作146
6.4.1 創建文本超鏈接146
6.4.2 創建圖像超鏈接149
6.4.3 創建熱點超鏈接149
6.4.4 鼠標經過圖像超鏈接150
6.4.5 電子郵件超鏈接151
6.4.6 創建錨點超鏈接152
6.4.7 創建下載文件超鏈接153
6.4.8 創建空鏈接153
6.4.9 創建腳本超鏈接154
6.4.10 超鏈接的編輯和更新154
本章小結156
課后習題156
第7章 CSS布局基礎157
7.1 基礎知識157
7.1.1 網頁中的塊級元素和行內元素157
7.1.2 盒模型158
7.1.3 外邊距的疊加162
7.1.4 元素的內容溢出163
7.2 浮動定位164
7.2.1 設置浮動164
7.2.2 浮動的清除165
7.3 位置定位168
7.3.1 靜態定位168
7.3.2 相對定位168
7.3.3 絕對定位169
7.3.4 固定定位171
7.3.5 z-index172
本章小結173
課后習題173
第8章 CSS布局及應用174
8.1 網頁整體布局174
8.1.1 固定寬度布局174
8.1.2 流動布局177
8.2 網站中的導航178
8.2.1 垂直導航179
8.2.2 水平導航180
8.2.3 下拉菜單181
8.3 首字下沉效果183
8.4 自定義符號列表184
8.5 圖文混排185
8.6 全圖排版186
8.7 Dreamweaver中的頁面組件188
8.7.1 Spry菜單欄189
8.7.2 Spry選項卡式面板190
8.7.3 Spry折疊式面板191
本章小結193
課后習題193
第9章 模板和庫項目194
9.1 模板的概念194
9.2 模板的創建和使用194
9.2.1 創建模板194
9.2.2 創建模板的區域196
9.2.3 應用模板200
9.2.4 管理模板204
9.2.5 創建嵌套模板206
9.3 庫項目的創建和使用206
9.3.1 關于庫項目206
9.3.2 創建庫項目206
9.3.3 應用庫項目207
9.3.4 管理庫項目207
本章小結208
課后習題208
第10章 表單211
10.1 表單211
10.1.1 表單基本概念211
10.1.2 創建表單211
10.2 表單元素212
10.3 使用Dreamweaver編輯表單網頁216
10.3.1 在Dreamweaver中創建表單216
10.3.2 在Dreamweaver中插入表單元素216
10.4 表單網頁的頁面布局221
10.4.1 案例1：利用Div+CSS布局實現論壇登錄頁面221
10.4.2 案例2：用表格布局實現論壇注冊頁面225
10.5 Spry表單元素229
10.5.1 Spry驗證文本域230
10.5.2 Spry驗證文本區域231
10.5.3 Spry驗證復選框231
10.5.4 Spry驗證選擇232
10.5.5 Spry驗證密碼232
10.5.6 Spry驗證確認233
10.5.7 Spry驗證單選按鈕組233
本章小
前 言
隨著信息技術的不斷發展，互聯網已經成為當前傳播信息的重要途徑。越來越多的網站出現在互聯網上，網站開發及網頁設計與制作技術受到人們越來越多的關注。隨著萬維網聯盟W3C的建立以及Web標準的制定，HTML、CSS以及JavaScript成為網頁設計中最重要的三個組成部分，這就需要網頁設計人員更加全面地了解相關的知識。網頁設計與制作是一門綜合性的學科，它涉及心理學、美學、工程科學、程序設計等諸多方面，計算思維成為這一過程中人們必須具備的基礎性思維方式，用來指導相關知識的學習。
本書主要內容
本書主要圍繞HTML、CSS和JavaScript來介紹網頁設計過程中的相關知識和應用，并結合網頁設計軟件Dreamweaver的使用來講解網頁設計過程的具體操作。在每個知識環節，都穿插了大量的實例來對知識點進行剖析和講解，使得讀者能夠在學習這一部分內容后，對其本質有更深入的了解，從而能夠在實際的網頁設計過程中加以運用。
第1章介紹網頁制作的基礎知識，包括網站的分類、網頁的基本構成元素、與網頁相關的基本概念，并介紹網站制作的基本流程以及與網頁設計相關工具。
第2章介紹HTML語言的基本語法和基本結構，包括標題、段落、文字格式、列表等元素的學習。
第3章介紹CSS的基本概念、CSS選擇器、在網頁中應用CSS等相關知識，并詳細介紹通過CSS對文字和段落進行樣式的控制。
第4章介紹有關網頁顏色、圖像和多媒體的基礎知識，包括網頁中顏色的表示、網頁安全色、網頁配色，網頁中的圖像類型、圖像在網頁中的應用等知識，以及在網頁中使用聲音、視頻等多媒體對象。
第5章介紹表格在網頁中的使用，包括表格的基本操作及使用表格進行網頁布局的方法。
第6章介紹超鏈接的基本概念及網頁中不同類型的超鏈接，并介紹通過CSS對超鏈接的樣式進行設置的基本方法。
第7章介紹CSS布局的基本模型——盒模型，對盒模型的組成進行深入講解，并介紹浮動定位、位置定位等CSS布局的主要定位方式。
第8章介紹CSS布局在網頁布局中的實際應用，包括網頁的整體布局、網頁中的組件布局等，如導航菜單、圖文混排、全圖排版等，并介紹Dreamweaver軟件中Spry頁面組件的使用。
第9章介紹Dreamweaver中模板和庫項目的概念和作用，并通過實例展示模板和庫項目在網頁設計過程中如何提高網頁制作效率。
第 10 章介紹網頁中表單的基本概念及組成表單的不同元素，并通過實例講解網站訪問者與網站之間進行信息交互的方法，還介紹Dreamweaver中可以自動完成驗證功能的Spry表單對象。
第11章介紹Dreamweaver中行為的基本概念和一些基本的內置行為，并介紹通過行為給網頁中的元素添加動態效果的方法。
第12章介紹JavaScript的基本概念和在網頁中的使用，包括JavaScript的基本語法、內置對象等概念，并通過實例講解通過JavaScript對用戶的輸入數據進行驗證、聯動菜單的建立等方法。
第13章介紹JavaScript框架的作用及jQuery框架的基本功能，包括使用jQuery操作網頁元素以及基本的網頁動畫效果的實現，并介紹一些常用的jQuery插件的使用，如圖像幻燈片插件、內容切換插件等。
第14章介紹網站的測試、發布和維護的基本概念和方法，包括通過Dreamweaver測試網頁在不同瀏覽器下的兼容性、是否有無效的超鏈接、對網頁文件進行清理操作等。
第15章通過一個綜合案例，介紹網頁從原型設計到頁面效果圖設計，再到網頁設計的一系列過程，完整體現網頁編寫的真實過程。
第16章介紹內容管理系統CMS的基本概念，并結合Joomla這一CMS系統，介紹通過CMS建立網站的基本過程，包括站點的搭建、分類管理、菜單管理、文章管理等基本操作。
在本書的附錄中，介紹HTML的常用標簽、CSS的常用屬性，以及與網頁設計相關的Dreamweaver、Firebug插件等軟件的基本使用方法。
本書提供案例相關文件、部分習題答案及電子課件，可登錄華信教育資源網（www.hxedu.com.cn）注冊后下載。
本書主要特色
1．基于計算思維的原理和概念的講解
在基本概念的講解上，通過計算思維方法的引入和圖示化的講解，以簡單明了的方式講述基本概念的原理，使讀者可以快速地了解并掌握。
2．CSS布局原理的深入講解
CSS布局是一種不同于傳統表格布局的基于Web標準的網頁布局方式。本書通過對CSS布局的基本原理和不同布局方式的深入講解，展示CSS布局的基本方法和不同布局方式之間的區別。
3．網頁組件的模塊式講解
本書詳細講解網頁整體及各組成部分的實現過程，如水平導航和垂直導航、列表、圖文混排、Spry菜單欄、Spry選項卡式面板等。讀者可以通過掌握基本的網頁組件，快速地設計出不同類型的網頁。
4．大量的實用案例
本書提供大量的實用案例，除各章中講解原理的基礎案例和具有逼真效果的真實案例外，還包括一個從設計階段開始到全部完成的網站綜合案例，使讀者可以通過案例了解網頁設計的基本原理，并掌握在實際工作中網頁設計的流程。
本書使用對象
本書適合作為高等院校網頁設計與制作課程的教學用書，也可以作為網頁設計工作人員的參考用書。
本書由王海波、張偉娜、王兆華編著。第1、2、3、7、8、13、15、16章由王海波編寫，第4、5、6章由王兆華編寫，第9、10、11、12、14章由張偉娜編寫，劉立新主審。
由于編者水平有限，書中難免有不妥之處，敬請讀者批評指正。
作 者
新書資訊