響應(yīng)式網(wǎng)頁設(shè)計與制作-基于計算思維

普通高等教育“十三五”規(guī)劃教材

響應(yīng)式網(wǎng)頁設(shè)計與制作

———基于計算思維

王海波主編

張偉娜張園副主編

內(nèi)容簡介

本書以計算思維為導(dǎo)向按照由淺入深的過程逐步講解了網(wǎng)頁設(shè)計與制作特別是響應(yīng)式網(wǎng)

,,,

頁設(shè)計的相關(guān)知識包括網(wǎng)頁設(shè)計與制作基礎(chǔ)基礎(chǔ)基礎(chǔ)圖像和多媒體超鏈接

,、HTML、CSS、、、

布局基礎(chǔ)響應(yīng)式網(wǎng)頁布局應(yīng)用動效表單等內(nèi)容并結(jié)合大量

CSS、、CSS、CSS、、JavaScript、jQuery,

實例講解了面向端和面向移動端響應(yīng)式網(wǎng)頁的制作方法

PC。

本書內(nèi)容豐富結(jié)構(gòu)清晰緊跟技術(shù)前沿注重網(wǎng)頁設(shè)計的思維訓(xùn)練和實踐應(yīng)用并提供了重

、、,,

點案例的微視頻適合作為高等院校網(wǎng)頁設(shè)計與制作課程的教材也可作為網(wǎng)頁設(shè)計工作人員的

,,

參考用書

。

圖書在版編目(CIP)數(shù)據(jù)

響應(yīng)式網(wǎng)頁設(shè)計與制作基于計算思維王海波主編

:/.

北京中國鐵道出版社

—:,2019.1

普通高等教育十三五規(guī)劃教材

“”

ISBN978-7-113-25160-4

響王網(wǎng)頁制作工具高等

Ⅰ.①…Ⅱ.①…Ⅲ.①

學(xué)校教材

Ⅳ.①TP393.092.2

中國版本圖書館數(shù)據(jù)核字第號

CIP(2019)004774

書名:響應(yīng)式網(wǎng)頁設(shè)計與制作———基于計算思維

作者:王海波主編

策劃:魏娜讀者熱線:

(010)63550836

責(zé)任編輯:賈星馮彩茹

封面設(shè)計:劉穎

責(zé)任校對:張玉華

責(zé)任印制:郭向偉

出版發(fā)行:中國鐵道出版社北京市西城區(qū)右安門西街號

(100054,8)

網(wǎng)址:

/51eds/

印刷:三河市榮展印務(wù)有限公司

版次:年月第版年月第次印刷

201911201911

開本:印張:字?jǐn)?shù):千

787mm×1092mm1/1615.25369

書號:

ISBN978-7-113-25160-4

定價:元

41.00

版權(quán)所有侵權(quán)必究

凡購買鐵道版圖書如有印制質(zhì)量問題請與本社教材圖書營銷部聯(lián)系調(diào)換電話

,,。:(010)63550836

打擊盜版舉報電話

:(010)51873659

前言

前言

Preface

無處不網(wǎng)絡(luò)的今天網(wǎng)頁設(shè)計技術(shù)受到越來越多的人的關(guān)注隨著移動互聯(lián)網(wǎng)的發(fā)展網(wǎng)頁

,。,

展現(xiàn)的終端也越來越多樣化響應(yīng)式網(wǎng)頁設(shè)計與制作技術(shù)在面向多終端的開發(fā)中起著十分重

,Web

要的作用響應(yīng)式網(wǎng)頁設(shè)計通過標(biāo)準(zhǔn)中的媒體查詢彈性布局響應(yīng)式圖像等技術(shù)的綜合應(yīng)

。Web、、

用創(chuàng)建出能夠隨著不同終端變化的自適應(yīng)網(wǎng)頁

,。

本書主要內(nèi)容

本書是普通高等教育十三五規(guī)劃教材主要圍繞和來講解面向

“”,HTML、CSSJavaScriptPC

端的網(wǎng)頁設(shè)計以及面向移動端的響應(yīng)式網(wǎng)頁設(shè)計過程中的相關(guān)知識和應(yīng)用在每個知識環(huán)節(jié)都

。,

穿插了大量的實例來對知識點進(jìn)行剖析和講解使得讀者能夠在掌握理論知識時對其本質(zhì)有更

,,

深入的了解從而能夠在實際的網(wǎng)頁設(shè)計過程中加以運(yùn)用

,。

第章講解網(wǎng)頁設(shè)計與制作的基礎(chǔ)知識包括網(wǎng)站的分類網(wǎng)頁的基本構(gòu)成元素網(wǎng)站相關(guān)的

1,、、

概念等內(nèi)容并講解網(wǎng)站制作的基本流程以及與網(wǎng)頁設(shè)計相關(guān)的制作工具

