Dreamweaver8精品教程完整版课件全套ppt教学教程 最全电子讲义（最新）.ppt

《Dreamweaver8精品教程完整版课件全套ppt教学教程 最全电子讲义（最新）.ppt》由会员分享，可在线阅读，更多相关《Dreamweaver8精品教程完整版课件全套ppt教学教程 最全电子讲义（最新）.ppt（247页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第1章 初识网站和网页,网站和网页 网页中的元素类型 从功能角度分析网页 常用网站管理与制作软件 网站建设流程,1.1 网站和网页,网站是网页的集合，网页是组成网站的元素。,1.1.1 网站、网页和主页,网页,大型网站,一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。,小型网站,新浪网站首页,主页也叫首页，每个网站都有自己的首页，它是浏览者登录网站时看见的第一个网页，也是网站的入口。,1.1.2 网页是什么,网页中除了包含文字外，还包含图像、动画等内容。,图像,动画,文字,我们看到的一个个网页都是由多个文件组成的。网页文件是“根”，图像和动画文件都是“枝叶”。,图像文件

2、,网页文件,选择“文件”“另存为”菜单,在浏览器中选择“文件”菜单中的“另存为”，可将网页保存到磁盘中。,1.2 网页中的元素类型,1.2.1 网页中的文字与图像,文字与图像是网页中的基本元素，是浏览者获得相关信息的主要来源。 可在设计网页时为文字设置位置、字体、字号、颜色、对齐方式，以及加粗和倾斜等格式。 网页中只能使用和显示JPEG、GIF和PNG格式的图像，其他诸如BMP和TIF等格式的图像目前还都不能用于网页中。,1.2.2 网页中使用的动画与视频影像,视频流技术常见的格式有Real Video及Apple QuickTime。,GIF动画,SWF动画,目前，大家在网页中看到的动画主要

3、包括两类，即动态GIF格式动画和SWF格式动画。 动态GIF格式动画的原理十分简单，就是高速连续显示多幅静态图像，就像播放动画片一样。通常用于制作简单的小型动画。 如果需要在网页上使用一些大型、复杂或带有声音的动画，可借助Macromedia的Flash软件来制作SWF动画。,1.2.3 网页中使用的声音,适当的在网页上加点音乐效果，会使网页更具吸引力。目前，网上比较流行的音频格式主要有MIDI、WAV、MP3与Real Audio。,控制音乐的播放,1.3 从功能角度分析网页,从功能的角度来看，可以将网页中的元素分为站标、导航栏、广告条、标题栏和按钮。,站标,导航栏,广告条,标题栏,按钮,1

4、.3.1 站标,站标也叫LOGO，是网站的标志，其作用是使人看见它就能够联想到企业。因此，网站LOGO通常采用企业的LOGO。 LOGO通常采用带有企业特色和思想的图案，或是与企业相关的字符或符号及其变形，当然也有很多是图文组合。,1.3.2 导航栏,导航栏实际上是网站内多个页面的超链接组合。导航栏也是网站中所有重要内容的概括，可以让浏览者在最短时间内了解网站的主要内容。 设计导航栏时，有几点需要注意。,如果网站内容不多，并且导航栏不超过两排，可以根据网站风格尝试灵活摆放，如放在网页的左侧或者放在页面上方等。,页面左侧,页面上方,如果网站的栏目很多，可以将导航栏分为多排放置在主页LOGO的下方

5、或右侧，为便于观看，可为各排设置不同的底色。,LOGO右侧,LOGO下方,如果导航栏内容较多的话，尽量使用文字超链接而不用图片。不过，如果导航栏内容不多，或者网页内容比较活泼的话，多采用图片或Flash制作导航栏。,图片导航栏,Flash导航栏,广告条又称Banner，其功能是宣传网站或替其他企业做广告，以赚取广告费。,1.3.3 广告条,在Banner的制作过程中有一些要点需要注意： Banner可以是静态的也可以是动态的。 Banner的体积不宜过大，尽量使用GIF格式的图片与动画或Flash动画。 Banner中的文字不要太多，只要达到一定的提醒效果就可以。 Banner中图片的颜色不要

