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