,。

第章講解的基礎(chǔ)知識包括標(biāo)題段落文字格式列表表格容器等元素以及

2HTML,、、、、、div,

語義結(jié)構(gòu)元素等內(nèi)容

HTML5。

第章講解的基礎(chǔ)知識包括選擇器在中應(yīng)用盒模型中的樣

3CSS,CSS、HTMLCSS、、CSS

式繼承性和層疊性等相關(guān)知識以及通過對文字和段落進(jìn)行樣式的控制

、,CSS。

第章講解有關(guān)網(wǎng)頁中的顏色圖像和多媒體的基礎(chǔ)知識包括網(wǎng)頁中顏色的表示網(wǎng)頁安全

4、,、

色網(wǎng)頁配色網(wǎng)頁中的圖像類型圖像在網(wǎng)頁中的應(yīng)用等知識以及在網(wǎng)頁中使用中的

、、、,HTML5

音頻視頻等多媒體元素

、。

第章講解超鏈接的基本概念及網(wǎng)頁中不同類型的超鏈接并講解通過對超鏈接的樣式

5,CSS

進(jìn)行設(shè)置的基本方法

。

第章講解在常規(guī)文檔流的基礎(chǔ)上利用浮動布局位置定位布局等方法創(chuàng)建網(wǎng)頁中各種不

6,、,

同的排版布局形式

。

第章講解響應(yīng)式網(wǎng)頁設(shè)計的基本概念包括媒體查詢彈性布局響應(yīng)式圖像等創(chuàng)建響應(yīng)式

7,、、

網(wǎng)頁的基本方法

。

第章講解在網(wǎng)頁布局中的實際應(yīng)用包括端網(wǎng)頁和移動端網(wǎng)頁中的導(dǎo)航卡片式布

8CSS,PC、

局圖文列表自定義列表等常用布局形式的設(shè)計與實現(xiàn)

、、。

第章講解中用于實現(xiàn)動效的變換過渡以及動畫的基本知識并利用它們實現(xiàn)用戶與

9CSS、,

網(wǎng)頁元素之間的交互動效

。

第章講解網(wǎng)頁中表單表單控件以及表單的可用性和布局等內(nèi)容并通過實例講解典型表

10、,

單型網(wǎng)頁的制作方法

。

第章講解的基本語法以及在網(wǎng)頁中的使用重點講解中的內(nèi)置對象

11JavaScript,JavaScript、

瀏覽器對象模型以及文檔對象模型并通過實例講解通過實現(xiàn)網(wǎng)頁中的音頻控制和地

,JavaScript

圖創(chuàng)建

。

響應(yīng)式網(wǎng)頁設(shè)計與制作———基于計算思維

第章講解的基本功能包括使用操作網(wǎng)頁元素以及實現(xiàn)基本的網(wǎng)頁動畫效

12jQuery,jQuery

果并介紹一些常用的插件的使用如圖像幻燈片插件圖像燈箱插件全屏滾動插件等

,jQuery,、、。

在本書的附錄中提供了的常用元素常用屬性以及思考與練習(xí)參考答案供讀者

,HTML、CSS,

進(jìn)行快速查閱

。

本書案例的相關(guān)文件可登錄中國鐵道出版社網(wǎng)站下載

(/51eds/)。

本書主要特色

基于計算思維講解基本概念和原理

(1)

基于計算思維方法輔以相關(guān)圖示以簡單明晰的方式講解基本概念和原理

,,。

涵蓋和新標(biāo)準(zhǔn)

(2)HTML5CSS3

本書涵蓋了中的語義結(jié)構(gòu)元素元素元素時間類型表單控件等新增元

HTML5、audio、video、

素以及中的圓角邊框盒陰影字體變換過渡動畫等新增屬性

,CSS3、、Web、、、。

涉及傳統(tǒng)網(wǎng)頁布局技術(shù)和移動端網(wǎng)頁布局技術(shù)

(3)

既包括對傳統(tǒng)網(wǎng)頁布局技術(shù)中浮動布局位置定位布局等的講解也包括對響應(yīng)式網(wǎng)頁設(shè)計

、,

中媒體查詢彈性布局響應(yīng)式圖像等技術(shù)的講解使讀者可以同時掌握面向端和面向移動端

、、,PC

的網(wǎng)頁布局技術(shù)

。

提供立體化教學(xué)資源

(4)

提供大量的實用案例并對重點難點案例提供了微視頻通過案例不僅有助于讀者理解相

,。,

關(guān)原理也可為類似的網(wǎng)頁設(shè)計提供思路和方法

,。

本書適用對象

本書適合作為高等院校網(wǎng)頁設(shè)計與制作課程的教材也可作為網(wǎng)頁設(shè)計工作人員的參考用書