6、太多，尤其是GIF格式的图片或动画，要避免出现颜色的渐变和光晕效果。,这里的标题栏不是指整个网页的标题栏，而是网页内部各版块的标题栏，是各版块内容的概括。 标题栏可以是文字加单元格背景，也可以是图片，一般的大型网站都采用前者，一些内容少的小网站采用后者。,1.3.4 标题栏,标题栏,标题栏,网页中的按钮被点击之后，网页会实现相应的操作，比如页面跳转，或数据的传输等。 设计按钮时，要保证按钮与页面的协调，不能太抢眼，如果按钮上有字则尽量使用单色或渐变色背景，保证字迹清晰。当页面上有多个按钮的时候，应分清主次，根据网页的需要改变按钮的颜色或者大小。,1.3.5 按钮,按钮,按钮,1.4.1常用网站

7、管理与网页编辑软件,1.4 常用网站管理与制作软件,Dreamweaver：网页制作软件三剑客之一，该软件是现在使用最多的网页编辑工具，它支持DHTML动态网页、Flash动画、插件，能实现很多FrontPage无法实现的功能，如动态按钮、下拉菜单等。另外，它还可以用来作为动态网站的开发环境。 FrontPage：该软件是目前最简单、最容易上手，且功能强大的网页制作利器，特别适合网页初学者使用。不过，Frontpage也有不少缺点：首先是兼容性不好，利用FrontPage做出来的网页往往不能用Netscape浏览器正常显示；其次，生成的垃圾代码多；此外，FrontPage对动态网页支持不好，不

8、支持Flash，显得有点落伍了。,1.4.2 网页设计辅助软件,在进行网页制作时，除了需要Dreamweaver、FrontPage等软件外，还会用到Fireworks、Flash、Photoshop等软件，这些软件的主要功能与特点如下：,Fireworks：主要用于制作网页图像、标志、GIF动画、图像按钮与导航栏等。 Flash：主要用于制作矢量动画，如广告、网站片头动画、动画短片、MTV等。 Photoshop：Adobe公司出品的一个优秀而且强大的图形图像处理软件，起初它的应用领域主要是平面设计而不是网页设计，但是它所具有的强大功能完全涵盖了网页设计所涉及到的各种需求（除了多媒体）。,1

9、.4.3 常用网站程序设计语言,如果网站中包含动态网页，除了需要学习一些常用的网页设计软件外，还应掌握一些常用的网站程序设计语言。,JavaScript和VBScript脚本语言 Java CGI ASP ASP.net PHP JSP,1.5 网站建设流程,1.5.1 根据要求确定网站内容,建设网站要有目的性，首先要确定网站的性质和受众，并预期网站发布后的反响。确定了这些后就要开始组织网站的主要内容。,1.5.2 规划网站栏目,确定了网站内容后，就要开始进行网站规划。例如，将网站的内容划分成哪些栏目，从而使网站既便于浏览者的浏览，也有利于网站将来的维护和更新。,1.5.3 确定网页尺寸与版面

10、布局,目前显示器最常用的分辨率是1024768像素和800600像素。 在1024768的分辨率下显示的页面的尺寸应该为1007600像素，而800600的分辨率下显示的页面尺寸为778435像素。,确定了网页尺寸后，接下来的任务就是确定网页布局类型了。网页布局类型没有确定的标准，可以根据需要制定。常见的布局有上下分割型、左右分割型和复合分割型（上下分割和左右分割结合）。,上下分割型,左右分割型,1.5.4 确定网站配色与风格,不同的网站有着自己不同的风格，也有着自己不同的颜色。基本上网站使用的颜色从出发点上看可以分为以下3种类型：,行业风格色：许多网站使用颜色秉承着所属行业的风格。 企业标准

11、色：在现代企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要有标准的颜色。比如Intel官方网站的主色调是一种接近于天蓝的蓝色， 个人习惯色：这种配色方法的使用在很大程度上是凭设计者的个人爱好以及当时的心态决定的，在个人网站较为多见。,行业风格色,著名的化妆品公司玫琳凯中国网站使用的颜色是粉色。这几乎是所有化妆品行业中最常用到的颜色，这种颜色代表了高贵，典雅以及甜蜜等；,企业标准色,在现代企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要有标准的颜色。比如Intel官方网站的主色调是一种接近于天蓝的蓝色。,个人习惯色,这种配色方法在设计的时候自由度非常高，同时所选的题材

