用DreamWeaver打造留言板全

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或者 HYPERLINK /mysite1/lesson1_mo.htm /mysite1/lesson1_mo.htm。 第二课经过上

9、一课的学学习，我们对对Dreammweaveer MX的的工作环境以以及如何创建建一个站点和和编辑页面文文档有了一个个初步的认识识。从这次课课开始我们要要系统的来学学习如何创建建一个留言板板站点。通过过这个留言板板站点的建立立，我们要讨讨论在Dreeamweaaver MMX中经常用用到的一些工工具和命令。一、创建留言板动态站点上一次课我们建立了一个静态的站点，这一课我们首先建立一个包含服务器端脚本（ASP）的动态站点。以下是创建步骤：1、执行“站点/新建站点”命令，得到建站向导，在第1步中，给你的站点起个名字。比如是：liuyanban。2、单击下一步，在下一个步骤画面中进行服务器脚本技术的

10、有关设置，如图1所示。 图1 建站向导服务器脚本技术设置3、单击下一步，进入到建站向导的下一个画面，这个步骤是关于站点的URL的内容，如图2所示。图2 建站向导站点URL4、以下步骤按照建站向导的默认设置。最后单击完成按钮即可。二、在站点中创建资源文件夹在创建了本地站点之后，如果您已为该站点创建了资源（图像、Flash动画或其他内容片断），则将这些资源放置在本地站点根文件夹内的一个文件夹中。那么当您要向页中添加内容时，这些资源将随时可用。 现在我们就在留言板站点根文件夹中创建新文件夹，并把相应的资源文件复制到资源文件夹中。1、假设我们的留言板站点的根文件夹路径为：c:Inetpubwwwroo

11、tliuyanban。2、打开站点面板，展示留言板站点的本地视图，右键单击留言板站点，在弹出的快捷菜单中执行“新建文件夹”命令。如图3所示。按照这种方法，先创建两个文件夹：images（用来放图像文件）和swf（用来放Flash动画）。 图3 在站点视图创建新文件夹请下载以下资源，并把它们放在相应的文件夹中。在站点面板中可以象资源管理器一样管理文件和文件夹。留言板系统用户头像图像(10个图像文件)。放在images文件夹中。下载（rar文件）留言板系统导航条图像。放在images文件夹中。下载Flash动画文件(1个)。放在swf文件夹中。下载按照上面的步骤把站点中的资源文件部署好以后，在资源

12、面板中就可以看到我们部署好的相应的资源，如图4所示。我们可以将资源面板中的资源直接拖放到站点文档中使用。图4 资源面板三、创建留言板站点的第一个页面（文件名：shuoming.htm）下面我们创建留言板站点的第一个页面，这个页面是个普通的不包含服务器脚本的静态页面。它用来对我们的留言板系统进行说明。1、执行“文件/新建”命令，在弹出的新建文档对话框中选择“基本页/html”，然后单击“创建”按钮，如图5所示。图5 新建基本html文档2、编辑页面文档（页面效果参考）输入页面标题“留言板系统说明”。如图6所示。图6 定义页面标题输入页面文字内容并定义它们的字体、颜色等属性。具体的属性设置可以在属

13、性面板中实现。关于连续空格的输入：执行“编辑/参数选择”命令，在弹出的参数选择对话框中选择“允许多个连续空格”复选框，如图7所示。图7 参数选择允许多个连续空格对于中文用户来说，我们习惯于中文的段落格式，比如段前空两格。可以这样实现：将中文输入法切换到“全角”方式，然后连续按两次空格，完了以后再切换到“半角”方式进行文字内容的输入。关于段落：每按一次Enter（回车）键就代表一个新段落的开始。如果你想在段落中换行，请按“Shift+Enter”组合键。关于图像的插入，我们可以用以下两种方法中的任意一种：将光标定位到要插入图像的位置。用鼠标单击“插入栏”中“常用”标签下的图像按钮，如图8所示。然

14、后找到要插入的图像文件。图8 插入图像和水平线打开资源面板，单击图像资源类别，选择要插入的具体图像资源，用鼠标拖放到插入处。关于水平线的插入，如图8所示。我们还可以在属性面板设置它的简单属性，但不能直接在属性面板设置它的颜色。插入的水平线默认是灰色的，要更改它的颜色，我们需要这样操作：选中水平线，切换到代码视图。将光标定位在br标签后，单击空格键，这时会弹出一个下拉菜单，如同9所示，我们再在其中双击color属性标签，这样就会弹出调色板，在其中选择你需要的颜色就可以了。图9 在代码视图设置水平线颜色属性3、保存页面文档。执行“文件/保存”命令，把文档保存到站点的根目录下。文件名：shuomin

