網站規劃與網頁設計(第4版)（簡體書）

本書面向網站開發與網頁製作的讀者，採用全新流行的Web標準，以HTML5技術為基礎，由淺入深、完整詳細地介紹了HTML5、CSS3和JavaScript網頁製作內容。本書共分13章，主要內容包括：Web基礎、網站規劃與網頁設計、構建HTML5網頁結構、HTML5頁面的佈局與交互、CSS3入門、盒模型、CSS3格式化排版、使用CSS3美化表格與表單、使用CSS3設置鏈接與導航、Div+CSS佈局技術、網頁行為語言――JavaScript、美家裝飾前臺頁面和美家裝飾後臺管理頁面。本書內容緊扣國家對高等學校培養高級應用型、複合型人才的技能水平和知識結構的要求，以美家裝飾網站項目案例的開發思路為主線，採用模塊分解、任務驅動、子任務實現和代碼設計4層結構，通過對模塊中每個任務相應知識點的講解，引導讀者學習網頁製作、設計、規劃的基本知識及項目開發、測試的完整流程。

教授，現就職於北京信息職業技術學院（東校區）軟件工程系。具有多年寫作經驗，出版過30多本教材。

前 言
本書採用“模塊化設計、任務驅動學習”的編寫模式，實現任務驅動學習的關鍵是“任務”的設計，它必須是社會實際生產、生活中的一個真實問題。為了解決這個真實的問題，需要把它分解成一系列的“子任務”；每個子任務的解決過程就是一個模塊的學習過程。每個模塊學習一組概念、鍛煉一組技能，全部模塊加起來，即完成一種知識的學習，形成一種相應的能力。在任務驅動學習的具體實施中，以網站建設和網頁設計為中心，以實例為引導，把知識介紹與實例設計、製作、分析融於一體，自始至終貫穿於本書之中。在實例的設計、製作過程中，把本章的知識點融於實例之中，使讀者能夠快速掌握概念和操作方法。考慮到網頁製作具有較強的實踐性，本書配備大量的頁面實例和豐富的運行效果圖，能夠有效地幫助讀者理解所學習的理論知識，系統、全面地掌握網頁製作技術。
本書主要圍繞Web標準的三大關鍵技術（HTML5、CSS3和JavaScript）來介紹網頁編程的必備知識及相關應用。其中，HTML5負責網頁結構，CSS3負責網頁樣式及表現，JavaScript負責網頁行為和功能。本書採用全新的Web標準，通過簡單的“記事本”工具，以HTML5技術為基礎，由淺入深，系統、全面地介紹HTML5、CSS3、JavaScript的基本知識及常用技巧。
本書以美家裝飾網站項目的設計與製作為講解主線，圍繞網站欄目的設計，詳細、全面地介紹網頁製作、設計、規劃的基本知識以及網站開發的完整流程。本書所有例題、習題及上機實訓均採用案例驅動的講述方式，通過大量實例深入淺出、循序漸進地引導讀者學習。本書在每章之後附有大量的實踐操作習題，並提供習題答案，供讀者在課外鞏固所學的內容。本書共分13章，主要內容包括：Web基礎、網站規劃與網頁設計、構建HTML5網頁結構、HTML5頁面的佈局與交互、CSS3入門、盒模型、CSS3格式化排版、使用CSS3美化表格與表單、使用CSS3設置鏈接與導航、Div+CSS佈局技術、網頁行為語言――JavaScript、美家裝飾網站前臺頁面和美家裝飾網站後臺管理頁面。
本書條理清晰、內容完整、實例豐富、圖文並茂、系統性強，不僅可以作為高等學校計算機及相關專業課程的教材，也可以作為網站建設、相關軟件開發人員和計算機愛好者的參考書。
本書由張兵義、程雲志、邱洋主編，參加編寫的作者有張兵義（第1、3章），邱洋（第2、6章），程雲志（第4、5章），朱立（第7、10章），劉桂玲（第8、9章），張治斌（第11、12章），第13章及資料的收集整理、課件的製作由沙世雁、繆麗麗、劉大學、劉克純、田金雨、駱秋容、王如雪、曹媚珠、陳文煥、劉有榮、李剛、孫明建、李索、徐維維、徐雲林、王茹霞、田同福、田金鳳、陳文娟、李繼臣、王如新、趙豔波、劉瑞新完成，全書由劉瑞新教授主審。參加編寫的大部分人員都是具有多年計算機教學與培訓經驗的教師。限於作者水平，書中難免有不足之處，懇請讀者提出寶貴意見和建議。

作者

