目录
目 录
项目一 初识HTML5及开发工具 1
工单任务 2
工作手册 5
1.1 HTML5概述 5
1.1.1 HTML5的发展历程 5
1.1.2 HTML5的新特性 6
1.1.3 HTML5的开发组织 7
1.2 第一个入门网页 7
1.2.1 头部<head>…</head> 8
1.2.2 标题<title>…</title> 8
1.2.3 元标签<meta> 9
1.2.4 入门网页 9
1.3 开发工具 10
1.3.1 记事本 10
1.3.2 EditPlus 11
1.3.3 VS Code 11
1.3.4 Adobe Dreamweaver 13
1.3.5 HBuilderX 13
上机实战 18
单元自测 19
单元小结 19
完成工单 19
工单评价 22
项目二 制作首页logo 23
工单任务 24
工作手册 26
2.1 HTML基本标签 26
2.1.1 标题标签 26
2.1.2 段落标签 26
2.1.3 换行标签 27
2.1.4 预排版标签 28
2.1.5 文本格式化标签 29
2.1.6 列表 30
2.1.7 文本字体标签 34
2.1.8 插入图片标签 35
2.1.9 插入特殊符号 36
2.1.10 插入横线 37
2.1.11 添加多媒体元素 38
2.2 HTML5新增标签 39
2.2.1 <article>标签 39
2.2.2 <audio>标签 40
2.2.3 <canvas>标签 41
2.2.4 <time>标签 42
2.2.5 <video>标签 43
上机实战 44
单元自测 45
单元小结 46
完成工单 46
工单评价 48
项目三 设计注册页面 49
工单任务 50
工作手册 52
3.1 表格的应用 52
3.2 表单的应用 58
3.3 在表单中添加控件 59
3.3.1 输入类控件 59
3.3.2 菜单列表类控件 65
3.3.3 文本域 66
3.4 HTML5新增表单输入类型 67
3.4.1 email类型 67
3.4.2 number类型 68
3.4.3 range类型 69
3.4.4 search类型 70
3.4.5 url类型 70
上机实战 71
单元自测 77
单元小结 78
完成工单 78
工单评价 80
项目四 名优特产模块的美化 81
工单任务 82
工作手册 85
4.1 初步认识CSS 85
4.1.1 什么是CSS 85
4.1.2 CSS发展简史 85
4.1.3 CSS基本语法 86
4.2 CSS语法结构分析 86
4.2.1 CSS属性 86
4.2.2 CSS选择器 87
4.3 CSS美化页面 96
4.3.1 美化网页文字 96
4.3.2 美化网页按钮 98
4.3.3 美化网页图片 101
4.3.4 美化网页背景 102
4.3.5 美化网页边框 103
4.3.6 美化网页表格 104
4.3.7 美化网页表单 105
4.3.8 美化网页导航栏 106
4.3.9 美化下拉菜单 107
4.3.10 CSS Sprite技术 109
4.4 CSS样式的使用方式 111
4.4.1 行内样式表 111
4.4.2 内部样式表 112
4.4.3 外部样式表 112
上机实战 115
单元自测 116
单元小结 117
完成工单 118
工单评价 124
项目五 文学艺术模块的布局 125
工单任务 126
工作手册 128
5.1 应用CSS布局网页 128
5.1.1 一列固定宽度及高度 128
5.1.2 一列自适应宽度 129
5.1.3 一列固定宽度居中 130
5.1.4 设置列数 131
5.1.5 设置列间距 132
5.1.6 设置列之间的规则 132
5.2 HTML列表的应用 133
5.2.1 ul无序列表和ol有序
列表 133
5.2.2 改变项目符号样式 135
5.2.3 横向图文列表 137
5.2.4 浮动后父容器高度自
适应 139
5.3 超链接伪类的应用 139
5.3.1 超链接的4种样式 139
5.3.2 将链接转换为块级元素 141
5.3.3 制作按钮 142
5.3.4 首字下沉 143
上机实战 144
单元自测 148
单元小结 149
完成工单 149
工单评价 156
项目六 名胜古迹模块的展示 157
工单任务 158
工作手册 160
6.1 理解表现和结构分离 160
6.1.1 什么是内容、结构、
表现 160
6.1.2 DIV与CSS结合的优势 162
6.1.3 怎么改善现有的网站 163
6.2 DIV概述 166
6.2.1 DIV是什么 166
6.2.2 如何使用DIV 166
6.2.3 理解DIV 167
6.2.4 并列与嵌套DIV结构 168
6.2.5 使用合适的对象来布局 169
6.3 盒模型详解 170
6.3.1 什么是盒模型 170
6.3.2 盒模型的细节 170
6.3.3 上下margin叠加问题 172
6.3.4 左右margin加倍问题 173
6.4 完善盒模型 174
6.4.1 边框显示方式定义 174
6.4.2 溢出处理 176
6.4.3 轮廓样式定义 178
6.5 浮动与定位 179
6.5.1 文档流 179
6.5.2 浮动 180
6.5.3 浮动的清理 182
6.5.4 如何使用浮动进行布局 183
6.5.5 定位 185
上机实战 188
单元自测 192
单元小结 194
完成工单 194
工单评价 200
项目七 传统工艺模块的动画设置 201
工单任务 202
工作手册 205
7.1 过渡效果 205
7.1.1 transition-property属性 205
7.1.2 transition-duration属性 207
7.1.3 transition-timing-function
属性 208
7.1.4 transition-delay属性 209
7.1.5 transition属性 209
7.2 变形效果 210
7.2.1 2D变形 210
7.2.2 3D变形 216
7.3 动画效果 218
7.3.1 @keyframes规则 218
7.3.2 animation-name属性 219
7.3.3 animation-duration属性 219
7.3.4 animation-timing-function
属性 220
7.3.5 animation-delay属性 221
7.3.6 animation-iteration-count
属性 221
7.3.7 animation-direction属性 222
7.3.8 animation属性 223
上机实战 223
单元自测 226
单元小结 227
完成工单 227
工单评价 233
项目八 文旅网站的制作与整合 235
工单任务 236
工作手册 240
8.1 网站开发流程 240
8.1.1 结构分析 240
8.1.2 搭建框架 242
8.2 网站页面布局 246
8.2.1 头部 246
8.2.2 主体 253
8.2.3 底部及快捷操作部分 262
上机实战 263
单元自测 270
单元小结 270
完成工单 270
工单评价 288