HTML 5+CSS 3+JavaScript网页设计与制作全程揭秘PDF电子书下载

查看更多关于的内容

第1章 认识HTML与HTML5 1

1.1了解动态网站的开发技术 1

1.1.1网页编辑软件Dreamweaver 1

1.1.2网页标记语言HTM L 2

1.1.3网页表现语言CSS 2

1.1.4网页特效脚本语言JavaScript 2

1.1.5动态网页编程语言ASP、PHP和JSP等 3

1.2 HTML基础 3

1.2.1什么是HTML 3

1.2.2HTML的主要功能 4

1.2.3HTML的编辑环境 4

1.2.4认识Dreamweaver 5

实战 制作第一个HTML页面 6

1.3 HTML5基础 7

1.3.1HTML5概述 7

1.3.2HTML5的优势 8

1.4认识HTML5 9

1.4.1HTML5的文档结构 9

1.4.2HTML5的基本语法 9

1.4.3 HTML5精简的头部 10

1.5 HTML5中新增的标签 10

1.5.1结构标签 11

1.5.2文本标签 11

1.5.3应用和辅助标签 11

1.5.4进度标签 11

1.5.5交互性标签 11

1.5.6在文档和应用中使用的标签 12

1.5.7 〈ruby〉标签 12

1.5.8 其他标签 12

1.6HTML5中废弃的标签 12

1.7HTML、CSS与JavaScript的结合 13

第2章 HTML主体标签 14

2.1HTML头部〈head〉标签设置 14

2.1.1 〈title〉标签 14

实战 设置网页标题 14

2.1.2 〈base〉标签 15

实战 设置网页基底网址 16

2.1.3 〈meta〉标签 16

实战 设置网页关键字、说明以及页面定时跳转 18

2.2HTML主体〈body〉标签设置 19

2.2.1边距属性margin 19

实战 设置网页整体内容边距 20

2.2.2背景颜色属性bgcolor 21

实战 设置网页背景颜色 21

2.2.3背景图像属性background 21

实战 为网页主体添加背景图像 22

2.2.4文字属性text 22

实战 设置网页文字默认颜色 23

2.2.5默认链接属性link 23

实战 设置网页中超链接文字的默认颜色 24

2.3在HTML代码中添加注释 25

2.4在HTML中调用外部程序 25

2.4.1调用外部JavaScript程序 25

实战 在网页中显示当前系统时间 25

2.4.2区分客户端与服务器端程序 27

第3章 文字与图片标签的应用 28

3.1文字修饰 28

3.1.1文字样式〈font〉标签 28

实战 设置文字样式 28

3.1.2文字倾斜〈i〉和〈em〉标签 29

实战 设置倾斜文字效果 30

3.1.3文字加粗〈b〉和〈strong〉标签 30

实战设置文字加粗效果 31

3.1.4文字下画线〈u〉标签 31

实战 为文字添加下画线修饰 32

3.1.5其他文字修饰方法 32

3.2文字的分行与分段 33

3.2.1文字换行〈br〉标签 33

实战 为网页中的文字内容进行换行处理 33

3.2.2文字强制不换行〈nobr〉标签 34

实战强制文字不自动换行 34

3.2.3文字分段〈p〉标签 34

实战为网页中的文字内容进行分段处理 34

3.2.4标题文字〈h1〉至〈h6〉标签 35

实战 设置标题文字 35

3.2.5文字对齐属性align 36

实战 设置文字水平对齐效果 36

3.2.6水平线〈hr〉标签 37

实战 在网页中插入水平线 37

3.2.7空格与特殊字符 38

实战 在网页中插入空格和特殊字符 38

3.3文本滚动〈marquee〉标签 39

实战 在网页中实现滚动文本效果 40

3.4列表标签 41

3.4.1认识列表标签 41

3.4.2无序列表〈ul〉标签 41

实战制作新闻列表 41

3.4.3有序列表〈ol〉标签 43

实战 制作音乐排行列表 43

3.4.4定义列表〈dl〉标签 44

实战 制作复杂的新闻列表 44

3.5图片标签 45

3.5.1 〈img〉标签 45

实战 制作图像页面 46

3.5.2图文混排 47

实战 制作图文介绍页面 47

