HTML5+CSS3网站设计教程PDF电子书下载

第1章 网页和网站的基础知识 1

1.1认识网页 2

1.1.1网页和网站 2

1.1.2网页的类型 2

1.1.3静态网页与动态网页 3

1.1.4网页的基本构成元素 4

1.2如何设计网页 5

1.2.1网页设计的基本原则 5

1.2.2网页设计的成功要素 6

1.2.3网页设计的风格及色彩搭配 6

1.2.4网页设计的实现 7

1.3网页设计的要点 8

1.3.1为用户考虑 8

1.3.2主题突出 9

1.3.3整体原则 10

1.3.4内容与形式相统一 11

1.3.5更新和维护 11

1.4网站整体制作流程 12

1.4.1前期策划 12

1.4.2页面细划及实施 13

1.4.3后期维护 14

1.5课堂讨论 14

1.5.1问题1——什么是CSS样式和CSS样式的作用是什么 14

1.5.2问题2网页的版式与布局主要有几个方面的内容 15

1.6课后练习——制作简单的HTML页面 15

第2章 使用Web标准设计和制作网页 17

2.1 表格布局 17

2.1.1表格布局的特点 18

2.1.2混乱的逻辑结构和冗余的嵌套表格 18

2.2了解Web标准 19

2.2.1 Web标准的基础概念 19

2.2.2认识W3C 19

2.2.3 W3C发布的标准 19

2.2.4 Web标准的优势 22

2.3网站设计的标准时代 23

2.3.1建立网站标准的意义 23

2.3.2遵循标准的网站与传统网站的区别 24

2.3.3采用网站标准的优势与劣势 24

2.4 Web标准三剑客 25

2.4.1内容、结构、表现和行为的定义 25

2.4.2 DIV与CSS结合的优势 26

2.4.3现有网站的改善 26

2.5 Web标准的思考与争论 27

2.5.1 Web标准的好处 27

2.5.2布局 27

2.5.3浏览器兼容 27

2.6关于Web标准的误区 28

2.6.1不用传统表格思想来套DIV 28

2.6.2 XHTML标签的正确使用 28

2.6.3善于利用CSS 29

2.6.4“通过验证”并不是最终目的 30

2.7课堂讨论 30

2.7.1问题1——网站标准的目的是什么 30

2.7.2问题2——对Web技术做概述性的总结 30

2.8课后练习——使用DIV＋CSS制作简单页面 30

第3章 HTML和XHTML基础 32

3.1 HTML基础 32

3.1.1 HTML概述 33

3.1.2 HTML文件的基本结构 33

3.1.3 HTML的主要功能 33

3.1.4 HTML的基本语法 34

3.2 HTML标签 35

3.2.1基本标签 35

3.2.2格式标签 36

3.2.3文本标签 37

3.2.4超链接标签 37

3.2.5图像标签 38

3.2.6表格标签和表单标签 38

3.2.7分区标签 39

3.3 HTML介绍 39

3.3.1什么是XHTML 39

3.3.2升级到XHTML的好处 40

3.3.3 XHTML的页面结构 40

3.3.4 XHTML代码规范 41

3.3.5选择文档类型 44

3.3.6 XHTML和HTML的比较 45

3.3.7名字空间 46

3.4课堂讨论 46

3.4.1问题1——在＜body＞标签中有没有什么属性可以设置网页的字体和大小 46

3.4.2问题2——网页中默认的超链接文字显示效果是什么样的 46

3.5课后练习——使用HTML5.0制作网页 46

第4章 CSS样式基础 48

4.1 CSS概述 48

4.1.1 CSS的特点 49

4.1.2 CSS的类型 50

4.1.3 CSS的基本语法 51

4.2 CSS样式表的基本用法 51

4.2.1如何在HTML内插入样式表 51

4.2.2 CSS样式表规则 52

4.3 CSS样式表分类 52

4.3.1内联样式 52

4.3.2内部样式表 53

4.3.3外部样式表 53

