HTML5+CSS3項(xiàng)目開發(fā)實(shí)戰(zhàn)
定 價(jià):36 元
- 作者:王慶樺,王新強(qiáng)主編
- 出版時(shí)間:2017/2/1
- ISBN:9787121306303
- 出 版 社:電子工業(yè)出版社
- 中圖法分類:TP312.8;TP393.092.2
- 頁碼:216頁
- 紙張:膠紙版
- 版次:1
- 開本:16K
本書以HTML5與CSS3知識(shí)點(diǎn)為主線,響應(yīng)式布局項(xiàng)目為任務(wù)載體,采用迭代遞增的網(wǎng)頁設(shè)計(jì)方法,根據(jù)項(xiàng)目需求來逐步完成任務(wù),實(shí)現(xiàn)學(xué)習(xí)相關(guān)知識(shí)與動(dòng)手實(shí)操并重的目的。全書按照網(wǎng)頁設(shè)計(jì)的步驟,圍繞HTML5與CSS3重要特性進(jìn)行編寫,通過詳細(xì)講解各個(gè)任務(wù)的制作來對(duì)知識(shí)點(diǎn)進(jìn)行總結(jié),使讀者更詳細(xì)地了解網(wǎng)頁設(shè)計(jì)制作技術(shù)。本書以學(xué)習(xí)者為中心,不僅強(qiáng)調(diào)基本技能的訓(xùn)練、基礎(chǔ)知識(shí)的夯實(shí),還注重拓展能力的培養(yǎng)。所以內(nèi)容編排方式為“學(xué)習(xí)目標(biāo)、學(xué)習(xí)路徑、任務(wù)描述、任務(wù)實(shí)施、任務(wù)拓展、任務(wù)總結(jié)、英語角、任務(wù)習(xí)題”,內(nèi)容翔實(shí)、難度漸進(jìn)、結(jié)構(gòu)清晰、語言準(zhǔn)確,使讀者學(xué)以致用。
隨著信息技術(shù)向縱深發(fā)展,作為依托互聯(lián)網(wǎng)發(fā)展起來的網(wǎng)站制作面臨新的挑戰(zhàn)。一方面,用戶更加注重站點(diǎn)信息豐富、功能齊備、頁面精美、操作流暢;另一方面,要滿足用戶不受系統(tǒng)平臺(tái)和軟件插件的限制,可以通過移動(dòng)設(shè)備訪問網(wǎng)站。Web新技術(shù)HTML5和CSS3能夠?qū)崿F(xiàn)這些新要求,使其迅速成為網(wǎng)頁設(shè)計(jì)的熱點(diǎn)。
網(wǎng)頁設(shè)計(jì)與制作課程是B/S架構(gòu)軟件項(xiàng)目開發(fā)的Web前端技術(shù)課程,而HTML與CSS是網(wǎng)頁制作技術(shù)的核心和基礎(chǔ),也是每個(gè)網(wǎng)頁制作者必須掌握的基本知識(shí),兩者在網(wǎng)頁設(shè)計(jì)中不可或缺。
網(wǎng)頁設(shè)計(jì)本身是一個(gè)復(fù)雜的系統(tǒng)過程,需要了解問題,對(duì)問題進(jìn)行分析,用邏輯的方法確定最佳的優(yōu)化方案,最后通過相關(guān)技術(shù)來實(shí)現(xiàn)。初學(xué)者如何掌握網(wǎng)頁設(shè)計(jì)的方法尤為重要。本書以HTML5與CSS3技術(shù)為工具,以響應(yīng)式布局Web頁面設(shè)計(jì)為載體,強(qiáng)調(diào)問題的分析、技術(shù)的掌握、能力的拓展,所有知識(shí)點(diǎn)都緊跟HTML5與CSS3的發(fā)展動(dòng)態(tài),以創(chuàng)新的模式、結(jié)構(gòu)化的設(shè)計(jì)、實(shí)用的案例、簡明的語言詳細(xì)介紹了使用HTML5與CSS3進(jìn)行網(wǎng)頁設(shè)計(jì)與制作的相關(guān)內(nèi)容和技巧。
本書針對(duì)職業(yè)教育人才培養(yǎng)規(guī)格的需要,突出職業(yè)素質(zhì)教育和技術(shù)應(yīng)用能力,運(yùn)用創(chuàng)新思維模式理實(shí)一體系統(tǒng)化教學(xué)方法。各項(xiàng)目首先確定學(xué)習(xí)目標(biāo),通過項(xiàng)目實(shí)施掌握相關(guān)的基本知識(shí),然后通過拓展練習(xí)強(qiáng)調(diào)基本技能的訓(xùn)練,最后輔以習(xí)題。本書每個(gè)項(xiàng)目都提供英語角,形成專業(yè)詞匯提示,幫助讀者對(duì)國際化專業(yè)術(shù)語的認(rèn)識(shí),提升學(xué)習(xí)效果。
本書編寫有以下特色:
。1)全書結(jié)構(gòu)廣度層面體現(xiàn)了職業(yè)教育特點(diǎn),以應(yīng)用為主,適度夠用為量,內(nèi)容以HTML5與CSS3技術(shù)的技能訓(xùn)練為主線,突出能力的培養(yǎng),內(nèi)容完整、由淺入深、循序漸進(jìn),層次清楚。
。2)各項(xiàng)目結(jié)構(gòu)深度層面運(yùn)用了思維導(dǎo)圖形式,提供一個(gè)以職業(yè)技能發(fā)展為主軸的結(jié)構(gòu)化學(xué)習(xí)方案,直觀體現(xiàn)學(xué)習(xí)路徑,提升學(xué)習(xí)效率。
。3)內(nèi)容采用任務(wù)驅(qū)動(dòng)、項(xiàng)目導(dǎo)入、教學(xué)做一體化模式編排而成,通過任務(wù)驅(qū)動(dòng)將項(xiàng)目載體融入教學(xué),高強(qiáng)度培養(yǎng)學(xué)生工程實(shí)踐能力,要求在教學(xué)過程中達(dá)到項(xiàng)目實(shí)踐實(shí)訓(xùn)的目的,實(shí)現(xiàn)技術(shù)培養(yǎng)與行業(yè)企業(yè)人才需求接軌。
(4)項(xiàng)目設(shè)計(jì)實(shí)用性強(qiáng),選取當(dāng)今互聯(lián)網(wǎng)熱點(diǎn)網(wǎng)站設(shè)計(jì)作為素材,將8個(gè)仿真項(xiàng)目融入教材,提高了學(xué)習(xí)者的學(xué)習(xí)熱情;同時(shí),添加了企業(yè)站點(diǎn)開發(fā)的管理規(guī)范元素,突出項(xiàng)目管理理念。
。5)突出“做中學(xué)、做中教、做中練”,與項(xiàng)目剖析相結(jié)合,在體系結(jié)構(gòu)安排上,盡可能將HTML5+CSS3的重要特性與項(xiàng)目相結(jié)合。通過項(xiàng)目的分析、設(shè)計(jì)、總結(jié),將所學(xué)的知識(shí)與技能點(diǎn)融會(huì)貫通,易于理解,能夠幫助讀者提升實(shí)際應(yīng)用技能。
。6)注重“以能力培養(yǎng)為核心,強(qiáng)化實(shí)際操作的訓(xùn)練”,每個(gè)項(xiàng)目都精心設(shè)計(jì)了拓展練習(xí),目的明確,突出實(shí)用性、操作性。考慮到初學(xué)者經(jīng)常困惑于如何進(jìn)行頁面程序的設(shè)計(jì),拓展項(xiàng)目給出了相關(guān)的提示步驟,使學(xué)生在學(xué)習(xí)的過程中不至于“毫無頭緒”而產(chǎn)生厭煩,從而提高學(xué)習(xí)的興趣和對(duì)編程的愛好程度。
(7)配有針對(duì)性的習(xí)題,強(qiáng)調(diào)每個(gè)項(xiàng)目的學(xué)習(xí)重點(diǎn),鞏固對(duì)知識(shí)的掌握。同時(shí),每個(gè)項(xiàng)目的英語角提供了相應(yīng)的專業(yè)詞匯,利于專業(yè)國際化標(biāo)準(zhǔn)的引入和職業(yè)素養(yǎng)的培養(yǎng)。
。8)豐富的新形態(tài)教學(xué)資源。本書除配套提供電子教學(xué)課件、案例庫、習(xí)題庫之外,還提供了大量的關(guān)于網(wǎng)頁設(shè)計(jì)、HTML5和CSS3技術(shù)的數(shù)字資源庫,讀者可以通過掃描二維碼獲取相關(guān)資料,實(shí)現(xiàn)課程全方位的資源共享。
本書由長期工作在職業(yè)教育教學(xué)一線,同時(shí)具有企業(yè)實(shí)踐開發(fā)經(jīng)驗(yàn)的教師編寫而成。其中,項(xiàng)目1~項(xiàng)目4主要由王慶樺老師編寫,項(xiàng)目5~項(xiàng)目8和附錄主要由王新強(qiáng)老師編寫,王玥老師編寫了本書部分內(nèi)容。全書由王慶樺老師統(tǒng)稿。
雖然編者力求準(zhǔn)確無誤、盡善盡美,但由于時(shí)間倉促,書中的內(nèi)容仍難免出現(xiàn)錯(cuò)誤或不足之處,懇請(qǐng)專家、教師和讀者批評(píng)指正。
編 者
王慶樺,天津中德應(yīng)用技術(shù)大學(xué) 教務(wù)處副處長,中國職業(yè)技術(shù)教育學(xué)會(huì)(CSTVE) 教學(xué)工作委員會(huì) 自動(dòng)化技術(shù)類專業(yè)教學(xué)研究會(huì) 副秘書長,天津市"五一”勞動(dòng)獎(jiǎng)?wù)芦@得者,從事相關(guān)專業(yè)和課程教學(xué)14年。先后在加拿大BC省理工學(xué)院參加計(jì)算機(jī)技術(shù)、教育教學(xué)技能培訓(xùn)、清華大學(xué)Web應(yīng)用開發(fā)技術(shù)高級(jí)研修班、訪問過澳大利亞和新西蘭等國家,學(xué)校職業(yè)教育體系。主編或參與編寫教材9冊(cè);參加***教改課題3項(xiàng),市級(jí)教改課題3項(xiàng);作為主要承擔(dān)者參與***、市級(jí)精品課或資源共享課3門;指導(dǎo)學(xué)生參加天津市高職計(jì)算機(jī)技能大賽獲一等獎(jiǎng)1項(xiàng),二等獎(jiǎng)2項(xiàng)、三等獎(jiǎng)2項(xiàng)。
項(xiàng)目1 服裝品牌墻界面設(shè)計(jì) 1
學(xué)習(xí)目標(biāo) 1
學(xué)習(xí)路徑 1
項(xiàng)目描述 1
項(xiàng)目技能 3
1.1 HTML5概述 3
1.2 HTML5基礎(chǔ) 3
1.3 網(wǎng)頁編輯器及環(huán)境 5
1.4 CSS3初體驗(yàn) 7
1.5 CSS樣式表 8
1.6 CSS選擇器 11
項(xiàng)目實(shí)施 16
項(xiàng)目拓展 20
項(xiàng)目總結(jié) 22
英語角 22
項(xiàng)目習(xí)題 22
項(xiàng)目2 新浪微博導(dǎo)航界面設(shè)計(jì) 24
學(xué)習(xí)目標(biāo) 24
學(xué)習(xí)路徑 24
項(xiàng)目描述 24
項(xiàng)目技能 25
2.1 HTML5文本標(biāo)簽 26
2.2 CSS文本屬性 30
2.3 CSS字體屬性 38
2.4 CSS顏色 42
2.5 CSS導(dǎo)航欄 43
2.6 固定布局和流動(dòng)布局 45
項(xiàng)目實(shí)施 46
項(xiàng)目拓展 53
項(xiàng)目總結(jié) 54
英語角 55
項(xiàng)目習(xí)題 55
項(xiàng)目3 同城旅游主界面設(shè)計(jì) 56
學(xué)習(xí)目標(biāo) 56
學(xué)習(xí)路徑 56
項(xiàng)目描述 56
項(xiàng)目技能 57
3.1 網(wǎng)頁中支持的圖片格式 57
3.2 HTML5圖像標(biāo)簽 58
3.3 設(shè)置背景屬性 60
3.4 盒子模型 67
3.5 CSS3新增邊框?qū)傩?72
3.6 HTML5圖像過渡和變形屬性 76
任務(wù)實(shí)施 80
任務(wù)拓展 88
任務(wù)總結(jié) 90
英語角 90
任務(wù)習(xí)題 91
項(xiàng)目4 小快魚旗艦店主界面設(shè)計(jì) 92
學(xué)習(xí)目標(biāo) 92
學(xué)習(xí)路徑 92
項(xiàng)目描述 92
項(xiàng)目技能 94
4.1 列表的作用 94
4.2 HTML5文本列表標(biāo)簽 94
4.3 CSS列表標(biāo)簽屬性 97
4.4 HTML5創(chuàng)建表格 101
4.5 CSS定位 105
項(xiàng)目實(shí)施 110
項(xiàng)目拓展 119
項(xiàng)目總結(jié) 120
英語角 121
任務(wù)習(xí)題 121
項(xiàng)目5 同城旅游用戶注冊(cè)界面設(shè)計(jì) 122
學(xué)習(xí)目標(biāo) 122
學(xué)習(xí)路徑 122
項(xiàng)目描述 122
項(xiàng)目技能 123
5.1 表單的概述 123
5.2 表單基本元素的使用 125
5.3 HTML5新增的input屬性 135
項(xiàng)目實(shí)施 142
項(xiàng)目拓展 146
項(xiàng)目總結(jié) 149
英語角 149
任務(wù)習(xí)題 149
項(xiàng)目6 天天動(dòng)聽播放器界面設(shè)計(jì) 150
學(xué)習(xí)目標(biāo) 150
學(xué)習(xí)路徑 150
項(xiàng)目描述 150
項(xiàng)目技能 151
6.1 audio標(biāo)簽概述 151
6.2 audio標(biāo)簽的屬性 153
6.3 video標(biāo)簽概述 153
6.4 video標(biāo)簽的屬性 154
項(xiàng)目實(shí)施 155
項(xiàng)目拓展 157
項(xiàng)目總結(jié) 158
英語角 158
任務(wù)習(xí)題 158
項(xiàng)目7 使用HTML5繪制火柴棒人物 160
學(xué)習(xí)目標(biāo) 160
學(xué)習(xí)路徑 160
項(xiàng)目描述 160
項(xiàng)目技能 161
7.1 Canvas概述 161
7.2 Canvas繪制基本圖形 162
7.3 繪制漸變圖形 166
7.4 繪制變形圖形 169
7.5 圖形組合 175
7.6 使用圖像 176
7.7 繪制文字 177
7.8 SVG 179
項(xiàng)目實(shí)施 179
項(xiàng)目拓展 182
項(xiàng)目總結(jié) 184
英語角 184
項(xiàng)目習(xí)題 184
項(xiàng)目8 HTML5+CSS3開發(fā)購物網(wǎng)首頁 186
學(xué)習(xí)目標(biāo) 186
學(xué)習(xí)路徑 186
項(xiàng)目描述 186
項(xiàng)目規(guī)劃 187
8.1 網(wǎng)站定位 187
8.2 需求分析 188
8.3 網(wǎng)站的風(fēng)格設(shè)計(jì) 188
項(xiàng)目實(shí)施 188
項(xiàng)目拓展 202
項(xiàng)目總結(jié) 204
附錄 參考答案 205
參考文獻(xiàn) 206