3.5.3滚动图片 48

第4章 超链接与表格标签的应用 49

4.1超链接标签 49

4.1.1超链接〈a〉标签 49

4.1.2相对链接和绝对链接 50

4.1.3超链接提示alt属性 50

4.1.4超链接打开方式target属性 50

实战 在网页中创建超链接 51

4.2锚点链接 52

4.2.1插入锚点 52

4.2.2创建锚点链接 52

实战制作锚点链接页面 52

4.3创建特殊链接 53

4.3.1空链接 54

4.3.2文件下载链接 54

实战 创建空链接和文件下载链接 54

4.3.3脚本链接 55

4.3.4 E-mail链接 55

实战 创建脚本链接和电子邮件链接 55

4.4表格标签 56

4.4.1表格的基本构成〈table〉、〈tr〉和〈td〉标签 57

4.4.2表格标题〈caption〉标签 57

实战创建数据表格 57

4.4.3表头〈thead〉、表主体〈tbody〉和表尾〈tfoot〉标签 58

实战设置表格中的表头、表主体和表尾 59

4.5 iFrame框架 60

实战插入并设置iFrame框架 60

第5章 多媒体标签的应用 62

5.1使用〈embed〉标签嵌入传统多媒体元素 62

5.1.1使用〈embed〉标签在网页中插入Flash动画 62

实战 制作Flash欢迎页面 62

5.1.2使用〈bgsound〉标签为网页添加背景音乐 63

实战 为网页添加背景音乐 63

5.1.3使用〈embed〉标签嵌入音频 64

实战 在网页中嵌入音频 64

5.1.4使用〈embed〉标签嵌入视频 65

实战 在网页中嵌入普通视频 65

5.2了解HTML5中的多媒体标签 66

5.2.1在线多媒体的发展 66

5.2.2检查浏览器是否支持〈audio〉和〈video〉标签 66

5.3HTML5新增〈audio〉标签的应用 67

5.3.1 〈audio〉标签所支持的音频格式 67

5.3.2使用〈audio〉标签 67

实战 在网页中嵌入HTM L5音频播放 67

5.4HTML5新增〈video〉标签的应用 68

5.4.1 〈video〉标签所支持的视频格式 68

5.4.2使用〈video〉标签 68

实战 在网页中嵌入HTML5视频播放 69

5.4.3使用〈source〉标签 70

5.5 〈audio〉与〈video〉标签的属性 70

5.5.1元素的标签属性 70

5.5.2元素的接口属性 71

5.6 〈audio〉与〈video〉标签的接口方法与事件 72

5.6.1元素的接口方法 72

5.6.2元素的事件 72

实战 自定义播放控制组件 73

第6章 表单标签的应用 77

6.1了解HTML表单 77

6.1.1表单的作用 77

6.1.2表单〈form〉标签 77

6.1.3表单的数据传递方式 78

6.2普通的HTML表单元素 78

6.2.1文本域 78

6.2.2密码域 78

6.2.3文本区域 79

6.2.4隐藏域 79

6.2.5复选框 79

6.2.6单选按钮 79

6.2.7选择域 80

6.2.8文件域 80

6.2.9按钮 80

6.2.10图像域 80

实战 制作登录表单 81

6.3HTML5新增表单输入类型 83

6.3.1 url类型 83

6.3.2 email类型 83

6.3.3 range类型 83

6.3.4 number类型 83

6.3.5 tel类型 84

6.3.6 search类型 84

6.3.7 color类型 84

6.3.8 date类型 84

6.3.9 month、week、time、datetime、datetime-local类型 85

实战 制作留言表单页面 85

6.3.10浏览器对HTM L5表单的支持情况 88

6.4HTML5新增表单属性 88

6.4.1 form属性 88

6.4.2 formaction属性 89

6.4.3 formmethod、formenctype、formnovalidate、formtarget属性 89

6.4.4 placeholder属性 89

6.4.5 autofocus属性 89

实战 为表单元素设置默认提示内容 90

6.4.6 autocomplete属性 90

6.5使用HTML5表单验证 91

6.5.1用于实现验证的表单元素属性 91

实战 验证网页表单元素 91

6.5.2表单验证方法 92

6.5.3表单验证事件 93

