HTML 代码编辑

 

快速标记编辑器

  增加了快速标记编辑器,在 Dreamweaver 的文档窗口就能迅速修改、增加、删除 HTML 代码,不必开关“ HTML Source inspector ”,这是 3.0 版提供的一种轻松高效的编辑和检查代码的方式。

  按“ Ctrl+T ”键,或者用鼠标按属性面板右上角的按钮,打开这个编辑器,如图。
快速标记编辑器

  快速标记编辑器有三种模式,决定于所选择的内容。

  1)插入代码,如果没在文档中选择任何内容,将以插入模式打开,在当前位置插入代码。

  2)编辑标记,用来编辑已有标记的属性,或改变标记。如果选择的内容包含完整的 HTML 标记,将以该模式打开,编辑时按“ Tab ”和“ Shift+Tab ”键在不同的属性间移动。如果将光标放到最后并输入标记,会出现错误信息,所有输入的内容将被忽视。

  3)包围标记,给选定的内容添加新的标记。如果当前选择没有包含完整的标记,则以包围标记模式打开。

  在使用快速标记编辑器的时候,当停止击键片刻,就会出现一个提示选单,列出当前位置能够使用的所有合法标记。如果用户只输入开始标记的话,对应的结束标记会自动加入。

  用鼠标按住快速标记编辑器左边的标题栏,可改变它在文档窗口的位置。

  编辑完毕,按“ Enter ”键或者在快速标记编辑器外按鼠标,编辑结果即刻生效,同时关闭编辑器。按“Esc”,则不改变原来的代码。但对于编辑标记模式,稍有不同,参考下面的定制快速标记编辑器段落。

  连续按“ Ctrl+T ”键在三种模式间切换。

  在快速标记编辑器也可以使用同样的方法,选择当前标记的父标记和子标记。

  按“ Ctrl+Shift+< ”,或者主选单“ Edit|Select Parent Tag ”,选择父标记;

  “ Ctrl+Shift+> ”,或者主选单“ Edit|Select Child ”,选择子标记,如果当前标记不包含任何别的标记,则选择其中的内容。

  用户可以根据自己的需要定制快速标记编辑器,打开主选单“ Edit|Preferences ”,在类别中选择“ Quick Tag Editor ”。对于编辑标记模式,修改后按“ Tab ”或者“ Shift+Tab ”,改变将立刻生效,如果不想这样,而是在离开快速标记编辑器后再生效,关闭“ Apply Changes Immediately While Editing ”即可;不选“Enable Tag Hints”,关闭提示。还可以设定提示出现的时间。

“ HTML styles ”面板

  原来的 Styles 面板现在称“ CSS Styles ”面板,新增“ HTML styles ”面板,与前者不同,它使用标准的 HTML 标记设定文本的格式。虽然 CSS 不错,但低版本的浏览器不支持。想要网页具有更好的兼容性,用这个面板可快速设定文本格式,有利于统一网站的外观和风格。建议同时用“ CSS Styles ”和“ HTML styles ”,前者充分利用了 CSS 和高版本浏览器的功能,后者保证使用 3.0 版本以下的浏览器时,尽可能地显示想要表现的外观。

  与“ CSS Styles ”不同,如果修改了“ HTML styles ”中的样式,已经使用该样式的网页不会自动更新。

  “ HTML styles ”面板的使用很容易。

  查看、编辑已有的样式:选择一个样式,在上下文选单选择“ Edit ”,或者双击该样式。在“ Define HTML Style ”对话框,查看或者修改该样式的设定,包括名称、作用对象、作用方式、字体、对齐方式等,作用对象不同的样式,它们的图标也不同;Define HTML Style

  使用样式:首先选择文本,然后在“ HTML styles ”面板选择样式,如果面板上的“ Auto Apply ”复选项已选,该样式会自动作用于选定的文本,否则,按“ Apply ”按钮;

  如果样式太多,用“ HTML Style ”面板右下角的垃圾桶删除;

  清除网页中的文本格式:面板里有二个命令分别用来清除段和选定文本的格式,不管文本的格式是不是用“ HTML styles ”面板建立的,或者你很少使用 HTML 样式,这二个命令对于编辑修改文本的格式仍是很有用的。

  建立新的 HTML 样式的方法有多种:

  1)直接建立

  在“ HTML styles ”面板右下角,按“ New Style ”图标,或者按主选单“ Text|HTML Styles|New Style ”。弹出“ Define HTML Style ”对话框,输入名称,调整设置;

  2)基于已有文本

  在网页里选定文本并设定格式。再按“ HTML styles ”面板右下角的“ New Style ”图标,然后在“ Define HTML Style ”对话框输入新的 HTML 样式的名称。需要的话,调整它的设置;

  3)基于已有样式

  选择一个样式作为模板,在上下文选单按复制命令,这时弹出“ Define HTML Style ”对话框。修改名称和设置;

  共享 HTML 样式。

  网站根目录的“ Library ”文件夹的文件“ styles.xml ”包括当前网站所有的 HTML 样式的信息,可以 put、get、check in、check out 甚至复制到其他网站的“ Library ”文件夹。还可以为这个文件建立“设计说明”。

改进的“ HTML Source inspector ”

  往返式编辑一直是 Dreamweaver 的重要特性之一,这一特性使得 Dreamweaver 不象 Frontpage 之类的所见所得编辑器重新格式化代码,因而更加灵活有力,“ HTML Source inspector ”就是这一特征的表现,在 Dreamweaver 文档窗口对网页所作的任何改变立刻在“ HTML Source inspector ”反映出来,反之亦然。

  现在至少有三种编辑代码的方法,各有特点:快速标记编辑器,轻松、针对性强;外部代码编辑器,可以充分利用第三方编辑器的强大功能,但是要离开 Dreamweaver 的文档窗口,而且无法用历史面板记录它的所作所为;另外一个就是“ HTML Source inspector ”,虽然占用资源较多,但不必离开文档窗口,非常直观。

  3.0 版增强了它的功能:显示行号,便于定位和查错,点击行号就可以选择一整行,可用鼠标拖动选择的代码,还可以把“ HTML Source inspector ”与其他浮动面板放在一起。

增强的第三方标记支持

  让用户指定 Dreamweaver 忽视某些标记,编辑 ASP、ColdFusion、PHP、JSP 等更加方便。

  打开设置窗口(主选单“ Edit|Preferences ”),在“ HTML Rewriting ”设置。

  这一功能是可以扩展的,通过与第三方标记数据库中对比来辨别。标记文件在 Dreamweaver 安装路径下的“ Configuration/ThirdPartyTags ”文件夹。

添加、删除 Netscape Resize Fix

  当 Netscape Navigator 4.x 的某些版本浏览使用层和 CSS 的网页时,如果调整窗口的大小,会错误显示,以前需要第三方插件来解决这个问题。现在可以自动加入 JavaScript 脚本来修正。

  单击主选单“ Edit|Preferences ”,在类别中选择“ layers ”,确定“ Add Resize Fix when Inserting Layer ”已经选上。如果不愿自动添加,可关闭该选项,通过主选单的“ Commands|Add/Remove Netscape Resize Fix ”来完成。

回上一页