精通HTML+CSS 100%网页设计与布局密码PDF电子书下载

第1篇 HTML篇 2

第1章 HTML与CSS网页设计概述 2

1.1 HTML的基本概念 3

1.1.1 什么是HTML 3

1.1.2 HTML的发展 5

1.1.3 HTML与XHTML 6

1.2 CSS的基本概念 7

1.2.1 什么是CSS 7

1.2.2 CSS在网页设计中的作用 7

1.3 网页与网站 8

1.3.1 网页与网站的关系 8

1.3.2 建立网站 10

1.3.3 URL 10

1.3.4 HTML与CSS的常用编辑工具 11

高手私房菜 13

技巧1：如何查看网页的HTML代码 13

技巧2：查看其他网站的CSS样式表文件 14

第2章 HTML文档的基本结构 15

2.1 基本的HTML文档 16

2.2 HTML文档的基本结构 16

2.2.1 文档类型的声明 16

2.2.2 ＜html＞标签对和属性 18

2.2.3 ＜head＞标签对和属性 19

2.2.4 ＜body＞标签对和属性 20

2.3 HTML标签、元素及属性 20

2.3.1 什么是标签 20

2.3.2 元素 21

2.3.3 属性的定义 22

2.3.4 属性值的定义 22

2.3.5 元素和属性的大小写规范 23

2.4 标准属性 23

2.5 HTML字符实体 24

2.6 为文档添加注释 25

2.7 空白和空白字符 25

2.7.1 断行符 26

2.7.2 空白字符 26

高手私房菜 26

技巧：属性值与引号的正确使用 26

第3章 辅助性元素 27

3.1 用＜title＞标签为文档添加标题 28

3.2 用＜base＞标签为文档设置基础URL 28

3.3 用＜link＞标签定义文档关系链接 30

3.3.1 定义关系链接地址 30

3.3.2 向前链接或者反转链接 31

3.3.3 链接到外部样式表 32

3.4 用＜style＞标签为文档创建内部样式表 33

3.4.1 定义样式类型 33

3.4.2 针对不同的媒体设备设置样式 35

3.5 用＜script＞标签添加脚本程序 36

3.5.1 设置脚本的类型 36

3.5.2 包含外部的脚本 37

3.6 用＜meta＞标签为文档定义元数据 38

3.6.1 定义元数据 38

3.6.2 定义元数据的各种情况 38

高手私房菜 41

技巧1：使用＜link＞标签定义浏览器标题栏小图标 41

技巧2：使用CSS hack技术使IE浏览器访问网页时应用特定的样式表文件 42

第4章 网页文本设计 43

4.1 文本的排版 44

4.1.1 标题＜h1＞、＜h2＞、＜h3＞、＜h4＞、＜h5＞和＜h6＞ 45

4.1.2 字体标记 47

4.1.3 基本文字格式 49

4.1.4 特殊符号 50

4.2 段落的排版 50

4.2.1 段落标记及其对齐方式 51

4.2.2 换行＜br＞标记 52

4.2.3 居中标记 52

4.2.4 加入水平分割线 53

4.2.5 预编排标记 54

高手私房菜 55

技巧1：一级标题h1的使用 55

技巧2：在网页中插入版权符号？、注册商标符号？、未注册商品符号TM 55

技巧3：元素属性的默认值 56

第5章 网页列表设计 57

5.1 建立无序的列表 58

5.2 建立有序的列表 61

5.2.1 使用type属性定制有序列表项目符号 62

5.2.2 使用start属性定制有序列表中列表项的起始数 63

5.2.3 使用value属性定制有序列表中列表项序号的数值 64

5.3 建立定义列表 65

5.4 列表的嵌套 65

5.4.1 嵌套一层列表 66

5.4.2 嵌套多层列表 66

5.4.3 混合嵌套的列表 69

高手私房菜 70

技巧1：使用CSS样式表代替列表的type属性 70

技巧2：用ul列表模仿table表格 71

第6章 网页超链接设计 73

6.1 链接和路径 74

6.1.1 超链接的概念 74

6.1.2 链接路径URL 75

6.1.3 绝对URL和相对URL 76

6.2 使用a元素定义链接 76

6.2.1 设置链接的目标地址 76

6.2.2 设置链接的目标窗口 77

6.2.3 设置链接的提示信息 77

6.3 定义链接的不同情况 78

6.3.1 链接到同一个网站的另一个网页 78

6.3.2 使用锚链接到同一个网页的不同部分 80

6.3.3 使用锚链接到另一个网页的特定部分 82

6.3.4 链接到其他网站 83

6.3.5 设置链接发送E-mail 84

6.3.6 使用链接提供下载 84

高手私房菜 85

技巧1：锚点的定义 85

技巧2：区分URI、URL和URN 85

技巧3：禁用链接 86

第7章 网页色彩和图片设计 87

7.1 必备的图像基础知识 88

7.1.1 图像的分辨率 88

7.1.2 网页中的图片格式 88

7.1.3 创建图片 89

7.2 在网页中使用图像 91

7.2.1 在网页中插入图像标记 91

7.2.2 设置图像源文件 91