,。

本書由王海波任主編張偉娜張園任副主編其中第章由王海波編寫第

,、。,1、6、8、9,2、3、4、5

章以及附錄由張偉娜編寫第章由張園編寫全書由王海波統(tǒng)稿

,7、10、11、12。。

由于編者水平有限書中難免存在疏漏和不足之處敬請讀者批評指正

,,。

編者

年月

201811

2

目錄

目錄

Contents

第1章網(wǎng)頁設(shè)計與制作基礎(chǔ)………………………

1

的起源和發(fā)展……………………

1.1Internet1

網(wǎng)站與網(wǎng)頁…………………

1.12

網(wǎng)站相關(guān)的概念…………

1.26

網(wǎng)站制作基本流程………………………

1.312

網(wǎng)頁設(shè)計制作工具………………………

1.414

思考與練習(xí)………………………

18

第2章HTML基礎(chǔ)………………

19

的歷史和發(fā)展…………………

2.1HTML19

的基本語法……………………

2.2HTML21

的文檔結(jié)構(gòu)……………………

2.2HTML22

標(biāo)題與段落………………

2.325

文字格式…………………

2.426

列表………………………

2.528

特殊字符和注釋…………

2.630

表格………………………

2.731

容器……………………

2.8div36

語義結(jié)構(gòu)元素…………………

2.9HTML536

文檔對象模型…………

2.1038

思考與練習(xí)………………………

39

第3章CSS基礎(chǔ)……………………

41

基本概念……………

3.1CSS41

選擇器………………

3.2CSS43

在中應(yīng)用…………………

3.3HTMLCSS50

使用控制文字樣式…………………

3.4CSS52

使用控制段落樣式…………………

3.5CSS57

盒模型……………………

3.658

中的樣式…………

3.7CSS361

繼承性和層疊性…………

3.865

思考與練習(xí)………………………

69

響應(yīng)式網(wǎng)頁設(shè)計與制作———基于計算思維

第4章圖像和多媒體………………

71

網(wǎng)頁中的顏色……………

4.171

圖像………………………

4.274

多媒體……………………

4.382

思考與練習(xí)………………………

87

第5章超鏈接………………………

89

超鏈接概述………………

5.189

創(chuàng)建超鏈接………………

5.291

超鏈接的……………

5.3CSS95

思考與練習(xí)………………………

96

第6章CSS布局基礎(chǔ)………………

98

基礎(chǔ)知識…………………

6.198

浮動布局…………………

6.2103

位置定位布局…………

6.3109

思考與練習(xí)……………………

115

第7章響應(yīng)式網(wǎng)頁………………

116

響應(yīng)式網(wǎng)頁設(shè)計基礎(chǔ)…………………

7.1116

媒體查詢…………………

7.2119

彈性盒子布局……………

7.3(Flexbox)121

響應(yīng)式圖像………………

7.4126

思考與練習(xí)……………………

128

第8章CSS布局應(yīng)用……………

130

端網(wǎng)頁布局…………

8.1PC130

移動端網(wǎng)頁布局………………………

8.2142

思考與練習(xí)……………………

146

第9章CSS動效…………………

148

變換………………………

9.1(transform)148

過渡………………………

9.2(transition)152

動畫………………………

9.3(animation)158

思考與練習(xí)……………………

165

第10章表單………………………

166

表單……………………

10.1166

表單控件………………

10.2168

2

目錄

中的表單控件………………

10.3HTML5172

表單的可用性和布局…………………

10.4173

表單案例………………

10.5175

思考與練習(xí)……………………

178

第11章JavaScript………………

180

概述………………………

11.1JavaScript180

語言基礎(chǔ)…………………

11.2JavaScript184

內(nèi)置對象………………

11.3190

宿主對象………………

11.4194

案例……………………

11.5200

思考與練習(xí)……………………

204

第12章jQuery……………………

206

基礎(chǔ)……………

12.1jQuery206

使用操作網(wǎng)頁元素…………

12.2jQuery210

動畫……………

12.3jQuery212

插件……………

12.4jQuery216

思考與練習(xí)……………………

223

附錄AHTML常用元素…………

224

附錄BCSS常用屬性……………

227

附錄C思考與練習(xí)參考答案……………………

233

參考文獻(xiàn)……………

236

3

第1章

網(wǎng)頁設(shè)計與制作基礎(chǔ)

教學(xué)目標(biāo):

◎

通過本章的學(xué)習(xí),了解網(wǎng)站與網(wǎng)頁相關(guān)的概念,掌握網(wǎng)站制作的基本流程,熟悉網(wǎng)頁設(shè)計

中涉及的不同類別的制作工具。

教學(xué)重點和難點:

◎

