网页制作最佳拍档四合一完全教程PDF电子书下载

第1章　网页设计专业指导 1

1.1　网页设计行业概述 1

1.1.1　网页设计职业发展的推动力 1

1.1.2　网页市场的发展 2

1.2　网页设计的两种类型 2

1.2.1　网页的整体筹划 3

1.2.2　网页的定位 3

1.3　网页的3种基本功能元素 6

1.3.1　站标设计要点 6

1.3.2　导航栏设计要点 7

1.3.3　广告条设计要点 8

1.4　网页的基本组成元素 10

1.4.1　网页中的文本 10

1.4.2　网页中的图像 11

1.4.3　网页中的动画 12

1.5　网页中的色彩搭配 12

1.5.1　网页色彩搭配的原则 13

1.5.2　网页色彩搭配的技巧 13

1.5.3　网页要素色彩的搭配 15

1.5.4　网页中色彩的心理效应 15

1.6　网页设计的8点基本原则 17

1.7　网站的优化、测试与发布 19

1.7.1　优化网站的8种方式 19

1.7.2　测试网站的5种方式 20

1.7.3　发布网站的具体步骤 21

1.8　网站的上传 22

1.8.1　使用IE直接上传 22

1.8.2　使用FTP工具上传 22

1.8.3　使用Dreamweaver上传 23

1.8.4　查看、维护与更新网页 24

第2章　网页制作软件入门 26

2.1　Flash 8在网页设计中的应用 26

2.1.1　Flash 8的工作界面 26

2.1.2　常用绘图工具 27

2.1.3　重要面板 30

2.1.4　重要元件 33

2.1.5　帧 34

2.2　Fireworks 8在网页设计中的应用 35

2.2.1　Fireworks 8的工作界面 35

2.2.2　蒙版的应用 35

2.2.3　重要面板 38

2.2.4　帧的应用 39

2.2.5　常用滤镜 42

2.3　Dreamweaver 8在网页设计中的应用 44

2.3.1　Dreamweaver 8的工作界面 44

2.3.2　表格的应用 44

2.3.3　层的应用 47

2.3.4　框架的应用 50

2.3.5　表单的应用 53

2.4　Photoshop CS3在网页设计中的应用 55

2.4.1　Photoshop CS3的工作界面 55

2.4.2　常用工具 55

2.4.3　重要面板 59

2.4.4　常用图层样式 61

第3章　文字动画 64

3.1　跳动字——心随我动 64

3.1.1　效果欣赏 64

3.1.2　焦点播报 64

3.1.3　作品规格——460像素×380像素 64

3.1.4　实战大步1——制作湖面背景 64

3.1.5　实战大步2——制作跳动文字 68

3.1.6　实战大步3——合成影片 70

3.1.7　范例攻略小结 71

3.2　滚动字——清凉夏日 71

3.2.1　效果欣赏 71

3.2.2　焦点播报 71

3.2.3　作品规格——500像素×400像素 72

3.2.4　实战大步1——制作广告语效果 72

3.2.5　实战大步2——制作滚动字效果 75

3.2.6　实战大步3——合成影片 76

3.2.7　范例攻略小结 77

3.3　晃动字——圣诞快乐 77

3.3.1　效果欣赏 77

3.3.2　焦点播报 77

3.3.3　作品规格——460像素×340像素 78

3.3.4　实战大步1——制作广告背景 78

3.3.5　实战大步2——制作晃动字效果 79

3.3.6　实战大步3——合成影片 82

3.3.7　范例攻略小结 83

3.4　遮罩字——星城世家 83

3.4.1　效果欣赏 83

3.4.2　焦点播报 83

3.4.3　作品规格——360像素×440像素 84

3.4.4　实战大步1——制作广告背景内容 84

3.4.5　实战大步2——制作遮罩文字效果 86

3.4.6　实战大步3——合成影片剪辑 89

3.4.7　范例攻略小结 89

第4章　网站LOGO动画 90

4.1　房地产网站LOGO——美典集团 90

4.1.1　效果欣赏 90

4.1.2　焦点播报 90

4.1.3　作品规格——480像素×240像素 90

4.1.4　实战大步1——置入LOGO内容 90

4.1.5　实战大步2——制作动画效果 92

4.1.6　范例攻略小结 94

