编写多媒体网页的精灵-DREAMWEAVER.docx

编写多媒体网页的精灵Dreamweaver在网页编写软件层出不穷的今天，MaCromedia公司毅然推出Dreamweaver,其中必定有不同凡响之处。MaCromedia公司在多媒体方面有相当的影响，大名鼎鼎的Freehand、DirectorAUtherWare便诞生在这个公司。Dreamweaver最精彩之处便是强大的多媒体处理功能，在设计DHTM1.(DyamicHTM1.)和CSS(CascadingStyleSheets)方面表现得极为出色，它利用JaVaSCriPt和DHTM1.语言代码轻松地实现网页元素的动作和交互操作，可谓独出心裁。在这方面超过了FrontPage98、HotdogsHomeSite等著名网页编写软件。和Macromedia公司其他软件的完美协作也是Dreamweaver的一大特色。Dreamweaver是一种WYSIWYGHTM1.编辑器，它可以用于基本页面元素的插入和生成工作。Dreamweaver还可以对内部的HTM1.编辑器和任何第三方的HTM1.编辑器进行方便、实时的访问。Dreamweaver是一种小型灵活的网页编写工具，程序使用一些浮动窗口，设计人员可以用鼠标单击的方式插入图像、表格、表单、APP1.ET.脚本语言等各种对象，这方面延续了所见即所得的编写方式，同时程序也提供对代码的编辑,包括样式表和JavaScript脚本。DreamWeaVer提供行为和时线两种控件来进行动画处理和产生交互式响应，这也是这个软件的优势所在。行为空间提供交互式操作，时线控件使设计人员像制作视频一样来编辑网页。这两种控件分别通过行为面板和时线面板来设置，这方面是本文的重点。初级篇1 .工具栏简介2 .图片3 .表格4 .表单5 .帧中级篇1.层2fi3. CSS高级篇1 .时线的应用2 .时线制作例子工具栏简介我们可以编辑新的网页，也可以直接从网上获得。对一般网页元素的控制可以通过工具条完成。图一是一般元素,图三是表单工具，图三是不可见命令。图一中各工具分别是：A插入图片，B插入表格，C插入横线，D设置层，E插入APP1.ET,F插入ACTlVEX控件，G插入插件，H插入FlashMovieJ插入ShockWaveDirectoro后两项都是Macromedia开发的网际媒体。对整个页面的设置要调出Modify菜单中的PageProperty对话框，这里是基本的设置，如网页的标题、背景颜色、背景图片、超链接文字的颜色和网页使用的文字，这一项应选中SimPIifiedChineSe(GB2312),因为lDreamweaver在处理中文这样的双字节语言的时候用的是两个字符的组合，这一点和Netscape一样，所以如果语言使用西文(Western)的话在用ie浏览的时候将出现乱码。接下来我们利用属性面板对页面进行详细的设置，这个面板可以通过Window的Properties选项打开，也可以双击页面元素,属性面板自动弹出。不同的组件有不同的属性，并且这个面板可以展开。这种方法受可视化程序设计启发，使用起来十分方便，而且直接，整个布局十分清晰，因为有用的属性在选中的时候才显现出来。当我们点击空白页面时，属性面板显示的是页面文字的属性。利用这个属性面板我们可以轻松F为页面文字设置各种属性，如颜色字体字型、对齐方式和浅进等。我们还可以简单地制作超链接和列表。下一节我们将介绍图拉的应用。图片的应用首先我们插入一幅图片。点击图片工具，选择图片，图四是当前图片属性展开时的属性面板情形。图片的属性总是在属性面板的左上角，显示图片的缩略图、图片的大小等文件信息。在这个面板里可以设置图片的长和宽、图片来源、超链接、缺省注释、对齐方式、水平和垂直的空域、低分辨率图片来源及边框。其中对齐方式中出了一般的还有AbSolUteMiddIe和AbSolUteBottom,是HTM1.的扩展语句，分别是中间固定和底边固定。凡是带有文件夹标志的选项都表明有浏览选择功能。通过刷新（RefreshImage按钮）可以看到最新的图片特征。属性面板中有图像地图（MaP按钮）（如图五）功能，使用户简单地设置图像地图，其他专门制作图像地图的软件便显得多余了，Macromedia果然周到。下面我们来看图像地图。图五是制作图像地图的对话框,左边的按钮是图像地图的形状，圆、矩形、不规则图形，对话框下部是为图像地图的每一区域设置超链接、链接目标及缺省注释。选中的区域反显，便于观察，图五中显示的是选中的一矩形区域，可以选择各个划定的区域设置或修改其属性。整个过程简单明了，操作十分方便。下一节我们将为您介绍表格的应用。表格的制作表格功能也很有特色。点击插入表格工具会提示输入表格的行和列及表格的宽度。完成以后需要用属性面板来调节表格的属性。当点击表格四周的边框时表格区域变成黑色，属性面板显示表格属性。请看图六,当属性面板左上角显示的是一个表格时，表明属性面板的当前状态是表格属性。在属性面板中可以简单地设置表格的名称、行列数、表格的宽和边框，以及对齐方式元素外围空白大小。值得注意的是属性面板下面的一行，左面的四个小按钮分别是：使表格的长度最小、使表格的宽度最小、表格宽度按像素记、表格宽度按百分比记。当你的表格比较复杂，每一元素的大小都不同时通过这些工具可以很快地恢复原来状态。在属性面板的下一行还有表格四周的空白区大小和设置边框和背景的颜色，边框由基本色、高光和阴影组成。凡是在文字域有灰色方框就表明有颜色表可供选取。当我们点击表格内部区域时，属性面板显示表格元素的属性，你可以为表格设置其文本属性，包括文字的格式、颜色、对齐方式、超链接及超链接的目标等属性，通过面板下一行的选项我们可以针对表格的行列或元素做具体的设置。值得注意的是右下角的四个小按钮，分别是将纵向的两个元素合并成一个、将横向的两个元素合并成一个、将纵向的一个元素分成两个、将横向的一个元素分成两个。进行元素拆分的时候只是针对以前合并的对像。图七是有四个按钮和表格的例子。下一节我们将为您介绍表单的制作。表单的制作下面我介绍一下表单(form)的制作。表单是提供交互式操作的重要手段，用户可以通过表单输入相关信息，使网页动态地处理用户要求或与服务器进行交流。在DreamWeaVer中表单的制作简单明了，功能强大。调出表单工具条。可以把相关的表单项，如CheCkbox、RadiobottomxSelectform等建在一个表(form)中，当增加一个表时会出现一个红色的虚线框。并且你可以选择表单的传递方式。第二个工具是文字域，一共有三种属性，请看属性面板(图八)，整个文本域都归结在这一工具中，为了处理的方便需要为文本域取一个名字，在TeXtFieId下方的区域内。右边的CharWidth是文本区显示的字符宽度，当文字内容长于设置的宽度时可以用滚动条或键盘来读取，本例可以显示20个字符。下面的Num1.ines是文本域的行数，本例是4行。再右边是选择文本区的模式，是一行、多行还密码输入方式。如果我们看一下HTM1.代码，当使用单行或密码方式时，者R是使用<NPUT></INPUT>方法，只不过类型(Type)不同罢To而使用多行文本域使用的是<TEXTAREA></TEXTAREA>方法。当然我们没有必要关心具体的HTM1.代码，我想说的是Dreamweaver有很好的灵活性和智能化。我们可以通过属性面板右下方的InitVal区设置文本区的初始值，选单行或密码方式时初始区也为一行，本例是多行的情况。Dreamweaver的文本区工具有一个缺点，在多行情况下不能设置回车方式(软回车还是硬回车)，需要自己在HTM1.代码区内加上。按钮(botton)、选择框(CheCkbox)、无线钮(Radiobotton)的设置比较简单。对选项菜单(ChoiceMenu)的设置是这样的，在Dreamweaver中选项菜单分成列表(list)和菜单(MenU)两种。请看图九，当选择Menu方式，右侧的Height和Selections选项不可选。选项内容选右侧的1.iStVaIUeS按钮，弹出如图十的对话框，左边的加减号的按钮是增加或减少选项和相应的值。右侧的两个按钮可以调整选项的位置，本例是将第一个选项调到第三个的情况。当选1.ist选项时可以选列表的高度和是否允许多选。下一节我们将为您介绍帧的制作。帧的制作在Dreamweaver中分栏(frame)十分简便。并且程序允许用户对整个页面进行编辑。将网页分栏可以使用Modify菜单中的FrameSet命令，并选择分栏方式，如左侧分栏、右侧分栏、上侧分栏、下侧分栏。分好以后对每一栏的设置要通过属性面板，如图十一，图十一的上部是FrameSet的属性，下部是每一栏的属性。对每一栏可以设顶栏的HTM1.文件，有无滚动条，可不可以改变栏的大小及栏的边。然后我们可以分别对每一栏进行编辑，就像编辑不分栏的页面一样。这样我们既可以看到整个页面的情况，也可以方便地对单个栏进行编辑，十分方便直观。有时我们需要撤消已分好了的栏，但我们在MOdify菜单中找不到撤消的命令，在属性面板中也没有关于栏数的设置，怎么办呢？其实对栏的撤消更简单，这和改变栏的大小一样，只需要拖动栏的边界，当我们看不到要撤消的栏的时候，栏就被撤消了，这时如果我们注意一下属性面板的话，会发现栏数改变了。我们也可以调出FrameS浮动面板来监视栏的编辑，便于查看整体布局和快速选择要编辑的栏。FrameS浮动面板在WindoW菜单中。如图十二是先左右分栏，再将右侧的栏上下分栏的情况。下一篇我们将为您介绍Dreamweave的中级功能层和行为的应用。层的应用Dreamweaver在编辑动态HTM1.方面别具特色，程序利用层叠样式表和JavaSript脚本语言进行编辑。一般的用户不必关心具体的实现方法或具体的代码，而是像进行影像编辑一样一帧一帧的设计，所以使用的时候有点不像编写网页而是在进行多媒体设计。如果你用过AdobePremiere的话，就会很快熟悉这种编辑方法。再具体的实现上分为行为(Behavior)和时线(timeline)行为用来对外界的情况进行响应,产生交互式的操作,这些响应是基于HTM1.和JavaScript语言并与具体的浏览器有关。而时线则根据页面元素的位置、大小、内容的变化来实现。其中引入层是实现网页精美动画的关键。层是建立动态HTM1.的基础。我们可以在insert菜单或直接在工具条中找到层工具，就是这个小图标。选中后就可以在网页上划定一个矩形区域表示建立一个新的层,选中一个层后这个层边界用细框线表示出来,左上角有一个小的标记。我们可以在这个划定的矩形区域内编辑任何内容，就像编辑一般的网页一样。我们看下面这个例子，图A一先后建立了三个层，第一层是包含一副风景画的图层,第二个层是包含汽车的层，最上面的第三层是海鸥。其中第三层是一张GIF89A的图片，所以我们可以通过第三层看到下面的前两个层。层的大小可以是任意的，但不能小于层中的元素。也就是说我们不能通过改变层的大小来改变层中元素的大小，这个例子中要改变第三层中海鸥的大小只能通过对海鸥这幅图的属性来改变。在上一期介绍插入图片的段落中有相关内容。当我们选中一个层进行操作时(注意是对层的内容进行编辑，而不是对层本身)，这时该层的边框由灰色变为黑色，我们就可以在这个层中插入或修改各种元素。并且选中以后活动层的左上角出现一个小方块的标志。上面的例子是单击这个小方块后的情况，这时层的边界出现八个小方块点，我们可以通过用鼠标拉动这些点来改变层的大小。为了对层进行更好的管理还需调出层控制面板(选WindoW中的Iayer命令)。图A二是针对上一个例子的层面板。面板上标出了三个层的情况。层面板一共有三个选项供选择，有眼睛标记的选项是显示或隐藏层。当点最上面的眼睛