15、g.htm。只须输入主文件名 shuoming 就可以了，扩展名是系统自动加上的。第三课本次课开始我们们要设计留言言板的主页面面了。复杂的的页面一般都都要先用表格格布局，我们们就从留言板板主页面的表表格布局开始始学习。除了了表格布局，利利用层布局页页面也是一种种选择。但层层的兼容性和和可控制性就就比表格差多多了，本次课课也要讨论DDreamwweaverr MX中有有关层布局，以以及层和表格格相互转换的的知识。首先让我们们先看看留言言板站点主页页面将来大概概是个什么摸摸样。单击这这里打开页面面效果，具体体设计步骤如如下：1、创创建主页面新新文档（maain.assp）这个主主页面将来是是个包含

16、ASSP脚本的动动态页面。所所以它的类型型是动态脚本本页面文档，文文件扩展名是是asp。你你可以选择以以下两种方法法中的任意一一种创建它：执行行“文件/新新建”命令，在在弹出的新建建文档对话框框中做如图11所示的操作作。保存文档档时，文件命命名为maiin。 图11 新建ASSP VBSScriptt动态文档打开站站点面板，在在留言板站点点本地视图下下面的窗口中中右键单击站站点名，在弹弹出的快捷菜菜单中执行“新新建文件”命命令，然后将将文件名的主主文件名改为为main。2、创建表格在Dreamweaver MX中创建表格有两种模式，一种是在标准视图下插入表格，一种是在布局视图下直接画表格。在标

17、准视图下插入表格：“标准”视图是默认的 Dreamweaver MX设计视图。若要在“标准”视图中创建表格，可以使用“插入表格”命令。Dreamweaver将根据您在“插入表格”对话框中选择的选项创建一个表格，如图2所示。图2 插入表格和定义表格在本例中我们插入两个表格：一个是1行1列，宽度是755像素。另一个是3行3列，宽度是600像素。在布局视图下绘制表格：在“布局”视图中，可以绘制布局单元格或布局表格以定义文档的设计区域。这给了我们更大的灵活性，想一想在页面上画表格的滋味吧！我们需要在插入栏中切换到布局标签下，并单击布局视图，如图3所示。单击绘制布局表格或单元格按钮以后就可以用鼠标直接绘

18、制了。图3 布局视图3、编辑表格通过合并和拆分单元格以及插入行和列，可以很容易地修改初始表格结构以创建更复杂的设计。我们还可以使表格的边框变得不可见，然后用表格单元格（在表格中每一行与列的交叉处所创建的框）来控制 Web页中文本和图像的位置。当观众在浏览器中查看页面时就不会看到设计的基础结构。这些都是对表格的编辑。通常情况下，表格编辑在标准视图下进行。关于表格和单元格的选中常有两种方法：用鼠标直接指向表格选中它们。用鼠标指向表格的边框或者是内部，根据鼠标的状态来判断选中整个表格、某一行还是某个单元格。在表格中的任意一个单元格单击鼠标，然后在标签检查器选择相应的标签，以实现选中表格或者单元格的目

19、的，如图4所示。图4 通过标签检查器选择表格关于表格的尺寸基于百分比还是基于像素：基于百分比的表格会根据浏览器窗口宽度的变化而伸展或收缩。（例如，如果您指定表格使用 75% 的宽度，则不管浏览器窗口有多大，表格都会伸展以填充 75% 的水平间距。这在某些情况下会很有用，例如，在调整窗口大小时确保导航菜单总能显示。基于像素的表格被设置为某个特定宽度，并且不会随着浏览器窗口大小的改变而改变。一般我们在用表格布局页面时，喜欢采用基于像素的表格，这样设计出来的页面更精确。本课实例就是用基于像素的表格布局页面的。关于调整布局单元格大小有两种方法：用鼠标直接移动到单元格的边框，拖动鼠标调整单元格的大小。在

20、属性面板直接输入单元格的宽和高，来精确的控制调整单元格的大小。 表格和单元格的其它属性的设置都可以在属性面板中完成。4、使用层进行布局用层进行页面布局，给设计者更大的灵活性。因为可以这样说，你可以将层放在页面上你想让它占据的任何位置。如图5是创建层和在层面板管理层的示意图。 图5 创建层和在层面板管理层虽然用层进行布局给设计者更大的灵活性，但用层布局缺乏更大的兼容性，在不同的浏览器中看到的结果可能是不一样的，甚至在一些浏览器中根本就不支持你的层。当然我们可以将层转换为表格（表格是最兼容的页面元素了），但是我还是建议不用层布局为好，比如重叠的层就不能转换为表格。我们可以这样进行层和表格之间的互相

21、转换：执行“修改/转换/层到表格”或者“修改/转换/表格到层”就可以实现层和表格之间的互换了。用表格布局页面是设计网页的基础，表格的布局是很灵活的，大家要多练习，尝试不同的布局变化，这样才能找到和掌握更多的规律。 第四课经过前面三课的的学习，我们们已经在留言言板站点创建建两个页面了了，一个是说说明页面（sshuomiing.httm），一个个是主页面（mmain.aasp）。下下面我们首先先挑毛病，挑挑一挑两个页页面的创建过过程和创建结结果的毛病。1、在浏览器中打开这两个页面，然后执行浏览器中的“查看/文字大小/最大”命令。咣当！字大了，段落也乱了！怎么这个效果啊！2、在页面的编辑过程中，每次

