网页设计与制作项目案例教程（第2版）

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

　　秦凤梅，女，四川大学软件工程硕士，教授，重庆城市管理职业学院专任教师、校企合作专员，大数据专业带头人，重庆市巴南区第四届学术技术带头人后备人选，校企合作研究与实践20年，曾主持5项市级课题，另主研2项市级相关课题，其中1项重大，2项重点，所有课题均按时按质结项；课题相关省部级教学成果奖2项，1项主持，1项主研，分别获三等奖；公开发表论文近20篇，本课题相关10篇，其中4篇参加市级论文竞赛并获奖；校企\\\\\\\\\\\\\\\"双元”模式合作开发教材主编6部，3部获教育部12.5规划教材；曾担任软件公司CMM3 SEPG成员并负责SQA工作；以校企合作负责研发商业项目3项交付企业通过验收。相关领域学术积累及贡献：（1）校企合作模式的软件技术人才培养体系开发及活页式校本教材开发：兼华日软件公司副总经理期间曾组织公司和学校的技术专家团队共同完成对日软件外包人才培养体系及10余本活页式的校本教材的开发与建设，华日软件公司作为重庆最早从事对日软件外包的公司，相关研究成果曾被重庆市多家学校及培训机构借鉴参考，以此为基础在重庆市教委立项并完成软件技术专业（对日软件外包方向）课程建设与改革教改项目；（2）校企合作模式的电子商务人才培养体系开发：担任互联网工程系主任兼重庆正大恒领网络科技有限公司副经理总期间，曾协助公司组织学校千余名实习学生和公司400多名员工共同完成愉快网项目的研发，并形成\\\\\\\\\\\\\\\"五结合五支撑”的校企合作创新人才培养模式。以此为基础在重庆市教委立项并完成应用型本科电子商务专业产教结合人才培养模式研究实践重点教改项目；（3）校企合作模式助力公司通过CMM3评估：作为CMM3核心成员之一组织公司和学校的技术专家团队，助力公司成为重庆第二家通过CMM3评估认证，相关团队有市级重大教改项目为证；（4）产教融合、校企合作模式的管理体系设计：担任重庆正大软件集团人事部长时，组织学校学生分段式进入集团5个子公司实习，组织团队完成学校和集团相互融合的制度、组织及考评等方面的机制建设，曾和西南地区30多所高校建立合作关系，实习学生最大规模达1500余人；（5）产教融合、校企合作评价指标体系设计：将国家及地方三部委关于应用型本科建设指标和国家对学校相关评估指标研究后，结合学校实际设计出含7个一级指标16个二级指标的产教融合评价指标体系，在学校内推广执行效果较好，被多所学校参考借鉴。

上篇 基础部分
项目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