从零开始学HTML+CSS

《从零开始学html+css》

第1篇 html基础

第1章 网页基础

（教学视频：8分钟） 1

1.1 了解网站、网页 1

1.1.1 网站 1

1.1.2 网页 1

1.1.3 网页的版块结构 2

1.2 网页的基本构成元素 3

1.3 设计网页常用的软件 4

1.4 网页设计原则 6

1.5 dreamweaver简介 7

1.5.1 标题栏 7

1.5.2 菜单栏 7

1.5.3 插入栏 8

1.5.4 文档工具栏 9

1.5.5 属性面板 9

1.5.6 其他面板 10

1.6 在dreamweaver中直接编写html 10

1.6.1 编写html代码 10

.1.6.2 保存并查看html文件 11

1.7 小结 12

1.8 习题 12

第2章 html基础入门

（教学视频：17分钟） 13

2.1 html基本概念 13

2.1.1 html简介 13

2.1.2 html的基本结构 13

2.1.3 html标签 14

2.2 html简单示例 14

2.2.1 第一个html文件 14

2.2.2 查看效果 15

2.3 html的基本元素 16

2.3.1 html元素与标签的结构 17

2.3.2 元素的属性 18

2.3.3 嵌套标签 20

2.3.4 空格与特殊字符 22

2.4 小结 23

2.5 习题 23

第2篇 html应用篇

第3章 使用文本样式

（教学视频：50分钟） 24

3.1 标题文字的建立 24

3.1.1 标题文字的标签——（h） 24

3.1.2 标题文字的对齐方式——align 25

3.2 文字格式的设置 26

3.2.1 设置文字字体——face 26

3.2.2 设置字体大小——size 27

3.2.3 设置文字颜色——color 28

3.2.4 粗体、斜体、下画线——（strong）、（em）、（u） 29

3.2.5 上标与下标——（sup）、（sub） 30

3.2.6 设置删除线——strike 31

3.2.7 等宽文字标签——（code） 32

3.2.8 空格——＆nbsp; 33

3.2.9 其他特殊符号 34

3.3 段落标签 35

3.3.1 段落标签——（p） 35

3.3.2 换行标签——（br） 36

3.3.3 取消文字换行标签——（nobr） 37

3.3.4 保留原始排版方式标签——（pre） 38

3.3.5 居中对齐标签——（center） 39

3.3.6 向右缩进标签——（blockquote） 40

3.4 小结 41

3.5 习题 42

第4章 使用超链接

（教学视频：39分钟） 43

4.1 什么是超链接 43

4.1.1 绝对路径 43

4.1.2 相对路径 43

4.2 超链接的基本标签 44

4.2.1 设置超链接——（a） 44

4.2.2 文本超链接的建立——（href） 44

4.2.3 设置超链接的目标页面——target 47

4.3 设置不同的链接对象 48

4.3.1 链接网站内部的页面 48

4.3.2 链接文件 48

4.3.3 设置外部链接：链接http页面 49

4.3.4 通过ftp协议 50

4.3.5 使用telnet链接bbs站点 51

4.3.6 发送e-mail 52

4.4 网页中的锚点 53

4.4.1 设定锚点——name 53

4.4.2 链接到锚点——# 54

4.5 小结 59

4.6 习题 59

第5章 使用图像

（教学视频：38分钟） 60

5.1 图像格式 60

5.2 添加图像——（img） 60

5.3 设置图像属性 61

5.3.1 图像高度——height 62

5.3.2 图像宽度——width 63

5.3.3 图像边框——border 64

5.3.4 图像水平间距——hspace 65

5.3.5 图像垂直间距——vspace 66

5.3.6 图像相对于文字基准线的对齐方式——align 66

5.3.7 图像的提示文字——alt 68

5.4 图像的超链接 69

5.4.1 设置图像的超链接 69

5.4.2 设置图像热区链接 71

5.5 设置背景音乐 75

5.5.1 添加背景音乐——（bgsound） 76

5.5.2 设置背景音乐的循环播放次数——loop 77

5.6 小结 77

5.7 习题 77

第6章 使用列表

（教学视频：41分钟） 78

6.1 无序列表的设计 78

6.1.1 无序列表标签——（ul） 78

6.1.2 设置无序列表的符号类型——type 79

6.2 有序列表的设计 81

6.2.1 有序列表标签——（ol） 81

6.2.2 有序列表的序号类型——type 82

6.2.3 有序列表的起始数值——start 84

6.3 定义列表标签——（dl） 85

6.4 菜单列表标签——（menu） 86

6.5 目录列表——（dir） 87

6.6 列表的高级应用 87

6.6.1 列表的简化 88

6.6.2 设置列表文字的颜色 89

6.7 列表的嵌套 90

6.8 小结 91

6.9 习题 91

第7章 使用表格