22、按Enter（回车）键是一个新段落的开始，但段落间的距离怎么那么大啊？也找不到控制距离的命令。：（3、仔细再看一看页面效果，怎么超级链接的文字下面都有一个下画线啊？这多不好看啊，能不能去掉呢？4、我想文字段落前空两个汉字的位置，每次都要按空格键设置，能不能在新段落前自动前空两格？5、我想表格线更细一些，可在属性面板里面好象完成不了这个目的？我们还可以找到很多毛病和不如意的地方，怎么解决？哈哈，今天就让一个重量级选手出场吧，它叫CSS层叠式样式表。它可是设计网页的重要技术，有了它，我们刚才找到的那些问题就马上可以解决掉。一、关于CSS样式表层叠样式表（CSS）是一系列格式规则，它们控制网页内容的

23、外观。使用CSS样式可以非常灵活并更好地控制确切的网页外观，从精确的布局定位到特定的字体和样式。 CSS样式使您可以控制许多仅使用HTML无法控制的属性。例如，可以指定自定义列表项目符号并指定不同的字体大小和单位（像素、点数等等）。通过使用CSS样式和以像素为单位设置字体大小，可以确保以更一致的方式在多个浏览器中处理页面布局和外观。除了设置文本格式外，还可以控制网页中块级别元素的格式和定位。例如，可以设置边距、边框、其他文本周围的浮动文本等等。CSS样式表的主要优点是提供便利的更新功能；更新CSS样式时，使用该样式的所有文档的格式都自动更新为新样式。在Dreamweaver MX中主要通过“C

24、SS样式面板”创建CSS样式、查看CSS样式的属性以及将CSS样式应用于文档中的元素。选择执行“窗口/CSS样式”命令可以打开“CSS样式面板”，如图1所示。CSS样式面板中有两种视图，一个是应用样式视图，另一个是编辑样式试图，如图1和图2所示。应用样式视图：在这个视图下可以选择应用于文档元素的类（class）样式。“应用样式”视图只显示自定义（class）样式。该窗格中不显示重定义的HTML样式和选择器样式。编辑样式视图：在这个视图下可以查看与当前文档关联的样式定义。“编辑样式”视图显示自定义（class）CSS样式、重定义的HTML标签和CSS选择器样式的样式定义。图1 CSS样式面板图2

25、 CSS样式面板编辑样式面板二、在网页文档内部定义和引用CSS样式在Dreamweaver MX中打开留言板站点的说明文件（shuoming.htm），我们在这个页面文档内部定义和引用CSS样式。重定义html标签body的属性样式1、打开CSS样式面板，选择编辑样式面板视图。2、单击面板右下角的新建CSS样式按钮，会弹出一个新建样式对话框，如图3所示。请按照图3所示进行设置。图3 新建CSS样式对话框重定义body属性3、设置完成以后，单击确定按钮，进入body标签的属性设置对话框中，如图4所示。图4 body属性样式设置类型属性重新定义文本超级链接属性样式1、打开CSS样式面板，选择编辑样

26、式面板视图。2、单击面板右下角的新建CSS样式按钮，会弹出一个新建样式对话框，如图5所示。请按照图5所示进行设置。图5 新建CSS样式重新定义超级链接属性3、设置完成以后，单击确定按钮，进入a:link的属性设置对话框中，如图6所示。只设置“修饰”和“颜色”，其它不设置。图6 a:link的类型属性样式设置4、重复步骤2、步骤3，分别再重新定义a:visited和a:hover的属性样式。和前面重新定义a:link唯一的不同是文字颜色的设置，分别设置成灰色和红色，其他的设置都一样。a:link超级链接文字的正常外观属性。a:visited超级链接文字访问过以后的外观属性a:hover当鼠标经过

27、超级链接文字时的外观属性经过前面对body和a标签的属性重新定义以后，定义的CSS样式会自动套用到页面的元素上。这是最终的页面效果：shuoming_css.htm三、定义和附加外部样式表上面我们是在文档内部重新定义了一些html标签的属性样式，定义的CSS样式只对本文档起作用，如果换了一个新文档，又要重复上面的操作，这样也太麻烦了！实际上，对于一个站点，站点内的页面大多要求一致的外观和效果，如果我们针对一个站点定义一次CSS样式，然后把定义的结果套用到整个站点的页面文档，那么我们设计网站和管理网站的效率就大大提高了。Dreamweaver MX的外部样式表就是用来实现这个目的的。让我们开始外

