WEB前端设计基础(第2版)

目 录

项目1 认识Web前端设计 ··········································································1

学习任务1.1 了解Web基础知识 ·······················································2

任务1.1.1 理解Web相关概念 ·····························································3

任务1.1.2 了解页面元素 ···································································10

任务1.1.3 了解Web前端设计技术与工具 ·············································14

任务1.1.4 了解网站建设流程 ·····························································17

学习任务1.2 设计网站 ····································································22

任务1.2.1 设计网站形象 ···································································23

任务1.2.2 设计页面布局 ···································································28

任务1.2.3 设计网站导航及栏目 ··························································33

任务1.2.4 设计网页层次及目录结构 ····················································37

项目2 创建及编辑Web网页——HTML5 ···················································41

学习任务2.1 创建网站首页文档 ························································42

任务2.1.1 创建网站首页 ···································································43

任务2.1.2 理解HTML标记语法 ·························································48

任务2.1.3 理解HTML布局标记 ·························································55

任务2.1.4 理解HTML5结构标记 ························································60

学习任务2.2 编辑网站首页内容 ························································68

任务2.2.1 插入文本及列表 ································································70

任务2.2.2 插入图像和媒体 ································································76

任务2.2.3 设置超链接和应用框架 ·······················································83

任务2.2.4 应用表格和表单 ································································91

项目3创建及应用Web样式——CSS3·····················································113

学习任务3.1 创建网站首页样式 ······················································114

任务3.1.1 理解CSS语法 ································································115

任务3.1.2 应用CSS样式 ································································119

任务3.1.3 理解CSS选择器 ·····························································125

任务3.1.4 理解CSS层叠性和继承性 ·················································139

学习任务3.2 设计网站首页样式 ······················································145

任务3.2.1 设置CSS字体和文本属性 ·················································146

任务3.2.2 设置CSS背景和列表属性 ·················································151

任务3.2.3 设置CSS边框和表格属性 ·················································158

任务3.2.4 应用CSS3效果 ·······························································165

学习任务3.3 定位网站页面元素 ······················································179

任务3.3.1 理解CSS盒子模型 ··························································180

任务3.3.2 应用流布局 ····································································185

任务3.3.3 应用浮动布局 ·································································188

任务3.3.4 应用定位布局 ·································································194

任务3.3.5 制作移动端页面 ······························································204

项目4应用Web网页特效——JavaScript ·················································215

学习任务4.1 理解JavaScript语言基础 ··········································216

任务4.1.1 认识JavaScript ································································217

任务4.1.2 认识JavaScript语言基础 ···················································220

任务4.1.3 认识JavaScript自定义函数 ················································225

任务4.1.4 认识JavaScript控制语句 ···················································226

任务4.1.5 认识JavaScript对象 ·························································233

任务4.1.6 认识JavaScript内置对象 ···················································240

学习任务4.2 应用jQuery ·····························································247

任务4.2.1 理解jQuery框架·····························································248

目录

VII

任务4.2.2 利用jQuery实现网页特效 ·················································256

任务4.2.3 了解Web前端框架技术 ····················································263

学习任务4.3 了解HTML5高级应用 ···············································266

任务4.3.1 了解HTML5画布 ····························································267

任务4.3.2 了解HTML5拖放操作 ······················································276

任务4.3.3 了解HTML5地理定位 ······················································280

项目5 网站设计与开发综合案例 ······························································287

实践任务5.1 网站设计 ··································································288

实践任务5.2 网站首页布局及内容编辑 ·············································290

实践任务5.3 应用CSS样式美化网站首页 ·······································297

实践任务5.4 应用CSS样式精准定位网站页面元素 ···························305

参考文献 ···································································································314