DW网页设计—第15章了解制作页面的工具材料.ppt

第15章 了解制作页面的工具 制作页面最基本的工具就是记事本，如果设计者愿意，完全可以用记事本做出任何页面。事实上，很多人也是这样做的。但是为了提高设计者的工作效率，出现了很多编辑页面的软件，最闻名遐迩也是运用最为广泛的是Adobe公司的一系列产品，本章将介绍这些主流的网页编辑工具。 15.1 可视化编辑页面工具：DREAMWEAVER Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一体的所见即所得网页编辑器。强大全面的功能使之受到许多人的喜爱，利用它可以提高制作页面的工作效率。 Dreamweaver软件的历史说来已久。在早年版本的Dreamweaver中，制作页面虽然已经是基于CSS样式表的布局，但是考虑到一些老用户，而且几年前的设计页面思路并没有如今天一样从“HTML制作框架、CSS样式表来修饰，JavaScript来发挥页面的动态效果”这样的角度出发，所以多少还是有照顾早期表格框架来布局页面的思路。 15.1.1 了解DREAMWEAVER的界面 当使用者第一次打开Dreamweaver的时候，软件会要求使用者选择“创建一个新页面”。这时软件会给出多种不同类型页面的选择项，如PHP、HTML、XML等。事实上，对于初学者来说，设计一个完整的页面，可以从选择HTML开始。 15.1.2 DREAMWEAVER的菜单 和大部分平时所见的软件一样，就像汽车总是有些基本的特征，比如4个轮子、车头车尾总是不会变的。Dreamweaver界面顶部是菜单栏，在大部分软件中都是这样。 15.2 神奇的“美工笔”：PHOTOSHOP 对于前端页面开发者来说，当拥有布局页面能力的同时，最好能拥有一些编辑图像的能力是更理想的。在诸多图像编辑的软件中，Photoshop的名声响彻业界，设计者常用的一种方法是在Photoshop中做好页面的设计图，然后放到Dreamweaver中进行编辑。 15.2.1 了解PHOTOSHOP的界面 由于Photoshop和Dreamweaver现在同属于Adobe公司。所以它们在界面上样式十分类似，如下图所示。在笔者写本书的时候，Photoshop最新版本是Photoshop CS6。 15.2.2 PHOTOSHOP的实用技巧 使用Photoshop时候，可以通过工具来完成大部分操作。而在Photoshop中，这些主要的工具栏放在整个软件界面的左侧，如下图所示。 15.2.2 PHOTOSHOP的实用技巧 通过上图中工具栏中的工具，可以对图像进行一些基本的简单操作。这里介绍一种很实用的技巧——截取图像的技巧。下面先看如下图所示的一幅图像。 15.2.2 PHOTOSHOP的实用技巧 首先，在Photoshop中打开这张图像。为了截取这部分图像，可以使用几种工具。在Photoshop工具栏中，1号位置的工具是选择工具，它可以设置成矩形选框、椭圆形选框等。当选择好局部图像之后，可以通过剪切或者复制这部分图像，然后放在新的图层中，最后选择保存这个图层就可以了，如下图所示。 15.2.2 PHOTOSHOP的实用技巧 此外，还有一种更直接的方法，使用工具栏中3号位置的截取工具，它可以直接将画布截取出来，如下图所示。 15.3 网页中的动画：FLASH Flash是一种文件，这里要提到的也是同属于Adobe公司的一款软件。当然，它的作用就是用来制作Flash文件的工具。但由于现今Flash文件的应用范围很广泛，所以Flash软件也可以说不仅是制作简单动画效果的Flash文件，同时也是可以制作出精美动态页面的软件。 15.3.1 认识FLASH文件 Flash最初给人的印象就是比GIF格式更漂亮一些的动画。Flash目前是最为流行的一种矢量动画格式文件，其优点在于使用向量运算﹙Vector Graphics﹚的方式，产生出来的影片占用存储空间较小。Flash文件的格式后缀名是.swf，如果需要在页面中加载Flash文件，则需要有特殊的播放器支持。 15.3.1 认识FLASH文件 后缀名为.fla的文件：如果制作一个Flash动画，只能通过Flash的源文件。源文件的后缀名是.fla，在Flash软件中可以编辑这种格式的文件。由于浏览器并不支持这种格式，所以.fla格式的文件是不能放入页面中使用的。 后缀名为.swf的文件：而放入到页面中的Flash文件，它的格式后缀名是.swf，这是将.fla格式的文件经过压缩得到的一种小容量的Flash文件格式。 15.3.2 在页面中放入FLASH文件 在页面中放入Flash文件不会太困难。从某个角度来说，它的原理和放入一张图像，一段GIF动画是一样的。所不同的是，如果在页面中放入Flash文件，用户却