资源预览内容
第1页 / 共21页
第2页 / 共21页
第3页 / 共21页
第4页 / 共21页
第5页 / 共21页
第6页 / 共21页
第7页 / 共21页
第8页 / 共21页
第9页 / 共21页
第10页 / 共21页
亲,该文档总共21页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述
第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文件,用户却未必能够看到所希望的结果,原因在于Flash文件需要特定的播放器来加载文件,如Flash Player。为此,可以通过一个简单的JavaScript程序来令系统下载,使浏览器支持Flash文件的插件,如下代码所示。 ,15.3.2 在页面中放入Flash文件,当设置为不同的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工具栏大同小异。当然,由于Flash文件主要是由矢量图形构成,所以这些工具在使用的时候,也会有不同的感觉。这些工具也能完成矢量图形制作。但是Flash软件主要的功能并非用于设计静帧图像,而是一方面用于制作矢量图形的动画,另一方面可实现Flash组件的交互来制作页面,这需要了解ActionScript语言。,15.3.6 Flash的常用交互技巧,目前主流网站中,都具备给页面添加视频的功能,这就是通过Flash组件来实现的。平时生活中,人们看的DVD、摄像机拍摄的视频片段、或者是数码相机拍摄的短片、又或者是网络上下载的影片等。这些视频绝大多数是.avi、 .rmvb、.mov等后缀名的文件。 但是,这些文件容量较大,实在不适合加载到页面中使用,直到FLV文件出现。FLV视频格式占有率低、视频质量还算凑合、但体积相当小,这些特点尤其适合被加载在网络中。所以FLV视频文件是目前网络视频的主流文件。,15.4 案例:使用Dreamweaver制作页面,在本章的最后将通过一个实例来展示如何合理使用Dreamweaver创建页面。Dreamweaver中包含了大部分主流布局的框架,其相当杰出的一点是它的模板设计。,15.5 小结,本章主要是简单地介绍一下目前主流商业化网站创建的“利器”。需要有这样的概念,就是软件始终只是一种辅助性工具,要做好前端页面的设计工作,HTML+CSS的基础知识是非常重要的。只有在理解的基础上再去创新,这样才能创造出优秀的页面,而不是一旦脱离了辅助工具,就变得手足无措。,
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号