推荐阅读
ps减去顶层形状不管用什么意思在哪设置？
在用ps做路径或者形状合成的时候，经常会做所谓的布尔运算，也就是形状或者路径的加减乘除，其中比较难理解的是减去顶层形状，如果只是减去形状，可能要更容易理解，那么减去顶层到底是什么意思，哪个是顶层形状，顶层是怎么设置的，能更改么，带着这些问题且看本文讲解。 1、路径工具选中之后，在上端选项的【路径操作】菜单中，可以找到【减去顶层形状】， 2、举例说明一下，左侧工具栏切换到【椭圆工具】，在背景图上绘制出一个圆形，图层面板上可以看到新增了一个形状图层，笔者设置为形状，是为了更加方便理解，当然这里也可以绘制路径。 3、一个圆形形状画出来之后，如果要再画一个元，可以直接在背景图上话，默认情况下鼠标变为【加号】样式，此时会自动新增一个形状图层，也就是说这两个形状，产生了两个图层，如果要做布尔运算，是需要先合并形状，在进行设置，形状的合并可以使用快捷键“Ctrl+E”， 4、绘制第二个圆，也可以在一个图层上完成，前提是先按Shift键，此时鼠标变为了一个大一个小【双加号】样式，按住shift键，再按住鼠标左键，此时就可以松开shift键了，如果想要正圆形，可以继续按住shift键， 5、两个圆形绘制完成，默认的路径操作都是【合并形状】，也就是相加的效果，大圆加上小圆，得到的还是大圆，所以没有变化，想要得到圆环的效果，就要减掉小圆，此时用【路径选择工具】点击选中小圆，上端选项中，点击【路径操作】图标，下拉菜单里面，点击【减去顶层形状】， 6、最终的效果如下图所示，小圆被减去，剩下的是圆弧效果， 7、那么为什么小圆就是顶层图形？因为先画的大圆，后画的小圆，所以小圆处于顶层，其实形状的层级是可以手动设置的，选中形状之后，点击上端选项【路径排列方式】，下拉菜单里面，可以看到【将形状设置为顶层】，以及其他选项，所以【减去顶层形状】，就是减去处于顶层的那个形状。 路径的布尔运算，需要路径或者形状处于一个图层中，如果在操作中遇到问题，可以在下方留言讨论。
Photoshop 鼠绘紫魅妖姬
最近在一本杂志上看到一个非常妖媚的女子，她拥有超黑而又超密的睫毛、黑黑的眼线、大片的腮红、红红如水晶般的双唇、乌黑的头发。充满着神秘气息的女子，很是抢眼。笔者今天来告诉大家此紫魅妖女的PS鼠绘制作过程。 老规矩，我们先来看看我们要打造的这位紫魅妖姬的样子： 最终效果图 1.首先打开PS，建立一个新的文件，长宽自己来定就可以最重要的是分辨率定为72就可以。正常屏幕观看给72就可以如果要打印出来的话就要根据纸张的大小、材质来定了。多多学习一下打印方面各个参数也是很不错的，对以后的实践工作会带来很大的帮助。（图1-1） 图1-1 2.用钢笔工具把人物的大体轮廓勾画出来，这个图绘制的是正面的效果，正面比较好绘制，把路径保存起来。新建一个图层，填上皮肤的颜色，这里皮肤的颜色RGB值为：239、198、178。（图2-1） 图2-1
用Photoshop打造撕纸文字效果
最终效果图 1、新建一个文件，设置宽度为10厘米，高度为5厘米，分辨率为300像素，模式为RGB的白色文件。 2、打开通道面板，在控制面板下方单击“创建新通道”按钮，生成新的通道Alpha 1，执行菜单栏中的“滤镜”“渲染”“云彩”命令，效果如图01所示。 图01 3、进入图层控制面板，在控制面板下方单击“创建新的图层”按钮，生成新的图层“图层1”，选择工具箱中的“横排文字工具”，在文件窗口中输入文字，效果如图02所示，按确认键，文字变为选区，效果如图03所示。 图02 图03 4、单击工具箱下方的“以快速蒙版模式编辑”按钮，使图像进入快速蒙版状态，效果如图04所示。 图04 5、执行菜单栏中的“滤镜”“像素化”“晶格化”命令，在弹出的“晶格化”对话框中，将单元格大小选项设为7，如图05所示，单击好，效果如图06所示。 图05 图06 6、单击工具箱下方的“以标准模式编辑”按钮，使图像退出快速蒙版状态，效果如图07所示。 图07 7、打开一幅报纸图片，并调整它的色相/饱和度，效果如图08所示。执行菜单栏中的“编辑”“定义图案”命令，在打开的对话框中单击确定，将报纸定义为图案。 图08 8、执行菜单栏中的“编辑”“填充”命令，打开填充对话框，设置参数如图09所示，选择自定图案为报纸图案，单击确定，文字效果如图10所示。 图09 图10
抽线效果新思考
Photoshop中的混合模式是其理解难点，它的实质是一种特殊形式的看不见蚁行线的选择。通过混合模式，可以以确定的方式决定哪些色阶的像素被屏蔽或者改变，因此，了解混合模式的作用机理，对用户有的放矢地使用PS达到目的非常重要。下面通过一个实例，说明如何使用PS中的颜色减淡模式抽出图像中的线条，以及由此引发的思考。 打开图像。 将“背景副本”的图层混合模式由正常变为“颜色减淡”，文档似乎变得空无一物，但是细心的读者会发现图像上还有一些黑色的杂点。想一想这是原图中的什么色阶的像素？
最新发布
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、保存文件，在浏览器中浏览，用鼠标按住月历即可在页面中自由拖动。 怎么样，蛮酷吧？