Web编程基础(HTML+CSS)项目实战教程

本书根据技术应用型人才的培养目标，以一个企业生产性项目“新闻网”的设计制作贯穿始终，将课程内容整合、序化为8个教学模块、26个开发任务、63个案例、28个实训操作任务、3个企业典型综合项目，采用由易到难、螺旋递进的方式详细讲解了Web前端开发技术，并介绍了HTML和CSS的基础知识和使用技巧。本书内容主要包括Web前端开发的相关概念、网站的设计与策划、开发工具的使用、文本图像的创建、CSS样式对页面的美化、列表的典型应用、各种超链接的创建、表格和表单的应用，以及DIV+CSS页面布局等实用技术，覆盖了“1+X证书”Web前端开发职业技能中HTML+CSS的基本知识点，同时根据教学模块主题，融入了思政教育内容，将立德树人、课程思政等元素穿插到教学内容中，润物细无声，使学习者掌握专业技能的同时，完成全方位育人的重任。本书是一本从零开始学习Web前端开发技术的教材，无须读者具有任何编程基础。本书既可作为高等院校本、专科计算机及相关专业的网页设计与制作课程的教材，又可作为Web前端开发学习班的培训教材或网页制作爱好者的参考书。

高丽霞讲师，双师型教师，Oracle企业级认证讲师，自2002年从事教学工作以来，先后讲授过《Web编程基础》、《HTML5应用开发》、《Web前端开发（JavaScript与jQuery）》、《C语言程序设计》、《C#程序设计》、《Java程序设计》和《Authorware多媒体制作》等多门课程。参编4本教材，其中《Authorware多媒体技术应用实例教程（第2版）》十二五规划教材，被评选为“高等职业院校教学改革创新示范教材”；《C#程序设计任务式教程》十三五规划教材，被评为中国通信工业协会“全国计算机类优秀教材”。撰写多篇论文，其中两篇为国家核心期刊论文。参与重量、省级资源库建设4项，课题、重点课题建设5项，参与品牌专业群建设1项。连续6年讲授《Web编程基础》课程，授课年级8个，累计授课班级32个，本课程授课人数约1580人，在《Web编程基础》课程上积累了丰富的实践、教科研经验，通过项目化教学、任务驱动、信息化教学等多种教学方式调度课堂、融合创新，深受学生喜爱。2020年作为课程负责人，主持《Web编程基础》校级精品资源库建设。

模块1 网站的设计与策划 1
1.1 任务1：认识网页与网站 1
1.1.1 网页与网站的相关概念 2
1.1.2 服务器与客户端 3
1.2 任务2：认识网页开发技术 4
1.2.1 Web前端的概念 4
1.2.2 Web前端开发技术 5
1.3 任务3：设计策划网站 9
1.3.1 网站设计原则 9
1.3.2 网站制作流程 11
1.4 任务4：选择网页开发工具 12
1.4.1 编写工具 12
1.4.2 浏览工具 16
1.5 知识进阶 16
1.6 小结 18
1.7 实训任务 19
实训任务1：创建班级网站页面 19
实训任务2：制作班级学习交流页面 20
实训任务3：制作班级公告栏 21
模块2 制作图文并茂的新闻页面 24
2.1 任务1：创建网页结构 25
2.1.1 HTML文档结构 25
2.1.2 HTML基本语法 26
2.1.3 ＜head＞标记 27
2.1.4 任务实施 28
2.2 任务2：添加网页文本内容 29
2.2.1 标题与段落标记 30
2.2.2 水平线标记 32
2.2.3 换行标记 33
2.2.4 特殊字符 33
2.2.5 ＜div＞与＜span＞标记 34
2.2.6 任务实施 35
2.3 任务3：设置图文并茂的网页 35
2.3.1 插入图像 36
2.3.2 网页中支持的图像文件格式 37
2.3.3 任务实施 38
2.4 知识进阶 38
2.5 小结 42
2.6 实训任务 42
实训任务1：制作图文并茂的班级学习交流页面 42
实训任务2：制作图文并茂的班级公告栏页面 44
模块3 美化修饰网站的新闻页面 47
3.1 任务1：修饰文字排版 48
3.1.1 CSS概述 48
3.1.2 引入CSS的方法 49
3.1.3 CSS选择器 50
3.1.4 CSS特性 66
3.1.5 文字修饰 68
3.1.6 文本修饰 69
3.1.7 任务实施 71
3.2 任务2：控制元素属性 74
3.2.1 盒子模型 74
3.2.2 边框属性 74
3.2.3 边距属性 76
3.2.4 浮动 81
3.2.5 定位 92
3.2.6 任务实施 100
3.3 任务3：设置页面背景 102
3.3.1 背景的设置 102
3.3.2 背景的运用技术 104
3.3.3 任务实施 107
3.4 知识进阶 108
3.5 小结 113
3.6 实训任务 114
实训任务1：使用CSS渲染班级学习交流页面 114
实训任务2：使用CSS渲染班级公告栏页面 116
实训任务3：制作班级网站中的青春名片 117
实训任务4：制作图文环绕效果 119
实训任务5：制作班级图片新闻版块 121
模块4 制作网站的近期新动态页面 124
4.1 任务1：制作近期新动态列表条目 125
4.1.1 有序列表 125
4.1.2 无序列表 127
4.1.3 嵌套列表 128
4.1.4 定义列表 129
4.1.5 CSS列表修饰 130
4.1.6 任务实施 131
4.2 任务2：创建近期新动态条目链接 134
4.2.1 创建超链接 135
4.2.2 链接对象 135
4.2.3 CSS超链接修饰 136
4.2.4 任务实施 139
4.3 知识进阶 141
4.4 小结 143
4.5 实训任务 144
实训任务1：制作班级新闻栏目 144
实训任务2：制作班级网站的软件大赛通知 145
实训任务3：制作班级学习园地 147
实训任务4：制作班级网站的导航条 150
实训任务5：制作班级网站的新闻栏目 152
模块5 制作网站的多媒体相册页面 159
5.1 任务1：创建多媒体相册 160
5.1.1 表格组成 160
5.1.2 表格属性 161
5.1.3 任务实施 163
5.2 任务2：调整相册行列结构 164
5.2.1 单元格属性 164
5.2.2 单元格合并 165
5.2.3 任务实施 167
5.3 任务3：设置相册布局 168
5.3.1 表格嵌套 168
5.3.2 表格布局 170
……