Div+CSS 3.0网页布局案例精粹PDF电子书下载

第1章网页和网站的制作流程 1

1.1认识网页 2

1.1.1网页和网站 2

1.1.2网页的基本构成元素 2

1.2什么是网页设计 3

1.2.1网页设计概述 4

1.2.2网页设计与网页制作 4

1.2.3网页设计的特点 5

1.2.4网页设计的相关术语 7

1.3网页设计涵盖的内容 11

1.3.1视听元素 11

1.3.2版式设计 11

1.4如何设计网页 12

1.4.1网页设计的基本原则 12

1.4.2网站设计成功的要素 13

1.4.3网页的设计风格及色彩搭配 14

1.5网页设计的原则 14

1.5.1为用户考虑的原则 15

1.5.2主题突出的原则 15

1.5.3整体原则 16

1.5.4内容与形式相统一的原则 17

1.5.5更新和维护的原则 18

1.6网页设计师应具备的素质 18

1.6.1艺术素质 18

1.6.2技能素质 19

1.6.3综合素质 19

1.7网站的制作流程 20

1.7.1前期策划 20

1.7.2页面细化及实施 21

1.7.3后期维护 22

1.8静态页面的制作流程 22

1.8.1观察设计稿 22

1.8.2拆分设计稿 23

1.8.3网页设计的实现 23

第2章CSS样式入门 25

2.1 CSS的基本概念 26

2.1.1 CSS的特点 26

2.1.2 CSS的类型 27

2.1.3 CSS的基本语法 28

2.1.4 CSS的冲突 29

2.2网页设计中的CSS 30

2.2.1怎样使用CSS 30

2.2.2 CSS能做什么 32

2.2.3 CSS不能做什么 32

2.3 CSS样式表的基本用法 33

2.3.1怎样在HTML中插入样式表 33

2.3.2 CSS样式表规则 33

2.4应用CSS到网页中 34

2.4.1内联样式 34

2.4.2嵌入样式表 34

2.4.3外部样式表 35

2.5单位和值 35

2.5.1定义颜色值 36

2.5.2定义字体 37

2.5.3群选择符 38

2.5.4派生选择符 38

2.5.5 id选择符 39

2.5.6类别选择符 39

2.6应用实例——为页面添加CSS样式 41

2.6.1设计分析 41

2.6.2制作步骤 41

2.6.3案例总结 47

2.7举一反三——制作产品介绍网站 48

2.7.1案例分析 48

2.7.2视频操作 49

第3章使用Div+CSS布局页面 51

3.1定义Div 52

3.1.1什么是Div 52

3.1.2插入Div 52

3.1.3 Div的嵌套和固定格式 54

3.2 CSS布局定位 54

3.2.1浮动定位 55

3.2.2 position定位 58

3.3可视化盒模型 60

3.3.1盒子模型 60

3.3.2视觉可视化模型 62

3.3.3空白边叠加 62

3.4常用的布局方式 63

3.4.1居中布局设计 63

3.4.2浮动布局设计 65

3.4.3高度自适应设计 68

3.5 CSS 3.0中盒模型的新增属性 69

3.5.1 overflow 69

3.5.2 overflow-x 70

3.5.3 overflow-y 71

3.6应用实例——使用Div+CSS布局页面 72

3.6.1设计分析 73

3.6.2制作步骤 73

3.6.3案例总结 78

3.7举一反三——制作健康网站 78

3.7.1案例分析 78

3.7.2视频操作 79

第4章使用CSS控制网页背景 81

4.1背景颜色 82

4.1.1设置页面背景颜色 82

4.1.2设置块背景颜色 83

4.2背景图片 84

4.2.1为页面设置背景图片 84

4.2.2背景图片的重复 85

4.2.3设置背景图片的位置 86

4.2.4设置背景滚动 87

4.2.5背景样式的缩写方式 88

4.3 CSS 3.0中背景的新增属性 89

4.3.1 background-origin 89

4.3.2 background-clip 90

4.3.3 background-size 92

4.3.4 multiple backgrounds 93

4.4应用实例——制作金融类网站页面 94

4.4.1设计分析 94

4.4.2制作步骤 95

4.4.3案例总结 101

4.5举一反三——制作保健商品网站 102

