HTML5+CSS3网页设计与布局模式项目教程

图书标准信息

• 作者 赵建保
• 出版社 东软电子出版社
• 出版时间 2017-08
• 版次 1
• ISBN 9787894365125
• 定价 42.00元
• 装帧 其他
• 开本 16开
• 纸张 胶版纸

【内容简介】

网页排版与网页布局是前端开发的核心工作，是Web界面与后端数据的纽带。本书以前端工程师岗位工作任务为起点，循序渐进，以
  HTML5、CSS3、JavaScript及jQuery为技术支撑，以WebStorm为开发环境，将网页前端开发过程的任务规范化、模块化和组件化。全书设计了文本排版、Web字体图标、图片排版、列表排版、表格排版、表单排版、按钮、选项卡、轮播图排版、下拉菜单、浮动布局、流式布局、弹性布局、定位布局、CSS3多列布局、响应式页面排版、前端框架Bootstrap等十余个工作任务，在具体工作任务中，按任务导入→任务目标→核心知识→任务实施→强化训练5步来组织教学内容和设计教学过程，注重梳理强关联的知识和技能，提炼设计模式，直达网页排版和布局的核心和工作机制，兼顾教师项目教学组织和学生自主学习的双重需求，以期提升学习者对前端技术的理解力和应用能力，以便更好地适应前端项目需求的千变万化。

【目录】

目录

任务1 搭建Web前端开发环境... 13

1.1 任务导入... 13

1.2 任务目标... 13

1.3 核心知识... 13

1.3.1 网页访问机制... 13

1.3.2 浏览器市场份额... 14

1.3.3 浏览器内核及渲染过程... 15

1.3.4 PHP

 Web服务器组件... 16

1.3.5 Web服务器启动失败原因分析... 16

1.3.6 移动前端开发环境网络拓扑结构... 17

1.3.7

 WebStorm优势... 17

1.3.8 EMMET语法... 17

1.4 任务实施... 18

1.4.1 操作系统版本及位数识别... 18

1.4.2

 Chrome浏览器... 19

1.4.3 搭建Web服务器... 22

1.4.4

 WebStorm.. 26

1.4.5 移动端测试环境... 32

1.5 强化训练... 33

任务2 编写网页模板... 34

2.1 任务导入... 34

2.2 任务目标... 34

2.3 核心知识... 35

2.3.1 Web标准... 35

2.3.2 Web项目结构... 35

2.3.3 通用规范... 36

2.3.4 HTML规范... 37

2.3.5 CSS命名规范... 39

2.3.6 JS规范... 44

2.3.7 图像规范... 45

2.3.8

 DOCTYPE（文档类型）... 45

2.3.9 meta. 45

2.3.10

 favicon. 46

2.3.11 CSS概述... 46

2.3.12 CSS 语法... 47

2.3.13 CSS存在方式... 47

2.3.14 CSS继承与优先级规则... 49

2.3.15 CSS3新增功能... 49

2.3.16 CSS3选择器类型... 50

2.3.17 链接JS. 52

2.3.18 HTML页面模板... 53

2.4 任务实施... 53

2.4.1 建立项目... 53

2.4.2 编写HTML文件... 54

2.4.3 编写CSS样式... 56

2.4.4 编写JS脚本... 60

2.4.5 浏览器测试... 61

2.5 强化训练... 62

任务3 文本排版... 63

3.1 任务导入... 63

3.2 任务目标... 63

3.3 核心知识... 64

3.3.1 元素默认样式属性值... 64

3.3.2 浏览器默认样式... 65

3.3.3 字体属性... 66

3.3.4 字族font-family. 66

3.3.5 字体大小font-size. 69

3.3.6 字体变形font-variant 71

3.3.7 字体样式font-style. 71

3.3.8 字体粗细font-weight 71

3.3.9 字体属性font 72

3.3.10 文本属性text 74

3.3.11 文本颜色color 75

3.3.12 颜色模式... 75

3.3.13 上标(sup)下标(sub) 77

3.3.14 文本效果text-decoration. 77

3.3.15 字母间距letter-spacing. 77

3.3.16 单词间距word-spacing. 77

3.3.17 空白white-space. 78

3.3.18 文本换行word-wrap. 78

3.3.19 文本换行word-break. 79

3.3.20 文本缩进text-indent 79

3.3.21 文本对齐text-align. 80

3.3.22 垂直对齐vertical-align. 80

3.3.23 文本阴影text-shadow.. 81

3.3.24 溢出文本text-overflow.. 83

3.3.25 文字方向direction. 84

3.3.26 行高line-height 84

3.4 任务实施... 87

3.4.1 建立项目... 87

3.4.2 编写HTML文件... 87

3.4.3 编写CSS样式... 88

3.4.4 浏览器测试... 90

3.5 强化训练... 90

任务4 Web字体图标... 90

4.1 任务导入... 90

4.2 任务目标... 91

4.3 核心知识... 91

4.3.1

 Sprite图标的缺陷... 91

4.3.2 字体图标... 92

4.3.3 Font

 Awesome. 92