第7章 HTML5中〈cavas〉标签的应用 95

7.1 〈canvas〉标签 95

7.1.1了解〈canvas〉标签 95

7.1.2在网页中使用〈canvas〉标签 95

7.1.3使用〈canvas〉标签实现绘图的流程 96

7.2绘制基本图形 97

7.2.1绘制直线 97

实战 在网页中绘制直线 97

7.2.2绘制矩形 98

实战 在网页中绘制矩形 99

7.2.3绘制圆形 100

实战 在网页中绘制圆形 101

7.2.4绘制三角形 101

实战 在网页中绘制三角形 102

7.2.5 图形组合 102

7.3绘制文本 104

7.3.1使用文本 104

实战 在网页中绘制文字 104

7.3.2创建对象阴影 105

实战 为网页中所绘制的文字添加阴影 106

7.4在网页中绘制特殊形状图像 106

7.4.1绘制图像 106

实战 在网页中绘制图像 107

7.4.2裁切区域 108

实战 在网页中实现圆形图像效果 108

第8章 HTML5文档结构标签的应用 111

8.1构建HTML5页面主体内容 111

8.1.1文章〈article〉标签 111

8.1.2章节〈section〉标签 113

8.1.3导航〈nav〉标签 114

8.1.4辅助内容〈aside〉标签 115

8.1.5日期时间〈time〉标签 116

8.2 HTML5文档中的语义模块标签 116

8.2.1标题〈header〉标签 116

8.2.2标题分组〈hgroup〉标签 117

8.2.3页脚〈footer〉标签 118

8.2.4联系信息〈address〉标签 118

8.3制作HTML5文章页面 119

实战 制作HTML5文章页面 119

第9章 CSS样式基础 123

9.1了解CSS样式 123

9.1.1什么是CSS样式 123

9.1.2 CSS样式的发展 123

9.2 CSS样式语法 124

9.2.1 CSS样式基本语法 124

9.2.2 CSS样式规则 125

9.3创建和使用CSS选择器 125

9.3.1通配符选择器 125

实战 使用通配符选择器控制网页中的所有标签 126

9.3.2标签选择器 126

实战使用标签选择器设置网页整体样式 127

9.3.3 ID选择器 127

实战创建和使用ID CSS样式 128

9.3.4类选择器 129

实战 创建和使用类CSS样式 129

9.3.5 伪类选择器 130

实战 设置网页中超链接伪类样式 131

9.3.6派生选择器 132

实战 创建派生选择器样式 133

9.3.7群组选择器 133

实战 使用群组选择器同时定义多个网页元素样式 134

9.4在网页中应用CSS样式的4种方式 135

9.4.1内联CSS样式 135

实战 创建并应用内联CSS样式 135

9.4.2内部CSS样式 136

实战 创建并应用内部CSS样式 136

9.4.3外部CSS样式 137

实战创建并链接外部CSS样式表文件 137

9.4.4导入外部CSS样式 138

实战 导入外部CSS样式表文件 139

9.5 CSS样式的特性 139

9.5.1 CSS样式的继承性 139

9.5.2 CSS样式的特殊性 139

9.5.3 CSS样式的层叠性 140

9.5.4 CSS样式的重要性 140

第10章 CSS布局与定位方式 142

10.1创建Div 142

10.1.1了解Div 142

10.1.2如何插入Div 142

10.1.3块元素与行内元素 144

10.2 CSS基础盒模型 145

10.2.1 CSS基础盒模型概述 145

10.2.2 margin属性——元素边距 146

10.2.3 border属性——元素边框 146

10.2.4 padding属性——元素填充 146

实战 设置网页元素的盒模型相关属性 147

10.3网页元素的定位方式 148

10.3.1 CSS定位属性 148

10.3.2相对定位relative 149

实战 实现网页元素的叠加显示 149

10.3.3绝对定位absolute 150

实战 网页元素固定在右侧显示 150

10.3.4固定定位fixed 151

实战 实现固定位置的顶部Logo 151

10.3.5浮动定位 152

实战 制作顺序排列的图像列表 152

10.3.6空白边叠加 155

实战 网页中空白边叠加的应用 155

10.4常见的网页布局方式 156

