《网页设计经典范例》 - 清华大学出版社第五事业部

目    录
目    录
第1章  网页设计基础	1
1.1  网页的设计构思和布局	2
1.1.1  网页知识	2
1.1.2  网页的设计构思	2
1.1.3  网页的布局	5
1.2  Fireworks MX简介	7
1.2.1  Fireworks软件介绍	7
1.2.2  Fireworks MX的新特点和新功能	8
1.3  Dreamweaver MX简介	13
1.3.1  Dreamweaver 软件介绍	13
1.3.2  Dreamweaver MX的新特点和新功能	13
1.4  Flash MX简介	17
1.4.1  Flash软件介绍	17
1.4.2  Flash MX的新特点和新功能	18
第2章  经典实例1：个人主页“静心轩书屋”	29
2.1  实例介绍	30
2.2  网页的布局设计和实现手段	31
2.3  知识点	31
2.4  制作logo(站标)动态图片	31
2.4.1  导入并处理静态图片	32
2.4.2  为图片添加文字	34
2.4.3  保存并导出图片	36
2.5  制作背景图片	36
2.6  制作栏目图片	37
2.6.1  制作栏目图片1	37
2.6.2  制作栏目图片2、3、4	41
2.7  规划和定义站点	43
2.7.1  规划站点	43
2.7.2  定义站点	43
2.8  使用Dreamweaver MX中的布局视图制作网页	44
2.8.1  选择布局视图并插入背景图片	45
2.8.2  插入logo图片	46
2.8.3  制作站点导航栏	47
2.8.4  制作栏目区	49
2.8.5  制作新用户注册区、推荐原创作品区和友情链接区	51
2.8.6  制作版权声明	51
2.8.7  制作鼠标特效	51
2.8.8  保存并预览网页	52
2.9  利用Dreamweaver MX上传网页	53
2.9.1  建立远程站点	53
2.9.2  上传文件	53
第3章  经典实例2：表单网页“用户注册网页”	55
3.1  实例介绍	56
3.2  网页的布局设计和实现手段	57
3.3  知识点	57
3.4  制作旋舞图片	58
3.4.1  为椭圆着色	58
3.4.2  实现动态效果	60
3.5  制作网页宣传图片	61
3.5.1  制作网页宣传图片1	61
3.5.2  制作网页宣传图片2	63
3.5.3  制作网页宣传图片3	65
3.6  制作荧光棒图片	67
3.7  制作矩形图片	70
3.8  利用Dreamweaver MX 制作表单网页	71
3.8.1  制作表单网页1(用户注册页面)	71
3.8.2  制作表单网页2(服务条款页面)	75
3.8.3  制作表单网页3(输入信息页面)	77
第4章  经典实例3：框架网页“精品导读” 	81
4.1  实例介绍	82
4.2  网页的布局设计和实现手段	83
4.3  知识点	84
4.4  制作宣传图片	84
4.4.1  制作宣传图片1	85
4.4.2  制作宣传图片2	85
4.5  制作链接图片和水珠图片	88
4.5.1  制作链接图片1	88
4.5.2  制作链接图片2	89
4.5.3  制作链接图片3	90
4.5.4  制作水珠效果图片	90
4.6  建立框架并制作辅助框架中的网页	92
4.6.1  创建并保存框架和框架集	92
4.6.2  制作顶框架中的网页	93
4.6.3  制作左框架中的网页	94
4.7  制作在主框架中显示的网页	94
4.7.1  制作网页之1	94
4.7.2  制作网页之2	95
4.7.3  制作网页之3	99
第5章  经典实例4：新闻网页“寰球新闻网” 	101
5.1  实例介绍	102
5.2  网页的布局设计和实现手段	102
5.3  知识点	103
5.4  制作logo图片	103
5.5  制作辅助栏目图片	107
5.5.1  制作辅助栏目图片1	107
5.5.2  制作辅助栏目图片2、3和4	108
5.6  制作主栏目图片	109
5.6.1  制作主栏目图片1	109
5.6.2  制作主栏目图片2	112
5.6.3  制作主栏目图片3、4、5	113
5.7  制作版权图片	114
5.8  制作导航图片	115
5.8.1  制作导航图片1	115
5.8.2  制作导航图片2、3、4、5	117
5.9  制作蓝天白云图片	117
5.10  制作条形图片	119
5.11  制作Flash宣传动画	119
5.11.1  制作元件	119
5.11.2  制作bg1层	122
5.11.3  制作board1层	123
5.11.4  制作board2层	124
5.11.5  制作text1层	125
5.11.6  制作text2层	126
5.11.7  制作text3层	127
5.11.8  制作text4层	127
5.11.9  制作bg2层	129
5.11.10  保存并发布动画	129
5.12  利用Dreamweaver MX制作网页	130
5.12.1  制作网页的上部分	131
5.12.2  制作网页的辅助栏目区	132
5.12.3  制作主栏目区	132
第6章  经典实例5：儿童网页“箐箐少儿网”	135
6.1  实例介绍	136
6.2  网页的布局设计和实现手段	137
6.3  知识点	137
6.4  制作logo图片	138
6.5  制作儿童图片	140
6.6  制作小鸡图片	143
6.7  制作特效文字	143
6.7.1  制作动态文字“箐箐大观园”(z1.gif)	143
6.7.2  制作静态文字“最新更新”(a1.gif)	145
6.7.3  制作静态文字“还没有！”(a1s.gif)	146
6.7.4  制作动态文字“童话故事”(a2.gif)	147
6.7.5  制作静态文字“真的很精彩！”(a2s.gif)	148
6.7.6  制作动态文字“儿童歌谣”(a3.gif)	149
6.7.7  制作静态文字“？？？”(a3s.gif)	151
6.7.8  制作静态文字“卡通图库”(a4.gif)	151
6.7.9  制作静态文字“好漂亮啊！”(a4s.gif)	151
6.7.10  制作静态文字“儿童作品”(a5.gif)	151
6.7.11  制作静态图片“您的大作？”(a5s.gif)	152
6.7.12  制作静态图片“谜语故事”(a6.gif)	152
6.7.13  制作静态图片“动动脑筋吧！”(a6s.gif)	153
6.7.14  制作动态文字“免费资源区”(z2.gif)	153
6.7.15  制作动态文字“箐箐画室” (b1.gif)	154
6.7.16  制作动态文字“真好玩！” (b1s.gif)	155
6.7.17  制作动态文字“箐箐别传” (b2.gif)	156
6.7.18  制作静态文字“我。。。” (b2s.gif)	156
6.7.19  制作动态文字“箐箐相册” (b3.gif)	156
6.7.20  制作静态文字“真酷呆了！”(b3s.gif)	157
6.7.21  制作动态文字“箐箐乐园”(b4.gif)	157
6.7.22  制作静态文字“好棒啊！”(b4s.gif)	158
6.7.23  制作静态文字“箐箐信箱”(b5.gif)	159
6.7.24  制作静态文字“交个朋友吧！”(b5s.gif)	159
6.7.25  制作动态文字“箐箐传真”(b6.gif)	160
6.7.26  制作动态文字“灌水了！”(b6s.gif)	161
6.8  制作主页	161
6.9  制作链接页	164
第7章  经典实例6：游戏网页“游戏(GAME)”	167
7.1  实例介绍	168
7.2  网页的布局设计和实现手段	169
7.3  知识点	169
7.4  制作logo图片	169
7.5  制作构成网页框架的静态图片	172
7.5.1  制作构成两侧版块的图片	172
7.5.2  制作中间版块标题图片	173
7.5.3  制作横线和竖线图片	174
7.6  制作具有立体感的相片效果图片	174
7.7  制作网页宣传动画	175
7.7.1  制作元件	175
7.7.2  制作主场景(场景1)	175
7.8  制作鼠标游戏动画(精灵跟随者)	185
7.8.1  制作按钮元件but	185
7.8.2  制作影片剪辑元件Mouse	186
7.8.3  创建影片剪辑元件pipka4	188
7.9  制作电影字幕动画	191
7.9.1  制作Mask Text层	191
7.9.2  制作Gradient Color层	191
7.10  利用Dreamweaver MX制作网页	192
7.10.1  制作网页	192
7.10.2  制作CSS样式	194
7.10.3  为网页添加CSS样式	196