4.2　数码网站LOGO——海星数码 94

4.2.1　效果欣赏 94

4.2.2　焦点播报 95

4.2.3　作品规格——352像素×124像素 95

4.2.4　实战大步1——绘制LOGO标志 95

4.2.5　实战大步2——创建LOGO动画 97

4.2.6　范例攻略小结 99

4.3　医院网站LOGO——美康集团 99

4.3.1　效果欣赏 99

4.3.2　焦点播报 99

4.3.3　作品规格——240像素×180像素 99

4.3.4　实战大步1——导入标志素材 100

4.3.5　实战大步2——制作标志动画 101

4.3.6　范例攻略小结 103

4.4　手机网站LOGO——博能手机 103

4.4.1　效果欣赏 104

4.4.2　焦点播报 104

4.4.3　作品规格——240像素×180像素 104

4.4.4　实战大步1——绘制标识形状 104

4.4.5　实战大步2——制作旋转动画 106

4.4.6　范例攻略小结 108

第5章　网络广告 109

5.1　擎天柱广告——摄像机广告 109

5.1.1　效果欣赏 109

5.1.2　焦点播报 109

5.1.3　作品规格——212像素×350像素 109

5.1.4　实战大步1——制作广告的背景内容 110

5.1.5　实战大步2——制作文字和数码动画 112

5.1.6　实战大步3——合成影片 117

5.1.7　范例攻略小结 118

5.2　画中画广告——房地产广告 118

5.2.1　效果欣赏 118

5.2.2　焦点播报 118

5.2.3　作品规格——720像素×550像素 119

5.2.4　实战大步1——制作广告背景元件 119

5.2.5　实战大步2——制作图片动画效果 120

5.2.6　实战大步3——合成影片 124

5.2.7　范例攻略小结 125

5.3　大屏幕广告——汽车广告 125

5.3.1　效果欣赏 125

5.3.2　焦点播报 126

5.3.3　作品规格——800像素×500像素 126

5.3.4　实战大步1——导入广告背景素材 126

5.3.5　实战大步2——创建广告影片 127

5.3.6　实战大步3——合成影片 130

5.3.7　范例攻略小结 132

5.4　Banner广告——手机广告 132

5.4.1　效果欣赏 132

5.4.2　焦点播报 132

5.4.3　作品规格——468像素×60像素 132

5.4.4　实战大步1——导入元件素材 132

5.4.5　实战大步2——制作手机动画 133

5.4.6　实战大步3——合成影片 135

5.4.7　范例攻略小结 137

第6章　按钮效果 138

6.1　翡翠按钮 138

6.1.1　效果欣赏 138

6.1.2　焦点播报 138

6.1.3　作品规格——300像素×150像素 138

6.1.4　实战大步1——绘制圆角矩形 138

6.1.5　实战大步2——制作翡翠按钮 139

6.1.6　范例攻略小结 142

6.2　水晶按钮 142

6.2.1　效果欣赏 142

6.2.2　焦点播报 142

6.2.3　作品规格——200像素×150像素 142

6.2.4　实战大步1——绘制按钮形状 143

6.2.5　实战大步2——制作按钮阴影 144

6.2.6　范例攻略小结 145

6.3　导航按钮 145

6.3.1　效果欣赏 145

6.3.2　焦点播报 145

6.3.3　作品规格——300像素×100像素 145

6.3.4　实战大步1——编辑按钮图形 145

6.3.5　实战大步2——绘制搜索图形 147

6.3.6　范例攻略小结 148

6.4　图形按钮 148

6.4.1　效果欣赏 148

6.4.2　焦点播报 148

6.4.3　作品规格——300像素×150像素 148

6.4.4　实战大步1——绘制按钮元素 148

6.4.5　实战大步2——组合按钮元素 149

6.4.6　范例攻略小结 150

第7章　文字效果 151

7.1　立体文字 151

7.1.1　效果欣赏 151

7.1.2　焦点播报 151

7.1.3　作品规格——400像素×120像素 151

7.1.4　实战大步1——编辑特效文字 151

7.1.5　实战大步2——添加滤镜效果 152

7.1.6　范例攻略小结 154

7.2　旋转文字 154

7.2.1　效果欣赏 154

7.2.2　焦点播报 155

7.2.3　作品规格——400像素×300像素 155