網(wǎng)頁的基本構(gòu)成元素

●

瀏覽器和協(xié)議

●HTTP

網(wǎng)站制作基本流程

●

網(wǎng)頁設(shè)計制作工具

●

網(wǎng)站是指根據(jù)一定的規(guī)則,使用等語言制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的

HTML

集合。網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素。瀏覽器通過協(xié)議與服務(wù)器交互,獲取網(wǎng)頁

HTTPWeb

以及相關(guān)資源并顯示在瀏覽器中。在網(wǎng)站制作過程中,需要按照一定的流程有效地進(jìn)行開發(fā)

工作,在不同的階段使用不同的設(shè)計和制作工具。

1.1Internet的起源和發(fā)展

因特網(wǎng)是指按照一定的通信協(xié)議互相通信的計算機(jī)連接而成的全球網(wǎng)絡(luò)

Internet()。Internet

最早起源于美國國防部高級研究計劃局的

DARPA(DefenseAdvancedResearchProjectsAgency)

前身建立的該網(wǎng)于年投入使用年分為

ARPAARPANET,1969。1983,ARPANETARPANET

和純軍用的兩部分兩個網(wǎng)絡(luò)之間可以進(jìn)行通信和資源共享

MILNET(MilitaryNetwork),。1986

年美國國家科學(xué)基金會建立了自己的計算機(jī)通信網(wǎng)絡(luò)

,NSF(NationalScienceFoundation,)。

使美國各地的科研人員連接到分布在美國不同地區(qū)的超級計算機(jī)中心并將按地區(qū)劃分

NSFNET,

的計算機(jī)廣域網(wǎng)與超級計算機(jī)中心相連今天的已不再是計算機(jī)人員和軍事部門進(jìn)行科

。Internet

研的領(lǐng)域而是變成了一個開發(fā)和使用信息資源的覆蓋全球的信息海洋

,。

為了使連接在上的計算機(jī)能夠相互識別并進(jìn)行通信任何連入的計算機(jī)都必須

Internet,Internet

有一個唯一的標(biāo)識號即計算機(jī)在上的地址這個地址由協(xié)議進(jìn)行處理這個標(biāo)識號

“”,Internet。IP,

11

響應(yīng)式網(wǎng)頁設(shè)計與制作———基于計算思維

被稱為地址被廣泛使用的協(xié)議的第個版本即中規(guī)定地址用二進(jìn)制數(shù)來表

IP。TCP/IP4(IPv4),IP

示長位為了方便人們使用地址經(jīng)常用點分十進(jìn)制方式表示每個地址分為段

,32(bit)。,IP。IP4,

用十進(jìn)制數(shù)表示每段數(shù)字范圍為段與段之間用句點隔開如隨著

,0~255,,22。IPv4

地址的枯竭的替代版本被推出它具有更大的地址空間地址的長度為位地址空

,IPv4IPv6,,IP128,

間擴(kuò)大為128提高了安全性身份認(rèn)證和隱私權(quán)是的關(guān)鍵特性

2。IPv6,IPv6。

誕生后產(chǎn)生了基于的各種各樣的網(wǎng)絡(luò)服務(wù)如文件傳輸服務(wù)

Internet,Internet,(FileTransfer

電子郵件服務(wù)電子公告牌服務(wù)等其中服

Protocol,FTP)、、(BulletinBoardSystem,BBS)。,WWW

務(wù)是目前應(yīng)用最廣的一種互聯(lián)網(wǎng)應(yīng)用人們通過瀏覽器訪問網(wǎng)站獲得各種各

(WorldWideWeb),,

樣的信息隨著移動設(shè)備的興起特別是以智能手機(jī)平板式計算機(jī)為代表的移動終端的發(fā)展和

。,、

普及以及網(wǎng)絡(luò)網(wǎng)絡(luò)的不斷發(fā)展作為移動通信和互聯(lián)網(wǎng)融合的產(chǎn)物移動互聯(lián)網(wǎng)近年來

,4G、5G,,

得到了巨大的發(fā)展移動互聯(lián)網(wǎng)上的應(yīng)用不斷豐富成為人們獲取信息的新的主要途徑

。,。

1.1網(wǎng)站與網(wǎng)頁

1.1.1網(wǎng)站

網(wǎng)站是指根據(jù)一定的規(guī)則使用等語言制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)

(Website),HTML

頁的集合它建立在網(wǎng)絡(luò)基礎(chǔ)之上以計算機(jī)網(wǎng)絡(luò)和通信技術(shù)為依托通過一臺或多臺計算機(jī)向

。,、,

訪問者提供服務(wù)平時所說的訪問某個站點實際上訪問的是提供這種服務(wù)的一臺或多臺計算機(jī)

。,。

網(wǎng)站的種類很多