用DreamWeaver打造留言板全

{管理信息化EAM资产管理}用DreamWeaver打造留言板全●Dreamweaver4工作区是一种与Dreamweaver4中所用布局相类似的工作区布局，其中每个谢谢阅读感谢阅读序窗口中。仅建议喜欢使用更熟悉的工作区的Dreamweaver4用户使用这种布局。谢谢阅读▲教程副页：DreamweaverMX工作环境简介页面精品文档放心下载二、建立第一个站点（无服务器端脚本的普通静态站点）下面我们建立一个没有服务器端脚本的普通静态站点，具体建立步骤如下：感谢阅读1“站点/新建站点”“站点“新建站点“站感谢阅读点定义”对话框。2、如果对话框显示的是“高级”选项卡，则单击“基本”。出现“站点定义向导”的第一感谢阅读个屏幕，要求您为站点输入一个名称。3、在文本框中，输入一个名称以在Dreamweaver中标识该站点。该名称可以是任何所需的谢谢阅读名称。例如，您可以将站点命名为“mysit”。如图2所示。图2建站向导——站点起名4、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您是否要使用服务器技精品文档放心下载术。选择“否”选项指示目前该站点是一个静态站点，没有动态页。如图3所示。精品文档放心下载图3建站向导——静态和动态网站选择5、单击“下一步进入下一个步骤。出现向导的下一个屏幕，询问您要如何使用您的文件，谢谢阅读如图4所示。●选择标有“编辑我的计算机上的本地拷贝，完成后再上传到服务器（推荐）”的选项。

●文本框允许您在本地磁盘上指定一个文件夹，Dreamweaver将在其中存储站点文件的本地

单击该文本框旁边的文件夹图标。随即会出现“选择站点的本地根文件夹对话框，在对话

框中浏览到本地磁盘上可以存放所有站点的文件夹。然后单击“确定”。

图4建站向导——定义站点文件的存储位置感谢阅读6、单击“下一步”进入下一个步骤。出现向导的下一个屏幕，询问您如何连接到远程服务谢谢阅读器。从弹出式菜单中选择“无”。▲如果你有远程的FTP5所示进行连接到远程服务器感谢阅读的设置。图5建站向导——连接到远程服务器的设置7、单击“下一步进入下一个步骤。该向导的下一个屏幕将出现，其中显示您的设置概要。谢谢阅读单击“完成”完成设置。▲完成站点的建立之后，在文件面板中你会看到如图6所示的类似结果（本地视图）。

图6文件面板中的本地视图谢谢阅读三、用系统模板创建站点的第一个页面感谢阅读页面的效果：lesson1_这个页面是用DreamweaverMX的系统模板创建的，以下是创建步骤：感谢阅读1、执行“文件/新建”命令，弹出“新建文档对话框”。在此对话框中选择“常规/页面设感谢阅读计/文本：文章C”，然后单击“创建”按钮，如图7是示意图。感谢阅读图7利用模板创建新文档示意图2、现在我们在页面编辑区得到一个新页面，并且页面中已包含了一些模板内容。这个页面谢谢阅读很简单，包括一些文本和一个图像。我们首先将那些英文文本换成一些中文文本（你可以将教程中示例页面中的文本复制过精品文档放心下载来）。3、对图像进行处理。我们在页面中看到的是一个图像占位符，下面我们要用一个具体的图谢谢阅读像替换它。单击这个图像占位符，并展开相应的占位符属性面板，如图8所示。精品文档放心下载●如果图像已经创建好，就在占位符属性面板中的源文件处进行设置。感谢阅读●如果图像还没有创建，就单击占位符属性面板中的创建按钮，在FireworksMX中创建。谢谢阅读图8占位符属性面板4、在属性面板中设置文本的属性，由于我们的页面上的文本实际上都是在表格中，所以实谢谢阅读际上是设置表格的单元格属性，如图9所示。图9单元格属性面板5、关于图像和文本的距离的设置。我们以后在编辑网页时会经常遇到图像和文本之间的距

离问题，如图10所示。我们可以先选中图像，然后在图像属性面板中设置图像和文本之间

的距离，如图11所示。谢谢阅读图10图像和文本间的距离示意图图11设置图像和文本距离精品文档放心下载6、保存文件。执行“文件/保存”命令，将文档保存到我们站点文件夹中。感谢阅读如果我们文件的存储路径是:c:\Inetpub\wwwroot\mysite1\lesson1_谢谢阅读以下地址访问它：localhostlesson1_或者lesson1_。精品文档放心下载第二课DreamweaverMX的工作环境以及如何创建一个站点和编辑页面文感谢阅读感谢阅读这个留言板站点的建立，我们要讨论在DreamweaverMX中经常用到的一些工具和命令。感谢阅读一、创建留言板动态站点上一次课我们建立了一个静态的站点，这一课我们首先建立一个包含服务器端脚本（ASP）谢谢阅读的动态站点。以下是创建步骤：1、执行“站点/新建站点命令，得到建站向导，在第1步中，给你的站点起个名字。比如谢谢阅读是：liuyanban。2、单击下一步，在下一个步骤画面中进行服务器脚本技术的有关设置，如图1所示。精品文档放心下载图1建站向导——服务器脚本技术设置3URL2谢谢阅读所示。图2建站向导——站点URL4、以下步骤按照建站向导的默认设置。最后单击完成按钮即可。精品文档放心下载二、在站点中创建资源文件夹▲在创建了本地站点之后，如果您已为该站点创建了资源（图像、Flash动画或其他内容片谢谢阅读精品文档放心下载容时，这些资源将随时可用。精品文档放心下载中。1、假设我们的留言板站点的根文件夹路径为：c:\Inetpub\wwwroot\liuyanban\。感谢阅读2、打开站点面板，展示留言板站点的本地视图，右键单击留言板站点，在弹出的快捷菜单精品文档放心下载中执行“新建文件夹”命令。如图3所示。按照这种方法，先创建两个文件夹：images（用来放图像文件）和swf（用来放Flash动谢谢阅读画）。图3在站点视图创建新文件夹精品文档放心下载理文件和文件夹。●留言板系统用户头像图像(10个图像文件)。放在images文件夹中。下载（rar文件）

