Dreamweaver 2.0全接触 -pc6资讯

您的位置：首页 → 网页设计 → DreamWeaver → Dreamweaver 2.0全接触

Dreamweaver 2.0全接触 时间：2004/11/7 2:35:00来源：本站整理作者：蓝点我要评论(0)

　　　　　　　　　　　　

　　　　　　　　　　　　 Dreamweaver 2.0是多媒体制作软件行业的老大Macromedia生产的经典网页制作工具。其强大的网页设计功能是以往的网页设计工具所不能匹敌的。Dreamweaver 2.0有几大特点:

    * 具有强大的站点管理功能，内置FTP软件可以直接上传主页。

    * 所见即所得的页面编辑方式。

    * 支持Styles Sheet样式表单，创造丰富的页面效果。

    * 支持Layer层，并可使用Timeline时间轴制作动态网页。

    * 内置Behavior行为，为网页增加交互功能。

    * 提供模板和库可以加速页面的生成和制作

    * 支持外部插件，提供无限的扩展能力。

    Dreamweaver魅力是无穷的，在下面的教学中我们将逐步深入，全面接触这个超COOL的网页制作软件。

    一、Dreamweaver 2.0的组成和操作界面

    (1)Dreamweaver 2.0的组成

    首先我们来认识一下Dreamweaver的组成。Dreamweaver由两大部分组成。页面编辑器和站点管理器。

    页面编辑器是一个可视化的网页编辑器，网页制作都是在页面编辑器中完成的。

    站点管理器管理网站内的文件和目录，检验连接情况，并控制站内文件的上传。在做站点时推荐先建立好站点，再开始网页的制作，这样可以保证页面内文件连接的正确性。

    (2)Dreamweaver 2.0的操作界面

    Dreamweaver的操作界面十分简捷，重要功能全部集结在功能面板工具栏中。

    * 对象工具栏:工具栏中的图标分别对应各种页面中的元素，诸如图片、表格、水平条等等。

    * 属性工具面板:是页面编辑中比较重要的面板。主要设置页面元素的属性，比如文字的大小、图片的高宽、表格的对齐方式等等。对于不同的元素，面板中的参数是不同的。

    * Styles样式面板:Style Sheet 样式定义面板，可以轻松定义出诸如9pt字体等CSS效果。

    * Timeline时间轴面板:用于制作网页上的动画。通过时间轴，可以实现一幅图片在网页上飞舞等非凡的动态效果。

    * Behavior行为面板:为网页增加交互功能，例如光标移到某个图片上就弹出一个窗口等等。

    * Library&Templates库和模板面板:库的作用是将重复使用的图片文字等元素放进库中，以后可以方便地直接从库中调用元素。模板的作用类似于Frontpage98中的Theme主题，可以将固定的页面版面格式保存为模板，快速地制作大批量格局相同的网页。

    *Dreamweaver2.0还提供了导航条帮助用户快速地打开以上面板。（图9)其中的按钮可以直接打开HTML源代码编辑器，用户可以直接修改当前页面的HTML源代码。在页面编辑器的右下角也提供了类似的导航条供用户使用。

    二、Dreamweaver 2.0一招速成

    在了解了Dreamweaver2.0的操作界面后，现在我们可以开始Dreamweaver2.0的一招速成了。各位读者可以根据自己的需要实现的功能，按照标题选择想看的内容。

    * 建立站点

    在开始制作站内的页面之前，先要定义一个站点。站点的实质就是硬盘上的一个目录，站内的文件存放在该目录之中。选择菜单File/New Site。系统弹出对话框，在 “Local Root”选项中填写站点文件所在的目录。选中“Cache”选项就OK了。“Cache”的作用是跟踪站内文件的连接情况，加速站点管理操作。

    * 文字设定

    在页面中选中相应的文字后，在属性面板中可以设定文字的属性。文字属性和Word文字工具类似。是一个调色板，可以选择文字的颜色。

    * 插入图片

    选择对象工具栏中的，选中相应的图片。就完成图片的插入，如果插入的是站点外部的图片文件，系统会要求用户将图片复制到站点中去。

    * 表格制作

    选择对象工具栏中的，设定行数（Rows），列数（Colums），边框厚度(Border)即可。边框厚度为0时表格无边框。

    * 表格单元格的合并与分割:

    选中要合并的单元格，在属性面板中选择按钮即可将单元格合并。反之，在一个单元格内选择属性面板中的可以分割单元格。

    * 插入水平条:单击对象工具条中的，即可插入。

    * 建立超级连接:

    选中要超级连接的文字和图片，可以在属性面板中的Link域中直接填写相关页面的地址，也可以单击按钮选择一个页面进行连接。如果连接地址中填写的是mailto:+邮件地址。如mailto:rudolf@21cn.com。则浏览页面时，单击该连接会打开邮件程序。

    * 建立书签

    选择菜单Insert /Named Anchor，在系统弹出的对话框中填入书签的名称，就建立好了一个书签（在Dreamweaver中叫做锚点）。在页面中书签的符号是。在页面中制作指向书签的超级连接十分简单。选中相应的文字后，在属性面板中选择瞄准器，将瞄准器拖拽到上就可以完成连接制作。

    * 制作可点图Image Map

    首先插入一幅图片，单击图片，同时选中属性工具面板中的按钮。系统弹出可点图编辑器窗口。在窗口左侧工具栏中相应的形状工具，在图面中画出可点区域。同时,在下面的Link连接域中指定相应的连接。图片上的可点区域就制作完成了。

    * 创建帧式结构

    共有两种方法：

    方法1：在页面中选择菜单Modify/Frameset。在菜单中有四个子选项。Split Frame left向左分帧;Split Frame right向右分帧;Split Frame Up向上分帧;Split Frame down向下分帧。根据需要，选择不同的选项就可以制作出复杂的帧式结构了。

    方法2：在页面中选择菜单View /Frame Borders，窗口四周会出现一个帧边框。按住Alt键不放，鼠标拖拽帧边框也可以拖拽出帧的结构。

    * 帧中间的超级连接

    在帧内制作超级连接常常会遇到这样的情况。比方说现在有一个左右帧式结构的站点。左边是栏目选项，右边是内容。要求点左边的超链，超链对应的页面显示在右边的帧中。具体操作时，方法是这样的：

    1. 给帧命名。按Ctrl+F10打开帧面板。单击帧面板中的左边一帧，在属性面板中将帧的名称设定为“left”。同理，将右边帧名称设定为“right”。

    2. 在左边帧中制作超级连接时，选定连接的页面后，还要将属性面板中的Target目标设定为“right”，也就是刚才命名为“right”的右边帧。这样才能实现选左边的超链，对应页面出现在右边。关于超级连接中的Target选项，没有定义帧的时候有四个默认选项。“_blank”指的是新开一个窗口显示链接内容。“_parent”指的是上一级窗口中显示链接内容。“_self”在同一个窗口显示内容。“_top”在顶端窗口显示内容。如果在操作中为具体的帧设定了名字，像本例中的“left”“right”，就会出现在“target”中供选择。

    * 插入活动按钮

    活动按钮是一种可以对鼠标进行响应的按钮。当光标移动到按钮图片上时，自动切换另外一张图片。可以做出生动的按钮效果。例如按钮原来是凸起的，光标移到按钮上去时突然凹陷下去。制作方法：选择对象工具栏中的。系统弹出对话框，在Original Image框中选择第一幅图片。Rollover Image框中选择鼠标移动到图片上方时切换成为什么图片。Link框中设定连接到什么网页上去。一个活动按钮就做好了。

    * 制作表单

    单击对象工具栏上方的，选中其中的Forms表单选项。对象工具栏中的所有按钮都换成表单元素。选中相应的元素就可以将其插入到页面中。限于篇幅这里就不再一一做介绍。

    * 设定网页背景图片和标题

    选择菜单Modify/page properties。系统弹出页面属性对话框。在其中的Background Image框中可以设定网页的背景图片。Title框可以设定网页的标题。在对话框中还有一个Tracing Image选项。它是可以显示于网页的背景中的图片，但是在预览正式显示网页时候却不显示。它的作用是作为排版的辅助线。可以把排版的划分格式做成“Tracing Image”图片，帮助文字和图片对位。实际使用时不显示，在页面编辑器中，如果使用了“Tracing Image”，选中的背景图片在编辑状态下将不显示。

    三、Dreamweaver 2.0进阶篇

    OK，看过了前面的一招速成是不是对Dreamweaver有点初步的印象了？下面我们来领略一下Dreamweaver 2.0的过人之处，在进阶篇中你将了解到很多的Dreamweaver的高级功能。

    * Style样式定义

    在现在的很多站点和网页上，流行着一种9pt的小字体。9磅字体美观而且实用，可以在本来就不太充足的版面上面填写更多的内容。但是HTML代码中却没有直接支持9pt这种格式。有了Style样式定义就简单多了，只需要简单的几步就可以搞定，请看:

    1.按F7打开Styles样式面板，单击“Style Sheet...”。系统弹出Edit Style Sheet编辑样式表对话框。(图21)

    2. 单击New，系统弹出“New Style”对话框，选择第一项“Make Cutsom Style”自定义样式，将样式取名为.small。按“OK”确认。

    3. 在样式定义对话框里面将字体的大小“Size”设定为9pt。按“OK”确认。再在编辑样式对话框中按“Done”确认。一个名字叫small的9磅字体样式制作完毕(图23)。

    4. 在页面中选中要定义成9pt的文字，在style面板中选择定义好的small样式。9pt的小字就出现在页面中了(图24)。

    Style样式的实质是CSS级联样式表单，原理是通过自定义或者重新定义一些HTML标签的格式和内容来实现一个效果。制作一个样式，在以往的传统的网页编辑中样式定义需要手工编写，非常的麻烦。象上面的9pt字体就需要用下面的这段代码来制作。

    在引用的时候需要用到定义过的标签。