12、与要表现的内容也是由设计者自己决定，比如设计者喜欢红色和黑色，那么在设计的时候就倾向于使用这两种颜色。,下面是一些网页配色时的小技巧,用一种色彩：这里是指先选定一种色彩，然后调整透明度或者饱和度。 用两种色彩：先选定一种色彩，然后选择它的对比色。 用一个色系：简单地说就是用一个感觉的色彩，例如淡蓝、淡黄、淡绿，或者土黄、土灰、土蓝。 颜色不能太多：不要将所有颜色都用到，尽量控制在35种色彩以内。 背景和前文的对比：背景和前文的对比尽量要大（尤其不要使用花纹图案作为页面背景），以便突出主要文字内容。,1.5.5 收集网页所用素材,在制作网页之前，应首先收集好制作网页时要使用的素材，这些素材包括文

13、字资料、图片、动画、声音、视频等。 对于一些原始的材料还可以使用PhotoShop、Fireworks、Flash等软件进行处理，使其可以更好地应用于网页。,1.5.6 利用软件制作网页,制作网页也就是整合网页素材，即使用Dreamweaver等软件进行网页设计。 还可以根据需要为网页增加一些特效，比如闪烁的字幕、跳出动画、改变鼠标的形状等，这些多是通过JavaScript来实现的。,1.5.7 测试和发布网站,在发布之前需要先对网站进行测试，网站测试一般包括服务器稳定和安全测试、程序和数据库测试、网页兼容性测试等。 要发布网站，用户需要具备两个条件：域名和虚拟主机。提供这类服务的公司被称为域

14、名和网站托管服务商，目前，这类公司也有很多，如中国万网（）、通联无限（）等。,第2章 初识Dreamweaver 8,熟悉Dreamweaver 8操作环境 网站规划与管理 设置页面属性 上机实践编辑“墨攻”页面并保存,2.1 熟悉Dreamweaver操作环境,安装Dreamweaver 8后，单击“开始”按钮，选择“所有程序”“Macromedia”“Macromedia Dreamweaver 8”菜单，就可以启动Dreamweaver 8了。进入Dreamweaver 8后，首先映入眼帘的是起始页。,打开最近打开过的文件,创建不同类型的新文件,在系统内置文件的基础上创建新文件,在起始页

15、的“创建新项目”列中选择“HTML”后，将会进入Dreamweaver 8的工作界面。,菜单栏,标题栏,插入栏,文档标签,文档工具栏,收缩与展开下方面板组,状态栏,属性面板,收缩与展开右方面板组,面板组,2.1.1 “插入”栏,“插入”栏包含用于将各种类型的对象（如图像、表格和层）插入到文档中的按钮。 单击“插入”栏左侧的“常用”按钮可以打开一个下拉列表，从中选择其他选项可以改变“插入”栏的内容。,单击“常用”按钮，在下拉列表中选择“显示为制表符”命令，“插入”栏的外观将发生变化。,某些按钮的右侧带有一个小三角符号“ ”，单击该三角符号将弹出该按钮的一组同位按钮。,2.1.2 文档标签与文档工

16、具栏,文档标签显示了当前打开的网页文档的名称。,只显示代码视图,显示代码视图和设计视图,只显示设计视图,刷新设计视图,在浏览器中预览/调试,文档工具栏用于切换网页视图，管理文件，以及预览网页等。,文档标题,2.1.3 文档窗口中的状态栏,状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息。,标签选择器,手形工具,缩放工具,文档大小与预计下载时间,标签选择器显示了光标所在位置的标签的层次结构。 选取、手形和缩放工具是Dreamweaver 8新增的功能， 分别用于选取、移动和缩放对象。,选取工具,2.1.4 属性面板与面板组,属性面板用于查看或编辑所选对象的属性。属性面板会随着所选对象的不

17、同而变化。,选中图像后的属性面板,选中文字后的属性面板,Dreamweaver 8为用户提供了众多面板，如属性面板、文件面板、历史记录面板等。为便于管理，Dreamweaver 8将这些面板归入到不同的面板组中。,“文件”面板组包括三个面板,“CSS”面板组包括两个面板,2.2 网站规划、创建与管理,2.2.1 确定网站结构,所谓网站结构，就是网站中各个分支之间以及分支与主页之间的关系。 通常情况下，一个网站的结构往往与该网站的导航菜单相对应。,确定好网站结构后，接下来应根据网站结构创建本地站点，实际上就是确定本地站点以及文件的存放位置。,2.2.2 确定站点目录结构,2.2.3 定义站点,站

