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

第1章 网页与网站的常识 1

1.1 互联网常识 1

1.1.1 组成网站的要素 1

1.1.2 网站域名 2

1.1.3 域名解析 3

1.1.4 网站空间 3

1.1.5 虚拟主机 4

1.2 网页常识 5

1.2.1 网页的结构描述语言HTML 5

1.2.2 XHTML和HTML的区别 6

1.2.3 网页的分类 7

1.2.4 网页的源代码 8

1.3 网站常识 8

1.3.1 网站开发语言 8

1.3.2 动态网站和静态网站 9

1.3.3 网站建设流程 9

1.4 初学者常见问题 9

1.4.1 XHTML语言的特点 9

1.4.2 浏览器的作用 10

1.4.3 静态网页和动态网页的区别 10

第2章 网站制作基础 11

2.1 如何使用Dreamweaver建站 11

2.1.1 定义站点 11

2.1.2 制作静态网页 17

2.1.3 制作动态网页 18

2.1.4 浏览网页 19

2.2 策划网站 19

2.2.1 确定网站主题 19

2.2.2 网站需求分析 19

2.2.3 网站框架图设计／交互设计 19

2.3 视觉设计 20

2.4 页面开发 20

2.4.1 如何切图并保存切片 20

2.4.2 CSS选择器 22

2.4.3 CSS盒模型 24

2.4.4 CSS定位 25

2.4.5 认识div层 32

2.4.6 div和span的区别 33

2.4.7 网站文件规划 34

2.4.8 CSS样式规划 34

2.5 页面开发标准和规范 36

2.6 综合练习1——图文排版效果 36

2.7 综合练习2——淘宝导购菜单 38

2.8 初学者常见问题 41

2.8.1 DIV+CSS网站标准设计的优势 41

2.8.2 如何考虑网站推广问题 42

2.8.3 什么是Web标准 42

2.8.4 如何理解margin的加倍问题 42

2.8.5 margin:0 auto表示什么含义 43

第3章 左右两栏固定宽度的布局 44

3.1 页面布局的分析 44

3.2 页面布局的实现 45

3.2.1 两栏浮动 45

3.2.2 两栏绝对定位 46

3.2.3 一栏浮动，另一栏绝对定位 47

3.3 网页实例 48

3.3.1 效果图分析 49

3.3.2 切图 51

3.3.3 绘制框架图 52

3.3.4 编写XHTML代码 53

3.3.5 编写CSS代码 56

3.4 小结 59

第4章 左右两栏宽度自适应的布局 60

4.1 页面布局的分析 60

4.1.1 示意图 60

4.1.2 布局分析 61

4.2 页面布局的实现 61

4.2.1 两栏浮动 61

4.2.2 两栏绝对定位 62

4.2.3 一栏浮动，另一栏绝对定位 63

4.3 网页实例 64

4.3.1 效果图分析 65

4.3.2 切图 66

4.3.3 绘制框架图 67

4.3.4 编写XHTML代码 67

4.3.5 编写CSS代码 69

4.4 小结 71

第5章 一栏宽度固定，另一栏宽度自适应的布局 72

5.1 页面布局的分析 72

5.1.1 示意图 72

5.1.2 布局分析 73

5.2 页面布局的实现 73

5.2.1 一栏浮动，另一栏默认文档流并设置向左外边距 73

5.2.2 一栏绝对定位，另一栏默认文档流并设置向左外边距 74

5.3 网页实例 75

5.3.1 效果图分析 76

5.3.2 切图 80

5.3.3 绘制框架图 80

5.3.4 编写XHTML代码 81

5.3.5 编写CSS代码 82

5.4 小结 84

第6章 三栏宽度固定的布局 85

6.1 页面布局的分析 85

6.1.1 示意图 85

6.1.2 布局分析 86

6.2 页面布局的实现 86

6.2.1 左中右三栏浮动 86

6.2.2 左中右三栏绝对定位 87

6.2.3 左右两栏浮动，中间栏绝对定位 88

6.3 网页实例 90

6.3.1 效果图分析 90

6.3.2 切图 94

6.3.3 绘制框架图 95

6.3.4 编写XHTML代码 95

6.3.5 编写CSS代码 98

6.4 小结 100

第7章 左右两栏宽度固定，中间栏宽度自适应的布局 102

7.1 页面布局的分析 102

7.1.1 示意图 102

7.1.2 布局分析 103

7.2 页面布局的实现 103

7.2.1 左右两栏浮动，中间栏默认文档流并设置左右外边距 103

7.2.2 左右两栏绝对定位，中间栏默认文档流并设置左右外边距 105

7.3 网页实例 106