4.4 CSS文档结构 54

4.4.1结构 54

4.4.2继承 54

4.4.3特殊性 55

4.4.4层叠 56

4.4.5重要性 56

4.5单位和值 56

4.5.1颜色值 57

4.5.2字体属性 58

4.5.3群选择符 59

4.5.4派生选择符 59

4.5.5 id选择符 60

4.5.6 类选择符 60

4.5.7定义链接的样式表 61

4.6课堂练习——制作旅游网站页面 62

4.6.1设计分析 63

4.6.2制作步骤 63

4.6.3案例总结 66

4.7课堂讨论 66

4.7.1问题1——CSS能做什么 67

4.7.2问题2——CSS和HTML的区别 67

4.8课后练习——制作设计工作室网页 68

第5章 DIV＋CSS布局入门 69

5.1定义DIV 69

5.1.1什么是DIV 70

5.1.2插入DIV 70

5.1.3 DIV的嵌套和固定格式 71

5.2可视化模型 72

5.2.1盒模型 72

5.2.2视觉可视化模型 73

5.2.3相对定位 74

5.2.4绝对定位 75

5.2.5浮动定位 75

5.2.6空白边叠加 79

5.3 CSS布局方式 80

5.3.1居中的布局设计 80

5.3.2浮动的布局设计 80

5.3.3高度自适应 84

5.4 CSS3.0中盒模型的新增属性 85

5.4.1 overflow 85

5.4.2 overflow-x 86

5.4.3 overflow-y 87

5.4.4使用CSS 3.0实现鼠标经过变换效果 88

5.5课堂练习——制作广告页面 89

5.5.1设计分析 89

5.5.2制作步骤 89

5.5.3案例总结 92

5.6课堂讨论 92

5.6.1问题1——DIV＋CSS布局的优势 92

5.6.2问题2——margin属性的4个值 93

5.7课后练习——制作产品介绍页面 93

第6章 设置页面背景图像 94

6.1背景控制概述 94

6.1.1背景控制原则 95

6.1.2背景控制属性 95

6.2背景颜色控制 96

6.2.1控制页面背景颜色 96

6.2.2设置块背景颜色 96

6.3背景图像控制 97

6.3.1设置背景图像 97

6.3.2背景图像的重复方式 97

6.3.3背景图像的定位 98

6.3.4背景图像的滚动 99

6.4 CSS 3.0中背景的新增属性 100

6.4.1 background-origin 100

6.4.2 background-clip 101

6.4.3 background-size 103

6.4.4 multiple backgrounds 104

6.4.5使用CSS 3.0实现动态背景 105

6.5课堂练习——定义背景图像的位置 105

6.5.1设计分析 105

6.5.2制作步骤 106

6.5.3案例总结 108

6.6课堂讨论 108

6.6.1问题1——background-position属性的设置可以使用哪些值 108

6.6.2问题2——background-color属性与bgcolor属性有什么不同 108

6.7课后练习——定义背景图像 109

第7章 设置页面中的图像 110

7.1图像样式控制 110

7.1.1图像边框 111

7.1.2图像定位 113

7.1.3图像缩放 114

7.1.4图像对齐方式 116

7.2图文混排 118

7.2.1设置文本混排 118

7.2.2设置混排间距 118

7.3 CSS 3.0中边框的新增属性 119

7.3.1 border-image 119

7.3.2 border-radius 120

7.3.3 border-color 121

7.3.4 box-shadow 122

7.3.5使用CSS 3.0实现图像滑过动画效果 123

7.4课堂练习——制作产品宣传页面 124

7.4.1设计分析 125

7.4.2制作步骤 125

7.5课堂讨论 128

7.5.1问题1——使用图像时需要注意什么 128

7.5.2问题2——在网页中插入图像时，可以不设置图像的宽度和高度属性吗 128

7.6课后练习——制作产品展示页面 128

第8章 CSS义本内容排版 130

8.1文本排版概述 130

8.1.1文本排版原则 131