18、点信息,新站点,为便于管理和编辑站点，在创建网页之前，首先要在Dreamweaver中定义站点。 定义站点可以将本地磁盘中的站点同Dreamweaver建立一定的关联。,2.2.4 新建、打开和关闭网页文件,1.新建网页文件,Dreamweaver中的文件也就是网页，可以通过“文件”“新建”菜单来创建新网页。,2.打开网页文件,如果要打开某站点中现有的网页文件，可以选择“文件”“打开”菜单，在“打开”对话框中进行选择。,3.关闭网页文件,要关闭网页文件，只需单击相应文件右上角的“关闭”按钮，或者按【Ctrl+W】组合键。,2.2.5 保存和预览网页文件,新建或编辑网页文件后，需要保存文件，才能

19、使所做的设置生效。选择“文件”“保存”菜单或按【Ctrl+S】组合键，即可保存文件。,对网页进行编辑或修改后，按【F12】键可以在浏览器中预览其效果。,2.2.6 “文件”面板的应用,在Dreamweaver中，利用“文件”面板可以非常方便地管理站点中的网页文件和文件夹。,显示站点名称,连接到远程主机或与远程主机断开,刷新站点,获取文件,上传文件,取出文件,存回文件,选择视图,展开以同时显示本地和远程站点,站点内容列表,1新建文件和文件夹,利用“文件”面板可以方便地新建文件（实际上就是网页）和文件夹。,如要新建文件夹，可在弹出的菜单中选择“新建文件夹”选项，其他操作同上。,2重命名文件和文件夹

20、,在“文件”面板中可以方便地重命名文件和文件夹，在右键快捷菜单中选择“编辑”“重命名”菜单即可。,3文件与文件夹的命名规则,为便于日后的维护和管理，网站中所有文件和文件夹的命名都是有一定规则的。,最好不要使用中文命名文件。 文件名中不要使用大写英文字母。 运算符符号不能用在文件名的开头。 比较长的文件名可使用下划线“_”来隔开多个单词或关键字。 在大型网站中，分支页面的文件应存放在单独的文件夹中存放网页图像的文件夹一般命名为“images”或者“img”。 在动态网站中，用来存放数据库的文件夹一般被命名为“data”或者“database”。,4在“文件”面板中打开和删除文件,要打开文件，可以

21、直接在文件列表区双击文件名。如果是网页文件，该文件会自动在网页编辑区打开；如果是图像文件，系统会自动启动Fireworks并打开文件。 要删除文件或文件夹，可以右击文件或文件夹，然后在弹出的菜单中选择“编辑”“删除”，也可在选中文件后，直接按【Delete】键删除。,2.3 设置页面属性,2.3.1 外观选项,单击属性面板上的“页面属性”按钮，或者选择“修改”菜单下的“页面属性”命令，将打开“页面属性”对话框，默认显示为“外观”选项。,设置页面字体,设置页面字号,设置页面文本颜色,设置页面背景颜色,设置页面背景图像,设置背景图像重复方式,设置页面与浏览器左、右、上、下边界的距离,2.3.2 链

22、接选项,在“页面属性”对话框中，单击左侧“分类”列表中的“链接”选项，其参数设置将显示在对话框右侧。,设置链接文本的字体,设置链接文本的字号,设置链接文本在不同状态下的颜色,设置链接对象的下划线情况,2.3.3 标题选项,单击左侧“分类”列表中的“标题”选项，其参数设置将显示在对话框右侧。,设置页面标题的字体样式,设置各级标题的字号以及颜色,2.3.4 标题/编码选项,单击左侧“分类”列表中的“标题/编码”选项，其参数设置将显示在对话框右侧。,设置网页标题,指定文档类型定义,指定文档中字符所用的编码类型,2.3.5 跟踪图像选项,单击左侧“分类”列表中的“跟踪图像”选项，其参数设置将显示在对话

23、框右侧。,设置跟踪图像,设置跟踪图像的透明度,2.4 上机实践编辑“墨攻”页面并保存,本节通过编辑 “墨攻”页面，来使读者进一步领略Dreamweaver的独特魅力（具体操作见视频）。,第3章编辑基本网页元素,文本输入与编辑 上机实践设置“舞林报道”网页文本 使用图像 上机实践在“拍拍”网页中插入图像,3.1 文本输入与编辑,在Dreamweaver中可以通过设置文本的字体、字号、颜色、字符间距与行距等属性来区别不同的文本。 网页中文本的使用原则如下：,单个页面中不要使用超过三种以上的字体。 不要用太大的字号。 不要使用不停闪烁的文字。 标题文字的字号应当比正文字号稍大。,3.1.1 输入文本

