DIV+CSS布局与样式之网站设计精粹PDF电子书下载

第1章 网站制作前需知 1

1.1 网站开发流程 1

1.2 分析网页效果图 2

1.2.1 划分模块 2

1.2.2 CSS模块化 3

1.2.3 class使用技巧 4

1.2.4 如何“切图” 5

1.3 与产品经理、设计师、后端工程师进行有效沟通 5

1.4 XHTML CSS基础知识 6

1.4.1 XHTML文件的构成 6

1.4.2 CSS文件的构成 7

1.4.3 标签语义化 8

1.4.4 CSS命名规范 9

1.4.5 CSS样式重置 10

1.4.6 CSS Sprites技术 11

1.4.7 页面质量评估标准 13

1.4.8 代码注释的重要性 15

1.4.9 CSS Hack 16

第2章 企业网站 19

2.1 页面效果图分析 19

2.1.1 头部和页脚分析 20

2.1.2 首页主体内容分析 21

2.1.3 内页主体内容分析 21

2.2 布局规划及切图 22

2.2.1 页面布局规划 22

2.2.2 切割首页及导出图片 22

2.2.3 切割内页及导出图片 23

2.3 XHTML编写 24

2.3.1 页面XHTML框架搭建 24

2.3.2 页面头部和页脚的XHTML编写 24

2.3.3 页面公共部分的XHTML编写 26

2.3.4 首页主体内容的XHTML编写 27

2.3.5 内页主体内容的XHTML编写 28

2.3.6 首页XHTML代码总览 29

2.3.7 内页XHTML代码总览 30

2.4 CSS编写 32

2.4.1 页面公共部分的CSS编写 32

2.4.2 页面框架的CSS编写 33

2.4.3 页面头部和页脚的CSS编写 34

2.4.4 首页主体内容的CSS编写 36

2.4.5 内页主体内容的CSS编写 37

2.4.6 网站CSS代码总览 38

2.5 制作中需要注意的问题 39

第3章 个人网站 42

3.1 页面效果图分析 42

3.1.1 头部分析 43

3.1.2 首页主体内容分析 44

3.1.3 内页主体内容分析 44

3.2 布局规划及切图 45

3.2.1 页面布局规划 46

3.2.2 切割首页及导出图片 46

3.2.3 切割内页及导出图片 46

3.3 XHTML编写 47

3.3.1 页面XHTML框架搭建 47

3.3.2 页面头部的XHTML编写 48

3.3.3 页面公共部分的XHTML编写 48

3.3.4 首页主体内容的XHTML编写 49

3.3.5 内页主体内容的XHTML编写 51

3.3.6 首页XHTML代码总览 52

3.3.7 内页XHTML代码总览 54

3.4 CSS编写 55

3.4.1 页面公共部分的CSS编写 55

3.4.2 页面框架的CSS编写 56

3.4.3 页面头部的CSS编写 57

3.4.4 首页主体内容的CSS编写 58

3.4.5 内页主体内容的CSS编写 59

3.4.6 网站CSS代码总览 61

3.5 制作中需要注意的问题 62

3.5.1 块级元素和行内元素 62

3.5.2 CSS文档流 62

第4章 产品展示网站 64

4.1 页面效果图分析 64

4.1.1 头部和页脚分析 66

4.1.2 首页主体内容分析 66

4.1.3 内页主体内容分析 67

4.2 布局规划及切图 68

4.2.1 页面布局规划 68

4.2.2 切割首页及导出图片 68

4.2.3 切割内页及导出图片 69

4.3 XHTML编写 70

4.3.1 页面XHTML框架搭建 70

4.3.2 页面头部和页脚的XHTML编写 70

4.3.3 页面公共部分的XHTML编写 71

4.3.4 首页主体内容的XHTML编写 72

4.3.5 内页主体内容的XHTML编写 74

4.3.6 首页XHTML代码总览 75

4.3.7 内页XHTML代码总览 76

4.4 CSS编写 78

4.4.1 页面公共部分的CSS编写 78

4.4.2 页面框架的CSS编写 79

4.4.3 页面头部和页脚的CSS编写 80

4.4.4 首页主体内容的CSS编写 81

4.4.5 内页主体内容的CSS编写 81

4.4.6 网站CSS代码总览 82

4.5 制作中需要注意的问题 83

4.5.1 网页的编码格式 83

4.5.2 CSS加入网页方法 83

第5章 教育科研机构网站 84

5.1 页面效果图分析 84

5.1.1 头部和页脚分析 85

5.1.2 首页主体内容分析 86

5.1.3 内页主体内容分析 87

5.2 布局规划及切图 88

5.2.1 页面布局规划 88

5.2.2 切割首页及导出图片 88

5.2.3 切割内页及导出图片 89

5.3 XHTML编写 90

5.3.1 页面XHTML框架搭建 90