●留言板系统导航条图像。放在images文件夹中。下载●Flash动画文件(1个)。放在swf文件夹中。下载应的资源，如图4所示。我们可以将资源面板中的资源直接拖放到站点文档中使用。感谢阅读图4资源面板三、创建留言板站点的第一个页面（文件名：）感谢阅读它用来对我们的留言板系统进行说明。1、执行“文件/新建”命令，在弹出的新建文档对话框中选择“基本页/”，然后单击“创谢谢阅读建”按钮，如图5所示。图5新建基本文档2、编辑页面文档（页面效果参考）●输入页面标题“留言板系统说明”。如图6所示。图6定义页面标题精品文档放心下载现。“编辑/参数选择命令，在弹出的参数选择对话框中选择“允感谢阅读许多个连续空格”复选框，如图7所示。图7参数选择——允许多个连续空格感谢阅读文输入法切换到“全角方式，然后连续按两次空格，完了以后再切换到“半角方式进行谢谢阅读文字内容的输入。Enter谢谢阅读请按“Shift+Enter”组合键。●关于图像的插入，我们可以用以下两种方法中的任意一种：感谢阅读①将光标定位到要插入图像的位置。用鼠标单击“插入栏”中“常用”标签下的图像按钮，感谢阅读如图8所示。然后找到要插入的图像文件。图8插入图像和水平线②打开资源面板，单击图像资源类别，选择要插入的具体图像资源，用鼠标拖放到插入处。

8在属性面板设置它的颜色。插入的水平线默认是灰色的，要更改它的颜色，我们需要这样操作：

选中水平线，切换到代码视图。将光标定位在br标签后，单击空格键，这时会弹出一个下

9color择你需要的颜色就可以了。谢谢阅读图9在代码视图设置水平线颜色属性3、保存页面文档。执行“文件/保存命令，把文档保存到站点的根目录下。文件名：。只谢谢阅读须输入主文件名shuoming就可以了，扩展名是系统自动加上的。精品文档放心下载第三课精品文档放心下载感谢阅读容性和可控制性就比表格差多了，本次课也要讨论DreamweaverMX感谢阅读表格相互转换的知识。谢谢阅读设计步骤如下：1、创建主页面新文档（）这个主页面将来是个包含ASP谢谢阅读展名是asp。你可以选择以下两种方法中的任意一种创建它：感谢阅读●执行“文件/新建命令，在弹出的新建文档对话框中做如图1所示的操作。保存文档时，谢谢阅读文件命名为main。图1新建ASPVBScript动态文档精品文档放心下载中执行“新建文件”命令，然后将文件名的主文件名改为main。精品文档放心下载2、创建表格在DreamweaverMX感谢阅读图下直接画表格。▲在标准视图下插入表格：“标准视图是默认的DreamweaverMX设计视图。若要在“标准视图中创建表格，可以使感谢阅读用“插入表格”命令。Dreamweaver将根据您在“插入表格”对话框中选择的选项创建一个精品文档放心下载表格，如图2所示。图2插入表格和定义表格1行1列，宽度是755像素。另一个是3行3列，宽度谢谢阅读是600像素。▲在布局视图下绘制表格：在“布局视图中，可以绘制布局单元格或布局表格以定义文档的设计区域。这给了我们更感谢阅读大的灵活性，想一想在页面上画表格的滋味吧！我们需要在插入栏中切换到布局标签下，并单击布局视图，如图3感谢阅读或单元格按钮以后就可以用鼠标直接绘制了。图3布局视图3、编辑表格精品文档放心下载感谢阅读Web页中文本和图像的位置。当观众在浏览器中查看页面时就不会看精品文档放心下载到设计的基础结构。这些都是对表格的编辑。通常情况下，表格编辑在标准视图下进行。精品文档放心下载●关于表格和单元格的选中常有两种方法：精品文档放心下载断选中整个表格、某一行还是某个单元格。精品文档放心下载格或者单元格的目的，如图4所示。

图4通过标签检查器选择表格谢谢阅读●关于表格的尺寸基于百分比还是基于像素：谢谢阅读使用75%的宽度，则不管浏览器窗口有多大，表格都会伸展以填充75%的水平间距。这在某谢谢阅读些情况下会很有用，例如，在调整窗口大小时确保导航菜单总能显示。感谢阅读谢谢阅读谢谢阅读实例就是用基于像素的表格布局页面的。●关于调整布局单元格大小有两种方法：

用鼠标直接移动到单元格的边框，拖动鼠标调整单元格的大小。谢谢阅读

在属性面板直接输入单元格的宽和高，来精确的控制调整单元格的大小。精品文档放心下载●表格和单元格的其它属性的设置都可以在属性面板中完成。谢谢阅读4、使用层进行布局感谢阅读想让它占据的任何位置。如图5是创建层和在层面板管理层的示意图。精品文档放心下载图5创建层和在层面板管理层谢谢阅读感谢阅读感谢阅读“修改/转换/感谢阅读层到表格”或者“修改/转换/表格到层”就可以实现层和表格之间的互换了。感谢阅读谢谢阅读布局变化，这样才能找到和掌握更多的规律。第四课精品文档放心下载是主页面（）。下面我们首先挑毛病，挑一挑两个页面的创建过程和创建结果的毛病。谢谢阅读1“查看/文字大小/最大精品文档放心下载字大了，段落也乱了！怎么这个效果啊！2Enter感谢阅读么那么大啊？也找不到控制距离的命令。：（3、仔细再看一看页面效果，怎么超级链接的文字下面都有一个下画线啊？这多不好看啊，感谢阅读能不能去掉呢？4、我想文字段落前空两个汉字的位置，每次都要按空格键设置，能不能在新段落前自动前精品文档放心下载空两格？5、我想表格线更细一些，可在属性面板里面好象完成不了这个目的？谢谢阅读谢谢阅读CSS层叠式样式表。它可是设计网页的重要技术，有了它，我们刚才找到的那些问谢谢阅读题就马上可以解决掉。一、关于CSS样式表层叠样式表（CSS）是一系列格式规则，它们控制网页内容的外观。使用CSS样式可以非常谢谢阅读灵活并更好地控制确切的网页外观，从精确的布局定位到特定的字体和样式。感谢阅读CSS样式使您可以控制许多仅使用HTML感谢阅读CSS样式和以像素为单位设谢谢阅读感谢阅读谢谢阅读本周围的浮动文本等等。CSS样式表的主要优点是提供便利的更新功能；更新CSS样式时，使用该样式的所有文档的精品文档放心下载格式都自动更新为新样式。在DreamweaverMX中主要通过“CSS样式面板”创建CSS样式、查看CSS样式的属性以及将谢谢阅读CSS样式应用于文档中的元素。选择执行“窗口/CSS样式命令可以打开“CSS样式面板，谢谢阅读如图1所示。CSS样式面板中有两种视图，一个是应用样式视图，另一个是编辑样式试图，如图1和图2谢谢阅读所示。●应用样式视图：在这个视图下可以选择应用于文档元素的类（class“应用样式”