24、,首先将光标定位在表格的某个单元格中，然后输入文字就可以了。 如果希望文本换行，可以按下【ShiftEnter】组合键；如果希望文本换段，可以直接按【Enter】键。,输入文本后的代码视图,输入文本后的设计视图,3.1.2 设置文本的段落格式和字符格式,在Dreamweaver中，可以利用属性面板为文本设置默认格式化样式或者直接设置所选文本的字体、大小、颜色等。,设置文本格式,设置文本字体,设置文本样式,设置文本大小,设置文本颜色,设置文本为粗体或斜体,设置文本对齐和列表格式,为所选文本设置链接,1设置字体列表,Dreamweaver中自带的字体有限，一般满足不了大多数网页设计者的需求。我们可

25、以通过设置字体列表来解决这一问题。,“编辑字体列表”对话框,2设置文本字体及大小,学会设置字体列表后，就可以随心所欲地设置文本的字体了。,选中文本,设置字体和倾斜,设置字号,3设置段落缩进,通过设置段落缩进格式，可以更好的布局文档。,在“格式”下拉列表中选择“段落”,段落突出,段落缩进,4设置列表项,列表分为项目列表和编号列表，项目列表常应用在“列举”类型的文本中，编号列表常应用在“条款”类型的文本中，这种方式使得文本更直观、明了。,选中文本,应用“项目列表”格式,3.1.3 输入特殊符号和不换行空格,要插入特殊字符，可选择“插入”“HTML”“特殊字符”命令，然后在弹出的菜单中选择相应的特殊

26、字符。,3.1.4 输入日期与水平线,在“插入”栏的“常用”类别中单击“日期”按钮 ，将打开“插入日期”对话框。,要插入水平线，可以选择“插入”“HTML”“水平线”菜单。在插入水平线后，还可通过属性面板设置其宽、高、对齐和阴影等。,3.2 上机实践设置“舞林报道”网页文本,本节我们以“舞林报道”网页为例，来练习网页文本的设置（具体操作见视频 ）。,3.3 使用图像,目前在网页中只能使用JPEG、GIF和PNG格式的图像。,JPEG格式适于表现色彩丰富，具有连续色调的图像。该格式的优点是图像质量高，缺点是文件尺寸稍大（相对于GIF格式），且不能包含透明区。 GIF格式最多只能包含256种颜色，

27、适合表现色调不连续或具有大面积单一颜色的图像。该格式的优点是图像尺寸小，可包含透明区，且可制成包含多幅画面的简单动画，缺点是图像质量稍差。 PNG格式集JPEG和GIF格式的优点于一身，既能处理照片式的精美图像，又能包含透明区域，且可以包含图层等信息，是Fireworks的默认图像格式。,3.3.1 插入与编辑图像,在确定图像插入点后，单击“插入”栏“常用”类别中的“图像”按钮，打开“选择图像源文件”对话框。从中选择要插入的图像，然后单击“确定”按钮即可。,选中插入后的图像，可以利用属性面板对该图像的各项属性进行设置。,设置图像名称,设置宽和高,设置图像文件路径,用于创建从图像到其他文件的链接

28、,指定图像上、下、左、右空白的像素值,设置图像边框的粗细,确定图像在单元格或页面中的对齐方式,图像处理按钮,裁切图像,如果网页中的某个图像尚未制作好，可暂时用图像占位符来代替。待到制作好图像后，再用它置换图像占位符。 选择“插入”“图像对象”“图像占位符”菜单，可打开“图像占位符”对话框。,3.3.2 使用图像占位符,“图像占位符”对话框,插入的“图像占位符”,替换图像,3.3.3 制作鼠标经过图像,当鼠标移动到某一图像上时，图像变成了另一幅图像，当鼠标移开时，又恢复成原来的图像，这就是我们通常所说的鼠标经过图像。,原始图像,鼠标经过图像,“插入鼠标经过图像”对话框,3.3.4 制作导航条,利

29、用与制作鼠标经过图像类似的方法，可制作具有可变效果的导航条。下面来制作下图所示的可变导航条（具体操作见视频3-2）。,3.3.5 插入Fireworks HTML,Fireworks是网页制作三剑客之一，它主要用来处理网页图像，可以将优化后的图像和HTML文件导出并保存至站点的图像文件夹中，然后就可以在Dreamweaver中插入该文件。,“插入Fireworks HTML”对话框,3.4 上机实践在“拍拍”网页中插入图像,本节以制作“拍拍”网页为例，来练习网页文本的属性设置和图像的插入。,第4章 使用超链接,认识超链接 为文字和图片设置常规超链接 不同格式的超链接 上机实践为拍拍网页中的文字