7.2.3 设置图像在网页中显示的宽度和高度 92

7.2.4 设置图像的替换文字 93

7.2.5 设置图像的提示文字 94

7.2.6 设置图像的边框 94

7.3 用图像代替文本作为超链接 95

7.4 图像映射 96

7.4.1 创建图像映射 96

7.4.2 利用Dreamweaver创建图像映射 98

高手私房菜 100

技巧1：浏览器的安全色 100

技巧2：图像映射 100

第8章 网页表格设计 101

8.1 表格的基本结构 102

8.2 控制表格的大小和边框的宽度 103

8.2.1 设置表格的宽度和高度 103

8.2.2 设置表格边框的宽度 104

8.3 设置表格及表格单元格的对齐方式 105

8.3.1 控制表格在网页中的对齐方式 106

8.3.2 控制表格单元格的水平对齐 107

8.3.3 控制表格单元格的上下对齐 109

8.4 合并单元格 111

8.4.1 用colspan属性左右合并单元格 111

8.4.2 用rowspan属性上下合并单元格 112

8.5 用cellpadding属性和cellspacing属性设定距离 113

8.6 为表格添加视觉效果 115

8.6.1 设置表格和单元格的背景颜色 116

8.6.2 设置表格和单元格的背景图像 117

8.7 表格的按行分组显示 118

高手私房菜 121

技巧1：禁止单元格内的文本自动换行 121

技巧2：colspan和rowspan属性的配合使用 122

第9章 网页表单设计 123

9.1 HTML表单 124

9.1.1 HTML表单的工作原理 124

9.1.2 创建表单 124

9.1.3 控件的概念 127

9.2 使用＜input＞标签创建表单控件 127

9.2.1 文本框和密码文本框 128

9.2.2 单选按钮 130

9.2.3 复选按钮 131

9.2.4 隐藏控件 132

9.2.5 文件选择框 132

9.2.6 重置按钮 133

9.2.7 提交按钮 134

9.2.8 图形提交按钮 135

9.3 使用＜textarea＞标签创建多行文本框 135

9.4 使用＜select＞和＜option＞标签创建选择列表 137

9.5 表单的提交方法 138

高手私房菜 139

技巧1：禁用表单控件 139

技巧2：设置表单控件为只读 140

第10章 网页框架设计 141

10.1 什么是框架 142

10.2 使用＜frameset＞和＜frame＞标签创建框架 142

10.2.1 框架的文档声明 144

10.2.2 用cols属性将窗口分为左、右两部分 144

10.2.3 用rows属性将窗口分为上、中、下三部分 145

10.2.4 框架的嵌套 146

10.2.5 不显示框架时 147

10.3 设置窗口框架的内容和外观 148

10.3.1 用src属性设置框架的初始内容 148

10.3.2 框架窗口边框的设置 149

10.3.3 控制框架的边距 150

10.3.4 框架的滚动条设置 151

10.3.5 改变框架窗口大小 152

10.4 设置框架之间的链接 153

10.4.1 用＜base＞标签设置链接默认目标 154

10.4.2 名称和框架标识 155

10.5 使用＜iframe＞＜／iframe＞标签对创建嵌入式框架 157

高手私房菜 158

技巧1：框架长度或者宽度的设置 158

技巧2：设置框架边框的注意事项 158

第11章 网页多媒体设计 159

11.1 在网页中加入视频 160

11.1.1 添加链接视频 160

11.1.2 使用Windows Media.Player嵌入视频 161

11.2 在网页中加入声音 163

11.2.1 添加背景声音 163

11.2.2 添加链接声音 164

11.2.3 使用RealPlayer嵌入声音 164

11.3 在网页中添加Flash动画 166

11.4 在网页中添加滚动文字 167

高手私房菜 168

技巧1：流式视频与音频 168

技巧2：选择合适的音频或者视频格式 168

第2篇 CSS篇 170

第12章 CSS 3样式基础 170

12.1 简单的CSS示例 171

12.2 CSS样式表的规则 172

12.3 使用CSS选择器 173

12.3.1 标签选择器 173

12.3.2 类选择器 174

12.3.3 id选择器 177

12.4 在HTML中调用CSS的方法 178

12.4.1 内联式CSS样式 179

12.4.2 内嵌式CSS样式 180

12.4.3 链接式CSS样式 181

12.4.4 导入外部CSS样式 182

12.4.5 CSS样式生效的优先级问题 183

高手私房菜 184

技巧：使用全局选择器 184

第13章 网页样式代码的生成方法 185

13.1 从零开始手工编写 186

13.1.1 编写标题样式代码 187

13.1.2 编写图片控制代码 188

13.1.3 设置网页正文 188

13.1.4 设置整体页面样式 189

13.1.5 定义段落样式 190

13.1.6 完整的代码 192

13.2 使用Dreamweaver辅助工具创建页面 193

13.3 在Dreamweaver中新建CSS样式 195

13.4 在Dreamweaver中编辑CSS样式 198

13.5 为图像创建CSS样式 199

高手私房菜 200

技巧1：在Dreamweaver中使用不同的复制和粘贴方式 200