视图只显示自定义（class）样式。该窗格中不显示重定义的HTML样式和选择器样式。

●编辑样式视图：在这个视图下可以查看与当前文档关联的样式定义。“编辑样式视图显

示自定义（class）CSS样式、重定义的HTML标签和CSS选择器样式的样式定义。

图1CSS样式面板精品文档放心下载图2CSS样式面板——编辑样式面板二、在网页文档内部定义和引用CSS样式在DreamweaverMX感谢阅读CSS样式。▲重定义标签body的属性样式1、打开CSS样式面板，选择编辑样式面板视图。2、单击面板右下角的新建CSS样式按钮，会弹出一个新建样式对话框，如图3所示。请按谢谢阅读照图3所示进行设置。图3新建CSS样式对话框——重定义body属性感谢阅读3、设置完成以后，单击确定按钮，进入body标签的属性设置对话框中，如图4所示。

图4body属性样式设置——类型属性精品文档放心下载▲重新定义文本超级链接属性样式1、打开CSS样式面板，选择编辑样式面板视图。2、单击面板右下角的新建CSS样式按钮，会弹出一个新建样式对话框，如图5所示。请按精品文档放心下载照图5所示进行设置。图5新建CSS样式——重新定义超级链接属性3a:link的属性设置对话框中，如图6“修饰”和“颜色”，其它不设置。谢谢阅读图6a:link的类型属性样式设置423a:visited和a:hover的属性样式。和前面重新定

义a:link唯一的不同是文字颜色的设置，分别设置成灰色和红色，其他的设置都一样。

●a:link超级链接文字的正常外观属性。感谢阅读a:visited超级链接文字访问过以后的外观属性谢谢阅读a:hover当鼠标经过超级链接文字时的外观属性●经过前面对body和a标签的属性重新定义以后，定义的CSS样式会自动套用到页面的元

素上。这是最终的页面效果：shuoming_三、定义和附加外部样式表感谢阅读CSS样式只对本文档起作用，

点内的页面大多要求一致的外观和效果，如果我们针对一个站点定义一次CSSDreamweaverMX的外部样式表就是用来实现这个目的的。让我们开始外部样式表的应用吧，先在DreamweaverMX中打开留言板站点的主页面文档（），我们要以这个文档为实例完成我们的学习。谢谢阅读▲定义外部CSS样式表文件1CSS样式面板，单击右下角的新建样式按钮，则弹出新建样式对话框，如图7所示。感谢阅读请按照图7进行设置。图7新建CSS样式——外部样式文件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:visited、a:hover谢谢阅读的属性样式。4、重定义p标签的“盒子”属性样式可以设置段落间距，如图10所示。精品文档放心下载图10p标签的盒子属性样式图11外部CSS样式表△定义的外部CSS样式表最终结果如图11所示。谢谢阅读▲附加外部样式表上面我们建立了一个外部CSS样式表文件（*.css），这个外部CSS样式文件自动附加到定感谢阅读义它的页面文档中了。但站点中的其它页面文档如果想使用这个外部CSS样式表中的样式，谢谢阅读就必须先附加它。具体步骤如下：1、打开站点中的另一个页面文档。2、打开CSS样式面板，单击面板右下角的“附加外部样式表”按钮，马上会弹出一个“链感谢阅读接外部CSS样式表”对话框，如图12所示。图12链接外部样式表3、在图12所示的链接外部样式表中浏览找到要附加的CSS样式表文件以后，单击“确定”

按钮就完成了将一个外部CSSCSS样式表面板的编辑

视图下就可以看到附加的样式表，如图11所示。▲利用CSS样式表模板创建外部CSS样式表谢谢阅读除了在CSS样式面板中创建外部CSSCSS样式表模板创建外部

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

所示。当我们选择属性面板格式中的标题1、标题2、……、标题6时，实际上光标所在的感谢阅读文档段落就应用了这些属性样式了。图15属性面板中段落格式设置四、教程副页▲特定CSS样式设置信息参考第五课感谢阅读精品文档放心下载Dreamweaver的导航条，并对页面中的导航条的创建方法进行总结。另外，还顺便讨论一下谢谢阅读如何插入flash动画等页面元素的方法。一、规划和创建页面导航元素11所示的效果。感谢阅读图1页面顶部表格2、根据图1所示的表格尺寸，在FireworksMX和FlashMX中创建图像和动画。（在这里下谢谢阅读载）你下载的是一个rar压缩包（image5.rar），其中包括以下内容：精品文档放心下载△一个宽300像素、高120像素的图像文件（top001.gif），在FireworksMX制作完成。感谢阅读△一个宽455像素、高90像素的flash动画文件（top1.swf），在FlashMX制作完成。感谢阅读△5组共10个宽9130daohang*_*FireworksMX制作完成。谢谢阅读3、将图像top001.gif插入到图1中①所标示的单元格。精品文档放心下载4、将flash动画top1.swf插入到图1中②所标示的单元格，具体步骤是：感谢阅读⑴将光标定位到图1中②所标示的单元格中。⑵单击插入栏中的“插入flash”命令，弹出如图2所示的“选择文件“对话框。在其中浏谢谢阅读览选择需要插入的flash动画文件。图2选择要插入的flash动画文件⑶选中插入的flash动画，在属性面板可以对它进行设置和操作，如图3所示。精品文档放心下载图3flash动画属性面板二、插入导航条1、将鼠标光标定位到图1中③所标示的单元格，然后单击插入栏中的“插入导航条命令，精品文档放心下载如图4所示。图4插入导航条2、单击“插入导航条”命令以后，会弹出如图5所示的“插入导航条“对话框。感谢阅读图5插入导航条对话框3、在如图5所示的插入导航条对话框中，我们要定义5个导航项目，将来得到的是5个水

