本书为高职高专院校网页设计与制作相关课程的教材，主要内容包括网页设计与制作概述、HTML5页面元素及属性、CSS美化HTML网页、网页div+CSS布局设计与制作、网页表格布局设计与制作、网页框架设计与制作、网页模板设计与制作、网页表单设计与制作、网页简单特效设计与制作，以及网页多媒体设计与制作。各项目内容通过项目导向、任务驱动逐步展开，不仅更好地体现了“能力导向，学生主体”的原则，也更好地适应了高职项目化的教学要求。本书配套的电子课件、素材等资源，请登录华信教育资源网（http://www.hxedu.com.cn）注册后免费下载。本书既可以作为高职高专院校网页设计与制作相关课程的教材，也可以作为对网页设计与制作感兴趣的人员的学习参考用书。

《网页设计与制作项目案例教程（第2版）》是在“‘十二五’职业教育国家规划教材”《基于工作过程的网页制作教程》的基础上，在深入贯彻落实《国家职业教育改革实施方案》的背景下修订的。本书立足于学生职业能力培养，以模拟产业岗位实际生产环境、满足社会对网页设计与制作技能的需求为指导进行设计开发。本书由高职院校网页设计课程资深教师与重庆华日软件有限公司、深圳政元软件有限公司、青年荟教育科技（成都）有限责任公司、杭州普特教育咨询有限公司等多家阿里巴巴合作企业采取校企“双元”模式深度融合、共同开发。全书采用真实的工程案例对知识与技能体系架构进行分解，将“企业岗位任职要求、职业标准、工作过程和产品”作为教材的主体内容，将真实的网页设计与制作应用项目贯穿全书。本书具有职业性、实践性和开放性的特点，体现了“以学生为中心、学习成果为导向，促进自主学习”的教学观，能够较好地提升学生的学习兴趣和学习效率。 本书采用项目导向、任务驱动、知识技能模块化的课程设计，根据学生的认知特点分为上篇基础部分和下篇应用实践部分。上篇包括网页设计与制作概述、HTML5页面元素及属性、CSS美化HTML网页三大应用项目，下篇包括网页div+CSS布局设计与制作、网页表格布局设计与制作、网页框架设计与制作、网页模板设计与制作、网页表单设计与制作、网页简单特效设计与制作、网页多媒体设计与制作七大应用项目。每个项目结合企业具体的实际案例设计项目任务，以任务方式引领学习内容，强调理论与实践的结合，突出基本技能和实际操作能力的培养。在任务案例中自然融入思政元素，让学生在学习专业知识的同时，深刻理解社会主义核心价值观，增强爱国、爱校的情怀，体会敬业守心、精益求精、勇于创新的工匠精神。教师可结合本专业的人才培养定位灵活选取任务模块进行分类教学、因材施教。本书文字描述浅显、风趣、易懂，也适合学生课下自主学习，从而实现翻转教学模式。 本书由重庆城市管理职业学院秦凤梅、重庆电子工程职业学院何桂兰担任主编，由重庆理工职业学院金莉、重庆城市管理职业学院梅青平、重庆理工职业学院钟星宇担任副主编。其中，项目2至项目5由秦凤梅编写，项目6、项目7由何桂兰编写，项目1、项目8由金莉编写，项目9由梅青平编写，项目10由钟星宇编写。参与编写的还有重庆理工职业学院裴晶晶及合作企业技术工程师等。全书由秦凤梅统稿。 教材建设是一项系统工程，需要在实践中不断加以完善和改进。同时由于时间和编者水平所限，书中难免会有疏漏和不足之处，敬请同行专家和广大读者给予批评指正。 编 者

