Dreamweaver教案.doc

黑龙江第二技师学院电脑美术设计专业 第27页Dreamweaver网页设计教案Dreamweaver是Macromedia公司研制的网页制作软件，还有Flash动画制作和Fireworks图象处理软件，这三个软件人们称为网页三剑客。Dreamweaver是当今世界最为流行的网页制作工具之一。在网络时代中，Dreamweaver真正起到了网页设计“织梦者”的作用。全球无数个人和企业都在使用Dreamweaver来架设自己的网络信息空间，编织网络沟通渠道。第一章 初识Dreamweaver一、 Dreanweaver的工作界面当我们第一次启动Dreamweaver软件时，会弹出一个工作界面选择窗口：可以让用户根据自己的需要设置，可选择的界面包括“Dreamweaver MX工作区”和“Dreamweaver 4工作区”。（也就是说，Dreamweaver MX提供了有二种工作界面的风格：）第一种：将全部元素置于一个窗口的集成布局风格，即“Dreamweaver MX工作区”。请看下图示例：第二种：非常类似于Dreamweaver 4的浮动布局风格，即“Dreamweaver 4工作区”。请看下图示例：第二章 站点规划及建立二、站点管理与应用（创建Dreamweaver本地站点）创建本地站点的方法：1、第一步必须先在本地计算机的磁盘上建立一个文件夹。（作为本地站点的根文件夹）提示：为了方便以后管理站点上的文件，先在本地文件夹中创建几个目录：htm、img、 others，分别存放网页设计中用到的资源及网页文件。2、建立本地站点，选择主菜单中的“站点/新建站点”命令，在弹出的新建站点对话框进行设置。新建站点的操作步骤：第一步：选择菜单中的“站点”“新建站点”命令，如图所示：在弹出的对话框中选择“基本”选项卡，出现定义站点向导，如下图所示：第二步：单击“下一步”按钮，询问是否要使用服务器技术，选择“否”选项（表示目前该站点是一个静态站点，没有动态页即不使用Web应用程序：如ASP、JavaServer Page JSP）第三步：单击“下一步”按钮，选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”单选项，然后指定本地机磁盘上的一个文件夹储存站点文件（包括网页文件及设计网页用到的其它资源）第四步：单击“下一步”按钮，在弹出的对话框中设置如何连接到远程服务器，单击下拉菜单，选择“无”。如下图所示：第五步：单击“下一步”按钮，弹出如下图设置概要。单击“完成”按钮，完成设置。第三章 网页中的基本元素三、创建主页文件创建了Dreamweaver本地站点以后，接下来就是要进行网页主页的创建，操作步骤是：方法一：启动了Dreamweaver软件，如同启动Word等其它应用软件一样打开了一个新的空的网页文档，就可以在这个新的文档中进行网页设计编辑；或者单击“文件”菜单中的“新建”命令，或直接按Ctrl+N键，打开一个新页面，在该页面中也可以进行网页的设计编辑。网页设计编辑完毕后，保存网页文件：保存的位置在战点根目录下，新文件取名为“index.html” 即建立了主页文件。方法二：打开站点管理窗口，在站点管理窗口右边的本地文件夹列表框中建立新文件，新文件取名为“index.html” 按回车键，即建立了主页文件。双击“index.html”文件，进入编辑“index.html”的网页文件窗口，进行主页设计。四、基本的页面元素文字的编辑1、输入文字并对文字进行编辑文字是网页的主体，使用Dreamweaver输入文字及对文字进行编辑的方法与我们学过的字处理软件的操作方法非常类似，Dreamweaver系统也提供非常灵活、方便快捷的菜单、命令对文字进行编辑处理。其操作方法非常简单，很容易掌握。采用直接通过键盘输入或者是拷贝粘贴的方法获得文字，还可以导入word文档。注意： 在Dreamweaver中的“空格”是中文全角下按“空格”键。 换段直接按回车键。（出现空一行）。 段落中的换行按Shift+Enter。（不空一行）。 添加了文字后，用户可以通过属性面板设置文本的格式、字体、样式、颜色等从而使文本变得丰富多采，文本的属性面板如图所示：2、插入图像要在网页中插入图像，执行以下的操作：（1）、激活页面，将光标置于要插入图像的位置。（2）、单击插入面板下的常用工具栏中的图像按钮（3）、在弹出的插入图象对话框中输入要插入的图象的地址。插入了图象后，可以使用图象的属性面板对图象进行属性设置，图象的属性面板如下：3、其他对象的添加和处理（1）、水平分割线水平分割线可以将一个页面上的不同版块分割开来。将光标置于要插入水平线的位置，选择插入|水平线命令，可以在页面上插入一条水平分割线。可以通过水平线的属性面板设置水平线的宽度、高度、类型、对齐方式及是否有阴影。水平线的属性面板如下：（2）、时间日期在Dreamweaver系统中可以插入页面的制作日期和时间。将光标置于要插日期和时间的位置，选择插入|日期命令，可以在页面上插入插日期和时间，还可以设置日期和时间的格式。（3）、Flash动画在Dreamweaver系统中可以在页面中插入Flash动画。将光标置于要插入Flash动画的位置，选择插入|媒体|Flash命令，可以在页面上插入Flash动画。4、页面属性使用Dreamweaver创建了空白网页后可以对页面进行属性设置。执行修改|页面属性命令，打开页面属性对话窗口：使用页面属性对话框，可以设置页面的整个外观，如页面的字体、大小、颜色、背景颜色、背景图象，还可以设置链接的样式、页面的标题等。虽然页面的属性有很多，并不是一个页面要将所有的属性全部都设置，用户在使用过程中根据自己的需要进行设置。四、文字排版与应用选用字体： 在“字体”下拉表框中找到字体。如果在“字体”下拉表框中，没有找到字体。“字体”下拉表框中找到字体。单击“文本”/“字体”/“编辑字体列表”命令。或者在“属性”面板中选择“字体”下拉列表中选择“编辑字体列表选项”。 要添加字体组合，可单击对话框中的加号按钮，若要删除字体组合，可单击减号按钮。在该对话框中的“可用字体”列表中选择所要添加的字体。设置字号：字号指的是相对缺省字体而言的字体的大小。我们可以在浏览器中使用缺省字号，可在“属性”在面板的“大小”下拉列表框中选择。设置颜色：颜色是风页外观的一个重要因素，要改变文本的颜色，可选中要设置的文本，单击“文本”/“颜色”命令。使用标尺与网格：设置页面时往往需要设置页面元素的位置或对齐页面元素，这样可随时将标尺与网络显示出来，以精确定页面元素。单击“查看”/“标尺”/“显示”命令以显示或隐藏标尺，复位标尺原点以及设置标尺单位等操作。设置网格的颜色、间隔，单击“查看”/“网格”/“网格设置”命令。出现对话框进行设置。查找和替换：单击“编辑”/“查找和替换”命令。（能输入连续空格的设置方法：在菜单编辑中单击参数选择，勾选允许连续多个空格即可）五、超级链接的应用 互联网的基本特性之一就是其非线性特征，即访问者不必顺序浏览所有内容，而可以直接跳到其他的网页或网站，正是这种非线性将庞大的互联网络紧密连接到一起。从应用的角度来讲，网页中的超级链接正是构成这种网络非线性的基础。 超级链接（也常简称为超链接或链接）是网页最基本的特点之一，只有合理地将网站中的众多网页通过超级链接的方式相互链接到一起，才能构筑真正有用的网站。因此合理设置超级链接是网页制作中非常重要的一个环节，采用什么样的链接结构也将直接影响到版面的布局和交互性。本章就将主要介绍超链接的一些基本概念和使用方法。在创建超级链接之前，需要了解一些超级链接的基本知识。所谓超级链接，实质上就是指定一个URl地址来访问其所指向的网络资源。URL即统一资源定位器，通常简称为网址。 HTML语言利用统一的资源定位器URL（Universal Resource Location)定义Web上的文档信息。一个URL分为3个部分：协议代码、装有所需文件的计算机地址以及含有信息的文件地址及文件名。用户在上网时，第三部分通常可以省略。第一部分协议说明用于获得信息的方法，常有以下形式： （1）ftp:文件传输协议。 （2）http:超文本传输协议。 （3）mailto:电子邮件协议。 （4）telnet:远程登陆协议。 超级链接是指从一个网页指向一个目标的边连接关系，目标可以是一个另外的网页，也可以是相同网页的不同位置；可以是一副图片，可以是一个文件，还可以是一个应用程序。 超链接的外观多种多样，可以是导航按钮、文本、图片，无论是哪一种格式，只要用鼠标单击链接对象，即可跳转到目标位置。 超级链接文本一般是显示带有下划线的文字，缺省的颜色为蓝色。有些超级链接下面不带下划线，当用鼠标指向超级链接的文本时，文本的字体、字号、或颜色即会发生变化。如果觉得这样过于单调，可以利用CSS（层叠样式表）修改超级链接的属性，改变文本颜色、去掉文本下划线等。使用过的超级链接会以不同的颜色标识出来。 在网页中，超级链接一般分为3种类型：内部链接、外部链接和锚点链接。 想要创建超链接，必须了解链接与被链接文本之间的路径。具体讲，在一个网站中，路径的表示方式有3种：绝对路径、根目录相对路径、文档目录相对路径。 1、绝对路径 绝对路径是反映被链接文档的完整URL，包括使用的传输协 议（对于网页通常是http:/)，例如/即是一个绝对路径。适用于外部超级链接，也就是说和其它服务器上的网页链接。 绝对路径包含的是精确地址，因此不用考虑源文件的位置。如果源文件被移动，则链接无效。 2、根目录相对路径 根目录相对路径是指从站点根文件夹到被链接文档经过的路径。站点上所有公开的文件都存放在站点的根目录下。 根目录相对路径以斜杠（/）开头，表示站点根文件夹，例如/web/web1.htm是指站点根文件夹下的web子文件夹中的一个文件（web1.htm）的根目录相对路径。 使用根目录相以路径时，即使移动包含根目录相对链接的文档，链接也不会发生错误。适用于内部超级链接，即本网站内各网页的链接。 3、文档目录相对路径 文档目录相对路径是指以当前文档所在位置为起点到被链接文档经由的路径。例如web/index.htm即是一个文档相对路径。使用文档相对路径可省去当前文档和被链接文档的绝对URL中相同的部分，保留不同的部分。适用于内部超级链接，即本网站内各网页的链接。 内部链接是指在同一个站点的不同网页之间建立一定的相互联系。在一个网页中，可以为图片或文字创建超级链接。 创建链接方法： 1、先选中要创建链接的对象（文本、图像或其他），然后按右键选择创建链接弹出对话框，可以选择需要链接的网页也可以在URL中输入地址文件名。例如输入Dreamweaver4.htm,这时的默认路径是文档目录相对路径，也就是说这个链接和被链接的网页是同一目录。例如输入./excel/excel.htm这时的默认路径是根目录相对路径，也就是说这个链接和被链接的网页不在同一目录内而是在同一根目录内。如果跟外网链接可以用绝对路径。如输入/还必须输入网页文件名。 2、先选中要创建链接的对象（文本、图像或其他），然后在属性面板的链接框中，输入绝对路径（有没有文件名都行）。例如输入/即可链接到hao123网站。也可以输入相对路径和文件名。 3、先选中要创建链接的对象（文本、图像或其他），然后在属性面板的链接框后，单击浏览文件按钮弹出对话框，操作方法同按右键。 4、先选中要创建链接的对象（文本、图像或其他），然后在属性面板的链接框后，拖动指向文件图标到“文件”面板中所需链接的对象上，然后释放鼠标即可。 取消链接方法： 1、先选中要取消链接的对象，然后在属性面板的链接框内删除即可。2、先选中要取消链接的对象，然后按右键选择删除标签。第四章 网页中的图像和动画元素六、图像的应用插入图像（Ctrl+Alt+I）在网页中可以插入图像，在插入图像之前最好把图像复制到本地文件夹内（如img）的图像文件夹，要重命名为英文名或者是汉语拼音的缩写，然后单击插入菜单中的图像，找到此图像文件双击即可插入。 不是所有的图像格式都可以放在网页上。现在网络支持的图像格式只有3种：GIF、PNG、JPEG。所以如果要将其他格式的图像放到网页上，首先需要转换成这3种格式。 1、位图是由计算机显像最基本的单位Pixel（像素）所组成的。计算机会记录位图图像的每一个点（Pixel)，例如一个图像是100*100Pixel，计算机会分别保存这10000个点，包括点的颜色、坐标及亮度等。2、失量图以像素为单位保存在计算机中，它是由计算机运算来描述所绘出的图形，与分辨率无关，因此缩放失量图像不会失真。 3、颜色模式 本节主要讲述RGB颜色模式和CMYK颜色模式 网络上通常使用RGB颜色模式和索引色（Indexed)。RGB颜色模式中的R代表Red（红色），G代表Green(绿色），B代表Blue（蓝色），它们是显示器的三原色，3种颜色的值都为0255，值不同，会显示不同的颜色，例如当3种颜色的值都为255时，将显示白色；当3种颜色的值都为0时，将显示黑色。 CMYK颜色模式通常应用在印刷领域。C代表Cyan（青绿色），M代表Magenta(洋红色），Y代表Yellow(黄色），K代表Percentage for a Black（黑色的百分比）。与RGB不同的是：CMYK属于Subtractive(衰减），当4色混合在一起时是黑色。注：用RGB模式，可用于网页中，不能用于打印。用CMYK模式，用于打印，不能用于网页中。 4、GIF格式俗称图形交换格式，是网页上流行的图像格式。这种格式的文件适合应用在单纯的图形上。GIFs格式采用了LZW（Lempel-Ziv Welch）压缩格式，它的压缩方式是先将颜色降至256色以下（因为这256色=8位色都被量化且被标注，随时可以修改任一颜色，所以这256种颜色被称为索引色），然后再以LZW的压缩法（以水平方向搜寻相同重复的区域再以较小的标注来记录文件）压缩。这种压缩方法能有效地压缩图形数据，可以加快网页下载速度。 5、JPEG是支持全色彩模式，是一种有损的压缩方式，即当图像压缩时，将损坏图像的数据。JPEG图像打开时会自动解压缩。如果进行高等级解压缩，解压后图像的效果会比原图差。JPEG格式适用于带有复杂阴影和照明效果的照片和图形，网页中JPEG格式的图像主要用在产品照片、3D渲染及精致的阴影图像上。 6、PNG是Protable Netword Graphic(可携式网络图形）的简称，该格式的图像在Internet上可达到无损压缩和显示。与GIF不同的是PNG支持26位颜色（=67108864种颜色）的图像，产生的透明背景没有锯齿边缘。不过一些较早版本的浏览器不支持PNG格式的图像。PNG还包含图层信息。插入交互式图像：在网页中可以插入交互式图像，单击插入菜单中的交互式图像中的鼠标经过图像弹出对话框，按屏幕提示操作，可以在属性栏上修改。插入媒体 （Flash动画）：在网页中可以插入媒体，单击插入菜单中的媒体中的Flash弹出对话框，然后选择Flash影片（扩展名是.swf，不是.fla） 注：Flash文件.swf是Flash软件导出影片文件，不能修改。Flash文件.fla是Flash软件保存的文件，能修改。设置背景图像： 在网页中可以设置背景图像，单击修改菜单中的页面属性弹出对话框，按屏幕提示操作。可以设置背景颜色等。例如本网页就是用的背景图像。第五章 表格与图层七、表格应用1、创建表格1）、光标移到要插入表格的位置，选择主菜单中的【插入】/ 【表格】命令;或者选择”插入”栏中的”常用面板”中 按钮。2）、根据实际的需要，设置下列各项参数3）、单击确定按钮，关闭【插入表格】对话框，在光标处便插入了一个3*3的表格 。2、表格的属性面板当在页面中插入了表格后，选中表格后，系统弹出表格的属性面板，如下图：3、表格的基本操作选定表格、编辑表格、增加或删除表格的行和列、合并或拆分单元格、表格的缩放等。4、布局表格Dreamwear系统除了提供了标准视图创建表格外，还提供了布局视图的表格，给设计着带来了更灵活方便、更有个性的设计空间。使用布局视图首先要从标准视图切换到布局视图，方法是：选择插入对象面板的布局选项卡，选择布局视图即可。使用布局视图设计页面布局需要在页面中绘制布局表格和布局单元格，然后在单元格中添加页面元素，并做必要的调整。1）、绘制布局单元格切换到布局视图下，选择布局单元格按钮，就可以绘制单元格。创建了布局单元格，通过修改布局单元格的属性面板的参数，可以调整布局单元格：提示：在页面中绘制布局单元格时，Dreamweaver系统会自动插入布局表格，该表格将占据整个页面，作为布局单元格的容器。2）、绘制布局表格如果不希望把整个页面作为一个布局表格，可以先绘制布局表格，选择绘制表格按钮，即可绘制布局表格。创建了布局表格，选中布局表格，系统弹出布局表格的属性面板，可以设置布局表格的属性参数来调整布局表格：3）、向布局单元格添加内容，可添加文本、图象、动画等。八、图层的应用图层的创建：1、新建图层方法有两种：第一种：利用菜单插入一个层，操作步骤： 1）在要插入图层的位置单击鼠标左键，确定插入点。 2）执行【插入】/【图层】命令，则在光标的当前处插入了一个系统缺省默认的图层。 第二种：利用插入栏中的常用面板来实现插入图层，操作步骤如下： 1）打开要创建图层的文档。 2）单击插入栏中的常用面板的 按钮。 3）用鼠标拖动该图标，到工作窗口释放鼠标左键（或直接在编辑区内画层）。 2、创建嵌套图层创建的方法：将光标插入到已建好的图层中，然后选择菜单中的“插入/层”命令，可在已建的图层中插入一个嵌套的图层。（注：在绘制时按Alt键，也可创建嵌套的图层）3、图层的属性面板选择图层，则弹出图层属性面板对话框，可以设置图层的属性参数图层的基本操作：1、层的移动：创建图层后，可以拖动图层到任意的位置。2、调整图层的大小：创建图层后，单击层的标记可以选中层，可以用鼠标拖动层的控制柄调整图层的大小，或者在图层的属性面板中设置图层的大小。3、层的对齐：按下Shift键+鼠标单击每一个层的任意位置，可以选中多个层，选择菜单栏的修改/对齐命令，选择需要的对齐方式。4、层面板Dreamweaver系统提供了一个很好的工具层面板来管理文档中创建的图层，打开层面板的方法：选择菜单栏的窗口/其它/层命令，即可打开系统的层面板。在层面板中可以选择层、修改图层的名字、改变层的叠放顺序、改变层的可视性、可以设置图层防止重叠。5、层与表格的转换在文档中选中所有不重叠的层，选择菜单栏的修改/转换/层到表格命令，可以把当前的图层转换为表格。反之还可以把表格转换为图层。图层的应用1、拖动层利用行为的技术制作一个可以在浏览器窗口中用鼠标拖动的图层。操作方法如下：1）、新建一个网页文件，在设计中插入一个图层，并在图层中插入一幅图片。2）、选中该图层，单击“设计”面板中的“行为”选项卡中的填加行为按钮“+”，在弹出的菜单中选择“拖动层”命令。会弹出下面对话框，设置合适的参数，单击确定；3）、在行为面板中，把触发的时间改为onMouseOver,预览页面，可以用鼠标拖动图片任意移动。2、显示隐藏层在页面上创建当鼠标移动到一幅图片上能显示隐藏的图层，当鼠标移开这幅图片时，图层又隐藏起来。具体操作步骤如下：1）、新建一个网页文件，在设计中插入一幅图片和一个图层，并在图层中也插入一幅图片。然后设置图层隐藏。2）、单击图片，然后单击添加行为按钮，在弹出的菜单中选择“显示-隐藏层”命令。会弹出以下的对话窗口3）、选取“已命名层”中的层，单击“显示”按钮，然后单击“确定”按钮。4）、单击事件下面的三角形按钮，在弹出的菜单中选择onMouseover。5）、 重复2）4）步骤， 把3）步中的“显示”改为“隐 藏”， 4）选onMouseout。6）、预览页面。九、时间轴应用1、时间轴面板Dreamweaver中的时间轴就是来安排画面的顺序的，是一种用来控制网页中的层在每一秒的位置的工具。打开时间轴的方法：选择主菜单中的【窗口】/ 【其它】/【时间线（轴）】命令，或者直接按Alt+F9打开时间轴，时间轴面板如下：2、层移动使用时间轴面板在页面上创建滚动的字幕，操作方法： 1）、新建页面文档，创建图层layer1，在图层中输入文本“欢迎光临！”。 2）、选择主菜单中的【窗口】/ 【其它】/【时间线（轴）】命令打开系统的时间轴面板。 4）、将图层layer1添加到时间轴的动画通道中。 5）、在文档中设置图层layer1的移动轨迹在时间轴面板中选中【自动播放】和【循环】命令。 6）、预览效果。 3、应用时间轴交换图像使用时间轴控制图像的替换，在页面上创建三幅图像1.jpg，2.jpg, 3.jpg的自动切换，操作方法： 1）、新建页面文档，在文档中插入图像1.jpg。 2）、选择主菜单中的【窗口】/ 【其它】/【时间线（轴）】命令打开系统的时间轴面板。 3）、将图像1.jpg添加到时间轴的动画通道中。将动画条长度延长致20帧，在第10帧增加关键帧，如下所示： 4）分别选中第10、20帧，在【属性】面板的【源文件】文本框中，输入该关键帧处替换图像的路径和文件名。（替换的图像分别是：shu2.jpg,shu3.jpg）， 在时间轴面板中选中【自动播放】和【循环】命令。 5）F12预览效果 添加时间轴行为：利用添加时间轴行为，页面上创建三幅图像1.jpg, 2.jpg, 3.jpg的自动切换，操作方法： 1）新建页面文档，创建三个图层layer1，layer2，layer3(坐标相同、大小相同)，分别在三个图层中插入三幅图像1.jpg, 2.jpg, 3.jpg 2）将三个图层layer1，layer2，layer3添加到时间轴的动画通道中，如下所示： 3）分别在第1帧对应的行为通道中添加行为动作显示-隐藏层，设置如下： 4）相同的方法分别设置第15、29、43帧添加行为动作显示-隐藏层。 5）设置完毕，在时间轴面板中选中【自动播放】和【循环】命令。 6）预览效果。第六章 表单设计与应用十、表单的应用创建表单：1、什么是表单？表单技术可以实现浏览者与服务器之间信息的交互传送，它是网络信息收集处理的一种重要的方式。通过表单可以从网络的用户端收集信息，然后将收集来的信息经过服务器处理后再反馈给用户。2、如何创建表单？1）、将光标置于欲插入表单的位置，单击表单面板中的 按钮，（或者选择主菜单中的【插入】/ 【表单】命令 ），可在文档中插入表单。2）、表单属性面板在文档中插入了表单对象后，单击表单红色虚线框，或单击HTML状态栏中的标记，系统就会弹出该表单对象的属性面板，如下图所示：3、向表单添加对象1）、文本域-它是表单的重要对象之一，它的作用就是接受访问者输入的一切信息。2）、单选框与复选框在表单中输入有些信息的选择是有限的，例如性别、婚姻等，网页设计者可以利用单选框或复选框限制访问者的答案。3）、列表/菜单列表/菜单的功能与单选按钮、复选框的功能相似，用户利用它，可限制访问者在有限的项目中选择适当的选项。列表/菜单分为菜单和列表两种形式。 a.菜单的特点：限制访问者选一项。 b.列表的特点：允许访问者选择多项。 4）、按钮网页设计者设计表单后，还要提供一个使表单发送、复位等命令，以便访问者输入信息后，能用该命令发送信息或修改信息。通常是使用按钮触发命令。在网页的表单设计中，按钮有三种基本动作： a）、提交表单（Submit Form）：将表单域内的内容发送到用户指定的地址。 b）、复位表单（Reset Form）：将表单域内的所有表单对象（组件）的内容还原为初始值。 c）、无动作（None）：也有称为自定义，也有称无动作。 5）、跳转菜单跳转菜单是文档中的一种下拉菜单，在下拉菜单中列出各种能够链接到其它文档的选项。6）、其它表单对象：文件域、图像域、隐藏域。第七章 使用框架技术十一、框架应用1、创建框架网页1）、打开一个新的文档窗口。2）、打开插入栏中的【 框架】面板。3）、单击框架面板中的 按钮，在文档中创建了左右结构的框架集。如下图所示：2、向框架中添加内容框架创建好以后，就可以往里添加内容了。每一个框架里都是一个独立的文档，可以直接添加内容，也可以在框架内打开已经存在的文档。3、保存框架每一个框架都包含一个文档，因此一个框架集会包含多个文档，在保存文档的时候，不能只简单地保存一个文档，要将整个网页文档都保存下来。4、框架、框架集的属性面板选中框架（Alt+鼠标单击要选的框架），系统弹出框架的属性面板，可以在属性面板中修改框架的参数来调整框架：单击框架的边框，可以选中框架集，可以弹出框架集的属性面板，可以在属性面板中修改框架集的参数来调整框架集：5、在框架中使用链接在没有框架的文档中，设置时链接，属性面板中的目标（Target）下拉列表框有四种形式： _blank：在一个新的浏览器窗口打开链接文档，原浏览器窗口并不关闭。 _parent：回到上一级的浏览器窗口显示链接所指向的文档内容。 _self：在当前的浏览器窗口中显示链接所指向的文档内容。 _top：回到最顶端的浏览器窗口显示链接所指向的文档内容。 使用框架结构的目的是为了在一个框架中单击某个链接，使所链接的文件在另一个框架中打开。（这样就实现了其中一个框架的内容控制另一框架的内容。）在文档中使用了框架，并且对框架进行了命名，这些名称会出现在Target目标下拉列表中，这样用户很容易地选择目标框架，实现在框架中的链接。第八章 行为和事件十二、行为应用行为的基础：1、行为的概念行为就是一段JavaScript 代码，这些代码放置在文档中执行特定的任务（例如打开浏览器窗口、显示或隐藏层、播放声音或影片），在浏览器中通过事件触发，以实现网页的各种特殊的功能。也就是说，一个行为是一个事件和由该事件触发的动作组成的。2、什么是事件？事件是浏览器产生的有效信息，也就是说访问者对网页所做的事情。如：onClick 、onMouseOver、 onMouseOut等（事件与浏览器的版本有关，每个浏览器都提供一组事件，这些事件可以与“行为”面板的动作 (+) 弹出式菜单中列出的动作相关联。浏览器的版本越高，可以使用的事件就越多，反之越少。）3、什么是动作？动作指的是“行为”中的JavaScript 代码所执行特定的操作，如打开浏览器窗口、显示或隐藏层、播放声音等。应用行为：在网页中是通过“行为”面板把“行为”附加（添加）到网页元素中来实现各种不同的网页效果。1、“行为”面板若要打开“行为”面板，请单击“设计面板”中的 【行为】 命令。打开系统的“行为”面板如下：2、Dreamweaver的常用行为应用举例（1）、调用Javascript【调用Javascript】行为动作,能够让用户使用行为面板去指定一个自定义功能,或者当一个事件发生时执行一段Javascript代码,具体操作步骤如下: 1）、在文档窗口中键入中文“关闭窗口”，然后将新输入的文本选定。 2）、为文本添加空链接，在其属性面板的【链接】栏内直接输入“#”。 3）、打开行为面板，单击“+”按钮，从动作弹出的菜单中选择【调用Javascript】命令，打开【调用Javascript】对话框，如下图所示： 4）、键入将要执行的Javascript代码或函数名，如“window.close()”，用来关闭窗口的命令。单击“确定”按钮，完成设置。 5）、在行为面板中选择【onClick】事件。 6）、预览网页。 （2）、播放声音使用【播放声音】动作来播放声音和音乐文件。例如，在页面载入时会自动播放一段动听的音乐，或者当鼠标点击按钮时会发出声音，具体的操作步骤如下： 1）、打开一个预加入背景音乐的页面文档，然后打开行为面板。 2）、在行为面板中点击“+”按钮，从动作弹出的菜单中选择【播放声音】命令，打开【播放声音】对话框，如下图所示： 3）、点击“浏览”按钮选中一个声音文件，或者直接在“播放声音”域中输入声音文件的路径和文件名。 4）、单击“确定”按钮，完成声音设定。 5）、在行为面板中加入了一个事件为【onLoad】，动作为【播放声音】。（如果不想当网页载入时就播放音乐，而是想当鼠标点击时再播放，只要将事件改为【onClick】即可。） （3）、打开浏览器窗口使用打【开浏览器窗口】行为动作，将打开一个新的浏览器窗口，在其中显示指定的网页文档。用户可以指定这个新窗口的属性，包括窗口尺寸大小、是否可以调节大小、是否有菜单栏等等。在网页中的小图需要放大时，可以使用这个行为，在一个大窗口中放置小图像的放大图，可将窗口设置成与图像大小相吻合的尺寸，将多余的导航栏、地址栏、状态栏、菜单栏等去掉不显示。操作如下： 1）、在文档中选定一幅需要放大的图像。 2）、在行为面板中点击“+”按钮，从动作弹出菜单中选择【打开浏览器窗口】命令，打开【打开浏览器窗口】 对话框。如下图： 3）、点击浏览按钮以选择图像放大图。 4）、输入图像的放大图的路径和文件名，其他项都不选，单击“确定”按钮，完成设置。 5）、动作设置完成以后，还要对事件进行设置在弹出的事件菜单中选择【onMouseDown】(鼠标左键按下立即产生动作) 6）、预览效果。十三、CSS层叠式样式应用CSS，是Cascading Style Sheets的缩写，中文名称为层叠样式表。它可以非常灵活的控制网页上的外观，是网页设计的强有力的工具。第九章 设计标准模板十四、模板应用模板的设计：在网页设计中，常常会遇到很多布局结构和版式风格相似而网页内容不同的页面。对于这类型的网页，每一个页面都要一次次制作，不但效率低且乏味。DreamweaverMX系统提供了一个很好的工具模板来解决这个问题。DreamweaverMX的模板是一种预先设计好的网页样式，在制作风格相似的页面设计，只要套用这种模板便可设计出风格一致的网页。1、什么是DreamweaverMX的模板？模板是一种将较好的格式保留以备反复使用的文件。模板是一种特殊文档，新建模板时，必须明确模板建在哪个站点中。模板文件都保存在本地站点的Template文件夹中，它的文件格式是.dwt。2、设计模板设计模板的方法可以是新建一个空白的模板，然后对它进行编辑后保存，也可以利用一个现成的网页，设置好可编辑区域，转存为模板。提示：在创建一个模板时，必须设置模板的可编辑区域和锁定区域，这个模板才有意义。模板的应用：1、用