FireworksMX制作完成5组图像文精品文档放心下载件。▲完成以后的留言板站点主页面效果：单击这里观看三、创建页面导航条方法总结1、自定义简单导航条①布局表格，导航条中有几个项目，就创建几个单元格。②在单元格中输入文本或者插入图像。③分别定义每个单元格中的文本或者图像的超级链接。2、创建Dreamweaver导航条（方法请参考前面）感谢阅读3、通过插入“代码面板/代码片段/导航”创建常见的导航条，如图5所示。感谢阅读精品文档放心下载图6代码片段：导航4、创建FireworksMX导航条FireworksMXFireworksMX中设计导航条，谢谢阅读然后再插入到DreamweaverMX中进行编辑。谢谢阅读如图7FireworksHTML命令可以实现FireworksHTML文档的插入。感谢阅读图7插入FireworksHTML文档5、创建Flash按钮导航条如图8Flash按钮命令可以实现在页面文档插入Flash按谢谢阅读钮的目的。将多个Flash按钮集合在一起也能实现导航条的功能。精品文档放心下载图8插入Flash按钮第六课经过前面5DreamweaverMX创建和管理站点页面文档的前台技术有了一个谢谢阅读5课所涉及到的应该是创建和管理站点的最基本的一些技术。精品文档放心下载精品文档放心下载谢谢阅读谢谢阅读们也是一些常用的技术和方法，我们还是在这里系统的学习一下吧。精品文档放心下载一、利用时间轴和层实现页面中的滚动字幕效果。小字报：今天留言板的最多的问题是这个教程共有几课？Dreamweaver时间轴面板中定义层的移动动感谢阅读画来实现的。什么？Dreamweaver也有时间轴？是的，而且你用它可以设计出不错的动画效谢谢阅读果呢。而且用这样的技术设计出来的动画效果更符合web的特征。谢谢阅读1、单击插入栏中常用标签下的层命令按钮，在页面中拖拽鼠标插入一个层。在层中输入需感谢阅读要的字幕文字。2、打开时间轴面板。执行“窗口/其他/时间轴”命令打开时间轴面板。谢谢阅读3、将页面文档中的层选中，并把它拖放到时间轴的时间线上。默认的情况是插入的动画长谢谢阅读度为15帧，相应的层名（Layer1）显示在该动画栏中，并且在动画栏的两端自动加入了两谢谢阅读个关键帧。4精品文档放心下载向右拖动第15帧上的这个关键帧以延长关键帧到60帧，如图1所示。感谢阅读图1时间轴面板5、在第30帧鼠标右键单击，在弹出的快捷菜单中选择“插入关键帧”命令，在第30帧插感谢阅读入一个关键帧。6、单击第30帧，然后将页面文档中的层水平向右移动合适的距离如图2所示。精品文档放心下载图2层的运动轨迹760帧的位置，如图1所感谢阅读示。很多技巧，以后慢慢研究吧。：）二、创建当页面载入时弹出窗口的效果先单击这里观看具体页面效果页面载入时的行为实际上就是定义<body>标签的行为。▲弹出信息提示对话框窗口感谢阅读1、在标签检查器中单击选中<body>标签，这时整个页面文档就会变成灰色状态。

2、打开行为面板，单击按钮打开行为命令下拉菜单，选中其中的“弹出信息”行为命令，

如图3所示。精品文档放心下载图3行为面板——定义行为3、在出现的弹出信息对话框的信息文本框中输入想弹出的提示信息。谢谢阅读▲打开浏览器窗口1、在标签检查器中单击选中<body>标签，这时整个页面文档就会变成灰色状态。精品文档放心下载2、打开行为面板，单击按钮打开行为命令下拉菜单，选中其中的“打开浏览器行为命令，谢谢阅读如图3所示。3、在打开浏览器窗口设置对话框中进行将要打开的浏览器窗口的外观的参数定义，如图4精品文档放心下载所示。图4打开浏览器窗口的外观参数的定义感谢阅读谢谢阅读究它哦~三、禁止访问用户的右键单击现在你用鼠标右键在这个页面上单击一下试试……精品文档放心下载源马上拿走？嘿嘿~还是再费点工夫吧。1、将页面文档视图转换到“代码视图模式，然后将光标定位在</body>前面一行。这里就感谢阅读是我们将要插入JavaScript脚本代码的地方。感谢阅读2、执行“插入/脚本对象/脚本”命令，会弹出一个插入脚本对话框，如图5所示。精品文档放心下载图5插入脚本对话框3、按照图5进行设置，然后确定以后，看看我们的页面文档中出现了什么：精品文档放心下载<scriptlanguage="JavaScript"type="text/JavaScript">感谢阅读</script>这是一对<script>2感谢阅读得到的这样一个结果，当然也可以手工输入这些代码来实现。感谢阅读4、将光标定位在<scriptlanguage="JavaScript"type="text/JavaScript">与</script>之感谢阅读间。5、打开代码片段面板，选择展开其中的“JavaScript/浏览器函数，然后鼠标双击“禁用精品文档放心下载右键单击”，如图6所示。图6插入代码片段完成以上操作以后，你会发现在<scriptlanguage="JavaScript"type="text/JavaScript">

