最大的网站策划、网站运营、网络营销人才免费学习、培训、认证、展示、交流、工作平台,服务国家经济建设与民族伟大复兴!
发新话题
打印

谁哪有完整的dreamweaver 8.0 教程,重谢

Dreamweaver 8.0教程第七章:-制作框架网站

框架是网页中经常使用的页面设计方式,框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域,实现在一个浏览器窗口中显示多个HTML页面。使用框架可以非常方便的完成导航工作,让网站的结构更加清晰,而且各个框架之间决不存在干扰问题。利用框架最大的特点就是使网站的风格一致。通常把一个网站中页面相同的部分单独制作成一个页面,作为框架结构的一个子框架的内容给整个网站公用。
  
  一个框架结构有两部分网页文件构成:
  
  框架(Frame):框架是浏览器窗口中的一个区域,它可以显示与浏览器窗口的其余部分中所显示内容无关的网页文件。
  框架集(Frameset):框架集也是一个网页文件,它将一个窗口通过行和列的方式分割成多个框架,框架的多少根据具体有多少网页来决定,每个框架中要显示的就是不同的网页文件。
  
  一、创建框架
  
  在创建框架集或使用框架前,通过选择“查看/可视化助理/框架边框”命令,使框架边框在文档窗口的设计视图中可见。
  
  1、使用预制框架集
  
  (1)新建一个HTML文件,在快捷工具栏选择“布局”,单击 “框架”按钮,在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。
  
   点击图片
来源:TNTBBS
  
   点击图片
来源:TNTBBS
  
  (2)使用鼠标直接从框架的左侧边缘河上边缘向中间拖动,直至合适的位置,这样顶部和嵌套的左侧框架就完成了。
  
   点击图片
来源:TNTBBS
  
  2、鼠标拖动创建框架龙腾教程网 http://www.longtengwang.com
  
  (1)新建普通网页,命名后将其打开。
  (2)把鼠标放到框架边框上,出现双箭头光标时拖拽框架边框,可以垂直或水平分割网页。
  
  二、保存框架
  
  每一个框架都有一个框架名称,可以用默认的框架名称,也可以在属性面板修改名称,我们采用系统默认的框架名称topFrame(上方)、leftFrame(左侧)、mainFrame(右侧)。
  
  选择菜单栏>文件>保存全部,将框架集保存为index.html,上方框架保存为07.html,左侧框架保存为08.html,右侧框架保存为09.html。
  
  这个步骤虽然简单,但是很关键,只有将总框架集和各个框架保存在本地站点根目录下,才能保证浏览页面时显示正常。
三、 编辑框架式网页
  
  虽然框架式网页把屏幕分割成几个窗口,每个框架(窗口)中放置一个普通的网页,但是编辑框架式网页时,要把整个编辑窗口当作一个网页来编辑,插入的网页元素位于哪个框架,就保存在哪个框架的网页中。框架的大小可以随意修改。
  
  1、 改变框架大小
  
  用鼠标拖拽框架边框可随意改变框架大小。
  
  2、 删除框架
  
  用鼠标把框架边框拖拽到父框架的边框上,可删除框架。
  
  3、设置框架属性
  
  设置框架属性时,必须先选中框架。选择框架方法如下:
  
  选择菜单栏>窗口>框架,打开框架面板,单击某个框架,即可选中该框架。
  在编辑窗口某个框架内按住Alt键并单击鼠标,即可选择该框架。当一个框架被选择时,它的边框带有点线轮廓
  
  2. 设置框架属性
  
  选中框架,在属性面板上可以设置框架属性:框架名称、源文件、空白边距、滚动条、重置大小和边框属性等。
  
  需要注意的是:
  
  1、框架是不可以合并的。
  2、在创建链接时要用到框架名称,所以我们要很清楚的知道每个框架对应的框架名。
  
  四、在框架中使用超级链接
  
  在框架式网页中制作超级链接时,一定要设置链接的目标属性,为链接的目标文档指定显示窗口。链接目标较远(其他网站)时,一般放在新窗口,在导航条上创建链接时,一般将目标文档放在另一个框架中显示(当页面较小时)或全屏幕显示(当页面较大时)。
  
  “目标”下拉菜单中的选项:
  * _blank 放在新窗口中。
  * _parent 放到父框架集或包含该链接的框架窗口中。
  * _self 放在相同窗口中(默认窗口无须指定)。
  * _top 放到整个浏览器窗口并删除所有框架。
  
  在我们保存有框架名为mainFrame、leftFrame、topFrame的框架后,在目标下拉菜单中,还会出现mainFrame、leftFrame、topFrame选项:
  
  * mainFrame 放到名为mainFrame的框架中。
  * leftFrame 放到名为leftFrame的框架中。
  * topFrame放到名为topFrame的框架中。

