网页制作基础任务教程：HTML5+CSS3：慕课版9787115586346

目录

单元1 HTML5基础 1

任务1 制作第 一个简单的网页 1

任务描述 1

前导知识 1

1．1 网页的相关概念 1

1．1．1 网站、网页与主页 1

1．1．2 静态网页与动态网页 1

1．1．3 Web技术简介 2

1．1．4 网站开发的流程 4

1．1．5 HTML5简介 4

1．2 网页的编辑与运行 5

1．2．1 前端开发工具 5

1．2．2 使用HBuilderX新建HTML页面 5

1．2．3 HbuilderX常用组合键 7

1．2．4 HbuilderX智能选中操作 7

1．3 HTML5文档的基本结构 9

1．4 HTML5标签的语法 9

1．4．1 单标签和双标签 9

1．4．2 标签的属性 10

1．4．3 标签之间的嵌套 10

1．4．4 标签不区分大小写 10

1．4．5 HTML5注释 10

任务实现 11

单元小结 13

思考练习 13

单元2 HTML5基本标签 14

任务1 制作图文网页 14

任务描述 14

前导知识 15

2．1 文本控制标签 15

2．1．1 标题标签 15

2．1．2 段落标签 15

2．1．3 换行标签 16

2．1．4 文本格式化标签 17

2．1．5 转义字符 18

2．2 图像标签 19

2．2．1 图像格式 19

2．2．2 创建图像 19

2．2．3 图像路径 19

任务实现 20

任务2 制作新闻列表 21

任务描述 21

前导知识 22

2．3 超链接标签 22

2．3．1 超链接标签的属性 22

2．3．2 锚点链接 22

2．4 列表标签 24

2．4．1 有序列表 24

2．4．2 无序列表 25

2．4．3 自定义列表 25

任务实现 26

任务3 制作注册表单 27

任务描述 27

前导知识 28

2．5 表格标签 28

2．5．1 基本结构 28

2．5．2 复杂结构 28

2．5．3 合并行 31

2．5．4 合并列 32

2．6 表单标签 32

2．6．1

标签 33

2．6．2 输入标签 33

2．6．3 下拉列表标签 37

2．6．4 文本域标签 37

任务实现 38

单元小结 44

思考练习 44

单元3 元素分类与语义化标签 47

任务1 使用语义化标签搭建“公司简介”网页HTML结构 47

任务描述 47

前导知识 47

3．1

标签和标签 47

3．2 元素分类 49

3．3 HTML语义化 51

3．4 HTML5中常用语义化结构标签 51

3．4．1

标签 52

3．4．2

标签 52

3．4．3

标签 53

3．4．4

标签 53

3．4．5

标签 53

3．4．6

标签 53

3．4．7

标签 54

3．5 网页模块命名规范 54

任务实现 55

单元小结 58

思考练习 59

单元4 CSS3概述与基本语法 61

任务1 使用CSS设置文本颜色 61

任务描述 61

前导知识 61

4．1 CSS3概述 61

4．2 CSS3基本语法 61

4．3 如何插入样式表 62

4．3．1 行内样式 62

4．3．2 内嵌样式 63

4．3．3 链接样式 63

4．3．4 导入样式 64

任务实现 65

任务2 选择合适的选择器设置网页文字颜色 67

任务描述 67

前导知识 67

4．4 基本选择器 67

4．4．1 标签选择器 67

4．4．2 通配符选择器 68

4．4．3 类选择器 68

4．4．4 id选择器 69

4．5 复合选择器 69

4．5．1 后代选择器 69

4．5．2 一级子元素选择器 70

4．5．3 交集选择器 70

4．5．4 并集选择器 70

4．6 伪类选择器 70

4．6．1 UI元素状态伪类选择器 70

4．6．2 结构伪类选择器 71

4．7 伪元素选择器 72

4．8 样式的层叠与继承 73

4．8．1 CSS层叠性 73

4．8．2 CSS继承性 74

4．8．3 CSS优先级 74

任务实现 76

单元小结 78

思考练习 78

单元5 CSS3基本样式设计 80

任务1 设置公司简介页面样式 80

任务描述 80

前导知识 80

5．1 字体样式 80

5．1．1 字体样式font-style 80

