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