《dw网页设计—第15章了解制作页面的工具》由会员分享，可在线阅读，更多相关《dw网页设计—第15章了解制作页面的工具（21页珍藏版）》请在金锄头文库上搜索。
1、第15章 了解制作页面的工具,制作页面最基本的工具就是记事本，如果设计者愿意，完全可以用记事本做出任何页面。事实上，很多人也是这样做的。但是为了提高设计者的工作效率，出现了很多编辑页面的软件，最闻名遐迩也是运用最为广泛的是Adobe公司的一系列产品，本章将介绍这些主流的网页编辑工具。,15.1 可视化编辑页面工具：Dreamweaver,Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一体的所见即所得网页编辑器。强大全面的功能使之受到许多人的喜爱，利用它可以提高制作页面的工作效率。 Dreamweaver软件的历史说来已久。在早年版本的Dreamweaver中，
2、制作页面虽然已经是基于CSS样式表的布局，但是考虑到一些老用户，而且几年前的设计页面思路并没有如今天一样从“HTML制作框架、CSS样式表来修饰，JavaScript来发挥页面的动态效果”这样的角度出发，所以多少还是有照顾早期表格框架来布局页面的思路。,15.1.1 了解Dreamweaver的界面,当使用者第一次打开Dreamweaver的时候，软件会要求使用者选择“创建一个新页面”。这时软件会给出多种不同类型页面的选择项，如PHP、HTML、XML等。事实上，对于初学者来说，设计一个完整的页面，可以从选择HTML开始。,15.1.2 Dreamweaver的菜单,和大部分平时所见的软件一样
3、，就像汽车总是有些基本的特征，比如4个轮子、车头车尾总是不会变的。Dreamweaver界面顶部是菜单栏，在大部分软件中都是这样。,15.2 神奇的“美工笔”：Photoshop,对于前端页面开发者来说，当拥有布局页面能力的同时，最好能拥有一些编辑图像的能力是更理想的。在诸多图像编辑的软件中，Photoshop的名声响彻业界，设计者常用的一种方法是在Photoshop中做好页面的设计图，然后放到Dreamweaver中进行编辑。,15.2.1 了解Photoshop的界面,由于Photoshop和Dreamweaver现在同属于Adobe公司。所以它们在界面上样式十分类似，如下图所示。在笔者写
4、本书的时候，Photoshop最新版本是Photoshop CS6。,15.2.2 Photoshop的实用技巧,使用Photoshop时候，可以通过工具来完成大部分操作。而在Photoshop中，这些主要的工具栏放在整个软件界面的左侧，如下图所示。,15.2.2 Photoshop的实用技巧,通过上图中工具栏中的工具，可以对图像进行一些基本的简单操作。这里介绍一种很实用的技巧截取图像的技巧。下面先看如下图所示的一幅图像。,15.2.2 Photoshop的实用技巧,首先，在Photoshop中打开这张图像。为了截取这部分图像，可以使用几种工具。在Photoshop工具栏中，1号位置的工具是选
5、择工具，它可以设置成矩形选框、椭圆形选框等。当选择好局部图像之后，可以通过剪切或者复制这部分图像，然后放在新的图层中，最后选择保存这个图层就可以了，如下图所示。,15.2.2 Photoshop的实用技巧,此外，还有一种更直接的方法，使用工具栏中3号位置的截取工具，它可以直接将画布截取出来，如下图所示。,15.3 网页中的动画：Flash,Flash是一种文件，这里要提到的也是同属于Adobe公司的一款软件。当然，它的作用就是用来制作Flash文件的工具。但由于现今Flash文件的应用范围很广泛，所以Flash软件也可以说不仅是制作简单动画效果的Flash文件，同时也是可以制作出精美动态页面的
6、软件。,15.3.1 认识Flash文件,Flash最初给人的印象就是比GIF格式更漂亮一些的动画。Flash目前是最为流行的一种矢量动画格式文件，其优点在于使用向量运算Vector Graphics的方式，产生出来的影片占用存储空间较小。Flash文件的格式后缀名是.swf，如果需要在页面中加载Flash文件，则需要有特殊的播放器支持。,15.3.1 认识Flash文件,后缀名为.fla的文件：如果制作一个Flash动画，只能通过Flash的源文件。源文件的后缀名是.fla，在Flash软件中可以编辑这种格式的文件。由于浏览器并不支持这种格式，所以.fla格式的文件是不能放入页面中使用的。
7、后缀名为.swf的文件：而放入到页面中的Flash文件，它的格式后缀名是.swf，这是将.fla格式的文件经过压缩得到的一种小容量的Flash文件格式。,15.3.2 在页面中放入Flash文件,在页面中放入Flash文件不会太困难。从某个角度来说，它的原理和放入一张图像，一段GIF动画是一样的。所不同的是，如果在页面中放入Flash文件，用户却未必能够看到所希望的结果，原因在于Flash文件需要特定的播放器来加载文件，如Flash Player。为此，可以通过一个简单的JavaScript程序来令系统下载，使浏览器支持Flash文件的插件，如下代码所示。 ,15.3.2 在页面中放入Flas
8、h文件,当设置为不同的name属性时，可以触发不同的作用，如下表所示。,15.3.3 制作Flash的软件,之前已经见识了同属于Adobe公司的Dreamweaver软件和Photoshop软件，前者用来制作页面，后者用来制作静帧图像。而本节介绍的同样是Adobe公司的Flash 8软件，它是专门用来制作Flash的软件。,15.3.4 Flash 8的菜单,由于Flash 8也属于Adobe公司，Flash 8的菜单分类也多少类似于Dreamweaver和Photoshop。,15.3.5 Flash 8的主要功能,Flash 8的工具栏界面和Photoshop工具栏大同小异。当然，由于Fl
9、ash文件主要是由矢量图形构成，所以这些工具在使用的时候，也会有不同的感觉。这些工具也能完成矢量图形制作。但是Flash软件主要的功能并非用于设计静帧图像，而是一方面用于制作矢量图形的动画，另一方面可实现Flash组件的交互来制作页面，这需要了解ActionScript语言。,15.3.6 Flash的常用交互技巧,目前主流网站中，都具备给页面添加视频的功能，这就是通过Flash组件来实现的。平时生活中，人们看的DVD、摄像机拍摄的视频片段、或者是数码相机拍摄的短片、又或者是网络上下载的影片等。这些视频绝大多数是.avi、 .rmvb、.mov等后缀名的文件。 但是，这些文件容量较大，实在不适
10、合加载到页面中使用，直到FLV文件出现。FLV视频格式占有率低、视频质量还算凑合、但体积相当小，这些特点尤其适合被加载在网络中。所以FLV视频文件是目前网络视频的主流文件。,15.4 案例：使用Dreamweaver制作页面,在本章的最后将通过一个实例来展示如何合理使用Dreamweaver创建页面。Dreamweaver中包含了大部分主流布局的框架，其相当杰出的一点是它的模板设计。,15.5 小结,本章主要是简单地介绍一下目前主流商业化网站创建的“利器”。需要有这样的概念，就是软件始终只是一种辅助性工具，要做好前端页面的设计工作，HTML+CSS的基础知识是非常重要的。只有在理解的基础上再去创新，这样才能创造出优秀的页面，而不是一旦脱离了辅助工具，就变得手足无措。,
