DreamWeaver基本教程.doc

睢宁县李集中学校本课程材料主编：徐善新 DreamWeaver建设网站第一节：专门制作网页的工具有很多种，比较有名气的有FrontPage和DreamWeaver两个，由于这两个工具是不同公司的产品，所以他们的风格有着很大的区别，其中FrontPage的风格和我们前面学过的Word的风格非常相似，在我们已经学习过Word的基础上使用FrontPage来制作网页也会非常容易上手，你会发现做网页原来如此简单，但是我们现在却来学习DreamWeaver，可能有的同学会觉得刚开始的时候有点难，我们的目的正是在于，不但要学习网页的制作，更要培养使用不同风格的软件的能力。第二节：一切从站点开始-建立个人站点站点的定义与设置定义站点也就是建立网站，可以将已建立的网页转换成网站，也可以从零开始建立一个全新的站点。在DreamWeaver里面站点的定义可以通过文档窗口中的“站点”-“新建站点”来进行定义。上图中三个红色框框的地方都可以开始定义站点= 也可以通过文档窗口右下角的显示站点按钮打开站点窗口，然后从站点窗口中的“站点”下拉单中选取“定义站点”在定义站点对话框中通过“新建”按钮打开站点定义对话框在定义站点的对话框中：通过分类信息设置站点的各种相关信息，在的文本框中输入站点的名称，在的文本框中输入你的站点要保存的位置，或着通过的文件夹按钮在你的电脑里选择一个位置。设置好以后按确定就完成了一个简单的站点的定义，这时可以在站点窗口里的“站点”下拉单中看到刚才定义的站点，选中了我们定义的站点后旧可以在站点窗口右半边的文件夹视图中看到站点的内容了从我们刚建立的站点上点击鼠标右键，在弹出菜单中选择新建文件或文件夹来建立我们网站里的内容。从已经建立的网站开始建立你的首页建立好站点后我们就要来建立我们站点内的网页了，在站点窗口中右边文件夹视图上点击鼠标右键-新建文件网站里面有一个很重要的页面，称为首页，也就是通常网站看到的第一个页面，别人通过首页提供的链接来访问站点里面的其他页面。首页一般都会有一个约定的名称，例如常见的名称为index.htm或default.htm等。我们把刚建立的文件改名为index.htm，作为网站的首页接下来我们就可以编辑首页，通过鼠标双击站点窗口中的index.htm这个文件就可以在文档窗口中打开这个文件，然后我们就可以去编辑他，先来做一个简单的页面，参考下图所示自己建立一个我们给我们的首页起一个名称，在文档窗口里的标题文本框中输入我们喜欢的名称设置好的标题会出现在标题拦中这个网页的编辑工作可以参考我们前面所学的内容。站内资源的管理建立完首页以后我们可以用同样的方法建立起其他一些页面，来充实我们的网站，例如根据首页上的内容我们可以建立作者简介（intro.htm）、最爱收藏（mylove.htm）、好文共赏（article.htm）、友情链接（link.htm）等页面，然后一个个页面去编辑处理。由上图可以看到，在站点窗口中我们可以方便的对我们网站内的资源进行管理，就好象windows里面的资源管理器一样。透过站点窗口中的站点地图按钮，我们可以看到整个站点的树状结构超级链接超级连接是HTML的灵魂，在DreamWeaver里面我们可以非常容易的建立超级连接：在文档窗口中通过属性工具栏进行超级连接的设置，直接在属性工具栏的链接着一栏中输入你要连接的文件名称就可以了。也可以通过属性工具栏连接这一栏后面的“指向文件”按钮来直接建立超级连接，或者通过打开文件夹来建立连接超级连接有一个属性：“目标”它有几种取值，分别是 _blank：通过建立一个新的窗口来打开这个超连接， _parent在父窗口中打开， _self在同一个窗口里直接打开连接 _top在框架窗口的顶端打开超连接。当然也可以通过站点窗口里的“指向文件”来建立连接在站点内建立好链接后的站点窗口就可以看到树状的站点结构第三节：表格在的网页中的应用在网页制作中，通常用表格来进行布局，这样可以控制文本和图形在页面上出现的位置，使用表格进行定位。本节课以一个实例来说明表格的插入、表格属性的设制及表格在网页制作中的定位。请先看下面的网页及其在编辑状态中的式样在浏览器中打开效果Dreamweaver在编辑状态一、表格的插入及基本操作表格的插入方法有多种，可以通过插入菜单中的表格来插入，也可以通过对象窗口中的表格对象来插入，操作如下： 、将鼠标移到要插入表格的地方；、单击插入菜单中的表格或单击对象窗口中的表格对象；、设置表格的行数、列灵敏、宽度以及边框粗细、单击“确定”，即可完成表格的插入。表格的基本操作：选择表格、单元格、调整表格和单元格的大小选择表格：单击表格的最处边框，或通过“修改-表格-选择表格”来完成；选择单元格：在单元格内单击，然后平行或向下拖动选择多行或多列；调整表格和单元格大小：（1）选择表硌；（2）拖动一个选择手柄，沿相应方向调整表格的大小。二、行、列的插入和删除，单元格的合并和拆分在表格处理过程中，经常遇到行、列的插入和删除，单元格合并、拆分的有关操作：、行、列的插入和删除（1）选择要插入或删除的行或列；（2）选择“修改-表格”，然后根据需要选择相应的项；2、单元格的合并： 首先选择要合并的单元格，然后单击属性窗口中的合并单元格,或通过修改-表格-合并单元格来完成；3、单元格的拆分：首选选择要拆分的单元格，然后通过“修改-表格-拆分单元格”,或属性窗口中的拆分单元格,然后选择是拆分为行还是列,再输入行数或列数来完成.三、表格属性的设置在使用表格进行网页设制中，我们可以通过对表格背景、表格线的粗细、单元格背景等属性的设置来进一步美化表格，对表格属性的设置可以通过属性窗口的有关项目来完成。（1）选择整个表格，设置表格属性（2）选择要设置属性的单元格，然后设置单元格属性（内容类似于整个表格的属性）四、表格在网页制作中的定位作用在网页制作中，常使用表格来进行定位，因为单元格中又可以插入表格，通常先用一个大表格规划好整个网页的结构，在每一栏目中又用表格来具体定位。本节课课件首页样例的定位方法如下：1、插入一个3行1列的表格整体定位；（1）（2）（3）2、将（3）拆分成两列；（1）（2）（3）（4）3、在（1）中插入如右表格；4、在（2）中插入如右表格；5、在（3）中插入如右表格；6、在（4）中插入如右表格；7、在相应的表格单元格中插入有关的图片或文字。 表格的插入及其操作单元格的合并与拆分表格、单元格属性的设置表格在网页中的定位作用第四节：申请个人主页空间，开始建立你的个人站点同学们，前面我们已经学习了如何建立站点以及通过站点来建立和管理我们的网页，这样我们已经能够通过DreamWeaver来建立一些简单的网站了，当我们建立了我们的站点以后最希望的事情就是把他放到网上去让大家一起来欣赏。为了把我们做的网页放到网上去我们首先就要申请一个主页空间，那么主页空间如何申请呢？在网上有哪些网站提供了免费的个人主页空间呢？申请了空间以后我们又如何才能把自己做的网页上传到自己的个人主页空间里去呢？这些都是我们这节课要解决的问题。当我们申请了个人主页空间以后，提供空间的网站一般都会让你通过FTP的方式来上传你的主页，FTP是一个非常有用的文件传输协议，有很多提供FTP功能的软件可以使用，例如比较有名的CuteFTP就是其中之一，下面我们来看看这个软件是如何使用的：CuteFTP使用教程先让我们来熟息一下CuteFTP的界面吧，工具栏上的各个工具：其中：地址本中帮我们记录下一些有用的FTP站点，让我们可以便捷的进行连接。 快速连接方便我们进行快速的连接，按下它就可以看到下面的工具栏：其中的URL就是要求你填写你要登陆的服务器的地址，User Name 就是你的申请的用户名，Password就是你的密码，Port就是服务器开放的端口号，一般FTP服务提供的端口号都是21,填写完了就可以按Port旁边的连接按钮进行连接。通过断开连接就可以断开与服务器的连接了。登陆服务器操作按下地址本打开地址本看到其中的个人主页空间连接如下：在这个列表中我们可以看到我们学校提供的ftp空间地址是50，端口号是:21,如果你在学校申请了个人主页空间，你就可以在其中的用户名这一栏中填入你的用户名，在密码栏中输入你的密码，就可以连接了。当你连接到了校园网上，就会看到类似的提示信息：这说明你已经成功的登陆了服务器，当然也有可能没有相关的信息，这时我们可以通过观察服务器端的地址栏看到如果是就是成功登陆了，如果什么都没有就说明还没有登陆。文件的上传和下载：文件上传很简单只要用鼠标双击要上传的文件或干脆把CuteFTP窗口左边本地文件列表中的文件或文件夹用鼠标拖拉到右边服务器端就可以了，这样你可以在下面的上传情况列表中看到上传的结果：文件的下载和文件的上传操作方法差不多：当然，CuteFTP还有很多功能，比如比较本地文件与服务器文件差别，建立服务器端文件夹等等功能，同学们可以自己探索一下。第五节：图像的插入及属性的设置图像在网页中通常起到画龙点睛的作用，本节课我们来学习在网页中插入图像、插入鼠标经过图像、图像属性设置及图像热区设置的方法。一、插入图像、插入普通图像插入鼠标经过图像可以通过：点击 菜单插入图像来插入或插入对象窗口中的“插入图像”按钮； 在出现的对话框中，选择所要插入的图像文件，然后单击“选择”按钮。或 、插入鼠标经过图像插入鼠标经过图像可以通过：单击 菜单插入交互式图像来插入或插入对象窗口中的“插入鼠标经过图像”按钮； 在出现的对话框中，选择所要插入的图像文件，然后单击“选择”按钮（同上）。二、图像属性的设置插入图像后，单击要设置属性的图像，然后通过属性窗口的有关栏目设置相应的属性。三、图像热区设置、在网页中选择要创建图像热区的图像； 、从属性窗口选择相应的工具：椭圆形热点工具、矩形热点工具、多边形热点工具；、在选定图像上拖动鼠标指针，创建相应形状的热区；、对热区创建超链接、为热区设置替代文字等。四、实践 在网页中插入图像，练习创建图像的热区，对不同的热区创建不同的链接。第四节：层的应用，层的显示与隐藏层是一种网页元素定位技术，使用层可以以像素为单位精确定位页面元素。层可以放置在页面的任意位置。可以在层里放置文本、图像等对象甚至其他层。层对于制作网页的部分重叠效果更具有特殊作用。把页面元素放入层中，可以控制元素的显示顺序，也能控制是那个显示、哪个隐藏。利用层的这些特点我们可以用层来建立下拉菜单，浮动广告或对页面元素绝对定位。先来让我们了解一下层的建立以及层的基本操作。你看见我们这个页面上的红色印章其实就是使用了层的方法来实现的。了解了层的建立和基本操作，接下来我们就可以通过使用层来建立起一些特殊效果，例如制作“超级连接”的说明，制作个性的下拉菜单等。当然层还有很多效果，例如我们上网的时候看到的一些浮动的广告等，让我们一起去探索层的美妙效果吧。第五节：框架在网页设计中的应用框架是网页设计中常用到的设计方式，用于在一个浏览器窗口中显示多个HTML文档。本节课来学习框架的创建及框架在网页设计中的应用。下面这个网页就是应用框架的一个例子。一、框架概述框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页，显示时，每个区域可以有自己的滚动条、背景、标题等，使网页的版面更友好。但也有其缺点：不是所有的浏览器都支持框架，如IE3.0就不支持，浏览时，不支持框架的浏览器把所有网页中的内容在每一个区域中重叠显示，达不到预期的效果，另外，由于框架的实现实际是把几个HTML文件在同一个页面内显示，因此，在下载网页时，框架结构的网页会比普通网页要多下载几个文件，速度要慢。虽然，框架存在一些缺点，但是，它还是目前较受欢迎的一种网页结构。二、框架的创建和删除（1）在创建框加之前，先单击“查看”“可视化助理”“框架边框”，使框架边框在文档编辑中可见。（2）框架的创建， 可以用下列之一方法创建：A、单击“修改”“框架页”选择拆分的方式将光标所在框架拆分（开始时为一个大框图架）；B、按住Alt键拖动任一条框架边框，可以垂直或水平分割已有的框架；按住Alt键从一个角上拖动框架边框，可以把已有的框架划分为四个框架。C、选择“”插入”“框架”，然后在子菜单上选取一种框架类型；D、从对象窗口中选择“框架”中的一种框架类型；（3）框架的删除：拖动框架离开页面或拖动到其他框架的边框上可以删除此框架； 三、框架属性的设置1、设定某子框架的属性首先要按住Alt键，在要设置属性的子框架窗口中点鼠标，选定要设置属性的子框架，然后在属性窗口中设置有关属性项目，包括：为指定的框架命名，设置该框架窗口中的网页文件，是否要显示边框，边框颜色，是否要显示滚动条，是否允许调整窗口大小等。2、框架组属性的设置首先用鼠标单击框架的分隔线，选定所有的框架；然后在属性窗口中设置有关属性，包括：是否要显示边框，边框颜色，边框宽度，边框所在的列位置等。 3、超链接的框架目标的指定在一个有框架的网页中，当一个对象指定为超链接后；属性面板中的超链接“目标”框便为激活状态，单击该下拉三角按钮，弹出链接目标下拉列表框如下图，然后根据需要选择其中一种。_blank 表示弹出一个新的窗口来放置链接的页面； _parent 表示用父窗口来放置链接的页面；_self 表示用自己来放置链接的而面； _top表示跳转到所有的框架结构显示链接的页面；其它为可以选择在某个固定的框架中放置链接的页面。 四、框架的应用下面我们通过一个具体的实例来说明框架在网页设置中的应用，单击下面图片可以进入相应的网页。同学们可以用下面的有关素材，应用框架自己创建一个类似的电子图书。下载素材 第八节：用行为使你的页面更动人一、什么是行为：行为是Macromedia预置的JavaScript程序库。使用行为可使得网页制作人员不用编程而实现一些程序动作。比如检查，打开一个浏览器窗口等。行为是事件和动作的组合。动作是预先编写好的JavaScript脚本，执行指定任务。例如打开浏览器、播放声音或停止Shockwave电影等。事件则是由浏览器为每个页面元素定义的。例如onMouseOver、onMouseOut和onClick等，他们在大多数浏览器中和链接相关联，而onLoad则是和图像以及文档正文相关联的事件。为文档中的对象添加某种行为的操作：选中某个需要添加行为的对象，然后选择某种动作（同时设计一些参数），最后选择当什么事发生时执行这个动作。 用户可以将行为附加给整个文档（BODY部分），也可以附加给链接、图像、表单等对象或任何其他HTML元素。如果浏览器支持该行为，将会显示在菜单栏中。每个事件可以指定多个动作。动作将按顺序列表依次发生。二、下面我们看一下如何用行为做出特效来我们可以通过“窗口”-行为或使用Shift+F3或在状态栏上按行为按钮将行为窗口显示出来- -行为窗口 -不同的浏览器对事件有不同的支持在行为窗口中，通过按下（+）就可以使用不同的动作，而相对于行为来说，不同的浏览器对事件有不同的支持，一般来说告版本的浏览器可以兼容低版本的事件，我们把事件设为IE4.0就可以了。第九节：使用样式设置自己的网页风格一、样式简介样式是控制文本或文本区外观的一组格式属性。样式表包括文档中的所有格式，而使用外部样式表还可以一次控制若干篇文档的格式。样式有HTML样式和CSS样式两种，HTML样式实际上是一系列HTML格式标记的组合，可用于一次对文本对象进行多个方面的格式设置，并且可对多个文本使用这种格式设置，而CSS样式是级联样式表，不仅可以设置文本格式，还可以设置图像、动画、背景等的准确定位等属性，本节课重点介绍CSS样式。在介绍CSS样式之前先介绍一下CSS有关基础知识。二、CSS的基础下面介面几个基本的HTML语句：1.每个网页都以开头,以结束,通常 表示该语句命令结束;2.,中间部分是标题内容部分;3.,中间部分是网页内容4.是段落开头标记,段落结束标记.5.是超链接开始标记,超链接结束标记.见下面网页及对应的HTML语言可以了解更多的HTML语句命令.对应的HTML代码如下:无标题文档 样式表介绍样式表是指控制文本属性、表格属性、超链接属性的一组格式属性。下面是一个表格。      这是一个超链接哦。还有更多的呢下面我们开始学习CSS样式的设置及应用三、样式、在创建样式之前，首先单击菜单“窗口”-.“样式”，使样式窗口打开；、单击样式面板上的“”新建样式按钮，或打开面板右上角下拉菜单，选择“新建样式”选项这将会出现如下图所示的新建样式对话框名称：在该域中输入样式的文件名称。名称必须以英文开头，中间不能有空格或特殊符号。类型：其中类型中包括，创建自定义样式、重定义标签和使用选择器，选其中一种类型。自定义样式：自定义样式就是生成一种新的样式。制作完毕后，就可以在样式面板中看到制作完成的样式。在应用的时候，首先在页面中选中对象，然后选择样式即可。自定义类型是唯一可以被应用于文档中任何文本的样式类型，它不用考虑控制文本的标签。重定义标签：就是将现有的标签赋上样式，因此，制作完毕以后不需要选中对象就直接应用到页面中去了。使用选择器：选择器用于针对超链接进行设置。一共有种状态：（）a:Active:选中超级链接状态；（）a:Hover:光标移上超链接状态；（）a:Link:超级链接的正常状态，没有任何动作的时候；（）a:Vistited:访问过的超级链接状态。定义在：如果选择“新建样式表文件”单击确定后系统将弹出保存样式文件对话框，这样创建成的样式，就能运用到其他的页面文档中。若选择“仅对该文档” ，则仅对当前的文档应用样式。四、设置样式、在对样式文件命好名，及选择好类型之后，单击“确定”进入样式设置面板，见下图：然后选择网页元素的一种类型，并对该类型的属性进行设置，在属性设置中，有“”标记的属性在网页编辑状态，其设置的属性看不到，要在网页浏览中才可以看到设置的效果。、样式冲突的原理和处理当用户对相同的文本应用两个或两个以上的样式，样式便会产生样式冲突，这时浏览器将根据以下原则应用样式属性：（）如果两个样式应用于相同的文本，则浏览器显示两个样式的属性（冲突的除外，如一个样式指定文本为蓝色，而另一个样式却指定为红色）。（）如果应用于相同文本的属性产生冲突，则浏览器显示最里面的样式（即最接近文本自身的样式）的属性。（）如果产生样式冲突，则自定义样式将覆盖标签样式的属性。第一课网页间的通道超级链接1、在创建“超链接”之前，我们需要多新建一个网页文件，这样才能有链接的目标。（1）在站点面板中单击【文件】，选择【新建文件】。（2）这时在站点面板中又生成了一个新的网页文件“untitle.htm”。同样，我们也要帮它改名。改名原则为“顾名思义”。例如：新建的网页是用来介绍我的同学的，那么就可以把文件改名为“classmates.htm”。2、接着请双击首页文件“index.htm”，进入首页的编辑状态，我们准备在首页创建一个到“classmates.htm”的超级链接。（1）在首页中输入“我的同学”四个字作为超级链接的反应区。然后用鼠标选中这四个字。如下图： （2）接着用鼠标单击属性栏上“链接”框后的黄色文件夹图标（即“浏览”按钮），如下图： （3）这时，会弹出一个“选择文件”的对话框。请先找到你的站点文件夹，然后从中选中“classmates.htm”文件，再单击“确认”按钮。如下图： （4）返回页面后，我们发现“我的同学”四个字变了模样，如下图，说明这时我们已经为它创建了超级链接。 （5）超级链接的效果要在预览状态下才能实现，现在请按下“F12”键预览你的首页；然后把鼠标移到“我的同学”四个字上，鼠标变了吗？如果鼠标变成了小手（如下图），说明这里的确有一个超级链接。这时单击鼠标左键，页面就会自动切换到“classmates.htm”了，你做到了吗？ 四、关于“超级链接”的其他：1、链接目标：在“链接”框后还有一个“目标”的选项，里面有四种方式供选择，如下图： 我们比较常用的是默认状态（就是四种都不选），或者是第一种“_blank”。2、创建网站外部的超级链接： 方法：直接在“链接”框内输入完整网址。 例如：要做一个到“新浪网”的链接，只要在“链接”框内输入“”即 可。3、用图片做超级链接： 方法：先选中图片（相当于“选中文字”），接下来的步骤与用文字做超级链接完全一样。4、单页面内的超级链接：命名锚记（或称“书签”）如果一个页面太长，需要在单页面内创建用于定位的超级链接时，就要用到“命名锚记”。例子：2004年第五届全国中小学电脑制作活动指南 方法：（1）在页面中的链接目标点单击鼠标； 然后单击【常用插入栏】中的命名锚记图标“”； 接着就弹出了命名锚记对话框，如下图： 这时请输入“锚记名称”（注意：名称只能用英文名或数字名），再按“确定”。锚记就建 好了。（2）接着在页面中选中做超级链接的文字或图片，然后在“链接”框内直接输入“#page01”即可。 如下图： 5、电子邮件链接：方法：（1）单击【常用插入栏】上的电子邮件链接图标“”，弹出如下窗口： （2）按照提示往窗口里填入“链接文本”和“Email地址”，即可。如上图。最后提醒：所有的超级链接效果都要在预览状态才能实现。第二课层、时间线以及行为的使用一、层的使用层是一种网页元素定位技术，使用层可以以像素为单位精确定位页面元素。层可以放置在页面的任意位置。可以在层里放置文本、图像等对象甚至其他层。层对于制作网页的部分重叠效果更具有特殊作用。把页面元素放入层中，可以控制元素的显示顺序，也能控制是那个显示、哪个隐藏。但是层在定位上也有个缺点，就是预览的效果跟编辑的效果会有点不同，所以你在使用图层的时候记得要经常预览一下网页，以保证位置没有偏差。 在这里再给大家提个醒，不要因为图层移动位置方便就在一个页面中使用太多的图层；过多的图层只会使页面变得凌乱，难以管理。建议大家在修饰页面（丰富页面效果）或比较难固定位置的时候用用图层就足够了。 1、创建图层：创建一个图层可以使用插入、拖动或绘制等方法。在插入工具栏中点击，然后在工作区中拖出一个；也可从【插入】菜单中选择“层”来插入层。2、选中图层：把鼠标移到图层的边上，当鼠标变成“ ”符号时，单击鼠标即可选中层。或：直接单击图层的标记也可以选中图层。层被选中的情形如下： 3、移动图层：选中图层时，就可以随意地移动图层的位置了。可以用鼠标移动图层，也可以用键盘上的方向键（或Shift+方向键）来移动图层。 4、编辑图层的属性： 当我们选中图层时，属性面板的内容相应地就变成了图层的属性，如下图： 我们就可以通过以上属性面板改变图层的编号、宽、高、Z轴（叠放次序）、显示、背景等属性了。 请大家试着动手修改。 5、往层中插入网页元素：现在大家可以试着往图层内插入文字、图片、动画、表格、层等内容了。二、时间线的使用时间线是层的好帮手，它是一种用来控制网页中的层在每一秒的位置的工具，对 Dreamweaver 来说时间线是真正体现网页排版的魅力手段。时间线使用的基本步骤：1）在网页中构建要移动的层，并在层中插入文字、图片、动画等。并选中该层。2）打开时间线。 选择【修改】菜单【时间轴】下的“添加对象到时间轴”。如下图所示：此时我们选定关健帧，再拖动层的位置，从而来确定不同时间层的位置。我们还可以移动关健帧的位置以及在时间线上添加关健帧。注意选中“自动播放”和“循环”两个选项。本网页中运动的足球就是利用时间线来完成的。三、行为的使用行为是 Dreamweaver 最为有特色的功能，它可以在不需写一行 JavaScript 代码就可以制作出一个需要一百余行的代码才能完成的功能。虽然动作在网页中的使用可以产生互动效果，增强网页的交互性；但是，并不是所有的浏览器都支持 Dreamweaver 中的行为动作。只有4.0或4.0以上版本的浏览器才可以大多数的动作行为正常使用。1、添加行为：通过【窗口】菜单-【行为】打开“行为”面板；或者用鼠标双击“设计”面板，并选择“行为”标签，也可打开“行为”面板。在行为窗口中，通过按下（+）就可以使用不同的动作，而相对于行为来说，不同的浏览器对事件有不同的支持，一般来说高版本的浏览器可以兼容低版本的事件，我们把事件设为IE4.0就可以了。2、几种较常用的行为的使用：（示范页面）1）打开浏览器窗口（步骤如下）： 选中要设置行为的对象（这个对象可以是：文字、图片、网页标签等）。 打开行为面板（窗口菜单行为）。 点击行为面板左上角的“+”号，在弹出菜单中选择“打开浏览器窗口”。 在弹出的对话框中填好各项内容： 其中：“要显示的URL”是指去选择一个目标文件，等会它将出现在另外打开的浏览器窗口中。 其他的如“窗口宽度”、“窗口高度”、“属性”等请根据你的需要设定。 单击“确定”按钮。 在“行为”面板中检查这个动作所对应的事件是否为所需的事件。 2）弹出消息： 这个行为非常简单，只要往“弹出消息”对话框内输入你要显示的消息即可。 3）调用 JavaScript ： 在这里我们学习“关闭窗口”的方法： 在页面上输入“关闭窗口”四个字，然后选中它们。 在链接框内输入“#”号，作用是为“关闭窗口”四个字创建连接 和 把鼠标的反应区固定在“关 闭窗口”四个字上。 在行为面板中选择“调用JavaScript”，然后在弹出窗口中输入“关闭窗口”所对应的JavaScript 代码： window.close(self) 就可以了。 4）控制 Shockwave 或 Flash ： 先在页面上插入一段Flash动画，并且为动画起个名字。 选中用来控制Flash动画的对象（文字、图片等）。 在行为面板中选择“控制Shockwave或Flash”。 在弹出的对话框中选好受控制的影片名称（movie）和控制的动作（action）。 当然，每次设好动作之后都应该检查一下鼠标的事件是否所需。 第三课Dreamweaver 框架的使用、平时上网的时候，我们经常会看到这种效果：示范页面“我们爱学习”，你知道这是怎么实现的吗？ 二、什么是框架？框架在网页设计中可以将浏览器窗口分割成几个不同的小窗口，各个窗口包含不同的网页，并且在替换窗口中的网页文件时不会影响到其他窗口中的网页。框架最普通的用法就是将页面划分为一个导航区和一个内容区。框架组是一个使用框架定义网页的文件。框架组中保存关于页面中的框架尺寸、位置以及每个框架中作为内容载入的所有文件名的信息。 三、使用框架：1、创建框架（有两种方法）：方法一：从插入栏上点击“框架”，出现如下图的框架样式供选择： 这时你可以从中点击一种样式。点击之后，你会发现，页面已经自动形成了你要的框架样式。方法二：【插入】菜单【框架】，如下图： 然后你从弹出的子菜单中选择一种框架样式插入。 建好框架之后，可以根据需要往各个框架中输入内容。2、 选定框架：选定框架：按住“Alt”键的同时用鼠标在某个框架内点击，即可选中那个框架。 选定框架组：把鼠标移到框架组的任一分割线上，当鼠标变成了 或 时，单击鼠标，即可选中整个框架组。 3、修改框架属性：当选中某个框架时，属性面板显示的就是那个框架的属性，如下图（mainframe的属性）：当选中框架组时，属性面板显示的是框架组的属性，如下图： 然后你可以利用以上属性面板来对框架组或框架进行一些修改了。4、保存框架：在预览页面之前，框架组文件和与之相关的框架文件都必须保存。由于一个框架组由多个框架组成，所以我们需要重复几次保存步骤。 方法：【文件】菜单【保存全部】，然后根据页面上粗虚线框的包围情况来保存框架组和各个框架。在命名时要注意：最好根据各个框架在整个框架组中的位置命名。例如：整个框架组的内容是关于study的，那位于框架组上方的topframe就最好命名为： “study-top.htm”。 5、在框架中设置超级连接： 在框架中设置超级连接的方法跟普通的超级连接是基本一样的，有一点不同的地方就是“目标”。如下图： 其中： _blank（空白）：在新的浏览器窗口中打开文件。 _parent（父母/上级）：在父框架（即框架组）中打开文件。 _self（自身）：在当前框架中打开文件，替代原来的内容。 _top（顶部）：在最外面的框架组中打开文件，替换所有的框架内容。 mainframe（主框架）：在主框架中打开文件。 leftframe（左框架）：在左框架中打开文件。 这后三项根据框架的划分情况而有所变化。 topframe（上框架）：在上框架中打开文件。 第四课Dreamweaver技巧大全一、DW技巧集锦Dreamweaver一直是不少网友钟情的网页设计工具，除了它强大的动态效果制作能力外，方便简洁的操作界面更是独具特色，下面以提问的方式系统的介绍下，在设计过程中经常遇到的一些问题和技巧性的东西。 注意：为了方便，以下我们将Dreamweaver全部减缩为DW表示。1) 在DW中，如何输入一个空格呢？DW中对空格输入的限制是针对“半角”文字状态而言的，因此通过将输入法调整到全角模式就可以避免了，方法是：打开中文输入法（以人工智能ABC为例），按Shift+Space切换到全角状态，这时你就可以输入多个空格了。2) DW中“硬回车”与“软回车”有什么区别？在DW中直接按回车键称为“硬回车”，同时按下Shift键和回车键称为“软回车”。“软回车”的行间距只有“硬回车”行间距的一半。3) 为什么，我本来设计很好的网页，在浏览器窗口最小化时会变的丑陋难堪？这应该是个很值得大家注意的问题，也就是说，在全屏状态下浏览网页内容时，一点问题也没有。当我们使用窗口的最小化命令或手动的调整窗口的大小时，问题就慢慢出现了。网页内容会把当前窗口作为显示范围，依次下挫。举个例子，和在记事本中有“自动换行”和“没自动换行”的差别是完全一样的。 解决这个问题，我们必须从网页的布局说起，一般情况下，网页内容的定位大多是通过表格来实现的。因此问题的“毛病”也就出在表格上。 在表格的高宽设定选择上提供了两种不同的单位，百分比和像素。其中百分比的使用将会产生前面说到的那个毛病，将其全部更正为像素单位的实际大小就可以了。4) 如何把自己的ZIP或其他类型的文件供别人下载？在不少初级网页制作者看来，好象通过鼠标单击完成下载是件很“神秘”的事，实际上远非如此。在DW中凡是不被浏览器识别的格式文件(HTM，HTML，ASP，PHP等以外的)作为链接目标时，默认的操作都是下载。这时你只需要把要浏览者下载的文件名写好，然后制作一个到目标文件的链就可以了。5) 为什么在DW中插入中文文件名的图片不能显示，还有目标为中文文件名的链接不能打开？你可能忘了老师一开始建站点的时候就和大家讲过DW不支持中文文件名文件夹的名称，所以你的图片如果是中文文件名，链接目标文件名是中文的肯定不能正常显示图片和打开链接。6) 背景音乐你一定知道吧，怎么添加呢？ 在微软的网页工具-Frontpage中，有关于背景音乐的设置功能，那么DW显然没有作到这点，因此要使用的话，只能在源代码中手动添加了。 在使用前，提醒大家一点，使用背景音乐一定要注意网页文件的大小，不能顾此失彼。 代码如下： 其中src指定音乐文件的位置，autostart为音乐文件上传后的动作，true表示自动开始播放，false不播放（默认值），width(宽)height(高)设为 0 时，在浏览器中不显示播放器。7) 如何制作“空链接”？ 空链接也就是，没有链接对象的链接，在空链接中，目标URL是用“#”来表示的。也就是说制作链接时，只要在属性板的LINK输入框中录入#标记，它就是个空链接了。 空链接的出现涉及到多方面的因素，比如一些没有定期完成的页面，又为了保持页面显示上的一致（链接样式与普通文字样式的不同），就可以使用它了。8) 点击空链接时，页面往往重置到页首端，如何处理？ 在浏览器