与</script>OK改这里：varmessage="嘿嘿，右键不能拿我的东西！";四、自动搭上著名的搜索引擎，提高自己网站的访问率读取关键字meta标签的内容和说明meta的页面编入索引。在DreamweaverMX中如何实现这个技术呢？谢谢阅读1、单击插入栏下的“文件头标签”，如图7，我们要使用文件头标签下的两个按钮命令。谢谢阅读图7文件头meta标签属性2、单击图7所示的“关键字属性”按钮，在弹出的关键字设置对话框的关键字文本框中输精品文档放心下载入站点的关键字。比如：闪客，教程，flash等，注意多个关键字之间用逗号隔开。谢谢阅读3、单击图7所示的“说明属性”按钮，在弹出的说明设置对话框的描述文本框中输入对站程。谢谢阅读第七课谢谢阅读开始了。学习是一个快乐和痛苦的过程。想一想自己又给了10MB多数据新的生命、想一想精品文档放心下载这么多的收获，学习过程中的付出也真值得。好了，别酸了，还是讨论我们的课程吧……精品文档放心下载这次课定位在“画”网页，一个画字给了我们更大的设计空间！网页可以画出来？那当然。感谢阅读大家别忘了，FireworksMX这个版本赋予它更强大的网页设精品文档放心下载FireworksMX和DreamweaverMX结合在一起“画一个漂亮的网页。谢谢阅读先看这里：留言板站点说明页面。我们就学习这个页面是怎样画出来的。谢谢阅读一、在FireworksMX中绘制页面（png源文件下载）感谢阅读1、新建一个画布文档。宽：755像素、高：300像素，透明背景。谢谢阅读2、在画布上绘制页面效果如图1所示。大致包括3部分：页面头图片、表格框、页面尾图感谢阅读片。图1图像参考2、给图像文档进行切片选择工具栏中网页工具中的切片工具，然后拖动鼠标画矩形切片，如图2精品文档放心下载精品文档放心下载只要边线对仔细就行。图2切片参考325谢谢阅读10感谢阅读谢谢阅读是一段曲线，应把曲线留到①切片区）4、导出图像为包含表格代码的HTML文件执行“文件/导出”命令，则弹出导出对话框，如图3所示。请按照图中所示进行设置。谢谢阅读图3导出图像切片二、在DreamweaverMX中对导出的FireworksMXHTML文件编辑感谢阅读1、在DreamweaverMX中打开导出的FireworksMXHTML文件。或者在DreamweaverMX中单击谢谢阅读插入栏中的按钮插入FireworksHTML。2、这时你会发现，原来那些切片在这里都是一些表格单元。现在你清楚该怎么做了吧。精品文档放心下载3、单击原来的⑤哪个区域，将选中的图片删除，这里是我们输入文字的主要表格单元格。感谢阅读4、现在是最关键的操作。目前我们在③、④那两个单元格（原来是③④切片区域）看到的感谢阅读感谢阅读精品文档放心下载板完成以上操作，如图4所示。图4在属性面板中进行图片性质的转换感谢阅读据库和程序的设计了，一起继续努力吧。第八课精品文档放心下载又是动态站点呢？还是简单的说明一下：▲静态站点和动态站点概述△所谓“静态”指的就是网站的网页内容“固定不变”，当用户浏览器通过互联网的HTTP谢谢阅读协议向WEB服务器请求提供网页内容时，服务器仅仅是将原已设计好的静态HTML文档传送感谢阅读给用户浏览器。其页面的内容使用的仅仅是标准的HTML代码，最多再加上一些诸如飞来飞精品文档放心下载精品文档放心下载HTML文档，给维护者带来大得出乎想象的工作量，如图1。谢谢阅读图1静态站点简单图示精品文档放心下载BBS论坛、新闻实时发布等站点访问者与web谢谢阅读ASP技术为例，动态站点的一般实现原理如图2所示。精品文档放心下载图2ASP技术动态站点简单图示谢谢阅读ASP谢谢阅读据库来存储和管理数据是动态网站最高效的选择。下面我们就先讨论讨论数据库技术……感谢阅读一、数据库技术简介谢谢阅读感谢阅读用。感谢阅读据看成一个二维表格，如图3所示。图3二维表格数据实际上现实世界的很多数据都可以描述为如图3精品文档放心下载式利用这种二维表格的形式来描述和管理程序中的数据的。数据库的基本组成单位是记录，感谢阅读记录被视为单个实体的相关数据的集合。例如图3表格中每一个用户的信息（表格的一行）谢谢阅读3表格中的用户IDOICQ、……精品文档放心下载的一列）各个相关信息在数据库中用专业术语说就是一个域，比如：姓名域、性别域等等。精品文档放心下载谢谢阅读独立的。表中每一列代表一个域，每一行代表一条记录。如图4所示是一个表的结构。谢谢阅读图4数据库中的一个表谢谢阅读的记录的集合。通过图5，我们可以很清楚的理解什么是记录集了吧。在DreamweaverMX中精品文档放心下载定义记录集可是创建动态交互页面的重要步骤呢。图5记录集表二、用ACCESS2000创建留言板站点数据库ACCESS2000是微软的OFFICE2000办公系统中的一个重要组件。它是最常用的桌面数据库管

理系统之一，它简单易用。作为用户访问量不是很大的个人小型站点，用ACCESS2000设计

数据库还是可行的。下面我们就用ACCESS2000创建留言板站点中的数据库。

▲创建数据库文档并设计数据库表结果感谢阅读1ACCESS2000MicrosoftAccess提示框中选择“新

建数据库/空Access数据库”，如图6所示。精品文档放心下载图6新建空Access数据库26击“确定“文件新建数据库Access

下的data文件夹下。E:\Inetpub\wwwroot\liuyanban_jch\data\liuyanban_

3、完成第2步以后，单击“创建”按钮，则会弹出一个数据库设计窗口，如图7所示。我

们要在这个窗口中完成数据库的设计。精品文档放心下载图7数据库设计窗口—创建表4、双击表窗口中的“使用设计器创建表”，会弹出一个表设计器设计视图，在其中我要完感谢阅读成表的结构（域）的设计。设计结果看这里5、设置表中主键。右键单击y_id字段，在弹出的快捷菜单中选择“主键”。这样y_id字感谢阅读段就成为表的主键了。6、当设计完成后，单击关闭按钮关闭表设计器设计视图窗口，这时会弹出一个提示框，如

