目 录

项目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样式——CSS3113

学习任务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

任务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