Dreamweaver 8.0基础教程

五、制作框架页面
  
  1、选择菜单栏>窗口>框架,打开框架面板,选中整个框架集,如下图所示:
  
   点击图片
来源:TNTBBS
  
  在属性面板中,将行的值设置为100,单位为像素,如下图所示:
  
   点击图片
来源:TNTBBS
  
  2、选择菜单栏>窗口>框架,打开框架面板,选中子框架集,如下图所示:
  
   点击图片
来源:TNTBBS
  
  在属性面板中,将列的值设置为200,单位为像素,如下图所示:

Dreamweaver 8.0教程第八章:-层与时间轴的应用

Dreamweaver 8.0教程第八章:-层与时间轴的应用
层是CSS中的定位技术,在Dreamweaver中对其进行了可视化操作。文本、图像、表格等元素只能固定其位置,不能互相叠加在一起,而层可以放置在网页文档内的任何一个位置,层内可以放置网页文档中的其他构成元素,层可以自由移动,层与层之间还可以重叠,层体现了网页技术从二维空间向三维空间的一种延伸。
  
  一、创建层
  
  1、创建普通层
  
  (1)插入层
  
  选择菜单栏>插入>布局对象>层命令,即可将层插入到页面中去。
  
   点击图片
来源:TNTBBS
  
  使用这种方法插入层,层的位置由光标所在的位置决定,光标放置在什么位置,层就在什么位置出现。选中层会出现六个小手柄,拖动小手柄可以改变层的大小。
  
  (2)拖放层
  
  打开快捷栏的“布局”选项,单击“绘制层”按钮,单击鼠标左键,并且按住不放,拖动图标到文档窗口中,然后释放鼠标,这是层就会出现在页面中了。
  
   点击图片
来源:TNTBBS
  
  (3)绘制层
  
  打开快捷栏的“布局”选项,单击“绘制层”按钮,在文档窗口内鼠标光标变成十字光标,然后按住鼠标左键,拖动出一个矩形,矩形的大小就是层的大小,释放鼠标猴层就会出现在页面中。
  
  2、创建嵌套层
  
  创建嵌套层就是在一个层内插入另外的层。
  
  方法一:将光标放才某层内,选择菜单栏>插入>布局对象>层命令,即可在改层内插入一个层。
  
   点击图片
来源:TNTBBS
  
  方法二:打开层面板,从中选择需要嵌套的层,此时按住Ctrl键同时拖动改层到另外一个层上,直到出现如下图所示图标后,释放Ctrl键和鼠标,这样普通层就转换为嵌套层了。
  
   点击图片
来源:TNTBBS

Dreamweaver 8.0基础教程

二、设置层的属性
  选中要设置的层,就可以在属性面板中设置层的属性了。
  
   点击图片