（教学视频：150分钟） 93

7.1 建立表格 93

7.1.1 添加表格——（table）、（tr）、（td） 93

7.1.2 设置表格的标题——caption 94

7.1.3 表格的表头——（th） 95

7.2 设置表格基本属性 96

7.2.1 设置表格宽度——width 96

7.2.2 设置表格高度——height 98

7.2.3 表格对齐方式——align 99

7.3 表格的边框 100

7.3.1 设置表格的边框宽度——border 100

7.3.2 表格边框颜色——bordercolor 101

7.3.3 内框宽度——cellspacing 102

7.3.4 表格内文字与边框距离——cellpadding 104

7.4 设定表格背景 105

7.4.1 设置表格背景色——bgcolor 105

7.4.2 设置表格的背景图像——background 106

7.5 修改表格的行属性 107

7.5.1 高度的控制——height 107

7.5.2 边框颜色——bordercolor 108

7.5.3 行背景——bgcolor、background 110

7.5.4 行文字的水平对齐方式——align 111

7.5.5 行文字的垂直对齐方式——valign 112

7.5.6 设置表格标题的垂直对齐方式——valign 113

7.6 调整单元格属性 114

7.6.1 单元格大小——width、height 114

7.6.2 水平跨度——colspan 115

7.6.3 垂直跨度——rowspan 116

7.6.4 对齐方式——align、valign 118

7.6.5 设置单元格的背景色 119

7.6.6 单元格的边框颜色——bordercolor 120

7.6.7 设置单元格的亮边框——bordercolorlight 121

7.6.8 设置单元格的暗边框——bordercolordark 122

7.6.9 设置单元格的背景图像—— background 123

7.6.10 文字内容不换行——nowrap 125

7.7 表格的结构 127

7.7.1 设置表头样式——thead 127

7.7.2 设置表主体样式——tbody 129

7.7.3 设置表尾样式——tfoot 130

7.8 表格的嵌套 131

7.9 层标签——（div） 133

7.10 小结 134

7.11 习题 134

第8章 使用表单

（教学视频：140分钟） 136

8.1 表单标签——（form） 136

8.1.1 处理程序——action 136

8.1.2 表单名称——name 137

8.1.3 传送方法——method 137

8.1.4 编码方式——enctype 138

8.1.5 目标显示方式——target 138

8.2 添加控件 139

8.3 输入类的控件 139

8.3.1 文字字段——text 140

8.3.2 密码域——password 141

8.3.3 单选按钮——radio 142

8.3.4 复选项——checkbox 143

8.3.5 普通按钮——button 144

8.3.6 提交按钮——submit 146

8.3.7 重置按钮——reset 147

8.3.8 图像域——image 149

8.3.9 隐藏域——hidden 151

8.3.10 文件域——file 151

8.4 菜单列表类的控件 153

8.4.1 下拉菜单 153

8.4.2 列表项 155

8.5 文本域标签——（textarea） 156

8.6 （id）标签 157

8.7 小结 158

8.8 习题 158

第9章 使用多媒体

（教学视频：60分钟） 160

9.1 设置动态文字 160

9.1.1 设置滚动文字——marquee 160

9.1.2 文字滚动方向——direction 161

9.1.3 设置文字的滚动方式——behavior 163

9.1.4 循环设置——loop 164

9.1.5 滚动速度——scrollamount 166

9.1.6 滚动延迟——scrolldelay 166

9.1.7 滚动文字的背景色设置——bgcolor 167

9.1.8 滚动背景面积——width、height 168

9.1.9 设置空白空间——hspace、vspace 169

9.2 设置背景音乐 170

9.2.1 设置背景音乐——bgsound 170

9.2.2 设置背景音乐的循环播放次数——loop 171

9.3 添加多媒体文件 171

9.3.1 添加多媒体文件标签——（embed） 172

9.3.2 设置自动运行——autostart 172

9.3.3 设置媒体文件的循环播放——loop 173

9.3.4 隐藏面板——hidden 174

9.3.5 添加其他类型的媒体文件 175

9.4 小结 175

9.5 习题 175

第10章 使用框架

（教学视频：100分钟） 177

10.1 窗口框架简介 177

10.1.1 什么是框架 177

10.1.2 框架的基本结构 177

10.2 设置框架集的基本属性 178

10.2.1 水平分割窗口——rows 178

10.2.2 垂直分割窗口——cols 179

10.2.3 嵌套分割窗口 179

10.2.4 设置边框——frameborder 181

10.2.5 框架的边框宽度——framespacing 182

10.2.6 框架的边框颜色——bordercolor 183

10.3 设置窗口属性 184

10.3.1 页面源文件——src 184

10.3.2 页面名称——name 185

10.3.3 调整窗口的尺寸——noresize 186

10.3.4 边框与页面内容的水平边距——marginwidth 187