5.3.2 页面头部和页脚的XHTML编写 91

5.3.3 页面公共部分的XHTML编写 92

5.3.4 首页主体内容的XHTML编写 92

5.3.5 内页主体内容的XHTML编写 95

5.3.6 首页XHTML代码总览 97

5.3.7 内页XHTML代码总览 98

5.4 CSS编写 99

5.4.1 页面公共部分的CSS编写 99

5.4.2 页面框架的CSS编写 100

5.4.3 页面头部和页脚的CSS编写 101

5.4.4 首页主体内容的CSS编写 102

5.4.5 内页主体内容的CSS编写 104

5.4.6 网站CSS代码总览 105

5.5 制作中需要注意的问题 105

5.5.1 label标签中的for属性 105

5.5.2 zoom：1的作用 106

第6章 电子商务网站 108

6.1 页面效果图分析 108

6.1.1 头部和页脚分析 111

6.1.2 首页主体内容分析 111

6.1.3 内页主体内容分析 113

6.2 布局规划及切图 114

6.2.1 页面布局规划 114

6.2.2 切割首页及导出图片 114

6.2.3 切割内页及导出图片 116

6.3 XHTML编写 117

6.3.1 页面XHTML框架搭建 117

6.3.2 页面头部和页脚的XHTML编写 118

6.3.3 页面公共部分的XHTML编写 120

6.3.4 首页主体内容的XHTML编写 121

6.3.5 内页主体内容的XHTML编写 125

6.3.6 首页XHTML代码总览 126

6.3.7 内页XHTML代码总览 127

6.4 CSS编写 128

6.4.1 页面公共部分的CSS编写 128

6.4.2 页面框架的CSS编写 129

6.4.3 页面头部和页脚的CSS编写 130

6.4.4 首页主体内容的CSS编写 132

6.4.5 内页主体内容的CSS编写 134

6.4.6 网站CSS代码总览 135

6.5 制作中需要注意的问题 136

6.5.1 CSS Sprites技术的利与弊 136

6.5.2 准确提炼网站中的公共模块 137

第7章 电子政务网站 138

7.1 页面效果图分析 138

7.1.1 头部和页脚分析 140

7.1.2 首页主体内容分析 141

7.1.3 内页主体内容分析 142

7.2 布局规划及切图 143

7.2.1 页面布局规划 143

7.2.2 切割首页及导出图片 144

7.2.3 切割内页及导出图片 145

7.3 XHTML编写 145

7.3.1 页面XHTML框架搭建 145

7.3.2 页面头部和页脚的XHTML编写 145

7.3.3 页面公共部分的XHTML编写 146

7.3.4 首页主体内容的XHTML编写 148

7.3.5 内页主体内容的XHTML编写 150

7.3.6 首页XHTML代码总览 151

7.3.7 内页XHTML代码总览 152

7.4 CSS编写 154

7.4.1 页面公共部分的CSS编写 154

7.4.2 页面框架的CSS编写 155

7.4.3 页面头部和页脚的CSS编写 156

7.4.4 首页主体内容的CSS编写 156

7.4.5 内页主体内容的CSS编写 157

7.4.6 网站CSS代码总览 157

7.5 制作中需要注意的问题 158

7.5.1 marquee标签 158

7.5.2 word-spacing 158

第8章 搜索资讯网站 159

8.1 页面效果图分析 159

8.1.1 头部和页脚分析 161

8.1.2 首页主体内容分析 161

8.1.3 内页主体内容分析 161

8.2 布局规划及切图 163

8.2.1 页面布局规划 163

8.2.2 切割首页及导出图片 163

8.2.3 切割内页及导出图片 164

8.3 XHTML编写 164

8.3.1 页面XHTML框架搭建 165

8.3.2 页面头部和页脚的XHTML编写 165

8.3.3 页面公共部分的XHTML编写 166

8.3.4 首页主体内容的XHTML编写 167

8.3.5 内页主体内容的XHTML编写 167

8.3.6 首页XHTML代码总览 168

8.3.7 内页XHTML代码总览 170

8.4 CSS编写 172

8.4.1 页面公共部分的CSS编写 172

8.4.2 页面框架的CSS编写 173

8.4.3 页面头部和页脚的CSS编写 173

8.4.4 首页主体内容的CSS编写 174

8.4.5 内页主体内容的CSS编写 175

8.4.6 网站CSS代码总览 176

8.5 制作中需要注意的问题 177

8.5.1 display:inline-block；的使用方法 177

8.5.2 ＜！-［ifIE 6］＞…＜！［endif］-＞的使用方法 177

第9章 电影网站 179

9.1 页面效果图分析 179

9.1.1 页面头部和页脚分析 181

9.1.2 首页主体内容分析 181

9.1.3 内页主体内容分析 183

9.2 布局规划及切图 184