9磅小字体

    作为网页编辑者，除非是专业的高手否则是很难记住诸多的CSS代码的。而Dreamweaver对于StyleSheet提供了全面的支持，CSS代码都以对话框选项的形式出现，只要选择一下相应的效果，代码自动生成。从而你也轻松制作出高级效果。在此提示各位一点，光标移动到文字上方文字的下划线消失的效果，也可以用Style面板做出来的，大家开动脑筋想想怎么做吧，非常简单哦^-^。限于篇幅，Style面板就介绍到这里。

    * Layer层

    你是否曾经想象过在网页中实现将一个图片叠置到文字的上方，或者将一幅图片叠放到另一幅图片的上方？Dreamweaver2.0支持Layer层可以实现这一功能。

    创建一个层:

    可以在Dreamweaver的2.0的对象工具栏中选择按钮。在页面中拖拽即可制作一个层。层中可以放置页面中的其他元素，诸如图片、文字、超级链接等等。

    移动一个层:

    可以拖拽层上的句柄来将层移动到页面中的任何位置。

    层与层的重叠:

    层与层之间是能够重叠的，层与层之间谁在上面，根据层的深度Z-index来决定。Z-index的数值越大，该层越在最上面。比如两个层的Z-index一个为0一个为1，Z-index为1的放置在为0的上面。

    层的隐藏和显示:

    层还可以进行隐藏和显示。层的隐藏和显示通过Layer层面板中的眼睛可以控制层的显示与否。眼睛睁开着表示层是显示的，眼睛闭着表示层是隐藏的。层的深度也可以在此面板中进行修改。

    * Timeline时间轴：

    用过Director和Flash的朋友对于时间轴可能马上就能理解它的作用，可以在网页上制作动画！！这里的动画可不是所谓的动画GIF，而是真正的用Java script代码编写的动画。下面通过一个从屏幕做左上方滑动到右下方的企鹅为例子来说明时间轴的用法。

    1.在页面中左上角制作一个层，层中有一个挥动手臂的企鹅动画GIF。

    2.按F9打开时间轴，将该层拖动到时间轴中去。在时间轴中形成一段15帧画面的动画。

    3.光标单击选中时间轴中第15帧画面，此时将层从画面左上角移动到画面的右下角。可以看见页面中出现了一个移动的轨迹。选中时间轴上方的Autoplay自动播放和Loop循环播放功能。保存页面后，选择菜单File/preview in browser/iexplore。可以看到企鹅在页面中不断从屏幕左上角移动到右下角。

    4.光标单击时间轴中的第10帧画面，单击鼠标右键，选择右键菜单中的Add keyframe增加一个关键帧。拖拽企鹅所在的层，运动轨迹产生弧度变化。预览网页，企鹅沿着新的轨迹运动。

    时间轴是Dreamweaver中的一个重要功能。下面介绍一下时间轴的一些基本概念。

    通道:一个通道中存放一个层，在时间轴上形成动画。

    B通道:用来存放一些控制动画播放顺序的命令。在上面例子中第15帧B通道中加了一个循环播放的命令。

    帧:时间轴中的一格画面就是一个帧，动画就是一帧帧画面组成的。

    关键帧:动画的关键画面称作关键帧，在上面的例子中运用了一个关键帧改变了动画的运动轨迹。可以运用关键帧实现任意复杂的动画。

    Autoplay:装入网页后自动播放动画。

    Loop:动画放完一遍后自动循环播放。

    时间轴中可以改变的不光有层的位置，还可以改变层的显示与否和深度。配合得当可以制造出丰富的动画效果。

    * Behavior行为：

    Dreamweaver2.0中令人激动的一个部分，通过行为可以在网页上制作出一些简单的交互效果。Behavior由两个部分组成Event事件和Action动作组成。通过事件的响应进而执行对应的动作。举一个鼠标移动到图片上显示相应说明的例子来帮助读者进行理解。

    1.在页面中插入一幅图片和一个层(图30)。

    2.按F11打开层面板，关闭层前面的眼睛，将层的属性设置为不可见。

    3.单击图片，按F8打开behaviors行为面板，单击面板上的+号键，添加一个动作。选择Show-Hide Layers显示隐藏层动作。(图31)

    4.在系统弹出的show-Hide对话框中单击Show显示Layer1。(图32)

    5.单击行为面板中的，设定Events事件为onMouseOver当鼠标移动到图片上时执行动作（图33）。

    6.同样按面板上的+号键设置一个行为。设置事件为onMouseout当鼠标移动到图片外时执行动作，行为为隐藏该层。

    7.预览网页，鼠标移动到图片上出现文字说明，移到图片外文字说明消失。

    通过上面的例子我们可以了解到行为的真正含义，就是当事件满足时--〉执行动作。Dreamweaver提供了大量的事件和动作供用户进行选择。在此不一一分析。

    * Template模板和Library库

    在进行大量的页面制作中，很多页面会用到同样的图片，文字，排版格式。一次次地重复劳动是否让你厌倦了呢？Dreamweaver2.0提供的模板和库的功能可以帮助你从麻烦中解放出来。相同的版面结构可以制作成模板，相同的元素可以放在库中随时调用。下面通过简单的几个例子来说明模板和库的操作。

    * Template模板

    1.按Ctrl+F11打开Template&Library模板和库面板，选择，单击new新建一个模板。双击模板，进入模板编辑状态。

    2.在模板中设计好版面(图34)。

    3.选择模板中“在此输入文字”，选择菜单Modify/Templates/Mark selection as Editable制作可编辑区域。定义好可编辑区域的名字。可编辑区域在页面中呈青色。将模板存盘。一个模板制作完毕。

    4.新建一个页面，在模板面板中选择先前制作的模板，选择Apply to page应用到页面。页面就制作完毕。页面中的黄色部分为模板的不可编辑区域，只要修改相应的可编辑区域为相应的内容就可以了(图35)。

    在大批量制作版面相同的网页时，网页中相同的按钮、图片、文字在模板中是不可编辑区域。而页面中不同的部分必须在模板中设置为可编辑区域。

    * Library库

    库的使用相当简单，只要将页面中的文字和图片选中拖动到库中即可。下次使用时选库中的元素，单击Add to page即可将元素复制到页面中。

    四、Dreamweaver 2.0的插件

    Dreamweaver的魅力还在于他无穷的可拓展性。Dreamweaver中的插件有Commands，Behaviors，Object三种。许多Dreamweaver的爱好者开发了各种各样的外部插件极大的拓展了Dreamweaver的功能。在网上Download到了相应的插件以后，解压缩到相应的目录即可完成插件的按装。

    (1)插件类型介绍

    Commands(命令):命令的作用是增强网页编辑的功能，command命令在Dreamweaver中存放在Commands菜单中。比如Commands菜单下面的Sort Table命令可以将表格内容重新排序。类似于Foxpro数据库中的sort命令，够COOL吧？

    Behaviors（行为）：前面已经介绍过行为的作用。行为有两个部分Action动作和Events事件。

    Objects（对象）：在Dreamweaver中位于对象工具栏中。

    (2)安装目录

    Commands:存放在Dreamweaver目录下的Configuration\commands目录。

    Behaviors: 外部Action存放在Dreamweaver目录下的Configuration\Behaviors\Actions目录。

    外部Events存放在Dreamweaver目录下的Configuration\Behaviors\Events目录。

    Object: 存放在Dreamweaver目录下面的Configuration\Objects目录。

文章评论

查看所有0条评论>>

热门文章 没有查询到任何记录。