上篇 基础部分 项目1 网页设计与制作概述 1 1.1 任务目标 1 1.2 知识准备 2 1.2.1 网站和网页概述 2 1.2.2 网页设计素养 10 1.2.3 Web标准 12 1.2.4 HTML基础 13 1.2.5 网页设计常用软件 20 1.3 任务实施 20 任务1：实现大国工匠年度人物的图像信息展示 21 任务2：实现大国工匠年度人物的文字信息展示 24 1.4 任务总结 26 1.5 能力与知识拓展 26 1.6 巩固练习 30 项目2 HTML5页面元素及属性 32 2.1 任务目标 32 2.2 知识准备 32 2.2.1 结构元素 32 2.2.2 列表元素 36 2.2.3 分组元素 41 2.2.4 页面交互元素 42 2.3 任务实施 44 任务1：实现感动中国年度人物信息展示页面分区 45 任务2：实现感动中国年度人物的文字信息展示 46 2.4 任务总结 49 2.5 能力与知识拓展 50 2.6 巩固练习 50 项目3 CSS美化HTML网页 53 3.1 任务目标 53 3.2 知识准备 54 3.2.1 CSS概述 54 3.2.2 CSS语法与用法 55 3.2.3 CSS样式属性 57 3.2.4 基本选择器 61 3.2.5 复合选择器 64 3.2.6 CSS高级特性 68 3.3 任务实施 71 任务1：实现热点新闻网首页的信息展示 72 任务2：实现热点新闻网首页的样式设置 74 3.4 任务总结 76 3.5 能力与知识拓展 78 3.6 巩固练习 82 下篇 应用实践部分 项目4 网页div+CSS布局设计与制作 83 4.1 任务目标 83 4.2 知识准备 84 4.2.1 CSS盒子模型 84 4.2.2 盒子模型属性设置 85 4.2.3 div 90 4.2.4 浮动与定位 92 4.2.5 div+CSS实现网页布局 98 4.3 重庆愉快网学做菜首页页面设计与制作任务实施 103 任务1：创建重庆愉快网学做菜首页header部分 105 任务2：设置导航（nav）部分的CSS样式 110 任务3：设置文字部分的CSS样式 111 任务4：设置图文的CSS样式 113 4.4 任务总结 115 4.5 能力与知识拓展 115 4.6 巩固练习 116 项目5 网页表格布局设计与制作 118 5.1 任务目标 118 5.2 知识准备 119 5.2.1 表格标签 119 5.2.2 使用表格布局的原因 122 5.2.3 设计软件 123 5.3 个人网站相册页面设计与制作任务实施 123 任务1：创建个人网站相册页面站点 125 任务2：插入表格完成基本布局 131 任务3：编辑页面内容 134 5.4 任务总结 139 5.5 能力与知识拓展 139 5.5.1 网页常见结构布局 139 5.5.2 网页常见布局方法与原则 143 5.6 巩固练习 143 项目6 网页框架设计与制作 145 6.1 任务目标 145 6.2 知识准备 146 6.2.1 框架 146 6.2.2 ＜frameset＞标签与＜frame＞标签 146 6.2.3 ＜noframes＞标签 148 6.2.4 ＜iframe＞标签 149 6.3 重庆愉快网个人主页页面设计与制作任务实施 149 任务1：创建重庆愉快网个人主页页面 152 任务2：设计与制作top页面 156 任务3：设计与制作left页面 159 任务4：设计制作main页面 164 6.4 任务总结 168 6.5 能力与知识拓展 170 6.5.1 重庆愉快网找优惠页面中浮动框架的设计与制作 170 6.5.2 重庆愉快网找优惠框架链接的设计与制作 172 6.6 巩固练习 175 项目7 网页模板设计与制作 177 7.1 任务目标 177 7.2 知识准备 178 7.2.1 资源 179 7.2.2 库 179 7.2.3 库项目 180 7.2.4 编辑库项目 182 7.3 重庆愉快网内容页面设计与制作任务实施 183 任务1：分析、设计与制作内容页面的布局 184 任务2：设计与制作网页可编辑区域 189 任务3：通过模板页来设计与制作同类型的内容页面 192 7.4 任务总结 196 7.5 能力与知识拓展 198 7.6 巩固练习 200 项目8 网页表单设计与制作 202 8.1 任务目标 202 8.2 知识准备 203 8.2.1 表单标签 203 8.2.2 表单域 204 8.2.3 表单按钮 207 8.3 重庆愉快网注册表单页面设计与制作任务实施 208 任务1：创建重庆愉快网注册表单页面站点 210 任务2：创建重庆愉快网注册表单页面 210 任务3：注册表单页面的设计与制作 212 任务4：美化注册表单页面 219 8.4 任务总结 220 8.5 能力与知识拓展 223 8.5.1 表单页面制作原则 223 8.5.2 下拉列表的设计与制作 224 8.6 巩固练习 225 项目9 网页简单特效设计与制作 227 9.1 任务目标 227 9.2 知识准备 228 9.2.1 行为 228 9.2.2 JavaScript 230 9.2.3 JavaScript事件 232 9.2.4 JavaScript对象 232 9.3 重庆市少年宫网站首页页面设计与制作任务实施 233 任务1：创建重庆市少年宫网站首页页面站点 236 任务2：创建重庆市少年宫网站首页页面 236 任务3：重庆市少年宫网站首页页面的设计与制作 238 9.4 任务总结 243 9.5 能力与知识拓展 245 9.6 巩固练习 246 项目10 网页多媒体设计与制作 248 10.1 任务目标 248 10.2 知识准备 249 10.2.1 HTML5多媒体的特性 249 10.2.2 视频和音频编解码器 249 10.2.3 多媒体的格式 250 10.2.4 支持视频或音频的浏览器 251 10.2.5 在网页中嵌入音频 251 10.2.6 在网页中嵌入视频 252 10.3 简单音乐播放器设计与制作任务实施 256 任务1：创建音乐播放器网页 257 任务2：实现音乐播放功能 260 10.4 任务总结 263 10.5 能力与知识拓展 263 10.6 巩固练习 266

http://www.hxedu.com.cn/hxedu/fg/book/bookinfo.html?code=G0421470