網頁設計與製作案例教程(HTML5+CSS3+JavaScript)

基本介紹

• 書名：網頁設計與製作案例教程(HTML5+CSS3+JavaScript)
• 作者：張兵義 朱立 王蓓
• ISBN：9787302488873
• 定價：49.80元
• 出版時間：2018.02.01
• 印刷日期：2018.01.24
• 印次：1-1

內容簡介

本書面向學習網頁製作的讀者，採用全新流行的Web標準，以HTML技術為基礎，由淺入深地介紹了HTML、CSS及JavaScript網頁製作的內容。本書把介紹知識與實例製作融於一體，以愛家商城網站（包括主頁、欄目頁、內容頁、會員管理等頁面）作為案例進行講解，配以宇宙商務網站的實訓練習，兩者相輔相成，自始至終貫穿於本書的主題中。本書採用案例驅動的教學方法，以案例為引導，結構上採用點面結合的方式，引導讀者學習網頁規劃、設計、製作的基本知識以及項目開發、測試的完整流程。本書適合作為高職高專院校計算機及相關專業的教材，也可以作為培訓網站開發與網頁製作的教材。

目錄

第1章網站與網頁的基礎知識1

1.1認識網站與網頁1

1.1.1網站、網頁和主頁1

1.1.2靜態網頁和動態網頁1

1.2網頁的基本構成元素2

1.3網頁布局結構4

1.4Web標準5

1.4.1什麼是Web標準6

1.4.2建立Web標準的優點6

1.4.3理解表現和結構相分離7

1.5HTML語法基礎8

1.5.1HTML概述8

1.5.2HTML語法結構8

1.5.3HTML編寫規範9

1.5.4HTML文檔結構10

1.6創建HTML文檔11

1.7網頁頭部標籤12

1.7.1<title>標籤12

1.7.2<meta>標籤13

1.7.3<link>標籤13

1.7.4<script>標籤13

1.7.5案例——製作愛家商城頁面摘要信息14

1.8注釋和特殊符號14

1.8.1注釋14

1.8.2特殊符號15

1.9實訓——製作宇宙商務頁面的版權資訊15

習題116

第2章網頁基本排版17

2.1文字與段落排版17

2.1.1段落標籤172.1.2標題標籤18

2.1.3換行標籤18

2.1.4水平線標籤19

2.1.5預格式化標籤20

2.1.6縮排標籤21

2.1.7案例——製作愛家商城企業簡介頁面22

2.2超連結23

2.2.1超連結簡介23

2.2.2超連結的套用24

2.2.3案例——製作愛家商城購物流程頁面28

2.3圖像29

2.3.1網頁圖像的格式及使用要點30

2.3.2圖像標籤30

2.3.3圖像超連結32

2.3.4設定網頁背景圖像33

2.3.5圖文混排34

2.4列表35

2.4.1無序列表35

2.4.2有序列表36

2.4.3定義列表37

2.4.4嵌套列表38

2.5實訓——製作宇宙商務企業名片頁面39

習題241

第3章網頁元素的布局與互動43

3.1<div>標籤43

3.2<span>標籤43

3.2.1基本語法43

3.2.2<span>標籤與<div>標籤的區別44

3.2.3使用<div>標籤和<span>標籤組織網頁內容44

3.3表格45

3.3.1表格的結構46

3.3.2表格的基本語法46

3.3.3表格修飾47

3.3.4跨行跨列的複雜表格49

3.3.5表格數據的分組52

3.3.6使用表格實現頁面局部布局54

3.3.7嵌套表格55

3.4表單56

3.4.1表單的工作原理56

3.4.2表單標籤56

3.4.3表單元素57

3.4.4案例——製作愛家商城會員註冊表單66

3.4.5使用表格布局表單67

3.5實訓——製作宇宙商務聯繫我們表單71

習題372

第4章使用CSS為網頁添加樣式75

4.1CSS概述75

4.1.1CSS的基本概念75

4.1.2CSS的發展歷史75

4.1.3CSS編寫規則76

4.1.4CSS的工作環境77

4.2HTML與CSS78

4.2.1傳統HTML的缺點78

4.2.2CSS的優勢79

4.2.3CSS的局限性79

4.3CSS語法基礎79

4.3.1CSS樣式規則79

4.3.2基本選擇符80

4.3.3複合選擇符83

4.3.4通用選擇符86

4.3.5特殊選擇符87

4.4CSS引入方式89

4.4.1行內樣式89

4.4.2內部樣式表90

4.4.3鏈入外部樣式表91

4.4.4導入外部樣式表93

4.4.5案例——製作愛家商城使用條款頁面94

4.5CSS的屬性單位96

4.5.1長度、百分比單位96

4.5.2色彩單位97

4.6文檔結構98

4.6.1文檔結構的基本概念98

4.6.2繼承100

4.6.3樣式表的層疊、特殊性與重要性101

4.6.4案例——製作愛家商城幫助中心局部頁面103

4.7元素類型107