第8章  经典实例7：美食网页“中华精粹饮食网” 	199
8.1  实例介绍	200
8.2  网页的布局设计和实现手段	200
8.3  知识点	201
8.4  制作logo图片	201
8.4.1  制作文字“中华精粹饮食网”的动态效果	201
8.4.2  制作心形图形的动态效果	202
8.4.3  制作文字“福”的动态效果	204
8.5  制作版块图片	205
8.6  制作辅助栏目图片	206
8.6.1  制作辅助栏目图片1	206
8.6.2  制作辅助栏目图片2	207
8.6.3  制作辅助栏目图片3	208
8.6.4  制作辅助栏目图片4	208
8.7  制作主栏目图片	209
8.7.1  制作主栏目图片1	209
8.7.2  制作主栏目图片2、3、4、5、6	210
8.8  制作宣传动画	210
8.8.1  制作图形元件1、2、3、4、5、6、7	210
8.8.2  制作影片剪辑元件q3	211
8.8.3  制作按钮元件s1、s2、s3、s4、s5、s6、s7	212
8.8.4  制作图形元件8	212
8.8.5  制作主场景(场景1)	212
8.9  制作辅助栏目动画1	214
8.9.1  制作图形元件1、2、3、4、5	214
8.9.2  制作图形元件ball	214
8.9.3  制作影片剪辑元件bubble	214
8.9.4  制作主场景(场景1)	215
8.10  制作辅助栏目动画2	219
8.10.1  制作图形元件text1	219
8.10.2  制作主场景(场景1)	219
8.11  制作辅助栏目动画3	221
8.11.1  制作图形元件1、2、3、4、5、6、7、8、9、10	221
8.11.2  制作影片剪辑元件letmov	221
8.11.3  制作主场景(场景1)	230
8.12  制作辅助栏目动画4	230
8.12.1  制作图形元件1Graphic和2Graphic	230
8.12.2  制作影片剪辑元件1Movie和2Movie	231
8.12.3  制作按钮元件1Button和2Button	232
8.12.4  制作主场景(场景1)	232
8.13  利用Dreamweaver MX制作网页	232
8.13.1  制作网页的上部分	232
8.13.2  制作网页的左侧和右侧版块	234
8.13.3  制作网页中间的主栏目版块	235
8.13.4  制作网页的友情链接和版权声明	235
第9章  经典实例8：时尚网页“时尚人生网” 	237
9.1  实例介绍	238
9.2  网页的布局设计和实现手段	238
9.3  知识点	239
9.4  制作logo图片	239
9.5  制作导航图片	240
9.6  制作栏目图片	240
9.7  制作闪光文字效果	241
9.8  制作爆炸字效果	245
9.9  制作菜单动画	247
9.9.1  制作小球	248
9.9.2  制作小球运动的效果	248
9.9.3  制作菜单按钮	250
9.9.4  制作主场景	250
9.10  制作网页	252
第10章  经典实例9：动漫网页“逍遥动漫网” 	255
10.1  实例介绍	256
10.2  网页的布局设计和实现手段	257
10.3  知识点	257
10.4  制作logo图片	258
10.5  制作动画故事：龟兔赛跑	258
10.5.1  制作元件	259
10.5.2  制作场景	264
10.6  制作动画故事：圣诞老人	269
10.6.1  制作元件	270
10.6.2  制作主场景(场景1)	271
10.7  制作网页	272
第11章  经典实例10：学校网页“华宇大学网页”	275
11.1  实例介绍	276
11.2  网页的布局设计和实现手段	277
11.3  知识点	277
11.4  制作logo图片	277
11.5  制作宣传图片	278
11.6  制作链接图片ENGLISH	280
11.7  制作片头动画	281
11.7.1  制作彩色闪光气泡效果	281
11.7.2  制作主文字沿纵向拉伸和压缩效果	287
11.7.3  制作彩色闪光气泡的随机出现效果	290
11.7.4  制作主场景(场景1)	291
11.8  制作栏目动画	292
11.8.1  制作滚动窗口	292
11.8.2  制作动画中要播放的图片	296
11.8.3  制作动画下方的按钮	298
11.8.4  制作弹出式菜单	298
11.8.5  制作主场景(场景1)	302
11.9  利用Dreamweaver MX制作网页	312
11.9.1  实现网页的自动跳转	312
11.9.2  制作主页	312
第12章  经典实例11：门户站点网页“华夏家园” 	315
12.1  实例介绍	316
12.2  网页的布局设计和实现手段	316
12.3  知识点	318
12.4  制作网页素材	318
12.4.1  制作logo图片	318
12.4.2  制作庆祝国庆动画	322
12.4.3  制作自由移动的浮动广告动画	327
12.5  用Dreamweaver MX制作网页	330
12.5.1  制作网页的上部分	330
12.5.2  制作表格的中间栏目部分	331
12.5.3  制作网页的尾部	332
12.5.4  制作弹出式子窗口	333
12.5.5  制作不随屏幕滚动而改变位置的“固定广告”	334
12.5.6  制作自由移动的浮动广告	336
第13章  经典实例12：影视音乐网页“MediaRays(媒体之光)”	339
13.1  实例介绍	340
13.2  网页的布局设计和实现手段	341
13.3  知识点	341
13.4  制作场景(load)	341
13.4.1  制作影片剪辑元件grid1	342
13.4.2  制作影片剪辑元件percent	345
13.4.3  制作场景(load)的过程	345
13.5  制作场景(场景1)的Layer 1层	346
13.5.1  制作影片剪辑元件f	346
13.5.2  制作场景(场景1)的Layer 1层的过程	348
13.6  制作场景(场景1)的Layer 2层	348
13.6.1  制作图形元件bar	348
13.6.2  制作影片剪辑元件1	349
13.6.3  制作影片剪辑元件vol	349
13.6.4  制作场景(场景1)的Layer 2层的过程	353
13.7  制作场景(场景1)的Layer 3层	353
13.7.1  制作图形元件1	353
13.7.2  制作图形元件Symbol 2	353
13.7.3  制作场景(场景1)的Layer 3层的过程	354
13.8  制作场景(场景1)的Layer 4层	355
13.8.1  制作影片剪辑元件but_Big Yellow Over	355
13.8.2  制作按钮元件but_Big Purple Button	356
13.8.3  制作影片剪辑元件twinkle	357
13.8.4  制作按钮元件ABOUT、Lin、WEB、RES、WEB1	359
13.8.5  制作图形元件s	360
13.8.6  制作影片剪辑元件ss4	360
13.8.7  制作图形元件links	361
13.8.8  制作影片剪辑元件abo	362
13.8.9  制作图形元件web1	363
13.8.10  制作图形元件con	363
13.8.11  制作影片剪辑元件12	363
13.8.12  制作场景(场景1)的Layer 4层的过程	368
13.9  制作场景(场景1)的Layer 5层	369
13.9.1  制作影片剪辑元件ZOOM	369
13.9.2  制作按钮元件AB、GAM、SIGN1、but_Toons Button、button	370
13.9.3  影片剪辑元件main	372
13.9.4  制作场景(场景1)的Layer 5层的过程	373
13.10  制作场景(场景1)的Layer 6和Layer 7层	373
13.10.1  制作图形元件img_estrela_amarela	374
13.10.2  制作影片剪辑元件mc_estrelas_amarela	374
13.10.3  影片剪辑元件mc_estrelas_replicada	375
13.10.4  制作场景(场景1)的Layer 6层	376
13.10.5  制作场景(场景1)的Layer 7层	377
第14章  经典实例13：链接网页“电影简介页面” 	379
14.1  实例介绍	380
14.2  网页的布局设计和实现手段	381
14.3  知识点	381
14.4  制作元件	381
14.4.1  制作影片剪辑元件lettera	382
14.4.2  制作按钮元件but	382
14.4.3  制作影片剪辑元件Sbolo 3	382
14.4.4  制作按钮 Sbolo 2	383
14.4.5  制作影片剪辑元件Sbolo 1	384
14.5  制作主场景(场景1)	387
14.5.1  制作Layer 1层	387
14.5.2  制作Layer 2、Layer 3、Layer 4、Layer 5、Layer 6层	388
14.5.3  制作Layer 7层	388
14.5.4  制作Layer 8层	389
14.5.5  制作Layer 9层	389
14.5.6  制作Layer 10层	390