28、部样式表的应用吧，先在Dreamweaver MX中打开留言板站点的主页面文档（main.htm），我们要以这个文档为实例完成我们的学习。定义外部CSS样式表文件1、打开CSS样式面板，单击右下角的新建样式按钮 ，则弹出新建样式对话框，如图7所示。请按照图7进行设置。图7 新建CSS样式外部样式文件2、完成图7的设置后，单击确定按钮，则弹出保存外部样式表对话框，如图8所示。请按照图8所示进行设置和操作。图8 保存外部样式表对话框3、完成图8的设置并单击保存按钮后，会弹出body的CSS样式定义对话框，如图4所示，请按照图4进行设置。在这个外部CSS样式表文件中继续定义CSS样式1、单击右下角的

29、新建样式按钮 ，则弹出新建样式对话框，如图9所示。请按照图9进行设置。图9 新建CSS样式td的属性样式2、单击确定按钮以后，就弹出td的CSS样式定义对话框，它的设置和body的设置一样。也可参看图4。3、重复步骤1、步骤2，在这个外部CSS样式表中继续定义a:link 、a:visited 、a:hover的属性样式。4、重定义p标签的“盒子”属性样式可以设置段落间距，如图10所示。图10 p标签的盒子属性样式图11 外部CSS样式表定义的外部CSS样式表最终结果如图11所示。附加外部样式表上面我们建立了一个外部CSS样式表文件（*.css），这个外部CSS样式文件自动附加到定义它的页面文

30、档中了。但站点中的其它页面文档如果想使用这个外部CSS样式表中的样式，就必须先附加它。具体步骤如下：1、打开站点中的另一个页面文档。2、打开CSS样式面板，单击面板右下角的“附加外部样式表”按钮 ，马上会弹出一个“链接外部CSS样式表”对话框，如图12所示。图12 链接外部样式表3、在图12所示的链接外部样式表中浏览找到要附加的CSS样式表文件以后，单击“确定”按钮就完成了将一个外部CSS样式表附加到页面文档的操作，我们在CSS样式表面板的编辑视图下就可以看到附加的样式表，如图11所示。利用CSS样式表模板创建外部CSS样式表除了在CSS样式面板中创建外部CSS样式表以外，我们还经常利用CSS

31、样式表模板创建外部CSS样式表。步骤如下：1、执行“文件/新建”命令，会弹出一个新建页面文档对话框，如图13所示。图13 利用CSS模板创建外部CSS样式表2、按照图13所示操作以后，我们就选择了一个包含body、th、td、h1、h2、h3、h4、h5、h6、a等html标签的属性样式的CSS样式表模板，如图14是代码视图下CSS样式表模板的部分内容。图14 代码视图下CSS样式表模板的内容3、我们可以直接在CSS样式表模板的代码视图下直接对它的内容进行编辑，也可以把它附加到某一个页面文档以后再在CSS样式面板的编辑视图下对它进行编辑。4、CSS样式表模板中的h1、h2、h6这些属性样式对应

32、在属性面板中的格式操作如图15所示。当我们选择属性面板格式中的标题1、标题2、标题6时，实际上光标所在的文档段落就应用了这些属性样式了。图15 属性面板中段落格式设置四、教程副页特定CSS样式设置信息参考第五课对一个站点来说说，导航系统统是很重要的的。如果你的的站点导航系系统设计得好好，访问你的的网站的用户户就会感到特特别方便，反反之，用户会会感到无所适适从。本次课课程我们要讨讨论如何在页页面插入Drreamweeaver的的导航条，并并对页面中的的导航条的创创建方法进行行总结。另外外，还顺便讨讨论一下如何何插入flaash动画等等页面元素的的方法。一、规规划和创建页页面导航元素素1、打打开留

33、言板站站点主页面文文档（maiin.aspp）。将页面面顶部的表格格重新拆分调调整为如图11所示的效果果。图11 mainn.asp页页面顶部表格格2、根根据图1所示示的表格尺寸寸，在Firreworkks MX和和Flashh MX中创创建图像和动动画。（在这这里下载）你下载载的是一个rrar压缩包包（imagge5.raar），其中中包括以下内内容：一一个宽3000像素、高1120像素的的图像文件（ttop0011.gif），在在Firewworks MX制作完完成。一一个宽4555像素、高990像素的fflash动动画文件（ttop1.sswf），在在Flashh MX制作作完成。5组组

34、共10个宽宽91像素、高高30像素的的图像文件（ddaohanng*_*），在在Firewworks MX制作完完成。3、将将图像topp001.ggif插入到到图1中所所标示的单元元格。4、将将flashh动画topp1.swff插入到图11中所标示示的单元格，具具体步骤是：将将光标定位到到图1中所所标示的单元元格中。单击击插入栏中的的“插入fllash”命命令，弹出如如图2所示的的“选择文件件“对话框。在在其中浏览选选择需要插入入的flassh动画文件件。图22 选择要插插入的flaash动画文文件选中中插入的fllash动画画，在属性面面板可以对它它进行设置和和操作，如图图3所示。图33

