本教材秉承项目导向、任务驱动的编写模式，为此，我们设计了蓝梦音乐网和时空电影网两个项目，一个项目用于教师引导训练，课程的知识点和技能点都融在项目的实现中，讲练结合；一个项目用于学生独立训练，巩固所学知识和技能。本教材包含的主要知识点：网站的基础知识、网页的基本标签和常用的HTML5标签、网页表格和表单、CSS、DIV、网页框架和移动端网页。本教材 按照理论学习知识总结上机操作课后习题这一思路进行授课。通过案例要达到的学习目的与涉及的相关知识点，使学习目标更加明确。根据目前国内网页UI前端设计的发展趋势和我院物联网应用技术专业的教学计划，本课程采用案例详尽分析与设计方法来完成本课程的教学任务。

本教材既要注重理解基本知识，也要注重培养软件设计的基本技能。实践环节是巩固所学理论知识、使理论与实际相结合、提高程序设计能力和计算机操作能力的重要环节。上机实验和课程设计等都是加强程序设计训练所必需的。

单元1初识网页 1
引导训练制作蓝梦音乐网欢迎页面 1
独立训练制作时空电影网欢迎页面 8
单元练习 10
单元2使用网页标签 11
引导训练2-1制作蓝梦音乐网音乐节网页 11
独立训练2-1制作时空电影网电影节页面 20
引导训练2-2美化蓝梦音乐网音乐节页面 23
独立训练2-2美化时空电影网电影节页面 35
单元练习 37
单元3使用表格、表单 38
引导训练3-1制作蓝梦音乐网歌手网页 38
独立训练3-1制作时空电影网中国电影网页 47
引导训练3-2制作蓝梦音乐网注册页面 49
独立训练3-2制作时空电影网注册页面 65
强化训练 67
单元练习 68
单元4使用CSS美化网页 69
引导训练4-1使用CSS美化蓝梦音乐网音乐节网页 69
独立训练4-1美化时空电影网电影节网页 81
引导训练4-2美化蓝梦音乐网注册页面 83
独立训练4-2美化时空电影网注册页面 91
强化训练 94
单元练习 94

单元5使用DIV CSS进行页面设计 95
引导训练5-1设计蓝梦音乐网 首页布局 95
独立训练5-1制作时空电影网首页网页布局 112
引导训练5-2制作蓝梦音乐网首页 114
独立训练5-2制作时空电影网首页页面 129
强化训练 131
单元练习 132
单元6使用网页定位与JavaScript特效 133
引导训练制作蓝梦音乐网滑动轮播特效 133
独立训练美化时空电影网首页轮播特效 142
强化训练 144
单元练习 145
单元7移动端网页制作 146
引导训练制作移动端蓝梦音乐网首页 146
独立训练制作移动端时空电影网主页网面 165
单元练习 168
单元8使用框架 169
引导训练制作蓝梦音乐网后台管理系统框架 169
独立训练制作时空电影网后台管理系统框架 180
单元练习 182
参考文献 182

周庞荣，湘潭大学计算机技术领域工程硕士，副教授，信息系统项目管理师。长期从软件技术专业教育教学工作，主要讲授讲授《AsP.Net网站设计》、《C#程序设计》、《HTML商业网站设计与制作》、《Java编程基础》。在及省级刊物上发表《高职软件技术专业实践教学体系构建》、《梯进式软件工厂教学模式初探》、《区域共享型软件技术实训基地建设思考》、《软件工厂综合实训模式》《基于项目导向课程设计》、《基于SSH框架的钢铁交易平台的设计与实现》等多篇专业论文，主持并已结题十二五湖南省教育厅规划课题《校路共建高职铁路特有专业生产性实训基地的研究》、2017年湖南省教学成果奖二等奖《基于校企合作共同体的轨道交通通信信号专业群建设模式创新与实践》，排名第二。顾挺，1987年出生，湖南湘潭人，现为湖南厚溥教育科技有限公司株洲区学术经理，湖南铁路科技职业技术学院软件技术专业校企合作项目负责人，湖南厚溥教育科技有限公司质量中心专业研究员，曾就职于北京中软集团担任项目经理，参与开发深圳地质灾害预警预报系统、北京电网OA办公自动化系统、南京军区心理工作平台等多个软件开发项目。目前主要从事计算机软件技术、物联网应用技术的教学与研究工作。

单元1初识网页 1
引导训练制作蓝梦音乐网欢迎页面 1
独立训练制作时空电影网欢迎页面 8
单元练习 10
单元2使用网页标签 11
引导训练2-1制作蓝梦音乐网音乐节网页 11
独立训练2-1制作时空电影网电影节页面 20
引导训练2-2美化蓝梦音乐网音乐节页面 23
独立训练2-2美化时空电影网电影节页面 35
单元练习 37
单元3使用表格、表单 38
引导训练3-1制作蓝梦音乐网歌手网页 38
独立训练3-1制作时空电影网中国电影网页 47
引导训练3-2制作蓝梦音乐网注册页面 49
独立训练3-2制作时空电影网注册页面 65
强化训练 67
单元练习 68
单元4使用CSS美化网页 69
引导训练4-1使用CSS美化蓝梦音乐网音乐节网页 69
独立训练4-1美化时空电影网电影节网页 81
引导训练4-2美化蓝梦音乐网注册页面 83
独立训练4-2美化时空电影网注册页面 91
强化训练 94
单元练习 94

单元5使用DIV CSS进行页面设计 95
引导训练5-1设计蓝梦音乐网 首页布局 95
独立训练5-1制作时空电影网首页网页布局 112
引导训练5-2制作蓝梦音乐网首页 114
独立训练5-2制作时空电影网首页页面 129
强化训练 131
单元练习 132
单元6使用网页定位与JavaScript特效 133
引导训练制作蓝梦音乐网滑动轮播特效 133
独立训练美化时空电影网首页轮播特效 142
强化训练 144
单元练习 145
单元7移动端网页制作 146
引导训练制作移动端蓝梦音乐网首页 146
独立训练制作移动端时空电影网主页网面 165
单元练习 168
单元8使用框架 169
引导训练制作蓝梦音乐网后台管理系统框架 169
独立训练制作时空电影网后台管理系统框架 180
单元练习 182
参考文献 182