10.3.5 边框与页面内容的垂直边距——marginheight 188

10.3.6 设置框架滚动条显示——scrolling 188

10.3.7 不支持框架标签——（noframes） 189

10.4 浮动框架 190

10.4.1 必需参数：页面源文件——src 192

10.4.2 特有属性：大小——width和height 193

10.4.3 特有属性：对齐方式——align 193

10.4.4 共有参数设置 194

10.4.5 其他参数——frameborder 195

10.5 框架与链接 196

10.5.1 设置普通框架结构的链接 197

10.5.2 浮动框架与链接 200

10.6 小结 202

10.7 习题 202

第3篇 css的使用

第11章 css样式表

（教学视频：166分钟） 204

11.1 css简介 204

11.1.1 css的概念 204

11.1.2 css的特点 204

11.2 css的使用 205

11.2.1 css的基本语法 205

11.2.2 添加css的方法 206

11.2.3 css的继承性 208

11.2.4 css样式的冲突 208

11.2.5 书写css的注意事项 209

11.3 设置css的字体属性 209

11.3.1 设置字体——font-family 209

11.3.2 设置字号——font-size 210

11.3.3 字体风格——font-style 212

11.3.4 设置加粗字体——font-weight 213

11.3.5 设置字体变量——font-variant 214

11.3.6 复合属性：字体——font 215

11.4 颜色及背景属性 216

11.4.1 颜色属性设置——color 216

11.4.2 背景颜色——background-color 217

11.4.3 背景图像——background-image 218

11.4.4 背景重复——background-repeat 220

11.4.5 背景附件——background-attachment 221

11.4.6 背景位置——background-position 223

11.4.7 复合属性：背景——background 224

11.5 文本属性 225

11.5.1 单词间隔——word-spacing 226

11.5.2 字符间隔——letter-spacing 227

11.5.3 文字修饰——text-decoration 227

11.5.4 纵向排列——vertical-align 228

11.5.5 文本转换——text-transform 230

11.5.6 文本排列——text-align 231

11.5.7 文本缩进——text-indent 232

11.5.8 文本行高——line-height 233

11.5.9 处理空白——white-space 234

11.5.10 文本反排——unicode-bidi与direction 235

11.6 边距与填充属性 237

11.6.1 顶端边距——margin-top 237

11.6.2 其他边距——margin-bottom、margin-left、margin-right 238

11.6.3 复合属性：边距——margin 238

11.6.4 顶端填充——padding-top 239

11.6.5 其他填充——padding-bottom、padding-right、padding-left 240

11.6.6 复合属性：填充——padding 241

11.7 边框属性 242

11.7.1 边框样式——border-style 243

11.7.2 边框宽度——border-width 245

11.7.3 边框颜色——border-color 246

11.7.4 边框属性——border 247

11.8 定位及尺寸属性 249

11.8.1 定位方式——position 249

11.8.2 元素位置——top、right、bottom、left 249

11.8.3 层叠顺序——z-index 251

11.8.4 浮动属性——float 252

11.8.5 清除属性——clear 254

11.8.6 可视区域——clip 255

11.8.7 设定大小——width、height 257

11.8.8 超出范围——overflow 258

11.8.9 可见属性——visibility 260

11.9 列表属性 261

11.9.1 列表符号——list-style-type 261

11.9.2 图像符号——list-style-image 263

11.9.3 列表缩进——list-style-position 264

11.9.4 复合属性：列表——list-style 265

11.10 光标属性——cursor 266

11.11 滤镜属性 267

11.11.1 不透明度——alpha 267

11.11.2 动感模糊——blur 269

11.11.3 设置阴影——dropshadow 270

11.11.4 对象的翻转——fliph、flipv 271

11.11.5 发光效果——glow 273

11.11.6 灰度处理——gray 274

11.11.7 反相——invert 275

11.11.8 x光片效果——xray 276

11.11.9 波形滤镜——wave 278

11.12 小结 279

11.13 习题 279

第12章 在dreamweaver中创建网页 282

12.1 常用页面元素 282

12.1.1 插入图像 282

12.1.2 导入媒体 286

12.1.3 添加表格 287

12.1.4 添加时间元素 289

12.1.5 设置超链接 290

12.2 网页的布局 291

12.2.1 使用布局表格 291

12.2.2 设置框架 293

12.2.3 使用层进行布局 295

12.3 表单的使用 297

12.3.1 插入空白表单 297

12.3.2 插入文本类控件 298

12.3.3 插入选择区域 300

12.3.4 插入菜单和列表 303

12.3.5 添加跳转菜单 304

12.3.6 添加按钮 306

12.4 添加各种类型的文本 307

12.5 添加html网页的辅助内容 308

12.5.1 添加水平线 308

12.5.2 设置文件元信息 309

12.5.3 添加脚本 310

12.6 小结 311