35、 flassh动画属性性面板二、插插入导航条1、将将鼠标光标定定位到图1中中所标示的的单元格，然然后单击插入入栏中的“插插入导航条”命命令，如图44所示。图4 插入导航条条2、单单击“插入导导航条”命令令以后，会弹弹出如图5所所示的“插入入导航条“对对话框。图55 插入导航航条对话框3、在在如图5所示示的插入导航航条对话框中中，我们要定定义5个导航航项目，将来来得到的是55个水平排列列的导航按钮钮。每个导航航项目分别使使用前面下载载的在Firreworkks MX制制作完成5组组图像文件。完成以后的留言板站点主页面效果：单击这里观看三、创建页面导航条方法总结1、自定义简单导航条布局表格，导航条

36、中有几个项目，就创建几个单元格。在单元格中输入文本或者插入图像。分别定义每个单元格中的文本或者图像的超级链接。2、创建Dreamweaver导航条（方法请参考前面）3、通过插入“代码面板/代码片段/导航”创建常见的导航条，如图5所示。代码片段中有很多常用的导航条代码模板，利用它我们可以很容易的创建一些常见的导航条。图6 代码片段：导航4、创建Fireworks MX导航条Fireworks MX中也提供了创建导航条的具体工具和方法，我们在Fireworks MX中设计导航条，然后再插入到Dreamweaver MX中进行编辑。如图7所示，单击插入栏中的插入Fireworks HTML命令可以实

37、现Fireworks HTML文档的插入。图7 插入Fireworks HTML文档5、创建Flash按钮导航条如图8所示，单击插入栏下媒体标签下的Flash按钮命令可以实现在页面文档插入Flash按钮的目的。将多个Flash按钮集合在一起也能实现导航条的功能。图8 插入Flash按钮 第六课经过前面5课课的学习，我我们对Dreeamweaaver MMX创建和管管理站点页面面文档的前台台技术有了一一个概括的认认识和应用了了，实际上前前5课所涉及及到的应该是是创建和管理理站点的最基基本的一些技技术。掌握了了这些技术，我我们设计一般般的静态站点点应该是没有有问题了。那那么现在开始始留言板站点点的

38、后台程序序的创建？按按道理是可以以讨论这方面面的问题了，但但我还想再讨讨论一些站点点页面的其他他元素和效果果的创建方法法。虽然这些些技术可能和和我们的留言言板站点关系系不是很大，但但是因为它们们也是一些常常用的技术和和方法，我们们还是在这里里系统的学习习一下吧。一、利利用时间轴和和层实现页面面中的滚动字字幕效果。 小字报：今天留留言板的最多多的问题是这这个教程共有有几课？看到上面这这个滚动字幕幕的效果了吧吧，它是通过过在Dreaamweavver时间轴轴面板中定义义层的移动动动画来实现的的。什么？DDreamwweaverr也有时间轴轴？是的，而而且你用它可可以设计出不不错的动画效效果呢。而且

39、且用这样的技技术设计出来来的动画效果果更符合weeb的特征。1、单击插入栏中常用标签下的层命令按钮 ，在页面中拖拽鼠标插入一个层。在层中输入需要的字幕文字。2、打开时间轴面板。执行“窗口/其他/时间轴”命令打开时间轴面板。3、将页面文档中的层选中，并把它拖放到时间轴的时间线上。默认的情况是插入的动画长度为15帧，相应的层名（Layer1）显示在该动画栏中，并且在动画栏的两端自动加入了两个关键帧。4、在时间轴面板的动画栏上的关键帧按下鼠标左键并左右拖动，则可以改变关键帧的位置。向右拖动第15帧上的这个关键帧以延长关键帧到60帧，如图1所示。图1 时间轴面板5、在第30帧鼠标右键单击，在弹出的快捷

40、菜单中选择“插入关键帧”命令，在第30帧插入一个关键帧。6、单击第30帧，然后将页面文档中的层水平向右移动合适的距离如图2所示。图2 层的运动轨迹7、在时间轴面板中选择：自动播放和循环，并把行为标志拖放到第60帧的位置，如图1所示。这个左右来回滚动的字幕效果就完成了，简单吧？其实时间轴和层结合在一切定义动画还有很多技巧，以后慢慢研究吧。：）二、创建当页面载入时弹出窗口的效果先单击这里观看具体页面效果我们可以看到页面载入时弹出了一个信息提示对话框窗口，接着又弹出了一个自定义外观的浏览器窗口。这两个效果都是通过在行为面板中定义页面载入时的行为而实现的。我们定义页面载入时的行为实际上就是定义标签的行

