




版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校 课堂讲解 上机实战 第8课 在网页中应用层 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校课堂讲解 创建层 认识“层”面板 选择、移动和对齐层 层大小和属性设置 层的显示和隐藏 层名的变更 层的堆叠和删除 层与表格的相互转换 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校创建层 层的首选参数设置 层的建立 层的嵌套 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校层的首选参数设置 在新建层之前,通过“首选参数”对话框中的“层”选项来设置层的默认属性。 中文Dre
2、amweaver 8网页设计培训教程零点 起飞电脑培训学校层的建立 将插入点放置在“文档”编辑窗口中,然后选择插入布局对象层菜单命令将自动在插入点插入一个层。在“插入栏”的“布局”插入栏中单击“绘制层”按钮,拖动鼠标绘制一个层。在“插入栏”的“布局”插入栏中单击“绘制层”按钮,在文档编辑窗口中单击鼠标可绘制一个层。在“插入栏”的“布局”插入栏中单击“绘制层”按钮,按住【Ctrl】键并拖动即可连续绘制多个层。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校层的嵌套 层与表格相似,可进行嵌套。在某层内新创建的层称为嵌套层或子层,嵌套层外部的层称为父层。子层可浮动于文本编辑窗口
3、的任何位置,子层的大小也可以大于父层,可根据实际需要嵌套多个层。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校认识“层”面板 “层”面板是对层进行管理的场所,可以方便地查看层的结构。要显示或隐藏“层”面板,可选择窗口层菜单命令或按【F2】键。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校选择、移动和对齐层 选择层 选择单个层 选择多个层 移动层 对齐层 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校选择单个层 在文档编辑区中单击层边框。在层中单击鼠标左键,再单击该层的选择柄。在“层”面板中单击要选择的层的名称。按住【Ctrl
4、+Shift】键并在层中单击即可选择层。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校选择多个层 按住【Shift】键,在需要选择的多个层中单击,同时“层”面板中选择的层以反白显示。按住【Shift】键,在“层”面板中单击要选择的多个层的名称。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校移动层 在网页制作中往往需要精确定位层的位置,这就需要对创建的层进行移动。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校对齐层 在网页制作中常常需要将某些层按照一定的规定对齐。在进行层的对齐操作时,嵌套层中所有子层并不参与层的对齐操作,它
5、们只随父层的移动而移动,并始终与父层保持相对的固定位置。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校层大小和属性设置 层大小的设置 设置单个层的大小 设置多个层的大小 层属性的设置 设置单个层的属性 设置多个层的属性 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校设置单个层的大小 在文档编辑区选择一个层,在出现的调整柄上按住鼠标左键不放并拖动,当调整到适当的大小时释放鼠标即可。 在文档编辑区选择一个层,按住【Ctrl】键的同时再按键盘上的方向键即可按一次1个像素的步幅来调整层大小。 在文档编辑区选择一个层,按住【Shift+Ctrl】键的同时再按
6、键盘上的方向键即可按一次10个像素的步幅来调整层大小。 在文档编辑区选择一个层,以像素为单位在属性面板中输入宽度和高度的值。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校设置多个层的大小 在文档编辑区选择两个或多个层,选择修改排列顺序设成宽度相同菜单命令或修改排列顺序设成高度相同菜单命令。首先选择的层将自动调整为最后一个选择的层相同的宽度或高度。在文档编辑区选择两个或多个层,再在属性面板中的“多个层”栏中输入宽度和高度值,这些值将应用于所有选择的层。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校设置单个层的属性 在“属性”面板中进行设置。中文Dr
7、eamweaver 8网页设计培训教程零点 起飞电脑培训学校设置多个层的属性 在“属性”面板中进行设置。中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校层的显示和隐藏 在层中可插入所有的网页元素,若想控制层内元素的显示与隐藏可通过改变层的可见性来实现。 单个层的显示和隐藏 多个层的显示和隐藏 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校单个层的显示和隐藏 在Dreamweaver 8中可通过“层”面板和属性面板对层的显示或隐藏进行控制。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校多个层的显示和隐藏 更改多个层的可见性可在“层
8、”面板中设置,单击该列顶部标题的“眼睛”图标,设置所有的层的显示或隐藏。要将子层设置为“继承”父层的属性则需在属性面板中设置。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校层名的变更 层的名称并非固定不便,为了制作网页时方便工作,可以将层名更改为容易理解和记忆的名称,变更层的名称有以下两种方法。在“层”属性面板的“层编号”文本框中输入层的名称。在“层”面板中设置层的名称。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校层的堆叠和删除 层的堆叠设置 用属性面板设置层的堆叠 用“层”面板设置层的堆叠 使用菜单命令设置层的堆叠层的删除 中文Dreamwe
9、aver 8网页设计培训教程零点 起飞电脑培训学校用属性面板设置层的堆叠 在“层”面板或文档编辑区中选择一个层。 在“层”属性面板的“Z轴”文本框中输入一个较大的数字将该层在堆叠顺序中上移,输入一个较小的数字可将该层在堆叠顺序中下移。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校用“层”面板设置层的堆叠 选择窗口层菜单命令或按【F2】键打开“层”面板。选择要改变堆叠顺序的层,将层向上或向下拖至所需的位置时释放鼠标即可。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校使用菜单命令设置层的堆叠 在“层”面板或文档编辑区中选择一个层。 选择修改排列顺序子
10、菜单中的“移到最上层”或“移到最下层”命令即可。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校层的删除 当不需要某层时,就应将该层删除。在“层”面板或文档编辑区中选择需删除的层,然后按【Delete】键或选择编辑清除菜单命令,还可以在层上单击鼠标右键,在弹出的快捷菜单中选择“删除标签”命令,将层删除。如果将嵌套层中的父层删除,则其下包含的所有子层也将同时被删除。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校层与表格的相互转换 将层转换为表格 将表格转换为层 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校将层转换为表格 层和表
11、格都是对网页进行精确定位的工具,用层定位比表格定位使用起来更加方便,但层只有在Internet Explorer 4.0或Netscape Navigator 4.0以上的版本中才能够正确显示。表格对浏览器的版本高低没有要求,如果要使设计的网页在更低版本的浏览器中也能被正确显示,那么可将用层设计的网页转换为表格形式。中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校将表格转换为层 在网页制作中,表格的灵活性没有层的灵活性强,为了方便调整一些元素的位置,可将表格转化为层。由于层能定位到网页中任何位置,所以将表格转换为层后可以方便定位网页元素的位置。 中文Dreamweaver
12、8网页设计培训教程零点 起飞电脑培训学校上机实战 本课上机实战将用层布局“悠悠音乐”网站首页页面。通过练习可使读者巩固层的创建、层的选择、层的移动以及层的属性设置等操作。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校 课堂讲解 上机实战 第9课 为网页插入动态元素 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校课堂讲解 了解动态元素 插入Flash影片 插入Flash按钮 插入Flash文本 插入Flash Video 插入其他动态元素 为网页加入音乐文件 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校了解动态元素 媒体的来源
13、系统集成 网络下载 从素材库导入 自己制作 Flash简介 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校系统集成 在Dreamweaver 8中集成了许多Flash按钮,可以在它的页面中方便地插入Flash按钮和Flash文本。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校网络下载 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校从素材库导入 对于没有使用网络的用户,可以购买市面上出售的网页制作素材库光盘,使用时只需将素材导入Dreamweaver 8中即可。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学
14、校自己制作 在网上下载和购买的媒体虽然方便,但在实际中往往不能直接为我们所用。如果自己对制作这些素材的软件熟悉,有一定的美术、编程基础,也可自己制作。不过各种媒体的制作软件都不同,Flash动画是使用Macromedia Flash软件来制作的,而Shockwave影片则是通过Macromedia Director来创建的。在网页中使用最多的就是Flash元素了。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校Flash简介 *.fla:Flash的源文件,在Flash应用程序中创建,只能在Flash中打开,不能在Dreamweaver 8或浏览器中打开。必须在Flash
15、中将其导出为SWF或SWT的格式文件,才可以在浏览器中播放。 *.swf:压缩格式的Flash文件,是运用于网络中最优的格式文件,可以在浏览器和Dreamweaver 8中播放,但不能在Flash中打开进行编辑。使用Dreamweaver 8集成的Flash按钮和Flash文本创建的文件就是这种类型的文件。 *.swt:这种类型的文件允许对Flash动画文件中的信息进行编辑。它主要用在Flash按钮对象中,可以利用自己的文本或链接来修改模板,创建自己的SWF来插入到设计视图中。在“Dreamweaver 8ConfigurationFlash Objects Flash Buttons and
16、 Flash Text”文件夹中可以查看这些文件。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校插入Flash影片 插入Flash影片之前,首先应在Flash制作软件中完成影片的制作,最好将其制作好后保存在站点相应文件夹中。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校插入Flash按钮 在Dreamweaver 8中可以插入自己制作的Flash按钮,也可插入Dreamweaver 8集成的动态按钮。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校插入Flash文本 Flash文本是Dreamweaver 8集成的文本动画。
17、插入Flash文本与插入Flash按钮的方法类似。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校插入Flash Video 插入Flash Video是Dreamweaver 8新增加的功能,使用该功能可以轻松的在网页中插入一段Flash视频,在网页中浏览该视频时,网页不仅显示该视频信息,还将显示播放Flash视频的控件。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校插入其他动态元素 插入Shockwave影片插入Java Applet插入ActiveX控件插入插件中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校插入Shock
18、wave影片 Shockwave是Macromedia公司制定的一种网上媒体交互压缩格式的标准,其生成的压缩格式可以被快速下载,并且被目前的主流浏览器所支持。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校插入Java Applet Java Applet是美国SUN公司开发的Java程序设计语言中的一个小应用程序,它能实现动态、安全和跨平台的网络应用。将Java Applet嵌入到HTML语言中能实现网页中各种各样的特殊效果和较为复杂的控制。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校插入ActiveX控件 ActiveX控件是Microsof
19、t对浏览器的能力扩展,ActiveX控件的作用和插件基本上是相同的,但两者还是存在着差异,载入网页时,如果浏览器不支持ActiveX控件,浏览器会自动安装所需软件,如果是插件,则需用户手动安装相关软件。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校插入插件 如果想在浏览器中访问更多类型的媒体对象(如Shockwave影片和MIDI音乐等),就必须借助插件,前面介绍的Shockwave就是插件中的一员。中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校为网页加入音乐文件 当访问者打开了添加背景音乐的网页时背景音乐即会自动播放,设置背景音乐可以加深浏览者对
20、网站的印象,更加突出网站主题。 加入背景音乐 添加背景音乐代码 通过插入插件来添加背景音乐 页面音乐的链接和嵌入中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校添加背景音乐代码 其 中 s r c 指 定 音 乐 文 件 的 位 置 ,hidden=true 表示不显示播放器,loop=true表示循环播放。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校页面音乐的链接和嵌入 前面讲解了背景音乐的设置,但有时需要对一段文本或一张图像链接声音文件,产生诸如单击文本或图像时能听到“噗”一声的效果。嵌入声音到网页中也是通过插入插件的方法实现的,这里不再赘述。
21、另外,也可以通过添加行为的方法来实现声音的链接和嵌入。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校上机实战 本课上机实战主要练习在有基本框架的页面中插入Flash影片、Flash文本、Flash按钮及背景音乐等知识。通过练习,读者应掌握网页中各种动态元素的插入方法,并重点掌握Flash媒体元素的插入。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校 课堂讲解 上机实战 第10课 行为与事件 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校课堂讲解 什么是行为 什么是事件 认识“行为”面板 添加、修改和删除行为 获取更多的行为
22、应用行为 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校什么是行为 行为(Behavior)是在Dreamweaver 8中预置的JavaScript程序,由事件(event)和对应动作(actions)组成。它能实现用户与网页间的交互,通过某个动作来触发某项计划。如当用户在页面中将鼠标移动并单击某一个链接后,载入了一幅图像,这就产生了两个事件onMouseOver和onClick,同时触发了一个动作载入图像。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校什么是事件 浏览器都会提供一组事件,事件与动作相关联。当访问者与网页进行交互时,浏览器生成事件
23、,但并非所有的事件都是交互的,如设置网页每10s自动重新载入。 根据所选对象和在“显示事件”子菜单中指定的浏览器的不同,显示在“事件”下拉列表框中的事件将有所不同。Internet Explorer和Netscape Navigator是当今主的流浏览器。IE4表明此事件适用于Internet Explorer 4.0浏览器,NE4表明此事件适用于Netscape Navigator 4.0浏览器。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校认识“行为”面板 在使用行为前要先了解行为的具体操作场所“行为”面板,在Dreamweaver 8右侧的浮动面板组中打开“标签”
24、面板,在其中单击“行为”选项卡打开“行为”面板,如没有“行为”面板,可以选择窗口行为菜单命令,也可按【Shift+F4】键打开“行为”面板。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校添加、修改和删除行为 添加行为 修改行为 删除行为 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校添加行为 在不同类型的浏览器中可以根据需要将行为附加到整个文档、链接、图像、表单对象或任何其他的HTML元素中。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校修改行为 选择添加行为的对象。按【Shift+F4】键打开“行为”面板,在其“动作”列表
25、中双击要修改的行为动作或将其选择并按【Enter】键,也可单击鼠标右键,在弹出的快捷菜单中选择“编辑行为”命令,在打开的对话框中进行修改,然后单击“确定”按钮。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校删除行为 在“行为”面板中选择要删除的行为。单击 按钮或在行为上单击鼠标右键,在弹出的快捷菜单中选择“删除行为”命令,还可以直接按【Delete】键即可。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校获取更多的行为 Dreamweaver 8自带的行为比较少,如果想获取更多的行为可以从Macromedia公司和其他第三方的开发网站下载。在“行为
26、”下拉列表中选择“获取更多的行为”选项,则会打开Macromedia公司官方网站提供的行为下载页面。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校应用行为 设置文本 “设置层文本”行为 “设置框架文本”行为 “设置文本域文本”行为 “设置状态栏文本”行为 播放声音 打开浏览器窗口 交换图像 恢复交换图像 改变属性 检查浏览器 检查插件 检查表单 设置导航栏图像 转到URL 弹出信息 拖动层 显示-隐藏层 弹出式菜单 调用JavaScript 控制Shockwave或Flash 预先载入图像 跳转菜单 跳转菜单开始 时间轴 中文Dreamweaver 8网页设计培训教程零
27、点 起飞电脑培训学校“设置层文本”行为 “设置层文本”行为可以用指定的内容替换现有层的内容和格式设置,但将保留层的属性,包括颜色。该内容可以包括任何有效的HTML源代码。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校“设置框架文本”行为 “设置框架文本”行为可以动态设置框架的文本,用指定的内容替换框架的内容和格式设置。该内容可以包含任何有效的HTML源代码。使用此行为可以动态显示信息。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校“设置文本域文本”行为 “设置文本域文字”行为可以用指定的内容替换表单文本域的内容。 中文Dreamweaver 8网
28、页设计培训教程零点 起飞电脑培训学校“设置状态栏文本”行为 “设置状态栏文本”行为可在浏览器窗口底部左侧的状态栏中显示消息。如可以使用此行为在状态栏中说明链接的目标而不是显示链接的URL。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校播放声音 “播放声音”行为用来播放声音和音乐文件,页面背景音乐和鼠标单击时的声音都可以用此行为设置。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校打开浏览器窗口 打开一个新的浏览器窗口,在其中显示所指定的内容,网页设计者可指定该新窗口尺寸、是否可调节大小、是否有菜单等属性。 中文Dreamweaver 8网页设计培训
29、教程零点 起飞电脑培训学校交换图像 “交换图像”行为可将一个图像替换为另一个图像,这是通过更改“scr”属性来实现的,此动作一般用来创建翻转按钮以及同时替换多个图片。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校恢复交换图像 “恢复交换图像”行为用于将替换的图像恢复为原始的图像文件。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校改变属性 “改变属性”行为用于改变网页元素的属性值。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校检查浏览器 “检查浏览器”行为是为了根据浏览者使用的浏览器版本的不同来决定访问的不同网页,以提高网页
30、的兼容性。可将此行为添加到与任何浏览器都兼容页面的body标签上,也可以将此行为添加到一个空链接上,并让该行为根据访问者浏览器的类型和版本确定链接的目标页面。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校检查插件 “检查插件”行为用于检查访问者的电脑中是否安装了特定的插件,而决定将浏览者带往不同的页面,如浏览者电脑中安装了Flash插件,那么就播放Flash给浏览者观看,如果没有安装,就直接将浏览者带往没有Flash的页面。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校检查表单 “检查表单”行为用于检查指定文本域的内容,以确保用户输入了正确的数据
31、类型。使用“onBlur”事件添加到文本域,可以在用户填写表单时对域进行检查,若使用“onSubmit”事件将其添加到表单,在用户提交表单时可同时对多个文本域进行检查。使用该行为可以防止表单提交到服务器后指定的文本域包含无效的数据。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校设置导航栏图像 “设置导航栏图像”行为用于将某个图像变为导航条图像,也可更改导航条中图像的显示和动作。使用“设置导航栏图像”行为,可以实现选择插入图像对象导航条菜单命令一样的功能。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校转到URL 选择“转到URL”行为可在当前窗口或
32、指定框架内打开一个新的页面。此行为在一次单击改变两个或更多框架的内容时特别有用,它也可以在时间轴内被调用,在特定时间间隔后跳转到新的页面。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校弹出信息 “弹出信息”行为将用于显示一个指定的JavaScript提示信息框。该提示信息是提供给浏览者信息的,浏览者不能做出选择,也不能控制信息框的外观,只有一个“确定”按钮,其外观取决于浏览器属性。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校拖动层 “拖动层”行为使网页中层的位置不再是固定不变的,而是可以随着浏览者的鼠标运动而运动,层在拖动过程中还可调用Java
33、Script代码或函数,从而实现一些特殊效果。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校显示-隐藏层 “显示-隐藏层”行为用于改变一个或多个层的可见性。此行为可以用于交互时显示信息。如当鼠标光标滑过一个图像时,则显示该图像的相关信息,当鼠标光标离开这个图像时,提示信息则消失。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校弹出式菜单 “弹出式菜单”行为用于在网页中实现类似于Windows系统中菜单效果,在设计网页时可以把一个类别的页面都放在菜单中,这样就能从主页直接访问到需要的子页,以方便浏览者。 中文Dreamweaver 8网页设计培训教程
34、零点 起飞电脑培训学校跳转菜单 “跳转菜单”行为是用于修改已经创建好的跳转菜单。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校跳转菜单开始 “跳转菜单开始”行为与“跳转菜单”行为密切相关,“跳转菜单开始”行为允许将“前往”按钮和一个“跳转菜单”行为关联起来。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校调用JavaScript “调用JavaScript”行为用于执行“行为”面板中某个特定事件时调用自己编写的JavaScript代码、函数。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校控制Shockwave或Flash “
35、控制Shockwave或Flash”行为用来控制Macromedia Shockwave或Macromedia Flash的播放、停止、重放或跳转到某一帧操作。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校预先载入图像 在网页中包含了各种各样的图像,有些图像在网页被浏览器下载的时候不能被同时下载,要显示这些图片就需要再次发出下载指令,这样会影响浏览者的浏览。这时可使用“预先载入图像”行为先将这些图片载入到浏览器的缓存中,避免出现延迟。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校时间轴 “时间轴”行为包括“播放时间轴”、“停止时间轴”和“转到时间
36、轴帧”3项,通过链接或者按钮来控制时间轴动画的播放。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校上机实战 本课上机实战将为已经制作好的“项目介绍”页面添加弹出信息、打开浏览器窗口、添加弹出式菜单和检查插件行为。在练习过程中,主要用到行为的概念、行为的编辑方法、弹出信息的创建、打开浏览器窗口以及显示弹出式菜单行为等知识点。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校 课堂讲解 上机实战 第11课 CSS样式 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校课堂讲解 CSS样式简介创建CSS样式设置CSS样式 管理CSS样式
37、应用CSS滤镜效果扩展的CSS支持 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校CSS样式简介 CSS(Cascading Style Sheets)样式又叫层叠样式,使用它可以对网页中的布局元素,如表格、字体、颜色、背景、链接效果和其他图文效果实现更加精确的控制。CSS样式不仅可以在一个页面中使用,而且可以用于其他多个页面。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校创建CSS样式自定义CSS样式 HTML标签样式 CSS选择器样式 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校自定义CSS样式 自定义CSS样式可以对任
38、何文本块或文本区域进行且需要用户手动进行应用。中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校HTML标签样式 该样式是对现有的HTML标记进行重新定义,当创建或改变该样式时,所有应用了该样式的文本格式都会自动更新。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校CSS选择器样式 该样式是对某些特定的标记组合进行重新定义,如所有包含了特定ID属性的标记,设置完成此样式后Dreamweaver会自动应用该样式。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校设置CSS样式 类型设置 背景设置 区块设置 方框设置 边框设置 列表设置
39、定位设置 扩展设置 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校类型设置 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校背景设置 “背景”设置包括设置背景颜色、选择背景图像、设置背景图像是否重复及重复的方式、背景图像是否滚动、背景图像相对于应用样式元素的位置。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校区块设置 “区块”指网页中文本、图像和层等替代元素,主要用于控制块中元素的间距和对齐方式等。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校方框设置 “方框”设置可以定义控制元素在页面上的放置方式和属性
40、等。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校边框设置 “边框”设置包括定义元素周围边框的样式、宽度及颜色等。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校列表设置 “列表”设置主要用于控制列表内各项元素的属性,如项目符号类型、项目符号图像和项目符号位置。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校定位设置 “定位”设置主要用于控制网页元素,特别是层的位置。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校扩展设置 “扩展”设置主要用于为打印的页面设置分页和为网页元素设置视觉效果。 中文Dream
41、weaver 8网页设计培训教程零点 起飞电脑培训学校管理CSS样式 修改CSS样式 删除CSS样式 复制CSS样式 重命名层叠样式 应用CSS样式表 自定义CSS样式的应用 链接外部CSS样式 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校修改CSS样式 创建层叠样式后,可以修改样式中的某些参数。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校删除CSS样式 在“CSS样式”面板中,选择要删除的样式名称。单击面板底部的“删除”按钮即可将样式删除。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校复制CSS样式 复制一个已经创建完
42、成的CSS样式,再对其参数进行修改,即可创建一个全新的CSS样式,这样可以提高工作效率。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校重命名层叠样式 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校自定义CSS样式的应用 在CSS样式中的HTML标签样式和CSS选择器样式是自动应用的,只有自定义层叠样式需要用户手动操作。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校链接外部CSS样式 通过链接外部CSS样式可将其他网页中的样式应用到当前网页中。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校应用CSS滤镜
43、效果 CSS滤镜是CSS的一个扩展,能把可视化的滤镜和转换效果添加到一个标准的HTML元素上,使应用样式的对象产生模糊、反转、发光等特殊效果。在Dreamweaver 8中,可直接在对话框中添加滤镜的参数,而不用编写复杂的代码。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校扩展的CSS支持 在Dreamweaver 8中,CSS面板设计成了统一的面板,我们在此面板中可以快速确认样式、编辑样式、查看应用于页面元素的样式。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校上机实战 本课上机实战主要练习某公司站点的CSS样式定义。在练习中主要用到CSS样式
44、的创建和添加外部CSS样式的链接等知识点,通过练习读者应充分掌握自定义样式、HTML标签样式等CSS样式的创建。在制作中主要分为创建标签样式、自定义文本样式以及创建超级链接样式这3个部分。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校 课堂讲解 上机实战 第12课 为网页添加表单 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校课堂讲解 创建表单 添加表单对象 美化表单 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校创建表单 建立表单 设置表单属性 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校建立表单 在
45、Dreamweaver 8中,表单是用来输入数据或与网站进行交互的工具。可以将整个网页创建成一个表单网页,也可以在网页的部分区域中添加表单,其创建方法都相同。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校设置表单属性 将插入点定位到插入的表单中,打开属性面板可以对其属性进行设置。中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校添加表单对象 认识表单对象 文本字段 隐藏域 文本区域 复选框 单选按钮 单选按钮组列表/菜单 跳转菜单 图像域 插入表单对象插入文本字段 插入隐藏域 文件域按钮 标签 字段集 插入文本区域 插入复选框 插入单选按钮 插入单选按
46、钮组 插入列表/菜单 插入图像域 插入文件域 插入按钮 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校文本字段 文本字段是最常见的表单对象之一,可以输入字母、数字、文本等类型的内容。文本可以是单行或多行显示,也可以以密码的方式显示,在这种情况下,输入文本将被替换为星号或项目符号,以避免旁观者看到这些文本,一般用作密码等项目。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校隐藏域 隐藏域用于存储用户输入的信息,但它并不会在网页上显示出来,只是为了向服务器提供一些数据。如输入一项电子邮件地址后,服务器就记住了该数据,下次访问时就不用再输入。 中文Drea
47、mweaver 8网页设计培训教程零点 起飞电脑培训学校文本区域 文本区域用来输入大段文本,与文本字段使用方式相同,也可以以密码的方式显示。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校复选框 复选框的标记是在选项前有符号 ,其允许同时选择多个选项。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校单选按钮 在一组选项中只能选择一个选项,如在性别单选按钮组中选中了“男”单选按钮,再选中“女”单选按钮时, “男”单选按钮就会被撤消。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校单选按钮组 一组相关联的单选按钮,同样一次只能选择一
48、个单选按钮。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校列表/菜单 “列表”指在一个下拉列表框中显示一些选项,可以从其中选择多个。“菜单”指在一个菜单中显示一些选项值,用户只能从中选择单个选项。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校跳转菜单 可跳转的列表或弹出菜单,可以用它插入一种菜单,这种菜单中的每个选项都可以链接到某个文档或文件。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校图像域 可以在表单中插入一个图像。图像域可用于制作图形化按钮,使按钮更美观、更独特。 中文Dreamweaver 8网页设计培训教程零点
49、 起飞电脑培训学校文件域 使用户可以浏览到本地电脑上的某个文件,并将该文件作为表单数据上传。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校按钮 在单击时执行操作。通常这些操作包括提交或重置表单并可以为按钮添加自定义的名称或标签。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校标签 使用标签选择器将Dreamweaver 8标签库、ColdFusion标签库、ASP.NET标签库中的任何标签插入到页面中。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校字段集 表单元素逻辑组的容器标签。 中文Dreamweaver 8网页设计培训
50、教程零点 起飞电脑培训学校插入文本字段 根据文本字段的行数和显示方式可分为单行文本字段、多行文本字段和密码3种。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校插入隐藏域 隐藏域在浏览器上不显示。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校插入文本区域 插入文本区域的方法与插入文本字段方法相同,设置方法也相同。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校插入复选框 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校插入单选按钮 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校插入单选
51、按钮组 插入单选按钮组方式可一次性插入多个单选按钮。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校插入列表/菜单 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校插入图像域 图像域用来将图像作为按钮。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校插入文件域 文件域与单行文本字段外型相似,只是在文本框右侧增加了一个“浏览”按钮,用于引用本地电脑上的文件作为表单内容。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校插入按钮 表单按钮在表单中用于控制表单的操作。 中文Dreamweaver 8网页设计培训教程零
52、点 起飞电脑培训学校美化表单 在Internet上的表单都很美观,所以在制作好表单之后,还需要对表单进行美化操作。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校上机实战 本课上机实战将制作一个论坛的注册页面。在练习过程中将用到创建表单、设置表单属性、添加表单对象和设置表单对象的属性等知识点。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校 课堂讲解 上机实战 第13课 布局模式、模板与资源列表 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校课堂讲解 布局模式 使用模板资源列表与库中文Dreamweaver 8网页设计培训教程零
53、点 起飞电脑培训学校布局模式 认识布局模式 切换到布局模式 认识布局视图 退出布局模式 创建布局表格和布局单元格 在布局表格中添加内容 调整布局表格和布局单元格 设置布局模式首选参数 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校切换到布局模式 在绘制布局表格或布局单元格之前,必须切换到布局模式下。在“布局”插入栏中单击“布局”按钮即可切换到布局模式。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校认识布局视图 切换到布局模式后,在编辑窗口的顶部会出现标有“布局模式”的蓝色长条。如果当前网页上存在表格,则会自动转换为布局表格,而表格中的单元格则不会转
54、换为布局单元格。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校退出布局模式 在布局模式中制作完布局表格后,最好退出布局模式到标准模式下进行内容的添加和编辑。 在文档编辑区的顶部,单击“退出”超级链接。选择查看表格模式标准模式菜单命令。在“布局”插入栏中单击“标准”按钮。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校创建布局表格和布局单元格 在布局模式下使用布局表格和布局单元格进行页面布局时,一般先创建布局表格,再在布局表格中添加布局单元格,其绘制方法与层的绘制方法相同。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校在布局表
55、格中添加内容 在布局模式中可向布局表格中的布局单元格内添加文本、图像和其他网页元素,与在标准模式中将内容添加到表格单元格相同。在添加内容之前,必须先绘制布局单元格,因为内容只能添加到布局单元格中。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校调整布局表格和布局单元格 清除布局单元格高度 布局单元格的大小调整及布局表格的移动 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校清除布局单元格高度 清除单元格高度之后,单元格将自动被压缩,当向布局单元格内插入内容后,单元格将自动调整大小以适应插入的内容。 中文Dreamweaver 8网页设计培训教程零点 起
56、飞电脑培训学校布局单元格的大小调整及布局表格的移动 在Dreamweaver 8中可以移动或调整布局单元格的大小,但不能重叠布局单元格。对布局单元格进行移动或调整大小时,只能在布局表格的边框与内容的边线之间,只有嵌套在布局表格内部的才能被移动,其他的布局表格均不能移动。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校设置布局模式首选参数 要改变布局表格和布局单元格的显示颜色、自动插入间隔图像等属性,可通过设置布局模式参数来实现。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校使用模板建立模板 将现有网页保存为模板 创建空白模板 模板的编辑 创建可编辑
57、区域 取消对可编辑区域的标记 更改可编辑区域的名称 基于模板创建网页管理模板 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校将现有网页保存为模板 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校创建空白模板 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校创建可编辑区域 可编辑区域是指可以进行添加、修改和删除等操作的区域。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校取消对可编辑区域的标记 单击模板网页可编辑区域左上角要取消的可编辑区域标记。选择修改模板删除模板标记菜单命令即可。 中文Dreamweaver
58、8网页设计培训教程零点 起飞电脑培训学校更改可编辑区域的名称 插入可编辑区域后,可以更改它的名称。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校基于模板创建网页用现有模板创建网页 在“资源”面板中从模板创建新网页 将当前网页应用模板 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校用现有模板创建网页 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校在“资源”面板中从模板创建新网页 按【F11】键打开“资源”面板。在“资源”面板中单击左侧的按钮,查看当前站点中的模板列表框。用鼠标右键单击要应用的模板,在弹出的快捷菜单中选择“从模板新
59、建”命令,模板即会在编辑窗口中打开。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校将当前网页应用模板 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校管理模板 重命名模板 删除模板 打开网页所附模板 更新模板 将网页脱离模板 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校重命名模板 选择窗口资源菜单命令或按【F11】键,打开“资源”面板。在“资源”面板单击左侧的 按钮,打开模板列表框。在模板列表框中选择要重命名的模板文件,再单击模板名称或在选择的模板名称上单击鼠标右键,在弹出的快捷菜单中选择“重命名”命令,此时模板名称处于反白显
60、示,重新输入新名称即可。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校删除模板 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校打开网页所附模板 通过模板创建网页后,网页与模板间就是链接关系,这种应用了模板的网页常称为附着模板网页。修改模板后,系统自动更新附着模板的网页。 中文Dreamweaver 8网页设计培训教程零点 起飞电脑培训学校更新模板 打开要更新的模板。如果要对可编辑区域重新设置,可先取消可编辑区域标记,再选择要设置的可编辑区域,重新标记即可。修改可编辑区域网页内容后,选择文件保存菜单命令,打开“更新模板文件”对话框。单击“更新”按钮更
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 【正版授权】 IEC TR 61850-7-6:2024 EN Communication networks and systems for power utility automation - Part 7-6: Guideline for definition of Basic Application Profiles (BAPs) using IEC
- 2025-2030年中国镀锌层钝化剂行业发展趋势及投资战略研究报告
- 2025-2030年中国铅酸蓄电池行业市场现状分析规划研究报告
- 2025-2030年中国针织服装市场市场运行动态及投资战略研究报告
- 2025-2030年中国酮洛芬肠溶胶囊行业十三五规划与发展趋势分析报告
- 2025-2030年中国艾灸养生仪产业发展现状及前景趋势分析报告
- 2025-2030年中国美甲行业运行现状及发展前景分析报告
- 2025年四川省建筑安全员C证考试(专职安全员)题库及答案
- 皖北卫生职业学院《时间序列分析》2023-2024学年第二学期期末试卷
- 中央财经大学《商务智能》2023-2024学年第二学期期末试卷
- 幼儿看图填数
- 酒店项目精装修工程施工组织设计
- 小学生研学旅行展示ppt模板
- 《思想道德与法治》第一章
- 新概念英语第2册课文word版
- 大学生职业生涯规划(高职)PPT完整全套教学课件
- 微信小程序开发实战(第2版)全套PPT完整教学课件
- 部编版语文四年级下册全册大单元整体作业设计
- 重庆自然博物馆
- 收养人抚养教育被收养人能力的证明
- 施工升降机的安装步骤
评论
0/150
提交评论