7.3.1 效果图分析 106

7.3.2 切图 110

7.3.3 绘制框架图 111

7.3.4 编写XHTML代码 112

7.3.5 编写CSS代码 115

7.4 小结 118

第8章 高度自适应的布局 119

8.1 页面布局的分析 119

8.1.1 示意图 119

8.1.2 布局分析 120

8.2 页面布局的实现 120

8.2.1 正负内外边距 120

8.2.2 为父容器添加背景图 121

8.3 网页实例 122

8.3.1 效果图分析 122

8.3.2 切图 125

8.3.3 绘制框架图 125

8.3.4 编写XHTML代码 126

8.3.5 编写CSS代码 127

8.4 小结 129

第9章 项目1——论坛 130

9.1 页面效果图分析 130

9.1.1 页面头部和页脚分析 131

9.1.2 首页主体内容分析 132

9.1.3 内页主体内容分析 133

9.2 布局规划及切图 134

9.2.1 页面布局规划 134

9.2.2 切割首页及导出图片 134

9.2.3 切割内页及导出图片 135

9.3 XHTML编写 135

9.3.1 搭建页面XHTML框架 135

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

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

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

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

9.3.6 总览首页XHTML代码 144

9.3.7 总览内页XHTML代码 145

9.4 CSS编写 147

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

9.4.2 页面框架的CSS编写 150

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

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

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

9.4.6 网站CSS代码总览 153

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

9.5.1 网站文件规划 153

9.5.2 CSS样式规划 154

第10章 项目2——电子政务网站 155

10.1 页面效果图分析 155

10.1.1 头部和页脚分析 157

10.1.2 首页主体内容分析 158

10.1.3 内页主体内容分析 159

10.2 布局规划及切图 160

10.2.1 页面布局规划 160

10.2.2 切割首页及导出图片 160

10.2.3 切割内页及导出图片 162

10.3 XHTML编写 162

10.3.1 页面的XHTML框架搭建 162

10.3.2 页面头部和页脚的XHTML编写 162

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

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

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

10.3.6 首页XHTML代码总览 168

10.3.7 内页XHTML代码总览 169

10.4 CSS编写 170

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

10.4.2 页面框架的CSS编写 172

10.4.3 页面头部和页脚的CSS编写 172

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

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

10.4.6 网站CSS代码总览 174

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

10.5.1 marquee 175

10.5.2 word-spacing 175

第11章 项目3——电子商务网站 176

11.1 页面效果图分析 176

11.1.1 头部和页脚分析 179

11.1.2 首页主体内容分析 179

11.1.3 内页主体内容分析 181

11.2 布局规划及切图 182

11.2.1 页面布局规划 182

11.2.2 切割首页及导出图片 182

11.2.3 切割内页及导出图片 184

11.3 XHTML编写 184

11.3.1 页面的XHTML框架搭建 185

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

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

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

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

11.3.6 首页XHTML代码总览 194

11.3.7 内页XHTML代码总览 195

11.4 CSS编写 197

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

11.4.2 页面框架的CSS编写 198

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

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

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

11.4.6 网站CSS代码总览 204

11.5 制作中需要注意的问题 205

11.5.1 CSS Sprites技术的利与弊 205

11.5.2 准确提炼网站中的公共模块 206

第12章 项目4——新品展示网站 207

12.1 页面效果图分析 207

12.1.1 头部和页脚分析 209

12.1.2 首页主体内容分析 209

12.1.3 内页主体内容分析 210

12.2 布局规划及切图 211

12.2.1 页面布局规划 211

12.2.2 切割首页及导出图片 212

12.2.3 切割内页及导出图片 213

12.3 XHTML编写 213

12.3.1 页面的XHTML框架搭建 213

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

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

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

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

12.3.6 首页XHTML代码总览 218

12.3.7 内页XHTML代码总览 220

12.4 CSS编写 222

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

12.4.2 页面框架的CSS编写 223

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

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

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

12.4.6 网站CSS代码总览 226

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

12.5.1 网页的编码格式 227

12.5.2 CSS加入网页的方法 227

第13章 网站的发布 228

13.1 整理源代码 228

13.1.1 XHTML代码的检查 228

13.1.2 CSS代码的检查 229

13.1.3 网页调试 230

13.1.4 压缩代码 237

13.2 购买空间和域名 238

13.3 上传网站 239

13.4 维护与运营 241

13.5 读者常见问题 241

13.5.1 如何让别人通过互联网访问我的网站 242

13.5.2 如何能让百度、谷歌等收录我的网站 242

13.5.3 网站是否要备案 242

附录A HTML中支持的颜色名称 243

附录B CSS常用的属性 252