项目1  简单网页设计	1
    教学导航	1
    项目描述	1
    1.1  前端开发语言	2
        1.1.1  认识前端开发语言	2
        1.1.2  开发环境	3
    任务1-1  创建Web项目	6
    1.2  HTML和CSS基础	11
        1.2.1  HTML常用标签	11
        1.2.2  CSS基础选择器	12
        1.2.3  常用CSS样式	14
        1.2.4  盒模型	16
    任务1-2  制作“五环之歌”页面	16
    1.3  CSS3常用的新增选择器	22
    任务1-3  给导航条添加CSS样式	23
        职业技能知识点考核1	27
    1.4  浮动和定位	30
        1.4.1  浮动	30
        1.4.2  定位	33
    任务1-4  制作网页焦点图	33
        职业技能知识点考核2	37
    1.5  HTML5常用的新增标签	38
    任务1-5  制作一个常见问题答疑页面	40
        职业技能知识点考核3	42

项目2  文本类网页设计	43
    教学导航	43
    项目描述	43
    2.1  文本处理	44
        2.1.1  文本阴影	44
        2.1.2  溢出文本处理	45
    任务2-1  制作网站新闻列表区	46
        职业技能知识点考核4	49
    2.2  特殊字体	49
    任务2-2  制作白居易的《池上》页面	50
    2.3  表单	54
        2.3.1  表单输入类型	54
        2.3.2  新的表单元素	56
        2.3.3  新的表单属性	56
    任务2-3  制作学员信息页	57
        职业技能知识点考核5	63

项目3  图像类网页设计	65
    教学导航	65
    项目描述	65
    3.1  背景	66
        3.1.1  背景的定义	66
        3.1.2  背景的原点位置	67
        3.1.3  背景的显示区域	69
        3.1.4  背景图像的大小	70
        3.1.5  背景图像的定位	71
    任务3-1  制作信纸页面	72
        职业技能知识点考核6	77
    3.2  边框	78
        3.2.1  圆角边框	78
        3.2.2  图片边框	80
        3.2.3  渐变	82
    任务3-2  制作风景页面	85
        职业技能知识点考核7	91
    3.3  盒阴影	91
        3.3.1  盒子阴影	91
        3.3.2  溢出处理	93
    任务3-3  制作文明公约页面	93
        职业技能知识点考核8	96

项目4  媒体杂志类网页设计	98
    教学导航	98
    项目描述	98
    4.1  多列布局	99
    任务4-1  制作电子杂志页面	100
    4.2  简单动画	106
        4.2.1  元素的变形	106
        4.2.2  元素的旋转	106
        4.2.3  元素的缩放和翻转	107
        4.2.4  元素的移动	108
        4.2.5  同时使用多个变形函数	109
        4.2.6  定义变形原点	110
        4.2.7  过渡效果	110
    任务4-2  制作滑动的导航条	112
    任务4-3  制作照片墙页面	115
        职业技能知识点考核9	121
    4.3  音频和视频	122
        4.3.1  插入音频	122
        4.3.2  插入视频	123
    任务4-4  制作音频页面	123
        职业技能知识点考核10	125

项目5　响应式布局网站设计	126
    教学导航	126
    项目描述	126
    5.1  响应式网站首页的制作	127
    任务5-1  制作位置固定的导航条	127
    任务5-2  制作响应式网页主体部分	132
    任务5-3  制作两栏式网页尾部	138
    5.2  项目整合	144
        职业技能知识点考核11	145

项目6　企业官网设计	146
    教学导航	146
    项目描述	146
    任务6-1  创建项目	147
    任务6-2  观察效果图	148
    任务6-3  编写初始化CSS样式	149
    任务6-4  编写可复用的header	149
    任务6-5  编写可复用的footer	151
    任务6-6  首页引入已编写好的header	155
    任务6-7  首页引入已编写好的footer	156
    任务6-8  编写首页banner部分	157
    任务6-9  编写首页儿童精品课模块	160
    任务6-10  编写首页父母充电站模块	163
    任务6-11  编写首页剩余部分	165
    任务6-12 “关于我们”页面引入公用部分	167
    任务6-13  正式编写“关于我们”页面	167
    任务6-14 “联系我们”页面前期准备	168
    任务6-15  正式编写“联系我们”页面	169
    任务6-16  收尾工作	172

项目7　移动端推广项目制作	174
    教学导航	174
    项目描述	174
    7.1  大图轮播雏形——Swiper的使用方法	176
    7.2  大图轮播的修饰	180
    7.3  大图轮播的个性化设计——API文档的使用	181
    7.4  真正的大“图”轮播——用图片替换文字	183
    7.5  设置动画——Swiper Animate的使用方法	184
    任务7-1　移动端推广项目准备工作	187
    任务7-2　制作简历首页	190
    任务7-3　制作基本资料页	193
    任务7-4　制作荣誉页	195
    任务7-5　制作“我的技能”页	197
    任务7-6　制作“我的作品”页	199
    任务7-7　制作尾页	199
    7.6　代码汇总	200
    项目扩展	204

项目8　使用canvas制作飞机大战游戏	205
    教学导航	205
    项目描述	205
    8.1  canvas简介	206
    8.2  canvas元素知识	207
    8.3  canvas绘图基础	208
    8.4  canvas动画基础	213
    8.5  动画中的碰撞检测	215
    任务8-1  游戏功能分析	219
    任务8-2  图片预加载	220
    任务8-3  绘制滚动背景图	222
    任务8-4  创建英雄机对象	224
    任务8-5  绘制子弹	226
    任务8-6  监听键盘事件控制英雄机方向	232
    任务8-7  绘制敌机	237
参考文献	251