HTML+CSS+DIV网页设计与布局PDF电子书下载

第一篇 认识网站和网页 2

第1章 认识网站开发 2

1.1认识网站开发 2

1.1.1网页设计概述 2

1.1.2网页构成元素 2

1.1.3网站建设流程 3

1.1.4网站开发软件 4

1.2 HTML基本概念 5

1.2.1 HTML简介 6

1.2.2 HTML基本结构 6

1.3一个简单的HTML实例 6

1.3.1编写HTML代码 6

1.3.2运行HTML文件查看效果 8

1.4 HTML基本标记 8

1.4.1文件类型标记 8

1.4.2 HTML头标记 9

1.4.3 HTML主体标记 9

1.4.4页面标题 9

1.5小结 10

本章习题 10

第二篇 HTML学习篇 12

第2章 网页文字和图片 12

2.1文字格式 12

2.1.1设置文字大小 12

2.1.2设置字体 13

2.1.3设置字体颜色 15

2.1.4加粗与斜体 18

2.1.5下划线与删除线 19

2.1.6上标与下标 20

2.1.7等宽字 21

2.2与文字排版相关的元素 21

2.2.1文本缩进 21

2.2.2换行 22

2.2.3段落 23

2.2.4段落居中 23

2.2.5预定义格式 24

2.2.6水平分隔线 25

2.3文字闪烁 26

2.4设置网页背景颜色 27

2.5在网页中插入图像 28

2.6设置背景图片 29

2.7小结 30

本章习题 30

上机指导 31

实验一：练习使用〈FONT〉元素来设置文字的大小、颜色和字体 31

实验二：练习使用与文字排版相关的元素来设置文字的段落的样式 31

实验三：练习使用BACKGROUND属性来设置网页的背景图片 32

第3章 超链接 34

3.1创建超链接 34

3.1.1超链接标记 34

3.1.2链接地址 35

3.1.3打开链接的方式 37

3.2锚点 37

3.2.1创建锚点 38

3.2.2链接到本页锚点 38

3.2.3链接到其他网页的锚点 39

3.3图像的超链接 40

3.3.1将整个图像设为超链接 40

3.3.2设置图像热点区域 41

3.4小结 43

本章习题 43

上机指导 44

实验一：练习使用〈A〉标记创建一个以新窗口打开的超链接 44

实验二：练习使用〈A〉标记创建一个链接到其他网页的锚点链接 44

实验三：练习使用〈A〉标记设置一个矩形的图像热点区域 46

第4章 表格 47

4.1创建表格 47

4.2表格属性 48

4.2.1表格宽度 48

4.2.2表格高度 49

4.2.3表格背景图片 51

4.2.4单元格间距 52

4.2.5表格内单元格与文字的距离 54

4.3表格边框 55

4.3.1边框宽度 55

4.3.2边框颜色 57

4.3.3亮边框颜色 58

4.3.4暗边框颜色 58

4.4设置表格行的对齐方式 59

4.4.1垂直对齐方式 59

4.4.2水平对齐方式 60

4.5行和列的合并 61

4.5.1列的合并 62

4.5.2行的合并 63

4.6表格结构 64

4.6.1表头 64

4.6.2主体 65

4.6.3表尾 66

4.7表格标题 68

4.8表格嵌套 69

4.9小结 70

本章习题 71

上机指导 72

实验一：练习使用〈TABLE〉元素创建一个表格 72

实验二：练习使用〈TABLE〉元素中的各种属性创建一个课程表 73

实验三：练习使用〈TABLE〉元素创建嵌套表格 74

第5章 多媒体、滚动字幕和列表 76

5.1多媒体元素 76

5.1.1插入多媒体元素 76

5.1.2循环播放 77

5.1.3自动播放 77

5.1.4隐藏多媒体元素 78

5.2插入背景音乐 80

5.3滚动字幕 80

5.3.1添加滚动字幕 81

5.3.2滚动方向 81

5.3.3滚动方式 82

5.3.4滚动字幕背景颜色 83

5.3.5滚动速度 84

5.3.6滚动延迟 84

5.3.7滚动次数 86

5.3.8滚动字幕空白空间 86

5.3.9设置鼠标经过效果 87

5.4无序列表 88

5.4.1无序列表结构 88

5.4.2无序列表的列表项样式 89

5.5有序列表 90