7.2.4　实战大步1——输入渐变文字 155

7.2.5　实战大步2——编辑文字动画 156

7.2.6　范例攻略小结 158

7.3　遮罩文字 158

7.3.1　效果欣赏 158

7.3.2　焦点播报 158

7.3.3　作品规格——720像素×160像素 159

7.3.4　实战大步1——设置图片动画 159

7.3.5　实战大步2——设置蒙版动画 160

7.3.6　范例攻略小结 161

7.4　残影文字 161

7.4.1　效果欣赏 162

7.4.2　焦点播报 162

7.4.3　作品规格——350像素×200像素 162

7.4.4　实战大步1——创建动画元件 162

7.4.5　实战大步2——编辑各帧动画 163

7.4.6　范例攻略小结 165

第8章　图片效果 166

8.1　邮票效果 166

8.1.1　效果欣赏 166

8.1.2　焦点播报 166

8.1.3　作品规格——400像素×300像素 166

8.1.4　实战大步1——绘制邮票边框 166

8.1.5　实战大步2——编辑邮票内容 168

8.1.6　范例攻略小结 169

8.2　广告效果 169

8.2.1　效果欣赏 170

8.2.2　焦点播报 170

8.2.3　作品规格——600像素×400像素 170

8.2.4　实战大步1——绘制广告的背景和音乐条 170

8.2.5　实战大步2——设计广告文字和图片内容 172

8.2.6　范例攻略小结 174

8.3　滚动效果 174

8.3.1　效果欣赏 174

8.3.2　焦点播报 174

8.3.3　作品规格——720像素×108像素 174

8.3.4　实战大步1——绘制动画胶片 174

8.3.5　实战大步2——编辑动画元件 175

8.3.6　范例攻略小结 177

8.4　雨点效果 177

8.4.1　效果欣赏 177

8.4.2　焦点播报 177

8.4.3　作品规格——400像素×300像素 177

8.4.4　实战大步1——绘制雨点效果 178

8.4.5　实战大步2——制作下雨效果 179

8.4.6　范例攻略小结 181

第9章　表单效果 182

9.1　E-mail留言表单 182

9.1.1　效果欣赏 182

9.1.2　焦点播报 182

9.1.3　作品规格——768像素×377像素 183

9.1.4　实战大步1——输入E-mail留言表单内容 183

9.1.5　实战大步2——插入和设置表单属性 184

9.1.6　范例攻略小结 186

9.2　注册表单 186

9.2.1　效果欣赏 186

9.2.2　焦点播报 187

9.2.3　作品规格——768像素×403像素 187

9.2.4　实战大步1——编辑注册表单布局 187

9.2.5　实战大步2——插入注册表单元素 188

9.2.6　范例攻略小结 191

9.3　信息反馈表单 191

9.3.1　效果欣赏 191

9.3.2　焦点播报 192

9.3.3　作品规格——768像素×555像素 192

9.3.4　实战大步1——输入和编辑文本内容 192

9.3.5　实战大步2——插入并编辑表单 194

9.3.6　范例攻略小结 196

9.4　网站调查表单 197

9.4.1　效果欣赏 197

9.4.2　焦点播报 197

9.4.3　作品规格——768像素×638像素 197

9.4.4　实战大步1——编辑调查表单内容 197

9.4.5　实战大步2——插入调查表单元素 199

9.4.6　范例攻略小结 202

第10章　导航条 203

10.1　水平导航 203

10.1.1　效果欣赏 203

10.1.2　焦点播报 203

10.1.3　作品规格——768像素×585像素 203

10.1.4　实战大步1——设计网页图片内容 204

10.1.5　实战大步2——制作网页文字导航 206

10.1.6　范例攻略小结 207

10.2　动态导航 207

10.2.1　效果欣赏 207

10.2.2　焦点播报 207

10.2.3　作品规格——770像素×436像素 207

10.2.4　实战大步1——设计动态导航布局 207

10.2.5　实战大步2——制作导航的动态效果 209

10.2.6　范例攻略小结 212

10.3　按钮导航 213

10.3.1　效果欣赏 213

10.3.2　焦点播报 213

10.3.3　作品规格——768像素×500像素 213

10.3.4　实战大步1——设计按钮导航布局 213

