美工神话 CSS网站布局与美化

第一篇 入门篇 2

第1章　Web标准与CSS 2

1.1　网站与Web标准 3

1.1.1　什么是Web标准 3

1.1.2　为什么要建立Web标准 3

1.1.3　什么样的网站才符合Web标准 4

1.2　理解表现和内容分离 5

1.2.1 内容（Content） 5

1.2.2　结构（Structure） 5

1.2.3　表现（Presentation） 6

1.2.4　行为（Behavior） 7

1.3　DIV+CSS布局的优势 7

1.4　如何向标准过渡 12

1.4.1　什么是XHTML 12

1.4.2　建立符合Web标准的网站 13

第2章　CSS快速入门 17

2.1　Dreamweaver 8中对CSS的支持 18

2.1.1　CSS样式面板 18

2.1.2　属性面板 20

2.1.3　CSS布局可视化助理 21

2.2　选择符 23

2.2.1　类选择符 24

2.2.2　标签选择符 25

2.2.3　ID选择符 26

2.2.4　伪类选择符 27

2.2.5　标签指定式选择符 28

2.2.6　包含选择符 29

2.2.7　选择符组 30

2.2.8　组合使用选择符 30

2.3　单位和值 31

2.3.1　颜色 31

2.3.2　长度单位 32

2.4　属性 33

2.4.1　类型 34

2.4.2　背景 35

2.4.3　区块 35

2.4.4　方框 36

2.4.5 边框 37

2.4.6　列表 37

2.4.7　定位 37

2.4.8　扩展 38

2.5　元素分类和层叠性 39

2.5.1　元素分类 39

2.5.2　层叠性 39

2.6　CSS盒模型 40

2.7　将CSS应用到网页中 42

第二篇 布局篇 46

第3章　CSS网页布局详解 46

3.1　CSS布局基础 47

3.1.1　创建Div对象 47

3.1.2　定位属性 49

3.1.3　浮动属性 50

3.2　单行单列结构 51

3.2.1　宽度固定 51

3.2.2　宽度自适应 52

3.2.3　单列居中 53

3.3　二列式布局 55

3.3.1　二列固定宽度 55

3.3.2　二列自适应宽度 58

3.3.3　左列固定、右列宽度自适应 62

3.3.4　二列固定宽度居中 63

3.4　三列式布局 64

3.4.1　左右固定宽度中间宽度自适应 64

3.4.2　顶行三列式布局 67

3.5　高度自适应 69

3.6　嵌套Div的布局控制 70

3.7　使用CSS布局模板 73

第4章　精美CSS布局实例分析 75

4.1　CSS设计陈列馆 76

4.2　优秀CSS布局实例分析 81

4.2.1　Principles of Freedom 81

4.2.2　UXMagazine 83

4.2.3 White Pine Montessori 86

4.2.4　Dalit Freedom Network 88

4.2.5 Mint 90

第三篇 美化篇 94

第5章　文字和段落 94

5.1　网页中的文字设计 95

5.1.1　字体 96

5.1.2　大小 98

5.1.3　加粗与斜体 99

5.1.4　英文文字控制 101

5.1.5　下划线 102

5.2　段落样式设计 103

5.2.1　行高 104

5.2.2　对齐与缩进 106

5.2.3　首字下沉 107

5.2.4　文字竖排 108

5.3　列表元素使用 109

5.3.1　项目列表 110

5.3.2　编号列表 111

5.3.3　定义列表 112

5.4　定义列表样式 113

5.4.1　list-style属性 113

5.4.2　列表背景属性 116

5.4.3　横向列表 117

5.5　CSS滤镜打造图案文字 118

5.5.1　模糊文字 119

5.5.2　Chroma滤镜 121

5.5.3　DropShadow滤镜 122

5.5.4　Glow滤镜 123

5.5.5　Shadow滤镜 124

5.5.6　Wave滤镜 125

第6章　图像和背景 126

6.1　网页中的背景控制 127

6.1.1　背景颜色 127

6.1.2　背景图像 128

6.2　图像样式设计 136

6.2.1　Logo和Banner 136

6.2.2　图像边框 140

6.2.3　水平线 142

6.2.4　图片替代文本 143

6.2.5　图文混合排版 145

6.2.6　全图排版 147

6.3　CSS滤镜应用技巧 153

6.3.1　控制图像和背景的透明度 153

6.3.2　图像对称翻转 157

6.3.3 Gray滤镜 158

6.3.4 Invert滤镜 158

6.3.5　使用外部滤镜工具 158

第7章　网站导航 161

7.1　网站导航的分类 162

7.2　横排导航 164

7.2.1　文本导航 165

7.2.2　标签式导航 167

7.2.3　图像导航 172

7.3　竖排导航 174

7.4　下拉菜单 177

第8章　超级链接 183

8.1　链接控制 184

8.1.1　超链接伪类 184

8.1.2　基于对象的超链接 188

8.2　各种形式的超链接 191

8.2.1　背景色变换链接 191

8.2.2　图像翻转链接 193

8.2.3　边框变换链接 196

8.2.4　CSS提示小窗口 199

第9章　表格和表单设计 201

9.1　网页中的表格 202

9.1.1　表格对象的标签 202

9.1.2　页眉和页脚的样式控制 204

9.1.3　表格的边框样式 205

9.1.4　阴影效果 207

9.1.5　表格的渐变背景 208

9.1.6　表格的图像背景 209

9.2　网页中的表单 209

9.2.1　表单对象 209

9.2.2　表单的布局设计 210

9.2.3　边框控制 214

9.2.4　背景控制 215

9.2.5　输入文本的样式控制 218

9.2.6　通过“Div+CSS”方式设计表单 219

第四篇 实践篇 224

第10章　梵人部落网 224

10.1　设计分析 225

10.1.1　布局分析 225

10.1.2　网页元素设计 227

10.2　制作步骤 228

10.2.1　定义站点 228

10.2.2　布局设计 230

10.2.3　页面的通用属性 231

10.2.4　定义＃header对象的样式 232

10.2.5　网站导航的CSS样式 233

10.2.6　定义＃main的样式 235

10.2.7　左分栏的制作 236

10.2.8　右分栏的制作 241

10.2.9　页脚的制作 249

10.2.10　装饰性图片 250

10.3　整理CSS 252

10.4　W3C校验 258

第11章　小型企业网站 260

11.1　设计分析 261

11.2　首页的制作 262

11.2.1　布局设计 262

11.2.2　页面的通用属性 263

11.2.3　布局对象的CSS属性 263

11.3　内容页的制作 269

11.3.1　布局设计 269

11.3.2　布局对象的CSS属性 270

11.4　整理CSS 274

11.5　W3C校验 274

第12章　我的CSS禅意花园 275

12.1　设计分析 276

12.2　制作步骤 277

12.2.1　页面的通用属性 278

12.2.2　布局对象的CSS属性 279

12.2.3　定义acronym标签的样式 283

12.2.4　超级链接的样式定义 284

12.2.5　图像替代文本 286

12.3　整理CSS 290

12.4　W3C校验 291