4.3.4

 Glyphicons 93

4.3.5 CSS

 content 属性... 94

4.3.6 字体图标定义... 94

4.3.7 字体图标用法... 96

4.4 任务实施... 97

4.4.1 建立项目... 97

4.4.2 编写HTML文件... 97

4.4.3 编写CSS样式... 97

4.4.4 浏览器测试... 99

4.5 强化训练... 99

任务5 图片排版... 99

5.1 任务导入... 99

5.2 任务目标... 100

5.3 核心知识... 101

5.3.1 图片来源... 101

5.3.2 图像质量评价... 101

5.3.3 img标记... 103

5.3.4 网页图片4大格式... 103

5.3.5

 figure与figcaption. 105

5.3.6 CSS控制图片大小... 106

5.3.7 CSS图片左右对齐... 106

5.3.8 CSS图片居中对齐... 106

5.3.9 CSS响应式图片... 106

5.3.10 CSS图像风格样式... 107

5.3.11 叠加式图片标题排版... 107

5.3.12 CSS精灵图... 109

5.3.13 图片阴影（box-shadow）... 110

5.3.14 CSS3的圆角（border-radius）... 111

5.4 任务实施... 112

5.4.1 建立项目... 112

5.4.2 编写HTML文件... 113

5.4.3 编写CSS样式... 114

5.4.4 浏览器测试... 117

5.5 强化训练... 117

任务6 列表排版... 118

6.1 任务导入... 118

6.2 任务目标... 119

6.3 核心知识... 119

6.3.1 HTML列表类型... 119

6.3.2 嵌套列表... 120

6.3.3 列表HTML结构... 120

6.3.4

 list-style-type属性... 121

6.3.5

 list-style-image属性... 122

6.3.6

 list-style-position属性... 122

6.3.7 列表默认样式... 122

6.3.8 自定义列表符号... 123

6.4 任务实施... 124

6.4.1 建立项目... 124

6.4.2 编写HTML文件... 125

6.4.3 编写CSS样式... 127

6.4.4 浏览器测试... 128

6.5 强化训练... 128

任务7 表格排版... 129

7.1 任务导入... 129

7.2 任务目标... 130

7.3 核心知识... 130

7.3.1 表格HTML结构... 130

7.3.2 表格的层次结构... 131

7.3.3 行合并和列合并... 132

7.3.4 表格删除和隐藏... 133

7.3.5 边框border 134

7.3.6 表格边框合并与分离... 135

7.3.7 表格对齐... 136

7.3.8 条纹表格... 136

7.3.9 悬停表格... 136

7.4 任务实施... 137

7.4.1 建立项目... 137

7.4.2 编写HTML文件... 137

7.4.3 编写CSS样式... 138

7.4.4 浏览器测试... 139

7.5 强化训练... 140

任务8 表单排版... 141

8.1 任务导入... 141

8.2 任务目标... 141

8.3 核心知识... 142

8.3.1 表单工作原理... 142

8.3.2 form标签... 142

8.3.3 文本框（input）... 143

8.3.4 文本域（textarea）... 145

8.3.5 选择框（select）... 145

8.3.6 按钮... 146

8.3.7 HTML5表单结构... 146

8.3.8 表单控件大小... 147

8.4 任务实施... 148

8.4.1 建立项目... 148

8.4.2 编写HTML文件... 149

8.4.3 编写CSS样式... 151

8.4.4 编写JS脚本... 155

8.4.5 浏览器测试... 156

8.5 强化训练... 158

任务9 按钮... 158

9.1 任务导入... 158

9.2 任务目标... 159

9.3 核心知识... 159

9.3.1

 button标签与属性... 159

9.3.2 按钮基础样式... 160

9.3.3 原始按钮外观... 160

9.3.4 按钮大小... 161

9.3.5 按钮状态... 162

9.3.6 CSS3 渐变Gradient 162

9.3.7 阴影box-shadow.. 166

9.3.8 圆角border-radius 166

9.4 任务实施... 167

9.4.1 建立项目... 167

9.4.2 编写HTML文件... 167

9.4.3 编写CSS样式... 168

9.4.4 浏览器测试... 170

9.5 强化训练... 170

任务10 选项卡Tab. 171

10.1 任务导入... 171

10.2 任务目标... 172

10.3 核心知识... 172

10.3.1 选项卡HTML模型... 172

10.3.2 重置无序列表ul属性... 173

10.3.3 浮动定位float 173

10.3.4 绝对定位absolute. 173

10.3.5 选项卡切换原理... 174

10.4 任务实施... 174

10.4.1 建立项目... 174

10.4.2 编写HTML文件... 175

10.4.3 编写CSS样式... 177

10.4.4 编写JS脚本... 179

10.4.5 浏览器测试... 179

10.5 强化训练... 180

任务11 轮播图排版... 181

11.1 任务导入... 181

11.2 任务目标... 182

11.3 核心知识... 182

11.3.1 轮播图结构模型... 182

11.3.2 轮播图HTML结构... 183

11.3.3 轮播的JS实现... 184

11.4 任务实施... 184

11.4.1 建立项目... 184

