学院首页 软件应用 编程开发 创意设计 认证培训 软件论坛
Flash Fireworks Dreamweaver Photoshop CorelDraw Illustrator FreeHand 3DsMAX AutoCAD

您的位置:学院 >> 创意设计 >> Dreamweaver >> DW MX新功能试用:代码片段Snippets


DW MX新功能试用:代码片段Snippets


  Dreamweaver MX新增了一个Snippets(代码片段)面板。有了它,代码的重用就变得容易多了。如果该面板没有打开,选择Window>Snippets,可以打开Snippets面板。它位于Code面板组中,如下图所示。

  在Snippets面板里可以存储HTML、JavaScript、CFML、ASP、JSP代码,这样你就可以很方便地重用这些代码。

  1.用Snippets面板插入代码片段

  如果要让插入的代码包围(wrap around)选定对象,就要先在文档中作出选择。然后,在Snippets面板双击选定的代码片段;或在选定的代码片段上右击,再从弹出的菜单上选Insert(插入)命令。

  例如,我们可以在Snippets面板选择Comments>CommentSplitWrap.csn,对文档窗口中选定的文本进行注释,如下图所示。

  此时,如果你打开代码窗口,你就可以看到如下的代码:

  这些代码以暗色和斜体显示,包围着我们选定的对象。到这里,相信你对E文“Wrap around a selection”的理解不会存在什么问题了吧。

  使用Dreamweaver MX预先存储的代码片段,可以快速创建一些页面元素。例如,我们需要在页面创建一个年份选择的下拉菜单,可以选择插入Snippets面板中的Form Elements>Dropdown Menus>Year_1900to2002.csn。操作方法是:在文档中定位插入点,然后在Snippets面板中双击Year_1900to2002.csn,或直接拖拽它到文档中,如下图所示。

  打开代码窗口,你可以看到插入了下面的HTML代码:

<select name="YYYY">
<option value="2002">2002</option>
<option value="2001">2001</option>
  ……
  中间部分省略
  ……
<option value="1901">1901</option>
<option value="1900">1900</option>
</select>

  在浏览器中预览,你就可以在下拉菜单中选择1900-2002之间的任一年份,是不是很方便?

  2.创建自己的代码片段

  如果你自己编写了一段代码,希望在其它页面中重复使用。在此之前,你可能需要多次Copy/Paste。现在,在Dreamweaver MX中,你可以使用Snippets面板创建自己的代码片段,轻松实现代码的重用。操作方法是:在该面板中单击面板下部的New Snippet(新代码片段)图标,弹出Snippet对话框。在该对话框中填写好各栏,然后单击OK按钮,就可以把自己的代码片段添加到Snippets面板。这样,你就可以在设计任一网页时随时取用,方便快捷。

  提示:你也可以用Dreamweaver MX打开已有的网页,在代码窗口中选择要存入Snippets面板的代码片段,然后打开Snippet对话框,选定的代码将自动填写到Insert Code(插入代码)栏中。下图是添加了新的代码片段的Snippets面板。

 

  3.编辑和删除代码片段

  编辑和删除Snippets面板中的代码片段的操作方法是:在Snippets面板中,选择要编辑或删除的代码片段,然后单击该面板下部的Edit Snippet(编辑代码片段)或Remove(删除)图标(通过这些图标的提示可以识别这两个图标);或在选定的代码片段上右击,从弹出的右键菜单上选择Edit或Delete选项,如下图所示。

  如果选择的是Edit,接着会弹出Snippet对话框,你就可以在该对话框编辑原来的代码了。

  4.创建代码片段文件夹和管理代码片段

  为了便于管理代码片段,我们还可以在Snippets面板中创建文件夹,方法是:单击该面板下部的New Snippet Folder(新建代码片段文件夹)图标,或在面板中右击,从弹出的右键菜单上选择New Folder选项。对于面板中已有的代码片段,可以用鼠标从一个文件夹拖曳到另一个文件夹。

  5.与团队成员共享代码片段

  从Dreamweaver MX的Configuration\Snippets文件夹中拷贝要共享的代码片段到共享目录或网络计算机中,其他有访问权的成员即可共享或编辑其中的代码。

  试用第二感觉:代码重用,方便!

技术文章快速查找

栏目导航
软件应用
·操作系统 ·杀毒防黑 ·应用软件
·聊天软件 ·网络软件  
Web开发
·ASP ·JavaScript ·CGI
·JSP ·VbScript ·Web服务器
·PHP ·XML  
开发语言
·VB ·VC ·ASP.NET
·Java ·C/C++ ·Delphi
数据库开发
·MySQL ·SQL/Access ·PowerBuilder
·Oracle ·DB2  
网站设计
·Flash ·Dreamweaver ·HTML/CSS
·Fireworks ·FrontPage  
平面设计
·Photoshop ·CorelDraw ·AutoCAD
·FreeHand ·Illustrator ·3DsMAX
媒体动画
·Director ·Authorware ·Maya
·视频处理    


相关软件 产品库推荐
·笔记本 ·台式机 ·服务器
·数码相机 ·手机 ·GPS
·DV摄像机 ·MP3 ·MP4
·CPU ·硬盘 ·内存
·主板 ·显卡 ·显示器
·打印机 ·投影机 ·路由器

还没人留言,抢个先,哈哈!
对"DW MX新功能试用:代码片段Snippets"的评论 - 快速回贴
内容:
  [完成后可按Ctrl+Enter发布]

百度中 DW MX新功能试用:代码片段Snippets 相关内容
Google搜索中 DW MX新功能试用:代码片段Snippets 相关内容
雅虎中 DW MX新功能试用:代码片段Snippets 相关内容
Sogou搜索中 DW MX新功能试用:代码片段Snippets 相关内容

相关软件 最新回复帖子:

·nesox让电子邮件营销原来如此轻松!
·Windows Vista 中卸载软件的不同方式
·没有mysql支持时的替代方案
·一个可以发送附件及HTML格式邮件的PHP类
·AutoCAD打造精致三维鸟笼实例详解
·Photoshop自定义水晶字特效样式
·AutoCAD三维基础实例教程
·PS为黑背景长发美女照片抠图换背
·用Photoshop自制个性摩托车贴花小经验
·轻松几步将美女照片处理为手工素描


  相关软件 DW MX新功能试用:代码片段Snippets相关文章
DW MX新功能试用:连续空格 图解Dreamweaver MX新特性
Dreamweaver MX新功能(3):应用开发 Dreamweaver MX新功能(2):方便的代码编写
Dreamweaver MX新功能(1):灵活的设计 网页表格制作速查手册
网页设计技巧谈:走出路径的困惑 HTML文件HEAD内部标记浅析
用DW制作有趣的图片探照灯效果 首届“蓝讯杯”网页设计大赛正式开始
在网页中实现360度全景滚动效果图 制作1px边框表格的几种方法
虚线框表格的简单制作方法 DW网页设计批处理揭密
用表格巧妙制作导航条按钮 Macromedia发布HomeSite 5等新软件
最新DW4.02中文版支持多种语言编码 如何制作会移动的广告条
DW4 应用 Firework 文件详解 深入Dreamweaver图层应用