|
|
|
| 第7课 用Fireworks MX画留言板站点页面 |
| www.study51.com |
| 【字体：大 中 小】【打印】【关闭】 |
|
|
这个教程的上篇到本课就要结束了。说实话，有一种如获重负的感觉，也终于要有一个新的开始了。学习是一个快乐和痛苦的过程。想一想自己又给了10MB多数据新的生命、想一想这么多的收获，学习过程中的付出也真值得。好了，别酸了，还是讨论我们的课程吧……
这次课定位在“画”网页，一个画字给了我们更大的设计空间！网页可以画出来？那当然。大家别忘了，Fireworks可是专业的网页设计工具，而且MX这个版本赋予它更强大的网页设计功能。这次我们就讨论Fireworks MX和Dreamweaver MX结合在一起“画”一个漂亮的网页。
先看这里：留言板站点说明页面。我们就学习这个页面是怎样画出来的。
一、在Fireworks MX中绘制页面（png源文件下载）
1、新建一个画布文档。宽：755像素、高：300像素，透明背景。
2、在画布上绘制页面效果如图1所示。大致包括3部分：页面头图片、表格框、页面尾图片。
图1 图像参考
2、给图像文档进行切片
选择工具栏中网页工具中的切片工具  ，然后拖动鼠标画矩形切片，如图2所示。注意进行多个切片的时候一定要对准确，中间不能有缝隙，实际上在切片的时候系统自动有吸附的功能，只要边线对仔细就行。
图2 切片参考
3、如图2所示，我们把图像一共切片分割成5个区域，绿色显示的①②③④是切片区，第⑤个是无切片区。这里特别要注意③、④两个切片的切割，它们的宽度应一致（10像素）。而且千万不能把①切片区中的边框曲线切进来！（③、④两个切片区和①切片区的连接部位就是一段曲线，应把曲线留到①切片区）
4、导出图像为包含表格代码的HTML文件
执行“文件/导出”命令，则弹出导出对话框，如图3所示。请按照图中所示进行设置。
图3 导出图像切片
二、在Dreamweaver MX中对导出的Fireworks MX HTML文件编辑
1、在Dreamweaver MX中打开导出的Fireworks MX HTML文件。或者在Dreamweaver MX中单击插入栏中的  按钮插入Fireworks HTML。
2、这时你会发现，原来那些切片在这里都是一些表格单元。现在你清楚该怎么做了吧。
3、单击原来的⑤哪个区域，将选中的图片删除，这里是我们输入文字的主要表格单元格。
4、现在是最关键的操作。目前我们在③、④那两个单元格（原来是③④切片区域）看到的图片等于是插入到单元格中的图片。必须把它们转变成单元格的背景图片这样的性质。这样文字单元格随文字的输入而延伸时，③、④单元格也会跟着延伸并不断线了。可以在属性面板完成以上操作，如图4所示。
图4 在属性面板中进行图片性质的转换
大功告成！到此，本教程的上篇就结束了。从下一课开始我们就要讨论留言板站点的后台数据库和程序的设计了，一起继续努力吧。 |
|
|
| 【字体：大 中 小】【打印】【关闭】 |
|
|
|