图8所示。回答“是”保存设计结果。精品文档放心下载图8保存设计提示信息7、单击“是”以后，会弹出如图9所示的对话框。在其中输入数据库表的名字yonghu。精品文档放心下载图9命名数据库表8、重复以上步骤创建另一个数据库表_guest。设计结果看这里谢谢阅读▲在设计好的数据库表中输入记录经过前面的设计步骤以后，数据库设计窗口变成如下结果，如图10所示。感谢阅读图10向数据表中添加记录请尝试分别在两个数据库表中添加一些记录并删除这些记录。谢谢阅读第九课谢谢阅读端要创建和部署两个方面的内容：一个动态脚本程序（本留言板站点采用的是ASP技术）、感谢阅读谢谢阅读本程序了。在创建动态脚本程序之前，将数据库和留言板站点连接在一起是最基本的要求。谢谢阅读谢谢阅读感谢阅读数据库中的数据应该是很自然的要求了。在DreamweaverMX中如何实现数据库和站点的连接呢？连接的方法有几种呢？连接好的数谢谢阅读据库中的数据是不是直接就可以应用到我们的页面中呢？本课要一一解决这些问题。谢谢阅读▲在DreamweaverMX中实现数据库连接的方法精品文档放心下载在DreamweaverMX中有两种实现数据库连接的方法：一个是通过DSN（数据源名称）实现连谢谢阅读接，另一个是通过自定义连接字符串实现连接。下面就以上一课所建立的留言板数据库精品文档放心下载（E:\Inetpub\wwwroot\liuyanban_jch\data\liuyanban_谢谢阅读接方法。一、通过DSN（数据源名称）实现连接1、定义系统DSN①打开控制面板，然后打开其中的ODBC数据源管理器，如图1所示。选择其中的系统DSN

标签，然后单击添加按钮，我们要添加一个新的系统DSN名称。

图1ODBC数据源管理器—添加新的系统DSN精品文档放心下载②单击添加按钮以后会弹出一个“创建新数据源”对话框，如图2所示。选择其中的

“MicrosoftAccessDriver(*.mdb)”。图2选择需要的驱动程序来安装数据源谢谢阅读③单击“完成”按钮以后，会弹出“ODBCMicrosoftAccess安装”对话框。在其中定义数据

源名并选取数据库文件，如图3所示。谢谢阅读图3ODBCMicrosoftAccess安装1所示的窗口中就会显示一个新定义的数据源名称。将来谢谢阅读我们在DW中就用这个数据源名称建立连接。2、在DreamweaverMX中通过DSN（数据源名称）实现连接感谢阅读①在DreamweaverMX中打开留言板站点的主页面文档（）。谢谢阅读②打开数据库面板，单击按钮，在弹出的菜单中选择“数据源名称（DSN），如图4所示。精品文档放心下载图4数据库面板—数据源名称③在出现的数据源名称对话框中，选择DSN、定义连接名称，如图5所示。谢谢阅读图5定义数据源连接④按照图5感谢阅读的+展开，可以看到留言板数据库中的两个表，如图6所示。这时我们已经完成了数据库和谢谢阅读留言板站点的连接了，连接名是liuyanban_jch。感谢阅读图6数据库面板—完成创建的连接以上我们完成了数据库和站点的连接，这个连接的建立是通过定义DSNDSN建感谢阅读立的数据库连接的特征是：△十分方便对数据库的管理。比如，数据库的物理路径发生了改变，只需重新定义DSN，不精品文档放心下载需涉及到脚本程序的更改。△如果我们采取通过DSNDSN精品文档放心下载精品文档放心下载你可以及时通知ISP服务商帮你定义需要的DSN。谢谢阅读二、通过自定义连接字符串实现连接1、还是在留言板站点的主页面文档（）中实现这种连接。先把前面通过DSN实现的连接删谢谢阅读除，方法是右键单击连接名称，然后在弹出的快捷菜单中选择执行“删除连接”命令。精品文档放心下载2、在数据库面板，单击按钮，在弹出的菜单中选择“自定义连接字符串”，如图7所示。精品文档放心下载图7数据库面板—自定义连接字符串3、在弹出的“自定义连接字符串”对话框中，如图8所示。在其中定义连接名称精品文档放心下载liuyanban_jch，并输入自定义的连接字符串：谢谢阅读"Driver={MicrosoftAccessDriver(*.mdb)};DBQ=e:\Inetpub\wwwroot\liuyanban_jch\dat谢谢阅读a\liuyanban_"其中e:\Inetpub\wwwroot\liuyanban_jch\data\liuyanban_是将要连接的数据库文件的物精品文档放心下载理绝对路径。图8自定义连接字符串48所示的操作完成以后，数据库面板就会出现新定义的连接名称，单击它前面的+

6所示。这时我们已经完成了数据库和留言

板站点的连接了，连接名是liuyanban_jch。★以下是对设计好的动态站点的数据库文档和动态脚本文档部署到远程租用服务器上的说明：△通过自定义连接字符串创建的数据库连接最大的特征就是：对于租用服务器空间的用户，不需要ISPweb站点服务器的是：通过使用ASP服务器对象的MapPathliuyanban_。将它上传到web服务精品文档放心下载URL精品文档放心下载路径，如下所示：123.liuyanbanliuyanban_但是这个路径不能用到我们自定义的连接字符串中，在自定义的感谢阅读连接字符串中我们需要的是数据库文件的物理路径。△通过使用ASP服务器对象的MapPath方法获取数据库文件在服务器上的物理路径的方法谢谢阅读是：1、在DreamweaverMX中新建一个ASP文档页并切换到代码视图（“查看”>“代码”）。精品文档放心下载2、在该页的HTML谢谢阅读的FTP服务器而定）<%(("123.liuyanbanliuyanban_"))%>精品文档放心下载3、保存这个ASP动态页面文档，并把它上传到远程服务器。