10.4.1居中的布局 156

10.4.2浮动的布局 157

10.4.3自适应高度的解决方法 161

第11章 CSS基础属性详解 162

11.1使用CSS设置文字样式 162

11.1.1 font-family属性——字体 162

11.1.2 font-size属性——字体大小 162

11.1.3 color 属性——文字颜色 163

实战 设置网页文字基本效果 163

11.1.4 font-weight属性——字体粗细 164

实战 设置网页文字加粗效果 165

11.1.5 font-style属性——字体样式 165

实战 设置网页文字倾斜效果 166

11.1.6 text-transform属性——英文字体大小写 166

实战 设置网页中英文字体大小写 167

11.1.7 text-decoration属性——文字修饰 168

实战 为网页中的文字添加下画线、顶画线和删除线效果 168

11.1.8 letter-spacing属性——字符间距 169

实战 设置网页中文字的字符间距 169

11.2使用CSS设置段落样式 170

11.2.1 line-height属性——行间距 170

11.2.2 text-indent属性——段落首行缩进 170

实战 美化网页中的段落文本 170

11.2.3段落首字下沉 171

实战 在网页中实现段落文字首字下沉 172

11.2.4 text-align 属性——水平对齐方式 172

实战 设置网页文本水平对齐效果 173

11.2.5 vertical-align属性——垂直对齐方式 174

实战 设置网页文本垂直对齐效果 174

11.3使用CSS设置背景颜色和背景图像 175

11.3.1 background-color属性——背景颜色 176

实战 设置网页的背景颜色 176

11.3.2 background-image属性——背景图像 176

11.3.3 background-repeat属性——背景图像重复方式 177

实战 设置网页背景图像及其重复方式 177

11.3.4 background-position属性——背景图像位置 179

实战 定位网页中的背景图像 179

11.3.5 background-attachment属性——固定背景图像 180

实战 设置网页中的背景图像固定不动 180

11.4使用CSS设置边框与图片缩放样式 181

11.4.1 border属性——边框 181

实战 为网页元素添加边框效果 182

11.4.2图片缩放 184

实战 设置网页中图片的等比例缩放效果 184

11.5使用CSS设置列表样式 185

11.5.1 list-style-type属性——设置列表符号 185

实战 设置新闻列表效果 186

11.5.2 list-type-image属性——自定义列表符号 187

实战 使用自定义图像作为列表符号 187

11.5.3设置定义列表样式 188

实战 制作复杂的新闻列表 188

11.6超链接CSS样式伪类 189

11.6.1 ：link伪类 189

11.6.2 ：hover伪类 190

11.6.3 ：active伪类 190

11.6.4 ：visited伪类 190

实战 设置网页中超链接文字效果 191

11.6.5 按钮式超链接 193

实战 制作网站导航菜单 193

11.7 cursor属性——光标指针效果 194

实战 在网页中实现多种光标指针效果 195

第12章 CSS3属性详解 196

12.1了解CSS3 196

12.1.1 CSS3的发展 196

12.1.2浏览器对CSS3的支持情况 196

12.1.3了解CSS3的全新功能 197

12.2 CSS3新增选择器 197

12.2.1属性选择器 197

实战 在网页中使用属性选择器 198

12.2.2结构伪类选择器 199

12.2.3 UI元素状态伪类选择器 200

12.2.4伪元素选择器 200

实战 在网页中使用伪元素选择器 201

12.3新增的颜色定义方法 202

12.3.1 RGBA颜色定义方法 202

实战 使用RGBA方式设置半透明颜色 202

12.3.2 HSL颜色定义方法 203

12.3.3 HSLA颜色定义方法 203

实战 使用HSL和HSLA方式定义网页元素的背景颜色 203

12.4新增的文字设置属性 204

12.4.1 text-shadow属性——文字阴影 204

实战 为网页文字添加阴影效果 205

12.4.2 text-overflow属性——文本溢出 206

实战 设置文字溢出处理方式 206

12.4.3 word-wrap属性 207

实战 设置长文本内容换行 207

12.4.4 word-break和word-space属性 208

实战 设置文字内容换行处理方式 209

12.4.5 ＠font-face规则——嵌入Web字体 210

实战 在网页中实现特殊字体效果 210

