网页好设计 Dreamweaver 网页布局×特效设计应用大全 HTML 5+CSS 3+JavaScript+jQueryPDF电子书下载

Chapter00 CS6新功能与本书使用方法 2

Dreamweaver CS6新增功能介绍 2

关于光盘 8

定义随书练习网站 9

范例动画展示 10

Chapter01 Dreamweaver中的HTM L与CSS设置 12

1-1HTML简介与常用的HTML标签 12

1-1-1 Dreamweaver打开各式版本的HTML文件 12

1-1-2常用HTML标签 14

1-2 CSS规则与Dreamweaver中的CSS设置 20

1-2-1行内样式 21

1-2-2嵌入样式 21

1-2-3新建CSS规则与CSS应用方式 23

1-2-4链接外部样式 27

1-2-5 CSS控制面板 30

1-3 Dreamweaver完整CSS设置与使用 31

1-3-1 CSS规则定义［1］：类型属性 31

1-3-2 CSS规则定义［2］：区块属性 31

1-3-3 CSS规则定义［3］：背景属性 32

1-3-4 CSS规则定义［4］：列表属性 32

1-3-5 CSS规则定义［5］：边框属性 33

1-3-6 CSS规则定义［6］：方框属性 33

1-3-7 CSS规则定义［7］：定位属性 34

1-3-8 CSS规则定义［8］：扩展属性 35

1-3-9 CSS规则定义［9］：过渡属性 35

1-4 Adobe Widget Browser快速加入jQuery组件 35

Chapter02表格与框架布局编排技法 40

2-1 Photoshop布局设计切割 40

2-1-1布局切割技巧 40

2-1-2切片设置 43

2-1-3存储为网页设置 43

2-2表格布局编排 46

2-2-1以Photoshop切割储存出的表格布局编排 46

2-2-2表格的整理与布局编排技巧 49

2-2-3欢迎页布局编排 55

2-2-4首页布局编排 58

2-2-5分栏式页面布局编排 61

2-3 CSS背景图布局应用 65

2-3-1 CSS背景图设置 65

2-3-2固定背景图布局应用 67

2-3-3单栏式背景图布局应用 69

2-3-4单元格背景图布局应用 73

2-3-5半透明背景图布局应用 77

2-4框架与内框架布局 80

2-4-1构建框架组合布局 80

2-4-2上下三行式框架布局 83

2-4-3上中下分双栏式框架布局 87

2-4-4构建内框架布局 92

2-4-5单栏式内框架布局 94

2-4-6单栏式内框架网站构建 97

Chapter03 CSS与CSS布局编排整合技巧 100

3-1 CSS样式初步应用 100

3-1-1文字属性应用 100

3-1-2色块式文字标题 105

3-1-3图片文字标题 106

3-1-4插图标示文字标题 108

3-1-5背景图文字标题 109

3-1-6图片边框与编排应用 111

3-1-7链接文字与CSS应用 113

3-1-8链接文字按钮 116

3-1-9列表与CSS按钮设计 118

3-1-10 CSS直向色块按钮 121

3-1-11 CSS直向图片按钮 125

3-1-12 CSS项目列表横向按钮 127

3-1-13 CSS横向图片按钮应用 130

3-2利用Div标签划分网页区块 132

3-2-1插入Div标签，利用CSS美化Div标签 132

3-2-2固定宽度圆角边框 134

3-3 Div区块定位 141

3-3-1 Position（定位）设置 141

3-3-2使用Position（定位）区块设计布局 144

3-3-3使用Float（浮动）制作区块 146

3-4 CSS绝对水平、垂直在居中布局中的配置 149

3-4-1 ＜div＞区块在页面中上下居中 149

3-4-2布局内容在含有内部＜div＞时的上下居中 151

3-4-3绝对居中布局应用 153

3-4-4含背景图像的绝对居中布局应用 155

3-5 CSS单栏布局配置 157

3-5-1固定宽度单栏布局 157

3-5-2 CSS固定宽度图像表格边框 164

3-5-3背景延伸单栏布局 167

3-5-4 CSS变动宽度与高度图像表格边框 175

3-6 CSS双栏布局配置 179

3-6-1 CSS固定宽度双栏布局 179

3-6-2 CSS固定宽度双栏布局与按钮应用 181

3-6-3 CSS变动宽度双栏布局 187

3-6-4 CSS变动宽度双栏布局与按钮应用 189

3-7 CSS三栏的布局配置 196

3-7-1 CSS固定宽度三栏布局 196

3-7-2 CSS固定宽度三栏布局与按钮应用 199

3-7-3 CSS变动宽度三栏布局 210

3-7-4 CSS三栏式变动宽度布局编排应用 213

3-8流体网格布局 226

3-8-1创建流体网格布局 226

3-8-2流体网格布局应用 230

3-9初探CSS3 233

3-9-1 CSS3 text-shadow 233

3-9-2 CSS3 Box-Shadow 234

3-9-3 CSS3 Border-Radius圆角 235

3-9-4 CSS3 Transform变形 237

3-9-5 CSS3过渡效果 238