目 錄
第1章 Web基礎 （1）
1.1 Web簡介 （1）
1.1.1 WWW和瀏覽器的基本概念 （1）
1.1.2 URL （2）
1.1.3 超文本 （3）
1.1.4 超文本置標語言HTML （3）
1.1.5 HTTP （3）
1.1.6 搜索引擎 （4）
1.2 網站、網頁和主頁 （4）
1.3 Web標準 （5）
1.3.1 什麼是Web標準 （5）
1.3.2 建立Web標準的優點 （6）
1.3.3 理解表現和結構相分離 （6）
習題1 （7）
第2章 網站規劃與網頁設計 （8）
2.1 網站的開發流程 （8）
2.1.1 規劃站點 （8）
2.1.2 網站製作 （9）
2.1.3 測試網站 （9）
2.1.4 發佈站點 （10）
2.2 網站內容的設計 （10）
2.2.1 設計網站的欄目 （10）
2.2.2 設計網站的版塊 （11）
2.2.3 設計網站的鏈接結構 （11）
2.3 網頁的基本元素 （12）
2.4 網頁佈局結構 （14）
2.5 網頁版面設計 （14）
2.5.1 版面尺寸規範化 （14）
2.5.2 版面編排原則 （15）
2.5.3 網頁排版佈局的一般步驟 （15）
2.5.4 版面典型風格 （16）
2.5.5 設計誤區 （17）
2.6 網頁色彩搭配 （17）
2.6.1 色彩的特徵 （18）
2.6.2 色彩搭配 （18）
2.7 常見的網頁編輯工具 （19）
2.8 認識HTML5+CSS3+JavaScript技術組合 （20）
2.8.1 HTML5簡介 （20）
2.8.2 CSS3簡介 （21）
2.8.3 JavaScript簡介 （22）
2.9 創建第一個網頁 （22）
習題2 （25）
第3章 構建HTML5網頁結構 （26）
3.1 HTML5的基本結構 （26）
3.1.1 HTML5語法結構 （26）
3.1.2 HTML5編寫規範 （27）
3.1.3 HTML5文檔結構 （27）
3.1.4 網頁頭部標簽 （28）
3.1.5 案例――製作美家裝飾產品簡介頁面 （30）
3.2 段落與文本排版 （31）
3.2.1 注釋標簽 （31）
3.2.2 段落標簽 （31）
3.2.3 換行標簽 （32）
3.2.4 標題標簽 （32）
3.2.5 字體標簽 （33）
3.2.6 縮排標簽 （34）
3.2.7 水平線標簽 （34）
3.2.8 特殊符號 （35）
3.2.9 案例――製作美家裝飾服務指南頁面 （35）
3.3 圖像 （36）
3.3.1 網頁圖像文件的格式及使用要點 （36）
3.3.2 圖像標簽 （37）
3.3.3 設置網頁背景圖像 （39）
3.3.4 圖文混排 （39）
3.3.5 案例――製作美家裝飾公司圖文簡介頁面 （40）
3.4 超鏈接 （41）
3.4.1 超鏈接概述 （41）
3.4.2 超鏈接的應用 （42）
3.4.3 案例――製作美家裝飾下載專區頁面 （44）
3.5 列表 （46）
3.5.1 無序列表 （46）
3.5.2 有序列表 （47）
3.5.3 定義列表 （47）
3.5.4 嵌套列表 （48）
3.5.5 案例――製作美家裝飾公司名片頁面 （49）
3.6 ＜div＞標簽 （50）
3.7 ＜span＞標簽 （51）
3.7.1 基本語法 （51）
3.7.2 ＜span＞與＜div＞標簽的區別 （51）
3.7.3 使用＜div＞標簽和＜span＞標簽佈局網頁內容 （51）
3.8 使用結構元素構建網頁佈局 （52）
習題3 （56）
第4章 HTML5頁面的佈局與交互 （58）
4.1 表格 （58）
4.1.1 表格的結構 （58）
4.1.2 表格的基本語法 （58）
4.1.3 表格的屬性 （59）
4.1.4 跨行跨列表格 （61）
4.1.5 表格數據的分組 （63）
4.1.6 案例――使用表格佈局美家裝飾產品展示頁面 （64）
4.2 表單 （65）
4.2.1 表單的基本概念 （65）
4.2.2 表單標簽 （66）
4.2.3 表單元素 （66）
4.2.4 案例――製作美家裝飾會員註冊表單 （69）
4.2.5 使用表格佈局表單 （71）
習題4 （73）
第5章 CSS3入門 （74）
5.1 CSS3概述 （74）
5.1.1 CSS3的特點 （74）
5.1.2 CSS3的編寫規範 （75）
5.1.3 CSS3的工作環境 （76）
5.1.6 CSS的優勢與局限性 （77）
5.2 CSS語法規則 （78）
5.2.1 CSS樣式規則 （78）
5.2.2 基本選擇符 （79）
5.2.3 複合選擇符 （81）
5.2.4 通配符選擇符 （83）
5.2.5 屬性選擇符 （84）
5.2.6 特殊選擇符 （87）
5.3 CSS的屬性單位 （89）
5.3.1 長度、百分比單位 （89）
5.3.2 顏色單位 （90）
5.4 CSS的引用方法 （90）
5.4.1 行內樣式 （91）
5.4.2 內部樣式表 （91）
5.4.3 鏈入外部樣式表 （92）
5.4.4 導入外部樣式表 （93）
5.4.5 案例――製作美家裝飾業務簡介頁面 （94）
5.5 文檔結構 （96）
5.5.1 文檔結構的基本概念 （96）
5.5.2 繼承 （97）
5.5.3 樣式表的層疊、特殊性與重要性 （98）
5.5.4 元素類型 （101）
5.5.5 案例――製作美家裝飾新聞更新局部頁面 （101）
習題5 （104）
第6章 盒模型 （106）
6.1 盒模型簡介 （106）
6.2 盒模型的屬性 （107）
6.2.1 邊框 （107）
6.2.2 外邊距 （110）
6.2.3 內邊距 （112）
6.2.4 案例――盒模型的演示 （112）
6.3 盒模型的大小 （114）
6.3.1 盒模型的寬度與高度 （114）
6.3.2 塊級元素與行級元素寬度和高度的區別 （114）
6.4 盒子的margin合併問題 （115）
6.4.1 行級元素之間的水平margin合併 （115）
6.4.2 塊級元素之間的垂直margin合併 （116）
6.5 盒模型綜合案例――美家裝飾頁面頂部內容 （118）
6.6 盒子的定位 （120）
6.6.1 定位屬性 （120）
6.6.2 定位方式 （122）
6.7 浮動與清除浮動 （126）
6.7.1 浮動 （126）
6.7.2 清除浮動 （130）
6.8 綜合案例――美家裝飾營銷模式頁面 （131）
6.8.1 頁面布局規劃 （131）
6.8.2 頁面的製作過程 （132）
習題6 （135）
第7章 CSS3格式化排版 （137）
7.1 設置字體樣式 （137）
7.1.1 字體類型 （137）
7.1.2 字體大小 （137）
7.1.3 字體粗細 （138）
7.1.4 字體傾斜 （138）
7.1.5 設置字體樣式綜合案例 （138）
7.2 設置文本樣式 （139）
7.2.1 文本水平對齊方式 （140）
7.2.2 行高 （140）
7.2.3 文本的修飾 （140）
7.2.4 段落首行縮進 （140）
7.2.5 首字下沉 （140）
7.2.6 文本的截斷 （141）
7.2.7 文本換行 （141）
7.2.8 文本的顏色 （142）
7.2.9 文本的背景顏色 （142）
7.2.10 設置文本樣式綜合案例 （142）
7.3 設置圖像樣式 （144）
7.3.1 圖像縮放 （144）
7.3.2 圖像邊框 （145）
7.3.3 背景圖像 （146）
7.3.4 背景重複 （147）
7.3.5 背景圖像定位 （148）
7.3.6 背景圖像大小 （149）
7.4 綜合案例――製作美家裝飾購物樂園頁面 （150）
7.4.1 頁面布局規劃 （150）
7.4.2 頁面的製作過程 （151）
習題7 （153）
第8章 使用CSS3美化表格與表單 （155）
8.1 美化表格 （155）
8.1.1 常用的CSS表格屬性 （155）
8.1.2 案例――製作斑馬線表格 （158）
8.2 美化表單 （160）
8.2.1 使用CSS修飾常用的表單元素 （160）
8.2.2 案例――製作美家裝飾會員註冊頁面 （164）
習題8 （168）
第9章 使用CSS3設置鏈接與導航 （170）
9.1 使用CSS3設置鏈接 （170）
9.1.1 設置文字鏈接的外觀 （170）
9.1.2 背景鏈接 （173）
9.1.3 按鈕式鏈接 （174）
9.2 使用CSS3設置列表 （175）
9.2.1 表格佈局的局限性 （175）
9.2.2 列表佈局的優勢 （176）
9.2.3 CSS列表屬性 （176）
9.2.4 圖文信息列表 （181）
9.3 創建導航菜單 （185）
9.3.1 普通的超鏈接導航菜單 （185）
9.3.2 縱向列表模式的導航菜單 （186）
9.3.3 橫向列表模式的導航菜單 （190）
9.4 綜合案例――製作美家裝飾博客頁面 （194）
9.4.1 頁面布局規劃 （194）
9.4.2 頁面的製作過程 （195）
習題9 （203）
第10章 Div+CSS佈局技術 （205）