4IE浏览器中通过URL打开这个文件。这时在你的浏览器窗口中就会显示数据库文件在

远程服务器上的物理地址。△获得了数据库文件的物理地址以后，下面要重新更改自定义的连接字符串。

1、我们在DreamweaverMX中创建了数据库连接以后，在站点的根文件夹中会自动产生一个

名字叫ConnectionsASP文

件。比如留言板站点的连接文件：liuyanban_。感谢阅读2、打开这个ASP文件，并切换到代码视图（“查看”>“代码”）。

3、在代码视图中我们可以看到以下代码：MM_liuyanban_jch_STRING="Driver={MicrosoftAccessDriver(*.mdb)};DBQ=e:\Inetpub\w

wwroot\liuyanban_jch\data\liuyanban_"将绿颜色的路径代码更改成远程服务器上的物理地址（通过MapPath方法获取的）。

如果你还没有支持ASP有点难，但是很有用啊！一定要有耐心啊：）▲连接好的数据库中的数据是不是直接就可以应用到我们的页面中呢？NO！具体内感谢阅读容下次分解……第十课谢谢阅读现在数据库中的数据还不能直接应用到页面中，因为要将数据库用作动态网页的内容源时，谢谢阅读精品文档放心下载精品文档放心下载下留言板主页面的动态效果。一、在绑定面板中定义记录集1、在DreamweaverMX中打开留言板站点主页面（）。精品文档放心下载2、打开绑定面板，单击按钮，在弹出的下拉菜单中选择“记录集（查询）”命令，如图1谢谢阅读所示。图1绑定面板—定义记录集3、在弹出的记录集定义对话框中，定义记录集名称、选择数据库连接名、选择数据库中的谢谢阅读表、选择表中的字段（域）、定义记录排序的方法等，如图2所示。谢谢阅读图2定义记录集4+号，

可以展开记录集，如图3所示。图3绑定面板—创建完成的记录集二、将记录集中数据绑定到表格域感谢阅读1、对留言板主页面（）中的表格重新编辑，删除单元格中的一些文字，结果如图4所示。

图4主页面中显示留言信息的表格精品文档放心下载2、将记录集中的数据域（字段）绑定到表格相应的单元格中。

y_name字段拖放到页面表格的左上角中，

用同样的方法将其它数据域（字段）拖动到相应的单元格中，如图5所示。

图5将记录集中的数据绑定到单元格感谢阅读3、通过上面的步骤，我们已经将记录集中的字段（也就是数据库中数据）绑定到页面中的

单元格中。这样，这些单元格中的内容实际上就是动态文本内容了。先做个实验：

①现在我们就在ACCESS2000中对留言板数据库中的用户信息表（yonghu）编辑记录。单击

这里查看如何在ACCESS2000中编辑记录②在浏览器中打开页面观察页面效果。（localhost或者）

个问题。谢谢阅读三、在页面中添加服务器行为——重复区域1、在页面中选中图5所示的整个表格，我们要把它创建成可以重复显示的区域。精品文档放心下载2、打开服务器行为面板，单击按钮，在弹出的下拉菜单中选择执行其中的“重复区域”命谢谢阅读6所示。我们设置一个页面中同时显示3条感谢阅读留言记录。图6重复区域设置3、设置完成以后，页面中所选中的表格（重复区域）变成灰暗显示，并且在表格的左上角位置出现“重复两字，如图7所示是局部的显示效果。目前，服务器行为面板的内容如图

8所示。感谢阅读图7页面中重复区域（局部）图8服务器行为面板4ACCESS2000中给用户表多添加几个记录试谢谢阅读试。现在你体会到DreamweaverMX的服务器行为的功能的强大了吧。呵~不忙，先别高兴，才刚谢谢阅读开了个头……四、向再添加一个服务器行为——显示区域页面中的表格（如图5）是显示用户的留言记录，当留言板数据库的用户表中没有一个记录感谢阅读感谢阅读谢谢阅读格。：（（（（怎么办？下边通过再添加一个服务器行为——显示区域来解决这个问题：谢谢阅读1、在页面中选中图5所示的整个表格。2“显示区域/如果精品文档放心下载记录不为空则显示区域”命令，如图9。图9服务器行为—显示区域39执行以后，会弹出一个设置显示区域的对话框，在其中选择绑定的记录集，确定。精品文档放心下载4、这时，页面中的选中表格的左上角会出现一个新的服务器行为。精品文档放心下载精品文档放心下载图5所示的空表格。谢谢阅读录集中的数据域绑定到页面中。另外还学习了两个服务器行为，初次体会了DreamweaverMX谢谢阅读在动态网页创建上的强大功能，收获不小吧？但别忘了独立思考、举一反三啊。谢谢阅读第十一课<form>DW精品文档放心下载设计视图下看到的红虚线框。精品文档放心下载钮等元件叫表单域，见图1。图1这些都是本课要用到的表单域一、添加表单、布局表格1、新建文档，保存为这个页面是签写留言的。首先要插入一个表单见图2。感谢阅读图2插入表单面板2、在表单内添加表格，表格布局设置见图3。图3布局表格二、添加表单域1、姓名：在姓名对应的表格里添加文本字段，在属性面板上取名为name见图4，这样做是感谢阅读为了与数据库的字段名字相对应。图4姓名对应的表单域命名2、OICQ、EMAIL、个人主页的表单域的添加方法同上，均为文本字段，分别命名为：谢谢阅读OICQ|oicq，EMAIL|mail,个人主页|homepage。谢谢阅读3、头像：在相对应的单元格里分别插入用户头像图片，然后添加对应的单选按钮命名为：精品文档放心下载tx。4、性别：在姓名对应的表格里添加两个单选按钮，选中性别男单选按钮：在属性面板为它谢谢阅读改名为sex选定值为男，初始状态－已勾选，设置见图5。选中性别女单选按钮：在属性面板为它改名为sex选定值为女，初始状态－未精品文档放心下载选中，方法同上。图5性别男：对应表单域单选按钮的设置5、提交与重置按钮：在最下面的单元格添加两个按钮，选中提交按钮：在属性面板为它改谢谢阅读名为Submit，标签选提交，动作－提交表单，设置见图6。选中重置按钮：在属性面板为它改名为Submit2，标签选重置，动作－重设表精品文档放心下载单，方法同上。图6提交按钮属性6、添加隐藏区域：在提交按钮旁单击添加隐藏区域，在属性面板里为它改名为IP，在值里感谢阅读添加代码<%=Request("remote_addr")%>谢谢阅读这段代码是获取客户端IP的，见图7。图7隐藏区域设置7、留言内容：在留言内容对应的单元格里添加文本区域在属性面板里为它改名为liuyan，

