\t任务一 初探Web前端技术
任务描述
知识引入
1.网站、网页和主页
2.什么是Web和Web标准
3.Web前端技术的发展
4.搭建Web前端开发环境
5.Web页面的基本结构
6.浏览器兼容性
任务实现：动手编写个前端页面
任务小结
课后练习
任务二 使用HTML5搭建旅游公司网站首页结构
任务描述
知识引入
1.HTML5的标题、段落和文本格式化标签
2.HTML5的图片标签
3.HTML5的列表标签
4.HTML5的超链接标签
5.HTML5的表格标签
6.传统的布局标签<div>和<span>
7.HTML5的各种语义化分段元素
任务实现：搭建旅游公司网站首页结构
1.规划网站目录结构
2.分析首页文档结构
3.构建首页结构
4.添加网页内容
任务拓展：制作旅游公司网站二级页面
任务小结
课后练习
任务三 使用DIV+CSS实现旅游公司网站首页布局
任务描述
知识引入
1.CSS规则的基本语法
2.CSS选择器
3.CSS规则的应用方式
4.CSS的层叠和继承
5.CSS盒子模型
6.CSS盒子的定位机制
7.DIV+CSS布局剖析
任务实现：使用DIV+CSS布局旅游公司首页
1.新建CSS样式表文件并应用到网页中
2.基础样式设置
3.头部布局与定位
4.主体内容.main_top区域布局与定位
5.主体内容.main_middle区域布局与定位
6.主体内容.main_bottom区域布局与定位
7.页脚区域布局与定位
任务拓展：使用CSS实现旅游公司网站二级页面“华阳湖景区”的布局结构
任务小结
课后练习
任务四 使用CSS3美化超链接
任务描述
知识引入
1.超链接的基本属性
2.CSS样式伪类
3.鼠标特效
任务实现：实现首页中的超链接效果
1.设置首页头部导航条超链接样式
2.设置尾部超链接样式
任务拓展：实现二级页面“华阳湖景区”的导航条链接
任务小结
课后练习
任务五 使用CSS3制作导航
任务描述
知识引入
1.列表符号
2.图片符号
3.列表符号位置
任务实现：制作旅游公司网站首页导航
1.水平排列导航条
2.编排页面中间内容区域
任务拓展：制作二级菜单和职位列表
1.制作二级菜单
2.制作职位列表
任务小结
课后练习
任务六 美化网页
任务描述
知识引入
1.text-Shadow
2.box-Shadow
3.border-radius
4.background
5.Opacity
6.Font Awesome字体图标
7.Animation动画属性
任务实现：美化旅游公司网站页面
1.为网页添加图标
2.为按钮添加阴影
3.设置图片透明度
任务拓展：利用阿里巴巴矢量图标库制作购物车
任务小结
课后练习
任务七 添加用户交互界面——表单
任务描述
知识引入
1.标签
2.元素
3.HTML5新增的类型
任务实现：制作旅游公司网站首页搜索框、意见反馈表
1.制作搜索框
2.制作意见反馈表
任务拓展：实现搜索框长度变化
任务小结
课后练习
任务八 使用Flex实现网页响应式布局
任务描述
知识引入
1.响应式布局基础知识
2.Flex布局
任务实现：使用Flex布局重构旅游公司首页
1.实现图片为响应式
2.设置怪异盒模型计算容器宽度
3.弹性文字
4.媒体查询
5.实现首页头部响应式效果
6.主体内容.main_top区域的实现
7.主体内容.main_middle区域的实现
8.主体内容.main_bottom区域的实现
9.实现页脚效果
任务拓展：使用Flex布局重构二级页面“华阳湖景区”
任务小结
课后练习
任务九 使用Bootstrap实现网页响应式布局
任务描述
知识引入
1.Bootstrap环境搭建
2.容器
3.栅格系统
4.样式
5.组件
任务实现：使用Bootstrap重构旅游公司首页
1.下载Bootstrap
2.网页头部代码实现
3.图片轮播效果代码实现
4.公司介绍区域代码实现
5.景区图片部分代码实现
6.求职信息区域代码实现
7.页脚区域代码实现
任务拓展：使用Bootstrap重构二级页面“华阳湖景区”
任务小结
课后练习
任务十 综合练习——儿童玩具商城网站设计与制作
任务描述
任务实现：设计与制作儿童玩具商城网站
1.规划网站目录结构
2.首页代码实现
3.“进口玩具”页面代码实现
4.“相关文章”页面代码实现
5.“联系我们”页面代码实现
任务小结
课后练习