9.2.1 页面布局规划 184

9.2.2 切割首页及导出图片 184

9.2.3 切割内页及导出图片 185

9.3 XHTML编写 186

9.3.1 页面XHTML框架搭建 186

9.3.2 页面头部和页脚的XHTML编写 187

9.3.3 页面公共部分的XHTML编写 188

9.3.4 首页主体内容的XHTML编写 188

9.3.5 内页主体内容的XHTML编写 192

9.3.6 首页XHTML代码总览 195

9.3.7 内页XHTML代码总览 196

9.4 CSS编写 197

9.4.1 页面公共部分的CSS编写 197

9.4.2 页面框架的CSS编写 199

9.4.3 页面头部和页脚的CSS编写 200

9.4.4 首页主体内容的CSS编写 200

9.4.5 内页主体内容的CSS编写 202

9.4.6 网站CSS代码总览 204

9.5 制作中需要注意的问题 204

9.5.1 CSS选择器 204

9.5.2 CSS选择器的优先级 204

第10章 游戏网站 206

10.1 页面效果图分析 206

10.1.1 左栏信息和页脚分析 207

10.1.2 首页主体内容分析 208

10.1.3 内页主体内容分析 208

10.2 布局规划及切图 209

10.2.1 页面布局规划 209

10.2.2 切割首页及导出图片 209

10.2.3 切割内页及导出图片 210

10.3 XHTML编写 211

10.3.1 页面XHTML框架搭建 211

10.3.2 页面左栏信息和页脚的XHTML编写 212

10.3.3 页面公共部分的XHTML编写 212

10.3.4 首页主体内容的XHTML编写 213

10.3.5 内页主体内容的XHTML编写 215

10.3.6 首页XHTML代码总览 216

10.3.7 内页XHTML代码总览 217

10.4 CSS编写 219

10.4.1 页面公共部分的CSS编写 219

10.4.2 页面框架的CSS编写 220

10.4.3 页面左栏信息和页脚的CSS编写 220

10.4.4 首页主体内容的CSS编写 221

10.4.5 内页主体内容的CSS编写 222

10.4.6 网站CSS代码总览 223

10.5 制作中需要注意的问题 224

10.5.1 网页设计稿中特殊字体的处理 224

10.5.2 切图时应该保存成哪种图片格式 224

第11章 婚庆网站 226

11.1 页面效果图分析 226

11.1.1 页面头部和页脚分析 227

11.1.2 首页主体内容分析 228

11.1.3 内页主体内容分析 228

11.2 布局规划及切图 229

11.2.1 页面布局规划 229

11.2.2 切割首页及导出图片 230

11.2.3 切割内页及导出图片 230

11.3 XHTML编写 231

11.3.1 页面XHTML框架搭建 231

11.3.2 页面头部和页脚的XHTML编写 232

11.3.3 页面公共部分的XHTML编写 233

11.3.4 首页主体内容的XHTML编写 235

11.3.5 内页主体内容的XHTML编写 236

11.3.6 首页XHTML代码总览 238

11.3.7 内页XHTML代码总览 240

11.4 CSS编写 241

11.4.1 页面公共部分的CSS编写 241

11.4.2 页面框架的CSS编写 242

11.4.3 页面头部和页脚的CSS编写 243

11.4.4 首页主体内容的CSS编写 244

11.4.5 内页主体内容的CSS编写 245

11.4.6 网站CSS代码总览 246

11.5 制作中需要注意的问题——z-index属性 246

第12章 论坛类网站 249

12.1 页面效果图分析 249

12.1.1 页面头部和页脚分析 250

12.1.2 首页主体内容分析 251

12.1.3 内页主体内容分析 252

12.2 布局规划及切图 253

12.2.1 页面布局规划 253

12.2.2 切割首页及导出图片 253

12.2.3 切割内页及导出图片 253

12.3 XHTML编写 254

12.3.1 页面XHTML框架搭建 254

12.3.2 页面头部和页脚的XHTML编写 254

12.3.3 页面公共部分的XHTML编写 255

12.3.4 首页主体内容的XHTML编写 260

12.3.5 内页主体内容的XHTML编写 262

12.3.6 首页XHTML代码总览 264

12.3.7 内页XHTML代码总览 265

12.4 CSS编写 266

12.4.1 页面公共部分的CSS编写 266

12.4.2 页面框架的CSS编写 270

12.4.3 页面头部和页脚的CSS编写 270

12.4.4 首页主体内容的CSS编写 271

12.4.5 内页主体内容的CSS编写 272

12.4.6 网站CSS代码总览 272

12.5 制作中需要注意的问题 273

12.5.1 网站文件规划 273

12.5.2 CSS样式规划 274

第13章 餐饮网站 275

13.1 页面效果图分析 275

13.1.1 网站标志、导航和页脚分析 276

13.1.2 首页主体内容分析 277