41、为。弹出信息提示对话框窗口1、在标签检查器中单击选中标签，这时整个页面文档就会变成灰色状态。2、打开行为面板，单击 按钮打开行为命令下拉菜单，选中其中的“弹出信息”行为命令，如图3所示。图3 行为面板定义行为3、在出现的弹出信息对话框的信息文本框中输入想弹出的提示信息。打开浏览器窗口1、在标签检查器中单击选中标签，这时整个页面文档就会变成灰色状态。2、打开行为面板，单击 按钮打开行为命令下拉菜单，选中其中的“打开浏览器”行为命令，如图3所示。3、在打开浏览器窗口设置对话框中进行将要打开的浏览器窗口的外观的参数定义，如图4所示。图4 打开浏览器窗口的外观参数的定义行为面板是个很重要的面板，我们在

42、创建页面效果时会经常用到它，它里面有很多常见的效果的定义。比如定义页面的状态条信息、检查页面提交表单的正确性等等。以后要多研究研究它哦三、禁止访问用户的右键单击现在你用鼠标右键在这个页面上单击一下试试你的右键失效了吧，想把我的页面上的资源马上拿走？嘿嘿还是再费点工夫吧。1、将页面文档视图转换到“代码视图”模式，然后将光标定位在前面一行。这里就是我们将要插入JavaScript脚本代码的地方。2、执行“插入/脚本对象/脚本”命令，会弹出一个插入脚本对话框，如图5所示。图5 插入脚本对话框3、按照图5进行设置，然后确定以后，看看我们的页面文档中出现了什么：这是一对标签，它定义了在页面中将要插入的脚

43、本所使用的语言。我们通过步骤2得到的这样一个结果，当然也可以手工输入这些代码来实现。4、将光标定位在与之间。5、打开代码片段面板，选择展开其中的“JavaScript/浏览器函数”，然后鼠标双击“禁用右键单击”，如图6所示。图6 插入代码片段完成以上操作以后，你会发现在与之间插入了一段脚本代码。这样就基本OK了，当然我们还可以改一下警告信息。改这里：var message = 嘿嘿，右键不能拿我的东西！;四、自动搭上著名的搜索引擎，提高自己网站的访问率自动提高自己网站的访问率？这么好的事情谁不想知道！其实很简单，方法就是让著名的搜索引擎帮助我们。许多搜索引擎装置（自动浏览网页为搜索引擎收集信息

44、以编入索引的程序）读取关键字meta标签的内容和说明meta标签的内容，并使用该信息在它们的数据库中将您的页面编入索引。在Dreamweaver MX中如何实现这个技术呢？1、单击插入栏下的“文件头标签”，如图7，我们要使用文件头标签下的两个按钮命令。图7 文件头meta标签属性2、单击图7所示的“关键字属性”按钮，在弹出的关键字设置对话框的关键字文本框中输入站点的关键字。比如：闪客，教程，flash等，注意多个关键字之间用逗号隔开。3、单击图7所示的“说明属性”按钮，在弹出的说明设置对话框的描述文本框中输入对站点的描述文字。比如：本站点是一个专门讨论动画设计和网站建设的站点，有大量的原创教程

45、。 第七课这个教程的上篇篇到本课就要要结束了。说说实话，有一一种如获重负负的感觉，也也终于要有一一个新的开始始了。学习是是一个快乐和和痛苦的过程程。想一想自自己又给了110MB多数数据新的生命命、想一想这这么多的收获获，学习过程程中的付出也也真值得。好好了，别酸了了，还是讨论论我们的课程程吧 这次课定定位在“画”网网页，一个画画字给了我们们更大的设计计空间！网页页可以画出来来？那当然。大大家别忘了，FFirewoorks可是是专业的网页页设计工具，而而且MX这个个版本赋予它它更强大的网网页设计功能能。这次我们们就讨论Fiireworrks MXX和Dreaamweavver MXX结合在一起起

46、“画”一个个漂亮的网页页。先看看这里：留言言板站点说明明页面。我们们就学习这个个页面是怎样样画出来的。一、在Fireworks MX中绘制页面（png源文件下载）1、新建一个画布文档。宽：755像素、高：300像素，透明背景。2、在画布上绘制页面效果如图1所示。大致包括3部分：页面头图片、表格框、页面尾图片。图1 图像参考2、给图像文档进行切片选择工具栏中网页工具中的切片工具 ，然后拖动鼠标画矩形切片，如图2所示。注意进行多个切片的时候一定要对准确，中间不能有缝隙，实际上在切片的时候系统自动有吸附的功能，只要边线对仔细就行。图2 切片参考3、如图2所示，我们把图像一共切片分割成5个区域，绿色显

47、示的是切片区，第个是无切片区。这里特别要注意、两个切片的切割，它们的宽度应一致（10像素）。而且千万不能把切片区中的边框曲线切进来！（、两个切片区和切片区的连接部位就是一段曲线，应把曲线留到切片区）4、导出图像为包含表格代码的HTML文件执行“文件/导出”命令，则弹出导出对话框，如图3所示。请按照图中所示进行设置。图3 导出图像切片二、在Dreamweaver MX中对导出的Fireworks MX HTML文件编辑1、在Dreamweaver MX中打开导出的Fireworks MX HTML文件。或者在Dreamweaver MX中单击插入栏中的 按钮插入Fireworks HTML。2、