来源:TNTBBS
  
  层编号:给层命名,以便在“层”面板和 JavaScript 代码中标识该层。
  左、上:指定层的左上角相对于页面(如果嵌套,则为父层)左上角的位置。
  宽、高:指定层的宽度和高度。如果层的内容超过指定大小,层的底边缘(按照在 Dreamweaver设计视图中的显示)会延伸以容纳这些内容。(如果“溢出”属性没有设置为“可见”,那么当层在浏览器中出现时,底边缘将不会延伸。
  Z轴:设置层的层次属性。在浏览器中,编号较大的层出现在编号较小的层的前面。值可以为正,也可以为负。当更改层的堆叠顺序时,使用“层”面板要比输入特定的 z 轴值更为简便
  可见性:在“可见性”下拉列表中,设置层的可见性。使用教本语言如JavaScrip可以控 制层的动态显示和隐藏。有四个选项:
  Default——选择该选项,则不指明层的可见性。
  Inherit——选择该选项,可以继承父层的可见性。
  Visible——选择该选项, 可以显示层及其包含的内容,无论其父级层是否可见。
  Hidden——选择该选项,可以隐藏层及其包含的内容,无论其父级层是否可见。
  背景颜色:用来设置层的背景颜色。
  背景图像——用来设置层的背景图像。
  溢出——选择当层内容超过层的大小时的处理方式。有四个选项:
  Visible(显示):选择该选项,当层内容超出层的范围时,可自动增加层尺寸。
  hidden(隐藏): 选择该选项,,当层内容超出层的范围时,保持层尺寸不变,隐藏超出部分的内容。
  scroll(滚动条): 选择该选项,则层内容无论是否超出层的范围,都会自动增加滚动条。
  auto(自动): 选择该选项,,当层内容超出层的范围时,自动增加滚动条(默认)
  剪辑:设置层的可视区域。通过上、下、左、右文本框设置可视区域与层边界的像素值。层经过“剪辑”后,只有指定的矩形区域才是可见的。
  类:在类的下拉列表中,可以选择已经设置好的CSS样式或新建CSS样式。
  
  位置和大小的默认单位为像素 (px)。也可以指定以下单位:pc (pica)、pt(点)、in(英寸)、mm(毫米)、cm(厘米)或 %(父层相应值的百分比)。缩写必须紧跟在值之后,中间不留空格:
  
  使用层制作特效我们在创建网页的时候,可以发现层可以在网页上随意改变位置,在设定层的属性的时,可以知道层有显示隐藏的功能,通过这两个特点可以实现很多令人激动的网页动态效果。
三、时间轴
  
  时间轴实根据时间的流逝移动图层位置的方式显示动画效果的一种动画编辑界面,在时间轴中包含了制作动画时所必须的各种功能。
  
  1、时间轴的各项功能
  
   点击图片
来源:TNTBBS
  
  (1)时间轴弹出菜单:表示当前的时间轴名称。
  (2)时间轴指针:在界面上显示当前位置的帧。
  (3)不管时间轴在哪个位置,一直移动到第一帧。
  (4)表示时间指针的当前位置。
  (5)表示每秒显示的帧数。默认值时15帧。增加帧数值,则动画播放的速度将加快。
  (6)自动不放:选中该项,则网页文档中应用动画后自动运行。
  (7)LOOP(循环):选中该项,则继续反复时间轴上的动画。
  (8)行为通道:在指定帧中选选择要运行的行为。
  (9)关键帧:可以变化的帧。
  (10)图层条:意味着插入了“层”等对象。
  (11)图层通道:它是用于编辑图层的空间。
  
  2、在DW8中显示时间轴
  
  选择菜单栏的窗口/时间轴或按快捷键Alt+F9,则显示时间轴。
  
  四、创建时间轴动画
  
  时间线只能移动分层对象,如果想移动文本或图像之类的对象,可以将其放在层中。
  
  1、打开09.html文件,把光标放到页面左上方的位置,在插入面板选择布局>绘制层,创建六个层。分别输入文字“小”、“木”、“web”、“欢”、“迎”、“你”,将图层排列在适当的位置。
  2、打开时间轴。选择层1后,拖动到时间轴的第一行上。
  3、用同样的方法,把包含有其它文字的层也根据文字的顺序拖动到时间轴的第2-6行上。
  4、为了减慢文字移动的速度,把时间轴中的15帧全部扩展为25帧。
  5、在时间轴中选择Layer1的第一帧,在属性面板的顶端坐标值(T)中输入(-50),这样,可以把文字放置到上侧。
  6、用同样的方法选择其余层的第一帧后,把顶端坐标值(T)统一设定为(-50)。
  7、为了每个一段时间下落一个文字,从第二个动画条开始向后移动5帧。勾选“自动播放选项”。
  8、按F12浏览效果。文章来自于【学习无忧网】http://www.51study.net/article/ViewArticle.asp?ArticleID=1634

Dreamweaver 8.0教程第九章:-利用行为制作动态页面

Dreamweaver 8.0教程第九章:-利用行为制作动态页面
一般说来,动态网页是通过JaveScript或基于JaveScript的DHTML代码来实现的。包含JaveScript脚本的网页,还能够实现用户与页面的简单交互。但是编写脚本既复杂又专业需要专门学习,而Dreamweaver提供的“行为”的机制,虽然行为也是基于JaveScript来实现动态网页和交互的,但却不需书写任何代码。在可视化环境中按几个按钮,填几个选项就可以实现丰富的动态页面效果,实现人与页面的简单交互。
  
  行为是事件与动作的彼此结合。例如,当鼠标移动到网页的图片上方时,图片高亮显示,此时的鼠标移动称为时间,图片的变化称为动作,一般的行为都是要有事件来激活动作。动作时由预先写好的能够执行某种任务的JavaScript代码组成,而事件是由浏览器前用户的操作相关,如单击鼠标、鼠标上滚等。
  
  一、了解行为
  
  “行为”可以创建网页动态效果,实现用户与页面的交互。行为是由事件和动作组成的,例如:将鼠标移到一幅图像上产生了一个事件,如果图像发生变化(前面介绍过的轮替图像),就导致发生了一个动作。与行为相关的有三个重要的部分——对象、事件和动作。
  
  1. 对象(Object)
  
  对象是产生行为的主体,很多网页元素都可以成为对象,如图片、文字、多媒体文件等,甚至是整个页面。
  
  2. 事件(Event)
  
  事件是触发动态效果的原因,它可以被附加到各种页面元素上,也可以被附加到HTML标记中。一个事件总是针对页面元素或标记而言的,例如:将鼠标移到图片上、把鼠标放在图片之外、单击鼠标,是与鼠标有关的三个最常见的事件(onMouseOver、onMouseOut、onClick)。不同的浏览器支持的事件种类和多少是不一样的,通常高版本的浏览器支持更多的事件。
  
  3. 动作(Action)
  
  行为通过动作来完成动态效果,如:图片翻转、打开浏览器、播放声音都是动作。动作通常是一段JaveScript代码,在Dreamweaver中使用Dreamweaver内置的行为往页面中添加JaveScript代码,就不必自己编写。
  
  4. 事件与动作
  
  将事件和动作组合起来就构成了行为,例如,将onClick行为事件与一段JaveScript代码相关联,单击鼠标时就可以执行相应的JaveScript代码(动作)。一个事件可以同多个动作相关联(1:n),即发生事件时可以执行多个动作。为了实现需要的效果,我们还可以指定和修改动作发生的顺序。
  
  Dreamweaver内置了许多行为动作,好象是一个现成的JaveScript库。除此之外,第三方厂商提供了更多的行为库,下载并在Dreamweaver中安装行为库中的文件,可以获得更多的可操作行为。如果您很熟悉JaveScript语言,也可以自行设计新动作,添加到Dreamweaver中。

Dreamweaver 8教程图文实例讲解

二.应用行为
  
  1. 行为面板
  
  在Dreamwaever中,对行为的添加和控制主要通过“行为”面板来实现。选择窗口>行为命令,打开行为面板,下图所示。
  
   点击图片
来源:TNTBBS
  
  在行为面板上可以进行如下操作:
  
  单击“+”按钮,打开动作菜单,添加行为;单击“-”按钮,删除行为。
  添加行为时,从动作菜单中选择一个行为项。
  单击事件列右方的三角,打开事件菜单,可以选择事件。
  单击"向上"箭头或向下箭头,可将动作项向前移或向后移,改变动作执行的顺序。
  
  2. 创建行为
  
  一般创建行为有三个步骤:选择对象、添加动作、调整事件。
  
  我们通过一个“打开浏览器窗口”实例说明如何创建行为。我们需要的效果是,在网页上单击一幅小图像,打开一个新窗口显示放大的图像。
  
  (1)打开01.html,选中图片。
  (2)单击行为面板上的"+"按钮,打开动作菜单。从动作菜单中选择“打开浏览器”命令,在弹出的对话框中设置参数。
  在“要显示的URL”文本框中,单击“浏览按钮”选择在新窗口中载入的目标的URL地址(可以是网页也可以是图像)。
  窗口宽度设为400px,窗口高度设为300px。
  窗口名称为“放大图片”。
  (3)当我们添加行为时,系统自动为我们选择了事件onClick(单击鼠标),现在,我们单击行为面板上的事件菜单按钮,打开事件菜单,重新选择一个触发行为的事件。把onClick(单击鼠标)的事件改为onMouseOver(鼠标滑过),如下图所示:
  
   点击图片
来源:TNTBBS
  
  4、按F12键预览打开新窗口的效果。
三、行为的应用
  
  1、“播放声音”实例
  
  利用播放声音的动作,可以在网页中播放声音文件,如背景音乐,或单击某个按钮(文字或图片)播放一段声音。
  
  (1)给网页添加背景音乐
  
  打开01.html,单击编辑窗口状态栏上的< body>标记,选中整个网页。
  打开行为面板,单击"+"按钮,在菜单中选择“播放声音”。
  在弹出的菜单中输入音乐文件的路径,单击“确定”。
  把事件调整为onLoad(载入页面后)。
  
  (2)给图片添加声音,方法同上。
  
  2、设置状态行文本
  
  浏览器下端的状态行通常显示当前状态的提示信息,利用“设置状态栏文本”行为,可以重新设置状态行信息。
  选中要附加行为的对象,如网页的< body>标记,或一个链接。
  单击行为面板上的"+"按钮,在打开的动作菜单。
  选择“设置文本”>“设置状态文本”命令,在打开的“信息”对话框中输入需要的文本。
  按F12键,可以看到打开网页后,浏览器下端的状态行上有了新输入的信息。
  
  3、网页中的变色按钮 龙腾教程网 http://www.longtengwang.com
  
  新建11.html文件,插入一个1行2列的表格,做如下设置:
  
   点击图片
来源:TNTBBS
  
  选中全部单元格,在属性面板中做如下设置:
  
   点击图片
来源:TNTBBS
  
  在两个单元格中分别输入文字“变色按钮”、“应用行为”,并将它们居中对齐,产生一个DIV标签,在代码区找到第一个div标签,在< divalign="center" class="wz1">代码中设置一个id值,这段代码改为< div id="button1"align="center"class="wz1">,同样的方法,在第2二个div标签中设置一个id=button2,即分别给两个单元格内的div标签命名。
  
  选择窗口>行为,打开行为面板,鼠标在第一个单元格中点击一下,在状态栏选中div标签,单击行为面板上的+按钮,从弹出菜单中选择“改变属性”菜单项,在弹出的对话框中做如下选择:
  
   点击图片
来源:TNTBBS
  
  单击“确定”,回到行为面板中,将其鼠标响应行为改为onMouseOver。
  
  用同样的方法在该div标签上再设置一个行为,将其鼠标响应行为改为onMouseOut,并将对话框中的“新的值”设为原来的背景色#CCCC00。
  
  对第二个单元格中的id=button2的div标签,我们也做同样的设置。
  
  保存文件,按F12浏览效果。

Dreamweaver 8 官方简体教程

三、行为的应用
  
  1、“播放声音”实例
  
  利用播放声音的动作,可以在网页中播放声音文件,如背景音乐,或单击某个按钮(文字或图片)播放一段声音。
  
  (1)给网页添加背景音乐
  
  打开01.html,单击编辑窗口状态栏上的< body>标记,选中整个网页。
  打开行为面板,单击"+"按钮,在菜单中选择“播放声音”。
  在弹出的菜单中输入音乐文件的路径,单击“确定”。
  把事件调整为onLoad(载入页面后)。
  
  (2)给图片添加声音,方法同上。
  
  2、设置状态行文本
  
  浏览器下端的状态行通常显示当前状态的提示信息,利用“设置状态栏文本”行为,可以重新设置状态行信息。
  选中要附加行为的对象,如网页的< body>标记,或一个链接。
  单击行为面板上的"+"按钮,在打开的动作菜单。
  选择“设置文本”>“设置状态文本”命令,在打开的“信息”对话框中输入需要的文本。
  按F12键,可以看到打开网页后,浏览器下端的状态行上有了新输入的信息。
  
  3、网页中的变色按钮 龙腾教程网 http://www.longtengwang.com
  
  新建11.html文件,插入一个1行2列的表格,做如下设置:
  
   点击图片
来源:TNTBBS
  
  选中全部单元格,在属性面板中做如下设置:
  
   点击图片
来源:TNTBBS
  
  在两个单元格中分别输入文字“变色按钮”、“应用行为”,并将它们居中对齐,产生一个DIV标签,在代码区找到第一个div标签,在< divalign="center" class="wz1">代码中设置一个id值,这段代码改为< div id="button1"align="center"class="wz1">,同样的方法,在第2二个div标签中设置一个id=button2,即分别给两个单元格内的div标签命名。
  
  选择窗口>行为,打开行为面板,鼠标在第一个单元格中点击一下,在状态栏选中div标签,单击行为面板上的+按钮,从弹出菜单中选择“改变属性”菜单项,在弹出的对话框中做如下选择:
  
   点击图片
来源:TNTBBS
  
  单击“确定”,回到行为面板中,将其鼠标响应行为改为onMouseOver。
  
  用同样的方法在该div标签上再设置一个行为,将其鼠标响应行为改为onMouseOut,并将对话框中的“新的值”设为原来的背景色#CCCC00。
  
  对第二个单元格中的id=button2的div标签,我们也做同样的设置。
  
  保存文件,按F12浏览效果。
发新话题
查看积分策略说明

快速回复主题

选项

[完成后可按 Ctrl+Enter 发布]  预览帖子  恢复数据  清空内容