网页好设计-Dreamweaver网页布局X特效设计应用大全[李启宏]

介绍:

设计好美观的画面还得要实现成为真正的网站，教你运用Photoshop切割、Dreamweaver编辑与CSS排版设定，完整披露专业网站制作过程，轻松掌握各式网站版面技巧＋CSS排版才是王道！ ■ 网页不只讲究视觉，还必须创造无限变化的可能，无痛学习JavaScript、CSS、jQuery的设计关键，让你在竞争激烈的市场脱颖而出！ ■ 精心筛选最新、最具代表性的特效，均标示所支持的浏览器，可以随心所欲找到自己需要的效果，做出有趣又惊喜的专业网站。 



作译者:

李启宏，现任优势数位设计学苑姿深课程专任讲师。

　　经历：中国台湾资深多媒体网页设计师、易禧科技多媒体网页设计、平面设计课程讲师、“文化大学推广教育部”多媒体设计课程讲师、新视界杂志、dpi设计流行创意杂志专栏作家。

　　专长：多媒体网页设计、平面设计、网页视觉设计整合

　　认证：ACE on Photoshop CS5认证

　　著作：《网页设计惊叹号：Dreamweaver×PHP互动网站直击》、《网页设计惊叹号：Dreamweaver至高的网页特效188招》等。 



目录:

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

Dreamweaver CS6 新增功能介绍 

关于光盘 

定义随书练习网站 

范例动画展示 10

Chapter01 Dreamweaver 中的HTML 与CSS 设置

1-1 HTML 简介与常用的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 表格与框架布局编排技法

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 布局编排整合技巧

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  区块在页面中上下居中 149

3-4-2 布局内容在含有内部 时的上下居中 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 互动效果与布局整合技巧

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 20 水平弹出菜单 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