推荐阅读
详细解析Photoshop DR3磨皮插件使用教程
今天给大家介绍一款更专业快捷的PS磨皮插件：Delicious Retouch Panel 3.0(简称DR3)。这是一款photoshop人像美容扩展面板插件，效果要比Portraiture插件好，而且使用面板中包含多种适用于人像修饰的功能，例如完美皮肤、一键磨皮、高低频、皮肤纹理、双曲线加深减淡等功能，可以快速进行人像美容修饰，比较适合影楼和独立摄影师用于快速处理皮肤。温馨提示：这个版本的插件和安装方法不适用于Photoshop CS6第一讲：介绍DR3的安装Win安装方法：1、首先打开PS安装路径D:/Program Files/Adobe/Adobe Photoshop CC 2015.5/Required/CEP/extensions(PS安装在哪个盘就打开相应的盘符，我这里是装在D盘，所以打开的是D盘，如果你的在C盘，那就是C盘)2、然后打开购买下载得到的扩展面板，找到:“DeliciousRetouch加强中文版”文件夹，然后复制这个文件夹，粘贴到刚才打开的PS面板目录：D:/Program Files/Adobe/Adobe Photoshop CC 2015.5/Required/CEP/extensions(PS安装在哪个盘就打开相应的盘符，我这里是装在D盘，所以打开的是D盘，如果你的在C盘，那就是C盘)
PS合成身处恐怖场景中祈祷的女孩照片
本教程的合成效果有点另类，可能有些人不太适应。不过不管效果怎样，作者制作得非常细腻，从合成的角度来说是非常不错的。我们合成的时候需要认真构思好主题，然后找相关的素材去丰富画面和细节，尤其是色调方面，要追求统一和完美。最终效果 一、打开下图所示的人物素材，用自己熟练的方法把人物抠出来，如下图。 二、打开下图所示的背景素材，将抠好的人物放入背景素材中。
PS给树林中拍摄的婚纱照添加阳光透射和梦幻烟雾效果
本教程介绍树林透射光束的制作方法。大致分为两个大的部分来完成：首先是底色的渲染，选择好需要添加光束的位置，然后在通道里面截取这一部分，适当用模糊滤镜做出类似光束的效果，再调出通道选区，在图层面板新建图层填色，并改变图层混合模式和不透明度就可以做出底色。后期再自制一些方式光束即可。原图 <点下图查看大图>最终效果 <点下图查看大图>1、打开原图素材，按Ctrl + A将画面全选，按Ctrl + C 复制。2、进入通道面板，新建一个通道，按Ctrl + V 把复制的图片粘贴进来。3、在新通道内选取左上角并将其他地方填充黑色。
Micromedia Dreamweaver UltraDev 安装及使用教程（三）
对象面板（Object）其实集成了 Dreamweaver 主菜单中 Insert 中的选项，它的对象全是插入对象。具体功能我在前面的 Insert 菜单中已经讨论过，在此不一一细说，图标很直观，用鼠标指向图标，就有相关的提示，相信大家一眼就能看出来。（图七） 图7 属性面板（Properties）比较灵活，变化比较多，它随着您的选择对象不同而随着改变，您在使用 Dreamweaver UltraDev 时应注意一点：Dreamweaver UltraDev 的属性菜单完全是随您的选择区域来决定的！比如您选择了一幅图象，那么属性面板上将出现图象的相应属性，如果是表格的话，它相应的会变化成表格的相应属性，请注意属性面板中的图标，单击后将出现更多的扩展属性。单击图标，将关闭扩展属性，返回原始状态。总的来说，属性面板集成了 Modify 和 Text 菜单的选项。 （图八） 图8 快速启动档（Launcher） 快速启动档集中了 Dreamweaver UltraDev 1.0 中最重要的四个功能：它们分别是 Site（站点管理器）、Data Bindings（数据绑定器）、Server Behaviors（动作编辑器）、HTML Source（源代码编写器）。（图九） 图9 状态栏 状态栏的左边一部分是显示您当前光标区的代码情况，比如则表示您当前光标处于文档主体的表格中的一个表单内，您可以用鼠标任意选定其中的一句代码，单击后所选中的代码会加粗，在用户界面内被其代码作用的所有文档将会处于选取状态。这样大大方便了用户对源代码的控制和操作，提高了准确度。 状态栏右边剩下的那部分由三部分组成，从左到右分别表示您当前的用户界面是在什么分辨率下模拟的，您也可以自己定制您需要的分辨；中间的部分显示您目前编辑的文档（包括图象等）共有多少字，并模拟一定的传输速率计算出相的下载时间，使用户可以随时掌握自己页面的总容量，作出相应的决定。最右边的一部分就是上面所述的ＬＡＵＮＣＨＥＲ（快速启动档），这里我就不再复述了。（图十） 图10 OK！让我们一起开始 Dreamweaver UltraDev 1.0 之旅吧！我敢打赌您和我一样一定不会觉得乏味！因为它真的很有趣！ 三、Micromedia Dreamweaver UltraDev 1.0 的使用 开始制作我们的第一个页面吧，就像下面您看到的这种效果：（图十一） 图11 每个编程语言一般都会一次开始入门之旅，我们也不例外,首先了解静态页面的制作。 单击 File-->New，建立一个新的页面，此时一个新的窗口会弹出，我们在此窗口打上“Hello World！”几个字母，回车键（您只想换行的话，主菜单 Insert-->Line Break 或 SHIRT+ 回车键）后再换行输入第二行文字“这是一个 Micromedia Dreamweaver UltraDev 1.0 的演示页”。 好了，要放的东西已经放好了，下面我们开始编排文字，当然在编辑时我们应该先把属性浮动面板打开，我们先为第一行文字选择字号，选择 ＋２，单击使其加粗，然后单击选择一种深红色，最后单击使其居中，这样第一行的工作就完成了。哇！用起来怎么像 Word 一样！ 再下来我们将第二行文字选定，同样用上述方法将字体放大一号，然后我们设法加上下划线，遗憾的是在属性面板中我们找不到完成这项任务的图标，因此我们必须在菜单 Text-->Style 中去寻找。找到了！加斜后，我们最后的工作就是让这句话变成蓝色，让我们用鼠标选取这句话，然后再单击选取一种蓝色即可，存盘退出，OK！您的第一个页面已经完成了，是不是很简单？看上去现在这活儿比打字还要简单，当然您可以在 Modify-->Page Properties 中修改一些资料，比如加上背景色，背景图案，链接色定义和文档标题。我们知道一个页面光有文本是无法吸收人的，因此我们必须在文档中加入其他的元素，图像当然是最基本的，图文并茂向来就是衡量是否是一篇好作品的准线，这一次让我们来学会如何插入图像、表单、超链接以及其他的一些元素。让您的页面活跃起来！
最新发布
Dreamweaver网页制作技巧：使用模板
随着Internet的普及，很多人已经不满足于仅仅上网冲浪，而希望深入地参与其中。现在，拥有自己的Web网站已经成为一种潮流。虽然制作一个简单的网页并不困难，但是制作出超凡脱俗的网站就不那么容易了，因此我们特意为大家准备了最新网站设计软件Dreamweaver MX 2004的系列教程，希望对大家有所帮助。 通常在一个网站中会有几十甚至几百个风格基本相似的页面，如果每次都重新设定网 页结构以及相同栏目下的导航条、各类图标就显得非常麻烦，不过我们可以借助Dreamweaver MX 2004的模板功能来简化操作。其实模板的功能就是把网页布局和内容分离，在布局设计好之后将其存储为模板，这样相同布局的页面可以通过模板创建，因此能够极大提高工作效率。 一、制作模板 制作模板和制作一个普通的页面完全相同，只是不需要把页面的所有部分都制作完成，仅仅需要制作出导航条、标题栏等各个页面的公有部分，而把中间区域用页面的具体内容来填充。 第一步:先在Dreamweaver MX 2004中运行“File→New”命令，接着从图1所示的窗口中依次选定“Template page→HTML template”选项，点击“Create”按钮之后即可创建一个模板文件。 第二步:在页面设计视图下插入网页框架、导航条、Flash标题等所有页面公有的元素(图2)，然后运行“File→Save”命令将这个模板保存下来。
解决在DW中不支持中文文件名的方法
用Dreamweaver制作网页时，如果插入的图片、GIF动画、声音、视频或链接的网页是用中文命名的，在用IE浏览器浏览时可能显示不出来。以至于大家不得不将用到的素材全改为英文文件名，然后再在Dreamweaver中引用。随着素材的增多，因为是英文文件名，要查找某个文件是多么不方便呀！ 经过摸索，笔者发现Dreamweaver可以插入以中文命名的素材、也可以链接以中文命名的网页。在插入素材或链接网页后切换到代码窗口，将乱码文件名改为相应的中文文件名即可。 注意：“属性”面板中已显示出插入或链接的中文文件名，但在代码窗口中显示的是乱码，你只需按照“属性”面板所显示的文件名将代码中的乱码改正过来即可。这样再用IE浏览器浏览就可以显示出来。
Macromedia Dreamweaver 8.0.1更新
Macromedia Dreamweaver 8 是建立 Web 站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。从对基于 Css 的设计的领先支持到手工编码功能，Dreamweaver 提供了专业人员在一个集成、高效的环境中所需的工具。开发人员可以使用 Dreamweaver 及所选择的服务器技术来创建功能强大的 Internet 应用程序，从而使用户能连接到数据库、Web 服务和旧式系统。 2006 年 3 月 3 日8.0.1Update 该产品更新修复了 Dreamweaver 8.0 中的错误。所有 Dreamweaver 8.0 用户都应该应用此更新程序，与所使用的操作系统无关。此更新程序会将 Dreamweaver 8.0 更新至 8.0.1 版本。将提供完整的发行说明。 8.0.1 更新解决的问题 8.0.1 更新用于修正 Macintosh 和 Windows 平台上的 Dreamweaver 8 中的错误。以下列出了其中解决的一些比较重要的问题。有关修正的所有错误的列表，请访问 Adobe 网站*。 启动 该更新修正了时有发生的 Dreamweaver 在几天后无法启动的问题。 文件面板 (Macintosh) Macintosh 上的 Dreamweaver 在调整“文件”面板的大小时需要很长时间，如果“资源”面板中包含大量图像文件，也需要很长时间才能显示出来，该更新修正了这两个问题。
Adobe Dreamweaver CS3 暨Creative Suite 3问世
什么是 Dreamweaver CS3? 借助 Adobe Dreamweaver CS3 软件, 快速、轻松地完成设计、开发和维护网站和 Web 应用程序的全过程。Dreamweaver CS3 是为设计人员和开发人员而构建的, 它提供一个选择: 是在直观的可视布局界面中工作, 还是在简化的编码环境中工作。与 Adobe Photoshop CS3、Adobe Illustrator CS3、Adobe Fireworks CS3、Adobe Flash CS3 Professional 和 Adobe Contribute CS3 软件的智能集成确保在您喜爱的工具上有一个有效的工作流。2，Adobe Creative Suite 3 Design Standard 侧重于专业的打印设计。3，Adobe Creative Suite 3 Web Premium 组合了出类拔萃的 Web 设计和开发工具。而Dreamweaver CS3就属于该版本，该版本组合了出类拔萃的 Web 设计和开发工具。 4，Adobe Creative Suite 3 Web Standard 供专业的 Web 开发人员使用。包含了 Flash CS3 Professional、Dreamweaver CS3、Adobe Fireworks CS3、Contribute CS3的标准网页三剑客版。5，Adobe Creative Suite 3 Production Premium 对于视频专业人士而言, 是一套完整的后期制作解决方案。6，Adobe Creative Suite 3 Master Collection 可以让您在当今最全面的创作环境中跨媒体 (打印、Web、交互、移动、视频和影片) 进行设计。 虽说是6大版本，但实际上只有4个版本（Design和Web版的完整和精简版而已）
基础（4）设置Dreamweaver远程文件夹
此文件夹是您存储用于生产、协作、部署或许多其它方案的文件的位置。远程文件夹通常位于运行 Web 服务器的计算机上。可通过在“基本”选项卡中回答向导提出的问题或者单击“高级”选项卡并直接输入信息的方式来设置此文件夹的选项。 在 Dreamweaver“文件”面板中，该远程文件夹被称为远程站点。在设置远程文件夹时，必须为 Dreamweaver 选择访问方法，以将文件上传和下载到 Web 服务器。 有关设置远程文件夹的教程，请参阅 www.adobe.com/go/vid0162_cn。 注： Dreamweaver 可连接到支持 IPv6 的服务器。所支持的连接类型包括 FTP、SFTP、WebDav 和 RDS。有关详细信息，请参阅 www.ipv6.org/ 选择“站点”>“管理站点”。 单击“新建”并选择“站点”以设置新站点，或选择现有的 Dreamweaver 站点并单击“编辑”。 单击“高级”选项卡，选择“远程信息”类别，然后选择在本地和远程文件夹之间传输文件时要使用的访问方法： 无 如果不希望将站点上传到服务器，可保留此默认设置。 FTP 如果使用 FTP 连接到 Web 服务器，请使用此设置。 本地/网络 在访问网络文件夹或在本地计算机上存储文件或运行测试服务器时使用此设置。 RDS （远程开发服务），如果使用 RDS 连接到 Web 服务器，请使用此设置。对于这种访问方法，远程文件夹必须位于运行 Adobe® ColdFusion® 的计算机上。 Microsoft Visual SourceSafe 如果使用 Microsoft Visual SourceSafe 连接到 Web 服务器，请使用此设置。只有 Windows 支持此方法；要使用此方法，必须安装 Microsoft Visual SourceSafe Client 第 6 版。 WebDAV （基于 Web 的分布式创作和版本控制）如果使用 WebDAV 协议连接到 Web 服务器，请使用此设置。 对于这种访问方法，必须有支持此协议的服务器，如 Microsoft Internet Information Server (IIS) 5.0，或安装正确配置的 Apache Web 服务器。 注： 如果选择 WebDAV 作为访问方法，并且是在多用户环境中使用 Dreamweaver，则还应确保您的所有用户都选择 WebDAV 作为访问方法。如果一些用户选择 WebDAV，而另一些用户选择其它访问方法（例如 FTP），那么，由于 WebDAV 使用自己的锁定系统，因此 Dreamweaver 的存回/取出功能将不会按期望的方式工作。 设置 FTP 访问的选项 选择“站点”>“管理站点”。 单击“新建”并选择“站点”以设置新站点，或选择现有的 Dreamweaver 站点并单击“编辑”。 选择“高级”选项卡并单击“远程信息”类别。 选择 FTP 并输入 Web 站点的文件要上传到的 FTP 主机的主机名。 FTP 主机是计算机系统的完整 Internet 名称，如 ftp.mindspring.com。请输入完整的主机名，并且不要附带其它任何文本。特别是不要在主机名前面加上协议名。 注： 如果不知道 FTP 主机，请与 Web 站点托管服务商联系。 输入您在远程站点上存储公开显示的文档的主机目录（文件夹）。 如果不能确定应输入哪些内容作为主机目录，请与服务器管理员联系或将文本框保留为空白。在有些服务器上，根目录就是您首次使用 FTP 连接到的目录。若要确定这一点，请连接到服务器。如果出现在“文件”面板“远程文件”视图中的文件夹具有像 public_html、www 或您的登录名这样的名称，它可能就是您应该在“主机目录”文本框中输入的目录。 输入用于连接到 FTP 服务器的登录名和密码。 单击“测试”测试登录名和密码。 默认情况下，Dreamweaver 会保存密码。如果您希望每次连接到远程服务器时 Dreamweaver 都提示输入密码，请取消选择“保存”选项。 如果防火墙配置要求使用被动式 FTP，请选择“使用被动式 FTP”。 “被动式 FTP”使您的本地软件能够建立 FTP 连接，而不是请求远程服务器来建立它。如果不能确定是否使用被动式 FTP，请询问系统管理员。 有关详细信息，请参阅 Adobe 网站上的 TechNote 15220，网址为 www.adobe.com/go/15220_cn。 如果使用支持 IPv6 的 FTP 服务器，请选择“使用 IPv6 传输模式”。 随着 Internet 协议第 6 版 (IPv6) 的发展，EPRT 和 EPSV 已分别替代 FTP 命令 PORT 和 PASV。因此，如果您正试图连接到支持 IPv6 的 FTP 服务器，必须为数据连接使用被动扩展 (EPSV) 和主动扩展 (EPRT) 命令。 有关详细信息，请参阅 www.ipv6.org/。 如果通过防火墙连接到远程服务器，请选中“使用防火墙”。 单击“防火墙设置”编辑防火墙主机或端口。 如果希望自动同步本地和远程文件，请选择“维护同步信息”。（默认情况下选择该选项。） 如果希望在保存文件时 Dreamweaver 将文件上传到远程站点，请选择“保存时自动将文件上传到服务器”。 如果希望激活“存回/取出”系统，请选择“启用存回和取出”。 单击“确定”。使用 FTP 访问连接到或断开远程文件夹 在“文件”面板中： 要进行连接，请单击工具栏中的“连接到远端主机”。 要断开连接，请单击工具栏中的“从远端主机断开”。设置本地或网络访问的选项 选择“站点”>“管理站点”。 单击“新建”并选择“站点”以设置新站点，或选择现有的 Dreamweaver 站点并单击“编辑”。 选择“高级”选项卡，单击“远程信息”类别并选择“本地/网络”。 单击“远程文件夹”文本框旁边的文件夹图标，浏览并选择存储站点文件的文件夹。 如果希望自动同步本地和远程文件，请选择“维护同步信息”。（默认情况下选择该选项。） 如果希望在保存文件时 Dreamweaver 将文件上传到远程站点，请选择“保存时自动将文件上传到服务器”。 如果希望激活“存回/取出”系统，请选择“启用存回和取出”。 单击“确定”。设置 WebDAV 访问的选项 选择“站点”>“管理站点”。 单击“新建”并选择“站点”以设置新站点，或选择现有的 Dreamweaver 站点并单击“编辑”。 选择“高级”选项卡，单击“远程信息”类别并选择“WebDAV”。 对于“URL”，请输入 WebDAV 服务器上您要连接到的目录的完整 URL。 此 URL 包括协议、端口和目录（如果不是根目录）。例如，http://webdav.mydomain.net/mysite。 输入您的用户名和密码。 这些信息用于服务器身份验证，与 Dreamweaver 无关。如果不能确定用户名和密码，请询问系统管理员或 Web 站点管理员。 单击“测试”测试连接设置。 如果希望在每次开始新会话时 Dreamweaver 都记住密码，请单击“保存”。 如果希望 Dreamweaver 自动同步本地和远程文件，请选择“维护同步信息”。（默认情况下选择该选项。） 如果希望在保存文件时 Dreamweaver 将文件上传到远程站点，请选择“保存时自动将文件上传到服务器”。 如果希望激活“存回/取出”系统，请选择“启用存回和取出”。使用网络访问连接到或断开远程文件夹 您无需连接到远程文件夹，因为您一直处在连接状态。单击“刷新”按钮查看远程文件。设置 RDS 访问的选项 选择“站点”>“管理站点”。 单击“新建”并选择“站点”以设置新站点，或选择现有的 Dreamweaver 站点并单击“编辑”。 选择“高级”选项卡，单击“远程信息”类别并选择“RDS”。 单击“设置”按钮并在“配置 RDS 服务器”对话框中提供以下信息： 输入安装 Web 服务器的主机的名称。 主机名可能是 IP 地址或 URL。如果不能确定，请询问管理员。 输入要连接的端口号。 输入根远程文件夹作为主机目录。 例如，c:\inetpub\wwwroot\myHostDir\。 输入您的 RDS 用户名和密码。 注： 如果在“ColdFusion 管理员”安全设置中设置了用户名和密码，则这些选项可能不会出现。 如果希望 Dreamweaver 记住您的设置，请选择“保存”。 单击“确定”以关闭“配置 RDS 服务器”对话框。 如果希望在保存文件时 Dreamweaver 将文件上传到远程站点，请选择“保存时自动将文件上传到服务器”。 如果希望激活“存回/取出”系统，请选择“启用存回和取出”，然后单击“确定”。
Dreamweaver中服务器端 XSL 转换
使用 XSL 转换服务器行为在动态页中插入对 XSLT 片断的引用。插入引用时，Dreamweaver 会在包含运行时库文件的站点根文件夹中生成一个 includes/MM_XSLTransform/ 文件夹。转换指定的 XML 数据时，应用程序服务器使用该文件中定义的函数。该文件负责获取 XML 数据和 XSLT 片断、执行 XSL 转换和在网页上输出结果。 包含 XSLT 片断的文件、包含您的数据的 XML 文件以及生成的运行时库文件都必须在服务器上，页面才能正确显示。（如果您选择远程 XML 文件作为数据源，例如，从 RSS 源选择一个文件，则该文件当然必须位于 Internet 上的其它某个位置。） 也可以使用 Dreamweaver 创建用于服务器端转换的整个 XSLT 页面。整个 XSLT 页面的工作方式与 XSLT 片断的工作方式完全相同，只是在使用 XSL 转换服务器行为插入对整个 XSLT 页面的引用时，插入的是 HTML 页面的完整内容。所以，在插入引用之前必须清空动态页（充当容器页面的 .cfm、.php、.asp 或 .net 页面）中的所有 HTML 代码。 Dreamweaver 支持对 ColdFusion、ASP、ASP.NET 和 PHP 页面执行 XSL 转换。
Dreamweaver CS3的XML数据和重复元素使用指南
当您对“文档”窗口中的元素应用重复区域 XSLT 对象时，重复的区域周围会出现一个灰色的选项卡式细轮廓。在浏览器（“文件”>“在浏览器中预览”）中预览工作时，该灰色轮廓消失且所选内容扩展，以显示 XML 文件中的指定重复元素（如以上说明所述）。 向页面添加重复区域 XSLT 对象时，“文档”窗口中 XML 数据占位符的长度将截短。这是因为 Dreamweaver 更新了 XML 数据占位符的 XPath（XML 路径语言）表达式，使该路径变为相对于重复元素的路径。 例如，以下代码表示包含两个动态占位符的表格，并且没有对此表格应用重复区域 XSLT 对象： 以下代码表示同一个表格，但对表格应用了重复区域 XSLT 对象： 在上例中，Dreamweaver 将位于重复区域（title 和 description）内项目的 Xpath 更新为相对于封闭标签 <xsl:for-each> 内的 XPath，而不是整个文档。 同样，在其它情况下，Dreamweaver 也会生成上下文相关的 XPath 表达式。例如，如果将某个 XML 数据占位符拖放到已应用了重复区域 XSLT 对象的表格中，Dreamweaver 会自动显示相对于封闭标签 <xsl:for-each> 中现有 XPath 的 XPath。
在Dreamweaver CS3中附加XML数据源
注： 您还可以单击“绑定”面板右上角的“源”链接，添加 XML 数据源。 请执行下列操作之一： 选择“附加本地文件”，单击“浏览”按钮，浏览至计算机上的本地 XML 文件，然后单击“确定”。 选择“附加远端文件”，输入 Internet 上某个 XML 文件（如来自 RSS 源）的 URL。 单击“确定”，关闭“定位 XML 源”对话框。 “绑定”面板由 XML 数据源的架构填充。
关于DIV布局拖动保存的实现方法和实例下载
其实也很简单。首先将下列CSS代码复制到HTML代码中<style type="text/css"> body{ background-color:#36393D; font-size:12px; margin:0px; } DIV.dragLayer{ border:1px solid #369; background-color:#6BBA70; margin-bottom:10px; } DIV.dragLayer_over{ border:1px solid #C79810; background-color:#6BBA70; filter:alpha(opacity=80); -moz-opacity:0.8; /* Moz + FF */ opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/ } DIV.clone_dragLayer_over{ border:1px dashed #FA0; background-color:#6BBA70; filter:alpha(opacity=80); -moz-opacity:0.8; /* Moz + FF */ opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/ margin-bottom:10px; } DIV.dragHeader{ width:100%; height:20px ; line-height:20px; background-color:#006E2E; color:#FFFFFF; } DIV.dragHeader_over{ width:100%; height:20px ; line-height:20px; background-color:#C79810; } SPAN.min,SPAN.close{cursor:pointer;font-family:Webdings} #container{margin:0px} #leftcontainer{float:left; width:33%;} #middlecontainer{float:left; width:34%;} #middlecontainer div{margin-left:auto; margin-right:auto} #rightcontainer{float:right; width:33%;} #rightcontainer div{float:right} DIV.content{width:100%; padding:4px} </style> 然后再将下列JS代码也复制到HTML代码中。 最后将下列布局DIV复制到你的HTML页面中<body onLoad_fckprotectedatt=" onLoad="CoolDrag.init('container');""> <br /> <div id="container"> <div id="leftcontainer"> <div style="height:100px; width:318px; " class="dragLayer" id="win1"> <div class="dragHeader"> <div style="float:left">第一个窗口</div> <div style="float:right; "><span class="min">0</span><span class="close">r</span></div> </div> <div class="content">window 1</div> </div> <div style="height:100px; width:318px; " class="dragLayer" id="win2"> <div class="dragHeader"> <div style="float:left">第二个窗口</div> <div style="float:right; "><span class="min">0</span><span class="close">r</span></div> </div> <div class="content">window 2</div> </div> </div> <div id="middlecontainer"> <div style="height:100px; width:318px; " class="dragLayer" id="win3"> <div class="dragHeader"> <div style="float:left">第三个窗口</div> <div style="float:right; "><span class="min">0</span><span class="close">r</span></div> </div> <div class="content">window 3</div> </div> <div style="height:100px; width:318px; " class="dragLayer" id="win4"> <div class="dragHeader"> <div style="float:left">第四个窗口</div> <div style="float:right; "><span class="min">0</span><span class="close">r</span></div> </div> <div class="content">window 4</div> </div> </div> <div id="rightcontainer"> <div style="height:100px; width:318px; " class="dragLayer" id="win5"> <div class="dragHeader"> <div style="float:left">第五个窗口</div> <div style="float:right; "><span class="min">0</span><span class="close">r</span></div> </div> <div class="content">window 5</div> </div> <div style="height:100px; width:318px; " class="dragLayer" id="win6"> <div class="dragHeader"> <div style="float:left">第六个窗口</div> <div style="float:right; "><span class="min">0</span><span class="close">r</span></div> </div> <div class="content">window 6</div> </div> <div style="height:100px; width:318px; " class="dragLayer" id="win7"> <div class="dragHeader"> <div style="float:left">第七个窗口</div> <div style="float:right; "><span class="min">0</span><span class="close">r</span></div> </div> <div class="content">window 7</div> </div> </div> </div> </body> 点击下载完整示例代码
Adobe Dreamweaver CS3创建可拖动日历代码
//定义月历函数 function calendar() { var today = new Date(); //创建日期对象 year = today.getYear(); //读取年份 thisDay = today.getDate(); //读取当前日 //创建每月天数数组 var monthDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); //如果是闰年，2月份的天数为29天 if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29; daysOfCurrentMonth = monthDays[today.getMonth()]; //从每月天数数组中读取当月的天数 firstDay = today;//复制日期对象 firstDay.setDate(1); //设置日期对象firstDay的日为1号 startDay = firstDay.getDay(); //确定当月第一天是星期几 //定义周日和月份中文名数组 var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六"); var monthNames = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"); //创建日期对象 var newDate = new Date(); //创建表格 document.write("") document.write(""); document.write(""); //显示当前日期和周日 document.writeln("" + newDate.getYear() + "年" + monthNames[newDate.getMonth()] + " " + newDate.getDate() + "日 " + dayNames[newDate.getDay()] + ""); //显示月历表头 document.writeln("日"); document.writeln("一"); document.writeln("二"); document.writeln("三"); document.writeln("四"); document.writeln("五"); document.writeln("六"); document.writeln(""); //显示每月前面的"空日" column = 0; for (i=0; i document.writeln("\n "); column++; } //如果是当前日就突出显示(红色)，否则正常显示(黑色) for (i=1; i") } else { document.writeln(""); } document.writeln(i); if (i == thisDay) document.writeln("") column++; if (column == 7) { document.writeln(""); column = 0; } } document.writeln("") document.writeln("") //显示当前时间 document.writeln("当前时间:") document.writeln(""); } //初始化控制变量 var timerID = null; var timerRunning = false; //定义时间显示函数 function stoptime (){ if(timerRunning) clearTimeout(timerID); timerRunning = false;} //定义显示时间函数 function showtime () { var newDate = new Date(); var hours = newDate.getHours(); var minutes = newDate.getMinutes(); var seconds = newDate.getSeconds() var timeValue = " " + ((hours >12) ? hours -12 :hours) timeValue += ((minutes = 12) ? " 下午 " : " 上午 " document.time.textbox.value = timeValue; timerID = setTimeout("showtime()",1000);//设置超时,使时间动态显示 timerRunning = true;} //显示当前时间 function starttime () { stoptime(); showtime();} (2)在HTML文档正文< body>...< /body>中插入JavaScript脚本，并给< body>标记添加一些属性： calendar(); //显示月历 2、切换到设计视图，在页面中插入一层，并把代表HTML文档正文中的JavaScript脚本图标(如果该图标没有显示，请选择View>Visual Aids>Invisible Elements菜单命令)拖入层中。3、选择页面中的层，然后在Behaviors(行为)面板(如果没有打开，选择Window>Behaviors)中单击"+"按钮，从弹出的菜单上选择Drag Layer(拖动层)命令。4、在弹出的Drag Layer对话框中采用默认选项，单击OK按钮。此时，Behaviors面板添加了onClick(单击)事件和Drag Layer动作。5、保存文件，在浏览器中浏览，用鼠标按住月历即可在页面中自由拖动。 怎么样，蛮酷吧？