HTML5+CSS3网站设计教程【2025|PDF|Epub|mobi|kindle电子书版本百度云盘下载】

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认识W3C19

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不用传统表格思想来套DIV28

2.6.2 XHTML标签的正确使用28

2.6.3善于利用CSS29

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什么是XHTML39

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定义DIV69

5.1.1什么是DIV70

5.1.2插入DIV70

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 overflow85

5.4.2 overflow-x86

5.4.3 overflow-y87

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-origin100

6.4.2 background-clip101

6.4.3 background-size103

6.4.4 multiple backgrounds104

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-image119

7.3.2 border-radius120

7.3.3 border-color121

7.3.4 box-shadow122

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-shadow141

8.4.2 text-overflow142

8.4.3 word-wrap143

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 cloors162

9.4.2 HSLA colors162

9.4.3 opacity163

9.4.4 RGBA colors163

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 @media180

10.4.2 @font-face181

10.4.3 columns182

10.4.4 speech183

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-sizing201

11.3.2 resize202

11.3.3 outline202

11.3.4 nav-index202

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什么是JavaScript211

12.1.1 JavaScript概念211

12.1.2 JavaScript的特点213

12.1.3 JavaScript的应用范围214

12.1.4 CSS与JavaScript216

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与XML232

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与class261

14.2.1 id是什么261

14.2.2什么情况下使用id261

14.2.3 class是什么262

14.2.4什么情况下使用class262

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