定义列表元素；我们这一章可能用到的常见的事件有： onMouseOver：鼠标指针移到目标上时； onMouseUp：按下鼠标再放开左键时； onMouseOut：鼠标指针从目标移开时；
onMouseDown：按下鼠标左键时（不需要放开左键）； onClink：鼠标左键单击时； onDblClick：鼠标左键双击时； onLoad：载入网页时； onUnload：离开页面时；
onResize：当浏览者改变浏览窗口的大小时； onScroll：当浏览者拖动滚动条的时； 行为面板
依次单击菜单栏【Windows/Behaviors】(窗口/行为)，或按快捷键『Shift+F3』，或单击“Show Behaviors”（显示行为面板）按钮，展开“Design/Behaviors”（设计/行为）面板（如图13-1）：
图13-1 “＋”（添加行为按钮）：单击该按钮添加行为（包括事件和动作），常见的动作如下： “Call JavaScript”（调用JavaScript）：单击该选项可以调用自己制作的JavaScript脚本或第三方开发的JavaScript脚本；
“Change Property”（改变属性）：改变页面元素的各项属性；
“Check Browser”（检查浏览器）：同一个网页，在不同的浏览器上的显示可能大为不同；为了使我们的网页在各种不同的浏览器中都完美无缺，我们可以分别针对不同的浏览器将同一网页制作成几个不同页面，然后再调用Check Browser，根据访问者浏览器的不同自动进入相应的页面；
“Check Plugin”（检查插件）：比如你的网页上有一个Flash动画，而访问者的浏览器没有Flash播放插件时，利用此功能你可以按你的解决方案对访问者进行提醒；
“Control Shockwave or Flash”（控制Shockwave或Flash）：应用此功能我们可以在网页上做一些交互按钮，使用户可以控制动画的播放进程；
“Drag Layer”（拖动层）：用来制作随鼠标移动而移动的网页特效； “Go to URL”（转到URL）：应用此项可以实现一些比较高级的跳转；比如：单击一个链接可以同时打开几个页面，打开一个页面后自动跳转到一个新的页面等；
“Hide Pop-Up Menu”（隐藏弹出菜单）：应用此功能可以在制作下拉菜单时隐藏菜单； “Jump Menu”（跳转菜单）：应用此功能可以插入跳转导航菜单；前面已经讲述； “Jump Menu Go”（跳转菜单开始）：应用此功能为跳转菜单增加一个“Go”按钮； “Open Browser Window”（打开浏览器窗口）：应用此功能可以打开浏览器窗口并设置新窗口的大小、工具条显示情况等属性；
“Play Sound”（播放声音）：应用此功能可以为网页加入声音；
“Popup Message”（弹出信息）：应用此功能可以弹出消息框来显示预先设定好的文本； “Preload Images”（预先载入图像）：应用此功能可以在页面载入时预先读入某些特效的图像，以避免事件发生时读取延迟和保持效果的连续性；
“Set Nav Bar Image”（设置导航条图像）：应用此功能可以制作有翻滚特效的导航条； “Set Text”（设置文字）：应用此功能可以在特定的地方显示文字，其中： “Set Text of Frame”（设置框架文字）：应用此功能可以在框架内显示信息； “Set Text of Layer”（设置层文字）：应用此功能可以在层内显示信息；
“Set Text of Status Message”（设置状态栏文字）：应用此功能可在状态栏显示信息； “Set Text of Text Field”（设置文本域文字）：应用此功能可以在文本框显示信息； “Show Pop-Up Menu”（显示弹出菜单）：应用此功能可以在制作下拉菜单时显示菜单； “Show-Hide Layers”（显示-隐藏图层）：应用此功能可以显示或隐藏图层；
“Swap Image”（交换图像）：应用此功能不仅可以建立一对一的翻滚图，还可以建立一对多等更为复杂的替换特效；
“Swap Image Restore”（恢复交换图像）：应用此功能可以将已经翻滚的图像还原；； “Timeline”（时间轴）：应用此功能可以制作与时间轴有关的动画效果，其中： “Go to Timeline Frame”（转到时间轴帧）：跳转到指定帧； “Play Timeline”（播放时间轴）：播放动画； “Stop Timeline”（停止时间轴）：停止动画；
“Validate Form”（检查表单）：应用此功能可验证用户提交的表单内容是否符合要求； “—”（删除行为按钮）：选择一个行为后，单击该按钮删除所选行为（包括事件和动作）； “▲/▼”：选择一个行为后，单击该按钮可以将所选行为上移或下移一行； “Events”（事件）：显示为对象设置的事件； “Actions”（动作）：显示与左侧事件对应的动作； 行为操作
在这一节中，我们将通过具体实例讲述几个我们在网页设计中应用较多的交互效果。改变对象属性
在页面上插入一个图层，在图层中输入一段文本，名称采用默认的“Layer1”，“Tag”（标记）采用默认的“DIV”，并保持该图层被选中（如图13-2）：
图13-2 单击“Behaviors”（行为）面板上的“＋”按钮，在弹出对话框中选中“Change Properties”（改变属性）（如图13-3），弹出“Change Properties”（改变属性）对话框（如图13-4）。
图13-3
图13-4 “Type of Object”（对象类型）：在右侧的下拉选单中选择标记，如“DIV”（和“Properties”（属性）面板中一致）；
“Named Object”（已命名的对象）：从右侧下拉选单中选中对象名称，如“Layer1”； “Property”（属性）：设置对象的属性，包括两个选项：
“Select”（选择）：从下拉选单中选择需要更改的属性；从最右侧的下拉选单中选中兼容的浏览器类型；
“Enter”（输入）：自己输入需要修改的属性；
本例中我们选中“Select”，并选中“style.backgroundColor”（背景颜色）； “New Value”（新值）：为所选的属性值设置新值，如“green”（绿色）；
完成上述设置后，单击“OK”按钮保存并退出，这时我们可以发现“Behaviors”（行为）面板中已经出现了我们所设的行为（如图13-5）：
图13-5 Dreamweaver MX默认的事件为“onClick”（单击），单击“Events”（事件）列右侧的三角形按钮“▼”，在弹出菜单中选择“onMouseOver”（如图13-6，图13-7）：
图13-6
图13-7 如果找不到所要地事件，可以选择最底部的“Show Events for”（显示事件），在子菜单中选择较高版本的浏览器（如图13-8）：
图13-8 按快捷键『F12』浏览，可以看到预料的效果（如图13-9）：
图13-9 13.3.2 检测浏览器
为了使我们的网页在各种浏览器中的显示完美无缺，我们必须为同一网页制作几个适合相应类型浏览器的文件。在本例中，我们假设已经为某一页面制作了三个网页文件“ie.htm”、“netscape.htm”和“other.htm”，分别适用于IE、Netscape和其他类型的浏览器。由于使用IE的用户是大多数，我们将默认的页面设置为“ie.htm”，将检测浏览器的事件设置在“ie.htm”上。也就是说，默认的是“ie.htm”，然后在“ie.htm”加载时（“onLoad”（加载）事件），激发检测浏览器的动作（若用户浏览器为IE，则保持原来的页面不变；若用户浏览器为Netscape，则跳转到“netscape.htm”；若用户使用的是其他浏览器，则跳转到“other.htm”）。
打开网页文件“ie.htm”，在状态栏上单击选中HTML标记“
”（如图13-10），使之变为粗体（如图13-11）。图13-10
图13-11 在“Behaviors”（行为）面板中单击“＋”（添加行为）按钮，在弹出菜单中选中“Check Browser”（检测浏览器）（如图13-11），弹出“Check Browser”（检测浏览器）对话框（如图13-12）：
“Check Browser”（检测浏览器）对话是由一组条件语句组成的，根据判断的结果做出选择，在三个网页当中选其一。这个动作可以明确判断两种浏览器：Netscape 和IE，不是这两种浏览器一概做“Other Browsers”（其他浏览器）处理。判断每一种浏览器都会有三种选项：“Go to URL”（打开一个指定文件），“Go to Alt URL”（打开另一个指定文件），“Stay on this page”（停留在当前页面）。“URL”和“Alt URL”是定义“Go to URL”和“Go to Alt URL”所指向页面的。
由于我们当前页面就是“ie.htm”，我们在这里将“URL”设为“netscape.htm”，将“Alt URL”设为“other.htm”。然后只需要将“Netscape Navigator”设为“Go To URL（netscape.htm）”，将“Internet Explorer”设为“Stay on this Page（ie.htm）”，其他所有的都设为“Go To Alt URL（other.htm）”就可以了（如图13-12）。
图13-12 单击“OK”按钮保存并退出后，我们可以发现“Behaviors”（行为）面板中已经添加了我们刚才设置的行为：“Events”（事件）为“onLoad”（载入）；“Actions”（动作）为“Check Browser”（检测浏览器）（如图13-13）：
图13-13 检测插件
Flash动画不仅体积小、制作简便，而且具有交互功能。所以，如果在我们的网页上放上几个小Flash，将会使网页增色不少。但遗憾的是，运行Flash需要插件的支持，但并不是所有的用户的浏览器都安装了Flash插件。如果用户打开一个含有Flash的网页却显示不出来，那我们岂不是弄巧成拙！
怎么解决这个问题呢？学过了上一节，读者也许有一点思路了。对了，我们可以为包含Flash的页面给出另外一个版本。当加载页面时（“onLoad”事件），执行检测Flash插件的动作：若用户安装了Flash插件，保持页面不变；否则跳转到另一个页面。
在本例中，我们假设有一个含有Flash的页面“flash.htm”，我们已经给它另做了一个内容相同不含Flash的文件“html.htm”。打开“flash.htm”，单击选中任务栏上的“
”标记，然后单击“Behaviors”（行为）面板上的“＋”（添加行为）按钮，在弹出对话框中选择“Check Plugin”（检测插件）（如图13-14），弹出“Check Plugin”（检测插件）对话框（如图13-15）。图13-14
图13-15 “Plugin”（插件）：设置需要检测的插件，其中： “Select”（选择）：在右侧的下拉菜单中选择所要检测的插件，如“Flash”； “Enter”（输入）：直接输入第一项没有列出的插件，一般很少用；
“If Found，Go To URL”（如果有，前往URL）：设置如果检测时发现了目标插件时所要打开的页面；
“Otherwise，Go To URL”（否则，前往URL）：设置当检测时没有发现目标插件时所要打开的页面；
“Always go to first URL if detection is not possible”（如果无法侦测，永远前往第一个URL）：选中此项表示如果不能进行插件检查就进入第一个页面；一般不选；
完成上述设置后，单击“OK”按钮保存并退出。我们可以发现“Behaviors”（行为）面板中已经添加了我们刚才设置的行为：“Events”（事件）为“onLoad”（载入）；“Actions”（动作）为“Check Plugin”（检测浏览器）（如图13-16）：
图13-16 拖动层
如果我们想在网页上作一个像拼图游戏、拖出菜单这类可以随用户的鼠标指针移动的页面元素，我们就需要应用“Drag Layer”（拖动层）行为了。
插入一个图层并将需要移动的元素放入其中，选中该层（此时状态栏的标记“”变成粗体），单击“Behaviors”（行为）面板中的“＋”按钮并从中选择“Drag Layer”（拖动层）命令（如图13-17），弹出“Drag Layer”（拖动层）对话框，默认为“Basic”（基本）选项卡（如图13-18）。
图13-17
图13-18 “Layer”（层）：从右侧下拉选单中选择需要被拖动的层； “Movement”（移动）：设置层可以拖动的范围，有两个选项： “Uncontrained”（不限制）：选中此项可以任意拖动层；
“Constrained”（限制）：选中此项只能在所设范围内拖动层；在右侧的“Up”（上）、“Down”（下）、“Left”（左）和“Right”（右）文本域中设置相对于图层的起始位置的范围； “Drag Target”（放下目标）：在“Left”和“Top”文本域中设置放置目标的位置；或单击“Get Current Position”（取得目前位置）按钮自动将当前图层的所在位置输入这两个文本域中。（放置目标指用户所拖动的层需放置的地方；当层的左上角坐标和我们设置的值相匹配时，即达到了放置目标，该值是相对于浏览器窗口的左上角而言）
“Snap if Within”（靠齐距离）：在文本域中输入值，指定图层与放置目标的靠近距离（即当拖动图层与放置目标的距离小于该值时，自动将图层与放置目标对齐）； 如果还要定义图层的拖拽范围，可以单击“Advanced”（高级）标签，弹出“Advanced”（高级）选项卡（如图13-19）：
图13-19 “Drag Handle”（拖拽控制点）：设置图层中用于拖动图层的区域，包括两个选项： “Entire Layer”（整个层）；
“Area Within Layer”（层内区域）：在“Left”和“Top”文本域中设置拖拽区域左上角点的坐标；在“Width”和“Height”文本框中输入拖动区域的宽度和高度值； “While Dragging”（拖拽时）：设置拖动时层的状态：
“Bring Layer to Front”（将层移至最前）：选中此项表示在拖动层时将层移动到最顶层； “then”（然后）：设置放置层时层的叠放状态：
“Leave on Top”（留在最上方）：选中此项表示将层保留在最顶端； “Restore Z-Index”（还原Z序列）：还原为原来的叠放顺序；
“Call JavaScript”（呼叫JavaScript）：设置拖动层时调用的JavaScript代码； “When Dropped”（放下时）：设置放下时层的状态：
“Call JavaScript”（呼叫JavaScript）：设置放下层时调用的JavaScript代码； “Only if snapped”（只有在靠齐时）：选中此项表示只有在靠齐时才调用JavaScript代码；
完成上述设置后，单击“OK”按钮保存并退出。我们可以发现“Behaviors”（行为）面板中已经添加了我们刚才设置的行为：“Events”（事件）为“onClick”（载入）；“Actions”（动作）为“Drag Layer”（检测浏览器）（如图13-20）：
图13-20 控制Shockwave或Flash 在“Insert/Common”（插入/标准）面板中单击“Flash”（插入Flash）按钮（如图13-21），选择一个Flash文件并将其命名为“flash1”（如图13-23）。
图13-21 在“Insert/Forms”（插入/表单）面板中单击“Button”（插入按钮）按钮（如图13-22），插入几个按钮并将它们的“Action”（动作）设置为“none”（无），“Label”（标签）依次设置为“Play”（播放）、“Stop”（停止）、“Rewind”（返回）和“GoTo4”（转到第4帧）（如图13-23）。
图13-22
图13-23 选中一个按钮“Play”（播放），然后在“Behaviors”（行为）面板中单击“＋”按钮，在弹出菜单中选中“Control Shockwave or Flash”（控制Shockwave或Flash）（如图13-24），弹出“Control Shockwave or Flash”（控制Shockwave或Flash）对话框（如图13-25）。
图13-24
图13-25 “Movie”（影片）：从下拉选单中选择要控制的动画，如“flash1”； “Action”（动作）：设置控制动画的动作，其中： “Play”（播放）：选择该项表示播放动画； “Stop”（停止）：选择该项表示停止动画；
“Rewind”（倒带）：选择该项表示使播放的动画返回初始位置；
“Go to Frame”（前往帧）：选择该项并在其后的文本框中数字表示将动画跳至指定帧； 完成上述设置后，单击“OK”按钮保存并退出。我们可以发现“Behaviors”（行为）面板中已经添加了我们刚才设置的行为：“Events”（事件）为“onClick”（单击）；“Actions”（动作）为“Control Shockwave or Flash”（控制Shockwave或Flash）（如图13-26）：
图13-26 同样可以完成对其他按钮的设置，设置完成后按快捷键『F12』浏览即可看到预料的效果。转到URL 关于文字的链接我们前面讲得已经非常多了，但是应用“Go To URL”（转到URL）我们可以实现一些高级的跳转。我们下面就来讲一个单击一个链接同时打开几个页面的例子。单击“Insert/Frames”（插入/框架）面板上的“Left and Nested Top Frames”（左框架嵌套顶框架）按钮（如图13-27），插入一个嵌套框架集（如图13-29）。
图13-27 单击“Insert/Forms”（插入/表单）面板上的“Button”（按钮）按钮（如图13-28），插入一个按钮（如图13-29）。
图13-28 选中该按钮并将其“Action”（动作）设为“none”（无），单击“Design/Behaviors”（设计/行为）面板上的“＋”按钮，选中“Go To URL”（转到URL）（如图13-29），弹出“Go To URL”（转到URL）对话框（如图13-30）。
图13-29 “Open In”（打开在）：设置链接的打开方式；列表框中列出了当前框架集中的所有框架的名字以及主窗口，如果页面没有框架，则只有“Main Window”（主窗口）一个选项。“URL”（URL）：设置在选定窗口中打开的页面URL地址； 在本例中，我们为三个框架“leftFrame”、“topFrame”和“mainFrame”分别设置URL地址“http://www.xiexiebang.com”、“http://www.xiexiebang.com”和“http://www.5460.net”，设置好后单击“OK”按钮保存并退出（如图13-30）：
图13-30 这时我们可以发现“Behaviors”（行为）面板中已经添加了我们刚才设置的行为：“Events”（事件）为“onClick”（载入）；“Actions”（动作）为“Go To URL”（转到URL）（如图13-31）：
图13-31 按快捷键『F12』浏览，即可看到我们预料的效果（如图13-32）：
图13-32 13.3.7 打开浏览器窗口 应用“Open Browser Window”（打开浏览器窗口）行为可以在用户触发该行为时打开一个新的浏览器窗口，在新窗口中载入指定URL地址上的网页。该选项还可以设定新窗口的各项属性，如窗口的大小、是否显示导航栏、状态条等。如果没有指定窗口的属性，则按启动窗口的属性和大小打开，一旦指定了窗口的任何属性，将自动关闭其他属性。
下面我们就利用“Open Browser Window”（打开浏览器窗口）行为来实现在浏览网站时经常看到的广告窗口。
首先准备一个页面如“advertise.htm”作为广告，然后在我们的主页上单击选中状态栏中的标记“
”，单击“Behaviors”（行为）面板中的“＋”按钮，选中“Open Browser Window”（打开浏览器窗口）（如图13-33），弹出“Open Browser Window”（打开浏览器窗口）对话框（如图13-34）。图13-33
图13-34 “URL to Display”（要打开的URL）：设置新窗口中所要打开的页面地址，如“advertise.htm”；
“Window Width”（窗口宽度）：设置新窗口的宽度； “Window Height”（窗口高度）：设置新窗口的高度； “Attributes”（属性）：设置新窗口的属性，其中： “Navigation Toolbar”（导航工具栏）：选中此项表示在新窗口中显示导航工具栏； “Location Toolbar”（地址工具栏）：选中此项表示在新窗口中显示地址工具栏； “Status Bar”（状态栏）：选中此项表示在新窗口中显示状态栏； “Menu Bar”（菜单条）：选中此项表示在新窗口中显示菜单栏；
“Scrollbars as Needed”（需要时使用滚动条）：选中此项当内容超出新窗口时显示滚动条；
“Resize Handles”（调整大小手柄）：选中此项表示允许用户调整新窗口大小； “Window Name”（窗口名称）：设置新窗口的名称；
由于广告窗口需要向用户传递的信息不多，所以一般尺寸较小，且不需要各种工具条。我们在此为其设置好尺寸后，其他都不设。单击“OK”按钮保存并退出，这时我们可以发现“Behaviors”（行为）面板中已经添加了我们刚才设置的行为：“Events”（事件）为“onLoad”（载入）；“Actions”（动作）为“Open Browser Window”（打开浏览器窗口）（如图13-35）：
图13-35 按快捷键『F12』浏览，可以看到当主页打开后，立即弹出广告窗口（如图13-36）：
图13-36 播放声音
调用“Play Sound”（播放声音）行为可以方便地在网页中加入音乐。
单击“Insert/Forms”（插入/表单）面板上的“Button”（按钮）按钮（如图13-37），插入一个按钮（如图13-29）。
图13-37 选中该按钮并将其“Action”（动作）设为“none”（无），单击“Design/Behaviors”（设计/行为）面板上的“＋”按钮，选中“Play Sound”（播放声音）（如图13-38），弹出“Play Sound”（播放声音）对话框（如图13-39）。
图13-38
图13-39 “Play Sound”（播放声音）：设置要加入网页的音乐文件即可（如果听不到声音，可能是浏览器不支持所选音乐格式）。
设置完后单击“OK”按钮保存并退出。这时我们可以发现“Behaviors”（行为）面板中已经添加了我们刚才设置的行为：“Events”（事件）为“onClick”（点击）；“Actions”（动作）为“Play Sound”（播放声音）（如图13-40）：
图13-40 这时我们可以发现页面中出现了一个“Plugin”（插件）图标（如图13-41）。选中该图标后，“Properties”（属性）面板的内容发生相应变化，单击“Parameters”（参数）按钮（如图13-41），弹出“Parameters”（参数）对话框，我们可以在该对话框中为声音播放设置各项参数（如图13-42）。
图13-41
图13-42
1、APPLET2、3、第十单元插入多媒体对象
教学目的：网页中插入FLASH SHOCKWAVE ACTIVE PLUGIN JAVA 教学重点：插入对象的具体方法 课堂教学
插入FLASH按扭的对话框
插入FLASH动画方法对话框
插入FLASH文本
修改属性
添加SHOCKWAVE 对象
java applte对象
添加plugin
属性对话框
作业：在自己的网页上添加声音
第12单元 模板和库
一、教学目的：理解模板的作用，掌握模板的创建和应用。
二、教学重点：模板的应用。
三、内容： 模板的概念
在制作一个网站的整套页面时，我们会发现大部分页面的基本格式都是相同的。比如说页面背景、文字样式、导航条、版权信息等。所以我们可以将页面先做成类似申请表一样的表格，将那些相同的内容固定下来，并留出一定的空白以供将来插入不同的内容。以后我们制作页面时就只需要在这个表格的基础上添加新的内容就可以了。一般网页的基本组成部分：
“logo”：即网站的徽标，这是一个网站的标志，一般放在每个页面最顶部的左上角，其一般和标准大小为88px×31px；
“banner”：即页面上的广告条，可放在页面的任意位置
“Nav Bar”：即页面上的导航条，一般放在页面的顶部和底部，用来快捷地在网站各页面之间跳转
“Location Bar”：即页面上的地址条，一般在导航条下面，用来告诉用户当前页面所属的类别和树型目录
“content”：即页面的正文，这是每个页面区别于其他页面的地方；
“copyright”：即页面上的版权信息，一般在页面的最底部模板中的元区域可以分为两类：锁定区域和可编辑区域。锁定区域是指在任何基于该模板的网页中都不可编辑或修改的区域，可编辑区域是指在基于该模板的网页中可以被编辑或修改的区域。当我们编辑模板本身时，二者皆可修改；但当我们编辑基于模板的文挡时，后者不可修改。
在我们批量制作网页时，logo、导航条和版权信息往往是不变的，此外页面的背景和文字样式也可能需要统一，因此我们可以将这些元素设置为锁定区域。而地址条、正文和页面的标题往往是不同的，我们可以将这些元素设置为可编辑区域。创建模板文件
【File/New】（文件/新建）（如图14-3），弹出“New Document”（新建文档）对话框（如图14-4）。在“General”（常规）选项卡的左边“Category”（类别）列表框中选中“Basic Page”（基本页面），然后在右边“Basic Page”（基本页面）列表框中选中“HTML Template”（HTML模板），然后单击“OK”按钮保存并退出
新建文件窗口的标题栏中的文件名前出现了 [<>(Untitled-2*)]”，表明这是一个模板文件。
打开一个现有的网页文件,然后单击菜单栏【File/Save as Template】（文件/另存为模板），弹出“Save as Template”（另存为模板）对话框。
“Site”（站点）：从右侧下拉选单中选择保存和应用模板的站点；
“Existing Templates”（已存在地模板）：该列表框中列出了所选站点钟所有的模板； “Save As”（另存为）：设置所要保存的模板文件的名称；
这时我们发现Dreamweaver MX已经自动在“Site”（站点）面板中新建了一个名为“Templates”（模板）的文件夹，我们刚才创建的模板文件“mycool.dwt”就放在该文件夹下
定义可编辑区域
先为模板设置可编辑区域。
将光标置于想要插入可编辑区域的地方，然后依次单击菜单栏【Insert/Template Objects/Editable Region】（插入/模板对象/可编辑区域）（如图14-10），或单击“Insert/Templates”（插入/模板）面板上的“Editable Region”（可编辑区域）按钮（如图14-11），或按快捷键『Ctrl+Alt+V』，弹出“New Editable Region”（新建可编辑区域）对话框 定义模板的重复区域
重复区域：是指一个页面中可以任意多地增加的部分，例如表格的内容等。重复区域是不可编辑区域，如果要编辑不同的内容，必须在重复区域中 条件区域：是指在满足一定条件下才在页面中显示的区域插入可编辑区域。
操作：
1、选中重复区域的文本内容。
2、在INSERT面板中单击重复按钮
4、为区域输入一个名称。
教学内容：认识Dreamweaver及站点和文件的操作 目的要求：
1、了解Dreamweaver界面和面板操作方法；
2、掌握Dreamweaver站点的操作方法；
3、掌握Dreamweaver站点文件的操作方法。
教法教具：演示法、讲授法、提问法、讨论法、比较学习法 教学过程：
讲授新课：
认识Dreamweaver：
一、打开DM：
开始—程序—Adobe Dreamweaver—
二、认识DM：
标题栏、菜单栏、工具栏、编辑栏、状态栏、面板。工具栏：视图—工具栏—插入/文档/标准。面板：窗口—相应面板。折叠面板/展开面板。
三、网页制作步骤：
创建文件—设置标题—编辑内容—保存文件—浏览器查看效果。浏览网页：
1、在编辑状态下，按F12浏览。
2、保存文件，打开浏览器，打开文件浏览。
站点操作：
一、新建站点：
方法：
1、站点—新建站点；
2、站点—管理站点—新建—站点；
3、文件面板—站点下拉菜单—管理站点—新建—站点 步骤：
方法1：基本选项—给站点命名—不使用服务器—确定站点存储位置（选
Adobe Dreamweaver CS4 择已有文件夹或新建文件夹）--选择无远程服务器—完成。
方法2：高级选项—输入站点名称—选择本地根文件夹位置（选择已有文件夹或新建文件夹）
二、编辑站点：
方法：
1、站点—管理站点—选择站点—编辑—修改站点名称或存储位置；
2、文件面板—站点下拉菜单—管理站点—选择站点—编辑—修改站点名称或存储位置。
三、复制站点：
方法：
1、站点—管理站点—选择站点—复制；
2、文件面板—站点下拉菜单—管理站点—选择站点—复制。
四、删除站点：
方法：
1、站点—管理站点—选择站点—删除；
2、文件面板—站点下拉菜单—管理站点—选择站点—删除。
注意：站点删除后，仅删除了站点在DW中的指向，并未删除站点文件夹，站点文件夹的内容仍然存在。
五、建立站点的优点：
当站点下文件的位置或文件名发生变化时，与之相关联的文件能提示更新，使关联不发生错误。
站点下文件的操作：
一、新建文件：
方法
1、文件—新建—Html—创建 方法
2、文件面板：
折叠状态：右击站点名称或站下文件夹—快捷菜单选择“新建文件”
展开状态：文件—新建文件 注意：
可以通过第一种方法新建基于某种模板的新文件。
二、复制文件：
文件面板—文件名称上右击—编辑—复制。
三、重命名文件：
在文件面板下选择站点下的文件名称：
1、文件名称上右击—编辑—重命名
2、单击文件名称--按F2
3、两次单击文件名称
注意：
在站点给文件重命名后，若有文件与之相关联，会给出更新提示；而在资源管理器给文件重命名不会给出提示。
四、删除文件：
文件面板—选择站点下的文件名称—右击—编辑—删除或按Del。
注意：
在站点下删除文件后，站点下的文件被真删除。
在站点下删除文件，若有文件与之相关联，会给出提示；而在资源管理器删除不会给出提示。
五、新建文件夹：
文件面板—站点下的某文件夹位置上右击—新建—文件夹。
课后作业：
1、在Dreamweaver中新建本地站点有哪些方法？如何新建本地站点？
2、在Dreamweaver中新建html文件有哪些方法？
3、在Dreamweaver中，删除站点与在资源管理器删除站点文件夹效果是否相同？
4、在Dreamweaver中，删除站点内文件与在资源管理器删除站点内文件效果是否相同？
5、在Dreamweaver中，在站点内给文件重命名或移动文件与在资源管理器给文件重命名或移动文件效果是否相同？
课题
认识Dreamweaver
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识。【学习步骤】
1、Dreamweaver的功能
Dreamweaver可以像普通的字处理软件一样编辑Internet上以HTML格式保存的所有文件，也就是网页；它支持动态HTML，可以在网页中产生动画；还可以在网页中插入各种插件，以产生特殊效果。
Dreamweaver可用于管理站点，它像文件夹一样创建和打开站点，用不同的方式查看站点中各个网页之间的关系，调整站点的组织结构，使整个站点条理清晰。
2、Dreamweaver的窗口
（1）标题栏（2）菜单栏（3）工具栏（4）视图栏（5）文件夹列表(6)工作区
3.网页工作区的三个视图方式选项 它们分别是“普通”、“HTML”“预览”，它们之间的相互切换十分容易实现的。
普通视图方式是Dreamweaver对网页所见即所得编辑方式的最佳体现，在此方式下，可以
像在Word中那样直接进行各种编辑操作，实现网页编辑的所有功能。
HTML视图实际上是一个文本编辑器，其中给出了普通视图方式下所件网页的HTML代码。在这里可以用菜单命令进行复制、粘贴、删除、查找等操作。对于HTML语言中的不同成分均用不同的颜色显示，这样比较容易区分各种语法成分。
为了在制作网页过程中能够随时查看网页的实际效果，Dreamweaver提供了预览视图方式。
4.安装dreameaver的方法
安装及注册 5.关闭dreameaver 6.保存网页的方法
3、小结
课题
建立一个简单的站点
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；建立一个简单的站点；进行简单的网页编辑。
【学习步骤】
1、创建空白站点。
执行菜单命令“文件”—“新建”—“站点”，就会出现8中站点向导。出于简单，可
选择“空站点”按钮，并在“指定新站点的位置”框中填入站点的位置。在指定新站点的位置后，单击“确定”即建成一个空站点。
2、建立一个简单的文字网页
建立了一个站点之后，就应该在站点中加入网页了。① 创建空白网页
执行菜单命令“文件”—“新建”—“网页”，就会出现一对话框，选择“普通网页”
模板并单击“确定”即建立了一个新的空白页面。
② 网页工作区的三个视图方式选项 它们分别是“普通”、“HTML”“预览”，它们之间的相互切换十分容易实现的。
普通视图方式是Dreamweaver对网页所见即所得编辑方式的最佳体现，在此方式下，可以
像在Word中那样直接进行各种编辑操作，实现网页编辑的所有功能。
HTML视图实际上是一个文本编辑器，其中给出了普通视图方式下所件网页的HTML代码。在这里可以用菜单命令进行复制、粘贴、删除、查找等操作。对于HTML语言中的不同成分均用不同的颜色显示，这样比较容易区分各种语法成分。
为了在制作网页过程中能够随时查看网页的实际效果，Dreamweaver提供了预览视图方式。
③ 输入文本
网页中最基本的也是最重要的部分就是网页中由文本构成的内容，因此制作网页首先要 从文本输入开始。
3、设置网页中文字的字体、颜色、大小和效果
① 在文本开始处按下鼠标左键，不放手拖到结束处，选择要设置的文本块。
② 执行菜单命令“格式—字体”。
③ 在“字体”对话框中，单击“字体”选项卡。
④ 在字体选择窗口中，选定所需要的字体，再确定文本的字型、大小、颜色、效果等。
⑤ 按“确定”即可。
4、网页编辑
（1）将图片插入网页（2）将剪贴画插入网页（3）加入GIF动画
（4）保存嵌入式图形文件（5）使用图片工具栏（6）设置图片属性（7）设置网页背景（8）设置超链接（9）应用框架（10）表单的使用
5、小结
课题
设计限时自动关闭的网页
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver设计限时自动关闭的网页。【学习步骤】
设计页面时，经常会从一个页面打开一个子窗口以供浏览者查看。通常，这种子窗口中的内容一经浏览者看过，对于浏览者而言就不再需要，而他们常常会忘记关掉这些小窗口，致使许多的浏览器窗口打开着，耗用大量的资源。因此我们可以将子窗口设计成经过一段时间后可以自动关闭的形式。
1.在本地站点中生成一个Smlple文件夹。
2.在Smlple文件夹中，生成名为Index.html以及名为firstpage.html的文件。
3.双击Index.html，打开该文档，进入到文档的设计视图窗口中。
4.单击菜单View/Head Content，显示文档的头部区域。5.单击设计视图窗口中的文档头部窗格。选择菜单Insert/Invisible Tags/Script，打开Inset Script对话框。如图所示，在Language下拉列表框中选择javascript选项，并在Coctento文本框中输入“setTimeout(“self.close()”，15000)”。单击OK按钮，完成在文档头部插入15秒后自动关闭子窗口的脚本。在代码中，15000表示15000毫秒，也即15秒，也可以根据需要将之修改为自己需要的时间毫秒数。
设置时间
6.在文档窗口中输入“关闭”字样，在属性面板上的Link文本框中输入
“###”，将其设置为一个空链接。
5、小结
课题
设计限时自动关闭的网页
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver设计限时自动关闭的网页。【学习步骤】
7.在状态栏左端的快速标记编辑器上，单击标记按钮。选中“关闭”链接，然后按下Ctrl+T组合键，打开快速标记编辑器，进入到快速标记编辑器的编辑标记模式。然后在“>”前输入“onclick=“selfclose()””。如图所示，设置完毕，单击OK按钮，确认操作。这样在Index.html被作为子窗口打开后，单击
该链接就可以立刻关闭该子窗口。
8.保存Index.html文件，并退出index.html的Dremweaver窗口。9.现在开始设计fristpage.html页面。在本地站点的Smlple文件夹中，双击 fristpage.html，打开该文档，进入到文档的设计视图窗口中。10.在文档中输入“单击这里打开会自动关闭的子窗口”字样。然后在属性面板上的 Link文本框中输入“###”，将之设置为空链接。11.可以通过为该链接应用Open Browser Window行为来设置单击链接时打开Index.html窗口，不过更方便的方法是利用快速标识编辑器。方法是首先将插入点放置到链接中，然后在状态栏左端的标识选择器上，单击标识按钮，选中整个链接。然后按下Ctrl+T组合键，打开快速标记编辑器，进入到快速标记编辑器的 编辑标识模式。再在“>”前输入“onclick=“window.open('index.html',null','width=200px，height=200px')””（如图所示）。设置完毕，按下回车键，确认操作。
设置单击链接时打开
12.上述操作就完成了本例的设置。可以单击菜单用File/save，保存所做的工作。然后按下F12键，在浏览器中预览页面效果。
13、小结
课题 用Dreamweaver做会移动的文字
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver做会移动的文字。【学习步骤】
一、基本语法
文字移动属性的设置：方向 #=left, right 方式 #=scroll, slide, alternate
循环 #=次数；若未指定则循环不止(infinite)
速度
2、小结
课题 用Dreamweaver创建导航条
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver创建导航条。【学习步骤】
一个网站的不同页面使用了同一导航条。通过统一导航条的方法，我们可以实现网站风格的统一，同时也方便了浏览者在不同页面间的跳转。用Dreamweaver 3可作出各种比较复杂的导航条。网页上的导航条可由一个或几个部分组成，每个部分均由各种图像构成，可以链接到不同的网页页面。在Dreamweaver中每部分中最多可设四个状态下的图像。一开始是一个初始图像，当鼠标移动到导航条部位上时则显示另一个图像，还可以设置当鼠标点击后的初始图像，以及鼠标点击后当鼠标再次移动到这个部位上的图像。一般地，每部位只设一到两种状态的图像。因为图像太多了，会影响网页页面的访问、浏览的速度。
导航条制作方法：移动光标到需要导航条的地方，单击主菜单栏的“InsertNavigation Bar”子命令，或直接单击Objects面板上的图标，弹出“Insert Navigation Bar”对话框(图1)，此时我们可以进行各种设置来实现上述功能：
图1 在“Element Name”项后的文本框填入这个部位的命名，也可以不填，这时Dreamweaver 3将自动给它命名。在Dreamweaver中每部分中最多可设四个状态下的图像：“Up Image”项是该部位的初始图像，在其后文本框填入已准备好的图像的地址，或点击右边Browse按钮来选择。每个部位可只设置Up Image项，其下的“Over Image”、“Down Image”和“Over While Down Image”三项可以不设置。其中，“Over Image”项是鼠标移动到这个部位上时显示的图像(本例中选择)；“Down Image”项是鼠标点击该部位后显示的初始图像；“Over While Down Image”项是鼠标点击后当鼠标再次移动到这个部位上时显示的图像。注意：Element Name项和 Up Image项是必需的，所有的调用图像都会在系统的提示下保存在Dreamweaver 3文件夹中，以便调用。
2、小结
课题 用Dreamweaver创建导航条
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver创建导航条。【学习步骤】
当然，还可给该部位设置超级链接：在下面的“When Clicked Go To URL”项后文本框填入链接到的文件的地址，或单击Browse按钮选择，当鼠标移动到这个部位上时，在状态栏中可以看到链接到的地址。When Clicked Go To URL项后有一个下拉选框，这是设置超级链接的目标。
接着是“Options”项，若选中“Preload Images”选框，则浏览者浏览页面时，所有图像将在页面下载的同时全部下载，整个页面打开的速度会慢些，但图像间转换会没有延迟，选中它。反之，不选Preload Images选框，则页面下载的同时只下载初始图像，其它图像按顺序下载，整个页面打开的速度较快，但图像间转换会有延迟。若选中“Show “Down Image”Initially”选框，则将Down Image设为初始图像。此时，Over While Down Image项改为鼠标移动到这个部位上时显示的图像，Up Image项改为鼠标点击该部位后显示的初始图像，Over image项改为鼠标点击后当鼠标再次移动到这个部位上时显示的图像。
最下面是“ Insert”项，选框中有Horizontally(水平)和Vertically(垂直)两个选项。选中Horizontally为导航条水平展开，选中Vertically 为导航条垂直展开。Use Table 项，选中后，Dreamweaver自动生成HTML代码将导航条各部位用表格隔开。
当一个部位设置完成后，要添加其他部位，可点击对话框上方的“＋”按钮，可按上面的步骤进行新部位的设置。要删去某一个部位，在“Nav Bar Elements”选框中先选中，再点击对话框上方的“－”按钮即可。
2、小结
课题 用Dreamweaver创建导航条
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver创建导航条。【学习步骤】
另外，使用设置导航条图像中的高级功能，可改变文档中基于当前按钮下的其他的图像。在默认下,单击导航条中的元素时,所有导航条中元素都会自动地返回原来默认的状态。若想设置被选中图像的上浮或是下沉的不同效果时，可用导航条中的高级功能：在“Behaviors”面板中的“Actions”标签页，单击其上面的“＋”号按钮，在弹出的菜单中选择“Set Nav Bar Image”命令，弹出Set Nav Bar Image 对话框中(见图2)，选择“Advanced”标签页，对高级属性进行设置。其中，若选择“Over Image or over while Down Image”项，则当鼠标划过图片时显示其上面的图片，有上浮或是下沉的效果，并在“Also Set Image”文本框中选择要显示的图片，同时在其下面的“If Down To Image File”中选择当鼠标按下时要显示的图片路径；若选择“Down Image”项，则当浏览者单击所选图像后,显示另外的图片。
图2 存盘后，按F12键测试所作导航条。
2、小结
课题 用Dreamweaver创建状态栏
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver创建状态栏。
【学习步骤】
状态栏制作方法：
设置浏览器状态栏中的文本信息,这一功能可在浏览网页面时,在浏览器窗口底下状态栏中显示相关信息。其方法:选择“Behaviors”面板中的Actions标签页的“Set Text of Status Bar”命令,在弹出的Set Text of Status Bar对话框中如图3,在“Message”的文本框中输入所在状态栏中显示的文档,按“OK”按钮完成。再用按F12快捷键来测试,可看到其运行的效果。
当然可用JavaScript语言在Message文本框中加入些函数,让文本显示功态的效果。
2、小结
课题 用Dreamweaver的模板创建网页
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver的模板创建网页。【学习步骤】
1、创建模板页面
最简单的办法是将一个网页另存为模板文件，通过执行命令：File→Save as Template，DreamWeaver会在网站根目录中建立一个模板文件夹——Templates来保存该模板。
当然，也可以新建一个模板：Window→Templates，会出现的Templates面板，单击右下角的New Template按钮，输入文件名，就建立了一个空模板；再单击Open Template按钮打开该模板，保存后自动存放于网站模板文Templates
中。
新建、打开的模板页面和普通的网页没什么两样，同样可以加入表格、层、图片、动画、脚本，设置页面属性等。
举例：这里以制作一个模板为例来说明。在该页面中，我们希望左侧的网站标识图和底部的导航图出现在每个页面中。其中标识图由两幅图片叠加而成，导航图上的文字“最近更新”、“在线阅读”、“打包下载”等划分成几个热区分别链接到不同的文件，它们在每个页面中都不变。右上部的主页面区和左下角弹出式选单按钮下面的页面说明则各不相同。为了保持页面整洁，我们用表格来布
置这些元素。
准确地说它只是一个没有可编辑区域的“准模板”，下面再设定可编辑区
域。
2、设定可编辑区域
设定模板可编辑区域，一般来说有两种方法。
新建可编辑区域：选择命令：Modify→Template→New Editable Region。在某一空白区域中单击后执行该命令即可将该区域变为可编辑区域。标记某一区域为可编辑区域：选择命令：Modify→Template→Mark Selectin as Editable Region。如果某区域已经有一些文字，并且希望在以后新建的超文本文件中部分保留其内容，先选中该区域再执行标记命令即可。
取消可编辑状态：选择命令：Modify→Template→Unmark Editable Region。执行该命令后会弹出一个对话框，其中有当前已有的可编辑区域列表，选中要取
消的区域名称，确认即可。
举例：在大片空白区中随便单击一下，执行Modify→Template→New Editable Region命令，在弹出对话框中输入名称：Main；选中左下角本页说明下面的文字，执行Modify→Template→Mark Selectin as Editable Region命令，输入名称：exp。可以看到可编辑区显示为浅蓝色，保存即完成模板制作。
2、小结
课题 使用模板
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver的模板创建网页。【学习步骤】
1、根据模板新建页面
命令：File→New From Template。弹出对话框，从模板列表中选取模板，出现的新页面中除可编辑区外均有淡黄色背景，是不能进行修改的部分。空白的Main编辑区可直接进行插入表格、文字、图片等操作，Exp编辑区保留有原来的文字，修改或重新编辑均可。
2、对一个已经有内容的页面应用模板
命令：Modify→Template→Apply Template to Page。选择模板后还会弹出一个对话框，让您选择现有的孤立内容保存到哪个可编辑区域（Choose Editable Region for Orphaned Content）。要是不想保留则可以选择“（none）”。
举例：我们先新建一个普通页面，输入：“CIW电脑工作室”，执行Modify→Template→Apply Template to Page命令，选择模板test，现有内容保存区域选择Main，确认后可看到页面自动变成了模板页的形式，而“CIW电脑工作室”这一行字就出现在主编辑窗口中。
3、更新模板以全面更新站点
基于某一模板建立了一些页面后，对模板进行修改后保存时，就会自动弹出一个对话框，列出所有使用了该模板的页面，询问是否要更新。另外一种方法是执行Modify→Template→Update Pages命令。从Update Pages对话框中选择一个站点或站点的某一种模板（同一站点中可以使用多个模板），单击右侧的Start按钮，软件会自动搜索与模板相关联的网页并进行更新。
非常方便！举例：Test模板左侧图形中的“读书破万站”图片是用一个图层叠加在另一幅图片之上的，现在不想要它，同时还想将所有页面中的该图片均删除。就可以打开模板test.dwt，删除该图层，保存模板，单击右侧的“Update”按钮即
可。
注意：新建和使用模板前需定义站点。方法是，执行命令：Site→Define Sites；指定站点名称和本地根目录（Local Root）。模板使用的是相对路径，如果没有指定网站在本地的位置，软件就不能准确找到并保存模板文件；并且应用模板新建和更新页面时，页面中的超链接也不能随页面文件保存位置的不同而
相应变化。
2、小结
课题 用Dreamweaver 中插入背景音乐
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver 中插入背景音乐。【学习步骤】
一、直接插入法
1.打开一张需要插入背景音乐的网页，在菜单中找到这样的命令： Windows> 设计教室-> HTML 部分中的“HTML语言剖析”中的一段，介绍一下< EMBED >标记的参数：
2、小结
课题 用Dreamweaver 中插入背景音乐
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver 中插入背景音乐。【学习步骤】
< EMBED > 是用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU 等等，Netscape 及 新版的 IE 都支持。其参数设定较多。如下 :
< EMBED src=“your.mid” autostart=“true” loop=“true” hidden=“true” >
src=“your.mid” 设定 midi 档案及路径，可以是相对或绝对。
autostart=true 是否在音乐档下载完之后就自动播放。true 是，false 否(内定值)。
loop=“true” 是否自动反复播放。LOOP=2 表示重复两次，true 是，false 否。
HIDDEN=“true” 是否完全隐藏控制画面，true 为是，no 为否(内定)。
STARTTIME=“分:秒” 设定歌曲开始播放的时间。如 STARTTIME=“00:30” 表示从第30秒处开始播放。
VOLUME=“0-100” 设定音量的大小，数值是0到100之间。内定则为使用系统本身的设定。
WIDTH=“整数” 和 HIGH=“整数” 设定控制面板的高度和宽度。(若 HIDDEN=“no”)
ALIGN=“center” 设定控制面板和旁边文字的对齐方式，其值可以是 top、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottom
CONTROLS=“smallconsole” 设定控制面板的外观。预设值是 console。
console 一般正常面板
smallconsole 较小的面板
playbutton 只显示播放按钮
pausecutton 只显示暂停按钮
stopbutton 只显示停止按钮
volumelever 只显示音量调节按钮
2、小结
课题 用Dreamweaver 中插入背景音乐
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver 中插入背景音乐。【学习步骤】
二、代码法 < BGSOUND >：
< BGSOUND > 是用来插入背景音乐，但只适用于 IE，其参数设定不多。如下 < BGSOUND src=“your.mid” autostart=true loop=infinite > src=“your.mid” 设定 midi 档案及路径，可以是相对或绝对。autostart=true 是否在音乐档下载完之后就自动播放。true 是，false 否(内定值)。loop=infinite 是否自动反复播放。LOOP=2 表示重复两次，Infinite 表示重复多次。
此种方法就是直接把< BGSOUND >标记放于网页文件的< head >< /head >之间，设置好mid文件的路径就行。参数的设置如文中解说。
三、插件法
有些人始终没有舍弃 FrontPage 也许就因为在一些元素的插入中，Dreamweaver 没有提供功能，或者不方便。但我们知道，Dreamweaver 支持插件，声音插入插件为我们提供了方便。
插件下载：sound.mxp 下载后双击文件，就可以直接安装了，安装完成你可以在“对象”面板的“Common”栏看到一个喇叭图标。直接点击此按钮，就弹出如下图所示的插入窗
口：
Forever：设置无限循环播放
Never：不循环播放，即只播放一次
NO of times：设置播放的次数
点击“Browser”按钮选择好声音文件之后，按确定完成制作。
2、小结
课题 用Dreamweaver在主页中制作连续的背景音乐
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver在主页中制作连续的背景音乐。【学习步骤】
一、保持背景音乐的连续不断，效果很好，现介绍如下，供制作个人主页的朋友们参考： 首先使用标签 〈frameset〉〈frame...〉〈frame...〉〈frameset〉 将主页(index.html)屏幕分成上下两个帧，为了不破坏页面布局，将上帧的高度设为 0；然后，在主页上帧放置的超文本文件(back_music.htm)中设置网站的背景音乐，最好不要设置播放界面；最后，在主页的下帧放置网站主页的主要内容(main.htm)。这样一来，主页下帧的页面就成为主页实际的活动页面，上帧的页面在访问者的整个浏览过程中始终保持静止不动，设置的背景音乐也就不会中断了。主页文件 index.html: 〈html〉
〈head〉〈title〉连续不断的背景音乐〈/title〉〈/head〉 〈frameset frameborder=“0” rows=“0,*”〉
〈frame src=“back_music.htm” scrolling=“no” noresize frameborder=“0”〉 〈frame src=“main.htm” frameborder=“0”〉 〈noframes〉 〈body〉
〈p〉please browse the web pages with browser that supperts frames.〈/p〉 〈/body〉 〈/noframes〉 〈/frameset〉 〈/html〉
上帧文件 back_music.htm(背景音乐为当前目录下的liang_zhu.mid,只播放一次)： 〈html〉
〈head〉〈title〉〈/title〉〈/head〉 〈body〉
〈!-背景音乐:--〉
〈embed src=“./liang_zhu.mid” hidden=“true” autostart=“true” loop=“0”〉 〈/body〉 〈/html〉
2、小结
课题 DreamweaverMX制作导航下拉菜单
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；DreamweaverMX制作导航下拉菜单。【学习步骤】
Dreamweaver从出道以来，其简便易用而又功能强大的“行为”(Behavior)一直是大家所关注的热点之一。在Dreamweaver MX(DW MX)中，对这一功能又有了扩充与改进。
在DW MX中，行为指的是为了响应某一事件(Event)而采取的一个操作(Action)。其中Event 指的是浏览器的事件，比如窗口刷新、鼠标移动等。而 Action 指的是后台响应事件的 JavaScript 代码，可以完成相应的操作，比如播放声音、翻转图片等。
用DW MX制作导航下拉菜单是网页中经常使用的特效之一。(如图1)主要应用了DW MX中的“Show-Hide Layers”行为。
图1 首先制作好导航条(图1中的“产品中心”那一栏)，随后添加一个层，作为下拉菜单将要显示的位置，并填入下拉菜单的对应栏目。接下来，打开“Behaviors”面板，同时选中“产品中心”链接(注意，这个时候不能够选中刚刚建好的层，否则无法应用“Show-Hide Layers”行为)，单击“+”号，选择“Show-Hide Layers”，就可以看到我们刚刚建好的层在选择项中，可以设定为隐藏或者显示(如图2)。
图2 行为的妙用主要体现在：如果我们要实现下拉菜单，关键就是让鼠标移到“产品中心”链接上时，使层显示；而鼠标离开链接时，使层隐藏。根据这种思想，我们首先为这个层设立两个Action，一个选择Hide，一个选择Show。然后，调整Event，将Hide Layer的Event设为OnMouseOut，即为鼠标离开链接；而将Show Layer的Event设为OnMouseOver，即为鼠标选中链接。按“F12”预览，就可看到我们期盼的效果。
这样，平时我们觉得很神秘的导航下拉菜单就可以轻易在行为中实现。还可以在导航链接上继续应用 “Swap Image”行为，实现鼠标点选链接时出现图片
翻转效果。
行为不是一个个孤立的特效，可以由多个行为组合叠加实现复杂的功能，除了DW MX默认设置好的行为外，我们还可以从www.xiexiebang.com上下载更多更酷的第三方行为，我们只需将它们直接复制到DreamweaverMXConfigurationBehaviorsActions目录下即可，从而使DW MX的这一闪光点更加眩目。课题
用Dreamweaver做弹出窗口
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver做弹出窗口。【学习步骤】
1.打开一个页面，设置页面属性。左边界，顶部边界为 0，在标题处输入标题名称。
2.在页面中插入图片。也可以是文字，Flash 动画等。小窗口页面就准备好了。
给一个页面添加弹出小窗口：
1.打开需要添加弹出小窗口页面，例如一个网站的首页，在标签选择器中选择“ body ”标签。
2.打开行为面板，点击“ + ”按钮添加行为。
3.选择“打开浏览器窗口”。
4.在要显示的 URL 处，选择弹出小窗口页面文件。设置弹出小窗口属性。
5.按 F12，在浏览器中发布的效果如下图。
课题
Dreamweaver 页面制作
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；Dreamweaver 页面制作。【学习步骤】
一、下边的简单网页为例，叙述一下制作过程。简单网页如下图：
在开始制作之前，我们先对这个页面进行一下分析。看看这个页面用到了那些东西。
□网页顶端的标题“我的主页”是一段文字。
□网页中间是一幅图片。
□最下端的欢迎词是一段文字。
□网页背景是一深紫红颜色。
知道了这个网页的结构以后我们就来可以制作了。
首先启动Dreamweaver MX 2004，确保你已经用站点管理器建立好了一个网站（根目录）。
为了制作方便，请您事先打开资源管理器，把要使用的图片收集到网站目录images文件夹内。
【插入标题文字】
进入页面编辑设计视图状态。在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。如果要想让文字居中插入，点属性面板居中按钮即可。启动中文输入法输入“我的主页”四个字。字小不要紧，我们可以对它进行设置。
【设置文字的格式】 选中文字，在上图属性面板中将字体格式设置成默认字体，大小可任意更改字号。并选中“B”将字体变粗。
【设置文字的颜色】首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。
【设置网页的标题和背景颜色】
点击“修改”菜单选“页面属性”。系统弹出页面属性对话框（如下图）
请在标题输入框填入标题“我的主页”。
设置背景颜色： 网页背景可以是图片，也可以是颜色。此例是颜色。如上图打开背景颜色选择器进行选取。如果背景要设为图片，点击背景图象“浏览”按钮，系统弹出图片选择对话框，选中背景图片文件，点击确定按钮。设计视图状态，在标题“我的主页”右边空白处单击鼠标，回车换一行，按照以下的步骤插入一幅画图片，并使这张图片居中。您也可以通过属性面板中的左对齐按钮让其居左安放。
【插入图像】选择以下任意一种方法：
（1）使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击确定。如下图：
2）使用插入栏（如下图）：单击插入栏对象按钮>选源文件”对话框，其余操作同上。
按钮，弹出“选择图像
（3）使用面板组“资源”面板（如下图）：点
按钮，展开根目录的图片文件夹，选定该文件，用鼠标拖动至工作区合适位置。
注：为了管理方便，我们把图片放在“images”文件夹内。如果图片少，您也可以放在站点根目录下。注意文件名要用英文或用拼音文字命名而且使用小写，不能用中文，否则要出现一些麻烦。
一个图片就插入完毕了。（插入*.swf动画文件，选择“插入”菜单＞媒体＞Flash）。
【输入欢迎文字】
在图片右边空白处单击，回车换行。仍然按照上述方法，输入文字“欢迎您„„”然后，利用属性面板对文字进行设置。保存页面。
一个简单的页面就这样编辑完毕了。
【预览网页】在页面编辑器中按F12预览网页效果。网站中的第一页，也就是首页，我们通常在存盘时取名为index.htm。【小结】在今天的教程中我们制作了一个简单的网页。内容有四：
①图片插入和对齐设置；
②文字的格式、颜色和加粗等设置； ③背景颜色的设置； ④预览网页，查看实际效果。
不仅要掌握还要举一反三反复练习。
课题 用Dreamweaver 发布网站
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver 发布网站。【学习步骤】
在发布网站之前先使用Dreamweaver站点管理器对你的网站文件进行检查和整理，这一步很必要。可以找出断掉的链接、错误的代码和未使用的孤立文件等，以便进行纠正和处理。
步骤如下：在编辑视图点「站点」菜单＞选“检查站点范围的链接”，弹出“结果”对话框，如下图：
下图是检查器检查出本网站与外部网站的链接的全部信息，对于外部链接，检查器不能判断正确与否，请自行核对。
下图是检查器找出的孤立文件，这些文件您的网页没有使用，但是仍在你的网站文件夹里存放，上传后它会占据有效空间，应该把它清除。清除办法是：先选中文件，点Delete键，确定。这些文件就放在“回收站”。
如果不想删除这些文件，点保存报告按钮（上图所示），在弹出的对话框中您给报告文件一个保存路径和文件名即可。该报告文件为一个检查结果列表。你可以参照此表，进行处理。
纠正和整理之后，您的网站就可以发布了。
【发布站点操作】
如果您是第一次上传文件，您的远程 Web 服务器根文件夹是空文件夹时按以下操作进行。如果不是空文件夹，另行操作附后。
服务器根文件夹是空文件夹时，连接到远程站点，请执行以下操作：
在 Dreamweaver MX 2004中，选择“站点”>“管理站点”。管理站点对话框中“dwmx2004”是在本教程第5页设置的，如果想回忆一下，请查看“设置站点”。
选择一个站点（即本地根文件夹），然后单击“编辑”。
单击对话框顶部的“基本”选项卡。在前面“设置站点”时，已填写了“基本”选项卡中的前几个步骤，因此单击几次“下一步”，直到向导顶部高亮显示“共享文件”步骤。如下图：
在标有“您如何连接到远程服务器？”的弹出式菜单中，选择“FTP”。单击“下一步”，弹出如下对话框：
请输入以下选项：
输入服务器的主机名；（必须填入）
“您打算将您的文件储存在服务器上的什么文件夹中？”（可以留空）
在相应的文本框中输入您的用户名和密码。
“使用安全 FTP(SFTP)”选项。（可不勾选）
单击“测试连接”。
如果连接不成功，请检查设置或咨询系统管理员。
在输入相应的信息后，单击“下一步”。
不要为站点启用文件存回和取出。
单击“下一步”。
单击“完成”以完成远程站点的设置。
再次单击“完成”以退出“管理站点”对话框。
【上传文件】
在设置了本地文件夹和远程文件夹（空文件夹）之后，可以将文件从本地文件夹上传到 Web 服务器。
请执行以下操作：
在“文件”面板（“窗口”>“文件”）中，选择站点的本地根文件夹。
单击“文件”面板工具栏上的“上传文件”蓝色箭头图标。
Dreamweaver MX 2004会将所有文件复制到服务器默认的远程根文件夹。
多数空间提供商都设置有服务器默认的文件夹，请在此文件夹下创建一个空文件夹，方法是：在“文件”面板，将“本地视图”转换为“远程视图”。右键点击文件夹，选“新建文件夹”，输入一个名称，用作您的远程根文件夹，名称与您本地根文件夹的名称一致，便于操作。
为了操作更直观，您也可以最大化“文件”面板。请打开“文件”面板的最右边的“扩展/折叠”按钮，最大化文件面板，如下图，左边为远端站点内容，右边为本地文件内容：（注）这是将文件夹展开的示例，便于您观察，供参考。
点击，Dreamweaver MX 2004将所有文件复制到您定义的远程文件夹。
提示：第一次上传必须搞清楚网络空间服务商指定的服务器默认的存放网页的文件夹，在此文件夹下存放您的站点文件。访问您的网站地址为：http://......./index.htm 如果你在服务器默认的文件夹下上建立了与本地根文件夹同名的文件夹，那么访问您的网站，需要用这样的地址：http://........./（您的文件夹名）/index.htm 上传完毕，请在浏览器中输入浏览地址，测试您上传的结果。