12.5新增的背景设置属性 212

12.5.1 background-size属性——背景图像大小 212

实战 实现始终满屏显示的网页背景 212

12.5.2 background-origin属性——背景图像原点位置 215

实战 设置背景图像显示原点位置 215

12.5.3 background-clip属性——背景图像裁剪区域 216

实战 设置元素背景图像的显示区域 217

12.5.4 background属性——多背景图像 217

实战 为网页设置多背景图像效果 218

12.6新增的边框设置属性 219

12.6.1 border-colors属性——多种颜色边框 219

实战 实现多彩绚丽的边框效果 219

12.6.2 border-radius属性——圆角边框 220

实战 为网页元素设置圆角效果 221

12.6.3 border-image属性——图像边框 222

实战 为网页元素设置图像边框效果 222

12.6.4 box-shadow属性——元素阴影 223

实战 为网页元素添加阴影效果 224

12.7新增的多列布局属性 225

12.7.1 columns属性——多列布局 225

实战 快速对网页内容分列 225

12.7.2 column-width 属性——列宽度 226

12.7.3 column-count 属性——列数 226

12.7.4 column-gap属性——列间距 227

12.7.5 column-rule属性——列分隔线 227

12.7.6 column-span属性——横跨列 228

实战 设置网页内容的分列布局效果 228

12.8新增的盒模型设置属性 230

12.8.1 opacity属性——元素不透明度 230

实战 设置网页元素的不透明度 230

12.8.2 overflow-x和overflow-y属性——溢出内容处理方式 231

实战 设置网页元素内容溢出的处理方式 232

12.8.3 resize属性——自由缩放 233

实战 实现网页元素尺寸任意拖动缩放 233

12.8.4 outline属性——轮廓外边框 234

实战 为网页元素添加轮廓外边框效果 235

12.8.5 content属性——赋予内容 236

实战 为网页元素赋予文字内容 237

第13章 使用CSS3实现动画效果 238

13.1实现元素变形 238

13.1.1 transform属性 238

13.1.2使用rotate（）函数实现元素旋转 238

实战 实现网页元素的旋转变形效果 239

13.1.3使用scale（）函数实现元素缩放和翻转变形 239

实战 实现网页元素的缩放和翻转效果 240

13.1.4使用translate（）函数实现元素移动 240

实战 实现网页元素的移动效果 241

13.1.5使用skew（）函数实现元素倾斜 241

实战 实现网页元素的倾斜效果 242

13.1.6使用matrix（）函数实现元素矩阵变形 242

实战 实现网页元素的矩阵变形效果 243

13.1.7定义变形中心点 244

实战 设置网页元素的变形中心点位置 244

13.1.8同时使用多个变形函数 245

实战 为网页元素同时应用多种变形效果 245

13.2 CSS3实现过渡动画效果 246

13.2.1 transition属性 246

13.2.2 transition-property属性——实现过渡效果 247

实战 制作网页元素旋转并放大动画效果 247

13.2.3 transition-duration属性——设置过渡时间 248

实战设置网页元素变形动画持续时间 248

13.2.4 transition-delay属性——实现过渡延迟效果 249

实战 设置网页元素变形动画延迟时间 249

13.2.5 transition-timing-function属性——设置过渡方式 250

实战 设置网页元素变形动画过渡方式 251

第14章 JavaScript基础 252

14.1了解JavaScript 252

14.1.1 JavaScript概述 252

14.1.2 JavaScript在网页中的作用 252

14.1.3如何在网页中应用JavaScript 253

实战 编写一个简单的JavaScript脚本 253

14.2 JavaScript语法基础 254

14.2.1 JavaScript代码格式 254

14.2.2 〈script〉标签声明 254

14.2.3大小写规范 255

14.2.4添加注释 255

14.2.5 JavaScript中的保留字 255

14.2.6 输出方法 255

实战 使用JavaScript程序在网页中输出文字 256

14.3变量 256

14.3.1什么是变量 257

14.3.2变量的声明和使用 257

实战 定义并输出变量 257

14.4数据类型 258

14.4.1什么是数据类型 258

14.4.2基本的数据类型 258

实战 数据类型的使用 259

14.5运算符 259