48、这时你会发现，原来那些切片在这里都是一些表格单元。现在你清楚该怎么做了吧。3、单击原来的哪个区域，将选中的图片删除，这里是我们输入文字的主要表格单元格。4、现在是最关键的操作。目前我们在、那两个单元格（原来是切片区域）看到的图片等于是插入到单元格中的图片。必须把它们转变成单元格的背景图片这样的性质。这样文字单元格随文字的输入而延伸时，、单元格也会跟着延伸并不断线了。可以在属性面板完成以上操作，如图4所示。图4 在属性面板中进行图片性质的转换大功告成！到此，本教程的上篇就结束了。从下一课开始我们就要讨论留言板站点的后台数据库和程序的设计了，一起继续努力吧。 第八课从这一课我们就就要开始学习习如何

49、实现留留言板站点的的动态特性了了。那么什么么是静态站点点？什么又是是动态站点呢呢？还是简单单的说明一下下： 静态站点和和动态站点概概述所所谓“静态”指指的就是网站站的网页内容容“固定不变变”，当用户户浏览器通过过互联网的HHTTP协议议向WEB服服务器请求提提供网页内容容时，服务器器仅仅是将原原已设计好的的静态HTMML文档传送送给用户浏览览器。其页面面的内容使用用的仅仅是标标准的HTMML代码，最最多再加上一一些诸如飞来来飞去的蝴蝶蝶这样的动画画效果。若网网页维护者要要更新网页的的内容，就必必须手动地来来更新其所有有的HTMLL文档，给维维护者带来大大得出乎想象象的工作量，如如图1。图11

50、静态站点点简单图示动态态网站技术将将网页维护者者从一遍一遍遍的重复而烦烦琐的手动更更新中解脱出出来，并且可可以实现诸如如留言板、BBBS论坛、新新闻实时发布布等站点访问问者与webb服务器交互互性很强的页页面。以ASSP技术为例例，动态站点点的一般实现现原理如图22所示。图22 ASP技技术动态站点点简单图示一般情情况下，在我我们的动态站站点部署中包包括两个主要要内容：一个个是动态脚本本程序，另一一个是对数据据的存储和管管理。本教程程中，前者使使用的是ASSP技术，后后者是常用的的数据库技术术，用数据库库来存储和管管理数据是动动态网站最高高效的选择。下下面我们就先先讨论讨论数数据库技术一、数数

51、据库技术简简介任何程程序都要处理理数据，如何何存储和管理理程序中要处处理的数据是是程序的关键键。数据库技技术是目前使使用最广泛的的数据存储和和管理技术，它它在大量以数数据处理为主主的程序中起起举足轻重的的作用。目前使使用最广泛的的数据库类型型是关系型数数据库。在关关系型数据库库中我们可以以把数据库中中的数据看成成一个二维表表格，如图33所示。图33 二维表格格数据实实际上现实世世界的很多数数据都可以描描述为如图33所示的这种种二维表格的的形式。关系系数据库正式式利用这种二二维表格的形形式来描述和和管理程序中中的数据的。数数据库的基本本组成单位是是记录，记录录被视为单个个实体的相关关数据的集合合

52、。例如图33表格中每一一个用户的信信息（表格的的一行）就是是一个记录。另另外，图3表表格中的用户户ID、姓名名、性别、留留言内容、OOICQ、等（表格格的一列）各各个相关信息息在数据库中中用专业术语语说就是一个个域，比如：姓名域、性性别域等等。一个数据库可包含多个表，每个表具有唯一的名称。这些表可以是相关的，也可以是彼此独立的。表中每一列代表一个域，每一行代表一条记录。如图4所示是一个表的结构。图4 数据库中的一个表从一个或多个表中提取的数据子集称为记录集。记录集也是一种表，因为它是共享相同列的记录的集合。通过图5，我们可以很清楚的理解什么是记录集了吧。在Dreamweaver MX中定义记录

53、集可是创建动态交互页面的重要步骤呢。 图5 记录集表二、用ACCESS2000创建留言板站点数据库ACCESS2000是微软的OFFICE2000办公系统中的一个重要组件。它是最常用的桌面数据库管理系统之一，它简单易用。作为用户访问量不是很大的个人小型站点，用ACCESS2000设计数据库还是可行的。下面我们就用ACCESS2000创建留言板站点中的数据库。创建数据库文档并设计数据库表结果1、创建空数据库文档。启动ACCESS2000程序，在出现的Microsoft Access提示框中选择“新建数据库/空Access数据库”，如图6所示。图6 新建空Access数据库2、如图6，单击“确定”