5．1．2 字体变体font-variant 81

5．1．3 字体粗细font-weight 81

5．1．4 字体大小font-size 81

5．1．5 字体系列font-family 82

5．1．6 font属性 82

5．2 文本样式 83

5．2．1 文本颜色color 83

5．2．2 文本的对齐方式text-align 83

5．2．3 文本修饰text-decoration 83

5．2．4 文本转换text-transform 84

5．2．5 文本缩进text-indent 84

5．2．6 行高line-height 84

5．3 边框样式 85

5．3．1 边框样式border-style 86

5．3．2 边框颜色border-color 87

5．3．3 边框宽度border-width 87

5．3．4 边框各边 88

5．3．5 border属性 88

5．3．6 边框圆角属性border-radius 88

5．4 图片样式 89

5．4．1 宽度width 89

5．4．2 高度height 89

5．4．3 浮动float 89

任务实现 91

任务2 设置新闻中心版块样式 93

任务描述 93

前导知识 93

5．5 背景样式 93

5．5．1 背景颜色background-color 93

5．5．2 背景图像background-image 94

5．5．3 背景重复background-repeat 94

5．5．4 背景位置background-position 95

5．5．5 背景附着background-attachment 96

5．5．6 background属性 97

5．5．7 渐变背景 97

5．6 超链接样式 99

5．6．1 链接样式 99

5．6．2 链接状态样式 99

5．7 列表样式 100

5．7．1 列表项标记类型list-style-type 100

5．7．2 列表项标记图像list-style-image 100

5．7．3 列表项标记位置list-style-position 101

5．7．4 list-style属性 101

5．7．5 列表文字样式 102

5．7．6 列表实现横向导航栏 103

任务实现 104

任务3 设置会员注册页面样式 106

任务描述 106

前导知识 106

5．8 表格样式 106

5．8．1 表格边框 106

5．8．2 折叠边框 107

5．8．3 表格的宽度和高度 107

5．8．4 表格文字对齐 108

5．8．5 表格颜色 108

5．9 表单样式 108

任务实现 110

单元小结 114

思考练习 114

单元6 CSS3定位与布局 117

任务1 制作产品展示模块 117

任务描述 117

前导知识 117

6．1 盒子模型 117

6．1．1 盒子属性 117

6．1．2 盒子尺寸计算 119

6．2 外边距合并 120

6．2．1 并列元素的外边距合并 120

6．2．2 包含元素的外边距合并 121

任务实现 123

任务2 制作公司网站首页 125

任务描述 125

前导知识 126

6．3 文档流简介 126

6．4 浮动 129

6．5 清除浮动 133

任务实现 136

任务3 公司网站首页实现固定侧边菜单 143

任务描述 143

前导知识 143

6．6 定位布局简介 143

6．7 相对定位 144

6．8 绝对定位 145

6．9 固定定位 152

任务实现 153

单元小结 155

思考练习 155

单元7 项目实践——制作传统文化网站首页 158

任务1 建立站点并完成页面整体布局 159

任务描述 159

任务实现 159

任务2 制作网页头部和导航 161

任务描述 161

任务实现 161

任务3 制作banner和最新更新栏目 165

任务描述 165

任务实现 166

任务4 制作国学百家栏目 170

任务描述 170

任务实现 170

任务5 制作传统节日栏目 176

任务描述 176

任务实现 177

任务6 制作底部版权区域 180

任务描述 180

任务实现 180

任务7 对首页CSS代码进行优化 181

任务描述 181

前导知识 182

7．1 CSS代码优化 182

7．1．1 CSS代码优化的意义 182

7．1．2 CSS代码优化的基本方法 182

任务实现 184

单元小结 186

思考练习 186

单元8 项目实践——制作传统文化网站子页 189

任务1 创建传统文化网站子页模板 190

任务描述 190

任务实现 190

任务2 制作文章列表页 195

任务描述 195

任务实现 196

任务3 制作文章详情页 199

任务描述 199

任务实现 199

任务4 对网站CSS代码进行优化 202

任务描述 202

任务实现 203

单元小结 204

思考练习 204

附录 207

一、HTML5常用标签 207

二、CSS3常用选择器 208

三、CSS3常用样式属性 209