14.5.1运算符与表达式 259

实战 合并表达式 260

14.5.2算术运算符 260

实战 算术运算符的应用 260

14.5.3赋值运算符 261

实战 赋值运算符的应用 261

14.5.4递增和递减运算符 262

实战 递增和递减运算符的应用 262

14.5.5关系运算符 263

实战 关系运算符的应用 263

14.5.6 逻辑运算符 264

实战 逻辑运算符的应用 264

14.5.7条件运算符 265

实战 条件运算符的应用 265

14.6条件和循环语句 266

14.6.1 if条件语句 266

实战if条件语句的应用 266

14.6.2 switch条件语句 267

实战switch条件语句的应用 267

14.6.3 while循环语句 268

实战while语句的应用 268

14.6.4 do…while循环语句 268

实战do …while循环语句的应用 269

14.6.5 for循环语句 269

实战for循环语句的应用 269

14.6.6 for…in循环语句 270

实战for …in循环语句的应用 270

第15章 JavaScript中的函数与对象 272

15.1 JavaScript函数 272

15.1.1什么是函数 272

15.1.2函数的使用 272

实战 自定义函数的应用 273

15.1.3函数传递参数 273

实战 使用函数传递参数 274

15.1.4函数中变量的作用域 274

实战 了解函数中变量的作用域 274

15.1.5函数的返回值 275

实战 接收函数返回值 275

15.1.6函数嵌套 276

实战 函数嵌套的应用 276

15.2声明和引用对象 277

15.2.1对象的声明 277

实战在JavaScript中声明对象 277

15.2.2引用对象 278

实战 引用内置对象输出系统时间 278

15.2.3对象属性 279

实战 设置对象属性 279

15.2.4对象构造函数 279

实战 对象构造函数的应用 279

15.2.5自定义对象方法 280

实战 自定义对象的应用 280

15.3 JavaScript内置对象 281

15.3.1 date对象 281

实战date对象的应用 282

15.3.2 math对象 283

实战math对象的应用 283

15.3.3 string对象 284

实战string对象的应用 284

15.3.4 array对象 284

实战array对象的应用 285

15.3.5函数对象 286

实战 函数对象的应用 286

15.4浏览器对象 287

15.4.1浏览器对象navigator 287

实战navigator对象的应用 287

15.4.2窗口对象window 288

实战window对象的应用 289

15.4.3位置对象location 289

实战location对象的应用 290

15.4.4历史对象history 291

实战history对象的应用 291

15.4.5屏幕对象screen 291

实战screen对象的应用 292

15.4.6文档对象document 292

实战document对象的应用 293

第16章 JavaScript中的事件 294

16.1了解JavaScript事件 294

16.1.1 JavaScript事件类别 294

16.1.2 JavaScript事件处理 294

16.1.3 HTML元素常用事件 295

16.1.4常用事件方法 295

16.2常用事件在网页中的应用 296

16.2.1 click事件 296

实战 使用click事件实现关闭网页窗口 296

16.2.2 change事件 297

实战 使用dhange事件实现弹出提示框 297

16.2.3 select事件 297

实战 使用select事件实现弹出提示框 298

16.2.4 focus事件 298

实战focus事件在网页中的应用 299

16.2.5 load事件 299

实战load事件在网页中的应用 299

16.2.6 鼠标移动事件 300

实战 在网页中应用鼠标移动事件 300

16.2.7 onblur事件 301

实战onblur事件在网页中的应用 301

第17章 JavaScript综合应用案例 303

17.1实现可选择字体大小 303

17.1.1思路分析 303

17.1.2功能实现 303

实战 实现可选择字体大小 303

17.2实现图像滑动切换效果 304

17.2.1思路分析 304

17.2.2功能实现 305

实战 实现图像滑动切换效果 305

17.3实现滚动宣传广告 307

17.3.1思路分析 308

17.3.2功能实现 308

实战 实现滚动宣传广告 308

17.4制作保健品网站 316

17.4.1思路分析 316

17.4.2功能实现 316

实战 制作保健品网站 316

17.5制作儿童产品宣传网站 322

17.5.1思路分析 322

17.5.2功能实现 322

实战 制作儿童产品宣传网站 322

查看更多关于的内容