项目一：Web前端开发基础
项目描述
情景导入
学习目标
项目实施
知识导图
任务1.1前端开发相关概念
【知识储备】
新知学习1：Web的起源
新知学习2：Web的相关概念
【知识拓展】Web的特点
【课后练习】
任务1.2前端开发技术
【知识储备】
新知学习1：Web标准三剑客
新知学习2：前端框架技术
【知识拓展】后端开发技术
【课后练习】
任务1.3前端开发工具
【知识储备】
新知学习1：前端开发工具
新知学习2：浏览器工具
【知识拓展】Web工作原理
【课后练习】
任务1.4前端开发流程
【知识储备】
新知学习1：前端开发流程
新知学习2：HTML文档的基本结构
【操作实施】
【任务拓展】
【课后练习】
项目小结
项目延伸
项目二：简单展示类网页开发项目——“中国民俗”网站专题内容的实现
项目描述
情景导入
学习目标
项目实施
任务2.1 创建“中国民俗”网站项目
【任务分析】
【操作实施】
任务实践2.1.1：新建网站项目
任务2.2 制作“中国民俗”网站“传统节日”页面内容
【任务分析】
【知识储备】
知识导图
新知学习1：文本与段落
新知学习2：超链接
新知学习3：注释
【操作实施】
任务实践2.2.1：制作页面文本内容
任务实践2.2.2：制作页面超链接内容
【任务拓展】
【课后练习】
任务2.3 制作“中国民俗”网站首页内容
【任务分析】
【知识储备】
知识导图
新知学习1：图片
新知学习2：块级元素与行内元素
【操作实施】
任务实践2.3.1：搭建页面框架
任务实践2.3.2：制作页面图片内容
【任务拓展】
【课后练习】
任务2.4 为“中国民俗”网站页面设置外观
【任务分析】
【知识储备】
知识导图
新知学习1：CSS基本概念和引入方式
新知学习2：CSS文本样式
新知学习3：CSS字体样式
新知学习4：CSS宽高样式
新知学习5：CSS背景样式
【操作实施】
任务实践2.4.1：设置首页外观
任务实践2.4.2：设置详情页外观
【任务拓展】
【课后练习】
项目小结
项目延伸
项目三：网站功能模块类开发项目——“古诗文”网站功能模块的实现
项目描述
情景导入
学习目标
项目实施
任务3.1 创建“古诗文网站”网站项目
【任务分析】
【操作实施】
任务实践3.1.1：新建网站项目
任务3.2 制作“著名诗人”模块
【任务分析】
【知识储备】
知识导图
新知学习1：CSS选择器基础
新知学习2：盒子模型基础
新知学习3：浮动布局
【操作实施】
任务实践3.2.1：制作“著名诗人”模块内容
任务实践3.2.2：设置“著名诗人”模块外观
【任务拓展】
【课后练习】
任务3.3 制作“古诗推荐”、“诗文释义”模块
【任务分析】
【知识储备】
知识导图
新知学习1：有序列表和无序列表
新知学习2：定义列表
【操作实施】
任务实践3.3.1：制作“古诗推荐”模块
任务实践3.3.2：制作“诗文释义”模块
【任务拓展】
【课后练习】
任务3.4 制作“诗人介绍”模块
【任务分析】
【知识储备】
知识导图
新知学习1：表格
新知学习2：CSS边框属性border
【操作实施】
任务实践3.4.1：制作“诗人介绍”模块内容
任务实践3.4.2：设置“诗人介绍”模块外观
【任务拓展】
【课后练习】
项目小结
项目延伸

项目四：综合电商类网站开发项目——“助农乐购”网站页面的实现
项目描述
情景导入
学习目标
项目实施
任务4.1 创建“助农乐购”网站项目
【任务分析】
【操作实施】
任务实践4.1.1：新建网站项目
任务4.2 制作“助农乐购”网站注册页面
【任务分析】
【知识储备】
知识导图
新知学习1：表单元素
新知学习2：CSS选择器进阶
【操作实施】
任务实践4.2.1：搭建页面基础
任务实践4.2.2：制作页面头部区
任务实践4.2.3：制作页面主体区
任务实践4.2.4：制作页面脚部区
【任务拓展】
【课后练习】
任务4.3 制作“助农乐购”网站商品页面
【任务分析】
【知识储备】
知识导图
新知学习1：CSS伪类
新知学习2：元素类型转换
新知学习3：ifame框架
【操作实施】
任务实践4.3.1：搭建页面基础
任务实践4.3.2：制作页面头部区
任务实践4.3.3：制作商品导航路径
任务实践4.3.4：制作商品预览区
任务实践4.3.5：制作商品介绍区
【任务拓展】
【课后练习】
任务4.4 制作“助农乐购”网站主页
【任务分析】
【知识储备】
知识导图
新知学习1：CSS精灵图
新知学习2：定位布局
【操作实施】
任务实践4.4.1：搭建页面基础
任务实践4.4.2：制作广告导航区
任务实践4.4.3：制作热卖推荐区
【任务拓展】
【课后练习】
项目小结
项目延伸