网页DIV+CSS布局和动画美化全程实例PDF电子书下载

第1章动感网页动画的实现技术 1

1.1网页动画的重要性 1

1.1.1成功的网站所具备的特点 1

1.1.2快速发展的网页特效动画技术 3

1.1.3网页动画设计师必须掌握的技术 3

1.2掌握Web网页标准的基础 4

1.2.1网页标准化的好处 4

1.2.2现阶段使用的Web标准 5

1.2.3使用Web标准改善现有网站 7

1.3嵌入网页的动画技术 10

1.3.1 GIF图片动画 11

1.3.2 CSS样式动画 11

1.3.3 JavaScript特效动画 12

1.3.4 Flash动画 14

第2章DIV+CSS网页布局基础知识 18

2.1 DIV的基础知识和操作 18

2.1.1层的基础知识 18

2.1.2页面中插入层 19

2.1.3创建嵌套层 20

2.1.4层属性面板 21

2.2 CSS层叠样式表 22

2.2.1 CSS的作用、类型与冲突 22

2.2.2编辑CSS层叠样式表 24

2.2.3层叠样式表规则意义 28

2.3 DIV+CSS布局方法 34

2.3.1 DIV标签控制方法 34

2.3.2 XHTML中的元素 36

2.3.3元素的样式设置 36

2.3.4网页宽度的设置 38

2.3.5水平居中的设置 38

2.3.6 DIV的嵌套设置 40

2.3.7 DIV的浮动方法 41

2.3.8网页布局的实例 45

2.4列表元素布局 48

2.4.1列表元素布局导航 48

2.4.2导航条的超级链接 49

2.4.3导航条的互动设计 51

2.5 CSS盒模型 52

2.5.1 CSS盒模型概念 52

2.5.2外边距的控制 53

2.5.3边框的样式设置 55

2.5.4内边距的设置 56

2.5.5盒模型兼容问题 58

2.6元素的非常规定位方式 59

2.6.1 CSS绝对定位 59

2.6.2 CSS固定定位 61

2.6.3 CSS相对定位 62

2.6.4 CSS程序简化 64

第3章全程实例一：清新风格的摄影网站 66

3.1摄影网站的美工创意 66

3.1.1首页的功能模块 66

3.1.2规划首页的版面 67

3.2首页的布局设计 70

3.2.1 Photoshop分割图片 70

3.2.2网站文件夹规划 75

3.2.3搭建网站服务器平台 76

3.2.4创建编辑站点 83

3.2.5转换首页布局结构 86

3.2.6 CSS标准化网页 88

3.3实例的动画效果 97

3.3.1使用的动画技术 97

3.3.2链接注释动画 97

3.3.3状态栏跑马灯 99

3.3.4随机文本颜色 100

3.3.5滴水特效动画 101

第4章全程实例二：个性化的博客网站 108

4.1博客网站美工设计 108

4.2网站的首页布局 110

4.2.1图片的分割 110

4.2.2配置本地站点 113

4.2.3创建编辑站点 116

4.2.4转换首页布局结构 118

4.2.5 DIV+CSS布局首页 120

4.2.6二级页面的设计 123

4.3日记翻页的动画效果 126

4.3.1实现的动画技术 126

4.3.2素材图片的整理 127

4.3.3图形元件的制作 128

4.3.4按钮元件的制作 132

4.3.5日记页面的制作 133

4.3.6向右翻页的动画 139

4.3.7向左翻页的动画 145

4.3.8图层合成影片 148

4.3.9加入翻书的声音 150

4.3.10加入动作命令 151

4.3.11嵌入网页并应用 155

第5章全程实例三：精致风格的美容网站 157

5.1雅丽美容网站的设计 157

5.1.1网站的栏目设计 157

5.1.2设计首页的版面 158

5.2网站首页布局设计 160

5.2.1切片网页图片 160

5.2.2搭建本地站点 165

5.2.3创建编辑站点 167

5.2.4转换布局结构 169

5.2.5 DIV+CSS布局网页 170

5.3首页加入动画效果 176

5.3.1首页的动画效果 176

5.3.2滑动二级菜单 177

5.3.3 Flash特效动画 181

第6章全程实例四：天真的乐园网站 189

6.1天真乐园网站的设计 189

6.1.1网站的栏目设计 189

6.1.2首页的版面设计 190

6.2首页的布局设计 192

6.2.1使用Photoshop分割图片 192

6.2.2配置本地站点服务器 194

6.2.3创建编辑站点 197

6.2.4转换首页布局 199

6.2.5 DIV+CSS布局网页 200

6.3加入的动画效果 205

6.3.1使用的动画效果 205

6.3.2 DIV+CSS滑动菜单 206

6.3.3 Flash特效动画效果 208

6.3.4显示访问时间 216

第7章全程实例五：水墨风格的餐饮网站 218

7.1水墨风格的网站美工设计 218

7.1.1餐饮网站的栏目设计 218

7.1.2网站首页的设计 219

7.2网站首页的布局设计 220

7.2.1使用Photoshop切片图片 220

7.2.2配置本地站点服务器 222

7.2.3创建编辑站点 224

7.2.4转换首页布局结构 225

7.2.5 DIV+CSS布局网页 226

7.3首页加入动画效果 230

7.3.1实例使用的动画效果 230

7.3.2逐字变化文本颜色 230

7.3.3变化菜品的动画效果 232

7.3.4发光灯笼和动画菜单 242

第8章全程实例六：淳朴风格的办公用品网站 255

8.1办公用品网站的美工设计 255

8.1.1网站的栏目设计 255

8.1.2设计首页的版面 256

8.2网站首页的布局设计 258

8.2.1 Photoshop切片图片 258

8.2.2配置本地站点 260

8.2.3创建编辑站点 261

8.2.4转换首页布局 262

8.2.5 DIV+CSS布局首页 264

8.3加入的动画效果 269

8.3.1使用的动画效果 269

8.3.2状态栏时间显示 269

8.3.3壁灯的动画设计 270

8.3.4 Flash滑动菜单 282

第9章全程实例七：传统风格的酒业网站 297

9.1葡萄酒网站的美工设计 297

9.1.1设计酒业网站栏目 297

9.1.2设计首页的版面 298

9.2首页的布局设计 299

9.2.1 Photoshop切片图片 299

9.2.2配置本地站点 303

9.2.3建立酒业编辑站点 305

9.2.4转换首页布局 306

9.2.5 DIV+CSS布局首页 307

9.3首页加入动画效果 314

9.3.1实例使用的动画 314

9.3.2滚动字幕广告 314

9.3.3 Logo发光动画 315

9.3.4发光酒杯动画 323

第10章全程实例八：温馨风格的家俱网站 330

10.1温馨风格的家俱网站美工 330

10.1.1家俱网站的栏目设计 330

10.1.2设计首页的版面 331

10.2家俱首页的布局设计 333

10.2.1首页图片的切片 333

10.2.2配置家俱站点服务器 335

10.2.3创建编辑站点 337

10.2.4转换首页布局结构 337

10.2.5 DIV+CSS布局网页 338

10.3首页加入动画效果 343

10.3.1使用的动画技术 343

10.3.2图片的自动切换 343

10.3.3滑动的导航菜单 347