5.5.1有序列表结构 91

5.5.2有序列表的列表项样式 92

5.6嵌套列表 93

5.7定义列表 94

5.8目录列表 96

5.9菜单列表 96

5.10小结 98

本章习题 98

上机指导 99

实验一：练习使用〈EMBED〉元素插入一个多媒体元素 99

实验二：练习使用〈MARQUEE〉元素添加一个滚动字幕 100

实验三：练习使用〈UL〉元素和〈OL〉元素创建一个嵌套列表 100

第6章 表单 102

6.1添加表单 102

6.1.1链接跳转 102

6.1.2链接跳转方式 103

6.1.3表单名称 103

6.2输入标签 104

6.2.1文本框 104

6.2.2密码框 105

6.2.3单选框 105

6.2.4复选框 107

6.2.5提交按钮 107

6.2.6重置按钮 108

6.2.7图像按钮 109

6.2.8文件域 110

6.2.9隐藏域 111

6.3下拉列表 112

6.4文本域 113

6.5小结 114

本章习题 114

上机指导 115

实验一：练习使用〈FORM〉元素插入一个表单 115

实验二：练习在表单元素中添加不同的表单控件 116

实验三：练习使用在表单元素中添加下拉列表 117

第7章 框架 118

7.1创建框架 118

7.2分割窗口 118

7.2.1上下分割 118

7.2.2左右分割 121

7.2.3窗口的嵌套 122

7.3设置框架边框 123

7.3.1设置框架边框显示或隐藏 123

7.3.2设置框架边框宽度 124

7.3.3设置框架边框颜色 125

7.4框架属性 126

7.4.1设置框架滚动条显示 126

7.4.2固定框架 126

7.4.3不支持框架标记 128

7.5在框架中使用链接 128

7.6浮动框架 132

7.6.1插入浮动框架 132

7.6.2浮动框架大小 133

7.6.3浮动框架对齐方式 133

7.6.4浮动框架页面的链接 134

7.7小结 135

本章习题 136

上机指导 137

实验一：练习使用〈FRAMESET〉元素创建一个框架 137

实验二：练习使用〈FRAMESET〉元素创建一个嵌套框架 138

实验三：练习使用〈IFRAME〉元素创建一个浮动框架 138

第三篇 CCS学习篇 141

第8章 认识CSS 141

8.1 CSS简介 141

8.2 CSS样式表的设置方法 141

8.2.1内联样式表 141

8.2.2内部样式表 142

8.2.3外部样式表 143

8.2.4引用多个样式表 144

8.2.5使用＠import引用外部样式表 145

8.2.6 CSS注释 146

8.3选择符 147

8.3.1类型选择符 147

8.3.2类选择符 148

8.3.3 ID选择符 151

8.3.4包含选择符 152

8.3.5选择符分组 156

8.3.6通用选择符 157

8.3.7子选择符 159

8.3.8相邻选择符 161

8.3.9属性选择符 162

8.4伪类和伪元素 166

8.4.1超链接的伪类 167

8.4.2伪元素 168

8.5 CSS优先级 169

8.6 CSS中的单位 172

8.6.1颜色单位 172

8.6.2长度单位 172

8.6.3时间单位 173

8.6.4角度单位 173

8.6.5频率单位 173

8.7小结 173

本章习题 173

上机指导 175

实验一：练习使用CSS内部样式表设置网页样式 175

实验二：练习使用CSS外部样式表设置网页样式 175

实验三：练习使用CSS伪类设置超链接的样式 176

第9章 设置文字和文本样式 178

9.1设置文字样式 178

9.1.1字体设置 178

9.1.2设置文字大小 179

9.1.3设置粗体 181

9.1.4设置文字颜色 181

9.1.5设置斜体 183

9.1.6综合设置 183

9.2设置文本样式 184

9.2.1设置阴影效果 185

9.2.2大小写转换 185

9.2.3文本缩进 187

9.2.4文本的水平对齐方式 188

9.2.5文本的垂直对齐方式 189

9.2.6设置文本流入方向 191

9.2.7设置文本修饰 192

9.3空白与换行 193

9.3.1空格的处理方式 194

9.3.2字内换行 195

9.4设置间距 197

9.4.1行间距 197

9.4.2字间距 199

9.4.3词间距 201

9.5小结 203

本章习题 203

上机指导 203

