《用DreamWeaver打造留言板(全.docx》由会员分享，可在线阅读，更多相关《用DreamWeaver打造留言板(全.docx（77页珍藏版）》请在三一办公上搜索。
1、用DreamWeaver打造留言板第一课在这一课，我们首先讨论一下Dreamweaver MX的工作环境以及如何在我们的本地pws服务器建立站点和初步管理站点的文件。一、Dreamweaver MX的工作环境在 Windows 中首次启动 Dreamweaver MX时，会出现一个对话框，您可以从中选择一种工作区布局。如果您以后改变了主意，可以使用“参数选择”对话框切换到一种不同的工作区。如图1是选择工作区布局的对话框。图1 选择工作区布局对话框Dreamweaver MX工作区是一个使用 MDI（多文档界面）的集成工作区，其中全部“文档”窗口和面板被集成在一个更大的应用程序窗口中，并将面板组
2、停靠在右侧。Dreamweaver MX建议大多数用户使用它。本教程也使用的是这种工作区模式。HomeSite/代码编写者样式的Dreamweaver MX工作区是同样的集成工作区，但是将面板组停靠在左侧，“文档”窗口在默认情况下显示“代码”视图。Dreamweaver MX建议HomeSite或ColdFusion Studio用户以及其他需要使用熟悉的工作区布局的手工编码人员使用这种布局。若要选择这种布局，请选择“Dreamweaver MX 工作区”选项，然后选择“HomeSite/代码编写者样式”选项。Dreamweaver 4工作区是一种与 Dreamweaver 4中所用布局相类似
3、的工作区布局，其中每个文档都位于自己的独立浮动窗口中。面板组停靠在一起，但并不是停靠在一个更大的应用程序窗口中。仅建议喜欢使用更熟悉的工作区的 Dreamweaver 4 用户使用这种布局。教程副页：Dreamweaver MX工作环境简介页面二、建立第一个站点（无服务器端脚本的普通静态站点）下面我们建立一个没有服务器端脚本的普通静态站点，具体建立步骤如下：1、选择“站点/新建站点”。（即从“站点”菜单中选择“新建站点”命令。）即会出现“站点定义”对话框。 2、如果对话框显示的是“高级”选项卡，则单击“基本”。出现“站点定义向导”的第一个屏幕，要求您为站点输入一个名称。 3、在文本框中，输入一
4、个名称以在Dreamweaver中标识该站点。该名称可以是任何所需的名称。例如，您可以将站点命名为“mysit”。如图2所示。 图2 建站向导站点起名4、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您是否要使用服务器技术。选择“否”选项指示目前该站点是一个静态站点，没有动态页。如图3所示。图3 建站向导静态和动态网站选择5、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您要如何使用您的文件，如图4所示。选择标有“编辑我的计算机上的本地拷贝，完成后再上传到服务器（推荐）”的选项。文本框允许您在本地磁盘上指定一个文件夹，Dreamweaver 将在其中存储站点文件的本地版本。
5、若要指定一个准确的文件夹名称，通过浏览指定要比键入路径更加简便易行，因此请单击该文本框旁边的文件夹图标。随即会出现“选择站点的本地根文件夹”对话框，在对话框中浏览到本地磁盘上可以存放所有站点的文件夹。然后单击“确定”。图4 建站向导定义站点文件的存储位置6、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您如何连接到远程服务器。从弹出式菜单中选择“无”。如果你有远程的FTP服务器空间，在这一步骤可以按照如图5所示进行连接到远程服务器的设置。图5 建站向导连接到远程服务器的设置7、单击“下一步”进入下一个步骤。该向导的下一个屏幕将出现，其中显示您的设置概要。单击“完成”完成设置。完成站点
6、的建立之后，在文件面板中你会看到如图6所示的类似结果（本地视图）。 图6 文件面板中的本地视图三、用系统模板创建站点的第一个页面上面我们利用建站向导创建了一个站点，下面我们在这个站点中创建一个页面。先查看这个页面的效果：lesson1_mo.htm这个页面是用Dreamweaver MX的系统模板创建的，以下是创建步骤：1、执行“文件/新建”命令，弹出“新建文档对话框”。在此对话框中选择“常规/页面设计/文本：文章C”，然后单击“创建”按钮，如图7是示意图。图7 利用模板创建新文档示意图2、现在我们在页面编辑区得到一个新页面，并且页面中已包含了一些模板内容。这个页面很简单，包括一些文本和一个图
7、像。我们首先将那些英文文本换成一些中文文本（你可以将教程中示例页面中的文本复制过来）。3、对图像进行处理。我们在页面中看到的是一个图像占位符，下面我们要用一个具体的图像替换它。单击这个图像占位符，并展开相应的占位符属性面板，如图8所示。如果图像已经创建好，就在占位符属性面板中的源文件处进行设置。如果图像还没有创建，就单击占位符属性面板中的创建按钮，在FireworksMX中创建。图8 占位符属性面板4、在属性面板中设置文本的属性，由于我们的页面上的文本实际上都是在表格中，所以实际上是设置表格的单元格属性，如图9所示。图9 单元格属性面板5、关于图像和文本的距离的设置。我们以后在编辑网页时会经常
8、遇到图像和文本之间的距离问题，如图10所示。我们可以先选中图像，然后在图像属性面板中设置图像和文本之间的距离，如图11所示。 图10 图像和文本间的距离示意图图11 设置图像和文本距离6、保存文件。执行“文件/保存”命令，将文档保存到我们站点文件夹中。如果我们文件的存储路径是:c:Inetpubwwwrootmysite1lesson1_mo.htm，则可以在浏览器中用以下地址访问它：http:/localhost/mysite1/lesson1_mo.htm或者http:/127.0.0.1/mysite1/lesson1_mo.htm。 第二课经过上一课的学习，我们对Dreamweaver
9、 MX的工作环境以及如何创建一个站点和编辑页面文档有了一个初步的认识。从这次课开始我们要系统的来学习如何创建一个留言板站点。通过这个留言板站点的建立，我们要讨论在Dreamweaver MX中经常用到的一些工具和命令。一、创建留言板动态站点上一次课我们建立了一个静态的站点，这一课我们首先建立一个包含服务器端脚本（ASP）的动态站点。以下是创建步骤：1、执行“站点/新建站点”命令，得到建站向导，在第1步中，给你的站点起个名字。比如是：liuyanban。2、单击下一步，在下一个步骤画面中进行服务器脚本技术的有关设置，如图1所示。 图1 建站向导服务器脚本技术设置3、单击下一步，进入到建站向导的下
10、一个画面，这个步骤是关于站点的URL的内容，如图2所示。图2 建站向导站点URL4、以下步骤按照建站向导的默认设置。最后单击完成按钮即可。二、在站点中创建资源文件夹在创建了本地站点之后，如果您已为该站点创建了资源（图像、Flash动画或其他内容片断），则将这些资源放置在本地站点根文件夹内的一个文件夹中。那么当您要向页中添加内容时，这些资源将随时可用。 现在我们就在留言板站点根文件夹中创建新文件夹，并把相应的资源文件复制到资源文件夹中。1、假设我们的留言板站点的根文件夹路径为：c:Inetpubwwwrootliuyanban。2、打开站点面板，展示留言板站点的本地视图，右键单击留言板站点，在弹
11、出的快捷菜单中执行“新建文件夹”命令。如图3所示。按照这种方法，先创建两个文件夹：images（用来放图像文件）和swf（用来放Flash动画）。 图3 在站点视图创建新文件夹请下载以下资源，并把它们放在相应的文件夹中。在站点面板中可以象资源管理器一样管理文件和文件夹。留言板系统用户头像图像(10个图像文件)。放在images文件夹中。下载（rar文件）留言板系统导航条图像。放在images文件夹中。下载Flash动画文件(1个)。放在swf文件夹中。下载按照上面的步骤把站点中的资源文件部署好以后，在资源面板中就可以看到我们部署好的相应的资源，如图4所示。我们可以将资源面板中的资源直接拖放到站
12、点文档中使用。图4 资源面板三、创建留言板站点的第一个页面（文件名：shuoming.htm）下面我们创建留言板站点的第一个页面，这个页面是个普通的不包含服务器脚本的静态页面。它用来对我们的留言板系统进行说明。1、执行“文件/新建”命令，在弹出的新建文档对话框中选择“基本页/html”，然后单击“创建”按钮，如图5所示。图5 新建基本html文档2、编辑页面文档（页面效果参考）输入页面标题“留言板系统说明”。如图6所示。图6 定义页面标题输入页面文字内容并定义它们的字体、颜色等属性。具体的属性设置可以在属性面板中实现。关于连续空格的输入：执行“编辑/参数选择”命令，在弹出的参数选择对话框中选择
13、“允许多个连续空格”复选框，如图7所示。图7 参数选择允许多个连续空格对于中文用户来说，我们习惯于中文的段落格式，比如段前空两格。可以这样实现：将中文输入法切换到“全角”方式，然后连续按两次空格，完了以后再切换到“半角”方式进行文字内容的输入。关于段落：每按一次Enter（回车）键就代表一个新段落的开始。如果你想在段落中换行，请按“Shift+Enter”组合键。关于图像的插入，我们可以用以下两种方法中的任意一种：将光标定位到要插入图像的位置。用鼠标单击“插入栏”中“常用”标签下的图像按钮，如图8所示。然后找到要插入的图像文件。图8 插入图像和水平线打开资源面板，单击图像资源类别，选择要插入的
14、具体图像资源，用鼠标拖放到插入处。关于水平线的插入，如图8所示。我们还可以在属性面板设置它的简单属性，但不能直接在属性面板设置它的颜色。插入的水平线默认是灰色的，要更改它的颜色，我们需要这样操作：选中水平线，切换到代码视图。将光标定位在br标签后，单击空格键，这时会弹出一个下拉菜单，如同9所示，我们再在其中双击color属性标签，这样就会弹出调色板，在其中选择你需要的颜色就可以了。图9 在代码视图设置水平线颜色属性3、保存页面文档。执行“文件/保存”命令，把文档保存到站点的根目录下。文件名：shuoming.htm。只须输入主文件名 shuoming 就可以了，扩展名是系统自动加上的。第三课本
15、次课开始我们要设计留言板的主页面了。复杂的页面一般都要先用表格布局，我们就从留言板主页面的表格布局开始学习。除了表格布局，利用层布局页面也是一种选择。但层的兼容性和可控制性就比表格差多了，本次课也要讨论Dreamweaver MX中有关层布局，以及层和表格相互转换的知识。首先让我们先看看留言板站点主页面将来大概是个什么摸样。单击这里打开页面效果，具体设计步骤如下：1、创建主页面新文档（main.asp）这个主页面将来是个包含ASP脚本的动态页面。所以它的类型是动态脚本页面文档，文件扩展名是asp。你可以选择以下两种方法中的任意一种创建它：执行“文件/新建”命令，在弹出的新建文档对话框中做如图1
16、所示的操作。保存文档时，文件命名为main。 图1 新建ASP VBScript动态文档打开站点面板，在留言板站点本地视图下面的窗口中右键单击站点名，在弹出的快捷菜单中执行“新建文件”命令，然后将文件名的主文件名改为main。2、创建表格在Dreamweaver MX中创建表格有两种模式，一种是在标准视图下插入表格，一种是在布局视图下直接画表格。在标准视图下插入表格：“标准”视图是默认的 Dreamweaver MX设计视图。若要在“标准”视图中创建表格，可以使用“插入表格”命令。Dreamweaver将根据您在“插入表格”对话框中选择的选项创建一个表格，如图2所示。图2 插入表格和定义表格在
17、本例中我们插入两个表格：一个是1行1列，宽度是755像素。另一个是3行3列，宽度是600像素。在布局视图下绘制表格：在“布局”视图中，可以绘制布局单元格或布局表格以定义文档的设计区域。这给了我们更大的灵活性，想一想在页面上画表格的滋味吧！我们需要在插入栏中切换到布局标签下，并单击布局视图，如图3所示。单击绘制布局表格或单元格按钮以后就可以用鼠标直接绘制了。图3 布局视图3、编辑表格通过合并和拆分单元格以及插入行和列，可以很容易地修改初始表格结构以创建更复杂的设计。我们还可以使表格的边框变得不可见，然后用表格单元格（在表格中每一行与列的交叉处所创建的框）来控制 Web页中文本和图像的位置。当观众
18、在浏览器中查看页面时就不会看到设计的基础结构。这些都是对表格的编辑。通常情况下，表格编辑在标准视图下进行。关于表格和单元格的选中常有两种方法：用鼠标直接指向表格选中它们。用鼠标指向表格的边框或者是内部，根据鼠标的状态来判断选中整个表格、某一行还是某个单元格。在表格中的任意一个单元格单击鼠标，然后在标签检查器选择相应的标签，以实现选中表格或者单元格的目的，如图4所示。图4 通过标签检查器选择表格关于表格的尺寸基于百分比还是基于像素：基于百分比的表格会根据浏览器窗口宽度的变化而伸展或收缩。（例如，如果您指定表格使用 75% 的宽度，则不管浏览器窗口有多大，表格都会伸展以填充 75% 的水平间距。这
19、在某些情况下会很有用，例如，在调整窗口大小时确保导航菜单总能显示。基于像素的表格被设置为某个特定宽度，并且不会随着浏览器窗口大小的改变而改变。一般我们在用表格布局页面时，喜欢采用基于像素的表格，这样设计出来的页面更精确。本课实例就是用基于像素的表格布局页面的。关于调整布局单元格大小有两种方法：用鼠标直接移动到单元格的边框，拖动鼠标调整单元格的大小。在属性面板直接输入单元格的宽和高，来精确的控制调整单元格的大小。 表格和单元格的其它属性的设置都可以在属性面板中完成。4、使用层进行布局用层进行页面布局，给设计者更大的灵活性。因为可以这样说，你可以将层放在页面上你想让它占据的任何位置。如图5是创建层
20、和在层面板管理层的示意图。 图5 创建层和在层面板管理层虽然用层进行布局给设计者更大的灵活性，但用层布局缺乏更大的兼容性，在不同的浏览器中看到的结果可能是不一样的，甚至在一些浏览器中根本就不支持你的层。当然我们可以将层转换为表格（表格是最兼容的页面元素了），但是我还是建议不用层布局为好，比如重叠的层就不能转换为表格。我们可以这样进行层和表格之间的互相转换：执行“修改/转换/层到表格”或者“修改/转换/表格到层”就可以实现层和表格之间的互换了。用表格布局页面是设计网页的基础，表格的布局是很灵活的，大家要多练习，尝试不同的布局变化，这样才能找到和掌握更多的规律。 第四课经过前面三课的学习，我们已经
21、在留言板站点创建两个页面了，一个是说明页面（shuoming.htm），一个是主页面（main.asp）。下面我们首先挑毛病，挑一挑两个页面的创建过程和创建结果的毛病。1、在浏览器中打开这两个页面，然后执行浏览器中的“查看/文字大小/最大”命令。咣当！字大了，段落也乱了！怎么这个效果啊！2、在页面的编辑过程中，每次按Enter（回车）键是一个新段落的开始，但段落间的距离怎么那么大啊？也找不到控制距离的命令。：（3、仔细再看一看页面效果，怎么超级链接的文字下面都有一个下画线啊？这多不好看啊，能不能去掉呢？4、我想文字段落前空两个汉字的位置，每次都要按空格键设置，能不能在新段落前自动前空两格？5、
22、我想表格线更细一些，可在属性面板里面好象完成不了这个目的？我们还可以找到很多毛病和不如意的地方，怎么解决？哈哈，今天就让一个重量级选手出场吧，它叫CSS层叠式样式表。它可是设计网页的重要技术，有了它，我们刚才找到的那些问题就马上可以解决掉。一、关于CSS样式表层叠样式表（CSS）是一系列格式规则，它们控制网页内容的外观。使用CSS样式可以非常灵活并更好地控制确切的网页外观，从精确的布局定位到特定的字体和样式。 CSS样式使您可以控制许多仅使用HTML无法控制的属性。例如，可以指定自定义列表项目符号并指定不同的字体大小和单位（像素、点数等等）。通过使用CSS样式和以像素为单位设置字体大小，可以确
23、保以更一致的方式在多个浏览器中处理页面布局和外观。除了设置文本格式外，还可以控制网页中块级别元素的格式和定位。例如，可以设置边距、边框、其他文本周围的浮动文本等等。CSS样式表的主要优点是提供便利的更新功能；更新CSS样式时，使用该样式的所有文档的格式都自动更新为新样式。在Dreamweaver MX中主要通过“CSS样式面板”创建CSS样式、查看CSS样式的属性以及将CSS样式应用于文档中的元素。选择执行“窗口/CSS样式”命令可以打开“CSS样式面板”，如图1所示。CSS样式面板中有两种视图，一个是应用样式视图，另一个是编辑样式试图，如图1和图2所示。应用样式视图：在这个视图下可以选择应用
24、于文档元素的类（class）样式。“应用样式”视图只显示自定义（class）样式。该窗格中不显示重定义的HTML样式和选择器样式。编辑样式视图：在这个视图下可以查看与当前文档关联的样式定义。“编辑样式”视图显示自定义（class）CSS样式、重定义的HTML标签和CSS选择器样式的样式定义。图1 CSS样式面板图2 CSS样式面板编辑样式面板二、在网页文档内部定义和引用CSS样式在Dreamweaver MX中打开留言板站点的说明文件（shuoming.htm），我们在这个页面文档内部定义和引用CSS样式。重定义html标签body的属性样式1、打开CSS样式面板，选择编辑样式面板视图。2、单
25、击面板右下角的新建CSS样式按钮，会弹出一个新建样式对话框，如图3所示。请按照图3所示进行设置。图3 新建CSS样式对话框重定义body属性3、设置完成以后，单击确定按钮，进入body标签的属性设置对话框中，如图4所示。图4 body属性样式设置类型属性重新定义文本超级链接属性样式1、打开CSS样式面板，选择编辑样式面板视图。2、单击面板右下角的新建CSS样式按钮，会弹出一个新建样式对话框，如图5所示。请按照图5所示进行设置。图5 新建CSS样式重新定义超级链接属性3、设置完成以后，单击确定按钮，进入a:link的属性设置对话框中，如图6所示。只设置“修饰”和“颜色”，其它不设置。图6 a:l
26、ink的类型属性样式设置4、重复步骤2、步骤3，分别再重新定义a:visited和a:hover的属性样式。和前面重新定义a:link唯一的不同是文字颜色的设置，分别设置成灰色和红色，其他的设置都一样。a:link超级链接文字的正常外观属性。a:visited超级链接文字访问过以后的外观属性a:hover当鼠标经过超级链接文字时的外观属性经过前面对body和a标签的属性重新定义以后，定义的CSS样式会自动套用到页面的元素上。这是最终的页面效果：shuoming_css.htm三、定义和附加外部样式表上面我们是在文档内部重新定义了一些html标签的属性样式，定义的CSS样式只对本文档起作用，如果
27、换了一个新文档，又要重复上面的操作，这样也太麻烦了！实际上，对于一个站点，站点内的页面大多要求一致的外观和效果，如果我们针对一个站点定义一次CSS样式，然后把定义的结果套用到整个站点的页面文档，那么我们设计网站和管理网站的效率就大大提高了。Dreamweaver MX的外部样式表就是用来实现这个目的的。让我们开始外部样式表的应用吧，先在Dreamweaver MX中打开留言板站点的主页面文档（main.htm），我们要以这个文档为实例完成我们的学习。定义外部CSS样式表文件1、打开CSS样式面板，单击右下角的新建样式按钮 ，则弹出新建样式对话框，如图7所示。请按照图7进行设置。图7 新建CSS
28、样式外部样式文件2、完成图7的设置后，单击确定按钮，则弹出保存外部样式表对话框，如图8所示。请按照图8所示进行设置和操作。图8 保存外部样式表对话框3、完成图8的设置并单击保存按钮后，会弹出body的CSS样式定义对话框，如图4所示，请按照图4进行设置。在这个外部CSS样式表文件中继续定义CSS样式1、单击右下角的新建样式按钮 ，则弹出新建样式对话框，如图9所示。请按照图9进行设置。图9 新建CSS样式td的属性样式2、单击确定按钮以后，就弹出td的CSS样式定义对话框，它的设置和body的设置一样。也可参看图4。3、重复步骤1、步骤2，在这个外部CSS样式表中继续定义a:link 、a:vi
29、sited 、a:hover的属性样式。4、重定义p标签的“盒子”属性样式可以设置段落间距，如图10所示。图10 p标签的盒子属性样式图11 外部CSS样式表定义的外部CSS样式表最终结果如图11所示。附加外部样式表上面我们建立了一个外部CSS样式表文件（*.css），这个外部CSS样式文件自动附加到定义它的页面文档中了。但站点中的其它页面文档如果想使用这个外部CSS样式表中的样式，就必须先附加它。具体步骤如下：1、打开站点中的另一个页面文档。2、打开CSS样式面板，单击面板右下角的“附加外部样式表”按钮 ，马上会弹出一个“链接外部CSS样式表”对话框，如图12所示。图12 链接外部样式表3、
30、在图12所示的链接外部样式表中浏览找到要附加的CSS样式表文件以后，单击“确定”按钮就完成了将一个外部CSS样式表附加到页面文档的操作，我们在CSS样式表面板的编辑视图下就可以看到附加的样式表，如图11所示。利用CSS样式表模板创建外部CSS样式表除了在CSS样式面板中创建外部CSS样式表以外，我们还经常利用CSS样式表模板创建外部CSS样式表。步骤如下：1、执行“文件/新建”命令，会弹出一个新建页面文档对话框，如图13所示。图13 利用CSS模板创建外部CSS样式表2、按照图13所示操作以后，我们就选择了一个包含body、th、td、h1、h2、h3、h4、h5、h6、a等html标签的属性
31、样式的CSS样式表模板，如图14是代码视图下CSS样式表模板的部分内容。图14 代码视图下CSS样式表模板的内容3、我们可以直接在CSS样式表模板的代码视图下直接对它的内容进行编辑，也可以把它附加到某一个页面文档以后再在CSS样式面板的编辑视图下对它进行编辑。4、CSS样式表模板中的h1、h2、h6这些属性样式对应在属性面板中的格式操作如图15所示。当我们选择属性面板格式中的标题1、标题2、标题6时，实际上光标所在的文档段落就应用了这些属性样式了。图15 属性面板中段落格式设置四、教程副页特定CSS样式设置信息参考第五课对一个站点来说，导航系统是很重要的。如果你的站点导航系统设计得好，访问你的
32、网站的用户就会感到特别方便，反之，用户会感到无所适从。本次课程我们要讨论如何在页面插入Dreamweaver的导航条，并对页面中的导航条的创建方法进行总结。另外，还顺便讨论一下如何插入flash动画等页面元素的方法。一、规划和创建页面导航元素1、打开留言板站点主页面文档（main.asp）。将页面顶部的表格重新拆分调整为如图1所示的效果。图1 main.asp页面顶部表格2、根据图1所示的表格尺寸，在Fireworks MX和Flash MX中创建图像和动画。（在这里下载）你下载的是一个rar压缩包（image5.rar），其中包括以下内容：一个宽300像素、高120像素的图像文件（top00
33、1.gif），在Fireworks MX制作完成。一个宽455像素、高90像素的flash动画文件（top1.swf），在Flash MX制作完成。5组共10个宽91像素、高30像素的图像文件（daohang*_*），在Fireworks MX制作完成。3、将图像top001.gif插入到图1中所标示的单元格。4、将flash动画top1.swf插入到图1中所标示的单元格，具体步骤是：将光标定位到图1中所标示的单元格中。单击插入栏中的“插入flash”命令，弹出如图2所示的“选择文件“对话框。在其中浏览选择需要插入的flash动画文件。图2 选择要插入的flash动画文件选中插入的flash动
34、画，在属性面板可以对它进行设置和操作，如图3所示。图3 flash动画属性面板二、插入导航条1、将鼠标光标定位到图1中所标示的单元格，然后单击插入栏中的“插入导航条”命令，如图4所示。图4 插入导航条2、单击“插入导航条”命令以后，会弹出如图5所示的“插入导航条“对话框。图5 插入导航条对话框3、在如图5所示的插入导航条对话框中，我们要定义5个导航项目，将来得到的是5个水平排列的导航按钮。每个导航项目分别使用前面下载的在Fireworks MX制作完成5组图像文件。完成以后的留言板站点主页面效果：单击这里观看三、创建页面导航条方法总结1、自定义简单导航条布局表格，导航条中有几个项目，就创建几个
35、单元格。在单元格中输入文本或者插入图像。分别定义每个单元格中的文本或者图像的超级链接。2、创建Dreamweaver导航条（方法请参考前面）3、通过插入“代码面板/代码片段/导航”创建常见的导航条，如图5所示。代码片段中有很多常用的导航条代码模板，利用它我们可以很容易的创建一些常见的导航条。图6 代码片段：导航4、创建Fireworks MX导航条Fireworks MX中也提供了创建导航条的具体工具和方法，我们在Fireworks MX中设计导航条，然后再插入到Dreamweaver MX中进行编辑。如图7所示，单击插入栏中的插入Fireworks HTML命令可以实现Fireworks H
36、TML文档的插入。图7 插入Fireworks HTML文档5、创建Flash按钮导航条如图8所示，单击插入栏下媒体标签下的Flash按钮命令可以实现在页面文档插入Flash按钮的目的。将多个Flash按钮集合在一起也能实现导航条的功能。图8 插入Flash按钮 第六课经过前面5课的学习，我们对Dreamweaver MX创建和管理站点页面文档的前台技术有了一个概括的认识和应用了，实际上前5课所涉及到的应该是创建和管理站点的最基本的一些技术。掌握了这些技术，我们设计一般的静态站点应该是没有问题了。那么现在开始留言板站点的后台程序的创建？按道理是可以讨论这方面的问题了，但我还想再讨论一些站点页面
37、的其他元素和效果的创建方法。虽然这些技术可能和我们的留言板站点关系不是很大，但是因为它们也是一些常用的技术和方法，我们还是在这里系统的学习一下吧。一、利用时间轴和层实现页面中的滚动字幕效果。 小字报：今天留言板的最多的问题是这个教程共有几课？看到上面这个滚动字幕的效果了吧，它是通过在Dreamweaver时间轴面板中定义层的移动动画来实现的。什么？Dreamweaver也有时间轴？是的，而且你用它可以设计出不错的动画效果呢。而且用这样的技术设计出来的动画效果更符合web的特征。1、单击插入栏中常用标签下的层命令按钮 ，在页面中拖拽鼠标插入一个层。在层中输入需要的字幕文字。2、打开时间轴面板。执
38、行“窗口/其他/时间轴”命令打开时间轴面板。3、将页面文档中的层选中，并把它拖放到时间轴的时间线上。默认的情况是插入的动画长度为15帧，相应的层名（Layer1）显示在该动画栏中，并且在动画栏的两端自动加入了两个关键帧。4、在时间轴面板的动画栏上的关键帧按下鼠标左键并左右拖动，则可以改变关键帧的位置。向右拖动第15帧上的这个关键帧以延长关键帧到60帧，如图1所示。图1 时间轴面板5、在第30帧鼠标右键单击，在弹出的快捷菜单中选择“插入关键帧”命令，在第30帧插入一个关键帧。6、单击第30帧，然后将页面文档中的层水平向右移动合适的距离如图2所示。图2 层的运动轨迹7、在时间轴面板中选择：自动播放
39、和循环，并把行为标志拖放到第60帧的位置，如图1所示。这个左右来回滚动的字幕效果就完成了，简单吧？其实时间轴和层结合在一切定义动画还有很多技巧，以后慢慢研究吧。：）二、创建当页面载入时弹出窗口的效果先单击这里观看具体页面效果我们可以看到页面载入时弹出了一个信息提示对话框窗口，接着又弹出了一个自定义外观的浏览器窗口。这两个效果都是通过在行为面板中定义页面载入时的行为而实现的。我们定义页面载入时的行为实际上就是定义标签的行为。弹出信息提示对话框窗口1、在标签检查器中单击选中标签，这时整个页面文档就会变成灰色状态。2、打开行为面板，单击 按钮打开行为命令下拉菜单，选中其中的“弹出信息”行为命令，如图
40、3所示。图3 行为面板定义行为3、在出现的弹出信息对话框的信息文本框中输入想弹出的提示信息。打开浏览器窗口1、在标签检查器中单击选中标签，这时整个页面文档就会变成灰色状态。2、打开行为面板，单击 按钮打开行为命令下拉菜单，选中其中的“打开浏览器”行为命令，如图3所示。3、在打开浏览器窗口设置对话框中进行将要打开的浏览器窗口的外观的参数定义，如图4所示。图4 打开浏览器窗口的外观参数的定义行为面板是个很重要的面板，我们在创建页面效果时会经常用到它，它里面有很多常见的效果的定义。比如定义页面的状态条信息、检查页面提交表单的正确性等等。以后要多研究研究它哦三、禁止访问用户的右键单击现在你用鼠标右键在
41、这个页面上单击一下试试你的右键失效了吧，想把我的页面上的资源马上拿走？嘿嘿还是再费点工夫吧。1、将页面文档视图转换到“代码视图”模式，然后将光标定位在前面一行。这里就是我们将要插入JavaScript脚本代码的地方。2、执行“插入/脚本对象/脚本”命令，会弹出一个插入脚本对话框，如图5所示。图5 插入脚本对话框3、按照图5进行设置，然后确定以后，看看我们的页面文档中出现了什么：这是一对标签，它定义了在页面中将要插入的脚本所使用的语言。我们通过步骤2得到的这样一个结果，当然也可以手工输入这些代码来实现。4、将光标定位在与之间。5、打开代码片段面板，选择展开其中的“JavaScript/浏览器函数”，然后鼠标双击“禁用右键单击”，如图6所示。图6 插入代码片段完成以上操作以后，你会发现在与之间插入了一段脚本代码。这样就基本OK了，当然我们还可以改一下警告信息。改这里：var message = 嘿嘿，右键不能拿我的东西！;四、自动搭上著名的搜索引擎，提高自己网站的访问率自动提高自己网站的访问率？这么好的事情谁不想知道！其实很简单，方法就是让著名的搜索引擎帮助我们。许多搜索引擎装置（自动浏览网页为搜索引擎收集信息以编入索引的程序）读取关键字meta标签的内容和说明meta标签的内容，并使用该信息在它们的数据库中将您的页面编入索引。在Dreamweaver MX中如何实现这个技术呢？