Chapter04互动效果与布局整合技巧 244

4-1内置行为布局整合 244

4-1-1内置行为设置与使用 245

4-1-2弹出信息与打开浏览器窗口 247

4-1-3互动替换图片效果应用 249

4-1-4跳转菜单应用 251

4-1-5跳转菜单切换内框架内容页面 253

4-1-6设置文字行为应用 255

4-1-7互相拖动对象 258

4-1-8交互式浏览内容 260

4-1-9互动产品说明 263

4-1-10图片式按钮弹出菜单 265

4-2 Spry效果布局整合 271

4-2-1使用Spry效果 272

4-2-2覆盖页面广告的Spry效果应用 275

4-2-3显示/渐隐效果布局整合 277

4-2-4向上/向下遮帘效果布局整合 280

4-2-5向上/向下滑动效果布局整合 285

4-2-6增大/收缩效果布局整合 290

4-3 Spry Widget组件布局整合 293

4-3-1菜单栏Widget布局整合 293

4-3-2选项卡式面板Widget布局整合 298

4-3-3可折叠面板Widget布局整合 301

4-3-4折叠式Widget面板布局整合 304

4-3-5 HTML动态数据显示 307

4-3-6 HTML数据动态布局整合 311

4-4扩展组件布局整合应用 316

4-4-1浏览方式应用［1］：打开完全控制的窗口 319

4-4-2浏览方式应用［2］：快速设置内框架 322

4-4-3浏览方式应用［3］：高级版跳转下拉菜单 324

4-4-4图像播放应用［1］：图片滚动内容与打开图像 327

4-4-5图像播放应用［2］：图片滚动内容替换图像应用 329

4-4-6图像播放应用［3］：广告图片轮播 332

4-4-7图像播放应用［4］：图像播放控制 334

4-4-8图像播放应用［5］：可前后浏览播放多张图像 337

4-4-9图像播放应用［6］：图像浏览切换显示 339

4-4-10图像播放应用［7］：图像与文字内容浏览切换显示 341

4-4-11图像播放应用［8］：动态图像滑动切换显示 344

4-4-12图像播放应用［9］：多张图像动态切换播放 346

4-4-13 AP元素应用［1］：在页面中准确加入自动滚动电子布告栏 348

4-4-14 AP元素应用［2］：互动局部滚动内容区 351

4-4-15 AP元素应用［3］：控制AP元素在浏览器窗口正中央 354

4-4-16 AP元素应用［4］：水平滑动切换显示内容 355

4-4-17 AP元素应用［5］：垂直滑动切换显示内容 359

4-4-18 AP元素应用［6］：动态固定浮动内容 363

4-4-19 AP元素应用［7］：永远在浏览器下方显示的页尾 364

4-4-20 AP元素应用［8］：动态控制AP元素水平垂直移动 366

4-4-21音乐播放应用：随机播放背景音乐与开关设置 369

4-4-22菜单应用［1］：CSS下拉展开按钮菜单 371

4-4-23菜单应用［2］：树状菜单 374

4-5最新扩展组件布局整合应用 378

4-5-1菜单应用［3］：快速创建CSS按钮 378

4-5-2菜单应用［4］：快速创建标签面板 382

4-5-3菜单应用［5］：快速创建多层级树状按钮 384

4-5-4图像播放应用［1］：CSS变形控制图像与AP元素 386

4-5-5图像播放应用［2］：CSS变形控制互动应用 388

4-5-6图像播放应用［3］：动态相片播放器 391

4-5-7图像播放应用［4］：快速创建相片浏览 393

4-5-8图像播放应用［5］：多样半透明相片播放器 396

4-5-9图像播放应用［6］：快速创建互动相簿 399

4-5-10图像播放应用［7］：FLV影片播放器 401

4-5-11图像播放应用［8］：互动FLV影片播放器 403

4-6 Widget Browser （jQuery扩展组件）布局整合应用 405

4-6-1 CSS3：Columns分栏编排页面文字 406

4-6-2 jQuery Tabs标签面板 407

4-6-3 jQuery UI Accordion滑动折叠式面板 410

4-6-4 jqzoom局部放大查看图像 413

4-6-5 jQuery cycle图像自动播放效果 415

4-6-6 LightBox Gallery Widget半透明图片显示 417

4-6-7 jQuery Prettyphoto图像互动浏览 419

4-6-8 Spry Image Slideshow-Basic图像幻灯片播放 420

4-6-9 Spry Image Slideshow with Flimstrip交互式图像切换播放 422

4-6-10 Spry Content Slideshow高级交互式图像切换播放 424

4-6-11 FlexSlider广告图片浏览 426

4-6-12 Dropdown Navigation Bar下滑式按钮 428

4-6-13 Spry Menu Bar 2.0水平弹出菜单 429

4-6-14 Menu Maic彩色圆角弹出菜单 432

4-6-15 YUI Menu Horizontal NavBar水平弹出按钮组 434

4-6-16 jQuery Visualize统计图表 436

4-6-17鱼眼效果按钮 439

4-6-18 Google Maps插入GOOGLE地图 440