《网页设计与制作》中.ppt

中,网页设计与制作,第7课 在网页中应用框架,第8课 在网页中应用层,第9课 为网页插入动态元素,第10课 行为与事件,第11课 CSS样式,课堂讲解 上机实战,第7课 在网页中应用框架,课堂讲解,认识框架和框架集 框架和框架集的创建 框架和框架集的选择和删除 框架和框架集的保存 框架和框架集的属性设置 处理不能显示框架的浏览器 框架的链接,认识框架和框架集,框架是将一个页面划分成不同的文档区，每个文档区显示独立的内容，其效果是在浏览网页时，网页中一部分区域（如公司Logo、导航条）内容不改变，而其他区域内容在不断发生改变。 框架集是HTML文件，它定义一组框架的布局和属性，包括框架的数目、大小、位置以及在框架中初始显示页面的地址。框架集文件本身不包含要在浏览器中显示的网页内容（对不能显示框架的浏览器进行的处理除外，即部分），框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些网页的有关信息。,框架和框架集的创建,在“插入”栏插入预定义的框架集 创建预定义框架集 手动设计框架,在“插入”栏插入预定义的框架集,在Dreamweaver 8中预定义了一些框架集样式，需要使用时直接插入即可。,创建预定义框架集,手动设计框架,框架和框架集的选择和删除,认识“框架”面板 选择框架与框架集 删除框架,认识“框架”面板,“框架”面板中显示所创建的框架结构，并在不同的框架区域中显示框架的名称。当在框架网页中新建、删除框架，或修改框架的尺寸、名称等时，“框架”面板中的示意图会跟随变化。,选择框架与框架集,在编辑窗口中选择 在“框架”面板中选择,在编辑窗口中选择,在编辑窗口中选择框架的方法很简单，按住【Alt】键，在要选择的框架内单击鼠标左键即可。被选取的框架边框呈虚线显示。 选择框架集时，单击框架边框即可，选取的所有框架边框呈虚线。,在“框架”面板中选择,在“框架”面板中单击框架区域中的任意位置即可选择框架，选中的框架以粗黑框显示。 在“框架”面板中单击框架边框即可选择框架集，如果要选择整个框架集，只需单击框架最外面的边框即可。,删除框架,如果窗口中有不需要的框架，可将其删除，用鼠标将要删除框架的边框拖到父框架边框上或拖离页面即可。,框架和框架集的保存,保存框架与框架集之后才能在浏览器中浏览用框架布局的网页。每个框架包含一个网页，一个框架集则包含多个网页，在保存时应保存所有的框架与框架集。 保存框架 保存框架集 保存框架集中的所有网页,保存框架,将插入点定位到要保存的框架中。 选择文件保存框架菜单命令，在打开的“另存为”对话框中像保存其他网页一样指定保存路径和文件名，然后单击“保存”按钮即可。,保存框架集,选中要保存的框架集。 选择文件保存框架页菜单命令，打开“另存为”对话框。 在“保存在”下拉列表框中选择框架集的保存路径，在“文件名”文本框中为框架集命名。 单击“保存”按钮即可保存框架集。,保存框架集中的所有网页,框架和框架集的属性设置,框架集的属性设置 框架集文档标题的设置 框架的属性设置,框架集的属性设置,使用框架集属性面板可以查看和设置大多数框架集属性。,框架集文档标题的设置,当访问者在浏览器中查看该框架集时，标题将显示在浏览器的标题栏中。,框架的属性设置,处理不能显示框架的浏览器,由于在低版本的浏览器中不能正确显示使用了框架的网页和框架中的内容，因此在Dreamweaver 8中允许指定在不支持框架的基于文本的浏览器和较旧的图形浏览器中显示内容。此类内容存储在框架集文件中，用标签括起来。当不支持框架的浏览器加载该框架集文件时，浏览器只显示用标签括起来的内容。,框架的链接,在使用了框架技术文档中的链接与一般文档中的链接不同，增加了与框架有关的链接目标，可以在一个框架内使用链接改变另一个框架的内容。,上机实战,本课上机实战主要练习个人网页的页面制作。在练习过程中，主要用到框架的创建、框架和框架集的属性设置、框架和框架集的保存、不能显示框架的处理等知识。本页面分为上中下3个框架来制作，在制作之前应先制作好各框架中要显示的网页。,课堂讲解 上机实战,第8课 在网页中应用层,课堂讲解,创建层 认识“层”面板 选择、移动和对齐层 层大小和属性设置 层的显示和隐藏 层名的变更 层的堆叠和删除 层与表格的相互转换,创建层,层的首选参数设置 层的建立 层的嵌套,层的首选参数设置,在新建层之前，通过“首选参数”对话框中的“层”选项来设置层的默认属性。,层的建立,将插入点放置在“文档”编辑窗口中，然后选择插入布局对象层菜单命令将自动在插入点插入一个层。 在“插入栏”的“布局”插入栏中单击“绘制层”按钮，拖动鼠标绘制一个层。 在“插入栏”的“布局”插入栏中单击“绘制层”按钮，按住【Ctrl】键并拖动即可连续绘制多个层。,层的嵌套,层与表格相似，可进行嵌套。在某层内新创建的层称为嵌套层或子层，嵌套层外部的层称为父层。子层可浮动于文本编辑窗口的任何位置，子层的大小也可以大于父层，可根据实际需要嵌套多个层。,认识“层”面板,“层”面板是对层进行管理的场所，可以方便地查看层的结构。要显示或隐藏“层”面板，可选择窗口层菜单命令或按【F2】键。,选择、移动和对齐层,选择层 选择单个层 选择多个层 移动层 对齐层,选择单个层,在文档编辑区中单击层边框。 在层中单击鼠标左键，再单击该层的选择柄。 在“层”面板中单击要选择的层的名称。 按住【Ctrl+Shift】键并在层中单击即可选择层。,选择多个层,按住【Shift】键，在需要选择的多个层中单击，同时“层”面板中选择的层以反白显示。 按住【Shift】键，在“层”面板中单击要选择的多个层的名称。,移动层,在网页制作中往往需要精确定位层的位置，这就需要对创建的层进行移动。,对齐层,在网页制作中常常需要将某些层按照一定的规定对齐。在进行层的对齐操作时，嵌套层中所有子层并不参与层的对齐操作，它们只随父层的移动而移动，并始终与父层保持相对的固定位置。,层大小和属性设置,层大小的设置 设置单个层的大小 设置多个层的大小 层属性的设置 设置单个层的属性 设置多个层的属性,设置单个层的大小,在文档编辑区选择一个层，在出现的调整柄上按住鼠标左键不放并拖动，当调整到适当的大小时释放鼠标即可。 在文档编辑区选择一个层，按住【Ctrl】键的同时再按键盘上的方向键即可按一次1个像素的步幅来调整层大小。 在文档编辑区选择一个层，按住【Shift+Ctrl】键的同时再按键盘上的方向键即可按一次10个像素的步幅来调整层大小。 在文档编辑区选择一个层，以像素为单位在属性面板中输入宽度和高度的值。,设置多个层的大小,在文档编辑区选择两个或多个层，选择修改排列顺序设成宽度相同菜单命令或修改排列顺序设成高度相同菜单命令。首先选择的层将自动调整为最后一个选择的层相同的宽度或高度。 在文档编辑区选择两个或多个层，再在属性面板中的“多个层”栏中输入宽度和高度值，这些值将应用于所有选择的层。,设置单个层的属性,在“属性”面板中进行设置。,设置多个层的属性,在“属性”面板中进行设置。,层的显示和隐藏,在层中可插入所有的网页元素，若想控制层内元素的显示与隐藏可通过改变层的可见性来实现。 单个层的显示和隐藏 多个层的显示和隐藏,单个层的显示和隐藏,在Dreamweaver 8中可通过“层”面板和属性面板对层的显示或隐藏进行控制。,多个层的显示和隐藏,更改多个层的可见性可在“层”面板中设置，单击该列顶部标题的“眼睛”图标，设置所有的层的显示或隐藏。要将子层设置为“继承”父层的属性则需在属性面板中设置。,层名的变更,层的名称并非固定不便，为了制作网页时方便工作，可以将层名更改为容易理解和记忆的名称，变更层的名称有以下两种方法。 在“层”属性面板的“层编号”文本框中输入层的名称。 在“层”面板中设置层的名称。,层的堆叠和删除,层的堆叠设置 用属性面板设置层的堆叠 用“层”面板设置层的堆叠 使用菜单命令设置层的堆叠 层的删除,用属性面板设置层的堆叠,在“层”面板或文档编辑区中选择一个层。 在“层”属性面板的“Z轴”文本框中输入一个较大的数字将该层在堆叠顺序中上移，输入一个较小的数字可将该层在堆叠顺序中下移。,用“层”面板设置层的堆叠,选择窗口层菜单命令或按【F2】键打开“层”面板。 选择要改变堆叠顺序的层，将层向上或向下拖至所需的位置时释放鼠标即可。,使用菜单命令设置层的堆叠,在“层”面板或文档编辑区中选择一个层。 选择修改排列顺序子菜单中的“移到最上层”或“移到最下层”命令即可。,层的删除,当不需要某层时，就应将该层删除。在“层”面板或文档编辑区中选择需删除的层，然后按【Delete】键或选择编辑清除菜单命令，还可以在层上单击鼠标右键，在弹出的快捷菜单中选择“删除标签”命令，将层删除。如果将嵌套层中的父层删除，则其下包含的所有子层也将同时被删除。,层与表格的相互转换,将层转换为表格 将表格转换为层,将层转换为表格,层和表格都是对网页进行精确定位的工具，用层定位比表格定位使用起来更加方便，但层只有在Internet Explorer 4.0或Netscape Navigator 4.0以上的版本中才能够正确显示。表格对浏览器的版本高低没有要求，如果要使设计的网页在更低版本的浏览器中也能被正确显示，那么可将用层设计的网页转换为表格形式。,将表格转换为层,在网页制作中，表格的灵活性没有层的灵活性强，为了方便调整一些元素的位置，可将表格转化为层。由于层能定位到网页中任何位置，所以将表格转换为层后可以方便定位网页元素的位置。,上机实战,本课上机实战将用层布局“悠悠音乐”网站首页页面。通过练习可使读者巩固层的创建、层的选择、层的移动以及层的属性设置等操作。,课堂讲解 上机实战,第9课 为网页插入动态元素,课堂讲解,了解动态元素 插入Flash影片 插入Flash按钮 插入Flash文本 插入Flash Video 插入其他动态元素 为网页加入音乐文件,了解动态元素,媒体的来源 系统集成 网络下载 从素材库导入 自己制作 Flash简介,系统集成,在Dreamweaver 8中集成了许多Flash按钮，可以在它的页面中方便地插入Flash按钮和Flash文本。,网络下载,提供各种媒体下载的网站非常多，如果不知道具体的网址，可通过google、百度等搜索引擎搜索。虽然网络上的媒体异彩纷呈，下载后便可使用，非常方便，但如需作商业用途，则请参照相关的版权信息，以免引发版权纠纷。 素材精品屋 动态网站制作指南 网页特效集锦 3lian素材 http:/www.J Java网站 Macromedia公司的 一个交互性娱乐服务网站,从素材库导入,对于没有使用网络的用户，可以购买市面上出售的网页制作素材库光盘，使用时只需将素材导入Dreamweaver 8中即可。,自己制作,在网上下载和购买的媒体虽然方便，但在实际中往往不能直接为我们所用。如果自己对制作这些素材的软件熟悉，有一定的美术、编程基础，也可自己制作。不过各种媒体的制作软件都不同，Flash动画是使用Macromedia Flash软件来制作的，而Shockwave影片则是通过Macromedia Director来创建的。在网页中使用最多的就是Flash元素了。,Flash简介,*.fla：Flash的源文件，在Flash应用程序中创建，只能在Flash中打开，不能在Dreamweaver 8或浏览器中打开。必须在Flash中将其导出为SWF或SWT的格式文件，才可以在浏览器中播放。 *.swf：压缩格式的Flash文件，是运用于网络中最优的格式文件，可以在浏览器和Dreamweaver 8中播放，但不能在Flash中打开进行编辑。使用Dreamweaver 8集成的Flash按钮和Flash文本创建的文件就是这种类型的文件。 *.swt：这种类型的文件允许对Flash动画文件中的信息进行编辑。它主要用在Flash按钮对象中，可以利用自己的文本或链接来修改模板，创建自己的SWF来插入到设计视图中。在“Dreamweaver 8ConfigurationFlash Objects Flash Buttons and Flash Text”文件夹中可以查看这些文件。,插入Flash影片,插入Flash影片之前，首先应在Flash制作软件中完成影片的制作，最好将其制作好后保存在站点相应文件夹中。,插入Flash按钮,在Dreamweaver 8中可以插入自己制作的Flash按钮，也可插入Dreamweaver 8集成的动态按钮。,插入Flash文本,Flash文本是Dreamweaver 8集成的文本动画。插入Flash文本与插入Flash按钮的方法类似。,插入Flash Video,插入Flash Video是Dreamweaver 8新增加的功能，使用该功能可以轻松的在网页中插入一段Flash视频，在网页中浏览该视频时，网页不仅显示该视频信息，还将显示播放Flash视频的控件。,插入其他动态元素,插入Shockwave影片 插入Java Applet 插入ActiveX控件 插入插件,插入Shockwave影片,Shockwave是Macromedia公司制定的一种网上媒体交互压缩格式的标准，其生成的压缩格式可以被快速下载，并且被目前的主流浏览器所支持。,插入Java Applet,Java Applet是美国SUN公司开发的Java程序设计语言中的一个小应用程序，它能实现动态、安全和跨平台的网络应用。将Java Applet嵌入到HTML语言中能实现网页中各种各样的特殊效果和较为复杂的控制。,插入ActiveX控件,ActiveX控件是Microsoft对浏览器的能力扩展，ActiveX控件的作用和插件基本上是相同的，但两者还是存在着差异，载入网页时，如果浏览器不支持ActiveX控件，浏览器会自动安装所需软件，如果是插件，则需用户手动安装相关软件。,插入插件,如果想在浏览器中访问更多类型的媒体对象（如Shockwave影片和MIDI音乐等），就必须借助插件，前面介绍的Shockwave就是插件中的一员。,为网页加入音乐文件,当访问者打开了添加背景音乐的网页时背景音乐即会自动播放，设置背景音乐可以加深浏览者对网站的印象，更加突出网站主题。 加入背景音乐 添加背景音乐代码 通过插入插件来添加背景音乐 页面音乐的链接和嵌入,添加背景音乐代码,其中src指定音乐文件的位置，hidden=true 表示不显示播放器，loop=true表示循环播放。,页面音乐的链接和嵌入,前面讲解了背景音乐的设置，但有时需要对一段文本或一张图像链接声音文件，产生诸如单击文本或图像时能听到“噗”一声的效果。嵌入声音到网页中也是通过插入插件的方法实现的，这里不再赘述。另外，也可以通过添加行为的方法来实现声音的链接和嵌入。,上机实战,本课上机实战主要练习在有基本框架的页面中插入Flash影片、Flash文本、Flash按钮及背景音乐等知识。通过练习，读者应掌握网页中各种动态元素的插入方法，并重点掌握Flash媒体元素的插入。,课堂讲解 上机实战,第10课 行为与事件,课堂讲解,什么是行为 什么是事件 认识“行为”面板 添加、修改和删除行为 获取更多的行为 应用行为,什么是行为,行为（Behavior）是在Dreamweaver 8中预置的JavaScript程序，由事件（event）和对应动作（actions）组成。它能实现用户与网页间的交互，通过某个动作来触发某项计划。如当用户在页面中将鼠标移动并单击某一个链接后，载入了一幅图像，这就产生了两个事件onMouseOver和onClick，同时触发了一个动作载入图像。,什么是事件,浏览器都会提供一组事件，事件与动作相关联。当访问者与网页进行交互时，浏览器生成事件，但并非所有的事件都是交互的，如设置网页每10s自动重新载入。 根据所选对象和在“显示事件”子菜单中指定的浏览器的不同，显示在“事件”下拉列表框中的事件将有所不同。Internet Explorer和Netscape Navigator是当今主的流浏览器。IE4表明此事件适用于Internet Explorer 4.0浏览器，NE4表明此事件适用于Netscape Navigator 4.0浏览器。,认识“行为”面板,在使用行为前要先了解行为的具体操作场所“行为”面板，在Dreamweaver 8右侧的浮动面板组中打开“标签”面板，在其中单击“行为”选项卡打开“行为”面板，如没有“行为”面板，可以选择窗口行为菜单命令，也可按【Shift+F4】键打开“行为”面板。,添加、修改和删除行为,添加行为 修改行为 删除行为,添加行为,在不同类型的浏览器中可以根据需要将行为附加到整个文档、链接、图像、表单对象或任何其他的HTML元素中。,修改行为,选择添加行为的对象。 按【Shift+F4】键打开“行为”面板，在其“动作”列表中双击要修改的行为动作或将其选择并按【Enter】键，也可单击鼠标右键，在弹出的快捷菜单中选择“编辑行为”命令，在打开的对话框中进行修改，然后单击“确定”按钮。,删除行为,在“行为”面板中选择要删除的行为。 单击 按钮或在行为上单击鼠标右键，在弹出的快捷菜单中选择“删除行为”命令，还可以直接按【Delete】键即可。,获取更多的行为,Dreamweaver 8自带的行为比较少，如果想获取更多的行为可以从Macromedia公司和其他第三方的开发网站下载。在“行为”下拉列表中选择“获取更多的行为”选项，则会打开Macromedia公司官方网站提供的行为下载页面。,应用行为,设置文本 “设置层文本”行为 “设置框架文本”行为 “设置文本域文本”行为 “设置状态栏文本”行为 播放声音 打开浏览器窗口 交换图像 恢复交换图像 改变属性,检查浏览器 检查插件 检查表单 设置导航栏图像 转到URL 弹出信息 拖动层 显示-隐藏层 弹出式菜单,调用JavaScript 控制Shockwave或Flash 预先载入图像 跳转菜单 跳转菜单开始 时间轴,“设置层文本”行为,“设置层文本”行为可以用指定的内容替换现有层的内容和格式设置，但将保留层的属性，包括颜色。该内容可以包括任何有效的HTML源代码。,“设置框架文本”行为,“设置框架文本”行为可以动态设置框架的文本，用指定的内容替换框架的内容和格式设置。该内容可以包含任何有效的HTML源代码。使用此行为可以动态显示信息。,“设置文本域文本”行为,“设置文本域文字”行为可以用指定的内容替换表单文本域的内容。,“设置状态栏文本”行为,“设置状态栏文本”行为可在浏览器窗口底部左侧的状态栏中显示消息。如可以使用此行为在状态栏中说明链接的目标而不是显示链接的URL。,播放声音,“播放声音”行为用来播放声音和音乐文件，页面背景音乐和鼠标单击时的声音都可以用此行为设置。,打开浏览器窗口,打开一个新的浏览器窗口，在其中显示所指定的内容，网页设计者可指定该新窗口尺寸、是否可调节大小、是否有菜单等属性。,交换图像,“交换图像”行为可将一个图像替换为另一个图像，这是通过更改“scr”属性来实现的，此动作一般用来创建翻转按钮以及同时替换多个图片。,恢复交换图像,“恢复交换图像”行为用于将替换的图像恢复为原始的图像文件。,改变属性,“改变属性”行为用于改变网页元素的属性值。,检查浏览器,“检查浏览器”行为是为了根据浏览者使用的浏览器版本的不同来决定访问的不同网页，以提高网页的兼容性。可将此行为添加到与任何浏览器都兼容页面的body标签上，也可以将此行为添加到一个空链接上，并让该行为根据访问者浏览器的类型和版本确定链接的目标页面。,检查插件,“检查插件”行为用于检查访问者的电脑中是否安装了特定的插件，而决定将浏览者带往不同的页面，如浏览者电脑中安装了Flash插件，那么就播放Flash给浏览者观看，如果没有安装，就直接将浏览者带往没有Flash的页面。,检查表单,“检查表单”行为用于检查指定文本域的内容，以确保用户输入了正确的数据类型。使用“onBlur”事件添加到文本域，可以在用户填写表单时对域进行检查，若使用“onSubmit”事件将其添加到表单，在用户提交表单时可同时对多个文本域进行检查。使用该行为可以防止表单提交到服务器后指定的文本域包含无效的数据。,设置导航栏图像,“设置导航栏图像”行为用于将某个图像变为导航条图像，也可更改导航条中图像的显示和动作。使用“设置导航栏图像”行为，可以实现选择插入图像对象导航条菜单命令一样的功能。,转到URL,选择“转到URL”行为可在当前窗口或指定框架内打开一个新的页面。此行为在一次单击改变两个或更多框架的内容时特别有用，它也可以在时间轴内被调用，在特定时间间隔后跳转到新的页面。,弹出信息,“弹出信息”行为将用于显示一个指定的JavaScript提示信息框。该提示信息是提供给浏览者信息的，浏览者不能做出选择，也不能控制信息框的外观，只有一个“确定”按钮，其外观取决于浏览器属性。,拖动层,“拖动层”行为使网页中层的位置不再是固定不变的，而是可以随着浏览者的鼠标运动而运动，层在拖动过程中还可调用JavaScript代码或函数，从而实现一些特殊效果。,显示-隐藏层,“显示-隐藏层”行为用于改变一个或多个层的可见性。此行为可以用于交互时显示信息。如当鼠标光标滑过一个图像时，则显示该图像的相关信息，当鼠标光标离开这个图像时，提示信息则消失。,弹出式菜单,“弹出式菜单”行为用于在网页中实现类似于Windows系统中菜单效果，在设计网页时可以把一个类别的页面都放在菜单中，这样就能从主页直接访问到需要的子页，以方便浏览者。,跳转菜单,“跳转菜单”行为是用于修改已经创建好的跳转菜单。,跳转菜单开始,“跳转菜单开始”行为与“跳转菜单”行为密切相关，“跳转菜单开始”行为允许将“前往”按钮和一个“跳转菜单”行为关联起来。,调用JavaScript,“调用JavaScript”行为用于执行“行为”面板中某个特定事件时调用自己编写的JavaScript代码、函数。,控制Shockwave或Flash,“控制Shockwave或Flash”行为用来控制Macromedia Shockwave或Macromedia Flash的播放、停止、重放或跳转到某一帧操作。,预先载入图像,在网页中包含了各种各样的图像，有些图像在网页被浏览器下载的时候不能被同时下载，要显示这些图片就需要再次发出下载指令，这样会影响浏览者的浏览。这时可使用“预先载入图像”行为先将这些图片载入到浏览器的缓存中，避免出现延迟。,时间轴,“时间轴”行为包括“播放时间轴”、“停止时间轴”和“转到时间轴帧”3项，通过链接或者按钮来控制时间轴动画的播放。,上机实战,本课上机实战将为已经制作好的“项目介绍”页面添加弹出信息、打开浏览器窗口、添加弹出式菜单和检查插件行为。在练习过程中，主要用到行为的概念、行为的编辑方法、弹出信息的创建、打开浏览器窗口以及显示弹出式菜单行为等知识点。,课堂讲解 上机实战,第11课 CSS样式,课堂讲解,CSS样式简介 创建CSS样式 设置CSS样式 管理CSS样式 应用CSS滤镜效果 扩展的CSS支持,CSS样式简介,CSS（Cascading Style Sheets）样式又叫层叠样式，使用它可以对网页中的布局元素，如表格、字体、颜色、背景、链接效果和其他图文效果实现更加精确的控制。CSS样式不仅可以在一个页面中使用，而且可以用于其他多个页面。,创建CSS样式,自定义CSS样式 HTML标签样式 CSS选择器样式,自定义CSS样式,自定义CSS样式可以对任何文本块或文本区域进行且需要用户手动进行应用。,HTML标签样式,该样式是对现有的HTML标记进行重新定义，当创建或改变该样式时，所有应用了该样式的文本格式都会自动更新