全部添加完的表单域，见图8。精品文档放心下载图8添加好的表单域三、定义提交按钮的服务器行为1“+”按钮选择菜单下的插入记录，见图9。谢谢阅读图9服务器行为－插入记录2、设置表单域与数据库字段名一一对应，在表单元素里分别依次选中元素，在下面的列里精品文档放心下载选择与数据库相对应的域，见图10。图10插入记录对话框四、定义表单提交的错误检查（行为面板）1、签写留言时为了避免有错误信息的写入，添加表单提交的错误检查功能。打开设计面板谢谢阅读下的行为面板，单击"+"选择检查表单，见图11。

图11设计－行为－检查表单感谢阅读2nameociqmail选择必需的和电子邮件，谢谢阅读homepage不选，liuyan选择必需的，见图12。谢谢阅读图12检查表单对话框第十二课--精品文档放心下载实现留言记录导航。一、控制一页显示留言数和翻页按钮感谢阅读量功能按钮，见图1。图1应用程序－记录集导航条/记录集导航状态1、光标移到页面下方，单击记录集导航状态就会弹出记录集导航状态对话框，见图2。谢谢阅读图2记录集导航状态对话框2、再回车另起一行，单击记录集导航条就会弹出记录导航对话框，记录导航条将以文字方精品文档放心下载式显示，见图3。图3记录集导航条对话框这样我们就完成了显示留言数量和翻页按钮，见图4。图4已加好翻面和显示留言数功能二、留言内容显示问题1、现在文件基本完成。当然，你会想到：如果我们输入一些代码，会怎么样呢？我们来输谢谢阅读入一行代码试一下，输入：<fontcolor="#0000FF"size="7">测试</font>，结果见图5，这谢谢阅读个当然是不安全的。也就是为什么决大部分论坛不支持的原因。精品文档放心下载图5测试结果再测试看看，用户的留言如果很长，表格会自动撑大（文字不会自动换行）！！见图6。谢谢阅读图6撑大的表格2.、为了解决以上问题，我们将原来绑定到留言单元格中的记录集字段精品文档放心下载（<%=(Recordset1.y_liuyan)%>）删除，添加“文本区域”，添加好后的文本区域见图7。谢谢阅读图7添加好的文本区域3、然后选中刚才添加的文本区域，在属性面板里点击打开动态数据对话框，添加动态留言精品文档放心下载文本字段y_liuyan，见图8。图8为文本区域添加动态数据谢谢阅读助DreamweaverMX的插件来实现的。第十三课精品文档放心下载工和充实和页面功能。一、实现留言用户的头像选择与显示1、打开签写留言页面文件，选其中一张用户头像图片，在属性面板里复制源文件URL链接精品文档放心下载地址，见图1。图1选中头像与图像属性再选中与头像对应的单选按钮在属性面板的选定值处粘贴刚才复制的图片URL感谢阅读钮名称为"tx"，初始状态－未选中，见图2。图2头像表单域选定值其它单选按钮设置同上（单选按钮－tx精品文档放心下载意图片路径与单选按钮的选定值一一对应。2touxiang字段，感谢阅读见图3。图3绑定头像动态数据按住鼠标拖动按住鼠标拖动touxiang字段到页面的头像视图上，再释放鼠标即可，拖动完成后属性面板感谢阅读上变成记录集中的touxiang动态字段了，这个字段是将来显示中选中头像按钮的值（头像精品文档放心下载路径）见图4。图4绑定动态数据拖动到头像上二、OICQ、E-mail、个人主页和IP显示的实现感谢阅读1E－mail精品文档放心下载来取代他们（点击此处下载图片）修改页面如图4右上角，修改表格，在单元格加上对应的图片。

2、设置OICQ图像的超级链接：选中OICQ图片在属性面板中为它添加链链，点击链接后的

浏览文件，见图5。图5为OICQ添加链接点击浏览文件后打开选择文件对话框，第一步选择文件名称为数据源，第二步选择y_oicqURL参数中会显示OICQURLOICQ的完整链接应该是下面URL的红色部份加绿色部感谢阅读分，.friend/user_show_info?ln=<%=(Recordset1.("y_oicq").Value)%>，见图6。谢谢阅读图6选择URL为数据源这个时候属性面板中的链接就会显示我们刚才添加的URL精品文档放心下载_blank就是链接在新窗口中打开，见图7。

图7目标改为_blank精品文档放心下载3、设置OICQ图像的号码提示信息：选中OICQ图像，切换到代码视图。将光标定位在谢谢阅读图8在title标签中添加记录集动态文本做这步的目的是为了实现鼠标移到OICQ图像上时将显示OICQ号码提示信息，否则不显示，谢谢阅读如图4、E－MAIL、主页和IP的图像的超级链接请参考OICQ精品文档放心下载息同样也在URL参数前加上下面的红色部分链接。E-mail链接：mailto:主页链接：IP链接：#感谢阅读的留言板了：）第十四课上节我们完善了显示留言页面和签写留言页面，从这节课开始做管理部分的页面。感谢阅读一、管理员登陆页面的实现1、新建管理员登陆页面，首先要插入一个表单，在表单内插入表格，表格布局见图1。感谢阅读图1管理员登陆界面2、添加服务器行为：打开应用程序下的服务器行为面板，单击按钮选择用户身份验证感谢阅读下的登录用户，见图2。图2服务器行为-登录用户3、用户登录设置：首先在使用链接验证里选择数据源（我们