项目1 网页制作基础知识 1
任务1-1 认识网页 1
任务描述 1
知识储备 1
1．网页的构成 1
2．网页的相关名词 3
3．Web标准 4
任务1-2 网页制作入门技术 5
任务描述 5
知识储备 5
1．HTML5简介 5
2．CSS3简介 6
3．JavaScript简介 6
4．常用浏览器介绍 7
任务1-3 网页编辑器 7
任务描述 7
知识储备 8
1．常见网页编辑器介绍 8
2．HBuilder X的安装与使用 8
3．VS Code的安装与使用 11
项目总结 14
AIGC辅助编程：在网页编辑器中引入
AIGC工具 15
课后习题 15
项目2 “旅行游记”页面制作 16
任务2-1 认识HTML 17
任务描述 17
知识储备 18
1．HTML文档基本格式 18
2．HTML标签 18
3．HTML标签的属性 19
4．HTML标签的关系 19
5．HTML文档头部相关标签 20
任务2-2 HTML文本控制标签 21
任务描述 21
知识储备 21
1．页面格式化标签 21
2．文本格式化标签 23
3．特殊字符 24
知识拓展 25
任务2-3 HTML图像应用 26
任务描述 26
知识储备 26
1．常见图像格式 26
2．图像标签 26
3．绝对路径和相对路径 28
任务2-4 页面建设准备工作 29
页面分析 29
页面布局 29
任务2-5 制作头部模块 30
效果分析 30
模块制作 30
任务2-6 制作游记模块 31
效果分析 31
模块制作 31
任务2-7 制作页脚模块 32
效果分析 32
模块制作 32
项目总结 33
AIGC辅助编程：快速学习CodeGeeX 33
课后习题 33
项目3 “网上花店”专题页制作 34
任务3-1 CSS核心基础 34
任务描述 34
知识储备 35
1．结构与表现分离 35
2．CSS样式规则 35
3．CSS样式的引入 36
4．CSS基础选择器 39
任务3-2 CSS文本样式属性 42
任务描述 42
知识储备 42
1．CSS字体样式属性 42
2．CSS文本外观属性 45
知识拓展 49
任务3-3 CSS高级特性 50
任务描述 50
知识储备 50
1．CSS复合选择器 50
2．CSS层叠性与继承性 52
3．CSS优先级 54
任务3-4 页面建设准备工作 56
页面分析 56
定义基础样式 56
任务3-5 制作标题模块 57
效果分析 57
模块制作 57
任务3-6 制作分类模块 58
效果分析 58
模块制作 58
任务3-7 制作热卖模块 59
效果分析 59
模块制作 60
任务3-8 制作页脚模块 61
效果分析 61
模块制作 61
项目总结 62
AIGC辅助编程：添加CSS样式 62
课后习题 62
项目4 “爱家居”企业网站首页制作 63
任务4-1 认识盒子模型 63
任务描述 63
知识储备 64
任务4-2 盒子模型基础属性 65
任务描述 65
知识储备 65
1．边框属性 65
2．内边距属性 71
3．外边距属性 72
4．背景属性 74
5．宽度属性和高度属性 78
任务4-3 盒子模型新增属性 79
任务描述 79
知识储备 79
1．透明度 79
2．圆角 80
3．阴影 83
4．渐变 84
任务4-4 元素的类型与转换 88
任务描述 88
知识储备 88
1．元素的类型 88
2．<span>标签 89
3．元素的转换 90
知识拓展 92
任务4-5 元素的浮动 95
任务描述 95
知识储备 95
1．元素的浮动属性 95
2．清除浮动 97
3．overflow属性 101
任务4-6 元素的定位 102
任务描述 102
知识储备 102
1．元素的定位属性 102
2．静态定位 103
3．相对定位 103
4．绝对定位 104
5．固定定位 105
6．z-index属性 106
任务4-7 页面建设准备工作 106
页面分析 106
定义基础样式 107
任务4-8 制作导航和banner模块 108
效果分析 108
模块制作 108
任务4-9 制作热门推荐模块 110
效果分析 110
模块制作 110
任务4-10 制作夏日生活模块 112
效果分析 112
模块制作 112
任务4-11 制作版权信息模块和悬浮框
模块 113
效果分析 113
模块制作 114
项目总结 115
AIGC辅助编程：快速生成符合需求的浮动
样式 115
课后习题 115
项目5 “博学谷”网站首页制作 116
任务5-1 列表标签 116
任务描述 116
知识储备 117
1．无序列表 117
2．有序列表 118
3．定义列表 119
4．列表的嵌套应用 120
任务5-2 CSS控制列表样式 121
任务描述 121
知识储备 121
1．list-style复合属性 121
2．将背景图像作为列表项目符号 121
任务5-3 超链接标签 122
任务描述 122
知识储备 122
1．创建超链接 122
2．锚点链接 124
3．链接伪类控制超链接状态 125
任务5-4 页面建设准备工作 127
页面分析 127
定义基础样式 127
任务5-5 制作导航模块 128
效果分析 128
模块制作 129
任务5-6 制作banner模块和课程分类
模块 130
效果分析 130
模块制作 130
任务5-7 制作热门课程模块 133
效果分析 133
模块制作 134
任务5-8 制作版权信息模块 136
效果分析 136
模块制作 136
项目总结 137
AIGC辅助编程：模拟通讯录列表 137
课后习题 137
项目6 “书隅”网站注册页面制作 138
任务6-1 认识表格相关标签 138
任务描述 138
知识储备 139
1．表格的创建 139
2．<table>标签的属性 141
3．<tr>标签的属性 144
4．<td>标签的属性 145
5．<th>标签 147
任务6-2 CSS控制表格样式 147
任务描述 147
知识储备 148
1．CSS控制表格边框 148
2．CSS控制单元格边距 149
3．CSS控制单元格的宽度和
高度 150
任务6-3 表单概述 151
任务描述 151
知识储备 151
1．初识表单 151
2．创建表单 152
任务6-4 基础表单控件 153
任务描述 153
知识储备 153
1．input控件 153
2．textarea控件 156
3．select控件 157
任务6-5 新增表单控件类型和属性 160
任务描述 160
知识储备 160
1．新增input控件类型 160
2．新增input控件属性 165
任务6-6 CSS控制表单样式 172
任务描述 172
知识储备 172
任务6-7 页面建设准备工作 174
页面分析 174
定义基础样式 174
任务6-8 制作头部模块和导航模块 175
效果分析 175
模块制作 176
任务6-9 制作banner模块和内容
模块 177
效果分析 177
模块制作 178
任务6-10 制作页脚模块 182
效果分析 182
模块制作 182
项目总结 183
AIGC辅助编程：实现调查问卷的表单
页面 183
课后习题 183
项目7 “视频8”网站首页制作 184
任务7-1 在网页中嵌入视频和音频 184
任务描述 184
知识储备 185
1．视频、音频嵌入技术概述 185
2．嵌入视频 186
3．嵌入音频 188
4．浏览器对视频和音频文件的
兼容 189
5．控制视频的宽度和高度 190
任务7-2 在网页中添加过渡效果 192
任务描述 192
知识储备 192
1．transition-property属性 192
2．transition-duration属性 193
3．transition-timing-function属性 194
4．transition-delay属性 195
5．transition属性 195
任务7-3 在网页中添加变形效果 196
任务描述 196
知识储备 196
1．2D变形 196
2．3D变形 201
任务7-4 在网页中添加动画效果 205
任务描述 205
知识储备 205
1．@keyframes规则 205
2．animation-name属性 206
3．animation-duration属性 206
4．animation-timing-function属性 207
5．animation-delay属性 208
6．animation-iteration-count属性 208
7．animation-direction属性 208
8．animation属性 209
任务7-5 页面建设准备工作 210
页面分析 210
定义基础样式 211
任务7-6 制作引导栏模块 212
效果分析 212
模块制作 212
任务7-7 制作导航模块 214
效果分析 214
模块制作 214
任务7-8 制作banner模块 216
效果分析 216
模块制作 216
任务7-9 制作内容模块 219
效果分析 219
模块制作 220
任务7-10 制作页脚模块 223
效果分析 223
模块制作 223
项目总结 224
AIGC辅助编程：在网页中嵌入多媒体 225
课后习题 225
项目8 “甜心物语”网站首页制作 226
任务8-1 JavaScript基础知识 227
任务描述 227
知识储备 227
1．JavaScript简介 227
2．JavaScript代码的引入方式 229
3．JavaScript基础语法 231
4．编写简单的JavaScript程序 232
任务8-2 变量 233
任务描述 233
知识储备 233
1．变量的声明 233
2．变量的赋值 233
任务8-3 数据类型和运算符 234
任务描述 234
知识储备 234
1．数据类型 234
2．运算符 236
任务8-4 流程控制语句 241
任务描述 241
知识储备 241
1．条件语句 241
2．循环语句 246
3．跳转语句 249
任务8-5 函数 250
任务描述 250
知识储备 251
1．函数的定义 251
2．函数的调用 251
3．函数中变量的作用域 252
任务8-6 对象 253
任务描述 253
知识储备 253
1．认识对象 253
2．创建对象和删除对象属性 253
3．内置对象 255
任务8-7 数组 259
任务描述 259
知识储备 259
1．初识数组 259
2．创建数组 260
3．数组的常用属性和方法 260
4．二维数组 262
任务8-8 BOM对象和DOM对象 263
任务描述 263
知识储备 263
1．BOM对象 263
2．DOM对象 269
任务8-9 事件处理 275
任务描述 275
知识储备 275
1．事件和事件调用 275
2．常用的JavaScript事件 276
任务8-10 页面建设准备工作 277
页面分析 278
定义基础样式 278
任务8-11 制作头部及导航模块 279
效果分析 279
模块制作 280
任务8-12 制作banner模块 281
效果分析 281
模块制作 282
任务8-13 制作简介模块 285
效果分析 285
模块制作 285
任务8-14 制作推荐模块 288
效果分析 288
模块制作 289
任务8-15 制作页脚模块 293
效果分析 293
模块制作 293
项目总结 293
AIGC辅助编程：实现网页交互效果 294
课后习题 294