实验一：练习使用font属性综合设置文字样式 204

实验二：练习使用不同的属性设置文本的样式 204

实验三：练习使用不同的属性设置文本的间距 205

第10章 设置背景、边框、边距和补白 206

10.1背景颜色 206

10.2背景图像 207

10.2.1设置背景图像 207

10.2.2设置固定背景图像 209

10.2.3设置背景图像平铺方式 210

10.2.4背景图像定位 213

10.3边框 215

10.3.1设置边框样式 215

10.3.2设置不同的边框样式 217

10.3.3设置边框宽度 218

10.3.4设置不同的边框宽度 220

10.3.5设置边框颜色 222

10.3.6设置不同的边框颜色 224

10.3.7综合设置边框效果 225

10.4边距 226

10.4.1设置上边距 227

10.4.2设置下边距 227

10.4.3设置左边距 228

10.4.4设置右边距 229

10.4.5综合设置边距 230

10.5补白 231

10.5.1设置顶端补白 231

10.5.2设置底部补白 232

10.5.3设置左侧补白 233

10.5.4设置右侧补白 234

10.5.5综合设置补白 234

10.6小结 235

本章习题 235

上机指导 235

实验一：练习使用背景图像属性综合设置背景图像的样式 237

实验二：练习使用边框属性综合设置元素边框的样式 237

实验三：练习使用margin属性和padding属性综合设置元素的边距和补白 238

第11章 设置表格、列表和滚动条样式 240

11.1表格 240

11.1.1合并表格边框 240

11.1.2定义表格边框间距 242

11.1.3定义表格标题位置 244

11.1.4设置表格布局 246

11.2列表 248

11.2.1设置列表符号样式 248

11.2.2使用图片设置列表样式 251

11.2.3列表符号显示位置 252

11.2.4综合设置列表样式 253

11.3滚动条 254

11.3.1设置滚动条颜色 254

11.3.2设置滚动条亮边框颜色 255

11.3.3设置滚动条暗边框颜色 256

11.3.4设置滚动条方向箭头颜色 257

11.3.5设置滚动条基准色 258

11.4小结 260

本章习题 260

上机指导 260

实验一：练习使用CSS中的表格属性设置表格的样式 261

实验二：练习使用CSS中的列表属性设置列表的样式 261

实验三：练习使用CSS中的滚动条属性设置滚动条的样式 262

第四篇 布局学习篇 265

第12章 控制元素布局 265

12.1块级元素和内联元素 265

12.1.1块级元素和内联元素的概念 265

12.1.2 〈div〉元素和〈span〉元素 265

12.2定位 267

12.2.1定位方式 267

12.2.2偏移 268

12.2.3综合运用 268

12.2.4定位元素的层叠次序 272

12.3浮动 273

12.3.1浮动的概念 274

12.3.2设置浮动 274

12.3.3清除浮动 275

12.4溢出与剪切 276

12.4.1溢出内容的设置 277

12.4.2设置水平方向超出范围的处理方式 278

12.4.3设置垂直方向超出范围的处理方式 279

12.4.4内容的剪切 281

12.5对象的显示与隐藏 282

12.6小结 283

本章习题 283

上机指导 284

实验一：练习使用定位设置元素的位置 284

实验二：练习使用浮动设置元素的位置 285

实验三：练习使用清除浮动清除元素的浮动效果 286

第13章 网页布局与设计技巧 287

13.1网页布局 287

13.1.1网页大小 287

13.1.2网页栏目划分 288

13.1.3表格布局 289

13.1.4 CSS布局 292

13.2 CSS布局技巧 293

13.2.1一栏布局 293

13.2.2二栏布局 295

13.2.3多栏布局 296

13.3小结 298

本章习题 298

上机指导 299

实验一：利用表格设计网页 299

实验二：利用CSS设计网页 300

实验三：利用CSS对网页进行布局 301

第14章 网页布局综合案例——宝贝屋网上商店 302

14.1案例分析 302

14.2内容分析 303

14.3原型设计 303

14.4布局设计 305

14.4.1整体样式设计 305

14.4.2页头部分 306

14.4.3内容部分 310

14.4.4页脚部分 315

14.5交互效果设计 316

14.5.1顶部导航栏 316

14.5.2主导航栏 317

14.5.3账号区 317

14.5.4图像边框 317

14.5.5产品分类 318

14.6小结 318