HTML5與CSS3網(wǎng)頁設(shè)計(jì)項(xiàng)目教程
定 價(jià)：49.8 元
- 作者：孫海曼 凌杰
- 出版時(shí)間：2025/10/1
- ISBN：9787115668998
- 出 版 社：人民郵電出版社
- 中圖法分類：TP393.092.2
- 頁碼：
- 紙張：膠版紙
- 版次：
- 開本：16開
本書旨在通過模擬實(shí)際生產(chǎn)環(huán)境中企業(yè)網(wǎng)站設(shè)計(jì)的基本流程，系統(tǒng)介紹HTML5和CSS3及相關(guān)框架在網(wǎng)頁設(shè)計(jì)中的應(yīng)用。本書內(nèi)容包括企業(yè)的線上名片設(shè)計(jì)、企業(yè)網(wǎng)站的首頁設(shè)計(jì)、企業(yè)網(wǎng)站的“新聞動(dòng)態(tài)”頁設(shè)計(jì)、企業(yè)網(wǎng)站的“產(chǎn)品展示”頁設(shè)計(jì)、企業(yè)網(wǎng)站的“申請加盟”頁設(shè)計(jì)5個(gè)核心項(xiàng)目，有助于讀者在實(shí)踐中掌握頁面布局、色彩搭配、圖片處理等方面的網(wǎng)頁設(shè)計(jì)技能。
本書適合對Web前端開發(fā)感興趣的初學(xué)者、計(jì)算機(jī)專業(yè)的學(xué)生和從事網(wǎng)頁設(shè)計(jì)的在職人員閱讀。
·項(xiàng)目實(shí)戰(zhàn)強(qiáng)：模擬企業(yè)真實(shí)設(shè)計(jì)流程，5 大核心項(xiàng)目覆蓋網(wǎng)站全場景開發(fā)。
·技術(shù)系統(tǒng)全：系統(tǒng)講解 HTML5+CSS3 及相關(guān)框架，掌握布局、配色等核心技能。
·受眾適配廣：適合 Web 前端初學(xué)者、計(jì)算機(jī)學(xué)生及網(wǎng)頁設(shè)計(jì)在職人員學(xué)習(xí)。
·技能落地快：從線上名片到加盟頁設(shè)計(jì)，邊學(xué)邊練快速掌握實(shí)戰(zhàn)能力。
·目標(biāo)導(dǎo)向明：聚焦企業(yè)網(wǎng)站設(shè)計(jì)需求，所學(xué)技能直接對接職場應(yīng)用。
孫海曼，北京市大興區(qū)第一職業(yè)學(xué)校數(shù)字技術(shù)信息系主任，教務(wù)處主任，精通前端開發(fā)技術(shù)，在前端開發(fā)方面擁有豐富的經(jīng)驗(yàn)。
凌杰，浙江大學(xué)遠(yuǎn)程教育學(xué)院“榮譽(yù)學(xué)員”，自由開發(fā)人員，精通JavaScript、Python、C等編程語言，擁有豐富的軟件開發(fā)和軟件測試經(jīng)驗(yàn)，著有《JavaScript全棧開發(fā)》《Node.js后端全程實(shí)戰(zhàn)》等圖書。
項(xiàng)目1 企業(yè)的線上名片設(shè)計(jì)1
【學(xué)習(xí)目標(biāo)】1
【學(xué)習(xí)場景描述】1
【任務(wù)書】1
【任務(wù)拆解】2
【知識(shí)準(zhǔn)備】2
知識(shí)點(diǎn)1：HTML基礎(chǔ)2
知識(shí)點(diǎn)2：CSS基礎(chǔ)4
知識(shí)點(diǎn)3：配置工作環(huán)境8
【工作實(shí)施和交付】13
第 1步：創(chuàng)建一個(gè)網(wǎng)頁設(shè)計(jì)項(xiàng)目14
第 2步：定義網(wǎng)頁的文檔結(jié)構(gòu)14
第3步：定義網(wǎng)頁的外觀樣式15
【拓展知識(shí)】18
知識(shí)點(diǎn)1：更多HTML標(biāo)記18
知識(shí)點(diǎn)2：更多CSS選擇器19
【作業(yè)】21
【作業(yè)評價(jià)】22
項(xiàng)目2 企業(yè)網(wǎng)站的首頁設(shè)計(jì)23
【學(xué)習(xí)目標(biāo)】23
【學(xué)習(xí)場景描述】23
【任務(wù)書】24
【任務(wù)拆解】24
【知識(shí)準(zhǔn)備】24
知識(shí)點(diǎn)1：HTML5中的布局類標(biāo)記
及其用法25
知識(shí)點(diǎn)2：CSS3中的尺寸與配色
問題27
知識(shí)點(diǎn)3：Bootstrap框架的基本
用法31
【工作實(shí)施和交付】42
第 1步：創(chuàng)建凌雪冰熊的官方網(wǎng)站
項(xiàng)目42
第 2步：完成網(wǎng)站首頁的布局
設(shè)計(jì)43
第3步：填充網(wǎng)站首頁的內(nèi)容
元素47
【拓展知識(shí)】51
知識(shí)點(diǎn)1：移動(dòng)端的屏幕適配51
知識(shí)點(diǎn)2：基于Bootstrap框架的
響應(yīng)式設(shè)計(jì)54
【作業(yè)】55
【作業(yè)評價(jià)】55
項(xiàng)目3 企業(yè)網(wǎng)站的“新聞活動(dòng)”頁設(shè)計(jì)56
【學(xué)習(xí)目標(biāo)】56
【學(xué)習(xí)場景描述】56
【任務(wù)書】57
【任務(wù)拆解】57
【知識(shí)準(zhǔn)備】57
知識(shí)點(diǎn)1：HTML5中的圖文類
標(biāo)記57
知識(shí)點(diǎn)2：CSS3中的元素盒模型61
知識(shí)點(diǎn)3：基于Bootstrap框架的
排版方案65
【工作實(shí)施和交付】79
第 1步：分析現(xiàn)有源代碼并提取
網(wǎng)頁模板79
第 2步：創(chuàng)建“新聞活動(dòng)”頁并完成布局81
第3步：對頁面進(jìn)行內(nèi)容填充并
排版83
【拓展知識(shí)】87
知識(shí)點(diǎn)1：CSS3中的元素定位
方式87
知識(shí)點(diǎn)2：Bootstrap框架提供的
更多組件88
【作業(yè)】91
【作業(yè)評價(jià)】92
項(xiàng)目4 企業(yè)網(wǎng)站的“產(chǎn)品展示”頁設(shè)計(jì)93
【學(xué)習(xí)目標(biāo)】93
【學(xué)習(xí)場景描述】93
【任務(wù)書】94
【任務(wù)拆解】94
【知識(shí)準(zhǔn)備】94
知識(shí)點(diǎn)1：在網(wǎng)頁中嵌入媒體
播放器94
知識(shí)點(diǎn)2：在網(wǎng)頁中嵌入JavaScript
代碼97
知識(shí)點(diǎn)3：Bootstrap框架提供的
相關(guān)組件100
【工作實(shí)施和交付】105
第 1步：基于網(wǎng)頁模板創(chuàng)建目標(biāo)
頁面105
第 2步：完成“產(chǎn)品展示”頁的
設(shè)計(jì)107
第3步：多媒體播放界面的設(shè)計(jì)112
【拓展知識(shí)】114
知識(shí)點(diǎn)：在網(wǎng)頁中嵌入矢量圖與
動(dòng)畫114
【作業(yè)】116
【作業(yè)評價(jià)】117
項(xiàng)目5 企業(yè)網(wǎng)站的“申請加盟”頁設(shè)計(jì)118
【學(xué)習(xí)目標(biāo)】118
【學(xué)習(xí)場景描述】118
【任務(wù)書】119
【任務(wù)拆解】119
【知識(shí)準(zhǔn)備】119
知識(shí)點(diǎn)1：HTML5中的交互類
標(biāo)記119
知識(shí)點(diǎn)2：基于CSS3的表單樣式
設(shè)計(jì)124
知識(shí)點(diǎn)3：基于Bootstrap框架的
表單樣式設(shè)計(jì)128
【工作實(shí)施和交付】136
第 1步：基于網(wǎng)頁模板創(chuàng)建
目標(biāo)頁面136
第 2步：完成新頁面的圖文排版137
第3步：添加用于提交申請的
界面140
【拓展知識(shí)】142
知識(shí)點(diǎn)：Bootstrap框架中的交互
組件142
【作業(yè)】145
【作業(yè)評價(jià)】145
附錄 Git146
書單推薦