11.4.2 编写HTML文件... 184

11.4.3 编写CSS样式... 186

11.4.4 编写JS脚本... 188

11.4.5 浏览器测试... 190

11.5 强化训练... 190

任务12 下拉菜单... 190

12.1 任务导入... 190

12.2 任务目标... 191

12.3 核心知识... 191

12.3.1 全局导航... 191

12.3.2 多级下拉菜单结构... 191

12.3.3 导航菜单层次结构... 192

12.3.4

 inlinke-block. 193

12.3.5 元素垂直居中... 193

12.3.6

 box-shadow的理解... 193

12.3.7 绘制三角形图标... 194

12.3.8 超链接... 196

12.3.9 绝对地址和相对地址... 198

12.3.10 链接目标target 199

12.4 任务实施... 199

12.4.1 建立项目... 199

12.4.2 编写HTML文件... 200

12.4.3 编写CSS样式... 202

12.4.4 浏览器测试... 208

12.5 强化训练... 209

任务13 浮动布局... 209

13.1 任务导入... 209

13.2 任务目标... 210

13.3 核心知识... 210

13.3.1 盒子模型... 210

13.3.2 内边距padding. 213

13.3.3 外边距margin. 213

13.3.4 box-sizing. 216

13.3.5 显示类型display. 216

13.3.6 div嵌套... 217

13.3.7 id与class 217

13.3.8 标准文档流... 218

13.3.9 浮动float 218

13.3.10 清除clear 220

13.3.11 溢出（overflow）... 222

13.3.12

 iframe(内联框架) 222

13.4 任务实施... 223

13.4.1 建立项目... 223

13.4.2 编写HTML文件... 223

13.4.3 编写CSS样式... 225

13.4.4 浏览器测试... 226

13.5 强化训练... 227

任务14 流式布局... 227

14.1 任务导入... 227

14.2 任务目标... 228

14.3 核心知识... 228

14.3.1 固定宽度布局... 228

14.3.2 流式布局... 229

14.4 任务实施... 229

14.4.1 建立项目... 229

14.4.2 编写HTML文件... 230

14.4.3 编写CSS样式... 232

14.4.4 浏览器测试... 233

14.5 强化训练... 234

任务15 弹性布局... 234

15.1 任务导入... 234

15.2 任务目标... 234

15.3 核心知识... 235

15.3.1 弹性布局... 235

15.3.2 弹性布局存在的问题... 235

15.4 任务实施... 235

15.4.1 建立项目... 235

15.4.2 编写HTML文件... 235

15.4.3 编写CSS样式... 237

15.4.4 浏览器测试... 238

15.5 强化训练... 239

任务16 定位布局... 240

16.1 任务导入... 240

16.2 任务目标... 240

16.3 核心知识... 241

16.3.1 定位（positioning）... 241

16.3.2 相对定位relative. 241

16.3.3 绝对定位absolute. 241

16.3.4 固定定位fixed. 242

16.3.5

 z-index深度... 242

16.3.6 包含块... 243

16.4 任务实施... 243

16.4.1 建立项目... 243

16.4.2 编写HTML文件... 244

16.4.3 编写CSS样式... 247

16.4.4 浏览器测试... 249

16.5 强化训练... 249

任务17 CSS3多列布局... 249

17.1 任务导入... 249

17.2 任务目标... 250

17.3 核心知识... 251

17.3.1 多列布局原理... 251

17.3.2

 columns属性... 251

17.3.3 列宽度column-width. 251

17.3.4 列数column-count 251

17.3.5 列间距column-gap. 252

17.3.6

 column-rule. 252

17.3.7

 column-span. 252

17.3.8 浏览器前缀... 253

17.4 任务实施... 253

17.4.1 建立项目... 253

17.4.2 编写HTML文件... 254

17.4.3 编写CSS样式... 255

17.4.4 浏览器测试... 257

17.5 强化训练... 257

任务18 响应式页面排版... 258

18.1 任务导入... 258

18.2 任务目标... 258

18.3 核心知识... 258

18.3.1 响应式布局概述... 258

18.3.2 响应式布局关键技术... 259

18.3.3 响应式布局技巧... 262

18.3.4 Viewport定义... 263

18.3.5 响应式设计流程... 263

18.4 任务实施... 264

18.4.1 建立项目... 264

18.4.2 编写HTML文件... 264

18.4.3 编写CSS样式... 266

18.4.4 浏览器测试... 271

18.5 强化训练... 272

任务19 前端框架BootStrap. 273

19.1 任务导入... 273

19.2 任务目标... 273

19.3 核心知识... 274

19.3.1

 jQuery. 274

19.3.2

 Bootstrap. 274

19.3.3 CDN.. 274

19.3.4

 Bootstrap网络系统... 275

19.3.5

 Bootstrap媒体查询... 276

19.4 任务实施... 277

19.4.1 下载BootStrap. 277

19.4.2 建立项目... 279

19.4.3 编写HTML文件... 279

19.4.4 编写CSS样式... 284

19.4.5 浏览器测试... 286

19.5 强化训练... 286