技巧2：使用Dreamweaver生成CSS 3样式表并链接到当前文档 201

第14章 用CSS 3设置文本样式 203

14.1 样式的参数单位 204

14.1.1 长度单位 204

14.1.2 颜色单位 204

14.2 设置网页文本的基本样式 207

14.2.1 网页文本颜色的定义 207

14.2.2 设置具体文字的字体 208

14.2.3 设置文字的倾斜效果 209

14.2.4 设置文字的粗细效果 210

14.3 设置网页文本的行高与间距 211

14.3.1 设置网页文字间间距 212

14.3.2 设置网页文字行间高 212

14.3.3 设置网页文字段落间距 214

14.4 设置网页文本的对齐方式 215

14.4.1 控制文本的水平对齐方式 215

14.4.2 设置文本的垂直对齐方式 217

14.5 设置文字与背景的颜色 218

14.6 其他网页文本样式设置 219

14.6.1 英文字母大小写自动转换的实现 219

14.6.2 控制文字的大小 220

14.6.3 网页文字的装饰效果 222

14.6.4 设置段落首行缩进效果 223

高手私房菜 224

技巧1：通过滤镜属性设置文字效果 224

技巧2：为网页中字体大小设置合适的样式 224

第15章 用CSS 3设置网页图像特效 225

15.1 设置图片边框 226

15.1.1 图像边框基本属性 226

15.1.2 为不同的边框分别设置样式 228

15.2 图片缩放功能的实现 229

15.3 设置图片与文字的对齐方式 233

15.3.1 横向对齐方式 233

15.3.2 纵向对齐方式 234

15.4 图文混排 235

15.4.1 文字环绕 236

15.4.2 设置图片与文字的间距 237

15.5 CSS 3中边框的新增属性 238

15.5.1 border-image 238

15.5.2 border-radius 239

15.5.3 border-color 241

15.5.4 box-shadow 243

高手私房菜 244

技巧：图片超出撑破DIV 244

第16章 用CSS 3设置网页背景颜色与背景图像 245

16.1 设置背景颜色 246

16.2 设置背景图像 247

16.3 设置背景图像平铺 248

16.4 设置背景图像的位置 250

16.5 设置背景图片位置固定 252

16.6 设置标题的图像替换 254

16.7 使用滑动门技术的标题 255

高手私房菜 257

技巧1：为网页内容添加水印 257

技巧2：使用background-position属性设置背景图片居中显示 258

第17章 CSS 3的高级特性 259

17.1 复合选择器 260

17.1.1 交集选择器 260

17.1.2 并集选择器 261

17.1.3 后代选择器 262

17.2 CSS的继承特性 263

17.2.1 继承关系 264

17.2.2 CSS继承的运用 264

17.3 CSS的层叠特性 265

高手私房菜 268

技巧：CSS选择器的特殊性 268

第18章 DIV+CSS 3网页标准化布局 269

18.1 定义DIV 270

18.1.1 什么是DIV 270

18.1.2 在HTML文档中应用DIV 270

18.1.3 DIV的嵌套和固定格式 272

18.2 CSS布局定位 273

18.2.1 浮动定位 273

18.2.2 position定位 279

18.3 可视化模型 282

18.3.1 盒模型 282

18.3.2 视觉可视化模型 284

18.3.3 空白边叠加 284

18.4 CSS布局方式 285

18.4.1 居中的布局设计 285

18.4.2 浮动的布局设计 288

18.4.3 高度自适应设计 295

18.5 CSS 3中盒模型的新增属性 296

18.5.1 overflow 296

18.5.2 overflow-x 298

18.5.3 overflow-y 299

高手私房菜 300

技巧：将多个DIV紧靠页面的左侧或者右侧 300

第3篇 综合应用篇 302

第19章 用HTML+CSS 3设计制作企业网站页面 302

19.1 设计分析 303

19.2 布局分析 303

19.3 制作步骤 304

19.4 实例总结 316

第20章 用HTML+CSS 3设计制作休闲游戏网站页面 317

20.1 设计分析 318

20.2 布局分析 318

20.3 制作步骤 319

20.4 实例总结 338

第21章 用HTML+CSS 3设计制作电子商务网站页面 339

21.1 设计分析 340

21.2 布局分析 340

21.3 制作步骤 341

21.4 实例总结 360

第4篇 实战篇 362

第22章 企业门户类网站布局分析 362

22.1 中粮网整体布局分析 363

22.1.1 整体设计分析 363

22.1.2 版面架构分析 364

22.1.3 网站模块组成 364

22.2 制作自己的企业网站——龙马蜂业产品网 365

22.2.1 整体分析 365

22.2.2 结构与布局 365

22.2.3 网站制作步骤 365

22.2.4 实例总结 374

第23章 休闲旅游类网站布局分析 375

23.1 去哪儿网整体布局分析 376

23.1.1 整体设计分析 376

23.1.2 版面架构分析 377

23.1.3 网站模块组成 377

23.2 制作自己的休闲旅游网站——龙马休闲旅游网 379

23.2.1 整体分析 379

23.2.2 结构与布局 379

23.2.3 网站制作步骤 380

23.2.4 实例总结 396