10.3.5　实战大步2——制作鼠标经过图像导航 215

10.3.6　范例攻略小结 217

10.4　竖直导航 217

10.4.1　效果欣赏 217

10.4.2　焦点播报 217

10.4.3　作品规格——781像素×535像素 218

10.4.4　实战大步1——设计竖直导航布局 218

10.4.5　实战大步2——制作竖直导航条效果 220

10.4.6　范例攻略小结 222

第11章　网页框架 223

11.1　上下型框架——建筑网页 223

11.1.1　效果欣赏 223

11.1.2　焦点播报 223

11.1.3　作品规格——768像素×612像素 224

11.1.4　实战大步1——制作上下型框架布局 224

11.1.5　实战大步2——制作建筑类网页效果 226

11.1.6　范例攻略小结 228

11.2　左T型框架——学院网页 229

11.2.1　效果欣赏 229

11.2.2　焦点播报 229

11.2.3　作品规格——768像素×512像素 229

11.2.4　实战大步1——制作左T型框架布局 229

11.2.5　实战大步2——制作学院网站导航 232

11.2.6　范例攻略小结 235

11.3　右T型框架——化妆品网页 235

11.3.1　效果欣赏 235

11.3.2　焦点播报 236

11.3.3　作品规格——768像素×520像素 236

11.3.4　实战大步1——制作右T型框架布局 236

11.3.5　实战大步2——制作右框架导航效果 238

11.3.6　范例攻略小结 242

11.4　左右型框架——服饰网页 243

11.4.1　效果欣赏 243

11.4.2　焦点播报 243

11.4.3　作品规格——772像素×570像素 243

11.4.4　实战大步1——制作左右型框架布局 243

11.4.5　实战大步2——制作左框架的导航效果 245

11.4.6　范例攻略小结 249

第12章　网站导航 250

12.1　变色导航 250

12.1.1　效果欣赏 250

12.1.2　焦点播报 250

12.1.3　作品规格——1536像素×300像素 250

12.1.4　实战大步1——绘制导航按钮 250

12.1.5　实战大步2——制作变色导航 253

12.1.6　范例攻略小结 254

12.2　七彩导航 254

12.2.1　效果欣赏 254

12.2.2　焦点播报 255

12.2.3　作品规格——1350像素×166像素 255

12.2.4　实战大步1——绘制渐变导航按钮 255

12.2.5　实战大步2——制作七彩导航 256

12.2.6　范例攻略小结 257

12.3　图像导航 258

12.3.1　效果欣赏 258

12.3.2　焦点播报 258

12.3.3　作品规格——1536像素×300像素 258

12.3.4　实战大步1——绘制导航背景图像 258

12.3.5　实战大步2——制作导航条的内容 261

12.3.6　范例攻略小结 261

12.4　透明按钮导航 261

12.4.1　效果欣赏 261

12.4.2　焦点播报 262

12.4.3　作品规格——1350像素×268像素 262

12.4.4　实战大步1——绘制透明按钮 262

12.4.5　实战大步2——制作按钮导航 265

12.4.6　范例攻略小结 266

第13章　企业LOGO 267

13.1　海航物流LOGO 267

13.1.1　效果欣赏 267

13.1.2　焦点播报 267

13.1.3　作品规格——300像素×225像素 267

13.1.4　实战大步1——勾画海航标识 267

13.1.5　实战大步2——制作标识名称 270

13.1.6　范例攻略小结 271

13.2　思奈尔LOGO 271

13.2.1　效果欣赏 271

13.2.2　焦点播报 271

13.2.3　作品规格——360像素×180像素 272

13.2.4　实战大步1——绘制思奈尔标识 272

13.2.5　实战大步2——制作水滴效果 272

13.2.6　范例攻略小结 275

13.3　隆鑫科技LOGO 275

13.3.1　效果欣赏 275

13.3.2　焦点播报 275

13.3.3　作品规格——360像素×270像素 275

13.3.4　实战大步1——制作隆鑫标识 276

13.3.5　实战大步2——绘制艺术名称 277

13.3.6　范例攻略小结 278

13.4　网络视听网LOGO 278

13.4.1　效果欣赏 278

13.4.2　焦点播报 279

13.4.3　作品规格——540像素×405像素 279

13.4.4　实战大步1——勾画视听网标识 279

