HTML5與CSS3程序設計

李洪建

副教授，山东省高等学校教师，国家技能鉴定高级考评员、全国高职计算机基础学会电子信息委员、山东省计算机职业教育教学指导委员会委员、山东省物联网职业教育集团副秘书长。近五年，获国家教学成果奖二等奖1项，省教学成果奖特等奖1项、一等奖2项，山东省教育科学研究优秀成果二等奖1项，指导学生获国赛一等奖2项，主持省教改、省软科学、省高校科技（人文）等课题7项，授权实用新型专利2项，软件著作权2个。

游学军

硕士，毕业于南京邮电大学，现任职于江苏海事职业技术学院信息工程学院，主要研究方向为软件开发，一直承担Java开发、前端开发相关核心课程的教学工作。担任过移动互联网应用软件开发、Web应用开发等全国职业院校技能大赛赛项裁判员，指导学生参加江苏省职业院校技能大赛获得一等奖、指导学生参加全国蓝桥杯软件大赛获得二等奖，指导学生参加中国软件杯大赛获得三等奖等。主持完成江苏省教育技术研究重点课题2项，参与多项省级课题的研究。

李真

硕士研究生，山东科技职业学院信息工程系中级讲师，从教8年，所建课程入选2017年度、2019年度、2020年度“山东终身学习在线”资源库课程，其中2019年度课程被评选为“山东省优秀课程资源”.曾获山东省第六届“超星杯”青年教师教学能力大赛二等奖，第八届“超星杯”青年教师教学能力大赛三等奖等等。

刘辉

计算机软件技术专业副教授。2017年获辽宁省信息技术优秀科研成果二等奖、辽宁省职业院校技能大赛（高职组）软件测试赛项一等奖。参编计算机专业教材3本。

朱晓彦

安徽工业经济职业技术学院计算机与艺术学院副院长，具有美国红帽认证工程师、虚拟化工程师、微软认证专家、中国开源推进联盟Linux认证讲师、南京五十五所云计算金牌讲师、工信部云计算工程师等认证资格。2020年荣获省级技术技能大师称号，并设立技术技能大师工作室；2014年荣获安徽省教育厅省级教坛新秀称号，并于2013年获得美国红帽软件公司颁发的中国区优秀教育贡献奖；获得教科研奖励多项。长期担任安徽省职业技能大赛中职组企业网搭建与应用项目裁判长，并担任安徽省中小学现代教育技术装备技能大赛专家裁判。

目錄

項目1　Web前端基礎 1

任務1 認識Web前端 1

1.1.1　Web前端發展歷史和前端主要技術簡介 1

1.1.2　Web前端學習路線 2

任務2　開發準備 3

1.2.1　主流瀏覽器 3

1.2.2　開發工具 3

小　　結 6

習　　題 6

項目2　HTML快速入門 8

任務1 我的第 一個頁面 8

2.1.1　案例描述 8

2.1.2　知識儲備 9

2.1.3　需求分析 13

2.1.4　案例實施 14

任務2　每日新聞列表 15

2.2.1　案例描述 15

2.2.2　知識儲備 15

2.2.3　需求分析 22

2.2.4　案例實施 22

任務3　課程信息表 24

2.3.1　案例描述 24

2.3.2　知識儲備 25

2.3.3　需求分析 27

2.3.4　案例實施 28

任務4　校園調查表 29

2.4.1　案例描述 29

2.4.2　知識儲備 30

2.4.3　需求分析 35

2.4.4　案例實施 35

任務5　項目實戰——網站登錄頁 37

2.5.1　案例描述 37

2.5.2　效果展示 37

2.5.3　需求分析 37

2.5.4　案例實施 38

小　　結 39

習　　題 39

項目3　CSS（層迭樣式表） 41

任務1 新聞詳情頁製作 41

3.1.1　案例描述 41

3.1.2　知識儲備 41

3.1.3　需求分析 65

3.1.4　案例實施 66

任務2　個人相冊製作 70

3.2.1　案例描述 70

3.2.2　知識儲備 71

3.2.3　需求分析 77

3.2.4　案例實施 77

任務3　商城列表佈局 79

3.3.1　案例描述 79

3.3.2　知識儲備 80

3.3.3　需求分析 83

3.3.4　案例實施 83

任務4　常見網站側邊導航欄的製作 88

3.4.1　案例描述 88

3.4.2　知識儲備 89

3.4.3　需求分析 91

3.4.4　案例實施 91

任務5　項目實戰——商城首頁製作 95

3.5.1　案例描述 95

3.5.2　需求分析 96

3.5.3　案例實施 97

小　　結 104

習　　題 104

項目4　HTML5構建網站 106

任務1 視頻/音頻展示網 106

4.1.1　案例描述 106

4.1.2　知識儲備 107

4.1.3　需求分析 110

4.1.4　案例實施 110

任務2　員工入職信息錄入 113

4.2.1　案例描述 113

4.2.2　知識儲備 114

4.2.3　需求分析 116

4.2.4　案例實施 117

任務3　項目實戰——學校網站 123

4.3.1　案例描述 123

4.3.2　需求分析 124

4.3.3　案例實施 125

小　　結 133

習　　題 133

項目5　CSS3新特性 135

任務1 照片牆 135

5.1.1　案例描述 135

5.1.2　知識儲備 136

5.1.3　需求分析 139

5.1.4　案例實施 140

任務2　旅游網首頁（響應式） 142

5.2.1　案例描述 142

5.2.2　知識儲備 144

5.2.3　需求分析 146

5.2.4　案例實施 147

任務3　個人相冊 157

5.3.1　案例描述 157

5.3.2　知識儲備 157

5.3.3　需求分析 159

5.3.4　案例實施 160

任務4　暴怒的小豬 162

5.4.1　案例描述 162

5.4.2　知識儲備 162

5.4.3　需求分析 164

5.4.4　案例實施 164

任務5　3D相冊環 168

5.5.1　案例描述 168

5.5.2　知識儲備 168

5.5.3　需求分析 169

5.5.4　案例實施 169

任務6　項目實戰——藝展網站 172

5.6.1　案例描述 172

5.6.2　效果展示 172

5.6.3　需求分析 172

5.6.4　案例實施 173

小　　結 181

習　　題 181

項目6　JavaScript編程基礎 183

任務1 抽獎活動 183

6.1.1　案例描述 183

6.1.2　知識儲備 184

6.1.3　需求分析 189

6.1.4　案例實施 189

任務2　公司數據加密 192

6.2.1　案例描述 192

6.2.2　知識儲備 192

6.2.3　需求分析 195

6.2.4　案例實施 195

任務3　找色塊游戲 196

6.3.1　案例描述 196

6.3.2　知識儲備 196

6.3.3　需求分析 198

6.3.4　案例實施 198

任務4　用戶信息錄入 200

6.4.1　案例描述 200

6.4.2　知識儲備 201

6.4.3　需求分析 204

6.4.4　案例實施 204

任務5　項目實戰——寵物世界網站 209

6.5.1　案例描述 209

6.5.2　需求分析 209

6.5.3　案例實施 209

小　　結 220

習　　題 220

項目7　綜合項目——環保網站 222

7.1 項目介紹 222

7.2　需求分析 222

7.3　頁面設計 224

7.4　項目實施 224