4.5.1案例分析 102

4.5.2视频操作 103

第5章使用CSS控制文字样式 105

5.1控制文字样式 106

5.1.1字体和大小 106

5.1.2文字颜色和粗细 110

5.1.3斜体 111

5.1.4下画线、顶画线和删除线 112

5.1.5英文字母大小写 113

5.2控制段落样式 113

5.2.1段落水平对齐 113

5.2.2段落垂直对齐 114

5.2.3行间距和字间距 115

5.2.4首字下沉 116

5.3使用CSS对Flash中的文字进行控制 116

5.4 CSS 3.0中文字的新增属性 118

5.4.1 text-shadow 118

5.4.2 text-overflow 119

5.4.3 word-wrap 121

5.5应用实例——制作设计类网站 122

5.5.1设计分析 122

5.5.2制作步骤 122

5.5.3案例总结 129

5.6举一反三——制作社区类网站 129

5.6.1案例分析 129

5.6.2视频操作 130

第6章使用CSS控制图片样式 131

6.1图片样式 132

6.1.1图片边框设置 132

6.1.2图片缩放设置 135

6.2图片对齐 136

6.2.1水平对齐设置 136

6.2.2垂直对齐设置 137

6.3图文混排 138

6.3.1文本混排 138

6.3.2设置混排间距 139

6.4 CSS 3.0中边框的新增属性 139

6.4.1 border-image 140

6.4.2 border-radius 141

6.4.3 box-shadow 142

6.4.4 border-color 143

6.5应用实例——制作婚庆网站 145

6.5.1设计分析 145

6.5.2制作步骤 146

6.5.3案例总结 150

6.6举一反三——制作产品介绍网站 150

6.6.1案例分析 151

6.6.2视频操作 152

第7章使用CSS控制列表样式 153

7.1列表控制概述 154

7.1.1列表控制原则 154

7.1.2列表的类型及使用 154

7.1.3改变项目样式 157

7.1.4图片符号 158

7.2使用列表制作实用菜单 159

7.2.1无须表格的菜单 159

7.2.2菜单的横竖转换 161

7.3 CSS 3.0中颜色的新增属性 162

7.3.1 HSL colors 162

7.3.2 HSLA colors 163

7.3.3 opacity 164

7.3.4 RGBA colors 166

7.4应用实例——制作音乐网站 167

7.4.1设计分析 168

7.4.2制作步骤 168

7.4.3案例总结 172

7.5举一反三——制作设计工作室网站 172

7.5.1案例分析 173

7.5.2视频操作 173

第8章使用CSS控制表单样式 175

8.1表单设计概述 176

8.1.1表单的设计原则 176

8.1.2表单应用分类 177

8.2表单的设计 179

8.2.1表单和表单元素 179

8.2.2标签、字段集和图例 183

8.2.3使用CSS控制文本字段 185

8.2.4使用CSS控制复选框与单选框 185

8.2.5使用CSS控制列表与跳转菜单 186

8.3 CSS 3.0中控制内容的新增属性 187

8.4应用实例——制作用户注册页面 188

8.4.1设计分析 189

8.4.2制作步骤 189

8.4.3案例总结 196

8.5举一反三——制作用户登录页面 196

8.5.1案例分析 197

8.5.2视频操作 197

第9章使用CSS美化浏览器效果 199

9.1使用CSS控制超链接 200

9.1.1认识超链接 200

9.1.2关于链接路径 202

9.1.3超链接属性控制 204

9.1.4图像映射 206

9.1.5链接的打开方式 208

9.2超链接特效 208

9.2.1按钮式超链接 208

9.2.2浮雕式超链接 210

9.3鼠标特效 210

9.3.1 CSS控制鼠标箭头 211

9.3.2鼠标变化的超链接 211

9.4 CSS 3.0中用户界面的新增属性 212

9.4.1 box-sizing 212

9.4.2 resize 214

9.4.3 outline 215

9.4.4 nav-index 216

9.5应用实例——制作产品宣传网站 218

9.5.1设计分析 218

9.5.2制作步骤 219

9.5.3案例总结 225

9.6举一反三——制作运输公司网站 225

9.6.1案例分析 225

9.6.2视频操作 226

第10章应用CSS中的滤镜 227