13.4.5　实战大步2——编辑LOGO内容 282

13.4.6　范例攻略小结 283

第14章　Banner广告 284

14.1　Banner广告——酷书吧 284

14.1.1　效果欣赏 284

14.1.2　焦点播报 284

14.1.3　作品规格——702像素×120像素 284

14.1.4　实战大步1——设计酷书吧广告背景 284

14.1.5　实战大步2——设计酷书吧广告内容 286

14.1.6　范例攻略小结 288

14.2　Banner广告——购物中心 288

14.2.1　效果欣赏 288

14.2.2　焦点播报 288

14.2.3　作品规格——468像素×120像素 289

14.2.4　实战大步1——设计购物中心广告背景 289

14.2.5　实战大步2——设计广告宣传内容 291

14.2.6　范例攻略小结 292

14.3　Banner广告——首饰情缘 292

14.3.1　效果欣赏 292

14.3.2　焦点播报 292

14.3.3　作品规格——768像素×250像素 292

14.3.4　实战大步1——设计广告星闪效果 292

14.3.5　实战大步2——设计广告主体内容 295

14.3.6　范例攻略小结 296

14.4　Banner广告——化妆品 297

14.4.1　效果欣赏 297

14.4.2　焦点播报 297

14.4.3　作品规格——650像素×250像素 297

14.4.4　实战大步1——设计广告宣传主体 297

14.4.5　实战大步2——设计广告宣传语 300

14.4.6　范例攻略小结 300

第15章　四剑合璧——龙城图书网 301

15.1　使用Flash制作两组动态广告条幅 301

15.1.1　效果欣赏 301

15.1.2　焦点播报 302

15.1.3　作品规格——584像素×150像素 302

15.1.4　制作动态条幅一：龙城图书网有空来看看 302

15.1.5　制作动态条幅二：以市场为导向以读者为中心 304

15.2　使用Flash制作三组特色文字动画 306

15.2.1　效果欣赏 307

15.2.2　焦点播报 307

15.2.3　作品规格——432像素×25像素 307

15.2.4　制作文字动画一：从右至左滚动式 307

15.2.5　制作文字动画二：左右来回滚动式 308

15.2.6　制作文字动画三：旋转并向两侧移动式 308

15.3　使用Fireworks制作一组滚动式动态图片 309

15.3.1　效果欣赏 309

15.3.2　焦点播报 310

15.3.3　作品规格——588像素×140像素 310

15.3.4　实战大步1——导入图片素材 310

15.3.5　实战大步2——编辑动画元件 310

15.4　使用Fireworks制作一组简易导航图标 311

15.4.1　效果欣赏 311

15.4.2　焦点播报 312

15.4.3　作品规格——152像素×24像素 312

15.4.4　实战大步——制作导航图标1 312

15.4.5　实战大步2——制作导航图标2 313

15.5　使用Photoshop制作企业网站LOGO 313

15.5.1　效果欣赏 313

15.5.2　焦点播报 314

15.5.3　作品规格——200像素×150像素 314

15.5.4　实战大步1——绘制图像 314

15.5.5　实战大步2——输入文本 315

15.6　使用Photoshop制作一组水晶导航按钮 316

15.6.1　效果欣赏 316

15.6.2　焦点播报 316

15.6.3　作品规格——96像素×33像素 316

15.6.4　实战大步1——制作导航按钮1 316

15.6.5　实战大步2——制作导航按钮2 318

15.7　使用Photoshop制作一组导航图片 318

15.7.1　效果欣赏 318

15.7.2　焦点播报 319

15.7.3　作品规格——196像素×484像素 319

15.7.4　实战大步1——制作导航图片 319

15.7.5　实战大步2——输入文本内容 320

15.8　使用Dreamweaver制作网页 321

15.8.1　效果欣赏 321

15.8.2　焦点播报 321

15.8.3　作品规格——789像素×789像素 321

15.8.4　主页布局 322

15.8.5　制作页眉区 322

15.8.6　制作导航区 323

15.8.7　制作内容区 327

15.8.8　制作版权区 328

15.8.9　制作子页 328

15.8.10　设置链接 331

15.9　网页完善与测试 332

15.9.1　网页的完善 332

15.9.2　兼容性测试 332

15.9.3　链接性测试 333