54、按钮以后，出现“文件新建数据库”对话框。在其中给你的空Access数据库文件起个名字，找到存放它的本地硬盘文件夹。建议你把它存放到留言板站点根目录下的data文件夹下。E:Inetpubwwwrootliuyanban_jchdataliuyanban_data.mdb3、完成第2步以后，单击“创建”按钮，则会弹出一个数据库设计窗口，如图7所示。我们要在这个窗口中完成数据库的设计。图7 数据库设计窗口创建表4、双击表窗口中的“使用设计器创建表”，会弹出一个表设计器设计视图，在其中我要完成表的结构（域）的设计。设计结果看这里5、设置表中主键。右键单击y_id字段，在弹出的快捷菜单中选择“主键”。

55、这样y_id字段就成为表的主键了。6、当设计完成后，单击关闭按钮关闭表设计器设计视图窗口，这时会弹出一个提示框，如图8所示。回答“是”保存设计结果。图8 保存设计提示信息7、单击“是”以后，会弹出如图9所示的对话框。在其中输入数据库表的名字yonghu。图9 命名数据库表8、重复以上步骤创建另一个数据库表_guest。设计结果看这里在设计好的数据库表中输入记录经过前面的设计步骤以后，数据库设计窗口变成如下结果，如图10所示。图10 向数据表中添加记录请尝试分别在两个数据库表中添加一些记录并删除这些记录。第九课对于动态站点（比比如我们的留留言板站点）的的创建，除了了静态页面元元素的设计之之外，在

56、服务务器端要创建建和部署两个个方面的内容容：一个动态态脚本程序（本本留言板站点点采用的是AASP技术）、另另一个是数据据库。在前一一课我们已经经创建了留言言板站点的数数据库文件，下下面就该创建建动态脚本程程序了。在创创建动态脚本本程序之前，将将数据库和留留言板站点连连接在一起是是最基本的要要求。原因很很简单：动态态脚本程序为为了完成我们们预定的程序序任务，必定定要操作数据据，而数据被被我们部署在在数据库中，那那么首先将数数据库和站点点连接起来，使使动态脚本程程序能够很方方便的读、写写数据库中的的数据应该是是很自然的要要求了。 在Dreeamweaaver MMX中如何实实现数据库和和站点的连接

57、接呢？连接的的方法有几种种呢？连接好好的数据库中中的数据是不不是直接就可可以应用到我我们的页面中中呢？本课要要一一解决这这些问题。在在Dreammweaveer MX中中实现数据库库连接的方法法在Drreamweeaver MX中有两两种实现数据据库连接的方方法：一个是是通过DSNN（数据源名名称）实现连连接，另一个个是通过自定定义连接字符符串实现连接接。下面就以以上一课所建建立的留言板板数据库（EE:Ineetpubwwwroootliiuyanbban_jcchdattaliuuyanbaan_datta.mdbb）为例，讨讨论它和留言言板站点的连连接方法。一、通通过DSN（数数据源名称）

58、实实现连接1、定定义系统DSSN打开开控制面板，然然后打开其中中的ODBCC数据源管理理器，如图11所示。选择择其中的系统统DSN标签签，然后单击击添加按钮，我我们要添加一一个新的系统统DSN名称称。图11 ODBCC数据源管理理器添加新新的系统DSSN单单击添加按钮钮以后会弹出出一个“创建建新数据源”对对话框，如图图2所示。选选择其中的“MMicrossoft AAccesss Drivver(*.mdb)”。图2 选择需要的驱动程序来安装数据源单击“完成”按钮以后，会弹出“ODBC Microsoft Access安装”对话框。在其中定义数据源名并选取数据库文件，如图3所示。图3 ODBC

59、 Microsoft Access安装经过上面步骤的操作以后，在图1所示的窗口中就会显示一个新定义的数据源名称。将来我们在DW中就用这个数据源名称建立连接。2、在Dreamweaver MX中通过DSN（数据源名称）实现连接在Dreamweaver MX中打开留言板站点的主页面文档（main.asp）。打开数据库面板，单击 按钮，在弹出的菜单中选择“ 数据源名称（DSN）”，如图4所示。图4 数据库面板数据源名称在出现的数据源名称对话框中，选择DSN、定义连接名称，如图5所示。图5 定义数据源连接按照图5所示的完成操作确定以后，数据库面板就会出现新定义的连接名称，单击它前面的+展开，可以看到留

60、言板数据库中的两个表，如图6所示。这时我们已经完成了数据库和留言板站点的连接了，连接名是liuyanban_jch。图6 数据库面板完成创建的连接以上我们完成了数据库和站点的连接，这个连接的建立是通过定义DSN完成的。通过DSN建立的数据库连接的特征是：十分方便对数据库的管理。比如，数据库的物理路径发生了改变，只需重新定义DSN，不需涉及到脚本程序的更改。如果我们采取通过DSN建立数据库连接，必须能控制站点服务器的DSN的定义。也就是说应该能够满足以下两种情况：或者站点服务器就是你自己管理；或者是你租用的服务器，但你可以及时通知ISP服务商帮你定义需要的DSN。二、通过自定义连接字符串实现连接