30、和图像添加链接,4.1 认识超级链接,超级链接包括内部超级链接和外部超级链接，内部超级链接是指目标文件位于站点内部的链接；外部超级链接可实现网站与网站之间的跳转，也就是从本网站跳转到其他网站。 内部超级链接会涉及到路径的使用，且只能使用相对路径。,4.2 为文字和图片设置常规超链接,4.2.1 为文字设置超链接,要为文字设置超链接，应首先选中文字，然后单击“插入”栏“常用”类别中的“超级链接”按钮 ，打开“超级链接”对话框。,可以是内部链接或外部链接,设置在何处打开网页,“标题”编辑框用于设置，当鼠标悬停在超链接上时出现的说明文字,4.2.2 取消超链接,要取消超链接，可在选中设置为超链接的文

31、字后，删除属性面板中“链接”编辑框中的内容。,为图片设置超链接的方法同文字一样。,4.3 不同格式的超链接,4.3.1 电子邮件链接,电子邮件链接是指当浏览者单击某个超链接时，系统会自动启动默认的电子邮件收发软件。 要设置电子邮件链接，应首先选中要设置为超链接的文本，然后单击“插入”栏“常用”类别中的“电子邮件链接”按钮，接下来在弹出的对话框中输入链接到的电子信箱地址即可。,4.3.2 命名锚记链接,当网页的内容非常多，浏览器的滚动条变得很长时，可以通过命名锚记链接来为网页添加内部链接。 创建命名锚记链接，首先要定义命名锚记，然后创建指向它的链接。,插入的命名锚记,为图片设置“命名锚记”链接,

32、4.3.3 热点链接,热点链接是针对图像而言，利用它可以为一幅图像的不同区域添加不同的超链接。 要为图像添加热点链接，可以使用图像属性面板中的地图组合按钮。,地图名称,多边形热点工具,椭圆形热点工具,矩形热点工具,可以把跳转菜单看作是一种超链接的集合，它以弹出式下拉菜单的形式在网页中展现出来。 弹出菜单内的链接没有类型上的限制，可以是本地链接，也可以是到其他网站的链接。,4.3.4 使用跳转菜单,设计好的跳转菜单及其属性面板,网页预览效果,4.3.5 图片链接和下载链接,我们在上网时经常会碰到图片链接和下载链接，例如，单击网页中的某个小图片时会在新窗口中打开一幅大图片，或者单击某个链接会打开一

33、个下载提示对话框等。这就是我们所说的图片链接和下载链接。,图片链接,下载链接,4.3.6 定时自动跳转页面,自动跳转也叫自动重定向或自动转向，就是指当浏览者访问某个站点时，所访问的页面自动转向到其他网页的一种技术。,应用“定时自动跳转”,“刷新”文本框,4.4 上机实践为拍拍网页中的文字和图像添加链接,最常用的链接是常规的文本和图片链接，接下来我们就通过下面的例子来进一步掌握这两种最基本的链接形式(具体操作见视频4-1)。,第5章 使用行为,认识行为 熟悉“行为”面板 为对象添加行为 编辑行为的方法 将行为附加到文本 常见行为的应用 上机实践在网页中应用“显示隐藏层”行为,5.1 认识行为,每

34、个行为都由两部分组成，即事件和动作。所谓事件是指“发生什么”，而动作是指“去做什么”。简单来说，就是当发生某个事件的时候去执行某项动作，例如当打开某个网站的时候，弹出欢迎信息。,5.1.1 事件,每个浏览器都会提供一组事件，例如，onMouseOut、onMouseOver、onClick用于与某个链接关联，而onLoad则用于与图片及文档的body关联。,5.1.2 动作,动作是事件的结果，同事件一样，每个浏览器都提供一组动作，例如调用JavaScript、改变属性、检查浏览器、拖动层等。,5.2 熟悉“行为”面板,要为文档添加行为，需要使用“行为”面板，选择“窗口”“行为”菜单，或按【Sh