8.1.2文本控制属性 131

8.2 CSS文本样式 131

8.2.1字体 132

8.2.2大小 133

8.2.3粗细 134

8.2.4样式 135

8.2.5颜色 136

8.2.6修饰 137

8.2.7英文字母大小写 137

8.3 CSS段落样式 138

8.3.1段落水平对齐 138

8.3.2段落垂直对齐 139

8.3.3行间距和字间距 139

8.3.4首字符下沉 140

8.4 CSS 3.0中文字的新增功能 141

8.4.1 text-shadow 141

8.4.2 text-overflow 142

8.4.3 word-wrap 143

8.4.4使用CSS 3.0实现可折叠栏目 144

8.5课堂练习——制作疗健康网站页面 145

8.5.1设计分析 145

8.5.2制作步骤 145

8.6课堂讨论 151

8.6.1问题1——CSS段落样式中的两端对齐有什么作用范围 151

8.6.2问题2——设置网页中的文本字间距时需要注意什么 151

8.7课后练习——制作宠物用品网站页面 151

第9章 设置表单样式 153

9.1表单设计概述 154

9.1.1表单设计原则 154

9.1.2表单应用分类 154

9.2表单设计 155

9.2.1表单和表单元素 155

9.2.2 ＜label＞标签的作用 159

9.2.3文本框样式设计 159

9.2.4下拉列表样式设计 160

9.3 CSS 3.0中控制内容的新增属性 161

9.4 CSS 3.0中颜色的新增属性 162

9.4.1 HSL cloors 162

9.4.2 HSLA colors 162

9.4.3 opacity 163

9.4.4 RGBA colors 163

9.4.5使用CSS 3.0实现动态堆叠卡效果 163

9.5课堂练习——设置表单元素的边框 167

9.5.1设计分析 167

9.5.2制作步骤 167

9.5.3案例总结 171

9.6课堂讨论 171

9.6.1问题1——在表单域中插入图像域的作用 171

9.6.2问题2——表单的概念及表单在网页中的作用 171

9.7课后练习——设置表单元素的背景颜色 171

第10章 设置列表样式 173

10.1列表控制概述 174

10.1.1列表控制原则 174

10.1.2列表标签的使用 174

10.2列表样式控制 175

10.2.1 ul（无序列表） 175

10.2.2 ol（有序列表） 175

10.2.3定义列表 175

10.2.4更改列表项目样式 176

10.3使用列表制作菜单 177

10.3.1无需表格的菜单 177

10.3.2菜单的横竖转换 179

10.4 CSS3.0中其他模块的新增属性 180

10.4.1 @media 180

10.4.2 @font-face 181

10.4.3 columns 182

10.4.4 speech 183

10.4.5使用CSS 3.0实现选项卡式新闻块 185

10.5课堂练习——制作游戏类网站页面 188

10.5.1设计分析 188

10.5.2制作步骤 188

10.6课堂讨论 193

10.6.1问题1——网页中文本分行与分段有什么区别 193

10.6.2问题2—如何不通过CSS样式更改项目列表前的符号效果 193

10.7课后练习——制作音乐列表 193

第11章 设置页面超链接样式 195

11.1超链接概述 196

11.1.1超链接样式控制原则 196

11.1.2超链接控制属性 196

11.2超链接特效 198

11.2.1文字式超链接 198

11.2.2按钮式超链接 200

11.2.3浮雕式超链接 201

11.3 CSS 3.0中用户界面的新增属性 201

11.3.1 box-sizing 201

11.3.2 resize 202

11.3.3 outline 202

11.3.4 nav-index 202

11.3.5使用CSS 3.0实现动态菜单效果 203

11.4课堂练习——定义超链接样式 205

11.4.1设计分析 205

11.4.2制作步骤 205

11.4.3案例小结 207

11.5课堂讨论 208

11.5.1问题1——什么是超链接 208

11.5.2问题2——如何识别网页中的超链接 208

11.6课后练习——制作页面的文本链接 208