13.1.3 内页主体内容分析 277

13.2 布局规划及切图 278

13.2.1 页面布局规划 278

13.2.2 切割首页及导出图片 278

13.2.3 切割内页及导出图片 279

13.3 XHTML编写 280

13.3.1 页面XHTML框架搭建 280

13.3.2 网站标志、导航和页脚的XHTML编写 280

13.3.3 页面公共部分的XHTML编写 281

13.3.4 首页主体内容的XHTML编写 282

13.3.5 内页主体内容的XHTML编写 282

13.3.6 首页XHTML代码总览 283

13.3.7 内页XHTML代码总览 284

13.4 CSS编写 285

13.4.1 页面公共部分的CSS编写 285

13.4.2 页面框架的CSS编写 286

13.4.3 网站标志、导航和页脚的CSS编写 287

13.4.4 首页主体内容的CSS编写 287

13.4.5 内页主体内容的CSS编写 288

13.4.6 网站CSS代码总览 289

13.5 制作中需要注意的问题 289

第14章 汽车网站 290

14.1 页面效果图分析 290

14.1.1 页面头部和页脚分析 291

14.1.2 首页主体内容分析 292

14.1.3 内页主体内容分析 293

14.2 布局规划及切图 294

14.2.1 页面布局规划 294

14.2.2 切割首页及导出图片 294

14.2.3 切割内页及导出图片 295

14.3 XHTML编写 295

14.3.1 页面XHTML框架搭建 295

14.3.2 页面头部和页脚的XHTML编写 296

14.3.3 页面公共部分的XHTML编写 298

14.3.4 首页主体内容的XHTML编写 299

14.3.5 内页主体内容的XHTML编写 300

14.3.6 首页XHTML代码总览 302

14.3.7 内页XHTML代码总览 303

14.4 CSS编写 304

14.4.1 页面公共部分的CSS编写 304

14.4.2 页面框架的CSS编写 305

14.4.3 页面头部和页脚的CSS编写 306

14.4.4 首页主体内容的CSS编写 307

14.4.5 内页主体内容的CSS编写 309

14.4.6 网站CSS代码总览 310

14.5 制作中需要注意的问题——IE 6下1px间距的问题 310

第15章 在线阅读网站 313

15.1 页面效果图分析 313

15.1.1 页面头部和页脚分析 315

15.1.2 首页主体内容分析 315

15.1.3 内页主体内容分析 316

15.2 布局规划及切图 317

15.2.1 页面布局规划 317

15.2.2 切割首页及导出图片 318

15.2.3 切割内页及导出图片 319

15.3 XHTML编写 319

15.3.1 页面XHTML框架搭建 319

15.3.2 页面头部和页脚的XHTML编写 320

15.3.3 页面公共部分的XHTML编写 321

15.3.4 首页主体内容的XHTML编写 321

15.3.5 内页主体内容的XHTML编写 322

15.3.6 首页XHTML代码总览 323

15.3.7 内页XHTML代码总览 324

15.4 CSS编写 326

15.4.1 页面公共部分的CSS编写 326

15.4.2 页面框架的CSS编写 326

15.4.3 页面头部和页脚的CSS编写 327

15.4.4 首页主体内容的CSS编写 328

15.4.5 内页主体内容的CSS编写 329

15.4.6 网站CSS代码总览 330

15.5 制作中需要注意的问题 331

15.5.1 img标签中alt属性与title属性 331

15.5.2 圆角背景的实现 332

第16章 常用浏览器及兼容处理 334

16.1 常用浏览器 334

16.1.1 常用浏览器及内核 334

16.1.2 页面兼容问题产生原因 335

16.2 兼容处理 336

16.2.1 理解CSS盒模型 336

16.2.2 怪异模式问题及解决方案 337

16.2.3 IE 6双边距问题及解决方案 338

16.2.4 普通文档流中块框的垂直边界问题及解决方案 339

16.2.5 IE 6、IE 7的hasLayout问题及解决方案 339

16.2.6 IE 6对png24格式图片的透明度支持问题及解决方案 340

16.2.7 IE 6下多余3px的问题及解决方案 341

16.2.8 各种浏览器中图片下方有空隙产生的问题及解决方案 342

16.2.9 IE 6无法定义1px高度的问题及解决方案 343

16.2.10 高度不适应问题 343

16.2.11 兼容问题的技巧 345

第17章 网页制作的调试工具及使用 346

17.1 Firefox浏览器下的页面调试工具及使用 346

17.2 IE浏览器下的页面调试工具及使用 349

17.3 Chrome浏览器下的页面调试工具及使用 350

第18章 代码发布前的优化 353

18.1 检查代码 353

18.1.1 XHTML代码的检查 353

18.1.2 CSS代码的检查 354

18.2 压缩代码 355

18.3 版本控制 356

18.4 上传 357