35、ift+F4】组合键，即可打开“行为”面板。,添加行为,删除行为,事件,动作,显示已设置的事件列表,显示所有事件列表,上下移动行为,5.3 为对象添加行为,可以将行为附加到整个文档（即附加到标签），还可以附加到超链接、图像、表单元素等，但是不能将其附加到纯文本。,预览效果,5.4 编辑行为的方法,5.4.1 修改行为,修改行为的方法非常简单，首先选中要修改行为的对象，然后打开“行为”面板并选择要修改的行为。,单击事件名称，将在事件名称右侧出现一个 按钮，单击该按钮将打开事件列表。,双击动作名称可编辑行为,5.4.2 删除行为,如果要删除某行为，只需选中该行为，然后单击面板上方的“删除行为”按钮

36、 或直接按【Delete】键即可。也可用鼠标右键单击行为，在弹出的快捷菜单中选择“删除行为”命令。,删除行为,5.4.3 获取更多行为,单击“行为”面板上的“添加行为”按钮 ，在弹出的菜单中选择“获取更多的行为”命令，将打开Macromedia公司的官方网站，该网站提供了众多网页行为的下载。不过，下载行为后还需要使用“Macromedia扩展管理器”进行安装，然后才能使用它们。,添加行为,Macromedia扩展管理器,5.5 将行为附加到文本,默认情况下，不能将行为附加到纯文本，但是可以将行为附加到链接。 因此，若要将行为附加到文本，可以为文本添加一个空链接，然后将行为附加到该链接上。,5.

37、6 常见行为的应用,5.6.1 弹出信息框,我们在打开某些网页或单击网页中的某些元素时经常可以看到弹出信息框，这个弹出信息框就是利用“弹出信息”行为实现的。,预览效果,5.6.2 打开伴随窗口,使用“打开浏览器窗口”行为可以实现在新窗口中打开网页的功能，许多站点都使用这种方式来弹出重要的通知、广告信息等页面。,加载网页时打开搜狐网首页,5.6.3 关闭当前窗口,在页面中加入一个按钮，浏览者能够通过单击这个按钮来关闭正在浏览的页面窗口。,单击按钮时弹出提示窗口,添加事件,添加事件,5.6.4 滚动字幕,在浏览某些网页时，常常会看到一些“字幕”效果，也就是一行或多行文字在页面上按照一定的速度上下或

38、左右移动，通过插入.标签 可以实现上述效果。,添加鼠标触发事件,创建拖动层行为首先要创建层，层主要有如下功能： 层可以游离在文档之上，因此可以利用层来精确定位文本、图像等其他网页元素。 利用层的显示和隐藏功能来控制网页和网页元素的可见与不可见性可以使网页达到快速下载的效果。 层与表格之间可以相互转换。,5.6.5 拖动层,1创建层,在页面中拖动鼠标创建层,2拖动层,使用拖动层行为可以创建拼板游戏、滑块控件等界面元素。可以指定浏览者能够向哪个方向拖动层，设置目标的位置，在层和目标之间多远时算是捕捉到目标，以及当层接触到目标时应该执行的操作等。,在层中插入对象,“拖动层”对话框,当用户想要查看商品

39、的详细说明时，在该商品图片上单击即可显示层来查看该信息。如果不想看时可单击该说明隐藏层。下面我们通过制作图示网页，来学习显示隐藏层的应用（ 具体操作见视频5-1） 。,5.7 上机实践在网页中应用“显示隐藏层”,层,第6章 让网页动起来,应用Flash动画 音乐的应用 使用其他媒体元素 上机实践为“金刚”网页添加动态元素,6.1 应用Flash动画,Flash动画是目前最为流行的矢量动画，很多网页中都包含Flash动画。Flash文件有3种类型：,Flash源文件（.fla），它是所有Flash动画的源文件，此类型的文件只能在Flash 8中创建、打开并编辑。 Flash动画文件（.swf），

40、它是Flash（.fla）文件的压缩版本，已进行了优化处理以便在网页中使用。 Flash模板文件（.swt），可以直接在Dreamweaver中编辑这类文件，它包括Flash按钮和Flash文本两种对象。,6.1.1 插入Flash影片,确定插入点后，单击“插入”栏“常用”类别中的“媒体：Flash”按钮，打开“选择文件”对话框。从中选择文件，然后单击“确定”按钮即可。,预览效果,6.1.2 Flash背景透明,假如我们为网页、某个表格或某个单元格指定了一张很漂亮的背景图像，而当我们在其中又插入一个Flash动画的时候，Flash动画的背景颜色会遮盖掉背景图像，这就需要将Flash动画的背景颜

