推荐阅读
PRO/ENGINEER 2000i2新功能简述
美国PTC公司在2000年3月份向广大用户发布了PRO/ENGINEER2000i2。在很多用户还没有把PRO/ENGINEER2000i的行为建模等新技术深入了解的时候，PRO/ENGINEER2000i2又带着440多项改进和广大PRO/E用户见面了，到底性能有哪些改进呢？就让笔者把PRO/ENGINEER2000i2的新功能简单介绍给大家，不当之处，还望批评指正。 笔者认为2000i2和2000i相比，功能要强大的多。因为2000i2和2000i相比，有了更多人性化的设计，（我想这应该就是PTC大力宣传的柔性工程技术的一部分吧！）其中包括可视化检索（VisualSearch）、形状索引（ShapeIndexing）、特征灵活性（FeatureAgility）、行为建模技术（BehaviorModeling）、疲劳预测（FatiguePrediction）、CDRS渲染（CDRSRendering）等等。对于工程师来说，这些人性化的设计可以让工程师把时间更多的用在优化设计和产品的创新上，从而提高设计效率。 在这众多的新功能中，最让笔者欣喜的就是可视化检索（VisualSearch）了。如果您一直从事产品设计的话，您一定有过这样的经历：为了寻找一个其他工程师做好的零件或装配，需要从几十甚至上百个零件、装配中去不停的打开或关闭一个又一个窗口。这样的工作让人厌烦，并且效率极低。现在有了PRO/ENGINEER2000i2的可视化检索（VisualSearch），一切都简单多了。可视化检索功能就是让工程师在调用零件、装配、图纸时，可以预览即将调用的零件。更让人惊讶的是，您还可以和在PRO/E操作界面中一样用鼠标加Ctrl键去旋转放大或移动它去看更详细的结构。而完成一个超大型部件装配的预览只需要几秒种的时间，让人不敢相信。据PTC称，这得益于PTC新的远程数据调动技术和专用多线程图形技术。在您打开预览功能的同时，零件或装配的基本形状立即出现在您的眼前，它只是一个近似的表示，几秒种后，零件的细节越来越清晰。可视化检索具有智能化，并且支持多线程处理。当您缩放模型时，PRO/ENGINEER只会载入浏览区域内的部位的数据而忽略其它部位数据。您还可以在装配浏览窗口中直接选择子部件和零件，来查看它们的结 形状索引（ShapeIndexing）也是PTC正在申请专利的先进技术之一。它利用智能过滤技术，把当前的模型与数据库中的已有模型进行比较，找出那些具有相似几何体的模型，以提高设计的重用性。充分利用这项功能，可以使企业减少许多重复设计的工作，也为数据的管理带来了方便。对于交通产品，机械制造业等等来说意义重大，因为他们制造的许多产品都使用相似或相同的部件。有了这项功能，也许在新产品的开发中，您只要投入一半的工程技术人员就可以，另外一些部件只是需要调出来略微修改就可以用于新产品了。PTC称，由于利用了自动过滤和快速过滤技术，如果对一个包含300000个模型的企业数据库进行检索，只需要2秒就可以得到结果。这样的速度恐怕连最挑剔的用户也会无话可说。 特征灵活性（FeatureAgility）也是这次PTC大力宣传的技术热点。因为在当今的产品设计中，为了满足客户的要求，适应市场的变化，更改设计是司空见惯的事。而如何缩短更改周期就成了需要研究的问题。在PRO/ENGINEER2000i2中，增加了一种称为意向参考的新功能。使用这种功能，设计者可以定义特征建立的方式，利用这种定义方式，你可以灵活的构建特征，并且在特征发生更改时仍然保持你的设计意图，从而把设计人员从烦琐的设计更改中解放出来。在PRO/ENGINEER的用户中，经常会遇到这样的问题：当你试图修改一个特征时（特别是这个特征是较早构建的），经常会跳出参考丢失，后续特征不能构建的对话框。你需要手工重新定义每一个失败的特征直到零件完全再生成功。这种重复性的工作使设计人员不能全力投入设计，而必须不断考虑这类特征的不稳定性。利用意向参考，工程师可以更方便的指定特征建 行为建模技术是从PRO/ENGINEER2000i开始推广的新技术。这种行为建模技术被业界作为第五代CAD技术。它通过把导出值（比如容积）包含到参数特征中，再反过来使用它们生成和控制其它模型的几何图形。使用行为建模技术，用户首先要定义一个工程分析模型，其中包括名称、类型和定义。接着，他们要建立“操作”—定义和引用一类用在分析模型中的新特征，比如体积，然后为分析模型设置约束条件—包括目标值、一个参数的最小和最大值。系统会出现解决方案的图表，协助用户为设计选择最优方案。利用行为建模技术的自动求解能在最短的时间内，找到能满足工程标准的最佳设计。相对于传统的手工反复操作的方法，行为建模的全自动处理有很多优点。对于简单的问题可以方便的求解，复杂的问题则可以在很短的时间内完成寻找解决方案的任务。有了这个强大的功能，产品的设计创新才会更快更好。
蝴蝶结-变化结教程-中国结
蝴蝶编成的结式与蝙蝠形状类似，南方方言中蝴与福同音，如以蝴蝶配上铜钱即称福在眼前，若编上五双蝴蝶可寓意五福临门。 蝴蝶结是以盘长结为主体，再以两边耳翼上各编一个双钱结当蝴蝶的翅膀而成，此外还有一种编法，即将盘长结改为团锦结也很美观。
最新发布
使用Dreamweaver CS3 Spry 框架构建相册
要完成本教程, 您需要安装以下软件和文件: Spry Prerelease 1.4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ns.adobe.com/spry"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax Album Demo</title> <style type="text/css"> <!— #thumbContainer { position:absolute; left:23px; top:127px; width:437px; height:430px; z-index:1; } #main { position:absolute; left:476px; top:128px; width:491px; height:315px; z-index:2; } --> </style> </head> <body> <div id="thumbContainer"> </div> <div id="main"> </div> </body> </html> 您会发现您的代码与上述代码有所不同, 主要是由于两个 <div> 层的确切位置以及您在 Dreamweaver 中选择的首选项不同造成的。 不要求您的代码与上述示例完全相同。 注: 如果您希望与本教程完全相同的 HTML 代码, 只需复制上述代码示例, 然后选中 Dreamweaver“代码”窗口中的所有代码, 将教程中的代码粘贴上去。 我们已经创建了 HTML 页面, 现在可以使用 Ajax framework 的库中可用的函数设置动态功能。定义数据集并添加数据绑定 在构建 HTML 页面后, 下一步就是将 Ajax 脚本添加到项目。 我们将从添加 XML 数据集开始。 但在我们准备好这样做之前, 先看看 XML 数据, 得到关于其用法的感觉。 使用 Dreamweaver 打开源文件文件夹中的 photos.xml 文件。 如果您研究 XML 文件的一个节点, 您会发现以下标签: <photo path = "travel_01.jpg" width = "350" height = "262" thumbpath = "travel_01.jpg" thumbwidth = "75" thumbheight = "56"> </photo> 请注意, XML 节点“photo”包含 HTML <img> 标签所需的全部基本信息。 您将使用此数据动态构建一系列用于显示相册的 HTML <img> 标签。 定义数据集 我们需要做的第一件事就是将 sprydata.js 和 xpath.js 文件链接到您创建的 gallery.htm 文件。 1. 在“代码”窗口中, 将以下代码键入 HTML 的 <head> 部分: <script type="text/javascript" src="includes/xpath.js"></script> <script type="text/javascript" src="includes/sprydata.js"></script> 注: 您已将 xpath.js 和 sprydata.js 文件移动到示例文件夹的子文件夹中, 请确保 src 路径与项目的文件夹结构匹配。 现在, 我们已准备好创建数据集。 使用 JavaScript 调用 sprydata.js 文件, 即完成此操作。 请执行下列步骤: 2. 在 HTML 页面的 <head> 部分, 添加 <script> 标签。 键入以下代码, 将其添加到将创建数据集的 JavaScript 调用。 <script type="text/javascript"> var dsGallery = new Spry.Data.XMLDataSet("photos.xml", "gallery/photos/photo"); </script> 如果未准备好, 现在可以保存文件。 通过查看您的“代码”窗口并将代码与以下 HTML 页面示例对比, 检查您的进度: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ns.adobe.com/spry"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax Album Demo</title> <script type="text/javascript" src="includes/xpath.js"></script> <script type="text/javascript" src="includes/sprydata.js"></script> <script type="text/javascript"> var dsGallery = new Spry.Data.XMLDataSet("photos.xml", "gallery/photos/photo"); </script> <style type="text/css"> <!-- #main { position:absolute; left:476px; top:128px; width:491px; height:315px; z-index:2; } #thumbContainer { left:23px; top:127px; width:437px; height:430px; z-index:1; position:absolute; } --> </style> </head> <body> <div id="thumbContainer"> </div> <div id="main"> </div> </body> </html> 我们刚在 <script> 标签之间添加的代码创建名为“dsGallery”的变量, 这就是数据集的名称。 “Spry.Data.XMLdataset”是创建数据集的函数。 文件“photos.xml”是包含相片数据的 XML 文件的名称。 “gallery/photos/photo”部分描述 XML 中实际数据开始的路径。 代码的此数据集部分代表我们查看的示例 XML 节点中的三个标签。 这表示数据集的数据在 photos.xml 文档中的 <photo> 节点内开始。 这就是我们为定义数据集需要添加的所有脚本! 添加数据绑定 现在, 我们已经定义了数据集, 可以将数据绑定添加到 HTML 页面。 我们从将缩略图添加到我们在前面创建的“thumbcontainer”<div>开始。 3. 通过在 <div> 标签之间键入以下内容, 将图像标签插入“thumbcontainer”DIV 中: <img src=""> 4. 然后, 将图像 URL 的数据引用添加到 src 属性, 如下所示: <img src="thumbnails/{@thumbpath}" /> “src”字段指向缩略图文件夹, 然后抽出 XML 文件中“thumbpath”属性的 XML 值。 这将完成缩略图图像的路径。 @ 符号用于名称之前, 原因是此值为图像标签的一个属性。 例如, 要从 <image thumbpath="foo.jpg">链接到名为“foo.jpg”的图像文件, 请使用此语法: {@thumbpath}。 这不同于键入的标签值, 后者应为: <thumbpath>foo.jpg</thumbpath>。 如果没有“@”, 则应为 {thumbpath}。 现在已设置缩略图图像。 现在, 我们通过将“spry:repeat”属性添加到缩略图图像标签设置要重复的图像。 这将使图像标签在整个数据集重复。 5. 在 <img> 标签的缩略图中, 添加以下“spry:repeat”属性: <img src="thumbnails/{@thumbpath}" spry:repeat="dsGallery" /> 6. 在“thumbContainer”<div> 标签的缩略图中, 添加以下“spry:region”属性: <div id="thumbContainer" spry:region="dsGallery"> 7. 然后, 找到“main”<div> 标签, 并添加“spry:detailregion”属性: <div id="main" spry:detailregion="dsGallery"> 此时, 您的代码应类似于以下示例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ns.adobe.com/spry"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax Album Demo</title> <script type="text/javascript" src="includes/xpath.js"></script> <script type="text/javascript" src="includes/sprydata.js"></script> <script type="text/javascript"> var dsGallery = new Spry.Data.XMLDataSet("photos.xml", "gallery/photos/photo"); </script> <style type="text/css"> <!-- #main { position:absolute; left:476px; top:128px; width:491px; height:315px; z-index:2; } #thumbContainer { left:23px; top:127px; width:437px; height:430px; z-index:1; position:absolute; } --> </style> </head> <body> <div id="thumbContainer" spry:region="dsGallery"> <img src="thumbnails/{@thumbpath}" spry:repeat="dsGallery" /> </div> <div id="main" spry:detailregion="dsGallery"> </div> </body> </html> 在两个 <div> 标签中, “spry:region”属性告诉 Ajax framework 每个 <div> 层都包含动态数据。 <img> 标签中的“spry:repeat”属性选择动态区域应为 dsGallery 数据集中的每一行创建一个图像。 这将使页面为数据集中的每个缩略图生成一个图像。 现在, 当您选择“文件”>“在浏览器中预览”时, 所有缩略图图像都将显示在页面中。 设置主图像画面 下面这一部分看起来很熟悉, 因为它与我们刚完成的步骤非常相似。 8. 在“main”<div> 标签中, 添加一个图像标签。 再添加一个代码以将图像名称显示在主图像下方, 如下所示: <img src="images/{@path}"><br/>Name:{@path} 请注意, 此代码与缩略图代码的唯一区别在于我们使用 {@path} 而不是 {@thumbpath}。 由于这些值在 XML 文件中完全相同, 我们可以使两者中任何一个 - 但为了清晰和符合最佳实践, 我们将使用正确的属性。 现在, 基本的相册功能已经设置完。 再次选择“文件”>“在浏览器中预览”, 您将看到第一个主图像和所有缩略图图像的页面显示。 但是, 如果您单击缩略图图像, 不会发生任何事情。 我们下一步的目标就是添加一个功能, 即当用户单击缩略图图像时, 该图像对应的大图将更新主 <div> 区域。 为此, 我们需要在缩略图图像和主图像之间建立关系, 如下所示: 9. 在“代码”窗口中, 将“spry:setrow”属性添加到缩略图 <img> 标签: spry:setrow="dsGallery" 您的 HTML 代码应类似于: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ns.adobe.com/spry"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax Album Demo</title> <script type="text/javascript" src="includes/xpath.js"></script> <script type="text/javascript" src="includes/sprydata.js"></script> <script type="text/javascript"> var dsGallery = new Spry.Data.XMLDataSet("photos.xml", "gallery/photos/photo"); </script> <style type="text/css"> <!-- #main { position:absolute; left:476px; top:128px; width:491px; height:315px; z-index:2; } #thumbContainer { left:23px; top:127px; width:437px; height:430px; z-index:1; position:absolute; } --> </style> </head> <body> <div id="thumbContainer"spry:region="dsGallery"> <img src="thumbnails/{@thumbpath}" spry:repeat="dsGallery" spry:setrow="dsGallery"/> </div> <div id="main"spry:detailregion="dsGallery"> <img src="images/{@path}"><br/>Name:{@path} </div> </body> </html> 让我们现在看看发生了什么情况: 当用户单击缩略图时, “spry:setrow”属性告诉浏览器将数据集的 RowID 设置为 CurrentRow。 “spry:detailregion”属性使用此值更新, 然后再使用 XML 文件中该节点 ID 的图像名称更新主图像的路径。 现在显示新的主图像。 当您在浏览器中预览您的页面时, 您会发现相册的功能现在已经很不错, 但缩略图在浏览器窗口顶部显示混乱。 不必担心 HTML 页面中的布局, 我们将在本教程的下一部分解决这个问题。使用 CSS 控制相册的布局 我们将使用某些 CSS 代码限制缩略图图像, 使其正确显示。 通过为缩略图添加浮动规则和大小规则可以实现这一目标, 从而使缩略图图像限制在缩略图容器 <div> 标签中。 1. 在 HTML 文档的 <head> 部分中找到样式标签。 添加迟到 CSS: img.thumbs { float:left; height:60px; width:60px; margin-right: 2px; margin-bottom: 2px; border: solid black 1px; } “float:left;”代码强制图像留在缩略图 <div> 内。 高度和宽度值定义缩略图图像的大小。 您可以根据需要任意调整或删除这些值, 但请记住, 指定一致的高度和宽度会使图像块显示令人惬意的一致风格, 即使某些缩略图有轻微拉伸。 2. 下一步, 找到缩略图图像的图标, 然后使用值“thumbs”添加类属性, 类似于: <img src="thumbnails/{@thumbpath}" spry:repeat="dsGallery" class="thumbs" onclick="dsGallery.setCurrentRow('{ds_RowID}');" /> 代码应类似于: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ns.adobe.com/spry"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax Album Demo</title> <script type="text/javascript" src="includes/xpath.js"> </script> <script type="text/javascript" src="includes/sprydata.js"> </script> <script type="text/javascript"> var dsGallery = new Spry.Data.XMLDataSet("photos.xml","gallery/photos/photo"); </script> <style type="text/css"> <!-- img.thumbs { float:left; height:60px; width:60px; margin-right: 2px; margin-bottom: 2px; border: solid black 1px; } #main { position:absolute; left:476px; top:128px; width:491px; height:315px; z-index:2; } #thumbContainer { position:absolute; left:23px; top:127px; width:437px; height:430px; z-index:1; } --> </style> </head> <body> <div id="thumbContainer" spry:region="dsGallery"> <img src="thumbnails/{@thumbpath}" spry:repeat="dsGallery" class="thumbs" onclick="dsGallery.setCurrentRow('{ds_RowID}');" /> </div> <div id="main" spry:detailregion="dsGallery"> <img src="images/{@path}"/><br />Name:{@path} </div> </body> </html> 在浏览器中预览页面并验证图像是否正确处于 <div> 区域中 - 使相册页面 (gallery.htm) 中的图像像本教程完成版本一样显示 (位于示例文件夹中)。 要对比, 请打开一个新浏览器窗口, 然后选择“文件”>“打开文件”, 再导航到 gallery_finished.htm 文件以并排观看页面。下一步工作 在完成本教程中的步骤后, 您可能发现创建功能完整、外观漂亮的相册非常容易 - 只需使用几行代码。 此设计的妙处在于非常灵活, 可针对您的项目进行改编。 尝试移动 <div> 和调整其大小以创建不同的页面布局。 使用更多的 CSS 添加其他样式, 以增强外观。 如果您使用关于每个图像的描述或元数据更新 XML 文件, 也可以显示这些字幕。 尝试将高度和宽度数据添加到页面。 当您更改缩略图的高度和宽度后, 看看效果。 为本教程准备示例文件时, 我使用了 Photoshop CS2 生成 Flash 样式的 Web 相片库。 在导出此相片库后, 我复制了“thumbnails”和“images”文件夹以及 photos.xml 文件, 并将其用于此项目。 在构建您自己的相册时, 可以使用 Photoshop CS2 创建您自己的文件, 然后将其如本教程所示进行运用。 如果您认真执行这些步骤, 应能够很容易地使用您在 Photoshop 中创建的文件替换本教程中的图像和 XML 文件, 网页将正确显示您的新图像。 当您复制文件或更新 XML 及 HTML 页面以反映站点结构时, 只需确保命名约定和文件夹结构一致。 注: Safari 浏览器的当前版本在节点命名方面有一些已知的问题, 可能使相册页面无法正确显示, 除非采取其他办法。 如果您要为 Safari 用户创建站点, 则需要适当更新 XML 文件才能正确显示相册。发生这种问题是因为 Safari 浏览器会将名为“image”的 XML 节点转换为实际的 <img> 标签! 如果您遇到这种问题, 请通过将 <image> XML 节点更改为其他内容 (例如 <photo>) 来更新您的 XML 文件。 在进行此更改后, 您的 XML 文件将类似于: <gallery> <images> <photo path="... 在本教程中, 我们已经转换 XML <images> 和 <image> 节点, 因此, 该代码在所有浏览器中都能工作。 如果您未来在使用 Safari 浏览器预览相册时发现奇怪的画面, 但请记住此重命名问题。 将项目提高到下一个水平 现在, 相册已经具备完整功能, 对多数用户已能很好地工作。 但是, 为了简便起见, 我直接将一些值硬编码到了 HTML 页面, 通过在 XML 中指定此信息可以更加灵活地处理; 特别地, 在本教程中, 图像文件的文件夹路径是硬编码的。 如果您研究这些文件, 可能已发现此文件夹信息已经存在于 XML 文件中, 但在 XML 的根级 <gallery> 节点中存储为标签。 在练习时, 您可以尝试通过在 HTML 中将硬编码的值换出到 XML 文件的节点使此代码更具通用性和可再用性。 文件中还有很多其他数据点可用于进一步改进相册。 为了使用此数据, 您将需要创建另一个数据集。 多个数据集 如果您现在停止模仿本教程, 您就有功能完整的相册可以通过更改 CSS 样式来更新 (根据需要), 还可以通过生成新图像、缩略图和 XML 文件来创建新的图库。 如果您要继续模仿本教程, 我将添加另一个数据集, 并将某些相册信息添加到页面顶部。 我在本教程开头曾简单地提及一个页面中可以使用多个数据集。 为 photos.xml 文件创建第二个数据集将使您能够访问额外数据。完成这一任务后, 您可以很容易地在页面上显示这些数据。 请注意, 默认情况下, 除文件夹路径外, 其他数据点 (如字体、颜色、边框、摄影师姓名和日期) 也都包括在文件中。 XML 文件中的值可以编辑或更改。 节点还可以根据需要展开。例如“description”属性可以添加到每个图像节点以包含每个图像的字幕。 在添加此属性后, 您可以使用要显示在每个主图像下方的描述属性 (而不是图像名称)。 Photoshop CS2 Web 相册功能也可用于设置其他元数据点。 让我们看看这一点是如何工作的: 1. 在文档开头创建第二个数据集。 它类似于第一个数据集, 只是 XML 文件夹路径将仅指向 XML 的根。 此新数据集的名称为“dsData”。 请参见以下突出显示的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ns.adobe.com/spry"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax Album Demo</title> <script type="text/javascript" src="includes/xpath.js"></script> <script type="text/javascript" src="includes/sprydata.js"></script> <script type="text/javascript"> var dsGallery = new Spry.Data.XMLDataSet("photos.xml","gallery/photos/photo"); var dsData = new Spry.Data.XMLDataSet("photos.xml","gallery"); </script> <style type="text/css"> <!-- Not showing the styles in the tutorial to save space... --> </style> </head> <body> <div id="thumbContainer" spry:region="dsGallery"> <img src="thumbnails/{@thumbpath}" spry:repeat="dsGallery" class="thumbs" onclick="dsGallery.setCurrentRow('{ds_RowID}');" /> </div> <div id="main" spry:detailregion="dsGallery"> <img src="images/{@path}"/><br />Name:{@path} </div> </body> </html> 在添加此新数据集后, 您就准备好在相册中使用这些新的数据点。 从将硬编码的图像文件夹路径替换成 XML 文件中使用的值, 如以下步骤所示: 2. 在缩略图“src”路径中, 删除“thumbnails/”并将其替换为 XML 值。 确保删除斜杠, 因为该字符已存储在路径的 XML 值中。 3. 对主 <img> 标签重复步骤 2。 从“src”字段删除“images/”部分并将其替换为 XML 值。 4. 下一部分需要告诉动态区域您将使用新数据集中的数据。 将数据集名称添加到 spry:region 属性, 以空格隔开, 如以下代码示例所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ns.adobe.com/spry"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax Album Demo</title> <script type="text/javascript" src="includes/xpath.js"></script> <script type="text/javascript" src="includes/sprydata.js"></script> <script type="text/javascript"> var dsGallery = new Spry.Data.XMLDataSet("photos.xml","gallery/photos/photo"); var dsData = new Spry.Data.XMLDataSet("photos.xml","gallery"); </script> <style type="text/css"> <!-- Not showing the CSS styles in the tutorial to save space... --> </style> </head> <body> <div id="thumbContainer" spry:region="dsGallery dsData"> <img src="{dsData::thumbnail/@base}{@thumbpath}" spry:repeat="dsGallery" class="thumbs" onclick="dsGallery.setCurrentRow('{ds_RowID}');" /> </div> <div id="main" spry:detailregion="dsGallery dsData"> <img src="{dsData::large/@base}{@path}"/><br />Name:{@path} </div> </body> </html> 要了解如何指定动态数据, 以下是另一个示例: 不使用 {dsData::large/@base} 您可以这样考虑它: {dataset::XMLTagName/@XMLTagAttribute} 此时, 我们已准备好将站点信息添加到页面顶部。 5. 在页面上画一个新层 <div>。 随意放置该层。 在示例文件内本项目的完成版本中, 我将 <div> 置于页面中心的顶部。 将新的 <div> 层命名为“header”。 6. 通过添加 spry:region 属性指定新层是一个 Spry 区域。 通过将“dsData”设置为 spry:region 的值绑定“dsData”数据集, 如以下代码所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ns.adobe.com/spry"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax Album Demo</title> <script type="text/javascript" src="includes/xpath.js"></script> <script type="text/javascript" src="includes/sprydata.js"></script> <script type="text/javascript"> var dsGallery = new Spry.Data.XMLDataSet("photos.xml","gallery/photos/photo"); var dsData = new Spry.Data.XMLDataSet("photos.xml","gallery"); </script> <style type="text/css"> <!-- #header { position:absolute; left:313px; top:14px; width:295px; height:95px; z-index:3; } --> </style> </head> <body> <div id="header" spry:region="dsData"></div> <div id="thumbContainer" spry:region="dsGallery dsData"> <img src="{dsData::thumbnail/@base}{@thumbpath}" spry:repeat="dsGallery" class="thumbs" onclick="dsGallery.setCurrentRow('{ds_RowID}');" /> </div> <div id="main" spry:detailregion="dsGallery dsData"> <img src="{dsData::large/@base}{@path}"/><br />Name:{@path} </div> </body> </html> 现在, 我们可以将动态值添加到此区域。 在示例文件内包含的 XML 文件中, 以下值可用: * 站点名称 * 摄影师 * 联系信息 * 电子邮件 * 选择日期 将这些值添加到文档, 使它们显示为相册的一部分。 因为只有一个数据集与此区域绑定, 可以使用简单的 {tagname} 语法。 其唯一例外就是数据, 这是 <gallery> 标签的一个属性。 7. 对于上述每个值, 创建一个新标签并为该标签输入动态值: 站点名称: {sitename}。 请记住, 标签的属性记为类似于: {@attributeName}。更新您的代码, 如以下突出显示的标签所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ns.adobe.com/spry"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax Album Demo</title> <script type="text/javascript" src="includes/xpath.js"></script> <script type="text/javascript" src="includes/sprydata.js"></script> <script type="text/javascript"> var dsGallery = new Spry.Data.XMLDataSet("photos.xml","gallery/photos/photo"); var dsData = new Spry.Data.XMLDataSet("photos.xml","gallery"); </script> <style type="text/css"> <!-- Not showing the styles in the tutorial to save space... --> </style> </head> <body> <div id="header" spry:region="dsData"> <p>Site Name: {sitename}<br /> Photographer: {photographer}<br /> Website: {contactinfo}<br /> Email: {email}<br /> Date: {@date} </p> </div> <div id="thumbContainer" spry:region="dsGallery dsData"> <img src="{dsData::thumbnail/@base}{@thumbpath}" spry:repeat="dsGallery"class="thumbs" onclick="dsGallery.setCurrentRow('{ds_RowID}');" /> </div> <div id="main" spry:detailregion="dsGallery dsData"> <img src="{dsData::large/@base}{@path}"/><br />Name:{@path} </div> </body> </html> 在浏览器中预览您的页面, 并检查两次, 看这个新标题数据是否显示正确。 对于最后一个步骤, 我们将使网站和电子邮件值成为真正的超链接。 8. 将 {contactinfo} 字段在 <a> 中换行, 并将 href 属性设置为: {contactinfo}。 9. 也将 {email} 文本在 <a> 中换行。 将 href 属性设置为: mailto:{email} 您的最终 HTML 页面应类似于: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ns.adobe.com/spry"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax Album Demo</title> <script type="text/javascript" src="includes/xpath.js"></script> <script type="text/javascript" src="includes/sprydata.js"></script> <script type="text/javascript"> var dsGallery = new Spry.Data.XMLDataSet("photos.xml","gallery/photos/photo"); var dsData = new Spry.Data.XMLDataSet("photos.xml","gallery"); </script> <style type="text/css"> <!-- img.thumbs { float:left; height: 60px; width:60px; margin-right: 2px; margin-bottom: 2px; border: solid black 1px; } #main { position:absolute; left:476px; top:128px; width:491px; height:315px; z-index:2; } #thumbContainer { left:23px; top:127px; width:437px; height:430px; z-index:1; position:absolute; } #header { position:absolute; left:313px; top:14px; width:295px; height:95px; z-index:3; } --> </style> </head> <body> <div id="header" spry:region="dsData"> <p>Site Name: {sitename}<br /> Photographer: {photographer}<br /> Website: <a href="{contactinfo}">{contactinfo}</a><br /> Email: <a href="mailto:{email}">{email}</a><br /> Date: {@date} </p> </div> <div id="thumbContainer" spry:region="dsGallery dsData"> <img src="{dsData::thumbnail/@base}{@thumbpath}" spry:repeat="dsGallery" class="thumbs" onclick="dsGallery.setCurrentRow('{ds_RowID}');" /> </div> <div id="main" spry:detailregion="dsGallery dsData"> <img src="{dsData::large/@base}{@path}"/><br />Name:{@path} </div> </body> </html> 在浏览器中预览您的页面并验证页眉中的链接正常工作。 祝贺您! 您只用 60 行代码 - 主要是 CSS - 就已经成功地创建了一个 Spry Web 相册! 使用 Spry Framework 和一些简单的标记, 您已了解可以如何创建动态相册。 稍加修改, 就可以使用本教程中介绍的方法创建各种各样的网页。 例如, 您可以创建显示动态文本而不是图像的页面。 只需增加几个步骤, 您就可以循环读取表格的 <tr> 标签以生成动态表格。 Spry 还可以用于方便地动态填充表单元素。 在尝试使用后, 您将发现 Spry Framework 使用清晰的标记提供了优秀的站点功能。 通过将 Ajax 添加到您的站点, 可以开发灵活而易于更新的页面。 没有做不到, 只有想不到!
基础（23）如何快速在Dreamweaver CS3中编辑网页标签
图上画红框的地方，就是我们今天的主角了。我们先看一下“环绕标签”。在页面上随便打入几个字，选中它们，在右键菜单中选择“环绕标签”，在弹出的环绕标签对话框中输入“＜strong＞”（不包括引号），然后回车。之前被选中的文字是不是已经变成粗体了，到源代码看一下，我们所选中的文字是不是已经被＜strong＞标签包围了？大家可以试着再加入其它的一些标签，如：＜a＞，＜p＞。这里也可以直接输入属性。如：＜p style="color:#CC0000"＞。这里仅大概说明一下，如有疑问，请查看Dreamweaver CS3的帮助。下面说一下标签选择器的应用方法。我们将光标移动到刚才加粗的文字里，会发现在＜body＞的后面多了个＜strong＞。这就是说光标所在处的这些文字的外面有＜strong＞的标签，在＜strong＞标签外有＜body＞标签。下面大家再添加一个表格，把光标移动到表格内，看看标签的结构。相信对HTML有些基础的朋友都应该很轻易理解的。假设我们现在要插入一个表格，并将这个表格用CSS来将它下移10个象素。先插入一个表格，然后交光标移动到表格内。这时在标签选择器上应该可以看到这样的字样＜body＞＜table＞＜tr＞＜td＞。然后在table标签上点鼠标右键，会看到有四个选项。删除标签、编辑标签、设置类、设置ID。删除标签：即是将标签删除。（有一些非凡的标签是不能删除的。例如：＜table＞、＜tr＞、＜td＞、＜body＞...) 编辑标签：给标签附加属性、修改属性等。 设置类：给这个标签附予一个类。（即CSS的类别） 设置ID：给这个标签附予一个ID。（即CSS的ID）在这里，我们选择编辑标签，然后在后面加上属性style="margin-top:10px"和正常书写源代码的方式是一样的。然后按下回车。就完成了编辑。假如在Dreamweaver CS3里看不到效果，请用浏览器预览。还有另外一种方法，也许你会喜欢。选择窗口→标签检查器当你选择某一个标签后，这里会显示出当前选择标签的所有属性。也可以很快地在这里进行编辑。在这里输入的属性不用包括引号，编辑后按回车确定。这里我们只将方法告诉大家，希望大家能够从中受益。
基础（24）用Dreamweaver CS3 巧妙格式化您的表格
对齐：选定表格后，通过属性面板中Align(对齐)设置表格在网页中对齐方式：居中、居左或居右，假如你要使表格想去哪就去哪，想不去哪就不去哪，还得另想高招：1、将表格放置到层中；2、表格中嵌套表格。CellPad(边距)和CellSpace(间距)：搞清楚两个概念是要害：边距是指单元格中文本与单元格边框之间的距离，而间距是指单元格之间的距离，如图所示，两者的单位都是象素，默认情况下以间距2，边距1的设置显示表格。表格的边框：可设置颜色和宽度，在“Border(边框)”域中默认值是1，增大数值可使边框宽度增加，形成立体边框，若输入的数值为“0”，则在浏览网页时不显示的表格的边框，只显示其中内容，这在网页设计中是应用比较多的。通过“BrdrColor(边框颜色)”域设置边框的颜色。表格背景：在“BgColor(背景颜色)”和“BgImage(背景图象)”域中对背景可设置颜色和图象，在设置背景图象时若表格大于图象，则图象是重复出现的。有时可形成奇异效果。二、格式化单元格单元格的格式化包括单元格及其中内容的格式化，通过单元格的属性面板进行设置，如图所示。单元格中文本：主要对字体、字号、颜色、对齐方式、是否换行等设置。在这里非凡说明的是“NoWrap(换行)”的设置，默认单元格中的文本“换行”的，假如内容较长且要求相对完整，那么就要设置为“不换行”，选中“NoWrap”后的复选框即可，这样在网页浏览时表格的宽度可能超过显示器屏幕。选中“Header”后复选框可将光标所在行设置为标题：文本加粗并自动居中。单元格背景：在“Bg(背景)”域中给单元格加上背景颜色或图象，方法与表格背景的设置相同。单元格边框：在“Border(边框)”域中设置单元格的颜色。三、使用设计方案格式化表格使用“格式化表格”命令可以向表格快速应用一个预置的设计。您可选择选项定制该设计。若要使用预置设计：1、选定表格然后选择“Commands/Format Table”。2、在出现的对话框左边列表中选择一个设计方案，右边将显示该方案的一个样本。如图所示：3、若要进一步定制设计，可以对“RowColor(行颜色)”，“TopRow(首行)”及“LeftCol(首列)”进行修改。4、若要修改边框宽度，在“Border(边框)”域中输入一个数值，假如不需要边框则输入0。5、若要对表格单元格(td标签)而不是表格行(tr标签)应用设计，请选择“Apply All Attributes to TD Tags Instead of TR Tags(将所有属性应用到TD标签而不是TR标签)”。表格单元格格式化会覆盖您为该单元格所在行指定的一切格式。然而，假如您需要行中的所有单元格都格式化到一种格式，那么最好是格式化该行而不是该行的每个单元格，这样可以得到更加清楚而简练的HTML源代码。6、点击“应用”或“确定”以使用选定的设计格式化表格。四、格式化表格与单元格中的几个顺序问题假如同时设置了表格背景和单元格背景，会出现何种现象呢？即那一种设置优先呢？当在“文档”窗口中格式化表格时，您可以定义要应用到整个表格或是选定的行，列，单元格的属性。当某属性，如背景颜色或对齐方式，对整个表格设置与对表格某些单元格的设置不同时，理解Dreamweaver如何解释HTML源代码就很有用了。当同样的属性在表格中被多于一次设置时，Dreamweaver将采用如下的解释方式：单元格格式(td标签的一部分)优先权高于行格式(tr标签)，而行格式的优先权高于表格格式(table标签)。所以，假如您为一个单元格指定其背景色为蓝色，而将整个表格背景色设置为黄色，该蓝色的单元格并不会变为黄色，因为td标签的优先权高于table标签。
基础（25）Dreamweaver CS3中使用层的一些技巧和建议
Dreamweaver CS3层的八条定律 当然，这些并非真正的定律，而只是一些有益的忠告，使你免陷于使用层时可能的困顿中。原来有九条定律的，我们精简掉一条，还有下面的八条：1. 假如你要嵌套层，决不要使用多重父层，应共享一个共同的单一父层。假如你必须使用未在样式表中作完全限定的嵌套层，应在 Netscape4x 中做经常的检查。2. 总是将文本放在层中的一个表格里 - 表格应该是绝对大小的（以像素为单位，而不是百分比）且不大于层，不过主表中的嵌套表可以设置为相对的百分比大小。这样做可以防止当窗口大小改变时，NC4xx会重新调整文字到不可预期的位置。3. 决不放置层在表格中。Netscape 4x 将不能正确地理解表格中的层。 4. 总是使用 Netscape Resize Fix 这个插件于任何具有层或 CSS 样式的页面。5. 不要期望当浏览器窗口大小或屏幕分辨率发生变化后，绝对定位的层仍能保持与居中的表格或页面内容的对齐。有插件可用来动态的实现这个效果。6. 不要试图在层中放置滚动条（用 overflow 属性）- 使用一个 DHTML 滚动器或者 Project Seven IFRAME 技术来代替，对于Netscape 4.x用户，可以在IFRAME中设置一个特定的弹出页面。 7. 决不给层和一幅图像相同的命名 - 每个层应该有自己唯一的并区别于页面中的其它元素的名字（事实上，你不应该让两个具有相同的名称的元素出现在同一个页面中）。 8. 不要直接对层应用事件/行为。它们将不能跨浏览器地工作。应用它们到层中的内容（链接或图像）而不是层自身。
基础（26）如何在Dreamweaver CS3中做自定义弹出窗口
我们在浏览一些网页时，经常会看到有的网页弹出一些信息窗口或浏览器窗口来显示一些网站公告或一些广告信息，想知道这些窗口是怎么制作出来的吗？假如你还不曾知道，那么就请看本文如何利用Dreamweaver MX 2004 来制作这些弹出窗口的方法吧！ 一、弹出信息窗口 启动Dreamweaver MX 2004，打开要加载弹出窗口的网页或新建一个网页。按下Shift+F3命令，打开行为设置面板。图1 行为面板 （1）点击"+"号 （2）在弹出的菜单中选择"弹出信息"项图2 弹出信息 （1）在空白区域输入弹出信息窗口中所要表达的内容。 （2）按下"确定"按钮返回。图3 选定动作 这个时候我们发现行为设置面板的内容已经起了一点变化。其中事件下的"OnLoad"表示打开当前网页即弹出该窗口。 假如不想在打开网页的时候马上打开窗口，那么就可以点击事件的向下箭头。图4 各种事件 在按下向下箭头打开的菜单中我们就可以设置其它响应方式，例如"OnClick"表示鼠标点击时弹出该信息窗口、"onUnload"表示关闭当前网页弹出信息框。 现在我们保存网页，按下F12浏览一下，怎么样是不是在打开该网页的时候也显示了如图5所示的信息窗口。图5 信息窗口 二、弹出网页窗口 弹出网页窗口的制作过程与信息窗口有点相似，首先我们得预备好浏览当前网页时要打开的网页，然后在图1中选择打开"浏览器窗口"命令。 （1）点击"浏览"按钮选择要弹出的网页窗口 （2）设置打开窗口的固定宽度和高度 （3）设置属性，在这里可以包括是否显示菜单栏、工具栏、滚动条、调整大小手柄等内容。图6 窗口设定 （4）设置打开的窗口名称 做好这些设置之后按下"确定"按钮，然后保存网页，我们现在预览一下，怎么样在浏览当前网页的内容同时是不是又弹出一个网页窗口。 合理应用弹出窗口可以对起到事半功倍的效果，例如宣传网站、发布网站的公告、制作弹出广告等。但凡事都应该有一个度，在同一个网页中建议大家最好只设置一个弹出窗口，因为过多的弹出窗口将影响用户浏览的爱好，那样就会起到得不偿失的效果。
基础（27）玩转Dreamweaver CS3中的层及应用
层（Layer）是一种 HTML 页面元素，您可以将它定位在页面上的任意位置。层可以包含文本、图像或其它 HTML 文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。首先，请看下图： 我们首先来做一个层 1、 在「窗口」菜单＞选“层”，或点「插入」菜单＞布局对象＞选“层”。 2、 在页面中显示一个层。 3、 通过四周的黑色调整柄拖动控制层的大小 4、 拖动层左上角的选择柄可以移动层的位置。 5、 单击层标记可以选中一个层。 6、 在层中可以插入其他任何元素包括图片文字链接表格等。 一个页面中可以画出很多的层，这些层都会列在层面板中。层之间也可以相互重叠。层面板可以通过菜单「窗口」菜单＞选“层”打开。 这里我们需要对几个概念进行解释。层有隐藏和显示的属性。这是层的一个重要属性和以后说到的行为相结合就变成了重要的参数。单击层面板列表的左边，可以打开关闭眼睛。眼睛挣开和关闭表示层的显示和隐藏。 层还有一个概念就是层数，层数决定了重叠时哪个层在上面哪个层在下面。 比如层数为２的层在层数为１的层的上面。改变层数就可以改变层的重叠顺序。 层面板上面还有一个参数就是防止层重叠。一旦选中，页面中层就无法重叠了。 层还有一种父子关系也就是隶属关系。在层面板中是这样表示的。 图中Layer2挂在Layer1的下面。Layer1为父层，Layer2为子层。在页面中拖动Layer1，Layer2也跟着动起来。因为他们已经链在一起了，并且Layer2隶属于Layer1。父层移动会影响到子层。移动layer2层，Layer1层不动。也就是子层不会影响到父层。 要建立这样的一种隶属关系方法很简单。在层面板中按Ctrl键将子层拖拽到父层即可。 ［层和表格之间转换］由于层在网页布局上非常方便，所以，一些人可能不喜欢使用表格或“布局”模式来创建自己的页面，而是喜欢通过层来进行设计。Dreamweaver MX 2004可以使用层来创建自己的布局，然后将它们转换为表格。 在转换为表格之前，请确保层没有重叠。请执行以下操作：选择“修改”＞“转换”＞“层到表格”。即可显示“转换层为表格”对话框。
基础（28）在Dreamweaver CS3中实现不同分辨率下的层定位
1．首先你需要到www．macromedia．com网站上去下载一个名为CenterLayers 2．3的插件(下载前得先在网站上注册)，大小为8K。然后用Exention manager将插件装上(不要告诉我你用的是Frontpage哟)。重新启动DW使插件起作用，设定页面中需要定位的层为Layer1，再新建一个透明层，设为Layer2并使其移至窗口中心，将代表layer1的黄色标签选中后拖至Layer2中，调整好layer1的位置。2．选中layer2，从Window菜单中点Behaviors打开“行为控制面板”，单击“+”号，可以看到centerlayer 2．3命令已经出现在打开的菜单中，单击此命令，出现一对话框，在name layers中选中layer2,下面的center horizontal和center vertical选项表示可以使层定位在浏览器窗口的水平和垂直的中心的位置，若两者都打上钩，则layer2层就会处于窗口的正中心，我们在这儿只需要水平位置上的定位，就选中center horizontal吧，再点OK完成Javascript的创建。3．你是否有些晕？呵呵，马上就好了，要有些耐心。接下来我们要进行必要的调整，因为Behaviors面板默认的事件属性是onclick，也就是说此时只有当你预览时点击layer2才会使层移至窗口中心，所以我们需要到源代码中将层代码＜div＞中的onClick=“BW＿centerLayers()”选中移至“＜body”和“＞”代码的中间，再将onclick改名为onload，即让BW＿centerLayers()函数在页面加载时即执行，至此我们基本上完成了层layer1的定位。4．还有一点，当浏览器默认打开值不是最大化而需要手工点“最大化”按钮时，Layer2层却不能随窗口的变化而作出调整，需要刷新一下才会移至窗口中心，怎么办？别忘了我们还有onResize动作，在＜body＞中选中onload=“BW＿centerLayers()”后复制并粘贴在此动作后面(记住要空一格)。再将onload改名为onResize，这样在页面加载时会执行两个事件，即onLoad和onResize。OK!打开浏览器用不同的分辨率预览一下吧。你会发现“层”已经变得很听话了。
基础（29）深入了解Dreamweaver CS3中的内置Fireworks功能
Adobe官方将在其他软件中内建Fireworks技术称为Fireworks技术，网上也称之为内建图片编辑器。Dreamweaver CS3给人的一个感觉就是与Adobe公司其它产品的全面无缝集成，这样就大大缩短了开发人员的开发周期，提高工作效率。以前的Dreamweaver中是没有图片处理功能的，即使你要处理也只能使用CSS中的相关滤镜进行一些效果的改变，而大多数特效的制作我们则必须使用Fireworks或者Photoshop工具。现在好了，新版的Dreamweaver CS3中集成了一些简单的图片处理工具，使Dreamweaver不仅具有本身应该拥有的功能，还能够对图片进行简单的处理，是不是很方便、下面让我们来了解这个工具的具体特性与使用方法。 在Dreamweaver CS3环境中先选择一幅图片，在下边的属性对话框中就会出现内建图片编辑器（图1）。我们看一下对话框中的选项。用框圈起来的就是我们提到的内建Fireworks技术。我们先用最左边的copy工具来选择图像的一部分（图2），中间框住的部分就是我们最后要保留的部分。另外大家还可以通过拉动框四面的控制点来调整他的大小以及拖动它的位置，选择好后按回车，如何，图像是不是已经被我们裁了一块了?可能这时图片大小还有些不符合我们的要求，别急，我们来更改一下它的大小。在图片尺寸显示处输入你要的尺寸，如宽530px，高280px，当输入以后，宽和高之间用一个回旋的箭头连接起来，这个功能同样是新版Dreamweaver所特有的。在图片的尺寸处假如出现这种箭头，则表明你当前所选择的图片进行过人为的拖放变化，假如想恢复原始大小则点击回旋箭头即可。假如大家在调整好大小后想把图片的真实尺寸也变成530×280像素，那么就要用到另一个新工具resample（加框部分第2个图标），将图片大小调整后会发现原来灰色的resample工具变亮，点击后图片就会变成你所需要的大小。同时图片实际尺寸也发生了变化而不是以前简单的拉伸变化。以上谈到的两个工具都是对图片的尺寸进行调整的工具，而下面的两个工具则是对图像的画质进行简单变化的工具。brightness and contrast（亮度与对比度，加框处第3个图标）以及sharpen（锐化，加框部分第4个图标）。 点击第一个亮度与对比度工具图标，弹出对话框，可以对一些较暗的图片进行亮度与对比度的处理，并填入调整后的数值（图3）。改变后图片的效果如(图4)。与前面的图比较是不是有了很明显的变化?锐化工具的使用与亮度和对比度工具的使用基本相同，操作方法也一样。现在即使不会其它图像处理软件，只用简单的Dreamweaver中的内建Fireworks技术也可以制作简单的图像后期效果了，真是方便!
DW MX 2004 制作树状菜单[动画]
感谢LeXRus为我们带来他费心制作的教程，这是一个非常棒的动画教程，教程中不仅有 DW MX 2004 的操作方法，还有一些代码的写作和方法，启发很大，直观生动，对于 Dreamweaver 的进阶者来说，收获很大。欢迎访问其个人网站 http://lexrus.blueidea.com/开始播放( 4130KB SWF 800*600 )查看效果下面是对家教中用到的脚本的解释，与教程中略有差异：
聚焦 DreamWeaver MX 2004
构筑专业的网络站点和应用程序,先进的设计工具,功能强大，开放式集成系统；流畅的开发进程。 Macromedia Dreamweaver MX 2004提供众多功能强劲的可视化设计工具、应用开发环境以及代码编辑支持。使开发人员和设计师能够快捷的创建代码规范的应用程序,集成程度非常高，开发环境精简而高效，开发人员能够运用Dreamweaver与他们的服务器技术构建功能强大的网络应用程序衔接到用户的数据、网络服务体系。 Dreamweaver MX 2004提供基于强大的规范管理来确保高质量的设计，设计环境提供Css迅速高效的开发代码简洁、专业规范的站点。 Dreamweaver MX 2004是开放式和可扩展的。赋予你最大的自由度和灵活性来选择今天或将来最适合你工作的技术。 1.将世界一流水平的“设计”和“代码”编辑器合二为一在设计窗口中精化源代码，使你能够按工作的需要定制自己的用户界面. 2.利用丰富的CSS样式表支持构筑复杂的、标准规范的站点。同时提供了丰富的使用工具用于快速选择和样式属性控制工具. 3.跨浏览器有效性检查 当保存时自动地检查当前的文档的跨浏览器有效性(兼容)，可以指定何种浏览器为测试用浏览器同时自动地检验以确定页面有没有目标浏览器不支持的tags或CSS结构。动态跨浏览器有效性检查功能可以自动核对tags和CSS规则是否适应目前的主浏览器(兼容性) 4.使用内置的图形编辑程序让开发更加节省时间。 裁剪、缩放等一些辅助性的图像编辑功能可以不用离开dreamweaver就能够完成，编辑工具是内嵌的Macromedia Fireworks技术。 5.创建更适用的用户界面 在设计模式下允许开发者可以不用固定的浏览器预览数据，而利用Live Data窗口就能够预览实时数据