第12章 使用JavaScript搭建动态效果 210

12.1什么是JavaScript 211

12.1.1 JavaScript概念 211

12.1.2 JavaScript的特点 213

12.1.3 JavaScript的应用范围 214

12.1.4 CSS与JavaScript 216

12.2使用JavaScript实现动态效果 216

12.2.1使用JavaScript的方法 217

12.2.2 JavaScript中的数据类型和变量 218

12.2.3 JavaScript中的程序语句 219

12.2.4 JavaScript中的运算符 220

12.3课堂练习——制作动态菜单效果 221

12.3.1设计分析 221

12.3.2制作步骤 221

12.3.3案例总结 224

12.4课后讨论 224

12.4.1问题1——JavaScript可以对浏览器进行控制吗 224

12.4.2问题2——JavaScript如何实现与用户交互 225

12.5课后练习—制作可以折叠的相册 225

第13章 CSS与XML和Ajax的综合使用 226

13.1 XML基础 227

13.1.1总线简介 227

13.1.2 XML的特点 227

13.1.3 XML的结构和基本语法 229

13.1.4 HTML与XML 232

13.1.5什么是“格式良好的”XML文件 233

13.2 XML与CSS的应用 234

13.2.1在XML中链接CSS样式 235

13.2.2实现隔行变色的表格 236

13.3 Ajax基础 240

13.3.1 Ajax简介 240

13.3.2 Ajax的关键元素 241

13.3.3 Ajax的优势 243

13.3.4实现Ajax的步骤 243

13.3.5使用CSS的必要性 244

13.4 Ajax与CSS的综合运用 245

13.5课堂练习——制作动态网站相册 245

13.5.1设计分析 246

13.5.2制作步骤 246

13.5.3案例总结 248

13.6课堂讨论 249

13.6.1问题1——导入CSS样式表与链接CSS样式表有什么区别 249

13.6.2问题2——使用RevealTrans滤镜为什么需要添加JavaScript脚本 249

13.7课堂练习——制作网站页面 249

第14章 HTML5.0和CSS高级运用 251

14.1 HTML 5.0简介 252

14.1.1 HTML 5.0标签 252

14.1.2 HTML 5.0事件属性 256

14.1.3 HTML 5.0标准属性 257

14.1.4使用HTML 5.0实现动感页面效果 258

14.2 id与class 261

14.2.1 id是什么 261

14.2.2什么情况下使用id 261

14.2.3 class是什么 262

14.2.4什么情况下使用class 262

14.3 DIV与span对象 262

14.4 CSS代码的简写 263

14.4.1 font样式简写 263

14.4.2 color样式简写 264

14.4.3 background样式简写 264

14.4.4 margin和padding样式简写 265

14.4.5 border样式简写 265

14.4.6 list样式简写 266

14.5课堂练习——制作教育类网站页面 267

14.5.1设计分析 267

14.5.2制作步骤 267

14.5.3案例总结 271

14.6课堂讨论 271

14.6.1问题1——CSS 1、CSS 2和CSS 3分别有哪些特点 271

14.6.2问题2——什么是CSS选择符 271

14.7课堂练习——制作电子产品购物网站 271

第15章 制作野生动物园网站页面 273

15.1设计分析 274

15.2布局分析 274

15.3制作流程 275

15.4制作步骤 275

15.5案例小结 283

15.6课堂讨论 283

15.6.1问题1——CSS样式的主旨是什么 283

15.6.2问题2——类CSS样式的名称前为什么要加“.”符号 283

15.7课后练习——制作滑动图像页面 284

第16章 制作餐饮类网站页面 286

16.1设计分析 287

16.2布局分析 287

16.3制作流程 288

16.4制作步骤 289

16.5案例小结 298

16.6课堂讨论 298

16.6.1问题1——在网页中插入多媒体对象后，在HTML中会生成什么标签 299

16.6.2问题2——在什么情况下才能够通过属性面板为文字创建项目列表 299

16.7课后练习——制作社区类网站 299