41、色改成透明。,为Flash动画添加参数,预览效果,6.1.3 插入Flash按钮,Flash按钮包括两类，一类是自己制作的Flash按钮，另外一类是Dreamweaver中集成的Flash按钮。前者的插入方法与Flash影片类似，这里主要讲解后者的插入。,6.1.4 插入Flash文本,Flash文本是Dreamweaver中集成的文本，插入Flash文本与插入Flash按钮类似。,6.2 音乐的应用,6.2.1 为网页增加背景音乐,通过在网页的与标签之间加入标签，并在标签里添加一些相应的属性即可为网页添加背景音乐。,如果想控制声音的播放进度、快进和快退、调整音量等，就必须在网页中嵌入音乐文件

42、。,6.2.2 在页面中嵌入音乐文件,1常用音频文件格式,MID格式：占用空间小，一般为十几KB、几十KB不等，适于网上传播，其缺点是音色单调。 WAV格式：具有较好的声音品质，适应性强，在所有安装有声卡的电脑中都可以播放。其缺点是占用空间大，动辄几MB，甚至几十MB。 AIF格式：与WAV格式类似，也具有较好的声音品质，但是，由于AIF文件体积庞大，从而限制了它在网页上可以使用的长度。 MP3格式：是一种压缩格式，它可令声音文件明显缩小。其声音品质非常好。 WMA：是微软公司推出的与MP3格式齐名的一种新的音频格式。目前，MP3、WMA已经成为网络音频的主要格式之一。 RA或RAM（Real

43、 Audio）格式：具有非常高的压缩程度，文件大小要小于MP3格式的文件。,2在网页中嵌入音乐,下面以插入WMA格式音频文件为例，具体讲述在网页中插入音频文件的方法。,6.3 使用其他媒体元素,6.3.1 插入Shockwave 影片,Shockwave 影片是一种很好的压缩格式，它能被目前的主流浏览器（如IE和Netscape）所支持，可以被快速下载。,6.3.2 插入Applet,利用Applet，可以制作一些非常漂亮的效果，如下雨、涟漪等。 Applet插件是非常小的Java应用程序，它是动态、安全、跨平台的网络应用程序。,6.4 上机实践为“金刚”网页添加动态元素,本节我们来为“金刚”

44、网页添加视频文件和Flash影片（具体操作见视频6-1） 。,第7章 网页布局,使用表格布局网页 上机实践用表格布局主页 使用框架布局网页 上机实践用框架布局页面,7.1 使用表格布局网页,表格是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行，垂直的多个单元格称为列。,行,列,7.1.1 创建表格,确定插入点后，在“插入”栏的“常用”类别中单击“表格”图标 ，打开“表格”对话框，可以在“表格”对话框中设置表格的行数、列数、宽度、边框、边数以及间距。,7.1.2 改变表格和单元格的宽度与高度,使用属性面板可以非常方便地改变表格和单元格的宽度与高度，也可取消宽度与高度的设置。,通过拖动

45、表格的边框也可轻易改变表格的宽度与高度。,7.1.3 拆分和合并单元格,1拆分单元格 所谓拆分单元格，就是将一个单元格拆分为几行或几列。,2合并单元格,所谓合并单元格，就是将相邻的几个单元格合并成一个单元格。,7.1.4 插入、删除行和列,如果希望在某个单元格上方插入行，或者在其左侧插入列，可首先右击该单元格，然后从弹出的快捷菜单中选择“插入行”或“插入列” 。 如果希望删除行或列，可在弹出的快捷菜单中选择“删除行”或“删除列”。,7.1.5 为表格和单元格设置背景颜色或背景图像,可为整个表格设置背景颜色，也可为单个或多个单元格设置背景颜色，其设置方法完全相同。,还可为表格或单元格设置背景图像

46、。,7.1.6 为表格和单元格设置边框颜色,通过设置表格边框粗细、单元格间距、背景颜色，以及单元格背景颜色可以制作不同边框的表格。,细线表格,粗线表格,双线表格,表格的高级操作主要包括对表格的整行内容进行移动、排序表格内容和导入/导出表格数据等。,7.1.7 表格的高级操作,1.移动表格整行内容,选中行并剪切,将光标置于要移动位置的下一行任意单元格中,粘贴,表格作为一种常见的数据处理形式，免不了要对其中的数据进行排序。,2排序表格内容,选中表格,选择“命令”“排序表格”菜单，打开“排序表格”对话框。,排序后的表格,在Dreamweaver中，可以将表格的内容导入或导出,在页面中添加表格时，如果预先有表格数据存储在记事本或Word等文档中，可以直接将数据导入。,3导入或导出表格内容,