4.8實訓——製作宇宙商務網商機發布頁面108

習題4110

第5章盒模型112

5.1盒模型簡介112

5.2框線、外邊距與內邊距113

5.2.1框線114

5.2.2外邊距116

5.2.3內邊距120

5.3盒模型的尺寸121

5.3.1盒模型的寬度與高度121

5.3.2塊級元素與行級元素寬度和高度的區別122

5.4盒子的margin合併問題123

5.4.1行級元素之間的水平margin的合併123

5.4.2塊級元素之間的垂直margin合併124

5.5盒模型綜合案例——製作愛家商城聯繫我們局部頁面126

5.6盒子的定位130

5.6.1定位屬性130

5.6.2定位方式131

5.7浮動與清除浮動136

5.7.1浮動136

5.7.2清除浮動140

5.8實訓——宇宙商務登錄頁面整體布局142

習題5144

第6章CSS格式化排版145

6.1使用CSS設定字型樣式145

6.1.1字型類型145

6.1.2字型大小146

6.1.3字型粗細147

6.1.4字型傾斜148

6.2使用CSS設定文本樣式148

6.2.1文本水平對齊方式149

6.2.2行高150

6.2.3文本的修飾151

6.2.4段落首行縮進152

6.2.5首字下沉152

6.2.6字元間距153

6.2.7文本的截斷154

6.2.8文本的顏色155

6.2.9文本的背景顏色155

6.3使用CSS設定圖像樣式156

6.3.1圖像框線157

6.3.2圖像縮放158

6.3.3背景圖像159

6.3.4背景重複160

6.3.5背景圖像定位161

6.4使用CSS設定表單樣式163

6.4.1使用CSS修飾常用的表單元素163

6.4.2案例——製作愛家商城會員登錄頁面168

6.5綜合案例——製作愛家商城社區頁面172

6.5.1頁面布局規劃172

6.5.2頁面的製作過程173

6.6實訓——製作宇宙商務會員註冊頁面175

習題6181

第7章CSS修飾連結、表格與列表183

7.1使用CSS修飾連結183

7.1.1改變文字連結的外觀183

7.1.2按鈕式連結184

7.1.3背景連結185

7.2使用CSS修飾表格187

7.2.1常用的CSS表格屬性187

7.2.2案例——使用隔行換色表格製作暢銷商品銷量排行榜191

7.3使用CSS修飾列表192

7.3.1表格布局的缺點192

7.3.2列表布局的優勢193

7.3.3CSS列表屬性194

7.4綜合案例——製作愛家商城產品圖文列表199

7.5實訓——製作宇宙商務合作夥伴連結局部頁面204

習題7206

第8章使用CSS製作導航選單209

8.1縱嚮導航選單209

8.1.1普通的縱向連結導航選單209

8.1.2縱向列表導航選單214

8.1.3製作愛家商城縱向列表導航選單216

8.2橫嚮導航選單219

8.3綜合案例——使用CSS修飾頁面和製作導航選單222

8.3.1頁面布局規劃222

8.3.2頁面的製作過程223

8.4實訓——製作宇宙商務畫廊頁面232

8.4.1頁面布局規劃232

8.4.2頁面的製作過程233

習題8239

第9章Div+CSS布局技術240

9.1Div+CSS布局理念240

9.1.1Div+CSS布局的優點240

9.1.2正確理解Web標準240

9.1.3使用嵌套的Div實現頁面排版241

9.2典型的CSS布局樣式242

9.2.1兩列的布局樣式242

9.2.2三列的布局樣式247

9.3綜合案例——製作愛家商城商務服務中心頁面251

9.3.1頁面的布局與規劃251

9.3.2頁面的製作過程253

9.4實訓——宇宙商務部落格頁面的布局260

9.4.1頁面的布局與規劃260

9.4.2頁面的製作過程261

習題9267

第10章JavaScript腳本語言269

10.1JavaScript概述269

10.2在網頁中引用JavaScript269

10.3JavaScript基本互動方法271

10.3.1信息對話框271

10.3.2選擇對話框272

10.3.3提示對話框273

10.4製作網頁特效274

10.4.1輪播廣告274

10.4.2製作愛家商城二級縱向列表導航選單276

10.5實訓——製作網頁Tab選項卡切換效果280

習題10283

第11章愛家商城前台頁面285

11.1網站的開發流程285

11.1.1規劃站點285

11.1.2網站製作287

11.1.3測試網站287

11.1.4發布站點287

11.2設計首頁布局287

11.2.1創建站點目錄288

11.2.2頁面布局規劃288

11.3首頁的製作289

11.4製作產品列表頁303

11.5製作產品明細頁306

11.6製作查看購物車頁314

習題11320

第12章愛家商城會員中心管理頁面322

12.1製作會員中心登錄頁322

12.2製作個人信息頁326

12.3製作“我的訂單”頁331

12.4製作收貨地址頁335

12.5頁面的整合340

習題12341

參考文獻342