10.1了解CSS滤镜 228

10.1.1 Alpha滤镜 228

10.1.2 Blur滤镜 231

10.1.3 MotionBlur滤镜 232

10.1.4 Dropshadow滤镜 233

10.1.5 Shadow滤镜 234

10.1.6 Flip滤镜 234

10.1.7 Glow滤镜 235

10.1.8 Gray滤镜 236

10.1.9 Invert滤镜 236

10.1.10 Xray滤镜 237

10.1.11 Mask滤镜 237

10.1.12 Wave滤镜 238

10.2 CSS 3.0中其他模块的新增属性 239

10.2.1﹫media 239

10.2.2 columns 240

10.2.3﹫font-face 242

10.2.4 speech 243

10.3应用实例——制作产品类网站 245

10.3.1设计分析 245

10.3.2制作步骤 245

10.3.3案例总结 254

10.4举一反三——制作网络游戏网站 254

10.4.1案例分析 254

10.4.2视频操作 255

第11章CSS与JavaScript的综合应用 257

11.1什么是JavaScript 258

11.1.1了解JavaScript 258

11.1.2 JavaScript的特点 260

11.1.3 JavaScript的应用范围 261

11.1.4 CSS样式与JavaScript 263

11.2 JavaScript的语法基础 263

11.2.1 JavaScript的基本架构 263

11.2.2 JavaScript的基本语法 264

11.2.3数据类型和变量 267

11.2.4表达式和运算符 268

11.2.5基本语句 268

11.3使用Spry构件 270

11.3.1关于Spry构件 271

11.3.2插入Spry菜单 271

11.3.3插入Spry选项卡式面板 273

11.3.4插入Spry折叠式构件 275

11.3.5插入Spry可折叠面板 276

11.4应用实例——在网页中应用Spryy构件 278

11.4.1设计分析 279

11.4.2制作步骤 279

11.4.3案例总结 287

11.5举一反三——制作婚纱摄影网站 287

11.5.1案例分析 288

11.5.2视频操作 288

第12章CSS与XML的综合应用 289

12.1 XML基础 290

12.1.1 XML的特点 290

12.1.2 XML与HTML 291

12.1.3 XML基本语法 293

12.1.4格式正确的XML文档 296

12.2 XML与CSS的链接 297

12.2.1使用xml: stylesheet指令 297

12.2.2使用＠import指令 299

12.3 XML与CSS的应用 299

12.3.1显示学生信息 299

12.3.2实现隔行变色的表格 302

12.4应用实例——在HTML页面中调用XML数据 305

12.4.1设计分析 306

12.4.2制作步骤 306

12.4.3案例总结 311

12.5举一反三——制作企业网站 311

12.5.1案例分析 312

12.5.2视频操作 313

第13章CSS与Ajax的综合应用 315

13.1了解Ajax 316

13.1.1Ajax简介 316

13.1.2Ajax的关键元素 317

13.1.3 Ajax的优势 318

13.1.4实现Ajax的步骤 318

13.1.5使用CSS的必要性 319

13.2 Ajax基础 320

13.2.1创建XMLHttpRequest对象 320

13.2.2发出Ajax请求 321

13.2.3处理服务器响应 322

13.2.4使用CSS样式 322

13.3 HTML 5.0简介 323

13.3.1 HTML 5.0标签 323

13.3.2 HTML 5.0事件属性 327

13.3.3 HTML 5.0标准属性 329

13.4应用实例——使用Ajax实现页面特效 330

13.4.1设计分析 330

13.4.2制作步骤 330

13.4.3案例总结 338

13.5举一反三——通过Ajax实现可拖动Div块 339

13.5.1案例分析 339

13.5.2视频操作 340

第14章儿童教育类网站 341

14.1综合实例——制作儿童教育类网站 342

14.1.1设计分析 342

14.1.2制作步骤 342

14.1.3案例总结 353

第15章医疗保健类网站设计 355

15.1综合实例——制作医疗保健类网站 356

15.1.1设计分析 356

15.1.2制作步骤 356

15.1.3案例总结 366

第16章游戏类网站设计 367

16.1综合实例——制作游戏类网站 368

16.1.1设计分析 368

16.1.2制作步骤 368

16.1.3案例总结 378